@okshaun/components 0.1.8 → 0.3.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.
@@ -10,42 +10,45 @@
10
10
  "gap]___[value:40",
11
11
  "borderTopWidth]___[value:1",
12
12
  "borderTopStyle]___[value:solid",
13
- "borderColor]___[value:gray.10",
14
- "borderColor]___[value:gray.80]___[cond:_dark",
13
+ "borderColor]___[value:border",
15
14
  "paddingBlock]___[value:24",
16
15
  "paddingBottom]___[value:96",
17
16
  "gridTemplateColumns]___[value:minmax(auto, 1fr) 1fr",
18
17
  "gap]___[value:24",
19
18
  "alignItems]___[value:center",
19
+ "gridTemplateColumns]___[value:repeat(13, auto)",
20
+ "gap]___[value:8",
20
21
  "gridTemplateColumns]___[value:repeat(3, 1fr)",
22
+ "gridTemplateColumns]___[value:repeat(4, auto)",
23
+ "alignItems]___[value:flex-start",
21
24
  "display]___[value:flex",
22
25
  "gap]___[value:8px",
23
26
  "flexDirection]___[value:row",
24
- "color]___[value:gold.40",
25
- "color]___[value:gold.30]___[cond:_dark",
27
+ "color]___[value:blue.60",
28
+ "color]___[value:blue.40]___[cond:_dark",
26
29
  "justifyContent]___[value:space-between",
30
+ "borderBottomWidth]___[value:1",
31
+ "borderStyle]___[value:solid",
32
+ "paddingBlock]___[value:4",
27
33
  "alignItems]___[value:flex-end",
28
- "gap]___[value:8",
29
- "flexWrap]___[value:wrap",
30
34
  "height]___[value:80",
31
35
  "fontSize]___[value:14",
32
36
  "fontSize]___[value:16",
33
37
  "letterSpacing]___[value:widest",
34
38
  "textTransform]___[value:uppercase",
35
39
  "fontWeight]___[value:bold",
40
+ "color]___[value:text.bold",
41
+ "textStyle]___[value:mono.sm",
36
42
  "marginLeft]___[value:8",
37
43
  "flexDirection]___[value:column",
38
- "alignItems]___[value:flex-start",
39
44
  "padding]___[value:16",
40
- "maxWidth]___[value:280",
41
- "paddingBlock]___[value:4",
42
- "background]___[value:gray.10",
43
- "background]___[value:gray.80]___[cond:_dark",
45
+ "gap]___[value:4",
46
+ "maxWidth]___[value:xs",
47
+ "background]___[value:surface",
44
48
  "marginBottom]___[value:56",
45
49
  "position]___[value:sticky",
46
50
  "top]___[value:0",
47
51
  "zIndex]___[value:100",
48
- "boxShadow]___[value:medium",
49
52
  "position]___[value:relative",
50
53
  "width]___[value:100%",
51
54
  "maxWidth]___[value:5xl",
@@ -53,135 +56,107 @@
53
56
  "paddingInline]___[value:24",
54
57
  "paddingInline]___[value:20]___[cond:md",
55
58
  "paddingInline]___[value:16]___[cond:sm",
56
- "background]___[value:red.50",
59
+ "color]___[value:gold.40",
60
+ "paddingInlineStart]___[value:3",
61
+ "paddingInlineEnd]___[value:3",
62
+ "paddingInlineStart]___[value:2",
63
+ "paddingInlineEnd]___[value:2",
64
+ "paddingInlineStart]___[value:5",
65
+ "paddingInlineEnd]___[value:5",
57
66
  "gridColumn]___[value:1 / -1",
58
67
  "marginTop]___[value:32",
