Fix SCSS semantic token variable errors across components

- 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>

projects/demo-ui-essentials/src/app/demos/demos.routes.ts

@@ -39,6 +39,10 @@ import { AutocompleteDemoComponent } from './autocomplete-demo/autocomplete-demo
 import { BackdropDemoComponent } from './backdrop-demo/backdrop-demo.component';
 import { OverlayContainerDemoComponent } from './overlay-container-demo/overlay-container-demo.component';
 import { LoadingSpinnerDemoComponent } from './loading-spinner-demo/loading-spinner-demo.component';
+import { ProgressCircleDemoComponent } from './progress-circle-demo/progress-circle-demo.component';
+import { RangeSliderDemoComponent } from './range-slider-demo/range-slider-demo.component';
+import { DividerDemoComponent } from './divider-demo/divider-demo.component';
+import { TooltipDemoComponent } from './tooltip-demo/tooltip-demo.component';
 
 
 @Component({
@@ -193,12 +197,28 @@ import { LoadingSpinnerDemoComponent } from './loading-spinner-demo/loading-spin
                 <ui-loading-spinner-demo></ui-loading-spinner-demo>
 			}
 
+			@case ("progress-circle") {
+                <ui-progress-circle-demo></ui-progress-circle-demo>
+			}
+
+			@case ("range-slider") {
+                <ui-range-slider-demo></ui-range-slider-demo>
+			}
+
+			@case ("divider") {
+                <ui-divider-demo></ui-divider-demo>
+			}
+
+			@case ("tooltip") {
+                <ui-tooltip-demo></ui-tooltip-demo>
+			}
+
             
 		}
 	`,
     imports: [AvatarDemoComponent, ButtonDemoComponent, CardDemoComponent,
     ChipDemoComponent, TableDemoComponent, BadgeDemoComponent,
-    MenuDemoComponent, InputDemoComponent, InputDemoComponent,
+    MenuDemoComponent, InputDemoComponent,
     LayoutDemoComponent, RadioDemoComponent, CheckboxDemoComponent,
     SearchDemoComponent, SwitchDemoComponent, ProgressDemoComponent,
     AppbarDemoComponent, FontAwesomeDemoComponent, ImageContainerDemoComponent,
@@ -206,7 +226,8 @@ import { LoadingSpinnerDemoComponent } from './loading-spinner-demo/loading-spin
     ModalDemoComponent, DrawerDemoComponent, DatePickerDemoComponent, TimePickerDemoComponent,
     GridSystemDemoComponent, SpacerDemoComponent, ContainerDemoComponent, PaginationDemoComponent,
     SkeletonLoaderDemoComponent, EmptyStateDemoComponent, FileUploadDemoComponent, FormFieldDemoComponent,
-    AutocompleteDemoComponent, BackdropDemoComponent, OverlayContainerDemoComponent, LoadingSpinnerDemoComponent]
+    AutocompleteDemoComponent, BackdropDemoComponent, OverlayContainerDemoComponent, LoadingSpinnerDemoComponent,
+    ProgressCircleDemoComponent, RangeSliderDemoComponent, DividerDemoComponent, TooltipDemoComponent]
 })