Fix bug I introduced in my last commits. (#903)

* Improve colors, as well as the infra used for setting colors.

* Fix circle and kb colors.

* Fix some color bugs I introduced, and clean up all colors names.

Author: sfc-gh-tteixeira

components/blocks/iconHeader.js

@@ -6,34 +6,44 @@ const IconHeader = ({ icon, rotate, title, background, color }) => {
   return (
     <section className={classNames(styles.Container)}>
       <i
-        className={classNames(
-          styles.Icon,
-          background === "violet-70"
-            ? styles.VioletBackground
-            : background === "l-blue-70"
-            ? styles.LightBlueBackground
-            : styles.OrangeBackground
-        )}
+        className={classNames(styles.Icon, BG_CLASS[background])}
         style={{
           transform: `rotate(${rotate}deg)`,
         }}
       >
         {icon}
       </i>
-      <h4
-        className={classNames(
-          styles.Title,
-          background === "violet-70"
-            ? styles.VioletText
-            : background === "l-blue-70"
-            ? styles.LightBlueText
-            : styles.OrangeText
-        )}
-      >
+      <h4 className={classNames(styles.Title, FG_CLASS[background])}>
         {title}
       </h4>
     </section>
   );
 };
 
+const BG_CLASS = {
+  "red-70": styles.RedBackground,
+  "orange-70": styles.OrangeBackground,
+  "yellow-70": styles.YellowBackground,
+  "green-70": styles.GreenBackground,
+  "acqua-70": styles.AcquaBackground,
+  "lightBlue-70": styles.LightBlueBackground,
+  "darkBlue-70": styles.DarkBlueBackground,
+  "indigo-70": styles.IndigoBackground,
+  "gray-70": styles.GrayBackground,
+  unset: styles.TransparentBackground,
+};
+
+const FG_CLASS = {
+  "red-70": styles.RedForeground,
+  "orange-70": styles.OrangeForeground,
+  "yellow-70": styles.YellowForeground,
+  "green-70": styles.GreenForeground,
+  "acqua-70": styles.AcquaForeground,
+  "lightBlue-70": styles.LightBlueForeground,
+  "darkBlue-70": styles.DarkBlueForeground,
+  "indigo-70": styles.IndigoForeground,
+  "gray-70": styles.GrayForeground,
+  unset: styles.TransparentForeground,
+};
+
 export default IconHeader;

components/blocks/iconHeader.module.css

@@ -12,30 +12,70 @@
 }
 
 /* Color modifiers */
