@sage/design-tokens 7.2.0 → 7.3.1

package/js/es6/product/small/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 = 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 = "#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/product/small/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/umd/frozenproduct/large/dark/components/form.js

@@ -1495,14 +1495,14 @@
             x: {
               S: {
                 $type: "spacing",
-                $value: 22,
+                $value: 13,
                 $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",
                 },
@@ -1512,14 +1512,14 @@
               },
               M: {
                 $type: "spacing",
-                $value: 32,
+                $value: 20,
                 $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",
                 },
@@ -1529,14 +1529,14 @@
               },
               L: {
                 $type: "spacing",
-                $value: 42,
+                $value: 25,
                 $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",
                 },
@@ -1651,6 +1651,85 @@
                 path: ["form", "space", "integral", "progressive", "yg", "L"],
               },
             },
+            keyline: {
+              x: {
+                S: {
+                  $type: "spacing",
+                  $value: 7,
+                  $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: 11,
+                  $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: 15,
+                  $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: {
@@ -3020,6 +3099,25 @@
             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",
@@ -4190,6 +4288,21 @@
           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/umd/frozenproduct/large/dark/components/tab.js

@@ -632,13 +632,13 @@
         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/umd/frozenproduct/large/light/components/form.js

@@ -1495,14 +1495,14 @@
             x: {
               S: {
                 $type: "spacing",
-                $value: 22,
+                $value: 13,
                 $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",
                 },
@@ -1512,14 +1512,14 @@
               },
               M: {
                 $type: "spacing",
-                $value: 32,
+                $value: 20,
                 $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",
                 },
@@ -1529,14 +1529,14 @@
               },
               L: {
                 $type: "spacing",
-                $value: 42,
+                $value: 25,
                 $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",
                 },
@@ -1651,6 +1651,85 @@
                 path: ["form", "space", "integral", "progressive", "yg", "L"],
               },
             },
+            keyline: {
+              x: {
+                S: {
+                  $type: "spacing",
+                  $value: 7,
+                  $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: 11,
+                  $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: 15,
+                  $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: {
@@ -3020,6 +3099,25 @@
             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",
@@ -4190,6 +4288,21 @@
           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/umd/frozenproduct/large/light/components/tab.js

@@ -632,13 +632,13 @@
         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/umd/frozenproduct/small/dark/components/form.js

@@ -1495,14 +1495,14 @@
             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",
                 },
@@ -1512,14 +1512,14 @@
               },
               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",
                 },
@@ -1529,14 +1529,14 @@
               },
               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",
                 },
@@ -1651,6 +1651,85 @@
                 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: {
@@ -3020,6 +3099,25 @@
             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",
@@ -4190,6 +4288,21 @@
           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/umd/frozenproduct/small/dark/components/tab.js

@@ -632,13 +632,13 @@
         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",