@graphprotocol/gds-css 0.1.1 → 0.2.0

package/dist/css-states/{registerCSSStates.js → setupCSSStates.js}

@@ -2,9 +2,8 @@ import cssesc from 'cssesc';
 import { objectFromEntries } from 'ts-extras';
 import { cssStates, cssStateVariables, getCSSStateVariable } from "./states.js";
 /**
- * Registers CSS States functionality in the Tailwind plugin.
- *
- * This system abstracts away CSS's native states in order to:
+ * Sets up the CSS states system via the Tailwind plugin. This system abstracts away CSS's native
+ * states in order to:
  *
  * - Allow overriding the state of components (e.g. `<Button className="state-active" />`).
  * - Allow reading the state of components from their root element even when the native state is
@@ -15,24 +14,24 @@ import { cssStates, cssStateVariables, getCSSStateVariable } from "./states.js";
  *   `@state-[highlighted]:bg-strong` on a child; also supports key-values like `state-[foo=bar]
  *   lg:state-[foo=baz]`).
  *
- * While this system is separate from the CSS Props one, it also leverages style queries and relies
- * on the fact that component classes (e.g. `gds-button`) establish a container that can be queried.
- * Furthermore, it uses some of the same techniques in the fallback implementation (querying by data
- * attribute, `view-transition-name` to target browsers that don't support style queries, etc.),
- * though the CSS props polyfill is not used. See `useCSSState` for more details.
+ * Like CSS props, this system leverages style queries and uses a similar fallback mechanism
+ * (querying by data attribute + using `view-transition-name` to target browsers that don't support
+ * style queries), though the CSS props polyfill is not used. See `useCSSState` for more details.
  */
