@aurodesignsystem/design-tokens 4.1.1 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +17 -0
  3. package/dist/tokens/CSSCustomProperties.css +244 -95
  4. package/dist/tokens/CSSSizeCustomProperties.css +1 -1
  5. package/dist/tokens/JSData--color.js +241 -1
  6. package/dist/tokens/JSObject--allTokens.js +241 -1
  7. package/dist/tokens/JSObject--deprecated.js +1 -1
  8. package/dist/tokens/JSVariables--color.js +9 -1
  9. package/dist/tokens/SCSSVariableMap.scss +1 -1
  10. package/dist/tokens/SCSSVariables.scss +150 -95
  11. package/dist/tokens/SCSSVariablesMapFlat.scss +12 -2
  12. package/dist/tokens/SassCustomProperties.scss +244 -95
  13. package/dist/tokens/SassSizeCustomProperties.scss +1 -1
  14. package/dist/tokens/darkmode/CSSCustomProperties.css +11 -5
  15. package/dist/tokens/darkmode/JSDataColor.js +1 -1
  16. package/dist/tokens/darkmode/JSObject--allDarkTokens.js +1 -1
  17. package/dist/tokens/darkmode/JSVariablesColor.js +1 -1
  18. package/dist/tokens/darkmode/SCSSVariables.scss +7 -5
  19. package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss +1 -1
  20. package/dist/tokens/darkmode/SassCustomProperties.scss +11 -5
  21. package/package.json +2 -2
  22. package/src/color/background.json +10 -0
  23. package/src/color/base.json +14 -0
  24. package/src/color/border.json +7 -0
  25. package/src/color/ui.json +30 -0
package/dist/tokens/SCSSVariables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 15 Sep 2023 18:15:03 GMT
3
+ // Generated on Fri, 29 Dec 2023 19:04:04 GMT
4
4
 
5
5
  $ds-asset-font-circular-family-name: "AS Circular";
6
6
  $ds-asset-font-circular-filename: "ASCircularWeb";
@@ -160,11 +160,16 @@ $ds-color-background-lightest: #ffffff;
160
160
  $ds-color-background-lighter: #f8f8f8;
161
161
  $ds-color-background-darker: #01426a;
162
162
  $ds-color-background-darkest: #00274a;
163
- $ds-color-base-white: #ffffff; //
164
- // Base value for token support; should not use in code!
163
+ $ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
164
+ //
165
+ // // Base value for token support; should not use in code!
166
+ $ds-color-base-white: #ffffff;
167
+ $ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5); // white @ 50%
165
168
  $ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); // white @ 40%
166
- $ds-color-base-black: #000000; //
167
- // Base value for token support; should not use in code!
169
+ $ds-color-base-white-opacity-0: rgba(255, 255, 255, 0); // white @ 0%
170
+ //
171
+ // // Base value for token support; should not use in code!
172
+ $ds-color-base-black: #000000;
168
173
  $ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); // black @ 15%
169
174
  $ds-color-state-error-100: #ff999b;
170
175
  $ds-color-state-error-500: #df0b37;
@@ -174,101 +179,147 @@ $ds-color-state-warning-500: #de750c;
174
179
  $ds-color-border-primary-default: #626b79;
175
180
  $ds-color-border-primary-inverse: #9fabbb;
176
181
  $ds-color-border-active-default: #0074c8;
182
+ $ds-color-border-active-inverse: #00cff0;
177
183
  $ds-color-border-error-default: #df0b37;
178
184
  $ds-color-border-disabled-default: #dbdbdb;
179
185
  $ds-color-border-focus-default: #222222;
180
186
  $ds-color-border-divider-default: rgba(0, 0, 0, 0.15);
181
187
  $ds-color-border-divider-inverse: #ffffff;
