@astryx-vue/themes 0.1.1 → 0.2.0

package/butter/hover-card.css

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

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

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

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

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

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

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

package/butter/more-menu.css

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

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

package/butter/overlay.css

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

package/butter/popover.css

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

package/butter/progress-bar.css

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

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

package/butter/segmented-control.css

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

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

package/butter/skeleton.css

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

package/butter/slider.css

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

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

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

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

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

package/butter/text.css

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

package/butter/toast.css

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

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

package/butter/token.css

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

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

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

package/chocolate/alert-dialog.css

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

package/chocolate/avatar-group.css

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

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

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

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+@layer astryx.tokens {
+  [data-astryx-theme='chocolate'] {
+    --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-error-muted);
+    --astryx-banner-error-foreground: var(--astryx-color-text-red);
+    --astryx-banner-warning-background: var(--astryx-color-warning-muted);
+    --astryx-banner-warning-foreground: var(--astryx-color-text-yellow);
+    --astryx-banner-success-background: var(--astryx-color-success-muted);
+    --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);
+  }
+}