ui-foundations 0.1.2 → 0.3.0

package/dist/react/index.js

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

package/dist/react/switch.js

@@ -0,0 +1,45 @@
+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;
+}
+
+export function Switch({
+  className = "",
+  wrapperClassName = "",
+  label,
+  children,
+  role = "switch",
+  ...props
+}) {
+  const classes = ["switch"];
+  if (className) classes.push(className);
+
+  const content = children ?? label;
+  const hasLabel = hasLabelContent(content);
+  const disabled = Boolean(props.disabled);
+  const input = React.createElement("input", {
+    type: "checkbox",
+    role,
+    className: classes.join(" "),
+    ...props,
+  });
+
+  if (!hasLabel) return input;
+
+  const wrapperClasses = ["switch-field"];
+  if (disabled) wrapperClasses.push("is-disabled");
+  if (wrapperClassName) wrapperClasses.push(wrapperClassName);
+
+  return React.createElement(
+    "label",
+    {
+      className: wrapperClasses.join(" "),
+    },
+    input,
+    React.createElement("span", { className: "switch-field__text" }, content),
+  );
+}

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

@@ -1,8 +1,7 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.559Z */
+/* Generated on 2026-03-31T20:27:09.721Z */
 
 :root[data-mode="dark"] {
-  --color-focus: var(--brand-color-primary-dark);
   --color-text-default: var(--color-neutral-800);
   --color-text-inverse: var(--color-neutral-1000);
   --color-text-disabled: var(--color-neutral-600);
@@ -29,4 +28,5 @@
   --color-overlay-hover: var(--color-neutral-alpha-200);
   --color-overlay-active: var(--color-neutral-alpha-400);
   --color-overlay-selected: var(--color-neutral-alpha-600);
+  --color-focus: var(--brand-color-primary-dark);
 }

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

@@ -1,8 +1,7 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.560Z */
+/* Generated on 2026-03-31T20:27:09.718Z */
 
 :root {
-  --color-focus: var(--brand-color-primary);
   --color-text-default: var(--color-neutral-800);
   --color-text-inverse: var(--color-neutral-000);
   --color-text-disabled: var(--color-neutral-600);
@@ -24,9 +23,10 @@
   --color-border-strong: var(--color-neutral-1000);
   --color-border-brand: var(--brand-color-primary);
   --color-border-disabled: var(--color-neutral-500);
-  --color-border-danger: var(--brand-color-functional-danger);
+  --color-border-danger: rgb(255 0 0);
   --color-overlay-backdrop: var(--color-neutral-alpha-400);
   --color-overlay-hover: var(--color-neutral-alpha-200);
   --color-overlay-active: var(--color-neutral-alpha-400);
   --color-overlay-selected: var(--color-neutral-alpha-600);
+  --color-focus: var(--brand-color-primary);
 }

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

