Add comprehensive library expansion with new components and demos
- 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
@@ -0,0 +1,378 @@
|
||||
@use '../../../../../ui-design-system/src/styles/semantic/index' as *;
|
||||
|
||||
// Code snippet component styles with design token integration
|
||||
.code-snippet {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: $semantic-border-card-radius;
|
||||
border: $semantic-border-card-width $semantic-border-card-style var(--code-border, #{$semantic-color-border-secondary});
|
||||
background: var(--code-bg, #{$semantic-color-surface-primary});
|
||||
overflow: hidden;
|
||||
font-family: 'Roboto Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
|
||||
|
||||
// Size variants
|
||||
&--sm {
|
||||
font-size: $base-typography-font-size-xs;
|
||||
|
||||
.code-snippet__header {
|
||||
padding: $semantic-spacing-component-padding-xs $semantic-spacing-component-padding-sm;
|
||||
gap: $semantic-spacing-component-xs;
|
||||
}
|
||||
|
||||
.code-snippet__content {
|
||||
padding: $semantic-spacing-component-padding-xs $semantic-spacing-component-padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
&--md {
|
||||
font-size: $base-typography-font-size-sm;
|
||||
|
||||
.code-snippet__header {
|
||||
padding: $semantic-spacing-component-padding-sm $semantic-spacing-component-padding-md;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
.code-snippet__content {
|
||||
padding: $semantic-spacing-component-padding-sm $semantic-spacing-component-padding-md;
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
font-size: $base-typography-font-size-md;
|
||||
|
||||
.code-snippet__header {
|
||||
padding: $semantic-spacing-component-padding-md $semantic-spacing-component-padding-lg;
|
||||
gap: $semantic-spacing-component-md;
|
||||
}
|
||||
|
||||
.code-snippet__content {
|
||||
padding: $semantic-spacing-component-padding-md $semantic-spacing-component-padding-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapping variant
|
||||
&--wrap {
|
||||
.code-snippet__code {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
// Constrained height variant
|
||||
&--constrained {
|
||||
.code-snippet__content {
|
||||
max-height: var(--max-height);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $semantic-spacing-component-xl;
|
||||
background: linear-gradient(to bottom, transparent, var(--code-bg, #{$semantic-color-surface-primary}));
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header section
|
||||
.code-snippet__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--code-surface, #{$semantic-color-surface-secondary});
|
||||
border-bottom: $semantic-border-divider-width $semantic-border-divider-style var(--code-border, #{$semantic-color-border-secondary});
|
||||
color: var(--code-text, #{$semantic-color-text-primary});
|
||||
}
|
||||
|
||||
.code-snippet__title {
|
||||
font-weight: $base-typography-font-weight-medium;
|
||||
color: var(--code-text, #{$semantic-color-text-primary});
|
||||
}
|
||||
|
||||
.code-snippet__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $semantic-spacing-component-sm;
|
||||
}
|
||||
|
||||
.code-snippet__language-badge {
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-sm;
|
||||
background: var(--code-keyword, #{$semantic-color-interactive-primary});
|
||||
color: white;
|
||||
border-radius: $semantic-border-input-radius;
|
||||
font-size: $base-typography-font-size-xs;
|
||||
font-weight: $base-typography-font-weight-medium;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.code-snippet__copy-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--code-text, #{$semantic-color-text-secondary});
|
||||
border-radius: $semantic-border-button-radius;
|
||||
cursor: pointer;
|
||||
transition: all $semantic-duration-fast $semantic-easing-standard;
|
||||
|
||||
&:hover {
|
||||
background: var(--code-surface, #{$semantic-color-surface-elevated});
|
||||
color: var(--code-text, #{$semantic-color-text-primary});
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $semantic-border-focus-width solid var(--code-keyword, #{$semantic-color-focus});
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Content area
|
||||
.code-snippet__content {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
background: var(--code-bg, #{$semantic-color-surface-primary});
|
||||
}
|
||||
|
||||
.code-snippet__pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
overflow: visible;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: $base-typography-line-height-relaxed;
|
||||
display: flex;
|
||||
|
||||
&--with-line-numbers {
|
||||
.code-snippet__code {
|
||||
padding-left: $semantic-spacing-component-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Line numbers
|
||||
.code-snippet__line-numbers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: $semantic-spacing-component-md;
|
||||
border-right: $semantic-border-separator-width $semantic-border-separator-style var(--code-border, #{$semantic-color-border-subtle});
|
||||
user-select: none;
|
||||
min-width: 3ch;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.code-snippet__line-number {
|
||||
color: var(--code-line-number, #{$semantic-color-text-tertiary});
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0 $semantic-spacing-component-xs;
|
||||
|
||||
&--highlighted {
|
||||
background: var(--code-line-highlight, #{$semantic-color-container-primary});
|
||||
color: var(--code-text, #{$semantic-color-text-primary});
|
||||
}
|
||||
}
|
||||
|
||||
// Code content
|
||||
.code-snippet__code {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
color: var(--code-text, #{$semantic-color-text-primary});
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
overflow: visible;
|
||||
flex: 1;
|
||||
|
||||
// Syntax highlighting styles
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--code-comment, #{$semantic-color-text-tertiary});
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: var(--code-keyword, #{$semantic-color-brand-primary});
|
||||
font-weight: $base-typography-font-weight-medium;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.attr-value {
|
||||
color: var(--code-string, #{$semantic-color-success});
|
||||
}
|
||||
|
||||
.token.number {
|
||||
color: var(--code-number, #{$semantic-color-warning});
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--code-function, #{$semantic-color-interactive-primary});
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: var(--code-operator, #{$semantic-color-text-primary});
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--code-punctuation, #{$semantic-color-text-secondary});
|
||||
}
|
||||
|
||||
.token.variable {
|
||||
color: var(--code-variable, #{$semantic-color-text-primary});
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.constant {
|
||||
color: var(--code-keyword, #{$semantic-color-brand-primary});
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.attr-name {
|
||||
color: var(--code-function, #{$semantic-color-interactive-primary});
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.tag {
|
||||
color: var(--code-keyword, #{$semantic-color-brand-primary});
|
||||
}
|
||||
}
|
||||
|
||||
// Expand section
|
||||
.code-snippet__expand {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: $semantic-spacing-component-sm;
|
||||
background: var(--code-surface, #{$semantic-color-surface-secondary});
|
||||
border-top: $semantic-border-separator-width $semantic-border-separator-style var(--code-border, #{$semantic-color-border-secondary});
|
||||
}
|
||||
|
||||
.code-snippet__expand-btn {
|
||||
padding: $semantic-spacing-component-xs $semantic-spacing-component-md;
|
||||
border: $semantic-border-button-width $semantic-border-button-style var(--code-border, #{$semantic-color-border-primary});
|
||||
border-radius: $semantic-border-button-radius;
|
||||
background: var(--code-bg, #{$semantic-color-surface-primary});
|
||||
color: var(--code-text, #{$semantic-color-text-primary});
|
||||
font-size: $base-typography-font-size-sm;
|
||||
cursor: pointer;
|
||||
transition: all $semantic-duration-fast $semantic-easing-standard;
|
||||
|
||||
&:hover {
|
||||
background: var(--code-surface, #{$semantic-color-surface-elevated});
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: $semantic-border-focus-width solid var(--code-keyword, #{$semantic-color-focus});
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Theme-specific overrides
|
||||
.code-theme-github-light {
|
||||
--code-bg: #{$semantic-color-surface-primary};
|
||||
--code-surface: #{$semantic-color-surface-secondary};
|
||||
--code-text: #{$semantic-color-text-primary};
|
||||
--code-comment: #{$semantic-color-text-tertiary};
|
||||
--code-keyword: #{$semantic-color-brand-primary};
|
||||
--code-string: #{$semantic-color-success};
|
||||
--code-number: #{$semantic-color-warning};
|
||||
--code-function: #{$semantic-color-interactive-primary};
|
||||
--code-operator: #{$semantic-color-text-primary};
|
||||
--code-punctuation: #{$semantic-color-text-secondary};
|
||||
--code-variable: #{$semantic-color-text-primary};
|
||||
--code-line-number: #{$semantic-color-text-tertiary};
|
||||
--code-line-highlight: #{$semantic-color-container-primary};
|
||||
--code-border: #{$semantic-color-border-secondary};
|
||||
}
|
||||
|
||||
.code-theme-github-dark {
|
||||
--code-bg: #0d1117;
|
||||
--code-surface: #161b22;
|
||||
--code-text: #f0f6fc;
|
||||
--code-comment: #8b949e;
|
||||
--code-keyword: #ff7b72;
|
||||
--code-string: #a5d6ff;
|
||||
--code-number: #79c0ff;
|
||||
--code-function: #d2a8ff;
|
||||
--code-operator: #f0f6fc;
|
||||
--code-punctuation: #c9d1d9;
|
||||
--code-variable: #f0f6fc;
|
||||
--code-line-number: #8b949e;
|
||||
--code-line-highlight: rgba(255, 211, 61, 0.08);
|
||||
--code-border: #30363d;
|
||||
}
|
||||
|
||||
.code-theme-one-dark {
|
||||
--code-bg: #282c34;
|
||||
--code-surface: #3e4451;
|
||||
--code-text: #abb2bf;
|
||||
--code-comment: #5c6370;
|
||||
--code-keyword: #c678dd;
|
||||
--code-string: #98c379;
|
||||
--code-number: #d19a66;
|
||||
--code-function: #61afef;
|
||||
--code-operator: #abb2bf;
|
||||
--code-punctuation: #abb2bf;
|
||||
--code-variable: #e06c75;
|
||||
--code-line-number: #5c6370;
|
||||
--code-line-highlight: #3e4451;
|
||||
--code-border: #3e4451;
|
||||
}
|
||||
|
||||
.code-theme-material {
|
||||
--code-bg: #263238;
|
||||
--code-surface: #37474f;
|
||||
--code-text: #eeffff;
|
||||
--code-comment: #546e7a;
|
||||
--code-keyword: #c792ea;
|
||||
--code-string: #c3e88d;
|
||||
--code-number: #f78c6c;
|
||||
--code-function: #82aaff;
|
||||
--code-operator: #89ddff;
|
||||
--code-punctuation: #89ddff;
|
||||
--code-variable: #eeffff;
|
||||
--code-line-number: #546e7a;
|
||||
--code-line-highlight: #37474f;
|
||||
--code-border: #37474f;
|
||||
}
|
||||
|
||||
.code-theme-dracula {
|
||||
--code-bg: #282a36;
|
||||
--code-surface: #44475a;
|
||||
--code-text: #f8f8f2;
|
||||
--code-comment: #6272a4;
|
||||
--code-keyword: #ff79c6;
|
||||
--code-string: #f1fa8c;
|
||||
--code-number: #bd93f9;
|
||||
--code-function: #8be9fd;
|
||||
--code-operator: #ff79c6;
|
||||
--code-punctuation: #f8f8f2;
|
||||
--code-variable: #f8f8f2;
|
||||
--code-line-number: #6272a4;
|
||||
--code-line-highlight: #44475a;
|
||||
--code-border: #44475a;
|
||||
}
|
||||
Reference in New Issue
Block a user