update hex colors in style guide

Quansight-Labs · Jan 3, 2024 · 60f8917 · 60f8917
1 parent 7a3cdc1
commit 60f8917
Showing 1 changed file with 41 additions and 49 deletions.
diff --git a/src/pages/style-guide.mdx b/src/pages/style-guide.mdx
@@ -57,17 +57,17 @@ Whether you're a part of our team, a collaborator, or an external partner, this
   <div className="row margin-bottom--md">
     <div className="col">
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF3664" }}></div>
-        <div className="color-text">#FF3664</div>
+        <div className="color" style={{ backgroundColor: "#00695c" }}></div>
+        <div className="color-text">#00695c</div>
       </div>
       <div className="color-container">
         <div className="color-text">
           <h1>+</h1>
         </div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF4B2B" }}></div>
-        <div className="color-text">#FF4B2B</div>
+        <div className="color" style={{ backgroundColor: "#26a69a" }}></div>
+        <div className="color-text">#26a69a</div>
       </div>
       <div className="color-container">
         <div className="color-text">
@@ -76,7 +76,7 @@ Whether you're a part of our team, a collaborator, or an external partner, this
       </div>
       <div className="color-container">
         <div className="color-gradient"></div>
-        <div className="color-text">(60deg, #FF3664 0%, #FF4B2B 100%)</div>
+        <div className="color-text">(60deg, #00695c 20%, #26a69a 80%)</div>
       </div>
     </div>
   </div>
@@ -124,8 +124,8 @@ Whether you're a part of our team, a collaborator, or an external partner, this
     </div>
     <div className="col">
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#B34400" }}></div>
-        <div className="color-text">#B34400</div>
+        <div className="color" style={{ backgroundColor: "#008478" }}></div>
+        <div className="color-text">#008478</div>
       </div>
       <div className="color-container">
         <div
@@ -145,32 +145,28 @@ Whether you're a part of our team, a collaborator, or an external partner, this
     </div>
     <div className="col">
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#E95800" }}></div>
-        <div className="color-text">#E95800</div>
+        <div className="color" style={{ backgroundColor: "#b2dfdb" }}></div>
+        <div className="color-text">#b2dfdb</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#CE4E00" }}></div>
-        <div className="color-text">#CE4E00</div>
+        <div className="color" style={{ backgroundColor: "#80cbc4" }}></div>
+        <div className="color-text">#80cbc4</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#C54B00" }}></div>
-        <div className="color-text">#C54B00</div>
+        <div className="color" style={{ backgroundColor: "#26a69a" }}></div>
+        <div className="color-text">#26a69a</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#B34400" }}></div>
-        <div className="color-text">#B34400</div>
+        <div className="color" style={{ backgroundColor: "#007466" }}></div>
+        <div className="color-text">#007466</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#A13D00" }}></div>
-        <div className="color-text">#A13D00</div>
+        <div className="color" style={{ backgroundColor: "#00695c" }}></div>
+        <div className="color-text">#00695c</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#983A00" }}></div>
-        <div className="color-text">#983A00</div>
-      </div>
-      <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#7D3000" }}></div>
-        <div className="color-text ">#7D3000</div>
+        <div className="color" style={{ backgroundColor: "#004d40" }}></div>
+        <div className="color-text">#004d40</div>
       </div>
     </div>
   </div>
@@ -187,8 +183,8 @@ Whether you're a part of our team, a collaborator, or an external partner, this
     </div>
     <div className="col">
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF5501" }}></div>
-        <div className="color-text">#FF5501</div>
+        <div className="color" style={{ backgroundColor: "#4db6ac" }}></div>
+        <div className="color-text">#4db6ac</div>
       </div>
       <div className="color-container">
         <div
@@ -208,32 +204,28 @@ Whether you're a part of our team, a collaborator, or an external partner, this
     </div>
     <div className="col">
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF884E" }}></div>
-        <div className="color-text">#FF884E</div>
-      </div>
-      <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF6F27" }}></div>
-        <div className="color-text">#FF6F27</div>
+        <div className="color" style={{ backgroundColor: "#e0f2f1" }}></div>
+        <div className="color-text">#e0f2f1</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF661B" }}></div>
-        <div className="color-text">#FF661B</div>
+        <div className="color" style={{ backgroundColor: "#b2dfdb" }}></div>
+        <div className="color-text">#b2dfdb</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF5501" }}></div>
-        <div className="color-text">#FF5501</div>
+        <div className="color" style={{ backgroundColor: "#80cbc4" }}></div>
+        <div className="color-text">#80cbc4</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#E64C00" }}></div>
-        <div className="color-text">#E64C00</div>
+        <div className="color" style={{ backgroundColor: "#009688" }}></div>
+        <div className="color-text">#009688</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#DA4800" }}></div>
-        <div className="color-text">#DA4800</div>
+        <div className="color" style={{ backgroundColor: "#00897b" }}></div>
+        <div className="color-text">#00897b</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#B33B00" }}></div>
-        <div className="color-text">#B33B00</div>
+        <div className="color" style={{ backgroundColor: "#00796b" }}></div>
+        <div className="color-text">#00796b</div>
       </div>
     </div>
   </div>
@@ -250,23 +242,23 @@ Whether you're a part of our team, a collaborator, or an external partner, this
     </div>
     <div className="col">
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#01C3E3" }}></div>
-        <div className="color-text">#01C3E3</div>
+        <div className="color" style={{ backgroundColor: "#1976d2" }}></div>
+        <div className="color-text">#1976d2</div>
         <div className="color-text">Information</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#00CD66" }}></div>
-        <div className="color-text">#00CD66</div>
+        <div className="color" style={{ backgroundColor: "#388e3c" }}></div>
+        <div className="color-text">#388e3c</div>
         <div className="color-text">Success</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF8C00" }}></div>
-        <div className="color-text">#FF8C00</div>
+        <div className="color" style={{ backgroundColor: "#ef6c00" }}></div>
+        <div className="color-text">#ef6c00</div>
         <div className="color-text">Warning</div>
       </div>
       <div className="color-container">
-        <div className="color" style={{ backgroundColor: "#FF4649" }}></div>
-        <div className="color-text">#FF4649</div>
+        <div className="color" style={{ backgroundColor: "#d84315" }}></div>
+        <div className="color-text">#d84315</div>
         <div className="color-text">Danger</div>
       </div>
     </div>