whitphx HF staff commited on
Commit
db4f9a3
1 Parent(s): 79682b6

Add WCAG metrics and fix the config output

Browse files
Files changed (3) hide show
  1. app.py +71 -23
  2. fragments.py +12 -0
  3. 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
- def reconcile_theme_config():
14
- keys = ['primaryColor', 'backgroundColor', 'secondaryBackgroundColor', 'textColor']
15
- has_changed = False
16
- for key in keys:
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
- primary_color = st.color_picker('Primary color', key="primaryColor")
 
 
 
25
 
26
- background_color = st.color_picker('Background color', key="backgroundColor")
 
 
 
27
 
28
- secondary_background_color = st.color_picker('Secondary background color', key="secondaryBackgroundColor")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
 
30
- text_color = st.color_picker('Text color', key="textColor")
31
 
32
- reconcile_theme_config()
33
 
34
- st.code("""
35
- primaryColor="{primaryColor}"
36
- backgroundColor="{backgroundColor}"
37
- secondaryBackgroundColor="{secondaryBackgroundColor}}"
38
- textColor="{textColor}}"
39
  """)
40
 
41
 
42
- def sample_components(key: str):
43
- st.slider("Slider", min_value=0, max_value=100, key=f"{key}:slider")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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