@react-native-rethemed/tailwind-css-tokens 0.0.0-stage → 0.1.0

package/dist/cjs/tokens.gen.js

@@ -0,0 +1,461 @@
+"use strict";
+// Generated by scripts/generate.ts from tailwindcss@4.3.3 (theme.css).
+// Do not edit by hand: run `pnpm generate` instead.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.text = exports.shadows = exports.letterSpacings = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.radii = exports.spacing = exports.colors = void 0;
+/** Tailwind's palette (`--color-*`), converted from oklch to hex: `'<hue>.<shade>'`, plus `black` and `white`. */
+exports.colors = {
+    'red.50': '#fef2f2',
+    'red.100': '#ffe2e2',
+    'red.200': '#ffc9c9',
+    'red.300': '#ffa2a2',
+    'red.400': '#ff6467',
+    'red.500': '#fb2c36',
+    'red.600': '#e7000b',
+    'red.700': '#c10007',
+    'red.800': '#9f0712',
+    'red.900': '#82181a',
+    'red.950': '#460809',
+    'orange.50': '#fff7ed',
+    'orange.100': '#ffedd4',
+    'orange.200': '#ffd6a8',
+    'orange.300': '#ffb86a',
+    'orange.400': '#ff8904',
+    'orange.500': '#ff6900',
+    'orange.600': '#f54a00',
+    'orange.700': '#ca3500',
+    'orange.800': '#9f2d00',
+    'orange.900': '#7e2a0c',
+    'orange.950': '#441306',
+    'amber.50': '#fffbeb',
+    'amber.100': '#fef3c6',
+    'amber.200': '#fee685',
+    'amber.300': '#ffd230',
+    'amber.400': '#ffba00',
+    'amber.500': '#fd9a00',
+    'amber.600': '#e17100',
+    'amber.700': '#bb4d00',
+    'amber.800': '#973c00',
+    'amber.900': '#7b3306',
+    'amber.950': '#461901',
+    'yellow.50': '#fefce8',
+    'yellow.100': '#fef9c2',
+    'yellow.200': '#fff085',
+    'yellow.300': '#ffdf20',
+    'yellow.400': '#fcc800',
+    'yellow.500': '#efb100',
+    'yellow.600': '#d08700',
+    'yellow.700': '#a65f00',
+    'yellow.800': '#894b00',
+    'yellow.900': '#733e0a',
+    'yellow.950': '#432004',
+    'lime.50': '#f7fee7',
+    'lime.100': '#ecfcca',
+    'lime.200': '#d8f999',
+    'lime.300': '#bbf451',
+    'lime.400': '#9ae600',
+    'lime.500': '#7ccf00',
+    'lime.600': '#5ea500',
+    'lime.700': '#497d00',
+    'lime.800': '#3d6300',
+    'lime.900': '#35530e',
+    'lime.950': '#192e03',
+    'green.50': '#f0fdf4',
+    'green.100': '#dcfce7',
+    'green.200': '#b9f8cf',
+    'green.300': '#7bf1a8',
+    'green.400': '#05df72',
+    'green.500': '#00c951',
+    'green.600': '#00a63e',
+    'green.700': '#008236',
+    'green.800': '#016630',
+    'green.900': '#0d542b',
+    'green.950': '#032e15',
+    'emerald.50': '#ecfdf5',
+    'emerald.100': '#d0fae5',
+    'emerald.200': '#a4f4cf',
+    'emerald.300': '#5ee9b5',
+    'emerald.400': '#00d492',
+    'emerald.500': '#00bc7d',
+    'emerald.600': '#009966',
+    'emerald.700': '#007a55',
+    'emerald.800': '#006045',
+    'emerald.900': '#004f3b',
+    'emerald.950': '#002c22',
+    'teal.50': '#f0fdfa',
+    'teal.100': '#cbfbf1',
+    'teal.200': '#96f7e4',
+    'teal.300': '#46ecd5',
+    'teal.400': '#00d5be',
+    'teal.500': '#00bba7',
+    'teal.600': '#009689',
+    'teal.700': '#00786f',
+    'teal.800': '#005f5a',
+    'teal.900': '#0b4f4a',
+    'teal.950': '#022f2e',
+    'cyan.50': '#ecfeff',
+    'cyan.100': '#cefafe',
+    'cyan.200': '#a2f4fd',
+    'cyan.300': '#53eafd',
+    'cyan.400': '#00d3f2',
+    'cyan.500': '#00b8db',
+    'cyan.600': '#0092b8',
+    'cyan.700': '#007595',
+    'cyan.800': '#005f78',
+    'cyan.900': '#104e64',
+    'cyan.950': '#053345',
+    'sky.50': '#f0f9ff',
+    'sky.100': '#dff2fe',
+    'sky.200': '#b8e6fe',
+    'sky.300': '#74d4ff',
+    'sky.400': '#00bcff',
+    'sky.500': '#00a6f4',
+    'sky.600': '#0084d1',
+    'sky.700': '#0069a8',
+    'sky.800': '#00598a',
+    'sky.900': '#024a70',
+    'sky.950': '#052f4a',
+    'blue.50': '#eff6ff',
+    'blue.100': '#dbeafe',
+    'blue.200': '#bedbff',
+    'blue.300': '#8ec5ff',
+    'blue.400': '#51a2ff',
+    'blue.500': '#2b7fff',
+    'blue.600': '#155dfc',
+    'blue.700': '#1447e6',
+    'blue.800': '#193cb8',
+    'blue.900': '#1c398e',
+    'blue.950': '#162456',
+    'indigo.50': '#eef2ff',
+    'indigo.100': '#e0e7ff',
+    'indigo.200': '#c6d2ff',
+    'indigo.300': '#a3b3ff',
+    'indigo.400': '#7c86ff',
+    'indigo.500': '#615fff',
+    'indigo.600': '#4f39f6',
+    'indigo.700': '#432dd7',
+    'indigo.800': '#372aac',
+    'indigo.900': '#312c85',
+    'indigo.950': '#1e1a4d',
+    'violet.50': '#f5f3ff',
+    'violet.100': '#ede9fe',
+    'violet.200': '#ddd6ff',
+    'violet.300': '#c4b4ff',
+    'violet.400': '#a684ff',
+    'violet.500': '#8e51ff',
+    'violet.600': '#7f22fe',
+    'violet.700': '#7008e7',
+    'violet.800': '#5d0ec0',
+    'violet.900': '#4d179a',
+    'violet.950': '#2f0d68',
+    'purple.50': '#faf5ff',
+    'purple.100': '#f3e8ff',
+    'purple.200': '#e9d4ff',
+    'purple.300': '#dab2ff',
+    'purple.400': '#c27aff',
+    'purple.500': '#ad46ff',
+    'purple.600': '#9810fa',
+    'purple.700': '#8200db',
+    'purple.800': '#6e11b0',
+    'purple.900': '#59168b',
+    'purple.950': '#3c0366',
+    'fuchsia.50': '#fdf4ff',
+    'fuchsia.100': '#fae8ff',
+    'fuchsia.200': '#f6cfff',
+    'fuchsia.300': '#f4a8ff',
+    'fuchsia.400': '#ed6bff',
+    'fuchsia.500': '#e12afb',
+    'fuchsia.600': '#c800de',
+    'fuchsia.700': '#a800b7',
+    'fuchsia.800': '#8a0194',
+    'fuchsia.900': '#721378',
+    'fuchsia.950': '#4b004f',
+    'pink.50': '#fdf2f8',
+    'pink.100': '#fce7f3',
+    'pink.200': '#fccee8',
+    'pink.300': '#fda5d5',
+    'pink.400': '#fb64b6',
+    'pink.500': '#f6339a',
+    'pink.600': '#e60076',
+    'pink.700': '#c6005c',
+    'pink.800': '#a3004c',
+    'pink.900': '#861043',
+    'pink.950': '#510424',
+    'rose.50': '#fff1f2',
+    'rose.100': '#ffe4e6',
+    'rose.200': '#ffccd3',
+    'rose.300': '#ffa1ad',
+    'rose.400': '#ff637e',
+    'rose.500': '#ff2056',
+    'rose.600': '#ec003f',
+    'rose.700': '#c70036',
+    'rose.800': '#a50036',
+    'rose.900': '#8b0836',
+    'rose.950': '#4d0218',
+    'slate.50': '#f8fafc',
+    'slate.100': '#f1f5f9',
+    'slate.200': '#e2e8f0',
+    'slate.300': '#cad5e2',
+    'slate.400': '#90a1b9',
+    'slate.500': '#62748e',
+    'slate.600': '#45556c',
+    'slate.700': '#314158',
+    'slate.800': '#1d293d',
+    'slate.900': '#0f172b',
+    'slate.950': '#020618',
+    'gray.50': '#f9fafb',
+    'gray.100': '#f3f4f6',
+    'gray.200': '#e5e7eb',
+    'gray.300': '#d1d5dc',
+    'gray.400': '#99a1af',
+    'gray.500': '#6a7282',
+    'gray.600': '#4a5565',
+    'gray.700': '#364153',
+    'gray.800': '#1e2939',
+    'gray.900': '#101828',
+    'gray.950': '#030712',
+    'zinc.50': '#fafafa',
+    'zinc.100': '#f4f4f5',
+    'zinc.200': '#e4e4e7',
+    'zinc.300': '#d4d4d8',
+    'zinc.400': '#9f9fa9',
+    'zinc.500': '#71717b',
+    'zinc.600': '#52525c',
+    'zinc.700': '#3f3f46',
+    'zinc.800': '#27272a',
+    'zinc.900': '#18181b',
+    'zinc.950': '#09090b',
+    'neutral.50': '#fafafa',
+    'neutral.100': '#f5f5f5',
+    'neutral.200': '#e5e5e5',
+    'neutral.300': '#d4d4d4',
+    'neutral.400': '#a1a1a1',
+    'neutral.500': '#737373',
+    'neutral.600': '#525252',
+    'neutral.700': '#404040',
+    'neutral.800': '#262626',
+    'neutral.900': '#171717',
+    'neutral.950': '#0a0a0a',
+    'stone.50': '#fafaf9',
+    'stone.100': '#f5f5f4',
+    'stone.200': '#e7e5e4',
+    'stone.300': '#d6d3d1',
+    'stone.400': '#a6a09b',
+    'stone.500': '#79716b',
+    'stone.600': '#57534d',
+    'stone.700': '#44403b',
+    'stone.800': '#292524',
+    'stone.900': '#1c1917',
+    'stone.950': '#0c0a09',
+    'mauve.50': '#fafafa',
+    'mauve.100': '#f3f1f3',
+    'mauve.200': '#e7e4e7',
+    'mauve.300': '#d7d0d7',
+    'mauve.400': '#a89ea9',
+    'mauve.500': '#79697b',
+    'mauve.600': '#594c5b',
+    'mauve.700': '#463947',
+    'mauve.800': '#2a212c',
+    'mauve.900': '#1d161e',
+    'mauve.950': '#0c090c',
+    'olive.50': '#fbfbf9',
+    'olive.100': '#f4f4f0',
+    'olive.200': '#e8e8e3',
+    'olive.300': '#d8d8d0',
+    'olive.400': '#abab9c',
+    'olive.500': '#7c7c67',
+    'olive.600': '#5b5b4b',
+    'olive.700': '#474739',
+    'olive.800': '#2b2b22',
+    'olive.900': '#1d1d16',
+    'olive.950': '#0c0c09',
+    'mist.50': '#f9fbfb',
+    'mist.100': '#f1f3f3',
+    'mist.200': '#e3e7e8',
+    'mist.300': '#d0d6d8',
+    'mist.400': '#9ca8ab',
+    'mist.500': '#67787c',
+    'mist.600': '#4b585b',
+    'mist.700': '#394447',
+    'mist.800': '#22292b',
+    'mist.900': '#161b1d',
+    'mist.950': '#090b0c',
+    'taupe.50': '#fbfaf9',
+    'taupe.100': '#f3f1f1',
+    'taupe.200': '#e8e4e3',
+    'taupe.300': '#d8d2d0',
+    'taupe.400': '#aba09c',
+    'taupe.500': '#7c6d67',
+    'taupe.600': '#5b4f4b',
+    'taupe.700': '#473c39',
+    'taupe.800': '#2b2422',
+    'taupe.900': '#1d1816',
+    'taupe.950': '#0c0a09',
+    black: '#000000',
+    white: '#ffffff',
+};
+/** `--spacing` (0.25rem) × n for the steps in Tailwind's docs: `padding: 4` is `p-4` (16). `px` is 1. */
+exports.spacing = {
+    px: 1,
+    0: 0,
+    0.5: 2,
+    1: 4,
+    1.5: 6,
+    2: 8,
+    2.5: 10,
+    3: 12,
+    3.5: 14,
+    4: 16,
+    5: 20,
+    6: 24,
+    7: 28,
+    8: 32,
+    9: 36,
+    10: 40,
+    11: 44,
+    12: 48,
+    14: 56,
+    16: 64,
+    20: 80,
+    24: 96,
+    28: 112,
+    32: 128,
+    36: 144,
+    40: 160,
+    44: 176,
+    48: 192,
+    52: 208,
+    56: 224,
+    60: 240,
+    64: 256,
+    72: 288,
+    80: 320,
+    96: 384,
+};
+/** `--radius-*` in points, plus the `rounded-none` / `rounded-full` utilities. */
+exports.radii = {
+    none: 0,
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 12,
+    '2xl': 16,
+    '3xl': 24,
+    '4xl': 32,
+    full: 9999,
+};
+/** `--text-*` sizes in points. */
+exports.fontSizes = {
+    xs: 12,
+    sm: 14,
+    base: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+    '5xl': 48,
+    '6xl': 60,
+    '7xl': 72,
+    '8xl': 96,
+    '9xl': 128,
+};
+/** `--font-weight-*`. */
+exports.fontWeights = {
+    thin: '100',
+    extralight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+    extrabold: '800',
+    black: '900',
+};
+/** `--leading-*` as ratios of `fontSize`, plus the `leading-none` utility. */
+exports.lineHeights = {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+};
+/** `--tracking-*`: em values converted to points at a 16px font size. */
+exports.letterSpacings = {
+    tighter: -0.8,
+    tight: -0.4,
+    normal: 0,
+    wide: 0.4,
+    wider: 0.8,
+    widest: 1.6,
+};
+/** `--shadow-*` as single-layer RN shadows (first layer). */
+exports.shadows = {
+    '2xs': {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 0,
+        elevation: 1,
+    },
+    xs: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 1,
+        elevation: 1,
+    },
+    sm: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.1,
+        shadowRadius: 1.5,
+        elevation: 2,
+    },
+    md: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+        elevation: 4,
+    },
+    lg: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.1,
+        shadowRadius: 7.5,
+        elevation: 8,
+    },
+    xl: {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 20 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12.5,
+        elevation: 12,
+    },
+    '2xl': {
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 25 },
+        shadowOpacity: 0.25,
+        shadowRadius: 25,
+        elevation: 16,
+    },
+};
+/** `text-*` as presets: each size with its paired `--text-*--line-height`, made absolute. */
+exports.text = {
+    xs: { fontSize: 12, lineHeight: 16 },
+    sm: { fontSize: 14, lineHeight: 20 },
+    base: { fontSize: 16, lineHeight: 24 },
+    lg: { fontSize: 18, lineHeight: 28 },
+    xl: { fontSize: 20, lineHeight: 28 },
+    '2xl': { fontSize: 24, lineHeight: 32 },
+    '3xl': { fontSize: 30, lineHeight: 36 },
+    '4xl': { fontSize: 36, lineHeight: 40 },
+    '5xl': { fontSize: 48, lineHeight: 48 },
+    '6xl': { fontSize: 60, lineHeight: 60 },
+    '7xl': { fontSize: 72, lineHeight: 72 },
+    '8xl': { fontSize: 96, lineHeight: 96 },
+    '9xl': { fontSize: 128, lineHeight: 128 },
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,26 @@
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text } from './tokens.gen.js';
+/**
+ * Tailwind CSS's default theme (`tailwindcss/theme.css`), converted for
+ * React Native with Tailwind's names. Values are generated by
+ * `scripts/generate.ts`; see `src/tokens.gen.ts`.
+ *
+ * - Lengths: rem → points at 16px; em letter spacings → points at 16px.
+ * - `colors`: the oklch palette as hex, `'<hue>.<shade>'` (`'sky.500'`).
+ *   Fixed in both schemes: Tailwind has no semantic colors (it uses `dark:`
+ *   variants), so define `semanticTokens.colors` in the app.
+ * - `spacing`: `padding: 4` is `p-4` (16), for the steps Tailwind's docs
+ *   list. `radii` / `lineHeights` add the `rounded-none` / `rounded-full` /
+ *   `leading-none` utilities.
+ * - `text`: `themed.text.sm()` is `text-sm` — font size plus its paired line
+ *   height. `fontSizes` (`fontSize: 'sm'`) sets the size alone.
+ * - `defaults.fontSize` is `base` (16), the size `lineHeights` ratios use when
+ *   a style has no `fontSize` of its own.
+ * - `shadows`: first layer only. Not included (no RN equivalent): fonts,
+ *   inset / drop / text shadows, blur, perspective, easing, animations,
+ *   aspect ratios, breakpoints, containers.
+ *
+ * The palette, radii and shadows are the same values as
+ * `@react-native-rethemed/panda-css-tokens` (Panda's preset uses Tailwind's).
+ */
+export declare const tailwindCssTheme: import("@react-native-rethemed/core/config").ThemeConfig;
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text, };