59
- "color]___[value:gray.70",
60
- "color]___[value:gray.20]___[cond:_dark",
61
- "background]___[value:gray.70]___[cond:_dark",
62
- "color]___[value:gray.0",
63
- "color]___[value:gray.80]___[cond:_dark",
64
- "background]___[value:gray.50",
65
- "background]___[value:gray.20]___[cond:_dark",
66
- "color]___[value:tan.70",
67
- "color]___[value:tan.20]___[cond:_dark",
68
- "background]___[value:tan.10",
69
- "background]___[value:tan.70]___[cond:_dark",
70
- "color]___[value:tan.80]___[cond:_dark",
71
- "background]___[value:tan.50",
72
- "background]___[value:tan.20]___[cond:_dark",
68
+ "maxWidth]___[value:280",
69
+ "color]___[value:text.subtle",
70
+ "background]___[value:bg.neutral",
71
+ "color]___[value:text.inverse",
72
+ "background]___[value:bg.neutral.boldest",
73
73
  "color]___[value:red.70",
74
- "color]___[value:red.10]___[cond:_dark",
75
- "background]___[value:red.10",
76
- "background]___[value:red.70]___[cond:_dark",
77
- "color]___[value:red.80]___[cond:_dark",
78
- "background]___[value:red.20]___[cond:_dark",
79
- "color]___[value:tomato.70",
80
- "color]___[value:tomato.20]___[cond:_dark",
81
- "background]___[value:tomato.10",
82
- "background]___[value:tomato.70]___[cond:_dark",
83
- "color]___[value:tomato.80]___[cond:_dark",
84
- "background]___[value:tomato.50",
85
- "background]___[value:tomato.20]___[cond:_dark",
74
+ "color]___[value:red.20]___[cond:_dark",
75
+ "background]___[value:red.20",
76
+ "background]___[value:red.100]___[cond:_dark",
77
+ "color]___[value:red.10",
78
+ "color]___[value:red.100]___[cond:_dark",
79
+ "background]___[value:red.60",
80
+ "background]___[value:red.40]___[cond:_dark",
86
81
  "color]___[value:orange.70",
87
82
  "color]___[value:orange.20]___[cond:_dark",
88
- "background]___[value:orange.10",
89
- "background]___[value:orange.70]___[cond:_dark",
90
- "color]___[value:orange.5",
91
- "color]___[value:orange.80]___[cond:_dark",
83
+ "background]___[value:orange.20",
84
+ "background]___[value:orange.100]___[cond:_dark",
85
+ "color]___[value:orange.10",
86
+ "color]___[value:orange.100]___[cond:_dark",
92
87
  "background]___[value:orange.60",
93
- "background]___[value:orange.20]___[cond:_dark",
94
- "color]___[value:yellow.60",
95
- "color]___[value:yellow.10]___[cond:_dark",
96
- "background]___[value:yellow.10",
97
- "background]___[value:yellow.60]___[cond:_dark",
98
- "color]___[value:yellow.70",
99
- "color]___[value:yellow.90]___[cond:_dark",
88
+ "background]___[value:orange.50]___[cond:_dark",
89
+ "color]___[value:yellow.80",
90
+ "color]___[value:yellow.50]___[cond:_dark",
100
91
  "background]___[value:yellow.20",
101
- "background]___[value:yellow.20]___[cond:_dark",
92
+ "background]___[value:yellow.90]___[cond:_dark",
93
+ "color]___[value:yellow.100",
94
+ "color]___[value:yellow.100]___[cond:_dark",
95
+ "background]___[value:yellow.40",
96
+ "background]___[value:yellow.60]___[cond:_dark",
97
+ "color]___[value:lime.70",
98
+ "color]___[value:lime.20]___[cond:_dark",
99
+ "background]___[value:lime.20",
100
+ "background]___[value:lime.90]___[cond:_dark",
101
+ "color]___[value:lime.10",
102
+ "color]___[value:lime.100]___[cond:_dark",
103
+ "background]___[value:lime.60",
104
+ "background]___[value:lime.40]___[cond:_dark",
102
105
  "color]___[value:green.70",
103
106
  "color]___[value:green.20]___[cond:_dark",
