@vinyasa/tokens 1.0.15

package/dist/cjs/index.cjs

@@ -0,0 +1,254 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    VinyasaProvider: ()=>VinyasaProvider,
+    createTheme: ()=>createTheme,
+    defaultTheme: ()=>defaultTheme,
+    resolveBaseTheme: ()=>resolveBaseTheme,
+    themeContract: ()=>themeContract,
+    useVinyasaTheme: ()=>useVinyasaTheme
+});
+var themeContract = {
+    primary: 'var(--vinyasa-primary)',
+    onPrimary: 'var(--vinyasa-on-primary)',
+    secondary: 'var(--vinyasa-secondary)',
+    onSecondary: 'var(--vinyasa-on-secondary)',
+    tertiary: 'var(--vinyasa-tertiary)',
+    onTertiary: 'var(--vinyasa-on-tertiary)',
+    error: 'var(--vinyasa-error)',
+    onError: 'var(--vinyasa-on-error)',
+    focus: 'var(--vinyasa-focus)',
+    space1: 'var(--vinyasa-space1)',
+    space2: 'var(--vinyasa-space2)',
+    space3: 'var(--vinyasa-space3)',
+    space4: 'var(--vinyasa-space4)',
+    space5: 'var(--vinyasa-space5)',
+    space6: 'var(--vinyasa-space6)',
+    radiusSm: 'var(--vinyasa-radius-sm)',
+    radiusMd: 'var(--vinyasa-radius-md)',
+    radiusFull: 'var(--vinyasa-radius-full)',
+    fontSizeSm: 'var(--vinyasa-font-size-sm)',
+    fontSizeMd: 'var(--vinyasa-font-size-md)',
+    fontWeightRegular: 'var(--vinyasa-font-weight-regular)',
+    fontWeightSemibold: 'var(--vinyasa-font-weight-semibold)',
+    lineHeightTight: 'var(--vinyasa-line-height-tight)',
+    lineHeightNormal: 'var(--vinyasa-line-height-normal)',
+    motionDurationFast: 'var(--vinyasa-motion-duration-fast)',
+    motionEasingStandard: 'var(--vinyasa-motion-easing-standard)'
+};
+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 space = {
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.625rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem'
+};
+const radius = {
+    sm: '0.25rem',
+    md: '0.5rem',
+    full: '9999px'
+};
+const fontSize = {
+    sm: '0.875rem',
+    md: '1rem'
+};
+const fontWeight = {
+    regular: '400',
+    semibold: '600'
+};
+const lineHeight = {
+    tight: '1',
+    normal: '1.5'
+};
+const motion = {
+    durationFast: '150ms',
+    easingStandard: 'ease'
+};
+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;
+}
+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"],
+    space1: space["1"],
+    space2: space["2"],
+    space3: space["3"],
+    space4: space["4"],
+    space5: space["5"],
+    space6: space["6"],
+    radiusSm: radius.sm,
+    radiusMd: radius.md,
+    radiusFull: radius.full,
+    fontSizeSm: fontSize.sm,
+    fontSizeMd: fontSize.md,
+    fontWeightRegular: fontWeight.regular,
+    fontWeightSemibold: fontWeight.semibold,
+    lineHeightTight: lineHeight.tight,
+    lineHeightNormal: lineHeight.normal,
+    motionDurationFast: motion.durationFast,
+    motionEasingStandard: motion.easingStandard
+};
+const createTheme = (overrides = {})=>_object_spread({}, defaultTheme, overrides);
+const themes = {
+    light: {
+        normal: defaultTheme
+    }
+};
+const resolveBaseTheme = (colorScheme, contrast)=>{
+    var _themes_colorScheme;
+    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 theme;
+};
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const dynamic_namespaceObject = require("@vanilla-extract/dynamic");
+const external_react_namespaceObject = require("react");
+function VinyasaProvider_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 VinyasaProvider_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) {
+            VinyasaProvider_define_property(target, key, source[key]);
+        });
+    }
+    return 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 base = (0, external_react_namespaceObject.useMemo)(()=>resolveBaseTheme(colorScheme, contrast), [
+        colorScheme,
+        contrast
+    ]);
+    const resolvedTheme = (0, external_react_namespaceObject.useMemo)(()=>VinyasaProvider_object_spread({}, base, theme), [
+        base,
+        theme
+    ]);
+    const cssVars = (0, external_react_namespaceObject.useMemo)(()=>(0, dynamic_namespaceObject.assignInlineVars)(themeContract, resolvedTheme), [
+        resolvedTheme
+    ]);
+    const style = VinyasaProvider_object_spread({
+        display: 'contents'
+    }, cssVars);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ThemeContext.Provider, {
+        value: resolvedTheme,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            style: style,
+            "data-vinyasa-color-scheme": colorScheme,
+            "data-vinyasa-contrast": contrast,
+            children: children
+        })
+    });
+};
+exports.VinyasaProvider = __webpack_exports__.VinyasaProvider;
+exports.createTheme = __webpack_exports__.createTheme;
+exports.defaultTheme = __webpack_exports__.defaultTheme;
+exports.resolveBaseTheme = __webpack_exports__.resolveBaseTheme;
+exports.themeContract = __webpack_exports__.themeContract;
+exports.useVinyasaTheme = __webpack_exports__.useVinyasaTheme;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "VinyasaProvider",
+    "createTheme",
+    "defaultTheme",
+    "resolveBaseTheme",
+    "themeContract",
+    "useVinyasaTheme"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/esm/VinyasaProvider.d.ts

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

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

