This package contains Web Components built with Lit.

Usage

1. Add this package and Lit as dependencies

pnpm install @crowdstrike/glide-core lit

2. Import the fonts and variables

@import '@crowdstrike/glide-core/styles/fonts.css';
@import '@crowdstrike/glide-core/styles/variables.css';

3. Import the component you want to use

import '@crowdstrike/glide-core/button.js';

4. Render your component

<glide-core-button size="small">Button</glide-core-button>

Development

Contributing

Follow our Contribution Guidelines.

Getting started

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 install

[!NOTE]

• If you have ignore-scripts=true in your ~/.npmrc, you'll also need to run pnpm prepare, which will install some Git hooks for linting, formatting, typechecking, and testing.
• We recommend using Corepack to help manage the version of pnpm installed in this repository; however, it is not a requirement.

Running Storybook

Run the following command from the root of the repository:

pnpm start

After 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.

Adding CSS Custom Properties

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