Repository files navigation

A Tailwind preset that provides the base styles for CrowdStrike's Toucan design system.

yarn add @crowdstrike/tailwind-toucan-base#npm install @crowdstrike/tailwind-toucan-base#pnpm add @crowdstrike/tailwind-toucan-base

Note: This preset is presently only tested with Tailwind v2

// tailwind.config.jsmodule.exports={presets:[require('@crowdstrike/tailwind-toucan-base')],extends:{// your customizations here}};

If your packager supports importing styles directly from an npm package, the Toucan styles are pre-built and can be imported at:

@import"@crowdstrike/tailwind-toucan-base";

Many JS CDNs scrape NPM and automatically serve and cache assetsdeployed to NPM.

Here as an example with JSDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@crowdstrike/tailwind-toucan-base/toucan.css">

pnpm start

which is an alias for:

pnpm run build:previewnpx http-server ./dist

Note that changes tosrc orbuild scripts will require re-runningpnpm start.

pnpm build

then, open themanual-test.html

firefox ./manual-test.html

Or, along with the tailwind-preview

pnpm start

and visithttp://localhost:8080/manual

This addon provides the ability to pull our palette information directly from Figma files and store them inthemes.json which is used by the Tailwind configuration to set up our CSS.

To import the colors run:

FIGMA_TOKEN=some-key \LIGHT_ID=fileId \DARK_ID=fileId \MEZZANINE_ID=fileId \  pnpm run figma:export-styles

• FIGMA_TOKEN here is figmaPersonal Access Token.
• LIGHT_ID,DARK_ID, andMEZZANINE_ID arefileIds that can be obtained from the URL of the figma project containing the color tokens.

...and commit the changes tothemes.json.

If you see any errors reported then youmay 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 viapnpm exec vitest --update