@tilli-pro/cookieconsent-plugin 0.6.0 → 0.7.23

package/src/styles/nudge.css

@@ -0,0 +1,121 @@
+/** NOTE: to auto-add `!important` suffixes, simply use this RegEx w/ Find + Replace:
+  * > Find: (:)(?![^;]*!important)([^;]+)(;)(?!.*\^)
+  * > Replace: :$2 !important;
+  */
+
+/* NUDGE_BLUE_HEX: #1F9CD4 */
+/* NUDGE_GREEN_HEX: #8BC885 */
+
+/** `nudge` color-scheme **/
+.cc--nudge-light {
+  --cc-bg: #ffffff !important;
+  --cc-primary-color: #2c2f31 !important;
+  --cc-secondary-color: #5e6266 !important;
+
+  --cc-btn-primary-bg: #1F9CD4 !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #44a7d4 !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: #e2e8f0 !important;
+  --cc-btn-secondary-color: #334155 !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #f1f5f9 !important;
+  --cc-btn-secondary-hover-color: #000000 !important;
+  --cc-btn-secondary-hover-border-color: #d4dae0 !important;
+
+  --cc-separator-border-color: #f3f8fc !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: #ffffff !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #d5dee2 !important;
+  --cc-toggle-readonly-knob-bg: #fff !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #f3f8fc !important;
+  --cc-cookie-category-block-border: #f3f8fc !important;
+  --cc-cookie-category-block-hover-bg: #f0f4f7 !important;
+  --cc-cookie-category-block-hover-border: #f0f4f7 !important;
+  --cc-cookie-category-expanded-block-bg: transparent !important;
+  --cc-cookie-category-expanded-block-hover-bg: #dee4e9 !important;
+
+  --cc-overlay-bg: rgba(0, 0, 0, 0.65) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #f3f8fc !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #e4eaed !important;
+}
+
+.cc--nudge-dark {
+  color-scheme: dark;
+  --cc-bg: #000 !important;
+  --cc-primary-color: #eff4f6 !important;
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #1F9CD4 !important;
+  --cc-btn-primary-color: #000 !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #44a7d4 !important;
+  --cc-btn-primary-hover-color: #000 !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: hsla(0,0%,100%,.039) !important;
+  --cc-btn-secondary-color: #fff !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #252729 !important;
+  --cc-btn-secondary-hover-color: #fff !important;
+  --cc-btn-secondary-hover-border-color: #252729 !important;
+
+  --cc-separator-border-color: #252729 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: var(--cc-bg) !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #2f3132 !important;
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg) !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #101111 !important;
+  --cc-cookie-category-block-border: #1d1e1f !important;
+  --cc-cookie-category-block-hover-bg: #151516 !important;
+  --cc-cookie-category-block-hover-border: #1d1e1f !important;
+  --cc-cookie-category-expanded-block-bg: #101111 !important;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f !important;
+
+  --cc-overlay-bg: rgba(0,0,0,.9) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #000 !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #212529 !important;
+}
+
+/** font */
+.cc--nudge-light #cc-main,
+.cc--nudge-dark #cc-main {
+  font-family: var(--font-inter, var(--cc-font-family)) !important;
+}

package/src/styles/tenants/con-edison.css

