@sage/design-tokens 2.29.0 → 2.32.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 (16) hide show
  1. package/android/base.xml +4 -2
  2. package/css/base.css +4 -2
  3. package/data/tokens.json +11 -2
  4. package/docs/tokens/base/colors/index.html +42 -0
  5. package/docs/tokens/base/index.html +43 -1
  6. package/docs/tokens/base/typography/index.html +1 -1
  7. package/docs/tokens/index.html +43 -1
  8. package/ios/base.h +4 -2
  9. package/js/base/common.d.ts +2 -0
  10. package/js/base/common.js +4 -2
  11. package/js/base/es6.d.ts +2 -0
  12. package/js/base/es6.js +3 -1
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.32.0.tgz +0 -0
  15. package/scss/base.scss +4 -2
  16. package/sage-design-tokens-2.29.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 Mon, 06 Jun 2022 16:34:49 GMT
5
+ Generated on Thu, 23 Jun 2022 09:49:09 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -187,6 +187,8 @@
187
187
  <string name="colorsSemanticPositiveYin065">#000000a6</string>
188
188
  <string name="colorsSemanticPositiveYin090">#000000e6</string>
189
189
  <string name="colorsSemanticPositiveYang100">#ffffffff</string>
190
+ <string name="colorsSemanticNegative350">#dc7481ff</string>
191
+ <string name="colorsSemanticNegative450">#d24c5dff</string>
190
192
  <string name="colorsSemanticNegative500">#cd384bff</string>
191
193
  <string name="colorsSemanticNegative600">#a42d3cff</string>
192
194
  <string name="colorsSemanticNegativeTransparent">#00000000</string>
@@ -333,7 +335,7 @@
333
335
  <string name="typographyDialogParagraphXl">Regular 14px/150% Sage UI</string>
334
336
  <string name="typographyDialogParagraphXxl">Regular 14px/150% Sage UI</string>
335
337
  <string name="typographyDrawerTitleM">Bold 22px/125% Sage UI</string>
336
- <string name="typographyDrawerParagraphM">Regular 14px/125% Sage UI</string>
338
+ <string name="typographyDrawerParagraphM">Regular 14px/150% Sage UI</string>
337
339
  <string name="typographyFlashTextM">Regular 14px/150% Sage UI</string>
338
340
  <string name="typographyFlashTextL">Regular 16px/150% Sage UI</string>
339
341
  <string name="typographyFormFieldLabelXs">Medium 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 Mon, 06 Jun 2022 16:34:49 GMT
7
+ * Generated on Thu, 23 Jun 2022 09:49:09 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -190,6 +190,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
190
190
  --colorsSemanticPositiveYin065: #000000a6;
191
191
  --colorsSemanticPositiveYin090: #000000e6;
192
192
  --colorsSemanticPositiveYang100: #ffffffff;
193
+ --colorsSemanticNegative350: #dc7481ff;
194
+ --colorsSemanticNegative450: #d24c5dff;
193
195
  --colorsSemanticNegative500: #cd384bff;
194
196
  --colorsSemanticNegative600: #a42d3cff;
195
197
  --colorsSemanticNegativeTransparent: #00000000;
@@ -336,7 +338,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
336
338
  --typographyDialogParagraphXl: 400 14px/150% Sage UI;
337
339
  --typographyDialogParagraphXxl: 400 14px/150% Sage UI;
338
340
  --typographyDrawerTitleM: 700 22px/125% Sage UI;
339
- --typographyDrawerParagraphM: 400 14px/125% Sage UI;
341
+ --typographyDrawerParagraphM: 400 14px/150% Sage UI;
340
342
  --typographyFlashTextM: 400 14px/150% Sage UI;
341
343
  --typographyFlashTextL: 400 16px/150% Sage UI;
342
344
  --typographyFormFieldLabelXs: 500 14px/150% Sage UI;
package/data/tokens.json CHANGED
@@ -943,6 +943,14 @@
943
943
  }
944
944
  },
