create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-ui-primitive/button/button-colors.scss

@@ -0,0 +1,613 @@
+.tiptap-button {
+  /************************************************** 
+      Default button background color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-bg-color: var(--tt-gray-light-a-100);
+  --tt-button-hover-bg-color: var(--tt-gray-light-200);
+  --tt-button-active-bg-color: var(--tt-gray-light-a-200);
+  --tt-button-active-bg-color-emphasized: var(
+    --tt-brand-color-100
+  ); //more important active state
+  --tt-button-active-bg-color-subdued: var(
+    --tt-gray-light-a-200
+  ); //less important active state
+  --tt-button-active-hover-bg-color: var(--tt-gray-light-300);
+  --tt-button-active-hover-bg-color-emphasized: var(
+    --tt-brand-color-200
+  ); //more important active state hover
+  --tt-button-active-hover-bg-color-subdued: var(
+    --tt-gray-light-a-300
+  ); //less important active state hover
+  --tt-button-disabled-bg-color: var(--tt-gray-light-a-50);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-bg-color: var(--tt-gray-dark-a-100);
+    --tt-button-hover-bg-color: var(--tt-gray-dark-200);
+    --tt-button-active-bg-color: var(--tt-gray-dark-a-200);
+    --tt-button-active-bg-color-emphasized: var(
+      --tt-brand-color-900
+    ); //more important active state
+    --tt-button-active-bg-color-subdued: var(
+      --tt-gray-dark-a-200
+    ); //less important active state
+    --tt-button-active-hover-bg-color: var(--tt-gray-dark-300);
+    --tt-button-active-hover-bg-color-emphasized: var(
+      --tt-brand-color-800
+    ); //more important active state hover
+    --tt-button-active-hover-bg-color-subdued: var(
+      --tt-gray-dark-a-300
+    ); //less important active state hover
+    --tt-button-disabled-bg-color: var(--tt-gray-dark-a-50);
+  }
+
+  /************************************************** 
+      Default button text color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-text-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-text-color: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+  --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+  --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-text-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+  }
+
+  /************************************************** 
+      Default button icon color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-icon-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
+  --tt-button-active-icon-color: var(--tt-brand-color-500);
+  --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+  --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
+  --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
+    --tt-button-active-icon-color: var(--tt-brand-color-400);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
+    --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
+    --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
+  }
+
+  /************************************************** 
+      Default button subicon color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
+  --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
+  --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
+  --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+  --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
+  --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
+    --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+  }
+
+  /************************************************** 
+      Default button dropdown / arrows color 
+  **************************************************/
+
+  /* Light mode */
+  --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
+  --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
+  --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
+  --tt-button-active-dropdown-arrows-color-emphasized: var(
+    --tt-gray-light-a-700
+  );
+  --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-light-a-600);
+  --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+  /* Dark mode */
+  .dark & {
+    --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+    --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-dark-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(--tt-gray-dark-a-600);
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+  }
+
+  /* ----------------------------------------------------------------
+      --------------------------- CHECK BUTTON --------------------------
+      ---------------------------------------------------------------- */
+
+  &[data-variant="check"] {
+    /* Light mode */
+    --tt-button-check-bg-color: var(--tt-gray-light-a-100);
+    --tt-button-check-hover-bg-color: var(--white);
+    --tt-button-check-border-color: var(--tt-gray-light-a-200);
+    --tt-button-check-hover-border-color: var(--tt-gray-light-a-300);
+    --tt-button-check-checked-bg-color: var(--tt-gray-light-a-900);
+    --tt-button-check-checked-border-color: var(--tt-gray-light-a-900);
+    --tt-button-check-checked-text-color: var(--tt-gray-light-a-900);
+    --tt-button-check-checked-icon-color: var(--white);
+    --tt-button-check-focus-ring-color: color-mix(
+      in srgb,
+      var(--tt-brand-color-500) 20%,
+      transparent
+    );
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-check-bg-color: var(--tt-gray-dark-a-100);
+      --tt-button-check-hover-bg-color: var(--tt-gray-dark-a-100);
+      --tt-button-check-border-color: var(--tt-gray-dark-a-200);
+      --tt-button-check-hover-border-color: var(--tt-gray-dark-a-300);
+      --tt-button-check-checked-bg-color: var(--tt-gray-dark-a-900);
+      --tt-button-check-checked-border-color: var(--tt-gray-dark-a-900);
+      --tt-button-check-checked-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-check-checked-icon-color: var(--black);
+      --tt-button-check-focus-ring-color: color-mix(
+        in srgb,
+        var(--tt-brand-color-400) 25%,
+        transparent
+      );
+    }
+  }
+
+  /* ----------------------------------------------------------------
+      --------------------- GHOST / TERTIARY BUTTON ---------------------
+      ---------------------------------------------------------------- */
+
+  /* Tertiary currently mirrors ghost. The design system separates the two
+     only inside the toggle-switch variant, which this primitive does not
+     implement, so both map to the same tokens here. */
+  &[data-style="ghost"],
+  &[data-style="tertiary"] {
+    /************************************************** 
+        Ghost button background color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-bg-color: var(--transparent);
+    --tt-button-hover-bg-color: var(--tt-gray-light-200);
+    --tt-button-active-bg-color: var(--tt-gray-light-a-100);
+    --tt-button-active-bg-color-emphasized: var(
+      --tt-brand-color-100
+    ); //more important active state
+    --tt-button-active-bg-color-subdued: var(
+      --tt-gray-light-a-100
+    ); //less important active state
+    --tt-button-active-hover-bg-color: var(--tt-gray-light-200);
+    --tt-button-active-hover-bg-color-emphasized: var(
+      --tt-brand-color-200
+    ); //more important active state hover
+    --tt-button-active-hover-bg-color-subdued: var(
+      --tt-gray-light-a-200
+    ); //less important active state hover
+    --tt-button-disabled-bg-color: var(--transparent);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--transparent);
+      --tt-button-hover-bg-color: var(--tt-gray-dark-200);
+      --tt-button-active-bg-color: var(--tt-gray-dark-a-100);
+      --tt-button-active-bg-color-emphasized: var(
+        --tt-brand-color-900
+      ); //more important active state
+      --tt-button-active-bg-color-subdued: var(
+        --tt-gray-dark-a-100
+      ); //less important active state
+      --tt-button-active-hover-bg-color: var(--tt-gray-dark-200);
+      --tt-button-active-hover-bg-color-emphasized: var(
+        --tt-brand-color-800
+      ); //more important active state hover
+      --tt-button-active-hover-bg-color-subdued: var(
+        --tt-gray-dark-a-200
+      ); //less important active state hover
+      --tt-button-disabled-bg-color: var(--transparent);
+    }
+
+    /************************************************** 
+        Ghost button text color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-text-color: var(--tt-gray-light-a-600);
+    --tt-button-hover-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-text-color: var(--tt-gray-dark-a-600);
+      --tt-button-hover-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+    }
+
+    /************************************************** 
+        Ghost button icon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-color: var(--tt-gray-light-a-600);
+    --tt-button-hover-icon-color: var(--tt-gray-light-a-900);
+    --tt-button-active-icon-color: var(--tt-brand-color-500);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-color: var(--tt-gray-dark-a-600);
+      --tt-button-hover-icon-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-icon-color: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-emphasized: var(--tt-brand-color-300);
+      --tt-button-active-icon-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-icon-color: var(--tt-gray-dark-a-400);
+    }
+
+    /************************************************** 
+        Ghost button subicon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-sub-color: var(--tt-gray-light-a-400);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color: var(--tt-gray-light-a-400);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-400);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+      --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+    }
+
+    /************************************************** 
+        Ghost button dropdown / arrows color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-dropdown-arrows-color: var(--tt-gray-light-a-600);
+    --tt-button-hover-dropdown-arrows-color: var(--tt-gray-light-a-700);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-600);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(
+      --tt-gray-light-a-600
+    );
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-hover-dropdown-arrows-color: var(--tt-gray-dark-a-700);
+      --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-active-dropdown-arrows-color-emphasized: var(
+        --tt-gray-dark-a-700
+      );
+      --tt-button-active-dropdown-arrows-color-subdued: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+    }
+  }
+
+  /* ----------------------------------------------------------------
+      -------------------------- PRIMARY BUTTON -------------------------
+      ---------------------------------------------------------------- */
+
+  &[data-style="primary"] {
+    /************************************************** 
+        Primary button background color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-bg-color: var(--tt-brand-color-500);
+    --tt-button-hover-bg-color: var(--tt-brand-color-600);
+    --tt-button-active-bg-color: var(--tt-brand-color-100);
+    --tt-button-active-bg-color-emphasized: var(
+      --tt-brand-color-100
+    ); //more important active state
+    --tt-button-active-bg-color-subdued: var(
+      --tt-brand-color-100
+    ); //less important active state
+    --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
+    --tt-button-active-hover-bg-color-emphasized: var(
+      --tt-brand-color-200
+    ); //more important active state hover
+    --tt-button-active-hover-bg-color-subdued: var(
+      --tt-brand-color-200
+    ); //less important active state hover
+    --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--tt-brand-color-500);
+      --tt-button-hover-bg-color: var(--tt-brand-color-600);
+      --tt-button-active-bg-color: var(--tt-brand-color-900);
+      --tt-button-active-bg-color-emphasized: var(
+        --tt-brand-color-900
+      ); //more important active state
+      --tt-button-active-bg-color-subdued: var(
+        --tt-brand-color-900
+      ); //less important active state
+      --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
+      --tt-button-active-hover-bg-color-emphasized: var(
+        --tt-brand-color-800
+      ); //more important active state hover
+      --tt-button-active-hover-bg-color-subdued: var(
+        --tt-brand-color-800
+      ); //less important active state hover
+      --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
+    }
+
+    /************************************************** 
+        Primary button text color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-text-color: var(--white);
+    --tt-button-hover-text-color: var(--white);
+    --tt-button-active-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-text-color: var(--white);
+      --tt-button-hover-text-color: var(--white);
+      --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+    }
+
+    /************************************************** 
+        Primary button icon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-color: var(--white);
+    --tt-button-hover-icon-color: var(--white);
+    --tt-button-active-icon-color: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
+    --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-color: var(--white);
+      --tt-button-hover-icon-color: var(--white);
+      --tt-button-active-icon-color: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
+      --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
+    }
+
+    /************************************************** 
+        Primary button subicon color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-500);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
+    --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
+      --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-500);
+      --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+      --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+    }
+
+    /************************************************** 
+        Primary button dropdown / arrows color 
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-dropdown-arrows-color: var(--white);
+    --tt-button-hover-dropdown-arrows-color: var(--white);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-dropdown-arrows-color: var(--white);
+      --tt-button-hover-dropdown-arrows-color: var(--white);
+      --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-active-dropdown-arrows-color-emphasized: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-active-dropdown-arrows-color-subdued: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+    }
+  }
+
+  /* ----------------------------------------------------------------
+      ------------------------- SECONDARY BUTTON ------------------------
+      ---------------------------------------------------------------- */
+
+  /* Solid neutral button. The fill is dark in light mode and light in dark
+     mode, following the same inversion as the checked check-button. The
+     active / pressed state adopts the brand-tinted selected treatment, so it
+     reuses the primary button's active tokens. */
+  &[data-style="secondary"] {
+    /**************************************************
+        Secondary button background color
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-bg-color: var(--tt-gray-light-800);
+    --tt-button-hover-bg-color: var(--tt-gray-light-900);
+    --tt-button-active-bg-color: var(--tt-brand-color-100);
+    --tt-button-active-bg-color-emphasized: var(--tt-brand-color-100);
+    --tt-button-active-bg-color-subdued: var(--tt-brand-color-100);
+    --tt-button-active-hover-bg-color: var(--tt-brand-color-200);
+    --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-200);
+    --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-200);
+    --tt-button-disabled-bg-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-bg-color: var(--tt-gray-dark-800);
+      --tt-button-hover-bg-color: var(--tt-gray-dark-900);
+      --tt-button-active-bg-color: var(--tt-brand-color-900);
+      --tt-button-active-bg-color-emphasized: var(--tt-brand-color-900);
+      --tt-button-active-bg-color-subdued: var(--tt-brand-color-900);
+      --tt-button-active-hover-bg-color: var(--tt-brand-color-800);
+      --tt-button-active-hover-bg-color-emphasized: var(--tt-brand-color-800);
+      --tt-button-active-hover-bg-color-subdued: var(--tt-brand-color-800);
+      --tt-button-disabled-bg-color: var(--tt-gray-dark-a-100);
+    }
+
+    /**************************************************
+        Secondary button text color
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-text-color: var(--white);
+    --tt-button-hover-text-color: var(--white);
+    --tt-button-active-text-color: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-emphasized: var(--tt-gray-light-a-900);
+    --tt-button-active-text-color-subdued: var(--tt-gray-light-a-900);
+    --tt-button-disabled-text-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-text-color: var(--black);
+      --tt-button-hover-text-color: var(--black);
+      --tt-button-active-text-color: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-emphasized: var(--tt-gray-dark-a-900);
+      --tt-button-active-text-color-subdued: var(--tt-gray-dark-a-900);
+      --tt-button-disabled-text-color: var(--tt-gray-dark-a-300);
+    }
+
+    /**************************************************
+        Secondary button icon color
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-color: var(--white);
+    --tt-button-hover-icon-color: var(--white);
+    --tt-button-active-icon-color: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-emphasized: var(--tt-brand-color-600);
+    --tt-button-active-icon-color-subdued: var(--tt-brand-color-600);
+    --tt-button-disabled-icon-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-color: var(--black);
+      --tt-button-hover-icon-color: var(--black);
+      --tt-button-active-icon-color: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-emphasized: var(--tt-brand-color-400);
+      --tt-button-active-icon-color-subdued: var(--tt-brand-color-400);
+      --tt-button-disabled-icon-color: var(--tt-gray-dark-a-300);
+    }
+
+    /**************************************************
+        Secondary button subicon color
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-hover-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-button-active-icon-sub-color-subdued: var(--tt-gray-light-a-500);
+    --tt-button-disabled-icon-sub-color: var(--tt-gray-light-a-100);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-icon-sub-color: var(--tt-gray-dark-a-400);
+      --tt-button-hover-icon-sub-color: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color: var(--tt-gray-dark-a-300);
+      --tt-button-active-icon-sub-color-emphasized: var(--tt-gray-dark-a-400);
+      --tt-button-active-icon-sub-color-subdued: var(--tt-gray-dark-a-300);
+      --tt-button-disabled-icon-sub-color: var(--tt-gray-dark-a-100);
+    }
+
+    /**************************************************
+        Secondary button dropdown / arrows color
+    **************************************************/
+
+    /* Light mode */
+    --tt-button-default-dropdown-arrows-color: var(--white);
+    --tt-button-hover-dropdown-arrows-color: var(--white);
+    --tt-button-active-dropdown-arrows-color: var(--tt-gray-light-a-700);
+    --tt-button-active-dropdown-arrows-color-emphasized: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-active-dropdown-arrows-color-subdued: var(
+      --tt-gray-light-a-700
+    );
+    --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-light-a-400);
+
+    /* Dark mode */
+    .dark & {
+      --tt-button-default-dropdown-arrows-color: var(--black);
+      --tt-button-hover-dropdown-arrows-color: var(--black);
+      --tt-button-active-dropdown-arrows-color: var(--tt-gray-dark-a-600);
+      --tt-button-active-dropdown-arrows-color-emphasized: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-active-dropdown-arrows-color-subdued: var(
+        --tt-gray-dark-a-600
+      );
+      --tt-button-disabled-dropdown-arrows-color: var(--tt-gray-dark-a-400);
+    }
+  }
+
+  /* ----------------------------------------------------------------
+      -------------------------- SUBTLE BUTTON --------------------------
+      ---------------------------------------------------------------- */
+
+  /* Subtle is the neutral default. It inherits the base tokens declared on
+     `.tiptap-button` above (faint gray fill, gray text), so `data-style="subtle"`
+     needs no overrides. It is named here only for documentation. */
+}