Color

Variables

$palette

Variable Type: map

The color palette map, can be extended or modified with set() and accessed with get()

Note do not use names that start with "var(" which are reserved for custom properties. Also do not use "inherit" or "transparent" as those are reserved.
The default palette color names are used throughout the system

$palette: (
  "black":                      #000000,
  "white":                      #ffffff,
  "type":                       #1f2937,
  "type-secondary":             #4b5563,
  "type-tertiary":              #6b7280,
  "type-disabled":              #9ca3af,
  "headline":                   inherit,
  "background":                 #ffffff,
  "focus":                      #2563eb,
  "accent":                     #4f46e5,
  "info":                       #0ea5e9,
  "success":                    #16a34a,
  "warning":                    #ea580c,
  "danger":                     #dc2626,
  "info-background":            #e0f2fe,
  "success-background":         #dcfce7,
  "warning-background":         #ffedd5,
  "danger-background":          #fee2e2,
  // Used for background of elements that are placeholder or that have no value (think charts)
  "placeholder-background":     #e5e7eb,
  "placeholder-background-alt": #d1d5db,
  "selected":                   #0ea5e9,
  "selected-background":        #e0f2fe,
  "box-shadow":                 rgba(0, 0, 0, 0.2),
  "box-shadow-hover":           rgba(0, 0, 0, 0.4),
  "rule":                       #bbbfc6,
  "rule-light":                 #dadde5,
  "link":                       #2563eb,
  "link-hover":                 #1d4ed8,
  "link-active":                #1e40af,
  "link-visited":               #7e22ce,
  "bullet":                     inherit,
  "control":                    #ffffff,
  "control-hover":              #ffffff,
  "control-active":             #ffffff,
  "control-border":             #4f46e5,
  "control-border-hover":       #4338ca,
  "control-border-active":      #312e81,
  "control-background":         #4f46e5,
  "control-background-hover":   #4338ca,
  "control-background-active":  #312e81,
);

File Information

File: _color.scss
Group: color
Type: variable
Lines (comments): 13-16
Lines (code): 18-60

$contexts

Variable Type: map

Pairs of background-color and color definitions

$contexts: (
  "dark" : (
    "background-color" : "black",
    "color" : "white",
    "base-class" : true
  ),
  "light" : (
    "background-color" : "white",
    "color" : "black",
    "base-class" : true
  ),
);

File Information

File: _color.scss
Group: color
Type: variable
Lines (comments): 62-66
Lines (code): 68-79

Map Properties

Name	Type	Description
$contexts.name.background-color	Number	String
$contexts.name.color	Number	String
$contexts.name.base-class	Boolean	Print this value in the base module as a class (if base prints)

$color-classes

Variable

Palette entries that are output as classes when using all-color-class-styles

Use set-color-classes mixin to alter this map

$color-classes: (
  "black" : true,
  "white" : true,
  "type": true
);

File Information

File: _color.scss
Group: color
Type: variable
Lines (comments): 81-82
Lines (code): 83-87

Mixins

set()

Mixin

Used to override or extend the color palette

File Information

File: _color.scss
Group: color
Type: mixin
Lines (comments): 89-95
Lines (code): 97-99

Examples

Setting the error and type color

@include ulu.color-set((
  "type" : #444,
  "error" : orange,
));

Parameters

Name	Type	Description
$changes	`Map`	A map to merge into the color palette

Require

$palette

set-color-classes()

Mixin

Set output classes for all-color-class-styles

File Information

File: _color.scss
Group: color
Type: mixin
Lines (comments): 124-125
Lines (code): 127-129

Parameters

Name	Type	Description
$changes	`Map`	Map of changes (you can disable defaults this way)

Require

$color-classes

set-contexts()

Mixin

Set color contexts

File Information

File: _color.scss
Group: color
Type: mixin
Lines (comments): 138-148
Lines (code): 150-152

Examples

Overwriting contexts

@include ulu.color-set-contexts((
  "dark" : (
    "background-color" : red,
    "color" : white,
  )
), false, true);

Parameters

Name	Type	Description
$changes	`Map`	A map to merge
$deep	`Map`	Use deep merge
$overwrite	`Map`	Overwrite the completely (cannot be used with deep)

Require

map-merge()
$contexts

context-styles()

Mixin

Prints contexts styles

File Information

