From f644454080db6a0238e14e145c94caec5bde5aab Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Mon, 30 Aug 2021 16:39:08 -0400
Subject: [PATCH] add new typography tokens

---
 docs/resources/changelog.md |  1 +
 docs/tokens/typography.md   | 24 ++++++++++++++----------
 src/themes/dark.styles.ts   |  4 ++++
 src/themes/light.styles.ts  |  4 ++++
 4 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 7bd1064c..8ed8cf7d 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Added `--sl-letter-spacing-denser`, `--sl-letter-spacing-looser`, `--sl-line-height-denser`, and `--sl-line-height-looser` design tokens
 - Fixed a bug where form controls would error out when the value was set to `undefined` [#513](https://github.com/shoelace-style/shoelace/pull/513)
 
 ## 2.0.0-beta.49
diff --git a/docs/tokens/typography.md b/docs/tokens/typography.md
index 10d98986..d980bb2f 100644
--- a/docs/tokens/typography.md
+++ b/docs/tokens/typography.md
@@ -39,16 +39,20 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
 
 ## Letter Spacing
 
-| Token                        | Value    | Example                                                                                                             |
-| ---------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
-| `--sl-letter-spacing-dense`  | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span>  |
-| `--sl-letter-spacing-normal` | normal   | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span> |
-| `--sl-letter-spacing-loose`  | 0.075em  | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span>  |
+| Token                        | Value    | Example                                                                                                              |
+| ---------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
+| `--sl-letter-spacing-denser` | ?        | <span style="letter-spacing: var(--sl-letter-spacing-denser);">The quick brown fox jumped over the lazy dog.</span>  |
+| `--sl-letter-spacing-dense`  | -0.015em | <span style="letter-spacing: var(--sl-letter-spacing-dense);">The quick brown fox jumped over the lazy dog.</span>   |
+| `--sl-letter-spacing-normal` | normal   | <span style="letter-spacing: var(--sl-letter-spacing-normal);">The quick brown fox jumped over the lazy dog.</span>  |
+| `--sl-letter-spacing-loose`  | 0.075em  | <span style="letter-spacing: var(--sl-letter-spacing-loose);">The quick brown fox jumped over the lazy dog.</span>   |
+| `--sl-letter-spacing-looser` | ?        | <span style="letter-spacing: var(--sl-letter-spacing-looser);">The quick brown fox jumped over the lazy dog.</span>  |
 
 ## Line Height
 
-| Token                     | Value | Example                                                                                                                                                                                                       |
-| ------------------------- | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--sl-line-height-dense`  | 1.4  | <div style="line-height: var(--sl-line-height-dense);">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>  |
-| `--sl-line-height-normal` | 1.8   | <div style="line-height: var(--sl-line-height-normal);">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> |
-| `--sl-line-height-loose`  | 2.2  | <div style="line-height: var(--sl-line-height-loose);">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                                                                                                                                                                                                        |
+| ------------------------- | ----- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--sl-line-height-denser` | ?     | <div style="line-height: var(--sl-line-height-denser);">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>  |
+| `--sl-line-height-dense`  | 1.4   | <div style="line-height: var(--sl-line-height-dense);">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>   |
+| `--sl-line-height-normal` | 1.8   | <div style="line-height: var(--sl-line-height-normal);">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>  |
+| `--sl-line-height-loose`  | 2.2   | <div style="line-height: var(--sl-line-height-loose);">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>   |
+| `--sl-line-height-looser` | ?     | <div style="line-height: var(--sl-line-height-looser);">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>  |
diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts
index ad995589..2a43ca64 100644
--- a/src/themes/dark.styles.ts
+++ b/src/themes/dark.styles.ts
@@ -442,14 +442,18 @@ export default css`
     --sl-font-weight-bold: 700;
 
     /* Letter spacings */
+    --sl-letter-spacing-denser: -0.03em;
     --sl-letter-spacing-dense: -0.015em;
     --sl-letter-spacing-normal: normal;
     --sl-letter-spacing-loose: 0.075em;
+    --sl-letter-spacing-looser: 0.15em;
 
     /* Line heights */
+    --sl-line-height-denser: 1;
     --sl-line-height-dense: 1.4;
     --sl-line-height-normal: 1.8;
     --sl-line-height-loose: 2.2;
+    --sl-line-height-looser: 2.6;
 
     /*
      * Form tokens
diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts
index a97e44fa..4ec327e4 100644
--- a/src/themes/light.styles.ts
+++ b/src/themes/light.styles.ts
@@ -442,14 +442,18 @@ export default css`
     --sl-font-weight-bold: 700;
 
     /* Letter spacings */
+    --sl-letter-spacing-denser: -0.03em;
     --sl-letter-spacing-dense: -0.015em;
     --sl-letter-spacing-normal: normal;
     --sl-letter-spacing-loose: 0.075em;
+    --sl-letter-spacing-looser: 0.15em;
 
     /* Line heights */
+    --sl-line-height-denser: 1;
     --sl-line-height-dense: 1.4;
     --sl-line-height-normal: 1.8;
     --sl-line-height-loose: 2.2;
+    --sl-line-height-looser: 2.6;
 
     /*
      * Form tokens