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

touch up icon and copy button styles

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-11 21:44:30 -04:00
parent 28410618ec
commit 6144c849e3
5 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/copy-button/copy-button.styles.ts
View File

@@ -2,10 +2,12 @@ import { css } from 'lit';
export default css`
:host {
--background-color-hover: var(--wa-color-neutral-fill-quiet);
--error-color: var(--wa-color-danger-fill-loud);
--success-color: var(--wa-color-success-fill-loud);
display: inline-block;
color: var(--wa-color-text-quiet);
}
.copy-button__button {
@@ -15,13 +17,27 @@ export default css`
background: none;
border: none;
border-radius: var(--wa-border-radius-s);
font-size: inherit;
color: inherit;
font-size: inherit;
padding: var(--wa-space-xs);
cursor: pointer;
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
}
.copy-button__button:hover:not([disabled]),
.copy-button__button:focus-visible:not([disabled]) {
background-color: var(--background-color-hover);
}
.copy-button:not(.copy-button--success, .copy-button--error) .copy-button__button:hover:not([disabled]),
.copy-button:not(.copy-button--success, .copy-button--error) .copy-button__button:focus-visible:not([disabled]) {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
.copy-button:not(.copy-button--success, .copy-button--error) .copy-button__button:active:not([disabled]) {
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}
.copy-button--success .copy-button__button {
color: var(--success-color);
}

7
src/components/copy-button/copy-button.ts
View File

@@ -38,6 +38,7 @@ import type WaTooltip from '../tooltip/tooltip.js';
* @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
* @csspart tooltip__body - The tooltip's exported `body` part.
*
* @cssproperty --background-color-hover - The color of the button's background on hover.
* @cssproperty --success-color - The color to use for success feedback.
* @cssproperty --error-color - The color to use for error feedback.
*/
@@ -212,13 +213,13 @@ export default class WaCopyButton extends WebAwesomeElement {
@click=${this.handleCopy}
>
<slot part="copy-icon" name="copy-icon">
<wa-icon library="system" name="copy" variant="regular"></wa-icon>
<wa-icon library="system" name="copy" variant="regular" fixed-width></wa-icon>
</slot>
<slot part="success-icon" name="success-icon" variant="solid" hidden>
<wa-icon library="system" name="check"></wa-icon>
<wa-icon library="system" name="check" fixed-width></wa-icon>
</slot>
<slot part="error-icon" name="error-icon" variant="solid" hidden>
<wa-icon library="system" name="xmark"></wa-icon>
<wa-icon library="system" name="xmark" fixed-width></wa-icon>
</slot>
</button>
</wa-tooltip>

7
src/components/icon-button/icon-button.styles.ts
View File

@@ -2,6 +2,8 @@ import { css } from 'lit';
export default css`
:host {
--background-color-hover: var(--wa-color-neutral-fill-quiet);
display: inline-block;
color: var(--wa-color-text-quiet);
}
@@ -23,11 +25,12 @@ export default css`
.icon-button:hover:not(.icon-button--disabled),
.icon-button:focus-visible:not(.icon-button--disabled) {
color: var(--wa-color-brand-fill-loud);
background-color: var(--wa-color-neutral-fill-quiet);
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
.icon-button:active:not(.icon-button--disabled) {
color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active));
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
}
.icon-button:focus {

2
src/components/icon-button/icon-button.ts
View File

@@ -21,6 +21,8 @@ import type { CSSResultGroup } from 'lit';
* @event wa-blur - Emitted when the icon button loses focus.
* @event wa-focus - Emitted when the icon button gains focus.
*
* @cssproperty --background-color-hover - The color of the button's background on hover.
*
* @csspart base - The component's base wrapper.
*/
@customElement('wa-icon-button')

6
src/components/tooltip/tooltip.styles.ts
View File

@@ -8,9 +8,6 @@ export default css`
--padding: var(--wa-space-2xs) var(--wa-space-xs);
display: contents;
color: var(--wa-tooltip-content-color);
font-size: var(--wa-tooltip-font-size);
line-height: var(--wa-tooltip-line-height);
}
.tooltip {
@@ -45,6 +42,9 @@ export default css`
border-radius: var(--border-radius);
background: var(--background);
font: inherit;
color: var(--wa-tooltip-content-color);
font-size: var(--wa-tooltip-font-size);
line-height: var(--wa-tooltip-line-height);
text-align: start;
white-space: normal;
padding: var(--padding);