@astryx-vue/themes 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 astryx-vue contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,15 @@
-# Temporary Holding Version
+# @astryx-vue/themes
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Themes for astryx-vue.
+
+Docs: <https://astryx-vue.pages.dev>
+
+```bash
+pnpm add @astryx-vue/core @astryx-vue/themes
+```
+
+```ts
+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.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,41 @@
+# Third-party notices
+
+## Astryx
+
+This project is an unofficial community Vue port based on the public Astryx project:
+
+- Repository: <https://github.com/facebook/astryx>
+- Version used for the first round: `v0.4.1`
+- Commit: `96f9917fe013a7062a403c58e54dfd47f482d89f`
+- License: MIT
+- Copyright: (c) 2026 Meta Platforms, Inc.
+
+The TextInput, CheckboxInput, CheckboxIndicator, Slider, Banner and Field family added in October 2026 also references the upstream implementation at commit `92779d3fbd0f12e659203c7d719d5bb00935060c`, including TextInput, CheckboxInput, CheckboxIndicator, Slider, Banner, Field, FieldLabel, FieldStatus and the shared input styles. Their public behavior and visual structure are adapted into native Vue components under the same MIT license. The Vue model/events, scoped slots and async-state implementation are local adaptations.
+
+When files or substantial portions are copied or adapted, their original copyright and license notices must be kept here or alongside the adapted files.
+
+No Meta trademarks, logos, or endorsement are granted by the Astryx software license.
+
+## Astryx license text
+
+MIT License
+
+Copyright (c) 2026 Meta Platforms, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/css.d.ts

@@ -0,0 +1,3 @@
+declare const stylesheet: string
+
+export default stylesheet

package/fonts.css

@@ -0,0 +1,6 @@
+/* 各主题共用的等宽字形。主题入口在内部引入，使用方不要单独 import 这个文件。 */
+@import '@fontsource/jetbrains-mono/400.css';
+@import '@fontsource/jetbrains-mono/400-italic.css';
+@import '@fontsource/jetbrains-mono/500.css';
+@import '@fontsource/jetbrains-mono/600.css';
+@import '@fontsource/jetbrains-mono/700.css';

package/neutral/alert-dialog.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-alert-dialog-title-foreground: light-dark(#171717, #fafafa);
+    --astryx-alert-dialog-description-foreground: light-dark(#525252, #a3a3a3);
+  }
+}

package/neutral/avatar-group.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-avatar-group-border-color: light-dark(#fff, #171717);
+    --astryx-avatar-group-overflow-background: light-dark(#e5e5e5, #525252);
+    --astryx-avatar-group-overflow-foreground: light-dark(#525252, #e5e5e5);
+  }
+}

package/neutral/avatar.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-avatar-fallback-background: light-dark(#e5e5e5, #525252);
+    --astryx-avatar-fallback-foreground: light-dark(#525252, #e5e5e5);
+    --astryx-avatar-status-dot-border-color: light-dark(#fff, #171717);
+
+    --astryx-avatar-status-dot-neutral-background: light-dark(#a3a3a3, #737373);
+    --astryx-avatar-status-dot-info-background: light-dark(#0074e2, #6d9cfe);
+    --astryx-avatar-status-dot-success-background: light-dark(#198100, #64af4c);
+    --astryx-avatar-status-dot-warning-background: #ffce2f;
+    --astryx-avatar-status-dot-error-background: light-dark(#e33f4a, #ff705d);
+  }
+}

package/neutral/badge.css

@@ -0,0 +1,36 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-badge-neutral-background: light-dark(#e5e5e5, #ffffff1a);
+    --astryx-badge-neutral-foreground: light-dark(#262626, #e5e5e5);
+    --astryx-badge-info-background: light-dark(#0074e2, #6d9cfe);
+    --astryx-badge-info-foreground: light-dark(#ffffff, #171717);
+    --astryx-badge-success-background: light-dark(#198100, #64af4c);
+    --astryx-badge-success-foreground: light-dark(#ffffff, #171717);
+    --astryx-badge-warning-background: #ffce2f;
+    --astryx-badge-warning-foreground: #171717;
+    --astryx-badge-error-background: light-dark(#e33f4a, #ff705d);
+    --astryx-badge-error-foreground: light-dark(#ffffff, #171717);
+
+    --astryx-badge-blue-background: light-dark(#c4ddfb, #9eb7ff3d);
+    --astryx-badge-blue-foreground: light-dark(#00458c, #c7d3ff);
+    --astryx-badge-cyan-background: light-dark(#a3e0ef, #83c2d43d);
+    --astryx-badge-cyan-foreground: light-dark(#00505f, #9edef0);
+    --astryx-badge-green-background: light-dark(#c5e5c0, #84c9803d);
+    --astryx-badge-green-foreground: light-dark(#0c5700, #9fe59b);
+    --astryx-badge-orange-background: light-dark(#fad0b5, #ffa2583d);
+    --astryx-badge-orange-foreground: light-dark(#6e3500, #ffc9a2);
+    --astryx-badge-pink-background: light-dark(#fccadc, #ff99c33d);
+    --astryx-badge-pink-foreground: light-dark(#83004b, #ffc3da);
+    --astryx-badge-purple-background: light-dark(#eccef3, #f297ff3d);
+    --astryx-badge-purple-foreground: light-dark(#700084, #fac1ff);
+    --astryx-badge-red-background: light-dark(#facecb, #ff9e973d);
+    --astryx-badge-red-foreground: light-dark(#89001a, #ffc6c1);
+    --astryx-badge-teal-background: light-dark(#a5e3d6, #7ec6b83d);
+    --astryx-badge-teal-foreground: light-dark(#005348, #99e2d3);
+    --astryx-badge-yellow-background: light-dark(#f8da9d, #deb4333d);
+    --astryx-badge-yellow-foreground: light-dark(#584400, #fdcf4f);
+  }
+}

package/neutral/banner.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-banner-info-background: light-dark(#f5f5f5, #262626);
+    --astryx-banner-info-foreground: light-dark(#262626, #ebebeb);
+    --astryx-banner-error-background: light-dark(#facecb, #ff9e973d);
+    --astryx-banner-error-foreground: light-dark(#89001a, #ffc6c1);
+    --astryx-banner-warning-background: light-dark(#f8da9d, #deb4333d);
+    --astryx-banner-warning-foreground: light-dark(#584400, #fdcf4f);
+    --astryx-banner-success-background: light-dark(#c5e5c0, #84c9803d);
+    --astryx-banner-success-foreground: light-dark(#0c5700, #9fe59b);
+    --astryx-banner-content-background: light-dark(#fff, #171717);
+    --astryx-banner-border: light-dark(#e5e5e5, #404040);
+  }
+}

package/neutral/base.css

@@ -0,0 +1,254 @@
+/**
+ * Neutral semantic tokens.
+ *
+ * Names follow upstream theme/tokens.stylex.ts, with an --astryx- prefix.
+ * When packages/themes/neutral overrides a token, that value is used.
+ * Otherwise the value is the default from tokens.stylex.ts.
+ * Both stops are written with light-dark().
+ *
+ * Durations are the neutral motion scale:
+ * { fast: 125, medium: 300, slow: 700, ratio: 0.75 }, rounded to 5ms.
+ *
+ * Two values stay as this package already shipped them, so existing
+ * components do not change appearance:
+ * - radius-none stays 0. Upstream neutral uses 0.25rem, which would round
+ *   square avatars and skeletons that treat this token as a square corner.
+ * - color-text-secondary's light stop stays #525252. Upstream neutral uses
+ *   #737373. Inputs, selectors, and supporting text already use this value.
+ */
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    color-scheme: light dark;
+
+    --astryx-color-accent: light-dark(#262626, #ebebeb);
+    --astryx-color-accent-muted: light-dark(#f1f1f1, #262626);
+    --astryx-color-on-accent: light-dark(#ffffff, #171717);
+    --astryx-color-neutral: light-dark(#0000000f, #ffffff1a);
+    --astryx-color-background-surface: light-dark(#ffffff, #262626);
+    --astryx-color-background-body: light-dark(#f1f1f1, #1b1b1b);
+    --astryx-color-overlay: light-dark(#00000080, #000000cc);
+    --astryx-color-overlay-hover: light-dark(#0000000d, #ffffff0d);
+    --astryx-color-overlay-pressed: light-dark(#0000001a, #ffffff1a);
+    --astryx-color-background-muted: light-dark(#f1f1f1, #1b1b1b);
+
+    --astryx-color-text-primary: light-dark(#171717, #fafafa);
+    --astryx-color-text-secondary: light-dark(#525252, #a3a3a3);
+    --astryx-color-text-disabled: light-dark(#a3a3a3, #525252);
+    --astryx-color-text-accent: light-dark(#262626, #ebebeb);
+    --astryx-color-on-dark: light-dark(#ffffff, #ffffff);
+    --astryx-color-on-light: light-dark(#171717, #171717);
+
+    --astryx-color-icon-accent: light-dark(#262626, #ebebeb);
+    --astryx-color-icon-primary: light-dark(#171717, #fafafa);
+    --astryx-color-icon-secondary: light-dark(#737373, #a3a3a3);
+    --astryx-color-icon-disabled: light-dark(#a3a3a3, #525252);
+
+    --astryx-color-background-card: light-dark(#ffffff, #1b1b1b);
+    --astryx-color-background-popover: light-dark(#ffffff, #1b1b1b);
+    --astryx-color-background-inverted: light-dark(#0a1317, #ffffff);
+    --astryx-color-background-error-inverted: light-dark(#aa071e, #e3193b);
+
+    --astryx-color-success: light-dark(#007004, #9fe59b);
+    --astryx-color-success-muted: light-dark(#c5e5c0, #84c9803d);
+    --astryx-color-on-success: light-dark(#ffffff, #171717);
+    --astryx-color-error: light-dark(#a50c25, #ffc6c1);
+    --astryx-color-error-muted: light-dark(#facecb, #ff9e973d);
+    --astryx-color-on-error: light-dark(#ffffff, #171717);
+    --astryx-color-warning: light-dark(#745b00, #fdcf4f);
+    --astryx-color-warning-muted: light-dark(#f8da9d, #deb4333d);
+    --astryx-color-on-warning: light-dark(#171717, #171717);
+
+    --astryx-color-border: light-dark(#ebebeb, #ffffff1a);
+    --astryx-color-border-emphasized: light-dark(#d4d4d4, #525252);
+
+    --astryx-color-skeleton: light-dark(#ebebeb, #525252);
+    --astryx-color-track: light-dark(#ccd3db, #5a5e66);
+    --astryx-color-shadow: light-dark(#0000001a, #0000004d);
+    --astryx-color-tint-hover: light-dark(black, white);
+
+    --astryx-color-background-blue: light-dark(#c4ddfb, #9eb7ff3d);
+    --astryx-color-border-blue: light-dark(#b1c9e7, #6d9cfe);
+    --astryx-color-icon-blue: light-dark(#00458c, #9eb7ff);
+    --astryx-color-text-blue: light-dark(#00458c, #c7d3ff);
+
+    --astryx-color-background-cyan: light-dark(#a3e0ef, #83c2d43d);
+    --astryx-color-border-cyan: light-dark(#91d3e3, #67a7b8);
+    --astryx-color-icon-cyan: light-dark(#00505f, #83c2d4);
+    --astryx-color-text-cyan: light-dark(#00505f, #9edef0);
+
+    --astryx-color-background-gray: light-dark(#e5e5e5, var(--astryx-color-neutral));
+    --astryx-color-border-gray: light-dark(#d4d4d4, #262626);
+    --astryx-color-icon-gray: light-dark(#525252, #a3a3a3);
+    --astryx-color-text-gray: light-dark(#262626, #e5e5e5);
+
+    --astryx-color-background-green: light-dark(#c5e5c0, #84c9803d);
+    --astryx-color-border-green: light-dark(#b2d1ac, #69ad67);
+    --astryx-color-icon-green: light-dark(#0c5700, #84c980);
+    --astryx-color-text-green: light-dark(#0c5700, #9fe59b);
+
+    --astryx-color-background-orange: light-dark(#fad0b5, #ffa2583d);
+    --astryx-color-border-orange: light-dark(#e6bda2, #e2883e);
+    --astryx-color-icon-orange: light-dark(#6e3500, #ffa258);
+    --astryx-color-text-orange: light-dark(#6e3500, #ffc9a2);
+
+    --astryx-color-background-pink: light-dark(#fccadc, #ff99c33d);
+    --astryx-color-border-pink: light-dark(#e7b7c8, #f273aa);
+    --astryx-color-icon-pink: light-dark(#83004b, #ff99c3);
+    --astryx-color-text-pink: light-dark(#83004b, #ffc3da);
+
+    --astryx-color-background-purple: light-dark(#eccef3, #f297ff3d);
+    --astryx-color-border-purple: light-dark(#d8bbdf, #dd74f0);
+    --astryx-color-icon-purple: light-dark(#700084, #f297ff);
+    --astryx-color-text-purple: light-dark(#700084, #fac1ff);
+
+    --astryx-color-background-red: light-dark(#facecb, #ff9e973d);
+    --astryx-color-border-red: light-dark(#e6bab8, #ff6f6c);
+    --astryx-color-icon-red: light-dark(#89001a, #ff9e97);
+    --astryx-color-text-red: light-dark(#89001a, #ffc6c1);
+
+    --astryx-color-background-teal: light-dark(#a5e3d6, #7ec6b83d);
+    --astryx-color-border-teal: light-dark(#94d6c8, #63ab9d);
+    --astryx-color-icon-teal: light-dark(#005348, #7ec6b8);
+    --astryx-color-text-teal: light-dark(#005348, #99e2d3);
+
+    --astryx-color-background-yellow: light-dark(#f8da9d, #deb4333d);
+    --astryx-color-border-yellow: light-dark(#e4c279, #c0990e);
+    --astryx-color-icon-yellow: light-dark(#584400, #deb433);
+    --astryx-color-text-yellow: light-dark(#584400, #fdcf4f);
+
+    --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: 28px;
+    --astryx-size-element-md: 32px;
+    --astryx-size-element-lg: 36px;
+
+    --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: 0;
+    --astryx-radius-inner: 0.375rem;
+    --astryx-radius-element: 0.625rem;
+    --astryx-radius-container: 0.75rem;
+    --astryx-radius-page: 1.75rem;
+    --astryx-radius-chat: 28px;
+    --astryx-radius-full: 9999px;
+
+    --astryx-shadow-low: 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-shadow-med: 0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)), 0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
+    --astryx-shadow-high: 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%));
+    --astryx-shadow-inset-hover: inset 0px 0px 0px 2px #0074e24d;
+    --astryx-shadow-inset-selected: inset 0px 0px 0px 2px #0074e280;
+    --astryx-shadow-inset-success: inset 0px 0px 0px 2px #1981004d;
+    --astryx-shadow-inset-warning: inset 0px 0px 0px 2px #ffce2f4d;
+    --astryx-shadow-inset-error: inset 0px 0px 0px 2px #e33f4a4d;
+
+    --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: Figtree, -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: Figtree, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+
+    --astryx-font-size-4xs: 0.375rem;
+    --astryx-font-size-3xs: 0.4375rem;
+    --astryx-font-size-2xs: 0.5rem;
+    --astryx-font-size-xs: 0.625rem;
+    --astryx-font-size-sm: 0.75rem;
+    --astryx-font-size-base: 0.875rem;
+    --astryx-font-size-lg: 1.0625rem;
+    --astryx-font-size-xl: 1.25rem;
+    --astryx-font-size-2xl: 1.5rem;
+    --astryx-font-size-3xl: 1.8125rem;
+    --astryx-font-size-4xl: 2.1875rem;
+    --astryx-font-size-5xl: 2.625rem;
+
+    --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.4;
+    --astryx-text-heading-3-size: var(--astryx-font-size-lg);
+    --astryx-text-heading-3-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-3-leading: 1.4118;
+    --astryx-text-heading-4-size: var(--astryx-font-size-base);
+    --astryx-text-heading-4-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-4-leading: 1.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.6667;
+    --astryx-text-heading-6-size: var(--astryx-font-size-xs);
+    --astryx-text-heading-6-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-heading-6-leading: 1.6;
+
+    --astryx-text-body-size: var(--astryx-font-size-base);
+    --astryx-text-body-weight: var(--astryx-font-weight-normal);
+    --astryx-text-body-leading: 1.4286;
+    --astryx-text-large-size: var(--astryx-font-size-lg);
+    --astryx-text-large-weight: var(--astryx-font-weight-semibold);
+    --astryx-text-large-leading: 1.4118;
+    --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: var(--astryx-font-size-sm);
+    --astryx-text-supporting-weight: var(--astryx-font-weight-normal);
+    --astryx-text-supporting-leading: 1.6667;
+
+    --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.2381;
+    --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.2571;
+    --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.2414;
+  }
+
+  [data-astryx-color-mode='light'] {
+    color-scheme: light;
+  }
+
+  [data-astryx-color-mode='dark'] {
+    color-scheme: dark;
+  }
+}

package/neutral/bottom-sheet.css

@@ -0,0 +1,17 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-bottom-sheet-background: light-dark(#ffffff, #262626);
+    --astryx-bottom-sheet-foreground: light-dark(#171717, #fafafa);
+    --astryx-bottom-sheet-border: light-dark(#d4d4d4, #525252);
+    --astryx-bottom-sheet-scrim: light-dark(#00000080, #000000cc);
+    --astryx-bottom-sheet-handle-background: light-dark(#d4d4d4, #525252);
+    --astryx-bottom-sheet-focus: light-dark(#171717, #fafafa);
+    --astryx-bottom-sheet-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/button.css

@@ -0,0 +1,34 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@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-ghost-background: transparent;
+    --astryx-button-ghost-foreground: light-dark(#171717, #fafafa);
+    --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-separator: light-dark(#00000014, #ffffff1a);
+    --astryx-button-solid-separator: light-dark(#ffffff, #171717);
+    --astryx-button-tooltip-background: light-dark(#171717, #262626);
+    --astryx-button-tooltip-foreground: light-dark(#ffffff, #fafafa);
+    --astryx-button-shadow-low:
+      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-button-shadow-med:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)),
+      0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
+    --astryx-button-shadow-high:
+      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/card.css

@@ -0,0 +1,33 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-card-background: light-dark(#fff, #1f1f22);
+    --astryx-card-muted-background: light-dark(#f5f5f5, #171717);
+    --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%)),
+      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-card-shadow-med:
+      0 2px 4px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 35%)),
+      0 4px 12px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)),
+      inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
+    --astryx-card-shadow-high:
+      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%));
+
+    --astryx-card-blue-background: light-dark(#c4ddfb, #9eb7ff3d);
+    --astryx-card-cyan-background: light-dark(#a3e0ef, #83c2d43d);
+    --astryx-card-gray-background: light-dark(#e5e5e5, #ffffff1a);
+    --astryx-card-green-background: light-dark(#c5e5c0, #84c9803d);
+    --astryx-card-orange-background: light-dark(#fad0b5, #ffa2583d);
+    --astryx-card-pink-background: light-dark(#fccadc, #ff99c33d);
+    --astryx-card-purple-background: light-dark(#eccef3, #f297ff3d);
+    --astryx-card-red-background: light-dark(#facecb, #ff9e973d);
+    --astryx-card-teal-background: light-dark(#a5e3d6, #7ec6b83d);
+    --astryx-card-yellow-background: light-dark(#f8da9d, #deb4333d);
+  }
+}

package/neutral/center.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-center-default-padding: var(--astryx-spacing-0);
+  }
+}

package/neutral/chat.css

@@ -0,0 +1,28 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --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: light-dark(#474747, #a3a3a3);
+    --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/neutral/checkbox.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-checkbox-background: light-dark(#fff, #262626);
+    --astryx-checkbox-border: light-dark(#d4d4d4, #525252);
+    --astryx-checkbox-accent: light-dark(#262626, #ebebeb);
+    --astryx-checkbox-on-accent: light-dark(#fff, #171717);
+    --astryx-checkbox-focus: light-dark(#262626, #ebebeb);
+    --astryx-checkbox-disabled-background: light-dark(#f5f5f5, #171717);
+  }
+}

package/neutral/citation.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-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/neutral/code.css

@@ -0,0 +1,36 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-text-code-size: 0.875rem;
+    --astryx-text-code-leading: 1.4286;
+
+    --astryx-code-background: light-dark(#f5f5f5, #262626);
+    --astryx-code-primary-foreground: light-dark(#171717, #fafafa);
+    --astryx-code-secondary-foreground: light-dark(#525252, #a3a3a3);
+
+    /* 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(#ffffff, #111111);
+    --astryx-code-block-border: light-dark(#00000014, #ffffff1a);
+    --astryx-code-block-focus: light-dark(#262626, #ebebeb);
+    --astryx-code-block-highlight-background: light-dark(#0074e233, #6d9cfe33);
+
+    /* Syntax colors from the original CodeBlock theme: keyword and type share
+       the same purple, strings stay green. */
+    --astryx-code-syntax-keyword: light-dark(#6b187c, #efa8ff);
+    --astryx-code-syntax-string: light-dark(#0b5615, #a4d6a3);
+    --astryx-code-syntax-comment: light-dark(#6a6a6a, #9e9e9e);
+    --astryx-code-syntax-number: light-dark(#733100, #ffb37e);
+    --astryx-code-syntax-function: light-dark(#00458c, #a1caff);
+    --astryx-code-syntax-type: light-dark(#6b187c, #efa8ff);
+    --astryx-code-syntax-variable: light-dark(#111111, #e2e2e2);
+    --astryx-code-syntax-operator: light-dark(#6a6a6a, #9e9e9e);
+    --astryx-code-syntax-constant: light-dark(#733100, #ffb37e);
+    --astryx-code-syntax-tag: light-dark(#8a0011, #ffaea7);
+    --astryx-code-syntax-attribute: light-dark(#584400, #eec448);
+    --astryx-code-syntax-property: light-dark(#005348, #90d7c8);
+    --astryx-code-syntax-punctuation: light-dark(#6a6a6a, #9e9e9e);
+  }
+}

package/neutral/collapsible.css

@@ -0,0 +1,11 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.tokens {
+  :root,
+  [data-astryx-theme='neutral'] {
+    --astryx-collapsible-trigger-foreground: light-dark(#171717, #fafafa);
+    --astryx-collapsible-content-foreground: light-dark(#171717, #fafafa);
+    --astryx-collapsible-pressed-overlay: light-dark(#0000001a, #ffffff1a);
+    --astryx-collapsible-focus: light-dark(#262626, #ebebeb);
+  }
+}