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

package/themes/default/buttons/button.scss

@@ -1,79 +1,106 @@
 @use './button-mixins' as shared;
 
-ard-button {
-  display: block;
-  width: max-content;
-  height: max-content;
-}
-
-.ard-button {
-  @include shared.button;
-  background: transparent;
-  gap: 0.375rem;
-  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.375rem;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-button-height: 2.5em;
+    --ard-button-height-compact: 2.25em;
+    --ard-button-margin: 0.125rem;
+    --ard-button-padding: 0 1.2em;
+    --ard-button-padding-compact: 0 0.9em;
+    --ard-button-padding-vertical: 0.3em 1em;
+    --ard-button-padding-vertical-compact: 0.2em 0.8em;
+    --ard-button-gap: 0.375rem;
+    --ard-button-font-size: 0.875rem;
+    --ard-button-font-size-compact: 0.75rem;
+    --ard-button-font-weight: 500;
+    --ard-button-overlay-hover-opacity: 0.04;
+    --ard-button-overlay-focus-opacity: 0.12;
+    --ard-button-overlay-active-opacity: 0.18;
+    --ard-button-overlay-focus-visible-opacity: 0.24;
+    --ard-button-overlay-disabled-opacity: 0.2;
+    // --ard-button-rounded-corner-radius: ;
+    --ard-button-disabled-opacity: 0.6;
   }
 
-  //! aligns
-  &.ard-align-left {
-    flex-direction: row;
-  }
-  &.ard-align-right {
-    flex-direction: row-reverse;
-  }
-
-  //! button variants
-  &.ard-button-vertical {
+  ard-button {
+    display: flex;
+    width: max-content;
     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;
+    justify-content: stretch;
   }
 
-  //! compact
-  &.ard-compact {
-    font-size: 0.75rem;
-    height: 2.25em;
-    padding: 0 0.9em;
+  .ard-button {
+    @include shared.button(
+      var(--ard-button-margin, 0.125rem),
+      var(--ard-button-padding, 0 1.2em),
+      var(--ard-button-font-size, 0.875rem),
+      var(--ard-button-font-weight, 500),
+      var(--ard-button-overlay-hover-opacity, 0.04),
+      var(--ard-button-overlay-focus-opacity, 0.12),
+      var(--ard-button-overlay-active-opacity, 0.18),
+      var(--ard-button-overlay-focus-visible-opacity, 0.24)
+    );
+    background: transparent;
+    gap: var(--ard-button-gap, 0.375rem);
+    font-size: var(--ard-button-font-size, 0.875rem);
+    height: var(--ard-button-height, 2.5em);
+    padding: var(--ard-button-padding, 0 1.2em);
+    width: max-content;
+    min-width: max-content;
+    letter-spacing: 0.5px;
+    justify-content: center;
+    margin: 0;
+    user-select: none;
+    text-decoration: none;
+    flex-grow: 1;
 
+    //! aligns
+    &.ard-align-left {
+      flex-direction: row;
+    }
+    &.ard-align-right {
+      flex-direction: row-reverse;
+    }
+
+    //! button variants
     &.ard-button-vertical {
       height: max-content;
-      padding: 0.2em 0.8em;
-      gap: 0;
+      padding: var(--ard-button-padding-vertical, 0.3em 1em);
+      gap: 2px;
+      flex-direction: column;
+    }
+    &.ard-variant-rounded,
+    &.ard-variant-pill.ard-button-vertical {
+      border-radius: var(--ard-button-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
+    }
+    &.ard-variant-pill:not(.ard-button-vertical) {
+      border-radius: 9999px;
+    }
+    &.ard-variant-sharp {
+      border-radius: 0;
     }
-  }
-}
 
-ard-button.ard-disabled {
-  > .ard-button {
-    @include shared.button-disabled;
-  }
-  &.ard-button-with-pointer-events-when-disabled {
-    pointer-events: all;
+    //! compact
+    &.ard-compact {
+      font-size: var(--ard-button-font-size-compact, 0.75rem);
+      height: var(--ard-button-height-compact, 2.25em);
+      padding: var(--ard-button-padding-compact, 0 0.9em);
+
+      &.ard-button-vertical {
+        height: max-content;
+        padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
+        gap: 0;
+      }
+    }
+    //! disabled
+    &.ard-disabled {
+      @include shared.button-disabled(var(--ard-button-disabled-opacity, 0.6), var(--ard-button-overlay-disabled-opacity, 0.2));
 
-    > .ard-button {
-      pointer-events: all;
+      &.ard-button-with-pointer-events-when-disabled {
+        pointer-events: all;
+      }
     }
   }
 }

package/themes/default/buttons/fab.scss

@@ -1,69 +1,94 @@
 @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;
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-fab-size-standard: 3.5rem;
+    --ard-fab-size-small: 2.5rem;
+    --ard-fab-margin: 0.5rem;
+    --ard-fab-size-standard-font-size: 1.75rem;
+    --ard-fab-size-small-font-size: 1.375rem;
+    --ard-fab-font-weight: 900;
+    --ard-fab-extended-gap: 0.75em;
+    --ard-fab-overlay-hover-opacity: 0.04;
+    --ard-fab-overlay-focus-opacity: 0.12;
+    --ard-fab-overlay-active-opacity: 0.18;
+    --ard-fab-overlay-focus-visible-opacity: 0.24;
+    --ard-fab-overlay-disabled-opacity: 0.2;
+    --ard-fab-disabled-opacity: 0.6;
   }
-  &.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-fab {
+    margin: var(--ard-fab-margin, 0.5rem);
+    display: block;
+    width: max-content;
+    height: max-content;
   }
 
-  .ard-button-content {
-    gap: 1em;
+  .ard-fab {
+    @include shared.button(
+      0,
+      0,
+      unset,
+      var(--ard-fab-font-weight, 900),
+      var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04)),
+      var(--ard-fab-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12)),
+      var(--ard-fab-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18)),
+      var(--ard-fab-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24))
+    );
+    height: var(--ard-_fab-size);
+    width: var(--ard-_fab-size);
+    max-height: var(--ard-_fab-size);
+    max-width: var(--ard-_fab-size);
+    min-height: var(--ard-_fab-size);
+    min-width: var(--ard-_fab-size);
+    user-select: none;
+    border-radius: 9999px;
+    justify-content: center;
+    margin: 0;
     font-weight: 500;
