@ardium-ui/ui 1.0.0

package/themes/default/buttons/button.scss

@@ -0,0 +1,62 @@
+@use './button-mixins' as shared;
+
+ard-button {
+    display: block;
+    width: max-content;
+    height: max-content;
+}
+
+.ard-button {
+    @include shared.button;
+    background: transparent;
+    gap: 6px;
+    font-size: 0.875rem;
+    height: 2.5em;
+    padding: 0 1.2em;
+    letter-spacing: 0.5px;
+
+    //! aligns
+    &.ard-align-left {
+        flex-direction: row;
+    }
+    &.ard-align-right {
+        flex-direction: row-reverse;
+    }
+
+    //! button variants
+    &.ard-button-vertical {
+        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;
+    }
+
+    //! compact
+    &.ard-compact {
+        font-size: 0.75rem;
+        height: 2.25em;
+        padding: 0 0.9em;
+
+        &.ard-button-vertical {
+            height: max-content;
+            padding: 0.2em 0.8em;
+            gap: 0;
+        }
+    }
+}
+
+ard-button.ard-disabled {
+    > .ard-button {
+        @include shared.button-disabled;
+    }
+}

package/themes/default/buttons/fab.scss

@@ -0,0 +1,72 @@
+@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;
+    padding: 1rem;
+
+    &.ard-fab-size-standard {
+        --ard-_fab-size: 3.5rem;
+        font-size: 1rem;
+    }
+    &.ard-fab-size-small {
+        --ard-_fab-size: 2.5rem;
+        font-size: 0.875rem;
+        padding: 0.5625rem;
+    }
+    &.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-button-content {
+        gap: 1em;
+        font-weight: 500;
+        justify-content: flex-start !important;
+        max-width: 1.5em;
+        overflow: hidden;
+        transition: max-width 0.5s ease;
+    }
+
+    &.ard-appearance-transparent {
+        @include CM.focus-overlay-scale-addon();
+    }
+}
+
+ard-fab.ard-disabled {
+    > .ard-fab {
+        @include shared.button-disabled;
+    }
+}
+
+@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,59 @@
+@use './button-mixins' as shared;
+
+ard-icon-button {
+    height: max-content;
+    width: max-content;
+    border-radius: 9999px;
+    aspect-ratio: 1;
+    display: inline-block;
+}
+
+.ard-icon-button {
+    @include shared.button;
+    background: transparent;
+    height: 2.1875rem;
+    border-radius: 9999px;
+    aspect-ratio: 1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    overflow: hidden;
+    font-weight: 600;
+    color: var(--ard-cmpcl--bg-colored) !important;
+
+    .ard-button-content {
+        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+
+        > ard-icon {
+            font-weight: 500;
+            font-size: 1.5rem;
+            font-variation-settings: 'FILL' 1;
+        }
+    }
+
+    //! compact
+    &.ard-compact {
+        font-size: 0.75rem;
+        height: 1.6875rem;
+
+        .ard-button-content {
+            font-size: 1.0625rem;
+
+            > ard-icon {
+                font-size: 1.25rem;
+            }
+        }
+    }
+}
+
+ard-icon-button.ard-disabled {
+    > .ard-icon-button {
+        @include shared.button-disabled;
+
+        .ard-focus-overlay {
+            opacity: 0;
+        }
+    }
+}

package/themes/default/calendar.scss

