@ardium-pl/ui 5.0.0-alpha.106

package/themes/default/slider.scss

@@ -0,0 +1,287 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@use 'sass:math';
+@use '../variables' as ARD;
+
+@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;
+    // --ard-slider-readonly-cursor: ;
+  }
+
+  .ard-slider-container-master,
+  .ard-range-slider-container-master {
+    @include coloringMixins.typeColors();
+
+    position: relative;
+    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;
+      }
+    }
+
+    //! container
+    .ard-slider-container {
+      display: flex;
+      align-items: center;
+      position: relative;
+      width: 100%;
+      height: var(--ard-slider-handle-size, 1.25em);
+      cursor: pointer;
+    }
+    //! 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;
+        }
+      }
+      .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%);
+      }
+    }
+    //! 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 {
+        @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: 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;
+
+        .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;
+
+      .ard-slider-label {
+        transform: translateX(-50%);
+      }
+    }
+    //! tooltip
+    .ard-slider-tooltip-wrapper {
+      transition: left var(--_ard-slider-transition) ease;
+      z-index: 2;
+    }
+    .ard-slider-tooltip {
+      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 {
+        content: '';
+        position: absolute;
+        border: var(--ard-slider-label-arrow-size, 0.375em) solid transparent;
+        left: 50%;
+      }
+    }
+    &.ard-tooltip-top {
+      .ard-slider-tooltip {
+        bottom: var(--ard-slider-label-offset, 0.5em);
+        transform-origin: center bottom;
+
+        &::before {
+          bottom: 0;
+          border-top-color: var(--ard-slider-label-b, var(--ard-text3));
+          transform: translate(-50%, 100%);
+        }
+      }
+    }
+    &.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, var(--ard-text3));
+          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);
+      }
+    }
+    //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;
+      }
+    }
+  }
+  .ard-body-slider-handle-grabbed {
+    cursor: grabbing !important;
+
+    * {
+      cursor: grabbing !important;
+      pointer-events: none !important;
+    }
+  }
+  .ard-disabled,
+  .ard-readonly {
+    .ard-slider-container-master,
+    .ard-range-slider-container-master {
+      cursor: var(--ard-slider-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      .ard-slider-container {
+        cursor: inherit;
+
+        .ard-slider-handle {
+          cursor: inherit;
+
+          .ard-focus-overlay {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

package/themes/default/snackbar.scss

@@ -0,0 +1,78 @@
+@use './coloring' as C;
+@use '../variables' as ARD;
+
+@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;
+    justify-content: stretch;
+    align-items: center;
+    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-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 var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;
+    }
+  }
+}
+
+@mixin animation {
+  opacity: 0%;
+  transform: scale(var(--ard-snackbar-animation-scale, 60%));
+  bottom: var(--ard-snackbar-animation-bottom, -0.375rem);
+}
+
+@keyframes show {
+  from {
+    @include animation();
+  }
+}
+
+@keyframes hide {
+  to {
+    @include animation();
+  }
+}

package/themes/default/spinner.scss

@@ -0,0 +1,31 @@
+@use './coloring' as CM;
+
+@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: var(--ard-spinner-duration, 1.4s);
+    position: absolute;
+
+    scale: 2.3; //magic number
+
+    > circle {
+      stroke: var(--ard-cmpcl--content);
+    }
+  }
+}

package/themes/default/stars.scss

@@ -0,0 +1,133 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@use '../variables' as ARD;
+
+@layer ard-ui {
+  // 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: 30%;
+    --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-button-readonly-cursor: ;
+    // --ard-rating-input-readonly-cursor: ;
+  }
+
+  .ard-star,
+  .ard-star-button,
+  .ard-rating-display,
+  .ard-rating-input {
+    @include coloringMixins.typeColors();
+    color: var(--ard-cmpcl--bg-colored);
+
+    &.ard-color-gold {
+      color: ARD.$gold;
+    }
+  }
+  .ard-star {
+    font-size: inherit;
+    width: var(--ard-star-size, 1.5em);
+    height: var(--ard-star-size, 1.5em);
+    position: relative;
+  }
+  .ard-rating-display,
+  .ard-rating-input {
+    display: flex;
+    user-select: none;
+  }
+  .ard-rating-input {
+    cursor: pointer;
+
+    .ard-star-not-in-value {
+      opacity: var(--ard-rating-input-not-in-value-opacity, 50%);
+    }
+  }
+  .ard-star-button {
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    font-size: inherit;
+    width: max-content;
+    height: max-content;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    outline: none;
+
+    .ard-hitbox {
+      position: absolute;
+      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: 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 {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-hover-overlay-opacity, 10%);
+      }
+    }
+    &:focus {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-focus-overlay-opacity, 0%);
+      }
+    }
+    &:focus-visible {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-focus-visible-overlay-opacity, 30%);
+      }
+    }
+    &:active {
+      .ard-focus-overlay {
+        opacity: var(--ard-star-button-active-overlay-opacity, 20%);
+      }
+    }
+  }
+  //! disabled state for star-button
+  .ard-disabled {
+    > .ard-star-button {
+      pointer-events: none;
+      opacity: var(--ard-star-button-disabled-opacity, 50%);
+    }
+    > .ard-rating-input {
+      pointer-events: none;
+      opacity: var(--ard-rating-input-disabled-opacity, 50%);
+    }
+  }
+  //! readonly state for star-button and rating-input
+  .ard-readonly {
+    > .ard-star-button {
+      cursor: var(--ard-star-button-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      .ard-focus-overlay {
+        display: none;
+      }
+    }
+    > .ard-rating-input {
+      cursor: var(--ard-rating-input-readonly-cursor, var(--ard-readonly-cursor, default));
+    }
+  }
+}

package/themes/default/tabber.scss

@@ -0,0 +1,131 @@
+@use './coloring' as CM;
+@use './mixins' as M;
+
+@layer ard-ui {
+  // 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%;
+  }
+
+  .ard-tabber {
+    @include CM.typeColors();
+    height: max-content;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    font-family: var(--ard-font-family);
+
+    .ard-tabber-tabs {
+      max-width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      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-center {
+        justify-content: center;
+      }
+      &.ard-tab-align-right {
+        justify-content: right;
+      }
+      &.ard-stretch-tabs {
+        justify-content: stretch;
+
+        .ard-tab-button {
+          flex-grow: 1;
+        }
+      }
+
+      .ard-tab-button {
+        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: 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: 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: var(--ard-tabber-tab-hover-overlay-opacity, 4%);
+          }
+        }
+        &.ard-active,
+        &:active {
+          .ard-focus-overlay {
+            opacity: var(--ard-tabber-tab-active-overlay-opacity, 12%);
+          }
+        }
+        &:focus-visible {
+          .ard-focus-overlay {
+            opacity: var(--ard-tabber-tab-focus-visible-overlay-opacity, 18%);
+          }
+        }
+
+        &.ard-tab-active {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            height: 2px;
+            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;
+          }
+        }
+      }
+    }
+  }
+}