roolith css framework

Colors

Here is default color palette -

primary

secondary

tertiary

info

success

danger

link

dark

black

white

light

There are also helper classes for all color. To make text color use .color-{colorName} and for background color use bg-color-{colorName}

Lorem ipsum dolor sit amet, consectetur.

<p class="color-primary">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-secondary">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-tertiary">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-info">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-success">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-danger">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-link">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-dark">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-black">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-white">Lorem ipsum dolor sit amet, consectetur.</p>
<p class="color-light">Lorem ipsum dolor sit amet, consectetur.</p>

For background color use following class names -

<div class="bg-color-primary">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-secondary">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-tertiary">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-info">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-success">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-danger">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-link">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-dark">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-black">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-white">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="bg-color-light">Lorem ipsum dolor sit amet, consectetur.</div>

SASS

Reference from _settings.scss

$colors: (
    primary: #3b82f6,
    secondary: #8b5cf6,
    tertiary: #0ea5e9,
    info: #f87315,
    success: #10b47f,
    danger: #ef4444,
    link: #739bf8,
    dark: #222733,
    black: #030712,
    white: #ffffff,
    light: #f5f8fb,
) !default;

Example SASS for loop -

@use "./path/to/settings";
    
@each $name, $value in settings.$colors {
    .selector-#{'' + $name} {
        background: var(--r-color-#{$name});
    }
}

:root {
    --r-color-primary: #0099ff;
    --r-color-secondary: #373459;
    --r-color-tertiary: #f4751a;
    --r-color-info: #f8bf16;
    --r-color-success: #9ecf91;
    --r-color-danger: #c40000;
    --r-color-link: #67bcef;
    --r-color-dark: #212121;
    --r-color-black: #000000;
    --r-color-white: #ffffff;
    --r-color-light: #fafbfc;
}

All colors with shades

:root {
    --r-color-primary: #0099ff;
    --r-color-secondary: #373459;
    --r-color-tertiary: #f4751a;
    --r-color-info: #f8bf16;
    --r-color-success: #9ecf91;
    --r-color-danger: #c40000;
    --r-color-link: #67bcef;
    --r-color-dark: #212121;
    --r-color-black: #000000;
    --r-color-white: #ffffff;
    --r-color-light: #fafbfc;
    --r-color-light-darken-1: color-mix(in srgb, var(--r-color-light), black 1%);
    --r-color-light-lighten-1: color-mix(in srgb, var(--r-color-light), white 1%);
    --r-color-light-darken-2: color-mix(in srgb, var(--r-color-light), black 2%);
    --r-color-light-lighten-2: color-mix(in srgb, var(--r-color-light), white 2%);
    --r-color-light-darken-3: color-mix(in srgb, var(--r-color-light), black 3%);
    --r-color-light-lighten-3: color-mix(in srgb, var(--r-color-light), white 3%);
    --r-color-light-darken-5: color-mix(in srgb, var(--r-color-light), black 5%);
    --r-color-light-lighten-5: color-mix(in srgb, var(--r-color-light), white 5%);
    --r-color-light-darken-10: color-mix(in srgb, var(--r-color-light), black 10%);
    --r-color-light-lighten-10: color-mix(in srgb, var(--r-color-light), white 10%);
    --r-color-light-darken-15: color-mix(in srgb, var(--r-color-light), black 15%);
    --r-color-light-lighten-15: color-mix(in srgb, var(--r-color-light), white 15%);
    --r-color-light-darken-30: color-mix(in srgb, var(--r-color-light), black 30%);
    --r-color-light-lighten-30: color-mix(in srgb, var(--r-color-light), white 30%);
    --r-color-light-darken-50: color-mix(in srgb, var(--r-color-light), black 50%);
    --r-color-light-lighten-50: color-mix(in srgb, var(--r-color-light), white 50%);
    --r-color-info-lighten-20: color-mix(in srgb, var(--r-color-info), white 20%);
    --r-color-info-lighten-40: color-mix(in srgb, var(--r-color-info), white 40%);
    --r-color-white-darken-2: color-mix(in srgb, var(--r-color-white), black 2%);
    --r-color-dark-lighten-2: color-mix(in srgb, var(--r-color-dark), white 2%);
    --r-color-white-darken-3: color-mix(in srgb, var(--r-color-white), black 3%);
    --r-color-dark-lighten-3: color-mix(in srgb, var(--r-color-dark), white 3%);
    --r-color-white-darken-4: color-mix(in srgb, var(--r-color-white), black 4%);
    --r-color-dark-lighten-4: color-mix(in srgb, var(--r-color-dark), white 4%);
    --r-color-white-darken-5: color-mix(in srgb, var(--r-color-white), black 5%);
    --r-color-dark-lighten-5: color-mix(in srgb, var(--r-color-dark), white 5%);
    --r-color-white-darken-6: color-mix(in srgb, var(--r-color-white), black 6%);
    --r-color-dark-lighten-6: color-mix(in srgb, var(--r-color-dark), white 6%);
    --r-color-white-darken-7: color-mix(in srgb, var(--r-color-white), black 7%);
    --r-color-dark-lighten-7: color-mix(in srgb, var(--r-color-dark), white 7%);
    --r-color-white-darken-8: color-mix(in srgb, var(--r-color-white), black 8%);
    --r-color-dark-lighten-8: color-mix(in srgb, var(--r-color-dark), white 8%);
    --r-color-white-darken-10: color-mix(in srgb, var(--r-color-white), black 10%);
    --r-color-dark-lighten-10: color-mix(in srgb, var(--r-color-dark), white 10%);
    --r-color-white-darken-15: color-mix(in srgb, var(--r-color-white), black 15%);
    --r-color-dark-lighten-15: color-mix(in srgb, var(--r-color-dark), white 15%);
    --r-color-white-darken-20: color-mix(in srgb, var(--r-color-white), black 20%);
    --r-color-dark-lighten-20: color-mix(in srgb, var(--r-color-dark), white 20%);
    --r-color-white-darken-30: color-mix(in srgb, var(--r-color-white), black 30%);
    --r-color-dark-lighten-30: color-mix(in srgb, var(--r-color-dark), white 30%);
    --r-color-white-darken-40: color-mix(in srgb, var(--r-color-white), black 40%);
    --r-color-dark-lighten-40: color-mix(in srgb, var(--r-color-dark), white 40%);
    --r-color-white-darken-50: color-mix(in srgb, var(--r-color-white), black 50%);
    --r-color-dark-lighten-50: color-mix(in srgb, var(--r-color-dark), white 50%);
    --r-color-white-darken-60: color-mix(in srgb, var(--r-color-white), black 60%);
    --r-color-dark-lighten-60: color-mix(in srgb, var(--r-color-dark), white 60%);
    --r-color-white-darken-70: color-mix(in srgb, var(--r-color-white), black 70%);
    --r-color-dark-lighten-70: color-mix(in srgb, var(--r-color-dark), white 70%);
    --r-color-white-darken-80: color-mix(in srgb, var(--r-color-white), black 80%);
    --r-color-dark-lighten-80: color-mix(in srgb, var(--r-color-dark), white 80%);
    --r-color-black-lighten-70: color-mix(in srgb, var(--r-color-black), white 70%);
    --r-color-primary-lighten-80: color-mix(in srgb, var(--r-color-primary), white 80%);
}

Basic

Extended

Blocks

Colors

SASS

All colors with shades