@sage/design-tokens 13.1.0 → 13.2.0

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

@@ -1441,14 +1441,33 @@ module.exports = {
             path: ["modes", "color", "interactive", "danger", "hover"],
           },
           hoverAlt: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "alpha",
+                  value: "0.08",
+                  space: "lch",
+                  format: "hex",
+                },
+              },
+            },
             $type: "color",
-            $value: "#f9d1cf",
+            $value: "#cd384b14",
             $description: "used on secondary-button hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "alpha",
+                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    space: "lch",
+                  },
+                },
+              },
               $type: "color",
-              $value: "{modes.color.status.negative.hoverAlt}",
+              $value: "{modes.color.interactive.danger.default}",
               $description: "used on secondary-button hover states",
             },
             name: "modesColorInteractiveDangerHoverAlt",
@@ -1498,7 +1517,7 @@ module.exports = {
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.fg.nought}",
+              $value: "{primitives.colors.white}",
             },
             name: "modesColorInteractiveDangerWithActive",
             attributes: {},
@@ -1511,12 +1530,289 @@ module.exports = {
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.fg.nought}",
+              $value: "{primitives.colors.white}",
             },
             name: "modesColorInteractiveDangerWithDefault",
             attributes: {},
             path: ["modes", "color", "interactive", "danger", "withDefault"],
           },
+          inverse: {
+            active: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.32",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#f28486",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{modes.color.modifiers.button.active}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.interactive.danger.inverse.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorInteractiveDangerInverseActive",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "active",
+              ],
+            },
+            default: {
+              $type: "color",
+              $value: "#E13E53",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.blush}",
+              },
+              name: "modesColorInteractiveDangerInverseDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "default",
+              ],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.12",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#e85b66",
+              $description: "For links in datatables",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.12",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.interactive.danger.inverse.default}",
+                $description: "For links in datatables",
+              },
+              name: "modesColorInteractiveDangerInverseDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.16",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#eb646c",
+              $description:
+                "used on solid-pill and primary-button hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{modes.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.interactive.danger.inverse.default}",
+                $description:
+                  "used on solid-pill and primary-button hover states",
+              },
+              name: "modesColorInteractiveDangerInverseHover",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "hover",
+              ],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "alpha",
+                    value: "0.08",
+                    space: "lch",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#e13e5314",
+              $description: "used on secondary-button hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "alpha",
+                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      space: "lch",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.interactive.danger.inverse.default}",
+                $description: "used on secondary-button hover states",
+              },
+              name: "modesColorInteractiveDangerInverseHoverAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "hoverAlt",
+              ],
+            },
+            hoverAlt2: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.08",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#ec6a71",
+              $description: "used on link hover state",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.interactive.danger.inverse.defaultAlt}",
+                $description: "used on link hover state",
+              },
+              name: "modesColorInteractiveDangerInverseHoverAlt2",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "hoverAlt2",
+              ],
+            },
+            withActive: {
+              $type: "color",
+              $value: "#000000",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.black}",
+              },
+              name: "modesColorInteractiveDangerInverseWithActive",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "withActive",
+              ],
+            },
+            withDefault: {
+              $type: "color",
+              $value: "#000000",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.black}",
+              },
+              name: "modesColorInteractiveDangerInverseWithDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "danger",
+                "inverse",
+                "withDefault",
+              ],
+            },
+          },
         },
         dataEntry: {
           default: {
@@ -1726,6 +2022,32 @@ module.exports = {
           },
         },
         focus: {
+          default: {
+            $type: "color",
+            $value: "#000000",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.black}",
+            },
+            name: "modesColorInteractiveFocusDefault",
+            attributes: {},
+            path: ["modes", "color", "interactive", "focus", "default"],
+          },
+          content: {
+            $type: "color",
+            $value: "#000000",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.black}",
+            },
+            name: "modesColorInteractiveFocusContent",
+            attributes: {},
+            path: ["modes", "color", "interactive", "focus", "content"],
+          },
           withDefault: {
             $type: "color",
             $value: "#FFB500",
@@ -1773,31 +2095,108 @@ module.exports = {
             attributes: {},
             path: ["modes", "color", "interactive", "focus", "withDefaultAlt"],
           },
-          default: {
-            $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
+          inverse: {
+            default: {
               $type: "color",
-              $value: "{primitives.colors.black}",
+              $value: "#FFB500",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.gold}",
+              },
+              name: "modesColorInteractiveFocusInverseDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "focus",
+                "inverse",
+                "default",
+              ],
             },
