@ardium-ui/ui 4.0.0 → 4.1.0

package/themes/_variables.scss

@@ -1,121 +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);
-
-$gold: var(--ard-gold);
-
-$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);
+$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);
+
+$gold: var(--ard-gold);
+
+$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/_mixins.scss

@@ -3,7 +3,11 @@
 @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};
+  font-variation-settings:
+    'FILL' #{$fill},
+    'wght' #{$wght},
+    'GRAD' #{$grad},
+    'opsz' #{$opsz};
 }
 
 @mixin focus-overlay($size: 0) {
@@ -22,7 +26,9 @@
   > .ard-focus-overlay {
     transform: scale(0.2);
 
-    transition: opacity 0.2s ease, transform 0.1s ease;
+    transition:
+      opacity 0.2s ease,
+      transform 0.1s ease;
   }
 
   &:hover,

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

@@ -83,7 +83,9 @@
       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);

package/themes/default/buttons/button.scss

@@ -1,79 +1,79 @@
-@use './button-mixins' as shared;
-
-ard-button {
-  display: block;
-  width: max-content;
-  height: max-content;
-}
-
-.ard-button {
-  @include shared.button;
-  background: transparent;
-  gap: 6px;
-  font-size: 0.875rem;
-  height: 2.5em;
-  padding: 0 1.2em;
-  letter-spacing: 0.5px;
-  width: 100%;
-  min-width: max-content;
-  justify-content: center;
-  margin: 0;
-
-  .ard-button-content {
-    display: flex;
-    align-items: center;
-    gap: 0.875rem;
-  }
-
-  //! aligns
-  &.ard-align-left {
-    flex-direction: row;
-  }
-  &.ard-align-right {
-    flex-direction: row-reverse;
-  }
-
-  //! button variants
-  &.ard-button-vertical {
-    height: max-content;
-    padding: 0.3em 1em;
-    gap: 2px;
-    flex-direction: column;
-  }
-  &.ard-variant-rounded,
-  &.ard-variant-pill.ard-button-vertical {
-    border-radius: 6px;
-  }
-  &.ard-variant-pill:not(.ard-button-vertical) {
-    border-radius: 9999px;
-  }
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-
-  //! compact
-  &.ard-compact {
-    font-size: 0.75rem;
-    height: 2.25em;
-    padding: 0 0.9em;
-
-    &.ard-button-vertical {
-      height: max-content;
-      padding: 0.2em 0.8em;
-      gap: 0;
-    }
-  }
-}
-
-ard-button.ard-disabled {
-  > .ard-button {
-    @include shared.button-disabled;
-  }
-  &.ard-button-with-pointer-events-when-disabled {
-    pointer-events: all;
-
-    > .ard-button {
-      pointer-events: all;
-    }
-  }
-}
+@use './button-mixins' as shared;
+
+ard-button {
+  display: block;
+  width: max-content;
+  height: max-content;
+}
+
+.ard-button {
+  @include shared.button;
+  background: transparent;
+  gap: 6px;
+  font-size: 0.875rem;
+  height: 2.5em;
+  padding: 0 1.2em;
+  letter-spacing: 0.5px;
+  width: 100%;
+  min-width: max-content;
+  justify-content: center;
+  margin: 0;
+
+  .ard-button-content {
+    display: flex;
+    align-items: center;
+    gap: 0.875rem;
+  }
+
+  //! aligns
+  &.ard-align-left {
+    flex-direction: row;
+  }
+  &.ard-align-right {
+    flex-direction: row-reverse;
+  }
+
+  //! button variants
+  &.ard-button-vertical {
+    height: max-content;
+    padding: 0.3em 1em;
+    gap: 2px;
+    flex-direction: column;
+  }
+  &.ard-variant-rounded,
+  &.ard-variant-pill.ard-button-vertical {
+    border-radius: 6px;
+  }
+  &.ard-variant-pill:not(.ard-button-vertical) {
+    border-radius: 9999px;
+  }
+  &.ard-variant-sharp {
+    border-radius: 0;
+  }
+
+  //! compact
+  &.ard-compact {
+    font-size: 0.75rem;
+    height: 2.25em;
+    padding: 0 0.9em;
+
+    &.ard-button-vertical {
+      height: max-content;
+      padding: 0.2em 0.8em;
+      gap: 0;
+    }
+  }
+}
+
+ard-button.ard-disabled {
+  > .ard-button {
+    @include shared.button-disabled;
+  }
+  &.ard-button-with-pointer-events-when-disabled {
+    pointer-events: all;
+
+    > .ard-button {
+      pointer-events: all;
+    }
+  }
+}

