Merge pull request #72 from fleetbase/dev-v0.2.31

improved color styling for badges and info box buttons
fleetbase · Oct 1, 2024 · bf51899 · bf51899
2 parents bcfa0cd + 6b7a617
commit bf51899
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 15 deletions.
diff --git a/addon/styles/components/badge.css b/addon/styles/components/badge.css
@@ -17,7 +17,7 @@
 
 .status-badge.default-status-badge > span,
 .status-badge > span {
-    @apply bg-gray-800 border-gray-600 text-gray-100;
+    @apply bg-gray-800 border-gray-600 text-gray-100 border border-solid;
 }
 
 .status-badge.default-status-badge > span svg,
@@ -30,6 +30,7 @@
 }
 
 .status-badge[class*='2'] > span,
+.status-badge.green-status-badge > span,
 .status-badge.published-status-badge > span,
 .status-badge.live-status-badge > span,
 .status-badge.online-status-badge > span,
@@ -41,10 +42,11 @@
 .status-badge.operational-status-badge > span,
 .status-badge.active-status-badge > span,
 .status-badge.completed-status-badge > span {
-    @apply bg-green-800 border-green-600 text-green-100;
+    @apply bg-green-800 border-green-700 text-green-100;
 }
 
 .status-badge[class*='2'] > span svg,
+.status-badge.green-status-badge > span svg,
 .status-badge.published-status-badge > span svg,
 .status-badge.live-status-badge > span svg,
 .status-badge.online-status-badge > span svg,
@@ -59,18 +61,68 @@
     @apply text-green-300;
 }
 
+.status-badge.sky-status-badge > span {
+    @apply bg-sky-800 border-sky-700 text-sky-100;
+}
+
+.status-badge.sky-status-badge > span svg {
+    @apply text-sky-300;
+}
+
+.status-badge.emerald-status-badge > span {
+    @apply bg-emerald-800 border-emerald-700 text-emerald-100;
+}
+
+.status-badge.emerald-status-badge > span svg {
+    @apply text-emerald-300;
+}
+
+.status-badge.cyan-status-badge > span {
+    @apply bg-cyan-800 border-cyan-700 text-cyan-100;
+}
+
+.status-badge.cyan-status-badge > span svg {
+    @apply text-cyan-300;
+}
+
+.status-badge.violet-status-badge > span {
+    @apply bg-violet-800 border-violet-700 text-violet-100;
+}
+
+.status-badge.cyan-status-badge > span svg {
+    @apply text-violet-300;
+}
+
+.status-badge.slate-status-badge > span {
+    @apply bg-slate-800 border-slate-700 text-slate-100;
+}
+
+.status-badge.slate-status-badge > span svg {
+    @apply text-slate-300;
+}
+
+.status-badge.gray-status-badge > span {
+    @apply bg-gray-800 border-gray-700 text-gray-100;
+}
+
+.status-badge.gray-status-badge > span svg {
+    @apply text-gray-300;
+}
+
 .status-badge[class*='5'] > span,
+.status-badge.red-status-badge > span,
 .status-badge.high-status-badge > span,
 .status-badge.rejected-status-badge > span,
 .status-badge.critical-status-badge > span,
 .status-badge.disabled-status-badge > span,
 .status-badge.inactive-status-badge > span,
 .status-badge.failed-status-badge > span,
 .status-badge.canceled-status-badge > span {
-    @apply bg-red-800 border-red-600 text-red-100;
+    @apply bg-red-800 border-red-700 text-red-100;
 }
 
 .status-badge[class*='5'] > span svg,
+.status-badge.red-status-badge > span svg,
 .status-badge.high-status-badge > span svg,
 .status-badge.rejected-status-badge > span svg,
 .status-badge.critical-status-badge > span svg,
@@ -83,7 +135,9 @@
 }
 
 .status-badge[class*='4'] > span,
-.status-badge.offline-status-badge > span,
+.status-badge.yellow-status-badge > span,
+.status-badge.enroute-status-badge > span,
+.status-badge.driver-enroute-status-badge > span .status-badge.offline-status-badge > span,
 .status-badge.pending-review-status-badge > span,
 .status-badge.awaiting-review-status-badge > span,
 .status-badge.scheduled-maintenance-status-badge > span,
@@ -94,10 +148,13 @@
 .status-badge.trialing-status-badge > span,
 .status-badge.grace-period-status-badge > span,
 .status-badge.pending-status-badge > span {
-    @apply bg-yellow-800 border-yellow-600 text-yellow-100;
+    @apply bg-yellow-700 border-yellow-700 text-yellow-100;
 }
 
 .status-badge[class*='4'] > span svg,
+.status-badge.yellow-status-badge > span svg,
+.status-badge.enroute-status-badge > span svg,
+.status-badge.driver-enroute-status-badge > span svg,
 .status-badge.offline-status-badge > span svg,
 .status-badge.pending-review-status-badge > span svg,
 .status-badge.awaiting-review-status-badge > span svg,
