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

Add comprehensive library expansion with new components and demos

Browse Source 
- Add new libraries: ui-accessibility, ui-animations, ui-backgrounds, ui-code-display, ui-data-utils, ui-font-manager, hcl-studio
- Add extensive layout components: gallery-grid, infinite-scroll-container, kanban-board, masonry, split-view, sticky-layout
- Add comprehensive demo components for all new features
- Update project configuration and dependencies
- Expand component exports and routing structure
- Add UI landing pages planning document

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
2025-09-05 05:37:37 +10:00
parent 876eb301a0
commit 5346d6d0c9
5476 changed files with 350855 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
projects/demo-ui-essentials/src/app/demos/split-view-demo/split-view-demo.component.scss Normal file
View File

@@ -0,0 +1,157 @@
@use '../../../../../ui-design-system/src/styles/semantic' as *;
.demo-container {
padding: $semantic-spacing-component-lg;
.demo-section {
margin-bottom: $semantic-spacing-layout-section-lg;
h3 {
font-family: map-get($semantic-typography-heading-h3, font-family);
font-size: map-get($semantic-typography-heading-h3, font-size);
font-weight: map-get($semantic-typography-heading-h3, font-weight);
line-height: map-get($semantic-typography-heading-h3, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-component-md;
}
.demo-split-container {
height: 400px;
margin-bottom: $semantic-spacing-component-lg;
border: $semantic-border-width-1 solid $semantic-color-border-secondary;
border-radius: $semantic-border-radius-md;
}
.demo-panel-content {
padding: $semantic-spacing-component-md;
background: $semantic-color-surface-primary;
height: 100%;
h4 {
font-family: map-get($semantic-typography-heading-h4, font-family);
font-size: map-get($semantic-typography-heading-h4, font-size);
font-weight: map-get($semantic-typography-heading-h4, font-weight);
line-height: map-get($semantic-typography-heading-h4, line-height);
color: $semantic-color-text-primary;
margin-bottom: $semantic-spacing-component-sm;
}
p {
font-family: map-get($semantic-typography-body-medium, font-family);
font-size: map-get($semantic-typography-body-medium, font-size);
font-weight: map-get($semantic-typography-body-medium, font-weight);
line-height: map-get($semantic-typography-body-medium, line-height);
color: $semantic-color-text-secondary;
margin-bottom: $semantic-spacing-content-paragraph;
}
&--primary {
background: $semantic-color-surface-primary;
}
&--secondary {
background: $semantic-color-surface-secondary;
}
&--elevated {
background: $semantic-color-surface-elevated;
box-shadow: $semantic-shadow-elevation-1;
}
}
.demo-controls {
display: flex;
gap: $semantic-spacing-component-sm;
margin-bottom: $semantic-spacing-component-md;
flex-wrap: wrap;
button {
padding: $semantic-spacing-interactive-button-padding-y $semantic-spacing-interactive-button-padding-x;
background: $semantic-color-primary;
color: $semantic-color-on-primary;
border: none;
border-radius: $semantic-border-button-radius;
cursor: pointer;
font-family: map-get($semantic-typography-button-medium, font-family);
font-size: map-get($semantic-typography-button-medium, font-size);
font-weight: map-get($semantic-typography-button-medium, font-weight);
line-height: map-get($semantic-typography-button-medium, line-height);
transition: all $semantic-motion-duration-fast $semantic-motion-easing-ease;
&:hover {
background: $semantic-color-primary;
box-shadow: $semantic-shadow-button-hover;
opacity: $semantic-opacity-hover;
}
&:focus-visible {
outline: 2px solid $semantic-color-focus;
outline-offset: 2px;
}
&--secondary {
background: $semantic-color-secondary;
color: $semantic-color-on-secondary;
}
&--success {
background: $semantic-color-success;
color: $semantic-color-on-success;
}
&--danger {
background: $semantic-color-danger;
color: $semantic-color-on-danger;
}
}
}
.demo-info {
padding: $semantic-spacing-component-md;
background: $semantic-color-surface-container;
border: $semantic-border-width-1 solid $semantic-color-border-subtle;
border-radius: $semantic-border-radius-sm;
margin-top: $semantic-spacing-component-md;
p {
font-family: map-get($semantic-typography-body-small, font-family);
font-size: map-get($semantic-typography-body-small, font-size);
font-weight: map-get($semantic-typography-body-small, font-weight);
line-height: map-get($semantic-typography-body-small, line-height);
color: $semantic-color-text-secondary;
margin-bottom: $semantic-spacing-content-line-tight;
&:last-child {
margin-bottom: 0;
}
}
strong {
color: $semantic-color-text-primary;
font-weight: $semantic-typography-font-weight-semibold;
}
}
}
}
@media (max-width: $semantic-breakpoint-md - 1) {
.demo-container {
padding: $semantic-spacing-component-md;
.demo-section .demo-split-container {
height: 300px;
}
.demo-section .demo-controls {
gap: $semantic-spacing-component-xs;
button {
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
font-family: map-get($semantic-typography-button-small, font-family);
font-size: map-get($semantic-typography-button-small, font-size);
font-weight: map-get($semantic-typography-button-small, font-weight);
line-height: map-get($semantic-typography-button-small, line-height);
}
}
}
}