@ardium-ui/ui 1.0.0

package/themes/_variables.scss

@@ -0,0 +1,121 @@
+$bg: var(--ard-bg);
+$bg-alt: var(--ard-bg-alt);
+$overlay: var(--ard-overlay);
+$overlay-rgb: var(--ard-overlay-rgb);
+$bg-d: var(--ard-bg-darker);
+$bg-f: var(--ard-bg-filled);
+$bg-f-alt: var(--ard-bg-filled-alt);
+$text: var(--ard-text);
+$text2: var(--ard-text2);
+$text3: var(--ard-text3);
+$text-alt: var(--ard-text-alt);
+$text2-alt: var(--ard-text2-alt);
+$text3-alt: var(--ard-text3-alt);
+$border-dark: var(--ard-border-dark);
+$border: var(--ard-border);
+$border-light: var(--ard-border-light);
+$detail: var(--ard-detail);
+$detail-light: var(--ard-detail-light);
+$detail-ultralight: var(--ard-detail-ultralight);
+$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
+
+$lighten-overlay: var(--ard-lighten-overlay);
+$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
+$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: var(--ard-darken-overlay-medium);
+$darken-overlay-light: var(--ard-darken-overlay-light);
+$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
+
+$box-shadow: var(--ard-box-shadow);
+$card-shadow: var(--ard-card-shadow);
+$simple-shadow: var(--ard-simple-shadow);
+$simple-shadow2: var(--ard-simple-shadow2);
+$simple-shadow3: var(--ard-simple-shadow3);
+
+$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);
+
+$star: var(--ard-star);
+
+$main50: rgb(var(--ard-primary-50));
+$main50-rgb: var(--ard-primary-50);
+$main100: rgb(var(--ard-primary-100));
+$main100-rgb: var(--ard-primary-100);
+$main300: rgb(var(--ard-primary-300));
+$main300-rgb: var(--ard-primary-300);
+$main500: rgb(var(--ard-primary-500));
+$main500-rgb: var(--ard-primary-500);
+$main700: rgb(var(--ard-primary-700));
+$main700-rgb: var(--ard-primary-700);
+$main900: rgb(var(--ard-primary-900));
+$main900-rgb: var(--ard-primary-900);
+
+$scnd50: rgb(var(--ard-secondary-50));
+$scnd50-rgb: var(--ard-secondary-50);
+$scnd100: rgb(var(--ard-secondary-100));
+$scnd100-rgb: var(--ard-secondary-100);
+$scnd300: rgb(var(--ard-secondary-300));
+$scnd300-rgb: var(--ard-secondary-300);
+$scnd500: rgb(var(--ard-secondary-500));
+$scnd500-rgb: var(--ard-secondary-500);
+$scnd700: rgb(var(--ard-secondary-700));
+$scnd700-rgb: var(--ard-secondary-700);
+$scnd900: rgb(var(--ard-secondary-900));
+$scnd900-rgb: var(--ard-secondary-900);
+
+$danger50: rgb(var(--ard-danger-50));
+$danger50-rgb: var(--ard-danger-50);
+$danger100: rgb(var(--ard-danger-100));
+$danger100-rgb: var(--ard-danger-100);
+$danger300: rgb(var(--ard-danger-300));
+$danger300-rgb: var(--ard-danger-300);
+$danger500: rgb(var(--ard-danger-500));
+$danger500-rgb: var(--ard-danger-500);
+$danger700: rgb(var(--ard-danger-700));
+$danger700-rgb: var(--ard-danger-700);
+$danger900: rgb(var(--ard-danger-900));
+$danger900-rgb: var(--ard-danger-900);
+
+$warn50: rgb(var(--ard-warn-50));
+$warn50-rgb: var(--ard-warn-50);
+$warn100: rgb(var(--ard-warn-100));
+$warn100-rgb: var(--ard-warn-100);
+$warn300: rgb(var(--ard-warn-300));
+$warn300-rgb: var(--ard-warn-300);
+$warn500: rgb(var(--ard-warn-500));
+$warn500-rgb: var(--ard-warn-500);
+$warn700: rgb(var(--ard-warn-700));
+$warn700-rgb: var(--ard-warn-700);
+$warn900: rgb(var(--ard-warn-900));
+$warn900-rgb: var(--ard-warn-900);
+
+$success50: rgb(var(--ard-success-50));
+$success50-rgb: var(--ard-success-50);
+$success100: rgb(var(--ard-success-100));
+$success100-rgb: var(--ard-success-100);
+$success300: rgb(var(--ard-success-300));
+$success300-rgb: var(--ard-success-300);
+$success500: rgb(var(--ard-success-500));
+$success500-rgb: var(--ard-success-500);
+$success700: rgb(var(--ard-success-700));
+$success700-rgb: var(--ard-success-700);
+$success900: rgb(var(--ard-success-900));
+$success900-rgb: var(--ard-success-900);
+
+$info50: rgb(var(--ard-info-50));
+$info50-rgb: var(--ard-info-50);
+$info100: rgb(var(--ard-info-100));
+$info100-rgb: var(--ard-info-100);
+$info300: rgb(var(--ard-info-300));
+$info300-rgb: var(--ard-info-300);
+$info500: rgb(var(--ard-info-500));
+$info500-rgb: var(--ard-info-500);
+$info700: rgb(var(--ard-info-700));
+$info700-rgb: var(--ard-info-700);
+$info900: rgb(var(--ard-info-900));
+$info900-rgb: var(--ard-info-900);

