@vector-crystal-web/tokens

Design tokens and base styles for the Crystal Design System. Provides colors, typography, spacing, effects, and assets to keep a consistent look across all applications.

Features

| Feature | Description | | --------------- | ----------------------------------------------------------------------------------------------------------- | | Colors | Primitive palette (blue, jade, gray, neutral, etc.) in 100–1100 scales, exported as SCSS and TypeScript. | | Typography | Font tokens (families, weights, sizes) and @font-face definitions for Inter, Poppins, and Phosphor Icons. | | Spacing | Dimension scale (0–140px) for padding, margin, and layout, in SCSS and TS. | | Effects | Border radius, stroke, opacity, and shadows for surfaces and components. | | Icons | Phosphor Icons integration and icon support via tokens. | | Semantic | Semantic tokens mapping primitives to contexts (state, theme, accessibility). | | Base styles | CSS reset, scrollbar, interface styles, and PrimeFlex integration. | | Assets | Fonts (Inter, Poppins, Phosphor), images (shippers), and normalize.css. |

Usage

import '@vector-crystal-web/tokens'; // JS/TS (types and constants)
import '@vector-crystal-web/tokens/styles'; // SCSS (variables and styles)

Generated with Nx.