@astryx-vue/themes 0.1.1 → 0.2.0

package/matcha/more-menu.css

@@ -0,0 +1,16 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-more-menu-background: var(--astryx-color-background-card);
+    --astryx-more-menu-foreground: var(--astryx-color-text-primary);
+    --astryx-more-menu-description-foreground: var(--astryx-color-text-secondary);
+    --astryx-more-menu-heading-foreground: var(--astryx-color-text-primary);
+    --astryx-more-menu-destructive-foreground: var(--astryx-color-text-primary);
+    --astryx-more-menu-item-hover-background: var(--astryx-color-overlay-hover);
+    --astryx-more-menu-item-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-more-menu-scrim: var(--astryx-color-overlay);
+    --astryx-more-menu-trigger-open-overlay: var(--astryx-color-overlay-pressed);
+    --astryx-more-menu-shadow: var(--astryx-shadow-low);
+  }
+}

package/matcha/nav-menu.css

@@ -0,0 +1,7 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-nav-menu-z: 1000;
+  }
+}

package/matcha/overlay.css

@@ -0,0 +1,8 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-overlay-scrim-background: var(--astryx-color-overlay);
+    --astryx-overlay-scrim-light-background: var(--astryx-color-overlay);
+  }
+}

package/matcha/popover.css

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

package/matcha/progress-bar.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-progress-bar-track-height: 8px;
+    --astryx-progress-bar-track-height-sm: 4px;
+    --astryx-progress-bar-track-height-lg: 12px;
+    --astryx-progress-bar-track-background: var(--astryx-color-background-muted);
+    --astryx-progress-bar-fill-background: var(--astryx-color-accent);
+    --astryx-progress-bar-success-fill: var(--astryx-color-success);
+    --astryx-progress-bar-warning-fill: var(--astryx-color-warning);
+    --astryx-progress-bar-error-fill: var(--astryx-color-error);
+    --astryx-progress-bar-info-fill: var(--astryx-color-background-blue);
+  }
+}

package/matcha/radio.css

@@ -0,0 +1,8 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astyx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-radio-size: 18px;
+    --astryx-radio-radius: 999px;
+  }
+}

package/matcha/segmented-control.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-segmented-control-background: var(--astryx-color-background-muted);
+    --astryx-segmented-control-focus: var(--astryx-color-accent);
+    --astryx-segmented-control-item-foreground: var(--astryx-color-text-primary);
+    --astryx-segmented-control-item-hover-background: var(--astryx-color-overlay-hover);
+    --astryx-segmented-control-item-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-segmented-control-item-selected-foreground: var(--astryx-color-text-primary);
+    --astryx-segmented-control-item-selected-background: var(--astryx-color-accent-muted);
+    --astryx-segmented-control-item-selected-shadow: var(--astryx-shadow-low);
+    --astryx-segmented-control-item-disabled-foreground: var(--astryx-color-text-disabled);
+  }
+}

package/matcha/side-nav.css

@@ -0,0 +1,8 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-side-nav-width: 260px;
+    --astryx-side-nav-collapsed-width: 48px;
+  }
+}

package/matcha/skeleton.css

@@ -0,0 +1,7 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+
+  }
+}

package/matcha/slider.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-slider-track: var(--astryx-color-track);
+    --astryx-slider-accent: var(--astryx-color-accent);
+    --astryx-slider-focus: var(--astryx-color-accent);
+    --astryx-slider-height: 160px;
+  }
+}

package/matcha/spinner.css

@@ -0,0 +1,21 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-spinner-diameter-sm: 10px;
+    --astryx-spinner-diameter-md: 14px;
+    --astryx-spinner-diameter-lg: 18px;
+    --astryx-spinner-diameter-xl: 28px;
+    --astryx-spinner-stroke-width-sm: 2px;
+    --astryx-spinner-stroke-width-md: 3px;
+    --astryx-spinner-stroke-width-lg: 3px;
+    --astryx-spinner-stroke-width-xl: 4px;
+    --astryx-spinner-arc-fraction: 0.375;
+    --astryx-spinner-group-gap: 8px;
+    --astryx-spinner-label-color: var(--astryx-color-text-secondary);
+    --astryx-spinner-color-accent: var(--astryx-color-accent);
+    --astryx-spinner-color-subtle: var(--astryx-color-text-secondary);
+    --astryx-spinner-color-track: var(--astryx-color-track);
+    --astryx-spinner-color-on-dark: var(--astryx-color-on-dark);
+  }
+}