-.VioletBackground {
-  @apply bg-indigo-70;
+.RedBackground {
+  @apply bg-red-70;
 }
 
 .OrangeBackground {
   @apply bg-orange-70;
 }
 
+.YellowBackground {
+  @apply bg-yellow-70;
+}
+
+.GreenBackground {
+  @apply bg-green-70;
+}
+
+.AcquaBackground {
+  @apply bg-acqua-70;
+}
+
 .LightBlueBackground {
   @apply bg-lightBlue-70;
 }
 
-.VioletText {
-  @apply text-indigo-70 !important;
+.DarkBlueBackground {
+  @apply bg-darkBlue-70;
+}
+
+.IndigoBackground {
+  @apply bg-indigo-70;
+}
+
+.RedForeground {
+  @apply text-red-70 !important;
 }
 
-.OrangeText {
+.OrangeForeground {
   @apply text-orange-70 !important;
 }
 
-.LightBlueText {
+.YellowForeground {
+  @apply text-yellow-70 !important;
+}
+
+.GreenForeground {
+  @apply text-green-70 !important;
+}
+
+.AcquaForeground {
+  @apply text-acqua-70 !important;
+}
+
+.LightBlueForeground {
   @apply text-lightBlue-70 !important;
 }
 
-:global(.dark) .VioletText {
+.DarkBlueForeground {
+  @apply text-darkBlue-70 !important;
+}
+
+.IndigoForeground {
+  @apply text-indigo-70 !important;
+}
+
+:global(.dark) .IndigoText {
   @apply text-white !important;
 }

components/blocks/note.js

@@ -13,7 +13,7 @@ const Note = ({ children }) => {
         icon="push_pin"
         rotate="45"
         title="Note"
-        background="l-blue-70"
+        background="lightBlue-70"
         color="white"
       />
       {children}

components/blocks/tip.js

@@ -13,7 +13,7 @@ const Tip = ({ children }) => {
         icon="star"
         rotate="0"
         title="Tip"
-        background="violet-70"
+        background="indigo-70"
         color="white"
       />
       {children}

content/index.md

@@ -3,7 +3,7 @@ title: Welcome to Streamlit
 features:
   - title: Get started
     body: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    color: violet-70
+    color: indigo-70
     icon: arrow_forward
     url: /get-started
     image: ""
@@ -17,7 +17,7 @@ features:
   - title: Topic guides
     body: Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
       fugit, sed quia.
-    color: l-blue-70
+    color: lightBlue-70
     icon: description
     url:
       Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,

content/streamlit-cloud/get-started/index.md

@@ -15,18 +15,21 @@ First things first, you need to create your Streamlit Community Cloud account to
         title="Quickstart"
         text="Create your account and deploy an example app as fast as possible. Jump right into coding with GitHub Codespaces."
         link="/streamlit-community-cloud/get-started"
+        background="lightBlue-70"
     />
     <Tile
         icon="person"
         title="Create your account"
         text="See all the options and get complete explanations as you create your Streamlit Community Cloud account."
         link="/streamlit-community-cloud/get-started/create-your-account"
+        background="lightBlue-70"
     />
     <Tile
         icon="security"
         title="Trust and Security"
         text="Security first! If you want to read up on how we handle your data before you get started, we've got you covered."
         link="streamlit-community-cloud/get-started/trust-and-security"
+        background="lightBlue-70"
     />
 </TileContainer>
 

content/streamlit-cloud/index.md

@@ -13,42 +13,42 @@ If you haven't built your first Streamlit app yet, you can check out [Get starte
 
 <InlineCalloutContainer>
     <InlineCallout
-        color="l-blue-70"
+        color="lightBlue-70"
         icon="rocket_launch"
         bold="Quickstart"
         href="/streamlit-community-cloud/get-started"
     >Create your account and deploy an example app as fast as possible. Jump right into coding with GitHub Codespaces.
     </InlineCallout>
     <InlineCallout
-        color="l-blue-70"
+        color="lightBlue-70"
         icon="arrow_forward"
         bold="Get started"
         href="/streamlit-community-cloud/get-started"
     >Learn about Streamlit Community Cloud accounts and how to create one.
     </InlineCallout>
     <InlineCallout
-        color="l-blue-70"
+        color="lightBlue-70"
         icon="flight_takeoff"
         bold="Deploy your app"
         href="/streamlit-community-cloud/deploy-your-app"
     >A step-by-step guide on how to get your app deployed.
     </InlineCallout>
     <InlineCallout
-        color="l-blue-70"
+        color="lightBlue-70"
         icon="share"
         bold="Share your app"
         href="/streamlit-community-cloud/share-your-app"
     >Share or embed your app.
     </InlineCallout>
     <InlineCallout
-        color="l-blue-70"
+        color="lightBlue-70"
         icon="settings"
         bold="Manage your app"
         href="/streamlit-community-cloud/manage-your-app"
     >Access logs, reboot apps, set favorites, and more. Jump into a GitHub Codespace to edit your app in the cloud.
     </InlineCallout>
     <InlineCallout
-        color="l-blue-70"
+        color="lightBlue-70"
         icon="manage_accounts"
         bold="Manage your account"
         href="/streamlit-community-cloud/manage-your-account"

pages/style-guide.js

@@ -151,11 +151,7 @@ ls -l myscript.sh`}
           </ArrowLinkContainer>
         </Component>
         <Component label="Note Block">
-          <Note
-            background="l-blue-10"
-            color="gray-90"
-            dark={{ background: "dark-black", color: "white" }}
-          >
+          <Note>
             <p>
               For this guide we’re using small amounts of data so that we can
               move quickly. You can check out our <Link href="/">Tutorial</Link>{" "}
@@ -166,9 +162,9 @@ ls -l myscript.sh`}
         </Component>
         <Component label="Note Block (with code embed option)">
           <Tip
-            background="violet-10"
+            background="indigo-10"
             color="gray-90"
-            dark={{ background: "dark-violet", color: "white" }}
+            dark={{ background: "dark-indigo", color: "white" }}
           >
             <p>
               Did you know you can also pass a URL to streamlit run? This is
@@ -217,7 +213,7 @@ https://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/streaml
           <TilesContainer>
             <Tile
               size="third"
-              background="l-blue-70"
+              background="lightBlue-70"
               color="white"
               icon="downloading"
               title="Install Streamlit"
@@ -397,7 +393,7 @@ st.altair_chart(chart_data)`}
         <Component label="Inline callout">
           <InlineCalloutContainer>
             <InlineCallout
-              color="violet-70"
+              color="indigo-70"
               icon="school"
               bold="Tutorials"
               href="/"
@@ -407,7 +403,7 @@ st.altair_chart(chart_data)`}
               Streamlit.
             </InlineCallout>
             <InlineCallout
-              color="violet-70"
+              color="indigo-70"
               icon="school"
               bold="Tutorials"
               href="/"

public/admin/config.yml

@@ -37,14 +37,14 @@ collections:
                   widget: select,
                   options:
                     [
-                      "violet-70",
+                      "indigo-70",
                       "orange-70",
-                      "blue-70",
+                      "darkBlue-70",
                       "red-70",
                       "yellow-70",
                       "green-70",
-                      "b-g-70",
-                      "l-blue-70",
+                      "acqua-70",
+                      "lightBlue-70",
                       "gray-70",
                     ],
                 }
@@ -138,14 +138,14 @@ collections:
                   widget: select,
                   options:
                     [
-                      "violet-70",
+                      "indigo-70",
                       "orange-70",
-                      "blue-70",
+                      "darkBlue-70",
                       "red-70",
                       "yellow-70",
                       "green-70",
-                      "b-g-70",
-                      "l-blue-70",
+                      "acqua-70",
+                      "lightBlue-70",
                       "gray-70",
                     ],
                   required: false,