futo-org · ac615223s5 · May 16, 2025
diff --git a/Grayjay.Desktop.Web/index.html b/Grayjay.Desktop.Web/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: #1b1b1b">
+<html lang="en" style="background-color: var(--black-color-2)">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css
@@ -15,9 +15,9 @@
     padding: 0px 8px;
     gap: 4px;
     border-radius: 99px;
-    border: 1px solid rgba(255, 255, 255, 0.07);
+    border: 1px solid rgb(from var(--white-color)  r g b / 0.07);
     background: rgba(99, 101, 240, 0.00);
-    color: #8C8C8C;
+    color: var(--grey-color-4);
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
     font-size: 16px;
@@ -31,6 +31,6 @@
 }
 
 .containerButton.active {
-    background: rgba(255, 255, 255, 0.06);
-    color: #FFF;
+    background: rgb(from var(--white-color)  r g b / 0.06);
+    color: var(--white-color);
 }
diff --git a/Grayjay.Desktop.Web/src/components/CommentView/index.module.css b/Grayjay.Desktop.Web/src/components/CommentView/index.module.css
@@ -19,7 +19,7 @@
 }
 
 .text {
-    color: #D9D9D9;
+    color: var(--grey-color-3);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -35,7 +35,7 @@
 }
 
 .text > a {
-    color: #019BE7;
+    color: var(--blue-color-1);
     text-decoration: none;
 }
 
@@ -71,7 +71,7 @@
 }
 
 .authorName {
-    color: #FFF;
+    color: var(--white-color);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -82,7 +82,7 @@
 }
 
 .metadata {
-    color: #888;
+    color: var(--grey-color-4);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -100,9 +100,9 @@
     align-items: center; 
     gap: 4px; 
     border-radius: 99px; 
-    border: 1px solid #454545; 
+    border: 1px solid var(--grey-color-7); 
     overflow: hidden; 
-    color: #FFF; 
+    color: var(--white-color); 
     text-align: center; 
     font-family: Inter; 
     font-size: 14px; 

diff --git a/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css b/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css
@@ -7,7 +7,7 @@
 }
 .noSubs .title {
     margin-top: 16px;
-    color: #FFF;
+    color: var(--white-color);
 
     text-align: center;
     font-family: Inter;
@@ -18,7 +18,7 @@
 }
 .noSubs .description {
     margin-top: 8px;
-    color: #575757;
+    color: var(--grey-color-5);
     text-align: center;
     font-family: Inter;
     font-size: 18px;

diff --git a/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css b/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css
@@ -1,8 +1,8 @@
 .menu{
-    background-color: #141414;
+    background-color: var(--black-color-1);
     padding: 12px;
     border-radius: 10px;
     border-radius: 10px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--grey-color-6);
     box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.13), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.15), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.19), 0px 100px 80px 0px rgba(0, 0, 0, 0.25);
 }
