@transcodes/design-tokens 0.1.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.
Files changed (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +202 -0
  3. package/build/components.css +501 -0
  4. package/build/components.d.ts +6 -0
  5. package/build/components.js +509 -0
  6. package/build/tokens-dark.css +27 -0
  7. package/build/tokens.css +187 -0
  8. package/build/tokens.d.ts +271 -0
  9. package/build/tokens.json +183 -0
  10. package/package.json +56 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Transcodes
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,202 @@
1
+ # @transcodes/design-tokens
2
+
3
+ A comprehensive design token system built with [Style Dictionary](https://amzn.github.io/style-dictionary/). Features dark mode support, WCAG AA accessibility compliance, and responsive design values.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@transcodes/design-tokens.svg)](https://www.npmjs.com/package/@transcodes/design-tokens)
6
+ [![license](https://img.shields.io/npm/l/@transcodes/design-tokens.svg)](https://github.com/transcodings/transcodes-ui/blob/main/packages/design-tokens/LICENSE)
7
+
8
+ ## Features
9
+
10
+ - **Dark Mode Support** - Built-in light and dark themes with `data-theme` attribute
11
+ - **WCAG AA Compliant** - All color combinations meet accessibility contrast requirements
12
+ - **Responsive Values** - Fluid typography and spacing using CSS `clamp()`
13
+ - **TypeScript Support** - Full type definitions included
14
+ - **Zero Runtime** - Pure CSS variables with no JavaScript required
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install @transcodes/design-tokens
20
+ # or
21
+ yarn add @transcodes/design-tokens
22
+ # or
23
+ pnpm add @transcodes/design-tokens
24
+ # or
25
+ bun add @transcodes/design-tokens
26
+ ```
27
+
28
+ ## Quick Start
29
+
30
+ ### 1. Import the tokens
31
+
32
+ ```typescript
33
+ // Import base tokens (light theme by default)
34
+ import '@transcodes/design-tokens';
35
+
36
+ // Optional: Import dark theme support
37
+ import '@transcodes/design-tokens/tokens-dark.css';
38
+
39
+ // Optional: Import component utility classes
40
+ import '@transcodes/design-tokens/components.css';
41
+ ```
42
+
43
+ ### 2. Use CSS variables in your styles
44
+
45
+ ```css
46
+ .card {
47
+ color: var(--ink-black);
48
+ background: var(--paper-white);
49
+ padding: var(--space-md);
50
+ border-radius: var(--radius-md);
51
+ box-shadow: var(--shadow-sm);
52
+ transition: box-shadow var(--transition-smooth);
53
+ }
54
+
55
+ .card:hover {
56
+ box-shadow: var(--shadow-md);
57
+ }
58
+ ```
59
+
60
+ ### 3. Enable dark mode
61
+
62
+ ```html
63
+ <!-- Light theme (default) -->
64
+ <html data-theme="light">
65
+
66
+ <!-- Dark theme -->
67
+ <html data-theme="dark">
68
+ ```
69
+
70
+ ```javascript
71
+ // Toggle theme with JavaScript
72
+ function toggleTheme() {
73
+ const current = document.documentElement.getAttribute('data-theme');
74
+ const next = current === 'dark' ? 'light' : 'dark';
75
+ document.documentElement.setAttribute('data-theme', next);
76
+ }
77
+ ```
78
+
79
+ ## Available Tokens
80
+
81
+ ### Colors
82
+
83
+ | Token | Light | Dark | Usage |
84
+ |-------|-------|------|-------|
85
+ | `--ink-black` | #1a1a1a | #ffffff | Primary text |
86
+ | `--ink-dark` | #2d2d2d | #e5e5e5 | Secondary text |
87
+ | `--ink-medium` | #5c5c5c | #a3a3a3 | Tertiary text |
88
+ | `--ink-light` | #8a8a8a | #737373 | Placeholder text |
89
+ | `--ink-faint` | #c4c4c4 | #525252 | Decorative elements |
90
+ | `--paper-white` | #faf9fc | #1a1a1a | Primary background |
91
+ | `--paper-cream` | #f5f4f8 | #2d2d2d | Secondary background |
92
+ | `--paper-warm` | #ebe9f0 | #404040 | Tertiary background |
93
+ | `--accent-primary` | #6b4fd9 | #8b7ae8 | Brand accent |
94
+ | `--accent-success` | #357a46 | #4ade80 | Success state |
95
+ | `--error-base` | #c0392b | #f87171 | Error state |
96
+
97
+ ### Spacing
98
+
99
+ All spacing values are responsive and scale with viewport width.
100
+
101
+ | Token | Value Range |
102
+ |-------|-------------|
103
+ | `--space-xs` | 4px - 5px |
104
+ | `--space-sm` | 8px - 10px |
105
+ | `--space-md` | 14px - 20px |
106
+ | `--space-lg` | 20px - 32px |
107
+ | `--space-xl` | 24px - 44px |
108
+ | `--space-2xl` | 32px - 72px |
109
+
110
+ ### Typography
111
+
112
+ ```css
113
+ /* Font families */
114
+ --font-body: 'DM Sans', system-ui, sans-serif;
115
+ --font-mono: 'JetBrains Mono', monospace;
116
+
117
+ /* Font sizes (fluid) */
118
+ --font-size-sm /* 13px - 14px */
119
+ --font-size-base /* 14px - 16px */
120
+ --font-size-lg /* 16px - 18px */
121
+ --font-size-xl /* 20px - 24px */
122
+ --font-size-2xl /* 24px - 32px */
123
+
124
+ /* Line heights */
125
+ --line-height-tight: 1.25;
126
+ --line-height-normal: 1.5;
127
+ --line-height-relaxed: 1.75;
128
+ ```
129
+
130
+ ### Layout
131
+
132
+ ```css
133
+ /* Breakpoints */
134
+ --breakpoint-sm: 640px;
135
+ --breakpoint-md: 768px;
136
+ --breakpoint-lg: 1024px;
137
+ --breakpoint-xl: 1280px;
138
+
139
+ /* Border radius */
140
+ --radius-sm: 4px;
141
+ --radius-md: 8px;
142
+ --radius-lg: 12px;
143
+ --radius-full: 9999px;
144
+
145
+ /* Z-index scale */
146
+ --z-index-dropdown: 1000;
147
+ --z-index-sticky: 1020;
148
+ --z-index-modal: 1050;
149
+ --z-index-tooltip: 1070;
150
+ ```
151
+
152
+ ### Animation
153
+
154
+ ```css
155
+ --transition-fast: 150ms ease;
156
+ --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
157
+ --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
158
+ ```
159
+
160
+ ## TypeScript Support
161
+
162
+ ```typescript
163
+ import type { DesignTokens } from '@transcodes/design-tokens/types';
164
+ ```
165
+
166
+ ## Exports
167
+
168
+ | Path | Description |
169
+ |------|-------------|
170
+ | `@transcodes/design-tokens` | Base CSS variables (light theme) |
171
+ | `@transcodes/design-tokens/tokens-dark.css` | Dark theme overrides |
172
+ | `@transcodes/design-tokens/components.css` | Component utility classes |
173
+ | `@transcodes/design-tokens/types` | TypeScript type definitions |
174
+ | `@transcodes/design-tokens/json` | Raw token values as JSON |
175
+
176
+ ## Accessibility
177
+
178
+ All primary color combinations meet WCAG AA standards (4.5:1 minimum contrast ratio):
179
+
180
+ | Combination | Ratio | Level |
181
+ |-------------|-------|-------|
182
+ | ink-black on paper-white | 15.8:1 | AAA |
183
+ | ink-dark on paper-white | 12.5:1 | AAA |
184
+ | ink-medium on paper-white | 6.0:1 | AA |
185
+ | accent-primary on paper-white | 4.5:1 | AA |
186
+
187
+ ## Browser Support
188
+
189
+ This package uses CSS custom properties (CSS variables) and `clamp()` for responsive values. Supported in all modern browsers:
190
+
191
+ - Chrome 79+
192
+ - Firefox 75+
193
+ - Safari 13.1+
194
+ - Edge 79+
195
+
196
+ ## Related Packages
197
+
198
+ - [@transcodes/ui-components](https://www.npmjs.com/package/@transcodes/ui-components) - Lit 3.x component library using these tokens
199
+
200
+ ## License
201
+
202
+ [MIT](./LICENSE)
package/build/components.css ADDED
@@ -0,0 +1,501 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ /* Animations */
6
+ @keyframes fadeInUp {
7
+ 0% {
8
+ opacity: 0;
9
+ transform: translateY(1rem);
10
+ }
11
+ 100% {
12
+ opacity: 1;
13
+ transform: translateY(0);
14
+ }
15
+ }
16
+
17
+ @keyframes slideDown {
18
+ 0% {
19
+ opacity: 0;
20
+ transform: translateY(-0.5rem);
21
+ }
22
+ 100% {
23
+ opacity: 1;
24
+ transform: translateY(0);
25
+ }
26
+ }
27
+
28
+ @keyframes slideUp {
29
+ 0% {
30
+ opacity: 0;
31
+ transform: translateY(0.5rem);
32
+ }
33
+ 100% {
34
+ opacity: 1;
35
+ transform: translateY(0);
36
+ }
37
+ }
38
+
39
+ @keyframes spin {
40
+ to {
41
+ transform: rotate(360deg);
42
+ }
43
+ }
44
+
45
+ @keyframes shake {
46
+ 0%, 100% {
47
+ transform: translateX(0);
48
+ }
49
+ 25% {
50
+ transform: translateX(-0.25rem);
51
+ }
52
+ 75% {
53
+ transform: translateX(0.25rem);
54
+ }
55
+ }
56
+
57
+ @keyframes inkFloat {
58
+ 0%, 100% {
59
+ transform: translate(0, 0) scale(1);
60
+ opacity: 0.5;
61
+ }
62
+ 50% {
63
+ transform: translate(0.625rem, -0.625rem) scale(1.1);
64
+ opacity: 0.7;
65
+ }
66
+ }
67
+
68
+ @keyframes inkDrift {
69
+ 0%, 100% {
70
+ transform: translate(0, 0) rotate(0deg);
71
+ opacity: 0.4;
72
+ }
73
+ 33% {
74
+ transform: translate(-0.5rem, 0.5rem) rotate(-5deg);
75
+ opacity: 0.6;
76
+ }
77
+ 66% {
78
+ transform: translate(0.375rem, -0.375rem) rotate(3deg);
79
+ opacity: 0.5;
80
+ }
81
+ }
82
+
83
+ @keyframes inkSpread {
84
+ 0% {
85
+ transform: scale(0);
86
+ opacity: 0.4;
87
+ }
88
+ 100% {
89
+ transform: scale(var(--ink-effect-spread-scale, 2.5));
90
+ opacity: 0;
91
+ }
92
+ }
93
+
94
+ /* Page Layout */
95
+ .page-container {
96
+ position: relative;
97
+ width: 100%;
98
+ max-width: var(--page-container-max-width);
99
+ margin: 0 auto;
100
+ padding: 0 var(--page-container-padding);
101
+ animation: fadeInUp 600ms var(--transition-smooth) both;
102
+ }
103
+
104
+ .page-container--wide {
105
+ max-width: var(--page-container-max-width-wide);
106
+ }
107
+
108
+ .page-card {
109
+ background: var(--paper-white);
110
+ padding: var(--page-card-padding);
111
+ border-radius: var(--page-card-radius);
112
+ box-shadow: var(--shadow-card);
113
+ position: relative;
114
+ overflow: hidden;
115
+ }
116
+
117
+ .page-card::before {
118
+ content: '';
119
+ position: absolute;
120
+ inset: 0;
121
+ border-radius: inherit;
122
+ padding: var(--space-fixed-2xs);
123
+ background: linear-gradient(135deg, var(--alpha-primary08) 0%, transparent 50%, var(--alpha-primary04) 100%);
124
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
125
+ -webkit-mask-composite: xor;
126
+ mask-composite: exclude;
127
+ pointer-events: none;
128
+ }
129
+
130
+ .page-card--centered {
131
+ text-align: center;
132
+ }
133
+
134
+ /* Page Decoration - Ink effect backgrounds */
135
+ .page-decoration {
136
+ position: absolute;
137
+ border-radius: 50%;
138
+ filter: blur(3.75rem);
139
+ pointer-events: none;
140
+ z-index: 0;
141
+ }
142
+
143
+ .page-decoration--primary {
144
+ background: var(--alpha-primary15);
145
+ }
146
+
147
+ .page-decoration--success {
148
+ background: var(--alpha-success15);
149
+ }
150
+
151
+ .page-decoration--float {
152
+ animation: inkFloat 4s ease-in-out infinite;
153
+ }
154
+
155
+ .page-decoration--drift {
156
+ animation: inkDrift 5s ease-in-out infinite;
157
+ }
158
+
159
+ /* Buttons */
160
+ .button {
161
+ height: var(--button-height);
162
+ padding: 0 var(--space-lg);
163
+ font-family: var(--font-body);
164
+ font-size: var(--button-font-size);
165
+ font-weight: var(--button-font-weight);
166
+ letter-spacing: var(--button-letter-spacing);
167
+ border: var(--space-fixed-2xs) solid transparent;
168
+ border-radius: var(--button-radius);
169
+ cursor: pointer;
170
+ transition: background var(--transition-fast), transform var(--transition-fast);
171
+ }
172
+
173
+ .button-primary {
174
+ background: var(--accent-primary);
175
+ color: var(--paper-white);
176
+ }
177
+
178
+ .button-primary:hover:not(:disabled) {
179
+ background: var(--accent-primary-hover);
180
+ box-shadow: var(--shadow-button-hover-primary);
181
+ transform: translateY(calc(-1 * var(--space-fixed-2xs)));
182
+ }
183
+
184
+ .button-success {
185
+ background: var(--accent-success);
186
+ color: var(--paper-white);
187
+ }
188
+
189
+ .button-success:hover:not(:disabled) {
190
+ background: var(--accent-success-hover);
191
+ box-shadow: var(--shadow-button-hover-success);
192
+ transform: translateY(calc(-1 * var(--space-fixed-2xs)));
193
+ }
194
+
195
+ .button-secondary {
196
+ height: var(--button-height-secondary);
197
+ background: transparent;
198
+ color: var(--ink-dark);
199
+ border: var(--space-fixed-2xs) solid var(--ink-faint);
200
+ }
201
+
202
+ .button-secondary:hover:not(:disabled) {
203
+ color: var(--accent-primary);
204
+ border-color: var(--accent-primary);
205
+ background: var(--alpha-primary04);
206
+ }
207
+
208
+ .button:disabled {
209
+ cursor: not-allowed;
210
+ opacity: 0.7;
211
+ }
212
+
213
+ /* Text Button */
214
+ .text-button {
215
+ display: inline-flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ height: var(--button-text-height);
219
+ padding: var(--space-sm) var(--space-md);
220
+ font-family: var(--font-body);
221
+ font-size: var(--button-text-font-size);
222
+ font-weight: 500;
223
+ color: var(--ink-dark);
224
+ background: transparent;
225
+ border: none;
226
+ border-radius: var(--radius-md);
227
+ cursor: pointer;
228
+ transition: background var(--transition-fast), color var(--transition-fast);
229
+ }
230
+
231
+ .text-button:hover {
232
+ background: var(--paper-cream);
233
+ color: var(--accent-primary);
234
+ }
235
+
236
+ .text-button-sm {
237
+ height: auto;
238
+ padding: var(--space-xs) var(--space-sm);
239
+ font-size: 0.8125rem;
240
+ }
241
+
242
+ .text-button-md {
243
+ height: auto;
244
+ padding: var(--space-sm) var(--space-md);
245
+ }
246
+
247
+ /* Button Content Layout */
248
+ .button-content {
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ gap: var(--button-content-gap);
253
+ }
254
+
255
+ .button-icon {
256
+ display: flex;
257
+ align-items: center;
258
+ justify-content: center;
259
+ flex-shrink: 0;
260
+ }
261
+
262
+ .button-text {
263
+ flex: 1;
264
+ text-align: center;
265
+ }
266
+
267
+ /* Button Spinner */
268
+ .button-spinner {
269
+ width: var(--button-spinner-size);
270
+ height: var(--button-spinner-size);
271
+ border: var(--button-spinner-border-width) solid currentColor;
272
+ border-top-color: transparent;
273
+ border-radius: 50%;
274
+ animation: spin 600ms linear infinite;
275
+ }
276
+
277
+ /* Button Ink Ripple Effect */
278
+ .button-ink {
279
+ position: relative;
280
+ overflow: hidden;
281
+ }
282
+
283
+ .button-ink::after {
284
+ content: '';
285
+ position: absolute;
286
+ top: 50%;
287
+ left: 50%;
288
+ width: 21.875rem;
289
+ height: 21.875rem;
290
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, transparent 70%);
291
+ transform: translate(-50%, -50%) scale(0);
292
+ border-radius: 50%;
293
+ pointer-events: none;
294
+ transition: transform var(--ink-effect-ripple-duration, 600ms) var(--ink-effect-ripple-easing, cubic-bezier(0.4, 0, 0.2, 1)),
295
+ opacity var(--ink-effect-fade-duration, 300ms) ease;
296
+ opacity: 0;
297
+ }
298
+
299
+ .button-ink:hover::after {
300
+ transform: translate(-50%, -50%) scale(1);
301
+ opacity: 1;
302
+ }
303
+
304
+ .button-ink:active::after {
305
+ transform: translate(-50%, -50%) scale(0.8);
306
+ opacity: 0.8;
307
+ }
308
+
309
+ /* Card */
310
+ .card {
311
+ background: var(--paper-white);
312
+ padding: var(--card-padding);
313
+ border-radius: var(--card-radius);
314
+ box-shadow: var(--shadow-card);
315
+ position: relative;
316
+ overflow: hidden;
317
+ }
318
+
319
+ /* Container */
320
+ .container {
321
+ position: relative;
322
+ width: 100%;
323
+ max-width: var(--container-max-width);
324
+ }
325
+
326
+ .container-wide {
327
+ max-width: var(--container-max-width-wide);
328
+ }
329
+
330
+ /* Form Layout */
331
+ .form-header {
332
+ text-align: center;
333
+ margin-bottom: var(--form-header-margin-bottom);
334
+ }
335
+
336
+ .form-title {
337
+ font-family: var(--font-body);
338
+ font-size: var(--title-font-size);
339
+ font-weight: var(--title-font-weight);
340
+ color: var(--ink-black);
341
+ letter-spacing: var(--title-letter-spacing);
342
+ animation: slideDown 400ms var(--transition-smooth) 200ms both;
343
+ }
344
+
345
+ .form-subtitle {
346
+ font-size: var(--form-subtitle-font-size);
347
+ color: var(--ink-medium);
348
+ margin-top: var(--space-sm);
349
+ animation: fadeInUp 400ms var(--transition-smooth) 400ms both;
350
+ }
351
+
352
+ .form-fields {
353
+ display: flex;
354
+ flex-direction: column;
355
+ gap: var(--form-fields-gap);
356
+ }
357
+
358
+ .form-footer {
359
+ margin-top: var(--form-footer-margin-top);
360
+ text-align: center;
361
+ animation: fadeInUp 400ms var(--transition-smooth) 600ms both;
362
+ }
363
+
364
+ /* Field Group */
365
+ .field-group {
366
+ display: flex;
367
+ flex-direction: column;
368
+ gap: var(--field-group-gap);
369
+ }
370
+
371
+ .field-label {
372
+ display: block;
373
+ font-size: var(--label-font-size);
374
+ font-weight: var(--label-font-weight);
375
+ text-transform: uppercase;
376
+ letter-spacing: var(--label-letter-spacing);
377
+ color: var(--ink-medium);
378
+ transition: color var(--transition-fast);
379
+ }
380
+
381
+ .field-group.focused .field-label {
382
+ color: var(--accent-primary);
383
+ }
384
+
385
+ .required-mark {
386
+ color: var(--accent-primary);
387
+ margin-left: var(--space-2xs);
388
+ }
389
+
390
+ /* Input */
391
+ .input {
392
+ width: 100%;
393
+ padding: var(--input-padding-y) var(--input-padding-x);
394
+ font-family: var(--font-body);
395
+ font-size: var(--input-font-size);
396
+ color: var(--ink-black);
397
+ background: var(--paper-cream);
398
+ border: var(--space-fixed-2xs) solid transparent;
399
+ border-radius: var(--input-radius);
400
+ transition: background var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);
401
+ }
402
+
403
+ .input::placeholder {
404
+ color: var(--ink-faint);
405
+ }
406
+
407
+ .input:hover {
408
+ background: var(--paper-warm);
409
+ }
410
+
411
+ .input:focus {
412
+ outline: none;
413
+ background: var(--paper-white);
414
+ border-color: var(--ink-faint);
415
+ box-shadow: var(--shadow-input-focus);
416
+ }
417
+
418
+ /* Label */
419
+ .label {
420
+ display: block;
421
+ font-size: var(--label-font-size);
422
+ font-weight: var(--label-font-weight);
423
+ text-transform: uppercase;
424
+ letter-spacing: var(--label-letter-spacing);
425
+ color: var(--ink-medium);
426
+ margin-bottom: var(--space-sm);
427
+ transition: color var(--transition-fast);
428
+ }
429
+
430
+ /* Title */
431
+ .title {
432
+ font-family: var(--font-body);
433
+ font-size: var(--title-font-size);
434
+ font-weight: var(--title-font-weight);
435
+ color: var(--ink-black);
436
+ letter-spacing: var(--title-letter-spacing);
437
+ }
438
+
439
+ /* Feedback */
440
+ .error-message {
441
+ display: flex;
442
+ align-items: flex-start;
443
+ gap: var(--feedback-error-gap);
444
+ padding: var(--feedback-error-padding);
445
+ background: var(--error-bg);
446
+ border: var(--space-fixed-2xs) solid var(--error-border);
447
+ border-radius: var(--feedback-error-radius);
448
+ color: var(--error-base);
449
+ animation: slideDown 300ms var(--transition-smooth) both;
450
+ }
451
+
452
+ .error-icon {
453
+ display: flex;
454
+ align-items: center;
455
+ justify-content: center;
456
+ flex-shrink: 0;
457
+ width: var(--feedback-error-icon-size);
458
+ height: var(--feedback-error-icon-size);
459
+ color: var(--error-base);
460
+ }
461
+
462
+ .error-message.shake {
463
+ animation: shake 400ms var(--transition-smooth);
464
+ }
465
+
466
+ /* Notice */
467
+ .notice {
468
+ display: flex;
469
+ align-items: flex-start;
470
+ gap: var(--feedback-notice-gap);
471
+ padding: var(--feedback-notice-padding);
472
+ border-radius: var(--feedback-notice-radius);
473
+ animation: slideUp 400ms var(--transition-smooth) both;
474
+ }
475
+
476
+ .notice-icon {
477
+ display: flex;
478
+ align-items: center;
479
+ justify-content: center;
480
+ flex-shrink: 0;
481
+ width: var(--feedback-notice-icon-size);
482
+ height: var(--feedback-notice-icon-size);
483
+ }
484
+
485
+ .notice-success {
486
+ background: rgba(53, 122, 70, 0.08);
487
+ border: var(--space-fixed-2xs) solid rgba(53, 122, 70, 0.2);
488
+ color: var(--accent-success);
489
+ }
490
+
491
+ .notice-warning {
492
+ background: rgba(180, 83, 9, 0.08);
493
+ border: var(--space-fixed-2xs) solid rgba(180, 83, 9, 0.2);
494
+ color: var(--semantic-warning);
495
+ }
496
+
497
+ .notice-info {
498
+ background: rgba(3, 105, 161, 0.08);
499
+ border: var(--space-fixed-2xs) solid rgba(3, 105, 161, 0.2);
500
+ color: var(--semantic-info);
501
+ }
package/build/components.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export declare const componentStyles: string;
6
+ export default componentStyles;