@react-native-styled-system/core 1.4.4 → 2.1.1

package/src/@types/ThemedDict.ts

@@ -9,6 +9,7 @@ export interface ThemedDict {
   colors: Record<string | number, ColorsValue>;
   radii: Record<string | number, RadiiValue>;
   typography: Record<string | number, TypographyValue>;
+  breakpoints?: number[];
 }
 export const emptyThemedDict = {
   space: {},
@@ -16,4 +17,415 @@ export const emptyThemedDict = {
   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/__testUtils__/testTheme.ts

@@ -0,0 +1,43 @@
+import type { ThemedDict } from '../@types/ThemedDict';
+import { emptyThemedDict } from '../@types/ThemedDict';
+
+export const emptyTheme = emptyThemedDict;
+
+export const baseTheme: ThemedDict = {
+  colors: {
+    red: 'red',
+    blue: 'blue',
+    green: 'green',
+  },
+  sizes: {
+    1: 4,
+    2: 8,
+    pagePadding: 20,
+    full: '100%',
+  },
+  space: { 1: 4, 2: 8, pagePadding: 20, full: '100%' },
+  radii: {
+    sm: 8,
+    md: 12,
+    lg: 20,
+  },
+  typography: {
+    title: {
+      fontFamily: 'Noto Sans',
+      fontSize: 14,
+      fontStyle: 'normal',
+      fontWeight: '400',
+    },
+    body: {
+      fontFamily: 'Noto Sans',
+      fontSize: 12,
+      fontStyle: 'normal',
+      fontWeight: '400',
+    },
+  },
+};
+
+export const responsiveTheme: ThemedDict = {
+  ...baseTheme,
+  breakpoints: [480, 768, 1024],
+};

package/src/hook/useSx.test.ts

@@ -3,9 +3,9 @@ import { StyleSheet } from 'react-native';
 import { is } from '@mj-studio/js-util';
 import { renderHook } from '@testing-library/react-native';
 
+import { baseTheme, emptyTheme, responsiveTheme } from '../__testUtils__/testTheme';
 import type { TextSxProps } from '../@types/SxProps';
 import type { ThemedDict } from '../@types/ThemedDict';
-import { emptyThemedDict } from '../@types/ThemedDict';
 import type { ThemedStyleType } from '../util/propsToThemedStyle';
 
 import type { StyleFallback, StyleTransform } from './useSx';
@@ -21,6 +21,7 @@ function expectResult(
     transform,
     fallback,
     cache,
+    screenWidth,
   }: {
     expectation: object;
     filteredPropsExpectation?: object;
@@ -28,13 +29,14 @@ function expectResult(
     transform?: StyleTransform;
     fallback?: StyleFallback;
     cache?: boolean;
+    screenWidth?: number;
   },
 ) {
   const {
     result: {
       current: { getStyle, filteredProps },
     },
-  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback, cache }));
+  } = renderHook(() => useSx(props, { theme, styleType, transform, fallback, cache, screenWidth }));
 
   if (expectation) {
     expect(StyleSheet.flatten(getStyle())).toEqual(expectation);
@@ -47,42 +49,6 @@ function expectResult(
   return [getStyle(), filteredProps];
 }
 
-const emptyTheme = emptyThemedDict;
-
-const baseTheme: ThemedDict = {
-  colors: {
-    red: 'red',
-    blue: 'blue',
-    green: 'green',
-  },
-  sizes: {
-    1: 4,
-    2: 8,
-    pagePadding: 20,
-    full: '100%',
-  },
-  space: { 1: 4, 2: 8, pagePadding: 20, full: '100%' },
-  radii: {
-    sm: 8,
-    md: 12,
-    lg: 20,
-  },
-  typography: {
-    title: {
-      fontFamily: 'Noto Sans',
-      fontSize: 14,
-      fontStyle: 'normal',
-      fontWeight: '400',
-    },
-    body: {
-      fontFamily: 'Noto Sans',
-      fontSize: 12,
-      fontStyle: 'normal',
-      fontWeight: '400',
-    },
-  },
-};
-
 describe('simple usages', () => {
   it('handle empty', () => {
     expectResult(baseTheme, {}, { expectation: {} });
@@ -404,3 +370,116 @@ describe('cache', () => {
     expect(style1 === style2).toBe(true);
   });
 });
+
+describe('responsive', () => {
+  it.each([
+    { label: 'base', screenWidth: 320, expected: 100 },
+    { label: 'first breakpoint', screenWidth: 480, expected: 200 },
+    { label: 'second breakpoint', screenWidth: 768, expected: 300 },
+    { label: 'third breakpoint', screenWidth: 1024, expected: 400 },
+  ])('resolves responsive array based on screenWidth - $label', ({ screenWidth, expected }) => {
+    expectResult(
+      responsiveTheme,
+      { w: [100, 200, 300, 400] as any },
+      { expectation: { width: expected }, screenWidth },
+    );
+  });
+
+  it('handles mixed array and single values', () => {
+    expectResult(
+      responsiveTheme,
+      { w: [100, 200] as any, h: 50 },
+      { expectation: { width: 200, height: 50 }, screenWidth: 500 },
+    );
+  });
+
+  it('resolves color token arrays', () => {
+    expectResult(
+      responsiveTheme,
+      { bg: ['red', 'blue'] as any },
+      { expectation: { backgroundColor: 'blue' }, screenWidth: 500 },
+    );
+  });
+
+  it('uses base value when no breakpoints defined', () => {
+    expectResult(
+      baseTheme,
+      { w: [100, 200, 300] as any },
+      { expectation: { width: 100 }, screenWidth: 9999 },
+    );
+  });
+
+  it('uses base value when screenWidth is 0 (default)', () => {
+    expectResult(
+      responsiveTheme,
+      { w: [100, 200] as any },
+      { expectation: { width: 100 }, screenWidth: 0 },
+    );
+  });
+
+  it('resolves space token arrays', () => {
+    expectResult(
+      responsiveTheme,
+      { m: [1, 2] as any },
+      { expectation: { margin: 8 }, screenWidth: 500 },
+    );
+  });
+
+  it('works with transform + responsive', () => {
+    expectResult(
+      responsiveTheme,
+      { mt: [1, 2] as any },
+      {
+        expectation: { marginTop: 8, marginHorizontal: 8 },
+        screenWidth: 500,
+        transform: ({ marginTop }) => ({
+          mx: is.number(marginTop) ? marginTop : 0,
+        }),
+      },
+    );
+  });
+
+  it('resolves responsive values in sx prop', () => {
+    expectResult(
+      responsiveTheme,
+      { sx: { w: [100, 200] as any } },
+      { expectation: { width: 200 }, screenWidth: 500 },
+    );
+  });
+
+  it('resolves responsive values in fallback', () => {
+    expectResult(
+      responsiveTheme,
+      {},
+      { fallback: { w: [100, 200] as any }, expectation: { width: 200 }, screenWidth: 500 },
+    );
+  });
+
+  it('resolves responsive radii token arrays', () => {
+    expectResult(
+      responsiveTheme,
+      { radius: ['sm', 'lg'] as any },
+      { expectation: { borderRadius: 20 }, screenWidth: 500 },
+    );
+  });
+
+  it('prop responsive overrides fallback responsive', () => {
+    expectResult(
+      responsiveTheme,
+      { w: [300, 400] as any },
+      {
+        fallback: { w: [100, 200] as any },
+        expectation: { width: 400 },
+        screenWidth: 500,
+      },
+    );
+  });
+
+  it('sx responsive overrides prop responsive', () => {
+    expectResult(
+      responsiveTheme,
+      { w: [100, 200] as any, sx: { w: [300, 400] as any } },
+      { expectation: { width: 400 }, screenWidth: 500 },
+    );
+  });
+});

package/src/hook/useSx.ts

@@ -25,6 +25,7 @@ export type UseSxOptions = {
   transform?: StyleTransform;
   fallback?: StyleFallback;
   cache?: boolean;
+  screenWidth?: number;
 };
 const defaultUseSxOptions: UseSxOptions = { styleType: 'ViewStyle' };
 export const useSx = <P extends Props = Props>(
@@ -35,6 +36,7 @@ export const useSx = <P extends Props = Props>(
     transform = defaultUseSxOptions.transform,
     fallback,
     cache,
+    screenWidth: optionScreenWidth,
   }: UseSxOptions = defaultUseSxOptions,
 ) => {
   const styledSystemContext = useContext(StyledSystemContext);
@@ -42,10 +44,12 @@ export const useSx = <P extends Props = Props>(
   const getStyle = useStableCallback((): StyleProp<AnyStyle> | undefined => {
     const skip = !props && !fallback;
     const theme = optionTheme ?? styledSystemContext?.theme;
+    const breakpoints = theme?.breakpoints ?? [];
+    const screenWidth = optionScreenWidth ?? styledSystemContext?.screenWidth ?? 0;
 
     if (skip) {
       if (is.function(transform)) {
-        return propsToThemedStyle({ theme, sx: transform({}) });
+        return propsToThemedStyle({ theme, sx: transform({}), breakpoints, screenWidth });
       } else {
         return;
       }
@@ -68,6 +72,8 @@ export const useSx = <P extends Props = Props>(
       theme,
       sx: mergedSx,
       styleType,
+      breakpoints,
+      screenWidth,
     });
 
     const composedStyle = !mergedSxStyle
@@ -79,7 +85,10 @@ export const useSx = <P extends Props = Props>(
     if (is.function(transform)) {
       const transformedSx = transform(StyleSheet.flatten(composedStyle));
 
-      const ret = [composedStyle, propsToThemedStyle({ theme, sx: transformedSx, styleType })];
+      const ret = [
+        composedStyle,
+        propsToThemedStyle({ theme, sx: transformedSx, styleType, breakpoints, screenWidth }),
+      ];
 
       if (cache) {
         return getCachedStyle(ret);