ui-foundations 0.3.1 → 0.4.1

package/dist/react/badge.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { Icon } from "./icon.js";
+
+export function Badge({
+  children,
+  text,
+  variant = "default",
+  size = "md",
+  startIcon,
+  className = "",
+  ...props
+}) {
+  const content = children ?? text;
+  const classes = ["badge"];
+
+  if (variant && variant !== "default") classes.push(variant);
+  if (size === "sm") classes.push("sm");
+  if (className) classes.push(className);
+
+  const iconElement =
+    startIcon && typeof startIcon === "string"
+      ? React.createElement(Icon, {
+          name: startIcon,
+          decorative: true,
+        })
+      : startIcon && React.isValidElement(startIcon)
+        ? startIcon
+        : null;
+
+  return React.createElement(
+    "span",
+    {
+      className: classes.join(" "),
+      ...props,
+    },
+    iconElement,
+    content != null
+      ? React.createElement("span", { className: "badge__text" }, content)
+      : null,
+  );
+}

package/dist/react/button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { LabelContent } from "./label.js";
+import { LabelContent, hasTextContent } from "./label.js";
 
 function normalizeOrientation(value) {
   return value === "vertical" ? "vertical" : "horizontal";
@@ -9,6 +9,18 @@ function normalizeJustify(value) {
   return value === "stretch" ? "stretch" : "start";
 }
 
+function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}
+
 export function Button({
   variant = "solid",
   className = "",
@@ -28,10 +40,7 @@ export function Button({
   if (className) classes.push(className);
 
   const content = children ?? label;
-  const hasReadableLabel =
-    typeof content === "string"
-      ? content.trim().length > 0
-      : content !== null && content !== undefined && content !== false;
+  const hasReadableLabel = hasTextContent(content);
   const resolvedIconOnly = iconOnly ?? !hasReadableLabel;
   const iconStart = resolvedIconOnly ? startIcon || endIcon : startIcon;
   const iconEnd = resolvedIconOnly ? undefined : endIcon;
@@ -49,7 +58,7 @@ export function Button({
   }
 
   if (resolvedIconOnly && !buttonProps["aria-label"]) {
-    console.warn(
+    warnDev(
       "[ui-foundations] iconOnly Button should include `ariaLabel` or `aria-label`.",
     );
   }

package/dist/react/checkbox.js

@@ -7,25 +7,55 @@ function hasLabelContent(value) {
   return true;
 }
 
+function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}
+
 export function Checkbox({
   className = "",
   wrapperClassName = "",
   label,
   children,
+  indeterminate = false,
   ...props
 }) {
   const classes = ["checkbox"];
+  if (indeterminate) classes.push("is-indeterminate");
   if (className) classes.push(className);
 
   const content = children ?? label;
   const hasLabel = hasLabelContent(content);
   const disabled = Boolean(props.disabled);
+  const inputRef = React.useRef(null);
+
+  React.useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+
   const input = React.createElement("input", {
     type: "checkbox",
     className: classes.join(" "),
+    "aria-checked":
+      props["aria-checked"] ?? (indeterminate ? "mixed" : undefined),
+    ref: inputRef,
     ...props,
   });
 
+  if (!hasLabel && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnDev(
+      "[ui-foundations] Checkbox should include visible label content or `aria-label`/`aria-labelledby`.",
+    );
+  }
+
   if (!hasLabel) return input;
 
   const wrapperClasses = ["checkbox-field"];

package/dist/react/icon.js

@@ -11,6 +11,18 @@ function humanizeName(name) {
     .trim();
 }
 
+function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}
+
 export function Icon({
   name,
   src,
@@ -37,8 +49,14 @@ export function Icon({
   if (isDecorative) {
     accessibilityProps["aria-hidden"] = true;
   } else {
+    const accessibleLabel = label || humanizeName(name);
+    if (!accessibleLabel) {
+      warnDev(
+        "[ui-foundations] Non-decorative Icon should include a readable `label` or `name`.",
+      );
+    }
     accessibilityProps.role = "img";
-    accessibilityProps["aria-label"] = label || humanizeName(name);
+    accessibilityProps["aria-label"] = accessibleLabel;
   }
 
   return React.createElement("span", {

package/dist/react/index.js

@@ -3,4 +3,6 @@ export { Checkbox } from "./checkbox.js";
 export { Icon } from "./icon.js";
 export { Input } from "./input.js";
 export { LabelContent, FieldLabel } from "./label.js";
+export { Radio } from "./radio.js";
 export { Switch } from "./switch.js";
+export { Badge } from "./badge.js";

package/dist/react/label.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Icon } from "./icon.js";
 
-function hasTextContent(value) {
+export function hasTextContent(value) {
   if (value === null || value === undefined || value === false) return false;
   if (typeof value === "string") return value.trim().length > 0;
   if (Array.isArray(value)) return value.some(hasTextContent);

package/dist/react/radio.js

@@ -0,0 +1,62 @@
+import React from "react";
+
+function hasLabelContent(value) {
+  if (value === null || value === undefined || value === false) return false;
+  if (typeof value === "string") return value.trim().length > 0;
+  if (Array.isArray(value)) return value.some(hasLabelContent);
+  return true;
+}
+
+function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}
+
+export function Radio({
+  className = "",
+  wrapperClassName = "",
+  label,
+  children,
+  ...props
+}) {
+  const classes = ["radio"];
+  if (className) classes.push(className);
+
+  const content = children ?? label;
+  const hasLabel = hasLabelContent(content);
+  const disabled = Boolean(props.disabled);
+
+  const input = React.createElement("input", {
+    type: "radio",
+    className: classes.join(" "),
+    ...props,
+  });
+
+  if (!hasLabel && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnDev(
+      "[ui-foundations] Radio should include visible label content or `aria-label`/`aria-labelledby`.",
+    );
+  }
+
+  if (!hasLabel) return input;
+
+  const wrapperClasses = ["radio-field"];
+  if (disabled) wrapperClasses.push("is-disabled");
+  if (wrapperClassName) wrapperClasses.push(wrapperClassName);
+
+  return React.createElement(
+    "label",
+    {
+      className: wrapperClasses.join(" "),
+    },
+    input,
+    React.createElement("span", { className: "radio-field__text" }, content),
+  );
+}

package/dist/react/switch.js

@@ -7,6 +7,18 @@ function hasLabelContent(value) {
   return true;
 }
 
+function warnDev(message) {
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    process.env.NODE_ENV === "production"
+  ) {
+    return;
+  }
+
+  console.warn(message);
+}
+
 export function Switch({
   className = "",
   wrapperClassName = "",
@@ -28,6 +40,12 @@ export function Switch({
     ...props,
   });
 
+  if (!hasLabel && !props["aria-label"] && !props["aria-labelledby"]) {
+    warnDev(
+      "[ui-foundations] Switch should include visible label content or `aria-label`/`aria-labelledby`.",
+    );
+  }
+
   if (!hasLabel) return input;
 
   const wrapperClasses = ["switch-field"];

package/dist/tokens/css/{appearance-(modes).tokens.mode-dark.css → appearance-modes.tokens.mode-dark.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.721Z */
+/* Generated on 2026-04-28T09:23:28.554Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);

package/dist/tokens/css/{appearance-(modes).tokens.mode-light.css → appearance-modes.tokens.mode-light.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.718Z */
+/* Generated on 2026-04-28T09:23:28.552Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);

package/dist/tokens/css/{components-(ui).tokens.css → components-ui.tokens.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.724Z */
+/* Generated on 2026-04-28T09:23:28.559Z */
 
 :root {
   --button-border-size-hover: var(--size-border-100);
@@ -92,18 +92,41 @@
   --input-overlay-active: var(--color-transparent);
   --input-height: 2.5rem;
   --input-checkbox-text-color-default: var(--color-text-default);
-  --input-checkbox-text-color-hover: var(--color-text-default);
+  --input-checkbox-text-color-hover: var(--color-text-strong);
   --input-checkbox-text-color-active: var(--color-text-inverse);
   --input-checkbox-border-color-default: var(--color-border-subtle);
-  --input-checkbox-border-color-hover: var(--color-border-brand);
+  --input-checkbox-border-color-hover: var(--color-border-strong);
   --input-checkbox-border-color-active: var(--color-border-brand);
   --input-checkbox-border-color-focus: var(--color-border-brand);
   --input-checkbox-border-color-invalid: var(--color-border-danger);
   --input-checkbox-border-color-valid: var(--color-border-strong);
+  --input-checkbox-border-color-disabled: var(--color-border-disabled);
   --input-checkbox-container-background-default: var(--color-fill-surface);
   --input-checkbox-container-background-hover: var(--color-fill-surface);
   --input-checkbox-container-background-focus: var(--color-fill-surface);
   --input-checkbox-container-background-active: var(--color-fill-brand);
+  --input-checkbox-container-background-disabled: var(--color-fill-disabled);
+  --input-checkbox-text-color-disabled: var(--color-text-disabled);
+  --checkbox-border-size-hover: var(--size-border-200);
+  --checkbox-border-size-disabled: var(--size-border-000);
+  --checkbox-border-size-default: var(--size-border-100);
+  --input-radio-text-color-default: var(--color-text-default);
+  --input-radio-text-color-hover: var(--color-text-strong);
+  --input-radio-text-color-active: var(--color-text-inverse);
+  --input-radio-text-color-disabled: var(--color-text-disabled);
+  --input-radio-border-color-default: var(--color-border-subtle);
+  --input-radio-border-color-hover: var(--color-border-strong);
+  --input-radio-border-color-active: var(--color-border-brand);
+  --input-radio-border-color-focus: var(--color-border-brand);
+  --input-radio-border-color-disabled: var(--color-border-disabled);
+  --input-radio-container-background-default: var(--color-fill-surface);
+  --input-radio-container-background-hover: var(--color-fill-surface);
+  --input-radio-container-background-focus: var(--color-fill-surface);
+  --input-radio-container-background-active: var(--color-fill-brand);
+  --input-radio-container-background-disabled: var(--color-fill-disabled);
+  --radio-border-size-default: var(--size-border-100);
+  --radio-border-size-hover: var(--size-border-200);
+  --radio-border-size-disabled: var(--size-border-000);
   --form-group-gap: var(--size-spacing-400);
   --form-group-title-color: var(--color-text-default);
   --form-padding-inline: var(--size-spacing-400);
@@ -116,4 +139,24 @@
   --form-container-background: var(--color-fill-surface);
   --form-container-border-color: var(--color-border-subtle);
   --form-border-size: var(--size-border-100);
+  --badge-default-container-background: var(--color-fill-subtle);
+  --badge-default-text-color: var(--color-text-default);
+  --badge-brand-container-background: var(--color-fill-brand);
+  --badge-brand-text-color: var(--color-text-inverse);
+  --badge-success-container-background: var(--color-fill-success);
+  --badge-success-text-color: var(--color-text-inverse);
+  --badge-danger-container-background: var(--color-fill-danger);
+  --badge-danger-text-color: var(--color-text-inverse);
+  --badge-border-radius: var(--size-radius-full);
+  --badge-font-family: var(--typography-label-font-family);
+  --badge-font-weight: var(--font-weight-700);
+  --badge-font-size-sm: var(--font-size-xs);
+  --badge-font-size-md: var(--font-size-sm);
+  --badge-line-height-sm: var(--line-height-xs);
+  --badge-line-height-md: var(--line-height-sm);
+  --badge-padding-inline-sm: var(--size-spacing-200);
+  --badge-padding-inline-md: var(--size-spacing-300);
+  --badge-padding-block-sm: var(--size-spacing-000);
+  --badge-padding-block-md: var(--size-spacing-100);
+  --badge-gap: var(--size-spacing-100);
 }

package/dist/tokens/css/{core-(primitives).tokens.css → core-primitives.tokens.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.731Z */
+/* Generated on 2026-04-28T09:23:28.563Z */
 
 :root {
   --color-neutral-100: rgb(230 230 230);
@@ -23,25 +23,67 @@
   --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
   --color-neutral-alpha-000: rgba(0 0 0 / 0);
   --color-neutral-000: rgb(255 255 255);
-  --color-brand-a-purple-200: rgb(222 192 255);
-  --color-brand-a-purple-600: rgb(151 71 255);
-  --color-brand-a-purple-800: rgb(85 26 139);
-  --color-brand-a-blue-200: rgb(226 244 253);
-  --color-brand-a-blue-500: rgb(112 203 244);
-  --color-brand-a-blue-700: rgb(12 75 243);
-  --color-brand-a-blue-800: rgb(27 17 92);
-  --color-brand-a-green: rgb(19 174 92);
-  --color-brand-a-red: rgb(255 0 0);
-  --color-brand-b-purple-200: rgb(196 143 255);
-  --color-brand-b-purple-600: rgb(122 20 255);
-  --color-brand-b-purple-800: rgb(58 18 95);
-  --color-brand-b-blue-200: rgb(179 226 250);
-  --color-brand-b-blue-500: rgb(66 186 240);
-  --color-brand-b-blue-700: rgb(10 60 194);
-  --color-brand-b-blue-800: rgb(14 9 47);
-  --color-brand-b-red: rgb(204 0 0);
-  --color-brand-b-green: rgb(14 129 68);
+  --color-brand-b-purple-200: rgb(222 192 255);
+  --color-brand-b-purple-300: rgb(196 143 255);
+  --color-brand-b-purple-600: rgb(151 71 255);
+  --color-brand-b-purple-700: rgb(122 20 255);
+  --color-brand-b-purple-800: rgb(85 26 139);
+  --color-brand-b-purple-900: rgb(58 18 95);
+  --color-brand-b-blue-100: rgb(206 219 253);
+  --color-brand-b-blue-200: rgb(158 183 250);
+  --color-brand-b-blue-300: rgb(109 147 248);
+  --color-brand-b-blue-400: rgb(61 111 245);
+  --color-brand-b-blue-500: rgb(12 75 243);
+  --color-brand-b-blue-600: rgb(10 60 194);
+  --color-brand-b-blue-700: rgb(7 45 146);
+  --color-brand-b-blue-800: rgb(5 30 97);
+  --color-brand-b-blue-900: rgb(2 15 49);
+  --color-brand-b-red-100: rgb(255 255 255);
+  --color-brand-b-red-200: rgb(255 204 204);
+  --color-brand-b-red-300: rgb(255 153 153);
+  --color-brand-b-red-400: rgb(255 102 102);
+  --color-brand-b-red-500: rgb(255 51 51);
+  --color-brand-b-red-600: rgb(255 0 0);
+  --color-brand-b-red-700: rgb(153 0 0);
+  --color-brand-b-red-800: rgb(102 0 0);
+  --color-brand-b-red-900: rgb(51 0 0);
+  --color-brand-b-green-100: rgb(246 254 250);
+  --color-brand-b-green-200: rgb(200 249 223);
+  --color-brand-b-green-300: rgb(154 244 196);
+  --color-brand-b-green-400: rgb(108 239 170);
+  --color-brand-b-green-500: rgb(62 234 143);
+  --color-brand-b-green-600: rgb(19 174 92);
+  --color-brand-b-green-700: rgb(14 129 68);
+  --color-brand-b-green-800: rgb(8 69 36);
+  --color-brand-b-green-900: rgb(4 37 19);
   --color-transparent: rgba(0 0 0 / 0);
+  --color-brand-a-green-100: rgb(243 246 233);
+  --color-brand-a-green-200: rgb(223 231 197);
+  --color-brand-a-green-300: rgb(207 219 169);
+  --color-brand-a-green-400: rgb(191 207 140);
+  --color-brand-a-green-500: rgb(175 195 111);
+  --color-brand-a-green-600: rgb(159 183 82);
+  --color-brand-a-green-700: rgb(137 158 66);
+  --color-brand-a-green-800: rgb(112 129 54);
+  --color-brand-a-green-900: rgb(81 93 39);
+  --color-brand-a-red-100: rgb(254 251 251);
+  --color-brand-a-red-200: rgb(250 224 230);
+  --color-brand-a-red-300: rgb(244 179 195);
+  --color-brand-a-red-400: rgb(238 135 160);
+  --color-brand-a-red-500: rgb(231 90 124);
+  --color-brand-a-red-600: rgb(225 46 89);
+  --color-brand-a-red-700: rgb(191 28 67);
+  --color-brand-a-red-800: rgb(147 21 52);
+  --color-brand-a-red-900: rgb(102 15 36);
+  --color-brand-a-sand-100: rgb(240 240 229);
+  --color-brand-a-sand-200: rgb(221 222 197);
+  --color-brand-a-sand-300: rgb(192 193 172);
+  --color-brand-a-sand-400: rgb(164 165 147);
+  --color-brand-a-sand-500: rgb(136 137 122);
+  --color-brand-a-sand-600: rgb(108 109 97);
+  --color-brand-a-sand-700: rgb(80 81 72);
+  --color-brand-a-sand-800: rgb(52 52 47);
+  --color-brand-a-sand-900: rgb(24 24 22);
   --font-size-md: 1rem;
   --font-size-xs: .75rem;
   --font-size-sm: .875rem;

package/dist/tokens/css/{semantics-(roles).tokens.css → semantics-roles.tokens.css}

@@ -1,5 +1,5 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.733Z */
+/* Generated on 2026-04-28T09:23:28.564Z */
 
 :root {
   --typography-heading-font-family: var(--brand-font-lead);

package/dist/tokens/css/themes-brands.tokens.brand-a.css

@@ -0,0 +1,22 @@
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-04-28T09:23:28.565Z */
+
+:root[data-brand="a"] {
+  --brand-color-functional-success: var(--color-brand-a-green-600);
+  --brand-color-functional-danger: var(--color-brand-a-red-600);
+  --brand-color-functional-base: var(--color-brand-a-green-700);
+  --brand-color-functional-base-dark: var(--color-brand-a-green-900);
+  --brand-color-primary: var(--color-brand-a-sand-700);
+  --brand-color-accent: var(--color-brand-a-green-400);
+  --brand-color-primary-dark: var(--color-brand-a-sand-900);
+  --brand-color-accent-dark: var(--color-brand-a-green-600);
+  --brand-color-subtle: var(--color-neutral-500);
+  --brand-color-subtle-dark: var(--color-neutral-800);
+  --brand-color-subtle-light: var(--color-neutral-200);
+  --brand-font-base: var(--font-family-sans);
+  --brand-font-lead: var(--font-family-serif);
+  --brand-corner-button: var(--size-radius-700);
+  --brand-corner-card: var(--size-radius-200);
+  --brand-corner-modal: var(--size-radius-400);
+  --brand-corner-input: var(--size-radius-200);
+}

package/dist/tokens/css/{themes-(brands).tokens.brand-b.css → themes-brands.tokens.brand-b.css}

@@ -1,15 +1,15 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-31T20:27:09.734Z */
+/* Generated on 2026-04-28T09:23:28.567Z */
 
 :root[data-brand="b"] {
-  --brand-color-functional-success: var(--color-brand-b-green);
-  --brand-color-functional-danger: var(--color-brand-b-red);
-  --brand-color-functional-base: var(--color-brand-b-purple-600);
-  --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
-  --brand-color-primary: var(--color-brand-b-blue-500);
-  --brand-color-accent: var(--color-brand-b-purple-600);
-  --brand-color-primary-dark: var(--color-brand-b-blue-700);
-  --brand-color-accent-dark: var(--color-brand-b-purple-800);
+  --brand-color-functional-success: var(--color-brand-b-green-600);
+  --brand-color-functional-danger: var(--color-brand-b-red-600);
+  --brand-color-functional-base: var(--color-brand-b-purple-700);
+  --brand-color-functional-base-dark: var(--color-brand-b-purple-900);
+  --brand-color-primary: var(--color-brand-b-purple-600);
+  --brand-color-accent: var(--color-brand-b-green-400);
+  --brand-color-primary-dark: var(--color-brand-b-purple-800);
+  --brand-color-accent-dark: var(--color-brand-b-green-800);
   --brand-color-subtle: var(--color-neutral-500);
   --brand-color-subtle-dark: var(--color-neutral-800);
   --brand-color-subtle-light: var(--color-neutral-200);

package/dist/tokens/json/appearance-modes.tokens.mode-dark.json

@@ -0,0 +1,121 @@
+{
+  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
+  "Color": {
+    "Text": {
+      "Default": {
+        "$type": "color",
+        "$value": "{Color.Neutral.800}"
+      },
+      "Inverse": {
+        "$type": "color",
+        "$value": "{Color.Neutral.000}"
+      },
+      "Disabled": {
+        "$type": "color",
+        "$value": "{Color.Neutral.600}"
+      },
+      "Brand": {
+        "$type": "color",
+        "$value": "{Brand.Color.Primary}"
+      },
+      "Subtle": {
+        "$type": "color",
+        "$value": "{Brand.Color.Subtle}"
+      },
+      "Strong": {
+        "$type": "color",
+        "$value": "{Color.Neutral.1000}"
+      },
+      "Danger": {
+        "$type": "color",
+        "$value": "{Brand.Color.Functional.Danger}"
+      },
+      "Success": {
+        "$type": "color",
+        "$value": "{Brand.Color.Functional.Success}"
+      }
+    },
+    "Fill": {
+      "Surface": {
+        "$type": "color",
+        "$value": "{Color.Neutral.000}"
+      },
+      "Disabled": {
+        "$type": "color",
+        "$value": "{Color.Neutral.300}"
+      },
+      "Hover": {
+        "$type": "color",
+        "$value": "{Color.Neutral.Alpha.500}"
+      },
+      "Brand": {
+        "$type": "color",
+        "$value": "{Brand.Color.Primary}"
+      },
+      "Subtle": {
+        "$type": "color",
+        "$value": "{Brand.Color.Subtle Light}"
+      },
+      "Active": {
+        "$type": "color",
+        "$value": "{Brand.Color.Accent}"
+      },
+      "Danger": {
+        "$type": "color",
+        "$value": "{Brand.Color.Functional.Danger}"
+      },
+      "Success": {
+        "$type": "color",
+        "$value": "{Brand.Color.Functional.Success}"
+      }
+    },
+    "Border": {
+      "Default": {
+        "$type": "color",
+        "$value": "{Color.Neutral.800}"
+      },
+      "Subtle": {
+        "$type": "color",
+        "$value": "{Brand.Color.Subtle}"
+      },
+      "Strong": {
+        "$type": "color",
+        "$value": "{Color.Neutral.1000}"
+      },
+      "Brand": {
+        "$type": "color",
+        "$value": "{Brand.Color.Primary}"
+      },
+      "Disabled": {
+        "$type": "color",
+        "$value": "{Color.Neutral.500}"
+      },
+      "Danger": {
+        "$type": "color",
+        "$value": "#ff0000"
+      }
+    },
+    "Overlay": {
+      "Backdrop": {
+        "$type": "color",
+        "$value": "{Color.Neutral.Alpha.400}"
+      },
+      "Hover": {
+        "$type": "color",
+        "$value": "{Color.Neutral.Alpha.200}"
+      },
+      "Active": {
+        "$type": "color",
+        "$value": "{Color.Neutral.Alpha.400}"
+      },
+      "Selected": {
+        "$type": "color",
+        "$value": "{Color.Neutral.Alpha.600}"
+      }
+    },
+    "Focus": {
+      "$type": "color",
+      "$value": "{Brand.Color.Primary}"
+    }
+  }
+}