@@ -0,0 +1,182 @@
+@use './dropdown-arrow.scss' as DA;
+@use './mixins.scss' as DM;
+@use './coloring.scss' as CM;
+@import '../variables';
+
+.ard-calendar {
+    @include CM.typeColors();
+    width: 18.5rem;
+    background: $bg;
+    user-select: none;
+
+    .ard-calendar-header-container {
+        display: flex;
+        align-items: center;
+        justify-content: stretch;
+
+        .ard-calendar-days-view-header {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+
+            .ard-calendar-header-button .ard-button-content {
+                display: flex;
+                gap: 0.375rem;
+                align-items: center;
+
+                .ard-dropdown-arrow {
+                    @include DA.dropdown-arrow();
+                }
+            }
+            .ard-calendar-arrows {
+                display: flex;
+                gap: 0.375rem;
+
+                > ard-fab {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    //! main container
+    .ard-calendar-main-container {
+        padding: 0.375rem;
+        padding-top: 0;
+    }
+    //! calendar entries
+    .ard-calendar-entry {
+        z-index: 1;
+        cursor: pointer;
+        outline: none;
+
+        .ard-calendar-entry-button {
+            $_margin: 0.125rem;
+            background: transparent;
+            border: 1px solid transparent;
+            width: calc(100% - #{$_margin * 2});
+            height: calc(100% - #{$_margin * 2});
+            padding: 0;
+            position: relative;
+            border-radius: 9999px;
+            cursor: pointer;
+            margin: $_margin;
+
+            .ard-focus-overlay {
+                @include DM.focus-overlay();
+                z-index: -1;
+                background: var(--ard-cmpcl--bg-colored);
+                border: 2px solid transparent;
+                transition:
+                    border-color 0.2s ease,
+                    opacity 0.2s ease;
+            }
+        }
+        &.ard-calendar-entry-empty {
+            cursor: default;
+        }
+        &.ard-calendar-today {
+            .ard-calendar-entry-button {
+                border-color: $detail;
+            }
+        }
+        &.ard-calendar-entry-highlighted {
+            .ard-focus-overlay {
+                opacity: 20%;
+            }
+        }
+        &.ard-calendar-entry-selected {
+            .ard-calendar-entry-button {
+                color: var(--ard-cmpcl--on-bg-colored);
+            }
+            .ard-focus-overlay {
+                opacity: 100%;
+            }
+
+            &.ard-calendar-today {
+                .ard-focus-overlay {
+                    border-color: $bg;
+                }
+            }
+        }
+    }
+    //! days view
+    .ard-calendar-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+
+        > * {
+            max-width: 100%;
+            box-sizing: border-box;
+            aspect-ratio: 1;
+        }
+    }
+    .ard-calendar-day-labels {
+        font-size: 0.8125rem;
+        color: $text3;
+        height: 1.25rem;
+        position: relative;
+
+        > * {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            aspect-ratio: unset;
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            width: 100%;
+            height: 1px;
+            background: $detail-ultralight;
+            bottom: 0;
+        }
+    }
+    .ard-calendar-main-grid {
+        position: relative;
+
+        &.ard-reserve-top-row {
+            padding-top: 14.285714%;
+        }
+        .ard-calendar-floating-month {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            box-sizing: border-box;
+            aspect-ratio: 7;
+            padding-left: 0.5rem;
+            display: flex;
+            align-items: center;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: $text3;
+            letter-spacing: 0.5px;
+        }
+    }
+    //! years & months view
+    .ard-calendar-simple-grid {
+        border-top: 1px solid $detail-ultralight;
+        margin-top: 0.25rem;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-template-rows: repeat(6, 1fr);
+
+        > * {
+            max-width: 100%;
+            box-sizing: border-box;
+            aspect-ratio: 7/4; //it has to be the same height as in the days view
+            //before it was 7/7 (1) because there are 7 entries in a single row
+            //now there are 4 entries, and thus 7/4
+        }
+    }
+    //! interactions
+    &.ard-calendar-nointeract {
+        .ard-calendar-main-container {
+            pointer-events: none;
+        }
+    }
+    //! static height
+    &.ard-calendar-static-height {
+        height: 19.5rem;
+    }
+}

package/themes/default/card.scss

@@ -0,0 +1,126 @@
+@import '../variables';
+
+ard-card,
+.ard-card {
+    position: relative;
+    background: $bg;
+    box-sizing: border-box;
+    width: 100%;
+    height: max-content;
+    display: block;
+
+    //! appearances
+    &.ard-appearance-outlined {
+        border: 1px solid $border;
+    }
+    &.ard-appearance-raised {
+        box-shadow: $card-shadow;
+    }
+    //! variants
+    &.ard-variant-sharp {
+        border-radius: 0;
+    }
+    &.ard-variant-rounded {
+        border-radius: 8px;
+    }
+}
+//! header
+ard-card-header {
+    padding: 0.5em 1em 0 1em;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1em;
+
+    .ard-card-header-title-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    &:first-child {
+        padding-top: 1em;
+    }
+}
+.ard-card-title,
+.ard-card-subtitle {
+    line-height: normal;
+    display: block;
+    margin: 0;
+    font-weight: 500;
+}
+.ard-card-title {
+    font-size: 1.25em;
+    letter-spacing: 0.0125em;
+    color: $text;
+}
+.ard-card-subtitle {
+    font-size: 0.875em;
+    letter-spacing: 0.0078125;
+    color: $text3;
+    opacity: 80%;
+}
+.ard-card-avatar {
+    display: block;
+    width: 2.5em;
+    height: 2.5em;
+    border-radius: 9999px;
+    flex-shrink: 0;
+    object-fit: cover;
+
+    ~ .ard-card-header-title-container {
+        padding: 0 1em;
+    }
+}
+//! image
+.ard-card-image {
+    position: relative;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    max-width: 100%;
+
+    &:first-child {
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+    }
+    &:last-child {
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+}
+//! content
+.ard-card-content {
+    padding: 0 1em;
+    display: block;
+
+    &:first-child {
+        padding-top: 1em;
+    }
+    &:last-child {
+        padding-bottom: 1em;
+    }
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+//! action buttons
+.ard-card-action-buttons {
+    padding: 0.5em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &.ard-align-left {
+        justify-content: flex-start;
+    }
+    &.ard-align-middle {
+        justify-content: center;
+    }
+    &.ard-align-right {
+        justify-content: flex-end;
+    }
+}
+//! footer
+//no styling needed

package/themes/default/checkbox-list.scss

@@ -0,0 +1,83 @@
+@use './mixins' as CM;
+@import '../variables';
+
+.ard-checkbox-list {
+    display: flex;
+    flex-direction: column;
+
+    .ard-checkbox-list__item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0 1rem;
+        position: relative;
+        cursor: pointer;
+        height: 3rem;
+
+        > label {
+            pointer-events: none;
+            user-select: none;
+        }
+        > .ard-focus-overlay {
+            @include CM.focus-overlay();
+            background: $overlay;
+        }
+        &.ard-item-highlighted {
+            > .ard-focus-overlay {
+                opacity: 5%;
+            }
+        }
+        &:active {
+            > .ard-focus-overlay {
+                opacity: 15%;
+            }
+        }
+        ard-checkbox {
+            padding: 0.625rem;
+
+            .ard-checkbox {
+                .ard-focus-overlay {
+                    display: none;
+                }
+            }
+        }
+        &.ard-item-disabled {
+            pointer-events: none;
+
+            > label {
+                opacity: 50%;
+            }
+        }
+    }
+    &.ard-compact {
+        .ard-checkbox-list__item {
+            gap: 0.325rem;
+            height: 2rem;
+        }
+    }
+    //! ALIGN TYPES
+    &.ard-align-left-clumped,
+    &.ard-align-left-split {
+        .ard-checkbox-list__item {
+            flex-direction: row;
+        }
+    }
+    &.ard-align-right-clumped,
+    &.ard-align-right-split {
+        .ard-checkbox-list__item {
+            flex-direction: row-reverse;
+        }
+    }
+    &.ard-align-left-clumped,
+    &.ard-align-right-clumped {
+        .ard-checkbox-list__item {
+            justify-content: flex-start;
+        }
+    }
+    &.ard-align-left-split,
+    &.ard-align-right-split {
+        .ard-checkbox-list__item {
+            justify-content: space-between;
+        }
+    }
+}

package/themes/default/checkbox.scss

@@ -0,0 +1,109 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-checkbox {
+    @include coloringMixins.typeColors();
+    @include coloringMixins.typeColors('unsel-cmpcl');
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    width: 1.25em;
+    height: 1.25em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+
+    color: $text2;
+    &.ard-color-currentColor {
+        color: currentColor;
+    }
+
+    .ard-hitbox {
+        position: absolute;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        top: -4px;
+    }
+    .ard-focus-overlay {
+        @include defaultMixins.focus-overlay(0.4em);
+        border-radius: 999px;
+        background: currentColor;
+    }
+    .ard-checkbox-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        height: 1.8em; //the height of the icon
+        display: none;
+        opacity: 80%;
+        transition: opacity 0.2s $timing-fn;
+
+        &::after {
+            @include defaultMixins.icon(0, 600);
+        }
+    }
+    .ard-icon-for-selected::after {
+        @include defaultMixins.icon(1, 500);
+        content: 'check_box';
+    }
+    .ard-icon-for-indeterminate::after {
+        content: 'indeterminate_check_box';
+    }
+    .ard-icon-for-unselected::after {
+        content: 'check_box_outline_blank';
+    }
+
+    &.ard-checkbox-selected {
+        color: var(--ard-unsel-cmpcl--bg-colored);
+
+        .ard-checkbox-icon {
+            opacity: 90%;
+        }
+    }
+    &.ard-checkbox-selected {
+        .ard-icon-for-selected {
+            display: block;
+        }
+    }
+    &.ard-checkbox-indeterminate {
+        .ard-icon-for-indeterminate {
+            display: block;
+        }
+    }
+    &.ard-checkbox-unselected {
+        .ard-icon-for-unselected {
+            display: block;
+        }
+    }
+    &:hover,
+    &:focus {
+        .ard-checkbox-icon {
+            opacity: 100%;
+        }
+        .ard-focus-overlay {
+            opacity: 10%;
+        }
+    }
+    &:active {
+        .ard-focus-overlay {
+            opacity: 20%;
+        }
+    }
+}
+//! disabled state
+.ard-disabled .ard-checkbox {
+    pointer-events: none;
+    opacity: 40%;
+
+    &.ard-checkbox-selected,
+    &.ard-checkbox-indeterminate {
+        opacity: 50%;
+    }
+}