@ardium-ui/ui 5.0.0-alpha.8 → 5.0.0-alpha.80

package/prebuilt-themes/default/table.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAGA;EAEE;EACA,YCNG;EDmKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AExKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF9HF;EACE;;AAEF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAKR;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAKA;EACE;;AAEF;EACE;;AAMF;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE,kBCvFC;EDwFD;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AASJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOR;EACE;EACA;EACA;EACA,OC9HK;ED+HL,YC/IC;EDgJD;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;;AAiBF;EACE;EACA;;AAEF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAIF;EACE,OC/LC;;ADiMH;EACE;EACA,kBC1MD;;AD4MD;EACE;;AAKF;AAAA;AAAA;EAGE;;AAEF;EACE;EACA;;AAEA;EACE;;AAGJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEA;EACE;EACA;;AAIN;EACE;EACA;;AAGE;EACE;;AAIF;EACE;;AAUJ;AAAA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;;AAGJ;EACE;;AAGA;EACE;EACA;;AAGJ;EACE;;AAMF;EACE,YC1QsB;;ADgRxB;EACE;;AAGJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAQF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAOF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE","file":"table.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAGA;EAGE;IAKE;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;IACA;IA8JA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EC5MF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDlGA;IACE;;EAGF;AAAA;IAEE;;EAEA;AAAA;IACE;IACA;IACA;IACA;IACA;;EAEA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;IACE;IACA;IACA;;EAKR;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAIF;IACE;IACA;IACA;IACA;IACA;;EAGJ;IACE;;EAKA;IACE;;EAEF;IACE;;EAMF;AAAA;IAEE;;EAEF;IACE;;EAEF;IACE;;EAGJ;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAEA;IACE;IACA;IACA;;EAEA;IACE;;EASJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAOR;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAMF;IACE;;EAiBF;IACE;IACA;;EAEF;IACE;IACA;;EAIF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAIF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAKF;AAAA;AAAA;IAGE;;EAEF;IACE;IACA;;EACA;IACE;;EAGJ;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EACA;IACE;IACA;;EAEA;IACE;IACA;;EAIN;IACE;IACA;;EAGE;IACE;;EAIF;IACE;;EAUJ;AAAA;IACE;IACA;;EAGJ;IACE;;EAEA;IACE;;EAGJ;IACE;;EAGA;IACE;IACA;;EAGJ;IACE;;EAMF;IACE;;EAMF;IACE;;EAGJ;IACE;;EAEF;IACE;;EAIF;IACE;IACA;IACA;;EAIF;IACE;;EAKA;IACE;IACA;IACA;;EAQF;IACE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE;;EAOF;AAAA;AAAA;AAAA;IAEE;;EAMF;AAAA;AAAA;AAAA;IAEE;;EAMF;AAAA;AAAA;AAAA;IAEE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE","file":"table.css"}

package/public-api.d.ts

@@ -22,7 +22,6 @@ export * from './lib/slide-toggle';
 export * from './lib/slider';
 export * from './lib/star/rating-input';
 export * from './lib/star/star-button';
-export * from './lib/statebox';
 export * from './lib/calendar';
 export * from './lib/checkbox-list';
 export * from './lib/badge';
@@ -42,6 +41,7 @@ export * from './lib/table-pagination';
 export * from './lib/text-list';
 export * from './lib/card';
 export * from './lib/divider';
+export * from './lib/grid';
 export * from './lib/tabber';
 export * from './lib/dialog';
 export * from './lib/modal';
@@ -53,4 +53,5 @@ export * from './lib/types/colors.types';
 export * from './lib/types/item-storage.types';
 export * from './lib/types/theming.types';
 export * from './lib/types/utility.types';
+export * from './lib/breakpoints';
 export { searchFunctions as ArdSearchFunction, searchInString } from './lib/search-functions';

package/themes/_variables.scss

@@ -25,6 +25,7 @@ $lighten-overlay-medium: var(--ard-lighten-overlay-medium);
 $lighten-overlay-light: var(--ard-lighten-overlay-light);
 $darken-overlay: var(--ard-darken-overlay);
 $darken-overlay-strong: var(--ard-darken-overlay-strong);
+$darken-overlay-medium-strong: var(--ard-darken-overlay-medium-strong);
 $darken-overlay-medium: var(--ard-darken-overlay-medium);
 $darken-overlay-light: var(--ard-darken-overlay-light);
 $darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
@@ -40,7 +41,7 @@ $timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
 $clear-button-size: var(--ard-clear-button-size);
 $dropdown-button-size: var(--ard-dropdown-button-size);
 $form-field-height: var(--ard-form-field-height);
