@ardium-ui/ui 1.0.3 → 2.0.1

package/themes/default/_clear-button.scss

@@ -1,73 +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%;
-      }
-    }
-  }
-}
+@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

@@ -1,137 +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;
-  }
-}
+@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

@@ -1,12 +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;
-}
+@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

@@ -1,70 +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;
-  }
-}
+@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;
+  }
+}