@astryx-vue/themes 0.1.3 → 0.2.0

package/y2k/base.css

@@ -0,0 +1,250 @@
+/**
+ * Y2k semantic tokens.
+ *
+ * Playful pop, periwinkle and cream. Poppins for text, Crimson Text for display. Values follow @astryxdesign/theme-y2k 0.7.0.
+ * Names match Neutral, with an --astryx- prefix.
+ * A token present in the upstream theme.css replaces the Neutral value.
+ * Tokens the theme does not set keep the shared default from Neutral's base.
+ * JetBrains Mono stays on the shared fonts.css stack.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap');
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    color-scheme: light dark;
+    background-color: var(--astryx-color-background-body);
+    color: var(--astryx-color-text-primary);
+    font-family: var(--astryx-font-family-body);
+    font-size: var(--astryx-text-body-size);
+    line-height: var(--astryx-text-body-leading);
+
+    --astryx-color-accent: light-dark(#2d241b, #EDEFFC);
+    --astryx-color-accent-muted: light-dark(#2d241b14, #EDEFFC20);
+    --astryx-color-on-accent: light-dark(#FFFFFF, #16182b);
+    --astryx-color-neutral: light-dark(#2d241b10, #EDEFFC1A);
+    --astryx-color-background-surface: light-dark(#FFFFFF, #16182b);
+    --astryx-color-background-body: light-dark(#CCCFFA, #0e0f1a);
+    --astryx-color-overlay: light-dark(#2d241b80, #0a0b14CC);
+    --astryx-color-overlay-hover: light-dark(#2d241b0D, #EDEFFC0D);
+    --astryx-color-overlay-pressed: light-dark(#2d241b1A, #EDEFFC1A);
+    --astryx-color-background-muted: light-dark(#ede0d4, #1f2238);
+
+    --astryx-color-text-primary: light-dark(#2d241b, #EDEFFC);
+    --astryx-color-text-secondary: light-dark(#675d52, #a6acd6);
+    --astryx-color-text-disabled: light-dark(#d1c5b8, #4a4f6b);
+    --astryx-color-text-accent: light-dark(#2d241b, #EDEFFC);
+    --astryx-color-on-dark: #FFFFFF;
+    --astryx-color-on-light: #2d241b;
+
+    --astryx-color-icon-accent: light-dark(#2d241b, #EDEFFC);
+    --astryx-color-icon-primary: light-dark(#2d241b, #EDEFFC);
+    --astryx-color-icon-secondary: light-dark(#675d52, #a6acd6);
+    --astryx-color-icon-disabled: light-dark(#d1c5b8, #4a4f6b);
+
+    --astryx-color-background-card: light-dark(#FFFFFF, #16182b);
+    --astryx-color-background-popover: light-dark(#FFFFFF, #1f2238);
+    --astryx-color-background-inverted: light-dark(#2d241b, #EDEFFC);
+    --astryx-color-background-error-inverted: light-dark(#aa071e, #e3193b);
+
+    --astryx-color-success: light-dark(#C5E17A, #C5E17A);
+    --astryx-color-success-muted: light-dark(#C5E17A, #C5E17A);
+    --astryx-color-on-success: light-dark(#3a5500, #1e3200);
+    --astryx-color-error: light-dark(#FFC5C3, #FFC5C3);
+    --astryx-color-error-muted: light-dark(#FFC5C3, #FFC5C3);
+    --astryx-color-on-error: light-dark(#8b1d24, #5c0008);
+    --astryx-color-warning: light-dark(#FFE08A, #FFE08A);
+    --astryx-color-warning-muted: light-dark(#FFE08A, #FFE08A);
+    --astryx-color-on-warning: light-dark(#614400, #3f2600);
+
+    --astryx-color-border: light-dark(#2F292E, #EDEFFC1A);
+    --astryx-color-border-emphasized: light-dark(#2F292E, #3a3f5e);
+
+    --astryx-color-skeleton: light-dark(#d1c5b8, #2a2e47);
+    --astryx-color-track: light-dark(#ccd3db, #5a5e66);
+    --astryx-color-shadow: light-dark(#2d241b1A, #0000004D);
+    --astryx-color-tint-hover: light-dark(#2d241b, #EDEFFC);
+
+    --astryx-color-background-blue: light-dark(#B8E0FF, #B8E0FF);
+    --astryx-color-border-blue: light-dark(#8ECFFF, #8ECFFF);
+    --astryx-color-icon-blue: light-dark(#004e74, #002c4d);
+    --astryx-color-text-blue: light-dark(#004e74, #002c4d);
+
+    --astryx-color-background-cyan: light-dark(#A8F0E2, #A8F0E2);
+    --astryx-color-border-cyan: light-dark(#70E8D0, #70E8D0);
+    --astryx-color-icon-cyan: light-dark(#005548, #003028);
+    --astryx-color-text-cyan: light-dark(#005548, #003028);
+
+    --astryx-color-background-gray: light-dark(#ede0d4, #ede0d4);
+    --astryx-color-border-gray: light-dark(#dfd2c6, #dfd2c6);
+    --astryx-color-icon-gray: light-dark(#4f453b, #2d241b);
+    --astryx-color-text-gray: light-dark(#4f453b, #2d241b);
+
+    --astryx-color-background-green: light-dark(#C5E17A, #C5E17A);
+    --astryx-color-border-green: light-dark(#B5D16A, #B5D16A);
+    --astryx-color-icon-green: light-dark(#3a5500, #1e3200);
+    --astryx-color-text-green: light-dark(#3a5500, #1e3200);
+
+    --astryx-color-background-orange: light-dark(#FFCCA0, #FFCCA0);
+    --astryx-color-border-orange: light-dark(#FFAA66, #FFAA66);
+    --astryx-color-icon-orange: light-dark(#703500, #4a1800);
+    --astryx-color-text-orange: light-dark(#703500, #4a1800);
+
+    --astryx-color-background-pink: light-dark(#FFC8E0, #FFC8E0);
+    --astryx-color-border-pink: light-dark(#FFA0C8, #FFA0C8);
+    --astryx-color-icon-pink: light-dark(#822050, #580030);
+    --astryx-color-text-pink: light-dark(#822050, #580030);
+
+    --astryx-color-background-purple: light-dark(#DDD0FF, #DDD0FF);
+    --astryx-color-border-purple: light-dark(#C0AAFF, #C0AAFF);
+    --astryx-color-icon-purple: light-dark(#453080, #201058);
+    --astryx-color-text-purple: light-dark(#453080, #201058);
+
+    --astryx-color-background-red: light-dark(#FFC5C3, #FFC5C3);
+    --astryx-color-border-red: light-dark(#FF9E9A, #FF9E9A);
+    --astryx-color-icon-red: light-dark(#8b1d24, #5c0008);
+    --astryx-color-text-red: light-dark(#8b1d24, #5c0008);
+
+    --astryx-color-background-teal: light-dark(#A8EED0, #A8EED0);
+    --astryx-color-border-teal: light-dark(#78E0B0, #78E0B0);
+    --astryx-color-icon-teal: light-dark(#005530, #003018);
+    --astryx-color-text-teal: light-dark(#005530, #003018);
+
+    --astryx-color-background-yellow: light-dark(#FFE08A, #FFE08A);
+    --astryx-color-border-yellow: light-dark(#FFCC55, #FFCC55);
+    --astryx-color-icon-yellow: light-dark(#614400, #3f2600);
+    --astryx-color-text-yellow: light-dark(#614400, #3f2600);
+
+    --astryx-spacing-0: 0;
+    --astryx-spacing-0-5: 0.1875rem;
+    --astryx-spacing-1: 0.375rem;
+    --astryx-spacing-1-5: 0.5625rem;
+    --astryx-spacing-2: 0.75rem;
+    --astryx-spacing-3: 1.125rem;
+    --astryx-spacing-4: 1.5rem;
+    --astryx-spacing-5: 1.875rem;
+    --astryx-spacing-6: 2.25rem;
+    --astryx-spacing-7: 2.625rem;
+    --astryx-spacing-8: 3rem;
+    --astryx-spacing-9: 36px;
+    --astryx-spacing-10: 40px;
+    --astryx-spacing-11: 44px;
+    --astryx-spacing-12: 48px;
+
+    --astryx-size-element-sm: 32px;
+    --astryx-size-element-md: 40px;
+    --astryx-size-element-lg: 48px;
+
+    --astryx-border-width: 1px;
+
+    --astryx-focus-outline-width: 2px;
+    --astryx-focus-outline-style: solid;
+    --astryx-focus-outline-color: var(--astryx-color-accent);
+    --astryx-focus-outline-offset: 3px;
+
+    --astryx-radius-none: 0px;
+    --astryx-radius-inner: 0px;
+    --astryx-radius-element: 0px;
+    --astryx-radius-container: 0px;
+    --astryx-radius-page: 0px;
+    --astryx-radius-chat: 0px;
+    --astryx-radius-full: 0px;
+
+    --astryx-shadow-low: 0 2px 4px #2d241b0D, 0 4px 8px #2d241b1A;
+    --astryx-shadow-med: 0 2px 4px #2d241b0D, 0 4px 12px #2d241b1A;
+    --astryx-shadow-high: 0 4px 6px #2d241b1A, 0 12px 24px #2d241b26;
+    --astryx-shadow-inset-hover: inset 0px 0px 0px 2px #2d241b30;
+    --astryx-shadow-inset-selected: inset 0px 0px 0px 2px #2d241b50;
+    --astryx-shadow-inset-success: inset 0px 0px 0px 2px #3a550050;
+    --astryx-shadow-inset-warning: inset 0px 0px 0px 2px #61440050;
+    --astryx-shadow-inset-error: inset 0px 0px 0px 2px #8b1d2450;
+
+    --astryx-duration-fast-min: 80ms;
+    --astryx-duration-fast: 100ms;
+    --astryx-duration-fast-max: 125ms;
+    --astryx-duration-medium-min: 200ms;
+    --astryx-duration-medium: 250ms;
+    --astryx-duration-medium-max: 315ms;
+    --astryx-duration-slow-min: 480ms;
+    --astryx-duration-slow: 600ms;
+    --astryx-duration-slow-max: 750ms;
+
+    --astryx-ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
+
+    --astryx-font-family-body: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    --astryx-font-family-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --astryx-font-family-heading: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+    --astryx-font-size-4xs: 0.3125rem;
+    --astryx-font-size-3xs: 0.4375rem;
+    --astryx-font-size-2xs: 0.5rem;
+    --astryx-font-size-xs: 0.625rem;
+    --astryx-font-size-sm: 0.8125rem;
+    --astryx-font-size-base: 1rem;
+    --astryx-font-size-lg: 1.25rem;
+    --astryx-font-size-xl: 1.5625rem;
+    --astryx-font-size-2xl: 1.9375rem;
+    --astryx-font-size-3xl: 2.4375rem;
+    --astryx-font-size-4xl: 3.0625rem;
+    --astryx-font-size-5xl: 3.8125rem;
+
+    --astryx-font-weight-normal: 400;
+    --astryx-font-weight-regular: var(--astryx-font-weight-normal);
+    --astryx-font-weight-medium: 500;
+    --astryx-font-weight-semibold: 600;
+    --astryx-font-weight-bold: 700;
+
+    --astryx-text-heading-1-size: var(--astryx-font-size-2xl);
+    --astryx-text-heading-1-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-1-leading: 1.4194;
+    --astryx-text-heading-2-size: var(--astryx-font-size-xl);
+    --astryx-text-heading-2-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-2-leading: 1.44;
+    --astryx-text-heading-3-size: var(--astryx-font-size-lg);
+    --astryx-text-heading-3-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-3-leading: 1.4;
+    --astryx-text-heading-4-size: var(--astryx-font-size-base);
+    --astryx-text-heading-4-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-4-leading: 1.5;
+    --astryx-text-heading-5-size: var(--astryx-font-size-sm);
+    --astryx-text-heading-5-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-5-leading: 1.5385;
+    --astryx-text-heading-6-size: var(--astryx-font-size-xs);
+    --astryx-text-heading-6-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-6-leading: 1.6;
+
+    --astryx-text-body-size: var(--astryx-font-size-base);
+    --astryx-text-body-weight: var(--astryx-font-weight-normal);
+    --astryx-text-body-leading: 1.5;
+    --astryx-text-large-size: var(--astryx-font-size-lg);
+    --astryx-text-large-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-large-leading: 1.4;
+    --astryx-text-label-size: var(--astryx-font-size-base);
+    --astryx-text-label-weight: var(--astryx-font-weight-medium);
+    --astryx-text-label-leading: 1.5;
+    --astryx-text-code-size: var(--astryx-font-size-base);
+    --astryx-text-code-weight: var(--astryx-font-weight-normal);
+    --astryx-text-code-leading: 1.5;
+    --astryx-text-supporting-size: 12px;
+    --astryx-text-supporting-weight: var(--astryx-font-weight-normal);
+    --astryx-text-supporting-leading: 1.5385;
+
+    --astryx-text-display-1-size: var(--astryx-font-size-5xl);
+    --astryx-text-display-1-weight: var(--astryx-font-weight-normal);
+    --astryx-text-display-1-leading: 1.2459;
+    --astryx-text-display-2-size: var(--astryx-font-size-4xl);
+    --astryx-text-display-2-weight: var(--astryx-font-weight-normal);
+    --astryx-text-display-2-leading: 1.2245;
+    --astryx-text-display-3-size: var(--astryx-font-size-3xl);
+    --astryx-text-display-3-weight: var(--astryx-font-weight-normal);
+    --astryx-text-display-3-leading: 1.2308;
+  }
+
+  [data-astryx-theme='y2k'][data-astryx-color-mode='light'] {
+    color-scheme: light;
+  }
+
+  [data-astryx-theme='y2k'][data-astryx-color-mode='dark'] {
+    color-scheme: dark;
+  }
+}

package/y2k/bottom-sheet.css

@@ -0,0 +1,13 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-bottom-sheet-background: var(--astryx-color-background-surface);
+    --astryx-bottom-sheet-foreground: var(--astryx-color-text-primary);
+    --astryx-bottom-sheet-border: var(--astryx-color-border);
+    --astryx-bottom-sheet-scrim: var(--astryx-color-overlay);
+    --astryx-bottom-sheet-handle-background: var(--astryx-color-background-surface);
+    --astryx-bottom-sheet-focus: var(--astryx-color-accent);
+    --astryx-bottom-sheet-shadow: var(--astryx-shadow-low);
+  }
+}

package/y2k/button.css

@@ -0,0 +1,30 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-button-primary-background: var(--astryx-color-text-primary);
+    --astryx-button-primary-foreground: var(--astryx-color-background-body);
+    --astryx-button-secondary-background: var(--astryx-color-background-green);
+    --astryx-button-secondary-foreground: var(--astryx-color-text-green);
+    --astryx-button-ghost-background: transparent;
+    --astryx-button-ghost-foreground: var(--astryx-color-text-primary);
+    --astryx-button-destructive-background: var(--astryx-color-background-red);
+    --astryx-button-destructive-foreground: var(--astryx-color-text-red);
+    --astryx-button-hover-overlay: var(--astryx-color-overlay-hover);
+    --astryx-button-pressed-overlay: var(--astryx-color-overlay-pressed);
+    --astryx-button-focus: var(--astryx-color-accent);
+    --astryx-button-separator: var(--astryx-color-border);
+    --astryx-button-solid-separator: var(--astryx-color-on-accent);
+    --astryx-button-tooltip-background: var(--astryx-color-text-primary);
+    --astryx-button-tooltip-foreground: var(--astryx-color-background-body);
+    --astryx-button-shadow-low: var(--astryx-shadow-low);
+    --astryx-button-shadow-med: var(--astryx-shadow-med);
+    --astryx-button-shadow-high: var(--astryx-shadow-high);
+  }
+}
+
+@layer astryx.components {
+  [data-astryx-theme='y2k'] .astryx-button[data-variant='secondary'] {
+    border: 1px solid var(--astryx-color-text-green);
+  }
+}

package/y2k/card.css

@@ -0,0 +1,23 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-card-background: var(--astryx-color-background-card);
+    --astryx-card-muted-background: var(--astryx-color-background-muted);
+    --astryx-card-border: var(--astryx-color-border);
+    --astryx-card-shadow-low: var(--astryx-shadow-low);
+    --astryx-card-shadow-med: var(--astryx-shadow-med);
+    --astryx-card-shadow-high: var(--astryx-shadow-high);
+
+    --astryx-card-blue-background: var(--astryx-color-background-blue);
+    --astryx-card-cyan-background: var(--astryx-color-background-cyan);
+    --astryx-card-gray-background: var(--astryx-color-background-gray);
+    --astryx-card-green-background: var(--astryx-color-background-green);
+    --astryx-card-orange-background: var(--astryx-color-background-orange);
+    --astryx-card-pink-background: var(--astryx-color-background-pink);
+    --astryx-card-purple-background: var(--astryx-color-background-purple);
+    --astryx-card-red-background: var(--astryx-color-background-red);
+    --astryx-card-teal-background: var(--astryx-color-background-teal);
+    --astryx-card-yellow-background: var(--astryx-color-background-yellow);
+  }
+}

package/y2k/center.css

@@ -0,0 +1,7 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-center-default-padding: var(--astryx-spacing-0);
+  }
+}

package/y2k/chat.css

@@ -0,0 +1,27 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-chat-foreground: var(--astryx-color-text-primary);
+    /* Docs secondary text measures rgb(71, 71, 71). The shared text-secondary
+       token stays lighter, so chat supporting copy uses this darker stop. */
+    --astryx-chat-foreground-secondary: var(--astryx-color-text-secondary);
+    --astryx-chat-foreground-muted: var(--astryx-color-text-disabled);
+    --astryx-chat-bubble-background: var(--astryx-color-neutral);
+    --astryx-chat-error: var(--astryx-color-error);
+    --astryx-chat-success: var(--astryx-color-success);
+    --astryx-chat-accent: var(--astryx-color-accent);
+    --astryx-chat-unread-color: var(--astryx-color-border-red);
+    --astryx-chat-scroll-background: var(--astryx-color-background-popover);
+    --astryx-chat-scroll-shadow: var(--astryx-shadow-med);
+    --astryx-chat-hover: var(--astryx-color-overlay-hover);
+    --astryx-chat-focus: var(--astryx-focus-outline-color);
+    --astryx-chat-radius: var(--astryx-radius-chat);
+    --astryx-chat-radius-compact: var(--astryx-radius-container);
+    --astryx-chat-radius-group: var(--astryx-radius-inner);
+    --astryx-chat-font-weight-regular: var(--astryx-font-weight-regular);
+    --astryx-chat-font-weight-medium: var(--astryx-font-weight-medium);
+    --astryx-chat-font-weight-semibold: var(--astryx-font-weight-semibold);
+    --astryx-chat-font-weight-bold: var(--astryx-font-weight-bold);
+  }
+}

