npm - @sage/design-tokens - Versions diffs - 14.0.0 → 14.1.0 - Mend

@sage/design-tokens 14.0.0 → 14.1.0

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

Files changed (1010) hide show

package/js/common/product/large/light/mode.js CHANGED Viewed

@@ -1323,7 +1323,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.32",
+                  value: "0.30",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -1331,7 +1331,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#882b34",
+            $value: "#8c2c35",
             $description: "used on pill hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -1340,7 +1340,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.active}",
+                    value: "{primitives.color.modifiers.button.active}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -1408,7 +1408,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -1416,7 +1416,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#aa323f",
+            $value: "#ac3240",
             $description: "used on solid-pill and primary-button hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -1425,7 +1425,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -1445,14 +1445,14 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.08",
+                  value: "0.10",
                   space: "lch",
                   format: "hex",
                 },
               },
             },
             $type: "color",
-            $value: "#cd384b14",
+            $value: "#cd384b1a",
             $description: "used on secondary-button hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -1461,7 +1461,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    value: "{primitives.color.modifiers.button.hoverAlt}",
                     space: "lch",
                   },
                 },
@@ -1479,7 +1479,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.08",
+                  value: "0.10",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -1487,7 +1487,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#a3303d",
+            $value: "#9f303c",
             $description: "used on link hover state",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -1496,7 +1496,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    value: "{primitives.color.modifiers.button.hoverAlt}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -1542,7 +1542,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.32",
+                    value: "0.30",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -1550,7 +1550,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#f28486",
+              $value: "#f28083",
               $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -1559,7 +1559,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.active}",
+                      value: "{primitives.color.modifiers.button.active}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -1648,7 +1648,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -1656,7 +1656,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#eb646c",
+              $value: "#ea626a",
               $description:
                 "used on solid-pill and primary-button hover states",
               filePath: "data/tokens/modes/light.json",
@@ -1666,7 +1666,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -1693,14 +1693,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.08",
+                    value: "0.10",
                     space: "lch",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#e13e5314",
+              $value: "#e13e531a",
               $description: "used on secondary-button hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -1709,7 +1709,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      value: "{primitives.color.modifiers.button.hoverAlt}",
                       space: "lch",
                     },
                   },
@@ -1734,7 +1734,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.08",
+                    value: "0.10",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -1742,7 +1742,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#ec6a71",
+              $value: "#ed6e74",
               $description: "used on link hover state",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -1751,7 +1751,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      value: "{primitives.color.modifiers.button.hoverAlt}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -1884,7 +1884,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.08",
+                  value: "0.10",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -1892,7 +1892,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#e8e8e8",
+            $value: "#e2e2e2",
             $description: "bg hover for draggable area on file input",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -1901,7 +1901,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    value: "{primitives.color.modifiers.button.hoverAlt}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -2488,14 +2488,14 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   format: "hex",
                 },
               },
             },
             $type: "color",
-            $value: "#00000029",
+            $value: "#00000026",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
@@ -2503,7 +2503,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.activeAlt}",
+                    value: "{primitives.color.modifiers.button.activeAlt}",
                     space: "lch",
                   },
                 },
@@ -2626,14 +2626,14 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.08",
+                  value: "0.10",
                   space: "lch",
                   format: "hex",
                 },
               },
             },
             $type: "color",
-            $value: "#00000014",
+            $value: "#0000001a",
             $description: "Accordion, secondary, tertiary, menu bg on hover",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -2642,7 +2642,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    value: "{primitives.color.modifiers.button.hoverAlt}",
                     space: "lch",
                   },
                 },
@@ -2660,14 +2660,14 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   format: "hex",
                 },
               },
             },
             $type: "color",
-            $value: "#00000029",
+            $value: "#00000026",
             $description: "subtle table header hover",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -2676,7 +2676,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                   },
                 },
@@ -2804,14 +2804,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#22374329",
+              $value: "#22374326",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -2819,7 +2819,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.activeAlt}",
+                      value: "{primitives.color.modifiers.button.activeAlt}",
                       space: "lch",
                     },
                   },
@@ -2904,14 +2904,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.08",
+                    value: "0.10",
                     space: "lch",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#22374314",
+              $value: "#2237431a",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -2919,7 +2919,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      value: "{primitives.color.modifiers.button.hoverAlt}",
                       space: "lch",
                     },
                   },
@@ -3025,14 +3025,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#ffffff29",
+              $value: "#ffffff26",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -3040,7 +3040,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.activeAlt}",
+                      value: "{primitives.color.modifiers.button.activeAlt}",
                       space: "lch",
                     },
                   },
@@ -3185,14 +3185,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.08",
+                    value: "0.10",
                     space: "lch",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#ffffff14",
+              $value: "#ffffff1a",
               $description: "Accordion, secondary, tertiary, menu bg on hover",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -3201,7 +3201,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      value: "{primitives.color.modifiers.button.hoverAlt}",
                       space: "lch",
                     },
                   },
@@ -3227,14 +3227,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#ffffff29",
+              $value: "#ffffff26",
               $description: "subtle table header hover",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -3243,7 +3243,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                     },
                   },
@@ -3545,14 +3545,14 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.08",
+                  value: "0.10",
                   space: "lch",
                   format: "hex",
                 },
               },
             },
             $type: "color",
