@sage/design-tokens 2.15.0 → 2.16.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 (15) hide show
  1. package/android/base.xml +21 -13
  2. package/css/base.css +21 -13
  3. package/data/tokens.json +92 -44
  4. package/docs/tokens/base/colors/index.html +270 -102
  5. package/docs/tokens/base/index.html +270 -102
  6. package/docs/tokens/index.html +270 -102
  7. package/ios/base.h +21 -13
  8. package/js/base/common.d.ts +20 -12
  9. package/js/base/common.js +21 -13
  10. package/js/base/es6.d.ts +20 -12
  11. package/js/base/es6.js +20 -12
  12. package/package.json +1 -1
  13. package/sage-design-tokens-2.16.0.tgz +0 -0
  14. package/scss/base.scss +21 -13
  15. package/sage-design-tokens-2.15.0.tgz +0 -0
package/android/base.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Wed, 06 Apr 2022 09:17:50 GMT
5
+ Generated on Thu, 07 Apr 2022 11:02:41 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -61,6 +61,26 @@
61
61
  <string name="colorsComponentsMenuSummerChildAlt600">#007e45ff</string>
62
62
  <string name="colorsComponentsMenuSummerChildAlt700">#d9e0e4ff</string>
63
63
  <string name="colorsComponentsMenuSummerChildAlt800">#d9e0e4ff</string>
64
+ <string name="colorsComponentsMenuWinterChild300">#4d4d4dff</string>
65
+ <string name="colorsComponentsMenuWinterChild400">#ff00ffff</string>
66
+ <string name="colorsComponentsMenuWinterChild500">#262626ff</string>
67
+ <string name="colorsComponentsMenuWinterChild600">#007e45ff</string>
68
+ <string name="colorsComponentsMenuWinterChild700">#262626ff</string>
69
+ <string name="colorsComponentsMenuWinterChild800">#262626ff</string>
70
+ <string name="colorsComponentsMenuWinterChildAlt300">#4d4d4dff</string>
71
+ <string name="colorsComponentsMenuWinterChildAlt400">#ff00ffff</string>
72
+ <string name="colorsComponentsMenuWinterChildAlt500">#404040ff</string>
73
+ <string name="colorsComponentsMenuWinterChildAlt600">#007e45ff</string>
74
+ <string name="colorsComponentsMenuWinterChildAlt700">#404040ff</string>
75
+ <string name="colorsComponentsMenuWinterChildAlt800">#404040ff</string>
76
+ <string name="colorsComponentsMenuWinterStandard400">#ff00ffff</string>
77
+ <string name="colorsComponentsMenuWinterStandard500">#000000ff</string>
78
+ <string name="colorsComponentsMenuWinterStandard600">#007e45ff</string>
79
+ <string name="colorsComponentsMenuWinterStandard700">#262626ff</string>
80
+ <string name="colorsComponentsMenuWinterStandard800">#262626ff</string>
81
+ <string name="colorsComponentsMenuWinterParent500">#000000ff</string>
82
+ <string name="colorsComponentsMenuWinterParent600">#007e45ff</string>
83
+ <string name="colorsComponentsMenuWinterParent700">#262626ff</string>
64
84
  <string name="colorsComponentsMenuAutumnStandard500">#00324cff</string>
65
85
  <string name="colorsComponentsMenuAutumnStandard600">#007e45ff</string>
66
86
  <string name="colorsComponentsMenuAutumnStandard700">#19475eff</string>
@@ -73,18 +93,6 @@
73
93
  <string name="colorsComponentsMenuAutumnChildAlt400">#19475eff</string>
74
94
  <string name="colorsComponentsMenuAutumnChildAlt500">#00324cff</string>
75
95
  <string name="colorsComponentsMenuAutumnChildAlt600">#007e45ff</string>
