@sage/design-tokens 7.1.7 → 7.3.0

package/js/common/product/large/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/large/light/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/product/large/light/components/profile.js

@@ -225,13 +225,13 @@ module.exports = {
         },
         XXL: {
           $type: "sizing",
-          $value: 104,
+          $value: 72,
           $description: "XXL Portraits",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
           original: {
             $type: "sizing",
-            $value: "{global.size.micro.M} * 13",
+            $value: "{global.size.micro.M} * 9",
             $description: "XXL Portraits",
           },
           name: "profileSizeInsideXxl",

package/js/common/product/large/light/mode.d.ts

@@ -71,6 +71,9 @@ declare const tokens: {
           delicate: DesignToken;
           soft: DesignToken;
           moderate: DesignToken;
+          frozen: {
+            soft: DesignToken;
+          };
         };
         backdrop: {
           nought: DesignToken;
@@ -150,6 +153,7 @@ declare const tokens: {
             withHover: DesignToken;
             frozen: {
               active: DesignToken;
+              active2: DesignToken;
             };
           };
           marketing: {
@@ -190,6 +194,7 @@ declare const tokens: {
           bgAlt: DesignToken;
           frozen: {
             bg: DesignToken;
+            "bg-alt": DesignToken;
           };
         };
       };

package/js/common/product/large/light/mode.js

@@ -879,6 +879,23 @@ module.exports = {
             attributes: {},
             path: ["modes", "color", "generic", "fg", "moderate"],
           },
+          frozen: {
+            soft: {
+              $type: "color",
+              $value: "#335B70",
+              $description: "frozen progress tracker border",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.neutral.frozen.default}",
+                $description: "frozen progress tracker border",
+              },
+              name: "modesColorGenericFgFrozenSoft",
+              attributes: {},
+              path: ["modes", "color", "generic", "fg", "frozen", "soft"],
+            },
+          },
         },
         backdrop: {
           nought: {
@@ -2258,6 +2275,29 @@ module.exports = {
                   "active",
                 ],
               },
+              active2: {
+                $type: "color",
+                $value: "#335B70",
+                $description: "Frozen progress tracker",
+                filePath: "data/tokens/modes/light.json",
+                isSource: true,
+                original: {
+                  $type: "color",
+                  $value: "{modes.color.generic.fg.frozen.soft}",
+                  $description: "Frozen progress tracker",
+                },
+                name: "modesColorInteractiveMonochromeGenericFrozenActive2",
+                attributes: {},
+                path: [
+                  "modes",
+                  "color",
+                  "interactive",
+                  "monochrome",
+                  "generic",
+                  "frozen",
+                  "active2",
+                ],
+              },
             },
           },
           marketing: {
@@ -2971,6 +3011,49 @@ module.exports = {
                 "bg",
               ],
             },
+            "bg-alt": {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.75",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#cad3d9",
+              $description: "progress tracker bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.75",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.navy}",
+                $description: "progress tracker bg",
+              },
+              name: "modesColorInteractiveProgressFrozenBgAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "progress",
+                "frozen",
+                "bg-alt",
+              ],
+            },
           },
         },
       },

package/js/common/product/small/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/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/profile.js

@@ -225,13 +225,13 @@ module.exports = {
         },
         XXL: {
           $type: "sizing",
-          $value: 104,
+          $value: 72,
           $description: "XXL Portraits",
           filePath: "data/tokens/components/profile.json",
           isSource: true,
           original: {
             $type: "sizing",
-            $value: "{global.size.micro.M} * 13",
+            $value: "{global.size.micro.M} * 9",
             $description: "XXL Portraits",
           },
           name: "profileSizeInsideXxl",

package/js/common/product/small/dark/mode.d.ts

@@ -71,6 +71,9 @@ declare const tokens: {
           delicate: DesignToken;
           soft: DesignToken;
           moderate: DesignToken;
+          frozen: {
+            soft: DesignToken;
+          };
         };
         backdrop: {
           nought: DesignToken;
@@ -150,6 +153,7 @@ declare const tokens: {
             withHover: DesignToken;
             frozen: {
               active: DesignToken;
+              active2: DesignToken;
             };
           };
           marketing: {
@@ -190,6 +194,7 @@ declare const tokens: {
           bgAlt: DesignToken;
           frozen: {
             bg: DesignToken;
+            "bg-alt": DesignToken;
           };
         };
       };