Typography
Function: pds-fontsize
pds-fontsize(name)
name- refers to a fontsize name, like 'huge'
Example:
<![CDATA[
h1 {
font-size: pds-fontsize(huge);
}
]]>
$pds-fontsizes are defined as a map, like
<![CDATA[
$pds-fontsizes: (
none: 0,
tiny: 8px,
xxs: 12px,
xs: 14px,
s: 16px,
default: 18px,
m: 22px,
l: 24px,
xl: 32px,
xxl: 44px,
huge: 56px,
);
]]>
You can add your own fontsize by adding entries to the map:
<![CDATA[
@use "sass:map";
$pds-fontsizes: map.set($pds-fontsizes, header-large, 4rem);
$pds-fontsizes: map.set($pds-fontsizes, footnote, .5rem);
]]>
Function: pds-lineheight
pds-lineheight(name)
name- refers to a lineheight name, like 'default'
Example:
<![CDATA[
h1 {
line-height: pds-lineheight(default);
}
]]>
$pds-lineheights are defined as a map, like
<![CDATA[
$pds-lineheights: (
none: 0,
xs: 1,
s: 1.25,
default: 1.5,
m: 1.75,
);
]]>
You can add your own lineheight by adding entries to the map:
<![CDATA[
@use "sass:map";
$pds-lineheights: map.set($pds-lineheights, header-large, 1.2);
$pds-lineheights: map.set($pds-lineheights, footnote, .5);
]]>
Mixin: pds-slant
pds-slant([color], [bottom-left|bottom-right], [size])
color (default blue)- refers to a color name, like 'blue-40'
bottom-left|bottom-right (default bottom-left)- indicates the direction of the slant
size (default 10px)- the size of the slant
Example:
<![CDATA[
.infobox {
@include pds-slant(red)
}
]]>