76
- <string name="colorsComponentsMenuWinterStandard500">#000000ff</string>
77
- <string name="colorsComponentsMenuWinterStandard600">#007e45ff</string>
78
- <string name="colorsComponentsMenuWinterStandard700">#262626ff</string>
79
- <string name="colorsComponentsMenuWinterParent500">#000000ff</string>
80
- <string name="colorsComponentsMenuWinterParent600">#007e45ff</string>
81
- <string name="colorsComponentsMenuWinterParent700">#262626ff</string>
82
- <string name="colorsComponentsMenuWinterChild400">#262626ff</string>
83
- <string name="colorsComponentsMenuWinterChild500">#000000ff</string>
84
- <string name="colorsComponentsMenuWinterChild600">#007e45ff</string>
85
- <string name="colorsComponentsMenuWinterChildAlt400">#262626ff</string>
86
- <string name="colorsComponentsMenuWinterChildAlt500">#191919ff</string>
87
- <string name="colorsComponentsMenuWinterChildAlt600">#007e45ff</string>
88
96
  <string name="colorsComponentsMenuYin100">#000000ff</string>
89
97
  <string name="colorsComponentsMenuYin065">#000000a6</string>
90
98
  <string name="colorsComponentsMenuYin090">#000000e6</string>
package/css/base.css CHANGED
@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
4
4
 
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Wed, 06 Apr 2022 09:17:50 GMT
7
+ * Generated on Thu, 07 Apr 2022 11:02:41 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -64,6 +64,26 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
64
64
  --colorsComponentsMenuSummerChildAlt600: #007e45ff;
65
65
  --colorsComponentsMenuSummerChildAlt700: #d9e0e4ff;
66
66
  --colorsComponentsMenuSummerChildAlt800: #d9e0e4ff;
67
+ --colorsComponentsMenuWinterChild300: #4d4d4dff;
68
+ --colorsComponentsMenuWinterChild400: #ff00ffff;
69
+ --colorsComponentsMenuWinterChild500: #262626ff;
70
+ --colorsComponentsMenuWinterChild600: #007e45ff;
71
+ --colorsComponentsMenuWinterChild700: #262626ff;
72
+ --colorsComponentsMenuWinterChild800: #262626ff;
73
+ --colorsComponentsMenuWinterChildAlt300: #4d4d4dff;
74
+ --colorsComponentsMenuWinterChildAlt400: #ff00ffff;
75
+ --colorsComponentsMenuWinterChildAlt500: #404040ff;
76
+ --colorsComponentsMenuWinterChildAlt600: #007e45ff;
77
+ --colorsComponentsMenuWinterChildAlt700: #404040ff;
78
+ --colorsComponentsMenuWinterChildAlt800: #404040ff;
79
+ --colorsComponentsMenuWinterStandard400: #ff00ffff;
80
+ --colorsComponentsMenuWinterStandard500: #000000ff;
81
+ --colorsComponentsMenuWinterStandard600: #007e45ff;
82
+ --colorsComponentsMenuWinterStandard700: #262626ff;
83
+ --colorsComponentsMenuWinterStandard800: #262626ff;
84
+ --colorsComponentsMenuWinterParent500: #000000ff;
85
+ --colorsComponentsMenuWinterParent600: #007e45ff;
86
+ --colorsComponentsMenuWinterParent700: #262626ff;
67
87
  --colorsComponentsMenuAutumnStandard500: #00324cff;
68
88
  --colorsComponentsMenuAutumnStandard600: #007e45ff;
69
89
  --colorsComponentsMenuAutumnStandard700: #19475eff;
@@ -76,18 +96,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
76
96
  --colorsComponentsMenuAutumnChildAlt400: #19475eff;
77
97
  --colorsComponentsMenuAutumnChildAlt500: #00324cff;
78
98
  --colorsComponentsMenuAutumnChildAlt600: #007e45ff;
