Merge pull request #27 from RLKRo/streamlit-themes

Change theme options based on streamlit theme
blackary · Dec 8, 2023 · 3dbe6cf · 3dbe6cf
2 parents 6e94d8d + a6b5a99
commit 3dbe6cf
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 62 deletions.
diff --git a/setup.py b/setup.py
@@ -7,7 +7,7 @@
 
 setuptools.setup(
     name="streamlit-keyup",
-    version="0.2.1",
+    version="0.2.2",
     author="Zachary Blackwood",
     author_email="[email protected]",
     description="Text input that renders on keyup",

diff --git a/src/st_keyup/frontend/main.js b/src/st_keyup/frontend/main.js
@@ -19,6 +19,17 @@ const debounce = (callback, wait) => {
  */
 function onRender(event) {
   // Get the RenderData from the event
+
+  // This is called on every render to allow changing themes via settings
+  const root = document.getElementById("root")
+
+  root.style.setProperty("--base", event.detail.theme.base)
+  root.style.setProperty("--primary-color", event.detail.theme.primaryColor)
+  root.style.setProperty("--background-color", event.detail.theme.backgroundColor)
+  root.style.setProperty("--secondary-background-color", event.detail.theme.secondaryBackgroundColor)
+  root.style.setProperty("--text-color", event.detail.theme.textColor)
+  root.style.setProperty("--font", event.detail.theme.font)
+
   if (!window.rendered) {
     const {
       label,
@@ -33,7 +44,6 @@ function onRender(event) {
 
     const input = document.getElementById("input_box");
     const label_el = document.getElementById("label")
-    const root = document.getElementById("root")
 
     if (label_el) {
       label_el.innerText = label

diff --git a/src/st_keyup/frontend/style.css b/src/st_keyup/frontend/style.css
@@ -1,13 +1,13 @@
 label {
-  font-family: "Source Sans Pro", sans-serif;
+  font-family: var(--font);
   font-weight: 400;
   line-height: 1.6;
   text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--text-color);
   -webkit-font-smoothing: auto;
   box-sizing: border-box;
   font-size: 13px;
-  color: rgb(49 51 63 / 95%);
+  color: var(--text-color);
   margin-bottom: 0.5rem;
   height: auto;
   min-height: 1.5rem;
@@ -22,64 +22,46 @@ label {
 }
 .input {
   text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--text-color);
   -webkit-font-smoothing: auto;
-  color: rgba(49, 51, 63, 0.8);
-  font-family: "Source Sans Pro", sans-serif;
+  color: var(--text-color);
+  font-family: var(--font);
   font-size: 13px;
   font-weight: normal;
   line-height: 1.6;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-radius: 0.45rem;
   transition-duration: 200ms;
   display: flex;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
-  border-left-width: 2px;
-  border-right-width: 2px;
-  border-top-width: 2px;
-  border-bottom-width: 2px;
-  border-left-style: solid;
-  border-right-style: solid;
-  border-top-style: solid;
-  border-bottom-style: solid;
+  border-width: 1px;
+  border-style: solid;
   transition-property: border;
   transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
-  border-left-color: rgb(240, 242, 246);
-  border-right-color: rgb(240, 242, 246);
-  border-top-color: rgb(240, 242, 246);
-  border-bottom-color: rgb(240, 242, 246);
-  background-color: rgb(240, 242, 246);
+  border-color: var(--background-color);
+  background-color: var(--secondary-background-color);
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
-  top: 33px;
+  bottom: 2px;
+  top: 28px;
 }
 input {
   text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--text-color);
   -webkit-font-smoothing: auto;
   overflow: visible;
-  font-family: "Source Sans Pro", sans-serif;
+  font-family: var(--font);
   font-size: 15px;
   font-weight: normal;
   line-height: 1.6;
   width: 100%;
   box-sizing: border-box;
-  color: rgba(49, 51, 63, 0.8);
+  color: var(--text-color);
   background-color: transparent;
-  border-left-width: 0px;
-  border-right-width: 0px;
-  border-top-width: 0px;
-  border-bottom-width: 0px;
-  border-left-style: none;
-  border-right-style: none;
-  border-top-style: none;
-  border-bottom-style: none;
+  border-width: 0px;
+  border-style: none;
   outline: none;
   max-width: 100%;
   cursor: text;
@@ -88,52 +70,40 @@ input {
   padding-bottom: 10px;
   padding-left: 14px;
   padding-right: 14px;
-  caret-color: rgb(49, 51, 63);
+  caret-color: var(--text-color);
   min-width: 0px;
 }
 .input:focus-within {
   text-size-adjust: 100%;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: var(--background-color);
   -webkit-font-smoothing: auto;
-  color: rgb(49, 51, 63);
-  font-family: "Source Sans Pro", sans-serif;
+  color: var(--text-color);
+  font-family: var(--font);
   font-size: 1rem;
   font-weight: normal;
   line-height: 1.6;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 0.25rem;
+  border-radius: 0.45rem;
   transition-duration: 200ms;
   display: flex;
   width: 100%;
   box-sizing: border-box;
   overflow: hidden;
-  border-left-width: 2px;
-  border-right-width: 2px;
-  border-top-width: 2px;
-  border-bottom-width: 2px;
-  border-left-style: solid;
-  border-right-style: solid;
-  border-top-style: solid;
-  border-bottom-style: solid;
+  border-width: 1px;
+  border-style: solid;
   transition-property: border;
   transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
-  background-color: rgb(240, 242, 246);
+  background-color: var(--secondary-background-color);
   padding-left: 0px;
   padding-right: 0px;
-  border-left-color: rgb(255, 75, 75);
-  border-right-color: rgb(255, 75, 75);
-  border-top-color: rgb(255, 75, 75);
-  border-bottom-color: rgb(255, 75, 75);
+  border-color: var(--primary-color);
 }
 .disabled label {
-  color: rgba(49, 51, 63, 0.4) !important;
+  color: var(--secondary-background-color) !important;
 }
 
 .disabled input {
   cursor: not-allowed;
-  color: rgba(49, 51, 63, 0.4) !important;
+  color: var(--secondary-background-color) !important;
 }
 
 .label-hidden label {

diff --git a/streamlit_app.py b/streamlit_app.py
@@ -3,7 +3,7 @@
 from st_keyup import st_keyup
 
 
-@st.experimental_singleton
+@st.cache_data
 def get_cities() -> pd.DataFrame:
     url = "https://raw.githubusercontent.com/grammakov/USA-cities-and-states/master/us_cities_states_counties.csv"
     return pd.read_csv(url, sep="|")