@sage/design-tokens 2.38.0 → 2.41.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/android/base.xml +12 -6
- package/css/base.css +12 -6
- package/data/tokens.json +48 -6
- package/docs/tokens/base/colors/index.html +8 -8
- package/docs/tokens/base/index.html +135 -9
- package/docs/tokens/base/spacing/index.html +84 -0
- package/docs/tokens/base/typography/index.html +43 -1
- package/docs/tokens/index.html +135 -9
- package/ios/base.h +12 -6
- package/js/base/common.d.ts +6 -0
- package/js/base/common.js +12 -6
- package/js/base/es6.d.ts +6 -0
- package/js/base/es6.js +11 -5
- package/package.json +1 -1
- package/sage-design-tokens-2.41.0.tgz +0 -0
- package/scss/base.scss +12 -6
- package/sage-design-tokens-2.38.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 Tue,
|
|
5
|
+
Generated on Tue, 06 Sep 2022 13:51:10 GMT
|
|
6
6
|
-->
|
|
7
7
|
<resources>
|
|
8
8
|
<string name="metaName">Base Theme</string>
|
|
@@ -91,10 +91,10 @@
|
|
|
91
91
|
<string name="colorsSemanticPositiveYin065">#000000a6</string>
|
|
92
92
|
<string name="colorsSemanticPositiveYin090">#000000e6</string>
|
|
93
93
|
<string name="colorsSemanticPositiveYang100">#ffffffff</string>
|
|
94
|
-
<string name="colorsSemanticNegative350">#
|
|
95
|
-
<string name="colorsSemanticNegative450">#
|
|
96
|
-
<string name="colorsSemanticNegative500">#
|
|
97
|
-
<string name="colorsSemanticNegative600">#
|
|
94
|
+
<string name="colorsSemanticNegative350">#db7380ff</string>
|
|
95
|
+
<string name="colorsSemanticNegative450">#d04b5cff</string>
|
|
96
|
+
<string name="colorsSemanticNegative500">#cb374aff</string>
|
|
97
|
+
<string name="colorsSemanticNegative600">#a22c3bff</string>
|
|
98
98
|
<string name="colorsSemanticNegativeTransparent">#00000000</string>
|
|
99
99
|
<string name="colorsSemanticNegativeYin030">#0000004d</string>
|
|
100
100
|
<string name="colorsSemanticNegativeYin055">#0000008c</string>
|
|
@@ -264,6 +264,10 @@
|
|
|
264
264
|
<string name="spacing050">4px</string>
|
|
265
265
|
<string name="spacing060">5px</string>
|
|
266
266
|
<string name="spacing075">6px</string>
|
|
267
|
+
<string name="spacingNeg010">-1px</string>
|
|
268
|
+
<string name="spacingNeg025">-2px</string>
|
|
269
|
+
<string name="spacingNeg050">-4px</string>
|
|
270
|
+
<string name="spacingNeg075">-6px</string>
|
|
267
271
|
<string name="borderWidth100">1px</string>
|
|
268
272
|
<string name="borderWidth200">2px</string>
|
|
269
273
|
<string name="borderWidth300">3px</string>
|
|
@@ -306,7 +310,7 @@
|
|
|
306
310
|
<string name="typographyAccordionTitleM">Bold 20px/125% Sage UI</string>
|
|
307
311
|
<string name="typographyAccordionSubtitleM">Regular 14px/150% Sage UI</string>
|
|
308
312
|
<string name="typographyAccordionParagraphM">Regular 14px/150% Sage UI</string>
|
|
309
|
-
<string name="typographyActionPopoverMenuItemM">
|
|
313
|
+
<string name="typographyActionPopoverMenuItemM">Medium 14px/150% Sage UI</string>
|
|
310
314
|
<string name="typographyAnchorNavLabelM">Medium 14px/150% Sage UI</string>
|
|
311
315
|
<string name="typographyBadgeLabelM">Medium 12px/150% Sage UI</string>
|
|
312
316
|
<string name="typographyButtonLabelS">Medium 14px/150% Sage UI</string>
|
|
@@ -316,6 +320,7 @@
|
|
|
316
320
|
<string name="typographyCardSelectTitleM">Bold 16px/150% Sage UI</string>
|
|
317
321
|
<string name="typographyCardSelectSubtitleM">Medium 14px/150% Sage UI</string>
|
|
318
322
|
<string name="typographyCardSelectParagraphM">Regular 14px/150% Sage UI</string>
|
|
323
|
+
<string name="typographyCardSelectFooterM">Regular 14px/150% Sage UI</string>
|
|
319
324
|
<string name="typographyDatePickerCalendarDateM">Medium 14px/150% Sage UI</string>
|
|
320
325
|
<string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
|
|
321
326
|
<string name="typographyDatePickerCalendarMonthM">Bold 16px/125% Sage UI</string>
|
|
@@ -327,6 +332,7 @@
|
|
|
327
332
|
<string name="typographyDialogTitleL">Bold 24px/125% Sage UI</string>
|
|
328
333
|
<string name="typographyDialogTitleXl">Bold 24px/125% Sage UI</string>
|
|
329
334
|
<string name="typographyDialogTitleXxl">Bold 24px/125% Sage UI</string>
|
|
335
|
+
<string name="typographyDialogSubtitle">Regular 16px/150% Sage UI</string>
|
|
330
336
|
<string name="typographyDialogParagraphXs">Regular 14px/150% Sage UI</string>
|
|
331
337
|
<string name="typographyDialogParagraphS">Regular 14px/150% Sage UI</string>
|
|
332
338
|
<string name="typographyDialogParagraphMs">Regular 14px/150% Sage UI</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 Tue,
|
|
7
|
+
* Generated on Tue, 06 Sep 2022 13:51:10 GMT
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
:root {
|
|
@@ -94,10 +94,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
94
94
|
--colorsSemanticPositiveYin065: #000000a6;
|
|
95
95
|
--colorsSemanticPositiveYin090: #000000e6;
|
|
96
96
|
--colorsSemanticPositiveYang100: #ffffffff;
|
|
97
|
-
--colorsSemanticNegative350: #
|
|
98
|
-
--colorsSemanticNegative450: #
|
|
99
|
-
--colorsSemanticNegative500: #
|
|
100
|
-
--colorsSemanticNegative600: #
|
|
97
|
+
--colorsSemanticNegative350: #db7380ff;
|
|
98
|
+
--colorsSemanticNegative450: #d04b5cff;
|
|
99
|
+
--colorsSemanticNegative500: #cb374aff;
|
|
100
|
+
--colorsSemanticNegative600: #a22c3bff;
|
|
101
101
|
--colorsSemanticNegativeTransparent: #00000000;
|
|
102
102
|
--colorsSemanticNegativeYin030: #0000004d;
|
|
103
103
|
--colorsSemanticNegativeYin055: #0000008c;
|
|
@@ -267,6 +267,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
267
267
|
--spacing050: 4px;
|
|
268
268
|
--spacing060: 5px;
|
|
269
269
|
--spacing075: 6px;
|
|
270
|
+
--spacingNeg010: -1px;
|
|
271
|
+
--spacingNeg025: -2px;
|
|
272
|
+
--spacingNeg050: -4px;
|
|
273
|
+
--spacingNeg075: -6px;
|
|
270
274
|
--borderWidth100: 1px;
|
|
271
275
|
--borderWidth200: 2px;
|
|
272
276
|
--borderWidth300: 3px;
|
|
@@ -309,7 +313,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
309
313
|
--typographyAccordionTitleM: 700 20px/125% Sage UI;
|
|
310
314
|
--typographyAccordionSubtitleM: 400 14px/150% Sage UI;
|
|
311
315
|
--typographyAccordionParagraphM: 400 14px/150% Sage UI;
|
|
312
|
-
--typographyActionPopoverMenuItemM:
|
|
316
|
+
--typographyActionPopoverMenuItemM: 500 14px/150% Sage UI;
|
|
313
317
|
--typographyAnchorNavLabelM: 500 14px/150% Sage UI;
|
|
314
318
|
--typographyBadgeLabelM: 500 12px/150% Sage UI;
|
|
315
319
|
--typographyButtonLabelS: 500 14px/150% Sage UI;
|
|
@@ -319,6 +323,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
319
323
|
--typographyCardSelectTitleM: 700 16px/150% Sage UI;
|
|
320
324
|
--typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
|
|
321
325
|
--typographyCardSelectParagraphM: 400 14px/150% Sage UI;
|
|
326
|
+
--typographyCardSelectFooterM: 400 14px/150% Sage UI;
|
|
322
327
|
--typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
|
|
323
328
|
--typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
|
|
324
329
|
--typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
|
|
@@ -330,6 +335,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
|
|
|
330
335
|
--typographyDialogTitleL: 700 24px/125% Sage UI;
|
|
331
336
|
--typographyDialogTitleXl: 700 24px/125% Sage UI;
|
|
332
337
|
--typographyDialogTitleXxl: 700 24px/125% Sage UI;
|
|
338
|
+
--typographyDialogSubtitle: 400 16px/150% Sage UI;
|
|
333
339
|
--typographyDialogParagraphXs: 400 14px/150% Sage UI;
|
|
334
340
|
--typographyDialogParagraphS: 400 14px/150% Sage UI;
|
|
335
341
|
--typographyDialogParagraphMs: 400 14px/150% Sage UI;
|
package/data/tokens.json
CHANGED
|
@@ -432,19 +432,19 @@
|
|
|
432
432
|
},
|
|
433
433
|
"negative": {
|
|
434
434
|
"350": {
|
|
435
|
-
"value": "#
|
|
435
|
+
"value": "#db7380ff",
|
|
436
436
|
"type": "color"
|
|
437
437
|
},
|
|
438
438
|
"450": {
|
|
439
|
-
"value": "#
|
|
439
|
+
"value": "#d04b5cff",
|
|
440
440
|
"type": "color"
|
|
441
441
|
},
|
|
442
442
|
"500": {
|
|
443
|
-
"value": "#
|
|
443
|
+
"value": "#cb374aff",
|
|
444
444
|
"type": "color"
|
|
445
445
|
},
|
|
446
446
|
"600": {
|
|
447
|
-
"value": "#
|
|
447
|
+
"value": "#a22c3bff",
|
|
448
448
|
"type": "color"
|
|
449
449
|
},
|
|
450
450
|
"transparent": {
|
|
@@ -1273,6 +1273,22 @@
|
|
|
1273
1273
|
"075": {
|
|
1274
1274
|
"value": "6px",
|
|
1275
1275
|
"type": "spacing"
|
|
1276
|
+
},
|
|
1277
|
+
"neg010": {
|
|
1278
|
+
"value": "-1px",
|
|
1279
|
+
"type": "spacing"
|
|
1280
|
+
},
|
|
1281
|
+
"neg025": {
|
|
1282
|
+
"value": "-2px",
|
|
1283
|
+
"type": "spacing"
|
|
1284
|
+
},
|
|
1285
|
+
"neg050": {
|
|
1286
|
+
"value": "-4px",
|
|
1287
|
+
"type": "spacing"
|
|
1288
|
+
},
|
|
1289
|
+
"neg075": {
|
|
1290
|
+
"value": "-6px",
|
|
1291
|
+
"type": "spacing"
|
|
1276
1292
|
}
|
|
1277
1293
|
},
|
|
1278
1294
|
"borderWidth": {
|
|
@@ -1624,7 +1640,7 @@
|
|
|
1624
1640
|
"m": {
|
|
1625
1641
|
"value": {
|
|
1626
1642
|
"fontFamily": "Sage UI",
|
|
1627
|
-
"fontWeight": "
|
|
1643
|
+
"fontWeight": "Medium",
|
|
1628
1644
|
"lineHeight": "150%",
|
|
1629
1645
|
"fontSize": "14px",
|
|
1630
1646
|
"letterSpacing": "0%",
|
|
@@ -1775,6 +1791,21 @@
|
|
|
1775
1791
|
},
|
|
1776
1792
|
"type": "typography"
|
|
1777
1793
|
}
|
|
1794
|
+
},
|
|
1795
|
+
"footer": {
|
|
1796
|
+
"m": {
|
|
1797
|
+
"value": {
|
|
1798
|
+
"fontFamily": "Sage UI",
|
|
1799
|
+
"fontWeight": "Regular",
|
|
1800
|
+
"lineHeight": "150%",
|
|
1801
|
+
"fontSize": "14px",
|
|
1802
|
+
"letterSpacing": "0%",
|
|
1803
|
+
"paragraphSpacing": "0",
|
|
1804
|
+
"textDecoration": "none",
|
|
1805
|
+
"textCase": "none"
|
|
1806
|
+
},
|
|
1807
|
+
"type": "typography"
|
|
1808
|
+
}
|
|
1778
1809
|
}
|
|
1779
1810
|
},
|
|
1780
1811
|
"datePicker": {
|
|
@@ -1917,6 +1948,17 @@
|
|
|
1917
1948
|
"type": "typography"
|
|
1918
1949
|
}
|
|
1919
1950
|
},
|
|
1951
|
+
"subtitle": {
|
|
1952
|
+
"value": {
|
|
1953
|
+
"fontFamily": "Sage UI",
|
|
1954
|
+
"fontWeight": "Regular",
|
|
1955
|
+
"lineHeight": "150%",
|
|
1956
|
+
"fontSize": "16px",
|
|
1957
|
+
"letterSpacing": "0%",
|
|
1958
|
+
"paragraphSpacing": "0px"
|
|
1959
|
+
},
|
|
1960
|
+
"type": "typography"
|
|
1961
|
+
},
|
|
1920
1962
|
"paragraph": {
|
|
1921
1963
|
"xs": {
|
|
1922
1964
|
"value": {
|
|
@@ -2468,7 +2510,7 @@
|
|
|
2468
2510
|
"textCase": "none"
|
|
2469
2511
|
},
|
|
2470
2512
|
"type": "typography",
|
|
2471
|
-
"description": "
|
|
2513
|
+
"description": "Small font size, not recommended for use, as not accessible"
|
|
2472
2514
|
},
|
|
2473
2515
|
"m": {
|
|
2474
2516
|
"value": {
|
|
@@ -2061,11 +2061,11 @@
|
|
|
2061
2061
|
</a>
|
|
2062
2062
|
</td>
|
|
2063
2063
|
<td class="is-vcentered">
|
|
2064
|
-
<pre>#
|
|
2064
|
+
<pre>#db7380ff</pre>
|
|
2065
2065
|
</td>
|
|
2066
2066
|
<td class="is-vcentered">
|
|
2067
2067
|
<div class="table__color-preview"
|
|
2068
|
-
style="background-color: #
|
|
2068
|
+
style="background-color: #db7380ff;">
|
|
2069
2069
|
</div>
|
|
2070
2070
|
|
|
2071
2071
|
</td>
|
|
@@ -2082,11 +2082,11 @@
|
|
|
2082
2082
|
</a>
|
|
2083
2083
|
</td>
|
|
2084
2084
|
<td class="is-vcentered">
|
|
2085
|
-
<pre>#
|
|
2085
|
+
<pre>#d04b5cff</pre>
|
|
2086
2086
|
</td>
|
|
2087
2087
|
<td class="is-vcentered">
|
|
2088
2088
|
<div class="table__color-preview"
|
|
2089
|
-
style="background-color: #
|
|
2089
|
+
style="background-color: #d04b5cff;">
|
|
2090
2090
|
</div>
|
|
2091
2091
|
|
|
2092
2092
|
</td>
|
|
@@ -2103,11 +2103,11 @@
|
|
|
2103
2103
|
</a>
|
|
2104
2104
|
</td>
|
|
2105
2105
|
<td class="is-vcentered">
|
|
2106
|
-
<pre>#
|
|
2106
|
+
<pre>#cb374aff</pre>
|
|
2107
2107
|
</td>
|
|
2108
2108
|
<td class="is-vcentered">
|
|
2109
2109
|
<div class="table__color-preview"
|
|
2110
|
-
style="background-color: #
|
|
2110
|
+
style="background-color: #cb374aff;">
|
|
2111
2111
|
</div>
|
|
2112
2112
|
|
|
2113
2113
|
</td>
|
|
@@ -2124,11 +2124,11 @@
|
|
|
2124
2124
|
</a>
|
|
2125
2125
|
</td>
|
|
2126
2126
|
<td class="is-vcentered">
|
|
2127
|
-
<pre>#
|
|
2127
|
+
<pre>#a22c3bff</pre>
|
|
2128
2128
|
</td>
|
|
2129
2129
|
<td class="is-vcentered">
|
|
2130
2130
|
<div class="table__color-preview"
|
|
2131
|
-
style="background-color: #
|
|
2131
|
+
style="background-color: #a22c3bff;">
|
|
2132
2132
|
</div>
|
|
2133
2133
|
|
|
2134
2134
|
</td>
|
|
@@ -2057,11 +2057,11 @@
|
|
|
2057
2057
|
</a>
|
|
2058
2058
|
</td>
|
|
2059
2059
|
<td class="is-vcentered">
|
|
2060
|
-
<pre>#
|
|
2060
|
+
<pre>#db7380ff</pre>
|
|
2061
2061
|
</td>
|
|
2062
2062
|
<td class="is-vcentered">
|
|
2063
2063
|
<div class="table__color-preview"
|
|
2064
|
-
style="background-color: #
|
|
2064
|
+
style="background-color: #db7380ff;">
|
|
2065
2065
|
</div>
|
|
2066
2066
|
|
|
2067
2067
|
</td>
|
|
@@ -2078,11 +2078,11 @@
|
|
|
2078
2078
|
</a>
|
|
2079
2079
|
</td>
|
|
2080
2080
|
<td class="is-vcentered">
|
|
2081
|
-
<pre>#
|
|
2081
|
+
<pre>#d04b5cff</pre>
|
|
2082
2082
|
</td>
|
|
2083
2083
|
<td class="is-vcentered">
|
|
2084
2084
|
<div class="table__color-preview"
|
|
2085
|
-
style="background-color: #
|
|
2085
|
+
style="background-color: #d04b5cff;">
|
|
2086
2086
|
</div>
|
|
2087
2087
|
|
|
2088
2088
|
</td>
|
|
@@ -2099,11 +2099,11 @@
|
|
|
2099
2099
|
</a>
|
|
2100
2100
|
</td>
|
|
2101
2101
|
<td class="is-vcentered">
|
|
2102
|
-
<pre>#
|
|
2102
|
+
<pre>#cb374aff</pre>
|
|
2103
2103
|
</td>
|
|
2104
2104
|
<td class="is-vcentered">
|
|
2105
2105
|
<div class="table__color-preview"
|
|
2106
|
-
style="background-color: #
|
|
2106
|
+
style="background-color: #cb374aff;">
|
|
2107
2107
|
</div>
|
|
2108
2108
|
|
|
2109
2109
|
</td>
|
|
@@ -2120,11 +2120,11 @@
|
|
|
2120
2120
|
</a>
|
|
2121
2121
|
</td>
|
|
2122
2122
|
<td class="is-vcentered">
|
|
2123
|
-
<pre>#
|
|
2123
|
+
<pre>#a22c3bff</pre>
|
|
2124
2124
|
</td>
|
|
2125
2125
|
<td class="is-vcentered">
|
|
2126
2126
|
<div class="table__color-preview"
|
|
2127
|
-
style="background-color: #
|
|
2127
|
+
style="background-color: #a22c3bff;">
|
|
2128
2128
|
</div>
|
|
2129
2129
|
|
|
2130
2130
|
</td>
|
|
@@ -5710,6 +5710,90 @@
|
|
|
5710
5710
|
style="width: 6px">
|
|
5711
5711
|
</div>
|
|
5712
5712
|
|
|
5713
|
+
</td>
|
|
5714
|
+
</tr>
|
|
5715
|
+
<tr>
|
|
5716
|
+
<td class="with-icons is-vcentered"
|
|
5717
|
+
id="base-spacingNeg010"
|
|
5718
|
+
title="theme: base; category: spacing; variant: neg010; ">
|
|
5719
|
+
spacingNeg010
|
|
5720
|
+
<a href="#base-spacingNeg010"
|
|
5721
|
+
title="permalink"
|
|
5722
|
+
class="permalink">
|
|
5723
|
+
🔗
|
|
5724
|
+
</a>
|
|
5725
|
+
</td>
|
|
5726
|
+
<td class="is-vcentered">
|
|
5727
|
+
<pre>-1px</pre>
|
|
5728
|
+
</td>
|
|
5729
|
+
<td class="is-vcentered">
|
|
5730
|
+
<div class="table__spacing-preview"
|
|
5731
|
+
style="width: -1px">
|
|
5732
|
+
</div>
|
|
5733
|
+
|
|
5734
|
+
</td>
|
|
5735
|
+
</tr>
|
|
5736
|
+
<tr>
|
|
5737
|
+
<td class="with-icons is-vcentered"
|
|
5738
|
+
id="base-spacingNeg025"
|
|
5739
|
+
title="theme: base; category: spacing; variant: neg025; ">
|
|
5740
|
+
spacingNeg025
|
|
5741
|
+
<a href="#base-spacingNeg025"
|
|
5742
|
+
title="permalink"
|
|
5743
|
+
class="permalink">
|
|
5744
|
+
🔗
|
|
5745
|
+
</a>
|
|
5746
|
+
</td>
|
|
5747
|
+
<td class="is-vcentered">
|
|
5748
|
+
<pre>-2px</pre>
|
|
5749
|
+
</td>
|
|
5750
|
+
<td class="is-vcentered">
|
|
5751
|
+
<div class="table__spacing-preview"
|
|
5752
|
+
style="width: -2px">
|
|
5753
|
+
</div>
|
|
5754
|
+
|
|
5755
|
+
</td>
|
|
5756
|
+
</tr>
|
|
5757
|
+
<tr>
|
|
5758
|
+
<td class="with-icons is-vcentered"
|
|
5759
|
+
id="base-spacingNeg050"
|
|
5760
|
+
title="theme: base; category: spacing; variant: neg050; ">
|
|
5761
|
+
spacingNeg050
|
|
5762
|
+
<a href="#base-spacingNeg050"
|
|
5763
|
+
title="permalink"
|
|
5764
|
+
class="permalink">
|
|
5765
|
+
🔗
|
|
5766
|
+
</a>
|
|
5767
|
+
</td>
|
|
5768
|
+
<td class="is-vcentered">
|
|
5769
|
+
<pre>-4px</pre>
|
|
5770
|
+
</td>
|
|
5771
|
+
<td class="is-vcentered">
|
|
5772
|
+
<div class="table__spacing-preview"
|
|
5773
|
+
style="width: -4px">
|
|
5774
|
+
</div>
|
|
5775
|
+
|
|
5776
|
+
</td>
|
|
5777
|
+
</tr>
|
|
5778
|
+
<tr>
|
|
5779
|
+
<td class="with-icons is-vcentered"
|
|
5780
|
+
id="base-spacingNeg075"
|
|
5781
|
+
title="theme: base; category: spacing; variant: neg075; ">
|
|
5782
|
+
spacingNeg075
|
|
5783
|
+
<a href="#base-spacingNeg075"
|
|
5784
|
+
title="permalink"
|
|
5785
|
+
class="permalink">
|
|
5786
|
+
🔗
|
|
5787
|
+
</a>
|
|
5788
|
+
</td>
|
|
5789
|
+
<td class="is-vcentered">
|
|
5790
|
+
<pre>-6px</pre>
|
|
5791
|
+
</td>
|
|
5792
|
+
<td class="is-vcentered">
|
|
5793
|
+
<div class="table__spacing-preview"
|
|
5794
|
+
style="width: -6px">
|
|
5795
|
+
</div>
|
|
5796
|
+
|
|
5713
5797
|
</td>
|
|
5714
5798
|
</tr>
|
|
5715
5799
|
</table>
|
|
@@ -6755,7 +6839,7 @@
|
|
|
6755
6839
|
</a>
|
|
6756
6840
|
</td>
|
|
6757
6841
|
<td class="is-vcentered">
|
|
6758
|
-
<pre>
|
|
6842
|
+
<pre>500 14px/150% Sage UI</pre>
|
|
6759
6843
|
</td>
|
|
6760
6844
|
<td class="is-vcentered">
|
|
6761
6845
|
<div class="table__typography-preview">
|
|
@@ -6953,6 +7037,27 @@
|
|
|
6953
7037
|
|
|
6954
7038
|
</td>
|
|
6955
7039
|
</tr>
|
|
7040
|
+
<tr>
|
|
7041
|
+
<td class="with-icons is-vcentered"
|
|
7042
|
+
id="base-typographyCardSelectFooterM"
|
|
7043
|
+
title="theme: base; category: typography; group: cardSelect; name: footer; variant: m; ">
|
|
7044
|
+
typographyCardSelectFooterM
|
|
7045
|
+
<a href="#base-typographyCardSelectFooterM"
|
|
7046
|
+
title="permalink"
|
|
7047
|
+
class="permalink">
|
|
7048
|
+
🔗
|
|
7049
|
+
</a>
|
|
7050
|
+
</td>
|
|
7051
|
+
<td class="is-vcentered">
|
|
7052
|
+
<pre>400 14px/150% Sage UI</pre>
|
|
7053
|
+
</td>
|
|
7054
|
+
<td class="is-vcentered">
|
|
7055
|
+
<div class="table__typography-preview">
|
|
7056
|
+
n/a
|
|
7057
|
+
</div>
|
|
7058
|
+
|
|
7059
|
+
</td>
|
|
7060
|
+
</tr>
|
|
6956
7061
|
<tr>
|
|
6957
7062
|
<td class="with-icons is-vcentered"
|
|
6958
7063
|
id="base-typographyDatePickerCalendarDateM"
|
|
@@ -7184,6 +7289,27 @@
|
|
|
7184
7289
|
|
|
7185
7290
|
</td>
|
|
7186
7291
|
</tr>
|
|
7292
|
+
<tr>
|
|
7293
|
+
<td class="with-icons is-vcentered"
|
|
7294
|
+
id="base-typographyDialogSubtitle"
|
|
7295
|
+
title="theme: base; category: typography; name: dialog; variant: subtitle; ">
|
|
7296
|
+
typographyDialogSubtitle
|
|
7297
|
+
<a href="#base-typographyDialogSubtitle"
|
|
7298
|
+
title="permalink"
|
|
7299
|
+
class="permalink">
|
|
7300
|
+
🔗
|
|
7301
|
+
</a>
|
|
7302
|
+
</td>
|
|
7303
|
+
<td class="is-vcentered">
|
|
7304
|
+
<pre>400 16px/150% Sage UI</pre>
|
|
7305
|
+
</td>
|
|
7306
|
+
<td class="is-vcentered">
|
|
7307
|
+
<div class="table__typography-preview">
|
|
7308
|
+
n/a
|
|
7309
|
+
</div>
|
|
7310
|
+
|
|
7311
|
+
</td>
|
|
7312
|
+
</tr>
|
|
7187
7313
|
<tr>
|
|
7188
7314
|
<td class="with-icons is-vcentered"
|
|
7189
7315
|
id="base-typographyDialogParagraphXs"
|
|
@@ -703,6 +703,90 @@
|
|
|
703
703
|
style="width: 6px">
|
|
704
704
|
</div>
|
|
705
705
|
|
|
706
|
+
</td>
|
|
707
|
+
</tr>
|
|
708
|
+
<tr>
|
|
709
|
+
<td class="with-icons is-vcentered"
|
|
710
|
+
id="base-spacingNeg010"
|
|
711
|
+
title="theme: base; category: spacing; variant: neg010; ">
|
|
712
|
+
spacingNeg010
|
|
713
|
+
<a href="#base-spacingNeg010"
|
|
714
|
+
title="permalink"
|
|
715
|
+
class="permalink">
|
|
716
|
+
🔗
|
|
717
|
+
</a>
|
|
718
|
+
</td>
|
|
719
|
+
<td class="is-vcentered">
|
|
720
|
+
<pre>-1px</pre>
|
|
721
|
+
</td>
|
|
722
|
+
<td class="is-vcentered">
|
|
723
|
+
<div class="table__spacing-preview"
|
|
724
|
+
style="width: -1px">
|
|
725
|
+
</div>
|
|
726
|
+
|
|
727
|
+
</td>
|
|
728
|
+
</tr>
|
|
729
|
+
<tr>
|
|
730
|
+
<td class="with-icons is-vcentered"
|
|
731
|
+
id="base-spacingNeg025"
|
|
732
|
+
title="theme: base; category: spacing; variant: neg025; ">
|
|
733
|
+
spacingNeg025
|
|
734
|
+
<a href="#base-spacingNeg025"
|
|
735
|
+
title="permalink"
|
|
736
|
+
class="permalink">
|
|
737
|
+
🔗
|
|
738
|
+
</a>
|
|
739
|
+
</td>
|
|
740
|
+
<td class="is-vcentered">
|
|
741
|
+
<pre>-2px</pre>
|
|
742
|
+
</td>
|
|
743
|
+
<td class="is-vcentered">
|
|
744
|
+
<div class="table__spacing-preview"
|
|
745
|
+
style="width: -2px">
|
|
746
|
+
</div>
|
|
747
|
+
|
|
748
|
+
</td>
|
|
749
|
+
</tr>
|
|
750
|
+
<tr>
|
|
751
|
+
<td class="with-icons is-vcentered"
|
|
752
|
+
id="base-spacingNeg050"
|
|
753
|
+
title="theme: base; category: spacing; variant: neg050; ">
|
|
754
|
+
spacingNeg050
|
|
755
|
+
<a href="#base-spacingNeg050"
|
|
756
|
+
title="permalink"
|
|
757
|
+
class="permalink">
|
|
758
|
+
🔗
|
|
759
|
+
</a>
|
|
760
|
+
</td>
|
|
761
|
+
<td class="is-vcentered">
|
|
762
|
+
<pre>-4px</pre>
|
|
763
|
+
</td>
|
|
764
|
+
<td class="is-vcentered">
|
|
765
|
+
<div class="table__spacing-preview"
|
|
766
|
+
style="width: -4px">
|
|
767
|
+
</div>
|
|
768
|
+
|
|
769
|
+
</td>
|
|
770
|
+
</tr>
|
|
771
|
+
<tr>
|
|
772
|
+
<td class="with-icons is-vcentered"
|
|
773
|
+
id="base-spacingNeg075"
|
|
774
|
+
title="theme: base; category: spacing; variant: neg075; ">
|
|
775
|
+
spacingNeg075
|
|
776
|
+
<a href="#base-spacingNeg075"
|
|
777
|
+
title="permalink"
|
|
778
|
+
class="permalink">
|
|
779
|
+
🔗
|
|
780
|
+
</a>
|
|
781
|
+
</td>
|
|
782
|
+
<td class="is-vcentered">
|
|
783
|
+
<pre>-6px</pre>
|
|
784
|
+
</td>
|
|
785
|
+
<td class="is-vcentered">
|
|
786
|
+
<div class="table__spacing-preview"
|
|
787
|
+
style="width: -6px">
|
|
788
|
+
</div>
|
|
789
|
+
|
|
706
790
|
</td>
|
|
707
791
|
</tr>
|
|
708
792
|
</table>
|
|
@@ -360,7 +360,7 @@
|
|
|
360
360
|
</a>
|
|
361
361
|
</td>
|
|
362
362
|
<td class="is-vcentered">
|
|
363
|
-
<pre>
|
|
363
|
+
<pre>500 14px/150% Sage UI</pre>
|
|
364
364
|
</td>
|
|
365
365
|
<td class="is-vcentered">
|
|
366
366
|
<div class="table__typography-preview">
|
|
@@ -558,6 +558,27 @@
|
|
|
558
558
|
|
|
559
559
|
</td>
|
|
560
560
|
</tr>
|
|
561
|
+
<tr>
|
|
562
|
+
<td class="with-icons is-vcentered"
|
|
563
|
+
id="base-typographyCardSelectFooterM"
|
|
564
|
+
title="theme: base; category: typography; group: cardSelect; name: footer; variant: m; ">
|
|
565
|
+
typographyCardSelectFooterM
|
|
566
|
+
<a href="#base-typographyCardSelectFooterM"
|
|
567
|
+
title="permalink"
|
|
568
|
+
class="permalink">
|
|
569
|
+
🔗
|
|
570
|
+
</a>
|
|
571
|
+
</td>
|
|
572
|
+
<td class="is-vcentered">
|
|
573
|
+
<pre>400 14px/150% Sage UI</pre>
|
|
574
|
+
</td>
|
|
575
|
+
<td class="is-vcentered">
|
|
576
|
+
<div class="table__typography-preview">
|
|
577
|
+
n/a
|
|
578
|
+
</div>
|
|
579
|
+
|
|
580
|
+
</td>
|
|
581
|
+
</tr>
|
|
561
582
|
<tr>
|
|
562
583
|
<td class="with-icons is-vcentered"
|
|
563
584
|
id="base-typographyDatePickerCalendarDateM"
|
|
@@ -789,6 +810,27 @@
|
|
|
789
810
|
|
|
790
811
|
</td>
|
|
791
812
|
</tr>
|
|
813
|
+
<tr>
|
|
814
|
+
<td class="with-icons is-vcentered"
|
|
815
|
+
id="base-typographyDialogSubtitle"
|
|
816
|
+
title="theme: base; category: typography; name: dialog; variant: subtitle; ">
|
|
817
|
+
typographyDialogSubtitle
|
|
818
|
+
<a href="#base-typographyDialogSubtitle"
|
|
819
|
+
title="permalink"
|
|
820
|
+
class="permalink">
|
|
821
|
+
🔗
|
|
822
|
+
</a>
|
|
823
|
+
</td>
|
|
824
|
+
<td class="is-vcentered">
|
|
825
|
+
<pre>400 16px/150% Sage UI</pre>
|
|
826
|
+
</td>
|
|
827
|
+
<td class="is-vcentered">
|
|
828
|
+
<div class="table__typography-preview">
|
|
829
|
+
n/a
|
|
830
|
+
</div>
|
|
831
|
+
|
|
832
|
+
</td>
|
|
833
|
+
</tr>
|
|
792
834
|
<tr>
|
|
793
835
|
<td class="with-icons is-vcentered"
|
|
794
836
|
id="base-typographyDialogParagraphXs"
|
package/docs/tokens/index.html
CHANGED
|
@@ -2063,11 +2063,11 @@
|
|
|
2063
2063
|
</a>
|
|
2064
2064
|
</td>
|
|
2065
2065
|
<td class="is-vcentered">
|
|
2066
|
-
<pre>#
|
|
2066
|
+
<pre>#db7380ff</pre>
|
|
2067
2067
|
</td>
|
|
2068
2068
|
<td class="is-vcentered">
|
|
2069
2069
|
<div class="table__color-preview"
|
|
2070
|
-
style="background-color: #
|
|
2070
|
+
style="background-color: #db7380ff;">
|
|
2071
2071
|
</div>
|
|
2072
2072
|
|
|
2073
2073
|
</td>
|
|
@@ -2084,11 +2084,11 @@
|
|
|
2084
2084
|
</a>
|
|
2085
2085
|
</td>
|
|
2086
2086
|
<td class="is-vcentered">
|
|
2087
|
-
<pre>#
|
|
2087
|
+
<pre>#d04b5cff</pre>
|
|
2088
2088
|
</td>
|
|
2089
2089
|
<td class="is-vcentered">
|
|
2090
2090
|
<div class="table__color-preview"
|
|
2091
|
-
style="background-color: #
|
|
2091
|
+
style="background-color: #d04b5cff;">
|
|
2092
2092
|
</div>
|
|
2093
2093
|
|
|
2094
2094
|
</td>
|
|
@@ -2105,11 +2105,11 @@
|
|
|
2105
2105
|
</a>
|
|
2106
2106
|
</td>
|
|
2107
2107
|
<td class="is-vcentered">
|
|
2108
|
-
<pre>#
|
|
2108
|
+
<pre>#cb374aff</pre>
|
|
2109
2109
|
</td>
|
|
2110
2110
|
<td class="is-vcentered">
|
|
2111
2111
|
<div class="table__color-preview"
|
|
2112
|
-
style="background-color: #
|
|
2112
|
+
style="background-color: #cb374aff;">
|
|
2113
2113
|
</div>
|
|
2114
2114
|
|
|
2115
2115
|
</td>
|
|
@@ -2126,11 +2126,11 @@
|
|
|
2126
2126
|
</a>
|
|
2127
2127
|
</td>
|
|
2128
2128
|
<td class="is-vcentered">
|
|
2129
|
-
<pre>#
|
|
2129
|
+
<pre>#a22c3bff</pre>
|
|
2130
2130
|
</td>
|
|
2131
2131
|
<td class="is-vcentered">
|
|
2132
2132
|
<div class="table__color-preview"
|
|
2133
|
-
style="background-color: #
|
|
2133
|
+
style="background-color: #a22c3bff;">
|
|
2134
2134
|
</div>
|
|
2135
2135
|
|
|
2136
2136
|
</td>
|
|
@@ -5726,6 +5726,90 @@
|
|
|
5726
5726
|
style="width: 6px">
|
|
5727
5727
|
</div>
|
|
5728
5728
|
|
|
5729
|
+
</td>
|
|
5730
|
+
</tr>
|
|
5731
|
+
<tr>
|
|
5732
|
+
<td class="with-icons is-vcentered"
|
|
5733
|
+
id="base-spacingNeg010"
|
|
5734
|
+
title="theme: base; category: spacing; variant: neg010; ">
|
|
5735
|
+
spacingNeg010
|
|
5736
|
+
<a href="#base-spacingNeg010"
|
|
5737
|
+
title="permalink"
|
|
5738
|
+
class="permalink">
|
|
5739
|
+
🔗
|
|
5740
|
+
</a>
|
|
5741
|
+
</td>
|
|
5742
|
+
<td class="is-vcentered">
|
|
5743
|
+
<pre>-1px</pre>
|
|
5744
|
+
</td>
|
|
5745
|
+
<td class="is-vcentered">
|
|
5746
|
+
<div class="table__spacing-preview"
|
|
5747
|
+
style="width: -1px">
|
|
5748
|
+
</div>
|
|
5749
|
+
|
|
5750
|
+
</td>
|
|
5751
|
+
</tr>
|
|
5752
|
+
<tr>
|
|
5753
|
+
<td class="with-icons is-vcentered"
|
|
5754
|
+
id="base-spacingNeg025"
|
|
5755
|
+
title="theme: base; category: spacing; variant: neg025; ">
|
|
5756
|
+
spacingNeg025
|
|
5757
|
+
<a href="#base-spacingNeg025"
|
|
5758
|
+
title="permalink"
|
|
5759
|
+
class="permalink">
|
|
5760
|
+
🔗
|
|
5761
|
+
</a>
|
|
5762
|
+
</td>
|
|
5763
|
+
<td class="is-vcentered">
|
|
5764
|
+
<pre>-2px</pre>
|
|
5765
|
+
</td>
|
|
5766
|
+
<td class="is-vcentered">
|
|
5767
|
+
<div class="table__spacing-preview"
|
|
5768
|
+
style="width: -2px">
|
|
5769
|
+
</div>
|
|
5770
|
+
|
|
5771
|
+
</td>
|
|
5772
|
+
</tr>
|
|
5773
|
+
<tr>
|
|
5774
|
+
<td class="with-icons is-vcentered"
|
|
5775
|
+
id="base-spacingNeg050"
|
|
5776
|
+
title="theme: base; category: spacing; variant: neg050; ">
|
|
5777
|
+
spacingNeg050
|
|
5778
|
+
<a href="#base-spacingNeg050"
|
|
5779
|
+
title="permalink"
|
|
5780
|
+
class="permalink">
|
|
5781
|
+
🔗
|
|
5782
|
+
</a>
|
|
5783
|
+
</td>
|
|
5784
|
+
<td class="is-vcentered">
|
|
5785
|
+
<pre>-4px</pre>
|
|
5786
|
+
</td>
|
|
5787
|
+
<td class="is-vcentered">
|
|
5788
|
+
<div class="table__spacing-preview"
|
|
5789
|
+
style="width: -4px">
|
|
5790
|
+
</div>
|
|
5791
|
+
|
|
5792
|
+
</td>
|
|
5793
|
+
</tr>
|
|
5794
|
+
<tr>
|
|
5795
|
+
<td class="with-icons is-vcentered"
|
|
5796
|
+
id="base-spacingNeg075"
|
|
5797
|
+
title="theme: base; category: spacing; variant: neg075; ">
|
|
5798
|
+
spacingNeg075
|
|
5799
|
+
<a href="#base-spacingNeg075"
|
|
5800
|
+
title="permalink"
|
|
5801
|
+
class="permalink">
|
|
5802
|
+
🔗
|
|
5803
|
+
</a>
|
|
5804
|
+
</td>
|
|
5805
|
+
<td class="is-vcentered">
|
|
5806
|
+
<pre>-6px</pre>
|
|
5807
|
+
</td>
|
|
5808
|
+
<td class="is-vcentered">
|
|
5809
|
+
<div class="table__spacing-preview"
|
|
5810
|
+
style="width: -6px">
|
|
5811
|
+
</div>
|
|
5812
|
+
|
|
5729
5813
|
</td>
|
|
5730
5814
|
</tr>
|
|
5731
5815
|
</table>
|
|
@@ -6811,7 +6895,7 @@
|
|
|
6811
6895
|
</a>
|
|
6812
6896
|
</td>
|
|
6813
6897
|
<td class="is-vcentered">
|
|
6814
|
-
<pre>
|
|
6898
|
+
<pre>500 14px/150% Sage UI</pre>
|
|
6815
6899
|
</td>
|
|
6816
6900
|
<td class="is-vcentered">
|
|
6817
6901
|
<div class="table__typography-preview">
|
|
@@ -7009,6 +7093,27 @@
|
|
|
7009
7093
|
|
|
7010
7094
|
</td>
|
|
7011
7095
|
</tr>
|
|
7096
|
+
<tr>
|
|
7097
|
+
<td class="with-icons is-vcentered"
|
|
7098
|
+
id="base-typographyCardSelectFooterM"
|
|
7099
|
+
title="theme: base; category: typography; group: cardSelect; name: footer; variant: m; ">
|
|
7100
|
+
typographyCardSelectFooterM
|
|
7101
|
+
<a href="#base-typographyCardSelectFooterM"
|
|
7102
|
+
title="permalink"
|
|
7103
|
+
class="permalink">
|
|
7104
|
+
🔗
|
|
7105
|
+
</a>
|
|
7106
|
+
</td>
|
|
7107
|
+
<td class="is-vcentered">
|
|
7108
|
+
<pre>400 14px/150% Sage UI</pre>
|
|
7109
|
+
</td>
|
|
7110
|
+
<td class="is-vcentered">
|
|
7111
|
+
<div class="table__typography-preview">
|
|
7112
|
+
n/a
|
|
7113
|
+
</div>
|
|
7114
|
+
|
|
7115
|
+
</td>
|
|
7116
|
+
</tr>
|
|
7012
7117
|
<tr>
|
|
7013
7118
|
<td class="with-icons is-vcentered"
|
|
7014
7119
|
id="base-typographyDatePickerCalendarDateM"
|
|
@@ -7240,6 +7345,27 @@
|
|
|
7240
7345
|
|
|
7241
7346
|
</td>
|
|
7242
7347
|
</tr>
|
|
7348
|
+
<tr>
|
|
7349
|
+
<td class="with-icons is-vcentered"
|
|
7350
|
+
id="base-typographyDialogSubtitle"
|
|
7351
|
+
title="theme: base; category: typography; name: dialog; variant: subtitle; ">
|
|
7352
|
+
typographyDialogSubtitle
|
|
7353
|
+
<a href="#base-typographyDialogSubtitle"
|
|
7354
|
+
title="permalink"
|
|
7355
|
+
class="permalink">
|
|
7356
|
+
🔗
|
|
7357
|
+
</a>
|
|
7358
|
+
</td>
|
|
7359
|
+
<td class="is-vcentered">
|
|
7360
|
+
<pre>400 16px/150% Sage UI</pre>
|
|
7361
|
+
</td>
|
|
7362
|
+
<td class="is-vcentered">
|
|
7363
|
+
<div class="table__typography-preview">
|
|
7364
|
+
n/a
|
|
7365
|
+
</div>
|
|
7366
|
+
|
|
7367
|
+
</td>
|
|
7368
|
+
</tr>
|
|
7243
7369
|
<tr>
|
|
7244
7370
|
<td class="with-icons is-vcentered"
|
|
7245
7371
|
id="base-typographyDialogParagraphXs"
|
package/ios/base.h
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
// Do not edit directly
|
|
7
|
-
// Generated on Tue,
|
|
7
|
+
// Generated on Tue, 06 Sep 2022 13:51:10 GMT
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
#import <Foundation/Foundation.h>
|
|
@@ -96,10 +96,10 @@
|
|
|
96
96
|
#define colorsSemanticPositiveYin065 #000000a6
|
|
97
97
|
#define colorsSemanticPositiveYin090 #000000e6
|
|
98
98
|
#define colorsSemanticPositiveYang100 #ffffffff
|
|
99
|
-
#define colorsSemanticNegative350 #
|
|
100
|
-
#define colorsSemanticNegative450 #
|
|
101
|
-
#define colorsSemanticNegative500 #
|
|
102
|
-
#define colorsSemanticNegative600 #
|
|
99
|
+
#define colorsSemanticNegative350 #db7380ff
|
|
100
|
+
#define colorsSemanticNegative450 #d04b5cff
|
|
101
|
+
#define colorsSemanticNegative500 #cb374aff
|
|
102
|
+
#define colorsSemanticNegative600 #a22c3bff
|
|
103
103
|
#define colorsSemanticNegativeTransparent #00000000
|
|
104
104
|
#define colorsSemanticNegativeYin030 #0000004d
|
|
105
105
|
#define colorsSemanticNegativeYin055 #0000008c
|
|
@@ -269,6 +269,10 @@
|
|
|
269
269
|
#define spacing050 4px
|
|
270
270
|
#define spacing060 5px
|
|
271
271
|
#define spacing075 6px
|
|
272
|
+
#define spacingNeg010 -1px
|
|
273
|
+
#define spacingNeg025 -2px
|
|
274
|
+
#define spacingNeg050 -4px
|
|
275
|
+
#define spacingNeg075 -6px
|
|
272
276
|
#define borderWidth100 1px
|
|
273
277
|
#define borderWidth200 2px
|
|
274
278
|
#define borderWidth300 3px
|
|
@@ -311,7 +315,7 @@
|
|
|
311
315
|
#define typographyAccordionTitleM Bold 20px/125% Sage UI
|
|
312
316
|
#define typographyAccordionSubtitleM Regular 14px/150% Sage UI
|
|
313
317
|
#define typographyAccordionParagraphM Regular 14px/150% Sage UI
|
|
314
|
-
#define typographyActionPopoverMenuItemM
|
|
318
|
+
#define typographyActionPopoverMenuItemM Medium 14px/150% Sage UI
|
|
315
319
|
#define typographyAnchorNavLabelM Medium 14px/150% Sage UI
|
|
316
320
|
#define typographyBadgeLabelM Medium 12px/150% Sage UI
|
|
317
321
|
#define typographyButtonLabelS Medium 14px/150% Sage UI
|
|
@@ -321,6 +325,7 @@
|
|
|
321
325
|
#define typographyCardSelectTitleM Bold 16px/150% Sage UI
|
|
322
326
|
#define typographyCardSelectSubtitleM Medium 14px/150% Sage UI
|
|
323
327
|
#define typographyCardSelectParagraphM Regular 14px/150% Sage UI
|
|
328
|
+
#define typographyCardSelectFooterM Regular 14px/150% Sage UI
|
|
324
329
|
#define typographyDatePickerCalendarDateM Medium 14px/150% Sage UI
|
|
325
330
|
#define typographyDatePickerCalendarDayM Bold 14px/150% Sage UI
|
|
326
331
|
#define typographyDatePickerCalendarMonthM Bold 16px/125% Sage UI
|
|
@@ -332,6 +337,7 @@
|
|
|
332
337
|
#define typographyDialogTitleL Bold 24px/125% Sage UI
|
|
333
338
|
#define typographyDialogTitleXl Bold 24px/125% Sage UI
|
|
334
339
|
#define typographyDialogTitleXxl Bold 24px/125% Sage UI
|
|
340
|
+
#define typographyDialogSubtitle Regular 16px/150% Sage UI
|
|
335
341
|
#define typographyDialogParagraphXs Regular 14px/150% Sage UI
|
|
336
342
|
#define typographyDialogParagraphS Regular 14px/150% Sage UI
|
|
337
343
|
#define typographyDialogParagraphMs Regular 14px/150% Sage UI
|
package/js/base/common.d.ts
CHANGED
|
@@ -257,6 +257,10 @@ export const spacing025: string;
|
|
|
257
257
|
export const spacing050: string;
|
|
258
258
|
export const spacing060: string;
|
|
259
259
|
export const spacing075: string;
|
|
260
|
+
export const spacingNeg010: string;
|
|
261
|
+
export const spacingNeg025: string;
|
|
262
|
+
export const spacingNeg050: string;
|
|
263
|
+
export const spacingNeg075: string;
|
|
260
264
|
export const borderWidth100: string;
|
|
261
265
|
export const borderWidth200: string;
|
|
262
266
|
export const borderWidth300: string;
|
|
@@ -309,6 +313,7 @@ export const typographyCardParagraphM: string;
|
|
|
309
313
|
export const typographyCardSelectTitleM: string;
|
|
310
314
|
export const typographyCardSelectSubtitleM: string;
|
|
311
315
|
export const typographyCardSelectParagraphM: string;
|
|
316
|
+
export const typographyCardSelectFooterM: string;
|
|
312
317
|
export const typographyDatePickerCalendarDateM: string;
|
|
313
318
|
export const typographyDatePickerCalendarDayM: string;
|
|
314
319
|
export const typographyDatePickerCalendarMonthM: string;
|
|
@@ -320,6 +325,7 @@ export const typographyDialogTitleMl: string;
|
|
|
320
325
|
export const typographyDialogTitleL: string;
|
|
321
326
|
export const typographyDialogTitleXl: string;
|
|
322
327
|
export const typographyDialogTitleXxl: string;
|
|
328
|
+
export const typographyDialogSubtitle: string;
|
|
323
329
|
export const typographyDialogParagraphXs: string;
|
|
324
330
|
export const typographyDialogParagraphS: string;
|
|
325
331
|
export const typographyDialogParagraphMs: string;
|
package/js/base/common.js
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 Tue,
|
|
7
|
+
* Generated on Tue, 06 Sep 2022 13:51:10 GMT
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
module.exports = {
|
|
@@ -94,10 +94,10 @@ module.exports = {
|
|
|
94
94
|
colorsSemanticPositiveYin065: '#000000a6',
|
|
95
95
|
colorsSemanticPositiveYin090: '#000000e6',
|
|
96
96
|
colorsSemanticPositiveYang100: '#ffffffff',
|
|
97
|
-
colorsSemanticNegative350: '#
|
|
98
|
-
colorsSemanticNegative450: '#
|
|
99
|
-
colorsSemanticNegative500: '#
|
|
100
|
-
colorsSemanticNegative600: '#
|
|
97
|
+
colorsSemanticNegative350: '#db7380ff',
|
|
98
|
+
colorsSemanticNegative450: '#d04b5cff',
|
|
99
|
+
colorsSemanticNegative500: '#cb374aff',
|
|
100
|
+
colorsSemanticNegative600: '#a22c3bff',
|
|
101
101
|
colorsSemanticNegativeTransparent: '#00000000',
|
|
102
102
|
colorsSemanticNegativeYin030: '#0000004d',
|
|
103
103
|
colorsSemanticNegativeYin055: '#0000008c',
|
|
@@ -267,6 +267,10 @@ module.exports = {
|
|
|
267
267
|
spacing050: '4px',
|
|
268
268
|
spacing060: '5px',
|
|
269
269
|
spacing075: '6px',
|
|
270
|
+
spacingNeg010: '-1px',
|
|
271
|
+
spacingNeg025: '-2px',
|
|
272
|
+
spacingNeg050: '-4px',
|
|
273
|
+
spacingNeg075: '-6px',
|
|
270
274
|
borderWidth100: '1px',
|
|
271
275
|
borderWidth200: '2px',
|
|
272
276
|
borderWidth300: '3px',
|
|
@@ -309,7 +313,7 @@ module.exports = {
|
|
|
309
313
|
typographyAccordionTitleM: '700 20px/125% Sage UI',
|
|
310
314
|
typographyAccordionSubtitleM: '400 14px/150% Sage UI',
|
|
311
315
|
typographyAccordionParagraphM: '400 14px/150% Sage UI',
|
|
312
|
-
typographyActionPopoverMenuItemM: '
|
|
316
|
+
typographyActionPopoverMenuItemM: '500 14px/150% Sage UI',
|
|
313
317
|
typographyAnchorNavLabelM: '500 14px/150% Sage UI',
|
|
314
318
|
typographyBadgeLabelM: '500 12px/150% Sage UI',
|
|
315
319
|
typographyButtonLabelS: '500 14px/150% Sage UI',
|
|
@@ -319,6 +323,7 @@ module.exports = {
|
|
|
319
323
|
typographyCardSelectTitleM: '700 16px/150% Sage UI',
|
|
320
324
|
typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
|
|
321
325
|
typographyCardSelectParagraphM: '400 14px/150% Sage UI',
|
|
326
|
+
typographyCardSelectFooterM: '400 14px/150% Sage UI',
|
|
322
327
|
typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
|
|
323
328
|
typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
|
|
324
329
|
typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
|
|
@@ -330,6 +335,7 @@ module.exports = {
|
|
|
330
335
|
typographyDialogTitleL: '700 24px/125% Sage UI',
|
|
331
336
|
typographyDialogTitleXl: '700 24px/125% Sage UI',
|
|
332
337
|
typographyDialogTitleXxl: '700 24px/125% Sage UI',
|
|
338
|
+
typographyDialogSubtitle: '400 16px/150% Sage UI',
|
|
333
339
|
typographyDialogParagraphXs: '400 14px/150% Sage UI',
|
|
334
340
|
typographyDialogParagraphS: '400 14px/150% Sage UI',
|
|
335
341
|
typographyDialogParagraphMs: '400 14px/150% Sage UI',
|
package/js/base/es6.d.ts
CHANGED
|
@@ -258,6 +258,10 @@ declare namespace _default {
|
|
|
258
258
|
const spacing050: string;
|
|
259
259
|
const spacing060: string;
|
|
260
260
|
const spacing075: string;
|
|
261
|
+
const spacingNeg010: string;
|
|
262
|
+
const spacingNeg025: string;
|
|
263
|
+
const spacingNeg050: string;
|
|
264
|
+
const spacingNeg075: string;
|
|
261
265
|
const borderWidth100: string;
|
|
262
266
|
const borderWidth200: string;
|
|
263
267
|
const borderWidth300: string;
|
|
@@ -310,6 +314,7 @@ declare namespace _default {
|
|
|
310
314
|
const typographyCardSelectTitleM: string;
|
|
311
315
|
const typographyCardSelectSubtitleM: string;
|
|
312
316
|
const typographyCardSelectParagraphM: string;
|
|
317
|
+
const typographyCardSelectFooterM: string;
|
|
313
318
|
const typographyDatePickerCalendarDateM: string;
|
|
314
319
|
const typographyDatePickerCalendarDayM: string;
|
|
315
320
|
const typographyDatePickerCalendarMonthM: string;
|
|
@@ -321,6 +326,7 @@ declare namespace _default {
|
|
|
321
326
|
const typographyDialogTitleL: string;
|
|
322
327
|
const typographyDialogTitleXl: string;
|
|
323
328
|
const typographyDialogTitleXxl: string;
|
|
329
|
+
const typographyDialogSubtitle: string;
|
|
324
330
|
const typographyDialogParagraphXs: string;
|
|
325
331
|
const typographyDialogParagraphS: string;
|
|
326
332
|
const typographyDialogParagraphMs: string;
|
package/js/base/es6.js
CHANGED
|
@@ -89,10 +89,10 @@ export default {
|
|
|
89
89
|
colorsSemanticPositiveYin065: '#000000a6',
|
|
90
90
|
colorsSemanticPositiveYin090: '#000000e6',
|
|
91
91
|
colorsSemanticPositiveYang100: '#ffffffff',
|
|
92
|
-
colorsSemanticNegative350: '#
|
|
93
|
-
colorsSemanticNegative450: '#
|
|
94
|
-
colorsSemanticNegative500: '#
|
|
95
|
-
colorsSemanticNegative600: '#
|
|
92
|
+
colorsSemanticNegative350: '#db7380ff',
|
|
93
|
+
colorsSemanticNegative450: '#d04b5cff',
|
|
94
|
+
colorsSemanticNegative500: '#cb374aff',
|
|
95
|
+
colorsSemanticNegative600: '#a22c3bff',
|
|
96
96
|
colorsSemanticNegativeTransparent: '#00000000',
|
|
97
97
|
colorsSemanticNegativeYin030: '#0000004d',
|
|
98
98
|
colorsSemanticNegativeYin055: '#0000008c',
|
|
@@ -262,6 +262,10 @@ export default {
|
|
|
262
262
|
spacing050: '4px',
|
|
263
263
|
spacing060: '5px',
|
|
264
264
|
spacing075: '6px',
|
|
265
|
+
spacingNeg010: '-1px',
|
|
266
|
+
spacingNeg025: '-2px',
|
|
267
|
+
spacingNeg050: '-4px',
|
|
268
|
+
spacingNeg075: '-6px',
|
|
265
269
|
borderWidth100: '1px',
|
|
266
270
|
borderWidth200: '2px',
|
|
267
271
|
borderWidth300: '3px',
|
|
@@ -304,7 +308,7 @@ export default {
|
|
|
304
308
|
typographyAccordionTitleM: '700 20px/125% Sage UI',
|
|
305
309
|
typographyAccordionSubtitleM: '400 14px/150% Sage UI',
|
|
306
310
|
typographyAccordionParagraphM: '400 14px/150% Sage UI',
|
|
307
|
-
typographyActionPopoverMenuItemM: '
|
|
311
|
+
typographyActionPopoverMenuItemM: '500 14px/150% Sage UI',
|
|
308
312
|
typographyAnchorNavLabelM: '500 14px/150% Sage UI',
|
|
309
313
|
typographyBadgeLabelM: '500 12px/150% Sage UI',
|
|
310
314
|
typographyButtonLabelS: '500 14px/150% Sage UI',
|
|
@@ -314,6 +318,7 @@ export default {
|
|
|
314
318
|
typographyCardSelectTitleM: '700 16px/150% Sage UI',
|
|
315
319
|
typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
|
|
316
320
|
typographyCardSelectParagraphM: '400 14px/150% Sage UI',
|
|
321
|
+
typographyCardSelectFooterM: '400 14px/150% Sage UI',
|
|
317
322
|
typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
|
|
318
323
|
typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
|
|
319
324
|
typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
|
|
@@ -325,6 +330,7 @@ export default {
|
|
|
325
330
|
typographyDialogTitleL: '700 24px/125% Sage UI',
|
|
326
331
|
typographyDialogTitleXl: '700 24px/125% Sage UI',
|
|
327
332
|
typographyDialogTitleXxl: '700 24px/125% Sage UI',
|
|
333
|
+
typographyDialogSubtitle: '400 16px/150% Sage UI',
|
|
328
334
|
typographyDialogParagraphXs: '400 14px/150% Sage UI',
|
|
329
335
|
typographyDialogParagraphS: '400 14px/150% Sage UI',
|
|
330
336
|
typographyDialogParagraphMs: '400 14px/150% Sage UI',
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"description": "Design tokens for the Sage Design System.",
|
|
12
12
|
"author": "The Sage Group plc",
|
|
13
|
-
"version": "2.
|
|
13
|
+
"version": "2.41.0",
|
|
14
14
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
15
15
|
"tags": [
|
|
16
16
|
"design tokens",
|
|
Binary file
|
package/scss/base.scss
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 Tue,
|
|
7
|
+
// Generated on Tue, 06 Sep 2022 13:51:10 GMT
|
|
8
8
|
|
|
9
9
|
$metaName: Base Theme;
|
|
10
10
|
$metaPublic: true;
|
|
@@ -92,10 +92,10 @@ $colorsSemanticPositiveYin055: #0000008c;
|
|
|
92
92
|
$colorsSemanticPositiveYin065: #000000a6;
|
|
93
93
|
$colorsSemanticPositiveYin090: #000000e6;
|
|
94
94
|
$colorsSemanticPositiveYang100: #ffffffff;
|
|
95
|
-
$colorsSemanticNegative350: #
|
|
96
|
-
$colorsSemanticNegative450: #
|
|
97
|
-
$colorsSemanticNegative500: #
|
|
98
|
-
$colorsSemanticNegative600: #
|
|
95
|
+
$colorsSemanticNegative350: #db7380ff;
|
|
96
|
+
$colorsSemanticNegative450: #d04b5cff;
|
|
97
|
+
$colorsSemanticNegative500: #cb374aff;
|
|
98
|
+
$colorsSemanticNegative600: #a22c3bff;
|
|
99
99
|
$colorsSemanticNegativeTransparent: #00000000;
|
|
100
100
|
$colorsSemanticNegativeYin030: #0000004d;
|
|
101
101
|
$colorsSemanticNegativeYin055: #0000008c;
|
|
@@ -265,6 +265,10 @@ $spacing025: 2px;
|
|
|
265
265
|
$spacing050: 4px;
|
|
266
266
|
$spacing060: 5px;
|
|
267
267
|
$spacing075: 6px;
|
|
268
|
+
$spacingNeg010: -1px;
|
|
269
|
+
$spacingNeg025: -2px;
|
|
270
|
+
$spacingNeg050: -4px;
|
|
271
|
+
$spacingNeg075: -6px;
|
|
268
272
|
$borderWidth100: 1px;
|
|
269
273
|
$borderWidth200: 2px;
|
|
270
274
|
$borderWidth300: 3px;
|
|
@@ -307,7 +311,7 @@ $borderRadiusCircle: 50%;
|
|
|
307
311
|
$typographyAccordionTitleM: 700 20px/125% Sage UI;
|
|
308
312
|
$typographyAccordionSubtitleM: 400 14px/150% Sage UI;
|
|
309
313
|
$typographyAccordionParagraphM: 400 14px/150% Sage UI;
|
|
310
|
-
$typographyActionPopoverMenuItemM:
|
|
314
|
+
$typographyActionPopoverMenuItemM: 500 14px/150% Sage UI;
|
|
311
315
|
$typographyAnchorNavLabelM: 500 14px/150% Sage UI;
|
|
312
316
|
$typographyBadgeLabelM: 500 12px/150% Sage UI;
|
|
313
317
|
$typographyButtonLabelS: 500 14px/150% Sage UI;
|
|
@@ -317,6 +321,7 @@ $typographyCardParagraphM: 400 14px/150% Sage UI;
|
|
|
317
321
|
$typographyCardSelectTitleM: 700 16px/150% Sage UI;
|
|
318
322
|
$typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
|
|
319
323
|
$typographyCardSelectParagraphM: 400 14px/150% Sage UI;
|
|
324
|
+
$typographyCardSelectFooterM: 400 14px/150% Sage UI;
|
|
320
325
|
$typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
|
|
321
326
|
$typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
|
|
322
327
|
$typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
|
|
@@ -328,6 +333,7 @@ $typographyDialogTitleMl: 700 24px/125% Sage UI;
|
|
|
328
333
|
$typographyDialogTitleL: 700 24px/125% Sage UI;
|
|
329
334
|
$typographyDialogTitleXl: 700 24px/125% Sage UI;
|
|
330
335
|
$typographyDialogTitleXxl: 700 24px/125% Sage UI;
|
|
336
|
+
$typographyDialogSubtitle: 400 16px/150% Sage UI;
|
|
331
337
|
$typographyDialogParagraphXs: 400 14px/150% Sage UI;
|
|
332
338
|
$typographyDialogParagraphS: 400 14px/150% Sage UI;
|
|
333
339
|
$typographyDialogParagraphMs: 400 14px/150% Sage UI;
|
|
Binary file
|