<table class="color-tokens">
<tr>
<td>
<div class="gov-bg--background-white"></div>
</td>
<td>
<p>gov-bg--background-white</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-block-primary"></div>
</td>
<td>
<p>gov-bg--background-block-primary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-block-secondary"></div>
</td>
<td>
<p>gov-bg--background-block-secondary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-overlay-image"></div>
</td>
<td>
<p>gov-bg--background-overlay-image</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-overlay-page"></div>
</td>
<td>
<p>gov-bg--background-overlay-page</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-overlay-transparent"></div>
</td>
<td>
<p>gov-bg--background-overlay-transparent</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-page"></div>
</td>
<td>
<p>gov-bg--background-page</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-neutral-disabled"></div>
</td>
<td>
<p>gov-bg--background-neutral-disabled</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-neutral-primary"></div>
</td>
<td>
<p>gov-bg--background-neutral-primary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-neutral-secondary"></div>
</td>
<td>
<p>gov-bg--background-neutral-secondary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-neutral-subtle"></div>
</td>
<td>
<p>gov-bg--background-neutral-subtle</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-neutral-subtlest"></div>
</td>
<td>
<p>gov-bg--background-neutral-subtlest</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-neutral-white"></div>
</td>
<td>
<p>gov-bg--background-neutral-white</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-primary"></div>
</td>
<td>
<p>gov-bg--background-primary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-primary-subtle"></div>
</td>
<td>
<p>gov-bg--background-primary-subtle</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-primary-subtlest"></div>
</td>
<td>
<p>gov-bg--background-primary-subtlest</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-secondary"></div>
</td>
<td>
<p>gov-bg--background-secondary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-secondary-subtle"></div>
</td>
<td>
<p>gov-bg--background-secondary-subtle</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-secondary-subtlest"></div>
</td>
<td>
<p>gov-bg--background-secondary-subtlest</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-error"></div>
</td>
<td>
<p>gov-bg--background-status-error</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-error-subtle"></div>
</td>
<td>
<p>gov-bg--background-status-error-subtle</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-error-subtlest"></div>
</td>
<td>
<p>gov-bg--background-status-error-subtlest</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-success"></div>
</td>
<td>
<p>gov-bg--background-status-success</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-success-subtle"></div>
</td>
<td>
<p>gov-bg--background-status-success-subtle</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-success-subtlest"></div>
</td>
<td>
<p>gov-bg--background-status-success-subtlest</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-warning"></div>
</td>
<td>
<p>gov-bg--background-status-warning</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-warning-subtle"></div>
</td>
<td>
<p>gov-bg--background-status-warning-subtle</p>
</td>
</tr>
<tr>
<td>
<div class="gov-bg--background-status-warning-subtlest"></div>
</td>
<td>
<p>gov-bg--background-status-warning-subtlest</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-primary-color">ABC</div>
</td>
<td>
<p>gov-color--text-primary-color</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-secondary-color">ABC</div>
</td>
<td>
<p>gov-color--text-secondary-color</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-black-fixed">ABC</div>
</td>
<td>
<p>gov-color--text-black-fixed</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-disabled">ABC</div>
</td>
<td>
<p>gov-color--text-disabled</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-placeholder">ABC</div>
</td>
<td>
<p>gov-color--text-placeholder</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-primary">ABC</div>
</td>
<td>
<p>gov-color--text-primary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-secondary">ABC</div>
</td>
<td>
<p>gov-color--text-secondary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-tertiary">ABC</div>
</td>
<td>
<p>gov-color--text-tertiary</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-white">ABC</div>
</td>
<td>
<p>gov-color--text-white</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-white-fixed">ABC</div>
</td>
<td>
<p>gov-color--text-white-fixed</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-status-error">ABC</div>
</td>
<td>
<p>gov-color--text-status-error</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-status-info">ABC</div>
</td>
<td>
<p>gov-color--text-status-info</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-status-success">ABC</div>
</td>
<td>
<p>gov-color--text-status-success</p>
</td>
</tr>
<tr>
<td>
<div class="gov-color--text-status-warning">ABC</div>
</td>
<td>
<p>gov-color--text-status-warning</p>
</td>
</tr>
</table>
<table class="color-tokens">
{{#each background}}
<tr>
<td>
<div class="gov-bg--{{ this }}"></div>
</td>
<td>
<p>gov-bg--{{ this }}</p>
</td>
</tr>
{{/each}}
{{#each color}}
<tr>
<td>
<div class="gov-color--{{ this }}">ABC</div>
</td>
<td>
<p>gov-color--{{ this }}</p>
</td>
</tr>
{{/each}}
</table>
{
"background": [
"background-white",
"background-block-primary",
"background-block-secondary",
"background-overlay-image",
"background-overlay-page",
"background-overlay-transparent",
"background-page",
"background-neutral-disabled",
"background-neutral-primary",
"background-neutral-secondary",
"background-neutral-subtle",
"background-neutral-subtlest",
"background-neutral-white",
"background-primary",
"background-primary-subtle",
"background-primary-subtlest",
"background-secondary",
"background-secondary-subtle",
"background-secondary-subtlest",
"background-status-error",
"background-status-error-subtle",
"background-status-error-subtlest",
"background-status-success",
"background-status-success-subtle",
"background-status-success-subtlest",
"background-status-warning",
"background-status-warning-subtle",
"background-status-warning-subtlest"
],
"color": [
"text-primary-color",
"text-secondary-color",
"text-black-fixed",
"text-disabled",
"text-placeholder",
"text-primary",
"text-secondary",
"text-tertiary",
"text-white",
"text-white-fixed",
"text-status-error",
"text-status-info",
"text-status-success",
"text-status-warning"
]
}
.color-tokens {
td > div {
display: flex;
align-items: center;
justify-content: center;
width: 6rem;
height: 4rem;
margin-right: var(--spacing-s);
border-radius: var(--corner-radius-xs);
border: 1px solid var(--border-subtlest);
}
}
No notes defined.