Color theming is implemented using CSS variables. Since Internet Explorer does not support CSS variables, components with themed styles are always displayed in standard colors there.
Color themes are defined using Sass lists. Care should be taken to use names that describe the purpose of use, such as backdrop-color (and not the CSS property like background-color).
dark-theme: (
backdrop-color: darkgray,
text-color: white,
)To apply a color theme to a component independently of context, the corresponding pseudo-class can be extended:
.myComponent {
@extend %dark-theme;
}To adjust individual properties in the corresponding color theme, the Sass mixin themed-styles can be used:
.myThemedComponent {
@include themed-styles((
background-color: backdrop-color,
color: text-color,
));
}
<!-- Default -->
<!-- Documentation only -->
<section class="doc-section">
<h2 class="doc-section-title">Farben</h2>
<div class="doc-colors">
<div class="doc-notes">
<h3>Spot</h3>
</div>
<div class="doc-colors-list">
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Primary
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #637419" data-copy-text="#637419" style="background: #637419">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_spot-primary-text</dd>
<dt>custom-property</dt>
<dd>--spot-primary-color</dd>
<dt>value</dt>
<dd>#637419</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--spot-primary-color</span><br />
<strong>#637419</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Text</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f6fcdc" data-copy-text="#f6fcdc" style="background: #f6fcdc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_spot-primary-background</dd>
<dt>custom-property</dt>
<dd>--spot-primary-background-color</dd>
<dt>value</dt>
<dd>#f6fcdc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--spot-primary-background-color</span><br />
<strong>#f6fcdc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Background</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #2d350b" data-copy-text="#2d350b" style="background: #2d350b">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_spot-primary-foreground</dd>
<dt>custom-property</dt>
<dd>--spot-primary-foreground-color</dd>
<dt>value</dt>
<dd>#2d350b</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--spot-primary-foreground-color</span><br />
<strong>#2d350b</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Foreground</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #b4d22d" data-copy-text="#b4d22d" style="background: #b4d22d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_spot-primary-accent</dd>
<dt>custom-property</dt>
<dd>--spot-primary-accent-color</dd>
<dt>value</dt>
<dd>#b4d22d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--spot-primary-accent-color</span><br />
<strong>#b4d22d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Accent</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #b4d22d" data-copy-text="#b4d22d" style="background: #b4d22d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_spot-primary-border</dd>
<dt>custom-property</dt>
<dd>--spot-primary-border-color</dd>
<dt>value</dt>
<dd>#b4d22d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--spot-primary-border-color</span><br />
<strong>#b4d22d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Border</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="doc-colors">
<div class="doc-notes">
<h3>Grayscale</h3>
</div>
<div class="doc-colors-list">
<div class="doc-colors-item">
<div class="doc-colors-item-label">
White
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-white</dd>
<dt>custom-property</dt>
<dd>--white</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--white</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Black
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#14191f" style="background: #14191f">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-black</dd>
<dt>custom-property</dt>
<dd>--black</dd>
<dt>value</dt>
<dd>#14191f</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--black</span><br />
<strong>#14191f</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Gray
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #eef0f1" data-copy-text="#eef0f1" style="background: #eef0f1">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-100</dd>
<dt>custom-property</dt>
<dd>--gray-100</dd>
<dt>value</dt>
<dd>#eef0f1</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-100</span><br />
<strong>#eef0f1</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>100</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #e3e4e6" data-copy-text="#e3e4e6" style="background: #e3e4e6">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-200</dd>
<dt>custom-property</dt>
<dd>--gray-200</dd>
<dt>value</dt>
<dd>#e3e4e6</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-200</span><br />
<strong>#e3e4e6</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>200</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #d5d7d9" data-copy-text="#d5d7d9" style="background: #d5d7d9">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-300</dd>
<dt>custom-property</dt>
<dd>--gray-300</dd>
<dt>value</dt>
<dd>#d5d7d9</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-300</span><br />
<strong>#d5d7d9</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>300</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #bcbec0" data-copy-text="#bcbec0" style="background: #bcbec0">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-400</dd>
<dt>custom-property</dt>
<dd>--gray-400</dd>
<dt>value</dt>
<dd>#bcbec0</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-400</span><br />
<strong>#bcbec0</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>400</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #9ea0a3" data-copy-text="#9ea0a3" style="background: #9ea0a3">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-500</dd>
<dt>custom-property</dt>
<dd>--gray-500</dd>
<dt>value</dt>
<dd>#9ea0a3</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-500</span><br />
<strong>#9ea0a3</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>500</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #7e8185" data-copy-text="#7e8185" style="background: #7e8185">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-600</dd>
<dt>custom-property</dt>
<dd>--gray-600</dd>
<dt>value</dt>
<dd>#7e8185</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-600</span><br />
<strong>#7e8185</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>600</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #5e6166" data-copy-text="#5e6166" style="background: #5e6166">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-700</dd>
<dt>custom-property</dt>
<dd>--gray-700</dd>
<dt>value</dt>
<dd>#5e6166</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-700</span><br />
<strong>#5e6166</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>700</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #404449" data-copy-text="#404449" style="background: #404449">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-800</dd>
<dt>custom-property</dt>
<dd>--gray-800</dd>
<dt>value</dt>
<dd>#404449</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-800</span><br />
<strong>#404449</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>800</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_grayscale-gray-900</dd>
<dt>custom-property</dt>
<dd>--gray-900</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--gray-900</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>900</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="doc-colors">
<div class="doc-notes">
<h3>Base</h3>
</div>
<div class="doc-colors-list">
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Page
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_base-page</dd>
<dt>custom-property</dt>
<dd>--page-color</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--page-color</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Backdrop
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#eef0f1" style="background: #eef0f1">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_base-backdrop</dd>
<dt>custom-property</dt>
<dd>--backdrop-color</dd>
<dt>value</dt>
<dd>#eef0f1</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--backdrop-color</span><br />
<strong>#eef0f1</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Text
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#14191f" style="background: #14191f">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_base-text</dd>
<dt>custom-property</dt>
<dd>--text-color</dd>
<dt>value</dt>
<dd>#14191f</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--text-color</span><br />
<strong>#14191f</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Text Minor
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#262b31a3" style="background: #262b31a3">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_base-text-minor</dd>
<dt>custom-property</dt>
<dd>--text-color--disabled</dd>
<dt>value</dt>
<dd>#262b31a3</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--text-color--disabled</span><br />
<strong>#262b31a3</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Glass
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#fafbfc99" style="background: #fafbfc99">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_base-glass</dd>
<dt>custom-property</dt>
<dd>--glass-color</dd>
<dt>value</dt>
<dd>#fafbfc99</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--glass-color</span><br />
<strong>#fafbfc99</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Border
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#d5d7d9" style="background: #d5d7d9">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_base-border</dd>
<dt>custom-property</dt>
<dd>--border-color</dd>
<dt>value</dt>
<dd>#d5d7d9</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--border-color</span><br />
<strong>#d5d7d9</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
</div>
</div>
<div class="doc-colors">
<div class="doc-notes">
<h3>Semantic</h3>
</div>
<div class="doc-colors-list">
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Information
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #d9eefd" data-copy-text="#d9eefd" style="background: #d9eefd">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-information-background</dd>
<dt>custom-property</dt>
<dd>--information-background-color</dd>
<dt>value</dt>
<dd>#d9eefd</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--information-background-color</span><br />
<strong>#d9eefd</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Background</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #002135" data-copy-text="#002135" style="background: #002135">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-information-foreground</dd>
<dt>custom-property</dt>
<dd>--information-foreground-color</dd>
<dt>value</dt>
<dd>#002135</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--information-foreground-color</span><br />
<strong>#002135</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Foreground</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #0085d2" data-copy-text="#0085d2" style="background: #0085d2">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-information-border</dd>
<dt>custom-property</dt>
<dd>--information-border-color</dd>
<dt>value</dt>
<dd>#0085d2</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--information-border-color</span><br />
<strong>#0085d2</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Border</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #004974" data-copy-text="#004974" style="background: #004974">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-information-text</dd>
<dt>custom-property</dt>
<dd>--information-color</dd>
<dt>value</dt>
<dd>#004974</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--information-color</span><br />
<strong>#004974</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Text</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #0085d2" data-copy-text="#0085d2" style="background: #0085d2">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-information-accent</dd>
<dt>custom-property</dt>
<dd>--information-accent-color</dd>
<dt>value</dt>
<dd>#0085d2</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--information-accent-color</span><br />
<strong>#0085d2</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Accent</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Positive
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f6fcdc" data-copy-text="#f6fcdc" style="background: #f6fcdc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-positive-background</dd>
<dt>custom-property</dt>
<dd>--positive-background-color</dd>
<dt>value</dt>
<dd>#f6fcdc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--positive-background-color</span><br />
<strong>#f6fcdc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Background</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #2d350b" data-copy-text="#2d350b" style="background: #2d350b">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-positive-foreground</dd>
<dt>custom-property</dt>
<dd>--positive-foreground-color</dd>
<dt>value</dt>
<dd>#2d350b</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--positive-foreground-color</span><br />
<strong>#2d350b</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Foreground</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #b4d22d" data-copy-text="#b4d22d" style="background: #b4d22d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-positive-border</dd>
<dt>custom-property</dt>
<dd>--positive-border-color</dd>
<dt>value</dt>
<dd>#b4d22d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--positive-border-color</span><br />
<strong>#b4d22d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Border</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #637419" data-copy-text="#637419" style="background: #637419">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-positive-text</dd>
<dt>custom-property</dt>
<dd>--positive-color</dd>
<dt>value</dt>
<dd>#637419</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--positive-color</span><br />
<strong>#637419</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Text</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #b4d22d" data-copy-text="#b4d22d" style="background: #b4d22d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-positive-accent</dd>
<dt>custom-property</dt>
<dd>--positive-accent-color</dd>
<dt>value</dt>
<dd>#b4d22d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--positive-accent-color</span><br />
<strong>#b4d22d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Accent</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Negative
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #840000" data-copy-text="#840000" style="background: #840000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-negative-text</dd>
<dt>custom-property</dt>
<dd>--negative-color</dd>
<dt>value</dt>
<dd>#840000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--negative-color</span><br />
<strong>#840000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Text</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f00000" data-copy-text="#f00000" style="background: #f00000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-negative-accent</dd>
<dt>custom-property</dt>
<dd>--negative-accent-color</dd>
<dt>value</dt>
<dd>#f00000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--negative-accent-color</span><br />
<strong>#f00000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Accent</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd9d9" data-copy-text="#ffd9d9" style="background: #ffd9d9">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-negative-background</dd>
<dt>custom-property</dt>
<dd>--negative-background-color</dd>
<dt>value</dt>
<dd>#ffd9d9</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--negative-background-color</span><br />
<strong>#ffd9d9</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Background</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #3c0000" data-copy-text="#3c0000" style="background: #3c0000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-negative-foreground</dd>
<dt>custom-property</dt>
<dd>--negative-foreground-color</dd>
<dt>value</dt>
<dd>#3c0000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--negative-foreground-color</span><br />
<strong>#3c0000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Foreground</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f00000" data-copy-text="#f00000" style="background: #f00000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-negative-border</dd>
<dt>custom-property</dt>
<dd>--negative-border-color</dd>
<dt>value</dt>
<dd>#f00000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--negative-border-color</span><br />
<strong>#f00000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Border</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Warning
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #8c6214" data-copy-text="#8c6214" style="background: #8c6214">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-warning-text</dd>
<dt>custom-property</dt>
<dd>--warning-color</dd>
<dt>value</dt>
<dd>#8c6214</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--warning-color</span><br />
<strong>#8c6214</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Text</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-warning-accent</dd>
<dt>custom-property</dt>
<dd>--warning-accent-color</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--warning-accent-color</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Accent</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fffbd9" data-copy-text="#fffbd9" style="background: #fffbd9">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-warning-background</dd>
<dt>custom-property</dt>
<dd>--warning-background-color</dd>
<dt>value</dt>
<dd>#fffbd9</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--warning-background-color</span><br />
<strong>#fffbd9</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Background</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #402709" data-copy-text="#402709" style="background: #402709">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-warning-foreground</dd>
<dt>custom-property</dt>
<dd>--warning-foreground-color</dd>
<dt>value</dt>
<dd>#402709</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--warning-foreground-color</span><br />
<strong>#402709</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Foreground</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_semantic-warning-border</dd>
<dt>custom-property</dt>
<dd>--warning-border-color</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--warning-border-color</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Border</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="doc-colors">
<div class="doc-notes">
<h3>Action</h3>
</div>
<div class="doc-colors-list">
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Default Background
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-background-default</dd>
<dt>custom-property</dt>
<dd>--action-background-color</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-background-color</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-background-hover</dd>
<dt>custom-property</dt>
<dd>--action-background-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-background-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #404449" data-copy-text="#404449" style="background: #404449">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-background-active</dd>
<dt>custom-property</dt>
<dd>--action-background-color--active</dd>
<dt>value</dt>
<dd>#404449</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-background-color--active</span><br />
<strong>#404449</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b311c" data-copy-text="#262b311c" style="background: #262b311c">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-background-disabled</dd>
<dt>custom-property</dt>
<dd>--action-background-color--disabled</dd>
<dt>value</dt>
<dd>#262b311c</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-background-color--disabled</span><br />
<strong>#262b311c</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Default Foreground
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-foreground-default</dd>
<dt>custom-property</dt>
<dd>--action-foreground-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-foreground-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fafbfc" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-foreground-active</dd>
<dt>custom-property</dt>
<dd>--action-foreground-color--active</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-foreground-color--active</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-foreground-disabled</dd>
<dt>custom-property</dt>
<dd>--action-foreground-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-foreground-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fafbfc" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-foreground-hover</dd>
<dt>custom-property</dt>
<dd>--action-foreground-color--hover</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-foreground-color--hover</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Default Border
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-border-default</dd>
<dt>custom-property</dt>
<dd>--action-border-color</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-border-color</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-border-hover</dd>
<dt>custom-property</dt>
<dd>--action-border-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-border-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #404449" data-copy-text="#404449" style="background: #404449">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-border-active</dd>
<dt>custom-property</dt>
<dd>--action-border-color--active</dd>
<dt>value</dt>
<dd>#404449</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-border-color--active</span><br />
<strong>#404449</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b314d" data-copy-text="#262b314d" style="background: #262b314d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-border-disabled</dd>
<dt>custom-property</dt>
<dd>--action-border-color--disabled</dd>
<dt>value</dt>
<dd>#262b314d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-border-color--disabled</span><br />
<strong>#262b314d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Default Text
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-text-default</dd>
<dt>custom-property</dt>
<dd>--action-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-text-hover</dd>
<dt>custom-property</dt>
<dd>--action-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-text-active</dd>
<dt>custom-property</dt>
<dd>--action-color--active</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-color--active</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-text-disabled</dd>
<dt>custom-property</dt>
<dd>--action-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Default Accent
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-accent-default</dd>
<dt>custom-property</dt>
<dd>--action-accent-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-accent-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-accent-hover</dd>
<dt>custom-property</dt>
<dd>--action-accent-color--hover</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-accent-color--hover</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffe45b" data-copy-text="#ffe45b" style="background: #ffe45b">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-accent-active</dd>
<dt>custom-property</dt>
<dd>--action-accent-color--active</dd>
<dt>value</dt>
<dd>#ffe45b</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-accent-color--active</span><br />
<strong>#ffe45b</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-default-accent-disabled</dd>
<dt>custom-property</dt>
<dd>--action-accent-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-accent-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Alternative Background
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-background-default</dd>
<dt>custom-property</dt>
<dd>--alt-action-background-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-background-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-background-hover</dd>
<dt>custom-property</dt>
<dd>--alt-action-background-color--hover</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-background-color--hover</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffe45b" data-copy-text="#ffe45b" style="background: #ffe45b">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-background-active</dd>
<dt>custom-property</dt>
<dd>--alt-action-background-color--active</dd>
<dt>value</dt>
<dd>#ffe45b</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-background-color--active</span><br />
<strong>#ffe45b</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3117" data-copy-text="#262b3117" style="background: #262b3117">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-background-disabled</dd>
<dt>custom-property</dt>
<dd>--alt-action-background-color--disabled</dd>
<dt>value</dt>
<dd>#262b3117</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-background-color--disabled</span><br />
<strong>#262b3117</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Alternative Foreground
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fafbfc" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-foreground-default</dd>
<dt>custom-property</dt>
<dd>--alt-action-foreground-color</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-foreground-color</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-foreground-hover</dd>
<dt>custom-property</dt>
<dd>--alt-action-foreground-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-foreground-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #404449" data-copy-text="#404449" style="background: #404449">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-foreground-active</dd>
<dt>custom-property</dt>
<dd>--alt-action-foreground-color--active</dd>
<dt>value</dt>
<dd>#404449</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-foreground-color--active</span><br />
<strong>#404449</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-foreground-disabled</dd>
<dt>custom-property</dt>
<dd>--alt-action-foreground-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-foreground-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Alternative Border
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-border-default</dd>
<dt>custom-property</dt>
<dd>--alt-action-border-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-border-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-border-hover</dd>
<dt>custom-property</dt>
<dd>--alt-action-border-color--hover</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-border-color--hover</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffe45b" data-copy-text="#ffe45b" style="background: #ffe45b">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-border-active</dd>
<dt>custom-property</dt>
<dd>--alt-action-border-color--active</dd>
<dt>value</dt>
<dd>#ffe45b</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-border-color--active</span><br />
<strong>#ffe45b</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b314d" data-copy-text="#262b314d" style="background: #262b314d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-border-disabled</dd>
<dt>custom-property</dt>
<dd>--alt-action-border-color--disabled</dd>
<dt>value</dt>
<dd>#262b314d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-border-color--disabled</span><br />
<strong>#262b314d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Alternative Text
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-text-default</dd>
<dt>custom-property</dt>
<dd>--alt-action-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-text-hover</dd>
<dt>custom-property</dt>
<dd>--alt-action-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-text-active</dd>
<dt>custom-property</dt>
<dd>--alt-action-color--active</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-color--active</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-text-disabled</dd>
<dt>custom-property</dt>
<dd>--alt-action-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Alternative Accent
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-accent-default</dd>
<dt>custom-property</dt>
<dd>--alt-action-accent-color</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-accent-color</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffe45b" data-copy-text="#ffe45b" style="background: #ffe45b">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-accent-active</dd>
<dt>custom-property</dt>
<dd>--alt-action-accent-color--active</dd>
<dt>value</dt>
<dd>#ffe45b</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-accent-color--active</span><br />
<strong>#ffe45b</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-accent-disabled</dd>
<dt>custom-property</dt>
<dd>--alt-action-accent-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-accent-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #ffd325" data-copy-text="#ffd325" style="background: #ffd325">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-alternative-accent-hover</dd>
<dt>custom-property</dt>
<dd>--alt-action-accent-color--hover</dd>
<dt>value</dt>
<dd>#ffd325</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--alt-action-accent-color--hover</span><br />
<strong>#ffd325</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Focus
</div>
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="#0085d2" style="background: #0085d2">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-focus</dd>
<dt>custom-property</dt>
<dd>--action-focus</dd>
<dt>value</dt>
<dd>#0085d2</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--action-focus</span><br />
<strong>#0085d2</strong>
</span>
</div>
<div class="doc-colors-item-description">
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Danger Background
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f00000" data-copy-text="#f00000" style="background: #f00000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-background-default</dd>
<dt>custom-property</dt>
<dd>--danger-background-color</dd>
<dt>value</dt>
<dd>#f00000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-background-color</span><br />
<strong>#f00000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-background-hover</dd>
<dt>custom-property</dt>
<dd>--danger-background-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-background-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #404449" data-copy-text="#404449" style="background: #404449">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-background-active</dd>
<dt>custom-property</dt>
<dd>--danger-background-color--active</dd>
<dt>value</dt>
<dd>#404449</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-background-color--active</span><br />
<strong>#404449</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b311c" data-copy-text="#262b311c" style="background: #262b311c">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-background-disabled</dd>
<dt>custom-property</dt>
<dd>--danger-background-color--disabled</dd>
<dt>value</dt>
<dd>#262b311c</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-background-color--disabled</span><br />
<strong>#262b311c</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Danger Foreground
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fafbfc" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-foreground-default</dd>
<dt>custom-property</dt>
<dd>--danger-foreground-color</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-foreground-color</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fafbfc" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-foreground-hover</dd>
<dt>custom-property</dt>
<dd>--danger-foreground-color--hover</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-foreground-color--hover</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fafbfc" data-copy-text="#fafbfc" style="background: #fafbfc">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-foreground-active</dd>
<dt>custom-property</dt>
<dd>--danger-foreground-color--active</dd>
<dt>value</dt>
<dd>#fafbfc</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-foreground-color--active</span><br />
<strong>#fafbfc</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-foreground-disabled</dd>
<dt>custom-property</dt>
<dd>--danger-foreground-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-foreground-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Danger Border
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f00000" data-copy-text="#f00000" style="background: #f00000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-border-default</dd>
<dt>custom-property</dt>
<dd>--danger-border-color</dd>
<dt>value</dt>
<dd>#f00000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-border-color</span><br />
<strong>#f00000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b31" data-copy-text="#262b31" style="background: #262b31">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-border-hover</dd>
<dt>custom-property</dt>
<dd>--danger-border-color--hover</dd>
<dt>value</dt>
<dd>#262b31</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-border-color--hover</span><br />
<strong>#262b31</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #404449" data-copy-text="#404449" style="background: #404449">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-border-active</dd>
<dt>custom-property</dt>
<dd>--danger-border-color--active</dd>
<dt>value</dt>
<dd>#404449</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-border-color--active</span><br />
<strong>#404449</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b314d" data-copy-text="#262b314d" style="background: #262b314d">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-border-disabled</dd>
<dt>custom-property</dt>
<dd>--danger-border-color--disabled</dd>
<dt>value</dt>
<dd>#262b314d</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-border-color--disabled</span><br />
<strong>#262b314d</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Danger Text
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #840000" data-copy-text="#840000" style="background: #840000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-text-default</dd>
<dt>custom-property</dt>
<dd>--danger-color</dd>
<dt>value</dt>
<dd>#840000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-color</span><br />
<strong>#840000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #840000" data-copy-text="#840000" style="background: #840000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-text-hover</dd>
<dt>custom-property</dt>
<dd>--danger-color--hover</dd>
<dt>value</dt>
<dd>#840000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-color--hover</span><br />
<strong>#840000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #840000" data-copy-text="#840000" style="background: #840000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-text-active</dd>
<dt>custom-property</dt>
<dd>--danger-color--active</dd>
<dt>value</dt>
<dd>#840000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-color--active</span><br />
<strong>#840000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-text-disabled</dd>
<dt>custom-property</dt>
<dd>--danger-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
<div class="doc-colors-item">
<div class="doc-colors-item-label">
Danger Accent
</div>
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #840000" data-copy-text="#840000" style="background: #840000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-accent-default</dd>
<dt>custom-property</dt>
<dd>--danger-accent-color</dd>
<dt>value</dt>
<dd>#840000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-accent-color</span><br />
<strong>#840000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Default</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #f00000" data-copy-text="#f00000" style="background: #f00000">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-accent-hover</dd>
<dt>custom-property</dt>
<dd>--danger-accent-color--hover</dd>
<dt>value</dt>
<dd>#f00000</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-accent-color--hover</span><br />
<strong>#f00000</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Hover</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #fd4848" data-copy-text="#fd4848" style="background: #fd4848">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-accent-active</dd>
<dt>custom-property</dt>
<dd>--danger-accent-color--active</dd>
<dt>value</dt>
<dd>#fd4848</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-accent-color--active</span><br />
<strong>#fd4848</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Active</span></div>
</div>
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: #262b3170" data-copy-text="#262b3170" style="background: #262b3170">
<dl class="doc-code">
<dt>variable</dt>
<dd>$_action-danger-accent-disabled</dd>
<dt>custom-property</dt>
<dd>--danger-accent-color--disabled</dd>
<dt>value</dt>
<dd>#262b3170</dd>
</dl>
<span class="doc-tooltip">
<span class="nowrap">--danger-accent-color--disabled</span><br />
<strong>#262b3170</strong>
</span>
</div>
<div class="doc-colors-scale-item-variant"><span>Disabled</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="doc-section">
<h2 class="doc-section-title">Farbschemen</h2>
<div class="doc-themes">
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Reguläres Farbschema</h3>
<div class="doc-themes-item-sample">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Reguläres Farbschema mit Hintergrund</h3>
<div class="doc-themes-item-sample" data-theme="backdrop">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema mit sichtbarem Hintergrund
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Dunkles Farbschema</h3>
<div class="doc-themes-item-sample" data-theme="dark">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema mit dunklem Hintergrund
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Farbschema mit Akzentfarbe</h3>
<div class="doc-themes-item-sample" data-theme="accent">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema mit dunklem Hintergrund
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Hinweis Farbschema</h3>
<div class="doc-themes-item-sample" data-theme="information">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema für Elemente mit informativer Konnotation
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Positives Farbschema</h3>
<div class="doc-themes-item-sample" data-theme="positive">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema für Elemente mit positiver Konnotation
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Warnendes Farbschema</h3>
<div class="doc-themes-item-sample" data-theme="warning">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema für Elemente mit warnender Konnotation
</div>
</section>
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">Negatives Farbschema</h3>
<div class="doc-themes-item-sample" data-theme="negative">
<header class="doc-themes-sample-header">
<span class="pictogram is-large is-accent">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
<div style="margin-top: var(--sp-small);">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</div>
<div style="margin-top: var(--sp-small);">
<a href="#" class="link"><span class="link-label">sprechender Link im Text</span></a>
</div>
<div style="margin-top: var(--sp-small);">
</div>
<div style="margin-top: var(--sp-small);">
<button class="button"><span class="button-label">Button</span></button>
<button class="button is-secondary"><span class="button-label">Button</span></button>
<button class="button is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Icon only</span></button>
<button class="button is-secondary is-icon-only"><svg class="icon is-arrow-right">
<use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Button</span></button>
<button class="button" disabled="disabled"><span class="button-label">Disabled</span></button>
</div>
<div style="margin-top: var(--sp-small);">
<p class="copy is-small">Ich bin eine Fußnote</p>
</div>
</div>
<div class="doc-description doc-themes-description">
Farbschema für Elemente mit negativer Konnotation
</div>
</section>
</div>
<section>
<!-- Default -->
<!-- Documentation only -->
{{#errorMessage}}
<div class="doc-notes is-error">
{{{.}}}
</div>
{{/errorMessage}}
{{#colors}}
<section class="doc-section">
{{#title}}<h2 class="doc-section-title">{{{.}}}</h2>{{/title}}
{{#errorMessage}}
<div class="doc-notes is-error">
{{{.}}}
</div>
{{/errorMessage}}
{{#groups}}
<div class="doc-colors">
{{#if label}}
<div class="doc-notes">
{{#label}}
<h3>{{{.}}}</h3>
{{/label}}
{{#annotations}}
<p>{{{.}}}</p>
{{/annotations}}
</div>
{{/if}}
{{#if items}}
<div class="doc-colors-list">
{{#items}}
<div class="doc-colors-item">
<div class="doc-colors-item-label">
{{{label}}}
</div>
{{#if value}}
<div class="doc-colors-item-value has-doc-tooltip" data-copy-text="{{{value}}}" style="background: {{{value}}}">
<dl class="doc-code">
{{#variable}}
<dt>variable</dt>
<dd>{{{.}}}</dd>
{{/variable}}
{{#custom-property}}
<dt>custom-property</dt>
<dd>{{{.}}}</dd>
{{/custom-property}}
{{#value}}
<dt>value</dt>
<dd>{{{.}}}</dd>
{{/value}}
</dl>
<span class="doc-tooltip">
<span class="nowrap">{{#custom-property}}{{{.}}}{{/custom-property}}</span><br/>
<strong>{{{value}}}</strong>
</span>
</div>
{{/if}}
{{#if scale}}
<div class="doc-colors-item-scale">
<div class="doc-colors-scale">
{{#scale}}
<div class="doc-colors-scale-item">
<div class="doc-colors-scale-item-value has-doc-tooltip" style="background: {{{value}}}" data-copy-text="{{{value}}}" style="background: {{{value}}}">
<dl class="doc-code">
{{#variable}}
<dt>variable</dt>
<dd>{{{.}}}</dd>
{{/variable}}
{{#custom-property}}
<dt>custom-property</dt>
<dd>{{{.}}}</dd>
{{/custom-property}}
{{#value}}
<dt>value</dt>
<dd>{{{.}}}</dd>
{{/value}}
</dl>
<span class="doc-tooltip">
<span class="nowrap">{{#custom-property}}{{{.}}}{{/custom-property}}</span><br/>
<strong>{{{value}}}</strong>
</span>
</div>
{{#variant}}
<div class="doc-colors-scale-item-variant"><span>{{{.}}}</span></div>
{{/variant}}
</div>
{{/scale}}
</div>
</div>
{{/if}}
{{#description}}
<div class="doc-colors-item-description">
{{{.}}}
</div>
{{/description}}
</div>
{{/items}}
</div>
{{/if}}
</div>
{{/groups}}
</section>
{{/colors}}
{{#themes}}
<section class="doc-section">
{{#title}}<h2 class="doc-section-title">{{{.}}}</h2>{{/title}}
<div class="doc-themes">
{{#variants}}
<section class="doc-themes-item">
<h3 class="doc-themes-item-label">{{{label}}}</h3>
<div class="doc-themes-item-sample"{{#name}} data-theme="{{.}}"{{/name}}>
<header class="doc-themes-sample-header">
{{#../samples}}{{#pictogram}}
{{render '@pictogram--large-accent' (contextData '@color' this) merge=true}}
{{/pictogram}}{{/../samples}}
{{#../samples}}{{#icon}}
<span class="doc-themes-sample-icon">
{{render '@icon' (contextData '@color' this) merge=true}}
</span>
{{/icon}}{{/../samples}}
<h3 class="heading">Ich bin eine Überschrift</h3>
</header>
{{#../samples}}
<div style="margin-top: var(--sp-small);">
{{#content}}
{{{.}}}
{{/content}}
{{#link}}
{{render '@link' (contextData '@color' this) merge=true}}
{{/link}}
{{#button}}
{{render '@button' (contextData '@color' this) merge=true}}
{{/button}}
</div>
{{/../samples}}
</div>
{{#description}}
<div class="doc-description doc-themes-description">
{{{.}}}
</div>
{{/description}}
</section>
{{/variants}}
</div>
<section>
{{/themes}}
/* Default */
{
"colors": {
"title": "Farben",
"groups": [
{
"label": "Spot",
"items": [
{
"label": "Primary",
"scale": [
{
"label": "Primary Text",
"description": "",
"variable": "$_spot-primary-text",
"custom-property": "--spot-primary-color",
"value": "#637419",
"variant": "Text"
},
{
"label": "Primary Background",
"description": "",
"variable": "$_spot-primary-background",
"custom-property": "--spot-primary-background-color",
"value": "#f6fcdc",
"variant": "Background"
},
{
"label": "Primary Foreground",
"description": "",
"variable": "$_spot-primary-foreground",
"custom-property": "--spot-primary-foreground-color",
"value": "#2d350b",
"variant": "Foreground"
},
{
"label": "Primary Accent",
"description": "",
"variable": "$_spot-primary-accent",
"custom-property": "--spot-primary-accent-color",
"value": "#b4d22d",
"variant": "Accent"
},
{
"label": "Primary Border",
"description": "",
"variable": "$_spot-primary-border",
"custom-property": "--spot-primary-border-color",
"value": "#b4d22d",
"variant": "Border"
}
]
}
]
},
{
"label": "Grayscale",
"items": [
{
"label": "White",
"description": "",
"variable": "$_grayscale-white",
"custom-property": "--white",
"value": "#fafbfc"
},
{
"label": "Black",
"description": "",
"variable": "$_grayscale-black",
"custom-property": "--black",
"value": "#14191f"
},
{
"label": "Gray",
"scale": [
{
"label": "Gray 100",
"description": "",
"variable": "$_grayscale-gray-100",
"custom-property": "--gray-100",
"value": "#eef0f1",
"variant": "100"
},
{
"label": "Gray 200",
"description": "",
"variable": "$_grayscale-gray-200",
"custom-property": "--gray-200",
"value": "#e3e4e6",
"variant": "200"
},
{
"label": "Gray 300",
"description": "",
"variable": "$_grayscale-gray-300",
"custom-property": "--gray-300",
"value": "#d5d7d9",
"variant": "300"
},
{
"label": "Gray 400",
"description": "",
"variable": "$_grayscale-gray-400",
"custom-property": "--gray-400",
"value": "#bcbec0",
"variant": "400"
},
{
"label": "Gray 500",
"description": "",
"variable": "$_grayscale-gray-500",
"custom-property": "--gray-500",
"value": "#9ea0a3",
"variant": "500"
},
{
"label": "Gray 600",
"description": "",
"variable": "$_grayscale-gray-600",
"custom-property": "--gray-600",
"value": "#7e8185",
"variant": "600"
},
{
"label": "Gray 700",
"description": "",
"variable": "$_grayscale-gray-700",
"custom-property": "--gray-700",
"value": "#5e6166",
"variant": "700"
},
{
"label": "Gray 800",
"description": "",
"variable": "$_grayscale-gray-800",
"custom-property": "--gray-800",
"value": "#404449",
"variant": "800"
},
{
"label": "Gray 900",
"description": "",
"variable": "$_grayscale-gray-900",
"custom-property": "--gray-900",
"value": "#262b31",
"variant": "900"
}
]
}
]
},
{
"label": "Base",
"items": [
{
"label": "Page",
"description": "",
"variable": "$_base-page",
"custom-property": "--page-color",
"value": "#fafbfc"
},
{
"label": "Backdrop",
"description": "",
"variable": "$_base-backdrop",
"custom-property": "--backdrop-color",
"value": "#eef0f1"
},
{
"label": "Text",
"description": "",
"variable": "$_base-text",
"custom-property": "--text-color",
"value": "#14191f"
},
{
"label": "Text Minor",
"description": "",
"variable": "$_base-text-minor",
"custom-property": "--text-color--disabled",
"value": "#262b31a3"
},
{
"label": "Glass",
"description": "",
"variable": "$_base-glass",
"custom-property": "--glass-color",
"value": "#fafbfc99"
},
{
"label": "Border",
"description": "",
"variable": "$_base-border",
"custom-property": "--border-color",
"value": "#d5d7d9"
}
]
},
{
"label": "Semantic",
"items": [
{
"label": "Information",
"scale": [
{
"label": "Information Background",
"description": "",
"variable": "$_semantic-information-background",
"custom-property": "--information-background-color",
"value": "#d9eefd",
"variant": "Background"
},
{
"label": "Information Foreground",
"description": "",
"variable": "$_semantic-information-foreground",
"custom-property": "--information-foreground-color",
"value": "#002135",
"variant": "Foreground"
},
{
"label": "Information Border",
"description": "",
"variable": "$_semantic-information-border",
"custom-property": "--information-border-color",
"value": "#0085d2",
"variant": "Border"
},
{
"label": "Information Text",
"description": "",
"variable": "$_semantic-information-text",
"custom-property": "--information-color",
"value": "#004974",
"variant": "Text"
},
{
"label": "Information Accent",
"description": "",
"variable": "$_semantic-information-accent",
"custom-property": "--information-accent-color",
"value": "#0085d2",
"variant": "Accent"
}
]
},
{
"label": "Positive",
"scale": [
{
"label": "Positive Background",
"description": "",
"variable": "$_semantic-positive-background",
"custom-property": "--positive-background-color",
"value": "#f6fcdc",
"variant": "Background"
},
{
"label": "Positive Foreground",
"description": "",
"variable": "$_semantic-positive-foreground",
"custom-property": "--positive-foreground-color",
"value": "#2d350b",
"variant": "Foreground"
},
{
"label": "Positive Border",
"description": "",
"variable": "$_semantic-positive-border",
"custom-property": "--positive-border-color",
"value": "#b4d22d",
"variant": "Border"
},
{
"label": "Positive Text",
"description": "",
"variable": "$_semantic-positive-text",
"custom-property": "--positive-color",
"value": "#637419",
"variant": "Text"
},
{
"label": "Positive Accent",
"description": "",
"variable": "$_semantic-positive-accent",
"custom-property": "--positive-accent-color",
"value": "#b4d22d",
"variant": "Accent"
}
]
},
{
"label": "Negative",
"scale": [
{
"label": "Negative Text",
"description": "",
"variable": "$_semantic-negative-text",
"custom-property": "--negative-color",
"value": "#840000",
"variant": "Text"
},
{
"label": "Negative Accent",
"description": "",
"variable": "$_semantic-negative-accent",
"custom-property": "--negative-accent-color",
"value": "#f00000",
"variant": "Accent"
},
{
"label": "Negative Background",
"description": "",
"variable": "$_semantic-negative-background",
"custom-property": "--negative-background-color",
"value": "#ffd9d9",
"variant": "Background"
},
{
"label": "Negative Foreground",
"description": "",
"variable": "$_semantic-negative-foreground",
"custom-property": "--negative-foreground-color",
"value": "#3c0000",
"variant": "Foreground"
},
{
"label": "Negative Border",
"description": "",
"variable": "$_semantic-negative-border",
"custom-property": "--negative-border-color",
"value": "#f00000",
"variant": "Border"
}
]
},
{
"label": "Warning",
"scale": [
{
"label": "Warning Text",
"description": "",
"variable": "$_semantic-warning-text",
"custom-property": "--warning-color",
"value": "#8c6214",
"variant": "Text"
},
{
"label": "Warning Accent",
"description": "",
"variable": "$_semantic-warning-accent",
"custom-property": "--warning-accent-color",
"value": "#ffd325",
"variant": "Accent"
},
{
"label": "Warning Background",
"description": "",
"variable": "$_semantic-warning-background",
"custom-property": "--warning-background-color",
"value": "#fffbd9",
"variant": "Background"
},
{
"label": "Warning Foreground",
"description": "",
"variable": "$_semantic-warning-foreground",
"custom-property": "--warning-foreground-color",
"value": "#402709",
"variant": "Foreground"
},
{
"label": "Warning Border",
"description": "",
"variable": "$_semantic-warning-border",
"custom-property": "--warning-border-color",
"value": "#ffd325",
"variant": "Border"
}
]
}
]
},
{
"label": "Action",
"items": [
{
"label": "Default Background",
"scale": [
{
"label": "Default Background Default",
"description": "",
"variable": "$_action-default-background-default",
"custom-property": "--action-background-color",
"value": "#ffd325",
"variant": "Default"
},
{
"label": "Default Background Hover",
"description": "",
"variable": "$_action-default-background-hover",
"custom-property": "--action-background-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Default Background Active",
"description": "",
"variable": "$_action-default-background-active",
"custom-property": "--action-background-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Default Background Disabled",
"description": "",
"variable": "$_action-default-background-disabled",
"custom-property": "--action-background-color--disabled",
"value": "#262b311c",
"variant": "Disabled"
}
]
},
{
"label": "Default Foreground",
"scale": [
{
"label": "Default Foreground Default",
"description": "",
"variable": "$_action-default-foreground-default",
"custom-property": "--action-foreground-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Default Foreground Active",
"description": "",
"variable": "$_action-default-foreground-active",
"custom-property": "--action-foreground-color--active",
"value": "#fafbfc",
"variant": "Active"
},
{
"label": "Default Foreground Disabled",
"description": "",
"variable": "$_action-default-foreground-disabled",
"custom-property": "--action-foreground-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
},
{
"label": "Default Foreground Hover",
"description": "",
"variable": "$_action-default-foreground-hover",
"custom-property": "--action-foreground-color--hover",
"value": "#fafbfc",
"variant": "Hover"
}
]
},
{
"label": "Default Border",
"scale": [
{
"label": "Default Border Default",
"description": "",
"variable": "$_action-default-border-default",
"custom-property": "--action-border-color",
"value": "#ffd325",
"variant": "Default"
},
{
"label": "Default Border Hover",
"description": "",
"variable": "$_action-default-border-hover",
"custom-property": "--action-border-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Default Border Active",
"description": "",
"variable": "$_action-default-border-active",
"custom-property": "--action-border-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Default Border Disabled",
"description": "",
"variable": "$_action-default-border-disabled",
"custom-property": "--action-border-color--disabled",
"value": "#262b314d",
"variant": "Disabled"
}
]
},
{
"label": "Default Text",
"scale": [
{
"label": "Default Text Default",
"description": "",
"variable": "$_action-default-text-default",
"custom-property": "--action-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Default Text Hover",
"description": "",
"variable": "$_action-default-text-hover",
"custom-property": "--action-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Default Text Active",
"description": "",
"variable": "$_action-default-text-active",
"custom-property": "--action-color--active",
"value": "#262b31",
"variant": "Active"
},
{
"label": "Default Text Disabled",
"description": "",
"variable": "$_action-default-text-disabled",
"custom-property": "--action-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Default Accent",
"scale": [
{
"label": "Default Accent Default",
"description": "",
"variable": "$_action-default-accent-default",
"custom-property": "--action-accent-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Default Accent Hover",
"description": "",
"variable": "$_action-default-accent-hover",
"custom-property": "--action-accent-color--hover",
"value": "#ffd325",
"variant": "Hover"
},
{
"label": "Default Accent Active",
"description": "",
"variable": "$_action-default-accent-active",
"custom-property": "--action-accent-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Default Accent Disabled",
"description": "",
"variable": "$_action-default-accent-disabled",
"custom-property": "--action-accent-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Background",
"scale": [
{
"label": "Alternative Background Default",
"description": "",
"variable": "$_action-alternative-background-default",
"custom-property": "--alt-action-background-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Background Hover",
"description": "",
"variable": "$_action-alternative-background-hover",
"custom-property": "--alt-action-background-color--hover",
"value": "#ffd325",
"variant": "Hover"
},
{
"label": "Alternative Background Active",
"description": "",
"variable": "$_action-alternative-background-active",
"custom-property": "--alt-action-background-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Alternative Background Disabled",
"description": "",
"variable": "$_action-alternative-background-disabled",
"custom-property": "--alt-action-background-color--disabled",
"value": "#262b3117",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Foreground",
"scale": [
{
"label": "Alternative Foreground Default",
"description": "",
"variable": "$_action-alternative-foreground-default",
"custom-property": "--alt-action-foreground-color",
"value": "#fafbfc",
"variant": "Default"
},
{
"label": "Alternative Foreground Hover",
"description": "",
"variable": "$_action-alternative-foreground-hover",
"custom-property": "--alt-action-foreground-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Alternative Foreground Active",
"description": "",
"variable": "$_action-alternative-foreground-active",
"custom-property": "--alt-action-foreground-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Alternative Foreground Disabled",
"description": "",
"variable": "$_action-alternative-foreground-disabled",
"custom-property": "--alt-action-foreground-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Border",
"scale": [
{
"label": "Alternative Border Default",
"description": "",
"variable": "$_action-alternative-border-default",
"custom-property": "--alt-action-border-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Border Hover",
"description": "",
"variable": "$_action-alternative-border-hover",
"custom-property": "--alt-action-border-color--hover",
"value": "#ffd325",
"variant": "Hover"
},
{
"label": "Alternative Border Active",
"description": "",
"variable": "$_action-alternative-border-active",
"custom-property": "--alt-action-border-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Alternative Border Disabled",
"description": "",
"variable": "$_action-alternative-border-disabled",
"custom-property": "--alt-action-border-color--disabled",
"value": "#262b314d",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Text",
"scale": [
{
"label": "Alternative Text Default",
"description": "",
"variable": "$_action-alternative-text-default",
"custom-property": "--alt-action-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Text Hover",
"description": "",
"variable": "$_action-alternative-text-hover",
"custom-property": "--alt-action-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Alternative Text Active",
"description": "",
"variable": "$_action-alternative-text-active",
"custom-property": "--alt-action-color--active",
"value": "#262b31",
"variant": "Active"
},
{
"label": "Alternative Text Disabled",
"description": "",
"variable": "$_action-alternative-text-disabled",
"custom-property": "--alt-action-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Accent",
"scale": [
{
"label": "Alternative Accent Default",
"description": "",
"variable": "$_action-alternative-accent-default",
"custom-property": "--alt-action-accent-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Accent Active",
"description": "",
"variable": "$_action-alternative-accent-active",
"custom-property": "--alt-action-accent-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Alternative Accent Disabled",
"description": "",
"variable": "$_action-alternative-accent-disabled",
"custom-property": "--alt-action-accent-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
},
{
"label": "Alternative Accent Hover",
"description": "",
"variable": "$_action-alternative-accent-hover",
"custom-property": "--alt-action-accent-color--hover",
"value": "#ffd325",
"variant": "Hover"
}
]
},
{
"label": "Focus",
"description": "",
"variable": "$_action-focus",
"custom-property": "--action-focus",
"value": "#0085d2"
},
{
"label": "Danger Background",
"scale": [
{
"label": "Danger Background Default",
"description": "",
"variable": "$_action-danger-background-default",
"custom-property": "--danger-background-color",
"value": "#f00000",
"variant": "Default"
},
{
"label": "Danger Background Hover",
"description": "",
"variable": "$_action-danger-background-hover",
"custom-property": "--danger-background-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Danger Background Active",
"description": "",
"variable": "$_action-danger-background-active",
"custom-property": "--danger-background-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Danger Background Disabled",
"description": "",
"variable": "$_action-danger-background-disabled",
"custom-property": "--danger-background-color--disabled",
"value": "#262b311c",
"variant": "Disabled"
}
]
},
{
"label": "Danger Foreground",
"scale": [
{
"label": "Danger Foreground Default",
"description": "",
"variable": "$_action-danger-foreground-default",
"custom-property": "--danger-foreground-color",
"value": "#fafbfc",
"variant": "Default"
},
{
"label": "Danger Foreground Hover",
"description": "",
"variable": "$_action-danger-foreground-hover",
"custom-property": "--danger-foreground-color--hover",
"value": "#fafbfc",
"variant": "Hover"
},
{
"label": "Danger Foreground Active",
"description": "",
"variable": "$_action-danger-foreground-active",
"custom-property": "--danger-foreground-color--active",
"value": "#fafbfc",
"variant": "Active"
},
{
"label": "Danger Foreground Disabled",
"description": "",
"variable": "$_action-danger-foreground-disabled",
"custom-property": "--danger-foreground-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Danger Border",
"scale": [
{
"label": "Danger Border Default",
"description": "",
"variable": "$_action-danger-border-default",
"custom-property": "--danger-border-color",
"value": "#f00000",
"variant": "Default"
},
{
"label": "Danger Border Hover",
"description": "",
"variable": "$_action-danger-border-hover",
"custom-property": "--danger-border-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Danger Border Active",
"description": "",
"variable": "$_action-danger-border-active",
"custom-property": "--danger-border-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Danger Border Disabled",
"description": "",
"variable": "$_action-danger-border-disabled",
"custom-property": "--danger-border-color--disabled",
"value": "#262b314d",
"variant": "Disabled"
}
]
},
{
"label": "Danger Text",
"scale": [
{
"label": "Danger Text Default",
"description": "",
"variable": "$_action-danger-text-default",
"custom-property": "--danger-color",
"value": "#840000",
"variant": "Default"
},
{
"label": "Danger Text Hover",
"description": "",
"variable": "$_action-danger-text-hover",
"custom-property": "--danger-color--hover",
"value": "#840000",
"variant": "Hover"
},
{
"label": "Danger Text Active",
"description": "",
"variable": "$_action-danger-text-active",
"custom-property": "--danger-color--active",
"value": "#840000",
"variant": "Active"
},
{
"label": "Danger Text Disabled",
"description": "",
"variable": "$_action-danger-text-disabled",
"custom-property": "--danger-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Danger Accent",
"scale": [
{
"label": "Danger Accent Default",
"description": "",
"variable": "$_action-danger-accent-default",
"custom-property": "--danger-accent-color",
"value": "#840000",
"variant": "Default"
},
{
"label": "Danger Accent Hover",
"description": "",
"variable": "$_action-danger-accent-hover",
"custom-property": "--danger-accent-color--hover",
"value": "#f00000",
"variant": "Hover"
},
{
"label": "Danger Accent Active",
"description": "",
"variable": "$_action-danger-accent-active",
"custom-property": "--danger-accent-color--active",
"value": "#fd4848",
"variant": "Active"
},
{
"label": "Danger Accent Disabled",
"description": "",
"variable": "$_action-danger-accent-disabled",
"custom-property": "--danger-accent-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
}
]
}
],
"errorMessage": null
}
}
/* Documentation only */
{
"colors": {
"title": "Farben",
"groups": [
{
"label": "Spot",
"items": [
{
"label": "Primary",
"scale": [
{
"label": "Primary Text",
"description": "",
"variable": "$_spot-primary-text",
"custom-property": "--spot-primary-color",
"value": "#637419",
"variant": "Text"
},
{
"label": "Primary Background",
"description": "",
"variable": "$_spot-primary-background",
"custom-property": "--spot-primary-background-color",
"value": "#f6fcdc",
"variant": "Background"
},
{
"label": "Primary Foreground",
"description": "",
"variable": "$_spot-primary-foreground",
"custom-property": "--spot-primary-foreground-color",
"value": "#2d350b",
"variant": "Foreground"
},
{
"label": "Primary Accent",
"description": "",
"variable": "$_spot-primary-accent",
"custom-property": "--spot-primary-accent-color",
"value": "#b4d22d",
"variant": "Accent"
},
{
"label": "Primary Border",
"description": "",
"variable": "$_spot-primary-border",
"custom-property": "--spot-primary-border-color",
"value": "#b4d22d",
"variant": "Border"
}
]
}
]
},
{
"label": "Grayscale",
"items": [
{
"label": "White",
"description": "",
"variable": "$_grayscale-white",
"custom-property": "--white",
"value": "#fafbfc"
},
{
"label": "Black",
"description": "",
"variable": "$_grayscale-black",
"custom-property": "--black",
"value": "#14191f"
},
{
"label": "Gray",
"scale": [
{
"label": "Gray 100",
"description": "",
"variable": "$_grayscale-gray-100",
"custom-property": "--gray-100",
"value": "#eef0f1",
"variant": "100"
},
{
"label": "Gray 200",
"description": "",
"variable": "$_grayscale-gray-200",
"custom-property": "--gray-200",
"value": "#e3e4e6",
"variant": "200"
},
{
"label": "Gray 300",
"description": "",
"variable": "$_grayscale-gray-300",
"custom-property": "--gray-300",
"value": "#d5d7d9",
"variant": "300"
},
{
"label": "Gray 400",
"description": "",
"variable": "$_grayscale-gray-400",
"custom-property": "--gray-400",
"value": "#bcbec0",
"variant": "400"
},
{
"label": "Gray 500",
"description": "",
"variable": "$_grayscale-gray-500",
"custom-property": "--gray-500",
"value": "#9ea0a3",
"variant": "500"
},
{
"label": "Gray 600",
"description": "",
"variable": "$_grayscale-gray-600",
"custom-property": "--gray-600",
"value": "#7e8185",
"variant": "600"
},
{
"label": "Gray 700",
"description": "",
"variable": "$_grayscale-gray-700",
"custom-property": "--gray-700",
"value": "#5e6166",
"variant": "700"
},
{
"label": "Gray 800",
"description": "",
"variable": "$_grayscale-gray-800",
"custom-property": "--gray-800",
"value": "#404449",
"variant": "800"
},
{
"label": "Gray 900",
"description": "",
"variable": "$_grayscale-gray-900",
"custom-property": "--gray-900",
"value": "#262b31",
"variant": "900"
}
]
}
]
},
{
"label": "Base",
"items": [
{
"label": "Page",
"description": "",
"variable": "$_base-page",
"custom-property": "--page-color",
"value": "#fafbfc"
},
{
"label": "Backdrop",
"description": "",
"variable": "$_base-backdrop",
"custom-property": "--backdrop-color",
"value": "#eef0f1"
},
{
"label": "Text",
"description": "",
"variable": "$_base-text",
"custom-property": "--text-color",
"value": "#14191f"
},
{
"label": "Text Minor",
"description": "",
"variable": "$_base-text-minor",
"custom-property": "--text-color--disabled",
"value": "#262b31a3"
},
{
"label": "Glass",
"description": "",
"variable": "$_base-glass",
"custom-property": "--glass-color",
"value": "#fafbfc99"
},
{
"label": "Border",
"description": "",
"variable": "$_base-border",
"custom-property": "--border-color",
"value": "#d5d7d9"
}
]
},
{
"label": "Semantic",
"items": [
{
"label": "Information",
"scale": [
{
"label": "Information Background",
"description": "",
"variable": "$_semantic-information-background",
"custom-property": "--information-background-color",
"value": "#d9eefd",
"variant": "Background"
},
{
"label": "Information Foreground",
"description": "",
"variable": "$_semantic-information-foreground",
"custom-property": "--information-foreground-color",
"value": "#002135",
"variant": "Foreground"
},
{
"label": "Information Border",
"description": "",
"variable": "$_semantic-information-border",
"custom-property": "--information-border-color",
"value": "#0085d2",
"variant": "Border"
},
{
"label": "Information Text",
"description": "",
"variable": "$_semantic-information-text",
"custom-property": "--information-color",
"value": "#004974",
"variant": "Text"
},
{
"label": "Information Accent",
"description": "",
"variable": "$_semantic-information-accent",
"custom-property": "--information-accent-color",
"value": "#0085d2",
"variant": "Accent"
}
]
},
{
"label": "Positive",
"scale": [
{
"label": "Positive Background",
"description": "",
"variable": "$_semantic-positive-background",
"custom-property": "--positive-background-color",
"value": "#f6fcdc",
"variant": "Background"
},
{
"label": "Positive Foreground",
"description": "",
"variable": "$_semantic-positive-foreground",
"custom-property": "--positive-foreground-color",
"value": "#2d350b",
"variant": "Foreground"
},
{
"label": "Positive Border",
"description": "",
"variable": "$_semantic-positive-border",
"custom-property": "--positive-border-color",
"value": "#b4d22d",
"variant": "Border"
},
{
"label": "Positive Text",
"description": "",
"variable": "$_semantic-positive-text",
"custom-property": "--positive-color",
"value": "#637419",
"variant": "Text"
},
{
"label": "Positive Accent",
"description": "",
"variable": "$_semantic-positive-accent",
"custom-property": "--positive-accent-color",
"value": "#b4d22d",
"variant": "Accent"
}
]
},
{
"label": "Negative",
"scale": [
{
"label": "Negative Text",
"description": "",
"variable": "$_semantic-negative-text",
"custom-property": "--negative-color",
"value": "#840000",
"variant": "Text"
},
{
"label": "Negative Accent",
"description": "",
"variable": "$_semantic-negative-accent",
"custom-property": "--negative-accent-color",
"value": "#f00000",
"variant": "Accent"
},
{
"label": "Negative Background",
"description": "",
"variable": "$_semantic-negative-background",
"custom-property": "--negative-background-color",
"value": "#ffd9d9",
"variant": "Background"
},
{
"label": "Negative Foreground",
"description": "",
"variable": "$_semantic-negative-foreground",
"custom-property": "--negative-foreground-color",
"value": "#3c0000",
"variant": "Foreground"
},
{
"label": "Negative Border",
"description": "",
"variable": "$_semantic-negative-border",
"custom-property": "--negative-border-color",
"value": "#f00000",
"variant": "Border"
}
]
},
{
"label": "Warning",
"scale": [
{
"label": "Warning Text",
"description": "",
"variable": "$_semantic-warning-text",
"custom-property": "--warning-color",
"value": "#8c6214",
"variant": "Text"
},
{
"label": "Warning Accent",
"description": "",
"variable": "$_semantic-warning-accent",
"custom-property": "--warning-accent-color",
"value": "#ffd325",
"variant": "Accent"
},
{
"label": "Warning Background",
"description": "",
"variable": "$_semantic-warning-background",
"custom-property": "--warning-background-color",
"value": "#fffbd9",
"variant": "Background"
},
{
"label": "Warning Foreground",
"description": "",
"variable": "$_semantic-warning-foreground",
"custom-property": "--warning-foreground-color",
"value": "#402709",
"variant": "Foreground"
},
{
"label": "Warning Border",
"description": "",
"variable": "$_semantic-warning-border",
"custom-property": "--warning-border-color",
"value": "#ffd325",
"variant": "Border"
}
]
}
]
},
{
"label": "Action",
"items": [
{
"label": "Default Background",
"scale": [
{
"label": "Default Background Default",
"description": "",
"variable": "$_action-default-background-default",
"custom-property": "--action-background-color",
"value": "#ffd325",
"variant": "Default"
},
{
"label": "Default Background Hover",
"description": "",
"variable": "$_action-default-background-hover",
"custom-property": "--action-background-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Default Background Active",
"description": "",
"variable": "$_action-default-background-active",
"custom-property": "--action-background-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Default Background Disabled",
"description": "",
"variable": "$_action-default-background-disabled",
"custom-property": "--action-background-color--disabled",
"value": "#262b311c",
"variant": "Disabled"
}
]
},
{
"label": "Default Foreground",
"scale": [
{
"label": "Default Foreground Default",
"description": "",
"variable": "$_action-default-foreground-default",
"custom-property": "--action-foreground-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Default Foreground Active",
"description": "",
"variable": "$_action-default-foreground-active",
"custom-property": "--action-foreground-color--active",
"value": "#fafbfc",
"variant": "Active"
},
{
"label": "Default Foreground Disabled",
"description": "",
"variable": "$_action-default-foreground-disabled",
"custom-property": "--action-foreground-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
},
{
"label": "Default Foreground Hover",
"description": "",
"variable": "$_action-default-foreground-hover",
"custom-property": "--action-foreground-color--hover",
"value": "#fafbfc",
"variant": "Hover"
}
]
},
{
"label": "Default Border",
"scale": [
{
"label": "Default Border Default",
"description": "",
"variable": "$_action-default-border-default",
"custom-property": "--action-border-color",
"value": "#ffd325",
"variant": "Default"
},
{
"label": "Default Border Hover",
"description": "",
"variable": "$_action-default-border-hover",
"custom-property": "--action-border-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Default Border Active",
"description": "",
"variable": "$_action-default-border-active",
"custom-property": "--action-border-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Default Border Disabled",
"description": "",
"variable": "$_action-default-border-disabled",
"custom-property": "--action-border-color--disabled",
"value": "#262b314d",
"variant": "Disabled"
}
]
},
{
"label": "Default Text",
"scale": [
{
"label": "Default Text Default",
"description": "",
"variable": "$_action-default-text-default",
"custom-property": "--action-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Default Text Hover",
"description": "",
"variable": "$_action-default-text-hover",
"custom-property": "--action-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Default Text Active",
"description": "",
"variable": "$_action-default-text-active",
"custom-property": "--action-color--active",
"value": "#262b31",
"variant": "Active"
},
{
"label": "Default Text Disabled",
"description": "",
"variable": "$_action-default-text-disabled",
"custom-property": "--action-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Default Accent",
"scale": [
{
"label": "Default Accent Default",
"description": "",
"variable": "$_action-default-accent-default",
"custom-property": "--action-accent-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Default Accent Hover",
"description": "",
"variable": "$_action-default-accent-hover",
"custom-property": "--action-accent-color--hover",
"value": "#ffd325",
"variant": "Hover"
},
{
"label": "Default Accent Active",
"description": "",
"variable": "$_action-default-accent-active",
"custom-property": "--action-accent-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Default Accent Disabled",
"description": "",
"variable": "$_action-default-accent-disabled",
"custom-property": "--action-accent-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Background",
"scale": [
{
"label": "Alternative Background Default",
"description": "",
"variable": "$_action-alternative-background-default",
"custom-property": "--alt-action-background-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Background Hover",
"description": "",
"variable": "$_action-alternative-background-hover",
"custom-property": "--alt-action-background-color--hover",
"value": "#ffd325",
"variant": "Hover"
},
{
"label": "Alternative Background Active",
"description": "",
"variable": "$_action-alternative-background-active",
"custom-property": "--alt-action-background-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Alternative Background Disabled",
"description": "",
"variable": "$_action-alternative-background-disabled",
"custom-property": "--alt-action-background-color--disabled",
"value": "#262b3117",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Foreground",
"scale": [
{
"label": "Alternative Foreground Default",
"description": "",
"variable": "$_action-alternative-foreground-default",
"custom-property": "--alt-action-foreground-color",
"value": "#fafbfc",
"variant": "Default"
},
{
"label": "Alternative Foreground Hover",
"description": "",
"variable": "$_action-alternative-foreground-hover",
"custom-property": "--alt-action-foreground-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Alternative Foreground Active",
"description": "",
"variable": "$_action-alternative-foreground-active",
"custom-property": "--alt-action-foreground-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Alternative Foreground Disabled",
"description": "",
"variable": "$_action-alternative-foreground-disabled",
"custom-property": "--alt-action-foreground-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Border",
"scale": [
{
"label": "Alternative Border Default",
"description": "",
"variable": "$_action-alternative-border-default",
"custom-property": "--alt-action-border-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Border Hover",
"description": "",
"variable": "$_action-alternative-border-hover",
"custom-property": "--alt-action-border-color--hover",
"value": "#ffd325",
"variant": "Hover"
},
{
"label": "Alternative Border Active",
"description": "",
"variable": "$_action-alternative-border-active",
"custom-property": "--alt-action-border-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Alternative Border Disabled",
"description": "",
"variable": "$_action-alternative-border-disabled",
"custom-property": "--alt-action-border-color--disabled",
"value": "#262b314d",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Text",
"scale": [
{
"label": "Alternative Text Default",
"description": "",
"variable": "$_action-alternative-text-default",
"custom-property": "--alt-action-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Text Hover",
"description": "",
"variable": "$_action-alternative-text-hover",
"custom-property": "--alt-action-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Alternative Text Active",
"description": "",
"variable": "$_action-alternative-text-active",
"custom-property": "--alt-action-color--active",
"value": "#262b31",
"variant": "Active"
},
{
"label": "Alternative Text Disabled",
"description": "",
"variable": "$_action-alternative-text-disabled",
"custom-property": "--alt-action-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Alternative Accent",
"scale": [
{
"label": "Alternative Accent Default",
"description": "",
"variable": "$_action-alternative-accent-default",
"custom-property": "--alt-action-accent-color",
"value": "#262b31",
"variant": "Default"
},
{
"label": "Alternative Accent Active",
"description": "",
"variable": "$_action-alternative-accent-active",
"custom-property": "--alt-action-accent-color--active",
"value": "#ffe45b",
"variant": "Active"
},
{
"label": "Alternative Accent Disabled",
"description": "",
"variable": "$_action-alternative-accent-disabled",
"custom-property": "--alt-action-accent-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
},
{
"label": "Alternative Accent Hover",
"description": "",
"variable": "$_action-alternative-accent-hover",
"custom-property": "--alt-action-accent-color--hover",
"value": "#ffd325",
"variant": "Hover"
}
]
},
{
"label": "Focus",
"description": "",
"variable": "$_action-focus",
"custom-property": "--action-focus",
"value": "#0085d2"
},
{
"label": "Danger Background",
"scale": [
{
"label": "Danger Background Default",
"description": "",
"variable": "$_action-danger-background-default",
"custom-property": "--danger-background-color",
"value": "#f00000",
"variant": "Default"
},
{
"label": "Danger Background Hover",
"description": "",
"variable": "$_action-danger-background-hover",
"custom-property": "--danger-background-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Danger Background Active",
"description": "",
"variable": "$_action-danger-background-active",
"custom-property": "--danger-background-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Danger Background Disabled",
"description": "",
"variable": "$_action-danger-background-disabled",
"custom-property": "--danger-background-color--disabled",
"value": "#262b311c",
"variant": "Disabled"
}
]
},
{
"label": "Danger Foreground",
"scale": [
{
"label": "Danger Foreground Default",
"description": "",
"variable": "$_action-danger-foreground-default",
"custom-property": "--danger-foreground-color",
"value": "#fafbfc",
"variant": "Default"
},
{
"label": "Danger Foreground Hover",
"description": "",
"variable": "$_action-danger-foreground-hover",
"custom-property": "--danger-foreground-color--hover",
"value": "#fafbfc",
"variant": "Hover"
},
{
"label": "Danger Foreground Active",
"description": "",
"variable": "$_action-danger-foreground-active",
"custom-property": "--danger-foreground-color--active",
"value": "#fafbfc",
"variant": "Active"
},
{
"label": "Danger Foreground Disabled",
"description": "",
"variable": "$_action-danger-foreground-disabled",
"custom-property": "--danger-foreground-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Danger Border",
"scale": [
{
"label": "Danger Border Default",
"description": "",
"variable": "$_action-danger-border-default",
"custom-property": "--danger-border-color",
"value": "#f00000",
"variant": "Default"
},
{
"label": "Danger Border Hover",
"description": "",
"variable": "$_action-danger-border-hover",
"custom-property": "--danger-border-color--hover",
"value": "#262b31",
"variant": "Hover"
},
{
"label": "Danger Border Active",
"description": "",
"variable": "$_action-danger-border-active",
"custom-property": "--danger-border-color--active",
"value": "#404449",
"variant": "Active"
},
{
"label": "Danger Border Disabled",
"description": "",
"variable": "$_action-danger-border-disabled",
"custom-property": "--danger-border-color--disabled",
"value": "#262b314d",
"variant": "Disabled"
}
]
},
{
"label": "Danger Text",
"scale": [
{
"label": "Danger Text Default",
"description": "",
"variable": "$_action-danger-text-default",
"custom-property": "--danger-color",
"value": "#840000",
"variant": "Default"
},
{
"label": "Danger Text Hover",
"description": "",
"variable": "$_action-danger-text-hover",
"custom-property": "--danger-color--hover",
"value": "#840000",
"variant": "Hover"
},
{
"label": "Danger Text Active",
"description": "",
"variable": "$_action-danger-text-active",
"custom-property": "--danger-color--active",
"value": "#840000",
"variant": "Active"
},
{
"label": "Danger Text Disabled",
"description": "",
"variable": "$_action-danger-text-disabled",
"custom-property": "--danger-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
},
{
"label": "Danger Accent",
"scale": [
{
"label": "Danger Accent Default",
"description": "",
"variable": "$_action-danger-accent-default",
"custom-property": "--danger-accent-color",
"value": "#840000",
"variant": "Default"
},
{
"label": "Danger Accent Hover",
"description": "",
"variable": "$_action-danger-accent-hover",
"custom-property": "--danger-accent-color--hover",
"value": "#f00000",
"variant": "Hover"
},
{
"label": "Danger Accent Active",
"description": "",
"variable": "$_action-danger-accent-active",
"custom-property": "--danger-accent-color--active",
"value": "#fd4848",
"variant": "Active"
},
{
"label": "Danger Accent Disabled",
"description": "",
"variable": "$_action-danger-accent-disabled",
"custom-property": "--danger-accent-color--disabled",
"value": "#262b3170",
"variant": "Disabled"
}
]
}
]
}
],
"errorMessage": null
},
"themes": {
"title": "Farbschemen",
"samples": [
{
"content": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"link": {
"label": "sprechender Link im Text",
"url": "#"
}
},
{
"pictogram": {
"id": "check-badge",
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M16 9.5L11.93 14.926C11.8641 15.0138 11.7802 15.0865 11.6838 15.139C11.5874 15.1916 11.4809 15.2229 11.3714 15.2308C11.2619 15.2386 11.152 15.2229 11.0491 15.1847C10.9462 15.1464 10.8528 15.0865 10.775 15.009L8.33301 12.566\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M10.7 1.12101C10.856 0.926077 11.0538 0.768721 11.2788 0.660587C11.5039 0.552452 11.7503 0.496307 12 0.496307C12.2497 0.496307 12.4961 0.552452 12.7211 0.660587C12.9462 0.768721 13.144 0.926077 13.3 1.12101L14.845 3.04401C15.0203 3.26205 15.2476 3.43243 15.5061 3.53939C15.7646 3.64635 16.0459 3.68646 16.324 3.65601L18.776 3.38901C19.0236 3.36262 19.2739 3.39202 19.5086 3.47505C19.7433 3.55809 19.9565 3.69264 20.1324 3.86883C20.3083 4.04503 20.4425 4.25839 20.5251 4.49324C20.6078 4.7281 20.6368 4.97848 20.61 5.22601L20.343 7.67701C20.3128 7.95518 20.3531 8.23648 20.4602 8.49497C20.5673 8.75345 20.7378 8.98079 20.956 9.15601L22.878 10.7C23.0728 10.8561 23.23 11.054 23.338 11.279C23.446 11.504 23.5021 11.7504 23.5021 12C23.5021 12.2496 23.446 12.496 23.338 12.721C23.23 12.946 23.0728 13.1439 22.878 13.3L20.956 14.845C20.7378 15.02 20.5673 15.2472 20.4602 15.5055C20.353 15.7638 20.3127 16.045 20.343 16.323L20.61 18.775C20.6371 19.0227 20.6082 19.2734 20.5255 19.5084C20.4428 19.7435 20.3084 19.957 20.1322 20.1332C19.956 20.3094 19.7425 20.4438 19.5074 20.5265C19.2723 20.6092 19.0217 20.6381 18.774 20.611L16.322 20.344C16.0438 20.314 15.7626 20.3543 15.5041 20.4615C15.2457 20.5686 15.0183 20.739 14.843 20.957L13.3 22.877C13.144 23.0719 12.9462 23.2293 12.7211 23.3374C12.4961 23.4456 12.2497 23.5017 12 23.5017C11.7503 23.5017 11.5039 23.4456 11.2788 23.3374C11.0538 23.2293 10.856 23.0719 10.7 22.877L9.15699 20.955C8.98166 20.737 8.7543 20.5666 8.49585 20.4595C8.23739 20.3523 7.95615 20.3119 7.67799 20.342L5.22599 20.609C4.97828 20.6361 4.72765 20.6072 4.49258 20.5245C4.25752 20.4418 4.04401 20.3074 3.86781 20.1312C3.69161 19.955 3.5572 19.7415 3.4745 19.5064C3.39181 19.2714 3.36293 19.0207 3.38999 18.773L3.65699 16.321C3.68725 16.043 3.64695 15.7618 3.53981 15.5035C3.43266 15.2452 3.26214 15.018 3.04399 14.843L1.12199 13.3C0.927228 13.1439 0.770026 12.946 0.662002 12.721C0.553978 12.496 0.497894 12.2496 0.497894 12C0.497894 11.7504 0.553978 11.504 0.662002 11.279C0.770026 11.054 0.927228 10.8561 1.12199 10.7L3.04399 9.15601C3.26215 8.98079 3.43266 8.75345 3.5398 8.49497C3.64693 8.23648 3.68724 7.95518 3.65699 7.67701L3.38999 5.22601C3.36315 4.97829 3.39217 4.72772 3.47493 4.4927C3.55769 4.25768 3.69209 4.04421 3.86822 3.86797C4.04436 3.69174 4.25776 3.55723 4.49273 3.47435C4.7277 3.39146 4.97827 3.3623 5.22599 3.38901L7.67799 3.65601C7.95608 3.68646 8.23736 3.64635 8.49586 3.53939C8.75435 3.43243 8.98173 3.26205 9.15699 3.04401L10.7 1.12101Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"
}
},
{
"button": [
{
"label": "Button"
},
{
"modifier": "is-secondary"
},
{
"label": "Icon only",
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
}
},
{
"is-icon-only": true,
"icon": {
"id": "arrow-right",
"weight": "bold"
},
"modifier": "is-secondary"
},
{
"label": "Disabled",
"is-disabled": true
}
]
},
{
"content": "<p class=\"copy is-small\">Ich bin eine Fußnote</p>"
}
],
"variants": [
{
"label": "Reguläres Farbschema"
},
{
"name": "backdrop",
"label": "Reguläres Farbschema mit Hintergrund",
"description": "Farbschema mit sichtbarem Hintergrund"
},
{
"name": "dark",
"label": "Dunkles Farbschema",
"description": "Farbschema mit dunklem Hintergrund"
},
{
"name": "accent",
"label": "Farbschema mit Akzentfarbe",
"description": "Farbschema mit dunklem Hintergrund"
},
{
"name": "information",
"label": "Hinweis Farbschema",
"description": "Farbschema für Elemente mit informativer Konnotation"
},
{
"name": "positive",
"label": "Positives Farbschema",
"description": "Farbschema für Elemente mit positiver Konnotation"
},
{
"name": "warning",
"label": "Warnendes Farbschema",
"description": "Farbschema für Elemente mit warnender Konnotation"
},
{
"name": "negative",
"label": "Negatives Farbschema",
"description": "Farbschema für Elemente mit negativer Konnotation"
}
]
}
}
@function get-theme-styles(
$theme: default
){
$styles: ();
@if $theme != null and map.has-key($_color-themes, $theme) {
$styles: map.get($_color-themes, $theme);
}
@return $styles;
}
@function get-themed-property(
$property: null,
$theme: default,
) {
$value: inherit;
$styles: get-theme-styles($theme);
@if map.has-key($styles, $property) {
$value: map.get($styles, $property);
} @else {
@debug 'get-themed-property: Can’t find property "#{$property}". Check that the function parameters are not swapped.'
}
@return $value;
}
@function get-theme-property(
$theme: default,
$property: null,
) {
@return get-themed-property($property, $theme);
}
@mixin apply-theme(
$theme: null
){
@if $theme != null and map.has-key($_color-themes, $theme){
$declarations: get-theme-styles($theme);
// If color is defined add clone for text color
@if map.has-key($declarations, color) {
$text-color: map.get($declarations, color);
$declarations: map.set($declarations, "text-color", $text-color);
}
// If page color is not defined but background-color is defined add clone for page color
@if not map.has-key($declarations, page-color) and map.has-key($declarations, background-color) {
$page-color: map.get($declarations, background-color);
$declarations: map.set($declarations, "page-color", $page-color);
}
// If property is color or background color use it.
@each $variable, $value in $declarations {
$staticValue: get-fallback-value($value);
--#{$variable}: #{$staticValue};
@if $variable == color or $variable == background-color {
#{$variable}: var(--#{$variable});
}
}
}
}
$_action-text-decoration-color: $_action-accent-color !default;
$_action-text-decoration-color--hover: $_action-accent-color--hover !default;
$_action-text-decoration-color--active: $_action-accent-color--active !default;
$_action-text-decoration-color--disabled: $_action-accent-color--disabled !default;
$_ACCESSIBLE-COLOR: $_MINOR-COLOR !default;
$_ACCESSIBLE-COLOR--SMALL: #6a6e72 !default;
$_accessible-color: var(--text-accessible, #{$_ACCESSIBLE-COLOR});
$_accessible-color--small: var(--text-accessible--small, #{$_ACCESSIBLE-COLOR--SMALL});
$_FIELD-BACKGROUND-COLOR: white !default;
$_field-background-color: var(--field-background-color, #{$_FIELD-BACKGROUND-COLOR}) !default;
$_FIELD-COLOR: $_TEXT-COLOR !default;
$_field-color: var(--field-color, #{$_FIELD-COLOR}) !default;
$_color-themes: (
default: (
color: $_TEXT-COLOR,
page-color: $_PAGE-COLOR,
background-color: $_PAGE-COLOR,
backdrop-color: $_BACKDROP-COLOR,
border-color: $_BORDER-COLOR,
seperator-color: $_BORDER-COLOR,
minor-color: $_MINOR-COLOR,
accessible-color: $_ACCESSIBLE-COLOR,
accessible-color--small: $_ACCESSIBLE-COLOR--SMALL,
action-color: $_ACTION-COLOR,
action-color--hover: $_ACTION-COLOR--HOVER,
action-color--active: $_ACTION-COLOR--ACTIVE,
action-color--disabled: $_ACTION-COLOR--DISABLED,
action-accent-color: $_ACTION-ACCENT-COLOR,
action-accent-color--hover: $_ACTION-ACCENT-COLOR--HOVER,
action-background-color--hover: $_ACTION-BACKGROUND-COLOR--HOVER,
action-background-color--active: $_ACTION-BACKGROUND-COLOR--ACTIVE,
action-background-color--disabled: $_ACTION-BACKGROUND-COLOR--DISABLED,
action-foreground-color--hover: $_ACTION-FOREGROUND-COLOR--HOVER,
action-foreground-color--active: $_ACTION-FOREGROUND-COLOR--ACTIVE,
action-foreground-color--disabled: $_ACTION-FOREGROUND-COLOR--DISABLED,
action-border-color--hover: $_ACTION-BORDER-COLOR--HOVER,
action-border-color--active: $_ACTION-BORDER-COLOR--ACTIVE,
action-border-color--disabled: $_ACTION-BORDER-COLOR--DISABLED,
alt-action-color: $_ALT-ACTION-COLOR,
alt-action-color--disabled: $_ALT-ACTION-COLOR--DISABLED,
alt-action-background-color: $_ALT-ACTION-BACKGROUND-COLOR,
alt-action-background-color--hover: $_ALT-ACTION-BACKGROUND-COLOR--HOVER,
alt-action-background-color--active: $_ALT-ACTION-BACKGROUND-COLOR--ACTIVE,
alt-action-background-color--disabled: $_ALT-ACTION-BACKGROUND-COLOR--DISABLED,
alt-action-foreground-color: $_ALT-ACTION-FOREGROUND-COLOR,
alt-action-foreground-color--hover: $_ALT-ACTION-FOREGROUND-COLOR--HOVER,
alt-action-foreground-color--active: $_ALT-ACTION-FOREGROUND-COLOR--ACTIVE,
alt-action-foreground-color--disabled: $_ALT-ACTION-FOREGROUND-COLOR--DISABLED,
alt-action-border-color: $_ALT-ACTION-BORDER-COLOR,
alt-action-border-color--hover: $_ALT-ACTION-BORDER-COLOR--HOVER,
alt-action-border-color--active: $_ALT-ACTION-BORDER-COLOR--ACTIVE,
alt-action-border-color--disabled: $_ALT-ACTION-BORDER-COLOR--DISABLED,
danger-color--disabled: $_DANGER-COLOR--DISABLED,
danger-background-color--disabled: $_DANGER-BACKGROUND-COLOR--DISABLED,
danger-foreground-color--disabled: $_DANGER-FOREGROUND-COLOR--DISABLED,
danger-border-color--disabled: $_DANGER-BORDER-COLOR--DISABLED,
field-background-color: $_FIELD-BACKGROUND-COLOR,
field-color: $_FIELD-COLOR,
),
backdrop: (
background-color: $_BACKDROP-COLOR,
backdrop-color: $_GRAY-200,
),
dark: (
color: $_PAGE-COLOR,
page-color: $_BLACK,
background-color: $_GRAY-900,
backdrop-color: $_GRAY-900,
border-color: $_GRAY-700,
seperator-color: $_GRAY-700,
minor-color: invert($_MINOR-COLOR),
text-color--disabled: invert($_MINOR-COLOR),
accessible-color: invert($_MINOR-COLOR),
accessible-color--small: invert($_MINOR-COLOR),
action-color: $_PAGE-COLOR,
action-color--hover: $_PAGE-COLOR,
action-color--active: $_PAGE-COLOR,
action-color--disabled: invert($_ACTION-COLOR--DISABLED),
action-accent-color: $_PAGE-COLOR,
action-accent-color--hover: $_ACTION-ACCENT-COLOR--HOVER,
action-background-color--hover: $_PAGE-COLOR,
action-background-color--active: $_GRAY-200,
action-background-color--disabled: invert($_ACTION-BACKGROUND-COLOR--DISABLED),
action-foreground-color--hover: $_TEXT-COLOR,
action-foreground-color--active: $_TEXT-COLOR,
action-foreground-color--disabled: invert($_ACTION-FOREGROUND-COLOR--DISABLED),
action-border-color--hover: $_PAGE-COLOR,
action-border-color--active: $_GRAY-200,
action-border-color--disabled: invert($_ACTION-BORDER-COLOR--DISABLED),
alt-action-color: $_PAGE-COLOR,
alt-action-color--disabled: invert($_ALT-ACTION-COLOR--DISABLED),
alt-action-background-color: $_PAGE-COLOR,
alt-action-background-color--hover: $_ALT-ACTION-BACKGROUND-COLOR--HOVER,
alt-action-background-color--active: $_ALT-ACTION-BACKGROUND-COLOR--ACTIVE,
alt-action-background-color--disabled: invert($_ALT-ACTION-BACKGROUND-COLOR--DISABLED),
alt-action-foreground-color: $_TEXT-COLOR,
alt-action-foreground-color--hover: $_ALT-ACTION-FOREGROUND-COLOR--HOVER,
alt-action-foreground-color--active: $_ALT-ACTION-FOREGROUND-COLOR--ACTIVE,
alt-action-foreground-color--disabled: invert($_ALT-ACTION-FOREGROUND-COLOR--DISABLED),
alt-action-border-color: $_PAGE-COLOR,
alt-action-border-color--hover: $_ALT-ACTION-BORDER-COLOR--HOVER,
alt-action-border-color--active: $_ALT-ACTION-BORDER-COLOR--ACTIVE,
alt-action-border-color--disabled: invert($_ALT-ACTION-BORDER-COLOR--DISABLED),
danger-color--disabled: invert($_DANGER-COLOR--DISABLED),
danger-background-color--disabled: invert($_DANGER-BACKGROUND-COLOR--DISABLED),
danger-foreground-color--disabled: invert($_DANGER-FOREGROUND-COLOR--DISABLED),
danger-border-color--disabled: invert($_DANGER-BORDER-COLOR--DISABLED),
field-background-color: $_GRAY-800,
field-color: $_PAGE-COLOR,
negative-color: #F26060,
negative-background-color: $_NEGATIVE-FOREGROUND-COLOR,
information-color: $color-default-primitives-blue-300,
information-accent-color: $color-default-primitives-blue-300,
information-background-color: $color-default-primitives-blue-800,
information-foreground-color: $color-default-primitives-blue-300,
information-border-color: $color-default-primitives-blue-300,
),
accent: (
background-color: $_SPOT-PRIMARY-ACCENT-COLOR,
backdrop-color: $_SPOT-PRIMARY-ACCENT-COLOR,
border-color: $_SPOT-PRIMARY-COLOR,
seperator-color: $_SPOT-PRIMARY-COLOR,
accent-color: $_TEXT-COLOR,
action-accent-color--hover: $_PAGE-COLOR,
action-background-color: $_ALT-ACTION-BACKGROUND-COLOR,
action-background-color--hover: $_PAGE-COLOR,
action-background-color--active: $_GRAY-200,
action-foreground-color: $_ALT-ACTION-FOREGROUND-COLOR,
action-foreground-color--hover: $_ALT-ACTION-FOREGROUND-COLOR--HOVER,
action-foreground-color--active: $_ALT-ACTION-FOREGROUND-COLOR--ACTIVE,
action-border-color: $_ALT-ACTION-BORDER-COLOR,
action-border-color--hover: $_PAGE-COLOR,
action-border-color--active: $_GRAY-200,
),
information: (
background-color: $_INFORMATION-BACKGROUND-COLOR,
backdrop-color: $_INFORMATION-BACKGROUND-COLOR,
color: $_INFORMATION-FOREGROUND-COLOR,
separator-color: $_INFORMATION-FOREGROUND-COLOR,
border-color: $_INFORMATION-BORDER-COLOR,
accent-color: $_INFORMATION-ACCENT-COLOR,
action-accent-color--hover: $_INFORMATION-ACCENT-COLOR,
action-background-color: $_ALT-ACTION-BACKGROUND-COLOR,
action-background-color--hover: $_INFORMATION-ACCENT-COLOR,
action-background-color--active: color.adjust($_INFORMATION-ACCENT-COLOR, $lightness: 7%),
action-foreground-color: $_ALT-ACTION-FOREGROUND-COLOR,
action-border-color: $_ALT-ACTION-BORDER-COLOR,
action-border-color--hover: $_INFORMATION-ACCENT-COLOR,
action-border-color--active: color.adjust($_INFORMATION-ACCENT-COLOR, $lightness: 7%),
),
positive: (
background-color: $_POSITIVE-BACKGROUND-COLOR,
backdrop-color: $_POSITIVE-BACKGROUND-COLOR,
color: $_POSITIVE-FOREGROUND-COLOR,
separator-color: $_POSITIVE-FOREGROUND-COLOR,
border-color: $_POSITIVE-BORDER-COLOR,
accent-color: $_POSITIVE-ACCENT-COLOR,
action-accent-color--hover: $_POSITIVE-ACCENT-COLOR,
action-background-color: $_ALT-ACTION-BACKGROUND-COLOR,
action-background-color--hover: $_POSITIVE-ACCENT-COLOR,
action-background-color--active: color.adjust($_SPOT-PRIMARY-COLOR, $lightness: 7%),
action-foreground-color: $_ALT-ACTION-FOREGROUND-COLOR,
action-foreground-color--hover: $_ALT-ACTION-FOREGROUND-COLOR--HOVER,
action-foreground-color--active: $_ALT-ACTION-FOREGROUND-COLOR--ACTIVE,
action-border-color: $_ALT-ACTION-BORDER-COLOR,
action-border-color--hover: $_POSITIVE-ACCENT-COLOR,
action-border-color--active: color.adjust($_SPOT-PRIMARY-COLOR, $lightness: 7%),
),
warning: (
background-color: $_WARNING-BACKGROUND-COLOR,
backdrop-color: $_WARNING-BACKGROUND-COLOR,
color: $_WARNING-FOREGROUND-COLOR,
separator-color: $_WARNING-FOREGROUND-COLOR,
border-color: $_WARNING-BORDER-COLOR,
accent-color: $_WARNING-ACCENT-COLOR,
action-accent-color--hover: $_WARNING-ACCENT-COLOR,
action-background-color: $_ALT-ACTION-BACKGROUND-COLOR,
action-background-color--hover: $_WARNING-ACCENT-COLOR,
action-background-color--active: color.adjust($_WARNING-ACCENT-COLOR, $lightness: 15%),
action-foreground-color: $_ALT-ACTION-FOREGROUND-COLOR,
action-foreground-color--hover: $_ALT-ACTION-FOREGROUND-COLOR--HOVER,
action-foreground-color--active: $_ALT-ACTION-FOREGROUND-COLOR--ACTIVE,
action-border-color: $_ALT-ACTION-BORDER-COLOR,
action-border-color--hover: $_WARNING-ACCENT-COLOR,
action-border-color--active: color.adjust($_WARNING-ACCENT-COLOR, $lightness: 15%),
),
negative: (
background-color: $_NEGATIVE-BACKGROUND-COLOR,
backdrop-color: $_NEGATIVE-BACKGROUND-COLOR,
color: $_NEGATIVE-FOREGROUND-COLOR,
separator-color: $_NEGATIVE-FOREGROUND-COLOR,
border-color: $_NEGATIVE-BORDER-COLOR,
accent-color: $_NEGATIVE-ACCENT-COLOR,
action-accent-color--hover: $_NEGATIVE-ACCENT-COLOR,
action-background-color: $_DANGER-BACKGROUND-COLOR,
action-background-color--hover: $_DANGER-BACKGROUND-COLOR--HOVER,
action-background-color--active: $_DANGER-BACKGROUND-COLOR--ACTIVE,
action-foreground-color: $_DANGER-FOREGROUND-COLOR,
action-foreground-color--hover: $_DANGER-FOREGROUND-COLOR--HOVER,
action-foreground-color--active: $_DANGER-FOREGROUND-COLOR--ACTIVE,
action-border-color: $_DANGER-BORDER-COLOR,
action-border-color--hover: $_DANGER-BORDER-COLOR--HOVER,
action-border-color--active: $_DANGER-BORDER-COLOR--ACTIVE,
),
boxed: (
background-color: $_BACKDROP-COLOR,
backdrop-color: $_GRAY-200,
),
) !default;
$_glass_background-color: rgba($_PAGE-COLOR, .6) !default;
$_glass_backdrop-filter: blur(30px) !default;
$_focus_border-width: 3px !default;
$_focus_styles: (
outline: transparent,
box-shadow: 0 0 0 $_focus_border-width $_action-focus,
) !default;
$_border-color: $_gray-300 !default;
$_border-color--translucent: rgba($_BLACK, .17) !default;
@import "_color.helpers";
@import "_color.settings";
@import "_color.styles";
:root {
--accessible-color: #{$_accessible-color};
--accessible-color--small: #{$_ACCESSIBLE-COLOR--SMALL};
--field-background-color: #{$_field-background-color};
--field-color: #{$_field-color};
}
// By name
$_white: white !default;
$_black: black !default;
$_darkgray: #3f3f3f !default;
$_gray: #8b8b8b !default;
$_lightgray: #d7d7d7 !default;
$_palegray: #f2f2f2 !default;
// By purpose
$_page-color: $_white !default;
$_page_background: null !default;
$_text-color: $_black !default;
$_text-color--inverted: $_white !default;
$_accent-color: deepskyblue !default;
$_backdrop-color: $_palegray !default;
$_backdrop-color--transparent: rgba(black, .05) !default; // Looks like $_palegray on white
//***** Semantic colors *****//
$_information-color: dodgerblue !default;
$_information-accent-color: $_information-color !default;
$_information-background-color: transparent !default;
$_warning-color: orange !default;
$_warning-accent-color: $_warning-color !default;
$_warning-background-color: transparent !default;
$_positive-color: green !default;
$_positive-accent-color: $_positive-color !default;
$_positive-background-color: transparent !default;
$_negative-color: red !default;
$_negative-accent-color: $_negative-color !default;
$_negative-background-color: transparent !default;
//***** Action colors *****//
// Text color on default page background, e.g. for links
$_action-color: $_accent-color !default;
$_action-color--hover: color.adjust($_action-color, $lightness: -7%) !default;
$_action-color--active: color.adjust($_action-color, $lightness: 7%) !default;
$_action-color--disabled: $_gray !default;
// Text decoration color on default page background, e.g. for links
$_action-text-decoration-color: $_action-color !default;
$_action-text-decoration-color--hover: $_action-color--hover !default;
$_action-text-decoration-color--active: $_action-color--active !default;
$_action-text-decoration-color--disabled: $_action-color--disabled !default;
// Background color, e.g. for buttons
$_action-background-color: $_action-color !default;
$_action-background-color--hover: color.adjust($_action-background-color, $lightness: -7%) !default;
$_action-background-color--active: color.adjust($_action-background-color, $lightness: 7%) !default;
$_action-background-color--disabled: $_action-color--disabled !default;
// Text color on background, e.g. for button labels
$_action-foreground-color: $_white !default;
$_action-foreground-color--hover: $_action-foreground-color !default;
$_action-foreground-color--active: $_action-foreground-color !default;
$_action-foreground-color--disabled: $_action-foreground-color !default;
// Border color, e.g. for secondary buttons
$_action-border-color: $_action-background-color !default;
$_action-border-color--hover: $_action-background-color--hover !default;
$_action-border-color--active: $_action-background-color--active !default;
$_action-border-color--disabled: $_action-background-color--disabled !default;
// Danger action
$_danger-color: $_negative-color !default;
$_danger-color--hover: color.adjust($_danger-color, $lightness: -7%) !default;
$_danger-color--active: color.adjust($_danger-color, $lightness: 7%) !default;
$_danger-color--disabled: $_action-color--disabled !default;
$_danger-background-color: $_negative-accent-color !default;
$_danger-background-color--hover: color.adjust($_danger-background-color, $lightness: -7%) !default;
$_danger-background-color--active: color.adjust($_danger-background-color, $lightness: 7%) !default;
$_danger-background-color--disabled: $_danger-color--disabled !default;
$_danger-foreground-color: $_white !default;
$_danger-foreground-color--hover: $_danger-foreground-color !default;
$_danger-foreground-color--active: $_danger-foreground-color !default;
$_danger-foreground-color--disabled: $_danger-foreground-color !default;
$_danger-border-color: $_danger-background-color !default;
$_danger-border-color--hover: $_danger-background-color--hover !default;
$_danger-border-color--active: $_danger-background-color--active !default;
$_danger-border-color--disabled: $_danger-background-color--disabled !default;
// Focus color (only for outlines)
$_action-focus: dodgerblue !default;
$_focus_border-width: 2px !default;
$_focus_styles: (
outline: $_focus_border-width $_action-focus solid,
outline-offset: ($_focus_border-width + 1),
box-shadow: 0 0 0 $_focus_border-width $_white,
) !default;
// Other
$_disabled-color: $_action-color--disabled !default;
$_strong-color: $_text-color !default;
$_minor-color: $_darkgray !default;
$_border-color: $_text_color !default;
$_border-color--disabled: $_action-border-color--disabled !default;
//** Theming **//
$_color-themes: (
default: (
color: $_text-color,
page-color: $_page-color,
background-color: $_page-color,
backdrop-color: $_backdrop-color,
),
dark: (
color: $_page-color,
page-color: $_text-color,
background-color: $_text-color,
backdrop-color: $_darkgray,
)
) !default;
//***** Legacy *****//
$white: $_white !default;
$black: $_black !default;
$darkgray: $_darkgray !default;
$gray: $_gray !default;
$lightgray: $_lightgray !default;
$palegray: $_palegray !default;
$_ui-color: $_action-color !default;
$_ui-color--hover: $_action-color--hover !default;
$_ui-color--active: $_action-color--active !default;
$_ui_background-color: $_action-color !default;
$_ui_background-color--hover: $_action-color--hover !default;
$_ui_background-color--active: $_action-color--active !default;
$_success-color: $_positive-color !default;
$_success-color--highlight: $_positive-accent-color !default;
$_success-background-color: $_positive-background-color!default;
$_error-color: $_negative-color !default;
$_error-color--highlight: $_negative-accent-color !default;
$_error-background-color: $_negative-background-color !default;
:root {
@if type-of($_text-color) == color {
--color: #{$_text-color};
}
@if type-of($_page-color) == color {
--background-color: #{$_page-color};
}
}
body {
color: $_text-color;
background-color: $_page-color;
@if type-of($_text-color) == color {
color: var(--color, #{$_text-color});
}
@if type-of($_page-color) == color {
background-color: var(--background-color, #{$_page-color});
}
@if global_variable_exists(_page_background){
background: $_page_background;
}
}
:disabled {
opacity: 1;
}
//***** Theming *****//
@each $name, $declarations in $_color-themes {
%#{$name}-theme,
[data-theme="#{$name}"] {
@include apply-theme($name);
}
}