@spectrabrain/eds 0.6.0 → 0.6.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @spectrabrain/eds
 
+## 0.6.1
+
+### Patch Changes
+
+- 737e52c: 소비처 조치: `npm install @spectrabrain/eds`로 업데이트합니다.
+
+  비활성 semantic color token 세 가지를 추가하고 EDS `Button`의 `brand/solid`·`neutral/solid` 비활성 색상 매핑을 갱신합니다.
+
 ## 0.6.0
 
 ### Minor Changes

package/TOKEN_CONTEXT.md

@@ -18,8 +18,8 @@
 
 | 역할 | 의미 색(`brand`·`critical`·`informative`·`positive`·`warning`) | `neutral` | 의미 없이 쓰는 이름 |
 | --- | --- | --- | --- |
-| `bg` | `-primary`, `-weak` | `-primary`, `-weak`, `-inverted` | `layer-basement`, `layer-default`, `layer-floating`, `transparent`, `disabled` |
-| `fg` | 접미사 없음, `-contrast` | 접미사 없음, `-secondary`, `-tertiary`, `-inverted` | `disabled`, `placeholder`, `focus` |
+| `bg` | `-primary`, `-weak` | `-primary`, `-weak`, `-inverted` | `layer-basement`, `layer-default`, `layer-floating`, `transparent`, `disabled`, `disabled-brand-primary`, `disabled-neutral-inverted` |
+| `fg` | 접미사 없음, `-contrast` | 접미사 없음, `-secondary`, `-tertiary`, `-inverted` | `disabled`, `disabled-inverted`, `placeholder`, `focus` |
 | `stroke` | `-primary`, `-weak` | `-contrast`, `-primary`, `-secondary`, `-tertiary`, `-weak` | `focusRing` |
 
 Button 계약에 있는 배경·글자 조합은 `bg-critical-weak`와 `fg-critical`, `bg-neutral-weak`와 `fg-neutral`, `bg-brand-primary`·`bg-neutral-inverted`와 `fg-neutral-inverted`입니다. 본문보다 낮은 위계의 글자는 `fg-neutral-secondary`, 그보다 낮으면 `fg-neutral-tertiary`를 씁니다. 그 밖의 배경 위 글자 색(`brand`·`informative`·`positive`·`warning`의 `weak`·`primary` 배경), 상태 안내(오류 border, badge)의 stroke·fg 조합, `-contrast` fg의 용도, `layer` 계열과 `neutral` 배경의 구분은 `미결`입니다.
@@ -31,7 +31,9 @@ exact token이 없으면 아래 순서로 조건을 하나씩 완화하고, 처
 3. 강도를 같은 의미 안의 가까운 단계로 바꿉니다(`primary`↔`weak`, `neutral`의 `secondary`·`tertiary`).
 4. 의미를 `neutral`로 바꿉니다. `critical`·`warning`·`positive`·`informative`를 `neutral`로 바꿔야 한다면 구현을 멈추고 사용자에게 확인합니다.
 
-버튼은 token을 조합하지 않고 EDS `Button`의 `role`·`variant`를 씁니다. 행동별 조합은 설치된 패키지의 `dist/components/Button/README.md` 「Role과 Variant」를 따릅니다.
+일반 비활성 색상은 `color-bg-disabled`와 `color-fg-disabled`입니다. EDS `Button`은 `brand/solid` 비활성 배경에 `color-bg-disabled-brand-primary`, `neutral/solid` 비활성 배경에 `color-bg-disabled-neutral-inverted`, 두 조합의 전경에 `color-fg-disabled-inverted`를 적용합니다. `color-fg-placeholder`는 입력 placeholder 문구 역할이며 비활성 전경 token과 구분합니다.
+
+버튼은 token을 직접 조합하지 않고 EDS `Button`의 `role`·`variant`를 씁니다. 행동별 조합은 설치된 패키지의 `dist/components/Button/README.md` 「Role과 Variant」를 따릅니다.
 
 ## Typography
 

