@sage/design-tokens 2.21.0 → 2.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/android/base.xml +11 -1
  2. package/css/base.css +11 -1
  3. package/data/tokens.json +133 -3
  4. package/docs/tokens/base/index.html +210 -0
  5. package/docs/tokens/base/typography/index.html +210 -0
  6. package/docs/tokens/index.html +210 -0
  7. package/ios/base.h +11 -1
  8. package/js/base/common.d.ts +10 -0
  9. package/js/base/common.js +11 -1
  10. package/js/base/es6.d.ts +10 -0
  11. package/js/base/es6.js +10 -0
  12. package/package.json +1 -1
  13. package/sage-design-tokens-2.22.0.tgz +0 -0
  14. package/scss/base.scss +11 -1
  15. package/sage-design-tokens-2.21.0.tgz +0 -0
package/android/base.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Wed, 13 Apr 2022 15:23:49 GMT
5
+ Generated on Fri, 22 Apr 2022 14:33:47 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -414,10 +414,20 @@
414
414
  <string name="typographyProgressTrackerValueLabelM">Medium 14px/150% Sage UI</string>
415
415
  <string name="typographyProgressTrackerValueLabelL">Medium 14px/150% Sage UI</string>
416
416
  <string name="typographySearchLabelM">Regular 14px/150% Sage UI</string>
417
+ <string name="typographySidebarTitleXs">Bold 20px/125% Sage UI</string>
417
418
  <string name="typographySidebarTitleS">Bold 20px/125% Sage UI</string>
419
+ <string name="typographySidebarTitleMs">Bold 20px/125% Sage UI</string>
418
420
  <string name="typographySidebarTitleM">Bold 20px/125% Sage UI</string>
421
+ <string name="typographySidebarTitleMl">Bold 20px/125% Sage UI</string>
419
422
  <string name="typographySidebarTitleL">Bold 20px/125% Sage UI</string>
423
+ <string name="typographySidebarTitleXl">Bold 20px/125% Sage UI</string>
424
+ <string name="typographySidebarParagraphXs">0 none</string>
425
+ <string name="typographySidebarParagraphS">0 none</string>
426
+ <string name="typographySidebarParagraphMs">0 none</string>
420
427
  <string name="typographySidebarParagraphM">0 none</string>
428
+ <string name="typographySidebarParagraphMl">0 none</string>
429
+ <string name="typographySidebarParagraphL">0 none</string>
430
+ <string name="typographySidebarParagraphXl">0 none</string>
421
431
  <string name="typographyStepFlowCompleteLabelM">Medium 14px/150% Sage UI</string>
422
432
  <string name="typographyStepFlowCurrentLabelM">Medium 14px/150% Sage UI</string>
423
433
  <string name="typographyStepFlowIncompleteLabelM">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 Wed, 13 Apr 2022 15:23:49 GMT
7
+ * Generated on Fri, 22 Apr 2022 14:33:47 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -417,10 +417,20 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
417
417
  --typographyProgressTrackerValueLabelM: 500 14px/150% Sage UI;
418
418
  --typographyProgressTrackerValueLabelL: 500 14px/150% Sage UI;
419
419
  --typographySearchLabelM: 400 14px/150% Sage UI;
420
+ --typographySidebarTitleXs: 700 20px/125% Sage UI;
420
421
  --typographySidebarTitleS: 700 20px/125% Sage UI;
422
+ --typographySidebarTitleMs: 700 20px/125% Sage UI;
421
423
  --typographySidebarTitleM: 700 20px/125% Sage UI;
424
+ --typographySidebarTitleMl: 700 20px/125% Sage UI;
422
425
  --typographySidebarTitleL: 700 20px/125% Sage UI;
426
+ --typographySidebarTitleXl: 700 20px/125% Sage UI;
427
+ --typographySidebarParagraphXs: 0 none;
428
+ --typographySidebarParagraphS: 0 none;
429
+ --typographySidebarParagraphMs: 0 none;
423
430
  --typographySidebarParagraphM: 0 none;
431
+ --typographySidebarParagraphMl: 0 none;
432
+ --typographySidebarParagraphL: 0 none;
433
+ --typographySidebarParagraphXl: 0 none;
424
434
  --typographyStepFlowCompleteLabelM: 500 14px/150% Sage UI;
425
435
  --typographyStepFlowCurrentLabelM: 500 14px/150% Sage UI;
426
436
  --typographyStepFlowIncompleteLabelM: 500 14px/150% Sage UI;
package/data/tokens.json CHANGED
@@ -3068,6 +3068,19 @@
3068
3068
  },
3069
3069
  "sidebar": {
3070
3070
  "title": {
3071
+ "xs": {
3072
+ "value": {
3073
+ "fontFamily": "Sage UI",
3074
+ "fontWeight": "Bold",
3075
+ "lineHeight": "125%",
3076
+ "fontSize": "20px",
3077
+ "letterSpacing": "0%",
3078
+ "paragraphSpacing": "0px",
3079
+ "textDecoration": "none",
3080
+ "textCase": "none"
3081
+ },
3082
+ "type": "typography"
3083
+ },
3071
3084
  "s": {
3072
3085
  "value": {
3073
3086
  "fontFamily": "Sage UI",
@@ -3075,7 +3088,22 @@
3075
3088
  "lineHeight": "125%",
3076
3089
  "fontSize": "20px",
3077
3090
  "letterSpacing": "0%",
3078
- "paragraphSpacing": "0px"
3091
+ "paragraphSpacing": "0px",
3092
+ "textDecoration": "none",
3093
+ "textCase": "none"
3094
+ },
3095
+ "type": "typography"
3096
+ },
3097
+ "ms": {
3098
+ "value": {
3099
+ "fontFamily": "Sage UI",
3100
+ "fontWeight": "Bold",
3101
+ "lineHeight": "125%",
3102
+ "fontSize": "20px",
3103
+ "letterSpacing": "0%",
3104
+ "paragraphSpacing": "0px",
3105
+ "textDecoration": "none",
3106
+ "textCase": "none"
3079
3107
  },
3080
3108
  "type": "typography"
3081
3109
  },
@@ -3086,7 +3114,22 @@
3086
3114
  "lineHeight": "125%",
3087
3115
  "fontSize": "20px",
3088
3116
  "letterSpacing": "0%",
3089
- "paragraphSpacing": "0px"
3117
+ "paragraphSpacing": "0px",
3118
+ "textDecoration": "none",
3119
+ "textCase": "none"
3120
+ },
3121
+ "type": "typography"
3122
+ },
3123
+ "ml": {
3124
+ "value": {
3125
+ "fontFamily": "Sage UI",
3126
+ "fontWeight": "Bold",
3127
+ "lineHeight": "125%",
3128
+ "fontSize": "20px",
3129
+ "letterSpacing": "0%",
3130
+ "paragraphSpacing": "0px",
3131
+ "textDecoration": "none",
3132
+ "textCase": "none"
3090
3133
  },
3091
3134
  "type": "typography"
3092
3135
  },
