@sage/design-tokens 7.1.6 → 7.2.0

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

@@ -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/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/components/status.js

@@ -1749,13 +1749,13 @@ module.exports = {
           x: {
             M: {
               $type: "spacing",
-              $value: 32,
+              $value: 40,
               $description: "Left and right padding on global message",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.L}",
+                $value: "{global.space.macro.XL}",
                 $description: "Left and right padding on global message",
               },
               name: "statusSpaceMessageGlobalXM",

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/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/components/status.js

@@ -1749,13 +1749,13 @@ module.exports = {
           x: {
             M: {
               $type: "spacing",
-              $value: 25.6,
+              $value: 32,
               $description: "Left and right padding on global message",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.L}",
+                $value: "{global.space.macro.XL}",
                 $description: "Left and right padding on global message",
               },
               name: "statusSpaceMessageGlobalXM",

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

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

@@ -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/product/small/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/small/light/components/status.js

@@ -1749,13 +1749,13 @@ module.exports = {
           x: {
             M: {
               $type: "spacing",
-              $value: 25.6,
+              $value: 32,
               $description: "Left and right padding on global message",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "spacing",
-                $value: "{global.space.macro.L}",
+                $value: "{global.space.macro.XL}",
                 $description: "Left and right padding on global message",
               },
               name: "statusSpaceMessageGlobalXM",

package/js/common/product/small/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/small/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/es6/frozenproduct/large/dark/components/profile.js

@@ -20,7 +20,7 @@ export const profileSizeInsideM = 20;
 export const profileSizeInsideMl = 28;
 export const profileSizeInsideL = 40;
 export const profileSizeInsideXl = 56;
-export const profileSizeInsideXxl = 104;
+export const profileSizeInsideXxl = 72;
 export const profileColorBgAlt = "#fffffff2";
 export const profileColorBgDefault = "#0e0e0e";
 export const profileColorBorderDefault = "#282828";

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

@@ -109,7 +109,7 @@ export const statusSpaceMessageContextualYgM = 2;
 export const statusSpaceMessageContextualYgL = 4;
 export const statusSpaceMessageContextualSubtleIconwrapperYM = 2;
 export const statusSpaceMessageContextualSubtleIconwrapperYL = 4;
-export const statusSpaceMessageGlobalXM = 32;
+export const statusSpaceMessageGlobalXM = 40;
 export const statusSpaceMessageGlobalYM = 8;
 export const statusSpaceMessageGlobalXgM = 16;
 export const statusSpaceMessageGlobalYgM = 4;

package/js/es6/frozenproduct/large/dark/mode.d.ts

@@ -38,6 +38,7 @@ export const modesColorGenericFgFaint: string;
 export const modesColorGenericFgDelicate: string;
 export const modesColorGenericFgSoft: string;
 export const modesColorGenericFgModerate: string;
+export const modesColorGenericFgFrozenSoft: string;
 export const modesColorGenericBackdropNought: string;
 export const modesColorGenericBackdropFaint: string;
 export const modesColorInteractiveAiActive: string;
@@ -93,6 +94,7 @@ export const modesColorInteractiveMonochromeGenericWithActiveAlt: string;
 export const modesColorInteractiveMonochromeGenericWithDefault: string;
 export const modesColorInteractiveMonochromeGenericWithHover: string;
 export const modesColorInteractiveMonochromeGenericFrozenActive: string;
+export const modesColorInteractiveMonochromeGenericFrozenActive2: string;
 export const modesColorInteractiveMonochromeMarketingWithActive: string;
 export const modesColorInteractiveMonochromeMarketingActive: string;
 export const modesColorInteractiveMonochromeSubtleDefaultAlt: string;
@@ -116,6 +118,7 @@ export const modesColorInteractivePrimaryFrozenTableDefault: string;
 export const modesColorInteractiveProgressBg: string;
 export const modesColorInteractiveProgressBgAlt: string;
 export const modesColorInteractiveProgressFrozenBg: string;
+export const modesColorInteractiveProgressFrozenBgAlt: string;
 export const modesColorStatusCautionDefault: string;
 export const modesColorStatusCautionDefaultAlt: string;
 export const modesColorStatusCautionHover: string;

package/js/es6/frozenproduct/large/dark/mode.js

@@ -38,6 +38,7 @@ export const modesColorGenericFgFaint = "#181818";
 export const modesColorGenericFgDelicate = "#282828";
 export const modesColorGenericFgSoft = "#4b4b4b";
 export const modesColorGenericFgModerate = "#777";
+export const modesColorGenericFgFrozenSoft = "#4b4b4b";
 export const modesColorGenericBackdropNought = "#000000";
 export const modesColorGenericBackdropFaint = "#181818";
 export const modesColorInteractiveAiActive =
@@ -96,6 +97,7 @@ export const modesColorInteractiveMonochromeGenericWithActiveAlt = "#ffffffe6";
 export const modesColorInteractiveMonochromeGenericWithDefault = "#000000";
 export const modesColorInteractiveMonochromeGenericWithHover = "#FFFFFF";
 export const modesColorInteractiveMonochromeGenericFrozenActive = "#FFFFFF";
+export const modesColorInteractiveMonochromeGenericFrozenActive2 = "#FFFFFF";
 export const modesColorInteractiveMonochromeMarketingWithActive = "#000000";
 export const modesColorInteractiveMonochromeMarketingActive = "#00D639";
 export const modesColorInteractiveMonochromeSubtleDefaultAlt = "#ffffff80";
@@ -119,6 +121,7 @@ export const modesColorInteractivePrimaryFrozenTableDefault = "#18232a";
 export const modesColorInteractiveProgressBg = "#ffffff14";
 export const modesColorInteractiveProgressBgAlt = "#00000014";
 export const modesColorInteractiveProgressFrozenBg = "#ffffff14";
+export const modesColorInteractiveProgressFrozenBgAlt = "#ffffff14";
 export const modesColorStatusCautionDefault = "#E04500";
 export const modesColorStatusCautionDefaultAlt = "#251206";
 export const modesColorStatusCautionHover = "#eb6732";

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

@@ -20,7 +20,7 @@ export const profileSizeInsideM = 20;
 export const profileSizeInsideMl = 28;
 export const profileSizeInsideL = 40;
 export const profileSizeInsideXl = 56;
-export const profileSizeInsideXxl = 104;
+export const profileSizeInsideXxl = 72;
 export const profileColorBgAlt = "#000000f2";
 export const profileColorBgDefault = "#f3f3f3";
 export const profileColorBorderDefault = "#d1d1d1";

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

@@ -109,7 +109,7 @@ export const statusSpaceMessageContextualYgM = 2;
 export const statusSpaceMessageContextualYgL = 4;
 export const statusSpaceMessageContextualSubtleIconwrapperYM = 2;
 export const statusSpaceMessageContextualSubtleIconwrapperYL = 4;
-export const statusSpaceMessageGlobalXM = 32;
+export const statusSpaceMessageGlobalXM = 40;
 export const statusSpaceMessageGlobalYM = 8;
 export const statusSpaceMessageGlobalXgM = 16;
 export const statusSpaceMessageGlobalYgM = 4;