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

updated global properties and improved usage

Browse Source
This commit is contained in:
lindsaym-fa
2023-09-11 13:21:35 -04:00
parent a65db66005
commit f89ef95d65
5 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;

6
src/components/menu-item/menu-item.styles.ts
View File

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

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

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

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

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

23
src/themes/default.css
View File

@@ -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