npm - @sage/design-tokens - Versions diffs - 8.2.0 → 8.3.0 - Mend

@sage/design-tokens 8.2.0 → 8.3.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 (164) hide show

package/js/umd/frozenproduct/small/light/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#d1d1d1",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#000000",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/marketing/large/dark/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#282828",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#FFFFFF",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/marketing/large/light/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#d1d1d1",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#000000",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/marketing/small/dark/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#282828",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#FFFFFF",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/marketing/small/light/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#d1d1d1",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#000000",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/product/large/dark/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#282828",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#FFFFFF",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/product/large/light/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#d1d1d1",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#000000",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/product/small/dark/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#282828",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#FFFFFF",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/js/umd/product/small/light/components/tab.js CHANGED Viewed

@@ -302,6 +302,19 @@
           attributes: {},
           path: ["tab", "color", "bg-hover"],
         },
+        "border-activealt": {
+          $type: "color",
+          $value: "#d1d1d1",
+          filePath: "data/tokens/components/tab.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.generic.fg.delicate}",
+          },
+          name: "tabColorBorderActivealt",
+          attributes: {},
+          path: ["tab", "color", "border-activealt"],
+        },
         "border-active": {
           $type: "color",
           $value: "#000000",
@@ -633,13 +646,11 @@
           bottom: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationBottom",
             attributes: {},
@@ -648,18 +659,29 @@
           side: {
             $type: "borderWidth",
             $value: 2,
-            $description: "Tab (enabled and hover bottom border)",
             filePath: "data/tokens/components/tab.json",
             isSource: true,
             original: {
               $type: "borderWidth",
               $value: "{global.borderwidth.S}",
-              $description: "Tab (enabled and hover bottom border)",
             },
             name: "tabBorderwidthNavigationSide",
             attributes: {},
             path: ["tab", "borderwidth", "navigation", "side"],
           },
+          top: {
+            $type: "borderWidth",
+            $value: 2,
+            filePath: "data/tokens/components/tab.json",
+            isSource: true,
+            original: {
+              $type: "borderWidth",
+              $value: "{global.borderwidth.S}",
+            },
+            name: "tabBorderwidthNavigationTop",
+            attributes: {},
+            path: ["tab", "borderwidth", "navigation", "top"],
+          },
         },
       },
       typography: {

package/json/flat/frozenproduct/large/dark/components/tab.json CHANGED Viewed

@@ -17,6 +17,7 @@
   "tabColorBgActive": "#000000",
   "tabColorBgEnabled": "#fff0",
   "tabColorBgHover": "#ffffff14",
+  "tabColorBorderActivealt": "#282828",
   "tabColorBorderActive": "#FFFFFF",
   "tabColorBorderEnabled": "#282828",
   "tabColorBorderHover": "#777",
@@ -42,6 +43,7 @@
   "tabRadiusNone": "0",
   "tabBorderwidthNavigationBottom": 2,
   "tabBorderwidthNavigationSide": 2,
+  "tabBorderwidthNavigationTop": 2,
   "tabTypographyAdaptiveLabelS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"19px","paragraphSpacing":"0"},

package/json/flat/frozenproduct/large/light/components/tab.json CHANGED Viewed

@@ -17,6 +17,7 @@
   "tabColorBgActive": "#FFFFFF",
   "tabColorBgEnabled": "#fff0",
   "tabColorBgHover": "#00000014",
+  "tabColorBorderActivealt": "#d1d1d1",
   "tabColorBorderActive": "#000000",
   "tabColorBorderEnabled": "#d1d1d1",
   "tabColorBorderHover": "#777",
@@ -42,6 +43,7 @@
   "tabRadiusNone": "0",
   "tabBorderwidthNavigationBottom": 2,
   "tabBorderwidthNavigationSide": 2,
+  "tabBorderwidthNavigationTop": 2,
   "tabTypographyAdaptiveLabelS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"19px","paragraphSpacing":"0"},

package/json/flat/frozenproduct/small/dark/components/tab.json CHANGED Viewed

@@ -17,6 +17,7 @@
   "tabColorBgActive": "#000000",
   "tabColorBgEnabled": "#fff0",
   "tabColorBgHover": "#ffffff14",
+  "tabColorBorderActivealt": "#282828",
   "tabColorBorderActive": "#FFFFFF",
   "tabColorBorderEnabled": "#282828",
   "tabColorBorderHover": "#777",
@@ -42,6 +43,7 @@
   "tabRadiusNone": "0",
   "tabBorderwidthNavigationBottom": 2,
   "tabBorderwidthNavigationSide": 2,
+  "tabBorderwidthNavigationTop": 2,
   "tabTypographyAdaptiveLabelS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"15px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"17px","paragraphSpacing":"0"},

package/json/flat/frozenproduct/small/light/components/tab.json CHANGED Viewed

@@ -17,6 +17,7 @@
   "tabColorBgActive": "#FFFFFF",
   "tabColorBgEnabled": "#fff0",
   "tabColorBgHover": "#00000014",
+  "tabColorBorderActivealt": "#d1d1d1",
   "tabColorBorderActive": "#000000",
   "tabColorBorderEnabled": "#d1d1d1",
   "tabColorBorderHover": "#777",
@@ -42,6 +43,7 @@
   "tabRadiusNone": "0",
   "tabBorderwidthNavigationBottom": 2,
   "tabBorderwidthNavigationSide": 2,
+  "tabBorderwidthNavigationTop": 2,
   "tabTypographyAdaptiveLabelS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"15px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"17px","paragraphSpacing":"0"},

package/json/flat/marketing/large/dark/components/tab.json CHANGED Viewed

@@ -17,6 +17,7 @@
   "tabColorBgActive": "#000000",
   "tabColorBgEnabled": "#fff0",
   "tabColorBgHover": "#ffffff14",
+  "tabColorBorderActivealt": "#282828",
   "tabColorBorderActive": "#FFFFFF",
   "tabColorBorderEnabled": "#282828",
   "tabColorBorderHover": "#777",
@@ -42,6 +43,7 @@
   "tabRadiusNone": "0",
   "tabBorderwidthNavigationBottom": 2,
   "tabBorderwidthNavigationSide": 2,
+  "tabBorderwidthNavigationTop": 2,
   "tabTypographyAdaptiveLabelS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
   "tabTypographyAdaptiveLabelL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"19px","paragraphSpacing":"0"},