@kimdw-rtk/ui 0.0.0

package/src/tokens/scale/color.ts

@@ -0,0 +1,604 @@
+export const SCALE_COLOR = [
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+] as const;
+
+export type ScaleColor = (typeof SCALE_COLOR)[number];
+
+export const darkColor = {
+  red: {
+    50: '238, 224, 224',
+    100: '232, 210, 210',
+    200: '224, 186, 186',
+    300: '214, 148, 148',
+    400: '205, 105, 105',
+    500: '186, 64, 64',
+    600: '165, 42, 42',
+    700: '140, 28, 28',
+    800: '115, 25, 25',
+    900: '92, 22, 22',
+    950: '55, 10, 10',
+  },
+  orange: {
+    50: '240, 230, 215',
+    100: '234, 214, 190',
+    200: '225, 190, 150',
+    300: '212, 158, 100',
+    400: '200, 120, 60',
+    500: '184, 90, 25',
+    600: '160, 70, 20',
+    700: '138, 55, 20',
+    800: '112, 44, 18',
+    900: '92, 38, 18',
+    950: '55, 20, 8',
+  },
+  amber: {
+    50: '240, 230, 205',
+    100: '234, 214, 170',
+    200: '224, 190, 130',
+    300: '210, 160, 85',
+    400: '194, 140, 40',
+    500: '172, 116, 20',
+    600: '150, 94, 14',
+    700: '128, 74, 12',
+    800: '104, 58, 14',
+    900: '84, 46, 14',
+    950: '52, 22, 6',
+  },
+  yellow: {
+    50: '240, 236, 210',
+    100: '236, 226, 180',
+    200: '226, 206, 140',
+    300: '214, 188, 90',
+    400: '198, 166, 40',
+    500: '172, 136, 20',
+    600: '148, 112, 10',
+    700: '122, 90, 12',
+    800: '100, 72, 14',
+    900: '80, 60, 18',
+    950: '50, 30, 8',
+  },
+  lime: {
+    50: '224, 238, 210',
+    100: '210, 230, 180',
+    200: '194, 214, 140',
+    300: '170, 194, 100',
+    400: '146, 172, 64',
+    500: '120, 144, 34',
+    600: '98, 120, 24',
+    700: '80, 98, 20',
+    800: '66, 82, 20',
+    900: '56, 70, 20',
+    950: '28, 42, 10',
+  },
+  green: {
+    50: '220, 238, 224',
+    100: '200, 232, 210',
+    200: '176, 220, 188',
+    300: '138, 198, 150',
+    400: '100, 176, 112',
+    500: '68, 150, 82',
+    600: '48, 124, 62',
+    700: '34, 100, 50',
+    800: '28, 84, 44',
+    900: '22, 70, 38',
+    950: '8, 40, 20',
+  },
+  emerald: {
+    50: '220, 236, 226',
+    100: '200, 224, 210',
+    200: '172, 210, 186',
+    300: '132, 190, 160',
+    400: '94, 168, 136',
+    500: '60, 144, 112',
+    600: '42, 120, 94',
+    700: '34, 96, 80',
+    800: '28, 78, 66',
+    900: '20, 62, 54',
+    950: '10, 38, 34',
+  },
+  teal: {
+    50: '220, 236, 232',
+    100: '200, 226, 212',
+    200: '170, 212, 188',
+    300: '130, 192, 168',
+    400: '96, 170, 150',
+    500: '64, 144, 132',
+    600: '48, 120, 112',
+    700: '38, 96, 90',
+    800: '30, 80, 76',
+    900: '24, 66, 64',
+    950: '12, 44, 44',
+  },
+  cyan: {
+    50: '220, 238, 240',
+    100: '198, 226, 228',
+    200: '166, 212, 212',
+    300: '120, 192, 192',
+    400: '84, 168, 170',
+    500: '52, 144, 152',
+    600: '40, 120, 132',
+    700: '32, 96, 108',
+    800: '28, 80, 90',
+    900: '24, 66, 76',
+    950: '12, 48, 60',
+  },
+  sky: {
+    50: '224, 238, 244',
+    100: '206, 228, 236',
+    200: '176, 212, 224',
+    300: '134, 190, 212',
+    400: '100, 168, 200',
+    500: '70, 142, 180',
+    600: '48, 116, 156',
+    700: '36, 92, 124',
+    800: '32, 78, 108',
+    900: '28, 64, 92',
+    950: '16, 44, 70',
+  },
+  blue: {
+    50: '224, 234, 244',
+    100: '200, 220, 236',
+    200: '176, 204, 224',
+    300: '142, 180, 210',
+    400: '100, 152, 190',
+    500: '72, 126, 168',
+    600: '52, 102, 148',
+    700: '42, 84, 132',
+    800: '36, 70, 114',
+    900: '30, 56, 96',
+    950: '20, 36, 70',
+  },
+  indigo: {
+    50: '224, 228, 240',
+    100: '208, 214, 234',
+    200: '184, 192, 220',
+    300: '158, 166, 202',
+    400: '128, 136, 184',
+    500: '100, 106, 166',
+    600: '80, 86, 148',
+    700: '66, 70, 128',
+    800: '54, 56, 106',
+    900: '46, 46, 88',
+    950: '30, 28, 66',
+  },
+  violet: {
+    50: '232, 228, 242',
+    100: '218, 214, 234',
+    200: '200, 194, 220',
+    300: '174, 166, 202',
+    400: '148, 134, 184',
+    500: '122, 96, 166',
+    600: '104, 62, 152',
+    700: '90, 42, 134',
+    800: '74, 34, 114',
+    900: '60, 28, 94',
+    950: '36, 16, 66',
+  },
+  purple: {
+    50: '238, 228, 244',
+    100: '224, 212, 236',
+    200: '206, 190, 224',
+    300: '178, 160, 210',
+    400: '150, 120, 190',
+    500: '124, 82, 170',
+    600: '104, 54, 150',
+    700: '86, 38, 132',
+    800: '72, 30, 112',
+    900: '58, 24, 90',
+    950: '40, 10, 70',
+  },
+  fuchsia: {
+    50: '240, 226, 244',
+    100: '228, 210, 236',
+    200: '212, 186, 224',
+    300: '188, 154, 210',
+    400: '160, 112, 190',
+    500: '134, 72, 168',
+    600: '112, 40, 146',
+    700: '94, 28, 126',
+    800: '76, 26, 108',
+    900: '62, 24, 90',
+    950: '40, 6, 60',
+  },
+  pink: {
+    50: '238, 226, 232',
+    100: '228, 210, 224',
+    200: '214, 186, 212',
+    300: '190, 150, 194',
+    400: '160, 106, 170',
+    500: '134, 68, 144',
+    600: '112, 38, 118',
+    700: '92, 24, 92',
+    800: '76, 20, 76',
+    900: '62, 22, 66',
+    950: '40, 8, 40',
+  },
+  rose: {
+    50: '238, 226, 228',
+    100: '228, 210, 214',
+    200: '212, 186, 194',
+    300: '186, 150, 168',
+    400: '158, 108, 144',
+    500: '130, 70, 120',
+    600: '108, 36, 92',
+    700: '90, 20, 76',
+    800: '74, 18, 70',
+    900: '60, 18, 64',
+    950: '40, 6, 38',
+  },
+  slate: {
+    50: '234, 238, 240',
+    100: '220, 226, 230',
+    200: '200, 210, 220',
+    300: '176, 186, 194',
+    400: '140, 154, 168',
+    500: '98, 112, 130',
+    600: '72, 84, 104',
+    700: '54, 66, 86',
+    800: '36, 44, 62',
+    900: '22, 28, 44',
+    950: '8, 12, 26',
+  },
+  gray: {
+    50: '236, 238, 240',
+    100: '224, 226, 228',
+    200: '208, 210, 214',
+    300: '184, 186, 192',
+    400: '144, 150, 162',
+    500: '104, 110, 124',
+    600: '76, 84, 96',
+    700: '56, 64, 80',
+    800: '36, 44, 58',
+    900: '20, 28, 42',
+    950: '8, 10, 20',
+  },
+  zinc: {
+    50: '236, 236, 236',
+    100: '224, 224, 226',
+    200: '206, 206, 210',
+    300: '186, 186, 190',
+    400: '146, 146, 154',
+    500: '108, 108, 116',
+    600: '80, 80, 88',
+    700: '62, 62, 70',
+    800: '44, 44, 48',
+    900: '28, 28, 30',
+    950: '12, 12, 14',
+  },
+  neutral: {
+    50: '236, 236, 236',
+    100: '224, 224, 224',
+    200: '206, 206, 206',
+    300: '186, 186, 186',
+    400: '146, 146, 146',
+    500: '110, 110, 110',
+    600: '82, 82, 82',
+    700: '66, 66, 66',
+    800: '44, 44, 44',
+    900: '28, 28, 28',
+    950: '12, 12, 12',
+  },
+  stone: {
+    50: '236, 236, 234',
+    100: '224, 224, 222',
+    200: '208, 206, 204',
+    300: '186, 182, 180',
+    400: '146, 140, 138',
+    500: '110, 104, 100',
+    600: '86, 80, 76',
+    700: '70, 64, 60',
+    800: '44, 40, 38',
+    900: '28, 24, 22',
+    950: '12, 10, 8',
+  },
+} as const satisfies Record<ScaleColor, unknown>;
+
+export const lightColor = {
+  red: {
+    50: '254, 242, 242',
+    100: '254, 226, 226',
+    200: '254, 202, 202',
+    300: '252, 165, 165',
+    400: '248, 113, 113',
+    500: '239, 68, 68',
+    600: '220, 38, 38',
+    700: '185, 28, 28',
+    800: '153, 27, 27',
+    900: '127, 29, 29',
+    950: '69, 10, 10',
+  },
+  orange: {
+    50: '255, 247, 237',
+    100: '255, 237, 213',
+    200: '254, 215, 170',
+    300: '253, 186, 116',
+    400: '251, 146, 60',
+    500: '249, 115, 22',
+    600: '234, 88, 12',
+    700: '194, 65, 12',
+    800: '154, 52, 18',
+    900: '124, 45, 18',
+    950: '67, 20, 7',
+  },
+  amber: {
+    50: '255, 251, 235',
+    100: '254, 243, 199',
+    200: '253, 230, 138',
+    300: '252, 211, 77',
+    400: '251, 191, 36',
+    500: '245, 158, 11',
+    600: '217, 119, 6',
+    700: '180, 83, 9',
+    800: '146, 64, 14',
+    900: '120, 53, 15',
+    950: '69, 26, 3',
+  },
+  yellow: {
+    50: '254, 252, 232',
+    100: '254, 249, 195',
+    200: '254, 240, 138',
+    300: '253, 224, 71',
+    400: '250, 204, 21',
+    500: '234, 179, 8',
+    600: '202, 138, 4',
+    700: '161, 98, 7',
+    800: '133, 77, 14',
+    900: '113, 63, 18',
+    950: '66, 32, 6',
+  },
+  lime: {
+    50: '247, 254, 231',
+    100: '236, 252, 203',
+    200: '217, 249, 157',
+    300: '190, 242, 100',
+    400: '163, 230, 53',
+    500: '132, 204, 22',
+    600: '101, 163, 13',
+    700: '77, 124, 15',
+    800: '63, 98, 18',
+    900: '54, 83, 20',
+    950: '26, 46, 5',
+  },
+  green: {
+    50: '240, 253, 244',
+    100: '220, 252, 231',
+    200: '187, 247, 208',
+    300: '134, 239, 172',
+    400: '74, 222, 128',
+    500: '34, 197, 94',
+    600: '22, 163, 74',
+    700: '21, 128, 61',
+    800: '22, 101, 52',
+    900: '20, 83, 45',
+    950: '5, 46, 22',
+  },
+  emerald: {
+    50: '236, 253, 245',
+    100: '209, 250, 229',
+    200: '167, 243, 208',
+    300: '110, 231, 183',
+    400: '52, 211, 153',
+    500: '16, 185, 129',
+    600: '5, 150, 105',
+    700: '4, 120, 87',
+    800: '6, 95, 70',
+    900: '6, 78, 59',
+    950: '2, 44, 34',
+  },
+  teal: {
+    50: '240, 253, 250',
+    100: '204, 251, 241',
+    200: '153, 246, 228',
+    300: '94, 234, 212',
+    400: '45, 212, 191',
+    500: '20, 184, 166',
+    600: '13, 148, 136',
+    700: '15, 118, 110',
+    800: '17, 94, 89',
+    900: '19, 78, 74',
+    950: '4, 47, 46',
+  },
+  cyan: {
+    50: '236, 254, 255',
+    100: '207, 250, 254',
+    200: '165, 243, 252',
+    300: '103, 232, 249',
+    400: '34, 211, 238',
+    500: '6, 182, 212',
+    600: '8, 145, 178',
+    700: '14, 116, 144',
+    800: '21, 94, 117',
+    900: '22, 78, 99',
+    950: '8, 51, 68',
+  },
+  sky: {
+    50: '240, 249, 255',
+    100: '224, 242, 254',
+    200: '186, 230, 253',
+    300: '125, 211, 252',
+    400: '56, 189, 248',
+    500: '14, 165, 233',
+    600: '2, 132, 199',
+    700: '3, 105, 161',
+    800: '7, 89, 133',
+    900: '12, 74, 110',
+    950: '8, 47, 73',
+  },
+  blue: {
+    50: '239, 246, 255',
+    100: '219, 234, 254',
+    200: '191, 219, 254',
+    300: '147, 197, 253',
+    400: '96, 165, 250',
+    500: '59, 130, 246',
+    600: '37, 99, 235',
+    700: '29, 78, 216',
+    800: '30, 64, 175',
+    900: '30, 58, 138',
+    950: '23, 37, 84',
+  },
+  indigo: {
+    50: '238, 242, 255',
+    100: '224, 231, 255',
+    200: '199, 210, 254',
+    300: '165, 180, 252',
+    400: '129, 140, 248',
+    500: '99, 102, 241',
+    600: '79, 70, 229',
+    700: '67, 56, 202',
+    800: '55, 48, 163',
+    900: '49, 46, 129',
+    950: '30, 27, 75',
+  },
+  violet: {
+    50: '245, 243, 255',
+    100: '237, 233, 254',
+    200: '221, 214, 254',
+    300: '196, 181, 253',
+    400: '167, 139, 250',
+    500: '139, 92, 246',
+    600: '124, 58, 237',
+    700: '109, 40, 217',
+    800: '91, 33, 182',
+    900: '76, 29, 149',
+    950: '46, 16, 101',
+  },
+  purple: {
+    50: '250, 245, 255',
+    100: '243, 232, 255',
+    200: '233, 213, 255',
+    300: '216, 180, 254',
+    400: '192, 132, 252',
+    500: '168, 85, 247',
+    600: '147, 51, 234',
+    700: '126, 34, 206',
+    800: '107, 33, 168',
+    900: '88, 28, 135',
+    950: '59, 7, 100',
+  },
+  fuchsia: {
+    50: '253, 244, 255',
+    100: '250, 232, 255',
+    200: '245, 208, 254',
+    300: '240, 171, 252',
+    400: '232, 121, 249',
+    500: '217, 70, 239',
+    600: '192, 38, 211',
+    700: '162, 28, 175',
+    800: '134, 25, 143',
+    900: '112, 26, 117',
+    950: '74, 4, 78',
+  },
+  pink: {
+    50: '253, 242, 248',
+    100: '252, 231, 243',
+    200: '251, 207, 232',
+    300: '249, 168, 212',
+    400: '244, 114, 182',
+    500: '236, 72, 153',
+    600: '219, 39, 119',
+    700: '190, 24, 93',
+    800: '157, 23, 77',
+    900: '131, 24, 67',
+    950: '80, 7, 36',
+  },
+  rose: {
+    50: '255, 241, 242',
+    100: '255, 228, 230',
+    200: '254, 205, 211',
+    300: '253, 164, 175',
+    400: '251, 113, 133',
+    500: '244, 63, 94',
+    600: '225, 29, 72',
+    700: '190, 18, 60',
+    800: '159, 18, 57',
+    900: '136, 19, 55',
+    950: '76, 5, 25',
+  },
+  slate: {
+    50: '248, 250, 252',
+    100: '241, 245, 249',
+    200: '226, 232, 240',
+    300: '203, 213, 225',
+    400: '148, 163, 184',
+    500: '100, 116, 139',
+    600: '71, 85, 105',
+    700: '51, 65, 85',
+    800: '30, 41, 59',
+    900: '15, 23, 42',
+    950: '2, 6, 23',
+  },
+  gray: {
+    50: '249, 250, 251',
+    100: '243, 244, 246',
+    200: '229, 231, 235',
+    300: '209, 213, 219',
+    400: '156, 163, 175',
+    500: '107, 114, 128',
+    600: '75, 85, 99',
+    700: '55, 65, 81',
+    800: '31, 41, 55',
+    900: '17, 24, 39',
+    950: '3, 7, 18',
+  },
+  zinc: {
+    50: '250, 250, 250',
+    100: '244, 244, 245',
+    200: '228, 228, 231',
+    300: '212, 212, 216',
+    400: '161, 161, 170',
+    500: '113, 113, 122',
+    600: '82, 82, 91',
+    700: '63, 63, 70',
+    800: '39, 39, 42',
+    900: '24, 24, 27',
+    950: '9, 9, 11',
+  },
+  neutral: {
+    50: '250, 250, 250',
+    100: '245, 245, 245',
+    200: '229, 229, 229',
+    300: '212, 212, 212',
+    400: '163, 163, 163',
+    500: '115, 115, 115',
+    600: '82, 82, 82',
+    700: '64, 64, 64',
+    800: '38, 38, 38',
+    900: '23, 23, 23',
+    950: '10, 10, 10',
+  },
+  stone: {
+    50: '250, 250, 249',
+    100: '245, 245, 244',
+    200: '231, 229, 228',
+    300: '214, 211, 209',
+    400: '168, 162, 158',
+    500: '120, 113, 108',
+    600: '87, 83, 78',
+    700: '68, 64, 60',
+    800: '41, 37, 36',
+    900: '28, 25, 23',
+    950: '12, 10, 9',
+  },
+} as const satisfies Record<ScaleColor, unknown>;

