@sage/design-tokens 15.1.0 → 15.2.1

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

@@ -2602,6 +2602,46 @@
               ],
             },
             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: {
@@ -2631,14 +2671,14 @@
                 $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/umd/frozenproduct/small/light/components/badge.js

@@ -36,14 +36,12 @@
           },
           "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: {},
@@ -64,12 +62,12 @@
           },
           "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: {},
@@ -78,11 +76,11 @@
           "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/umd/frozenproduct/small/light/components/button.js

@@ -2721,12 +2721,12 @@
           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: {},
@@ -2762,12 +2762,12 @@
             },
             "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: {},
@@ -2775,12 +2775,12 @@
             },
             "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: {},
@@ -3031,12 +3031,12 @@
           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: {},
@@ -3057,12 +3057,12 @@
             },
             "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: {},
@@ -3070,12 +3070,12 @@
             },
             "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: {},
@@ -3108,12 +3108,12 @@
             },
             "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: {},
@@ -3127,12 +3127,12 @@
             },
             "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: {},
@@ -3140,12 +3140,13 @@
             },
             "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: {},
@@ -3172,12 +3173,12 @@
             },
             "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: {},
@@ -3191,12 +3192,13 @@
             },
             "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: {},
@@ -3433,12 +3435,12 @@
           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: {},
@@ -3447,11 +3449,11 @@
             "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: {},
@@ -3459,12 +3461,12 @@
             },
             "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: {},
@@ -3472,12 +3474,12 @@
             },
             "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: {},
@@ -3485,12 +3487,12 @@
             },
             "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: {},
@@ -3504,12 +3506,12 @@
             },
             "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: {},
@@ -3523,12 +3525,12 @@
             },
             "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: {},
@@ -3536,12 +3538,13 @@
             },
             "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: {},
@@ -3568,12 +3571,12 @@
             },
             "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: {},
@@ -3581,12 +3584,13 @@
             },
             "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: {},
@@ -3822,12 +3826,12 @@
           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: {},
@@ -3835,12 +3839,12 @@
             },
             "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: {},
@@ -3848,12 +3852,12 @@
             },
             "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: {},
@@ -3874,12 +3878,12 @@
             },
             "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: {},
@@ -3887,12 +3891,12 @@
             },
             "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: {},
@@ -4067,12 +4071,12 @@
             },
             "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: {},
@@ -4080,12 +4084,12 @@
             },
             "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: {},
@@ -4093,12 +4097,13 @@
             },
             "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: {},
@@ -4120,11 +4125,12 @@
             "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: {},
@@ -4145,12 +4151,13 @@
             },
             "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: {},
@@ -4158,12 +4165,12 @@
             },
             "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: {},