From 80b42cd73f4f1555eb42cbf9e6d17c82ebc11478 Mon Sep 17 00:00:00 2001
From: Jamie Henson <jamie.henson@ably.com>
Date: Fri, 22 Nov 2024 17:44:43 +0000
Subject: [PATCH] fix: rewrite button css to avoid dark prefixes due to bug
 with apply

---
 package.json                |  2 +-
 src/core/styles/buttons.css | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index a5e6df706..1b22773c7 100644
--- 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
index eda974c31..96907b2d2 100644
--- 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-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-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 {