@sage/design-tokens 15.1.0 → 15.2.1

package/js/common/frozenproduct/small/dark/mode.d.ts

@@ -201,6 +201,7 @@ declare const tokens: {
           default: DesignToken;
           defaultAlt: DesignToken;
           defaultAlt2: DesignToken;
+          defaultAlt3: DesignToken;
           hoverAlt: DesignToken;
           hover: DesignToken;
           withActive: DesignToken;

package/js/common/frozenproduct/small/dark/mode.js

@@ -2548,6 +2548,46 @@ module.exports = {
             path: ["modes", "color", "interactive", "monochrome", "defaultAlt"],
           },
           defaultAlt2: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "alpha",
+                  value: "0.55",
+                  space: "lch",
+                  format: "hex",
+                },
+              },
+            },
+            $type: "color",
+            $value: "#ffffff8c",
+            $description: "Dropdown option subtext.",
+            filePath: "data/tokens/modes/dark.json",
+            isSource: true,
+            original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "alpha",
+                    value: "0.55",
+                    space: "lch",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "{modes.color.interactive.monochrome.active}",
+              $description: "Dropdown option subtext.",
+            },
+            name: "modesColorInteractiveMonochromeDefaultAlt2",
+            attributes: {},
+            path: [
+              "modes",
+              "color",
+              "interactive",
+              "monochrome",
+              "defaultAlt2",
+            ],
+          },
+          defaultAlt3: {
             $extensions: {
               "studio.tokens": {
                 modify: {
@@ -2577,14 +2617,14 @@ module.exports = {
               $value: "{modes.color.interactive.monochrome.active}",
               $description: "Tertiary border color",
             },
-            name: "modesColorInteractiveMonochromeDefaultAlt2",
+            name: "modesColorInteractiveMonochromeDefaultAlt3",
             attributes: {},
             path: [
               "modes",
               "color",
               "interactive",
               "monochrome",
-              "defaultAlt2",
+              "defaultAlt3",
             ],
           },
           hoverAlt: {

package/js/common/frozenproduct/small/light/components/badge.js

@@ -25,14 +25,12 @@ module.exports = {
         },
         "bg-default": {
           $type: "color",
-          $value: "#CD384B",
-          $description: "Used in global nav notification badges",
-          filePath: "data/tokens/components/badge.json",
+          $value: "#ff8629",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.status.negative.default}",
-            $description: "Used in global nav notification badges",
+            $value: "{modes.color.status.caution.frozenglobal.default}",
           },
           name: "badgeColorNotificationBgDefault",
           attributes: {},
@@ -53,12 +51,12 @@ module.exports = {
         },
         "label-default": {
           $type: "color",
-          $value: "#FFFFFF",
-          filePath: "data/tokens/components/badge.json",
+          $value: "#000000",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.content.nought}",
+            $value: "{modes.color.generic.content.extreme}",
           },
           name: "badgeColorNotificationLabelDefault",
           attributes: {},
@@ -67,11 +65,11 @@ module.exports = {
         "label-alt": {
           $type: "color",
           $value: "#FFFFFF",
-          filePath: "data/tokens/components/badge.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.content.nought}",
+            $value: "{modes.color.generic.fg.nought}",
           },
           name: "badgeColorNotificationLabelAlt",
           attributes: {},

package/js/common/frozenproduct/small/light/components/button.js

@@ -2692,12 +2692,12 @@ module.exports = {
         primary: {
           "bg-active": {
             $type: "color",
-            $value: "#13591a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#135932",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.active}",
+              $value: "{modes.color.interactive.primary.frozen.active}",
             },
             name: "buttonColorTypicalPrimaryBgActive",
             attributes: {},
@@ -2733,12 +2733,12 @@ module.exports = {
           },
           "bg-enabled": {
             $type: "color",
-            $value: "#00811F",
-            filePath: "data/tokens/components/button.json",
+            $value: "#008046",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.default}",
+              $value: "{modes.color.interactive.primary.frozen.default}",
             },
             name: "buttonColorTypicalPrimaryBgEnabled",
             attributes: {},
@@ -2746,12 +2746,12 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#0e6d1d",
-            filePath: "data/tokens/components/button.json",
+            $value: "#0d6c3c",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.hover}",
+              $value: "{modes.color.interactive.primary.frozen.hover}",
             },
             name: "buttonColorTypicalPrimaryBgHover",
             attributes: {},
@@ -2997,12 +2997,12 @@ module.exports = {
         secondary: {
           "bg-active": {
             $type: "color",
-            $value: "#00811f4d",
-            filePath: "data/tokens/components/button.json",
+            $value: "#135932",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.activeAlt}",
+              $value: "{modes.color.interactive.primary.frozen.active}",
             },
             name: "buttonColorTypicalSecondaryBgActive",
             attributes: {},
@@ -3023,12 +3023,12 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#00811f1a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#0d6c3c",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.hoverAlt}",
+              $value: "{modes.color.interactive.primary.frozen.hover}",
             },
             name: "buttonColorTypicalSecondaryBgHover",
             attributes: {},
@@ -3036,12 +3036,12 @@ module.exports = {
           },
           "border-active": {
             $type: "color",
-            $value: "#13591a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#135932",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.active}",
+              $value: "{modes.color.interactive.primary.frozen.active}",
             },
             name: "buttonColorTypicalSecondaryBorderActive",
             attributes: {},
