API Reference

note

Before starting, please note that (as per the W3C spec), the scope of a CSS variable is as follows :

• A CSS variable defined on a DOM node applies to this DOM node...
• ... as well as all of its children tree
• ... as well as all the Shadow DOM trees in the children tree

Default colors

Main variable	Light variant	Dark variant	Contrast color
--black	--light-black	--dark-black	--on-black
--gray	--light-gray	--dark-gray	--on-gray
--white	--light-white	--dark-white	--on-white

Wheel colors

These are the colors of the color wheel.

Main variable	Light variant	Dark variant	Contrast color
--red	--light-red	--dark-red	--on-red
--orange	--light-orange	--dark-orange	--on-orange
--yellow	--light-yellow	--dark-yellow	--on-yellow
--olive	--light-olive	--dark-olive	--on-olive
--green	--light-green	--dark-green	--on-green
--indigo	--light-indigo	--dark-indigo	--on-indigo
--azure	--light-azure	--dark-azure	--on-azure
--blue	--light-blue	--dark-blue	--on-blue
--violet	--light-violet	--dark-violet	--on-violet
--pink	--light-pink	--dark-pink	--on-pink

Modal colors

Modal colors are a colors that represent state.

Main variable	Light variant	Dark variant	Contrast color
--error	--light-error	--dark-error	--on-error
--warning	--light-warning	--dark-warning	--on-warning
--success	--light-success	--dark-success	--on-success

Social Media Colors

Main variable	Light variant	Dark variant	Contrast color
--twitter	--light-twitter	--dark-twitter	--on-twitter
--facebook	--light-facebook	--dark-facebook	--on-facebook
--instagram	--light-instagram	--dark-instagram	--on-instagram
--google	--light-google	--dark-google	--on-google

Theme-colors

Main variable	Light variant	Dark variant	Contrast color
--primary	--light-primary	--dark-primary	--on-primary
--secondary	--light-secondary	--dark-secondary	--on-secondary
--accent1	--light-accent1	--dark-accent1	--on-accent1
--accent2	--light-accent2	--dark-accent2	--on-accent2
--accent3	--light-accent3	--dark-accent3	--on-accent3

Ui colors

UI colors are meant to be used by the User Interface or your page or application. These colors are provided in two variants, light (default, L) or dark(D). Read more about themes here.

Main variable (L/D)	Light variant (L/D)	Dark variant (L/D)	Contrast color (L/D)
--background	--light-background	--dark-background	--on-background
--heading	--light-heading	--dark-heading	--on-heading
--subtitle	--light-subtitle	--dark-subtitle	--on-subtitle
--metadata	--light-metadata	--dark-metadata	--on-metadata
--link	--light-link	--dark-link	--on-link
--navlink	--light-navlink	--dark-navlink	--on-navlink
--paragraph	--light-paragraph	--dark-paragraph	--on-paragraph

Getters

Getters are CSS classes that take a locally-set CSS variable and apply it as a particular property (or set of properties) to a DOM node.

Getters

Main variable	Light variant	Dark variant	Contrast color	Description
.b-x	.b-light-x	.b-dark-x	.b-on-x	Getter CSS class that apply the scoped ‘x’ color or one of its variants as background of the target element
.b-y	.b-light-y	.b-dark-y	.b-on-y	Getter CSS class that apply the scoped ‘y’ color or one of its variants as background of the target element
.c-x	.c-light-x	.c-dark-x	.c-on-x	Getter CSS class that apply the scoped ‘x’ color or one of its variants as color of the target element
.c-y	.c-light-y	.c-dark-y	.c-on-y	Getter CSS class that apply the scoped ‘y’ color or one of its variants as color of the target element

note

At the moment we have choosen to only provide stock getters for the CSS properties color and background. Our rationale is that the users of this library would most often than not create their own getter classes.

Nevertheless, we might provide addional getter classes in future releases. If you believe additional vanilla getter classes would benefit a common use case, please raise an issue.

Setters (WORK IN PROGRESS)

Theme changer

Setter	Description
ui-dark	Setter for the parent element (i.e body)
ui-iceberg	Setter for the parent element (i.e body)

note

These are two special setters that apply ALL of the ui colors to the local DOM node scope. This means if you apply this class to <body>, all of your app will inherit the theme !

Mixins (WORK IN PROGRESS)

Mixins of each part of the library

If you rather to input one group of Swatch library variables to your own library simply just add the related input code from table below into your own SCSS library.

info

It's recommended to use @use rule instead of @import rule for it's multiple advantages.

irective	Description
@mixins.define-variables(vars.monochrome-colors);	Adds the monochrome colors to the library
@mixins.define-variables(vars.modals-colors);	Adds the modals colors to the library
@mixins.define-variables(vars.wheel-colors);	Adds the wheel colors to the library
@mixins.define-variables(vars.theme.colors);	Adds the Theme colors to the library
@mixins.define-variables(vars.sm-colors);	Adds the SM colors to the library
@mixins.define-variables(vars.ui-colors);	Adds the UI colors to the library