New: Add stylistic alternates salt utility (#90)

stormwarning · Aug 12, 2022 · 36a85a6 · 36a85a6
1 parent 6a4f18e
commit 36a85a6
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 2 deletions.
diff --git a/.changeset/calm-doors-fetch.md b/.changeset/calm-doors-fetch.md
@@ -0,0 +1,5 @@
+---
+'tailwindcss-opentype': minor
+---
+
+Add stylistic alternates — `salt` — utility
diff --git a/docs/src/assets/fonts/exo-medium.woff2 b/docs/src/assets/fonts/exo-medium.woff2
diff --git a/docs/src/assets/main.css b/docs/src/assets/main.css
@@ -110,6 +110,12 @@
         src: url(/assets/fonts/ebgaramond-semibold.woff2) format('woff2');
         font-display: swap;
     }
+    @font-face {
+        font-family: 'Exo';
+        font-weight: 400;
+        src: url(/assets/fonts/exo-medium.woff2) format('woff2');
+        font-display: swap;
+    }
     @font-face {
         font-family: 'Hypatia Sans Pro';
         font-weight: 400;

diff --git a/docs/src/data/classes/ot-alternates.js b/docs/src/data/classes/ot-alternates.js
@@ -1,4 +1,5 @@
 module.exports = {
+    salt: '--ot-salt: "salt" 1',
     'ss-01': '--ot-ss01: "ss01" 1',
     'ss-02': '--ot-ss02: "ss02" 1',
     'ss-03': '--ot-ss03: "ss03" 1',

diff --git a/docs/src/feature-alternates.md b/docs/src/feature-alternates.md
@@ -13,6 +13,21 @@ classData: ot-alternates
 
 These utilities provide access to OpenType alternate glyph features not currently available via the higher-level CSS properties. For other alternate glyph features, use the [Font Variant Alternates](/font-variant-alternates) utilities.
 
+### Stylistic alternates :feat[salt]
+
+Sometimes a significant portion of a typeface’s unique character comes from a few specific glyphs. Stylistic Alternates offer an opportunity to change these, and change the tone of the typeface.
+
+```html amber
+<template preview>
+    <p class="font-exo text-4xl opacity-70">Easy like Sunday morning & fox</p>
+    <p class="font-exo salt text-4xl">
+        E<mark>a</mark>sy like S<mark>unda</mark>y <mark>m</mark>o<mark>rn</mark>i<mark>ng</mark> <mark>&</mark> <mark>f</mark>o<mark>x</mark>
+    </p>
+</template>
+
+<p class="**salt**">Easy like Sunday morning & fox</p>
+```
+
 ### Stylistic sets :feat[ss01–ss20]
 
 This feature replaces sets of default character glyphs with stylistic variants. Glyphs in stylistic sets may be designed to harmonise visually, interact in particular ways, or otherwise work together.

diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
@@ -94,6 +94,7 @@ module.exports = {
                 sans: ['Inter var', ...defaultTheme.fontFamily.sans],
                 allan: 'Allan',
                 caflisch: 'Caflisch Script',
+                exo: 'Exo',
                 garamond: 'EB Garamond, serif',
                 hypatia: 'Hypatia Sans Pro, sans-serif',
                 goudy: 'Sorts Mill Goudy, serif',

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -93,12 +93,14 @@ export default plugin.withOptions(() => {
                 '--ot-subs': '"subs" 0',
                 '--ot-sinf': '"sinf" 0',
                 '--ot-hlig': '"hlig" 0',
+                '--ot-salt': '"salt" 0',
                 ...stylisticSetsDefaults,
                 '--ot-features': [
                     'var(--ot-sups)',
                     'var(--ot-subs)',
                     'var(--ot-sinf)',
                     'var(--ot-hlig)',
+                    'var(--ot-salt)',
                     ...stylisticSetsProperties,
                 ].join(', '),
             },
@@ -122,6 +124,10 @@ export default plugin.withOptions(() => {
                     '--ot-hlig': '"hlig" 1',
                     ...JIT_FONT_FEATURE_DEFAULTS,
                 },
+                '.salt': {
+                    '--ot-salt': '"salt" 1',
+                    ...JIT_FONT_FEATURE_DEFAULTS,
+                },
             },
             variants('fontFeatureSettings', []),
         )