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

improve typescale

Browse Source
This commit is contained in:
lindsaym-fa
2023-12-08 17:53:33 -05:00
parent 3f604fcee1
commit f53a643cf3
9 changed files with 74 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/pages/tokens/typography.md
View File

@@ -23,16 +23,18 @@ The default font stack is designed to be simple and highly available on as many
Font sizes use `rem` units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
| --------------------- | --------------- | ----------------------------------------------------------- |
| `--wa-font-size-root` | 16px | <span style="font-size: var(--wa-font-size-root)">Aa</span> |
| `--wa-font-size-2xs` | 0.625rem (10px) | <span style="font-size: var(--wa-font-size-2xs)">Aa</span> |
| `--wa-font-size-xs` | 0.75rem (12px) | <span style="font-size: var(--wa-font-size-xs)">Aa</span> |
| `--wa-font-size-s` | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">Aa</span> |
| `--wa-font-size-m` | 1rem (16px) | <span style="font-size: var(--wa-font-size-m)">Aa</span> |
| `--wa-font-size-l` | 1.375rem (22px) | <span style="font-size: var(--wa-font-size-l)">Aa</span> |
| `--wa-font-size-xl` | 1.875rem (30px) | <span style="font-size: var(--wa-font-size-xl)">Aa</span> |
| `--wa-font-size-2xl` | 2.625rem (42px) | <span style="font-size: var(--wa-font-size-2xl)">Aa</span> |
| Token | Value | Example |
| --------------------- | ---------------- | ------------------------------------------------------------- |
| `--wa-font-size-root` | 16px | <span style="font-size: var(--wa-font-size-root)">AaBb</span> |
| `--wa-font-size-2xs` | 0.6875rem (11px) | <span style="font-size: var(--wa-font-size-xs)">AaBb</span> |
| `--wa-font-size-xs` | 0.75rem (12px) | <span style="font-size: var(--wa-font-size-xs)">AaBb</span> |
| `--wa-font-size-s` | 0.875rem (14px) | <span style="font-size: var(--wa-font-size-s)">AaBb</span> |
| `--wa-font-size-m` | 1rem (16px) | <span style="font-size: var(--wa-font-size-m)">AaBb</span> |
| `--wa-font-size-l` | 1.25rem (20px) | <span style="font-size: var(--wa-font-size-l)">AaBb</span> |
| `--wa-font-size-xl` | 1.625rem (26px) | <span style="font-size: var(--wa-font-size-xl)">AaBb</span> |
| `--wa-font-size-2xl` | 2rem (32px) | <span style="font-size: var(--wa-font-size-2xl)">AaBb</span> |
| `--wa-font-size-3xl` | 2.5625rem (41px) | <span style="font-size: var(--wa-font-size-3xl)">AaBb</span> |
| `--wa-font-size-4xl` | 3.25rem (52px) | <span style="font-size: var(--wa-font-size-4xl)">AaBb</span> |
## Font Weight
@@ -47,8 +49,8 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
## Line Height
| Token | Value | Example |
| ------------------------------ | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `--wa-line-height-compact` | 1.25 | <div style="line-height: var(--wa-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-regular` | 1.625 | <div style="line-height: var(--wa-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-comfortable` | 2 | <div style="line-height: var(--wa-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| Token | Value | Example |
| ------------------------------ | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--wa-line-height-compact` | 1.25 | <div style="line-height: var(--wa-font-line-height-compact);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-regular` | 1.6 | <div style="line-height: var(--wa-font-line-height-regular);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |
| `--wa-line-height-comfortable` | 2 | <div style="line-height: var(--wa-font-line-height-comfortable);">The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.<br>The quick brown fox jumped over the lazy dog.</div> |

6
src/components/tag/tag.styles.ts
View File

@@ -100,7 +100,7 @@ export default css`
}
.tag--small {
font-size: var(--wa-font-size-s);
font-size: var(--wa-font-size-xs);
height: calc(var(--wa-form-controls-height-s) * 0.8);
line-height: calc(var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) * 2);
border-radius: var(--wa-corners-s);
@@ -108,7 +108,7 @@ export default css`
}
.tag--medium {
font-size: var(--wa-font-size-m);
font-size: var(--wa-font-size-s);
height: calc(var(--wa-form-controls-height-m) * 0.8);
line-height: calc(var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) * 2);
border-radius: var(--wa-corners-s);
@@ -116,7 +116,7 @@ export default css`
}
.tag--large {
font-size: var(--wa-font-size-l);
font-size: var(--wa-font-size-m);
height: calc(var(--wa-form-controls-height-l) * 0.8);
line-height: calc(var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) * 2);
border-radius: var(--wa-corners-s);

12
src/themes/applied.css
View File

@@ -88,27 +88,27 @@ h6 {
}
h1 {
font-size: var(--wa-font-size-2xl);
font-size: var(--wa-font-size-3xl);
}
h2 {
font-size: var(--wa-font-size-xl);
font-size: var(--wa-font-size-2xl);
}
h3 {
font-size: var(--wa-font-size-l);
font-size: var(--wa-font-size-xl);
}
h4 {
font-size: var(--wa-font-size-m);
font-size: var(--wa-font-size-l);
}
h5 {
font-size: var(--wa-font-size-s);
font-size: var(--wa-font-size-m);
}
h6 {
font-size: var(--wa-font-size-xs);
font-size: var(--wa-font-size-s);
}
hr {

12
src/themes/chic.css
View File

@@ -193,17 +193,21 @@
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-heavy);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10px */
--wa-font-size-2xs: 0.6875rem; /* 11px */
--wa-font-size-xs: 0.75rem; /* 12px */
--wa-font-size-s: 0.875rem; /* 14px */
--wa-font-size-m: 1rem; /* 16px */
--wa-font-size-l: 1.25rem; /* 20px */
--wa-font-size-xl: 1.75rem; /* 28px */
--wa-font-size-2xl: 2.5rem; /* 40px */
--wa-font-size-xl: 1.625rem; /* 26px */
--wa-font-size-2xl: 2rem; /* 32px */
--wa-font-size-3xl: 2.5625rem; /* 41px */
--wa-font-size-4xl: 3.25rem; /* 52px */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.625;
--wa-font-line-height-regular: 1.6;
--wa-font-line-height-comfortable: 2;
/**

12
src/themes/classic.css
View File

@@ -199,17 +199,21 @@
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-medium);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10px */
--wa-font-size-2xs: 0.6875rem; /* 11px */
--wa-font-size-xs: 0.75rem; /* 12px */
--wa-font-size-s: 0.875rem; /* 14px */
--wa-font-size-m: 1rem; /* 16px */
--wa-font-size-l: 1.25rem; /* 20px */
--wa-font-size-xl: 1.75rem; /* 28px */
--wa-font-size-2xl: 2.5rem; /* 40px */
--wa-font-size-xl: 1.625rem; /* 26px */
--wa-font-size-2xl: 2rem; /* 32px */
--wa-font-size-3xl: 2.5625rem; /* 41px */
--wa-font-size-4xl: 3.25rem; /* 52px */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.625;
--wa-font-line-height-regular: 1.6;
--wa-font-line-height-comfortable: 2;
/**

12
src/themes/default.css
View File

@@ -197,17 +197,21 @@
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-medium);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10px */
--wa-font-size-2xs: 0.6875rem; /* 11px */
--wa-font-size-xs: 0.75rem; /* 12px */
--wa-font-size-s: 0.875rem; /* 14px */
--wa-font-size-m: 1rem; /* 16px */
--wa-font-size-l: 1.25rem; /* 20px */
--wa-font-size-xl: 1.75rem; /* 28px */
--wa-font-size-2xl: 2.5rem; /* 40px */
--wa-font-size-xl: 1.625rem; /* 26px */
--wa-font-size-2xl: 2rem; /* 32px */
--wa-font-size-3xl: 2.5625rem; /* 41px */
--wa-font-size-4xl: 3.25rem; /* 52px */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.75;
--wa-font-line-height-regular: 1.6;
--wa-font-line-height-comfortable: 2;
/**

12
src/themes/glassy.css
View File

@@ -197,17 +197,21 @@
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-medium);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10px */
--wa-font-size-2xs: 0.6875rem; /* 11px */
--wa-font-size-xs: 0.75rem; /* 12px */
--wa-font-size-s: 0.875rem; /* 14px */
--wa-font-size-m: 1rem; /* 16px */
--wa-font-size-l: 1.25rem; /* 20px */
--wa-font-size-xl: 1.75rem; /* 28px */
--wa-font-size-2xl: 2.5rem; /* 40px */
--wa-font-size-xl: 1.625rem; /* 26px */
--wa-font-size-2xl: 2rem; /* 32px */
--wa-font-size-3xl: 2.5625rem; /* 41px */
--wa-font-size-4xl: 3.25rem; /* 52px */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.625;
--wa-font-line-height-regular: 1.6;
--wa-font-line-height-comfortable: 2;
/**

12
src/themes/mellow.css
View File

@@ -197,17 +197,21 @@
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-medium);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10px */
--wa-font-size-2xs: 0.6875rem; /* 11px */
--wa-font-size-xs: 0.75rem; /* 12px */
--wa-font-size-s: 0.875rem; /* 14px */
--wa-font-size-m: 1rem; /* 16px */
--wa-font-size-l: 1.25rem; /* 20px */
--wa-font-size-xl: 1.75rem; /* 28px */
--wa-font-size-2xl: 2.5rem; /* 40px */
--wa-font-size-xl: 1.625rem; /* 26px */
--wa-font-size-2xl: 2rem; /* 32px */
--wa-font-size-3xl: 2.5625rem; /* 41px */
--wa-font-size-4xl: 3.25rem; /* 52px */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.625;
--wa-font-line-height-regular: 1.6;
--wa-font-line-height-comfortable: 2;
/**

12
src/themes/playful.css
View File

@@ -197,17 +197,21 @@
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-heavy);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10px */
--wa-font-size-2xs: 0.6875rem; /* 11px */
--wa-font-size-xs: 0.75rem; /* 12px */
--wa-font-size-s: 0.875rem; /* 14px */
--wa-font-size-m: 1rem; /* 16px */
--wa-font-size-l: 1.25rem; /* 20px */
--wa-font-size-xl: 1.75rem; /* 28px */
--wa-font-size-2xl: 2.5rem; /* 40px */
--wa-font-size-xl: 1.625rem; /* 26px */
--wa-font-size-2xl: 2rem; /* 32px */
--wa-font-size-3xl: 2.5625rem; /* 41px */
--wa-font-size-4xl: 3.25rem; /* 52px */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.625;
--wa-font-line-height-regular: 1.6;
--wa-font-line-height-comfortable: 2;
/**