@mixin: pds-theme
pds-theme($name)
$name-
refers to a theme name, like 'red01'.
Changes the current theme css variables to the given theme;
if
var(--pds-color-accfill) would have been
orange before calling the mixin, it may be blue after calling it.
Example:
<![CDATA[
h1 {
@include pds-theme(creme01);
color:var(--pds-color-stroke-60);
background-color:var(--pds-color-fill-60);
}
]]>
Css variables: pds-color-xxx
pds-color-$name
name-
Refers to a color name, like 'blue', 'creme-40' or a theme
property like 'fill-20'.
See design/colors for an overview of the available color names.
The 'theme' colors depend on the current theme.
Available theme properties are
fill,stroke,
accfill and accstroke
Example:
<![CDATA[
h1 {
color:var(--pds-color-stroke);
background-color:var(--pds-color-creme-40);
}
]]>
$pds-colors is defined as a map, like
<![CDATA[
$pds-colors: (
black-110: #000,
black-80: #333,
);
]]>
You can override these css variables in your own design,
or you can add your own colors by adding entries to the map:
<![CDATA[
@use "sass:map";
$pds-colors: map.set($pds-colors, jazzberry, #B3116B);
$pds-colors: map.set($pds-colors, flirt, #B30069);
...
p {
background-color: var(--pds-color-flirt);
}
]]>
$pds-themes is also defined as a map, like
<![CDATA[
$pds-themes: (
blue01 : (
fill: map-get($pds-colors,'blue'),
accfill: map-get($pds-colors,'orange'),
stroke: map-get($pds-colors,'white'),
accstroke: map-get($pds-colors,'white')
)
)
]]>
You can override the css variables in your own design,
or you can add your own themes by adding entries to the map.