ui-foundations 0.1.0

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

@@ -0,0 +1,32 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.062Z
+
+export const tokens = {
+  "colors": {
+    "--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-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)"
+  },
+  "typography": {
+    "--brand-font-lead": "var(--font-family-serif)",
+    "--brand-font-base": "var(--font-family-sans)"
+  },
+  "radii": {
+    "--brand-corner-button": "var(--size-radius-full)",
+    "--brand-corner-input": "var(--size-radius-200)",
+    "--brand-corner-card": "var(--size-radius-200)",
+    "--brand-corner-modal": "var(--size-radius-400)"
+  }
+} 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/brand-b.tokens.ts

@@ -0,0 +1,32 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.063Z
+
+export const tokens = {
+  "colors": {
+    "--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-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)"
+  },
+  "typography": {
+    "--brand-font-lead": "var(--font-family-serif)",
+    "--brand-font-base": "var(--font-family-sans)"
+  },
+  "radii": {
+    "--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)"
+  }
+} 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/color.dark.tokens.ts

@@ -0,0 +1,36 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.068Z
+
+export const tokens = {
+  "colors": {
+    "--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)",
+    "--color-text-brand": "var(--brand-color-primary-dark)",
+    "--color-text-subtle": "var(--brand-color-subtle-dark)",
+    "--color-text-strong": "var(--color-neutral-1000)",
+    "--color-text-danger": "var(--brand-color-functional-danger)",
+    "--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-brand": "var(--brand-color-primary)",
+    "--color-fill-subtle": "var(--brand-color-subtle)",
+    "--color-fill-active": "var(--brand-color-accent)",
+    "--color-fill-danger": "var(--brand-color-functional-danger)",
+    "--color-fill-success": "var(--brand-color-functional-success)",
+    "--color-border-default": "var(--color-neutral-800)",
+    "--color-border-subtle": "var(--brand-color-subtle-dark)",
+    "--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-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)"
+  }
+} as const;
+
+export type ColorToken = keyof typeof tokens.colors;

package/dist/tokens/ts/color.light.tokens.ts

@@ -0,0 +1,36 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.069Z
+
+export const tokens = {
+  "colors": {
+    "--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)",
+    "--color-text-brand": "var(--brand-color-primary)",
+    "--color-text-subtle": "var(--brand-color-subtle)",
+    "--color-text-strong": "var(--color-neutral-1000)",
+    "--color-text-danger": "var(--brand-color-functional-danger)",
+    "--color-text-success": "var(--brand-color-functional-success)",
+    "--color-fill-surface": "var(--color-neutral-000)",
+    "--color-fill-disabled": "var(--color-neutral-300)",
+    "--color-fill-hover": "var(--color-neutral-alpha-500)",
+    "--color-fill-brand": "var(--brand-color-primary)",
+    "--color-fill-subtle": "var(--brand-color-subtle-light)",
+    "--color-fill-active": "var(--brand-color-accent)",
+    "--color-fill-danger": "var(--brand-color-functional-danger)",
+    "--color-fill-success": "var(--brand-color-functional-success)",
+    "--color-border-default": "var(--color-neutral-800)",
+    "--color-border-subtle": "var(--brand-color-subtle)",
+    "--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-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)"
+  }
+} as const;
+
+export type ColorToken = keyof typeof tokens.colors;

package/dist/tokens/ts/component.tokens.ts

@@ -0,0 +1,107 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.066Z
+
+export const tokens = {
+  "components": {
+    "--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-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-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-container-background-default": "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-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)",
+    "--modal-backdrop-color": "var(--color-overlay-backdrop)",
+    "--modal-surface-color": "var(--color-fill-surface)",
+    "--modal-surface-border-radius": "var(--brand-corner-modal)",
+    "--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-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-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)",
+    "--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-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)"
+  }
+} as const;
+
+export type ComponentToken = keyof typeof tokens.components;

package/dist/tokens/ts/primitives.tokens.ts

@@ -0,0 +1,152 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.071Z
+
+export const tokens = {
+  "colors": {
+    "--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)",
+    "--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-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)",
+    "--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-brand-a-red": "rgb(255 0 0)",
+    "--color-brand-a-green": "rgb(19 174 92)",
+    "--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-b-red": "rgb(204 0 0)",
+    "--color-brand-b-green": "rgb(14 129 68)",
+    "--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)"
+  },
+  "typography": {
+    "--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",
+    "--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": {
+    "--layout-base-grid": ".25rem",
+    "--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,
+    "--zindex-fixed": 1030,
+    "--zindex-modal-overlay": 1040,
+    "--zindex-modal": 1050,
+    "--zindex-popover": 1060,
+    "--zindex-tooltip": 1070
+  },
+  "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/semantic.tokens.ts

@@ -0,0 +1,42 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-03-04T20:50:34.072Z
+
+export const tokens = {
+  "typography": {
+    "--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-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-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-label-font-family": "var(--brand-font-lead)",
+    "--typography-label-font-weight": "var(--font-weight-600)",
+    "--typography-label-font-size": "var(--font-size-md)",
+    "--typography-label-line-height": "var(--line-height-md)",
+    "--typography-label-gap": "var(--size-spacing-200)",
+    "--typography-body-font-family": "var(--brand-font-base)",
+    "--typography-body-font-weight": "var(--font-weight-400)",
+    "--typography-body-font-size": "var(--font-size-md)",
+    "--typography-body-line-height": "var(--line-height-md)"
+  },
+  "radii": {
+    "--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)"
+  }
+} as const;
+
+export type TypographyToken = keyof typeof tokens.typography;
+export type RadiusToken = keyof typeof tokens.radii;

package/dist/ui/index.css

@@ -0,0 +1,5 @@
+@import url("./patterns/label.css") layer(components);
+@import url("./patterns/button.css") layer(components);
+@import url("./patterns/input.css") layer(components);
+@import url("./patterns/icon.css") layer(components);
+@import url("./patterns/checkbox.css") layer(components);