package/y2k/checkbox.css

@@ -0,0 +1,12 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-checkbox-background: var(--astryx-color-background-surface);
+    --astryx-checkbox-border: var(--astryx-color-border-emphasized);
+    --astryx-checkbox-accent: var(--astryx-color-accent);
+    --astryx-checkbox-on-accent: var(--astryx-color-on-accent);
+    --astryx-checkbox-focus: var(--astryx-color-accent);
+    --astryx-checkbox-disabled-background: var(--astryx-color-background-muted);
+  }
+}

package/y2k/citation.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-citation-foreground: var(--astryx-color-text-secondary);
+    --astryx-citation-foreground-hover: var(--astryx-color-text-primary);
+    --astryx-citation-border: var(--astryx-color-border);
+    --astryx-citation-hover: var(--astryx-color-overlay-hover);
+    --astryx-citation-number-background: var(--astryx-color-accent-muted);
+    --astryx-citation-icon-background: var(--astryx-color-background-surface);
+    --astryx-citation-focus: var(--astryx-focus-outline-color);
+    --astryx-citation-font-weight: var(--astryx-font-weight-regular);
+    --astryx-citation-number-font-weight: var(--astryx-font-weight-semibold);
+  }
+}

package/y2k/code.css

@@ -0,0 +1,33 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+
+    --astryx-code-background: var(--astryx-color-background-muted);
+    --astryx-code-primary-foreground: var(--astryx-color-text-primary);
+    --astryx-code-secondary-foreground: var(--astryx-color-text-secondary);
+
+    /* CodeBlock card: white surface and a hairline border, matching the
+       original block. Inline code keeps the muted chip above. */
+    --astryx-code-block-background: light-dark(#FFF6ED, #190f00);
+    --astryx-code-block-border: var(--astryx-color-border);
+    --astryx-code-block-focus: var(--astryx-color-accent);
+    --astryx-code-block-highlight-background: color-mix(in srgb, var(--astryx-color-accent) 20%, transparent);
+
+    /* Syntax colors from the original CodeBlock theme: keyword and type share
+       the same purple, strings stay green. */
+    --astryx-code-syntax-keyword: light-dark(#615a7a, #aea6ca);
+    --astryx-code-syntax-string: light-dark(#586242, #a5af8b);
+    --astryx-code-syntax-comment: light-dark(#5e5e5e, #ababab);
+    --astryx-code-syntax-number: light-dark(#775843, #c8a48c);
+    --astryx-code-syntax-function: light-dark(#39637d, #87b0cd);
+    --astryx-code-syntax-type: light-dark(#615a7a, #aea6ca);
+    --astryx-code-syntax-variable: light-dark(#5e5e5e, #ababab);
+    --astryx-code-syntax-operator: light-dark(#5e5e5e, #ababab);
+    --astryx-code-syntax-constant: light-dark(#775843, #c8a48c);
+    --astryx-code-syntax-tag: light-dark(#7f5351, #d19f9d);
+    --astryx-code-syntax-attribute: light-dark(#6c5c3e, #bca987);
+    --astryx-code-syntax-property: light-dark(#3c6755, #87b5a1);
+    --astryx-code-syntax-punctuation: light-dark(#5e5e5e, #ababab);
+  }
+}

package/y2k/collapsible.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-collapsible-trigger-foreground: var(--astryx-color-text-primary);
+    --astryx-collapsible-content-foreground: var(--astryx-color-text-primary);
+    --astryx-collapsible-pressed-overlay: var(--astryx-color-overlay-pressed);
+    --astryx-collapsible-focus: var(--astryx-color-accent);
+  }
+}

package/y2k/context-menu.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-context-menu-background: var(--astryx-color-background-card);
+    --astryx-context-menu-foreground: var(--astryx-color-text-primary);
+    --astryx-context-menu-shadow: var(--astryx-shadow-low);
+    --astryx-context-menu-item-foreground: var(--astryx-color-text-primary);
+    --astryx-context-menu-item-focus-background: var(--astryx-color-background-card);
+    --astryx-context-menu-item-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-context-menu-item-description-foreground: var(--astryx-color-text-secondary);
+    --astryx-context-menu-item-error-foreground: var(--astryx-color-text-red);
+    --astryx-context-menu-section-foreground: var(--astryx-color-text-primary);
+  }
+}

package/y2k/dialog.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-dialog-background: var(--astryx-color-background-surface);
+    --astryx-dialog-foreground: var(--astryx-color-text-primary);
+    --astryx-dialog-overlay: var(--astryx-color-overlay);
+    --astryx-dialog-shadow: var(--astryx-shadow-low);
+  }
+}

package/y2k/divider.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-divider-color-subtle: var(--astryx-color-text-secondary);
+    --astryx-divider-color-strong: var(--astryx-color-border);
+    --astryx-divider-label-color: var(--astryx-color-text-secondary);
+  }
+}

package/y2k/dropdown-menu.css

@@ -0,0 +1,14 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-dropdown-menu-background: var(--astryx-color-background-card);
+    --astryx-dropdown-menu-foreground: var(--astryx-color-text-primary);
+    --astryx-dropdown-menu-shadow: var(--astryx-shadow-low);
+    --astryx-dropdown-menu-hover-background: var(--astryx-color-overlay-hover);
+    --astryx-dropdown-menu-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-dropdown-menu-trigger-open-overlay: var(--astryx-color-overlay-pressed);
+    --astryx-dropdown-menu-destructive-foreground: var(--astryx-color-text-primary);
+    --astryx-dropdown-menu-section-heading-foreground: var(--astryx-color-text-primary);
+  }
+}

package/y2k/empty-state.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-empty-state-title-foreground: var(--astryx-color-text-primary);
+    --astryx-empty-state-description-foreground: var(--astryx-color-text-secondary);
+    --astryx-empty-state-text-width: 360px;
+  }
+}

