206 lines
8.2 KiB
SCSS
206 lines
8.2 KiB
SCSS
@use 'sass:map';
|
|
@use 'variables' as *;
|
|
|
|
// Light Theme Colors
|
|
$light-theme: (
|
|
primary: #000000,
|
|
background: #ffffff,
|
|
text: #000000,
|
|
text-muted: #6b7280,
|
|
active-box-shadow: rgba(0, 0, 0, 0.1),
|
|
hover-box-shadow: rgba(0, 0, 0, 0.15),
|
|
hero-background: $gradient-hero-light,
|
|
gradient-primary: $gradient-primary,
|
|
gradient-text: $gradient-text,
|
|
|
|
// Stat colors using visual hierarchy
|
|
stat-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
|
|
stat-primary-value: #2563eb,
|
|
stat-primary-label: #1d4ed8,
|
|
|
|
stat-secondary-bg: linear-gradient(135deg, #dcfce7, #bbf7d0),
|
|
stat-secondary-value: #16a34a,
|
|
stat-secondary-label: #15803d,
|
|
|
|
stat-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
|
|
stat-tertiary-value: #0d9488,
|
|
stat-tertiary-label: #0f766e,
|
|
|
|
stat-quaternary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
|
|
stat-quaternary-value: #9333ea,
|
|
stat-quaternary-label: #7c3aed,
|
|
|
|
// About section colors
|
|
about-background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%),
|
|
gradient-about-title: linear-gradient(90deg, #059669, #0d9488),
|
|
about-greeting-color: #047857,
|
|
gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
|
|
|
|
// Skill badge colors using visual hierarchy
|
|
skill-badge-primary-bg: #dbeafe,
|
|
skill-badge-primary-text: #1e40af,
|
|
skill-badge-secondary-bg: #dcfce7,
|
|
skill-badge-secondary-text: #166534,
|
|
skill-badge-tertiary-bg: #e9d5ff,
|
|
skill-badge-tertiary-text: #7c2d12,
|
|
skill-badge-quaternary-bg: #fed7aa,
|
|
skill-badge-quaternary-text: #9a3412,
|
|
|
|
// Feature card colors using visual hierarchy
|
|
feature-card-primary-bg: linear-gradient(135deg, #dbeafe, #bfdbfe),
|
|
feature-card-secondary-bg: linear-gradient(135deg, #e9d5ff, #ddd6fe),
|
|
feature-card-tertiary-bg: linear-gradient(135deg, #ccfbf1, #99f6e4),
|
|
|
|
feature-icon-primary: #2563eb,
|
|
feature-icon-secondary: #9333ea,
|
|
feature-icon-tertiary: #0d9488,
|
|
|
|
feature-title-primary: #1e40af,
|
|
feature-title-secondary: #7c3aed,
|
|
feature-title-tertiary: #0f766e,
|
|
|
|
feature-description-primary: #1d4ed8,
|
|
feature-description-secondary: #6d28d9,
|
|
feature-description-tertiary: #115e59,
|
|
|
|
// Shadow variables
|
|
box-shadow-sm: #{$shadow-sm},
|
|
box-shadow-md: #{$shadow-md},
|
|
box-shadow-lg: #{$shadow-lg}
|
|
);
|
|
|
|
// Dark Theme Colors
|
|
$dark-theme: (
|
|
primary: #9333ea,
|
|
background: #1f2937,
|
|
text: #f9fafb,
|
|
text-muted: #9ca3af,
|
|
active-box-shadow: rgba(255, 255, 255, 0.1),
|
|
hover-box-shadow: rgba(255, 255, 255, 0.15),
|
|
hero-background: $gradient-hero-dark,
|
|
gradient-primary: $gradient-primary,
|
|
gradient-text: $gradient-text,
|
|
|
|
// Stat colors using visual hierarchy
|
|
stat-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
|
|
stat-primary-value: #2563eb,
|
|
stat-primary-label: #93c5fd,
|
|
|
|
stat-secondary-bg: linear-gradient(135deg, rgba(20, 83, 45, 0.3), rgba(22, 101, 52, 0.3)),
|
|
stat-secondary-value: #16a34a,
|
|
stat-secondary-label: #86efac,
|
|
|
|
stat-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
|
|
stat-tertiary-value: #0d9488,
|
|
stat-tertiary-label: #5eead4,
|
|
|
|
stat-quaternary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
|
|
stat-quaternary-value: #9333ea,
|
|
stat-quaternary-label: #c4b5fd,
|
|
|
|
// About section colors
|
|
about-background: linear-gradient(135deg, rgba(20, 83, 45, 0.2) 0%, rgba(6, 78, 59, 0.2) 100%),
|
|
gradient-about-title: linear-gradient(90deg, #10b981, #14b8a6),
|
|
about-greeting-color: #34d399,
|
|
gradient-image-overlay: linear-gradient(45deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2)),
|
|
|
|
// Skill badge colors using visual hierarchy
|
|
skill-badge-primary-bg: rgba(30, 58, 138, 0.3),
|
|
skill-badge-primary-text: #93c5fd,
|
|
skill-badge-secondary-bg: rgba(20, 83, 45, 0.3),
|
|
skill-badge-secondary-text: #86efac,
|
|
skill-badge-tertiary-bg: rgba(88, 28, 135, 0.3),
|
|
skill-badge-tertiary-text: #c4b5fd,
|
|
skill-badge-quaternary-bg: rgba(154, 52, 18, 0.3),
|
|
skill-badge-quaternary-text: #fdba74,
|
|
|
|
// Feature card colors using visual hierarchy
|
|
feature-card-primary-bg: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(30, 64, 175, 0.3)),
|
|
feature-card-secondary-bg: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(107, 33, 168, 0.3)),
|
|
feature-card-tertiary-bg: linear-gradient(135deg, rgba(19, 78, 74, 0.3), rgba(17, 94, 89, 0.3)),
|
|
|
|
feature-icon-primary: #3b82f6,
|
|
feature-icon-secondary: #a855f7,
|
|
feature-icon-tertiary: #14b8a6,
|
|
|
|
feature-title-primary: #93c5fd,
|
|
feature-title-secondary: #c4b5fd,
|
|
feature-title-tertiary: #5eead4,
|
|
|
|
feature-description-primary: #dbeafe,
|
|
feature-description-secondary: #e9d5ff,
|
|
feature-description-tertiary: #ccfbf1,
|
|
|
|
// Shadow variables
|
|
box-shadow-sm: #{$shadow-sm},
|
|
box-shadow-md: #{$shadow-md},
|
|
box-shadow-lg: #{$shadow-lg}
|
|
);
|
|
|
|
// Mixin: SCSS-Map → CSS-Variables
|
|
@mixin theme-vars($theme) {
|
|
--color-primary: #{map.get($theme, primary)};
|
|
--color-background: #{map.get($theme, background)};
|
|
--color-text: #{map.get($theme, text)};
|
|
--color-text-muted: #{map.get($theme, text-muted)};
|
|
--box-shadow-hover: #{map.get($theme, hover-box-shadow)};
|
|
--box-shadow-active: #{map.get($theme, active-box-shadow)};
|
|
--hero-background: #{map.get($theme, hero-background)};
|
|
--gradient-primary: #{map.get($theme, gradient-primary)};
|
|
--gradient-text: #{map.get($theme, gradient-text)};
|
|
|
|
// Stat variables using semantic naming
|
|
--stat-primary-bg: #{map.get($theme, stat-primary-bg)};
|
|
--stat-primary-value: #{map.get($theme, stat-primary-value)};
|
|
--stat-primary-label: #{map.get($theme, stat-primary-label)};
|
|
|
|
--stat-secondary-bg: #{map.get($theme, stat-secondary-bg)};
|
|
--stat-secondary-value: #{map.get($theme, stat-secondary-value)};
|
|
--stat-secondary-label: #{map.get($theme, stat-secondary-label)};
|
|
|
|
--stat-tertiary-bg: #{map.get($theme, stat-tertiary-bg)};
|
|
--stat-tertiary-value: #{map.get($theme, stat-tertiary-value)};
|
|
--stat-tertiary-label: #{map.get($theme, stat-tertiary-label)};
|
|
|
|
--stat-quaternary-bg: #{map.get($theme, stat-quaternary-bg)};
|
|
--stat-quaternary-value: #{map.get($theme, stat-quaternary-value)};
|
|
--stat-quaternary-label: #{map.get($theme, stat-quaternary-label)};
|
|
|
|
// About section variables
|
|
--about-background: #{map.get($theme, about-background)};
|
|
--gradient-about-title: #{map.get($theme, gradient-about-title)};
|
|
--about-greeting-color: #{map.get($theme, about-greeting-color)};
|
|
--gradient-image-overlay: #{map.get($theme, gradient-image-overlay)};
|
|
|
|
// Skill badge variables using semantic naming
|
|
--skill-badge-primary-bg: #{map.get($theme, skill-badge-primary-bg)};
|
|
--skill-badge-primary-text: #{map.get($theme, skill-badge-primary-text)};
|
|
--skill-badge-secondary-bg: #{map.get($theme, skill-badge-secondary-bg)};
|
|
--skill-badge-secondary-text: #{map.get($theme, skill-badge-secondary-text)};
|
|
--skill-badge-tertiary-bg: #{map.get($theme, skill-badge-tertiary-bg)};
|
|
--skill-badge-tertiary-text: #{map.get($theme, skill-badge-tertiary-text)};
|
|
--skill-badge-quaternary-bg: #{map.get($theme, skill-badge-quaternary-bg)};
|
|
--skill-badge-quaternary-text: #{map.get($theme, skill-badge-quaternary-text)};
|
|
|
|
// Feature card variables using semantic naming
|
|
--feature-card-primary-bg: #{map.get($theme, feature-card-primary-bg)};
|
|
--feature-card-secondary-bg: #{map.get($theme, feature-card-secondary-bg)};
|
|
--feature-card-tertiary-bg: #{map.get($theme, feature-card-tertiary-bg)};
|
|
|
|
--feature-icon-primary: #{map.get($theme, feature-icon-primary)};
|
|
--feature-icon-secondary: #{map.get($theme, feature-icon-secondary)};
|
|
--feature-icon-tertiary: #{map.get($theme, feature-icon-tertiary)};
|
|
|
|
--feature-title-primary: #{map.get($theme, feature-title-primary)};
|
|
--feature-title-secondary: #{map.get($theme, feature-title-secondary)};
|
|
--feature-title-tertiary: #{map.get($theme, feature-title-tertiary)};
|
|
|
|
--feature-description-primary: #{map.get($theme, feature-description-primary)};
|
|
--feature-description-secondary: #{map.get($theme, feature-description-secondary)};
|
|
--feature-description-tertiary: #{map.get($theme, feature-description-tertiary)};
|
|
|
|
// Shadow variables
|
|
--box-shadow-sm: #{map.get($theme, box-shadow-sm)} var(--box-shadow-hover);
|
|
--box-shadow-md: #{map.get($theme, box-shadow-md)};
|
|
--box-shadow-lg: #{map.get($theme, box-shadow-lg)};
|
|
} |