@sage/design-tokens 5.3.0 → 7.0.0

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

@@ -129,7 +129,7 @@ module.exports = {
             },
           },
           noBg: {
-            S: {
+            monochrome: {
               value: "#000000",
               type: "color",
               filePath: "data/tokens/modes/light.json",
@@ -138,80 +138,16 @@ module.exports = {
                 value: "{primitives.colors.black}",
                 type: "color",
               },
-              name: "modesColorBrandCopilotNoBgS",
+              name: "modesColorBrandCopilotNoBgMonochrome",
               attributes: {},
-              path: ["modes", "color", "brand", "copilot", "noBg", "S"],
-            },
-            star: {
-              value: "#000000",
-              type: "color",
-              filePath: "data/tokens/modes/light.json",
-              isSource: true,
-              original: {
-                value: "{primitives.colors.black}",
-                type: "color",
-              },
-              name: "modesColorBrandCopilotNoBgStar",
-              attributes: {},
-              path: ["modes", "color", "brand", "copilot", "noBg", "star"],
-            },
-            mono: {
-              value: "#000000",
-              type: "color",
-              filePath: "data/tokens/modes/light.json",
-              isSource: true,
-              original: {
-                value: "{primitives.colors.black}",
-                type: "color",
-              },
-              name: "modesColorBrandCopilotNoBgMono",
-              attributes: {},
-              path: ["modes", "color", "brand", "copilot", "noBg", "mono"],
-            },
-          },
-          withBg: {
-            S: {
-              value:
-                "linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%)",
-              type: "color",
-              filePath: "data/tokens/modes/light.json",
-              isSource: true,
-              original: {
-                value:
-                  "linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%)",
-                type: "color",
-              },
-              name: "modesColorBrandCopilotWithBgS",
-              attributes: {},
-              path: ["modes", "color", "brand", "copilot", "withBg", "S"],
-            },
-            star: {
-              value:
-                "radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%)",
-              type: "color",
-              filePath: "data/tokens/modes/light.json",
-              isSource: true,
-              original: {
-                value:
-                  "radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%)",
-                type: "color",
-              },
-              name: "modesColorBrandCopilotWithBgStar",
-              attributes: {},
-              path: ["modes", "color", "brand", "copilot", "withBg", "star"],
-            },
-            bg: {
-              value: "#000000",
-              type: "color",
-              filePath: "data/tokens/modes/light.json",
-              isSource: true,
-              original: {
-                value: "{primitives.colors.black}",
-                type: "color",
-              },
-              name: "modesColorBrandCopilotWithBgBg",
-              attributes: {},
-              path: ["modes", "color", "brand", "copilot", "withBg", "bg"],
+              path: [
+                "modes",
+                "color",
+                "brand",
+                "copilot",
+                "noBg",
+                "monochrome",
+              ],
             },
           },
         },
@@ -5206,27 +5142,27 @@ module.exports = {
             attributes: {},
             path: ["modes", "color", "status", "caution", "text"],
           },
-          frozen: {
+          frozenglobal: {
             default: {
-              value: "#FF8629",
+              value: "#ff8629",
               type: "color",
               description: "used on global message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
-                value: "#FF8629",
+                value: "#ff8629",
                 type: "color",
                 description: "used on global message bg",
               },
-              name: "modesColorStatusCautionFrozenDefault",
+              name: "modesColorStatusCautionFrozenglobalDefault",
               attributes: {
-                value: "#FF8629",
+                value: "#ff8629",
                 type: "color",
                 description: "used on global message bg",
                 filePath: "data/tokens/modes/light.json",
                 isSource: true,
                 original: {
-                  value: "#FF8629",
+                  value: "#ff8629",
                   type: "color",
                   description: "used on global message bg",
                 },
@@ -5237,7 +5173,7 @@ module.exports = {
                   "color",
                   "status",
                   "caution",
-                  "frozen",
+                  "frozenglobal",
                   "default",
                 ],
                 comment: "used on global message bg",
@@ -5247,41 +5183,105 @@ module.exports = {
                 "color",
                 "status",
                 "caution",
-                "frozen",
+                "frozenglobal",
                 "default",
               ],
               comment: "used on global message bg",
             },
-            icon: {
-              value: "#000000",
+            hover: {
+              value: "#ff9a4e",
               type: "color",
-              description: "used on global message icon",
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.16 ",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    filePath: "data/tokens/modes/light.json",
+                    isSource: true,
+                    format: "hex",
+                  },
+                },
+              },
+              description: "used on global message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
-                value: "{primitives.colors.black}",
+                value: "{modes.color.status.caution.frozenglobal.default}",
                 type: "color",
-                description: "used on global message icon",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{modes.color.modifiers.button.hover} ",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                    },
+                  },
+                },
+                description: "used on global message bg",
               },