@@ -0,0 +1,28 @@
+export declare const themeContract: {
+    primary: `var(--${string})`;
+    onPrimary: `var(--${string})`;
+    secondary: `var(--${string})`;
+    onSecondary: `var(--${string})`;
+    tertiary: `var(--${string})`;
+    onTertiary: `var(--${string})`;
+    error: `var(--${string})`;
+    onError: `var(--${string})`;
+    focus: `var(--${string})`;
+    space1: `var(--${string})`;
+    space2: `var(--${string})`;
+    space3: `var(--${string})`;
+    space4: `var(--${string})`;
+    space5: `var(--${string})`;
+    space6: `var(--${string})`;
+    radiusSm: `var(--${string})`;
+    radiusMd: `var(--${string})`;
+    radiusFull: `var(--${string})`;
+    fontSizeSm: `var(--${string})`;
+    fontSizeMd: `var(--${string})`;
+    fontWeightRegular: `var(--${string})`;
+    fontWeightSemibold: `var(--${string})`;
+    lineHeightTight: `var(--${string})`;
+    lineHeightNormal: `var(--${string})`;
+    motionDurationFast: `var(--${string})`;
+    motionEasingStandard: `var(--${string})`;
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export { themeContract } from './contract.css';
+export { createTheme, defaultTheme, type VinyasaTheme } from './theme';
+export { resolveBaseTheme, type ColorScheme, type Contrast } from './themes';
+export { VinyasaProvider, useVinyasaTheme, type VinyasaProviderProps } from './VinyasaProvider';

package/dist/esm/index.js

@@ -0,0 +1,161 @@
+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)',
+    secondary: 'var(--vinyasa-secondary)',
+    onSecondary: 'var(--vinyasa-on-secondary)',
+    tertiary: 'var(--vinyasa-tertiary)',
+    onTertiary: 'var(--vinyasa-on-tertiary)',
+    error: 'var(--vinyasa-error)',
+    onError: 'var(--vinyasa-on-error)',
+    focus: 'var(--vinyasa-focus)',
+    space1: 'var(--vinyasa-space1)',
+    space2: 'var(--vinyasa-space2)',
+    space3: 'var(--vinyasa-space3)',
+    space4: 'var(--vinyasa-space4)',
+    space5: 'var(--vinyasa-space5)',
+    space6: 'var(--vinyasa-space6)',
+    radiusSm: 'var(--vinyasa-radius-sm)',
+    radiusMd: 'var(--vinyasa-radius-md)',
+    radiusFull: 'var(--vinyasa-radius-full)',
+    fontSizeSm: 'var(--vinyasa-font-size-sm)',
+    fontSizeMd: 'var(--vinyasa-font-size-md)',
+    fontWeightRegular: 'var(--vinyasa-font-weight-regular)',
+    fontWeightSemibold: 'var(--vinyasa-font-weight-semibold)',
+    lineHeightTight: 'var(--vinyasa-line-height-tight)',
+    lineHeightNormal: 'var(--vinyasa-line-height-normal)',
+    motionDurationFast: 'var(--vinyasa-motion-duration-fast)',
+    motionEasingStandard: 'var(--vinyasa-motion-easing-standard)'
+};
+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 space = {
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.625rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem'
+};
+const radius = {
+    sm: '0.25rem',
+    md: '0.5rem',
+    full: '9999px'
+};
+const fontSize = {
+    sm: '0.875rem',
+    md: '1rem'
+};
+const fontWeight = {
+    regular: '400',
+    semibold: '600'
+};
+const lineHeight = {
+    tight: '1',
+    normal: '1.5'
+};
+const motion = {
+    durationFast: '150ms',
+    easingStandard: 'ease'
+};
+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"],
+    space1: space["1"],
+    space2: space["2"],
+    space3: space["3"],
+    space4: space["4"],
+    space5: space["5"],
+    space6: space["6"],
+    radiusSm: radius.sm,
+    radiusMd: radius.md,
+    radiusFull: radius.full,
+    fontSizeSm: fontSize.sm,
+    fontSizeMd: fontSize.md,
+    fontWeightRegular: fontWeight.regular,
+    fontWeightSemibold: fontWeight.semibold,
+    lineHeightTight: lineHeight.tight,
+    lineHeightNormal: lineHeight.normal,
+    motionDurationFast: motion.durationFast,
+    motionEasingStandard: motion.easingStandard
+};
+const createTheme = (overrides = {})=>({
+        ...defaultTheme,
+        ...overrides
+    });
+const themes = {
+    light: {
+        normal: defaultTheme
+    }
+};
+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 theme;
+};
+const ThemeContext = /*#__PURE__*/ createContext(defaultTheme);
+const useVinyasaTheme = ()=>useContext(ThemeContext);
+const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', children })=>{
+    const base = useMemo(()=>resolveBaseTheme(colorScheme, contrast), [
+        colorScheme,
+        contrast
+    ]);
+    const resolvedTheme = useMemo(()=>({
+            ...base,
+            ...theme
+        }), [
+        base,
+        theme
+    ]);
+    const cssVars = useMemo(()=>assignInlineVars(themeContract, resolvedTheme), [
+        resolvedTheme
+    ]);
+    const style = {
+        display: 'contents',
+        ...cssVars
+    };
+    return /*#__PURE__*/ jsx(ThemeContext.Provider, {
+        value: resolvedTheme,
+        children: /*#__PURE__*/ jsx("div", {
+            style: style,
+            "data-vinyasa-color-scheme": colorScheme,
+            "data-vinyasa-contrast": contrast,
+            children: children
+        })
+    });
+};
+export { VinyasaProvider, createTheme, defaultTheme, resolveBaseTheme, themeContract, useVinyasaTheme };

