feat: add tailwind theme package

CHANGELOG.md

@@ -5,15 +5,10 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.7.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.2...v1.7.0) (2023-06-06)
 
-
 ### Features
 
-* add cancel button to input type search ([#405](https://github.com/washingtonpost/wpds-ui-kit/issues/405)) ([e20e9ec](https://github.com/washingtonpost/wpds-ui-kit/commit/e20e9ecc64f98e7761486d2d55845e2cefac7834))
-* add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-ui-kit/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-ui-kit/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
-
-
-
-
+- add cancel button to input type search ([#405](https://github.com/washingtonpost/wpds-ui-kit/issues/405)) ([e20e9ec](https://github.com/washingtonpost/wpds-ui-kit/commit/e20e9ecc64f98e7761486d2d55845e2cefac7834))
+- add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-ui-kit/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-ui-kit/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
 
 ## [1.6.2](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.1...v1.6.2) (2023-05-24)
 

apps/vite-project/CHANGELOG.md

@@ -5,14 +5,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.7.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.2...v1.7.0) (2023-06-06)
 
-
 ### Features
 
-* add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-ui-kit/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-ui-kit/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
-
-
-
-
+- add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-ui-kit/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-ui-kit/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
 
 ## [1.6.2](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.1...v1.6.2) (2023-05-24)
 

apps/vite-v2-project/CHANGELOG.md

@@ -5,14 +5,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.7.0](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.2...v1.7.0) (2023-06-06)
 
-
 ### Features
 
-* add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-ui-kit/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-ui-kit/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
-
-
-
-
+- add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-ui-kit/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-ui-kit/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
 
 ## [1.6.2](https://github.com/washingtonpost/wpds-ui-kit/compare/v1.6.1...v1.6.2) (2023-05-24)
 

build.washingtonpost.com/CHANGELOG.md

@@ -5,14 +5,9 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.7.0](https://github.com/washingtonpost/wpds-docs/compare/v1.6.2...v1.7.0) (2023-06-06)
 
-
 ### Features
 
-* add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-docs/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-docs/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
-
-
-
-
+- add NavigationMenu component ([#408](https://github.com/washingtonpost/wpds-docs/issues/408)) ([1a2873f](https://github.com/washingtonpost/wpds-docs/commit/1a2873f674d3695dca0d9de96a4ca12caf8bb1c0))
 
 ## [1.6.2](https://github.com/washingtonpost/wpds-docs/compare/v1.6.1...v1.6.2) (2023-05-24)
 

build.washingtonpost.com/docs/resources/tools/tailwind-theme.mdx

@@ -0,0 +1,103 @@
+---
+order: 200
+title: Tailwind WPDS Theme
+description: A Tailwind CSS theme using WPDS tokens.
+kicker: Tools
+thumbnail: /img/resources/thumbnails/tools_tailwind.png
+imageTag: /img/resources/tools/tailwind.png
+publishDate: June 9, 2023
+---
+
+<br />
+
+## Installation
+
+Add tailwind to your project by following their specific [framework guides](https://tailwindcss.com/docs/installation/framework-guides).
+
+Install the theme package from npm
+
+```js
+npm install -D @washingtonpost/wpds-tailwind-theme;
+```
+
+<br />
+
+Add the theme to your tailwind.config.js. It's strongly recommended to override the default theme to prevent the accidental use of Tailwind's color variables and scale values. Tailwind's [preflight](https://tailwindcss.com/docs/preflight) base styles should be disabled.
+
+```jsx demoHeight="200"
+const WPDSTheme = require("@washingtonpost/wpds-tailwind-theme");
+
+module.exports = {
+  content: [
+   ...
+  ],
+  corePlugins: {
+    preflight: false,
+  },
+  theme: WPDSTheme,
+};
+```
+
+<br />
+
+Ensure that the WPDS fonts and css variables are available on the page if they are not already installed.
+
+```jsx
+// _app.js or other main script file
+
+//                     also available from @washingtonpost/wpds-ui-kit
+import { getCssText, globalStyles } from "@washingtonpost/wpds-theme";
+
+const style = document.createElement("style");
+// cssText contains the wpds css variables
+style.innerHTML = getCssText();
+document.head.appendChild(style);
+
+// global styles adds wpds fonts
+globalStyles();
+```
+
+---
+
+## Token Naming
+
+The following tokens are used from the WPDS.
+
+- color
+- size
+- fonts
+- fontSize
+- fontWeights
+- lineHeight
+- radii
+- shadow
+- z-index
+
+The wpds token names and scales for each value replace the Tailwind name and scale.
+
+For example when setting lineHeight `<p class="leading-normal">` becomes `<p class="leading-150">`
+
+---
+
+## Example
+
+<Box css={{ display: "flex", justifyContent: "center" }}>
+  <div>
+    <h1 className="font-headline text-200 text-primary mt-0 mb-025">
+      {`Headline`}
+    </h1>
+    <h2 className="font-subhead font-light text-150 mt-0 mb-025">
+      {`Subheadline`}
+    </h2>
+    <p className="font-body text-100 mt-0 mb-025">Body text</p>
+    <div className="font-meta text-075 text-accessible mb-100">Meta text</div>
+  </div>
+</Box>
+```jsx
+<h1 className="font-headline text-200 text-primary mt-0 mb-025">Headline</h1>
+<h2 className="font-subhead font-light text-150 leading-200 mt-0 mb-025">
+  Subheadline
+</h2>
+<p className="font-body text-100 mt-0 mb-025">Body text</p>
+<div className="font-meta text-075 text-accessible mb-100">Meta text</div>
+```

build.washingtonpost.com/package.json

@@ -26,6 +26,7 @@
     "@washingtonpost/wpds-accordion": "1.7.0",
     "@washingtonpost/wpds-assets": "1.20.0",
     "@washingtonpost/wpds-kitchen-sink": "1.7.0",
+    "@washingtonpost/wpds-tailwind-theme": "1.7.0",
     "@washingtonpost/wpds-ui-kit": "1.7.0",
     "fuse.js": "^6.6.2",
     "gray-matter": "^4.0.2",
@@ -54,15 +55,18 @@
     "@types/lz-string": "^1.3.34",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.38",
+    "autoprefixer": "^10.4.13",
     "babel-plugin-extract-react-types": "^0.1.14",
     "eslint": "8.6.0",
     "eslint-config-next": "^12.2.4",
     "extract-react-types": "^0.30.2",
     "glob": "^7.2.0",
     "husky": "^7.0.0",
     "next-remote-watch": "^2.0.0",
+    "postcss": "^8.4.21",
     "prettier": "^2.5.1",
-    "react-docgen-typescript": "^2.2.2"
+    "react-docgen-typescript": "^2.2.2",
+    "tailwindcss": "^3.3.2"
   },
   "repository": {
     "type": "git",

build.washingtonpost.com/pages/resources/index.js

@@ -161,8 +161,7 @@ async function getWrapper(collections, recents) {
       "Explore our accessibility checklist, testing strategies and considerations.",
     Workshops:
       "Sharpen your design and development skills with our in-depth recorded workshops.",
-    Tools:
-      "Sharpen your design and development skills with our in-depth recorded workshops.",
+    Tools: "Help for adopting and using WPDS.",
   };
 
   // 2. populate the content array with objects for each category (main data for page)
@@ -171,7 +170,7 @@ async function getWrapper(collections, recents) {
     name = id = type = collection.kicker;
     let [posts, description, size] = [[], descriptions[name], ""];
 
-    if (name === "Guides") {
+    if (name === "Guides" || name === "Tools") {
       // sorting guides by Rank -> if none, sort by title
       posts = sortByRank(collection.docs, 4);
       size = THUMBNAIL_SQUARE;

build.washingtonpost.com/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

build.washingtonpost.com/public/global.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 .Toastify__toast,.Toastify__toast-body{
   padding: 0 !important;
   margin: 0 !important;

build.washingtonpost.com/public/sitemap.xml

@@ -306,6 +306,10 @@
     >
   </url>
 
+  <url>
+    <loc>https://build.washingtonpost.com/resources/tools/tailwind-theme</loc>
+  </url>
+
   <url>
     <loc
       >https://build.washingtonpost.com/resources/tutorials/five-minute-accessibility-audit</loc

build.washingtonpost.com/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const WPDSTheme = require("@washingtonpost/wpds-tailwind-theme");
+
+module.exports = {
+  content: ["./docs/resources/tools/tailwind-theme.mdx"],
+  theme: WPDSTheme,
+  corePlugins: {
+    preflight: false,
+  },
+};