package/themes/default/_clear-button.scss

@@ -0,0 +1,73 @@
+@use './mixins' as defaultMixins;
+@import '../variables';
+
+@mixin clearButton() {
+    ard-_clear-button {
+        height: $clear-button-size;
+        width: $clear-button-size;
+        position: relative;
+    }
+
+    .ard-clear-btn-wrapper {
+        cursor: pointer;
+        font-size: medium;
+        color: $detail;
+        width: $clear-button-size;
+        height: $clear-button-size;
+        line-height: 1em;
+        border-radius: 999px;
+        border: none;
+        padding: 0;
+        background: transparent;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        outline: none;
+        color: inherit;
+
+        .ard-hitbox {
+            position: absolute;
+            left: -1px;
+            right: -1px;
+            top: -1px;
+            bottom: -1px;
+        }
+
+        .ard-focus-overlay {
+            @include defaultMixins.focus-overlay(1px);
+            background: currentColor;
+        }
+
+        .ard-clear-btn {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            &::before {
+                content: 'close';
+                @include defaultMixins.icon;
+                font-size: 70%;
+            }
+        }
+
+        &:hover {
+            .ard-focus-overlay {
+                opacity: 5%;
+            }
+        }
+
+        &:focus {
+            .ard-focus-overlay {
+                opacity: 8%;
+            }
+        }
+
+        &:active {
+            .ard-focus-overlay {
+                opacity: 15%;
+            }
+        }
+    }
+}

package/themes/default/_coloring.scss

