Added demo and overrideable kerning and leading

craigrileyuk · Feb 3, 2022 · fde199e · fde199e
1 parent 15a178b
commit fde199e
Show file tree

Hide file tree

Showing 15 changed files with 3,099 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,5 @@
+demo
+vite.config.js
+.github
+tailwind.config.js
+postcss.config.js
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/demo/public/favicon.ico b/demo/public/favicon.ico
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -0,0 +1,39 @@
+<template>
+  <h1 class="fluid-5xl">Fluid 5XL</h1>
+  <h2 class="fluid-4xl">Fluid 4XL</h2>
+  <h3 class="fluid-3xl">Fluid 3XL</h3>
+  <h4 class="fluid-2xl">Fluid 2XL</h4>
+  <h5 class="fluid-xl">Fluid XL</h5>
+  <h6 class="fluid-lg">Fluid LG</h6>
+  <p class="fluid-base">Fluid BASE</p>
+  <div class="fluid-prose">
+    <div>
+      <section>
+        <article>
+          <h1 style="--fluid-line-height: 2.5; --fluid-letter-spacing: 10px">
+            Fluid 5XL
+          </h1>
+          <h2>Fluid 4XL</h2>
+          <h3>Fluid 3XL</h3>
+          <h4>Fluid 2XL</h4>
+          <h5>Fluid XL</h5>
+          <h6>Fluid LG</h6>
+          <p>Fluid BASE</p>
+        </article>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+  --testing: 1.35;
+  letter-spacing: var(--testing);
+}
+</style>
diff --git a/demo/src/assets/logo.png b/demo/src/assets/logo.png
diff --git a/demo/src/components/HelloWorld.vue b/demo/src/components/HelloWorld.vue
@@ -0,0 +1,40 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: String
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Documentation
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>
diff --git a/demo/src/main.js b/demo/src/main.js
@@ -0,0 +1,6 @@
+import "./style.css";
+
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/demo/src/style.css b/demo/src/style.css
@@ -0,0 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+  .fluid-prose {
+    :where(h1) {
+      @apply fluid-5xl;
+    }
+  }
+}
diff --git a/index.js b/index.js
@@ -60,7 +60,6 @@ const fluidTypography = function ({ addUtilities, theme }) {
   const rules = {
     ".fluid-xs": {
       fontSize: generateFluidRule(-2, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: 0.2,
     },
     ".fluid-sm": {
@@ -75,57 +74,60 @@ const fluidTypography = function ({ addUtilities, theme }) {
     },
     ".fluid-lg": {
       fontSize: generateFluidRule(1, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "0.009375em",
     },
     ".fluid-xl": {
       fontSize: generateFluidRule(2, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "0.0125em",
     },
     ".fluid-2xl": {
       fontSize: generateFluidRule(3, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "normal",
     },
 
     ".fluid-3xl": {
       fontSize: generateFluidRule(4, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "0.0073529412em",
     },
 
     ".fluid-4xl": {
       fontSize: generateFluidRule(5, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "normal",
     },
     ".fluid-5xl": {
       fontSize: generateFluidRule(6, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "-0.0083333333em",
     },
     ".fluid-6xl": {
       fontSize: generateFluidRule(7, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "-0.015625em",
     },
     ".fluid-7xl": {
       fontSize: generateFluidRule(8, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "-0.0234375em",
     },
     ".fluid-8xl": {
       fontSize: generateFluidRule(9, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "-0.03125em",
     },
     ".fluid-9xl": {
       fontSize: generateFluidRule(10, fluidConfig),
-      lineHeight: fluidConfig.lineHeight,
       letterSpacing: "-0.04em",
     },
   };
+  /**
+   * We use CSS variables here to allow the values to be overridden if used in a .fluid-prose style
+   */
+  const lh = "--fluid-line-height";
+  const ls = "--fluid-letter-spacing";
+  Object.keys(rules).map((key) => {
+    const rule = rules[key];
+    rule[lh] =
+      rule.lineHeight?.toString() || fluidConfig.lineHeight?.toString();
+    rule[ls] = rule.letterSpacing;
+    rule.lineHeight = `var(${lh})`;
+    rule.letterSpacing = `var(${ls})`;
+  });
 
   addUtilities(rules);
 };