@bgord/design 1.8.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.
- package/dist/css-purge.js +25 -25
- package/dist/index.d.ts +192 -58
- package/dist/lib.d.ts +80 -39
- package/dist/lib.js +83 -39
- package/dist/main.min.css +1 -1
- package/dist/main.min.css.br +0 -0
- package/dist/main.min.css.gz +0 -0
- package/package.json +7 -7
- package/readme.md +5 -0
package/dist/lib.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
export declare const AlphaTokens: {
|
|
2
|
+
readonly "color-alpha-subtle": "rgba(255 255 255 / 0.06)";
|
|
3
|
+
readonly "color-alpha-soft": "rgba(255 255 255 / 0.1)";
|
|
4
|
+
readonly "color-alpha-medium": "rgba(255 255 255 / 0.16)";
|
|
5
|
+
};
|
|
6
|
+
export type AlphaTokenType = keyof typeof AlphaTokens;
|
|
1
7
|
export declare const BackdropsTokens: {
|
|
2
8
|
readonly "backdrop-none": "none";
|
|
3
9
|
readonly "backdrop-weak": "rgba(0 0 0 / 0.35)";
|
|
@@ -25,16 +31,16 @@ export declare const BorderStyleTokens: {
|
|
|
25
31
|
};
|
|
26
32
|
export type BorderStyleTokenType = keyof typeof BorderStyleTokens;
|
|
27
33
|
export declare const BrandTokens: {
|
|
28
|
-
readonly "color-brand-50": "oklch(0.94 0.
|
|
29
|
-
readonly "color-brand-100": "oklch(0.86 0.
|
|
30
|
-
readonly "color-brand-200": "oklch(0.78 0.
|
|
31
|
-
readonly "color-brand-300": "oklch(0.67 0.
|
|
32
|
-
readonly "color-brand-400": "oklch(0.
|
|
33
|
-
readonly "color-brand-500": "oklch(0.
|
|
34
|
-
readonly "color-brand-600": "oklch(0.
|
|
35
|
-
readonly "color-brand-700": "oklch(0.
|
|
36
|
-
readonly "color-brand-800": "oklch(0.24 0.
|
|
37
|
-
readonly "color-brand-900": "oklch(0.18 0.
|
|
34
|
+
readonly "color-brand-50": "oklch(0.94 0.06 255)";
|
|
35
|
+
readonly "color-brand-100": "oklch(0.86 0.09 255)";
|
|
36
|
+
readonly "color-brand-200": "oklch(0.78 0.11 255)";
|
|
37
|
+
readonly "color-brand-300": "oklch(0.67 0.14 255)";
|
|
38
|
+
readonly "color-brand-400": "oklch(0.58 0.155 255)";
|
|
39
|
+
readonly "color-brand-500": "oklch(0.50 0.165 255)";
|
|
40
|
+
readonly "color-brand-600": "oklch(0.40 0.155 255)";
|
|
41
|
+
readonly "color-brand-700": "oklch(0.31 0.14 255)";
|
|
42
|
+
readonly "color-brand-800": "oklch(0.24 0.12 255)";
|
|
43
|
+
readonly "color-brand-900": "oklch(0.18 0.10 255)";
|
|
38
44
|
};
|
|
39
45
|
export type BrandTokenType = keyof typeof BrandTokens;
|
|
40
46
|
export declare const BreakpointTokens: {
|
|
@@ -52,9 +58,9 @@ export declare const DangerTokens: {
|
|
|
52
58
|
};
|
|
53
59
|
export type DangerTokenType = keyof typeof DangerTokens;
|
|
54
60
|
export declare const FontFamilyTokens: {
|
|
55
|
-
readonly "font-family-sans":
|
|
56
|
-
readonly "font-family-serif":
|
|
57
|
-
readonly "font-family-mono": '
|
|
61
|
+
readonly "font-family-sans": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"';
|
|
62
|
+
readonly "font-family-serif": 'Georgia, Cambria, "Times New Roman", Times, serif';
|
|
63
|
+
readonly "font-family-mono": 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace';
|
|
58
64
|
};
|
|
59
65
|
export type FontFamilyTokenType = keyof typeof FontFamilyTokens;
|
|
60
66
|
export declare const FontSizeTokens: {
|
|
@@ -66,35 +72,40 @@ export declare const FontSizeTokens: {
|
|
|
66
72
|
readonly "font-size-2xl": "1.5rem";
|
|
67
73
|
readonly "font-size-3xl": "1.875rem";
|
|
68
74
|
readonly "font-size-4xl": "2.25rem";
|
|
69
|
-
readonly "font-size-5xl": "3rem";
|
|
75
|
+
readonly "font-size-5xl": "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)";
|
|
76
|
+
readonly "font-size-6xl": "clamp(2.75rem, 2rem + 3.75vw, 3.75rem)";
|
|
70
77
|
};
|
|
71
78
|
export type FontSizeTokenType = keyof typeof FontSizeTokens;
|
|
72
79
|
export declare const FontWeightTokens: {
|
|
73
80
|
readonly "font-weight-light": "300";
|
|
74
81
|
readonly "font-weight-regular": "400";
|
|
75
82
|
readonly "font-weight-medium": "500";
|
|
83
|
+
readonly "font-weight-semibold": "600";
|
|
76
84
|
readonly "font-weight-bold": "700";
|
|
77
85
|
readonly "font-weight-black": "900";
|
|
78
86
|
readonly "font-weight-unset": "unset";
|
|
79
87
|
};
|
|
80
88
|
export type FontWeightTokenType = keyof typeof FontWeightTokens;
|
|
81
89
|
export declare const GrayscaleTokens: {
|
|
82
|
-
readonly "color-neutral-0": "oklch(0.
|
|
83
|
-
readonly "color-neutral-50": "oklch(0.
|
|
84
|
-
readonly "color-neutral-100": "oklch(0.
|
|
85
|
-
readonly "color-neutral-200": "oklch(0.
|
|
86
|
-
readonly "color-neutral-300": "oklch(0.
|
|
87
|
-
readonly "color-neutral-400": "oklch(0.
|
|
88
|
-
readonly "color-neutral-500": "oklch(0.
|
|
89
|
-
readonly "color-neutral-600": "oklch(0.
|
|
90
|
-
readonly "color-neutral-700": "oklch(0.
|
|
91
|
-
readonly "color-neutral-800": "oklch(0.
|
|
92
|
-
readonly "color-neutral-
|
|
93
|
-
readonly "color-neutral-
|
|
90
|
+
readonly "color-neutral-0": "oklch(0.99 0 265)";
|
|
91
|
+
readonly "color-neutral-50": "oklch(0.96 0.002 265)";
|
|
92
|
+
readonly "color-neutral-100": "oklch(0.91 0.003 265)";
|
|
93
|
+
readonly "color-neutral-200": "oklch(0.85 0.004 265)";
|
|
94
|
+
readonly "color-neutral-300": "oklch(0.75 0.005 265)";
|
|
95
|
+
readonly "color-neutral-400": "oklch(0.65 0.007 265)";
|
|
96
|
+
readonly "color-neutral-500": "oklch(0.55 0.009 265)";
|
|
97
|
+
readonly "color-neutral-600": "oklch(0.46 0.011 265)";
|
|
98
|
+
readonly "color-neutral-700": "oklch(0.37 0.013 265)";
|
|
99
|
+
readonly "color-neutral-800": "oklch(0.29 0.015 265)";
|
|
100
|
+
readonly "color-neutral-850": "oklch(0.235 0.016 265)";
|
|
101
|
+
readonly "color-neutral-900": "oklch(0.185 0.017 265)";
|
|
102
|
+
readonly "color-neutral-950": "oklch(0.13 0.018 265)";
|
|
94
103
|
};
|
|
95
104
|
export type GrayscaleTokenType = keyof typeof GrayscaleTokens;
|
|
96
105
|
export declare const LetterSpacingTokens: {
|
|
97
|
-
readonly "letter-spacing-
|
|
106
|
+
readonly "letter-spacing-tighter": "-0.03em";
|
|
107
|
+
readonly "letter-spacing-tight": "-0.02em";
|
|
108
|
+
readonly "letter-spacing-snug": "-0.01em";
|
|
98
109
|
readonly "letter-spacing-normal": "0em";
|
|
99
110
|
readonly "letter-spacing-wide": "0.025em";
|
|
100
111
|
readonly "letter-spacing-wider": "0.05em";
|
|
@@ -104,10 +115,11 @@ export declare const LetterSpacingTokens: {
|
|
|
104
115
|
export type LetterSpacingTokenType = keyof typeof LetterSpacingTokens;
|
|
105
116
|
export declare const LineHeightTokens: {
|
|
106
117
|
readonly "line-height-none": "1";
|
|
107
|
-
readonly "line-height-
|
|
118
|
+
readonly "line-height-display": "1.05";
|
|
119
|
+
readonly "line-height-tight": "1.15";
|
|
120
|
+
readonly "line-height-snug": "1.3";
|
|
108
121
|
readonly "line-height-base": "1.5";
|
|
109
122
|
readonly "line-height-loose": "1.65";
|
|
110
|
-
readonly "line-height-display": "1.1";
|
|
111
123
|
readonly "line-height-unset": "unset";
|
|
112
124
|
};
|
|
113
125
|
export type LineHeightTokenType = keyof typeof LineHeightTokens;
|
|
@@ -143,12 +155,13 @@ export declare const RadiusTokens: {
|
|
|
143
155
|
export type RadiusTokenType = keyof typeof RadiusTokens;
|
|
144
156
|
export declare const ShadowTokens: {
|
|
145
157
|
readonly "shadow-none": "none";
|
|
146
|
-
readonly "shadow-xs": "0 1px 2px 0 rgba(0 0 0 / 0.
|
|
147
|
-
readonly "shadow-sm": "0 1px 3px 0 rgba(0 0 0 / 0.
|
|
148
|
-
readonly "shadow-md": "0 4px 6px -1px rgba(0 0 0 / 0.
|
|
149
|
-
readonly "shadow-lg": "0 10px 15px -3px rgba(0 0 0 / 0.
|
|
150
|
-
readonly "shadow-xl": "0 20px 25px -5px rgba(0 0 0 / 0.
|
|
151
|
-
readonly "shadow-
|
|
158
|
+
readonly "shadow-xs": "0 1px 2px 0 rgba(0 0 0 / 0.3)";
|
|
159
|
+
readonly "shadow-sm": "0 1px 3px 0 rgba(0 0 0 / 0.4), 0 1px 2px -1px rgba(0 0 0 / 0.4)";
|
|
160
|
+
readonly "shadow-md": "0 4px 6px -1px rgba(0 0 0 / 0.45), 0 2px 4px -2px rgba(0 0 0 / 0.4)";
|
|
161
|
+
readonly "shadow-lg": "0 10px 15px -3px rgba(0 0 0 / 0.5), 0 4px 6px -4px rgba(0 0 0 / 0.45)";
|
|
162
|
+
readonly "shadow-xl": "0 20px 25px -5px rgba(0 0 0 / 0.55), 0 8px 10px -6px rgba(0 0 0 / 0.5)";
|
|
163
|
+
readonly "shadow-raised": "inset 0 1px 0 rgba(255 255 255 / 0.12), 0 1px 2px 0 rgba(0 0 0 / 0.3)";
|
|
164
|
+
readonly "shadow-inner": "inset 0 1px 2px 0 rgba(0 0 0 / 0.35)";
|
|
152
165
|
readonly "shadow-unset": "unset";
|
|
153
166
|
};
|
|
154
167
|
export type ShadowTokenType = keyof typeof ShadowTokens;
|
|
@@ -196,14 +209,42 @@ export declare const ZIndexTokens: {
|
|
|
196
209
|
export type ZIndexTokenType = keyof typeof ZIndexTokens;
|
|
197
210
|
export declare const MotionTokens: {
|
|
198
211
|
readonly "motion-instant": "75ms";
|
|
199
|
-
readonly "motion-fast": "
|
|
200
|
-
readonly "motion-medium": "
|
|
201
|
-
readonly "motion-slow": "
|
|
212
|
+
readonly "motion-fast": "120ms";
|
|
213
|
+
readonly "motion-medium": "200ms";
|
|
214
|
+
readonly "motion-slow": "320ms";
|
|
215
|
+
readonly "ease-out": "cubic-bezier(0.16, 1, 0.3, 1)";
|
|
216
|
+
readonly "ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)";
|
|
217
|
+
readonly "ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
|
202
218
|
};
|
|
203
219
|
export type MotionTokenType = keyof typeof MotionTokens;
|
|
204
220
|
export declare const FocusRingTokens: {
|
|
205
221
|
readonly "focus-ring-brand": "var(--color-brand-500)";
|
|
206
|
-
readonly "focus-ring-neutral": "var(--
|
|
222
|
+
readonly "focus-ring-neutral": "var(--text-secondary)";
|
|
207
223
|
readonly "focus-ring-danger": "var(--color-danger-200)";
|
|
208
224
|
};
|
|
209
225
|
export type FocusRingTokenType = keyof typeof FocusRingTokens;
|
|
226
|
+
export declare const SemanticTokens: {
|
|
227
|
+
readonly "color-scheme": "dark";
|
|
228
|
+
readonly "surface-base": "var(--color-neutral-950)";
|
|
229
|
+
readonly "surface-raised": "var(--color-neutral-900)";
|
|
230
|
+
readonly "surface-overlay": "var(--color-neutral-850)";
|
|
231
|
+
readonly "surface-sunken": "var(--color-neutral-950)";
|
|
232
|
+
readonly "text-strong": "var(--color-neutral-100)";
|
|
233
|
+
readonly "text-primary": "var(--color-neutral-200)";
|
|
234
|
+
readonly "text-secondary": "var(--color-neutral-300)";
|
|
235
|
+
readonly "text-muted": "var(--color-neutral-400)";
|
|
236
|
+
readonly "text-disabled": "var(--color-neutral-500)";
|
|
237
|
+
readonly "text-inverted": "var(--color-neutral-950)";
|
|
238
|
+
readonly "text-link": "var(--color-brand-300)";
|
|
239
|
+
readonly "text-link-hover": "var(--color-brand-200)";
|
|
240
|
+
readonly "border-subtle": "var(--color-alpha-subtle)";
|
|
241
|
+
readonly "border-default": "var(--color-alpha-soft)";
|
|
242
|
+
readonly "border-strong": "var(--color-alpha-medium)";
|
|
243
|
+
readonly "interactive-rest": "var(--color-neutral-850)";
|
|
244
|
+
readonly "interactive-disabled": "var(--color-neutral-900)";
|
|
245
|
+
readonly "fill-muted": "var(--color-neutral-800)";
|
|
246
|
+
readonly "fill-strong": "var(--color-neutral-700)";
|
|
247
|
+
readonly "fill-inverted": "var(--color-neutral-200)";
|
|
248
|
+
readonly "fill-inverted-hover": "var(--color-neutral-0)";
|
|
249
|
+
};
|
|
250
|
+
export type SemanticTokenType = keyof typeof SemanticTokens;
|
package/dist/lib.js
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
// dist/lib.ts
|
|
2
|
+
var AlphaTokens = {
|
|
3
|
+
"color-alpha-subtle": "rgba(255 255 255 / 0.06)",
|
|
4
|
+
"color-alpha-soft": "rgba(255 255 255 / 0.1)",
|
|
5
|
+
"color-alpha-medium": "rgba(255 255 255 / 0.16)",
|
|
6
|
+
};
|
|
2
7
|
var BackdropsTokens = {
|
|
3
8
|
"backdrop-none": "none",
|
|
4
9
|
"backdrop-weak": "rgba(0 0 0 / 0.35)",
|
|
@@ -23,16 +28,16 @@ var BorderStyleTokens = {
|
|
|
23
28
|
"border-style-double": "double",
|
|
24
29
|
};
|
|
25
30
|
var BrandTokens = {
|
|
26
|
-
"color-brand-50": "oklch(0.94 0.
|
|
27
|
-
"color-brand-100": "oklch(0.86 0.
|
|
28
|
-
"color-brand-200": "oklch(0.78 0.
|
|
29
|
-
"color-brand-300": "oklch(0.67 0.
|
|
30
|
-
"color-brand-400": "oklch(0.
|
|
31
|
-
"color-brand-500": "oklch(0.
|
|
32
|
-
"color-brand-600": "oklch(0.
|
|
33
|
-
"color-brand-700": "oklch(0.
|
|
34
|
-
"color-brand-800": "oklch(0.24 0.
|
|
35
|
-
"color-brand-900": "oklch(0.18 0.
|
|
31
|
+
"color-brand-50": "oklch(0.94 0.06 255)",
|
|
32
|
+
"color-brand-100": "oklch(0.86 0.09 255)",
|
|
33
|
+
"color-brand-200": "oklch(0.78 0.11 255)",
|
|
34
|
+
"color-brand-300": "oklch(0.67 0.14 255)",
|
|
35
|
+
"color-brand-400": "oklch(0.58 0.155 255)",
|
|
36
|
+
"color-brand-500": "oklch(0.50 0.165 255)",
|
|
37
|
+
"color-brand-600": "oklch(0.40 0.155 255)",
|
|
38
|
+
"color-brand-700": "oklch(0.31 0.14 255)",
|
|
39
|
+
"color-brand-800": "oklch(0.24 0.12 255)",
|
|
40
|
+
"color-brand-900": "oklch(0.18 0.10 255)",
|
|
36
41
|
};
|
|
37
42
|
var BreakpointTokens = {
|
|
38
43
|
"breakpoint-md": "768px",
|
|
@@ -47,9 +52,11 @@ var DangerTokens = {
|
|
|
47
52
|
"color-danger-900": "oklch(0.22 0.11 28)",
|
|
48
53
|
};
|
|
49
54
|
var FontFamilyTokens = {
|
|
50
|
-
"font-family-sans":
|
|
51
|
-
|
|
52
|
-
"font-family-
|
|
55
|
+
"font-family-sans":
|
|
56
|
+
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
|
|
57
|
+
"font-family-serif": 'Georgia, Cambria, "Times New Roman", Times, serif',
|
|
58
|
+
"font-family-mono":
|
|
59
|
+
'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
|
|
53
60
|
};
|
|
54
61
|
var FontSizeTokens = {
|
|
55
62
|
"font-size-xs": "0.75rem",
|
|
@@ -60,32 +67,37 @@ var FontSizeTokens = {
|
|
|
60
67
|
"font-size-2xl": "1.5rem",
|
|
61
68
|
"font-size-3xl": "1.875rem",
|
|
62
69
|
"font-size-4xl": "2.25rem",
|
|
63
|
-
"font-size-5xl": "3rem",
|
|
70
|
+
"font-size-5xl": "clamp(2.25rem, 1.75rem + 2.5vw, 3rem)",
|
|
71
|
+
"font-size-6xl": "clamp(2.75rem, 2rem + 3.75vw, 3.75rem)",
|
|
64
72
|
};
|
|
65
73
|
var FontWeightTokens = {
|
|
66
74
|
"font-weight-light": "300",
|
|
67
75
|
"font-weight-regular": "400",
|
|
68
76
|
"font-weight-medium": "500",
|
|
77
|
+
"font-weight-semibold": "600",
|
|
69
78
|
"font-weight-bold": "700",
|
|
70
79
|
"font-weight-black": "900",
|
|
71
80
|
"font-weight-unset": "unset",
|
|
72
81
|
};
|
|
73
82
|
var GrayscaleTokens = {
|
|
74
|
-
"color-neutral-0": "oklch(0.
|
|
75
|
-
"color-neutral-50": "oklch(0.
|
|
76
|
-
"color-neutral-100": "oklch(0.
|
|
77
|
-
"color-neutral-200": "oklch(0.
|
|
78
|
-
"color-neutral-300": "oklch(0.
|
|
79
|
-
"color-neutral-400": "oklch(0.
|
|
80
|
-
"color-neutral-500": "oklch(0.
|
|
81
|
-
"color-neutral-600": "oklch(0.
|
|
82
|
-
"color-neutral-700": "oklch(0.
|
|
83
|
-
"color-neutral-800": "oklch(0.
|
|
84
|
-
"color-neutral-
|
|
85
|
-
"color-neutral-
|
|
83
|
+
"color-neutral-0": "oklch(0.99 0 265)",
|
|
84
|
+
"color-neutral-50": "oklch(0.96 0.002 265)",
|
|
85
|
+
"color-neutral-100": "oklch(0.91 0.003 265)",
|
|
86
|
+
"color-neutral-200": "oklch(0.85 0.004 265)",
|
|
87
|
+
"color-neutral-300": "oklch(0.75 0.005 265)",
|
|
88
|
+
"color-neutral-400": "oklch(0.65 0.007 265)",
|
|
89
|
+
"color-neutral-500": "oklch(0.55 0.009 265)",
|
|
90
|
+
"color-neutral-600": "oklch(0.46 0.011 265)",
|
|
91
|
+
"color-neutral-700": "oklch(0.37 0.013 265)",
|
|
92
|
+
"color-neutral-800": "oklch(0.29 0.015 265)",
|
|
93
|
+
"color-neutral-850": "oklch(0.235 0.016 265)",
|
|
94
|
+
"color-neutral-900": "oklch(0.185 0.017 265)",
|
|
95
|
+
"color-neutral-950": "oklch(0.13 0.018 265)",
|
|
86
96
|
};
|
|
87
97
|
var LetterSpacingTokens = {
|
|
88
|
-
"letter-spacing-
|
|
98
|
+
"letter-spacing-tighter": "-0.03em",
|
|
99
|
+
"letter-spacing-tight": "-0.02em",
|
|
100
|
+
"letter-spacing-snug": "-0.01em",
|
|
89
101
|
"letter-spacing-normal": "0em",
|
|
90
102
|
"letter-spacing-wide": "0.025em",
|
|
91
103
|
"letter-spacing-wider": "0.05em",
|
|
@@ -94,10 +106,11 @@ var LetterSpacingTokens = {
|
|
|
94
106
|
};
|
|
95
107
|
var LineHeightTokens = {
|
|
96
108
|
"line-height-none": "1",
|
|
97
|
-
"line-height-
|
|
109
|
+
"line-height-display": "1.05",
|
|
110
|
+
"line-height-tight": "1.15",
|
|
111
|
+
"line-height-snug": "1.3",
|
|
98
112
|
"line-height-base": "1.5",
|
|
99
113
|
"line-height-loose": "1.65",
|
|
100
|
-
"line-height-display": "1.1",
|
|
101
114
|
"line-height-unset": "unset",
|
|
102
115
|
};
|
|
103
116
|
var OpacityTokens = {
|
|
@@ -129,16 +142,18 @@ var RadiusTokens = {
|
|
|
129
142
|
};
|
|
130
143
|
var ShadowTokens = {
|
|
131
144
|
"shadow-none": "none",
|
|
132
|
-
"shadow-xs": "0 1px 2px 0 rgba(0 0 0 / 0.
|
|
145
|
+
"shadow-xs": "0 1px 2px 0 rgba(0 0 0 / 0.3)",
|
|
133
146
|
"shadow-sm":
|
|
134
|
-
"0 1px 3px 0 rgba(0 0 0 / 0.
|
|
147
|
+
"0 1px 3px 0 rgba(0 0 0 / 0.4), 0 1px 2px -1px rgba(0 0 0 / 0.4)",
|
|
135
148
|
"shadow-md":
|
|
136
|
-
"0 4px 6px -1px rgba(0 0 0 / 0.
|
|
149
|
+
"0 4px 6px -1px rgba(0 0 0 / 0.45), 0 2px 4px -2px rgba(0 0 0 / 0.4)",
|
|
137
150
|
"shadow-lg":
|
|
138
|
-
"0 10px 15px -3px rgba(0 0 0 / 0.
|
|
151
|
+
"0 10px 15px -3px rgba(0 0 0 / 0.5), 0 4px 6px -4px rgba(0 0 0 / 0.45)",
|
|
139
152
|
"shadow-xl":
|
|
140
|
-
"0 20px 25px -5px rgba(0 0 0 / 0.
|
|
141
|
-
"shadow-
|
|
153
|
+
"0 20px 25px -5px rgba(0 0 0 / 0.55), 0 8px 10px -6px rgba(0 0 0 / 0.5)",
|
|
154
|
+
"shadow-raised":
|
|
155
|
+
"inset 0 1px 0 rgba(255 255 255 / 0.12), 0 1px 2px 0 rgba(0 0 0 / 0.3)",
|
|
156
|
+
"shadow-inner": "inset 0 1px 2px 0 rgba(0 0 0 / 0.35)",
|
|
142
157
|
"shadow-unset": "unset",
|
|
143
158
|
};
|
|
144
159
|
var SizeTokens = {
|
|
@@ -181,16 +196,44 @@ var ZIndexTokens = {
|
|
|
181
196
|
};
|
|
182
197
|
var MotionTokens = {
|
|
183
198
|
"motion-instant": "75ms",
|
|
184
|
-
"motion-fast": "
|
|
185
|
-
"motion-medium": "
|
|
186
|
-
"motion-slow": "
|
|
199
|
+
"motion-fast": "120ms",
|
|
200
|
+
"motion-medium": "200ms",
|
|
201
|
+
"motion-slow": "320ms",
|
|
202
|
+
"ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
203
|
+
"ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
|
|
204
|
+
"ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
187
205
|
};
|
|
188
206
|
var FocusRingTokens = {
|
|
189
207
|
"focus-ring-brand": "var(--color-brand-500)",
|
|
190
|
-
"focus-ring-neutral": "var(--
|
|
208
|
+
"focus-ring-neutral": "var(--text-secondary)",
|
|
191
209
|
"focus-ring-danger": "var(--color-danger-200)",
|
|
192
210
|
};
|
|
211
|
+
var SemanticTokens = {
|
|
212
|
+
"color-scheme": "dark",
|
|
213
|
+
"surface-base": "var(--color-neutral-950)",
|
|
214
|
+
"surface-raised": "var(--color-neutral-900)",
|
|
215
|
+
"surface-overlay": "var(--color-neutral-850)",
|
|
216
|
+
"surface-sunken": "var(--color-neutral-950)",
|
|
217
|
+
"text-strong": "var(--color-neutral-100)",
|
|
218
|
+
"text-primary": "var(--color-neutral-200)",
|
|
219
|
+
"text-secondary": "var(--color-neutral-300)",
|
|
220
|
+
"text-muted": "var(--color-neutral-400)",
|
|
221
|
+
"text-disabled": "var(--color-neutral-500)",
|
|
222
|
+
"text-inverted": "var(--color-neutral-950)",
|
|
223
|
+
"text-link": "var(--color-brand-300)",
|
|
224
|
+
"text-link-hover": "var(--color-brand-200)",
|
|
225
|
+
"border-subtle": "var(--color-alpha-subtle)",
|
|
226
|
+
"border-default": "var(--color-alpha-soft)",
|
|
227
|
+
"border-strong": "var(--color-alpha-medium)",
|
|
228
|
+
"interactive-rest": "var(--color-neutral-850)",
|
|
229
|
+
"interactive-disabled": "var(--color-neutral-900)",
|
|
230
|
+
"fill-muted": "var(--color-neutral-800)",
|
|
231
|
+
"fill-strong": "var(--color-neutral-700)",
|
|
232
|
+
"fill-inverted": "var(--color-neutral-200)",
|
|
233
|
+
"fill-inverted-hover": "var(--color-neutral-0)",
|
|
234
|
+
};
|
|
193
235
|
export {
|
|
236
|
+
AlphaTokens,
|
|
194
237
|
BackdropsTokens,
|
|
195
238
|
BorderStyleTokens,
|
|
196
239
|
BorderWidthTokens,
|
|
@@ -208,6 +251,7 @@ export {
|
|
|
208
251
|
OpacityTokens,
|
|
209
252
|
PositiveTokens,
|
|
210
253
|
RadiusTokens,
|
|
254
|
+
SemanticTokens,
|
|
211
255
|
ShadowTokens,
|
|
212
256
|
SizeTokens,
|
|
213
257
|
SpacingTokens,
|