@transcodes/design-tokens 0.1.0 → 0.3.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 (6) hide show
  1. package/build/index.d.ts +210 -0
  2. package/build/index.js +403 -0
  3. package/build/tokens.css +8 -0
  4. package/build/tokens.d.ts +16 -0
  5. package/build/tokens.json +8 -0
  6. package/package.json +7 -3
package/build/index.d.ts ADDED
@@ -0,0 +1,210 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ /**
6
+ * Design tokens object type
7
+ */
8
+ export interface Tokens {
9
+ durationInstant: string;
10
+ durationFast: string;
11
+ durationSmooth: string;
12
+ durationSlow: string;
13
+ durationSlower: string;
14
+ easingEase: string;
15
+ easingEaseInOut: string;
16
+ easingBounce: string;
17
+ inkEffectRippleDuration: string;
18
+ inkEffectRippleEasing: string;
19
+ inkEffectSpreadScale: string;
20
+ inkEffectFadeDuration: string;
21
+ transitionFast: string;
22
+ transitionSmooth: string;
23
+ transitionBounce: string;
24
+ opacityDisabled: string;
25
+ opacityHover: string;
26
+ opacityLoading: string;
27
+ opacityHidden: string;
28
+ opacityVisible: string;
29
+ brandPrimary: string;
30
+ brandPrimaryHover: string;
31
+ brandLogoText: string;
32
+ accentPrimary: string;
33
+ accentPrimaryHover: string;
34
+ accentPrimaryPressed: string;
35
+ accentSuccess: string;
36
+ accentSuccessHover: string;
37
+ accentSuccessPressed: string;
38
+ alphaPrimary04: string;
39
+ alphaPrimary08: string;
40
+ alphaPrimary10: string;
41
+ alphaPrimary12: string;
42
+ alphaPrimary15: string;
43
+ alphaPrimary20: string;
44
+ alphaPrimary30: string;
45
+ alphaPrimary40: string;
46
+ alphaPrimary50: string;
47
+ alphaSuccess10: string;
48
+ alphaSuccess15: string;
49
+ alphaSuccess20: string;
50
+ alphaSuccess30: string;
51
+ alphaWarning08: string;
52
+ alphaWarning15: string;
53
+ alphaWarning20: string;
54
+ alphaInfo08: string;
55
+ alphaInfo15: string;
56
+ alphaInfo20: string;
57
+ alphaInk04: string;
58
+ alphaInk06: string;
59
+ alphaInk10: string;
60
+ alphaWhite15: string;
61
+ alphaWhite30: string;
62
+ alphaWhite90: string;
63
+ errorBase: string;
64
+ errorBg: string;
65
+ errorBorder: string;
66
+ inkBlack: string;
67
+ inkDark: string;
68
+ inkMedium: string;
69
+ inkLight: string;
70
+ inkFaint: string;
71
+ overlayDim: string;
72
+ overlayDark: string;
73
+ overlayShadowLight: string;
74
+ overlayShadowSubtle: string;
75
+ overlayShadowMedium: string;
76
+ overlayShadowStrong: string;
77
+ overlayShadowHeavy: string;
78
+ overlayGlowWhite: string;
79
+ overlaySpinnerTrack: string;
80
+ paperWhite: string;
81
+ paperCream: string;
82
+ paperWarm: string;
83
+ semanticWarning: string;
84
+ semanticWarningHover: string;
85
+ semanticWarningBg: string;
86
+ semanticWarningLight: string;
87
+ semanticSuccessBg: string;
88
+ semanticInfo: string;
89
+ semanticInfoHover: string;
90
+ semanticInfoBg: string;
91
+ buttonHeight: string;
92
+ buttonHeightSecondary: string;
93
+ buttonRadius: string;
94
+ buttonFontSize: string;
95
+ buttonFontWeight: string;
96
+ buttonLetterSpacing: string;
97
+ buttonDark: string;
98
+ buttonDarkHover: string;
99
+ buttonLight: string;
100
+ buttonLightHover: string;
101
+ buttonTextHeight: string;
102
+ buttonTextFontSize: string;
103
+ buttonTextPaddingSm: string;
104
+ buttonTextPaddingMd: string;
105
+ buttonContentGap: string;
106
+ buttonSpinnerSize: string;
107
+ buttonSpinnerBorderWidth: string;
108
+ cardPadding: string;
109
+ cardRadius: string;
110
+ containerMaxWidth: string;
111
+ containerMaxWidthWide: string;
112
+ feedbackErrorPadding: string;
113
+ feedbackErrorRadius: string;
114
+ feedbackErrorGap: string;
115
+ feedbackErrorIconSize: string;
116
+ feedbackNoticePadding: string;
117
+ feedbackNoticeRadius: string;
118
+ feedbackNoticeGap: string;
119
+ feedbackNoticeIconSize: string;
120
+ inputPaddingY: string;
121
+ inputPaddingX: string;
122
+ inputRadius: string;
123
+ inputFontSize: string;
124
+ labelFontSize: string;
125
+ labelFontWeight: string;
126
+ labelLetterSpacing: string;
127
+ titleFontSize: string;
128
+ titleFontWeight: string;
129
+ titleLetterSpacing: string;
130
+ formHeaderMarginBottom: string;
131
+ formSubtitleFontSize: string;
132
+ formFieldsGap: string;
133
+ formFooterMarginTop: string;
134
+ fieldGroupGap: string;
135
+ pageContainerMaxWidth: string;
136
+ pageContainerMaxWidthWide: string;
137
+ pageContainerPadding: string;
138
+ pageCardPadding: string;
139
+ pageCardRadius: string;
140
+ radiusSm: string;
141
+ radiusMd: string;
142
+ radiusLg: string;
143
+ radiusFull: string;
144
+ radiusCard: string;
145
+ shadowCard: string;
146
+ shadowButtonHoverPrimary: string;
147
+ shadowButtonHoverSuccess: string;
148
+ shadowInputFocus: string;
149
+ shadowOverlay: string;
150
+ shadowModal: string;
151
+ shadowOtpCellFocus: string;
152
+ breakpointSm: string;
153
+ breakpointMd: string;
154
+ breakpointLg: string;
155
+ breakpointXl: string;
156
+ zIndexDropdown: string;
157
+ zIndexSticky: string;
158
+ zIndexFixed: string;
159
+ zIndexModalBackdrop: string;
160
+ zIndexModal: string;
161
+ zIndexPopover: string;
162
+ zIndexTooltip: string;
163
+ sizeIconSm: string;
164
+ sizeIconMd: string;
165
+ sizeIconLg: string;
166
+ sizeIconXl: string;
167
+ sizeSpinnerSm: string;
168
+ sizeSpinnerMd: string;
169
+ sizeSpinnerLg: string;
170
+ sizeSpinnerButton: string;
171
+ sizeBorderWidthThin: string;
172
+ sizeBorderWidthBase: string;
173
+ sizeBorderWidthThick: string;
174
+ sizeBorderWidthHeavy: string;
175
+ sizeBorderWidthBold: string;
176
+ sizeChipPaddingSm: string;
177
+ sizeChipPaddingMd: string;
178
+ sizeCloseButton: string;
179
+ spaceFixed2xs: string;
180
+ spaceFixedXs: string;
181
+ spaceFixedSm: string;
182
+ spaceFixedMd: string;
183
+ spaceXs: string;
184
+ spaceSm: string;
185
+ spaceMd: string;
186
+ spaceLg: string;
187
+ spaceXl: string;
188
+ space2xl: string;
189
+ fontBody: string;
190
+ fontSizeSm: string;
191
+ fontSizeBase: string;
192
+ fontSizeLg: string;
193
+ fontSizeXl: string;
194
+ fontSize2xl: string;
195
+ lineHeightTight: string;
196
+ lineHeightNormal: string;
197
+ lineHeightRelaxed: string;
198
+ }
199
+
200
+ /**
201
+ * All design tokens as a JavaScript object
202
+ */
203
+ export declare const tokens: Tokens;
204
+
205
+ /**
206
+ * CSS variable names mapped to their values
207
+ */
208
+ export declare const cssVars: Record<string, string>;
209
+
210
+ export default tokens;
package/build/index.js ADDED
@@ -0,0 +1,403 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ * Design tokens as JavaScript object for use in JS/TS environments
4
+ */
5
+
6
+ /**
7
+ * All design tokens as a JavaScript object
8
+ * Keys are camelCase versions of CSS variable names
9
+ * @example
10
+ * import { tokens } from '@transcodes/design-tokens';
11
+ * console.log(tokens.accentPrimary); // '#6b4fd9'
12
+ */
13
+ export const tokens = {
14
+ durationInstant: "150ms",
15
+ durationFast: "300ms",
16
+ durationSmooth: "400ms",
17
+ durationSlow: "600ms",
18
+ durationSlower: "800ms",
19
+ easingEase: "ease",
20
+ easingEaseInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
21
+ easingBounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
22
+ inkEffectRippleDuration: "600ms",
23
+ inkEffectRippleEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
24
+ inkEffectSpreadScale: "2.5",
25
+ inkEffectFadeDuration: "300ms",
26
+ transitionFast: "150ms ease",
27
+ transitionSmooth: "300ms cubic-bezier(0.4, 0, 0.2, 1)",
28
+ transitionBounce: "400ms cubic-bezier(0.34, 1.56, 0.64, 1)",
29
+ opacityDisabled: "0.6",
30
+ opacityHover: "0.7",
31
+ opacityLoading: "0.6",
32
+ opacityHidden: "0",
33
+ opacityVisible: "1",
34
+ brandPrimary: "#7c5cff",
35
+ brandPrimaryHover: "#6a4ae8",
36
+ brandLogoText: "#1a1a1a",
37
+ accentPrimary: "#6b4fd9",
38
+ accentPrimaryHover: "#5a3fc8",
39
+ accentPrimaryPressed: "#4a32b0",
40
+ accentSuccess: "#357a46",
41
+ accentSuccessHover: "#2d6a3c",
42
+ accentSuccessPressed: "#255a32",
43
+ alphaPrimary04: "#7c5cff0a",
44
+ alphaPrimary08: "#7c5cff14",
45
+ alphaPrimary10: "#7c5cff1a",
46
+ alphaPrimary12: "#7c5cff1f",
47
+ alphaPrimary15: "#7c5cff26",
48
+ alphaPrimary20: "#7c5cff33",
49
+ alphaPrimary30: "#7c5cff4d",
50
+ alphaPrimary40: "#7c5cff66",
51
+ alphaPrimary50: "#7c5cff80",
52
+ alphaSuccess10: "#3d8a501a",
53
+ alphaSuccess15: "#3d8a5026",
54
+ alphaSuccess20: "#3d8a5033",
55
+ alphaSuccess30: "#3d8a504d",
56
+ alphaWarning08: "#b4530914",
57
+ alphaWarning15: "#b4530926",
58
+ alphaWarning20: "#b4530933",
59
+ alphaInfo08: "#0369a114",
60
+ alphaInfo15: "#0369a126",
61
+ alphaInfo20: "#0369a133",
62
+ alphaInk04: "#1a1a1a0a",
63
+ alphaInk06: "#1a1a1a0f",
64
+ alphaInk10: "#1a1a1a1a",
65
+ alphaWhite15: "#ffffff26",
66
+ alphaWhite30: "#ffffff4d",
67
+ alphaWhite90: "#ffffffe6",
68
+ errorBase: "#c0392b",
69
+ errorBg: "#e74c3c14",
70
+ errorBorder: "#e74c3c33",
71
+ inkBlack: "#1a1a1a",
72
+ inkDark: "#2d2d2d",
73
+ inkMedium: "#5c5c5c",
74
+ inkLight: "#8a8a8a",
75
+ inkFaint: "#c4c4c4",
76
+ overlayDim: "#00000080",
77
+ overlayDark: "#000000b3",
78
+ overlayShadowLight: "#0000001a",
79
+ overlayShadowSubtle: "#00000026",
80
+ overlayShadowMedium: "#00000033",
81
+ overlayShadowStrong: "#0000004d",
82
+ overlayShadowHeavy: "#00000066",
83
+ overlayGlowWhite: "#ffffff26",
84
+ overlaySpinnerTrack: "#ffffff4d",
85
+ paperWhite: "#faf9fc",
86
+ paperCream: "#f5f4f8",
87
+ paperWarm: "#ebe9f0",
88
+ semanticWarning: "#b45309",
89
+ semanticWarningHover: "#92400e",
90
+ semanticWarningBg: "#fff8e1",
91
+ semanticWarningLight: "#fef3c7",
92
+ semanticSuccessBg: "#d1fae5",
93
+ semanticInfo: "#0369a1",
94
+ semanticInfoHover: "#075985",
95
+ semanticInfoBg: "#e0f2fe",
96
+ buttonHeight: "3.25rem",
97
+ buttonHeightSecondary: "3rem",
98
+ buttonRadius: "0.625rem",
99
+ buttonFontSize: "0.9375rem",
100
+ buttonFontWeight: "500",
101
+ buttonLetterSpacing: "0.02em",
102
+ buttonDark: "#1a1a1a",
103
+ buttonDarkHover: "#2a2a2a",
104
+ buttonLight: "#f5f4f8",
105
+ buttonLightHover: "#ebe9f0",
106
+ buttonTextHeight: "2.5rem",
107
+ buttonTextFontSize: "0.875rem",
108
+ buttonTextPaddingSm: "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem) clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
109
+ buttonTextPaddingMd: "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem) clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
110
+ buttonContentGap: "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
111
+ buttonSpinnerSize: "1rem",
112
+ buttonSpinnerBorderWidth: "2px",
113
+ cardPadding: "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
114
+ cardRadius: "clamp(0.75rem, 0.59rem + 0.78vw, 1rem)",
115
+ containerMaxWidth: "25rem",
116
+ containerMaxWidthWide: "26.25rem",
117
+ feedbackErrorPadding: "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
118
+ feedbackErrorRadius: "0.625rem",
119
+ feedbackErrorGap: "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
120
+ feedbackErrorIconSize: "1rem",
121
+ feedbackNoticePadding: "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
122
+ feedbackNoticeRadius: "0.625rem",
123
+ feedbackNoticeGap: "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
124
+ feedbackNoticeIconSize: "1.25rem",
125
+ inputPaddingY: "0.875rem",
126
+ inputPaddingX: "1rem",
127
+ inputRadius: "0.625rem",
128
+ inputFontSize: "1rem",
129
+ labelFontSize: "0.75rem",
130
+ labelFontWeight: "500",
131
+ labelLetterSpacing: "0.08em",
132
+ titleFontSize: "clamp(1.375rem, 1.27rem + 0.54vw, 1.75rem)",
133
+ titleFontWeight: "600",
134
+ titleLetterSpacing: "-0.02em",
135
+ formHeaderMarginBottom: "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
136
+ formSubtitleFontSize: "0.9375rem",
137
+ formFieldsGap: "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
138
+ formFooterMarginTop: "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
139
+ fieldGroupGap: "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
140
+ pageContainerMaxWidth: "25rem",
141
+ pageContainerMaxWidthWide: "26.25rem",
142
+ pageContainerPadding: "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
143
+ pageCardPadding: "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
144
+ pageCardRadius: "0.75rem",
145
+ radiusSm: "0.5rem",
146
+ radiusMd: "0.625rem",
147
+ radiusLg: "0.75rem",
148
+ radiusFull: "9999px",
149
+ radiusCard: "clamp(0.75rem, 0.59rem + 0.78vw, 1rem)",
150
+ shadowCard: "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)",
151
+ shadowButtonHoverPrimary: "0 0.25rem 0.75rem rgba(124, 92, 255, 0.3), 0 0.125rem 0.25rem rgba(124, 92, 255, 0.2)",
152
+ shadowButtonHoverSuccess: "0 0.25rem 0.75rem rgba(61, 138, 80, 0.3), 0 0.125rem 0.25rem rgba(61, 138, 80, 0.2)",
153
+ shadowInputFocus: "0 0 0 0.1875rem rgba(124, 92, 255, 0.12), inset 0 0.0625rem 0.125rem rgba(26, 26, 26, 0.04)",
154
+ shadowOverlay: "0 0.25rem 0.5rem rgba(0, 0, 0, 0.1)",
155
+ shadowModal: "0 1.5rem 3rem rgba(0, 0, 0, 0.15)",
156
+ shadowOtpCellFocus: "0 0 0 0.25rem rgba(124, 92, 255, 0.1)",
157
+ breakpointSm: "640px",
158
+ breakpointMd: "768px",
159
+ breakpointLg: "1024px",
160
+ breakpointXl: "1280px",
161
+ zIndexDropdown: "1000",
162
+ zIndexSticky: "1020",
163
+ zIndexFixed: "1030",
164
+ zIndexModalBackdrop: "1040",
165
+ zIndexModal: "1050",
166
+ zIndexPopover: "1060",
167
+ zIndexTooltip: "1070",
168
+ sizeIconSm: "1rem",
169
+ sizeIconMd: "1.5rem",
170
+ sizeIconLg: "2rem",
171
+ sizeIconXl: "2.5rem",
172
+ sizeSpinnerSm: "1rem",
173
+ sizeSpinnerMd: "2rem",
174
+ sizeSpinnerLg: "4rem",
175
+ sizeSpinnerButton: "1.125rem",
176
+ sizeBorderWidthThin: "0.0625rem",
177
+ sizeBorderWidthBase: "0.09375rem",
178
+ sizeBorderWidthThick: "0.125rem",
179
+ sizeBorderWidthHeavy: "0.1875rem",
180
+ sizeBorderWidthBold: "0.25rem",
181
+ sizeChipPaddingSm: "0.125rem 0.5rem",
182
+ sizeChipPaddingMd: "0.25rem 0.75rem",
183
+ sizeCloseButton: "2rem",
184
+ spaceFixed2xs: "0.0625rem",
185
+ spaceFixedXs: "0.125rem",
186
+ spaceFixedSm: "0.25rem",
187
+ spaceFixedMd: "0.5rem",
188
+ spaceXs: "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem)",
189
+ spaceSm: "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
190
+ spaceMd: "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
191
+ spaceLg: "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
192
+ spaceXl: "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
193
+ space2xl: "clamp(2rem, 1.35rem + 3.26vw, 4.5rem)",
194
+ fontBody: "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
195
+ fontSizeSm: "clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem)",
196
+ fontSizeBase: "clamp(0.875rem, 0.83rem + 0.22vw, 1rem)",
197
+ fontSizeLg: "clamp(1rem, 0.93rem + 0.33vw, 1.25rem)",
198
+ fontSizeXl: "clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem)",
199
+ fontSize2xl: "clamp(1.5rem, 1.35rem + 0.76vw, 1.875rem)",
200
+ lineHeightTight: "1.25",
201
+ lineHeightNormal: "1.5",
202
+ lineHeightRelaxed: "1.75"
203
+ };
204
+
205
+ /**
206
+ * CSS variable names mapped to their values
207
+ * @example
208
+ * import { cssVars } from '@transcodes/design-tokens';
209
+ * console.log(cssVars['--accent-primary']); // '#6b4fd9'
210
+ */
211
+ export const cssVars = {
212
+ '--duration-instant': "150ms",
213
+ '--duration-fast': "300ms",
214
+ '--duration-smooth': "400ms",
215
+ '--duration-slow': "600ms",
216
+ '--duration-slower': "800ms",
217
+ '--easing-ease': "ease",
218
+ '--easing-ease-in-out': "cubic-bezier(0.4, 0, 0.2, 1)",
219
+ '--easing-bounce': "cubic-bezier(0.34, 1.56, 0.64, 1)",
220
+ '--ink-effect-ripple-duration': "600ms",
221
+ '--ink-effect-ripple-easing': "cubic-bezier(0.4, 0, 0.2, 1)",
222
+ '--ink-effect-spread-scale': "2.5",
223
+ '--ink-effect-fade-duration': "300ms",
224
+ '--transition-fast': "150ms ease",
225
+ '--transition-smooth': "300ms cubic-bezier(0.4, 0, 0.2, 1)",
226
+ '--transition-bounce': "400ms cubic-bezier(0.34, 1.56, 0.64, 1)",
227
+ '--opacity-disabled': "0.6",
228
+ '--opacity-hover': "0.7",
229
+ '--opacity-loading': "0.6",
230
+ '--opacity-hidden': "0",
231
+ '--opacity-visible': "1",
232
+ '--brand-primary': "#7c5cff",
233
+ '--brand-primary-hover': "#6a4ae8",
234
+ '--brand-logo-text': "#1a1a1a",
235
+ '--accent-primary': "#6b4fd9",
236
+ '--accent-primary-hover': "#5a3fc8",
237
+ '--accent-primary-pressed': "#4a32b0",
238
+ '--accent-success': "#357a46",
239
+ '--accent-success-hover': "#2d6a3c",
240
+ '--accent-success-pressed': "#255a32",
241
+ '--alpha-primary04': "#7c5cff0a",
242
+ '--alpha-primary08': "#7c5cff14",
243
+ '--alpha-primary10': "#7c5cff1a",
244
+ '--alpha-primary12': "#7c5cff1f",
245
+ '--alpha-primary15': "#7c5cff26",
246
+ '--alpha-primary20': "#7c5cff33",
247
+ '--alpha-primary30': "#7c5cff4d",
248
+ '--alpha-primary40': "#7c5cff66",
249
+ '--alpha-primary50': "#7c5cff80",
250
+ '--alpha-success10': "#3d8a501a",
251
+ '--alpha-success15': "#3d8a5026",
252
+ '--alpha-success20': "#3d8a5033",
253
+ '--alpha-success30': "#3d8a504d",
254
+ '--alpha-warning08': "#b4530914",
255
+ '--alpha-warning15': "#b4530926",
256
+ '--alpha-warning20': "#b4530933",
257
+ '--alpha-info08': "#0369a114",
258
+ '--alpha-info15': "#0369a126",
259
+ '--alpha-info20': "#0369a133",
260
+ '--alpha-ink04': "#1a1a1a0a",
261
+ '--alpha-ink06': "#1a1a1a0f",
262
+ '--alpha-ink10': "#1a1a1a1a",
263
+ '--alpha-white15': "#ffffff26",
264
+ '--alpha-white30': "#ffffff4d",
265
+ '--alpha-white90': "#ffffffe6",
266
+ '--error-base': "#c0392b",
267
+ '--error-bg': "#e74c3c14",
268
+ '--error-border': "#e74c3c33",
269
+ '--ink-black': "#1a1a1a",
270
+ '--ink-dark': "#2d2d2d",
271
+ '--ink-medium': "#5c5c5c",
272
+ '--ink-light': "#8a8a8a",
273
+ '--ink-faint': "#c4c4c4",
274
+ '--overlay-dim': "#00000080",
275
+ '--overlay-dark': "#000000b3",
276
+ '--overlay-shadow-light': "#0000001a",
277
+ '--overlay-shadow-subtle': "#00000026",
278
+ '--overlay-shadow-medium': "#00000033",
279
+ '--overlay-shadow-strong': "#0000004d",
280
+ '--overlay-shadow-heavy': "#00000066",
281
+ '--overlay-glow-white': "#ffffff26",
282
+ '--overlay-spinner-track': "#ffffff4d",
283
+ '--paper-white': "#faf9fc",
284
+ '--paper-cream': "#f5f4f8",
285
+ '--paper-warm': "#ebe9f0",
286
+ '--semantic-warning': "#b45309",
287
+ '--semantic-warning-hover': "#92400e",
288
+ '--semantic-warning-bg': "#fff8e1",
289
+ '--semantic-warning-light': "#fef3c7",
290
+ '--semantic-success-bg': "#d1fae5",
291
+ '--semantic-info': "#0369a1",
292
+ '--semantic-info-hover': "#075985",
293
+ '--semantic-info-bg': "#e0f2fe",
294
+ '--button-height': "3.25rem",
295
+ '--button-height-secondary': "3rem",
296
+ '--button-radius': "0.625rem",
297
+ '--button-font-size': "0.9375rem",
298
+ '--button-font-weight': "500",
299
+ '--button-letter-spacing': "0.02em",
300
+ '--button-dark': "#1a1a1a",
301
+ '--button-dark-hover': "#2a2a2a",
302
+ '--button-light': "#f5f4f8",
303
+ '--button-light-hover': "#ebe9f0",
304
+ '--button-text-height': "2.5rem",
305
+ '--button-text-font-size': "0.875rem",
306
+ '--button-text-padding-sm': "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem) clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
307
+ '--button-text-padding-md': "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem) clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
308
+ '--button-content-gap': "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
309
+ '--button-spinner-size': "1rem",
310
+ '--button-spinner-border-width': "2px",
311
+ '--card-padding': "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
312
+ '--card-radius': "clamp(0.75rem, 0.59rem + 0.78vw, 1rem)",
313
+ '--container-max-width': "25rem",
314
+ '--container-max-width-wide': "26.25rem",
315
+ '--feedback-error-padding': "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
316
+ '--feedback-error-radius': "0.625rem",
317
+ '--feedback-error-gap': "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
318
+ '--feedback-error-icon-size': "1rem",
319
+ '--feedback-notice-padding': "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
320
+ '--feedback-notice-radius': "0.625rem",
321
+ '--feedback-notice-gap': "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
322
+ '--feedback-notice-icon-size': "1.25rem",
323
+ '--input-padding-y': "0.875rem",
324
+ '--input-padding-x': "1rem",
325
+ '--input-radius': "0.625rem",
326
+ '--input-font-size': "1rem",
327
+ '--label-font-size': "0.75rem",
328
+ '--label-font-weight': "500",
329
+ '--label-letter-spacing': "0.08em",
330
+ '--title-font-size': "clamp(1.375rem, 1.27rem + 0.54vw, 1.75rem)",
331
+ '--title-font-weight': "600",
332
+ '--title-letter-spacing': "-0.02em",
333
+ '--form-header-margin-bottom': "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
334
+ '--form-subtitle-font-size': "0.9375rem",
335
+ '--form-fields-gap': "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
336
+ '--form-footer-margin-top': "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
337
+ '--field-group-gap': "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
338
+ '--page-container-max-width': "25rem",
339
+ '--page-container-max-width-wide': "26.25rem",
340
+ '--page-container-padding': "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
341
+ '--page-card-padding': "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
342
+ '--page-card-radius': "0.75rem",
343
+ '--radius-sm': "0.5rem",
344
+ '--radius-md': "0.625rem",
345
+ '--radius-lg': "0.75rem",
346
+ '--radius-full': "9999px",
347
+ '--radius-card': "clamp(0.75rem, 0.59rem + 0.78vw, 1rem)",
348
+ '--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)",
349
+ '--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)",
350
+ '--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)",
351
+ '--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)",
352
+ '--shadow-overlay': "0 0.25rem 0.5rem rgba(0, 0, 0, 0.1)",
353
+ '--shadow-modal': "0 1.5rem 3rem rgba(0, 0, 0, 0.15)",
354
+ '--shadow-otp-cell-focus': "0 0 0 0.25rem rgba(124, 92, 255, 0.1)",
355
+ '--breakpoint-sm': "640px",
356
+ '--breakpoint-md': "768px",
357
+ '--breakpoint-lg': "1024px",
358
+ '--breakpoint-xl': "1280px",
359
+ '--z-index-dropdown': "1000",
360
+ '--z-index-sticky': "1020",
361
+ '--z-index-fixed': "1030",
362
+ '--z-index-modal-backdrop': "1040",
363
+ '--z-index-modal': "1050",
364
+ '--z-index-popover': "1060",
365
+ '--z-index-tooltip': "1070",
366
+ '--size-icon-sm': "1rem",
367
+ '--size-icon-md': "1.5rem",
368
+ '--size-icon-lg': "2rem",
369
+ '--size-icon-xl': "2.5rem",
370
+ '--size-spinner-sm': "1rem",
371
+ '--size-spinner-md': "2rem",
372
+ '--size-spinner-lg': "4rem",
373
+ '--size-spinner-button': "1.125rem",
374
+ '--size-border-width-thin': "0.0625rem",
375
+ '--size-border-width-base': "0.09375rem",
376
+ '--size-border-width-thick': "0.125rem",
377
+ '--size-border-width-heavy': "0.1875rem",
378
+ '--size-border-width-bold': "0.25rem",
379
+ '--size-chip-padding-sm': "0.125rem 0.5rem",
380
+ '--size-chip-padding-md': "0.25rem 0.75rem",
381
+ '--size-close-button': "2rem",
382
+ '--space-fixed2xs': "0.0625rem",
383
+ '--space-fixed-xs': "0.125rem",
384
+ '--space-fixed-sm': "0.25rem",
385
+ '--space-fixed-md': "0.5rem",
386
+ '--space-xs': "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem)",
387
+ '--space-sm': "clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
388
+ '--space-md': "clamp(0.875rem, 0.77rem + 0.54vw, 1.25rem)",
389
+ '--space-lg': "clamp(1.25rem, 1.03rem + 1.09vw, 2rem)",
390
+ '--space-xl': "clamp(1.5rem, 1.15rem + 1.74vw, 2.75rem)",
391
+ '--space2xl': "clamp(2rem, 1.35rem + 3.26vw, 4.5rem)",
392
+ '--font-body': "\"DM Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif",
393
+ '--font-size-sm': "clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem)",
394
+ '--font-size-base': "clamp(0.875rem, 0.83rem + 0.22vw, 1rem)",
395
+ '--font-size-lg': "clamp(1rem, 0.93rem + 0.33vw, 1.25rem)",
396
+ '--font-size-xl': "clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem)",
397
+ '--font-size2xl': "clamp(1.5rem, 1.35rem + 0.76vw, 1.875rem)",
398
+ '--line-height-tight': "1.25",
399
+ '--line-height-normal': "1.5",
400
+ '--line-height-relaxed': "1.75"
401
+ };
402
+
403
+ export default tokens;
package/build/tokens.css CHANGED
@@ -79,14 +79,19 @@
79
79
  --paper-warm: #ebe9f0;
