@sage/design-tokens 2.30.0 → 2.33.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 CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Tue, 07 Jun 2022 16:02:44 GMT
5
+ Generated on Thu, 23 Jun 2022 13:10:35 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>
@@ -313,7 +315,7 @@
313
315
  <string name="typographyCardSelectTitleM">Bold 16px/150% Sage UI</string>
314
316
  <string name="typographyCardSelectSubtitleM">Medium 14px/150% Sage UI</string>
315
317
  <string name="typographyCardSelectParagraphM">Regular 14px/150% Sage UI</string>
316
- <string name="typographyDatePickerCalendarDateM">Bold 14px/150% Sage UI</string>
318
+ <string name="typographyDatePickerCalendarDateM">Medium 14px/150% Sage UI</string>
317
319
  <string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
318
320
  <string name="typographyDatePickerCalendarMonthM">Bold 16px/125% Sage UI</string>
319
321
  <string name="typographyDialogTitleXs">Bold 24px/125% 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, 07 Jun 2022 16:02:44 GMT
7
+ * Generated on Thu, 23 Jun 2022 13:10:35 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;
@@ -316,7 +318,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
316
318
  --typographyCardSelectTitleM: 700 16px/150% Sage UI;
317
319
  --typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
318
320
  --typographyCardSelectParagraphM: 400 14px/150% Sage UI;
319
- --typographyDatePickerCalendarDateM: 700 14px/150% Sage UI;
321
+ --typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
320
322
  --typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
321
323
  --typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
322
324
  --typographyDialogTitleXs: 700 24px/125% 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"
@@ -1771,7 +1779,7 @@
1771
1779
  "m": {
1772
1780
  "value": {
1773
1781
  "fontFamily": "Sage UI",
1774
- "fontWeight": "Bold",
1782
+ "fontWeight": "Medium",
1775
1783
  "lineHeight": "150%",
1776
1784
  "fontSize": "14px",
1777
1785
  "letterSpacing": "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": {
@@ -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"
@@ -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"
@@ -6902,7 +6944,7 @@
6902
6944
  </a>
6903
6945
  </td>
6904
6946
  <td class="is-vcentered">
6905
- <pre>700 14px/150% Sage UI</pre>
6947
+ <pre>500 14px/150% Sage UI</pre>
6906
6948
  </td>
6907
6949
  <td class="is-vcentered">
6908
6950
  <div class="table__typography-preview">
@@ -570,7 +570,7 @@
570
570
  </a>
571
571
  </td>
572
572
  <td class="is-vcentered">
573
- <pre>700 14px/150% Sage UI</pre>
573
+ <pre>500 14px/150% Sage UI</pre>
574
574
  </td>
575
575
  <td class="is-vcentered">
576
576
  <div class="table__typography-preview">
@@ -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"
@@ -6958,7 +7000,7 @@
6958
7000
  </a>
6959
7001
  </td>
6960
7002
  <td class="is-vcentered">
6961
- <pre>700 14px/150% Sage UI</pre>
7003
+ <pre>500 14px/150% Sage UI</pre>
6962
7004
  </td>
6963
7005
  <td class="is-vcentered">
6964
7006
  <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 Tue, 07 Jun 2022 16:02:44 GMT
7
+ // Generated on Thu, 23 Jun 2022 13:10:35 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
@@ -318,7 +320,7 @@
318
320
  #define typographyCardSelectTitleM Bold 16px/150% Sage UI
319
321
  #define typographyCardSelectSubtitleM Medium 14px/150% Sage UI
320
322
  #define typographyCardSelectParagraphM Regular 14px/150% Sage UI
321
- #define typographyDatePickerCalendarDateM Bold 14px/150% Sage UI
323
+ #define typographyDatePickerCalendarDateM Medium 14px/150% Sage UI
322
324
  #define typographyDatePickerCalendarDayM Bold 14px/150% Sage UI
323
325
  #define typographyDatePickerCalendarMonthM Bold 16px/125% Sage UI
324
326
  #define typographyDialogTitleXs Bold 24px/125% Sage UI
@@ -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 Tue, 07 Jun 2022 16:02:44 GMT
7
+ * Generated on Thu, 23 Jun 2022 13:10:34 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',
@@ -316,7 +318,7 @@ module.exports = {
316
318
  typographyCardSelectTitleM: '700 16px/150% Sage UI',
317
319
  typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
318
320
  typographyCardSelectParagraphM: '400 14px/150% Sage UI',
319
- typographyDatePickerCalendarDateM: '700 14px/150% Sage UI',
321
+ typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
320
322
  typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
321
323
  typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
322
324
  typographyDialogTitleXs: '700 24px/125% 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',
@@ -311,7 +313,7 @@ export default {
311
313
  typographyCardSelectTitleM: '700 16px/150% Sage UI',
312
314
  typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
313
315
  typographyCardSelectParagraphM: '400 14px/150% Sage UI',
314
- typographyDatePickerCalendarDateM: '700 14px/150% Sage UI',
316
+ typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
315
317
  typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
316
318
  typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
317
319
  typographyDialogTitleXs: '700 24px/125% 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.30.0",
13
+ "version": "2.33.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, 07 Jun 2022 16:02:44 GMT
7
+ // Generated on Thu, 23 Jun 2022 13:10:35 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;
@@ -314,7 +316,7 @@ $typographyCardParagraphM: 400 14px/150% Sage UI;
314
316
  $typographyCardSelectTitleM: 700 16px/150% Sage UI;
315
317
  $typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
316
318
  $typographyCardSelectParagraphM: 400 14px/150% Sage UI;
317
- $typographyDatePickerCalendarDateM: 700 14px/150% Sage UI;
319
+ $typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
318
320
  $typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
319
321
  $typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
320
322
  $typographyDialogTitleXs: 700 24px/125% Sage UI;
Binary file