@inversestudio/design-tokens 1.0.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 (29) hide show
  1. package/README.md +339 -0
  2. package/dist/css/index.css +11 -0
  3. package/dist/css/tokens.css +123 -0
  4. package/dist/css/tokens.dark.css +93 -0
  5. package/dist/css/tokens.light.css +123 -0
  6. package/dist/esm/index.js +9 -0
  7. package/dist/esm/tokens.dark.js +80 -0
  8. package/dist/esm/tokens.js +132 -0
  9. package/dist/esm/tokens.light.js +132 -0
  10. package/dist/js/index.js +12 -0
  11. package/dist/js/tokens.dark.js +80 -0
  12. package/dist/js/tokens.js +132 -0
  13. package/dist/js/tokens.light.js +132 -0
  14. package/dist/json/tokens.dark.json +78 -0
  15. package/dist/json/tokens.dark.nested.json +110 -0
  16. package/dist/json/tokens.json +129 -0
  17. package/dist/json/tokens.light.json +129 -0
  18. package/dist/json/tokens.light.nested.json +183 -0
  19. package/dist/json/tokens.nested.json +183 -0
  20. package/dist/scss/_mixins.scss +59 -0
  21. package/dist/scss/_tokens.dark.scss +171 -0
  22. package/dist/scss/_tokens.light.scss +231 -0
  23. package/dist/scss/_tokens.scss +231 -0
  24. package/dist/scss/index.scss +13 -0
  25. package/dist/types/index.d.ts +9 -0
  26. package/dist/types/tokens.d.ts +441 -0
  27. package/dist/types/tokens.dark.d.ts +307 -0
  28. package/dist/types/tokens.light.d.ts +441 -0
  29. package/package.json +58 -0