-            $value: "#00000014",
+            $value: "#0000001a",
             $description: "hover bg for nav items",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -3561,7 +3561,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    value: "{primitives.color.modifiers.button.hoverAlt}",
                     space: "lch",
                   },
                 },
@@ -3627,7 +3627,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.32",
+                  value: "0.30",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -3635,7 +3635,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#14571a",
+            $value: "#13591a",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
@@ -3643,7 +3643,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.active}",
+                    value: "{primitives.color.modifiers.button.active}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -3661,7 +3661,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.32",
+                  value: "0.30",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -3669,7 +3669,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#00811f52",
+            $value: "#00811f4d",
             $description: "Active color for secondary and tertiary buttons",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -3678,7 +3678,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.active}",
+                    value: "{primitives.color.modifiers.button.active}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -3719,7 +3719,7 @@ module.exports = {
             },
             $type: "color",
             $value: "#00811fcc",
-            $description: "border color for secondary buttons",
+            $description: "border color for secondary and tertiary buttons",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
@@ -3735,7 +3735,7 @@ module.exports = {
               },
               $type: "color",
               $value: "{modes.color.interactive.primary.default}",
-              $description: "border color for secondary buttons",
+              $description: "border color for secondary and tertiary buttons",
             },
             name: "modesColorInteractivePrimaryDefaultAlt",
             attributes: {},
@@ -3745,8 +3745,8 @@ module.exports = {
             $extensions: {
               "studio.tokens": {
                 modify: {
-                  type: "alpha",
-                  value: "0.5",
+                  type: "mix",
+                  value: "0.12",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -3754,16 +3754,16 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#00811f80",
-            $description: "border color for tertiary buttons",
+            $value: "#0c711d",
+            $description: "default value for links",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
               $extensions: {
                 "studio.tokens": {
                   modify: {
-                    type: "alpha",
-                    value: "0.5",
+                    type: "mix",
+                    value: "0.12",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -3771,7 +3771,7 @@ module.exports = {
               },
               $type: "color",
               $value: "{modes.color.interactive.primary.default}",
-              $description: "border color for tertiary buttons",
+              $description: "default value for links",
             },
             name: "modesColorInteractivePrimaryDefaultAlt2",
             attributes: {},
@@ -3781,8 +3781,8 @@ module.exports = {
             $extensions: {
               "studio.tokens": {
                 modify: {
-                  type: "mix",
-                  value: "0.12",
+                  type: "alpha",
+                  value: "0.03",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -3790,16 +3790,16 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#0c711d",
-            $description: "default value for links",
+            $value: "#00811f08",
+            $description: "Default background color of secondary button",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
               $extensions: {
                 "studio.tokens": {
                   modify: {
-                    type: "mix",
-                    value: "0.12",
+                    type: "alpha",
+                    value: "0.03",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -3807,7 +3807,7 @@ module.exports = {
               },
               $type: "color",
               $value: "{modes.color.interactive.primary.default}",
-              $description: "default value for links",
+              $description: "Default background color of secondary button",
             },
             name: "modesColorInteractivePrimaryDefaultAlt3",
             attributes: {},
@@ -3818,7 +3818,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -3826,7 +3826,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#0e6b1d",
+            $value: "#0e6d1d",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
@@ -3834,7 +3834,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -3852,7 +3852,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "alpha",
-                  value: "0.08",
+                  value: "0.10",
                   space: "lch",
                   color: "#FFFFFF ",
                   format: "hex",
@@ -3860,7 +3860,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#00811f14",
+            $value: "#00811f1a",
             $description: "hover for secondary and tertiary buttons",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -3869,14 +3869,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "{modes.color.modifiers.button.hoverAlt}",
+                    value: "{primitives.color.modifiers.button.hoverAlt}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastLess} ",
                   },
                 },
               },
               $type: "color",
-              $value: "{modes.color.interactive.primary.defaultAlt2}",
+              $value: "{modes.color.interactive.primary.default}",
               $description: "hover for secondary and tertiary buttons",
             },
             name: "modesColorInteractivePrimaryHoverAlt",
@@ -3888,7 +3888,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -3896,7 +3896,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#125e1b",
+            $value: "#12601b",
             $description: "hover for links",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -3905,14 +3905,14 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
                 },
               },
               $type: "color",
-              $value: "{modes.color.interactive.primary.defaultAlt3}",
+              $value: "{modes.color.interactive.primary.defaultAlt2}",
               $description: "hover for links",
             },
             name: "modesColorInteractivePrimaryHoverAlt2",
@@ -3964,7 +3964,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.32",
+                    value: "0.30",
                     space: "lch",
                     color: "#000000",
                     format: "hex",
@@ -3972,7 +3972,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#135631",
+              $value: "#135932",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -3980,7 +3980,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.active}",
+                      value: "{primitives.color.modifiers.button.active}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastMore}",
                     },
@@ -4068,7 +4068,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#000000",
                     format: "hex",
@@ -4076,7 +4076,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#0e6b3b",
+              $value: "#0d6c3c",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -4084,7 +4084,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastMore}",
                     },
@@ -4243,7 +4243,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.32",
+                    value: "0.30",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -4251,7 +4251,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#81e57d",
+              $value: "#7ce47a",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -4259,7 +4259,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.active}",
+                      value: "{primitives.color.modifiers.button.active}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -4284,7 +4284,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.32",
+                    value: "0.30",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -4292,7 +4292,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#00d63952",
+              $value: "#00d6394d",
               $description:
                 "Active color for inverse secondary and tertiary buttons",
               filePath: "data/tokens/modes/light.json",
