Color

Example

h1 {
border : var(--primary);
color: var(--primary-light);
background: rgba(var(--primary-light), 0.5);
}

or use it in you html file

<div class="bg-primary color-primary border-primary"></div>
<div class="bg-secondary-light color-secondary-dark border-default-warning contrast-all"></div>
<!-- Dark mode -->
<div class="bg-secondary-light dark-bg-dark contrast-all"></div>

Installing

In the working repository

npm i @ultrastark/us-mixin

Then import it in your main css file (main.scss or style.scss)

@import '~@ultrastark/us-mixin/utilities';

A default color map was already created, you have to change the color variable before the import (only the base is needed) It's better to add this one in the main.scss file, (or if you follow the sass 7-1 pattern @todo under base/colors).

And before you import the mixin ex:

@import './base/colors.scss';
@import '~@ultrastark/us-mixin/utilities';
// 'base/colors.scss'
$use-default-colors-map: true;
$us-color-settings: (
primary: (
base: #3880ff,
contrast: #000,
dark: #3880FF,
darker: #3880FF,
darkest: #3880FF,
light: #84B1FF,
lighter: #84B1FF,
lightest: #84B1FF,
trans: rgba(#3880ff, 0.9)
),
secondary: (
base: #0cd1e8,
)
)
$color-dark: 12%;
$color-darker: 15%;
$color-darkest: 18%;
$color-light: 12%;
$color-lighter: 15%;
$color-lightest: 18%;
$color-opacity: 0.3;
$gradient-rotation: 200deg;
$isDeeper: true;
$isDeepest: true;

Remark, you if you didn't set any value, the mixin will create default values (shade, tint, trans, contrast) with the base value you gave

Removing features

darkest or darker

Set the unwanted one to false

$isDeeper: false;
$isDeepest: false;

Default map generation

By default, us-mixin will create a set of default colors map. If you don't need those and - or want to optimize your colors set, turn the $use-default-colors-map to false.

$use-default-colors-map: false;

Or if you want to remove the specifics one you don't need

$use-default-default-map: false; // primary, secondary, tertiary
$use-default-base-map: false; // white, black
$use-default-shade-map: false; // light, medium, dark
$use-default-status-map: false; // danger, warning, success, info, disabled

Useful class

colors

color-{color}, bg-{color}, fill-{color}, stroke-{color}, border-{color}

<div class="color-primary"></div>

on hover

hover-{colors}-{color}

<div class="hover-color-primary"></div>

contrast

contrast-content : change the color of every (*) child of the tag.
contrast-selection : change the selector of every (*) child of the tag.
contrast-all : contrast-content and contrast-selection together.

<div class="bg-dark contrast-all"></div>

prefers-color-scheme : dark

$isUsingDarkTheme is by default set to true, and will create a set of "dark mode" css classes

example:

<section class="bg-light dark-bg-dark contrast-all">
<p>I'm changing depend on the prefers color scheme :)</p>
</section>

the p tag will be black with a light background in light mode, and white with dark background on dark mode.