remove accent colors

remotion-dev · Dec 17, 2024 · c43e65b · c43e65b
1 parent b9b72b3
commit c43e65b
Show file tree

Hide file tree

Showing 33 changed files with 103 additions and 191 deletions.
diff --git a/remotion/Contributions/index.tsx b/remotion/Contributions/index.tsx
@@ -15,7 +15,6 @@ import {
 
 import React, { useMemo } from "react";
 import type { Planet, Rocket } from "../../src/config";
-import { type AccentColor } from "../../src/config";
 import { appearDelays } from "../Contributions/compute-positions";
 import { Gradient } from "../Gradients/NativeGradient";
 import { IssueNumber } from "../Issues/IssueNumber";
@@ -268,12 +267,11 @@ const Dot: React.FC<{
 };
 
 export const ContributionsScene: React.FC<{
-  accentColor: AccentColor;
   contributionData: number[];
   total: number;
   rocket: Rocket;
   planet: Planet;
-}> = ({ accentColor, contributionData, total, rocket, planet }) => {
+}> = ({ contributionData, total, rocket, planet }) => {
   const f = useCurrentFrame();
   const { fps } = useVideoConfig();
 
@@ -309,7 +307,7 @@ export const ContributionsScene: React.FC<{
   return (
     <AbsoluteFill>
       <AbsoluteFill style={{ opacity, transform: `rotate(180deg)` }}>
-        <Gradient gradient={accentColorToGradient(accentColor)} />
+        <Gradient gradient={accentColorToGradient()} />
       </AbsoluteFill>
 
       <AbsoluteFill>

diff --git a/remotion/EndScene/PlanetBackground.tsx b/remotion/EndScene/PlanetBackground.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { AbsoluteFill, Img, interpolate, useCurrentFrame } from "remotion";
 import { GOLD_PLANET_BG } from ".";
-import type { AccentColor, Planet } from "../../src/config";
+import type { Planet } from "../../src/config";
 import { Gradient } from "../Gradients/NativeGradient";
 import { Noise } from "../Noise";
 import { planetToGradient } from "../planets";
@@ -18,7 +18,6 @@ export const prefetchPlanetLandingBackground = (planet: Planet): string[] => {
 
 export const PlanetBackground: React.FC<{
   planet: Planet;
-  accentColor: AccentColor;
 }> = ({ planet }) => {
   const frame = useCurrentFrame();
 

diff --git a/remotion/EndScene/index.tsx b/remotion/EndScene/index.tsx
@@ -9,7 +9,7 @@ import {
 
 import { z } from "zod";
 import type { Planet } from "../../src/config";
-import { PlanetEnum, accentColorSchema, rocketSchema } from "../../src/config";
+import { PlanetEnum, rocketSchema } from "../../src/config";
 import { PlanetEntrance } from "../Contributions/PlanetEntrance";
 import { FPS } from "../Issues/make-ufo-positions";
 import { prefetchPlanetImage } from "../planets";
@@ -34,7 +34,6 @@ const container: React.CSSProperties = {
 export const endSceneSchema = z.object({
   rocket: rocketSchema,
   planet: PlanetEnum,
-  accentColor: accentColorSchema,
 });
 
 export const END_SCENE_DURATION = 7.5 * FPS;
@@ -49,7 +48,6 @@ export const prefetchLandingAssets = (planet: Planet): string[] => {
 export const EndScene: React.FC<z.infer<typeof endSceneSchema>> = ({
   rocket,
   planet,
-  accentColor,
 }) => {
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
@@ -79,7 +77,7 @@ export const EndScene: React.FC<z.infer<typeof endSceneSchema>> = ({
   return (
     <AbsoluteFill>
       <AbsoluteFill style={container}>
-        <PlanetBackground planet={planet} accentColor={accentColor} />
+        <PlanetBackground planet={planet} />
         <HidePlanets exitProgress={exitProgress} planet={planet}>
           <PlanetEntrance planet={planet} frame={frame / 1.5 + 130} />
           <LandingRocket planetType={planet} rocket={rocket} />

diff --git a/remotion/IGStory/PullRequests.tsx b/remotion/IGStory/PullRequests.tsx
@@ -1,3 +1,5 @@
+import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
+
 export const PullRequests: React.FC<{
   pullRequests: number;
 }> = ({ pullRequests }) => {
@@ -42,7 +44,7 @@ export const PullRequests: React.FC<{
           style={{
             fontFamily: "Mona Sans",
             fontWeight: "500",
-            color: "white",
+            color: PANE_TEXT_COLOR,
             fontSize: digits > 2 ? 55 : 65,
             lineHeight: "65px",
           }}

diff --git a/remotion/Main.tsx b/remotion/Main.tsx
@@ -132,7 +132,6 @@ export const Main: React.FC<Schema> = ({
   topHour,
   graphData,
   openingSceneStartAngle,
-  accentColor,
   rocket,
   contributionData,
   sampleStarredRepos,
@@ -154,7 +153,6 @@ export const Main: React.FC<Schema> = ({
       <Series>
         <Series.Sequence durationInFrames={OPENING_SCENE_LENGTH}>
           <OpeningScene
-            accentColor={accentColor}
             startAngle={openingSceneStartAngle}
             login={login}
             rocket={rocket}
@@ -173,7 +171,6 @@ export const Main: React.FC<Schema> = ({
               topLanguages={topLanguages}
               showHelperLine={showHelperLine}
               login={login}
-              accentColor={accentColor}
               rocket={rocket}
               octocatSeed={random(login)}
             />
@@ -203,7 +200,6 @@ export const Main: React.FC<Schema> = ({
             topWeekday={topWeekday}
             topHour={topHour}
             graphData={graphData}
-            accentColor={accentColor}
             totalPullRequests={totalPullRequests}
             login={login}
             sampleStarredRepos={sampleStarredRepos}
@@ -218,15 +214,14 @@ export const Main: React.FC<Schema> = ({
             total={totalContributions}
             rocket={rocket}
             contributionData={contributionData}
-            accentColor={accentColor}
             planet={planet}
           />
         </Series.Sequence>
         <Series.Sequence
           durationInFrames={END_SCENE_DURATION}
           offset={-CONTRIBUTIONS_SCENE_EXIT_TRANSITION}
         >
-          <EndScene planet={planet} rocket={rocket} accentColor={accentColor} />
+          <EndScene planet={planet} rocket={rocket} />
         </Series.Sequence>
       </Series>
       {isMobileDevice() ? null : (

diff --git a/remotion/OgImage/PullRequests.tsx b/remotion/OgImage/PullRequests.tsx
@@ -1,3 +1,5 @@
+import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
+
 export const PullRequests: React.FC<{
   pullRequests: number;
 }> = ({ pullRequests }) => {
@@ -34,15 +36,15 @@ export const PullRequests: React.FC<{
           }}
         >
           <path
-            fill="white"
+            fill={PANE_TEXT_COLOR}
             d="M80 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm32.4 97.2c28-12.4 47.6-40.5 47.6-73.2c0-44.2-35.8-80-80-80S0 35.8 0 80c0 32.8 19.7 61 48 73.3V358.7C19.7 371 0 399.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-32.8-19.7-61-48-73.3V272c26.7 20.1 60 32 96 32h86.7c12.3 28.3 40.5 48 73.3 48c44.2 0 80-35.8 80-80s-35.8-80-80-80c-32.8 0-61 19.7-73.3 48H208c-49.9 0-91-38.1-95.6-86.8zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM344 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"
           />
         </svg>
         <div
           style={{
             fontFamily: "Mona Sans",
             fontWeight: "500",
-            color: "white",
+            color: PANE_TEXT_COLOR,
             fontSize: digits > 2 ? 55 : 65,
             lineHeight: "65px",
           }}
@@ -54,7 +56,7 @@ export const PullRequests: React.FC<{
         style={{
           fontFamily: "Mona Sans",
           fontSize: 20,
-          color: "white",
+          color: PANE_TEXT_COLOR,
           fontWeight: 500,
         }}
       >

diff --git a/remotion/Opening/Title.tsx b/remotion/Opening/Title.tsx
@@ -7,14 +7,18 @@ import {
   useVideoConfig,
 } from "remotion";
 import type { z } from "zod";
-import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane";
+import {
+  PANE_BACKGROUND,
+  PANE_BORDER,
+  PANE_TEXT_COLOR,
+} from "../TopLanguages/Pane";
 import { TitleImage, type openingTitleSchema } from "./TitleImage";
 
 const title: React.CSSProperties = {
   fontSize: 80,
   fontWeight: "bold",
   backgroundClip: "text",
-  backgroundImage: "linear-gradient(270.02deg, #bbb 20.63%, #fff 99.87%)",
+  backgroundImage: `linear-gradient(270.02deg, ${PANE_TEXT_COLOR} 20.63%, #2E0EB6 99.87%)`,
   WebkitBackgroundClip: "text",
   backgroundColor: "text",
   WebkitTextFillColor: "transparent",
@@ -28,7 +32,7 @@ export const OpeningTitle: React.FC<
   z.infer<typeof openingTitleSchema> & {
     exitProgress: number;
   }
-> = ({ login, exitProgress, startAngle, rocket, accentColor }) => {
+> = ({ login, exitProgress, startAngle, rocket }) => {
   const { fps, height } = useVideoConfig();
   const frame = useCurrentFrame();
 
@@ -68,7 +72,7 @@ export const OpeningTitle: React.FC<
       style={{
         justifyContent: "center",
         alignItems: "center",
-        color: "white",
+        color: PANE_TEXT_COLOR,
         fontFamily: "Mona Sans",
         fontSize: 40,
         marginTop: -200 + y,
@@ -78,32 +82,36 @@ export const OpeningTitle: React.FC<
     >
       <div
         style={{
-          background: PANE_BACKGROUND,
-          border: PANE_BORDER,
-          display: "inline-flex",
-          flexDirection: "row",
-          paddingRight: 70,
-          paddingTop: PADDING,
-          paddingBottom: PADDING,
-          paddingLeft: PADDING,
-          alignItems: "center",
-          borderRadius: INNER_BORDER_RADIUS + PADDING,
+          padding: 20,
+          backgroundColor: "rgba(255, 255, 255, 0.1)",
+          borderRadius: INNER_BORDER_RADIUS + PADDING + 20,
           transform: `scale(${scaleDivided}) rotateY(${x}deg) rotateX(${
             rotation + rotateX
           }rad) translateY(${translateY}px)`,
+          border: "1px solid rgba(255, 255, 255, 0.1)",
         }}
       >
-        <TitleImage
-          accentColor={accentColor}
-          startAngle={startAngle}
-          login={login}
-          rocket={rocket}
-        />
-        <div>
+        <div
+          style={{
+            background: PANE_BACKGROUND,
+            border: PANE_BORDER,
+            display: "inline-flex",
+            flexDirection: "row",
+            paddingRight: 70,
+            paddingTop: PADDING,
+            paddingBottom: PADDING,
+            paddingLeft: PADDING,
+            alignItems: "center",
+            borderRadius: INNER_BORDER_RADIUS + PADDING,
+          }}
+        >
+          <TitleImage startAngle={startAngle} login={login} rocket={rocket} />
           <div>
-            This is my <strong>#GitHubUnwrapped</strong>
+            <div>
+              This is my <strong>#GitHubUnwrapped</strong>
+            </div>
+            <div style={title}>{login}</div>
           </div>
-          <div style={title}>{login}</div>
         </div>
       </div>
     </AbsoluteFill>

diff --git a/remotion/Opening/TitleImage.tsx b/remotion/Opening/TitleImage.tsx
@@ -7,33 +7,21 @@ import {
   useVideoConfig,
 } from "remotion";
 import { z } from "zod";
-import type { AccentColor } from "../../src/config";
-import {
-  accentColorSchema,
-  openingSceneStartAngle,
-  rocketSchema,
-} from "../../src/config";
+import { openingSceneStartAngle, rocketSchema } from "../../src/config";
 import type { GradientType } from "../Gradients/available-gradients";
 import { PANE_BORDER } from "../TopLanguages/Pane";
 
 export const openingTitleSchema = z.object({
   login: z.string(),
   startAngle: openingSceneStartAngle,
   rocket: rocketSchema,
-  accentColor: accentColorSchema,
 });
 
 const TITLE_IMAGE_INNER_BORDER_RADIUS = 30;
 const TITLE_IMAGE_BORDER_PADDING = 20;
 
-export const accentColorToGradient = (
-  accentColor: AccentColor,
-): GradientType => {
-  if (accentColor === "blue") {
-    return "blueRadial";
-  }
-
-  return "purpleRadial";
+export const accentColorToGradient = (): GradientType => {
+  return "blueRadial";
 };
 
 export const getAvatarImage = (login: string) => {

diff --git a/remotion/Opening/index.tsx b/remotion/Opening/index.tsx
@@ -38,7 +38,6 @@ const OpeningSceneFull: React.FC<z.infer<typeof openingTitleSchema>> = ({
   login,
   startAngle,
   rocket,
-  accentColor,
 }) => {
   const { fps, durationInFrames } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -85,7 +84,7 @@ const OpeningSceneFull: React.FC<z.infer<typeof openingTitleSchema>> = ({
             opacity: interpolate(exitProgress, [0, 1], [1, 0]),
           }}
         >
-          <Gradient gradient={accentColorToGradient(accentColor)} />
+          <Gradient gradient={accentColorToGradient()} />
           <Noise translateX={100} translateY={30} />
         </AbsoluteFill>
         <AbsoluteFill>
@@ -94,7 +93,6 @@ const OpeningSceneFull: React.FC<z.infer<typeof openingTitleSchema>> = ({
             exitProgress={exitProgress}
             login={login}
             rocket={rocket}
-            accentColor={accentColor}
           />
         </AbsoluteFill>
         <AbsoluteFill
@@ -122,7 +120,6 @@ export const OpeningScene: React.FC<z.infer<typeof openingTitleSchema>> = ({
   login,
   startAngle,
   rocket,
-  accentColor,
 }) => {
   const { width, fps, durationInFrames: actualDuration } = useVideoConfig();
   const frame = useCurrentFrame();
@@ -158,12 +155,7 @@ export const OpeningScene: React.FC<z.infer<typeof openingTitleSchema>> = ({
         transform: `scale(${scale}) translateX(${x}px) translateY(50px)`,
       }}
     >
-      <OpeningSceneFull
-        accentColor={accentColor}
-        startAngle={startAngle}
-        login={login}
-        rocket={rocket}
-      />
+      <OpeningSceneFull startAngle={startAngle} login={login} rocket={rocket} />
       {isMobileDevice() ? null : (
         <Sequence from={actualDuration - 60}>
           <Audio src={staticFile("first-whoosh.mp3")} volume={0.5} />

diff --git a/remotion/Productivity/TopDay.tsx b/remotion/Productivity/TopDay.tsx
@@ -2,11 +2,15 @@ import React from "react";
 import { AbsoluteFill } from "remotion";
 import { z } from "zod";
 import { Gradient } from "../Gradients/NativeGradient";
-import { PANE_BACKGROUND, PANE_BORDER } from "../TopLanguages/Pane";
+import {
+  PANE_BACKGROUND,
+  PANE_BORDER,
+  PANE_TEXT_COLOR,
+} from "../TopLanguages/Pane";
 import { Wheel } from "./Wheel";
 
 const labelStyle: React.CSSProperties = {
-  color: "white",
+  color: PANE_TEXT_COLOR,
   fontWeight: "bold",
   fontSize: 45,
   fontFamily: "Mona Sans",

diff --git a/remotion/Productivity/Wheel.tsx b/remotion/Productivity/Wheel.tsx
@@ -1,3 +1,4 @@
+import { transparentize } from "polished";
 import React from "react";
 import {
   AbsoluteFill,
@@ -11,6 +12,7 @@ import {
 } from "remotion";
 import { FPS } from "../Issues/make-ufo-positions";
 import { isMobileDevice } from "../Opening/devices";
+import { PANE_TEXT_COLOR } from "../TopLanguages/Pane";
 
 const wheelSpring = ({
   fps,
@@ -89,8 +91,8 @@ export const Wheel: React.FC<{
               perspective: 1000,
               color:
                 Number(value) === thisIndex && frame - 5 > delay
-                  ? "white"
-                  : "rgba(255, 255, 255, 0.3)",
+                  ? PANE_TEXT_COLOR
+                  : transparentize(0.7, PANE_TEXT_COLOR),
               fontFamily: "Mona Sans",
               fontWeight: "bold",
             }}