Boost contrast of primary color and more info button slightly for dar…

…k mode
icssc · Jan 24, 2024 · 3f41f9d · 3f41f9d
1 parent 62dc70c
commit 3f41f9d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 18 deletions.
diff --git a/site/src/index.css b/site/src/index.css
@@ -29,6 +29,10 @@ code {
   --peterportal-mid-gray: #8d8d8d;
   --peterportal-uci-gold: #ffd200;
   --peterportal-gray-blue: #f5f6fc;
+  --zot-blue: var(--peterportal-primary-color-1);
+  --aldrich-blue: var(--peterportal-primary-color-2);
+  --ring-road-white: #ffffff;
+  --petr-gray: #808080;
   --border-radius: 8px;
 }
 

diff --git a/site/src/pages/RoadmapPage/Course.scss b/site/src/pages/RoadmapPage/Course.scss
@@ -1,5 +1,5 @@
 .course {
-  box-shadow: 0px 0px 4px #2484c6;
+  box-shadow: 0px 0px 4px var(--zot-blue);
   background: var(--overlay1);
   border-radius: 15px;
   height: auto;
@@ -9,7 +9,7 @@
 
   .name {
     font-weight: bold;
-    color: #2484c6;
+    color: var(--zot-blue);
     font-size: 18px;
   }
 

diff --git a/site/src/pages/RoadmapPage/Header.scss b/site/src/pages/RoadmapPage/Header.scss
@@ -1,10 +1,3 @@
-* {
-  --zot-blue: #2484c6;
-  --aldrich-blue: #74d1f6;
-  --ring-road-white: #ffffff;
-  --petr-gray: #808080;
-}
-
 .header {
   background: linear-gradient(to right, var(--zot-blue), var(--aldrich-blue));
   border-radius: var(--border-radius);

diff --git a/site/src/pages/RoadmapPage/Quarter.scss b/site/src/pages/RoadmapPage/Quarter.scss
@@ -13,7 +13,7 @@
 .quarter {
   background-color: var(--overlay1);
   border-radius: 10px;
-  box-shadow: 0px 0px 4px #2484c6;
+  box-shadow: 0px 0px 4px var(--zot-blue);
   flex: 1 1 30%;
   height: fit-content;
   margin: 0.75rem;

diff --git a/site/src/pages/RoadmapPage/Year.scss b/site/src/pages/RoadmapPage/Year.scss
@@ -1,10 +1,3 @@
-* {
-  --zot-blue: #2484c6;
-  --aldrich-blue: #74d1f6;
-  --ring-road-white: #ffffff;
-  --petr-gray: #808080;
-}
-
 [data-theme='dark'] {
   .year-settings-btn:hover,
   .year-settings-btn:focus,
@@ -50,7 +43,7 @@
 
 .empty-quarter {
   border-radius: 10px;
-  box-shadow: 0px 0px 4px #2484c6;
+  box-shadow: 0px 0px 4px var(--zot-blue);
   flex: 1 1 30%;
   margin: 0.75rem;
 }

diff --git a/site/src/style/theme.scss b/site/src/style/theme.scss
@@ -25,6 +25,8 @@
   --text-dark: #fff;
   --text-light: #fff;
   --hover: #cacbcd;
+  --peterportal-primary-color-1: #268cd3;
+  --zot-blue: var(--peterportal-primary-color-1);
 
   color-scheme: dark;
 }
@@ -61,6 +63,24 @@
     background-color: var(--overlay3);
   }
 
+  .btn-outline-primary {
+    color: #0f83ff;
+    border-color: #0f83ff;
+
+    &:hover,
+    &:focus {
+      color: white;
+    }
+
+    &:hover {
+      border-color: #007bff;
+    }
+
+    &:focus {
+      border-color: #2767d4;
+    }
+  }
+
   .close {
     color: var(--text);
     text-shadow: none;