fix text color names

src/components/Button/Button.tsx

@@ -51,9 +51,9 @@ export const Button = <T extends ElementType = typeof DEFAULT_BUTTON_TAG>({
         }),
         variantClassNames(variant, {
           primary:
-            "ink-bg-button-primary ink-text-text-on-button-primary hover:ink-bg-button-primary-hover disabled:ink-bg-button-primary-disabled disabled:ink-text-text-on-button-primary-disabled active:ink-bg-button-primary-pressed",
+            "ink-bg-button-primary ink-text-text-on-primary hover:ink-bg-button-primary-hover disabled:ink-bg-button-primary-disabled disabled:ink-text-text-on-primary-disabled active:ink-bg-button-primary-pressed",
           secondary:
-            "ink-bg-button-secondary ink-text-text-on-button-secondary hover:ink-bg-button-secondary-hover disabled:ink-bg-button-secondary-disabled disabled:ink-text-text-on-button-secondary-disabled active:ink-bg-button-secondary-pressed",
+            "ink-bg-button-secondary ink-text-text-on-secondary hover:ink-bg-button-secondary-hover disabled:ink-bg-button-secondary-disabled disabled:ink-text-text-on-secondary-disabled active:ink-bg-button-secondary-pressed",
         }),
         className
       )}

src/components/SegmentedControl/SegmentedControl.tsx

@@ -91,7 +91,7 @@ export const SegmentedControl = <T extends string>({
               "ink-px-4 ink-py-2 ink-rounded-full ink-relative ink-z-10 ink-transition-colors ink-duration-200 ink-select-none",
               selectedOption === option.value
                 ? "ink-text-text-default"
-                : "ink-text-text-on-button-secondary"
+                : "ink-text-text-on-secondary"
             )}
             ref={(el) => {
               itemsRef.current[index] = el;

src/styles/Colors.stories.tsx

@@ -3,8 +3,8 @@ import { classNames } from "../util/classes";
 
 function Colors() {
   const colors = [
-    "ink-bg-button-primary ink-text-text-on-button-primary",
-    "ink-bg-button-secondary ink-text-text-on-button-secondary",
+    "ink-bg-button-primary ink-text-text-on-primary",
+    "ink-bg-button-secondary ink-text-text-on-secondary",
     "ink-bg-background-dark",
     "ink-bg-background-dark-transparent",
     "ink-bg-background-light",

src/styles/colors.css

@@ -50,16 +50,16 @@
     var(--ink-text-default),
     transparent 50%
   );
-  --ink-text-on-button-primary: rgb(255, 255, 255);
-  --ink-text-on-button-primary-disabled: color-mix(
+  --ink-text-on-primary: rgb(255, 255, 255);
+  --ink-text-on-primary-disabled: color-mix(
     in srgb,
-    var(--ink-text-on-button-primary),
+    var(--ink-text-on-primary),
     transparent 60%
   );
-  --ink-text-on-button-secondary: rgb(113, 50, 245);
-  --ink-text-on-button-secondary-disabled: color-mix(
+  --ink-text-on-secondary: rgb(113, 50, 245);
+  --ink-text-on-secondary-disabled: color-mix(
     in srgb,
-    var(--ink-text-on-button-secondary),
+    var(--ink-text-on-secondary),
     transparent 50%
   );
 

tailwind.config.mjs

@@ -47,12 +47,10 @@ const config = {
       text: {
         default: "var(--ink-text-default)",
         muted: "var(--ink-text-muted)",
-        "on-button-primary": "var(--ink-text-on-button-primary)",
-        "on-button-primary-disabled":
-          "var(--ink-text-on-button-primary-disabled)",
-        "on-button-secondary": "var(--ink-text-on-button-secondary)",
-        "on-button-secondary-disabled":
-          "var(--ink-text-on-button-secondary-disabled)",
+        "on-primary": "var(--ink-text-on-primary)",
+        "on-primary-disabled": "var(--ink-text-on-primary-disabled)",
+        "on-secondary": "var(--ink-text-on-secondary)",
+        "on-secondary-disabled": "var(--ink-text-on-secondary-disabled)",
       },
       status: {
         success: "var(--ink-status-success)",