87 lines
2.5 KiB
SCSS
87 lines
2.5 KiB
SCSS
/* Theme Integration Mixins for UI Library */
|
|
|
|
/**
|
|
* Mixin that generates CSS variables for UI library components
|
|
* This mixin should be called by the main application to provide colors for the UI library
|
|
* The UI library uses only --ui-* variables with hardcoded fallbacks for portability
|
|
*
|
|
* @param $primary - Primary color for the theme
|
|
* @param $secondary - Secondary color for the theme
|
|
* @param $background - Background color for the theme
|
|
* @param $text - Text color for the theme
|
|
* @param $border - Border color for the theme
|
|
* @param $hover - Hover state color for the theme
|
|
*/
|
|
@mixin ui-theme-variables(
|
|
$primary: #2c3e50,
|
|
$secondary: #666666,
|
|
$background: #343a40,
|
|
$text: #ffffff,
|
|
$border: #d0d0d0,
|
|
$hover: rgba(255, 255, 255, 0.1)
|
|
) {
|
|
/* UI Library specific CSS variables - only these should be used in UI components */
|
|
--ui-color-primary: #{$primary};
|
|
--ui-color-secondary: #{$secondary};
|
|
--ui-color-background: #{$background};
|
|
--ui-color-text: #{$text};
|
|
--ui-color-border: #{$border};
|
|
--ui-color-hover: #{$hover};
|
|
|
|
/* Derived colors for specific UI components */
|
|
--ui-color-menu-bg: #{$background};
|
|
--ui-color-menu-text: #{$text};
|
|
--ui-color-menu-hover: #{$hover};
|
|
--ui-color-menu-active: color-mix(in srgb, #{$background} 80%, black 20%);
|
|
--ui-color-menu-border: #{$border};
|
|
|
|
--ui-color-content-bg: color-mix(in srgb, #{$background} 95%, white 5%);
|
|
--ui-color-content-text: #{$text};
|
|
|
|
--ui-color-icon-primary: #{$primary};
|
|
--ui-color-icon-secondary: #{$secondary};
|
|
--ui-color-icon-muted: color-mix(in srgb, #{$text} 60%, transparent 40%);
|
|
}
|
|
|
|
/**
|
|
* Mixin that applies theme-aware styles to menu components
|
|
*/
|
|
@mixin ui-menu-theme() {
|
|
background: var(--ui-color-menu-bg);
|
|
color: var(--ui-color-menu-text);
|
|
border-right: 1px solid var(--ui-color-menu-border);
|
|
|
|
&.active {
|
|
background: var(--ui-color-menu-active);
|
|
}
|
|
|
|
&.focus,
|
|
&:active,
|
|
&:hover {
|
|
background: var(--ui-color-menu-hover);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Mixin that applies theme-aware styles to content components
|
|
*/
|
|
@mixin ui-content-theme() {
|
|
background: var(--ui-color-content-bg);
|
|
color: var(--ui-color-content-text);
|
|
}
|
|
|
|
/**
|
|
* Mixin that applies theme-aware styles to icon components
|
|
*/
|
|
@mixin ui-icon-theme($variant: 'primary') {
|
|
@if $variant == 'primary' {
|
|
color: var(--ui-color-icon-primary);
|
|
} @else if $variant == 'secondary' {
|
|
color: var(--ui-color-icon-secondary);
|
|
} @else if $variant == 'muted' {
|
|
color: var(--ui-color-icon-muted);
|
|
}
|
|
}
|
|
|
|
|