80
80
  --semantic-warning: #b45309; /** Warning state. WCAG AA: 4.6:1 on paper-white */
81
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 */
82
85
  --semantic-info: #0369a1; /** Info state. WCAG AA: 4.8:1 on paper-white */
83
86
  --semantic-info-hover: #075985; /** Info hover. WCAG AA: 5.8:1 on paper-white */
87
+ --semantic-info-bg: #e0f2fe; /** Info background tint */
84
88
  --button-height: 3.25rem;
85
89
  --button-height-secondary: 3rem;
86
90
  --button-radius: 0.625rem;
87
91
  --button-font-size: 0.9375rem;
88
92
  --button-font-weight: 500;
89
93
  --button-letter-spacing: 0.02em;
94
+ --button-dark-hover: #2a2a2a; /** Dark button hover state */
90
95
  --button-text-height: 2.5rem; /** Text button height */
91
96
  --button-text-font-size: 0.875rem; /** Text button font size */
92
97
  --button-spinner-size: 1rem; /** Loading spinner size */
@@ -166,6 +171,9 @@
166
171
  --line-height-tight: 1.25;
167
172
  --line-height-normal: 1.5;
168
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 */
169
177
  --button-text-padding-sm: var(--space-xs) var(--space-sm); /** Small text button padding */