-            name: "modesColorInteractiveFocusDefault",
-            attributes: {},
-            path: ["modes", "color", "interactive", "focus", "default"],
-          },
-          content: {
-            $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
+            content: {
               $type: "color",
-              $value: "{modes.color.generic.content.extreme}",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.white}",
+              },
+              name: "modesColorInteractiveFocusInverseContent",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "focus",
+                "inverse",
+                "content",
+              ],
+            },
+            withDefault: {
+              $type: "color",
+              $value: "#000000",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.black}",
+              },
+              name: "modesColorInteractiveFocusInverseWithDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "focus",
+                "inverse",
+                "withDefault",
+              ],
+            },
+            withDefaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.4",
+                    space: "lch",
+                    color: "#000000 ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#926916",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.4",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.gold}",
+              },
+              name: "modesColorInteractiveFocusInverseWithDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "focus",
+                "inverse",
+                "withDefaultAlt",
+              ],
             },
-            name: "modesColorInteractiveFocusContent",
-            attributes: {},
-            path: ["modes", "color", "interactive", "focus", "content"],
           },
         },
         inactive: {
@@ -2046,6 +2445,28 @@ module.exports = {
                 "content",
               ],
             },
+            contentAlt: {
+              $type: "color",
+              $value: "#000000",
+              $description: " Disabled labels inside buttons and Switch.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.black}",
+                $description: " Disabled labels inside buttons and Switch.",
+              },
+              name: "modesColorInteractiveInactiveInverseContentAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "interactive",
+                "inactive",
+                "inverse",
+                "contentAlt",
+              ],
+            },
           },
         },
         monochrome: {
@@ -3505,7 +3926,7 @@ module.exports = {
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.content.nought}",
+              $value: "{primitives.colors.white}",
             },
             name: "modesColorInteractivePrimaryWithActive",
             attributes: {},
@@ -3518,7 +3939,7 @@ module.exports = {
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.content.nought}",
+              $value: "{primitives.colors.white}",
             },
             name: "modesColorInteractivePrimaryWithDefault",
             attributes: {},
@@ -3531,7 +3952,7 @@ module.exports = {
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.generic.content.nought}",
+              $value: "{primitives.colors.white}",
             },
             name: "modesColorInteractivePrimaryWithHover",
             attributes: {},
@@ -4187,7 +4608,7 @@ module.exports = {
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.content.extreme}",
+                $value: "{primitives.colors.black}",
               },
               name: "modesColorInteractivePrimaryInverseWithActive",
               attributes: {},
@@ -4207,7 +4628,7 @@ module.exports = {
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.content.extreme}",
+                $value: "{primitives.colors.black}",
               },
               name: "modesColorInteractivePrimaryInverseWithDefault",
               attributes: {},
@@ -4227,7 +4648,7 @@ module.exports = {
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.content.extreme}",
+                $value: "{primitives.colors.black}",
               },
               name: "modesColorInteractivePrimaryInverseWithHover",
               attributes: {},

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

@@ -159,6 +159,15 @@ export const buttonColorTypicalPrimaryLabelActive: string;
 export const buttonColorTypicalPrimaryLabelDisabled: string;
 export const buttonColorTypicalPrimaryLabelEnabled: string;
 export const buttonColorTypicalPrimaryLabelHover: string;
+export const buttonColorTypicalPrimaryInverseBgActive: string;
+export const buttonColorTypicalPrimaryInverseBgDefault: string;
+export const buttonColorTypicalPrimaryInverseBgDisabled: string;
+export const buttonColorTypicalPrimaryInverseBgEnabled: string;
+export const buttonColorTypicalPrimaryInverseBgHover: string;
+export const buttonColorTypicalPrimaryInverseLabelActive: string;
+export const buttonColorTypicalPrimaryInverseLabelDisabled: string;
+export const buttonColorTypicalPrimaryInverseLabelEnabled: string;
+export const buttonColorTypicalPrimaryInverseLabelHover: string;
 export const buttonColorTypicalSecondaryBgActive: string;
 export const buttonColorTypicalSecondaryBgHover: string;
 export const buttonColorTypicalSecondaryBorderActive: string;

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

@@ -148,7 +148,7 @@ export const buttonColorDestructivePrimaryBgHover = "#eb646c";
 export const buttonColorDestructivePrimaryLabelDisabled = "#000000";
 export const buttonColorDestructivePrimaryLabelEnabled = "#000000";
 export const buttonColorDestructivePrimaryLabelHover = "#000000";
