@sage/design-tokens 14.5.0 → 14.7.0

package/js/common/marketing/large/dark/components/container.js

@@ -913,6 +913,101 @@ module.exports = {
           },
         },
       },
+      dialog: {
+        maxWidth: {
+          XXS: {
+            $type: "sizing",
+            $value: "300",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "300",
+            },
+            name: "containerSizeDialogMaxWidthXxs",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "XXS"],
+          },
+          XS: {
+            $type: "sizing",
+            $value: "380",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "380",
+            },
+            name: "containerSizeDialogMaxWidthXs",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "XS"],
+          },
+          S: {
+            $type: "sizing",
+            $value: "540",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "540",
+            },
+            name: "containerSizeDialogMaxWidthS",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "S"],
+          },
+          M: {
+            $type: "sizing",
+            $value: "750",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "750",
+            },
+            name: "containerSizeDialogMaxWidthM",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "M"],
+          },
+          L: {
+            $type: "sizing",
+            $value: "850",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "850",
+            },
+            name: "containerSizeDialogMaxWidthL",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "L"],
+          },
+          XL: {
+            $type: "sizing",
+            $value: "960",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "960",
+            },
+            name: "containerSizeDialogMaxWidthXl",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "XL"],
+          },
+          XXL: {
+            $type: "sizing",
+            $value: "1080",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "1080",
+            },
+            name: "containerSizeDialogMaxWidthXxl",
+            attributes: {},
+            path: ["container", "size", "dialog", "maxWidth", "XXL"],
+          },
+        },
+      },
       drag: {
         droptarget: {
           $type: "sizing",
@@ -930,6 +1025,87 @@ module.exports = {
           path: ["container", "size", "drag", "droptarget"],
         },
       },
+      drawer: {
+        minwidth: {
+          $type: "sizing",
+          $value: 288,
+          $description: "min-width for drawer component",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "sizing",
+            $value: "{container.size.responsive.XL}",
+            $description: "min-width for drawer component",
+          },
+          name: "containerSizeDrawerMinwidth",
+          attributes: {},
+          path: ["container", "size", "drawer", "minwidth"],
+        },
+        maxwidth: {
+          $type: "sizing",
+          $value: 760,
+          $description: "max-width for drawer component",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "sizing",
+            $value: "{container.size.responsive.XXXXL}",
+            $description: "max-width for drawer component",
+          },
+          name: "containerSizeDrawerMaxwidth",
+          attributes: {},
+          path: ["container", "size", "drawer", "maxwidth"],
+        },
+        closed: {
+          M: {
+            $type: "sizing",
+            $value: 40,
+            $description: "width for the closed drawer state",
+            filePath: "data/tokens/components/container.json",
+            isSource: true,
+            original: {
+              $type: "sizing",
+              $value: "{global.size.macro.M}",
+              $description: "width for the closed drawer state",
+            },
+            name: "containerSizeDrawerClosedM",
+            attributes: {},
+            path: ["container", "size", "drawer", "closed", "M"],
+          },
+        },
+      },
+      footer: {
+        M: {
+          $type: "sizing",
+          $value: 56,
+          $description: "card and tile footers",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "sizing",
+            $value: "{global.size.macro.XL}",
+            $description: "card and tile footers",
+          },
+          name: "containerSizeFooterM",
+          attributes: {},
+          path: ["container", "size", "footer", "M"],
+        },
+        L: {
+          $type: "sizing",
+          $value: 72,
+          $description: "Dialog, sidebar and drawer footer max-height",
+          filePath: "data/tokens/components/container.json",
+          isSource: true,
+          original: {
+            $type: "sizing",
+            $value: "{global.size.macro.XS} * 3",
+            $description: "Dialog, sidebar and drawer footer max-height",
+          },
+          name: "containerSizeFooterL",
+          attributes: {},
+          path: ["container", "size", "footer", "L"],
+        },
+      },
       generic: {
         emptystate: {
           illustration: {
@@ -1035,87 +1211,6 @@ module.exports = {
           },
         },
       },
-      drawer: {
-        minwidth: {
-          $type: "sizing",
-          $value: 288,
-          $description: "min-width for drawer component",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{container.size.responsive.XL}",
-            $description: "min-width for drawer component",
-          },
-          name: "containerSizeDrawerMinwidth",
-          attributes: {},
-          path: ["container", "size", "drawer", "minwidth"],
-        },
-        maxwidth: {
-          $type: "sizing",
-          $value: 760,
-          $description: "max-width for drawer component",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{container.size.responsive.XXXXL}",
-            $description: "max-width for drawer component",
-          },
-          name: "containerSizeDrawerMaxwidth",
-          attributes: {},
-          path: ["container", "size", "drawer", "maxwidth"],
-        },
-        closed: {
-          M: {
-            $type: "sizing",
-            $value: 40,
-            $description: "width for the closed drawer state",
-            filePath: "data/tokens/components/container.json",
-            isSource: true,
-            original: {
-              $type: "sizing",
-              $value: "{global.size.macro.M}",
-              $description: "width for the closed drawer state",
-            },
-            name: "containerSizeDrawerClosedM",
-            attributes: {},
-            path: ["container", "size", "drawer", "closed", "M"],
-          },
-        },
-      },
-      footer: {
-        M: {
-          $type: "sizing",
-          $value: 56,
-          $description: "card and tile footers",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.macro.XL}",
-            $description: "card and tile footers",
-          },
-          name: "containerSizeFooterM",
-          attributes: {},
-          path: ["container", "size", "footer", "M"],
-        },
-        L: {
-          $type: "sizing",
-          $value: 72,
-          $description: "Dialog, sidebar and drawer footer max-height",
-          filePath: "data/tokens/components/container.json",
-          isSource: true,
-          original: {
-            $type: "sizing",
-            $value: "{global.size.macro.XS} * 3",
-            $description: "Dialog, sidebar and drawer footer max-height",
-          },
-          name: "containerSizeFooterL",
-          attributes: {},
-          path: ["container", "size", "footer", "L"],
-        },
-      },
       icon: {
         S: {
           $type: "sizing",

package/js/common/marketing/large/dark/components/form.d.ts

@@ -137,6 +137,13 @@ declare const tokens: {
             L: DesignToken;
           };
         };
+        trigger: {
+          subtle: {
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+        };
       };
       fileinput: {
         status: {

package/js/common/marketing/large/dark/components/form.js

@@ -196,13 +196,13 @@ module.exports = {
         pr: {
           S: {
             $type: "spacing",
-            $value: 2,
+            $value: "0",
             $description: "right padding on small date picker input",
             filePath: "data/tokens/components/form.json",
             isSource: true,
             original: {
               $type: "spacing",
-              $value: "{global.space.micro.XS}",
+              $value: "0",
               $description: "right padding on small date picker input",
             },
             name: "formSpaceDatepickerPrS",
@@ -211,13 +211,13 @@ module.exports = {
           },
           M: {
             $type: "spacing",
-            $value: 6,
+            $value: "0",
             $description: "right padding on medium date picker input",
             filePath: "data/tokens/components/form.json",
             isSource: true,
             original: {
               $type: "spacing",
-              $value: "{global.space.micro.M}",
+              $value: "0",
               $description: "right padding on medium date picker input",
             },
             name: "formSpaceDatepickerPrM",
@@ -226,13 +226,13 @@ module.exports = {
           },
           L: {
             $type: "spacing",
-            $value: 10,
+            $value: "0",
             $description: "right padding on large date picker input",
             filePath: "data/tokens/components/form.json",
             isSource: true,
             original: {
               $type: "spacing",
-              $value: "{global.space.micro.XL}",
+              $value: "0",
               $description: "right padding on large date picker input",
             },
             name: "formSpaceDatepickerPrL",
@@ -966,6 +966,61 @@ module.exports = {
             },
           },
         },
+        trigger: {
+          subtle: {
+            S: {
+              $type: "spacing",
+              $value: 4,
+              $description:
+                "Left and right padding on subtle dropdown triggers.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "{global.space.micro.S}",
+                $description:
+                  "Left and right padding on subtle dropdown triggers.",
+              },
+              name: "formSpaceDropdownTriggerSubtleS",
+              attributes: {},
+              path: ["form", "space", "dropdown", "trigger", "subtle", "S"],
+            },
+            M: {
+              $type: "spacing",
+              $value: 4,
+              $description:
+                "Left and right padding on subtle dropdown triggers.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "{global.space.micro.S}",
+                $description:
+                  "Left and right padding on subtle dropdown triggers.",
+              },
+              name: "formSpaceDropdownTriggerSubtleM",
+              attributes: {},
+              path: ["form", "space", "dropdown", "trigger", "subtle", "M"],
+            },
+            L: {
+              $type: "spacing",
+              $value: 4,
+              $description:
+                "Left and right padding on subtle dropdown triggers.",
+              filePath: "data/tokens/components/form.json",
+              isSource: true,
+              original: {
+                $type: "spacing",
+                $value: "{global.space.micro.S}",
+                $description:
+                  "Left and right padding on subtle dropdown triggers.",
+              },
+              name: "formSpaceDropdownTriggerSubtleL",
+              attributes: {},
+              path: ["form", "space", "dropdown", "trigger", "subtle", "L"],
+            },
+          },
+        },
       },
       fileinput: {
         status: {

package/js/common/marketing/large/global.d.ts

@@ -286,8 +286,8 @@ declare const tokens: {
     };
     fontSize: {
       adaptive: {
-        "step-2": DesignToken;
-        "step-1": DesignToken;
+        stepMinus2: DesignToken;
+        stepMinus1: DesignToken;
         step0: DesignToken;
         step1: DesignToken;
         step2: DesignToken;

package/js/common/marketing/large/global.js

@@ -2844,7 +2844,8 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.medium}",
                   lineHeight: "{primitives.lineHeights.500}",
-                  fontSize: "{primitives.fontSize.responsive.product.step-1}",
+                  fontSize:
+                    "{primitives.fontSize.responsive.product.stepMinus1}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
                 $description: "Small Viewports: 13.72, Large Viewports: 11.89",
@@ -2988,7 +2989,8 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.regular}",
                   lineHeight: "{primitives.lineHeights.500}",
-                  fontSize: "{primitives.fontSize.responsive.product.step-1}",
+                  fontSize:
+                    "{primitives.fontSize.responsive.product.stepMinus1}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
                 $description: "Small Viewports: 13.72, Large Viewports: 11.89",
@@ -3439,7 +3441,8 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.medium}",
                   lineHeight: "{primitives.lineHeights.500}",
-                  fontSize: "{primitives.fontSize.responsive.product.step-2}",
+                  fontSize:
+                    "{primitives.fontSize.responsive.product.stepMinus2}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
               },
@@ -3667,7 +3670,8 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.medium}",
                   lineHeight: "{primitives.lineHeights.300}",
-                  fontSize: "{primitives.fontSize.responsive.product.step-1}",
+                  fontSize:
+                    "{primitives.fontSize.responsive.product.stepMinus1}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
                 $description:
@@ -4003,7 +4007,7 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.medium}",
                   lineHeight: "{primitives.lineHeights.500}",
-                  fontSize: "{global.fontSize.adaptive.step-1}",
+                  fontSize: "{global.fontSize.adaptive.stepMinus1}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
               },
