@sage/design-tokens 15.1.0 → 15.2.1

package/js/common/frozenproduct/large/dark/components/form.d.ts

@@ -452,6 +452,7 @@ declare const tokens: {
         "label-disabled": DesignToken;
         "label-enabled": DesignToken;
         "label-hover": DesignToken;
+        "label-subtext": DesignToken;
       };
       labelset: {
         "label-required": DesignToken;
@@ -566,6 +567,7 @@ declare const tokens: {
           L: DesignToken;
         };
         default: {
+          XS: DesignToken;
           S: DesignToken;
           M: DesignToken;
           L: DesignToken;
@@ -578,6 +580,7 @@ declare const tokens: {
           L: DesignToken;
         };
         default: {
+          XS: DesignToken;
           S: DesignToken;
           M: DesignToken;
           L: DesignToken;

package/js/common/frozenproduct/large/dark/components/form.js

@@ -3230,11 +3230,11 @@ module.exports = {
         "bg-active": {
           $type: "color",
           $value: "#FFFFFF",
-          filePath: "data/tokens/components/form.json",
+          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: "formColorCalendarBgActive",
           attributes: {},
@@ -3255,12 +3255,12 @@ module.exports = {
         },
         "bg-duration": {
           $type: "color",
-          $value: "#1b1b1b",
-          filePath: "data/tokens/components/form.json",
+          $value: "#0e0e0e",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.dataEntry.hoverAlt}",
+            $value: "{modes.color.interactive.inactive.frozen.defaultAlt}",
           },
           name: "formColorCalendarBgDuration",
           attributes: {},
@@ -3282,11 +3282,11 @@ module.exports = {
         "border-duration": {
           $type: "color",
           $value: "#FFFFFF",
-          filePath: "data/tokens/components/form.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "{form.color.calendar.bg-active}",
           },
           name: "formColorCalendarBorderDuration",
           attributes: {},
@@ -3467,6 +3467,21 @@ module.exports = {
           attributes: {},
           path: ["form", "color", "dropdown", "label-hover"],
         },
+        "label-subtext": {
+          $type: "color",
+          $value: "#ffffff8c",
+          $description: "Option subtext.",
+          filePath: "data/tokens/components/form.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.defaultAlt2}",
+            $description: "Option subtext.",
+          },
+          name: "formColorDropdownLabelSubtext",
+          attributes: {},
+          path: ["form", "color", "dropdown", "label-subtext"],
+        },
       },
       labelset: {
         "label-required": {
@@ -3636,11 +3651,11 @@ module.exports = {
         "border-enabled": {
           $type: "color",
           $value: "#777",
-          filePath: "data/tokens/components/form.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.dataEntry.withDefault}",
+            $value: "{modes.color.interactive.dataEntry.frozen.withDefault}",
           },
           name: "formColorTypicalBorderEnabled",
           attributes: {},
@@ -3884,12 +3899,12 @@ module.exports = {
       switch: {
         "bg-active": {
           $type: "color",
-          $value: "#FFFFFF",
-          filePath: "data/tokens/components/form.json",
+          $value: "#ffffffe6",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "{modes.color.interactive.monochrome.frozen.default}",
           },
           name: "formColorSwitchBgActive",
           attributes: {},
@@ -3979,12 +3994,12 @@ module.exports = {
         },
         "border-enabled": {
           $type: "color",
-          $value: "#ffffff80",
-          filePath: "data/tokens/components/form.json",
+          $value: "#777",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.subtle.defaultAlt}",
+            $value: "{modes.color.interactive.dataEntry.frozen.withDefault}",
           },
           name: "formColorSwitchBorderEnabled",
           attributes: {},
@@ -4031,12 +4046,12 @@ module.exports = {
         },
         "fg-enabled": {
           $type: "color",
-          $value: "#ffffff80",
-          filePath: "data/tokens/components/form.json",
+          $value: "#777",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.subtle.defaultAlt}",
+            $value: "{modes.color.interactive.dataEntry.frozen.withDefault}",
           },
           name: "formColorSwitchFgEnabled",
           attributes: {},
@@ -4211,13 +4226,13 @@ module.exports = {
       },
       checkbox: {
         $type: "borderRadius",
-        $value: 4,
+        $value: 2,
         $description: "S and M checkbox",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.interactive.S}",
+          $value: "{global.radius.interactive.XS}",
           $description: "S and M checkbox",
         },
         name: "formRadiusCheckbox",
@@ -4228,7 +4243,7 @@ module.exports = {
         $type: "borderRadius",
         $value: 4,
         $description: "AI text editor footer",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
@@ -4241,14 +4256,14 @@ module.exports = {
       },
       colorpicker: {
         $type: "borderRadius",
-        $value: "999",
-        $description: "Color picker (swatch container),  ",
-        filePath: "data/tokens/components/form.json",
+        $value: 16,
+        $description: "Color picker (swatch container)",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.circle}",
-          $description: "Color picker (swatch container),  ",
+          $value: "{global.radius.interactive.L}",
+          $description: "Color picker (swatch container)",
         },
         name: "formRadiusColorpicker",
         attributes: {},
@@ -4258,7 +4273,7 @@ module.exports = {
         $type: "borderRadius",
         $value: 8,
         $description: "REF POPOVER. Popover container.",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
@@ -4271,13 +4286,13 @@ module.exports = {
       },
       fileupload: {
         $type: "borderRadius",
-        $value: 8,
+        $value: 4,
         $description: "File input (file uploads)",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.container.M}",
+          $value: "{global.radius.interactive.S}",
           $description: "File input (file uploads)",
         },
         name: "formRadiusFileupload",
@@ -4286,13 +4301,13 @@ module.exports = {
       },
       fileselector: {
         $type: "borderRadius",
-        $value: 8,
+        $value: 4,
         $description: "File preview (file selector asset)",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.container.M}",
+          $value: "{global.radius.interactive.S}",
           $description: "File preview (file selector asset)",
         },
         name: "formRadiusFileselector",
@@ -4301,14 +4316,14 @@ module.exports = {
       },
       input: {
         $type: "borderRadius",
-        $value: 8,
+        $value: 4,
         $description:
           "Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.interactive.M}",
+          $value: "{global.radius.interactive.S}",
           $description:
             "Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input",
         },
@@ -4348,13 +4363,13 @@ module.exports = {
       },
       validationbar: {
         $type: "borderRadius",
-        $value: 2,
+        $value: 1,
         $description: "Validation bar",
-        filePath: "data/tokens/components/form.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.interactive.XS}",
+          $value: "{global.radius.interactive.XXS}",
           $description: "Validation bar",
         },
         name: "formRadiusValidationbar",
@@ -4723,6 +4738,25 @@ module.exports = {
           },
         },
         default: {
+          XS: {
+            $type: "typography",
+            $value: {
+              fontFamily: "Sage UI",
+              fontWeight: "400",
+              lineHeight: 1.5,
+              fontSize: "13px",
+              paragraphSpacing: "0",
+            },
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "typography",
+              $value: "{global.typography.adaptive.component.moderate.XS}",
+            },
+            name: "formTypographyAdaptiveDefaultXs",
+            attributes: {},
+            path: ["form", "typography", "adaptive", "default", "XS"],
+          },
           S: {
             $type: "typography",
             $value: {
@@ -4843,6 +4877,25 @@ module.exports = {
           },
         },
         default: {
+          XS: {
+            $type: "typography",
+            $value: {
+              fontFamily: "Sage UI",
+              fontWeight: "400",
+              lineHeight: 1.5,
+              fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+              paragraphSpacing: "0",
+            },
+            filePath: "data/tokens/components/form.json",
+            isSource: true,
+            original: {
+              $type: "typography",
+              $value: "{global.typography.responsive.component.moderate.XS}",
+            },
+            name: "formTypographyResponsiveDefaultXs",
+            attributes: {},
+            path: ["form", "typography", "responsive", "default", "XS"],
+          },
           S: {
             $type: "typography",
             $value: {

package/js/common/frozenproduct/large/dark/components/link.js

@@ -73,11 +73,11 @@ module.exports = {
         "label-default": {
           $type: "color",
           $value: "#4cdc55",
-          filePath: "data/tokens/components/link.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.defaultAlt2}",
+            $value: "{modes.color.interactive.primary.frozen.defaultAlt}",
           },
           name: "linkColorTypicalLabelDefault",
           attributes: {},
@@ -86,11 +86,11 @@ module.exports = {
         "label-hover": {
           $type: "color",
           $value: "#71e270",
-          filePath: "data/tokens/components/link.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.primary.hoverAlt2}",
+            $value: "{modes.color.interactive.primary.frozen.hoverAlt}",
           },
           name: "linkColorTypicalLabelHover",
           attributes: {},

package/js/common/frozenproduct/large/dark/components/nav.js

@@ -66,12 +66,12 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#ffffff1a",
-          filePath: "data/tokens/components/nav.json",
+          $value: "#008046",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.hoverAlt}",
+            $value: "{modes.color.interactive.primary.frozen.nav.hover}",
           },
           name: "navColorItemBgHover",
           attributes: {},
@@ -119,11 +119,11 @@ module.exports = {
         "label-hover": {
           $type: "color",
           $value: "#FFFFFF",
-          filePath: "data/tokens/components/nav.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withHover}",
+            $value: "{modes.color.interactive.primary.frozen.nav.label-hover}",
           },
           name: "navColorItemLabelHover",
           attributes: {},
@@ -635,13 +635,13 @@ module.exports = {
       },
       menumodal: {
         $type: "borderRadius",
-        $value: 16,
+        $value: 8,
         $description: "Menu on mobile",
-        filePath: "data/tokens/components/nav.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "borderRadius",
-          $value: "{global.radius.interactive.L}",
+          $value: "{global.radius.interactive.M}",
           $description: "Menu on mobile",
         },
         name: "navRadiusMenumodal",

package/js/common/frozenproduct/large/dark/components/popover.js

@@ -625,13 +625,11 @@ module.exports = {
       "bg-active": {
         $type: "color",
         $value: "#FFFFFF",
-        $description: "previously action minor 850",
-        filePath: "data/tokens/components/popover.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.monochrome.active}",
-          $description: "previously action minor 850",
+          $value: "{modes.color.interactive.monochrome.frozen.active}",
         },
         name: "popoverColorBgActive",
         attributes: {},
@@ -640,13 +638,11 @@ module.exports = {
       "bg-activealt": {
         $type: "color",
         $value: "#ffffff1a",
-        $description: "REF'D IN FORM. ",
-        filePath: "data/tokens/components/popover.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.monochrome.hoverAlt}",
-          $description: "REF'D IN FORM. ",
+          $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
         },
         name: "popoverColorBgActivealt",
         attributes: {},
@@ -670,13 +666,11 @@ module.exports = {
       "bg-hover": {
         $type: "color",
         $value: "#ffffff1a",
-        $description: "REF'D IN FORM. ",
-        filePath: "data/tokens/components/popover.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.monochrome.hoverAlt}",
-          $description: "REF'D IN FORM. ",
+          $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
         },
         name: "popoverColorBgHover",
         attributes: {},
@@ -698,11 +692,11 @@ module.exports = {
       "label-activealt": {
         $type: "color",
         $value: "#FFFFFF",
-        filePath: "data/tokens/components/popover.json",
+        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: "popoverColorLabelActivealt",
         attributes: {},
@@ -723,12 +717,12 @@ module.exports = {
       },
       "label-hover": {
         $type: "color",
-        $value: "#FFFFFF",
-        filePath: "data/tokens/components/popover.json",
+        $value: "#ffffffe6",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.monochrome.withHover}",
+          $value: "{modes.color.interactive.monochrome.default}",
         },
         name: "popoverColorLabelHover",
         attributes: {},
@@ -736,12 +730,12 @@ module.exports = {
       },
       "label-enabled": {
         $type: "color",
-        $value: "#ffffffab",
-        filePath: "data/tokens/components/popover.json",
+        $value: "#ffffffe6",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.monochrome.defaultAlt}",
+          $value: "{modes.color.interactive.monochrome.default}",
         },
         name: "popoverColorLabelEnabled",
         attributes: {},

package/js/common/frozenproduct/large/dark/components/progress.js

@@ -457,11 +457,11 @@ module.exports = {
       "bg-default": {
         $type: "color",
         $value: "#ffffff14",
-        filePath: "data/tokens/components/progress.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.progress.bg}",
+          $value: "{modes.color.interactive.progress.frozen.bg-alt}",
         },
         name: "progressColorBgDefault",
         attributes: {},
@@ -470,11 +470,11 @@ module.exports = {
       "border-default": {
         $type: "color",
         $value: "#4b4b4b",
-        filePath: "data/tokens/components/progress.json",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.generic.fg.soft}",
+          $value: "{modes.color.generic.fg.frozen.soft}",
         },
         name: "progressColorBorderDefault",
         attributes: {},
@@ -536,12 +536,12 @@ module.exports = {
       },
       "fg-default": {
         $type: "color",
-        $value: "#FFFFFF",
-        filePath: "data/tokens/components/progress.json",
+        $value: "#4b4b4b",
+        filePath: "data/tokens/context/frozenproduct.json",
         isSource: true,
         original: {
           $type: "color",
-          $value: "{modes.color.interactive.monochrome.active}",
+          $value: "{modes.color.generic.fg.frozen.soft}",
         },
         name: "progressColorFgDefault",
         attributes: {},
@@ -618,11 +618,11 @@ module.exports = {
         "bg-default": {
           $type: "color",
           $value: "#ffffff14",
-          filePath: "data/tokens/components/progress.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.progress.bg}",
+            $value: "{modes.color.interactive.progress.frozen.bg}",
           },
           name: "progressColorLoaderBgDefault",
           attributes: {},
@@ -630,13 +630,13 @@ module.exports = {
         },
         "fg-default": {
           $type: "color",
-          $value: "#FFFFFF",
+          $value: "#00D639",
           $description: "used for loader standard loader spinner",
-          filePath: "data/tokens/components/progress.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "{modes.color.interactive.primary.frozen.default}",
             $description: "used for loader standard loader spinner",
           },
           name: "progressColorLoaderFgDefault",