104
- "background]___[value:green.10",
105
- "background]___[value:green.70]___[cond:_dark",
106
- "color]___[value:green.80]___[cond:_dark",
107
- "background]___[value:green.50",
108
- "background]___[value:green.20]___[cond:_dark",
109
- "color]___[value:grass.70",
110
- "color]___[value:grass.10]___[cond:_dark",
111
- "background]___[value:grass.10",
112
- "background]___[value:grass.70]___[cond:_dark",
113
- "color]___[value:grass.80]___[cond:_dark",
114
- "background]___[value:grass.60",
115
- "background]___[value:grass.20]___[cond:_dark",
116
- "color]___[value:mint.80",
117
- "color]___[value:mint.30]___[cond:_dark",
118
- "background]___[value:mint.10",
119
- "background]___[value:mint.80]___[cond:_dark",
120
- "color]___[value:mint.80]___[cond:_dark",
121
- "background]___[value:mint.70",
122
- "background]___[value:mint.20]___[cond:_dark",
123
- "color]___[value:cyan.70",
124
- "color]___[value:cyan.20]___[cond:_dark",
125
- "background]___[value:cyan.10",
126
- "background]___[value:cyan.70]___[cond:_dark",
127
- "color]___[value:cyan.5",
128
- "color]___[value:cyan.80]___[cond:_dark",
129
- "background]___[value:cyan.60",
130
- "background]___[value:cyan.30]___[cond:_dark",
107
+ "background]___[value:green.20",
108
+ "background]___[value:green.90]___[cond:_dark",
109
+ "color]___[value:gray.10",
110
+ "color]___[value:green.100]___[cond:_dark",
111
+ "background]___[value:green.70",
112
+ "background]___[value:green.40]___[cond:_dark",
113
+ "color]___[value:teal.80",
114
+ "color]___[value:teal.20]___[cond:_dark",
115
+ "background]___[value:teal.20",
116
+ "background]___[value:teal.90]___[cond:_dark",
117
+ "color]___[value:teal.10",
118
+ "color]___[value:teal.100]___[cond:_dark",
119
+ "background]___[value:teal.60",
120
+ "background]___[value:teal.50]___[cond:_dark",
131
121
  "color]___[value:blue.70",
132
122
  "color]___[value:blue.20]___[cond:_dark",
133
- "background]___[value:blue.10",
134
- "background]___[value:blue.70]___[cond:_dark",
135
- "color]___[value:blue.90]___[cond:_dark",
123
+ "background]___[value:blue.20",
124
+ "background]___[value:blue.90]___[cond:_dark",
125
+ "color]___[value:blue.10",
126
+ "color]___[value:blue.10]___[cond:_dark",
136
127
  "background]___[value:blue.50",
137
- "background]___[value:blue.40]___[cond:_dark",
128
+ "background]___[value:blue.70]___[cond:_dark",
138
129
  "color]___[value:indigo.70",
130
+ "color]___[value:indigo.20]___[cond:_dark",
131
+ "background]___[value:indigo.20",
132
+ "background]___[value:indigo.90]___[cond:_dark",
133
+ "color]___[value:indigo.10",
139
134
  "color]___[value:indigo.10]___[cond:_dark",
140
- "background]___[value:indigo.10",
135
+ "background]___[value:indigo.60",
141
136
  "background]___[value:indigo.70]___[cond:_dark",
142
- "color]___[value:indigo.5",
143
- "color]___[value:indigo.80]___[cond:_dark",
144
- "background]___[value:indigo.50",
145
- "background]___[value:indigo.20]___[cond:_dark",
146
137
  "color]___[value:purple.70",
147
138
  "color]___[value:purple.20]___[cond:_dark",
