@bestow-ui/tokens 1.3.0 → 2.0.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 +3 -1
  2. package/dist/index.cjs +49 -2
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +40 -3
  5. package/dist/index.d.ts +40 -3
  6. package/dist/index.js +47 -2
  7. package/dist/index.js.map +1 -1
  8. package/package.json +2 -2
package/README.md CHANGED
@@ -30,12 +30,14 @@ darkColors.fg.default; // '#f8f9fa'
30
30
  | export | 내용 |
31
31
  |---|---|
32
32
  | `palette` | 원시 색 단계 (`gray`, `blue`, `red`, `green`, `amber`, `white`, `black`) |
33
- | `lightColors`, `darkColors` | 의미 색 (`bg`, `fg`, `border`, `primary`, `neutral`, `danger`, `success`, `warning`) — 두 모드의 키가 같아요 |
33
+ | `lightColors`, `darkColors` | 의미 색 (`bg`, `fg`, `border`, `primary`, `neutral`, `danger`, `success`, `warning`, `info`) — 두 모드의 키가 같아요. `info` 는 일반 안내용 파랑(브랜드 색과 따로) |
34
34
  | `space` | `0`–`16` (4px 단위) |
35
35
  | `radius` | `none`, `sm`, `md`, `lg`, `xl`, `full` |
36
36
  | `fontFamily`, `fontSize`, `fontWeight`, `lineHeight` | 글자 |
37
37
  | `shadow`, `darkShadow` | 라이트·다크 그림자 (키가 같아요) |
38
+ | `breakpoint` | 반응형 구간 시작 폭 `sm` 640 · `md` 768 · `lg` 1024 · `xl` 1280 (px, min-width) |
38
39
  | `duration`, `zIndex` | 움직임 시간과 쌓임 순서 (배경막 < 대화상자 < 목록 < 토스트 < 툴팁) |
40
+ | `opacity` | 비활성 컨트롤의 투명도 `disabled` 0.5 |
39
41
 
40
42
  ### React 와 함께