package/matcha/status-dot.css

@@ -0,0 +1,11 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-status-dot-neutral-background: var(--astryx-color-background-surface);
+    --astryx-status-dot-info-background: var(--astryx-color-background-blue);
+    --astryx-status-dot-success-background: var(--astryx-color-success-muted);
+    --astryx-status-dot-warning-background: var(--astryx-color-warning-muted);
+    --astryx-status-dot-error-background: var(--astryx-color-error-muted);
+  }
+}

package/matcha/switch.css

@@ -0,0 +1,29 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-switch-track-width: 40px;
+    --astryx-switch-track-height: 24px;
+    --astryx-switch-track-width-sm: 32px;
+    --astryx-switch-track-height-sm: 20px;
+    --astryx-switch-track-width-lg: 52px;
+    --astryx-switch-track-height-lg: 28px;
+    --astryx-switch-track-padding: 4px;
+    --astryx-switch-track-padding-sm: 2px;
+    --astryx-switch-track-padding-lg: 4px;
+    --astryx-switch-thumb-size: 16px;
+    --astryx-switch-thumb-size-on: 20px;
+    --astryx-switch-thumb-size-sm: 14px;
+    --astryx-switch-thumb-size-on-sm: 16px;
+    --astryx-switch-thumb-size-lg: 20px;
+    --astryx-switch-thumb-size-on-lg: 24px;
+    --astryx-switch-thumb-travel: 14px;
+    --astryx-switch-thumb-travel-sm: 12px;
+    --astryx-switch-thumb-travel-lg: 22px;
+    --astryx-switch-track-radius: 999px;
+    --astryx-switch-thumb-radius: 999px;
+    --astryx-switch-track-off: var(--astryx-color-background-muted);
+    --astryx-switch-track-on: var(--astryx-color-accent);
+    --astryx-switch-thumb: var(--astryx-color-background-surface);
+  }
+}

package/matcha/text-area.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-text-area-min-height-sm: 64px;
+    --astryx-text-area-min-height-md: 80px;
+    --astryx-text-area-min-height-lg: 112px;
+  }
+}

package/matcha/text.css

@@ -0,0 +1,31 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-text-foreground: var(--astryx-color-text-primary);
+
+    --astryx-text-supporting-foreground: var(--astryx-color-text-secondary);
+
+    --astryx-text-display-weight: var(--astryx-text-display-1-weight);
+    --astryx-text-sm-size: var(--astryx-font-size-sm);
+    --astryx-text-md-size: var(--astryx-font-size-base);
+    --astryx-text-lg-size: var(--astryx-font-size-lg);
+    --astryx-text-xl-size: var(--astryx-font-size-xl);
+
+  }
+}
+
+@layer astryx.components {
+  [data-astryx-theme='matcha'] .astryx-heading {
+    font-family: var(--astryx-font-family-heading);
+  }
+
+  [data-astryx-theme='matcha'] .astryx-text--type-display-1,
+  [data-astryx-theme='matcha'] .astryx-text--type-display-2,
+  [data-astryx-theme='matcha'] .astryx-text--type-display-3,
+  [data-astryx-theme='matcha'] .astryx-heading--type-display-1,
+  [data-astryx-theme='matcha'] .astryx-heading--type-display-2,
+  [data-astryx-theme='matcha'] .astryx-heading--type-display-3 {
+    font-family: var(--astryx-font-family-heading);
+  }
+}

package/matcha/toast.css

