fix: also keep old color variables when not sign in

hypertrons · Mar 23, 2024 · 49689e8 · 49689e8
1 parent a103264
commit 49689e8
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git a/src/pages/ContentScripts/features/developer-networks/react-modal.scss b/src/pages/ContentScripts/features/developer-networks/react-modal.scss
@@ -20,6 +20,6 @@
     rgba(0, 0, 0, 0.18) 0px 4.8px 14.4px 0px;
   outline: transparent solid 3px;
   border-radius: 2px;
-  background: var(--bgColor-default);
-  color: var(--fgColor-default);
+  background: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default, var(--color-fg-default));
 }
diff --git a/src/pages/ContentScripts/features/oss-gpt/rcw.scss b/src/pages/ContentScripts/features/oss-gpt/rcw.scss
@@ -28,7 +28,7 @@
   margin-left: auto;
 }
 .rcw-client .rcw-message-text {
-  background-color: var(--bgColor-accent-muted);
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
   border-radius: 10px;
   max-width: 350px;
   padding: 15px;
@@ -45,7 +45,7 @@
   align-items: flex-start;
 }
 .rcw-response .rcw-message-text {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset, var(--color-canvas-subtle));
   border-radius: 10px;
   max-width: 450px;
   padding: 15px;
@@ -100,7 +100,7 @@
   color: #fff;
 }
 .rcw-conversation-container .rcw-header {
-  background-color: var(--header-bgColor);
+  background-color: var(--header-bgColor, var(--color-header-bg));
   border-radius: 10px 10px 0 0;
   color: #fff;
   display: flex;
@@ -175,7 +175,7 @@
   display: flex;
 }
 .loader-container {
-  background-color: var(--bgColor-inset);
+  background-color: var(--bgColor-inset, var(--color-canvas-subtle));
   border-radius: 10px;
   padding: 15px;
   max-width: 215px;
@@ -220,7 +220,7 @@
   }
 }
 .rcw-messages-container {
-  background-color: var(--bgColor-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   height: 55vh;
   max-height: 600px;
   overflow-y: auto;
@@ -830,7 +830,7 @@ img.rcw-picker-icon {
   animation-name: slide-in;
   animation-fill-mode: forwards;
   align-self: flex-end;
-  background-color: var(--header-bgColor);
+  background-color: var(--header-bgColor, var(--color-header-bg));
   border: 0;
   border-radius: 50%;
   box-shadow: 0 2px 10px 1px var(--color-shadow);

diff --git a/src/pages/ContentScripts/features/repo-activity-racing-bar/PlayerButton.tsx b/src/pages/ContentScripts/features/repo-activity-racing-bar/PlayerButton.tsx
@@ -48,7 +48,9 @@ export const PlayerButton = ({
     >
       <Button
         style={{ backgroundColor: 'var(--color-btn-bg)' }}
-        styles={{ icon: { color: 'var(--fgColor-default)' } }}
+        styles={{
+          icon: { color: 'var(--fgColor-default, var(--color-fg-default))' },
+        }}
         icon={icon}
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}

diff --git a/src/pages/ContentScripts/features/repo-activity-racing-bar/SpeedController.tsx b/src/pages/ContentScripts/features/repo-activity-racing-bar/SpeedController.tsx
@@ -29,7 +29,7 @@ export const SpeedController = ({
     <Segmented
       style={{
         backgroundColor: 'var(--color-btn-bg)',
-        color: 'var(--fgColor-default)',
+        color: 'var(--fgColor-default, var(--color-fg-default))',
       }}
       options={options}
       value={speed}

diff --git a/src/pages/ContentScripts/index.scss b/src/pages/ContentScripts/index.scss
@@ -5,7 +5,7 @@
 }
 
 .hypertrons-crx-border {
-  border: 1px solid var(--borderColor-default);
+  border: 1px solid var(--borderColor-default, var(--color-border-default));
   border-radius: 6px;
 }
 
@@ -15,8 +15,8 @@
   margin: 0;
   font-size: 14px;
   line-height: 35px;
-  background-color: var(--bgColor-inset);
-  border: 1px solid var(--borderColor-default);
+  background-color: var(--bgColor-inset, var(--color-canvas-subtle));
+  border: 1px solid var(--borderColor-default, var(--color-border-default));
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }