now-design-styles

Global CSS styles for the Now Design System.

✨ Features

• Text Styles: Predefined CSS classes for typography, generated from design tokens.
• Easy Integration: Import a single CSS file for all text styles.
• Token-Driven: All styles are based on your design system tokens for consistency.

📦 Installation

npm install now-design-styles

🚀 Usage

1. Import the CSS

import 'now-design-styles/text/text-styles.css';

2. Use the Classes

<p class="text-regular-bodyLarge">Body text</p>
<h1 class="text-bold-h1">Main heading</h1>
<h2 class="text-title-title2">Page title</h2>

🛠️ Regenerating Text Styles

If you update your design tokens or mapping, regenerate the CSS:

cd packages/styles/text
node generate-text-styles-css.js

This will update text-styles.css based on text-style-mapping.json.

📁 Structure

styles/
  text/
    text-style-mapping.json   # Mapping of text style tokens
    generate-text-styles-css.js # Script to generate CSS
    text-styles.css           # Generated CSS classes

🎨 Color & Effect Styles

The following files provide style-specific mappings for advanced color and effect styles:

• color/colorStyles.json: Contains color style definitions (e.g., gradients) for use in style generation or Figma exports.
• effect/effectStyles.json: Contains effect style definitions (e.g., drop shadows, blurs) for use in style generation or Figma exports.

These files are not part of the core design tokens. They are intended for use in style-specific scripts, generators, or design tool exports. You can extend or modify them as needed for your design system's requirements.

💥 Effect Utility Classes

The effect/effectStyles.css file provides ready-to-use utility classes for common effects (blur, drop shadow, inner shadow, etc.) using your design tokens as CSS variables.

Usage

import 'now-design-styles/effect/effectStyles.css';

<div class="backgroundBlurGlass"></div>
<div class="dropShadow"></div>
<div class="layerBlur"></div>
<div class="innerShadow"></div>

Regenerating Effect Styles

If you update effectStyles.json or your tokens, regenerate the CSS:

cd packages/styles/effect
node generate-effectStyles-css.js

This will update effectStyles.css based on the latest mapping and tokens.

Structure

styles/
  effect/
    effectStyles.json            # Effect style mappings (token references)
    generate-effectStyles-css.js # Script to generate CSS
    effectStyles.css             # Generated effect utility classes

🌈 Color Utility Classes

The color/colorStyles.css file provides ready-to-use utility classes for gradients and color backgrounds using your design tokens as CSS variables (with fallbacks).

Usage

import 'now-design-styles/color/colorStyles.css';

<div class="glassStrokeGradient"></div>

This will apply a gradient background using your design tokens:

.glassStrokeGradient {
  background: linear-gradient(140deg, var(--brand-grey-400, #B0B0B0) 0%, var(--brand-grey-100, #F5F5F5) 100%);
}

Regenerating Color Styles

If you update colorStyles.json, regenerate the CSS:

cd packages/styles/color
node generate-colorStyles-css.js

This will update colorStyles.css based on the latest mapping and tokens.

Structure

styles/
  color/
    colorStyles.json            # Color style mappings (token references)
    generate-colorStyles-css.js # Script to generate CSS
    colorStyles.css             # Generated color utility classes

📚 Adding More Styles

• For color or effect styles, follow the same pattern: create a mapping, a generator script, and a CSS output file in a dedicated subfolder.

📝 License

MIT