diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index a6227a005..d9c240604 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -18,7 +18,7 @@ export default css` width: 100%; border: none; font-family: var(--wa-font-family-body); - font-weight: var(--wa-font-weight-normal); + font-weight: var(--wa-font-weight-action); text-decoration: none; user-select: none; white-space: nowrap; diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index 684584a64..65ee92d51 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -22,7 +22,7 @@ export default css` font-size: var(--wa-font-size-m); font-weight: var(--wa-font-weight-normal); line-height: var(--wa-line-height-regular); - color: var(--wa-color-neutral-text-on-surface); + color: var(--wa-color-text-normal); padding: var(--wa-space-2xs) var(--wa-space-2xs); transition: var(--wa-transition-fast) fill; user-select: none; @@ -70,7 +70,7 @@ export default css` :host(:hover:not([aria-disabled="true"], :focus-visible)) .menu-item, .menu-item--submenu-expanded { background-color: var(--wa-color-neutral-fill-muted); - color: var(--wa-color-neutral-text-on-muted); + color: var(--wa-color-text-normal); } :host(:focus-visible) .menu-item { @@ -97,7 +97,7 @@ export default css` /* Add elevation and z-index to submenus */ wa-popup::part(popup) { - box-shadow: var(--wa-shadow-level-3); + box-shadow: var(--wa-shadow-level-2); z-index: var(--wa-z-index-dropdown); margin-left: var(--submenu-offset); } diff --git a/src/components/tab/tab.styles.ts b/src/components/tab/tab.styles.ts index 510946d3d..3dbc80cf2 100644 --- a/src/components/tab/tab.styles.ts +++ b/src/components/tab/tab.styles.ts @@ -13,7 +13,7 @@ export default css` align-items: center; font-family: var(--wa-font-family-body); font-size: var(--wa-font-size-s); - font-weight: var(--wa-font-weight-medium); + font-weight: var(--wa-font-weight-action); border-radius: var(--wa-corners-1x); color: var(--wa-color-neutral-text-on-surface); padding: var(--wa-space-m) var(--wa-space-l); diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts index 363b68aff..3bb54cdd6 100644 --- a/src/components/tooltip/tooltip.styles.ts +++ b/src/components/tooltip/tooltip.styles.ts @@ -14,7 +14,7 @@ export default css` .tooltip { --arrow-size: var(--wa-tooltip-arrow-size); - --arrow-color: var(--wa-color-neutral-fill-vivid); + --arrow-color: var(--wa-color-neutral-fill-vivid-alt); } .tooltip::part(popup) { @@ -43,7 +43,7 @@ export default css` width: max-content; max-width: var(--max-width); border-radius: var(--wa-corners-1x); - background-color: var(--wa-color-neutral-fill-vivid); + background-color: var(--wa-color-neutral-fill-vivid-alt); font-family: var(--wa-font-family-body); font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-regular); diff --git a/src/themes/default.css b/src/themes/default.css index 2f5cc3744..1cee3232e 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -74,6 +74,7 @@ --wa-color-text-normal: var(--wa-color-neutral-10); --wa-color-text-quiet: var(--wa-color-neutral-40); + --wa-color-text-inverse: var(--wa-color-white); --wa-color-text-link: var(--wa-color-brand-text-on-surface); @@ -88,6 +89,9 @@ /** * 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); --wa-color-brand-fill-muted: var(--wa-color-blue-95); @@ -96,7 +100,7 @@ --wa-color-brand-outline-vivid-alt: var(--wa-color-blue-30); --wa-color-brand-outline-muted: var(--wa-color-blue-90); --wa-color-brand-outline-muted-alt: var(--wa-color-blue-80); - --wa-color-brand-text-on-vivid: var(--wa-color-white); + --wa-color-brand-text-on-vivid: var(--wa-color-text-inverse); --wa-color-brand-text-on-muted: var(--wa-color-blue-40); --wa-color-brand-text-on-surface: var(--wa-color-blue-50); @@ -108,7 +112,7 @@ --wa-color-success-outline-vivid-alt: var(--wa-color-green-30); --wa-color-success-outline-muted: var(--wa-color-green-90); --wa-color-success-outline-muted-alt: var(--wa-color-green-80); - --wa-color-success-text-on-vivid: var(--wa-color-white); + --wa-color-success-text-on-vivid: var(--wa-color-text-inverse); --wa-color-success-text-on-muted: var(--wa-color-green-40); --wa-color-success-text-on-surface: var(--wa-color-green-50); @@ -120,7 +124,7 @@ --wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-30); --wa-color-warning-outline-muted: var(--wa-color-yellow-90); --wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80); - --wa-color-warning-text-on-vivid: var(--wa-color-white); + --wa-color-warning-text-on-vivid: var(--wa-color-text-inverse); --wa-color-warning-text-on-muted: var(--wa-color-yellow-40); --wa-color-warning-text-on-surface: var(--wa-color-yellow-50); @@ -132,7 +136,7 @@ --wa-color-danger-outline-vivid-alt: var(--wa-color-red-30); --wa-color-danger-outline-muted: var(--wa-color-red-90); --wa-color-danger-outline-muted-alt: var(--wa-color-red-80); - --wa-color-danger-text-on-vivid: var(--wa-color-white); + --wa-color-danger-text-on-vivid: var(--wa-color-text-inverse); --wa-color-danger-text-on-muted: var(--wa-color-red-40); --wa-color-danger-text-on-surface: var(--wa-color-red-50); @@ -144,7 +148,7 @@ --wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-30); --wa-color-neutral-outline-muted: var(--wa-color-neutral-90); --wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80); - --wa-color-neutral-text-on-vivid: var(--wa-color-white); + --wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse); --wa-color-neutral-text-on-muted: var(--wa-color-neutral-40); --wa-color-neutral-text-on-surface: var(--wa-color-neutral-50); @@ -162,8 +166,9 @@ --wa-font-weight-medium: 500; --wa-font-weight-heavy: 600; - --wa-font-weight-heading: var(--wa-font-weight-medium); + --wa-font-weight-heading: var(--wa-font-weight-heavy); --wa-font-weight-body: var(--wa-font-weight-normal); + --wa-font-weight-action: var(--wa-font-weight-medium); --wa-font-size-root: 16px; --wa-font-size-2xs: 0.625rem; /* 10 */ @@ -237,9 +242,9 @@ * Shadows */ --wa-shadow-level-0: none; - --wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.2); - --wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.18); - --wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.16); + --wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.08); + --wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.06); + --wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.04); /** * Z-index