@ardium-ui/ui 1.0.0

package/themes/default/slide-toggle.scss

@@ -0,0 +1,151 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-slide-toggle {
+    @include coloringMixins.typeColors();
+    position: relative;
+    height: 1.25em;
+    font-size: inherit;
+    cursor: pointer;
+    user-select: none;
+    border: none;
+    background: none;
+    padding: 0;
+
+    .ard-hitbox {
+        position: absolute;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        top: -4px;
+    }
+    .ard-slide-toggle-track {
+        position: relative;
+        width: 2.25em;
+        height: 0.75em;
+        font-size: inherit;
+        border-radius: 999px;
+        overflow: hidden;
+        background: $bg;
+
+        .ard-slide-toggle-track-overlay {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            top: 0;
+            background: $overlay;
+            opacity: 20%;
+        }
+    }
+    .ard-slide-toggle-handle {
+        width: 1.25em;
+        height: 1.25em;
+        font-size: inherit;
+        border-radius: 999px;
+        background: $bg-f;
+        position: absolute;
+        top: 0;
+        left: 0;
+        box-shadow: $simple-shadow;
+        overflow: hidden;
+
+        transition:
+            box-shadow 0.28s $timing-fn,
+            left 0.1s ease,
+            background-color 0.1s ease,
+            transform 0.1s ease;
+
+        .ard-focus-overlay {
+            @include defaultMixins.focus-overlay;
+            background: var(--ard-cmpcl--overlay-colored);
+        }
+        .ard-slide-toggle-icon {
+            @include defaultMixins.icon(0, 600);
+            font-size: 0.95em;
+            color: $text;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            transition: color 0.1s ease;
+
+            &.ard-icon-for-selected {
+                display: none;
+            }
+            &.ard-icon-for-unselected {
+                display: block;
+            }
+        }
+    }
+    &:hover,
+    &:focus {
+        .ard-slide-toggle-handle {
+            box-shadow: $simple-shadow2;
+
+            .ard-focus-overlay {
+                opacity: 4%;
+            }
+        }
+    }
+    &:active {
+        .ard-slide-toggle-handle {
+            box-shadow: $simple-shadow3;
+
+            .ard-focus-overlay {
+                opacity: 12%;
+            }
+        }
+    }
+}
+.ard-slide-toggle.ard-slide-toggle-selected {
+    .ard-slide-toggle-track-overlay {
+        background: var(--ard-cmpcl--content);
+        opacity: 40%;
+    }
+    .ard-slide-toggle-handle {
+        left: 100%;
+        transform: translateX(-100%);
+        background: var(--ard-cmpcl--bg);
+
+        .ard-slide-toggle-icon {
+            color: var(--ard-cmpcl--on-bg);
+
+            &.ard-icon-for-selected {
+                display: block;
+            }
+            &.ard-icon-for-unselected {
+                display: none;
+            }
+        }
+    }
+    //edge case for no coloring
+    &.ard-color-none {
+        .ard-slide-toggle-track-overlay {
+            opacity: 35%;
+        }
+    }
+}
+//! disabled state
+.ard-disabled .ard-slide-toggle {
+    pointer-events: none;
+    opacity: 60%;
+
+    .ard-slide-toggle-track-overlay {
+        opacity: 20%;
+    }
+    .ard-focus-overlay {
+        opacity: 20%;
+    }
+    .ard-slide-toggle-icon {
+        opacity: 60%;
+    }
+    //edge case for no coloring and for unselected state
+    &.ard-color-none,
+    &:not(.ard-slide-toggle-selected) {
+        .ard-slide-toggle-track-overlay {
+            opacity: 12.5%;
+        }
+    }
+}

package/themes/default/slider.scss

