@fest-lib/fl-ui 0.1.1

package/src/styles/ui/_forms.scss

@@ -0,0 +1,280 @@
+@use "./layout" as layout;
+@use "./typography" as type;
+@use "./colorize" as colorize;
+@use "./buttons" as button;
+@use "./color" as color;
+@use "veela-lib" as *;
+@use "./forms-options" as fo;
+@use "./forms-bare-host-elements" as bare_forms;
+
+// WHY: Host-wide `input, select, textarea` rules override third-party forms; default off (`forms-options`).
+
+//
+@use "./forms_misc" as *;
+
+//
+@mixin input-base {
+    @include variable-colorization("input");
+    @include appearance-decl();
+
+    //
+    position: relative;
+    align-items: center;
+    gap: var(--input-gap, var(--space-sm));
+
+    //
+    inline-size: var(--input-inline-size, fit-content); block-size: fit-content;
+    min-inline-size: var(--input-min-inline-size, 0px); min-block-size: var(--input-min-block-size, fit-content);
+    max-inline-size: var(--input-max-inline-size, 100%);
+
+    //
+    box-sizing: border-box;
+
+    //
+    padding-block: var(--input-padding-block, var(--input-padding, var(--padding-sm)));
+    padding-inline: var(--input-padding-inline, var(--input-padding, var(--padding-md)));
+    padding-inline-start: var(--input-padding-inline-start, var(--padding-lg, 1rem));
+    padding-inline-end: var(--input-padding-inline-end, var(--input-padding-inline, var(--input-padding, var(--padding-md))));
+
+    //
+    /*border-radius: var(--input-radius);
+    border-width: var(--input-border-width, 1px);
+    border-color: var(--_input-border-current);*/
+
+    border: none 0px transparent;
+    outline: none 0px transparent;
+
+    border-style: solid;
+
+    //
+    background-clip: padding-box;
+    outline: none;
+
+    //
+    pointer-events: auto;
+    field-sizing: content;
+    user-select: text;
+
+    //
+    caret-color: var(--_input-text-current);
+    font-weight: var(--input-font-weight, inherit);
+    line-height: var(--input-line-height, 1.4);
+    letter-spacing: var(--input-letter-spacing, 0.01em);
+
+    //
+    z-index: 0;
+    display: inline-block;
+
+    //
+    &:is(textarea) {
+        border-radius: var(--radius-md);
+    }
+
+    //
+    &:where([type="checkbox"], [type="radio"]) {
+        @include button.button-filled;
+
+        & {
+            display: inline-flex;
+            aspect-ratio: 1 / 1;
+        }
+    }
+}
+
+//
+@mixin form-field-base() {
+    @include variable-colorization("form");
+    @include input-base();
+    @include appearance-decl();
+
+    //
+    display: block;
+    border: none;
+    border-width: 0px;
+
+    //
+    place-content: start;
+    place-items: start;
+
+    //
+    inline-size: stretch; block-size: fit-content;
+    min-inline-size: min(var(--form-min-inline-size, 24ch), fit-content); min-block-size: var(--form-min-block-size, fit-content);
+
+    //
+    padding-block: var(--form-padding-block, var(--input-padding-block, var(--padding-md)));
+    padding-inline-start: var(--form-padding-inline-start, var(--input-padding-inline-start, var(--padding-lg, 1rem)));
+    padding-inline-end: var(--form-padding-inline-end, calc(var(--space-lg) * 2));
+
+    //
+    line-height: var(--form-line-height, 1.5);
+
+    //
+    user-select: text;
+    resize: var(--form-resize, vertical);
+    overflow: hidden;
+    overflow-y: auto
+}
+
+//
+@mixin option-style() {
+    @include variable-colorization("option");
+    @include option-radius();
+    @include appearance-decl();
+
+    //
+    border-style: solid;
+    border-color: var(--_option-border-current);
+
+    //
+    padding-inline: var(--option-padding-inline, calc(var(--padding-lg, 1rem) * 0.75));
+    padding-block: var(--option-padding-block, var(--padding-sm));
+    gap: var(--space-md);
+
+    //
+    display: flex;
+    place-items: center;
+    place-content: center;
+    justify-content: flex-start;
+
+    //
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-wrap: nowrap;
+    word-break: keep-all;
+    overflow: hidden;
+
+    //
+    min-inline-size: fit-content; inline-size: stretch;
+
+    //
+    outline: none;
+}
+
+//
+@mixin select-base() {
+    @include appearance-decl();
+
+    //
+    & {
+        cursor: pointer;
+        position: relative;
+    }
+
+    //
+    &:where(select) {
+        @include button.button-filled();
+        @include variable-colorization("select");
+
+        //
+        display: inline-flex;
+
+        //
+        place-content: center;
+        place-items: center;
+        justify-content: space-between;
+
+        //
+        color: transparent;
+        appearance: base-select;
+
+        //
+        text-indent: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        text-wrap: nowrap;
+        word-break: keep-all;
+        overflow: hidden;
+
+        //
+        min-inline-size: fit-content; inline-size: stretch;
+
+        //
+        gap: var(--select-gap, var(--input-gap, var(--space-sm)));
+        padding-inline: var(--option-padding-inline);
+        padding-block: var(--option-padding-block);
+    }
+
+    //
+    &::picker(select) {
+        appearance: base-select;
+        background-color: transparent;
+        color: transparent;
+
+        //
+        padding: 0px;
+        border: none;
+        outline: none;
+        z-index: 9999;
+        line-height: 0;
+
+        //
+        overflow: visible;
+        visibility: visible;
+        content-visibility: visible;
+    }
+
+    //
+    & option { @include option-style(); }
+    & > option { @include option-style(); }
+    &:is(option) { @include option-style(); }
+    &::-ms-expand { display: none; }
+
+    //
+    &::after, &::picker-icon {
+        @include icon-style("select", $select-icon);
+    }
+
+    //
+    span, a {
+        font-size: var(--font-size-md);
+        font-weight: var(--font-weight-medium);
+        line-height: var(--line-height-md);
+        letter-spacing: var(--letter-spacing-md);
+        text-transform: var(--text-transform-md);
+        text-decoration: none;
+    }
+}
+
+//
+@mixin checkbox-base() {
+    @include button.button-filled;
+    @include variable-colorization("checkbox");
+    @include appearance-decl();
+
+    //
+    margin: 0;
+    padding: 0;
+
+    //
+    contain: strict;
+    line-height: 0;
+
+    //
+    display: flex;
+    content: " ";
+    cursor: pointer;
+    user-select: none;
+    pointer-events: auto;
+    place-content: center;
+    place-items: center;
+    place-self: center;
+
+    //
+    inline-size: var(--checkbox-size, 1.25rem);
+    block-size: var(--checkbox-size, 1.25rem);
+    aspect-ratio: 1 / 1;
+
+    //
+    border-radius: var(--checkbox-radius, var(--radius-sm));
+    border-width: 0px;/*var(--checkbox-border-width, 0px);*/
+    border-style: solid;
+
+    //
+    &::before { @include icon-style("checkbox", $checkbox-icon); }
+    &:checked::before { --icon-color: var(--surface-color, currentColor); }
+}
+
+//
+@if fo.$include-bare-form-element-rules {
+    @include bare_forms.emit-bare-form-element-layer;
+}