@@ -0,0 +1,12 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-toast-info-background: var(--astryx-color-text-primary);
+    --astryx-toast-info-foreground: var(--astryx-color-background-body);
+    --astryx-toast-success-background: var(--astryx-color-success-muted);
+    --astryx-toast-warning-background: var(--astryx-color-warning-muted);
+    --astryx-toast-error-background: var(--astryx-color-error-muted);
+    --astryx-toast-type-foreground: var(--astryx-color-background-body);
+  }
+}

package/matcha/toggle-button.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-toggle-button-pressed-background: var(--astryx-color-overlay-pressed);
+    --astryx-toggle-button-pressed-font-weight: 600;
+    --astryx-toggle-button-group-gap: 4px;
+  }
+}

package/matcha/token.css

@@ -0,0 +1,28 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-token-default-background: var(--astryx-badge-neutral-background);
+    --astryx-token-default-foreground: var(--astryx-badge-neutral-foreground);
+    --astryx-token-gray-background: var(--astryx-badge-neutral-background);
+    --astryx-token-gray-foreground: var(--astryx-badge-neutral-foreground);
+    --astryx-token-blue-background: var(--astryx-badge-blue-background);
+    --astryx-token-blue-foreground: var(--astryx-badge-blue-foreground);
+    --astryx-token-cyan-background: var(--astryx-badge-cyan-background);
+    --astryx-token-cyan-foreground: var(--astryx-badge-cyan-foreground);
+    --astryx-token-green-background: var(--astryx-badge-green-background);
+    --astryx-token-green-foreground: var(--astryx-badge-green-foreground);
+    --astryx-token-orange-background: var(--astryx-badge-orange-background);
+    --astryx-token-orange-foreground: var(--astryx-badge-orange-foreground);
+    --astryx-token-pink-background: var(--astryx-badge-pink-background);
+    --astryx-token-pink-foreground: var(--astryx-badge-pink-foreground);
+    --astryx-token-purple-background: var(--astryx-badge-purple-background);
+    --astryx-token-purple-foreground: var(--astryx-badge-purple-foreground);
+    --astryx-token-red-background: var(--astryx-badge-red-background);
+    --astryx-token-red-foreground: var(--astryx-badge-red-foreground);
+    --astryx-token-teal-background: var(--astryx-badge-teal-background);
+    --astryx-token-teal-foreground: var(--astryx-badge-teal-foreground);
+    --astryx-token-yellow-background: var(--astryx-badge-yellow-background);
+    --astryx-token-yellow-foreground: var(--astryx-badge-yellow-foreground);
+  }
+}

package/matcha/tooltip.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='matcha'] {
+    --astryx-tooltip-background: var(--astryx-color-text-primary);
+    --astryx-tooltip-foreground: var(--astryx-color-background-body);
+    --astryx-tooltip-indication-color: var(--astryx-color-text-primary);
+  }
+}

package/matcha.css

@@ -0,0 +1,51 @@
+/* 这个文件由 `pnpm sync` 生成，不要手改。 */
+@import './fonts.css';
+@import './matcha/alert-dialog.css';
+@import './matcha/avatar.css';
+@import './matcha/avatar-group.css';
+@import './matcha/badge.css';
+@import './matcha/banner.css';
+@import './matcha/base.css';
+@import './matcha/bottom-sheet.css';
+@import './matcha/button.css';
+@import './matcha/card.css';
+@import './matcha/center.css';
+@import './matcha/chat.css';
+@import './matcha/checkbox.css';
+@import './matcha/citation.css';
+@import './matcha/code.css';
+@import './matcha/collapsible.css';
+@import './matcha/context-menu.css';
+@import './matcha/dialog.css';
+@import './matcha/divider.css';
+@import './matcha/dropdown-menu.css';
+@import './matcha/empty-state.css';
+@import './matcha/field.css';
+@import './matcha/grid.css';
+@import './matcha/heading.css';
+@import './matcha/hover-card.css';
+@import './matcha/icon.css';
+@import './matcha/input.css';
+@import './matcha/kbd.css';
+@import './matcha/link.css';
+@import './matcha/list.css';
+@import './matcha/mobile-nav.css';
+@import './matcha/more-menu.css';
+@import './matcha/nav-menu.css';
+@import './matcha/overlay.css';
+@import './matcha/popover.css';
+@import './matcha/progress-bar.css';
+@import './matcha/radio.css';
+@import './matcha/segmented-control.css';
+@import './matcha/side-nav.css';
+@import './matcha/skeleton.css';
+@import './matcha/slider.css';
+@import './matcha/spinner.css';
+@import './matcha/status-dot.css';
+@import './matcha/switch.css';
+@import './matcha/text.css';
+@import './matcha/text-area.css';
+@import './matcha/toast.css';
+@import './matcha/toggle-button.css';
+@import './matcha/token.css';
+@import './matcha/tooltip.css';