945
945
  "negative": {
946
+ "350": {
947
+ "value": "#dc7481ff",
948
+ "type": "color"
949
+ },
950
+ "450": {
951
+ "value": "#d24c5dff",
952
+ "type": "color"
953
+ },
946
954
  "500": {
947
955
  "value": "#cd384bff",
948
956
  "type": "color"
@@ -2033,7 +2041,7 @@
2033
2041
  "value": {
2034
2042
  "fontFamily": "Sage UI",
2035
2043
  "fontWeight": "Regular",
2036
- "lineHeight": "125%",
2044
+ "lineHeight": "150%",
2037
2045
  "fontSize": "14px",
2038
2046
  "letterSpacing": "0%",
2039
2047
  "paragraphSpacing": "0",
@@ -2455,7 +2463,8 @@
2455
2463
  "textDecoration": "underline",
2456
2464
  "textCase": "none"
2457
2465
  },
2458
- "type": "typography"
2466
+ "type": "typography",
2467
+ "description": "feat(data): Small font size, not recommended for use, as not accessible"
2459
2468
  },
2460
2469
  "m": {
2461
2470
  "value": {
package/docs/tokens/base/colors/index.html CHANGED
@@ -4065,6 +4065,48 @@
4065
4065
 
4066
4066
  </td>
4067
4067
  </tr>
4068
+ <tr>
4069
+ <td class="with-icons is-vcentered"
4070
+ id="base-colorsSemanticNegative350"
4071
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 350; ">
4072
+ colorsSemanticNegative350
4073
+ <a href="#base-colorsSemanticNegative350"
4074
+ title="permalink"
4075
+ class="permalink">
4076
+ 🔗
4077
+ </a>
4078
+ </td>
4079
+ <td class="is-vcentered">
4080
+ <pre>#dc7481ff</pre>
4081
+ </td>
4082
+ <td class="is-vcentered">
4083
+ <div class="table__color-preview"
4084
+ style="background-color: #dc7481ff;">
4085
+ </div>
4086
+
4087
+ </td>
4088
+ </tr>
4089
+ <tr>
4090
+ <td class="with-icons is-vcentered"
4091
+ id="base-colorsSemanticNegative450"
4092
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 450; ">
4093
+ colorsSemanticNegative450
4094
+ <a href="#base-colorsSemanticNegative450"
4095
+ title="permalink"
4096
+ class="permalink">
4097
+ 🔗
4098
+ </a>
4099
+ </td>
4100
+ <td class="is-vcentered">
4101
+ <pre>#d24c5dff</pre>
4102
+ </td>
4103
+ <td class="is-vcentered">
4104
+ <div class="table__color-preview"
4105
+ style="background-color: #d24c5dff;">
4106
+ </div>
4107
+
4108
+ </td>
4109
+ </tr>
4068
4110
  <tr>
4069
4111
  <td class="with-icons is-vcentered"
4070
4112
  id="base-colorsSemanticNegative500"
package/docs/tokens/base/index.html CHANGED
@@ -4061,6 +4061,48 @@
4061
4061
 
4062
4062
  </td>
4063
4063
  </tr>
4064
+ <tr>
4065
+ <td class="with-icons is-vcentered"
4066
+ id="base-colorsSemanticNegative350"
4067
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 350; ">
4068
+ colorsSemanticNegative350
4069
+ <a href="#base-colorsSemanticNegative350"
4070
+ title="permalink"
4071
+ class="permalink">
4072
+ 🔗
4073
+ </a>
4074
+ </td>
4075
+ <td class="is-vcentered">
4076
+ <pre>#dc7481ff</pre>
4077
+ </td>
4078
+ <td class="is-vcentered">
4079
+ <div class="table__color-preview"
4080
+ style="background-color: #dc7481ff;">
4081
+ </div>
4082
+
4083
+ </td>
4084
+ </tr>
4085
+ <tr>
4086
+ <td class="with-icons is-vcentered"
4087
+ id="base-colorsSemanticNegative450"
4088
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 450; ">
4089
+ colorsSemanticNegative450
4090
+ <a href="#base-colorsSemanticNegative450"
4091
+ title="permalink"
4092
+ class="permalink">
4093
+ 🔗
4094
+ </a>
4095
+ </td>
4096
+ <td class="is-vcentered">
4097
+ <pre>#d24c5dff</pre>
4098
+ </td>
4099
+ <td class="is-vcentered">
4100
+ <div class="table__color-preview"
4101
+ style="background-color: #d24c5dff;">
4102
+ </div>
4103
+
4104
+ </td>
4105
+ </tr>
4064
4106
  <tr>
4065
4107
  <td class="with-icons is-vcentered"
4066
4108
  id="base-colorsSemanticNegative500"
@@ -7322,7 +7364,7 @@
7322
7364
  </a>
7323
7365
  </td>
7324
7366
  <td class="is-vcentered">
7325
- <pre>400 14px/125% Sage UI</pre>
7367
+ <pre>400 14px/150% Sage UI</pre>
7326
7368
  </td>
7327
7369
  <td class="is-vcentered">
7328
7370
  <div class="table__typography-preview">
package/docs/tokens/base/typography/index.html CHANGED
@@ -990,7 +990,7 @@
990
990
  </a>
991
991
  </td>
992
992
  <td class="is-vcentered">
993
- <pre>400 14px/125% Sage UI</pre>
993
+ <pre>400 14px/150% Sage UI</pre>
994
994
  </td>
995
995
  <td class="is-vcentered">
996
996
  <div class="table__typography-preview">
package/docs/tokens/index.html CHANGED
@@ -4067,6 +4067,48 @@
4067
4067
 
4068
4068
  </td>
4069
4069
  </tr>
4070
+ <tr>
4071
+ <td class="with-icons is-vcentered"
4072
+ id="base-colorsSemanticNegative350"
4073
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 350; ">
4074
+ colorsSemanticNegative350
4075
+ <a href="#base-colorsSemanticNegative350"
4076
+ title="permalink"
4077
+ class="permalink">
4078
+ 🔗
4079
+ </a>
4080
+ </td>
4081
+ <td class="is-vcentered">
4082
+ <pre>#dc7481ff</pre>
4083
+ </td>
4084
+ <td class="is-vcentered">
4085
+ <div class="table__color-preview"
4086
+ style="background-color: #dc7481ff;">
4087
+ </div>
4088
+
4089
+ </td>
4090
+ </tr>
4091
+ <tr>
4092
+ <td class="with-icons is-vcentered"
4093
+ id="base-colorsSemanticNegative450"
4094
+ title="theme: base; category: colors; group: semantic; name: negative; variant: 450; ">
4095
+ colorsSemanticNegative450
4096
+ <a href="#base-colorsSemanticNegative450"
4097
+ title="permalink"
4098
+ class="permalink">
4099
+ 🔗
4100
+ </a>
4101
+ </td>
4102
+ <td class="is-vcentered">
4103
+ <pre>#d24c5dff</pre>
4104
+ </td>
4105
+ <td class="is-vcentered">
4106
+ <div class="table__color-preview"
4107
+ style="background-color: #d24c5dff;">
4108
+ </div>
4109
+
4110
+ </td>
4111
+ </tr>
4070
4112
  <tr>
4071
4113
  <td class="with-icons is-vcentered"
4072
4114
  id="base-colorsSemanticNegative500"
@@ -7378,7 +7420,7 @@
7378
7420
  </a>
7379
7421
  </td>
7380
7422
  <td class="is-vcentered">
7381
- <pre>400 14px/125% Sage UI</pre>
7423
+ <pre>400 14px/150% Sage UI</pre>
7382
7424
  </td>
7383
7425
  <td class="is-vcentered">
7384
7426
  <div class="table__typography-preview">
package/ios/base.h CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Mon, 06 Jun 2022 16:34:49 GMT
7
+ // Generated on Thu, 23 Jun 2022 09:49:09 GMT
8
8
 
9
9
 
10
10
  #import <Foundation/Foundation.h>
@@ -192,6 +192,8 @@
192
192
  #define colorsSemanticPositiveYin065 #000000a6
193
193
  #define colorsSemanticPositiveYin090 #000000e6
194
194
  #define colorsSemanticPositiveYang100 #ffffffff
195
+ #define colorsSemanticNegative350 #dc7481ff
196
+ #define colorsSemanticNegative450 #d24c5dff
195
197
  #define colorsSemanticNegative500 #cd384bff
196
198
  #define colorsSemanticNegative600 #a42d3cff
197
199
  #define colorsSemanticNegativeTransparent #00000000
@@ -338,7 +340,7 @@
338
340
  #define typographyDialogParagraphXl Regular 14px/150% Sage UI
339
341
  #define typographyDialogParagraphXxl Regular 14px/150% Sage UI
340
342
  #define typographyDrawerTitleM Bold 22px/125% Sage UI
341
- #define typographyDrawerParagraphM Regular 14px/125% Sage UI
343
+ #define typographyDrawerParagraphM Regular 14px/150% Sage UI
342
344
  #define typographyFlashTextM Regular 14px/150% Sage UI
343
345
  #define typographyFlashTextL Regular 16px/150% Sage UI
344
346
  #define typographyFormFieldLabelXs Medium 14px/150% Sage UI
package/js/base/common.d.ts CHANGED
@@ -180,6 +180,8 @@ export const colorsSemanticPositiveYin055: string;
180
180
  export const colorsSemanticPositiveYin065: string;
181
181
  export const colorsSemanticPositiveYin090: string;
182
182
  export const colorsSemanticPositiveYang100: string;
183
+ export const colorsSemanticNegative350: string;
184
+ export const colorsSemanticNegative450: string;
183
185
  export const colorsSemanticNegative500: string;
184
186
  export const colorsSemanticNegative600: string;
185
187
  export const colorsSemanticNegativeTransparent: 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 Mon, 06 Jun 2022 16:34:49 GMT
7
+ * Generated on Thu, 23 Jun 2022 09:49:09 GMT
8
8
  */
9
9
 
10
10
  module.exports = {
@@ -190,6 +190,8 @@ module.exports = {
190
190
  colorsSemanticPositiveYin065: '#000000a6',
191
191
  colorsSemanticPositiveYin090: '#000000e6',
192
192
  colorsSemanticPositiveYang100: '#ffffffff',
193
+ colorsSemanticNegative350: '#dc7481ff',
194
+ colorsSemanticNegative450: '#d24c5dff',
193
195
  colorsSemanticNegative500: '#cd384bff',
194
196
  colorsSemanticNegative600: '#a42d3cff',
195
197
  colorsSemanticNegativeTransparent: '#00000000',
@@ -336,7 +338,7 @@ module.exports = {
336
338
  typographyDialogParagraphXl: '400 14px/150% Sage UI',
337
339
  typographyDialogParagraphXxl: '400 14px/150% Sage UI',
338
340
  typographyDrawerTitleM: '700 22px/125% Sage UI',
339
- typographyDrawerParagraphM: '400 14px/125% Sage UI',
341
+ typographyDrawerParagraphM: '400 14px/150% Sage UI',
340
342
  typographyFlashTextM: '400 14px/150% Sage UI',
341
343
  typographyFlashTextL: '400 16px/150% Sage UI',
342
344
  typographyFormFieldLabelXs: '500 14px/150% Sage UI',
package/js/base/es6.d.ts CHANGED
@@ -181,6 +181,8 @@ declare namespace _default {
181
181
  const colorsSemanticPositiveYin065: string;
182
182
  const colorsSemanticPositiveYin090: string;
183
183
  const colorsSemanticPositiveYang100: string;
184
+ const colorsSemanticNegative350: string;
185
+ const colorsSemanticNegative450: string;
184
186
  const colorsSemanticNegative500: string;
185
187
  const colorsSemanticNegative600: string;
186
188
  const colorsSemanticNegativeTransparent: string;
package/js/base/es6.js CHANGED
@@ -185,6 +185,8 @@ export default {
185
185
  colorsSemanticPositiveYin065: '#000000a6',
186
186
  colorsSemanticPositiveYin090: '#000000e6',
187
187
  colorsSemanticPositiveYang100: '#ffffffff',
188
+ colorsSemanticNegative350: '#dc7481ff',
189
+ colorsSemanticNegative450: '#d24c5dff',
188
190
  colorsSemanticNegative500: '#cd384bff',
189
191
  colorsSemanticNegative600: '#a42d3cff',
190
192
  colorsSemanticNegativeTransparent: '#00000000',
@@ -331,7 +333,7 @@ export default {
331
333
  typographyDialogParagraphXl: '400 14px/150% Sage UI',
332
334
  typographyDialogParagraphXxl: '400 14px/150% Sage UI',
333
335
  typographyDrawerTitleM: '700 22px/125% Sage UI',
334
- typographyDrawerParagraphM: '400 14px/125% Sage UI',
336
+ typographyDrawerParagraphM: '400 14px/150% Sage UI',
335
337
  typographyFlashTextM: '400 14px/150% Sage UI',
336
338
  typographyFlashTextL: '400 16px/150% Sage UI',
337
339
  typographyFormFieldLabelXs: '500 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.29.0",
13
+ "version": "2.32.0",
14
14
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
15
15
  "tags": [
16
16
  "design tokens",
package/sage-design-tokens-2.32.0.tgz ADDED
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 Mon, 06 Jun 2022 16:34:49 GMT
7
+ // Generated on Thu, 23 Jun 2022 09:49:09 GMT
8
8
 
9
9
  $metaName: Base Theme;
10
10
  $metaPublic: true;
@@ -188,6 +188,8 @@ $colorsSemanticPositiveYin055: #0000008c;
188
188
  $colorsSemanticPositiveYin065: #000000a6;
189
189
  $colorsSemanticPositiveYin090: #000000e6;
190
190
  $colorsSemanticPositiveYang100: #ffffffff;
191
+ $colorsSemanticNegative350: #dc7481ff;
192
+ $colorsSemanticNegative450: #d24c5dff;
191
193
  $colorsSemanticNegative500: #cd384bff;
192
194
  $colorsSemanticNegative600: #a42d3cff;
193
195
  $colorsSemanticNegativeTransparent: #00000000;
@@ -334,7 +336,7 @@ $typographyDialogParagraphL: 400 14px/150% Sage UI;
334
336
  $typographyDialogParagraphXl: 400 14px/150% Sage UI;
335
337
  $typographyDialogParagraphXxl: 400 14px/150% Sage UI;
336
338
  $typographyDrawerTitleM: 700 22px/125% Sage UI;
337
- $typographyDrawerParagraphM: 400 14px/125% Sage UI;
339
+ $typographyDrawerParagraphM: 400 14px/150% Sage UI;
338
340
  $typographyFlashTextM: 400 14px/150% Sage UI;
339
341
  $typographyFlashTextL: 400 16px/150% Sage UI;
340
342
  $typographyFormFieldLabelXs: 500 14px/150% Sage UI;
package/sage-design-tokens-2.29.0.tgz DELETED
Binary file