@sage/design-tokens 8.2.0 → 8.4.0

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

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

@@ -195,6 +195,418 @@
             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/umd/marketing/small/light/components/badge.js

@@ -37,16 +37,31 @@
           "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",