@@ -0,0 +1,157 @@
+/** NOTE: to auto-add `!important` suffixes, simply use this RegEx w/ Find + Replace:
+  * > Find: (:)(?![^;]*!important)([^;]+)(;)(?!.*\^)
+  * > Replace: :$2 !important;
+  */
+
+/** `tenant:con-edison` color-scheme **/
+.cc--tenant\:con-edison-light {
+  --cc-bg: #ffffff !important;
+  --cc-primary-color: #2c2f31 !important;
+  --cc-secondary-color: #5e6266 !important;
+
+  --cc-btn-primary-bg: #0078cf !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #0078cf !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: #e2e8f0 !important;
+  --cc-btn-secondary-color: #334155 !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #f1f5f9 !important;
+  --cc-btn-secondary-hover-color: #000000 !important;
+  --cc-btn-secondary-hover-border-color: #d4dae0 !important;
+
+  --cc-separator-border-color: #f3f8fc !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: #ffffff !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #d5dee2 !important;
+  --cc-toggle-readonly-knob-bg: #fff !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #f3f8fc !important;
+  --cc-cookie-category-block-border: #f3f8fc !important;
+  --cc-cookie-category-block-hover-bg: #f0f4f7 !important;
+  --cc-cookie-category-block-hover-border: #f0f4f7 !important;
+  --cc-cookie-category-expanded-block-bg: transparent !important;
+  --cc-cookie-category-expanded-block-hover-bg: #dee4e9 !important;
+
+  --cc-overlay-bg: rgba(0, 0, 0, 0.65) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #f3f8fc !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #e4eaed !important;
+}
+
+.cc--tenant\:con-edison-dark {
+  color-scheme: dark;
+  --cc-bg: #000 !important;
+  --cc-primary-color: #eff4f6 !important;
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #0078cf !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #0078cf !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: hsla(0,0%,100%,.039) !important;
+  --cc-btn-secondary-color: #fff !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #252729 !important;
+  --cc-btn-secondary-hover-color: #fff !important;
+  --cc-btn-secondary-hover-border-color: #252729 !important;
+
+  --cc-separator-border-color: #252729 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: var(--cc-bg) !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #2f3132 !important;
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg) !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #101111 !important;
+  --cc-cookie-category-block-border: #1d1e1f !important;
+  --cc-cookie-category-block-hover-bg: #151516 !important;
+  --cc-cookie-category-block-hover-border: #1d1e1f !important;
+  --cc-cookie-category-expanded-block-bg: #101111 !important;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f !important;
+
+  --cc-overlay-bg: rgba(0,0,0,.9) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #000 !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #212529 !important;
+}
+
+.cc--tenant\:con-edison-light div.cm__btn-group,
+.cc--tenant\:con-edison-dark div.cm__btn-group,
+.cc--tenant\:con-edison-light div.cm__btns,
+.cc--tenant\:con-edison-dark div.cm__btns {
+  & > *:not(:first-child) {
+    margin-top: 8px !important;
+  }
+}
+
+.cc--tenant\:con-edison-light div.pm__btn-group,
+.cc--tenant\:con-edison-dark div.pm__btn-group {
+  & > *:not(:first-child) {
+    margin-left: 8px !important;
+  }
+}
+
+.cc--tenant\:con-edison-light button.cm__btn,
+.cc--tenant\:con-edison-light button.pm__btn,
+.cc--tenant\:con-edison-dark button.cm__btn,
+.cc--tenant\:con-edison-dark button.pm__btn {
+  border-radius: 9999px !important;
+  font-weight: 800 !important;
+  letter-spacing: normal !important;
+  padding: 10px 24px !important; /* 10 px top/bottom, 24 px left/right */
+  height: 48px !important; /* 48 px height (3rem) */
+  font-size: 16px !important;
+}
+
+.cc--tenant\:con-edison-light button.cm__btn--secondary,
+.cc--tenant\:con-edison-light button.pm__btn--secondary,
+.cc--tenant\:con-edison-dark button.cm__btn--secondary,
+.cc--tenant\:con-edison-dark button.pm__btn--secondary {
+  color: #0078cf !important;
+  background-color: #fff !important;
+  border-color: #0078cf !important;
+  border-width: 2.5px !important;
+  box-sizing: border-box !important;
+}
+
+/** font */
+.cc--tenant\:con-edison-light #cc-main,
+.cc--tenant\:con-edison-dark #cc-main {
+  font-family: var(--font-open-sans, var(--cc-font-family)) !important;
+}

package/src/styles/tenants/freeman.css

@@ -57,7 +57,62 @@
   --cc-footer-border-color: #e4eaed !important;
 }
 
