@sage/design-tokens 13.1.0 → 13.2.0

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

@@ -1453,14 +1453,33 @@
               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",
@@ -1510,7 +1529,7 @@
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.fg.nought}",
+                $value: "{primitives.colors.white}",
               },
               name: "modesColorInteractiveDangerWithActive",
               attributes: {},
@@ -1523,12 +1542,289 @@
               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: {
@@ -1763,6 +2059,32 @@
             },
           },
           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",
@@ -1816,31 +2138,108 @@
                 "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: {
@@ -2089,6 +2488,28 @@
                   "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: {
@@ -3579,7 +4000,7 @@
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.content.nought}",
+                $value: "{primitives.colors.white}",
               },
               name: "modesColorInteractivePrimaryWithActive",
               attributes: {},
@@ -3592,7 +4013,7 @@
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.content.nought}",
+                $value: "{primitives.colors.white}",
               },
               name: "modesColorInteractivePrimaryWithDefault",
               attributes: {},
@@ -3605,7 +4026,7 @@
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.generic.content.nought}",
+                $value: "{primitives.colors.white}",
               },
               name: "modesColorInteractivePrimaryWithHover",
               attributes: {},
@@ -4264,7 +4685,7 @@
                 isSource: true,
                 original: {
                   $type: "color",
-                  $value: "{modes.color.generic.content.extreme}",
+                  $value: "{primitives.colors.black}",
                 },
                 name: "modesColorInteractivePrimaryInverseWithActive",
                 attributes: {},
@@ -4284,7 +4705,7 @@
                 isSource: true,
                 original: {
                   $type: "color",
-                  $value: "{modes.color.generic.content.extreme}",
+                  $value: "{primitives.colors.black}",
                 },
                 name: "modesColorInteractivePrimaryInverseWithDefault",
                 attributes: {},
@@ -4304,7 +4725,7 @@
                 isSource: true,
                 original: {
                   $type: "color",
-                  $value: "{modes.color.generic.content.extreme}",
+                  $value: "{primitives.colors.black}",
                 },
                 name: "modesColorInteractivePrimaryInverseWithHover",
                 attributes: {},

package/json/flat/frozenproduct/large/dark/components/button.json

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

package/json/flat/frozenproduct/large/dark/components/focus.json

@@ -3,6 +3,10 @@
   "focusColorBorderalt": "#FFB500",
   "focusColorBorder": "#000000",
   "focusColorLabel": "#FFFFFF",
+  "focusColorInverseBg": "#ffd27e",
+  "focusColorInverseBorderalt": "#000000",
+  "focusColorInverseBorder": "#FFB500",
+  "focusColorInverseLabel": "#000000",
   "focusSizeUnderline": 4,
   "focusBorderwidthSecondary": 2,
   "focusBorderwidthInner": 2,

package/json/flat/frozenproduct/large/dark/components/link.json

@@ -1,6 +1,8 @@
 {
   "linkColorDestructiveLabelDefault": "#e85b66",
   "linkColorDestructiveLabelHover": "#ec6a71",
+  "linkColorDestructiveInverseLabelDefault": "#b23342",
+  "linkColorDestructiveInverseLabelHover": "#a3303d",
   "linkColorTypicalLabelDefault": "#4cdc55",
   "linkColorTypicalLabelHover": "#73e372",
   "linkColorTypicalInverseLabelDefault": "#0c711d",

package/json/flat/frozenproduct/large/dark/components/table.json

@@ -34,6 +34,7 @@
   "tableBorderwidthThin": 1,
   "tableBorderwidthThick": 2,
   "tableSpaceNone": 0,
+  "tableSpaceYg": 4,
   "tableSpaceRowXXs": 8,
   "tableSpaceRowXS": 16,
   "tableSpaceRowXM": 16,

package/json/flat/frozenproduct/large/dark/mode.json

@@ -63,10 +63,18 @@
   "modesColorInteractiveDangerDefault": "#E13E53",
   "modesColorInteractiveDangerDefaultAlt": "#e85b66",
   "modesColorInteractiveDangerHover": "#eb646c",
-  "modesColorInteractiveDangerHoverAlt": "#3f1a1c",
+  "modesColorInteractiveDangerHoverAlt": "#e13e5314",
   "modesColorInteractiveDangerHoverAlt2": "#ec6a71",
   "modesColorInteractiveDangerWithActive": "#000000",
   "modesColorInteractiveDangerWithDefault": "#000000",
+  "modesColorInteractiveDangerInverseActive": "#882b34",
+  "modesColorInteractiveDangerInverseDefault": "#CD384B",
+  "modesColorInteractiveDangerInverseDefaultAlt": "#b23342",
+  "modesColorInteractiveDangerInverseHover": "#aa323f",
+  "modesColorInteractiveDangerInverseHoverAlt": "#cd384b14",
+  "modesColorInteractiveDangerInverseHoverAlt2": "#a3303d",
+  "modesColorInteractiveDangerInverseWithActive": "#FFFFFF",
+  "modesColorInteractiveDangerInverseWithDefault": "#FFFFFF",
   "modesColorInteractiveDataEntryDefault": "#000000",
   "modesColorInteractiveDataEntryWithActive": "#FFFFFF",
   "modesColorInteractiveDataEntryWithActiveAlt": "#000000",
@@ -77,10 +85,14 @@
   "modesColorInteractiveDataEntryContent": "#fffffff2",
   "modesColorInteractiveDataEntryContentAlt": "#ffffff8c",
   "modesColorInteractiveDataEntryFrozenWithDefault": "#777",
-  "modesColorInteractiveFocusWithDefault": "#000000",
+  "modesColorInteractiveFocusDefault": "#FFB500",
   "modesColorInteractiveFocusContent": "#FFFFFF",
+  "modesColorInteractiveFocusWithDefault": "#000000",
   "modesColorInteractiveFocusWithDefaultAlt": "#926916",
-  "modesColorInteractiveFocusDefault": "#FFB500",
+  "modesColorInteractiveFocusInverseDefault": "#000000",
+  "modesColorInteractiveFocusInverseContent": "#000000",
+  "modesColorInteractiveFocusInverseWithDefault": "#FFB500",
+  "modesColorInteractiveFocusInverseWithDefaultAlt": "#ffd27e",
   "modesColorInteractiveInactiveDefault": "#4b4b4b",
   "modesColorInteractiveInactiveMask": "#FFFFFF",
   "modesColorInteractiveInactiveDefaultAlt": "#0e0e0e",
@@ -91,6 +103,7 @@
   "modesColorInteractiveInactiveFrozenDefaultAlt": "#0e0e0e",
   "modesColorInteractiveInactiveInverseDefault": "#a6a6a6",
   "modesColorInteractiveInactiveInverseContent": "#0000006b",
+  "modesColorInteractiveInactiveInverseContentAlt": "#FFFFFF",
   "modesColorInteractiveMonochromeActive": "#FFFFFF",
   "modesColorInteractiveMonochromeActiveAlt": "#ffffff29",
   "modesColorInteractiveMonochromeDefault": "#ffffffe6",