@vinyasa/tokens 1.0.24 → 1.0.26

package/README.md

@@ -30,12 +30,12 @@ function App() {
 
 Values are organized in three tiers:
 
-1. **Primitives** (`primitives.ts`) — raw, numeric-keyed scales with no meaning attached: `gray[900]`, `blue[500]`, `space[3]`.
+1. **Primitives** — raw, numeric-keyed scales with no meaning attached: `moss[700]`, `space[3]`. Two kinds, in two places: `primitives.ts` holds only what's genuinely shared across 2+ color schemes (`dusk`, `ember`/`saffron`/`moss` — reused as-is by both `light.ts` and `orange.ts` — plus the fully structural scales like `space`/`radius`/`fontFamily`, consumed via `base.ts`). A scheme's _exclusive_ palette (e.g. `light.ts`'s own `stone`/`paper`/`shadow`, `orange.ts`'s own `sand`/`sunrise`) lives directly in that scheme's own file under `src/themes/`, not centralized — nothing else references it, so centralizing it would just be an extra file to jump to.
 2. **Semantic contract** (`themeContract`, exported from this package) — a flat, brand-role naming tier covering colors (`primary`/`onPrimary`, `secondary`/`onSecondary`, `tertiary`/`onTertiary`, `error`/`onError`, `focus`), spacing (`space1`–`space6`), radii, border width, typography (font family/size/weight/letter-spacing/line-height), motion (duration/easing), focus rings, opacity, shadows, elevation, blur, and z-index. This is what a component's own `.css.ts` file imports and references — never the primitives directly.
 
    `breakpoints` and `grid` (from `layout.ts`) are the one exception — they're exported as plain static values, **not** part of `themeContract`. CSS custom properties can't appear inside `@media` query conditions (`@media (min-width: var(--x))` is invalid in every browser), so responsive breakpoints can never be runtime-themed the way colors or spacing can. Consume them as literals directly in your own component's build-time `@media` blocks.
 
-3. **Runtime theme** (`defaultTheme`, `createTheme`, `VinyasaProvider`) — the actual values, injected as CSS custom properties at render time (via `@vanilla-extract/dynamic`), not baked into a static stylesheet. This is what makes overriding a value a runtime prop, not a rebuild.
+3. **Runtime theme** (`lightTheme`, `createTheme`, `VinyasaProvider`) — the actual values, injected as CSS custom properties at render time (via `@vanilla-extract/dynamic`), not baked into a static stylesheet. This is what makes overriding a value a runtime prop, not a rebuild.
 
 ### Overriding values
 
@@ -78,7 +78,15 @@ function Component() {
 <VinyasaProvider colorScheme="light" contrast="normal" density="comfortable">
 ```
 
-Only `light`/`normal`/`comfortable` values are authored today. `colorScheme`/`contrast` resolve together via `resolveBaseTheme`; `density` resolves separately via `resolveDensitySpacing` (it only ever varies the `space1`–`space6` keys, applied as an overlay after the base theme and before any explicit `theme` override) since color and spacing don't vary together. Both are structured so adding `dark`/`high`-contrast values or a `compact`/`spacious` spacing scale later is purely additive — no changes to the contract, the provider, or any component that consumes it. Requesting an unshipped combination falls back to the default with a console warning in development.
+- `colorScheme`: `'light'` (default) | `'dark'` | `'orange'` — three full peer themes, not "light/dark plus an orange accent." `orange` isn't a variant of light or dark; it has its own complete palette (surface, text, borders, shadow, and the brand color itself), warm throughout. `info`/`success`/`warning`/`error` stay on the same semantic hues (`dusk`/`moss`/`saffron`/`ember`) as every other theme — only the brand color and neutrals change per scheme.
+- `contrast`: `'normal'` (default) | `'high'` — every `colorScheme` × `contrast` combination is populated and WCAG-AAA-verified (7:1), not a placeholder; see `primitives.ts`'s and each `src/themes/*.ts` file's own comments for the exact ratios behind each override.
+- `density`: `'comfortable'` (default) | `'compact'` | `'spacious'`.
+
+Each color scheme's values live in its own file under `src/themes/`: `base.ts` (the `VinyasaTheme` interface plus the structural scale — spacing/radius/type/motion — shared by every scheme), `light.ts`, `dark.ts`, `orange.ts`. Every export name is unique across these files (`lightTheme`/`darkTheme`/`orangeTheme`, `lightHighContrastTheme`/`darkHighContrastTheme`/`orangeHighContrastTheme`) — no two files export something with the same name. Adding a new scheme (e.g. `blue`) means a new `src/themes/blue.ts` spreading `base` and defining only the color/shadow keys that differ, one new entry in `src/themes.ts`'s matrix, and widening the `ColorScheme` union there — no other file needs to change.
+
+`colorScheme`/`contrast` resolve together via `resolveBaseTheme`; `density` resolves separately via `resolveDensitySpacing` (it only ever varies the `space1`–`space6` keys, applied as an overlay after the base theme and before any explicit `theme` override) since color and spacing don't vary together. Requesting an unshipped combination falls back to `light`/`normal` with a console warning in development.
+
+Storybook's own toolbar (`apps/storybook/.storybook/preview.tsx`) exposes all three `colorScheme` values as a global toggle, so any story can be browsed in any of them, not just the Foundations pages' own light/dark comparison.
 
 ## Consuming the contract in your own component
 
@@ -106,8 +114,9 @@ export const root = style({
 | `VinyasaProvider`                                                            | React component. Props: `theme?`, `colorScheme?`, `contrast?`, `density?`, `children`.  |
 | `useVinyasaTheme()`                                                          | Hook returning the currently resolved `VinyasaTheme` object.                            |
 | `themeContract`                                                              | The token contract — import as `vars` in a component's `.css.ts` file.                  |
-| `defaultTheme`                                                               | The default (light/normal/comfortable) theme values object.                             |
-| `createTheme(overrides)`                                                     | Merges a partial theme onto `defaultTheme`, returning a full `VinyasaTheme`.            |
+| `lightTheme`, `darkTheme`, `orangeTheme`                                     | The normal-contrast values object for each color scheme.                                |
+| `lightHighContrastTheme`, `darkHighContrastTheme`, `orangeHighContrastTheme` | The high-contrast values object for each color scheme.                                  |
+| `createTheme(overrides)`                                                     | Merges a partial theme onto `lightTheme`, returning a full `VinyasaTheme`.              |
 | `resolveBaseTheme(colorScheme, contrast)`                                    | Looks up the base theme for a scheme/contrast pair, with a dev-mode fallback warning.   |
 | `resolveDensitySpacing(density)`                                             | Looks up the `space1`–`space6` overlay for a density, with a dev-mode fallback warning. |
 | `breakpoints`, `grid`                                                        | Static layout values (not themeable — see above). From `layout.ts`.                     |

package/dist/cjs/index.cjs

@@ -33,10 +33,12 @@ __webpack_require__.d(__webpack_exports__, {
     createTheme: ()=>createTheme,
     darkHighContrastTheme: ()=>darkHighContrastTheme,
     darkTheme: ()=>darkTheme,
-    defaultTheme: ()=>defaultTheme,
     focusRingStyle: ()=>focusRingStyle,
     grid: ()=>grid,
-    highContrastTheme: ()=>highContrastTheme,
+    lightHighContrastTheme: ()=>lightHighContrastTheme,
+    lightTheme: ()=>lightTheme,
+    orangeHighContrastTheme: ()=>orangeHighContrastTheme,
+    orangeTheme: ()=>orangeTheme,
     resolveBaseTheme: ()=>resolveBaseTheme,
     resolveDensitySpacing: ()=>resolveDensitySpacing,
     themeContract: ()=>themeContract,
@@ -128,73 +130,30 @@ const focusRingStyle = (vars)=>({
         borderColor: vars.focus,
         boxShadow: `0 0 0 1px ${vars.focus}, 0 0 0 4px color-mix(in srgb, ${vars.focus} 16%, transparent)`
     });
-const stone = {
-    50: '#FAFAFC',
-    100: '#F6F5F8',
-    200: '#E3E0EA',
-    300: '#CFCADC',
-    400: '#A79DBE',
-    500: '#7C7191',
-    600: '#5C5470',
-    700: '#4A4458',
-    800: '#332E40',
-    900: '#1E1A28'
-};
-const stoneDark = {
-    50: '#100E17',
-    100: '#161320',
-    200: '#221C30',
-    300: '#362E4C',
-    400: '#493D64',
-    500: '#7C7191',
-    600: '#B9B3CB',
-    700: '#D6D2E0',
-    800: '#E9E7EF',
-    900: '#F1EFF5'
-};
-const paper = '#FFFFFF';
-const paperDark = stoneDark[200];
 const dusk = {
     tint: '#EEE9F9',
     600: '#4B2E8C',
     700: '#37206B',
     onDusk: '#FFFFFF'
 };
-const duskDark = {
-    tint: '#2E2648',
-    600: '#B49BEA',
-    700: '#CBB8F2',
-    onDusk: '#1A1425'
-};
 const moss = {
     tint: '#E4EEE8',
     700: '#3F6650',
-    800: '#3B604B'
-};
-const mossDark = {
-    tint: '#22332A',
-    700: '#7FB89A'
+    800: '#3B604B',
+    900: '#385B47'
 };
 const ember = {
     tint: '#F7E7E1',
     600: '#A64B2A',
     700: '#8E4024',
+    800: '#863C22',
     onEmber: '#FFFFFF'
 };
-const emberDark = {
-    tint: '#3A281F',
-    600: '#E08D6D',
-    700: '#E3977A',
-    onEmber: '#2A1208'
-};
 const saffron = {
     tint: '#F5EBDD',
     700: '#A15C1F',
-    800: '#834B19'
-};
-const saffronDark = {
-    tint: '#3A2F1B',
-    700: '#D9A15C'
+    800: '#834B19',
+    900: '#7C4717'
 };
 const space = {
     1: '0.25rem',
@@ -260,16 +219,6 @@ const opacity = {
     disabled: '0.5',
     hover: '0.92'
 };
-const shadow = {
-    sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
-    md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
-    lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
-};
-const shadowDark = {
-    sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
-    md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
-    lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
-};
 const primitives_blur = {
     sm: '4px',
     md: '8px',
@@ -282,49 +231,7 @@ const zIndex = {
     toast: '1300',
     tooltip: '1400'
 };
-function _define_property(obj, key, value) {
-    if (key in obj) Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-    });
-    else obj[key] = value;
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = null != arguments[i] ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-        }));
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function theme_ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        if (enumerableOnly) symbols = symbols.filter(function(sym) {
-            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-        });
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props(target, source) {
-    source = null != source ? source : {};
-    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    else theme_ownKeys(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-    return target;
-}
-const structural = {
+const base_base = {
     space1: space["1"],
     space2: space["2"],
     space3: space["3"],
@@ -376,19 +283,79 @@ const structural = {
     zIndexToast: zIndex.toast,
     zIndexTooltip: zIndex.tooltip
 };
-const defaultTheme = _object_spread_props(_object_spread({}, structural), {
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function light_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else light_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const stone = {
+    50: '#FAFAFC',
+    100: '#F6F5F8',
+    200: '#E3E0EA',
+    300: '#CFCADC',
+    400: '#A79DBE',
+    500: '#7C7191',
+    600: '#5C5470',
+    700: '#4A4458',
+    800: '#332E40',
+    900: '#1E1A28'
+};
+const paper = '#FFFFFF';
+const shadow = {
+    sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
+    md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
+    lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
+};
+const lightTheme = _object_spread_props(_object_spread({}, base_base), {
     primary: dusk["600"],
     onPrimary: dusk.onDusk,
-    secondary: stone["200"],
-    onSecondary: stone["900"],
+    secondary: stone[200],
+    onSecondary: stone[900],
     surface: paper,
     tertiary: dusk.tint,
     onTertiary: dusk["600"],
     error: ember["600"],
     onError: ember.onEmber,
     focus: dusk["600"],
-    textDefault: stone["900"],
-    textMuted: stone["700"],
+    textDefault: stone[900],
+    textMuted: stone[700],
     statusInfoBg: dusk.tint,
     statusInfoText: dusk["600"],
     statusSuccessBg: moss.tint,
@@ -397,7 +364,7 @@ const defaultTheme = _object_spread_props(_object_spread({}, structural), {
     statusWarningText: saffron["700"],
     statusErrorBg: ember.tint,
     statusErrorText: ember["600"],
-    borderColorDefault: stone["200"],
+    borderColorDefault: stone[200],
     shadowSm: shadow.sm,
     shadowMd: shadow.md,
     shadowLg: shadow.lg,
@@ -405,28 +372,119 @@ const defaultTheme = _object_spread_props(_object_spread({}, structural), {
     elevationOverlay: shadow.md,
     elevationModal: shadow.lg
 });
-const darkTheme = _object_spread_props(_object_spread({}, structural), {
-    primary: duskDark["600"],
+const lightHighContrastTheme = _object_spread_props(_object_spread({}, lightTheme), {
+    primary: dusk["700"],
+    onTertiary: dusk["700"],
+    focus: dusk["700"],
+    error: ember["700"],
+    statusErrorText: ember["700"],
+    statusWarningText: saffron["800"],
+    statusSuccessText: moss["800"],
+    borderColorDefault: stone[600]
+});
+const createTheme = (overrides = {})=>_object_spread({}, lightTheme, overrides);
+function dark_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function dark_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            dark_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function dark_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function dark_object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else dark_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const stoneDark = {
+    50: '#100E17',
+    100: '#161320',
+    200: '#221C30',
+    300: '#362E4C',
+    400: '#493D64',
+    500: '#7C7191',
+    600: '#B9B3CB',
+    700: '#D6D2E0',
+    800: '#E9E7EF',
+    900: '#F1EFF5'
+};
+const paperDark = stoneDark[200];
+const duskDark = {
+    tint: '#2E2648',
+    600: '#B49BEA',
+    700: '#CBB8F2',
+    onDusk: '#1A1425'
+};
+const mossDark = {
+    tint: '#22332A',
+    700: '#7FB89A'
+};
+const emberDark = {
+    tint: '#3A281F',
+    600: '#E08D6D',
+    700: '#E3977A',
+    onEmber: '#2A1208'
+};
+const saffronDark = {
+    tint: '#3A2F1B',
+    700: '#D9A15C'
+};
+const shadowDark = {
+    sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
+    md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
+    lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
+};
+const darkTheme = dark_object_spread_props(dark_object_spread({}, base_base), {
+    primary: duskDark[600],
     onPrimary: duskDark.onDusk,
-    secondary: stoneDark["300"],
-    onSecondary: stoneDark["900"],
+    secondary: stoneDark[300],
+    onSecondary: stoneDark[900],
     surface: paperDark,
     tertiary: duskDark.tint,
-    onTertiary: duskDark["600"],
-    error: emberDark["600"],
+    onTertiary: duskDark[600],
+    error: emberDark[600],
     onError: emberDark.onEmber,
-    focus: duskDark["600"],
-    textDefault: stoneDark["900"],
-    textMuted: stoneDark["600"],
+    focus: duskDark[600],
+    textDefault: stoneDark[900],
+    textMuted: stoneDark[600],
     statusInfoBg: duskDark.tint,
-    statusInfoText: duskDark["600"],
+    statusInfoText: duskDark[600],
     statusSuccessBg: mossDark.tint,
-    statusSuccessText: mossDark["700"],
+    statusSuccessText: mossDark[700],
     statusWarningBg: saffronDark.tint,
-    statusWarningText: saffronDark["700"],
+    statusWarningText: saffronDark[700],
     statusErrorBg: emberDark.tint,
-    statusErrorText: emberDark["600"],
-    borderColorDefault: stoneDark["300"],
+    statusErrorText: emberDark[600],
+    borderColorDefault: stoneDark[300],
     shadowSm: shadowDark.sm,
     shadowMd: shadowDark.md,
     shadowLg: shadowDark.lg,
@@ -434,33 +492,133 @@ const darkTheme = _object_spread_props(_object_spread({}, structural), {
     elevationOverlay: shadowDark.md,
     elevationModal: shadowDark.lg
 });
-const highContrastTheme = _object_spread_props(_object_spread({}, defaultTheme), {
-    primary: dusk["700"],
-    onTertiary: dusk["700"],
-    focus: dusk["700"],
-    error: ember["700"],
-    statusErrorText: ember["700"],
-    statusWarningText: saffron["800"],
-    statusSuccessText: moss["800"],
-    borderColorDefault: stone["600"]
+const darkHighContrastTheme = dark_object_spread_props(dark_object_spread({}, darkTheme), {
+    primary: duskDark[700],
+    onTertiary: duskDark[700],
+    focus: duskDark[700],
+    error: emberDark[700],
+    statusErrorText: emberDark[700],
+    borderColorDefault: stoneDark[600]
+});
+function orange_define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function orange_object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            orange_define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function orange_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function orange_object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else orange_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const sand = {
+    50: '#FFFBF5',
+    100: '#FDF0E1',
+    200: '#F0D9BC',
+    300: '#DEBB8C',
+    400: '#BE8F58',
+    500: '#8F6A3F',
+    600: '#6B4F30',
+    700: '#523D26',
+    800: '#382A1A',
+    900: '#221A10'
+};
+const paperSand = '#FFF8F0';
+const sunrise = {
+    tint: '#FFE9DF',
+    600: '#FF5A2B',
+    700: '#B8380C',
+    800: '#8F2C08',
+    onSunrise: '#2A1206'
+};
+const shadowSand = {
+    sm: '0 1px 1px rgba(60, 30, 10, 0.06)',
+    md: '0 1px 2px rgba(60, 30, 10, 0.05), 0 8px 20px -8px rgba(90, 40, 10, 0.18)',
+    lg: '0 2px 4px rgba(60, 30, 10, 0.06), 0 16px 40px -12px rgba(90, 40, 10, 0.28)'
+};
+const orangeTheme = orange_object_spread_props(orange_object_spread({}, base_base), {
+    primary: sunrise[600],
+    onPrimary: sunrise.onSunrise,
+    secondary: sand[200],
+    onSecondary: sand[900],
+    surface: paperSand,
+    tertiary: sunrise.tint,
+    onTertiary: sunrise[700],
+    error: ember["600"],
+    onError: ember.onEmber,
+    focus: sunrise[700],
+    textDefault: sand[900],
+    textMuted: sand[700],
+    statusInfoBg: dusk.tint,
+    statusInfoText: dusk["600"],
+    statusSuccessBg: moss.tint,
+    statusSuccessText: moss["700"],
+    statusWarningBg: saffron.tint,
+    statusWarningText: saffron["700"],
+    statusErrorBg: ember.tint,
+    statusErrorText: ember["600"],
+    borderColorDefault: sand[200],
+    shadowSm: shadowSand.sm,
+    shadowMd: shadowSand.md,
+    shadowLg: shadowSand.lg,
+    elevationRaised: shadowSand.sm,
+    elevationOverlay: shadowSand.md,
+    elevationModal: shadowSand.lg
 });
-const darkHighContrastTheme = _object_spread_props(_object_spread({}, darkTheme), {
-    primary: duskDark["700"],
-    onTertiary: duskDark["700"],
-    focus: duskDark["700"],
-    error: emberDark["700"],
-    statusErrorText: emberDark["700"],
-    borderColorDefault: stoneDark["600"]
+const orangeHighContrastTheme = orange_object_spread_props(orange_object_spread({}, orangeTheme), {
+    primary: sunrise[800],
+    onPrimary: '#FFFFFF',
+    onTertiary: sunrise[800],
+    focus: sunrise[800],
+    error: ember["800"],
+    statusErrorText: ember["800"],
+    statusWarningText: saffron["900"],
+    statusSuccessText: moss["900"],
+    borderColorDefault: sand[600]
 });
-const createTheme = (overrides = {})=>_object_spread({}, defaultTheme, overrides);
 const themes = {
     light: {
-        normal: defaultTheme,
-        high: highContrastTheme
+        normal: lightTheme,
+        high: lightHighContrastTheme
     },
     dark: {
         normal: darkTheme,
         high: darkHighContrastTheme
+    },
+    orange: {
+        normal: orangeTheme,
+        high: orangeHighContrastTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
@@ -468,17 +626,17 @@ const resolveBaseTheme = (colorScheme, contrast)=>{
     const theme = null == (_themes_colorScheme = themes[colorScheme]) ? void 0 : _themes_colorScheme[contrast];
     if (!theme) {
         if ('production' !== process.env.NODE_ENV) console.warn(`[vinyasa] no theme values for colorScheme="${colorScheme}" contrast="${contrast}" yet; falling back to light/normal.`);
-        return defaultTheme;
+        return lightTheme;
     }
     return theme;
 };
 const comfortableSpacing = {
-    space1: defaultTheme.space1,
-    space2: defaultTheme.space2,
-    space3: defaultTheme.space3,
-    space4: defaultTheme.space4,
-    space5: defaultTheme.space5,
-    space6: defaultTheme.space6
+    space1: base_base.space1,
+    space2: base_base.space2,
+    space3: base_base.space3,
+    space4: base_base.space4,
+    space5: base_base.space5,
+    space6: base_base.space6
 };
 const compactSpacing = {
     space1: '0.125rem',
@@ -571,7 +729,7 @@ function VinyasaProvider_object_spread(target) {
     }
     return target;
 }
-const ThemeContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(defaultTheme);
+const ThemeContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(lightTheme);
 const useVinyasaTheme = ()=>(0, external_react_namespaceObject.useContext)(ThemeContext);
 const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
     const base = (0, external_react_namespaceObject.useMemo)(()=>resolveBaseTheme(colorScheme, contrast), [
@@ -609,10 +767,12 @@ exports.breakpoints = __webpack_exports__.breakpoints;
 exports.createTheme = __webpack_exports__.createTheme;
 exports.darkHighContrastTheme = __webpack_exports__.darkHighContrastTheme;
 exports.darkTheme = __webpack_exports__.darkTheme;
-exports.defaultTheme = __webpack_exports__.defaultTheme;
 exports.focusRingStyle = __webpack_exports__.focusRingStyle;
 exports.grid = __webpack_exports__.grid;
-exports.highContrastTheme = __webpack_exports__.highContrastTheme;
+exports.lightHighContrastTheme = __webpack_exports__.lightHighContrastTheme;
+exports.lightTheme = __webpack_exports__.lightTheme;
+exports.orangeHighContrastTheme = __webpack_exports__.orangeHighContrastTheme;
+exports.orangeTheme = __webpack_exports__.orangeTheme;
 exports.resolveBaseTheme = __webpack_exports__.resolveBaseTheme;
 exports.resolveDensitySpacing = __webpack_exports__.resolveDensitySpacing;
 exports.themeContract = __webpack_exports__.themeContract;
@@ -625,10 +785,12 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "createTheme",
     "darkHighContrastTheme",
     "darkTheme",
-    "defaultTheme",
     "focusRingStyle",
     "grid",
-    "highContrastTheme",
+    "lightHighContrastTheme",
+    "lightTheme",
+    "orangeHighContrastTheme",
+    "orangeTheme",
     "resolveBaseTheme",
     "resolveDensitySpacing",
     "themeContract",

package/dist/esm/VinyasaProvider.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import { type Density } from './density';
-import { type VinyasaTheme } from './theme';
 import { type ColorScheme, type Contrast } from './themes';
+import { type VinyasaTheme } from './themes/base';
 export declare const useVinyasaTheme: () => VinyasaTheme;
 export interface VinyasaProviderProps {
     theme?: Partial<VinyasaTheme>;

package/dist/esm/density.d.ts

@@ -1,4 +1,4 @@
-import { type VinyasaTheme } from './theme';
+import { type VinyasaTheme } from './themes/base';
 export type Density = 'compact' | 'comfortable' | 'spacious';
 type DensitySpacing = Pick<VinyasaTheme, 'space1' | 'space2' | 'space3' | 'space4' | 'space5' | 'space6'>;
 export declare const resolveDensitySpacing: (density: Density) => DensitySpacing;

package/dist/esm/index.d.ts

@@ -1,6 +1,9 @@
 export { themeContract } from './contract.css';
 export { focusRingStyle } from './focusRing';
-export { createTheme, darkHighContrastTheme, darkTheme, defaultTheme, highContrastTheme, type VinyasaTheme, } from './theme';
+export { type VinyasaTheme } from './themes/base';
+export { createTheme, lightHighContrastTheme, lightTheme } from './themes/light';
+export { darkHighContrastTheme, darkTheme } from './themes/dark';
+export { orangeHighContrastTheme, orangeTheme } from './themes/orange';
 export { resolveBaseTheme, type ColorScheme, type Contrast } from './themes';
 export { resolveDensitySpacing, type Density } from './density';
 export { breakpoints, grid } from './layout';

package/dist/esm/index.js

@@ -86,73 +86,30 @@ const focusRingStyle = (vars)=>({
         borderColor: vars.focus,
         boxShadow: `0 0 0 1px ${vars.focus}, 0 0 0 4px color-mix(in srgb, ${vars.focus} 16%, transparent)`
     });
-const stone = {
-    50: '#FAFAFC',
-    100: '#F6F5F8',
-    200: '#E3E0EA',
-    300: '#CFCADC',
-    400: '#A79DBE',
-    500: '#7C7191',
-    600: '#5C5470',
-    700: '#4A4458',
-    800: '#332E40',
-    900: '#1E1A28'
-};
-const stoneDark = {
-    50: '#100E17',
-    100: '#161320',
-    200: '#221C30',
-    300: '#362E4C',
-    400: '#493D64',
-    500: '#7C7191',
-    600: '#B9B3CB',
-    700: '#D6D2E0',
-    800: '#E9E7EF',
-    900: '#F1EFF5'
-};
-const paper = '#FFFFFF';
-const paperDark = stoneDark[200];
 const dusk = {
     tint: '#EEE9F9',
     600: '#4B2E8C',
     700: '#37206B',
     onDusk: '#FFFFFF'
 };
-const duskDark = {
-    tint: '#2E2648',
-    600: '#B49BEA',
-    700: '#CBB8F2',
-    onDusk: '#1A1425'
-};
 const moss = {
     tint: '#E4EEE8',
     700: '#3F6650',
-    800: '#3B604B'
-};
-const mossDark = {
-    tint: '#22332A',
-    700: '#7FB89A'
+    800: '#3B604B',
+    900: '#385B47'
 };
 const ember = {
     tint: '#F7E7E1',
     600: '#A64B2A',
     700: '#8E4024',
+    800: '#863C22',
     onEmber: '#FFFFFF'
 };
-const emberDark = {
-    tint: '#3A281F',
-    600: '#E08D6D',
-    700: '#E3977A',
-    onEmber: '#2A1208'
-};
 const saffron = {
     tint: '#F5EBDD',
     700: '#A15C1F',
-    800: '#834B19'
-};
-const saffronDark = {
-    tint: '#3A2F1B',
-    700: '#D9A15C'
+    800: '#834B19',
+    900: '#7C4717'
 };
 const space = {
     1: '0.25rem',
@@ -218,16 +175,6 @@ const opacity = {
     disabled: '0.5',
     hover: '0.92'
 };
-const shadow = {
-    sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
-    md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
-    lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
-};
-const shadowDark = {
-    sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
-    md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
-    lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
-};
 const primitives_blur = {
     sm: '4px',
     md: '8px',
@@ -240,7 +187,7 @@ const zIndex = {
     toast: '1300',
     tooltip: '1400'
 };
-const structural = {
+const base_base = {
     space1: space["1"],
     space2: space["2"],
     space3: space["3"],
@@ -292,20 +239,38 @@ const structural = {
     zIndexToast: zIndex.toast,
     zIndexTooltip: zIndex.tooltip
 };
-const defaultTheme = {
-    ...structural,
+const stone = {
+    50: '#FAFAFC',
+    100: '#F6F5F8',
+    200: '#E3E0EA',
+    300: '#CFCADC',
+    400: '#A79DBE',
+    500: '#7C7191',
+    600: '#5C5470',
+    700: '#4A4458',
+    800: '#332E40',
+    900: '#1E1A28'
+};
+const paper = '#FFFFFF';
+const shadow = {
+    sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
+    md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
+    lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
+};
+const lightTheme = {
+    ...base_base,
     primary: dusk["600"],
     onPrimary: dusk.onDusk,
-    secondary: stone["200"],
-    onSecondary: stone["900"],
+    secondary: stone[200],
+    onSecondary: stone[900],
     surface: paper,
     tertiary: dusk.tint,
     onTertiary: dusk["600"],
     error: ember["600"],
     onError: ember.onEmber,
     focus: dusk["600"],
-    textDefault: stone["900"],
-    textMuted: stone["700"],
+    textDefault: stone[900],
+    textMuted: stone[700],
     statusInfoBg: dusk.tint,
     statusInfoText: dusk["600"],
     statusSuccessBg: moss.tint,
@@ -314,7 +279,7 @@ const defaultTheme = {
     statusWarningText: saffron["700"],
     statusErrorBg: ember.tint,
     statusErrorText: ember["600"],
-    borderColorDefault: stone["200"],
+    borderColorDefault: stone[200],
     shadowSm: shadow.sm,
     shadowMd: shadow.md,
     shadowLg: shadow.lg,
@@ -322,29 +287,82 @@ const defaultTheme = {
     elevationOverlay: shadow.md,
     elevationModal: shadow.lg
 };
+const lightHighContrastTheme = {
+    ...lightTheme,
+    primary: dusk["700"],
+    onTertiary: dusk["700"],
+    focus: dusk["700"],
+    error: ember["700"],
+    statusErrorText: ember["700"],
+    statusWarningText: saffron["800"],
+    statusSuccessText: moss["800"],
+    borderColorDefault: stone[600]
+};
+const createTheme = (overrides = {})=>({
+        ...lightTheme,
+        ...overrides
+    });
+const stoneDark = {
+    50: '#100E17',
+    100: '#161320',
+    200: '#221C30',
+    300: '#362E4C',
+    400: '#493D64',
+    500: '#7C7191',
+    600: '#B9B3CB',
+    700: '#D6D2E0',
+    800: '#E9E7EF',
+    900: '#F1EFF5'
+};
+const paperDark = stoneDark[200];
+const duskDark = {
+    tint: '#2E2648',
+    600: '#B49BEA',
+    700: '#CBB8F2',
+    onDusk: '#1A1425'
+};
+const mossDark = {
+    tint: '#22332A',
+    700: '#7FB89A'
+};
+const emberDark = {
+    tint: '#3A281F',
+    600: '#E08D6D',
+    700: '#E3977A',
+    onEmber: '#2A1208'
+};
+const saffronDark = {
+    tint: '#3A2F1B',
+    700: '#D9A15C'
+};
+const shadowDark = {
+    sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
+    md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
+    lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
+};
 const darkTheme = {
-    ...structural,
-    primary: duskDark["600"],
+    ...base_base,
+    primary: duskDark[600],
     onPrimary: duskDark.onDusk,
-    secondary: stoneDark["300"],
-    onSecondary: stoneDark["900"],
+    secondary: stoneDark[300],
+    onSecondary: stoneDark[900],
     surface: paperDark,
     tertiary: duskDark.tint,
-    onTertiary: duskDark["600"],
-    error: emberDark["600"],
+    onTertiary: duskDark[600],
+    error: emberDark[600],
     onError: emberDark.onEmber,
-    focus: duskDark["600"],
-    textDefault: stoneDark["900"],
-    textMuted: stoneDark["600"],
+    focus: duskDark[600],
+    textDefault: stoneDark[900],
+    textMuted: stoneDark[600],
     statusInfoBg: duskDark.tint,
-    statusInfoText: duskDark["600"],
+    statusInfoText: duskDark[600],
     statusSuccessBg: mossDark.tint,
-    statusSuccessText: mossDark["700"],
+    statusSuccessText: mossDark[700],
     statusWarningBg: saffronDark.tint,
-    statusWarningText: saffronDark["700"],
+    statusWarningText: saffronDark[700],
     statusErrorBg: emberDark.tint,
-    statusErrorText: emberDark["600"],
-    borderColorDefault: stoneDark["300"],
+    statusErrorText: emberDark[600],
+    borderColorDefault: stoneDark[300],
     shadowSm: shadowDark.sm,
     shadowMd: shadowDark.md,
     shadowLg: shadowDark.lg,
@@ -352,55 +370,111 @@ const darkTheme = {
     elevationOverlay: shadowDark.md,
     elevationModal: shadowDark.lg
 };
-const highContrastTheme = {
-    ...defaultTheme,
-    primary: dusk["700"],
-    onTertiary: dusk["700"],
-    focus: dusk["700"],
-    error: ember["700"],
-    statusErrorText: ember["700"],
-    statusWarningText: saffron["800"],
-    statusSuccessText: moss["800"],
-    borderColorDefault: stone["600"]
-};
 const darkHighContrastTheme = {
     ...darkTheme,
-    primary: duskDark["700"],
-    onTertiary: duskDark["700"],
-    focus: duskDark["700"],
-    error: emberDark["700"],
-    statusErrorText: emberDark["700"],
-    borderColorDefault: stoneDark["600"]
+    primary: duskDark[700],
+    onTertiary: duskDark[700],
+    focus: duskDark[700],
+    error: emberDark[700],
+    statusErrorText: emberDark[700],
+    borderColorDefault: stoneDark[600]
+};
+const sand = {
+    50: '#FFFBF5',
+    100: '#FDF0E1',
+    200: '#F0D9BC',
+    300: '#DEBB8C',
+    400: '#BE8F58',
+    500: '#8F6A3F',
+    600: '#6B4F30',
+    700: '#523D26',
+    800: '#382A1A',
+    900: '#221A10'
+};
+const paperSand = '#FFF8F0';
+const sunrise = {
+    tint: '#FFE9DF',
+    600: '#FF5A2B',
+    700: '#B8380C',
+    800: '#8F2C08',
+    onSunrise: '#2A1206'
+};
+const shadowSand = {
+    sm: '0 1px 1px rgba(60, 30, 10, 0.06)',
+    md: '0 1px 2px rgba(60, 30, 10, 0.05), 0 8px 20px -8px rgba(90, 40, 10, 0.18)',
+    lg: '0 2px 4px rgba(60, 30, 10, 0.06), 0 16px 40px -12px rgba(90, 40, 10, 0.28)'
+};
+const orangeTheme = {
+    ...base_base,
+    primary: sunrise[600],
+    onPrimary: sunrise.onSunrise,
+    secondary: sand[200],
+    onSecondary: sand[900],
+    surface: paperSand,
+    tertiary: sunrise.tint,
+    onTertiary: sunrise[700],
+    error: ember["600"],
+    onError: ember.onEmber,
+    focus: sunrise[700],
+    textDefault: sand[900],
+    textMuted: sand[700],
+    statusInfoBg: dusk.tint,
+    statusInfoText: dusk["600"],
+    statusSuccessBg: moss.tint,
+    statusSuccessText: moss["700"],
+    statusWarningBg: saffron.tint,
+    statusWarningText: saffron["700"],
+    statusErrorBg: ember.tint,
+    statusErrorText: ember["600"],
+    borderColorDefault: sand[200],
+    shadowSm: shadowSand.sm,
+    shadowMd: shadowSand.md,
+    shadowLg: shadowSand.lg,
+    elevationRaised: shadowSand.sm,
+    elevationOverlay: shadowSand.md,
+    elevationModal: shadowSand.lg
+};
+const orangeHighContrastTheme = {
+    ...orangeTheme,
+    primary: sunrise[800],
+    onPrimary: '#FFFFFF',
+    onTertiary: sunrise[800],
+    focus: sunrise[800],
+    error: ember["800"],
+    statusErrorText: ember["800"],
+    statusWarningText: saffron["900"],
+    statusSuccessText: moss["900"],
+    borderColorDefault: sand[600]
 };
-const createTheme = (overrides = {})=>({
-        ...defaultTheme,
-        ...overrides
-    });
 const themes = {
     light: {
-        normal: defaultTheme,
-        high: highContrastTheme
+        normal: lightTheme,
+        high: lightHighContrastTheme
     },
     dark: {
         normal: darkTheme,
         high: darkHighContrastTheme
+    },
+    orange: {
+        normal: orangeTheme,
+        high: orangeHighContrastTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
     const theme = themes[colorScheme]?.[contrast];
     if (!theme) {
         if ('production' !== process.env.NODE_ENV) console.warn(`[vinyasa] no theme values for colorScheme="${colorScheme}" contrast="${contrast}" yet; falling back to light/normal.`);
-        return defaultTheme;
+        return lightTheme;
     }
     return theme;
 };
 const comfortableSpacing = {
-    space1: defaultTheme.space1,
-    space2: defaultTheme.space2,
-    space3: defaultTheme.space3,
-    space4: defaultTheme.space4,
-    space5: defaultTheme.space5,
-    space6: defaultTheme.space6
+    space1: base_base.space1,
+    space2: base_base.space2,
+    space3: base_base.space3,
+    space4: base_base.space4,
+    space5: base_base.space5,
+    space6: base_base.space6
 };
 const compactSpacing = {
     space1: '0.125rem',
@@ -467,7 +541,7 @@ const useThemedRef = (ref)=>{
     return mergeRefs(ref, innerRef);
 };
 var resetScope = '_1k07u5u0';
-const ThemeContext = /*#__PURE__*/ createContext(defaultTheme);
+const ThemeContext = /*#__PURE__*/ createContext(lightTheme);
 const useVinyasaTheme = ()=>useContext(ThemeContext);
 const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
     const base = useMemo(()=>resolveBaseTheme(colorScheme, contrast), [
@@ -505,4 +579,4 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
         })
     });
 };
