CSS variables for colors.
<div class="x-grid--layout-cols-equal-min-width-max-count">
<dl>
<dt>Neutral (f.k.a. Primary)
</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-primary--xxx-light)"></span>
<code>--global-color-primary--xxx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--xx-light)"></span>
<code>--global-color-primary--xx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--x-light)"></span>
<code>--global-color-primary--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--light)"></span>
<code>--global-color-primary--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--normal)"></span>
<code>--global-color-primary--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--dark)"></span>
<code>--global-color-primary--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--x-dark)"></span>
<code>--global-color-primary--x-dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--xx-dark)"></span>
<code>--global-color-primary--xx-dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-primary--xxx-dark)"></span>
<code>--global-color-primary--xxx-dark</code>
</figure>
</div>
</dd>
<dt>Notes</dt>
<dd>
<div class="demo-notes">
<p class="
c-message
c-message--type-info
c-message--scope-section
">
The name <code>primary</code> will become <code>neutral</code> in a future version.
</p>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Accent</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--xxx-light)"></span>
<code>--global-color-accent--xxx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--xx-light)"></span>
<code>--global-color-accent--xx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--x-light)"></span>
<code>--global-color-accent--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--light)"></span>
<code>--global-color-accent--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--normal)"></span>
<code>--global-color-accent--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--dark)"></span>
<code>--global-color-accent--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--x-dark)"></span>
<code>--global-color-accent--x-dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--xx-dark)"></span>
<code>--global-color-accent--xx-dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--xxx-dark)"></span>
<code>--global-color-accent--xxx-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--secondary)"></span>
<code>--global-color-accent--secondary</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--tertiary)"></span>
<code>--global-color-accent--tertiary</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Secondary</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-secondary--xxx-light)"></span>
<code>--global-color-secondary--xxx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-secondary--xx-light)"></span>
<code>--global-color-secondary--xx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-secondary--x-light)"></span>
<code>--global-color-secondary--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-secondary--light)"></span>
<code>--global-color-secondary--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-secondary--normal)"></span>
<code>--global-color-secondary--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-secondary--dark)"></span>
<code>--global-color-secondary--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-secondary--x-dark)"></span>
<code>--global-color-secondary--x-dark</code>
</figure>
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-secondary--xx-dark)"></span>
<code>--global-color-secondary--xx-dark</code>
</figure>
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-secondary--xxx-dark)"></span>
<code>--global-color-secondary--xxx-dark</code>
</figure>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--secondary)"></span>
<code>--global-color-accent--secondary</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Tertiary</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-tertiary--xxx-light)"></span>
<code>--global-color-tertiary--xxx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-tertiary--xx-light)"></span>
<code>--global-color-tertiary--xx-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-tertiary--x-light)"></span>
<code>--global-color-tertiary--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-tertiary--light)"></span>
<code>--global-color-tertiary--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-tertiary--normal)"></span>
<code>--global-color-tertiary--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-tertiary--dark)"></span>
<code>--global-color-tertiary--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-tertiary--x-dark)"></span>
<code>--global-color-tertiary--x-dark</code>
</figure>
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-tertiary--xx-dark)"></span>
<code>--global-color-tertiary--xx-dark</code>
</figure>
<figure class="
demo-palette-item
not-available
">
<span role="presentation" style="background-color: var(--global-color-tertiary--xxx-dark)"></span>
<code>--global-color-tertiary--xxx-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-accent--tertiary)"></span>
<code>--global-color-accent--tertiary</code>
</figure>
</div>
</dd>
</dl>
</dl>
</div>
<div class="x-grid--layout-cols-equal-min-width-max-count">
<dl>
<dt>Info</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-info--x-light)"></span>
<code>--global-color-info--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-info--light)"></span>
<code>--global-color-info--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-info--normal)"></span>
<code>--global-color-info--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-info--dark)"></span>
<code>--global-color-info--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-info--x-dark)"></span>
<code>--global-color-info--x-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-opaque
">
<span role="presentation" style="background-color: var(--global-color-info--weak)"></span>
<code>--global-color-info--weak</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Danger</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-danger--x-light)"></span>
<code>--global-color-danger--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-danger--light)"></span>
<code>--global-color-danger--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-danger--normal)"></span>
<code>--global-color-danger--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-danger--dark)"></span>
<code>--global-color-danger--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-danger--x-dark)"></span>
<code>--global-color-danger--x-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-opaque
">
<span role="presentation" style="background-color: var(--global-color-danger--weak)"></span>
<code>--global-color-danger--weak</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Warning</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-warning--x-light)"></span>
<code>--global-color-warning--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-warning--light)"></span>
<code>--global-color-warning--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-warning--normal)"></span>
<code>--global-color-warning--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-warning--dark)"></span>
<code>--global-color-warning--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-warning--x-dark)"></span>
<code>--global-color-warning--x-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-opaque
">
<span role="presentation" style="background-color: var(--global-color-warning--weak)"></span>
<code>--global-color-warning--weak</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Success</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-success--x-light)"></span>
<code>--global-color-success--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-success--light)"></span>
<code>--global-color-success--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-success--normal)"></span>
<code>--global-color-success--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-success--dark)"></span>
<code>--global-color-success--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-success--x-dark)"></span>
<code>--global-color-success--x-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-opaque
">
<span role="presentation" style="background-color: var(--global-color-success--weak)"></span>
<code>--global-color-success--weak</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Extra</dt>
<dd>
<dl>
<dt>Tints & Shades</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-extra--x-light)"></span>
<code>--global-color-extra--x-light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-extra--light)"></span>
<code>--global-color-extra--light</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-extra--normal)"></span>
<code>--global-color-extra--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-extra--dark)"></span>
<code>--global-color-extra--dark</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-extra--x-dark)"></span>
<code>--global-color-extra--x-dark</code>
</figure>
</div>
</dd>
<dt>Deprecated</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
not-opaque
">
<span role="presentation" style="background-color: var(--global-color-extra--weak)"></span>
<code>--global-color-extra--weak</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
</div>
<div class="x-grid--layout-cols-equal-min-width-max-count">
<dl>
<dt>Generic</dt>
<dd>
<dl>
<dt>Background</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-background--app)"></span>
<code>--global-color-background--app</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Deprecated</dt>
<dd>
<dl>
<dt>Link on Light/Dark</dt>
<dd>
<div class="demo-palette">
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-link-on-light--normal)"></span>
<code>--global-color-link-on-light--normal</code>
</figure>
<figure class="
demo-palette-item
">
<span role="presentation" style="background-color: var(--global-color-link-on-dark--normal)"></span>
<code>--global-color-link-on-dark--normal</code>
</figure>
</div>
</dd>
</dl>
</dd>
</dl>
</div>
/* CORE */
body > main {
width: unset;
margin-inline: 0.5em;
}
dt:not(dd dt) {
font-weight: var(--bold);
}
dd {
margin-inline: 0; /* (Default, Docs) overwrite browser */
}
dl {
padding-left: 0; /* (CMS, Docs) overwrite core-styles... */
}
/* PATTERN */
/* Containers */
[class*="x-grid"] {
--gap: 0.5em;
}
.demo-notes,
.demo-palette {
margin-block: 1em;
}
.demo-palette {
display: flex;
flex-direction: column;
gap: 0.5em;
}
/* Items */
.demo-palette-item {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5em;
}
figure.demo-palette-item {
margin-block: unset;
}
.demo-palette-item.not-available {
opacity: 0.5;
}
/* Elements */
.demo-palette-item span {
border: var(--global-border-width--normal) solid black;
}
.demo-palette-item.not-available span {
border-color: transparent;
}
.demo-palette-item span {
min-width: 3em;
height: 3em;
}
.demo-palette-item.not-opaque span {
display: grid;
}
.demo-palette-item.not-opaque span::before {
content: '';
background-image: linear-gradient(45deg, #80808040 25%, transparent 25%), linear-gradient(-45deg, #80808040 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #80808040 75%), linear-gradient(-45deg, transparent 75%, #80808040 75%);
background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.demo-palette-item.not-available code {
text-decoration: line-through;
}
{
"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",
"shouldLoadCMS": true,
"shouldLoadBootstrap": true
}