Merge branch 'button-styles-fix' into storybook

Author: Vladimir Hrmo

components/buttons/_buttons.scss

@@ -1,14 +1,16 @@
 @use '../../sass/mixins.module.scss' as *;
 @use '../../sass/variables' as *;
 
-:root {
-  --btn-height: 40px;
-  --btn-font-size-icon: 16px;
-  --btn-padding: 24px;
-  --btn-padding-icon: 16px;
-  --btn-gap-icon: 8px;
-  --btn-border-radius: 4px;
-  --btn-font-size: 14px;
+@at-root {
+  :root {
+    --btn-height: 40px;
+    --btn-font-size-icon: 16px;
+    --btn-padding: 24px;
+    --btn-padding-icon: 16px;
+    --btn-gap-icon: 8px;
+    --btn-border-radius: 4px;
+    --btn-font-size: 14px;
+  }
 }
 
 .btn, .btn-floating, .btn-large, .btn-small, .btn-flat {
@@ -88,6 +90,7 @@
   // padding: 16px !important;
   // padding-right: 24px !important; /* only with icon */
   // gap: 8px;
+  @extend .btn;
   width: $button-floating-size;
   height: $button-floating-size;
   color: var(--md-sys-color-on-primary-container);
@@ -104,6 +107,7 @@
   transition: background-color .3s;
   cursor: pointer;
   vertical-align: middle;
+  text-align: center;
 
   &:hover {
     @extend .z-depth-1-half;
@@ -157,7 +161,7 @@
   }
 
   i {
-    color: $button-floating-color;
+    color: currentColor;
     font-size: 1.6rem;
     width: inherit;
     display: inline-block;

sass/mixins.module.scss

@@ -75,23 +75,23 @@
 }
 
 @mixin btn-elevated {
-  color: var(--md-sys-color-on-secondary-container);
-  background-color: var(--md-sys-color-secondary-container);
+  //color: var(--md-sys-color-on-secondary-container);
+  //background-color: var(--md-sys-color-secondary-container);
   @extend .z-depth-1;
 
   &:hover,
   &:focus {
-    color: var(--md-sys-color-primary);
+    //color: var(--md-sys-color-primary);
   }
 
   &:hover {
     @extend .z-depth-2;
-    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
+    //background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-on-secondary-container) 16%);
   }
 
   &:focus {
     @extend .z-depth-1;
-    background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
+    //background-color: color-mix(in srgb, var(--md-sys-color-secondary-container), var(--md-sys-color-primary) 20%);
   }
 
   @include focus-visible();
@@ -116,6 +116,11 @@
     border: 1px solid var(--md-sys-color-primary);
   }
 
+  &.disabled {
+    background-color: unset;
+    border-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  }
+
   @include focus-visible();
 }
 
@@ -137,13 +142,17 @@
     background-color: color-mix(in srgb, transparent, var(--md-sys-color-primary) 20%);
   }
 
+  &.disabled {
+    background-color: unset;
+  }
+
   @include focus-visible();
 }
 
 @mixin btn-disabled {
   @extend .z-depth-0;
-  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 76%);
-  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 24%);
+  color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 38%);
+  background-color: color-mix(in srgb, transparent, var(--md-sys-color-on-surface) 12%);
   pointer-events: none;
   box-shadow: none;
   cursor: default;