sid-ui 0.0.0-stage → 0.1.0

package/src/theme/theme.css

@@ -0,0 +1,786 @@
+/*
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/theme/joined.theme.ts
+ * Command: astryx theme build src/theme/joined.theme.ts --out src/theme/theme.css
+ * CLI: @astryxdesign/cli@0.6.2
+ * Core: @astryxdesign/core@0.6.2
+ */
+
+@layer reset {
+  @scope ([data-astryx-theme="joined"]) to ([data-astryx-theme]) {
+    :where(h1, h2, h3, h4, h5, h6) {
+      font-family: var(--font-family-heading);
+      color: var(--color-text-primary);
+    }
+
+    :where(h1) {
+      font-size: var(--text-heading-1-size);
+      font-weight: var(--text-heading-1-weight);
+      line-height: var(--text-heading-1-leading);
+    }
+
+    :where(h2) {
+      font-size: var(--text-heading-2-size);
+      font-weight: var(--text-heading-2-weight);
+      line-height: var(--text-heading-2-leading);
+    }
+
+    :where(h3) {
+      font-size: var(--text-heading-3-size);
+      font-weight: var(--text-heading-3-weight);
+      line-height: var(--text-heading-3-leading);
+    }
+
+    :where(h4) {
+      font-size: var(--text-heading-4-size);
+      font-weight: var(--text-heading-4-weight);
+      line-height: var(--text-heading-4-leading);
+    }
+
+    :where(h5) {
+      font-size: var(--text-heading-5-size);
+      font-weight: var(--text-heading-5-weight);
+      line-height: var(--text-heading-5-leading);
+    }
+
+    :where(h6) {
+      font-size: var(--text-heading-6-size);
+      font-weight: var(--text-heading-6-weight);
+      line-height: var(--text-heading-6-leading);
+    }
+
+    :where(p) {
+      font-family: var(--font-family-body);
+      font-size: var(--text-body-size);
+      font-weight: var(--text-body-weight);
+      line-height: var(--text-body-leading);
+      color: var(--color-text-primary);
+    }
+
+    :where(small) {
+      font-size: var(--text-supporting-size);
+      font-weight: var(--text-supporting-weight);
+      line-height: var(--text-supporting-leading);
+      color: var(--color-text-secondary);
+    }
+
+    :where(code, pre) {
+      font-family: var(--font-family-code);
+      font-size: var(--text-code-size);
+      line-height: var(--text-code-leading);
+    }
+
+    :where(hr) {
+      border: none;
+      border-top: 1px solid var(--color-border);
+    }
+  }
+}
+
+@layer astryx-base {
+  :root {
+    --color-data-categorical-blue: light-dark(#0171e3, #0171e3);
+    --color-data-categorical-orange: light-dark(#eb6e00, #eb6e00);
+    --color-data-categorical-purple: light-dark(#6b1efd, #6b1efd);
+    --color-data-categorical-green: light-dark(#0b991f, #0b991f);
+    --color-data-categorical-pink: light-dark(#f351c0, #f351c0);
+    --color-data-categorical-cyan: light-dark(#0171a4, #0171a4);
+    --color-data-categorical-red: light-dark(#f5394f, #f5394f);
+    --color-data-categorical-teal: light-dark(#08a3a3, #08a3a3);
+    --color-data-categorical-brown: light-dark(#965e03, #965e03);
+    --color-data-categorical-indigo: light-dark(#6f8aff, #6f8aff);
+    --color-data-neutral: light-dark(#8494a3, #8c939b);
+    --color-data-blue-5: light-dark(#02165e, #02165e);
+    --color-data-blue-4: light-dark(#004cbc, #004cbc);
+    --color-data-blue-3: light-dark(#2694fe, #2694fe);
+    --color-data-blue-2: light-dark(#78beff, #78beff);
+    --color-data-blue-1: light-dark(#dbecff, #dbecff);
+    --color-data-shamrock-5: light-dark(#0b603d, #0b603d);
+    --color-data-shamrock-4: light-dark(#138546, #138546);
+    --color-data-shamrock-3: light-dark(#24bb5e, #24bb5e);
+    --color-data-shamrock-2: light-dark(#8ef7aa, #8ef7aa);
+    --color-data-shamrock-1: light-dark(#d6fee4, #d6fee4);
+    --color-data-orange-5: light-dark(#a13f04, #a13f04);
+    --color-data-orange-4: light-dark(#d66100, #d66100);
+    --color-data-orange-3: light-dark(#fd9537, #fd9537);
+    --color-data-orange-2: light-dark(#fdb876, #fdb876);
+    --color-data-orange-1: light-dark(#ffe6cf, #ffe6cf);
+    --color-data-pink-5: light-dark(#8e1073, #8e1073);
+    --color-data-pink-4: light-dark(#d123a1, #d123a1);
+    --color-data-pink-3: light-dark(#f989d3, #f989d3);
+    --color-data-pink-2: light-dark(#feade3, #feade3);
+    --color-data-pink-1: light-dark(#fce3f4, #fce3f4);
+    --color-data-purple-5: light-dark(#3e0697, #3e0697);
+    --color-data-purple-4: light-dark(#6b1efd, #6b1efd);
+    --color-data-purple-3: light-dark(#9081ff, #9081ff);
+    --color-data-purple-2: light-dark(#b3b0fe, #b3b0fe);
+    --color-data-purple-1: light-dark(#e8e8fb, #e8e8fb);
+    --color-data-red-5: light-dark(#9d0519, #9d0519);
+    --color-data-red-4: light-dark(#d31130, #d31130);
+    --color-data-red-3: light-dark(#fb7d87, #fb7d87);
+    --color-data-red-2: light-dark(#ffb2b8, #ffb2b8);
+    --color-data-red-1: light-dark(#fee4e6, #fee4e6);
+    --color-data-teal-5: light-dark(#08767d, #08767d);
+    --color-data-teal-4: light-dark(#0c9293, #0c9293);
+    --color-data-teal-3: light-dark(#0db7af, #0db7af);
+    --color-data-teal-2: light-dark(#6ce6d8, #6ce6d8);
+    --color-data-teal-1: light-dark(#d7fcf8, #d7fcf8);
+    --color-data-yellow-5: light-dark(#8a5001, #8a5001);
+    --color-data-yellow-4: light-dark(#d69804, #d69804);
+    --color-data-yellow-3: light-dark(#fbce03, #fbce03);
+    --color-data-yellow-2: light-dark(#fcec85, #fcec85);
+    --color-data-yellow-1: light-dark(#fdf6ba, #fdf6ba);
+    --color-data-gray-5: light-dark(#25363f, #333338);
+    --color-data-gray-4: light-dark(#5d6c7b, #666a72);
+    --color-data-gray-3: light-dark(#afb9c4, #b2b8be);
+    --color-data-gray-2: light-dark(#ccd3db, #d0d3d6);
+    --color-data-gray-1: light-dark(#f1f4f7, #f2f4f6);
+  }
+}
+
+@layer astryx-theme {
+  :root {
+    color-scheme: light dark;
+  }
+  html[data-theme="light"] {
+    color-scheme: light;
+  }
+  html[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  @scope ([data-astryx-theme="joined"]) to ([data-astryx-theme]) {
+    :scope {
+      --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:
+        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+        sans-serif;
+      --font-family-heading:
+        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+        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(#fbfcff, #1a1b22);
+      --color-background-body: light-dark(#eff0fa, #0f1118);
+      --color-background-card: light-dark(#fbfcff, #1a1b22);
+      --color-background-popover: light-dark(#fbfcff, #2e3037);
+      --color-background-muted: light-dark(#1a1b220d, #1a1b2280);
+      --color-accent: light-dark(#1877f2, #2e89ff);
+      --color-accent-muted: light-dark(#e7f3ff, #253c5a);
+      --color-neutral: light-dark(#1a1b221a, #e0e2ec33);
+      --color-overlay: light-dark(#1a1b2266, #1a1b2299);
+      --color-overlay-hover: light-dark(#1a1b220d, #ffffff0d);
+      --color-overlay-pressed: light-dark(#1a1b221a, #ffffff1a);
+      --color-text-primary: light-dark(#1a1b22, #e0e2ec);
+      --color-text-secondary: light-dark(#444652, #a8abb9);
+      --color-text-disabled: light-dark(#8e909e, #5b5e6b);
+      --color-text-accent: light-dark(#003978, #a1caff);
+      --color-on-dark: #ffffff;
+      --color-on-light: #111111;
+      --color-on-accent: #ffffff;
+      --color-on-success: light-dark(#ffffff, #111111);
+      --color-on-error: light-dark(#ffffff, #111111);
+      --color-on-warning: #111111;
+      --color-icon-accent: light-dark(#003978, #88bcff);
+      --color-icon-primary: light-dark(#1a1b22, #e0e2ec);
+      --color-icon-secondary: light-dark(#444652, #a8abb9);
+      --color-icon-disabled: light-dark(#8e909e, #5b5e6b);
+      --color-success: light-dark(#00490b, #a4d6a3);
+      --color-error: light-dark(#76000c, #ffc4be);
+      --color-warning: light-dark(#4b3900, #f8d36a);
+      --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(#1a1b221a, #eef0fa1a);
+      --color-border-emphasized: light-dark(#8e909e, #656875);
+      --color-skeleton: light-dark(#a9aab9, #434653);
+      --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(#1a1b22, #fbfcff);
+      --color-track: light-dark(#a9aab9, #434653);
+      --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);
+    }
+
+    .astryx-heading[data-level="1"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-heading-1-size);
+      font-weight: var(--text-heading-1-weight);
+      line-height: var(--text-heading-1-leading);
+    }
+
+    .astryx-heading[data-level="2"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-heading-2-size);
+      font-weight: var(--text-heading-2-weight);
+      line-height: var(--text-heading-2-leading);
+    }
+
+    .astryx-heading[data-level="3"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-heading-3-size);
+      font-weight: var(--text-heading-3-weight);
+      line-height: var(--text-heading-3-leading);
+    }
+
+    .astryx-heading[data-level="4"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-heading-4-size);
+      font-weight: var(--text-heading-4-weight);
+      line-height: var(--text-heading-4-leading);
+    }
+
+    .astryx-heading[data-level="5"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-heading-5-size);
+      font-weight: var(--text-heading-5-weight);
+      line-height: var(--text-heading-5-leading);
+    }
+
+    .astryx-heading[data-level="6"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-heading-6-size);
+      font-weight: var(--text-heading-6-weight);
+      line-height: var(--text-heading-6-leading);
+    }
+
+    .astryx-heading[data-type="display-1"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-display-1-size);
+      line-height: var(--text-display-1-leading);
+    }
+
+    .astryx-heading[data-type="display-2"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-display-2-size);
+      line-height: var(--text-display-2-leading);
+    }
+
+    .astryx-heading[data-type="display-3"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-display-3-size);
+      line-height: var(--text-display-3-leading);
+    }
+
+    .astryx-text[data-type="body"] {
+      font-family: var(--font-family-body);
+      font-size: var(--text-body-size);
+      line-height: var(--text-body-leading);
+    }
+
+    .astryx-text[data-type="large"] {
+      font-family: var(--font-family-body);
+      font-size: var(--text-large-size);
+      line-height: var(--text-large-leading);
+    }
+
+    .astryx-text[data-type="label"] {
+      font-family: var(--font-family-body);
+      font-size: var(--text-label-size);
+      line-height: var(--text-label-leading);
+    }
+
+    .astryx-text[data-type="code"] {
+      font-family: var(--font-family-code);
+      font-size: var(--text-code-size);
+      line-height: var(--text-code-leading);
+    }
+
+    .astryx-text[data-type="supporting"] {
+      font-family: var(--font-family-body);
+      font-size: var(--text-supporting-size);
+      line-height: var(--text-supporting-leading);
+    }
+
+    .astryx-text[data-type="display-1"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-display-1-size);
+      line-height: var(--text-display-1-leading);
+    }
+
+    .astryx-text[data-type="display-2"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-display-2-size);
+      line-height: var(--text-display-2-leading);
+    }
+
+    .astryx-text[data-type="display-3"] {
+      font-family: var(--font-family-heading);
+      font-size: var(--text-display-3-size);
+      line-height: var(--text-display-3-leading);
+    }
+
+    .astryx-button[data-variant="destructive"] {
+      background-color: 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);
+    }
+
+    .astryx-badge[data-variant="info"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-accent);
+      color: var(--color-on-accent);
+    }
+
+    .astryx-badge[data-variant="neutral"] {
+      background-color: var(--color-background-gray);
+      color: var(--color-text-gray);
+    }
+
+    .astryx-badge[data-variant="success"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-success);
+      color: var(--color-on-success);
+    }
+
+    .astryx-badge[data-variant="warning"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-warning);
+      color: var(--color-on-warning);
+    }
+
+    .astryx-badge[data-variant="error"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-error);
+      color: var(--color-on-error);
+    }
+
+    .astryx-badge[data-variant="red"] {
+      background-color: var(--color-background-red);
+      color: var(--color-text-red);
+    }
+
+    .astryx-badge[data-variant="orange"] {
+      background-color: var(--color-background-orange);
+      color: var(--color-text-orange);
+    }
+
+    .astryx-badge[data-variant="yellow"] {
+      background-color: var(--color-background-yellow);
+      color: var(--color-text-yellow);
+    }
+
+    .astryx-badge[data-variant="green"] {
+      background-color: var(--color-background-green);
+      color: var(--color-text-green);
+    }
+
+    .astryx-badge[data-variant="teal"] {
+      background-color: var(--color-background-teal);
+      color: var(--color-text-teal);
+    }
+
+    .astryx-badge[data-variant="cyan"] {
+      background-color: var(--color-background-cyan);
+      color: var(--color-text-cyan);
+    }
+
+    .astryx-badge[data-variant="blue"] {
+      background-color: var(--color-background-blue);
+      color: var(--color-text-blue);
+    }
+
+    .astryx-badge[data-variant="purple"] {
+      background-color: var(--color-background-purple);
+      color: var(--color-text-purple);
+    }
+
+    .astryx-badge[data-variant="pink"] {
+      background-color: var(--color-background-pink);
+      color: var(--color-text-pink);
+    }
+
+    .astryx-badge[data-variant="gray"] {
+      background-color: var(--color-background-gray);
+      color: var(--color-text-gray);
+    }
+
+    .astryx-status-dot[data-variant="success"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-success);
+    }
+
+    .astryx-status-dot[data-variant="warning"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-warning);
+    }
+
+    .astryx-status-dot[data-variant="error"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-error);
+    }
+
+    .astryx-status-dot[data-variant="accent"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-accent);
+    }
+
+    .astryx-avatar-status-dot[data-variant="success"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-success);
+    }
+
+    .astryx-avatar-status-dot[data-variant="error"] {
+      background-color: var(--astryx-theme-neutral-color-status-fill-error);
+    }
+
+    .astryx-segmented-control {
+      padding: var(--spacing-1);
+      --_segmented-control-padding: var(--spacing-1);
+      border-radius: var(--radius-full);
+      --_segmented-control-radius: var(--radius-full);
+    }
+
+    .astryx-segmented-control-item[data-size="sm"] {
+      height: var(--size-element-sm);
+    }
+
+    .astryx-segmented-control-item[data-size="md"] {
+      height: var(--size-element-md);
+    }
+
+    .astryx-segmented-control-item[data-size="lg"] {
+      height: var(--size-element-lg);
+    }
+
+    .astryx-segmented-control-item[data-selected="selected"] {
+      box-shadow: none;
+    }
+
+    .astryx-banner {
+      --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);
+    }
+
+    .astryx-banner[data-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);
+    }
+
+    .astryx-banner[data-status="success"] {
+      --color-text-primary: var(--color-text-green);
+      --color-text-secondary: var(--color-text-green);
+      --color-success: var(--color-text-green);
+    }
+
+    .astryx-banner[data-status="warning"] {
+      --color-text-primary: var(--color-text-yellow);
+      --color-text-secondary: var(--color-text-yellow);
+      --color-warning: var(--color-text-yellow);
+    }
+
+    .astryx-banner[data-status="error"] {
+      --color-text-primary: var(--color-text-red);
+      --color-text-secondary: var(--color-text-red);
+      --color-error: var(--color-text-red);
+    }
+
+    .astryx-step-indicator[data-status="accent"] {
+      --color-accent: var(--astryx-theme-neutral-color-status-fill-accent);
+    }
+
+    .astryx-step-indicator[data-status="success"] {
+      --color-success: var(--astryx-theme-neutral-color-status-fill-success);
+    }
+
+    .astryx-step-indicator[data-status="warning"] {
+      --color-warning: var(--astryx-theme-neutral-color-status-fill-warning);
+    }
+
+    .astryx-step-indicator[data-status="error"] {
+      --color-error: var(--astryx-theme-neutral-color-status-fill-error);
+    }
+
+    .astryx-switch {
+      --color-background-gray: var(--color-border-emphasized);
+    }
+
+    .astryx-progress-bar {
+      --color-background-muted: var(--color-border-emphasized);
+    }
+
+    .astryx-progress-bar[data-variant="accent"] {
+      --color-accent: var(--astryx-theme-neutral-color-status-fill-accent);
+    }
+
+    .astryx-progress-bar[data-variant="success"] {
+      --color-success: var(--astryx-theme-neutral-color-status-fill-success);
+    }
+
+    .astryx-progress-bar[data-variant="warning"] {
+      --color-warning: var(--astryx-theme-neutral-color-status-fill-warning);
+    }
+
+    .astryx-progress-bar[data-variant="error"] {
+      --color-error: var(--astryx-theme-neutral-color-status-fill-error);
+    }
+
+    .astryx-card {
+      --astryx-card-padding: var(--spacing-3);
+    }
+
+    .astryx-section {
+      --astryx-section-padding: var(--spacing-3);
+    }
+
+    .astryx-text[data-color="primary"] {
+      color: var(--color-text-primary);
+    }
+
+    .astryx-heading[data-color="primary"] {
+      color: var(--color-text-primary);
+    }
+
+    .astryx-text[data-color="secondary"] {
+      color: var(--color-text-secondary);
+    }
+
+    .astryx-heading[data-color="secondary"] {
+      color: var(--color-text-secondary);
+    }
+
+    .astryx-text[data-color="disabled"] {
+      color: var(--color-text-disabled);
+    }
+
+    .astryx-heading[data-color="disabled"] {
+      color: var(--color-text-disabled);
+    }
+
+    .astryx-text[data-color="placeholder"] {
+      color: var(--color-text-secondary);
+    }
+
+    .astryx-heading[data-color="placeholder"] {
+      color: var(--color-text-secondary);
+    }
+
+    .astryx-text[data-color="accent"] {
+      color: var(--color-text-accent);
+    }
+
+    .astryx-heading[data-color="accent"] {
+      color: var(--color-text-accent);
+    }
+
+    .astryx-text[data-size="4xs"] {
+      font-size: var(--font-size-4xs);
+    }
+
+    .astryx-text[data-size="3xs"] {
+      font-size: var(--font-size-3xs);
+    }
+
+    .astryx-text[data-size="2xs"] {
+      font-size: var(--font-size-2xs);
+    }
+
+    .astryx-text[data-size="xsm"] {
+      font-size: var(--font-size-xs);
+    }
+
+    .astryx-text[data-size="sm"] {
+      font-size: var(--font-size-sm);
+    }
+
+    .astryx-text[data-size="base"] {
+      font-size: var(--font-size-base);
+    }
+
+    .astryx-text[data-size="lg"] {
+      font-size: var(--font-size-lg);
+    }
+
+    .astryx-text[data-size="xl"] {
+      font-size: var(--font-size-xl);
+    }
+
+    .astryx-text[data-size="2xl"] {
+      font-size: var(--font-size-2xl);
+    }
+
+    .astryx-text[data-size="3xl"] {
+      font-size: var(--font-size-3xl);
+    }
+
+    .astryx-text[data-size="4xl"] {
+      font-size: var(--font-size-4xl);
+    }
+
+    .astryx-heading[data-weight="normal"] {
+      font-weight: var(--font-weight-normal);
+    }
+
+    .astryx-heading[data-weight="medium"] {
+      font-weight: var(--font-weight-medium);
+    }
+
+    .astryx-heading[data-weight="semibold"] {
+      font-weight: var(--font-weight-semibold);
+    }
+
+    .astryx-heading[data-weight="bold"] {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+}
+
+@layer astryx-theme {
+  @scope ([data-astryx-theme="joined"]) to ([data-astryx-theme]) {
+    [data-astryx-media="dark"] {
+      color-scheme: dark;
+      --color-text-primary: var(--color-on-dark);
+      --color-icon-primary: var(--color-on-dark);
+      --color-accent: var(--color-on-dark);
+    }
+
+    [data-astryx-media="light"] {
+      color-scheme: light;
+      --color-text-primary: var(--color-on-light);
+      --color-icon-primary: var(--color-on-light);
+      --color-accent: var(--color-on-light);
+    }
+  }
+}