npm - @sage/design-tokens - Versions diffs - 7.1.7 → 7.3.0 - Mend

@sage/design-tokens 7.1.7 → 7.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

package/js/common/marketing/large/light/mode.d.ts CHANGED Viewed

@@ -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/marketing/large/light/mode.js CHANGED Viewed

@@ -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/marketing/small/dark/components/form.d.ts CHANGED Viewed

@@ -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/small/dark/components/form.js CHANGED Viewed

@@ -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/marketing/small/dark/components/profile.js CHANGED Viewed

@@ -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/marketing/small/dark/mode.d.ts CHANGED Viewed

@@ -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/marketing/small/dark/mode.js CHANGED Viewed

@@ -877,6 +877,42 @@ module.exports = {
             attributes: {},
             path: ["modes", "color", "generic", "fg", "moderate"],
           },
+          frozen: {
+            soft: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.32",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#4b4b4b",
+              filePath: "data/tokens/modes/dark.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.32",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.generic.fg.nought}",
+              },
+              name: "modesColorGenericFgFrozenSoft",
+              attributes: {},
+              path: ["modes", "color", "generic", "fg", "frozen", "soft"],
+            },
+          },
         },
         backdrop: {
           nought: {
@@ -2178,6 +2214,29 @@ module.exports = {
                   "active",
                 ],
               },
+              active2: {
+                $type: "color",
+                $value: "#FFFFFF",
+                $description: "progress tracker",
+                filePath: "data/tokens/modes/dark.json",
+                isSource: true,
+                original: {
+                  $type: "color",
+                  $value: "{modes.color.interactive.monochrome.generic.active}",
+                  $description: "progress tracker",
+                },
+                name: "modesColorInteractiveMonochromeGenericFrozenActive2",
+                attributes: {},
+                path: [
+                  "modes",
+                  "color",
+                  "interactive",
+                  "monochrome",
+                  "generic",
+                  "frozen",
+                  "active2",
+                ],
+              },
             },
           },
           marketing: {
@@ -2871,6 +2930,26 @@ module.exports = {
                 "bg",
               ],
             },
+            "bg-alt": {
+              $type: "color",
+              $value: "#ffffff14",
+              filePath: "data/tokens/modes/dark.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.interactive.progress.bg}",
+              },
+              name: "modesColorInteractiveProgressFrozenBgAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "progress",
+                "frozen",
+                "bg-alt",
+              ],
+            },
           },
         },
       },

package/js/common/marketing/small/light/components/form.d.ts CHANGED Viewed

@@ -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;