From f949fefb07048369087dc38aefcede918fddf4a4 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sat, 8 Jul 2023 19:35:06 +0100
Subject: [PATCH] few more text utilities

---
 .../styles/typography/utilities.stories.mdx   | 32 +++++++++++++
 src/scss/reset/_rules.scss                    |  8 ++++
 src/scss/text/_letter-spacing.scss            | 36 ++++++++++++++
 src/scss/text/_rules.scss                     |  2 +
 src/scss/text/_vertical-align.scss            | 48 +++++++++++++++++++
 5 files changed, 126 insertions(+)
 create mode 100644 src/scss/text/_letter-spacing.scss
 create mode 100644 src/scss/text/_vertical-align.scss

diff --git a/src/docs/styles/typography/utilities.stories.mdx b/src/docs/styles/typography/utilities.stories.mdx
index 5a81e190..3aee2b95 100644
--- a/src/docs/styles/typography/utilities.stories.mdx
+++ b/src/docs/styles/typography/utilities.stories.mdx
@@ -60,6 +60,21 @@ You can make any utility class `!important` by adding a `!` to the front of the
   copyable={[true, false]}
 />
 
+### Letter spacing
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['tracking-tighter', 'letter-spacing: -0.05em;'],
+    ['tracking-tight', 'letter-spacing: -0.025em;'],
+    ['tracking-normal', 'letter-spacing: 0em;'],
+    ['tracking-wide', 'letter-spacing: 0.025em;'],
+    ['tracking-wider', 'letter-spacing: 0.05em;'],
+    ['tracking-widest', 'letter-spacing: 0.1em;'],
+  ]}
+  copyable={[true, false]}
+/>
+
 ### Text align
 
 <CopyTable
@@ -83,6 +98,23 @@ You can make any utility class `!important` by adding a `!` to the front of the
   copyable={[true, false]}
 />
 
+### Vertical align
+
+<CopyTable
+  header={['Class', 'Properties']}
+  body={[
+    ['align-baseline', 'vertical-align: baseline;'],
+    ['align-top', 'vertical-align: top;'],
+    ['align-middle', 'vertical-align: middle;'],
+    ['align-bottom', 'vertical-align: bottom;'],
+    ['align-text-top', 'vertical-align: text-top;'],
+    ['align-text-bottom', 'vertical-align: text-bottom;'],
+    ['align-sub', 'vertical-align: sub;'],
+    ['align-super', 'vertical-align: super;'],
+  ]}
+  copyable={[true, false]}
+/>
+
 ### White space
 
 <CopyTable
diff --git a/src/scss/reset/_rules.scss b/src/scss/reset/_rules.scss
index ac8f2bb5..06d6962b 100644
--- a/src/scss/reset/_rules.scss
+++ b/src/scss/reset/_rules.scss
@@ -14,3 +14,11 @@ body {
   line-height: 1.5;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+
+p {
+  display: block;
+  margin-block-start: 0px;
+  margin-block-end: 0px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
diff --git a/src/scss/text/_letter-spacing.scss b/src/scss/text/_letter-spacing.scss
new file mode 100644
index 00000000..6cea9dd6
--- /dev/null
+++ b/src/scss/text/_letter-spacing.scss
@@ -0,0 +1,36 @@
+.tracking-tighter {
+  letter-spacing: -0.05em;
+}
+.tracking-tight {
+  letter-spacing: -0.025em;
+}
+.tracking-normal {
+  letter-spacing: 0em;
+}
+.tracking-wide {
+  letter-spacing: 0.025em;
+}
+.tracking-wider {
+  letter-spacing: 0.05em;
+}
+.tracking-widest {
+  letter-spacing: 0.1em;
+}
+.\!tracking-tighter {
+  letter-spacing: -0.05em !important;
+}
+.\!tracking-tight {
+  letter-spacing: -0.025em !important;
+}
+.\!tracking-normal {
+  letter-spacing: 0em !important;
+}
+.\!tracking-wide {
+  letter-spacing: 0.025em !important;
+}
+.\!tracking-wider {
+  letter-spacing: 0.05em !important;
+}
+.\!tracking-widest {
+  letter-spacing: 0.1em !important;
+}
diff --git a/src/scss/text/_rules.scss b/src/scss/text/_rules.scss
index c07023c0..7b50e364 100644
--- a/src/scss/text/_rules.scss
+++ b/src/scss/text/_rules.scss
@@ -1,7 +1,9 @@
 @import 'font-style';
 @import 'font-weight';
+@import 'letter-spacing';
 @import 'text-align';
 @import 'text-decoration';
 @import 'text-transform';
+@import 'vertical-align';
 @import 'white-space';
 @import 'word-break';
diff --git a/src/scss/text/_vertical-align.scss b/src/scss/text/_vertical-align.scss
new file mode 100644
index 00000000..d2b67ae7
--- /dev/null
+++ b/src/scss/text/_vertical-align.scss
@@ -0,0 +1,48 @@
+.align-baseline {
+  vertical-align: baseline;
+}
+.align-top {
+  vertical-align: top;
+}
+.align-middle {
+  vertical-align: middle;
+}
+.align-bottom {
+  vertical-align: bottom;
+}
+.align-text-top {
+  vertical-align: text-top;
+}
+.align-text-bottom {
+  vertical-align: text-bottom;
+}
+.align-sub {
+  vertical-align: sub;
+}
+.align-super {
+  vertical-align: super;
+}
+.\!align-baseline {
+  vertical-align: baseline !important;
+}
+.\!align-top {
+  vertical-align: top !important;
+}
+.\!align-middle {
+  vertical-align: middle !important;
+}
+.\!align-bottom {
+  vertical-align: bottom !important;
+}
+.\!align-text-top {
+  vertical-align: text-top !important;
+}
+.\!align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+.\!align-sub {
+  vertical-align: sub !important;
+}
+.\!align-super {
+  vertical-align: super !important;
+}