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

Fix SCSS semantic token variable errors across components

Browse Source 
- Replace incorrect semantic token names with correct ones:
  • $semantic-border-width-thin → $semantic-border-width-1
  • $semantic-color-border-default → $semantic-color-border-primary
  • $semantic-spacing-content-* → $semantic-spacing-component-*
  • $semantic-typography-body-* → $semantic-typography-font-size-*
  • $semantic-typography-caption-* → $semantic-typography-font-size-*
  • $semantic-motion-easing-standard → $semantic-easing-standard
  • $semantic-color-surface-tertiary → $semantic-color-surface-secondary
  • Various hover color tokens → base color tokens

- Fix typography map usage errors:
  • Replace heading map tokens with individual size tokens
  • $semantic-typography-heading-h* → $semantic-typography-heading-h*-size

- Update affected components:
  • tooltip, divider, progress-circle, range-slider components
  • Related demo components and SCSS files

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
skyai_dev
2025-09-03 07:50:34 +10:00
parent 5983722793
commit 6f0ab0cf5f
62 changed files with 3493 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
projects/demo-ui-essentials/src/app/demos/divider-demo/divider-demo.component.ts Normal file
View File

@@ -0,0 +1,104 @@
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DividerComponent } from '../../../../../ui-essentials/src/public-api';
@Component({
selector: 'ui-divider-demo',
standalone: true,
imports: [CommonModule, DividerComponent],
template: `
<div class="demo-container">
<h2>Divider Demo</h2>
<!-- Orientation -->
<section class="demo-section">
<h3>Orientation</h3>
<div class="demo-row">
<div style="width: 100%;">
<p>Content above</p>
<ui-divider orientation="horizontal"></ui-divider>
<p>Content below</p>
</div>
</div>
<div class="demo-row" style="height: 100px; display: flex; align-items: center;">
<p>Left content</p>
<ui-divider orientation="vertical"></ui-divider>
<p>Right content</p>
</div>
</section>
<!-- Style Variants -->
<section class="demo-section">
<h3>Style Variants</h3>
<div class="demo-column">
<div>
<p>Solid divider</p>
<ui-divider variant="solid"></ui-divider>
</div>
<div>
<p>Dashed divider</p>
<ui-divider variant="dashed"></ui-divider>
</div>
<div>
<p>Dotted divider</p>
<ui-divider variant="dotted"></ui-divider>
</div>
</div>
</section>
<!-- Thickness Variants -->
<section class="demo-section">
<h3>Thickness</h3>
<div class="demo-column">
<div>
<p>Thin divider</p>
<ui-divider thickness="thin"></ui-divider>
</div>
<div>
<p>Default thickness</p>
<ui-divider thickness="default"></ui-divider>
</div>
<div>
<p>Thick divider</p>
<ui-divider thickness="thick"></ui-divider>
</div>
</div>
</section>
<!-- With Content -->
<section class="demo-section">
<h3>With Content</h3>
<div class="demo-column">
<ui-divider>OR</ui-divider>
<ui-divider>Section Break</ui-divider>
<ui-divider>More Content</ui-divider>
</div>
</section>
<!-- Combined Examples -->
<section class="demo-section">
<h3>Combined Examples</h3>
<div class="demo-column">
<ui-divider variant="dashed" thickness="thin">Dashed Thin</ui-divider>
<ui-divider variant="dotted" thickness="thick">Dotted Thick</ui-divider>
</div>
</section>
<!-- Vertical Examples -->
<section class="demo-section">
<h3>Vertical Examples</h3>
<div style="display: flex; height: 80px; align-items: center; gap: 16px;">
<span>Item 1</span>
<ui-divider orientation="vertical" variant="solid" thickness="thin"></ui-divider>
<span>Item 2</span>
<ui-divider orientation="vertical" variant="dashed"></ui-divider>
<span>Item 3</span>
<ui-divider orientation="vertical" variant="dotted" thickness="thick"></ui-divider>
<span>Item 4</span>
</div>
</section>
</div>
`,
styleUrl: './divider-demo.component.scss'
})
export class DividerDemoComponent {}