@bestow-ui/tokens 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.cjs +13 -4
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +9 -1
  4. package/dist/index.d.ts +9 -1
  5. package/dist/index.js +11 -3
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -30,7 +30,8 @@ __export(index_exports, {
30
30
  palette: () => palette,
31
31
  radius: () => radius,
32
32
  shadow: () => shadow,
33
- space: () => space
33
+ space: () => space,
34
+ zIndex: () => zIndex
34
35
  });
35
36
  module.exports = __toCommonJS(index_exports);
36
37
  var palette = {
@@ -142,8 +143,15 @@ var duration = {
142
143
  normal: "200ms",
143
144
  slow: "320ms"
144
145
  };
146
+ var zIndex = {
147
+ dropdown: "1000",
148
+ overlay: "1300",
149
+ modal: "1310",
150
+ toast: "1400",
151
+ tooltip: "1500"
152
+ };
145
153
  var lightColors = {
146
- bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900] },
154
+ bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: "rgba(0, 0, 0, 0.45)" },
147
155
  fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },
148
156
  border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },
149
157
  primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },
@@ -152,7 +160,7 @@ var lightColors = {
152
160
  success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] }
153
161
  };
154
162
  var darkColors = {
155
- bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50] },
163
+ bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: "rgba(0, 0, 0, 0.65)" },
156
164
  fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },
157
165
  border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },
158
166
  primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: "rgba(59, 111, 246, 0.16)", subtleHover: "rgba(59, 111, 246, 0.26)", text: palette.blue[300] },
@@ -172,6 +180,7 @@ var darkColors = {
172
180
  palette,
173
181
  radius,
174
182
  shadow,
175
- space
183
+ space,
184
+ zIndex
176
185
  });
177
186
  //# sourceMappingURL=index.cjs.map
