astryx-dracula 0.1.0

package/theme.css

@@ -0,0 +1,709 @@
+/*
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: astryx-theme.ts
+ * Command: astryx theme build astryx-theme.ts --out theme.css
+ * CLI: @astryxdesign/cli@0.3.0
+ * Core: @astryxdesign/core@0.3.0
+ */
+
+@layer reset {
+@scope ([data-astryx-theme="astryx-dracula"]) 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(--font-size-2xl);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4545;
+  }
+
+  :where(h2) {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4737;
+  }
+
+  :where(h3) {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5;
+  }
+
+  :where(h4) {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5385;
+  }
+
+  :where(h5) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4545;
+  }
+
+  :where(h6) {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.7778;
+  }
+
+  :where(p) {
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.5385;
+    color: var(--color-text-primary);
+  }
+
+  :where(small) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4545;
+    color: var(--color-text-secondary);
+  }
+
+  :where(code, pre) {
+    font-family: var(--font-family-code);
+    font-size: var(--font-size-base);
+    line-height: 1.5385;
+  }
+
+  :where(hr) {
+    border: none;
+    border-top: 1px solid var(--color-border);
+  }
+}
+}
+
+@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="astryx-dracula"]) to ([data-astryx-theme]) {
+  :scope {
+    --font-size-4xs: 0.3125rem;
+    --font-size-3xs: 0.375rem;
+    --font-size-2xs: 0.5rem;
+    --font-size-xs: 0.5625rem;
+    --font-size-sm: 0.6875rem;
+    --font-size-base: 13px;
+    --font-size-lg: 1rem;
+    --font-size-xl: 1.1875rem;
+    --font-size-2xl: 1.375rem;
+    --font-size-3xl: 1.6875rem;
+    --font-size-4xl: 2rem;
+    --font-size-5xl: 2.4375rem;
+    --text-heading-1-size: var(--font-size-2xl);
+    --text-heading-1-weight: var(--font-weight-normal);
+    --text-heading-1-leading: 1.4545;
+    --text-heading-2-size: var(--font-size-xl);
+    --text-heading-2-weight: var(--font-weight-normal);
+    --text-heading-2-leading: 1.4737;
+    --text-heading-3-size: var(--font-size-lg);
+    --text-heading-3-weight: var(--font-weight-normal);
+    --text-heading-3-leading: 1.5;
+    --text-heading-4-size: var(--font-size-base);
+    --text-heading-4-weight: var(--font-weight-normal);
+    --text-heading-4-leading: 1.5385;
+    --text-heading-5-size: var(--font-size-sm);
+    --text-heading-5-weight: var(--font-weight-normal);
+    --text-heading-5-leading: 1.4545;
+    --text-heading-6-size: var(--font-size-xs);
+    --text-heading-6-weight: var(--font-weight-normal);
+    --text-heading-6-leading: 1.7778;
+    --text-body-size: var(--font-size-base);
+    --text-body-weight: var(--font-weight-normal);
+    --text-body-leading: 1.5385;
+    --text-large-size: var(--font-size-lg);
+    --text-large-weight: var(--font-weight-semibold);
+    --text-large-leading: 1.5;
+    --text-label-size: var(--font-size-base);
+    --text-label-weight: var(--font-weight-medium);
+    --text-label-leading: 1.5385;
+    --text-code-size: var(--font-size-base);
+    --text-code-weight: var(--font-weight-normal);
+    --text-code-leading: 1.5385;
+    --text-supporting-size: var(--font-size-sm);
+    --text-supporting-weight: var(--font-weight-normal);
+    --text-supporting-leading: 1.4545;
+    --text-display-1-size: var(--font-size-5xl);
+    --text-display-1-weight: var(--font-weight-normal);
+    --text-display-1-leading: 1.2308;
+    --text-display-2-size: var(--font-size-4xl);
+    --text-display-2-weight: var(--font-weight-normal);
+    --text-display-2-leading: 1.25;
+    --text-display-3-size: var(--font-size-3xl);
+    --text-display-3-weight: var(--font-weight-normal);
+    --text-display-3-leading: 1.3333;
+    --duration-fast-min: 130ms;
+    --duration-fast: 175ms;
+    --duration-fast-max: 235ms;
+    --duration-medium-min: 310ms;
+    --duration-medium: 410ms;
+    --duration-medium-max: 545ms;
+    --duration-slow-min: 730ms;
+    --duration-slow: 975ms;
+    --duration-slow-max: 1300ms;
+    --font-family-body: "JetBrains Mono", monospace;
+    --font-family-heading: "JetBrains Mono", monospace;
+    --font-family-code: "JetBrains Mono", monospace;
+    --color-syntax-keyword: #FF79C6;
+    --color-syntax-string: #F1FA8C;
+    --color-syntax-comment: #6272A4;
+    --color-syntax-number: #FFB86C;
+    --color-syntax-function: #50FA7B;
+    --color-syntax-type: #8BE9FD;
+    --color-syntax-variable: #F8F8F2;
+    --color-syntax-operator: #FF79C6;
+    --color-syntax-constant: #FFB86C;
+    --color-syntax-tag: #FF79C6;
+    --color-syntax-attribute: #F1FA8C;
+    --color-syntax-property: #8BE9FD;
+    --color-syntax-punctuation: #F8F8F2;
+    --color-syntax-background: #282A36;
+    --radius-inner: 4px;
+    --radius-element: 5px;
+    --radius-container: 5px;
+    --radius-page: 5px;
+    --font-size-h1: 17px;
+    --font-size-h2: 16px;
+    --font-size-h3: 15px;
+    --font-size-h4: 14px;
+    --font-size-h5: 12px;
+    --font-size-h6: 11px;
+    --shadow-low: 0 2px 4px #191A210D, 0 4px 8px #191A211A;
+    --shadow-med: 0 2px 4px #191A210D, 0 4px 12px #191A211A;
+    --shadow-high: 0 4px 6px #191A211A, 0 12px 24px #191A2126;
+    --shadow-inset-hover: inset 0px 0px 0px 2px #6272A430;
+    --shadow-inset-success: inset 0px 0px 0px 2px #50FA7B30;
+    --shadow-inset-warning: inset 0px 0px 0px 2px #F1FA8C30;
+    --shadow-inset-error: inset 0px 0px 0px 2px #FF555530;
+    --color-neutral: light-dark(#F8F8F21A, #F8F8F21A);
+    --color-background-inverted: light-dark(#F8F8F2, #F8F8F2);
+    --color-background-error-inverted: light-dark(#FFD5CC, #FFD5CC);
+    --color-accent-muted: var(--color-background-purple);
+    --color-success-muted: var(--color-background-green);
+    --color-warning-muted: var(--color-background-yellow);
+    --color-error-muted: var(--color-background-red);
+    --color-info-muted: var(--color-background-cyan);
+    --space-gap: 23px;
+    --space-viewport: 15px;
+    --widget-content-vertical: 15px;
+    --widget-content-horizontal: 17px;
+    --widget-gap: 23px;
+    --tile-row: 96px;
+    --border-radius: 5px;
+    --color-background-body: light-dark(#282A36, #282A36);
+    --color-background-surface: light-dark(#343746, #343746);
+    --color-background-card: light-dark(#343746, #343746);
+    --color-background-popover: light-dark(#424450, #424450);
+    --color-background-muted: light-dark(#44475A, #44475A);
+    --color-overlay: light-dark(#191A21CC, #191A21CC);
+    --color-overlay-hover: light-dark(#353747, #353747);
+    --color-overlay-pressed: light-dark(#44475A, #44475A);
+    --color-border: light-dark(#6272A4, #6272A4);
+    --color-border-emphasized: light-dark(#6272A4, #6272A4);
+    --color-accent: light-dark(#BD93F9, #BD93F9);
+    --color-success: light-dark(#50FA7B, #50FA7B);
+    --color-error: light-dark(#FF5555, #FF5555);
+    --color-warning: light-dark(#F1FA8C, #F1FA8C);
+    --color-info: light-dark(#8BE9FD, #8BE9FD);
+    --color-text-primary: light-dark(#F8F8F2, #F8F8F2);
+    --color-text-secondary: light-dark(#9AA1BC, #9AA1BC);
+    --color-text-disabled: light-dark(#6272A4, #6272A4);
+    --color-text-accent: light-dark(#BD93F9, #BD93F9);
+    --color-icon-primary: light-dark(#F8F8F2, #F8F8F2);
+    --color-icon-secondary: light-dark(#9AA1BC, #9AA1BC);
+    --color-icon-disabled: light-dark(#6272A4, #6272A4);
+    --color-icon-accent: light-dark(#BD93F9, #BD93F9);
+    --color-on-accent: light-dark(#21222C, #21222C);
+    --color-on-success: light-dark(#21222C, #21222C);
+    --color-on-warning: light-dark(#21222C, #21222C);
+    --color-on-error: light-dark(#21222C, #21222C);
+    --color-on-info: light-dark(#21222C, #21222C);
+    --color-track: light-dark(#6272A4, #6272A4);
+    --color-skeleton: light-dark(#6272A4, #6272A4);
+    --color-functional-red: light-dark(#DE5735, #DE5735);
+    --color-functional-orange: light-dark(#A39514, #A39514);
+    --color-functional-green: light-dark(#089108, #089108);
+    --color-functional-cyan: light-dark(#0081D6, #0081D6);
+    --color-functional-purple: light-dark(#815CD6, #815CD6);
+    --color-data-categorical-blue: light-dark(#6272A4, #6272A4);
+    --color-data-categorical-orange: light-dark(#FFB86C, #FFB86C);
+    --color-data-categorical-purple: light-dark(#BD93F9, #BD93F9);
+    --color-data-categorical-green: light-dark(#50FA7B, #50FA7B);
+    --color-data-categorical-pink: light-dark(#FF79C6, #FF79C6);
+    --color-data-categorical-cyan: light-dark(#8BE9FD, #8BE9FD);
+    --color-data-categorical-red: light-dark(#FF5555, #FF5555);
+    --color-data-categorical-teal: light-dark(#A4FFFF, #A4FFFF);
+    --color-data-categorical-brown: light-dark(#FFB86C, #FFB86C);
+    --color-data-categorical-indigo: light-dark(#D6ACFF, #D6ACFF);
+    --color-background-blue: light-dark(#6272A41A, #6272A41A);
+    --color-border-blue: light-dark(#6272A44D, #6272A44D);
+    --color-icon-blue: light-dark(#6272A4, #6272A4);
+    --color-text-blue: light-dark(#6272A4, #6272A4);
+    --color-background-cyan: light-dark(#8BE9FD1A, #8BE9FD1A);
+    --color-border-cyan: light-dark(#8BE9FD4D, #8BE9FD4D);
+    --color-icon-cyan: light-dark(#8BE9FD, #8BE9FD);
+    --color-text-cyan: light-dark(#8BE9FD, #8BE9FD);
+    --color-background-gray: light-dark(#9AA1BC1A, #9AA1BC1A);
+    --color-border-gray: light-dark(#9AA1BC4D, #9AA1BC4D);
+    --color-icon-gray: light-dark(#9AA1BC, #9AA1BC);
+    --color-text-gray: light-dark(#9AA1BC, #9AA1BC);
+    --color-background-green: light-dark(#50FA7B1A, #50FA7B1A);
+    --color-border-green: light-dark(#50FA7B4D, #50FA7B4D);
+    --color-icon-green: light-dark(#50FA7B, #50FA7B);
+    --color-text-green: light-dark(#50FA7B, #50FA7B);
+    --color-background-orange: light-dark(#FFB86C1A, #FFB86C1A);
+    --color-border-orange: light-dark(#FFB86C4D, #FFB86C4D);
+    --color-icon-orange: light-dark(#FFB86C, #FFB86C);
+    --color-text-orange: light-dark(#FFB86C, #FFB86C);
+    --color-background-pink: light-dark(#FF79C61A, #FF79C61A);
+    --color-border-pink: light-dark(#FF79C64D, #FF79C64D);
+    --color-icon-pink: light-dark(#FF79C6, #FF79C6);
+    --color-text-pink: light-dark(#FF79C6, #FF79C6);
+    --color-background-purple: light-dark(#BD93F91A, #BD93F91A);
+    --color-border-purple: light-dark(#BD93F94D, #BD93F94D);
+    --color-icon-purple: light-dark(#BD93F9, #BD93F9);
+    --color-text-purple: light-dark(#BD93F9, #BD93F9);
+    --color-background-red: light-dark(#FF55551A, #FF55551A);
+    --color-border-red: light-dark(#FF55554D, #FF55554D);
+    --color-icon-red: light-dark(#FF5555, #FF5555);
+    --color-text-red: light-dark(#FF5555, #FF5555);
+    --color-background-teal: light-dark(#A4FFFF1A, #A4FFFF1A);
+    --color-border-teal: light-dark(#A4FFFF4D, #A4FFFF4D);
+    --color-icon-teal: light-dark(#A4FFFF, #A4FFFF);
+    --color-text-teal: light-dark(#A4FFFF, #A4FFFF);
+    --color-background-yellow: light-dark(#F1FA8C1A, #F1FA8C1A);
+    --color-border-yellow: light-dark(#F1FA8C4D, #F1FA8C4D);
+    --color-icon-yellow: light-dark(#F1FA8C, #F1FA8C);
+    --color-text-yellow: light-dark(#F1FA8C, #F1FA8C);
+    --color-data-purple-5: light-dark(hsl(264.71 89.47% 28%), hsl(264.71 89.47% 28%));
+    --color-data-purple-4: light-dark(hsl(264.71 89.47% 44%), hsl(264.71 89.47% 44%));
+    --color-data-purple-3: light-dark(hsl(264.71 89.47% 60%), hsl(264.71 89.47% 60%));
+    --color-data-purple-2: light-dark(hsl(264.71 89.47% 74%), hsl(264.71 89.47% 74%));
+    --color-data-purple-1: light-dark(hsl(264.71 89.47% 88%), hsl(264.71 89.47% 88%));
+    --color-data-pink-5: light-dark(hsl(325.52 100% 28%), hsl(325.52 100% 28%));
+    --color-data-pink-4: light-dark(hsl(325.52 100% 44%), hsl(325.52 100% 44%));
+    --color-data-pink-3: light-dark(hsl(325.52 100% 60%), hsl(325.52 100% 60%));
+    --color-data-pink-2: light-dark(hsl(325.52 100% 74%), hsl(325.52 100% 74%));
+    --color-data-pink-1: light-dark(hsl(325.52 100% 88%), hsl(325.52 100% 88%));
+    --color-data-red-5: light-dark(hsl(0 100% 28%), hsl(0 100% 28%));
+    --color-data-red-4: light-dark(hsl(0 100% 44%), hsl(0 100% 44%));
+    --color-data-red-3: light-dark(hsl(0 100% 60%), hsl(0 100% 60%));
+    --color-data-red-2: light-dark(hsl(0 100% 74%), hsl(0 100% 74%));
+    --color-data-red-1: light-dark(hsl(0 100% 88%), hsl(0 100% 88%));
+    --color-data-orange-5: light-dark(hsl(31.02 100% 28%), hsl(31.02 100% 28%));
+    --color-data-orange-4: light-dark(hsl(31.02 100% 44%), hsl(31.02 100% 44%));
+    --color-data-orange-3: light-dark(hsl(31.02 100% 60%), hsl(31.02 100% 60%));
+    --color-data-orange-2: light-dark(hsl(31.02 100% 74%), hsl(31.02 100% 74%));
+    --color-data-orange-1: light-dark(hsl(31.02 100% 88%), hsl(31.02 100% 88%));
+    --color-data-yellow-5: light-dark(hsl(64.91 91.67% 28%), hsl(64.91 91.67% 28%));
+    --color-data-yellow-4: light-dark(hsl(64.91 91.67% 44%), hsl(64.91 91.67% 44%));
+    --color-data-yellow-3: light-dark(hsl(64.91 91.67% 60%), hsl(64.91 91.67% 60%));
+    --color-data-yellow-2: light-dark(hsl(64.91 91.67% 74%), hsl(64.91 91.67% 74%));
+    --color-data-yellow-1: light-dark(hsl(64.91 91.67% 88%), hsl(64.91 91.67% 88%));
+    --color-data-teal-5: light-dark(hsl(190.53 96.61% 28%), hsl(190.53 96.61% 28%));
+    --color-data-teal-4: light-dark(hsl(190.53 96.61% 44%), hsl(190.53 96.61% 44%));
+    --color-data-teal-3: light-dark(hsl(190.53 96.61% 60%), hsl(190.53 96.61% 60%));
+    --color-data-teal-2: light-dark(hsl(190.53 96.61% 74%), hsl(190.53 96.61% 74%));
+    --color-data-teal-1: light-dark(hsl(190.53 96.61% 88%), hsl(190.53 96.61% 88%));
+    --color-data-blue-5: light-dark(hsl(225.45 26.61% 28%), hsl(225.45 26.61% 28%));
+    --color-data-blue-4: light-dark(hsl(225.45 26.61% 44%), hsl(225.45 26.61% 44%));
+    --color-data-blue-3: light-dark(hsl(225.45 26.61% 60%), hsl(225.45 26.61% 60%));
+    --color-data-blue-2: light-dark(hsl(225.45 26.61% 74%), hsl(225.45 26.61% 74%));
+    --color-data-blue-1: light-dark(hsl(225.45 26.61% 88%), hsl(225.45 26.61% 88%));
+    --color-data-shamrock-5: light-dark(hsl(135.18 94.44% 28%), hsl(135.18 94.44% 28%));
+    --color-data-shamrock-4: light-dark(hsl(135.18 94.44% 44%), hsl(135.18 94.44% 44%));
+    --color-data-shamrock-3: light-dark(hsl(135.18 94.44% 60%), hsl(135.18 94.44% 60%));
+    --color-data-shamrock-2: light-dark(hsl(135.18 94.44% 74%), hsl(135.18 94.44% 74%));
+    --color-data-shamrock-1: light-dark(hsl(135.18 94.44% 88%), hsl(135.18 94.44% 88%));
+    --color-data-gray-5: light-dark(hsl(231.43 14.89% 28%), hsl(231.43 14.89% 28%));
+    --color-data-gray-4: light-dark(hsl(231.43 14.89% 44%), hsl(231.43 14.89% 44%));
+    --color-data-gray-3: light-dark(hsl(231.43 14.89% 60%), hsl(231.43 14.89% 60%));
+    --color-data-gray-2: light-dark(hsl(231.43 14.89% 74%), hsl(231.43 14.89% 74%));
+    --color-data-gray-1: light-dark(hsl(231.43 14.89% 88%), hsl(231.43 14.89% 88%));
+    --color-background: light-dark(#282A36, #282A36);
+    --color-widget-background: light-dark(#343746, #343746);
+    --color-widget-content-border: light-dark(#6272A4, #6272A4);
+    --color-widget-background-highlight: light-dark(#44475A, #44475A);
+    --color-separator: light-dark(#44475A, #44475A);
+    --color-popover-background: light-dark(#424450, #424450);
+    --color-popover-border: light-dark(#6272A4, #6272A4);
+    --color-progress-border: light-dark(#44475A, #44475A);
+    --color-progress-value: light-dark(#6272A4, #6272A4);
+    --color-vertical-progress-value: light-dark(#6272A4, #6272A4);
+    --color-graph-gridlines: light-dark(#44475A, #44475A);
+    --color-widget-shadow: light-dark(#21222C, #21222C);
+    --color-text-highlight: light-dark(#F8F8F2, #F8F8F2);
+    --color-text-paragraph: light-dark(#B0B3C4, #B0B3C4);
+    --color-text-base: light-dark(#9AA1BC, #9AA1BC);
+    --color-text-base-muted: light-dark(#8288A6, #8288A6);
+    --color-text-subdue: light-dark(#4C5067, #4C5067);
+    --color-current-line: light-dark(#6272A4, #6272A4);
+    --color-selection: light-dark(#44475A, #44475A);
+    --color-primary: light-dark(#BD93F9, #BD93F9);
+    --color-positive: light-dark(#50FA7B, #50FA7B);
+    --color-negative: light-dark(#FF5555, #FF5555);
+    --color-tag-orange: light-dark(#FFB86C, #FFB86C);
+    --color-tag-pink: light-dark(#FF79C6, #FF79C6);
+    --color-tag-cyan: light-dark(#8BE9FD, #8BE9FD);
+    --color-tag-yellow: light-dark(#F1FA8C, #F1FA8C);
+    --color-tag-green: light-dark(#50FA7B, #50FA7B);
+    --color-tag-blue: light-dark(#BD93F9, #BD93F9);
+  }
+
+  .astryx-heading.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.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.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.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.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.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-text.body {
+    font-family: var(--font-family-body);
+    font-size: var(--text-body-size);
+    line-height: var(--text-body-leading);
+  }
+
+  .astryx-text.large {
+    font-family: var(--font-family-body);
+    font-size: var(--text-large-size);
+    line-height: var(--text-large-leading);
+  }
+
+  .astryx-text.label {
+    font-family: var(--font-family-body);
+    font-size: var(--text-label-size);
+    line-height: var(--text-label-leading);
+  }
+
+  .astryx-text.code {
+    font-family: var(--font-family-code);
+    font-size: var(--text-code-size);
+    line-height: var(--text-code-leading);
+  }
+
+  .astryx-text.supporting {
+    font-family: var(--font-family-body);
+    font-size: var(--text-supporting-size);
+    line-height: var(--text-supporting-leading);
+  }
+
+  .astryx-text.display-1 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-1-size);
+    line-height: var(--text-display-1-leading);
+  }
+
+  .astryx-text.display-2 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-2-size);
+    line-height: var(--text-display-2-leading);
+  }
+
+  .astryx-text.display-3 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-3-size);
+    line-height: var(--text-display-3-leading);
+  }
+
+  .astryx-link {
+    color: var(--color-text-accent);
+    text-decoration: underline;
+  }
+
+  .astryx-link:hover {
+    color: var(--color-text-highlight);
+  }
+
+  .astryx-card {
+    background-color: var(--color-widget-background);
+    border: 1px solid var(--color-widget-content-border);
+    border-radius: var(--border-radius);
+    --_card-radius: var(--border-radius);
+  }
+
+  .astryx-button {
+    border-radius: var(--border-radius);
+    font-weight: var(--font-weight-normal);
+    --_button-radius: var(--border-radius);
+  }
+
+  .astryx-banner {
+    border-radius: var(--border-radius);
+    border-width: 1px;
+    border-style: solid;
+    color: var(--color-text-primary);
+    --_banner-radius: var(--border-radius);
+  }
+
+  .astryx-banner.info {
+    --color-accent-muted: var(--color-background-cyan);
+    border-color: var(--color-info);
+  }
+
+  .astryx-banner.success {
+    --color-success-muted: var(--color-background-green);
+    border-color: var(--color-success);
+  }
+
+  .astryx-banner.warning {
+    --color-warning-muted: var(--color-background-yellow);
+    border-color: var(--color-warning);
+  }
+
+  .astryx-banner.error {
+    --color-error-muted: var(--color-background-red);
+    border-color: var(--color-error);
+  }
+
+  .astryx-progressbar-fill.accent {
+    background-color: #BD93F9;
+  }
+
+  .astryx-progressbar-fill.success {
+    background-color: #50FA7B;
+  }
+
+  .astryx-progressbar-fill.warning {
+    background-color: #F1FA8C;
+  }
+
+  .astryx-progressbar-fill.error {
+    background-color: #FF5555;
+  }
+
+  .astryx-text-input.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-text-input.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-text-input.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-textarea.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-textarea.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-textarea.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-number-input.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-number-input.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-number-input.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-date-input.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-date-input.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-date-input.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-time-input.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-time-input.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-time-input.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-selector.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-selector.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-selector.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-multi-selector.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-multi-selector.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-multi-selector.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-typeahead.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-typeahead.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-typeahead.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-tokenizer.success {
+    --color-success: #50FA7B;
+  }
+
+  .astryx-tokenizer.warning {
+    --color-warning: #F1FA8C;
+  }
+
+  .astryx-tokenizer.error {
+    --color-error: #FF5555;
+  }
+
+  .astryx-switch {
+    --color-background-gray: var(--color-skeleton);
+  }
+
+  .astryx-field-status.success {
+    background-color: var(--color-background-green);
+  }
+
+  .astryx-field-status.warning {
+    background-color: var(--color-background-yellow);
+  }
+
+  .astryx-field-status.error {
+    background-color: var(--color-background-red);
+  }
+
+  .astryx-text.primary { color: var(--color-text-primary); }
+
+  .astryx-heading.primary { color: var(--color-text-primary); }
+
+  .astryx-link.primary { color: var(--color-text-primary); }
+
+  .astryx-text.secondary { color: var(--color-text-secondary); }
+
+  .astryx-heading.secondary { color: var(--color-text-secondary); }
+
+  .astryx-link.secondary { color: var(--color-text-secondary); }
+
+  .astryx-text.disabled { color: var(--color-text-disabled); }
+
+  .astryx-heading.disabled { color: var(--color-text-disabled); }
+
+  .astryx-link.disabled { color: var(--color-text-disabled); }
+
+  .astryx-text.placeholder { color: var(--color-text-secondary); }
+
+  .astryx-heading.placeholder { color: var(--color-text-secondary); }
+
+  .astryx-link.placeholder { color: var(--color-text-secondary); }
+
+  .astryx-text.accent { color: var(--color-text-accent); }
+
+  .astryx-heading.accent { color: var(--color-text-accent); }
+
+  .astryx-link.accent { color: var(--color-text-accent); }
+
+  .astryx-text.size-4xs { font-size: var(--font-size-4xs); }
+
+  .astryx-text.size-3xs { font-size: var(--font-size-3xs); }
+
+  .astryx-text.size-2xs { font-size: var(--font-size-2xs); }
+
+  .astryx-text.xsm { font-size: var(--font-size-xs); }
+
+  .astryx-text.sm { font-size: var(--font-size-sm); }
+
+  .astryx-text.base { font-size: var(--font-size-base); }
+
+  .astryx-text.lg { font-size: var(--font-size-lg); }
+
+  .astryx-text.xl { font-size: var(--font-size-xl); }
+
+  .astryx-text.size-2xl { font-size: var(--font-size-2xl); }
+
+  .astryx-text.size-3xl { font-size: var(--font-size-3xl); }
+
+  .astryx-text.size-4xl { font-size: var(--font-size-4xl); }
+}
+}
+
+@layer astryx-theme {
+@scope ([data-astryx-theme="astryx-dracula"]) 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);
+  }
+}
+}