update hex colors in style guide (#19)

* update hex colors in style guide * add info about css sources
Quansight-Labs · Jan 3, 2024 · 02f2800 · 02f2800
1 parent 7a3cdc1
commit 02f2800
Showing 1 changed file with 51 additions and 53 deletions.
diff --git a/src/pages/style-guide.mdx b/src/pages/style-guide.mdx
@@ -6,7 +6,7 @@ import TabItem from "@theme/TabItem";
 
 # conda-forge Style guide
 
-We're excited to introduce the conda-forge brand guide – your go-to resource for all things conda-forge branding. This document sets the stage for how we want to showcase the conda-forge brand consistently and accurately.
+We're excited to introduce the conda-forge brand guide: your go-to resource for all things conda-forge branding. This document sets the stage for how we want to showcase the conda-forge brand consistently and accurately.
 
 Whether you're a part of our team, a collaborator, or an external partner, this guide is here to help you represent conda-forge in the best possible way. We believe that by following these guidelines, we can keep our brand's values at the forefront and maintain effective communication with everyone. Thanks for being a part of our journey!
 
@@ -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>
@@ -368,9 +360,9 @@ env = Environment(loader=loader)
 ### Code block with a title
 
 ```python title="/src/conf.py"
-project = u'conda-forge'
-copyright = u'2016-%s, conda-forge' % datetime.datetime.now().strftime("%Y")
-author = u'conda-forge'
+project = 'conda-forge'
+copyright = '2016-%s, conda-forge' % datetime.datetime.now().strftime("%Y")
+author = 'conda-forge'
 ```
 
 ---
@@ -480,3 +472,9 @@ Additional Figma file for colors and components
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Fc7CHCElI13imGMWzTct1ss%2FConda-forge-website-redesign%3Ftype%3Ddesign%26node-id%3D10%253A831%26mode%3Ddesign%26t%3Do71HVpua0grT8shW-1"
   allowfullscreen
 ></iframe>
+
+---
+
+## Sources
+
+Most CSS redefinitions are done in `src/css/custom.css`. Check for `--ifm-*` variables in the `:root` nodes.