styles for shad

noahgsolomon · Nov 22, 2024 · dc4c005 · dc4c005
1 parent 96cd9f1
commit dc4c005
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 7 deletions.
diff --git 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
@@ -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);
-}
+}