@@ -0,0 +1,224 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@use 'sass:math';
+@import '../variables';
+
+.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;
+        }
+    }
+
+    //! container
+    .ard-slider-container {
+        display: flex;
+        align-items: center;
+        position: relative;
+        width: 100%;
+        height: 1.25em;
+        cursor: pointer;
+    }
+    //! track
+    .ard-slider-track {
+        width: 100%;
+        height: 0.25em;
+        background: $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;
+            }
+        }
+        .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: $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: $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;
+        }
+        &:hover {
+            .ard-focus-overlay {
+                opacity: 7.5%;
+            }
+        }
+        &:focus {
+            box-shadow: $simple-shadow2;
+            .ard-focus-overlay {
+                opacity: 15%;
+            }
+        }
+        &:active,
+        &.ard-grabbed {
+            .ard-focus-overlay {
+                opacity: 25%;
+            }
+        }
+    }
+    .ard-slider-label-container {
+        position: relative;
+        font-size: 0.9em;
+        padding-top: 0.2em;
+        left: 2px;
+        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 {
+        --ard-background: #{$text3};
+        background: var(--ard-background);
+        color: $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;
+
+        transform: scale(0);
+        transition: transform 0.1s $timing-fn;
+
+        &::before {
+            content: '';
+            position: absolute;
+            border: 0.375em solid transparent;
+            left: 50%;
+        }
+    }
+    &.ard-tooltip-top {
+        .ard-slider-tooltip {
+            bottom: 0.5em;
+
+            &::before {
+                bottom: 0;
+                border-top-color: var(--ard-background);
+                transform: translate(-50%, 100%);
+            }
+        }
+    }
+    &.ard-tooltip-bottom {
+        .ard-slider-tooltip {
+            top: 0.5em;
+
+            &::before {
+                top: 0;
+                border-bottom-color: var(--ard-background);
+                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-tooltip-always {
+        .ard-slider-tooltip {
+            transform: scale(1) !important;
+        }
+    }
+}

package/themes/default/snackbar.scss

@@ -0,0 +1,60 @@
+@use './coloring' as C;
+@import '../variables';
+
+@import '@angular/cdk/overlay-prebuilt.css';
+
+.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: $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 {
+        display: flex;
+        gap: 0.625rem;
+        align-items: center;
+        flex-grow: 1;
+        color: $text2-alt;
+
+        ard-icon {
+            color: var(--ard-cmpcl--content-light);
+        }
+    }
+
+    &.ard-snackbar-closing {
+        animation: hide 150ms ease-out forwards;
+    }
+}
+
+@mixin animation {
+    opacity: 0%;
+    transform: scale(60%);
+    bottom: -0.375rem;
+}
+
+@keyframes show {
+    from {
+        @include animation();
+    }
+}
+
+@keyframes hide {
+    to {
+        @include animation();
+    }
+}

package/themes/default/spinner.scss

@@ -0,0 +1,21 @@
+@use './coloring' as CM;
+
+ard-spinner {
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+    position: relative;
+    margin: 0.25rem;
+}
+
+.ard-spinner {
+    @include CM.typeColors();
+    --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,122 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-star,
+.ard-star-button,
+.ard-star-display,
+.ard-star-input {
+    @include coloringMixins.typeColors();
+    color: var(--ard-cmpcl--bg-colored);
+
+    &.ard-color-star {
+        color: $star;
+    }
+}
+.ard-star {
+    font-size: 1.5em;
+    width: 1em;
+    height: 1em;
+    position: relative;
+
+    .ard-star-icon {
+        display: none;
+    }
+    .ard-star-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .ard-star-selected::after {
+        content: 'star';
+        @include defaultMixins.icon(1);
+        font-size: 1em;
+        line-height: unset;
+    }
+    .ard-star-half::after {
+        content: 'star_half';
+        @include defaultMixins.icon;
+        font-size: 1em;
+        line-height: unset;
+    }
+    .ard-star-unselected::after {
+        content: 'star';
+        @include defaultMixins.icon;
+        font-size: 1em;
+        line-height: unset;
+    }
+    &.ard-star-fill-none .ard-star-unselected {
+        display: block;
+    }
+    &.ard-star-fill-half .ard-star-half {
+        display: block;
+    }
+    &.ard-star-fill-filled .ard-star-selected {
+        display: block;
+    }
+}
+.ard-star-display,
+.ard-star-input {
+    display: flex;
+    user-select: none;
+}
+.ard-star-input {
+    cursor: pointer;
+
+    .ard-star-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: -4px;
+        right: -4px;
+        bottom: -4px;
+        top: -4px;
+    }
+
+    .ard-focus-overlay {
+        @include defaultMixins.focus-overlay;
+        position: absolute;
+        left: -0.125em;
+        right: -0.125em;
+        bottom: -0.125em;
+        top: -0.125em;
+        border-radius: 999px;
+        background: currentColor;
+    }
+    @include defaultMixins.focus-overlay-scale-addon();
+    &:hover,
+    &:focus {
+        .ard-focus-overlay {
+            opacity: 10%;
+        }
+    }
+    &:active {
+        .ard-focus-overlay {
+            opacity: 20%;
+        }
+    }
+}
+//! disabled state for star-button
+.ard-disabled {
+    > .ard-star-button,
+    > .ard-star-input {
+        pointer-events: none;
+        opacity: 50%;
+    }
+}

package/themes/default/statebox.scss

@@ -0,0 +1,109 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-statebox {
+    @include coloringMixins.typeColors();
+    font-size: 1.1em;
+    width: 1.25em;
+    height: 1.25em;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    color: var(--ard-cmpcl--bg-colored);
+    border: none;
+    background: none;
+    padding: 0;
+
+    .ard-hitbox {
+        position: absolute;
+        left: -4px;
+        right: -4px;
+        bottom: -4px;
+        top: -4px;
+    }
+    .ard-focus-overlay {
+        @include defaultMixins.focus-overlay;
+        position: absolute;
+        left: -0.5rem;
+        right: -0.5rem;
+        bottom: -0.5rem;
+        top: -0.5rem;
+        border-radius: 999px;
+        background: currentColor;
+    }
+    .ard-statebox-icon,
+    .ard-statebox-frame::after {
+        @include defaultMixins.icon;
+        transition: opacity 0.2s $timing-fn;
+        color: currentColor;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+    .ard-statebox-frame::after {
+        content: '\e835';
+    }
+    &.ard-statebox-keep-frame {
+        .ard-statebox-icon {
+            font-size: 0.9em;
+        }
+    }
+    &.ard-statebox-filled {
+        .ard-statebox-icon {
+            font-variation-settings: 'FILL' 1;
+        }
+        &.ard-statebox-keep-frame {
+            .ard-statebox-icon,
+            .ard-statebox-character {
+                color: var(--ard-cmpcl--on-bg);
+            }
+            .ard-statebox-frame::before {
+                content: '';
+                position: absolute;
+                left: 2px;
+                right: 2px;
+                top: 2px;
+                bottom: 2px;
+                background: currentColor;
+            }
+            &.ard-color-custom {
+                .ard-statebox-icon,
+                .ard-statebox-character {
+                    color: var(--ard-on-custom-color);
+                }
+            }
+        }
+    }
+    .ard-statebox-character {
+        font-weight: 900;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-family: 'Roboto', sans-serif;
+    }
+    &.ard-color-custom {
+        color: var(--ard-custom-color);
+    }
+    &:hover,
+    &:focus {
+        .ard-statebox-icon {
+            opacity: 100%;
+        }
+        .ard-focus-overlay {
+            opacity: 10%;
+        }
+    }
+    &:active {
+        .ard-focus-overlay {
+            opacity: 20%;
+        }
+    }
+}
+//! disabled state
+.ard-disabled .ard-statebox {
+    pointer-events: none;
+    opacity: 60%;
+}