@@ -0,0 +1,137 @@
+@import '../variables';
+
+@mixin typeColors($prefix: 'cmpcl') {
+    &.ard-color-none {
+        --ard-#{$prefix}--bg: #{$bg};
+        --ard-#{$prefix}--bg-colored: #{$bg-alt};
+        --ard-#{$prefix}--bg-colored-light: #{$detail-light};
+        --ard-#{$prefix}--bg-header: #{$bg-f};
+        --ard-#{$prefix}--bg-colored-verylight: #{$bg-d};
+        --ard-#{$prefix}--on-bg: #{$text};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$text};
+        --ard-#{$prefix}--border-light: #{$text2};
+        --ard-#{$prefix}--content: #{$text};
+        --ard-#{$prefix}--content-light: #{$text-alt};
+        --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$overlay};
+        --ard-#{$prefix}--overlay-colored-light: #{$text-alt};
+    }
+    &.ard-color-primary {
+        --ard-#{$prefix}--bg: #{$main500};
+        --ard-#{$prefix}--bg-colored: #{$main500};
+        --ard-#{$prefix}--bg-colored-light: #{$main100};
+        --ard-#{$prefix}--bg-header: #{$main100};
+        --ard-#{$prefix}--bg-colored-verylight: #{$main50};
+        --ard-#{$prefix}--on-bg: #{$text-alt};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$main300};
+        --ard-#{$prefix}--border-light: #{$main100};
+        --ard-#{$prefix}--content: #{$main700};
+        --ard-#{$prefix}--content-light: #{$main300};
+        --ard-#{$prefix}--overlay-rgb: #{$main500-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$main700};
+        --ard-#{$prefix}--overlay-colored-light: #{$main100};
+    }
+    &.ard-color-secondary {
+        --ard-#{$prefix}--bg: #{$scnd500};
+        --ard-#{$prefix}--bg-colored: #{$scnd500};
+        --ard-#{$prefix}--bg-colored-light: #{$scnd50};
+        --ard-#{$prefix}--bg-header: #{$scnd50};
+        --ard-#{$prefix}--bg-colored-verylight: #{$scnd50};
+        --ard-#{$prefix}--on-bg: #{$text-alt};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$scnd300};
+        --ard-#{$prefix}--border-light: #{$scnd100};
+        --ard-#{$prefix}--content: #{$scnd700};
+        --ard-#{$prefix}--content-light: #{$scnd300};
+        --ard-#{$prefix}--overlay-rgb: #{$scnd500-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$scnd700};
+        --ard-#{$prefix}--overlay-colored-light: #{$scnd100};
+    }
+    &.ard-color-warn {
+        --ard-#{$prefix}--bg: #{$warn500};
+        --ard-#{$prefix}--bg-colored: #{$warn500};
+        --ard-#{$prefix}--bg-colored-light: #{$warn50};
+        --ard-#{$prefix}--bg-header: #{$warn50};
+        --ard-#{$prefix}--bg-colored-verylight: #{$warn50};
+        --ard-#{$prefix}--on-bg: #{$text-alt};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$warn300};
+        --ard-#{$prefix}--border-light: #{$warn100};
+        --ard-#{$prefix}--content: #{$warn700};
+        --ard-#{$prefix}--content-light: #{$warn100};
+        --ard-#{$prefix}--overlay-rgb: #{$warn500-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$warn700};
+        --ard-#{$prefix}--overlay-colored-light: #{$warn100};
+    }
+    &.ard-color-danger {
+        --ard-#{$prefix}--bg: #{$danger700};
+        --ard-#{$prefix}--bg-colored: #{$danger700};
+        --ard-#{$prefix}--bg-colored-light: #{$danger100};
+        --ard-#{$prefix}--bg-header: #{$danger100};
+        --ard-#{$prefix}--bg-colored-verylight: #{$danger50};
+        --ard-#{$prefix}--on-bg: #{$text-alt};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$danger300};
+        --ard-#{$prefix}--border-light: #{$danger100};
+        --ard-#{$prefix}--content: #{$danger900};
+        --ard-#{$prefix}--content-light: #{$danger500};
+        --ard-#{$prefix}--overlay-rgb: #{$danger700-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$danger700};
+        --ard-#{$prefix}--overlay-colored-light: #{$danger300};
+    }
+    &.ard-color-success {
+        --ard-#{$prefix}--bg: #{$success700};
+        --ard-#{$prefix}--bg-colored: #{$success700};
+        --ard-#{$prefix}--bg-colored-light: #{$success50};
+        --ard-#{$prefix}--bg-header: #{$success50};
+        --ard-#{$prefix}--bg-colored-verylight: #{$success50};
+        --ard-#{$prefix}--on-bg: #{$text-alt};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$success300};
+        --ard-#{$prefix}--border-light: #{$success100};
+        --ard-#{$prefix}--content: #{$success900};
+        --ard-#{$prefix}--content-light: #{$success300};
+        --ard-#{$prefix}--overlay-rgb: #{$success700-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$success700};
+        --ard-#{$prefix}--overlay-colored-light: #{$success300};
+    }
+    &.ard-color-info {
+        --ard-#{$prefix}--bg: #{$info500};
+        --ard-#{$prefix}--bg-colored: #{$info500};
+        --ard-#{$prefix}--bg-colored-light: #{$info50};
+        --ard-#{$prefix}--bg-header: #{$info50};
+        --ard-#{$prefix}--bg-colored-verylight: #{$info50};
+        --ard-#{$prefix}--on-bg: #{$text-alt};
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: #{$info300};
+        --ard-#{$prefix}--border-light: #{$info100};
+        --ard-#{$prefix}--content: #{$info700};
+        --ard-#{$prefix}--content-light: #{$info300};
+        --ard-#{$prefix}--overlay-rgb: #{$info500-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: #{$info700};
+        --ard-#{$prefix}--overlay-colored-light: #{$info100};
+    }
+    &.ard-color-currentColor {
+        --ard-#{$prefix}--bg: #{$bg};
+        --ard-#{$prefix}--bg-colored: currentColor;
+        --ard-#{$prefix}--on-bg: currentColor;
+        --ard-#{$prefix}--on-bg-colored: #{$text-alt};
+        --ard-#{$prefix}--border: currentColor;
+        --ard-#{$prefix}--border-light: currentColor;
+        --ard-#{$prefix}--content: currentColor;
+        --ard-#{$prefix}--content-light: currentColor;
+        --ard-#{$prefix}--overlay-rgb: #{$overlay-rgb};
+        --ard-#{$prefix}--overlay: #{$overlay};
+        --ard-#{$prefix}--overlay-colored: currentColor;
+        --ard-#{$prefix}--overlay-colored-light: currentColor;
+    }
+}

