133 lines
3.8 KiB
SCSS
133 lines
3.8 KiB
SCSS
@use '../variables' as *;
|
|
|
|
// Base color variables
|
|
$blue-primary: #2563eb;
|
|
$blue-secondary: #1d4ed8;
|
|
$blue-light: #93c5fd;
|
|
$blue-lighter: #dbeafe;
|
|
$blue-lightest: #bfdbfe;
|
|
$blue-dark: #1e3a8a;
|
|
$blue-darker: #1e40af;
|
|
|
|
$green-primary: #16a34a;
|
|
$green-secondary: #15803d;
|
|
$green-light: #86efac;
|
|
$green-lighter: #dcfce7;
|
|
$green-lightest: #bbf7d0;
|
|
$green-dark: #14532d;
|
|
$green-darker: #166534;
|
|
|
|
$teal-primary: #0d9488;
|
|
$teal-secondary: #073c39;
|
|
$teal-light: #5eead4;
|
|
$teal-lighter: #ccfbf1;
|
|
$teal-lightest: #99f6e4;
|
|
$teal-dark: #134e4a;
|
|
$teal-darker: #115e59;
|
|
|
|
$purple-primary: #9333ea;
|
|
$purple-secondary: #3c0d9c;
|
|
$purple-light: #c4b5fd;
|
|
$purple-lighter: #e9d5ff;
|
|
$purple-lightest: #ddd6fe;
|
|
$purple-dark: #581c87;
|
|
$purple-darker: #6b21a8;
|
|
|
|
// Background colors
|
|
$hero-bg-light-start: #e0e7ef;
|
|
$hero-bg-light-end: #91c5e0;
|
|
|
|
// Alpha values
|
|
$alpha-bg-low: 0.3;
|
|
|
|
// WCAG AAA compliant text colors
|
|
$text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
|
|
$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
|
|
|
|
$hero-light-theme: (
|
|
hero-background:
|
|
linear-gradient(135deg, $hero-bg-light-start 0%, $hero-bg-light-end 100%),
|
|
// Stat colors - FIXED for AAA contrast
|
|
stat-primary-bg: linear-gradient(135deg, $blue-lighter, $blue-lightest),
|
|
stat-primary-value: $text-aaa-light,
|
|
// Changed from $blue-primary for AAA contrast
|
|
stat-primary-label: $text-aaa-light,
|
|
|
|
// Changed from $blue-secondary for AAA contrast
|
|
stat-secondary-bg: linear-gradient(135deg, $green-lighter, $green-lightest),
|
|
stat-secondary-value: $text-aaa-light,
|
|
// Changed from $green-primary for AAA contrast
|
|
stat-secondary-label: $text-aaa-light,
|
|
|
|
// Changed from $green-secondary for AAA contrast
|
|
stat-tertiary-bg: linear-gradient(135deg, $teal-lighter, $teal-lightest),
|
|
stat-tertiary-value: $text-aaa-light,
|
|
// Changed from $teal-primary for AAA contrast
|
|
stat-tertiary-label: $text-aaa-light,
|
|
|
|
// Changed from $teal-secondary for AAA contrast
|
|
stat-quaternary-bg: linear-gradient(
|
|
135deg,
|
|
$purple-lighter,
|
|
$purple-lightest
|
|
),
|
|
stat-quaternary-value: $text-aaa-light,
|
|
// Changed from $purple-primary for AAA contrast
|
|
stat-quaternary-label: $text-aaa-light,
|
|
// Changed from $purple-secondary for AAA contrast
|
|
);
|
|
|
|
$hero-dark-theme: (
|
|
hero-background:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba($blue-dark, $alpha-bg-low) 0%,
|
|
rgba($purple-dark, $alpha-bg-low) 50%,
|
|
rgba($purple-darker, $alpha-bg-low) 100%
|
|
),
|
|
// Stat colors - Enhanced contrast for AAA compliance
|
|
stat-primary-bg:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba($blue-dark, $alpha-bg-low),
|
|
rgba($blue-darker, $alpha-bg-low)
|
|
),
|
|
stat-primary-value: $text-aaa-dark,
|
|
// Changed from $blue-primary to white for AAA contrast
|
|
stat-primary-label: $text-aaa-dark,
|
|
|
|
// Changed from $blue-light to white for better contrast
|
|
stat-secondary-bg:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba($green-dark, $alpha-bg-low),
|
|
rgba($green-darker, $alpha-bg-low)
|
|
),
|
|
stat-secondary-value: $text-aaa-dark,
|
|
// Changed from $green-primary to white for AAA contrast
|
|
stat-secondary-label: $text-aaa-dark,
|
|
|
|
// Changed from $green-light to white for better contrast
|
|
stat-tertiary-bg:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba($teal-dark, $alpha-bg-low),
|
|
rgba($teal-darker, $alpha-bg-low)
|
|
),
|
|
stat-tertiary-value: $text-aaa-dark,
|
|
// Changed from $teal-primary to white for AAA contrast
|
|
stat-tertiary-label: $text-aaa-dark,
|
|
|
|
// Changed from $teal-light to white for better contrast
|
|
stat-quaternary-bg:
|
|
linear-gradient(
|
|
135deg,
|
|
rgba($purple-dark, $alpha-bg-low),
|
|
rgba($purple-darker, $alpha-bg-low)
|
|
),
|
|
stat-quaternary-value: $text-aaa-dark,
|
|
// Changed from $purple-primary to white for AAA contrast
|
|
stat-quaternary-label: $text-aaa-dark,
|
|
// Changed from $purple-light to white for better contrast
|
|
);
|