Harness Design tokens folder structure

Folder Structure

Design tokens are organized in a structured manner within the packages/core-design-system/design-tokens folder.

Root Files

• $metadata.json: Contains metadata information about the design token system
• $themes.json: Defines the themes available in the design system

Brand

The brand folder contains brand-specific design tokens:

• JSON files for each brand (Gitness.json, Harness.json)
• These files define brand-specific primary colors.

Breakpoint

The breakpoint folder defines responsive design breakpoints:

• Contains definitions for different screen sizes and viewport widths (desktop.json)
• Used for creating responsive layouts across different devices

Components

The components folder contains design tokens specific to UI components:

• Organized by platform (desktop)
• Further organized into component categories (base)
• Includes tokens for common UI elements like buttons, inputs, badges, tags, and dropdown menus
• These tokens ensure consistent styling across all components in the system

Core

The core folder contains the fundamental design tokens that form the basis of the design system:

• colors_hex.json: Color definitions in hexadecimal format (deprecated)
• colors_lch.json: Color definitions in LCH (Lightness, Chroma, Hue) format
• dimensions.json: Spacing, sizing, and other dimensional values
• typography.json: Font families, sizes, weights, and other typography-related tokens

Mode

The mode folder contains theme variations for different visual modes:

• Organized into dark and light subfolders
• Each mode includes multiple variations:
  • Default mode
  • High contrast mode for accessibility
  • Dimmer mode for reduced brightness
  • Color blindness accommodations (deuteranopia, protanopia, tritanopia)
• These files ensure the design system is accessible to users with different visual needs

---

core-design-system files architecture:

core-design-system/
├── src/
│   ├── styles/                # Generated CSS output
│   │   ├── core.css           # Core design tokens
│   │   ├── components.css     # Component-specific tokens
│   │   ├── colors.css         # Color tokens
│   │   ├── breakpoint.css     # Responsive breakpoints
│   │   ├── core-imports.css   # Main import file
│   │   ├── [theme files].css  # Theme-specific CSS files
│   │   ├── enterprise.css     # Enterprise-specific imports
│   │   └── oss.css            # OSS-specific imports
│   │
│   └── styles-esm/            # Generated TypeScript output
│       ├── core.ts            # Core design tokens in TS
│       ├── components.ts      # Component tokens in TS
│       ├── colors.ts          # Color tokens in TS
│       ├── breakpoint.ts      # Breakpoint information in TS
│       ├── index.ts           # Main exports file
│       └── [theme files].ts   # Theme-specific TS files
├── scripts/                   # Build system
│   ├── build.js               # Main build script
│   ├── constants.js           # Shared constants
│   ├── sd-file-generators.js  # Style Dictionary file generators
│   ├── sd-filters.js          # Token filtering functions
│   └── complete-log.js        # Logging utilities
└── design-tokens/             # Source token files
    └── [token structure]      # As detailed above

---

design-tokens files architecture:

design-tokens/
├── $themes.json           # Theme configuration and permutations
├── core/                  # Core design tokens
│   ├── colors_lch.json    # Base color definitions
│   ├── dimensions.json    # Spacing, sizing constants
│   └── typography.json    # Typography tokens
├── brand/                 # Brand-specific tokens
│   ├── gitness.json       # Gitness brand tokens
│   └── harness.json       # Harness brand tokens
├── mode/                  # Theme mode tokens
│   ├── light.json         # Light mode tokens
│   ├── dark.json          # Dark mode tokens
├── breakpoint/            # Responsive breakpoints
└── components/            # Component-specific tokens
    ├── button.json
    ├── tag.json
    └── [other components]