@ardium-ui/ui 1.0.0

package/themes/default/form-field-frame.scss

@@ -0,0 +1,78 @@
+@use './mixins' as defaultMixins;
+@import '../variables';
+
+.ard-form-field-frame {
+    box-sizing: border-box;
+    min-height: 2.1875rem;
+    height: max-content;
+    max-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+    position: relative;
+    font-size: 1rem;
+    line-height: 1.25em;
+    font-family: 'Roboto', sans-serif;
+
+    .ard-form-field-content-container {
+        flex-grow: 1;
+        min-height: 100%;
+    }
+    .ard-form-field-prefix-container,
+    .ard-form-field-suffix-container {
+        height: max-content;
+        max-height: 100%;
+        display: flex;
+        align-items: center;
+    }
+    .ard-form-field-prefix-container {
+        padding-left: 0.375em;
+    }
+    .ard-form-field-suffix-container {
+        padding-right: 0.375em;
+    }
+
+    //! compact
+    &.ard-compact {
+        min-height: 1.6875rem;
+        font-size: 0.85rem;
+        line-height: 1;
+    }
+
+    //! appearance & variant
+    @include defaultMixins.formAppearances();
+    @include defaultMixins.formVariants();
+    background: var(--ard-appearance-background);
+    border: var(--ard-appearance-border);
+    transition: border-color 0.15s $timing-fn;
+
+    .ard-form-field-overlay {
+        background: $overlay;
+        opacity: 0;
+        transition:
+            opacity 0.15s $timing-fn,
+            background-color 0.15s $timing-fn;
+    }
+
+    &:hover {
+        .ard-form-field-overlay {
+            opacity: 3%;
+        }
+    }
+    &.ard-focused {
+        .ard-form-field-overlay {
+            opacity: 6%;
+        }
+        border-color: $border-dark;
+    }
+}
+.ard-disabled .ard-form-field-frame {
+    pointer-events: none;
+    opacity: 50%;
+
+    &.ard-appearance-transparent {
+        .ard-form-field-overlay {
+            opacity: 4.5%;
+        }
+    }
+}

package/themes/default/inputs/_shared.scss

@@ -0,0 +1,46 @@
+@import '../../variables';
+
+/**
+ * Should be applied to the first element in the component's template.
+ */
+@mixin genericInput() {
+    position: relative;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: stretch;
+    gap: 0.625em;
+    cursor: text;
+    box-sizing: border-box;
+    height: 2.0625em;
+    font-size: 1rem;
+    line-height: 1.25em;
+
+    .ard-input-container {
+        flex-grow: 1;
+        text-size-adjust: 100%;
+        display: flex;
+        align-items: center;
+
+        .ard-placeholder {
+            font: inherit;
+            opacity: 60%;
+        }
+
+        input {
+            border: none;
+            background: transparent;
+            outline: none;
+            font: inherit;
+            padding: 0;
+            display: block;
+            width: 100%;
+        }
+    }
+    //! compact
+    &.ard-compact {
+        height: 1.5625em;
+        font-size: 0.85em;
+        line-height: 1;
+    }
+}

package/themes/default/inputs/color-input.scss

@@ -0,0 +1,46 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+
+.ard-color-input {
+    @include inputMixin.genericInput();
+    padding: 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+    cursor: pointer;
+
+    @include CB.clearButton();
+
+    .ard-input-container {
+        pointer-events: none;
+
+        input {
+            font-family: monospace;
+            user-select: none;
+        }
+    }
+
+    .ard-color-display-button {
+        padding: 0;
+        margin: 0;
+        border: none;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        width: 3em;
+        outline: none;
+
+        * {
+            width: 100% !important;
+        }
+
+        ard-color-display {
+            pointer-events: none;
+            font-size: 1.1rem;
+        }
+    }
+}
+.ard-color-input-overlay-card {
+    margin: 0.4rem;
+}

package/themes/default/inputs/digit-input.scss

@@ -0,0 +1,56 @@
+@use '../coloring' as CM;
+@import '../../variables';
+
+ard-digit-input {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 500;
+    color: $text;
+}
+
+.ard-digit-input,
+.ard-digit-input__item,
+.ard-digit-input__input,
+.ard-digit-input__static {
+    font: inherit;
+    color: inherit;
+}
+.ard-digit-input {
+    display: flex;
+    gap: 0.5em;
+
+    .ard-digit-input__item {
+        height: max-content;
+        display: flex;
+
+        .ard-digit-input__input {
+            width: 2.0625em;
+            box-sizing: border-box;
+            text-align: center;
+            caret-color: $text3;
+
+            &:not(.ard-digit-input__input-empty) {
+                caret-color: transparent;
+            }
+        }
+        .ard-digit-input__static {
+            width: max-content;
+            white-space: nowrap;
+        }
+    }
+    &.ard-shape-square {
+        .ard-digit-input__item {
+            .ard-digit-input__input {
+                height: 2.0625em;
+            }
+        }
+    }
+    &.ard-shape-rectangle {
+        .ard-digit-input__item {
+            .ard-digit-input__input {
+                font-size: 1.2em;
+                width: calc(2.0625em / 1.2);
+                height: calc(2.0625em * 1.5 / 1.2);
+            }
+        }
+    }
+}

