Refactoring the metric views

app.py

@@ -25,10 +25,6 @@ def parse_hex(rgb_hex_str: str) -> tuple[float, float, float]:
         raise ValueError("Invalid hex color")
     return tuple(int(rgb_hex_str[i:i+2], 16) / 255 for i in (1, 3, 5))
 
-# primary_color_rgb = parse_hex(primary_color)
-# text_color_rgb = parse_hex(text_color)
-# background_color_rgb = parse_hex(background_color)
-# secondary_background_color_rgb = parse_hex(secondary_background_color)
 
 st.header("WCAG contrast ratio")
 
@@ -47,17 +43,17 @@ col1, col2, col3 = st.columns(3)
 with col1:
     synced_color_picker("Primary color", value=primary_color, key="primaryColor")
 with col2:
-    fragments.contrast_summary(primary_color, background_color)
+    fragments.contrast_summary("Primary/Background", primary_color, background_color)
 with col3:
-    fragments.contrast_summary(primary_color, secondary_background_color)
+    fragments.contrast_summary("Primary/Secondary background", primary_color, secondary_background_color)
 
 col1, col2, col3 = st.columns(3)
 with col1:
     synced_color_picker("Text color", value=text_color, key="textColor")
 with col2:
-    fragments.contrast_summary(text_color, background_color)
+    fragments.contrast_summary("Text/Background", text_color, background_color)
 with col3:
-    fragments.contrast_summary(text_color, secondary_background_color)
+    fragments.contrast_summary("Text/Secondary background", text_color, secondary_background_color)
 
 
 st.header("Config")

fragments.py

@@ -4,14 +4,16 @@ import wcag_contrast_ratio as contrast
 import util
 
 
-def contrast_summary(foreground_rgb_hex: str, background_rgb_hex: str) -> None:
+def contrast_summary(label: str, foreground_rgb_hex: str, background_rgb_hex: str) -> None:
     rgb_foreground = util.parse_hex(foreground_rgb_hex)
     rgb_background = util.parse_hex(background_rgb_hex)
     contrast_ratio = contrast.rgb(rgb_foreground, rgb_background)
     contrast_ratio_str = f"{contrast_ratio:.2f}"
-    st.metric("", value=f"{contrast_ratio_str} : 1")
+
+    st.metric(label, value=f"{contrast_ratio_str} : 1", label_visibility="collapsed")
 
     st.markdown(f'<p style="color: {foreground_rgb_hex}; background-color: {background_rgb_hex}; padding: 12px">Lorem ipsum</p>', unsafe_allow_html=True)
 
+
 def sample_components(key: str):
     st.slider("Slider", min_value=0, max_value=100, key=f"{key}:slider")