@sage/design-tokens 8.2.0 → 8.4.0

package/js/common/marketing/large/dark/components/tab.d.ts

@@ -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

@@ -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/dark/mode.d.ts

@@ -40,6 +40,58 @@ declare const tokens: {
         default: DesignToken;
         frozen: DesignToken;
       };
+      colorcode: {
+        blue: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        teal: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        green: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        lime: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        orange: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        red: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        pink: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        purple: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        slate: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+        gray: {
+          deep: DesignToken;
+          muted: DesignToken;
+          rich: DesignToken;
+        };
+      };
       generic: {
         bg: {
           nought: DesignToken;

package/js/common/marketing/large/dark/mode.js

@@ -184,6 +184,418 @@ module.exports = {
           path: ["modes", "color", "custom", "frozen"],
         },
       },
+      colorcode: {
+        blue: {
+          deep: {
+            $type: "color",
+            $value: "#007FD9",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.blue.500}",
+            },
+            name: "modesColorColorcodeBlueDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "blue", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#00293F",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.blue.100}",
+            },
+            name: "modesColorColorcodeBlueMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "blue", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#0071c3",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.blue.400}",
+            },
+            name: "modesColorColorcodeBlueRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "blue", "rich"],
+          },
+        },
+        teal: {
+          deep: {
+            $type: "color",
+            $value: "#008A89",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.teal.500}",
+            },
+            name: "modesColorColorcodeTealDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "teal", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#002B2A",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.teal.100}",
+            },
+            name: "modesColorColorcodeTealMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "teal", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#007C7B",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.teal.400}",
+            },
+            name: "modesColorColorcodeTealRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "teal", "rich"],
+          },
+        },
+        green: {
+          deep: {
+            $type: "color",
+            $value: "#009023",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.green.500}",
+            },
+            name: "modesColorColorcodeGreenDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "green", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#002D05",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.green.100}",
+            },
+            name: "modesColorColorcodeGreenMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "green", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#00811F",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.green.400}",
+            },
+            name: "modesColorColorcodeGreenRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "green", "rich"],
+          },
+        },
+        lime: {
+          deep: {
+            $type: "color",
+            $value: "#6E8500",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.lime.500}",
+            },
+            name: "modesColorColorcodeLimeDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "lime", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#171e00",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.lime.100}",
+            },
+            name: "modesColorColorcodeLimeMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "lime", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#637700",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.lime.400}",
+            },
+            name: "modesColorColorcodeLimeRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "lime", "rich"],
+          },
+        },
+        orange: {
+          deep: {
+            $type: "color",
+            $value: "#DB4B00",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.orange.500}",
+            },
+            name: "modesColorColorcodeOrangeDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "orange", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#380D00",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.orange.100}",
+            },
+            name: "modesColorColorcodeOrangeMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "orange", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#C54300",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.orange.400}",
+            },
+            name: "modesColorColorcodeOrangeRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "orange", "rich"],
+          },
+        },
+        red: {
+          deep: {
+            $type: "color",
+            $value: "#F50058",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.red.500}",
+            },
+            name: "modesColorColorcodeRedDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "red", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#400011",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.red.100}",
+            },
+            name: "modesColorColorcodeRedMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "red", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#DC004E",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.red.400}",
+            },
+            name: "modesColorColorcodeRedRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "red", "rich"],
+          },
+        },
+        pink: {
+          deep: {
+            $type: "color",
+            $value: "#DD2BAB",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.pink.500}",
+            },
+            name: "modesColorColorcodePinkDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "pink", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#3C002C",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.pink.100}",
+            },
+            name: "modesColorColorcodePinkMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "pink", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#C8269A",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.pink.400}",
+            },
+            name: "modesColorColorcodePinkRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "pink", "rich"],
+          },
+        },
+        purple: {
+          deep: {
+            $type: "color",
+            $value: "#985FDC",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.purple.500}",
+            },
+            name: "modesColorColorcodePurpleDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "purple", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#270E41",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.purple.100}",
+            },
+            name: "modesColorColorcodePurpleMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "purple", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#8F4CD7",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.purple.400}",
+            },
+            name: "modesColorColorcodePurpleRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "purple", "rich"],
+          },
+        },
+        slate: {
+          deep: {
+            $type: "color",
+            $value: "#5C8196",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.slate.500}",
+            },
+            name: "modesColorColorcodeSlateDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "slate", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#121D23",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.slate.100}",
+            },
+            name: "modesColorColorcodeSlateMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "slate", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#527386",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.slate.400}",
+            },
+            name: "modesColorColorcodeSlateRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "slate", "rich"],
+          },
+        },
+        gray: {
+          deep: {
+            $type: "color",
+            $value: "#7C7C7C",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.gray.500}",
+            },
+            name: "modesColorColorcodeGrayDeep",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "gray", "deep"],
+          },
+          muted: {
+            $type: "color",
+            $value: "#1b1b1b",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.gray.100}",
+            },
+            name: "modesColorColorcodeGrayMuted",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "gray", "muted"],
+          },
+          rich: {
+            $type: "color",
+            $value: "#6F6F6F",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.gray.400}",
+            },
+            name: "modesColorColorcodeGrayRich",
+            attributes: {},
+            path: ["modes", "color", "colorcode", "gray", "rich"],
+          },
+        },
+      },
       generic: {
         bg: {
           nought: {

package/js/common/marketing/large/light/components/badge.d.ts

@@ -24,6 +24,7 @@ declare const tokens: {
       notification: {
         "border-default": DesignToken;
         "bg-default": DesignToken;
+        "bg-alt": DesignToken;
         "label-default": DesignToken;
       };
     };

package/js/common/marketing/large/light/components/badge.js

@@ -26,16 +26,31 @@ module.exports = {
         "bg-default": {
           $type: "color",
           $value: "#CD384B",
+          $description: "Used in global nav notification badges",
           filePath: "data/tokens/components/badge.json",
           isSource: true,
           original: {
             $type: "color",
             $value: "{modes.color.status.negative.default}",
+            $description: "Used in global nav notification badges",
           },
           name: "badgeColorNotificationBgDefault",
           attributes: {},
           path: ["badge", "color", "notification", "bg-default"],
         },
+        "bg-alt": {
+          $type: "color",
+          $value: "#0060A7",
+          filePath: "data/tokens/components/badge.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.status.info.default}",
+          },
+          name: "badgeColorNotificationBgAlt",
+          attributes: {},
+          path: ["badge", "color", "notification", "bg-alt"],
+        },
         "label-default": {
           $type: "color",
           $value: "#FFFFFF",