@openeventkit/event-site 1.0.43 → 2.0.0

package/gatsby-browser.js

@@ -11,6 +11,7 @@ import "./src/styles/bulma.scss";
 import "./src/styles/style.scss";
 
 import colors from "data/colors.json";
+import marketingSettings from "data/marketing-settings.json";
 
 // smooth scroll polyfill needed for Safari
 smoothscroll.polyfill();
@@ -20,10 +21,15 @@ export const wrapRootElement = ReduxWrapper;
 export const onClientEntry = () => {
   // var set at document level
   // prevents widget color flashing from defaults to fetched by widget from marketing api
-  Object.entries(colors).forEach(color => {
-    document.documentElement.style.setProperty(`--${color[0]}`, color[1]);
-    document.documentElement.style.setProperty(`--${color[0]}50`, `${color[1]}50`);
-  })
+  Object.entries(colors).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(`--${key}`, value);
+    document.documentElement.style.setProperty(`--${key}50`, `${value}50`);
+  });
+  // set theme
+  const themeSetting = marketingSettings.find(ms => ms.key === 'EVENT_SITE_COLOR_SCHEME');
+  const theme = themeSetting?.value || 'LIGHT';
+  document.documentElement.setAttribute('data-theme', theme);
+
   // init sentry
   const GATSBY_SENTRY_DSN = process.env.GATSBY_SENTRY_DSN;
   if(GATSBY_SENTRY_DSN) {

package/gatsby-node.js

@@ -17,7 +17,6 @@ const {
   REQUIRED_DIR_PATHS,
   DEFAULT_COLORS_FILE_PATH,
   COLORS_FILE_PATH,
-  COLORS_SASS_FILE_PATH,
   SITE_SETTINGS_FILE_PATH,
   LOBBY_PAGE_FILE_PATH,
   SUMMIT_FILE_PATH,
@@ -261,10 +260,6 @@ exports.onPreBootstrap = async () => {
   fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colorSettings), "utf8");
   fs.writeFileSync(LOBBY_PAGE_FILE_PATH, JSON.stringify(lobbyPageSettings), "utf8");
 
-  let sassColors = "";
-  Object.entries(colorSettings).forEach(([key, value]) => sassColors += `$${key} : ${value};\n`);
-  fs.writeFileSync(COLORS_SASS_FILE_PATH, sassColors, "utf8");
-
   // summit
   const summit = await SSR_getSummit(summitApiBaseUrl, summitId);
   fileBuildTimes.push({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "1.0.43",
+  "version": "2.0.0",
   "author": "Tipit LLC",
   "dependencies": {
     "@mui/base": "^5.0.0-alpha.114",
@@ -42,7 +42,7 @@
     "font-awesome": "^4.7.0",
     "formik": "^2.2.9",
     "fs-extra": "^9.0.1",
-    "full-schedule-widget": "^2.0.35",
+    "full-schedule-widget": "3.0.0",
     "gatsby": "^5.8.1",
     "gatsby-alias-imports": "^1.0.6",
     "gatsby-plugin-image": "^3.8.0",
@@ -120,7 +120,7 @@
     "summit-registration-lite": "^4.0.17",
     "superagent": "8.0.9",
     "sweetalert2": "^9.17.0",
-    "upcoming-events-widget": "2.0.8",
+    "upcoming-events-widget": "3.0.1",
     "urijs": "^1.19.2",
     "use-fit-text": "^2.4.0",
     "uuid": "^7.0.0",

package/src/components/VideoComponent.js

@@ -17,6 +17,10 @@ const checkVimeoVideo = (url) => {
     return url.match(/https:\/\/(www\.)?(player\.)?vimeo.com\/(.*)/);
 };
 
+function checkYouTubeVideo(url) {
+    return url.match(/^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
+}
+
 const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) => {
     console.log({ url, title, namespace, firstHalf, autoPlay, start });
     if (url) {
@@ -54,6 +58,23 @@ const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) =
                 <VideoJSPlayer title={title} namespace={namespace} firstHalf={firstHalf} {...videoJsOptions} />
             );
         };
+
+        const customOptions = checkYouTubeVideo(url) ? {
+            techOrder: ["youtube"],
+            sources: [{
+                type: "video/youtube",
+                src: url
+            }],
+            youtube: {
+                ytControls: 0,
+                iv_load_policy: 1
+            },
+        }: {
+            sources: [{
+                src: url
+            }],
+        };
+
         const videoJsOptions = {
             autoplay: autoPlay,
             /*
@@ -64,17 +85,10 @@ const VideoComponent = ({ url, title, namespace, firstHalf, autoPlay, start }) =
             muted: !!autoPlay,
             controls: true,
             fluid: true,
-            techOrder: ["youtube"],
-            sources: [{
-                type: "video/youtube",
-                src: url
-            }],
-            youtube: {
-                ytControls: 0,
-                iv_load_policy: 1
-            },
             playsInline: true,
+            ...customOptions
         };
+
         return (
             <VideoJSPlayer title={title} namespace={namespace} {...videoJsOptions} />
         );

package/src/content/site-settings/index.json

@@ -1,17 +1 @@
-{
-  "widgets": {
-    "chat": {
-      "showQA": false,
-      "showHelp": false,
-      "defaultScope": "page"
-    },
-    "schedule": {
-      "allowClick": true
-    }
-  },
-  "favicons": {
-    "favicon180": "/img/favicon.png",
-    "favicon32": "/img/favicon.png",
-    "favicon16": "/img/favicon.png"
-  }
-}
+{"widgets":{"chat":{"showQA":false,"showHelp":false,"defaultScope":"page"},"schedule":{"allowClick":true}},"favicons":{"favicon180":"/img/favicon.png","favicon32":"/img/favicon.png","favicon16":"/img/favicon.png"},"staticJsonFilesBuildTime":[{"file":"src/data/summit.json","build_time":1691430970924},{"file":"src/data/events.json","build_time":1691430974462},{"file":"src/data/events.idx.json","build_time":1691430974467},{"file":"src/data/speakers.json","build_time":1691430975582},{"file":"src/data/speakers.idx.json","build_time":1691430975582},{"file":"src/content/sponsors.json","build_time":1691430976405},{"file":"src/data/voteable-presentations.json","build_time":1691430978246}],"lastBuild":1691430978247}

package/src/content/sponsors.json

@@ -1,187 +1 @@
-{
-  "tierSponsors": [
-    {
-      "tier": [
-        {
-          "value": "tier-cYGYq5-ae",
-          "label": "Top-Tier"
-        }
-      ],
-      "sponsors": [
-        {
-          "marquee": "Your text here! (150-characters max)",
-          "sponsorColor": "#414042",
-          "logo": {
-            "file": "/img/tier1-default-sponsor-logo.png"
-          },
-          "name": "Top-Tier",
-          "intro": "Sponsor Description (1000-character max) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ipsum tempor lorem interdum volutpat eu et elit. Sed eleifend justo et semper ultrices. Fusce porta ut sapien at posuere. Donec placerat, lacus eget imperdiet maximus, nunc lectus viverra ligula, in sodales tortor justo vel sem. Vestibulum eleifend, nibh a dapibus rhoncus, tortor dui venenatis enim, ac euismod augue velit at justo. Cras porta lacus est, nec rhoncus augue luctus quis. Pellentesque justo risus, scelerisque laoreet tortor quis, TOP TIER TEXT.",
-          "headerImage": "/img/tier1-default-sponsor-headerimage-toptier.png",
-          "socialNetworks": [],
-          "sponsorId": 24,
-          "title": "Top-Tier Sponsor Test ",
-          "companyId": 22,
-          "documents": {
-            "links": [
-              {
-                "class_name": "PresentationLink",
-                "name": "Your social media links here ",
-                "order": 1,
-                "link": "https://www.facebook.com/FNTECH"
-              }
-            ],
-            "videos": [
-              {
-                "class_name": "PresentationVideo",
-                "name": "Your external video links here ",
-                "order": 2,
-                "link": "https://www.youtube.com/channel/UC81WrqqnYmigub0fTNKT-Mw"
-              }
-            ]
-          },
-          "columnAds": [
-            {
-              "image": "/img/tier1-default-sponsor-space1.png",
-              "link": "https://fntech.com"
-            }
-          ],
-          "id": 24,
-          "email": "support@fntech.com",
-          "usesSponsorPage": true
-        },
-        {
-          "marquee": "Your event one-stop-shop, no matter the scope or size. Production + Event Management + Creative. We have you covered. ",
-          "sponsorColor": "#0C64C8",
-          "logo": {
-            "file": "/img/logo-top-tier-fntech.png"
-          },
-          "name": "FNTECH",
-          "intro": "**WE SPEAK EVENTS: In-person, virtual, and everything in-between.**\\\nOver the past 20+ years, we’ve successfully partnered with top-tier companies like Apple, Facebook, Wells Fargo, Vans, and Volcom on events of all sizes, types and budgets. Domestic and abroad. Intimate and straightforward to extremely complex and expansive. We have two large headquarters—one in the Northern California Bay Area and another in Southern California, which includes a virtual reality lab, 3D printing hub, and robust wood/metal fabrication shop. We’re a people-first company, which to us means treating every employee, client, vendor, partner, and community member with honesty, integrity, and respect. It’s part of our corporate ethos. People power our mission and we are eternally grateful to know and work with some of the best in the business. And as always, we make sure to have a lot of fun along the way. For more FNinfo, visit us at [fntech.com](http://fntech.com/).",
-          "headerVideo": "https://fntech.sfo2.cdn.digitaloceanspaces.com/Yoco/FNTECH%20animated%20logo_Black_012021.mp4",
-          "advertiseImage": "",
-          "sponsorId": 44,
-          "title": "",
-          "companyId": 4,
-          "columnAds": [],
-          "id": 44,
-          "email": "info@fntech.com",
-          "usesSponsorPage": true
-        }
-      ]
-    },
-    {
-      "tier": [
-        {
-          "value": "tier-DHcI3dWGk",
-          "label": "Mid-Tier"
-        }
-      ],
-      "sponsors": [
-        {
-          "marquee": "Your text here! (150-characters max)",
-          "sideImage": "",
-          "externalLink": "",
-          "sponsorColor": "#58595b",
-          "logo": {
-            "file": "/img/tier1-default-sponsor-logo.png"
-          },
-          "name": "Mid-Tier",
-          "intro": "Sponsor Description (1000-character max) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ipsum tempor lorem interdum volutpat eu et elit. Sed eleifend justo et semper ultrices. Fusce porta ut sapien at posuere. Donec placerat, lacus eget imperdiet maximus, nunc lectus viverra ligula, in sodales tortor justo vel sem. Vestibulum eleifend, nibh a dapibus rhoncus, tortor dui venenatis enim, ac euismod augue velit at justo. Cras porta lacus est, nec rhoncus augue luctus quis. Pellentesque justo risus, scelerisque laoreet tortor quis, Test Text",
-          "headerVideo": "",
-          "headerImage": "/img/tier1-default-sponsor-headerimage-middletier.png",
-          "socialNetworks": [],
-          "chatLink": "",
-          "sponsorId": 25,
-          "title": "Mid-Tier Sponsor",
-          "companyId": 23,
-          "documents": {
-            "slides": [],
-            "links": [
-              {
-                "class_name": "PresentationLink",
-                "name": "Your social media links here ",
-                "order": 1,
-                "link": "https://www.facebook.com/FNTECH"
-              }
-            ],
-            "videos": [
-              {
-                "class_name": "PresentationVideo",
-                "name": "Your external video links here ",
-                "link": "https://www.youtube.com/channel/UC81WrqqnYmigub0fTNKT-Mw",
-                "order": 2
-              }
-            ]
-          },
-          "columnAds": [
-            {
-              "image": "/img/tier1-default-sponsor-space1.png",
-              "button": "",
-              "link": "https://fntech.com"
-            }
-          ],
-          "id": 25,
-          "email": "support@fntech.com",
-          "usesSponsorPage": true
-        }
-      ]
-    },
-    {
-      "tier": [
-        {
-          "value": "tier-U_wEwGX8a",
-          "label": "Lower-Tier"
-        }
-      ],
-      "sponsors": [
-        {
-          "marquee": "Your text here! (150-characters max)",
-          "sideImage": "/img/tier1-default-sponsor-sideimage.png",
-          "externalLink": "",
-          "sponsorColor": "#6d6e71",
-          "logo": {
-            "file": "/img/tier1-default-sponsor-logo.png"
-          },
-          "name": "Lower-Tier",
-          "intro": "Sponsor Description (1000-character max) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget ipsum tempor lorem interdum volutpat eu et elit. Sed eleifend justo et semper ultrices. Fusce porta ut sapien at posuere. Donec placerat, lacus eget imperdiet maximus, nunc lectus viverra ligula, in sodales tortor justo vel sem. Vestibulum eleifend, nibh a dapibus rhoncus, tortor dui venenatis enim, ac euismod augue velit at justo. Cras porta lacus est, nec rhoncus augue luctus quis. Pellentesque justo risus, scelerisque laoreet tortor quis, vehicula volutpat ipsum.",
-          "headerVideo": "",
-          "headerImage": "/img/tier1-default-sponsor-headerimage-lowertier.png",
-          "socialNetworks": [],
-          "chatLink": "",
-          "sponsorId": 26,
-          "title": "Lower-Tier Sponsor",
-          "companyId": 24,
-          "documents": {
-            "slides": [],
-            "links": [
-              {
-                "class_name": "PresentationLink",
-                "name": "Your social media links here ",
-                "link": "https://www.facebook.com/FNTECH",
-                "order": 1
-              }
-            ],
-            "videos": [
-              {
-                "class_name": "PresentationVideo",
-                "link": "https://www.youtube.com/channel/UC81WrqqnYmigub0fTNKT-Mw",
-                "order": 2,
-                "name": "Your external video links here "
-              }
-            ]
-          },
-          "columnAds": [
-            {
-              "image": "/img/tier1-default-sponsor-space1.png",
-              "button": "",
-              "link": "https://www.fntech.com"
-            }
-          ],
-          "id": 26,
-          "email": "support@fntech.com",
-          "usesSponsorPage": true
-        }
-      ]
-    }
-  ]
-}
+[]

package/src/reducers/setting-reducer.js

@@ -40,7 +40,7 @@ const settingReducer = (state = DEFAULT_STATE, action) => {
         lastDataSync: Date.now(),
         lastCheckForNovelties: state.lastCheckForNovelties,
       };
-    case  UPDATE_LAST_CHECK_FOR_NOVELTIES:{
+    case UPDATE_LAST_CHECK_FOR_NOVELTIES:{
       let newLastCheckForNovelties = payload;
       if(newLastCheckForNovelties < state.lastCheckForNovelties)
         newLastCheckForNovelties = state.lastCheckForNovelties;

package/src/styles/advertise.module.scss

@@ -15,7 +15,7 @@
 .sponsor-container-center {
   margin-top: 3rem;
   height: 250px;
-  background-color: $color_secondary_contrast;
+  background-color: var(--color_secondary_contrast);
   display: flex;
 
   .container-text {
@@ -28,7 +28,7 @@
 
     .ad-text {
       display: inline-flex;
-      color: $color_text_light;
+      color: var(--color_text_light);
       font-size: 24px;
       text-align: center;
     }

package/src/styles/bulma.scss

@@ -2,8 +2,8 @@
 @import "bulma/sass/utilities/_all.sass";
 @import 'styles/colors.scss';
 
-$footer-background-color: $color-primary !important;
-$footer-color: $color-text-light !important;
+$footer-background-color: var(--color-primary) !important;
+$footer-color: var(--color-text-light) !important;
 $footer-padding: 2rem !important;
 
 $font-family-base: 'Nunito Sans', sans-serif;

package/src/styles/change-password.module.scss

@@ -63,7 +63,7 @@
         button {
           color: #ffffff;
           border-color: #ffffff;
-          background-color: $color_primary;
+          background-color: var(--color_primary);
         }
       }
     }

package/src/styles/colors.scss

@@ -3,6 +3,8 @@ $color_primary_contrast : #f1f2f2;
 $color_secondary : #00CEC4;
 $color_secondary_contrast : #ff5e32;
 $color_accent : #ff5e32;
+$color_background_light: #ffffff;
+$color_background_dark: #000000;
 $color_text_dark : #333333;
 $color_text_med : #828282;
 $color_text_light : #ffffff;
@@ -11,3 +13,26 @@ $color_gray_dark : #999999;
 $color_gray_light : #DFDFDF;
 $color_gray_lighter : #F2F2F2;
 $color_text_input_hints : #c4c4c4;
+
+:root {
+  --color_primary: #{$color_primary};
+  --color_primary_contrast: #{$color_primary_contrast};
+  --color_secondary: #{$color_secondary};
+  --color_secondary_contrast: #{$color_secondary_contrast};
+  --color_text_dark: #{$color_text_dark};
+  --color_text_med: #{$color_text_med};
+  --color_text_light: #{$color_text_light};
+  --color_background_light: #{$color_background_light};
+  --color_background_dark: #{$color_background_dark};
+  --color_gray_darker: #{$color_gray_darker};
+  --color_gray_dark: #{$color_gray_dark};
+  --color_gray_light: #{$color_gray_light};
+  --color_gray_lighter: #{$color_gray_lighter};
+}
+
+html[data-theme="DARK"] {
+  --color_text_dark: #{$color_text_light} !important;
+  --color_text_light: #{$color_text_dark} !important;
+  --color_background_light: #{$color_background_dark} !important;
+  --color_background_dark: #{$color_background_light} !important;
+}

package/src/styles/countdown.module.scss

@@ -1,9 +1,11 @@
 @import 'styles/colors.scss';
 
+$color_secondary_loc: #00CEC4;
+
 .countdown {
   height: 150px;
-  background-color: $color_secondary;
-  color: $color_text_light;
+  background-color: var(--color_secondary);
+  color: var(--color_text_light);
 
   .countdown-columns {
     height: 100%;
@@ -22,11 +24,11 @@
       align-items: center;
 
       & div:first-of-type {
-        background-color: darken($color: $color_secondary, $amount: 20%);
+        background-color: rgba(0,0,0,0.5);
       }
 
       & div:nth-of-type(2) {
-        background-color: darken($color: $color_secondary, $amount: 10%);
+        background-color: rgba(0,0,0,0.3);
       }
 
       div {

package/src/styles/documents.module.scss

@@ -2,7 +2,7 @@
 
 .docs-container {  
   border: 1px solid #d3d3d3;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
   display: flex;
   flex-direction: column;
 
@@ -39,7 +39,7 @@
   }
 
   a {
-    color: $color_text_dark;
+    color: var(--color_text_dark);
   }
 
   i {

package/src/styles/event-hero.module.scss

@@ -1,7 +1,7 @@
 @import "styles/colors.scss";
 
 div.column:first-of-type {
-  background-color: $color_secondary_contrast;
+  background-color: var(--color_secondary_contrast);
 }
 
 .hero-events {
@@ -21,7 +21,7 @@ div.column:first-of-type {
 
     .title {
       font-size: 48px;
-      color: $color_text_light;
+      color: var(--color_text_light);
       font-weight: bold;
       letter-spacing: 0.5rem;
       padding-left: 1rem;
@@ -29,13 +29,13 @@ div.column:first-of-type {
 
     .subtitle {
       font-size: 38px;
-      color: $color_text_light;
+      color: var(--color_text_light);
       padding-left: 1rem;
     }
 
     .date {
-      background-color: $color_secondary;
-      color: $color_text_light;
+      background-color: var(--color_secondary);
+      color: var(--color_text_light);
       font-size: 32px;
       letter-spacing: 0.5rem;
       padding: 0.5rem 0;

package/src/styles/expo-hero.module.scss

@@ -7,14 +7,14 @@
 
 .title {
   font-size: 102px;
-  color: $color_primary_contrast;
+  color: var(--color_primary_contrast);
   font-weight: bold;
   text-align: center;
 }
 
 .subtitle {
   font-size: 32px;
-  color: $color_primary_contrast;
+  color: var(--color_primary_contrast);
   text-align: center;
   max-width: 800px;
   margin: auto;

package/src/styles/footer.module.scss

@@ -4,18 +4,18 @@
   text-align: left;
 
   h4 {
-    border-bottom: 2px solid $color_text_light;
+    border-bottom: 2px solid var(--color_text_light);
     text-transform: uppercase;
     padding-bottom: 1rem;
     margin-bottom: 2rem;
   }
 
   .link {
-    color: $color_text_light;
+    color: var(--color_text_light);
 
     :hover,
     :visited {
-      color: $color_text_light;
+      color: var(--color_text_light);
     }
   }
 
@@ -31,18 +31,18 @@
 }
 
 .legals-bar {
-  color: $color_text_light;
+  color: var(--color_text_light);
   background-color: #494a4c;
   padding: 1rem 2rem;
   display: flex;
 
   .link {
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   a:hover.link,
   a:visited.link {
-    color: $color_text_light;
+    color: var(--color_text_light);
     text-decoration: none;
   }
 

package/src/styles/full-profile.module.scss

@@ -59,7 +59,7 @@
         .header {
             font-size: 18px;
             line-height: 22px;
-            color: $color_text_dark;
+            color: var(--color_text_dark);
             font-weight: bold;
             margin: 0 -20px;
             padding: 0 15px 10px;
@@ -122,7 +122,7 @@
                     button {
                         color: #ffffff;
                         border-color: #ffffff;
-                        background-color: $color_primary;
+                        background-color: var(--color-primary);
                     }
                 }
             }

package/src/styles/global-classes.scss

@@ -4,8 +4,8 @@
 %button-big {
   border-radius: 4px;
   height: 56px;
-  color: $color_text_light;
-  background-color: $color_secondary;
+  color: var(--color_text_light);
+  background-color: var(--color_secondary);
   font-size: 15px;
 
   @extend %font-regular;
@@ -14,7 +14,7 @@
 %title-huge {
   font-size: 46px;
   line-height: 46px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
@@ -22,7 +22,7 @@
 %title-big {
   font-size: 32px;
   line-height: 32px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
@@ -30,7 +30,7 @@
 %title {
   font-size: 28px;
   line-height: 28px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-semi;
 }
@@ -38,21 +38,21 @@
 %title-med {
   font-size: 24px;
   line-height: 24px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
 
 %title-small {
   font-size: 18px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-bold;
 }
 
 %title-tiny {
   font-size: 14px;
-  color: $color_text_dark;
+  color: var(--color_text_dark);
 
   @extend %font-semi;
 }
@@ -60,7 +60,7 @@
 %text-big {
   font-size: 20px;
   line-height: 24px;
-  color: $color_text_med;
+  color: var(--color_text_dark);
 
   @extend %font-semi;
 }
@@ -68,7 +68,7 @@
 %text-med {
   font-size: 15px;
   line-height: 20px;
-  color: $color_text_med;
+  color: var(--color_text_dark);
 
   @extend %font-regular;
 }
@@ -84,7 +84,7 @@
 %text-tiny {
   font-size: 12px;
   line-height: 16px;
-  color: $color_text_med;
+  color: var(--color_text_med);
 
   @extend %font-regular;
 }
@@ -92,8 +92,8 @@
 %button-small-primary {
   border-radius: 4px;
   height: 39px;
-  color: $color_text_light;
-  background-color: $color_secondary;
+  color: var(--color_text_light);
+  background-color: var(--color_secondary);
   font-size: 15px;
 
   @extend %font-regular;
@@ -102,8 +102,8 @@
 %button-small-secondary {
   border-radius: 4px;
   height: 39px;
-  color: $color_text_med;
-  background-color: $color_gray_light;
+  color: var(--color_text_med);
+  background-color: var(--color_gray_light);
   font-size: 15px;
 
   @extend %font-regular;
@@ -114,8 +114,8 @@
   height: 39px;
   background-color: white;
   font-size: 15px;
-  border: 1px solid $color_gray_dark;
-  color: $color_text_dark;
+  border: 1px solid var(--color_gray_dark);
+  color: var(--color_text_dark);
 
 
   @extend %font-regular;
@@ -126,8 +126,8 @@
   height: 39px;
   background-color: white;
   font-size: 15px;
-  border: 1px solid $color_gray_light;
-  color: $color_text_dark;
+  border: 1px solid var(--color_gray_light);
+  color: var(--color_text_dark);
 
 
   @extend %font-regular;

package/src/styles/marketing-hero.module.scss

@@ -107,7 +107,7 @@
         transform: skew(25deg);
         font-size: 3rem;
         font-weight: bold;
-        color: $color_text_light;
+        color: var(--color_text_light);
         letter-spacing: 0.1rem;
       }
 

package/src/styles/navbar.module.scss

@@ -5,7 +5,7 @@
 @import 'styles/colors.scss';
 
 .navbar {
-  background-color: $color_primary;
+  background-color: var(--color_primary);
   min-height: 7.25rem;
 
   .navbar-brand {
@@ -27,12 +27,12 @@
   }
 
   .user-icon {
-    color: $color_text_light;
+    color: var(--color_text_light);
     padding-left: 10px;
   }
 
   .navbar-item {
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   .navbar-menu {
@@ -40,22 +40,22 @@
       font-weight: 300;
 
       .link {
-        color: $color_text_light;
+        color: var(--color_text_light);
         padding: 6px;
         margin: -6px;
 
         &:hover {
-          color: $color_text_light;
+          color: var(--color_text_light);
           text-decoration: none;
         }
 
         &:active {
-          color: $color_text_light;
+          color: var(--color_text_light);
           text-decoration: underline;
         }
 
         &:visited {
-          color: $color_text_light;
+          color: var(--color_text_light);
         }
       }      
 
@@ -101,11 +101,11 @@
 
   .user-burger {
     display: block;
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   .user-icon {
-    color: $color_text_light;
+    color: var(--color_text_light);
     padding-left: 10px;
   }
 }
@@ -131,25 +131,25 @@
     }
 
     .navbar-burger {
-      color: $color_text_light;
+      color: var(--color_text_light);
       margin-right: 15px;
     }
 
     .navbar-menu {
       .navbar-item {
         .link {
-          color: $color_primary;
+          color: var(--color_primary);
 
           &:hover {
-            color: $color_primary;
+            color: var(--color_primary);
           }
 
           &:active {
-            color: $color_primary;
+            color: var(--color_primary);
           }
 
           &:visited {
-            color: $color_primary;
+            color: var(--color_primary);
           }
         }
       }
@@ -160,7 +160,7 @@
       }
 
       .user-icon {
-        color: $color_primary;
+        color: var(--color_primary);
         padding-bottom: 5px;
       }
     }

package/src/styles/profile.module.scss

@@ -23,7 +23,7 @@
     }
 
     .close-icon {
-      color: $color_text_dark;
+      color: var(--color_text_dark);
       font-size: 16px;
       cursor: pointer;
     }
@@ -127,7 +127,7 @@
       &:last-of-type {
         color: #ffffff;
         border-color: #ffffff;
-        background-color: $color_primary;
+        background-color: var(--color_primary);
       }
     }
   }
@@ -167,7 +167,7 @@
           &:last-of-type {
             color: #ffffff;
             border-color: #ffffff;
-            background-color: $color_primary;
+            background-color: var(--color_primary);
             margin-top: 1rem;
           }
         }

package/src/styles/sponsor-page.module.scss

@@ -10,7 +10,7 @@
   display: flex;
   justify-content: space-between;
   .button {
-    background-color: $color_secondary_contrast;
+    background-color: var(--color_secondary_contrast);
     align-items: center;
     border: none;
     color: #fff;
@@ -50,7 +50,7 @@
 
 .hero {
   background-color: black;
-  color: $color_text_light;
+  color: var(--color_text_light);
 
   .hero-sponsor-image-bg {
     background-size: cover;
@@ -60,7 +60,7 @@
   .hero-sponsor {
     position: relative;
     overflow: hidden;
-    background-color: $color_secondary_contrast;
+    background-color: var(--color_secondary_contrast);
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;
@@ -89,7 +89,7 @@
           align-self: flex-end;
 
           .link {
-            color: $color_text_light;
+            color: var(--color_text_light);
 
             i {
               font-size: 2.5rem;
@@ -122,7 +122,7 @@
 
             .link {
               .button {
-                background-color: $color_secondary_contrast;
+                background-color: var(--color_secondary_contrast);
                 border: none;
                 color: #fff;
                 height: 5rem;
@@ -170,7 +170,7 @@
 
               .link {
                 .button {
-                  background-color: $color_secondary_contrast;
+                  background-color: var(--color_secondary_contrast);
                   border: none;
                   color: #fff;
                   height: 3.5rem;
@@ -253,7 +253,7 @@
 
   .link {
     .button {
-      background-color: $color_secondary_contrast;
+      background-color: var(--color_secondary_contrast);
       border: none;
       color: #fff;
       height: 5rem;
@@ -307,8 +307,8 @@
 }
 
 .bottom-bar {
-  background-color: $color_secondary_contrast;
-  color: $color_text_light;
+  background-color: var(--color_secondary_contrast);
+  color: var(--color_text_light);
   font-size: 30px;
   padding: 6px 10px;
   position: relative;
@@ -350,11 +350,11 @@
   justify-content: space-evenly;
   padding: 3rem;
   margin-top: 2rem;
-  background-color: $color_secondary_contrast;
+  background-color: var(--color_secondary_contrast);
 
   .container-text {
     font-size: 32px;
-    color: $color_text_light;
+    color: var(--color_text_light);
   }
 
   .container-buttons {
@@ -462,7 +462,7 @@
             flex-direction: column;
 
             .link {
-              color: $color_text_light;
+              color: var(--color_text_light);
 
               i {
                 font-size: 2.5rem;
@@ -498,8 +498,8 @@
 
               .link {
                 .button {
-                  background-color: $color_secondary_contrast;
-                  border-color: $color_secondary_contrast;
+                  background-color: var(--color_secondary_contrast);
+                  border-color: var(--color_secondary_contrast);
                   color: #fff;
                   height: 5rem;
                   width: 5rem;
@@ -550,8 +550,8 @@
 
                 .link {
                   .button {
-                    background-color: $color_secondary_contrast;
-                    border-color: $color_secondary_contrast;
+                    background-color: var(--color_secondary_contrast);
+                    border-color: var(--color_secondary_contrast);
                     color: #fff;
                     height: 4rem;
                     width: 4rem;

package/src/styles/sponsor.module.scss

@@ -59,8 +59,8 @@
 
   .button {
     width: 100%;
-    background-color: $color_secondary;
-    color: $color_text_light;
+    background-color: var(--color_secondary);
+    color: var(--color_text_light);
     border: 0px;
     margin-bottom: 2em;
   }
@@ -93,7 +93,7 @@
   .image-box {
     box-sizing: border-box;
     padding: 20px;
-    background-color: $color_primary_contrast;
+    background-color: var(--color_primary_contrast);
     margin: 10px;
     display: flex;
     justify-content: center;

package/src/styles/style.scss

@@ -1,4 +1,4 @@
-@import 'styles/colors.scss';
+@import './colors.scss';
 @import './global-classes';
 
 html,
@@ -7,6 +7,7 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
+  background-color: var(--color_background_light) !important;
 }
 
 
@@ -53,7 +54,7 @@ html:not([data-whatintent=keyboard]) .focus {
 
 /* overrides Bulma focus style */
 .button:focus {
-  color: $color_text_light !important;
+  color: var(--color_text_light) !important;
 }
 
 label {
@@ -162,7 +163,7 @@ h2 {
     width: 100%;
 
     .hero {
-      background-color: $color_secondary;
+      background-color: var(--color_secondary);
       align-self: center;
       width: 100%;
       height: 100%;
@@ -235,14 +236,14 @@ h2 {
 
 .talk {
   &__break {
-    background-color: $color_secondary;
+    background-color: var(--color_secondary);
     min-height: 92vh !important;
     width: 100%;
     padding: 0 3rem;
 
     h1,
     h2 {
-      color: $color_text_light;
+      color: var(--color_text_light);
       font-size: 42px;
     }
   }
@@ -304,8 +305,8 @@ h2 {
 
 .join-zoom-container {
   align-items: center;
-  background-color: $color_secondary;
-  color: $color_text_light;
+  background-color: var(--color_secondary);
+  color: var(--color_text_light);
   display: flex;
   height: 110px;
   justify-content: space-around;
@@ -327,7 +328,7 @@ h2 {
     padding-right: 4em;
     text-transform: uppercase;
     &:focus,&:active {
-      color: $color_secondary !important;
+      color: var(--color_secondary) !important;
     }
   }
 }