@indico-data/design-system 2.17.2 → 2.18.0

package/lib/index.css

@@ -35,6 +35,7 @@
   --pf-primary-color-700: #5329a6;
   --pf-primary-color-800: #492492;
   --pf-primary-color-900: #3e1f7d;
+  --pf-primary-color-1000: #271153;
   --pf-secondary-color: #0070f5;
   --pf-secondary-color-100: #dceafd;
   --pf-secondary-color-200: #b3d4fc;
@@ -101,20 +102,21 @@
   --pf-primary-color-300: #3b455e;
   --pf-primary-color-400: #323a4d;
   --pf-primary-color-500: #262c3a;
-  --pf-primary-color-600: #1f2431;
-  --pf-primary-color-700: #1c2632;
+  --pf-primary-color-600: #182432;
+  --pf-primary-color-700: #101a26;
   --pf-primary-color-800: #1b202c;
   --pf-primary-color-900: #141b24;
+  --pf-primary-color-1000: #271153;
   --pf-secondary-color: #0070f5;
   --pf-secondary-color-100: #dceafd;
   --pf-secondary-color-200: #b3d4fc;
   --pf-secondary-color-300: #7ab5fa;
   --pf-secondary-color-400: #4797f5;
-  --pf-secondary-color-500: #0070f5;
-  --pf-secondary-color-600: #0067e1;
-  --pf-secondary-color-700: #005ac4;
-  --pf-secondary-color-800: #004eac;
-  --pf-secondary-color-900: #004393;
+  --pf-secondary-color-500: #2482f5;
+  --pf-secondary-color-600: #2070d1;
+  --pf-secondary-color-700: #178ee0;
+  --pf-secondary-color-800: #3d5a7d;
+  --pf-secondary-color-900: #0b2647;
   --pf-gray-color: #bfc1c3;
   --pf-gray-color-100: #efefef;
   --pf-gray-color-200: #eaeaea;
@@ -249,6 +251,16 @@
   --pf-dropshadow: 5px 0 10px rgba(0, 0, 0, 0.3);
 }
 
+:root,
+:root [data-theme=light],
+:root [data-theme=dark] {
+  --pf-form-input-border-color: var(--pf-gray-color-700);
+}
+
+:root [data-theme=dark] {
+  --pf-form-input-border-color: var(--pf-primary-color-200);
+}
+
 :root,
 :root [data-theme=light],
 :root [data-theme=dark] {
@@ -258,7 +270,6 @@
   --pf-button-disabled-primary-color: var(--pf-primary-color-300);
   --pf-button-focus-primary-color: var(--pf-primary-color-900);
   --pf-button-hover-primary-color: var(--pf-primary-color-400);
-  --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
   --pf-button-primary-color: var(--pf-primary-color);
   --pf-button-primary-text-color: var(--pf-white-color);
   --pf-button-background-secondary-color: var(--pf-secondary-color);
@@ -303,6 +314,32 @@
   --pf-button-background-info-color: var(--pf-info-color);
   --pf-button-hover-info-color: var(--pf-gray-color-400);
   --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+  --pf-button-outline-primary-background-color: var(--pf-white-color);
+  --pf-button-outline-primary-text-color: var(--pf-primary-color);
+  --pf-button-outline-primary-border-color: var(--pf-primary-color);
+  --pf-button-outline-secondary-background-color: var(--pf-white-color);
+  --pf-button-outline-secondary-text-color: var(--pf-secondary-color);
+  --pf-button-outline-secondary-border-color: var(--pf-secondary-color);
+  --pf-button-primary-outline-border-color: var(--pf-primary-color);
+  --pf-button-secondary-outline-border-color: var(--pf-secondary-color);
+  --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-400);
+  --pf-button-outline-hover-primary-color: var(--pf-primary-color-300);
+  --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-100);
+  --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-300);
+  --pf-button-outline-hover-secondary-background-color: var(--pf-secondary-color-100);
+  --pf-button-disabled-primary-background-color: var(--pf-primary-color-300);
+  --pf-button-disabled-primary-text-color: var(--pf-gray-color-100);
+  --pf-button-disabled-primary-border-color: var(--pf-primary-color-300);
+  --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-secondary-text-color: var(--pf-gray-color-100);
+  --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-primary-outline-background-color: var(--pf-white-color);
+  --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-300);
+  --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-300);
+  --pf-button-disabled-secondary-outline-background-color: var(--pf-white-color);
+  --pf-button-disabled-secondary-outline-text-color: var(--pf-secondary-color-300);
+  --pf-button-disabled-secondary-outline-border-color: var(--pf-secondary-color-300);
 }
 
 :root [data-theme=dark] {
@@ -312,6 +349,30 @@
   --pf-button-background-info-color: var(--pf-gray-color-800);
   --pf-button-hover-info-color: var(--pf-gray-color-600);
   --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
+  --pf-button-outline-primary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-primary-text-color: var(--pf-primary-color-100);
+  --pf-button-primary-outline-border-color: var(--pf-primary-color-100);
+  --pf-button-outline-secondary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-secondary-text-color: var(--pf-secondary-color-700);
+  --pf-button-secondary-outline-border-color: var(--pf-secondary-color-700);
+  --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-200);
+  --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-hover-primary-border-color: var(--pf-primary-color-200);
+  --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
+  --pf-button-outline-hover-secondary-background-color: var(--pf-primary-color-600);
+  --pf-button-outline-hover-secondary-border-color: var(--pf-secondary-color-400);
+  --pf-button-disabled-primary-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-primary-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-primary-border-color: var(--pf-primary-color-900);
+  --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-900);
+  --pf-button-disabled-secondary-text-color: var(--pf-secondary-color-400);
+  --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-900);
+  --pf-button-disabled-primary-outline-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-400);
+  --pf-button-disabled-secondary-outline-background-color: var(--pf-primary-color-900);
+  --pf-button-disabled-secondary-outline-text-color: var(--pf-primary-color-400);
+  --pf-button-disabled-secondary-outline-border-color: var(--pf-primary-color-400);
 }
 
 .btn {
@@ -359,35 +420,29 @@
   border-color: var(--pf-button-hover-primary-color);
   background: var(--pf-button-hover-primary-color);
 }