package/themes/default/_dropdown-arrow.scss

@@ -0,0 +1,12 @@
+@import '../variables';
+
+@mixin dropdown-arrow($size: $dropdown-button-size) {
+    width: $size;
+    height: $size;
+    border: calc($size / 2) solid transparent;
+    position: relative;
+    border-bottom-color: $detail;
+    border-right-color: $detail;
+    transform: rotate(45deg) translate(-17.67771%, -17.67771%);
+    box-sizing: border-box;
+}

package/themes/default/_mixins.scss

@@ -0,0 +1,70 @@
+@import '../variables';
+
+@mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
+    font-family: 'Material Symbols Outlined';
+    font-size: 1.5em;
+    font-variation-settings:
+        'FILL' #{$fill},
+        'wght' #{$wght},
+        'GRAD' #{$grad},
+        'opsz' #{$opsz};
+}
+
+@mixin focus-overlay($size: 0) {
+    position: absolute;
+    top: -#{$size};
+    bottom: -#{$size};
+    left: -#{$size};
+    right: -#{$size};
+    opacity: 0;
+    border-radius: inherit;
+    pointer-events: none;
+
+    transition: opacity 0.2s ease;
+}
+@mixin focus-overlay-scale-addon() {
+    > .ard-focus-overlay {
+        transform: scale(0.2);
+
+        transition:
+            opacity 0.2s ease,
+            transform 0.1s ease;
+    }
+
+    &:hover,
+    &:focus {
+        > .ard-focus-overlay {
+            transform: scale(1);
+        }
+    }
+}
+
+@mixin formAppearances() {
+    &.ard-appearance-outlined {
+        --ard-appearance-background: #{$bg};
+        --ard-appearance-border: 1px solid #{$border};
+    }
+    &.ard-appearance-filled {
+        --ard-appearance-background: #{$bg-f};
+        --ard-appearance-border: none;
+    }
+    &.ard-appearance-transparent {
+        --ard-appearance-background: transparent;
+        --ard-appearance-border: none;
+    }
+}
+
+@mixin formVariants() {
+    border-radius: var(--ard-variant-border-radius);
+
+    &.ard-variant-rounded,
+    &.ard-variant-semirounded {
+        --ard-variant-border-radius: 8px;
+    }
+    &.ard-variant-pill {
+        --ard-variant-border-radius: 9999px;
+    }
+    &.ard-variant-sharp {
+        --ard-variant-border-radius: 0;
+    }
+}

package/themes/default/badge.scss

@@ -0,0 +1,94 @@
+@use './coloring' as CM;
+
+.ard-badge-host {
+    position: relative;
+}
+.ard-badge {
+    @include CM.typeColors();
+    position: absolute;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+
+    //! colors
+    background: var(--ard-cmpcl--bgcolored);
+    color: var(--ard-cmpcl--on-bg-colored);
+
+    //! 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;
+    }
+
+    //! hidden
+    &.ard-badge-hidden {
+        display: none;
+    }
+
+    //! 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-content {
+        padding: 0 calc(var(--ard-_badge-size) * 0.5);
+    }
+
+    &.ard-badge-size-small {
+        --ard-_badge-size: 0.55rem;
+        font-weight: 300;
+        letter-spacing: 0.2px;
+    }
+    &.ard-badge-size-medium {
+        --ard-_badge-size: 0.667rem;
+        font-weight: 400;
+        letter-spacing: 0.2px;
+    }
+    &.ard-badge-size-large {
+        --ard-_badge-size: 0.8125rem;
+        font-weight: 500;
+        letter-spacing: 0.2px;
+    }
+
+    //! overlap
+    --ard-_badge-overlap-offset-x: 0%;
+
+    &.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