-export function registerCSSStates(api) {
+export function setupCSSStates(api) {
     /**
-     * Register a couple custom properties for each state variable.
+     * Register a couple custom properties for each non-arbitrary state variable.
      *
      * - All of them are non-inherited to prevent leaking.
      * - Normally, we would only need `--gds-exposed-*` and `--gds-state-*` (with no `initial-value` on
      *   `--gds-exposed-*`), but due to a limitation in the `style-observer` library
      *   (https://github.com/LeaVerou/style-observer/issues/133), we need to set an `initial-value` on
-     *   any custom property we want to observe in JS. But we also need `--gds-state-*` to NOT have an
-     *   initial value so that we can define a fallback when a state is not set at all (see
-     *   `--gds-clickable-*`). So we register an additional `--gds-observed-*` property that is
-     *   guaranteed to have a valid value and can be observed.
+     *   any custom property we want to observe in JS (and we want to observe both in `useCSSState`).
+     *   But we also need `--gds-state-*` to NOT have an initial value so that we can define a
+     *   fallback when a state is not set at all (see `--gds-clickable-*`). So we register an
+     *   additional `--gds-observed-*` property that is guaranteed to have a valid value and can be
+     *   observed. Note that non-registered `--gds-state-*` properties (i.e. arbitrary states) don't
+     *   have this problem, so arbitrary state utilities don't need to set `--gds-observed-*`.
      */
     for (const [variableName, { values, defaultValue }] of Object.entries(cssStateVariables)) {
         api.addBase({
@@ -64,14 +63,18 @@ export function registerCSSStates(api) {
             return {
                 [`--gds-exposed-${stateVariable.name}`]: stateVariable.value,
                 [`--gds-state-${stateVariable.name}`]: stateVariable.value,
-                [`--gds-observed-${stateVariable.name}`]: stateVariable.value,
+                ...(!stateVariable.isArbitrary && {
+                    [`--gds-observed-${stateVariable.name}`]: stateVariable.value,
+                }),
             };
         },
         state: (state) => {
             const stateVariable = getCSSStateVariable(state);
             return {
                 [`--gds-state-${stateVariable.name}`]: stateVariable.value,
-                [`--gds-observed-${stateVariable.name}`]: stateVariable.value,
+                ...(!stateVariable.isArbitrary && {
+                    [`--gds-observed-${stateVariable.name}`]: stateVariable.value,
+                }),
             };
         },
     }, { values: Object.fromEntries(cssStates.map((state) => [state, state])) });
@@ -98,7 +101,7 @@ export function registerCSSStates(api) {
                     .join(' or ')})`,
             ];
             if (containerName) {
-                // Fallback selector for browsers without style query support; see `css-props/registerCSSProps.ts` for more details
+                // Fallback selector for browsers without style query support; see `setupCSSProps` for more details
                 selectors.push(`@supports (not (view-transition-name: none)) or (-moz-orient: inline) { &:where(.${containerName}${variant === '@state-not' ? ':not' : ':is'}(${stateVariables
                     .map((stateVariable) => `[data-gds-state-polyfill-${stateVariable.name}${stateVariable.value ? `=${cssesc(stateVariable.value, { isIdentifier: true })}` : ''}]`)
                     .join(', ')}) *) }`);
@@ -116,4 +119,4 @@ export function registerCSSStates(api) {
         });
     }
 }
-//# sourceMappingURL=registerCSSStates.js.map
+//# sourceMappingURL=setupCSSStates.js.map

package/dist/css-states/setupCSSStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupCSSStates.js","sourceRoot":"","sources":["../../src/css-states/setupCSSStates.ts"],"names":[],"mappings":"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"}

package/dist/css-states/states.d.ts

@@ -59,6 +59,7 @@ export declare function getCSSStateVariable(state: string): {
     name: string;
     value: string;
     isDefault: boolean;
+    isArbitrary: boolean;
 };
 export declare function getPointerStateSelector(state: 'idle' | 'hover' | 'active'): string;
 export declare function getFocusStateSelector(visible: boolean, within: boolean): string;

package/dist/css-states/states.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../src/css-states/states.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,6MAkBZ,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAU5C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD7B,CAAA;AAQD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM;;;;EAgBhD;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,UAEzE;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,UAEtE;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,UAEzE;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,WAAW,UAEvE;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,UAEjD;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,UAEvD;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,UAGnD;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAkBtD,CAAA"}
+{"version":3,"file":"states.d.ts","sourceRoot":"","sources":["../../src/css-states/states.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,6MAkBZ,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AACjD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,CAAA;AAU5C,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqD7B,CAAA;AAQD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM;;;;;EAiBhD;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,UAEzE;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,UAEtE;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,UAEzE;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,OAAO,GAAG,WAAW,UAEvE;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,OAAO,UAEjD;AAED,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,OAAO,UAEvD;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,UAGnD;AAED,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAkBtD,CAAA"}

package/dist/css-states/states.js

@@ -88,13 +88,14 @@ export function getCSSStateVariable(state) {
                     name: variableName,
                     value: String(value),
                     isDefault: value === defaultValue,
+                    isArbitrary: false,
                 };
             }
         }
     }
     // Support arbitrary states in the format `state-[foo]` or `state-[foo=bar]`
     const [stateName, stateValue] = state.split('=');
-    return { name: stateName, value: stateValue ?? 'true', isDefault: false };
+    return { name: stateName, value: stateValue ?? 'true', isDefault: false, isArbitrary: true };
 }
 export function getPointerStateSelector(state) {
     return `:is(${state === 'hover' ? '[data-gds-exposed-pointer=hover], [data-gds-exposed-pointer=active]' : `[data-gds-exposed-pointer=${state}]`}, :not([data-gds-exposed-pointer]):where(${state === 'idle' ? ':not(:hover, :active)' : state === 'hover' ? ':hover' : ':is(:hover:active, [data-gds-active] :active)'}))`;

package/dist/css-states/states.js.map

@@ -1 +1 @@
-{"version":3,"file":"states.js","sourceRoot":"","sources":["../../src/css-states/states.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"states.js","sourceRoot":"","sources":["../../src/css-states/states.ts"],"names":[],"mappings":"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"}

package/dist/design-tokens.generated.d.ts

@@ -385,6 +385,16 @@ export declare const semanticColors: readonly [{
     readonly category: "background";
     readonly light: readonly ["var(--color-foam-500)", "#cacace"];
     readonly dark: readonly ["var(--color-space-1300)", "#2d2a3f"];
+}, {
+    readonly name: "brand-subtlest";
+    readonly category: "background";
+    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--color-brand-1100)", "#19123a"];
+}, {
+    readonly name: "brand-subtler";
+    readonly category: "background";
+    readonly light: readonly ["var(--color-brand-200)", "#c5b7ff"];
+    readonly dark: readonly ["var(--color-brand-1000)", "#281c5c"];
 }, {
     readonly name: "brand-subtle";
     readonly category: "background";
@@ -495,6 +505,16 @@ export declare const semanticColors: readonly [{
     readonly category: "border";
     readonly light: readonly ["var(--color-foam-1000)", "#7d7d87"];
     readonly dark: readonly ["var(--color-space-1100)", "#49465d"];
+}, {
+    readonly name: "brand-subtlest";
+    readonly category: "border";
+    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--color-brand-1100)", "#19123a"];
+}, {
+    readonly name: "brand-subtler";
+    readonly category: "border";
+    readonly light: readonly ["var(--color-brand-200)", "#c5b7ff"];
+    readonly dark: readonly ["var(--color-brand-1000)", "#281c5c"];
 }, {
     readonly name: "brand-subtle";
     readonly category: "border";
@@ -749,23 +769,23 @@ export declare const componentColors: readonly [{
 }, {
     readonly name: "button-secondary-toggled-idle";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
-    readonly dark: readonly ["var(--color-brand-1100)", "#19123a"];
+    readonly light: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-1100)", "#19123a"];
 }, {
     readonly name: "button-secondary-toggled-hover";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-200)", "#c5b7ff"];
-    readonly dark: readonly ["var(--color-brand-1000)", "#281c5c"];
+    readonly light: readonly ["var(--background-color-brand-subtler)", "var(--color-brand-200)", "#c5b7ff"];
+    readonly dark: readonly ["var(--background-color-brand-subtler)", "var(--color-brand-1000)", "#281c5c"];
 }, {
     readonly name: "button-secondary-toggled-active";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
-    readonly dark: readonly ["var(--color-brand-1200)", "#140f2f"];
+    readonly light: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-1100)", "#19123a"];
 }, {
     readonly name: "button-secondary-toggled-disabled";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
-    readonly dark: readonly ["var(--color-brand-1100)", "#19123a"];
+    readonly light: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-1100)", "#19123a"];
 }, {
     readonly name: "button-tertiary-hover";
     readonly category: "background";
@@ -874,8 +894,8 @@ export declare const componentColors: readonly [{
 }, {
     readonly name: "form-checked-disabled";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-200)", "#c5b7ff"];
-    readonly dark: readonly ["var(--color-brand-1000)", "#281c5c"];
+    readonly light: readonly ["var(--background-color-brand-subtler)", "var(--color-brand-200)", "#c5b7ff"];
+    readonly dark: readonly ["var(--background-color-brand-subtler)", "var(--color-brand-1000)", "#281c5c"];
 }, {
     readonly name: "form-handle-default";
     readonly category: "background";
@@ -899,23 +919,23 @@ export declare const componentColors: readonly [{
 }, {
     readonly name: "card-primary-idle";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
-    readonly dark: readonly ["var(--color-brand-1200)", "#140f2f"];
+    readonly light: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-1100)", "#19123a"];
 }, {
     readonly name: "card-primary-hover";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-200)", "#c5b7ff"];
-    readonly dark: readonly ["var(--color-brand-1100)", "#19123a"];
+    readonly light: readonly ["var(--background-color-brand-subtler)", "var(--color-brand-200)", "#c5b7ff"];
+    readonly dark: readonly ["var(--background-color-brand-subtler)", "var(--color-brand-1000)", "#281c5c"];
 }, {
     readonly name: "card-primary-active";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
-    readonly dark: readonly ["var(--color-brand-1200)", "#140f2f"];
+    readonly light: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-1100)", "#19123a"];
 }, {
     readonly name: "card-primary-disabled";
     readonly category: "background";
-    readonly light: readonly ["var(--color-brand-100)", "#e2dbff"];
-    readonly dark: readonly ["var(--color-brand-1200)", "#140f2f"];
+    readonly light: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-100)", "#e2dbff"];
+    readonly dark: readonly ["var(--background-color-brand-subtlest)", "var(--color-brand-1100)", "#19123a"];
 }, {
     readonly name: "card-secondary-idle";
     readonly category: "background";
@@ -1114,18 +1134,18 @@ export declare const componentColors: readonly [{
 }, {
     readonly name: "card-primary-idle";
     readonly category: "border";
-    readonly light: readonly ["var(--color-brand-300)", "#a994ff"];
-    readonly dark: readonly ["var(--color-brand-800)", "#3d2b8c"];
+    readonly light: readonly ["var(--border-color-brand-subtle)", "var(--color-brand-300)", "#a994ff"];
+    readonly dark: readonly ["var(--border-color-brand-subtle)", "var(--color-brand-800)", "#3d2b8c"];
 }, {
     readonly name: "card-primary-hover";
     readonly category: "border";
-    readonly light: readonly ["var(--color-brand-400)", "#8c70ff"];
-    readonly dark: readonly ["var(--color-brand-700)", "#5138ba"];
+    readonly light: readonly ["var(--border-color-brand-muted)", "var(--color-brand-400)", "#8c70ff"];
+    readonly dark: readonly ["var(--border-color-brand-muted)", "var(--color-brand-700)", "#5138ba"];
 }, {
     readonly name: "card-primary-active";
     readonly category: "border";
-    readonly light: readonly ["var(--color-brand-300)", "#a994ff"];
-    readonly dark: readonly ["var(--color-brand-800)", "#3d2b8c"];
+    readonly light: readonly ["var(--border-color-brand-subtle)", "var(--color-brand-300)", "#a994ff"];
+    readonly dark: readonly ["var(--border-color-brand-subtle)", "var(--color-brand-800)", "#3d2b8c"];
 }, {
     readonly name: "card-secondary-idle";
     readonly category: "border";

package/dist/design-tokens.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"design-tokens.generated.d.ts","sourceRoot":"","sources":["../src/design-tokens.generated.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"design-tokens.generated.d.ts","sourceRoot":"","sources":["../src/design-tokens.generated.ts"],"names":[],"mappings":"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"}

package/dist/design-tokens.generated.js

@@ -635,6 +635,30 @@ export const semanticColors = [
             "#2d2a3f"
         ]
     },
+    {
+        "name": "brand-subtlest",
+        "category": "background",
+        "light": [
+            "var(--color-brand-100)",
+            "#e2dbff"
+        ],
+        "dark": [
+            "var(--color-brand-1100)",
+            "#19123a"
+        ]
+    },
+    {
+        "name": "brand-subtler",
+        "category": "background",
+        "light": [
+            "var(--color-brand-200)",
+            "#c5b7ff"
+        ],
+        "dark": [
+            "var(--color-brand-1000)",
+            "#281c5c"
+        ]
+    },
     {
         "name": "brand-subtle",
         "category": "background",
@@ -895,6 +919,30 @@ export const semanticColors = [
             "#49465d"
         ]
     },
+    {
+        "name": "brand-subtlest",
+        "category": "border",
+        "light": [
+            "var(--color-brand-100)",
+            "#e2dbff"
+        ],
+        "dark": [
+            "var(--color-brand-1100)",
+            "#19123a"
+        ]
+    },
+    {
+        "name": "brand-subtler",
+        "category": "border",
+        "light": [
+            "var(--color-brand-200)",
+            "#c5b7ff"
+        ],
+        "dark": [
+            "var(--color-brand-1000)",
+            "#281c5c"
+        ]
+    },
     {
         "name": "brand-subtle",
         "category": "border",
@@ -1544,10 +1592,12 @@ export const componentColors = [
         "name": "button-secondary-toggled-idle",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-100)",
             "#e2dbff"
         ],
         "dark": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-1100)",
             "#19123a"
         ]
@@ -1556,10 +1606,12 @@ export const componentColors = [
         "name": "button-secondary-toggled-hover",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtler)",
             "var(--color-brand-200)",
             "#c5b7ff"
         ],
         "dark": [
+            "var(--background-color-brand-subtler)",
             "var(--color-brand-1000)",
             "#281c5c"
         ]
@@ -1568,22 +1620,26 @@ export const componentColors = [
         "name": "button-secondary-toggled-active",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-100)",
             "#e2dbff"
         ],
         "dark": [
-            "var(--color-brand-1200)",
-            "#140f2f"
+            "var(--background-color-brand-subtlest)",
+            "var(--color-brand-1100)",
+            "#19123a"
         ]
     },
     {
         "name": "button-secondary-toggled-disabled",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-100)",
             "#e2dbff"
         ],
         "dark": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-1100)",
             "#19123a"
         ]
@@ -1884,10 +1940,12 @@ export const componentColors = [
         "name": "form-checked-disabled",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtler)",
             "var(--color-brand-200)",
             "#c5b7ff"
         ],
         "dark": [
+            "var(--background-color-brand-subtler)",
             "var(--color-brand-1000)",
             "#281c5c"
         ]
@@ -1944,48 +2002,56 @@ export const componentColors = [
         "name": "card-primary-idle",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-100)",
             "#e2dbff"
         ],
         "dark": [
-            "var(--color-brand-1200)",
-            "#140f2f"
+            "var(--background-color-brand-subtlest)",
+            "var(--color-brand-1100)",
+            "#19123a"
         ]
     },
     {
         "name": "card-primary-hover",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtler)",
             "var(--color-brand-200)",
             "#c5b7ff"
         ],
         "dark": [
-            "var(--color-brand-1100)",
-            "#19123a"
+            "var(--background-color-brand-subtler)",
+            "var(--color-brand-1000)",
+            "#281c5c"
         ]
     },
     {
         "name": "card-primary-active",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-100)",
             "#e2dbff"
         ],
         "dark": [
-            "var(--color-brand-1200)",
-            "#140f2f"
+            "var(--background-color-brand-subtlest)",
+            "var(--color-brand-1100)",
+            "#19123a"
         ]
     },
     {
         "name": "card-primary-disabled",
         "category": "background",
         "light": [
+            "var(--background-color-brand-subtlest)",
             "var(--color-brand-100)",
             "#e2dbff"
         ],
         "dark": [
-            "var(--color-brand-1200)",
-            "#140f2f"
+            "var(--background-color-brand-subtlest)",
+            "var(--color-brand-1100)",
+            "#19123a"
         ]
     },
     {
@@ -2538,10 +2604,12 @@ export const componentColors = [
         "name": "card-primary-idle",
         "category": "border",
         "light": [
+            "var(--border-color-brand-subtle)",
             "var(--color-brand-300)",
             "#a994ff"
         ],
         "dark": [
+            "var(--border-color-brand-subtle)",
             "var(--color-brand-800)",
             "#3d2b8c"
         ]
@@ -2550,10 +2618,12 @@ export const componentColors = [
         "name": "card-primary-hover",
         "category": "border",
         "light": [
+            "var(--border-color-brand-muted)",
             "var(--color-brand-400)",
             "#8c70ff"
         ],
         "dark": [
+            "var(--border-color-brand-muted)",
             "var(--color-brand-700)",
             "#5138ba"
         ]
@@ -2562,10 +2632,12 @@ export const componentColors = [
         "name": "card-primary-active",
         "category": "border",
         "light": [
+            "var(--border-color-brand-subtle)",
             "var(--color-brand-300)",
             "#a994ff"
         ],
         "dark": [
+            "var(--border-color-brand-subtle)",
             "var(--color-brand-800)",
             "#3d2b8c"
         ]