170
178
  --button-text-padding-md: var(--space-sm) var(--space-md); /** Medium text button padding */
171
179
  --button-content-gap: var(--space-sm); /** Gap between button icon and text */
package/build/tokens.d.ts CHANGED
@@ -117,16 +117,32 @@ export const paperWarm: string;
117
117
  export const semanticWarning: string;
118
118
  /** Warning hover. WCAG AA: 5.8:1 on paper-white */
119
119
  export const semanticWarningHover: string;
120
+ /** Warning background tint for callouts/notifications */
121
+ export const semanticWarningBg: string;
122
+ /** Warning light background */
123
+ export const semanticWarningLight: string;
124
+ /** Success background tint for status indicators */
125
+ export const semanticSuccessBg: string;
120
126
  /** Info state. WCAG AA: 4.8:1 on paper-white */
121
127
  export const semanticInfo: string;
122
128
  /** Info hover. WCAG AA: 5.8:1 on paper-white */
123
129
  export const semanticInfoHover: string;
130
+ /** Info background tint */
131
+ export const semanticInfoBg: string;
124
132
  export const buttonHeight: string;
125
133
  export const buttonHeightSecondary: string;
126
134
  export const buttonRadius: string;
127
135
  export const buttonFontSize: string;
128
136
  export const buttonFontWeight: string;
