feat: add typography and semantic tailwind tokens to isomer component…

… package (#359) ### TL;DR This PR introduces new typography and semantic color tokens to `isomer-components`. Also updates the Tailwind configuration file to use TypeScript. ### What changed? - Added new color presets to `packages/components/src/presets/next/colors.ts` - Created a new `typography.ts` file and moved typography-related configuration there. - Updated `packages/components/src/presets/next.ts` to improve module structure. - Added Storybook stories to showcase typography styles. - Updated Tailwind configuration to import plugins using ES module syntax instead of CommonJS. ### Why make this change? Sync figma with eng ---
opengovsg · Jul 25, 2024 · f521eeb · f521eeb
1 parent c0913d6
commit f521eeb
Show file tree

Hide file tree

Showing 6 changed files with 338 additions and 5 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,7 +17,6 @@
     ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["classNames={([^}]*)}", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
-  "tailwindCSS.experimental.configFile": "./tooling/tailwind/web.ts",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.preferences.autoImportFileExcludePatterns": [
     "next/router.d.ts",

diff --git a/packages/components/src/presets/next/colors.ts b/packages/components/src/presets/next/colors.ts
@@ -0,0 +1,46 @@
+import twColors from "tailwindcss/colors"
+
+export const colors = {
+  base: {
+    canvas: {
+      DEFAULT: twColors.white,
+      alt: twColors.gray["50"],
+      backdrop: twColors.gray["100"],
+      inverse: {
+        DEFAULT: twColors.zinc["900"],
+        overlay: twColors.zinc["700"],
+      },
+    },
+    content: {
+      DEFAULT: twColors.gray["700"],
+      strong: twColors.gray["900"],
+      medium: twColors.gray["800"],
+      subtle: twColors.gray["600"],
+      inverse: {
+        DEFAULT: twColors.white,
+        subtle: twColors.slate["200"],
+      },
+    },
+    divider: {
+      subtle: twColors.slate["200"],
+      medium: twColors.gray["300"],
+      strong: twColors.gray["400"],
+      inverse: twColors.white,
+      // TODO: Change to site brand primary dynamic theme
+      brand: "#1361F0",
+    },
+  },
+  link: {
+    DEFAULT: twColors.blue["600"],
+    hover: "#0D4FCA",
+    active: "#0B44AC",
+  },
+  utility: {
+    feedback: {
+      info: {
+        DEFAULT: twColors.blue["500"],
+        subtle: twColors.blue["100"],
+      },
+    },
+  },
+}
diff --git a/packages/components/src/presets/next.ts → ...ages/components/src/presets/next/index.ts b/packages/components/src/presets/next.ts → ...ages/components/src/presets/next/index.ts
@@ -1,14 +1,38 @@
-/** @type {import('tailwindcss').Config} */
+import type { Config } from "tailwindcss"
 import defaultTheme from "tailwindcss/defaultTheme"
 import plugin from "tailwindcss/plugin"
 
-export default {
+import { colors } from "./colors"
+import { isomerTypography } from "./typography"
+
+const config: Config = {
+  content: [],
   theme: {
     extend: {
       boxShadow: {
         sm: "0 0px 10px 0px rgba(191, 191, 191, 0.5)",
       },
       colors: {
+        ...colors,
+        // TODO: Should be injected by the site theme
+        // Currently using MOH theme as an example
+        brand: {
+          canvas: {
+            primary: "#00405F",
+            alt: "#80A0AF",
+            backdrop: "#E6ECEF",
+          },
+          interaction: {
+            DEFAULT: "#00405F",
+            hover: {
+              DEFAULT: "#002E44",
+              inverse: "#002E44",
+            },
+            pressed: "#00283B",
+          },
+        },
+        // Everything below is deprecated and should be removed when
+        // all components are using the new color tokens above
         canvas: {
           DEFAULT: "#ffffff",
           overlay: "#00000066",
@@ -45,6 +69,7 @@ export default {
           subtle: "#f2f2f2",
         },
         utility: {
+          ...colors.utility,
           info: {
             DEFAULT: "#87bdff",
             subtle: "#e0eeff",
@@ -102,7 +127,10 @@ export default {
     },
   },
   plugins: [
-    plugin(({ addBase, addUtilities, theme }: any) => {
+    isomerTypography,
+    // !! @deprecated, use isomerTypography plugin instead
+    // Delete after no components are using these classes anymore,
+    plugin(({ addBase, addUtilities, theme }) => {
       addUtilities({
         /* Heading typography tokens */
         ".text-heading-01": {
@@ -248,6 +276,7 @@ export default {
       // Add Inter as a base font
       // CSS taken from https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap
       addBase({
+        // @ts-expect-error Tailwind types did not account for @font-face
         "@font-face": [
           {
             fontFamily: "Inter",
@@ -316,3 +345,5 @@ export default {
     }),
   ],
 }
+
+export default config
diff --git a/packages/components/src/presets/next/typography.ts b/packages/components/src/presets/next/typography.ts
@@ -0,0 +1,125 @@
+import plugin from "tailwindcss/plugin"
+
+export const isomerTypography = plugin(({ addComponents, theme }) => {
+  addComponents({
+    // Display
+    // Large prominent titles
+    ".prose-display-xl": {
+      fontWeight: theme("fontWeight.semibold"),
+      letterSpacing: "-0.022em",
+      "@apply text-[3rem] lg:text-[4.25rem] leading-[1.2] lg:leading-[1.1]": {},
+    },
+    ".prose-display-lg": {
+      fontWeight: theme("fontWeight.semibold"),
+      letterSpacing: "-0.022em",
+      "@apply text-[2.25rem] lg:text-[3rem] leading-[1.2] lg:leading-[1.1]": {},
+    },
+    ".prose-display-md": {
+      fontWeight: theme("fontWeight.semibold"),
+      letterSpacing: "-0.022em",
+      "@apply text-[1.75rem] md:text-[2.25rem] leading-[1.2]": {},
+    },
+    ".prose-display-sm": {
+      fontWeight: theme("fontWeight.semibold"),
+      letterSpacing: "-0.022em",
+      "@apply text-[1.25rem] lg:text-[1.5rem] leading-[1.2]": {},
+    },
+    // Title
+    // Group major sections
+    ".prose-title-lg": {
+      letterSpacing: "0",
+      "@apply text-[1.1875rem] lg:text-[1.5rem] leading-[1.3]": {},
+    },
+    ".prose-title-lg-medium": {
+      fontWeight: theme("fontWeight.medium"),
+      "@apply prose-title-lg": {},
+    },
+    ".prose-title-lg-regular": {
+      fontWeight: theme("fontWeight.normal"),
+      "@apply prose-title-lg": {},
+    },
+    ".prose-title-md": {
+      letterSpacing: "0",
+      "@apply text-[1.0625rem] lg:text-[1.25rem] leading-[1.3]": {},
+    },
+    ".prose-title-md-semibold": {
+      fontWeight: theme("fontWeight.semibold"),
+      "@apply prose-title-md": {},
+    },
+    ".prose-title-md-medium": {
+      fontWeight: theme("fontWeight.medium"),
+      "@apply prose-title-md": {},
+    },
+    // Headline
+    // Attention to specific part of section
+    ".prose-headline-lg": {
+      letterSpacing: "0",
+      "@apply text-[1.0625rem] lg:text-[1.125rem] leading-[1.3]": {},
+    },
+    ".prose-headline-lg-semibold": {
+      fontWeight: theme("fontWeight.semibold"),
+      "@apply prose-headline-lg": {},
+    },
+    ".prose-headline-lg-medium": {
+      fontWeight: theme("fontWeight.medium"),
+      "@apply prose-headline-lg": {},
+    },
+    ".prose-headline-lg-regular": {
+      fontWeight: theme("fontWeight.normal"),
+      "@apply prose-headline-lg": {},
+    },
+    ".prose-headline-base": {
+      letterSpacing: "0",
+      "@apply text-[0.9375rem] lg:text-[1rem] leading-[1.4]": {},
+    },
+    ".prose-headline-base-semibold": {
+      fontWeight: theme("fontWeight.semibold"),
+      "@apply prose-headline-base": {},
+    },
+    ".prose-headline-base-medium": {
+      fontWeight: theme("fontWeight.medium"),
+      "@apply prose-headline-base": {},
+    },
+    // Body
+    // Main text content (multiple lines)
+    ".prose-body-base": {
+      fontWeight: theme("fontWeight.normal"),
+      letterSpacing: "0",
+      "@apply text-[0.9375rem] lg:text-[1rem] leading-[1.5]": {},
+    },
+    ".prose-body-sm": {
+      fontWeight: theme("fontWeight.normal"),
+      letterSpacing: "0",
+      // Intentionally larger than desktop/tablet size. This is to ensure readability on mobile.
+      "@apply text-[0.9375rem] lg:text-[0.875rem] leading-[1.5]": {},
+    },
+    // Label
+    // Single-line explanatory text
+    ".prose-label-md": {
+      letterSpacing: "0",
+      fontSize: "0.875rem",
+      lineHeight: "1.5",
+    },
+    ".prose-label-md-medium": {
+      fontWeight: theme("fontWeight.medium"),
+      "@apply prose-label-md": {},
+    },
+    ".prose-label-md-regular": {
+      fontWeight: theme("fontWeight.normal"),
+      "@apply prose-label-md": {},
+    },
+    ".prose-label-sm": {
+      letterSpacing: "0",
+      fontSize: "0.75rem",
+      lineHeight: "1.5",
+    },
+    ".prose-label-sm-medium": {
+      fontWeight: theme("fontWeight.medium"),
+      "@apply prose-label-sm": {},
+    },
+    ".prose-label-sm-regular": {
+      fontWeight: theme("fontWeight.normal"),
+      "@apply prose-label-sm": {},
+    },
+  })
+})
diff --git a/packages/components/src/stories/foundation/Typography.stories.tsx b/packages/components/src/stories/foundation/Typography.stories.tsx
@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+const meta: Meta = {
+  title: "Foundation/Typography",
+  tags: ["!autodocs"],
+}
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Typography: Story = {
+  render: () => {
+    return (
+      <div className="container flex max-w-screen-lg flex-col gap-4">
+        <section className="flex flex-col gap-2">
+          <h1 className="prose-display-xl">Typography</h1>
+          <div className="flex flex-col justify-between break-words rounded-lg bg-blue-700 px-4 py-8 text-white md:flex-row md:items-center md:px-12">
+            <p className="prose-display-md">Inter</p>
+            <div className="prose-headline-lg-regular flex flex-col">
+              <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
+              <span>abcdefghijklmnopqrstuvwxyz</span>
+              <span>1234567890?!()[]&#123;&#125;&*^%$#@~&lt;&gt;</span>
+            </div>
+          </div>
+        </section>
+        <section>
+          <h2 className="prose-display-lg mb-4">Display</h2>
+          <div className="grid grid-cols-1 gap-y-4 md:grid-cols-2">
+            <p className="prose-title-md-medium">Display XL</p>
+            <p className="prose-display-xl">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Display LG</p>
+            <p className="prose-display-lg">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Display MD</p>
+            <p className="prose-display-md">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Display SM</p>
+            <p className="prose-display-sm">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+          </div>
+        </section>
+        <section>
+          <h2 className="prose-display-lg mb-4">Title</h2>
+          <div className="grid grid-cols-1 gap-y-4 md:grid-cols-2">
+            <p className="prose-title-md-medium">Title LG Medium</p>
+            <p className="prose-title-lg-medium">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Title LG Regular</p>
+            <p className="prose-title-lg-regular">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Title MD Semibold</p>
+            <p className="prose-title-md-semibold">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Title MD Medium</p>
+            <p className="prose-title-md-medium">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+          </div>
+        </section>
+        <section>
+          <h2 className="prose-display-lg mb-4">Headline</h2>
+          <div className="grid grid-cols-1 gap-y-4 md:grid-cols-2">
+            <p className="prose-title-md-medium">Headline LG Semibold</p>
+            <p className="prose-headline-lg-semibold">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Headline LG Medium</p>
+            <p className="prose-headline-lg-medium">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Headline LG Regular</p>
+            <p className="prose-headline-lg-regular">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Headline Base Semibold</p>
+            <p className="prose-headline-base-semibold">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Headline Base Medium</p>
+            <p className="prose-headline-base-medium">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+          </div>
+        </section>
+        <section>
+          <h2 className="prose-display-lg mb-4">Body</h2>
+          <div className="grid grid-cols-1 gap-y-4 md:grid-cols-2">
+            <p className="prose-title-md-medium">Body Base</p>
+            <p className="prose-body-base">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Body SM</p>
+            <p className="prose-body-sm">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+          </div>
+        </section>
+        <section>
+          <h2 className="prose-display-lg mb-4">Label</h2>
+          <div className="grid grid-cols-1 gap-y-4 md:grid-cols-2">
+            <p className="prose-title-md-medium">Label MD Medium</p>
+            <p className="prose-label-md-medium">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Label MD Regular</p>
+            <p className="prose-label-md-regular">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Label SM Medium</p>
+            <p className="prose-label-sm-medium">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+            <p className="prose-title-md-medium">Label SM Regular</p>
+            <p className="prose-label-sm-regular">
+              The five boxing wizards jump quickly. 1234567890
+            </p>
+          </div>
+        </section>
+      </div>
+    )
+  },
+}