@@ -3068,12 +3068,12 @@ module.exports = {
           },
           "border-enabled": {
             $type: "color",
-            $value: "#00811fcc",
-            filePath: "data/tokens/components/button.json",
+            $value: "#008046",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.defaultAlt}",
+              $value: "{modes.color.interactive.primary.frozen.default}",
             },
             name: "buttonColorTypicalSecondaryBorderEnabled",
             attributes: {},
@@ -3081,12 +3081,12 @@ module.exports = {
           },
           "border-hover": {
             $type: "color",
-            $value: "#0e6d1d",
-            filePath: "data/tokens/components/button.json",
+            $value: "#0d6c3c",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.hover}",
+              $value: "{modes.color.interactive.primary.frozen.hover}",
             },
             name: "buttonColorTypicalSecondaryBorderHover",
             attributes: {},
@@ -3094,12 +3094,12 @@ module.exports = {
           },
           "label-active": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#FFFFFF",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActiveAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.withActive}",
             },
             name: "buttonColorTypicalSecondaryLabelActive",
             attributes: {},
@@ -3120,12 +3120,12 @@ module.exports = {
           },
           "label-enabled": {
             $type: "color",
-            $value: "#000000e6",
-            filePath: "data/tokens/components/button.json",
+            $value: "#008046",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.default}",
+              $value: "{modes.color.interactive.primary.frozen.default}",
             },
             name: "buttonColorTypicalSecondaryLabelEnabled",
             attributes: {},
@@ -3133,12 +3133,13 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#FFFFFF",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withHover}",
+              $value:
+                "{modes.color.interactive.monochrome.frozen.withHoverAlt}",
             },
             name: "buttonColorTypicalSecondaryLabelHover",
             attributes: {},
@@ -3372,12 +3373,12 @@ module.exports = {
         tertiary: {
           "bg-active": {
             $type: "color",
-            $value: "#00811f4d",
-            filePath: "data/tokens/components/button.json",
+            $value: "#135932",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.activeAlt}",
+              $value: "{modes.color.interactive.primary.frozen.active}",
             },
             name: "buttonColorTypicalTertiaryBgActive",
             attributes: {},
@@ -3386,11 +3387,11 @@ module.exports = {
           "bg-enabled": {
             $type: "color",
             $value: "#fff0",
-            filePath: "data/tokens/components/button.json",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{button.color.none}",
+              $value: "{modes.color.none}",
             },
             name: "buttonColorTypicalTertiaryBgEnabled",
             attributes: {},
@@ -3398,12 +3399,12 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#00811f1a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#0d6c3c",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.hoverAlt}",
+              $value: "{modes.color.interactive.primary.frozen.hover}",
             },
             name: "buttonColorTypicalTertiaryBgHover",
             attributes: {},
@@ -3411,12 +3412,12 @@ module.exports = {
           },
           "border-active": {
             $type: "color",
-            $value: "#13591a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#135932",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.active}",
+              $value: "{modes.color.interactive.primary.frozen.active}",
             },
             name: "buttonColorTypicalTertiaryBorderActive",
             attributes: {},
@@ -3424,12 +3425,12 @@ module.exports = {
           },
           "border-disabled": {
             $type: "color",
-            $value: "#a6a6a6",
-            filePath: "data/tokens/components/button.json",
+            $value: "#fff0",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.inactive.default}",
+              $value: "{modes.color.none}",
             },
             name: "buttonColorTypicalTertiaryBorderDisabled",
             attributes: {},
@@ -3437,12 +3438,12 @@ module.exports = {
           },
           "border-enabled": {
             $type: "color",
-            $value: "#00811fcc",
-            filePath: "data/tokens/components/button.json",
+            $value: "#fff0",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.defaultAlt}",
+              $value: "{modes.color.none}",
             },
             name: "buttonColorTypicalTertiaryBorderEnabled",
             attributes: {},
