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 are defined as a map, like
<![CDATA[
$colors: (
black-110: #000,
black-80: #333,
...
);
]]>
You can override these css variables in your own design,
or you can add your own colors, when configuring settings.css
<![CDATA[
use "...pds/settings" with (
$assets-path: "...path-to-assets",
$custom-colors: (
black-80: #444,
flirt: #B30069
)
);
...
p {
background-color: var(--pds-color-flirt);
}
]]>
@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.
See design/colors for an overview of the available themes.
Example:
<![CDATA[
@use "...pds/pds"
h1 {
@include pds.theme(creme01);
color:var(--pds-color-stroke-60);
background-color:var(--pds-color-fill-60);
}
]]>
PDS themes are also defined as a map, like
<![CDATA[
$themes: (
blue01 : (
fill: map-get($colors,'blue'),
fill-120: map.get($colors,'blue-120'),
fill-110: map.get($colors,'blue-120'),
fill-80: map.get($colors,'blue-110'),
...
accfill: map-get($colors,'orange'),
accfill-120: map.get($colors,'orange-120'),
accfill-110: map.get($colors,'orange-110'),
...
stroke: map-get($colors,'white'),
accstroke: map-get($colors,'white')
),
orange01: (
...
)
...
)
]]>
You can override the themes in your own design,
or you can add your own, when configuring settings.