Typography
Function: pds.fontsize
pds.fontsize(name)
name- refers to a fontsize name, like 'huge'
Example:
<![CDATA[
@use "...pds/pds";
h1 {
font-size: pds.fontsize(huge);
}
]]>
Font sizes are defined as a map, like
<![CDATA[
$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 override these font sizes, or define your own,
when configuring settings:
<![CDATA[
use "...pds/settings" with (
$assets-path: "...path-to-assets",
$custom-fontsizes: (
header-large: 4rem,
footnote: .5rem
)
);
...
@use "...pds/pds";
h1 {
font-size: pds.fontsize(header-large);
}
]]>
Function: pds.lineheight
pds.lineheight(name)
name- refers to a lineheight name, like 'default'
Example:
<![CDATA[
@use "...pds/pds";
h1 {
line-height: pds.lineheight(default);
}
]]>
Line heights are defined as a map, like
<![CDATA[
$lineheights: (
none: 0,
tiny: 1,
xxs: 1,
xs: 1,
s: 1.25,
default: 1.5,
m: 1.75,
l: 1.75,
xl: 1.75,
xxl: 1.75,
huge: 1.75
);
]]>
You can override these lineheights, or add your own, when
configuring settings:
<![CDATA[
use "...pds/settings" with (
$assets-path: "...path-to-assets",
$custom-lineheights: (
header-large: 1.2,
footnote: .5
)
);
...
@use "...pds/pds";
h1 {
line-height: pds.lineheight(header-large);
}
]]>
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[
@use "...pds/pds";
.infobox {
@include pds.slant(red)
}
]]>