-              name: "modesColorStatusCautionFrozenIcon",
+              name: "modesColorStatusCautionFrozenglobalHover",
               attributes: {
-                value: "#000000",
+                value: "#ff8629",
                 type: "color",
-                description: "used on global message icon",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.16 ",
+                      space: "lch",
+                      color: "#FFFFFF ",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                      format: "hex",
+                    },
+                  },
+                },
+                description: "used on global message bg",
                 filePath: "data/tokens/modes/light.json",
                 isSource: true,
                 original: {
-                  value: "{primitives.colors.black}",
+                  value: "{modes.color.status.caution.frozenglobal.default}",
                   type: "color",
-                  description: "used on global message icon",
+                  $extensions: {
+                    "studio.tokens": {
+                      modify: {
+                        type: "mix",
+                        value: "{modes.color.modifiers.button.hover} ",
+                        space: "lch",
+                        color: "{modes.color.modifier.contrastLess} ",
+                        filePath: "data/tokens/modes/light.json",
+                        isSource: true,
+                      },
+                    },
+                  },
+                  description: "used on global message bg",
                 },
-                name: "icon",
+                name: "hover",
                 attributes: {},
-                path: ["modes", "color", "status", "caution", "frozen", "icon"],
-                comment: "used on global message icon",
+                path: [
+                  "modes",
+                  "color",
+                  "status",
+                  "caution",
+                  "frozenglobal",
+                  "hover",
+                ],
+                comment: "used on global message bg",
               },
-              path: ["modes", "color", "status", "caution", "frozen", "icon"],
-              comment: "used on global message icon",
+              path: [
+                "modes",
+                "color",
+                "status",
+                "caution",
+                "frozenglobal",
+                "hover",
+              ],
+              comment: "used on global message bg",
             },
           },
         },
@@ -5750,7 +5750,7 @@ module.exports = {
             path: ["modes", "color", "status", "info", "hoverAlt"],
             comment: "used on pill hover states and message bg",
           },
-          frozen: {
+          frozenglobal: {
             default: {
               value: "#65a9ff",
               type: "color",
@@ -5762,7 +5762,7 @@ module.exports = {
                 type: "color",
                 description: "used on global message bg",
               },
-              name: "modesColorStatusInfoFrozenDefault",
+              name: "modesColorStatusInfoFrozenglobalDefault",
               attributes: {
                 value: "#65a9ff",
                 type: "color",
@@ -5776,10 +5776,119 @@ module.exports = {
                 },
                 name: "default",
                 attributes: {},
-                path: ["modes", "color", "status", "info", "frozen", "default"],
+                path: [
+                  "modes",
+                  "color",
+                  "status",
+                  "info",
+                  "frozenglobal",
+                  "default",
+                ],
+                comment: "used on global message bg",
+              },
+              path: [
+                "modes",
+                "color",
+                "status",
+                "info",
+                "frozenglobal",
+                "default",
+              ],
+              comment: "used on global message bg",
+            },
+            hover: {
+              value: "#84b6ff",
+              type: "color",
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.16 ",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    filePath: "data/tokens/modes/light.json",
+                    isSource: true,
+                    format: "hex",
+                  },
+                },
+              },
+              description: "used on global message bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.frozenglobal.default}",
+                type: "color",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{modes.color.modifiers.button.hover} ",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                    },
+                  },
+                },
+                description: "used on global message bg",
+              },
+              name: "modesColorStatusInfoFrozenglobalHover",
+              attributes: {
+                value: "#65a9ff",
+                type: "color",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.16 ",
+                      space: "lch",
+                      color: "#FFFFFF ",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                      format: "hex",
+                    },
+                  },
+                },
+                description: "used on global message bg",
+                filePath: "data/tokens/modes/light.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.info.frozenglobal.default}",
+                  type: "color",
+                  $extensions: {
+                    "studio.tokens": {
+                      modify: {
+                        type: "mix",
+                        value: "{modes.color.modifiers.button.hover} ",
+                        space: "lch",
+                        color: "{modes.color.modifier.contrastLess} ",
+                        filePath: "data/tokens/modes/light.json",
+                        isSource: true,
+                      },
+                    },
+                  },
+                  description: "used on global message bg",
+                },
+                name: "hover",
+                attributes: {},
+                path: [
+                  "modes",
+                  "color",
+                  "status",
+                  "info",
+                  "frozenglobal",
+                  "hover",
+                ],
                 comment: "used on global message bg",
               },