@@ -3097,12 +3140,63 @@
3097
3140
  "lineHeight": "125%",
3098
3141
  "fontSize": "20px",
3099
3142
  "letterSpacing": "0%",
3100
- "paragraphSpacing": "0px"
3143
+ "paragraphSpacing": "0px",
3144
+ "textDecoration": "none",
3145
+ "textCase": "none"
3146
+ },
3147
+ "type": "typography"
3148
+ },
3149
+ "xl": {
3150
+ "value": {
3151
+ "fontFamily": "Sage UI",
3152
+ "fontWeight": "Bold",
3153
+ "lineHeight": "125%",
3154
+ "fontSize": "20px",
3155
+ "letterSpacing": "0%",
3156
+ "paragraphSpacing": "0px",
3157
+ "textDecoration": "none",
3158
+ "textCase": "none"
3101
3159
  },
3102
3160
  "type": "typography"
3103
3161
  }
3104
3162
  },
3105
3163
  "paragraph": {
3164
+ "xs": {
3165
+ "value": {
3166
+ "fontFamily": "Sage UI",
3167
+ "fontWeight": "Regular",
3168
+ "lineHeight": "125%",
3169
+ "letterSpacing": "0%",
3170
+ "paragraphSpacing": "0",
3171
+ "textDecoration": "none",
3172
+ "textCase": "none"
3173
+ },
3174
+ "type": "typography"
3175
+ },
3176
+ "s": {
3177
+ "value": {
3178
+ "fontFamily": "Sage UI",
3179
+ "fontWeight": "Regular",
3180
+ "lineHeight": "125%",
3181
+ "letterSpacing": "0%",
3182
+ "paragraphSpacing": "0",
3183
+ "textDecoration": "none",
3184
+ "textCase": "none"
3185
+ },
3186
+ "type": "typography"
3187
+ },
3188
+ "ms": {
3189
+ "value": {
3190
+ "fontFamily": "Sage UI",
3191
+ "fontWeight": "Regular",
3192
+ "lineHeight": "125%",
3193
+ "letterSpacing": "0%",
3194
+ "paragraphSpacing": "0",
3195
+ "textDecoration": "none",
3196
+ "textCase": "none"
3197
+ },
3198
+ "type": "typography"
3199
+ },
3106
3200
  "m": {
3107
3201
  "value": {
3108
3202
  "fontFamily": "Sage UI",
@@ -3114,6 +3208,42 @@
3114
3208
  "textCase": "none"
3115
3209
  },
3116
3210
  "type": "typography"
3211
+ },
3212
+ "ml": {
3213
+ "value": {
3214
+ "fontFamily": "Sage UI",
3215
+ "fontWeight": "Regular",
3216
+ "lineHeight": "125%",
3217
+ "letterSpacing": "0%",
3218
+ "paragraphSpacing": "0",
3219
+ "textDecoration": "none",
3220
+ "textCase": "none"
3221
+ },
3222
+ "type": "typography"
3223
+ },
3224
+ "l": {
3225
+ "value": {
3226
+ "fontFamily": "Sage UI",
3227
+ "fontWeight": "Regular",
3228
+ "lineHeight": "125%",
3229
+ "letterSpacing": "0%",
3230
+ "paragraphSpacing": "0",
3231
+ "textDecoration": "none",
3232
+ "textCase": "none"
3233
+ },
3234
+ "type": "typography"
3235
+ },
3236
+ "xl": {
3237
+ "value": {
3238
+ "fontFamily": "Sage UI",
3239
+ "fontWeight": "Regular",
3240
+ "lineHeight": "125%",
3241
+ "letterSpacing": "0%",
3242
+ "paragraphSpacing": "0",
3243
+ "textDecoration": "none",
3244
+ "textCase": "none"
3245
+ },
3246
+ "type": "typography"
3117
3247
  }
3118
3248
  }
3119
3249
  },
package/docs/tokens/base/index.html CHANGED
@@ -9011,6 +9011,27 @@
9011
9011
 
9012
9012
  </td>
9013
9013
  </tr>
9014
+ <tr>
9015
+ <td class="with-icons is-vcentered"
9016
+ id="base-typographySidebarTitleXs"
9017
+ title="theme: base; category: typography; group: sidebar; name: title; variant: xs; ">
9018
+ typographySidebarTitleXs
9019
+ <a href="#base-typographySidebarTitleXs"
9020
+ title="permalink"
9021
+ class="permalink">
9022
+ 🔗
9023
+ </a>
9024
+ </td>
9025
+ <td class="is-vcentered">
9026
+ <pre>700 20px/125% Sage UI</pre>
9027
+ </td>
9028
+ <td class="is-vcentered">
9029
+ <div class="table__typography-preview">
9030
+ n/a
9031
+ </div>
9032
+
9033
+ </td>
9034
+ </tr>
9014
9035
  <tr>
