@libretexts/davis-core 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base.v4.css +89 -0
- package/dist/theme.css +120 -46
- package/dist/tokens.d.ts +204 -43
- package/dist/tokens.d.ts.map +1 -1
- package/dist/tokens.js +212 -43
- package/dist/tokens.js.map +1 -1
- package/dist/variants.d.ts +469 -0
- package/dist/variants.d.ts.map +1 -1
- package/dist/variants.js +106 -0
- package/dist/variants.js.map +1 -1
- package/package.json +3 -5
- package/dist/base.css +0 -131
- package/dist/base.scoped.css +0 -195
- package/tailwind.preset.cjs +0 -205
package/dist/base.v4.css
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Davis Design System — Tailwind CSS v4 Base Styles
|
|
3
|
+
*
|
|
4
|
+
* AUTO-GENERATED from tokens.ts — DO NOT EDIT MANUALLY
|
|
5
|
+
* Run 'npm run generate:configs' to regenerate
|
|
6
|
+
*
|
|
7
|
+
* Base styles for Tailwind CSS v4 (without @layer directive).
|
|
8
|
+
* Contains typography defaults, heading hierarchy, focus management,
|
|
9
|
+
* and reduced motion support.
|
|
10
|
+
*
|
|
11
|
+
* Import this along with theme.css for full v4 support:
|
|
12
|
+
* @import "@libretexts/davis-core/theme.css";
|
|
13
|
+
* @import "@libretexts/davis-core/base.v4.css";
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/* ─── Typography Defaults ───────────────────────────────── */
|
|
17
|
+
|
|
18
|
+
html {
|
|
19
|
+
font-family: 'Atkinson Hyperlegible', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
20
|
+
font-size: 16px;
|
|
21
|
+
-webkit-font-smoothing: antialiased;
|
|
22
|
+
-moz-osx-font-smoothing: grayscale;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* ─── Heading Hierarchy (Major Third Scale) ─────────────────── */
|
|
26
|
+
|
|
27
|
+
h1 {
|
|
28
|
+
font-size: 3.052rem;
|
|
29
|
+
line-height: 3.25rem;
|
|
30
|
+
font-weight: 700;
|
|
31
|
+
letter-spacing: -0.025em;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
h2 {
|
|
35
|
+
font-size: 2.441rem;
|
|
36
|
+
line-height: 2.75rem;
|
|
37
|
+
font-weight: 700;
|
|
38
|
+
letter-spacing: -0.02em;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
h3 {
|
|
42
|
+
font-size: 1.953rem;
|
|
43
|
+
line-height: 2.25rem;
|
|
44
|
+
font-weight: 600;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
h4 {
|
|
48
|
+
font-size: 1.563rem;
|
|
49
|
+
line-height: 2rem;
|
|
50
|
+
font-weight: 600;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
h5 {
|
|
54
|
+
font-size: 1.250rem;
|
|
55
|
+
line-height: 1.75rem;
|
|
56
|
+
font-weight: 600;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
h6 {
|
|
60
|
+
font-size: 1.250rem;
|
|
61
|
+
line-height: 1.75rem;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* ─── Focus Management ──────────────────────────────────────── */
|
|
66
|
+
|
|
67
|
+
*:focus-visible {
|
|
68
|
+
outline: 2px solid #127BC4;
|
|
69
|
+
outline-offset: 2px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
*:focus:not(:focus-visible) {
|
|
73
|
+
outline: none;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* ─── Reduced Motion ──────────────────────────────────────── */
|
|
77
|
+
/* Disables transitions and animations for users who prefer */
|
|
78
|
+
/* reduced motion. Respects prefers-reduced-motion: reduce. */
|
|
79
|
+
|
|
80
|
+
@media (prefers-reduced-motion: reduce) {
|
|
81
|
+
*,
|
|
82
|
+
*::before,
|
|
83
|
+
*::after {
|
|
84
|
+
animation-duration: 0.01ms !important;
|
|
85
|
+
animation-iteration-count: 1 !important;
|
|
86
|
+
transition-duration: 0.01ms !important;
|
|
87
|
+
scroll-behavior: auto !important;
|
|
88
|
+
}
|
|
89
|
+
}
|
package/dist/theme.css
CHANGED
|
@@ -41,60 +41,60 @@
|
|
|
41
41
|
/* ─── Colors ──────────────────────────────────────────────── */
|
|
42
42
|
|
|
43
43
|
/* Primary */
|
|
44
|
-
--color-primary-50: #
|
|
45
|
-
--color-primary-100: #
|
|
46
|
-
--color-primary-200: #
|
|
47
|
-
--color-primary-300: #
|
|
48
|
-
--color-primary-400: #
|
|
44
|
+
--color-primary-50: #ebf0f4;
|
|
45
|
+
--color-primary-100: #dbe7f0;
|
|
46
|
+
--color-primary-200: #bcd8eb;
|
|
47
|
+
--color-primary-300: #8dc2e7;
|
|
48
|
+
--color-primary-400: #4ca6e6;
|
|
49
49
|
--color-primary-500: #127BC4;
|
|
50
|
-
--color-primary-600: #
|
|
51
|
-
--color-primary-700: #
|
|
52
|
-
--color-primary-800: #
|
|
53
|
-
--color-primary-900: #
|
|
54
|
-
--color-primary-950: #
|
|
50
|
+
--color-primary-600: #106098;
|
|
51
|
+
--color-primary-700: #0f4b75;
|
|
52
|
+
--color-primary-800: #0d334e;
|
|
53
|
+
--color-primary-900: #0c2231;
|
|
54
|
+
--color-primary-950: #0b1923;
|
|
55
55
|
--color-primary: #127BC4;
|
|
56
56
|
|
|
57
57
|
/* Secondary */
|
|
58
|
-
--color-secondary-50: #
|
|
59
|
-
--color-secondary-100: #
|
|
60
|
-
--color-secondary-200: #
|
|
61
|
-
--color-secondary-300: #
|
|
62
|
-
--color-secondary-400: #
|
|
63
|
-
--color-secondary-500: #
|
|
64
|
-
--color-secondary-600: #
|
|
65
|
-
--color-secondary-700: #
|
|
66
|
-
--color-secondary-800: #
|
|
67
|
-
--color-secondary-900: #
|
|
68
|
-
--color-secondary-950: #
|
|
69
|
-
--color-secondary: #
|
|
58
|
+
--color-secondary-50: #e8eef2;
|
|
59
|
+
--color-secondary-100: #dbe7f0;
|
|
60
|
+
--color-secondary-200: #b4d3e9;
|
|
61
|
+
--color-secondary-300: #81bbe4;
|
|
62
|
+
--color-secondary-400: #369be2;
|
|
63
|
+
--color-secondary-500: #0F67A6;
|
|
64
|
+
--color-secondary-600: #0e5181;
|
|
65
|
+
--color-secondary-700: #0d3f63;
|
|
66
|
+
--color-secondary-800: #0c2e46;
|
|
67
|
+
--color-secondary-900: #0b1f2d;
|
|
68
|
+
--color-secondary-950: #0a161f;
|
|
69
|
+
--color-secondary: #0F67A6;
|
|
70
70
|
|
|
71
71
|
/* Tertiary */
|
|
72
|
-
--color-tertiary-50: #
|
|
73
|
-
--color-tertiary-100: #
|
|
74
|
-
--color-tertiary-200: #
|
|
75
|
-
--color-tertiary-300: #
|
|
76
|
-
--color-tertiary-400: #
|
|
77
|
-
--color-tertiary-500: #
|
|
78
|
-
--color-tertiary-600: #
|
|
79
|
-
--color-tertiary-700: #
|
|
80
|
-
--color-tertiary-800: #
|
|
81
|
-
--color-tertiary-900: #
|
|
82
|
-
--color-tertiary-950: #
|
|
83
|
-
--color-tertiary: #
|
|
72
|
+
--color-tertiary-50: #edf0f2;
|
|
73
|
+
--color-tertiary-100: #e3e8ed;
|
|
74
|
+
--color-tertiary-200: #c7d4e0;
|
|
75
|
+
--color-tertiary-300: #a6bed3;
|
|
76
|
+
--color-tertiary-400: #77a1c5;
|
|
77
|
+
--color-tertiary-500: #4076a4;
|
|
78
|
+
--color-tertiary-600: #335c80;
|
|
79
|
+
--color-tertiary-700: #294761;
|
|
80
|
+
--color-tertiary-800: #1f3242;
|
|
81
|
+
--color-tertiary-900: #16222c;
|
|
82
|
+
--color-tertiary-950: #11171d;
|
|
83
|
+
--color-tertiary: #4076a4;
|
|
84
84
|
|
|
85
85
|
/* Success */
|
|
86
|
-
--color-success-50: #
|
|
87
|
-
--color-success-100: #
|
|
88
|
-
--color-success-200: #
|
|
89
|
-
--color-success-300: #
|
|
90
|
-
--color-success-400: #
|
|
91
|
-
--color-success-500: #
|
|
92
|
-
--color-success-600: #
|
|
93
|
-
--color-success-700: #
|
|
94
|
-
--color-success-800: #
|
|
95
|
-
--color-success-900: #
|
|
96
|
-
--color-success-950: #
|
|
97
|
-
--color-success: #
|
|
86
|
+
--color-success-50: #eaf1eb;
|
|
87
|
+
--color-success-100: #dbebdf;
|
|
88
|
+
--color-success-200: #b6ddc0;
|
|
89
|
+
--color-success-300: #86d09a;
|
|
90
|
+
--color-success-400: #42c264;
|
|
91
|
+
--color-success-500: #207537;
|
|
92
|
+
--color-success-600: #1a5b2b;
|
|
93
|
+
--color-success-700: #164623;
|
|
94
|
+
--color-success-800: #13351c;
|
|
95
|
+
--color-success-900: #0f2415;
|
|
96
|
+
--color-success-950: #0c180f;
|
|
97
|
+
--color-success: #207537;
|
|
98
98
|
|
|
99
99
|
/* Warning */
|
|
100
100
|
--color-warning-50: #FFF7ED;
|
|
@@ -138,6 +138,12 @@
|
|
|
138
138
|
--color-neutral-950: #09090B;
|
|
139
139
|
--color-neutral: #71717A;
|
|
140
140
|
|
|
141
|
+
/* Text */
|
|
142
|
+
--color-text-DEFAULT: #162032;
|
|
143
|
+
--color-text-neutral: #71717A;
|
|
144
|
+
--color-text-white: #FFFFFF;
|
|
145
|
+
--color-text: #162032;
|
|
146
|
+
|
|
141
147
|
/* Surface */
|
|
142
148
|
--color-surface: #FFFFFF;
|
|
143
149
|
--color-surface-muted: #F9FAFB;
|
|
@@ -181,4 +187,72 @@
|
|
|
181
187
|
|
|
182
188
|
--davis-target-size-minimum: 24px;
|
|
183
189
|
--davis-target-size-comfortable: 44px;
|
|
190
|
+
|
|
191
|
+
/* ─── Z-Index ──────────────────────────────────────────────── */
|
|
192
|
+
|
|
193
|
+
--z-index-dropdown: 1000;
|
|
194
|
+
--z-index-sticky: 1100;
|
|
195
|
+
--z-index-fixed: 1200;
|
|
196
|
+
--z-index-modalBackdrop: 1300;
|
|
197
|
+
--z-index-modal: 1400;
|
|
198
|
+
--z-index-popover: 1500;
|
|
199
|
+
--z-index-toast: 1600;
|
|
200
|
+
--z-index-tooltip: 1700;
|
|
201
|
+
|
|
202
|
+
/* ─── Opacity ──────────────────────────────────────────────── */
|
|
203
|
+
|
|
204
|
+
--opacity-disabled: 0.5;
|
|
205
|
+
--opacity-placeholder: 0.6;
|
|
206
|
+
--opacity-overlay: 0.5;
|
|
207
|
+
--opacity-hoverLight: 0.04;
|
|
208
|
+
--opacity-hoverMedium: 0.08;
|
|
209
|
+
|
|
210
|
+
/* ─── Border Width ─────────────────────────────────────────── */
|
|
211
|
+
|
|
212
|
+
--border-width-none: 0px;
|
|
213
|
+
--border-width-thin: 1px;
|
|
214
|
+
--border-width-medium: 2px;
|
|
215
|
+
--border-width-thick: 3px;
|
|
216
|
+
|
|
217
|
+
/* ─── Font Weight ──────────────────────────────────────────── */
|
|
218
|
+
|
|
219
|
+
--font-weight-light: 300;
|
|
220
|
+
--font-weight-regular: 400;
|
|
221
|
+
--font-weight-medium: 500;
|
|
222
|
+
--font-weight-semibold: 600;
|
|
223
|
+
--font-weight-bold: 700;
|
|
224
|
+
|
|
225
|
+
/* ─── Letter Spacing ───────────────────────────────────────── */
|
|
226
|
+
|
|
227
|
+
--letter-spacing-tighter: -0.05em;
|
|
228
|
+
--letter-spacing-tight: -0.025em;
|
|
229
|
+
--letter-spacing-normal: 0em;
|
|
230
|
+
--letter-spacing-wide: 0.025em;
|
|
231
|
+
--letter-spacing-wider: 0.05em;
|
|
232
|
+
--letter-spacing-widest: 0.1em;
|
|
233
|
+
|
|
234
|
+
/* ─── Breakpoints ──────────────────────────────────────────── */
|
|
235
|
+
|
|
236
|
+
--breakpoint-sm: 640px;
|
|
237
|
+
--breakpoint-md: 768px;
|
|
238
|
+
--breakpoint-lg: 1024px;
|
|
239
|
+
--breakpoint-xl: 1280px;
|
|
240
|
+
--breakpoint-2xl: 1536px;
|
|
241
|
+
|
|
242
|
+
/* ─── Icon Size ────────────────────────────────────────────── */
|
|
243
|
+
|
|
244
|
+
--icon-size-xs: 0.75rem;
|
|
245
|
+
--icon-size-sm: 1rem;
|
|
246
|
+
--icon-size-md: 1.25rem;
|
|
247
|
+
--icon-size-lg: 1.5rem;
|
|
248
|
+
--icon-size-xl: 2rem;
|
|
249
|
+
|
|
250
|
+
/* ─── Container / Content Width ────────────────────────────── */
|
|
251
|
+
|
|
252
|
+
--container-sm: 640px;
|
|
253
|
+
--container-md: 768px;
|
|
254
|
+
--container-lg: 1024px;
|
|
255
|
+
--container-xl: 1280px;
|
|
256
|
+
--container-2xl: 1536px;
|
|
257
|
+
--container-prose: 65ch;
|
|
184
258
|
}
|
package/dist/tokens.d.ts
CHANGED
|
@@ -65,56 +65,56 @@ export declare const FONT_SIZE: {
|
|
|
65
65
|
*/
|
|
66
66
|
export declare const COLORS: {
|
|
67
67
|
readonly primary: {
|
|
68
|
-
readonly 50: "#
|
|
69
|
-
readonly 100: "#
|
|
70
|
-
readonly 200: "#
|
|
71
|
-
readonly 300: "#
|
|
72
|
-
readonly 400: "#
|
|
68
|
+
readonly 50: "#ebf0f4";
|
|
69
|
+
readonly 100: "#dbe7f0";
|
|
70
|
+
readonly 200: "#bcd8eb";
|
|
71
|
+
readonly 300: "#8dc2e7";
|
|
72
|
+
readonly 400: "#4ca6e6";
|
|
73
73
|
readonly 500: "#127BC4";
|
|
74
|
-
readonly 600: "#
|
|
75
|
-
readonly 700: "#
|
|
76
|
-
readonly 800: "#
|
|
77
|
-
readonly 900: "#
|
|
78
|
-
readonly 950: "#
|
|
74
|
+
readonly 600: "#106098";
|
|
75
|
+
readonly 700: "#0f4b75";
|
|
76
|
+
readonly 800: "#0d334e";
|
|
77
|
+
readonly 900: "#0c2231";
|
|
78
|
+
readonly 950: "#0b1923";
|
|
79
79
|
};
|
|
80
80
|
readonly secondary: {
|
|
81
|
-
readonly 50: "#
|
|
82
|
-
readonly 100: "#
|
|
83
|
-
readonly 200: "#
|
|
84
|
-
readonly 300: "#
|
|
85
|
-
readonly 400: "#
|
|
86
|
-
readonly 500: "#
|
|
87
|
-
readonly 600: "#
|
|
88
|
-
readonly 700: "#
|
|
89
|
-
readonly 800: "#
|
|
90
|
-
readonly 900: "#
|
|
91
|
-
readonly 950: "#
|
|
81
|
+
readonly 50: "#e8eef2";
|
|
82
|
+
readonly 100: "#dbe7f0";
|
|
83
|
+
readonly 200: "#b4d3e9";
|
|
84
|
+
readonly 300: "#81bbe4";
|
|
85
|
+
readonly 400: "#369be2";
|
|
86
|
+
readonly 500: "#0F67A6";
|
|
87
|
+
readonly 600: "#0e5181";
|
|
88
|
+
readonly 700: "#0d3f63";
|
|
89
|
+
readonly 800: "#0c2e46";
|
|
90
|
+
readonly 900: "#0b1f2d";
|
|
91
|
+
readonly 950: "#0a161f";
|
|
92
92
|
};
|
|
93
93
|
readonly tertiary: {
|
|
94
|
-
readonly 50: "#
|
|
95
|
-
readonly 100: "#
|
|
96
|
-
readonly 200: "#
|
|
97
|
-
readonly 300: "#
|
|
98
|
-
readonly 400: "#
|
|
99
|
-
readonly 500: "#
|
|
100
|
-
readonly 600: "#
|
|
101
|
-
readonly 700: "#
|
|
102
|
-
readonly 800: "#
|
|
103
|
-
readonly 900: "#
|
|
104
|
-
readonly 950: "#
|
|
94
|
+
readonly 50: "#edf0f2";
|
|
95
|
+
readonly 100: "#e3e8ed";
|
|
96
|
+
readonly 200: "#c7d4e0";
|
|
97
|
+
readonly 300: "#a6bed3";
|
|
98
|
+
readonly 400: "#77a1c5";
|
|
99
|
+
readonly 500: "#4076a4";
|
|
100
|
+
readonly 600: "#335c80";
|
|
101
|
+
readonly 700: "#294761";
|
|
102
|
+
readonly 800: "#1f3242";
|
|
103
|
+
readonly 900: "#16222c";
|
|
104
|
+
readonly 950: "#11171d";
|
|
105
105
|
};
|
|
106
106
|
readonly success: {
|
|
107
|
-
readonly 50: "#
|
|
108
|
-
readonly 100: "#
|
|
109
|
-
readonly 200: "#
|
|
110
|
-
readonly 300: "#
|
|
111
|
-
readonly 400: "#
|
|
112
|
-
readonly 500: "#
|
|
113
|
-
readonly 600: "#
|
|
114
|
-
readonly 700: "#
|
|
115
|
-
readonly 800: "#
|
|
116
|
-
readonly 900: "#
|
|
117
|
-
readonly 950: "#
|
|
107
|
+
readonly 50: "#eaf1eb";
|
|
108
|
+
readonly 100: "#dbebdf";
|
|
109
|
+
readonly 200: "#b6ddc0";
|
|
110
|
+
readonly 300: "#86d09a";
|
|
111
|
+
readonly 400: "#42c264";
|
|
112
|
+
readonly 500: "#207537";
|
|
113
|
+
readonly 600: "#1a5b2b";
|
|
114
|
+
readonly 700: "#164623";
|
|
115
|
+
readonly 800: "#13351c";
|
|
116
|
+
readonly 900: "#0f2415";
|
|
117
|
+
readonly 950: "#0c180f";
|
|
118
118
|
};
|
|
119
119
|
readonly warning: {
|
|
120
120
|
readonly 50: "#FFF7ED";
|
|
@@ -155,6 +155,11 @@ export declare const COLORS: {
|
|
|
155
155
|
readonly 900: "#18181B";
|
|
156
156
|
readonly 950: "#09090B";
|
|
157
157
|
};
|
|
158
|
+
readonly text: {
|
|
159
|
+
readonly DEFAULT: "#162032";
|
|
160
|
+
readonly neutral: "#71717A";
|
|
161
|
+
readonly white: "#FFFFFF";
|
|
162
|
+
};
|
|
158
163
|
};
|
|
159
164
|
/** Surface tokens for backgrounds */
|
|
160
165
|
export declare const SURFACE: {
|
|
@@ -304,4 +309,160 @@ export declare const TARGET_SIZE: {
|
|
|
304
309
|
readonly minimum: "24px";
|
|
305
310
|
readonly comfortable: "44px";
|
|
306
311
|
};
|
|
312
|
+
/**
|
|
313
|
+
* Layered z-index scale to prevent z-index wars.
|
|
314
|
+
* Each layer reserves space for the category of UI it represents.
|
|
315
|
+
*
|
|
316
|
+
* | Token | Value | Use |
|
|
317
|
+
* |----------------|-------|---------------------------------|
|
|
318
|
+
* | dropdown | 1000 | Select menus, menu dropdowns |
|
|
319
|
+
* | sticky | 1100 | Sticky headers, toolbars |
|
|
320
|
+
* | fixed | 1200 | Fixed navbars, FABs |
|
|
321
|
+
* | modalBackdrop | 1300 | Modal/drawer backdrop overlay |
|
|
322
|
+
* | modal | 1400 | Modal dialogs, drawers |
|
|
323
|
+
* | popover | 1500 | Popovers, floating panels |
|
|
324
|
+
* | toast | 1600 | Toast notifications |
|
|
325
|
+
* | tooltip | 1700 | Tooltips (always on top) |
|
|
326
|
+
*/
|
|
327
|
+
export declare const Z_INDEX: {
|
|
328
|
+
readonly dropdown: "1000";
|
|
329
|
+
readonly sticky: "1100";
|
|
330
|
+
readonly fixed: "1200";
|
|
331
|
+
readonly modalBackdrop: "1300";
|
|
332
|
+
readonly modal: "1400";
|
|
333
|
+
readonly popover: "1500";
|
|
334
|
+
readonly toast: "1600";
|
|
335
|
+
readonly tooltip: "1700";
|
|
336
|
+
};
|
|
337
|
+
/**
|
|
338
|
+
* Semantic opacity tokens for consistent transparency across components.
|
|
339
|
+
*
|
|
340
|
+
* | Token | Value | Use |
|
|
341
|
+
* |-------------|-------|-------------------------------------|
|
|
342
|
+
* | disabled | 0.5 | Disabled controls and text |
|
|
343
|
+
* | placeholder | 0.6 | Placeholder text in inputs |
|
|
344
|
+
* | overlay | 0.5 | Modal/drawer backdrop overlays |
|
|
345
|
+
* | hoverLight | 0.04 | Subtle hover background tint |
|
|
346
|
+
* | hoverMedium | 0.08 | Medium hover background tint |
|
|
347
|
+
*/
|
|
348
|
+
export declare const OPACITY: {
|
|
349
|
+
readonly disabled: "0.5";
|
|
350
|
+
readonly placeholder: "0.6";
|
|
351
|
+
readonly overlay: "0.5";
|
|
352
|
+
readonly hoverLight: "0.04";
|
|
353
|
+
readonly hoverMedium: "0.08";
|
|
354
|
+
};
|
|
355
|
+
/**
|
|
356
|
+
* Border width tokens for dividers, outlines, and component borders.
|
|
357
|
+
*
|
|
358
|
+
* | Token | Value | Use |
|
|
359
|
+
* |---------|-------|--------------------------------|
|
|
360
|
+
* | none | 0px | No border |
|
|
361
|
+
* | thin | 1px | Default borders, dividers |
|
|
362
|
+
* | medium | 2px | Emphasis borders, focus rings |
|
|
363
|
+
* | thick | 3px | Heavy emphasis, active states |
|
|
364
|
+
*/
|
|
365
|
+
export declare const BORDER_WIDTH: {
|
|
366
|
+
readonly none: "0px";
|
|
367
|
+
readonly thin: "1px";
|
|
368
|
+
readonly medium: "2px";
|
|
369
|
+
readonly thick: "3px";
|
|
370
|
+
};
|
|
371
|
+
/**
|
|
372
|
+
* Font weight tokens formalizing which weights the design system uses.
|
|
373
|
+
*
|
|
374
|
+
* | Token | Value | Use |
|
|
375
|
+
* |----------|-------|------------------------------------|
|
|
376
|
+
* | light | 300 | De-emphasized text |
|
|
377
|
+
* | regular | 400 | Body text, default |
|
|
378
|
+
* | medium | 500 | Labels, buttons, UI controls |
|
|
379
|
+
* | semibold | 600 | Subheadings, emphasis |
|
|
380
|
+
* | bold | 700 | Headings, strong emphasis |
|
|
381
|
+
*/
|
|
382
|
+
export declare const FONT_WEIGHT: {
|
|
383
|
+
readonly light: "300";
|
|
384
|
+
readonly regular: "400";
|
|
385
|
+
readonly medium: "500";
|
|
386
|
+
readonly semibold: "600";
|
|
387
|
+
readonly bold: "700";
|
|
388
|
+
};
|
|
389
|
+
/**
|
|
390
|
+
* Letter spacing tokens for typographic refinement.
|
|
391
|
+
*
|
|
392
|
+
* | Token | Value | Use |
|
|
393
|
+
* |---------|-----------|----------------------------------|
|
|
394
|
+
* | tighter | -0.05em | Large display text |
|
|
395
|
+
* | tight | -0.025em | Headings |
|
|
396
|
+
* | normal | 0em | Body text (default) |
|
|
397
|
+
* | wide | 0.025em | Buttons, labels |
|
|
398
|
+
* | wider | 0.05em | All-caps text, overlines |
|
|
399
|
+
* | widest | 0.1em | Extreme letter-spaced styles |
|
|
400
|
+
*/
|
|
401
|
+
export declare const LETTER_SPACING: {
|
|
402
|
+
readonly tighter: "-0.05em";
|
|
403
|
+
readonly tight: "-0.025em";
|
|
404
|
+
readonly normal: "0em";
|
|
405
|
+
readonly wide: "0.025em";
|
|
406
|
+
readonly wider: "0.05em";
|
|
407
|
+
readonly widest: "0.1em";
|
|
408
|
+
};
|
|
409
|
+
/**
|
|
410
|
+
* Responsive breakpoint tokens. Formalizes breakpoints for JS consumers,
|
|
411
|
+
* documentation, and server-side rendering logic.
|
|
412
|
+
*
|
|
413
|
+
* Matches Tailwind's default breakpoints.
|
|
414
|
+
*
|
|
415
|
+
* | Token | px | Use |
|
|
416
|
+
* |-------|------|----------------------------------|
|
|
417
|
+
* | sm | 640 | Large phones, landscape |
|
|
418
|
+
* | md | 768 | Tablets |
|
|
419
|
+
* | lg | 1024 | Small laptops |
|
|
420
|
+
* | xl | 1280 | Desktops |
|
|
421
|
+
* | 2xl | 1536 | Large desktops |
|
|
422
|
+
*/
|
|
423
|
+
export declare const BREAKPOINTS: {
|
|
424
|
+
readonly sm: "640px";
|
|
425
|
+
readonly md: "768px";
|
|
426
|
+
readonly lg: "1024px";
|
|
427
|
+
readonly xl: "1280px";
|
|
428
|
+
readonly '2xl': "1536px";
|
|
429
|
+
};
|
|
430
|
+
/**
|
|
431
|
+
* Icon size tokens for consistent icon scaling across all components.
|
|
432
|
+
*
|
|
433
|
+
* | Token | px | Use |
|
|
434
|
+
* |-------|-----|---------------------------------------|
|
|
435
|
+
* | xs | 12 | Inline indicators, tiny badges |
|
|
436
|
+
* | sm | 16 | Small buttons, form helper icons |
|
|
437
|
+
* | md | 20 | Default buttons, menu items |
|
|
438
|
+
* | lg | 24 | Large buttons, card icons |
|
|
439
|
+
* | xl | 32 | Feature icons, empty states |
|
|
440
|
+
*/
|
|
441
|
+
export declare const ICON_SIZE: {
|
|
442
|
+
readonly xs: "0.75rem";
|
|
443
|
+
readonly sm: "1rem";
|
|
444
|
+
readonly md: "1.25rem";
|
|
445
|
+
readonly lg: "1.5rem";
|
|
446
|
+
readonly xl: "2rem";
|
|
447
|
+
};
|
|
448
|
+
/**
|
|
449
|
+
* Max-width tokens for page containers and content areas.
|
|
450
|
+
*
|
|
451
|
+
* | Token | Value | Use |
|
|
452
|
+
* |-------|--------|----------------------------------|
|
|
453
|
+
* | sm | 640px | Narrow content (auth forms) |
|
|
454
|
+
* | md | 768px | Medium content |
|
|
455
|
+
* | lg | 1024px | Default page content |
|
|
456
|
+
* | xl | 1280px | Wide page content |
|
|
457
|
+
* | 2xl | 1536px | Full-width page content |
|
|
458
|
+
* | prose | 65ch | Optimal reading width |
|
|
459
|
+
*/
|
|
460
|
+
export declare const CONTAINER: {
|
|
461
|
+
readonly sm: "640px";
|
|
462
|
+
readonly md: "768px";
|
|
463
|
+
readonly lg: "1024px";
|
|
464
|
+
readonly xl: "1280px";
|
|
465
|
+
readonly '2xl': "1536px";
|
|
466
|
+
readonly prose: "65ch";
|
|
467
|
+
};
|
|
307
468
|
//# sourceMappingURL=tokens.d.ts.map
|
package/dist/tokens.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,eAAO,MAAM,gBAAgB,wKAWnB,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CASZ,CAAC;AAIX;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,eAAO,MAAM,gBAAgB,wKAWnB,CAAC;AAEX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CASZ,CAAC;AAIX;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGT,CAAC;AAEX,qCAAqC;AACrC,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAIX;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAahB,CAAC;AAIX,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAIX;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAIX,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAIX;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;;;;;CAQT,CAAC;AAIX;;;;GAIG;AACH,eAAO,MAAM,WAAW;;;CAGd,CAAC;AAIX;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAIX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,OAAO;;;;;;CAMV,CAAC;AAIX;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY;;;;;CAKf,CAAC;AAIX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAIX;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAC;AAIX;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAIX;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAIX;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS;;;;;;;CAOZ,CAAC"}
|