@sage/design-tokens 7.2.0 → 7.3.1

package/js/common/product/small/dark/components/form.js

@@ -1478,14 +1478,14 @@ module.exports = {
           x: {
             S: {
               $type: "spacing",
-              $value: 17.2,
+              $value: 9.8,
               $description:
                 "Left padding on progressively shown form inputs on radio and checkbox",
               filePath: "data/tokens/components/form.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.M} - {global.space.micro.XS}",
+                $value: "{global.space.macro.XS} - 3",
                 $description:
                   "Left padding on progressively shown form inputs on radio and checkbox",
               },
@@ -1495,14 +1495,14 @@ module.exports = {
             },
             M: {
               $type: "spacing",
-              $value: 25.6,
+              $value: 16,
               $description:
                 "Left padding on progressively shown form inputs on radio and checkbox",
               filePath: "data/tokens/components/form.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.L}",
+                $value: "{global.space.macro.S}",
                 $description:
                   "Left padding on progressively shown form inputs on radio and checkbox",
               },
@@ -1512,14 +1512,14 @@ module.exports = {
             },
             L: {
               $type: "spacing",
-              $value: 34,
+              $value: 20.2,
               $description:
                 "Left padding on progressively shown form inputs on radio and checkbox",
               filePath: "data/tokens/components/form.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.XL} + {global.space.micro.XS}",
+                $value: "{global.space.macro.M} + 1",
                 $description:
                   "Left padding on progressively shown form inputs on radio and checkbox",
               },
@@ -1634,6 +1634,85 @@ module.exports = {
               path: ["form", "space", "integral", "progressive", "yg", "L"],
             },
           },
+          keyline: {
+            x: {
+              S: {
+                $type: "spacing",
+                $value: 5.4,
+                $description:
+                  "Left padding on keyline for small progressively shown inputs",
+                filePath: "data/tokens/components/form.json",
+                isSource: true,
+                original: {
+                  $type: "spacing",
+                  $value: "{global.space.macro.XXXS} - 1",
+                  $description:
+                    "Left padding on keyline for small progressively shown inputs",
+                },
+                name: "formSpaceIntegralProgressiveKeylineXS",
+                attributes: {},
+                path: [
+                  "form",
+                  "space",
+                  "integral",
+                  "progressive",
+                  "keyline",
+                  "x",
+                  "S",
+                ],
+              },
+              M: {
+                $type: "spacing",
+                $value: 8.6,
+                $description:
+                  "Left padding on keyline for medium progressively shown inputs",
+                filePath: "data/tokens/components/form.json",
+                isSource: true,
+                original: {
+                  $type: "spacing",
+                  $value: "{global.space.macro.XXS} - 1",
+                  $description:
+                    "Left padding on keyline for medium progressively shown inputs",
+                },
+                name: "formSpaceIntegralProgressiveKeylineXM",
+                attributes: {},
+                path: [
+                  "form",
+                  "space",
+                  "integral",
+                  "progressive",
+                  "keyline",
+                  "x",
+                  "M",
+                ],
+              },
+              L: {
+                $type: "spacing",
+                $value: 11.8,
+                $description:
+                  "Left padding on keyline for large progressively shown inputs",
+                filePath: "data/tokens/components/form.json",
+                isSource: true,
+                original: {
+                  $type: "spacing",
+                  $value: "{global.space.macro.XS} - 1",
+                  $description:
+                    "Left padding on keyline for large progressively shown inputs",
+                },
+                name: "formSpaceIntegralProgressiveKeylineXL",
+                attributes: {},
+                path: [
+                  "form",
+                  "space",
+                  "integral",
+                  "progressive",
+                  "keyline",
+                  "x",
+                  "L",
+                ],
+              },
+            },
+          },
         },
       },
       rating: {
@@ -3002,6 +3081,25 @@ module.exports = {
           path: ["form", "size", "validation", "bar"],
         },
       },
