@ardium-ui/ui 1.0.0

package/themes/default/modal.scss

@@ -0,0 +1,93 @@
+@import '../variables';
+
+.ard-modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    place-items: center;
+
+    &.ard-modal-backdrop {
+        background: $darken-overlay-strong;
+    }
+    .ard-modal-panel {
+        padding: 1.25rem 3rem 1.5rem 3rem;
+        background: $bg;
+        max-width: calc(100vw - 4rem);
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: 1.5rem;
+
+        &.ard-modal-no-heading-text {
+            gap: 0.25rem;
+
+            .ard-modal-close-button {
+                position: absolute;
+                right: 0.5rem;
+                top: 0.5rem;
+            }
+        }
+        &.ard-modal-has-close-button {
+            .ard-modal-heading {
+                padding-right: 1rem;
+            }
+        }
+    }
+    .ard-modal-heading {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+
+        .ard-modal-heading-text {
+            font-size: 1.25rem;
+            color: $text;
+            font-weight: 500;
+            font-family: Roboto;
+        }
+        .ard-modal-close-button {
+            position: absolute;
+            right: 0.5rem;
+            top: 0.5rem;
+        }
+    }
+    //! appearances
+    &.ard-appearance-raised {
+        .ard-modal-panel {
+            box-shadow: $simple-shadow2;
+        }
+    }
+    //! variants
+    &.ard-variant-rounded {
+        .ard-modal-panel {
+            border-radius: 8px;
+        }
+    }
+    &.ard-variant-sharp {
+        .ard-modal-panel {
+            border-radius: 0;
+        }
+    }
+
+    //! compact
+    &.ard-compact {
+        .ard-modal-panel {
+            font-size: 90%;
+            padding: 0.75rem 2rem 1rem 2rem;
+            gap: 1rem;
+
+            &.ard-modal-no-heading-text {
+                gap: 0.25rem;
+
+                .ard-modal-close-button {
+                    position: absolute;
+                    right: 0.25rem;
+                    top: 0.25rem;
+                }
+            }
+        }
+    }
+}

package/themes/default/progress-bar.scss

@@ -0,0 +1,166 @@
+@use './coloring' as CM;
+@import '../variables';
+
+.ard-progress-bar {
+    @include CM.typeColors();
+    width: 100%;
+    margin: 0.5rem 0;
+    overflow: hidden;
+
+    .ard-progress-bar__background,
+    .ard-progress-bar__overlay {
+        position: absolute;
+        background-color: var(--ard-cmpcl--bg-colored);
+        top: 0;
+        bottom: 0;
+        left: 0;
+    }
+    .ard-progress-bar__background {
+        background-color: var(--ard-cmpcl--bg-colored-light);
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        opacity: 30%;
+    }
+    .ard-progress-bar__overlay {
+        width: var(--ard-_progress-bar-main, 0);
+    }
+
+    //! variants
+    &.ard-variant-sharp {
+        border-radius: 0;
+    }
+    &.ard-variant-pill {
+        border-radius: 9999px;
+    }
+
+    //! sizes
+    &.ard-progress-bar__size-default {
+        height: 0.25rem;
+    }
+    &.ard-progress-bar__size-auto:not(.ard-progress-bar__mode-buffer) {
+        height: 100%;
+    }
+
+    //! modes
+    &.ard-progress-bar__mode-determinate,
+    &.ard-progress-bar__mode-buffer {
+        .ard-progress-bar__overlay {
+            transition: width 0.1s $timing-fn;
+        }
+    }
+    &.ard-progress-bar__mode-indeterminate,
+    &.ard-progress-bar__mode-query {
+        .ard-progress-bar__overlay {
+            position: unset;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                background-color: inherit;
+                top: 0;
+                left: 0;
+                bottom: 0;
+            }
+            &::before {
+                animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+            }
+            &::after {
+                animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+                animation-delay: 1.15s;
+            }
+        }
+    }
+    &.ard-progress-bar__mode-query {
+        transform: rotate(180deg);
+    }
+    &.ard-progress-bar__mode-buffer {
+        .ard-progress-bar__background {
+            background: none !important;
+            left: var(--ard-_progress-bar-buffer, 100%);
+            overflow: hidden;
+
+            &::after {
+                content: '';
+                position: absolute;
+                right: -0.5rem;
+                top: 0;
+                bottom: 0;
+                width: 9999px;
+                animation: buffer 0.4s linear infinite;
+                border-bottom: 0.25rem dotted var(--ard-cmpcl--bg-colored);
+            }
+        }
+        .ard-progress-bar__overlay-buffer {
+            background: var(--ard-cmpcl--bg-colored-light);
+            position: absolute;
+            left: 0;
+            width: var(--ard-_progress-bar-buffer, 0);
+            top: 0;
+            bottom: 0;
+            transition: width 0.1s $timing-fn;
+        }
+    }
+
+    //! hiding the value
+    &.ard-progress-bar__size-default,
+    &.ard-progress-bar__hide-value,
+    &.ard-progress-bar__mode-buffer {
+        > .ard-progress-bar__value {
+            display: none;
+        }
+    }
+
+    //! currentColor special case
+    &.ard-color-currentColor {
+        .ard-progress-bar__background {
+            opacity: 22.5%;
+            background: var(--ard-cmpcl--bg-colored);
+        }
+        .ard-progress-bar__overlay-buffer {
+            opacity: 30%;
+            background: var(--ard-cmpcl--bg-colored);
+        }
+    }
+}
+
+@keyframes indeterminate {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@keyframes indeterminate-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}
+
+@keyframes buffer {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-0.5rem);
+    }
+}

