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

improved color mixing for hover and active states

Browse Source
This commit is contained in:
lindsaym-fa
2023-09-11 16:54:20 -04:00
parent 1f04cd2a50
commit 94ad43e130
8 changed files with 45 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -175,7 +175,7 @@ a {
}
a:hover {
color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
}
abbr[title] {
@@ -310,7 +310,7 @@ svg.wordmark {
.anchor-heading a::after {
content: '#';
color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
margin-inline: 0.5rem;
opacity: 0;
transition: 100ms opacity;
@@ -492,11 +492,11 @@ pre .token.italic {
}
.copy-code-button::part(button):hover {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 4%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
}
.copy-code-button::part(button):active {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 8%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
pre .copy-code-button {

2
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -41,7 +41,7 @@ export default css`
}
:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-tint-hover));
}
:host(:not(:last-of-type)) .breadcrumb-item__label:active {

64
src/components/button/button.styles.ts
View File

@@ -99,11 +99,11 @@ export default css`
}
.button--standard.button--brand:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--brand:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
}
/* Success */
@@ -113,11 +113,11 @@ export default css`
}
.button--standard.button--success:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--success:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
}
/* Neutral */
@@ -127,11 +127,11 @@ export default css`
}
.button--standard.button--neutral:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--neutral:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
/* Warning */
@@ -140,11 +140,11 @@ export default css`
color: var(--wa-color-warning-text-on-vivid);
}
.button--standard.button--warning:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--warning:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
}
/* Danger */
@@ -154,11 +154,11 @@ export default css`
}
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--danger:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
}
/*
@@ -178,14 +178,14 @@ export default css`
.button--outline.button--brand:hover:not(.button--disabled),
.button--outline.button--brand.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-brand-text-on-vivid);
}
.button--outline.button--brand:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
}
/* Success */
@@ -196,14 +196,14 @@ export default css`
.button--outline.button--success:hover:not(.button--disabled),
.button--outline.button--success.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-success-text-on-vivid);
}
.button--outline.button--success:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
}
.button--outline.button--small {
@@ -226,14 +226,14 @@ export default css`
.button--outline.button--neutral:hover:not(.button--disabled),
.button--outline.button--neutral.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-neutral-text-on-vivid);
}
.button--outline.button--neutral:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
/* Warning */
@@ -244,14 +244,14 @@ export default css`
.button--outline.button--warning:hover:not(.button--disabled),
.button--outline.button--warning.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-warning-text-on-vivid);
}
.button--outline.button--warning:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
}
/* Danger */
@@ -262,14 +262,14 @@ export default css`
.button--outline.button--danger:hover:not(.button--disabled),
.button--outline.button--danger.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-danger-text-on-vivid);
}
.button--outline.button--danger:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
}
@media (forced-colors: active) {
@@ -289,7 +289,7 @@ export default css`
}
.button--text:hover:not(.button--disabled) {
color: color-mix(in oklch, var(--wa-color-text-link), white 6%);
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-tint-hover));
}
.button--text:focus-visible:not(.button--disabled),
@@ -368,7 +368,7 @@ export default css`
.button--loading wa-spinner {
--indicator-color: currentColor;
--track-color: color-mix(in oklch, currentColor, transparent 90%);
--track-color: color-mix(in oklab, currentColor, transparent 90%);
position: absolute;
font-size: 1em;
height: 1em;

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

@@ -26,11 +26,11 @@ export default css`
.icon-button:hover:not(.icon-button--disabled),
.icon-button:focus-visible:not(.icon-button--disabled) {
color: var(--wa-color-brand-text-on-surface);
color: var(--wa-color-brand-fill-vivid);
}
.icon-button:active:not(.icon-button--disabled) {
color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
}
.icon-button:focus {

2
src/components/input/input.styles.ts
View File

@@ -239,7 +239,7 @@ export default css`
.input__clear:active,
.input__password-toggle:active {
color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
.input__clear:focus,

2
src/components/select/select.styles.ts
View File

@@ -261,7 +261,7 @@ export default css`
}
.select__clear:active {
color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
/* Expand icon */

2
src/components/skeleton/skeleton.styles.ts
View File

@@ -7,7 +7,7 @@ export default css`
:host {
--border-radius: var(--wa-corners-pill);
--color: var(--wa-color-neutral-fill-muted);
--sheen-color: color-mix(in oklch, var(--wa-color-neutral-fill-muted), white 50%);
--sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), white 50%);
display: block;
position: relative;

4
src/themes/default.css
View File

@@ -86,11 +86,13 @@
--wa-color-tint-white: rgb(255 255 255 / 0.2);
--wa-color-tint-black: rgb(0 0 0 / 0.2);
--wa-color-tint-hover: black 8%;
--wa-color-tint-active: black 16%;
/**
* Semantic color variants
*/
/* TODO: Add comments for semantic color tokens and usage expectations */
/* TODO: Add tokens for hover and active tints */
/* CONSIDER: Change -alt naming to -tint or -shade? */
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);