@obosbbl/grunnmuren-tailwind 2.0.0-canary.9 → 2.0.1

package/README.md

@@ -18,43 +18,14 @@ pnpm add -D @obosbbl/grunnmuren-tailwind@canary tailwindcss postcss autoprefixer
 
 Configure Tailwind to use the preset
 
-```js
-// tailwind.config.js
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  presets: [require('@obosbbl/grunnmuren-tailwind')],
-  content: [
-    // Add your own content sources as needed, eg:
-    './src/app/**/*.{js,ts,jsx,tsx,}',
-
-    // If you're using Grunnmuren's React components
-    './node_modules/@obosbbl/grunnmuren-react/dist/**/*.{mjs,js}',
-  ],
-};
-```
-
-Add the Tailwind directives to your CSS
-
 ```css
 /* globals.css */
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
+@import "@obosbbl/grunnmuren-tailwind";
 
-Configure PostCSS to use Tailwind
-
-```js
-// postcss.config.js
-
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
+/** Add any auto excluded sources (typically residing in node_modules) */
+@source "../../node_modules/@obosbbl/grunnmuren-react/dist";
+@source "../../node_modules/@code-obos/obos-layout/dist"
 ```
 
 ## Fonts
@@ -63,7 +34,7 @@ Fonts are automatically loaded from OBOS' CDN, so you don't have to host the fon
 
 If you use [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP), you have to allow `https://www.obos.no` as a [font-src](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/font-src), otherwise the fonts will be blocked from loading.
 
