@sage/design-tokens 4.18.0 → 4.20.0

package/android/base.xml

@@ -2,7 +2,7 @@
 
 <!--
   Do not edit directly
-  Generated on Mon, 03 Apr 2023 08:10:44 GMT
+  Generated on Tue, 11 Jul 2023 07:32:47 GMT
 -->
 <resources>
   <string name="metaName">Base Theme</string>
@@ -57,6 +57,7 @@
   <string name="colorsActionMinor500">#335b70ff</string>
   <string name="colorsActionMinor550">#19475eff</string>
   <string name="colorsActionMinor600">#00324cff</string>
+  <string name="colorsActionMinor700">#00283dff</string>
   <string name="colorsActionMinor850">#001926ff</string>
   <string name="colorsActionMinor900">#00141eff</string>
   <string name="colorsActionMinor025">#fafbfbff</string>
@@ -149,6 +150,8 @@
   <string name="colorsReadOnly500">#e6ebedff</string>
   <string name="colorsReadOnly600">#ccd6dbff</string>
   <string name="colorsComponentsLeftnavWinterStandardBackground">#262626ff</string>
+  <string name="colorsComponentsLeftnavWinterStandardBackgroundChild">#404040ff</string>
+  <string name="colorsComponentsLeftnavWinterStandardDividerOnDark">#0000008c</string>
   <string name="colorsComponentsLeftnavWinterStandardHover">#007e45ff</string>
   <string name="colorsComponentsLeftnavWinterStandardSelected">#ffffff4d</string>
   <string name="colorsComponentsLeftnavWinterStandardContent">#ffffffff</string>
@@ -242,6 +245,7 @@
   <string name="sizing450">36px</string>
   <string name="sizing500">40px</string>
   <string name="sizing525">42px</string>
+  <string name="sizing550">44px</string>
   <string name="sizing600">48px</string>
   <string name="sizing700">56px</string>
   <string name="sizing800">64px</string>
@@ -415,12 +419,17 @@
   <string name="typographyMessageHeadingL">Bold 16px/150% Sage UI</string>
   <string name="typographyMessageTextM">Regular 14px/150% Sage UI</string>
   <string name="typographyMessageTextL">Regular 16px/150% Sage UI</string>
+  <string name="typographyNoteEditorNameM">Medium 14px/150% Sage UI</string>
+  <string name="typographyNoteDateM">Regular 14px/150% Sage UI</string>
+  <string name="typographyNoteParagraphM">Regular 14px/150% Sage UI</string>
+  <string name="typographyNoteParagraphListM">Regular 14px/150% Sage UI</string>
+  <string name="typographyNoteTitleM">Bold 18px/125% Sage UI</string>
   <string name="typographyPageStateTitleM">Bold 24px/125% Sage UI</string>
   <string name="typographyPageStateSubtitleM">Medium 18px/150% Sage UI</string>
   <string name="typographyPageStateParagraphM">Regular 16px/150% Sage UI</string>
   <string name="typographyPaginationLabelM">Regular 14px/150% Sage UI</string>
-  <string name="typographyPillLabelS">Medium 10px/150% Sage UI</string>
-  <string name="typographyPillLabelM">Medium 12px/150% Sage UI</string>
+  <string name="typographyPillLabelS">Medium 12px/150% Sage UI</string>
+  <string name="typographyPillLabelM">Medium 14px/150% Sage UI</string>
   <string name="typographyPillLabelL">Medium 14px/150% Sage UI</string>
   <string name="typographyPillLabelXl">Medium 16px/150% Sage UI</string>
   <string name="typographyProfileEmailTextS">Regular 14px/125% Sage UI</string>
@@ -486,11 +495,6 @@
   <string name="typographyTileSubscriptionPriceM">Medium 16px/150% Sage UI</string>
   <string name="typographyTooltipTextM">Regular 14px/150% Sage UI</string>
   <string name="typographyTooltipTextL">Regular 16px/150% Sage UI</string>
-  <string name="typographyNoteEditorNameM">Medium 14px/150% Sage UI</string>
-  <string name="typographyNoteDateM">Regular 14px/150% Sage UI</string>
-  <string name="typographyNoteParagraphM">Regular 14px/150% Sage UI</string>
-  <string name="typographyNoteParagraphListM">Regular 14px/150% Sage UI</string>
-  <string name="typographyNoteTitleM">Bold 18px/125% Sage UI</string>
   <string name="opacity300">0.3</string>
   <string name="opacity600">0.6</string>
   <string name="opacity800">0.8</string>