9015
9036
  <td class="with-icons is-vcentered"
9016
9037
  id="base-typographySidebarTitleS"
@@ -9032,6 +9053,27 @@
9032
9053
 
9033
9054
  </td>
9034
9055
  </tr>
9056
+ <tr>
9057
+ <td class="with-icons is-vcentered"
9058
+ id="base-typographySidebarTitleMs"
9059
+ title="theme: base; category: typography; group: sidebar; name: title; variant: ms; ">
9060
+ typographySidebarTitleMs
9061
+ <a href="#base-typographySidebarTitleMs"
9062
+ title="permalink"
9063
+ class="permalink">
9064
+ 🔗
9065
+ </a>
9066
+ </td>
9067
+ <td class="is-vcentered">
9068
+ <pre>700 20px/125% Sage UI</pre>
9069
+ </td>
9070
+ <td class="is-vcentered">
9071
+ <div class="table__typography-preview">
9072
+ n/a
9073
+ </div>
9074
+
9075
+ </td>
9076
+ </tr>
9035
9077
  <tr>
9036
9078
  <td class="with-icons is-vcentered"
9037
9079
  id="base-typographySidebarTitleM"
@@ -9053,6 +9095,27 @@
9053
9095
 
9054
9096
  </td>
9055
9097
  </tr>
9098
+ <tr>
9099
+ <td class="with-icons is-vcentered"
9100
+ id="base-typographySidebarTitleMl"
9101
+ title="theme: base; category: typography; group: sidebar; name: title; variant: ml; ">
9102
+ typographySidebarTitleMl
9103
+ <a href="#base-typographySidebarTitleMl"
9104
+ title="permalink"
9105
+ class="permalink">
9106
+ 🔗
9107
+ </a>
9108
+ </td>
9109
+ <td class="is-vcentered">
9110
+ <pre>700 20px/125% Sage UI</pre>
9111
+ </td>
9112
+ <td class="is-vcentered">
9113
+ <div class="table__typography-preview">
9114
+ n/a
9115
+ </div>
9116
+
9117
+ </td>
9118
+ </tr>
9056
9119
  <tr>
9057
9120
  <td class="with-icons is-vcentered"
9058
9121
  id="base-typographySidebarTitleL"
@@ -9074,6 +9137,90 @@
9074
9137
 
9075
9138
  </td>
9076
9139
  </tr>
9140
+ <tr>
9141
+ <td class="with-icons is-vcentered"
9142
+ id="base-typographySidebarTitleXl"
9143
+ title="theme: base; category: typography; group: sidebar; name: title; variant: xl; ">
9144
+ typographySidebarTitleXl
9145
+ <a href="#base-typographySidebarTitleXl"
9146
+ title="permalink"
9147
+ class="permalink">
9148
+ 🔗
9149
+ </a>
9150
+ </td>
9151
+ <td class="is-vcentered">
9152
+ <pre>700 20px/125% Sage UI</pre>
9153
+ </td>
9154
+ <td class="is-vcentered">
9155
+ <div class="table__typography-preview">
9156
+ n/a
9157
+ </div>
9158
+
9159
+ </td>
9160
+ </tr>
9161
+ <tr>
9162
+ <td class="with-icons is-vcentered"
9163
+ id="base-typographySidebarParagraphXs"
9164
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xs; ">
9165
+ typographySidebarParagraphXs
9166
+ <a href="#base-typographySidebarParagraphXs"
9167
+ title="permalink"
9168
+ class="permalink">
9169
+ 🔗
9170
+ </a>
9171
+ </td>
9172
+ <td class="is-vcentered">
9173
+ <pre>0 none</pre>
9174
+ </td>
9175
+ <td class="is-vcentered">
9176
+ <div class="table__typography-preview">
9177
+ n/a
9178
+ </div>
9179
+
9180
+ </td>
9181
+ </tr>
9182
+ <tr>
9183
+ <td class="with-icons is-vcentered"
9184
+ id="base-typographySidebarParagraphS"
9185
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: s; ">
9186
+ typographySidebarParagraphS
9187
+ <a href="#base-typographySidebarParagraphS"
9188
+ title="permalink"
9189
+ class="permalink">
9190
+ 🔗
9191
+ </a>
9192
+ </td>
9193
+ <td class="is-vcentered">
9194
+ <pre>0 none</pre>
9195
+ </td>
9196
+ <td class="is-vcentered">
9197
+ <div class="table__typography-preview">
9198
+ n/a
9199
+ </div>
9200
+
9201
+ </td>
9202
+ </tr>
9203
+ <tr>
9204
+ <td class="with-icons is-vcentered"
9205
+ id="base-typographySidebarParagraphMs"
9206
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ms; ">
9207
+ typographySidebarParagraphMs
9208
+ <a href="#base-typographySidebarParagraphMs"
9209
+ title="permalink"
9210
+ class="permalink">
9211
+ 🔗
9212
+ </a>
9213
+ </td>
9214
+ <td class="is-vcentered">
9215
+ <pre>0 none</pre>
9216
+ </td>
9217
+ <td class="is-vcentered">
9218
+ <div class="table__typography-preview">
9219
+ n/a
9220
+ </div>
9221
+
9222
+ </td>
9223
+ </tr>
9077
9224
  <tr>
9078
9225
  <td class="with-icons is-vcentered"
9079
9226
  id="base-typographySidebarParagraphM"
@@ -9095,6 +9242,69 @@
9095
9242
 
9096
9243
  </td>
9097
9244
  </tr>
