Модуль design

/*
<button class="button" style="
    --button-bg-color: hsl(106deg 40% 25%);
    --button-hover-bg-color: hsl(106deg 40% 35%);
    --button-focus-bg-color: hsl(106deg 40% 40%);
    --button-focus-border: solid 1px hsl(106deg 20% 85%); 
    --button-focus-shadow: 0 0 0 2px hsl(106deg 20% 85%); 
" type="button">custom button</button> 
*/

.button {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--button-transition, all ease .1s);
    border: var(--button-border, 1px solid transparent);
    padding: var(--button-padding, .4rem .8rem);
    line-height: var(--button-line-height, 1.5);
    border-radius: var(--button-radius, 5px);
    background-color: var(--button-bg-color, var(--primary600));
    color: var(--button-text-color, #fff);

    &:hover {
        text-decoration: none;
        background-color: var(--button-hover-bg-color, var(--primary750));
        color: var(--button-hover-text-color, #fff);
    }

    &:active,
    &:focus {
        outline: none;
        background-color: var(--button-focus-bg-color, var(--primary500));
        color: var(--button-focus-text-color, #fff);
        box-shadow: var(--button-focus-shadow, 0 0 0 2px var(--primary200));
        border: var(--button-focus-border, solid 1px var(--primary200));
    }

    &.disabled,
    &:disabled {
        cursor: not-allowed;
        background-color: var(--button-disabled-bg-color, var(--gray200));
        color: var(--button-disabled-text-color, var(--gray600));
    }
}

.button-secondary
.button-outline1
.button-outline2
.button-red
.button-brown
.button-orange
.button-yellow
.button-lime
.button-green
.button-teal
.button-cyan
.button-blue
.button-indigo
.button-violet
.button-purple
.button-pink
.button-gray

// placeholder
input, textarea {
    &::-webkit-input-placeholder {
        color: var(--placeholder-color, color.$gray500);
    }
}

// <input class="form-input" type="text">
// <input class="form-input" type="email">
// <textarea class="form-input"></textarea>
// <select class="form-input">
.form-input {
    padding         : var(--form-input-padding, 4px 6px);
    border          : var(--form-input-border, 1px solid color.$primary200);
    border-radius   : var(--form-input-border-radius, 3px);
    transition      : border-color ease .2s;
    background-color: null;
    color           : null;

    &:disabled {
        color           : var(--form-input-disabled-color, #999);
        background-color: var(--form-input-disabled-background, #f5f5f5);
        border-color    : var(--form-input-disabled-border-color, #ddd);
    }

    &:valid {
        box-shadow: none;
        border    : var(--form-input-border, 1px solid #FFB7B2);
    }

    &:focus,
    &:valid:focus {
        color           : var(--form-input-focus-color, color.$gray800);
        background-color: var(--form-input-focus-background, #fff);
        border-color    : var(--form-input-focus-border-color, color.$primary300);
        box-shadow      : var(--form-input-focus-shadow, (0 0 0 .1rem hsla(hue(color.$primary800), 100%, 70%, 0.7)));
        outline         : 0;
    }

    .form-check-invalid &:invalid {
        box-shadow: var(--form-invalid-shadow, 0 0 0 .1rem hsla(4, 100%, 50%, 0.4));
        border    : var(--form-invalid-border, 1px solid #FFB7B2);

        &:focus {
            box-shadow: var(--form-invalid-shadow, 0 0 0 .1rem hsla(4, 100%, 50%, 0.4));
            border    : var(--form-invalid-border, 1px solid #FFB7B2);
        }
    }
}

// for invalid input
// <script>
// if(document.addEventListener){
//     document.addEventListener('invalid', function(e){
//         e.target.classList.add("js-form-invalid");
//     }, true);    
// }
// </script>
.js-form-invalid {
    box-shadow: var(--form-invalid-shadow, 0 0 0 .1rem hsla(4, 100%, 50%, 0.4));
    border    : var(--form-invalid-border, 1px solid #FFB7B2);

    &:focus {
        box-shadow: var(--form-invalid-shadow, 0 0 0 .1rem hsla(4, 100%, 50%, 0.4));
        border    : var(--form-invalid-border, 1px solid #FFB7B2);
    }
}

// input[type="checkbox"]
// <label class="form-checkbox">
//     <input type="checkbox">
//     <span class="form-checkbox-icon bg-gray200"></span> gray
// </label>
.form-checkbox + .form-checkbox-icon
.form-checkbox:checked + .form-checkbox-icon

// input[type="radio"] 
// <label class="form-radio">
//     <input type="radio" name="myradio" value="1">
//     <span class="form-radio-icon bg-green300"></span> green
// </label>
.form-radio + .form-radio-icon
.form-radio:checked + .form-radio-icon

// input[type="checkbox"]
// <label class="form-switch">
//     <input type="checkbox">
//     <span class="form-switch-icon"></span> form-switch-icon
// </label>
.form-switch + .form-switch-icon
.form-switch:checked + .form-switch-icon
.form-switch:invalid + .form-switch-icon