@askewly/design 0.2.0 → 0.4.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/data/DESIGN.md +71 -0
- package/data/askewly.css +25 -0
- package/data/recipes.json +1 -1
- package/data/terms.json +1 -1
- package/data/tokens.css +41 -0
- package/data/tokens.json +1 -1
- package/dist/index.js +33 -3
- package/dist/kickstart.js +410 -0
- package/dist/typography.js +97 -24
- package/dist/verify.js +33 -3
- package/package.json +1 -1
package/data/DESIGN.md
CHANGED
|
@@ -26,8 +26,36 @@ tokens:
|
|
|
26
26
|
lavender: { value: {"colorSpace":"srgb","components":[0.698039,0.596078,0.862745],"hex":"#B298DC"}, type: color }
|
|
27
27
|
sky: { value: {"colorSpace":"srgb","components":[0.721569,0.815686,0.921569],"hex":"#B8D0EB"}, type: color }
|
|
28
28
|
mint: { value: {"colorSpace":"srgb","components":[0.72549,0.980392,0.972549],"hex":"#B9FAF8"}, type: color }
|
|
29
|
+
violet-deep: { value: {"colorSpace":"srgb","components":[0.372549,0.133333,0.658824],"hex":"#5F22A8"}, type: color }
|
|
29
30
|
red:
|
|
30
31
|
"9": { value: {"colorSpace":"oklch","components":[0.58,0.22,27]}, type: color }
|
|
32
|
+
indigo:
|
|
33
|
+
"50": { value: {"colorSpace":"oklch","components":[0.962,0.018,272.314]}, type: color }
|
|
34
|
+
"300": { value: {"colorSpace":"oklch","components":[0.785,0.115,274.713]}, type: color }
|
|
35
|
+
"400": { value: {"colorSpace":"oklch","components":[0.673,0.182,276.935]}, type: color }
|
|
36
|
+
"500": { value: {"colorSpace":"oklch","components":[0.585,0.233,277.117]}, type: color }
|
|
37
|
+
"600": { value: {"colorSpace":"oklch","components":[0.511,0.262,276.966]}, type: color }
|
|
38
|
+
"700": { value: {"colorSpace":"oklch","components":[0.457,0.24,277.023]}, type: color }
|
|
39
|
+
"950": { value: {"colorSpace":"oklch","components":[0.257,0.09,281.288]}, type: color }
|
|
40
|
+
skyx:
|
|
41
|
+
"100": { value: {"colorSpace":"oklch","components":[0.951,0.026,236.824]}, type: color }
|
|
42
|
+
"300": { value: {"colorSpace":"oklch","components":[0.828,0.111,230.318]}, type: color }
|
|
43
|
+
"400": { value: {"colorSpace":"oklch","components":[0.746,0.16,232.661]}, type: color }
|
|
44
|
+
"500": { value: {"colorSpace":"oklch","components":[0.685,0.169,237.323]}, type: color }
|
|
45
|
+
"600": { value: {"colorSpace":"oklch","components":[0.588,0.158,241.966]}, type: color }
|
|
46
|
+
"700": { value: {"colorSpace":"oklch","components":[0.5,0.134,242.749]}, type: color }
|
|
47
|
+
"950": { value: {"colorSpace":"oklch","components":[0.293,0.066,243.157]}, type: color }
|
|
48
|
+
emerald:
|
|
49
|
+
"50": { value: {"colorSpace":"oklch","components":[0.979,0.021,166.113]}, type: color }
|
|
50
|
+
"300": { value: {"colorSpace":"oklch","components":[0.845,0.143,164.978]}, type: color }
|
|
51
|
+
"700": { value: {"colorSpace":"oklch","components":[0.508,0.118,165.612]}, type: color }
|
|
52
|
+
"950": { value: {"colorSpace":"oklch","components":[0.262,0.051,172.552]}, type: color }
|
|
53
|
+
rose:
|
|
54
|
+
"100": { value: {"colorSpace":"oklch","components":[0.941,0.03,12.58]}, type: color }
|
|
55
|
+
"400": { value: {"colorSpace":"oklch","components":[0.712,0.194,13.428]}, type: color }
|
|
56
|
+
"500": { value: {"colorSpace":"oklch","components":[0.645,0.246,16.439]}, type: color }
|
|
57
|
+
"600": { value: {"colorSpace":"oklch","components":[0.586,0.253,17.585]}, type: color }
|
|
58
|
+
"950": { value: {"colorSpace":"oklch","components":[0.271,0.105,12.094]}, type: color }
|
|
31
59
|
semantic:
|
|
32
60
|
surface:
|
|
33
61
|
base: { value: "{color.primitive.gray.1}", type: color }
|
|
@@ -41,10 +69,30 @@ tokens:
|
|
|
41
69
|
muted: { value: "{color.primitive.gray.9}", type: color }
|
|
42
70
|
secondary: { value: "{color.primitive.gray.11}", type: color }
|
|
43
71
|
on-accent: { value: "{color.primitive.gray.1}", type: color }
|
|
72
|
+
on-destructive: { value: "{color.primitive.white}", type: color }
|
|
44
73
|
action:
|
|
45
74
|
primary: { value: "{color.primitive.askewly.violet}", type: color }
|
|
75
|
+
primary-hover: { value: "{color.primitive.askewly.violet-deep}", type: color }
|
|
46
76
|
secondary: { value: "{color.primitive.askewly.orchid}", type: color }
|
|
47
77
|
destructive: { value: "{color.primitive.red.9}", type: color }
|
|
78
|
+
emphasis:
|
|
79
|
+
surface: { value: "{color.primitive.indigo.50}", type: color }
|
|
80
|
+
foreground: { value: "{color.primitive.indigo.700}", type: color }
|
|
81
|
+
solid: { value: "{color.primitive.indigo.600}", type: color }
|
|
82
|
+
solid-hover: { value: "{color.primitive.indigo.500}", type: color }
|
|
83
|
+
ring: { value: "{color.primitive.indigo.500}", type: color }
|
|
84
|
+
on-solid: { value: "{color.primitive.white}", type: color }
|
|
85
|
+
status:
|
|
86
|
+
info-surface: { value: "{color.primitive.skyx.100}", type: color }
|
|
87
|
+
info-foreground: { value: "{color.primitive.skyx.700}", type: color }
|
|
88
|
+
info-link: { value: "{color.primitive.skyx.500}", type: color }
|
|
89
|
+
info-link-hover: { value: "{color.primitive.skyx.600}", type: color }
|
|
90
|
+
success-surface: { value: "{color.primitive.emerald.50}", type: color }
|
|
91
|
+
success-foreground: { value: "{color.primitive.emerald.700}", type: color }
|
|
92
|
+
danger-surface: { value: "{color.primitive.rose.100}", type: color }
|
|
93
|
+
danger-foreground: { value: "{color.primitive.rose.600}", type: color }
|
|
94
|
+
danger-solid: { value: "{color.primitive.rose.600}", type: color }
|
|
95
|
+
danger-solid-hover: { value: "{color.primitive.rose.500}", type: color }
|
|
48
96
|
accent:
|
|
49
97
|
base: { value: "{color.primitive.askewly.mint}", type: color }
|
|
50
98
|
foreground: { value: "{color.primitive.gray.12}", type: color }
|
|
@@ -78,11 +126,16 @@ tokens:
|
|
|
78
126
|
sans: { value: "Geist, Noto Sans KR, ui-sans-serif, system-ui, sans-serif", type: fontFamily }
|
|
79
127
|
mono: { value: "Geist Mono, ui-monospace, monospace", type: fontFamily }
|
|
80
128
|
scale:
|
|
129
|
+
2xs: { value: "0.625rem", type: dimension }
|
|
130
|
+
xs: { value: "0.75rem", type: dimension }
|
|
81
131
|
sm: { value: "14px", type: dimension }
|
|
82
132
|
base: { value: "16px", type: dimension }
|
|
83
133
|
lg: { value: "20px", type: dimension }
|
|
84
134
|
xl: { value: "28px", type: dimension }
|
|
85
135
|
2xl: { value: "40px", type: dimension }
|
|
136
|
+
3xl: { value: "1.875rem", type: dimension }
|
|
137
|
+
5xl: { value: "3rem", type: dimension }
|
|
138
|
+
7xl: { value: "4.5rem", type: dimension }
|
|
86
139
|
weight:
|
|
87
140
|
regular: { value: 400, type: fontWeight }
|
|
88
141
|
medium: { value: 500, type: fontWeight }
|
|
@@ -100,9 +153,27 @@ themes:
|
|
|
100
153
|
color.semantic.text.muted: { value: "{color.primitive.gray.7}", type: color }
|
|
101
154
|
color.semantic.text.secondary: { value: "{color.primitive.gray.3}", type: color }
|
|
102
155
|
color.semantic.text.on-accent: { value: "{color.primitive.gray.12}", type: color }
|
|
156
|
+
color.semantic.text.on-destructive: { value: "{color.primitive.white}", type: color }
|
|
103
157
|
color.semantic.action.primary: { value: "{color.primitive.gray.1}", type: color }
|
|
158
|
+
color.semantic.action.primary-hover: { value: "{color.primitive.askewly.orchid}", type: color }
|
|
104
159
|
color.semantic.action.secondary: { value: "{color.primitive.askewly.mint}", type: color }
|
|
105
160
|
color.semantic.action.destructive: { value: "{color.primitive.red.9}", type: color }
|
|
161
|
+
color.semantic.emphasis.surface: { value: "{color.primitive.indigo.950}", type: color }
|
|
162
|
+
color.semantic.emphasis.foreground: { value: "{color.primitive.indigo.300}", type: color }
|
|
163
|
+
color.semantic.emphasis.solid: { value: "{color.primitive.indigo.500}", type: color }
|
|
164
|
+
color.semantic.emphasis.solid-hover: { value: "{color.primitive.indigo.400}", type: color }
|
|
165
|
+
color.semantic.emphasis.ring: { value: "{color.primitive.indigo.400}", type: color }
|
|
166
|
+
color.semantic.emphasis.on-solid: { value: "{color.primitive.white}", type: color }
|
|
167
|
+
color.semantic.status.info-surface: { value: "{color.primitive.skyx.950}", type: color }
|
|
168
|
+
color.semantic.status.info-foreground: { value: "{color.primitive.skyx.300}", type: color }
|
|
169
|
+
color.semantic.status.info-link: { value: "{color.primitive.skyx.400}", type: color }
|
|
170
|
+
color.semantic.status.info-link-hover: { value: "{color.primitive.skyx.300}", type: color }
|
|
171
|
+
color.semantic.status.success-surface: { value: "{color.primitive.emerald.950}", type: color }
|
|
172
|
+
color.semantic.status.success-foreground: { value: "{color.primitive.emerald.300}", type: color }
|
|
173
|
+
color.semantic.status.danger-surface: { value: "{color.primitive.rose.950}", type: color }
|
|
174
|
+
color.semantic.status.danger-foreground: { value: "{color.primitive.rose.400}", type: color }
|
|
175
|
+
color.semantic.status.danger-solid: { value: "{color.primitive.rose.600}", type: color }
|
|
176
|
+
color.semantic.status.danger-solid-hover: { value: "{color.primitive.rose.500}", type: color }
|
|
106
177
|
color.semantic.accent.base: { value: "{color.primitive.gray.10}", type: color }
|
|
107
178
|
color.semantic.accent.foreground: { value: "{color.primitive.gray.1}", type: color }
|
|
108
179
|
color.semantic.border.default: { value: "{color.primitive.gray.10}", type: color }
|
package/data/askewly.css
CHANGED
|
@@ -8,6 +8,13 @@
|
|
|
8
8
|
@theme inline {
|
|
9
9
|
--font-sans: Geist, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
|
|
10
10
|
--font-mono: "Geist Mono", ui-monospace, monospace;
|
|
11
|
+
/* 타이포 스케일 SSOT 경유 (M6) — 값이 Tailwind 기본값과 동일한 단계만 배선(렌더 무손실).
|
|
12
|
+
lg(20)·2xl(40)은 Tailwind 동명 기본값과 달라 배선하지 않는다. 2xs 는 신설 유틸(라인하이트 쌍 없음 — text-[10px] 관례와 동일). */
|
|
13
|
+
--text-2xs: var(--font-size-2xs);
|
|
14
|
+
--text-xs: var(--font-size-xs);
|
|
15
|
+
--text-3xl: var(--font-size-3xl);
|
|
16
|
+
--text-5xl: var(--font-size-5xl);
|
|
17
|
+
--text-7xl: var(--font-size-7xl);
|
|
11
18
|
--color-background: var(--background);
|
|
12
19
|
--color-foreground: var(--foreground);
|
|
13
20
|
--color-card: var(--card);
|
|
@@ -23,9 +30,27 @@
|
|
|
23
30
|
--color-accent: var(--accent);
|
|
24
31
|
--color-accent-foreground: var(--accent-foreground);
|
|
25
32
|
--color-destructive: var(--destructive);
|
|
33
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
26
34
|
--color-border: var(--border);
|
|
27
35
|
--color-input: var(--input);
|
|
28
36
|
--color-ring: var(--ring);
|
|
37
|
+
--color-primary-hover: var(--primary-hover);
|
|
38
|
+
--color-emphasis-surface: var(--emphasis-surface);
|
|
39
|
+
--color-emphasis-foreground: var(--emphasis-foreground);
|
|
40
|
+
--color-emphasis-solid: var(--emphasis-solid);
|
|
41
|
+
--color-emphasis-solid-hover: var(--emphasis-solid-hover);
|
|
42
|
+
--color-emphasis-ring: var(--emphasis-ring);
|
|
43
|
+
--color-emphasis-on-solid: var(--emphasis-on-solid);
|
|
44
|
+
--color-info-surface: var(--info-surface);
|
|
45
|
+
--color-info-foreground: var(--info-foreground);
|
|
46
|
+
--color-info-link: var(--info-link);
|
|
47
|
+
--color-info-link-hover: var(--info-link-hover);
|
|
48
|
+
--color-success-surface: var(--success-surface);
|
|
49
|
+
--color-success-foreground: var(--success-foreground);
|
|
50
|
+
--color-danger-surface: var(--danger-surface);
|
|
51
|
+
--color-danger-foreground: var(--danger-foreground);
|
|
52
|
+
--color-danger-solid: var(--danger-solid);
|
|
53
|
+
--color-danger-solid-hover: var(--danger-solid-hover);
|
|
29
54
|
--radius-sm: calc(var(--radius) - 4px);
|
|
30
55
|
--radius-md: calc(var(--radius) - 2px);
|
|
31
56
|
--radius-lg: var(--radius);
|