9245
+ <tr>
9246
+ <td class="with-icons is-vcentered"
9247
+ id="base-typographySidebarParagraphMl"
9248
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ml; ">
9249
+ typographySidebarParagraphMl
9250
+ <a href="#base-typographySidebarParagraphMl"
9251
+ title="permalink"
9252
+ class="permalink">
9253
+ 🔗
9254
+ </a>
9255
+ </td>
9256
+ <td class="is-vcentered">
9257
+ <pre>0 none</pre>
9258
+ </td>
9259
+ <td class="is-vcentered">
9260
+ <div class="table__typography-preview">
9261
+ n/a
9262
+ </div>
9263
+
9264
+ </td>
9265
+ </tr>
9266
+ <tr>
9267
+ <td class="with-icons is-vcentered"
9268
+ id="base-typographySidebarParagraphL"
9269
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: l; ">
9270
+ typographySidebarParagraphL
9271
+ <a href="#base-typographySidebarParagraphL"
9272
+ title="permalink"
9273
+ class="permalink">
9274
+ 🔗
9275
+ </a>
9276
+ </td>
9277
+ <td class="is-vcentered">
9278
+ <pre>0 none</pre>
9279
+ </td>
9280
+ <td class="is-vcentered">
9281
+ <div class="table__typography-preview">
9282
+ n/a
9283
+ </div>
9284
+
9285
+ </td>
9286
+ </tr>
9287
+ <tr>
9288
+ <td class="with-icons is-vcentered"
9289
+ id="base-typographySidebarParagraphXl"
9290
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xl; ">
9291
+ typographySidebarParagraphXl
9292
+ <a href="#base-typographySidebarParagraphXl"
9293
+ title="permalink"
9294
+ class="permalink">
9295
+ 🔗
9296
+ </a>
9297
+ </td>
9298
+ <td class="is-vcentered">
9299
+ <pre>0 none</pre>
9300
+ </td>
9301
+ <td class="is-vcentered">
9302
+ <div class="table__typography-preview">
9303
+ n/a
9304
+ </div>
9305
+
9306
+ </td>
9307
+ </tr>
9098
9308
  <tr>
9099
9309
  <td class="with-icons is-vcentered"
9100
9310
  id="base-typographyStepFlowCompleteLabelM"
package/docs/tokens/base/typography/index.html CHANGED
@@ -2700,6 +2700,27 @@
2700
2700
 
2701
2701
  </td>
2702
2702
  </tr>
2703
+ <tr>
2704
+ <td class="with-icons is-vcentered"
2705
+ id="base-typographySidebarTitleXs"
2706
+ title="theme: base; category: typography; group: sidebar; name: title; variant: xs; ">
2707
+ typographySidebarTitleXs
2708
+ <a href="#base-typographySidebarTitleXs"
2709
+ title="permalink"
2710
+ class="permalink">
2711
+ 🔗
2712
+ </a>
2713
+ </td>
2714
+ <td class="is-vcentered">
2715
+ <pre>700 20px/125% Sage UI</pre>
2716
+ </td>
2717
+ <td class="is-vcentered">
2718
+ <div class="table__typography-preview">
2719
+ n/a
2720
+ </div>
2721
+
2722
+ </td>
2723
+ </tr>
2703
2724
  <tr>
2704
2725
  <td class="with-icons is-vcentered"
2705
2726
  id="base-typographySidebarTitleS"
@@ -2721,6 +2742,27 @@
2721
2742
 
2722
2743
  </td>
2723
2744
  </tr>
2745
+ <tr>
2746
+ <td class="with-icons is-vcentered"
2747
+ id="base-typographySidebarTitleMs"
2748
+ title="theme: base; category: typography; group: sidebar; name: title; variant: ms; ">
2749
+ typographySidebarTitleMs
2750
+ <a href="#base-typographySidebarTitleMs"
2751
+ title="permalink"
2752
+ class="permalink">
2753
+ 🔗
2754
+ </a>
2755
+ </td>
2756
+ <td class="is-vcentered">
2757
+ <pre>700 20px/125% Sage UI</pre>
2758
+ </td>
2759
+ <td class="is-vcentered">
2760
+ <div class="table__typography-preview">
2761
+ n/a
2762
+ </div>
2763
+
2764
+ </td>
2765
+ </tr>
2724
2766
  <tr>
2725
2767
  <td class="with-icons is-vcentered"
2726
2768
  id="base-typographySidebarTitleM"
@@ -2742,6 +2784,27 @@
2742
2784
 
2743
2785
  </td>
2744
2786
  </tr>
2787
+ <tr>
2788
+ <td class="with-icons is-vcentered"
2789
+ id="base-typographySidebarTitleMl"
2790
+ title="theme: base; category: typography; group: sidebar; name: title; variant: ml; ">
2791
+ typographySidebarTitleMl
2792
+ <a href="#base-typographySidebarTitleMl"
2793
+ title="permalink"
2794
+ class="permalink">
2795
+ 🔗
2796
+ </a>
2797
+ </td>
2798
+ <td class="is-vcentered">
2799
+ <pre>700 20px/125% Sage UI</pre>
2800
+ </td>
2801
+ <td class="is-vcentered">
2802
+ <div class="table__typography-preview">
2803
+ n/a
2804
+ </div>
2805
+
2806
+ </td>
2807
+ </tr>
2745
2808
  <tr>
2746
2809
  <td class="with-icons is-vcentered"
2747
2810
  id="base-typographySidebarTitleL"
@@ -2763,6 +2826,90 @@
2763
2826
 
2764
2827
  </td>
2765
2828
  </tr>
