@astryx-vue/themes 0.0.0-stage → 0.1.0

package/neutral/context-menu.css

@@ -0,0 +1,19 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-context-menu-background: light-dark(#ffffff, #1b1b1b);
+    --astryx-context-menu-foreground: light-dark(#171717, #fafafa);
+    --astryx-context-menu-shadow:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+    --astryx-context-menu-item-foreground: light-dark(#171717, #fafafa);
+    --astryx-context-menu-item-focus-background: light-dark(#0536590c, #ffffff0c);
+    --astryx-context-menu-item-pressed-background: light-dark(#05365919, #ffffff19);
+    --astryx-context-menu-item-description-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-context-menu-item-error-foreground: light-dark(#89001a, #ffc6c1);
+    --astryx-context-menu-section-foreground: light-dark(#525252, #a3a3a3);
+  }
+}

package/neutral/dialog.css

@@ -0,0 +1,14 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-dialog-background: light-dark(#ffffff, #262626);
+    --astryx-dialog-foreground: light-dark(#171717, #fafafa);
+    --astryx-dialog-overlay: light-dark(#00000080, #000000cc);
+    --astryx-dialog-shadow:
+      0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)),
+      0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%));
+  }
+}

package/neutral/divider.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-divider-color-subtle: light-dark(#00000014, #ffffff1a);
+    --astryx-divider-color-strong: light-dark(#d4d4d4, #525252);
+    --astryx-divider-label-color: light-dark(#525252, #a3a3a3);
+  }
+}

package/neutral/dropdown-menu.css

@@ -0,0 +1,18 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-dropdown-menu-background: light-dark(#ffffff, #1b1b1b);
+    --astryx-dropdown-menu-foreground: light-dark(#171717, #fafafa);
+    --astryx-dropdown-menu-shadow:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+    --astryx-dropdown-menu-hover-background: light-dark(#0536590c, #ffffff0c);
+    --astryx-dropdown-menu-pressed-background: light-dark(#05365919, #ffffff19);
+    --astryx-dropdown-menu-trigger-open-overlay: light-dark(#05365919, #ffffff19);
+    --astryx-dropdown-menu-destructive-foreground: light-dark(#a50c25, #ffc6c1);
+    --astryx-dropdown-menu-section-heading-foreground: light-dark(#525252, #a3a3a3);
+  }
+}

package/neutral/empty-state.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-empty-state-title-foreground: light-dark(#171717, #fafafa);
+    --astryx-empty-state-description-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-empty-state-text-width: 360px;
+  }
+}

package/neutral/field.css

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

package/neutral/grid.css

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

package/neutral/heading.css

@@ -0,0 +1,24 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-heading-foreground: light-dark(#171717, #fafafa);
+    --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-5-size: 1.125rem;
+    --astryx-heading-level-6-size: 1rem;
+    --astryx-heading-display-1-size: 3rem;
+    --astryx-heading-display-2-size: 2.25rem;
+    --astryx-heading-display-3-size: 1.75rem;
+    --astryx-heading-display-weight: 300;
+    --astryx-heading-leading: 1.25;
+    --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);
+  }
+}

package/neutral/hover-card.css

@@ -0,0 +1,14 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-hover-card-background: light-dark(#ffffff, #1b1b1b);
+    --astryx-hover-card-foreground: light-dark(#171717, #fafafa);
+    --astryx-hover-card-shadow:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+    --astryx-hover-card-indication-color: light-dark(#d4d4d4, #525252);
+  }
+}

package/neutral/icon.css

@@ -0,0 +1,24 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-icon-primary-foreground: light-dark(#171717, #fafafa);
+    --astryx-icon-secondary-foreground: light-dark(#6a6a6a, #9e9e9e);
+    --astryx-icon-disabled-foreground: light-dark(#919191, #525252);
+    --astryx-icon-accent-foreground: light-dark(#0074e2, #6d9cfe);
+    --astryx-icon-success-foreground: light-dark(#00490b, #a4d6a3);
+    --astryx-icon-error-foreground: light-dark(#76000c, #ffc4be);
+    --astryx-icon-warning-foreground: light-dark(#4b3900, #f8d36a);
+    --astryx-icon-blue-foreground: light-dark(#003978, #88bcff);
+    --astryx-icon-cyan-foreground: light-dark(#004351, #71c7dd);
+    --astryx-icon-green-foreground: light-dark(#00490b, #a4d6a3);
+    --astryx-icon-gray-foreground: light-dark(#474747, #9e9e9e);
+    --astryx-icon-orange-foreground: light-dark(#622700, #ff9e55);
+    --astryx-icon-pink-foreground: light-dark(#70003f, #fd92bd);
+    --astryx-icon-purple-foreground: light-dark(#5c0e6c, #e496f6);
+    --astryx-icon-red-foreground: light-dark(#76000c, #ff9890);
+    --astryx-icon-teal-foreground: light-dark(#00463d, #81c9bb);
+    --astryx-icon-yellow-foreground: light-dark(#4b3900, #e2b623);
+  }
+}

package/neutral/input.css

@@ -0,0 +1,22 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-input-background: light-dark(#fff, #262626);
+    --astryx-input-border: light-dark(#d4d4d4, #525252);
+    --astryx-input-focus: light-dark(#262626, #ebebeb);
+    --astryx-input-height-sm: 28px;
+    --astryx-input-height-md: 32px;
+    --astryx-input-height-lg: 36px;
+    --astryx-input-error: light-dark(#e33f4a, #ff705d);
+    --astryx-input-error-foreground: light-dark(#89001a, #ffc6c1);
+    --astryx-input-error-background: light-dark(#facecb, #ff9e973d);
+    --astryx-input-warning: light-dark(#a67a00, #fdcf4f);
+    --astryx-input-warning-foreground: light-dark(#584400, #fdcf4f);
+    --astryx-input-warning-background: light-dark(#f8da9d, #deb4333d);
+    --astryx-input-success: light-dark(#198100, #64af4c);
+    --astryx-input-success-foreground: light-dark(#0c5700, #9fe59b);
+    --astryx-input-success-background: light-dark(#c5e5c0, #84c9803d);
+  }
+}

package/neutral/kbd.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-kbd-background: light-dark(#e5e5e5, #ffffff1a);
+    --astryx-kbd-foreground: var(--astryx-color-text-secondary);
+    --astryx-kbd-border-color: var(--astryx-color-border-emphasized);
+  }
+}

package/neutral/link.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-link-primary-foreground: light-dark(#171717, #fafafa);
+    --astryx-link-secondary-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-link-accent-foreground: light-dark(#0074e2, #6d9cfe);
+  }
+}

package/neutral/list.css

@@ -0,0 +1,13 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-list-item-hover-background: light-dark(#0536590c, #ffffff0c);
+    --astryx-list-item-pressed-background: light-dark(#05365919, #ffffff19);
+    --astryx-list-item-selected-background: light-dark(#0082fb33, #0082fb3f);
+    --astryx-list-item-focus: light-dark(#0064e0, #2694fe);
+    --astryx-list-divider-color: light-dark(#05365919, #f2f4f619);
+    --astryx-list-marker-foreground: light-dark(#171717, #fafafa);
+  }
+}

package/neutral/mobile-nav.css

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

package/neutral/more-menu.css

@@ -0,0 +1,20 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-more-menu-background: light-dark(#ffffff, #1b1b1b);
+    --astryx-more-menu-foreground: light-dark(#171717, #fafafa);
+    --astryx-more-menu-description-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-more-menu-heading-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-more-menu-destructive-foreground: light-dark(#a50c25, #ffc6c1);
+    --astryx-more-menu-item-hover-background: light-dark(#0536590c, #ffffff0c);
+    --astryx-more-menu-item-pressed-background: light-dark(#05365919, #ffffff19);
+    --astryx-more-menu-scrim: light-dark(#00000080, #000000cc);
+    --astryx-more-menu-trigger-open-overlay: light-dark(#0000001a, #ffffff1a);
+    --astryx-more-menu-shadow:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+  }
+}

package/neutral/nav-menu.css

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

package/neutral/overlay.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-overlay-scrim-background: light-dark(#00000080, #000000cc);
+    --astryx-overlay-scrim-light-background: color-mix(in srgb, #fff 60%, transparent);
+  }
+}

package/neutral/popover.css

@@ -0,0 +1,13 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-popover-background: light-dark(#ffffff, #1b1b1b);
+    --astryx-popover-foreground: light-dark(#171717, #fafafa);
+    --astryx-popover-shadow:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+  }
+}

package/neutral/progress-bar.css

@@ -0,0 +1,16 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --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: light-dark(#e5e5e5, rgb(255 255 255 / 10%));
+    --astryx-progress-bar-fill-background: light-dark(#171717, #fff);
+    --astryx-progress-bar-success-fill: light-dark(#198100, #64af4c);
+    --astryx-progress-bar-warning-fill: light-dark(#ffce2f, #ffce2f);
+    --astryx-progress-bar-error-fill: light-dark(#e33f4a, #ff705d);
+    --astryx-progress-bar-info-fill: light-dark(#0074e2, #6d9cfe);
+  }
+}

package/neutral/radio.css

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

package/neutral/segmented-control.css

@@ -0,0 +1,19 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-segmented-control-background: light-dark(#f5f5f5, #171717);
+    --astryx-segmented-control-focus: light-dark(#262626, #ebebeb);
+    --astryx-segmented-control-item-foreground: light-dark(#525252, #a3a3a3);
+    --astryx-segmented-control-item-hover-background: light-dark(#0000000d, #ffffff0d);
+    --astryx-segmented-control-item-pressed-background: light-dark(#0000001a, #ffffff1a);
+    --astryx-segmented-control-item-selected-foreground: light-dark(#171717, #fafafa);
+    --astryx-segmented-control-item-selected-background: light-dark(#ffffff, #262626);
+    --astryx-segmented-control-item-selected-shadow:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 25%)),
+      0 4px 8px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 40%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 8%));
+    --astryx-segmented-control-item-disabled-foreground: light-dark(#919191, #525252);
+  }
+}

package/neutral/side-nav.css

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

package/neutral/skeleton.css

@@ -0,0 +1,8 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-color-skeleton: light-dark(#ebebeb, #525252);
+  }
+}

package/neutral/slider.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-slider-track: light-dark(#e5e5e5, #404040);
+    --astryx-slider-accent: light-dark(#262626, #ebebeb);
+    --astryx-slider-focus: light-dark(#262626, #ebebeb);
+    --astryx-slider-height: 160px;
+  }
+}

package/neutral/spinner.css

@@ -0,0 +1,22 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --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: light-dark(#171717, #fafafa);
+    --astryx-spinner-color-accent: light-dark(#262626, #ebebeb);
+    --astryx-spinner-color-subtle: light-dark(#525252, #a3a3a3);
+    --astryx-spinner-color-track: light-dark(#ccd3db, #5a5e66);
+    --astryx-spinner-color-on-dark: #fff;
+  }
+}

package/neutral/status-dot.css

@@ -0,0 +1,12 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-status-dot-neutral-background: light-dark(#a3a3a3, #737373);
+    --astryx-status-dot-info-background: light-dark(#0074e2, #6d9cfe);
+    --astryx-status-dot-success-background: light-dark(#198100, #64af4c);
+    --astryx-status-dot-warning-background: #ffce2f;
+    --astryx-status-dot-error-background: light-dark(#e33f4a, #ff705d);
+  }
+}

package/neutral/switch.css

@@ -0,0 +1,30 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --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: light-dark(#e2e2e2, #303030);
+    --astryx-switch-track-on: light-dark(#1b1b1b, #f1f1f1);
+    --astryx-switch-thumb: light-dark(#ffffff, #262626);
+  }
+}

package/neutral/text-area.css

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

package/neutral/text.css

@@ -0,0 +1,26 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-text-foreground: light-dark(#171717, #fafafa);
+    --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-size: 0.75rem;
+    --astryx-text-supporting-leading: 1.6667;
+    --astryx-text-display-1-size: 3rem;
+    --astryx-text-display-2-size: 2.25rem;
+    --astryx-text-display-3-size: 1.75rem;
+    --astryx-text-display-weight: 300;
+    --astryx-text-sm-size: 0.75rem;
+    --astryx-text-md-size: 0.875rem;
+    --astryx-text-lg-size: 1rem;
+    --astryx-text-xl-size: 1.25rem;
+    --astryx-color-text-accent: light-dark(#0074e2, #6d9cfe);
+  }
+}

package/neutral/toast.css

@@ -0,0 +1,13 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-toast-info-background: light-dark(#171717, #fafafa);
+    --astryx-toast-info-foreground: light-dark(#fafafa, #171717);
+    --astryx-toast-success-background: #0a7b3e;
+    --astryx-toast-warning-background: #9a6700;
+    --astryx-toast-error-background: #c52626;
+    --astryx-toast-type-foreground: #fff;
+  }
+}

package/neutral/toggle-button.css

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-toggle-button-pressed-background: light-dark(#05365919, #ffffff19);
+    --astryx-toggle-button-pressed-font-weight: 600;
+    --astryx-toggle-button-group-gap: 4px;
+  }
+}

package/neutral/token.css

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

@@ -0,0 +1,10 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-tooltip-background: light-dark(#171717, #fafafa);
+    --astryx-tooltip-foreground: light-dark(#fff, #262626);
+    --astryx-tooltip-indication-color: light-dark(#d4d4d4, #525252);
+  }
+}

package/neutral.css

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

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@astryx-vue/themes",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Themes for the unofficial astryx-vue community project.",
+  "author": "ShenQingchuan",
+  "license": "MIT",
+  "homepage": "https://astryx-vue.pages.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astryx-vue/astryx-vue.git",
+    "directory": "packages/themes"
+  },
+  "bugs": "https://github.com/astryx-vue/astryx-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "design-system",
+    "astryx",
+    "components",
+    "ui"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./*.css": {
+      "types": "./css.d.ts",
+      "default": "./*.css"
+    },
+    "./*/*.css": {
+      "types": "./css.d.ts",
+      "default": "./*/*.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "README.md",
+    "THIRD_PARTY_NOTICES.md",
+    "css.d.ts",
+    "fonts.css",
+    "neutral",
+    "neutral.css"
+  ],
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "5.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "true"
+  }
 }