package/src/styles/ui/_forms_misc.scss

@@ -0,0 +1,201 @@
+@use "./layout" as layout;
+@use "./typography" as type;
+@use "./colorize" as colorize;
+@use "./buttons" as button;
+@use "./color" as color;
+@use "./utils" as utils;
+
+//
+@mixin appearance-decl() {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    transition:
+        background-color var(--transition-normal, 160ms ease),
+        border-color var(--transition-normal, 160ms ease),
+        color var(--transition-normal, 160ms ease),
+        box-shadow var(--transition-normal, 160ms ease),
+        transform var(--transition-fast, 120ms ease);
+
+    //
+    transform: translateZ(0);
+    transform-origin: 50% 50%;
+    backface-visibility: hidden;
+}
+
+//
+$select-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M4.2 6.4a.75.75 0 0 1 1.06-.05L8 8.68l2.74-2.33a.75.75 0 1 1 .98 1.14l-3.24 2.75a.75.75 0 0 1-.98 0L4.25 7.49a.75.75 0 0 1-.05-1.06z'/%3e%3c/svg%3e");
+$checkbox-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.32 8.38a.75.75 0 1 1 1.06-1.06l2.09 2.08 3.99-4.99z'/%3e%3c/svg%3e");
+$radio-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+
+//
+@mixin icon-style($name: "select", $icon: $select-icon) {
+    pointer-events: none;
+    mask-image: $icon;
+    mask-repeat: no-repeat;
+    mask-origin: content-box;
+    mask-clip: content-box;
+    mask-position: center;
+    mask-size: contain;
+    mask-type: alpha;
+
+    //
+    content: "";
+    display: flex;
+    background-color: var(--icon-color, var(--on-surface-color, currentColor));
+    inline-size: var(--#{$name}-indicator-size, var(--space-lg));
+    block-size: var(--#{$name}-indicator-size, var(--space-lg));
+    margin-inline-start: auto;
+    box-sizing: border-box;
+    aspect-ratio: 1 / 1;
+    text-align: center;
+    overflow: hidden;
+
+    //
+    place-content: center;
+    place-items: center;
+    place-self: center;
+}
+
+//
+@mixin option-radius() {
+    --_option-border-radius: 0px;
+    --_option-border-block-start-size: 0px;
+    --_option-border-block-end-size: 0px;
+    --_option-border-inline-size: 0.5px;
+
+    //
+    --_option-border-radius-start-start: 0px;
+    --_option-border-radius-start-end: 0px;
+    --_option-border-radius-end-start: 0px;
+    --_option-border-radius-end-end: 0px;
+
+    //
+    border-radius: var(--_option-border-radius-start-start) var(--_option-border-radius-start-end) var(--_option-border-radius-end-start) var(--_option-border-radius-end-end);
+    border-inline-start-width: var(--_option-border-inline-size, 1px);
+    border-inline-end-width: var(--_option-border-inline-size, 1px);
+    border-block-start-width: var(--_option-border-block-start-size, 0px);
+    border-block-end-width: var(--_option-border-block-end-size, 0px);
+
+    //
+    &:first-of-type {
+        --_option-border-block-start-size: 0.5px;
+        --_option-border-radius-start-start: var(--radius-sm);
+        --_option-border-radius-start-end: var(--radius-sm);
+    }
+
+    //
+    &:last-of-type {
+        --_option-border-block-end-size: 0.5px;
+        --_option-border-radius-end-start: var(--radius-sm);
+        --_option-border-radius-end-end: var(--radius-sm);
+    }
+}
+
+//
+@mixin variable-colorization($name: "input") {
+    @include type.type("body-medium");
+    @include type.text-wrap();
+
+    //
+    --_#{$name}-border-current: var(--#{$name}-border-color, var(--border-color, transparent));
+    --_#{$name}-surface-current: var(--#{$name}-surface-color, var(--#{$name}-surface, var(--surface-color, transparent)));
+    --_#{$name}-shadow-current: var(--#{$name}-shadow, var(--shadow-color, transparent));
+    --_#{$name}-text-current: var(--#{$name}-text-color, var(--on-surface-color, currentColor));
+    --_#{$name}-icon-current: var(--#{$name}-icon-color, var(--on-surface-color, currentColor));
+
+    //
+    & {
+        cursor: var(--#{$name}-cursor, pointer);
+        background-color: var(--_#{$name}-surface-current, var(--surface-color, transparent));
+        color: var(--_#{$name}-text-current, var(--on-surface-color, currentColor));
+        -webkit-text-fill-color: var(--_#{$name}-text-current, var(--on-surface-color, currentColor));
+        --icon-color: var(--_#{$name}-icon-current, currentColor);
+    }
+
+    //
+    &:is(textarea) { cursor: text; }
+    /*&:is(:checked, [aria-selected="true"]) {
+        --_#{$name}-surface-current: var(--#{$name}-surface-checked, var(--on-surface-color, transparent));
+        --_#{$name}-border-current: var(--#{$name}-border-checked, var(--border-color, transparent));
+        --_#{$name}-text-current: var(--#{$name}-text-checked, var(--surface-color, currentColor));
+        --_#{$name}-icon-current: var(--#{$name}-icon-checked, var(--surface-color, currentColor));
+    }*/
+
+    //
+    /*@include utils.when-hover {
+        &:not(:disabled):not([aria-disabled="true"]) {
+            --_#{$name}-surface-current: var(--#{$name}-surface-hover, var(--surface-color, transparent));
+            --_#{$name}-border-current: var(--#{$name}-border-hover, var(--border-color, transparent));
+            --_#{$name}-shadow-current: var(--#{$name}-shadow-hover, var(--shadow-color, transparent));
+            --_#{$name}-text-current: var(--#{$name}-text-hover, var(--on-surface-color, currentColor));
+        }
+    }*/
+
+    //
+    /*@include utils.when-active {
+        &:not(:disabled):not([aria-disabled="true"]) {
+            --_#{$name}-surface-current: var(--#{$name}-surface-active, var(--surface-color, transparent));
+            --_#{$name}-border-current: var(--#{$name}-border-active, var(--border-color, transparent));
+            --_#{$name}-shadow-current: var(--#{$name}-shadow-active, var(--shadow-color, transparent));
+            --_#{$name}-text-current: var(--#{$name}-text-active, var(--on-surface-color, currentColor));
+        }
+    }*/
+
+    //
+    /*@include utils.when-focus {
+        &:not(:disabled):not([aria-disabled="true"]) {
+        --_#{$name}-surface-current: var(--#{$name}-surface-focus, var(--surface-color, transparent));
+            --_#{$name}-border-current: var(--#{$name}-border-focus, var(--border-color, transparent));
+            --_#{$name}-shadow-current: var(--#{$name}-shadow-focus, var(--shadow-color, transparent));
+            --_#{$name}-text-current: var(--#{$name}-text-focus, var(--on-surface-color, currentColor));
+        }
+    }*/
+
+    //
+    &:invalid, &[aria-invalid="true"] {
+        --current: var(--color-error, var(--color-danger, currentColor));
+
+        /*
+        --_#{$name}-border-current: var(--#{$name}-border-error, var(--border-color, transparent));
+        --_#{$name}-surface-current: var(--#{$name}-surface-error, var(--surface-color, transparent));
+        --_#{$name}-shadow-current: var(--#{$name}-shadow-error, var(--shadow-color, transparent));
+        */
+    }
+
+    //
+    @include utils.when-disabled {
+        /*
+        --_#{$name}-border-current: var(--#{$name}-border-disabled, var(--border-color, transparent));
+        --_#{$name}-surface-current: var(--#{$name}-surface-disabled, var(--surface-color, transparent));
+        --_#{$name}-text-current: var(--#{$name}-text-disabled, color-mix(in oklch, var(--input-text-color, currentColor) 55%, transparent));
+        --_#{$name}-shadow-current: none;*/
+
+        //
+        cursor: not-allowed;
+        resize: none;
+        user-select: none;
+    }
+
+    //
+    &[readonly] {
+        /*
+        --_#{$name}-border-current: var(--#{$name}-border-readonly, var(--border-color, transparent));
+        --_#{$name}-surface-current: var(--#{$name}-surface-readonly, var(--surface-color, transparent));
+        --_#{$name}-text-current: var(--#{$name}-text-readonly, var(--on-surface-color, currentColor));
+        */
+
+        //
+        cursor: default;
+    }
+
+    //
+    &::-moz-focus-inner { border: 0; }
+
+    //
+    span, a, ui-icon {
+        --icon-color: var(--_#{$name}-icon-current, var(--_#{$name}-text-current, var(--on-surface-color, currentColor)));
+        color: var(--_#{$name}-text-current, var(--on-surface-color, currentColor));
+        background-color: transparent;
+    }
+}