@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.16

package/dist/styles/base.css

@@ -1,7 +1,12 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
 /**
  * @lablup/ui-common design tokens
  *
- * The 116 `--token-*` custom properties every component in this package
+ * DEPRECATED since 0.2, removed in 0.3. The token contract is now Astryx's
+ * own token set, themed by `@lablup/ui-common/theme/lablup`. Code that still
+ * reads `--token-*` names can import `@lablup/ui-common/legacy-tokens.css`.
+ *
+ * The 119 `--token-*` custom properties every component in this package
  * reads. This file is the token contract: renaming or removing an entry is
  * a breaking change, exactly like renaming a prop (see CONTRIBUTING.md).
  *
@@ -22,7 +27,7 @@
  * call site.
  *
  * A product with its own visual identity defines its own `[data-theme]`
- * blocks over these 116 names and ships them itself, the way the source
+ * blocks over these 119 names and ships them itself, the way the source
  * product does with its five families. This package carries the mechanism and
  * one default, not a catalogue of somebody else's palettes.
  *
@@ -61,6 +66,16 @@
   --token-borderRadiusLG: 0.5rem;
   --token-borderRadiusSM: 0.25rem;
   --token-borderRadiusXL: 0.75rem;
+  /* One height ladder for every form control, so a text field, a picker and a
+     button standing next to each other in a filter row land on the same top
+     and bottom edge. Only `Button` reads it today, at SM and LG; the middle
+     rung is declared with them because a ladder missing its default is not a
+     ladder, and the first control that needs a 40px box would otherwise
+     invent a literal, which is the defect this replaces. rem-based like the
+     rest of the scale, so controls grow with browser zoom (WCAG 1.4.4). */
+  --token-controlHeightSM: 2rem; /* 32px */
+  --token-controlHeight: 2.5rem; /* 40px */
+  --token-controlHeightLG: 2.75rem; /* 44px, the WCAG 2.1 touch target */
   --token-boxShadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
     0 2px 4px 0 rgba(0, 0, 0, 0.02);
@@ -121,6 +136,7 @@
   --token-colorPrimary: #ff7a00;
   --token-colorPrimaryActive: #cc6200;
   --token-colorPrimaryBg: rgba(255, 122, 0, 0.1);
+  --token-colorPrimaryBgHover: rgba(255, 122, 0, 0.16);
   --token-colorPrimaryBorder: rgba(255, 122, 0, 0.2);
   --token-colorSuccess: #007a63;
   --token-colorSuccessActive: #005244;
@@ -130,6 +146,12 @@
   --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
   --token-colorWarning: #9a5d00;
   --token-colorText: #141414;
+  /* Both #767676 rather than the #bfbfbf a disabled or placeholder value is
+   * usually given: that measures 2.2:1 on white, and text a reader is expected
+   * to read (a placeholder naming the field, a disabled value explaining why it
+   * cannot be changed) is not exempt from the 4.5:1 floor. */
+  --token-colorTextDisabled: #767676;
+  --token-colorTextPlaceholder: #767676;
   --token-colorTextQuaternary: #bfbfbf;
   --token-colorTextSecondary: #595959;
   --token-colorTextTertiary: #737373;

package/dist/styles/themes/orange-dark.css

@@ -1,6 +1,10 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
 /**
  * @lablup/ui-common theme tokens: orange-dark
  *
+ * DEPRECATED since 0.2, removed in 0.3. Use the Astryx theme
+ * `@lablup/ui-common/theme/lablup`, which carries light and dark.
+ *
  * Overrides for the subset of the 104-token contract (see
  * ../base.css) that this theme customizes. Import at most one
  * theme file alongside base.css; components never import a

package/dist/styles/themes/orange-light.css

@@ -1,6 +1,10 @@
+@layer reset, theme, base, astryx-base, astryx-theme, ui-common, components, utilities;
 /**
  * @lablup/ui-common theme tokens: orange-light
  *
+ * DEPRECATED since 0.2, removed in 0.3. Use the Astryx theme
+ * `@lablup/ui-common/theme/lablup`, which carries light and dark.
+ *
  * Overrides for the subset of the 104-token contract (see
  * ../base.css) that this theme customizes. Import at most one
  * theme file alongside base.css; components never import a

package/dist/theme/lablup/built/lablup.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/lablup/lablupTheme.ts
+ * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css
+ * CLI: @astryxdesign/cli@0.6.5
+ * Core: @astryxdesign/core@0.6.5
+ */
+
+/// <reference path="./lablup.variants.d.ts" />
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import type { IconRegistry } from '@astryxdesign/core/Icon';
+export declare const neutralIconRegistry: IconRegistry;
+export declare const lablupTheme: DefinedTheme;