package/dist/components/Button/spec.json

@@ -1,6 +1,6 @@
 {
   "specVersion": 1,
-  "packageVersion": "0.6.0",
+  "packageVersion": "0.6.1",
   "name": "Button",
   "purpose": "사용자가 즉시 실행할 수 있는 행동과 탐색을 표현하는 인터랙티브 요소입니다.",
   "usageContexts": [

package/dist/components.css

@@ -69,8 +69,8 @@
   --eds-button-style-brand-outline-loading-progressCircle-rangeColor: var(--eds-color-fg-brand);
   --eds-button-style-brand-outline-loading-progressCircle-trackColor: #FFA081;
   --eds-button-style-brand-outline-loading-root-backgroundColor: var(--eds-color-bg-transparent-hover);
-  --eds-button-style-brand-solid-disabled-label-color: var(--eds-color-fg-disabled);
-  --eds-button-style-brand-solid-disabled-root-backgroundColor: var(--eds-color-bg-disabled);
+  --eds-button-style-brand-solid-disabled-label-color: var(--eds-color-fg-disabled-inverted);
+  --eds-button-style-brand-solid-disabled-root-backgroundColor: var(--eds-color-bg-disabled-brand-primary);
   --eds-button-style-brand-solid-enabled-label-color: var(--eds-color-fg-neutral-inverted);
   --eds-button-style-brand-solid-enabled-root-backgroundColor: var(--eds-color-bg-brand-primary);
   --eds-button-style-brand-solid-hover-root-backgroundColor: var(--eds-color-bg-brand-primary-hover);
@@ -117,8 +117,8 @@
   --eds-button-style-neutral-outline-loading-progressCircle-rangeColor: var(--eds-color-fg-neutral);
   --eds-button-style-neutral-outline-loading-progressCircle-trackColor: #D1D5DB;
   --eds-button-style-neutral-outline-loading-root-backgroundColor: var(--eds-color-bg-neutral-primary-hover);
-  --eds-button-style-neutral-solid-disabled-label-color: var(--eds-color-fg-disabled);
-  --eds-button-style-neutral-solid-disabled-root-backgroundColor: var(--eds-color-bg-disabled);
+  --eds-button-style-neutral-solid-disabled-label-color: var(--eds-color-fg-disabled-inverted);
+  --eds-button-style-neutral-solid-disabled-root-backgroundColor: var(--eds-color-bg-disabled-neutral-inverted);
   --eds-button-style-neutral-solid-enabled-label-color: var(--eds-color-fg-neutral-inverted);
   --eds-button-style-neutral-solid-enabled-root-backgroundColor: var(--eds-color-bg-neutral-inverted);
   --eds-button-style-neutral-solid-hover-root-backgroundColor: var(--eds-color-bg-neutral-inverted-hover);

package/dist/index.js

@@ -60,6 +60,18 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#E5E7EB",
     "cssVariable": "--eds-color-bg-disabled"
   },
+  "color-bg-disabled-brand-primary": {
+    "name": "color-bg-disabled-brand-primary",
+    "type": "color",
+    "value": "#FFA081",
+    "cssVariable": "--eds-color-bg-disabled-brand-primary"
+  },
+  "color-bg-disabled-neutral-inverted": {
+    "name": "color-bg-disabled-neutral-inverted",
+    "type": "color",
+    "value": "#9CA3AF",
+    "cssVariable": "--eds-color-bg-disabled-neutral-inverted"
+  },
   "color-bg-informative-primary": {
     "name": "color-bg-informative-primary",
     "type": "color",
@@ -246,6 +258,12 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#D1D5DB",
     "cssVariable": "--eds-color-fg-disabled"
   },
+  "color-fg-disabled-inverted": {
+    "name": "color-fg-disabled-inverted",
+    "type": "color",
+    "value": "#FFFFFFFF",
+    "cssVariable": "--eds-color-fg-disabled-inverted"
+  },
   "color-fg-focus": {
     "name": "color-fg-focus",
     "type": "color",
@@ -1157,6 +1175,8 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-bg-critical-weak",
   "color-bg-critical-weak-hover",
   "color-bg-disabled",
+  "color-bg-disabled-brand-primary",
+  "color-bg-disabled-neutral-inverted",
   "color-bg-informative-primary",
   "color-bg-informative-primary-hover",
   "color-bg-informative-weak",
@@ -1188,6 +1208,7 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-fg-critical",
   "color-fg-critical-contrast",
   "color-fg-disabled",
+  "color-fg-disabled-inverted",
   "color-fg-focus",
   "color-fg-informative",
   "color-fg-informative-contrast",

package/dist/index.mjs

@@ -58,6 +58,18 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#E5E7EB",
     "cssVariable": "--eds-color-bg-disabled"
   },
+  "color-bg-disabled-brand-primary": {
+    "name": "color-bg-disabled-brand-primary",
+    "type": "color",
+    "value": "#FFA081",
+    "cssVariable": "--eds-color-bg-disabled-brand-primary"
+  },
+  "color-bg-disabled-neutral-inverted": {
+    "name": "color-bg-disabled-neutral-inverted",
+    "type": "color",
+    "value": "#9CA3AF",
+    "cssVariable": "--eds-color-bg-disabled-neutral-inverted"
+  },
   "color-bg-informative-primary": {
     "name": "color-bg-informative-primary",
     "type": "color",
@@ -244,6 +256,12 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#D1D5DB",
     "cssVariable": "--eds-color-fg-disabled"
   },
+  "color-fg-disabled-inverted": {
+    "name": "color-fg-disabled-inverted",
+    "type": "color",
+    "value": "#FFFFFFFF",
+    "cssVariable": "--eds-color-fg-disabled-inverted"
+  },
   "color-fg-focus": {
     "name": "color-fg-focus",
     "type": "color",
@@ -1155,6 +1173,8 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-bg-critical-weak",
   "color-bg-critical-weak-hover",
   "color-bg-disabled",
+  "color-bg-disabled-brand-primary",
+  "color-bg-disabled-neutral-inverted",
   "color-bg-informative-primary",
   "color-bg-informative-primary-hover",
   "color-bg-informative-weak",
@@ -1186,6 +1206,7 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-fg-critical",
   "color-fg-critical-contrast",
   "color-fg-disabled",
+  "color-fg-disabled-inverted",
   "color-fg-focus",
   "color-fg-informative",
   "color-fg-informative-contrast",

package/dist/tokens.css

@@ -9,6 +9,8 @@
   --eds-color-bg-critical-weak: #FEE2E2;
   --eds-color-bg-critical-weak-hover: #FECACA;
   --eds-color-bg-disabled: #E5E7EB;
+  --eds-color-bg-disabled-brand-primary: #FFA081;
+  --eds-color-bg-disabled-neutral-inverted: #9CA3AF;
   --eds-color-bg-informative-primary: #3B82F6;
   --eds-color-bg-informative-primary-hover: #2563EB;
   --eds-color-bg-informative-weak: #DBEAFE;
@@ -40,6 +42,7 @@
   --eds-color-fg-critical: #EF4444;
   --eds-color-fg-critical-contrast: #B91C1C;
   --eds-color-fg-disabled: #D1D5DB;
+  --eds-color-fg-disabled-inverted: #FFFFFFFF;
   --eds-color-fg-focus: #374151;
   --eds-color-fg-informative: #3B82F6;
   --eds-color-fg-informative-contrast: #1D4ED8;

package/dist/tokens.d.mts

@@ -1,4 +1,4 @@
-type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
+type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-disabled-brand-primary" | "color-bg-disabled-neutral-inverted" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-disabled-inverted" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
 type SemanticTokenType = "color" | "dimension" | "fontFamily" | "fontWeight";
 type EscapeCssDots<Name extends string> = Name extends `${infer Head}.${infer Tail}` ? `${Head}\\.${EscapeCssDots<Tail>}` : Name;
 type SemanticTokenCssVariable = `--eds-${EscapeCssDots<SemanticTokenName>}`;

package/dist/tokens.d.ts

@@ -1,4 +1,4 @@
-type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
+type SemanticTokenName = "color-bg-brand-primary" | "color-bg-brand-primary-hover" | "color-bg-brand-weak" | "color-bg-brand-weak-hover" | "color-bg-critical-primary" | "color-bg-critical-primary-hover" | "color-bg-critical-weak" | "color-bg-critical-weak-hover" | "color-bg-disabled" | "color-bg-disabled-brand-primary" | "color-bg-disabled-neutral-inverted" | "color-bg-informative-primary" | "color-bg-informative-primary-hover" | "color-bg-informative-weak" | "color-bg-informative-weak-hover" | "color-bg-layer-basement" | "color-bg-layer-basement-hover" | "color-bg-layer-default" | "color-bg-layer-default-hover" | "color-bg-layer-floating" | "color-bg-layer-floating-hover" | "color-bg-neutral-inverted" | "color-bg-neutral-inverted-hover" | "color-bg-neutral-primary" | "color-bg-neutral-primary-hover" | "color-bg-neutral-weak" | "color-bg-neutral-weak-hover" | "color-bg-positive-primary" | "color-bg-positive-primary-hover" | "color-bg-positive-weak" | "color-bg-positive-weak-hover" | "color-bg-transparent" | "color-bg-transparent-hover" | "color-bg-warning-primary" | "color-bg-warning-primary-hover" | "color-bg-warning-weak" | "color-bg-warning-weak-hover" | "color-fg-brand" | "color-fg-brand-contrast" | "color-fg-critical" | "color-fg-critical-contrast" | "color-fg-disabled" | "color-fg-disabled-inverted" | "color-fg-focus" | "color-fg-informative" | "color-fg-informative-contrast" | "color-fg-neutral" | "color-fg-neutral-inverted" | "color-fg-neutral-secondary" | "color-fg-neutral-tertiary" | "color-fg-placeholder" | "color-fg-positive" | "color-fg-positive-contrast" | "color-fg-warning" | "color-fg-warning-contrast" | "color-stroke-brand-primary" | "color-stroke-brand-weak" | "color-stroke-critical-primary" | "color-stroke-critical-weak" | "color-stroke-focusRing" | "color-stroke-informative-primary" | "color-stroke-informative-weak" | "color-stroke-neutral-contrast" | "color-stroke-neutral-primary" | "color-stroke-neutral-secondary" | "color-stroke-neutral-tertiary" | "color-stroke-neutral-weak" | "color-stroke-positive-primary" | "color-stroke-positive-weak" | "color-stroke-warning-primary" | "color-stroke-warning-weak" | "typography-body1-fontFamily" | "typography-body1-fontSize" | "typography-body1-fontWeight" | "typography-body1-letterSpacing" | "typography-body1-lineHeight" | "typography-body2-fontFamily" | "typography-body2-fontSize" | "typography-body2-fontWeight" | "typography-body2-letterSpacing" | "typography-body2-lineHeight" | "typography-body3-fontFamily" | "typography-body3-fontSize" | "typography-body3-fontWeight" | "typography-body3-letterSpacing" | "typography-body3-lineHeight" | "typography-body4-fontFamily" | "typography-body4-fontSize" | "typography-body4-fontWeight" | "typography-body4-letterSpacing" | "typography-body4-lineHeight" | "typography-caption1-fontFamily" | "typography-caption1-fontSize" | "typography-caption1-fontWeight" | "typography-caption1-letterSpacing" | "typography-caption1-lineHeight" | "typography-caption2-fontFamily" | "typography-caption2-fontSize" | "typography-caption2-fontWeight" | "typography-caption2-letterSpacing" | "typography-caption2-lineHeight" | "typography-caption3-fontFamily" | "typography-caption3-fontSize" | "typography-caption3-fontWeight" | "typography-caption3-letterSpacing" | "typography-caption3-lineHeight" | "typography-display1-fontFamily" | "typography-display1-fontSize" | "typography-display1-fontWeight" | "typography-display1-letterSpacing" | "typography-display1-lineHeight" | "typography-display2-fontFamily" | "typography-display2-fontSize" | "typography-display2-fontWeight" | "typography-display2-letterSpacing" | "typography-display2-lineHeight" | "typography-heading1-fontFamily" | "typography-heading1-fontSize" | "typography-heading1-fontWeight" | "typography-heading1-letterSpacing" | "typography-heading1-lineHeight" | "typography-heading2-fontFamily" | "typography-heading2-fontSize" | "typography-heading2-fontWeight" | "typography-heading2-letterSpacing" | "typography-heading2-lineHeight" | "typography-heading3-fontFamily" | "typography-heading3-fontSize" | "typography-heading3-fontWeight" | "typography-heading3-letterSpacing" | "typography-heading3-lineHeight" | "typography-heading4-fontFamily" | "typography-heading4-fontSize" | "typography-heading4-fontWeight" | "typography-heading4-letterSpacing" | "typography-heading4-lineHeight" | "typography-title1-fontFamily" | "typography-title1-fontSize" | "typography-title1-fontWeight" | "typography-title1-letterSpacing" | "typography-title1-lineHeight" | "typography-title2-fontFamily" | "typography-title2-fontSize" | "typography-title2-fontWeight" | "typography-title2-letterSpacing" | "typography-title2-lineHeight" | "typography-title3-fontFamily" | "typography-title3-fontSize" | "typography-title3-fontWeight" | "typography-title3-letterSpacing" | "typography-title3-lineHeight" | "typography-title4-fontFamily" | "typography-title4-fontSize" | "typography-title4-fontWeight" | "typography-title4-letterSpacing" | "typography-title4-lineHeight";
 type SemanticTokenType = "color" | "dimension" | "fontFamily" | "fontWeight";
 type EscapeCssDots<Name extends string> = Name extends `${infer Head}.${infer Tail}` ? `${Head}\\.${EscapeCssDots<Tail>}` : Name;
 type SemanticTokenCssVariable = `--eds-${EscapeCssDots<SemanticTokenName>}`;

package/dist/tokens.js

@@ -56,6 +56,18 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#E5E7EB",
     "cssVariable": "--eds-color-bg-disabled"
   },
+  "color-bg-disabled-brand-primary": {
+    "name": "color-bg-disabled-brand-primary",
+    "type": "color",
+    "value": "#FFA081",
+    "cssVariable": "--eds-color-bg-disabled-brand-primary"
+  },
+  "color-bg-disabled-neutral-inverted": {
+    "name": "color-bg-disabled-neutral-inverted",
+    "type": "color",
+    "value": "#9CA3AF",
+    "cssVariable": "--eds-color-bg-disabled-neutral-inverted"
+  },
   "color-bg-informative-primary": {
     "name": "color-bg-informative-primary",
     "type": "color",
@@ -242,6 +254,12 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#D1D5DB",
     "cssVariable": "--eds-color-fg-disabled"
   },
+  "color-fg-disabled-inverted": {
+    "name": "color-fg-disabled-inverted",
+    "type": "color",
+    "value": "#FFFFFFFF",
+    "cssVariable": "--eds-color-fg-disabled-inverted"
+  },
   "color-fg-focus": {
     "name": "color-fg-focus",
     "type": "color",
@@ -1153,6 +1171,8 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-bg-critical-weak",
   "color-bg-critical-weak-hover",
   "color-bg-disabled",
+  "color-bg-disabled-brand-primary",
+  "color-bg-disabled-neutral-inverted",
   "color-bg-informative-primary",
   "color-bg-informative-primary-hover",
   "color-bg-informative-weak",
@@ -1184,6 +1204,7 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-fg-critical",
   "color-fg-critical-contrast",
   "color-fg-disabled",
+  "color-fg-disabled-inverted",
   "color-fg-focus",
   "color-fg-informative",
   "color-fg-informative-contrast",

package/dist/tokens.json

@@ -82,6 +82,24 @@
         }
       }
     },
