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

Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Cory LaViska
2024-12-17 10:44:54 -05:00
parent 25ee6ef1ad 1e1877c954
commit b9541ba2e0
28 changed files with 81 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,7 +46,7 @@ wa-page > header {
}
wa-button[data-toggle-nav] {
--label-color: currentColor;
--text-color: currentColor;
font-size: 1rem;
margin-inline-start: -0.875rem;
margin-inline-end: 0;
@@ -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;
}

2
docs/assets/styles/theme-headers.css
View File

@@ -23,7 +23,7 @@
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
}
.project-header {

6
docs/docs/experimental/themer.md
View File

@@ -429,9 +429,9 @@ hasOutline: false
#icon-chooser-trigger {
--button-group-separator-border: none;
--label-color: var(--wa-color-neutral-on-quiet);
--label-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
--label-color-active: var(--label-color-hover);
--text-color: var(--wa-color-neutral-on-quiet);
--text-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
--text-color-active: var(--text-color-hover);
}
#icon-chooser::part(dialog) {

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.css
View File

@@ -10,7 +10,7 @@
border-radius: var(--wa-border-radius-xs);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--label-color, var(--wa-color-on-loud));
color: var(--text-color, var(--wa-color-on-loud));
white-space: nowrap;
padding: 0.375em 0.625em;
user-select: none;

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 {

6
src/components/button/button.ts
View File

@@ -47,9 +47,9 @@ import styles from './button.css';
* @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
* @cssproperty --border-color-active - The color of the button's border when active.
* @cssproperty --border-color-hover - The color of the button's border on hover.
* @cssproperty --label-color - The color of the button's label when the button is not being interacted with.
* @cssproperty --label-color-active - The color of the button's label when active.
* @cssproperty --label-color-hover - The color of the button's label on hover.
* @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
* @cssproperty --text-color-active - The color of the button's label when active.
* @cssproperty --text-color-hover - The color of the button's label on hover.
*/
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {

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);
}

6
src/components/menu-item/menu-item.css
View File

@@ -1,6 +1,6 @@
:host {
--background-color-hover: var(--wa-color-neutral-fill-normal);
--label-color-hover: var(--wa-color-neutral-on-normal);
--text-color-hover: var(--wa-color-neutral-on-normal);
--submenu-offset: -0.125rem;
display: block;
@@ -100,14 +100,14 @@
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background-color: var(--background-color-hover);
color: var(--label-color-hover);
color: var(--text-color-hover);
}
:host(:focus-visible) .menu-item {
outline: var(--wa-focus-ring);
outline-offset: calc(-1 * var(--wa-focus-ring-width));
background: var(--background-color-hover);
color: var(--label-color-hover);
color: var(--text-color-hover);
opacity: 1;
}

2
src/components/menu-item/menu-item.ts
View File

@@ -36,7 +36,7 @@ import { SubmenuController } from './submenu-controller.js';
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
*
* @cssproperty --background-color-hover - The menu item's background color on hover.
* @cssproperty --label-color-hover - The label color on hover.
* @cssproperty --text-color-hover - The label color on hover.
* @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
*/
@customElement('wa-menu-item')

8
src/components/option/option.css
View File

