diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 5dac8ec70..15e88dfc6 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -59,32 +59,27 @@ export default css` :host([variant='brand'][outline]) { --background-color-hover: var(--wa-color-brand-fill-quiet); --label-color: var(--wa-color-brand-on-quiet); - --label-color-hover: var(--wa-color-brand-on-normal); } :host([variant='success'][outline]) { --background-color-hover: var(--wa-color-success-fill-quiet); --label-color: var(--wa-color-success-on-quiet); - --label-color-hover: var(--wa-color-success-on-normal); } :host([variant='neutral'][outline]), :host(.wa-button-group__button--radio:not([checked])) { --background-color-hover: var(--wa-color-neutral-fill-quiet); --label-color: var(--wa-color-neutral-on-quiet); - --label-color-hover: var(--wa-color-neutral-on-normal); } :host([variant='warning'][outline]) { --background-color-hover: var(--wa-color-warning-fill-quiet); --label-color: var(--wa-color-warning-on-quiet); - --label-color-hover: var(--wa-color-warning-on-normal); } :host([variant='danger'][outline]) { --background-color-hover: var(--wa-color-danger-fill-quiet); --label-color: var(--wa-color-danger-on-quiet); - --label-color-hover: var(--wa-color-danger-on-normal); } :host([outline]), @@ -94,7 +89,8 @@ export default css` --border-color: color-mix(in oklab, var(--label-color), var(--wa-color-surface-default) 30%); --border-color-hover: var(--border-color); --border-color-active: var(--border-color); - --label-color-active: var(--label-color-hover); + --label-color-hover: var(--label-color); + --label-color-active: var(--label-color); } /* diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 2b0fa31a5..02a040f93 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -2,8 +2,8 @@ import { css } from 'lit'; export default css` :host { - --background-color-hover: var(--wa-color-neutral-fill-quiet); - --label-color-hover: var(--wa-color-text-normal); + --background-color-hover: var(--wa-color-neutral-fill-normal); + --label-color-hover: var(--wa-color-neutral-on-normal); --submenu-offset: -0.125rem; display: block; diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts index 8d1e4e6de..1b7b8a22d 100644 --- a/src/components/rating/rating.styles.ts +++ b/src/components/rating/rating.styles.ts @@ -3,7 +3,7 @@ import { css } from 'lit'; export default css` :host { --symbol-color: var(--wa-color-neutral-fill-normal); - --symbol-color-active: var(--wa-color-yellow-60); + --symbol-color-active: var(--wa-color-yellow-70); --symbol-size: var(--wa-font-size-l); --symbol-spacing: var(--wa-space-3xs); diff --git a/src/themes/applied.css b/src/themes/applied.css index 5ae18482a..2837d0565 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -186,9 +186,8 @@ var { font-family: var(--wa-font-family-code); font-size: 0.875em; background-color: var(--wa-color-overlay-inline); - border-radius: var(--wa-border-radius-xs); - padding-block: var(--wa-space-2xs); - padding-inline: var(--wa-space-xs); + border-radius: var(--wa-border-radius-s); + padding: 0.25em 0.5em; } code { @@ -223,7 +222,7 @@ kbd { font-family: var(--wa-font-family-code); border-radius: var(--wa-border-radius-s); color: var(--wa-color-neutral-on-normal); - padding: 0.125em 0.4em; + padding: 0.25em 0.5em; } kbd wa-icon { @@ -340,12 +339,12 @@ tbody tr { } tbody tr:hover { - background-color: color-mix(in oklab, var(--wa-color-brand-fill-quiet), transparent 50%); - border-top-color: var(--wa-color-brand-border-quiet); + background-color: color-mix(in oklab, var(--wa-color-neutral-fill-quiet), transparent 50%); + border-top-color: var(--wa-color-neutral-border-quiet); } tbody tr:hover + tr { - border-top-color: var(--wa-color-brand-border-quiet); + border-top-color: var(--wa-color-neutral-border-quiet); } th {