@tolokoban/ui/lib/dist/view/InputText/InputText.module.css

React components with theme

.InputText {
    font: inherit;
    background: transparent;
    width: auto;
    border: 1px solid color-mix(in srgb, currentColor, transparent 90%);
    background-color: color-mix(
        in srgb,
        var(--theme-color-input),
        transparent 40%
    );
    padding: 0 0.5em;
    line-height: 2em;
    height: 2em;
    color: inherit;
    border-bottom: 2px solid currentColor;
    transition: all 0.2s;
}

.InputText:focus {
    background-color: var(--theme-color-input);
    color: var(--theme-color-on-input);
    border: none;
    outline: none;
}

.InputText.invalid {
    background-color: var(--theme-color-error);
    color: var(--theme-color-on-error);
}

input.InputText[type="number"]::-webkit-inner-spin-button,
input.InputText[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.InputText[type="number"] {
    -moz-appearance: textfield;
}