@sage/design-tokens 15.1.0 → 15.2.1

package/js/umd/frozenproduct/small/light/components/tab.js

@@ -264,11 +264,11 @@
         "bg-active": {
           $type: "color",
           $value: "#FFFFFF",
-          filePath: "data/tokens/components/tab.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.withActive}",
+            $value: "{modes.color.interactive.monochrome.withDefault}",
           },
           name: "tabColorBgActive",
           attributes: {},
@@ -289,13 +289,13 @@
         },
         "bg-hover": {
           $type: "color",
-          $value: "#0000001a",
+          $value: "#2237431a",
           $description: "For anchor nav, not tab.",
-          filePath: "data/tokens/components/tab.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.hoverAlt}",
+            $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
             $description: "For anchor nav, not tab.",
           },
           name: "tabColorBgHover",
@@ -317,12 +317,12 @@
         },
         "border-active": {
           $type: "color",
-          $value: "#000000",
-          filePath: "data/tokens/components/tab.json",
+          $value: "#008046",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.interactive.monochrome.active}",
+            $value: "{modes.color.interactive.primary.frozen.default}",
           },
           name: "tabColorBorderActive",
           attributes: {},
@@ -330,12 +330,12 @@
         },
         "border-enabled": {
           $type: "color",
-          $value: "#d1d1d1",
-          filePath: "data/tokens/components/tab.json",
+          $value: "#2237431a",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.fg.delicate}",
+            $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
           },
           name: "tabColorBorderEnabled",
           attributes: {},
@@ -343,12 +343,12 @@
         },
         "border-hover": {
           $type: "color",
-          $value: "#777",
-          filePath: "data/tokens/components/tab.json",
+          $value: "#2237431a",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "color",
-            $value: "{modes.color.generic.fg.moderate}",
+            $value: "{modes.color.interactive.monochrome.frozen.hoverAlt}",
           },
           name: "tabColorBorderHover",
           attributes: {},
@@ -533,14 +533,14 @@
       radius: {
         M: {
           $type: "borderRadius",
-          $value: 8,
+          $value: 4,
           $description:
             "Tab horizontal - top corners. Tab vertical - left corners.",
-          filePath: "data/tokens/components/tab.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.interactive.M}",
+            $value: "{global.radius.interactive.S}",
             $description:
               "Tab horizontal - top corners. Tab vertical - left corners.",
           },
@@ -550,14 +550,14 @@
         },
         L: {
           $type: "borderRadius",
-          $value: 8,
+          $value: 4,
           $description:
             "Tab horizontal - top corners. Tab vertical - left corners.",
-          filePath: "data/tokens/components/tab.json",
+          filePath: "data/tokens/context/frozenproduct.json",
           isSource: true,
           original: {
             $type: "borderRadius",
-            $value: "{global.radius.interactive.M}",
+            $value: "{global.radius.interactive.S}",
             $description:
               "Tab horizontal - top corners. Tab vertical - left corners.",
           },

package/js/umd/frozenproduct/small/light/components/table.js

@@ -108,14 +108,13 @@
           harsh: {
             "bg-alt": {
               $type: "color",
-              $value: "#000000e6",
-              $description: "header alt",
-              filePath: "data/tokens/components/table.json",
+              $value: "#476a7d",
+              filePath: "data/tokens/context/frozenproduct.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.interactive.monochrome.default}",
-                $description: "header alt",
+                $value:
+                  "{modes.color.interactive.monochrome.frozen.defaultAlt}",
               },
               name: "tableColorHeaderHarshBgAlt",
               attributes: {},
@@ -123,12 +122,12 @@
             },
             "bg-default": {
               $type: "color",
-              $value: "#000000ab",
-              filePath: "data/tokens/components/table.json",
+              $value: "#335B70",
+              filePath: "data/tokens/context/frozenproduct.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.interactive.monochrome.defaultAlt}",
+                $value: "{modes.color.interactive.monochrome.frozen.default}",
               },
               name: "tableColorHeaderHarshBgDefault",
               attributes: {},
@@ -191,12 +190,12 @@
         row: {
           "bg-activated": {
             $type: "color",
-            $value: "#00811F",
-            filePath: "data/tokens/components/table.json",
+            $value: "#9badb8",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.primary.default}",
+              $value: "{modes.color.interactive.primary.frozen.table.default}",
             },
             name: "tableColorRowBgActivated",
             attributes: {},
@@ -204,12 +203,12 @@
           },
           "bg-active": {
             $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/table.json",
+            $value: "#22374326",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.active}",
+              $value: "{modes.color.interactive.monochrome.frozen.activeAlt}",
             },
             name: "tableColorRowBgActive",
             attributes: {},
@@ -230,14 +229,12 @@
           },
           "bg-alt": {
             $type: "color",
-            $value: "#e8e8e8",
-            $description: "Zebra stripes",
-            filePath: "data/tokens/components/table.json",
+            $value: "#fbfbfc",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.bg.delicate}",
-              $description: "Zebra stripes",
+              $value: "{modes.color.generic.bg.frozen.delicate}",
             },
             name: "tableColorRowBgAlt",
             attributes: {},
@@ -275,12 +272,12 @@
           },
           "bg-hover": {
             $type: "color",
-            $value: "#dedede",
-            filePath: "data/tokens/components/table.json",
+            $value: "#f2f4f6",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.bg.soft}",
+              $value: "{modes.color.generic.bg.frozen.soft}",
             },
             name: "tableColorRowBgHover",
             attributes: {},
@@ -301,12 +298,12 @@
           },
           "label-activated": {
             $type: "color",
-            $value: "#FFFFFF",
-            filePath: "data/tokens/components/table.json",
+            $value: "#000000",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActive}",
+              $value: "{modes.color.interactive.monochrome.withActiveAlt}",
             },
             name: "tableColorRowLabelActivated",
             attributes: {},
@@ -314,12 +311,12 @@
           },
           "label-active": {
             $type: "color",
-            $value: "#FFFFFF",
-            filePath: "data/tokens/components/table.json",
+            $value: "#000000",
+            filePath: "data/tokens/context/frozenproduct.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.interactive.monochrome.withActive}",
+              $value: "{modes.color.interactive.monochrome.withActiveAlt}",
             },
             name: "tableColorRowLabelActive",
             attributes: {},

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

@@ -2637,6 +2637,46 @@
               ],
             },
             defaultAlt2: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "alpha",
+                    value: "0.55",
+                    space: "lch",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#0000008c",
+              $description: "Dropdown option subtext.",
+              filePath: "data/tokens/modes/light.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: {
@@ -2666,14 +2706,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/product/large/dark/components/form.js

@@ -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": {
@@ -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/product/large/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/product/large/light/components/form.js

@@ -3485,6 +3485,21 @@
             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": {
@@ -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/product/large/light/mode.js

@@ -2637,6 +2637,46 @@
               ],
             },
             defaultAlt2: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "alpha",
+                    value: "0.55",
+                    space: "lch",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#0000008c",
+              $description: "Dropdown option subtext.",
+              filePath: "data/tokens/modes/light.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: {
@@ -2666,14 +2706,14 @@
                 $value: "{modes.color.interactive.monochrome.active}",
                 $description: "Tertiary border color",
               },
-              name: "modesColorInteractiveMonochromeDefaultAlt2",
+              name: "modesColorInteractiveMonochromeDefaultAlt3",
               attributes: {},
               path: [
                 "modes",
                 "color",
                 "interactive",
                 "monochrome",
-                "defaultAlt2",
+                "defaultAlt3",
               ],
             },
             hoverAlt: {