jules/ui-essentials
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add comprehensive semantic design token system

Browse Source 
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>
This commit is contained in:
skyai_dev
2025-09-02 10:24:04 +10:00
parent cd3211101c
commit c803831f60
193 changed files with 23363 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
projects/demo-ui-essentials/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

29
projects/demo-ui-essentials/src/app/app.component.spec.ts Normal file
View File

@@ -0,0 +1,29 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have the 'demo-ui-essentials' title`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('demo-ui-essentials');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo-ui-essentials');
});
});

15
projects/demo-ui-essentials/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { ButtonComponent } from '../../../ui-essentials/src/public-api';
@Component({
selector: 'app-root',
imports: [RouterOutlet, ButtonComponent],
template: `
<ui-button></ui-button>
`
})
export class AppComponent {
title = 'demo-ui-essentials';
}

8
projects/demo-ui-essentials/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,8 @@
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

3
projects/demo-ui-essentials/src/app/app.routes.ts Normal file
View File

@@ -0,0 +1,3 @@
import { Routes } from '@angular/router';
export const routes: Routes = [];

13
projects/demo-ui-essentials/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DemoUiEssentials</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

6
projects/demo-ui-essentials/src/main.ts Normal file
View File

@@ -0,0 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));

1
projects/demo-ui-essentials/src/styles.scss Normal file
View File

@@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

15
projects/demo-ui-essentials/tsconfig.app.json Normal file
View File

@@ -0,0 +1,15 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/app",
"types": []
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.d.ts"
]
}

15
projects/demo-ui-essentials/tsconfig.spec.json Normal file
View File

@@ -0,0 +1,15 @@
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "../../out-tsc/spec",
"types": [
"jasmine"
]
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}