+.cc--tenant\:freeman-dark {
+  color-scheme: dark;
+  --cc-bg: #000 !important;
+  --cc-primary-color: #eff4f6 !important;
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #00bdf6 !important;
+  --cc-btn-primary-color: #000 !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #5ed6ff !important;
+  --cc-btn-primary-hover-color: #000 !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: hsla(0,0%,100%,.039) !important;
+  --cc-btn-secondary-color: #fff !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #252729 !important;
+  --cc-btn-secondary-hover-color: #fff !important;
+  --cc-btn-secondary-hover-border-color: #252729 !important;
+
+  --cc-separator-border-color: #252729 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: var(--cc-bg) !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #2f3132 !important;
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg) !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #101111 !important;
+  --cc-cookie-category-block-border: #1d1e1f !important;
+  --cc-cookie-category-block-hover-bg: #151516 !important;
+  --cc-cookie-category-block-hover-border: #1d1e1f !important;
+  --cc-cookie-category-expanded-block-bg: #101111 !important;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f !important;
+
+  --cc-overlay-bg: rgba(0,0,0,.9) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #000 !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #212529 !important;
+}
+
 /** font */
-.cc--tenant\:freeman-light #cc-main {
+.cc--tenant\:freeman-light #cc-main,
+.cc--tenant\:freeman-dark #cc-main {
   font-family: var(--font-inter, var(--cc-font-family)) !important;
 }

package/src/styles/tenants/frontier.css

@@ -57,8 +57,64 @@
   --cc-footer-border-color: #e4eaed !important;
 }
 
+.cc--tenant\:frontier-dark {
+  color-scheme: dark;
+  --cc-bg: #000 !important;
+  --cc-primary-color: #eff4f6 !important;
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #ff0037 !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #141928 !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: hsla(0,0%,100%,.039) !important;
+  --cc-btn-secondary-color: #fff !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #252729 !important;
+  --cc-btn-secondary-hover-color: #fff !important;
+  --cc-btn-secondary-hover-border-color: #252729 !important;
+
+  --cc-separator-border-color: #252729 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: var(--cc-bg) !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #2f3132 !important;
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg) !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #101111 !important;
+  --cc-cookie-category-block-border: #1d1e1f !important;
+  --cc-cookie-category-block-hover-bg: #151516 !important;
+  --cc-cookie-category-block-hover-border: #1d1e1f !important;
+  --cc-cookie-category-expanded-block-bg: #101111 !important;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f !important;
+
+  --cc-overlay-bg: rgba(0,0,0,.9) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #000 !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #212529 !important;
+}
+
 .cc--tenant\:frontier-light button.cm__btn,
-.cc--tenant\:frontier-light button.pm__btn {
+.cc--tenant\:frontier-light button.pm__btn,
+.cc--tenant\:frontier-dark button.cm__btn,
+.cc--tenant\:frontier-dark button.pm__btn {
   border-radius: 9999px !important;
   text-transform: uppercase !important;
   font-weight: 700 !important;
@@ -66,6 +122,7 @@
 }
 
 /** font */
-.cc--tenant\:frontier-light #cc-main {
+.cc--tenant\:frontier-light #cc-main,
+.cc--tenant\:frontier-dark #cc-main {
   font-family: var(--font-frontier-pp-object-sans, var(--cc-font-family)) !important;
 }

package/src/styles/tenants/oru.css