2829
+ <tr>
2830
+ <td class="with-icons is-vcentered"
2831
+ id="base-typographySidebarTitleXl"
2832
+ title="theme: base; category: typography; group: sidebar; name: title; variant: xl; ">
2833
+ typographySidebarTitleXl
2834
+ <a href="#base-typographySidebarTitleXl"
2835
+ title="permalink"
2836
+ class="permalink">
2837
+ 🔗
2838
+ </a>
2839
+ </td>
2840
+ <td class="is-vcentered">
2841
+ <pre>700 20px/125% Sage UI</pre>
2842
+ </td>
2843
+ <td class="is-vcentered">
2844
+ <div class="table__typography-preview">
2845
+ n/a
2846
+ </div>
2847
+
2848
+ </td>
2849
+ </tr>
2850
+ <tr>
2851
+ <td class="with-icons is-vcentered"
2852
+ id="base-typographySidebarParagraphXs"
2853
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xs; ">
2854
+ typographySidebarParagraphXs
2855
+ <a href="#base-typographySidebarParagraphXs"
2856
+ title="permalink"
2857
+ class="permalink">
2858
+ 🔗
2859
+ </a>
2860
+ </td>
2861
+ <td class="is-vcentered">
2862
+ <pre>0 none</pre>
2863
+ </td>
2864
+ <td class="is-vcentered">
2865
+ <div class="table__typography-preview">
2866
+ n/a
2867
+ </div>
2868
+
2869
+ </td>
2870
+ </tr>
2871
+ <tr>
2872
+ <td class="with-icons is-vcentered"
2873
+ id="base-typographySidebarParagraphS"
2874
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: s; ">
2875
+ typographySidebarParagraphS
2876
+ <a href="#base-typographySidebarParagraphS"
2877
+ title="permalink"
2878
+ class="permalink">
2879
+ 🔗
2880
+ </a>
2881
+ </td>
2882
+ <td class="is-vcentered">
2883
+ <pre>0 none</pre>
2884
+ </td>
2885
+ <td class="is-vcentered">
2886
+ <div class="table__typography-preview">
2887
+ n/a
2888
+ </div>
2889
+
2890
+ </td>
2891
+ </tr>
2892
+ <tr>
2893
+ <td class="with-icons is-vcentered"
2894
+ id="base-typographySidebarParagraphMs"
2895
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ms; ">
2896
+ typographySidebarParagraphMs
2897
+ <a href="#base-typographySidebarParagraphMs"
2898
+ title="permalink"
2899
+ class="permalink">
2900
+ 🔗
2901
+ </a>
2902
+ </td>
2903
+ <td class="is-vcentered">
2904
+ <pre>0 none</pre>
2905
+ </td>
2906
+ <td class="is-vcentered">
2907
+ <div class="table__typography-preview">
2908
+ n/a
2909
+ </div>
2910
+
2911
+ </td>
2912
+ </tr>
2766
2913
  <tr>
2767
2914
  <td class="with-icons is-vcentered"
2768
2915
  id="base-typographySidebarParagraphM"
@@ -2784,6 +2931,69 @@
2784
2931
 
2785
2932
  </td>
2786
2933
  </tr>
2934
+ <tr>
2935
+ <td class="with-icons is-vcentered"
2936
+ id="base-typographySidebarParagraphMl"
2937
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ml; ">
2938
+ typographySidebarParagraphMl
2939
+ <a href="#base-typographySidebarParagraphMl"
2940
+ title="permalink"
2941
+ class="permalink">
2942
+ 🔗
2943
+ </a>
2944
+ </td>
2945
+ <td class="is-vcentered">
2946
+ <pre>0 none</pre>
2947
+ </td>
2948
+ <td class="is-vcentered">
2949
+ <div class="table__typography-preview">
2950
+ n/a
2951
+ </div>
2952
+
2953
+ </td>
2954
+ </tr>
2955
+ <tr>
2956
+ <td class="with-icons is-vcentered"
2957
+ id="base-typographySidebarParagraphL"
2958
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: l; ">
2959
+ typographySidebarParagraphL
2960
+ <a href="#base-typographySidebarParagraphL"
2961
+ title="permalink"
2962
+ class="permalink">
2963
+ 🔗
2964
+ </a>
2965
+ </td>
2966
+ <td class="is-vcentered">
2967
+ <pre>0 none</pre>
2968
+ </td>
2969
+ <td class="is-vcentered">
2970
+ <div class="table__typography-preview">
2971
+ n/a
2972
+ </div>
2973
+
2974
+ </td>
2975
+ </tr>
2976
+ <tr>
2977
+ <td class="with-icons is-vcentered"
2978
+ id="base-typographySidebarParagraphXl"
2979
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xl; ">
2980
+ typographySidebarParagraphXl
2981
+ <a href="#base-typographySidebarParagraphXl"
2982
+ title="permalink"
2983
+ class="permalink">
2984
+ 🔗
2985
+ </a>
2986
+ </td>
2987
+ <td class="is-vcentered">
2988
+ <pre>0 none</pre>
2989
+ </td>
2990
+ <td class="is-vcentered">
2991
+ <div class="table__typography-preview">
2992
+ n/a
2993
+ </div>
2994
+
2995
+ </td>
2996
+ </tr>
2787
2997
  <tr>
2788
2998
  <td class="with-icons is-vcentered"
2789
2999
  id="base-typographyStepFlowCompleteLabelM"
package/docs/tokens/index.html CHANGED
@@ -9067,6 +9067,27 @@
9067
9067
 
9068
9068
  </td>
9069
9069
  </tr>
9070
+ <tr>
9071
+ <td class="with-icons is-vcentered"
9072
+ id="base-typographySidebarTitleXs"
9073
+ title="theme: base; category: typography; group: sidebar; name: title; variant: xs; ">
9074
+ typographySidebarTitleXs
9075
+ <a href="#base-typographySidebarTitleXs"
9076
+ title="permalink"
9077
+ class="permalink">
9078
+ 🔗
9079
+ </a>
9080
+ </td>
9081
+ <td class="is-vcentered">
9082
+ <pre>700 20px/125% Sage UI</pre>
9083
+ </td>
9084
+ <td class="is-vcentered">
9085
+ <div class="table__typography-preview">
9086
+ n/a
9087
+ </div>
9088
+
9089
+ </td>
9090
+ </tr>
9070
9091
  <tr>