-.btn--primary:focus {
-  border-color: var(--pf-button-focus-primary-color);
-  background: var(--pf-button-focus-primary-color);
-}
 .btn--primary:disabled {
-  background: var(--pf-button-disabled-primary-color);
-  border-color: var(--pf-button-disabled-primary-color);
+  background: var(--pf-button-disabled-primary-background-color);
+  color: var(--pf-button-disabled-primary-text-color);
+  border-color: var(--pf-button-disabled-primary-border-color);
 }
 .btn--primary.btn--outline {
-  color: var(--pf-button-primary-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-outline-primary-text-color);
+  background-color: var(--pf-button-outline-primary-background-color);
+  border-color: var(--pf-button-primary-outline-border-color);
 }
 .btn--primary.btn--outline:hover {
-  background-color: var(--pf-button-outline-hover-primary-color);
-  border-color: var(--pf-button-hover-primary-color);
-}
-.btn--primary.btn--outline:focus {
-  border-color: var(--pf-button-focus-primary-color);
-  background-color: var(--pf-button-outline-hover-primary-color);
-  color: var(--pf-button-focus-primary-color);
+  color: var(--pf-button-outline-primary-hover-text-color);
+  background-color: var(--pf-button-outline-hover-primary-background-color);
+  border-color: var(--pf-button-hover-primary-outline-border-color);
 }
 .btn--primary.btn--outline:disabled {
-  border-color: var(--pf-button-disabled-primary-color);
-  color: var(--pf-button-disabled-primary-color);
+  border-color: var(--pf-button-disabled-primary-outline-border-color);
+  color: var(--pf-button-disabled-primary-outline-text-color);
+  background-color: var(--pf-button-disabled-primary-outline-background-color);
 }
 .btn--primary.btn--outline:disabled:hover {
-  border-color: var(--pf-button-disabled-primary-color);
-  color: var(--pf-button-disabled-primary-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-disabled-primary-outline-text-color);
+  background-color: var(--pf-button-disabled-primary-outline-background-color);
 }
 
 .btn--secondary {
@@ -399,35 +454,29 @@
   border-color: var(--pf-button-hover-secondary-color);
   background: var(--pf-button-hover-secondary-color);
 }
