151 lines
4.2 KiB
SCSS
151 lines
4.2 KiB
SCSS
/* Examples of using ui-contrast-color function in UI Library */
|
|
|
|
@use 'sass:color';
|
|
@use 'theme-mixins' as theme;
|
|
|
|
/* Example 1: Basic usage with predefined colors */
|
|
.example-button {
|
|
$button-bg: #007bff; // Blue background
|
|
$light-text: #ffffff; // White text for dark backgrounds
|
|
$dark-text: #333333; // Dark text for light backgrounds
|
|
|
|
background-color: $button-bg;
|
|
color: theme.ui-contrast-color($button-bg, $light-text, $dark-text);
|
|
// Result: white text because blue is darker than 50% lightness
|
|
}
|
|
|
|
/* Example 2: Using with theme variables */
|
|
.example-card {
|
|
$card-bg: var(--ui-color-primary);
|
|
|
|
// In SCSS context, you need to use actual color values
|
|
$primary-color: #2c3e50; // This would come from your theme
|
|
$text-light: #ffffff;
|
|
$text-dark: #333333;
|
|
|
|
background-color: $primary-color;
|
|
color: theme.ui-contrast-color($primary-color, $text-light, $text-dark);
|
|
// Result: white text because #2c3e50 is dark
|
|
}
|
|
|
|
/* Example 3: Status colors with automatic contrast */
|
|
.status-examples {
|
|
.success-badge {
|
|
$success: #28a745; // Green
|
|
$light: #ffffff;
|
|
$dark: #000000;
|
|
|
|
background-color: $success;
|
|
color: theme.ui-contrast-color($success, $light, $dark);
|
|
// Result: white text because green is relatively dark
|
|
}
|
|
|
|
.warning-badge {
|
|
$warning: #ffc107; // Yellow
|
|
$light: #ffffff;
|
|
$dark: #000000;
|
|
|
|
background-color: $warning;
|
|
color: theme.ui-contrast-color($warning, $light, $dark);
|
|
// Result: black text because yellow is light (>50% lightness)
|
|
}
|
|
|
|
.danger-badge {
|
|
$danger: #dc3545; // Red
|
|
$light: #ffffff;
|
|
$dark: #000000;
|
|
|
|
background-color: $danger;
|
|
color: theme.ui-contrast-color($danger, $light, $dark);
|
|
// Result: white text because red is dark
|
|
}
|
|
|
|
.info-badge {
|
|
$info: #17a2b8; // Cyan
|
|
$light: #ffffff;
|
|
$dark: #000000;
|
|
|
|
background-color: $info;
|
|
color: theme.ui-contrast-color($info, $light, $dark);
|
|
// Result: white text because cyan is dark
|
|
}
|
|
}
|
|
|
|
/* Example 4: Using with different light/dark colors based on theme */
|
|
.theme-aware-component {
|
|
// For light theme
|
|
$bg-light: #f8f9fa;
|
|
$text-light: #333333;
|
|
$bg-dark: #343a40;
|
|
$text-dark: #ffffff;
|
|
|
|
// Component background
|
|
$component-bg: #007bff;
|
|
|
|
// In light theme context
|
|
&.light-theme {
|
|
background-color: $component-bg;
|
|
color: theme.ui-contrast-color($component-bg, $text-dark, $text-light);
|
|
// For light theme: if bg is light, use dark text; if bg is dark, use light text
|
|
}
|
|
|
|
// In dark theme context
|
|
&.dark-theme {
|
|
background-color: $component-bg;
|
|
color: theme.ui-contrast-color($component-bg, $text-dark, $bg-light);
|
|
// For dark theme: if bg is light, use light bg color; if bg is dark, use dark text
|
|
}
|
|
}
|
|
|
|
/* Example 5: Dynamic contrast with CSS variables (conceptual) */
|
|
/*
|
|
Note: The ui-contrast-color function works at compile time with SCSS variables.
|
|
For runtime CSS variables, you would use the pre-computed contrast variables:
|
|
|
|
.dynamic-component {
|
|
background-color: var(--ui-color-primary);
|
|
color: var(--ui-color-primary-contrast);
|
|
|
|
// Or with RGB for transparency:
|
|
background-color: rgba(var(--ui-color-primary-rgb), 0.8);
|
|
color: var(--ui-color-primary-contrast);
|
|
}
|
|
*/
|
|
|
|
/* Example 6: Complex usage with mixed colors */
|
|
.complex-example {
|
|
$base-colors: (
|
|
'primary': #2c3e50,
|
|
'secondary': #6c757d,
|
|
'light': #f8f9fa,
|
|
'dark': #343a40
|
|
);
|
|
|
|
$text-light: #ffffff;
|
|
$text-dark: #333333;
|
|
|
|
@each $name, $color in $base-colors {
|
|
.#{$name}-variant {
|
|
background-color: $color;
|
|
color: theme.ui-contrast-color($color, $text-light, $text-dark);
|
|
|
|
// Border with semi-transparent contrast color
|
|
$contrast: theme.ui-contrast-color($color, $text-light, $text-dark);
|
|
border: 2px solid rgba($contrast, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* How the function works:
|
|
*
|
|
* ui-contrast-color($base-color, $light-color, $dark-color)
|
|
*
|
|
* 1. Calculates lightness of $base-color using HSL color space
|
|
* 2. If lightness > 50% (closer to white): returns $dark-color
|
|
* 3. If lightness ≤ 50% (closer to black): returns $light-color
|
|
*
|
|
* This ensures optimal contrast for readability:
|
|
* - Light backgrounds get dark text
|
|
* - Dark backgrounds get light text
|
|
*/
|