148
- "background]___[value:purple.10",
149
- "background]___[value:purple.70]___[cond:_dark",
150
- "color]___[value:purple.80]___[cond:_dark",
151
- "background]___[value:purple.50",
152
- "background]___[value:purple.20]___[cond:_dark",
153
- "color]___[value:violet.70",
154
- "color]___[value:violet.10]___[cond:_dark",
155
- "background]___[value:violet.10",
156
- "background]___[value:violet.70]___[cond:_dark",
157
- "color]___[value:violet.5",
158
- "color]___[value:violet.80]___[cond:_dark",
159
- "background]___[value:violet.60",
160
- "background]___[value:violet.20]___[cond:_dark",
161
- "color]___[value:pink.70",
162
- "color]___[value:pink.10]___[cond:_dark",
163
- "background]___[value:pink.10",
164
- "background]___[value:pink.70]___[cond:_dark",
165
- "color]___[value:pink.5",
166
- "color]___[value:pink.80]___[cond:_dark",
167
- "background]___[value:pink.70",
168
- "background]___[value:pink.20]___[cond:_dark",
169
- "color]___[value:rose.70",
170
- "color]___[value:rose.10]___[cond:_dark",
171
- "background]___[value:rose.10",
172
- "background]___[value:rose.70]___[cond:_dark",
173
- "color]___[value:rose.5",
174
- "color]___[value:rose.80]___[cond:_dark",
175
- "background]___[value:rose.60",
176
- "background]___[value:rose.20]___[cond:_dark",
177
- "color]___[value:magenta.70",
139
+ "background]___[value:purple.20",
140
+ "background]___[value:purple.90]___[cond:_dark",
141
+ "color]___[value:purple.10",
142
+ "color]___[value:purple.10]___[cond:_dark",
143
+ "background]___[value:purple.60",
144
+ "background]___[value:purple.80]___[cond:_dark",
145
+ "color]___[value:magenta.80",
146
+ "color]___[value:magenta.20]___[cond:_dark",
147
+ "background]___[value:magenta.20",
148
+ "background]___[value:magenta.90]___[cond:_dark",
149
+ "color]___[value:magenta.10",
178
150
  "color]___[value:magenta.10]___[cond:_dark",
179
- "background]___[value:magenta.10",
151
+ "background]___[value:magenta.70",
180
152
  "background]___[value:magenta.70]___[cond:_dark",
181
- "color]___[value:magenta.5",
182
- "color]___[value:magenta.80]___[cond:_dark",
183
- "background]___[value:magenta.60",
184
- "background]___[value:magenta.20]___[cond:_dark",
153
+ "color]___[value:tan.70",
154
+ "color]___[value:tan.20]___[cond:_dark",
155
+ "background]___[value:tan.20",
156
+ "background]___[value:tan.80]___[cond:_dark",
157
+ "color]___[value:tan.90]___[cond:_dark",
158
+ "background]___[value:tan.60",
159
+ "background]___[value:tan.40]___[cond:_dark",
185
160
  "marginBottom]___[value:12",
186
161
  "marginBottom]___[value:8",
187
162
  "marginTop]___[value:12",
@@ -191,7 +166,6 @@
191
166
  "marginLeft]___[value:12",
192
167
  "opacity]___[value:0",
193
168
  "opacity]___[value:1",
194
- "gap]___[value:2",
195
169
  "position]___[value:absolute",
196
170
  "left]___[value:0",
197
171
  "right]___[value:0",
@@ -203,27 +177,21 @@
203
177
  "width]___[value:24",
204
178
  "height]___[value:24",
205
179
  "fill]___[value:current",
206
- "width]___[value:22",
207
- "height]___[value:22",
180
+ "gap]___[value:2",
208
181
  "width]___[value:20",
209
182
  "height]___[value:20",
210
183
  "color]___[value:gray.100",
211
184
  "color]___[value:gray.90]___[cond:_dark",
212
185
  "color]___[value:gray.90",
213
- "color]___[value:gray.0]___[cond:_dark",
186
+ "color]___[value:gray.10]___[cond:_dark",
214
187
  "textStyle]___[value:body-lg",
215
188
  "textStyle]___[value:body-md]___[cond:md",
216
189
  "textStyle]___[value:body-xs",
217
- "color]___[value:gray.5]___[cond:_dark",
218
- "color]___[value:gray.10",
219
190
  "color]___[value:gray.60]___[cond:_dark",
220
191
  "font]___[value:mono",
221
192
  "color]___[value:gold.50",
222
193
  "color]___[value:blue.50",
223
194
  "borderWidth]___[value:2",
224
- "borderStyle]___[value:solid",
225
- "borderColor]___[value:gray.30",
226
- "borderColor]___[value:gray.70]___[cond:_dark",
227
195
  "color]___[value:transparent",