+      progressive: {
+        bar: {
+          $type: "sizing",
+          $value: 2,
+          $description:
+            "2px progressive disclosure keyline bar used in checkbox and radio groups",
+          filePath: "data/tokens/components/form.json",
+          isSource: true,
+          original: {
+            $type: "sizing",
+            $value: "{global.size.micro.XXS}",
+            $description:
+              "2px progressive disclosure keyline bar used in checkbox and radio groups",
+          },
+          name: "formSizeProgressiveBar",
+          attributes: {},
+          path: ["form", "size", "progressive", "bar"],
+        },
+      },
       rating: {
         M: {
           $type: "sizing",
@@ -4171,6 +4269,21 @@ module.exports = {
         attributes: {},
         path: ["form", "radius", "validationbar"],
       },
+      progressivebar: {
+        $type: "borderRadius",
+        $value: 2,
+        $description: "Validation bar",
+        filePath: "data/tokens/components/form.json",
+        isSource: true,
+        original: {
+          $type: "borderRadius",
+          $value: "{global.radius.interactive.XS}",
+          $description: "Validation bar",
+        },
+        name: "formRadiusProgressivebar",
+        attributes: {},
+        path: ["form", "radius", "progressivebar"],
+      },
       calendar: {
         none: {
           $type: "borderRadius",

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

@@ -621,13 +621,13 @@ module.exports = {
       navigation: {
         bottom: {
           $type: "borderWidth",
-          $value: 4,
+          $value: 2,
           $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
-            $value: "{global.borderwidth.L}",
+            $value: "{global.borderwidth.S}",
             $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationBottom",

package/js/common/product/small/light/components/form.d.ts

@@ -231,6 +231,13 @@ declare const tokens: {
             M: DesignToken;
             L: DesignToken;
           };
+          keyline: {
+            x: {
+              S: DesignToken;
+              M: DesignToken;
+              L: DesignToken;
+            };
+          };
         };
       };
       rating: {
@@ -410,6 +417,9 @@ declare const tokens: {
       validation: {
         bar: DesignToken;
       };
+      progressive: {
+        bar: DesignToken;
+      };
       rating: {
         M: DesignToken;
         L: DesignToken;
@@ -512,6 +522,7 @@ declare const tokens: {
       radio: DesignToken;
       switch: DesignToken;
       validationbar: DesignToken;
+      progressivebar: DesignToken;
       calendar: {
         none: DesignToken;
         date: DesignToken;

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

@@ -1478,14 +1478,14 @@ module.exports = {
           x: {
             S: {
               $type: "spacing",
-              $value: 17.2,
+              $value: 9.8,
               $description:
                 "Left padding on progressively shown form inputs on radio and checkbox",
               filePath: "data/tokens/components/form.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.M} - {global.space.micro.XS}",
+                $value: "{global.space.macro.XS} - 3",
                 $description:
                   "Left padding on progressively shown form inputs on radio and checkbox",
               },
@@ -1495,14 +1495,14 @@ module.exports = {
             },
             M: {
               $type: "spacing",
-              $value: 25.6,
+              $value: 16,
               $description:
                 "Left padding on progressively shown form inputs on radio and checkbox",
               filePath: "data/tokens/components/form.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.L}",
+                $value: "{global.space.macro.S}",
                 $description:
                   "Left padding on progressively shown form inputs on radio and checkbox",
               },
@@ -1512,14 +1512,14 @@ module.exports = {
             },
             L: {
               $type: "spacing",
-              $value: 34,
+              $value: 20.2,
               $description:
                 "Left padding on progressively shown form inputs on radio and checkbox",
               filePath: "data/tokens/components/form.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.XL} + {global.space.micro.XS}",
+                $value: "{global.space.macro.M} + 1",
                 $description:
                   "Left padding on progressively shown form inputs on radio and checkbox",
               },
@@ -1634,6 +1634,85 @@ module.exports = {
               path: ["form", "space", "integral", "progressive", "yg", "L"],
             },
           },
+          keyline: {
+            x: {
+              S: {
+                $type: "spacing",
+                $value: 5.4,
+                $description:
+                  "Left padding on keyline for small progressively shown inputs",
+                filePath: "data/tokens/components/form.json",
+                isSource: true,
+                original: {
+                  $type: "spacing",
+                  $value: "{global.space.macro.XXXS} - 1",
+                  $description:
+                    "Left padding on keyline for small progressively shown inputs",
+                },
+                name: "formSpaceIntegralProgressiveKeylineXS",
+                attributes: {},
+                path: [
+                  "form",
+                  "space",
+                  "integral",
+                  "progressive",
+                  "keyline",
+                  "x",
+                  "S",
+                ],
+              },
+              M: {
+                $type: "spacing",
+                $value: 8.6,
+                $description:
+                  "Left padding on keyline for medium progressively shown inputs",
+                filePath: "data/tokens/components/form.json",
+                isSource: true,
+                original: {
+                  $type: "spacing",
+                  $value: "{global.space.macro.XXS} - 1",
+                  $description:
+                    "Left padding on keyline for medium progressively shown inputs",
+                },
+                name: "formSpaceIntegralProgressiveKeylineXM",
+                attributes: {},
+                path: [
+                  "form",
+                  "space",
+                  "integral",
+                  "progressive",
+                  "keyline",
+                  "x",
+                  "M",
+                ],
+              },
+              L: {
+                $type: "spacing",
+                $value: 11.8,
+                $description:
+                  "Left padding on keyline for large progressively shown inputs",
+                filePath: "data/tokens/components/form.json",
+                isSource: true,
+                original: {
+                  $type: "spacing",
+                  $value: "{global.space.macro.XS} - 1",
+                  $description:
+                    "Left padding on keyline for large progressively shown inputs",
+                },
+                name: "formSpaceIntegralProgressiveKeylineXL",
+                attributes: {},
+                path: [
+                  "form",
+                  "space",
+                  "integral",
+                  "progressive",
+                  "keyline",
+                  "x",
+                  "L",
+                ],
+              },
+            },
+          },
         },
       },
       rating: {
@@ -3002,6 +3081,25 @@ module.exports = {
           path: ["form", "size", "validation", "bar"],
         },
       },
+      progressive: {
+        bar: {
+          $type: "sizing",
+          $value: 2,
+          $description:
+            "2px progressive disclosure keyline bar used in checkbox and radio groups",
+          filePath: "data/tokens/components/form.json",
+          isSource: true,
+          original: {
+            $type: "sizing",
+            $value: "{global.size.micro.XXS}",
+            $description:
+              "2px progressive disclosure keyline bar used in checkbox and radio groups",
+          },
+          name: "formSizeProgressiveBar",
+          attributes: {},
+          path: ["form", "size", "progressive", "bar"],
+        },
+      },
       rating: {
         M: {
           $type: "sizing",
@@ -4171,6 +4269,21 @@ module.exports = {
         attributes: {},
         path: ["form", "radius", "validationbar"],
       },
+      progressivebar: {
+        $type: "borderRadius",
+        $value: 2,
+        $description: "Validation bar",
+        filePath: "data/tokens/components/form.json",
+        isSource: true,
+        original: {
+          $type: "borderRadius",
+          $value: "{global.radius.interactive.XS}",
+          $description: "Validation bar",
+        },
+        name: "formRadiusProgressivebar",
+        attributes: {},
+        path: ["form", "radius", "progressivebar"],
+      },
       calendar: {
         none: {
           $type: "borderRadius",

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

@@ -621,13 +621,13 @@ module.exports = {
       navigation: {
         bottom: {
           $type: "borderWidth",
-          $value: 4,
+          $value: 2,
           $description: "Tab (enabled and hover bottom border)",
           filePath: "data/tokens/components/tab.json",
           isSource: true,
           original: {
             $type: "borderWidth",
-            $value: "{global.borderwidth.L}",
+            $value: "{global.borderwidth.S}",
             $description: "Tab (enabled and hover bottom border)",
           },
           name: "tabBorderwidthNavigationBottom",

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

@@ -98,6 +98,9 @@ export const formSpaceIntegralProgressiveYL: number;
 export const formSpaceIntegralProgressiveYgS: number;
 export const formSpaceIntegralProgressiveYgM: number;
 export const formSpaceIntegralProgressiveYgL: number;
+export const formSpaceIntegralProgressiveKeylineXS: number;
+export const formSpaceIntegralProgressiveKeylineXM: number;
+export const formSpaceIntegralProgressiveKeylineXL: number;
 export const formSpaceRatingXgM: number;
 export const formSpaceRatingXgL: number;
 export const formSpaceLayoutStackS: number;
@@ -183,6 +186,7 @@ export const formSizeSearchInputMinwidth: number;
 export const formSizeSearchInputMaxwidth: number;
 export const formSizeTextareaM: number;
 export const formSizeValidationBar: number;
+export const formSizeProgressiveBar: number;
 export const formSizeRatingM: number;
 export const formSizeRatingL: number;
 export const formColorCalendarBgActive: string;
@@ -267,6 +271,7 @@ export const formRadiusInput: number;
 export const formRadiusRadio: string;
 export const formRadiusSwitch: string;
 export const formRadiusValidationbar: number;
+export const formRadiusProgressivebar: number;
 export const formRadiusCalendarNone: string;
 export const formRadiusCalendarDate: string;
 export const formRadiusCalendarToday: number;

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

@@ -89,15 +89,18 @@ export const formSpaceIntegralXgL = 10;
 export const formSpaceIntegralYgS = 6;
 export const formSpaceIntegralYgM = 8;
 export const formSpaceIntegralYgL = 10;
-export const formSpaceIntegralProgressiveXS = 22;
-export const formSpaceIntegralProgressiveXM = 32;
-export const formSpaceIntegralProgressiveXL = 42;
+export const formSpaceIntegralProgressiveXS = 13;
+export const formSpaceIntegralProgressiveXM = 20;
+export const formSpaceIntegralProgressiveXL = 25;
 export const formSpaceIntegralProgressiveYS = 8;
 export const formSpaceIntegralProgressiveYM = 12;
 export const formSpaceIntegralProgressiveYL = 16;
 export const formSpaceIntegralProgressiveYgS = 8;
 export const formSpaceIntegralProgressiveYgM = 12;
 export const formSpaceIntegralProgressiveYgL = 16;
+export const formSpaceIntegralProgressiveKeylineXS = 7;
+export const formSpaceIntegralProgressiveKeylineXM = 11;
+export const formSpaceIntegralProgressiveKeylineXL = 15;
 export const formSpaceRatingXgM = 8;
 export const formSpaceRatingXgL = 12;
 export const formSpaceLayoutStackS = 16;
@@ -183,6 +186,7 @@ export const formSizeSearchInputMinwidth = 288;
 export const formSizeSearchInputMaxwidth = 400;
 export const formSizeTextareaM = 80;
 export const formSizeValidationBar = 2;
+export const formSizeProgressiveBar = 2;
 export const formSizeRatingM = 20;
 export const formSizeRatingL = 32;
 export const formColorCalendarBgActive = "#FFFFFF";
@@ -267,6 +271,7 @@ export const formRadiusInput = 8;
 export const formRadiusRadio = "999";
 export const formRadiusSwitch = "999";
 export const formRadiusValidationbar = 2;
+export const formRadiusProgressivebar = 2;
 export const formRadiusCalendarNone = "0";
 export const formRadiusCalendarDate = "999";
 export const formRadiusCalendarToday = 2;

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

@@ -47,7 +47,7 @@ export const tabRadiusBaselineL = 1;
 export const tabRadiusIndicatorM = 2;
 export const tabRadiusIndicatorL = 2;
 export const tabRadiusNone = "0";
-export const tabBorderwidthNavigationBottom = 4;
+export const tabBorderwidthNavigationBottom = 2;
 export const tabBorderwidthNavigationSide = 2;
 export const tabTypographyAdaptiveLabelS = {
   fontFamily: "Sage UI",

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

@@ -98,6 +98,9 @@ export const formSpaceIntegralProgressiveYL: number;
 export const formSpaceIntegralProgressiveYgS: number;
 export const formSpaceIntegralProgressiveYgM: number;
 export const formSpaceIntegralProgressiveYgL: number;
+export const formSpaceIntegralProgressiveKeylineXS: number;
+export const formSpaceIntegralProgressiveKeylineXM: number;
+export const formSpaceIntegralProgressiveKeylineXL: number;
 export const formSpaceRatingXgM: number;
 export const formSpaceRatingXgL: number;
 export const formSpaceLayoutStackS: number;
@@ -183,6 +186,7 @@ export const formSizeSearchInputMinwidth: number;
 export const formSizeSearchInputMaxwidth: number;
 export const formSizeTextareaM: number;
 export const formSizeValidationBar: number;
+export const formSizeProgressiveBar: number;
 export const formSizeRatingM: number;
 export const formSizeRatingL: number;
 export const formColorCalendarBgActive: string;
@@ -267,6 +271,7 @@ export const formRadiusInput: number;
 export const formRadiusRadio: string;
 export const formRadiusSwitch: string;
 export const formRadiusValidationbar: number;
+export const formRadiusProgressivebar: number;
 export const formRadiusCalendarNone: string;
 export const formRadiusCalendarDate: string;
 export const formRadiusCalendarToday: number;

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

@@ -89,15 +89,18 @@ export const formSpaceIntegralXgL = 10;
 export const formSpaceIntegralYgS = 6;
 export const formSpaceIntegralYgM = 8;
 export const formSpaceIntegralYgL = 10;
-export const formSpaceIntegralProgressiveXS = 22;
-export const formSpaceIntegralProgressiveXM = 32;
-export const formSpaceIntegralProgressiveXL = 42;
+export const formSpaceIntegralProgressiveXS = 13;
+export const formSpaceIntegralProgressiveXM = 20;
+export const formSpaceIntegralProgressiveXL = 25;
 export const formSpaceIntegralProgressiveYS = 8;
 export const formSpaceIntegralProgressiveYM = 12;
 export const formSpaceIntegralProgressiveYL = 16;
 export const formSpaceIntegralProgressiveYgS = 8;
 export const formSpaceIntegralProgressiveYgM = 12;
 export const formSpaceIntegralProgressiveYgL = 16;
+export const formSpaceIntegralProgressiveKeylineXS = 7;
+export const formSpaceIntegralProgressiveKeylineXM = 11;
+export const formSpaceIntegralProgressiveKeylineXL = 15;
 export const formSpaceRatingXgM = 8;
 export const formSpaceRatingXgL = 12;
 export const formSpaceLayoutStackS = 16;
@@ -183,6 +186,7 @@ export const formSizeSearchInputMinwidth = 288;
 export const formSizeSearchInputMaxwidth = 400;
 export const formSizeTextareaM = 80;
 export const formSizeValidationBar = 2;
+export const formSizeProgressiveBar = 2;
 export const formSizeRatingM = 20;
 export const formSizeRatingL = 32;
 export const formColorCalendarBgActive = "#000000";
@@ -267,6 +271,7 @@ export const formRadiusInput = 8;
 export const formRadiusRadio = "999";
 export const formRadiusSwitch = "999";
 export const formRadiusValidationbar = 2;
+export const formRadiusProgressivebar = 2;
 export const formRadiusCalendarNone = "0";
 export const formRadiusCalendarDate = "999";
 export const formRadiusCalendarToday = 2;

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

@@ -47,7 +47,7 @@ export const tabRadiusBaselineL = 1;
 export const tabRadiusIndicatorM = 2;
 export const tabRadiusIndicatorL = 2;
 export const tabRadiusNone = "0";
-export const tabBorderwidthNavigationBottom = 4;
+export const tabBorderwidthNavigationBottom = 2;
 export const tabBorderwidthNavigationSide = 2;
 export const tabTypographyAdaptiveLabelS = {
   fontFamily: "Sage UI",

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

@@ -98,6 +98,9 @@ export const formSpaceIntegralProgressiveYL: number;
 export const formSpaceIntegralProgressiveYgS: number;
 export const formSpaceIntegralProgressiveYgM: number;
 export const formSpaceIntegralProgressiveYgL: number;
+export const formSpaceIntegralProgressiveKeylineXS: number;
+export const formSpaceIntegralProgressiveKeylineXM: number;
+export const formSpaceIntegralProgressiveKeylineXL: number;
 export const formSpaceRatingXgM: number;
 export const formSpaceRatingXgL: number;
 export const formSpaceLayoutStackS: number;
@@ -183,6 +186,7 @@ export const formSizeSearchInputMinwidth: number;
 export const formSizeSearchInputMaxwidth: number;
 export const formSizeTextareaM: number;
 export const formSizeValidationBar: number;
+export const formSizeProgressiveBar: number;
 export const formSizeRatingM: number;
 export const formSizeRatingL: number;
 export const formColorCalendarBgActive: string;
@@ -267,6 +271,7 @@ export const formRadiusInput: number;
 export const formRadiusRadio: string;
 export const formRadiusSwitch: string;
 export const formRadiusValidationbar: number;
+export const formRadiusProgressivebar: number;
 export const formRadiusCalendarNone: string;
 export const formRadiusCalendarDate: string;
 export const formRadiusCalendarToday: number;

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

@@ -89,15 +89,18 @@ export const formSpaceIntegralXgL = 10;
 export const formSpaceIntegralYgS = 6;
 export const formSpaceIntegralYgM = 8;
 export const formSpaceIntegralYgL = 10;
-export const formSpaceIntegralProgressiveXS = 17.2;
-export const formSpaceIntegralProgressiveXM = 25.6;
-export const formSpaceIntegralProgressiveXL = 34;
+export const formSpaceIntegralProgressiveXS = 9.8;
+export const formSpaceIntegralProgressiveXM = 16;
+export const formSpaceIntegralProgressiveXL = 20.2;
 export const formSpaceIntegralProgressiveYS = 8;
 export const formSpaceIntegralProgressiveYM = 12;
 export const formSpaceIntegralProgressiveYL = 16;
 export const formSpaceIntegralProgressiveYgS = 8;
 export const formSpaceIntegralProgressiveYgM = 12;
 export const formSpaceIntegralProgressiveYgL = 16;
+export const formSpaceIntegralProgressiveKeylineXS = 5.4;
+export const formSpaceIntegralProgressiveKeylineXM = 8.6;
+export const formSpaceIntegralProgressiveKeylineXL = 11.8;
 export const formSpaceRatingXgM = 8;
 export const formSpaceRatingXgL = 12;
 export const formSpaceLayoutStackS = 12.8;
@@ -183,6 +186,7 @@ export const formSizeSearchInputMinwidth = 288;
 export const formSizeSearchInputMaxwidth = 400;
 export const formSizeTextareaM = 80;
 export const formSizeValidationBar = 2;
+export const formSizeProgressiveBar = 2;
 export const formSizeRatingM = 20;
 export const formSizeRatingL = 32;
 export const formColorCalendarBgActive = "#FFFFFF";
@@ -267,6 +271,7 @@ export const formRadiusInput = 8;
 export const formRadiusRadio = "999";
 export const formRadiusSwitch = "999";
 export const formRadiusValidationbar = 2;
+export const formRadiusProgressivebar = 2;
 export const formRadiusCalendarNone = "0";
 export const formRadiusCalendarDate = "999";
 export const formRadiusCalendarToday = 2;

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

@@ -47,7 +47,7 @@ export const tabRadiusBaselineL = 1;
 export const tabRadiusIndicatorM = 2;
 export const tabRadiusIndicatorL = 2;
 export const tabRadiusNone = "0";
-export const tabBorderwidthNavigationBottom = 4;
+export const tabBorderwidthNavigationBottom = 2;
 export const tabBorderwidthNavigationSide = 2;
 export const tabTypographyAdaptiveLabelS = {
   fontFamily: "Sage UI",