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

inherit font sizes/line-heights

Browse Source
This commit is contained in:
Cory LaViska
2023-09-12 15:05:53 -04:00
parent e82b076981
commit a519077112
23 changed files with 41 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cspell.json
View File

@@ -109,6 +109,7 @@
"novalidate",
"npmdir",
"Numberish",
"oklab",
"oklch",
"outdir",
"ParamagicDev",

6
docs/_includes/default.njk
View File

@@ -74,13 +74,13 @@
</header>
<div class="sidebar-buttons">
<wa-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
<wa-button outline size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
<wa-icon slot="prefix" name="github"></wa-icon> Code
</wa-button>
<wa-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
<wa-button outline size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
<wa-icon slot="prefix" name="star-fill"></wa-icon> Star
</wa-button>
<wa-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
<wa-button outline size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
<wa-icon slot="prefix" name="twitter"></wa-icon> Follow
</wa-button>
</div>

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

@@ -1095,14 +1095,26 @@ html.sidebar-open #menu-toggle {
}
.repo-button--github wa-icon {
color: var(--wa-color-black);
}
.repo-button--github:hover wa-icon {
color: var(--wa-color-white);
}
.repo-button--star wa-icon {
color: var(--wa-color-yellow-70);
}
.repo-button--star:hover wa-icon {
color: var(--wa-color-yellow-80);
}
.repo-button--twitter wa-icon {
color: var(--wa-color-blue-60);
}
.repo-button--twitter:hover wa-icon {
color: var(--wa-color-blue-70);
}

5
src/components/alert/alert.styles.ts
View File

@@ -16,10 +16,7 @@ export default css`
display: flex;
align-items: stretch;
border-radius: var(--wa-corners-1x);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-size-normal);
line-height: var(--wa-font-line-height-regular);
font: inherit;
margin: inherit;
}

3
src/components/avatar/avatar.styles.ts
View File

@@ -18,9 +18,8 @@ export default css`
width: var(--size);
height: var(--size);
background-color: var(--wa-color-neutral-fill-vivid);
font-family: var(--wa-font-family-body);
font: inherit;
font-size: calc(var(--size) * 0.5);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-color-neutral-text-on-vivid);
user-select: none;
vertical-align: middle;

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

@@ -11,9 +11,8 @@ export default css`
.breadcrumb-item {
display: inline-flex;
align-items: center;
font-family: var(--wa-font-family-body);
font: inherit;
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-medium);
color: var(--wa-color-neutral-text-on-surface);
line-height: var(--wa-line-height-regular);
white-space: nowrap;
@@ -21,10 +20,7 @@ export default css`
.breadcrumb-item__label {
display: inline-block;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
font: inherit;
text-decoration: none;
color: inherit;
background: none;

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

@@ -17,8 +17,7 @@ export default css`
justify-content: center;
width: 100%;
border: none;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-action);
font: inherit;
text-decoration: none;
user-select: none;
white-space: nowrap;

3
src/components/checkbox/checkbox.styles.ts
View File

@@ -12,8 +12,7 @@ export default css`
position: relative;
display: inline-flex;
align-items: flex-start;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font: inherit;
color: var(--wa-form-controls-text-color);
vertical-align: middle;
cursor: pointer;

4
src/components/color-picker/color-picker.styles.ts
View File

@@ -17,9 +17,7 @@ export default css`
.color-picker {
width: var(--grid-width);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font-size: var(--wa-font-size-m);
font: inherit;
color: var(--color);
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-corners-1x);

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

@@ -33,9 +33,7 @@ export default css`
}
.dropdown__panel {
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
font: inherit;
box-shadow: var(--wa-shadow-level-3);
border-radius: var(--wa-corners-1x);
pointer-events: none;

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

@@ -17,8 +17,7 @@ export default css`
justify-content: start;
position: relative;
width: 100%;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font: inherit;
vertical-align: middle;
overflow: hidden;
cursor: text;
@@ -64,9 +63,7 @@ export default css`
flex: 1 1 auto;
min-width: 0;
height: 100%;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font: inherit;
line-height: var(--wa-form-controls-value-line-height);
color: var(--wa-form-controls-text-color);
border: none;

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

@@ -18,10 +18,7 @@ export default css`
position: relative;
display: flex;
align-items: stretch;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
line-height: var(--wa-line-height-regular);
font: inherit;
color: var(--wa-color-text-normal);
padding: var(--wa-space-2xs) var(--wa-space-2xs);
transition: var(--wa-transition-fast) fill;

5
src/components/menu-label/menu-label.styles.ts
View File

@@ -10,10 +10,7 @@ export default css`
.menu-label {
display: inline-block;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-heavy);
line-height: var(--wa-line-height-regular);
font: inherit;
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-2xs) var(--wa-space-xl);
user-select: none;