129
137
  export const buttonLetterSpacing: string;
138
+ /** Dark button background (console, signin) */
139
+ export const buttonDark: string;
140
+ /** Dark button hover state */
141
+ export const buttonDarkHover: string;
142
+ /** Light gray secondary button background */
143
+ export const buttonLight: string;
144
+ /** Light button hover state */
145
+ export const buttonLightHover: string;
130
146
  /** Text button height */
131
147
  export const buttonTextHeight: string;
132
148
  /** Text button font size */
package/build/tokens.json CHANGED
@@ -75,14 +75,22 @@
75
75
  "PaperWarm": "#ebe9f0",
76
76
  "SemanticWarning": "#b45309",
77
77
  "SemanticWarningHover": "#92400e",
78
+ "SemanticWarningBg": "#fff8e1",
79
+ "SemanticWarningLight": "#fef3c7",
80
+ "SemanticSuccessBg": "#d1fae5",
78
81
  "SemanticInfo": "#0369a1",
79
82
  "SemanticInfoHover": "#075985",
83
+ "SemanticInfoBg": "#e0f2fe",
80
84
  "ButtonHeight": "3.25rem",
81
85
  "ButtonHeightSecondary": "3rem",
82
86
  "ButtonRadius": "0.625rem",
83
87
  "ButtonFontSize": "0.9375rem",
