Skip to content

Commit 85e74d1

Browse files
jounijouni
authored
refactor!: rename aura-text-color to aura-neutral (#10557)
1 parent b993306 commit 85e74d1

File tree

3 files changed

+34
-34
lines changed

3 files changed

+34
-34
lines changed

‎dev/aura.html‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -314,8 +314,8 @@
314314

315315
/* prettier-ignore */
316316
:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-side-nav, vaadin-tabs):not([theme~="accent"]) {
317-
--aura-accent-color-light: var(--aura-text-color-light);
318-
--aura-accent-color-dark: var(--aura-text-color-dark);
317+
--aura-accent-color-light: var(--aura-neutral-light);
318+
--aura-accent-color-dark: var(--aura-neutral-dark);
319319
}
320320

321321
body {
@@ -652,77 +652,77 @@ <h1>Components</h1>
652652

653653
<div class="aura-surface component wide tall">
654654
<div class="badges">
655-
<span class="aura-badge aura-accent-neutral">Neutral</span>
656655
<span class="aura-badge aura-accent-color">Accent</span>
657-
<span class="aura-badge aura-accent-green">Green</span>
658-
<span class="aura-badge aura-accent-blue">Blue</span>
659-
<span class="aura-badge aura-accent-purple">Purple</span>
656+
<span class="aura-badge aura-accent-neutral">Neutral</span>
660657
<span class="aura-badge aura-accent-red">Red</span>
661658
<span class="aura-badge aura-accent-orange">Orange</span>
662659
<span class="aura-badge aura-accent-yellow">Yellow</span>
660+
<span class="aura-badge aura-accent-green">Green</span>
661+
<span class="aura-badge aura-accent-blue">Blue</span>
662+
<span class="aura-badge aura-accent-purple">Purple</span>
663663
</div>
664664

665665
<div class="badges">
666-
<span class="aura-badge aura-badge-filled aura-accent-neutral">Neutral</span>
667666
<span class="aura-badge aura-badge-filled">Accent</span>
668-
<span class="aura-badge aura-badge-filled aura-accent-green">Green</span>
669-
<span class="aura-badge aura-badge-filled aura-accent-blue">Blue</span>
670-
<span class="aura-badge aura-badge-filled aura-accent-purple">Purple</span>
667+
<span class="aura-badge aura-badge-filled aura-accent-neutral">Neutral</span>
671668
<span class="aura-badge aura-badge-filled aura-accent-red">Red</span>
672669
<span class="aura-badge aura-badge-filled aura-accent-orange">Orange</span>
673670
<span class="aura-badge aura-badge-filled aura-accent-yellow">Yellow</span>
671+
<span class="aura-badge aura-badge-filled aura-accent-green">Green</span>
672+
<span class="aura-badge aura-badge-filled aura-accent-blue">Blue</span>
673+
<span class="aura-badge aura-badge-filled aura-accent-purple">Purple</span>
674674
</div>
675675

676676
<div class="badges">
677-
<span class="aura-badge aura-accent-neutral">
677+
<span class="aura-badge aura-accent-color">
678678
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
679679
</span>
680-
<span class="aura-badge aura-accent-color">
680+
<span class="aura-badge aura-accent-neutral">
681681
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
682682
</span>
683-
<span class="aura-badge aura-accent-green">
683+
<span class="aura-badge aura-accent-red">
684684
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
685685
</span>
686-
<span class="aura-badge aura-accent-blue">
686+
<span class="aura-badge aura-accent-orange">
687687
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
688688
</span>
689-
<span class="aura-badge aura-accent-purple">
689+
<span class="aura-badge aura-accent-yellow">
690690
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
691691
</span>
692-
<span class="aura-badge aura-accent-red">
692+
<span class="aura-badge aura-accent-green">
693693
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
694694
</span>
695-
<span class="aura-badge aura-accent-orange">
695+
<span class="aura-badge aura-accent-blue">
696696
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
697697
</span>
698-
<span class="aura-badge aura-accent-yellow">
698+
<span class="aura-badge aura-accent-purple">
699699
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
700700
</span>
701701
</div>
702702

703703
<div class="badges">
704-
<span class="aura-badge aura-badge-filled aura-accent-neutral">
704+
<span class="aura-badge aura-badge-filled">
705705
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
706706
</span>
707-
<span class="aura-badge aura-badge-filled">
707+
<span class="aura-badge aura-badge-filled aura-accent-neutral">
708708
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
709709
</span>
710-
<span class="aura-badge aura-badge-filled aura-accent-green">
710+
<span class="aura-badge aura-badge-filled aura-accent-red">
711711
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
712712
</span>
713-
<span class="aura-badge aura-badge-filled aura-accent-blue">
713+
<span class="aura-badge aura-badge-filled aura-accent-orange">
714714
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
715715
</span>
716-
<span class="aura-badge aura-badge-filled aura-accent-purple">
716+
<span class="aura-badge aura-badge-filled aura-accent-yellow">
717717
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
718718
</span>
719-
<span class="aura-badge aura-badge-filled aura-accent-red">
719+
<span class="aura-badge aura-badge-filled aura-accent-green">
720720
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
721721
</span>
722-
<span class="aura-badge aura-badge-filled aura-accent-orange">
722+
<span class="aura-badge aura-badge-filled aura-accent-blue">
723723
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
724724
</span>
725-
<span class="aura-badge aura-badge-filled aura-accent-yellow">
725+
<span class="aura-badge aura-badge-filled aura-accent-purple">
726726
<vaadin-icon src="./assets/lucide-icons/file-text.svg"></vaadin-icon>
727727
</span>
728728
</div>

‎dev/aura/colors.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@ <h3 class="heading">Accent Colors</h3>
161161
</vaadin-checkbox-group>
162162

163163
<section class="section">
164-
<span class="aura-badge aura-accent-color">Accent</span>
165164
<span class="aura-badge aura-accent-neutral">Neutral</span>
165+
<span class="aura-badge aura-accent-color">Accent</span>
166166
<span class="aura-badge aura-accent-red">Red</span>
167167
<span class="aura-badge aura-accent-orange">Orange</span>
168168
<span class="aura-badge aura-accent-yellow">Yellow</span>

‎packages/aura/src/color.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
:where(:host) {
33
--aura-contrast-level: 1;
44

5-
--aura-accent-color-light: var(--aura-text-color-light);
6-
--aura-accent-color-dark: var(--aura-text-color-dark);
5+
--aura-accent-color-light: var(--aura-neutral-light);
6+
--aura-accent-color-dark: var(--aura-neutral-dark);
77

88
--aura-accent-color-light-initial: var(--aura-accent-color-light);
99
--aura-accent-color-dark-initial: var(--aura-accent-color-dark);
@@ -71,13 +71,13 @@ vaadin-tab,
7171
.aura-accent-blue,
7272
.aura-accent-purple
7373
) {
74-
--aura-text-color-light: oklch(
74+
--aura-neutral-light: oklch(
7575
from var(--aura-background-color-light) calc(0.2 - 0.05 * var(--aura-contrast-level)) calc(c * 0.1) h
7676
);
77-
--aura-text-color-dark: oklch(
77+
--aura-neutral-dark: oklch(
7878
from var(--aura-background-color-dark) calc(0.9 + 0.1 * var(--aura-contrast-level)) calc(c * l) h
7979
);
80-
--vaadin-text-color: light-dark(var(--aura-text-color-light), var(--aura-text-color-dark));
80+
--vaadin-text-color: light-dark(var(--aura-neutral-light), var(--aura-neutral-dark));
8181
--vaadin-text-color-secondary: light-dark(
8282
oklch(
8383
from var(--aura-background-color-light) calc(l * 0.55 - 0.05 * var(--aura-contrast-level) + c / 2) calc(c * 0.6) h
@@ -172,8 +172,8 @@ vaadin-tab,
172172
}
173173

174174
:is(#id, .aura-accent-neutral) {
175-
--aura-accent-color-light: var(--aura-text-color-light);
176-
--aura-accent-color-dark: var(--aura-text-color-dark);
175+
--aura-accent-color-light: var(--aura-neutral-light);
176+
--aura-accent-color-dark: var(--aura-neutral-dark);
177177
--aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
178178
}
179179

0 commit comments

Comments
 (0)