-.btn--secondary:focus {
-  border-color: var(--pf-button-focus-secondary-color);
-  background: var(--pf-button-focus-secondary-color);
-}
 .btn--secondary:disabled {
-  background: var(--pf-button-disabled-secondary-color);
-  border-color: var(--pf-button-disabled-secondary-color);
+  background: var(--pf-button-disabled-secondary-background-color);
+  color: var(--pf-button-disabled-secondary-text-color);
+  border-color: var(--pf-button-disabled-secondary-border-color);
 }
 .btn--secondary.btn--outline {
-  color: var(--pf-button-secondary-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-outline-secondary-text-color);
+  background-color: var(--pf-button-outline-secondary-background-color);
+  border-color: var(--pf-button-secondary-outline-border-color);
 }
 .btn--secondary.btn--outline:hover {
-  background-color: var(--pf-button-outline-hover-secondary-color);
-  border-color: var(--pf-button-hover-secondary-color);
-}
-.btn--secondary.btn--outline:focus {
-  border-color: var(--pf-button-focus-secondary-color);
-  background-color: var(--pf-button-outline-hover-secondary-color);
-  color: var(--pf-button-focus-secondary-color);
+  color: var(--pf-button-outline-secondary-hover-text-color);
+  background-color: var(--pf-button-outline-hover-secondary-background-color);
+  border-color: var(--pf-button-hover-secondary-outline-border-color);
 }
 .btn--secondary.btn--outline:disabled {
-  border-color: var(--pf-button-disabled-secondary-color);
-  color: var(--pf-button-disabled-secondary-color);
+  border-color: var(--pf-button-disabled-secondary-outline-border-color);
+  color: var(--pf-button-disabled-secondary-outline-text-color);
+  background-color: var(--pf-button-disabled-secondary-outline-background-color);
 }
 .btn--secondary.btn--outline:disabled:hover {
-  border-color: var(--pf-button-disabled-secondary-color);
-  color: var(--pf-button-disabled-secondary-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-disabled-secondary-outline-text-color);
+  background-color: var(--pf-button-disabled-secondary-outline-background-color);
 }
 
 .btn--info {
@@ -439,35 +488,29 @@
   border-color: var(--pf-button-hover-info-color);
   background: var(--pf-button-hover-info-color);
 }
-.btn--info:focus {
-  border-color: var(--pf-button-focus-info-color);
-  background: var(--pf-button-focus-info-color);
-}
 .btn--info:disabled {
-  background: var(--pf-button-disabled-info-color);
-  border-color: var(--pf-button-disabled-info-color);
+  background: var(--pf-button-disabled-info-background-color);
+  color: var(--pf-button-disabled-info-text-color);
+  border-color: var(--pf-button-disabled-info-border-color);
 }
 .btn--info.btn--outline {
-  color: var(--pf-button-info-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-outline-info-text-color);
+  background-color: var(--pf-button-outline-info-background-color);
+  border-color: var(--pf-button-info-outline-border-color);
 }
 .btn--info.btn--outline:hover {
-  background-color: var(--pf-button-outline-hover-info-color);
-  border-color: var(--pf-button-hover-info-color);
-}
-.btn--info.btn--outline:focus {
-  border-color: var(--pf-button-focus-info-color);
-  background-color: var(--pf-button-outline-hover-info-color);
-  color: var(--pf-button-focus-info-color);
+  color: var(--pf-button-outline-info-hover-text-color);
+  background-color: var(--pf-button-outline-hover-info-background-color);
+  border-color: var(--pf-button-hover-info-outline-border-color);
 }
 .btn--info.btn--outline:disabled {
-  border-color: var(--pf-button-disabled-info-color);
-  color: var(--pf-button-disabled-info-color);
+  border-color: var(--pf-button-disabled-info-outline-border-color);
+  color: var(--pf-button-disabled-info-outline-text-color);
+  background-color: var(--pf-button-disabled-info-outline-background-color);
 }
 .btn--info.btn--outline:disabled:hover {
-  border-color: var(--pf-button-disabled-info-color);
-  color: var(--pf-button-disabled-info-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-disabled-info-outline-text-color);
+  background-color: var(--pf-button-disabled-info-outline-background-color);
 }
 
 .btn--error {
@@ -479,35 +522,29 @@
   border-color: var(--pf-button-hover-error-color);
   background: var(--pf-button-hover-error-color);
 }