84
88
  "ButtonFontWeight": "500",
85
89
  "ButtonLetterSpacing": "0.02em",
90
+ "ButtonDark": "#1a1a1a",
91
+ "ButtonDarkHover": "#2a2a2a",
92
+ "ButtonLight": "#f5f4f8",
93
+ "ButtonLightHover": "#ebe9f0",
86
94
  "ButtonTextHeight": "2.5rem",
87
95
  "ButtonTextFontSize": "0.875rem",
88
96
  "ButtonTextPaddingSm": "clamp(0.25rem, 0.23rem + 0.11vw, 0.3125rem) clamp(0.5rem, 0.46rem + 0.22vw, 0.625rem)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transcodes/design-tokens",
3
- "version": "0.1.0",
3
+ "version": "0.3.0",
4
4
  "private": false,
5
5
  "description": "Style Dictionary based design tokens with dark mode support for consistent, beautiful interfaces",
6
6
  "keywords": [
@@ -30,7 +30,11 @@
30
30
  },
31
31
  "type": "module",
32
32
  "exports": {
33
- ".": "./build/tokens.css",
33
+ ".": {
34
+ "types": "./build/index.d.ts",
35
+ "import": "./build/index.js"
36
+ },
37
+ "./css": "./build/tokens.css",
34
38
  "./tokens.css": "./build/tokens.css",
35
39
  "./tokens-dark.css": "./build/tokens-dark.css",
36
40
  "./components.css": "./build/components.css",
@@ -46,7 +50,7 @@
46
50
  "README.md"
47
51
  ],
48
52
  "scripts": {
49
- "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",
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",
50
54
  "clean": "rm -rf build"
51
55
  },
52
56
  "devDependencies": {