182
- $ds-color-brand-midnight-100: #c1daf0; //
183
- // Please consider descriptive token prior to using brand token
184
- $ds-color-brand-midnight-200: #569ed7; //
185
- // Please consider descriptive token prior to using brand token
186
- $ds-color-brand-midnight-300: #156fad; //
187
- // Please consider descriptive token prior to using brand token
188
- $ds-color-brand-midnight-400: #01426a; //
189
- // Please consider descriptive token prior to using brand token
190
- $ds-color-brand-midnight-500: #00274a; //
191
- // Please consider descriptive token prior to using brand token
192
- $ds-color-brand-atlas-100: #cde6ff; //
193
- // Please consider descriptive token prior to using brand token
194
- $ds-color-brand-atlas-200: #6bb7fb; //
195
- // Please consider descriptive token prior to using brand token
196
- $ds-color-brand-atlas-300: #2492eb; //
197
- // Please consider descriptive token prior to using brand token
198
- $ds-color-brand-atlas-400: #0074c8; //
199
- // Please consider descriptive token prior to using brand token
200
- $ds-color-brand-atlas-500: #054687; //
201
- // Please consider descriptive token prior to using brand token
202
- $ds-color-brand-breeze-100: #c0f7ff; //
203
- // Please consider descriptive token prior to using brand token
204
- $ds-color-brand-breeze-200: #5de3f7; //
205
- // Please consider descriptive token prior to using brand token
206
- $ds-color-brand-breeze-300: #00cff0; //
207
- // Please consider descriptive token prior to using brand token
208
- $ds-color-brand-breeze-400: #099dc5; //
209
- // Please consider descriptive token prior to using brand token
210
- $ds-color-brand-breeze-500: #0b5575; //
211
- // Please consider descriptive token prior to using brand token
212
- $ds-color-brand-tropical-100: #e2ffcd; //
213
- // Please consider descriptive token prior to using brand token
214
- $ds-color-brand-tropical-200: #d0fba6; //
215
- // Please consider descriptive token prior to using brand token
216
- $ds-color-brand-tropical-300: #c0e585; //
217
- // Please consider descriptive token prior to using brand token
218
- $ds-color-brand-tropical-400: #91be62; //
219
- // Please consider descriptive token prior to using brand token
220
- $ds-color-brand-tropical-500: #5e8741; //
221
- // Please consider descriptive token prior to using brand token
222
- $ds-color-brand-alpine-100: #bcaae6; //
223
- // Please consider descriptive token prior to using brand token
224
- $ds-color-brand-alpine-200: #9e73ea; //
225
- // Please consider descriptive token prior to using brand token
226
- $ds-color-brand-alpine-300: #8439ef; //
227
- // Please consider descriptive token prior to using brand token
228
- $ds-color-brand-alpine-400: #631db8; //
229
- // Please consider descriptive token prior to using brand token
230
- $ds-color-brand-alpine-500: #39115c; //
231
- // Please consider descriptive token prior to using brand token
232
- $ds-color-brand-flamingo-100: #ffebee; //
233
- // Please consider descriptive token prior to using brand token
234
- $ds-color-brand-flamingo-200: #ffc0ca; //
235
- // Please consider descriptive token prior to using brand token
236
- $ds-color-brand-flamingo-300: #ff94a7; //
237
- // Please consider descriptive token prior to using brand token
238
- $ds-color-brand-flamingo-400: #f65b7b; //
239
- // Please consider descriptive token prior to using brand token
240
- $ds-color-brand-flamingo-500: #b82b47; //
241
- // Please consider descriptive token prior to using brand token
242
- $ds-color-brand-canyon-100: #ffcab6; //
243
- // Please consider descriptive token prior to using brand token
244
- $ds-color-brand-canyon-200: #f99574; //
245
- // Please consider descriptive token prior to using brand token
246
- $ds-color-brand-canyon-300: #f26135; //
247
- // Please consider descriptive token prior to using brand token
248
- $ds-color-brand-canyon-400: #de3e09; //
249
- // Please consider descriptive token prior to using brand token
250
- $ds-color-brand-canyon-500: #b83302; //
251
- // Please consider descriptive token prior to using brand token
252
- $ds-color-brand-goldcoast-100: #fff0cd; //
253
- // Please consider descriptive token prior to using brand token
254
- $ds-color-brand-goldcoast-200: #ffdb67; //
255
- // Please consider descriptive token prior to using brand token
256
- $ds-color-brand-goldcoast-300: #ffd200; //
257
- // Please consider descriptive token prior to using brand token
258
- $ds-color-brand-goldcoast-400: #e5ad07; //
259
- // Please consider descriptive token prior to using brand token
260
- $ds-color-brand-goldcoast-500: #b88624; //
261
- // Please consider descriptive token prior to using brand token
262
- $ds-color-brand-neutral-100: #f9fbfc; //
263
- // Please consider descriptive token prior to using brand token
264
- $ds-color-brand-neutral-200: #e2eaef; //
265
- // Please consider descriptive token prior to using brand token
266
- $ds-color-brand-neutral-300: #cbd8e2; //
267
- // Please consider descriptive token prior to using brand token
268
- $ds-color-brand-neutral-400: #9fabbb; //
269
- // Please consider descriptive token prior to using brand token
270
- $ds-color-brand-neutral-500: #626b79; //
271
- // Please consider descriptive token prior to using brand token
188
+ //
189
+ // // Please consider descriptive token prior to using brand token
190
+ $ds-color-brand-midnight-100: #c1daf0;
191
+ //
192
+ // // Please consider descriptive token prior to using brand token
193
+ $ds-color-brand-midnight-200: #569ed7;
194
+ //
195
+ // // Please consider descriptive token prior to using brand token
196
+ $ds-color-brand-midnight-300: #156fad;
197
+ //
198
+ // // Please consider descriptive token prior to using brand token
199
+ $ds-color-brand-midnight-400: #01426a;
200
+ //
201
+ // // Please consider descriptive token prior to using brand token
202
+ $ds-color-brand-midnight-500: #00274a;
203
+ //
204
+ // // Please consider descriptive token prior to using brand token
205
+ $ds-color-brand-atlas-100: #cde6ff;
206
+ //
207
+ // // Please consider descriptive token prior to using brand token
208
+ $ds-color-brand-atlas-200: #6bb7fb;
209
+ //
210
+ // // Please consider descriptive token prior to using brand token
211
+ $ds-color-brand-atlas-300: #2492eb;
212
+ //
213
+ // // Please consider descriptive token prior to using brand token
214
+ $ds-color-brand-atlas-400: #0074c8;
215
+ //
216
+ // // Please consider descriptive token prior to using brand token
217
+ $ds-color-brand-atlas-500: #054687;
218
+ //
219
+ // // Please consider descriptive token prior to using brand token
220
+ $ds-color-brand-breeze-100: #c0f7ff;
221
+ //
222
+ // // Please consider descriptive token prior to using brand token
223
+ $ds-color-brand-breeze-200: #5de3f7;
224
+ //
225
+ // // Please consider descriptive token prior to using brand token
226
+ $ds-color-brand-breeze-300: #00cff0;
227
+ //
228
+ // // Please consider descriptive token prior to using brand token
229
+ $ds-color-brand-breeze-400: #099dc5;
230
+ //
231
+ // // Please consider descriptive token prior to using brand token
232
+ $ds-color-brand-breeze-500: #0b5575;
233
+ //
234
+ // // Please consider descriptive token prior to using brand token
235
+ $ds-color-brand-tropical-100: #e2ffcd;
236
+ //
237
+ // // Please consider descriptive token prior to using brand token
238
+ $ds-color-brand-tropical-200: #d0fba6;
239
+ //
240
+ // // Please consider descriptive token prior to using brand token
241
+ $ds-color-brand-tropical-300: #c0e585;
242
+ //
243
+ // // Please consider descriptive token prior to using brand token
244
+ $ds-color-brand-tropical-400: #91be62;
245
+ //
246
+ // // Please consider descriptive token prior to using brand token
247
+ $ds-color-brand-tropical-500: #5e8741;
248
+ //
249
+ // // Please consider descriptive token prior to using brand token
250
+ $ds-color-brand-alpine-100: #bcaae6;
251
+ //
252
+ // // Please consider descriptive token prior to using brand token
253
+ $ds-color-brand-alpine-200: #9e73ea;
254
+ //
255
+ // // Please consider descriptive token prior to using brand token
256
+ $ds-color-brand-alpine-300: #8439ef;
257
+ //
258
+ // // Please consider descriptive token prior to using brand token
259
+ $ds-color-brand-alpine-400: #631db8;
260
+ //
261
+ // // Please consider descriptive token prior to using brand token
262
+ $ds-color-brand-alpine-500: #39115c;
263
+ //
264
+ // // Please consider descriptive token prior to using brand token
265
+ $ds-color-brand-flamingo-100: #ffebee;
266
+ //
267
+ // // Please consider descriptive token prior to using brand token
268
+ $ds-color-brand-flamingo-200: #ffc0ca;
269
+ //
270
+ // // Please consider descriptive token prior to using brand token
271
+ $ds-color-brand-flamingo-300: #ff94a7;
272
+ //
273
+ // // Please consider descriptive token prior to using brand token
274
+ $ds-color-brand-flamingo-400: #f65b7b;
275
+ //
276
+ // // Please consider descriptive token prior to using brand token
277
+ $ds-color-brand-flamingo-500: #b82b47;
278
+ //
279
+ // // Please consider descriptive token prior to using brand token
280
+ $ds-color-brand-canyon-100: #ffcab6;
281
+ //
282
+ // // Please consider descriptive token prior to using brand token
283
+ $ds-color-brand-canyon-200: #f99574;
284
+ //
285
+ // // Please consider descriptive token prior to using brand token
286
+ $ds-color-brand-canyon-300: #f26135;
287
+ //
288
+ // // Please consider descriptive token prior to using brand token
289
+ $ds-color-brand-canyon-400: #de3e09;
290
+ //
291
+ // // Please consider descriptive token prior to using brand token
292
+ $ds-color-brand-canyon-500: #b83302;
293
+ //
294
+ // // Please consider descriptive token prior to using brand token
295
+ $ds-color-brand-goldcoast-100: #fff0cd;
296
+ //
297
+ // // Please consider descriptive token prior to using brand token
298
+ $ds-color-brand-goldcoast-200: #ffdb67;
299
+ //
300
+ // // Please consider descriptive token prior to using brand token
301
+ $ds-color-brand-goldcoast-300: #ffd200;
302
+ //
303
+ // // Please consider descriptive token prior to using brand token
304
+ $ds-color-brand-goldcoast-400: #e5ad07;
305
+ //
306
+ // // Please consider descriptive token prior to using brand token
307
+ $ds-color-brand-goldcoast-500: #b88624;
308
+ //
309
+ // // Please consider descriptive token prior to using brand token
310
+ $ds-color-brand-neutral-100: #f9fbfc;
311
+ //
312
+ // // Please consider descriptive token prior to using brand token
313
+ $ds-color-brand-neutral-200: #e2eaef;
314
+ //
315
+ // // Please consider descriptive token prior to using brand token
316
+ $ds-color-brand-neutral-300: #cbd8e2;
317
+ //
318
+ // // Please consider descriptive token prior to using brand token
319
+ $ds-color-brand-neutral-400: #9fabbb;
320
+ //
321
+ // // Please consider descriptive token prior to using brand token
322
+ $ds-color-brand-neutral-500: #626b79;
272
323
  $ds-color-brand-gray-100: #f8f8f8;
