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>
This commit is contained in:
skyai_dev
@@ -0,0 +1,222 @@
|
||||
@use '../../../../../shared-ui/src/styles/semantic/index' as *;
|
||||
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-lg;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
h2 {
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-heading-h2-size;
|
||||
margin-bottom: $semantic-spacing-layout-lg;
|
||||
border-bottom: 1px solid $semantic-color-border-subtle;
|
||||
padding-bottom: $semantic-spacing-content-paragraph;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $semantic-color-text-secondary;
|
||||
font-size: $semantic-typography-heading-h3-size;
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
margin-top: $semantic-spacing-layout-lg;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-heading-h4-size;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
margin-bottom: $semantic-spacing-layout-xl;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
background: $semantic-color-surface-primary;
|
||||
|
||||
&:hover {
|
||||
border-color: $semantic-color-border-primary;
|
||||
box-shadow: $semantic-shadow-elevation-1;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-md;
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
padding: $semantic-spacing-component-lg;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
gap: $semantic-spacing-component-lg;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $semantic-spacing-component-xs;
|
||||
min-width: 150px;
|
||||
|
||||
label {
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
font-weight: $semantic-typography-font-weight-medium;
|
||||
color: $semantic-color-text-primary;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-right: $semantic-spacing-component-xs;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
||||
border: 1px solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $semantic-color-primary;
|
||||
outline-offset: 2px;
|
||||
border-color: $semantic-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demo-interactive-result {
|
||||
padding: $semantic-spacing-component-xl;
|
||||
background: $semantic-color-surface-primary;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
border: 2px dashed $semantic-color-border-subtle;
|
||||
}
|
||||
|
||||
.demo-form {
|
||||
padding: $semantic-spacing-component-lg;
|
||||
background: $semantic-color-surface-primary;
|
||||
border-radius: $semantic-border-radius-lg;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
.form-row {
|
||||
margin-bottom: $semantic-spacing-component-lg;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-output {
|
||||
margin-top: $semantic-spacing-component-xl;
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
color: $semantic-color-text-secondary;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.event-log {
|
||||
margin-top: $semantic-spacing-component-lg;
|
||||
padding: $semantic-spacing-component-md;
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-radius: $semantic-border-radius-md;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
.event-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin-bottom: $semantic-spacing-component-md;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
background: $semantic-color-surface-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
border: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
.event-item {
|
||||
font-size: $semantic-typography-font-size-xs;
|
||||
color: $semantic-color-text-secondary;
|
||||
padding: $semantic-spacing-component-xs 0;
|
||||
border-bottom: 1px solid $semantic-color-border-subtle;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
padding: $semantic-spacing-component-sm $semantic-spacing-component-md;
|
||||
border: 1px solid $semantic-color-border-primary;
|
||||
border-radius: $semantic-border-radius-sm;
|
||||
background: $semantic-color-surface-primary;
|
||||
color: $semantic-color-text-primary;
|
||||
font-size: $semantic-typography-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: all $semantic-motion-duration-fast $semantic-easing-standard;
|
||||
|
||||
&:hover {
|
||||
background: $semantic-color-surface-secondary;
|
||||
border-color: $semantic-color-border-primary;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid $semantic-color-primary;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive design
|
||||
@media (max-width: $semantic-breakpoint-md - 1) {
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-md;
|
||||
}
|
||||
|
||||
.demo-controls .control-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.control-group {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $semantic-breakpoint-sm - 1) {
|
||||
.demo-container {
|
||||
padding: $semantic-spacing-layout-sm;
|
||||
}
|
||||
|
||||
.demo-item {
|
||||
padding: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user