package/dist/esm/index.js

@@ -0,0 +1,44 @@
+import { defineTheme } from '@react-native-rethemed/core/config';
+import { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text, } from './tokens.gen.js';
+/**
+ * Tailwind CSS's default theme (`tailwindcss/theme.css`), converted for
+ * React Native with Tailwind's names. Values are generated by
+ * `scripts/generate.ts`; see `src/tokens.gen.ts`.
+ *
+ * - Lengths: rem → points at 16px; em letter spacings → points at 16px.
+ * - `colors`: the oklch palette as hex, `'<hue>.<shade>'` (`'sky.500'`).
+ *   Fixed in both schemes: Tailwind has no semantic colors (it uses `dark:`
+ *   variants), so define `semanticTokens.colors` in the app.
+ * - `spacing`: `padding: 4` is `p-4` (16), for the steps Tailwind's docs
+ *   list. `radii` / `lineHeights` add the `rounded-none` / `rounded-full` /
+ *   `leading-none` utilities.
+ * - `text`: `themed.text.sm()` is `text-sm` — font size plus its paired line
+ *   height. `fontSizes` (`fontSize: 'sm'`) sets the size alone.
+ * - `defaults.fontSize` is `base` (16), the size `lineHeights` ratios use when
+ *   a style has no `fontSize` of its own.
+ * - `shadows`: first layer only. Not included (no RN equivalent): fonts,
+ *   inset / drop / text shadows, blur, perspective, easing, animations,
+ *   aspect ratios, breakpoints, containers.
+ *
+ * The palette, radii and shadows are the same values as
+ * `@react-native-rethemed/panda-css-tokens` (Panda's preset uses Tailwind's).
+ */
+export const tailwindCssTheme = defineTheme({
+    tokens: {
+        colors,
+        radii,
+        spacing,
+        fontSizes,
+        fontWeights,
+        lineHeights,
+        letterSpacings,
+        shadows,
+    },
+    semanticTokens: {
+        text,
+    },
+    defaults: {
+        fontSize: 'base',
+    },
+});
+export { colors, fontSizes, fontWeights, letterSpacings, lineHeights, radii, shadows, spacing, text, };

package/dist/esm/package.json

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