package/y2k/field.css

@@ -0,0 +1 @@
+/* Field component theme tokens can be added here. */

package/y2k/grid.css

@@ -0,0 +1,7 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-grid-default-gap: var(--astryx-spacing-0);
+  }
+}

package/y2k/heading.css

@@ -0,0 +1,35 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-heading-foreground: var(--astryx-color-text-primary);
+    --astryx-heading-level-1-size: var(--astryx-text-heading-1-size);
+    --astryx-heading-level-2-size: var(--astryx-text-heading-2-size);
+    --astryx-heading-level-3-size: var(--astryx-text-heading-3-size);
+    --astryx-heading-level-4-size: var(--astryx-text-heading-4-size);
+    --astryx-heading-level-5-size: var(--astryx-text-heading-5-size);
+    --astryx-heading-level-6-size: var(--astryx-text-heading-6-size);
+    --astryx-heading-display-1-size: var(--astryx-text-display-1-size);
+    --astryx-heading-display-2-size: var(--astryx-text-display-2-size);
+    --astryx-heading-display-3-size: var(--astryx-text-display-3-size);
+    --astryx-heading-display-weight: var(--astryx-text-display-1-weight);
+    --astryx-heading-leading: 1.25;
+
+    --astryx-text-supporting-foreground: var(--astryx-color-text-secondary);
+  }
+}
+
+@layer astryx.components {
+  [data-astryx-theme='y2k'] .astryx-heading {
+    font-family: var(--astryx-font-family-heading);
+  }
+
+  [data-astryx-theme='y2k'] .astryx-text--type-display-1,
+  [data-astryx-theme='y2k'] .astryx-text--type-display-2,
+  [data-astryx-theme='y2k'] .astryx-text--type-display-3,
+  [data-astryx-theme='y2k'] .astryx-heading--type-display-1,
+  [data-astryx-theme='y2k'] .astryx-heading--type-display-2,
+  [data-astryx-theme='y2k'] .astryx-heading--type-display-3 {
+    font-family: 'Crimson Text', Georgia, 'Times New Roman', Times, serif;
+  }
+}