273
324
  $ds-color-brand-gray-200: #dbdbdb;
274
325
  $ds-color-brand-gray-300: #b2b2b2;
@@ -310,5 +361,9 @@ $ds-color-ui-default-inverse: #00cff0;
310
361
  $ds-color-ui-hover-default: #054687;
311
362
  $ds-color-ui-hover-inverse: #5de3f7;
312
363
  $ds-color-ui-active-default: #054687;
364
+ $ds-color-ui-active-inverse: #5de3f7;
313
365
  $ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);
366
+ $ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);
367
+ $ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);
314
368
  $ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);
369
+ $ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);
package/dist/tokens/SCSSVariablesMapFlat.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Fri, 15 Sep 2023 18:15:03 GMT
4
+ Generated on Fri, 29 Dec 2023 19:04:04 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
@@ -179,11 +179,16 @@ $auroTokens: (
179
179
  'ds-color-background-lighter': (#f8f8f8),
180
180
  'ds-color-background-darker': (#01426a),
181
181
  'ds-color-background-darkest': (#00274a),
182
+ 'ds-color-background-gradient-default': (linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5))),
182
183
  //
183
184
  // Base value for token support; should not use in code!
184
185
  'ds-color-base-white': (#ffffff),
186
+ // white @ 50%
187
+ 'ds-color-base-white-opacity-50': (rgba(255, 255, 255, 0.5)),
185
188
  // white @ 40%
186
189
  'ds-color-base-white-opacity-40': (rgba(255, 255, 255, 0.4)),
190
+ // white @ 0%
191
+ 'ds-color-base-white-opacity-0': (rgba(255, 255, 255, 0)),
187
192
  //
188
193
  // Base value for token support; should not use in code!
189
194
  'ds-color-base-black': (#000000),
@@ -197,6 +202,7 @@ $auroTokens: (
197
202
  'ds-color-border-primary-default': (#626b79),
198
203
  'ds-color-border-primary-inverse': (#9fabbb),
199
204
  'ds-color-border-active-default': (#0074c8),
205
+ 'ds-color-border-active-inverse': (#00cff0),
200
206
  'ds-color-border-error-default': (#df0b37),
201
207
  'ds-color-border-disabled-default': (#dbdbdb),
202
208
  'ds-color-border-focus-default': (#222222),
@@ -378,6 +384,10 @@ $auroTokens: (
378
384
  'ds-color-ui-hover-default': (#054687),
379
385
  'ds-color-ui-hover-inverse': (#5de3f7),
380
386
  'ds-color-ui-active-default': (#054687),
387
+ 'ds-color-ui-active-inverse': (#5de3f7),
381
388
  'ds-color-ui-disabled-default': (rgba(0, 116, 200, 0.2)),
382
- 'ds-color-ui-bkg-hover-default': (rgba(0, 0, 0, 0.06))
389
+ 'ds-color-ui-bkg-default-default': (rgba(0, 0, 0, 0.03)),
390
+ 'ds-color-ui-bkg-default-inverse': (rgba(255, 255, 255, 0.03)),
391
+ 'ds-color-ui-bkg-hover-default': (rgba(0, 0, 0, 0.06)),
392
+ 'ds-color-ui-bkg-hover-inverse': (rgba(255, 255, 255, 0.06))
383
393
  );