@vinyasa/tokens 1.0.16 → 1.0.17

package/README.md

@@ -1,6 +1,6 @@
 # @vinyasa/tokens
 
-The shared design-token and theming foundation for `@vinyasa/*` components: a color/spacing/typography/motion contract plus a `VinyasaProvider` that resolves and injects real values at runtime.
+The shared design-token and theming foundation for `@vinyasa/*` components: color, spacing, radius, typography, motion, focus rings, opacity, shadows, elevation, blur, and z-index tokens, plus static breakpoint/grid values and a `VinyasaProvider` that resolves and injects the themeable tokens at runtime.
 
 ## Installation
 
@@ -31,7 +31,10 @@ 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]`.
-2. **Semantic contract** (`themeContract`, exported from this package) — a flat, brand-role naming tier: `primary`/`onPrimary`, `secondary`/`onSecondary`, `tertiary`/`onTertiary`, `error`/`onError`, plus `focus`, spacing (`space1`–`space6`), radii, font size/weight, line height, motion timing, and `borderWidthThin`. This is what a component's own `.css.ts` file imports and references — never the primitives directly.
+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.
 
 ### Overriding values
@@ -69,13 +72,13 @@ function Component() {
 }
 ```
 
-### `colorScheme` and `contrast`
+### `colorScheme`, `contrast`, and `density`
 
 ```tsx
-<VinyasaProvider colorScheme="light" contrast="normal">
+<VinyasaProvider colorScheme="light" contrast="normal" density="comfortable">
 ```
 
-Only `light`/`normal` values are authored today. The registry these resolve from (`resolveBaseTheme`) is structured so adding `dark` or `high`-contrast values later is purely additive — no changes to the contract, the provider, or any component that consumes it. Requesting an unshipped combination falls back to `light`/`normal` with a console warning in development.
+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.
 
 ## Consuming the contract in your own component
 