@@ -1,61 +1,78 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.558Z */
+/* Generated on 2026-03-31T20:27:09.724Z */
 
 :root {
-  --button-font-family: var(--brand-font-lead);
-  --button-font-weight: var(--typography-label-font-weight);
-  --button-font-size: var(--typography-label-font-size);
-  --button-line-height: var(--typography-label-line-height);
-  --button-border-size-default: var(--size-border-000);
   --button-border-size-hover: var(--size-border-100);
-  --button-border-size-active: var(--size-border-200);
-  --button-border-radius: var(--brand-corner-button);
-  --button-padding-inline: var(--size-spacing-400);
-  --button-padding-inline-icon-only: var(--size-spacing-200);
-  --button-padding-block: var(--size-spacing-200);
-  --button-gap: var(--size-spacing-200);
-  --button-text-color-disabled: var(--color-text-disabled);
-  --button-border-color-disabled: var(--color-border-disabled);
-  --button-container-background-disabled: var(--color-fill-disabled);
-  --button-overlay-hover: var(--color-overlay-hover);
-  --button-overlay-active: var(--color-overlay-active);
-  --button-height: 2.5rem;
-  --button-solid-text-color-default: var(--color-text-inverse);
-  --button-solid-text-color-hover: var(--color-text-inverse);
-  --button-solid-text-color-active: var(--color-text-inverse);
   --button-solid-border-color-default: var(--color-border-brand);
   --button-solid-border-color-hover: var(--color-border-brand);
-  --button-solid-border-color-focus: var(--color-border-brand);
   --button-solid-border-color-active: var(--color-border-brand);
+  --button-solid-border-color-focus: var(--color-border-brand);
+  --button-solid-text-color-default: var(--color-text-inverse);
   --button-solid-container-background-default: var(--color-fill-brand);
   --button-solid-container-background-hover: var(--color-fill-brand);
-  --button-solid-container-background-focus: var(--color-fill-brand);
   --button-solid-container-background-active: var(--color-fill-brand);
-  --button-outline-text-color-default: var(--color-text-brand);
-  --button-outline-text-color-hover: var(--color-text-brand);
-  --button-outline-text-color-active: var(--color-text-brand);
+  --button-solid-container-background-focus: var(--color-fill-brand);
+  --button-solid-text-color-hover: var(--color-text-inverse);
+  --button-solid-text-color-active: var(--color-text-inverse);
   --button-outline-border-color-default: var(--color-border-brand);
   --button-outline-border-color-hover: var(--color-border-brand);
   --button-outline-border-color-active: var(--color-border-brand);
   --button-outline-border-color-focus: var(--color-border-brand);
+  --button-outline-text-color-default: var(--color-text-brand);
   --button-outline-container-background-default: var(--color-fill-surface);
+  --button-outline-container-background-active: var(--color-fill-surface);
   --button-outline-container-background-hover: var(--color-fill-surface);
   --button-outline-container-background-focus: var(--color-fill-surface);
-  --button-outline-container-background-active: var(--color-fill-surface);
-  --button-ghost-text-color-default: var(--color-text-brand);
-  --button-ghost-text-color-hover: var(--color-text-brand);
-  --button-ghost-text-color-active: var(--color-text-brand);
-  --button-ghost-border-color-default: var(--color-transparent);
-  --button-ghost-border-color-hover: var(--color-transparent);
-  --button-ghost-border-color-focus: var(--color-transparent);
-  --button-ghost-border-color-active: var(--color-transparent);
+  --button-outline-text-color-hover: var(--color-text-brand);
+  --button-outline-text-color-active: var(--color-text-brand);
   --button-ghost-container-background-default: var(--color-fill-surface);
   --button-ghost-container-background-hover: var(--color-fill-surface);
   --button-ghost-container-background-focus: var(--color-fill-surface);
   --button-ghost-container-background-active: var(--color-fill-surface);
+  --button-ghost-border-color-default: var(--color-transparent);
+  --button-ghost-border-color-hover: var(--color-transparent);
+  --button-ghost-border-color-focus: var(--color-transparent);
+  --button-ghost-border-color-active: var(--color-transparent);
+  --button-ghost-text-color-default: var(--color-text-brand);
+  --button-ghost-text-color-hover: var(--color-text-brand);
+  --button-ghost-text-color-active: var(--color-text-brand);
+  --button-border-size-default: var(--size-border-100);
+  --button-font-family: var(--brand-font-lead);
+  --button-line-height: var(--typography-label-line-height);
+  --button-border-radius: var(--brand-corner-button);
+  --button-font-weight: var(--typography-label-font-weight);
+  --button-font-size: var(--typography-label-font-size);
+  --button-padding-inline: var(--size-spacing-400);
+  --button-gap: var(--size-spacing-200);
+  --button-padding-block: var(--size-spacing-200);
+  --button-container-background-disabled: var(--color-fill-disabled);
+  --button-border-color-disabled: var(--color-border-disabled);
+  --button-text-color-disabled: var(--color-text-disabled);
+  --button-border-size-active: var(--size-border-200);
+  --button-overlay-hover: var(--color-overlay-hover);
+  --button-overlay-active: var(--color-overlay-active);
+  --button-padding-inline-icon-only: var(--size-spacing-200);
+  --button-height-min: 2.5rem;
+  --button-group-gap: var(--size-spacing-200);
+  --button-width-min: 2.5rem;
   --modal-backdrop-color: var(--color-overlay-backdrop);
   --modal-surface-color: var(--color-fill-surface);
   --modal-surface-border-radius: var(--brand-corner-modal);
+  --input-text-text-color-default: var(--color-text-default);
+  --input-text-text-color-hover: var(--color-text-default);
+  --input-text-text-color-active: var(--color-text-default);
+  --input-text-border-color-default: var(--color-border-default);
+  --input-text-border-color-hover: var(--color-border-brand);
+  --input-text-border-color-active: var(--color-border-brand);
+  --input-text-border-color-focus: var(--color-border-brand);
+  --input-text-border-color-invalid: var(--color-border-danger);
+  --input-text-border-color-valid: var(--color-border-strong);
+  --input-text-container-background-default: var(--color-fill-surface);
+  --input-text-container-background-hover: var(--color-fill-surface);
+  --input-text-container-background-focus: var(--color-fill-surface);
+  --input-text-container-background-active: var(--color-fill-surface);
+  --input-text-text-color-placeholder: var(--color-text-subtle);
+  --input-text-height-min: 2.5rem;
   --input-font-family: var(--brand-font-base);
   --input-font-weight: var(--typography-body-font-weight);
   --input-font-size: var(--typography-label-font-size);
@@ -74,30 +91,29 @@
   --input-overlay-hover: var(--color-transparent);
   --input-overlay-active: var(--color-transparent);
   --input-height: 2.5rem;
-  --input-text-text-color-placeholder: var(--color-text-subtle);
-  --input-text-text-color-default: var(--color-text-default);
-  --input-text-text-color-hover: var(--color-text-default);
-  --input-text-text-color-active: var(--color-text-default);
-  --input-text-border-color-default: var(--color-border-default);
-  --input-text-border-color-hover: var(--color-border-brand);
-  --input-text-border-color-active: var(--color-border-brand);
-  --input-text-border-color-focus: var(--color-border-brand);
-  --input-text-border-color-invalid: var(--color-border-danger);
-  --input-text-border-color-valid: var(--color-border-strong);
-  --input-text-container-background-default: var(--color-fill-surface);
-  --input-text-container-background-hover: var(--color-fill-surface);
-  --input-text-container-background-focus: var(--color-fill-surface);
-  --input-text-container-background-active: var(--color-fill-surface);
-  --form-gap: var(--size-spacing-400);
+  --input-checkbox-text-color-default: var(--color-text-default);
+  --input-checkbox-text-color-hover: var(--color-text-default);
+  --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-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-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);
+  --form-group-gap: var(--size-spacing-400);
+  --form-group-title-color: var(--color-text-default);
   --form-padding-inline: var(--size-spacing-400);
   --form-padding-block: var(--size-spacing-400);
   --form-border-radius: var(--brand-corner-card);