@@ -4302,7 +4302,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.active}",
+                      value: "{primitives.color.modifiers.button.active}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -4358,7 +4358,8 @@ module.exports = {
               },
               $type: "color",
               $value: "#00d639cc",
-              $description: "border color for secondary inverse buttons",
+              $description:
+                "border color for secondary and tertiary inverse buttons",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -4374,7 +4375,8 @@ module.exports = {
                 },
                 $type: "color",
                 $value: "{modes.color.interactive.primary.inverse.default}",
-                $description: "border color for secondary inverse buttons",
+                $description:
+                  "border color for secondary and tertiary inverse buttons",
               },
               name: "modesColorInteractivePrimaryInverseDefaultAlt",
               attributes: {},
@@ -4391,8 +4393,8 @@ module.exports = {
               $extensions: {
                 "studio.tokens": {
                   modify: {
-                    type: "alpha",
-                    value: "0.5",
+                    type: "mix",
+                    value: "0.12",
                     space: "lch",
                     color: "#FFFFFF",
                     format: "hex",
@@ -4400,16 +4402,16 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#00d63980",
-              $description: "border color for tertiary inverse buttons",
+              $value: "#4cdc55",
+              $description: "Default color for links",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
                 $extensions: {
                   "studio.tokens": {
                     modify: {
-                      type: "alpha",
-                      value: "0.5",
+                      type: "mix",
+                      value: "0.12",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess}",
                     },
@@ -4417,7 +4419,7 @@ module.exports = {
                 },
                 $type: "color",
                 $value: "{modes.color.interactive.primary.inverse.default}",
-                $description: "border color for tertiary inverse buttons",
+                $description: "Default color for links",
               },
               name: "modesColorInteractivePrimaryInverseDefaultAlt2",
               attributes: {},
@@ -4434,8 +4436,8 @@ module.exports = {
               $extensions: {
                 "studio.tokens": {
                   modify: {
-                    type: "mix",
-                    value: "0.12",
+                    type: "alpha",
+                    value: "0.03",
                     space: "lch",
                     color: "#FFFFFF",
                     format: "hex",
@@ -4443,16 +4445,17 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#4cdc55",
-              $description: "Default color for links",
+              $value: "#00d63908",
+              $description:
+                "Default background color of inverse secondary buttons",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
                 $extensions: {
                   "studio.tokens": {
                     modify: {
-                      type: "mix",
-                      value: "0.12",
+                      type: "alpha",
+                      value: "0.03",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess}",
                     },
@@ -4460,7 +4463,8 @@ module.exports = {
                 },
                 $type: "color",
                 $value: "{modes.color.interactive.primary.inverse.default}",
-                $description: "Default color for links",
+                $description:
+                  "Default background color of inverse secondary buttons",
               },
               name: "modesColorInteractivePrimaryInverseDefaultAlt3",
               attributes: {},
@@ -4478,7 +4482,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -4486,7 +4490,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#58de5d",
+              $value: "#55dd5b",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -4494,7 +4498,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -4519,7 +4523,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "alpha",
-                    value: "0.08",
+                    value: "0.10",
                     space: "lch",
                     color: "#FFFFFF",
                     format: "hex",
@@ -4527,7 +4531,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#00d63914",
+              $value: "#00d6391a",
               $description: "Hover for inverse secondary and tertiary buttons",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -4536,14 +4540,14 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "alpha",
-                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      value: "{primitives.color.modifiers.button.hoverAlt}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess}",
                     },
                   },
                 },
                 $type: "color",
-                $value: "{modes.color.interactive.primary.inverse.defaultAlt2}",
+                $value: "{modes.color.interactive.primary.inverse.default}",
                 $description:
                   "Hover for inverse secondary and tertiary buttons",
               },
@@ -4563,7 +4567,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -4571,7 +4575,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#73e372",
+              $value: "#71e270",
               $description: "hover for links",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -4580,14 +4584,14 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
                   },
                 },
                 $type: "color",
-                $value: "{modes.color.interactive.primary.inverse.defaultAlt3}",
+                $value: "{modes.color.interactive.primary.inverse.defaultAlt2}",
                 $description: "hover for links",
               },
               name: "modesColorInteractivePrimaryInverseHoverAlt2",
@@ -4873,21 +4877,78 @@ module.exports = {
             path: ["modes", "color", "status", "ai", "default-vertical"],
           },
         },
-        generic: {
-          default: {
+        callout: {
+          defaultAlt: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "mix",
+                  value: "0.85",
+                  space: "lch",
+                  color: "#FFFFFF",
+                  format: "hex",
+                },
+              },
+            },
             $type: "color",
-            $value: "#007c7b",
-            $description: "used in progress bar ",
+            $value: "#e5fae2",
+            $description: "used for marketing banners",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.85",
+                    space: "lch",
+                    color: "{modes.color.modifier.contrastLess}",
+                  },
+                },
+              },
               $type: "color",
