Merge pull request #880 from PrefectHQ/style-messages

Style PMessage
PrefectHQ · Aug 7, 2023 · 92d9f8a · 92d9f8a
2 parents 8f6e071 + 1e56362
commit 92d9f8a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/src/components/Message/PMessage.vue b/src/components/Message/PMessage.vue
@@ -92,23 +92,27 @@
   flex-grow
 }
 
-.p-message--info { @apply
-  bg-primary-100
-  text-primary-800
+.p-message--info {
+  background-color: var(--p-color-message-info-bg);
+  color: var(--p-color-message-info-text);
 }
 
-.p-message--warning { @apply
-  bg-orange-100
-  text-orange-800
+.p-message--warning {
+  background-color: var(--p-color-message-warning-bg);
+  color: var(--p-color-message-warning-text);
 }
 
-.p-message--error { @apply
-  bg-danger-100
-  text-danger-900
+.p-message--error {
+  background-color: var(--p-color-message-error-bg);
+  color: var(--p-color-message-error-text);
 }
 
-.p-message--success { @apply
-  bg-success-100
-  text-success-900
+.p-message--success {
+  background-color: var(--p-color-message-success-bg);
+  color: var(--p-color-message-success-text);
+}
+
+.p-message__dismiss { @apply
+  text-current
 }
 </style>
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -263,6 +263,19 @@
     --p-color-button-selected-border: transparent;
     --p-color-button-selected-text: var(--p-color-text-default);
 
+    /* Message */
+    --p-color-message-info-bg: #304A76;
+    --p-color-message-info-text: var(--p-color-text-default);
+
+    --p-color-message-warning-bg: #F5A50A;
+    --p-color-message-warning-text: var(--p-color-text-inverse);
+
+    --p-color-message-error-bg: var(--p-color-sentiment-negative);
+    --p-color-message-error-text: var(--p-color-text-default);
+
+    --p-color-message-success-bg: var(--p-color-sentiment-positive);
+    --p-color-message-success-text: var(--p-color-text-default);
+
     /* Legacy Tokens – To be removed before releasing version 2.0 */
     --foreground: var(--200);
     --background: var(--800);
@@ -455,6 +468,19 @@
     --p-color-button-selected-border: transparent;
     --p-color-button-selected-text: var(--p-color-text-default);
 
+    /* Message */
+    --p-color-message-info-bg: #B5D0FF;
+    --p-color-message-info-text: var(--p-color-text-default);
+
+    --p-color-message-warning-bg: #F5A50A;
+    --p-color-message-warning-text: var(--p-color-text-default);
+
+    --p-color-message-error-bg: var(--p-color-sentiment-negative);
+    --p-color-message-error-text: var(--p-color-text-inverse);
+
+    --p-color-message-success-bg: var(--p-color-sentiment-positive);
+    --p-color-message-success-text: var(--p-color-text-inverse);
+
     /* Legacy Tokens – To be removed before releasing version 2.0 */
     --foreground: var(--800);
     --background: var(--white);