@react-native-rethemed/chakra-ui-tokens 0.1.0 → 0.1.1

package/dist/cjs/colors.js

@@ -1,386 +0,0 @@
-"use strict";
-/**
- * Color tokens mirroring Chakra UI's Color Tokens / Semantic Tokens.
- * https://www.chakra-ui.com/docs/theming/colors
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.semanticColors = exports.colors = void 0;
-exports.colors = {
-    white: '#ffffff',
-    black: '#000000',
-    'gray.50': '#fafafa',
-    'gray.100': '#f4f4f5',
-    'gray.200': '#e4e4e7',
-    'gray.300': '#d4d4d8',
-    'gray.400': '#a1a1aa',
-    'gray.500': '#71717a',
-    'gray.600': '#52525b',
-    'gray.700': '#3f3f46',
-    'gray.800': '#27272a',
-    'gray.900': '#18181b',
-    'gray.950': '#111111',
-    'neutral.50': '#fafafa',
-    'neutral.100': '#f5f5f5',
-    'neutral.200': '#e5e5e5',
-    'neutral.300': '#d4d4d4',
-    'neutral.400': '#a3a3a3',
-    'neutral.500': '#737373',
-    'neutral.600': '#525252',
-    'neutral.700': '#404040',
-    'neutral.800': '#262626',
-    'neutral.900': '#171717',
-    'neutral.950': '#0a0a0a',
-    'red.50': '#fef2f2',
-    'red.100': '#fee2e2',
-    'red.200': '#fecaca',
-    'red.300': '#fca5a5',
-    'red.400': '#f87171',
-    'red.500': '#ef4444',
-    'red.600': '#dc2626',
-    'red.700': '#991919',
-    'red.800': '#511111',
-    'red.900': '#300c0c',
-    'red.950': '#1f0808',
-    'orange.50': '#fff7ed',
-    'orange.100': '#ffedd5',
-    'orange.200': '#fed7aa',
-    'orange.300': '#fdba74',
-    'orange.400': '#fb923c',
-    'orange.500': '#f97316',
-    'orange.600': '#ea580c',
-    'orange.700': '#92310a',
-    'orange.800': '#6c2710',
-    'orange.900': '#3b1106',
-    'orange.950': '#220a04',
-    'yellow.50': '#fefce8',
-    'yellow.100': '#fef9c3',
-    'yellow.200': '#fef08a',
-    'yellow.300': '#fde047',
-    'yellow.400': '#facc15',
-    'yellow.500': '#eab308',
-    'yellow.600': '#ca8a04',
-    'yellow.700': '#845209',
-    'yellow.800': '#713f12',
-    'yellow.900': '#422006',
-    'yellow.950': '#281304',
-    'green.50': '#f0fdf4',
-    'green.100': '#dcfce7',
-    'green.200': '#bbf7d0',
-    'green.300': '#86efac',
-    'green.400': '#4ade80',
-    'green.500': '#22c55e',
-    'green.600': '#16a34a',
-    'green.700': '#116932',
-    'green.800': '#124a28',
-    'green.900': '#042713',
-    'green.950': '#03190c',
-    'teal.50': '#f0fdfa',
-    'teal.100': '#ccfbf1',
-    'teal.200': '#99f6e4',
-    'teal.300': '#5eead4',
-    'teal.400': '#2dd4bf',
-    'teal.500': '#14b8a6',
-    'teal.600': '#0d9488',
-    'teal.700': '#0c5d56',
-    'teal.800': '#114240',
-    'teal.900': '#032726',
-    'teal.950': '#021716',
-    'blue.50': '#eff6ff',
-    'blue.100': '#dbeafe',
-    'blue.200': '#bfdbfe',
-    'blue.300': '#a3cfff',
-    'blue.400': '#60a5fa',
-    'blue.500': '#3b82f6',
-    'blue.600': '#2563eb',
-    'blue.700': '#173da6',
-    'blue.800': '#1a3478',
-    'blue.900': '#14204a',
-    'blue.950': '#0c142e',
-    'cyan.50': '#ecfeff',
-    'cyan.100': '#cffafe',
-    'cyan.200': '#a5f3fc',
-    'cyan.300': '#67e8f9',
-    'cyan.400': '#22d3ee',
-    'cyan.500': '#06b6d4',
-    'cyan.600': '#0891b2',
-    'cyan.700': '#0c5c72',
-    'cyan.800': '#134152',
-    'cyan.900': '#072a38',
-    'cyan.950': '#051b24',
-    'purple.50': '#faf5ff',
-    'purple.100': '#f3e8ff',
-    'purple.200': '#e9d5ff',
-    'purple.300': '#d8b4fe',
-    'purple.400': '#c084fc',
-    'purple.500': '#a855f7',
-    'purple.600': '#9333ea',
-    'purple.700': '#641ba3',
-    'purple.800': '#4a1772',
-    'purple.900': '#2f0553',
-    'purple.950': '#1a032e',
-    'pink.50': '#fdf2f8',
-    'pink.100': '#fce7f3',
-    'pink.200': '#fbcfe8',
-    'pink.300': '#f9a8d4',
-    'pink.400': '#f472b6',
-    'pink.500': '#ec4899',
-    'pink.600': '#db2777',
-    'pink.700': '#a41752',
-    'pink.800': '#6d0e34',
-    'pink.900': '#45061f',
-    'pink.950': '#2c0514',
-};
-/**
- * Scheme-dependent colors in `ThemeConfig['semanticTokens']['colors']`'s
- * shape: group -> token -> scheme, so `'fg.default'` resolves in one lookup.
- */
-exports.semanticColors = {
-    primary: {
-        bg: { light: exports.colors.black, dark: exports.colors.white },
-        fg: { light: exports.colors.white, dark: exports.colors.black },
-    },
-    bg: {
-        default: { light: exports.colors.white, dark: exports.colors.black },
-        subtle: { light: exports.colors['gray.50'], dark: exports.colors['gray.950'] },
-        muted: { light: exports.colors['gray.100'], dark: exports.colors['gray.900'] },
-        emphasized: {
-            light: exports.colors['gray.200'],
-            dark: exports.colors['gray.700'],
-        },
-        inverted: { light: exports.colors.black, dark: exports.colors.white },
-        panel: { light: exports.colors.white, dark: exports.colors['gray.950'] },
-        error: { light: exports.colors['red.50'], dark: exports.colors['red.950'] },
-        warning: {
-            light: exports.colors['yellow.50'],
-            dark: exports.colors['yellow.950'],
-        },
-        success: { light: exports.colors['green.50'], dark: exports.colors['green.950'] },
-        info: { light: exports.colors['blue.50'], dark: exports.colors['blue.950'] },
-    },
-    border: {
-        default: { light: exports.colors['gray.200'], dark: exports.colors['gray.800'] },
-        muted: { light: exports.colors['gray.100'], dark: exports.colors['gray.900'] },
-        subtle: { light: exports.colors['gray.50'], dark: exports.colors['gray.950'] },
-        emphasized: {
-            light: exports.colors['gray.300'],
-            dark: exports.colors['gray.700'],
-        },
-        inverted: { light: exports.colors['gray.800'], dark: exports.colors['gray.200'] },
-        error: { light: exports.colors['red.500'], dark: exports.colors['red.400'] },
-        warning: {
-            light: exports.colors['orange.500'],
-            dark: exports.colors['orange.400'],
-        },
-        success: {
-            light: exports.colors['green.500'],
-            dark: exports.colors['green.400'],
-        },
-        info: { light: exports.colors['blue.500'], dark: exports.colors['blue.400'] },
-    },
-    fg: {
-        default: { light: exports.colors.black, dark: exports.colors['gray.50'] },
-        muted: { light: exports.colors['gray.600'], dark: exports.colors['gray.400'] },
-        subtle: { light: exports.colors['gray.400'], dark: exports.colors['gray.500'] },
-        inverted: { light: exports.colors['gray.50'], dark: exports.colors.black },
-        error: { light: exports.colors['red.500'], dark: exports.colors['red.400'] },
-        warning: {
-            light: exports.colors['orange.600'],
-            dark: exports.colors['orange.300'],
-        },
-        success: {
-            light: exports.colors['green.600'],
-            dark: exports.colors['green.300'],
-        },
-        info: { light: exports.colors['blue.600'], dark: exports.colors['blue.300'] },
-    },
-    gray: {
-        contrast: { light: exports.colors.white, dark: exports.colors.black },
-        fg: { light: exports.colors['gray.800'], dark: exports.colors['gray.200'] },
-        subtle: { light: exports.colors['gray.100'], dark: exports.colors['gray.900'] },
-        muted: { light: exports.colors['gray.200'], dark: exports.colors['gray.800'] },
-        emphasized: {
-            light: exports.colors['gray.300'],
-            dark: exports.colors['gray.700'],
-        },
-        solid: { light: exports.colors['gray.900'], dark: exports.colors.white },
-        focusRing: {
-            light: exports.colors['gray.400'],
-            dark: exports.colors['gray.400'],
-        },
-        border: { light: exports.colors['gray.200'], dark: exports.colors['gray.800'] },
-    },
-    red: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['red.700'], dark: exports.colors['red.300'] },
-        subtle: { light: exports.colors['red.100'], dark: exports.colors['red.900'] },
-        muted: { light: exports.colors['red.200'], dark: exports.colors['red.800'] },
-        emphasized: { light: exports.colors['red.300'], dark: exports.colors['red.700'] },
-        solid: { light: exports.colors['red.600'], dark: exports.colors['red.600'] },
-        focusRing: { light: exports.colors['red.500'], dark: exports.colors['red.500'] },
-        border: { light: exports.colors['red.500'], dark: exports.colors['red.400'] },
-    },
-    pink: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['pink.700'], dark: exports.colors['pink.300'] },
-        subtle: { light: exports.colors['pink.100'], dark: exports.colors['pink.900'] },
-        muted: { light: exports.colors['pink.200'], dark: exports.colors['pink.800'] },
-        emphasized: {
-            light: exports.colors['pink.300'],
-            dark: exports.colors['pink.700'],
-        },
-        solid: { light: exports.colors['pink.600'], dark: exports.colors['pink.600'] },
-        focusRing: {
-            light: exports.colors['pink.500'],
-            dark: exports.colors['pink.500'],
-        },
-        border: { light: exports.colors['pink.500'], dark: exports.colors['pink.400'] },
-    },
-    purple: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['purple.700'], dark: exports.colors['purple.300'] },
-        subtle: {
-            light: exports.colors['purple.100'],
-            dark: exports.colors['purple.900'],
-        },
-        muted: {
-            light: exports.colors['purple.200'],
-            dark: exports.colors['purple.800'],
-        },
-        emphasized: {
-            light: exports.colors['purple.300'],
-            dark: exports.colors['purple.700'],
-        },
-        solid: {
-            light: exports.colors['purple.600'],
-            dark: exports.colors['purple.600'],
-        },
-        focusRing: {
-            light: exports.colors['purple.500'],
-            dark: exports.colors['purple.500'],
-        },
-        border: {
-            light: exports.colors['purple.500'],
-            dark: exports.colors['purple.400'],
-        },
-    },
-    cyan: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['cyan.700'], dark: exports.colors['cyan.300'] },
-        subtle: { light: exports.colors['cyan.100'], dark: exports.colors['cyan.900'] },
-        muted: { light: exports.colors['cyan.200'], dark: exports.colors['cyan.800'] },
-        emphasized: {
-            light: exports.colors['cyan.300'],
-            dark: exports.colors['cyan.700'],
-        },
-        solid: { light: exports.colors['cyan.600'], dark: exports.colors['cyan.600'] },
-        focusRing: {
-            light: exports.colors['cyan.500'],
-            dark: exports.colors['cyan.500'],
-        },
-        border: { light: exports.colors['cyan.500'], dark: exports.colors['cyan.400'] },
-    },
-    blue: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['blue.700'], dark: exports.colors['blue.300'] },
-        subtle: { light: exports.colors['blue.100'], dark: exports.colors['blue.900'] },
-        muted: { light: exports.colors['blue.200'], dark: exports.colors['blue.800'] },
-        emphasized: {
-            light: exports.colors['blue.300'],
-            dark: exports.colors['blue.700'],
-        },
-        solid: { light: exports.colors['blue.600'], dark: exports.colors['blue.600'] },
-        focusRing: {
-            light: exports.colors['blue.500'],
-            dark: exports.colors['blue.500'],
-        },
-        border: { light: exports.colors['blue.500'], dark: exports.colors['blue.400'] },
-    },
-    teal: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['teal.700'], dark: exports.colors['teal.300'] },
-        subtle: { light: exports.colors['teal.100'], dark: exports.colors['teal.900'] },
-        muted: { light: exports.colors['teal.200'], dark: exports.colors['teal.800'] },
-        emphasized: {
-            light: exports.colors['teal.300'],
-            dark: exports.colors['teal.700'],
-        },
-        solid: { light: exports.colors['teal.600'], dark: exports.colors['teal.600'] },
-        focusRing: {
-            light: exports.colors['teal.500'],
-            dark: exports.colors['teal.500'],
-        },
-        border: { light: exports.colors['teal.500'], dark: exports.colors['teal.400'] },
-    },
-    green: {
-        contrast: { light: exports.colors.white, dark: exports.colors.white },
-        fg: { light: exports.colors['green.700'], dark: exports.colors['green.300'] },
-        subtle: { light: exports.colors['green.100'], dark: exports.colors['green.900'] },
-        muted: { light: exports.colors['green.200'], dark: exports.colors['green.800'] },
-        emphasized: {
-            light: exports.colors['green.300'],
-            dark: exports.colors['green.700'],
-        },
-        solid: { light: exports.colors['green.600'], dark: exports.colors['green.600'] },
-        focusRing: {
-            light: exports.colors['green.500'],
-            dark: exports.colors['green.500'],
-        },
-        border: { light: exports.colors['green.500'], dark: exports.colors['green.400'] },
-    },
-    yellow: {
-        contrast: { light: exports.colors.black, dark: exports.colors.black },
-        fg: { light: exports.colors['yellow.800'], dark: exports.colors['yellow.300'] },
-        subtle: {
-            light: exports.colors['yellow.100'],
-            dark: exports.colors['yellow.900'],
-        },
-        muted: {
-            light: exports.colors['yellow.200'],
-            dark: exports.colors['yellow.800'],
-        },
-        emphasized: {
-            light: exports.colors['yellow.300'],
-            dark: exports.colors['yellow.700'],
-        },
-        solid: {
-            light: exports.colors['yellow.300'],
-            dark: exports.colors['yellow.300'],
-        },
-        focusRing: {
-            light: exports.colors['yellow.500'],
-            dark: exports.colors['yellow.500'],
-        },
-        border: {
-            light: exports.colors['yellow.500'],
-            dark: exports.colors['yellow.500'],
-        },
-    },
-    orange: {
-        contrast: { light: exports.colors.white, dark: exports.colors.black },
-        fg: { light: exports.colors['orange.700'], dark: exports.colors['orange.300'] },
-        subtle: {
-            light: exports.colors['orange.100'],
-            dark: exports.colors['orange.900'],
-        },
-        muted: {
-            light: exports.colors['orange.200'],
-            dark: exports.colors['orange.800'],
-        },
-        emphasized: {
-            light: exports.colors['orange.300'],
-            dark: exports.colors['orange.700'],
-        },
-        solid: {
-            light: exports.colors['orange.600'],
-            dark: exports.colors['orange.600'],
-        },
-        focusRing: {
-            light: exports.colors['orange.500'],
-            dark: exports.colors['orange.500'],
-        },
-        border: {
-            light: exports.colors['orange.500'],
-            dark: exports.colors['orange.400'],
-        },
-    },
-};

