-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add tailwind theme package (#356)
- Loading branch information
Showing
57 changed files
with
2,146 additions
and
270 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
build.washingtonpost.com/docs/resources/tools/tailwind-theme.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| module.exports = { | ||
| plugins: { | ||
| tailwindcss: {}, | ||
| autoprefixer: {}, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+4.47 KB
build.washingtonpost.com/public/img/resources/thumbnails/tools_tailwind.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| }, | ||
| }; |
Oops, something went wrong.
b2e3427There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
wpds-ui-kit-vitejs-example – ./apps/vite-project
wpds-ui-kit-vitejs-example.preview.now.washingtonpost.com
wpds-ui-kit-vitejs-example-git-main.preview.now.washingtonpost.com
b2e3427There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
wpds-ui-kit-vitejs-v2-example – ./apps/vite-v2-project
wpds-ui-kit-vitejs-v2-example-git-main.preview.now.washingtonpost.com
wpds-ui-kit-viteks-v2-example.preview.now.washingtonpost.com
wpds-ui-kit-vitejs-v2-example.preview.now.washingtonpost.com
b2e3427There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
wpds-ui-kit – ./build.washingtonpost.com
build.washingtonpost.com
wpds-ui-kit-git-main.preview.now.washingtonpost.com
wpds-ui-kit.preview.now.washingtonpost.com
b2e3427There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
wpds-ui-kit-storybook – ./
wpds-ui-kit-storybook-git-main.preview.now.washingtonpost.com
wpds-ui-kit-storybook.preview.now.washingtonpost.com