-The preset includes a (local) fallback font to prevent [CLS](https://web.dev/articles/cls) while the fonts are loading. This is similar to the [font optimization in Next](https://nextjs.org/docs/app/building-your-application/optimizing/fonts). This is enabled by default, but can be disabled with the `includeFontFallback` option.
+The preset includes a (local) fallback font to prevent [CLS](https://web.dev/articles/cls) while the fonts are loading. This is similar to the [font optimization in Next](https://nextjs.org/docs/app/building-your-application/optimizing/fonts). This is enabled by default, and can only be disabled by a @theme override of the font variables in your own main tailwind CSS file.
 
 The fallback font metrics is generated with a script that can be run with `pnpm font-fallback` (requires [Bun](https://bun.sh/)). If the fonts are changed, the script must be rerun and the resulting file commited.
 
@@ -93,3 +64,43 @@ The preset supports the following options:
 | --------------------- | ------------- | --------------------------------------------------- |
 | includeFontFallback   | `true`        | Whether the preset includes a font fallback         |
 | legacyV1Compatibility | `false`       | Configures partial compatibility with Grunnmuren v1 |
+
+## Migrating from v2?
+Tailwind is upgraded to v4. The `grunnmuren-tailwind` package is now CSS-first configured. And the previously exposed JS config file is now replaced by a CSS config file.
+
+The `legacyV1Compatibility` option is removed, so your project has to be fully upgraded to Grunnmuren v2.
+
+The `includeFontFallback` option is also removed, and a font fallback will automatically be applied to the OBOS fonts by defaullt.
+
+## Migration
+1. Upgrade your project to Tailwind 4. You can try the [migration guide](https://tailwindcss.com/docs/upgrade-guide)
+ from tailwind.
+2. Add `@import "@obosbbl/grunnmuren-tailwind";` to the top of the main CSS file of your project. This is the new CSS configuration file for Grunnmuren.
+3. If you have a JS/TS `tailwind.config` in your project and would like to keep it. You can include it in the main CSS file (mentioned in step 2), by using the `@config` directive, e.g: `@config '../tailwind.config.ts';`. Read more [here](https://tailwindcss.com/docs/functions-and-directives#compatibility).
+4. Finally, if you would like to get rid of the old `tailwind.config`. You can move all your configuration to the main CSS file of your project. Tailwind 4 has automatic content detection, but if you need to include some excluded source you can use the `@source` directive, e.g: `@source "./node_modules/@obosbbl/grunnmuren-react/dist";`. You can also extend the `@obosbbl/grunnmuren-tailwind` config by using various directives such as `@base` or `@theme`.
+
+Here is an example of what your main CSS file __might__ look like after migration:
+
+``` CSS
+@import "@obosbbl/grunnmuren-tailwind";
+
+@source "../../node_modules/@obosbbl/grunnmuren-react/dist";
+@source "../../node_modules/@code-obos/obos-layout/dist"
+
+@theme {
+  --animate-custom: custom-animation 1s ease-in-out infinite;
+  @keyframes custom-animation {
+    0%,
+    100% {
+      transform: rotate(-3deg);
+    }
+    50% {
+      transform: rotate(3deg);
+    }
+  }
+}
+
+@utility my-custom-util {
+  @apply flex flex-col min-h-screen;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.0.0-canary.9",
+  "version": "2.0.1",
   "description": "Grunnmuren Tailwind preset",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -8,11 +8,10 @@
   "license": "MIT",
   "type": "commonjs",
   "exports": {
-    ".": "./tailwind-base.cjs"
+    ".": "./tailwind-base.css"
   },
   "files": [
-    "tailwind-base.cjs",
-    "fonts/font-fallback.js"
+    "tailwind-base.css"
   ],
   "dependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -20,10 +19,10 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
-    "tailwindcss": "3.4.15"
+    "tailwindcss": "4.0.17"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^4.0.0"
   },
   "scripts": {
     "font-fallback": "bun --cwd=./fonts ./generate-font-fallback.ts"

package/tailwind-base.css

@@ -0,0 +1,171 @@
+@import "tailwindcss";
+@import "./tailwind-typography";
+@import "./font";
+
+@theme {
+  /*** Font stacks ***/
+  --font-text: OBOSText, __OBOSText_Fallback, sans-serif;
+  --font-display: OBOSDisplay, __OBOSDisplay_Fallback, sans-serif;
+
+  /*** Widths ***/
+  --container-width: 92rem;
+  --container-gutter-width: 1rem;
+
+  /*** Colors ***/
+  --color-black: #333;
+  --color-white: #fff;
+  --color-gray: #818181;
+  --color-gray-dark: #595959;
+  --color-gray-light: #e6e6e6;
+  --color-gray-lightest: #f1f1f1;
+  --color-sky: #bedfec;
+  --color-sky-light: #deeff5;
+  --color-sky-lightest: #ebf5f9;
+  --color-mint: #cdece2;
+  --color-mint-light: #e6f5f0;
+  --color-mint-lightest: #f0f9f6;
+  --color-blue: #0047ba;
+  --color-blue-light: #bedfec;
+  --color-blue-lightest: #deeff5;
+  --color-blue-dark: #002169;
+  --color-green: #008761;
+  --color-green-dark: #00524c;
+  --color-green-light: #cdece2;
+  --color-green-lightest: #e6f5f0;
+  --color-red: #c0385d;
+  --color-red-light: #faedef;
+  --color-orange: #e8a74a;
+  --color-orange-light: #f8e5c9;
+  --color-yellow: #fff5d2;
+}
+
+@layer base {
+  @font-face {
+    font-family: OBOSText;
+    font-weight: 400;
+    font-style: normal;
+    src: url("https://www.obos.no/fonts/OBOSText-Regular.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: OBOSText;
+    font-weight: 400;
+    font-style: italic;
+    src: url("https://www.obos.no/fonts/OBOSText-Italic.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: OBOSText;
+    font-weight: 500;
+    font-style: normal;
+    src: url("https://www.obos.no/fonts/OBOSText-Medium.woff2") format("woff2");
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: OBOSDisplay;
+    font-weight: 600; /* SemiBold */
+    font-style: normal;
+    src: url("https://www.obos.no/fonts/OBOSDisplay-SemiBold.woff2")
+      format("woff2");
+    font-display: swap;
+  }
+
+  html {
+    @apply text-black antialiased font-normal font-text;
+  }
+
+  b {
+    font-weight: 500;
+  }
+
+  strong {
+    font-weight: 500;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  ::selection {
+    @apply bg-mint text-black;
+  }
+}
+
+/*** Layout ***/
+@utility page-layout {
+  @apply flex flex-col min-h-screen;
+}
+
+@utility page-layout-main {
+  @apply bg-white grow;
+}
+
+@utility container {
+  @apply w-full px-(--container-gutter-width) mx-auto max-w-(--container-width);
+}
+
+@utility container-prose {
+  @apply w-full px-(--container-gutter-width) mx-auto;
+  max-width: 45.5rem;
+}
+
+/*** Typography styles ***/
+@utility heading-xl {
+  @apply font-display font-semibold text-[2.8125rem]/[3.625rem] lg:text-[3.9375rem]/[5.125rem];
+}
+
+@utility heading-l {
+  @apply font-display font-semibold text-[1.8125rem]/[2.75rem] lg:text-[2.25rem]/[3.5rem];
+}
+
+@utility heading-m {
+  @apply font-text font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
+}
+
+@utility heading-s {
+  @apply font-text font-medium text-[1.1875rem]/[1.1875rem] lg:text-[1.3125rem]/[2.125rem];
+}
+
+@utility heading-xs {
+  @apply font-text font-medium text-[1.125rem]/[1.75rem] lg:text-[1.1875rem]/[1.9375rem];
+}
+
+@utility paragraph {
+  @apply text-[1rem]/[1.625rem];
+}
+
+@utility lead {
+  @apply font-medium text-[1.4375rem]/[2.25rem] lg:text-[1.625rem]/[2.5625rem];
+}
+
+@utility blockquote {
+  @apply font-medium italic grid grid-cols-[3rem_1fr] gap-x-[0.4375rem] pt-4 text-[1.625rem]/[2.5625rem] lg:text-[1.4375rem]/[2.25rem] before:text-[4.6875rem]/[1.6875rem] before:font-display before:not-italic before:content-["“"];
+}
+
+@utility description {
+  @apply text-[0.875rem]/[1.375rem] lg:text-[0.875rem]/[1.4375rem];
+}
+
+/* Focus styles */
+@utility outline-focus {
+  @apply outline-2 outline-black;
+}
+
+@utility outline-focus-offset {
+  @apply outline-focus outline-offset-2;
+}
+
+@utility outline-focus-inset {
+  @apply outline-focus -outline-offset-4;
+}
+
+@utility ring-focus {
+  @apply ring-2 ring-black;
+}
+
+@utility ring-focus-offset {
+  @apply ring-focus ring-offset-2;
+}

package/fonts/font-fallback.js

@@ -1 +0,0 @@
-module.exports = {"OBOSText":{"font-family":"\"__OBOSText_Fallback\"","src":"local(\"Arial\")","size-adjust":"100%","ascent-override":"94%","descent-override":"26%","line-gap-override":"0%"},"OBOSDisplay":{"font-family":"\"__OBOSDisplay_Fallback\"","src":"local(\"Arial\")","size-adjust":"100%","ascent-override":"94%","descent-override":"26%","line-gap-override":"0%"}}

package/tailwind-base.cjs

@@ -1,724 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-const plugin = require('tailwindcss/plugin');
-const fontFallbacks = require('./fonts/font-fallback');
-
-const fontDeclarations = {
-  OBOSText: [
-    {
-      fontWeight: 400,
-      fontStyle: 'normal',
-      url: 'https://www.obos.no/fonts/OBOSText-Regular.woff2',
-    },
-    {
-      fontWeight: 400,
-      fontStyle: 'italic',
-      url: 'https://www.obos.no/fonts/OBOSText-Italic.woff2',
-    },
-    {
-      fontWeight: 500,
-      fontStyle: 'normal',
-      url: 'https://www.obos.no/fonts/OBOSText-Medium.woff2',
-    },
-  ],
-  OBOSDisplay: [
-    {
-      url: 'https://www.obos.no/fonts/OBOSDisplay-SemiBold.woff2',
-    },
-  ],
-};
-
-/**
- * Styles for typography that are reused in both component classes and prose (through the tailwind typography plugin)
- */
-const typography = {
-  headingXlText: {
-    fontWeight: 'semibold',
-    small: {
-      fontSize: '2.8125rem',
-      lineHeight: '3.625rem',
-    },
-    large: {
-      fontSize: '3.9375rem',
-      lineHeight: '5.125rem',
-    },
-  },
-  headingLText: {
-    fontWeight: 'semibold',
-    small: {
-      fontSize: '1.8125rem',
-      lineHeight: '2.75rem',
-    },
-    large: {
-      fontSize: '2.25rem',
-      lineHeight: '3.5rem',
-    },
-  },
-  headingMText: {
-    fontWeight: 'medium',
-    small: {
-      fontSize: '1.4375rem',
-      lineHeight: '2.25rem',
-    },
-    large: {
-      fontSize: '1.625rem',
-      lineHeight: '2.5625rem',
-    },
-  },
-  headingSText: {
-    fontWeight: 'medium',
-    small: {
-      fontSize: '1.1875rem',
-      lineHeight: '1.1875rem',
-    },
-    large: {
-      fontSize: '1.3125rem',
-      lineHeight: '2.125rem',
-    },
-  },
-  headingXsText: {
-    fontWeight: 'medium',
-    small: {
-      fontSize: '1.125rem',
-      lineHeight: '1.75rem',
-    },
-    large: {
-      fontSize: '1.1875rem',
-      lineHeight: '1.9375rem',
-    },
-  },
-  paragraphText: {
-    fontSize: '1rem', // 1rem is the base font size, which is obviously the default size. But it is set explicitly here to make it easier to configure in the future, if this size changes.
-    lineHeight: '1.625rem',
-  },
-  leadText: {
-    fontWeight: 'medium',
-    small: {
-      fontSize: '1.4375rem',
-      lineHeight: '2.25rem',
-    },
-    large: {
-      fontSize: '1.625rem',
-      lineHeight: '2.5625rem',
-    },
-  },
-  blockquoteText: {
-    fontWeight: 'medium',
-    display: 'grid',
-    gridTemplateColumns: '3rem 1fr',
-    columnGap: '0.4375rem',
-    small: {
-      fontSize: '1.4375rem',
-      lineHeight: '2.25rem',
-    },
-    large: {
-      fontSize: '1.625rem',
-      lineHeight: '2.5625rem',
-    },
-    before: {
-      content: '"“"',
-      fontFamily: 'OBOSDisplay',
-      fontSize: '4.6875rem',
-      lineHeight: '1.6875rem',
-      fontWeight: '400',
-      fontStyle: 'normal',
-    },
-  },
-  descriptionText: {
-    small: {
-      fontSize: '0.875rem',
-      lineHeight: '1.4375rem',
-    },
-    large: {
-      fontSize: '0.875rem',
-      lineHeight: '1.375rem',
-    },
-  },
-};
-
-/**
- * @param {boolean} options.includeFontFallback
- * @param {boolean} options.legacyV1Compatibility
- */
-module.exports = (options = {}) => {
-  options.includeFontFallback ??= true;
-  options.legacyV1Compatibility ??= false;
-
-  const v1CompatibilityPlugins = [];
-
-  if (options.legacyV1Compatibility) {
-    v1CompatibilityPlugins.push(
-      button,
-      checkbox,
-      radio,
-      snackbar,
-      require('@tailwindcss/aspect-ratio'),
-    );
-  }
-
-  return {
-    plugins: [
-      ...v1CompatibilityPlugins,
-      require('@tailwindcss/typography'),
-      require('tailwindcss-animate'),
-      plugin(({ addBase, addComponents, theme }) => {
-        addBase({
-          html: {
-            '@apply text-black antialiased font-normal font-text': {},
-          },
-          b: {
-            fontWeight: 500,
-          },
-          strong: {
-            fontWeight: 500,
-          },
-          a: {
-            'text-decoration': 'underline',
-          },
-          '::selection': { '@apply bg-mint text-black': {} },
-          ':root': {
-            '--gm-container-width': '92rem',
-            '--gm-container-gutter-width': '1rem',
-
-            '--gm-color-black': '#333',
-            '--gm-color-white': '#fff',
-
-            '--gm-color-gray': '#818181',
-            '--gm-color-gray-dark': '#595959',
-            '--gm-color-gray-light': '#e6e6e6',
-            '--gm-color-gray-lightest': '#f1f1f1',
-
-            '--gm-color-sky': '#bedfec',
-            '--gm-color-sky-light': '#deeff5',
-            '--gm-color-sky-lightest': '#ebf5f9',
-
-            '--gm-color-mint': '#cdece2',
-            '--gm-color-mint-light': '#e6f5f0',
-            '--gm-color-mint-lightest': '#f0f9f6',
-
-            '--gm-color-blue': '#0047ba',
-            '--gm-color-blue-light': '#bedfec',
-            '--gm-color-blue-lightest': '#deeff5',
-            '--gm-color-blue-dark': '#002169',
-
-            '--gm-color-green': '#008761',
-            '--gm-color-green-dark': '#00524c',
-            '--gm-color-green-light': '#cdece2',
-            '--gm-color-green-lightest': '#e6f5f0',
-
-            '--gm-color-red': '#c0385d',
-            '--gm-color-red-light': '#faedef',
-
-            '--gm-color-orange': '#e8a74a',
-            '--gm-color-orange-light': '#f8e5c9',
-
-            '--gm-color-yellow': '#fff5d2',
-          },
-        });
-
-        addComponents({
-          '.page-layout': {
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: '100vh',
-          },
-          '.page-layout-main': {
-            backgroundColor: theme('colors.white'),
-            flexGrow: '1',
-          },
-          '.container': {
-            width: '100%',
-            paddingLeft: 'var(--gm-container-gutter-width)',
-            paddingRight: 'var(--gm-container-gutter-width)',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            maxWidth: 'var(--gm-container-width)',
-          },
-          '.container-prose': {
-            width: '100%',
-            paddingLeft: 'var(--gm-container-gutter-width)',
-            paddingRight: 'var(--gm-container-gutter-width)',
-            marginLeft: 'auto',
-            marginRight: 'auto',
-            maxWidth: '45.5rem',
-          },
-        });
-      }),
-
-      plugin(({ addBase, addComponents }) => {
-        const {
-          headingXlText,
-          headingLText,
-          headingMText,
-          headingSText,
-          headingXsText,
-          paragraphText,
-          leadText,
-          blockquoteText,
-          descriptionText,
-        } = typography;
-
-        // This is tailwind syntax for setting both the font-size and the line-height
-        const headingXl = `@apply font-display font-${headingXlText.fontWeight} text-[${headingXlText.small.fontSize}]/[${headingXlText.small.lineHeight}] lg:text-[${headingXlText.large.fontSize}]/[${headingXlText.large.lineHeight}]`;
-        const headingL = `@apply font-display font-${headingLText.fontWeight} text-[${headingLText.small.fontSize}]/[${headingLText.small.lineHeight}] lg:text-[${headingLText.large.fontSize}]/[${headingLText.large.lineHeight}]`;
-        const headingM = `@apply font-text font-${headingMText.fontWeight} text-[${headingMText.small.fontSize}]/[${headingMText.small.lineHeight}] lg:text-[${headingMText.large.fontSize}]/[${headingMText.large.lineHeight}]`;
-        const headingS = `@apply font-text font-${headingSText.fontWeight} text-[${headingSText.small.fontSize}]/[${headingSText.small.lineHeight}] lg:text-[${headingSText.large.fontSize}]/[${headingSText.large.lineHeight}]`;
-        const headingXs = `@apply font-text font-${headingXsText.fontWeight} text-[${headingXsText.small.fontSize}]/[${headingXsText.small.lineHeight}] lg:text-[${headingXsText.large.fontSize}]/[${headingXsText.large.lineHeight}]`;
-
-        const paragraph = `@apply text-[${paragraphText.fontSize}]/[${paragraphText.lineHeight}]`;
-        const lead = `@apply font-medium text-[${leadText.small.fontSize}]/[${leadText.small.lineHeight}] lg:text-[${leadText.large.fontSize}]/[${leadText.large.lineHeight}]`;
-
-        const blockquote = `@apply font-${blockquoteText.fontWeight} italic grid grid-cols-[${blockquoteText.gridTemplateColumns.split(' ').join('_')}] gap-x-[${blockquoteText.columnGap}] pt-4
-         text-[${blockquoteText.large.fontSize}]/[${blockquoteText.large.lineHeight}] lg:text-[${blockquoteText.small.fontSize}]/[${blockquoteText.small.lineHeight}]
-         before:text-[${blockquoteText.before.fontSize}]/[${blockquoteText.before.lineHeight}] before:content-[${blockquoteText.before.content}] before:font-display before:not-italic`;
-
-        const description = `@apply text-[${descriptionText.large.fontSize}]/[${descriptionText.large.lineHeight}] lg:text-[${descriptionText.small.fontSize}]/[${descriptionText.small.lineHeight}]`;
-
-        if (options.legacyV1Compatibility) {
-          addBase({
-            h1: {
-              [headingXl]: {},
-            },
-            h2: {
-              [headingL]: {},
-            },
-            h3: {
-              [headingM]: {},
-            },
-            h4: {
-              [headingS]: {},
-            },
-          });
-        }
-
-        addComponents({
-          /** @deprecated Will be replaced by heading-xl */
-          '.h1': {
-            [headingXl]: {},
-          },
-          /** @deprecated Will be replaced by heading-l */
-          '.h2': {
-            [headingL]: {},
-          },
-          /** @deprecated Will be replaced by heading-m */
-          '.h3': {
-            [headingM]: {},
-          },
-          /** @deprecated Will be replaced by heading-s */
-          '.h4': {
-            [headingS]: {},
-          },
-          '.heading-xl': {
-            [headingXl]: {},
-          },
-          '.heading-l': {
-            [headingL]: {},
-          },
-          '.heading-m': {
-            [headingM]: {},
-          },
-          '.heading-s': {
-            [headingS]: {},
-          },
-          '.heading-xs': {
-            [headingXs]: {},
-          },
-          '.paragraph': {
-            [paragraph]: {},
-          },
-          '.lead': {
-            [lead]: {},
-          },
-          '.blockquote': {
-            [blockquote]: {},
-          },
-          '.description': {
-            [description]: {},
-          },
-          /** Standard black focus outline */
-          '.outline-focus': {
-            '@apply outline outline-2 outline-black': {},
-          },
-          /** Standard black focus outline with offset */
-          '.outline-focus-offset': {
-            '@apply outline-focus outline-offset-2': {},
-          },
-          /** Standard black focus outline with negative offset (inset) */
-          '.outline-focus-inset': {
-            '@apply outline-focus -outline-offset-4': {},
-          },
-          /** Standard black focus ring */
-          '.ring-focus': {
-            '@apply ring-2 ring-black': {},
-          },
-          /** Standard black focus ring with offset */
-          '.ring-focus-offset': {
-            '@apply ring-focus ring-offset-2': {},
-          },
-        });
-      }),
-      plugin(({ addBase }) => {
-        addBase(
-          Object.entries(fontDeclarations).flatMap(
-            ([fontFamily, fontFamilyDeclarations]) =>
-              fontFamilyDeclarations.map((font) => ({
-                '@font-face': {
-                  fontFamily,
-                  fontWeight: font.fontWeight,
-                  fontStyle: font.fontStyle,
-                  src: `url('${font.url}') format('woff2')`,
-                  fontDisplay: 'swap',
-                },
-              })),
-          ),
-        );
-
-        if (options.includeFontFallback) {
-          addBase(
-            Object.values(fontFallbacks).map((fontFallback) => ({
-              '@font-face': fontFallback,
-            })),
-          );
-        }
-      }),
-    ],
-    theme: {
-      colors: {
-        inherit: 'inherit',
-        current: 'currentColor',
-        transparent: 'transparent',
-        black: 'var(--gm-color-black)',
-        white: 'var(--gm-color-white)',
-        gray: {
-          DEFAULT: 'var(--gm-color-gray)',
-          dark: 'var(--gm-color-gray-dark)',
-          light: 'var(--gm-color-gray-light)',
-          lightest: 'var(--gm-color-gray-lightest)',
-        },
-        sky: {
-          DEFAULT: 'var(--gm-color-sky)',
-          light: 'var(--gm-color-sky-light)',
-          lightest: 'var(--gm-color-sky-lightest)',
-        },
-        mint: {
-          DEFAULT: 'var(--gm-color-mint)',
-          light: 'var(--gm-color-mint-light)',
-          lightest: 'var(--gm-color-mint-lightest)',
-        },
-        blue: {
-          // OBOS Blue/Primary brand
-          DEFAULT: 'var(--gm-color-blue)',
-          // OBOS Ocean
-          dark: 'var(--gm-color-blue-dark)',
-          light: 'var(--gm-color-blue-light)',
-          lightest: 'var(--gm-color-blue-lightest)',
-        },
-        green: {
-          // OBOS Green/Primary brand
-          DEFAULT: 'var(--gm-color-green)',
-          // OBOS Forest
-          dark: 'var(--gm-color-green-dark)',
-          light: 'var(--gm-color-green-light)',
-          lightest: 'var(--gm-color-green-lightest)',
-        },
-        red: {
-          DEFAULT: 'var(--gm-color-red)',
-          // error red
-          light: 'var(--gm-color-red-light)',
-        },
-        orange: {
-          DEFAULT: 'var(--gm-color-orange)',
-          light: 'var(--gm-color-orange-light)',
-        },
-        yellow: {
-          // open house
-          DEFAULT: 'var(--gm-color-yellow)',
-        },
-      },
-      fontFamily: {
-        text: [
-          'OBOSText',
-          options.includeFontFallback && fontFallbacks.OBOSText['font-family'],
-          'sans-serif',
-        ].filter((f) => f),
-        display: [
-          'OBOSDisplay',
-          options.includeFontFallback &&
-            fontFallbacks.OBOSDisplay['font-family'],
-          'sans-serif',
-        ],
-        // OBOS doesn't have monospaced font, so we keep Tailwind's default here
-        mono: defaultTheme.fontFamily.mono,
-      },
-      extend: {
-        maxWidth: {
-          // Override Tailwinds default prose width of 60 chars.
-          prose: '696px',
-        },
-        width: {
-          prose: '696px',
-        },
-        spacing: {
-          18: '4.5rem',
-        },
-        borderColor: options.legacyV1Compatibility
-          ? ({ theme }) => ({
-              DEFAULT: theme('colors.gray.light', 'currentColor'),
-            })
-          : undefined,
-        typography: (theme) => ({
-          DEFAULT: {
-            css: {
-              '--tw-prose-headings': 'inherit',
-              '--tw-prose-lead': 'inherit',
-              '--tw-prose-links': 'inherit',
-              '--tw-prose-quotes': 'inherit',
-              '--tw-prose-counters': theme('colors.black'),
-              '--tw-prose-bullets': theme('colors.black'),
-              color: theme('colors.black'),
-              maxWidth: theme('maxWidth.prose'),
-              a: {
-                fontWeight: 400,
-              },
-              h1: {
-                fontFamily: 'OBOSDisplay',
-                fontWeight: theme('fontWeight.semibold'),
-                ...typography.headingXlText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.headingXlText.large,
-                },
-              },
-              h2: {
-                fontFamily: 'OBOSDisplay',
-                fontWeight: theme('fontWeight.semibold'),
-                ...typography.headingLText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.headingLText.large,
-                },
-              },
-              h3: {
-                fontFamily: 'OBOSText',
-                fontWeight: theme('fontWeight.medium'),
-                ...typography.headingMText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.headingMText.large,
-                },
-              },
-              h4: {
-                fontFamily: 'OBOSText',
-                fontWeight: theme('fontWeight.medium'),
-                ...typography.headingSText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.headingSText.large,
-                },
-              },
-              h5: {
-                fontFamily: 'OBOSText',
-                fontWeight: theme('fontWeight.bold'),
-                ...typography.headingXsText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.headingXsText.large,
-                },
-              },
-              li: {
-                ...typography.paragraphText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.paragraphText.large,
-                },
-              },
-              p: {
-                ...typography.paragraphText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.paragraphText.large,
-                },
-              },
-              blockquote: {
-                // Reset defaults:
-                marginBottom: 'unset',
-                padding: 'unset',
-                border: 'unset',
-                fontWeight: theme('fontWeight.medium'),
-                fontStyle: 'italic',
-                display: typography.blockquoteText.display,
-                gridTemplateColumns:
-                  typography.blockquoteText.gridTemplateColumns,
-                columnGap: typography.blockquoteText.columnGap,
-                paddingTop: '1rem',
-                ...typography.blockquoteText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.blockquoteText.large,
-                },
-              },
-              'blockquote::before': {
-                ...typography.blockquoteText.before,
-              },
-              '[class~="lead"]': {
-                fontWeight: theme('fontWeight.medium'),
-                ...typography.leadText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.leadText.large,
-                },
-              },
-              '[class~="description"]': {
-                ...typography.descriptionText.small,
-                '@media (min-width: theme("screens.lg"))': {
-                  ...typography.descriptionText.large,
-                },
-              },
-            },
-          },
-        }),
-      },
-    },
-  };
-};
-
-// These custom components are only used for v1 compat
-const button = plugin(({ addComponents, theme }) => {
-  const hoverLoadingBgColor = 'rgba(0, 0, 0, 0.1)';
-
-  addComponents({
-    '.button': {
-      // The Tailwind utilities we use for focus styling are kinda hard to "translate", so using the @apply utility here, even though mixing styles are meh...
-      '@apply focus:outline-none focus-visible:ring-2 focus-visible:ring-black ring-offset-2':
-        {},
-      position: 'relative',
-      textDecorationLine: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: theme('spacing.3'),
-      border: '2px solid',
-      padding: `${theme('spacing.2')} ${theme('spacing.6')}`,
-      borderRadius: '0.75rem',
-      transition: `all 200ms ${theme('transitionTimingFunction.DEFAULT')}`,
-      fontWeight: theme('fontWeight.medium'),
-      width: 'fit-content',
-      '&:disabled': {
-        backgroundColor: theme('colors.gray.light'),
-        borderColor: theme('colors.gray.light'),
-        color: theme('colors.black'),
-        pointerEvents: 'none',
-      },
-      '&:hover': {
-        borderRadius: '0.375rem',
-      },
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        backgroundColor: 'transparent',
-        display: 'block',
-        top: '-2px',
-        left: '-2px',
-        right: '-2px',
-        bottom: '-2px',
-        borderRadius: 'inherit',
-      },
-      // adds a shade on the button when hovered
-      // ideally this would be solved by just darkening the button background,
-      // but that doesn't really work since some of the button variations have transparent backgrounds
-      '&:hover::after': {
-        backgroundColor: hoverLoadingBgColor,
-        transition: `all 200ms ${theme('transitionTimingFunction.DEFAULT')}`,
-      },
-      // We use aria-busy to indicate loading state
-      '&[aria-busy="true"] > *': {
-        visibility: 'hidden',
-      },
-      '&[aria-busy="true"]::after': {
-        backgroundColor: hoverLoadingBgColor,
-      },
-    },
-  });
-});
-
-const radio = plugin(({ addComponents, theme }) => {
-  addComponents({
-    '.radio': {
-      // hide the native radio input
-      appearance: 'none',
-      // not removed via appeareance
-      margin: 0,
-      height: '1.25rem',
-      width: '1.25rem',
-      borderRadius: '50%',
-      border: `2px solid ${theme('colors.gray.dark')}`,
-      cursor: 'pointer',
-      // use grid to handle the checked:before styles
-      display: 'inline-grid',
-      placeContent: 'center',
-      // Prevent flex container from altering the size of the radio button
-      flex: '0 0 auto',
-      // magic number that tries to keep the input horizontally centered in relation to the first line of the label text
-      transform: 'translateY(0.095em)',
-      '&:checked': {
-        borderColor: theme('colors.green.DEFAULT'),
-      },
-      '&:focus-visible': {
-        outline: '1px solid currentColor',
-        outlineOffset: '4px',
-      },
-      '&::before': {
-        content: '""',
-        display: 'block',
-        borderRadius: '50%',
-        transform: 'scale(0)',
-        width: '0.65em',
-        height: '0.65em',
-        transition: '120ms transform ease-in-out',
-        boxShadow: `inset 1em 1em ${theme('colors.green.DEFAULT')}`,
-        /* Windows High Contrast Mode */
-        backgroundColor: 'CanvasText',
-      },
-      '&:checked::before': {
-        transform: 'scale(1)',
-      },
-    },
-  });
-});
-
-const checkbox = plugin(({ addComponents, theme }) => {
-  addComponents({
-    '.checkbox': {
-      '&::before': {
-        content: '""',
-        width: '0.65em',
-        height: '0.65em',
-        transform: 'scale(0)',
-        transition: '120ms transform ease-in-out',
-        backgroundColor: theme('colors.white'),
-        'box-shadow': 'inset 1em 1em currentColor',
-        'clip-path':
-          'polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%)',
-      },
-      '&:checked::before': {
-        transform: 'scale(1)',
-      },
-    },
-  });
-});
-
-const snackbar = plugin(({ addComponents, theme }) => {
-  addComponents({
-    '.snackbar': {
-      'grid-template-columns': 'min-content auto',
-      'grid-template-areas': '"icon header" ". content" "actions actions"',
-    },
-    [`@media(min-width: ${theme('screens.md')})`]: {
-      '.snackbar': {
-        'grid-template-columns': 'min-content auto auto',
-        'grid-template-areas': '"icon header actions" ". content content"',
-      },
-    },
-    '.snackbar-icon': {
-      'grid-area': 'icon',
-    },
-    '.snackbar-header': {
-      'grid-area': 'header',
-    },
-    '.snackbar-content': {
-      'grid-area': 'content',
-    },
-    '.snackbar-actions': {
-      'grid-area': 'actions',
-    },
-  });
-});