Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Themes

Output base themes stylesheets

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "output-inverse": true,
  "fake-invert-color": black,
  "fake-invert-filter": invert(1) hue-rotate(180deg) saturate(0.7),
  "token-color": "color-type",
  "token-background-color": null,
  "token-warnings" : true,
);
File Information
  • File: _themes.scss
  • Group: themes
  • Type: variable
  • Lines (comments): 14-21
  • Lines (code): 23-30

Map Properties

Name Type Default Description
output-inverse Boolean true Whether to output the .theme-inverse utility and corresponding inverse variables
fake-invert-color Color black The fallback text color applied to elements using the fake inversion utilities. Note: This should be the color that, when inverted, results in the desired theme color.
fake-invert-filter String invert(1) hue-rotate(180deg) saturate(0.7) The filter applied to elements using the fake inversion utilities.
token-color String "color-type" The token name used for the color property on theme classes.
token-background-color String null The token name used for the background-color property on theme classes. This is not included by default (normally we don't want to set a specific background color but if you do add the background-color token name from the theme)
token-warnings Boolean true Since this is an opinionated stylesheet we warn if you have "token-color" set but it's key is not found in the theme. If this is intentional

Mixins

set()

Mixin

Change modules $config

File Information
  • File: _themes.scss
  • Group: themes
  • Type: mixin
  • Lines (comments): 32-33
  • Lines (code): 35-37

Parameters

Name Type Description
$changes Map Map of changes

Require

styles()

Mixin

Outputs base theme variables and classes

File Information
  • File: _themes.scss
  • Group: themes
  • Type: mixin
  • Lines (comments): 46-49
  • Lines (code): 51-193

Examples

@include ulu.base-themes-styles();

Parameters

Name Type Default Description
$root-selector String :root Top-level selector for default theme, can be adjusted for things like building an editor stylesheet where these are wrapped

Require

Functions

get()

Function

Get a config option

File Information
  • File: _themes.scss
  • Group: themes
  • Type: function
  • Lines (comments): 39-40
  • Lines (code): 42-44

Parameters

Name Type Description
$name String Name of property

Require