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/common/frozenproduct/small/light/components/tab.js CHANGED Viewed

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/marketing/large/dark/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/marketing/large/light/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/marketing/small/dark/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/marketing/small/light/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/product/large/dark/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/product/large/light/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/product/small/dark/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {

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

@@ -291,6 +291,19 @@ module.exports = {
         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",
@@ -622,13 +635,11 @@ module.exports = {
         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: {},
@@ -637,18 +648,29 @@ module.exports = {
         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/common/product/small/light/components/tab.d.ts CHANGED Viewed

@@ -57,6 +57,7 @@ declare const tokens: {
       "bg-active": DesignToken;
       "bg-enabled": DesignToken;
       "bg-hover": DesignToken;
+      "border-activealt": DesignToken;
       "border-active": DesignToken;
       "border-enabled": DesignToken;
       "border-hover": DesignToken;
@@ -95,6 +96,7 @@ declare const tokens: {
       navigation: {
         bottom: DesignToken;
         side: DesignToken;
+        top: DesignToken;
       };
     };
     typography: {