-              $value: "{primitives.colors.teal}",
-              $description: "used in progress bar ",
+              $value: "{primitives.colors.brilliantGreen}",
+              $description: "used for marketing banners",
             },
-            name: "modesColorStatusGenericDefault",
+            name: "modesColorStatusCalloutDefaultAlt",
             attributes: {},
-            path: ["modes", "color", "status", "generic", "default"],
+            path: ["modes", "color", "status", "callout", "defaultAlt"],
+          },
+          hoverAlt: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "mix",
+                  value: "0.05",
+                  space: "lch",
+                  color: "#000000",
+                  format: "hex",
+                },
+              },
+            },
+            $type: "color",
+            $value: "#d8ecd5",
+            $description: "used for marketing banners",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.05",
+                    space: "lch",
+                    color: "{modes.color.modifier.contrastMore}",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "{modes.color.status.callout.defaultAlt}",
+              $description: "used for marketing banners",
+            },
+            name: "modesColorStatusCalloutHoverAlt",
+            attributes: {},
+            path: ["modes", "color", "status", "callout", "hoverAlt"],
           },
         },
         caution: {
@@ -4949,7 +5010,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -4957,7 +5018,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#b13a0d",
+            $value: "#b33b0d",
             $description: "used on pill hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -4966,7 +5027,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -4985,7 +5046,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#D64309",
                   format: "hex",
@@ -4993,7 +5054,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#fdd3c0",
+            $value: "#fed5c3",
             $description: "used on pill hover states and message bg",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -5002,7 +5063,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.status.caution.default}",
                   },
@@ -5078,7 +5139,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -5086,7 +5147,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#ff9a4e",
+              $value: "#ff994c",
               $description: "used on global message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -5095,7 +5156,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -5186,7 +5247,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -5194,7 +5255,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#eb6732",
+              $value: "#eb6530",
               $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -5203,7 +5264,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -5222,7 +5283,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#E04500",
                     format: "hex",
@@ -5230,7 +5291,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#3f1b0b",
+              $value: "#3e1a0b",
               $description: "used on pill hover states and message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -5239,7 +5300,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.status.caution.inverse.default}",
                     },
@@ -5474,53 +5535,38 @@ module.exports = {
             },
           },
         },
-        inactive: {
-          default: {
-            $type: "color",
-            $value: "#a6a6a6",
-            $description: "For readonly pill bg and border",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.generic.fg.soft}",
-              $description: "For readonly pill bg and border",
-            },
-            name: "modesColorStatusInactiveDefault",
-            attributes: {},
-            path: ["modes", "color", "status", "inactive", "default"],
-          },
-          withDefault: {
-            $type: "color",
-            $value: "#000000ab",
-            $description: "For readonly filled pill text",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
+        custom: {
+          blue: {
+            default: {
               $type: "color",
-              $value: "{modes.color.generic.content.firm}",
-              $description: "For readonly filled pill text",
+              $value: "#0071C3",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.blue.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomBlueDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "blue", "default"],
             },
-            name: "modesColorStatusInactiveWithDefault",
-            attributes: {},
-            path: ["modes", "color", "status", "inactive", "withDefault"],
-          },
-          inverse: {
-            default: {
+            defaultAlt: {
               $extensions: {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.32",
+                    value: "0.9",
                     space: "lch",
-                    color: "#FFFFFF ",
+                    color: "#FFFFFF",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#4b4b4b",
-              $description: "For readonly pill bg and border",
+              $value: "#ebf0f9",
+              $description: "Pill bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -5528,87 +5574,1709 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "0.32",
+                      value: "0.9",
                       space: "lch",
-                      color: "{modes.color.modifier.contrastLess} ",
+                      color: "{modes.color.modifier.contrastLess}",
                     },
                   },
                 },
                 $type: "color",
-                $value: "{primitives.colors.black}",
-                $description: "For readonly pill bg and border",
+                $value: "{primitives.colors.supplementary.blue.400}",
+                $description: "Pill bg",
               },
-              name: "modesColorStatusInactiveInverseDefault",
+              name: "modesColorStatusCustomBlueDefaultAlt",
               attributes: {},
               path: [
                 "modes",
                 "color",
                 "status",
-                "inactive",
-                "inverse",
-                "default",
+                "custom",
+                "blue",
+                "defaultAlt",
               ],
             },
-            withDefault: {
+            hover: {
               $extensions: {
                 "studio.tokens": {
                   modify: {
-                    type: "alpha",
-                    value: "0.67",
+                    type: "mix",
+                    value: "0.15",
                     space: "lch",
+                    color: "#000000",
                     format: "hex",
                   },
                 },
               },
               $type: "color",
-              $value: "#ffffffab",
-              $description: "For readonly filled pill text",
+              $value: "#135fa3",
+              $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
                 $extensions: {
                   "studio.tokens": {
                     modify: {
-                      type: "alpha",
-                      value: "0.67",
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
                     },
                   },
                 },
                 $type: "color",
-                $value: "{primitives.colors.white}",
-                $description: "For readonly filled pill text",
+                $value: "{modes.color.status.custom.blue.default}",
+                $description: "used on pill hover states",
               },
-              name: "modesColorStatusInactiveInverseWithDefault",
+              name: "modesColorStatusCustomBlueHover",
               attributes: {},
-              path: [
-                "modes",
-                "color",
-                "status",
-                "inactive",
-                "inverse",
-                "withDefault",
-              ],
+              path: ["modes", "color", "status", "custom", "blue", "hover"],
             },
