feat(sidebar): add dark theme colors [EE-3666] (#7414)

app/assets/css/app.css

@@ -86,11 +86,15 @@ body,
 }
 
 .form-section-title {
+  @apply text-gray-9;
+  @apply th-dark:text-gray-5;
+  @apply th-highcontrast:text-white;
+
   margin-top: 5px;
   margin-bottom: 10px;
-  color: var(--text-form-section-title-color);
   padding-left: 0;
   font-weight: 500;
+  font-size: 16px;
 }
 
 .form-horizontal .control-label.text-left {

app/assets/css/bootstrap-override.css

@@ -16,11 +16,6 @@
   font-weight: 500;
 }
 
-.form-section-title {
-  color: var(--ui-gray-9);
-  font-size: 16px;
-}
-
 .vertical-center {
   display: inline-flex;
   align-items: center;
@@ -178,8 +173,16 @@ input:checked + .slider:before {
 
 /* Widget */
 
-.widget .widget-icon i {
-  color: var(--ui-blue-8);
+.widget .widget-icon {
+  @apply text-lg !p-2 mr-1;
+  @apply bg-blue-3 text-blue-8;
+  @apply th-dark:bg-gray-9 th-dark:text-blue-3;
+
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5%;
 }
 
 .widget .widget-body table thead {

app/assets/css/button.css

@@ -1,4 +1,8 @@
 .btn {
+  @apply disabled:opacity-60;
+  @apply !outline-none;
+  @apply border border-solid border-transparent;
+
   border-radius: 5px;
   display: inline-flex;
   justify-content: space-around;
@@ -15,81 +19,76 @@
 }
 
 .btn-primary {
-  background-color: var(--ui-blue-8);
+  @apply bg-blue-8 border-blue-8;
+  @apply hover:bg-blue-9 hover:border-blue-9;
+  @apply th-dark:hover:bg-blue-7 th-dark:hover:border-blue-7;
 }
 
-.btn-primary:hover,
 .btn-primary:focus,
-.btn-primary:active .active {
-  background-color: var(--ui-blue-9);
-}
-
 .btn-primary:active,
 .btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
-  background-color: var(--ui-blue-9);
+  @apply bg-blue-9 border-blue-5;
 }
 
 .nav-pills > li.active > a,
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
-  background-color: var(--ui-blue-8);
+  @apply bg-blue-8;
+}
+
+/* Button Secondary */
+.btn-secondary {
+  @apply border border-solid;
+  @apply disabled:border-transparent;
+
+  @apply text-blue-9 bg-blue-2 border-blue-8;
+  @apply hover:bg-blue-3 focus:bg-blue-3;
+
+  @apply th-dark:text-blue-3 th-dark:bg-gray-10 th-dark:border-blue-7;
+  @apply th-dark:hover:bg-blue-11;
+  @apply th-dark:focus:bg-gray-10 th-dark:focus:border-blue-5;
 }
 
 .btn-danger {
-  background-color: var(--ui-error-8);
+  @apply bg-error-8 border-error-8;
+  @apply hover:bg-error-7 hover:border-error-7 hover:text-white;
+  @apply focus:bg-error-8 focus:text-white focus:border-blue-5;
+}
+
+.btn-danger:active,
+.btn-danger.active,
+.open > .dropdown-toggle.btn-danger {
+  @apply bg-error-8 text-white border-blue-5;
+}
+
+.btn-dangerlight {
+  @apply text-error-9 th-dark:text-white;
+  @apply bg-error-3 th-dark:bg-error-9;
+  @apply hover:bg-error-2 th-dark:hover:bg-error-11;
+  @apply border-error-5 th-dark:border-error-7 th-highcontrast:border-error-7;
+  @apply border border-solid;
+
+  @apply focus:border-blue-5;
 }
 
 .btn-success {
   background-color: var(--ui-success-7);
 }
 
-.btn-dangerlight {
-  border: 1px solid var(--text-button-dangerlight-color);
-  color: var(--ui-error-9);
-}
-
-.btn-dangerlight:hover {
-  color: var(--ui-error-9) !important;
-  background-color: var(--ui-error-2) !important;
-}
-
 .btn-light {
+  @apply hover:bg-gray-2 th-dark:hover:bg-gray-9;
   background-color: var(--bg-button-group-color);
   border: 1px solid var(--border-button-group);
   color: var(--text-button-group-color);
 }
 
-.btn-light:hover {
-  background-color: var(--ui-gray-2) !important;
-}
-
 .btn-light:active,
 .btn-light.active,
 .open > .dropdown-toggle.btn-light {
   background-color: var(--ui-gray-3);
 }
 
-/* Button Secondary */
-.btn-secondary {
-  background-color: var(--ui-blue-2) !important;
-  border: 1px solid var(--ui-blue-8) !important;
-  color: var(--ui-blue-9) !important;
-}
-
-.btn-secondary:hover,
-.btn-secondary:focus,
-.btn-secondary:active .active {
-  background-color: var(--ui-blue-3) !important;
-  color: var(--ui-blue-9) !important;
-}
-
-.btn-secondary:disabled {
-  background-color: var(--ui-blue-1);
-  border: 1px solid var(--ui-blue-1);
-  color: var(--ui-blue-5);
-}
-
 form a,
 .form-group a,
 .hyperlink {
@@ -102,8 +101,3 @@ form a:hover,
   text-decoration: underline;
   color: var(--ui-blue-9);
 }
-
-.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
-  background: var(--bg-button-group-color) !important;
-  color: var(--text-button-group-color);
-}

app/assets/css/icon.css

@@ -101,19 +101,6 @@ pr-icon {
   padding: 1.5%;
 }
 
-.icon-nested-gray {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 30px;
-  width: 30px;
-  padding: 5px;
-  text-align: center;
-  border-radius: 50%;
-  background-color: var(--ui-gray-4);
-  margin-right: 5px;
-}
-
 .icon-nested-blue {
   display: flex;
   justify-content: center;

app/assets/css/rdash.css

@@ -100,9 +100,7 @@ div.input-mask {
   line-height: 30px;
   font-weight: 500;
 }
-.widget .widget-header i {
-  margin-right: 5px;
-}
+
 .widget .widget-body {
   padding: 20px;
   border-radius: 8px;
@@ -148,20 +146,7 @@ div.input-mask {
   border-top: 1px solid #e9e9e9;
   padding: 10px;
 }
-.widget .widget-icon {
-  background: #30426a;
-  width: 65px;
-  height: 65px;
-  border-radius: 50%;
-  text-align: center;
-  vertical-align: middle;
-  margin-right: 15px;
-}
-.widget .widget-icon i {
-  line-height: 66px;
-  color: #ffffff;
-  font-size: 30px;
-}
+
 .widget .widget-footer {
   border-top: 1px solid #e9e9e9;
   padding: 10px;

app/assets/css/theme.css

@@ -180,7 +180,6 @@
   --text-danger-color: var(--red-1);
   --text-code-color: var(--red-2);
   --text-navtabs-color: var(--grey-25);
-  --text-form-section-title-color: var(--grey-26);
   --text-cm-default-color: var(--blue-1);
   --text-cm-meta-color: var(--black-color);
   --text-cm-string-color: var(--red-3);
@@ -211,7 +210,6 @@
   --text-small-select-color: var(--grey-25);
   --text-bootbox: var(--ui-gray-7);
   --text-button-group-color: var(--ui-gray-9);
-  --text-button-dangerlight-color: var(--ui-error-5);
 
   --border-color: var(--grey-42);
   --border-widget-color: var(--grey-43);
@@ -281,7 +279,7 @@
   --text-button-group: var(--ui-gray-9);
 }
 
-:root[theme='dark'] {
+[theme='dark'] {
   --bg-card-color: var(--grey-1);
   --bg-main-color: var(--grey-2);
   --bg-body-color: var(--grey-2);
@@ -368,7 +366,6 @@
   --text-danger-color: var(--red-4);
   --text-code-color: var(--white-color);
   --text-navtabs-color: var(--white-color);
-  --text-form-section-title-color: var(--grey-8);
   --text-cm-default-color: var(--blue-10);
   --text-cm-meta-color: var(--white-color);
   --text-cm-string-color: var(--red-5);
@@ -401,7 +398,6 @@
   --text-small-select-color: var(--grey-7);
   --text-bootbox: var(--white-color);
   --text-button-group-color: var(--ui-white);
-  --text-button-dangerlight-color: var(--ui-error-7);
 
   --border-color: var(--grey-3);
   --border-widget-color: var(--grey-1);
@@ -468,7 +464,7 @@
   --text-button-group: var(--ui-gray-9);
 }
 
-:root[theme='highcontrast'] {
+[theme='highcontrast'] {
   --bg-card-color: var(--black-color);
   --bg-main-color: var(--black-color);
   --bg-body-color: var(--black-color);
@@ -552,7 +548,6 @@
   --text-blocklist-hover-color: var(--blue-11);
   --text-boxselector-wrapper-color: var(--white-color);
   --text-dashboard-item-color: var(--blue-12);
-  --text-form-section-title-color: var(--white-color);
   --text-muted-color: var(--white-color);
   --text-tooltip-color: var(--white-color);
   --text-blocklist-item-selected-color: var(--blue-9);
@@ -582,7 +577,6 @@
   --text-multiselect-item-color: var(--white-color);
   --text-pagination-span-color: var(--ui-white);
   --text-bootbox: var(--white-color);
-  --text-button-dangerlight-color: var(--ui-error-7);
   --text-pagination-span-hover-color: var(--ui-white);
 
   --border-color: var(--grey-55);

app/assets/css/vendor-override.css

@@ -318,7 +318,6 @@ json-tree .branch-preview {
 }
 
 input,
-button,
 select,
 textarea {
   background: var(--text-input-textarea);
@@ -410,10 +409,6 @@ input:-webkit-autofill {
   color: var(--white-color) !important;
 }
 
-.btn-danger:hover {
-  color: var(--white-color);
-}
-
 .btn-success:hover {
   color: var(--white-color);
 }