9071
9092
  <td class="with-icons is-vcentered"
9072
9093
  id="base-typographySidebarTitleS"
@@ -9088,6 +9109,27 @@
9088
9109
 
9089
9110
  </td>
9090
9111
  </tr>
9112
+ <tr>
9113
+ <td class="with-icons is-vcentered"
9114
+ id="base-typographySidebarTitleMs"
9115
+ title="theme: base; category: typography; group: sidebar; name: title; variant: ms; ">
9116
+ typographySidebarTitleMs
9117
+ <a href="#base-typographySidebarTitleMs"
9118
+ title="permalink"
9119
+ class="permalink">
9120
+ 🔗
9121
+ </a>
9122
+ </td>
9123
+ <td class="is-vcentered">
9124
+ <pre>700 20px/125% Sage UI</pre>
9125
+ </td>
9126
+ <td class="is-vcentered">
9127
+ <div class="table__typography-preview">
9128
+ n/a
9129
+ </div>
9130
+
9131
+ </td>
9132
+ </tr>
9091
9133
  <tr>
9092
9134
  <td class="with-icons is-vcentered"
9093
9135
  id="base-typographySidebarTitleM"
@@ -9109,6 +9151,27 @@
9109
9151
 
9110
9152
  </td>
9111
9153
  </tr>
9154
+ <tr>
9155
+ <td class="with-icons is-vcentered"
9156
+ id="base-typographySidebarTitleMl"
9157
+ title="theme: base; category: typography; group: sidebar; name: title; variant: ml; ">
9158
+ typographySidebarTitleMl
9159
+ <a href="#base-typographySidebarTitleMl"
9160
+ title="permalink"
9161
+ class="permalink">
9162
+ 🔗
9163
+ </a>
9164
+ </td>
9165
+ <td class="is-vcentered">
9166
+ <pre>700 20px/125% Sage UI</pre>
9167
+ </td>
9168
+ <td class="is-vcentered">
9169
+ <div class="table__typography-preview">
9170
+ n/a
9171
+ </div>
9172
+
9173
+ </td>
9174
+ </tr>
9112
9175
  <tr>
9113
9176
  <td class="with-icons is-vcentered"
9114
9177
  id="base-typographySidebarTitleL"
@@ -9130,6 +9193,90 @@
9130
9193
 
9131
9194
  </td>
9132
9195
  </tr>
9196
+ <tr>
9197
+ <td class="with-icons is-vcentered"
9198
+ id="base-typographySidebarTitleXl"
9199
+ title="theme: base; category: typography; group: sidebar; name: title; variant: xl; ">
9200
+ typographySidebarTitleXl
9201
+ <a href="#base-typographySidebarTitleXl"
9202
+ title="permalink"
9203
+ class="permalink">
9204
+ 🔗
9205
+ </a>
9206
+ </td>
9207
+ <td class="is-vcentered">
9208
+ <pre>700 20px/125% Sage UI</pre>
9209
+ </td>
9210
+ <td class="is-vcentered">
9211
+ <div class="table__typography-preview">
9212
+ n/a
9213
+ </div>
9214
+
9215
+ </td>
9216
+ </tr>
9217
+ <tr>
9218
+ <td class="with-icons is-vcentered"
9219
+ id="base-typographySidebarParagraphXs"
9220
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xs; ">
9221
+ typographySidebarParagraphXs
9222
+ <a href="#base-typographySidebarParagraphXs"
9223
+ title="permalink"
9224
+ class="permalink">
9225
+ 🔗
9226
+ </a>
9227
+ </td>
9228
+ <td class="is-vcentered">
9229
+ <pre>0 none</pre>
9230
+ </td>
9231
+ <td class="is-vcentered">
9232
+ <div class="table__typography-preview">
9233
+ n/a
9234
+ </div>
9235
+
9236
+ </td>
9237
+ </tr>
9238
+ <tr>
9239
+ <td class="with-icons is-vcentered"
9240
+ id="base-typographySidebarParagraphS"
9241
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: s; ">
9242
+ typographySidebarParagraphS
9243
+ <a href="#base-typographySidebarParagraphS"
9244
+ title="permalink"
9245
+ class="permalink">
9246
+ 🔗
9247
+ </a>
9248
+ </td>
9249
+ <td class="is-vcentered">
9250
+ <pre>0 none</pre>
9251
+ </td>
9252
+ <td class="is-vcentered">
9253
+ <div class="table__typography-preview">
9254
+ n/a
9255
+ </div>
9256
+
9257
+ </td>
9258
+ </tr>
9259
+ <tr>
9260
+ <td class="with-icons is-vcentered"
9261
+ id="base-typographySidebarParagraphMs"
9262
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ms; ">
9263
+ typographySidebarParagraphMs
9264
+ <a href="#base-typographySidebarParagraphMs"
9265
+ title="permalink"
9266
+ class="permalink">
9267
+ 🔗
9268
+ </a>
9269
+ </td>
9270
+ <td class="is-vcentered">
9271
+ <pre>0 none</pre>
9272
+ </td>
9273
+ <td class="is-vcentered">
9274
+ <div class="table__typography-preview">
9275
+ n/a
9276
+ </div>
9277
+
9278
+ </td>
9279
+ </tr>
9133
9280
  <tr>
9134
9281
  <td class="with-icons is-vcentered"
9135
9282
  id="base-typographySidebarParagraphM"
@@ -9151,6 +9298,69 @@
9151
9298
 
9152
9299
  </td>
9153
9300
  </tr>
