🎨 Nexus Edge Design Tokens

Design tokens for the Nexus Edge Design System

💬 Why design tokens?

The @nexus-edge/design-tokens package serves as a central repository for all design and styling-related information. It contains style variables that are essential for maintaining consistency across your project's UI.

📁 Contents of the tokens package

• Breakpoints
  • Includes tokens for all the breakpoints for adapting the UI to different devices.
• Spacing
  • Contains tokens for managing spacing, including:
    • Padding
    • Margin
    • Gap
• Typography
  • Contains tokens for managing typography, including:
    • font weight
    • font size
    • line height
    • letter spacing
• Mixins
  • Provides reusable code snippets for common design patterns.
• Colors
  • Specified colors following the Nexus Edge design system
    • Primary, secondary and tertiary colors
    • Success, error and warning colors
    • State-dependent colors such as disabled and hover

🔨 Usage

To leverage the variables in this package, you need to import them into a SCSS file. This allows you to apply consistent styling across your components efficiently. To use a mixin, make sure to use the @include keyword as shown in the example below.

Example: `SCSS`` File Usage

@use '@nexus-edge/design-tokens' as tokens;

body {
    background-color: tokens.$color-bg-primary;
}

h1 {
     @include tokens.$neds-body-lg
}