-  --form-border-size: var(--size-border-100);
-  --form-container-background: var(--color-fill-surface);
-  --form-container-border-color: var(--color-border-subtle);
-  --form-group-gap: var(--size-spacing-400);
-  --form-group-title-color: var(--color-text-default);
+  --form-gap: var(--size-spacing-400);
   --form-field-gap: var(--size-spacing-200);
   --form-field-helper-text-color-default: var(--color-text-subtle);
   --form-field-helper-text-color-invalid: var(--color-text-danger);
+  --form-container-background: var(--color-fill-surface);
+  --form-container-border-color: var(--color-border-subtle);
+  --form-border-size: var(--size-border-100);
 }

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

@@ -1,8 +1,7 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.562Z */
+/* Generated on 2026-03-31T20:27:09.731Z */
 
 :root {
-  --color-transparent: rgba(0 0 0 / 0);
   --color-neutral-100: rgb(230 230 230);
   --color-neutral-200: rgb(204 204 204);
   --color-neutral-300: rgb(179 179 179);
@@ -13,7 +12,6 @@
   --color-neutral-800: rgb(51 51 51);
   --color-neutral-900: rgb(26 26 26);
   --color-neutral-1000: rgb(0 0 0);
-  --color-neutral-000: rgb(255 255 255);
   --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
   --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
   --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
@@ -24,8 +22,7 @@
   --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
   --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
   --color-neutral-alpha-000: rgba(0 0 0 / 0);
-  --color-brand-a-red: rgb(255 0 0);
-  --color-brand-a-green: rgb(19 174 92);
+  --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);
@@ -33,8 +30,8 @@
   --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-b-red: rgb(204 0 0);
-  --color-brand-b-green: rgb(14 129 68);
+  --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);
@@ -42,9 +39,12 @@
   --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-transparent: rgba(0 0 0 / 0);
+  --font-size-md: 1rem;
   --font-size-xs: .75rem;
   --font-size-sm: .875rem;
-  --font-size-md: 1rem;
   --font-size-lg: 1.25rem;
   --font-size-xl: 1.5rem;
   --font-size-xxl: 2rem;
@@ -103,25 +103,25 @@
   --container-400: 768px;
   --container-500: 960px;
   --container-600: 1152px;
-  --layout-base-grid: .25rem;
+  --size-border-100: .0625rem;
+  --size-border-200: .125rem;
+  --size-border-300: .1875rem;
+  --size-border-000: 0;
   --layout-columns: 12;
   --layout-gutter: 1rem;
   --layout-max-width: 1236px;
   --layout-column-max-width: 412px;
   --layout-float-breakpoint: 1220px;
-  --size-border-100: .0625rem;
-  --size-border-200: .125rem;
-  --size-border-300: .1875rem;
-  --size-border-000: 0;
-  --zindex-hidden: -1;
-  --zindex-base: 0;
-  --zindex-raised: 1;
-  --zindex-dropdown-base: 900;
-  --zindex-dropdown: 1000;
-  --zindex-sticky: 1020;
+  --layout-base-grid: .25rem;
   --zindex-fixed: 1030;
-  --zindex-modal-overlay: 1040;
+  --zindex-sticky: 1020;
+  --zindex-dropdown: 1000;
+  --zindex-dropdown-base: 900;
   --zindex-modal: 1050;
-  --zindex-popover: 1060;
+  --zindex-base: 0;
   --zindex-tooltip: 1070;