File: _color.scss
Group: color
Type: mixin
Lines (comments): 177-178
Lines (code): 180-186

Parameters

Name	Type	Description
$name	`String`	Name of context

Require

all-context-styles()

Mixin

Prints all context styles

File Information

File: _color.scss
Group: color
Type: mixin
Lines (comments): 232-239
Lines (code): 241-250

Examples

@include ulu.all-context-styles();

Example of a color-context

 <div class="color-context-dark" style="padding: 1rem">
  Some text in dark context
</div>

Preview

Some text in dark context

Parameters

Name	Type	Description
$with-prop	`String`	Checks the specific context for a certain prop (has to be truthy)(used for output in helper/base color modules)

Require

all-color-class-styles()

Mixin

Outputs all color classes

File Information

File: _color.scss
Group: color
Type: mixin
Lines (comments): 252-256
Lines (code): 258-267

Examples

@include ulu.all-color-class-styles();

Example of a color-context

<span class="color-name">Some text</span>

Preview

Some text

Require

Functions

get()

Function

Get a color from the palette by name

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 101-103
Lines (code): 105-122

Parameters

Name	Type	Description
$name	`String`	Name of color to get

Returns

Type	Description
Color	Note if non-string value is passed it is sent back through, along with custom properties ("var(..." and keywords inherit and transparent. This is by design so that you can always pass a user's colors through this (without having to check if it's a color value or a string [color palette])

Require

require-map-get()
$palette

exists()

Function

Check if a color is set in the palette

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 131-131
Lines (code): 133-136

Require

get()
when()
$palette

get-context()

Function

Get a context by name

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 154-156
Lines (code): 158-160

Parameters

Name	Type	Description
$name	`String`	Name of context

Returns

Type
Map

Require

require-map-get()
$contexts

get-context-value()

Function

Get a context's value'

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 162-165
Lines (code): 167-175

Parameters

Name	Type	Description
$name	`String`	Name of context
$prop	`String`	The property to get

Returns

Type
Color

Require

tint()

Function

Tint (add white) a color using the default white by a percentage

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 188-193
Lines (code): 195-197
Author:

Parameters

Name	Type	Description
$color	`Color, String`	Color/palette color name to apply to tint
$percentage	`Number`	Percentage

Returns

Type
Color

Modified from source (CSS Tricks, Kitty Giraudel)

Require

get()

css-tint()

Function

Tint (add white) a color using the default white by a percentage (Using color-mix)

This only works in modern browsers (as of June 2025)
These match ulu.color-tint() and are designed to accept the same arguments with the same results

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 199-204
Lines (code): 206-208

Parameters

Name	Type	Description
$color	`Color, String`	Color or custom property to apply mix to
$percentage	`Number`	Percentage

Returns

Type
Color

Require

get()

shade()

Function

Shade (add black) a color with the default black by a percentage

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 210-215
Lines (code): 217-219
Author: Kitty Giraudel

Parameters

Name	Type	Description
$color	`Color, String`	Color/palette color name to shade
$percentage	`Number`	Percentage to shade

Returns

Type
Color

Modified from source (CSS Tricks, Kitty Giraudel)

Require

get()

css-shade()

Function

Shade (add black) a color using the default white by a percentage (Using color-mix)

This only works in modern browsers (as of June 2025)
These match ulu.color-shade() and are designed to accept the same arguments with the same results

File Information

File: _color.scss
Group: color
Type: function
Lines (comments): 221-226
Lines (code): 228-230

Parameters

Name	Type	Description
$color	`Color, String`	Color or custom property to apply mix to
$percentage	`Number`	Percentage

Returns

Type
Color

Require

get()

Jump To:

Color

Variables

$palette

$contexts

Map Properties

$color-classes

Mixins

set()

Examples

Parameters

Require

set-color-classes()

Parameters

Require

set-contexts()

Examples

Parameters

Require

context-styles()

Parameters

Require

all-context-styles()

Examples

Preview

Parameters

Require

all-color-class-styles()

Examples

Preview

Require

Functions

get()

Parameters

Returns

Require

exists()

Require

get-context()

Parameters

Returns

Require

get-context-value()

Parameters

Returns

Require

tint()

Parameters

Returns

Related Links

Require

css-tint()

Parameters

Returns

Require

shade()

Parameters

Returns

Related Links

Require

css-shade()

Parameters

Returns

Require