@bestow-ui/tokens 1.0.0 → 1.7.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 (8) hide show
  1. package/README.md +18 -33
  2. package/dist/index.cjs +26 -1
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +28 -4
  5. package/dist/index.d.ts +28 -4
  6. package/dist/index.js +25 -1
  7. package/dist/index.js.map +1 -1
  8. package/package.json +9 -6
package/README.md CHANGED
@@ -3,20 +3,20 @@
3
3
  [![npm](https://img.shields.io/npm/v/@bestow-ui/tokens)](https://www.npmjs.com/package/@bestow-ui/tokens)
4
4
  [![license](https://img.shields.io/npm/l/@bestow-ui/tokens)](https://github.com/Dev-BestOW/BestOW-UI/blob/main/LICENSE)
5
5
 
6
- Design tokens for **BestOW UI** — colors, spacing, radius, typography, shadow, duration and z-index as plain JavaScript values.
7
- No dependencies, framework-agnostic.
6
+ **BestOW UI** 의 디자인 토큰이에요. 색상·간격·모서리·글자·그림자·시간·쌓임 순서를 순수 JavaScript 값으로 제공해요.
7
+ 의존성이 없어서 어떤 프레임워크에서도 쓸 수 있어요.
8
8
 
9
- 📖 **See every token:** [Storybook › Foundations › Design Tokens](https://dev-bestow.github.io/BestOW-UI/?path=/story/foundations-design-tokens--colors)
9
+ > Design tokens for BestOW UI, a React design system for Korean services. Docs are in Korean.
10
10
 
11
- > 🇰🇷 한국어 안내는 [아래](#한국어)에 있어요.
11
+ 📖 **전체 토큰 보기:** [Storybook › Foundations › Design Tokens](https://dev-bestow.github.io/BestOW-UI/?path=/story/foundations-design-tokens--colors)
12
12
 
13
- ## Install
13
+ ## 설치
14
14
 
15
15
  ```bash
16
16
  npm install @bestow-ui/tokens
17
17
  ```
18
18
 
19
- ## Usage
19
+ ## 사용하기
20
20
 
21
21
  ```ts
22
22
  import { palette, space, radius, fontSize, lightColors, darkColors } from '@bestow-ui/tokens';
@@ -27,41 +27,26 @@ lightColors.primary.solid; // '#2554eb'
27
27
  darkColors.fg.default; // '#f8f9fa'
28
28
  ```
29
29
 
30
- | Export | Contents |
30
+ | export | 내용 |
31
31
  |---|---|
32
- | `palette` | Raw color scales (`gray`, `blue`, `red`, `green`, `amber`, `white`, `black`) |
33
- | `lightColors`, `darkColors` | Semantic colors (`bg`, `fg`, `border`, `primary`, `neutral`, `danger`, `success`, `warning`) — same keys in both modes |
34
- | `space` | `0`–`16` (4px grid) |
32
+ | `palette` | 원시 색 단계 (`gray`, `blue`, `red`, `green`, `amber`, `white`, `black`) |
33
+ | `lightColors`, `darkColors` | 의미 색 (`bg`, `fg`, `border`, `primary`, `neutral`, `danger`, `success`, `warning`, `info`) — 두 모드의 키가 같아요. `info` 는 일반 안내용 파랑(브랜드 색과 따로) |
34
+ | `space` | `0`–`16` (4px 단위) |
35
35
  | `radius` | `none`, `sm`, `md`, `lg`, `xl`, `full` |
36
- | `fontFamily`, `fontSize`, `fontWeight`, `lineHeight` | Typography |
37
- | `shadow`, `darkShadow` | Elevation for light / dark mode (same keys) |
38
- | `duration`, `zIndex` | Motion and stacking order |
36
+ | `fontFamily`, `fontSize`, `fontWeight`, `lineHeight` | 글자 |
37
+ | `shadow`, `darkShadow` | 라이트·다크 그림자 (키가 같아요) |
38
+ | `breakpoint` | 반응형 구간 시작 폭 `sm` 640 · `md` 768 · `lg` 1024 · `xl` 1280 (px, min-width) |
39
+ | `duration`, `zIndex` | 움직임 시간과 쌓임 순서 (배경막 < 대화상자 < 목록 < 토스트 < 툴팁) |
39
40
 
40
- ### Using with React
41
+ ### React 와 함께
41
42
 
42
- If you use [`@bestow-ui/react`](https://www.npmjs.com/package/@bestow-ui/react), reference tokens through its theme instead of raw values,
43
- so dark mode and brand themes apply automatically:
43
+ [`@bestow-ui/react`](https://www.npmjs.com/package/@bestow-ui/react) 를 쓴다면 원시 값 대신 테마의 `vars`(CSS 변수)로 참조하세요.
44
+ 그래야 다크 모드와 브랜드 테마가 자동으로 적용돼요. 글자 크기는 react 테마에서 rem 으로 바뀌어 사용자의 기본 글꼴 크기 설정을 따라요.
44
45
 
45
46
  ```ts
46
47
  import { vars } from '@bestow-ui/react'; // vars.color.primary.solid → var(--bestow-color-primary-solid)
47
48
  ```
48
49
 
49
- ## License
50
+ ## 라이선스
50
51
 
51
52
  [MIT](https://github.com/Dev-BestOW/BestOW-UI/blob/main/LICENSE) © Dev-BestOW
52
-
53
- ---
54
-
55
- ## 한국어
56
-
57
- **BestOW UI** 의 디자인 토큰이에요. 색상·간격·모서리·타이포그래피·그림자·시간·z-index 를 순수 JavaScript 값으로 제공해요. 의존성이 없어서 어떤 프레임워크에서도 쓸 수 있어요.
58
-
59
- ```ts
60
- import { space, lightColors } from '@bestow-ui/tokens';
61
-
62
- space[4]; // '16px'
63
- lightColors.primary.solid; // '#2554eb'
64
- ```
65
-
66
- `@bestow-ui/react` 를 쓴다면 원시 값 대신 `vars`(CSS 변수)로 참조해야 다크 모드·브랜드 테마가 적용돼요.
67
- 전체 토큰은 [Storybook 디자인 토큰 페이지](https://dev-bestow.github.io/BestOW-UI/?path=/story/foundations-design-tokens--colors) 에서 볼 수 있어요.
package/dist/index.cjs CHANGED
@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/index.ts
21
21
  var index_exports = {};
22
22
  __export(index_exports, {
23
+ breakpoint: () => breakpoint,
23
24
  darkColors: () => darkColors,
24
25
  darkShadow: () => darkShadow,
25
26
  duration: () => duration,
@@ -163,12 +164,18 @@ var duration = {
163
164
  slow: "320ms"
164
165
  };
165
166
  var zIndex = {
166
- dropdown: "1000",
167
167
  overlay: "1300",
168
168
  modal: "1310",
169
+ dropdown: "1320",
169
170
  toast: "1400",
170
171
  tooltip: "1500"
171
172
  };
173
+ var breakpoint = {
174
+ sm: "640px",
175
+ md: "768px",
176
+ lg: "1024px",
177
+ xl: "1280px"
178
+ };
172
179
  var lightColors = {
173
180
  bg: {
174
181
  default: palette.white,
@@ -219,6 +226,15 @@ var lightColors = {
219
226
  subtle: palette.amber[50],
220
227
  subtleHover: palette.amber[100],
221
228
  text: palette.amber[800]
229
+ },
230
+ // 기본 primary 와 같은 파랑 — 브랜드 색을 바꿔도 안내는 파랑으로 남는다
231
+ info: {
232
+ solid: palette.blue[600],
233
+ solidHover: palette.blue[700],
234
+ contrast: palette.white,
235
+ subtle: palette.blue[50],
236
+ subtleHover: palette.blue[100],
237
+ text: palette.blue[700]
222
238
  }
223
239
  };
224
240
  var darkColors = {
@@ -271,10 +287,19 @@ var darkColors = {
271
287
  subtle: "rgba(245, 158, 11, 0.16)",
272
288
  subtleHover: "rgba(245, 158, 11, 0.26)",
273
289
  text: palette.amber[300]
290
+ },
291
+ info: {
292
+ solid: palette.blue[600],
293
+ solidHover: palette.blue[700],
294
+ contrast: palette.white,
295
+ subtle: "rgba(59, 111, 246, 0.16)",
296
+ subtleHover: "rgba(59, 111, 246, 0.26)",
297
+ text: palette.blue[300]
274
298
  }
275
299
  };
276
300
  // Annotate the CommonJS export names for ESM import in node:
277
301
  0 && (module.exports = {
302
+ breakpoint,
278
303
  darkColors,
279
304
  darkShadow,
280
305
  duration,
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: '#666e76', // 흰색·gray50·gray100 배경에서 4.5:1 이상 (fg.subtle 로 쓰인다)\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 amber: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b',\n 600: '#d97706',\n 700: '#b45309',\n 800: '#92400e',\n 900: '#78350f',\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\n/** 라이트 모드 그림자. 다크 모드는 darkShadow 를 쓴다 (같은 키). */\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\n/**\n * 다크 모드 그림자. 어두운 배경에서는 옅은 그림자가 보이지 않으므로 더 진하게 하고,\n * 떠 있는 면(md·lg)은 가장자리를 구분하는 옅은 밝은 테두리(ring)를 함께 둔다.\n */\nexport const darkShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.5)',\n md: '0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5)',\n lg: '0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.6)',\n} as const satisfies Record<keyof typeof shadow, string>;\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 warning: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: {\n default: palette.white,\n subtle: palette.gray[50],\n muted: palette.gray[100],\n inverse: palette.gray[900],\n overlay: 'rgba(0, 0, 0, 0.45)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: palette.blue[50],\n subtleHover: palette.blue[100],\n text: palette.blue[700],\n },\n neutral: {\n solid: palette.gray[800],\n solidHover: palette.gray[900],\n contrast: palette.white,\n subtle: palette.gray[100],\n subtleHover: palette.gray[200],\n text: palette.gray[800],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: palette.red[50],\n subtleHover: palette.red[100],\n text: palette.red[700],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: palette.green[50],\n subtleHover: palette.green[100],\n text: palette.green[700],\n },\n // 노란색은 밝아서 solid 위 글자는 흰색이 아닌 어두운 색이다\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[600],\n contrast: palette.gray[900],\n subtle: palette.amber[50],\n subtleHover: palette.amber[100],\n text: palette.amber[800],\n },\n};\n\nexport const darkColors: SemanticColors = {\n bg: {\n default: palette.gray[950],\n subtle: palette.gray[900],\n muted: palette.gray[800],\n inverse: palette.gray[50],\n overlay: 'rgba(0, 0, 0, 0.65)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700], // 흰 글자 대비 유지를 위해 다크에서도 hover 는 어둡게 (blue500 은 4.38)\n contrast: palette.white,\n subtle: 'rgba(59, 111, 246, 0.16)',\n subtleHover: 'rgba(59, 111, 246, 0.26)',\n text: palette.blue[300],\n },\n neutral: {\n solid: palette.gray[200],\n solidHover: palette.gray[100],\n contrast: palette.gray[900],\n subtle: 'rgba(255, 255, 255, 0.08)',\n subtleHover: 'rgba(255, 255, 255, 0.14)',\n text: palette.gray[100],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: 'rgba(239, 68, 68, 0.16)',\n subtleHover: 'rgba(239, 68, 68, 0.26)',\n text: palette.red[300],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: 'rgba(34, 197, 94, 0.16)',\n subtleHover: 'rgba(34, 197, 94, 0.26)',\n text: palette.green[300],\n },\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[400],\n contrast: palette.gray[900],\n subtle: 'rgba(245, 158, 11, 0.16)',\n subtleHover: 'rgba(245, 158, 11, 0.26)',\n text: palette.amber[300],\n },\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: '#666e76', // 흰색·gray50·gray100 배경에서 4.5:1 이상 (fg.subtle 로 쓰인다)\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 amber: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b',\n 600: '#d97706',\n 700: '#b45309',\n 800: '#92400e',\n 900: '#78350f',\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\n/** 라이트 모드 그림자. 다크 모드는 darkShadow 를 쓴다 (같은 키). */\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\n/**\n * 다크 모드 그림자. 어두운 배경에서는 옅은 그림자가 보이지 않으므로 더 진하게 하고,\n * 떠 있는 면(md·lg)은 가장자리를 구분하는 옅은 밝은 테두리(ring)를 함께 둔다.\n */\nexport const darkShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.5)',\n md: '0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5)',\n lg: '0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.6)',\n} as const satisfies Record<keyof typeof shadow, string>;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\n/**\n * 쌓임 순서. dropdown(Select·Combobox·DropdownMenu·Popover 목록)은 modal 보다 위 — 대화상자 안에서 연 목록이 배경막에 가리지 않게.\n * 대화상자가 열려 있으면 바깥 페이지의 목록은 열 수 없으므로(포커스가 갇힘) 이 순서로 충돌하지 않는다.\n * (1.x 초기에는 dropdown 1000 이라 Modal 안의 Select 목록이 배경막 아래에 그려졌다 — 파일럿 화면에서 발견)\n */\nexport const zIndex = {\n overlay: '1300',\n modal: '1310',\n dropdown: '1320',\n toast: '1400',\n tooltip: '1500',\n} as const;\n\n/**\n * 반응형 구간의 시작 폭(min-width). 화면이 이 폭 이상이면 그 구간이다(모바일 우선 — 기본 값은 가장 좁은 화면).\n * CSS 변수로는 미디어쿼리를 쓸 수 없어 테마(vars)에 넣지 않는다. @bestow-ui/react 의 `media` 는 같은 값을 em 으로 바꾼\n * 미디어쿼리 문자열이다(브라우저 기본 글꼴 크기를 키우면 구간도 따라 바뀐다).\n */\nexport const breakpoint = {\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\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 warning: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n /**\n * 일반 안내(공지·도움말 Alert·Badge·Toast). 브랜드 색(primary)을 바꿔도 파랑으로 남는다.\n * 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게. lightColors·darkColors 에는 항상 있다.\n */\n info?: SemanticColors['primary'];\n}\n\n/** lightColors·darkColors 의 타입 — 선택 키(info)까지 모두 있다 */\nexport type DefaultSemanticColors = SemanticColors & Required<Pick<SemanticColors, 'info'>>;\n\nexport const lightColors: DefaultSemanticColors = {\n bg: {\n default: palette.white,\n subtle: palette.gray[50],\n muted: palette.gray[100],\n inverse: palette.gray[900],\n overlay: 'rgba(0, 0, 0, 0.45)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: palette.blue[50],\n subtleHover: palette.blue[100],\n text: palette.blue[700],\n },\n neutral: {\n solid: palette.gray[800],\n solidHover: palette.gray[900],\n contrast: palette.white,\n subtle: palette.gray[100],\n subtleHover: palette.gray[200],\n text: palette.gray[800],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: palette.red[50],\n subtleHover: palette.red[100],\n text: palette.red[700],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: palette.green[50],\n subtleHover: palette.green[100],\n text: palette.green[700],\n },\n // 노란색은 밝아서 solid 위 글자는 흰색이 아닌 어두운 색이다\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[600],\n contrast: palette.gray[900],\n subtle: palette.amber[50],\n subtleHover: palette.amber[100],\n text: palette.amber[800],\n },\n // 기본 primary 와 같은 파랑 — 브랜드 색을 바꿔도 안내는 파랑으로 남는다\n info: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: palette.blue[50],\n subtleHover: palette.blue[100],\n text: palette.blue[700],\n },\n};\n\nexport const darkColors: DefaultSemanticColors = {\n bg: {\n default: palette.gray[950],\n subtle: palette.gray[900],\n muted: palette.gray[800],\n inverse: palette.gray[50],\n overlay: 'rgba(0, 0, 0, 0.65)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700], // 흰 글자 대비 유지를 위해 다크에서도 hover 는 어둡게 (blue500 은 4.38)\n contrast: palette.white,\n subtle: 'rgba(59, 111, 246, 0.16)',\n subtleHover: 'rgba(59, 111, 246, 0.26)',\n text: palette.blue[300],\n },\n neutral: {\n solid: palette.gray[200],\n solidHover: palette.gray[100],\n contrast: palette.gray[900],\n subtle: 'rgba(255, 255, 255, 0.08)',\n subtleHover: 'rgba(255, 255, 255, 0.14)',\n text: palette.gray[100],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: 'rgba(239, 68, 68, 0.16)',\n subtleHover: 'rgba(239, 68, 68, 0.26)',\n text: palette.red[300],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: 'rgba(34, 197, 94, 0.16)',\n subtleHover: 'rgba(34, 197, 94, 0.26)',\n text: palette.green[300],\n },\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[400],\n contrast: palette.gray[900],\n subtle: 'rgba(245, 158, 11, 0.16)',\n subtleHover: 'rgba(245, 158, 11, 0.26)',\n text: palette.amber[300],\n },\n info: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: 'rgba(59, 111, 246, 0.16)',\n subtleHover: 'rgba(59, 111, 246, 0.26)',\n text: palette.blue[300],\n },\n};\n"],"mappings":"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","names":[]}
package/dist/index.d.cts CHANGED
@@ -133,13 +133,29 @@ declare const duration: {
133
133
  readonly normal: "200ms";
134
134
  readonly slow: "320ms";
135
135
  };
136
+ /**
137
+ * 쌓임 순서. dropdown(Select·Combobox·DropdownMenu·Popover 목록)은 modal 보다 위 — 대화상자 안에서 연 목록이 배경막에 가리지 않게.
138
+ * 대화상자가 열려 있으면 바깥 페이지의 목록은 열 수 없으므로(포커스가 갇힘) 이 순서로 충돌하지 않는다.
139
+ * (1.x 초기에는 dropdown 1000 이라 Modal 안의 Select 목록이 배경막 아래에 그려졌다 — 파일럿 화면에서 발견)
140
+ */
136
141
  declare const zIndex: {
137
- readonly dropdown: "1000";
138
142
  readonly overlay: "1300";
139
143
  readonly modal: "1310";
144
+ readonly dropdown: "1320";
140
145
  readonly toast: "1400";
141
146
  readonly tooltip: "1500";
142
147
  };
148
+ /**
149
+ * 반응형 구간의 시작 폭(min-width). 화면이 이 폭 이상이면 그 구간이다(모바일 우선 — 기본 값은 가장 좁은 화면).
150
+ * CSS 변수로는 미디어쿼리를 쓸 수 없어 테마(vars)에 넣지 않는다. @bestow-ui/react 의 `media` 는 같은 값을 em 으로 바꾼
151
+ * 미디어쿼리 문자열이다(브라우저 기본 글꼴 크기를 키우면 구간도 따라 바뀐다).
152
+ */
153
+ declare const breakpoint: {
154
+ readonly sm: "640px";
155
+ readonly md: "768px";
156
+ readonly lg: "1024px";
157
+ readonly xl: "1280px";
158
+ };
143
159
  /** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
144
160
  /** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
145
161
  interface SemanticColors {
@@ -201,8 +217,16 @@ interface SemanticColors {
201
217
  subtleHover: string;
202
218
  text: string;
203
219
  };
220
+ /**
221
+ * 일반 안내(공지·도움말 Alert·Badge·Toast). 브랜드 색(primary)을 바꿔도 파랑으로 남는다.
222
+ * 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게. lightColors·darkColors 에는 항상 있다.
223
+ */
224
+ info?: SemanticColors['primary'];
204
225
  }
205
- declare const lightColors: SemanticColors;
206
- declare const darkColors: SemanticColors;
226
+ /** lightColors·darkColors 의 타입 — 선택 키(info)까지 모두 있다 */
227
+ type DefaultSemanticColors = SemanticColors & Required<Pick<SemanticColors, 'info'>>;
228
+ declare const lightColors: DefaultSemanticColors;
229
+ declare const darkColors: DefaultSemanticColors;
207
230
 
208
- export { type SemanticColors, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
231
+ export { breakpoint, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
232
+ export type { DefaultSemanticColors, SemanticColors };
package/dist/index.d.ts CHANGED
@@ -133,13 +133,29 @@ declare const duration: {
133
133
  readonly normal: "200ms";
134
134
  readonly slow: "320ms";
135
135
  };
136
+ /**
137
+ * 쌓임 순서. dropdown(Select·Combobox·DropdownMenu·Popover 목록)은 modal 보다 위 — 대화상자 안에서 연 목록이 배경막에 가리지 않게.
138
+ * 대화상자가 열려 있으면 바깥 페이지의 목록은 열 수 없으므로(포커스가 갇힘) 이 순서로 충돌하지 않는다.
139
+ * (1.x 초기에는 dropdown 1000 이라 Modal 안의 Select 목록이 배경막 아래에 그려졌다 — 파일럿 화면에서 발견)
140
+ */
136
141
  declare const zIndex: {
137
- readonly dropdown: "1000";
138
142
  readonly overlay: "1300";
139
143
  readonly modal: "1310";
144
+ readonly dropdown: "1320";
140
145
  readonly toast: "1400";
141
146
  readonly tooltip: "1500";
142
147
  };
148
+ /**
149
+ * 반응형 구간의 시작 폭(min-width). 화면이 이 폭 이상이면 그 구간이다(모바일 우선 — 기본 값은 가장 좁은 화면).
150
+ * CSS 변수로는 미디어쿼리를 쓸 수 없어 테마(vars)에 넣지 않는다. @bestow-ui/react 의 `media` 는 같은 값을 em 으로 바꾼
151
+ * 미디어쿼리 문자열이다(브라우저 기본 글꼴 크기를 키우면 구간도 따라 바뀐다).
152
+ */
153
+ declare const breakpoint: {
154
+ readonly sm: "640px";
155
+ readonly md: "768px";
156
+ readonly lg: "1024px";
157
+ readonly xl: "1280px";
158
+ };
143
159
  /** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
144
160
  /** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
145
161
  interface SemanticColors {
@@ -201,8 +217,16 @@ interface SemanticColors {
201
217
  subtleHover: string;
202
218
  text: string;
203
219
  };
220
+ /**
221
+ * 일반 안내(공지·도움말 Alert·Badge·Toast). 브랜드 색(primary)을 바꿔도 파랑으로 남는다.
222
+ * 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게. lightColors·darkColors 에는 항상 있다.
223
+ */
224
+ info?: SemanticColors['primary'];
204
225
  }
205
- declare const lightColors: SemanticColors;
206
- declare const darkColors: SemanticColors;
226
+ /** lightColors·darkColors 의 타입 — 선택 키(info)까지 모두 있다 */
227
+ type DefaultSemanticColors = SemanticColors & Required<Pick<SemanticColors, 'info'>>;
228
+ declare const lightColors: DefaultSemanticColors;
229
+ declare const darkColors: DefaultSemanticColors;
207
230
 
208
- export { type SemanticColors, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
231
+ export { breakpoint, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
232
+ export type { DefaultSemanticColors, SemanticColors };
package/dist/index.js CHANGED
@@ -127,12 +127,18 @@ var duration = {
127
127
  slow: "320ms"
128
128
  };
129
129
  var zIndex = {
130
- dropdown: "1000",
131
130
  overlay: "1300",
132
131
  modal: "1310",
132
+ dropdown: "1320",
133
133
  toast: "1400",
134
134
  tooltip: "1500"
135
135
  };
136
+ var breakpoint = {
137
+ sm: "640px",
138
+ md: "768px",
139
+ lg: "1024px",
140
+ xl: "1280px"
141
+ };
136
142
  var lightColors = {
137
143
  bg: {
138
144
  default: palette.white,
@@ -183,6 +189,15 @@ var lightColors = {
183
189
  subtle: palette.amber[50],
184
190
  subtleHover: palette.amber[100],
185
191
  text: palette.amber[800]
192
+ },
193
+ // 기본 primary 와 같은 파랑 — 브랜드 색을 바꿔도 안내는 파랑으로 남는다
194
+ info: {
195
+ solid: palette.blue[600],
196
+ solidHover: palette.blue[700],
197
+ contrast: palette.white,
198
+ subtle: palette.blue[50],
199
+ subtleHover: palette.blue[100],
200
+ text: palette.blue[700]
186
201
  }
187
202
  };
188
203
  var darkColors = {
@@ -235,9 +250,18 @@ var darkColors = {
235
250
  subtle: "rgba(245, 158, 11, 0.16)",
236
251
  subtleHover: "rgba(245, 158, 11, 0.26)",
237
252
  text: palette.amber[300]
253
+ },
254
+ info: {
255
+ solid: palette.blue[600],
256
+ solidHover: palette.blue[700],
257
+ contrast: palette.white,
258
+ subtle: "rgba(59, 111, 246, 0.16)",
259
+ subtleHover: "rgba(59, 111, 246, 0.26)",
260
+ text: palette.blue[300]
238
261
  }
239
262
  };
240
263
  export {
264
+ breakpoint,
241
265
  darkColors,
242
266
  darkShadow,
243
267
  duration,
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: '#666e76', // 흰색·gray50·gray100 배경에서 4.5:1 이상 (fg.subtle 로 쓰인다)\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 amber: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b',\n 600: '#d97706',\n 700: '#b45309',\n 800: '#92400e',\n 900: '#78350f',\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\n/** 라이트 모드 그림자. 다크 모드는 darkShadow 를 쓴다 (같은 키). */\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\n/**\n * 다크 모드 그림자. 어두운 배경에서는 옅은 그림자가 보이지 않으므로 더 진하게 하고,\n * 떠 있는 면(md·lg)은 가장자리를 구분하는 옅은 밝은 테두리(ring)를 함께 둔다.\n */\nexport const darkShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.5)',\n md: '0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5)',\n lg: '0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.6)',\n} as const satisfies Record<keyof typeof shadow, string>;\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 warning: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: {\n default: palette.white,\n subtle: palette.gray[50],\n muted: palette.gray[100],\n inverse: palette.gray[900],\n overlay: 'rgba(0, 0, 0, 0.45)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: palette.blue[50],\n subtleHover: palette.blue[100],\n text: palette.blue[700],\n },\n neutral: {\n solid: palette.gray[800],\n solidHover: palette.gray[900],\n contrast: palette.white,\n subtle: palette.gray[100],\n subtleHover: palette.gray[200],\n text: palette.gray[800],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: palette.red[50],\n subtleHover: palette.red[100],\n text: palette.red[700],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: palette.green[50],\n subtleHover: palette.green[100],\n text: palette.green[700],\n },\n // 노란색은 밝아서 solid 위 글자는 흰색이 아닌 어두운 색이다\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[600],\n contrast: palette.gray[900],\n subtle: palette.amber[50],\n subtleHover: palette.amber[100],\n text: palette.amber[800],\n },\n};\n\nexport const darkColors: SemanticColors = {\n bg: {\n default: palette.gray[950],\n subtle: palette.gray[900],\n muted: palette.gray[800],\n inverse: palette.gray[50],\n overlay: 'rgba(0, 0, 0, 0.65)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700], // 흰 글자 대비 유지를 위해 다크에서도 hover 는 어둡게 (blue500 은 4.38)\n contrast: palette.white,\n subtle: 'rgba(59, 111, 246, 0.16)',\n subtleHover: 'rgba(59, 111, 246, 0.26)',\n text: palette.blue[300],\n },\n neutral: {\n solid: palette.gray[200],\n solidHover: palette.gray[100],\n contrast: palette.gray[900],\n subtle: 'rgba(255, 255, 255, 0.08)',\n subtleHover: 'rgba(255, 255, 255, 0.14)',\n text: palette.gray[100],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: 'rgba(239, 68, 68, 0.16)',\n subtleHover: 'rgba(239, 68, 68, 0.26)',\n text: palette.red[300],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: 'rgba(34, 197, 94, 0.16)',\n subtleHover: 'rgba(34, 197, 94, 0.26)',\n text: palette.green[300],\n },\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[400],\n contrast: palette.gray[900],\n subtle: 'rgba(245, 158, 11, 0.16)',\n subtleHover: 'rgba(245, 158, 11, 0.26)',\n text: palette.amber[300],\n },\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: '#666e76', // 흰색·gray50·gray100 배경에서 4.5:1 이상 (fg.subtle 로 쓰인다)\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 amber: {\n 50: '#fffbeb',\n 100: '#fef3c7',\n 200: '#fde68a',\n 300: '#fcd34d',\n 400: '#fbbf24',\n 500: '#f59e0b',\n 600: '#d97706',\n 700: '#b45309',\n 800: '#92400e',\n 900: '#78350f',\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\n/** 라이트 모드 그림자. 다크 모드는 darkShadow 를 쓴다 (같은 키). */\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\n/**\n * 다크 모드 그림자. 어두운 배경에서는 옅은 그림자가 보이지 않으므로 더 진하게 하고,\n * 떠 있는 면(md·lg)은 가장자리를 구분하는 옅은 밝은 테두리(ring)를 함께 둔다.\n */\nexport const darkShadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.5)',\n md: '0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.5)',\n lg: '0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.6)',\n} as const satisfies Record<keyof typeof shadow, string>;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\n/**\n * 쌓임 순서. dropdown(Select·Combobox·DropdownMenu·Popover 목록)은 modal 보다 위 — 대화상자 안에서 연 목록이 배경막에 가리지 않게.\n * 대화상자가 열려 있으면 바깥 페이지의 목록은 열 수 없으므로(포커스가 갇힘) 이 순서로 충돌하지 않는다.\n * (1.x 초기에는 dropdown 1000 이라 Modal 안의 Select 목록이 배경막 아래에 그려졌다 — 파일럿 화면에서 발견)\n */\nexport const zIndex = {\n overlay: '1300',\n modal: '1310',\n dropdown: '1320',\n toast: '1400',\n tooltip: '1500',\n} as const;\n\n/**\n * 반응형 구간의 시작 폭(min-width). 화면이 이 폭 이상이면 그 구간이다(모바일 우선 — 기본 값은 가장 좁은 화면).\n * CSS 변수로는 미디어쿼리를 쓸 수 없어 테마(vars)에 넣지 않는다. @bestow-ui/react 의 `media` 는 같은 값을 em 으로 바꾼\n * 미디어쿼리 문자열이다(브라우저 기본 글꼴 크기를 키우면 구간도 따라 바뀐다).\n */\nexport const breakpoint = {\n sm: '640px',\n md: '768px',\n lg: '1024px',\n xl: '1280px',\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 warning: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n /**\n * 일반 안내(공지·도움말 Alert·Badge·Toast). 브랜드 색(primary)을 바꿔도 파랑으로 남는다.\n * 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게. lightColors·darkColors 에는 항상 있다.\n */\n info?: SemanticColors['primary'];\n}\n\n/** lightColors·darkColors 의 타입 — 선택 키(info)까지 모두 있다 */\nexport type DefaultSemanticColors = SemanticColors & Required<Pick<SemanticColors, 'info'>>;\n\nexport const lightColors: DefaultSemanticColors = {\n bg: {\n default: palette.white,\n subtle: palette.gray[50],\n muted: palette.gray[100],\n inverse: palette.gray[900],\n overlay: 'rgba(0, 0, 0, 0.45)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: palette.blue[50],\n subtleHover: palette.blue[100],\n text: palette.blue[700],\n },\n neutral: {\n solid: palette.gray[800],\n solidHover: palette.gray[900],\n contrast: palette.white,\n subtle: palette.gray[100],\n subtleHover: palette.gray[200],\n text: palette.gray[800],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: palette.red[50],\n subtleHover: palette.red[100],\n text: palette.red[700],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: palette.green[50],\n subtleHover: palette.green[100],\n text: palette.green[700],\n },\n // 노란색은 밝아서 solid 위 글자는 흰색이 아닌 어두운 색이다\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[600],\n contrast: palette.gray[900],\n subtle: palette.amber[50],\n subtleHover: palette.amber[100],\n text: palette.amber[800],\n },\n // 기본 primary 와 같은 파랑 — 브랜드 색을 바꿔도 안내는 파랑으로 남는다\n info: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: palette.blue[50],\n subtleHover: palette.blue[100],\n text: palette.blue[700],\n },\n};\n\nexport const darkColors: DefaultSemanticColors = {\n bg: {\n default: palette.gray[950],\n subtle: palette.gray[900],\n muted: palette.gray[800],\n inverse: palette.gray[50],\n overlay: 'rgba(0, 0, 0, 0.65)',\n },\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: {\n solid: palette.blue[600],\n solidHover: palette.blue[700], // 흰 글자 대비 유지를 위해 다크에서도 hover 는 어둡게 (blue500 은 4.38)\n contrast: palette.white,\n subtle: 'rgba(59, 111, 246, 0.16)',\n subtleHover: 'rgba(59, 111, 246, 0.26)',\n text: palette.blue[300],\n },\n neutral: {\n solid: palette.gray[200],\n solidHover: palette.gray[100],\n contrast: palette.gray[900],\n subtle: 'rgba(255, 255, 255, 0.08)',\n subtleHover: 'rgba(255, 255, 255, 0.14)',\n text: palette.gray[100],\n },\n danger: {\n solid: palette.red[600],\n solidHover: palette.red[700],\n contrast: palette.white,\n subtle: 'rgba(239, 68, 68, 0.16)',\n subtleHover: 'rgba(239, 68, 68, 0.26)',\n text: palette.red[300],\n },\n success: {\n solid: palette.green[700],\n solidHover: palette.green[800],\n contrast: palette.white,\n subtle: 'rgba(34, 197, 94, 0.16)',\n subtleHover: 'rgba(34, 197, 94, 0.26)',\n text: palette.green[300],\n },\n warning: {\n solid: palette.amber[500],\n solidHover: palette.amber[400],\n contrast: palette.gray[900],\n subtle: 'rgba(245, 158, 11, 0.16)',\n subtleHover: 'rgba(245, 158, 11, 0.26)',\n text: palette.amber[300],\n },\n info: {\n solid: palette.blue[600],\n solidHover: palette.blue[700],\n contrast: palette.white,\n subtle: 'rgba(59, 111, 246, 0.16)',\n subtleHover: 'rgba(59, 111, 246, 0.26)',\n text: palette.blue[300],\n },\n};\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,14 +1,17 @@
1
1
  {
2
2
  "name": "@bestow-ui/tokens",
3
- "version": "1.0.0",
4
- "description": "Design tokens for BestOW UI — colors, spacing, radius, typography, shadow, motion",
3
+ "version": "1.7.0",
4
+ "description": "BestOW UI 디자인 토큰 — 색상·간격·모서리·글자·그림자·시간·쌓임 순서 (의존성 없음, 프레임워크 무관)",
5
5
  "keywords": [
6
- "bestow-ui",
7
- "design-system",
8
6
  "design-tokens",
9
7
  "tokens",
8
+ "design-system",
10
9
  "colors",
11
- "theme"
10
+ "theme",
11
+ "dark-mode",
12
+ "korean",
13
+ "bestow-ui",
14
+ "디자인시스템"
12
15
  ],
13
16
  "license": "MIT",
14
17
  "author": "Dev-BestOW",
@@ -46,7 +49,7 @@
46
49
  "dist"
47
50
  ],
48
51
  "devDependencies": {
49
- "tsup": "^8.5.1",
52
+ "tsup": "^9.0.0",
50
53
  "typescript": "~5.9.3"
51
54
  },
52
55
  "scripts": {