@react-native-styled-system/core 2.1.2 → 2.2.1

package/src/@types/ThemedDict.ts

@@ -1,8 +1,5 @@
 import type { ColorsValue, RadiiValue, SizesValue, SpaceValue, TypographyValue } from './Token';
 
-/*
- * Theme type from developer
- */
 export interface ThemedDict {
   space: Record<string | number, SpaceValue>;
   sizes: Record<string | number, SizesValue>;
@@ -11,6 +8,7 @@ export interface ThemedDict {
   typography: Record<string | number, TypographyValue>;
   breakpoints?: number[];
 }
+
 export const emptyThemedDict = {
   space: {},
   colors: {},
@@ -19,413 +17,3 @@ export const emptyThemedDict = {
   typography: {},
   breakpoints: [],
 } satisfies ThemedDict;
-
-const defaultSpace: Record<string, SpaceValue> = {
-  '0': 0,
-  'px': 1,
-  '0.5': 2,
-  '1': 4,
-  '2': 8,
-  '3': 12,
-  '4': 16,
-  '5': 20,
-  '6': 24,
-  '7': 28,
-  '8': 32,
-  '9': 36,
-  '10': 40,
-  '12': 48,
-  '14': 56,
-  '16': 64,
-  '20': 80,
-  '24': 96,
-  '32': 128,
-  '40': 160,
-  '48': 192,
-};
-
-const defaultColors: Record<string, ColorsValue> = {
-  'white': '#FFFFFF',
-  'black': '#000000',
-  'transparent': 'transparent',
-
-  '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': '#d7d3d1',
-  'stone.400': '#a6a09b',
-  'stone.500': '#79716b',
-  'stone.600': '#57534d',
-  'stone.700': '#44403b',
-  'stone.800': '#292524',
-  'stone.900': '#1c1917',
-  'stone.950': '#0c0a09',
-
-  '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': '#ffd6a7',
-  'orange.300': '#ffb869',
-  'orange.400': '#ff8903',
-  'orange.500': '#ff6900',
-  'orange.600': '#f54900',
-  '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': '#ffb900',
-  'amber.500': '#fe9a00',
-  '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': '#fdc700',
-  'yellow.500': '#f0b100',
-  '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': '#7bf1a7',
-  'green.400': '#06df72',
-  'green.500': '#00c950',
-  'green.600': '#00a63e',
-  'green.700': '#008235',
-  'green.800': '#026630',
-  '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': '#46ecd4',
-  'teal.400': '#00d5bd',
-  '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': '#155dfb',
-  'blue.700': '#1447e6',
-  'blue.800': '#193cb8',
-  'blue.900': '#1c398e',
-  'blue.950': '#162556',
-
-  'indigo.50': '#eef2ff',
-  'indigo.100': '#e0e7ff',
-  'indigo.200': '#c7d2ff',
-  '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': '#ed6aff',
-  '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': '#fea5d5',
-  'pink.400': '#fb64b6',
-  'pink.500': '#f6339a',
-  'pink.600': '#e60076',
-  'pink.700': '#c6005b',
-  'pink.800': '#a3004c',
-  'pink.900': '#861043',
-  'pink.950': '#510424',
-
-  'rose.50': '#fff1f2',
-  'rose.100': '#ffe4e6',
-  'rose.200': '#ffccd2',
-  'rose.300': '#ffa1ad',
-  'rose.400': '#ff637e',
-  'rose.500': '#ff2056',
-  'rose.600': '#ec003f',
-  'rose.700': '#c70036',
-  'rose.800': '#a50036',
-  'rose.900': '#8b0836',
-  'rose.950': '#4d0218',
-};
-
-const defaultRadii: Record<string, RadiiValue> = {
-  'none': 0,
-  'sm': 4,
-  'md': 8,
-  'lg': 12,
-  'xl': 16,
-  '2xl': 24,
-  'full': 9999,
-};
-
-const defaultTypography: Record<string, TypographyValue> = {
-  h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 },
-  h2: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
-  h3: { fontSize: 20, fontWeight: '600', lineHeight: 28 },
-  body: { fontSize: 16, lineHeight: 24 },
-  caption: { fontSize: 14, lineHeight: 20 },
-  small: { fontSize: 12, lineHeight: 16 },
-};
-
-const grayScales = ['slate', 'gray', 'zinc', 'neutral', 'stone'] as const;
-
-export type BaseColor = (typeof grayScales)[number];
-
-export type ThemeColor =
-  | BaseColor
-  | 'red'
-  | 'orange'
-  | 'amber'
-  | 'yellow'
-  | 'lime'
-  | 'green'
-  | 'emerald'
-  | 'teal'
-  | 'cyan'
-  | 'sky'
-  | 'blue'
-  | 'indigo'
-  | 'violet'
-  | 'purple'
-  | 'fuchsia'
-  | 'pink'
-  | 'rose';
-
-export const createThemeColors = ({ base, theme }: { base: BaseColor; theme: ThemeColor }) => {
-  const b = (shade: number) => defaultColors[`${base}.${shade}`]!;
-  const t = (shade: number) => defaultColors[`${theme}.${shade}`]!;
-  const isGray = (grayScales as readonly string[]).includes(theme);
-
-  const light: Record<string, ColorsValue> = {
-    'background': '#FFFFFF',
-    'foreground': b(950),
-    'card': '#FFFFFF',
-    'card-foreground': b(950),
-    'popover': '#FFFFFF',
-    'popover-foreground': b(950),
-    'primary': isGray ? t(900) : t(600),
-    'primary-foreground': isGray ? t(50) : '#FFFFFF',
-    'secondary': b(100),
-    'secondary-foreground': b(900),
-    'muted': b(100),
-    'muted-foreground': b(500),
-    'accent': b(100),
-    'accent-foreground': b(900),
-    'destructive': defaultColors['red.600']!,
-    'destructive-foreground': b(50),
-    'border': b(200),
-    'input': b(200),
-    'ring': isGray ? b(400) : t(400),
-    'chart-1': defaultColors['orange.600']!,
-    'chart-2': defaultColors['teal.600']!,
-    'chart-3': defaultColors['cyan.900']!,
-    'chart-4': defaultColors['amber.400']!,
-    'chart-5': defaultColors['amber.500']!,
-  };
-
-  const dark: Record<string, ColorsValue> = {
-    'background': b(950),
-    'foreground': b(50),
-    'card': b(900),
-    'card-foreground': b(50),
-    'popover': b(900),
-    'popover-foreground': b(50),
-    'primary': isGray ? t(200) : t(500),
-    'primary-foreground': isGray ? t(900) : '#FFFFFF',
-    'secondary': b(800),
-    'secondary-foreground': b(50),
-    'muted': b(800),
-    'muted-foreground': b(400),
-    'accent': b(800),
-    'accent-foreground': b(50),
-    'destructive': defaultColors['red.400']!,
-    'destructive-foreground': b(50),
-    'border': b(800),
-    'input': b(800),
-    'ring': isGray ? b(500) : t(500),
-    'chart-1': defaultColors['blue.700']!,
-    'chart-2': defaultColors['emerald.500']!,
-    'chart-3': defaultColors['amber.500']!,
-    'chart-4': defaultColors['purple.500']!,
-    'chart-5': defaultColors['rose.500']!,
-  };
-
-  return { light, dark };
-};
-
-const defaultSemanticColors = createThemeColors({ base: 'neutral', theme: 'neutral' });
-
-export const defaultTheme = {
-  space: defaultSpace,
-  sizes: { ...defaultSpace, full: '100%' as const, half: '50%' as const },
-  colors: { ...defaultColors, ...defaultSemanticColors.light },
-  radii: defaultRadii,
-  typography: defaultTypography,
-  breakpoints: [480, 768, 1024],
-} satisfies ThemedDict;

package/src/index.ts

@@ -8,4 +8,3 @@ export * from './hook/useSxTokens';
 export * from './provider/StyledSystemProvider';
 export * from './util/propsToThemedStyle';
 export * from './util/createSxComponent';
-export * from './util/createTheme';

package/src/provider/StyledSystemProvider.tsx

@@ -1,10 +1,10 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 import { useWindowDimensions } from 'react-native';
+import { createTheme } from '@react-native-styled-system/util';
 
 import type { ThemedDict } from '../@types/ThemedDict';
 import { emptyThemedDict } from '../@types/ThemedDict';
-import { createTheme } from '../util/createTheme';
 
 export type StyledSystemContextValue = {
   theme: ThemedDict;

package/lib/commonjs/util/createTheme.js

@@ -1,43 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createTheme = createTheme;
-function createTheme(baseOrConfig = {}, overrides) {
-  if (overrides !== undefined) {
-    return {
-      colors: {
-        ...baseOrConfig.colors,
-        ...overrides.colors
-      },
-      space: {
-        ...baseOrConfig.space,
-        ...overrides.space
-      },
-      sizes: {
-        ...baseOrConfig.sizes,
-        ...overrides.sizes
-      },
-      radii: {
-        ...baseOrConfig.radii,
-        ...overrides.radii
-      },
-      typography: {
-        ...baseOrConfig.typography,
-        ...overrides.typography
-      },
-      breakpoints: overrides.breakpoints ?? baseOrConfig.breakpoints ?? []
-    };
-  }
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    breakpoints: [],
-    ...baseOrConfig
-  };
-}
-//# sourceMappingURL=createTheme.js.map

package/lib/commonjs/util/createTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createTheme","baseOrConfig","overrides","undefined","colors","space","sizes","radii","typography","breakpoints"],"sourceRoot":"../../../src","sources":["util/createTheme.ts"],"mappings":";;;;;;AAIO,SAASA,WAAWA,CACzBC,YAAiC,GAAG,CAAC,CAAC,EACtCC,SAA+B,EACnB;EACZ,IAAIA,SAAS,KAAKC,SAAS,EAAE;IAC3B,OAAO;MACLC,MAAM,EAAE;QAAE,GAAGH,YAAY,CAACG,MAAM;QAAE,GAAGF,SAAS,CAACE;MAAO,CAAC;MACvDC,KAAK,EAAE;QAAE,GAAGJ,YAAY,CAACI,KAAK;QAAE,GAAGH,SAAS,CAACG;MAAM,CAAC;MACpDC,KAAK,EAAE;QAAE,GAAGL,YAAY,CAACK,KAAK;QAAE,GAAGJ,SAAS,CAACI;MAAM,CAAC;MACpDC,KAAK,EAAE;QAAE,GAAGN,YAAY,CAACM,KAAK;QAAE,GAAGL,SAAS,CAACK;MAAM,CAAC;MACpDC,UAAU,EAAE;QAAE,GAAGP,YAAY,CAACO,UAAU;QAAE,GAAGN,SAAS,CAACM;MAAW,CAAC;MACnEC,WAAW,EAAEP,SAAS,CAACO,WAAW,IAAIR,YAAY,CAACQ,WAAW,IAAI;IACpE,CAAC;EACH;EAEA,OAAO;IACLL,MAAM,EAAE,CAAC,CAAC;IACVC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,UAAU,EAAE,CAAC,CAAC;IACdC,WAAW,EAAE,EAAE;IACf,GAAGR;EACL,CAAC;AACH","ignoreList":[]}

package/lib/module/util/createTheme.js

@@ -1,37 +0,0 @@
-export function createTheme(baseOrConfig = {}, overrides) {
-  if (overrides !== undefined) {
-    return {
-      colors: {
-        ...baseOrConfig.colors,
-        ...overrides.colors
-      },
-      space: {
-        ...baseOrConfig.space,
-        ...overrides.space
-      },
-      sizes: {
-        ...baseOrConfig.sizes,
-        ...overrides.sizes
-      },
-      radii: {
-        ...baseOrConfig.radii,
-        ...overrides.radii
-      },
-      typography: {
-        ...baseOrConfig.typography,
-        ...overrides.typography
-      },
-      breakpoints: overrides.breakpoints ?? baseOrConfig.breakpoints ?? []
-    };
-  }
-  return {
-    colors: {},
-    space: {},
-    sizes: {},
-    radii: {},
-    typography: {},
-    breakpoints: [],
-    ...baseOrConfig
-  };
-}
-//# sourceMappingURL=createTheme.js.map

package/lib/module/util/createTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createTheme","baseOrConfig","overrides","undefined","colors","space","sizes","radii","typography","breakpoints"],"sourceRoot":"../../../src","sources":["util/createTheme.ts"],"mappings":"AAIA,OAAO,SAASA,WAAWA,CACzBC,YAAiC,GAAG,CAAC,CAAC,EACtCC,SAA+B,EACnB;EACZ,IAAIA,SAAS,KAAKC,SAAS,EAAE;IAC3B,OAAO;MACLC,MAAM,EAAE;QAAE,GAAGH,YAAY,CAACG,MAAM;QAAE,GAAGF,SAAS,CAACE;MAAO,CAAC;MACvDC,KAAK,EAAE;QAAE,GAAGJ,YAAY,CAACI,KAAK;QAAE,GAAGH,SAAS,CAACG;MAAM,CAAC;MACpDC,KAAK,EAAE;QAAE,GAAGL,YAAY,CAACK,KAAK;QAAE,GAAGJ,SAAS,CAACI;MAAM,CAAC;MACpDC,KAAK,EAAE;QAAE,GAAGN,YAAY,CAACM,KAAK;QAAE,GAAGL,SAAS,CAACK;MAAM,CAAC;MACpDC,UAAU,EAAE;QAAE,GAAGP,YAAY,CAACO,UAAU;QAAE,GAAGN,SAAS,CAACM;MAAW,CAAC;MACnEC,WAAW,EAAEP,SAAS,CAACO,WAAW,IAAIR,YAAY,CAACQ,WAAW,IAAI;IACpE,CAAC;EACH;EAEA,OAAO;IACLL,MAAM,EAAE,CAAC,CAAC;IACVC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,KAAK,EAAE,CAAC,CAAC;IACTC,UAAU,EAAE,CAAC,CAAC;IACdC,WAAW,EAAE,EAAE;IACf,GAAGR;EACL,CAAC;AACH","ignoreList":[]}

package/lib/typescript/src/util/createTheme.d.ts

@@ -1,4 +0,0 @@
-import type { ThemedDict } from '../@types/ThemedDict';
-export declare function createTheme(config?: Partial<ThemedDict>): ThemedDict;
-export declare function createTheme(base: ThemedDict, overrides: Partial<ThemedDict>): ThemedDict;
-//# sourceMappingURL=createTheme.d.ts.map

package/lib/typescript/src/util/createTheme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../../../../src/util/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,wBAAgB,WAAW,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC;AACtE,wBAAgB,WAAW,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC"}

package/src/util/createTheme.test.ts

@@ -1,126 +0,0 @@
-import type { ThemedDict } from '../@types/ThemedDict';
-import { defaultTheme } from '../@types/ThemedDict';
-
-import { createTheme } from './createTheme';
-
-describe('createTheme', () => {
-  describe('create mode (single argument)', () => {
-    it('returns all empty defaults when called without arguments', () => {
-      const theme = createTheme();
-      expect(theme).toEqual({
-        colors: {},
-        space: {},
-        sizes: {},
-        radii: {},
-        typography: {},
-        breakpoints: [],
-      });
-    });
-
-    it('returns all empty defaults when called with empty object', () => {
-      const theme = createTheme({});
-      expect(theme).toEqual({
-        colors: {},
-        space: {},
-        sizes: {},
-        radii: {},
-        typography: {},
-        breakpoints: [],
-      });
-    });
-
-    it('keeps provided groups and fills missing ones with empty defaults', () => {
-      const theme = createTheme({
-        colors: { primary: '#000' },
-        space: { '1': 4 },
-      });
-      expect(theme.colors).toEqual({ primary: '#000' });
-      expect(theme.space).toEqual({ '1': 4 });
-      expect(theme.sizes).toEqual({});
-      expect(theme.radii).toEqual({});
-      expect(theme.typography).toEqual({});
-      expect(theme.breakpoints).toEqual([]);
-    });
-
-    it('keeps provided breakpoints', () => {
-      const theme = createTheme({ breakpoints: [480, 768] });
-      expect(theme.breakpoints).toEqual([480, 768]);
-    });
-  });
-
-  describe('extend mode (two arguments)', () => {
-    const base: ThemedDict = {
-      colors: { red: '#FF0000', blue: '#0000FF' },
-      space: { '1': 4, '2': 8 },
-      sizes: { sm: 16 },
-      radii: { md: 8 },
-      typography: { body: { fontSize: 16, lineHeight: 24 } },
-      breakpoints: [480, 768],
-    };
-
-    it('returns base as-is when overrides is empty', () => {
-      const theme = createTheme(base, {});
-      expect(theme).toEqual(base);
-    });
-
-    it('merges colors (keeps existing + adds new)', () => {
-      const theme = createTheme(base, { colors: { brand: '#FF6600' } });
-      expect(theme.colors).toEqual({ red: '#FF0000', blue: '#0000FF', brand: '#FF6600' });
-    });
-
-    it('overrides existing token values', () => {
-      const theme = createTheme(base, { colors: { red: '#CC0000' } });
-      expect(theme.colors.red).toBe('#CC0000');
-      expect(theme.colors.blue).toBe('#0000FF');
-    });
-
-    it('merges each token group independently', () => {
-      const theme = createTheme(base, {
-        space: { '3': 12 },
-        sizes: { lg: 32 },
-        radii: { lg: 16 },
-        typography: { h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 } },
-      });
-      expect(theme.space).toEqual({ '1': 4, '2': 8, '3': 12 });
-      expect(theme.sizes).toEqual({ sm: 16, lg: 32 });
-      expect(theme.radii).toEqual({ md: 8, lg: 16 });
-      expect(theme.typography).toEqual({
-        body: { fontSize: 16, lineHeight: 24 },
-        h1: { fontSize: 32, fontWeight: 'bold', lineHeight: 40 },
-      });
-    });
-
-    it('replaces breakpoints when provided in overrides', () => {
-      const theme = createTheme(base, { breakpoints: [500, 1024, 1440] });
-      expect(theme.breakpoints).toEqual([500, 1024, 1440]);
-    });
-
-    it('falls back to base breakpoints when overrides omits breakpoints', () => {
-      const theme = createTheme(base, { colors: { brand: '#000' } });
-      expect(theme.breakpoints).toEqual([480, 768]);
-    });
-
-    it('does not mutate base or overrides', () => {
-      const baseCopy = JSON.parse(JSON.stringify(base));
-      const overrides = { colors: { brand: '#FF6600' } };
-      const overridesCopy = JSON.parse(JSON.stringify(overrides));
-
-      createTheme(base, overrides);
-
-      expect(base).toEqual(baseCopy);
-      expect(overrides).toEqual(overridesCopy);
-    });
-
-    it('works with defaultTheme as base', () => {
-      const theme = createTheme(defaultTheme, {
-        colors: { brand: '#FF6600' },
-        space: { huge: 200 },
-      });
-      expect(theme.colors.brand).toBe('#FF6600');
-      expect(theme.colors.white).toBe('#FFFFFF');
-      expect(theme.space.huge).toBe(200);
-      expect(theme.space['1']).toBe(4);
-      expect(theme.breakpoints).toEqual(defaultTheme.breakpoints);
-    });
-  });
-});