@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

package/themes/default/slider.scss

@@ -3,23 +3,60 @@
 @use 'sass:math';
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  // --ard-slider-font-size: ;
+  // --ard-slider-font-size-compact: ;
+  --ard-slider-width: 100%;
+  --ard-slider-padding: 0 calc(var(--ard-slider-handle-size, 1.25em) / 2);
+  --ard-slider-track-height: 0.25em;
+  // --ard-slider-track-color: ;
+  --ard-slider-track-opacity: 20%;
+  --ard-slider-track-border-radius: 9999px;
+  --ard-slider-active-track-height: calc(100% + 0.125em);
+  // --ard-slider-active-color: ;
+  --ard-slider-active-track-opacity: 100%;
+  --ard-slider-value-tick-size: 0.125em;
+  --ard-slider-value-tick-opacity: 30%;
+  --ard-slider-track-hitbox-size: calc(var(--ard-slider-handle-size, 1.25em) / 2);
+  --ard-slider-handle-size: 1.25em;
+  // --ard-slider-handle-bg: ;
+  --ard-slider-handle-border: none;
+  --ard-slider-handle-border-radius: 9999px;
+  --ard-slider-handle-hitbox-size: 0.375em;
+  --ard-slider-handle-overlay-size: 0.5em;
+  --ard-slider-handle-overlay-hover-opacity: 7.5%;
+  --ard-slider-handle-overlay-focus-opacity: 15%;
+  --ard-slider-handle-overlay-active-opacity: 25%;
+  --ard-slider-label-font-size: 0.875rem;
+  --ard-slider-label-padding-top: 0.2em;
+  // --ard-slider-label-bg: ;
+  // --ard-slider-label-color: ;
+  --ard-slider-label-height: 2em;
+  --ard-slider-label-border: none;
+  --ard-slider-label-border-radius: 0.375em;
+  --ard-slider-label-padding: 0 0.75em;
+  --ard-slider-label-font-weight: 500;
+  --ard-slider-label-arrow-size: 0.375em;
+  --ard-slider-label-offset: 0.5em;
+}
+
 .ard-slider-container-master,
 .ard-range-slider-container-master {
   @include coloringMixins.typeColors();
 
   position: relative;
-  font-size: 1rem;
-  width: 20em;
+  font-size: var(--ard-slider-font-size, var(--ard-form-field-font-size, 1rem));
+  width: var(--ard-slider-width, 100%);
   max-width: 100%;
-  padding: 0 0.625em;
+  padding: var(--ard-slider-padding, 0 calc(var(--ard-slider-handle-size, 1.25em) / 2));
   display: flex;
   flex-direction: column;
 
-  color: var(--ard-cmpcl--bg-colored);
-
   //! compact
   &.ard-compact {
-    font-size: 0.85rem;
+    font-size: var(--ard-slider-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
 
     .ard-slider-container > .ard-slider-handle {
       font-size: 0.95em;
@@ -32,115 +69,105 @@
     align-items: center;
     position: relative;
     width: 100%;
-    height: 1.25em;
+    height: var(--ard-slider-handle-size, 1.25em);
     cursor: pointer;
   }
   //! track
   .ard-slider-track {
     width: 100%;
-    height: 0.25em;
+    height: var(--ard-slider-track-height, 0.25em);
     background: ARD.$bg;
 
     .ard-slider-track-overlay {
       position: absolute;
       width: 100%;
       height: 100%;
-      background: currentColor;
-      opacity: 20%;
-      border-radius: 9999px;
+      background: var(--ard-slider-track-color, var(--ard-cmpcl--bg-colored));
+      opacity: var(--ard-slider-track-opacity, 20%);
+      border-radius: var(--ard-slider-track-border-radius, 9999px);
 
       &.ard-slider-track-active {
         width: 0;
-        height: calc(100% + 0.125em);
-        top: math.div(-1em, 16);
-        opacity: 100%;
-        transition:
-          width var(--_ard-slider-transition) ease,
-          left var(--_ard-slider-transition) ease;
+        height: var(--ard-slider-active-track-height, calc(100% + 0.125em));
+        top: 50%;
+        transform: translateY(-50%);
+        background: var(--ard-slider-active-color, var(--ard-cmpcl--bg-colored));
+        opacity: var(--ard-slider-active-track-opacity, 100%);
+        transition: width var(--_ard-slider-transition) ease, left var(--_ard-slider-transition) ease;
       }
     }
     .ard-hitbox {
       position: absolute;
-      inset: -0.625em;
+      inset: calc(var(--ard-slider-hitbox-size, calc(var(--ard-slider-handle-size, 1.25em) / 2)) * -1);
     }
     .ard-value-tick-container {
       position: absolute;
-      left: 0.125em;
-      width: calc(100% - 0.25em);
+      left: var(--ard-slider-value-tick-size, 0.125em);
+      width: calc(100% - var(--ard-slider-value-tick-size, 0.125em) * 2);
       height: 100%;
     }
     .ard-value-tick {
       top: 50%;
-      width: 0.125em;
-      height: 0.125em;
+      width: var(--ard-slider-value-tick-size, 0.125em);
+      height: var(--ard-slider-value-tick-size, 0.125em);
       border-radius: 9999px;
       background: ARD.$text;
-      opacity: 30%;
+      opacity: var(--ard-slider-value-tick-opacity, 30%);
       transform: translate(-50%, -50%);
     }
   }
   //! handle
-  // &.ard-slider-handle-grabbed,
-  // &.ard-slider-handle-grabbed * {
-  //     cursor: grabbing;
-  // }
   .ard-slider-handle {
     font-size: inherit;
     top: 0;
-    width: 1.25em;
-    height: 1.25em;
+    width: var(--ard-slider-handle-size, 1.25em);
+    height: var(--ard-slider-handle-size, 1.25em);
     color: inherit;
-    background: currentColor;
-    border-radius: 9999px;
-    border: none;
+    background: var(--ard-slider-handle-bg, var(--ard-cmpcl--bg-colored));
+    border-radius: var(--ard-slider-handle-border-radius, 9999px);
+    border: var(--ard-slider-handle-border, none);
     z-index: 1;
     outline: none;
-    cursor: pointer;
+    cursor: grab;
 
-    transition:
-      box-shadow 0.15s ease,
-      left var(--_ard-slider-transition) ease;
+    transition: box-shadow 0.15s ease, left var(--_ard-slider-transition) ease;
     box-shadow: ARD.$simple-shadow;
 
-    // cursor: grab;
-    // &.ard-grabbed {
-    //     cursor: grabbing;
-    // }
-
     .ard-focus-overlay {
-      @include defaultMixins.focus-overlay(0.5em);
+      @include defaultMixins.focus-overlay(var(--ard-slider-handle-overlay-size, 0.5em));
       background: currentColor;
     }
     @include defaultMixins.focus-overlay-scale-addon();
 
     .ard-hitbox {
       position: absolute;
-      inset: math.div(-7em, 16);
-      border-radius: 9999px;
+      inset: calc(var(--ard-slider-handle-hitbox-size, 0.375em) * -1);
+      border-radius: calc(var(--ard-slider-handle-border-radius, 9999px) + var(--ard-slider-handle-hitbox-size, 0.375em));
     }
     &:hover {
       .ard-focus-overlay {
-        opacity: 7.5%;
+        opacity: var(--ard-slider-handle-overlay-hover-opacity, 7.5%);
       }
     }
     &:focus {
       box-shadow: ARD.$simple-shadow2;
+
       .ard-focus-overlay {
-        opacity: 15%;
+        opacity: var(--ard-slider-handle-overlay-focus-opacity, 15%);
       }
     }
     &:active,
     &.ard-grabbed {
       .ard-focus-overlay {
-        opacity: 25%;
+        opacity: var(--ard-slider-handle-overlay-active-opacity, 25%);
       }
     }
   }
   .ard-slider-label-container {
     position: relative;
-    font-size: 0.9em;
-    padding-top: 0.2em;
-    left: 2px;
+    font-size: var(--ard-slider-label-font-size, 0.9em);
+    padding-top: var(--ard-slider-label-padding-top, 0.2em);
+    left: 0.125em;
     width: calc(100% - 0.25em) !important;
 
     .ard-slider-label {
@@ -153,16 +180,16 @@
     z-index: 2;
   }
   .ard-slider-tooltip {
-    --ard-background: #{ARD.$text3};
-    background: var(--ard-background);
-    color: ARD.$text2-alt;
-    font-size: 0.875em;
-    border-radius: 0.375em;
-    height: 2em;
-    padding: 0 0.75em;
+    background: var(--ard-slider-label-bg, #{ARD.$text3});
+    height: var(--ard-slider-label-height, 2em);
+    padding: var(--ard-slider-label-padding, 0 0.75em);
+    border-radius: var(--ard-slider-label-border-radius, 0.375em);
+    color: var(--ard-slider-label-color, #{ARD.$text2-alt});
+    font-size: var(--ard-slider-label-font-size, 0.875rem);
+    font-weight: var(--ard-slider-label-font-weight, 500);
+    white-space: nowrap;
     display: flex;
     align-items: center;
-    font-weight: 500;
     position: relative;
     z-index: 2;
     user-select: none;
@@ -173,28 +200,30 @@
     &::before {
       content: '';
       position: absolute;
-      border: 0.375em solid transparent;
+      border: var(--ard-slider-label-arrow-size, 0.375em) solid transparent;
       left: 50%;
     }
   }
   &.ard-tooltip-top {
     .ard-slider-tooltip {
-      bottom: 0.5em;
+      bottom: var(--ard-slider-label-offset, 0.5em);
+      transform-origin: center bottom;
 
       &::before {
         bottom: 0;
-        border-top-color: var(--ard-background);
+        border-top-color: var(--ard-slider-label-bg);
         transform: translate(-50%, 100%);
       }
     }
   }
   &.ard-tooltip-bottom {
     .ard-slider-tooltip {
-      top: 0.5em;
+      top: var(--ard-slider-label-offset, 0.5em);
+      transform-origin: center top;
 
       &::before {
         top: 0;
-        border-bottom-color: var(--ard-background);
+        border-bottom-color: var(--ard-slider-label-bg);
         transform: translate(-50%, -100%);
       }
     }
@@ -216,9 +245,17 @@
     }
   }
   //make a way to force-show a tooltip
-  .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always {
-    .ard-slider-tooltip {
+  .ard-slider-handle .ard-slider-tooltip-wrapper {
+    .ard-slider-tooltip.ard-tooltip-always {
       transform: scale(1) !important;
     }
   }
 }
+.ard-body-slider-handle-grabbed {
+  cursor: grabbing !important;
+  
+  * {
+    cursor: grabbing !important;
+    pointer-events: none !important;
+  }
+}

package/themes/default/snackbar.scss

@@ -1,33 +1,51 @@
 @use './coloring' as C;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-snackbar-min-width: min(21rem, 90vw);
+  --ard-snackbar-max-width: min(42rem, 90vw);
+  --ard-snackbar-min-height: 3rem;
+  // --ard-snackbar-background-color: ;
+  // --ard-snackbar-content-color: ;
+  --ard-snackbar-gap: 0.625rem;
+  --ard-snackbar-margin: 0.625rem;
+  --ard-snackbar-padding: 0 0.5rem 0 1rem;
+  // --ard-snackbar-border-radius: ;
+  --ard-snackbar-content-gap: 0.625rem;
+  --ard-snackbar-animation-duration: 150ms;
+  --ard-snackbar-animation-bottom: -0.375rem;
+  --ard-snackbar-animation-scale: 60%;
+}
+
 .ard-snackbar {
   @include C.typeColors();
-  min-width: min(21rem, 90vw);
-  max-width: min(42rem, 90vw);
-  min-height: 3rem;
-  margin: 0.625rem;
+  min-width: var(--ard-snackbar-min-width, min(21rem, 90vw));
+  max-width: var(--ard-snackbar-max-width, min(42rem, 90vw));
+  min-height: var(--ard-snackbar-min-height, 3rem);
+  margin: var(--ard-snackbar-margin, 0.625rem);
   position: relative;
   display: flex;
   justify-content: stretch;
   align-items: center;
-  gap: 0.625rem;
-  border-radius: 6px;
+  gap: var(--ard-snackbar-gap, 0.625rem);
+  border-radius: var(--ard-snackbar-border-radius, var(--ard-rounded-corner-radius, 0.375rem));
   transform-origin: bottom center;
-  background-color: ARD.$bg-f-alt;
-  padding: 0 0.5rem 0 1rem;
+  background-color: var(--ard-snackbar-background-color, #{ARD.$bg-f-alt});
+  padding: var(--ard-snackbar-padding, 0 0.5rem 0 1rem);
 
   opacity: 100%;
   transform: scale(100%);
   bottom: 0;
-  animation: show 150ms ease-out forwards;
+  animation: show var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;
 
   .ard-snackbar-content {
     display: flex;
-    gap: 0.625rem;
+    gap: var(--ard-snackbar-content-gap, 0.625rem);
     align-items: center;
     flex-grow: 1;
-    color: ARD.$text2-alt;
+    color: var(--ard-snackbar-content-color, #{ARD.$text2-alt});
 
     ard-icon {
       color: var(--ard-cmpcl--content-light);
@@ -35,14 +53,14 @@
   }
 
   &.ard-snackbar-closing {
-    animation: hide 150ms ease-out forwards;
+    animation: hide var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;
   }
 }
 
 @mixin animation {
   opacity: 0%;
-  transform: scale(60%);
-  bottom: -0.375rem;
+  transform: scale(var(--ard-snackbar-animation-scale, 60%));
+  bottom: var(--ard-snackbar-animation-bottom, -0.375rem);
 }
 
 @keyframes show {

package/themes/default/spinner.scss

@@ -1,16 +1,24 @@
 @use './coloring' as CM;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-spinner-size: 2rem;
+  --ard-spinner-margin: 0.25rem;
+  --ard-spinner-duration: 1.4s;
+}
+
 ard-spinner {
   display: inline-block;
-  width: 2rem;
+  width: var(--ard-spinner-size, 2rem);
   aspect-ratio: 1;
   position: relative;
-  margin: 0.25rem;
+  margin: var(--ard-spinner-margin, 0.25rem);
 }
 
 .ard-spinner {
   @include CM.typeColors();
-  --ard-_spinner-duration: 1.4s;
+  --ard-_spinner-duration: var(--ard-spinner-duration, 1.4s);
   position: absolute;
 
   scale: 2.3; //magic number

package/themes/default/stars.scss

@@ -2,6 +2,23 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-star-size: 1.5em;
+
+  --ard-star-button-hitbox-offset: -4px;
+  --ard-star-button-overlay-offset: -0.125em;
+  --ard-star-button-hover-overlay-opacity: 10%;
+  --ard-star-button-focus-overlay-opacity: 0;
+  --ard-star-button-focus-visible-overlay-opacity: 10%;
+  --ard-star-button-active-overlay-opacity: 20%;
+  --ard-star-button-disabled-opacity: 50%;
+
+  --ard-rating-input-not-in-value-opacity: 50%;
+  --ard-rating-input-disabled-opacity: 50%;
+}
+
 .ard-star,
 .ard-star-button,
 .ard-rating-display,
@@ -15,8 +32,8 @@
 }
 .ard-star {
   font-size: inherit;
-  width: 1.5em;
-  height: 1.5em;
+  width: var(--ard-star-size, 1.5em);
+  height: var(--ard-star-size, 1.5em);
   position: relative;
 }
 .ard-rating-display,
@@ -28,7 +45,7 @@
   cursor: pointer;
 
   .ard-star-not-in-value {
-    opacity: 50%;
+    opacity: var(--ard-rating-input-not-in-value-opacity, 50%);
   }
 }
 .ard-star-button {
@@ -46,40 +63,52 @@
 
   .ard-hitbox {
     position: absolute;
-    left: -4px;
-    right: -4px;
-    bottom: -4px;
-    top: -4px;
+    left: var(--ard-star-button-hitbox-offset, -4px);
+    right: var(--ard-star-button-hitbox-offset, -4px);
+    bottom: var(--ard-star-button-hitbox-offset, -4px);
+    top: var(--ard-star-button-hitbox-offset, -4px);
   }
 
   .ard-focus-overlay {
     @include defaultMixins.focus-overlay;
     position: absolute;
-    left: -0.125em;
-    right: -0.125em;
-    bottom: -0.125em;
-    top: -0.125em;
+    left: var(--ard-star-button-overlay-offset, -0.125em);
+    right: var(--ard-star-button-overlay-offset, -0.125em);
+    bottom: var(--ard-star-button-overlay-offset, -0.125em);
+    top: var(--ard-star-button-overlay-offset, -0.125em);
     border-radius: 999px;
     background: currentColor;
   }
   @include defaultMixins.focus-overlay-scale-addon();
-  &:hover,
+  &:hover {
+    .ard-focus-overlay {
+      opacity: var(--ard-star-button-hover-overlay-opacity, 10%);
+    }
+  }
   &:focus {
     .ard-focus-overlay {
-      opacity: 10%;
+      opacity: var(--ard-star-button-focus-overlay-opacity, 0%);
+    }
+  }
+  &:focus-visible {
+    .ard-focus-overlay {
+      opacity: var(--ard-star-button-focus-visible-overlay-opacity, 10%);
     }
   }
   &:active {
     .ard-focus-overlay {
-      opacity: 20%;
+      opacity: var(--ard-star-button-active-overlay-opacity, 20%);
     }
   }
 }
 //! disabled state for star-button
 .ard-disabled {
-  > .ard-star-button,
+  > .ard-star-button {
+    pointer-events: none;
+    opacity: var(--ard-star-button-disabled-opacity, 50%);
+  }
   > .ard-rating-input {
     pointer-events: none;
-    opacity: 50%;
+    opacity: var(--ard-rating-input-disabled-opacity, 50%);
   }
 }

package/themes/default/tabber.scss

@@ -1,6 +1,25 @@
 @use './coloring' as CM;
 @use './mixins' as M;
-@use '../variables' as ARD;
+
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-tabber-tab-height: 2.5em;
+  --ard-tabber-tab-font-size: 0.875rem;
+  --ard-tabber-tab-font-weight: 500;
+  --ard-tabber-tab-border: none;
+  --ard-tabber-tab-background: none;
+  --ard-tabber-tab-padding: 0 1.5rem;
+  --ard-tabber-tab-gap: 0;
+  --ard-tabber-tab-content-gap: 0.375rem;
+  --ard-tabber-separator-border: 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%));
+  // --ard-tabber-tab-overlay-color: ;
+  --ard-tabber-tab-hover-overlay-opacity: 4%;
+  --ard-tabber-tab-active-overlay-opacity: 12%;
+  --ard-tabber-tab-focus-visible-overlay-opacity: 18%;
+  --ard-tabber-tab-disabled-overlay-opacity: 0%;
+  --ard-tabber-tab-disabled-opacity: 50%;
+}
 
 ard-tabber {
   max-width: 100%;
@@ -13,18 +32,19 @@ ard-tabber {
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  font-family: 'Roboto', sans-serif;
+  font-family: var(--ard-font-family);
 
   .ard-tabber-tabs {
     max-width: 100%;
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 1px solid ARD.$detail-ultralight;
+    gap: var(--ard-tabber-tab-gap, 0);
+    border-bottom: var(--ard-tabber-separator-border, 1px solid var(--ard-detail-ultralight, rgba(0, 0, 0, 12%)));
 
     &.ard-tab-align-left {
       justify-content: left;
     }
-    &.ard-tab-align-middle {
+    &.ard-tab-align-center {
       justify-content: center;
     }
     &.ard-tab-align-right {
@@ -39,37 +59,44 @@ ard-tabber {
     }
 
     .ard-tab-button {
-      height: 2.5em;
-      font-size: 0.875rem;
-      font-weight: 500;
+      height: var(--ard-tabber-tab-height, 2.5em);
+      font-size: var(--ard-tabber-tab-font-size, 0.875rem);
+      font-weight: var(--ard-tabber-tab-font-weight, 500);
       position: relative;
-      border: none;
-      background: none;
-      padding: 0 1.5rem;
+      border: var(--ard-tabber-tab-border, none);
+      background: var(--ard-tabber-tab-background, none);
+      padding: var(--ard-tabber-tab-padding, 0 1.5rem);
       cursor: pointer;
       outline: none;
       font-family: inherit;
 
       .ard-focus-overlay {
         @include M.focus-overlay();
-        background: ARD.$bg-alt;
+        background: var(--ard-tabber-tab-overlay-color, var(--ard-bg-alt, black));
+      }
+      .ard-button-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        gap: var(--ard-tabber-tab-content-gap, 0.375rem);
       }
 
       &:hover,
       &:focus {
         .ard-focus-overlay {
-          opacity: 4%;
+          opacity: var(--ard-tabber-tab-hover-overlay-opacity, 4%);
         }
       }
       &.ard-active,
       &:active {
         .ard-focus-overlay {
-          opacity: 12%;
+          opacity: var(--ard-tabber-tab-active-overlay-opacity, 12%);
         }
       }
       &:focus-visible {
         .ard-focus-overlay {
-          opacity: 18%;
+          opacity: var(--ard-tabber-tab-focus-visible-overlay-opacity, 18%);
         }
       }
 
@@ -84,6 +111,19 @@ ard-tabber {
           background: var(--ard-cmpcl--bg-colored);
         }
       }
+
+      &.ard-tab-disabled {
+        opacity: var(--ard-tabber-tab-disabled-opacity);
+        pointer-events: none;
+
+        .ard-focus-overlay {
+          opacity: var(--ard-tabber-tab-disabled-overlay-opacity, 18%);
+        }
+        &.ard-tab-with-pointer-events-when-disabled {
+          pointer-events: all;
+          cursor: not-allowed;
+        }
+      }
     }
   }
 }