@@ -1,8 +1,8 @@
:host {
--background-color-current: var(--wa-color-brand-fill-loud);
--background-color-hover: var(--wa-color-neutral-fill-normal);
--label-color-current: var(--wa-color-brand-on-loud);
--label-color-hover: var(--wa-color-neutral-on-normal);
--text-color-current: var(--wa-color-brand-on-loud);
--text-color-hover: var(--wa-color-neutral-on-normal);
display: block;
color: var(--wa-color-text-normal);
@@ -27,13 +27,13 @@
.option--hover:not(.option--current):not(.option--disabled) {
background-color: var(--background-color-hover);
color: var(--label-color-hover);
color: var(--text-color-hover);
}
.option--current,
.option--current.option--disabled {
background-color: var(--background-color-current);
color: var(--label-color-current);
color: var(--text-color-current);
opacity: 1;
}

4
src/components/option/option.ts
View File

@@ -21,8 +21,8 @@ import styles from './option.css';
*
* @cssproperty --background-color-current - The current option's background color.
* @cssproperty --background-color-hover - The options's background color on hover.
* @cssproperty --label-color-current - The current option's label color.
* @cssproperty --label-color-hover - The label color on hover.
* @cssproperty --text-color-current - The current option's label color.
* @cssproperty --text-color-hover - The label color on hover.
*
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart base - The component's base wrapper.

4
src/components/progress-bar/progress-bar.css
View File

@@ -2,7 +2,7 @@
--height: 1.25rem;
--track-color: var(--wa-color-neutral-fill-normal);
--indicator-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
--text-color: var(--wa-color-brand-on-loud);
--box-shadow: none;
display: block;
@@ -21,7 +21,7 @@
height: 100%;
font: inherit;
background-color: var(--indicator-color);
color: var(--label-color);
color: var(--text-color);
text-align: center;
line-height: var(--height);
white-space: nowrap;

2
src/components/progress-bar/progress-bar.ts
View File

@@ -22,7 +22,7 @@ import styles from './progress-bar.css';
* @cssproperty --height - The progress bar's height.
* @cssproperty --track-color - The color of the track.
* @cssproperty --indicator-color - The color of the indicator.
* @cssproperty --label-color - The color of the label.
* @cssproperty --text-color - The color of the label.
* @cssproperty --box-shadow - The shadow effects around the edges of the progress bar.
*/
@customElement('wa-progress-bar')

2
src/components/radio-button/radio-button.css
View File

@@ -37,7 +37,7 @@
--background-color: var(--wa-color-brand-fill-quiet);
--background-color-hover: var(--background-color);
--border-color: var(--wa-form-control-activated-color);
--label-color: var(--wa-color-brand-on-normal);
--text-color: var(--wa-color-brand-on-normal);
--indicator-color: var(--border-color);
--indicator-width: var(--wa-border-width-s);

6
src/components/radio-button/radio-button.ts
View File

@@ -38,9 +38,9 @@ import styles from './radio-button.css';
* @cssproperty --box-shadow - The shadow effects around the edges of the button.
* @cssproperty --indicator-color - The color of the checked button indicator.
* @cssproperty --indicator-width - The width of the checked button indicator.
* @cssproperty --label-color - The color of the button's label.
* @cssproperty --label-color-active - The color of the button's label when active.
* @cssproperty --label-color-hover - The color of the button's label on hover.
* @cssproperty --text-color - The color of the button's label.
* @cssproperty --text-color-active - The color of the button's label when active.
* @cssproperty --text-color-hover - The color of the button's label on hover.
*
* @csspart base - The internal `<button>` element.
* @csspart checked - The internal button element when the radio button is checked.

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.

12
src/styles/native/button.css
View File

@@ -10,9 +10,9 @@
--border-color-active: var(--border-color);
--border-width: max(1px, var(--wa-form-control-border-width));
--label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
--label-color-hover: var(--label-color);
--label-color-active: var(--label-color);
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
--text-color-hover: var(--text-color);
--text-color-active: var(--text-color);
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-border-style);
@@ -45,20 +45,20 @@ input:is([type='button'], [type='reset'], [type='submit']),
display: inline-flex;
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
color: var(--label-color);
color: var(--text-color);
/* Interactive */
&:where(:not(:disabled, [disabled], :host([disabled]) *, .loading)) {
&:hover {
background-color: var(--background-color-hover, var(--background-color));
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
color: var(--label-color-hover, var(--label-color));
color: var(--text-color-hover, var(--text-color));
}
&:active {
background-color: var(--background-color-active, var(--background-color));
border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
color: var(--label-color-active, var(--label-color));
color: var(--text-color-active, var(--text-color));
}
}

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

