Update styles for buttons, selects, color scheme

Author: rossta

app/javascript/css/application.css

@@ -22,6 +22,7 @@
 
 @import './components/logo.css';
 @import './components/button.css';
+@import './components/select.css';
 @import './components/code.scss';
 @import './components/page-header.css';
 @import './components/skip-to-content.css';
@@ -32,4 +33,4 @@
 @import './components/newsletter-banner.css';
 @import './components/anchors.scss';
 @import './components/callout.css';
-@import './components/color-theme.scss';
+@import './components/color-scheme.scss';

app/javascript/css/components/button.css

@@ -1,14 +1,15 @@
 .button {
+  border: 1px solid var(--joy-border-subtle);
   border-radius: 0.375rem;
-  padding: 0.625rem 0.75rem;
+  padding: 0.75rem;
   display: inline-flex;
   align-items: center;
   font-size: 0.875rem;
   font-family: var(--sans-serif);
   line-height: 1.5715;
   font-weight: 600;
   color: var(--joy-light);
-  line-height: inherit;
+  line-height: 1rem;
 
   &:is(a) {
     text-decoration: none;
@@ -23,6 +24,7 @@
     display: none;
   }
   &.primary {
+    border: 1px solid var(--joy-button-primary);
     background-color: var(--joy-button-primary);
 
     &:hover {
@@ -34,13 +36,24 @@
   }
   &.secondary {
     background-color: var(--joy-button-secondary);
+    color: var(--joy-text);
     &:hover {
       background-color: var(--joy-button-secondary-hover);
     }
     &:active {
       background-color: var(--joy-button-secondary-active);
     }
   }
+  &.tertiary {
+    border: 1px solid var(--joy-button-tertiary);
+    background-color: var(--joy-button-tertiary);
+    &:hover {
+      background-color: var(--joy-button-tertiary-hover);
+    }
+    &:active {
+      background-color: var(--joy-button-tertiary-active);
+    }
+  }
   &.warn {
     background-color: var(--joy-button-warn);
     &:hover {

app/javascript/css/components/color-theme.scss renamed to app/javascript/css/components/color-scheme.scss

@@ -1,14 +1,14 @@
 @import '../config/variables.scss';
 
-.color-theme {
+.color-scheme {
   color: var(--joy-background-clean);
   display: flex;
   flex-direction: column;
   border-radius: 0.5rem;
 }
 
 @media screen and (min-width: $screen-md) {
-  .color-theme {
+  .color-scheme {
     flex-direction: row;
   }
 }

app/javascript/css/components/select.css

@@ -0,0 +1,6 @@
+select {
+  font-size: 0.875rem;
+  padding: 0.625rem;
+  border-radius: 0.5rem;
+  display: block;
+}

app/javascript/css/config/theme.css

@@ -43,7 +43,7 @@
 
   --joy-text: var(--color-dark);
   --joy-text-subtle: var(--color-stone-700);
-  --joy-text-emphasis: var(--joy-color-700);
+  --joy-text-emphasis: var(--joy-color-500);
   --joy-text-heading: var(--color-slate-900);
   --joy-text-theme: var(--joy-color-800);
 
@@ -55,9 +55,12 @@
   --joy-button-primary: var(--joy-color-600);
   --joy-button-primary-hover: var(--joy-color-700);
   --joy-button-primary-active: var(--joy-color-800);
-  --joy-button-secondary: var(--color-slate-400);
-  --joy-button-secondary-hover: var(--color-slate-500);
-  --joy-button-secondary-active: var(--color-slate-600);
+  --joy-button-secondary: var(--joy-light);
+  --joy-button-secondary-hover: var(--joy-color-50);
+  --joy-button-secondary-active: var(--joy-color-100);
+  --joy-button-tertiary: var(--color-slate-400);
+  --joy-button-tertiary-hover: var(--color-slate-500);
+  --joy-button-tertiary-active: var(--color-slate-600);
   --joy-button-warn: var(--color-red-500);
   --joy-button-warn-hover: var(--color-red-400);
 }