+  --zindex-raised: 1;
+  --zindex-popover: 1060;
+  --zindex-modal-overlay: 1040;
+  --zindex-hidden: -1;
 }

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

@@ -1,24 +1,24 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.563Z */
+/* Generated on 2026-03-31T20:27:09.733Z */
 
 :root {
-  --typography-code: var(--font-family-mono);
   --typography-heading-font-family: var(--brand-font-lead);
-  --typography-heading-font-weight: var(--font-weight-700);
+  --typography-heading-font-size-md: var(--font-size-md);
   --typography-heading-font-size-xs: var(--font-size-xs);
   --typography-heading-font-size-sm: var(--font-size-sm);
-  --typography-heading-font-size-md: var(--font-size-md);
   --typography-heading-font-size-lg: var(--font-size-lg);
   --typography-heading-font-size-xl: var(--font-size-xl);
   --typography-heading-font-size-xxl: var(--font-size-xxl);
   --typography-heading-font-size-xxxl: var(--font-size-xxxl);
+  --typography-heading-font-weight: var(--font-weight-700);
+  --typography-heading-line-height-md: var(--line-height-md);
   --typography-heading-line-height-xs: var(--line-height-xs);
   --typography-heading-line-height-sm: var(--line-height-sm);
-  --typography-heading-line-height-md: var(--line-height-md);
   --typography-heading-line-height-lg: var(--line-height-lg);
   --typography-heading-line-height-xl: var(--line-height-xl);
   --typography-heading-line-height-xxl: var(--line-height-xxl);
   --typography-heading-line-height-xxxl: var(--line-height-xxxl);
+  --typography-code: var(--font-family-mono);
   --typography-label-font-family: var(--brand-font-lead);
   --typography-label-font-weight: var(--font-weight-600);
   --typography-label-font-size: var(--font-size-md);
@@ -30,6 +30,7 @@
   --typography-body-line-height: var(--line-height-md);
   --corner-button-radius: var(--brand-corner-button);
   --corner-card-radius: var(--brand-corner-card);
-  --corner-form-radius: var(--brand-corner-card);
   --corner-modal-radius: var(--brand-corner-modal);
+  --corner-form-radius: var(--brand-corner-card);
+  --corner-checkbox-radius: var(--brand-corner-input);
 }

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

@@ -1,22 +1,22 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.552Z */
+/* Generated on 2026-03-31T20:27:09.734Z */
 
 :root[data-brand="a"] {
+  --brand-color-functional-success: var(--color-brand-a-green);
+  --brand-color-functional-danger: var(--color-brand-a-red);
+  --brand-color-functional-base: var(--color-brand-a-blue-700);
+  --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
   --brand-color-primary: var(--color-brand-a-purple-600);
-  --brand-color-primary-dark: var(--color-brand-a-purple-800);
   --brand-color-accent: var(--color-brand-a-blue-500);
+  --brand-color-primary-dark: var(--color-brand-a-purple-800);
+  --brand-color-accent-dark: var(--color-brand-a-blue-700);
   --brand-color-subtle: var(--color-neutral-500);
-  --brand-color-subtle-light: var(--color-neutral-200);
   --brand-color-subtle-dark: var(--color-neutral-800);
-  --brand-color-accent-dark: var(--color-brand-a-blue-700);
-  --brand-color-functional-base: var(--color-brand-a-blue-700);
-  --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
-  --brand-color-functional-success: var(--color-brand-a-green);
-  --brand-color-functional-danger: var(--color-brand-a-red);
-  --brand-font-lead: var(--font-family-serif);
+  --brand-color-subtle-light: var(--color-neutral-200);
   --brand-font-base: var(--font-family-sans);
-  --brand-corner-button: var(--size-radius-full);
-  --brand-corner-input: var(--size-radius-200);
+  --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/{brand-b.tokens.css → themes-(brands).tokens.brand-b.css}

@@ -1,22 +1,22 @@
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-03-04T21:56:02.554Z */
+/* Generated on 2026-03-31T20:27:09.734Z */
 
 :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-primary-dark: var(--color-brand-b-blue-700);
   --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-subtle: var(--color-neutral-500);
-  --brand-color-subtle-light: var(--color-neutral-200);
   --brand-color-subtle-dark: var(--color-neutral-800);
-  --brand-color-accent-dark: var(--color-brand-b-purple-800);
-  --brand-color-functional-base: var(--color-brand-b-purple-600);
-  --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
-  --brand-color-functional-success: var(--color-brand-b-green);
-  --brand-color-functional-danger: var(--color-brand-b-red);
-  --brand-font-lead: var(--font-family-serif);
+  --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-000);
-  --brand-corner-input: var(--size-radius-000);
   --brand-corner-card: var(--size-radius-100);
   --brand-corner-modal: var(--size-radius-200);
+  --brand-corner-input: var(--size-radius-000);
 }

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

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