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

package/themes/default/slider.scss

@@ -3,222 +3,265 @@
 @use 'sass:math';
 @use '../variables' as ARD;
 
-.ard-slider-container-master,
-.ard-range-slider-container-master {
-  @include coloringMixins.typeColors();
-
-  position: relative;
-  font-size: 1rem;
-  width: 20em;
-  max-width: 100%;
-  padding: 0 0.625em;
-  display: flex;
-  flex-direction: column;
-
-  color: var(--ard-cmpcl--bg-colored);
-
-  //! compact
-  &.ard-compact {
-    font-size: 0.85rem;
-
-    .ard-slider-container > .ard-slider-handle {
-      font-size: 0.95em;
-    }
+@layer ard-ui {
+  // 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;
   }
 
-  //! container
-  .ard-slider-container {
-    display: flex;
-    align-items: center;
+  .ard-slider-container-master,
+  .ard-range-slider-container-master {
+    @include coloringMixins.typeColors();
+
     position: relative;
-    width: 100%;
-    height: 1.25em;
-    cursor: pointer;
-  }
-  //! track
-  .ard-slider-track {
-    width: 100%;
-    height: 0.25em;
-    background: ARD.$bg;
-
-    .ard-slider-track-overlay {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: currentColor;
-      opacity: 20%;
-      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;
+    font-size: var(--ard-slider-font-size, var(--ard-form-field-font-size, 1rem));
+    width: var(--ard-slider-width, 100%);
+    max-width: 100%;
+    padding: var(--ard-slider-padding, 0 calc(var(--ard-slider-handle-size, 1.25em) / 2));
+    display: flex;
+    flex-direction: column;
+
+    //! compact
+    &.ard-compact {
+      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;
       }
     }
-    .ard-hitbox {
-      position: absolute;
-      inset: -0.625em;
-    }
-    .ard-value-tick-container {
-      position: absolute;
-      left: 0.125em;
-      width: calc(100% - 0.25em);
-      height: 100%;
-    }
-    .ard-value-tick {
-      top: 50%;
-      width: 0.125em;
-      height: 0.125em;
-      border-radius: 9999px;
-      background: ARD.$text;
-      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;
-    color: inherit;
-    background: currentColor;
-    border-radius: 9999px;
-    border: none;
-    z-index: 1;
-    outline: none;
-    cursor: pointer;
-
-    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);
-      background: currentColor;
-    }
-    @include defaultMixins.focus-overlay-scale-addon();
 
-    .ard-hitbox {
-      position: absolute;
-      inset: math.div(-7em, 16);
-      border-radius: 9999px;
+    //! container
+    .ard-slider-container {
+      display: flex;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: var(--ard-slider-handle-size, 1.25em);
+      cursor: pointer;
     }
-    &:hover {
-      .ard-focus-overlay {
-        opacity: 7.5%;
+    //! track
+    .ard-slider-track {
+      width: 100%;
+      height: var(--ard-slider-track-height, 0.25em);
+      background: ARD.$bg;
+
+      .ard-slider-track-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        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: 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;
+        }
       }
-    }
-    &:focus {
-      box-shadow: ARD.$simple-shadow2;
-      .ard-focus-overlay {
-        opacity: 15%;
+      .ard-hitbox {
+        position: absolute;
+        inset: calc(var(--ard-slider-hitbox-size, calc(var(--ard-slider-handle-size, 1.25em) / 2)) * -1);
+      }
+      .ard-value-tick-container {
+        position: absolute;
+        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: var(--ard-slider-value-tick-size, 0.125em);
+        height: var(--ard-slider-value-tick-size, 0.125em);
+        border-radius: 9999px;
+        background: ARD.$text;
+        opacity: var(--ard-slider-value-tick-opacity, 30%);
+        transform: translate(-50%, -50%);
       }
     }
-    &:active,
-    &.ard-grabbed {
+    //! handle
+    .ard-slider-handle {
+      font-size: inherit;
+      top: 0;
+      width: var(--ard-slider-handle-size, 1.25em);
+      height: var(--ard-slider-handle-size, 1.25em);
+      color: inherit;
+      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: grab;
+
+      transition:
+        box-shadow 0.15s ease,
+        left var(--_ard-slider-transition) ease;
+      box-shadow: ARD.$simple-shadow;
+
       .ard-focus-overlay {
-        opacity: 25%;
+        @include defaultMixins.focus-overlay(var(--ard-slider-handle-overlay-size, 0.5em));
+        background: currentColor;
       }
-    }
-  }
-  .ard-slider-label-container {
-    position: relative;
-    font-size: 0.9em;
-    padding-top: 0.2em;
-    left: 2px;
-    width: calc(100% - 0.25em) !important;
+      @include defaultMixins.focus-overlay-scale-addon();
 
-    .ard-slider-label {
-      transform: translateX(-50%);
-    }
-  }
-  //! tooltip
-  .ard-slider-tooltip-wrapper {
-    transition: left var(--_ard-slider-transition) ease;
-    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;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    position: relative;
-    z-index: 2;
-    user-select: none;
+      .ard-hitbox {
+        position: absolute;
+        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: var(--ard-slider-handle-overlay-hover-opacity, 7.5%);
+        }
+      }
+      &:focus {
+        box-shadow: ARD.$simple-shadow2;
 
-    transform: scale(0);
-    transition: transform 0.1s ARD.$timing-fn;
+        .ard-focus-overlay {
+          opacity: var(--ard-slider-handle-overlay-focus-opacity, 15%);
+        }
+      }
+      &:active,
+      &.ard-grabbed {
+        .ard-focus-overlay {
+          opacity: var(--ard-slider-handle-overlay-active-opacity, 25%);
+        }
+      }
+    }
+    .ard-slider-label-container {
+      position: relative;
+      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;
 
-    &::before {
-      content: '';
-      position: absolute;
-      border: 0.375em solid transparent;
-      left: 50%;
+      .ard-slider-label {
+        transform: translateX(-50%);
+      }
+    }
+    //! tooltip
+    .ard-slider-tooltip-wrapper {
+      transition: left var(--_ard-slider-transition) ease;
+      z-index: 2;
     }
-  }
-  &.ard-tooltip-top {
     .ard-slider-tooltip {
-      bottom: 0.5em;
+      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;
+      position: relative;
+      z-index: 2;
+      user-select: none;
+
+      transform: scale(0);
+      transition: transform 0.1s ARD.$timing-fn;
 
       &::before {
-        bottom: 0;
-        border-top-color: var(--ard-background);
-        transform: translate(-50%, 100%);
+        content: '';
+        position: absolute;
+        border: var(--ard-slider-label-arrow-size, 0.375em) solid transparent;
+        left: 50%;
       }
     }
-  }
-  &.ard-tooltip-bottom {
-    .ard-slider-tooltip {
-      top: 0.5em;
+    &.ard-tooltip-top {
+      .ard-slider-tooltip {
+        bottom: var(--ard-slider-label-offset, 0.5em);
+        transform-origin: center bottom;
 
-      &::before {
-        top: 0;
-        border-bottom-color: var(--ard-background);
-        transform: translate(-50%, -100%);
+        &::before {
+          bottom: 0;
+          border-top-color: var(--ard-slider-label-bg);
+          transform: translate(-50%, 100%);
+        }
       }
     }
-  }
-  //! showing and hiding tooltip
-  //show tooltip when handle is hovered or focused
-  .ard-slider-handle:hover,
-  .ard-slider-handle:focus {
-    + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
-      transform: scale(1);
+    &.ard-tooltip-bottom {
+      .ard-slider-tooltip {
+        top: var(--ard-slider-label-offset, 0.5em);
+        transform-origin: center top;
+
+        &::before {
+          top: 0;
+          border-bottom-color: var(--ard-slider-label-bg);
+          transform: translate(-50%, -100%);
+        }
+      }
     }
-  }
-  //hide other tooltips when a handle is focused
-  .ard-slider-container:focus-within {
-    .ard-slider-handle:not(:focus) {
+    //! showing and hiding tooltip
+    //show tooltip when handle is hovered or focused
+    .ard-slider-handle:hover,
+    .ard-slider-handle:focus {
       + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
-        transform: scale(0);
+        transform: scale(1);
+      }
+    }
+    //hide other tooltips when a handle is focused
+    .ard-slider-container:focus-within {
+      .ard-slider-handle:not(:focus) {
+        + .ard-slider-tooltip-wrapper .ard-slider-tooltip {
+          transform: scale(0);
+        }
+      }
+    }
+    //make a way to force-show a tooltip
+    .ard-slider-handle .ard-slider-tooltip-wrapper {
+      .ard-slider-tooltip.ard-tooltip-always {
+        transform: scale(1) !important;
       }
     }
   }
-  //make a way to force-show a tooltip
-  .ard-slider-handle .ard-slider-tooltip-wrapper.ard-tooltip-always {
-    .ard-slider-tooltip {
-      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,48 +1,68 @@
 @use './coloring' as C;
 @use '../variables' as ARD;
 
-.ard-snackbar {
-  @include C.typeColors();
-  min-width: min(21rem, 90vw);
-  max-width: min(42rem, 90vw);
-  min-height: 3rem;
-  margin: 0.625rem;
-  position: relative;
-  display: flex;
-  justify-content: stretch;
-  align-items: center;
-  gap: 0.625rem;
-  border-radius: 6px;
-  transform-origin: bottom center;
-  background-color: ARD.$bg-f-alt;
-  padding: 0 0.5rem 0 1rem;
-
-  opacity: 100%;
-  transform: scale(100%);
-  bottom: 0;
-  animation: show 150ms ease-out forwards;
-
-  .ard-snackbar-content {
+@layer ard-ui {
+  // 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: 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;
-    gap: 0.625rem;
+    justify-content: stretch;
     align-items: center;
-    flex-grow: 1;
-    color: ARD.$text2-alt;
+    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: 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 var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;
 
-    ard-icon {
-      color: var(--ard-cmpcl--content-light);
+    .ard-snackbar-content {
+      display: flex;
+      gap: var(--ard-snackbar-content-gap, 0.625rem);
+      align-items: center;
+      flex-grow: 1;
+      color: var(--ard-snackbar-content-color, #{ARD.$text2-alt});
+
+      ard-icon {
+        color: var(--ard-cmpcl--content-light);
+      }
     }
-  }
 
-  &.ard-snackbar-closing {
-    animation: hide 150ms ease-out forwards;
+    &.ard-snackbar-closing {
+      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,21 +1,31 @@
 @use './coloring' as CM;
 
-ard-spinner {
-  display: inline-block;
-  width: 2rem;
-  aspect-ratio: 1;
-  position: relative;
-  margin: 0.25rem;
-}
+@layer ard-ui {
+  // 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: var(--ard-spinner-size, 2rem);
+    aspect-ratio: 1;
+    position: relative;
+    margin: var(--ard-spinner-margin, 0.25rem);
+  }
 
-.ard-spinner {
-  @include CM.typeColors();
-  --ard-_spinner-duration: 1.4s;
-  position: absolute;
+  .ard-spinner {
+    @include CM.typeColors();
+    --ard-_spinner-duration: var(--ard-spinner-duration, 1.4s);
+    position: absolute;
 
-  scale: 2.3; //magic number
+    scale: 2.3; //magic number
 
-  > circle {
-    stroke: var(--ard-cmpcl--content);
+    > circle {
+      stroke: var(--ard-cmpcl--content);
+    }
   }
 }