-export { VinyasaProvider, breakpoints, createTheme, darkHighContrastTheme, darkTheme, defaultTheme, focusRingStyle, grid, highContrastTheme, resolveBaseTheme, resolveDensitySpacing, themeContract, useAssertVinyasaProvider, useThemedRef, useVinyasaTheme };
+export { VinyasaProvider, breakpoints, createTheme, darkHighContrastTheme, darkTheme, focusRingStyle, grid, lightHighContrastTheme, lightTheme, orangeHighContrastTheme, orangeTheme, resolveBaseTheme, resolveDensitySpacing, themeContract, useAssertVinyasaProvider, useThemedRef, useVinyasaTheme };

package/dist/esm/primitives.d.ts

@@ -1,82 +1,33 @@
-export declare const stone: {
-    readonly 50: "#FAFAFC";
-    readonly 100: "#F6F5F8";
-    readonly 200: "#E3E0EA";
-    readonly 300: "#CFCADC";
-    readonly 400: "#A79DBE";
-    readonly 500: "#7C7191";
-    readonly 600: "#5C5470";
-    readonly 700: "#4A4458";
-    readonly 800: "#332E40";
-    readonly 900: "#1E1A28";
-};
-export declare const stoneDark: {
-    readonly 50: "#100E17";
-    readonly 100: "#161320";
-    readonly 200: "#221C30";
-    readonly 300: "#362E4C";
-    readonly 400: "#493D64";
-    readonly 500: "#7C7191";
-    readonly 600: "#B9B3CB";
-    readonly 700: "#D6D2E0";
-    readonly 800: "#E9E7EF";
-    readonly 900: "#F1EFF5";
-};
-export declare const paper = "#FFFFFF";
-export declare const paperDark: "#221C30";
 export declare const dusk: {
     readonly tint: "#EEE9F9";
     readonly 600: "#4B2E8C";
     readonly 700: "#37206B";
     readonly onDusk: "#FFFFFF";
 };
