fix: rewrite button css to avoid dark prefixes due to bug with apply

ably · Nov 22, 2024 · 1879f9f · 1879f9f
1 parent 2ff97eb
commit 1879f9f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.0.0",
+  "version": "15.0.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css
@@ -20,19 +20,35 @@
   }
 
   .ui-button-disabled-base {
-    @apply disabled:bg-gui-unavailable dark:disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable-dark dark:disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable dark:disabled:hover:bg-gui-unavailable-dark;
+    @apply disabled:bg-gui-unavailable disabled:text-gui-unavailable-dark disabled:hover:bg-gui-unavailable;
+  }
+
+  .ui-button-disabled-base-dark {
+    @apply disabled:bg-gui-unavailable-dark disabled:text-gui-unavailable disabled:hover:bg-gui-unavailable-dark;
   }
 
   .ui-button-priority-base {
     @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base;
   }
 
+  .ui-theme-dark .ui-button-priority-base {
+    @apply bg-gradient-active-orange hover:bg-gradient-to-r hover:from-orange-800 hover:to-orange-800 active:bg-gradient-to-r active:from-orange-800 active:to-orange-800 disabled:bg-none ui-button-disabled-base-dark;
+  }
+
   .ui-button-primary-base {
-    @apply bg-neutral-1300 dark:bg-neutral-000 text-neutral-000 dark:text-neutral-1300 hover:bg-neutral-1200 dark:hover:bg-neutral-100 active:bg-neutral-1100 dark:active:bg-neutral-200 ui-button-disabled-base;
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1200 active:bg-neutral-1100 ui-button-disabled-base ui-button-disabled-base;
+  }
+
+  .ui-theme-dark .ui-button-primary-base {
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-100 active:bg-neutral-200 ui-button-disabled-base ui-button-disabled-base-dark;
   }
 
   .ui-button-secondary-base {
-    @apply text-neutral-1300 dark:text-neutral-000 border border-neutral-600 dark:border-neutral-700 hover:border-neutral-700 dark:hover:border-neutral-600 active:border-neutral-400 dark:active:border-neutral-800 active:text-neutral-1000 dark:active:text-neutral-300 disabled:border-gui-unavailable dark:disabled:border-gui-unavailable-dark disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark;
+    @apply text-neutral-1300 border border-neutral-600 hover:border-neutral-700 active:border-neutral-400 active:text-neutral-1000 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+  }
+
+  .ui-theme-dark .ui-button-secondary-base {
+    @apply text-neutral-000 border-neutral-700 hover:border-neutral-600 active:border-neutral-800 active:text-neutral-300 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
   }
 
   .ui-button-priority-lg {