@adam-milo/tokens 1.0.46 → 1.0.48
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/{chunk-MMLOVDIN.mjs → chunk-CZNLUFWJ.mjs} +0 -27
- package/dist/{chunk-KL3TH4QD.mjs → chunk-G2NMKWAB.mjs} +0 -5
- package/dist/{chunk-YYVYANL4.mjs → chunk-IXCTBQ3L.mjs} +0 -24
- package/dist/colors.d.mts +0 -6
- package/dist/colors.d.ts +0 -6
- package/dist/colors.js +0 -5
- package/dist/colors.mjs +1 -1
- package/dist/index.d.mts +0 -7
- package/dist/index.d.ts +0 -7
- package/dist/index.js +0 -56
- package/dist/index.mjs +3 -3
- package/dist/spacing.d.mts +0 -6
- package/dist/spacing.d.ts +0 -6
- package/dist/spacing.js +0 -27
- package/dist/spacing.mjs +1 -1
- package/dist/tokens.css +71 -111
- package/dist/typography.d.mts +0 -5
- package/dist/typography.d.ts +0 -5
- package/dist/typography.js +0 -24
- package/dist/typography.mjs +1 -1
- package/package.json +1 -1
|
@@ -2,66 +2,39 @@
|
|
|
2
2
|
var spacing = {
|
|
3
3
|
0: "0",
|
|
4
4
|
0.5: "0.125rem",
|
|
5
|
-
// 2px
|
|
6
5
|
1: "0.25rem",
|
|
7
|
-
// 4px
|
|
8
6
|
1.5: "0.375rem",
|
|
9
|
-
// 6px
|
|
10
7
|
2: "0.5rem",
|
|
11
|
-
// 8px - Base unit
|
|
12
8
|
3: "0.75rem",
|
|
13
|
-
// 12px
|
|
14
9
|
4: "1rem",
|
|
15
|
-
// 16px
|
|
16
10
|
5: "1.25rem",
|
|
17
|
-
// 20px
|
|
18
11
|
6: "1.5rem",
|
|
19
|
-
// 24px
|
|
20
12
|
7: "1.75rem",
|
|
21
|
-
// 28px
|
|
22
13
|
8: "2rem",
|
|
23
|
-
// 32px
|
|
24
14
|
10: "2.5rem",
|
|
25
|
-
// 40px
|
|
26
15
|
12: "3rem",
|
|
27
|
-
// 48px
|
|
28
16
|
14: "3.5rem",
|
|
29
|
-
// 56px
|
|
30
17
|
16: "4rem",
|
|
31
|
-
// 64px
|
|
32
18
|
20: "5rem"
|
|
33
|
-
// 80px - New: For large layouts
|
|
34
19
|
};
|
|
35
20
|
var borderRadius = {
|
|
36
21
|
none: "0",
|
|
37
22
|
sm: "0.125rem",
|
|
38
|
-
// 2px
|
|
39
23
|
default: "0.25rem",
|
|
40
|
-
// 4px
|
|
41
24
|
md: "0.5rem",
|
|
42
|
-
// 8px
|
|
43
25
|
lg: "0.75rem",
|
|
44
|
-
// 12px
|
|
45
26
|
xl: "1rem",
|
|
46
|
-
// 16px
|
|
47
27
|
"2xl": "1.25rem",
|
|
48
|
-
// 20px
|
|
49
28
|
"3xl": "1.5rem",
|
|
50
|
-
// 24px
|
|
51
29
|
"4xl": "2rem",
|
|
52
|
-
// 32px
|
|
53
30
|
full: "9999px"
|
|
54
31
|
};
|
|
55
32
|
var borderWidth = {
|
|
56
33
|
none: "0",
|
|
57
34
|
default: "0.0625rem",
|
|
58
|
-
// 1px
|
|
59
35
|
md: "0.125rem",
|
|
60
|
-
// 2px
|
|
61
36
|
lg: "0.1875rem",
|
|
62
|
-
// 3px
|
|
63
37
|
xl: "0.25rem"
|
|
64
|
-
// 4px
|
|
65
38
|
};
|
|
66
39
|
|
|
67
40
|
export {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
// src/colors.ts
|
|
2
2
|
var colors = {
|
|
3
|
-
// Main Colors
|
|
4
3
|
text: "#191A39",
|
|
5
4
|
action: "#272643",
|
|
6
5
|
clickable: "#2F9DB2",
|
|
@@ -9,19 +8,15 @@ var colors = {
|
|
|
9
8
|
toggle: "#4B497C",
|
|
10
9
|
secondary: "#1D56EC",
|
|
11
10
|
card: "#FFFFFF",
|
|
12
|
-
// Main Greys
|
|
13
11
|
bg: "#FAFAFA",
|
|
14
12
|
bgSecondary: "#F3F3F5",
|
|
15
13
|
border: "#E5E5EA",
|
|
16
14
|
iconSecondary: "#C9C9CF",
|
|
17
15
|
systemText: "#8C8C9C",
|
|
18
16
|
grey07: "#656573",
|
|
19
|
-
// Figma Grey/Grey 07 - for labels
|
|
20
|
-
// Button-specific colors
|
|
21
17
|
buttonOrange: "#F27424",
|
|
22
18
|
buttonOrangeBorder: "#ED6827",
|
|
23
19
|
buttonBlue: "#329CB2",
|
|
24
|
-
// Button state overlays (rgba for transparency)
|
|
25
20
|
overlayDark10: "rgba(25, 26, 57, 0.1)",
|
|
26
21
|
overlayDark12: "rgba(25, 26, 57, 0.12)",
|
|
27
22
|
overlayOrange10: "rgba(242, 116, 36, 0.1)",
|
|
@@ -1,51 +1,27 @@
|
|
|
1
1
|
// src/typography.ts
|
|
2
2
|
var fontSize = {
|
|
3
|
-
// Title and Text pairs (Smart V2)
|
|
4
3
|
"title-1": ["3rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
5
|
-
// 48px - Bold
|
|
6
4
|
"text-1": ["3rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
7
|
-
// 48px - Regular
|
|
8
5
|
"title-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
9
|
-
// 40px - Bold
|
|
10
6
|
"text-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
11
|
-
// 40px - Regular
|
|
12
7
|
"title-3": ["2rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
13
|
-
// 32px - Bold
|
|
14
8
|
"text-3": ["2rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
15
|
-
// 32px - Regular
|
|
16
9
|
"title-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
17
|
-
// 28px - Bold
|
|
18
10
|
"text-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
19
|
-
// 28px - Regular
|
|
20
11
|
"title-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
21
|
-
// 24px - Bold
|
|
22
12
|
"text-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
23
|
-
// 24px - Regular
|
|
24
13
|
"title-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
25
|
-
// 20px - Bold
|
|
26
14
|
"text-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
27
|
-
// 20px - Regular
|
|
28
15
|
"title-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
29
|
-
// 18px - Bold (Main)
|
|
30
16
|
"text-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
31
|
-
// 18px - Regular
|
|
32
17
|
"title-8": ["1rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
33
|
-
// 16px - Bold
|
|
34
18
|
"text-8": ["1rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
35
|
-
// 16px - Regular (Main)
|
|
36
19
|
"title-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
37
|
-
// 14px - Bold
|
|
38
20
|
"text-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
39
|
-
// 14px - Regular
|
|
40
21
|
"title-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
41
|
-
// 12px - Bold
|
|
42
22
|
"text-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
43
|
-
// 12px - Regular
|
|
44
23
|
"title-11": ["0.625rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
45
|
-
// 10px - Bold (Error text)
|
|
46
24
|
"text-11": ["0.625rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
47
|
-
// 10px - Regular (Error text)
|
|
48
|
-
// Legacy names (keeping for backward compatibility)
|
|
49
25
|
h1: ["2.5rem", { lineHeight: "3rem", fontWeight: "700" }],
|
|
50
26
|
h2: ["2rem", { lineHeight: "2.5rem", fontWeight: "700" }],
|
|
51
27
|
h3: ["1.5rem", { lineHeight: "2rem", fontWeight: "600" }],
|
package/dist/colors.d.mts
CHANGED
package/dist/colors.d.ts
CHANGED
package/dist/colors.js
CHANGED
|
@@ -26,7 +26,6 @@ __export(colors_exports, {
|
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(colors_exports);
|
|
28
28
|
var colors = {
|
|
29
|
-
// Main Colors
|
|
30
29
|
text: "#191A39",
|
|
31
30
|
action: "#272643",
|
|
32
31
|
clickable: "#2F9DB2",
|
|
@@ -35,19 +34,15 @@ var colors = {
|
|
|
35
34
|
toggle: "#4B497C",
|
|
36
35
|
secondary: "#1D56EC",
|
|
37
36
|
card: "#FFFFFF",
|
|
38
|
-
// Main Greys
|
|
39
37
|
bg: "#FAFAFA",
|
|
40
38
|
bgSecondary: "#F3F3F5",
|
|
41
39
|
border: "#E5E5EA",
|
|
42
40
|
iconSecondary: "#C9C9CF",
|
|
43
41
|
systemText: "#8C8C9C",
|
|
44
42
|
grey07: "#656573",
|
|
45
|
-
// Figma Grey/Grey 07 - for labels
|
|
46
|
-
// Button-specific colors
|
|
47
43
|
buttonOrange: "#F27424",
|
|
48
44
|
buttonOrangeBorder: "#ED6827",
|
|
49
45
|
buttonBlue: "#329CB2",
|
|
50
|
-
// Button state overlays (rgba for transparency)
|
|
51
46
|
overlayDark10: "rgba(25, 26, 57, 0.1)",
|
|
52
47
|
overlayDark12: "rgba(25, 26, 57, 0.12)",
|
|
53
48
|
overlayOrange10: "rgba(242, 116, 36, 0.1)",
|
package/dist/colors.mjs
CHANGED
package/dist/index.d.mts
CHANGED
|
@@ -2,13 +2,6 @@ export { Colors, Gradients, LegacyColors, colors, gradients, legacyColors } from
|
|
|
2
2
|
export { BorderRadius, BorderWidth, Spacing, borderRadius, borderWidth, spacing } from './spacing.mjs';
|
|
3
3
|
export { FontFamily, FontSize, fontFamily, fontSize } from './typography.mjs';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* @adam-milo/tokens
|
|
7
|
-
* Design tokens for the Adam Milo Design System.
|
|
8
|
-
* Exports colors, spacing, typography, and the combined `tokens` object for use across packages and apps.
|
|
9
|
-
* Versions are bumped and published by CI on merge to main.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
5
|
declare const tokens: {
|
|
13
6
|
readonly colors: {
|
|
14
7
|
readonly text: "#191A39";
|
package/dist/index.d.ts
CHANGED
|
@@ -2,13 +2,6 @@ export { Colors, Gradients, LegacyColors, colors, gradients, legacyColors } from
|
|
|
2
2
|
export { BorderRadius, BorderWidth, Spacing, borderRadius, borderWidth, spacing } from './spacing.js';
|
|
3
3
|
export { FontFamily, FontSize, fontFamily, fontSize } from './typography.js';
|
|
4
4
|
|
|
5
|
-
/**
|
|
6
|
-
* @adam-milo/tokens
|
|
7
|
-
* Design tokens for the Adam Milo Design System.
|
|
8
|
-
* Exports colors, spacing, typography, and the combined `tokens` object for use across packages and apps.
|
|
9
|
-
* Versions are bumped and published by CI on merge to main.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
5
|
declare const tokens: {
|
|
13
6
|
readonly colors: {
|
|
14
7
|
readonly text: "#191A39";
|
package/dist/index.js
CHANGED
|
@@ -35,7 +35,6 @@ module.exports = __toCommonJS(index_exports);
|
|
|
35
35
|
|
|
36
36
|
// src/colors.ts
|
|
37
37
|
var colors = {
|
|
38
|
-
// Main Colors
|
|
39
38
|
text: "#191A39",
|
|
40
39
|
action: "#272643",
|
|
41
40
|
clickable: "#2F9DB2",
|
|
@@ -44,19 +43,15 @@ var colors = {
|
|
|
44
43
|
toggle: "#4B497C",
|
|
45
44
|
secondary: "#1D56EC",
|
|
46
45
|
card: "#FFFFFF",
|
|
47
|
-
// Main Greys
|
|
48
46
|
bg: "#FAFAFA",
|
|
49
47
|
bgSecondary: "#F3F3F5",
|
|
50
48
|
border: "#E5E5EA",
|
|
51
49
|
iconSecondary: "#C9C9CF",
|
|
52
50
|
systemText: "#8C8C9C",
|
|
53
51
|
grey07: "#656573",
|
|
54
|
-
// Figma Grey/Grey 07 - for labels
|
|
55
|
-
// Button-specific colors
|
|
56
52
|
buttonOrange: "#F27424",
|
|
57
53
|
buttonOrangeBorder: "#ED6827",
|
|
58
54
|
buttonBlue: "#329CB2",
|
|
59
|
-
// Button state overlays (rgba for transparency)
|
|
60
55
|
overlayDark10: "rgba(25, 26, 57, 0.1)",
|
|
61
56
|
overlayDark12: "rgba(25, 26, 57, 0.12)",
|
|
62
57
|
overlayOrange10: "rgba(242, 116, 36, 0.1)",
|
|
@@ -144,116 +139,65 @@ var gradients = {
|
|
|
144
139
|
var spacing = {
|
|
145
140
|
0: "0",
|
|
146
141
|
0.5: "0.125rem",
|
|
147
|
-
// 2px
|
|
148
142
|
1: "0.25rem",
|
|
149
|
-
// 4px
|
|
150
143
|
1.5: "0.375rem",
|
|
151
|
-
// 6px
|
|
152
144
|
2: "0.5rem",
|
|
153
|
-
// 8px - Base unit
|
|
154
145
|
3: "0.75rem",
|
|
155
|
-
// 12px
|
|
156
146
|
4: "1rem",
|
|
157
|
-
// 16px
|
|
158
147
|
5: "1.25rem",
|
|
159
|
-
// 20px
|
|
160
148
|
6: "1.5rem",
|
|
161
|
-
// 24px
|
|
162
149
|
7: "1.75rem",
|
|
163
|
-
// 28px
|
|
164
150
|
8: "2rem",
|
|
165
|
-
// 32px
|
|
166
151
|
10: "2.5rem",
|
|
167
|
-
// 40px
|
|
168
152
|
12: "3rem",
|
|
169
|
-
// 48px
|
|
170
153
|
14: "3.5rem",
|
|
171
|
-
// 56px
|
|
172
154
|
16: "4rem",
|
|
173
|
-
// 64px
|
|
174
155
|
20: "5rem"
|
|
175
|
-
// 80px - New: For large layouts
|
|
176
156
|
};
|
|
177
157
|
var borderRadius = {
|
|
178
158
|
none: "0",
|
|
179
159
|
sm: "0.125rem",
|
|
180
|
-
// 2px
|
|
181
160
|
default: "0.25rem",
|
|
182
|
-
// 4px
|
|
183
161
|
md: "0.5rem",
|
|
184
|
-
// 8px
|
|
185
162
|
lg: "0.75rem",
|
|
186
|
-
// 12px
|
|
187
163
|
xl: "1rem",
|
|
188
|
-
// 16px
|
|
189
164
|
"2xl": "1.25rem",
|
|
190
|
-
// 20px
|
|
191
165
|
"3xl": "1.5rem",
|
|
192
|
-
// 24px
|
|
193
166
|
"4xl": "2rem",
|
|
194
|
-
// 32px
|
|
195
167
|
full: "9999px"
|
|
196
168
|
};
|
|
197
169
|
var borderWidth = {
|
|
198
170
|
none: "0",
|
|
199
171
|
default: "0.0625rem",
|
|
200
|
-
// 1px
|
|
201
172
|
md: "0.125rem",
|
|
202
|
-
// 2px
|
|
203
173
|
lg: "0.1875rem",
|
|
204
|
-
// 3px
|
|
205
174
|
xl: "0.25rem"
|
|
206
|
-
// 4px
|
|
207
175
|
};
|
|
208
176
|
|
|
209
177
|
// src/typography.ts
|
|
210
178
|
var fontSize = {
|
|
211
|
-
// Title and Text pairs (Smart V2)
|
|
212
179
|
"title-1": ["3rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
213
|
-
// 48px - Bold
|
|
214
180
|
"text-1": ["3rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
215
|
-
// 48px - Regular
|
|
216
181
|
"title-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
217
|
-
// 40px - Bold
|
|
218
182
|
"text-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
219
|
-
// 40px - Regular
|
|
220
183
|
"title-3": ["2rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
221
|
-
// 32px - Bold
|
|
222
184
|
"text-3": ["2rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
223
|
-
// 32px - Regular
|
|
224
185
|
"title-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
225
|
-
// 28px - Bold
|
|
226
186
|
"text-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
227
|
-
// 28px - Regular
|
|
228
187
|
"title-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
229
|
-
// 24px - Bold
|
|
230
188
|
"text-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
231
|
-
// 24px - Regular
|
|
232
189
|
"title-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
233
|
-
// 20px - Bold
|
|
234
190
|
"text-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
235
|
-
// 20px - Regular
|
|
236
191
|
"title-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
237
|
-
// 18px - Bold (Main)
|
|
238
192
|
"text-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
239
|
-
// 18px - Regular
|
|
240
193
|
"title-8": ["1rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
241
|
-
// 16px - Bold
|
|
242
194
|
"text-8": ["1rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
243
|
-
// 16px - Regular (Main)
|
|
244
195
|
"title-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
245
|
-
// 14px - Bold
|
|
246
196
|
"text-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
247
|
-
// 14px - Regular
|
|
248
197
|
"title-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
249
|
-
// 12px - Bold
|
|
250
198
|
"text-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
251
|
-
// 12px - Regular
|
|
252
199
|
"title-11": ["0.625rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
253
|
-
// 10px - Bold (Error text)
|
|
254
200
|
"text-11": ["0.625rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
255
|
-
// 10px - Regular (Error text)
|
|
256
|
-
// Legacy names (keeping for backward compatibility)
|
|
257
201
|
h1: ["2.5rem", { lineHeight: "3rem", fontWeight: "700" }],
|
|
258
202
|
h2: ["2rem", { lineHeight: "2.5rem", fontWeight: "700" }],
|
|
259
203
|
h3: ["1.5rem", { lineHeight: "2rem", fontWeight: "600" }],
|
package/dist/index.mjs
CHANGED
|
@@ -2,16 +2,16 @@ import {
|
|
|
2
2
|
colors,
|
|
3
3
|
gradients,
|
|
4
4
|
legacyColors
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-G2NMKWAB.mjs";
|
|
6
6
|
import {
|
|
7
7
|
borderRadius,
|
|
8
8
|
borderWidth,
|
|
9
9
|
spacing
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-CZNLUFWJ.mjs";
|
|
11
11
|
import {
|
|
12
12
|
fontFamily,
|
|
13
13
|
fontSize
|
|
14
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-IXCTBQ3L.mjs";
|
|
15
15
|
|
|
16
16
|
// src/index.ts
|
|
17
17
|
var tokens = {
|
package/dist/spacing.d.mts
CHANGED
package/dist/spacing.d.ts
CHANGED
package/dist/spacing.js
CHANGED
|
@@ -28,66 +28,39 @@ module.exports = __toCommonJS(spacing_exports);
|
|
|
28
28
|
var spacing = {
|
|
29
29
|
0: "0",
|
|
30
30
|
0.5: "0.125rem",
|
|
31
|
-
// 2px
|
|
32
31
|
1: "0.25rem",
|
|
33
|
-
// 4px
|
|
34
32
|
1.5: "0.375rem",
|
|
35
|
-
// 6px
|
|
36
33
|
2: "0.5rem",
|
|
37
|
-
// 8px - Base unit
|
|
38
34
|
3: "0.75rem",
|
|
39
|
-
// 12px
|
|
40
35
|
4: "1rem",
|
|
41
|
-
// 16px
|
|
42
36
|
5: "1.25rem",
|
|
43
|
-
// 20px
|
|
44
37
|
6: "1.5rem",
|
|
45
|
-
// 24px
|
|
46
38
|
7: "1.75rem",
|
|
47
|
-
// 28px
|
|
48
39
|
8: "2rem",
|
|
49
|
-
// 32px
|
|
50
40
|
10: "2.5rem",
|
|
51
|
-
// 40px
|
|
52
41
|
12: "3rem",
|
|
53
|
-
// 48px
|
|
54
42
|
14: "3.5rem",
|
|
55
|
-
// 56px
|
|
56
43
|
16: "4rem",
|
|
57
|
-
// 64px
|
|
58
44
|
20: "5rem"
|
|
59
|
-
// 80px - New: For large layouts
|
|
60
45
|
};
|
|
61
46
|
var borderRadius = {
|
|
62
47
|
none: "0",
|
|
63
48
|
sm: "0.125rem",
|
|
64
|
-
// 2px
|
|
65
49
|
default: "0.25rem",
|
|
66
|
-
// 4px
|
|
67
50
|
md: "0.5rem",
|
|
68
|
-
// 8px
|
|
69
51
|
lg: "0.75rem",
|
|
70
|
-
// 12px
|
|
71
52
|
xl: "1rem",
|
|
72
|
-
// 16px
|
|
73
53
|
"2xl": "1.25rem",
|
|
74
|
-
// 20px
|
|
75
54
|
"3xl": "1.5rem",
|
|
76
|
-
// 24px
|
|
77
55
|
"4xl": "2rem",
|
|
78
|
-
// 32px
|
|
79
56
|
full: "9999px"
|
|
80
57
|
};
|
|
81
58
|
var borderWidth = {
|
|
82
59
|
none: "0",
|
|
83
60
|
default: "0.0625rem",
|
|
84
|
-
// 1px
|
|
85
61
|
md: "0.125rem",
|
|
86
|
-
// 2px
|
|
87
62
|
lg: "0.1875rem",
|
|
88
|
-
// 3px
|
|
89
63
|
xl: "0.25rem"
|
|
90
|
-
// 4px
|
|
91
64
|
};
|
|
92
65
|
// Annotate the CommonJS export names for ESM import in node:
|
|
93
66
|
0 && (module.exports = {
|
package/dist/spacing.mjs
CHANGED
package/dist/tokens.css
CHANGED
|
@@ -1,16 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Smart V2 Design System - CSS Token Variables
|
|
3
|
-
* @package @adam-milo/tokens
|
|
4
|
-
*
|
|
5
|
-
* This file contains pure design token values as CSS custom properties.
|
|
6
|
-
* These tokens can be used in any CSS framework or vanilla CSS project.
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
1
|
:root {
|
|
10
|
-
|
|
11
|
-
* Colors - Main
|
|
12
|
-
* ======================================================================== */
|
|
13
|
-
--Path-Colors-Black-01: #191a39; /* Figma Path Colors / Black 01 – primary text, "Create your account" */
|
|
2
|
+
--Path-Colors-Black-01: #191a39;
|
|
14
3
|
--color-text: var(--Path-Colors-Black-01, #191a39);
|
|
15
4
|
--color-action: #272643;
|
|
16
5
|
--color-clickable: #2f9db2;
|
|
@@ -20,122 +9,94 @@
|
|
|
20
9
|
--color-secondary: #1d56ec;
|
|
21
10
|
--color-card: #ffffff;
|
|
22
11
|
|
|
23
|
-
|
|
24
|
-
--color-button-orange: #
|
|
25
|
-
--
|
|
26
|
-
--Path-Colors-Advanced
|
|
27
|
-
--color-
|
|
28
|
-
--color-
|
|
29
|
-
--color-success: #42b8c6; /* Success/verified state – teal checkmark in dialogs */
|
|
12
|
+
--color-button-orange: #f27424;
|
|
13
|
+
--color-button-orange-border: #ed6827;
|
|
14
|
+
--Path-Colors-Advanced: #329cb2;
|
|
15
|
+
--color-button-blue: var(--Path-Colors-Advanced, #329cb2);
|
|
16
|
+
--color-dialog-icon-teal: #42b8c6;
|
|
17
|
+
--color-success: #42b8c6;
|
|
30
18
|
|
|
31
|
-
|
|
32
|
-
--color-overlay-dark-
|
|
33
|
-
--color-overlay-
|
|
34
|
-
--color-overlay-orange-
|
|
35
|
-
--color-overlay-orange-
|
|
36
|
-
--color-overlay-orange-
|
|
37
|
-
--color-overlay-
|
|
38
|
-
--color-overlay-blue-
|
|
39
|
-
--color-overlay-blue-
|
|
40
|
-
--color-overlay-
|
|
41
|
-
--color-overlay-black-
|
|
42
|
-
--color-overlay-black-10: rgba(0, 0, 0, 0.1); /* Generic active */
|
|
19
|
+
--color-overlay-dark-10: rgba(25, 26, 57, 0.1);
|
|
20
|
+
--color-overlay-dark-12: rgba(25, 26, 57, 0.12);
|
|
21
|
+
--color-overlay-orange-10: rgba(242, 116, 36, 0.1);
|
|
22
|
+
--color-overlay-orange-12: rgba(242, 116, 36, 0.12);
|
|
23
|
+
--color-overlay-orange-15: rgba(242, 116, 36, 0.15);
|
|
24
|
+
--color-overlay-orange-border-12: rgba(237, 104, 39, 0.12);
|
|
25
|
+
--color-overlay-blue-10: rgba(50, 156, 178, 0.1);
|
|
26
|
+
--color-overlay-blue-12: rgba(50, 156, 178, 0.12);
|
|
27
|
+
--color-overlay-blue-15: rgba(50, 156, 178, 0.15);
|
|
28
|
+
--color-overlay-black-05: rgba(0, 0, 0, 0.05);
|
|
29
|
+
--color-overlay-black-10: rgba(0, 0, 0, 0.1);
|
|
43
30
|
|
|
44
|
-
/* ========================================================================
|
|
45
|
-
* Colors - Greys
|
|
46
|
-
* ======================================================================== */
|
|
47
31
|
--color-bg: #fafafa;
|
|
48
32
|
--color-bg-secondary: #f3f3f5;
|
|
49
|
-
--color-bg-auth: #f2f4f6;
|
|
33
|
+
--color-bg-auth: #f2f4f6;
|
|
50
34
|
--color-border: #e5e5ea;
|
|
51
35
|
--color-icon-secondary: #c9c9cf;
|
|
52
|
-
--Grey-Grey-06: #8c8c9c;
|
|
36
|
+
--Grey-Grey-06: #8c8c9c;
|
|
53
37
|
--color-system-text: var(--Grey-Grey-06, #8c8c9c);
|
|
54
|
-
--color-grey-07: #656573;
|
|
38
|
+
--color-grey-07: #656573;
|
|
55
39
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
--spacing-
|
|
60
|
-
--spacing-
|
|
61
|
-
--spacing-
|
|
62
|
-
--spacing-
|
|
63
|
-
--spacing-
|
|
64
|
-
--spacing-
|
|
65
|
-
--spacing-
|
|
66
|
-
--spacing-
|
|
67
|
-
--spacing-
|
|
68
|
-
--spacing-
|
|
69
|
-
--spacing-
|
|
70
|
-
--spacing-
|
|
71
|
-
--spacing-
|
|
72
|
-
--spacing-
|
|
73
|
-
--spacing-12: 3rem; /* 48px */
|
|
74
|
-
--spacing-14: 3.5rem; /* 56px */
|
|
75
|
-
--spacing-16: 4rem; /* 64px */
|
|
40
|
+
--spacing-0-5: 0.125rem;
|
|
41
|
+
--spacing-1: 0.25rem;
|
|
42
|
+
--spacing-1-5: 0.375rem;
|
|
43
|
+
--spacing-2: 0.5rem;
|
|
44
|
+
--spacing-2-5: 0.625rem;
|
|
45
|
+
--spacing-3: 0.75rem;
|
|
46
|
+
--spacing-3-5: 0.875rem;
|
|
47
|
+
--spacing-4: 1rem;
|
|
48
|
+
--spacing-5: 1.25rem;
|
|
49
|
+
--spacing-6: 1.5rem;
|
|
50
|
+
--spacing-7: 1.75rem;
|
|
51
|
+
--spacing-8: 2rem;
|
|
52
|
+
--spacing-10: 2.5rem;
|
|
53
|
+
--spacing-11: 2.75rem;
|
|
54
|
+
--spacing-12: 3rem;
|
|
55
|
+
--spacing-14: 3.5rem;
|
|
56
|
+
--spacing-16: 4rem;
|
|
76
57
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
--radius-
|
|
81
|
-
--radius-
|
|
82
|
-
--radius-
|
|
83
|
-
--radius-
|
|
84
|
-
--radius-
|
|
85
|
-
--radius-
|
|
86
|
-
--radius-2xl: 1.25rem; /* 20px */
|
|
87
|
-
--radius-3xl: 1.5rem; /* 24px */
|
|
88
|
-
--radius-4xl: 2rem; /* 32px */
|
|
58
|
+
--radius-sm: 0.125rem;
|
|
59
|
+
--radius-default: 0.25rem;
|
|
60
|
+
--radius-5px: 0.3125rem;
|
|
61
|
+
--radius-md: 0.5rem;
|
|
62
|
+
--radius-lg: 0.75rem;
|
|
63
|
+
--radius-xl: 1rem;
|
|
64
|
+
--radius-2xl: 1.25rem;
|
|
65
|
+
--radius-3xl: 1.5rem;
|
|
66
|
+
--radius-4xl: 2rem;
|
|
89
67
|
|
|
90
|
-
/* ========================================================================
|
|
91
|
-
* Border Width (rem)
|
|
92
|
-
* ======================================================================== */
|
|
93
68
|
--border-width-none: 0;
|
|
94
|
-
--border-width-default: 0.0625rem;
|
|
95
|
-
--border-width-md: 0.125rem;
|
|
96
|
-
--border-width-lg: 0.1875rem;
|
|
97
|
-
--border-width-xl: 0.25rem;
|
|
69
|
+
--border-width-default: 0.0625rem;
|
|
70
|
+
--border-width-md: 0.125rem;
|
|
71
|
+
--border-width-lg: 0.1875rem;
|
|
72
|
+
--border-width-xl: 0.25rem;
|
|
98
73
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
* ======================================================================== */
|
|
104
|
-
--button-height: 3rem; /* 48px */
|
|
105
|
-
--button-padding-y: 0.625rem; /* 10px */
|
|
106
|
-
--button-padding-x: 2rem; /* 32px */
|
|
107
|
-
--button-gap: 0.625rem; /* 10px */
|
|
74
|
+
--button-height: 3rem;
|
|
75
|
+
--button-padding-y: 0.625rem;
|
|
76
|
+
--button-padding-x: 2rem;
|
|
77
|
+
--button-gap: 0.625rem;
|
|
108
78
|
|
|
109
|
-
--input-height: 2.75rem;
|
|
110
|
-
--input-padding: 0.875rem;
|
|
111
|
-
--input-inner-gap: 1rem;
|
|
112
|
-
--input-radius: 0.5rem;
|
|
79
|
+
--input-height: 2.75rem;
|
|
80
|
+
--input-padding: 0.875rem;
|
|
81
|
+
--input-inner-gap: 1rem;
|
|
82
|
+
--input-radius: 0.5rem;
|
|
113
83
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
--font-size-
|
|
118
|
-
--font-size-
|
|
119
|
-
--font-size-
|
|
120
|
-
--font-size-
|
|
121
|
-
--font-size-
|
|
122
|
-
--font-size-
|
|
123
|
-
--font-size-
|
|
124
|
-
--font-size-
|
|
125
|
-
--font-size-
|
|
126
|
-
--font-size-9: 0.875rem; /* 14px */
|
|
127
|
-
--font-size-10: 0.75rem; /* 12px */
|
|
128
|
-
--font-size-11: 0.625rem; /* 10px - Figma error text spec */
|
|
84
|
+
--font-size-1: 3rem;
|
|
85
|
+
--font-size-2: 2.5rem;
|
|
86
|
+
--font-size-2-5: 2.375rem;
|
|
87
|
+
--font-size-3: 2rem;
|
|
88
|
+
--font-size-4: 1.75rem;
|
|
89
|
+
--font-size-5: 1.5rem;
|
|
90
|
+
--font-size-6: 1.25rem;
|
|
91
|
+
--font-size-7: 1.125rem;
|
|
92
|
+
--font-size-8: 1rem;
|
|
93
|
+
--font-size-9: 0.875rem;
|
|
94
|
+
--font-size-10: 0.75rem;
|
|
95
|
+
--font-size-11: 0.625rem;
|
|
129
96
|
|
|
130
|
-
/* ========================================================================
|
|
131
|
-
* Font Families
|
|
132
|
-
* ======================================================================== */
|
|
133
97
|
--font-family-default: 'Almoni DL AAA', sans-serif;
|
|
134
98
|
--font-family-sans: 'Almoni DL AAA', ui-sans-serif, system-ui, sans-serif;
|
|
135
99
|
|
|
136
|
-
/* ========================================================================
|
|
137
|
-
* Gradients
|
|
138
|
-
* ======================================================================== */
|
|
139
100
|
--gradient-primary: linear-gradient(
|
|
140
101
|
236deg,
|
|
141
102
|
#eee -19.33%,
|
|
@@ -149,7 +110,6 @@
|
|
|
149
110
|
rgba(50, 156, 178, 0.18) 100%
|
|
150
111
|
);
|
|
151
112
|
|
|
152
|
-
/* Auth layout background – soft teal at left/right edges, lighter toward center */
|
|
153
113
|
--gradient-auth-bg:
|
|
154
114
|
linear-gradient(
|
|
155
115
|
to right,
|
package/dist/typography.d.mts
CHANGED
package/dist/typography.d.ts
CHANGED
package/dist/typography.js
CHANGED
|
@@ -25,52 +25,28 @@ __export(typography_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(typography_exports);
|
|
27
27
|
var fontSize = {
|
|
28
|
-
// Title and Text pairs (Smart V2)
|
|
29
28
|
"title-1": ["3rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
30
|
-
// 48px - Bold
|
|
31
29
|
"text-1": ["3rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
32
|
-
// 48px - Regular
|
|
33
30
|
"title-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
34
|
-
// 40px - Bold
|
|
35
31
|
"text-2": ["2.5rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
36
|
-
// 40px - Regular
|
|
37
32
|
"title-3": ["2rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
38
|
-
// 32px - Bold
|
|
39
33
|
"text-3": ["2rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
40
|
-
// 32px - Regular
|
|
41
34
|
"title-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
42
|
-
// 28px - Bold
|
|
43
35
|
"text-4": ["1.75rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
44
|
-
// 28px - Regular
|
|
45
36
|
"title-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
46
|
-
// 24px - Bold
|
|
47
37
|
"text-5": ["1.5rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
48
|
-
// 24px - Regular
|
|
49
38
|
"title-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
50
|
-
// 20px - Bold
|
|
51
39
|
"text-6": ["1.25rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
52
|
-
// 20px - Regular
|
|
53
40
|
"title-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
54
|
-
// 18px - Bold (Main)
|
|
55
41
|
"text-7": ["1.125rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
56
|
-
// 18px - Regular
|
|
57
42
|
"title-8": ["1rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
58
|
-
// 16px - Bold
|
|
59
43
|
"text-8": ["1rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
60
|
-
// 16px - Regular (Main)
|
|
61
44
|
"title-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
62
|
-
// 14px - Bold
|
|
63
45
|
"text-9": ["0.875rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
64
|
-
// 14px - Regular
|
|
65
46
|
"title-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
66
|
-
// 12px - Bold
|
|
67
47
|
"text-10": ["0.75rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
68
|
-
// 12px - Regular
|
|
69
48
|
"title-11": ["0.625rem", { lineHeight: "1.2", fontWeight: "700" }],
|
|
70
|
-
// 10px - Bold (Error text)
|
|
71
49
|
"text-11": ["0.625rem", { lineHeight: "1.2", fontWeight: "400" }],
|
|
72
|
-
// 10px - Regular (Error text)
|
|
73
|
-
// Legacy names (keeping for backward compatibility)
|
|
74
50
|
h1: ["2.5rem", { lineHeight: "3rem", fontWeight: "700" }],
|
|
75
51
|
h2: ["2rem", { lineHeight: "2.5rem", fontWeight: "700" }],
|
|
76
52
|
h3: ["1.5rem", { lineHeight: "2rem", fontWeight: "600" }],
|
package/dist/typography.mjs
CHANGED