79
- --colorsComponentsMenuWinterStandard500: #000000ff;
80
- --colorsComponentsMenuWinterStandard600: #007e45ff;
81
- --colorsComponentsMenuWinterStandard700: #262626ff;
82
- --colorsComponentsMenuWinterParent500: #000000ff;
83
- --colorsComponentsMenuWinterParent600: #007e45ff;
84
- --colorsComponentsMenuWinterParent700: #262626ff;
85
- --colorsComponentsMenuWinterChild400: #262626ff;
86
- --colorsComponentsMenuWinterChild500: #000000ff;
87
- --colorsComponentsMenuWinterChild600: #007e45ff;
88
- --colorsComponentsMenuWinterChildAlt400: #262626ff;
89
- --colorsComponentsMenuWinterChildAlt500: #191919ff;
90
- --colorsComponentsMenuWinterChildAlt600: #007e45ff;
91
99
  --colorsComponentsMenuYin100: #000000ff;
92
100
  --colorsComponentsMenuYin065: #000000a6;
93
101
  --colorsComponentsMenuYin090: #000000e6;
package/data/tokens.json CHANGED
@@ -196,7 +196,7 @@
196
196
  "400": {
197
197
  "value": "#ccd6dbff",
198
198
  "type": "color",
199
- "description": "menu button border"
199
+ "description": "selected menu button border"
200
200
  },
201
201
  "500": {
202
202
  "value": "#ffffffff",
@@ -245,7 +245,7 @@
245
245
  "400": {
246
246
  "value": "#ccd6dbff",
247
247
  "type": "color",
248
- "description": "menu button border"
248
+ "description": "selected menu button border"
249
249
  },
250
250
  "500": {
251
251
  "value": "#e6ebedff",
@@ -277,7 +277,7 @@
277
277
  "400": {
278
278
  "value": "#ccd6dbff",
279
279
  "type": "color",
280
- "description": "menu button border"
280
+ "description": "selected menu button border"
281
281
  },
282
282
  "500": {
283
283
  "value": "#d9e0e4ff",
@@ -301,106 +301,155 @@
301
301
  }
302
302
  }
303
303
  },
