diff --git a/.vscode/settings.json b/.vscode/settings.json index 6a1178f5fa..985107e3ad 100644 --- 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 new file mode 100644 index 0000000000..ffdc343d9d --- /dev/null +++ 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 b/packages/components/src/presets/next/index.ts similarity index 89% rename from packages/components/src/presets/next.ts rename to packages/components/src/presets/next/index.ts index 1429ffedeb..9336ef5b82 100644 --- a/packages/components/src/presets/next.ts +++ b/packages/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:wght@100..900&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 new file mode 100644 index 0000000000..999a23a87d --- /dev/null +++ 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 new file mode 100644 index 0000000000..c092050862 --- /dev/null +++ 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 + +export const Typography: Story = { + render: () => { + return ( +
+
+

Typography

+
+

Inter

+
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ + abcdefghijklmnopqrstuvwxyz + 1234567890?!()[]{}&*^%$#@~<> +
+
+
+
+

Display

+
+

Display XL

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Display LG

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Display MD

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Display SM

+

+ The five boxing wizards jump quickly. 1234567890 +

+
+
+
+

Title

+
+

Title LG Medium

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Title LG Regular

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Title MD Semibold

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Title MD Medium

+

+ The five boxing wizards jump quickly. 1234567890 +

+
+
+
+

Headline

+
+

Headline LG Semibold

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Headline LG Medium

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Headline LG Regular

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Headline Base Semibold

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Headline Base Medium

+

+ The five boxing wizards jump quickly. 1234567890 +

+
+
+
+

Body

+
+

Body Base

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Body SM

+

+ The five boxing wizards jump quickly. 1234567890 +

+
+
+
+

Label

+
+

Label MD Medium

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Label MD Regular

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Label SM Medium

+

+ The five boxing wizards jump quickly. 1234567890 +

+

Label SM Regular

+

+ The five boxing wizards jump quickly. 1234567890 +

+
+
+
+ ) + }, +} diff --git a/packages/components/tailwind.config.js b/packages/components/tailwind.config.ts similarity index 84% rename from packages/components/tailwind.config.js rename to packages/components/tailwind.config.ts index 220e115c20..b2b24a3d4e 100644 --- a/packages/components/tailwind.config.js +++ b/packages/components/tailwind.config.ts @@ -1,4 +1,7 @@ /** @type {import('tailwindcss').Config} */ +import formsPlugin from "@tailwindcss/forms" +import typographyPlugin from "@tailwindcss/typography" + import classicPreset from "./src/presets/classic" import nextPreset from "./src/presets/next" @@ -28,5 +31,5 @@ export default { }, }, }, - plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")], + plugins: [formsPlugin, typographyPlugin], }