few more text utilities

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

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;
+}

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;
+}

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

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;
+}