@@ -3450,12 +3451,12 @@ module.exports = {
           },
           "border-hover": {
             $type: "color",
-            $value: "#0e6d1d",
-            filePath: "data/tokens/components/button.json",
+            $value: "#fff0",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.hover}",
+              $value: "{modes.color.none}",
             },
             name: "buttonColorTypicalTertiaryBorderHover",
             attributes: {},
@@ -3463,12 +3464,12 @@ module.exports = {
           },
           "label-active": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#FFFFFF",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActiveAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.withActive}",
             },
             name: "buttonColorTypicalTertiaryLabelActive",
             attributes: {},
@@ -3489,12 +3490,12 @@ module.exports = {
           },
           "label-enabled": {
             $type: "color",
-            $value: "#000000e6",
-            filePath: "data/tokens/components/button.json",
+            $value: "#008046",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.default}",
+              $value: "{modes.color.interactive.primary.frozen.default}",
             },
             name: "buttonColorTypicalTertiaryLabelEnabled",
             attributes: {},
@@ -3502,12 +3503,13 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#FFFFFF",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withHover}",
+              $value:
+                "{modes.color.interactive.monochrome.frozen.withHoverAlt}",
             },
             name: "buttonColorTypicalTertiaryLabelHover",
             attributes: {},
@@ -3741,12 +3743,12 @@ module.exports = {
         subtle: {
           "bg-active": {
             $type: "color",
-            $value: "#00000026",
-            filePath: "data/tokens/components/button.json",
+            $value: "#22374326",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.activeAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.activeAlt}",
             },
             name: "buttonColorTypicalSubtleBgActive",
             attributes: {},
@@ -3754,12 +3756,12 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#0000001a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#2237431a",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.hoverAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
             },
             name: "buttonColorTypicalSubtleBgHover",
             attributes: {},
@@ -3767,12 +3769,12 @@ module.exports = {
           },
           "label-active": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#223743",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActiveAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.active}",
             },
             name: "buttonColorTypicalSubtleLabelActive",
             attributes: {},
@@ -3793,12 +3795,12 @@ module.exports = {
           },
           "label-enabled": {
             $type: "color",
-            $value: "#000000e6",
-            filePath: "data/tokens/components/button.json",
+            $value: "#335B70",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.default}",
+              $value: "{modes.color.interactive.monochrome.frozen.default}",
             },
             name: "buttonColorTypicalSubtleLabelEnabled",
             attributes: {},
@@ -3806,12 +3808,12 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#223743",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withHover}",
+              $value: "{modes.color.interactive.monochrome.frozen.withHover}",
             },
             name: "buttonColorTypicalSubtleLabelHover",
             attributes: {},
@@ -3978,12 +3980,12 @@ module.exports = {
           },
           "bg-active": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#223743",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.active}",
+              $value: "{modes.color.interactive.monochrome.frozen.active}",
             },
             name: "buttonColorTypicalToggleBgActive",
             attributes: {},
@@ -3991,12 +3993,12 @@ module.exports = {
           },
           "bg-hover": {
             $type: "color",
-            $value: "#0000001a",
-            filePath: "data/tokens/components/button.json",
+            $value: "#2237431a",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.hoverAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
             },
             name: "buttonColorTypicalToggleBgHover",
             attributes: {},
@@ -4004,12 +4006,12 @@ module.exports = {
           },
           "border-enabled": {
             $type: "color",
-            $value: "#000000e6",
-            filePath: "data/tokens/components/button.json",
+            $value: "#698495",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.default}",
+              $value: "{modes.color.interactive.dataEntry.frozen.withDefault}",
             },
             name: "buttonColorTypicalToggleBorderEnabled",
             attributes: {},
@@ -4031,11 +4033,11 @@ module.exports = {
           "label-active": {
             $type: "color",
             $value: "#FFFFFF",
-            filePath: "data/tokens/components/button.json",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActive}",
+              $value: "{modes.color.interactive.monochrome.frozen.withActive}",
             },
             name: "buttonColorTypicalToggleLabelActive",
             attributes: {},
@@ -4056,12 +4058,12 @@ module.exports = {
           },
           "label-enabled": {
             $type: "color",
-            $value: "#000000ab",
-            filePath: "data/tokens/components/button.json",
+            $value: "#476a7d",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.defaultAlt}",
+              $value: "{modes.color.interactive.monochrome.frozen.defaultAlt}",
             },
             name: "buttonColorTypicalToggleLabelEnabled",
             attributes: {},
@@ -4069,12 +4071,12 @@ module.exports = {
           },
           "label-hover": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/button.json",
+            $value: "#223743",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withHover}",
+              $value: "{modes.color.interactive.monochrome.frozen.withHover}",
             },
             name: "buttonColorTypicalToggleLabelHover",
             attributes: {},