package/dist/cjs/index.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.zIndices = exports.spacing = exports.shadows = exports.semanticColors = exports.radii = exports.lineHeights = exports.letterSpacings = exports.fontWeights = exports.fontSizes = exports.colors = exports.chakraUiTheme = void 0;
-const config_1 = require("@react-native-rethemed/core/config");
-const colors_1 = require("./colors");
-Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return colors_1.colors; } });
-Object.defineProperty(exports, "semanticColors", { enumerable: true, get: function () { return colors_1.semanticColors; } });
-const scales_1 = require("./scales");
-Object.defineProperty(exports, "fontSizes", { enumerable: true, get: function () { return scales_1.fontSizes; } });
-Object.defineProperty(exports, "fontWeights", { enumerable: true, get: function () { return scales_1.fontWeights; } });
-Object.defineProperty(exports, "letterSpacings", { enumerable: true, get: function () { return scales_1.letterSpacings; } });
-Object.defineProperty(exports, "lineHeights", { enumerable: true, get: function () { return scales_1.lineHeights; } });
-Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return scales_1.radii; } });
-Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return scales_1.shadows; } });
-Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return scales_1.spacing; } });
-Object.defineProperty(exports, "zIndices", { enumerable: true, get: function () { return scales_1.zIndices; } });
-exports.chakraUiTheme = (0, config_1.defineTheme)({
-    tokens: {
-        colors: colors_1.colors,
-        radii: scales_1.radii,
-        spacing: scales_1.spacing,
-        fontSizes: scales_1.fontSizes,
-        fontWeights: scales_1.fontWeights,
-        lineHeights: scales_1.lineHeights,
-        letterSpacings: scales_1.letterSpacings,
-        zIndices: scales_1.zIndices,
-        shadows: scales_1.shadows,
-    },
-    semanticTokens: {
-        colors: colors_1.semanticColors,
-    },
-    // Chakra's body text size; `lineHeights` are ratios of it when a style has
-    // no `fontSize` of its own.
-    defaults: {
-        fontSize: 'md',
-    },
-});

