Skip to content

Latest commit

 

History

History
70 lines (41 loc) · 1.88 KB

README.md

File metadata and controls

70 lines (41 loc) · 1.88 KB

Sage "Assets" Package

The Sage Assets package contains all SCSS stylesheets, token definitions, and design system styling for the Sage Design System.

Token System

Sage Assets uses Pine design tokens which are loaded externally (not bundled):

  • Pine Tokens - Loaded by the consuming application (docs app, KP, etc.)

    • Provides semantic tokens (e.g., --pine-color-primary) for dark mode compatibility
    • NOT bundled in sage-assets to avoid duplication when both Pine and Sage are used

  • Style Dictionary - Legacy system maintained for backward compatibility

    • Used for SCSS hex value lookups via sage-color-hex() function
    • Located in /style-dictionary/tokens/

Using Color Tokens

// For CSS properties (dark mode compatible)
.my-component {
  background-color: sage-color(primary, 300); // Returns: var(--pine-color-primary)
  color: sage-color(white); // Returns: var(--pine-color-white)
}

// For SCSS color operations (requires hex values)
$lightness: lightness(sage-color-hex(primary, 300)); // Returns: #2463eb

See SCSS_COLOR_OPERATIONS_STRATEGY.md for detailed guidance on when to use each function.

Local Scripts

The following scripts can be ran by typing yarn <script_name> in the root of this repository. The following section goes over each script in detail.

build

One time build of the package

build:webpack

Specific build for webpack

build:webpack:watch

Specific build for webpack with a watcher attached

build:sassdoc

One time build of the SassDoc assets

build:sassdoc:watch

Continually watch and build the SassDoc assets

build:watch

Continually watch and build the package

preversion

Automated script to run during preversion. Used in the Lerna monorepo

start

Start the SassDocs http server on port 4200

start:local

For local development, starts server along with watchers