@vinyasa/tokens 1.0.22 → 1.0.24

package/dist/cjs/index.cjs

@@ -31,13 +31,17 @@ __webpack_require__.d(__webpack_exports__, {
     VinyasaProvider: ()=>VinyasaProvider,
     breakpoints: ()=>breakpoints,
     createTheme: ()=>createTheme,
+    darkHighContrastTheme: ()=>darkHighContrastTheme,
     darkTheme: ()=>darkTheme,
     defaultTheme: ()=>defaultTheme,
     focusRingStyle: ()=>focusRingStyle,
     grid: ()=>grid,
+    highContrastTheme: ()=>highContrastTheme,
     resolveBaseTheme: ()=>resolveBaseTheme,
     resolveDensitySpacing: ()=>resolveDensitySpacing,
     themeContract: ()=>themeContract,
+    useAssertVinyasaProvider: ()=>useAssertVinyasaProvider,
+    useThemedRef: ()=>useThemedRef,
     useVinyasaTheme: ()=>useVinyasaTheme
 });
 var themeContract = {
@@ -51,6 +55,7 @@ var themeContract = {
     error: 'var(--vinyasa-error)',
     onError: 'var(--vinyasa-on-error)',
     focus: 'var(--vinyasa-focus)',
+    textDefault: 'var(--vinyasa-text-default)',
     textMuted: 'var(--vinyasa-text-muted)',
     statusInfoBg: 'var(--vinyasa-status-info-bg)',
     statusInfoText: 'var(--vinyasa-status-info-text)',
@@ -163,7 +168,8 @@ const duskDark = {
 };
 const moss = {
     tint: '#E4EEE8',
-    700: '#3F6650'
+    700: '#3F6650',
+    800: '#3B604B'
 };
 const mossDark = {
     tint: '#22332A',
@@ -172,16 +178,19 @@ const mossDark = {
 const ember = {
     tint: '#F7E7E1',
     600: '#A64B2A',
+    700: '#8E4024',
     onEmber: '#FFFFFF'
 };
 const emberDark = {
     tint: '#3A281F',
     600: '#E08D6D',
+    700: '#E3977A',
     onEmber: '#2A1208'
 };
 const saffron = {
     tint: '#F5EBDD',
-    700: '#A15C1F'
+    700: '#A15C1F',
+    800: '#834B19'
 };
 const saffronDark = {
     tint: '#3A2F1B',
@@ -378,6 +387,7 @@ const defaultTheme = _object_spread_props(_object_spread({}, structural), {
     error: ember["600"],
     onError: ember.onEmber,
     focus: dusk["600"],
+    textDefault: stone["900"],
     textMuted: stone["700"],
     statusInfoBg: dusk.tint,
     statusInfoText: dusk["600"],
@@ -406,6 +416,7 @@ const darkTheme = _object_spread_props(_object_spread({}, structural), {
     error: emberDark["600"],
     onError: emberDark.onEmber,
     focus: duskDark["600"],
+    textDefault: stoneDark["900"],
     textMuted: stoneDark["600"],
     statusInfoBg: duskDark.tint,
     statusInfoText: duskDark["600"],
@@ -423,13 +434,33 @@ 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 = _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 createTheme = (overrides = {})=>_object_spread({}, defaultTheme, overrides);
 const themes = {
     light: {
-        normal: defaultTheme
+        normal: defaultTheme,
+        high: highContrastTheme
     },
     dark: {
-        normal: darkTheme
+        normal: darkTheme,
+        high: darkHighContrastTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
@@ -449,8 +480,26 @@ const comfortableSpacing = {
     space5: defaultTheme.space5,
     space6: defaultTheme.space6
 };
+const compactSpacing = {
+    space1: '0.125rem',
+    space2: '0.375rem',
+    space3: '0.5rem',
+    space4: '0.75rem',
+    space5: '1rem',
+    space6: '1.125rem'
+};
+const spaciousSpacing = {
+    space1: '0.375rem',
+    space2: '0.75rem',
+    space3: '0.875rem',
+    space4: '1.5rem',
+    space5: '1.875rem',
+    space6: '2.25rem'
+};
 const density_densitySpacing = {
-    comfortable: comfortableSpacing
+    compact: compactSpacing,
+    comfortable: comfortableSpacing,
+    spacious: spaciousSpacing
 };
 const resolveDensitySpacing = (density)=>{
     const spacing = density_densitySpacing[density];
@@ -470,9 +519,35 @@ const grid = {
     columns: 12,
     containerMaxWidth: '1280px'
 };
+const external_react_namespaceObject = require("react");
+const PROBE_CUSTOM_PROPERTY = '--vinyasa-primary';
+let warned = false;
+const useAssertVinyasaProvider = (ref)=>{
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (warned || 'production' === process.env.NODE_ENV) return;
+        const node = ref.current;
+        if (!node) return;
+        const value = getComputedStyle(node).getPropertyValue(PROBE_CUSTOM_PROPERTY).trim();
+        if (!value) {
+            warned = true;
+            console.warn('[vinyasa] rendered without a mounted VinyasaProvider (or outside its DOM subtree, e.g. via a portal) — theme tokens will not resolve. Wrap your app in <VinyasaProvider> from "@vinyasa/tokens".');
+        }
+    }, [
+        ref
+    ]);
+};
+const mergeRefs = (...refs)=>(node)=>{
+        for (const ref of refs)if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    };
+const useThemedRef = (ref)=>{
+    const innerRef = (0, external_react_namespaceObject.useRef)(null);
+    useAssertVinyasaProvider(innerRef);
+    return mergeRefs(ref, innerRef);
+};
 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,
@@ -520,6 +595,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,
@@ -531,25 +607,33 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
 exports.VinyasaProvider = __webpack_exports__.VinyasaProvider;
 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.resolveBaseTheme = __webpack_exports__.resolveBaseTheme;
 exports.resolveDensitySpacing = __webpack_exports__.resolveDensitySpacing;
 exports.themeContract = __webpack_exports__.themeContract;
+exports.useAssertVinyasaProvider = __webpack_exports__.useAssertVinyasaProvider;
+exports.useThemedRef = __webpack_exports__.useThemedRef;
 exports.useVinyasaTheme = __webpack_exports__.useVinyasaTheme;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "VinyasaProvider",
     "breakpoints",
     "createTheme",
+    "darkHighContrastTheme",
     "darkTheme",
     "defaultTheme",
     "focusRingStyle",
     "grid",
+    "highContrastTheme",
     "resolveBaseTheme",
     "resolveDensitySpacing",
     "themeContract",
+    "useAssertVinyasaProvider",
+    "useThemedRef",
     "useVinyasaTheme"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {

package/dist/cjs/index.css

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

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

@@ -9,6 +9,7 @@ export declare const themeContract: {
     error: `var(--${string})`;
     onError: `var(--${string})`;
     focus: `var(--${string})`;
+    textDefault: `var(--${string})`;
     textMuted: `var(--${string})`;
     statusInfoBg: `var(--${string})`;
     statusInfoText: `var(--${string})`;

package/dist/esm/index.css

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

package/dist/esm/index.d.ts

@@ -1,7 +1,9 @@
 export { themeContract } from './contract.css';
 export { focusRingStyle } from './focusRing';
-export { createTheme, darkTheme, defaultTheme, type VinyasaTheme } from './theme';
+export { createTheme, darkHighContrastTheme, darkTheme, defaultTheme, highContrastTheme, type VinyasaTheme, } from './theme';
 export { resolveBaseTheme, type ColorScheme, type Contrast } from './themes';
 export { resolveDensitySpacing, type Density } from './density';
 export { breakpoints, grid } from './layout';
+export { useAssertVinyasaProvider } from './useAssertVinyasaProvider';
+export { useThemedRef } from './useThemedRef';
 export { VinyasaProvider, useVinyasaTheme, type VinyasaProviderProps } from './VinyasaProvider';

package/dist/esm/index.js

@@ -1,6 +1,7 @@
+import "./index.css";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { createContext, useContext, useMemo } from "react";
 var themeContract = {
     primary: 'var(--vinyasa-primary)',
     onPrimary: 'var(--vinyasa-on-primary)',
@@ -12,6 +13,7 @@ var themeContract = {
     error: 'var(--vinyasa-error)',
     onError: 'var(--vinyasa-on-error)',
     focus: 'var(--vinyasa-focus)',
+    textDefault: 'var(--vinyasa-text-default)',
     textMuted: 'var(--vinyasa-text-muted)',
     statusInfoBg: 'var(--vinyasa-status-info-bg)',
     statusInfoText: 'var(--vinyasa-status-info-text)',
@@ -124,7 +126,8 @@ const duskDark = {
 };
 const moss = {
     tint: '#E4EEE8',
-    700: '#3F6650'
+    700: '#3F6650',
+    800: '#3B604B'
 };
 const mossDark = {
     tint: '#22332A',
@@ -133,16 +136,19 @@ const mossDark = {
 const ember = {
     tint: '#F7E7E1',
     600: '#A64B2A',
+    700: '#8E4024',
     onEmber: '#FFFFFF'
 };
 const emberDark = {
     tint: '#3A281F',
     600: '#E08D6D',
+    700: '#E3977A',
     onEmber: '#2A1208'
 };
 const saffron = {
     tint: '#F5EBDD',
-    700: '#A15C1F'
+    700: '#A15C1F',
+    800: '#834B19'
 };
 const saffronDark = {
     tint: '#3A2F1B',
@@ -298,6 +304,7 @@ const defaultTheme = {
     error: ember["600"],
     onError: ember.onEmber,
     focus: dusk["600"],
+    textDefault: stone["900"],
     textMuted: stone["700"],
     statusInfoBg: dusk.tint,
     statusInfoText: dusk["600"],
@@ -327,6 +334,7 @@ const darkTheme = {
     error: emberDark["600"],
     onError: emberDark.onEmber,
     focus: duskDark["600"],
+    textDefault: stoneDark["900"],
     textMuted: stoneDark["600"],
     statusInfoBg: duskDark.tint,
     statusInfoText: duskDark["600"],
@@ -344,16 +352,38 @@ 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"]
+};
 const createTheme = (overrides = {})=>({
         ...defaultTheme,
         ...overrides
     });
 const themes = {
     light: {
-        normal: defaultTheme
+        normal: defaultTheme,
+        high: highContrastTheme
     },
     dark: {
-        normal: darkTheme
+        normal: darkTheme,
+        high: darkHighContrastTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
@@ -372,8 +402,26 @@ const comfortableSpacing = {
     space5: defaultTheme.space5,
     space6: defaultTheme.space6
 };
+const compactSpacing = {
+    space1: '0.125rem',
+    space2: '0.375rem',
+    space3: '0.5rem',
+    space4: '0.75rem',
+    space5: '1rem',
+    space6: '1.125rem'
+};
+const spaciousSpacing = {
+    space1: '0.375rem',
+    space2: '0.75rem',
+    space3: '0.875rem',
+    space4: '1.5rem',
+    space5: '1.875rem',
+    space6: '2.25rem'
+};
 const density_densitySpacing = {
-    comfortable: comfortableSpacing
+    compact: compactSpacing,
+    comfortable: comfortableSpacing,
+    spacious: spaciousSpacing
 };
 const resolveDensitySpacing = (density)=>{
     const spacing = density_densitySpacing[density];
@@ -393,6 +441,32 @@ const grid = {
     columns: 12,
     containerMaxWidth: '1280px'
 };
+const PROBE_CUSTOM_PROPERTY = '--vinyasa-primary';
+let warned = false;
+const useAssertVinyasaProvider = (ref)=>{
+    useEffect(()=>{
+        if (warned || 'production' === process.env.NODE_ENV) return;
+        const node = ref.current;
+        if (!node) return;
+        const value = getComputedStyle(node).getPropertyValue(PROBE_CUSTOM_PROPERTY).trim();
+        if (!value) {
+            warned = true;
+            console.warn('[vinyasa] rendered without a mounted VinyasaProvider (or outside its DOM subtree, e.g. via a portal) — theme tokens will not resolve. Wrap your app in <VinyasaProvider> from "@vinyasa/tokens".');
+        }
+    }, [
+        ref
+    ]);
+};
+const mergeRefs = (...refs)=>(node)=>{
+        for (const ref of refs)if ('function' == typeof ref) ref(node);
+        else if (ref) ref.current = node;
+    };
+const useThemedRef = (ref)=>{
+    const innerRef = useRef(null);
+    useAssertVinyasaProvider(innerRef);
+    return mergeRefs(ref, innerRef);
+};
+var resetScope = '_1k07u5u0';
 const ThemeContext = /*#__PURE__*/ createContext(defaultTheme);
 const useVinyasaTheme = ()=>useContext(ThemeContext);
 const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
@@ -422,6 +496,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,
@@ -430,4 +505,4 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
         })
     });
 };
-export { VinyasaProvider, breakpoints, createTheme, darkTheme, defaultTheme, focusRingStyle, grid, resolveBaseTheme, resolveDensitySpacing, themeContract, useVinyasaTheme };
+export { VinyasaProvider, breakpoints, createTheme, darkHighContrastTheme, darkTheme, defaultTheme, focusRingStyle, grid, highContrastTheme, resolveBaseTheme, resolveDensitySpacing, themeContract, useAssertVinyasaProvider, useThemedRef, useVinyasaTheme };

package/dist/esm/primitives.d.ts

@@ -51,6 +51,7 @@ export declare const sunriseDark: {
 export declare const moss: {
     readonly tint: "#E4EEE8";
     readonly 700: "#3F6650";
+    readonly 800: "#3B604B";
 };
 export declare const mossDark: {
     readonly tint: "#22332A";
@@ -59,16 +60,19 @@ export declare const mossDark: {
 export declare const ember: {
     readonly tint: "#F7E7E1";
     readonly 600: "#A64B2A";
+    readonly 700: "#8E4024";
     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";
 };
 export declare const saffronDark: {
     readonly tint: "#3A2F1B";

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

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

package/dist/esm/theme.d.ts

@@ -9,6 +9,7 @@ export interface VinyasaTheme {
     error: string;
     onError: string;
     focus: string;
+    textDefault: string;
     textMuted: string;
     statusInfoBg: string;
     statusInfoText: string;
@@ -78,4 +79,6 @@ export interface VinyasaTheme {
 }
 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;

package/dist/esm/useAssertVinyasaProvider.d.ts

@@ -0,0 +1,13 @@
+import { type RefObject } from 'react';
+/**
+ * Dev-mode-only check that `ref`'s node actually sits inside a mounted
+ * `VinyasaProvider`'s DOM subtree. Reads the probe custom property via
+ * `getComputedStyle` on the real DOM node rather than checking a React
+ * context: the failure this guards against includes a component rendered
+ * *outside* the provider's DOM subtree entirely (e.g. via a portal to
+ * `document.body`, the exact scoping issue Toaster/Dialog/Select's own
+ * comments describe) — a React context would still see the provider as an
+ * ancestor in that case, even though the actual rendered element is nowhere
+ * near it and every `var(--vinyasa-*)` on it resolves to nothing.
+ */
+export declare const useAssertVinyasaProvider: (ref: RefObject<Element | null>) => void;

package/dist/esm/useThemedRef.d.ts

@@ -0,0 +1,2 @@
+import { type Ref } from 'react';
+export declare const useThemedRef: <T extends Element>(ref?: Ref<T>) => Ref<T>;

package/package.json

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