Display: Add text style to combine with custom colors in buttons and boxes - refs BT#19044

assets/css/app.scss

@@ -58,19 +58,23 @@
   }
 
   .btn-primary {
-    @apply text-white bg-ch-primary hover:bg-ch-primary-dark focus:ring-ch-primary-light;
+    @apply text-ch-text-primary bg-ch-primary hover:bg-ch-primary-dark focus:ring-ch-primary-light;
+  }
+
+  .btn-secondary {
+    @apply text-ch-text-secondary bg-ch-secondary hover:bg-ch-secondary-dark focus:ring-ch-secondary-light;
   }
 
   .btn-warning {
-    @apply text-white bg-ch-warning hover:bg-ch-warning-dark focus:bg-ch-warning-light;
+    @apply text-ch-text-warning bg-ch-warning hover:bg-ch-warning-dark focus:bg-ch-warning-light;
   }
 
   .btn-success {
-    @apply text-white bg-ch-success hover:bg-ch-success-dark focus:bg-ch-success-light;
+    @apply text-ch-text-success bg-ch-success hover:bg-ch-success-dark focus:bg-ch-success-light;
   }
 
   .btn-danger {
-    @apply text-white bg-ch-error hover:bg-ch-error-dark focus:bg-ch-error-light;
+    @apply text-ch-text-error bg-ch-error hover:bg-ch-error-dark focus:bg-ch-error-light;
   }
 
   // Buttons with icons.
@@ -158,19 +162,19 @@
   }
 
   .alert-info {
-    @apply text-white bg-ch-info;
+    @apply text-ch-text-info bg-ch-info;
   }
 
   .alert-warning {
-    @apply text-gray-900 bg-ch-warning;
+    @apply text-ch-text-warning bg-ch-warning;
   }
 
   .alert-success {
-    @apply text-gray-900 bg-ch-success;
+    @apply text-ch-text-success bg-ch-success;
   }
 
   .alert-danger {
-    @apply text-white bg-ch-error;
+    @apply text-ch-text-error bg-ch-error;
   }
 
   // Tabs
@@ -222,6 +226,12 @@
     appearance: auto !important;
   }
 
+  // Special
+
+  .badge {
+    @apply border-ch-text rounded-sm p-1;
+  }
+
   // Learning paths menu brought in to use primary/secondary colors
   .scorm_highlight .item {
     background: url("../../public/img/scorm/scorm_highlight.png") no-repeat 10px center !important;

tailwind.config.js

@@ -17,6 +17,15 @@ module.exports = {
           'dark': '#570563', //default to '#ea5300',
           'light': '#772583', //default to '#ff7913',
         },
+        'ch-text': {
+          DEFAULT: '#111827',
+          'primary': '#fff',
+          'secondary': '#fff',
+          'warning': '#111827',
+          'success': '#fff',
+          'error': '#fff',
+          'info': '#fff',
+        },
         'ch-support-1': 'rgba(46, 117, 163, 0.08)',
         'ch-support-2': '#f5f8fa',
         'ch-support-3': 'rgba(46, 117, 163, 0.5)',