package/dist/esm/primitives.d.ts

@@ -0,0 +1,53 @@
+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 space: {
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.625rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+};
+export declare const radius: {
+    readonly sm: "0.25rem";
+    readonly md: "0.5rem";
+    readonly full: "9999px";
+};
+export declare const fontSize: {
+    readonly sm: "0.875rem";
+    readonly md: "1rem";
+};
+export declare const fontWeight: {
+    readonly regular: "400";
+    readonly semibold: "600";
+};
+export declare const lineHeight: {
+    readonly tight: "1";
+    readonly normal: "1.5";
+};
+export declare const motion: {
+    readonly durationFast: "150ms";
+    readonly easingStandard: "ease";
+};

package/dist/esm/theme.d.ts

@@ -0,0 +1,30 @@
+export interface VinyasaTheme {
+    primary: string;
+    onPrimary: string;
+    secondary: string;
+    onSecondary: string;
+    tertiary: string;
+    onTertiary: string;
+    error: string;
+    onError: string;
+    focus: string;
+    space1: string;
+    space2: string;
+    space3: string;
+    space4: string;
+    space5: string;
+    space6: string;
+    radiusSm: string;
+    radiusMd: string;
+    radiusFull: string;
+    fontSizeSm: string;
+    fontSizeMd: string;
+    fontWeightRegular: string;
+    fontWeightSemibold: string;
+    lineHeightTight: string;
+    lineHeightNormal: string;
+    motionDurationFast: string;
+    motionEasingStandard: string;
+}
+export declare const defaultTheme: VinyasaTheme;
+export declare const createTheme: (overrides?: Partial<VinyasaTheme>) => VinyasaTheme;

package/dist/esm/themes.d.ts

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

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vinyasa/tokens",
+  "version": "1.0.15",
+  "private": false,
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "!dist/**/*.map",
+    "!dist/**/__test__/**",
+    "!dist/**/*.test.d.ts"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/cjs/index.cjs",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.21.0",
+    "@vanilla-extract/dynamic": "^2.1.5"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@rslib/core": "^0.23.1",
+    "@types/node": "^26.0.1",
+    "@types/react": "^19.0.0",
+    "@vanilla-extract/vite-plugin": "^5.2.3",
+    "@vanilla-extract/webpack-plugin": "^2.3.27",
+    "typescript": "^5.7.3"
+  },
+  "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",
+    "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",
+    "test:watch": "vitest --config vitest.config.ts",
+    "test:coverage": "vitest run --config vitest.config.ts --coverage",
+    "pack:check": "npm pack --dry-run"
+  }
+}