9301
+ <tr>
9302
+ <td class="with-icons is-vcentered"
9303
+ id="base-typographySidebarParagraphMl"
9304
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: ml; ">
9305
+ typographySidebarParagraphMl
9306
+ <a href="#base-typographySidebarParagraphMl"
9307
+ title="permalink"
9308
+ class="permalink">
9309
+ 🔗
9310
+ </a>
9311
+ </td>
9312
+ <td class="is-vcentered">
9313
+ <pre>0 none</pre>
9314
+ </td>
9315
+ <td class="is-vcentered">
9316
+ <div class="table__typography-preview">
9317
+ n/a
9318
+ </div>
9319
+
9320
+ </td>
9321
+ </tr>
9322
+ <tr>
9323
+ <td class="with-icons is-vcentered"
9324
+ id="base-typographySidebarParagraphL"
9325
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: l; ">
9326
+ typographySidebarParagraphL
9327
+ <a href="#base-typographySidebarParagraphL"
9328
+ title="permalink"
9329
+ class="permalink">
9330
+ 🔗
9331
+ </a>
9332
+ </td>
9333
+ <td class="is-vcentered">
9334
+ <pre>0 none</pre>
9335
+ </td>
9336
+ <td class="is-vcentered">
9337
+ <div class="table__typography-preview">
9338
+ n/a
9339
+ </div>
9340
+
9341
+ </td>
9342
+ </tr>
9343
+ <tr>
9344
+ <td class="with-icons is-vcentered"
9345
+ id="base-typographySidebarParagraphXl"
9346
+ title="theme: base; category: typography; group: sidebar; name: paragraph; variant: xl; ">
9347
+ typographySidebarParagraphXl
9348
+ <a href="#base-typographySidebarParagraphXl"
9349
+ title="permalink"
9350
+ class="permalink">
9351
+ 🔗
9352
+ </a>
9353
+ </td>
9354
+ <td class="is-vcentered">
9355
+ <pre>0 none</pre>
9356
+ </td>
9357
+ <td class="is-vcentered">
9358
+ <div class="table__typography-preview">
9359
+ n/a
9360
+ </div>
9361
+
9362
+ </td>
9363
+ </tr>
9154
9364
  <tr>
9155
9365
  <td class="with-icons is-vcentered"
9156
9366
  id="base-typographyStepFlowCompleteLabelM"
package/ios/base.h CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Wed, 13 Apr 2022 15:23:49 GMT
7
+ // Generated on Fri, 22 Apr 2022 14:33:47 GMT
8
8
 
9
9
 
10
10
  #import <Foundation/Foundation.h>
@@ -419,10 +419,20 @@
419
419
  #define typographyProgressTrackerValueLabelM Medium 14px/150% Sage UI
420
420
  #define typographyProgressTrackerValueLabelL Medium 14px/150% Sage UI
421
421
  #define typographySearchLabelM Regular 14px/150% Sage UI
422
+ #define typographySidebarTitleXs Bold 20px/125% Sage UI
422
423
  #define typographySidebarTitleS Bold 20px/125% Sage UI
424
+ #define typographySidebarTitleMs Bold 20px/125% Sage UI
423
425
  #define typographySidebarTitleM Bold 20px/125% Sage UI
426
+ #define typographySidebarTitleMl Bold 20px/125% Sage UI
424
427
  #define typographySidebarTitleL Bold 20px/125% Sage UI
428
+ #define typographySidebarTitleXl Bold 20px/125% Sage UI
429
+ #define typographySidebarParagraphXs 0 none
430
+ #define typographySidebarParagraphS 0 none
431
+ #define typographySidebarParagraphMs 0 none
425
432
  #define typographySidebarParagraphM 0 none
433
+ #define typographySidebarParagraphMl 0 none
434
+ #define typographySidebarParagraphL 0 none
435
+ #define typographySidebarParagraphXl 0 none
426
436
  #define typographyStepFlowCompleteLabelM Medium 14px/150% Sage UI
427
437
  #define typographyStepFlowCurrentLabelM Medium 14px/150% Sage UI
428
438
  #define typographyStepFlowIncompleteLabelM Medium 14px/150% Sage UI
package/js/base/common.d.ts CHANGED
@@ -407,10 +407,20 @@ export const typographyProgressTrackerValueLabelS: string;
407
407
  export const typographyProgressTrackerValueLabelM: string;
408
408
  export const typographyProgressTrackerValueLabelL: string;
409
409
  export const typographySearchLabelM: string;
410
+ export const typographySidebarTitleXs: string;
410
411
  export const typographySidebarTitleS: string;
412
+ export const typographySidebarTitleMs: string;
411
413
  export const typographySidebarTitleM: string;
414
+ export const typographySidebarTitleMl: string;
412
415
  export const typographySidebarTitleL: string;
416
+ export const typographySidebarTitleXl: string;
417
+ export const typographySidebarParagraphXs: string;
418
+ export const typographySidebarParagraphS: string;
419
+ export const typographySidebarParagraphMs: string;
413
420
  export const typographySidebarParagraphM: string;
421
+ export const typographySidebarParagraphMl: string;
422
+ export const typographySidebarParagraphL: string;
423
+ export const typographySidebarParagraphXl: string;
414
424
  export const typographyStepFlowCompleteLabelM: string;
415
425
  export const typographyStepFlowCurrentLabelM: string;
416
426
  export const typographyStepFlowIncompleteLabelM: 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 Wed, 13 Apr 2022 15:23:49 GMT
7
+ * Generated on Fri, 22 Apr 2022 14:33:47 GMT
8
8
  */
9
9
 