@@ -0,0 +1,157 @@
+/** NOTE: to auto-add `!important` suffixes, simply use this RegEx w/ Find + Replace:
+  * > Find: (:)(?![^;]*!important)([^;]+)(;)(?!.*\^)
+  * > Replace: :$2 !important;
+  */
+
+/** `tenant:oru` color-scheme **/
+.cc--tenant\:oru-light {
+  --cc-bg: #ffffff !important;
+  --cc-primary-color: #2c2f31 !important;
+  --cc-secondary-color: #5e6266 !important;
+
+  --cc-btn-primary-bg: #004557 !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #004557 !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: #e2e8f0 !important;
+  --cc-btn-secondary-color: #334155 !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #f1f5f9 !important;
+  --cc-btn-secondary-hover-color: #000000 !important;
+  --cc-btn-secondary-hover-border-color: #d4dae0 !important;
+
+  --cc-separator-border-color: #f3f8fc !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: #ffffff !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #d5dee2 !important;
+  --cc-toggle-readonly-knob-bg: #fff !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #f3f8fc !important;
+  --cc-cookie-category-block-border: #f3f8fc !important;
+  --cc-cookie-category-block-hover-bg: #f0f4f7 !important;
+  --cc-cookie-category-block-hover-border: #f0f4f7 !important;
+  --cc-cookie-category-expanded-block-bg: transparent !important;
+  --cc-cookie-category-expanded-block-hover-bg: #dee4e9 !important;
+
+  --cc-overlay-bg: rgba(0, 0, 0, 0.65) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #f3f8fc !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #e4eaed !important;
+}
+
+.cc--tenant\:oru-dark {
+  color-scheme: dark;
+  --cc-bg: #000 !important;
+  --cc-primary-color: #eff4f6 !important;
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #004557 !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #004557 !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: hsla(0,0%,100%,.039) !important;
+  --cc-btn-secondary-color: #fff !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #252729 !important;
+  --cc-btn-secondary-hover-color: #fff !important;
+  --cc-btn-secondary-hover-border-color: #252729 !important;
+
+  --cc-separator-border-color: #252729 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: var(--cc-bg) !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #2f3132 !important;
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg) !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #101111 !important;
+  --cc-cookie-category-block-border: #1d1e1f !important;
+  --cc-cookie-category-block-hover-bg: #151516 !important;
+  --cc-cookie-category-block-hover-border: #1d1e1f !important;
+  --cc-cookie-category-expanded-block-bg: #101111 !important;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f !important;
+
+  --cc-overlay-bg: rgba(0,0,0,.9) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #000 !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #212529 !important;
+}
+
+.cc--tenant\:oru-light div.cm__btn-group,
+.cc--tenant\:oru-dark div.cm__btn-group,
+.cc--tenant\:oru-light div.cm__btns,
+.cc--tenant\:oru-dark div.cm__btns {
+  & > *:not(:first-child) {
+    margin-top: 8px !important;
+  }
+}
+
+.cc--tenant\:oru-light div.pm__btn-group,
+.cc--tenant\:oru-dark div.pm__btn-group {
+  & > *:not(:first-child) {
+    margin-left: 8px !important;
+  }
+}
+
+.cc--tenant\:oru-light button.cm__btn,
+.cc--tenant\:oru-light button.pm__btn,
+.cc--tenant\:oru-dark button.cm__btn,
+.cc--tenant\:oru-dark button.pm__btn {
+  border-radius: 9999px !important;
+  font-weight: 800 !important;
+  letter-spacing: normal !important;
+  padding: 10px 24px !important; /* 10 px top/bottom, 24 px left/right */
+  height: 48px !important; /* 48 px height (3rem) */
+  font-size: 16px !important;
+}
+
+.cc--tenant\:oru-light button.cm__btn--secondary,
+.cc--tenant\:oru-light button.pm__btn--secondary,
+.cc--tenant\:oru-dark button.cm__btn--secondary,
+.cc--tenant\:oru-dark button.pm__btn--secondary {
+  color: #004557 !important;
+  background-color: #fff !important;
+  border-color: #004557 !important;
+  border-width: 2.5px !important;
+  box-sizing: border-box !important;
+}
+
+/** font */
+.cc--tenant\:oru-light #cc-main,
+.cc--tenant\:oru-dark #cc-main {
+  font-family: var(--font-open-sans, var(--cc-font-family)) !important;
+}

package/src/styles/tilli-pay.css

