CaseBlocks

The official React component library for Case Parts.

Installation

npm install case-blocks
yarn add case-blocks

Using Design Tokens

The tokens.css file contains design tokens exported from Figma and is available for use in your projects. To use it, follow the steps below:

Importing the Tokens

1. In a CSS File
   Add the following import to your global CSS file:

   @import "case-blocks/styles/tokens.css";

2. In a JavaScript/TypeScript File
   Import the tokens in your entry point (e.g., App.jsx):

   import "case-blocks/styles/tokens.css";

Accessing the Tokens

Once imported, you can use the CSS variables defined in tokens.css throughout your project. For example:

button {
  background-color: var(--color-brand-primary-primary-teal-blue);
  color: var(--color-brand-primary-white);
}

CSS Variable Autocomplete

1. Install CSS Variable Autocomplete vs code extension
2. Go to VS Code settings (Ctrl + ,)
3. Look for a setting like "Css Variables: Lookup Files" or similar
4. Add the path to your tokens.css file

{
  "cssVariables.lookupFiles": [
    "node_modules/@caseparts-org/caseblocks/dist/styles/tokens.css"
  ]
}