package/y2k/hover-card.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-hover-card-background: var(--astryx-color-background-card);
+    --astryx-hover-card-foreground: var(--astryx-color-text-primary);
+    --astryx-hover-card-shadow: var(--astryx-shadow-low);
+    --astryx-hover-card-indication-color: var(--astryx-color-text-primary);
+  }
+}

package/y2k/icon.css

@@ -0,0 +1,23 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-icon-primary-foreground: var(--astryx-color-text-primary);
+    --astryx-icon-secondary-foreground: var(--astryx-color-text-secondary);
+    --astryx-icon-disabled-foreground: var(--astryx-color-text-disabled);
+    --astryx-icon-accent-foreground: var(--astryx-color-on-accent);
+    --astryx-icon-success-foreground: var(--astryx-color-text-green);
+    --astryx-icon-error-foreground: var(--astryx-color-text-red);
+    --astryx-icon-warning-foreground: var(--astryx-color-text-yellow);
+    --astryx-icon-blue-foreground: var(--astryx-color-icon-blue);
+    --astryx-icon-cyan-foreground: var(--astryx-color-icon-cyan);
+    --astryx-icon-green-foreground: var(--astryx-color-icon-green);
+    --astryx-icon-gray-foreground: var(--astryx-color-icon-gray);
+    --astryx-icon-orange-foreground: var(--astryx-color-icon-orange);
+    --astryx-icon-pink-foreground: var(--astryx-color-icon-pink);
+    --astryx-icon-purple-foreground: var(--astryx-color-icon-purple);
+    --astryx-icon-red-foreground: var(--astryx-color-icon-red);
+    --astryx-icon-teal-foreground: var(--astryx-color-icon-teal);
+    --astryx-icon-yellow-foreground: var(--astryx-color-icon-yellow);
+  }
+}

