fix: keep signal card text light
This commit is contained in:
1 parent
4e4474e14e
commit
08bf51e2fe
4 files changed
+23
-6
No files matched your search
@@ -46,6 +46,22 @@
|
|||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section id="foundations-card-text">
|
||||||
|
<h2 class="sg-sub-heading sg-text-on-dark">Card Semantic Tokens</h2>
|
||||||
|
<table class="sg-foundation-table sg-table-label">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Wert</th>
|
||||||
|
<th>Verwendung</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td>text-card-signal</td><td>font-light</td><td>Weiße Schrift auf allen farbigen Signal-Segmenten, unabhängig vom übergeordneten Card-Kontext.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="foundations-states">
|
<section id="foundations-states">
|
||||||
<h2 class="sg-sub-heading sg-text-on-dark">States</h2>
|
<h2 class="sg-sub-heading sg-text-on-dark">States</h2>
|
||||||
<table class="sg-foundation-table sg-table-label">
|
<table class="sg-foundation-table sg-table-label">
|
||||||
|
|||||||
@@ -38,6 +38,7 @@
|
|||||||
--surface-card-header-muted: var(--color-darkbrown);
|
--surface-card-header-muted: var(--color-darkbrown);
|
||||||
--divider-card-segment: var(--color-white);
|
--divider-card-segment: var(--color-white);
|
||||||
--text-card-header: var(--color-font-light);
|
--text-card-header: var(--color-font-light);
|
||||||
|
--text-card-signal: var(--color-font-light);
|
||||||
--text-card-body: var(--color-font-dark);
|
--text-card-body: var(--color-font-dark);
|
||||||
--text-card-transparent: var(--color-font-light);
|
--text-card-transparent: var(--color-font-light);
|
||||||
--layout-card-body-content-justify: flex-start;
|
--layout-card-body-content-justify: flex-start;
|
||||||
|
|||||||
@@ -136,27 +136,27 @@
|
|||||||
|
|
||||||
.sg-card-segment--signal-red {
|
.sg-card-segment--signal-red {
|
||||||
background: var(--color-signal-red);
|
background: var(--color-signal-red);
|
||||||
color: var(--text-card-header);
|
color: var(--text-card-signal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-segment--signal-green {
|
.sg-card-segment--signal-green {
|
||||||
background: var(--color-signal-green);
|
background: var(--color-signal-green);
|
||||||
color: var(--text-card-header);
|
color: var(--text-card-signal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-segment--signal-green-light {
|
.sg-card-segment--signal-green-light {
|
||||||
background: var(--color-signal-green-light);
|
background: var(--color-signal-green-light);
|
||||||
color: var(--text-card-header);
|
color: var(--text-card-signal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-segment--signal-green-red {
|
.sg-card-segment--signal-green-red {
|
||||||
background: var(--color-signal-green-red);
|
background: var(--color-signal-green-red);
|
||||||
color: var(--text-card-header);
|
color: var(--text-card-signal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-segment--signal-yellow {
|
.sg-card-segment--signal-yellow {
|
||||||
background: var(--color-signal-yellow);
|
background: var(--color-signal-yellow);
|
||||||
color: var(--text-card-header);
|
color: var(--text-card-signal);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sg-card-segment--gray {
|
.sg-card-segment--gray {
|
||||||
|
|||||||
Reference in new issue
Block a user