-          },
-        },
-        important: {
-          default: {
-            $type: "color",
-            $value: "#8F4CD7",
-            $description:
-              "For tile status keylines to show if something is of high importance.",
-            filePath: "data/tokens/modes/light.json",
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#ced9ed",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.blue.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomBlueHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "blue", "hoverAlt"],
+            },
+          },
+          teal: {
+            default: {
+              $type: "color",
+              $value: "#007C7B",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.teal.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomTealDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "teal", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#e9f1f1",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.teal.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomTealDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "teal",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#0e6968",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomTealHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "teal", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#c4dde0",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomTealHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "teal", "hoverAlt"],
+            },
+          },
+          green: {
+            default: {
+              $type: "color",
+              $value: "#00811F",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.green.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomGreenDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "green", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#e9f2e8",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.green.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomGreenDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "green",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#0e6d1d",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.green.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomGreenHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "green", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#c4decf",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.green.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomGreenHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "green", "hoverAlt"],
+            },
+          },
+          lime: {
+            default: {
+              $type: "color",
+              $value: "#637700",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.lime.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomLimeDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "lime", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#eff1e6",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.lime.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomLimeDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "lime",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#546408",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomLimeHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "lime", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#cdddc9",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomLimeHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "lime", "hoverAlt"],
+            },
+          },
+          orange: {
+            default: {
+              $type: "color",
+              $value: "#C54300",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.orange.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomOrangeDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "orange", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#feece5",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.orange.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomOrangeDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "orange",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#a53a06",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomOrangeHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "orange", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#f2d0ce",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomOrangeHoverAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "orange",
+                "hoverAlt",
+              ],
+            },
+          },
+          red: {
+            default: {
+              $type: "color",
+              $value: "#DC004E",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.red.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomRedDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "red", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#ffebec",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.red.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomRedDefaultAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "red", "defaultAlt"],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#b81242",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.red.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomRedHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "red", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#f1cfd9",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.red.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomRedHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "red", "hoverAlt"],
+            },
+          },
+          pink: {
+            default: {
+              $type: "color",
+              $value: "#C8269A",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.pink.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomPinkDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "pink", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#fcecf5",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.pink.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomPinkDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "pink",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#a82581",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomPinkHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "pink", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#ead2e5",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomPinkHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "pink", "hoverAlt"],
+            },
+          },
+          purple: {
+            default: {
+              $type: "color",
+              $value: "#8F4CD7",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.purple.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomPurpleDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "purple", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#f5edfc",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.purple.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomPurpleDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "purple",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#7941b4",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomPurpleHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "purple", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#ded4ee",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomPurpleHoverAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "purple",
+                "hoverAlt",
+              ],
+            },
+          },
+          gray: {
+            default: {
+              $type: "color",
+              $value: "#6F6F6F",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.gray.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomGrayDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "gray", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#f0f0f0",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.gray.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomGrayDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "gray",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#5e5e5e",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomGrayHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "gray", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#d3d9e5",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomGrayHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "gray", "hoverAlt"],
+            },
+          },
+          slate: {
+            default: {
+              $type: "color",
+              $value: "#527386",
+              $description: "For pills. Not accessible with white TEXT.",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.slate.400}",
+                $description: "For pills. Not accessible with white TEXT.",
+              },
+              name: "modesColorStatusCustomSlateDefault",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "slate", "default"],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#edf0f2",
+              $description: "Pill bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.9",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.slate.400}",
+                $description: "Pill bg",
+              },
+              name: "modesColorStatusCustomSlateDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "custom",
+                "slate",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#000000",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#466171",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomSlateHover",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "slate", "hover"],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#0060A7",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#cbdae6",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.defaultAlt}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusCustomSlateHoverAlt",
+              attributes: {},
+              path: ["modes", "color", "status", "custom", "slate", "hoverAlt"],
+            },
+          },
+        },
+        generic: {
+          default: {
+            $type: "color",
+            $value: "#F0F",
+            $description:
+              "TO BE DETLETED: Was #007c7b and used in Progress bar, dataVis colour.",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "#F0F",
+              $description:
+                "TO BE DETLETED: Was {primitives.colors.teal} and used in Progress bar, dataVis colour.",
+            },
+            name: "modesColorStatusGenericDefault",
+            attributes: {},
+            path: ["modes", "color", "status", "generic", "default"],
+          },
+        },
+        important: {
+          default: {
+            $type: "color",
+            $value: "#8F4CD7",
+            $description:
+              "For tile status keylines to show if something is of high importance.",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{primitives.colors.supplementary.purple.400}",
+              $description:
+                "For tile status keylines to show if something is of high importance.",
+            },
+            name: "modesColorStatusImportantDefault",
+            attributes: {},
+            path: ["modes", "color", "status", "important", "default"],
+          },
+          defaultAlt: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "mix",
+                  value: "0.9",
+                  space: "lch",
+                  color: "#FFFFFF",
+                  format: "hex",
+                },
+              },
+            },
+            $type: "color",
+            $value: "#f5edfc",
+            $description: "Subtle message bg",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.9",
+                    space: "lch",
+                    color: "{modes.color.modifier.contrastLess}",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "{primitives.colors.supplementary.purple.400}",
+              $description: "Subtle message bg",
+            },
+            name: "modesColorStatusImportantDefaultAlt",
+            attributes: {},
+            path: ["modes", "color", "status", "important", "defaultAlt"],
+          },
+          hover: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "mix",
+                  value: "0.15",
+                  space: "lch",
+                  color: "#000000",
+                  format: "hex",
+                },
+              },
+            },
+            $type: "color",
+            $value: "#7941b4",
+            $description: "used on pill hover states",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "{primitives.color.modifiers.button.hover}",
+                    space: "lch",
+                    color: "{modes.color.modifier.contrastMore}",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "{modes.color.status.important.default}",
+              $description: "used on pill hover states",
+            },
+            name: "modesColorStatusImportantHover",
+            attributes: {},
+            path: ["modes", "color", "status", "important", "hover"],
+          },
+          hoverAlt: {
+            $extensions: {
+              "studio.tokens": {
+                modify: {
+                  type: "mix",
+                  value: "0.15",
+                  space: "lch",
+                  color: "#0060A7",
+                  format: "hex",
+                },
+              },
+            },
+            $type: "color",
+            $value: "#ded4ee",
+            $description: "used on pill hover states and message bg",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "{primitives.color.modifiers.button.hover}",
+                    space: "lch",
+                    color: "{modes.color.status.info.default}",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "{modes.color.status.important.defaultAlt}",
+              $description: "used on pill hover states and message bg",
+            },
+            name: "modesColorStatusImportantHoverAlt",
+            attributes: {},
+            path: ["modes", "color", "status", "important", "hoverAlt"],
+          },
+          inverse: {
+            default: {
+              $type: "color",
+              $value: "#985FDC",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{primitives.colors.supplementary.purple.500}",
+              },
+              name: "modesColorStatusImportantInverseDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "important",
+                "inverse",
+                "default",
+              ],
+            },
+            defaultAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.85",
+                    space: "lch",
+                    color: "#000000 ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#1b1422",
+              $description: "Subtle message bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.85",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastMore} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.supplementary.purple.500}",
+                $description: "Subtle message bg",
+              },
+              name: "modesColorStatusImportantInverseDefaultAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "important",
+                "inverse",
+                "defaultAlt",
+              ],
+            },
+            hover: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#FFFFFF",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#a977e2",
+              $description: "used on pill hover states",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.important.inverse.default}",
+                $description: "used on pill hover states",
+              },
+              name: "modesColorStatusImportantInverseHover",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "important",
+                "inverse",
+                "hover",
+              ],
+            },
+            hoverAlt: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.15",
+                    space: "lch",
+                    color: "#007ED9",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#282039",
+              $description: "used on pill hover states and message bg",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "{primitives.color.modifiers.button.hover}",
+                      space: "lch",
+                      color: "{modes.color.status.info.inverse.default}",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{modes.color.status.important.inverse.defaultAlt}",
+                $description: "used on pill hover states and message bg",
+              },
+              name: "modesColorStatusImportantInverseHoverAlt",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "important",
+                "inverse",
+                "hoverAlt",
+              ],
+            },
+          },
+        },
+        inactive: {
+          default: {
+            $type: "color",
+            $value: "#a6a6a6",
+            $description: "For readonly pill bg and border",
+            filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{primitives.colors.supplementary.purple.400}",
-              $description:
-                "For tile status keylines to show if something is of high importance.",
+              $value: "{modes.color.generic.fg.soft}",
+              $description: "For readonly pill bg and border",
             },
-            name: "modesColorStatusImportantDefault",
+            name: "modesColorStatusInactiveDefault",
             attributes: {},
-            path: ["modes", "color", "status", "important", "default"],
+            path: ["modes", "color", "status", "inactive", "default"],
+          },
+          withDefault: {
+            $type: "color",
+            $value: "#000000ab",
+            $description: "For readonly filled pill text",
+            filePath: "data/tokens/modes/light.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.generic.content.firm}",
+              $description: "For readonly filled pill text",
+            },
+            name: "modesColorStatusInactiveWithDefault",
+            attributes: {},
+            path: ["modes", "color", "status", "inactive", "withDefault"],
+          },
+          inverse: {
+            default: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "mix",
+                    value: "0.32",
+                    space: "lch",
+                    color: "#FFFFFF ",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#4b4b4b",
+              $description: "For readonly pill bg and border",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "mix",
+                      value: "0.32",
+                      space: "lch",
+                      color: "{modes.color.modifier.contrastLess} ",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.black}",
+                $description: "For readonly pill bg and border",
+              },
+              name: "modesColorStatusInactiveInverseDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "inactive",
+                "inverse",
+                "default",
+              ],
+            },
+            withDefault: {
+              $extensions: {
+                "studio.tokens": {
+                  modify: {
+                    type: "alpha",
+                    value: "0.67",
+                    space: "lch",
+                    format: "hex",
+                  },
+                },
+              },
+              $type: "color",
+              $value: "#ffffffab",
+              $description: "For readonly filled pill text",
+              filePath: "data/tokens/modes/light.json",
+              isSource: true,
+              original: {
+                $extensions: {
+                  "studio.tokens": {
+                    modify: {
+                      type: "alpha",
+                      value: "0.67",
+                      space: "lch",
+                    },
+                  },
+                },
+                $type: "color",
+                $value: "{primitives.colors.white}",
+                $description: "For readonly filled pill text",
+              },
+              name: "modesColorStatusInactiveInverseWithDefault",
+              attributes: {},
+              path: [
+                "modes",
+                "color",
+                "status",
+                "inactive",
+                "inverse",
+                "withDefault",
+              ],
+            },
           },
         },
         info: {
@@ -5670,7 +7338,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -5678,7 +7346,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#10508a",
+            $value: "#10518c",
             $description: "used on pill hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -5687,7 +7355,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -5706,7 +7374,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#0060A7",
                   format: "hex",
@@ -5714,7 +7382,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#cbd6e9",
+            $value: "#cdd7ea",
             $description: "used on pill hover states and message bg",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -5723,7 +7391,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.status.info.default}",
                   },