package/themes/default/inputs/file-input.scss

@@ -0,0 +1,78 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+@import '../../variables';
+
+.ard-file-input-form-field-frame {
+    .ard-form-field-overlay {
+        display: none;
+    }
+}
+.ard-file-input {
+    @include inputMixin.genericInput();
+    padding: 0 0 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+    gap: 0.125rem;
+    cursor: default;
+
+    *:not(button):not(ard-_clear-button) {
+        pointer-events: none;
+        user-select: none;
+    }
+
+    .ard-file-input__value {
+        font-size: 92%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-height: 1.25rem;
+    }
+    .ard-browse-button {
+        cursor: pointer;
+        height: calc(100% - 0.25rem);
+        margin: 0.125rem;
+        aspect-ratio: 1;
+        border: none;
+        background: none;
+        padding: 0;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        outline: none;
+
+        .ard-focus-overlay {
+            @include defaultMixins.focus-overlay();
+            background: $overlay;
+            border-radius: 9999px;
+        }
+        &:hover {
+            .ard-focus-overlay {
+                opacity: 4%;
+            }
+        }
+        &:focus {
+            .ard-focus-overlay {
+                opacity: 8%;
+            }
+        }
+        &:active {
+            .ard-focus-overlay {
+                opacity: 12%;
+            }
+        }
+        &:focus-visible {
+            .ard-focus-overlay {
+                opacity: 16%;
+            }
+        }
+    }
+
+    @include CB.clearButton();
+}
+.ard-disabled {
+    .ard-input {
+        pointer-events: none;
+        opacity: 50%;
+    }
+}

package/themes/default/inputs/hex-input.scss

@@ -0,0 +1,27 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+@import '../../variables';
+
+.ard-hex-input {
+    @include inputMixin.genericInput();
+    padding: 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+
+    @include CB.clearButton();
+
+    .ard-input-container {
+        input {
+            font-family: monospace;
+        }
+    }
+
+    .ard-hash-container {
+        margin-right: -0.25rem;
+        color: $text3;
+        opacity: 70%;
+        user-select: none;
+        font-family: monospace;
+    }
+}

package/themes/default/inputs/input.scss

@@ -0,0 +1,52 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+@import '../../variables';
+
+.ard-input {
+    @include inputMixin.genericInput();
+    padding: 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+
+    @include CB.clearButton();
+
+    .ard-autocomplete {
+        opacity: 37.5%;
+    }
+}
+//! suggestions
+.ard-input-suggestions-panel {
+    .ard-option {
+        padding: 0.375rem 0.625rem;
+        font-size: 1rem;
+        color: $text2;
+        cursor: pointer;
+
+        &.ard-option-highlighted {
+            background: $darken-overlay-light;
+        }
+
+        &.ard-option-selected {
+            font-weight: 500;
+            background: $darken-overlay-medium;
+        }
+
+        &.ard-option-disabled {
+            pointer-events: none;
+            opacity: 50%;
+        }
+    }
+    .ard-compact {
+        .ard-option {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.9rem;
+        }
+    }
+}
+.ard-disabled {
+    .ard-input {
+        pointer-events: none;
+        opacity: 50%;
+    }
+}

package/themes/default/inputs/number-input.scss

