@sage/design-tokens 15.1.0 → 15.2.1

package/js/common/product/small/light/components/popover.js

@@ -256,7 +256,7 @@ module.exports = {
         x: {
           S: {
             $type: "spacing",
-            $value: 4.8,
+            $value: 6,
             $description:
               "Left and right padding token used on small popover container consumed inside number input.",
             filePath: "data/tokens/components/popover.json",
@@ -273,7 +273,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 6.4,
+            $value: 8,
             $description:
               "Left and right padding token used on medium popover container consumed inside number input.",
             filePath: "data/tokens/components/popover.json",
@@ -290,7 +290,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 9.6,
+            $value: 12,
             $description:
               "Left and right padding token used on large popover container consumed inside number input.",
             filePath: "data/tokens/components/popover.json",
@@ -309,7 +309,7 @@ module.exports = {
         y: {
           S: {
             $type: "spacing",
-            $value: 4.8,
+            $value: 6,
             $description:
               "Top and bottom padding inside S size popover menu container",
             filePath: "data/tokens/components/popover.json",
@@ -326,7 +326,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 6.4,
+            $value: 8,
             $description:
               "Top and bottom padding inside M size popover menu container",
             filePath: "data/tokens/components/popover.json",
@@ -343,7 +343,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 9.6,
+            $value: 12,
             $description:
               "Top and bottom padding inside L size popover menu container",
             filePath: "data/tokens/components/popover.json",
@@ -362,7 +362,7 @@ module.exports = {
         yg: {
           S: {
             $type: "spacing",
-            $value: 4.8,
+            $value: 6,
             $description:
               "Gap spacing token used on small popover container consumed inside number input.",
             filePath: "data/tokens/components/popover.json",
@@ -379,7 +379,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 6.4,
+            $value: 8,
             $description:
               "Gap spacing token used on medium popover container consumed inside number input.",
             filePath: "data/tokens/components/popover.json",
@@ -396,7 +396,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 9.6,
+            $value: 12,
             $description:
               "Gap spacing token used on large popover container consumed inside number input.",
             filePath: "data/tokens/components/popover.json",
@@ -569,7 +569,7 @@ module.exports = {
         x: {
           S: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description:
               "Right left padding on small screen submenu popover container.",
             filePath: "data/tokens/components/popover.json",
@@ -586,7 +586,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description:
               "Right left padding on small screen submenu popover container.",
             filePath: "data/tokens/components/popover.json",
@@ -603,7 +603,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description:
               "Right left padding on small screen submenu popover container.",
             filePath: "data/tokens/components/popover.json",

package/js/common/product/small/light/components/profile.js

@@ -330,7 +330,7 @@ module.exports = {
       x: {
         XS: {
           $type: "spacing",
-          $value: 6.4,
+          $value: 8,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
@@ -345,7 +345,7 @@ module.exports = {
         },
         S: {
           $type: "spacing",
-          $value: 9.6,
+          $value: 12,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
@@ -360,7 +360,7 @@ module.exports = {
         },
         M: {
           $type: "spacing",
-          $value: 12.8,
+          $value: 16,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
@@ -375,7 +375,7 @@ module.exports = {
         },
         ML: {
           $type: "spacing",
-          $value: 12.8,
+          $value: 16,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
@@ -390,7 +390,7 @@ module.exports = {
         },
         L: {
           $type: "spacing",
-          $value: 16,
+          $value: 20,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
@@ -405,7 +405,7 @@ module.exports = {
         },
         XL: {
           $type: "spacing",
-          $value: 19.2,
+          $value: 24,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
@@ -420,7 +420,7 @@ module.exports = {
         },
         XXL: {
           $type: "spacing",
-          $value: 25.6,
+          $value: 32,
           $description: "gap between avatar and name",
           filePath: "data/tokens/components/profile.json",
           isSource: true,

package/js/common/product/small/light/components/progress.js

@@ -1279,7 +1279,7 @@ module.exports = {
         y: {
           M: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description: "Vertical padding on selector group.",
             filePath: "data/tokens/components/progress.json",
             isSource: true,
@@ -1392,7 +1392,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description: "Gap between loader graphic and label.",
             filePath: "data/tokens/components/progress.json",
             isSource: true,
@@ -1628,7 +1628,7 @@ module.exports = {
             },
             XL: {
               $type: "spacing",
-              $value: 12.8,
+              $value: 16,
               $description: "horizontal gap between elements",
               filePath: "data/tokens/components/progress.json",
               isSource: true,
@@ -1683,7 +1683,7 @@ module.exports = {
           xg: {
             M: {
               $type: "spacing",
-              $value: 12.8,
+              $value: 16,
               $description: "Gap between step indicators",
               filePath: "data/tokens/components/progress.json",
               isSource: true,
@@ -1804,7 +1804,7 @@ module.exports = {
             },
             M: {
               $type: "spacing",
-              $value: 12.8,
+              $value: 16,
               $description: "gap between timeline visual and text",
               filePath: "data/tokens/components/progress.json",
               isSource: true,

package/js/common/product/small/light/components/status.js

@@ -3182,7 +3182,7 @@ module.exports = {
         x: {
           S: {
             $type: "spacing",
-            $value: 6.4,
+            $value: 8,
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
@@ -3195,7 +3195,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 6.4,
+            $value: 8,
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
@@ -3208,7 +3208,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 6.4,
+            $value: 8,
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
@@ -3273,7 +3273,7 @@ module.exports = {
             },
             L: {
               $type: "spacing",
-              $value: 16,
+              $value: 20,
               $description: "Left and right paddding on Large Message",
               filePath: "data/tokens/components/status.json",
               isSource: true,
@@ -3305,7 +3305,7 @@ module.exports = {
             },
             L: {
               $type: "spacing",
-              $value: 16,
+              $value: 20,
               $description: "Top and bottom paddding on Large Message",
               filePath: "data/tokens/components/status.json",
               isSource: true,
@@ -3339,7 +3339,7 @@ module.exports = {
             },
             L: {
               $type: "spacing",
-              $value: 12.8,
+              $value: 16,
               $description:
                 "Gap between icon and text in subtle message, and between text and action button in typical message",
               filePath: "data/tokens/components/status.json",
@@ -3450,7 +3450,7 @@ module.exports = {
           x: {
             M: {
               $type: "spacing",
-              $value: 32,
+              $value: 40,
               $description: "Left and right padding on global message",
               filePath: "data/tokens/components/status.json",
               isSource: true,
@@ -3484,7 +3484,7 @@ module.exports = {
           xg: {
             M: {
               $type: "spacing",
-              $value: 12.8,
+              $value: 16,
               $description: "Space between icon wrapper and text wrapper",
               filePath: "data/tokens/components/status.json",
               isSource: true,
@@ -3519,7 +3519,7 @@ module.exports = {
             Y: {
               M: {
                 $type: "spacing",
-                $value: 12.8,
+                $value: 16,
                 $description:
                   "Top and bottom padding on global message for countdown",
                 filePath: "data/tokens/components/status.json",
@@ -3538,7 +3538,7 @@ module.exports = {
             yg: {
               M: {
                 $type: "spacing",
-                $value: 19.2,
+                $value: 24,
                 $description:
                   "Gap between countdown spacing for global message",
                 filePath: "data/tokens/components/status.json",

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

@@ -155,7 +155,7 @@ module.exports = {
       x: {
         M: {
           $type: "spacing",
-          $value: 12.8,
+          $value: 16,
           $description: "Left and right padding on Tab.",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
@@ -170,7 +170,7 @@ module.exports = {
         },
         L: {
           $type: "spacing",
-          $value: 19.2,
+          $value: 24,
           $description: "Left and right padding on Tab.",
           filePath: "data/tokens/components/tab.json",
           isSource: true,

package/js/common/product/small/light/components/table.js

@@ -623,7 +623,7 @@ module.exports = {
           },
           S: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description: "Left and right padding inside S row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -638,7 +638,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description: "Left and right padding inside M row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -653,7 +653,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description: "Left and right padding inside L row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -668,7 +668,7 @@ module.exports = {
           },
           XL: {
             $type: "spacing",
-            $value: 12.8,
+            $value: 16,
             $description: "Left and right padding inside XL row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -774,7 +774,7 @@ module.exports = {
         x: {
           XS: {
             $type: "spacing",
-            $value: 29.6,
+            $value: 36,
             $description: "Left padding inside XS child row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -789,7 +789,7 @@ module.exports = {
           },
           S: {
             $type: "spacing",
-            $value: 36,
+            $value: 44,
             $description: "Left padding inside S child row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -804,7 +804,7 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 36,
+            $value: 44,
             $description: "Left padding inside M child row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -819,7 +819,7 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 36,
+            $value: 44,
             $description: "Left padding inside L child row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,
@@ -834,7 +834,7 @@ module.exports = {
           },
           XL: {
             $type: "spacing",
-            $value: 36,
+            $value: 44,
             $description: "Left padding inside XL child row cells",
             filePath: "data/tokens/components/table.json",
             isSource: true,

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/badge.js

@@ -7,9 +7,9 @@
  */
 
 export const badgeColorNotificationBorderDefault = "#000000";
-export const badgeColorNotificationBgDefault = "#E13E53";
+export const badgeColorNotificationBgDefault = "#E04500";
 export const badgeColorNotificationBgAlt = "#007ED9";
-export const badgeColorNotificationLabelDefault = "#000000";
+export const badgeColorNotificationLabelDefault = "#FFFFFF";
 export const badgeColorNotificationLabelAlt = "#000000";
 export const badgeColorNotificationInverseBorderDefault = "#FFFFFF";
 export const badgeColorNotificationInverseBgDefault = "#CD384B";

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

@@ -192,17 +192,17 @@ export const buttonColorTypicalPrimaryInverseLabelActive = "#FFFFFF";
 export const buttonColorTypicalPrimaryInverseLabelDisabled = "#FFFFFF";
 export const buttonColorTypicalPrimaryInverseLabelEnabled = "#FFFFFF";
 export const buttonColorTypicalPrimaryInverseLabelHover = "#FFFFFF";
-export const buttonColorTypicalSecondaryBgActive = "#00d6394d";
+export const buttonColorTypicalSecondaryBgActive = "#7ce47a";
 export const buttonColorTypicalSecondaryBgEnabled = "#00d63908";
-export const buttonColorTypicalSecondaryBgHover = "#00d6391a";
+export const buttonColorTypicalSecondaryBgHover = "#55dd5b";
 export const buttonColorTypicalSecondaryBorderActive = "#7ce47a";
 export const buttonColorTypicalSecondaryBorderDisabled = "#4b4b4b";
-export const buttonColorTypicalSecondaryBorderEnabled = "#00d639cc";
+export const buttonColorTypicalSecondaryBorderEnabled = "#00D639";
 export const buttonColorTypicalSecondaryBorderHover = "#55dd5b";
-export const buttonColorTypicalSecondaryLabelActive = "#FFFFFF";
+export const buttonColorTypicalSecondaryLabelActive = "#000000";
 export const buttonColorTypicalSecondaryLabelDisabled = "#ffffff4d";
-export const buttonColorTypicalSecondaryLabelEnabled = "#ffffffe6";
-export const buttonColorTypicalSecondaryLabelHover = "#FFFFFF";
+export const buttonColorTypicalSecondaryLabelEnabled = "#00D639";
+export const buttonColorTypicalSecondaryLabelHover = "#000000";
 export const buttonColorTypicalSecondaryInverseBgActive = "#00811f4d";
 export const buttonColorTypicalSecondaryInverseBgEnabled = "#00811f08";
 export const buttonColorTypicalSecondaryInverseBgHover = "#0c711d1a";
@@ -214,17 +214,17 @@ export const buttonColorTypicalSecondaryInverseLabelActive = "#000000";
 export const buttonColorTypicalSecondaryInverseLabelDisabled = "#0000006b";
 export const buttonColorTypicalSecondaryInverseLabelEnabled = "#000000e6";
 export const buttonColorTypicalSecondaryInverseLabelHover = "#000000";
-export const buttonColorTypicalTertiaryBgActive = "#00d6394d";
+export const buttonColorTypicalTertiaryBgActive = "#7ce47a";
 export const buttonColorTypicalTertiaryBgEnabled = "#fff0";
-export const buttonColorTypicalTertiaryBgHover = "#00d6391a";
+export const buttonColorTypicalTertiaryBgHover = "#55dd5b";
 export const buttonColorTypicalTertiaryBorderActive = "#7ce47a";
-export const buttonColorTypicalTertiaryBorderDisabled = "#4b4b4b";
-export const buttonColorTypicalTertiaryBorderEnabled = "#00d639cc";
-export const buttonColorTypicalTertiaryBorderHover = "#55dd5b";
-export const buttonColorTypicalTertiaryLabelActive = "#FFFFFF";
+export const buttonColorTypicalTertiaryBorderDisabled = "#fff0";
+export const buttonColorTypicalTertiaryBorderEnabled = "#fff0";
+export const buttonColorTypicalTertiaryBorderHover = "#fff0";
+export const buttonColorTypicalTertiaryLabelActive = "#000000";
 export const buttonColorTypicalTertiaryLabelDisabled = "#ffffff4d";
-export const buttonColorTypicalTertiaryLabelEnabled = "#ffffffe6";
-export const buttonColorTypicalTertiaryLabelHover = "#FFFFFF";
+export const buttonColorTypicalTertiaryLabelEnabled = "#00D639";
+export const buttonColorTypicalTertiaryLabelHover = "#000000";
 export const buttonColorTypicalTertiaryInverseBgActive = "#00811f4d";
 export const buttonColorTypicalTertiaryInverseBgEnabled = "#fff0";
 export const buttonColorTypicalTertiaryInverseBgHover = "#0c711d1a";
@@ -252,7 +252,7 @@ export const buttonColorTypicalToggleBgActiveDisabled = "#4b4b4b";
 export const buttonColorTypicalToggleLabelActiveDisabled = "#000000";
 export const buttonColorTypicalToggleBgActive = "#FFFFFF";
 export const buttonColorTypicalToggleBgHover = "#ffffff1a";
-export const buttonColorTypicalToggleBorderEnabled = "#ffffffe6";
+export const buttonColorTypicalToggleBorderEnabled = "#777";
 export const buttonColorTypicalToggleBorderDisabled = "#4b4b4b";
 export const buttonColorTypicalToggleLabelActive = "#000000";
 export const buttonColorTypicalToggleLabelDisabled = "#ffffff4d";

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

@@ -129,15 +129,15 @@ export const containerRadiusProfileselector = 8;
 export const containerRadiusScrollbar = "999";
 export const containerRadiusTexteditor = 8;
 export const containerRadiusBlockquoteBar = "999";
-export const containerRadiusCardModerate = 16;
-export const containerRadiusCardCurved = 24;
-export const containerRadiusCardSweeping = 32;
-export const containerRadiusTileModerate = 16;
-export const containerRadiusTileCurved = 24;
-export const containerRadiusTileSweeping = 32;
-export const containerRadiusTileselectModerate = 16;
-export const containerRadiusTileselectCurved = 24;
-export const containerRadiusTileselectSweeping = 32;
+export const containerRadiusCardModerate = 8;
+export const containerRadiusCardCurved = 16;
+export const containerRadiusCardSweeping = 24;
+export const containerRadiusTileModerate = 8;
+export const containerRadiusTileCurved = 16;
+export const containerRadiusTileSweeping = 24;
+export const containerRadiusTileselectModerate = 8;
+export const containerRadiusTileselectCurved = 16;
+export const containerRadiusTileselectSweeping = 24;
 export const containerSpaceNone = 0;
 export const containerSpaceAccordionsubtleYgM = 16;
 export const containerSpaceFilepreviewPreviewXM = 8;

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;
@@ -268,7 +269,7 @@ export const formColorValidationLabelWarning: string;
 export const formRadiusNone: string;
 export const formRadiusCheckbox: number;
 export const formRadiusTexteditorfooter: number;
-export const formRadiusColorpicker: string;
+export const formRadiusColorpicker: number;
 export const formRadiusDropdown: number;
 export const formRadiusFileupload: number;
 export const formRadiusFileselector: number;
@@ -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;