chore: miscellaneous element style updates

ably · Nov 27, 2024 · a563d16 · a563d16
1 parent 671b0d2
commit a563d16
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css
@@ -36,19 +36,19 @@
   }
 
   .ui-button-primary-base {
-    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1200 active:bg-neutral-1100 ui-button-disabled-base;
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 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;
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 ui-button-disabled-base-dark;
   }
 
   .ui-button-secondary-base {
-    @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;
+    @apply text-neutral-1300 hover:text-neutral-1100 active:text-neutral-1200 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 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;
+    @apply text-neutral-000 hover:text-neutral-200 active:text-neutral-100 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
   }
 
   .ui-button-priority-lg {

diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css
@@ -14,7 +14,12 @@
   .ui-checkbox-styled {
     @apply w-20 h-20 mr-16;
     @apply bg-white flex flex-shrink-0 justify-center items-center;
-    @apply border border-dark-grey rounded-md focus-within:border-active-orange;
+    @apply border border-neutral-500 rounded-md focus-within:border-active-orange;
+  }
+
+  .ui-theme-dark .ui-checkbox-styled,
+  .ui-theme-dark .ui-checkbox-input:focus + .ui-checkbox-styled {
+    @apply border-neutral-900;
   }
 
   .ui-checkbox-styled-tick {
@@ -45,7 +50,11 @@
   }
 
   .ui-checkbox-input:disabled + .ui-checkbox-styled {
-    @apply bg-gui-unavailable border;
+    @apply bg-neutral-400 border;
+  }
+
+  .ui-theme-dark .ui-checkbox-input:checked + .ui-checkbox-styled {
+    @apply bg-neutral-1000 border-gui-unavailable-dark;
   }
 
   .ui-textarea {
@@ -100,24 +109,20 @@
   }
 
   .ui-input {
-    @apply ui-text-p2 font-medium bg-light-grey rounded p-input w-full leading-none appearance-none border border-mid-grey transition-colors placeholder-neutral-800;
-    @apply hover:border-neutral-800 focus:bg-white focus:outline-gui-focus;
-    @apply max-w-screen-sm;
+    @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
+    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus;
+    @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
-  .ui-input-dark {
-    @apply bg-neutral-1200 hover:bg-neutral-1200 focus:bg-neutral-1000 text-neutral-300;
+  .ui-theme-dark .ui-input {
+    @apply bg-neutral-1200 hover:bg-neutral-1000 focus:bg-neutral-1000 text-neutral-300 border-neutral-900 placeholder-neutral-700;
   }
 
   .ui-input:disabled {
     @apply bg-gui-unavailable placeholder-neutral-500 text-neutral-500;
   }
 
-  .ui-input-dark:disabled {
-    @apply text-neutral-800 placeholder-neutral-800;
-  }
-
-  .ui-input {
-    @apply invalid:border-gui-error-red;
+  .ui-theme-dark .ui-input:disabled {
+    @apply bg-gui-unavailable-dark text-neutral-800 placeholder-neutral-800;
   }
 }
diff --git a/src/core/styles/legacy-buttons.css b/src/core/styles/legacy-buttons.css
@@ -1,8 +1,8 @@
 @layer components {
   .ui-btn {
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply hover:text-white hover:bg-active-orange;
-    @apply active:text-white active:bg-red-orange;
+    @apply hover:text-white hover:bg-neutral-1100;
+    @apply active:text-white active:bg-neutral-1200;
     @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;

diff --git a/src/core/styles/properties.css b/src/core/styles/properties.css
@@ -258,7 +258,6 @@
     --spacing-media: 0.5rem; /* 8px */
     --spacing-input: 0.8125rem 1rem 0.75rem; /* 13px 16px 12px */
     --spacing-overline: 0.6875rem 0; /* 11px 0 */
-    --spacing-inline-code: 0.375rem 0.5rem; /* 6px 8px */
 
     /* In components, when looking at implementing viewport margin and spacing between elements,
        the values in the comments can be used as guide as they represent the grid the elements (should) sit on.

diff --git a/src/core/styles/text.css b/src/core/styles/text.css
@@ -127,7 +127,11 @@
   }
 
   .ui-text-code-inline {
-    @apply font-mono font-normal text-code text-charcoal-grey bg-light-grey p-inline-code rounded-sm mx-1;
+    @apply inline-flex font-mono px-[3px] py-4 text-code text-neutral-1000 font-medium bg-neutral-200 border border-neutral-400 rounded-md;
+  }
+
+  .dark .ui-text-code-inline {
+    @apply text-neutral-300 bg-neutral-1000 border-neutral-900;
   }
 
   .ui-unordered-list {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -220,7 +220,6 @@ module.exports = {
       media: "var(--spacing-media)",
       input: "var(--spacing-input)",
       overline: "var(--spacing-overline)",
-      "inline-code": "var(--spacing-inline-code)",
       ...theme("spacing"),
     }),
     spacing: {