228
196
  "margin]___[value:8",
229
197
  "borderRadius]___[value:100",
@@ -238,17 +206,17 @@
238
206
  "opacity]___[value:0]___[cond:&:before",
239
207
  "display]___[value:block]___[cond:&:before",
240
208
  "borderRadius]___[value:100]___[cond:&:before",
241
- "backgroundColor]___[value:gray.98]___[cond:&:before",
242
- "backgroundColor]___[value:gray.5]___[cond:&:before<___>_dark",
209
+ "background]___[value:bg.neutral.bold]___[cond:&:before",
243
210
  "transition]___[value:all]___[cond:&:before",
244
211
  "transitionTimingFunction]___[value:default]___[cond:&:before",
245
- "transitionDuration]___[value:slow]___[cond:&:before",
212
+ "transitionDuration]___[value:normal]___[cond:&:before",
246
213
  "cursor]___[value:pointer]___[cond:_hover",
247
- "background]___[value:gray.90]___[cond:_hover",
248
- "background]___[value:gray.5]___[cond:_hover<___>_dark",
249
- "borderColor]___[value:gray.90]___[cond:_hover",
250
- "borderColor]___[value:gray.5]___[cond:_hover<___>_dark",
214
+ "background]___[value:darkNeutral.0]___[cond:_hover",
215
+ "background]___[value:neutral.0]___[cond:_hover<___>_dark",
216
+ "borderColor]___[value:bg.neutral.bold]___[cond:_hover",
251
217
  "inset]___[value:-8]___[cond:_hover<___>&:before",
218
+ "background]___[value:darkNeutral.0]___[cond:_hover<___>&:before",
219
+ "background]___[value:neutral.0]___[cond:_hover<___>&:before<___>_dark",
252
220
  "opacity]___[value:0.25]___[cond:_hover<___>&:before",
253
221
  "textStyle]___[value:body-md",
254
222
  "textStyle]___[value:body-sm"
