high contrast theme adjustments

This commit is contained in:
Josh Hawkins 2024-07-09 22:02:52 -05:00
parent 1ab719f5cb
commit b1ce8ad0fc
2 changed files with 48 additions and 36 deletions

View File

@ -39,6 +39,12 @@
--secondary-highlight: hsl(0, 0%, 94%); --secondary-highlight: hsl(0, 0%, 94%);
--secondary-highlight: 0 0% 94%; --secondary-highlight: 0 0% 94%;
--neutral: hsl(0, 0%, 45.1%);
--neutral: 0 0% 45.1%;
--neutral_variant: hsl(0, 0%, 32.2%);
--neutral_variant: 0 0% 32.2%;
--muted: hsl(210, 40%, 96.1%); --muted: hsl(210, 40%, 96.1%);
--muted: 210 40% 96.1%; --muted: 210 40% 96.1%;
@ -137,6 +143,12 @@
--secondary-highlight: hsl(0, 0%, 25%); --secondary-highlight: hsl(0, 0%, 25%);
--secondary-highlight: 0 0% 25%; --secondary-highlight: 0 0% 25%;
--neutral: hsl(0, 0%, 45.1%);
--neutral: 0 0% 45.1%;
--neutral_variant: hsl(0, 0%, 32.2%);
--neutral_variant: 0 0% 32.2%;
--muted: hsl(0, 0%, 12%); --muted: hsl(0, 0%, 12%);
--muted: 0 0% 12%; --muted: 0 0% 12%;

View File