package/android/dashboard/darkMode.xml

@@ -2,7 +2,7 @@
 
 <!--
   Do not edit directly
-  Generated on Mon, 03 Apr 2023 08:10:44 GMT
+  Generated on Tue, 11 Jul 2023 07:32:47 GMT
 -->
 <resources>
   <string name="metaName">Dashboard Dark-Mode Token Set</string>

package/android/dashboard/lightMode.xml

@@ -2,7 +2,7 @@
 
 <!--
   Do not edit directly
-  Generated on Mon, 03 Apr 2023 08:10:44 GMT
+  Generated on Tue, 11 Jul 2023 07:32:47 GMT
 -->
 <resources>
   <string name="metaName">Dashboard Light-Mode Token Set</string>

package/android/origin.xml

@@ -2,7 +2,7 @@
 
 <!--
   Do not edit directly
-  Generated on Mon, 03 Apr 2023 08:10:44 GMT
+  Generated on Tue, 11 Jul 2023 07:32:47 GMT
 -->
 <resources>
   <string name="metaName">Origin Token Set</string>

package/css/base.css

@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
 
 /**
  * Do not edit directly
- * Generated on Mon, 03 Apr 2023 08:10:44 GMT
+ * Generated on Tue, 11 Jul 2023 07:32:47 GMT
  */
 
 :root {
@@ -60,6 +60,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsActionMinor500: #335b70ff;
   --colorsActionMinor550: #19475eff;
   --colorsActionMinor600: #00324cff;
+  --colorsActionMinor700: #00283dff;
   --colorsActionMinor850: #001926ff;
   --colorsActionMinor900: #00141eff;
   --colorsActionMinor025: #fafbfbff;
@@ -152,6 +153,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --colorsReadOnly500: #e6ebedff;
   --colorsReadOnly600: #ccd6dbff;
   --colorsComponentsLeftnavWinterStandardBackground: #262626ff;
+  --colorsComponentsLeftnavWinterStandardBackgroundChild: #404040ff;
+  --colorsComponentsLeftnavWinterStandardDividerOnDark: #0000008c;
   --colorsComponentsLeftnavWinterStandardHover: #007e45ff;
   --colorsComponentsLeftnavWinterStandardSelected: #ffffff4d;
   --colorsComponentsLeftnavWinterStandardContent: #ffffffff;
@@ -245,6 +248,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --sizing450: 36px;
   --sizing500: 40px;
   --sizing525: 42px;
+  --sizing550: 44px;
   --sizing600: 48px;
   --sizing700: 56px;
   --sizing800: 64px;
@@ -418,12 +422,17 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --typographyMessageHeadingL: 700 16px/150% Sage UI;
   --typographyMessageTextM: 400 14px/150% Sage UI;
   --typographyMessageTextL: 400 16px/150% Sage UI;
+  --typographyNoteEditorNameM: 500 14px/150% Sage UI;
+  --typographyNoteDateM: 400 14px/150% Sage UI;
+  --typographyNoteParagraphM: 400 14px/150% Sage UI;
+  --typographyNoteParagraphListM: 400 14px/150% Sage UI;
+  --typographyNoteTitleM: 700 18px/125% Sage UI;
   --typographyPageStateTitleM: 700 24px/125% Sage UI;
   --typographyPageStateSubtitleM: 500 18px/150% Sage UI;
   --typographyPageStateParagraphM: 400 16px/150% Sage UI;
   --typographyPaginationLabelM: 400 14px/150% Sage UI;
-  --typographyPillLabelS: 500 10px/150% Sage UI;
-  --typographyPillLabelM: 500 12px/150% Sage UI;
+  --typographyPillLabelS: 500 12px/150% Sage UI;
+  --typographyPillLabelM: 500 14px/150% Sage UI;
   --typographyPillLabelL: 500 14px/150% Sage UI;
   --typographyPillLabelXl: 500 16px/150% Sage UI;
   --typographyProfileEmailTextS: 400 14px/125% Sage UI;
@@ -489,11 +498,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
   --typographyTileSubscriptionPriceM: 500 16px/150% Sage UI;
   --typographyTooltipTextM: 400 14px/150% Sage UI;
   --typographyTooltipTextL: 400 16px/150% Sage UI;
-  --typographyNoteEditorNameM: 500 14px/150% Sage UI;
-  --typographyNoteDateM: 400 14px/150% Sage UI;
-  --typographyNoteParagraphM: 400 14px/150% Sage UI;
-  --typographyNoteParagraphListM: 400 14px/150% Sage UI;
-  --typographyNoteTitleM: 700 18px/125% Sage UI;
   --opacity300: 0.3;
   --opacity600: 0.6;
   --opacity800: 0.8;

package/css/dashboard/darkMode.css

@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
 
 /**
  * Do not edit directly
- * Generated on Mon, 03 Apr 2023 08:10:44 GMT
+ * Generated on Tue, 11 Jul 2023 07:32:47 GMT
  */
 
 :root {

package/css/dashboard/lightMode.css

@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
 
 /**
  * Do not edit directly
- * Generated on Mon, 03 Apr 2023 08:10:44 GMT
+ * Generated on Tue, 11 Jul 2023 07:32:47 GMT
  */
 
 :root {

package/css/origin.css

@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
 
 /**
  * Do not edit directly
- * Generated on Mon, 03 Apr 2023 08:10:43 GMT
+ * Generated on Tue, 11 Jul 2023 07:32:47 GMT
  */
 
 :root {

package/data/tokens.json

@@ -883,6 +883,11 @@
             "type": "color",
             "description": "origin"
           },
+          "700": {
+            "value": "#00283dff",
+            "type": "color",
+            "description": "origin"
+          },
           "850": {
             "value": "#001926ff",
             "type": "color",
@@ -1349,6 +1354,16 @@
                 "type": "color",
                 "description": "Navigation bar bg (FY23)"
               },
+              "background-child": {
+                "value": "#404040ff",
+                "type": "color",
+                "description": "Navigation bar bg-child (FY23)"
+              },
+              "divider-on-dark": {
+                "value": "#0000008c",
+                "type": "color",
+                "description": "Divider on dark for LeftNav (FY23)"
+              },
               "hover": {
                 "value": "#007e45ff",
                 "type": "color",
@@ -1824,6 +1839,10 @@
         "value": "42px",
         "type": "sizing"
       },
+      "550": {
+        "value": "44px",
+        "type": "sizing"
+      },
       "600": {
         "value": "48px",
         "type": "sizing"
@@ -2277,7 +2296,7 @@
       "100": {
         "value": "8px",
         "type": "borderRadius",
-        "description": "Action popover (menu), Anchor navigation, Button: minor (including button bar), Card (less rounded), Card select (single), Card select group (outer corners), Carousel (slides), Color picker standard (container), Menu (bottom corners), Message, Navigation: top (menu bottom corners), Navigation: left (selected menu), Pagination, Tab, Table, Tile (less rounded), Toast."
+        "description": "Action popover (menu), Anchor navigation, Card (less rounded), Card select (single), Card select group (outer corners), Carousel (slides), Color picker standard (container), Menu (bottom corners), Message, Navigation: top (menu bottom corners), Navigation: left (selected menu), Pagination, Tab, Table, Tile (less rounded), Toast."
       },
       "200": {
         "value": "16px",
@@ -2292,7 +2311,7 @@
       "circle": {
         "value": "50%",
         "type": "borderRadius",
-        "description": "Badge, Portrait, Radio button."
+        "description": "Badge, Loader dots, Portrait, Radio button."
       },
       "000": {
         "value": "0px",
@@ -2307,7 +2326,7 @@
       "025": {
         "value": "2px",
         "type": "borderRadius",
-        "description": "Checkbox (small), Link (focus background),Pill"
+        "description": "Checkbox (S, M), Link (focus background),Pill"
       },
       "050": {
         "value": "4px",
@@ -3470,6 +3489,73 @@
           }
         }
       },
+      "note": {
+        "editorName": {
+          "m": {
+            "value": {
+              "fontFamily": "Sage UI",
+              "fontWeight": "Medium",
+              "lineHeight": "150%",
+              "fontSize": "14px",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0%"
+            },
+            "type": "typography"
+          }
+        },
+        "date": {
+          "m": {
+            "value": {
+              "fontFamily": "Sage UI",
+              "fontWeight": "Regular",
+              "lineHeight": "150%",
+              "fontSize": "14px",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "paragraph": {
+          "m": {
+            "value": {
+              "fontFamily": "Sage UI",
+              "fontWeight": "Regular",
+              "lineHeight": "150%",
+              "fontSize": "14px",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "paragraphList": {
+          "m": {
+            "value": {
+              "fontFamily": "Sage UI",
+              "fontWeight": "Regular",
+              "lineHeight": "150%",
+              "fontSize": "14px",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        },
+        "title": {
+          "m": {
+            "value": {
+              "fontFamily": "Sage UI",
+              "fontWeight": "Bold",
+              "lineHeight": "125%",
+              "fontSize": "18px",
+              "letterSpacing": "0%",
+              "paragraphSpacing": "0px"
+            },
+            "type": "typography"
+          }
+        }
+      },
       "pageState": {
         "title": {
           "m": {
@@ -3533,7 +3619,7 @@
               "fontFamily": "Sage UI",
               "fontWeight": "Medium",
               "lineHeight": "150%",
-              "fontSize": "10px",
+              "fontSize": "12px",
               "letterSpacing": "0%",
               "paragraphSpacing": "0px"
             },
@@ -3544,7 +3630,7 @@
               "fontFamily": "Sage UI",
               "fontWeight": "Medium",
               "lineHeight": "150%",
-              "fontSize": "12px",
+              "fontSize": "14px",
               "letterSpacing": "0%",
               "paragraphSpacing": "0px"
             },
@@ -4439,73 +4525,6 @@
             "type": "typography"
           }
         }
-      },
-      "note": {
-        "editorName": {
-          "m": {
-            "value": {
-              "fontFamily": "Sage UI",
-              "fontWeight": "Medium",
-              "lineHeight": "150%",
-              "fontSize": "14px",
-              "letterSpacing": "0%",
-              "paragraphSpacing": "0%"
-            },
-            "type": "typography"
-          }
-        },
-        "date": {
-          "m": {
-            "value": {
-              "fontFamily": "Sage UI",
-              "fontWeight": "Regular",
-              "lineHeight": "150%",
-              "fontSize": "14px",
-              "letterSpacing": "0%",
-              "paragraphSpacing": "0px"
-            },
-            "type": "typography"
-          }
-        },
-        "paragraph": {
-          "m": {
-            "value": {
-              "fontFamily": "Sage UI",
-              "fontWeight": "Regular",
-              "lineHeight": "150%",
-              "fontSize": "14px",
-              "letterSpacing": "0%",
-              "paragraphSpacing": "0px"
-            },
-            "type": "typography"
-          }
-        },
-        "paragraphList": {
-          "m": {
-            "value": {
-              "fontFamily": "Sage UI",
-              "fontWeight": "Regular",
-              "lineHeight": "150%",
-              "fontSize": "14px",
-              "letterSpacing": "0%",
-              "paragraphSpacing": "0px"
-            },
-            "type": "typography"
-          }
-        },
-        "title": {
-          "m": {
-            "value": {
-              "fontFamily": "Sage UI",
-              "fontWeight": "Bold",
-              "lineHeight": "125%",
-              "fontSize": "18px",
-              "letterSpacing": "0%",
-              "paragraphSpacing": "0px"
-            },
-            "type": "typography"
-          }
-        }
       }
     },
     "opacity": {

package/docs/tokens/base/colors/index.html

@@ -1347,6 +1347,27 @@
                     
                         </td>
                     </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="base-colorsActionMinor700"
+                            title="theme: base; category: colors; group: action; name: minor; variant: 700; ">
+                            colorsActionMinor700
+                            <a href="#base-colorsActionMinor700"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#00283dff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #00283dff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
                             id="base-colorsActionMinor850"
@@ -3279,6 +3300,48 @@
                     
                         </td>
                     </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="base-colorsComponentsLeftnavWinterStandardBackgroundChild"
+                            title="theme: base; category: colors; group: components; name: leftnav; subgroup: winter; element: standard; variant: background-child; ">
+                            colorsComponentsLeftnavWinterStandardBackgroundChild
+                            <a href="#base-colorsComponentsLeftnavWinterStandardBackgroundChild"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#404040ff</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #404040ff;">
+                    </div>
+                    
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="with-icons is-vcentered"
+                            id="base-colorsComponentsLeftnavWinterStandardDividerOnDark"
+                            title="theme: base; category: colors; group: components; name: leftnav; subgroup: winter; element: standard; variant: divider-on-dark; ">
+                            colorsComponentsLeftnavWinterStandardDividerOnDark
+                            <a href="#base-colorsComponentsLeftnavWinterStandardDividerOnDark"
+                               title="permalink"
+                               class="permalink">
+                                🔗
+                            </a>
+                        </td>
+                        <td class="is-vcentered">
+                            <pre>#0000008c</pre>
+                        </td>
+                        <td class="is-vcentered">
+                            <div class="table__color-preview"
+                         style="background-color: #0000008c;">
+                    </div>
+                    
+                        </td>
+                    </tr>
                     <tr>
                         <td class="with-icons is-vcentered"
                             id="base-colorsComponentsLeftnavWinterStandardHover"