@@ -256,7 +224,7 @@
256
224
  "recipes": {
257
225
  "text": [
258
226
  "family]___[value:mono]___[recipe:text",
259
- "family]___[value:sans]___[recipe:text",
227
+ "family]___[value:inherit]___[recipe:text",
260
228
  "italic]___[value:true]___[recipe:text",
261
229
  "bold]___[value:true]___[recipe:text",
262
230
  "underline]___[value:true]___[recipe:text"
@@ -268,32 +236,28 @@
268
236
  "level]___[value:h4]___[recipe:heading"
269
237
  ],
270
238
  "button": [
271
- "variant]___[value:primary]___[recipe:button",
272
- "size]___[value:standard]___[recipe:button",
273
- "variant]___[value:standard]___[recipe:button",
274
- "variant]___[value:hollow]___[recipe:button",
275
- "variant]___[value:ghost]___[recipe:button",
276
- "variant]___[value:cta]___[recipe:button",
277
- "variant]___[value:danger]___[recipe:button",
278
- "size]___[value:small]___[recipe:button",
279
- "variant]___[value:default]___[recipe:button",
280
- "variant]___[value:utility]___[recipe:button"
239
+ "appearance]___[value:primary]___[recipe:button",
240
+ "size]___[value:default]___[recipe:button",
241
+ "appearance]___[value:default]___[recipe:button",
242
+ "appearance]___[value:subtle]___[recipe:button",
243
+ "appearance]___[value:hollow]___[recipe:button",
244
+ "iconBefore]___[value:user]___[recipe:button",
245
+ "iconAfter]___[value:caret-down]___[recipe:button",
246
+ "iconAfter]___[value:plus]___[recipe:button",
247
+ "iconBefore]___[value:aa-placeholder]___[recipe:button",
248
+ "size]___[value:small]___[recipe:button"
281
249
  ],
282
250
  "iconButton": [
283
- "variant]___[value:ghost]___[recipe:iconButton",
284
- "size]___[value:standard]___[recipe:iconButton",
285
- "variant]___[value:standard]___[recipe:iconButton",
286
- "variant]___[value:primary]___[recipe:iconButton",
287
- "size]___[value:large]___[recipe:iconButton",
288
- "variant]___[value:default]___[recipe:iconButton",
289
- "variant]___[value:danger]___[recipe:iconButton",
290
- "variant]___[value:hollow]___[recipe:iconButton",
291
- "variant]___[value:utility]___[recipe:iconButton"
251
+ "appearance]___[value:subtle]___[recipe:iconButton",
252
+ "size]___[value:default]___[recipe:iconButton",
253
+ "appearance]___[value:default]___[recipe:iconButton",
254
+ "appearance]___[value:primary]___[recipe:iconButton",
255
+ "size]___[value:large]___[recipe:iconButton"
292
256
  ],
293
257
  "box": [],
294
258
  "pre": [],
295
259
  "link": [
296
- "family]___[value:sans]___[recipe:link",
260
+ "family]___[value:inherit]___[recipe:link",
297
261
  "family]___[value:mono]___[recipe:link"
298
262
  ],
299
263
  "spinner": [
@@ -310,19 +274,22 @@
310
274
  "variant]___[value:outline]___[recipe:badge"
311
275
  ],
312
276
  "tag": [
313
- "variant]___[value:default]___[recipe:tag",
314
- "hue]___[value:slate]___[recipe:tag",
277
+ "appearance]___[value:default]___[recipe:tag",
278
+ "hue]___[value:gray]___[recipe:tag",
315
279
  "iconPosition]___[value:left]___[recipe:tag",
316
280
  "hasIcon]___[value:false]___[recipe:tag",
317
281
  "hue]___[value:red]___[recipe:tag",
318
282
  "hue]___[value:orange]___[recipe:tag",
319
283
  "hue]___[value:yellow]___[recipe:tag",
284
+ "hue]___[value:lime]___[recipe:tag",
320
285
  "hue]___[value:green]___[recipe:tag",
286
+ "hue]___[value:teal]___[recipe:tag",
321
287
  "hue]___[value:blue]___[recipe:tag",
288
+ "hue]___[value:indigo]___[recipe:tag",
322
289
  "hue]___[value:purple]___[recipe:tag",
323
- "hue]___[value:pink]___[recipe:tag",
324
- "variant]___[value:bold]___[recipe:tag",
325
- "iconPosition]___[value:right]___[recipe:tag"
290
+ "hue]___[value:magenta]___[recipe:tag",
291
+ "hue]___[value:tan]___[recipe:tag",
292
+ "appearance]___[value:bold]___[recipe:tag"
326
293
  ],
327
294
  "breadcrumbs": [],
328
295
  "card": [
@@ -335,12 +302,17 @@
335
302
  "direction]___[value:vertical]___[recipe:divider"
336
303
  ],
337
304
  "label": [
338
- "family]___[value:sans]___[recipe:label"
305
+ "family]___[value:inherit]___[recipe:label"
339
306
  ],
340
307
  "textinput": [
341
308
  "size]___[value:medium]___[recipe:textinput",
342
- "size]___[value:large]___[recipe:textinput",
343
- "autoSize]___[value:false]___[recipe:textinput"
309
+ "size]___[value:small]___[recipe:textinput",
310
+ "size]___[value:large]___[recipe:textinput"
311
+ ],
312
+ "textarea": [
313
+ "size]___[value:medium]___[recipe:textarea",
314
+ "size]___[value:small]___[recipe:textarea",
315
+ "size]___[value:large]___[recipe:textarea"
344
316
  ],
345
317
  "checkbox": [],
346
318
  "checkboxInput": [],
@@ -358,11 +330,6 @@
358
330
  ],
359
331
  "code": [],
360
332
  "radioInput": [],
361
- "textarea": [
362
- "stacked]___[value:true]___[recipe:textarea",
363
- "internalLabel]___[value:false]___[recipe:textarea",
364
- "autoGrow]___[value:false]___[recipe:textarea"
365
- ],
366
333
  "toggle": [],
367
334
  "toggleInput": []
368
335
  }