bluelib/src/rules/skeleton.less

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@{root} {
    // --- Globals ---

    --bluelib-color-r: 24;
    --bluelib-color-g: 24;
    --bluelib-color-b: 24;

    &, @{all} {
        box-sizing: border-box;
        color: rgb(
                var(--bluelib-color-r),
                var(--bluelib-color-g),
                var(--bluelib-color-b),
        );
    }

    font-family: "Fira Sans", sans-serif;

    // --- Containers ---

    @{container-main} {
        margin-left: auto;
        margin-right: auto;
        max-width: 1280px;
    }

    // --- Panels ---
    // Remember to use BOTH the panel AND the panel-* class when using a panel element!

    // Base panel
    @{panel} {
        margin: 8px 0;
        width: 100%;

        > @{element-paragraph}, @{element-title}, @{panel} {
            &:first-child {
                margin-top: 0;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    // A generic content panel
    @{panel-box} {
        padding: 8px;
        border-radius: 4px;
        border-width: 2px;
        border-style: solid;

        background-color: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            0.025
        );
        border-color: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            0.1
        );
    }

    // A box with a quote-like border
    @{panel-blockquote} {
        border-left-width: 2px;
        border-top-width: 0;
        border-bottom-width: 0;
        border-right-width: 0;
    }

    // A box with smaller text and no border
    @{panel-aside} {
        border-width: 0;
        font-size: smaller;
    }

    // Evenly split the panels contained inside
    @{panel-split} {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;

        > @{all} {
            flex-grow: 1;
            flex-shrink: 0;
            flex-basis: 0;
        }

        > @{panel} {
            margin: 0;
        }
    }

    // --- Buttons ---

    @stroke-1: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            1
    );
    @stroke-2: rgba(
            calc(var(--bluelib-color-r) - 25),
            calc(var(--bluelib-color-g) - 25),
            calc(var(--bluelib-color-b) - 25),
            1
    );
    @stroke-3: rgba(
            calc(var(--bluelib-color-r) - 55),
            calc(var(--bluelib-color-g) - 55),
            calc(var(--bluelib-color-b) - 55),
            1
    );

    @fill-1: transparent;
    @fill-2: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            0.1
    );
    @fill-3: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            0.3
    );

    @{button} {
        display: inline-flex;
        justify-content: center;
        align-items: center;

        background-color: @stroke-1;
        border: none;
        color: white;
        padding: 6px 16px;
        border-radius: 4px;
        font-family: inherit;
        font-size: inherit;

        cursor: pointer;

        &:hover  {
            background-color: @stroke-2;
        }

        &:active {
            background-color: @stroke-3;
        }

        &@{status-disabled} {
            &:hover  {
                background-color: @stroke-1;
            }

            &:active {
                background-color: @stroke-1;
            }
        }
    }

    @{button-fill-width} {
        width: 100%;
    }

    @{button-toggle} {
        padding: 4px 14px;
        border-width: 2px;
        border-style: solid;

        @{status-disabled} {
            border-style: dashed;
        }
    }

    @{button-toggle-off} {
        border-color: @stroke-1;
        color: @stroke-1;
        background-color: @fill-1;

        &:hover  {
            border-color: @stroke-2;
            color: @stroke-2;
            background-color: @fill-2;
        }

        &:active {
            border-color: @stroke-3;
            color: @stroke-3;
            background-color: @fill-3;
        }

        &@{status-disabled} {
            border-style: dashed;

            &:hover  {
                border-color: @stroke-1;
                color: @stroke-1;
                background-color: @fill-1;
            }

            &:active {
                border-color: @stroke-1;
                color: @stroke-1;
                background-color: @fill-1;
            }
        }
    }

    @{button-toggle-on} {
        border-color: @stroke-3;
        color: @stroke-3;
        background-color: @fill-3;

        &:hover  {
            border-color: @stroke-2;
            color: @stroke-2;
            background-color: @fill-2;
        }

        &:active {
            border-color: @stroke-1;
            color: @stroke-1;
            background-color: @fill-1;
        }

        &@{status-disabled} {
            border-style: dashed;

            &:hover  {
                border-color: @stroke-3;
                color: @stroke-3;
                background-color: @fill-3;
            }

            &:active {
                border-color: @stroke-3;
                color: @stroke-3;
                background-color: @fill-3;
            }
        }
    }

    // --- Spoilers ---

    @{spoiler} {
        filter: blur(5px);

        &:hover {
            filter: none;
        }

        &@{status-disabled}:hover {
            filter: blur(5px);
        }
    }

    // --- Element status ---

    @{status-hoverable} {
        cursor: help;
    }

    @{status-clickable} {
        cursor: pointer;
    }

    @{status-disabled} {
        cursor: not-allowed !important;
        opacity: 50%;
    }

    // --- Elements ---

    @{element-title} {
        text-align: center;
        font-weight: 500;
    }

    @{element-paragraph} {

    }

    @{element-separator} {
        border-width: 1px;
        border-style: solid;
        border-color: rgba(
            var(--bluelib-color-r),
            var(--bluelib-color-g),
            var(--bluelib-color-b),
            0.1
        );
    }

    @{element-list-item} {
        margin: 10px 0;
    }

    @{element-anchor} {

    }

    // --- Alignment ---

    @{align-left} {
        text-align: left;
    }

    @{align-center} {
        text-align: center;
    }

    @{align-right} {
        text-align: right;
    }

    // --- Sizes ---

    @{size-xxl} {
        font-size: xx-large;
    }

    @{size-xl} {
        font-size: x-large;
    }

    @{size-l} {
        font-size: large;
    }

    @{size-m} {
        font-size: medium;
    }

    @{size-s} {
        font-size: small;
    }

    @{size-xs} {
        font-size: x-small;
    }

    @{size-xxs} {
        font-size: xx-small;
    }

    // --- Styles ---

    @{style-bold} {
        font-weight: bold;
    }

    @{style-italic} {
        font-style: italic;
    }

    @{style-underline} {
        text-decoration-line: underline;
    }

    @{style-strike} {
        text-decoration-line: line-through;
    }

    @{style-monospace} {
        font-family: "Fira Code", monospace;
    }

    @{style-keyboard} {
        font-family: "Fira Code", monospace;
        padding: 2px 4px;
        border: 2px outset;
        border-radius: 4px;
    }

    // --- Colors ---

    @{color-red} {
        --bluelib-color-r: 200;
        --bluelib-color-g: 0;
        --bluelib-color-b: 0;
    }

    @{color-orange} {
        --bluelib-color-r: 200;
        --bluelib-color-g: 165;
        --bluelib-color-b: 0;
    }

    @{color-yellow} {
        --bluelib-color-r: 200;
        --bluelib-color-g: 200;
        --bluelib-color-b: 0;
    }

    @{color-lime} {
        --bluelib-color-r: 0;
        --bluelib-color-g: 200;
        --bluelib-color-b: 0;
    }

    @{color-cyan} {
        --bluelib-color-r: 0;
        --bluelib-color-g: 200;
        --bluelib-color-b: 200;
    }

    @{color-blue} {
        --bluelib-color-r: 0;
        --bluelib-color-g: 0;
        --bluelib-color-b: 200;
    }

    @{color-magenta} {
        --bluelib-color-r: 200;
        --bluelib-color-g: 0;
        --bluelib-color-b: 200;
    }

    @{color-gray} {
        --bluelib-color-r: 128;
        --bluelib-color-g: 128;
        --bluelib-color-b: 128;
    }
}