@@ -0,0 +1,121 @@
+/** NOTE: to auto-add `!important` suffixes, simply use this RegEx w/ Find + Replace:
+  * > Find: (:)(?![^;]*!important)([^;]+)(;)(?!.*\^)
+  * > Replace: :$2 !important;
+  */
+
+/* TILLI_PAY_BLUE_HEX: #325ef6 */
+/* TILLI_PAY_LIGHT_BLUE_HEX: #00b1ff */
+
+/** `tilli-pay` color-scheme **/
+.cc--tilli-pay-light {
+  --cc-bg: #ffffff !important;
+  --cc-primary-color: #2c2f31 !important;
+  --cc-secondary-color: #5e6266 !important;
+
+  --cc-btn-primary-bg: #00b1ff !important;
+  --cc-btn-primary-color: #ffffff !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #1bb4f7 !important;
+  --cc-btn-primary-hover-color: #ffffff !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: #e2e8f0 !important;
+  --cc-btn-secondary-color: #334155 !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #f1f5f9 !important;
+  --cc-btn-secondary-hover-color: #000000 !important;
+  --cc-btn-secondary-hover-border-color: #d4dae0 !important;
+
+  --cc-separator-border-color: #f3f8fc !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: #ffffff !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #d5dee2 !important;
+  --cc-toggle-readonly-knob-bg: #fff !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #f3f8fc !important;
+  --cc-cookie-category-block-border: #f3f8fc !important;
+  --cc-cookie-category-block-hover-bg: #f0f4f7 !important;
+  --cc-cookie-category-block-hover-border: #f0f4f7 !important;
+  --cc-cookie-category-expanded-block-bg: transparent !important;
+  --cc-cookie-category-expanded-block-hover-bg: #dee4e9 !important;
+
+  --cc-overlay-bg: rgba(0, 0, 0, 0.65) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #f3f8fc !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #e4eaed !important;
+}
+
+.cc--tilli-pay-dark {
+  color-scheme: dark;
+  --cc-bg: #000 !important;
+  --cc-primary-color: #eff4f6 !important;
+  --cc-secondary-color: #b1bdc3 !important;
+
+  --cc-btn-primary-bg: #1F9CD4 !important;
+  --cc-btn-primary-color: #000 !important;
+  --cc-btn-primary-border-color: var(--cc-btn-primary-bg) !important;
+  --cc-btn-primary-hover-bg: #44a7d4 !important;
+  --cc-btn-primary-hover-color: #000 !important;
+  --cc-btn-primary-hover-border-color: var(
+    --cc-btn-primary-hover-bg
+  ) !important;
+
+  --cc-btn-secondary-bg: hsla(0,0%,100%,.039) !important;
+  --cc-btn-secondary-color: #fff !important;
+  --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg) !important;
+  --cc-btn-secondary-hover-bg: #252729 !important;
+  --cc-btn-secondary-hover-color: #fff !important;
+  --cc-btn-secondary-hover-border-color: #252729 !important;
+
+  --cc-separator-border-color: #252729 !important;
+
+  --cc-toggle-on-bg: var(--cc-btn-primary-bg) !important;
+  --cc-toggle-off-bg: #667481 !important;
+  --cc-toggle-on-knob-bg: var(--cc-bg) !important;
+  --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg) !important;
+
+  --cc-toggle-enabled-icon-color: var(--cc-bg) !important; /* yes (v tick) */
+  --cc-toggle-disabled-icon-color: var(--cc-bg) !important; /* no (x tick) */
+
+  --cc-toggle-readonly-bg: #2f3132 !important;
+  --cc-toggle-readonly-knob-bg: var(--cc-cookie-category-block-bg) !important;
+  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg) !important;
+
+  --cc-section-category-border: var(--cc-cookie-category-block-bg) !important;
+
+  --cc-cookie-category-block-bg: #101111 !important;
+  --cc-cookie-category-block-border: #1d1e1f !important;
+  --cc-cookie-category-block-hover-bg: #151516 !important;
+  --cc-cookie-category-block-hover-border: #1d1e1f !important;
+  --cc-cookie-category-expanded-block-bg: #101111 !important;
+  --cc-cookie-category-expanded-block-hover-bg: #1d1e1f !important;
+
+  --cc-overlay-bg: rgba(0,0,0,.9) !important;
+  --cc-webkit-scrollbar-bg: var(--cc-section-category-border) !important;
+  --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg) !important;
+
+  --cc-footer-bg: #000 !important;
+  --cc-footer-color: var(--cc-secondary-color) !important;
+  --cc-footer-border-color: #212529 !important;
+}
+
+/** font */
+.cc--tilli-pay-light #cc-main,
+.cc--tilli-pay-dark #cc-main {
+  font-family: var(--font-inter, var(--cc-font-family)) !important;
+}