This package contains Web Components built with Lit.
pnpm install @crowdstrike/glide-core lit@import '@crowdstrike/glide-core/styles/fonts.css';
@import '@crowdstrike/glide-core/styles/variables.css';import '@crowdstrike/glide-core/button.js';<glide-core-button size="small">Button</glide-core-button>Follow our Contribution Guidelines.
First you'll need to install the dependencies for the repository. We use PNPM. Run the following command from the root of the repository:
pnpm install
pnpm dlx playwright installNote
- If you have
ignore-scripts=truein your~/.npmrc, you'll also need to runpnpm prepare, which will install some Git hooks for linting, formatting, typechecking, and testing. - We recommend using Corepack to help manage the version of
pnpminstalled in this repository; however, it is not a requirement.
Run the following command from the root of the repository:
pnpm startAfter Storybook's build completes, your browser should navigate to the Storybook instance. If this doesn't happen automatically, a URL will be shown in your terminal for you to browse to.
Glide Core uses scripts from @crowdstrike/design-tokens to import variables from Figma and transform them into CSS custom properties. This allows us to maintain a single source of truth for color, typography, spacing, etc.
Prior to running the script, you'll need to follow the steps to generate a Figma personal access token.
Store this access token in your .zshrc or .bashrc as the following:
export FIGMA_TOKEN="<your-token-here>"This setup is required only once; however, your access token may expire and require an update now and then. An error will be thrown if this occurs. Review the link above on managing access tokens in Figma if this happens.
After the steps above are completed, to get new or updated custom properties run the following command:
pnpm start:production:figma