package/neutral/button.css

@@ -3,17 +3,17 @@
 @layer astryx.tokens {
   :root,
   [data-astryx-theme='neutral'] {
-    --astryx-button-primary-background: light-dark(#262626, #ebebeb);
-    --astryx-button-primary-foreground: light-dark(#ffffff, #171717);
-    --astryx-button-secondary-background: light-dark(#0000000f, #ffffff1a);
-    --astryx-button-secondary-foreground: light-dark(#171717, #fafafa);
+    --astryx-button-primary-background: var(--astryx-color-accent);
+    --astryx-button-primary-foreground: var(--astryx-color-on-accent);
+    --astryx-button-secondary-background: var(--astryx-color-neutral);
+    --astryx-button-secondary-foreground: var(--astryx-color-text-primary);
     --astryx-button-ghost-background: transparent;
-    --astryx-button-ghost-foreground: light-dark(#171717, #fafafa);
+    --astryx-button-ghost-foreground: var(--astryx-color-text-primary);
     --astryx-button-destructive-background: light-dark(#facecb, #ff9e973d);
     --astryx-button-destructive-foreground: light-dark(#a50c25, #ffc6c1);
     --astryx-button-hover-overlay: light-dark(#0000000d, #ffffff0d);
     --astryx-button-pressed-overlay: light-dark(#0000001a, #ffffff1a);
-    --astryx-button-focus: light-dark(#262626, #ebebeb);
+    --astryx-button-focus: var(--astryx-color-accent);
     --astryx-button-separator: light-dark(#00000014, #ffffff1a);
     --astryx-button-solid-separator: light-dark(#ffffff, #171717);
     --astryx-button-tooltip-background: light-dark(#171717, #262626);

package/neutral/card.css

@@ -4,7 +4,7 @@
   :root,
   [data-astryx-theme='neutral'] {
     --astryx-card-background: light-dark(#fff, #1f1f22);
-    --astryx-card-muted-background: light-dark(#f5f5f5, #171717);
+    --astryx-card-muted-background: var(--astryx-color-background-muted);
     --astryx-card-border: light-dark(#00000014, #ffffff1a);
     --astryx-card-shadow-low:
       0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),

package/neutral/heading.css

@@ -3,11 +3,11 @@
 @layer astryx.tokens {
   :root,
   [data-astryx-theme='neutral'] {
-    --astryx-heading-foreground: light-dark(#171717, #fafafa);
+    --astryx-heading-foreground: var(--astryx-color-text-primary);
     --astryx-heading-level-1-size: 2rem;
     --astryx-heading-level-2-size: 1.75rem;
     --astryx-heading-level-3-size: 1.5rem;
-    --astryx-heading-level-4-size: 1.25rem;
+    --astryx-heading-level-4-size: var(--astryx-font-size-base, 0.875rem);
     --astryx-heading-level-5-size: 1.125rem;
     --astryx-heading-level-6-size: 1rem;
     --astryx-heading-display-1-size: 3rem;
@@ -19,6 +19,6 @@
     --astryx-text-large-leading: 1.5;
     --astryx-text-label-size: 0.875rem;
     --astryx-text-label-leading: 1.25;
-    --astryx-text-supporting-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-text-supporting-foreground: var(--astryx-color-text-secondary);
   }
 }

package/neutral/icon.css

@@ -3,7 +3,7 @@
 @layer astryx.tokens {
   :root,
   [data-astryx-theme='neutral'] {
-    --astryx-icon-primary-foreground: light-dark(#171717, #fafafa);
+    --astryx-icon-primary-foreground: var(--astryx-color-icon-primary);
     --astryx-icon-secondary-foreground: light-dark(#6a6a6a, #9e9e9e);
     --astryx-icon-disabled-foreground: light-dark(#919191, #525252);
     --astryx-icon-accent-foreground: light-dark(#0074e2, #6d9cfe);

package/neutral/text.css

@@ -3,14 +3,14 @@
 @layer astryx.tokens {
   :root,
   [data-astryx-theme='neutral'] {
-    --astryx-text-foreground: light-dark(#171717, #fafafa);
+    --astryx-text-foreground: var(--astryx-color-text-primary);
     --astryx-text-body-size: 0.875rem;
     --astryx-text-body-leading: 1.4286;
     --astryx-text-large-size: 1rem;
     --astryx-text-large-leading: 1.5;
     --astryx-text-label-size: 0.875rem;
     --astryx-text-label-leading: 1.25;
-    --astryx-text-supporting-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-text-supporting-foreground: var(--astryx-color-text-secondary);
     --astryx-text-supporting-size: 0.75rem;
     --astryx-text-supporting-leading: 1.6667;
     --astryx-text-display-1-size: 3rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astryx-vue/themes",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Themes for the unofficial astryx-vue community project.",
   "author": "ShenQingchuan",
   "license": "MIT",
@@ -37,10 +37,22 @@
   "files": [
     "README.md",
     "THIRD_PARTY_NOTICES.md",
+    "butter",
+    "butter.css",
+    "chocolate",
+    "chocolate.css",
     "css.d.ts",
     "fonts.css",
+    "gothic",
+    "gothic.css",
+    "matcha",
+    "matcha.css",
     "neutral",
-    "neutral.css"
+    "neutral.css",
+    "stone",
+    "stone.css",
+    "y2k",
+    "y2k.css"
   ],
   "dependencies": {
     "@fontsource/jetbrains-mono": "5.3.0"

package/stone/alert-dialog.css

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

package/stone/avatar-group.css

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

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

@@ -0,0 +1,35 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  [data-astryx-theme='stone'] {
+    --astryx-badge-neutral-background: var(--astryx-color-background-gray);
+    --astryx-badge-neutral-foreground: var(--astryx-color-text-gray);
+    --astryx-badge-info-background: var(--astryx-color-background-blue);
+    --astryx-badge-info-foreground: var(--astryx-color-text-blue);
+    --astryx-badge-success-background: var(--astryx-color-background-green);
+    --astryx-badge-success-foreground: var(--astryx-color-text-green);
+    --astryx-badge-warning-background: var(--astryx-color-background-yellow);
+    --astryx-badge-warning-foreground: var(--astryx-color-text-yellow);
+    --astryx-badge-error-background: var(--astryx-color-background-red);
+    --astryx-badge-error-foreground: var(--astryx-color-text-red);
+
+    --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/stone/banner.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+@layer astryx.tokens {
+  [data-astryx-theme='stone'] {
+    --astryx-banner-info-background: var(--astryx-color-background-blue);
+    --astryx-banner-info-foreground: var(--astryx-color-text-blue);
+    --astryx-banner-error-background: var(--astryx-color-background-red);
+    --astryx-banner-error-foreground: var(--astryx-color-text-red);
+    --astryx-banner-warning-background: var(--astryx-color-background-yellow);
+    --astryx-banner-warning-foreground: var(--astryx-color-text-yellow);
+    --astryx-banner-success-background: var(--astryx-color-background-green);
+    --astryx-banner-success-foreground: var(--astryx-color-text-green);
+    --astryx-banner-content-background: var(--astryx-color-background-surface);
+    --astryx-banner-border: var(--astryx-color-border);
+  }
+}