304
- "autumn": {
305
- "standard": {
304
+ "winter": {
305
+ "child": {
306
+ "300": {
307
+ "value": "#4d4d4dff",
308
+ "type": "color",
309
+ "description": "menu divider"
310
+ },
311
+ "400": {
312
+ "value": "#ff00ffff",
313
+ "type": "color",
314
+ "description": "TBD selected menu button border (darker than divider)"
315
+ },
306
316
  "500": {
307
- "value": "#00324cff",
308
- "type": "color"
317
+ "value": "#262626ff",
318
+ "type": "color",
319
+ "description": "default menu button"
309
320
  },
310
321
  "600": {
311
322
  "value": "#007e45ff",
312
- "type": "color"
323
+ "type": "color",
324
+ "description": "hover (with click action)"
313
325
  },
314
326
  "700": {
315
- "value": "#19475eff",
327
+ "value": "#262626ff",
316
328
  "type": "color",
317
- "description": ""
329
+ "description": "open menu item"
330
+ },
331
+ "800": {
332
+ "value": "#262626ff",
333
+ "type": "color",
334
+ "description": "selected menu button bg (use with 400 border)"
318
335
  }
319
336
  },
320
- "parent": {
337
+ "childAlt": {
338
+ "300": {
339
+ "value": "#4d4d4dff",
340
+ "type": "color",
341
+ "description": "menu divider"
342
+ },
343
+ "400": {
344
+ "value": "#ff00ffff",
345
+ "type": "color",
346
+ "description": "TBD selected menu button border"
347
+ },
321
348
  "500": {
322
- "value": "#00324cff",
323
- "type": "color"
349
+ "value": "#404040ff",
350
+ "type": "color",
351
+ "description": "default menu button"
324
352
  },
325
353
  "600": {
326
354
  "value": "#007e45ff",
327
355
  "type": "color",
328
- "description": ""
356
+ "description": "hover (with click action)"
329
357
  },
330
358
  "700": {
331
- "value": "#19475eff",
359
+ "value": "#404040ff",
332
360
  "type": "color",
333
- "description": ""
361
+ "description": "open menu item"
362
+ },
363
+ "800": {
364
+ "value": "#404040ff",
365
+ "type": "color",
366
+ "description": "selected menu button bg (use with 400 border)"
334
367
  }
335
368
  },
336
- "child": {
369
+ "standard": {
337
370
  "400": {
338
- "value": "#19475eff",
339
- "type": "color"
371
+ "value": "#ff00ffff",
372
+ "type": "color",
373
+ "description": "to be decided. selected menu button border"
340
374
  },
341
375
  "500": {
342
- "value": "#001926ff",
343
- "type": "color"
376
+ "value": "#000000ff",
377
+ "type": "color",
378
+ "description": "default menu button"
344
379
  },
345
380
  "600": {
346
381
  "value": "#007e45ff",
347
- "type": "color"
382
+ "type": "color",
383
+ "description": "hover (with click action)"
384
+ },
385
+ "700": {
386
+ "value": "#262626ff",
387
+ "type": "color",
388
+ "description": "TO BE REMOVED"
389
+ },
390
+ "800": {
391
+ "value": "#262626ff",
392
+ "type": "color",
393
+ "description": "selected menu button bg (use with 400 border)"
348
394
  }
349
395
  },
350
- "childAlt": {
351
- "400": {
352
- "value": "#19475eff",
353
- "type": "color"
354
- },
396
+ "parent": {
355
397
  "500": {
356
- "value": "#00324cff",
357
- "type": "color"
398
+ "value": "#000000ff",
399
+ "type": "color",
400
+ "description": "default menu button"
358
401
  },
359
402
  "600": {
360
403
  "value": "#007e45ff",
361
- "type": "color"
404
+ "type": "color",
405
+ "description": "hover (with click action)"
406
+ },
407
+ "700": {
408
+ "value": "#262626ff",
409
+ "type": "color",
410
+ "description": "open menu item (or hover non-clickable)"
362
411
  }
363
412
  }
364
413
  },
365
- "winter": {
414
+ "autumn": {
366
415
  "standard": {
367
416
  "500": {
368
- "value": "#000000ff",
369
- "type": "color",
370
- "description": ""
417
+ "value": "#00324cff",
418
+ "type": "color"
371
419
  },
372
420
  "600": {
373
421
  "value": "#007e45ff",
374
422
  "type": "color"
375
423
  },
376
424
  "700": {
377
- "value": "#262626ff",
425
+ "value": "#19475eff",
378
426
  "type": "color",
379
427
  "description": ""
380
428
  }
381
429
  },
382
430
  "parent": {
383
431
  "500": {
384
- "value": "#000000ff",
432
+ "value": "#00324cff",
385
433
  "type": "color"
386
434
  },
387
435
  "600": {
388
436
  "value": "#007e45ff",
389
- "type": "color"
437
+ "type": "color",
438
+ "description": ""
390
439
  },
391
440
  "700": {
392
- "value": "#262626ff",
441
+ "value": "#19475eff",
393
442
  "type": "color",
394
443
  "description": ""
395
444
  }
396
445
  },
397
446
  "child": {
398
447
  "400": {
399
- "value": "#262626ff",
448
+ "value": "#19475eff",
400
449
  "type": "color"
401
450
  },
402
451
  "500": {
403
- "value": "#000000ff",
452
+ "value": "#001926ff",
404
453
  "type": "color"
405
454
  },
406
455
  "600": {
@@ -410,13 +459,12 @@
410
459
  },
411
460
  "childAlt": {
412
461
  "400": {
413
- "value": "#262626ff",
462
+ "value": "#19475eff",
414
463
  "type": "color"
415
464
  },
416
465
  "500": {
417
- "value": "#191919ff",
418
- "type": "color",
419
- "description": ""
466
+ "value": "#00324cff",
467
+ "type": "color"
420
468
  },
421
469
  "600": {
422
470
  "value": "#007e45ff",