-$form-field-compact-height: var(--ard-form-field-compact-height);
+$form-field-compact-height: var(--ard-form-field-height-compact);
 
 $gold: var(--ard-gold);
 

package/themes/default/_coloring.scss

@@ -9,6 +9,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$bg-d};
     --ard-#{$prefix}--on-bg: #{ARD.$text};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$text};
     --ard-#{$prefix}--border-light: #{ARD.$text2};
     --ard-#{$prefix}--content: #{ARD.$text};
@@ -26,6 +27,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$main50};
     --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$main300};
     --ard-#{$prefix}--border-light: #{ARD.$main100};
     --ard-#{$prefix}--content: #{ARD.$main700};
@@ -43,6 +45,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$scnd50};
     --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$scnd300};
     --ard-#{$prefix}--border-light: #{ARD.$scnd100};
     --ard-#{$prefix}--content: #{ARD.$scnd700};
@@ -60,6 +63,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$warn50};
     --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$warn300};
     --ard-#{$prefix}--border-light: #{ARD.$warn100};
     --ard-#{$prefix}--content: #{ARD.$warn700};
@@ -77,6 +81,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$danger50};
     --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$danger300};
     --ard-#{$prefix}--border-light: #{ARD.$danger100};
     --ard-#{$prefix}--content: #{ARD.$danger900};
@@ -94,6 +99,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$success50};
     --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$success300};
     --ard-#{$prefix}--border-light: #{ARD.$success100};
     --ard-#{$prefix}--content: #{ARD.$success900};
@@ -111,6 +117,7 @@
     --ard-#{$prefix}--bg-colored-verylight: #{ARD.$info50};
     --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
     --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
     --ard-#{$prefix}--border: #{ARD.$info300};
     --ard-#{$prefix}--border-light: #{ARD.$info100};
     --ard-#{$prefix}--content: #{ARD.$info700};

package/themes/default/_mixins.scss

@@ -10,12 +10,12 @@
     'opsz' #{$opsz};
 }
 