package/themes/default/progress-circle.scss

@@ -0,0 +1,56 @@
+@use './coloring' as coloringMixins;
+@import '../variables';
+
+.ard-progress-circle {
+    @include coloringMixins.typeColors;
+    width: 3em;
+
+    --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
+
+    //! appearances
+    &.ard-appearance-transparent {
+        .ard-progress-circle-background {
+            background: transparent;
+        }
+    }
+    &.ard-appearance-colorless {
+        .ard-progress-circle-background {
+            background: $darken-overlay-medium;
+        }
+    }
+    &.ard-appearance-colored {
+        .ard-progress-circle-background {
+            opacity: 16%;
+            background: var(--ard-cmpcl--bg-colored);
+        }
+        //special case for no coloring
+        &.ard-color-none {
+            .ard-progress-circle-background {
+                opacity: 8%;
+            }
+        }
+    }
+    //! ring variant
+    &.ard-progress-circle-variant-ring {
+        .ard-progress-circle-background,
+        .ard-progress-circle-overlay {
+            //magic number
+            //don't know why this value specifically looks good
+            mask: radial-gradient(transparent 59%, #000 59%);
+        }
+    }
+    //! value
+    .ard-progress-circle-value {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-weight: bold;
+        font-size: 0.9em;
+    }
+    &.ard-progress-circle-variant-full {
+        .ard-progress-circle-value {
+            display: none;
+        }
+    }
+}

package/themes/default/radio.scss

@@ -0,0 +1,112 @@
+@use './coloring' as CM;
+@use './mixins' as GM;
+@import '../variables';
+
+ard-radio-group {
+    display: flex;
+    gap: 0.5rem 1rem;
+}
+
+ard-radio {
+    display: inline-block;
+    width: max-content;
+    max-width: 100%;
+}
+
+.ard-radio {
+    @include CM.typeColors();
+
+    outline: none;
+    font-size: 1em;
+    display: flex;
+    gap: 0.375em;
+    padding: 0;
+    width: 100%;
+
+    > .ard-radio-circles {
+        position: relative;
+        width: 1.25em;
+        height: 1.25em;
+
+        > .ard-radio-outer-circle {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            border: 2px solid $detail;
+            border-radius: 9999px;
+            transition: border-color 0.2s $timing-fn;
+        }
+        > .ard-radio-inner-circle {
+            position: absolute;
+            left: 25%;
+            right: 25%;
+            top: 25%;
+            bottom: 25%;
+            background: var(--ard-cmpcl--bg-colored);
+            border-radius: 9999px;
+            transform: scale(0);
+            transition: transform 0.2s $timing-fn;
+        }
+        > .ard-focus-overlay {
+            @include GM.focus-overlay(0.375em);
+            border-radius: 9999px;
+            background-color: $overlay;
+
+            transition:
+                opacity 0.2s ease,
+                background-color 0.2s ease;
+        }
+        > .ard-hitbox {
+            position: absolute;
+            top: -0.375em;
+            bottom: -0.375em;
+            left: -0.375em;
+            right: -0.375em;
+            cursor: pointer;
+        }
+
+        &:hover {
+            > .ard-focus-overlay {
+                opacity: 7.5%;
+            }
+        }
+    }
+
+    &.ard-radio-selected {
+        > .ard-radio-circles {
+            > .ard-radio-outer-circle {
+                border-color: var(--ard-cmpcl--bg-colored);
+            }
+            > .ard-radio-inner-circle {
+                transform: scale(1);
+            }
+            > .ard-focus-overlay {
+                background-color: var(--ard-cmpcl--bg-colored);
+            }
+        }
+    }
+    &:focus {
+        > .ard-radio-circles {
+            > .ard-focus-overlay {
+                opacity: 15%;
+            }
+        }
+    }
+    &:active {
+        > .ard-radio-circles {
+            > .ard-focus-overlay {
+                opacity: 25%;
+            }
+        }
+    }
+}
+
+.ard-disabled {
+    .ard-radio {
+        pointer-events: none;
+        opacity: 50%;
+        user-select: none;
+    }
+}