ui-foundations 0.3.2 → 0.6.0

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.721Z
+// Generated on 2026-05-22T09:23:10.604Z
 
 export const tokens = {
   "colors": {
@@ -13,7 +13,7 @@ export const tokens = {
     "--color-text-success": "var(--brand-color-functional-success)",
     "--color-fill-surface": "var(--color-neutral-1000)",
     "--color-fill-disabled": "var(--color-neutral-300)",
-    "--color-fill-hover": "var(--color-neutral-alpha-500)",
+    "--color-fill-hover": "var(--color-neutral-alpha-inverse-100)",
     "--color-fill-brand": "var(--brand-color-primary)",
     "--color-fill-subtle": "var(--brand-color-subtle)",
     "--color-fill-active": "var(--brand-color-accent)",
@@ -25,10 +25,10 @@ export const tokens = {
     "--color-border-brand": "var(--brand-color-primary)",
     "--color-border-disabled": "var(--color-neutral-500)",
     "--color-border-danger": "var(--brand-color-functional-danger)",
-    "--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-overlay-backdrop": "var(--color-neutral-alpha-inverse-400)",
+    "--color-overlay-hover": "var(--color-neutral-alpha-inverse-100)",
+    "--color-overlay-active": "var(--color-neutral-alpha-inverse-200)",
+    "--color-overlay-selected": "var(--color-neutral-alpha-inverse-300)",
     "--color-focus": "var(--brand-color-primary-dark)"
   }
 } as const;

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.719Z
+// Generated on 2026-05-22T09:23:10.601Z
 
 export const tokens = {
   "colors": {

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.724Z
+// Generated on 2026-05-22T09:23:10.611Z
 
 export const tokens = {
   "components": {
@@ -62,49 +62,36 @@ export const tokens = {
     "--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-disabled": "var(--color-text-disabled)",
     "--input-text-text-color-placeholder": "var(--color-text-subtle)",
-    "--input-text-height-min": "2.5rem",
+    "--input-border-border-color-default": "var(--color-border-default)",
+    "--input-border-border-color-hover": "var(--color-border-brand)",
+    "--input-border-border-color-active": "var(--color-border-brand)",
+    "--input-border-border-color-focus": "var(--color-border-brand)",
+    "--input-border-border-size-default": "var(--size-border-100)",
+    "--input-border-border-size-hover": "var(--size-border-100)",
+    "--input-border-border-size-active": "var(--size-border-200)",
+    "--input-border-border-radius": "var(--brand-corner-input)",
+    "--input-border-border-color-disabled": "var(--color-border-disabled)",
+    "--input-border-border-color-invalid": "var(--color-border-danger)",
+    "--input-border-border-color-valid": "var(--color-border-strong)",
     "--input-font-family": "var(--brand-font-base)",
     "--input-font-weight": "var(--typography-body-font-weight)",
     "--input-font-size": "var(--typography-label-font-size)",
     "--input-line-height": "var(--typography-body-line-height)",
-    "--input-border-size-default": "var(--size-border-100)",
-    "--input-border-size-hover": "var(--size-border-100)",
-    "--input-border-size-active": "var(--size-border-200)",
-    "--input-border-radius": "var(--brand-corner-input)",
+    "--input-container-background-default": "var(--color-fill-surface)",
+    "--input-container-background-hover": "var(--color-fill-surface)",
+    "--input-container-background-focus": "var(--color-fill-surface)",
+    "--input-container-background-active": "var(--color-fill-surface)",
+    "--input-container-background-disabled": "var(--color-fill-disabled)",
     "--input-padding-inline": "var(--size-spacing-200)",
     "--input-padding-inline-icon-only": "var(--size-spacing-200)",
     "--input-padding-block": "var(--size-spacing-200)",
     "--input-gap": "var(--size-spacing-200)",
-    "--input-text-color-disabled": "var(--color-text-disabled)",
-    "--input-border-color-disabled": "var(--color-border-disabled)",
-    "--input-container-background-disabled": "var(--color-fill-disabled)",
     "--input-overlay-hover": "var(--color-transparent)",
     "--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-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)",
+    "--input-height-min": "2.5rem",
     "--form-group-gap": "var(--size-spacing-400)",
     "--form-group-title-color": "var(--color-text-default)",
     "--form-padding-inline": "var(--size-spacing-400)",
@@ -116,7 +103,61 @@ export const tokens = {
     "--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)"
+    "--form-border-size": "var(--size-border-100)",
+    "--checkbox-text-color-default": "var(--color-text-default)",
+    "--checkbox-text-color-hover": "var(--color-text-strong)",
+    "--checkbox-text-color-active": "var(--color-text-inverse)",
+    "--checkbox-border-color-default": "var(--color-border-subtle)",
+    "--checkbox-border-color-hover": "var(--color-border-strong)",
+    "--checkbox-border-color-active": "var(--color-border-brand)",
+    "--checkbox-border-color-focus": "var(--color-border-brand)",
+    "--checkbox-border-color-invalid": "var(--color-border-danger)",
+    "--checkbox-border-color-valid": "var(--color-border-strong)",
+    "--checkbox-border-color-disabled": "var(--color-border-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)",
+    "--checkbox-container-background-default": "var(--color-fill-surface)",
+    "--checkbox-container-background-hover": "var(--color-fill-surface)",
+    "--checkbox-container-background-focus": "var(--color-fill-surface)",
+    "--checkbox-container-background-active": "var(--color-fill-brand)",
+    "--checkbox-container-background-disabled": "var(--color-fill-disabled)",
+    "--checkbox-text-color-disabled": "var(--color-text-disabled)",
+    "--input-radio-text-color-default": "var(--color-text-default)",
+    "--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-disabled": "var(--color-border-disabled)",
+    "--input-radio-container-background-default": "var(--color-fill-surface)",
+    "--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)",
+    "--badge-default-text-color": "var(--color-text-default)",
+    "--badge-default-border-color": "var(--color-transparent)",
+    "--badge-default-container-background": "var(--color-fill-subtle)",
+    "--badge-brand-text-color": "var(--color-text-inverse)",
+    "--badge-brand-border-color": "var(--color-transparent)",
+    "--badge-brand-container-background": "var(--color-fill-brand)",
+    "--badge-success-text-color": "var(--color-text-inverse)",
+    "--badge-success-border-color": "var(--color-transparent)",
+    "--badge-success-container-background": "var(--color-fill-success)",
+    "--badge-font-family": "var(--brand-font-lead)",
+    "--badge-font-weight": "var(--typography-label-font-weight)",
+    "--badge-font-size": "var(--typography-label-font-size)",
+    "--badge-line-height": "var(--typography-label-line-height)",
+    "--badge-border-size-default": "var(--size-border-100)",
+    "--badge-border-radius": "var(--brand-corner-input)",
+    "--badge-padding-inline": "var(--size-spacing-400)",
+    "--badge-padding-inline-icon-only": "var(--size-spacing-200)",
+    "--badge-padding-block": "var(--size-spacing-200)",
+    "--badge-gap": "var(--size-spacing-200)",
+    "--badge-height-min": "2.5rem",
+    "--badge-width-min": "2.5rem",
+    "--badge-danger-container-background": "var(--color-fill-danger)",
+    "--badge-danger-border-color": "var(--color-transparent)",
+    "--badge-danger-text-color": "var(--color-text-inverse)"
   }
 } as const;
 

package/dist/tokens/ts/core-primitives.tokens.ts

@@ -0,0 +1,265 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-05-22T09:23:10.621Z
+
+export const tokens = {
+  "colors": {
+    "--color-neutral-100": "rgb(230 230 230)",
+    "--color-neutral-200": "rgb(204 204 204)",
+    "--color-neutral-300": "rgb(179 179 179)",
+    "--color-neutral-400": "rgb(128 128 128)",
+    "--color-neutral-500": "rgb(128 128 128)",
+    "--color-neutral-600": "rgb(102 102 102)",
+    "--color-neutral-700": "rgb(77 77 77)",
+    "--color-neutral-800": "rgb(51 51 51)",
+    "--color-neutral-900": "rgb(26 26 26)",
+    "--color-neutral-1000": "rgb(0 0 0)",
+    "--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)",
+    "--color-neutral-alpha-400": "rgba(0 0 0 / 0.4)",
+    "--color-neutral-alpha-500": "rgba(0 0 0 / 0.5)",
+    "--color-neutral-alpha-600": "rgba(0 0 0 / 0.6)",
+    "--color-neutral-alpha-700": "rgba(0 0 0 / 0.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-neutral-alpha-inverse-100": "rgba(255 255 255 / 0.1)",
+    "--color-neutral-alpha-inverse-200": "rgba(255 255 255 / 0.2)",
+    "--color-neutral-alpha-inverse-300": "rgba(255 255 255 / 0.3)",
+    "--color-neutral-alpha-inverse-400": "rgba(255 255 255 / 0.4)",
+    "--color-neutral-alpha-inverse-500": "rgba(255 255 255 / 0.5)",
+    "--color-neutral-alpha-inverse-600": "rgba(255 255 255 / 0.6)",
+    "--color-neutral-alpha-inverse-700": "rgba(255 255 255 / 0.7)",
+    "--color-neutral-alpha-inverse-800": "rgba(255 255 255 / 0.8)",
+    "--color-neutral-alpha-inverse-900": "rgba(255 255 255 / 0.9)",
+    "--color-neutral-alpha-inverse-000": "rgba(255 255 255 / 0)",
+    "--color-neutral-000": "rgb(255 255 255)",
+    "--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)",
+    "--color-brand-c-blue-10": "rgb(27 17 92)",
+    "--color-brand-c-blue-20": "rgb(7 45 146)",
+    "--color-brand-c-blue-30": "rgb(10 60 194)",
+    "--color-brand-c-blue-40": "rgb(12 75 243)",
+    "--color-brand-c-blue-50": "rgb(53 103 246)",
+    "--color-brand-c-blue-60": "rgb(109 147 248)",
+    "--color-brand-c-blue-70": "rgb(148 176 250)",
+    "--color-brand-c-blue-80": "rgb(182 200 252)",
+    "--color-brand-c-blue-90": "rgb(216 226 253)",
+    "--color-brand-c-blue-100": "rgb(27 17 92)",
+    "--color-brand-c-coolblue-10": "rgb(5 68 97)",
+    "--color-brand-c-coolblue-20": "rgb(7 102 146)",
+    "--color-brand-c-coolblue-30": "rgb(10 136 194)",
+    "--color-brand-c-coolblue-40": "rgb(12 170 243)",
+    "--color-brand-c-coolblue-50": "rgb(56 185 245)",
+    "--color-brand-c-coolblue-60": "rgb(112 203 244)",
+    "--color-brand-c-coolblue-70": "rgb(169 223 248)",
+    "--color-brand-c-coolblue-80": "rgb(198 234 251)",
+    "--color-brand-c-coolblue-90": "rgb(226 244 253)",
+    "--color-brand-c-coolblue-100": "rgb(11 68 97)",
+    "--color-brand-c-green-10": "rgb(5 66 61)",
+    "--color-brand-c-green-20": "rgb(36 111 73)",
+    "--color-brand-c-green-30": "rgb(43 161 104)",
+    "--color-brand-c-green-40": "rgb(48 182 117)",
+    "--color-brand-c-green-50": "rgb(97 196 141)",
+    "--color-brand-c-green-60": "rgb(135 210 166)",
+    "--color-brand-c-green-70": "rgb(169 224 191)",
+    "--color-brand-c-green-80": "rgb(197 228 205)",
+    "--color-brand-c-green-90": "rgb(223 246 235)",
+    "--color-brand-c-green-100": "rgb(239 251 245)",
+    "--color-brand-c-red-10": "rgb(96 6 9)",
+    "--color-brand-c-red-20": "rgb(144 9 14)",
+    "--color-brand-c-red-30": "rgb(192 12 18)",
+    "--color-brand-c-red-40": "rgb(240 15 23)",
+    "--color-brand-c-red-50": "rgb(242 58 65)",
+    "--color-brand-c-red-60": "rgb(246 111 116)",
+    "--color-brand-c-red-70": "rgb(248 150 153)",
+    "--color-brand-c-red-80": "rgb(250 183 185)",
+    "--color-brand-c-red-90": "rgb(253 226 227)",
+    "--color-brand-c-red-100": "rgb(254 236 236)",
+    "--color-brand-c-orange-10": "rgb(102 61 0)",
+    "--color-brand-c-orange-20": "rgb(153 92 0)",
+    "--color-brand-c-orange-30": "rgb(204 122 0)",
+    "--color-brand-c-orange-40": "rgb(255 153 0)",
+    "--color-brand-c-orange-50": "rgb(255 171 46)",
+    "--color-brand-c-orange-60": "rgb(255 194 102)",
+    "--color-brand-c-orange-70": "rgb(255 210 143)",
+    "--color-brand-c-orange-80": "rgb(255 224 178)",
+    "--color-brand-c-orange-90": "rgb(255 239 214)",
+    "--color-brand-c-orange-100": "rgb(255 247 235)",
+    "--color-brand-c-purple-10": "rgb(57 17 92)",
+    "--color-brand-c-purple-20": "rgb(81 7 146)",
+    "--color-brand-c-purple-30": "rgb(108 10 194)",
+    "--color-brand-c-purple-40": "rgb(135 12 243)",
+    "--color-brand-c-purple-50": "rgb(156 53 246)",
+    "--color-brand-c-purple-60": "rgb(183 109 248)",
+    "--color-brand-c-purple-70": "rgb(202 148 250)",
+    "--color-brand-c-purple-80": "rgb(219 182 252)",
+    "--color-brand-c-purple-90": "rgb(236 216 253)",
+    "--color-brand-c-purple-100": "rgb(245 236 254)",
+    "--color-brand-c-midnight-10": "rgb(11 9 45)"
+  },
+  "typography": {
+    "--font-size-md": "1rem",
+    "--font-size-xs": ".75rem",
+    "--font-size-sm": ".875rem",
+    "--font-size-lg": "1.25rem",
+    "--font-size-xl": "1.5rem",
+    "--font-size-xxl": "2rem",
+    "--font-size-xxxl": "2.5rem",
+    "--font-weight-100": 100,
+    "--font-weight-200": 200,
+    "--font-weight-300": 300,
+    "--font-weight-400": 400,
+    "--font-weight-500": 500,
+    "--font-weight-600": 600,
+    "--font-weight-700": 700,
+    "--font-weight-800": 800,
+    "--font-weight-900": 900,
+    "--font-family-sans": "Inter",
+    "--font-family-serif": "Rokkitt",
+    "--font-family-mono": "SFMono-Regular",
+    "--line-height-xs": "1rem",
+    "--line-height-sm": "1.25rem",
+    "--line-height-md": "1.5rem",
+    "--line-height-lg": "1.75rem",
+    "--line-height-xl": "2rem",
+    "--line-height-xxl": "2.75rem",
+    "--line-height-xxxl": "3.5rem"
+  },
+  "spacing": {
+    "--size-spacing-100": ".25rem",
+    "--size-spacing-200": ".5rem",
+    "--size-spacing-300": ".75rem",
+    "--size-spacing-400": "1rem",
+    "--size-spacing-500": "1.25rem",
+    "--size-spacing-600": "1.5rem",
+    "--size-spacing-700": "2rem",
+    "--size-spacing-800": "2.5rem",
+    "--size-spacing-900": "3rem",
+    "--size-spacing-1000": "4rem",
+    "--size-spacing-000": "0"
+  },
+  "radii": {
+    "--size-radius-100": ".125rem",
+    "--size-radius-200": ".25rem",
+    "--size-radius-300": ".375rem",
+    "--size-radius-400": ".5rem",
+    "--size-radius-500": ".75rem",
+    "--size-radius-600": "1rem",
+    "--size-radius-700": "1.25rem",
+    "--size-radius-800": "1.5rem",
+    "--size-radius-900": "2rem",
+    "--size-radius-000": "0",
+    "--size-radius-full": "625rem"
+  },
+  "shadows": {
+    "--shadow-focus": ".5rem"
+  },
+  "components": {
+    "--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",
+    "--layout-base-grid": ".25rem",
+    "--zindex-fixed": 1030,
+    "--zindex-sticky": 1020,
+    "--zindex-dropdown": 1000,
+    "--zindex-dropdown-base": 900,
+    "--zindex-modal": 1050,
+    "--zindex-base": 0,
+    "--zindex-tooltip": 1070,
+    "--zindex-raised": 1,
+    "--zindex-popover": 1060,
+    "--zindex-modal-overlay": 1040,
+    "--zindex-hidden": -1
+  },
+  "breakpoints": {
+    "--breakpoint-100": "580px",
+    "--breakpoint-200": "760px",
+    "--breakpoint-300": "960px",
+    "--breakpoint-400": "1200px",
+    "--breakpoint-500": "1440px",
+    "--breakpoint-600": "1920px"
+  },
+  "containers": {
+    "--container-100": "192px",
+    "--container-200": "384px",
+    "--container-300": "576px",
+    "--container-400": "768px",
+    "--container-500": "960px",
+    "--container-600": "1152px"
+  }
+} as const;
+
+export type ColorToken = keyof typeof tokens.colors;
+export type TypographyToken = keyof typeof tokens.typography;
+export type SpacingToken = keyof typeof tokens.spacing;
+export type RadiusToken = keyof typeof tokens.radii;
+export type ShadowToken = keyof typeof tokens.shadows;
+export type BreakpointToken = keyof typeof tokens.breakpoints;
+export type ContainerToken = keyof typeof tokens.containers;
+export type ComponentToken = keyof typeof tokens.components;

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.733Z
+// Generated on 2026-05-22T09:23:10.624Z
 
 export const tokens = {
   "typography": {

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

@@ -0,0 +1,32 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-05-22T09:23:10.626Z
+
+export const tokens = {
+  "colors": {
+    "--brand-color-functional-success": "var(--color-brand-c-green-30)",
+    "--brand-color-functional-danger": "var(--color-brand-c-red-30)",
+    "--brand-color-functional-base": "var(--color-brand-c-blue-10)",
+    "--brand-color-functional-base-dark": "var(--color-brand-c-midnight-10)",
+    "--brand-color-primary": "var(--color-brand-c-blue-40)",
+    "--brand-color-accent": "var(--color-brand-c-coolblue-60)",
+    "--brand-color-primary-dark": "var(--color-brand-c-blue-10)",
+    "--brand-color-accent-dark": "var(--color-brand-c-coolblue-10)",
+    "--brand-color-subtle": "var(--color-neutral-500)",
+    "--brand-color-subtle-dark": "var(--color-neutral-800)",
+    "--brand-color-subtle-light": "var(--color-neutral-200)"
+  },
+  "typography": {
+    "--brand-font-base": "var(--font-family-sans)",
+    "--brand-font-lead": "var(--font-family-serif)"
+  },
+  "radii": {
+    "--brand-corner-button": "var(--size-radius-full)",
+    "--brand-corner-card": "var(--size-radius-300)",
+    "--brand-corner-modal": "var(--size-radius-400)",
+    "--brand-corner-input": "var(--size-radius-200)"
+  }
+} as const;
+
+export type ColorToken = keyof typeof tokens.colors;
+export type TypographyToken = keyof typeof tokens.typography;
+export type RadiusToken = keyof typeof tokens.radii;

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

@@ -1,16 +1,16 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.734Z
+// Generated on 2026-05-22T09:23:10.628Z
 
 export const tokens = {
   "colors": {
-    "--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/ts/{themes-(brands).tokens.brand-a.ts → themes-brands.tokens.brand-c.ts}

@@ -1,16 +1,16 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.734Z
+// Generated on 2026-05-22T09:23:10.629Z
 
 export const tokens = {
   "colors": {
-    "--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-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-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)"

package/dist/ui/index.css

@@ -3,4 +3,12 @@
 @import url("./patterns/input.css") layer(components);
 @import url("./patterns/icon.css") layer(components);
 @import url("./patterns/checkbox.css") layer(components);
+@import url("./patterns/radio.css") layer(components);
 @import url("./patterns/switch.css") layer(components);
+@import url("./patterns/badge.css") layer(components);
+@import url("./patterns/divider.css") layer(components);
+@import url("./patterns/textarea.css") layer(components);
+@import url("./patterns/avatar.css") layer(components);
+@import url("./patterns/accordion.css") layer(components);
+@import url("./patterns/tabs.css") layer(components);
+@import url("./patterns/tooltip.css") layer(components);

package/dist/ui/patterns/accordion.css

@@ -0,0 +1,81 @@
+@layer components {
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: var(--size-border-100) solid var(--color-border-default);
+    border-radius: var(--size-radius-400);
+    overflow: hidden;
+  }
+
+  .accordion-item {
+    border-block-start: var(--size-border-100) solid var(--color-border-default);
+  }
+
+  .accordion-item:first-child {
+    border-block-start: none;
+  }
+
+  .accordion-item > summary {
+    display: flex;
+    align-items: center;
+    gap: var(--size-spacing-200);
+    padding-inline: var(--size-spacing-400);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-600);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+  }
+
+  .accordion-item > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .accordion-item > summary::before {
+    content: "";
+    display: inline-block;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: var(--size-border-200) solid currentColor;
+    border-block-end: var(--size-border-200) solid currentColor;
+    transform: rotate(-45deg);
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  .accordion-item[open] > summary::before {
+    transform: rotate(45deg);
+  }
+
+  .accordion-item > summary:hover,
+  .accordion-item > summary.is-hover {
+    background: var(--color-fill-hover);
+  }
+
+  .accordion-item > summary:focus-visible,
+  .accordion-item > summary.is-focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--shadow-focus) var(--color-focus);
+  }
+
+  .accordion-item__content {
+    padding-inline: var(--size-spacing-400);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+  }
+
+  /* ── Disabled ── */
+
+  .accordion-item.is-disabled > summary {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}