@sage/design-tokens 15.1.0 → 15.2.1

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

@@ -88,12 +88,12 @@ module.exports = {
       blockquote: {
         border: {
           $type: "color",
-          $value: "#00811F",
-          filePath: "data/tokens/components/container.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: "containerColorBlockquoteBorder",
           attributes: {},
@@ -429,14 +429,12 @@ module.exports = {
         detailedicon: {
           bg: {
             $type: "color",
-            $value: "#00811F",
-            $description: " ",
-            filePath: "data/tokens/components/container.json",
+            $value: "#008046",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.custom.default}",
-              $description: " ",
+              $value: "{modes.color.custom.frozen}",
             },
             name: "containerColorInteractiveDetailediconBg",
             attributes: {},
@@ -1914,13 +1912,13 @@ module.exports = {
       card: {
         moderate: {
           $type: "borderRadius",
-          $value: 16,
+          $value: 8,
           $description: "Card (less rounded)",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.L}",
+            $value: "{global.radius.container.M}",
             $description: "Card (less rounded)",
           },
           name: "containerRadiusCardModerate",
@@ -1929,13 +1927,13 @@ module.exports = {
         },
         curved: {
           $type: "borderRadius",
-          $value: 24,
+          $value: 16,
           $description: "Card (more rounded)",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.XL}",
+            $value: "{global.radius.container.L}",
             $description: "Card (more rounded)",
           },
           name: "containerRadiusCardCurved",
@@ -1944,13 +1942,13 @@ module.exports = {
         },
         sweeping: {
           $type: "borderRadius",
-          $value: 32,
+          $value: 24,
           $description: "Card largest rounded type",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.XXL}",
+            $value: "{global.radius.container.XL}",
             $description: "Card largest rounded type",
           },
           name: "containerRadiusCardSweeping",
@@ -1961,13 +1959,13 @@ module.exports = {
       tile: {
         moderate: {
           $type: "borderRadius",
-          $value: 16,
+          $value: 8,
           $description: "Tile (less rounded)",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.L}",
+            $value: "{global.radius.container.M}",
             $description: "Tile (less rounded)",
           },
           name: "containerRadiusTileModerate",
@@ -1976,13 +1974,13 @@ module.exports = {
         },
         curved: {
           $type: "borderRadius",
-          $value: 24,
+          $value: 16,
           $description: "Tile (more rounded)",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.XL}",
+            $value: "{global.radius.container.L}",
             $description: "Tile (more rounded)",
           },
           name: "containerRadiusTileCurved",
@@ -1991,13 +1989,13 @@ module.exports = {
         },
         sweeping: {
           $type: "borderRadius",
-          $value: 32,
+          $value: 24,
           $description: "Tile largest roundedness ",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.XXL}",
+            $value: "{global.radius.container.XL}",
             $description: "Tile largest roundedness ",
           },
           name: "containerRadiusTileSweeping",
@@ -2008,13 +2006,13 @@ module.exports = {
       tileselect: {
         moderate: {
           $type: "borderRadius",
-          $value: 16,
+          $value: 8,
           $description: "Tile (less rounded)",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.L}",
+            $value: "{global.radius.container.M}",
             $description: "Tile (less rounded)",
           },
           name: "containerRadiusTileselectModerate",
@@ -2023,13 +2021,13 @@ module.exports = {
         },
         curved: {
           $type: "borderRadius",
-          $value: 24,
+          $value: 16,
           $description: "Tile (more rounded)",
-          filePath: "data/tokens/components/container.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.XL}",
+            $value: "{global.radius.container.L}",
             $description: "Tile (more rounded)",
           },
           name: "containerRadiusTileselectCurved",
@@ -2038,12 +2036,12 @@ module.exports = {
         },
         sweeping: {
           $type: "borderRadius",
-          $value: 32,
-          filePath: "data/tokens/components/container.json",
+          $value: 24,
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.container.XXL}",
+            $value: "{global.radius.container.XL}",
           },
           name: "containerRadiusTileselectSweeping",
           attributes: {},

package/js/common/frozenproduct/small/light/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/small/light/components/form.js

@@ -3229,12 +3229,12 @@ module.exports = {
       calendar: {
         "bg-active": {
           $type: "color",
-          $value: "#000000",
-          filePath: "data/tokens/components/form.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: "formColorCalendarBgActive",
           attributes: {},
@@ -3255,12 +3255,12 @@ module.exports = {
         },
         "bg-duration": {
           $type: "color",
-          $value: "#e2e2e2",
-          filePath: "data/tokens/components/form.json",
+          $value: "#e5eaed",
+          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: {},
@@ -3281,12 +3281,12 @@ module.exports = {
         },
         "border-duration": {
           $type: "color",
-          $value: "#000000",
-          filePath: "data/tokens/components/form.json",
+          $value: "#223743",
+          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: {},
@@ -3389,7 +3389,7 @@ module.exports = {
       dropdown: {
         "bg-hover": {
           $type: "color",
-          $value: "#0000001a",
+          $value: "#2237431a",
           $description: "REF POPOVER ",
           filePath: "data/tokens/components/form.json",
           isSource: true,
@@ -3467,6 +3467,21 @@ module.exports = {
           attributes: {},
           path: ["form", "color", "dropdown", "label-hover"],
         },
+        "label-subtext": {
+          $type: "color",
+          $value: "#0000008c",
+          $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": {
@@ -3635,12 +3650,12 @@ module.exports = {
         },
         "border-enabled": {
           $type: "color",
-          $value: "#777",
-          filePath: "data/tokens/components/form.json",
+          $value: "#698495",
+          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: "#000000",
-          filePath: "data/tokens/components/form.json",
+          $value: "#335B70",
+          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: "#00000080",
-          filePath: "data/tokens/components/form.json",
+          $value: "#698495",
+          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: "#00000080",
-          filePath: "data/tokens/components/form.json",
+          $value: "#698495",
+          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/small/light/components/link.js

@@ -72,12 +72,12 @@ module.exports = {
       typical: {
         "label-default": {
           $type: "color",
-          $value: "#0c711d",
-          filePath: "data/tokens/components/link.json",
+          $value: "#0b703e",
+          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: {},
@@ -85,12 +85,12 @@ module.exports = {
         },
         "label-hover": {
           $type: "color",
-          $value: "#12601b",
-          filePath: "data/tokens/components/link.json",
+          $value: "#106237",
+          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/small/light/components/nav.js

@@ -66,12 +66,12 @@ module.exports = {
         },
         "bg-hover": {
           $type: "color",
-          $value: "#0000001a",
-          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: {},
@@ -118,12 +118,12 @@ module.exports = {
         },
         "label-hover": {
           $type: "color",
-          $value: "#000000",
-          filePath: "data/tokens/components/nav.json",
+          $value: "#FFFFFF",
+          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",