10
10
  module.exports = {
@@ -417,10 +417,20 @@ module.exports = {
417
417
  typographyProgressTrackerValueLabelM: '500 14px/150% Sage UI',
418
418
  typographyProgressTrackerValueLabelL: '500 14px/150% Sage UI',
419
419
  typographySearchLabelM: '400 14px/150% Sage UI',
420
+ typographySidebarTitleXs: '700 20px/125% Sage UI',
420
421
  typographySidebarTitleS: '700 20px/125% Sage UI',
422
+ typographySidebarTitleMs: '700 20px/125% Sage UI',
421
423
  typographySidebarTitleM: '700 20px/125% Sage UI',
424
+ typographySidebarTitleMl: '700 20px/125% Sage UI',
422
425
  typographySidebarTitleL: '700 20px/125% Sage UI',
426
+ typographySidebarTitleXl: '700 20px/125% Sage UI',
427
+ typographySidebarParagraphXs: '0 none',
428
+ typographySidebarParagraphS: '0 none',
429
+ typographySidebarParagraphMs: '0 none',
423
430
  typographySidebarParagraphM: '0 none',
431
+ typographySidebarParagraphMl: '0 none',
432
+ typographySidebarParagraphL: '0 none',
433
+ typographySidebarParagraphXl: '0 none',
424
434
  typographyStepFlowCompleteLabelM: '500 14px/150% Sage UI',
425
435
  typographyStepFlowCurrentLabelM: '500 14px/150% Sage UI',
426
436
  typographyStepFlowIncompleteLabelM: '500 14px/150% Sage UI',
package/js/base/es6.d.ts CHANGED
@@ -408,10 +408,20 @@ declare namespace _default {
408
408
  const typographyProgressTrackerValueLabelM: string;
409
409
  const typographyProgressTrackerValueLabelL: string;
410
410
  const typographySearchLabelM: string;
411
+ const typographySidebarTitleXs: string;
411
412
  const typographySidebarTitleS: string;
413
+ const typographySidebarTitleMs: string;
412
414
  const typographySidebarTitleM: string;
415
+ const typographySidebarTitleMl: string;
413
416
  const typographySidebarTitleL: string;
417
+ const typographySidebarTitleXl: string;
418
+ const typographySidebarParagraphXs: string;
419
+ const typographySidebarParagraphS: string;
420
+ const typographySidebarParagraphMs: string;
414
421
  const typographySidebarParagraphM: string;
422
+ const typographySidebarParagraphMl: string;
423
+ const typographySidebarParagraphL: string;
424
+ const typographySidebarParagraphXl: string;
415
425
  const typographyStepFlowCompleteLabelM: string;
416
426
  const typographyStepFlowCurrentLabelM: string;
417
427
  const typographyStepFlowIncompleteLabelM: string;
package/js/base/es6.js CHANGED
@@ -412,10 +412,20 @@ export default {
412
412
  typographyProgressTrackerValueLabelM: '500 14px/150% Sage UI',
413
413
  typographyProgressTrackerValueLabelL: '500 14px/150% Sage UI',
414
414
  typographySearchLabelM: '400 14px/150% Sage UI',
415
+ typographySidebarTitleXs: '700 20px/125% Sage UI',
415
416
  typographySidebarTitleS: '700 20px/125% Sage UI',
417
+ typographySidebarTitleMs: '700 20px/125% Sage UI',
416
418
  typographySidebarTitleM: '700 20px/125% Sage UI',
419
+ typographySidebarTitleMl: '700 20px/125% Sage UI',
417
420
  typographySidebarTitleL: '700 20px/125% Sage UI',
421
+ typographySidebarTitleXl: '700 20px/125% Sage UI',
422
+ typographySidebarParagraphXs: '0 none',
423
+ typographySidebarParagraphS: '0 none',
424
+ typographySidebarParagraphMs: '0 none',
418
425
  typographySidebarParagraphM: '0 none',
426
+ typographySidebarParagraphMl: '0 none',
427
+ typographySidebarParagraphL: '0 none',
428
+ typographySidebarParagraphXl: '0 none',
419
429
  typographyStepFlowCompleteLabelM: '500 14px/150% Sage UI',
420
430
  typographyStepFlowCurrentLabelM: '500 14px/150% Sage UI',
421
431
  typographyStepFlowIncompleteLabelM: '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.21.0",
13
+ "version": "2.22.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.22.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 Wed, 13 Apr 2022 15:23:49 GMT
7
+ // Generated on Fri, 22 Apr 2022 14:33:47 GMT
8
8
 
9
9
  $metaName: Base Theme;
10
10
  $metaPublic: true;
@@ -415,10 +415,20 @@ $typographyProgressTrackerValueLabelS: 500 14px/150% Sage UI;
415
415
  $typographyProgressTrackerValueLabelM: 500 14px/150% Sage UI;
416
416
  $typographyProgressTrackerValueLabelL: 500 14px/150% Sage UI;
417
417
  $typographySearchLabelM: 400 14px/150% Sage UI;
418
+ $typographySidebarTitleXs: 700 20px/125% Sage UI;
418
419
  $typographySidebarTitleS: 700 20px/125% Sage UI;
420
+ $typographySidebarTitleMs: 700 20px/125% Sage UI;
419
421
  $typographySidebarTitleM: 700 20px/125% Sage UI;
422
+ $typographySidebarTitleMl: 700 20px/125% Sage UI;
420
423
  $typographySidebarTitleL: 700 20px/125% Sage UI;
424
+ $typographySidebarTitleXl: 700 20px/125% Sage UI;
425
+ $typographySidebarParagraphXs: 0 none;
426
+ $typographySidebarParagraphS: 0 none;
427
+ $typographySidebarParagraphMs: 0 none;
421
428
  $typographySidebarParagraphM: 0 none;
429
+ $typographySidebarParagraphMl: 0 none;
430
+ $typographySidebarParagraphL: 0 none;
431
+ $typographySidebarParagraphXl: 0 none;
422
432
  $typographyStepFlowCompleteLabelM: 500 14px/150% Sage UI;
423
433
  $typographyStepFlowCurrentLabelM: 500 14px/150% Sage UI;
424
434
  $typographyStepFlowIncompleteLabelM: 500 14px/150% Sage UI;
package/sage-design-tokens-2.21.0.tgz DELETED
Binary file