@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/scss/_tokens.light.scss ADDED
@@ -0,0 +1,231 @@
1
+ //
2
+ // IDS Design Tokens - light Theme
3
+ // Generated by Style Dictionary
4
+ // Do not edit directly
5
+ //
6
+
7
+ $ids-spacing-0-13x: 2px;
8
+ $ids-spacing-0-25x: 4px;
9
+ $ids-spacing-0-38x: 6px;
10
+ $ids-spacing-0-5x: 8px;
11
+ $ids-spacing-0-75x: 12px;
12
+ $ids-spacing-1x: 16px;
13
+ $ids-spacing-1-25x: 20px;
14
+ $ids-spacing-1-5x: 24px;
15
+ $ids-spacing-2x: 32px;
16
+ $ids-spacing-2-5x: 40px;
17
+ $ids-dimension-element-1x: 16px;
18
+ $ids-dimension-element-1-5x: 24px;
19
+ $ids-dimension-element-2x: 32px;
20
+ $ids-dimension-element-3x: 48px;
21
+ $ids-dimension-element-3-5x: 56px;
22
+ $ids-dimension-element-4-5x: 72px;
23
+ $ids-dimension-icon-1x: 16px;
24
+ $ids-dimension-icon-1-25x: 20px;
25
+ $ids-dimension-icon-1-5x: 24px;
26
+ $ids-core-color-neutral-50: #ffffff;
27
+ $ids-core-color-neutral-100: #fafafb;
28
+ $ids-core-color-neutral-200: #f5f5f8;
29
+ $ids-core-color-neutral-300: #ebebef;
30
+ $ids-core-color-neutral-400: #e0e1e4;
31
+ $ids-core-color-neutral-500: #c5c6cb;
32
+ $ids-core-color-neutral-600: #adaeb3;
33
+ $ids-core-color-neutral-700: #8e9099;
34
+ $ids-core-color-neutral-800: #707784;
35
+ $ids-core-color-neutral-900: #4d5057;
36
+ $ids-core-color-neutral-950: #2d2f35;
37
+ $ids-core-color-neutral-1000: #101114;
38
+ $ids-core-color-blue-50: #e6edfb;
39
+ $ids-core-color-blue-100: #d1def8;
40
+ $ids-core-color-blue-200: #c3d8ff;
41
+ $ids-core-color-blue-300: #a2bae9;
42
+ $ids-core-color-blue-400: #7eaaff;
43
+ $ids-core-color-blue-500: #5c8fe8;
44
+ $ids-core-color-blue-600: #4a7ad4;
45
+ $ids-core-color-blue-700: #3a64b8;
46
+ $ids-core-color-blue-800: #27447c;
47
+ $ids-core-color-blue-900: #1e3560;
48
+ $ids-core-color-blue-950: #142442;
49
+ $ids-core-color-blue-1000: #0b1526;
50
+ $ids-core-color-red-50: #fef2f2;
51
+ $ids-core-color-red-100: #fee2e2;
52
+ $ids-core-color-red-200: #fecaca;
53
+ $ids-core-color-red-300: #fca5a5;
54
+ $ids-core-color-red-400: #f87171;
55
+ $ids-core-color-red-500: #ef4444;
56
+ $ids-core-color-red-600: #dc2626;
57
+ $ids-core-color-red-700: #b91c1c;
58
+ $ids-core-color-red-800: #991b1b;
59
+ $ids-core-color-red-900: #7f1d1d;
60
+ $ids-core-color-red-950: #5c1414;
61
+ $ids-core-color-red-1000: #350a0a;
62
+ $ids-core-color-green-50: #ecfdf5;
63
+ $ids-core-color-green-100: #d1fae5;
64
+ $ids-core-color-green-200: #a7f3d0;
65
+ $ids-core-color-green-300: #6ee7b7;
66
+ $ids-core-color-green-400: #34d399;
67
+ $ids-core-color-green-500: #10b981;
68
+ $ids-core-color-green-600: #059669;
69
+ $ids-core-color-green-700: #047857;
70
+ $ids-core-color-green-800: #065f46;
71
+ $ids-core-color-green-900: #064e3b;
72
+ $ids-core-color-green-950: #043b2c;
73
+ $ids-core-color-green-1000: #022419;
74
+ $ids-core-color-transparent: #00000000;
75
+ $ids-core-font-size-base: 16px;
76
+ $ids-core-font: Tomato Grotesk;
77
+ $ids-core-lineheight-base: 16px *1;
78
+ $ids-core-sizing-rem: 16px;
79
+ $ids-core-sizing-base: 16px;
80
+ $ids-core-borderradius-base: 16px;
81
+ $ids-core-borderwidth-slim: 1px;
82
+ $ids-core-borderwidth-thick: 2px;
83
+ $ids-typography-label-1x: [object Object];
84
+ $ids-borderradius-0-25x: 4px;
85
+ $ids-borderradius-full: 1600px;
86
+ $ids-border-focused: [object Object];
87
+ $ids-border-primary: [object Object];
88
+ $ids-border-disabled: [object Object];
89
+ $ids-border-transparent: [object Object];
90
+ $ids-color-element-primary-default: #4d5057;
91
+ $ids-color-element-primary-hover: #4d5057;
92
+ $ids-color-element-primary-active: #101114;
93
+ $ids-color-element-primary-onprimary: #ffffff;
94
+ $ids-color-element-secondary-default: #00000000;
95
+ $ids-color-element-secondary-hover: #e6edfb;
96
+ $ids-color-element-secondary-active: #d1def8;
97
+ $ids-color-element-secondary-onsecondary: #2d2f35;
98
+ $ids-color-element-primaryinverted-default: #ffffff;
99
+ $ids-color-element-primaryinverted-hover: #fafafb;
100
+ $ids-color-element-primaryinverted-active: #f5f5f8;
101
+ $ids-color-element-primaryinverted-onprimaryaccent: #101114;
102
+ $ids-color-element-primaryaccentinverted-default: #101114;
103
+ $ids-color-element-primaryaccentinverted-hover: #2d2f35;
104
+ $ids-color-element-primaryaccentinverted-active: #4d5057;
105
+ $ids-color-element-primaryaccentinverted-onprimaryaccentinverted: #ffffff;
106
+ $ids-color-element-disabled: #adaeb3;
107
+ $ids-color-element-ondisabled: #707784;
108
+ $ids-color-border-primary: #2d2f35;
109
+ $ids-color-border-disabled: #adaeb3;
110
+ $ids-color-border-muted: #e0e1e4;
111
+ $ids-color-border-subtle: #f5f5f8;
112
+ $ids-color-border-focus: #7eaaff;
113
+
114
+ // Token map for programmatic access
115
+ $ids-tokens: (
116
+ 'ids-spacing-0-13x': $ids-spacing-0-13x,
117
+ 'ids-spacing-0-25x': $ids-spacing-0-25x,
118
+ 'ids-spacing-0-38x': $ids-spacing-0-38x,
119
+ 'ids-spacing-0-5x': $ids-spacing-0-5x,
120
+ 'ids-spacing-0-75x': $ids-spacing-0-75x,
121
+ 'ids-spacing-1x': $ids-spacing-1x,
122
+ 'ids-spacing-1-25x': $ids-spacing-1-25x,
123
+ 'ids-spacing-1-5x': $ids-spacing-1-5x,
124
+ 'ids-spacing-2x': $ids-spacing-2x,
125
+ 'ids-spacing-2-5x': $ids-spacing-2-5x,
126
+ 'ids-dimension-element-1x': $ids-dimension-element-1x,
127
+ 'ids-dimension-element-1-5x': $ids-dimension-element-1-5x,
128
+ 'ids-dimension-element-2x': $ids-dimension-element-2x,
129
+ 'ids-dimension-element-3x': $ids-dimension-element-3x,
130
+ 'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
131
+ 'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
132
+ 'ids-dimension-icon-1x': $ids-dimension-icon-1x,
133
+ 'ids-dimension-icon-1-25x': $ids-dimension-icon-1-25x,
134
+ 'ids-dimension-icon-1-5x': $ids-dimension-icon-1-5x,
135
+ 'ids-core-color-neutral-50': $ids-core-color-neutral-50,
136
+ 'ids-core-color-neutral-100': $ids-core-color-neutral-100,
137
+ 'ids-core-color-neutral-200': $ids-core-color-neutral-200,
138
+ 'ids-core-color-neutral-300': $ids-core-color-neutral-300,
139
+ 'ids-core-color-neutral-400': $ids-core-color-neutral-400,
140
+ 'ids-core-color-neutral-500': $ids-core-color-neutral-500,
141
+ 'ids-core-color-neutral-600': $ids-core-color-neutral-600,
142
+ 'ids-core-color-neutral-700': $ids-core-color-neutral-700,
143
+ 'ids-core-color-neutral-800': $ids-core-color-neutral-800,
144
+ 'ids-core-color-neutral-900': $ids-core-color-neutral-900,
145
+ 'ids-core-color-neutral-950': $ids-core-color-neutral-950,
146
+ 'ids-core-color-neutral-1000': $ids-core-color-neutral-1000,
147
+ 'ids-core-color-blue-50': $ids-core-color-blue-50,
148
+ 'ids-core-color-blue-100': $ids-core-color-blue-100,
149
+ 'ids-core-color-blue-200': $ids-core-color-blue-200,
150
+ 'ids-core-color-blue-300': $ids-core-color-blue-300,
151
+ 'ids-core-color-blue-400': $ids-core-color-blue-400,
152
+ 'ids-core-color-blue-500': $ids-core-color-blue-500,
153
+ 'ids-core-color-blue-600': $ids-core-color-blue-600,
154
+ 'ids-core-color-blue-700': $ids-core-color-blue-700,
155
+ 'ids-core-color-blue-800': $ids-core-color-blue-800,
156
+ 'ids-core-color-blue-900': $ids-core-color-blue-900,
157
+ 'ids-core-color-blue-950': $ids-core-color-blue-950,
158
+ 'ids-core-color-blue-1000': $ids-core-color-blue-1000,
159
+ 'ids-core-color-red-50': $ids-core-color-red-50,
160
+ 'ids-core-color-red-100': $ids-core-color-red-100,
161
+ 'ids-core-color-red-200': $ids-core-color-red-200,
162
+ 'ids-core-color-red-300': $ids-core-color-red-300,
163
+ 'ids-core-color-red-400': $ids-core-color-red-400,
164
+ 'ids-core-color-red-500': $ids-core-color-red-500,
165
+ 'ids-core-color-red-600': $ids-core-color-red-600,
166
+ 'ids-core-color-red-700': $ids-core-color-red-700,
167
+ 'ids-core-color-red-800': $ids-core-color-red-800,
168
+ 'ids-core-color-red-900': $ids-core-color-red-900,
169
+ 'ids-core-color-red-950': $ids-core-color-red-950,
170
+ 'ids-core-color-red-1000': $ids-core-color-red-1000,
171
+ 'ids-core-color-green-50': $ids-core-color-green-50,
172
+ 'ids-core-color-green-100': $ids-core-color-green-100,
173
+ 'ids-core-color-green-200': $ids-core-color-green-200,
174
+ 'ids-core-color-green-300': $ids-core-color-green-300,
175
+ 'ids-core-color-green-400': $ids-core-color-green-400,
176
+ 'ids-core-color-green-500': $ids-core-color-green-500,
177
+ 'ids-core-color-green-600': $ids-core-color-green-600,
178
+ 'ids-core-color-green-700': $ids-core-color-green-700,
179
+ 'ids-core-color-green-800': $ids-core-color-green-800,
180
+ 'ids-core-color-green-900': $ids-core-color-green-900,
181
+ 'ids-core-color-green-950': $ids-core-color-green-950,
182
+ 'ids-core-color-green-1000': $ids-core-color-green-1000,
183
+ 'ids-core-color-transparent': $ids-core-color-transparent,
184
+ 'ids-core-font-size-base': $ids-core-font-size-base,
185
+ 'ids-core-font': $ids-core-font,
186
+ 'ids-core-lineheight-base': $ids-core-lineheight-base,
187
+ 'ids-core-sizing-rem': $ids-core-sizing-rem,
188
+ 'ids-core-sizing-base': $ids-core-sizing-base,
189
+ 'ids-core-borderradius-base': $ids-core-borderradius-base,
190
+ 'ids-core-borderwidth-slim': $ids-core-borderwidth-slim,
191
+ 'ids-core-borderwidth-thick': $ids-core-borderwidth-thick,
192
+ 'ids-typography-label-1x': $ids-typography-label-1x,
193
+ 'ids-borderradius-0-25x': $ids-borderradius-0-25x,
194
+ 'ids-borderradius-full': $ids-borderradius-full,
195
+ 'ids-border-focused': $ids-border-focused,
196
+ 'ids-border-primary': $ids-border-primary,
197
+ 'ids-border-disabled': $ids-border-disabled,
198
+ 'ids-border-transparent': $ids-border-transparent,
199
+ 'ids-color-element-primary-default': $ids-color-element-primary-default,
200
+ 'ids-color-element-primary-hover': $ids-color-element-primary-hover,
201
+ 'ids-color-element-primary-active': $ids-color-element-primary-active,
202
+ 'ids-color-element-primary-onprimary': $ids-color-element-primary-onprimary,
203
+ 'ids-color-element-secondary-default': $ids-color-element-secondary-default,
204
+ 'ids-color-element-secondary-hover': $ids-color-element-secondary-hover,
205
+ 'ids-color-element-secondary-active': $ids-color-element-secondary-active,
206
+ 'ids-color-element-secondary-onsecondary': $ids-color-element-secondary-onsecondary,
207
+ 'ids-color-element-primaryinverted-default': $ids-color-element-primaryinverted-default,
208
+ 'ids-color-element-primaryinverted-hover': $ids-color-element-primaryinverted-hover,
209
+ 'ids-color-element-primaryinverted-active': $ids-color-element-primaryinverted-active,
210
+ 'ids-color-element-primaryinverted-onprimaryaccent': $ids-color-element-primaryinverted-onprimaryaccent,
211
+ 'ids-color-element-primaryaccentinverted-default': $ids-color-element-primaryaccentinverted-default,
212
+ 'ids-color-element-primaryaccentinverted-hover': $ids-color-element-primaryaccentinverted-hover,
213
+ 'ids-color-element-primaryaccentinverted-active': $ids-color-element-primaryaccentinverted-active,
214
+ 'ids-color-element-primaryaccentinverted-onprimaryaccentinverted': $ids-color-element-primaryaccentinverted-onprimaryaccentinverted,
215
+ 'ids-color-element-disabled': $ids-color-element-disabled,
216
+ 'ids-color-element-ondisabled': $ids-color-element-ondisabled,
217
+ 'ids-color-border-primary': $ids-color-border-primary,
218
+ 'ids-color-border-disabled': $ids-color-border-disabled,
219
+ 'ids-color-border-muted': $ids-color-border-muted,
220
+ 'ids-color-border-subtle': $ids-color-border-subtle,
221
+ 'ids-color-border-focus': $ids-color-border-focus
222
+ );
223
+
224
+ // Utility function to get token value
225
+ @function ids-token($name) {
226
+ @if map-has-key($ids-tokens, $name) {
227
+ @return map-get($ids-tokens, $name);
228
+ }
229
+ @warn "Token '#{$name}' not found.";
230
+ @return null;
231
+ }
package/dist/scss/_tokens.scss ADDED
@@ -0,0 +1,231 @@
1
+ //
2
+ // IDS Design Tokens - light Theme
3
+ // Generated by Style Dictionary
4
+ // Do not edit directly
5
+ //
6
+
7
+ $ids-spacing-0-13x: 2px;
8
+ $ids-spacing-0-25x: 4px;
9
+ $ids-spacing-0-38x: 6px;
10
+ $ids-spacing-0-5x: 8px;
11
+ $ids-spacing-0-75x: 12px;
12
+ $ids-spacing-1x: 16px;
13
+ $ids-spacing-1-25x: 20px;
14
+ $ids-spacing-1-5x: 24px;
15
+ $ids-spacing-2x: 32px;
16
+ $ids-spacing-2-5x: 40px;
17
+ $ids-dimension-element-1x: 16px;
18
+ $ids-dimension-element-1-5x: 24px;
19
+ $ids-dimension-element-2x: 32px;
20
+ $ids-dimension-element-3x: 48px;
21
+ $ids-dimension-element-3-5x: 56px;
22
+ $ids-dimension-element-4-5x: 72px;
23
+ $ids-dimension-icon-1x: 16px;
24
+ $ids-dimension-icon-1-25x: 20px;
25
+ $ids-dimension-icon-1-5x: 24px;
26
+ $ids-core-color-neutral-50: #ffffff;
27
+ $ids-core-color-neutral-100: #fafafb;
28
+ $ids-core-color-neutral-200: #f5f5f8;
29
+ $ids-core-color-neutral-300: #ebebef;
30
+ $ids-core-color-neutral-400: #e0e1e4;
31
+ $ids-core-color-neutral-500: #c5c6cb;
32
+ $ids-core-color-neutral-600: #adaeb3;
33
+ $ids-core-color-neutral-700: #8e9099;
34
+ $ids-core-color-neutral-800: #707784;
35
+ $ids-core-color-neutral-900: #4d5057;
36
+ $ids-core-color-neutral-950: #2d2f35;
37
+ $ids-core-color-neutral-1000: #101114;
38
+ $ids-core-color-blue-50: #e6edfb;
39
+ $ids-core-color-blue-100: #d1def8;
40
+ $ids-core-color-blue-200: #c3d8ff;
41
+ $ids-core-color-blue-300: #a2bae9;
42
+ $ids-core-color-blue-400: #7eaaff;
43
+ $ids-core-color-blue-500: #5c8fe8;
44
+ $ids-core-color-blue-600: #4a7ad4;
45
+ $ids-core-color-blue-700: #3a64b8;
46
+ $ids-core-color-blue-800: #27447c;
47
+ $ids-core-color-blue-900: #1e3560;
48
+ $ids-core-color-blue-950: #142442;
49
+ $ids-core-color-blue-1000: #0b1526;
50
+ $ids-core-color-red-50: #fef2f2;
51
+ $ids-core-color-red-100: #fee2e2;
52
+ $ids-core-color-red-200: #fecaca;
53
+ $ids-core-color-red-300: #fca5a5;
54
+ $ids-core-color-red-400: #f87171;
55
+ $ids-core-color-red-500: #ef4444;
56
+ $ids-core-color-red-600: #dc2626;
57
+ $ids-core-color-red-700: #b91c1c;
58
+ $ids-core-color-red-800: #991b1b;
59
+ $ids-core-color-red-900: #7f1d1d;
60
+ $ids-core-color-red-950: #5c1414;
61
+ $ids-core-color-red-1000: #350a0a;
62
+ $ids-core-color-green-50: #ecfdf5;
63
+ $ids-core-color-green-100: #d1fae5;
64
+ $ids-core-color-green-200: #a7f3d0;
65
+ $ids-core-color-green-300: #6ee7b7;
66
+ $ids-core-color-green-400: #34d399;
67
+ $ids-core-color-green-500: #10b981;
68
+ $ids-core-color-green-600: #059669;
69
+ $ids-core-color-green-700: #047857;
70
+ $ids-core-color-green-800: #065f46;
71
+ $ids-core-color-green-900: #064e3b;
72
+ $ids-core-color-green-950: #043b2c;
73
+ $ids-core-color-green-1000: #022419;
74
+ $ids-core-color-transparent: #00000000;
75
+ $ids-core-font-size-base: 16px;
76
+ $ids-core-font: Tomato Grotesk;
77
+ $ids-core-lineheight-base: 16px *1;
78
+ $ids-core-sizing-rem: 16px;
79
+ $ids-core-sizing-base: 16px;
80
+ $ids-core-borderradius-base: 16px;
81
+ $ids-core-borderwidth-slim: 1px;
82
+ $ids-core-borderwidth-thick: 2px;
83
+ $ids-typography-label-1x: [object Object];
84
+ $ids-borderradius-0-25x: 4px;
85
+ $ids-borderradius-full: 1600px;
86
+ $ids-border-focused: [object Object];
87
+ $ids-border-primary: [object Object];
88
+ $ids-border-disabled: [object Object];
89
+ $ids-border-transparent: [object Object];
90
+ $ids-color-element-primary-default: #4d5057;
91
+ $ids-color-element-primary-hover: #4d5057;
92
+ $ids-color-element-primary-active: #101114;
93
+ $ids-color-element-primary-onprimary: #ffffff;
94
+ $ids-color-element-secondary-default: #00000000;
95
+ $ids-color-element-secondary-hover: #e6edfb;
96
+ $ids-color-element-secondary-active: #d1def8;
97
+ $ids-color-element-secondary-onsecondary: #2d2f35;
98
+ $ids-color-element-primaryinverted-default: #ffffff;
99
+ $ids-color-element-primaryinverted-hover: #fafafb;
100
+ $ids-color-element-primaryinverted-active: #f5f5f8;
101
+ $ids-color-element-primaryinverted-onprimaryaccent: #101114;
102
+ $ids-color-element-primaryaccentinverted-default: #101114;
103
+ $ids-color-element-primaryaccentinverted-hover: #2d2f35;
104
+ $ids-color-element-primaryaccentinverted-active: #4d5057;
105
+ $ids-color-element-primaryaccentinverted-onprimaryaccentinverted: #ffffff;
106
+ $ids-color-element-disabled: #adaeb3;
107
+ $ids-color-element-ondisabled: #707784;
108
+ $ids-color-border-primary: #2d2f35;
109
+ $ids-color-border-disabled: #adaeb3;
110
+ $ids-color-border-muted: #e0e1e4;
111
+ $ids-color-border-subtle: #f5f5f8;
112
+ $ids-color-border-focus: #7eaaff;
113
+
114
+ // Token map for programmatic access
115
+ $ids-tokens: (
116
+ 'ids-spacing-0-13x': $ids-spacing-0-13x,
117
+ 'ids-spacing-0-25x': $ids-spacing-0-25x,
118
+ 'ids-spacing-0-38x': $ids-spacing-0-38x,
119
+ 'ids-spacing-0-5x': $ids-spacing-0-5x,
120
+ 'ids-spacing-0-75x': $ids-spacing-0-75x,
121
+ 'ids-spacing-1x': $ids-spacing-1x,
122
+ 'ids-spacing-1-25x': $ids-spacing-1-25x,
123
+ 'ids-spacing-1-5x': $ids-spacing-1-5x,
124
+ 'ids-spacing-2x': $ids-spacing-2x,
125
+ 'ids-spacing-2-5x': $ids-spacing-2-5x,
126
+ 'ids-dimension-element-1x': $ids-dimension-element-1x,
127
+ 'ids-dimension-element-1-5x': $ids-dimension-element-1-5x,
128
+ 'ids-dimension-element-2x': $ids-dimension-element-2x,
129
+ 'ids-dimension-element-3x': $ids-dimension-element-3x,
130
+ 'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
131
+ 'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
132
+ 'ids-dimension-icon-1x': $ids-dimension-icon-1x,
133
+ 'ids-dimension-icon-1-25x': $ids-dimension-icon-1-25x,
134
+ 'ids-dimension-icon-1-5x': $ids-dimension-icon-1-5x,
135
+ 'ids-core-color-neutral-50': $ids-core-color-neutral-50,
136
+ 'ids-core-color-neutral-100': $ids-core-color-neutral-100,
137
+ 'ids-core-color-neutral-200': $ids-core-color-neutral-200,
138
+ 'ids-core-color-neutral-300': $ids-core-color-neutral-300,
139
+ 'ids-core-color-neutral-400': $ids-core-color-neutral-400,
140
+ 'ids-core-color-neutral-500': $ids-core-color-neutral-500,
141
+ 'ids-core-color-neutral-600': $ids-core-color-neutral-600,
142
+ 'ids-core-color-neutral-700': $ids-core-color-neutral-700,
143
+ 'ids-core-color-neutral-800': $ids-core-color-neutral-800,
144
+ 'ids-core-color-neutral-900': $ids-core-color-neutral-900,
145
+ 'ids-core-color-neutral-950': $ids-core-color-neutral-950,
146
+ 'ids-core-color-neutral-1000': $ids-core-color-neutral-1000,
147
+ 'ids-core-color-blue-50': $ids-core-color-blue-50,
148
+ 'ids-core-color-blue-100': $ids-core-color-blue-100,
149
+ 'ids-core-color-blue-200': $ids-core-color-blue-200,
150
+ 'ids-core-color-blue-300': $ids-core-color-blue-300,
151
+ 'ids-core-color-blue-400': $ids-core-color-blue-400,
152
+ 'ids-core-color-blue-500': $ids-core-color-blue-500,
153
+ 'ids-core-color-blue-600': $ids-core-color-blue-600,
154
+ 'ids-core-color-blue-700': $ids-core-color-blue-700,
155
+ 'ids-core-color-blue-800': $ids-core-color-blue-800,
156
+ 'ids-core-color-blue-900': $ids-core-color-blue-900,
157
+ 'ids-core-color-blue-950': $ids-core-color-blue-950,
158
+ 'ids-core-color-blue-1000': $ids-core-color-blue-1000,
159
+ 'ids-core-color-red-50': $ids-core-color-red-50,
160
+ 'ids-core-color-red-100': $ids-core-color-red-100,
161
+ 'ids-core-color-red-200': $ids-core-color-red-200,
162
+ 'ids-core-color-red-300': $ids-core-color-red-300,
163
+ 'ids-core-color-red-400': $ids-core-color-red-400,
164
+ 'ids-core-color-red-500': $ids-core-color-red-500,
165
+ 'ids-core-color-red-600': $ids-core-color-red-600,
166
+ 'ids-core-color-red-700': $ids-core-color-red-700,
167
+ 'ids-core-color-red-800': $ids-core-color-red-800,
168
+ 'ids-core-color-red-900': $ids-core-color-red-900,
169
+ 'ids-core-color-red-950': $ids-core-color-red-950,
170
+ 'ids-core-color-red-1000': $ids-core-color-red-1000,
171
+ 'ids-core-color-green-50': $ids-core-color-green-50,
172
+ 'ids-core-color-green-100': $ids-core-color-green-100,
173
+ 'ids-core-color-green-200': $ids-core-color-green-200,
174
+ 'ids-core-color-green-300': $ids-core-color-green-300,
175
+ 'ids-core-color-green-400': $ids-core-color-green-400,
176
+ 'ids-core-color-green-500': $ids-core-color-green-500,
177
+ 'ids-core-color-green-600': $ids-core-color-green-600,
178
+ 'ids-core-color-green-700': $ids-core-color-green-700,
179
+ 'ids-core-color-green-800': $ids-core-color-green-800,
180
+ 'ids-core-color-green-900': $ids-core-color-green-900,
181
+ 'ids-core-color-green-950': $ids-core-color-green-950,
182
+ 'ids-core-color-green-1000': $ids-core-color-green-1000,
183
+ 'ids-core-color-transparent': $ids-core-color-transparent,
184
+ 'ids-core-font-size-base': $ids-core-font-size-base,
185
+ 'ids-core-font': $ids-core-font,
186
+ 'ids-core-lineheight-base': $ids-core-lineheight-base,
187
+ 'ids-core-sizing-rem': $ids-core-sizing-rem,
188
+ 'ids-core-sizing-base': $ids-core-sizing-base,
189
+ 'ids-core-borderradius-base': $ids-core-borderradius-base,
190
+ 'ids-core-borderwidth-slim': $ids-core-borderwidth-slim,
191
+ 'ids-core-borderwidth-thick': $ids-core-borderwidth-thick,
192
+ 'ids-typography-label-1x': $ids-typography-label-1x,
193
+ 'ids-borderradius-0-25x': $ids-borderradius-0-25x,
194
+ 'ids-borderradius-full': $ids-borderradius-full,
195
+ 'ids-border-focused': $ids-border-focused,
196
+ 'ids-border-primary': $ids-border-primary,
197
+ 'ids-border-disabled': $ids-border-disabled,
198
+ 'ids-border-transparent': $ids-border-transparent,
199
+ 'ids-color-element-primary-default': $ids-color-element-primary-default,
200
+ 'ids-color-element-primary-hover': $ids-color-element-primary-hover,
201
+ 'ids-color-element-primary-active': $ids-color-element-primary-active,
202
+ 'ids-color-element-primary-onprimary': $ids-color-element-primary-onprimary,
203
+ 'ids-color-element-secondary-default': $ids-color-element-secondary-default,
204
+ 'ids-color-element-secondary-hover': $ids-color-element-secondary-hover,
205
+ 'ids-color-element-secondary-active': $ids-color-element-secondary-active,
206
+ 'ids-color-element-secondary-onsecondary': $ids-color-element-secondary-onsecondary,
207
+ 'ids-color-element-primaryinverted-default': $ids-color-element-primaryinverted-default,
208
+ 'ids-color-element-primaryinverted-hover': $ids-color-element-primaryinverted-hover,
209
+ 'ids-color-element-primaryinverted-active': $ids-color-element-primaryinverted-active,
210
+ 'ids-color-element-primaryinverted-onprimaryaccent': $ids-color-element-primaryinverted-onprimaryaccent,
211
+ 'ids-color-element-primaryaccentinverted-default': $ids-color-element-primaryaccentinverted-default,
212
+ 'ids-color-element-primaryaccentinverted-hover': $ids-color-element-primaryaccentinverted-hover,
213
+ 'ids-color-element-primaryaccentinverted-active': $ids-color-element-primaryaccentinverted-active,
214
+ 'ids-color-element-primaryaccentinverted-onprimaryaccentinverted': $ids-color-element-primaryaccentinverted-onprimaryaccentinverted,
215
+ 'ids-color-element-disabled': $ids-color-element-disabled,
216
+ 'ids-color-element-ondisabled': $ids-color-element-ondisabled,
217
+ 'ids-color-border-primary': $ids-color-border-primary,
218
+ 'ids-color-border-disabled': $ids-color-border-disabled,
219
+ 'ids-color-border-muted': $ids-color-border-muted,
220
+ 'ids-color-border-subtle': $ids-color-border-subtle,
221
+ 'ids-color-border-focus': $ids-color-border-focus
222
+ );
223
+
224
+ // Utility function to get token value
225
+ @function ids-token($name) {
226
+ @if map-has-key($ids-tokens, $name) {
227
+ @return map-get($ids-tokens, $name);
228
+ }
229
+ @warn "Token '#{$name}' not found.";
230
+ @return null;
231
+ }
package/dist/scss/index.scss ADDED
@@ -0,0 +1,13 @@
1
+ // IDS Design Tokens - SCSS Index
2
+ // Generated by Style Dictionary
3
+ // Do not edit directly
4
+
5
+ // Import all theme tokens
6
+ @import 'tokens.light';
7
+ @import 'tokens.dark';
8
+
9
+ // Default theme (light)
10
+ @import 'tokens';
11
+
12
+ // Utility mixins
13
+ @import 'mixins';
package/dist/types/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ // IDS Design Tokens - TypeScript Index
2
+ // Generated by Style Dictionary
3
+
4
+ export * from './tokens';
5
+ export * as light from './tokens.light';
6
+ export * as dark from './tokens.dark';
7
+
8
+ import tokens from './tokens';
9
+ export default tokens;