Files

skyai_dev c803831f60 Add comprehensive semantic design token system

Implement complete semantic layer for all design tokens including typography, spacing, motion, colors, borders, shadows, z-index, opacity, and glass effects. Each semantic token maps base design tokens to contextual usage patterns for improved maintainability and developer experience.

Features:
- Complete semantic typography system with font weights, sizes, line heights, and letter spacing
- Comprehensive spacing tokens for components, layouts, and interactions
- Full motion system with durations, easing, transitions, and hover transforms
- Semantic color system with individual access to all Material Design 3 colors
- Border tokens with widths, radius, and styles for all use cases
- Shadow system including standard and AI-themed shadows
- Z-index layering system for proper stacking context
- Opacity tokens for transparency and visibility states
- Glass morphism tokens with blur, opacity, and theming support

All semantic tokens provide direct access to base token values while offering meaningful contextual aliases for common UI patterns.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-09-02 10:24:04 +10:00

2.9 KiB

Raw Permalink Blame History

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

SSuite is an Angular workspace containing three libraries designed as a modular component system:

shared-ui: UI design system with comprehensive SCSS styling, design tokens, and reusable components
shared-utils: Common utilities and shared services
ui-essentials: Essential UI components and functionality

Development Commands

Building

# Build all libraries
ng build

# Build specific library
ng build shared-ui
ng build shared-utils  
ng build ui-essentials

# Watch mode for development
ng build --watch --configuration development

Testing

# Run all tests
ng test

# Run tests for specific library
ng test shared-ui
ng test shared-utils
ng test ui-essentials

Development Server

# Start development server (if main application exists)
ng serve

Architecture

Library Structure

Each library follows Angular's standard structure:

src/lib/ - Library source code
src/public-api.ts - Public exports
ng-package.json - Library packaging configuration
package.json - Library metadata

TypeScript Path Mapping

Libraries are mapped in tsconfig.json paths:

"paths": {
  "shared-ui": ["./dist/shared-ui"],
  "shared-utils": ["./dist/shared-utils"], 
  "ui-essentials": ["./dist/ui-essentials"]
}

Design System (shared-ui)

Contains a comprehensive SCSS architecture:

Base tokens: Colors, typography, spacing, motion, shadows
Semantic tokens: High-level design tokens built on base tokens
Components: Base buttons, cards, forms, navigation
Layouts: Grid systems, dashboard layouts, responsive templates
Utilities: Display, layout, spacing utilities
Patterns: Content, interaction, and layout patterns
Font faces: Extensive collection of web fonts

Style Import Options:

// Complete design system (includes semantic + base tokens + fonts)
@use 'shared-ui/src/styles' as ui;

// Tokens only (semantic + base tokens)
@use 'shared-ui/src/styles/tokens' as tokens;

// Semantic tokens only (includes base tokens)
@use 'shared-ui/src/styles/semantic' as semantic;

// Base tokens only
@use 'shared-ui/src/styles/base' as base;

// Components and utilities (import separately to avoid circular dependencies)
@use 'shared-ui/src/styles/commons' as commons;

Entry points:

Main: projects/shared-ui/src/styles/index.scss
Tokens: projects/shared-ui/src/styles/tokens.scss
Semantic: projects/shared-ui/src/styles/semantic/index.scss

Development Notes

All libraries use Angular 19.2+ with strict TypeScript configuration
Libraries must be built before being consumed by other projects
Use ng generate commands within library contexts for scaffolding
Libraries are publishable to npm after building to dist/ directory
Testing uses Karma with Jasmine framework

2.9 KiB Raw Permalink Blame History