CSS variables for font properties.
<dt></dt>
<dd>
<p><kbd>var(--global-font-size--)</kbd></p>
<p class="demo-size--">Veni, vidi, vici.
</p>
</dd>
/* To use settings */
.demo-family--mono { font-family: var(--mono); }
.demo-family--serif { font-family: var(--serif); }
.demo-family--sans { font-family: var(--sans); }
/* To style samples */
[class*="demo-family-"] address {
line-height: 1.4;
letter-spacing: 0.5em;
}
/* To use settings */
.demo-size--xxx-large { font-size: var(--global-font-size--xxx-large); }
.demo-size--xx-large { font-size: var(--global-font-size--xx-large); }
.demo-size--x-large { font-size: var(--global-font-size--x-large); }
.demo-size--large { font-size: var(--global-font-size--large); }
.demo-size--medium { font-size: var(--global-font-size--medium); }
.demo-size--small { font-size: var(--global-font-size--small); }
.demo-size--x-small { font-size: var(--global-font-size--x-small); }
/* To style samples */
[class*="demo-family-"] div { letter-spacing: 0.5em; }
/* To style samples */
.demo-style--italic { font-style: italic; }
/* To use settings */
.demo-weight--regular { font-weight: var(--regular); }
.demo-weight--medium { font-weight: var(--medium); }
.demo-weight--bold { font-weight: var(--bold); }
.demo-weight--black { font-weight: var(--black); }
/* To style samples */
.demo-grid p {
font-size: var(--global-font-size--xxx-large);
}
.demo-grid figure {
display: flex;
flex-direction: column;
}
.demo-grid figure p {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "settings"
}