From dc4c00544664728512471529c7b231566fe4682a Mon Sep 17 00:00:00 2001
From: Noah Solomon <noahsolomon2003@gmail.com>
Date: Thu, 21 Nov 2024 22:55:30 -0500
Subject: [PATCH] styles for shad

---
 generate/src/Root.tsx  |  5 ++--
 generate/src/style.css | 54 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/generate/src/Root.tsx b/generate/src/Root.tsx
index 540b751..7b29f52 100644
--- a/generate/src/Root.tsx
+++ b/generate/src/Root.tsx
@@ -1,5 +1,5 @@
 import { Composition, staticFile } from 'remotion';
-import { AudioGramSchema, AudiogramComposition } from './Composition';
+import { AudioGramSchema, AudiogramComposition } from './composition-coin';
 import './style.css';
 import {
 	initialAgentName,
@@ -8,6 +8,7 @@ import {
 	fps,
 } from './tmp/context';
 import { getAudioDuration } from '@remotion/media-utils';
+import { CoinChartComposition } from './composition-coin-chart';
 
 const PROCESS_ID = 0;
 
@@ -28,9 +29,7 @@ export const RemotionRoot: React.FC = () => {
 					audioFileName: staticFile(`audio-${PROCESS_ID}.mp3`),
 					titleText: 'Back propagation',
 					titleColor: 'rgba(186, 186, 186, 0.93)',
-
 					initialAgentName,
-
 					// Subtitles settings
 					subtitlesFileName,
 					videoFileName,
diff --git a/generate/src/style.css b/generate/src/style.css
index e212894..00d600a 100644
--- a/generate/src/style.css
+++ b/generate/src/style.css
@@ -7,9 +7,55 @@
 	src: url('../public/ProximaNovaBlack.ttf') format('truetype');
 }
 
-:root {
-	--remotion-font: 'ProximaNovaBlack';
-	--base-size: 48px;
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 222.2 47.4% 11.2%;
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 222.2 47.4% 11.2%;
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
+		--card: 0 0% 100%;
+		--card-foreground: 222.2 47.4% 11.2%;
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
+		--secondary: 210 40% 96.1%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
+		--accent: 210 40% 96.1%;
+		--accent-foreground: 222.2 47.4% 11.2%;
+		--destructive: 0 100% 50%;
+		--destructive-foreground: 210 40% 98%;
+		--ring: 215 20.2% 65.1%;
+		--radius: 0.5rem;
+		--remotion-font: 'ProximaNovaBlack';
+		--base-size: 48px;
+	}
+
+	.dark {
+		--background: 224 71% 4%;
+		--foreground: 213 31% 91%;
+		--muted: 223 47% 11%;
+		--muted-foreground: 215.4 16.3% 56.9%;
+		--accent: 216 34% 17%;
+		--accent-foreground: 210 40% 98%;
+		--popover: 224 71% 4%;
+		--popover-foreground: 215 20.2% 65.1%;
+		--border: 216 34% 17%;
+		--input: 216 34% 17%;
+		--card: 224 71% 4%;
+		--card-foreground: 213 31% 91%;
+		--primary: 210 40% 98%;
+		--primary-foreground: 222.2 47.4% 1.2%;
+		--secondary: 222.2 47.4% 11.2%;
+		--secondary-foreground: 210 40% 98%;
+		--destructive: 0 63% 31%;
+		--destructive-foreground: 210 40% 98%;
+		--ring: 216 34% 17%;
+		--remotion-font: 'ProximaNovaBlack';
+		--base-size: 48px;
+	}
 }
 
 .audio-viz {
@@ -25,4 +71,4 @@
 .bar {
 	border-radius: calc(var(--base-size) * 0.25);
 	width: calc(var(--base-size) * 0.25);
-}
\ No newline at end of file
+}