-.btn--error:focus {
-  border-color: var(--pf-button-focus-error-color);
-  background: var(--pf-button-focus-error-color);
-}
 .btn--error:disabled {
-  background: var(--pf-button-disabled-error-color);
-  border-color: var(--pf-button-disabled-error-color);
+  background: var(--pf-button-disabled-error-background-color);
+  color: var(--pf-button-disabled-error-text-color);
+  border-color: var(--pf-button-disabled-error-border-color);
 }
 .btn--error.btn--outline {
-  color: var(--pf-button-error-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-outline-error-text-color);
+  background-color: var(--pf-button-outline-error-background-color);
+  border-color: var(--pf-button-error-outline-border-color);
 }
 .btn--error.btn--outline:hover {
-  background-color: var(--pf-button-outline-hover-error-color);
-  border-color: var(--pf-button-hover-error-color);
-}
-.btn--error.btn--outline:focus {
-  border-color: var(--pf-button-focus-error-color);
-  background-color: var(--pf-button-outline-hover-error-color);
-  color: var(--pf-button-focus-error-color);
+  color: var(--pf-button-outline-error-hover-text-color);
+  background-color: var(--pf-button-outline-hover-error-background-color);
+  border-color: var(--pf-button-hover-error-outline-border-color);
 }
 .btn--error.btn--outline:disabled {
-  border-color: var(--pf-button-disabled-error-color);
-  color: var(--pf-button-disabled-error-color);
+  border-color: var(--pf-button-disabled-error-outline-border-color);
+  color: var(--pf-button-disabled-error-outline-text-color);
+  background-color: var(--pf-button-disabled-error-outline-background-color);
 }
 .btn--error.btn--outline:disabled:hover {
-  border-color: var(--pf-button-disabled-error-color);
-  color: var(--pf-button-disabled-error-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-disabled-error-outline-text-color);
+  background-color: var(--pf-button-disabled-error-outline-background-color);
 }
 
 .btn--success {
@@ -519,35 +556,29 @@
   border-color: var(--pf-button-hover-success-color);
   background: var(--pf-button-hover-success-color);
 }
-.btn--success:focus {
-  border-color: var(--pf-button-focus-success-color);
-  background: var(--pf-button-focus-success-color);
-}
 .btn--success:disabled {
-  background: var(--pf-button-disabled-success-color);
-  border-color: var(--pf-button-disabled-success-color);
+  background: var(--pf-button-disabled-success-background-color);
+  color: var(--pf-button-disabled-success-text-color);
+  border-color: var(--pf-button-disabled-success-border-color);
 }
 .btn--success.btn--outline {
-  color: var(--pf-button-success-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-outline-success-text-color);
+  background-color: var(--pf-button-outline-success-background-color);
+  border-color: var(--pf-button-success-outline-border-color);
 }
 .btn--success.btn--outline:hover {
-  background-color: var(--pf-button-outline-hover-success-color);
-  border-color: var(--pf-button-hover-success-color);
-}
-.btn--success.btn--outline:focus {
-  border-color: var(--pf-button-focus-success-color);
-  background-color: var(--pf-button-outline-hover-success-color);
-  color: var(--pf-button-focus-success-color);
+  color: var(--pf-button-outline-success-hover-text-color);
+  background-color: var(--pf-button-outline-hover-success-background-color);
+  border-color: var(--pf-button-hover-success-outline-border-color);
 }
 .btn--success.btn--outline:disabled {
-  border-color: var(--pf-button-disabled-success-color);
-  color: var(--pf-button-disabled-success-color);
+  border-color: var(--pf-button-disabled-success-outline-border-color);
+  color: var(--pf-button-disabled-success-outline-text-color);
+  background-color: var(--pf-button-disabled-success-outline-background-color);
 }
 .btn--success.btn--outline:disabled:hover {
-  border-color: var(--pf-button-disabled-success-color);
-  color: var(--pf-button-disabled-success-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-disabled-success-outline-text-color);
+  background-color: var(--pf-button-disabled-success-outline-background-color);
 }
 
 .btn--warning {
@@ -559,35 +590,29 @@
   border-color: var(--pf-button-hover-warning-color);
   background: var(--pf-button-hover-warning-color);
 }