diff --git a/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css b/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css
@@ -9,9 +9,9 @@
 .window {
     height: 100%;
     padding: 10px;
-    background-color: #111;
+    background-color: var(--black-color-1);
     border-radius: 10px;
-    border: 2px solid #222;
+    border: 2px solid var(--grey-color-8);
     box-sizing: border-box;
 }
 .window iframe {

diff --git a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css
@@ -1,6 +1,6 @@
 .containerPlaybackQueue {
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.13);
+    border: 1px solid rgb(from var(--white-color)  r g b / 0.13);
 
     padding-top: 32px;
     padding-left: 12px;
@@ -9,7 +9,7 @@
 
 .title {
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--grey-color-0);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 24px;
@@ -20,7 +20,7 @@
 
 .metadata {
     overflow: hidden;
-    color: #8C8C8C;
+    color: var(--grey-color-4);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 14px;
@@ -30,7 +30,7 @@
 }
 
 .itemNumber {
-    color: #8C8C8C;
+    color: var(--grey-color-4);
     text-align: center;
     font-family: Inter;
     font-size: 12px;
@@ -43,13 +43,13 @@
 }
 
 .itemNumber:hover {
-    color: #fff;
+    color: var(--white-color);
 }
 
 
 .itemTitle {
     overflow: hidden;
-    color: #D9D9D9;
+    color: var(--grey-color-3);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 14px;
@@ -61,7 +61,7 @@
 }
 
 .itemAuthor {
-    color: #8C8C8C;
+    color: var(--grey-color-4);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;

diff --git a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx
@@ -83,7 +83,7 @@ const PlaybackQueue: Component<PlaybackQueueProps> = (props) => {
                                     "align-items": "center",
                                     "overflow": "hidden",
                                     "gap": "8px",
-                                    "background-color": index() == props.index ? "#2E2E2E" : undefined,
+                                    "background-color": index() == props.index ? "var(--grey-color-6)" : undefined,
                                     "border-radius": "8px"
                                 }} onClick={() => {
                                     const v = video();

diff --git a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--white-color);
     font-family: Inter;
     font-size: 29px;
     font-style: normal;

diff --git a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx
@@ -143,7 +143,7 @@ const PlaylistDetailView: Component<PlaylistDetailViewProps> = (props) => {
             text="Shuffle"
             icon={iconShuffle}
             style={{
-              border: "1px solid #2E2E2E",
+              border: "1px solid var(--grey-color-6)",
               "margin-left": "16px",
               "margin-right": "16px",
               "flex-shrink": 0
@@ -157,7 +157,7 @@ const PlaylistDetailView: Component<PlaylistDetailViewProps> = (props) => {
               showClearButton={true}
               inputContainerStyle={{
                 "height": "70px", 
-                "background": "#141414"
+                "background": "var(--black-color-1)"
               }}
               onTextChanged={(v) => {
                 setFilterText(v);

diff --git a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css
@@ -1,5 +1,5 @@
 .metadata {
-    color: rgba(255, 255, 255, 0.60);
+    color: rgb(from var(--white-color)  r g b / 0.60);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -49,7 +49,7 @@
     -webkit-line-clamp: 2;
     flex: 1 0 0;
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--grey-color-0);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;

diff --git a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.tsx b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.tsx
@@ -30,7 +30,7 @@ const PlaylistItemView: Component<PlaylistItemViewProps> = (props) => {
   const editable$ = createMemo(() => props.isEditable ?? true);
 
   return (
-    <div style="display: flex; flex-direction: row; align-items: center; width: 100%; height: 100%; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid #2E2E2E; box-sizing: border-box; background-color: #141414" onClick={() => {{
+    <div style="display: flex; flex-direction: row; align-items: center; width: 100%; height: 100%; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--grey-color-6); box-sizing: border-box; background-color: var(--black-color-1)" onClick={() => {{
       props.onPlay?.();
     }}}>
       <Show when={props.onDragStart && editable$()} fallback={<div style="width: 12px"></div>}>

diff --git a/Grayjay.Desktop.Web/src/components/RatingView/index.module.css b/Grayjay.Desktop.Web/src/components/RatingView/index.module.css
@@ -14,7 +14,7 @@
 
 .text {
     margin-left: 4px;
-    color: #FFF;
+    color: var(--white-color);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -23,7 +23,7 @@
 }
 
 .text.active {
-    color: #019BE7;
+    color: var(--blue-color-1);
 }
 
 .text.editable {

diff --git a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--white-color);
     font-family: Inter;
     font-size: 29px;
     font-style: normal;

diff --git a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx
@@ -66,7 +66,7 @@ const RemotePlaylistDetailView: Component<RemotePlaylistDetailViewProps> = (prop
             text="Shuffle"
             icon={iconShuffle}
             style={{
-              border: "1px solid #2E2E2E",
+              border: "1px solid var(--grey-color-6)",
               "margin-left": "16px",
               "margin-right": "16px",
               "flex-shrink": 0

diff --git a/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css b/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css
@@ -19,7 +19,7 @@
 }
 
 .text {
-    color: #D9D9D9;
+    color: var(--grey-color-3);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -67,7 +67,7 @@
 }
 
 .authorName {
-    color: #FFF;
+    color: var(--white-color);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -78,7 +78,7 @@
 }
 
 .metadata {
-    color: #888;
+    color: var(--grey-color-4);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -96,9 +96,9 @@
     align-items: center; 
     gap: 4px; 
     border-radius: 99px; 
-    border: 1px solid #454545; 
+    border: 1px solid var(--grey-color-7); 
     overflow: hidden; 
-    color: #FFF; 
+    color: var(--white-color); 
     text-align: center; 
     font-family: Inter; 
     font-size: 14px; 

diff --git a/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css
@@ -3,7 +3,7 @@
     align-items: flex-start;
     justify-content: center;
     border-radius: 8px;
-    border: 1px solid #454545;
+    border: 1px solid var(--grey-color-7);
     overflow: hidden;
     height: 40px;
 }
@@ -23,10 +23,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #8C8C8C;
+    color: var(--grey-color-4);
 }
 
 .containerButton.active {
-    background: rgba(255, 255, 255, 0.06);
-    color: #FFF;
+    background: rgb(from var(--white-color)  r g b / 0.06);
+    color: var(--white-color);
 }
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css
@@ -22,7 +22,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #FFF;
+    color: var(--white-color);
     gap: 4px;
     padding: 10px;
     flex-direction: column;
@@ -32,9 +32,9 @@
 
     border-radius: 6px;
     box-sizing: border-box;
-    background: #1B1B1B;
+    background: var(--black-color-2);
 }
 
 .containerButton.active {
-    background: #2E2E2E;
+    background: var(--grey-color-6);
 }
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css
@@ -23,13 +23,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #8C8C8C;
+    color: var(--grey-color-4);
     gap: 12px;
     padding-left: 24px;
     padding-right: 24px;
 }
 
 .containerButton.active {
-    background: rgba(255, 255, 255, 0.06);
-    color: #FFF;
+    background: rgb(from var(--white-color)  r g b / 0.06);
+    color: var(--white-color);
 }
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css
@@ -26,15 +26,15 @@
     padding-left: 24px;
     padding-right: 24px;
     align-items: center;
-    color: #FFF;
+    color: var(--white-color);
     gap: 4px;
 
     border-radius: 6px;
-    border: 1px solid #454545;
+    border: 1px solid var(--grey-color-7);
     box-sizing: border-box;
 }
 
 .containerButton.active {
-    background: #2E2E2E;
-    border: 1px solid #2E2E2E;
+    background: var(--grey-color-6);
+    border: 1px solid var(--grey-color-6);
 }