@@ -5765,7 +7433,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -5773,7 +7441,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#84b6ff",
+              $value: "#82b5ff",
               $description: "used on global message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -5782,7 +7450,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -5866,7 +7534,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF",
                     format: "hex",
@@ -5874,7 +7542,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#5291e0",
+              $value: "#4f90df",
               $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -5883,7 +7551,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess}",
                     },
@@ -5902,7 +7570,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#007ED9",
                     format: "hex",
@@ -5910,7 +7578,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#17253b",
+              $value: "#17253a",
               $description: "used on pill hover states and message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -5919,7 +7587,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.status.info.inverse.default}",
                     },
@@ -5994,7 +7662,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -6002,7 +7670,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#aa323f",
+            $value: "#ac3240",
             $description: "used on pill hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -6011,7 +7679,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -6030,7 +7698,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#CD384B",
                   format: "hex",
@@ -6038,7 +7706,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#f9d1cf",
+            $value: "#f9d3d1",
             $description: "used on pill hover states and message bg",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -6047,7 +7715,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.status.negative.default}",
                   },
@@ -6143,7 +7811,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -6151,7 +7819,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#eb646c",
+              $value: "#ea626a",
               $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -6160,7 +7828,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -6186,7 +7854,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#E13E53",
                     format: "hex",
