@kimdw-rtk/ui 0.0.0

package/src/styles/overlay.css.ts

@@ -0,0 +1,40 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const enter = style({
+  opacity: '1 !important',
+  transition: 'all 0.2s ease',
+});
+
+export const base = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'fixed',
+  inset: '0',
+  zIndex: '100',
+
+  backgroundColor: '#00000080',
+
+  opacity: '0',
+});
+
+export const exit = style({
+  opacity: '0 !important',
+  transition: 'all 0.2s ease',
+
+  pointerEvents: 'none',
+});
+
+globalStyle(`${enter} > div`, {
+  transform: 'scale(1) !important',
+  transition: 'all 0.2s ease',
+});
+
+globalStyle(`${base} > div`, {
+  transform: 'scale(0.9)',
+});
+
+globalStyle(`${exit} > div`, {
+  transform: 'scale(0.9) !important',
+  transition: 'all 0.2s ease',
+});

package/src/styles/sprinkles.css.ts

@@ -0,0 +1,149 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+
+import { sprinklesLayer } from '#styles';
+import { theme } from '#themes';
+import { breakpoint, lightColor, spacing, typography } from '#tokens';
+
+type ColorName = keyof typeof lightColor;
+type ColorScale<C extends ColorName> = keyof (typeof lightColor)[C];
+type Color = Record<`${ColorName}-${ColorScale<ColorName>}`, string>;
+type SemanticColor = Record<keyof typeof theme.color, string>;
+
+const colors = Object.assign(
+  {},
+  ...[
+    ...Object.entries(lightColor).reduce(
+      (prev, [name, scales]) => [
+        ...prev,
+        ...Object.entries(scales).map(
+          ([scale, value]) =>
+            ({ [`${name}-${scale}`]: `rgb(${value})` }) as Color,
+        ),
+      ],
+      [] as Color[],
+    ),
+    ...Object.entries(theme.color).map(
+      ([name, value]) => ({ [name]: `rgb(${value})` }) as SemanticColor,
+    ),
+  ],
+) as Record<keyof Color | keyof SemanticColor, string>;
+
+export const colorProperties = defineProperties({
+  '@layer': sprinklesLayer,
+  properties: {
+    color: colors,
+    borderColor: colors,
+    backgroundColor: colors,
+  },
+});
+
+const size = {
+  auto: 'auto',
+  '0': '0',
+  '100%': '100%',
+  '5em': '5em',
+  '10em': '10em',
+  '15em': '15em',
+  '20em': '20em',
+  '25em': '25em',
+};
+
+export const boxProperties = defineProperties({
+  '@layer': sprinklesLayer,
+  conditions: {
+    mobile: {},
+    desktop: { '@media': 'screen and (min-width: 1024px)' },
+  },
+  defaultCondition: 'mobile',
+  properties: {
+    display: ['flex', 'block', 'none', 'inline', 'inline-block', 'inline-flex'],
+    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
+    flexWrap: ['nowrap', 'wrap', 'wrap-reverse', 'revert', 'revert-layer'],
+    flexShrink: {
+      '0': 0,
+      '1': 1,
+    },
+    flexGrow: {
+      '0': 0,
+      '1': 1,
+    },
+    flexBasis: size,
+    justifyContent: [
+      'stretch',
+      'flex-start',
+      'center',
+      'flex-end',
+      'space-around',
+      'space-between',
+    ],
+    alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    gap: spacing,
+    paddingTop: spacing,
+    paddingBottom: spacing,
+    paddingLeft: spacing,
+    paddingRight: spacing,
+    marginTop: spacing,
+    marginBottom: spacing,
+    marginLeft: spacing,
+    marginRight: spacing,
+    boxShadow: {
+      'border-sm': `0 0 0.5rem 0.0625rem rgba(${theme.color.border}, 0.33)`,
+      'border-md': `0 0 1rem 0.1875rem rgba(${theme.color.border}, 0.33)`,
+      'border-lg': `0 0 1.5rem 0.375rem rgba(${theme.color.border}, 0.33)`,
+      'accent-sm': `0 0 0.5rem 0.0625rem rgb(${theme.color.accent})`,
+      'accent-md': `0 0 1rem 0.125rem rgb(${theme.color.accent})`,
+      'accent-lg': `0 0 1.5rem 0.375rem rgb(${theme.color.accent})`,
+    },
+    borderRadius: {
+      none: '0',
+      sm: `calc(${theme.borderRadius} * 0.75)`,
+      md: theme.borderRadius,
+      lg: `calc(${theme.borderRadius} * 1.5)`,
+    },
+    width: size,
+    height: size,
+  },
+  shorthands: {
+    padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
+    paddingX: ['paddingLeft', 'paddingRight'],
+    paddingY: ['paddingTop', 'paddingBottom'],
+    margin: ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'],
+    marginX: ['marginLeft', 'marginRight'],
+    marginY: ['marginTop', 'marginBottom'],
+  },
+});
+
+export const typographyProperties = defineProperties({
+  '@layer': sprinklesLayer,
+  conditions: {
+    mobile: {},
+    desktop: { '@media': `screen and (min-width: ${breakpoint.md}px)` },
+  },
+  defaultCondition: 'mobile',
+  properties: {
+    lineHeight: typography.lineHeight,
+    fontSize: typography.size,
+    fontWeight: typography.weight,
+    wordBreak: ['break-all', 'break-word', 'keep-all'],
+  },
+});
+
+export const miscProperties = defineProperties({
+  '@layer': sprinklesLayer,
+  properties: {
+    cursor: {
+      pointer: 'pointer',
+      'not-allowed': 'not-allowed',
+      default: 'default',
+    },
+  },
+});
+
+export const sprinkles = createSprinkles(
+  boxProperties,
+  colorProperties,
+  typographyProperties,
+  miscProperties,
+);
+
+export type SprinklesProps = Parameters<typeof sprinkles>[0];