-              path: ["modes", "color", "status", "info", "frozen", "default"],
+              path: [
+                "modes",
+                "color",
+                "status",
+                "info",
+                "frozenglobal",
+                "hover",
+              ],
               comment: "used on global message bg",
             },
           },
@@ -6079,19 +6188,6 @@ module.exports = {
           },
         },
         neutral: {
-          alt: {
-            value: "#656565",
-            type: "color",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              value: "{primitives.colors.storm}",
-              type: "color",
-            },
-            name: "modesColorStatusNeutralAlt",
-            attributes: {},
-            path: ["modes", "color", "status", "neutral", "alt"],
-          },
           default: {
             value: "#656565",
             type: "color",
@@ -6369,6 +6465,101 @@ module.exports = {
                 "default",
               ],
             },
+            defaultAlt: {
+              value: "#eaedf0",
+              type: "color",
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    filePath: "data/tokens/modes/light.json",
+                    isSource: true,
+                    format: "hex",
+                  },
+                },
+              },
+              description: "Subtle message bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                value: "{primitives.colors.navy}",
+                type: "color",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                    },
+                  },
+                },
+                description: "Subtle message bg",
+              },
+              name: "modesColorStatusNeutralFrozenDefaultAlt",
+              attributes: {
+                value: "#335B70",
+                type: "color",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "#FFFFFF",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                      format: "hex",
+                    },
+                  },
+                },
+                description: "Subtle message bg",
+                filePath: "data/tokens/modes/light.json",
+                isSource: true,
+                original: {
+                  value: "{primitives.colors.navy}",
+                  type: "color",
+                  $extensions: {
+                    "studio.tokens": {
+                      modify: {
+                        type: "mix",
+                        value: "0.9",
+                        space: "lch",
+                        color: "{modes.color.modifier.contrastLess}",
+                        filePath: "data/tokens/modes/light.json",
+                        isSource: true,
+                      },
+                    },
+                  },
+                  description: "Subtle message bg",
+                },
+                name: "defaultAlt",
+                attributes: {},
+                path: [
+                  "modes",
+                  "color",
+                  "status",
+                  "neutral",
+                  "frozen",
+                  "defaultAlt",
+                ],
+                comment: "Subtle message bg",
+              },
+              path: [
+                "modes",
+                "color",
+                "status",
+                "neutral",
+                "frozen",
+                "defaultAlt",
+              ],
+              comment: "Subtle message bg",
+            },
             hover: {
               value: "#20313b",
               type: "color",
@@ -6407,6 +6598,101 @@ module.exports = {
               attributes: {},
               path: ["modes", "color", "status", "neutral", "frozen", "hover"],
             },
+            hoverAlt: {
+              value: "#dde0e2",
+              type: "color",
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.05",
+                    space: "lch",
+                    color: "#000000",
+                    filePath: "data/tokens/modes/light.json",
+                    isSource: true,
+                    format: "hex",
+                  },
+                },
+              },
+              description: "used on pill hover states and message bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.neutral.frozen.defaultAlt}",
+                type: "color",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.05",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                    },
+                  },
+                },
+                description: "used on pill hover states and message bg",
+              },
+              name: "modesColorStatusNeutralFrozenHoverAlt",
+              attributes: {
+                value: "#eaedf0",
+                type: "color",
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.05",
+                      space: "lch",
+                      color: "#000000",
+                      filePath: "data/tokens/modes/light.json",
+                      isSource: true,
+                      format: "hex",
+                    },
+                  },
+                },
+                description: "used on pill hover states and message bg",
+                filePath: "data/tokens/modes/light.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.neutral.frozen.defaultAlt}",
+                  type: "color",
+                  $extensions: {
+                    "studio.tokens": {
+                      modify: {
+                        type: "mix",
+                        value: "0.05",
+                        space: "lch",
+                        color: "{modes.color.modifier.contrastMore}",
+                        filePath: "data/tokens/modes/light.json",
+                        isSource: true,
+                      },
+                    },
+                  },
+                  description: "used on pill hover states and message bg",
+                },
+                name: "hoverAlt",
+                attributes: {},
+                path: [
+                  "modes",
+                  "color",
+                  "status",
+                  "neutral",
+                  "frozen",
+                  "hoverAlt",
+                ],
+                comment: "used on pill hover states and message bg",
+              },
+              path: [
+                "modes",
+                "color",
+                "status",
+                "neutral",
+                "frozen",
+                "hoverAlt",
+              ],
+              comment: "used on pill hover states and message bg",
+            },
           },
         },
         positive: {

package/js/es6/frozenproduct/large/dark/components/container.d.ts

@@ -345,6 +345,10 @@ export const containerSpacePaginationXgM: number;
 export const containerSpacePaginationXgL: number;
 /** top and bottom padding inside pagination */
 export const containerSpacePaginationYM: number;
+/** external margin on top of floating pagination variant */
+export const containerSpacePaginationYL: number;
+/** gap between left and right pagination elements when stacked vertically on small screens */
+export const containerSpacePaginationYgM: number;
 /** left and right padding inside pagination */
 export const containerSpacePaginationXM: number;
 /** top and bottom padding around scrollbar handle. */

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

@@ -195,7 +195,9 @@ export const containerSpaceLinkpreviewYgM = 8; // Content horizontal padding for
 export const containerSpaceLinkpreviewYgL = 12; // Content horizontal padding for large variant
 export const containerSpacePaginationXgM = 8; // gap between elements in pagination
 export const containerSpacePaginationXgL = 16; // gap between page nav buttons in pagination
-export const containerSpacePaginationYM = 8; // top and bottom padding inside pagination
+export const containerSpacePaginationYM = 12; // top and bottom padding inside pagination
+export const containerSpacePaginationYL = 16; // external margin on top of floating pagination variant
+export const containerSpacePaginationYgM = 8; // gap between left and right pagination elements when stacked vertically on small screens
 export const containerSpacePaginationXM = 16; // left and right padding inside pagination
 export const containerSpaceScrollbarYInner = 1; // top and bottom padding around scrollbar handle.
 export const containerSpaceScrollbarYOuter = 2; // top and bottom padding inside scrollbar outer container

package/js/es6/frozenproduct/large/dark/components/logo.d.ts

@@ -12,12 +12,7 @@ export const logoColorSageBgAlt: string;
 /** filled */
 export const logoColorTrustBgDefault: string;
 export const logoColorTrustOutline: string;
-export const logoColorCopilotNoBgBgS: string;
-export const logoColorCopilotNoBgBgStar: string;
 export const logoColorCopilotNoBgFgDefault: string;
-export const logoColorCopilotWithBgBgS: string;
-export const logoColorCopilotWithBgBgStar: string;
-export const logoColorCopilotWithBgBgDefault: string;
 /** star bg color */
 export const logoColorAiIdentifierBgStar: string;
 export const logoColorAiIdentifierBgDot: string;

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

@@ -10,14 +10,7 @@ export const logoColorSageBgDefault = "#00D639"; // sage logo
 export const logoColorSageBgAlt = "#FFFFFF";
 export const logoColorTrustBgDefault = "#009023"; // filled
 export const logoColorTrustOutline = "#FFFFFF";
-export const logoColorCopilotNoBgBgS =
-  "linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%)";
-export const logoColorCopilotNoBgBgStar =
-  "radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%)";
 export const logoColorCopilotNoBgFgDefault = "#FFFFFF";
-export const logoColorCopilotWithBgBgS = "#000000";
-export const logoColorCopilotWithBgBgStar = "#000000";
-export const logoColorCopilotWithBgBgDefault = "#FFFFFF";
 export const logoColorAiIdentifierBgStar = "#FFFFFF"; // star bg color
 export const logoColorAiIdentifierBgDot = "#00D639";
 export const logoColorAiIdentifierOutline = "#FFFFFF"; // star outline variant