@@ -98,15 +101,17 @@ export const root = style({
 
 ## API
 
-| Export                                                            | Description                                                                           |
-| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| `VinyasaProvider`                                                 | React component. Props: `theme?`, `colorScheme?`, `contrast?`, `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) theme values object.                                       |
-| `createTheme(overrides)`                                          | Merges a partial theme onto `defaultTheme`, returning a full `VinyasaTheme`.          |
-| `resolveBaseTheme(colorScheme, contrast)`                         | Looks up the base theme for a scheme/contrast pair, with a dev-mode fallback warning. |
-| `VinyasaTheme`, `ColorScheme`, `Contrast`, `VinyasaProviderProps` | Types.                                                                                |
+| Export                                                                       | Description                                                                             |
+| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `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`.            |
+| `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`.                     |
+| `VinyasaTheme`, `ColorScheme`, `Contrast`, `Density`, `VinyasaProviderProps` | Types.                                                                                  |
 
 ## Development
 

package/dist/cjs/index.cjs

@@ -29,9 +29,12 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     VinyasaProvider: ()=>VinyasaProvider,
+    breakpoints: ()=>breakpoints,
     createTheme: ()=>createTheme,
     defaultTheme: ()=>defaultTheme,
+    grid: ()=>grid,
     resolveBaseTheme: ()=>resolveBaseTheme,
+    resolveDensitySpacing: ()=>resolveDensitySpacing,
     themeContract: ()=>themeContract,
     useVinyasaTheme: ()=>useVinyasaTheme
 });
@@ -55,14 +58,49 @@ var themeContract = {
     radiusMd: 'var(--vinyasa-radius-md)',
     radiusFull: 'var(--vinyasa-radius-full)',
     borderWidthThin: 'var(--vinyasa-border-width-thin)',
+    fontFamilySans: 'var(--vinyasa-font-family-sans)',
+    fontFamilyMono: 'var(--vinyasa-font-family-mono)',
+    fontSizeXs: 'var(--vinyasa-font-size-xs)',
     fontSizeSm: 'var(--vinyasa-font-size-sm)',
     fontSizeMd: 'var(--vinyasa-font-size-md)',
+    fontSizeLg: 'var(--vinyasa-font-size-lg)',
+    fontSizeXl: 'var(--vinyasa-font-size-xl)',
     fontWeightRegular: 'var(--vinyasa-font-weight-regular)',
+    fontWeightMedium: 'var(--vinyasa-font-weight-medium)',
     fontWeightSemibold: 'var(--vinyasa-font-weight-semibold)',
+    fontWeightBold: 'var(--vinyasa-font-weight-bold)',
+    letterSpacingTight: 'var(--vinyasa-letter-spacing-tight)',
+    letterSpacingNormal: 'var(--vinyasa-letter-spacing-normal)',
+    letterSpacingWide: 'var(--vinyasa-letter-spacing-wide)',
     lineHeightTight: 'var(--vinyasa-line-height-tight)',
     lineHeightNormal: 'var(--vinyasa-line-height-normal)',
+    lineHeightLoose: 'var(--vinyasa-line-height-loose)',
+    motionDurationInstant: 'var(--vinyasa-motion-duration-instant)',
     motionDurationFast: 'var(--vinyasa-motion-duration-fast)',
-    motionEasingStandard: 'var(--vinyasa-motion-easing-standard)'
+    motionDurationNormal: 'var(--vinyasa-motion-duration-normal)',
+    motionDurationSlow: 'var(--vinyasa-motion-duration-slow)',
+    motionEasingStandard: 'var(--vinyasa-motion-easing-standard)',
+    motionEasingIn: 'var(--vinyasa-motion-easing-in)',
+    motionEasingOut: 'var(--vinyasa-motion-easing-out)',
+    motionEasingInOut: 'var(--vinyasa-motion-easing-in-out)',
+    focusRingWidth: 'var(--vinyasa-focus-ring-width)',
+    focusRingOffset: 'var(--vinyasa-focus-ring-offset)',
+    opacityDisabled: 'var(--vinyasa-opacity-disabled)',
+    opacityHover: 'var(--vinyasa-opacity-hover)',
+    shadowSm: 'var(--vinyasa-shadow-sm)',
+    shadowMd: 'var(--vinyasa-shadow-md)',
+    shadowLg: 'var(--vinyasa-shadow-lg)',
+    elevationRaised: 'var(--vinyasa-elevation-raised)',
+    elevationOverlay: 'var(--vinyasa-elevation-overlay)',
+    elevationModal: 'var(--vinyasa-elevation-modal)',
+    blurSm: 'var(--vinyasa-blur-sm)',
+    blurMd: 'var(--vinyasa-blur-md)',
+    blurLg: 'var(--vinyasa-blur-lg)',
+    zIndexDropdown: 'var(--vinyasa-z-index-dropdown)',
+    zIndexOverlay: 'var(--vinyasa-z-index-overlay)',
+    zIndexModal: 'var(--vinyasa-z-index-modal)',
+    zIndexToast: 'var(--vinyasa-z-index-toast)',
+    zIndexTooltip: 'var(--vinyasa-z-index-tooltip)'
 };
 const gray = {
     50: '#f9fafb',
@@ -104,21 +142,67 @@ const radius = {
 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"
+};
 const fontSize = {
+    xs: '0.75rem',
     sm: '0.875rem',
-    md: '1rem'
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem'
 };
 const fontWeight = {
     regular: '400',
-    semibold: '600'
+    medium: '500',
+    semibold: '600',
+    bold: '700'
+};
+const letterSpacing = {
+    tight: '-0.01em',
+    normal: '0',
+    wide: '0.02em'
 };
 const lineHeight = {
     tight: '1',
-    normal: '1.5'
+    normal: '1.5',
+    loose: '1.75'
 };
 const motion = {
+    durationInstant: '100ms',
     durationFast: '150ms',
-    easingStandard: 'ease'
+    durationNormal: '250ms',
+    durationSlow: '400ms',
+    easingStandard: 'ease',
+    easingIn: 'ease-in',
+    easingOut: 'ease-out',
+    easingInOut: 'ease-in-out'
+};
+const focusRing = {
+    width: '2px',
+    offset: '2px'
+};
+const opacity = {
+    disabled: '0.5',
+    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)'
+};
+const primitives_blur = {
+    sm: '4px',
+    md: '8px',
+    lg: '16px'
+};
+const zIndex = {
+    dropdown: '1000',
+    overlay: '1100',
+    modal: '1200',
+    toast: '1300',
+    tooltip: '1400'
 };
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
@@ -163,14 +247,49 @@ const defaultTheme = {
     radiusMd: radius.md,
     radiusFull: radius.full,
     borderWidthThin: borderWidth.thin,
+    fontFamilySans: fontFamily.sans,
+    fontFamilyMono: fontFamily.mono,
+    fontSizeXs: fontSize.xs,
     fontSizeSm: fontSize.sm,
     fontSizeMd: fontSize.md,
+    fontSizeLg: fontSize.lg,
+    fontSizeXl: fontSize.xl,
     fontWeightRegular: fontWeight.regular,
+    fontWeightMedium: fontWeight.medium,
     fontWeightSemibold: fontWeight.semibold,
+    fontWeightBold: fontWeight.bold,
+    letterSpacingTight: letterSpacing.tight,
+    letterSpacingNormal: letterSpacing.normal,
+    letterSpacingWide: letterSpacing.wide,
     lineHeightTight: lineHeight.tight,
     lineHeightNormal: lineHeight.normal,
+    lineHeightLoose: lineHeight.loose,
+    motionDurationInstant: motion.durationInstant,
     motionDurationFast: motion.durationFast,
-    motionEasingStandard: motion.easingStandard
+    motionDurationNormal: motion.durationNormal,
+    motionDurationSlow: motion.durationSlow,
+    motionEasingStandard: motion.easingStandard,
+    motionEasingIn: motion.easingIn,
+    motionEasingOut: motion.easingOut,
+    motionEasingInOut: motion.easingInOut,
+    focusRingWidth: focusRing.width,
+    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,
+    zIndexDropdown: zIndex.dropdown,
+    zIndexOverlay: zIndex.overlay,
+    zIndexModal: zIndex.modal,
+    zIndexToast: zIndex.toast,
+    zIndexTooltip: zIndex.tooltip
 };
 const createTheme = (overrides = {})=>_object_spread({}, defaultTheme, overrides);
 const themes = {
@@ -187,6 +306,35 @@ const resolveBaseTheme = (colorScheme, contrast)=>{
     }
     return theme;
 };
+const comfortableSpacing = {
+    space1: defaultTheme.space1,
+    space2: defaultTheme.space2,
+    space3: defaultTheme.space3,
+    space4: defaultTheme.space4,
+    space5: defaultTheme.space5,
+    space6: defaultTheme.space6
+};
+const density_densitySpacing = {
+    comfortable: comfortableSpacing
+};
+const resolveDensitySpacing = (density)=>{
+    const spacing = density_densitySpacing[density];
+    if (!spacing) {
+        if ('production' !== process.env.NODE_ENV) console.warn(`[vinyasa] no spacing values for density="${density}" yet; falling back to comfortable.`);
+        return comfortableSpacing;
+    }
+    return spacing;
+};
+const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px'
+};
+const grid = {
+    columns: 12,
+    containerMaxWidth: '1280px'
+};
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const dynamic_namespaceObject = require("@vanilla-extract/dynamic");
 const external_react_namespaceObject = require("react");
@@ -215,13 +363,17 @@ function VinyasaProvider_object_spread(target) {
 }
 const ThemeContext = /*#__PURE__*/ (0, external_react_namespaceObject.createContext)(defaultTheme);
 const useVinyasaTheme = ()=>(0, external_react_namespaceObject.useContext)(ThemeContext);
-const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', children })=>{
+const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
     const base = (0, external_react_namespaceObject.useMemo)(()=>resolveBaseTheme(colorScheme, contrast), [
         colorScheme,
         contrast
     ]);
-    const resolvedTheme = (0, external_react_namespaceObject.useMemo)(()=>VinyasaProvider_object_spread({}, base, theme), [
+    const densitySpacing = (0, external_react_namespaceObject.useMemo)(()=>resolveDensitySpacing(density), [
+        density
+    ]);
+    const resolvedTheme = (0, external_react_namespaceObject.useMemo)(()=>VinyasaProvider_object_spread({}, base, densitySpacing, theme), [
         base,
+        densitySpacing,
         theme
     ]);
     const cssVars = (0, external_react_namespaceObject.useMemo)(()=>(0, dynamic_namespaceObject.assignInlineVars)(themeContract, resolvedTheme), [
@@ -236,21 +388,28 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', ch
             style: style,
             "data-vinyasa-color-scheme": colorScheme,
             "data-vinyasa-contrast": contrast,
+            "data-vinyasa-density": density,
             children: children
         })
     });
 };
 exports.VinyasaProvider = __webpack_exports__.VinyasaProvider;
+exports.breakpoints = __webpack_exports__.breakpoints;
 exports.createTheme = __webpack_exports__.createTheme;
 exports.defaultTheme = __webpack_exports__.defaultTheme;
+exports.grid = __webpack_exports__.grid;
 exports.resolveBaseTheme = __webpack_exports__.resolveBaseTheme;
+exports.resolveDensitySpacing = __webpack_exports__.resolveDensitySpacing;
 exports.themeContract = __webpack_exports__.themeContract;
 exports.useVinyasaTheme = __webpack_exports__.useVinyasaTheme;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "VinyasaProvider",
+    "breakpoints",
     "createTheme",
     "defaultTheme",
+    "grid",
     "resolveBaseTheme",
+    "resolveDensitySpacing",
     "themeContract",
     "useVinyasaTheme"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/esm/VinyasaProvider.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { type Density } from './density';
 import { type VinyasaTheme } from './theme';
 import { type ColorScheme, type Contrast } from './themes';
 export declare const useVinyasaTheme: () => VinyasaTheme;
@@ -6,6 +7,7 @@ export interface VinyasaProviderProps {
     theme?: Partial<VinyasaTheme>;
     colorScheme?: ColorScheme;
     contrast?: Contrast;
+    density?: Density;
     children: ReactNode;
 }
-export declare const VinyasaProvider: ({ theme, colorScheme, contrast, children, }: VinyasaProviderProps) => import("react").JSX.Element;
+export declare const VinyasaProvider: ({ theme, colorScheme, contrast, density, children, }: VinyasaProviderProps) => import("react").JSX.Element;

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

@@ -18,12 +18,47 @@ export declare const themeContract: {
     radiusMd: `var(--${string})`;
     radiusFull: `var(--${string})`;
     borderWidthThin: `var(--${string})`;
+    fontFamilySans: `var(--${string})`;
+    fontFamilyMono: `var(--${string})`;
+    fontSizeXs: `var(--${string})`;
     fontSizeSm: `var(--${string})`;
     fontSizeMd: `var(--${string})`;
+    fontSizeLg: `var(--${string})`;
+    fontSizeXl: `var(--${string})`;
     fontWeightRegular: `var(--${string})`;
+    fontWeightMedium: `var(--${string})`;
     fontWeightSemibold: `var(--${string})`;
+    fontWeightBold: `var(--${string})`;
+    letterSpacingTight: `var(--${string})`;
+    letterSpacingNormal: `var(--${string})`;
+    letterSpacingWide: `var(--${string})`;
     lineHeightTight: `var(--${string})`;
     lineHeightNormal: `var(--${string})`;
+    lineHeightLoose: `var(--${string})`;
+    motionDurationInstant: `var(--${string})`;
     motionDurationFast: `var(--${string})`;
+    motionDurationNormal: `var(--${string})`;
+    motionDurationSlow: `var(--${string})`;
     motionEasingStandard: `var(--${string})`;
+    motionEasingIn: `var(--${string})`;
+    motionEasingOut: `var(--${string})`;
+    motionEasingInOut: `var(--${string})`;
+    focusRingWidth: `var(--${string})`;
+    focusRingOffset: `var(--${string})`;
+    opacityDisabled: `var(--${string})`;
+    opacityHover: `var(--${string})`;
+    shadowSm: `var(--${string})`;
+    shadowMd: `var(--${string})`;
+    shadowLg: `var(--${string})`;
+    elevationRaised: `var(--${string})`;
+    elevationOverlay: `var(--${string})`;
+    elevationModal: `var(--${string})`;
+    blurSm: `var(--${string})`;
+    blurMd: `var(--${string})`;
+    blurLg: `var(--${string})`;
+    zIndexDropdown: `var(--${string})`;
+    zIndexOverlay: `var(--${string})`;
+    zIndexModal: `var(--${string})`;
+    zIndexToast: `var(--${string})`;
+    zIndexTooltip: `var(--${string})`;
 };

package/dist/esm/density.d.ts

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

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

@@ -21,14 +21,49 @@ var themeContract = {
     radiusMd: 'var(--vinyasa-radius-md)',
     radiusFull: 'var(--vinyasa-radius-full)',
     borderWidthThin: 'var(--vinyasa-border-width-thin)',
+    fontFamilySans: 'var(--vinyasa-font-family-sans)',
+    fontFamilyMono: 'var(--vinyasa-font-family-mono)',
+    fontSizeXs: 'var(--vinyasa-font-size-xs)',
     fontSizeSm: 'var(--vinyasa-font-size-sm)',
     fontSizeMd: 'var(--vinyasa-font-size-md)',
+    fontSizeLg: 'var(--vinyasa-font-size-lg)',
+    fontSizeXl: 'var(--vinyasa-font-size-xl)',
     fontWeightRegular: 'var(--vinyasa-font-weight-regular)',
+    fontWeightMedium: 'var(--vinyasa-font-weight-medium)',
     fontWeightSemibold: 'var(--vinyasa-font-weight-semibold)',
+    fontWeightBold: 'var(--vinyasa-font-weight-bold)',
+    letterSpacingTight: 'var(--vinyasa-letter-spacing-tight)',
+    letterSpacingNormal: 'var(--vinyasa-letter-spacing-normal)',
+    letterSpacingWide: 'var(--vinyasa-letter-spacing-wide)',
     lineHeightTight: 'var(--vinyasa-line-height-tight)',
     lineHeightNormal: 'var(--vinyasa-line-height-normal)',
+    lineHeightLoose: 'var(--vinyasa-line-height-loose)',
+    motionDurationInstant: 'var(--vinyasa-motion-duration-instant)',
     motionDurationFast: 'var(--vinyasa-motion-duration-fast)',
-    motionEasingStandard: 'var(--vinyasa-motion-easing-standard)'
+    motionDurationNormal: 'var(--vinyasa-motion-duration-normal)',
+    motionDurationSlow: 'var(--vinyasa-motion-duration-slow)',
+    motionEasingStandard: 'var(--vinyasa-motion-easing-standard)',
+    motionEasingIn: 'var(--vinyasa-motion-easing-in)',
+    motionEasingOut: 'var(--vinyasa-motion-easing-out)',
+    motionEasingInOut: 'var(--vinyasa-motion-easing-in-out)',
+    focusRingWidth: 'var(--vinyasa-focus-ring-width)',
+    focusRingOffset: 'var(--vinyasa-focus-ring-offset)',
+    opacityDisabled: 'var(--vinyasa-opacity-disabled)',
+    opacityHover: 'var(--vinyasa-opacity-hover)',
+    shadowSm: 'var(--vinyasa-shadow-sm)',
+    shadowMd: 'var(--vinyasa-shadow-md)',
+    shadowLg: 'var(--vinyasa-shadow-lg)',
+    elevationRaised: 'var(--vinyasa-elevation-raised)',
+    elevationOverlay: 'var(--vinyasa-elevation-overlay)',
+    elevationModal: 'var(--vinyasa-elevation-modal)',
+    blurSm: 'var(--vinyasa-blur-sm)',
+    blurMd: 'var(--vinyasa-blur-md)',
+    blurLg: 'var(--vinyasa-blur-lg)',
+    zIndexDropdown: 'var(--vinyasa-z-index-dropdown)',
+    zIndexOverlay: 'var(--vinyasa-z-index-overlay)',
+    zIndexModal: 'var(--vinyasa-z-index-modal)',
+    zIndexToast: 'var(--vinyasa-z-index-toast)',
+    zIndexTooltip: 'var(--vinyasa-z-index-tooltip)'
 };
 const gray = {
     50: '#f9fafb',
@@ -70,21 +105,67 @@ const radius = {
 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"
+};
 const fontSize = {
+    xs: '0.75rem',
     sm: '0.875rem',
-    md: '1rem'
+    md: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem'
 };
 const fontWeight = {
     regular: '400',
-    semibold: '600'
+    medium: '500',
+    semibold: '600',
+    bold: '700'
+};
+const letterSpacing = {
+    tight: '-0.01em',
+    normal: '0',
+    wide: '0.02em'
 };
 const lineHeight = {
     tight: '1',
-    normal: '1.5'
+    normal: '1.5',
+    loose: '1.75'
 };
 const motion = {
+    durationInstant: '100ms',
     durationFast: '150ms',
-    easingStandard: 'ease'
+    durationNormal: '250ms',
+    durationSlow: '400ms',
+    easingStandard: 'ease',
+    easingIn: 'ease-in',
+    easingOut: 'ease-out',
+    easingInOut: 'ease-in-out'
+};
+const focusRing = {
+    width: '2px',
+    offset: '2px'
+};
+const opacity = {
+    disabled: '0.5',
+    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)'
+};
+const primitives_blur = {
+    sm: '4px',
+    md: '8px',
+    lg: '16px'
+};
+const zIndex = {
+    dropdown: '1000',
+    overlay: '1100',
+    modal: '1200',
+    toast: '1300',
+    tooltip: '1400'
 };
 const defaultTheme = {
     primary: indigo["600"],
@@ -106,14 +187,49 @@ const defaultTheme = {
     radiusMd: radius.md,
     radiusFull: radius.full,
     borderWidthThin: borderWidth.thin,
+    fontFamilySans: fontFamily.sans,
+    fontFamilyMono: fontFamily.mono,
+    fontSizeXs: fontSize.xs,
     fontSizeSm: fontSize.sm,
     fontSizeMd: fontSize.md,
+    fontSizeLg: fontSize.lg,
+    fontSizeXl: fontSize.xl,
     fontWeightRegular: fontWeight.regular,
+    fontWeightMedium: fontWeight.medium,
     fontWeightSemibold: fontWeight.semibold,
+    fontWeightBold: fontWeight.bold,
+    letterSpacingTight: letterSpacing.tight,
+    letterSpacingNormal: letterSpacing.normal,
+    letterSpacingWide: letterSpacing.wide,
     lineHeightTight: lineHeight.tight,
     lineHeightNormal: lineHeight.normal,
+    lineHeightLoose: lineHeight.loose,
+    motionDurationInstant: motion.durationInstant,
     motionDurationFast: motion.durationFast,
-    motionEasingStandard: motion.easingStandard
+    motionDurationNormal: motion.durationNormal,
+    motionDurationSlow: motion.durationSlow,
+    motionEasingStandard: motion.easingStandard,
+    motionEasingIn: motion.easingIn,
+    motionEasingOut: motion.easingOut,
+    motionEasingInOut: motion.easingInOut,
+    focusRingWidth: focusRing.width,
+    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,
+    zIndexDropdown: zIndex.dropdown,
+    zIndexOverlay: zIndex.overlay,
+    zIndexModal: zIndex.modal,
+    zIndexToast: zIndex.toast,
+    zIndexTooltip: zIndex.tooltip
 };
 const createTheme = (overrides = {})=>({
         ...defaultTheme,
@@ -132,18 +248,52 @@ const resolveBaseTheme = (colorScheme, contrast)=>{
     }
     return theme;
 };
+const comfortableSpacing = {
+    space1: defaultTheme.space1,
+    space2: defaultTheme.space2,
+    space3: defaultTheme.space3,
+    space4: defaultTheme.space4,
+    space5: defaultTheme.space5,
+    space6: defaultTheme.space6
+};
+const density_densitySpacing = {
+    comfortable: comfortableSpacing
+};
+const resolveDensitySpacing = (density)=>{
+    const spacing = density_densitySpacing[density];
+    if (!spacing) {
+        if ('production' !== process.env.NODE_ENV) console.warn(`[vinyasa] no spacing values for density="${density}" yet; falling back to comfortable.`);
+        return comfortableSpacing;
+    }
+    return spacing;
+};
+const breakpoints = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px'
+};
+const grid = {
+    columns: 12,
+    containerMaxWidth: '1280px'
+};
 const ThemeContext = /*#__PURE__*/ createContext(defaultTheme);
 const useVinyasaTheme = ()=>useContext(ThemeContext);
-const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', children })=>{
+const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
     const base = useMemo(()=>resolveBaseTheme(colorScheme, contrast), [
         colorScheme,
         contrast
     ]);
+    const densitySpacing = useMemo(()=>resolveDensitySpacing(density), [
+        density
+    ]);
     const resolvedTheme = useMemo(()=>({
             ...base,
+            ...densitySpacing,
             ...theme
         }), [
         base,
+        densitySpacing,
         theme
     ]);
     const cssVars = useMemo(()=>assignInlineVars(themeContract, resolvedTheme), [
@@ -159,8 +309,9 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', ch
             style: style,
             "data-vinyasa-color-scheme": colorScheme,
             "data-vinyasa-contrast": contrast,
+            "data-vinyasa-density": density,
             children: children
         })
     });
 };
-export { VinyasaProvider, createTheme, defaultTheme, resolveBaseTheme, themeContract, useVinyasaTheme };
+export { VinyasaProvider, breakpoints, createTheme, defaultTheme, grid, resolveBaseTheme, resolveDensitySpacing, themeContract, useVinyasaTheme };

package/dist/esm/layout.d.ts

@@ -0,0 +1,10 @@
+export declare const breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+};
+export declare const grid: {
+    readonly columns: 12;
+    readonly containerMaxWidth: "1280px";
+};

package/dist/esm/primitives.d.ts

@@ -38,19 +38,65 @@ export declare const radius: {
 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";
+};
 export declare const fontSize: {
+    readonly xs: "0.75rem";
     readonly sm: "0.875rem";
     readonly md: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
 };
 export declare const fontWeight: {
     readonly regular: "400";
+    readonly medium: "500";
     readonly semibold: "600";
+    readonly bold: "700";
+};
+export declare const letterSpacing: {
+    readonly tight: "-0.01em";
+    readonly normal: "0";
+    readonly wide: "0.02em";
 };
 export declare const lineHeight: {
     readonly tight: "1";
     readonly normal: "1.5";
+    readonly loose: "1.75";
 };
 export declare const motion: {
+    readonly durationInstant: "100ms";
     readonly durationFast: "150ms";
+    readonly durationNormal: "250ms";
+    readonly durationSlow: "400ms";
     readonly easingStandard: "ease";
+    readonly easingIn: "ease-in";
+    readonly easingOut: "ease-out";
+    readonly easingInOut: "ease-in-out";
+};
+export declare const focusRing: {
+    readonly width: "2px";
+    readonly offset: "2px";
+};
+export declare const opacity: {
+    readonly disabled: "0.5";
+    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)";
+};
+export declare const blur: {
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "16px";
+};
+export declare const zIndex: {
+    readonly dropdown: "1000";
+    readonly overlay: "1100";
+    readonly modal: "1200";
+    readonly toast: "1300";
+    readonly tooltip: "1400";
 };

package/dist/esm/theme.d.ts

@@ -18,14 +18,49 @@ export interface VinyasaTheme {
     radiusMd: string;
     radiusFull: string;
     borderWidthThin: string;
+    fontFamilySans: string;
+    fontFamilyMono: string;
+    fontSizeXs: string;
     fontSizeSm: string;
     fontSizeMd: string;
+    fontSizeLg: string;
+    fontSizeXl: string;
     fontWeightRegular: string;
+    fontWeightMedium: string;
     fontWeightSemibold: string;
+    fontWeightBold: string;
+    letterSpacingTight: string;
+    letterSpacingNormal: string;
+    letterSpacingWide: string;
     lineHeightTight: string;
     lineHeightNormal: string;
+    lineHeightLoose: string;
+    motionDurationInstant: string;
     motionDurationFast: string;
+    motionDurationNormal: string;
+    motionDurationSlow: string;
     motionEasingStandard: string;
+    motionEasingIn: string;
+    motionEasingOut: string;
+    motionEasingInOut: string;
+    focusRingWidth: string;
+    focusRingOffset: string;
+    opacityDisabled: string;
+    opacityHover: string;
+    shadowSm: string;
+    shadowMd: string;
+    shadowLg: string;
+    elevationRaised: string;
+    elevationOverlay: string;
+    elevationModal: string;
+    blurSm: string;
+    blurMd: string;
+    blurLg: string;
+    zIndexDropdown: string;
+    zIndexOverlay: string;
+    zIndexModal: string;
+    zIndexToast: string;
+    zIndexTooltip: string;
 }
 export declare const defaultTheme: VinyasaTheme;
 export declare const createTheme: (overrides?: Partial<VinyasaTheme>) => VinyasaTheme;

package/package.json

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