@@ -4133,7 +4137,7 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.regular}",
                   lineHeight: "{primitives.lineHeights.500}",
-                  fontSize: "{global.fontSize.adaptive.step-1}",
+                  fontSize: "{global.fontSize.adaptive.stepMinus1}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
               },
@@ -4565,7 +4569,7 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.medium}",
                   lineHeight: "{primitives.lineHeights.500}",
-                  fontSize: "{global.fontSize.adaptive.step-2}",
+                  fontSize: "{global.fontSize.adaptive.stepMinus2}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
               },
@@ -4793,7 +4797,7 @@ module.exports = {
                   fontFamily: "{global.fontFamilies.component}",
                   fontWeight: "{primitives.fontWeights.medium}",
                   lineHeight: "{primitives.lineHeights.300}",
-                  fontSize: "{global.fontSize.adaptive.step-1}",
+                  fontSize: "{global.fontSize.adaptive.stepMinus1}",
                   paragraphSpacing: "{primitives.paragraphSpacing.0}",
                 },
                 $description:
@@ -4816,7 +4820,7 @@ module.exports = {
     },
     fontSize: {
       adaptive: {
-        "step-2": {
+        stepMinus2: {
           $type: "fontSize",
           $value: "11px",
           filePath: "data/tokens/global/typography.json",
@@ -4835,11 +4839,11 @@ module.exports = {
               },
             },
           },
-          name: "globalFontSizeAdaptiveStep2",
+          name: "globalFontSizeAdaptiveStepMinus2",
           attributes: {},
-          path: ["global", "fontSize", "adaptive", "step-2"],
+          path: ["global", "fontSize", "adaptive", "stepMinus2"],
         },
-        "step-1": {
+        stepMinus1: {
           $type: "fontSize",
           $value: "12px",
           filePath: "data/tokens/global/typography.json",
@@ -4858,9 +4862,9 @@ module.exports = {
               },
             },
           },
-          name: "globalFontSizeAdaptiveStep1",
+          name: "globalFontSizeAdaptiveStepMinus1",
           attributes: {},
-          path: ["global", "fontSize", "adaptive", "step-1"],
+          path: ["global", "fontSize", "adaptive", "stepMinus1"],
         },
         step0: {
           $type: "fontSize",

package/js/common/marketing/large/light/components/button.d.ts

@@ -33,6 +33,7 @@ declare const tokens: {
         L: DesignToken;
       };
       icon: {
+        S: DesignToken;
         M: DesignToken;
       };
       video: {
@@ -122,6 +123,11 @@ declare const tokens: {
             M: DesignToken;
             L: DesignToken;
           };
+          y: {
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
         };
       };
       secondary: {
@@ -138,13 +144,20 @@ declare const tokens: {
           L: DesignToken;
         };
         xg: {
+          XS: DesignToken;
           S: DesignToken;
           M: DesignToken;
           L: DesignToken;
-          XS: DesignToken;
         };
         icononly: {
           x: {
+            XS: DesignToken;
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+          y: {
+            XS: DesignToken;
             S: DesignToken;
             M: DesignToken;
             L: DesignToken;
@@ -172,6 +185,13 @@ declare const tokens: {
         };
         icononly: {
           x: {
+            XS: DesignToken;
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+          y: {
+            XS: DesignToken;
             S: DesignToken;
             M: DesignToken;
             L: DesignToken;
@@ -199,6 +219,13 @@ declare const tokens: {
         };
         icononly: {
           x: {
+            XS: DesignToken;
+            S: DesignToken;
+            M: DesignToken;
+            L: DesignToken;
+          };
+          y: {
+            XS: DesignToken;
             S: DesignToken;
             M: DesignToken;
             L: DesignToken;