@ardium-pl/ui 5.0.0-alpha.106

package/themes/default/buttons/button.scss

@@ -0,0 +1,119 @@
+@use './button-mixins' as shared;
+
+@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-aspect-ratio: auto;
+    --ard-button-border-style: solid;
+    --ard-button-border-width: 1px;
+    --ard-button-overlay-hover-opacity: 0.04;
+    --ard-button-overlay-focus-opacity: 0;
+    --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;
+    --ard-button-disabled-cursor: not-allowed;
+  }
+
+  ard-button {
+    display: flex;
+    width: max-content;
+    height: max-content;
+    justify-content: stretch;
+  }
+
+  .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),
+      var(--ard-button-border-style, solid),
+      var(--ard-button-border-width, 1px)
+    );
+    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: 100%;
+    min-width: max-content;
+    letter-spacing: 0.5px;
+    justify-content: center;
+    margin: 0;
+    user-select: none;
+    text-decoration: none;
+    flex-grow: 1;
+    aspect-ratio: var(--ard-button-aspect-ratio, auto);
+
+    //! aligns
+    &.ard-align-left {
+      flex-direction: row;
+    }
+    &.ard-align-right {
+      flex-direction: row-reverse;
+    }
+
+    //! button variants
+    &.ard-button-vertical {
+      height: max-content;
+      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-square {
+      width: var(--ard-button-height, 2.5em);
+      padding: 0;
+      aspect-ratio: 1 / 1;
+    }
+
+    //! 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-with-pointer-events-when-disabled {
+        pointer-events: all;
+        cursor: var(--ard-button-disabled-cursor, not-allowed);
+      }
+    }
+  }
+}

package/themes/default/buttons/fab.scss

@@ -0,0 +1,112 @@
+@use './button-mixins' as shared;
+@use '../mixins' as CM;
+
+@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-border-style: ;
+    // --ard-fab-border-width: ;
+    // --ard-fab-overlay-hover-opacity: ;
+    // --ard-fab-overlay-focus-opacity: ;
+    // --ard-fab-overlay-active-opacity: ;
+    // --ard-fab-overlay-focus-visible-opacity: ;
+    // --ard-fab-overlay-disabled-opacity: ;
+    // --ard-fab-disabled-opacity: ;
+    // --ard-fab-disabled-cursor: ;
+  }
+
+  ard-fab {
+    margin: var(--ard-fab-margin, 0.5rem);
+    display: block;
+    width: max-content;
+    height: max-content;
+  }
+
+  .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)),
+      var(--ard-fab-border-style, var(--ard-button-border-style, solid)),
+      var(--ard-fab-border-width, var(--ard-button-border-width, 1px))
+    );
+    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;
+    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-fab.ard-disabled {
+    > .ard-fab {
+      @include shared.button-disabled(
+        var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6)),
+        var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2))
+      );
+    }
+    &.ard-fab-with-pointer-events-when-disabled {
+      pointer-events: all;
+
+      > .ard-fab {
+        pointer-events: all;
+        cursor: var(--ard-fab-disabled-cursor, var(--ard-button-disabled-cursor, not-allowed));
+      }
+    }
+  }
+}
+
+@keyframes maxWidth {
+  0% {
+    max-width: 1.5em;
+  }
+  99% {
+    max-width: 21em;
+  }
+  100% {
+    max-width: unset;
+  }
+}

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

@@ -0,0 +1,91 @@
+@use './button-mixins' as shared;
+
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-icon-button-size: 2.1875em;
+    --ard-icon-button-size-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-disabled-cursor: ;
+  }
+
+  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-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)),
+      solid,
+      0,
+    );
+    background: transparent;
+    height: var(--ard-icon-button-size, 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: var(--ard-icon-button-icon-font-size);
+    }
+    //! compact
+    &.ard-compact {
+      height: var(--ard-icon-button-size-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);
+    }
+  }
+
+  ard-icon-button.ard-disabled {
+    > .ard-icon-button {
+      @include shared.button-disabled(
+        var(--ard-icon-button-disabled-opacity, var(--ard-button-disabled-opacity, 0.6)),
+        var(--ard-icon-button-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2))
+      );
+
+      .ard-focus-overlay {
+        opacity: 0;
+      }
+    }
+    &.ard-icon-button-with-pointer-events-when-disabled {
+      pointer-events: all;
+
+      > .ard-icon-button {
+        pointer-events: all;
+        cursor: var(--ard-icon-button-disabled-cursor, var(--ard-button-disabled-cursor, not-allowed));
+      }
+    }
+  }
+}

package/themes/default/calendar.scss

