whitphx HF staff commited on
Commit
45961a5
1 Parent(s): 823bacf

Fix to sync the second color picker changes to the sliders

Browse files
Files changed (2) hide show
  1. app.py +45 -4
  2. fragments.py +0 -40
app.py CHANGED
@@ -71,10 +71,50 @@ def on_preset_color_selected():
71
  st.selectbox("Preset colors", key="preset_color", options=range(len(preset_colors)), format_func=lambda idx: preset_colors[idx][0], on_change=on_preset_color_selected)
72
 
73
 
74
- primary_color = fragments.color_picker('Primary color', key="primaryColor", default_color=default_color.primaryColor, l_only=True)
75
- text_color = fragments.color_picker('Text color', key="textColor", default_color=default_color.textColor, l_only=True)
76
- background_color = fragments.color_picker('Background color', key="backgroundColor", default_color=default_color.backgroundColor, l_only=True)
77
- secondary_background_color = fragments.color_picker('Secondary background color', key="secondaryBackgroundColor", default_color=default_color.secondaryBackgroundColor, l_only=True)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
 
79
 
80
  def parse_hex(rgb_hex_str: str) -> tuple[float, float, float]:
@@ -91,6 +131,7 @@ For the details about it, see some resources such as the [WCAG document](https:/
91
  def synced_color_picker(label: str, value: str, key: str):
92
  def on_change():
93
  st.session_state[key] = st.session_state[key + "2"]
 
94
  st.color_picker(label, value=value, key=key + "2", on_change=on_change)
95
 
96
  col1, col2, col3 = st.columns(3)
71
  st.selectbox("Preset colors", key="preset_color", options=range(len(preset_colors)), format_func=lambda idx: preset_colors[idx][0], on_change=on_preset_color_selected)
72
 
73
 
74
+ def sync_rgb_to_hls(key: str):
75
+ rgb = util.parse_hex(st.session_state[key])
76
+ hls = colorsys.rgb_to_hls(rgb[0], rgb[1], rgb[2])
77
+ st.session_state[f"{key}H"] = round(hls[0] * 360)
78
+ st.session_state[f"{key}L"] = round(hls[1] * 100)
79
+ st.session_state[f"{key}S"] = round(hls[2] * 100)
80
+
81
+
82
+ def sync_hls_to_rgb(key: str):
83
+ h = st.session_state[f"{key}H"]
84
+ l = st.session_state[f"{key}L"]
85
+ s = st.session_state[f"{key}S"]
86
+ r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
87
+ st.session_state[key] = f"#{round(r * 255):02x}{round(g * 255):02x}{round(b * 255):02x}"
88
+
89
+
90
+ def color_picker(label: str, key: str, default_color: str, l_only: bool) -> None:
91
+ col1, col2 = st.columns([1, 3])
92
+ with col1:
93
+ color = st.color_picker(label, key=key, on_change=sync_rgb_to_hls, kwargs={"key": key})
94
+ with col2:
95
+ r,g,b = util.parse_hex(default_color)
96
+ h,l,s = colorsys.rgb_to_hls(r,g,b)
97
+ if l_only:
98
+ if f"{key}H" not in st.session_state:
99
+ st.session_state[f"{key}H"] = round(h * 360)
100
+ else:
101
+ st.slider(f"H for {label}", key=f"{key}H", min_value=0, max_value=360, value=round(h * 360), format="%d°", label_visibility="collapsed", on_change=sync_hls_to_rgb, kwargs={"key": key})
102
+
103
+ st.slider(f"L for {label}", key=f"{key}L", min_value=0, max_value=100, value=round(l * 100), format="%d%%", label_visibility="collapsed", on_change=sync_hls_to_rgb, kwargs={"key": key})
104
+
105
+ if l_only:
106
+ if f"{key}S" not in st.session_state:
107
+ st.session_state[f"{key}S"] = round(s * 100)
108
+ else:
109
+ st.slider(f"S for {label}", key=f"{key}S", min_value=0, max_value=100, value=round(s * 100), format="%d%%", label_visibility="collapsed", on_change=sync_hls_to_rgb, kwargs={"key": key})
110
+
111
+ return color
112
+
113
+
114
+ primary_color = color_picker('Primary color', key="primaryColor", default_color=default_color.primaryColor, l_only=True)
115
+ text_color = color_picker('Text color', key="textColor", default_color=default_color.textColor, l_only=True)
116
+ background_color = color_picker('Background color', key="backgroundColor", default_color=default_color.backgroundColor, l_only=True)
117
+ secondary_background_color = color_picker('Secondary background color', key="secondaryBackgroundColor", default_color=default_color.secondaryBackgroundColor, l_only=True)
118
 
119
 
120
  def parse_hex(rgb_hex_str: str) -> tuple[float, float, float]:
131
  def synced_color_picker(label: str, value: str, key: str):
132
  def on_change():
133
  st.session_state[key] = st.session_state[key + "2"]
134
+ sync_rgb_to_hls(key)
135
  st.color_picker(label, value=value, key=key + "2", on_change=on_change)
136
 
137
  col1, col2, col3 = st.columns(3)
fragments.py CHANGED
@@ -1,49 +1,9 @@
1
- import colorsys
2
-
3
  import streamlit as st
4
  import wcag_contrast_ratio as contrast
5
 
6
  import util
7
 
8
 
9
- def color_picker(label: str, key: str, default_color: str, l_only: bool) -> None:
10
- def on_color_change():
11
- rgb = util.parse_hex(st.session_state[key])
12
- hls = colorsys.rgb_to_hls(rgb[0], rgb[1], rgb[2])
13
- st.session_state[f"{key}H"] = round(hls[0] * 360)
14
- st.session_state[f"{key}L"] = round(hls[1] * 100)
15
- st.session_state[f"{key}S"] = round(hls[2] * 100)
16
-
17
- def on_hls_change():
18
- h = st.session_state[f"{key}H"]
19
- l = st.session_state[f"{key}L"]
20
- s = st.session_state[f"{key}S"]
21
- r, g, b = colorsys.hls_to_rgb(h / 360, l / 100, s / 100)
22
- st.session_state[key] = f"#{round(r * 255):02x}{round(g * 255):02x}{round(b * 255):02x}"
23
-
24
- col1, col2 = st.columns([1, 3])
25
- with col1:
26
- color = st.color_picker(label, key=key, on_change=on_color_change)
27
- with col2:
28
- r,g,b = util.parse_hex(default_color)
29
- h,l,s = colorsys.rgb_to_hls(r,g,b)
30
- if l_only:
31
- if f"{key}H" not in st.session_state:
32
- st.session_state[f"{key}H"] = round(h * 360)
33
- else:
34
- st.slider(f"H for {label}", key=f"{key}H", min_value=0, max_value=360, value=round(h * 360), format="%d°", label_visibility="collapsed", on_change=on_hls_change)
35
-
36
- st.slider(f"L for {label}", key=f"{key}L", min_value=0, max_value=100, value=round(l * 100), format="%d%%", label_visibility="collapsed", on_change=on_hls_change)
37
-
38
- if l_only:
39
- if f"{key}S" not in st.session_state:
40
- st.session_state[f"{key}S"] = round(s * 100)
41
- else:
42
- st.slider(f"S for {label}", key=f"{key}S", min_value=0, max_value=100, value=round(s * 100), format="%d%%", label_visibility="collapsed", on_change=on_hls_change)
43
-
44
- return color
45
-
46
-
47
  def contrast_summary(label: str, foreground_rgb_hex: str, background_rgb_hex: str) -> None:
48
  rgb_foreground = util.parse_hex(foreground_rgb_hex)
49
  rgb_background = util.parse_hex(background_rgb_hex)
 
 
1
  import streamlit as st
2
  import wcag_contrast_ratio as contrast
3
 
4
  import util
5
 
6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  def contrast_summary(label: str, foreground_rgb_hex: str, background_rgb_hex: str) -> None:
8
  rgb_foreground = util.parse_hex(foreground_rgb_hex)
9
  rgb_background = util.parse_hex(background_rgb_hex)