5
src/components/option/option.styles.ts
View File

@@ -17,10 +17,7 @@ export default css`
position: relative;
display: flex;
align-items: center;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
line-height: var(--wa-line-height-regular);
font: inherit;
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
transition: var(--wa-transition-fast) fill;

4
src/components/progress-bar/progress-bar.styles.ts
View File

@@ -24,9 +24,7 @@ export default css`
.progress-bar__indicator {
height: 100%;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-xs);
font-weight: var(--wa-font-weight-regular);
font: inherit;
background-color: var(--indicator-color);
color: var(--label-color);
text-align: center;

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

@@ -15,9 +15,7 @@ export default css`
.radio {
display: inline-flex;
align-items: top;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
font: inherit;
color: var(--wa-form-controls-text-color);
vertical-align: middle;
cursor: pointer;

3
src/components/range/range.styles.ts
View File

@@ -148,9 +148,8 @@ export default css`
left: 0;
border-radius: var(--wa-corners-1x);
background-color: var(--wa-color-neutral-fill-vivid);
font-family: var(--wa-font-family-body);
font: inherit;
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-regular);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-vivid);
opacity: 0;

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

@@ -40,8 +40,7 @@ export default css`
position: relative;
align-items: center;
justify-content: start;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font: inherit;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
@@ -282,9 +281,7 @@ export default css`
.select__listbox {
display: block;
position: relative;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
font: inherit;
box-shadow: var(--wa-shadow-level-3);
background: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);

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

@@ -36,9 +36,7 @@ export default css`
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font-size: inherit;
font: inherit;
color: var(--wa-form-controls-text-color);
vertical-align: middle;
cursor: pointer;

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

@@ -11,9 +11,7 @@ export default css`
.tab {
display: inline-flex;
align-items: center;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-action);
font: inherit;
border-radius: var(--wa-corners-1x);
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-m) var(--wa-space-l);

9
src/components/textarea/textarea.styles.ts
View File

@@ -15,8 +15,7 @@ export default css`
align-items: center;
position: relative;
width: 100%;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font: inherit;
color: var(--wa-form-controls-text-color);
line-height: var(--wa-form-controls-value-line-height);
vertical-align: middle;
@@ -61,10 +60,8 @@ export default css`
.textarea__control {
flex: 1 1 auto;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 1.4;
font: inherit;
line-height: var(--wa-form-controls-value-line-height);
color: var(--wa-form-controls-text-color);
border: none;
background: none;

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

@@ -44,9 +44,8 @@ export default css`
max-width: var(--max-width);
border-radius: var(--wa-corners-1x);
background-color: var(--wa-color-neutral-fill-vivid-alt);
font-family: var(--wa-font-family-body);
font: inherit;
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-regular);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-vivid);
padding: var(--wa-space-2xs) var(--wa-space-xs);

4
src/components/tree-item/tree-item.styles.ts
View File

@@ -35,10 +35,8 @@ export default css`
.tree-item__expand-button,
.tree-item__checkbox,
.tree-item__label {
font-family: var(--wa-font-family-body);
font: inherit;
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-regular);
line-height: var(--wa-line-height-regular);
}
.tree-item__checkbox::part(base) {