package/dist/cjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/dist/cjs/scales.d.ts

@@ -1,195 +0,0 @@
-/**
- * Radius scale, aligned with Chakra UI's radii tokens.
- * https://www.chakra-ui.com/docs/theming/radii
- */
-export declare const radii: {
-    readonly none: 0;
-    readonly '2xs': 1;
-    readonly xs: 2;
-    readonly sm: 4;
-    readonly md: 6;
-    readonly lg: 8;
-    readonly xl: 12;
-    readonly '2xl': 16;
-    readonly '3xl': 24;
-    readonly '4xl': 32;
-    readonly full: 9999;
-};
-/**
- * Spacing scale, aligned with Chakra UI's spacing tokens. 1 unit = 4px,
- * matching Chakra/Tailwind's proportional scale.
- * https://www.chakra-ui.com/docs/theming/spacing
- */
-export declare const spacing: {
-    readonly px: 1;
-    readonly 0: 0;
-    readonly 0.5: 2;
-    readonly 1: 4;
-    readonly 1.5: 6;
-    readonly 2: 8;
-    readonly 2.5: 10;
-    readonly 3: 12;
-    readonly 3.5: 14;
-    readonly 4: 16;
-    readonly 5: 20;
-    readonly 6: 24;
-    readonly 7: 28;
-    readonly 8: 32;
-    readonly 9: 36;
-    readonly 10: 40;
-    readonly 11: 44;
-    readonly 12: 48;
-    readonly 14: 56;
-    readonly 16: 64;
-    readonly 20: 80;
-    readonly 24: 96;
-    readonly 28: 112;
-    readonly 32: 128;
-    readonly 36: 144;
-    readonly 40: 160;
-    readonly 44: 176;
-    readonly 48: 192;
-    readonly 52: 208;
-    readonly 56: 224;
-    readonly 60: 240;
-    readonly 64: 256;
-    readonly 72: 288;
-    readonly 80: 320;
-    readonly 96: 384;
-};
-/**
- * Font size scale, aligned with Chakra UI's fontSizes tokens.
- * https://www.chakra-ui.com/docs/theming/typography
- */
-export declare const fontSizes: {
-    readonly '2xs': 10;
-    readonly xs: 12;
-    readonly sm: 14;
-    readonly md: 16;
-    readonly lg: 18;
-    readonly xl: 20;
-    readonly '2xl': 24;
-    readonly '3xl': 30;
-    readonly '4xl': 36;
-    readonly '5xl': 48;
-    readonly '6xl': 60;
-    readonly '7xl': 72;
-    readonly '8xl': 96;
-    readonly '9xl': 128;
-};
-/** Font weight scale — the standard 9-step CSS scale (thin..black). */
-export declare const fontWeights: {
-    readonly thin: "100";
-    readonly extralight: "200";
-    readonly light: "300";
-    readonly normal: "400";
-    readonly medium: "500";
-    readonly semibold: "600";
-    readonly bold: "700";
-    readonly extrabold: "800";
-    readonly black: "900";
-};
-/**
- * Line height scale, aligned with Chakra UI's lineHeights tokens: unitless
- * ratios, as Chakra defines them. `themed` resolves a token to
- * `fontSize × ratio` (see `defaults.fontSize` for styles without a fontSize).
- */
-export declare const lineHeights: {
-    readonly shorter: 1.25;
-    readonly short: 1.375;
-    readonly moderate: 1.5;
-    readonly tall: 1.625;
-    readonly taller: 2;
-};
-/**
- * Letter spacing scale. Chakra's tokens are em-based; these are the
- * approximate px equivalents at a 16px base font size.
- */
-export declare const letterSpacings: {
-    readonly tighter: -0.8;
-    readonly tight: -0.4;
-    readonly wide: 0.4;
-    readonly wider: 0.8;
-    readonly widest: 1.6;
-};
-/**
- * z-index scale, aligned with Chakra UI's zIndices tokens.
- * https://www.chakra-ui.com/docs/theming/z-index
- */
-export declare const zIndices: {
-    readonly hide: -1;
-    readonly base: 0;
-    readonly docked: 10;
-    readonly dropdown: 1000;
-    readonly sticky: 1100;
-    readonly banner: 1200;
-    readonly overlay: 1300;
-    readonly modal: 1400;
-    readonly popover: 1500;
-    readonly skipNav: 1600;
-    readonly toast: 1700;
-    readonly tooltip: 1800;
-    readonly max: 2147483647;
-};
-export declare const shadows: {
-    readonly xs: {
-        readonly shadowColor: "#000000";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 1;
-        };
-        readonly shadowOpacity: 0.05;
-        readonly shadowRadius: 1;
-        readonly elevation: 1;
-    };
-    readonly sm: {
-        readonly shadowColor: "#000000";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 1;
-        };
-        readonly shadowOpacity: 0.1;
-        readonly shadowRadius: 2;
-        readonly elevation: 2;
-    };
-    readonly md: {
-        readonly shadowColor: "#000000";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 2;
-        };
-        readonly shadowOpacity: 0.12;
-        readonly shadowRadius: 6;
-        readonly elevation: 4;
-    };
-    readonly lg: {
-        readonly shadowColor: "#000000";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 4;
-        };
-        readonly shadowOpacity: 0.14;
-        readonly shadowRadius: 10;
-        readonly elevation: 8;
-    };
-    readonly xl: {
-        readonly shadowColor: "#000000";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 8;
-        };
-        readonly shadowOpacity: 0.16;
-        readonly shadowRadius: 16;
-        readonly elevation: 12;
-    };
-    readonly '2xl': {
-        readonly shadowColor: "#000000";
-        readonly shadowOffset: {
-            readonly width: 0;
-            readonly height: 12;
-        };
-        readonly shadowOpacity: 0.2;
-        readonly shadowRadius: 24;
-        readonly elevation: 16;
-    };
-};