-.btn--warning:focus {
-  border-color: var(--pf-button-focus-warning-color);
-  background: var(--pf-button-focus-warning-color);
-}
 .btn--warning:disabled {
-  background: var(--pf-button-disabled-warning-color);
-  border-color: var(--pf-button-disabled-warning-color);
+  background: var(--pf-button-disabled-warning-background-color);
+  color: var(--pf-button-disabled-warning-text-color);
+  border-color: var(--pf-button-disabled-warning-border-color);
 }
 .btn--warning.btn--outline {
-  color: var(--pf-button-warning-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-outline-warning-text-color);
+  background-color: var(--pf-button-outline-warning-background-color);
+  border-color: var(--pf-button-warning-outline-border-color);
 }
 .btn--warning.btn--outline:hover {
-  background-color: var(--pf-button-outline-hover-warning-color);
-  border-color: var(--pf-button-hover-warning-color);
-}
-.btn--warning.btn--outline:focus {
-  border-color: var(--pf-button-focus-warning-color);
-  background-color: var(--pf-button-outline-hover-warning-color);
-  color: var(--pf-button-focus-warning-color);
+  color: var(--pf-button-outline-warning-hover-text-color);
+  background-color: var(--pf-button-outline-hover-warning-background-color);
+  border-color: var(--pf-button-hover-warning-outline-border-color);
 }
 .btn--warning.btn--outline:disabled {
-  border-color: var(--pf-button-disabled-warning-color);
-  color: var(--pf-button-disabled-warning-color);
+  border-color: var(--pf-button-disabled-warning-outline-border-color);
+  color: var(--pf-button-disabled-warning-outline-text-color);
+  background-color: var(--pf-button-disabled-warning-outline-background-color);
 }
 .btn--warning.btn--outline:disabled:hover {
-  border-color: var(--pf-button-disabled-warning-color);
-  color: var(--pf-button-disabled-warning-color);
-  background-color: var(--pf-button-outline-background-color);
+  color: var(--pf-button-disabled-warning-outline-text-color);
+  background-color: var(--pf-button-disabled-warning-outline-background-color);
 }
 
 .btn--text {
@@ -872,20 +897,18 @@
 :root [data-theme=light],
 :root [data-theme=dark] {
   --pf-input-background-color: var(--pf-white-color);
-  --pf-input-border-color: var(--pf-gray-color);
+  --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color);
   --pf-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-input-help-text-color: var(--pf-gray-color-400);
   --pf-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-disabled-color: var(--pf-gray-color-400);
-  --pf-input-border-color: var(--pf-gray-color);
   --pf-input-rounded: var(--pf-rounded);
 }
 
 :root [data-theme=dark] {
   --pf-input-background-color: var(--pf-primary-color);
-  --pf-input-border-color: var(--pf-gray-color-100);
+  --pf-input-border-color: var(--pf-form-input-border-color);
   --pf-input-text-color: var(--pf-gray-color-100);
   --pf-input-placeholder-text-color: var(--pf-gray-color);
   --pf-input-help-text-color: var(--pf-gray-color-200);
@@ -979,14 +1002,14 @@
 :root [data-theme=dark] {
   --pf-radio-background-color: var(--pf-white-color);
   --pf-radio-check-color: var(--pf-primary-color);
-  --pf-radio-border-color: var(--pf-gray-color);
+  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-400);
 }
 
 :root [data-theme=dark] {
-  --pf-radio-background-color: transparent;
+  --pf-radio-background-color: var(--pf-primary-color-600);
   --pf-radio-check-color: var(--pf-white-color);
-  --pf-radio-border-color: var(--pf-white-color);
+  --pf-radio-border-color: var(--pf-form-input-border-color);
   --pf-radio-disabled-color: var(--pf-gray-color-300);
 }
 