package/dist/esm/tokens.dark.js ADDED
@@ -0,0 +1,80 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
6
+ export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
7
+ export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
8
+ export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
9
+ export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
10
+ export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
11
+ export const idsCoreColorNeutral600 = "#adaeb3"; // PRIMITIVE - Mid-dark gray. Do NOT use directly on components.
12
+ export const idsCoreColorNeutral700 = "#8e9099"; // PRIMITIVE - Dark gray. Do NOT use directly on components.
13
+ export const idsCoreColorNeutral800 = "#707784"; // PRIMITIVE - Darker gray. Do NOT use directly on components.
14
+ export const idsCoreColorNeutral900 = "#4d5057"; // PRIMITIVE - Very dark gray. Do NOT use directly on components.
15
+ export const idsCoreColorNeutral950 = "#2d2f35"; // PRIMITIVE - Near-black. Do NOT use directly on components.
16
+ export const idsCoreColorNeutral1000 = "#101114"; // PRIMITIVE - Darkest neutral. Do NOT use directly on components.
17
+ export const idsCoreColorBlue50 = "#e6edfb"; // PRIMITIVE - Lightest blue. Do NOT use directly on components.
18
+ export const idsCoreColorBlue100 = "#d1def8"; // PRIMITIVE - Very light blue. Do NOT use directly on components.
19
+ export const idsCoreColorBlue200 = "#c3d8ff"; // PRIMITIVE - Light blue. Do NOT use directly on components.
20
+ export const idsCoreColorBlue300 = "#a2bae9"; // PRIMITIVE - Light-mid blue. Do NOT use directly on components.
21
+ export const idsCoreColorBlue400 = "#7eaaff"; // PRIMITIVE - Mid blue. Do NOT use directly on components.
22
+ export const idsCoreColorBlue500 = "#5c8fe8"; // PRIMITIVE - Primary blue. Do NOT use directly on components.
23
+ export const idsCoreColorBlue600 = "#4a7ad4"; // PRIMITIVE - Mid-dark blue. Do NOT use directly on components.
24
+ export const idsCoreColorBlue700 = "#3a64b8"; // PRIMITIVE - Dark blue. Do NOT use directly on components.
25
+ export const idsCoreColorBlue800 = "#27447c"; // PRIMITIVE - Very dark blue. Do NOT use directly on components.
26
+ export const idsCoreColorBlue900 = "#1e3560"; // PRIMITIVE - Darker blue. Do NOT use directly on components.
27
+ export const idsCoreColorBlue950 = "#142442"; // PRIMITIVE - Near-black blue. Do NOT use directly on components.
28
+ export const idsCoreColorBlue1000 = "#0b1526"; // PRIMITIVE - Darkest blue. Do NOT use directly on components.
29
+ export const idsCoreColorRed50 = "#fef2f2"; // PRIMITIVE - Lightest red. Do NOT use directly on components.
30
+ export const idsCoreColorRed100 = "#fee2e2"; // PRIMITIVE - Very light red. Do NOT use directly on components.
31
+ export const idsCoreColorRed200 = "#fecaca"; // PRIMITIVE - Light red. Do NOT use directly on components.
32
+ export const idsCoreColorRed300 = "#fca5a5"; // PRIMITIVE - Light-mid red. Do NOT use directly on components.
33
+ export const idsCoreColorRed400 = "#f87171"; // PRIMITIVE - Mid red. Do NOT use directly on components.
34
+ export const idsCoreColorRed500 = "#ef4444"; // PRIMITIVE - Primary red. Do NOT use directly on components.
35
+ export const idsCoreColorRed600 = "#dc2626"; // PRIMITIVE - Mid-dark red. Do NOT use directly on components.
36
+ export const idsCoreColorRed700 = "#b91c1c"; // PRIMITIVE - Dark red. Do NOT use directly on components.
37
+ export const idsCoreColorRed800 = "#991b1b"; // PRIMITIVE - Very dark red. Do NOT use directly on components.
38
+ export const idsCoreColorRed900 = "#7f1d1d"; // PRIMITIVE - Darker red. Do NOT use directly on components.
39
+ export const idsCoreColorRed950 = "#5c1414"; // PRIMITIVE - Near-black red. Do NOT use directly on components.
40
+ export const idsCoreColorRed1000 = "#350a0a"; // PRIMITIVE - Darkest red. Do NOT use directly on components.
41
+ export const idsCoreColorGreen50 = "#ecfdf5"; // PRIMITIVE - Lightest green. Do NOT use directly on components.
42
+ export const idsCoreColorGreen100 = "#d1fae5"; // PRIMITIVE - Very light green. Do NOT use directly on components.
43
+ export const idsCoreColorGreen200 = "#a7f3d0"; // PRIMITIVE - Light green. Do NOT use directly on components.
44
+ export const idsCoreColorGreen300 = "#6ee7b7"; // PRIMITIVE - Light-mid green. Do NOT use directly on components.
45
+ export const idsCoreColorGreen400 = "#34d399"; // PRIMITIVE - Mid green. Do NOT use directly on components.
46
+ export const idsCoreColorGreen500 = "#10b981"; // PRIMITIVE - Primary green. Do NOT use directly on components.
47
+ export const idsCoreColorGreen600 = "#059669"; // PRIMITIVE - Mid-dark green. Do NOT use directly on components.
48
+ export const idsCoreColorGreen700 = "#047857"; // PRIMITIVE - Dark green. Do NOT use directly on components.
49
+ export const idsCoreColorGreen800 = "#065f46"; // PRIMITIVE - Very dark green. Do NOT use directly on components.
50
+ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do NOT use directly on components.
51
+ export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
52
+ export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
53
+ export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
54
+ export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
55
+ export const idsCoreSizingBase = "16px";
56
+ export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
57
+ export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
58
+ export const idsCoreLineheightBase = "16px *1"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
59
+ export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
+ export const idsCoreBorderwidthSlim = "1px";
61
+ export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
65
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
66
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
67
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
68
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
69
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
70
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
71
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
72
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
78
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
package/dist/esm/tokens.js ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
6
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
7
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
8
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
9
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
10
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
11
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
12
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
13
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
14
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
15
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
16
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
17
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
18
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
19
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
20
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
21
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
22
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
23
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
24
+ export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
25
+ export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
26
+ export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
27
+ export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
28
+ export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
29
+ export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
30
+ export const idsCoreColorNeutral600 = "#adaeb3"; // PRIMITIVE - Mid-dark gray. Do NOT use directly on components.
31
+ export const idsCoreColorNeutral700 = "#8e9099"; // PRIMITIVE - Dark gray. Do NOT use directly on components.
32
+ export const idsCoreColorNeutral800 = "#707784"; // PRIMITIVE - Darker gray. Do NOT use directly on components.
33
+ export const idsCoreColorNeutral900 = "#4d5057"; // PRIMITIVE - Very dark gray. Do NOT use directly on components.
34
+ export const idsCoreColorNeutral950 = "#2d2f35"; // PRIMITIVE - Near-black. Do NOT use directly on components.
35
+ export const idsCoreColorNeutral1000 = "#101114"; // PRIMITIVE - Darkest neutral. Do NOT use directly on components.
36
+ export const idsCoreColorBlue50 = "#e6edfb"; // PRIMITIVE - Lightest blue. Do NOT use directly on components.
37
+ export const idsCoreColorBlue100 = "#d1def8"; // PRIMITIVE - Very light blue. Do NOT use directly on components.
38
+ export const idsCoreColorBlue200 = "#c3d8ff"; // PRIMITIVE - Light blue. Do NOT use directly on components.
39
+ export const idsCoreColorBlue300 = "#a2bae9"; // PRIMITIVE - Light-mid blue. Do NOT use directly on components.
40
+ export const idsCoreColorBlue400 = "#7eaaff"; // PRIMITIVE - Mid blue. Do NOT use directly on components.
41
+ export const idsCoreColorBlue500 = "#5c8fe8"; // PRIMITIVE - Primary blue. Do NOT use directly on components.
42
+ export const idsCoreColorBlue600 = "#4a7ad4"; // PRIMITIVE - Mid-dark blue. Do NOT use directly on components.
43
+ export const idsCoreColorBlue700 = "#3a64b8"; // PRIMITIVE - Dark blue. Do NOT use directly on components.
44
+ export const idsCoreColorBlue800 = "#27447c"; // PRIMITIVE - Very dark blue. Do NOT use directly on components.
45
+ export const idsCoreColorBlue900 = "#1e3560"; // PRIMITIVE - Darker blue. Do NOT use directly on components.
46
+ export const idsCoreColorBlue950 = "#142442"; // PRIMITIVE - Near-black blue. Do NOT use directly on components.
47
+ export const idsCoreColorBlue1000 = "#0b1526"; // PRIMITIVE - Darkest blue. Do NOT use directly on components.
48
+ export const idsCoreColorRed50 = "#fef2f2"; // PRIMITIVE - Lightest red. Do NOT use directly on components.
49
+ export const idsCoreColorRed100 = "#fee2e2"; // PRIMITIVE - Very light red. Do NOT use directly on components.
50
+ export const idsCoreColorRed200 = "#fecaca"; // PRIMITIVE - Light red. Do NOT use directly on components.
51
+ export const idsCoreColorRed300 = "#fca5a5"; // PRIMITIVE - Light-mid red. Do NOT use directly on components.
52
+ export const idsCoreColorRed400 = "#f87171"; // PRIMITIVE - Mid red. Do NOT use directly on components.
53
+ export const idsCoreColorRed500 = "#ef4444"; // PRIMITIVE - Primary red. Do NOT use directly on components.
54
+ export const idsCoreColorRed600 = "#dc2626"; // PRIMITIVE - Mid-dark red. Do NOT use directly on components.
55
+ export const idsCoreColorRed700 = "#b91c1c"; // PRIMITIVE - Dark red. Do NOT use directly on components.
56
+ export const idsCoreColorRed800 = "#991b1b"; // PRIMITIVE - Very dark red. Do NOT use directly on components.
57
+ export const idsCoreColorRed900 = "#7f1d1d"; // PRIMITIVE - Darker red. Do NOT use directly on components.
58
+ export const idsCoreColorRed950 = "#5c1414"; // PRIMITIVE - Near-black red. Do NOT use directly on components.
59
+ export const idsCoreColorRed1000 = "#350a0a"; // PRIMITIVE - Darkest red. Do NOT use directly on components.
60
+ export const idsCoreColorGreen50 = "#ecfdf5"; // PRIMITIVE - Lightest green. Do NOT use directly on components.
61
+ export const idsCoreColorGreen100 = "#d1fae5"; // PRIMITIVE - Very light green. Do NOT use directly on components.
62
+ export const idsCoreColorGreen200 = "#a7f3d0"; // PRIMITIVE - Light green. Do NOT use directly on components.
63
+ export const idsCoreColorGreen300 = "#6ee7b7"; // PRIMITIVE - Light-mid green. Do NOT use directly on components.
64
+ export const idsCoreColorGreen400 = "#34d399"; // PRIMITIVE - Mid green. Do NOT use directly on components.
65
+ export const idsCoreColorGreen500 = "#10b981"; // PRIMITIVE - Primary green. Do NOT use directly on components.
66
+ export const idsCoreColorGreen600 = "#059669"; // PRIMITIVE - Mid-dark green. Do NOT use directly on components.
67
+ export const idsCoreColorGreen700 = "#047857"; // PRIMITIVE - Dark green. Do NOT use directly on components.
68
+ export const idsCoreColorGreen800 = "#065f46"; // PRIMITIVE - Very dark green. Do NOT use directly on components.
69
+ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do NOT use directly on components.
70
+ export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
71
+ export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
72
+ export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
73
+ export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
74
+ export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
75
+ export const idsCoreLineheightBase = "16px *1"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
76
+ export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
77
+ export const idsCoreSizingBase = "16px";
78
+ export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
79
+ export const idsCoreBorderwidthSlim = "1px";
80
+ export const idsCoreBorderwidthThick = "2px";
81
+ export const idsTypographyLabel1x = {
82
+ fontFamily: "Tomato Grotesk",
83
+ fontSize: "16px",
84
+ lineHeight: "16px *1",
85
+ fontWeight: "600",
86
+ }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
+ export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
+ export const idsBorderFocused = {
90
+ color: "#7eaaff",
91
+ width: "2px",
92
+ style: "solid",
93
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
+ export const idsBorderPrimary = {
95
+ color: "#2d2f35",
96
+ width: "2px",
97
+ style: "solid",
98
+ }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ export const idsBorderDisabled = {
100
+ color: "#adaeb3",
101
+ width: "2px",
102
+ style: "solid",
103
+ }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
+ export const idsBorderTransparent = {
105
+ color: "#00000000",
106
+ width: "2px",
107
+ style: "solid",
108
+ };
109
+ export const idsColorElementPrimaryDefault = "#4d5057"; // SEMANTIC - Primary element resting state. Use for: primary button background, main CTA.
110
+ export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Primary element hover state. Use for: primary button hover.
111
+ export const idsColorElementPrimaryActive = "#101114"; // SEMANTIC - Primary element pressed state. Use for: primary button active.
112
+ export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Text/icon ON primary backgrounds. Use for: primary button text.
113
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state. Use for: ghost button background.
114
+ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Secondary element hover state. Use for: ghost button hover.
115
+ export const idsColorElementSecondaryActive = "#d1def8"; // SEMANTIC - Secondary element pressed state. Use for: ghost button active.
116
+ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Text/icon ON secondary backgrounds. Use for: ghost button text.
117
+ export const idsColorElementPrimaryinvertedDefault = "#ffffff"; // SEMANTIC - Inverted primary resting state. Use for: buttons on dark backgrounds.
118
+ export const idsColorElementPrimaryinvertedHover = "#fafafb"; // SEMANTIC - Inverted primary hover state.
119
+ export const idsColorElementPrimaryinvertedActive = "#f5f5f8"; // SEMANTIC - Inverted primary pressed state.
120
+ export const idsColorElementPrimaryinvertedOnprimaryaccent = "#101114"; // SEMANTIC - Text/icon ON inverted primary backgrounds.
121
+ export const idsColorElementPrimaryaccentinvertedDefault = "#101114"; // SEMANTIC - Accent-inverted primary resting state.
122
+ export const idsColorElementPrimaryaccentinvertedHover = "#2d2f35"; // SEMANTIC - Accent-inverted primary hover state.
123
+ export const idsColorElementPrimaryaccentinvertedActive = "#4d5057"; // SEMANTIC - Accent-inverted primary pressed state.
124
+ export const idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted =
125
+ "#ffffff"; // SEMANTIC - Text/icon ON accent-inverted surfaces.
126
+ export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
127
+ export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
128
+ export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
129
+ export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
130
+ export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
131
+ export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
132
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/esm/tokens.light.js ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
6
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
7
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
8
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
9
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
10
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
11
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
12
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
13
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
14
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
15
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
16
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
17
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
18
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
19
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
20
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
21
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
22
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
23
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
24
+ export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
25
+ export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
26
+ export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
27
+ export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
28
+ export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
29
+ export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
30
+ export const idsCoreColorNeutral600 = "#adaeb3"; // PRIMITIVE - Mid-dark gray. Do NOT use directly on components.
31
+ export const idsCoreColorNeutral700 = "#8e9099"; // PRIMITIVE - Dark gray. Do NOT use directly on components.
32
+ export const idsCoreColorNeutral800 = "#707784"; // PRIMITIVE - Darker gray. Do NOT use directly on components.
33
+ export const idsCoreColorNeutral900 = "#4d5057"; // PRIMITIVE - Very dark gray. Do NOT use directly on components.
34
+ export const idsCoreColorNeutral950 = "#2d2f35"; // PRIMITIVE - Near-black. Do NOT use directly on components.
35
+ export const idsCoreColorNeutral1000 = "#101114"; // PRIMITIVE - Darkest neutral. Do NOT use directly on components.
36
+ export const idsCoreColorBlue50 = "#e6edfb"; // PRIMITIVE - Lightest blue. Do NOT use directly on components.
37
+ export const idsCoreColorBlue100 = "#d1def8"; // PRIMITIVE - Very light blue. Do NOT use directly on components.
38
+ export const idsCoreColorBlue200 = "#c3d8ff"; // PRIMITIVE - Light blue. Do NOT use directly on components.
39
+ export const idsCoreColorBlue300 = "#a2bae9"; // PRIMITIVE - Light-mid blue. Do NOT use directly on components.
40
+ export const idsCoreColorBlue400 = "#7eaaff"; // PRIMITIVE - Mid blue. Do NOT use directly on components.
41
+ export const idsCoreColorBlue500 = "#5c8fe8"; // PRIMITIVE - Primary blue. Do NOT use directly on components.
42
+ export const idsCoreColorBlue600 = "#4a7ad4"; // PRIMITIVE - Mid-dark blue. Do NOT use directly on components.
43
+ export const idsCoreColorBlue700 = "#3a64b8"; // PRIMITIVE - Dark blue. Do NOT use directly on components.
44
+ export const idsCoreColorBlue800 = "#27447c"; // PRIMITIVE - Very dark blue. Do NOT use directly on components.
45
+ export const idsCoreColorBlue900 = "#1e3560"; // PRIMITIVE - Darker blue. Do NOT use directly on components.
46
+ export const idsCoreColorBlue950 = "#142442"; // PRIMITIVE - Near-black blue. Do NOT use directly on components.
47
+ export const idsCoreColorBlue1000 = "#0b1526"; // PRIMITIVE - Darkest blue. Do NOT use directly on components.
48
+ export const idsCoreColorRed50 = "#fef2f2"; // PRIMITIVE - Lightest red. Do NOT use directly on components.
49
+ export const idsCoreColorRed100 = "#fee2e2"; // PRIMITIVE - Very light red. Do NOT use directly on components.
50
+ export const idsCoreColorRed200 = "#fecaca"; // PRIMITIVE - Light red. Do NOT use directly on components.
51
+ export const idsCoreColorRed300 = "#fca5a5"; // PRIMITIVE - Light-mid red. Do NOT use directly on components.
52
+ export const idsCoreColorRed400 = "#f87171"; // PRIMITIVE - Mid red. Do NOT use directly on components.
53
+ export const idsCoreColorRed500 = "#ef4444"; // PRIMITIVE - Primary red. Do NOT use directly on components.
54
+ export const idsCoreColorRed600 = "#dc2626"; // PRIMITIVE - Mid-dark red. Do NOT use directly on components.
55
+ export const idsCoreColorRed700 = "#b91c1c"; // PRIMITIVE - Dark red. Do NOT use directly on components.
56
+ export const idsCoreColorRed800 = "#991b1b"; // PRIMITIVE - Very dark red. Do NOT use directly on components.
57
+ export const idsCoreColorRed900 = "#7f1d1d"; // PRIMITIVE - Darker red. Do NOT use directly on components.
58
+ export const idsCoreColorRed950 = "#5c1414"; // PRIMITIVE - Near-black red. Do NOT use directly on components.
59
+ export const idsCoreColorRed1000 = "#350a0a"; // PRIMITIVE - Darkest red. Do NOT use directly on components.
60
+ export const idsCoreColorGreen50 = "#ecfdf5"; // PRIMITIVE - Lightest green. Do NOT use directly on components.
61
+ export const idsCoreColorGreen100 = "#d1fae5"; // PRIMITIVE - Very light green. Do NOT use directly on components.
62
+ export const idsCoreColorGreen200 = "#a7f3d0"; // PRIMITIVE - Light green. Do NOT use directly on components.
63
+ export const idsCoreColorGreen300 = "#6ee7b7"; // PRIMITIVE - Light-mid green. Do NOT use directly on components.
64
+ export const idsCoreColorGreen400 = "#34d399"; // PRIMITIVE - Mid green. Do NOT use directly on components.
65
+ export const idsCoreColorGreen500 = "#10b981"; // PRIMITIVE - Primary green. Do NOT use directly on components.
66
+ export const idsCoreColorGreen600 = "#059669"; // PRIMITIVE - Mid-dark green. Do NOT use directly on components.
67
+ export const idsCoreColorGreen700 = "#047857"; // PRIMITIVE - Dark green. Do NOT use directly on components.
68
+ export const idsCoreColorGreen800 = "#065f46"; // PRIMITIVE - Very dark green. Do NOT use directly on components.
69
+ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do NOT use directly on components.
70
+ export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
71
+ export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
72
+ export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
73
+ export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
74
+ export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
75
+ export const idsCoreLineheightBase = "16px *1"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
76
+ export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
77
+ export const idsCoreSizingBase = "16px";
78
+ export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
79
+ export const idsCoreBorderwidthSlim = "1px";
80
+ export const idsCoreBorderwidthThick = "2px";
81
+ export const idsTypographyLabel1x = {
82
+ fontFamily: "Tomato Grotesk",
83
+ fontSize: "16px",
84
+ lineHeight: "16px *1",
85
+ fontWeight: "600",
86
+ }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
+ export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
+ export const idsBorderFocused = {
90
+ color: "#7eaaff",
91
+ width: "2px",
92
+ style: "solid",
93
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
+ export const idsBorderPrimary = {
95
+ color: "#2d2f35",
96
+ width: "2px",
97
+ style: "solid",
98
+ }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ export const idsBorderDisabled = {
100
+ color: "#adaeb3",
101
+ width: "2px",
102
+ style: "solid",
103
+ }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
+ export const idsBorderTransparent = {
105
+ color: "#00000000",
106
+ width: "2px",
107
+ style: "solid",
108
+ };
109
+ export const idsColorElementPrimaryDefault = "#4d5057"; // SEMANTIC - Primary element resting state. Use for: primary button background, main CTA.
110
+ export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Primary element hover state. Use for: primary button hover.
111
+ export const idsColorElementPrimaryActive = "#101114"; // SEMANTIC - Primary element pressed state. Use for: primary button active.
112
+ export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Text/icon ON primary backgrounds. Use for: primary button text.
113
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state. Use for: ghost button background.
114
+ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Secondary element hover state. Use for: ghost button hover.
115
+ export const idsColorElementSecondaryActive = "#d1def8"; // SEMANTIC - Secondary element pressed state. Use for: ghost button active.
116
+ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Text/icon ON secondary backgrounds. Use for: ghost button text.
117
+ export const idsColorElementPrimaryinvertedDefault = "#ffffff"; // SEMANTIC - Inverted primary resting state. Use for: buttons on dark backgrounds.
118
+ export const idsColorElementPrimaryinvertedHover = "#fafafb"; // SEMANTIC - Inverted primary hover state.
119
+ export const idsColorElementPrimaryinvertedActive = "#f5f5f8"; // SEMANTIC - Inverted primary pressed state.
120
+ export const idsColorElementPrimaryinvertedOnprimaryaccent = "#101114"; // SEMANTIC - Text/icon ON inverted primary backgrounds.
121
+ export const idsColorElementPrimaryaccentinvertedDefault = "#101114"; // SEMANTIC - Accent-inverted primary resting state.
122
+ export const idsColorElementPrimaryaccentinvertedHover = "#2d2f35"; // SEMANTIC - Accent-inverted primary hover state.
123
+ export const idsColorElementPrimaryaccentinvertedActive = "#4d5057"; // SEMANTIC - Accent-inverted primary pressed state.
124
+ export const idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted =
125
+ "#ffffff"; // SEMANTIC - Text/icon ON accent-inverted surfaces.
126
+ export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
127
+ export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
128
+ export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
129
+ export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
130
+ export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
131
+ export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
132
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.
package/dist/js/index.js ADDED
@@ -0,0 +1,12 @@
1
+ // IDS Design Tokens - CommonJS Index
2
+ // Generated by Style Dictionary
3
+
4
+ const tokens = require('./tokens.js');
5
+ const lightTokens = require('./tokens.light.js');
6
+ const darkTokens = require('./tokens.dark.js');
7
+
8
+ module.exports = {
9
+ tokens,
10
+ light: lightTokens,
11
+ dark: darkTokens
12
+ };
package/dist/js/tokens.dark.js ADDED
@@ -0,0 +1,80 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
6
+ export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
7
+ export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
8
+ export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
9
+ export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
10
+ export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
11
+ export const idsCoreColorNeutral600 = "#adaeb3"; // PRIMITIVE - Mid-dark gray. Do NOT use directly on components.
12
+ export const idsCoreColorNeutral700 = "#8e9099"; // PRIMITIVE - Dark gray. Do NOT use directly on components.
13
+ export const idsCoreColorNeutral800 = "#707784"; // PRIMITIVE - Darker gray. Do NOT use directly on components.
14
+ export const idsCoreColorNeutral900 = "#4d5057"; // PRIMITIVE - Very dark gray. Do NOT use directly on components.
15
+ export const idsCoreColorNeutral950 = "#2d2f35"; // PRIMITIVE - Near-black. Do NOT use directly on components.
16
+ export const idsCoreColorNeutral1000 = "#101114"; // PRIMITIVE - Darkest neutral. Do NOT use directly on components.
17
+ export const idsCoreColorBlue50 = "#e6edfb"; // PRIMITIVE - Lightest blue. Do NOT use directly on components.
18
+ export const idsCoreColorBlue100 = "#d1def8"; // PRIMITIVE - Very light blue. Do NOT use directly on components.
19
+ export const idsCoreColorBlue200 = "#c3d8ff"; // PRIMITIVE - Light blue. Do NOT use directly on components.
20
+ export const idsCoreColorBlue300 = "#a2bae9"; // PRIMITIVE - Light-mid blue. Do NOT use directly on components.
21
+ export const idsCoreColorBlue400 = "#7eaaff"; // PRIMITIVE - Mid blue. Do NOT use directly on components.
22
+ export const idsCoreColorBlue500 = "#5c8fe8"; // PRIMITIVE - Primary blue. Do NOT use directly on components.
23
+ export const idsCoreColorBlue600 = "#4a7ad4"; // PRIMITIVE - Mid-dark blue. Do NOT use directly on components.
24
+ export const idsCoreColorBlue700 = "#3a64b8"; // PRIMITIVE - Dark blue. Do NOT use directly on components.
25
+ export const idsCoreColorBlue800 = "#27447c"; // PRIMITIVE - Very dark blue. Do NOT use directly on components.
26
+ export const idsCoreColorBlue900 = "#1e3560"; // PRIMITIVE - Darker blue. Do NOT use directly on components.
27
+ export const idsCoreColorBlue950 = "#142442"; // PRIMITIVE - Near-black blue. Do NOT use directly on components.
28
+ export const idsCoreColorBlue1000 = "#0b1526"; // PRIMITIVE - Darkest blue. Do NOT use directly on components.
29
+ export const idsCoreColorRed50 = "#fef2f2"; // PRIMITIVE - Lightest red. Do NOT use directly on components.
30
+ export const idsCoreColorRed100 = "#fee2e2"; // PRIMITIVE - Very light red. Do NOT use directly on components.
31
+ export const idsCoreColorRed200 = "#fecaca"; // PRIMITIVE - Light red. Do NOT use directly on components.
32
+ export const idsCoreColorRed300 = "#fca5a5"; // PRIMITIVE - Light-mid red. Do NOT use directly on components.
33
+ export const idsCoreColorRed400 = "#f87171"; // PRIMITIVE - Mid red. Do NOT use directly on components.
34
+ export const idsCoreColorRed500 = "#ef4444"; // PRIMITIVE - Primary red. Do NOT use directly on components.
35
+ export const idsCoreColorRed600 = "#dc2626"; // PRIMITIVE - Mid-dark red. Do NOT use directly on components.
36
+ export const idsCoreColorRed700 = "#b91c1c"; // PRIMITIVE - Dark red. Do NOT use directly on components.
37
+ export const idsCoreColorRed800 = "#991b1b"; // PRIMITIVE - Very dark red. Do NOT use directly on components.
38
+ export const idsCoreColorRed900 = "#7f1d1d"; // PRIMITIVE - Darker red. Do NOT use directly on components.
39
+ export const idsCoreColorRed950 = "#5c1414"; // PRIMITIVE - Near-black red. Do NOT use directly on components.
40
+ export const idsCoreColorRed1000 = "#350a0a"; // PRIMITIVE - Darkest red. Do NOT use directly on components.
41
+ export const idsCoreColorGreen50 = "#ecfdf5"; // PRIMITIVE - Lightest green. Do NOT use directly on components.
42
+ export const idsCoreColorGreen100 = "#d1fae5"; // PRIMITIVE - Very light green. Do NOT use directly on components.
43
+ export const idsCoreColorGreen200 = "#a7f3d0"; // PRIMITIVE - Light green. Do NOT use directly on components.
44
+ export const idsCoreColorGreen300 = "#6ee7b7"; // PRIMITIVE - Light-mid green. Do NOT use directly on components.
45
+ export const idsCoreColorGreen400 = "#34d399"; // PRIMITIVE - Mid green. Do NOT use directly on components.
46
+ export const idsCoreColorGreen500 = "#10b981"; // PRIMITIVE - Primary green. Do NOT use directly on components.
47
+ export const idsCoreColorGreen600 = "#059669"; // PRIMITIVE - Mid-dark green. Do NOT use directly on components.
48
+ export const idsCoreColorGreen700 = "#047857"; // PRIMITIVE - Dark green. Do NOT use directly on components.
49
+ export const idsCoreColorGreen800 = "#065f46"; // PRIMITIVE - Very dark green. Do NOT use directly on components.
50
+ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do NOT use directly on components.
51
+ export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
52
+ export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
53
+ export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
54
+ export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
55
+ export const idsCoreSizingBase = "16px";
56
+ export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
57
+ export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
58
+ export const idsCoreLineheightBase = "16px *1"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
59
+ export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
60
+ export const idsCoreBorderwidthSlim = "1px";
61
+ export const idsCoreBorderwidthThick = "2px";
62
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
63
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
64
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
65
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
66
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
67
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
68
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
69
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
70
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
71
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
72
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
73
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
74
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
75
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
76
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
77
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
78
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
79
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
80
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
package/dist/js/tokens.js ADDED
@@ -0,0 +1,132 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const idsSpacing013x = "2px"; // SEMANTIC - Micro spacing (2px). Use for: hairline gaps.
6
+ export const idsSpacing025x = "4px"; // SEMANTIC - Tiny spacing (4px). Use for: tight gaps, compact padding.
7
+ export const idsSpacing038x = "6px"; // SEMANTIC - Extra-small spacing (6px). Use for: small component padding.
8
+ export const idsSpacing05x = "8px"; // SEMANTIC - Small spacing (8px). Use for: tight padding, small gaps.
9
+ export const idsSpacing075x = "12px"; // SEMANTIC - Small-medium spacing (12px). Use for: button/input padding.
10
+ export const idsSpacing1x = "16px"; // SEMANTIC - Base spacing (16px). Primary unit for standard padding/gaps.
11
+ export const idsSpacing125x = "20px"; // SEMANTIC - Medium spacing (20px). Use for: card spacing.
12
+ export const idsSpacing15x = "24px"; // SEMANTIC - Medium-large spacing (24px). Use for: section padding.
13
+ export const idsSpacing2x = "32px"; // SEMANTIC - Large spacing (32px). Use for: section margins.
14
+ export const idsSpacing25x = "40px"; // SEMANTIC - Extra-large spacing (40px). Use for: page margins.
15
+ export const idsDimensionElement1x = "16px"; // SEMANTIC - Small element (16px). Use for: tiny buttons.
16
+ export const idsDimensionElement15x = "24px"; // SEMANTIC - Small-medium element (24px). Use for: small buttons.
17
+ export const idsDimensionElement2x = "32px"; // SEMANTIC - Medium element (32px). Use for: default buttons/inputs.
18
+ export const idsDimensionElement3x = "48px"; // SEMANTIC - Large element (48px). Use for: large buttons.
19
+ export const idsDimensionElement35x = "56px"; // SEMANTIC - Extra-large element (56px). Use for: hero buttons.
20
+ export const idsDimensionElement45x = "72px"; // SEMANTIC - Maximum element (72px). Use for: feature buttons.
21
+ export const idsDimensionIcon1x = "16px"; // SEMANTIC - Small icon (16px). Use for: inline icons.
22
+ export const idsDimensionIcon125x = "20px"; // SEMANTIC - Medium icon (20px). Use for: button icons.
23
+ export const idsDimensionIcon15x = "24px"; // SEMANTIC - Large icon (24px). Use for: navigation icons.
24
+ export const idsCoreColorNeutral50 = "#ffffff"; // PRIMITIVE - Pure white. Lightest neutral. Do NOT use directly on components.
25
+ export const idsCoreColorNeutral100 = "#fafafb"; // PRIMITIVE - Near-white with subtle warmth. Do NOT use directly on components.
26
+ export const idsCoreColorNeutral200 = "#f5f5f8"; // PRIMITIVE - Very light gray. Do NOT use directly on components.
27
+ export const idsCoreColorNeutral300 = "#ebebef"; // PRIMITIVE - Light gray. Do NOT use directly on components.
28
+ export const idsCoreColorNeutral400 = "#e0e1e4"; // PRIMITIVE - Light-mid gray. Do NOT use directly on components.
29
+ export const idsCoreColorNeutral500 = "#c5c6cb"; // PRIMITIVE - Mid gray. Do NOT use directly on components.
30
+ export const idsCoreColorNeutral600 = "#adaeb3"; // PRIMITIVE - Mid-dark gray. Do NOT use directly on components.
31
+ export const idsCoreColorNeutral700 = "#8e9099"; // PRIMITIVE - Dark gray. Do NOT use directly on components.
32
+ export const idsCoreColorNeutral800 = "#707784"; // PRIMITIVE - Darker gray. Do NOT use directly on components.
33
+ export const idsCoreColorNeutral900 = "#4d5057"; // PRIMITIVE - Very dark gray. Do NOT use directly on components.
34
+ export const idsCoreColorNeutral950 = "#2d2f35"; // PRIMITIVE - Near-black. Do NOT use directly on components.
35
+ export const idsCoreColorNeutral1000 = "#101114"; // PRIMITIVE - Darkest neutral. Do NOT use directly on components.
36
+ export const idsCoreColorBlue50 = "#e6edfb"; // PRIMITIVE - Lightest blue. Do NOT use directly on components.
37
+ export const idsCoreColorBlue100 = "#d1def8"; // PRIMITIVE - Very light blue. Do NOT use directly on components.
38
+ export const idsCoreColorBlue200 = "#c3d8ff"; // PRIMITIVE - Light blue. Do NOT use directly on components.
39
+ export const idsCoreColorBlue300 = "#a2bae9"; // PRIMITIVE - Light-mid blue. Do NOT use directly on components.
40
+ export const idsCoreColorBlue400 = "#7eaaff"; // PRIMITIVE - Mid blue. Do NOT use directly on components.
41
+ export const idsCoreColorBlue500 = "#5c8fe8"; // PRIMITIVE - Primary blue. Do NOT use directly on components.
42
+ export const idsCoreColorBlue600 = "#4a7ad4"; // PRIMITIVE - Mid-dark blue. Do NOT use directly on components.
43
+ export const idsCoreColorBlue700 = "#3a64b8"; // PRIMITIVE - Dark blue. Do NOT use directly on components.
44
+ export const idsCoreColorBlue800 = "#27447c"; // PRIMITIVE - Very dark blue. Do NOT use directly on components.
45
+ export const idsCoreColorBlue900 = "#1e3560"; // PRIMITIVE - Darker blue. Do NOT use directly on components.
46
+ export const idsCoreColorBlue950 = "#142442"; // PRIMITIVE - Near-black blue. Do NOT use directly on components.
47
+ export const idsCoreColorBlue1000 = "#0b1526"; // PRIMITIVE - Darkest blue. Do NOT use directly on components.
48
+ export const idsCoreColorRed50 = "#fef2f2"; // PRIMITIVE - Lightest red. Do NOT use directly on components.
49
+ export const idsCoreColorRed100 = "#fee2e2"; // PRIMITIVE - Very light red. Do NOT use directly on components.
50
+ export const idsCoreColorRed200 = "#fecaca"; // PRIMITIVE - Light red. Do NOT use directly on components.
51
+ export const idsCoreColorRed300 = "#fca5a5"; // PRIMITIVE - Light-mid red. Do NOT use directly on components.
52
+ export const idsCoreColorRed400 = "#f87171"; // PRIMITIVE - Mid red. Do NOT use directly on components.
53
+ export const idsCoreColorRed500 = "#ef4444"; // PRIMITIVE - Primary red. Do NOT use directly on components.
54
+ export const idsCoreColorRed600 = "#dc2626"; // PRIMITIVE - Mid-dark red. Do NOT use directly on components.
55
+ export const idsCoreColorRed700 = "#b91c1c"; // PRIMITIVE - Dark red. Do NOT use directly on components.
56
+ export const idsCoreColorRed800 = "#991b1b"; // PRIMITIVE - Very dark red. Do NOT use directly on components.
57
+ export const idsCoreColorRed900 = "#7f1d1d"; // PRIMITIVE - Darker red. Do NOT use directly on components.
58
+ export const idsCoreColorRed950 = "#5c1414"; // PRIMITIVE - Near-black red. Do NOT use directly on components.
59
+ export const idsCoreColorRed1000 = "#350a0a"; // PRIMITIVE - Darkest red. Do NOT use directly on components.
60
+ export const idsCoreColorGreen50 = "#ecfdf5"; // PRIMITIVE - Lightest green. Do NOT use directly on components.
61
+ export const idsCoreColorGreen100 = "#d1fae5"; // PRIMITIVE - Very light green. Do NOT use directly on components.
62
+ export const idsCoreColorGreen200 = "#a7f3d0"; // PRIMITIVE - Light green. Do NOT use directly on components.
63
+ export const idsCoreColorGreen300 = "#6ee7b7"; // PRIMITIVE - Light-mid green. Do NOT use directly on components.
64
+ export const idsCoreColorGreen400 = "#34d399"; // PRIMITIVE - Mid green. Do NOT use directly on components.
65
+ export const idsCoreColorGreen500 = "#10b981"; // PRIMITIVE - Primary green. Do NOT use directly on components.
66
+ export const idsCoreColorGreen600 = "#059669"; // PRIMITIVE - Mid-dark green. Do NOT use directly on components.
67
+ export const idsCoreColorGreen700 = "#047857"; // PRIMITIVE - Dark green. Do NOT use directly on components.
68
+ export const idsCoreColorGreen800 = "#065f46"; // PRIMITIVE - Very dark green. Do NOT use directly on components.
69
+ export const idsCoreColorGreen900 = "#064e3b"; // PRIMITIVE - Darker green. Do NOT use directly on components.
70
+ export const idsCoreColorGreen950 = "#043b2c"; // PRIMITIVE - Near-black green. Do NOT use directly on components.
71
+ export const idsCoreColorGreen1000 = "#022419"; // PRIMITIVE - Darkest green. Do NOT use directly on components.
72
+ export const idsCoreColorTransparent = "#00000000"; // PRIMITIVE - Fully transparent. Do NOT use directly on components.
73
+ export const idsCoreFontSizeBase = "16px"; // PRIMITIVE - Base font size (1x REM = 16px). Do NOT use directly on components.
74
+ export const idsCoreFont = "Tomato Grotesk"; // PRIMITIVE - Primary font family. Do NOT use directly on components.
75
+ export const idsCoreLineheightBase = "16px *1"; // PRIMITIVE - Base line height (1x REM = 16px). Do NOT use directly on components.
76
+ export const idsCoreSizingRem = "16px"; // PRIMITIVE - Base scale unit (16px). All size tokens derive from this. Changing this scales the entire system. Do NOT use directly on components.
77
+ export const idsCoreSizingBase = "16px";
78
+ export const idsCoreBorderradiusBase = "16px"; // PRIMITIVE - Base border radius for default density (16px). Do NOT use directly on components.
79
+ export const idsCoreBorderwidthSlim = "1px";
80
+ export const idsCoreBorderwidthThick = "2px";
81
+ export const idsTypographyLabel1x = {
82
+ fontFamily: "Tomato Grotesk",
83
+ fontSize: "16px",
84
+ lineHeight: "16px *1",
85
+ fontWeight: "600",
86
+ }; // SEMANTIC - Base label style. Use for: form labels, button text, tab labels, navigation.
87
+ export const idsBorderradius025x = "4px"; // SEMANTIC - Small radius (4px). Use for: tags, badges.
88
+ export const idsBorderradiusFull = "1600px"; // SEMANTIC - Full/pill radius. Use for: pills, avatars.
89
+ export const idsBorderFocused = {
90
+ color: "#7eaaff",
91
+ width: "2px",
92
+ style: "solid",
93
+ }; // SEMANTIC - Focus state border. Use for: keyboard focus rings on interactive elements.
94
+ export const idsBorderPrimary = {
95
+ color: "#2d2f35",
96
+ width: "2px",
97
+ style: "solid",
98
+ }; // SEMANTIC - Primary border. Use for: input borders, card outlines, containers.
99
+ export const idsBorderDisabled = {
100
+ color: "#adaeb3",
101
+ width: "2px",
102
+ style: "solid",
103
+ }; // SEMANTIC - Disabled border. Use for: disabled inputs and controls.
104
+ export const idsBorderTransparent = {
105
+ color: "#00000000",
106
+ width: "2px",
107
+ style: "solid",
108
+ };
109
+ export const idsColorElementPrimaryDefault = "#4d5057"; // SEMANTIC - Primary element resting state. Use for: primary button background, main CTA.
110
+ export const idsColorElementPrimaryHover = "#4d5057"; // SEMANTIC - Primary element hover state. Use for: primary button hover.
111
+ export const idsColorElementPrimaryActive = "#101114"; // SEMANTIC - Primary element pressed state. Use for: primary button active.
112
+ export const idsColorElementPrimaryOnprimary = "#ffffff"; // SEMANTIC - Text/icon ON primary backgrounds. Use for: primary button text.
113
+ export const idsColorElementSecondaryDefault = "#00000000"; // SEMANTIC - Secondary element resting state. Use for: ghost button background.
114
+ export const idsColorElementSecondaryHover = "#e6edfb"; // SEMANTIC - Secondary element hover state. Use for: ghost button hover.
115
+ export const idsColorElementSecondaryActive = "#d1def8"; // SEMANTIC - Secondary element pressed state. Use for: ghost button active.
116
+ export const idsColorElementSecondaryOnsecondary = "#2d2f35"; // SEMANTIC - Text/icon ON secondary backgrounds. Use for: ghost button text.
117
+ export const idsColorElementPrimaryinvertedDefault = "#ffffff"; // SEMANTIC - Inverted primary resting state. Use for: buttons on dark backgrounds.
118
+ export const idsColorElementPrimaryinvertedHover = "#fafafb"; // SEMANTIC - Inverted primary hover state.
119
+ export const idsColorElementPrimaryinvertedActive = "#f5f5f8"; // SEMANTIC - Inverted primary pressed state.
120
+ export const idsColorElementPrimaryinvertedOnprimaryaccent = "#101114"; // SEMANTIC - Text/icon ON inverted primary backgrounds.
121
+ export const idsColorElementPrimaryaccentinvertedDefault = "#101114"; // SEMANTIC - Accent-inverted primary resting state.
122
+ export const idsColorElementPrimaryaccentinvertedHover = "#2d2f35"; // SEMANTIC - Accent-inverted primary hover state.
123
+ export const idsColorElementPrimaryaccentinvertedActive = "#4d5057"; // SEMANTIC - Accent-inverted primary pressed state.
124
+ export const idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted =
125
+ "#ffffff"; // SEMANTIC - Text/icon ON accent-inverted surfaces.
126
+ export const idsColorElementDisabled = "#adaeb3"; // SEMANTIC - Disabled element background. Use for: all disabled controls.
127
+ export const idsColorElementOndisabled = "#707784"; // SEMANTIC - Text/icon ON disabled backgrounds.
128
+ export const idsColorBorderPrimary = "#2d2f35"; // SEMANTIC - Primary border. Use for: input borders, card outlines.
129
+ export const idsColorBorderDisabled = "#adaeb3"; // SEMANTIC - Disabled border. Use for: disabled inputs.
130
+ export const idsColorBorderMuted = "#e0e1e4"; // SEMANTIC - Muted border. Use for: secondary containers, tables.
131
+ export const idsColorBorderSubtle = "#f5f5f8"; // SEMANTIC - Subtle border. Use for: hairline dividers.
132
+ export const idsColorBorderFocus = "#7eaaff"; // SEMANTIC - Focus ring color. Use for: keyboard focus on all interactive elements.