Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crowdstrike/tailwind-toucan-base
Base Tailwind config for the Toucan design system.
https://github.com/crowdstrike/tailwind-toucan-base
tailwind
Last synced: 4 days ago
JSON representation
Base Tailwind config for the Toucan design system.
- Host: GitHub
- URL: https://github.com/crowdstrike/tailwind-toucan-base
- Owner: CrowdStrike
- Created: 2021-09-14T17:19:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T19:29:52.000Z (3 months ago)
- Last Synced: 2024-10-29T21:37:00.716Z (3 months ago)
- Topics: tailwind
- Language: JavaScript
- Homepage: https://tailwind-toucan-base.pages.dev/
- Size: 1.08 MB
- Stars: 15
- Watchers: 9
- Forks: 12
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @crowdstrike/tailwind-toucan-base
A Tailwind preset that provides the base styles for CrowdStrike's Toucan design system.
## Usage
```bash
yarn add @crowdstrike/tailwind-toucan-base
#
npm install @crowdstrike/tailwind-toucan-base
#
pnpm add @crowdstrike/tailwind-toucan-base
```
### Tailwind
_Note_: This preset is presently only tested with Tailwind v2
```js
// tailwind.config.js
module.exports = {
presets: [require('@crowdstrike/tailwind-toucan-base')],
extends: {
// your customizations here
}
};
```
### CSS `@import`
If your packager supports importing styles directly from an npm package, the Toucan styles are pre-built and can be imported at:
```css
@import "@crowdstrike/tailwind-toucan-base";
```
### CDN Usage
Many JS CDNs scrape NPM and automatically serve and cache assets
deployed to NPM.
Here as an example with JSDelivr
```
```
## Previewing the config locally
```bash
pnpm start
```
which is an alias for:
```bash
pnpm run build:preview
npx http-server ./dist
```
Note that changes to `src` or `build` scripts will require re-running `pnpm start`.
## Previewing manual tests locally
```bash
pnpm build
```
then, open the `manual-test.html`
```bash
firefox ./manual-test.html
```
Or, along with the tailwind-preview
```bash
pnpm start
```
and visit `http://localhost:8080/manual`
## Importing colors and shadows from Figma
This addon provides the ability to pull our palette information directly from Figma files and store them in
`themes.json` which is used by the Tailwind configuration to set up our CSS.
To import the colors run:
```bash
FIGMA_TOKEN=some-key \
LIGHT_ID=fileId \
DARK_ID=fileId \
MEZZANINE_ID=fileId \
pnpm run figma:export-styles
```
- `FIGMA_TOKEN` here is figma [Personal Access Token](https://www.figma.com/developers/api#access-tokens).
- `LIGHT_ID`, `DARK_ID`, and `MEZZANINE_ID` are `fileId`s that can be obtained from the URL of the figma project containing the color tokens.
...and commit the changes to `themes.json`.
If you see any errors reported then you _may_ need to ensure that the Figma file is set up correctly (and e.g.
there are corresponding colors across each of the palettes).
If there are resulting changes to the output, you'll need to update the test snapshots.
That can be done via `pnpm exec vitest --update`