-@mixin focus-overlay($size: 0) {
+@mixin focus-overlay($size: 0px) {
   position: absolute;
-  top: -#{$size};
-  bottom: -#{$size};
-  left: -#{$size};
-  right: -#{$size};
+  top: calc(-1 * #{$size});
+  bottom: calc(-1 * #{$size});
+  left: calc(-1 * #{$size});
+  right: calc(-1 * #{$size});
   opacity: 0;
   border-radius: inherit;
   pointer-events: none;

package/themes/default/badge.scss

@@ -1,94 +1,129 @@
 @use './coloring' as CM;
 
-.ard-badge-host {
-  position: relative;
-}
-.ard-badge {
-  @include CM.typeColors();
-  position: absolute;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-badge-small-font-size: 0.55rem;
+    // --ard-badge-small-size: ;
+    --ard-badge-small-font-weight: 400;
+    --ard-badge-small-letter-spacing: 0.2px;
+    // --ard-badge-small-rounded-radius: ;
 
-  //! colors
-  background: var(--ard-cmpcl--bg-colored);
-  color: var(--ard-cmpcl--on-bg-colored);
+    --ard-badge-medium-font-size: 0.667rem;
+    // --ard-badge-medium-size: ;
+    --ard-badge-medium-font-weight: 500;
+    --ard-badge-medium-letter-spacing: 0.2px;
+    // --ard-badge-medium-rounded-radius: ;
 
-  //! variants
-  &.ard-variant-pill {
-    border-radius: 9999px;
-  }
-  &.ard-variant-rounded {
-    border-radius: calc(var(--ard-_badge-size) * 0.25);
-  }
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
+    --ard-badge-large-font-size: 0.8125rem;
+    // --ard-badge-large-size: ;
+    --ard-badge-large-font-weight: 600;
+    --ard-badge-large-letter-spacing: 0.2px;
+    // --ard-badge-large-rounded-radius: ;
 
-  //! hidden
-  &.ard-badge-hidden {
-    display: none;
+    --ard-badge-overlap-offset: 0.3em;
   }
 
-  //! sizes
-  font-size: var(--ard-_badge-size);
-  min-width: calc(var(--ard-_badge-size) * 1.375);
-  height: calc(var(--ard-_badge-size) * 1.375);
+  .ard-badge-host {
+    position: relative;
+  }
+  .ard-badge {
+    @include CM.typeColors();
+    position: absolute;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
 
-  .ard-badge-content {
-    padding: 0 calc(var(--ard-_badge-size) * 0.5);
-  }
+    //! colors
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
 
-  &.ard-badge-size-small {
-    --ard-_badge-size: 0.55rem;
-    font-weight: 400;
-    letter-spacing: 0.2px;
-  }
-  &.ard-badge-size-medium {
-    --ard-_badge-size: 0.667rem;
-    font-weight: 500;
-    letter-spacing: 0.2px;
-  }
-  &.ard-badge-size-large {
-    --ard-_badge-size: 0.8125rem;
-    font-weight: 600;
-    letter-spacing: 0.2px;
-  }
+    //! variants
+    &.ard-variant-pill {
+      border-radius: 9999px;
+    }
+    &.ard-variant-rounded {
+      border-radius: var(--ard-_badge-radius);
+    }
+    &.ard-variant-sharp {
+      border-radius: 0;
+    }
 
-  //! overlap
-  --ard-_badge-overlap-offset-x: 0.3em;
+    //! hidden
+    &.ard-badge-hidden {
+      display: none;
+    }
 
-  &.ard-badge-overlap {
-    --ard-_badge-overlap-offset-x: 50%;
-  }
-  &.ard-badge-position-above-before {
-    transform: translate(var(--ard-_badge-overlap-offset-x), 50%);
-  }
-  &.ard-badge-position-above-after {
-    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), 50%);
-  }
-  &.ard-badge-position-below-after {
-    transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), -50%);
-  }
-  &.ard-badge-position-below-before {
-    transform: translate(var(--ard-_badge-overlap-offset-x), -50%);
-  }
+    //! sizes
+    font-size: var(--ard-_badge-font-size);
+    min-width: var(--ard-_badge-size);
+    height: var(--ard-_badge-size);
 
-  //! positions
-  &.ard-badge-position-above-before,
-  &.ard-badge-position-below-before {
-    right: 100%;
-  }
-  &.ard-badge-position-above-after,
-  &.ard-badge-position-below-after {
-    left: 100%;
-  }
-  &.ard-badge-position-below-before,
-  &.ard-badge-position-below-after {
-    top: 100%;
-  }
-  &.ard-badge-position-above-before,
-  &.ard-badge-position-above-after {
-    bottom: 100%;
+    .ard-badge-content {
+      padding: 0 var(--ard-_badge-padding);
+    }
+
+    &.ard-badge-size-small {
+      --ard-_badge-font-size: var(--ard-badge-small-font-size, 0.55rem);
+      --ard-_badge-size: var(--ard-badge-small-size, calc(var(--ard-badge-small-font-size) * 1.375));
+      --ard-_badge-padding: calc(var(--ard-badge-small-font-size) * 0.5);
+      --ard-_badge-radius: var(--ard-badge-small-rounded-radius, calc(var(--ard-badge-small-font-size) * 0.25));
+      font-weight: var(--ard-badge-small-font-weight, 400);
+      letter-spacing: var(--ard-badge-small-letter-spacing, 0.2px);
+    }
+    &.ard-badge-size-medium {
+      --ard-_badge-font-size: var(--ard-badge-medium-font-size, 0.667rem);
+      --ard-_badge-size: var(--ard-badge-medium-size, calc(var(--ard-badge-medium-font-size) * 1.375));
+      --ard-_badge-padding: calc(var(--ard-badge-medium-font-size) * 0.5);
+      --ard-_badge-radius: var(--ard-badge-medium-rounded-radius, calc(var(--ard-badge-medium-font-size) * 0.25));
+      font-weight: var(--ard-badge-medium-font-weight, 500);
+      letter-spacing: var(--ard-badge-medium-letter-spacing, 0.2px);
+    }
+    &.ard-badge-size-large {
+      --ard-_badge-font-size: var(--ard-badge-large-font-size, 0.8125rem);
+      --ard-_badge-size: var(--ard-badge-large-size, calc(var(--ard-badge-large-font-size) * 1.375));
+      --ard-_badge-padding: calc(var(--ard-badge-large-font-size) * 0.5);
+      --ard-_badge-radius: var(--ard-badge-large-rounded-radius, calc(var(--ard-badge-large-font-size) * 0.25));
+      font-weight: var(--ard-badge-large-font-weight, 600);
+      letter-spacing: var(--ard-badge-large-letter-spacing, 0.2px);
+    }
+
+    //! overlap
+    --ard-_badge-overlap-offset-x: var(--ard-badge-overlap-offset, 0.3em);
+
+    &.ard-badge-overlap {
+      --ard-_badge-overlap-offset-x: 50%;
+    }
+    &.ard-badge-position-above-before {
+      transform: translate(var(--ard-_badge-overlap-offset-x), 50%);
+    }
+    &.ard-badge-position-above-after {
+      transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), 50%);
+    }
+    &.ard-badge-position-below-after {
+      transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), -50%);
+    }
+    &.ard-badge-position-below-before {
+      transform: translate(var(--ard-_badge-overlap-offset-x), -50%);
+    }
+
+    //! positions
+    &.ard-badge-position-above-before,
+    &.ard-badge-position-below-before {
+      right: 100%;
+    }
+    &.ard-badge-position-above-after,
+    &.ard-badge-position-below-after {
+      left: 100%;
+    }
+    &.ard-badge-position-below-before,
+    &.ard-badge-position-below-after {
+      top: 100%;
+    }
+    &.ard-badge-position-above-before,
+    &.ard-badge-position-above-after {
+      bottom: 100%;
+    }
   }
 }

