c803831f60
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>
104 lines
2.9 KiB
Markdown
104 lines
2.9 KiB
Markdown
# 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
|
|
```bash
|
|
# 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
|
|
```bash
|
|
# Run all tests
|
|
ng test
|
|
|
|
# Run tests for specific library
|
|
ng test shared-ui
|
|
ng test shared-utils
|
|
ng test ui-essentials
|
|
```
|
|
|
|
### Development Server
|
|
```bash
|
|
# 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:
|
|
```json
|
|
"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:
|
|
```scss
|
|
// 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 |