roolith css framework

Colors

Here is default color palette -

primary

#0099FF

secondary

#373459

tertiary

#tertiary

info

#F8BF16

success

#9ECF91

danger

#C40000

link

#67BCEF

dark

#212121

black

#000000

white

#FFFFFF

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>

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>

SASS

Reference from _settings.scss

$colors: (
    primary: #0099ff,
    secondary: #373459,
    tertiary: #f4751a,
    info: #f8bf16,
    success: #9ecf91,
    danger: #c40000,
    link: #67bcef,
    dark: #212121,
    black: #000000,
    white: #ffffff,
    light: #fafbfc,
) !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%);
}