package/src/styles/sx.ts

@@ -0,0 +1,13 @@
+import { sprinkles } from '#styles';
+
+export const sx = (param?: Parameters<typeof sprinkles>[0] | string) => {
+  if (param === undefined) {
+    return '';
+  }
+
+  if (typeof param === 'string') {
+    return param;
+  }
+
+  return sprinkles(param);
+};

package/src/tests/uiTest.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { sprinkles } from '#styles';
+
+//eslint-disable-next-line
+export const uiTest = <T extends HTMLElement>(
+  Component: React.ComponentType<any>,
+  name: string,
+) => {
+  describe(`${name} UI`, () => {
+    test('컴포넌트가 렌더링된다.', () => {
+      render(<Component data-testid="component" />);
+      expect(screen.getByTestId('component')).toBeInTheDocument();
+    });
+
+    test('sprinkles을 사용할 수 있다.', () => {
+      render(
+        <Component
+          className={sprinkles({ margin: 'md' })}
+          data-testid="component"
+        />,
+      );
+      expect(screen.getByTestId('component')).toHaveClass(
+        sprinkles({ margin: 'md' }),
+      );
+    });
+
+    test('sx를 사용할 수 있다.', () => {
+      render(<Component sx={{ margin: 'md' }} data-testid="component" />);
+      expect(screen.getByTestId('component')).toHaveClass(
+        sprinkles({ margin: 'md' }),
+      );
+    });
+
+    test('className을 적용할 수 있다.', () => {
+      render(<Component className="test" data-testid="component" />);
+      expect(screen.getByTestId('component')).toHaveClass('test');
+    });
+
+    test('inline style을 적용할 수 있다.', () => {
+      render(<Component style={{ color: 'red' }} data-testid="component" />);
+      expect(screen.getByTestId('component')).toHaveStyle({ color: 'red' });
+    });
+
+    test('ref를 적용할 수 있다.', () => {
+      const ref = React.createRef<T>();
+      render(<Component ref={ref} />);
+
+      expect(ref.current).not.toBeNull();
+    });
+  });
+};

