feat!: upgrade to Garden theming v9 (#242)

BREAKING CHANGE: Utility colors now map to the new v9 [color](https://garden.zendesk.com/design/color) palette - Expanded to support light & dark modes. See [theme colors](https://garden.zendesk.com/components/theme-object#colors) for details. - No longer offers secondary color muted (i.e. `royal-M400`) variants - Adds new `opacity` utilities that correspond to v9 [theme opacity](https://garden.zendesk.com/components/theme-object#opacity)
zendeskgarden · Oct 3, 2024 · b54e338 · b54e338
1 parent 5fdd693
commit b54e338
Show file tree

Hide file tree

Showing 20 changed files with 1,385 additions and 467 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [4.0.0-next.0](https://github.com/zendeskgarden/tailwindcss/compare/v3.1.1...v4.0.0-next.0) (2024-04-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgrade to Garden theming v9 (pre-release) (#223)
+
+### Features
+
+* upgrade to Garden theming v9 (pre-release) ([#223](https://github.com/zendeskgarden/tailwindcss/issues/223)) ([0e91f68](https://github.com/zendeskgarden/tailwindcss/commit/0e91f687b6fe84344d622c6cbfda411d86d515ff))
+
+
+### Bug Fixes
+
+* **deps:** update dependency postcss to v8.4.31 [security] ([#181](https://github.com/zendeskgarden/tailwindcss/issues/181)) ([1c76ffd](https://github.com/zendeskgarden/tailwindcss/commit/1c76ffdb512f3d4027d1324a7f5b9efa0c38b276))
+* **deps:** update dependency styled-components to v6 ([#179](https://github.com/zendeskgarden/tailwindcss/issues/179)) ([4a1f89e](https://github.com/zendeskgarden/tailwindcss/commit/4a1f89e9617b033dd1889a43fca5033d3960d5e1))
+
 ### [3.1.1](https://github.com/zendeskgarden/tailwindcss/compare/v3.1.0...v3.1.1) (2023-07-20)
 
 ## [3.1.0](https://github.com/zendeskgarden/tailwindcss/compare/v3.0.1...v3.1.0) (2023-06-16)

diff --git a/README.md b/README.md
@@ -37,7 +37,11 @@ Apply Garden design tokens using
 [Tailwind utility classes](https://tailwindcss.com/docs/utility-first).
 
 ```html
-<img class="rounded-full h-8 w-8 border border-green-600" src="avatar.png" alt="Avatar" />
+<img
+  class="rounded-full h-8 w-8 border border-mint-500 dark:border-mint-400"
+  src="avatar.png"
+  alt="Avatar"
+/>
 ```
 
 ### Class Composition with `@apply`
@@ -49,7 +53,8 @@ for more advanced functionality like [CSS modules](https://github.com/css-module
 
 ```css
 .title {
-  @apply text-grey-600;
+  @apply text-grey-900;
+  @apply dark:text-grey-300;
   @apply text-sm;
   @apply px-4;
   @apply font-light;

diff --git a/example/README.md b/example/README.md
@@ -15,5 +15,3 @@ technologies and techniques to apply Garden design tokens with Tailwind.
 - [Tailwind CSS](https://tailwindcss.com/) and the
   [@zendeskgarden/tailwindcss](https://github.com/zendeskgarden/tailwindcss) plugin
 - [CSS Modules](https://github.com/css-modules/css-modules) for component scoped styles
-- [focus-visible polyfills](https://github.com/csstools/postcss-focus-visible)
-  for `:focus-visible` support across browsers
diff --git a/example/package.json b/example/package.json
@@ -14,27 +14,29 @@
     "test:ci": "npm run -- format --check && npm run lint"
   },
   "dependencies": {
-    "@zendeskgarden/tailwindcss": "3.1.1",
+    "@zendeskgarden/react-forms": "9.0.0",
+    "@zendeskgarden/react-theming": "9.0.0",
+    "@zendeskgarden/react-typography": "9.0.0",
+    "@zendeskgarden/tailwindcss": "4.0.0-next.0",
     "classnames": "2.5.1",
-    "focus-visible": "5.2.1",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "styled-components": "6.1.13"
   },
   "devDependencies": {
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react-swc": "3.7.0",
     "@zendeskgarden/eslint-config": "43.0.0",
     "@zendeskgarden/scripts": "2.4.1",
-    "@zendeskgarden/svg-icons": "7.2.0",
-    "@zendeskgarden/tailwindcss": "3.1.1",
+    "@zendeskgarden/svg-icons": "7.3.0",
+    "@zendeskgarden/tailwindcss": "4.0.0-next.0",
     "autoprefixer": "10.4.20",
     "envalid": "8.0.0",
     "eslint": "9.9.0",
     "eslint-config-prettier": "9.1.0",
     "markdownlint-cli": "0.41.0",
     "postcss": "8.4.41",
-    "postcss-focus-visible": "10.0.0",
     "prettier": "3.3.3",
     "prettier-package-json": "2.8.0",
     "tailwindcss": "3.4.10",

diff --git a/example/postcss.config.js b/example/postcss.config.js
@@ -8,7 +8,6 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
-    'postcss-focus-visible': {},
     autoprefixer: {}
   }
 };
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -5,7 +5,12 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
+import { DEFAULT_THEME, IGardenTheme, ThemeProvider } from '@zendeskgarden/react-theming';
+import { Field, Toggle } from '@zendeskgarden/react-forms';
+import React, { useLayoutEffect, useState } from 'react';
+import IconDark from '@zendeskgarden/svg-icons/src/16/moon-stroke.svg?react';
+import IconLight from '@zendeskgarden/svg-icons/src/16/sun-stroke.svg?react';
+import { Span } from '@zendeskgarden/react-typography';
 import WordmarkAnswerBot from '@zendeskgarden/svg-icons/src/26/answer-bot.svg?react';
 
 import { Action, Message } from './components/Message';
@@ -16,6 +21,50 @@ import { Widget } from './components/Widget';
 
 import styles from './app.module.css';
 
+const ColorSchemeToggle: React.FC = () => {
+  const [checked, setChecked] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
+  const theme = {
+    ...DEFAULT_THEME,
+    colors: {
+      ...DEFAULT_THEME.colors,
+      base: checked ? 'dark' : 'light'
+    }
+  } as IGardenTheme;
+
+  useLayoutEffect(() => {
+    if (checked) {
+      document.documentElement.dataset.scheme = 'dark';
+    } else {
+      document.documentElement.dataset.scheme = 'light';
+    }
+  }, [checked]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Field>
+        <Span>
+          <Span.StartIcon>
+            <IconLight />
+          </Span.StartIcon>
+        </Span>
+        <Toggle
+          checked={checked}
+          onChange={() => {
+            setChecked(!checked);
+          }}
+        >
+          <Field.Label hidden>Color mode</Field.Label>
+        </Toggle>
+        <Span>
+          <Span.Icon className="ml-2">
+            <IconDark />
+          </Span.Icon>
+        </Span>
+      </Field>
+    </ThemeProvider>
+  );
+};
+
 const App: React.FC = () => (
   <div className="py-4 px-2">
     <Widget title="Help">
@@ -69,6 +118,9 @@ const App: React.FC = () => (
       <h1 className="text-3xl leading-3xl font-semibold mb-6">
         Zendesk Garden Tailwind CSS Example
       </h1>
+      <div className="mb-5">
+        <ColorSchemeToggle />
+      </div>
       <p className="mb-5">
         This is a mock implementation using <a href="https://tailwindcss.com/">Tailwind CSS</a> and
         the <a href="https://github.com/zendeskgarden/tailwindcss">@zendeskgarden/tailwindcss</a>{' '}

diff --git a/example/src/app.module.css b/example/src/app.module.css
@@ -1,4 +1,5 @@
 .answer-bot {
-  @apply fill-kale-700;
+  @apply fill-kale-900;
   color: #d6eef1;
+  @apply dark:text-kale-500;
 }
diff --git a/example/src/components/Message/message.module.css b/example/src/components/Message/message.module.css
@@ -2,10 +2,12 @@
   padding-top: 6px;
   padding-bottom: 6px;
   @apply bg-grey-200;
-  @apply text-grey-800;
+  @apply text-grey-900;
   @apply rounded-4;
   @apply px-4;
   @apply mb-2;
+  @apply dark:bg-grey-800;
+  @apply dark:text-white;
 }
 
 .message--maker {
@@ -14,7 +16,7 @@
 
 .message--user {
   @apply self-end;
-  @apply bg-teal-600;
+  @apply bg-teal-700;
   @apply text-white;
 }
 
@@ -32,30 +34,35 @@
   @apply bg-white;
   @apply border;
   @apply border-grey-300;
-  @apply text-blue-600;
+  @apply text-blue-700;
   @apply leading-lg;
   @apply px-2;
   @apply py-2;
   @apply transition-all;
   @apply duration-75;
   @apply ease-in-out;
   @apply relative;
+  @apply dark:bg-grey-1000;
+  @apply dark:border-grey-700;
+  @apply dark:text-white;
 }
 
 .action:hover {
-  @apply text-blue-700;
-  @apply bg-blue-600;
+  @apply text-blue-800;
+  @apply bg-blue-700;
   @apply bg-opacity-10;
-  @apply border-blue-600;
+  @apply border-blue-700;
   @apply z-10;
+  @apply dark:text-white;
 }
 
 .action:active {
-  @apply text-blue-800;
-  @apply bg-blue-600;
+  @apply text-blue-900;
+  @apply bg-blue-700;
   @apply bg-opacity-20;
-  @apply border-blue-600;
+  @apply border-blue-700;
   @apply z-10;
+  @apply dark:text-white;
 }
 
 .action:not(:first-child) {
@@ -72,6 +79,7 @@
 
 .action:focus-visible {
   @apply shadow-inner;
-  @apply border-blue-600;
+  @apply border-blue-700;
   @apply z-10;
+  @apply dark:shadow-inner-dark;
 }
diff --git a/example/src/components/MessageGroup/messagegroup.module.css b/example/src/components/MessageGroup/messagegroup.module.css
@@ -16,7 +16,7 @@
 }
 
 .title {
-  @apply text-grey-600;
+  @apply text-grey-700;
   @apply text-sm;
   @apply px-4;
   @apply font-light;

diff --git a/example/src/components/Textarea/textarea.module.css b/example/src/components/Textarea/textarea.module.css
@@ -4,26 +4,31 @@
   height: 68px;
   @apply block;
   @apply rounded;
+  @apply bg-inherit;
   @apply border;
   @apply border-grey-300;
   @apply mx-5;
   @apply my-3;
   @apply px-3;
   @apply resize-none;
+  @apply text-inherit;
   @apply transition-all;
   @apply duration-150;
   @apply ease-in-out;
+  @apply dark:border-grey-800;
 }
 
 .textarea:focus, .textarea:hover, .textarea:active {
-  @apply border-blue-600;
+  @apply border-blue-700;
 }
 
 .textarea:focus {
   @apply outline-none;
   @apply shadow-outline;
+  @apply dark:shadow-outline-dark;
 }
 
 .textarea::placeholder {
   @apply text-grey-400;
+  @apply dark:text-grey-700;
 }
diff --git a/example/src/components/Widget/widget.module.css b/example/src/components/Widget/widget.module.css
@@ -5,10 +5,12 @@
   @apply rounded-2;
   @apply flex;
   @apply flex-col;
+  @apply dark:bg-grey-1000;
+  @apply dark:shadow-lg-dark;
 }
 
 .header {
-  @apply bg-teal-600;
+  @apply bg-teal-700;
   @apply text-white;
   @apply font-semibold;
   @apply py-2;
@@ -26,7 +28,7 @@
   width: 54px;
   @apply h-4;
   @apply block;
-  @apply text-grey-500;
+  @apply text-grey-600;
   @apply ml-5;
   @apply mb-3;
 }
diff --git a/example/src/index.css b/example/src/index.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  @apply dark:bg-grey-900;
+  @apply dark:text-white;
+}
+
+a {
+  @apply text-blue-700;
+  @apply dark:text-blue-600;
+}
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -8,11 +8,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
-/**
- * Configure polyfill for :focus-visible functionality
- */
-import 'focus-visible';
-
 /**
  * Include global Tailwind CSS utilities and Garden Bedrock styling
  */

diff --git a/example/tailwind.config.js b/example/tailwind.config.js
@@ -9,6 +9,7 @@ const gardenTailwindCSSPlugin = require('@zendeskgarden/tailwindcss');
 
 module.exports = {
   content: ['./src/**/*.{jsx,tsx}'],
+  darkMode: ['selector', '[data-scheme="dark"]'],
   theme: {
     extend: {
       borderRadius: theme => ({