package/y2k/input.css

@@ -0,0 +1,21 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-input-background: var(--astryx-color-background-surface);
+    --astryx-input-border: var(--astryx-color-border-emphasized);
+    --astryx-input-focus: var(--astryx-color-accent);
+    --astryx-input-height-sm: 28px;
+    --astryx-input-height-md: 32px;
+    --astryx-input-height-lg: 36px;
+    --astryx-input-error: var(--astryx-color-error);
+    --astryx-input-error-foreground: var(--astryx-color-text-red);
+    --astryx-input-error-background: var(--astryx-color-error-muted);
+    --astryx-input-warning: var(--astryx-color-warning);
+    --astryx-input-warning-foreground: var(--astryx-color-text-yellow);
+    --astryx-input-warning-background: var(--astryx-color-warning-muted);
+    --astryx-input-success: var(--astryx-color-success);
+    --astryx-input-success-foreground: var(--astryx-color-text-green);
+    --astryx-input-success-background: var(--astryx-color-success-muted);
+  }
+}

package/y2k/kbd.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-kbd-background: var(--astryx-color-background-muted);
+    --astryx-kbd-foreground: var(--astryx-color-text-secondary);
+    --astryx-kbd-border-color: var(--astryx-color-border-emphasized);
+  }
+}

package/y2k/link.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-link-primary-foreground: var(--astryx-color-text-primary);
+    --astryx-link-secondary-foreground: var(--astryx-color-text-secondary);
+    --astryx-link-accent-foreground: var(--astryx-color-accent);
+  }
+}

package/y2k/list.css

@@ -0,0 +1,12 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-list-item-hover-background: var(--astryx-color-overlay-hover);
+    --astryx-list-item-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-list-item-selected-background: var(--astryx-color-accent-muted);
+    --astryx-list-item-focus: var(--astryx-color-accent);
+    --astryx-list-divider-color: var(--astryx-color-border);
+    --astryx-list-marker-foreground: var(--astryx-color-text-primary);
+  }
+}

package/y2k/mobile-nav.css

@@ -0,0 +1,7 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='y2k'] {
+    --astryx-mobile-nav-width: 320px;
+  }
+}