@vinyasa/tokens 1.0.21 → 1.0.23

package/dist/cjs/index.cjs

@@ -31,7 +31,9 @@ __webpack_require__.d(__webpack_exports__, {
     VinyasaProvider: ()=>VinyasaProvider,
     breakpoints: ()=>breakpoints,
     createTheme: ()=>createTheme,
+    darkTheme: ()=>darkTheme,
     defaultTheme: ()=>defaultTheme,
+    focusRingStyle: ()=>focusRingStyle,
     grid: ()=>grid,
     resolveBaseTheme: ()=>resolveBaseTheme,
     resolveDensitySpacing: ()=>resolveDensitySpacing,
@@ -43,6 +45,7 @@ var themeContract = {
     onPrimary: 'var(--vinyasa-on-primary)',
     secondary: 'var(--vinyasa-secondary)',
     onSecondary: 'var(--vinyasa-on-secondary)',
+    surface: 'var(--vinyasa-surface)',
     tertiary: 'var(--vinyasa-tertiary)',
     onTertiary: 'var(--vinyasa-on-tertiary)',
     error: 'var(--vinyasa-error)',
@@ -115,37 +118,74 @@ var themeContract = {
     zIndexToast: 'var(--vinyasa-z-index-toast)',
     zIndexTooltip: 'var(--vinyasa-z-index-tooltip)'
 };
-const gray = {
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827'
-};
-const blue = {
-    100: '#dbeafe',
-    500: '#2563eb',
-    700: '#1d4ed8'
-};
-const indigo = {
-    600: '#4f46e5'
-};
-const red = {
-    100: '#fee2e2',
-    600: '#dc2626'
-};
-const green = {
-    100: '#dcfce7',
-    700: '#15803d'
-};
-const amber = {
-    100: '#fef3c7',
-    700: '#b45309'
+const focusRingStyle = (vars)=>({
+        outline: 'none',
+        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'
+};
+const mossDark = {
+    tint: '#22332A',
+    700: '#7FB89A'
+};
+const ember = {
+    tint: '#F7E7E1',
+    600: '#A64B2A',
+    onEmber: '#FFFFFF'
+};
+const emberDark = {
+    tint: '#3A281F',
+    600: '#E08D6D',
+    onEmber: '#2A1208'
+};
+const saffron = {
+    tint: '#F5EBDD',
+    700: '#A15C1F'
+};
+const saffronDark = {
+    tint: '#3A2F1B',
+    700: '#D9A15C'
 };
 const space = {
     1: '0.25rem',
@@ -164,8 +204,8 @@ const borderWidth = {
     thin: '1px'
 };
 const fontFamily = {
-    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    mono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
 };
 const fontSize = {
     xs: '0.75rem',
@@ -212,9 +252,14 @@ const opacity = {
     hover: '0.92'
 };
 const shadow = {
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)'
+    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',
@@ -251,25 +296,26 @@ function _object_spread(target) {
     }
     return target;
 }
-const defaultTheme = {
-    primary: indigo["600"],
-    onPrimary: '#ffffff',
-    secondary: gray["100"],
-    onSecondary: gray["900"],
-    tertiary: blue["100"],
-    onTertiary: blue["700"],
-    error: red["600"],
-    onError: '#ffffff',
-    focus: blue["500"],
-    textMuted: gray["500"],
-    statusInfoBg: blue["100"],
-    statusInfoText: blue["700"],
-    statusSuccessBg: green["100"],
-    statusSuccessText: green["700"],
-    statusWarningBg: amber["100"],
-    statusWarningText: amber["700"],
-    statusErrorBg: red["100"],
-    statusErrorText: red["600"],
+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 = {
     space1: space["1"],
     space2: space["2"],
     space3: space["3"],
@@ -280,7 +326,6 @@ const defaultTheme = {
     radiusMd: radius.md,
     radiusFull: radius.full,
     borderWidthThin: borderWidth.thin,
-    borderColorDefault: gray["200"],
     fontFamilySans: fontFamily.sans,
     fontFamilyMono: fontFamily.mono,
     fontSizeXs: fontSize.xs,
@@ -313,12 +358,6 @@ const defaultTheme = {
     focusRingOffset: focusRing.offset,
     opacityDisabled: opacity.disabled,
     opacityHover: opacity.hover,
-    shadowSm: shadow.sm,
-    shadowMd: shadow.md,
-    shadowLg: shadow.lg,
-    elevationRaised: shadow.sm,
-    elevationOverlay: shadow.md,
-    elevationModal: shadow.lg,
     blurSm: primitives_blur.sm,
     blurMd: primitives_blur.md,
     blurLg: primitives_blur.lg,
@@ -328,10 +367,69 @@ const defaultTheme = {
     zIndexToast: zIndex.toast,
     zIndexTooltip: zIndex.tooltip
 };
+const defaultTheme = _object_spread_props(_object_spread({}, structural), {
+    primary: dusk["600"],
+    onPrimary: dusk.onDusk,
+    secondary: stone["200"],
+    onSecondary: stone["900"],
+    surface: paper,
+    tertiary: dusk.tint,
+    onTertiary: dusk["600"],
+    error: ember["600"],
+    onError: ember.onEmber,
+    focus: dusk["600"],
+    textMuted: stone["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: stone["200"],
+    shadowSm: shadow.sm,
+    shadowMd: shadow.md,
+    shadowLg: shadow.lg,
+    elevationRaised: shadow.sm,
+    elevationOverlay: shadow.md,
+    elevationModal: shadow.lg
+});
+const darkTheme = _object_spread_props(_object_spread({}, structural), {
+    primary: duskDark["600"],
+    onPrimary: duskDark.onDusk,
+    secondary: stoneDark["300"],
+    onSecondary: stoneDark["900"],
+    surface: paperDark,
+    tertiary: duskDark.tint,
+    onTertiary: duskDark["600"],
+    error: emberDark["600"],
+    onError: emberDark.onEmber,
+    focus: duskDark["600"],
+    textMuted: stoneDark["600"],
+    statusInfoBg: duskDark.tint,
+    statusInfoText: duskDark["600"],
+    statusSuccessBg: mossDark.tint,
+    statusSuccessText: mossDark["700"],
+    statusWarningBg: saffronDark.tint,
+    statusWarningText: saffronDark["700"],
+    statusErrorBg: emberDark.tint,
+    statusErrorText: emberDark["600"],
+    borderColorDefault: stoneDark["300"],
+    shadowSm: shadowDark.sm,
+    shadowMd: shadowDark.md,
+    shadowLg: shadowDark.lg,
+    elevationRaised: shadowDark.sm,
+    elevationOverlay: shadowDark.md,
+    elevationModal: shadowDark.lg
+});
 const createTheme = (overrides = {})=>_object_spread({}, defaultTheme, overrides);
 const themes = {
     light: {
         normal: defaultTheme
+    },
+    dark: {
+        normal: darkTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
@@ -375,6 +473,7 @@ const grid = {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const dynamic_namespaceObject = require("@vanilla-extract/dynamic");
 const external_react_namespaceObject = require("react");
+var resetScope = '_1k07u5u0';
 function VinyasaProvider_define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -422,6 +521,7 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ThemeContext.Provider, {
         value: resolvedTheme,
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            className: resetScope,
             style: style,
             "data-vinyasa-color-scheme": colorScheme,
             "data-vinyasa-contrast": contrast,
@@ -433,7 +533,9 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
 exports.VinyasaProvider = __webpack_exports__.VinyasaProvider;
 exports.breakpoints = __webpack_exports__.breakpoints;
 exports.createTheme = __webpack_exports__.createTheme;
+exports.darkTheme = __webpack_exports__.darkTheme;
 exports.defaultTheme = __webpack_exports__.defaultTheme;
+exports.focusRingStyle = __webpack_exports__.focusRingStyle;
 exports.grid = __webpack_exports__.grid;
 exports.resolveBaseTheme = __webpack_exports__.resolveBaseTheme;
 exports.resolveDensitySpacing = __webpack_exports__.resolveDensitySpacing;
@@ -443,7 +545,9 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "VinyasaProvider",
     "breakpoints",
     "createTheme",
+    "darkTheme",
     "defaultTheme",
+    "focusRingStyle",
     "grid",
     "resolveBaseTheme",
     "resolveDensitySpacing",

package/dist/cjs/index.css

@@ -0,0 +1,4 @@
+._1k07u5u0, ._1k07u5u0 * {
+  box-sizing: border-box;
+}
+

package/dist/esm/contract.css.d.ts

@@ -3,6 +3,7 @@ export declare const themeContract: {
     onPrimary: `var(--${string})`;
     secondary: `var(--${string})`;
     onSecondary: `var(--${string})`;
+    surface: `var(--${string})`;
     tertiary: `var(--${string})`;
     onTertiary: `var(--${string})`;
     error: `var(--${string})`;

package/dist/esm/focusRing.d.ts

@@ -0,0 +1,8 @@
+import type { themeContract } from './contract.css';
+type ThemeVars = typeof themeContract;
+export declare const focusRingStyle: (vars: ThemeVars) => {
+    outline: string;
+    borderColor: `var(--${string})`;
+    boxShadow: string;
+};
+export {};

package/dist/esm/index.css

@@ -0,0 +1,4 @@
+._1k07u5u0, ._1k07u5u0 * {
+  box-sizing: border-box;
+}
+

package/dist/esm/index.d.ts

@@ -1,5 +1,6 @@
 export { themeContract } from './contract.css';
-export { createTheme, defaultTheme, type VinyasaTheme } from './theme';
+export { focusRingStyle } from './focusRing';
+export { createTheme, darkTheme, defaultTheme, type VinyasaTheme } from './theme';
 export { resolveBaseTheme, type ColorScheme, type Contrast } from './themes';
 export { resolveDensitySpacing, type Density } from './density';
 export { breakpoints, grid } from './layout';

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+import "./index.css";
 import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { createContext, useContext, useMemo } from "react";
@@ -6,6 +7,7 @@ var themeContract = {
     onPrimary: 'var(--vinyasa-on-primary)',
     secondary: 'var(--vinyasa-secondary)',
     onSecondary: 'var(--vinyasa-on-secondary)',
+    surface: 'var(--vinyasa-surface)',
     tertiary: 'var(--vinyasa-tertiary)',
     onTertiary: 'var(--vinyasa-on-tertiary)',
     error: 'var(--vinyasa-error)',
@@ -78,37 +80,74 @@ var themeContract = {
     zIndexToast: 'var(--vinyasa-z-index-toast)',
     zIndexTooltip: 'var(--vinyasa-z-index-tooltip)'
 };
-const gray = {
-    50: '#f9fafb',
-    100: '#f3f4f6',
-    200: '#e5e7eb',
-    300: '#d1d5db',
-    400: '#9ca3af',
-    500: '#6b7280',
-    600: '#4b5563',
-    700: '#374151',
-    800: '#1f2937',
-    900: '#111827'
-};
-const blue = {
-    100: '#dbeafe',
-    500: '#2563eb',
-    700: '#1d4ed8'
-};
-const indigo = {
-    600: '#4f46e5'
-};
-const red = {
-    100: '#fee2e2',
-    600: '#dc2626'
-};
-const green = {
-    100: '#dcfce7',
-    700: '#15803d'
-};
-const amber = {
-    100: '#fef3c7',
-    700: '#b45309'
+const focusRingStyle = (vars)=>({
+        outline: 'none',
+        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'
+};
+const mossDark = {
+    tint: '#22332A',
+    700: '#7FB89A'
+};
+const ember = {
+    tint: '#F7E7E1',
+    600: '#A64B2A',
+    onEmber: '#FFFFFF'
+};
+const emberDark = {
+    tint: '#3A281F',
+    600: '#E08D6D',
+    onEmber: '#2A1208'
+};
+const saffron = {
+    tint: '#F5EBDD',
+    700: '#A15C1F'
+};
+const saffronDark = {
+    tint: '#3A2F1B',
+    700: '#D9A15C'
 };
 const space = {
     1: '0.25rem',
@@ -127,8 +166,8 @@ const borderWidth = {
     thin: '1px'
 };
 const fontFamily = {
-    sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-    mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+    sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+    mono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
 };
 const fontSize = {
     xs: '0.75rem',
@@ -175,9 +214,14 @@ const opacity = {
     hover: '0.92'
 };
 const shadow = {
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)'
+    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',
@@ -191,25 +235,7 @@ const zIndex = {
     toast: '1300',
     tooltip: '1400'
 };
-const defaultTheme = {
-    primary: indigo["600"],
-    onPrimary: '#ffffff',
-    secondary: gray["100"],
-    onSecondary: gray["900"],
-    tertiary: blue["100"],
-    onTertiary: blue["700"],
-    error: red["600"],
-    onError: '#ffffff',
-    focus: blue["500"],
-    textMuted: gray["500"],
-    statusInfoBg: blue["100"],
-    statusInfoText: blue["700"],
-    statusSuccessBg: green["100"],
-    statusSuccessText: green["700"],
-    statusWarningBg: amber["100"],
-    statusWarningText: amber["700"],
-    statusErrorBg: red["100"],
-    statusErrorText: red["600"],
+const structural = {
     space1: space["1"],
     space2: space["2"],
     space3: space["3"],
@@ -220,7 +246,6 @@ const defaultTheme = {
     radiusMd: radius.md,
     radiusFull: radius.full,
     borderWidthThin: borderWidth.thin,
-    borderColorDefault: gray["200"],
     fontFamilySans: fontFamily.sans,
     fontFamilyMono: fontFamily.mono,
     fontSizeXs: fontSize.xs,
@@ -253,12 +278,6 @@ const defaultTheme = {
     focusRingOffset: focusRing.offset,
     opacityDisabled: opacity.disabled,
     opacityHover: opacity.hover,
-    shadowSm: shadow.sm,
-    shadowMd: shadow.md,
-    shadowLg: shadow.lg,
-    elevationRaised: shadow.sm,
-    elevationOverlay: shadow.md,
-    elevationModal: shadow.lg,
     blurSm: primitives_blur.sm,
     blurMd: primitives_blur.md,
     blurLg: primitives_blur.lg,
@@ -268,6 +287,64 @@ const defaultTheme = {
     zIndexToast: zIndex.toast,
     zIndexTooltip: zIndex.tooltip
 };
+const defaultTheme = {
+    ...structural,
+    primary: dusk["600"],
+    onPrimary: dusk.onDusk,
+    secondary: stone["200"],
+    onSecondary: stone["900"],
+    surface: paper,
+    tertiary: dusk.tint,
+    onTertiary: dusk["600"],
+    error: ember["600"],
+    onError: ember.onEmber,
+    focus: dusk["600"],
+    textMuted: stone["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: stone["200"],
+    shadowSm: shadow.sm,
+    shadowMd: shadow.md,
+    shadowLg: shadow.lg,
+    elevationRaised: shadow.sm,
+    elevationOverlay: shadow.md,
+    elevationModal: shadow.lg
+};
+const darkTheme = {
+    ...structural,
+    primary: duskDark["600"],
+    onPrimary: duskDark.onDusk,
+    secondary: stoneDark["300"],
+    onSecondary: stoneDark["900"],
+    surface: paperDark,
+    tertiary: duskDark.tint,
+    onTertiary: duskDark["600"],
+    error: emberDark["600"],
+    onError: emberDark.onEmber,
+    focus: duskDark["600"],
+    textMuted: stoneDark["600"],
+    statusInfoBg: duskDark.tint,
+    statusInfoText: duskDark["600"],
+    statusSuccessBg: mossDark.tint,
+    statusSuccessText: mossDark["700"],
+    statusWarningBg: saffronDark.tint,
+    statusWarningText: saffronDark["700"],
+    statusErrorBg: emberDark.tint,
+    statusErrorText: emberDark["600"],
+    borderColorDefault: stoneDark["300"],
+    shadowSm: shadowDark.sm,
+    shadowMd: shadowDark.md,
+    shadowLg: shadowDark.lg,
+    elevationRaised: shadowDark.sm,
+    elevationOverlay: shadowDark.md,
+    elevationModal: shadowDark.lg
+};
 const createTheme = (overrides = {})=>({
         ...defaultTheme,
         ...overrides
@@ -275,6 +352,9 @@ const createTheme = (overrides = {})=>({
 const themes = {
     light: {
         normal: defaultTheme
+    },
+    dark: {
+        normal: darkTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
@@ -314,6 +394,7 @@ const grid = {
     columns: 12,
     containerMaxWidth: '1280px'
 };
+var resetScope = '_1k07u5u0';
 const ThemeContext = /*#__PURE__*/ createContext(defaultTheme);
 const useVinyasaTheme = ()=>useContext(ThemeContext);
 const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
@@ -343,6 +424,7 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
     return /*#__PURE__*/ jsx(ThemeContext.Provider, {
         value: resolvedTheme,
         children: /*#__PURE__*/ jsx("div", {
+            className: resetScope,
             style: style,
             "data-vinyasa-color-scheme": colorScheme,
             "data-vinyasa-contrast": contrast,
@@ -351,4 +433,4 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
         })
     });
 };
-export { VinyasaProvider, breakpoints, createTheme, defaultTheme, grid, resolveBaseTheme, resolveDensitySpacing, themeContract, useVinyasaTheme };
+export { VinyasaProvider, breakpoints, createTheme, darkTheme, defaultTheme, focusRingStyle, grid, resolveBaseTheme, resolveDensitySpacing, themeContract, useVinyasaTheme };

package/dist/esm/primitives.d.ts

@@ -1,34 +1,78 @@
-export declare const gray: {
-    readonly 50: "#f9fafb";
-    readonly 100: "#f3f4f6";
-    readonly 200: "#e5e7eb";
-    readonly 300: "#d1d5db";
-    readonly 400: "#9ca3af";
-    readonly 500: "#6b7280";
-    readonly 600: "#4b5563";
-    readonly 700: "#374151";
-    readonly 800: "#1f2937";
-    readonly 900: "#111827";
-};
-export declare const blue: {
-    readonly 100: "#dbeafe";
-    readonly 500: "#2563eb";
-    readonly 700: "#1d4ed8";
-};
-export declare const indigo: {
-    readonly 600: "#4f46e5";
-};
-export declare const red: {
-    readonly 100: "#fee2e2";
-    readonly 600: "#dc2626";
-};
-export declare const green: {
-    readonly 100: "#dcfce7";
-    readonly 700: "#15803d";
-};
-export declare const amber: {
-    readonly 100: "#fef3c7";
-    readonly 700: "#b45309";
+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";
+};
+export declare const mossDark: {
+    readonly tint: "#22332A";
+    readonly 700: "#7FB89A";
+};
+export declare const ember: {
+    readonly tint: "#F7E7E1";
+    readonly 600: "#A64B2A";
+    readonly onEmber: "#FFFFFF";
+};
+export declare const emberDark: {
+    readonly tint: "#3A281F";
+    readonly 600: "#E08D6D";
+    readonly onEmber: "#2A1208";
+};
+export declare const saffron: {
+    readonly tint: "#F5EBDD";
+    readonly 700: "#A15C1F";
+};
+export declare const saffronDark: {
+    readonly tint: "#3A2F1B";
+    readonly 700: "#D9A15C";
 };
 export declare const space: {
     readonly 1: "0.25rem";
@@ -47,8 +91,8 @@ export declare const borderWidth: {
     readonly thin: "1px";
 };
 export declare const fontFamily: {
-    readonly sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
-    readonly mono: "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
+    readonly sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif";
+    readonly mono: "'IBM Plex Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace";
 };
 export declare const fontSize: {
     readonly xs: "0.75rem";
@@ -95,9 +139,14 @@ export declare const opacity: {
     readonly hover: "0.92";
 };
 export declare const shadow: {
-    readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
-    readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
-    readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
+    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";

package/dist/esm/reset.css.d.ts

@@ -0,0 +1 @@
+export declare const resetScope: string;

package/dist/esm/theme.d.ts

@@ -3,6 +3,7 @@ export interface VinyasaTheme {
     onPrimary: string;
     secondary: string;
     onSecondary: string;
+    surface: string;
     tertiary: string;
     onTertiary: string;
     error: string;
@@ -76,4 +77,5 @@ export interface VinyasaTheme {
     zIndexTooltip: string;
 }
 export declare const defaultTheme: VinyasaTheme;
+export declare const darkTheme: VinyasaTheme;
 export declare const createTheme: (overrides?: Partial<VinyasaTheme>) => VinyasaTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/tokens",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "private": false,
   "type": "module",
   "sideEffects": [