package/src/themes/darkTheme.css.ts

@@ -0,0 +1,30 @@
+import { darkColor } from '../tokens/scale/color';
+
+export const darkThemeVars = {
+  borderRadius: '6px',
+  color: {
+    background: '12, 12, 14',
+    foreground: '238, 238, 238',
+    primary: '36, 81, 173',
+    'primary-foreground': '238, 238, 238',
+    secondary: '32, 38, 45',
+    'secondary-foreground': '212, 212, 213',
+    muted: '30, 36, 44',
+    'muted-foreground': '102, 112, 133',
+    accent: '41, 52, 67',
+    'accent-foreground': '186, 212, 255',
+    border: '38, 43, 51',
+    'border.weak': '32, 32, 32',
+    card: '23, 23, 25',
+    'card-foreground': '238, 238, 238',
+    'card.gradient': '255, 255, 255',
+    success: '22, 163, 74',
+    'success-foreground': '255, 255, 255',
+    danger: '220, 38, 38',
+    'danger-foreground': '255, 255, 255',
+    warning: '202, 138, 4',
+    'warning-foreground': '30, 23, 0',
+    shadow: '0, 0, 0',
+    ...darkColor,
+  },
+};

package/src/themes/index.ts

@@ -0,0 +1,3 @@
+export * from './darkTheme.css';
+export * from './lightTheme.css';
+export { theme } from './theme.css';

package/src/themes/lightTheme.css.ts

@@ -0,0 +1,30 @@
+import { lightColor } from '../tokens/scale/color';
+
+export const lightThemeVars = {
+  borderRadius: '6px',
+  color: {
+    background: '255, 255, 255',
+    foreground: '10, 10, 11',
+    primary: '42, 122, 255',
+    'primary-foreground': '240, 248, 255',
+    secondary: '240, 242, 245',
+    'secondary-foreground': '48, 48, 49',
+    muted: '234, 239, 245',
+    'muted-foreground': '120, 120, 120',
+    accent: '216, 226, 239',
+    'accent-foreground': '32, 32, 33',
+    border: '203, 213, 225',
+    'border.weak': '220, 229, 237',
+    card: '244, 247, 255',
+    'card-foreground': '10, 10, 11',
+    'card.gradient': '179, 195, 255',
+    success: '34, 197, 94',
+    'success-foreground': '255, 255, 255',
+    danger: '239, 68, 68',
+    'danger-foreground': '255, 255, 255',
+    warning: '251, 191, 36',
+    'warning-foreground': '49, 36, 0',
+    shadow: '188, 188, 188',
+    ...lightColor,
+  },
+};

package/src/themes/theme.css.ts

@@ -0,0 +1,32 @@
+import { createThemeContract } from '@vanilla-extract/css';
+
+import { semanticColor } from '#tokens';
+
+import { lightColor } from '../tokens/scale/color';
+
+const semanticColors = semanticColor.reduce(
+  (prev, current) => ({
+    ...prev,
+    [current]: null,
+    [`${current}-foreground`]: null,
+  }),
+  {},
+) as Record<
+  | (typeof semanticColor)[number]
+  | `${(typeof semanticColor)[number]}-foreground`,
+  null
+>;
+
+export const theme = createThemeContract({
+  borderRadius: null,
+  color: {
+    background: null,
+    foreground: null,
+    border: null,
+    'border.weak': null,
+    'card.gradient': null,
+    shadow: null,
+    ...semanticColors,
+    ...lightColor,
+  },
+});

package/src/tokens/index.ts

@@ -0,0 +1,5 @@
+export { lightColor, darkColor } from './scale/color';
+export { breakpoint } from './semantic/breakpoint';
+export { semanticColor } from './semantic/color';
+export { spacing } from './semantic/spacing';
+export { typography } from './semantic/typography';