From c2824d153ee2eb21f4c47d1dcc3a79f6f5ab2fcd Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Wed, 10 Jul 2024 07:04:02 -0500 Subject: [PATCH] Theme updates (#12373) * remove hideous and ugly themes * incorporate dei into ui design * neutral as a theme color * high contrast theme adjustments * color tweaks --- web/src/components/timeline/EventSegment.tsx | 2 +- .../components/timeline/segment-metadata.tsx | 8 +- web/src/context/theme-provider.tsx | 10 +- web/src/index.css | 7 +- web/tailwind.config.js | 6 + web/themes/theme-blue.css | 4 + web/themes/theme-default.css | 12 ++ web/themes/theme-gold.css | 59 ------ web/themes/theme-green.css | 4 + web/themes/theme-high-contrast.css | 185 ++++++++++++++++++ web/themes/theme-nature.css | 59 ------ web/themes/theme-netflix.css | 59 ------ web/themes/theme-nord.css | 4 + web/themes/theme-orange.css | 59 ------ web/themes/theme-red.css | 4 + 15 files changed, 228 insertions(+), 254 deletions(-) delete mode 100644 web/themes/theme-gold.css create mode 100644 web/themes/theme-high-contrast.css delete mode 100644 web/themes/theme-nature.css delete mode 100644 web/themes/theme-netflix.css delete mode 100644 web/themes/theme-orange.css diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx index 5ce8d65fa..242ca3248 100644 --- a/web/src/components/timeline/EventSegment.tsx +++ b/web/src/components/timeline/EventSegment.tsx @@ -152,7 +152,7 @@ export function EventSegment({ : "" } ${ isFirstSegmentInMinimap || isLastSegmentInMinimap - ? "relative h-[8px] border-b-2 border-neutral-600" + ? "relative h-[8px] border-b-2 border-neutral_variant" : "" }`; diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx index f35ceb1c6..6a92c1edd 100644 --- a/web/src/components/timeline/segment-metadata.tsx +++ b/web/src/components/timeline/segment-metadata.tsx @@ -71,11 +71,11 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) { className={`pointer-events-none h-0.5 select-none ${ timestamp.getMinutes() % timestampSpread === 0 && timestamp.getSeconds() === 0 - ? "w-[12px] bg-neutral-600 dark:bg-neutral-500" + ? "dark:bg-neutral bg-neutral_variant w-[12px]" : timestamp.getMinutes() % (timestampSpread == 15 ? 5 : 1) === 0 && timestamp.getSeconds() === 0 - ? "w-[8px] bg-neutral-500" // Minor tick mark - : "w-[5px] bg-neutral-400 dark:bg-neutral-600" + ? "bg-neutral w-[8px]" // Minor tick mark + : "dark:bg-neutral_variant w-[5px] bg-neutral-400" }`} > @@ -97,7 +97,7 @@ export function Timestamp({ {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
{timestamp.getMinutes() % timestampSpread === 0 && timestamp.getSeconds() === 0 && diff --git a/web/src/context/theme-provider.tsx b/web/src/context/theme-provider.tsx index 7b26780d5..764e0d8e9 100644 --- a/web/src/context/theme-provider.tsx +++ b/web/src/context/theme-provider.tsx @@ -3,25 +3,19 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react"; type Theme = "dark" | "light" | "system"; type ColorScheme = | "theme-blue" - | "theme-gold" | "theme-green" - | "theme-nature" - | "theme-netflix" | "theme-nord" - | "theme-orange" | "theme-red" + | "theme-high-contrast" | "theme-default"; // eslint-disable-next-line react-refresh/only-export-components export const colorSchemes: ColorScheme[] = [ "theme-blue", - "theme-gold", "theme-green", - "theme-nature", - "theme-netflix", "theme-nord", - "theme-orange", "theme-red", + "theme-high-contrast", "theme-default", ]; diff --git a/web/src/index.css b/web/src/index.css index b290221b3..32437ca81 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -1,12 +1,9 @@ @import "/themes/tailwind-base.css"; @import "/themes/theme-default.css"; @import "/themes/theme-blue.css"; -@import "/themes/theme-gold.css"; @import "/themes/theme-green.css"; -@import "/themes/theme-nature.css"; -@import "/themes/theme-netflix.css"; +@import "/themes/theme-high-contrast.css"; @import "/themes/theme-nord.css"; -@import "/themes/theme-orange.css"; @import "/themes/theme-red.css"; @tailwind base; @@ -26,7 +23,7 @@ @layer utilities { .scrollbar-container { - @apply scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-border scrollbar-track-background_alt; + @apply scrollbar-thin scrollbar-track-background_alt scrollbar-thumb-border scrollbar-track-rounded-full scrollbar-thumb-rounded-full; } } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index dc82a58ab..b7371a193 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -103,6 +103,12 @@ module.exports = { audio_review: { DEFAULT: "hsl(var(--audio_review))", }, + neutral: { + DEFAULT: "hsl(var(--neutral))", + }, + neutral_variant: { + DEFAULT: "hsl(var(--neutral_variant))", + }, }, keyframes: { "accordion-down": { diff --git a/web/themes/theme-blue.css b/web/themes/theme-blue.css index 0a18600c7..df78e768d 100644 --- a/web/themes/theme-blue.css +++ b/web/themes/theme-blue.css @@ -13,6 +13,8 @@ --secondary: 210 40% 90.1%; --secondary-foreground: 222.2 47.4% 61.2%; --secondary-highlight: 210 40% 94%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 46.3% 46.9%; --accent: 210 40% 80.1%; @@ -42,6 +44,8 @@ --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 60% 78%; --secondary-highlight: 217.2 32.6% 25.5%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; diff --git a/web/themes/theme-default.css b/web/themes/theme-default.css index fe19f301b..03ced055c 100644 --- a/web/themes/theme-default.css +++ b/web/themes/theme-default.css @@ -39,6 +39,12 @@ --secondary-highlight: hsl(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: 210 40% 96.1%; @@ -137,6 +143,12 @@ --secondary-highlight: hsl(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: 0 0% 12%; diff --git a/web/themes/theme-gold.css b/web/themes/theme-gold.css deleted file mode 100644 index a4a0b33ba..000000000 --- a/web/themes/theme-gold.css +++ /dev/null @@ -1,59 +0,0 @@ -@layer base { - .theme-gold.light { - --background: 38 77% 88%; - --background-alt: 39 100% 85%; - --foreground: 16 43% 34%; - --muted: 28 46% 56%; - --muted-foreground: 16 43% 34%; - --popover: 38 77% 88%; - --popover-foreground: 16 43% 34%; - --border: 28 46% 56%; - --input: 28 46% 56%; - --card: 38 77% 88%; - --card-foreground: 16 43% 34%; - --primary: 28 46% 56%; - --primary-variant: 28 46% 46%; - --primary-foreground: 60 70% 90%; - --secondary: 39 100% 73%; - --secondary-foreground: 16 43% 34%; - --secondary-highlight: 39 100% 80%; - --accent: 39 100% 73%; - --accent-foreground: 16 43% 34%; - --destructive: 16 43% 34%; - --destructive-foreground: 38 77% 88%; - --warning: 45 100% 51%; - --warning-foreground: 16 43% 34%; - --ring: 28 46% 56%; - --selected: 39 100% 73%; - --selected-foreground: 16 43% 34%; - } - - .theme-gold.dark { - --background: 28 46% 28%; - --background-alt: 28 46% 34%; - --foreground: 38 77% 88%; - --muted: 28 46% 56%; - --muted-foreground: 38 77% 88%; - --popover: 25 45% 34%; - --popover-foreground: 38 77% 88%; - --border: 28 46% 56%; - --input: 28 46% 56%; - --card: 16 43% 34%; - --card-foreground: 38 77% 88%; - --primary: 28 46% 50%; - --primary-variant: 28 46% 46%; - --primary-foreground: 60 70% 90%; - --secondary: 39 60% 63%; - --secondary-foreground: 28 50% 44%; - --secondary-highlight: 39 100% 65%; - --accent: 39 100% 52%; - --accent-foreground: 16 43% 34%; - --destructive: 38 77% 88%; - --destructive-foreground: 16 43% 34%; - --warning: 45 100% 51%; - --warning-foreground: 16 43% 34%; - --ring: 28 46% 56%; - --selected: 39 100% 52%; - --selected-foreground: 16 43% 34%; - } -} diff --git a/web/themes/theme-green.css b/web/themes/theme-green.css index f2816d953..5cfb2be17 100644 --- a/web/themes/theme-green.css +++ b/web/themes/theme-green.css @@ -13,6 +13,8 @@ --secondary: 145 34.8% 85.9%; --secondary-foreground: 145 35.9% 50%; --secondary-highlight: 145 70% 92%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --muted: 145 14.8% 75.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 145 34.8% 85.9%; @@ -42,6 +44,8 @@ --secondary: 145 13.7% 15.9%; --secondary-foreground: 0 0% 98%; --secondary-highlight: 145 30% 20%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --muted: 145 20% 15%; --muted-foreground: 145 25% 64.9%; --accent: 145 16.5% 25.1%; diff --git a/web/themes/theme-high-contrast.css b/web/themes/theme-high-contrast.css new file mode 100644 index 000000000..b9a7cdb86 --- /dev/null +++ b/web/themes/theme-high-contrast.css @@ -0,0 +1,185 @@ +@layer base { + .theme-high-contrast.light { + --background: hsl(0, 0%, 100%); + --background: 0 0% 100%; + + --background-alt: hsl(0, 0%, 99.5%); + --background-alt: 0 0% 99.5%; + + --foreground: hsl(222.2, 84%, 4.9%); + --foreground: 222.2 84% 4.9%; + + --card: hsl(0, 0%, 100%); + --card: 0 0% 100%; + + --card-foreground: hsl(222.2, 84%, 4.9%); + --card-foreground: 222.2 84% 4.9%; + + --popover: hsl(0, 0%, 100%); + --popover: 0 0% 100%; + + --popover-foreground: hsl(222.2, 84%, 4.9%); + --popover-foreground: 222.2 84% 4.9%; + + --primary: hsl(222.2, 37.4%, 1.2%); + --primary: 222.2 47.4% 1.2%; + + --primary-variant: hsl(222.2, 37.4%, 4.2%); + --primary-variant: 222.2 47.4% 4.2%; + + --primary-foreground: hsl(210, 40%, 98%); + --primary-foreground: 210 40% 98%; + + --secondary: hsl(0, 0%, 98.1%); + --secondary: 0 0% 98.1%; + + --secondary-foreground: hsl(222.2, 17.4%, 6.2%); + --secondary-foreground: 222.2 17.4% 6.2%; + + --secondary-highlight: hsl(0, 0%, 84%); + --secondary-highlight: 0 0% 84%; + + --neutral: hsl(0, 0%, 5.1%); + --neutral: 0 0% 5.1%; + + --neutral_variant: hsl(0, 0%, 2.2%); + --neutral_variant: 0 0% 2.2%; + + --muted: hsl(0, 0%, 94.1%); + --muted: 0 0% 94.1%; + + --muted-foreground: hsl(215.4, 6.3%, 46.9%); + --muted-foreground: 215.4 6.3% 46.9%; + + --accent: hsl(0, 0%, 94.1%); + --accent: 0 0% 94.1%; + + --accent-foreground: hsl(222.2, 47.4%, 11.2%); + --accent-foreground: 222.2 47.4% 11.2%; + + --destructive: hsl(0, 84.2%, 60.2%); + --destructive: 0 84.2% 60.2%; + + --destructive-foreground: hsl(0, 100%, 83%); + --destructive-foreground: 0 100% 83%; + + --warning: hsl(17, 87%, 18%); + --warning: 17 87% 18%; + + --warning-foreground: hsl(32, 100%, 74%); + --warning-foreground: 32 100% 74%; + + --border: hsl(214.3, 31.8%, 91.4%); + --border: 214.3 31.8% 91.4%; + + --input: hsl(0, 0%, 85%); + --input: 0 0% 85%; + + --ring: hsla(0, 0%, 25%, 0%); + --ring: 0 0% 25% 0%; + + --selected: hsl(228, 89%, 63%); + --selected: 228 89% 63%; + + --selected-foreground: hsl(0 0% 100%); + --selected-foreground: 0 0% 100%; + + --severity_alert: var(--red-800); + --severity_alert_dimmed: var(--red-500); + + --severity_detection: var(--orange-600); + --severity_detection_dimmed: var(--orange-400); + + --severity_significant_motion: var(--yellow-400); + --severity_significant_motion_dimmed: var(--yellow-200); + + --motion_review: hsl(44, 94%, 50%); + --motion_review: 44 94% 50%; + + --motion_review_dimmed: hsl(44, 60%, 40%); + --motion_review_dimmed: 44 60% 40%; + + --audio_review: hsl(228, 94%, 67%); + --audio_review: 228 94% 67%; + } + + .theme-high-contrast.dark { + --background: hsl(0, 0, 0%); + --background: 0 0% 0%; + + --background-alt: hsl(0, 0, 3%); + --background-alt: 0 0% 3%; + + --foreground: hsl(0, 0%, 100%); + --foreground: 0, 0%, 100%; + + --card: hsl(0, 0%, 11%); + --card: 0, 0%, 11%; + + --card-foreground: hsl(210, 40%, 98%); + --card-foreground: 210 40% 98%; + + --popover: hsl(0, 0%, 11%); + --popover: 0, 0%, 11%; + + --popover-foreground: hsl(0, 0%, 98%); + --popover-foreground: 0 0% 98%; + + --primary: hsl(0, 0%, 91%); + --primary: 0 0% 91%; + + --primary-variant: hsl(0, 0%, 64%); + --primary-variant: 0 0% 64%; + + --primary-foreground: hsl(0, 0%, 29%); + --primary-foreground: 0 0% 29%; + + --secondary: hsl(0, 0%, 5%); + --secondary: 0 0% 5%; + + --secondary-foreground: hsl(0, 0%, 82%); + --secondary-foreground: 0 0% 82%; + + --secondary-highlight: hsl(0, 0%, 45%); + --secondary-highlight: 0 0% 45%; + + --neutral: hsl(0, 0%, 97.1%); + --neutral: 0 0% 97.1%; + + --neutral_variant: hsl(0, 0%, 92.2%); + --neutral_variant: 0 0% 92.2%; + + --muted: hsl(0, 0%, 22%); + --muted: 0 0% 22%; + + --muted-foreground: hsl(0, 0%, 82%); + --muted-foreground: 0 0% 82%; + + --accent: hsl(0, 0%, 11%); + --accent: 0 0% 11%; + + --accent-foreground: hsl(210, 40%, 95%); + --accent-foreground: 210 40% 95%; + + --destructive: hsl(0, 62.8%, 30.6%); + --destructive: 0 62.8% 30.6%; + + --destructive-foreground: hsl(0, 100%, 83%); + --destructive-foreground: 0 100% 83%; + + --warning: hsl(17, 87%, 18%); + --warning: 17 87% 18%; + + --warning-foreground: hsl(32, 100%, 74%); + --warning-foreground: 32 100% 74%; + + --border: hsl(0, 0%, 92%); + --border: 0 0% 92%; + + --input: hsl(0, 0%, 45%); + --input: 0 0% 45%; + + --ring: hsla(0, 0%, 25%, 0%); + --ring: 0 0% 25% 0%; + } +} diff --git a/web/themes/theme-nature.css b/web/themes/theme-nature.css deleted file mode 100644 index f7e29c512..000000000 --- a/web/themes/theme-nature.css +++ /dev/null @@ -1,59 +0,0 @@ -@layer base { - .theme-nature.light { - --background: 70 30% 92%; - --background-alt: 58 45% 89%; - --foreground: 187 33% 43%; - --muted: 70 20% 68%; - --muted-foreground: 187 33% 43%; - --popover: 58 45% 83%; - --popover-foreground: 187 33% 43%; - --border: 93 28% 56%; - --input: 93 28% 56%; - --card: 58 65% 83%; - --card-foreground: 187 33% 43%; - --primary: 93 28% 56%; - --primary-variant: 93 28% 46%; - --primary-foreground: 58 65% 83%; - --secondary: 70 20% 78%; - --secondary-foreground: 187 33% 43%; - --secondary-highlight: 70 30% 75%; - --accent: 70 20% 68%; - --accent-foreground: 187 33% 43%; - --destructive: 187 33% 43%; - --destructive-foreground: 58 65% 83%; - --warning: 45 100% 51%; - --warning-foreground: 187 33% 43%; - --ring: 93 28% 56%; - --selected: 70 20% 68%; - --selected-foreground: 187 33% 43%; - } - - .theme-nature.dark { - --background: 187 33% 43%; - --background-alt: 187 33% 33%; - --foreground: 58 65% 83%; - --muted: 70 20% 68%; - --muted-foreground: 58 65% 83%; - --popover: 187 33% 43%; - --popover-foreground: 58 65% 83%; - --border: 93 28% 56%; - --input: 93 28% 56%; - --card: 187 33% 43%; - --card-foreground: 58 65% 83%; - --primary: 93 38% 36%; - --primary-variant: 93 28% 46%; - --primary-foreground: 187 33% 43%; - --secondary: 70 20% 58%; - --secondary-foreground: 58 65% 83%; - --secondary-highlight: 70 30% 60%; - --accent: 70 20% 68%; - --accent-foreground: 58 65% 83%; - --destructive: 58 65% 83%; - --destructive-foreground: 187 33% 43%; - --warning: 45 100% 51%; - --warning-foreground: 187 33% 43%; - --ring: 93 28% 56%; - --selected: 70 20% 68%; - --selected-foreground: 58 65% 83%; - } -} diff --git a/web/themes/theme-netflix.css b/web/themes/theme-netflix.css deleted file mode 100644 index 641884b45..000000000 --- a/web/themes/theme-netflix.css +++ /dev/null @@ -1,59 +0,0 @@ -@layer base { - .theme-netflix.light { - --background: 0 0% 100%; - --background-alt: 0 0% 96%; - --foreground: 0 0% 0%; - --muted: 0 0% 68%; - --muted-foreground: 0 0% 0%; - --popover: 0 0% 95%; - --popover-foreground: 0 0% 0%; - --border: 0 68% 39%; - --input: 0 68% 39%; - --card: 0 0% 95%; - --card-foreground: 0 0% 0%; - --primary: 0 100% 44%; - --primary-variant: 0 100% 34%; - --primary-foreground: 0 0% 100%; - --secondary: 0 0% 80%; - --secondary-foreground: 0 0% 100%; - --secondary-highlight: 0 0% 10%; - --accent: 0 100% 50%; - --accent-foreground: 0 0% 0%; - --destructive: 0 68% 39%; - --destructive-foreground: 0 0% 100%; - --warning: 45 100% 51%; - --warning-foreground: 0 0% 0%; - --ring: 0 100% 44%; - --selected: 0 100% 44%; - --selected-foreground: 0 0% 100%; - } - - .theme-netflix.dark { - --background: 0 0% 0%; - --background-alt: 0 0% 5%; - --foreground: 0 0% 100%; - --muted: 0 0% 50%; - --muted-foreground: 0 0% 100%; - --popover: 0 0% 5%; - --popover-foreground: 0 0% 100%; - --border: 0 68% 39%; - --input: 0 68% 39%; - --card: 0 0% 5%; - --card-foreground: 0 0% 100%; - --primary: 0 70% 44%; - --primary-variant: 0 100% 34%; - --primary-foreground: 0 0% 0%; - --secondary: 0 0% 20%; - --secondary-foreground: 0 0% 40%; - --secondary-highlight: 0 0% 90%; - --accent: 0 100% 50%; - --accent-foreground: 0 0% 100%; - --destructive: 0 68% 39%; - --destructive-foreground: 0 0% 100%; - --warning: 45 100% 51%; - --warning-foreground: 0 0% 0%; - --ring: 0 100% 44%; - --selected: 0 100% 44%; - --selected-foreground: 0 0% 0%; - } -} diff --git a/web/themes/theme-nord.css b/web/themes/theme-nord.css index ab8ead0e4..59593b0cd 100644 --- a/web/themes/theme-nord.css +++ b/web/themes/theme-nord.css @@ -17,6 +17,8 @@ --secondary: 215 14% 80%; --secondary-foreground: 222 20% 16%; --secondary-highlight: 215 14% 88%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --accent: 215 14% 80%; --accent-foreground: 222 20% 16%; --destructive: 0 80% 50%; @@ -46,6 +48,8 @@ --secondary: 215 14% 25%; --secondary-foreground: 222 20% 86%; --secondary-highlight: 215 14% 35%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --accent: 215 14% 25%; --accent-foreground: 222 20% 96%; --destructive: 0 80% 50%; diff --git a/web/themes/theme-orange.css b/web/themes/theme-orange.css deleted file mode 100644 index 5e428c33a..000000000 --- a/web/themes/theme-orange.css +++ /dev/null @@ -1,59 +0,0 @@ -@layer base { - .theme-orange.light { - --background: 24 50% 98.3%; - --background-alt: 30 50% 96%; - --foreground: 20 14.3% 4.1%; - --card: 0 0% 100%; - --card-foreground: 20 14.3% 4.1%; - --popover: 24 30% 95%; - --popover-foreground: 24 24.3% 14.1%; - --primary: 24.6 55% 53.1%; - --primary-variant: 24.6 55% 43.1%; - --primary-foreground: 60 9.1% 97.8%; - --secondary: 24 54.8% 95.9%; - --secondary-foreground: 24 79.8% 60%; - --secondary-highlight: 30 50% 92%; - --muted: 24 4.8% 75.9%; - --muted-foreground: 25 25.3% 44.7%; - --accent: 24 14.8% 95.9%; - --accent-foreground: 24 14.8% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 60 9.1% 97.8%; - --warning: 45 100% 51%; - --warning-foreground: 20 14.3% 4.1%; - --border: 20 5.9% 90%; - --input: 24 25.9% 90%; - --ring: 24.6 95% 53.1%; - --selected: 24.6 85% 53.1%; - --selected-foreground: 60 9.1% 97.8%; - } - - .theme-orange.dark { - --background: 20 14.3% 4.1%; - --background-alt: 20 14.3% 9.1%; - --foreground: 60 9.1% 97.8%; - --card: 20 14.3% 4.1%; - --card-foreground: 60 9.1% 97.8%; - --popover: 20 14.3% 4.1%; - --popover-foreground: 60 9.1% 97.8%; - --primary: 20.5 90.2% 68.2%; - --primary-variant: 20.5 90.2% 58.2%; - --primary-foreground: 60 9.1% 97.8%; - --secondary: 12 6.5% 15.1%; - --secondary-foreground: 20 49.1% 57.8%; - --secondary-highlight: 12 6.5% 25.1%; - --muted: 20.5 26.5% 15.1%; - --muted-foreground: 20 25.4% 53.9%; - --accent: 20 16.5% 15.1%; - --accent-foreground: 20 19.1% 79.8%; - --destructive: 0 72.2% 50.6%; - --destructive-foreground: 60 9.1% 97.8%; - --warning: 45 100% 51%; - --warning-foreground: 60 9.1% 97.8%; - --border: 12 6.5% 15.1%; - --input: 12 6.5% 15.1%; - --ring: 20.5 90.2% 48.2%; - --selected: 20.5 90.2% 38.2%; - --selected-foreground: 60 9.1% 97.8%; - } -} diff --git a/web/themes/theme-red.css b/web/themes/theme-red.css index f522d74b7..8da5f5288 100644 --- a/web/themes/theme-red.css +++ b/web/themes/theme-red.css @@ -13,6 +13,8 @@ --secondary: 240 4.8% 95.9%; --secondary-foreground: 0 35.9% 50%; --secondary-highlight: 0 0% 92%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; @@ -42,6 +44,8 @@ --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --secondary-highlight: 0 0% 25.9%; + --neutral: 0 0% 45.1%; + --neutral_variant: 0 0% 32.2%; --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; --accent: 12 6.5% 15.1%;