@ardium-ui/ui 4.1.1 → 4.2.0

package/themes/default/_clear-button.scss

@@ -1,73 +1,73 @@
-@use './mixins' as defaultMixins;
-@use '../variables' as ARD;
-
-@mixin clearButton() {
-  ard-clear-button {
-    height: ARD.$clear-button-size;
-    width: ARD.$clear-button-size;
-    position: relative;
-  }
-
-  .ard-clear-btn-wrapper {
-    cursor: pointer;
-    font-size: medium;
-    color: ARD.$detail;
-    width: ARD.$clear-button-size;
-    height: ARD.$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%;
-      }
-    }
-  }
-}
+@use './mixins' as defaultMixins;
+@use '../variables' as ARD;
+
+@mixin clearButton() {
+  ard-clear-button {
+    height: ARD.$clear-button-size;
+    width: ARD.$clear-button-size;
+    position: relative;
+  }
+
+  .ard-clear-btn-wrapper {
+    cursor: pointer;
+    font-size: medium;
+    color: ARD.$detail;
+    width: ARD.$clear-button-size;
+    height: ARD.$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

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

package/themes/default/_dropdown-arrow.scss

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

package/themes/default/badge.scss

@@ -1,94 +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--bg-colored);
-  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: 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;
-  }
-
-  //! overlap
-  --ard-_badge-overlap-offset-x: 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%;
-  }
-}
+@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--bg-colored);
+  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: 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;
+  }
+
+  //! overlap
+  --ard-_badge-overlap-offset-x: 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%;
+  }
+}