@@ -6194,7 +7862,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#3f1a1c",
+              $value: "#3d1a1c",
               $description: "used on pill hover states and message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -6203,7 +7871,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.status.negative.inverse.default}",
                     },
@@ -6294,7 +7962,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -6302,7 +7970,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#555",
+            $value: "#565656",
             $description: "used on pill hover states",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -6311,7 +7979,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -6330,7 +7998,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#656565",
                   format: "hex",
@@ -6338,7 +8006,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#d8d8d8",
+            $value: "#d9d9d9",
             $description: "used on pill hover states and message bg",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -6347,7 +8015,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.status.neutral.default}",
                   },
@@ -6572,7 +8240,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -6580,7 +8248,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#909090",
+              $value: "#8e8e8e",
               $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -6589,7 +8257,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -6608,7 +8276,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#7C7C7C",
                     format: "hex",
@@ -6616,7 +8284,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#252525",
+              $value: "#242424",
               $description: "used on pill hover states and message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -6625,7 +8293,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.status.neutral.inverse.default}",
                     },
@@ -6707,7 +8375,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -6715,7 +8383,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#0e6b1d",
+            $value: "#0e6d1d",
             $description: "used on pill hover states ",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -6724,7 +8392,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -6743,7 +8411,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#00811F",
                   format: "hex",
@@ -6751,7 +8419,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#c9e0c7",
+            $value: "#cbe1c9",
             $description: "used on pill hover states and message bg",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
@@ -6760,7 +8428,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.status.positive.default}",
                   },
@@ -6843,7 +8511,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.08",
+                    value: "0.10",
                     space: "lch",
                     color: "#FFFFFF ",
                     format: "hex",
@@ -6851,7 +8519,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#2b8b32",
+              $value: "#328e37",
               $description: "used on pill hover states",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -6860,7 +8528,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hoverAlt}",
+                      value: "{primitives.color.modifiers.button.hoverAlt}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastLess} ",
                     },
@@ -6886,7 +8554,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#009023",
                     format: "hex",
@@ -6894,7 +8562,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#132b12",
+              $value: "#132912",
               $description: "used on pill hover states and message bg",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
@@ -6903,7 +8571,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.status.positive.inverse.default}",
                     },
@@ -6926,80 +8594,6 @@ module.exports = {
             },
           },
         },