package/dist/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * BestOW UI 디자인 토큰.\n * 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.\n */\n\nexport const palette = {\n white: '#ffffff',\n black: '#000000',\n gray: {\n 50: '#f8f9fa',\n 100: '#f1f3f5',\n 200: '#e9ecef',\n 300: '#dee2e6',\n 400: '#ced4da',\n 500: '#adb5bd',\n 600: '#868e96',\n 700: '#495057',\n 800: '#343a40',\n 900: '#212529',\n 950: '#16181b',\n },\n blue: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 200: '#bfd3fe',\n 300: '#93b4fd',\n 400: '#6090fa',\n 500: '#3b6ff6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 800: '#1e37af',\n 900: '#1e338a',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n green: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n} as const;\n\nexport const space = {\n 0: '0',\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport const radius = {\n none: '0',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n} as const;\n\nexport const fontFamily = {\n sans: '\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n} as const;\n\nexport const fontSize = {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n '2xl': '24px',\n '3xl': '30px',\n '4xl': '36px',\n} as const;\n\nexport const fontWeight = {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport const lineHeight = {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n} as const;\n\nexport const shadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.06)',\n md: '0 4px 12px rgba(0, 0, 0, 0.08)',\n lg: '0 12px 32px rgba(0, 0, 0, 0.12)',\n} as const;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\n/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */\n/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */\nexport interface SemanticColors {\n bg: { default: string; subtle: string; muted: string; inverse: string };\n fg: { default: string; muted: string; subtle: string; inverse: string };\n border: { default: string; strong: string; focus: string };\n primary: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n neutral: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n danger: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n success: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900] },\n fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },\n border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },\n neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },\n danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },\n success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] },\n};\n\nexport const darkColors: SemanticColors = {\n bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50] },\n fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },\n border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: 'rgba(59, 111, 246, 0.16)', subtleHover: 'rgba(59, 111, 246, 0.26)', text: palette.blue[300] },\n neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: 'rgba(255, 255, 255, 0.08)', subtleHover: 'rgba(255, 255, 255, 0.14)', text: palette.gray[100] },\n danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: 'rgba(239, 68, 68, 0.16)', subtleHover: 'rgba(239, 68, 68, 0.26)', text: palette.red[300] },\n success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: 'rgba(34, 197, 94, 0.16)', subtleHover: 'rgba(34, 197, 94, 0.26)', text: palette.green[300] },\n};\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * BestOW UI 디자인 토큰.\n * 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.\n */\n\nexport const palette = {\n white: '#ffffff',\n black: '#000000',\n gray: {\n 50: '#f8f9fa',\n 100: '#f1f3f5',\n 200: '#e9ecef',\n 300: '#dee2e6',\n 400: '#ced4da',\n 500: '#adb5bd',\n 600: '#868e96',\n 700: '#495057',\n 800: '#343a40',\n 900: '#212529',\n 950: '#16181b',\n },\n blue: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 200: '#bfd3fe',\n 300: '#93b4fd',\n 400: '#6090fa',\n 500: '#3b6ff6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 800: '#1e37af',\n 900: '#1e338a',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n green: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n} as const;\n\nexport const space = {\n 0: '0',\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport const radius = {\n none: '0',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n} as const;\n\nexport const fontFamily = {\n sans: '\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n} as const;\n\nexport const fontSize = {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n '2xl': '24px',\n '3xl': '30px',\n '4xl': '36px',\n} as const;\n\nexport const fontWeight = {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport const lineHeight = {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n} as const;\n\nexport const shadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.06)',\n md: '0 4px 12px rgba(0, 0, 0, 0.08)',\n lg: '0 12px 32px rgba(0, 0, 0, 0.12)',\n} as const;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\nexport const zIndex = {\n dropdown: '1000',\n overlay: '1300',\n modal: '1310',\n toast: '1400',\n tooltip: '1500',\n} as const;\n\n/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */\n/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */\nexport interface SemanticColors {\n bg: { default: string; subtle: string; muted: string; inverse: string; overlay: string };\n fg: { default: string; muted: string; subtle: string; inverse: string };\n border: { default: string; strong: string; focus: string };\n primary: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n neutral: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n danger: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n success: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: 'rgba(0, 0, 0, 0.45)' },\n fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },\n border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },\n neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },\n danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },\n success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] },\n};\n\nexport const darkColors: SemanticColors = {\n bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: 'rgba(0, 0, 0, 0.65)' },\n fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },\n border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: 'rgba(59, 111, 246, 0.16)', subtleHover: 'rgba(59, 111, 246, 0.26)', text: palette.blue[300] },\n neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: 'rgba(255, 255, 255, 0.08)', subtleHover: 'rgba(255, 255, 255, 0.14)', text: palette.gray[100] },\n danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: 'rgba(239, 68, 68, 0.16)', subtleHover: 'rgba(239, 68, 68, 0.26)', text: palette.red[300] },\n success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: 'rgba(34, 197, 94, 0.16)', subtleHover: 'rgba(34, 197, 94, 0.26)', text: palette.green[300] },\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKO,IAAM,UAAU;AAAA,EACrB,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,KAAK;AAAA,IACH,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AACF;AAEO,IAAM,QAAQ;AAAA,EACnB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,MAAM;AACR;AAEO,IAAM,WAAW;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEO,IAAM,aAAa;AAAA,EACxB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEO,IAAM,aAAa;AAAA,EACxB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,IAAM,SAAS;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,WAAW;AAAA,EACtB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR;AAEO,IAAM,SAAS;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AACX;AAcO,IAAM,cAA8B;AAAA,EACzC,IAAI,EAAE,SAAS,QAAQ,OAAO,QAAQ,QAAQ,KAAK,EAAE,GAAG,OAAO,QAAQ,KAAK,GAAG,GAAG,SAAS,QAAQ,KAAK,GAAG,GAAG,SAAS,sBAAsB;AAAA,EAC7I,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,GAAG,OAAO,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,SAAS,QAAQ,MAAM;AAAA,EAC9G,QAAQ,EAAE,SAAS,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,OAAO,QAAQ,KAAK,GAAG,EAAE;AAAA,EAC1F,SAAS,EAAE,OAAO,QAAQ,KAAK,GAAG,GAAG,YAAY,QAAQ,KAAK,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,QAAQ,KAAK,EAAE,GAAG,aAAa,QAAQ,KAAK,GAAG,GAAG,MAAM,QAAQ,KAAK,GAAG,EAAE;AAAA,EAC/K,SAAS,EAAE,OAAO,QAAQ,KAAK,GAAG,GAAG,YAAY,QAAQ,KAAK,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,QAAQ,KAAK,GAAG,GAAG,aAAa,QAAQ,KAAK,GAAG,GAAG,MAAM,QAAQ,KAAK,GAAG,EAAE;AAAA,EAChL,QAAQ,EAAE,OAAO,QAAQ,IAAI,GAAG,GAAG,YAAY,QAAQ,IAAI,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,QAAQ,IAAI,EAAE,GAAG,aAAa,QAAQ,IAAI,GAAG,GAAG,MAAM,QAAQ,IAAI,GAAG,EAAE;AAAA,EACzK,SAAS,EAAE,OAAO,QAAQ,MAAM,GAAG,GAAG,YAAY,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,QAAQ,MAAM,EAAE,GAAG,aAAa,QAAQ,MAAM,GAAG,GAAG,MAAM,QAAQ,MAAM,GAAG,EAAE;AACtL;AAEO,IAAM,aAA6B;AAAA,EACxC,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,OAAO,QAAQ,KAAK,GAAG,GAAG,SAAS,QAAQ,KAAK,EAAE,GAAG,SAAS,sBAAsB;AAAA,EACjJ,IAAI,EAAE,SAAS,QAAQ,KAAK,EAAE,GAAG,OAAO,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,SAAS,QAAQ,KAAK,GAAG,EAAE;AAAA,EACjH,QAAQ,EAAE,SAAS,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,OAAO,QAAQ,KAAK,GAAG,EAAE;AAAA,EAC1F,SAAS,EAAE,OAAO,QAAQ,KAAK,GAAG,GAAG,YAAY,QAAQ,KAAK,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,4BAA4B,aAAa,4BAA4B,MAAM,QAAQ,KAAK,GAAG,EAAE;AAAA,EAClM,SAAS,EAAE,OAAO,QAAQ,KAAK,GAAG,GAAG,YAAY,QAAQ,KAAK,GAAG,GAAG,UAAU,QAAQ,KAAK,GAAG,GAAG,QAAQ,6BAA6B,aAAa,6BAA6B,MAAM,QAAQ,KAAK,GAAG,EAAE;AAAA,EACxM,QAAQ,EAAE,OAAO,QAAQ,IAAI,GAAG,GAAG,YAAY,QAAQ,IAAI,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,2BAA2B,aAAa,2BAA2B,MAAM,QAAQ,IAAI,GAAG,EAAE;AAAA,EAC5L,SAAS,EAAE,OAAO,QAAQ,MAAM,GAAG,GAAG,YAAY,QAAQ,MAAM,GAAG,GAAG,UAAU,QAAQ,OAAO,QAAQ,2BAA2B,aAAa,2BAA2B,MAAM,QAAQ,MAAM,GAAG,EAAE;AACrM;","names":[]}
package/dist/index.d.cts CHANGED
@@ -111,6 +111,13 @@ declare const duration: {
111
111
  readonly normal: "200ms";
112
112
  readonly slow: "320ms";
113
113
  };
114
+ declare const zIndex: {
115
+ readonly dropdown: "1000";
116
+ readonly overlay: "1300";
117
+ readonly modal: "1310";
118
+ readonly toast: "1400";
119
+ readonly tooltip: "1500";
120
+ };
114
121
  /** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
115
122
  /** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
116
123
  interface SemanticColors {
@@ -119,6 +126,7 @@ interface SemanticColors {
119
126
  subtle: string;
120
127
  muted: string;
121
128
  inverse: string;
129
+ overlay: string;
122
130
  };
123
131
  fg: {
124
132
  default: string;
@@ -167,4 +175,4 @@ interface SemanticColors {
167
175
  declare const lightColors: SemanticColors;
168
176
  declare const darkColors: SemanticColors;
169
177
 
170
- export { type SemanticColors, darkColors, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space };
178
+ export { type SemanticColors, darkColors, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
package/dist/index.d.ts CHANGED
@@ -111,6 +111,13 @@ declare const duration: {
111
111
  readonly normal: "200ms";
112
112
  readonly slow: "320ms";
113
113
  };
114
+ declare const zIndex: {
115
+ readonly dropdown: "1000";
116
+ readonly overlay: "1300";
117
+ readonly modal: "1310";
118
+ readonly toast: "1400";
119
+ readonly tooltip: "1500";
120
+ };
114
121
  /** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
115
122
  /** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
116
123
  interface SemanticColors {
@@ -119,6 +126,7 @@ interface SemanticColors {
119
126
  subtle: string;
120
127
  muted: string;
121
128
  inverse: string;
129
+ overlay: string;
122
130
  };
123
131
  fg: {
124
132
  default: string;
@@ -167,4 +175,4 @@ interface SemanticColors {
167
175
  declare const lightColors: SemanticColors;
168
176
  declare const darkColors: SemanticColors;
169
177
 
170
- export { type SemanticColors, darkColors, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space };
178
+ export { type SemanticColors, darkColors, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
package/dist/index.js CHANGED
@@ -108,8 +108,15 @@ var duration = {
108
108
  normal: "200ms",
109
109
  slow: "320ms"
110
110
  };
111
+ var zIndex = {
112
+ dropdown: "1000",
113
+ overlay: "1300",
114
+ modal: "1310",
115
+ toast: "1400",
116
+ tooltip: "1500"
117
+ };
111
118
  var lightColors = {
112
- bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900] },
119
+ bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: "rgba(0, 0, 0, 0.45)" },
113
120
  fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },
114
121
  border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },
115
122
  primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },
@@ -118,7 +125,7 @@ var lightColors = {
118
125
  success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] }
119
126
  };
120
127
  var darkColors = {
121
- bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50] },
128
+ bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: "rgba(0, 0, 0, 0.65)" },
122
129
  fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },
123
130
  border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },
124
131
  primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: "rgba(59, 111, 246, 0.16)", subtleHover: "rgba(59, 111, 246, 0.26)", text: palette.blue[300] },
@@ -137,6 +144,7 @@ export {
137
144
  palette,
138
145
  radius,
139
146
  shadow,
140
- space
147
+ space,
148
+ zIndex
141
149
  };
142
150
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * BestOW UI 디자인 토큰.\n * 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.\n */\n\nexport const palette = {\n white: '#ffffff',\n black: '#000000',\n gray: {\n 50: '#f8f9fa',\n 100: '#f1f3f5',\n 200: '#e9ecef',\n 300: '#dee2e6',\n 400: '#ced4da',\n 500: '#adb5bd',\n 600: '#868e96',\n 700: '#495057',\n 800: '#343a40',\n 900: '#212529',\n 950: '#16181b',\n },\n blue: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 200: '#bfd3fe',\n 300: '#93b4fd',\n 400: '#6090fa',\n 500: '#3b6ff6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 800: '#1e37af',\n 900: '#1e338a',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n green: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n} as const;\n\nexport const space = {\n 0: '0',\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport const radius = {\n none: '0',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n} as const;\n\nexport const fontFamily = {\n sans: '\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n} as const;\n\nexport const fontSize = {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n '2xl': '24px',\n '3xl': '30px',\n '4xl': '36px',\n} as const;\n\nexport const fontWeight = {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport const lineHeight = {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n} as const;\n\nexport const shadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.06)',\n md: '0 4px 12px rgba(0, 0, 0, 0.08)',\n lg: '0 12px 32px rgba(0, 0, 0, 0.12)',\n} as const;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\n/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */\n/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */\nexport interface SemanticColors {\n bg: { default: string; subtle: string; muted: string; inverse: string };\n fg: { default: string; muted: string; subtle: string; inverse: string };\n border: { default: string; strong: string; focus: string };\n primary: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n neutral: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n danger: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n success: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900] },\n fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },\n border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },\n neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },\n danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },\n success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] },\n};\n\nexport const darkColors: SemanticColors = {\n bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50] },\n fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },\n border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: 'rgba(59, 111, 246, 0.16)', subtleHover: 'rgba(59, 111, 246, 0.26)', text: palette.blue[300] },\n neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: 'rgba(255, 255, 255, 0.08)', subtleHover: 'rgba(255, 255, 255, 0.14)', text: palette.gray[100] },\n danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: 'rgba(239, 68, 68, 0.16)', subtleHover: 'rgba(239, 68, 68, 0.26)', text: palette.red[300] },\n success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: 'rgba(34, 197, 94, 0.16)', subtleHover: 'rgba(34, 197, 94, 0.26)', text: palette.green[300] },\n};\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * BestOW UI 디자인 토큰.\n * 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.\n */\n\nexport const palette = {\n white: '#ffffff',\n black: '#000000',\n gray: {\n 50: '#f8f9fa',\n 100: '#f1f3f5',\n 200: '#e9ecef',\n 300: '#dee2e6',\n 400: '#ced4da',\n 500: '#adb5bd',\n 600: '#868e96',\n 700: '#495057',\n 800: '#343a40',\n 900: '#212529',\n 950: '#16181b',\n },\n blue: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 200: '#bfd3fe',\n 300: '#93b4fd',\n 400: '#6090fa',\n 500: '#3b6ff6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 800: '#1e37af',\n 900: '#1e338a',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n green: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n} as const;\n\nexport const space = {\n 0: '0',\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport const radius = {\n none: '0',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n} as const;\n\nexport const fontFamily = {\n sans: '\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n} as const;\n\nexport const fontSize = {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n '2xl': '24px',\n '3xl': '30px',\n '4xl': '36px',\n} as const;\n\nexport const fontWeight = {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport const lineHeight = {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n} as const;\n\nexport const shadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.06)',\n md: '0 4px 12px rgba(0, 0, 0, 0.08)',\n lg: '0 12px 32px rgba(0, 0, 0, 0.12)',\n} as const;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\nexport const zIndex = {\n dropdown: '1000',\n overlay: '1300',\n modal: '1310',\n toast: '1400',\n tooltip: '1500',\n} as const;\n\n/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */\n/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */\nexport interface SemanticColors {\n bg: { default: string; subtle: string; muted: string; inverse: string; overlay: string };\n fg: { default: string; muted: string; subtle: string; inverse: string };\n border: { default: string; strong: string; focus: string };\n primary: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n neutral: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n danger: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n success: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: 'rgba(0, 0, 0, 0.45)' },\n fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },\n border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },\n neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },\n danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },\n success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] },\n};\n\nexport const darkColors: SemanticColors = {\n bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: 'rgba(0, 0, 0, 0.65)' },\n fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },\n border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: 'rgba(59, 111, 246, 0.16)', subtleHover: 'rgba(59, 111, 246, 0.26)', text: palette.blue[300] },\n neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: 'rgba(255, 255, 255, 0.08)', subtleHover: 'rgba(255, 255, 255, 0.14)', text: palette.gray[100] },\n danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: 'rgba(239, 68, 68, 0.16)', subtleHover: 'rgba(239, 68, 68, 0.26)', text: palette.red[300] },\n success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: 'rgba(34, 197, 94, 0.16)', subtleHover: 'rgba(34, 197, 94, 0.26)', text: palette.green[300] },\n};\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bestow-ui/tokens",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "BestOW UI design tokens",
5
5
  "license": "MIT",
6
6
  "repository": {