Color

Variables

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":                      black,
  "white":                      white,
  "type":                       black,
  "type-secondary":             rgb(82, 82, 82),
  "type-tertiary":              rgb(125, 125, 125),
  "type-disabled":              rgb(160, 160, 160),
  "headline":                   inherit,
  "background":                 white,
  "background-gray":            #fafafa,
  "focus":                      blue,
  "accent":                     orange,
  "info":                       #00bde3,
  "success":                    #00a91c,
  "warning":                    #ffbe2e,
  "danger":                     #d54309,
  "info-background":            #e7f6f8,
  "success-background":         #ecf3ec,
  "warning-background":         #faf3d1,
  "danger-background":          #f4e3db,
  // Used for background of elements that are placeholder or that have no value (think charts)
  "placeholder-background":     #e2e2e2,
  "placeholder-background-alt": #bababa,
  "selected":                   green,
  "box-shadow":                 rgba(0, 0, 0, 0.349),
  "box-shadow-hover":           rgba(0, 0, 0, 0.5),
  "rule":                       gray,
  "rule-light":                 lightgray,
  "link":                       blue,
  "link-hover":                 darkblue,
  "link-active":                darkblue,
  "link-visited":               purple,
  "bullet":                     inherit,
  "control":                    white,
  "control-hover":              white,
  "control-active":             white,
  "control-border":             purple,
  "control-border-hover":       blue,
  "control-border-active":      orange,
  "control-background":         purple,
  "control-background-hover":   blue,
  "control-background-active":  orange,
  // Like accent indicator like things in ui (progress, etc)
  "indicator" :                 #5050ab, 
);

File Information

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

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): 64-68
• Lines (code): 70-81

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)

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): 83-84
• Lines (code): 85-89

Mixins

Used to override or extend the color palette

File Information

• File: _color.scss
• Group: color
• Type: mixin
• Lines (comments): 91-97
• Lines (code): 99-101

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 output classes for all-color-class-styles

File Information

• File: _color.scss
• Group: color
• Type: mixin
• Lines (comments): 126-127
• Lines (code): 129-131

Parameters

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

Require

• $color-classes

Set color contexts

File Information

• File: _color.scss
• Group: color
• Type: mixin
• Lines (comments): 140-150
• Lines (code): 152-154

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 completly (cannot be used with deep)

Require

• map-merge()
• $contexts

Prints contexts styles

File Information

• File: _color.scss
• Group: color
• Type: mixin
• Lines (comments): 179-180
• Lines (code): 182-188

Parameters

Name	Type	Description
$name	String	Name of context

Require

• get-context()
• get-context-value()
• get()

Prints all context styles

File Information

• File: _color.scss
• Group: color
• Type: mixin
• Lines (comments): 234-241
• Lines (code): 243-252

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

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

• context-styles()
• class()
• get()
• $contexts

Outputs all color classes

File Information

• File: _color.scss
• Group: color
• Type: mixin
• Lines (comments): 254-258
• Lines (code): 260-269

Examples

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

Example of a color-context

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

Preview

Require

• class()
• get()
• $color-classes

Functions

Get a color from the palette by name

File Information

• File: _color.scss
• Group: color
• Type: function
• Lines (comments): 103-105
• Lines (code): 107-124

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

Check if a color is set in the palette

File Information

• File: _color.scss
• Group: color
• Type: function
• Lines (comments): 133-133
• Lines (code): 135-138

Require

• get()
• $palette

Get a context by name

File Information

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

Parameters

Name	Type	Description
$name	String	Name of context

Returns

Type
Map

Require

• require-map-get()
• $contexts

Get a context's value'

File Information

• File: _color.scss
• Group: color
• Type: function
• Lines (comments): 164-167
• Lines (code): 169-177

Parameters

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

Returns

Type
Color

Require

• get-context()
• get()

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

File Information

• File: _color.scss
• Group: color
• Type: function
• Lines (comments): 190-195
• Lines (code): 197-199
• Author:

Parameters

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

Returns

Type
Color

Related Links

• Modified from source (CSS Tricks, Kitty Giraudel)

Require

• get()

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): 201-206
• Lines (code): 208-210

Parameters

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

Returns

Type
Color

Require

• get()

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

File Information

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

Parameters

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

Returns

Type
Color

Related Links

• Modified from source (CSS Tricks, Kitty Giraudel)

Require

• get()

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): 223-228
• Lines (code): 230-232

Parameters

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

Returns

Type
Color

Require

• get()