-    justify-content: flex-start !important;
-    max-width: 1.5em;
     overflow: hidden;
     transition: max-width 0.5s ease;
 
+    &.ard-fab-size-standard {
+      --ard-_fab-size: var(--ard-fab-size-standard, 3.5rem);
+      font-size: var(--ard-fab-size-standard-font-size, 1.75rem);
+    }
+    &.ard-fab-size-small {
+      --ard-_fab-size: var(--ard-fab-size-small, 2.5rem);
+      font-size: var(--ard-fab-size-small-font-size, 1.375rem);
+    }
+    &.ard-fab-extended {
+      min-width: var(--ard-_fab-size);
+      width: max-content;
+      font-weight: unset;
+      gap: var(--ard-fab-extended-gap, 1em);
+      max-width: 10em;
+    }
+
     ard-icon {
       font-size: 1em;
     }
+    &.ard-appearance-transparent {
+      @include CM.focus-overlay-scale-addon();
+    }
   }
 
-  &.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 {
+  ard-fab.ard-disabled {
+    > .ard-fab {
+      @include shared.button-disabled(
+        var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2)),
+        var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6))
+      );
+    }
+    &.ard-button-with-pointer-events-when-disabled {
       pointer-events: all;
+
+      > .ard-button {
+        pointer-events: all;
+      }
     }
   }
 }

package/themes/default/buttons/icon-button.scss

