@sage/design-tokens 7.2.0 → 7.3.1

package/js/common/frozenproduct/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/frozenproduct/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/frozenproduct/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/frozenproduct/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/frozenproduct/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/common/marketing/large/dark/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/marketing/large/dark/components/form.js

@@ -1478,14 +1478,14 @@ module.exports = {
           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",
               },
@@ -1495,14 +1495,14 @@ module.exports = {
             },
             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",
               },
@@ -1512,14 +1512,14 @@ module.exports = {
             },
             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",
               },
@@ -1634,6 +1634,85 @@ module.exports = {
               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: {
@@ -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/marketing/large/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",