@@ -462,7 +462,7 @@
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
}
wa-rating {

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) {

10
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,
@@ -365,14 +365,14 @@ wa-radio-button {
--border-color: var(--wa-form-control-resting-color);
--border-color-active: var(--background-color-active);
--border-color-hover: var(--background-color-hover);
--label-color-active: var(--label-color-hover);
--label-color-hover: var(--wa-color-brand-on-loud);
--text-color-active: var(--text-color-hover);
--text-color-hover: var(--wa-color-brand-on-loud);
--indicator-color: var(--wa-background-color);
&[checked] {
--background-color: var(--wa-form-control-activated-color);
--border-color: var(--background-color);
--label-color: var(--wa-color-brand-on-loud);
--text-color: var(--wa-color-brand-on-loud);
}
}
@@ -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);

10
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 & {
@@ -505,12 +505,12 @@
}
wa-button:not([appearance='text']) {
--border-color: var(--label-color);
--border-color: var(--text-color);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--box-shadow-color: var(--border-color);
--background-active: var(--border-color);
--label-color-active: var(--background);
--text-color-active: var(--background);
&[appearance='outlined'] {
--background: var(--wa-color-surface-default);
@@ -564,13 +564,13 @@
--background-active: var(--wa-color-neutral-on-quiet);
--border-color-active: var(--background-active);
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
--label-color-active: var(--wa-color-surface-default);
--text-color-active: var(--wa-color-surface-default);
&:active,
&[checked] {
--background: var(--wa-color-neutral-on-quiet);
--box-shadow: none;
--label-color: var(--wa-color-surface-default);
--text-color: var(--wa-color-surface-default);
transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
}
}

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

@@ -516,28 +516,28 @@
&[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);
}
}
wa-button[appearance='outline'] {
--border-color: color-mix(in oklab, var(--label-color), transparent 75%);
--border-color: color-mix(in oklab, var(--text-color), transparent 75%);
}
wa-input,
@@ -550,7 +550,7 @@
wa-radio-button:not([checked]) {
--border-color: var(--wa-color-neutral-border-normal);
--label-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
}
wa-switch {

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

@@ -566,7 +566,7 @@
--button-shadow-inner-a: var(--wa-color-primary-30);
--button-shadow-inner-b: var(--wa-color-primary-80);
--button-text-shadow: var(--wa-color-primary-40);
--label-color: var(--wa-color-primary-95);
--text-color: var(--wa-color-primary-95);
}
&[variant='success'] {
@@ -634,8 +634,8 @@
wa-button[appearance='outlined'] {
--box-shadow: none;
--border-width: var(--wa-form-control-border-width);
--label-color: var(--wa-color-neutral-on-normal);
--label-color-hover: var(--wa-color-neutral-on-loud);
--text-color: var(--wa-color-neutral-on-normal);
--text-color-hover: var(--wa-color-neutral-on-loud);
&::part(label) {
text-shadow: none;
@@ -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);
}
}
@@ -861,7 +861,7 @@
--button-shadow-inner-a: var(--wa-color-primary-30);
--button-shadow-inner-b: var(--wa-color-primary-80);
--button-text-shadow: var(--wa-color-primary-40);
--label-color: var(--wa-color-primary-95);
--text-color: var(--wa-color-primary-95);
}
&[variant='success'] {

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);
}
}

10
src/styles/utilities/appearance.css
View File

@@ -7,8 +7,8 @@
--border-color: var(--wa-color-border-loud);
--border-color-hover: var(--wa-color-border-loud);
--label-color: var(--wa-color-on-quiet);
--label-color-hover: var(--wa-color-on-quiet);
--text-color: var(--wa-color-on-quiet);
--text-color-hover: var(--wa-color-on-quiet);
}
.wa-filled,
@@ -17,7 +17,7 @@
--background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
--background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
--label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
&:is(.wa-outlined, :host([appearance~='outlined'])) {
--border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
@@ -27,7 +27,7 @@
.wa-tinted,
:host([appearance~='tinted']) {
--background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
--text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
--background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
@@ -40,7 +40,7 @@
.wa-text,
:host([appearance~='text']) {
--background-color: transparent;
--label-color: var(--wa-color-on-quiet);
--text-color: var(--wa-color-on-quiet);
--background-color-hover: var(--wa-color-fill-quiet);
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);