js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

--content-color ➡️ --text-color

Browse Source 
Harmonize with other properties for the same thing
This commit is contained in:
Lea Verou
2024-12-17 10:41:51 -05:00
parent 47c9f43954
commit 1e1877c954
13 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/styles/docs.css
View File

@@ -77,7 +77,7 @@ wa-page > header {
}
#version-number + wa-badge {
--background-color: var(--wa-color-warning-fill-quiet);
--content-color: var(--wa-color-warning-on-quiet);
--text-color: var(--wa-color-warning-on-quiet);
font-size: var(--wa-font-size-2xs);
text-transform: uppercase;
}

4
src/components/avatar/avatar.css
View File

@@ -1,6 +1,6 @@
:host {
--background-color: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
--size: 3rem;
display: inline-flex;
@@ -12,7 +12,7 @@
background-color: var(--background-color);
font: inherit;
font-size: calc(var(--size) * 0.4);
color: var(--content-color);
color: var(--text-color);
user-select: none;
-webkit-user-select: none;
vertical-align: middle;

2
src/components/avatar/avatar.ts
View File

@@ -25,7 +25,7 @@ import styles from './avatar.css';
* @csspart image - The avatar image. Only shown when the `image` attribute is set.
*
* @cssproperty --background-color - The avatar's background color.
* @cssproperty --content-color - The color of the avatar's content.
* @cssproperty --text-color - The color of the avatar's content.
* @cssproperty --size - The size of the avatar.
*/
@customElement('wa-avatar')

2
src/components/badge/badge.ts
View File

@@ -20,7 +20,7 @@ import styles from './badge.css';
* @cssproperty --border-radius - The radius of the badge's corners.
* @cssproperty --border-style - The style of the badge's border.
* @cssproperty --border-width - The width of the badge's border.
* @cssproperty --content-color - The color of the badge's content.
* @cssproperty --text-color - The color of the badge's content.
*/
@customElement('wa-badge')
export default class WaBadge extends WebAwesomeElement {

4
src/components/callout/callout.css
View File

@@ -4,7 +4,7 @@
--spacing: var(--wa-space-m);
--background-color: var(--wa-color-fill-quiet);
--border-color: var(--wa-color-border-quiet);
--content-color: var(--wa-color-on-normal);
--text-color: var(--wa-color-on-normal);
position: relative;
display: flex;
@@ -14,7 +14,7 @@
border-color: var(--border-color);
border-style: var(--wa-panel-border-style);
border-width: var(--wa-panel-border-width);
color: var(--content-color);
color: var(--text-color);
padding: var(--spacing);
}

4
src/components/tag/tag.css
View File

@@ -28,11 +28,11 @@
}
:host(:hover) > wa-icon-button {
color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover));
color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-hover));
}
:host(:active) > wa-icon-button {
color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active));
color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-active));
}
/*

2
src/components/tooltip/tooltip.ts
View File

@@ -35,7 +35,7 @@ import styles from './tooltip.css';
*
* @cssproperty --background-color - The tooltip's background color.
* @cssproperty --border-radius - The radius of the tooltip's corners.
* @cssproperty --content-color - The color of the tooltip's content.
* @cssproperty --text-color - The color of the tooltip's content.
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
* @cssproperty --padding - The padding within the tooltip.
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.

4
src/styles/themes/brutalist.css
View File

@@ -500,7 +500,7 @@
wa-alert {
--border-width: 0 0 0 var(--wa-panel-border-width);
--content-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
--padding: var(--wa-space-s) var(--wa-space-m);
&::part(icon) {
@@ -545,7 +545,7 @@
wa-badge {
--border-color: var(--wa-color-surface-border);
--content-color: var(--wa-color-base-10);
--text-color: var(--wa-color-base-10);
text-transform: uppercase;
&::part(base) {

4
src/styles/themes/classic.css
View File

@@ -341,7 +341,7 @@
*/
wa-avatar {
--background-color: var(--wa-color-neutral-fill-loud);
--content-color: var(--wa-color-neutral-on-loud);
--text-color: var(--wa-color-neutral-on-loud);
}
wa-button,
@@ -384,7 +384,7 @@ wa-breadcrumb {
wa-callout {
--background-color: var(--wa-color-surface-raised);
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
--content-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
--spacing: var(--wa-space-l);
font-size: var(--wa-font-size-s);

2
src/styles/themes/fa.css
View File

@@ -471,7 +471,7 @@
}
wa-alert {
--content-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
--icon-color: var(--border-color);
.wa-theme-fa-dark & {

10
src/styles/themes/migration.css
View File

@@ -516,23 +516,23 @@
&[variant='brand'] {
--background: var(--wa-color-brand-fill-normal);
--content-color: var(--wa-color-brand-on-normal);
--text-color: var(--wa-color-brand-on-normal);
}
&[variant='success'] {
--background: var(--wa-color-success-fill-normal);
--content-color: var(--wa-color-success-on-normal);
--text-color: var(--wa-color-success-on-normal);
}
&[variant='warning'] {
--background: var(--wa-color-warning-fill-normal);
--content-color: var(--wa-color-warning-on-normal);
--text-color: var(--wa-color-warning-on-normal);
}
&[variant='danger'] {
--background: var(--wa-color-danger-fill-normal);
--content-color: var(--wa-color-danger-on-normal);
--text-color: var(--wa-color-danger-on-normal);
}
&[variant='neutral'] {
--background: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
}
}

10
src/styles/themes/playful.css
View File

@@ -688,23 +688,23 @@
&[variant='brand'] {
--background: var(--wa-color-primary-80);
--content-color: var(--wa-color-primary-20);
--text-color: var(--wa-color-primary-20);
}
&[variant='success'] {
--background: var(--wa-color-green-80);
--content-color: var(--wa-color-green-20);
--text-color: var(--wa-color-green-20);
}
&[variant='warning'] {
--background: var(--wa-color-yellow-80);
--content-color: var(--wa-color-yellow-20);
--text-color: var(--wa-color-yellow-20);
}
&[variant='danger'] {
--background: var(--wa-color-red-80);
--content-color: var(--wa-color-red-20);
--text-color: var(--wa-color-red-20);
}
&[variant='neutral'] {
--background: white;
--content-color: var(--wa-color-base-30);
--text-color: var(--wa-color-base-30);
}
}

10
src/styles/themes/premium.css
View File

@@ -525,23 +525,23 @@
wa-badge {
&[variant='brand'] {
--background: var(--wa-color-primary-80);
--content-color: var(--wa-color-primary-20);
--text-color: var(--wa-color-primary-20);
}
&[variant='success'] {
--background: var(--wa-color-green-80);
--content-color: var(--wa-color-green-20);
--text-color: var(--wa-color-green-20);
}
&[variant='warning'] {
--background: var(--wa-color-yellow-80);
--content-color: var(--wa-color-yellow-20);
--text-color: var(--wa-color-yellow-20);
}
&[variant='danger'] {
--background: var(--wa-color-red-80);
--content-color: var(--wa-color-red-20);
--text-color: var(--wa-color-red-20);
}
&[variant='neutral'] {
--background: white;
--content-color: var(--wa-color-base-30);
--text-color: var(--wa-color-base-30);
}
}