@freshworks/dew-styles

Common styles for the Freshworks Dew 2.0 Design System

Documentation Site: https://mellifluous-mousse-52a5d4.netlify.app/

📋 Overview

This package provides the foundational styles for the Freshworks Dew 2.0 Design System, including colors, typography, and design tokens.

📊 Dependencies

🚀 Getting Started

Installation

pnpm add @freshworks/dew-styles

or

npm install @freshworks/dew-styles

or

yarn add @freshworks/dew-styles

🔧 Development Commands

| Command | Description | | ---------------------- | ------------------------ | | nx build dew-styles | Build the library | | nx lint dew-styles | Lint the library files | | nx format dew-styles | Format the library files |

📚 Contents

Color Variables

• src/styles/colors/dew/light/_base.scss - Light theme color variables
• src/styles/colors/dew/dark/_base.scss - Dark theme color variables

Typography

• src/styles/fonts/main.scss - InterVariable font-face declaration and related variables

Design Tokens

• src/styles/numbers/main.scss - Tokens for spacing, opacity & border-radius

📦 Build Artifacts

The build process generates the following artifacts in the dist directory:

| File | Description | | ------------------ | ----------------------------------------------------------------------- | | dist/colors.css | CSS file containing color variables | | dist/fonts.css | CSS file containing font-face declarations and typography variables | | dist/numbers.css | CSS file containing spacing, opacity, border-radius & box-shadow tokens |

📝 Publishing

https://nx.dev/recipes/nx-release/automate-github-releases

To publish this package to the GitHub package registry:

1. Ensure you have the GitHub Personal Access Token set up in your .zshrc file:

   export GITHUB_TOKEN="xxx" or
   export GH_TOKEN="xxx"

   Note: This token needs write access to the repository.

2. Run the release command in dry-run mode to check for any issues:

   npx nx release --projects=dew-styles --dry-run

   This will simulate the release process without actually publishing anything.

   View the sample output from the dry-run command : here

3. If everything looks good, run the release command to publish the package:

   npx nx release --projects=dew-styles

4. After the release, verify the published package on GitHub Packages https://github.com/freshworks/fw-dew/pkgs/npm/dew-styles