-        callout: {
-          defaultAlt: {
-            $extensions: {
-              "studio.tokens": {
-                modify: {
-                  type: "mix",
-                  value: "0.85",
-                  space: "lch",
-                  color: "#FFFFFF",
-                  format: "hex",
-                },
-              },
-            },
-            $type: "color",
-            $value: "#e5fae2",
-            $description: "used for marketing banners",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $extensions: {
-                "studio.tokens": {
-                  modify: {
-                    type: "mix",
-                    value: "0.85",
-                    space: "lch",
-                    color: "{modes.color.modifier.contrastLess}",
-                  },
-                },
-              },
-              $type: "color",
-              $value: "{primitives.colors.brilliantGreen}",
-              $description: "used for marketing banners",
-            },
-            name: "modesColorStatusCalloutDefaultAlt",
-            attributes: {},
-            path: ["modes", "color", "status", "callout", "defaultAlt"],
-          },
-          hoverAlt: {
-            $extensions: {
-              "studio.tokens": {
-                modify: {
-                  type: "mix",
-                  value: "0.05",
-                  space: "lch",
-                  color: "#000000",
-                  format: "hex",
-                },
-              },
-            },
-            $type: "color",
-            $value: "#d8ecd5",
-            $description: "used for marketing banners",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $extensions: {
-                "studio.tokens": {
-                  modify: {
-                    type: "mix",
-                    value: "0.05",
-                    space: "lch",
-                    color: "{modes.color.modifier.contrastMore}",
-                  },
-                },
-              },
-              $type: "color",
-              $value: "{modes.color.status.callout.defaultAlt}",
-              $description: "used for marketing banners",
-            },
-            name: "modesColorStatusCalloutHoverAlt",
-            attributes: {},
-            path: ["modes", "color", "status", "callout", "hoverAlt"],
-          },
-        },
         reviews: {
           default: {
             $type: "color",
@@ -7036,7 +8630,7 @@ module.exports = {
               "studio.tokens": {
                 modify: {
                   type: "mix",
-                  value: "0.16",
+                  value: "0.15",
                   space: "lch",
                   color: "#000000",
                   format: "hex",
@@ -7044,7 +8638,7 @@ module.exports = {
               },
             },
             $type: "color",
-            $value: "#0e6b1d",
+            $value: "#0e6d1d",
             filePath: "data/tokens/modes/light.json",
             isSource: true,
             original: {
@@ -7052,7 +8646,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "{modes.color.modifiers.button.hover}",
+                    value: "{primitives.color.modifiers.button.hover}",
                     space: "lch",
                     color: "{modes.color.modifier.contrastMore}",
                   },
@@ -7115,7 +8709,7 @@ module.exports = {
                 "studio.tokens": {
                   modify: {
                     type: "mix",
-                    value: "0.16",
+                    value: "0.15",
                     space: "lch",
                     color: "#000000",
                     format: "hex",
@@ -7123,7 +8717,7 @@ module.exports = {
                 },
               },
               $type: "color",
-              $value: "#0e6b3b",
+              $value: "#0d6c3c",
               filePath: "data/tokens/modes/light.json",
               isSource: true,
               original: {
@@ -7131,7 +8725,7 @@ module.exports = {
                   "studio.tokens": {
                     modify: {
                       type: "mix",
-                      value: "{modes.color.modifiers.button.hover}",
+                      value: "{primitives.color.modifiers.button.hover}",
                       space: "lch",
                       color: "{modes.color.modifier.contrastMore}",
                     },
@@ -7175,119 +8769,6 @@ module.exports = {
           path: ["modes", "color", "modifier", "contrastMore"],
         },
       },
-      modifiers: {
-        button: {
-          active: {
-            $type: "other",
-            $value: "0.32",
-            $description: "Actve modifier used when 16% hover is used",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.32",
-              $description: "Actve modifier used when 16% hover is used",
-            },
-            name: "modesColorModifiersButtonActive",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "button", "active"],
-          },
-          activeAlt: {
-            $type: "other",
-            $value: "0.16",
-            $description: "Active appled when 8% hover is used",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.16",
-              $description: "Active appled when 8% hover is used",
-            },
-            name: "modesColorModifiersButtonActiveAlt",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "button", "activeAlt"],
-          },
-          hover: {
-            $type: "other",
-            $value: "0.16",
-            $description: "Hover used on primary buttons",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.16",
-              $description: "Hover used on primary buttons",
-            },
-            name: "modesColorModifiersButtonHover",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "button", "hover"],
-          },
-          hoverAlt: {
-            $type: "other",
-            $value: "0.08",
-            $description: "Hover used on secondary and tertiary buttons",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.08",
-              $description: "Hover used on secondary and tertiary buttons",
-            },
-            name: "modesColorModifiersButtonHoverAlt",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "button", "hoverAlt"],
-          },
-        },
-        input: {
-          disabledBg: {
-            $type: "other",
-            $value: "0.04",
-            $description: "less contrast",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.04",
-              $description: "less contrast",
-            },
-            name: "modesColorModifiersInputDisabledBg",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "input", "disabledBg"],
-          },
-          disabledFg: {
-            $type: "other",
-            $value: "0.30",
-            $description: "less contrast",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.30",
-              $description: "less contrast",
-            },
-            name: "modesColorModifiersInputDisabledFg",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "input", "disabledFg"],
-          },
-        },
-        shadow: {
-          standard: {
-            $type: "other",
-            $value: "0.5",
-            $description: "standard mixer for shadow",
-            filePath: "data/tokens/modes/light.json",
-            isSource: true,
-            original: {
-              $type: "other",
-              $value: "0.5",
-              $description: "standard mixer for shadow",
-            },
-            name: "modesColorModifiersShadowStandard",
-            attributes: {},
-            path: ["modes", "color", "modifiers", "shadow", "standard"],
-          },
-        },
-      },
     },
   },
 };