refactor: Update shared base styles

1 files changed, 18 insertions, 34 deletions

diff --git a/apps/web-shared/src/styles/custom-style/_buttons.scss b/apps/web-shared/src/styles/custom-style/_buttons.scss
index 6d8e867..2145acc 100644
--- a/apps/web-shared/src/styles/custom-style/_buttons.scss
+++ b/apps/web-shared/src/styles/custom-style/_buttons.scss
@@ -7,35 +7,29 @@
 // --------------------------------
 
 :root {
-  --btn-font-size: 1em;
+  --btn-font-size: 1rem;
   --btn-padding-x: var(--space-xs);
   --btn-padding-y: var(--space-xxxs);
-  --btn-radius: var(--radius-sm);
+  --btn-radius: 5px;
 }
 
 .btn {
   background: var(--color-bg-dark);
   color: var(--color-contrast-higher);
   cursor: pointer;
+  font-family: var(--font-primary);
+  font-weight: 400;
   text-decoration: none;
-  line-height: 1.2;
+  line-height: 0.8;
   @include fontSmooth;
-  will-change: transform;
+  outline: none;
 
-  &:focus {
-    box-shadow: 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.15);
-    outline: none;
+  &:hover {
+    background: var(--color-bg-darker);
   }
-}
-
-.btn--link {
-  @include reset;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
 
-  &:hover {
-    color: var(--color-primary);
+  &:focus {
+    outline: 1px solid var(--color-contrast-lower);
   }
 }
 
@@ -46,36 +40,26 @@
 
   &:hover {
     background: var(--color-primary-light);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25);
   }
 }
 
 .btn--subtle {
-  background: var(--color-bg-light);
+  background: var(--color-bg-lighter);
   color: var(--color-contrast-higher);
-  box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-xs);
 
   &:hover {
-    background: var(--color-bg-lighter);
-    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), var(--shadow-sm);
-  }
-
-  &:focus {
-    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower), 0px 0px 0px 2px alpha(var(--color-contrast-higher), 0.05);
+    background: var(--color-bg-light);
   }
 }
 
 .btn--accent {
   background: var(--color-accent);
   color: var(--color-white);
-  box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-xs);
 
   &:hover {
     background: var(--color-accent-light);
-    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), var(--shadow-sm);
-  }
-
-  &:focus {
-    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 0px 0px 2px alpha(var(--color-accent), 0.2);
+    box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1);
   }
 }
 
@@ -87,19 +71,19 @@
 
 // size
 .btn--sm {
-  font-size: 0.8em;
+  font-size: 0.8rem;
 }
 
 .btn--md {
-  font-size: 1.2em;
+  font-size: 1.2rem;
 }
 
 .btn--lg {
-  font-size: 1.4em;
+  font-size: 1.4rem;
 }
 
 // --------------------------------
 
 // (END) Global editor code
 
-// --------------------------------
+// --------------------------------
\ No newline at end of file