@sage/design-tokens 15.0.0 → 15.2.0

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

@@ -3467,6 +3467,21 @@ module.exports = {
           attributes: {},
           path: ["form", "color", "dropdown", "label-hover"],
         },
+        "label-subtext": {
+          $type: "color",
+          $value: "#0000006b",
+          $description: "Option subtext.",
+          filePath: "data/tokens/components/form.json",
+          isSource: true,
+          original: {
+            $type: "color",
+            $value: "{modes.color.interactive.monochrome.defaultAlt3}",
+            $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/small/light/components/nav.js

@@ -1112,13 +1112,13 @@ module.exports = {
         parentContainer: {
           fixedWidth: {
             $type: "sizing",
-            $value: "140",
+            $value: "146",
             $description: "fixed width of parent container",
             filePath: "data/tokens/components/nav.json",
             isSource: true,
             original: {
               $type: "sizing",
-              $value: "140",
+              $value: "146",
               $description: "fixed width of parent container",
             },
             name: "navSizeLeftnavParentContainerFixedWidth",

package/js/common/product/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/product/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/es6/frozenproduct/large/dark/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

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

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
 export const formColorDropdownLabelDisabled = "#ffffff4d";
 export const formColorDropdownLabelEnabled = "#ffffffab";
 export const formColorDropdownLabelHover = "#FFFFFF";
+export const formColorDropdownLabelSubtext = "#ffffff6b";
 export const formColorLabelsetLabelRequired = "#E13E53";
 export const formColorLabelsetLabelDefault = "#fffffff2";
 export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

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

@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
 export const navSizeLeftnavParentMinheight = 48;
 export const navSizeLeftnavChildMinheight = 40;
 export const navSizeLeftnavGrandchildMinheight = 32;
-export const navSizeLeftnavParentContainerFixedWidth = "140";
+export const navSizeLeftnavParentContainerFixedWidth = "146";
 export const navSizeLeftnavChildContainerFixedWidth = "250";
 export const navSizeModalParentitemMinheight = 40;
 export const navSizeModalChilditemMinheight = 32;

package/js/es6/frozenproduct/large/dark/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/large/dark/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
 export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
 export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
 export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
 export const modesColorInteractiveMonochromeHover = "#ffffff26";
 export const modesColorInteractiveMonochromeWithActive = "#000000";

package/js/es6/frozenproduct/large/light/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/large/light/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
 export const formColorDropdownLabelDisabled = "#0000006b";
 export const formColorDropdownLabelEnabled = "#000000ab";
 export const formColorDropdownLabelHover = "#000000";
+export const formColorDropdownLabelSubtext = "#0000006b";
 export const formColorLabelsetLabelRequired = "#CD384B";
 export const formColorLabelsetLabelDefault = "#000000f2";
 export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/large/light/components/nav.js

@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
 export const navSizeLeftnavParentMinheight = 48;
 export const navSizeLeftnavChildMinheight = 40;
 export const navSizeLeftnavGrandchildMinheight = 32;
-export const navSizeLeftnavParentContainerFixedWidth = "140";
+export const navSizeLeftnavParentContainerFixedWidth = "146";
 export const navSizeLeftnavChildContainerFixedWidth = "250";
 export const navSizeModalParentitemMinheight = 40;
 export const navSizeModalChilditemMinheight = 32;

package/js/es6/frozenproduct/large/light/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/large/light/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
 export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
 export const modesColorInteractiveMonochromeDefault = "#000000e6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
 export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
 export const modesColorInteractiveMonochromeHover = "#00000026";
 export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";

package/js/es6/frozenproduct/small/dark/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/small/dark/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#ffffffe6";
 export const formColorDropdownLabelDisabled = "#ffffff4d";
 export const formColorDropdownLabelEnabled = "#ffffffab";
 export const formColorDropdownLabelHover = "#FFFFFF";
+export const formColorDropdownLabelSubtext = "#ffffff6b";
 export const formColorLabelsetLabelRequired = "#E13E53";
 export const formColorLabelsetLabelDefault = "#fffffff2";
 export const formColorLabelsetLabelAlt = "#ffffff8c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/small/dark/components/nav.js

@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
 export const navSizeLeftnavParentMinheight = 48;
 export const navSizeLeftnavChildMinheight = 40;
 export const navSizeLeftnavGrandchildMinheight = 32;
-export const navSizeLeftnavParentContainerFixedWidth = "140";
+export const navSizeLeftnavParentContainerFixedWidth = "146";
 export const navSizeLeftnavChildContainerFixedWidth = "250";
 export const navSizeModalParentitemMinheight = 40;
 export const navSizeModalChilditemMinheight = 32;

package/js/es6/frozenproduct/small/dark/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

package/js/es6/frozenproduct/small/dark/mode.js

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#FFFFFF";
 export const modesColorInteractiveMonochromeActiveAlt = "#ffffff26";
 export const modesColorInteractiveMonochromeDefault = "#ffffffe6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#ffffffab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff6b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#ffffff8c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#ffffff6b";
 export const modesColorInteractiveMonochromeHoverAlt = "#ffffff1a";
 export const modesColorInteractiveMonochromeHover = "#ffffff26";
 export const modesColorInteractiveMonochromeWithActive = "#000000";

package/js/es6/frozenproduct/small/light/components/form.d.ts

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt: string;
 export const formColorDropdownLabelDisabled: string;
 export const formColorDropdownLabelEnabled: string;
 export const formColorDropdownLabelHover: string;
+export const formColorDropdownLabelSubtext: string;
 export const formColorLabelsetLabelRequired: string;
 export const formColorLabelsetLabelDefault: string;
 export const formColorLabelsetLabelAlt: string;
@@ -322,6 +323,13 @@ export const formTypographyAdaptiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyAdaptiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyAdaptiveDefaultS: {
   fontFamily: string;
   fontWeight: string;
@@ -364,6 +372,13 @@ export const formTypographyResponsiveLabelL: {
   fontSize: string;
   paragraphSpacing: string;
 };
+export const formTypographyResponsiveDefaultXs: {
+  fontFamily: string;
+  fontWeight: string;
+  lineHeight: number;
+  fontSize: string;
+  paragraphSpacing: string;
+};
 export const formTypographyResponsiveDefaultS: {
   fontFamily: string;
   fontWeight: string;

package/js/es6/frozenproduct/small/light/components/form.js

@@ -212,6 +212,7 @@ export const formColorDropdownLabelAlt = "#000000e6";
 export const formColorDropdownLabelDisabled = "#0000006b";
 export const formColorDropdownLabelEnabled = "#000000ab";
 export const formColorDropdownLabelHover = "#000000";
+export const formColorDropdownLabelSubtext = "#0000006b";
 export const formColorLabelsetLabelRequired = "#CD384B";
 export const formColorLabelsetLabelDefault = "#000000f2";
 export const formColorLabelsetLabelAlt = "#0000008c";
@@ -332,6 +333,13 @@ export const formTypographyAdaptiveLabelL = {
   fontSize: "16px",
   paragraphSpacing: "0",
 };
+export const formTypographyAdaptiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "13px",
+  paragraphSpacing: "0",
+};
 export const formTypographyAdaptiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",
@@ -374,6 +382,13 @@ export const formTypographyResponsiveLabelL = {
   fontSize: "clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)",
   paragraphSpacing: "0",
 };
+export const formTypographyResponsiveDefaultXs = {
+  fontFamily: "Sage UI",
+  fontWeight: "400",
+  lineHeight: 1.5,
+  fontSize: "clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)",
+  paragraphSpacing: "0",
+};
 export const formTypographyResponsiveDefaultS = {
   fontFamily: "Sage UI",
   fontWeight: "400",

package/js/es6/frozenproduct/small/light/components/nav.js

@@ -108,7 +108,7 @@ export const navSizeNavbarItemYM = 40;
 export const navSizeLeftnavParentMinheight = 48;
 export const navSizeLeftnavChildMinheight = 40;
 export const navSizeLeftnavGrandchildMinheight = 32;
-export const navSizeLeftnavParentContainerFixedWidth = "140";
+export const navSizeLeftnavParentContainerFixedWidth = "146";
 export const navSizeLeftnavChildContainerFixedWidth = "250";
 export const navSizeModalParentitemMinheight = 40;
 export const navSizeModalChilditemMinheight = 32;

package/js/es6/frozenproduct/small/light/mode.d.ts

@@ -116,6 +116,7 @@ export const modesColorInteractiveMonochromeActiveAlt: string;
 export const modesColorInteractiveMonochromeDefault: string;
 export const modesColorInteractiveMonochromeDefaultAlt: string;
 export const modesColorInteractiveMonochromeDefaultAlt2: string;
+export const modesColorInteractiveMonochromeDefaultAlt3: string;
 export const modesColorInteractiveMonochromeHoverAlt: string;
 export const modesColorInteractiveMonochromeHover: string;
 export const modesColorInteractiveMonochromeWithActive: string;

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

@@ -119,7 +119,8 @@ export const modesColorInteractiveMonochromeActive = "#000000";
 export const modesColorInteractiveMonochromeActiveAlt = "#00000026";
 export const modesColorInteractiveMonochromeDefault = "#000000e6";
 export const modesColorInteractiveMonochromeDefaultAlt = "#000000ab";
-export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000006b";
+export const modesColorInteractiveMonochromeDefaultAlt2 = "#0000008c";
+export const modesColorInteractiveMonochromeDefaultAlt3 = "#0000006b";
 export const modesColorInteractiveMonochromeHoverAlt = "#0000001a";
 export const modesColorInteractiveMonochromeHover = "#00000026";
 export const modesColorInteractiveMonochromeWithActive = "#FFFFFF";