Complete library submodule standardization and consumer integration
🎯 Major Achievements: - Standardized 193+ SCSS imports across all libraries - Created 12 independent Git repositories with clean submodule structure - Eliminated relative path dependencies for true library portability - Added comprehensive consumer integration documentation 📦 Libraries Successfully Published: • ui-design-system (foundation) • ui-essentials (components) • shared-utils (utilities) • auth-client (authentication) • ui-landing-pages (marketing components) • ui-code-display (syntax highlighting) • ui-accessibility (WCAG compliance) • hcl-studio (color management) • ui-animations (CSS animations) • ui-backgrounds (background effects) • ui-font-manager (typography) • ui-data-utils (data manipulation) 🔧 Technical Improvements: - All SCSS imports now use standardized 'ui-design-system/' paths - Libraries work independently as Git submodules - Consumer projects can selectively include only needed libraries - Professional Git history with initial commits for each library - Updated integration guides with step-by-step workflows 📋 Documentation Added: - CONSUMER_INTEGRATION_GUIDE.md - Complete setup instructions - Updated SUBMODULE_INTEGRATION_GUIDE.md - Enhanced with dependency info - Library-specific README files for all repositories 🚀 Ready for Production: - All libraries pushed to https://git.sky-ai.com/jules/* - Clean separation of concerns across library boundaries - Independent versioning and release cycles possible - Optimal structure for LLM analysis and maintenance This completes the monorepo-to-submodule transformation, making the SSuite library ecosystem ready for professional distribution and consumption. 🤖 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jules
@@ -1,468 +1 @@
|
||||
# Auth Client Library
|
||||
|
||||
Angular client library for integrating with the Elixir-based auth service. Provides authentication, authorization, and user management capabilities.
|
||||
|
||||
## Features
|
||||
|
||||
- **Authentication**: Login, register, logout with JWT tokens
|
||||
- **Token Management**: Automatic token refresh and storage
|
||||
- **OAuth Integration**: Social authentication with multiple providers
|
||||
- **Two-Factor Authentication**: TOTP and backup codes support
|
||||
- **Route Guards**: Protect routes based on authentication and scopes
|
||||
- **HTTP Interceptor**: Automatic token injection and refresh
|
||||
- **TypeScript Support**: Fully typed interfaces and models
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install auth-client
|
||||
```
|
||||
|
||||
## Setup
|
||||
|
||||
### 1. Import the HTTP Client Module
|
||||
|
||||
```typescript
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
import { NgModule } from '@angular/core';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
HttpClientModule,
|
||||
// ... other imports
|
||||
],
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
### 2. Configure the Auth Service
|
||||
|
||||
```typescript
|
||||
import { AuthService } from 'auth-client';
|
||||
|
||||
export class AppComponent {
|
||||
constructor(private authService: AuthService) {
|
||||
// Configure the base URL for your auth service
|
||||
this.authService.configure('http://localhost:4000');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Add HTTP Interceptor (Optional)
|
||||
|
||||
```typescript
|
||||
import { HTTP_INTERCEPTORS } from '@angular/common/http';
|
||||
import { AuthInterceptor } from 'auth-client';
|
||||
|
||||
@NgModule({
|
||||
providers: [
|
||||
{
|
||||
provide: HTTP_INTERCEPTORS,
|
||||
useClass: AuthInterceptor,
|
||||
multi: true
|
||||
}
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Authentication
|
||||
|
||||
#### Login
|
||||
|
||||
```typescript
|
||||
import { AuthService } from 'auth-client';
|
||||
|
||||
constructor(private authService: AuthService) {}
|
||||
|
||||
login() {
|
||||
this.authService.login({
|
||||
email: 'user@example.com',
|
||||
password: 'password123'
|
||||
}).subscribe({
|
||||
next: (response) => {
|
||||
console.log('Login successful:', response.user);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Login failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### Register
|
||||
|
||||
```typescript
|
||||
register() {
|
||||
this.authService.register({
|
||||
email: 'user@example.com',
|
||||
password: 'password123',
|
||||
first_name: 'John',
|
||||
last_name: 'Doe'
|
||||
}).subscribe({
|
||||
next: (response) => {
|
||||
console.log('Registration successful:', response.user);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Registration failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### Logout
|
||||
|
||||
```typescript
|
||||
logout() {
|
||||
this.authService.logout().subscribe({
|
||||
next: () => {
|
||||
console.log('Logout successful');
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Logout failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Authentication State
|
||||
|
||||
```typescript
|
||||
import { AuthService } from 'auth-client';
|
||||
|
||||
constructor(private authService: AuthService) {
|
||||
// Subscribe to authentication state
|
||||
this.authService.isAuthenticated$.subscribe(isAuth => {
|
||||
console.log('Is authenticated:', isAuth);
|
||||
});
|
||||
|
||||
// Subscribe to current user
|
||||
this.authService.currentUser$.subscribe(user => {
|
||||
console.log('Current user:', user);
|
||||
});
|
||||
|
||||
// Check if authenticated synchronously
|
||||
const isAuth = this.authService.isAuthenticated();
|
||||
}
|
||||
```
|
||||
|
||||
### Route Guards
|
||||
|
||||
#### Protect Authenticated Routes
|
||||
|
||||
```typescript
|
||||
import { AuthGuard } from 'auth-client';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: DashboardComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'admin',
|
||||
component: AdminComponent,
|
||||
canActivate: [AuthGuard],
|
||||
data: {
|
||||
requiredScopes: ['admin'], // Require admin scope
|
||||
requireAllScopes: true, // Must have all scopes (default: false)
|
||||
unauthorizedRedirect: '/access-denied'
|
||||
}
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
#### Protect Guest Routes
|
||||
|
||||
```typescript
|
||||
import { GuestGuard } from 'auth-client';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: 'login',
|
||||
component: LoginComponent,
|
||||
canActivate: [GuestGuard], // Redirect to home if already authenticated
|
||||
data: {
|
||||
authenticatedRedirect: '/dashboard'
|
||||
}
|
||||
}
|
||||
];
|
||||
```
|
||||
|
||||
### OAuth Integration
|
||||
|
||||
#### Get Available Providers
|
||||
|
||||
```typescript
|
||||
import { OAuthService } from 'auth-client';
|
||||
|
||||
constructor(private oauthService: OAuthService) {}
|
||||
|
||||
getProviders() {
|
||||
this.oauthService.getProviders().subscribe(providers => {
|
||||
console.log('Available providers:', providers);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### Initiate OAuth Flow
|
||||
|
||||
```typescript
|
||||
// Redirect flow
|
||||
loginWithGoogle() {
|
||||
this.oauthService.initiateOAuthFlow('google', 'http://localhost:4200/oauth/callback');
|
||||
}
|
||||
|
||||
// Popup flow
|
||||
async loginWithGooglePopup() {
|
||||
try {
|
||||
const result = await this.oauthService.initiateOAuthPopup('google');
|
||||
console.log('OAuth successful:', result);
|
||||
} catch (error) {
|
||||
console.error('OAuth failed:', error);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Handle OAuth Callback
|
||||
|
||||
```typescript
|
||||
// In your callback component
|
||||
ngOnInit() {
|
||||
this.oauthService.completeOAuthFlow('google').subscribe({
|
||||
next: (result) => {
|
||||
console.log('OAuth login successful:', result);
|
||||
this.router.navigate(['/dashboard']);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('OAuth login failed:', error);
|
||||
this.router.navigate(['/login']);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Two-Factor Authentication
|
||||
|
||||
#### Setup 2FA
|
||||
|
||||
```typescript
|
||||
setup2FA() {
|
||||
this.authService.setup2FA().subscribe({
|
||||
next: (response) => {
|
||||
// Display QR code and backup codes
|
||||
console.log('QR Code:', response.qr_code);
|
||||
console.log('Backup codes:', response.backup_codes);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('2FA setup failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### Verify 2FA Setup
|
||||
|
||||
```typescript
|
||||
verify2FA(token: string) {
|
||||
this.authService.verify2FASetup({ token }).subscribe({
|
||||
next: () => {
|
||||
console.log('2FA enabled successfully');
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('2FA verification failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### User Management
|
||||
|
||||
#### Update Profile
|
||||
|
||||
```typescript
|
||||
updateProfile() {
|
||||
this.authService.updateProfile({
|
||||
first_name: 'Jane',
|
||||
last_name: 'Smith'
|
||||
}).subscribe({
|
||||
next: (user) => {
|
||||
console.log('Profile updated:', user);
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Profile update failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### Change Password
|
||||
|
||||
```typescript
|
||||
changePassword() {
|
||||
this.authService.changePassword({
|
||||
current_password: 'oldpassword',
|
||||
new_password: 'newpassword',
|
||||
new_password_confirmation: 'newpassword'
|
||||
}).subscribe({
|
||||
next: () => {
|
||||
console.log('Password changed successfully');
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Password change failed:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Token Management
|
||||
|
||||
#### Manual Token Operations
|
||||
|
||||
```typescript
|
||||
import { TokenService } from 'auth-client';
|
||||
|
||||
constructor(private tokenService: TokenService) {}
|
||||
|
||||
checkToken() {
|
||||
// Check if token exists and is valid
|
||||
const isValid = this.tokenService.isTokenValid();
|
||||
|
||||
// Get user information from token
|
||||
const userId = this.tokenService.getUserId();
|
||||
const email = this.tokenService.getUserEmail();
|
||||
const scopes = this.tokenService.getUserScopes();
|
||||
|
||||
// Check scopes
|
||||
const hasAdminScope = this.tokenService.hasScope('admin');
|
||||
const hasAnyScope = this.tokenService.hasAnyScope(['read', 'write']);
|
||||
const hasAllScopes = this.tokenService.hasAllScopes(['read', 'write']);
|
||||
}
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Models
|
||||
|
||||
All TypeScript interfaces are available for import:
|
||||
|
||||
```typescript
|
||||
import {
|
||||
User,
|
||||
LoginRequest,
|
||||
LoginResponse,
|
||||
RegisterRequest,
|
||||
TokenPair,
|
||||
ApiError,
|
||||
// ... and more
|
||||
} from 'auth-client';
|
||||
```
|
||||
|
||||
### Services
|
||||
|
||||
- **AuthService**: Main authentication service
|
||||
- **TokenService**: Token management and validation
|
||||
- **OAuthService**: OAuth provider integration
|
||||
- **AuthHttpService**: Low-level HTTP client
|
||||
|
||||
### Guards
|
||||
|
||||
- **AuthGuard**: Protect authenticated routes
|
||||
- **GuestGuard**: Protect guest-only routes
|
||||
|
||||
### Interceptors
|
||||
|
||||
- **AuthInterceptor**: Automatic token injection and refresh
|
||||
|
||||
## Configuration
|
||||
|
||||
### Environment Variables
|
||||
|
||||
You can configure the auth service URL through your environment:
|
||||
|
||||
```typescript
|
||||
// environment.ts
|
||||
export const environment = {
|
||||
authServiceUrl: 'http://localhost:4000'
|
||||
};
|
||||
|
||||
// app.component.ts
|
||||
constructor(private authService: AuthService) {
|
||||
this.authService.configure(environment.authServiceUrl);
|
||||
}
|
||||
```
|
||||
|
||||
### Token Storage
|
||||
|
||||
By default, tokens are stored in localStorage. The library handles:
|
||||
|
||||
- Automatic token refresh before expiration
|
||||
- Cross-tab synchronization
|
||||
- Token validation and cleanup
|
||||
|
||||
## Error Handling
|
||||
|
||||
All services return Observable streams with proper error handling:
|
||||
|
||||
```typescript
|
||||
this.authService.login(credentials).subscribe({
|
||||
next: (response) => {
|
||||
// Handle success
|
||||
},
|
||||
error: (apiError: ApiError) => {
|
||||
console.error('Error:', apiError.error);
|
||||
|
||||
// Handle specific errors
|
||||
if (apiError.requires_2fa) {
|
||||
// Redirect to 2FA input
|
||||
}
|
||||
|
||||
if (apiError.details) {
|
||||
// Handle validation errors
|
||||
console.error('Validation errors:', apiError.details);
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build auth-client
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
## Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/auth-client
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test auth-client
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
This library is designed to work with the Elixir auth service. Please ensure API compatibility when making changes.
|
||||
|
||||
## License
|
||||
|
||||
MIT License
|
||||
Repository: auth-client
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.accessibility-demo {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: 32px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles' as ui;
|
||||
@use 'ui-design-system/src/styles' as ui;
|
||||
|
||||
.backgrounds-demo {
|
||||
padding: 2rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding-bottom: 120px; // Extra space to accommodate bottom navigation examples
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
.carousel-demo {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-wrapper {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
|
||||
@use 'ui-design-system/src/styles/semantic' as semantic;
|
||||
|
||||
.conversion-demo {
|
||||
min-height: 100vh;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.enhanced-table-demo {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
.demo-container {
|
||||
padding: 2rem;
|
||||
max-width: 1200px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-section-xl;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/tokens" as *;
|
||||
@use 'ui-design-system/src/styles/tokens' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.popover-demo {
|
||||
padding: $semantic-spacing-layout-section-xs;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as tokens;
|
||||
@use 'ui-design-system/src/styles/semantic' as tokens;
|
||||
|
||||
.demo-container {
|
||||
padding: tokens.$semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-sm;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../../../../ui-design-system/src/styles/semantic";
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-section-md;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
|
||||
// ==========================================================================
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic' as semantic;
|
||||
@use 'ui-design-system/src/styles/semantic' as semantic;
|
||||
|
||||
.sidebar-container {
|
||||
padding: 1rem 0;
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
$base-typography-font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
$base-typography-font-family-display: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
|
||||
|
||||
@import '../../../ui-design-system/src/styles/semantic';
|
||||
@import 'ui-design-system/src/styles/semantic';
|
||||
|
||||
// These overrides will cascade through all semantic typography tokens
|
||||
// that use $base-typography-font-family-sans and $base-typography-font-family-display
|
||||
|
||||
@@ -5,8 +5,8 @@ $inter-font-path: "/fonts/inter/" !default;
|
||||
$comfortaa-font-path: "/fonts/comfortaa/" !default;
|
||||
|
||||
// Import specific fonts we need for the demo
|
||||
@import '../../ui-design-system/src/styles/fontfaces/inter';
|
||||
@import '../../ui-design-system/src/styles/fontfaces/comfortaa';
|
||||
@import 'ui-design-system/src/styles/fontfaces/inter';
|
||||
@import 'ui-design-system/src/styles/fontfaces/comfortaa';
|
||||
|
||||
// Import project variables (which now has semantic tokens available)
|
||||
@import 'scss/_variables';
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# HclStudio
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build hcl-studio
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/hcl-studio
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: hcl-studio
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# SharedUtils
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build shared-utils
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/shared-utils
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: shared-utils
|
||||
|
||||
@@ -1,364 +1 @@
|
||||
# UI Accessibility
|
||||
|
||||
A comprehensive Angular accessibility library that enhances your existing components with WCAG 2.1 Level AA compliant features while using semantic tokens from your design system.
|
||||
|
||||
## Features
|
||||
|
||||
- **🎯 Focus Management** - Advanced focus trapping, restoration, and monitoring
|
||||
- **⌨️ Keyboard Navigation** - Arrow keys, roving tabindex, custom shortcuts
|
||||
- **📢 Screen Reader Support** - Live announcements, ARIA enhancements
|
||||
- **🎨 Design System Integration** - Uses semantic motion, color, and spacing tokens
|
||||
- **♿ High Contrast & Reduced Motion** - Automatic detection and adaptation
|
||||
- **🔧 Zero Rewrites Required** - Enhance existing components with directives
|
||||
- **🧪 Developer Experience** - Debug modes, warnings, and comprehensive logging
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install ui-accessibility
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
### 1. Import the Module
|
||||
|
||||
```typescript
|
||||
import { UiAccessibilityModule } from 'ui-accessibility';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
UiAccessibilityModule.forRoot({
|
||||
// Optional configuration
|
||||
skipLinks: { enabled: true },
|
||||
keyboard: { enableArrowNavigation: true },
|
||||
development: { warnings: true }
|
||||
})
|
||||
]
|
||||
})
|
||||
export class AppModule {}
|
||||
```
|
||||
|
||||
### 2. Import SCSS Utilities
|
||||
|
||||
```scss
|
||||
// Import accessibility utilities (uses your semantic tokens)
|
||||
@use 'ui-accessibility/src/lib/utilities/a11y-utilities';
|
||||
```
|
||||
|
||||
### 3. Add Skip Links
|
||||
|
||||
```html
|
||||
<!-- Add to your app.component.html -->
|
||||
<ui-skip-links></ui-skip-links>
|
||||
```
|
||||
|
||||
## Core Features
|
||||
|
||||
### Focus Trap Directive
|
||||
|
||||
Trap focus within containers like modals and drawers:
|
||||
|
||||
```html
|
||||
<!-- Before: Basic modal -->
|
||||
<ui-modal [open]="isOpen">
|
||||
<h2>Settings</h2>
|
||||
<input type="text" placeholder="Name">
|
||||
<button>Save</button>
|
||||
</ui-modal>
|
||||
|
||||
<!-- After: Focus-trapped modal -->
|
||||
<ui-modal [open]="isOpen" uiFocusTrap>
|
||||
<h2>Settings</h2>
|
||||
<input type="text" placeholder="Name">
|
||||
<button>Save</button>
|
||||
</ui-modal>
|
||||
```
|
||||
|
||||
**Features:**
|
||||
- Automatic focus on first element
|
||||
- Tab wrapping within container
|
||||
- Focus restoration on close
|
||||
- Uses semantic motion tokens for transitions
|
||||
|
||||
### Arrow Navigation Directive
|
||||
|
||||
Add keyboard navigation to lists, menus, and grids:
|
||||
|
||||
```html
|
||||
<!-- Before: Basic menu -->
|
||||
<ui-menu>
|
||||
<ui-menu-item>Profile</ui-menu-item>
|
||||
<ui-menu-item>Settings</ui-menu-item>
|
||||
<ui-menu-item>Logout</ui-menu-item>
|
||||
</ui-menu>
|
||||
|
||||
<!-- After: Keyboard navigable menu -->
|
||||
<ui-menu uiArrowNavigation="vertical">
|
||||
<ui-menu-item tabindex="0">Profile</ui-menu-item>
|
||||
<ui-menu-item tabindex="-1">Settings</ui-menu-item>
|
||||
<ui-menu-item tabindex="-1">Logout</ui-menu-item>
|
||||
</ui-menu>
|
||||
```
|
||||
|
||||
**Navigation Options:**
|
||||
- `vertical` - Up/Down arrows
|
||||
- `horizontal` - Left/Right arrows
|
||||
- `both` - All arrow keys
|
||||
- `grid` - 2D navigation with column support
|
||||
|
||||
### Live Announcer Service
|
||||
|
||||
Announce dynamic content changes to screen readers:
|
||||
|
||||
```typescript
|
||||
import { LiveAnnouncerService } from 'ui-accessibility';
|
||||
|
||||
constructor(private announcer: LiveAnnouncerService) {}
|
||||
|
||||
// Announce with different politeness levels
|
||||
onItemAdded() {
|
||||
this.announcer.announce('Item added to cart', 'polite');
|
||||
}
|
||||
|
||||
onError() {
|
||||
this.announcer.announce('Error: Please fix the required fields', 'assertive');
|
||||
}
|
||||
|
||||
// Announce a sequence of messages
|
||||
onProcessComplete() {
|
||||
this.announcer.announceSequence([
|
||||
'Processing started',
|
||||
'Validating data',
|
||||
'Processing complete'
|
||||
], 'polite', 1500);
|
||||
}
|
||||
```
|
||||
|
||||
### Screen Reader Components
|
||||
|
||||
Hide content visually while keeping it accessible:
|
||||
|
||||
```html
|
||||
<!-- Screen reader only text -->
|
||||
<ui-screen-reader-only>
|
||||
Additional context for screen readers
|
||||
</ui-screen-reader-only>
|
||||
|
||||
<!-- Focusable hidden text (becomes visible on focus) -->
|
||||
<ui-screen-reader-only type="focusable">
|
||||
Press Enter to activate
|
||||
</ui-screen-reader-only>
|
||||
|
||||
<!-- Status messages -->
|
||||
<ui-screen-reader-only type="status" statusType="error" [visible]="hasError">
|
||||
Please correct the errors below
|
||||
</ui-screen-reader-only>
|
||||
```
|
||||
|
||||
### Keyboard Manager Service
|
||||
|
||||
Register global and element-specific keyboard shortcuts:
|
||||
|
||||
```typescript
|
||||
import { KeyboardManagerService } from 'ui-accessibility';
|
||||
|
||||
constructor(private keyboard: KeyboardManagerService) {}
|
||||
|
||||
ngOnInit() {
|
||||
// Global shortcut
|
||||
this.keyboard.registerGlobalShortcut('save', {
|
||||
key: 's',
|
||||
ctrlKey: true,
|
||||
description: 'Save document',
|
||||
handler: () => this.save()
|
||||
});
|
||||
|
||||
// Element-specific shortcut
|
||||
const element = this.elementRef.nativeElement;
|
||||
this.keyboard.registerElementShortcut('close', element, {
|
||||
key: 'Escape',
|
||||
description: 'Close dialog',
|
||||
handler: () => this.close()
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## Design System Integration
|
||||
|
||||
All features use semantic tokens from your design system:
|
||||
|
||||
### Focus Indicators
|
||||
|
||||
```scss
|
||||
// Automatic integration with your focus tokens
|
||||
.my-component:focus-visible {
|
||||
outline: $semantic-border-focus-width solid $semantic-color-focus;
|
||||
box-shadow: $semantic-shadow-input-focus;
|
||||
transition: outline-color $semantic-motion-duration-fast;
|
||||
}
|
||||
```
|
||||
|
||||
### Skip Links Styling
|
||||
|
||||
Uses your semantic spacing, colors, and typography:
|
||||
|
||||
```scss
|
||||
.skip-link {
|
||||
padding: $semantic-spacing-component-padding-y $semantic-spacing-component-padding-x;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
border-color: $semantic-color-border-focus;
|
||||
}
|
||||
```
|
||||
|
||||
### Motion & Animations
|
||||
|
||||
Respects reduced motion preferences:
|
||||
|
||||
```typescript
|
||||
// Service automatically detects preference
|
||||
const duration = this.highContrast.getMotionDuration('300ms', '0.01s');
|
||||
|
||||
// SCSS utilities adapt automatically
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-in-a11y {
|
||||
animation-duration: 0.01s;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Configuration
|
||||
|
||||
### Full Configuration Example
|
||||
|
||||
```typescript
|
||||
UiAccessibilityModule.forRoot({
|
||||
announcer: {
|
||||
defaultPoliteness: 'polite',
|
||||
defaultDuration: 4000,
|
||||
enabled: true
|
||||
},
|
||||
focusManagement: {
|
||||
trapFocus: true,
|
||||
restoreFocus: true,
|
||||
focusVisibleEnabled: true
|
||||
},
|
||||
keyboard: {
|
||||
enableShortcuts: true,
|
||||
enableArrowNavigation: true,
|
||||
customShortcuts: [
|
||||
{ key: '/', ctrlKey: true, description: 'Search' }
|
||||
]
|
||||
},
|
||||
skipLinks: {
|
||||
enabled: true,
|
||||
position: 'top',
|
||||
links: [
|
||||
{ href: '#main', text: 'Skip to main content' },
|
||||
{ href: '#nav', text: 'Skip to navigation' },
|
||||
{ href: '#search', text: 'Skip to search' }
|
||||
]
|
||||
},
|
||||
accessibility: {
|
||||
respectReducedMotion: true,
|
||||
respectHighContrast: true,
|
||||
injectAccessibilityStyles: true,
|
||||
addBodyClasses: true
|
||||
},
|
||||
development: {
|
||||
warnings: true,
|
||||
logging: true
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### High Contrast & Reduced Motion
|
||||
|
||||
Automatic detection and CSS class application:
|
||||
|
||||
```html
|
||||
<!-- Body classes added automatically -->
|
||||
<body class="prefers-reduced-motion prefers-high-contrast">
|
||||
|
||||
<!-- Your CSS can respond -->
|
||||
<style>
|
||||
.prefers-reduced-motion * {
|
||||
animation-duration: 0.01s !important;
|
||||
}
|
||||
|
||||
.prefers-high-contrast .card {
|
||||
border: 1px solid ButtonText;
|
||||
background: ButtonFace;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Available Directives
|
||||
|
||||
| Directive | Purpose | Usage |
|
||||
|-----------|---------|--------|
|
||||
| `uiFocusTrap` | Trap focus within container | `<div uiFocusTrap>` |
|
||||
| `uiArrowNavigation` | Arrow key navigation | `<ul uiArrowNavigation="vertical">` |
|
||||
|
||||
## Available Services
|
||||
|
||||
| Service | Purpose | Key Methods |
|
||||
|---------|---------|-------------|
|
||||
| `LiveAnnouncerService` | Screen reader announcements | `announce()`, `announceSequence()` |
|
||||
| `FocusMonitorService` | Focus origin tracking | `monitor()`, `focusVia()` |
|
||||
| `KeyboardManagerService` | Keyboard shortcuts | `registerGlobalShortcut()` |
|
||||
| `HighContrastService` | Accessibility preferences | `getCurrentPreferences()` |
|
||||
| `A11yConfigService` | Configuration management | `getConfig()`, `isEnabled()` |
|
||||
|
||||
## SCSS Utilities
|
||||
|
||||
```scss
|
||||
// Import specific utilities
|
||||
@use 'ui-accessibility/src/lib/utilities/focus-visible';
|
||||
@use 'ui-accessibility/src/lib/utilities/screen-reader';
|
||||
|
||||
// Use utility classes
|
||||
.my-element {
|
||||
@extend .focus-ring; // Adds focus ring on :focus-visible
|
||||
@extend .touch-target; // Ensures minimum touch target size
|
||||
}
|
||||
|
||||
// Screen reader utilities
|
||||
.sr-instructions {
|
||||
@extend .sr-only; // Visually hidden, screen reader accessible
|
||||
}
|
||||
|
||||
.status-text {
|
||||
@extend .sr-only-focusable; // Hidden until focused
|
||||
}
|
||||
```
|
||||
|
||||
## WCAG 2.1 Compliance
|
||||
|
||||
This library helps achieve Level AA compliance:
|
||||
|
||||
- ✅ **1.3.1** - Info and Relationships (ARIA attributes)
|
||||
- ✅ **1.4.3** - Contrast (High contrast mode support)
|
||||
- ✅ **1.4.13** - Content on Hover/Focus (Proper focus management)
|
||||
- ✅ **2.1.1** - Keyboard (Full keyboard navigation)
|
||||
- ✅ **2.1.2** - No Keyboard Trap (Proper focus trapping)
|
||||
- ✅ **2.4.1** - Bypass Blocks (Skip links)
|
||||
- ✅ **2.4.3** - Focus Order (Logical tab sequence)
|
||||
- ✅ **2.4.7** - Focus Visible (Enhanced focus indicators)
|
||||
- ✅ **3.2.1** - On Focus (Predictable focus behavior)
|
||||
- ✅ **4.1.3** - Status Messages (Live announcements)
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Chrome 88+
|
||||
- Firefox 85+
|
||||
- Safari 14+
|
||||
- Edge 88+
|
||||
|
||||
## Demo
|
||||
|
||||
Visit `/accessibility` in your demo application to see interactive examples of all features.
|
||||
|
||||
## Contributing
|
||||
|
||||
This library integrates seamlessly with your existing component architecture and design system tokens, requiring no rewrites of existing components.
|
||||
Repository: ui-accessibility
|
||||
|
||||
@@ -1,164 +1 @@
|
||||
# UI Animations
|
||||
|
||||
A comprehensive CSS animation library with Angular services and directives for programmatic control.
|
||||
|
||||
## Features
|
||||
|
||||
- **Pure CSS animations** - Framework agnostic, works everywhere
|
||||
- **Angular integration** - Services and directives for programmatic control
|
||||
- **Comprehensive collection** - Entrance, exit, emphasis, and transition animations
|
||||
- **Design system integration** - Uses semantic motion tokens for consistent timing and easing
|
||||
- **Utility classes** - Animation timing, delays, and control utilities
|
||||
- **SCSS mixins** - Create custom animations easily
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install ui-animations
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Import Styles
|
||||
|
||||
Add to your global styles or component styles:
|
||||
|
||||
```scss
|
||||
// Complete animation library
|
||||
@use 'ui-animations/src/styles' as animations;
|
||||
|
||||
// Or import specific modules
|
||||
@use 'ui-animations/src/styles/animations/entrances';
|
||||
@use 'ui-animations/src/styles/animations/emphasis';
|
||||
@use 'ui-animations/src/styles/utilities/animation-utilities';
|
||||
```
|
||||
|
||||
### CSS Classes
|
||||
|
||||
Simply add animation classes to your HTML elements:
|
||||
|
||||
```html
|
||||
<!-- Entrance animations -->
|
||||
<div class="animate-fade-in">Fade in animation</div>
|
||||
<div class="animate-slide-in-up animation-delay-200">Delayed slide up</div>
|
||||
|
||||
<!-- Emphasis animations -->
|
||||
<button class="animate-bounce">Bouncing button</button>
|
||||
<div class="animate-pulse animation-infinite">Pulsing element</div>
|
||||
|
||||
<!-- Exit animations -->
|
||||
<div class="animate-fade-out">Fade out animation</div>
|
||||
```
|
||||
|
||||
### Angular Service
|
||||
|
||||
```typescript
|
||||
import { UiAnimationsService } from 'ui-animations';
|
||||
|
||||
constructor(private animationService: UiAnimationsService) {}
|
||||
|
||||
// Animate an element
|
||||
animateElement() {
|
||||
const element = document.getElementById('my-element');
|
||||
this.animationService.animateOnce(element, 'animate-bounce');
|
||||
}
|
||||
|
||||
// Animate with callback
|
||||
animateWithCallback() {
|
||||
const element = document.getElementById('my-element');
|
||||
this.animationService.animate(element, 'animate-fade-out', () => {
|
||||
console.log('Animation completed!');
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Angular Directive
|
||||
|
||||
```typescript
|
||||
import { AnimateDirective } from 'ui-animations';
|
||||
|
||||
@Component({
|
||||
imports: [AnimateDirective]
|
||||
})
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Immediate animation -->
|
||||
<div uiAnimate="animate-fade-in-up">Auto animates on load</div>
|
||||
|
||||
<!-- Hover trigger -->
|
||||
<div uiAnimate="animate-bounce" [animationTrigger]="'hover'">
|
||||
Hover to animate
|
||||
</div>
|
||||
|
||||
<!-- Click trigger with single use -->
|
||||
<button uiAnimate="animate-tada" [animationTrigger]="'click'" [animationOnce]="true">
|
||||
Click me!
|
||||
</button>
|
||||
```
|
||||
|
||||
## Animation Categories
|
||||
|
||||
### Entrances
|
||||
- `animate-fade-in` - Basic fade in
|
||||
- `animate-fade-in-up/down/left/right` - Fade with direction
|
||||
- `animate-slide-in-up/down` - Slide animations
|
||||
- `animate-zoom-in` - Scale up animation
|
||||
- `animate-rotate-in` - Rotate entrance
|
||||
|
||||
### Exits
|
||||
- `animate-fade-out` - Basic fade out
|
||||
- `animate-fade-out-up/down/left/right` - Fade with direction
|
||||
- `animate-slide-out-up/down` - Slide animations
|
||||
- `animate-zoom-out` - Scale down animation
|
||||
- `animate-rotate-out` - Rotate exit
|
||||
|
||||
### Emphasis
|
||||
- `animate-bounce` - Bouncing effect
|
||||
- `animate-shake` - Horizontal shake
|
||||
- `animate-pulse` - Scaling pulse
|
||||
- `animate-wobble` - Wobble motion
|
||||
- `animate-tada` - Celebration animation
|
||||
- `animate-heartbeat` - Heart beat effect
|
||||
|
||||
### Utilities
|
||||
- `animation-delay-100/200/300/500/1000` - Animation delays
|
||||
- `animation-duration-fast/normal/slow/slower` - Duration control
|
||||
- `animation-infinite/once/twice` - Iteration control
|
||||
- `animation-paused/running` - Playback control
|
||||
|
||||
## SCSS Mixins
|
||||
|
||||
Create custom animations using provided mixins with semantic tokens:
|
||||
|
||||
```scss
|
||||
@use 'ui-animations/src/styles/mixins/animation-mixins' as mixins;
|
||||
@use 'ui-design-system/src/styles/semantic/motion' as motion;
|
||||
|
||||
.my-custom-animation {
|
||||
@include mixins.animate(myKeyframes, motion.$semantic-motion-duration-normal, motion.$semantic-motion-easing-ease-out);
|
||||
}
|
||||
|
||||
.hover-effect {
|
||||
@include mixins.hover-animation(transform, scale(1.1), motion.$semantic-motion-duration-fast);
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
@include mixins.loading-animation(40px, #007bff);
|
||||
}
|
||||
```
|
||||
|
||||
## Design System Integration
|
||||
|
||||
All animations now use semantic motion tokens from the design system:
|
||||
|
||||
- **Durations**: `$semantic-motion-duration-fast`, `$semantic-motion-duration-normal`, `$semantic-motion-duration-slow`, etc.
|
||||
- **Easing**: `$semantic-motion-easing-ease-out`, `$semantic-motion-easing-spring`, `$semantic-motion-easing-bounce`, etc.
|
||||
- **Spacing**: Animation distances use semantic spacing tokens for consistency
|
||||
- **Timing**: Delays use semantic transition timing tokens
|
||||
|
||||
This ensures animations are consistent with your design system's motion principles.
|
||||
|
||||
## Demo
|
||||
|
||||
Visit the demo application to see all animations in action and experiment with different options.
|
||||
Repository: ui-animations
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# UiBackgrounds
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build ui-backgrounds
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/ui-backgrounds
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: ui-backgrounds
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# UiCodeDisplay
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build ui-code-display
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/ui-code-display
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: ui-code-display
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Code block component styles with design token integration
|
||||
.code-block {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Code snippet component styles with design token integration
|
||||
.code-snippet {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Inline code component styles with design token integration
|
||||
.inline-code {
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# UiDataUtils
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build ui-data-utils
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/ui-data-utils
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: ui-data-utils
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# SharedUi
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build shared-ui
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/shared-ui
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: ui-design-system
|
||||
|
||||
@@ -1,63 +1 @@
|
||||
# UiEssentials
|
||||
|
||||
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.0.
|
||||
|
||||
## Code scaffolding
|
||||
|
||||
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
||||
|
||||
```bash
|
||||
ng generate component component-name
|
||||
```
|
||||
|
||||
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
||||
|
||||
```bash
|
||||
ng generate --help
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To build the library, run:
|
||||
|
||||
```bash
|
||||
ng build ui-essentials
|
||||
```
|
||||
|
||||
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
||||
|
||||
### Publishing the Library
|
||||
|
||||
Once the project is built, you can publish your library by following these steps:
|
||||
|
||||
1. Navigate to the `dist` directory:
|
||||
```bash
|
||||
cd dist/ui-essentials
|
||||
```
|
||||
|
||||
2. Run the `npm publish` command to publish your library to the npm registry:
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
## Running unit tests
|
||||
|
||||
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
||||
|
||||
```bash
|
||||
ng test
|
||||
```
|
||||
|
||||
## Running end-to-end tests
|
||||
|
||||
For end-to-end (e2e) testing, run:
|
||||
|
||||
```bash
|
||||
ng e2e
|
||||
```
|
||||
|
||||
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
||||
Repository: ui-essentials
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.ui-fab-menu {
|
||||
position: relative;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
.ui-fab {
|
||||
// Reset and base styles
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
.ui-ghost-button {
|
||||
// Reset and base styles
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.ui-icon-button {
|
||||
// Reset and base styles
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.ui-split-button {
|
||||
// Reset and base styles
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
.ui-text-button {
|
||||
// Reset and base styles
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
.ui-accordion {
|
||||
// Core Structure
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
.skyui-avatar {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
/**
|
||||
* ==========================================================================
|
||||
* BADGE COMPONENT STYLES
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
@mixin font-properties($font-map) {
|
||||
@if type-of($font-map) == 'map' {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
.ui-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic/index" as *;
|
||||
@use 'ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Tokens available globally via main application styles
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
|
||||
.ui-enhanced-table-container {
|
||||
position: relative;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use "../../../../../../ui-design-system/src/styles/semantic" as *;
|
||||
@use 'ui-design-system/src/styles/semantic' as *;
|
||||
.ui-table-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user