@@ -0,0 +1,298 @@
+@use './dropdown-arrow.scss' as DA;
+@use './mixins.scss' as DM;
+@use './coloring.scss' as CM;
+@use '../variables' as ARD;
+
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-calendar-grid-size: 2.25rem;
+    --ard-calendar-grid-gap: 0.25rem;
+    --ard-calendar-padding: 0.375rem;
+    --ard-calendar-header-padding: 0.375rem 0 0.75rem 0;
+    --ard-calendar-weekday-padding: 0 0 0.5rem 0;
+    --ard-calendar-weekday-font-size: 0.875rem;
+    --ard-calendar-weekday-font-weight: 500;
+    // --ard-calendar-weekday-color: ;
+    --ard-calendar-floating-month-transform: none;
+    --ard-calendar-floating-month-padding: 0 0 0 1rem;
+    --ard-calendar-floating-month-font-size: 0.875rem;
+    --ard-calendar-floating-month-font-weight: 500;
+    // --ard-calendar-floating-month-color: ;
+    --ard-calendar-entry-padding: 0;
+    --ard-calendar-entry-font-size: 0.875rem;
+    --ard-calendar-entry-font-weight: 400;
+    --ard-calendar-entry-border-radius: 9999px;
+    --ard-calendar-entry-range-overlay-border-width: 1px;
+    --ard-calendar-entry-range-overlay-border-style: dashed;
+    // --ard-calendar-entry-today-border-color: ;
+    --ard-calendar-entry-today-selected-border: 2px solid #{ARD.$bg};
+    --ard-calendar-entry-highlighted-overlay-opacity: 20%;
+    --ard-calendar-entry-selected-overlay-opacity: 100%;
+    --ard-calendar-entry-selected-range-overlay-opacity: 12%;
+    --ard-calendar-entry-disabled-overlay-opacity: 50%;
+    --ard-calendar-entry-disabled-highlighted-overlay-opacity: 15%;
+    --ard-calendar-entry-disabled-opacity: 50%;
+  }
+
+  .ard-calendar {
+    @include CM.typeColors();
+    min-width: calc(var(--ard-calendar-grid-size) * 7 + var(--ard-calendar-grid-gap) * 6);
+    user-select: none;
+    padding: var(--ard-calendar-padding, 0 0.375rem 0.375rem 0.375rem);
+    box-sizing: content-box;
+
+    //! top toolbar
+    .ard-calendar__top-toolbar {
+      .ard-calendar__calendar-header {
+        display: grid;
+        grid-template-columns: 1fr 5fr 1fr;
+        align-items: center;
+        justify-items: center;
+        width: 100%;
+        padding: var(--ard-calendar-header-padding, 0.75rem 0);
+
+        .ard-dropdown-arrow {
+          @include DA.dropdown-arrow();
+        }
+      }
+    }
+    .ard-years-view {
+      .ard-dropdown-arrow {
+        rotate: 180deg;
+      }
+    }
+    //! weekdays
+    .ard-calendar__weekdays {
+      display: grid;
+      grid-template-columns: repeat(7, var(--ard-calendar-grid-size, 2.25rem));
+      gap: var(--ard-calendar-grid-gap, 0.25rem);
+      align-items: center;
+      padding: var(--ard-calendar-weekday-padding, 0 0 0.5rem 0);
+
+      .ard-calendar__weekday {
+        text-align: center;
+        font-size: var(--ard-calendar-weekday-font-size, 0.875rem);
+        font-weight: var(--ard-calendar-weekday-font-weight, 500);
+        color: var(--ard-calendar-weekday-color, #{ARD.$text});
+      }
+    }
+    //! days grid
+    .ard-calendar__days-grid {
+      padding: 0;
+      display: grid;
+      grid-template-columns: repeat(7, var(--ard-calendar-grid-size));
+      position: relative;
+      outline: none;
+      gap: var(--ard-calendar-grid-gap, 0.25rem);
+
+      > * {
+        width: var(--ard-calendar-grid-size);
+        max-width: var(--ard-calendar-grid-size);
+        height: var(--ard-calendar-grid-size);
+        max-height: var(--ard-calendar-grid-size);
+        box-sizing: border-box;
+      }
+      &.ard-reserve-top-row {
+        padding-top: calc(var(--ard-calendar-grid-size) + var(--ard-calendar-grid-gap));
+      }
+      .ard-calendar__floating-month {
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: var(--ard-calendar-floating-month-transform, none);
+        width: 100%;
+        box-sizing: border-box;
+        aspect-ratio: 7;
+        padding: var(--ard-calendar-floating-month-padding, 0 0 0 1rem);
+        display: flex;
+        align-items: center;
+        font-size: var(--ard-calendar-floating-month-font-size, 0.875rem);
+        font-weight: var(--ard-calendar-floating-month-font-weight, 500);
+        color: var(--ard-calendar-floating-month-color, #{ARD.$text3});
+        letter-spacing: 0.5px;
+      }
+    }
+    //! years grid
+    .ard-calendar__simple-grid {
+      border-top: 1px solid ARD.$detail-ultralight;
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(6, var(--ard-calendar-grid-size));
+      position: relative;
+      outline: none;
+      padding: 0;
+      gap: var(--ard-calendar-grid-gap, 0.25rem);
+
+      > * {
+        max-width: 100%;
+        box-sizing: border-box;
+      }
+    }
+    //! common in both grids
+    .ard-calendar__entry {
+      z-index: 1;
+      cursor: pointer;
+      outline: none;
+      padding: var(--ard-calendar-entry-padding, 0);
+      box-sizing: border-box;
+
+      .ard-calendar__entry-button {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: var(--ard-calendar-entry-font-size, 0.875rem);
+        font-weight: var(--ard-calendar-entry-font-weight, 400);
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: var(--ard-calendar-entry-border-radius, 9999px);
+        position: relative;
+        cursor: pointer;
+        outline: none;
+        box-sizing: border-box;
+
+        .ard-focus-overlay {
+          @include DM.focus-overlay();
+          z-index: -1;
+          background: var(--ard-cmpcl--overlay);
+          transition:
+            border-color 0.1s ease,
+            opacity 0.1s ease;
+        }
+        .ard-range-overlay {
+          @include DM.focus-overlay();
+          z-index: -1;
+          opacity: 1;
+          left: calc(var(--ard-calendar-grid-gap, 0.25rem) / -2 - 1px);
+          right: calc(var(--ard-calendar-grid-gap, 0.25rem) / -2 - 1px);
+          border: var(--ard-calendar-entry-range-overlay-border-width, 1px)
+            var(--ard-calendar-entry-range-overlay-border-style, dashed) transparent;
+          background: transparent;
+          transition: none;
+          border-radius: 0;
+        }
+      }
+      &.ard-calendar__entry-empty {
+        cursor: default;
+      }
+      &.ard-calendar-today {
+        .ard-calendar__entry-button {
+          border-color: var(--ard-calendar-entry-today-border-color, #{ARD.$detail});
+        }
+      }
+      &.ard-calendar__entry-highlighted-in-range {
+        .ard-range-overlay {
+          opacity: 1;
+          border-top-color: var(--ard-cmpcl--bg-colored);
+          border-bottom-color: var(--ard-cmpcl--bg-colored);
+        }
+        &.ard-calendar__entry-selected-start {
+          .ard-range-overlay {
+            border-left-color: var(--ard-cmpcl--bg-colored);
+          }
+        }
+        &.ard-calendar__entry-selected-end,
+        &.ard-calendar__entry-highlighted {
+          .ard-range-overlay {
+            border-right-color: var(--ard-cmpcl--bg-colored);
+          }
+        }
+      }
+      &.ard-calendar__entry-highlighted {
+        .ard-focus-overlay {
+          opacity: var(--ard-calendar-entry-highlighted-overlay-opacity, 20%);
+        }
+      }
+      &.ard-calendar__entry-selected-start {
+        .ard-range-overlay {
+          left: 0;
+          border-top-left-radius: var(--ard-calendar-entry-border-radius);
+          border-bottom-left-radius: var(--ard-calendar-entry-border-radius);
+        }
+      }
+      &.ard-calendar__entry-selected-end,
+      &.ard-calendar__entry-highlighted:not(.ard-calendar__entry-selected-in-range) {
+        .ard-range-overlay {
+          right: 0;
+          border-top-right-radius: var(--ard-calendar-entry-border-radius);
+          border-bottom-right-radius: var(--ard-calendar-entry-border-radius);
+        }
+      }
+      &.ard-calendar__entry-selected-in-range {
+        .ard-range-overlay {
+          opacity: var(--ard-calendar-entry-selected-range-overlay-opacity, 12%);
+          background-color: var(--ard-cmpcl--bg-colored);
+        }
+      }
+      &.ard-calendar__entry-selected {
+        .ard-calendar__entry-button {
+          color: var(--ard-cmpcl--on-bg-colored);
+        }
+        .ard-focus-overlay {
+          opacity: var(--ard-calendar-entry-selected-overlay-opacity, 100%);
+          background: var(--ard-cmpcl--bg-colored);
+        }
+
+        &.ard-calendar-today {
+          .ard-focus-overlay {
+            border: var(--ard-calendar-entry-today-selected-border, 2px solid #{ARD.$bg});
+          }
+        }
+      }
+      &.ard-calendar__entry-disabled {
+        pointer-events: none;
+        opacity: var(--ard-calendar-entry-disabled-overlay-opacity, 50%);
+
+        .ard-calendar__entry-button {
+          cursor: default;
+        }
+        .ard-focus-overlay {
+          background: var(--ard-cmpcl--overlay);
+        }
+        &.ard-calendar__entry-highlighted {
+          .ard-focus-overlay {
+            opacity: var(--ard-calendar-entry-disabled-highlighted-overlay-opacity, 15%);
+          }
+        }
+      }
+    }
+    .ard-years-view,
+    .ard-months-view {
+      .ard-calendar__entry {
+        .ard-calendar__entry-button {
+          .ard-range-overlay {
+            left: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
+            right: calc(-var(--ard-calendar-grid-gap) / 2 - 1px);
+            border: none;
+          }
+        }
+
+        &.ard-calendar__entry-selected-start {
+          .ard-range-overlay {
+            left: 0;
+          }
+        }
+        &.ard-calendar__entry-selected-end {
+          .ard-range-overlay {
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+  .ard-readonly,
+  .ard-disabled {
+    .ard-calendar {
+      pointer-events: none;
+    }
+  }
+  .ard-disabled {
+    .ard-calendar {
+      opacity: var(--ard-calendar-entry-disabled-opacity, 50%);
+    }
+  }
+}