@@ -1,62 +1,87 @@
 @use './button-mixins' as shared;
 
-ard-icon-button {
-  height: max-content;
-  width: max-content;
-  border-radius: 9999px;
-  aspect-ratio: 1;
-  display: inline-block;
-  font-size: 1rem;
-}
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-icon-button-height: 2.1875em;
+    --ard-icon-button-height-compact: 2.25em;
+    --ard-icon-button-margin: 0;
+    --ard-icon-button-font-size: 1rem;
+    --ard-icon-button-icon-font-size: 1.5em;
+    --ard-icon-button-font-size-compact: 0.75rem;
+    --ard-icon-button-font-weight: 600;
+    // --ard-icon-button-overlay-hover-opacity: ;
+    // --ard-icon-button-overlay-focus-opacity: ;
+    // --ard-icon-button-overlay-active-opacity: ;
+    // --ard-icon-button-overlay-focus-visible-opacity: ;
+    // --ard-icon-button-overlay-disabled-opacity: ;
+    // --ard-icon-button-disabled-opacity: ;
+  }
 
-.ard-icon-button {
-  @include shared.button;
-  background: transparent;
-  height: 2.1875em;
-  aspect-ratio: 1;
-  border-radius: 9999px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  overflow: hidden;
-  font-weight: 600;
-  font-size: inherit;
-  color: var(--ard-cmpcl--bg-colored);
+  ard-icon-button {
+    height: max-content;
+    width: max-content;
+    border-radius: 9999px;
+    aspect-ratio: 1;
+    display: inline-block;
+    margin: var(--ard-icon-button-margin, 0);
+    font-size: var(--ard-icon-button-font-size, 1rem);
+  }
 
-  .ard-button-content {
-    display: flex;
+  .ard-icon-button {
+    @include shared.button(
+      0,
+      0,
+      inherit,
+      inherit,
+      var(--ard-icon-button-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04)),
+      var(--ard-icon-button-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12)),
+      var(--ard-icon-button-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18)),
+      var(--ard-icon-button-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24))
+    );
+    background: transparent;
+    height: var(--ard-icon-button-height, 2.1875em);
+    aspect-ratio: 1;
+    border-radius: 9999px;
     align-items: center;
+    justify-content: center;
+    padding: 0;
+    overflow: hidden;
+    color: var(--ard-cmpcl--bg-colored);
 
     > ard-icon {
       font-weight: 500;
-      font-size: 1.5em;
+      font-size: var(--ard-icon-button-icon-font-size);
+    }
+    //! compact
+    &.ard-compact {
+      height: var(--ard-icon-button-height-compact, 2.25em);
+      font-size: var(--ard-icon-button-font-size-compact, 0.75rem);
+    }
+    //! light coloring
+    &.ard-light-coloring {
+      color: var(--ard-cmpcl--bg-colored-light);
     }
   }
 
-  //! compact
-  &.ard-compact {
-    height: 2.25em;
-    font-size: 0.75em;
-  }
-  //! light coloring
-  &.ard-light-coloring {
-    color: var(--ard-cmpcl--bg-colored-light);
-  }
-}
-
-ard-icon-button.ard-disabled {
-  > .ard-icon-button {
-    @include shared.button-disabled;
+  ard-icon-button.ard-disabled {
+    > .ard-icon-button {
+      @include shared.button-disabled(
+        var(--ard-icon-button-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2)),
+        var(--ard-icon-button-disabled-opacity, var(--ard-button-disabled-opacity, 0.6))
+      );
 
-    .ard-focus-overlay {
-      opacity: 0;
+      .ard-focus-overlay {
+        opacity: 0;
+      }
     }
-  }
-  &.ard-button-with-pointer-events-when-disabled {
-    pointer-events: all;
-
-    > .ard-button {
+    &.ard-button-with-pointer-events-when-disabled {
       pointer-events: all;
+
+      > .ard-button {
+        pointer-events: all;
+      }
     }
   }
 }