@ -1,10 +1,10 @@
@layer base { @layer base {
:root { .theme-high-contrast.light {
--background: hsl(0, 0%, 100%); --background: hsl(0, 0%, 100%);
--background: 0 0% 100%; --background: 0 0% 100%;
--background-alt: hsl(0, 0%, 98.5%); --background-alt: hsl(0, 0%, 99.5%);
--background-alt: 0 0% 98.5%; --background-alt: 0 0% 99.5%;
--foreground: hsl(222.2, 84%, 4.9%); --foreground: hsl(222.2, 84%, 4.9%);
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
@ -21,29 +21,29 @@
--popover-foreground: hsl(222.2, 84%, 4.9%); --popover-foreground: hsl(222.2, 84%, 4.9%);
--popover-foreground: 222.2 84% 4.9%; --popover-foreground: 222.2 84% 4.9%;
--primary: hsl(222.2, 37.4%, 11.2%); --primary: hsl(222.2, 37.4%, 1.2%);
--primary: 222.2 47.4% 11.2%; --primary: 222.2 47.4% 1.2%;
--primary-variant: hsl(222.2, 37.4%, 24.2%); --primary-variant: hsl(222.2, 37.4%, 4.2%);
--primary-variant: 222.2 47.4% 24.2%; --primary-variant: 222.2 47.4% 4.2%;
--primary-foreground: hsl(210, 40%, 98%); --primary-foreground: hsl(210, 40%, 98%);
--primary-foreground: 210 40% 98%; --primary-foreground: 210 40% 98%;
--secondary: hsl(210, 20%, 94.1%); --secondary: hsl(0, 0%, 94.1%);
--secondary: 210 20% 94.1%; --secondary: 0 0% 94.1%;
--secondary-foreground: hsl(222.2, 17.4%, 36.2%); --secondary-foreground: hsl(222.2, 17.4%, 6.2%);
--secondary-foreground: 222.2 17.4% 36.2%; --secondary-foreground: 222.2 17.4% 6.2%;
--secondary-highlight: hsl(0, 0%, 94%); --secondary-highlight: hsl(0, 0%, 84%);
--secondary-highlight: 0 0% 94%; --secondary-highlight: 0 0% 84%;
--neutral: hsl(0, 0%, 45.1%); --neutral: hsl(0, 0%, 5.1%);
--neutral: 0 0% 45.1%; --neutral: 0 0% 5.1%;
--neutral_variant: hsl(0, 0%, 32.2%); --neutral_variant: hsl(0, 0%, 2.2%);
--neutral_variant: 0 0% 32.2%; --neutral_variant: 0 0% 2.2%;
--muted: hsl(210, 40%, 96.1%); --muted: hsl(210, 40%, 96.1%);
--muted: 210 40% 96.1%; --muted: 210 40% 96.1%;
@ -103,24 +103,24 @@
--audio_review: 228 94% 67%; --audio_review: 228 94% 67%;
} }
.dark { .theme-high-contrast.dark {
--background: hsl(0, 0, 0%); --background: hsl(0, 0, 0%);
--background: 0 0% 0%; --background: 0 0% 0%;
--background-alt: hsl(0, 0, 9%); --background-alt: hsl(0, 0, 3%);
--background-alt: 0 0% 9%; --background-alt: 0 0% 3%;
--foreground: hsl(0, 0%, 100%); --foreground: hsl(0, 0%, 100%);
--foreground: 0, 0%, 100%; --foreground: 0, 0%, 100%;
--card: hsl(0, 0%, 15%); --card: hsl(0, 0%, 11%);
--card: 0, 0%, 15%; --card: 0, 0%, 11%;
--card-foreground: hsl(210, 40%, 98%); --card-foreground: hsl(210, 40%, 98%);
--card-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--popover: hsl(0, 0%, 15%); --popover: hsl(0, 0%, 11%);
--popover: 0, 0%, 15%; --popover: 0, 0%, 11%;
--popover-foreground: hsl(0, 0%, 98%); --popover-foreground: hsl(0, 0%, 98%);
--popover-foreground: 0 0% 98%; --popover-foreground: 0 0% 98%;
@ -134,14 +134,14 @@
--primary-foreground: hsl(0, 0%, 29%); --primary-foreground: hsl(0, 0%, 29%);
--primary-foreground: 0 0% 29%; --primary-foreground: 0 0% 29%;
--secondary: hsl(0, 0%, 25%); --secondary: hsl(0, 0%, 11%);
--secondary: 0 0% 25%; --secondary: 0 0% 11%;
--secondary-foreground: hsl(0, 0%, 82%); --secondary-foreground: hsl(0, 0%, 82%);
--secondary-foreground: 0 0% 82%; --secondary-foreground: 0 0% 82%;
--secondary-highlight: hsl(0, 0%, 65%); --secondary-highlight: hsl(0, 0%, 45%);
--secondary-highlight: 0 0% 65%; --secondary-highlight: 0 0% 45%;
--neutral: hsl(0, 0%, 95.1%); --neutral: hsl(0, 0%, 95.1%);
--neutral: 0 0% 95.1%; --neutral: 0 0% 95.1%;
@ -149,14 +149,14 @@
--neutral_variant: hsl(0, 0%, 82.2%); --neutral_variant: hsl(0, 0%, 82.2%);
--neutral_variant: 0 0% 82.2%; --neutral_variant: 0 0% 82.2%;
--muted: hsl(0, 0%, 32%); --muted: hsl(0, 0%, 22%);
--muted: 0 0% 32%; --muted: 0 0% 22%;
--muted-foreground: hsl(0, 0%, 62%); --muted-foreground: hsl(0, 0%, 82%);
--muted-foreground: 0 0% 62%; --muted-foreground: 0 0% 82%;
--accent: hsl(0, 0%, 39%); --accent: hsl(0, 0%, 11%);
--accent: 0 0% 39%; --accent: 0 0% 11%;
--accent-foreground: hsl(210, 40%, 95%); --accent-foreground: hsl(210, 40%, 95%);
--accent-foreground: 210 40% 95%; --accent-foreground: 210 40% 95%;
@ -173,8 +173,8 @@
--warning-foreground: hsl(32, 100%, 74%); --warning-foreground: hsl(32, 100%, 74%);
--warning-foreground: 32 100% 74%; --warning-foreground: 32 100% 74%;
--border: hsl(0, 0%, 52%); --border: hsl(0, 0%, 92%);
--border: 0 0% 52%; --border: 0 0% 92%;
--input: hsl(0, 0%, 45%); --input: hsl(0, 0%, 45%);
--input: 0 0% 45%; --input: 0 0% 45%;