@@ -0,0 +1,144 @@
+@use '../mixins' as defaultMixins;
+@use '../coloring' as coloringMixins;
+@import '../../variables';
+
+@mixin button {
+    @include coloringMixins.typeColors();
+    font-family: 'Roboto', sans-serif;
+    margin: 2px;
+    border: 1px solid transparent;
+    font-weight: 500;
+    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 {
+        @include defaultMixins.focus-overlay;
+        background-color: var(--ard-cmpcl--overlay);
+    }
+    &:hover,
+    &:focus {
+        .ard-focus-overlay {
+            opacity: 4%;
+        }
+    }
+    &.ard-active,
+    &:active {
+        .ard-focus-overlay {
+            opacity: 12%;
+        }
+    }
+    &:focus-visible {
+        .ard-focus-overlay {
+            opacity: 18%;
+        }
+    }
+    //! button appearances
+    &.ard-appearance-transparent,
+    &.ard-appearance-raised {
+        background: transparent;
+        color: var(--ard-cmpcl--content);
+        border: none;
+
+        .ard-focus-overlay {
+            background: var(--ard-cmpcl--overlay-colored);
+        }
+    }
+    &.ard-appearance-flat,
+    &.ard-appearance-raised-strong {
+        background: var(--ard-cmpcl--bg);
+        color: var(--ard-cmpcl--on-bg);
+        border: none;
+
+        .ard-focus-overlay {
+            background: var(--ard-cmpcl--on-bg);
+        }
+    }
+    &.ard-appearance-raised,
+    &.ard-appearance-raised-strong {
+        transition: box-shadow 0.28s $timing-fn;
+        box-shadow: $simple-shadow;
+
+        &:hover,
+        &:focus {
+            box-shadow: $simple-shadow2;
+        }
+        &:active {
+            box-shadow: $simple-shadow3;
+        }
+    }
+    &.ard-appearance-outlined {
+        background: $bg;
+        color: var(--ard-cmpcl--content);
+        border: 1px solid $border-light;
+
+        .ard-focus-overlay {
+            background: var(--ard-cmpcl--overlay-colored);
+        }
+    }
+    &.ard-appearance-outlined-strong {
+        background: $bg;
+        color: var(--ard-cmpcl--content);
+        border: 1px solid $border-light;
+
+        .ard-focus-overlay {
+            display: none;
+        }
+
+        transition:
+            background-color 0.2s ease,
+            color 0.2s ease;
+        &:hover,
+        &:focus,
+        &:focus-visible {
+            background: var(--ard-cmpcl--bg-colored);
+            color: var(--ard-cmpcl--on-bg-colored);
+        }
+    }
+    &.ard-appearance-raised-strong,
+    &.ard-appearance-flat {
+        .ard-focus-overlay {
+            background: var(--ard-cmpcl--on-bg);
+        }
+        &:focus-visible {
+            outline: solid black;
+        }
+    }
+    //! light coloring
+    &.ard-appearance-transparent.ard-light-coloring {
+        color: var(--ard-cmpcl--content-light);
+
+        .ard-focus-overlay {
+            background: var(--ard-cmpcl--overlay-colored-light);
+        }
+    }
+}
+
+//! disabled state
+@mixin button-disabled {
+    pointer-events: none;
+    opacity: 60%;
+
+    .ard-focus-overlay {
+        opacity: 20%;
+        transform: scale(1);
+    }
+
+    //edge case for no coloring
+    &.ard-color-none {
+        .ard-button-icon,
+        .ard-button-content {
+            opacity: 60%;
+        }
+        .ard-focus-overlay {
+            background: var(--ard-cmpcl--overlay);
+        }
+    }
+}