+    "color-bg-disabled-brand-primary": {
+      "$type": "color",
+      "$value": "#FFA081",
+      "$extensions": {
+        "eds": {
+          "cssVariable": "--eds-color-bg-disabled-brand-primary"
+        }
+      }
+    },
+    "color-bg-disabled-neutral-inverted": {
+      "$type": "color",
+      "$value": "#9CA3AF",
+      "$extensions": {
+        "eds": {
+          "cssVariable": "--eds-color-bg-disabled-neutral-inverted"
+        }
+      }
+    },
     "color-bg-informative-primary": {
       "$type": "color",
       "$value": "#3B82F6",
@@ -361,6 +379,15 @@
         }
       }
     },
+    "color-fg-disabled-inverted": {
+      "$type": "color",
+      "$value": "#FFFFFFFF",
+      "$extensions": {
+        "eds": {
+          "cssVariable": "--eds-color-fg-disabled-inverted"
+        }
+      }
+    },
     "color-fg-focus": {
       "$type": "color",
       "$value": "#374151",

package/dist/tokens.mjs

@@ -54,6 +54,18 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#E5E7EB",
     "cssVariable": "--eds-color-bg-disabled"
   },
+  "color-bg-disabled-brand-primary": {
+    "name": "color-bg-disabled-brand-primary",
+    "type": "color",
+    "value": "#FFA081",
+    "cssVariable": "--eds-color-bg-disabled-brand-primary"
+  },
+  "color-bg-disabled-neutral-inverted": {
+    "name": "color-bg-disabled-neutral-inverted",
+    "type": "color",
+    "value": "#9CA3AF",
+    "cssVariable": "--eds-color-bg-disabled-neutral-inverted"
+  },
   "color-bg-informative-primary": {
     "name": "color-bg-informative-primary",
     "type": "color",
@@ -240,6 +252,12 @@ var tokenMap = /* @__PURE__ */ Object.freeze({
     "value": "#D1D5DB",
     "cssVariable": "--eds-color-fg-disabled"
   },
+  "color-fg-disabled-inverted": {
+    "name": "color-fg-disabled-inverted",
+    "type": "color",
+    "value": "#FFFFFFFF",
+    "cssVariable": "--eds-color-fg-disabled-inverted"
+  },
   "color-fg-focus": {
     "name": "color-fg-focus",
     "type": "color",
@@ -1151,6 +1169,8 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-bg-critical-weak",
   "color-bg-critical-weak-hover",
   "color-bg-disabled",
+  "color-bg-disabled-brand-primary",
+  "color-bg-disabled-neutral-inverted",
   "color-bg-informative-primary",
   "color-bg-informative-primary-hover",
   "color-bg-informative-weak",
@@ -1182,6 +1202,7 @@ var tokenNames = /* @__PURE__ */ Object.freeze([
   "color-fg-critical",
   "color-fg-critical-contrast",
   "color-fg-disabled",
+  "color-fg-disabled-inverted",
   "color-fg-focus",
   "color-fg-informative",
   "color-fg-informative-contrast",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spectrabrain/eds",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "EVA services' shared React design system",
   "author": "SpectraBrain",
   "license": "UNLICENSED",