@bestow-ui/tokens 0.0.0-stage → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +186 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +178 -0
- package/dist/index.d.ts +178 -0
- package/dist/index.js +150 -0
- package/dist/index.js.map +1 -0
- package/package.json +36 -3
- package/README.md +0 -3
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
darkColors: () => darkColors,
|
|
24
|
+
duration: () => duration,
|
|
25
|
+
fontFamily: () => fontFamily,
|
|
26
|
+
fontSize: () => fontSize,
|
|
27
|
+
fontWeight: () => fontWeight,
|
|
28
|
+
lightColors: () => lightColors,
|
|
29
|
+
lineHeight: () => lineHeight,
|
|
30
|
+
palette: () => palette,
|
|
31
|
+
radius: () => radius,
|
|
32
|
+
shadow: () => shadow,
|
|
33
|
+
space: () => space,
|
|
34
|
+
zIndex: () => zIndex
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
|
+
var palette = {
|
|
38
|
+
white: "#ffffff",
|
|
39
|
+
black: "#000000",
|
|
40
|
+
gray: {
|
|
41
|
+
50: "#f8f9fa",
|
|
42
|
+
100: "#f1f3f5",
|
|
43
|
+
200: "#e9ecef",
|
|
44
|
+
300: "#dee2e6",
|
|
45
|
+
400: "#ced4da",
|
|
46
|
+
500: "#adb5bd",
|
|
47
|
+
600: "#868e96",
|
|
48
|
+
700: "#495057",
|
|
49
|
+
800: "#343a40",
|
|
50
|
+
900: "#212529",
|
|
51
|
+
950: "#16181b"
|
|
52
|
+
},
|
|
53
|
+
blue: {
|
|
54
|
+
50: "#eef4ff",
|
|
55
|
+
100: "#dbe6fe",
|
|
56
|
+
200: "#bfd3fe",
|
|
57
|
+
300: "#93b4fd",
|
|
58
|
+
400: "#6090fa",
|
|
59
|
+
500: "#3b6ff6",
|
|
60
|
+
600: "#2554eb",
|
|
61
|
+
700: "#1d42d8",
|
|
62
|
+
800: "#1e37af",
|
|
63
|
+
900: "#1e338a"
|
|
64
|
+
},
|
|
65
|
+
red: {
|
|
66
|
+
50: "#fef2f2",
|
|
67
|
+
100: "#fee2e2",
|
|
68
|
+
200: "#fecaca",
|
|
69
|
+
300: "#fca5a5",
|
|
70
|
+
400: "#f87171",
|
|
71
|
+
500: "#ef4444",
|
|
72
|
+
600: "#dc2626",
|
|
73
|
+
700: "#b91c1c",
|
|
74
|
+
800: "#991b1b",
|
|
75
|
+
900: "#7f1d1d"
|
|
76
|
+
},
|
|
77
|
+
green: {
|
|
78
|
+
50: "#f0fdf4",
|
|
79
|
+
100: "#dcfce7",
|
|
80
|
+
200: "#bbf7d0",
|
|
81
|
+
300: "#86efac",
|
|
82
|
+
400: "#4ade80",
|
|
83
|
+
500: "#22c55e",
|
|
84
|
+
600: "#16a34a",
|
|
85
|
+
700: "#15803d",
|
|
86
|
+
800: "#166534",
|
|
87
|
+
900: "#14532d"
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
var space = {
|
|
91
|
+
0: "0",
|
|
92
|
+
1: "4px",
|
|
93
|
+
2: "8px",
|
|
94
|
+
3: "12px",
|
|
95
|
+
4: "16px",
|
|
96
|
+
5: "20px",
|
|
97
|
+
6: "24px",
|
|
98
|
+
8: "32px",
|
|
99
|
+
10: "40px",
|
|
100
|
+
12: "48px",
|
|
101
|
+
16: "64px"
|
|
102
|
+
};
|
|
103
|
+
var radius = {
|
|
104
|
+
none: "0",
|
|
105
|
+
sm: "4px",
|
|
106
|
+
md: "8px",
|
|
107
|
+
lg: "12px",
|
|
108
|
+
xl: "16px",
|
|
109
|
+
full: "9999px"
|
|
110
|
+
};
|
|
111
|
+
var fontFamily = {
|
|
112
|
+
sans: '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif',
|
|
113
|
+
mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
|
|
114
|
+
};
|
|
115
|
+
var fontSize = {
|
|
116
|
+
xs: "12px",
|
|
117
|
+
sm: "14px",
|
|
118
|
+
md: "16px",
|
|
119
|
+
lg: "18px",
|
|
120
|
+
xl: "20px",
|
|
121
|
+
"2xl": "24px",
|
|
122
|
+
"3xl": "30px",
|
|
123
|
+
"4xl": "36px"
|
|
124
|
+
};
|
|
125
|
+
var fontWeight = {
|
|
126
|
+
regular: "400",
|
|
127
|
+
medium: "500",
|
|
128
|
+
semibold: "600",
|
|
129
|
+
bold: "700"
|
|
130
|
+
};
|
|
131
|
+
var lineHeight = {
|
|
132
|
+
tight: "1.25",
|
|
133
|
+
normal: "1.5",
|
|
134
|
+
relaxed: "1.75"
|
|
135
|
+
};
|
|
136
|
+
var shadow = {
|
|
137
|
+
sm: "0 1px 2px rgba(0, 0, 0, 0.06)",
|
|
138
|
+
md: "0 4px 12px rgba(0, 0, 0, 0.08)",
|
|
139
|
+
lg: "0 12px 32px rgba(0, 0, 0, 0.12)"
|
|
140
|
+
};
|
|
141
|
+
var duration = {
|
|
142
|
+
fast: "120ms",
|
|
143
|
+
normal: "200ms",
|
|
144
|
+
slow: "320ms"
|
|
145
|
+
};
|
|
146
|
+
var zIndex = {
|
|
147
|
+
dropdown: "1000",
|
|
148
|
+
overlay: "1300",
|
|
149
|
+
modal: "1310",
|
|
150
|
+
toast: "1400",
|
|
151
|
+
tooltip: "1500"
|
|
152
|
+
};
|
|
153
|
+
var lightColors = {
|
|
154
|
+
bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: "rgba(0, 0, 0, 0.45)" },
|
|
155
|
+
fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },
|
|
156
|
+
border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },
|
|
157
|
+
primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },
|
|
158
|
+
neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },
|
|
159
|
+
danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },
|
|
160
|
+
success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] }
|
|
161
|
+
};
|
|
162
|
+
var darkColors = {
|
|
163
|
+
bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: "rgba(0, 0, 0, 0.65)" },
|
|
164
|
+
fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },
|
|
165
|
+
border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },
|
|
166
|
+
primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: "rgba(59, 111, 246, 0.16)", subtleHover: "rgba(59, 111, 246, 0.26)", text: palette.blue[300] },
|
|
167
|
+
neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: "rgba(255, 255, 255, 0.08)", subtleHover: "rgba(255, 255, 255, 0.14)", text: palette.gray[100] },
|
|
168
|
+
danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: "rgba(239, 68, 68, 0.16)", subtleHover: "rgba(239, 68, 68, 0.26)", text: palette.red[300] },
|
|
169
|
+
success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: "rgba(34, 197, 94, 0.16)", subtleHover: "rgba(34, 197, 94, 0.26)", text: palette.green[300] }
|
|
170
|
+
};
|
|
171
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
172
|
+
0 && (module.exports = {
|
|
173
|
+
darkColors,
|
|
174
|
+
duration,
|
|
175
|
+
fontFamily,
|
|
176
|
+
fontSize,
|
|
177
|
+
fontWeight,
|
|
178
|
+
lightColors,
|
|
179
|
+
lineHeight,
|
|
180
|
+
palette,
|
|
181
|
+
radius,
|
|
182
|
+
shadow,
|
|
183
|
+
space,
|
|
184
|
+
zIndex
|
|
185
|
+
});
|
|
186
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * BestOW UI 디자인 토큰.\n * 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.\n */\n\nexport const palette = {\n white: '#ffffff',\n black: '#000000',\n gray: {\n 50: '#f8f9fa',\n 100: '#f1f3f5',\n 200: '#e9ecef',\n 300: '#dee2e6',\n 400: '#ced4da',\n 500: '#adb5bd',\n 600: '#868e96',\n 700: '#495057',\n 800: '#343a40',\n 900: '#212529',\n 950: '#16181b',\n },\n blue: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 200: '#bfd3fe',\n 300: '#93b4fd',\n 400: '#6090fa',\n 500: '#3b6ff6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 800: '#1e37af',\n 900: '#1e338a',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n green: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n} as const;\n\nexport const space = {\n 0: '0',\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport const radius = {\n none: '0',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n} as const;\n\nexport const fontFamily = {\n sans: '\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n} as const;\n\nexport const fontSize = {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n '2xl': '24px',\n '3xl': '30px',\n '4xl': '36px',\n} as const;\n\nexport const fontWeight = {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport const lineHeight = {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n} as const;\n\nexport const shadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.06)',\n md: '0 4px 12px rgba(0, 0, 0, 0.08)',\n lg: '0 12px 32px rgba(0, 0, 0, 0.12)',\n} as const;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\nexport const zIndex = {\n dropdown: '1000',\n overlay: '1300',\n modal: '1310',\n toast: '1400',\n tooltip: '1500',\n} as const;\n\n/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */\n/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */\nexport interface SemanticColors {\n bg: { default: string; subtle: string; muted: string; inverse: string; overlay: string };\n fg: { default: string; muted: string; subtle: string; inverse: string };\n border: { default: string; strong: string; focus: string };\n primary: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n neutral: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n danger: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n success: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: 'rgba(0, 0, 0, 0.45)' },\n fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },\n border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },\n neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },\n danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },\n success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] },\n};\n\nexport const darkColors: SemanticColors = {\n bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: 'rgba(0, 0, 0, 0.65)' },\n fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },\n border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: 'rgba(59, 111, 246, 0.16)', subtleHover: 'rgba(59, 111, 246, 0.26)', text: palette.blue[300] },\n neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: 'rgba(255, 255, 255, 0.08)', subtleHover: 'rgba(255, 255, 255, 0.14)', text: palette.gray[100] },\n danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: 'rgba(239, 68, 68, 0.16)', subtleHover: 'rgba(239, 68, 68, 0.26)', text: palette.red[300] },\n success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: 'rgba(34, 197, 94, 0.16)', subtleHover: 'rgba(34, 197, 94, 0.26)', text: palette.green[300] },\n};\n"],"mappings":"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","names":[]}
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BestOW UI 디자인 토큰.
|
|
3
|
+
* 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.
|
|
4
|
+
*/
|
|
5
|
+
declare const palette: {
|
|
6
|
+
readonly white: "#ffffff";
|
|
7
|
+
readonly black: "#000000";
|
|
8
|
+
readonly gray: {
|
|
9
|
+
readonly 50: "#f8f9fa";
|
|
10
|
+
readonly 100: "#f1f3f5";
|
|
11
|
+
readonly 200: "#e9ecef";
|
|
12
|
+
readonly 300: "#dee2e6";
|
|
13
|
+
readonly 400: "#ced4da";
|
|
14
|
+
readonly 500: "#adb5bd";
|
|
15
|
+
readonly 600: "#868e96";
|
|
16
|
+
readonly 700: "#495057";
|
|
17
|
+
readonly 800: "#343a40";
|
|
18
|
+
readonly 900: "#212529";
|
|
19
|
+
readonly 950: "#16181b";
|
|
20
|
+
};
|
|
21
|
+
readonly blue: {
|
|
22
|
+
readonly 50: "#eef4ff";
|
|
23
|
+
readonly 100: "#dbe6fe";
|
|
24
|
+
readonly 200: "#bfd3fe";
|
|
25
|
+
readonly 300: "#93b4fd";
|
|
26
|
+
readonly 400: "#6090fa";
|
|
27
|
+
readonly 500: "#3b6ff6";
|
|
28
|
+
readonly 600: "#2554eb";
|
|
29
|
+
readonly 700: "#1d42d8";
|
|
30
|
+
readonly 800: "#1e37af";
|
|
31
|
+
readonly 900: "#1e338a";
|
|
32
|
+
};
|
|
33
|
+
readonly red: {
|
|
34
|
+
readonly 50: "#fef2f2";
|
|
35
|
+
readonly 100: "#fee2e2";
|
|
36
|
+
readonly 200: "#fecaca";
|
|
37
|
+
readonly 300: "#fca5a5";
|
|
38
|
+
readonly 400: "#f87171";
|
|
39
|
+
readonly 500: "#ef4444";
|
|
40
|
+
readonly 600: "#dc2626";
|
|
41
|
+
readonly 700: "#b91c1c";
|
|
42
|
+
readonly 800: "#991b1b";
|
|
43
|
+
readonly 900: "#7f1d1d";
|
|
44
|
+
};
|
|
45
|
+
readonly green: {
|
|
46
|
+
readonly 50: "#f0fdf4";
|
|
47
|
+
readonly 100: "#dcfce7";
|
|
48
|
+
readonly 200: "#bbf7d0";
|
|
49
|
+
readonly 300: "#86efac";
|
|
50
|
+
readonly 400: "#4ade80";
|
|
51
|
+
readonly 500: "#22c55e";
|
|
52
|
+
readonly 600: "#16a34a";
|
|
53
|
+
readonly 700: "#15803d";
|
|
54
|
+
readonly 800: "#166534";
|
|
55
|
+
readonly 900: "#14532d";
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
declare const space: {
|
|
59
|
+
readonly 0: "0";
|
|
60
|
+
readonly 1: "4px";
|
|
61
|
+
readonly 2: "8px";
|
|
62
|
+
readonly 3: "12px";
|
|
63
|
+
readonly 4: "16px";
|
|
64
|
+
readonly 5: "20px";
|
|
65
|
+
readonly 6: "24px";
|
|
66
|
+
readonly 8: "32px";
|
|
67
|
+
readonly 10: "40px";
|
|
68
|
+
readonly 12: "48px";
|
|
69
|
+
readonly 16: "64px";
|
|
70
|
+
};
|
|
71
|
+
declare const radius: {
|
|
72
|
+
readonly none: "0";
|
|
73
|
+
readonly sm: "4px";
|
|
74
|
+
readonly md: "8px";
|
|
75
|
+
readonly lg: "12px";
|
|
76
|
+
readonly xl: "16px";
|
|
77
|
+
readonly full: "9999px";
|
|
78
|
+
};
|
|
79
|
+
declare const fontFamily: {
|
|
80
|
+
readonly sans: "\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif";
|
|
81
|
+
readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
82
|
+
};
|
|
83
|
+
declare const fontSize: {
|
|
84
|
+
readonly xs: "12px";
|
|
85
|
+
readonly sm: "14px";
|
|
86
|
+
readonly md: "16px";
|
|
87
|
+
readonly lg: "18px";
|
|
88
|
+
readonly xl: "20px";
|
|
89
|
+
readonly '2xl': "24px";
|
|
90
|
+
readonly '3xl': "30px";
|
|
91
|
+
readonly '4xl': "36px";
|
|
92
|
+
};
|
|
93
|
+
declare const fontWeight: {
|
|
94
|
+
readonly regular: "400";
|
|
95
|
+
readonly medium: "500";
|
|
96
|
+
readonly semibold: "600";
|
|
97
|
+
readonly bold: "700";
|
|
98
|
+
};
|
|
99
|
+
declare const lineHeight: {
|
|
100
|
+
readonly tight: "1.25";
|
|
101
|
+
readonly normal: "1.5";
|
|
102
|
+
readonly relaxed: "1.75";
|
|
103
|
+
};
|
|
104
|
+
declare const shadow: {
|
|
105
|
+
readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)";
|
|
106
|
+
readonly md: "0 4px 12px rgba(0, 0, 0, 0.08)";
|
|
107
|
+
readonly lg: "0 12px 32px rgba(0, 0, 0, 0.12)";
|
|
108
|
+
};
|
|
109
|
+
declare const duration: {
|
|
110
|
+
readonly fast: "120ms";
|
|
111
|
+
readonly normal: "200ms";
|
|
112
|
+
readonly slow: "320ms";
|
|
113
|
+
};
|
|
114
|
+
declare const zIndex: {
|
|
115
|
+
readonly dropdown: "1000";
|
|
116
|
+
readonly overlay: "1300";
|
|
117
|
+
readonly modal: "1310";
|
|
118
|
+
readonly toast: "1400";
|
|
119
|
+
readonly tooltip: "1500";
|
|
120
|
+
};
|
|
121
|
+
/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
|
|
122
|
+
/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
|
|
123
|
+
interface SemanticColors {
|
|
124
|
+
bg: {
|
|
125
|
+
default: string;
|
|
126
|
+
subtle: string;
|
|
127
|
+
muted: string;
|
|
128
|
+
inverse: string;
|
|
129
|
+
overlay: string;
|
|
130
|
+
};
|
|
131
|
+
fg: {
|
|
132
|
+
default: string;
|
|
133
|
+
muted: string;
|
|
134
|
+
subtle: string;
|
|
135
|
+
inverse: string;
|
|
136
|
+
};
|
|
137
|
+
border: {
|
|
138
|
+
default: string;
|
|
139
|
+
strong: string;
|
|
140
|
+
focus: string;
|
|
141
|
+
};
|
|
142
|
+
primary: {
|
|
143
|
+
solid: string;
|
|
144
|
+
solidHover: string;
|
|
145
|
+
contrast: string;
|
|
146
|
+
subtle: string;
|
|
147
|
+
subtleHover: string;
|
|
148
|
+
text: string;
|
|
149
|
+
};
|
|
150
|
+
neutral: {
|
|
151
|
+
solid: string;
|
|
152
|
+
solidHover: string;
|
|
153
|
+
contrast: string;
|
|
154
|
+
subtle: string;
|
|
155
|
+
subtleHover: string;
|
|
156
|
+
text: string;
|
|
157
|
+
};
|
|
158
|
+
danger: {
|
|
159
|
+
solid: string;
|
|
160
|
+
solidHover: string;
|
|
161
|
+
contrast: string;
|
|
162
|
+
subtle: string;
|
|
163
|
+
subtleHover: string;
|
|
164
|
+
text: string;
|
|
165
|
+
};
|
|
166
|
+
success: {
|
|
167
|
+
solid: string;
|
|
168
|
+
solidHover: string;
|
|
169
|
+
contrast: string;
|
|
170
|
+
subtle: string;
|
|
171
|
+
subtleHover: string;
|
|
172
|
+
text: string;
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
declare const lightColors: SemanticColors;
|
|
176
|
+
declare const darkColors: SemanticColors;
|
|
177
|
+
|
|
178
|
+
export { type SemanticColors, darkColors, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* BestOW UI 디자인 토큰.
|
|
3
|
+
* 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.
|
|
4
|
+
*/
|
|
5
|
+
declare const palette: {
|
|
6
|
+
readonly white: "#ffffff";
|
|
7
|
+
readonly black: "#000000";
|
|
8
|
+
readonly gray: {
|
|
9
|
+
readonly 50: "#f8f9fa";
|
|
10
|
+
readonly 100: "#f1f3f5";
|
|
11
|
+
readonly 200: "#e9ecef";
|
|
12
|
+
readonly 300: "#dee2e6";
|
|
13
|
+
readonly 400: "#ced4da";
|
|
14
|
+
readonly 500: "#adb5bd";
|
|
15
|
+
readonly 600: "#868e96";
|
|
16
|
+
readonly 700: "#495057";
|
|
17
|
+
readonly 800: "#343a40";
|
|
18
|
+
readonly 900: "#212529";
|
|
19
|
+
readonly 950: "#16181b";
|
|
20
|
+
};
|
|
21
|
+
readonly blue: {
|
|
22
|
+
readonly 50: "#eef4ff";
|
|
23
|
+
readonly 100: "#dbe6fe";
|
|
24
|
+
readonly 200: "#bfd3fe";
|
|
25
|
+
readonly 300: "#93b4fd";
|
|
26
|
+
readonly 400: "#6090fa";
|
|
27
|
+
readonly 500: "#3b6ff6";
|
|
28
|
+
readonly 600: "#2554eb";
|
|
29
|
+
readonly 700: "#1d42d8";
|
|
30
|
+
readonly 800: "#1e37af";
|
|
31
|
+
readonly 900: "#1e338a";
|
|
32
|
+
};
|
|
33
|
+
readonly red: {
|
|
34
|
+
readonly 50: "#fef2f2";
|
|
35
|
+
readonly 100: "#fee2e2";
|
|
36
|
+
readonly 200: "#fecaca";
|
|
37
|
+
readonly 300: "#fca5a5";
|
|
38
|
+
readonly 400: "#f87171";
|
|
39
|
+
readonly 500: "#ef4444";
|
|
40
|
+
readonly 600: "#dc2626";
|
|
41
|
+
readonly 700: "#b91c1c";
|
|
42
|
+
readonly 800: "#991b1b";
|
|
43
|
+
readonly 900: "#7f1d1d";
|
|
44
|
+
};
|
|
45
|
+
readonly green: {
|
|
46
|
+
readonly 50: "#f0fdf4";
|
|
47
|
+
readonly 100: "#dcfce7";
|
|
48
|
+
readonly 200: "#bbf7d0";
|
|
49
|
+
readonly 300: "#86efac";
|
|
50
|
+
readonly 400: "#4ade80";
|
|
51
|
+
readonly 500: "#22c55e";
|
|
52
|
+
readonly 600: "#16a34a";
|
|
53
|
+
readonly 700: "#15803d";
|
|
54
|
+
readonly 800: "#166534";
|
|
55
|
+
readonly 900: "#14532d";
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
declare const space: {
|
|
59
|
+
readonly 0: "0";
|
|
60
|
+
readonly 1: "4px";
|
|
61
|
+
readonly 2: "8px";
|
|
62
|
+
readonly 3: "12px";
|
|
63
|
+
readonly 4: "16px";
|
|
64
|
+
readonly 5: "20px";
|
|
65
|
+
readonly 6: "24px";
|
|
66
|
+
readonly 8: "32px";
|
|
67
|
+
readonly 10: "40px";
|
|
68
|
+
readonly 12: "48px";
|
|
69
|
+
readonly 16: "64px";
|
|
70
|
+
};
|
|
71
|
+
declare const radius: {
|
|
72
|
+
readonly none: "0";
|
|
73
|
+
readonly sm: "4px";
|
|
74
|
+
readonly md: "8px";
|
|
75
|
+
readonly lg: "12px";
|
|
76
|
+
readonly xl: "16px";
|
|
77
|
+
readonly full: "9999px";
|
|
78
|
+
};
|
|
79
|
+
declare const fontFamily: {
|
|
80
|
+
readonly sans: "\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif";
|
|
81
|
+
readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
82
|
+
};
|
|
83
|
+
declare const fontSize: {
|
|
84
|
+
readonly xs: "12px";
|
|
85
|
+
readonly sm: "14px";
|
|
86
|
+
readonly md: "16px";
|
|
87
|
+
readonly lg: "18px";
|
|
88
|
+
readonly xl: "20px";
|
|
89
|
+
readonly '2xl': "24px";
|
|
90
|
+
readonly '3xl': "30px";
|
|
91
|
+
readonly '4xl': "36px";
|
|
92
|
+
};
|
|
93
|
+
declare const fontWeight: {
|
|
94
|
+
readonly regular: "400";
|
|
95
|
+
readonly medium: "500";
|
|
96
|
+
readonly semibold: "600";
|
|
97
|
+
readonly bold: "700";
|
|
98
|
+
};
|
|
99
|
+
declare const lineHeight: {
|
|
100
|
+
readonly tight: "1.25";
|
|
101
|
+
readonly normal: "1.5";
|
|
102
|
+
readonly relaxed: "1.75";
|
|
103
|
+
};
|
|
104
|
+
declare const shadow: {
|
|
105
|
+
readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)";
|
|
106
|
+
readonly md: "0 4px 12px rgba(0, 0, 0, 0.08)";
|
|
107
|
+
readonly lg: "0 12px 32px rgba(0, 0, 0, 0.12)";
|
|
108
|
+
};
|
|
109
|
+
declare const duration: {
|
|
110
|
+
readonly fast: "120ms";
|
|
111
|
+
readonly normal: "200ms";
|
|
112
|
+
readonly slow: "320ms";
|
|
113
|
+
};
|
|
114
|
+
declare const zIndex: {
|
|
115
|
+
readonly dropdown: "1000";
|
|
116
|
+
readonly overlay: "1300";
|
|
117
|
+
readonly modal: "1310";
|
|
118
|
+
readonly toast: "1400";
|
|
119
|
+
readonly tooltip: "1500";
|
|
120
|
+
};
|
|
121
|
+
/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */
|
|
122
|
+
/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */
|
|
123
|
+
interface SemanticColors {
|
|
124
|
+
bg: {
|
|
125
|
+
default: string;
|
|
126
|
+
subtle: string;
|
|
127
|
+
muted: string;
|
|
128
|
+
inverse: string;
|
|
129
|
+
overlay: string;
|
|
130
|
+
};
|
|
131
|
+
fg: {
|
|
132
|
+
default: string;
|
|
133
|
+
muted: string;
|
|
134
|
+
subtle: string;
|
|
135
|
+
inverse: string;
|
|
136
|
+
};
|
|
137
|
+
border: {
|
|
138
|
+
default: string;
|
|
139
|
+
strong: string;
|
|
140
|
+
focus: string;
|
|
141
|
+
};
|
|
142
|
+
primary: {
|
|
143
|
+
solid: string;
|
|
144
|
+
solidHover: string;
|
|
145
|
+
contrast: string;
|
|
146
|
+
subtle: string;
|
|
147
|
+
subtleHover: string;
|
|
148
|
+
text: string;
|
|
149
|
+
};
|
|
150
|
+
neutral: {
|
|
151
|
+
solid: string;
|
|
152
|
+
solidHover: string;
|
|
153
|
+
contrast: string;
|
|
154
|
+
subtle: string;
|
|
155
|
+
subtleHover: string;
|
|
156
|
+
text: string;
|
|
157
|
+
};
|
|
158
|
+
danger: {
|
|
159
|
+
solid: string;
|
|
160
|
+
solidHover: string;
|
|
161
|
+
contrast: string;
|
|
162
|
+
subtle: string;
|
|
163
|
+
subtleHover: string;
|
|
164
|
+
text: string;
|
|
165
|
+
};
|
|
166
|
+
success: {
|
|
167
|
+
solid: string;
|
|
168
|
+
solidHover: string;
|
|
169
|
+
contrast: string;
|
|
170
|
+
subtle: string;
|
|
171
|
+
subtleHover: string;
|
|
172
|
+
text: string;
|
|
173
|
+
};
|
|
174
|
+
}
|
|
175
|
+
declare const lightColors: SemanticColors;
|
|
176
|
+
declare const darkColors: SemanticColors;
|
|
177
|
+
|
|
178
|
+
export { type SemanticColors, darkColors, duration, fontFamily, fontSize, fontWeight, lightColors, lineHeight, palette, radius, shadow, space, zIndex };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
var palette = {
|
|
3
|
+
white: "#ffffff",
|
|
4
|
+
black: "#000000",
|
|
5
|
+
gray: {
|
|
6
|
+
50: "#f8f9fa",
|
|
7
|
+
100: "#f1f3f5",
|
|
8
|
+
200: "#e9ecef",
|
|
9
|
+
300: "#dee2e6",
|
|
10
|
+
400: "#ced4da",
|
|
11
|
+
500: "#adb5bd",
|
|
12
|
+
600: "#868e96",
|
|
13
|
+
700: "#495057",
|
|
14
|
+
800: "#343a40",
|
|
15
|
+
900: "#212529",
|
|
16
|
+
950: "#16181b"
|
|
17
|
+
},
|
|
18
|
+
blue: {
|
|
19
|
+
50: "#eef4ff",
|
|
20
|
+
100: "#dbe6fe",
|
|
21
|
+
200: "#bfd3fe",
|
|
22
|
+
300: "#93b4fd",
|
|
23
|
+
400: "#6090fa",
|
|
24
|
+
500: "#3b6ff6",
|
|
25
|
+
600: "#2554eb",
|
|
26
|
+
700: "#1d42d8",
|
|
27
|
+
800: "#1e37af",
|
|
28
|
+
900: "#1e338a"
|
|
29
|
+
},
|
|
30
|
+
red: {
|
|
31
|
+
50: "#fef2f2",
|
|
32
|
+
100: "#fee2e2",
|
|
33
|
+
200: "#fecaca",
|
|
34
|
+
300: "#fca5a5",
|
|
35
|
+
400: "#f87171",
|
|
36
|
+
500: "#ef4444",
|
|
37
|
+
600: "#dc2626",
|
|
38
|
+
700: "#b91c1c",
|
|
39
|
+
800: "#991b1b",
|
|
40
|
+
900: "#7f1d1d"
|
|
41
|
+
},
|
|
42
|
+
green: {
|
|
43
|
+
50: "#f0fdf4",
|
|
44
|
+
100: "#dcfce7",
|
|
45
|
+
200: "#bbf7d0",
|
|
46
|
+
300: "#86efac",
|
|
47
|
+
400: "#4ade80",
|
|
48
|
+
500: "#22c55e",
|
|
49
|
+
600: "#16a34a",
|
|
50
|
+
700: "#15803d",
|
|
51
|
+
800: "#166534",
|
|
52
|
+
900: "#14532d"
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
var space = {
|
|
56
|
+
0: "0",
|
|
57
|
+
1: "4px",
|
|
58
|
+
2: "8px",
|
|
59
|
+
3: "12px",
|
|
60
|
+
4: "16px",
|
|
61
|
+
5: "20px",
|
|
62
|
+
6: "24px",
|
|
63
|
+
8: "32px",
|
|
64
|
+
10: "40px",
|
|
65
|
+
12: "48px",
|
|
66
|
+
16: "64px"
|
|
67
|
+
};
|
|
68
|
+
var radius = {
|
|
69
|
+
none: "0",
|
|
70
|
+
sm: "4px",
|
|
71
|
+
md: "8px",
|
|
72
|
+
lg: "12px",
|
|
73
|
+
xl: "16px",
|
|
74
|
+
full: "9999px"
|
|
75
|
+
};
|
|
76
|
+
var fontFamily = {
|
|
77
|
+
sans: '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif',
|
|
78
|
+
mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
|
|
79
|
+
};
|
|
80
|
+
var fontSize = {
|
|
81
|
+
xs: "12px",
|
|
82
|
+
sm: "14px",
|
|
83
|
+
md: "16px",
|
|
84
|
+
lg: "18px",
|
|
85
|
+
xl: "20px",
|
|
86
|
+
"2xl": "24px",
|
|
87
|
+
"3xl": "30px",
|
|
88
|
+
"4xl": "36px"
|
|
89
|
+
};
|
|
90
|
+
var fontWeight = {
|
|
91
|
+
regular: "400",
|
|
92
|
+
medium: "500",
|
|
93
|
+
semibold: "600",
|
|
94
|
+
bold: "700"
|
|
95
|
+
};
|
|
96
|
+
var lineHeight = {
|
|
97
|
+
tight: "1.25",
|
|
98
|
+
normal: "1.5",
|
|
99
|
+
relaxed: "1.75"
|
|
100
|
+
};
|
|
101
|
+
var shadow = {
|
|
102
|
+
sm: "0 1px 2px rgba(0, 0, 0, 0.06)",
|
|
103
|
+
md: "0 4px 12px rgba(0, 0, 0, 0.08)",
|
|
104
|
+
lg: "0 12px 32px rgba(0, 0, 0, 0.12)"
|
|
105
|
+
};
|
|
106
|
+
var duration = {
|
|
107
|
+
fast: "120ms",
|
|
108
|
+
normal: "200ms",
|
|
109
|
+
slow: "320ms"
|
|
110
|
+
};
|
|
111
|
+
var zIndex = {
|
|
112
|
+
dropdown: "1000",
|
|
113
|
+
overlay: "1300",
|
|
114
|
+
modal: "1310",
|
|
115
|
+
toast: "1400",
|
|
116
|
+
tooltip: "1500"
|
|
117
|
+
};
|
|
118
|
+
var lightColors = {
|
|
119
|
+
bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: "rgba(0, 0, 0, 0.45)" },
|
|
120
|
+
fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },
|
|
121
|
+
border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },
|
|
122
|
+
primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },
|
|
123
|
+
neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },
|
|
124
|
+
danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },
|
|
125
|
+
success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] }
|
|
126
|
+
};
|
|
127
|
+
var darkColors = {
|
|
128
|
+
bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: "rgba(0, 0, 0, 0.65)" },
|
|
129
|
+
fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },
|
|
130
|
+
border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },
|
|
131
|
+
primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: "rgba(59, 111, 246, 0.16)", subtleHover: "rgba(59, 111, 246, 0.26)", text: palette.blue[300] },
|
|
132
|
+
neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: "rgba(255, 255, 255, 0.08)", subtleHover: "rgba(255, 255, 255, 0.14)", text: palette.gray[100] },
|
|
133
|
+
danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: "rgba(239, 68, 68, 0.16)", subtleHover: "rgba(239, 68, 68, 0.26)", text: palette.red[300] },
|
|
134
|
+
success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: "rgba(34, 197, 94, 0.16)", subtleHover: "rgba(34, 197, 94, 0.26)", text: palette.green[300] }
|
|
135
|
+
};
|
|
136
|
+
export {
|
|
137
|
+
darkColors,
|
|
138
|
+
duration,
|
|
139
|
+
fontFamily,
|
|
140
|
+
fontSize,
|
|
141
|
+
fontWeight,
|
|
142
|
+
lightColors,
|
|
143
|
+
lineHeight,
|
|
144
|
+
palette,
|
|
145
|
+
radius,
|
|
146
|
+
shadow,
|
|
147
|
+
space,
|
|
148
|
+
zIndex
|
|
149
|
+
};
|
|
150
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * BestOW UI 디자인 토큰.\n * 플랫폼에 독립적인 원시 값만 정의한다. 컴포넌트는 @bestow-ui/react 의 테마(vars)를 통해 참조한다.\n */\n\nexport const palette = {\n white: '#ffffff',\n black: '#000000',\n gray: {\n 50: '#f8f9fa',\n 100: '#f1f3f5',\n 200: '#e9ecef',\n 300: '#dee2e6',\n 400: '#ced4da',\n 500: '#adb5bd',\n 600: '#868e96',\n 700: '#495057',\n 800: '#343a40',\n 900: '#212529',\n 950: '#16181b',\n },\n blue: {\n 50: '#eef4ff',\n 100: '#dbe6fe',\n 200: '#bfd3fe',\n 300: '#93b4fd',\n 400: '#6090fa',\n 500: '#3b6ff6',\n 600: '#2554eb',\n 700: '#1d42d8',\n 800: '#1e37af',\n 900: '#1e338a',\n },\n red: {\n 50: '#fef2f2',\n 100: '#fee2e2',\n 200: '#fecaca',\n 300: '#fca5a5',\n 400: '#f87171',\n 500: '#ef4444',\n 600: '#dc2626',\n 700: '#b91c1c',\n 800: '#991b1b',\n 900: '#7f1d1d',\n },\n green: {\n 50: '#f0fdf4',\n 100: '#dcfce7',\n 200: '#bbf7d0',\n 300: '#86efac',\n 400: '#4ade80',\n 500: '#22c55e',\n 600: '#16a34a',\n 700: '#15803d',\n 800: '#166534',\n 900: '#14532d',\n },\n} as const;\n\nexport const space = {\n 0: '0',\n 1: '4px',\n 2: '8px',\n 3: '12px',\n 4: '16px',\n 5: '20px',\n 6: '24px',\n 8: '32px',\n 10: '40px',\n 12: '48px',\n 16: '64px',\n} as const;\n\nexport const radius = {\n none: '0',\n sm: '4px',\n md: '8px',\n lg: '12px',\n xl: '16px',\n full: '9999px',\n} as const;\n\nexport const fontFamily = {\n sans: '\"Pretendard Variable\", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, \"Apple SD Gothic Neo\", \"Noto Sans KR\", sans-serif',\n mono: '\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace',\n} as const;\n\nexport const fontSize = {\n xs: '12px',\n sm: '14px',\n md: '16px',\n lg: '18px',\n xl: '20px',\n '2xl': '24px',\n '3xl': '30px',\n '4xl': '36px',\n} as const;\n\nexport const fontWeight = {\n regular: '400',\n medium: '500',\n semibold: '600',\n bold: '700',\n} as const;\n\nexport const lineHeight = {\n tight: '1.25',\n normal: '1.5',\n relaxed: '1.75',\n} as const;\n\nexport const shadow = {\n sm: '0 1px 2px rgba(0, 0, 0, 0.06)',\n md: '0 4px 12px rgba(0, 0, 0, 0.08)',\n lg: '0 12px 32px rgba(0, 0, 0, 0.12)',\n} as const;\n\nexport const duration = {\n fast: '120ms',\n normal: '200ms',\n slow: '320ms',\n} as const;\n\nexport const zIndex = {\n dropdown: '1000',\n overlay: '1300',\n modal: '1310',\n toast: '1400',\n tooltip: '1500',\n} as const;\n\n/** 의미 기반(semantic) 색상. 라이트/다크 테마가 같은 키를 가져야 한다. */\n/** solid 배경 위 글자색은 각 그룹의 contrast 를 사용한다. */\nexport interface SemanticColors {\n bg: { default: string; subtle: string; muted: string; inverse: string; overlay: string };\n fg: { default: string; muted: string; subtle: string; inverse: string };\n border: { default: string; strong: string; focus: string };\n primary: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n neutral: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n danger: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n success: { solid: string; solidHover: string; contrast: string; subtle: string; subtleHover: string; text: string };\n}\n\nexport const lightColors: SemanticColors = {\n bg: { default: palette.white, subtle: palette.gray[50], muted: palette.gray[100], inverse: palette.gray[900], overlay: 'rgba(0, 0, 0, 0.45)' },\n fg: { default: palette.gray[900], muted: palette.gray[700], subtle: palette.gray[600], inverse: palette.white },\n border: { default: palette.gray[300], strong: palette.gray[500], focus: palette.blue[500] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[700], contrast: palette.white, subtle: palette.blue[50], subtleHover: palette.blue[100], text: palette.blue[700] },\n neutral: { solid: palette.gray[800], solidHover: palette.gray[900], contrast: palette.white, subtle: palette.gray[100], subtleHover: palette.gray[200], text: palette.gray[800] },\n danger: { solid: palette.red[600], solidHover: palette.red[700], contrast: palette.white, subtle: palette.red[50], subtleHover: palette.red[100], text: palette.red[700] },\n success: { solid: palette.green[700], solidHover: palette.green[800], contrast: palette.white, subtle: palette.green[50], subtleHover: palette.green[100], text: palette.green[700] },\n};\n\nexport const darkColors: SemanticColors = {\n bg: { default: palette.gray[950], subtle: palette.gray[900], muted: palette.gray[800], inverse: palette.gray[50], overlay: 'rgba(0, 0, 0, 0.65)' },\n fg: { default: palette.gray[50], muted: palette.gray[300], subtle: palette.gray[500], inverse: palette.gray[900] },\n border: { default: palette.gray[700], strong: palette.gray[500], focus: palette.blue[400] },\n primary: { solid: palette.blue[600], solidHover: palette.blue[500], contrast: palette.white, subtle: 'rgba(59, 111, 246, 0.16)', subtleHover: 'rgba(59, 111, 246, 0.26)', text: palette.blue[300] },\n neutral: { solid: palette.gray[200], solidHover: palette.gray[100], contrast: palette.gray[900], subtle: 'rgba(255, 255, 255, 0.08)', subtleHover: 'rgba(255, 255, 255, 0.14)', text: palette.gray[100] },\n danger: { solid: palette.red[600], solidHover: palette.red[500], contrast: palette.white, subtle: 'rgba(239, 68, 68, 0.16)', subtleHover: 'rgba(239, 68, 68, 0.26)', text: palette.red[300] },\n success: { solid: palette.green[700], solidHover: palette.green[600], contrast: palette.white, subtle: 'rgba(34, 197, 94, 0.16)', subtleHover: 'rgba(34, 197, 94, 0.26)', text: palette.green[300] },\n};\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,39 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bestow-ui/tokens",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "BestOW UI design tokens",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/Dev-BestOW/BestOW-UI.git",
|
|
9
|
+
"directory": "packages/tokens"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://dev-bestow.github.io/BestOW-UI/",
|
|
12
|
+
"publishConfig": {
|
|
13
|
+
"access": "public"
|
|
14
|
+
},
|
|
15
|
+
"type": "module",
|
|
16
|
+
"sideEffects": false,
|
|
17
|
+
"main": "./dist/index.cjs",
|
|
18
|
+
"module": "./dist/index.js",
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"import": "./dist/index.js",
|
|
24
|
+
"require": "./dist/index.cjs"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist"
|
|
29
|
+
],
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"tsup": "^8.5.1",
|
|
32
|
+
"typescript": "~5.9.3"
|
|
33
|
+
},
|
|
34
|
+
"scripts": {
|
|
35
|
+
"build": "tsup",
|
|
36
|
+
"dev": "tsup --watch",
|
|
37
|
+
"typecheck": "tsc --noEmit"
|
|
38
|
+
}
|
|
6
39
|
}
|
package/README.md
DELETED