@react-native-styled-system/util 2.1.2

package/src/createTheme.test.ts

@@ -0,0 +1,125 @@
+import { createTheme } from './createTheme';
+import type { ThemedDict } from './defaultTheme';
+import { defaultTheme } from './defaultTheme';
+
+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);
+    });
+  });
+});

package/src/createTheme.ts

@@ -0,0 +1,32 @@
+import type { Theme } from './types';
+
+type CreateThemeType = {
+  (config?: Partial<Theme>): Theme;
+  (base: Theme, overrides: Partial<Theme>): Theme;
+};
+
+export const createTheme: CreateThemeType = (
+  baseOrConfig: Partial<Theme> = {},
+  overrides?: Partial<Theme>,
+) => {
+  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,
+  };
+};

package/src/defaultTheme.ts

@@ -0,0 +1,431 @@
+import type { ColorsValue, RadiiValue, SizesValue, SpaceValue, TypographyValue } from './types';
+
+/*
+ * Theme type from developer
+ */
+export interface ThemedDict {
+  space: Record<string | number, SpaceValue>;
+  sizes: Record<string | number, SizesValue>;
+  colors: Record<string | number, ColorsValue>;
+  radii: Record<string | number, RadiiValue>;
+  typography: Record<string | number, TypographyValue>;
+  breakpoints?: number[];
+}
+export const emptyThemedDict = {
+  space: {},
+  colors: {},
+  sizes: {},
+  radii: {},
+  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

@@ -0,0 +1,3 @@
+export { createTheme } from './createTheme';
+export { defaultTheme } from './defaultTheme';
+export type { Theme } from './types';

package/src/types.ts

@@ -0,0 +1,24 @@
+import type { TextStyle } from 'react-native';
+
+export type SpaceValue = number | 'auto' | `${number}%` | null;
+export type SizesValue = number | 'auto' | `${number}%` | null;
+export type ColorsValue = string;
+export type RadiiValue = number;
+export type TypographyValue = {
+  fontFamily?: TextStyle['fontFamily'];
+  fontSize?: TextStyle['fontSize'];
+  fontWeight?: TextStyle['fontWeight'];
+  lineHeight?: TextStyle['lineHeight'];
+  letterSpacing?: TextStyle['letterSpacing'];
+  textAlign?: TextStyle['textAlign'];
+  fontStyle?: TextStyle['fontStyle'];
+};
+
+export type Theme = {
+  space: Record<string | number, SpaceValue>;
+  sizes: Record<string | number, SizesValue>;
+  colors: Record<string | number, ColorsValue>;
+  radii: Record<string | number, RadiiValue>;
+  typography: Record<string | number, TypographyValue>;
+  breakpoints?: number[];
+};