@@ -116,7 +173,7 @@
 .status-badge.operational-suggestion-status-badge > span,
 .status-badge.dispatched-status-badge > span,
 .status-badge.assigned-status-badge > span {
-    @apply bg-indigo-800 border-indigo-600 text-indigo-100;
+    @apply bg-indigo-800 border-indigo-700 text-indigo-100;
 }
 
 .status-badge.indigo-status-badge > span svg,
@@ -126,25 +183,29 @@
     @apply text-indigo-300;
 }
 
-.status-badge.medium-status-badge > span,
-.status-badge.enroute-status-badge > span,
-.status-badge.driver-enroute-status-badge > span {
-    @apply bg-orange-800 border-orange-600 text-orange-100;
+.status-badge.orange-status-badge > span,
+.status-badge.alerted-status-badge > span,
+.status-badge.medium-status-badge > span {
+    @apply bg-orange-700 border-orange-700 text-orange-100;
 }
 
-.status-badge.medium-status-badge > span svg,
-.status-badge.enroute-status-badge > span svg,
-.status-badge.driver-enroute-status-badge > span svg {
+.status-badge.orange-status-badge > span svg,
+.status-badge.alerted-status-badge > span svg,
+.status-badge.medium-status-badge > span svg {
     @apply text-orange-300;
 }
 
+.status-badge.blue-status-badge > span,
+.status-badge.created-status-badge > span,
 .status-badge.low-status-badge > span,
 .status-badge.approved-status-badge > span,
 .status-badge.info-status-badge > span,
 .status-badge.in-progress-status-badge > span {
-    @apply bg-blue-800 border-blue-600 text-blue-100;
+    @apply bg-blue-800 border-blue-700 text-blue-100;
 }
 
+.status-badge.blue-status-badge > span svg,
+.status-badge.created-status-badge > span svg,
 .status-badge.loq-status-badge > span svg,
 .status-badge.approved-status-badge > span svg,
 .status-badge.info-status-badge > span svg,

diff --git a/addon/styles/layout/legacy.css b/addon/styles/layout/legacy.css
@@ -569,6 +569,28 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
     line-height: 1.25rem;
 }
 
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > .btn,
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn,
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+.ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn {
+    outline: none;
+    transition: all ease-in-out 125ms;
+    @apply border border-blue-900 bg-blue-600 text-blue-100;
+}
+
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > .btn:hover,
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn:hover,
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary:hover,
+body[data-theme='dark'] .ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default:hover,
+.ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary:hover,
+.ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default:hover,
+.ui-input-info-block > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn:hover {
+    opacity: 0.7;
+}
+
 .ui-input-info-block.lg {
     @apply px-4 py-3 text-lg;
 }
@@ -606,18 +628,66 @@ body[data-theme='dark'] .radio-group-condensed .radio-group-item input[type='rad
     @apply bg-green-800 border-green-600 text-green-100;
 }
 
+body[data-theme='dark'] .ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > .btn,
+body[data-theme='dark'] .ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn,
+body[data-theme='dark'] .ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+body[data-theme='dark'] .ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+.ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.success > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn {
+    outline: none;
+    transition: all ease-in-out 125ms;
+    @apply border border-green-900 bg-green-600 text-green-100;
+}
+
 .ui-input-info-block.warning {
     @apply bg-yellow-800 border-yellow-600 text-yellow-100;
 }
 
+body[data-theme='dark'] .ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > .btn,
+body[data-theme='dark'] .ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn,
+body[data-theme='dark'] .ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+body[data-theme='dark'] .ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+.ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.warning > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn {
+    outline: none;
+    transition: all ease-in-out 125ms;
+    @apply border border-yellow-900 bg-yellow-600 text-yellow-100;
+}
+
 .ui-input-info-block.danger {
     @apply bg-red-800 border-red-600 text-red-100;
 }
 
+body[data-theme='dark'] .ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > .btn,
+body[data-theme='dark'] .ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn,
+body[data-theme='dark'] .ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+body[data-theme='dark'] .ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+.ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.danger > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn {
+    outline: none;
+    transition: all ease-in-out 125ms;
+    @apply border border-red-900 bg-red-600 text-red-100;
+}
+
 .ui-input-info-block.magic {
     @apply bg-indigo-800 border-indigo-600 text-indigo-100;
 }
 
+body[data-theme='dark'] .ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > .btn,
+body[data-theme='dark'] .ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn,
+body[data-theme='dark'] .ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+body[data-theme='dark'] .ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-primary,
+.ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn.btn-default,
+.ui-input-info-block.magic > .ui-input-info-block-inner > .ui-input-info-block-yield-container .btn-wrapper > button.btn {
+    outline: none;
+    transition: all ease-in-out 125ms;
+    @apply border border-indigo-900 bg-indigo-600 text-indigo-100;
+}
+
 .ui-input-info-block .ui-input-info-block-text,
 .ui-input-info-block .ui-input-info-block-text span,
 .ui-input-info-block p {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.30",
+    "version": "0.2.31",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",