package/src/tokens/semantic/breakpoint.ts

@@ -0,0 +1,6 @@
+export const breakpoint = {
+  sm: 768,
+  md: 1024,
+  lg: 1440,
+  desktop: 1024,
+} as const;

package/src/tokens/semantic/color.ts

@@ -0,0 +1,10 @@
+export const semanticColor = [
+  'primary',
+  'secondary',
+  'muted',
+  'accent',
+  'card',
+  'danger',
+  'warning',
+  'success',
+] as const;

package/src/tokens/semantic/spacing.ts

@@ -0,0 +1,9 @@
+export const spacing = {
+  none: '0',
+  sm: '0.25em',
+  md: '0.5em',
+  lg: '0.75em',
+  xl: '1em',
+  '2xl': '1.5em',
+  '3xl': '2em',
+} as const;

package/src/tokens/semantic/typography.ts

@@ -0,0 +1,32 @@
+export const typography = {
+  size: {
+    xs: '0.75em',
+    sm: '0.875em',
+    md: '1em',
+    lg: '1.125em',
+    xl: '1.25em',
+    '2xl': '1.375em',
+    '3xl': '1.625em',
+    '4xl': '2em',
+    '5xl': '2.5em',
+    '1rem': '1rem',
+  },
+  weight: {
+    thin: '100',
+    extraLight: '200',
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semiBold: '600',
+    bold: '700',
+    extraBold: '800',
+    black: '900',
+  },
+  lineHeight: {
+    xs: 1,
+    sm: 1.25,
+    md: 1.5,
+    lg: 1.75,
+    xl: 2,
+  },
+} as const;

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './ui.types';

package/src/types/ui.types.ts

@@ -0,0 +1,26 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+
+import type { ComplexStyleRule } from '@vanilla-extract/css';
+import type { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+
+import type { SprinklesProps } from '#styles';
+
+type VariantGroups = Record<string, Record<string, ComplexStyleRule | string>>;
+
+export type RecipeVariantsProps<
+  V extends RuntimeFn<VariantGroups> | undefined,
+> = NonNullable<
+  V extends RuntimeFn<VariantGroups> ? RecipeVariants<V> : object
+>;
+
+/**
+ * @template T element type
+ * @template V typeof vanilla-extract recipe
+ */
+export type UIComponent<
+  T extends ElementType,
+  V extends RuntimeFn<VariantGroups> | undefined = undefined,
+> = Omit<ComponentPropsWithRef<T>, keyof RecipeVariantsProps<V>> &
+  RecipeVariantsProps<V> & {
+    sx?: SprinklesProps;
+  };

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './sprinklesUtils';