bigcommerce · jorgemoya · Sep 23, 2024 · Sep 23, 2024
@@ -1,7 +1,7 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { DM_Serif_Text, Inter, Roboto_Mono } from 'next/font/google';
 import { NextIntlClientProvider, useMessages } from 'next-intl';
 import { unstable_setRequestLocale } from 'next-intl/server';
 import { PropsWithChildren } from 'react';
@@ -15,10 +15,23 @@ import { revalidate } from '~/client/revalidate-target';
 import { Notifications } from '../notifications';
 import { Providers } from '../providers';
 
-const inter = Inter({
+const heading = DM_Serif_Text({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-inter',
+  weight: '400',
+  variable: '--font-family-heading',
+});
+
+const body = Inter({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-family-body',
+});
+
+const mono = Roboto_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-family-mono',
 });
 
 const RootLayoutMetadataQuery = graphql(`
@@ -88,8 +101,8 @@ export default function RootLayout({ children, params: { locale } }: Props) {
   const messages = useMessages();
 
   return (
-    <html className={`${inter.variable} font-sans`} lang={locale}>
-      <body className="flex h-screen min-w-[375px] flex-col">
+    <html className={`${heading.variable} ${body.variable} ${mono.variable}`} lang={locale}>
+      <body className="flex h-screen min-w-[375px] flex-col font-body">
         <Notifications />
         <NextIntlClientProvider locale={locale} messages={messages}>
           <Providers>{children}</Providers>

@@ -1,3 +1,32 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --primary: 97 100% 68%;
+    --accent: 97 100% 68%;
+    --background: 0 0% 100%;
+    --foreground: 0 0% 7%;
+    --success: 116, 46%, 49%;
+    --error: 0, 100%, 50%;
+    --warning: 40, 100%, 50%;
+    --info: 220 70% 45%;
+    --contrast-100: 0 0% 93%;
+    --contrast-200: 0 0% 89%;
+    --contrast-300: 0 0% 72%;
+    --contrast-400: 0 0% 60%;
+    --contrast-500: 0 0% 53%;
+    --font-variation-settings-body: "slnt" 0;
+    --font-variation-settings-heading: "slnt" 0;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
@@ -68,6 +68,7 @@
     "@next/bundle-analyzer": "^14.2.13",
     "@playwright/test": "^1.47.2",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^20.16.5",
     "@types/react": "^18.3.8",

@@ -1,59 +1,109 @@
 /** @type {import('tailwindcss').Config} */
 const config = {
+  darkMode: ['class'],
   content: [
     './app/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     '!./node_modules/**', // Exclude everything in node_modules to speed up builds
   ],
+  prefix: '',
   theme: {
     extend: {
       colors: {
-        transparent: 'transparent',
-        current: 'currentColor',
-        black: '#000000',
-        primary: '#053FB0',
-        secondary: '#3071EF',
-        white: '#FFFFFF',
-        error: {
-          DEFAULT: '#AD0000',
-          secondary: '#C62828',
+        secondary: '#3071EF', // TODO: REMOVE WHEN MERGE
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          highlight: 'color-mix(in oklab, hsl(var(--primary)), white 75%)',
+          shadow: 'color-mix(in oklab, hsl(var(--primary)), black 75%)',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          highlight: 'color-mix(in oklab, hsl(var(--accent)), white 75%)',
+          shadow: 'color-mix(in oklab, hsl(var(--accent)), black 75%)',
         },
         success: {
-          DEFAULT: '#146622',
-          secondary: '#388E3C',
+          DEFAULT: 'hsl(var(--success))',
+          highlight: 'color-mix(in oklab, hsl(var(--success)), white 75%)',
+          shadow: 'color-mix(in oklab, hsl(var(--success)), black 75%)',
+        },
+        error: {
+          DEFAULT: 'hsl(var(--error))',
+          highlight: 'color-mix(in oklab, hsl(var(--error)), white 75%)',
+          shadow: 'color-mix(in oklab, hsl(var(--error)), black 75%)',
+          secondary: '#C62828', // TODO: REMOVE WHEN MERGE
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          highlight: 'color-mix(in oklab, hsl(var(--warning)), white 75%)',
+          shadow: 'color-mix(in oklab, hsl(var(--warning)), black 75%)',
         },
-        gray: {
-          100: '#F1F3F5',
-          200: '#CFD8DC',
-          300: '#AFBAC5',
-          400: '#90A4AE',
-          500: '#546E7A',
-          600: '#091D45',
+        info: {
+          DEFAULT: 'hsl(var(--info))',
+          highlight: 'color-mix(in oklab, hsl(var(--info)), white 75%)',
+          shadow: 'color-mix(in oklab, hsl(var(--info)), black 75%)',
+        },
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        contrast: {
+          100: 'hsl(var(--contrast-100))',
+          200: 'hsl(var(--contrast-200))',
+          300: 'hsl(var(--contrast-300))',
+          400: 'hsl(var(--contrast-400))',
+          500: 'hsl(var(--contrast-500))',
         },
       },
       fontFamily: {
-        sans: ['var(--font-inter)'],
-      },
-      borderColor: {
-        DEFAULT: '#CFD8DC',
+        heading: [
+          'var(--font-family-heading)',
+          {
+            fontFeatureSettings: 'var(--font-feature-settings-heading)',
+            fontVariationSettings: 'var(--font-variation-settings-heading)',
+          },
+        ],
+        body: [
+          'var(--font-family-body)',
+          {
+            fontFeatureSettings: 'var(--font-feature-settings-body)',
+            fontVariationSettings: 'var(--font-variation-settings-body)',
+          },
+        ],
+        mono: [
+          'var(--font-family-mono)',
+          {
+            fontFeatureSettings: 'var(--font-feature-settings-mono)',
+            fontVariationSettings: 'var(--font-variation-settings-mono)',
+          },
+        ],
       },
-      keyframes: {
-        revealVertical: {
-          '0%': { transform: 'translateY(-100%)' },
-          '100%': { transform: 'translateY(0%)' },
-        },
+      fontSize: {
+        xs: 'var(--font-size-xs, 0.75rem)',
+        sm: 'var(--font-size-sm, 0.875rem)',
+        base: 'var(--font-size-base, 1rem)',
+        lg: 'var(--font-size-lg, 1.125rem)',
+        xl: 'var(--font-size-xl, 1.25rem)',
+        '2xl': 'var(--font-size-2xl, 1.5rem)',
+        '3xl': 'var(--font-size-3xl, 1.875rem)',
+        '4xl': 'var(--font-size-4xl, 2.25rem)',
+        '5xl': 'var(--font-size-5xl, 3rem)',
+        '6xl': 'var(--font-size-6xl, 3.75rem)',
+        '7xl': 'var(--font-size-7xl, 4.5rem)',
+        '8xl': 'var(--font-size-8xl, 6rem)',
+        '9xl': 'var(--font-size-9xl, 8rem)',
       },
-      animation: {
-        revealVertical: 'revealVertical 400ms forwards cubic-bezier(0, 1, 0.25, 1)',
+      shadows: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow-base)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
       },
     },
   },
-
   plugins: [
     // @ts-ignore
-
-    require('tailwindcss-radix')(),
+    require('tailwindcss-radix')(), // TODO: REMOVE WHEN MERGE
     require('tailwindcss-animate'),
+    require('@tailwindcss/typography'),
     require('@tailwindcss/container-queries'),
   ],
 };