package/dist/theme/lablup/built/lablup.js

@@ -0,0 +1,567 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/lablup/lablupTheme.ts
+ * Command: astryx theme build src/theme/lablup/lablupTheme.ts --out src/theme/lablup/built/theme.css
+ * CLI: @astryxdesign/cli@0.6.5
+ * Core: @astryxdesign/core@0.6.5
+ */
+
+import { neutralIconRegistry } from "@astryxdesign/theme-neutral";
+/**
+ * lablup theme — built by `pnpm exec astryx theme build`
+ * Import the CSS file alongside this module:
+ *
+ *   import { lablupTheme } from './lablup';
+ *   import './lablup.css';
+ */
+export const lablupTheme = {
+  name: 'lablup',
+  __built: true,
+  tokens: {
+    "--font-size-4xs": "0.375rem",
+    "--font-size-3xs": "0.4375rem",
+    "--font-size-2xs": "0.5rem",
+    "--font-size-xs": "0.625rem",
+    "--font-size-sm": "0.75rem",
+    "--font-size-base": "0.875rem",
+    "--font-size-lg": "1.0625rem",
+    "--font-size-xl": "1.25rem",
+    "--font-size-2xl": "1.5rem",
+    "--font-size-3xl": "1.8125rem",
+    "--font-size-4xl": "2.1875rem",
+    "--font-size-5xl": "2.625rem",
+    "--text-heading-1-size": "var(--font-size-2xl)",
+    "--text-heading-1-weight": "var(--font-weight-semibold)",
+    "--text-heading-1-leading": "1.3333",
+    "--text-heading-2-size": "var(--font-size-xl)",
+    "--text-heading-2-weight": "var(--font-weight-semibold)",
+    "--text-heading-2-leading": "1.4",
+    "--text-heading-3-size": "var(--font-size-lg)",
+    "--text-heading-3-weight": "var(--font-weight-bold)",
+    "--text-heading-3-leading": "1.4118",
+    "--text-heading-4-size": "var(--font-size-base)",
+    "--text-heading-4-weight": "var(--font-weight-bold)",
+    "--text-heading-4-leading": "1.4286",
+    "--text-heading-5-size": "var(--font-size-sm)",
+    "--text-heading-5-weight": "var(--font-weight-semibold)",
+    "--text-heading-5-leading": "1.6667",
+    "--text-heading-6-size": "var(--font-size-xs)",
+    "--text-heading-6-weight": "var(--font-weight-semibold)",
+    "--text-heading-6-leading": "1.6",
+    "--text-body-size": "var(--font-size-base)",
+    "--text-body-weight": "var(--font-weight-normal)",
+    "--text-body-leading": "1.4286",
+    "--text-large-size": "var(--font-size-lg)",
+    "--text-large-weight": "var(--font-weight-semibold)",
+    "--text-large-leading": "1.4118",
+    "--text-label-size": "var(--font-size-base)",
+    "--text-label-weight": "var(--font-weight-medium)",
+    "--text-label-leading": "1.4286",
+    "--text-code-size": "var(--font-size-base)",
+    "--text-code-weight": "var(--font-weight-normal)",
+    "--text-code-leading": "1.4286",
+    "--text-supporting-size": "var(--font-size-sm)",
+    "--text-supporting-weight": "var(--font-weight-normal)",
+    "--text-supporting-leading": "1.6667",
+    "--text-display-1-size": "var(--font-size-5xl)",
+    "--text-display-1-weight": "var(--font-weight-normal)",
+    "--text-display-1-leading": "1.2381",
+    "--text-display-2-size": "var(--font-size-4xl)",
+    "--text-display-2-weight": "var(--font-weight-normal)",
+    "--text-display-2-leading": "1.2571",
+    "--text-display-3-size": "var(--font-size-3xl)",
+    "--text-display-3-weight": "var(--font-weight-normal)",
+    "--text-display-3-leading": "1.3793",
+    "--duration-fast-min": "95ms",
+    "--duration-fast": "125ms",
+    "--duration-fast-max": "165ms",
+    "--duration-medium-min": "225ms",
+    "--duration-medium": "300ms",
+    "--duration-medium-max": "400ms",
+    "--duration-slow-min": "525ms",
+    "--duration-slow": "700ms",
+    "--duration-slow-max": "935ms",
+    "--font-family-body": "\"Ubuntu Sans\", \"Pretendard Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+    "--font-family-heading": "\"Ubuntu Sans\", \"Pretendard Variable\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif",
+    "--font-family-code": "ui-monospace, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
+    "--color-syntax-keyword": "light-dark(#6b187c, #efa8ff)",
+    "--color-syntax-string": "light-dark(#0b5615, #a4d6a3)",
+    "--color-syntax-comment": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-number": "light-dark(#733100, #ffb37e)",
+    "--color-syntax-function": "light-dark(#00458c, #a1caff)",
+    "--color-syntax-type": "light-dark(#6b187c, #efa8ff)",
+    "--color-syntax-variable": "light-dark(#111111, #e2e2e2)",
+    "--color-syntax-operator": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-constant": "light-dark(#733100, #ffb37e)",
+    "--color-syntax-tag": "light-dark(#8a0011, #ffaea7)",
+    "--color-syntax-attribute": "light-dark(#584400, #eec448)",
+    "--color-syntax-property": "light-dark(#005348, #90d7c8)",
+    "--color-syntax-punctuation": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-background": "light-dark(#ffffff, #111111)",
+    "--color-background-surface": "light-dark(#FFFBF8, #211A16)",
+    "--color-background-body": "light-dark(#FAEFE9, #180F08)",
+    "--color-background-card": "light-dark(#FFFBF8, #211A16)",
+    "--color-background-popover": "light-dark(#FFFBF8, #372F2A)",
+    "--color-background-muted": "light-dark(#211A160D, #211A1680)",
+    "--color-accent": "light-dark(#AC3600, #FFB684)",
+    "--color-accent-muted": "light-dark(color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 25%, transparent))",
+    "--color-neutral": "light-dark(#211A161A, #EBE0DA33)",
+    "--color-overlay": "light-dark(#211A1666, #211A1699)",
+    "--color-overlay-hover": "light-dark(#211A160D, #FFFFFF0D)",
+    "--color-overlay-pressed": "light-dark(#211A161A, #FFFFFF1A)",
+    "--color-text-primary": "light-dark(#211A16, #EBE0DA)",
+    "--color-text-secondary": "light-dark(#51443C, #B8A89F)",
+    "--color-text-disabled": "light-dark(#9D8E85, #6A5C53)",
+    "--color-text-accent": "var(--color-accent)",
+    "--color-on-dark": "#ffffff",
+    "--color-on-light": "#111111",
+    "--color-on-accent": "light-dark(#FFFFFF, #651000)",
+    "--color-on-success": "light-dark(#ffffff, #111111)",
+    "--color-on-error": "light-dark(#ffffff, #111111)",
+    "--color-on-warning": "#111111",
+    "--color-icon-accent": "var(--color-accent)",
+    "--color-icon-primary": "light-dark(#211A16, #EBE0DA)",
+    "--color-icon-secondary": "light-dark(#51443C, #B8A89F)",
+    "--color-icon-disabled": "light-dark(#9D8E85, #6A5C53)",
+    "--color-success": "light-dark(#007a63, #03a487)",
+    "--color-error": "light-dark(#c82333, #dc4446)",
+    "--color-warning": "light-dark(#9a5d00, #d89614)",
+    "--color-success-muted": "light-dark(#bce0bb, #90ca903D)",
+    "--color-error-muted": "light-dark(#ffc4be, #ff98903D)",
+    "--color-warning-muted": "light-dark(#fae19e, #e2b6233D)",
+    "--color-border": "light-dark(#211A161A, #F9EFE81A)",
+    "--color-border-emphasized": "light-dark(#9D8E85, #74655D)",
+    "--color-skeleton": "light-dark(#B8A89F, #51443C)",
+    "--color-shadow": "light-dark(#0000001A, #0000004D)",
+    "--color-tint-hover": "light-dark(black, white)",
+    "--color-background-red": "light-dark(#ffc4be, #5b2b28)",
+    "--color-border-red": "light-dark(#ffaea7, #fa6762)",
+    "--color-icon-red": "light-dark(#76000c, #ff9890)",
+    "--color-text-red": "light-dark(#76000c, #ffaea7)",
+    "--color-background-orange": "light-dark(#ffc7a1, #503424)",
+    "--color-border-orange": "light-dark(#ffc7a1, #df843f)",
+    "--color-icon-orange": "light-dark(#622700, #ff9e55)",
+    "--color-text-orange": "light-dark(#622700, #ffb37e)",
+    "--color-background-yellow": "light-dark(#fae19e, #453a1c)",
+    "--color-border-yellow": "light-dark(#e3c36c, #c29900)",
+    "--color-icon-yellow": "light-dark(#4b3900, #e2b623)",
+    "--color-text-yellow": "light-dark(#4b3900, #eec448)",
+    "--color-background-green": "light-dark(#bce0bb, #2b422b)",
+    "--color-border-green": "light-dark(#aad4a9, #6ab26b)",
+    "--color-icon-green": "light-dark(#00490b, #90ca90)",
+    "--color-text-green": "light-dark(#00490b, #90ca90)",
+    "--color-background-teal": "light-dark(#a9e2d6, #28413c)",
+    "--color-border-teal": "light-dark(#90d7c8, #4fb1a0)",
+    "--color-icon-teal": "light-dark(#00463d, #81c9bb)",
+    "--color-text-teal": "light-dark(#00463d, #90d7c8)",
+    "--color-background-cyan": "light-dark(#9ae2f4, #274046)",
+    "--color-border-cyan": "light-dark(#85d5e9, #49adc4)",
+    "--color-icon-cyan": "light-dark(#004351, #71c7dd)",
+    "--color-text-cyan": "light-dark(#004351, #85d5e9)",
+    "--color-background-blue": "light-dark(#b9d7ff, #253c5a)",
+    "--color-border-blue": "light-dark(#a1caff, #5aa0f8)",
+    "--color-icon-blue": "light-dark(#003978, #88bcff)",
+    "--color-text-blue": "light-dark(#003978, #a1caff)",
+    "--color-background-purple": "light-dark(#f7d5ff, #4a2f51)",
+    "--color-border-purple": "light-dark(#f3bfff, #d885eb)",
+    "--color-icon-purple": "light-dark(#5c0e6c, #e496f6)",
+    "--color-text-purple": "light-dark(#5c0e6c, #eaacf8)",
+    "--color-background-pink": "light-dark(#ffc0d7, #572b3d)",
+    "--color-border-pink": "light-dark(#ffc0d7, #fc78b1)",
+    "--color-icon-pink": "light-dark(#70003f, #fd92bd)",
+    "--color-text-pink": "light-dark(#70003f, #ffa9ca)",
+    "--color-background-gray": "light-dark(#e2e2e2, #303030)",
+    "--color-border-gray": "light-dark(#d4d4d4, #262626)",
+    "--color-icon-gray": "light-dark(#474747, #9e9e9e)",
+    "--color-text-gray": "light-dark(#1b1b1b, #d4d4d4)",
+    "--radius-none": "0px",
+    "--radius-inner": "0.375rem",
+    "--radius-element": "0.625rem",
+    "--radius-container": "0.75rem",
+    "--radius-page": "1.75rem",
+    "--radius-full": "9999px",
+    "--shadow-low": "0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)), 0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%))",
+    "--shadow-med": "0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%))",
+    "--shadow-high": "0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%))",
+    "--shadow-inset-hover": "inset 0px 0px 0px 2px #0074e24D",
+    "--shadow-inset-selected": "inset 0px 0px 0px 2px #0074e280",
+    "--shadow-inset-success": "inset 0px 0px 0px 2px #2f7d334D",
+    "--shadow-inset-warning": "inset 0px 0px 0px 2px #f8d36a4D",
+    "--shadow-inset-error": "inset 0px 0px 0px 2px #de47454D",
+    "--color-background-inverted": "light-dark(#211A16, #FFFBF8)",
+    "--color-track": "light-dark(#B8A89F, #51443C)",
+    "--color-info": "light-dark(#0066cc, #009bdd)"
+  },
+  localTokens: {
+    "--astryx-theme-neutral-color-status-fill-accent": "light-dark(#0074e2, #6d9cfe)",
+    "--astryx-theme-neutral-color-status-fill-success": "light-dark(#198100, #64af4c)",
+    "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
+    "--astryx-theme-neutral-color-status-fill-error": "light-dark(#c9303a, #ff705d)",
+    "--astryx-theme-neutral-color-status-muted-accent": "light-dark(#b9d7ff, #88bcff3D)",
+    "--astryx-theme-neutral-color-on-tint-neutral": "light-dark(#fafafa4D, #0a0a0a4D)",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "light-dark(#fafafa1A, #0a0a0a1A)",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "light-dark(#fafafa33, #0a0a0a33)",
+    "--astryx-theme-neutral-color-destructive-overlay-hover": "light-dark(#ff7f770D, #ee736c0D)",
+    "--astryx-theme-neutral-color-destructive-overlay-pressed": "light-dark(#ff7f771A, #ee736c1A)"
+  },
+  __localTokenOwners: {
+    "--astryx-theme-neutral-color-status-fill-accent": "neutral",
+    "--astryx-theme-neutral-color-status-fill-success": "neutral",
+    "--astryx-theme-neutral-color-status-fill-warning": "neutral",
+    "--astryx-theme-neutral-color-status-fill-error": "neutral",
+    "--astryx-theme-neutral-color-status-muted-accent": "neutral",
+    "--astryx-theme-neutral-color-on-tint-neutral": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-on-tint-overlay-pressed": "neutral",
+    "--astryx-theme-neutral-color-destructive-overlay-hover": "neutral",
+    "--astryx-theme-neutral-color-destructive-overlay-pressed": "neutral"
+  },
+  __localTokenLineage: ["neutral","lablup"],
+  components: {
+    "heading": {
+      "level:1": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-1-size)",
+        "fontWeight": "var(--text-heading-1-weight)",
+        "lineHeight": "var(--text-heading-1-leading)"
+      },
+      "level:2": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-2-size)",
+        "fontWeight": "var(--text-heading-2-weight)",
+        "lineHeight": "var(--text-heading-2-leading)"
+      },
+      "level:3": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-3-size)",
+        "fontWeight": "var(--text-heading-3-weight)",
+        "lineHeight": "var(--text-heading-3-leading)"
+      },
+      "level:4": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-4-size)",
+        "fontWeight": "var(--text-heading-4-weight)",
+        "lineHeight": "var(--text-heading-4-leading)"
+      },
+      "level:5": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-5-size)",
+        "fontWeight": "var(--text-heading-5-weight)",
+        "lineHeight": "var(--text-heading-5-leading)"
+      },
+      "level:6": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-heading-6-size)",
+        "fontWeight": "var(--text-heading-6-weight)",
+        "lineHeight": "var(--text-heading-6-leading)"
+      },
+      "type:display-1": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-1-size)",
+        "lineHeight": "var(--text-display-1-leading)"
+      },
+      "type:display-2": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-2-size)",
+        "lineHeight": "var(--text-display-2-leading)"
+      },
+      "type:display-3": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-3-size)",
+        "lineHeight": "var(--text-display-3-leading)"
+      }
+    },
+    "text": {
+      "type:body": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-body-size)",
+        "lineHeight": "var(--text-body-leading)"
+      },
+      "type:large": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-large-size)",
+        "lineHeight": "var(--text-large-leading)"
+      },
+      "type:label": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-label-size)",
+        "lineHeight": "var(--text-label-leading)"
+      },
+      "type:code": {
+        "fontFamily": "var(--font-family-code)",
+        "fontSize": "var(--text-code-size)",
+        "lineHeight": "var(--text-code-leading)"
+      },
+      "type:supporting": {
+        "fontFamily": "var(--font-family-body)",
+        "fontSize": "var(--text-supporting-size)",
+        "lineHeight": "var(--text-supporting-leading)"
+      },
+      "type:display-1": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-1-size)",
+        "lineHeight": "var(--text-display-1-leading)"
+      },
+      "type:display-2": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-2-size)",
+        "lineHeight": "var(--text-display-2-leading)"
+      },
+      "type:display-3": {
+        "fontFamily": "var(--font-family-heading)",
+        "fontSize": "var(--text-display-3-size)",
+        "lineHeight": "var(--text-display-3-leading)"
+      }
+    },
+    "button": {
+      "variant:destructive": {
+        "backgroundColor": "var(--color-error-muted)",
+        "color": "var(--color-error)",
+        "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
+        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)"
+      }
+    },
+    "badge": {
+      "variant:info": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-accent)",
+        "color": "var(--color-on-accent)"
+      },
+      "variant:neutral": {
+        "backgroundColor": "var(--color-background-gray)",
+        "color": "var(--color-text-gray)"
+      },
+      "variant:success": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)",
+        "color": "var(--color-on-success)"
+      },
+      "variant:warning": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-warning)",
+        "color": "var(--color-on-warning)"
+      },
+      "variant:error": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)",
+        "color": "var(--color-on-error)"
+      },
+      "variant:red": {
+        "backgroundColor": "var(--color-background-red)",
+        "color": "var(--color-text-red)"
+      },
+      "variant:orange": {
+        "backgroundColor": "var(--color-background-orange)",
+        "color": "var(--color-text-orange)"
+      },
+      "variant:yellow": {
+        "backgroundColor": "var(--color-background-yellow)",
+        "color": "var(--color-text-yellow)"
+      },
+      "variant:green": {
+        "backgroundColor": "var(--color-background-green)",
+        "color": "var(--color-text-green)"
+      },
+      "variant:teal": {
+        "backgroundColor": "var(--color-background-teal)",
+        "color": "var(--color-text-teal)"
+      },
+      "variant:cyan": {
+        "backgroundColor": "var(--color-background-cyan)",
+        "color": "var(--color-text-cyan)"
+      },
+      "variant:blue": {
+        "backgroundColor": "var(--color-background-blue)",
+        "color": "var(--color-text-blue)"
+      },
+      "variant:purple": {
+        "backgroundColor": "var(--color-background-purple)",
+        "color": "var(--color-text-purple)"
+      },
+      "variant:pink": {
+        "backgroundColor": "var(--color-background-pink)",
+        "color": "var(--color-text-pink)"
+      },
+      "variant:gray": {
+        "backgroundColor": "var(--color-background-gray)",
+        "color": "var(--color-text-gray)"
+      }
+    },
+    "status-dot": {
+      "variant:success": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)"
+      },
+      "variant:warning": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-warning)"
+      },
+      "variant:error": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)"
+      },
+      "variant:accent": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-accent)"
+      }
+    },
+    "avatar-status-dot": {
+      "variant:success": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-success)"
+      },
+      "variant:error": {
+        "backgroundColor": "var(--astryx-theme-neutral-color-status-fill-error)"
+      }
+    },
+    "segmented-control": {
+      "base": {
+        "padding": "var(--spacing-1)"
+      }
+    },
+    "segmented-control-item": {
+      "size:sm": {
+        "height": "calc(var(--size-element-sm) - 8px)"
+      },
+      "size:md": {
+        "height": "calc(var(--size-element-md) - 8px)"
+      },
+      "size:lg": {
+        "height": "calc(var(--size-element-lg) - 8px)"
+      },
+      "selected": {
+        "boxShadow": "none"
+      }
+    },
+    "banner": {
+      "base": {
+        "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
+        "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
+        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)"
+      },
+      "status:info": {
+        "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
+        "--color-text-primary": "var(--color-text-blue)",
+        "--color-text-secondary": "var(--color-text-blue)",
+        "--color-accent": "var(--color-text-blue)"
+      },
+      "status:success": {
+        "--color-text-primary": "var(--color-text-green)",
+        "--color-text-secondary": "var(--color-text-green)",
+        "--color-success": "var(--color-text-green)"
+      },
+      "status:warning": {
+        "--color-text-primary": "var(--color-text-yellow)",
+        "--color-text-secondary": "var(--color-text-yellow)",
+        "--color-warning": "var(--color-text-yellow)"
+      },
+      "status:error": {
+        "--color-text-primary": "var(--color-text-red)",
+        "--color-text-secondary": "var(--color-text-red)",
+        "--color-error": "var(--color-text-red)"
+      }
+    },
+    "step-indicator": {
+      "status:accent": {
+        "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)"
+      },
+      "status:success": {
+        "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)"
+      },
+      "status:warning": {
+        "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)"
+      },
+      "status:error": {
+        "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)"
+      }
+    },
+    "switch": {
+      "base": {
+        "--color-background-gray": "var(--color-border-emphasized)"
+      }
+    },
+    "progress-bar": {
+      "base": {
+        "--color-background-muted": "var(--color-border-emphasized)"
+      },
+      "variant:accent": {
+        "--color-accent": "var(--astryx-theme-neutral-color-status-fill-accent)"
+      },
+      "variant:success": {
+        "--color-success": "var(--astryx-theme-neutral-color-status-fill-success)"
+      },
+      "variant:warning": {
+        "--color-warning": "var(--astryx-theme-neutral-color-status-fill-warning)"
+      },
+      "variant:error": {
+        "--color-error": "var(--astryx-theme-neutral-color-status-fill-error)"
+      }
+    },
+    "card": {
+      "base": {
+        "padding": "var(--spacing-3)"
+      }
+    },
+    "section": {
+      "base": {
+        "padding": "var(--spacing-3)"
+      }
+    }
+  },
+  __onDark: {
+    "tokens": {
+      "color-scheme": "dark",
+      "--color-text-primary": "var(--color-on-dark)",
+      "--color-icon-primary": "var(--color-on-dark)",
+      "--color-accent": "var(--color-on-dark)"
+    }
+  },
+  __onLight: {
+    "tokens": {
+      "color-scheme": "light",
+      "--color-text-primary": "var(--color-on-light)",
+      "--color-icon-primary": "var(--color-on-light)",
+      "--color-accent": "var(--color-on-light)"
+    }
+  },
+  __adaptations: {
+    "widthBreakpoints": {
+      "sm": 640,
+      "md": 768,
+      "lg": 1024,
+      "xl": 1280,
+      "2xl": 1536
+    },
+    "rules": []
+  },
+  __axes: {
+    "typography": {
+      "scale": {
+        "base": 14,
+        "ratio": 1.2
+      },
+      "body": {
+        "family": "Figtree",
+        "fallbacks": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif"
+      },
+      "heading": {
+        "family": "Figtree",
+        "fallbacks": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+        "weights": {
+          "3": "bold",
+          "4": "bold"
+        }
+      },
+      "code": {
+        "family": "ui-monospace",
+        "fallbacks": "\"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
+      }
+    },
+    "color": {
+      "accent": [
+        "#FF7A00",
+        "#DC6B03"
+      ]
+    },
+    "motion": {
+      "fast": 125,
+      "medium": 300,
+      "slow": 700,
+      "ratio": 0.75
+    }
+  },
+  icons: neutralIconRegistry,
+};
+
+export { neutralIconRegistry };