Button styling and states (#35)

scss/buttons.scss

@@ -10,13 +10,14 @@
 .btn-primary,
 .btn-danger,
 .select-kit .select-kit-header {
-  padding: var(--spacing-block-s) var(--spacing-inline-m);
+  //using this hard coded value to make standalone icon-only btns perfect circles; I can't target the class no-text see below line 18
-  // font-size: var(--font-up-1-rem);
+  padding: var(--spacing-block-s) 0.665rem;
-  // border-radius: var(--d-button-border-radius);
 
-  &.no-text {
+  //theres buttons with text hidden that dont have the no-text class, and my :has workaround for some reason refuses to work
-    padding-inline: 0.665rem;
+  // &.no-text,
-  }
+  // .btn-icon-text:has(.d-button-label) {
+  //   padding-inline: 0.665rem;
+  // }
 }
 
 .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
@@ -37,20 +38,18 @@
 .discourse-no-touch .btn-default.sidebar-new-topic-button,
 .discourse-no-touch .interface-color-selector-content,
 .btn-default,
-.select-kit .select-kit-header {
+.btn-icon-text,
-  border: 1px solid var(--accent-color);
+.select-kit .select-kit-header.btn-default {
-  //id like to use rgba of the accent colour but how to derive that?
+  background: var(--primary-100);
-  // box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
-  background: var(--d-content-background);
 
   .d-icon {
-    color: var(--accent-color);
+    color: var(--tertiary);
   }
 
   &:hover {
     .discourse-no-touch & {
       border: 1px solid transparent;
-      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
+      box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
       background: var(--d-content-background);
       color: var(--accent-color);
       .d-icon {
@@ -62,24 +61,22 @@
     .discourse-no-touch & {
       background: var(--d-content-background);
       color: var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--d-content-background),
+      box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
-        0px 0px 0px 4px var(--button-box-shadow);
       .d-icon {
         color: var(--accent-color);
       }
     }
   }
-}
+  &:active:not(:hover, :focus) {
-//not shared with select-kit
+    color: var(--primary);
-.btn-default {
+    background: var(--tertiary-300);
-  &:active {
+    background-image: none;
-    color: var(--d-content-background);
-    background: oklch(from var(--accent-color) 30% c h) !important;
     .d-icon {
-      color: var(--d-content-background);
+      color: var(--tertiary-high);
     }
   }
 }
+
 .btn-primary,
 #create-topic.btn {
   background-color: var(--accent-color);
@@ -89,34 +86,17 @@
   }
   &:hover {
     .discourse-no-touch & {
-      background: radial-gradient(
+      background: oklch(from var(--accent-color) 40% c h) !important;
-          90% 110% at 50% 50%,
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
       box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
     }
   }
   &:focus-visible {
     .discourse-no-touch & {
-      background: radial-gradient(
+      background: oklch(from var(--accent-color) 40% c h) !important;
-          90% 110% at 50% 50%,
+      box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--d-content-background),
-        0px 0px 0px 4px var(--button-box-shadow);
     }
   }
   &:active {
-    // background: radial-gradient(
-    //     65% 95% at 50% 50%,
-    //     rgba(0, 0, 0, 0.4) 0%,
-    //     rgba(0, 0, 0, 0) 100%
-    //   ),
-    //   var(--accent-color) !important;
     background: oklch(from var(--accent-color) 30% c h) !important;
   }
 }

scss/color-exploration.scss

@@ -42,7 +42,7 @@
     oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
   );
   --button-box-shadow: light-dark(
-    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
     oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
   );
   --d-selected: light-dark(

scss/mobile-stuff.scss

@@ -66,10 +66,12 @@
         }
       }
       .navigation-controls {
+        @include breakpoint(mobile-extra-large) {
           gap: var(--spacing-inline-s);
         }
       }
     }
+  }
 
   .list-container {
     @include breakpoint(mobile-extra-large) {
@@ -201,6 +203,7 @@
   }
   .topic-admin-menu-trigger {
     border-radius: 0;
+    background: var(--secondary);
     border: 1px solid var(--tertiary-low);
   }
 }

scss/nav-pills.scss

@@ -20,7 +20,16 @@
     // font-size: var(--font-up-1-rem);
     &:hover {
       border: 1px solid var(--accent-color);
-      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
+    }
+    &:focus-visible {
+      .discourse-no-touch & {
+        background: var(--secondary);
+        color: var(--accent-color);
+        box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
+        .d-icon {
+          color: var(--accent-color);
+        }
+      }
     }
   }
   .select-kit.combo-box.category-drop.has-selection
@@ -36,6 +45,7 @@
 
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {
+  .discourse-no-touch & {
     background: transparent;
     color: var(--accent-color);
     &::after {
@@ -47,4 +57,5 @@
       height: var(--d-nav-underline-height);
       background: var(--accent-color);
     }
+  }
 }