Spaces:
Runtime error
Runtime error
Add WCAG metrics and fix the config output
Browse files- app.py +71 -23
- fragments.py +12 -0
- requirements.txt +1 -0
app.py
CHANGED
@@ -1,5 +1,9 @@
|
|
|
|
|
|
1 |
import streamlit as st
|
2 |
|
|
|
|
|
3 |
if 'primaryColor' not in st.session_state:
|
4 |
st.session_state['primaryColor'] = "#F63366"
|
5 |
if 'backgroundColor' not in st.session_state:
|
@@ -10,38 +14,82 @@ if 'textColor' not in st.session_state:
|
|
10 |
st.session_state['textColor'] = "#262730"
|
11 |
|
12 |
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
if st._config.get_option(f'theme.{key}') != st.session_state[key]:
|
18 |
-
st._config.set_option(f'theme.{key}', st.session_state[key])
|
19 |
-
has_changed = True
|
20 |
-
if has_changed:
|
21 |
-
st.experimental_rerun()
|
22 |
|
23 |
|
24 |
-
|
|
|
|
|
|
|
25 |
|
26 |
-
|
|
|
|
|
|
|
27 |
|
28 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
29 |
|
30 |
-
text_color = st.color_picker('Text color', key="textColor")
|
31 |
|
32 |
-
|
33 |
|
34 |
-
st.code("""
|
35 |
-
primaryColor="{
|
36 |
-
backgroundColor="{
|
37 |
-
secondaryBackgroundColor="{
|
38 |
-
textColor="{
|
39 |
""")
|
40 |
|
41 |
|
42 |
-
|
43 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
44 |
|
45 |
-
sample_components("body")
|
46 |
with st.sidebar:
|
47 |
-
sample_components("sidebar")
|
|
|
1 |
+
import re
|
2 |
+
|
3 |
import streamlit as st
|
4 |
|
5 |
+
import fragments
|
6 |
+
|
7 |
if 'primaryColor' not in st.session_state:
|
8 |
st.session_state['primaryColor'] = "#F63366"
|
9 |
if 'backgroundColor' not in st.session_state:
|
|
|
14 |
st.session_state['textColor'] = "#262730"
|
15 |
|
16 |
|
17 |
+
primary_color = st.color_picker('Primary color', key="primaryColor")
|
18 |
+
text_color = st.color_picker('Text color', key="textColor")
|
19 |
+
background_color = st.color_picker('Background color', key="backgroundColor")
|
20 |
+
secondary_background_color = st.color_picker('Secondary background color', key="secondaryBackgroundColor")
|
|
|
|
|
|
|
|
|
|
|
21 |
|
22 |
|
23 |
+
def parse_hex(rgb_hex_str: str) -> tuple[float, float, float]:
|
24 |
+
if not re.match(r"^#[0-9a-fA-F]{6}$", rgb_hex_str):
|
25 |
+
raise ValueError("Invalid hex color")
|
26 |
+
return tuple(int(rgb_hex_str[i:i+2], 16) / 255 for i in (1, 3, 5))
|
27 |
|
28 |
+
primary_color_rgb = parse_hex(primary_color)
|
29 |
+
text_color_rgb = parse_hex(text_color)
|
30 |
+
background_color_rgb = parse_hex(background_color)
|
31 |
+
secondary_background_color_rgb = parse_hex(secondary_background_color)
|
32 |
|
33 |
+
st.header("WCAG contrast ratio")
|
34 |
+
|
35 |
+
col1, col2, col3 = st.columns(3)
|
36 |
+
with col2:
|
37 |
+
def on_change():
|
38 |
+
st.session_state["backgroundColor"] = st.session_state["backgroundColor2"]
|
39 |
+
st.color_picker("Background color", value=background_color, key="backgroundColor2", on_change=on_change)
|
40 |
+
with col3:
|
41 |
+
def on_change():
|
42 |
+
st.session_state["secondaryBackgroundColor"] = st.session_state["secondaryBackgroundColor2"]
|
43 |
+
st.color_picker("Secondary background color", value=secondary_background_color, key="secondaryBackgroundColor2", on_change=on_change)
|
44 |
+
|
45 |
+
col1, col2, col3 = st.columns(3)
|
46 |
+
with col1:
|
47 |
+
def on_change():
|
48 |
+
st.session_state["primaryColor"] = st.session_state["primaryColor2"]
|
49 |
+
st.color_picker("Primary color", value=primary_color, key="primaryColor2", on_change=on_change)
|
50 |
+
with col2:
|
51 |
+
fragments.contrast_summary(primary_color_rgb, background_color_rgb)
|
52 |
+
with col3:
|
53 |
+
fragments.contrast_summary(primary_color_rgb, secondary_background_color_rgb)
|
54 |
+
|
55 |
+
col1, col2, col3 = st.columns(3)
|
56 |
+
with col1:
|
57 |
+
def on_change():
|
58 |
+
st.session_state["textColor"] = st.session_state["textColor2"]
|
59 |
+
st.color_picker("Text color", value=text_color, key="textColor2", on_change=on_change)
|
60 |
+
with col2:
|
61 |
+
fragments.contrast_summary(text_color_rgb, background_color_rgb)
|
62 |
+
with col3:
|
63 |
+
fragments.contrast_summary(text_color_rgb, secondary_background_color_rgb)
|
64 |
|
|
|
65 |
|
66 |
+
st.header("Config")
|
67 |
|
68 |
+
st.code(f"""
|
69 |
+
primaryColor="{primary_color}"
|
70 |
+
backgroundColor="{background_color}"
|
71 |
+
secondaryBackgroundColor="{secondary_background_color}"
|
72 |
+
textColor="{text_color}"
|
73 |
""")
|
74 |
|
75 |
|
76 |
+
apply_theme = st.checkbox("Apply theme to this page")
|
77 |
+
|
78 |
+
if apply_theme:
|
79 |
+
def reconcile_theme_config():
|
80 |
+
keys = ['primaryColor', 'backgroundColor', 'secondaryBackgroundColor', 'textColor']
|
81 |
+
has_changed = False
|
82 |
+
for key in keys:
|
83 |
+
if st._config.get_option(f'theme.{key}') != st.session_state[key]:
|
84 |
+
st._config.set_option(f'theme.{key}', st.session_state[key])
|
85 |
+
has_changed = True
|
86 |
+
if has_changed:
|
87 |
+
st.experimental_rerun()
|
88 |
+
|
89 |
+
reconcile_theme_config()
|
90 |
+
|
91 |
+
|
92 |
|
93 |
+
fragments.sample_components("body")
|
94 |
with st.sidebar:
|
95 |
+
fragments.sample_components("sidebar")
|
fragments.py
ADDED
@@ -0,0 +1,12 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import streamlit as st
|
2 |
+
import wcag_contrast_ratio as contrast
|
3 |
+
|
4 |
+
|
5 |
+
def contrast_summary(rgb1: tuple[float, float, float], rgb2: tuple[float, float, float]) -> None:
|
6 |
+
contrast_ratio = contrast.rgb(rgb1, rgb2)
|
7 |
+
contrast_ratio_str = f"{contrast_ratio:.2f}"
|
8 |
+
st.metric("", value=f"{contrast_ratio_str} : 1")
|
9 |
+
|
10 |
+
|
11 |
+
def sample_components(key: str):
|
12 |
+
st.slider("Slider", min_value=0, max_value=100, key=f"{key}:slider")
|
requirements.txt
ADDED
@@ -0,0 +1 @@
|
|
|
|
|
1 |
+
wcag-contrast-ratio
|