pantoken / colors

colors ​

베타

@pantoken/plugin-colors — InstUI의 @instructure/ui-color-utils을(를) 따라 하는 CSS 전용 색상 연산 도우미들 (alpha, darken, lighten, overlayColors).

InstUI는 빌드 시점에 구체적인 16진수 값들에 대해 tinycolor2을(를) 사용해 해당 값을 계산합니다. pantoken은 브라우저에서(종종 light-dark()을 통해) 해석되는 var(--instui-*) 참조를 내보내므로, 연산은 대신 CSS에서 수행되어야 합니다. 각 헬퍼는 color-mix()와 상대 색상 문법에 기반한 CSS 색상 문자열을 반환합니다 — 두 기능 모두 최신 브라우저의 기본 기능이므로, 단일 표현식으로 토큰을 추적하여 스킴에 따라 달라지는 light-dark() 쌍일 때에도 올바르게 동작합니다. 파생 색상을 하드코딩할 곳이라면 어디서든 이들을 사용하세요.

예제 ​

ts
import { alpha, darken } from "@pantoken/plugin-colors";

// A subtle brand-tinted hover, derived from the brand token (mirrors InstUI's ghost hover).
const hover = alpha(darken("var(--instui-color-institutional-brand-button-primary-bgd)", 10), 10);
// → "color-mix(in srgb, hsl(from var(--…brand-…) h s calc(l - 10)) 10%, transparent)"

타입 별칭 ​

함수 ​