Refactor to use css variables that match brandable color palette

CHANGELOG.md

@@ -22,6 +22,7 @@ The types of changes are:
 - Remove logging within the Celery creation function [#3303](https://github.com/ethyca/fides/pull/3303)
 - Update how generic endpoint generation works [#3304](https://github.com/ethyca/fides/pull/3304)
 - Restrict strack-trace logging when not in Dev mode [#3081](https://github.com/ethyca/fides/pull/3081)
+- Refactor CSS variables for `fides-js` to match brandable color palette [#3321](https://github.com/ethyca/fides/pull/3321)
 - Moved all of the dirs from `fides.api.ops` into `fides.api` [#3318](https://github.com/ethyca/fides/pull/3318)
 
 ### Added

clients/fides-js/src/components/ConsentBanner.tsx

@@ -2,7 +2,7 @@ import { h, FunctionComponent } from "preact";
 import { useState, useEffect } from "preact/hooks";
 import { ButtonType, ExperienceConfig } from "../lib/consent-types";
 import Button from "./Button";
-import "../lib/banner.module.css";
+import "../lib/overlay.module.css";
 import { useHasMounted } from "../lib/hooks";
 
 interface BannerProps {
@@ -74,12 +74,12 @@ const ConsentBanner: FunctionComponent<BannerProps> = ({
         className="fides-consent-banner-buttons"
       >
         <Button
-          buttonType={ButtonType.TERTIARY}
+          buttonType={ButtonType.SECONDARY}
           label={managePreferencesLabel}
           onClick={handleManagePreferencesClick}
         />
         <Button
-          buttonType={ButtonType.SECONDARY}
+          buttonType={ButtonType.PRIMARY}
           label={rejectButtonLabel}
           onClick={() => {
             onRejectAll();

clients/fides-js/src/lib/banner.module.css → clients/fides-js/src/lib/overlay.module.css

@@ -2,52 +2,56 @@
 * Default CSS styles for the banner
 */
 :root {
-  --fides-consent-overlay-font-family: inherit;
-  --fides-consent-overlay-font-size: 16px;
-  --fides-consent-overlay-font-size-title: 18px;
-  --fides-consent-overlay-background: #fff;
-  --fides-consent-overlay-text-color: #24292f;
-  --fides-consent-overlay-padding: 0.75em 2em 1em;
-
-  --fides-consent-overlay-button-background: #eee;
-  --fides-consent-overlay-button-text-color: #24292f;
-  --fides-consent-overlay-button-hover-background: #ccc;
-  --fides-consent-overlay-button-border-radius: 4px;
-  --fides-consent-overlay-button-padding: 0.5em 1em;
-
-  --fides-consent-overlay-button-primary-background: #464b83;
-  --fides-consent-overlay-button-primary-text-color: #fff;
-  --fides-consent-overlay-button-primary-hover-background: #3f4375;
-
-  --fides-consent-overlay-button-secondary-background: var(
-    --fides-consent-overlay-button-background
+  /* Colors */
+  --fides-consent-overlay-primary-color: #8243f2;
+  --fides-consent-overlay-background-color: #f7fafc;
+  --fides-consent-overlay-font-color: #4a5568;
+  --fides-consent-overlay-hover-color: #edf2f7;
+  /* Buttons */
+  --fides-consent-overlay-primary-button-background-color: var(
+    --fides-consent-overlay-primary-color
   );
-  --fides-consent-overlay-button-secondary-text-color: var(
-    --fides-consent-overlay-button-text-color
+  --fides-consent-overlay-primary-button-background-hover-color: #9569f4;
+  --fides-consent-overlay-primary-button-text-color: #ffffff;
+  --fides-consent-overlay-primary-button-border-color: transparent;
+  --fides-consent-overlay-secondary-button-background-color: var(
+    --fides-consent-overlay-background-color
   );
-  --fides-consent-overlay-button-secondary-hover-background: var(
-    --fides-consent-overlay-button-hover-background
+  --fides-consent-overlay-secondary-button-background-hover-color: var(
+    --fides-consent-overlay-hover-color
   );
-
-  --fides-consent-overlay-button-tertiary-background: var(
-    --fides-consent-overlay-button-background
+  --fides-consent-overlay-secondary-button-text-color: #2d3748;
+  --fides-consent-overlay-secondary-button-border-color: var(
+    --fides-consent-overlay-primary-color
   );
-  --fides-consent-overlay-button-tertiary-text-color: var(
-    --fides-consent-overlay-button-text-color
+  /* Text */
+  --fides-consent-overlay-title-font-color: var(
+    --fides-consent-overlay-font-color
   );
-  --fides-consent-overlay-button-tertiary-hover-background: var(
-    --fides-consent-overlay-button-hover-background
+  --fides-consent-overlay-body-font-color: var(
+    --fides-consent-overlay-font-color
+  );
+  /* Switches */
+  --fides-consent-overlay-primary-active-color: var(
+    --fides-consent-overlay-primary-color
   );
-
-  /* In progress(fides#3258): start to transition to updated design colors */
-  --fides-consent-overlay-primary-color: #8243f2;
-  --fides-consent-overlay-background-color: #f7fafc;
-  --fides-consent-overlay-primary-active-color: #824ef2;
   --fides-consent-overlay-primary-active-disabled-color: #bda4f7;
   --fides-consent-overlay-inactive-color: #cbd5e0;
   --fides-consent-overlay-disabled-color: #e1e7ee;
+  /* Dividers */
   --fides-consent-overlay-row-divider-color: #e2e8f0;
-  --fides-consent-overlay-row-hover-color: #edf2f7;
+  --fides-consent-overlay-row-hover-color: var(
+    --fides-consent-overlay-hover-color
+  );
+
+  /* Everything else */
+  --fides-consent-overlay-font-family: "inherit";
+  --fides-consent-overlay-font-size: 16px;
+  --fides-consent-overlay-font-size-title: 18px;
+  --fides-consent-overlay-padding: 0.75em 2em 1em;
+  --fides-consent-overlay-button-border-radius: 4px;
+  --fides-consent-overlay-button-padding: 0.5em 1em;
+  --fides-consent-overlay-component-border-radius: 0px;
 }
 
 #fides-consent-modal-link {
@@ -57,10 +61,12 @@
 div#fides-consent-banner {
   font-family: var(--fides-consent-overlay-font-family);
   font-size: var(--fides-consent-overlay-font-size);
-  background: var(--fides-consent-overlay-background);
-  color: var(--fides-consent-overlay-text-color);
+  background: var(--fides-consent-overlay-background-color);
+  color: var(--fides-consent-overlay-body-font-color);
   box-sizing: border-box;
   padding: var(--fides-consent-overlay-padding);
+  border: 1px solid var(--fides-consent-overlay-primary-color);
+  border-radius: var(--fides-consent-overlay-component-border-radius);
 
   display: flex;
   flex-direction: row;
@@ -102,6 +108,7 @@ div#fides-consent-banner-title {
   margin-right: 2em;
   min-width: 33%;
   flex: 1;
+  color: var(--fides-consent-overlay-title-font-color);
 }
 
 div#fides-consent-banner-description {
@@ -126,9 +133,9 @@ button.fides-consent-banner-button {
   margin-top: 0.25em;
   margin-right: 0.5em;
   padding: var(--fides-consent-overlay-button-padding);
-  background: var(--fides-consent-overlay-button-background);
-  color: var(--fides-consent-overlay-button-text-color);
-  border: none;
+  background: var(--fides-consent-overlay-primary-button-background-color);
+  color: var(--fides-consent-overlay-primary-button-text-color);
+  border: 1px solid;
   border-radius: var(--fides-consent-overlay-button-border-radius);
 
   font-family: inherit;
@@ -138,48 +145,45 @@ button.fides-consent-banner-button {
 }
 
 button.fides-consent-banner-button:hover {
-  background: var(--fides-consent-overlay-button-hover-background);
+  background: var(
+    --fides-consent-overlay-primary-button-background-hover-color
+  );
 }
 
 button.fides-consent-banner-button.fides-consent-banner-button-primary {
-  background: var(--fides-consent-overlay-button-primary-background);
-  color: var(--fides-consent-overlay-button-primary-text-color);
+  background: var(--fides-consent-overlay-primary-button-background-color);
+  color: var(--fides-consent-overlay-primary-button-text-color);
+  border: none;
 }
 
 button.fides-consent-banner-button.fides-consent-banner-button-primary:hover {
-  background: var(--fides-consent-overlay-button-primary-hover-background);
+  background: var(
+    --fides-consent-overlay-primary-button-background-hover-color
+  );
 }
 
 button.fides-consent-banner-button.fides-consent-banner-button-secondary {
-  background: var(--fides-consent-overlay-button-secondary-background);
-  color: var(--fides-consent-overlay-button-secondary-text-color);
+  background: var(--fides-consent-overlay-secondary-button-background-color);
+  color: var(--fides-consent-overlay-secondary-button-text-color);
+  border: 1px solid var(--fides-consent-overlay-primary-button-background-color);
 }
 
 button.fides-consent-banner-button.fides-consent-banner-button-secondary:hover {
-  background: var(--fides-consent-overlay-button-secondary-hover-background);
-}
-
-button.fides-consent-banner-button.fides-consent-banner-button-tertiary {
-  background: var(--fides-consent-overlay-button-tertiary-background);
-  color: var(--fides-consent-overlay-button-tertiary-text-color);
-}
-
-button.fides-consent-banner-button.fides-consent-banner-button-tertiary:hover {
-  background: var(--fides-consent-overlay-button-tertiary-hover-background);
+  background: var(
+    --fides-consent-overlay-secondary-button-background-hover-color
+  );
 }
 
 /** Modal */
 div#fides-consent-modal {
   font-family: var(--fides-consent-overlay-font-family);
   font-size: var(--fides-consent-overlay-font-size);
-  background: var(--fides-consent-overlay-background);
-  color: var(--fides-consent-overlay-text-color);
+  color: var(--fides-consent-overlay-body-font-color);
   box-sizing: border-box;
   padding: var(--fides-consent-overlay-padding);
   border: 1px solid var(--fides-consent-overlay-primary-color);
   background-color: var(--fides-consent-overlay-background-color);
-  /* TODO: make dynamic? */
-  border-radius: 6px;
+  border-radius: var(--fides-consent-overlay-component-border-radius);
   max-height: 100%;
   max-width: 100%;
   /* TODO: use a system for z-indexes */
@@ -192,7 +196,8 @@ div#fides-consent-modal {
 
   .modal-header {
     text-align: center;
-    font-size: 1.2rem;
+    font-size: var(--fides-consent-overlay-font-size-title);
+    color: var(--fides-consent-overlay-title-font-color);
   }
 
   .modal-button-group {

clients/privacy-center/cypress/e2e/consent-banner.cy.ts

@@ -83,21 +83,21 @@ describe("Consent banner", () => {
             "div#fides-consent-banner-buttons.fides-consent-banner-buttons"
           ).within(() => {
             cy.get(
-              "button#fides-consent-banner-button-tertiary.fides-consent-banner-button.fides-consent-banner-button-tertiary"
+              "button#fides-consent-banner-button-secondary.fides-consent-banner-button.fides-consent-banner-button-secondary"
             ).contains("Manage preferences");
             cy.get(
-              "button#fides-consent-banner-button-secondary.fides-consent-banner-button.fides-consent-banner-button-secondary"
+              "button#fides-consent-banner-button-primary.fides-consent-banner-button.fides-consent-banner-button-primary"
             ).contains("Reject Test");
             cy.get(
               "button#fides-consent-banner-button-primary.fides-consent-banner-button.fides-consent-banner-button-primary"
             ).contains("Accept Test");
-            // Order matters - it should always be tertiary, then secondary, then primary!
+            // Order matters - it should always be secondary, then primary!
             cy.get("button")
               .eq(0)
-              .should("have.id", "fides-consent-banner-button-tertiary");
+              .should("have.id", "fides-consent-banner-button-secondary");
             cy.get("button")
               .eq(1)
-              .should("have.id", "fides-consent-banner-button-secondary");
+              .should("have.id", "fides-consent-banner-button-primary");
             cy.get("button")
               .eq(2)
               .should("have.id", "fides-consent-banner-button-primary");