0.0.0 • Published 2 years ago
sp-design v0.0.0
cp-design-system
The design system of Check Point.
Getting Started - Use Package
Prerequisites
- Add dome9 registry
- add registry to your project/global npm config (.npmrc)
@dome9:registry=https://npm.pkg.github.com/
- Or set via command line to .npmrc:
npm config set @dome9:registry=https://npm.pkg.github.com/
- add registry to your project/global npm config (.npmrc)
- Enable install packages from GitHub Package Registry
- Create personal access token from your Github Settings -> Developer settings -> Personal access tokens
- Generate new token with at least 'read:packages' scope
- Add the token to your project/global npm config (.npmrc):
//npm.pkg.github.com/:_authToken={github token}
- Or set via command line to .npmrc:
npm config set //npm.pkg.github.com/:_authToken={github token}
Install cp-design Package
npm i @dome9/cp-design
Usage of Components
Storybook Link.
TBD
Usage of Design System utility classes with Tailwing CSS
In order to use the Design System utility classes, you firslty need to install Tailwind CSS in your project.
If you don't use Tailwind in your project, follow Tailwind CSS Installation Guide.
Be aware that Tailwind come with pre-defined CSS base styles, which can affect your styles.
After installing Tailwing in your project, following those steps to integrate with the Design System:
Add cp-design preset to tailwind.config.js file:
module.exports = { ..., presets: [ require('@dome9/cp-design/packages/berries/tailwind-berries.config'), ], }
Add the 'theme' class to your top level element, for example:
<div className="theme">Top Level Element</div>
Start using cp-design:
<div className="bg-brand">Check Point Design System</div>
Getting Started - Contributors
TBD
0.0.0
2 years ago