-export const buttonColorDestructiveSecondaryBgHover = "#3f1a1c";
+export const buttonColorDestructiveSecondaryBgHover = "#e13e5314";
 export const buttonColorDestructiveSecondaryBorderDisabled = "#4b4b4b";
 export const buttonColorDestructiveSecondaryBorderEnabled = "#E13E53";
 export const buttonColorDestructiveSecondaryBorderHover = "#eb646c";
@@ -164,6 +164,15 @@ export const buttonColorTypicalPrimaryLabelActive = "#000000";
 export const buttonColorTypicalPrimaryLabelDisabled = "#000000";
 export const buttonColorTypicalPrimaryLabelEnabled = "#000000";
 export const buttonColorTypicalPrimaryLabelHover = "#000000";
+export const buttonColorTypicalPrimaryInverseBgActive = "#14571a";
+export const buttonColorTypicalPrimaryInverseBgDefault = "#FFFFFF";
+export const buttonColorTypicalPrimaryInverseBgDisabled = "#a6a6a6";
+export const buttonColorTypicalPrimaryInverseBgEnabled = "#00811F";
+export const buttonColorTypicalPrimaryInverseBgHover = "#0e6b1d";
+export const buttonColorTypicalPrimaryInverseLabelActive = "#FFFFFF";
+export const buttonColorTypicalPrimaryInverseLabelDisabled = "#FFFFFF";
+export const buttonColorTypicalPrimaryInverseLabelEnabled = "#FFFFFF";
+export const buttonColorTypicalPrimaryInverseLabelHover = "#FFFFFF";
 export const buttonColorTypicalSecondaryBgActive = "#00d63952";
 export const buttonColorTypicalSecondaryBgHover = "#00d63914";
 export const buttonColorTypicalSecondaryBorderActive = "#81e57d";

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

@@ -10,6 +10,10 @@ export const focusColorBg: string;
 export const focusColorBorderalt: string;
 export const focusColorBorder: string;
 export const focusColorLabel: string;
+export const focusColorInverseBg: string;
+export const focusColorInverseBorderalt: string;
+export const focusColorInverseBorder: string;
+export const focusColorInverseLabel: string;
 export const focusSizeUnderline: number;
 export const focusBorderwidthSecondary: number;
 export const focusBorderwidthInner: number;

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

@@ -10,6 +10,10 @@ export const focusColorBg = "#926916";
 export const focusColorBorderalt = "#FFB500";
 export const focusColorBorder = "#000000";
 export const focusColorLabel = "#FFFFFF";
+export const focusColorInverseBg = "#ffd27e";
+export const focusColorInverseBorderalt = "#000000";
+export const focusColorInverseBorder = "#FFB500";
+export const focusColorInverseLabel = "#000000";
 export const focusSizeUnderline = 4;
 export const focusBorderwidthSecondary = 2;
 export const focusBorderwidthInner = 2;

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

@@ -8,6 +8,8 @@
 
 export const linkColorDestructiveLabelDefault: string;
 export const linkColorDestructiveLabelHover: string;
+export const linkColorDestructiveInverseLabelDefault: string;
+export const linkColorDestructiveInverseLabelHover: string;
 export const linkColorTypicalLabelDefault: string;
 export const linkColorTypicalLabelHover: string;
 export const linkColorTypicalInverseLabelDefault: string;

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

@@ -8,6 +8,8 @@
 
 export const linkColorDestructiveLabelDefault = "#e85b66";
 export const linkColorDestructiveLabelHover = "#ec6a71";
+export const linkColorDestructiveInverseLabelDefault = "#b23342";
+export const linkColorDestructiveInverseLabelHover = "#a3303d";
 export const linkColorTypicalLabelDefault = "#4cdc55";
 export const linkColorTypicalLabelHover = "#73e372";
 export const linkColorTypicalInverseLabelDefault = "#0c711d";

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

@@ -69,6 +69,7 @@ export const tableBoxshadowRowDragging: {
 export const tableBorderwidthThin: number;
 export const tableBorderwidthThick: number;
 export const tableSpaceNone: number;
+export const tableSpaceYg: number;
 export const tableSpaceRowXXs: number;
 export const tableSpaceRowXS: number;
 export const tableSpaceRowXM: number;

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

@@ -109,6 +109,7 @@ export const tableBoxshadowRowDragging = [
 export const tableBorderwidthThin = 1;
 export const tableBorderwidthThick = 2;
 export const tableSpaceNone = 0;
+export const tableSpaceYg = 4;
 export const tableSpaceRowXXs = 8;
 export const tableSpaceRowXS = 16;
 export const tableSpaceRowXM = 16;