From 1ab719f5cb49ee808e41c04c4a63bb1000d6c2bb Mon Sep 17 00:00:00 2001 From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> Date: Tue, 9 Jul 2024 20:01:59 -0500 Subject: [PATCH] neutral as a theme color --- web/src/components/timeline/EventSegment.tsx | 2 +- web/src/components/timeline/segment-metadata.tsx | 8 ++++---- web/tailwind.config.js | 6 ++++++ web/themes/theme-blue.css | 4 ++-- web/themes/theme-green.css | 4 ++-- web/themes/theme-high-contrast.css | 12 ++++++------ web/themes/theme-nord.css | 4 ++-- web/themes/theme-red.css | 4 ++-- 8 files changed, 25 insertions(+), 19 deletions(-) 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/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 b1d0444b3..df78e768d 100644 --- a/web/themes/theme-blue.css +++ b/web/themes/theme-blue.css @@ -14,7 +14,7 @@ --secondary-foreground: 222.2 47.4% 61.2%; --secondary-highlight: 210 40% 94%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --neutral_variant: 0 0% 32.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 46.3% 46.9%; --accent: 210 40% 80.1%; @@ -45,7 +45,7 @@ --secondary-foreground: 210 60% 78%; --secondary-highlight: 217.2 32.6% 25.5%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --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-green.css b/web/themes/theme-green.css index 08134bd35..5cfb2be17 100644 --- a/web/themes/theme-green.css +++ b/web/themes/theme-green.css @@ -14,7 +14,7 @@ --secondary-foreground: 145 35.9% 50%; --secondary-highlight: 145 70% 92%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --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%; @@ -45,7 +45,7 @@ --secondary-foreground: 0 0% 98%; --secondary-highlight: 145 30% 20%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --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 index 3157add09..30dede9a5 100644 --- a/web/themes/theme-high-contrast.css +++ b/web/themes/theme-high-contrast.css @@ -42,8 +42,8 @@ --neutral: hsl(0, 0%, 45.1%); --neutral: 0 0% 45.1%; - --neutral-variant: hsl(0, 0%, 32.2%); - --neutral-variant: 0 0% 32.2%; + --neutral_variant: hsl(0, 0%, 32.2%); + --neutral_variant: 0 0% 32.2%; --muted: hsl(210, 40%, 96.1%); --muted: 210 40% 96.1%; @@ -143,11 +143,11 @@ --secondary-highlight: hsl(0, 0%, 65%); --secondary-highlight: 0 0% 65%; - --neutral: hsl(0, 0%, 65.1%); - --neutral: 0 0% 65.1%; + --neutral: hsl(0, 0%, 95.1%); + --neutral: 0 0% 95.1%; - --neutral-variant: hsl(0, 0%, 52.2%); - --neutral-variant: 0 0% 52.2%; + --neutral_variant: hsl(0, 0%, 82.2%); + --neutral_variant: 0 0% 82.2%; --muted: hsl(0, 0%, 32%); --muted: 0 0% 32%; diff --git a/web/themes/theme-nord.css b/web/themes/theme-nord.css index a6979035c..59593b0cd 100644 --- a/web/themes/theme-nord.css +++ b/web/themes/theme-nord.css @@ -18,7 +18,7 @@ --secondary-foreground: 222 20% 16%; --secondary-highlight: 215 14% 88%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --neutral_variant: 0 0% 32.2%; --accent: 215 14% 80%; --accent-foreground: 222 20% 16%; --destructive: 0 80% 50%; @@ -49,7 +49,7 @@ --secondary-foreground: 222 20% 86%; --secondary-highlight: 215 14% 35%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --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-red.css b/web/themes/theme-red.css index b444b0a02..8da5f5288 100644 --- a/web/themes/theme-red.css +++ b/web/themes/theme-red.css @@ -14,7 +14,7 @@ --secondary-foreground: 0 35.9% 50%; --secondary-highlight: 0 0% 92%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --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%; @@ -45,7 +45,7 @@ --secondary-foreground: 0 0% 98%; --secondary-highlight: 0 0% 25.9%; --neutral: 0 0% 45.1%; - --neutral-variant: 0 0% 32.2%; + --neutral_variant: 0 0% 32.2%; --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; --accent: 12 6.5% 15.1%;