package/themes/default/buttons/_button-mixins.scss

@@ -2,42 +2,54 @@
 @use '../coloring' as coloringMixins;
 @use '../../variables' as ARD;
 
-@mixin button {
+@mixin button(
+  $margin,
+  $padding,
+  $font-size,
+  $font-weight,
+  $hover-opacity,
+  $focus-opacity,
+  $active-opacity,
+  $focus-visible-opacity
+) {
   @include coloringMixins.typeColors();
-  font-family: 'Roboto', sans-serif;
-  margin: 2px;
+  font-family: var(--ard-font-family);
+  margin: $margin;
+  padding: $padding;
   border: 1px solid transparent;
-  font-weight: 500;
+  font-weight: $font-weight;
+  font-size: $font-size;
   display: inline-flex;
   align-items: center;
   position: relative;
   cursor: pointer;
   outline: none;
 
-  //! button icon
-  .ard-button-icon {
-    @include defaultMixins.icon(1);
-  }
   //! button focus inficator
-  .ard-focus-overlay {
+  &::before {
+    content: '';
     @include defaultMixins.focus-overlay;
     background-color: var(--ard-cmpcl--overlay);
   }
-  &:hover,
+  &:hover {
+    &::before {
+      opacity: $hover-opacity;
+    }
+  }
   &:focus {
-    .ard-focus-overlay {
-      opacity: 4%;
+    &::before {
+      opacity: $focus-opacity;
     }
   }
   &.ard-active,
   &:active {
-    .ard-focus-overlay {
-      opacity: 12%;
+    &::before {
+      opacity: $active-opacity;
     }
   }
   &:focus-visible {
-    .ard-focus-overlay {
-      opacity: 18%;
+    &::before {
+      opacity: $focus-visible-opacity;
     }
   }
   //! button appearances
@@ -47,7 +59,7 @@
     color: var(--ard-cmpcl--content);
     border: none;
 
-    .ard-focus-overlay {
+    &::before {
       background: var(--ard-cmpcl--overlay-colored);
     }
   }
@@ -70,7 +82,7 @@
     color: var(--ard-cmpcl--content);
     border: 1px solid ARD.$border-light;
 
-    .ard-focus-overlay {
+    &::before {
       background: var(--ard-cmpcl--overlay-colored);
     }
   }
@@ -79,13 +91,11 @@
     color: var(--ard-cmpcl--content);
     border: 1px solid ARD.$border-light;
 
-    .ard-focus-overlay {
+    &::before {
       display: none;
     }
 
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.2s ease;
     &:hover,
     &:focus-visible {
       background: var(--ard-cmpcl--bg-colored);
@@ -94,11 +104,11 @@
   }
   &.ard-appearance-flat,
   &.ard-appearance-raised-strong {
-    background: var(--ard-cmpcl--bg);
-    color: var(--ard-cmpcl--on-bg);
-    border: none;
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
 
-    .ard-focus-overlay {
+    &::before {
       background: var(--ard-cmpcl--on-bg);
     }
     &:focus-visible {
@@ -109,20 +119,20 @@
   &.ard-appearance-transparent.ard-light-coloring {
     color: var(--ard-cmpcl--content-light);
 
-    .ard-focus-overlay {
+    &::before {
       background: var(--ard-cmpcl--overlay-colored-light);
     }
   }
 }
 
 //! disabled state
-@mixin button-disabled {
+@mixin button-disabled($opacity, $overlay-opacity) {
   pointer-events: none;
-  opacity: 60%;
+  opacity: $opacity;
   cursor: not-allowed;
 
-  .ard-focus-overlay {
-    opacity: 20%;
+  &::before {
+    opacity: $overlay-opacity;
     transform: scale(1);
   }
 
@@ -130,9 +140,9 @@
   &.ard-color-none {
     .ard-button-icon,
     .ard-button-content {
-      opacity: 60%;
+      opacity: $opacity;
     }
-    .ard-focus-overlay {
+    &::before {
       background: var(--ard-cmpcl--overlay);
     }
   }