@sage/design-tokens 15.1.0 → 15.2.1

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

@@ -253,11 +253,11 @@ module.exports = {
       "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: {},
@@ -278,13 +278,13 @@ module.exports = {
       },
       "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",
@@ -306,12 +306,12 @@ module.exports = {
       },
       "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: {},
@@ -319,12 +319,12 @@ module.exports = {
       },
       "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: {},
@@ -332,12 +332,12 @@ module.exports = {
       },
       "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: {},
@@ -522,14 +522,14 @@ module.exports = {
     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.",
         },
@@ -539,14 +539,14 @@ module.exports = {
       },
       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/common/frozenproduct/small/light/components/table.js

@@ -97,14 +97,12 @@ module.exports = {
         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: {},
@@ -112,12 +110,12 @@ module.exports = {
           },
           "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: {},
@@ -180,12 +178,12 @@ module.exports = {
       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: {},
@@ -193,12 +191,12 @@ module.exports = {
         },
         "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: {},
@@ -219,14 +217,12 @@ module.exports = {
         },
         "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: {},
@@ -264,12 +260,12 @@ module.exports = {
         },
         "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: {},
@@ -290,12 +286,12 @@ module.exports = {
         },
         "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: {},
@@ -303,12 +299,12 @@ module.exports = {
         },
         "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/common/frozenproduct/small/light/mode.d.ts

@@ -201,6 +201,7 @@ declare const tokens: {
           default: DesignToken;
           defaultAlt: DesignToken;
           defaultAlt2: DesignToken;
+          defaultAlt3: DesignToken;
           hoverAlt: DesignToken;
           hover: DesignToken;
           withActive: DesignToken;

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

@@ -2582,6 +2582,46 @@ module.exports = {
             path: ["modes", "color", "interactive", "monochrome", "defaultAlt"],
           },
           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: {
@@ -2611,14 +2651,14 @@ module.exports = {
               $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/common/product/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/product/large/dark/components/form.js

@@ -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": {
@@ -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/product/large/dark/mode.d.ts

@@ -201,6 +201,7 @@ declare const tokens: {
           default: DesignToken;
           defaultAlt: DesignToken;
           defaultAlt2: DesignToken;
+          defaultAlt3: DesignToken;
           hoverAlt: DesignToken;
           hover: DesignToken;
           withActive: DesignToken;

package/js/common/product/large/dark/mode.js

@@ -2548,6 +2548,46 @@ module.exports = {
             path: ["modes", "color", "interactive", "monochrome", "defaultAlt"],
           },
           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: {
@@ -2577,14 +2617,14 @@ module.exports = {
               $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/common/product/large/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/product/large/light/components/form.js

@@ -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": {
@@ -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/product/large/light/mode.d.ts

@@ -201,6 +201,7 @@ declare const tokens: {
           default: DesignToken;
           defaultAlt: DesignToken;
           defaultAlt2: DesignToken;
+          defaultAlt3: DesignToken;
           hoverAlt: DesignToken;
           hover: DesignToken;
           withActive: DesignToken;

package/js/common/product/large/light/mode.js

@@ -2582,6 +2582,46 @@ module.exports = {
             path: ["modes", "color", "interactive", "monochrome", "defaultAlt"],
           },
           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: {
@@ -2611,14 +2651,14 @@ module.exports = {
               $value: "{modes.color.interactive.monochrome.active}",
               $description: "Tertiary border color",
             },
-            name: "modesColorInteractiveMonochromeDefaultAlt2",
+            name: "modesColorInteractiveMonochromeDefaultAlt3",
             attributes: {},
             path: [
               "modes",
               "color",
               "interactive",
               "monochrome",
-              "defaultAlt2",
+              "defaultAlt3",
             ],
           },
           hoverAlt: {