Add alert colors to variables.css and replace hardcoded colors in Lux…

…Alert.vue
pulibrary · Dec 4, 2024 · 4b9e03a · 4b9e03a
1 parent e793dbd
commit 4b9e03a
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/docs/design_tokens.md b/docs/design_tokens.md
@@ -51,6 +51,17 @@
 |<div class="swatch" style="background-color: #E77500;"></div>|<pre>--color-princeton-orange-50</pre>|#E77500;|
 |<div class="swatch" style="background-color: #FCF1E5;"></div>|<pre>--color-princeton-orange-10</pre>|#FCF1E5;|
 |<div class="swatch" style="background-color: #121212;"></div>|<pre>--color-gray-100</pre>|#121212;|
+|<div class="swatch" style="background-color: rgb(223, 240, 216);"></div>|<pre>--color-light-pistachio-green</pre>|rgb(223, 240, 216);|
+|<div class="swatch" style="background-color: rgb(208, 233, 198);"></div>|<pre>--color-pistachio-green</pre>|rgb(208, 233, 198);|
+|<div class="swatch" style="background-color: rgb(60, 118, 61);"></div>|<pre>--color-forest-green</pre>|rgb(60, 118, 61);|
+|<div class="swatch" style="background-color: rgb(242, 222, 222);"></div>|<pre>--color-light-pink</pre>|rgb(242, 222, 222);|
+|<div class="swatch" style="background-color: rgb(235, 204, 204);"></div>|<pre>--color-dusty-pink</pre>|rgb(235, 204, 204);|
+|<div class="swatch" style="background-color: rgb(169, 68, 66);"></div>|<pre>--color-brick-red</pre>|rgb(169, 68, 66);|
+|<div class="swatch" style="background-color: rgb(252, 248, 227);"></div>|<pre>--color-light-sand-yellow</pre>|rgb(252, 248, 227);|
+|<div class="swatch" style="background-color: rgb(250, 242, 204);"></div>|<pre>--color-sand-yellow</pre>|rgb(250, 242, 204);|
+|<div class="swatch" style="background-color: rgb(138, 109, 59);"></div>|<pre>--color-golden-brown</pre>|rgb(138, 109, 59);|
+|<div class="swatch" style="background-color: rgb(217, 237, 247);"></div>|<pre>--color-light-blue</pre>|rgb(217, 237, 247);|
+|<div class="swatch" style="background-color: rgb(188, 223, 241);"></div>|<pre>--color-sky-blue</pre>|rgb(188, 223, 241);|
 
 ## Font sizes
 

diff --git a/src/assets/styles/variables.css b/src/assets/styles/variables.css
@@ -32,6 +32,17 @@
   --color-princeton-orange-50: #E77500;
   --color-princeton-orange-10: #FCF1E5;
   --color-gray-100: #121212;
+  --color-light-pistachio-green: rgb(223, 240, 216);
+  --color-pistachio-green: rgb(208, 233, 198);
+  --color-forest-green: rgb(60, 118, 61);
+  --color-light-pink: rgb(242, 222, 222);
+  --color-dusty-pink: rgb(235, 204, 204);
+  --color-brick-red: rgb(169, 68, 66);
+  --color-light-sand-yellow: rgb(252, 248, 227);
+  --color-sand-yellow: rgb(250, 242, 204);
+  --color-golden-brown: rgb(138, 109, 59);
+  --color-light-blue: rgb(217, 237, 247);
+  --color-sky-blue: rgb(188, 223, 241);
   --font-size-large-min: 1.125em;
   --font-size-base-max: 1.125em;
   --font-size-x-large: 36px;

diff --git a/src/components/LuxAlert.vue b/src/components/LuxAlert.vue
@@ -160,24 +160,24 @@ export default {
   position: relative;
 }
 .lux-alert-success {
-  background-color: #dff0d8;
-  border-color: #d0e9c6;
-  color: #3c763d;
+  background-color: var(--color-light-pistachio-green);
+  border-color: var(--color-pistachio-green);
+  color: var(--color-forest-green);
 }
 .lux-alert-error {
-  background-color: #f2dede;
-  border-color: #ebcccc;
-  color: #a94442;
+  background-color: var(--color-light-pink);
+  border-color: var(--color-dusty-pink);
+  color: var(--color-brick-red);
 }
 .lux-alert-warning {
-  background-color: #fcf8e3;
-  border-color: #faf2cc;
-  color: #8a6d3b;
+  background-color: var(--color-light-sand-yellow);
+  border-color: var(--color-sand-yellow);
+  color: var(--color-golden-brown);
 }
 .lux-alert-info {
-  background-color: #d9edf7;
-  border-color: #bcdff1;
-  color: #31708f;
+  background-color: var(--color-light-blue);
+  border-color: var(--color-sky-blue);
+  color: var(--color-bleu-de-france);
 }
 
 .lux-alert-dismissible > span {