41
43
 
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,
@@ -28,6 +29,7 @@ __export(index_exports, {
28
29
  fontWeight: () => fontWeight,
29
30
  lightColors: () => lightColors,
30
31
  lineHeight: () => lineHeight,
32
+ opacity: () => opacity,
31
33
  palette: () => palette,
32
34
  radius: () => radius,
33
35
  shadow: () => shadow,
@@ -162,6 +164,9 @@ var duration = {
162
164
  normal: "200ms",
163
165
  slow: "320ms"
164
166
  };
167
+ var opacity = {
168
+ disabled: "0.5"
169
+ };
165
170
  var zIndex = {
166
171
  overlay: "1300",
167
172
  modal: "1310",
@@ -169,6 +174,12 @@ var zIndex = {
169
174
  toast: "1400",
170
175
  tooltip: "1500"
171
176
  };
177
+ var breakpoint = {
178
+ sm: "640px",
179
+ md: "768px",
180
+ lg: "1024px",
181
+ xl: "1280px"
182
+ };
172
183
  var lightColors = {
173
184
  bg: {
174
185
  default: palette.white,
@@ -178,7 +189,15 @@ var lightColors = {
178
189
  overlay: "rgba(0, 0, 0, 0.45)"
179
190
  },
180
191
  fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },
181
- border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },
192
+ // 입력 칸 gray600(흰 배경 5.18:1, bg.subtle 4.91:1) / hover gray700, 체크 컨트롤 gray600
193
+ border: {
194
+ default: palette.gray[300],
195
+ strong: palette.gray[500],
196
+ focus: palette.blue[500],
197
+ input: palette.gray[600],
198
+ inputHover: palette.gray[700],
199
+ control: palette.gray[600]
200
+ },
182
201
  primary: {
183
202
  solid: palette.blue[600],
184
203
  solidHover: palette.blue[700],
@@ -219,6 +238,15 @@ var lightColors = {
219
238
  subtle: palette.amber[50],
220
239
  subtleHover: palette.amber[100],
221
240
  text: palette.amber[800]
241
+ },
242
+ // 기본 primary 와 같은 파랑 — 브랜드 색을 바꿔도 안내는 파랑으로 남는다
243
+ info: {
244
+ solid: palette.blue[600],
245
+ solidHover: palette.blue[700],
246
+ contrast: palette.white,
247
+ subtle: palette.blue[50],
248
+ subtleHover: palette.blue[100],
249
+ text: palette.blue[700]
222
250
  }
223
251
  };
224
252
  var darkColors = {
@@ -230,7 +258,16 @@ var darkColors = {
230
258
  overlay: "rgba(0, 0, 0, 0.65)"
231
259
  },
232
260
  fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },
233
- border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },
261
+ // 입력 칸 gray500(bg.default 8.57:1, bg.subtle 7.43:1 — gray600 은 bg.subtle 위에서 2.98:1) / hover 는 더 밝게 gray300,
262
+ // 체크 컨트롤 gray500(border.strong 과 같다)
263
+ border: {
264
+ default: palette.gray[700],
265
+ strong: palette.gray[500],
266
+ focus: palette.blue[400],
267
+ input: palette.gray[500],
268
+ inputHover: palette.gray[300],
269
+ control: palette.gray[500]
270
+ },
234
271
  primary: {
235
272
  solid: palette.blue[600],
236
273
  solidHover: palette.blue[700],
@@ -271,10 +308,19 @@ var darkColors = {
271
308
  subtle: "rgba(245, 158, 11, 0.16)",
272
309
  subtleHover: "rgba(245, 158, 11, 0.26)",
273
310
  text: palette.amber[300]
311
+ },
312
+ info: {
313
+ solid: palette.blue[600],
314
+ solidHover: palette.blue[700],
315
+ contrast: palette.white,
316
+ subtle: "rgba(59, 111, 246, 0.16)",
317
+ subtleHover: "rgba(59, 111, 246, 0.26)",
318
+ text: palette.blue[300]
274
319
  }
275
320
  };
276
321
  // Annotate the CommonJS export names for ESM import in node:
277
322
  0 && (module.exports = {
323
+ breakpoint,
278
324
  darkColors,
279
325
  darkShadow,
280
326
  duration,
@@ -283,6 +329,7 @@ var darkColors = {
283
329
  fontWeight,
284
330
  lightColors,
285
331
  lineHeight,
332
+ opacity,
286
333
  palette,
287
334
  radius,
288
335
  shadow,
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\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/** 의미 기반(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 * 투명도. disabled 는 모든 컴포넌트의 비활성 모양(버튼·입력 칸·체크 컨트롤·탭·메뉴 항목·달력 날짜 등)에 같은 값을 쓴다.\n * 비활성 컨트롤은 대비 기준(WCAG 1.4.3·1.4.11)에서 빠지지만, 그래도 알아볼 수 있게 0.5 보다 낮추지 않는다.\n */\nexport const opacity = {\n disabled: '0.5',\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 /**\n * - `input`·`inputHover`: 입력 칸(Input·Select·Combobox·Textarea·인증번호 칸 등) 테두리와 hover.\n * - `control`: Checkbox·Radio 테두리, 꺼진 Switch 트랙, Stepper 의 예정 단계.\n * 셋 다 배경과 3:1 이상이다(WCAG 1.4.11). 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게.\n * lightColors·darkColors 에는 항상 있다.\n */\n border: { default: string; strong: string; focus: string; input?: string; inputHover?: string; control?: 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, border.input 등)까지 모두 있다 */\nexport type DefaultSemanticColors = SemanticColors &\n Required<Pick<SemanticColors, 'info'>> & { border: Required<SemanticColors['border']> };\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 // 입력 칸 gray600(흰 배경 5.18:1, bg.subtle 4.91:1) / hover gray700, 체크 컨트롤 gray600\n border: {\n default: palette.gray[300],\n strong: palette.gray[500],\n focus: palette.blue[500],\n input: palette.gray[600],\n inputHover: palette.gray[700],\n control: palette.gray[600],\n },\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 // 입력 칸 gray500(bg.default 8.57:1, bg.subtle 7.43:1 — gray600 은 bg.subtle 위에서 2.98:1) / hover 는 더 밝게 gray300,\n // 체크 컨트롤 gray500(border.strong 과 같다)\n border: {\n default: palette.gray[700],\n strong: palette.gray[500],\n focus: palette.blue[400],\n input: palette.gray[500],\n inputHover: palette.gray[300],\n control: palette.gray[500],\n },\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;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;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;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;AAGO,IAAM,SAAS;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,WAAW;AAAA,EACtB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AACR;AAMO,IAAM,UAAU;AAAA,EACrB,UAAU;AACZ;AAOO,IAAM,SAAS;AAAA,EACpB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AACX;AAOO,IAAM,aAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AA8BO,IAAM,cAAqC;AAAA,EAChD,IAAI;AAAA,IACF,SAAS,QAAQ;AAAA,IACjB,QAAQ,QAAQ,KAAK,EAAE;AAAA,IACvB,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,SAAS,QAAQ,KAAK,GAAG;AAAA,IACzB,SAAS;AAAA,EACX;AAAA,EACA,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,GAAG,OAAO,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,SAAS,QAAQ,MAAM;AAAA;AAAA,EAE9G,QAAQ;AAAA,IACN,SAAS,QAAQ,KAAK,GAAG;AAAA,IACzB,QAAQ,QAAQ,KAAK,GAAG;AAAA,IACxB,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,SAAS,QAAQ,KAAK,GAAG;AAAA,EAC3B;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,UAAU,QAAQ;AAAA,IAClB,QAAQ,QAAQ,KAAK,EAAE;AAAA,IACvB,aAAa,QAAQ,KAAK,GAAG;AAAA,IAC7B,MAAM,QAAQ,KAAK,GAAG;AAAA,EACxB;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,UAAU,QAAQ;AAAA,IAClB,QAAQ,QAAQ,KAAK,GAAG;AAAA,IACxB,aAAa,QAAQ,KAAK,GAAG;AAAA,IAC7B,MAAM,QAAQ,KAAK,GAAG;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,IACN,OAAO,QAAQ,IAAI,GAAG;AAAA,IACtB,YAAY,QAAQ,IAAI,GAAG;AAAA,IAC3B,UAAU,QAAQ;AAAA,IAClB,QAAQ,QAAQ,IAAI,EAAE;AAAA,IACtB,aAAa,QAAQ,IAAI,GAAG;AAAA,IAC5B,MAAM,QAAQ,IAAI,GAAG;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxB,YAAY,QAAQ,MAAM,GAAG;AAAA,IAC7B,UAAU,QAAQ;AAAA,IAClB,QAAQ,QAAQ,MAAM,EAAE;AAAA,IACxB,aAAa,QAAQ,MAAM,GAAG;AAAA,IAC9B,MAAM,QAAQ,MAAM,GAAG;AAAA,EACzB;AAAA;AAAA,EAEA,SAAS;AAAA,IACP,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxB,YAAY,QAAQ,MAAM,GAAG;AAAA,IAC7B,UAAU,QAAQ,KAAK,GAAG;AAAA,IAC1B,QAAQ,QAAQ,MAAM,EAAE;AAAA,IACxB,aAAa,QAAQ,MAAM,GAAG;AAAA,IAC9B,MAAM,QAAQ,MAAM,GAAG;AAAA,EACzB;AAAA;AAAA,EAEA,MAAM;AAAA,IACJ,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,UAAU,QAAQ;AAAA,IAClB,QAAQ,QAAQ,KAAK,EAAE;AAAA,IACvB,aAAa,QAAQ,KAAK,GAAG;AAAA,IAC7B,MAAM,QAAQ,KAAK,GAAG;AAAA,EACxB;AACF;AAEO,IAAM,aAAoC;AAAA,EAC/C,IAAI;AAAA,IACF,SAAS,QAAQ,KAAK,GAAG;AAAA,IACzB,QAAQ,QAAQ,KAAK,GAAG;AAAA,IACxB,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,SAAS,QAAQ,KAAK,EAAE;AAAA,IACxB,SAAS;AAAA,EACX;AAAA,EACA,IAAI,EAAE,SAAS,QAAQ,KAAK,EAAE,GAAG,OAAO,QAAQ,KAAK,GAAG,GAAG,QAAQ,QAAQ,KAAK,GAAG,GAAG,SAAS,QAAQ,KAAK,GAAG,EAAE;AAAA;AAAA;AAAA,EAGjH,QAAQ;AAAA,IACN,SAAS,QAAQ,KAAK,GAAG;AAAA,IACzB,QAAQ,QAAQ,KAAK,GAAG;AAAA,IACxB,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,SAAS,QAAQ,KAAK,GAAG;AAAA,EAC3B;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA;AAAA,IAC5B,UAAU,QAAQ;AAAA,IAClB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM,QAAQ,KAAK,GAAG;AAAA,EACxB;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,UAAU,QAAQ,KAAK,GAAG;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM,QAAQ,KAAK,GAAG;AAAA,EACxB;AAAA,EACA,QAAQ;AAAA,IACN,OAAO,QAAQ,IAAI,GAAG;AAAA,IACtB,YAAY,QAAQ,IAAI,GAAG;AAAA,IAC3B,UAAU,QAAQ;AAAA,IAClB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM,QAAQ,IAAI,GAAG;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxB,YAAY,QAAQ,MAAM,GAAG;AAAA,IAC7B,UAAU,QAAQ;AAAA,IAClB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM,QAAQ,MAAM,GAAG;AAAA,EACzB;AAAA,EACA,SAAS;AAAA,IACP,OAAO,QAAQ,MAAM,GAAG;AAAA,IACxB,YAAY,QAAQ,MAAM,GAAG;AAAA,IAC7B,UAAU,QAAQ,KAAK,GAAG;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM,QAAQ,MAAM,GAAG;AAAA,EACzB;AAAA,EACA,MAAM;AAAA,IACJ,OAAO,QAAQ,KAAK,GAAG;AAAA,IACvB,YAAY,QAAQ,KAAK,GAAG;AAAA,IAC5B,UAAU,QAAQ;AAAA,IAClB,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM,QAAQ,KAAK,GAAG;AAAA,EACxB;AACF;","names":[]}
package/dist/index.d.cts CHANGED
@@ -133,6 +133,13 @@ declare const duration: {
133
133
  readonly normal: "200ms";
134
134
  readonly slow: "320ms";
135
135
  };
136
+ /**
137
+ * 투명도. disabled 는 모든 컴포넌트의 비활성 모양(버튼·입력 칸·체크 컨트롤·탭·메뉴 항목·달력 날짜 등)에 같은 값을 쓴다.
138
+ * 비활성 컨트롤은 대비 기준(WCAG 1.4.3·1.4.11)에서 빠지지만, 그래도 알아볼 수 있게 0.5 보다 낮추지 않는다.
139
+ */
140
+ declare const opacity: {
141
+ readonly disabled: "0.5";
142
+ };
136
143
  /**
137
144
  * 쌓임 순서. dropdown(Select·Combobox·DropdownMenu·Popover 목록)은 modal 보다 위 — 대화상자 안에서 연 목록이 배경막에 가리지 않게.
138
145
  * 대화상자가 열려 있으면 바깥 페이지의 목록은 열 수 없으므로(포커스가 갇힘) 이 순서로 충돌하지 않는다.
@@ -145,6 +152,17 @@ declare const zIndex: {
145
152
  readonly toast: "1400";
146
153
  readonly tooltip: "1500";
147
154
  };
155
+ /**
156
+ * 반응형 구간의 시작 폭(min-width). 화면이 이 폭 이상이면 그 구간이다(모바일 우선 — 기본 값은 가장 좁은 화면).
157
+ * CSS 변수로는 미디어쿼리를 쓸 수 없어 테마(vars)에 넣지 않는다. @bestow-ui/react 의 `media` 는 같은 값을 em 으로 바꾼
158
+ * 미디어쿼리 문자열이다(브라우저 기본 글꼴 크기를 키우면 구간도 따라 바뀐다).
159
+ */
160
+ declare const breakpoint: {
161
+ readonly sm: "640px";
162
+ readonly md: "768px";
163
+ readonly lg: "1024px";
164
+ readonly xl: "1280px";
165
+ };
148
166
  /** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
149
167
  /** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
150
168
  interface SemanticColors {
@@ -161,10 +179,19 @@ interface SemanticColors {
161
179
  subtle: string;
162
180
  inverse: string;
163
181
  };
182
+ /**
183
+ * - `input`·`inputHover`: 입력 칸(Input·Select·Combobox·Textarea·인증번호 칸 등) 테두리와 hover.
184
+ * - `control`: Checkbox·Radio 테두리, 꺼진 Switch 트랙, Stepper 의 예정 단계.
185
+ * 셋 다 배경과 3:1 이상이다(WCAG 1.4.11). 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게.
186
+ * lightColors·darkColors 에는 항상 있다.
187
+ */
164
188
  border: {
165
189
  default: string;
166
190
  strong: string;
167
191
  focus: string;
192
+ input?: string;
193
+ inputHover?: string;
194
+ control?: string;
168
195
  };
169
196
  primary: {
170
197
  solid: string;
@@ -206,8 +233,18 @@ interface SemanticColors {
206
233
  subtleHover: string;
207
234
  text: string;
208
235
  };
236
+ /**
237
+ * 일반 안내(공지·도움말 Alert·Badge·Toast). 브랜드 색(primary)을 바꿔도 파랑으로 남는다.
238
+ * 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게. lightColors·darkColors 에는 항상 있다.
239
+ */
240
+ info?: SemanticColors['primary'];
209
241
  }
210
- declare const lightColors: SemanticColors;
211
- declare const darkColors: SemanticColors;
242
+ /** lightColors·darkColors 의 타입 — 선택 키(info, border.input 등)까지 모두 있다 */
243
+ type DefaultSemanticColors = SemanticColors & Required<Pick<SemanticColors, 'info'>> & {
244
+ border: Required<SemanticColors['border']>;
245
+ };
246
+ declare const lightColors: DefaultSemanticColors;
247
+ declare const darkColors: DefaultSemanticColors;
212
248
 
213
- export { type SemanticColors, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
249
+ export { breakpoint, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, opacity, palette, radius, shadow, space, zIndex };
250
+ export type { DefaultSemanticColors, SemanticColors };
package/dist/index.d.ts CHANGED
@@ -133,6 +133,13 @@ declare const duration: {
133
133
  readonly normal: "200ms";
134
134
  readonly slow: "320ms";
135
135
  };
136
+ /**
137
+ * 투명도. disabled 는 모든 컴포넌트의 비활성 모양(버튼·입력 칸·체크 컨트롤·탭·메뉴 항목·달력 날짜 등)에 같은 값을 쓴다.
138
+ * 비활성 컨트롤은 대비 기준(WCAG 1.4.3·1.4.11)에서 빠지지만, 그래도 알아볼 수 있게 0.5 보다 낮추지 않는다.
139
+ */
140
+ declare const opacity: {
141
+ readonly disabled: "0.5";
142
+ };
136
143
  /**
137
144
  * 쌓임 순서. dropdown(Select·Combobox·DropdownMenu·Popover 목록)은 modal 보다 위 — 대화상자 안에서 연 목록이 배경막에 가리지 않게.
138
145
  * 대화상자가 열려 있으면 바깥 페이지의 목록은 열 수 없으므로(포커스가 갇힘) 이 순서로 충돌하지 않는다.
@@ -145,6 +152,17 @@ declare const zIndex: {
145
152
  readonly toast: "1400";
146
153
  readonly tooltip: "1500";
147
154
  };
155
+ /**
156
+ * 반응형 구간의 시작 폭(min-width). 화면이 이 폭 이상이면 그 구간이다(모바일 우선 — 기본 값은 가장 좁은 화면).
157
+ * CSS 변수로는 미디어쿼리를 쓸 수 없어 테마(vars)에 넣지 않는다. @bestow-ui/react 의 `media` 는 같은 값을 em 으로 바꾼
158
+ * 미디어쿼리 문자열이다(브라우저 기본 글꼴 크기를 키우면 구간도 따라 바뀐다).
159
+ */
160
+ declare const breakpoint: {
161
+ readonly sm: "640px";
162
+ readonly md: "768px";
163
+ readonly lg: "1024px";
164
+ readonly xl: "1280px";
165
+ };
148
166
  /** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
149
167
  /** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
150
168
  interface SemanticColors {
@@ -161,10 +179,19 @@ interface SemanticColors {
161
179
  subtle: string;
162
180
  inverse: string;
163
181
  };
182
+ /**
183
+ * - `input`·`inputHover`: 입력 칸(Input·Select·Combobox·Textarea·인증번호 칸 등) 테두리와 hover.
184
+ * - `control`: Checkbox·Radio 테두리, 꺼진 Switch 트랙, Stepper 의 예정 단계.
185
+ * 셋 다 배경과 3:1 이상이다(WCAG 1.4.11). 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게.
186
+ * lightColors·darkColors 에는 항상 있다.
187
+ */
164
188
  border: {
165
189
  default: string;
166
190
  strong: string;
167
191
  focus: string;
192
+ input?: string;
193
+ inputHover?: string;
194
+ control?: string;
168
195
  };
169
196
  primary: {
170
197
  solid: string;
@@ -206,8 +233,18 @@ interface SemanticColors {
206
233
  subtleHover: string;
207
234
  text: string;
208
235
  };
236
+ /**
237
+ * 일반 안내(공지·도움말 Alert·Badge·Toast). 브랜드 색(primary)을 바꿔도 파랑으로 남는다.
238
+ * 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게. lightColors·darkColors 에는 항상 있다.
239
+ */
240
+ info?: SemanticColors['primary'];
209
241
  }
210
- declare const lightColors: SemanticColors;
211
- declare const darkColors: SemanticColors;
242
+ /** lightColors·darkColors 의 타입 — 선택 키(info, border.input 등)까지 모두 있다 */
243
+ type DefaultSemanticColors = SemanticColors & Required<Pick<SemanticColors, 'info'>> & {
244
+ border: Required<SemanticColors['border']>;
245
+ };
246
+ declare const lightColors: DefaultSemanticColors;
247
+ declare const darkColors: DefaultSemanticColors;
212
248
 
213
- export { type SemanticColors, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
249
+ export { breakpoint, darkColors, darkShadow, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, opacity, palette, radius, shadow, space, zIndex };
250
+ export type { DefaultSemanticColors, SemanticColors };
package/dist/index.js CHANGED
@@ -126,6 +126,9 @@ var duration = {
126
126
  normal: "200ms",
127
127
  slow: "320ms"
128
128
  };
129
+ var opacity = {
130
+ disabled: "0.5"
131
+ };
129
132
  var zIndex = {
130
133
  overlay: "1300",
131
134
  modal: "1310",
@@ -133,6 +136,12 @@ var zIndex = {
133
136
  toast: "1400",
134
137
  tooltip: "1500"
135
138
  };
139
+ var breakpoint = {
140
+ sm: "640px",
141
+ md: "768px",
142
+ lg: "1024px",
143
+ xl: "1280px"
144
+ };
136
145
  var lightColors = {
137
146
  bg: {
138
147
  default: palette.white,
@@ -142,7 +151,15 @@ var lightColors = {
142
151
  overlay: "rgba(0, 0, 0, 0.45)"
143
152
  },
144
153
  fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },
145
- border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },
154
+ // 입력 칸 gray600(흰 배경 5.18:1, bg.subtle 4.91:1) / hover gray700, 체크 컨트롤 gray600
155
+ border: {
156
+ default: palette.gray[300],
157
+ strong: palette.gray[500],
158
+ focus: palette.blue[500],
159
+ input: palette.gray[600],
160
+ inputHover: palette.gray[700],
161
+ control: palette.gray[600]
162
+ },
146
163
  primary: {
147
164
  solid: palette.blue[600],
148
165
  solidHover: palette.blue[700],
@@ -183,6 +200,15 @@ var lightColors = {
183
200
  subtle: palette.amber[50],
184
201
  subtleHover: palette.amber[100],
185
202
  text: palette.amber[800]
203
+ },
204
+ // 기본 primary 와 같은 파랑 — 브랜드 색을 바꿔도 안내는 파랑으로 남는다
205
+ info: {
206
+ solid: palette.blue[600],
207
+ solidHover: palette.blue[700],
208
+ contrast: palette.white,
209
+ subtle: palette.blue[50],
210
+ subtleHover: palette.blue[100],
211
+ text: palette.blue[700]
186
212
  }
187
213
  };
188
214
  var darkColors = {
@@ -194,7 +220,16 @@ var darkColors = {
194
220
  overlay: "rgba(0, 0, 0, 0.65)"
195
221
  },
196
222
  fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },
197
- border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },
223
+ // 입력 칸 gray500(bg.default 8.57:1, bg.subtle 7.43:1 — gray600 은 bg.subtle 위에서 2.98:1) / hover 는 더 밝게 gray300,
224
+ // 체크 컨트롤 gray500(border.strong 과 같다)
225
+ border: {
226
+ default: palette.gray[700],
227
+ strong: palette.gray[500],
228
+ focus: palette.blue[400],
229
+ input: palette.gray[500],
230
+ inputHover: palette.gray[300],
231
+ control: palette.gray[500]
232
+ },
198
233
  primary: {
199
234
  solid: palette.blue[600],
200
235
  solidHover: palette.blue[700],
@@ -235,9 +270,18 @@ var darkColors = {
235
270
  subtle: "rgba(245, 158, 11, 0.16)",
236
271
  subtleHover: "rgba(245, 158, 11, 0.26)",
237
272
  text: palette.amber[300]
273
+ },
274
+ info: {
275
+ solid: palette.blue[600],
276
+ solidHover: palette.blue[700],
277
+ contrast: palette.white,
278
+ subtle: "rgba(59, 111, 246, 0.16)",
279
+ subtleHover: "rgba(59, 111, 246, 0.26)",
280
+ text: palette.blue[300]
238
281
  }
239
282
  };
240
283
  export {
284
+ breakpoint,
241
285
  darkColors,
242
286
  darkShadow,
243
287
  duration,
@@ -246,6 +290,7 @@ export {
246
290
  fontWeight,
247
291
  lightColors,
248
292
  lineHeight,
293
+ opacity,
249
294
  palette,
250
295
  radius,
251
296
  shadow,
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\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/** 의미 기반(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 * 투명도. disabled 는 모든 컴포넌트의 비활성 모양(버튼·입력 칸·체크 컨트롤·탭·메뉴 항목·달력 날짜 등)에 같은 값을 쓴다.\n * 비활성 컨트롤은 대비 기준(WCAG 1.4.3·1.4.11)에서 빠지지만, 그래도 알아볼 수 있게 0.5 보다 낮추지 않는다.\n */\nexport const opacity = {\n disabled: '0.5',\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 /**\n * - `input`·`inputHover`: 입력 칸(Input·Select·Combobox·Textarea·인증번호 칸 등) 테두리와 hover.\n * - `control`: Checkbox·Radio 테두리, 꺼진 Switch 트랙, Stepper 의 예정 단계.\n * 셋 다 배경과 3:1 이상이다(WCAG 1.4.11). 1.x 에 추가한 키라 선택(?)이다 — 직접 만든 SemanticColors 객체가 타입 오류로 깨지지 않게.\n * lightColors·darkColors 에는 항상 있다.\n */\n border: { default: string; strong: string; focus: string; input?: string; inputHover?: string; control?: 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, border.input 등)까지 모두 있다 */\nexport type DefaultSemanticColors = SemanticColors &\n Required<Pick<SemanticColors, 'info'>> & { border: Required<SemanticColors['border']> };\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 // 입력 칸 gray600(흰 배경 5.18:1, bg.subtle 4.91:1) / hover gray700, 체크 컨트롤 gray600\n border: {\n default: palette.gray[300],\n strong: palette.gray[500],\n focus: palette.blue[500],\n input: palette.gray[600],\n inputHover: palette.gray[700],\n control: palette.gray[600],\n },\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 // 입력 칸 gray500(bg.default 8.57:1, bg.subtle 7.43:1 — gray600 은 bg.subtle 위에서 2.98:1) / hover 는 더 밝게 gray300,\n // 체크 컨트롤 gray500(border.strong 과 같다)\n border: {\n default: palette.gray[700],\n strong: palette.gray[500],\n focus: palette.blue[400],\n input: palette.gray[500],\n inputHover: palette.gray[300],\n control: palette.gray[500],\n },\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,6 +1,6 @@
1
1
  {
2
2
  "name": "@bestow-ui/tokens",
3
- "version": "1.3.0",
3
+ "version": "2.0.0",
4
4
  "description": "BestOW UI 디자인 토큰 — 색상·간격·모서리·글자·그림자·시간·쌓임 순서 (의존성 없음, 프레임워크 무관)",
5
5
  "keywords": [
6
6
  "design-tokens",
@@ -49,7 +49,7 @@
49
49
  "dist"
50
50
  ],
51
51
  "devDependencies": {
52
- "tsup": "^8.5.1",
52
+ "tsup": "^9.0.0",
53
53
  "typescript": "~5.9.3"
54
54
  },
55
55
  "scripts": {