@transcodes/design-tokens 0.3.0 → 0.3.2
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/CHANGELOG.md +52 -0
- package/README.md +81 -40
- package/build/components.css +1 -501
- package/build/index.js +4 -0
- package/build/tokens-dark.css +1 -27
- package/build/tokens.css +1 -195
- package/package.json +10 -3
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
8
|
+
## [0.3.1] - 2025-12-11
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- CSS auto-import: `import '@transcodes/design-tokens'`로 CSS 자동 로드 (하위 호환성 복구)
|
|
13
|
+
- 다크모드 dual selector 지원: `prefers-color-scheme` 자동 감지 + `data-theme` 수동 오버라이드
|
|
14
|
+
- CSS minification: lightningcss 기반 압축 (평균 45% 용량 감소)
|
|
15
|
+
|
|
16
|
+
### Changed
|
|
17
|
+
|
|
18
|
+
- 다크모드 CSS 선택자 개선: `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }` + `[data-theme="dark"]`
|
|
19
|
+
- package.json에 `sideEffects` 필드 추가로 번들러 최적화 지원
|
|
20
|
+
|
|
21
|
+
## [0.3.0] - 2025-12-11
|
|
22
|
+
|
|
23
|
+
### Added
|
|
24
|
+
|
|
25
|
+
- JS main export 추가 (`index.js`, `index.d.ts`) - ESBuild 등 번들러 호환성 개선
|
|
26
|
+
- `tokens` 객체 export (camelCase 키)
|
|
27
|
+
- `cssVars` 객체 export (CSS 변수명 키)
|
|
28
|
+
- 버튼 시맨틱 토큰: `--button-dark`, `--button-dark-hover`, `--button-light`, `--button-light-hover`
|
|
29
|
+
- 시맨틱 배경 토큰: `--semantic-warning-bg`, `--semantic-warning-light`, `--semantic-success-bg`, `--semantic-info-bg`
|
|
30
|
+
|
|
31
|
+
### Changed
|
|
32
|
+
|
|
33
|
+
- package.json exports 구조 개선: main export를 CSS에서 JS로 변경
|
|
34
|
+
- CSS import 경로 변경: `@transcodes/design-tokens` → `@transcodes/design-tokens/css`
|
|
35
|
+
|
|
36
|
+
## [0.2.0] - 2025-12-10
|
|
37
|
+
|
|
38
|
+
### Changed
|
|
39
|
+
|
|
40
|
+
- Bun native API로 빌드 스크립트 전환 (빌드 성능 개선)
|
|
41
|
+
|
|
42
|
+
## [0.1.0] - 2025-12-10
|
|
43
|
+
|
|
44
|
+
### Added
|
|
45
|
+
|
|
46
|
+
- Initial release of design tokens
|
|
47
|
+
- CSS custom properties for colors, typography, spacing, shadows, and borders
|
|
48
|
+
- Dark mode support via `[data-theme="dark"]` selector
|
|
49
|
+
- TypeScript type definitions (`tokens.d.ts`)
|
|
50
|
+
- Component CSS classes (`.button`, `.input`, `.notice`, `.field-group`, etc.)
|
|
51
|
+
- WCAG AA compliant color contrast ratios (4.5:1+)
|
|
52
|
+
- DTCG standard compliant token format (`$value`, `$type`)
|
package/README.md
CHANGED
|
@@ -7,40 +7,31 @@ A comprehensive design token system built with [Style Dictionary](https://amzn.g
|
|
|
7
7
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
|
-
- **Dark Mode Support** -
|
|
10
|
+
- **Dark Mode Support** - Automatic system detection + manual override with `data-theme`
|
|
11
11
|
- **WCAG AA Compliant** - All color combinations meet accessibility contrast requirements
|
|
12
12
|
- **Responsive Values** - Fluid typography and spacing using CSS `clamp()`
|
|
13
13
|
- **TypeScript Support** - Full type definitions included
|
|
14
|
-
- **
|
|
14
|
+
- **CSS Auto-import** - Zero-config CSS loading (v0.3.1+)
|
|
15
|
+
- **Tree-shakable** - Optimized for modern bundlers
|
|
15
16
|
|
|
16
17
|
## Installation
|
|
17
18
|
|
|
18
19
|
```bash
|
|
19
20
|
npm install @transcodes/design-tokens
|
|
20
21
|
# or
|
|
21
|
-
yarn add @transcodes/design-tokens
|
|
22
|
-
# or
|
|
23
|
-
pnpm add @transcodes/design-tokens
|
|
24
|
-
# or
|
|
25
22
|
bun add @transcodes/design-tokens
|
|
26
23
|
```
|
|
27
24
|
|
|
28
25
|
## Quick Start
|
|
29
26
|
|
|
30
|
-
###
|
|
27
|
+
### Automatic CSS Loading (v0.3.1+)
|
|
31
28
|
|
|
32
29
|
```typescript
|
|
33
|
-
//
|
|
30
|
+
// CSS automatically loaded (light + dark themes)
|
|
34
31
|
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
32
|
```
|
|
42
33
|
|
|
43
|
-
|
|
34
|
+
That's it! CSS variables are now available globally.
|
|
44
35
|
|
|
45
36
|
```css
|
|
46
37
|
.card {
|
|
@@ -48,32 +39,66 @@ import '@transcodes/design-tokens/components.css';
|
|
|
48
39
|
background: var(--paper-white);
|
|
49
40
|
padding: var(--space-md);
|
|
50
41
|
border-radius: var(--radius-md);
|
|
51
|
-
box-shadow: var(--shadow-
|
|
52
|
-
transition: box-shadow var(--transition-smooth);
|
|
42
|
+
box-shadow: var(--shadow-card);
|
|
53
43
|
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### JavaScript Objects (Optional)
|
|
47
|
+
|
|
48
|
+
```typescript
|
|
49
|
+
import { tokens, cssVars } from '@transcodes/design-tokens';
|
|
50
|
+
|
|
51
|
+
// camelCase keys
|
|
52
|
+
console.log(tokens.accentPrimary); // "#6b4fd9"
|
|
53
|
+
console.log(tokens.spaceMd); // "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)"
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
// CSS variable names as keys
|
|
56
|
+
console.log(cssVars['--accent-primary']); // "#6b4fd9"
|
|
57
|
+
console.log(cssVars['--space-md']); // "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)"
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Dark Mode
|
|
61
|
+
|
|
62
|
+
**Automatic Detection (v0.3.1+)**
|
|
63
|
+
|
|
64
|
+
Dark mode is automatically applied based on system preferences:
|
|
65
|
+
|
|
66
|
+
```css
|
|
67
|
+
/* Respects prefers-color-scheme: dark */
|
|
68
|
+
@media (prefers-color-scheme: dark) {
|
|
69
|
+
:root:not([data-theme="light"]) {
|
|
70
|
+
/* Dark theme variables */
|
|
71
|
+
}
|
|
57
72
|
}
|
|
58
73
|
```
|
|
59
74
|
|
|
60
|
-
|
|
75
|
+
**Manual Override**
|
|
76
|
+
|
|
77
|
+
Force a specific theme:
|
|
61
78
|
|
|
62
79
|
```html
|
|
63
|
-
<!--
|
|
80
|
+
<!-- Force light theme (ignores system preference) -->
|
|
64
81
|
<html data-theme="light">
|
|
65
82
|
|
|
66
|
-
<!--
|
|
83
|
+
<!-- Force dark theme (ignores system preference) -->
|
|
67
84
|
<html data-theme="dark">
|
|
85
|
+
|
|
86
|
+
<!-- Auto (respect system preference) -->
|
|
87
|
+
<html> <!-- no data-theme attribute -->
|
|
68
88
|
```
|
|
69
89
|
|
|
70
90
|
```javascript
|
|
71
|
-
// Toggle theme with
|
|
91
|
+
// Toggle theme with manual override
|
|
72
92
|
function toggleTheme() {
|
|
73
93
|
const current = document.documentElement.getAttribute('data-theme');
|
|
74
94
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
75
95
|
document.documentElement.setAttribute('data-theme', next);
|
|
76
96
|
}
|
|
97
|
+
|
|
98
|
+
// Reset to system preference
|
|
99
|
+
function resetTheme() {
|
|
100
|
+
document.documentElement.removeAttribute('data-theme');
|
|
101
|
+
}
|
|
77
102
|
```
|
|
78
103
|
|
|
79
104
|
## Available Tokens
|
|
@@ -86,7 +111,6 @@ function toggleTheme() {
|
|
|
86
111
|
| `--ink-dark` | #2d2d2d | #e5e5e5 | Secondary text |
|
|
87
112
|
| `--ink-medium` | #5c5c5c | #a3a3a3 | Tertiary text |
|
|
88
113
|
| `--ink-light` | #8a8a8a | #737373 | Placeholder text |
|
|
89
|
-
| `--ink-faint` | #c4c4c4 | #525252 | Decorative elements |
|
|
90
114
|
| `--paper-white` | #faf9fc | #1a1a1a | Primary background |
|
|
91
115
|
| `--paper-cream` | #f5f4f8 | #2d2d2d | Secondary background |
|
|
92
116
|
| `--paper-warm` | #ebe9f0 | #404040 | Tertiary background |
|
|
@@ -94,9 +118,21 @@ function toggleTheme() {
|
|
|
94
118
|
| `--accent-success` | #357a46 | #4ade80 | Success state |
|
|
95
119
|
| `--error-base` | #c0392b | #f87171 | Error state |
|
|
96
120
|
|
|
121
|
+
### Semantic Tokens (v0.3.0+)
|
|
122
|
+
|
|
123
|
+
| Token | Description |
|
|
124
|
+
|-------|-------------|
|
|
125
|
+
| `--button-dark` | Dark button background |
|
|
126
|
+
| `--button-dark-hover` | Dark button hover state |
|
|
127
|
+
| `--button-light` | Light button background |
|
|
128
|
+
| `--button-light-hover` | Light button hover state |
|
|
129
|
+
| `--semantic-warning-bg` | Warning callout background |
|
|
130
|
+
| `--semantic-success-bg` | Success callout background |
|
|
131
|
+
| `--semantic-info-bg` | Info callout background |
|
|
132
|
+
|
|
97
133
|
### Spacing
|
|
98
134
|
|
|
99
|
-
|
|
135
|
+
Responsive values that scale with viewport width.
|
|
100
136
|
|
|
101
137
|
| Token | Value Range |
|
|
102
138
|
|-------|-------------|
|
|
@@ -130,12 +166,6 @@ All spacing values are responsive and scale with viewport width.
|
|
|
130
166
|
### Layout
|
|
131
167
|
|
|
132
168
|
```css
|
|
133
|
-
/* Breakpoints */
|
|
134
|
-
--breakpoint-sm: 640px;
|
|
135
|
-
--breakpoint-md: 768px;
|
|
136
|
-
--breakpoint-lg: 1024px;
|
|
137
|
-
--breakpoint-xl: 1280px;
|
|
138
|
-
|
|
139
169
|
/* Border radius */
|
|
140
170
|
--radius-sm: 4px;
|
|
141
171
|
--radius-md: 8px;
|
|
@@ -157,22 +187,29 @@ All spacing values are responsive and scale with viewport width.
|
|
|
157
187
|
--transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
158
188
|
```
|
|
159
189
|
|
|
160
|
-
## TypeScript Support
|
|
161
|
-
|
|
162
|
-
```typescript
|
|
163
|
-
import type { DesignTokens } from '@transcodes/design-tokens/types';
|
|
164
|
-
```
|
|
165
|
-
|
|
166
190
|
## Exports
|
|
167
191
|
|
|
168
192
|
| Path | Description |
|
|
169
193
|
|------|-------------|
|
|
170
|
-
| `@transcodes/design-tokens` |
|
|
171
|
-
| `@transcodes/design-tokens/
|
|
194
|
+
| `@transcodes/design-tokens` | **Recommended** - Auto-loads CSS + exports JS objects |
|
|
195
|
+
| `@transcodes/design-tokens/css` | CSS variables only (light theme) |
|
|
196
|
+
| `@transcodes/design-tokens/tokens-dark.css` | Dark theme CSS only |
|
|
172
197
|
| `@transcodes/design-tokens/components.css` | Component utility classes |
|
|
198
|
+
| `@transcodes/design-tokens/components` | Component styles as JS |
|
|
173
199
|
| `@transcodes/design-tokens/types` | TypeScript type definitions |
|
|
174
200
|
| `@transcodes/design-tokens/json` | Raw token values as JSON |
|
|
175
201
|
|
|
202
|
+
### Migration from v0.3.0
|
|
203
|
+
|
|
204
|
+
```typescript
|
|
205
|
+
// v0.3.0 (manual CSS imports)
|
|
206
|
+
import '@transcodes/design-tokens/css';
|
|
207
|
+
import '@transcodes/design-tokens/tokens-dark.css';
|
|
208
|
+
|
|
209
|
+
// v0.3.1+ (automatic)
|
|
210
|
+
import '@transcodes/design-tokens';
|
|
211
|
+
```
|
|
212
|
+
|
|
176
213
|
## Accessibility
|
|
177
214
|
|
|
178
215
|
All primary color combinations meet WCAG AA standards (4.5:1 minimum contrast ratio):
|
|
@@ -186,7 +223,7 @@ All primary color combinations meet WCAG AA standards (4.5:1 minimum contrast ra
|
|
|
186
223
|
|
|
187
224
|
## Browser Support
|
|
188
225
|
|
|
189
|
-
|
|
226
|
+
Supports all modern browsers with CSS custom properties and `clamp()`:
|
|
190
227
|
|
|
191
228
|
- Chrome 79+
|
|
192
229
|
- Firefox 75+
|
|
@@ -197,6 +234,10 @@ This package uses CSS custom properties (CSS variables) and `clamp()` for respon
|
|
|
197
234
|
|
|
198
235
|
- [@transcodes/ui-components](https://www.npmjs.com/package/@transcodes/ui-components) - Lit 3.x component library using these tokens
|
|
199
236
|
|
|
237
|
+
## Changelog
|
|
238
|
+
|
|
239
|
+
See [CHANGELOG.md](./CHANGELOG.md) for release history.
|
|
240
|
+
|
|
200
241
|
## License
|
|
201
242
|
|
|
202
243
|
[MIT](./LICENSE)
|
package/build/components.css
CHANGED
|
@@ -1,501 +1 @@
|
|
|
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
|
-
}
|
|
1
|
+
@keyframes fadeInUp{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-.25rem)}75%{transform:translate(.25rem)}}@keyframes inkFloat{0%,to{opacity:.5;transform:translate(0)scale(1)}50%{opacity:.7;transform:translate(.625rem,-.625rem)scale(1.1)}}@keyframes inkDrift{0%,to{opacity:.4;transform:translate(0)rotate(0)}33%{opacity:.6;transform:translate(-.5rem,.5rem)rotate(-5deg)}66%{opacity:.5;transform:translate(.375rem,-.375rem)rotate(3deg)}}@keyframes inkSpread{0%{opacity:.4;transform:scale(0)}to{transform:scale(var(--ink-effect-spread-scale,2.5));opacity:0}}.page-container{width:100%;max-width:var(--page-container-max-width);padding:0 var(--page-container-padding);animation:fadeInUp .6s var(--transition-smooth)both;margin:0 auto;position:relative}.page-container--wide{max-width:var(--page-container-max-width-wide)}.page-card{background:var(--paper-white);padding:var(--page-card-padding);border-radius:var(--page-card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.page-card:before{content:"";border-radius:inherit;padding:var(--space-fixed-2xs);background:linear-gradient(135deg,var(--alpha-primary08)0%,transparent 50%,var(--alpha-primary04)100%);-webkit-mask-composite:xor;pointer-events:none;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-composite:exclude;mask-mode:match-source,match-source}.page-card--centered{text-align:center}.page-decoration{filter:blur(3.75rem);pointer-events:none;z-index:0;border-radius:50%;position:absolute}.page-decoration--primary{background:var(--alpha-primary15)}.page-decoration--success{background:var(--alpha-success15)}.page-decoration--float{animation:4s ease-in-out infinite inkFloat}.page-decoration--drift{animation:5s ease-in-out infinite inkDrift}.button{height:var(--button-height);padding:0 var(--space-lg);font-family:var(--font-body);font-size:var(--button-font-size);font-weight:var(--button-font-weight);letter-spacing:var(--button-letter-spacing);border:var(--space-fixed-2xs)solid transparent;border-radius:var(--button-radius);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.button-primary{background:var(--accent-primary);color:var(--paper-white)}.button-primary:hover:not(:disabled){background:var(--accent-primary-hover);box-shadow:var(--shadow-button-hover-primary);transform:translateY(calc(-1*var(--space-fixed-2xs)))}.button-success{background:var(--accent-success);color:var(--paper-white)}.button-success:hover:not(:disabled){background:var(--accent-success-hover);box-shadow:var(--shadow-button-hover-success);transform:translateY(calc(-1*var(--space-fixed-2xs)))}.button-secondary{height:var(--button-height-secondary);color:var(--ink-dark);border:var(--space-fixed-2xs)solid var(--ink-faint);background:0 0}.button-secondary:hover:not(:disabled){color:var(--accent-primary);border-color:var(--accent-primary);background:var(--alpha-primary04)}.button:disabled{cursor:not-allowed;opacity:.7}.text-button{height:var(--button-text-height);padding:var(--space-sm)var(--space-md);font-family:var(--font-body);font-size:var(--button-text-font-size);color:var(--ink-dark);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;font-weight:500;display:inline-flex}.text-button:hover{background:var(--paper-cream);color:var(--accent-primary)}.text-button-sm{height:auto;padding:var(--space-xs)var(--space-sm);font-size:.8125rem}.text-button-md{height:auto;padding:var(--space-sm)var(--space-md)}.button-content{justify-content:center;align-items:center;gap:var(--button-content-gap);display:flex}.button-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.button-text{text-align:center;flex:1}.button-spinner{width:var(--button-spinner-size);height:var(--button-spinner-size);border:var(--button-spinner-border-width)solid currentColor;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite spin}.button-ink{position:relative;overflow:hidden}.button-ink:after{content:"";pointer-events:none;width:21.875rem;height:21.875rem;transition:transform var(--ink-effect-ripple-duration,.6s)var(--ink-effect-ripple-easing,cubic-bezier(.4,0,.2,1)),opacity var(--ink-effect-fade-duration,.3s)ease;opacity:0;background:radial-gradient(circle,#ffffff80 0%,#0000 70%);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(0)}.button-ink:hover:after{opacity:1;transform:translate(-50%,-50%)scale(1)}.button-ink:active:after{opacity:.8;transform:translate(-50%,-50%)scale(.8)}.card{background:var(--paper-white);padding:var(--card-padding);border-radius:var(--card-radius);box-shadow:var(--shadow-card);position:relative;overflow:hidden}.container{width:100%;max-width:var(--container-max-width);position:relative}.container-wide{max-width:var(--container-max-width-wide)}.form-header{text-align:center;margin-bottom:var(--form-header-margin-bottom)}.form-title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing);animation:slideDown .4s var(--transition-smooth).2s both}.form-subtitle{font-size:var(--form-subtitle-font-size);color:var(--ink-medium);margin-top:var(--space-sm);animation:fadeInUp .4s var(--transition-smooth).4s both}.form-fields{gap:var(--form-fields-gap);flex-direction:column;display:flex}.form-footer{margin-top:var(--form-footer-margin-top);text-align:center;animation:fadeInUp .4s var(--transition-smooth).6s both}.field-group{gap:var(--field-group-gap);flex-direction:column;display:flex}.field-label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);transition:color var(--transition-fast);display:block}.field-group.focused .field-label{color:var(--accent-primary)}.required-mark{color:var(--accent-primary);margin-left:var(--space-2xs)}.input{width:100%;padding:var(--input-padding-y)var(--input-padding-x);font-family:var(--font-body);font-size:var(--input-font-size);color:var(--ink-black);background:var(--paper-cream);border:var(--space-fixed-2xs)solid transparent;border-radius:var(--input-radius);transition:background var(--transition-smooth),border-color var(--transition-smooth),box-shadow var(--transition-smooth)}.input::placeholder{color:var(--ink-faint)}.input:hover{background:var(--paper-warm)}.input:focus{background:var(--paper-white);border-color:var(--ink-faint);box-shadow:var(--shadow-input-focus);outline:none}.label{font-size:var(--label-font-size);font-weight:var(--label-font-weight);text-transform:uppercase;letter-spacing:var(--label-letter-spacing);color:var(--ink-medium);margin-bottom:var(--space-sm);transition:color var(--transition-fast);display:block}.title{font-family:var(--font-body);font-size:var(--title-font-size);font-weight:var(--title-font-weight);color:var(--ink-black);letter-spacing:var(--title-letter-spacing)}.error-message{align-items:flex-start;gap:var(--feedback-error-gap);padding:var(--feedback-error-padding);background:var(--error-bg);border:var(--space-fixed-2xs)solid var(--error-border);border-radius:var(--feedback-error-radius);color:var(--error-base);animation:slideDown .3s var(--transition-smooth)both;display:flex}.error-icon{width:var(--feedback-error-icon-size);height:var(--feedback-error-icon-size);color:var(--error-base);flex-shrink:0;justify-content:center;align-items:center;display:flex}.error-message.shake{animation:shake .4s var(--transition-smooth)}.notice{align-items:flex-start;gap:var(--feedback-notice-gap);padding:var(--feedback-notice-padding);border-radius:var(--feedback-notice-radius);animation:slideUp .4s var(--transition-smooth)both;display:flex}.notice-icon{width:var(--feedback-notice-icon-size);height:var(--feedback-notice-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:flex}.notice-success{border:var(--space-fixed-2xs)solid #357a4633;color:var(--accent-success);background:#357a4614}.notice-warning{border:var(--space-fixed-2xs)solid #b4530933;color:var(--semantic-warning);background:#b4530914}.notice-info{border:var(--space-fixed-2xs)solid #0369a133;color:var(--semantic-info);background:#0369a114}
|
package/build/index.js
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
* Design tokens as JavaScript object for use in JS/TS environments
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
+
// CSS side-effect imports (auto-loaded when package is imported)
|
|
7
|
+
import './tokens.css';
|
|
8
|
+
import './tokens-dark.css';
|
|
9
|
+
|
|
6
10
|
/**
|
|
7
11
|
* All design tokens as a JavaScript object
|
|
8
12
|
* Keys are camelCase versions of CSS variable names
|
package/build/tokens-dark.css
CHANGED
|
@@ -1,27 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Do not edit directly, this file was auto-generated.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
[data-theme="dark"] {
|
|
6
|
-
--ink-black: #ffffff; /** Primary text (dark). WCAG AAA: 16.1:1 on paper-white */
|
|
7
|
-
--ink-dark: #e5e5e5; /** Secondary text (dark). WCAG AAA: 12.7:1 on paper-white */
|
|
8
|
-
--ink-medium: #a3a3a3; /** Tertiary text (dark). WCAG AAA: 7.0:1 on paper-white */
|
|
9
|
-
--ink-light: #737373; /** Placeholder, disabled text (dark). Contrast: 4.2:1 (meets 3:1 minimum) */
|
|
10
|
-
--ink-faint: #525252; /** Decorative only (dark). NOT for readable text. Contrast: 2.6:1 */
|
|
11
|
-
--paper-white: #1a1a1a; /** Primary background (dark) */
|
|
12
|
-
--paper-cream: #2d2d2d; /** Secondary background (dark) */
|
|
13
|
-
--paper-warm: #404040; /** Tertiary background (dark) */
|
|
14
|
-
--accent-primary: #a78bfa; /** Primary accent (dark). WCAG AA: 7.5:1 on paper-white */
|
|
15
|
-
--accent-primary-hover: #c4b5fd; /** Primary accent hover (dark). WCAG AA: 10.2:1 on paper-white */
|
|
16
|
-
--accent-primary-pressed: #8b5cf6; /** Primary accent pressed (dark). WCAG AA: 5.5:1 on paper-white */
|
|
17
|
-
--accent-success: #4ade80; /** Success accent (dark). WCAG AA: 9.8:1 on paper-white */
|
|
18
|
-
--accent-success-hover: #86efac; /** Success accent hover (dark). WCAG AA: 12.5:1 on paper-white */
|
|
19
|
-
--accent-success-pressed: #22c55e; /** Success accent pressed (dark). WCAG AA: 7.2:1 on paper-white */
|
|
20
|
-
--semantic-warning: #fbbf24; /** Warning state (dark). WCAG AA: 11.3:1 on paper-white */
|
|
21
|
-
--semantic-warning-hover: #fcd34d; /** Warning hover (dark). WCAG AA: 12.8:1 on paper-white */
|
|
22
|
-
--semantic-info: #38bdf8; /** Info state (dark). WCAG AA: 9.4:1 on paper-white */
|
|
23
|
-
--semantic-info-hover: #7dd3fc; /** Info hover (dark). WCAG AA: 11.6:1 on paper-white */
|
|
24
|
-
--error-base: #f87171; /** Error state (dark). WCAG AA: 6.5:1 on paper-white */
|
|
25
|
-
--error-bg: rgba(248, 113, 113, 0.12); /** Error background (dark). Decorative, not for text */
|
|
26
|
-
--error-border: rgba(248, 113, 113, 0.3); /** Error border (dark). Decorative, not for text */
|
|
27
|
-
}
|
|
1
|
+
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink-black:#fff;--ink-dark:#e5e5e5;--ink-medium:#a3a3a3;--ink-light:#737373;--ink-faint:#525252;--paper-white:#1a1a1a;--paper-cream:#2d2d2d;--paper-warm:#404040;--accent-primary:#a78bfa;--accent-primary-hover:#c4b5fd;--accent-primary-pressed:#8b5cf6;--accent-success:#4ade80;--accent-success-hover:#86efac;--accent-success-pressed:#22c55e;--semantic-warning:#fbbf24;--semantic-warning-hover:#fcd34d;--semantic-info:#38bdf8;--semantic-info-hover:#7dd3fc;--error-base:#f87171;--error-bg:#f871711f;--error-border:#f871714d}}[data-theme=dark]{--ink-black:#fff;--ink-dark:#e5e5e5;--ink-medium:#a3a3a3;--ink-light:#737373;--ink-faint:#525252;--paper-white:#1a1a1a;--paper-cream:#2d2d2d;--paper-warm:#404040;--accent-primary:#a78bfa;--accent-primary-hover:#c4b5fd;--accent-primary-pressed:#8b5cf6;--accent-success:#4ade80;--accent-success-hover:#86efac;--accent-success-pressed:#22c55e;--semantic-warning:#fbbf24;--semantic-warning-hover:#fcd34d;--semantic-info:#38bdf8;--semantic-info-hover:#7dd3fc;--error-base:#f87171;--error-bg:#f871711f;--error-border:#f871714d}
|
package/build/tokens.css
CHANGED
|
@@ -1,195 +1 @@
|
|
|
1
|
-
|
|
2
|
-
* Do not edit directly, this file was auto-generated.
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
:root, [data-theme="light"] {
|
|
6
|
-
--duration-instant: 150ms; /** Instant feedback for micro-interactions */
|
|
7
|
-
--duration-fast: 300ms; /** Fast transitions for hover/focus states */
|
|
8
|
-
--duration-smooth: 400ms; /** Smooth transitions for modals/overlays */
|
|
9
|
-
--duration-slow: 600ms; /** Slow transitions for page animations */
|
|
10
|
-
--duration-slower: 800ms; /** Slower transitions for complex animations */
|
|
11
|
-
--easing-ease: ease; /** Default easing function */
|
|
12
|
-
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /** Smooth ease-in-out for transitions */
|
|
13
|
-
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /** Bounce effect for playful interactions */
|
|
14
|
-
--ink-effect-ripple-duration: 600ms;
|
|
15
|
-
--ink-effect-ripple-easing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
16
|
-
--ink-effect-spread-scale: 2.5;
|
|
17
|
-
--ink-effect-fade-duration: 300ms;
|
|
18
|
-
--transition-fast: 150ms ease;
|
|
19
|
-
--transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
20
|
-
--transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
21
|
-
--opacity-disabled: 0.6; /** Disabled state opacity - WCAG 1.4.3 minimum */
|
|
22
|
-
--opacity-hover: 0.7; /** Hover state for interactive elements */
|
|
23
|
-
--opacity-loading: 0.6; /** Loading pulse animation minimum opacity */
|
|
24
|
-
--opacity-hidden: 0; /** Fully transparent/hidden state */
|
|
25
|
-
--opacity-visible: 1; /** Fully visible state */
|
|
26
|
-
--brand-primary: #7c5cff; /** Transcodes primary brand color */
|
|
27
|
-
--brand-primary-hover: #6a4ae8;
|
|
28
|
-
--brand-logo-text: #1a1a1a;
|
|
29
|
-
--accent-primary: #6b4fd9; /** Primary accent. WCAG AA: 4.5:1 on paper-white */
|
|
30
|
-
--accent-primary-hover: #5a3fc8; /** Primary accent hover. WCAG AA: 5.2:1 on paper-white */
|
|
31
|
-
--accent-primary-pressed: #4a32b0; /** Primary accent pressed. WCAG AA: 6.5:1 on paper-white */
|
|
32
|
-
--accent-success: #357a46; /** Success accent. WCAG AA: 4.8:1 on paper-white */
|
|
33
|
-
--accent-success-hover: #2d6a3c; /** Success accent hover. WCAG AA: 5.6:1 on paper-white */
|
|
34
|
-
--accent-success-pressed: #255a32; /** Success accent pressed. WCAG AA: 6.8:1 on paper-white */
|
|
35
|
-
--alpha-primary04: rgba(124, 92, 255, 0.04);
|
|
36
|
-
--alpha-primary08: rgba(124, 92, 255, 0.08);
|
|
37
|
-
--alpha-primary10: rgba(124, 92, 255, 0.1);
|
|
38
|
-
--alpha-primary12: rgba(124, 92, 255, 0.12);
|
|
39
|
-
--alpha-primary15: rgba(124, 92, 255, 0.15);
|
|
40
|
-
--alpha-primary20: rgba(124, 92, 255, 0.2);
|
|
41
|
-
--alpha-primary30: rgba(124, 92, 255, 0.3);
|
|
42
|
-
--alpha-primary40: rgba(124, 92, 255, 0.4);
|
|
43
|
-
--alpha-primary50: rgba(124, 92, 255, 0.5);
|
|
44
|
-
--alpha-success10: rgba(61, 138, 80, 0.1);
|
|
45
|
-
--alpha-success15: rgba(61, 138, 80, 0.15);
|
|
46
|
-
--alpha-success20: rgba(61, 138, 80, 0.2);
|
|
47
|
-
--alpha-success30: rgba(61, 138, 80, 0.3);
|
|
48
|
-
--alpha-warning08: rgba(180, 83, 9, 0.08);
|
|
49
|
-
--alpha-warning15: rgba(180, 83, 9, 0.15);
|
|
50
|
-
--alpha-warning20: rgba(180, 83, 9, 0.2);
|
|
51
|
-
--alpha-info08: rgba(3, 105, 161, 0.08);
|
|
52
|
-
--alpha-info15: rgba(3, 105, 161, 0.15);
|
|
53
|
-
--alpha-info20: rgba(3, 105, 161, 0.2);
|
|
54
|
-
--alpha-ink04: rgba(26, 26, 26, 0.04);
|
|
55
|
-
--alpha-ink06: rgba(26, 26, 26, 0.06);
|
|
56
|
-
--alpha-ink10: rgba(26, 26, 26, 0.1);
|
|
57
|
-
--alpha-white15: rgba(255, 255, 255, 0.15);
|
|
58
|
-
--alpha-white30: rgba(255, 255, 255, 0.3);
|
|
59
|
-
--alpha-white90: rgba(255, 255, 255, 0.9);
|
|
60
|
-
--error-base: #c0392b; /** Error state. WCAG AA: 4.8:1 on paper-white */
|
|
61
|
-
--error-bg: rgba(231, 76, 60, 0.08); /** Error background. Decorative, not for text */
|
|
62
|
-
--error-border: rgba(231, 76, 60, 0.2); /** Error border. Decorative, not for text */
|
|
63
|
-
--ink-black: #1a1a1a; /** Primary text. WCAG AA: 15.8:1 on paper-white */
|
|
64
|
-
--ink-dark: #2d2d2d; /** Secondary text. WCAG AA: 12.5:1 on paper-white */
|
|
65
|
-
--ink-medium: #5c5c5c; /** Tertiary text. WCAG AA: 6.0:1 on paper-white */
|
|
66
|
-
--ink-light: #8a8a8a; /** Placeholder, disabled text. Contrast: 3.5:1 (meets 3:1 minimum) */
|
|
67
|
-
--ink-faint: #c4c4c4; /** Decorative only. NOT for readable text. Contrast: 1.7:1 */
|
|
68
|
-
--overlay-dim: rgba(0, 0, 0, 0.5); /** Modal/dialog overlay background */
|
|
69
|
-
--overlay-dark: rgba(0, 0, 0, 0.7); /** Darker overlay for critical modals (offline, error states) */
|
|
70
|
-
--overlay-shadow-light: rgba(0, 0, 0, 0.1); /** Light shadow for subtle elevation */
|
|
71
|
-
--overlay-shadow-subtle: rgba(0, 0, 0, 0.15); /** Subtle shadow for toasts and banners */
|
|
72
|
-
--overlay-shadow-medium: rgba(0, 0, 0, 0.2); /** Medium shadow for cards and dropdowns */
|
|
73
|
-
--overlay-shadow-strong: rgba(0, 0, 0, 0.3); /** Strong shadow for modals and floating elements */
|
|
74
|
-
--overlay-shadow-heavy: rgba(0, 0, 0, 0.4); /** Heavy shadow for prominent floating elements */
|
|
75
|
-
--overlay-glow-white: rgba(255, 255, 255, 0.15); /** Button radial glow overlay effect */
|
|
76
|
-
--overlay-spinner-track: rgba(255, 255, 255, 0.3); /** Spinner base track color on dark backgrounds */
|
|
77
|
-
--paper-white: #faf9fc;
|
|
78
|
-
--paper-cream: #f5f4f8;
|
|
79
|
-
--paper-warm: #ebe9f0;
|
|
80
|
-
--semantic-warning: #b45309; /** Warning state. WCAG AA: 4.6:1 on paper-white */
|
|
81
|
-
--semantic-warning-hover: #92400e; /** Warning hover. WCAG AA: 5.8:1 on paper-white */
|
|
82
|
-
--semantic-warning-bg: #fff8e1; /** Warning background tint for callouts/notifications */
|
|
83
|
-
--semantic-warning-light: #fef3c7; /** Warning light background */
|
|
84
|
-
--semantic-success-bg: #d1fae5; /** Success background tint for status indicators */
|
|
85
|
-
--semantic-info: #0369a1; /** Info state. WCAG AA: 4.8:1 on paper-white */
|
|
86
|
-
--semantic-info-hover: #075985; /** Info hover. WCAG AA: 5.8:1 on paper-white */
|
|
87
|
-
--semantic-info-bg: #e0f2fe; /** Info background tint */
|
|
88
|
-
--button-height: 3.25rem;
|
|
89
|
-
--button-height-secondary: 3rem;
|
|
90
|
-
--button-radius: 0.625rem;
|
|
91
|
-
--button-font-size: 0.9375rem;
|
|
92
|
-
--button-font-weight: 500;
|
|
93
|
-
--button-letter-spacing: 0.02em;
|
|
94
|
-
--button-dark-hover: #2a2a2a; /** Dark button hover state */
|
|
95
|
-
--button-text-height: 2.5rem; /** Text button height */
|
|
96
|
-
--button-text-font-size: 0.875rem; /** Text button font size */
|
|
97
|
-
--button-spinner-size: 1rem; /** Loading spinner size */
|
|
98
|
-
--button-spinner-border-width: 2px; /** Spinner border width */
|
|
99
|
-
--container-max-width: 25rem;
|
|
100
|
-
--container-max-width-wide: 26.25rem;
|
|
101
|
-
--feedback-error-icon-size: 1rem; /** Error icon size */
|
|
102
|
-
--feedback-notice-icon-size: 1.25rem; /** Notice icon size */
|
|
103
|
-
--input-padding-y: 0.875rem;
|
|
104
|
-
--input-padding-x: 1rem;
|
|
105
|
-
--input-radius: 0.625rem;
|
|
106
|
-
--input-font-size: 1rem;
|
|
107
|
-
--label-font-size: 0.75rem;
|
|
108
|
-
--label-font-weight: 500;
|
|
109
|
-
--label-letter-spacing: 0.08em;
|
|
110
|
-
--title-font-size: clamp(1.375rem, 1.27rem + 0.54vw, 1.75rem);
|
|
111
|
-
--title-font-weight: 600;
|
|
112
|
-
--title-letter-spacing: -0.02em;
|
|
113
|
-
--form-subtitle-font-size: 0.9375rem; /** Form subtitle font size */
|
|
114
|
-
--page-container-max-width: 25rem; /** Default page container max width (400px) */
|
|
115
|
-
--page-container-max-width-wide: 26.25rem; /** Wide page container max width (420px) */
|
|
116
|
-
--radius-sm: 0.5rem;
|
|
117
|
-
--radius-md: 0.625rem;
|
|
118
|
-
--radius-lg: 0.75rem;
|
|
119
|
-
--radius-full: 9999px;
|
|
120
|
-
--radius-card: clamp(0.75rem, 0.59rem + 0.78vw, 1rem);
|
|
121
|
-
--shadow-card: 0 0.0625rem 0.1875rem rgba(26, 26, 26, 0.04), 0 0.375rem 1rem rgba(26, 26, 26, 0.06), 0 1.5rem 3rem rgba(26, 26, 26, 0.06);
|
|
122
|
-
--shadow-button-hover-primary: 0 0.25rem 0.75rem rgba(124, 92, 255, 0.3), 0 0.125rem 0.25rem rgba(124, 92, 255, 0.2);
|
|
123
|
-
--shadow-button-hover-success: 0 0.25rem 0.75rem rgba(61, 138, 80, 0.3), 0 0.125rem 0.25rem rgba(61, 138, 80, 0.2);
|
|
124
|
-
--shadow-input-focus: 0 0 0 0.1875rem rgba(124, 92, 255, 0.12), inset 0 0.0625rem 0.125rem rgba(26, 26, 26, 0.04);
|
|
125
|
-
--shadow-overlay: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
|
|
126
|
-
--shadow-modal: 0 1.5rem 3rem rgba(0, 0, 0, 0.15);
|
|
127
|
-
--shadow-otp-cell-focus: 0 0 0 0.25rem rgba(124, 92, 255, 0.1);
|
|
128
|
-
--breakpoint-sm: 640px;
|
|
129
|
-
--breakpoint-md: 768px;
|
|
130
|
-
--breakpoint-lg: 1024px;
|
|
131
|
-
--breakpoint-xl: 1280px;
|
|
132
|
-
--z-index-dropdown: 1000;
|
|
133
|
-
--z-index-sticky: 1020;
|
|
134
|
-
--z-index-fixed: 1030;
|
|
135
|
-
--z-index-modal-backdrop: 1040;
|
|
136
|
-
--z-index-modal: 1050;
|
|
137
|
-
--z-index-popover: 1060;
|
|
138
|
-
--z-index-tooltip: 1070;
|
|
139
|
-
--size-icon-sm: 1rem; /** Small icon size (16px) */
|
|
140
|
-
--size-icon-md: 1.5rem; /** Medium icon size (24px) */
|
|
141
|
-
--size-icon-lg: 2rem; /** Large icon size (32px) */
|
|
142
|
-
--size-icon-xl: 2.5rem; /** Extra large icon size (40px) */
|
|
143
|
-
--size-spinner-sm: 1rem; /** Small spinner (16px) */
|
|
144
|
-
--size-spinner-md: 2rem; /** Medium spinner (32px) */
|
|
145
|
-
--size-spinner-lg: 4rem; /** Large spinner (64px) */
|
|
146
|
-
--size-spinner-button: 1.125rem; /** Spinner size inside buttons (18px) */
|
|
147
|
-
--size-border-width-thin: 0.0625rem; /** Thin border (1px) */
|
|
148
|
-
--size-border-width-base: 0.09375rem; /** Base border (1.5px) */
|
|
149
|
-
--size-border-width-thick: 0.125rem; /** Thick border (2px) */
|
|
150
|
-
--size-border-width-heavy: 0.1875rem; /** Heavy border (3px) */
|
|
151
|
-
--size-border-width-bold: 0.25rem; /** Bold border (4px) */
|
|
152
|
-
--size-chip-padding-sm: 0.125rem 0.5rem; /** Small chip padding */
|
|
153
|
-
--size-chip-padding-md: 0.25rem 0.75rem; /** Medium chip padding */
|
|
154
|
-
--size-close-button: 2rem; /** Close button size (32px) */
|
|
155
|
-
--space-fixed-2xs: 0.0625rem; /** 1px - border, hairline */
|
|
156
|
-
--space-fixed-xs: 0.125rem; /** 2px - focus ring */
|
|
157
|
-
--space-fixed-sm: 0.25rem; /** 4px - small gap */
|
|
158
|
-
--space-fixed-md: 0.5rem; /** 8px - standard gap */
|
|
159
|
-
--space-xs: clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem);
|
|
160
|
-
--space-sm: clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem);
|
|
161
|
-
--space-md: clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem);
|
|
162
|
-
--space-lg: clamp(1.25rem, 1.03rem + 1.09vw, 2rem);
|
|
163
|
-
--space-xl: clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem);
|
|
164
|
-
--space-2xl: clamp(2rem, 1.35rem + 3.26vw, 4.5rem);
|
|
165
|
-
--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
166
|
-
--font-size-sm: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
|
|
167
|
-
--font-size-base: clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
|
|
168
|
-
--font-size-lg: clamp(1rem, 0.93rem + 0.33vw, 1.25rem);
|
|
169
|
-
--font-size-xl: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem);
|
|
170
|
-
--font-size-2xl: clamp(1.5rem, 1.35rem + 0.76vw, 1.875rem);
|
|
171
|
-
--line-height-tight: 1.25;
|
|
172
|
-
--line-height-normal: 1.5;
|
|
173
|
-
--line-height-relaxed: 1.75;
|
|
174
|
-
--button-dark: var(--ink-black); /** Dark button background (console, signin) */
|
|
175
|
-
--button-light: var(--paper-cream); /** Light gray secondary button background */
|
|
176
|
-
--button-light-hover: var(--paper-warm); /** Light button hover state */
|
|
177
|
-
--button-text-padding-sm: var(--space-xs) var(--space-sm); /** Small text button padding */
|
|
178
|
-
--button-text-padding-md: var(--space-sm) var(--space-md); /** Medium text button padding */
|
|
179
|
-
--button-content-gap: var(--space-sm); /** Gap between button icon and text */
|
|
180
|
-
--card-padding: var(--space-lg);
|
|
181
|
-
--card-radius: var(--radius-card);
|
|
182
|
-
--feedback-error-padding: var(--space-md); /** Error message padding */
|
|
183
|
-
--feedback-error-radius: var(--radius-md); /** Error message border radius */
|
|
184
|
-
--feedback-error-gap: var(--space-sm); /** Gap between error icon and text */
|
|
185
|
-
--feedback-notice-padding: var(--space-md); /** Notice box padding */
|
|
186
|
-
--feedback-notice-radius: var(--radius-md); /** Notice box border radius */
|
|
187
|
-
--feedback-notice-gap: var(--space-sm); /** Gap between notice icon and text */
|
|
188
|
-
--form-header-margin-bottom: var(--space-xl); /** Space below form header */
|
|
189
|
-
--form-fields-gap: var(--space-lg); /** Gap between form fields */
|
|
190
|
-
--form-footer-margin-top: var(--space-lg); /** Space above form footer */
|
|
191
|
-
--field-group-gap: var(--space-sm); /** Gap between label and input in field group */
|
|
192
|
-
--page-container-padding: var(--space-lg); /** Page container horizontal padding */
|
|
193
|
-
--page-card-padding: var(--space-xl); /** Page card internal padding */
|
|
194
|
-
--page-card-radius: var(--radius-lg); /** Page card border radius */
|
|
195
|
-
}
|
|
1
|
+
:root,[data-theme=light]{--duration-instant:.15s;--duration-fast:.3s;--duration-smooth:.4s;--duration-slow:.6s;--duration-slower:.8s;--easing-ease:ease;--easing-ease-in-out:cubic-bezier(.4,0,.2,1);--easing-bounce:cubic-bezier(.34,1.56,.64,1);--ink-effect-ripple-duration:.6s;--ink-effect-ripple-easing:cubic-bezier(.4,0,.2,1);--ink-effect-spread-scale:2.5;--ink-effect-fade-duration:.3s;--transition-fast:.15s ease;--transition-smooth:.3s cubic-bezier(.4,0,.2,1);--transition-bounce:.4s cubic-bezier(.34,1.56,.64,1);--opacity-disabled:.6;--opacity-hover:.7;--opacity-loading:.6;--opacity-hidden:0;--opacity-visible:1;--brand-primary:#7c5cff;--brand-primary-hover:#6a4ae8;--brand-logo-text:#1a1a1a;--accent-primary:#6b4fd9;--accent-primary-hover:#5a3fc8;--accent-primary-pressed:#4a32b0;--accent-success:#357a46;--accent-success-hover:#2d6a3c;--accent-success-pressed:#255a32;--alpha-primary04:#7c5cff0a;--alpha-primary08:#7c5cff14;--alpha-primary10:#7c5cff1a;--alpha-primary12:#7c5cff1f;--alpha-primary15:#7c5cff26;--alpha-primary20:#7c5cff33;--alpha-primary30:#7c5cff4d;--alpha-primary40:#7c5cff66;--alpha-primary50:#7c5cff80;--alpha-success10:#3d8a501a;--alpha-success15:#3d8a5026;--alpha-success20:#3d8a5033;--alpha-success30:#3d8a504d;--alpha-warning08:#b4530914;--alpha-warning15:#b4530926;--alpha-warning20:#b4530933;--alpha-info08:#0369a114;--alpha-info15:#0369a126;--alpha-info20:#0369a133;--alpha-ink04:#1a1a1a0a;--alpha-ink06:#1a1a1a0f;--alpha-ink10:#1a1a1a1a;--alpha-white15:#ffffff26;--alpha-white30:#ffffff4d;--alpha-white90:#ffffffe6;--error-base:#c0392b;--error-bg:#e74c3c14;--error-border:#e74c3c33;--ink-black:#1a1a1a;--ink-dark:#2d2d2d;--ink-medium:#5c5c5c;--ink-light:#8a8a8a;--ink-faint:#c4c4c4;--overlay-dim:#00000080;--overlay-dark:#000000b3;--overlay-shadow-light:#0000001a;--overlay-shadow-subtle:#00000026;--overlay-shadow-medium:#0003;--overlay-shadow-strong:#0000004d;--overlay-shadow-heavy:#0006;--overlay-glow-white:#ffffff26;--overlay-spinner-track:#ffffff4d;--paper-white:#faf9fc;--paper-cream:#f5f4f8;--paper-warm:#ebe9f0;--semantic-warning:#b45309;--semantic-warning-hover:#92400e;--semantic-warning-bg:#fff8e1;--semantic-warning-light:#fef3c7;--semantic-success-bg:#d1fae5;--semantic-info:#0369a1;--semantic-info-hover:#075985;--semantic-info-bg:#e0f2fe;--button-height:3.25rem;--button-height-secondary:3rem;--button-radius:.625rem;--button-font-size:.9375rem;--button-font-weight:500;--button-letter-spacing:.02em;--button-dark-hover:#2a2a2a;--button-text-height:2.5rem;--button-text-font-size:.875rem;--button-spinner-size:1rem;--button-spinner-border-width:2px;--container-max-width:25rem;--container-max-width-wide:26.25rem;--feedback-error-icon-size:1rem;--feedback-notice-icon-size:1.25rem;--input-padding-y:.875rem;--input-padding-x:1rem;--input-radius:.625rem;--input-font-size:1rem;--label-font-size:.75rem;--label-font-weight:500;--label-letter-spacing:.08em;--title-font-size:clamp(1.375rem,1.27rem + .54vw,1.75rem);--title-font-weight:600;--title-letter-spacing:-.02em;--form-subtitle-font-size:.9375rem;--page-container-max-width:25rem;--page-container-max-width-wide:26.25rem;--radius-sm:.5rem;--radius-md:.625rem;--radius-lg:.75rem;--radius-full:9999px;--radius-card:clamp(.75rem,.59rem + .78vw,1rem);--shadow-card:0 .0625rem .1875rem #1a1a1a0a,0 .375rem 1rem #1a1a1a0f,0 1.5rem 3rem #1a1a1a0f;--shadow-button-hover-primary:0 .25rem .75rem #7c5cff4d,0 .125rem .25rem #7c5cff33;--shadow-button-hover-success:0 .25rem .75rem #3d8a504d,0 .125rem .25rem #3d8a5033;--shadow-input-focus:0 0 0 .1875rem #7c5cff1f,inset 0 .0625rem .125rem #1a1a1a0a;--shadow-overlay:0 .25rem .5rem #0000001a;--shadow-modal:0 1.5rem 3rem #00000026;--shadow-otp-cell-focus:0 0 0 .25rem #7c5cff1a;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal-backdrop:1040;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--size-icon-sm:1rem;--size-icon-md:1.5rem;--size-icon-lg:2rem;--size-icon-xl:2.5rem;--size-spinner-sm:1rem;--size-spinner-md:2rem;--size-spinner-lg:4rem;--size-spinner-button:1.125rem;--size-border-width-thin:.0625rem;--size-border-width-base:.09375rem;--size-border-width-thick:.125rem;--size-border-width-heavy:.1875rem;--size-border-width-bold:.25rem;--size-chip-padding-sm:.125rem .5rem;--size-chip-padding-md:.25rem .75rem;--size-close-button:2rem;--space-fixed-2xs:.0625rem;--space-fixed-xs:.125rem;--space-fixed-sm:.25rem;--space-fixed-md:.5rem;--space-xs:clamp(.25rem,.23rem + .11vw,.3125rem);--space-sm:clamp(.5rem,.46rem + .22vw,.625rem);--space-md:clamp(.875rem,.77rem + .54vw,1.25rem);--space-lg:clamp(1.25rem,1.03rem + 1.09vw,2rem);--space-xl:clamp(1.5rem,1.15rem + 1.74vw,2.75rem);--space-2xl:clamp(2rem,1.35rem + 3.26vw,4.5rem);--font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-size-sm:clamp(.8125rem,.78rem + .16vw,.9375rem);--font-size-base:clamp(.875rem,.83rem + .22vw,1rem);--font-size-lg:clamp(1rem,.93rem + .33vw,1.25rem);--font-size-xl:clamp(1.25rem,1.14rem + .54vw,1.5rem);--font-size-2xl:clamp(1.5rem,1.35rem + .76vw,1.875rem);--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--button-dark:var(--ink-black);--button-light:var(--paper-cream);--button-light-hover:var(--paper-warm);--button-text-padding-sm:var(--space-xs)var(--space-sm);--button-text-padding-md:var(--space-sm)var(--space-md);--button-content-gap:var(--space-sm);--card-padding:var(--space-lg);--card-radius:var(--radius-card);--feedback-error-padding:var(--space-md);--feedback-error-radius:var(--radius-md);--feedback-error-gap:var(--space-sm);--feedback-notice-padding:var(--space-md);--feedback-notice-radius:var(--radius-md);--feedback-notice-gap:var(--space-sm);--form-header-margin-bottom:var(--space-xl);--form-fields-gap:var(--space-lg);--form-footer-margin-top:var(--space-lg);--field-group-gap:var(--space-sm);--page-container-padding:var(--space-lg);--page-card-padding:var(--space-xl);--page-card-radius:var(--radius-lg)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transcodes/design-tokens",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Style Dictionary based design tokens with dark mode support for consistent, beautiful interfaces",
|
|
6
6
|
"keywords": [
|
|
@@ -29,6 +29,10 @@
|
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
31
|
"type": "module",
|
|
32
|
+
"sideEffects": [
|
|
33
|
+
"./build/*.css",
|
|
34
|
+
"./build/index.js"
|
|
35
|
+
],
|
|
32
36
|
"exports": {
|
|
33
37
|
".": {
|
|
34
38
|
"types": "./build/index.d.ts",
|
|
@@ -47,14 +51,17 @@
|
|
|
47
51
|
},
|
|
48
52
|
"files": [
|
|
49
53
|
"build/",
|
|
50
|
-
"README.md"
|
|
54
|
+
"README.md",
|
|
55
|
+
"CHANGELOG.md",
|
|
56
|
+
"LICENSE"
|
|
51
57
|
],
|
|
52
58
|
"scripts": {
|
|
53
|
-
"build": "bun --bun style-dictionary build --config sd.config.ts && bun --bun style-dictionary build --config sd.config.dark.ts && bun run scripts/build-components-js.ts && bun run scripts/build-index.ts",
|
|
59
|
+
"build": "bun --bun style-dictionary build --config sd.config.ts && bun --bun style-dictionary build --config sd.config.dark.ts && bun run scripts/build-dark-css.ts && bun run scripts/build-components-js.ts && bun run scripts/build-index.ts && bun run scripts/minify-css.ts",
|
|
54
60
|
"clean": "rm -rf build"
|
|
55
61
|
},
|
|
56
62
|
"devDependencies": {
|
|
57
63
|
"@types/bun": "^1.3.4",
|
|
64
|
+
"lightningcss": "^1.30.2",
|
|
58
65
|
"style-dictionary": "^5.1.1"
|
|
59
66
|
}
|
|
60
67
|
}
|