-export declare const duskDark: {
-    readonly tint: "#2E2648";
-    readonly 600: "#B49BEA";
-    readonly 700: "#CBB8F2";
-    readonly onDusk: "#1A1425";
-};
-export declare const sunrise: {
-    readonly tint: "#FFE9DF";
-    readonly 600: "#FF5A2B";
-    readonly 700: "#E64719";
-    readonly onSunrise: "#2A1206";
-};
-export declare const sunriseDark: {
-    readonly tint: "#3D2113";
-    readonly 600: "#FF8354";
-    readonly 700: "#FFA47C";
-    readonly onSunrise: "#200E05";
-};
 export declare const moss: {
     readonly tint: "#E4EEE8";
     readonly 700: "#3F6650";
     readonly 800: "#3B604B";
-};
-export declare const mossDark: {
-    readonly tint: "#22332A";
-    readonly 700: "#7FB89A";
+    readonly 900: "#385B47";
 };
 export declare const ember: {
     readonly tint: "#F7E7E1";
     readonly 600: "#A64B2A";
     readonly 700: "#8E4024";
+    readonly 800: "#863C22";
     readonly onEmber: "#FFFFFF";
 };
-export declare const emberDark: {
-    readonly tint: "#3A281F";
-    readonly 600: "#E08D6D";
-    readonly 700: "#E3977A";
-    readonly onEmber: "#2A1208";
-};
 export declare const saffron: {
     readonly tint: "#F5EBDD";
     readonly 700: "#A15C1F";
     readonly 800: "#834B19";
+    readonly 900: "#7C4717";
 };