@@ -1068,14 +1091,14 @@
 :root [data-theme=dark] {
   --pf-checkbox-background-color: var(--pf-white-color);
   --pf-checkbox-check-color: var(--pf-primary-color);
-  --pf-checkbox-border-color: var(--pf-gray-color);
+  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-400);
 }
 
 :root [data-theme=dark] {
-  --pf-checkbox-background-color: var(--pf-primary-color-200);
+  --pf-checkbox-background-color: var(--pf-primary-color-500);
   --pf-checkbox-check-color: var(--pf-white-color);
-  --pf-checkbox-border-color: var(--pf-white-color);
+  --pf-checkbox-border-color: var(--pf-form-input-border-color);
   --pf-checkbox-disabled-color: var(--pf-gray-color-300);
 }
 
@@ -1156,19 +1179,18 @@
 :root [data-theme=light],
 :root [data-theme=dark] {
   --pf-textarea-background-color: var(--pf-white-color);
-  --pf-textarea-border-color: var(--pf-gray-color);
   --pf-textarea-text-color: var(--pf-gray-color);
   --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
   --pf-textarea-help-text-color: var(--pf-gray-color-400);
   --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
-  --pf-textarea-border-color: var(--pf-gray-color);
+  --pf-textarea-border-color: var(--pf-form-input-border-color);
   --pf-textarea-disabled-color: var(--pf-gray-color-400);
   --pf-textarea-rounded: var(--pf-rounded);
 }
 
 :root [data-theme=dark] {
   --pf-textarea-background-color: var(--pf-primary-color);
-  --pf-textarea-border-color: var(--pf-gray-color-100);
+  --pf-textarea-border-color: var(--pf-form-input-border-color);
   --pf-textarea-text-color: var(--pf-gray-color-100);
   --pf-textarea-placeholder-text-color: var(--pf-gray-color);
   --pf-textarea-help-text-color: var(--pf-gray-color-200);
@@ -1249,20 +1271,18 @@
 :root [data-theme=light],
 :root [data-theme=dark] {
   --pf-password-input-background-color: var(--pf-white-color);
-  --pf-password-input-border-color: var(--pf-gray-color);
+  --pf-password-input-border-color: var(--pf-form-input-border-color);
   --pf-password-input-text-color: var(--pf-gray-color);
   --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
   --pf-password-input-help-text-color: var(--pf-gray-color-400);
   --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
-  --pf-password-input-border-color: var(--pf-gray-color);
   --pf-password-input-disabled-color: var(--pf-gray-color-400);
-  --pf-password-input-border-color: var(--pf-gray-color);
   --pf-password-input-rounded: var(--pf-rounded);
 }
 
 :root [data-theme=dark] {
   --pf-password-input-background-color: var(--pf-primary-color);
-  --pf-password-input-border-color: var(--pf-gray-color-100);
+  --pf-password-input-border-color: var(--pf-form-input-border-color);
   --pf-password-input-text-color: var(--pf-gray-color-100);
   --pf-password-input-placeholder-text-color: var(--pf-gray-color);
   --pf-password-input-help-text-color: var(--pf-gray-color-200);
@@ -1363,12 +1383,12 @@ form {
 :root,
 :root [data-theme=light] {
   --pf-select-background-color: var(--pf-white-color);
-  --pf-select-border-color: var(--pf-gray-color);
+  --pf-select-border-color: var(--pf-form-input-border-color);
   --pf-select-text-color: var(--pf-gray-color);
   --pf-select-indicator-color: var(--pf-gray-color);
   --pf-select-placeholder-text-color: var(--pf-gray-color);
   --pf-select-hover-color: var(--pf-gray-color);
-  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-selected-color: var(--pf-primary-color-100);
   --pf-select-option-text-color: var(--pf-gray-color);
   --pf-select-option-hover-color: var(--pf-primary-color-100);
   --pf-select-disabled-background-color: var(--pf-gray-color-100);
@@ -1377,12 +1397,12 @@ form {
 
 :root [data-theme=dark] {
   --pf-select-background-color: var(--pf-primary-color);
-  --pf-select-border-color: var(--pf-gray-color-100);
+  --pf-select-border-color: var(--pf-form-input-border-color);
   --pf-select-text-color: var(--pf-gray-color-100);
   --pf-select-indicator-color: var(--pf-gray-color-100);
   --pf-select-placeholder-text-color: var(--pf-gray-color-100);
   --pf-select-hover-color: var(--pf-gray-color-100);
-  --pf-select-option-selected-color: var(--pf-primary-color-200);
+  --pf-select-option-selected-color: var(--pf-primary-color-900);
   --pf-select-option-text-color: var(--pf-gray-color-100);
   --pf-select-option-hover-color: var(--pf-primary-color-300);
   --pf-select-disabled-background-color: var(--pf-primary-color-200);
@@ -1411,6 +1431,22 @@ form {
 .select-wrapper .select__input-container {
   color: var(--pf-select-text-color);
 }
+.select-wrapper .select__multi-value {
+  background-color: var(--pf-select-option-selected-color);
+  border-radius: var(--pf-rounded);
+}
+.select-wrapper .select__multi-value__label {
+  padding-top: 5px;
+  color: var(--pf-select-option-text-color);
+}
+.select-wrapper .select__multi-value__remove {
+  color: var(--pf-select-option-text-color);
+  cursor: pointer;
+}
+.select-wrapper .select__multi-value__remove:hover {
+  background-color: var(--pf-select-option-hover-color);
+  color: var(--pf-select-hover-color);
+}
 .select-wrapper .select__menu {
   border: 1px solid var(--pf-select-border-color);
   box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
@@ -1457,7 +1493,7 @@ form {
 :root [data-theme=dark] {
   --pf-toggle-background-color: var(--pf-gray-color-200);
   --pf-toggle-circle-color: var(--pf-primary-color);
-  --pf-toggle-border-color: var(--pf-gray-color);
+  --pf-toggle-border-color: var(--pf-form-input-border-color);
   --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
   --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
   --pf-toggle-checked-background-color: var(--pf-primary-color-200);
@@ -1466,7 +1502,7 @@ form {
 :root [data-theme=dark] {
   --pf-toggle-background-color: var(--pf-primary-color-100);
   --pf-toggle-circle-color: var(--pf-white-color);
-  --pf-toggle-border-color: var(--pf-white-color);
+  --pf-toggle-border-color: var(--pf-form-input-border-color);
   --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
   --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
   --pf-toggle-checked-background-color: var(--pf-secondary-color-400);
@@ -1606,6 +1642,435 @@ form {
   box-shadow: var(--pf-dropshadow);
 }
 
+.rdp {
+  --rdp-cell-size: 40px;
+  --rdp-accent-color: #6833d0;
+  --rdp-background-color: #ffffff;
+  --rdp-accent-color-dark: #3003e1;
+  --rdp-background-color-dark: #180270;
+  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+  margin: 1em;
+}
+
+/* Hide elements for devices that are not screen readers */
+.rdp-vhidden {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
+
+/* Buttons */
+.rdp-button_reset {
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: default;
+  color: inherit;
+  background: none;
+  font: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
+.rdp-button {
+  border: 2px solid transparent;
+}
+
+.rdp-button[disabled]:not(.rdp-day_selected) {
+  opacity: 0.25;
+}
+
+.rdp-button:not([disabled]) {
+  cursor: pointer;
+}
+
+.rdp-button:focus-visible:not([disabled]) {
+  color: inherit;
+  background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
+}
+
+.rdp-months {
+  display: flex;
+}
+
+.rdp-month {
+  margin: 0 1em;
+}
+
+.rdp-month:first-child {
+  margin-left: 0;
+}
+
+.rdp-month:last-child {
+  margin-right: 0;
+}
+
+.rdp-table {
+  margin: 0;
+  max-width: calc(var(--rdp-cell-size) * 7);
+  border-collapse: collapse;
+}
+
+.rdp-with_weeknumber .rdp-table {
+  max-width: calc(var(--rdp-cell-size) * 8);
+  border-collapse: collapse;
+}
+
+.rdp-caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  text-align: left;
+}
+
+.rdp-multiple_months .rdp-caption {
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.rdp-caption_dropdowns {
+  position: relative;
+  display: inline-flex;
+}
+
+.rdp-caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  color: currentColor;
+  border: 0;
+  border: 2px solid transparent;
+  font-family: inherit;
+  font-size: 140%;
+  font-weight: bold;
+}
+
+.rdp-nav {
+  white-space: nowrap;
+}
+
+.rdp-multiple_months .rdp-caption_start .rdp-nav {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-multiple_months .rdp-caption_end .rdp-nav {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  padding: 0.25em;
+  border-radius: 100%;
+}
+
+/* ---------- */
+/* Dropdowns  */
+/* ---------- */
+.rdp-dropdown_year,
+.rdp-dropdown_month {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.rdp-dropdown[disabled] {
+  opacity: unset;
+  color: unset;
+}
+
+.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
+  border-radius: 6px;
+}
+
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
+}
+
+.rdp-head {
+  border: 0;
+}
+
+.rdp-head_row,
+.rdp-row {
+  height: 100%;
+}
+
+.rdp-head_cell {
+  vertical-align: middle;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-align: center;
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+}
+
+.rdp-tbody {
+  border: 0;
+}
+
+.rdp-tfoot {
+  margin: 0.5em;
+}
+
+.rdp-cell {
+  width: var(--rdp-cell-size);
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+  text-align: center;
+}
+
+.rdp-weeknumber {
+  font-size: 0.75em;
+}
+
+.rdp-weeknumber,
+.rdp-day {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-cell-size);
+  max-width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 100%;
+}
+
+.rdp-day_today:not(.rdp-day_outside) {
+  font-weight: bold;
+}
+
+.rdp-day_selected,
+.rdp-day_selected:focus-visible,
+.rdp-day_selected:hover {
+  color: white;
+  opacity: 1;
+  background-color: var(--rdp-accent-color);
+}
+
+.rdp-day_outside {
+  opacity: 0.5;
+}
+
+.rdp-day_selected:focus-visible {
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp-day_range_end.rdp-day_range_start {
+  border-radius: 100%;
+}
+
+.rdp-day_range_middle {
+  border-radius: 0;
+}
+
+
+/******************************
+  *   Indico Custom Styling For Insights
+  *******************************/
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+  background-color: #976cec;
+}
+
+.rdp-button,
+.rdp-day {
+  box-shadow: none;
+  color: #000000;
+}
+.rdp-button:hover,
+.rdp-day:hover {
+  background-color: #6833d0;
+  color: white;
+}
+
+.rdp-head_cell,
+.rdp-cell {
+  border: none;
+}
+
+.DayPickerInput-Overlay {
+  border-radius: 4px;
+  z-index: 999;
+}
+.DayPickerInput-Overlay .rdp {
+  background: white;
+  z-index: 999;
+  border: solid 1px #000000;
+  border-radius: 4px;
+  box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.4);
+}
+
+.rdp-caption_label {
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+}
+
+.rdp-day_today {
+  background-color: #dbd5e6;
+  color: #ffffff;
+  font-weight: 400;
+}
+
+.rdp-button_reset.rdp-button.rdp-day.rdp-day_selected {
+  background-color: #6833d0;
+  color: white;
+}
+.rdp-button_reset.rdp-button.rdp-day.rdp-day_selected:focus {
+  color: white;
+}
+.rdp-button_reset.rdp-button.rdp-day.rdp-day_selected:active {
+  color: white;
+}
+
+.rdp-head_cell {
+  color: #6833d0;
+  font-weight: 400;
+}
+
+.date__picker__trigger {
+  color: #000000;
+  cursor: pointer;
+}
+
+.custom__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 5px 15px 5px;
+}
+.custom__caption .custom__caption__text {
+  font-size: 14px;
+  color: #000000;
+  margin: 0;
+}
+.custom__caption .custom__caption__action__button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  box-shadow: none;
+  padding: 0 5px 0 5px;
+  border-radius: 60px;
+  color: #6833d0;
+  height: 20px;
+  width: 20px;
+}
+.custom__caption .custom__caption__action__button:hover {
+  background-color: #6833d0;
+  color: #ffffff;
+  border-radius: 20px;
+}
+.custom__caption .custom__caption__action__button:hover .rdp-nav_icon {
+  color: #ffffff;
+}
+.custom__caption .custom__caption__action__button .rdp-nav_icon {
+  color: #6833d0;
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+.visually-hidden:not(caption),
+.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
+  position: absolute !important;
+}
+
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
   --pf-font-size-base: 1rem;