@sage/design-tokens 15.1.0 → 15.2.1

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

@@ -3248,11 +3248,11 @@
           "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: {},
@@ -3273,12 +3273,12 @@
           },
           "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: {},
@@ -3300,11 +3300,11 @@
           "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: {},
@@ -3485,6 +3485,21 @@
             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": {
@@ -3654,11 +3669,11 @@
           "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: {},
@@ -3903,12 +3918,12 @@
         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: {},
@@ -3998,12 +4013,12 @@
           },
           "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: {},
@@ -4050,12 +4065,12 @@
           },
           "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: {},
@@ -4230,13 +4245,13 @@
         },
         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",
@@ -4247,7 +4262,7 @@
           $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",
@@ -4260,14 +4275,14 @@
         },
         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: {},
@@ -4277,7 +4292,7 @@
           $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",
@@ -4290,13 +4305,13 @@
         },
         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",
@@ -4305,13 +4320,13 @@
         },
         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",
@@ -4320,14 +4335,14 @@
         },
         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",
           },
@@ -4367,13 +4382,13 @@
         },
         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",
@@ -4742,6 +4757,25 @@
             },
           },
           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: {
@@ -4862,6 +4896,25 @@
             },
           },
           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/umd/frozenproduct/large/dark/components/link.js

@@ -90,11 +90,11 @@
           "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: {},
@@ -103,11 +103,11 @@
           "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/umd/frozenproduct/large/dark/components/nav.js

@@ -77,12 +77,12 @@
           },
           "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: {},
@@ -130,11 +130,12 @@
           "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: {},
@@ -647,13 +648,13 @@
         },
         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/umd/frozenproduct/large/dark/components/popover.js

@@ -639,13 +639,11 @@
         "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: {},
@@ -654,13 +652,11 @@
         "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: {},
@@ -684,13 +680,11 @@
         "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: {},
@@ -712,11 +706,11 @@
         "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: {},
@@ -737,12 +731,12 @@
         },
         "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: {},
@@ -750,12 +744,12 @@
         },
         "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/umd/frozenproduct/large/dark/components/progress.js

@@ -503,11 +503,11 @@
         "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: {},
@@ -516,11 +516,11 @@
         "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: {},
@@ -583,12 +583,12 @@
         },
         "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: {},
@@ -665,11 +665,11 @@
           "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: {},
@@ -677,13 +677,13 @@
           },
           "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",