@@ -0,0 +1,121 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@import '../../variables';
+
+.ard-number-input {
+    @include inputMixin.genericInput();
+    @include defaultMixins.formAppearances();
+    gap: 0;
+    width: 100%;
+
+    .ard-input-container {
+        height: 100%;
+        max-width: 100%;
+
+        & > input {
+            width: 100%;
+        }
+    }
+
+    .ard-quick-change-button {
+        position: relative;
+
+        .ard-button {
+            height: 100%;
+            aspect-ratio: 1;
+            padding: 0;
+            border-color: $border;
+            display: flex;
+            justify-content: center;
+            margin: 0;
+        }
+        &.ard-disabled .ard-focus-overlay {
+            opacity: 0;
+        }
+
+        &.decrement {
+            left: 1px;
+
+            .ard-button {
+                border-top-right-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+        &.increment {
+            right: 1px;
+
+            .ard-button {
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+    }
+
+    //! variants
+    &.ard-variant-rounded {
+        border-radius: 8px;
+
+        &.ard-quick-change-false {
+            .ard-input-container {
+                border-radius: 8px;
+            }
+        }
+    }
+    &.ard-variant-sharp {
+        border-radius: 0;
+    }
+    &.ard-variant-pill {
+        @include defaultMixins.formAppearances();
+
+        border-radius: 999px;
+
+        .ard-button {
+            border-radius: 999px !important;
+            height: 30px;
+            width: 30px;
+            margin: 0 2px;
+        }
+
+        &.ard-quick-change-false {
+            .ard-input-container {
+                border-radius: 999px;
+            }
+        }
+    }
+
+    //! variant-specific appearances
+    &.ard-variant-rounded,
+    &.ard-variant-sharp {
+        &:not(.ard-appearance-filled) .ard-input-container {
+            box-sizing: border-box;
+            background: var(--ard-appearance-background);
+            border: var(--ard-appearance-border);
+        }
+        &.ard-appearance-filled {
+            background: var(--ard-appearance-background);
+            border: var(--ard-appearance-border);
+        }
+    }
+    &.ard-variant-pill {
+        background: var(--ard-appearance-background);
+        border: var(--ard-appearance-border);
+    }
+
+    //! compact
+    &.ard-compact {
+        font-size: 0.925rem;
+    }
+}
+
+.ard-disabled {
+    > .ard-number-input {
+        pointer-events: none;
+        opacity: 50%;
+
+        .ard-button .ard-focus-overlay {
+            opacity: 0;
+        }
+
+        background: $bg-f;
+    }
+}

package/themes/default/inputs/password-input.scss

@@ -0,0 +1,43 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+@import '../../variables';
+
+.ard-password-input {
+    @include inputMixin.genericInput();
+    padding: 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+
+    &.ard-revealable {
+        padding-right: 0;
+    }
+
+    .ard-reveal-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        margin: 0.125rem;
+        height: calc(100% - 0.25rem);
+        aspect-ratio: 1;
+        font-size: 0.8rem;
+        border-radius: 9999px;
+        border: none;
+        background: transparent;
+        outline: none;
+        cursor: pointer;
+
+        transition: background-color 0.2s $timing-fn;
+
+        &:hover {
+            background: rgba(0, 0, 0, 4%);
+        }
+        &:focus {
+            background: rgba(0, 0, 0, 12%);
+        }
+        &:active {
+            background: rgba(0, 0, 0, 20%);
+        }
+    }
+}

package/themes/default/inputs/search-bar.scss

@@ -0,0 +1,19 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+
+.ard-search-bar {
+    @include inputMixin.genericInput();
+    padding: 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+
+    @include CB.clearButton();
+}
+//! disabled state
+.ard-disabled {
+    .ard-search-bar {
+        pointer-events: none;
+        opacity: 50%;
+    }
+}

package/themes/default/inputs/simple-input.scss

@@ -0,0 +1,19 @@
+@use './shared' as inputMixin;
+@use '../mixins' as defaultMixins;
+@use '../clear-button' as CB;
+
+.ard-simple-input {
+    @include inputMixin.genericInput();
+    padding: 0 0.375rem;
+    min-width: 10rem;
+    max-width: 100%;
+
+    @include CB.clearButton();
+}
+//! disabled state
+.ard-disabled {
+    .ard-simple-input {
+        pointer-events: none;
+        opacity: 50%;
+    }
+}

package/themes/default/kbd-shortcut.scss

@@ -0,0 +1,13 @@
+@import '../variables';
+
+.ard-kbd-shortcut {
+    font-family: monospace;
+    color: $text2;
+
+    > span {
+        font-size: 0.9em;
+    }
+    &.ard-appearance-transparent > span {
+        font-size: 0.75em;
+    }
+}

package/themes/default/kbd.scss

@@ -0,0 +1,20 @@
+@import '../variables';
+
+.ard-kbd {
+    border-radius: 0.2em;
+    font-family: monospace;
+    font-size: 0.9em;
+    margin: 0 0.125em;
+    color: $text2;
+
+    //! appearance
+    &.ard-appearance-outlined,
+    &.ard-appearance-filled {
+        border: 1px solid $detail-ultralight;
+        box-shadow: inset 0 -1px 0 $darken-overlay;
+        padding: 0.15em 0.35em;
+    }
+    &.ard-appearance-filled {
+        background: $bg-d;
+    }
+}