Merge branch 'update-colors' into homepage-redesign

UTDNebula · Nov 13, 2023 · 7fa435f · 7fa435f
2 parents 704db65 + 5cb219a
commit 7fa435f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 49 deletions.
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -84,7 +84,7 @@ function MyApp({ Component, pageProps }: AppProps) {
     palette: {
       mode: prefersDarkMode ? 'dark' : 'light',
       primary: {
-        main: '#7486ce',
+        main: '#573dff',
       },
     },
     typography: {

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -9,7 +9,7 @@ function Document() {
           name="description"
           content="A data visualization tool built to help students view historical course and section data."
         />
-        <meta name="theme-color" content="#7486ce" />
+        <meta name="theme-color" content="#573dff" />
 
         <meta property="og:title" content="UTD Trends" />
         <meta

diff --git a/styles/globals.css b/styles/globals.css
@@ -12,40 +12,6 @@ body,
   background-color: rgb(var(--light-DEFAULT));
 }
 
-@layer base {
-  :root,
-  ::before,
-  ::after {
-    --primary-light: 188 201 253;
-    --primary-DEFAULT: 116 134 206;
-    --primary-dark: 70 89 167;
-    --primary-darker: 49 66 135;
-
-    --light-DEFAULT: 249 249 250;
-    --light-always: 249 249 250;
-
-    --dark-DEFAULT: 31 32 31;
-    --dark-always: 31 32 31;
-
-    --surface: 133 133 133;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    :root,
-    ::before,
-    ::after {
-      --primary-light: 70 89 167;
-      --primary-DEFAULT: 116 134 206;
-      --primary-dark: 188 201 253;
-      --primary-darker: 226 234 254;
-
-      --light-DEFAULT: 31 32 31;
-
-      --dark-DEFAULT: 249 249 250;
-    }
-  }
-}
-
 * {
   box-sizing: border-box;
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -25,21 +25,34 @@ module.exports = {
     },
     extend: {
       colors: {
-        primary: {
-          light: 'rgb(var(--primary-light) / <alpha-value>)',
-          DEFAULT: 'rgb(var(--primary-DEFAULT) / <alpha-value>)',
-          dark: 'rgb(var(--primary-dark) / <alpha-value>)',
-          darker: 'rgb(var(--primary-darker) / <alpha-value>)',
+        haiti: '#090b2c', // brand black
+        persimmon: {
+          50: '#ffe5de',
+          100: '#ffcabd',
+          200: '#ffb09d',
+          300: '#ff947e',
+          400: '#ff7760',
+          500: '#ff5743', // brand accent, danger
+          600: '#d14a39',
+          700: '#a43d2e',
+          800: '#793025',
+          900: '#51231b',
         },
-        light: {
-          DEFAULT: 'rgb(var(--light-DEFAULT) / <alpha-value>)',
-          always: 'rgb(var(--light-always) / <alpha-value>)',
+        royal: '#573dff', // brand secondary (dark)
+        cornflower: {
+          50: '#eae4ff',
+          100: '#d3caff', // ~periwinkle
+          200: '#bcb0fe',
+          300: '#a297fd',
+          400: '#857efc',
+          500: '#6266fa', // brand primary
+          600: '#5455cc',
+          700: '#45449f', // ~royal
+          800: '#363475',
+          900: '#28254d',
         },
-        dark: {
-          DEFAULT: 'rgb(var(--dark-DEFAULT) / <alpha-value>)',
-          always: 'rgb(var(--dark-always) / <alpha-value>)',
-        },
-        surface: 'rgb(var(--surface) / <alpha-value>)',
+        periwinkle: '#c2c8ff', // brand secondary (light)
+        shade: '#101828', // drop shadow color from shipfaster ui
       },
       fontSize: {
         headline1: [