@aggc/ui 0.6.0 → 0.7.1
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/chunks/{UiSkeleton.vue_vue_type_script_setup_true_lang-B61z8swg.js → UiSkeleton.vue_vue_type_script_setup_true_lang-DUse1KRc.js} +285 -285
- package/dist/chunks/{pageHeader-D9KF7WOO.js → pageHeader-YZ3BV9dQ.js} +156 -62
- package/dist/components/StatusBadge.styles.d.ts +5 -0
- package/dist/components/StatusBadge.vue.d.ts +2 -2
- package/dist/components/UiButton.styles.d.ts +28 -1
- package/dist/components/UiButton.vue.d.ts +4 -0
- package/dist/components/UiCheckbox.styles.d.ts +2 -4
- package/dist/components/UiSegmentedControl.styles.d.ts +5 -1
- package/dist/components/UiSelect.styles.d.ts +10 -3
- package/dist/components/UiSkeleton.styles.d.ts +1 -33
- package/dist/components.js +1 -1
- package/dist/index.js +2 -2
- package/dist/styles/recipes/badge.recipe.d.ts +5 -0
- package/dist/styles/recipes/button.recipe.d.ts +28 -1
- package/dist/styles/recipes/card.recipe.d.ts +23 -12
- package/dist/styles/recipes/dropdown.recipe.d.ts +6 -6
- package/dist/styles/recipes/input.recipe.d.ts +0 -3
- package/dist/styles.js +118 -92
- package/dist/tokens/colors.d.ts +30 -0
- package/dist/tokens/core-colors.d.ts +30 -0
- package/dist/tokens/motion.d.ts +20 -0
- package/dist/tokens/radius.d.ts +9 -0
- package/dist/tokens-core.js +21 -5
- package/dist/ui.css +320 -207
- package/package.json +1 -1
- package/src/components/ResultPanel.styles.ts +7 -2
- package/src/components/SectionCard.styles.ts +1 -1
- package/src/components/StatusBadge.styles.ts +10 -8
- package/src/components/StatusBadge.vue +1 -1
- package/src/components/UiButton.vue +5 -1
- package/src/components/UiCheckbox.styles.ts +7 -11
- package/src/components/UiField.styles.ts +2 -2
- package/src/components/UiLoadingState.styles.ts +2 -2
- package/src/components/UiSegmentedControl.styles.ts +14 -4
- package/src/components/UiSelect.styles.ts +24 -10
- package/src/components/UiSkeleton.styles.ts +7 -36
- package/src/css/base.css +44 -9
- package/src/styles/layouts/page.ts +5 -0
- package/src/styles/primitives/feedback.ts +1 -0
- package/src/styles/primitives/fields.ts +21 -11
- package/src/styles/primitives/surfaces.ts +12 -5
- package/src/styles/primitives/typography.ts +5 -4
- package/src/styles/recipes/badge.recipe.ts +5 -5
- package/src/styles/recipes/button.recipe.ts +87 -8
- package/src/styles/recipes/card.recipe.ts +24 -13
- package/src/styles/recipes/dropdown.recipe.ts +11 -8
- package/src/styles/recipes/input.recipe.ts +10 -6
- package/src/tokens/core-colors.ts +5 -0
- package/src/tokens/motion.ts +8 -0
- package/src/tokens/radius.ts +3 -0
package/dist/tokens/colors.d.ts
CHANGED
|
@@ -248,6 +248,12 @@ export declare const colorTokens: {
|
|
|
248
248
|
readonly _dark: "rgba(122, 170, 255, 0.82)";
|
|
249
249
|
};
|
|
250
250
|
};
|
|
251
|
+
readonly dangerSoft: {
|
|
252
|
+
readonly value: {
|
|
253
|
+
readonly base: "rgba(217, 45, 32, 0.06)";
|
|
254
|
+
readonly _dark: "rgba(255, 142, 127, 0.08)";
|
|
255
|
+
};
|
|
256
|
+
};
|
|
251
257
|
};
|
|
252
258
|
readonly border: {
|
|
253
259
|
readonly soft: {
|
|
@@ -280,6 +286,12 @@ export declare const colorTokens: {
|
|
|
280
286
|
readonly _dark: "rgba(125, 171, 255, 0.44)";
|
|
281
287
|
};
|
|
282
288
|
};
|
|
289
|
+
readonly danger: {
|
|
290
|
+
readonly value: {
|
|
291
|
+
readonly base: "rgba(217, 45, 32, 0.35)";
|
|
292
|
+
readonly _dark: "rgba(255, 142, 127, 0.35)";
|
|
293
|
+
};
|
|
294
|
+
};
|
|
283
295
|
};
|
|
284
296
|
readonly badge: {
|
|
285
297
|
readonly successBg: {
|
|
@@ -354,6 +366,24 @@ export declare const colorTokens: {
|
|
|
354
366
|
readonly _dark: "rgba(183, 195, 215, 0.22)";
|
|
355
367
|
};
|
|
356
368
|
};
|
|
369
|
+
readonly dangerBg: {
|
|
370
|
+
readonly value: {
|
|
371
|
+
readonly base: "rgba(217, 45, 32, 0.12)";
|
|
372
|
+
readonly _dark: "rgba(255, 142, 127, 0.15)";
|
|
373
|
+
};
|
|
374
|
+
};
|
|
375
|
+
readonly dangerText: {
|
|
376
|
+
readonly value: {
|
|
377
|
+
readonly base: "#b42318";
|
|
378
|
+
readonly _dark: "#ff8e7f";
|
|
379
|
+
};
|
|
380
|
+
};
|
|
381
|
+
readonly dangerBorder: {
|
|
382
|
+
readonly value: {
|
|
383
|
+
readonly base: "rgba(217, 45, 32, 0.22)";
|
|
384
|
+
readonly _dark: "rgba(255, 142, 127, 0.3)";
|
|
385
|
+
};
|
|
386
|
+
};
|
|
357
387
|
};
|
|
358
388
|
};
|
|
359
389
|
export { coreColorTokens } from "./core-colors";
|
|
@@ -128,6 +128,12 @@ export declare const coreColorTokens: {
|
|
|
128
128
|
readonly _dark: "rgba(122, 170, 255, 0.82)";
|
|
129
129
|
};
|
|
130
130
|
};
|
|
131
|
+
readonly dangerSoft: {
|
|
132
|
+
readonly value: {
|
|
133
|
+
readonly base: "rgba(217, 45, 32, 0.06)";
|
|
134
|
+
readonly _dark: "rgba(255, 142, 127, 0.08)";
|
|
135
|
+
};
|
|
136
|
+
};
|
|
131
137
|
};
|
|
132
138
|
readonly border: {
|
|
133
139
|
readonly soft: {
|
|
@@ -160,6 +166,12 @@ export declare const coreColorTokens: {
|
|
|
160
166
|
readonly _dark: "rgba(125, 171, 255, 0.44)";
|
|
161
167
|
};
|
|
162
168
|
};
|
|
169
|
+
readonly danger: {
|
|
170
|
+
readonly value: {
|
|
171
|
+
readonly base: "rgba(217, 45, 32, 0.35)";
|
|
172
|
+
readonly _dark: "rgba(255, 142, 127, 0.35)";
|
|
173
|
+
};
|
|
174
|
+
};
|
|
163
175
|
};
|
|
164
176
|
readonly badge: {
|
|
165
177
|
readonly successBg: {
|
|
@@ -234,5 +246,23 @@ export declare const coreColorTokens: {
|
|
|
234
246
|
readonly _dark: "rgba(183, 195, 215, 0.22)";
|
|
235
247
|
};
|
|
236
248
|
};
|
|
249
|
+
readonly dangerBg: {
|
|
250
|
+
readonly value: {
|
|
251
|
+
readonly base: "rgba(217, 45, 32, 0.12)";
|
|
252
|
+
readonly _dark: "rgba(255, 142, 127, 0.15)";
|
|
253
|
+
};
|
|
254
|
+
};
|
|
255
|
+
readonly dangerText: {
|
|
256
|
+
readonly value: {
|
|
257
|
+
readonly base: "#b42318";
|
|
258
|
+
readonly _dark: "#ff8e7f";
|
|
259
|
+
};
|
|
260
|
+
};
|
|
261
|
+
readonly dangerBorder: {
|
|
262
|
+
readonly value: {
|
|
263
|
+
readonly base: "rgba(217, 45, 32, 0.22)";
|
|
264
|
+
readonly _dark: "rgba(255, 142, 127, 0.3)";
|
|
265
|
+
};
|
|
266
|
+
};
|
|
237
267
|
};
|
|
238
268
|
};
|
package/dist/tokens/motion.d.ts
CHANGED
|
@@ -1,10 +1,30 @@
|
|
|
1
1
|
export declare const motionTokens: {
|
|
2
2
|
readonly durations: {
|
|
3
|
+
readonly fast: {
|
|
4
|
+
readonly value: "100ms";
|
|
5
|
+
};
|
|
3
6
|
readonly moderate: {
|
|
4
7
|
readonly value: "160ms";
|
|
5
8
|
};
|
|
6
9
|
readonly emphasized: {
|
|
7
10
|
readonly value: "240ms";
|
|
8
11
|
};
|
|
12
|
+
readonly slow: {
|
|
13
|
+
readonly value: "320ms";
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
readonly easings: {
|
|
17
|
+
readonly default: {
|
|
18
|
+
readonly value: "cubic-bezier(0.25, 0.1, 0.25, 1)";
|
|
19
|
+
};
|
|
20
|
+
readonly out: {
|
|
21
|
+
readonly value: "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
22
|
+
};
|
|
23
|
+
readonly inOut: {
|
|
24
|
+
readonly value: "cubic-bezier(0.45, 0, 0.55, 1)";
|
|
25
|
+
};
|
|
26
|
+
readonly spring: {
|
|
27
|
+
readonly value: "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
|
28
|
+
};
|
|
9
29
|
};
|
|
10
30
|
};
|
package/dist/tokens/radius.d.ts
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
export declare const radiusTokens: {
|
|
2
|
+
readonly "2xs": {
|
|
3
|
+
readonly value: "0.125rem";
|
|
4
|
+
};
|
|
5
|
+
readonly "3xs": {
|
|
6
|
+
readonly value: "0.0625rem";
|
|
7
|
+
};
|
|
2
8
|
readonly "4xl": {
|
|
3
9
|
readonly value: "2rem";
|
|
4
10
|
};
|
|
11
|
+
readonly "5xl": {
|
|
12
|
+
readonly value: "2.5rem";
|
|
13
|
+
};
|
|
5
14
|
};
|
package/dist/tokens-core.js
CHANGED
|
@@ -21,14 +21,16 @@ const a = {
|
|
|
21
21
|
header: { value: { base: "rgba(250, 252, 255, 0.58)", _dark: "rgba(0, 0, 0, 0.84)" } },
|
|
22
22
|
menu: { value: { base: "rgba(255, 255, 255, 0.9)", _dark: "rgba(9, 12, 18, 0.99)" } },
|
|
23
23
|
accentSoft: { value: { base: "rgba(49, 94, 255, 0.1)", _dark: "rgba(138, 180, 255, 0.18)" } },
|
|
24
|
-
accentStrong: { value: { base: "rgba(49, 94, 255, 0.86)", _dark: "rgba(122, 170, 255, 0.82)" } }
|
|
24
|
+
accentStrong: { value: { base: "rgba(49, 94, 255, 0.86)", _dark: "rgba(122, 170, 255, 0.82)" } },
|
|
25
|
+
dangerSoft: { value: { base: "rgba(217, 45, 32, 0.06)", _dark: "rgba(255, 142, 127, 0.08)" } }
|
|
25
26
|
},
|
|
26
27
|
border: {
|
|
27
28
|
soft: { value: { base: "rgba(148, 163, 184, 0.14)", _dark: "rgba(255, 255, 255, 0.035)" } },
|
|
28
29
|
subtle: { value: { base: "rgba(125, 146, 182, 0.2)", _dark: "rgba(255, 255, 255, 0.09)" } },
|
|
29
30
|
default: { value: { base: "rgba(109, 130, 164, 0.28)", _dark: "rgba(255, 255, 255, 0.14)" } },
|
|
30
31
|
strong: { value: { base: "rgba(80, 98, 127, 0.42)", _dark: "rgba(255, 255, 255, 0.22)" } },
|
|
31
|
-
accent: { value: { base: "rgba(82, 121, 255, 0.5)", _dark: "rgba(125, 171, 255, 0.44)" } }
|
|
32
|
+
accent: { value: { base: "rgba(82, 121, 255, 0.5)", _dark: "rgba(125, 171, 255, 0.44)" } },
|
|
33
|
+
danger: { value: { base: "rgba(217, 45, 32, 0.35)", _dark: "rgba(255, 142, 127, 0.35)" } }
|
|
32
34
|
},
|
|
33
35
|
badge: {
|
|
34
36
|
successBg: { value: { base: "rgba(19, 163, 74, 0.12)", _dark: "rgba(19, 80, 58, 0.7)" } },
|
|
@@ -42,15 +44,29 @@ const a = {
|
|
|
42
44
|
infoBorder: { value: { base: "rgba(37, 99, 235, 0.2)", _dark: "rgba(154, 193, 255, 0.3)" } },
|
|
43
45
|
neutralBg: { value: { base: "rgba(99, 115, 148, 0.08)", _dark: "rgba(21, 26, 35, 0.92)" } },
|
|
44
46
|
neutralText: { value: { base: "#4b5d7a", _dark: "#d0d7e4" } },
|
|
45
|
-
neutralBorder: { value: { base: "rgba(109, 130, 164, 0.18)", _dark: "rgba(183, 195, 215, 0.22)" } }
|
|
47
|
+
neutralBorder: { value: { base: "rgba(109, 130, 164, 0.18)", _dark: "rgba(183, 195, 215, 0.22)" } },
|
|
48
|
+
dangerBg: { value: { base: "rgba(217, 45, 32, 0.12)", _dark: "rgba(255, 142, 127, 0.15)" } },
|
|
49
|
+
dangerText: { value: { base: "#b42318", _dark: "#ff8e7f" } },
|
|
50
|
+
dangerBorder: { value: { base: "rgba(217, 45, 32, 0.22)", _dark: "rgba(255, 142, 127, 0.3)" } }
|
|
46
51
|
}
|
|
47
52
|
}, e = {
|
|
48
53
|
durations: {
|
|
54
|
+
fast: { value: "100ms" },
|
|
49
55
|
moderate: { value: "160ms" },
|
|
50
|
-
emphasized: { value: "240ms" }
|
|
56
|
+
emphasized: { value: "240ms" },
|
|
57
|
+
slow: { value: "320ms" }
|
|
58
|
+
},
|
|
59
|
+
easings: {
|
|
60
|
+
default: { value: "cubic-bezier(0.25, 0.1, 0.25, 1)" },
|
|
61
|
+
out: { value: "cubic-bezier(0.16, 1, 0.3, 1)" },
|
|
62
|
+
inOut: { value: "cubic-bezier(0.45, 0, 0.55, 1)" },
|
|
63
|
+
spring: { value: "cubic-bezier(0.34, 1.56, 0.64, 1)" }
|
|
51
64
|
}
|
|
52
65
|
}, r = {
|
|
53
|
-
"
|
|
66
|
+
"2xs": { value: "0.125rem" },
|
|
67
|
+
"3xs": { value: "0.0625rem" },
|
|
68
|
+
"4xl": { value: "2rem" },
|
|
69
|
+
"5xl": { value: "2.5rem" }
|
|
54
70
|
}, b = {
|
|
55
71
|
18: { value: "4.5rem" },
|
|
56
72
|
22: { value: "5.5rem" }
|