@sage/design-tokens 1.81.0 → 1.82.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.
- package/css/base.css +7 -5
- package/css/no-theme.css +1 -1
- package/data/all.json +100 -28
- package/data/base.json +100 -28
- package/docs/index.html +125 -24
- package/js/base/common.d.ts +91 -43
- package/js/base/common.js +7 -5
- package/js/base/es6.d.ts +91 -43
- package/js/base/es6.js +83 -20
- package/js/no-theme/common.js +1 -1
- package/package.json +1 -1
- package/sage-design-tokens-1.82.0.tgz +0 -0
- package/scss/base.scss +7 -5
- package/scss/no-theme.scss +1 -1
- package/sage-design-tokens-1.81.0.tgz +0 -0
package/css/base.css
CHANGED
|
@@ -3,7 +3,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
3
3
|
*/
|
|
4
4
|
/**
|
|
5
5
|
* Do not edit directly
|
|
6
|
-
* Generated on
|
|
6
|
+
* Generated on Tue, 30 Nov 2021 14:50:31 GMT
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
:root {
|
|
@@ -133,6 +133,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
133
133
|
--colorsSemanticInfoYin065: rgba(0,0,0,0.65);
|
|
134
134
|
--colorsSemanticInfoYin090: rgba(0,0,0,0.9);
|
|
135
135
|
--colorsSemanticInfoYang100: rgba(255,255,255,1);
|
|
136
|
+
--colorsTest100: #123456;
|
|
136
137
|
--sizing100: 8px;
|
|
137
138
|
--sizing125: 10px;
|
|
138
139
|
--sizing150: 12px;
|
|
@@ -188,10 +189,11 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
188
189
|
--fontSizes010: 10px;
|
|
189
190
|
--fontSizes025: 12px;
|
|
190
191
|
--fontSizes050: 13px;
|
|
191
|
-
--boxShadow100:
|
|
192
|
-
--boxShadow200:
|
|
193
|
-
--boxShadow300:
|
|
194
|
-
--boxShadow400:
|
|
192
|
+
--boxShadow100: undefined undefined undefined undefined undefined;
|
|
193
|
+
--boxShadow200: undefined undefined undefined undefined undefined;
|
|
194
|
+
--boxShadow300: undefined undefined undefined undefined undefined;
|
|
195
|
+
--boxShadow400: undefined undefined undefined undefined undefined;
|
|
196
|
+
--boxShadow050: undefined undefined undefined undefined undefined;
|
|
195
197
|
--fontWeights400: Regular;
|
|
196
198
|
--fontWeights500: Medium;
|
|
197
199
|
--fontWeights700: Bold;
|
package/css/no-theme.css
CHANGED
package/data/all.json
CHANGED
|
@@ -608,6 +608,12 @@
|
|
|
608
608
|
}
|
|
609
609
|
}
|
|
610
610
|
}
|
|
611
|
+
},
|
|
612
|
+
"test": {
|
|
613
|
+
"100": {
|
|
614
|
+
"value": "#123456",
|
|
615
|
+
"type": "color"
|
|
616
|
+
}
|
|
611
617
|
}
|
|
612
618
|
},
|
|
613
619
|
"sizing": {
|
|
@@ -840,43 +846,109 @@
|
|
|
840
846
|
},
|
|
841
847
|
"boxShadow": {
|
|
842
848
|
"100": {
|
|
843
|
-
"value":
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
849
|
+
"value": [
|
|
850
|
+
{
|
|
851
|
+
"x": "0",
|
|
852
|
+
"y": "5",
|
|
853
|
+
"blur": "5",
|
|
854
|
+
"spread": "0",
|
|
855
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
856
|
+
"type": "dropShadow"
|
|
857
|
+
},
|
|
858
|
+
{
|
|
859
|
+
"x": "0",
|
|
860
|
+
"y": "10",
|
|
861
|
+
"blur": "10",
|
|
862
|
+
"spread": "0",
|
|
863
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
864
|
+
"type": "dropShadow"
|
|
865
|
+
}
|
|
866
|
+
],
|
|
850
867
|
"type": "boxShadow"
|
|
851
868
|
},
|
|
852
869
|
"200": {
|
|
853
|
-
"value":
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
870
|
+
"value": [
|
|
871
|
+
{
|
|
872
|
+
"x": "0",
|
|
873
|
+
"y": "10",
|
|
874
|
+
"blur": "20",
|
|
875
|
+
"spread": "0",
|
|
876
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
877
|
+
"type": "dropShadow"
|
|
878
|
+
},
|
|
879
|
+
{
|
|
880
|
+
"x": "0",
|
|
881
|
+
"y": "20",
|
|
882
|
+
"blur": "40",
|
|
883
|
+
"spread": "0",
|
|
884
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
885
|
+
"type": "dropShadow"
|
|
886
|
+
}
|
|
887
|
+
],
|
|
860
888
|
"type": "boxShadow"
|
|
861
889
|
},
|
|
862
890
|
"300": {
|
|
863
|
-
"value":
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
891
|
+
"value": [
|
|
892
|
+
{
|
|
893
|
+
"x": "0",
|
|
894
|
+
"y": "10",
|
|
895
|
+
"blur": "30",
|
|
896
|
+
"spread": "0",
|
|
897
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
898
|
+
"type": "dropShadow"
|
|
899
|
+
},
|
|
900
|
+
{
|
|
901
|
+
"x": "0",
|
|
902
|
+
"y": "30",
|
|
903
|
+
"blur": "60",
|
|
904
|
+
"spread": "0",
|
|
905
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
906
|
+
"type": "dropShadow"
|
|
907
|
+
}
|
|
908
|
+
],
|
|
870
909
|
"type": "boxShadow"
|
|
871
910
|
},
|
|
872
911
|
"400": {
|
|
873
|
-
"value":
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
912
|
+
"value": [
|
|
913
|
+
{
|
|
914
|
+
"x": "0",
|
|
915
|
+
"y": "10",
|
|
916
|
+
"blur": "40",
|
|
917
|
+
"spread": "0",
|
|
918
|
+
"color": "rgba($colors.utility.major.800, 0.04)",
|
|
919
|
+
"type": "dropShadow"
|
|
920
|
+
},
|
|
921
|
+
{
|
|
922
|
+
"x": "0",
|
|
923
|
+
"y": "50",
|
|
924
|
+
"blur": "80",
|
|
925
|
+
"spread": "0",
|
|
926
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
927
|
+
"type": "dropShadow"
|
|
928
|
+
}
|
|
929
|
+
],
|
|
930
|
+
"type": "boxShadow"
|
|
931
|
+
},
|
|
932
|
+
"050": {
|
|
933
|
+
"value": [
|
|
934
|
+
{
|
|
935
|
+
"x": "0",
|
|
936
|
+
"y": "3",
|
|
937
|
+
"blur": "3",
|
|
938
|
+
"spread": "0",
|
|
939
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
940
|
+
"type": "dropShadow"
|
|
941
|
+
},
|
|
942
|
+
{
|
|
943
|
+
"x": "0",
|
|
944
|
+
"y": "2",
|
|
945
|
+
"blur": "4",
|
|
946
|
+
"spread": "0",
|
|
947
|
+
"color": "rgba($colors.utility.major.800, 0.15)",
|
|
948
|
+
"type": "dropShadow"
|
|
949
|
+
}
|
|
950
|
+
],
|
|
951
|
+
"description": "",
|
|
880
952
|
"type": "boxShadow"
|
|
881
953
|
}
|
|
882
954
|
},
|
package/data/base.json
CHANGED
|
@@ -607,6 +607,12 @@
|
|
|
607
607
|
}
|
|
608
608
|
}
|
|
609
609
|
}
|
|
610
|
+
},
|
|
611
|
+
"test": {
|
|
612
|
+
"100": {
|
|
613
|
+
"value": "#123456",
|
|
614
|
+
"type": "color"
|
|
615
|
+
}
|
|
610
616
|
}
|
|
611
617
|
},
|
|
612
618
|
"sizing": {
|
|
@@ -839,43 +845,109 @@
|
|
|
839
845
|
},
|
|
840
846
|
"boxShadow": {
|
|
841
847
|
"100": {
|
|
842
|
-
"value":
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
848
|
+
"value": [
|
|
849
|
+
{
|
|
850
|
+
"x": "0",
|
|
851
|
+
"y": "5",
|
|
852
|
+
"blur": "5",
|
|
853
|
+
"spread": "0",
|
|
854
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
855
|
+
"type": "dropShadow"
|
|
856
|
+
},
|
|
857
|
+
{
|
|
858
|
+
"x": "0",
|
|
859
|
+
"y": "10",
|
|
860
|
+
"blur": "10",
|
|
861
|
+
"spread": "0",
|
|
862
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
863
|
+
"type": "dropShadow"
|
|
864
|
+
}
|
|
865
|
+
],
|
|
849
866
|
"type": "boxShadow"
|
|
850
867
|
},
|
|
851
868
|
"200": {
|
|
852
|
-
"value":
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
869
|
+
"value": [
|
|
870
|
+
{
|
|
871
|
+
"x": "0",
|
|
872
|
+
"y": "10",
|
|
873
|
+
"blur": "20",
|
|
874
|
+
"spread": "0",
|
|
875
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
876
|
+
"type": "dropShadow"
|
|
877
|
+
},
|
|
878
|
+
{
|
|
879
|
+
"x": "0",
|
|
880
|
+
"y": "20",
|
|
881
|
+
"blur": "40",
|
|
882
|
+
"spread": "0",
|
|
883
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
884
|
+
"type": "dropShadow"
|
|
885
|
+
}
|
|
886
|
+
],
|
|
859
887
|
"type": "boxShadow"
|
|
860
888
|
},
|
|
861
889
|
"300": {
|
|
862
|
-
"value":
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
890
|
+
"value": [
|
|
891
|
+
{
|
|
892
|
+
"x": "0",
|
|
893
|
+
"y": "10",
|
|
894
|
+
"blur": "30",
|
|
895
|
+
"spread": "0",
|
|
896
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
897
|
+
"type": "dropShadow"
|
|
898
|
+
},
|
|
899
|
+
{
|
|
900
|
+
"x": "0",
|
|
901
|
+
"y": "30",
|
|
902
|
+
"blur": "60",
|
|
903
|
+
"spread": "0",
|
|
904
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
905
|
+
"type": "dropShadow"
|
|
906
|
+
}
|
|
907
|
+
],
|
|
869
908
|
"type": "boxShadow"
|
|
870
909
|
},
|
|
871
910
|
"400": {
|
|
872
|
-
"value":
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
911
|
+
"value": [
|
|
912
|
+
{
|
|
913
|
+
"x": "0",
|
|
914
|
+
"y": "10",
|
|
915
|
+
"blur": "40",
|
|
916
|
+
"spread": "0",
|
|
917
|
+
"color": "rgba($colors.utility.major.800, 0.04)",
|
|
918
|
+
"type": "dropShadow"
|
|
919
|
+
},
|
|
920
|
+
{
|
|
921
|
+
"x": "0",
|
|
922
|
+
"y": "50",
|
|
923
|
+
"blur": "80",
|
|
924
|
+
"spread": "0",
|
|
925
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
926
|
+
"type": "dropShadow"
|
|
927
|
+
}
|
|
928
|
+
],
|
|
929
|
+
"type": "boxShadow"
|
|
930
|
+
},
|
|
931
|
+
"050": {
|
|
932
|
+
"value": [
|
|
933
|
+
{
|
|
934
|
+
"x": "0",
|
|
935
|
+
"y": "3",
|
|
936
|
+
"blur": "3",
|
|
937
|
+
"spread": "0",
|
|
938
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
939
|
+
"type": "dropShadow"
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
"x": "0",
|
|
943
|
+
"y": "2",
|
|
944
|
+
"blur": "4",
|
|
945
|
+
"spread": "0",
|
|
946
|
+
"color": "rgba($colors.utility.major.800, 0.15)",
|
|
947
|
+
"type": "dropShadow"
|
|
948
|
+
}
|
|
949
|
+
],
|
|
950
|
+
"description": "",
|
|
879
951
|
"type": "boxShadow"
|
|
880
952
|
}
|
|
881
953
|
},
|
package/docs/index.html
CHANGED
|
@@ -410,6 +410,43 @@
|
|
|
410
410
|
<th class="table__header-cell">Preview</th>
|
|
411
411
|
</tr>
|
|
412
412
|
</thead>
|
|
413
|
+
<tr class="table__row">
|
|
414
|
+
<td class="table__cell with-icons"
|
|
415
|
+
id="base-boxShadow-boxShadow050"
|
|
416
|
+
title="theme: base; category: boxShadow; variant: 050; ">
|
|
417
|
+
boxShadow050
|
|
418
|
+
<a href="#base-boxShadow-boxShadow050"
|
|
419
|
+
title="permalink"
|
|
420
|
+
class="permalink">
|
|
421
|
+
🔗
|
|
422
|
+
</a>
|
|
423
|
+
</td>
|
|
424
|
+
<td class="table__cell">
|
|
425
|
+
<pre>{
|
|
426
|
+
"0": {
|
|
427
|
+
"x": "0",
|
|
428
|
+
"y": "3",
|
|
429
|
+
"blur": "3",
|
|
430
|
+
"spread": "0",
|
|
431
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
432
|
+
"type": "dropShadow"
|
|
433
|
+
},
|
|
434
|
+
"1": {
|
|
435
|
+
"x": "0",
|
|
436
|
+
"y": "2",
|
|
437
|
+
"blur": "4",
|
|
438
|
+
"spread": "0",
|
|
439
|
+
"color": "rgba($colors.utility.major.800, 0.15)",
|
|
440
|
+
"type": "dropShadow"
|
|
441
|
+
}
|
|
442
|
+
}</pre>
|
|
443
|
+
</td>
|
|
444
|
+
<td class="table__cell">
|
|
445
|
+
<div class="table__box-shadow-preview"
|
|
446
|
+
style="box-shadow: ">
|
|
447
|
+
</div>
|
|
448
|
+
</td>
|
|
449
|
+
</tr>
|
|
413
450
|
<tr class="table__row">
|
|
414
451
|
<td class="table__cell with-icons"
|
|
415
452
|
id="base-boxShadow-boxShadow100"
|
|
@@ -423,16 +460,27 @@
|
|
|
423
460
|
</td>
|
|
424
461
|
<td class="table__cell">
|
|
425
462
|
<pre>{
|
|
426
|
-
"
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
463
|
+
"0": {
|
|
464
|
+
"x": "0",
|
|
465
|
+
"y": "5",
|
|
466
|
+
"blur": "5",
|
|
467
|
+
"spread": "0",
|
|
468
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
469
|
+
"type": "dropShadow"
|
|
470
|
+
},
|
|
471
|
+
"1": {
|
|
472
|
+
"x": "0",
|
|
473
|
+
"y": "10",
|
|
474
|
+
"blur": "10",
|
|
475
|
+
"spread": "0",
|
|
476
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
477
|
+
"type": "dropShadow"
|
|
478
|
+
}
|
|
431
479
|
}</pre>
|
|
432
480
|
</td>
|
|
433
481
|
<td class="table__cell">
|
|
434
482
|
<div class="table__box-shadow-preview"
|
|
435
|
-
style="box-shadow:
|
|
483
|
+
style="box-shadow: ">
|
|
436
484
|
</div>
|
|
437
485
|
</td>
|
|
438
486
|
</tr>
|
|
@@ -449,16 +497,27 @@
|
|
|
449
497
|
</td>
|
|
450
498
|
<td class="table__cell">
|
|
451
499
|
<pre>{
|
|
452
|
-
"
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
500
|
+
"0": {
|
|
501
|
+
"x": "0",
|
|
502
|
+
"y": "10",
|
|
503
|
+
"blur": "20",
|
|
504
|
+
"spread": "0",
|
|
505
|
+
"color": "rgba($colors.utility.major.800, 0.2)",
|
|
506
|
+
"type": "dropShadow"
|
|
507
|
+
},
|
|
508
|
+
"1": {
|
|
509
|
+
"x": "0",
|
|
510
|
+
"y": "20",
|
|
511
|
+
"blur": "40",
|
|
512
|
+
"spread": "0",
|
|
513
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
514
|
+
"type": "dropShadow"
|
|
515
|
+
}
|
|
457
516
|
}</pre>
|
|
458
517
|
</td>
|
|
459
518
|
<td class="table__cell">
|
|
460
519
|
<div class="table__box-shadow-preview"
|
|
461
|
-
style="box-shadow:
|
|
520
|
+
style="box-shadow: ">
|
|
462
521
|
</div>
|
|
463
522
|
</td>
|
|
464
523
|
</tr>
|
|
@@ -475,16 +534,27 @@
|
|
|
475
534
|
</td>
|
|
476
535
|
<td class="table__cell">
|
|
477
536
|
<pre>{
|
|
478
|
-
"
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
537
|
+
"0": {
|
|
538
|
+
"x": "0",
|
|
539
|
+
"y": "10",
|
|
540
|
+
"blur": "30",
|
|
541
|
+
"spread": "0",
|
|
542
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
543
|
+
"type": "dropShadow"
|
|
544
|
+
},
|
|
545
|
+
"1": {
|
|
546
|
+
"x": "0",
|
|
547
|
+
"y": "30",
|
|
548
|
+
"blur": "60",
|
|
549
|
+
"spread": "0",
|
|
550
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
551
|
+
"type": "dropShadow"
|
|
552
|
+
}
|
|
483
553
|
}</pre>
|
|
484
554
|
</td>
|
|
485
555
|
<td class="table__cell">
|
|
486
556
|
<div class="table__box-shadow-preview"
|
|
487
|
-
style="box-shadow:
|
|
557
|
+
style="box-shadow: ">
|
|
488
558
|
</div>
|
|
489
559
|
</td>
|
|
490
560
|
</tr>
|
|
@@ -501,16 +571,27 @@
|
|
|
501
571
|
</td>
|
|
502
572
|
<td class="table__cell">
|
|
503
573
|
<pre>{
|
|
504
|
-
"
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
574
|
+
"0": {
|
|
575
|
+
"x": "0",
|
|
576
|
+
"y": "10",
|
|
577
|
+
"blur": "40",
|
|
578
|
+
"spread": "0",
|
|
579
|
+
"color": "rgba($colors.utility.major.800, 0.04)",
|
|
580
|
+
"type": "dropShadow"
|
|
581
|
+
},
|
|
582
|
+
"1": {
|
|
583
|
+
"x": "0",
|
|
584
|
+
"y": "50",
|
|
585
|
+
"blur": "80",
|
|
586
|
+
"spread": "0",
|
|
587
|
+
"color": "rgba($colors.utility.major.800, 0.1)",
|
|
588
|
+
"type": "dropShadow"
|
|
589
|
+
}
|
|
509
590
|
}</pre>
|
|
510
591
|
</td>
|
|
511
592
|
<td class="table__cell">
|
|
512
593
|
<div class="table__box-shadow-preview"
|
|
513
|
-
style="box-shadow:
|
|
594
|
+
style="box-shadow: ">
|
|
514
595
|
</div>
|
|
515
596
|
</td>
|
|
516
597
|
</tr>
|
|
@@ -2456,6 +2537,26 @@
|
|
|
2456
2537
|
<td class="table__cell">
|
|
2457
2538
|
<div class="table__color-preview"
|
|
2458
2539
|
style="background-color: rgba(0,0,0,0.9);">
|
|
2540
|
+
</div>
|
|
2541
|
+
</td>
|
|
2542
|
+
</tr>
|
|
2543
|
+
<tr class="table__row">
|
|
2544
|
+
<td class="table__cell with-icons"
|
|
2545
|
+
id="base-colors-colorsTest100"
|
|
2546
|
+
title="theme: base; category: colors; name: test; variant: 100; ">
|
|
2547
|
+
colorsTest100
|
|
2548
|
+
<a href="#base-colors-colorsTest100"
|
|
2549
|
+
title="permalink"
|
|
2550
|
+
class="permalink">
|
|
2551
|
+
🔗
|
|
2552
|
+
</a>
|
|
2553
|
+
</td>
|
|
2554
|
+
<td class="table__cell">
|
|
2555
|
+
<pre>#123456</pre>
|
|
2556
|
+
</td>
|
|
2557
|
+
<td class="table__cell">
|
|
2558
|
+
<div class="table__color-preview"
|
|
2559
|
+
style="background-color: #123456;">
|
|
2459
2560
|
</div>
|
|
2460
2561
|
</td>
|
|
2461
2562
|
</tr>
|
package/js/base/common.d.ts
CHANGED
|
@@ -127,6 +127,7 @@ export const colorsSemanticInfoYin055: string;
|
|
|
127
127
|
export const colorsSemanticInfoYin065: string;
|
|
128
128
|
export const colorsSemanticInfoYin090: string;
|
|
129
129
|
export const colorsSemanticInfoYang100: string;
|
|
130
|
+
export const colorsTest100: string;
|
|
130
131
|
export const sizing100: string;
|
|
131
132
|
export const sizing125: string;
|
|
132
133
|
export const sizing150: string;
|
|
@@ -182,49 +183,96 @@ export const fontSizes1000: string;
|
|
|
182
183
|
export const fontSizes010: string;
|
|
183
184
|
export const fontSizes025: string;
|
|
184
185
|
export const fontSizes050: string;
|
|
185
|
-
export
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
186
|
+
export const boxShadow100: {
|
|
187
|
+
"0": {
|
|
188
|
+
x: string;
|
|
189
|
+
y: string;
|
|
190
|
+
blur: string;
|
|
191
|
+
spread: string;
|
|
192
|
+
color: string;
|
|
193
|
+
type: string;
|
|
194
|
+
};
|
|
195
|
+
"1": {
|
|
196
|
+
x: string;
|
|
197
|
+
y: string;
|
|
198
|
+
blur: string;
|
|
199
|
+
spread: string;
|
|
200
|
+
color: string;
|
|
201
|
+
type: string;
|
|
202
|
+
};
|
|
203
|
+
};
|
|
204
|
+
export const boxShadow200: {
|
|
205
|
+
"0": {
|
|
206
|
+
x: string;
|
|
207
|
+
y: string;
|
|
208
|
+
blur: string;
|
|
209
|
+
spread: string;
|
|
210
|
+
color: string;
|
|
211
|
+
type: string;
|
|
212
|
+
};
|
|
213
|
+
"1": {
|
|
214
|
+
x: string;
|
|
215
|
+
y: string;
|
|
216
|
+
blur: string;
|
|
217
|
+
spread: string;
|
|
218
|
+
color: string;
|
|
219
|
+
type: string;
|
|
220
|
+
};
|
|
221
|
+
};
|
|
222
|
+
export const boxShadow300: {
|
|
223
|
+
"0": {
|
|
224
|
+
x: string;
|
|
225
|
+
y: string;
|
|
226
|
+
blur: string;
|
|
227
|
+
spread: string;
|
|
228
|
+
color: string;
|
|
229
|
+
type: string;
|
|
230
|
+
};
|
|
231
|
+
"1": {
|
|
232
|
+
x: string;
|
|
233
|
+
y: string;
|
|
234
|
+
blur: string;
|
|
235
|
+
spread: string;
|
|
236
|
+
color: string;
|
|
237
|
+
type: string;
|
|
238
|
+
};
|
|
239
|
+
};
|
|
240
|
+
export const boxShadow400: {
|
|
241
|
+
"0": {
|
|
242
|
+
x: string;
|
|
243
|
+
y: string;
|
|
244
|
+
blur: string;
|
|
245
|
+
spread: string;
|
|
246
|
+
color: string;
|
|
247
|
+
type: string;
|
|
248
|
+
};
|
|
249
|
+
"1": {
|
|
250
|
+
x: string;
|
|
251
|
+
y: string;
|
|
252
|
+
blur: string;
|
|
253
|
+
spread: string;
|
|
254
|
+
color: string;
|
|
255
|
+
type: string;
|
|
256
|
+
};
|
|
257
|
+
};
|
|
258
|
+
export const boxShadow050: {
|
|
259
|
+
"0": {
|
|
260
|
+
x: string;
|
|
261
|
+
y: string;
|
|
262
|
+
blur: string;
|
|
263
|
+
spread: string;
|
|
264
|
+
color: string;
|
|
265
|
+
type: string;
|
|
266
|
+
};
|
|
267
|
+
"1": {
|
|
268
|
+
x: string;
|
|
269
|
+
y: string;
|
|
270
|
+
blur: string;
|
|
271
|
+
spread: string;
|
|
272
|
+
color: string;
|
|
273
|
+
type: string;
|
|
274
|
+
};
|
|
275
|
+
};
|
|
228
276
|
export const fontWeights400: string;
|
|
229
277
|
export const fontWeights500: string;
|
|
230
278
|
export const fontWeights700: string;
|
package/js/base/common.js
CHANGED
|
@@ -3,7 +3,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
3
3
|
*/
|
|
4
4
|
/**
|
|
5
5
|
* Do not edit directly
|
|
6
|
-
* Generated on
|
|
6
|
+
* Generated on Tue, 30 Nov 2021 14:50:31 GMT
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
module.exports = {
|
|
@@ -133,6 +133,7 @@ module.exports = {
|
|
|
133
133
|
colorsSemanticInfoYin065: 'rgba(0,0,0,0.65)',
|
|
134
134
|
colorsSemanticInfoYin090: 'rgba(0,0,0,0.9)',
|
|
135
135
|
colorsSemanticInfoYang100: 'rgba(255,255,255,1)',
|
|
136
|
+
colorsTest100: '#123456',
|
|
136
137
|
sizing100: '8px',
|
|
137
138
|
sizing125: '10px',
|
|
138
139
|
sizing150: '12px',
|
|
@@ -188,10 +189,11 @@ module.exports = {
|
|
|
188
189
|
fontSizes010: '10px',
|
|
189
190
|
fontSizes025: '12px',
|
|
190
191
|
fontSizes050: '13px',
|
|
191
|
-
boxShadow100: { x: '0', y: '
|
|
192
|
-
boxShadow200: { x: '0', y: '
|
|
193
|
-
boxShadow300: { x: '0', y: '
|
|
194
|
-
boxShadow400: { x: '0', y: '
|
|
192
|
+
boxShadow100: { 0: { x: '0', y: '5', blur: '5', spread: '0', color: 'rgba($colors.utility.major.800, 0.2)', type: 'dropShadow' }, 1: { x: '0', y: '10', blur: '10', spread: '0', color: 'rgba($colors.utility.major.800, 0.1)', type: 'dropShadow' } },
|
|
193
|
+
boxShadow200: { 0: { x: '0', y: '10', blur: '20', spread: '0', color: 'rgba($colors.utility.major.800, 0.2)', type: 'dropShadow' }, 1: { x: '0', y: '20', blur: '40', spread: '0', color: 'rgba($colors.utility.major.800, 0.1)', type: 'dropShadow' } },
|
|
194
|
+
boxShadow300: { 0: { x: '0', y: '10', blur: '30', spread: '0', color: 'rgba($colors.utility.major.800, 0.1)', type: 'dropShadow' }, 1: { x: '0', y: '30', blur: '60', spread: '0', color: 'rgba($colors.utility.major.800, 0.1)', type: 'dropShadow' } },
|
|
195
|
+
boxShadow400: { 0: { x: '0', y: '10', blur: '40', spread: '0', color: 'rgba($colors.utility.major.800, 0.04)', type: 'dropShadow' }, 1: { x: '0', y: '50', blur: '80', spread: '0', color: 'rgba($colors.utility.major.800, 0.1)', type: 'dropShadow' } },
|
|
196
|
+
boxShadow050: { 0: { x: '0', y: '3', blur: '3', spread: '0', color: 'rgba($colors.utility.major.800, 0.2)', type: 'dropShadow' }, 1: { x: '0', y: '2', blur: '4', spread: '0', color: 'rgba($colors.utility.major.800, 0.15)', type: 'dropShadow' } },
|
|
195
197
|
fontWeights400: 'Regular',
|
|
196
198
|
fontWeights500: 'Medium',
|
|
197
199
|
fontWeights700: 'Bold',
|
package/js/base/es6.d.ts
CHANGED
|
@@ -128,6 +128,7 @@ declare namespace _default {
|
|
|
128
128
|
const colorsSemanticInfoYin065: string;
|
|
129
129
|
const colorsSemanticInfoYin090: string;
|
|
130
130
|
const colorsSemanticInfoYang100: string;
|
|
131
|
+
const colorsTest100: string;
|
|
131
132
|
const sizing100: string;
|
|
132
133
|
const sizing125: string;
|
|
133
134
|
const sizing150: string;
|
|
@@ -183,49 +184,96 @@ declare namespace _default {
|
|
|
183
184
|
const fontSizes010: string;
|
|
184
185
|
const fontSizes025: string;
|
|
185
186
|
const fontSizes050: string;
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
187
|
+
const boxShadow100: {
|
|
188
|
+
"0": {
|
|
189
|
+
x: string;
|
|
190
|
+
y: string;
|
|
191
|
+
blur: string;
|
|
192
|
+
spread: string;
|
|
193
|
+
color: string;
|
|
194
|
+
type: string;
|
|
195
|
+
};
|
|
196
|
+
"1": {
|
|
197
|
+
x: string;
|
|
198
|
+
y: string;
|
|
199
|
+
blur: string;
|
|
200
|
+
spread: string;
|
|
201
|
+
color: string;
|
|
202
|
+
type: string;
|
|
203
|
+
};
|
|
204
|
+
};
|
|
205
|
+
const boxShadow200: {
|
|
206
|
+
"0": {
|
|
207
|
+
x: string;
|
|
208
|
+
y: string;
|
|
209
|
+
blur: string;
|
|
210
|
+
spread: string;
|
|
211
|
+
color: string;
|
|
212
|
+
type: string;
|
|
213
|
+
};
|
|
214
|
+
"1": {
|
|
215
|
+
x: string;
|
|
216
|
+
y: string;
|
|
217
|
+
blur: string;
|
|
218
|
+
spread: string;
|
|
219
|
+
color: string;
|
|
220
|
+
type: string;
|
|
221
|
+
};
|
|
222
|
+
};
|
|
223
|
+
const boxShadow300: {
|
|
224
|
+
"0": {
|
|
225
|
+
x: string;
|
|
226
|
+
y: string;
|
|
227
|
+
blur: string;
|
|
228
|
+
spread: string;
|
|
229
|
+
color: string;
|
|
230
|
+
type: string;
|
|
231
|
+
};
|
|
232
|
+
"1": {
|
|
233
|
+
x: string;
|
|
234
|
+
y: string;
|
|
235
|
+
blur: string;
|
|
236
|
+
spread: string;
|
|
237
|
+
color: string;
|
|
238
|
+
type: string;
|
|
239
|
+
};
|
|
240
|
+
};
|
|
241
|
+
const boxShadow400: {
|
|
242
|
+
"0": {
|
|
243
|
+
x: string;
|
|
244
|
+
y: string;
|
|
245
|
+
blur: string;
|
|
246
|
+
spread: string;
|
|
247
|
+
color: string;
|
|
248
|
+
type: string;
|
|
249
|
+
};
|
|
250
|
+
"1": {
|
|
251
|
+
x: string;
|
|
252
|
+
y: string;
|
|
253
|
+
blur: string;
|
|
254
|
+
spread: string;
|
|
255
|
+
color: string;
|
|
256
|
+
type: string;
|
|
257
|
+
};
|
|
258
|
+
};
|
|
259
|
+
const boxShadow050: {
|
|
260
|
+
"0": {
|
|
261
|
+
x: string;
|
|
262
|
+
y: string;
|
|
263
|
+
blur: string;
|
|
264
|
+
spread: string;
|
|
265
|
+
color: string;
|
|
266
|
+
type: string;
|
|
267
|
+
};
|
|
268
|
+
"1": {
|
|
269
|
+
x: string;
|
|
270
|
+
y: string;
|
|
271
|
+
blur: string;
|
|
272
|
+
spread: string;
|
|
273
|
+
color: string;
|
|
274
|
+
type: string;
|
|
275
|
+
};
|
|
276
|
+
};
|
|
229
277
|
const fontWeights400: string;
|
|
230
278
|
const fontWeights500: string;
|
|
231
279
|
const fontWeights700: string;
|
package/js/base/es6.js
CHANGED
|
@@ -128,6 +128,7 @@ export default {
|
|
|
128
128
|
colorsSemanticInfoYin065: 'rgba(0,0,0,0.65)',
|
|
129
129
|
colorsSemanticInfoYin090: 'rgba(0,0,0,0.9)',
|
|
130
130
|
colorsSemanticInfoYang100: 'rgba(255,255,255,1)',
|
|
131
|
+
colorsTest100: '#123456',
|
|
131
132
|
sizing100: '8px',
|
|
132
133
|
sizing125: '10px',
|
|
133
134
|
sizing150: '12px',
|
|
@@ -184,32 +185,94 @@ export default {
|
|
|
184
185
|
fontSizes025: '12px',
|
|
185
186
|
fontSizes050: '13px',
|
|
186
187
|
boxShadow100: {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
188
|
+
0: {
|
|
189
|
+
x: '0',
|
|
190
|
+
y: '5',
|
|
191
|
+
blur: '5',
|
|
192
|
+
spread: '0',
|
|
193
|
+
color: 'rgba($colors.utility.major.800, 0.2)',
|
|
194
|
+
type: 'dropShadow'
|
|
195
|
+
},
|
|
196
|
+
1: {
|
|
197
|
+
x: '0',
|
|
198
|
+
y: '10',
|
|
199
|
+
blur: '10',
|
|
200
|
+
spread: '0',
|
|
201
|
+
color: 'rgba($colors.utility.major.800, 0.1)',
|
|
202
|
+
type: 'dropShadow'
|
|
203
|
+
}
|
|
192
204
|
},
|
|
193
205
|
boxShadow200: {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
206
|
+
0: {
|
|
207
|
+
x: '0',
|
|
208
|
+
y: '10',
|
|
209
|
+
blur: '20',
|
|
210
|
+
spread: '0',
|
|
211
|
+
color: 'rgba($colors.utility.major.800, 0.2)',
|
|
212
|
+
type: 'dropShadow'
|
|
213
|
+
},
|
|
214
|
+
1: {
|
|
215
|
+
x: '0',
|
|
216
|
+
y: '20',
|
|
217
|
+
blur: '40',
|
|
218
|
+
spread: '0',
|
|
219
|
+
color: 'rgba($colors.utility.major.800, 0.1)',
|
|
220
|
+
type: 'dropShadow'
|
|
221
|
+
}
|
|
199
222
|
},
|
|
200
223
|
boxShadow300: {
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
224
|
+
0: {
|
|
225
|
+
x: '0',
|
|
226
|
+
y: '10',
|
|
227
|
+
blur: '30',
|
|
228
|
+
spread: '0',
|
|
229
|
+
color: 'rgba($colors.utility.major.800, 0.1)',
|
|
230
|
+
type: 'dropShadow'
|
|
231
|
+
},
|
|
232
|
+
1: {
|
|
233
|
+
x: '0',
|
|
234
|
+
y: '30',
|
|
235
|
+
blur: '60',
|
|
236
|
+
spread: '0',
|
|
237
|
+
color: 'rgba($colors.utility.major.800, 0.1)',
|
|
238
|
+
type: 'dropShadow'
|
|
239
|
+
}
|
|
206
240
|
},
|
|
207
241
|
boxShadow400: {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
242
|
+
0: {
|
|
243
|
+
x: '0',
|
|
244
|
+
y: '10',
|
|
245
|
+
blur: '40',
|
|
246
|
+
spread: '0',
|
|
247
|
+
color: 'rgba($colors.utility.major.800, 0.04)',
|
|
248
|
+
type: 'dropShadow'
|
|
249
|
+
},
|
|
250
|
+
1: {
|
|
251
|
+
x: '0',
|
|
252
|
+
y: '50',
|
|
253
|
+
blur: '80',
|
|
254
|
+
spread: '0',
|
|
255
|
+
color: 'rgba($colors.utility.major.800, 0.1)',
|
|
256
|
+
type: 'dropShadow'
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
boxShadow050: {
|
|
260
|
+
0: {
|
|
261
|
+
x: '0',
|
|
262
|
+
y: '3',
|
|
263
|
+
blur: '3',
|
|
264
|
+
spread: '0',
|
|
265
|
+
color: 'rgba($colors.utility.major.800, 0.2)',
|
|
266
|
+
type: 'dropShadow'
|
|
267
|
+
},
|
|
268
|
+
1: {
|
|
269
|
+
x: '0',
|
|
270
|
+
y: '2',
|
|
271
|
+
blur: '4',
|
|
272
|
+
spread: '0',
|
|
273
|
+
color: 'rgba($colors.utility.major.800, 0.15)',
|
|
274
|
+
type: 'dropShadow'
|
|
275
|
+
}
|
|
213
276
|
},
|
|
214
277
|
fontWeights400: 'Regular',
|
|
215
278
|
fontWeights500: 'Medium',
|
package/js/no-theme/common.js
CHANGED
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
},
|
|
7
7
|
"description": "Design tokens for the Sage Design System.",
|
|
8
8
|
"author": "The Sage Group plc",
|
|
9
|
-
"version": "1.
|
|
9
|
+
"version": "1.82.0",
|
|
10
10
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
11
11
|
"tags": [
|
|
12
12
|
"design tokens",
|
|
Binary file
|
package/scss/base.scss
CHANGED
|
@@ -3,7 +3,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
// Do not edit directly
|
|
6
|
-
// Generated on
|
|
6
|
+
// Generated on Tue, 30 Nov 2021 14:50:31 GMT
|
|
7
7
|
|
|
8
8
|
$metaName: Base Theme;
|
|
9
9
|
$metaPublic: true;
|
|
@@ -131,6 +131,7 @@ $colorsSemanticInfoYin055: rgba(0,0,0,0.55);
|
|
|
131
131
|
$colorsSemanticInfoYin065: rgba(0,0,0,0.65);
|
|
132
132
|
$colorsSemanticInfoYin090: rgba(0,0,0,0.9);
|
|
133
133
|
$colorsSemanticInfoYang100: rgba(255,255,255,1);
|
|
134
|
+
$colorsTest100: #123456;
|
|
134
135
|
$sizing100: 8px;
|
|
135
136
|
$sizing125: 10px;
|
|
136
137
|
$sizing150: 12px;
|
|
@@ -186,10 +187,11 @@ $fontSizes1000: 64px;
|
|
|
186
187
|
$fontSizes010: 10px;
|
|
187
188
|
$fontSizes025: 12px;
|
|
188
189
|
$fontSizes050: 13px;
|
|
189
|
-
$boxShadow100:
|
|
190
|
-
$boxShadow200:
|
|
191
|
-
$boxShadow300:
|
|
192
|
-
$boxShadow400:
|
|
190
|
+
$boxShadow100: undefined undefined undefined undefined undefined;
|
|
191
|
+
$boxShadow200: undefined undefined undefined undefined undefined;
|
|
192
|
+
$boxShadow300: undefined undefined undefined undefined undefined;
|
|
193
|
+
$boxShadow400: undefined undefined undefined undefined undefined;
|
|
194
|
+
$boxShadow050: undefined undefined undefined undefined undefined;
|
|
193
195
|
$fontWeights400: Regular;
|
|
194
196
|
$fontWeights500: Medium;
|
|
195
197
|
$fontWeights700: Bold;
|
package/scss/no-theme.scss
CHANGED
|
Binary file
|