@transcodes/design-tokens 0.3.6 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +47 -11
  3. package/build/index.d.ts +4 -0
  4. package/build/index.js +8 -0
  5. package/build/tokens-dark.css +1 -1
  6. package/build/tokens.css +1 -1
  7. package/build/tokens.d.ts +8 -0
  8. package/build/tokens.json +4 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
7
 
8
+ ## [0.4.0] - 2025-12-17
9
+
10
+ ### Changed
11
+
12
+ - 버전 동기화: ui-components와 버전 통일 (코드 변경 없음)
13
+
8
14
  ## [0.3.6] - 2025-12-17
9
15
 
10
16
  ### Added
package/README.md CHANGED
@@ -7,9 +7,10 @@ A comprehensive design token system built with [Style Dictionary](https://amzn.g
7
7
 
8
8
  ## Features
9
9
 
10
- - **Dark Mode Support** - Automatic system detection + manual override with `data-theme`
10
+ - **Dark Mode Support** - Automatic system detection + manual override with `data-theme` (58 dark tokens)
11
11
  - **WCAG AA Compliant** - All color combinations meet accessibility contrast requirements
12
- - **Responsive Values** - Fluid typography and spacing using CSS `clamp()`
12
+ - **Utopia Fluid Tokens** - Responsive typography and spacing using CSS `clamp()` (v0.3.6+)
13
+ - **Size Tokens** - Comprehensive sizing system for icons, spinners, borders (v0.3.6+)
13
14
  - **TypeScript Support** - Full type definitions included
14
15
  - **CSS Auto-import** - Zero-config CSS loading (v0.3.1+)
15
16
  - **Tree-shakable** - Optimized for modern bundlers
@@ -132,16 +133,27 @@ function resetTheme() {
132
133
 
133
134
  ### Spacing
134
135
 
135
- Responsive values that scale with viewport width.
136
+ Responsive values that scale with viewport width using Utopia-style fluid scaling.
136
137
 
137
- | Token | Value Range |
138
- |-------|-------------|
139
- | `--space-xs` | 4px - 5px |
140
- | `--space-sm` | 8px - 10px |
141
- | `--space-md` | 14px - 20px |
142
- | `--space-lg` | 20px - 32px |
143
- | `--space-xl` | 24px - 44px |
144
- | `--space-2xl` | 32px - 72px |
138
+ | Token | Value Range | Description |
139
+ |-------|-------------|-------------|
140
+ | `--space-xs` | 4px → 5px | Extra small |
141
+ | `--space-sm` | 8px → 10px | Small |
142
+ | `--space-md` | 14px → 20px | Medium |
143
+ | `--space-lg` | 20px → 32px | Large |
144
+ | `--space-xl` | 24px → 44px | Extra large |
145
+ | `--space-2xl` | 32px → 72px | 2X large |
146
+
147
+ **Fluid Pair Tokens (v0.3.6+)**
148
+
149
+ Steeper scaling for more dramatic responsive changes:
150
+
151
+ | Token | Value Range | Use Case |
152
+ |-------|-------------|----------|
153
+ | `--space-xs-sm` | 4px → 10px | Progressive scaling for small elements |
154
+ | `--space-sm-md` | 8px → 20px | Container padding |
155
+ | `--space-md-lg` | 14px → 32px | Section spacing |
156
+ | `--space-lg-xl` | 20px → 44px | Major layout spacing |
145
157
 
146
158
  ### Typography
147
159
 
@@ -187,6 +199,30 @@ Responsive values that scale with viewport width.
187
199
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
188
200
  ```
189
201
 
202
+ ### Size Tokens (v0.3.6+)
203
+
204
+ Comprehensive sizing system for consistent UI elements.
205
+
206
+ ```css
207
+ /* Icon sizes */
208
+ --size-icon-xs: 0.75rem; /* 12px */
209
+ --size-icon-sm: 1rem; /* 16px */
210
+ --size-icon-md: 1.5rem; /* 24px */
211
+ --size-icon-lg: 2rem; /* 32px */
212
+ --size-icon-action: 1.25rem; /* 20px - for arrows, callout icons */
213
+
214
+ /* Spinner sizes */
215
+ --size-spinner-sm: 1rem; /* 16px */
216
+ --size-spinner-md: 2rem; /* 32px */
217
+ --size-spinner-lg: 4rem; /* 64px */
218
+ --size-spinner-button: 1.125rem; /* 18px - inside buttons */
219
+
220
+ /* Border widths */
221
+ --size-border-width-thin: 0.0625rem; /* 1px */
222
+ --size-border-width-base: 0.09375rem; /* 1.5px */
223
+ --size-border-width-thick: 0.125rem; /* 2px */
224
+ ```
225
+
190
226
  ## Exports
191
227
 
192
228
  | Path | Description |
package/build/index.d.ts CHANGED
@@ -37,6 +37,9 @@ export interface Tokens {
37
37
  accentSuccess: string;
38
38
  accentSuccessHover: string;
39
39
  accentSuccessPressed: string;
40
+ accentWarning: string;
41
+ accentWarningHover: string;
42
+ accentWarningPressed: string;
40
43
  alphaPrimary04: string;
41
44
  alphaPrimary08: string;
42
45
  alphaPrimary10: string;
@@ -213,6 +216,7 @@ export interface Tokens {
213
216
  spaceMdLg: string;
214
217
  spaceLgXl: string;
215
218
  fontBody: string;
219
+ fontSizeXs: string;
216
220
  fontSizeSm: string;
217
221
  fontSizeBase: string;
218
222
  fontSizeLg: string;
package/build/index.js CHANGED
@@ -46,6 +46,9 @@ export const tokens = {
46
46
  accentSuccess: "#357a46",
47
47
  accentSuccessHover: "#2d6a3c",
48
48
  accentSuccessPressed: "#255a32",
49
+ accentWarning: "#d97706",
50
+ accentWarningHover: "#b45309",
51
+ accentWarningPressed: "#92400e",
49
52
  alphaPrimary04: "#7c5cff0a",
50
53
  alphaPrimary08: "#7c5cff14",
51
54
  alphaPrimary10: "#7c5cff1a",
@@ -222,6 +225,7 @@ export const tokens = {
222
225
  spaceMdLg: "clamp(0.875rem, 0.42rem + 2.28vw, 2rem)",
223
226
  spaceLgXl: "clamp(1.25rem, 0.47rem + 3.91vw, 2.75rem)",
224
227
  fontBody: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
228
+ fontSizeXs: "clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem)",
225
229
  fontSizeSm: "clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem)",
226
230
  fontSizeBase: "clamp(0.875rem, 0.83rem + 0.22vw, 1rem)",
227
231
  fontSizeLg: "clamp(1rem, 0.93rem + 0.33vw, 1.25rem)",
@@ -270,6 +274,9 @@ export const cssVars = {
270
274
  '--accent-success': "#357a46",
271
275
  '--accent-success-hover': "#2d6a3c",
272
276
  '--accent-success-pressed': "#255a32",
277
+ '--accent-warning': "#d97706",
278
+ '--accent-warning-hover': "#b45309",
279
+ '--accent-warning-pressed': "#92400e",
273
280
  '--alpha-primary04': "#7c5cff0a",
274
281
  '--alpha-primary08': "#7c5cff14",
275
282
  '--alpha-primary10': "#7c5cff1a",
@@ -446,6 +453,7 @@ export const cssVars = {
446
453
  '--space-md-lg': "clamp(0.875rem, 0.42rem + 2.28vw, 2rem)",
447
454
  '--space-lg-xl': "clamp(1.25rem, 0.47rem + 3.91vw, 2.75rem)",
448
455
  '--font-body': "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
456
+ '--font-size-xs': "clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem)",
449
457
  '--font-size-sm': "clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem)",
450
458
  '--font-size-base': "clamp(0.875rem, 0.83rem + 0.22vw, 1rem)",
451
459
  '--font-size-lg': "clamp(1rem, 0.93rem + 0.33vw, 1.25rem)",
package/build/tokens-dark.css CHANGED
@@ -1 +1 @@
1
- [data-theme=dark]{--alpha-primary04:#a78bfa0a;--alpha-primary08:#a78bfa14;--alpha-primary10:#a78bfa1a;--alpha-primary12:#a78bfa1f;--alpha-primary15:#a78bfa26;--alpha-primary20:#a78bfa33;--alpha-primary30:#a78bfa4d;--alpha-primary40:#a78bfa66;--alpha-primary50:#a78bfa80;--alpha-success10:#4ade801a;--alpha-success15:#4ade8026;--alpha-success20:#4ade8033;--alpha-success30:#4ade804d;--alpha-warning08:#fbbf2414;--alpha-warning15:#fbbf2426;--alpha-warning20:#fbbf2433;--alpha-info08:#38bdf814;--alpha-info15:#38bdf826;--alpha-info20:#38bdf833;--alpha-ink04:#ffffff0a;--alpha-ink06:#ffffff0f;--alpha-ink10:#ffffff1a;--alpha-onAccent:#000000e6;--alpha-onAccentMuted:#0009;--brand-primary:#a78bfa;--brand-primary-hover:#c4b5fd;--brand-logo-text:#fff;--overlay-shadow-light:#0003;--overlay-shadow-subtle:#00000040;--overlay-shadow-medium:#00000059;--overlay-shadow-strong:#00000080;--overlay-shadow-heavy:#0009;--shadow-card:0 .0625rem .1875rem #0000001a,0 .375rem 1rem #00000026,0 1.5rem 3rem #0003;--shadow-button-hover-primary:0 .25rem .75rem #a78bfa66,0 .125rem .25rem #a78bfa4d;--shadow-button-hover-success:0 .25rem .75rem #4ade8066,0 .125rem .25rem #4ade804d;--shadow-input-focus:0 0 0 .1875rem #a78bfa33,inset 0 .0625rem .125rem #0000001a;--shadow-overlay:0 .25rem .5rem #0003;--shadow-modal:0 1.5rem 3rem #0000004d;--shadow-otp-cell-focus:0 0 0 .25rem #a78bfa33;--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}
1
+ [data-theme=dark]{--alpha-primary04:#a78bfa0a;--alpha-primary08:#a78bfa14;--alpha-primary10:#a78bfa1a;--alpha-primary12:#a78bfa1f;--alpha-primary15:#a78bfa26;--alpha-primary20:#a78bfa33;--alpha-primary30:#a78bfa4d;--alpha-primary40:#a78bfa66;--alpha-primary50:#a78bfa80;--alpha-success10:#4ade801a;--alpha-success15:#4ade8026;--alpha-success20:#4ade8033;--alpha-success30:#4ade804d;--alpha-warning08:#fbbf2414;--alpha-warning15:#fbbf2426;--alpha-warning20:#fbbf2433;--alpha-info08:#38bdf814;--alpha-info15:#38bdf826;--alpha-info20:#38bdf833;--alpha-ink04:#ffffff0a;--alpha-ink06:#ffffff0f;--alpha-ink10:#ffffff1a;--alpha-onAccent:#000000e6;--alpha-onAccentMuted:#0009;--brand-primary:#a78bfa;--brand-primary-hover:#c4b5fd;--brand-logo-text:#fff;--overlay-shadow-light:#0003;--overlay-shadow-subtle:#00000040;--overlay-shadow-medium:#00000059;--overlay-shadow-strong:#00000080;--overlay-shadow-heavy:#0009;--shadow-card:0 .0625rem .1875rem #0000001a,0 .375rem 1rem #00000026,0 1.5rem 3rem #0003;--shadow-button-hover-primary:0 .25rem .75rem #a78bfa66,0 .125rem .25rem #a78bfa4d;--shadow-button-hover-success:0 .25rem .75rem #4ade8066,0 .125rem .25rem #4ade804d;--shadow-input-focus:0 0 0 .1875rem #a78bfa33,inset 0 .0625rem .125rem #0000001a;--shadow-overlay:0 .25rem .5rem #0003;--shadow-modal:0 1.5rem 3rem #0000004d;--shadow-otp-cell-focus:0 0 0 .25rem #a78bfa33;--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;--accent-warning:#fbbf24;--accent-warning-hover:#fcd34d;--accent-warning-pressed:#f59e0b;--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 +1 @@
1
- :root,[data-theme=light]{--offset-slide-up-sm:.25rem;--offset-slide-up-md:.625rem;--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;--alpha-black15:#00000026;--alpha-black30:#0000004d;--alpha-black90:#000000e6;--alpha-onAccent:#fffffff2;--alpha-onAccentMuted:#fff9;--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;--modal-max-width-sm:320px;--modal-max-width-md:400px;--modal-max-width-lg:600px;--modal-max-width-fluid:clamp(280px,85vw,320px);--modal-min-height:400px;--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;--shadow-focus-ring-width:.1875rem;--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-xs:.75rem;--size-icon-sm:1rem;--size-icon-md:1.5rem;--size-icon-lg:2rem;--size-icon-xl:2.5rem;--size-icon-2xl:3rem;--size-icon-action:1.25rem;--size-spinner-sm:1rem;--size-spinner-md:2rem;--size-spinner-lg:4rem;--size-spinner-xl:5rem;--size-spinner-button:1.125rem;--size-screen-icon-sm:4rem;--size-screen-icon-md:5rem;--size-screen-icon-fluid:clamp(3rem,2.43rem + 2.86vw,5rem);--size-decoration-blob:clamp(12rem,9.43rem + 12.86vw,22rem);--size-progress-bar-width:12rem;--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);--space-xs-sm:clamp(.25rem,.14rem + .54vw,.625rem);--space-sm-md:clamp(.5rem,.28rem + 1.09vw,1.25rem);--space-md-lg:clamp(.875rem,.42rem + 2.28vw,2rem);--space-lg-xl:clamp(1.25rem,.47rem + 3.91vw,2.75rem);--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)}
1
+ :root,[data-theme=light]{--offset-slide-up-sm:.25rem;--offset-slide-up-md:.625rem;--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;--accent-warning:#d97706;--accent-warning-hover:#b45309;--accent-warning-pressed:#92400e;--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;--alpha-black15:#00000026;--alpha-black30:#0000004d;--alpha-black90:#000000e6;--alpha-onAccent:#fffffff2;--alpha-onAccentMuted:#fff9;--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;--modal-max-width-sm:320px;--modal-max-width-md:400px;--modal-max-width-lg:600px;--modal-max-width-fluid:clamp(280px,85vw,320px);--modal-min-height:400px;--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;--shadow-focus-ring-width:.1875rem;--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-xs:.75rem;--size-icon-sm:1rem;--size-icon-md:1.5rem;--size-icon-lg:2rem;--size-icon-xl:2.5rem;--size-icon-2xl:3rem;--size-icon-action:1.25rem;--size-spinner-sm:1rem;--size-spinner-md:2rem;--size-spinner-lg:4rem;--size-spinner-xl:5rem;--size-spinner-button:1.125rem;--size-screen-icon-sm:4rem;--size-screen-icon-md:5rem;--size-screen-icon-fluid:clamp(3rem,2.43rem + 2.86vw,5rem);--size-decoration-blob:clamp(12rem,9.43rem + 12.86vw,22rem);--size-progress-bar-width:12rem;--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);--space-xs-sm:clamp(.25rem,.14rem + .54vw,.625rem);--space-sm-md:clamp(.5rem,.28rem + 1.09vw,1.25rem);--space-md-lg:clamp(.875rem,.42rem + 2.28vw,2rem);--space-lg-xl:clamp(1.25rem,.47rem + 3.91vw,2.75rem);--font-body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-size-xs:clamp(.6875rem,.66rem + .14vw,.8125rem);--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/build/tokens.d.ts CHANGED
@@ -55,6 +55,12 @@ export const accentSuccess: string;
55
55
  export const accentSuccessHover: string;
56
56
  /** Success accent pressed. WCAG AA: 6.8:1 on paper-white */
57
57
  export const accentSuccessPressed: string;
58
+ /** Warning accent. WCAG AA: 4.5:1 on paper-white */
59
+ export const accentWarning: string;
60
+ /** Warning accent hover. WCAG AA: 5.8:1 on paper-white */
61
+ export const accentWarningHover: string;
62
+ /** Warning accent pressed. WCAG AA: 7.2:1 on paper-white */
63
+ export const accentWarningPressed: string;
58
64
  export const alphaPrimary04: string;
59
65
  export const alphaPrimary08: string;
60
66
  export const alphaPrimary10: string;
@@ -326,6 +332,8 @@ export const spaceMdLg: string;
326
332
  /** Fluid pair: lg→xl (20px→44px) */
327
333
  export const spaceLgXl: string;
328
334
  export const fontBody: string;
335
+ /** Extra small text (11-13px fluid) */
336
+ export const fontSizeXs: string;
329
337
  export const fontSizeSm: string;
330
338
  export const fontSizeBase: string;
331
339
  export const fontSizeLg: string;
package/build/tokens.json CHANGED
@@ -30,6 +30,9 @@
30
30
  "AccentSuccess": "#357a46",
31
31
  "AccentSuccessHover": "#2d6a3c",
32
32
  "AccentSuccessPressed": "#255a32",
33
+ "AccentWarning": "#d97706",
34
+ "AccentWarningHover": "#b45309",
35
+ "AccentWarningPressed": "#92400e",
33
36
  "AlphaPrimary04": "#7c5cff0a",
34
37
  "AlphaPrimary08": "#7c5cff14",
35
38
  "AlphaPrimary10": "#7c5cff1a",
@@ -206,6 +209,7 @@
206
209
  "SpaceMdLg": "clamp(0.875rem, 0.42rem + 2.28vw, 2rem)",
207
210
  "SpaceLgXl": "clamp(1.25rem, 0.47rem + 3.91vw, 2.75rem)",
208
211
  "FontBody": "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
212
+ "FontSizeXs": "clamp(0.6875rem, 0.66rem + 0.14vw, 0.8125rem)",
209
213
  "FontSizeSm": "clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem)",
210
214
  "FontSizeBase": "clamp(0.875rem, 0.83rem + 0.22vw, 1rem)",
211
215
  "FontSizeLg": "clamp(1rem, 0.93rem + 0.33vw, 1.25rem)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transcodes/design-tokens",
3
- "version": "0.3.6",
3
+ "version": "0.4.1",
4
4
  "private": false,
5
5
  "description": "Style Dictionary based design tokens with dark mode support for consistent, beautiful interfaces",
6
6
  "keywords": [