Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/crowdstrike/tailwind-toucan-base

Base Tailwind config for the Toucan design system.

https://github.com/crowdstrike/tailwind-toucan-base

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Committers with academic emails
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (12.2%) to scientific vocabulary

Keywords

tailwind

Keywords from Contributors

document transformers community zsh-plugin charts archival ember services snapshot-testing productivity
Last synced: 6 months ago · JSON representation

Repository

Base Tailwind config for the Toucan design system.

Basic Info
Statistics
  • Stars: 16
  • Watchers: 8
  • Forks: 12
  • Open Issues: 14
  • Releases: 22
Topics
tailwind
Created over 4 years ago · Last pushed 6 months ago
Metadata Files
Readme Changelog

README.md

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

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.
  • LIGHT_ID, DARK_ID, and MEZZANINE_ID are fileIds 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

Owner

  • Name: CrowdStrike
  • Login: CrowdStrike
  • Kind: organization
  • Email: github@crowdstrike.com
  • Location: United States of America

GitHub Events

Total
  • Issues event: 1
  • Watch event: 1
  • Delete event: 49
  • Issue comment event: 103
  • Push event: 414
  • Pull request review event: 104
  • Pull request event: 98
  • Create event: 49
Last Year
  • Issues event: 1
  • Watch event: 1
  • Delete event: 49
  • Issue comment event: 103
  • Push event: 414
  • Pull request review event: 104
  • Pull request event: 98
  • Create event: 49

Committers

Last synced: 11 months ago

All Time
  • Total Commits: 534
  • Total Committers: 13
  • Avg Commits per committer: 41.077
  • Development Distribution Score (DDS): 0.275
Past Year
  • Commits: 102
  • Committers: 1
  • Avg Commits per committer: 102.0
  • Development Distribution Score (DDS): 0.0
Top Committers
Name Email Commits
renovate[bot] 2****] 387
Renovate Bot b****t@r****m 56
NullVoxPopuli L****v@g****m 33
semantic-release-bot s****t@m****t 15
JackRobards j****2@g****m 11
Tony Ward 8****w 9
github-actions[bot] g****] 8
joelamb 4****b 5
dependabot[bot] 4****] 4
Patricia Carbajal c****a@g****m 3
Alon Bukai a****z@g****m 1
hailey@whimsicle.net C****5 1
Michal Bryxí m****i@c****m 1
Committer Domains (Top 20 + Academic)
crowdstrike.com: 1 martynus.net: 1 renovateapp.com: 1

Issues and Pull Requests

Last synced: 6 months ago

All Time
  • Total issues: 3
  • Total pull requests: 505
  • Average time to close issues: about 3 hours
  • Average time to close pull requests: 8 days
  • Total issue authors: 3
  • Total pull request authors: 9
  • Average comments per issue: 0.33
  • Average comments per pull request: 1.93
  • Merged pull requests: 461
  • Bot issues: 1
  • Bot pull requests: 490
Past Year
  • Issues: 1
  • Pull requests: 94
  • Average time to close issues: N/A
  • Average time to close pull requests: about 6 hours
  • Issue authors: 1
  • Pull request authors: 2
  • Average comments per issue: 0.0
  • Average comments per pull request: 1.81
  • Merged pull requests: 80
  • Bot issues: 0
  • Bot pull requests: 94
View more stats
Top Authors
Issue Authors
  • MichalBryxi (1)
  • renovate[bot] (1)
  • mraible (1)
Pull Request Authors
  • renovate[bot] (505)
  • github-actions[bot] (9)
  • dependabot[bot] (8)
  • ynotdraw (5)
  • JackRobards (5)
  • joelamb (2)
  • haileymeister00 (1)
  • patriciacarbajal (1)
  • MichalBryxi (1)
Top Labels
Issue Labels
released (1)
Pull Request Labels
released (54) dependencies (8)

Packages

  • Total packages: 1
  • Total downloads:
    • npm 4,340 last-month
  • Total dependent packages: 2
  • Total dependent repositories: 5
  • Total versions: 20
  • Total maintainers: 2
npmjs.org: @crowdstrike/tailwind-toucan-base

Tailwind preset for CrowdStrike's Toucan design system

  • Versions: 20
  • Dependent Packages: 2
  • Dependent Repositories: 5
  • Downloads: 4,340 Last month
Rankings
Dependent repos count: 5.1%
Downloads: 6.1%
Forks count: 6.2%
Average: 7.0%
Stargazers count: 8.8%
Dependent packages count: 8.9%
Maintainers (2)
kellyselden crowdstrike-publisher
Last synced: 6 months ago

Dependencies

.github/actions/pnpm/action.yml actions
  • actions/cache v3 composite
  • pnpm/action-setup v2.2.4 composite
  • volta-cli/action v4 composite
.github/workflows/ci.yml actions
  • ./.github/actions/pnpm * composite
  • actions/checkout v3 composite
  • volta-cli/action v4 composite
  • wagoid/commitlint-github-action v4.1.12 composite
package.json npm
  • @figma-export/cli 4.5.0 development
  • @nullvoxpopuli/eslint-configs 2.2.62 development
  • @semantic-release/changelog ^6.0.1 development
  • @semantic-release/git ^10.0.1 development
  • @types/fs-extra ^9.0.13 development
  • autoprefixer ^10.4.12 development
  • c8 ^7.12.0 development
  • common-tags ^1.8.2 development
  • eslint ^8.25.0 development
  • execa ^6.1.0 development
  • fs-extra ^10.1.0 development
  • npm-run-all ^4.1.5 development
  • pnpm ^7.13.5 development
  • postcss ^8.4.18 development
  • semantic-release ^19.0.5 development
  • tailwind-config-viewer ^1.7.2 development
  • typescript ^4.8.4 development
  • vitest 0.24.3 development
  • tailwindcss ^2.2.15
pnpm-lock.yaml npm
  • 764 dependencies
tests/package.json npm
  • ts-expect ^1.3.0 development
  • typescript ^4.7.4 development
  • vitest 0.16.0 development
  • @crowdstrike/tailwind-toucan-base *