@astryx-vue/themes 0.1.3 → 0.2.0

package/README.md

@@ -12,4 +12,6 @@ pnpm add @astryx-vue/core @astryx-vue/themes
 import '@astryx-vue/themes/neutral.css'
 ```
 
-That entry loads JetBrains Mono at 400, 500, 600, 700, and 400 italic. Component styles come from `@astryx-vue/core`; import `@astryx-vue/core/styles.css` once if you want the full structural sheet.
+Neutral, Butter, Chocolate, Gothic, Matcha, Stone, and Y2K each have an entry: `@astryx-vue/themes/<name>.css`. Set `data-astryx-theme="<name>"` on the element that should use it. Neutral also applies on `:root`.
+
+Every entry loads JetBrains Mono at 400, 500, 600, 700, and 400 italic. The other themes also load their text faces. Component styles come from `@astryx-vue/core`; import `@astryx-vue/core/styles.css` once if you want the full structural sheet.

package/THIRD_PARTY_NOTICES.md

@@ -14,6 +14,8 @@ The TextInput, CheckboxInput, CheckboxIndicator, Slider, Banner and Field family
 
 When files or substantial portions are copied or adapted, their original copyright and license notices must be kept here or alongside the adapted files.
 
+Butter, Chocolate, Gothic, Matcha, Stone, and Y2K token values are adapted from the public `@astryxdesign/theme-*` packages at version 0.7.0 (`theme.css` and `fonts.css`), under the same MIT license. The Vue package renames those custom properties with an `--astryx-` prefix and keeps JetBrains Mono on `@fontsource/jetbrains-mono`.
+
 No Meta trademarks, logos, or endorsement are granted by the Astryx software license.
 
 ## Astryx license text

package/butter/alert-dialog.css

@@ -0,0 +1,8 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --astryx-alert-dialog-title-foreground: var(--astryx-color-text-primary);
+    --astryx-alert-dialog-description-foreground: var(--astryx-color-text-secondary);
+  }
+}

package/butter/avatar-group.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --astryx-avatar-group-border-color: var(--astryx-color-border);
+    --astryx-avatar-group-overflow-background: var(--astryx-color-background-surface);
+    --astryx-avatar-group-overflow-foreground: var(--astryx-color-text-primary);
+  }
+}

package/butter/avatar.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --astryx-avatar-fallback-background: var(--astryx-color-background-surface);
+    --astryx-avatar-fallback-foreground: var(--astryx-color-text-primary);
+    --astryx-avatar-status-dot-border-color: var(--astryx-color-border);
+
+    --astryx-avatar-status-dot-neutral-background: var(--astryx-color-background-surface);
+    --astryx-avatar-status-dot-info-background: var(--astryx-color-background-blue);
+    --astryx-avatar-status-dot-success-background: var(--astryx-color-success-muted);
+    --astryx-avatar-status-dot-warning-background: var(--astryx-color-warning-muted);
+    --astryx-avatar-status-dot-error-background: var(--astryx-color-error-muted);
+  }
+}

package/butter/badge.css

@@ -0,0 +1,35 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --astryx-badge-neutral-background: #ffee7b;
+    --astryx-badge-neutral-foreground: #225BFF;
+    --astryx-badge-info-background: #4883fd;
+    --astryx-badge-info-foreground: #ffffff;
+    --astryx-badge-success-background: #91D143;
+    --astryx-badge-success-foreground: #1d1c11;
+    --astryx-badge-warning-background: #ffc502;
+    --astryx-badge-warning-foreground: #1d1c11;
+    --astryx-badge-error-background: #fc473b;
+    --astryx-badge-error-foreground: #ffffff;
+
+    --astryx-badge-blue-background: var(--astryx-color-background-blue);
+    --astryx-badge-blue-foreground: var(--astryx-color-text-blue);
+    --astryx-badge-cyan-background: var(--astryx-color-background-cyan);
+    --astryx-badge-cyan-foreground: var(--astryx-color-text-cyan);
+    --astryx-badge-green-background: var(--astryx-color-background-green);
+    --astryx-badge-green-foreground: var(--astryx-color-text-green);
+    --astryx-badge-orange-background: var(--astryx-color-background-orange);
+    --astryx-badge-orange-foreground: var(--astryx-color-text-orange);
+    --astryx-badge-pink-background: var(--astryx-color-background-pink);
+    --astryx-badge-pink-foreground: var(--astryx-color-text-pink);
+    --astryx-badge-purple-background: var(--astryx-color-background-purple);
+    --astryx-badge-purple-foreground: var(--astryx-color-text-purple);
+    --astryx-badge-red-background: var(--astryx-color-background-red);
+    --astryx-badge-red-foreground: var(--astryx-color-text-red);
+    --astryx-badge-teal-background: var(--astryx-color-background-teal);
+    --astryx-badge-teal-foreground: var(--astryx-color-text-teal);
+    --astryx-badge-yellow-background: var(--astryx-color-background-yellow);
+    --astryx-badge-yellow-foreground: var(--astryx-color-text-yellow);
+  }
+}

package/butter/banner.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --astryx-banner-info-background: #4883fd;
+    --astryx-banner-info-foreground: #ffffff;
+    --astryx-banner-error-background: #fc473b;
+    --astryx-banner-error-foreground: #ffffff;
+    --astryx-banner-warning-background: #ffc502;
+    --astryx-banner-warning-foreground: #1d1c11;
+    --astryx-banner-success-background: #91D143;
+    --astryx-banner-success-foreground: #1d1c11;
+    --astryx-banner-content-background: var(--astryx-color-background-surface);
+    --astryx-banner-border: var(--astryx-color-border);
+  }
+}

package/butter/base.css

@@ -0,0 +1,250 @@
+/**
+ * Butter semantic tokens.
+ *
+ * Golden buttery surfaces and blue accents. Outfit for text, Sarina for display. Values follow @astryxdesign/theme-butter 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=Outfit:wght@400;500;600;700&family=Sarina&display=swap');
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    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(#225BFF, #FDEE8C);
+    --astryx-color-accent-muted: light-dark(#225BFF33, #FDEE8C40);
+    --astryx-color-on-accent: light-dark(#ffffff, #1d1c11);
+    --astryx-color-neutral: light-dark(#1d1c110F, #f3f2e21A);
+    --astryx-color-background-surface: light-dark(#FFFFFF, #2E2117);
+    --astryx-color-background-body: light-dark(#FDFBE4, #261A13);
+    --astryx-color-overlay: light-dark(#1d1c1180, #261A13cc);
+    --astryx-color-overlay-hover: light-dark(#1d1c110D, #f3f2e20D);
+    --astryx-color-overlay-pressed: light-dark(#1d1c111A, #f3f2e21A);
+    --astryx-color-background-muted: light-dark(#f3f2e2, #3A2A1F);
+
+    --astryx-color-text-primary: light-dark(#1d1c11, #f3f2e2);
+    --astryx-color-text-secondary: light-dark(#605f52, #adac9e);
+    --astryx-color-text-disabled: light-dark(#adac9e, #605f52);
+    --astryx-color-text-accent: light-dark(#225BFF, #FDEE8C);
+    --astryx-color-on-dark: #ffffff;
+    --astryx-color-on-light: #1d1c11;
+
+    --astryx-color-icon-accent: light-dark(#225BFF, #FDEE8C);
+    --astryx-color-icon-primary: light-dark(#1d1c11, #f3f2e2);
+    --astryx-color-icon-secondary: light-dark(#605f52, #adac9e);
+    --astryx-color-icon-disabled: light-dark(#adac9e, #605f52);
+
+    --astryx-color-background-card: light-dark(#FFFFFF, #3A2A1F);
+    --astryx-color-background-popover: light-dark(#FFFFFF, #3A2A1F);
+    --astryx-color-background-inverted: light-dark(#1d1c11, #FDFBE4);
+    --astryx-color-background-error-inverted: light-dark(#aa071e, #e3193b);
+
+    --astryx-color-success: light-dark(#004700, #99d94b);
+    --astryx-color-success-muted: light-dark(#00470033, #99d94b40);
+    --astryx-color-on-success: light-dark(#ccff88, #0b2e00);
+    --astryx-color-error: light-dark(#771210, #ffb4a6);
+    --astryx-color-error-muted: light-dark(#77121033, #ffb4a640);
+    --astryx-color-on-error: light-dark(#ffe3de, #600000);
+    --astryx-color-warning: light-dark(#543700, #f7be00);
+    --astryx-color-warning-muted: light-dark(#54370033, #f7be0040);
+    --astryx-color-on-warning: light-dark(#ffeec3, #3b2200);
+
+    --astryx-color-border: light-dark(#e5e3d4, #f3f2e21A);
+    --astryx-color-border-emphasized: light-dark(#C7C4B2, #939184);
+
+    --astryx-color-skeleton: light-dark(#e5e3d4, #49473b);
+    --astryx-color-track: light-dark(#ccd3db, #5a5e66);
+    --astryx-color-shadow: light-dark(#1d1c111A, #0000004D);
+    --astryx-color-tint-hover: light-dark(black, white);
+
+    --astryx-color-background-blue: light-dark(#dbe1ff, #dbe1ff);
+    --astryx-color-border-blue: light-dark(#bdc5eb, #bdc5eb);
+    --astryx-color-icon-blue: light-dark(#203a6c, #203a6c);
+    --astryx-color-text-blue: light-dark(#203a6c, #203a6c);
+
+    --astryx-color-background-cyan: light-dark(#a9eff0, #a9eff0);
+    --astryx-color-border-cyan: light-dark(#8dd2d3, #8dd2d3);
+    --astryx-color-icon-cyan: light-dark(#004649, #004649);
+    --astryx-color-text-cyan: light-dark(#004649, #004649);
+
+    --astryx-color-background-gray: light-dark(#f0edd4, #f0edd4);
+    --astryx-color-border-gray: light-dark(#d6d3b8, #d6d3b8);
+    --astryx-color-icon-gray: light-dark(#4a4732, #4a4732);
+    --astryx-color-text-gray: light-dark(#4a4732, #4a4732);
+
+    --astryx-color-background-green: light-dark(#c1efb8, #c1efb8);
+    --astryx-color-border-green: light-dark(#a5d29d, #a5d29d);
+    --astryx-color-icon-green: light-dark(#004800, #004800);
+    --astryx-color-text-green: light-dark(#004800, #004800);
+
+    --astryx-color-background-orange: light-dark(#ffdcb6, #ffdcb6);
+    --astryx-color-border-orange: light-dark(#f2bd81, #f2bd81);
+    --astryx-color-icon-orange: light-dark(#622e00, #622e00);
+    --astryx-color-text-orange: light-dark(#622e00, #622e00);
+
+    --astryx-color-background-pink: light-dark(#ffd5fb, #ffd5fb);
+    --astryx-color-border-pink: light-dark(#f0b3e8, #f0b3e8);
+    --astryx-color-icon-pink: light-dark(#6c0a68, #6c0a68);
+    --astryx-color-text-pink: light-dark(#6c0a68, #6c0a68);
+
+    --astryx-color-background-purple: light-dark(#f2daff, #f2daff);
+    --astryx-color-border-purple: light-dark(#ddb9f6, #ddb9f6);
+    --astryx-color-icon-purple: light-dark(#52237b, #52237b);
+    --astryx-color-text-purple: light-dark(#52237b, #52237b);
+
+    --astryx-color-background-red: light-dark(#ffdad3, #ffdad3);
+    --astryx-color-border-red: light-dark(#f4b8ae, #f4b8ae);
+    --astryx-color-icon-red: light-dark(#6d211c, #6d211c);
+    --astryx-color-text-red: light-dark(#6d211c, #6d211c);
+
+    --astryx-color-background-teal: light-dark(#b0f0d7, #b0f0d7);
+    --astryx-color-border-teal: light-dark(#94d3bb, #94d3bb);
+    --astryx-color-icon-teal: light-dark(#00482d, #00482d);
+    --astryx-color-text-teal: light-dark(#00482d, #00482d);
+
+    --astryx-color-background-yellow: light-dark(#feee7b, #feee7b);
+    --astryx-color-border-yellow: light-dark(#d6c957, #d6c957);
+    --astryx-color-icon-yellow: light-dark(#413e00, #413e00);
+    --astryx-color-text-yellow: light-dark(#413e00, #413e00);
+
+    --astryx-spacing-0: 0;
+    --astryx-spacing-0-5: 2px;
+    --astryx-spacing-1: 4px;
+    --astryx-spacing-1-5: 6px;
+    --astryx-spacing-2: 8px;
+    --astryx-spacing-3: 12px;
+    --astryx-spacing-4: 16px;
+    --astryx-spacing-5: 20px;
+    --astryx-spacing-6: 24px;
+    --astryx-spacing-7: 28px;
+    --astryx-spacing-8: 32px;
+    --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: 0.375rem;
+    --astryx-radius-element: 0.5rem;
+    --astryx-radius-container: 0.75rem;
+    --astryx-radius-page: 1.5rem;
+    --astryx-radius-chat: 28px;
+    --astryx-radius-full: 9999px;
+
+    --astryx-shadow-low: 0 2px 4px #1d1c110D, 0 4px 8px #1d1c111A;
+    --astryx-shadow-med: 0 2px 4px #1d1c110D, 0 4px 12px #1d1c111A;
+    --astryx-shadow-high: 0 4px 6px #1d1c111A, 0 12px 24px #1d1c1126;
+    --astryx-shadow-inset-hover: inset 0px 0px 0px 2px #79786a30;
+    --astryx-shadow-inset-selected: inset 0px 0px 0px 2px #79786a50;
+    --astryx-shadow-inset-success: inset 0px 0px 0px 2px #00470030;
+    --astryx-shadow-inset-warning: inset 0px 0px 0px 2px #54370030;
+    --astryx-shadow-inset-error: inset 0px 0px 0px 2px #77121030;
+
+    --astryx-duration-fast-min: 95ms;
+    --astryx-duration-fast: 125ms;
+    --astryx-duration-fast-max: 165ms;
+    --astryx-duration-medium-min: 225ms;
+    --astryx-duration-medium: 300ms;
+    --astryx-duration-medium-max: 400ms;
+    --astryx-duration-slow-min: 525ms;
+    --astryx-duration-slow: 700ms;
+    --astryx-duration-slow-max: 935ms;
+
+    --astryx-ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
+
+    --astryx-font-family-body: Outfit, -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: Outfit, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+    --astryx-font-size-4xs: 0.3125rem;
+    --astryx-font-size-3xs: 0.375rem;
+    --astryx-font-size-2xs: 0.4375rem;
+    --astryx-font-size-xs: 0.5625rem;
+    --astryx-font-size-sm: 0.6875rem;
+    --astryx-font-size-base: 0.875rem;
+    --astryx-font-size-lg: 1.125rem;
+    --astryx-font-size-xl: 1.375rem;
+    --astryx-font-size-2xl: 1.6875rem;
+    --astryx-font-size-3xl: 2.125rem;
+    --astryx-font-size-4xl: 2.6875rem;
+    --astryx-font-size-5xl: 3.3125rem;
+
+    --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.3333;
+    --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.4545;
+    --astryx-text-heading-3-size: var(--astryx-font-size-lg);
+    --astryx-text-heading-3-weight: var(--astryx-font-weight-bold);
+    --astryx-text-heading-3-leading: 1.5556;
+    --astryx-text-heading-4-size: var(--astryx-font-size-base);
+    --astryx-text-heading-4-weight: var(--astryx-font-weight-bold);
+    --astryx-text-heading-4-leading: 1.4286;
+    --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.4545;
+    --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.7778;
+
+    --astryx-text-body-size: var(--astryx-font-size-base);
+    --astryx-text-body-weight: var(--astryx-font-weight-normal);
+    --astryx-text-body-leading: 1.4286;
+    --astryx-text-large-size: var(--astryx-font-size-lg);
+    --astryx-text-large-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-large-leading: 1.5556;
+    --astryx-text-label-size: var(--astryx-font-size-base);
+    --astryx-text-label-weight: var(--astryx-font-weight-medium);
+    --astryx-text-label-leading: 1.4286;
+    --astryx-text-code-size: var(--astryx-font-size-base);
+    --astryx-text-code-weight: var(--astryx-font-weight-normal);
+    --astryx-text-code-leading: 1.4286;
+    --astryx-text-supporting-size: 12px;
+    --astryx-text-supporting-weight: var(--astryx-font-weight-normal);
+    --astryx-text-supporting-leading: 1.4545;
+
+    --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.283;
+    --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.2093;
+    --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.2941;
+  }
+
+  [data-astryx-theme='butter'][data-astryx-color-mode='light'] {
+    color-scheme: light;
+  }
+
+  [data-astryx-theme='butter'][data-astryx-color-mode='dark'] {
+    color-scheme: dark;
+  }
+}

package/butter/bottom-sheet.css

@@ -0,0 +1,13 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/button.css

@@ -0,0 +1,30 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --astryx-button-primary-background: var(--astryx-color-accent);
+    --astryx-button-primary-foreground: var(--astryx-color-on-accent);
+    --astryx-button-secondary-background: transparent;
+    --astryx-button-secondary-foreground: light-dark(#225BFF, #FDEE8C);
+    --astryx-button-ghost-background: transparent;
+    --astryx-button-ghost-foreground: light-dark(#225BFF, #FDEE8C);
+    --astryx-button-destructive-background: light-dark(#ffdad3, #f4b8ae);
+    --astryx-button-destructive-foreground: light-dark(#550000, #6d211c);
+    --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='butter'] .astryx-button[data-variant='secondary'] {
+    border: 1.5px solid light-dark(#225BFF, #FDEE8C);
+  }
+}

package/butter/card.css

@@ -0,0 +1,23 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/center.css

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

package/butter/chat.css

@@ -0,0 +1,27 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/checkbox.css

@@ -0,0 +1,12 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/citation.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/code.css

@@ -0,0 +1,33 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+
+    --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(#FDFBE4, #131107);
+    --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(#52237b, #ddb9f6);
+    --astryx-code-syntax-string: light-dark(#004800, #a5d29d);
+    --astryx-code-syntax-comment: light-dark(#605f52, #adac9e);
+    --astryx-code-syntax-number: light-dark(#622e00, #f2bd81);
+    --astryx-code-syntax-function: light-dark(#203a6c, #bdc5eb);
+    --astryx-code-syntax-type: light-dark(#52237b, #ddb9f6);
+    --astryx-code-syntax-variable: light-dark(#605f52, #adac9e);
+    --astryx-code-syntax-operator: light-dark(#605f52, #adac9e);
+    --astryx-code-syntax-constant: light-dark(#622e00, #f2bd81);
+    --astryx-code-syntax-tag: light-dark(#6d211c, #f4b8ae);
+    --astryx-code-syntax-attribute: light-dark(#413e00, #d6c957);
+    --astryx-code-syntax-property: light-dark(#00482d, #94d3bb);
+    --astryx-code-syntax-punctuation: light-dark(#605f52, #adac9e);
+  }
+}

package/butter/collapsible.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/context-menu.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/dialog.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/divider.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/dropdown-menu.css

@@ -0,0 +1,14 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/empty-state.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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/butter/field.css

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

package/butter/grid.css

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

package/butter/heading.css

@@ -0,0 +1,35 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='butter'] {
+    --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='butter'] .astryx-heading {
+    font-family: var(--astryx-font-family-heading);
+  }
+
+  [data-astryx-theme='butter'] .astryx-text--type-display-1,
+  [data-astryx-theme='butter'] .astryx-text--type-display-2,
+  [data-astryx-theme='butter'] .astryx-text--type-display-3,
+  [data-astryx-theme='butter'] .astryx-heading--type-display-1,
+  [data-astryx-theme='butter'] .astryx-heading--type-display-2,
+  [data-astryx-theme='butter'] .astryx-heading--type-display-3 {
+    font-family: Sarina, 'Brush Script MT', 'Snell Roundhand', cursive;
+  }
+}