cp-design-system

The design system of Check Point.

Getting Started - Use Package

Prerequisites

1. 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/
2. 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:

1. Add cp-design preset to tailwind.config.js file:

   module.exports = {
     ...,
     presets: [
       require('@dome9/cp-design/packages/berries/tailwind-berries.config'),
     ],
   }

2. Add the 'theme' class to your top level element, for example:

   <div className="theme">Top Level Element</div>

3. Start using cp-design:

   <div className="bg-brand">Check Point Design System</div>

Getting Started - Contributors

TBD