-export declare const saffronDark: {
-    readonly tint: "#3A2F1B";
-    readonly 700: "#D9A15C";
+export declare const sunriseDark: {
+    readonly tint: "#3D2113";
+    readonly 600: "#FF8354";
+    readonly 700: "#FFA47C";
+    readonly onSunrise: "#200E05";
 };
 export declare const space: {
     readonly 1: "0.25rem";
@@ -142,16 +93,6 @@ export declare const opacity: {
     readonly disabled: "0.5";
     readonly hover: "0.92";
 };
-export declare const shadow: {
-    readonly sm: "0 1px 1px rgba(30, 20, 50, 0.06)";
-    readonly md: "0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)";
-    readonly lg: "0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)";
-};
-export declare const shadowDark: {
-    readonly sm: "0 1px 1px rgba(0, 0, 0, 0.45)";
-    readonly md: "0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)";
-    readonly lg: "0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)";
-};
 export declare const blur: {
     readonly sm: "4px";
     readonly md: "8px";

package/dist/esm/{theme.d.ts → themes/base.d.ts}

@@ -77,8 +77,55 @@ export interface VinyasaTheme {
     zIndexToast: string;
     zIndexTooltip: string;
 }
-export declare const defaultTheme: VinyasaTheme;
-export declare const darkTheme: VinyasaTheme;
-export declare const highContrastTheme: VinyasaTheme;
-export declare const darkHighContrastTheme: VinyasaTheme;
-export declare const createTheme: (overrides?: Partial<VinyasaTheme>) => VinyasaTheme;
+export declare const base: {
+    readonly space1: "0.25rem";
+    readonly space2: "0.5rem";
+    readonly space3: "0.625rem";
+    readonly space4: "1rem";
+    readonly space5: "1.25rem";
+    readonly space6: "1.5rem";
+    readonly radiusSm: "0.25rem";
+    readonly radiusMd: "0.5rem";
+    readonly radiusFull: "9999px";
+    readonly borderWidthThin: "1px";
+    readonly fontFamilySans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+    readonly fontFamilyMono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+    readonly fontSizeXs: "0.75rem";
+    readonly fontSizeSm: "0.875rem";
+    readonly fontSizeMd: "1rem";
+    readonly fontSizeLg: "1.125rem";
+    readonly fontSizeXl: "1.25rem";
+    readonly fontSize2xl: "1.5rem";
+    readonly fontSize3xl: "1.875rem";
+    readonly fontSize4xl: "2.25rem";
+    readonly fontWeightRegular: "400";
+    readonly fontWeightMedium: "500";
+    readonly fontWeightSemibold: "600";
+    readonly fontWeightBold: "700";
+    readonly letterSpacingTight: "-0.01em";
+    readonly letterSpacingNormal: "0";
+    readonly letterSpacingWide: "0.02em";
+    readonly lineHeightTight: "1";
+    readonly lineHeightNormal: "1.5";
+    readonly lineHeightLoose: "1.75";
+    readonly motionDurationInstant: "100ms";
+    readonly motionDurationFast: "150ms";
+    readonly motionDurationNormal: "250ms";
+    readonly motionDurationSlow: "400ms";
+    readonly motionEasingStandard: "ease";
+    readonly motionEasingIn: "ease-in";
+    readonly motionEasingOut: "ease-out";
+    readonly motionEasingInOut: "ease-in-out";
+    readonly focusRingWidth: "2px";
+    readonly focusRingOffset: "2px";
+    readonly opacityDisabled: "0.5";
+    readonly opacityHover: "0.92";
+    readonly blurSm: "4px";
+    readonly blurMd: "8px";
+    readonly blurLg: "16px";
+    readonly zIndexDropdown: "1000";
+    readonly zIndexOverlay: "1100";
+    readonly zIndexModal: "1200";
+    readonly zIndexToast: "1300";
+    readonly zIndexTooltip: "1400";
+};

package/dist/esm/themes/dark.d.ts

@@ -0,0 +1,3 @@
+import { type VinyasaTheme } from './base';
+export declare const darkTheme: VinyasaTheme;
+export declare const darkHighContrastTheme: VinyasaTheme;

package/dist/esm/themes/light.d.ts

@@ -0,0 +1,4 @@
+import { type VinyasaTheme } from './base';
+export declare const lightTheme: VinyasaTheme;
+export declare const lightHighContrastTheme: VinyasaTheme;
+export declare const createTheme: (overrides?: Partial<VinyasaTheme>) => VinyasaTheme;

package/dist/esm/themes/orange.d.ts

@@ -0,0 +1,3 @@
+import { type VinyasaTheme } from './base';
+export declare const orangeTheme: VinyasaTheme;
+export declare const orangeHighContrastTheme: VinyasaTheme;

package/dist/esm/themes.d.ts

@@ -1,4 +1,4 @@
-import { type VinyasaTheme } from './theme';
-export type ColorScheme = 'light' | 'dark';
+import type { VinyasaTheme } from './themes/base';
+export type ColorScheme = 'light' | 'dark' | 'orange';
 export type Contrast = 'normal' | 'high';
 export declare const resolveBaseTheme: (colorScheme: ColorScheme, contrast: Contrast) => VinyasaTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/tokens",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -47,8 +47,8 @@
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "lint": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__test__/**",
-    "lint:fix": "eslint --config ../../configs/eslint.config.mjs src/**/*.{ts,tsx} --ignore-pattern src/**/__test__/** --fix",
+    "lint": "eslint --config ../../configs/eslint.config.mjs 'src/**/*.{ts,tsx}' --ignore-pattern 'src/**/__test__/**'",
+    "lint:fix": "eslint --config ../../configs/eslint.config.mjs 'src/**/*.{ts,tsx}' --ignore-pattern 'src/**/__test__/**' --fix",
     "format": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --write",
     "format:check": "prettier . --config ../../configs/prettier.config.json --ignore-path ../../configs/.prettierignore --check",
     "test": "vitest run --config vitest.config.ts",