package/themes/default/buttons/fab.scss

@@ -1,81 +1,81 @@
-@use './button-mixins' as shared;
-@use '../mixins' as CM;
-
-ard-fab {
-  margin: 8px;
-  display: block;
-  width: max-content;
-  height: max-content;
-}
-
-.ard-fab {
-  @include shared.button;
-  height: var(--ard-_fab-size);
-  width: var(--ard-_fab-size);
-  font-weight: 900;
-  user-select: none;
-  border-radius: 999px;
-  justify-content: center;
-  margin: 0;
-
-  &.ard-fab-size-standard {
-    --ard-_fab-size: 3.5rem;
-    font-size: 1.75rem;
-  }
-  &.ard-fab-size-small {
-    --ard-_fab-size: 2.5rem;
-    font-size: 1.375rem;
-  }
-  &.ard-fab-extended {
-    min-width: var(--ard-_fab-size);
-    width: max-content;
-    font-weight: unset;
-
-    .ard-button-content {
-      gap: 0.75em;
-      max-width: 10em;
-    }
-  }
-
-  .ard-button-content {
-    gap: 1em;
-    font-weight: 500;
-    justify-content: flex-start !important;
-    max-width: 1.5em;
-    overflow: hidden;
-    transition: max-width 0.5s ease;
-
-    ard-icon {
-      font-size: 1em;
-    }
-  }
-
-  &.ard-appearance-transparent {
-    @include CM.focus-overlay-scale-addon();
-  }
-}
-
-ard-fab.ard-disabled {
-  > .ard-fab {
-    @include shared.button-disabled;
-  }
-  &.ard-button-with-pointer-events-when-disabled {
-    pointer-events: all;
-
-    > .ard-button {
-      pointer-events: all;
-    }
-  }
-}
-
-@keyframes maxWidth {
-  0% {
-    max-width: 1.5em;
-  }
-  99% {
-    max-width: 21em;
-  }
-  100% {
-    max-width: unset;
-  }
-}
+@use './button-mixins' as shared;
+@use '../mixins' as CM;
+
+ard-fab {
+  margin: 8px;
+  display: block;
+  width: max-content;
+  height: max-content;
+}
+
+.ard-fab {
+  @include shared.button;
+  height: var(--ard-_fab-size);
+  width: var(--ard-_fab-size);
+  font-weight: 900;
+  user-select: none;
+  border-radius: 999px;
+  justify-content: center;
+  margin: 0;
+
+  &.ard-fab-size-standard {
+    --ard-_fab-size: 3.5rem;
+    font-size: 1.75rem;
+  }
+  &.ard-fab-size-small {
+    --ard-_fab-size: 2.5rem;
+    font-size: 1.375rem;
+  }
+  &.ard-fab-extended {
+    min-width: var(--ard-_fab-size);
+    width: max-content;
+    font-weight: unset;
+
+    .ard-button-content {
+      gap: 0.75em;
+      max-width: 10em;
+    }
+  }
+
+  .ard-button-content {
+    gap: 1em;
+    font-weight: 500;
+    justify-content: flex-start !important;
+    max-width: 1.5em;
+    overflow: hidden;
+    transition: max-width 0.5s ease;
+
+    ard-icon {
+      font-size: 1em;
+    }
+  }
+
+  &.ard-appearance-transparent {
+    @include CM.focus-overlay-scale-addon();
+  }
+}
+
+ard-fab.ard-disabled {
+  > .ard-fab {
+    @include shared.button-disabled;
+  }
+  &.ard-button-with-pointer-events-when-disabled {
+    pointer-events: all;
+
+    > .ard-button {
+      pointer-events: all;
+    }
+  }
+}
+
+@keyframes maxWidth {
+  0% {
+    max-width: 1.5em;
+  }
+  99% {
+    max-width: 21em;
+  }
+  100% {
+    max-width: unset;
+  }
+}