admin/HighCostDrugsDemo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update design tokens for SaaS redesign (Task 5.1)

Browse Source 
- Typography: Reduce sizes (Display 32→28, H1 24→18, H2 20→16, Caption 12→11)
- Spacing: Tighten scale by ~25% (SM 8→6, MD 12→8, LG 16→12, etc.)
- Shadows: Lighter values for modern feel
- Colors: Modernize semantic colors (#10B981 success, #EF4444 error)
- Layout: TOP_BAR_HEIGHT 64→48px, new FILTER_STRIP_HEIGHT 48px

New style helpers added:
- compact_kpi_card_style/value/label - 50% smaller KPI cards
- kpi_badge_style - inline pill variant for zero-height KPIs
- filter_strip_style - horizontal single-row container
- compact_dropdown_trigger_style - 32px height triggers
- chart_container_style/wrapper - full-width flex-grow
- top_bar_style/tab/logo - compact 48px top bar

All tokens verified via import and Reflex compile.
This commit is contained in:
Andrew Charlwood
2026-02-05 01:46:58 +00:00
parent 27d2d603c3
commit 0a68c2a5a5
2 changed files with 493 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pathways_app/styles.py
+361 -88
View File
@@ -1,67 +1,73 @@
"""
Design tokens and style helpers for HCD Analysis v2.
Design tokens and style helpers for HCD Analysis v2.1 (SaaS Redesign).
All visual styling should use these tokens for consistency.
Import: from pathways_app.styles import Colors, Spacing, Typography, etc.
Updated to match DESIGN_SYSTEM.md v2.1 with:
- Tighter spacing (25% reduction)
- Smaller typography (reduced headline sizes)
- Compact component variants for filters/KPIs
- Full-width chart support
"""
class Colors:
"""Color palette from DESIGN_SYSTEM.md"""
# Primary Blues (NHS-inspired, modernized)
HERITAGE_BLUE = "#003087" # Deep headers, authoritative accents
PRIMARY = "#0066CC" # Main actions, links, focus states
VIBRANT = "#1E88E5" # Highlights, hover states, chart primary
SKY = "#4FC3F7" # Accents, progress bars, secondary elements
PALE = "#E3F2FD" # Subtle backgrounds, card tints
# Primary Blues (NHS-inspired, used sparingly)
HERITAGE_BLUE = "#003087" # Top bar background, strong accents
PRIMARY = "#0066CC" # Interactive elements, links, focus states
VIBRANT = "#1E88E5" # Hover states, active elements
SKY = "#4FC3F7" # Subtle accents, progress indicators
PALE = "#E3F2FD" # Selected states, subtle backgrounds
# Neutrals (warm-tinted for clinical warmth)
SLATE_900 = "#1E293B" # Primary text
# Neutrals (refined for modern feel)
SLATE_900 = "#0F172A" # Primary text (slightly darker)
SLATE_700 = "#334155" # Secondary text
SLATE_500 = "#64748B" # Muted text, placeholders
SLATE_300 = "#CBD5E1" # Borders, dividers
SLATE_100 = "#F1F5F9" # Card backgrounds, hover states
WHITE = "#FFFFFF" # Page background
SLATE_100 = "#F8FAFC" # Backgrounds (slightly lighter)
WHITE = "#FFFFFF" # Card/modal backgrounds
# Semantic Colors
SUCCESS = "#059669" # Positive states, confirmations
WARNING = "#D97706" # Caution states, alerts
ERROR = "#DC2626" # Error states, destructive actions
INFO = "#0284C7" # Informational (matches primary family)
# Semantic Colors (modernized)
SUCCESS = "#10B981" # Positive (modern green)
WARNING = "#F59E0B" # Caution
ERROR = "#EF4444" # Errors
INFO = "#3B82F6" # Informational
# Chart Palette
CHART_SERIES = ["#003087", "#0066CC", "#1E88E5", "#4FC3F7", "#90CAF9"]
CHART_CATEGORICAL = ["#0066CC", "#059669", "#D97706", "#8B5CF6", "#EC4899"]
CHART_CATEGORICAL = ["#0066CC", "#10B981", "#F59E0B", "#8B5CF6", "#EC4899"]
class Typography:
"""Typography tokens from DESIGN_SYSTEM.md"""
"""Typography tokens from DESIGN_SYSTEM.md v2.1 - REDUCED sizes"""
# Font families
FONT_FAMILY = "Inter, system-ui, -apple-system, sans-serif"
FONT_MONO = "JetBrains Mono, monospace"
# Display: Page titles
DISPLAY_SIZE = "32px"
DISPLAY_WEIGHT = "700"
# Display: Page titles (REDUCED from 32px)
DISPLAY_SIZE = "28px"
DISPLAY_WEIGHT = "600"
DISPLAY_TRACKING = "-0.02em"
DISPLAY_LINE_HEIGHT = "1.2"
# Heading 1: Section headers
H1_SIZE = "24px"
# Heading 1: Section headers (REDUCED from 24px)
H1_SIZE = "18px"
H1_WEIGHT = "600"
H1_TRACKING = "-0.01em"
H1_LINE_HEIGHT = "1.3"
# Heading 2: Card titles
H2_SIZE = "20px"
# Heading 2: Card titles (REDUCED from 20px)
H2_SIZE = "16px"
H2_WEIGHT = "600"
H2_TRACKING = "normal"
H2_LINE_HEIGHT = "1.4"
# Heading 3: Subsections
H3_SIZE = "16px"
H3_SIZE = "14px"
H3_WEIGHT = "600"
H3_TRACKING = "normal"
H3_LINE_HEIGHT = "1.4"
@@ -76,55 +82,66 @@ class Typography:
BODY_SMALL_WEIGHT = "400"
BODY_SMALL_LINE_HEIGHT = "1.5"
# Caption: Labels, metadata
CAPTION_SIZE = "12px"
# Caption: Labels, metadata (REDUCED from 12px)
CAPTION_SIZE = "11px"
CAPTION_WEIGHT = "500"
CAPTION_LINE_HEIGHT = "1.4"
# Mono: Data values, codes
MONO_SIZE = "13px"
MONO_WEIGHT = "400"
MONO_WEIGHT = "500"
MONO_LINE_HEIGHT = "1.5"
class Spacing:
"""Spacing scale from DESIGN_SYSTEM.md"""
"""Spacing scale from DESIGN_SYSTEM.md v2.1 - TIGHTER values (~25% reduction)"""
XS = "4px" # Tight internal padding
SM = "8px" # Between related elements
MD = "12px" # Standard gaps
LG = "16px" # Section padding
XL = "24px" # Card padding
XXL = "32px" # Major section gaps
XXXL = "48px" # Page margins
XS = "4px" # Tight gaps
SM = "6px" # Between related elements (was 8px)
MD = "8px" # Standard gaps (was 12px)
LG = "12px" # Section padding (was 16px)
XL = "16px" # Card padding (was 24px)
XXL = "24px" # Major gaps (was 32px)
XXXL = "32px" # Page margins (was 48px)
class Radii:
"""Border radius values from DESIGN_SYSTEM.md"""
SM = "4px" # Small elements, inputs
MD = "8px" # Buttons, small cards
LG = "12px" # Cards, modals
SM = "4px" # Small elements
MD = "6px" # Inputs, buttons
LG = "8px" # Cards
XL = "16px" # Large containers
FULL = "9999px" # Pills, avatars
FULL = "9999px" # Pills, badges
class Shadows:
"""Shadow values from DESIGN_SYSTEM.md"""
"""Shadow values from DESIGN_SYSTEM.md v2.1 - LIGHTER values"""
SM = "0 1px 2px rgba(0,0,0,0.05)" # Subtle elevation
MD = "0 1px 3px rgba(0,0,0,0.08)" # Cards at rest
LG = "0 4px 6px rgba(0,0,0,0.1)" # Cards on hover, dropdowns
SM = "0 1px 2px rgba(0,0,0,0.04)" # Subtle (lighter)
MD = "0 1px 3px rgba(0,0,0,0.06)" # Cards at rest
LG = "0 4px 8px rgba(0,0,0,0.08)" # Dropdowns, hover
XL = "0 10px 15px rgba(0,0,0,0.1)" # Modals, popovers
class Transitions:
"""Transition values from DESIGN_SYSTEM.md"""
"""Transition values from DESIGN_SYSTEM.md v2.1 - FASTER (150ms)"""
DEFAULT = "150ms ease-out"
COLOR = "150ms ease-out"
TRANSFORM = "200ms ease-out"
SHADOW = "200ms ease-out"
OPACITY = "200ms ease-in-out"
TRANSFORM = "150ms ease-out"
SHADOW = "150ms ease-out"
OPACITY = "150ms ease-in-out"
# ==============================================================================
# Layout constants - UPDATED for SaaS redesign
# ==============================================================================
TOP_BAR_HEIGHT = "48px" # Reduced from 64px
FILTER_STRIP_HEIGHT = "48px" # Single row filter strip
PAGE_MAX_WIDTH = "1600px" # Keep for content areas (not chart)
PAGE_PADDING = Spacing.XXXL # 32px
# ==============================================================================
@@ -137,8 +154,8 @@ def card_style(hoverable: bool = False) -> dict:
- Background: White
- Border: 1px Slate 300
- Border radius: lg (12px)
- Padding: xl (24px)
- Border radius: lg (8px)
- Padding: xl (16px - reduced)
- Shadow: md at rest, lg on hover
"""
base_style = {
@@ -164,18 +181,12 @@ def card_style(hoverable: bool = False) -> dict:
def button_primary_style() -> dict:
"""
Primary button styling following DESIGN_SYSTEM.md specifications.
- Background: Primary Blue
- Text: White
- Border radius: md (8px)
- Padding: 10px 20px
- Hover: Vibrant Blue background, slight scale (1.02)
"""
return {
"background_color": Colors.PRIMARY,
"color": Colors.WHITE,
"border_radius": Radii.MD,
"padding": "10px 20px",
"padding": "8px 16px",
"font_weight": "500",
"font_size": Typography.BODY_SIZE,
"cursor": "pointer",
@@ -191,18 +202,13 @@ def button_primary_style() -> dict:
def button_secondary_style() -> dict:
"""
Secondary button styling following DESIGN_SYSTEM.md specifications.
- Background: White
- Border: 1px Primary Blue
- Text: Primary Blue
- Hover: Pale Blue background
"""
return {
"background_color": Colors.WHITE,
"color": Colors.PRIMARY,
"border": f"1px solid {Colors.PRIMARY}",
"border_radius": Radii.MD,
"padding": "10px 20px",
"padding": "8px 16px",
"font_weight": "500",
"font_size": Typography.BODY_SIZE,
"cursor": "pointer",
@@ -216,17 +222,13 @@ def button_secondary_style() -> dict:
def button_ghost_style() -> dict:
"""
Ghost button styling following DESIGN_SYSTEM.md specifications.
- Background: transparent
- Text: Primary Blue
- Hover: Pale Blue background
"""
return {
"background_color": "transparent",
"color": Colors.PRIMARY,
"border": "none",
"border_radius": Radii.MD,
"padding": "10px 20px",
"padding": "8px 16px",
"font_weight": "500",
"font_size": Typography.BODY_SIZE,
"cursor": "pointer",
@@ -240,19 +242,13 @@ def button_ghost_style() -> dict:
def input_style() -> dict:
"""
Form input styling following DESIGN_SYSTEM.md specifications.
- Height: 40px
- Border: 1px Slate 300
- Border radius: md (8px)
- Focus: 2px Primary Blue ring
- Placeholder: Slate 500
"""
return {
"height": "40px",
"height": "32px",
"border": f"1px solid {Colors.SLATE_300}",
"border_radius": Radii.MD,
"padding": f"0 {Spacing.MD}",
"font_size": Typography.BODY_SIZE,
"font_size": Typography.BODY_SMALL_SIZE,
"font_family": Typography.FONT_FAMILY,
"color": Colors.SLATE_900,
"background_color": Colors.WHITE,
@@ -268,13 +264,13 @@ def input_style() -> dict:
}
# ==============================================================================
# KPI Card styles - COMPACT variants for v2.1
# ==============================================================================
def kpi_card_style() -> dict:
"""
KPI card styling following DESIGN_SYSTEM.md specifications.
- Large mono number: 32-48px, Slate 900
- Label: Caption size, Slate 500
- Background: White or Pale Blue tint
Standard KPI card styling (legacy, larger).
"""
return {
"background_color": Colors.WHITE,
@@ -287,7 +283,7 @@ def kpi_card_style() -> dict:
def kpi_value_style() -> dict:
"""Style for the large number in a KPI card."""
"""Style for the large number in a KPI card (legacy)."""
return {
"font_family": Typography.FONT_MONO,
"font_size": "32px",
@@ -298,7 +294,7 @@ def kpi_value_style() -> dict:
def kpi_label_style() -> dict:
"""Style for the label in a KPI card."""
"""Style for the label in a KPI card (legacy)."""
return {
"font_size": Typography.CAPTION_SIZE,
"font_weight": Typography.CAPTION_WEIGHT,
@@ -307,6 +303,228 @@ def kpi_label_style() -> dict:
}
def compact_kpi_card_style() -> dict:
"""
COMPACT KPI card styling for v2.1 redesign.
- Smaller padding (12px)
- Smaller value font (24px)
- Reduced visual weight
"""
return {
"background_color": Colors.WHITE,
"border": f"1px solid {Colors.SLATE_300}",
"border_radius": Radii.LG,
"padding": Spacing.LG, # 12px instead of 16px
"box_shadow": Shadows.SM,
"text_align": "center",
"min_width": "100px",
}
def compact_kpi_value_style() -> dict:
"""Style for the value in a COMPACT KPI card."""
return {
"font_family": Typography.FONT_MONO,
"font_size": "24px", # Reduced from 32px
"font_weight": "600",
"color": Colors.SLATE_900,
"line_height": "1.2",
}
def compact_kpi_label_style() -> dict:
"""Style for the label in a COMPACT KPI card."""
return {
"font_size": Typography.CAPTION_SIZE, # 11px
"font_weight": Typography.CAPTION_WEIGHT,
"color": Colors.SLATE_500,
"margin_top": Spacing.XS, # 4px tighter
}
def kpi_badge_style() -> dict:
"""
KPI as inline pill/badge (Option A from design system).
Zero extra height - embeds in filter row.
Example: "12,345 patients"
"""
return {
"display": "inline-flex",
"align_items": "center",
"gap": Spacing.XS,
"padding": f"{Spacing.XS} {Spacing.LG}", # 4px 12px
"background_color": Colors.SLATE_100,
"border_radius": Radii.FULL, # Pill shape
}
def kpi_badge_value_style() -> dict:
"""Style for value text in KPI badge."""
return {
"font_family": Typography.FONT_MONO,
"font_size": "14px",
"font_weight": "600",
"color": Colors.SLATE_900,
}
def kpi_badge_label_style() -> dict:
"""Style for label text in KPI badge."""
return {
"font_size": Typography.CAPTION_SIZE,
"font_weight": "400",
"color": Colors.SLATE_500,
}
# ==============================================================================
# Filter strip styles - NEW for v2.1 redesign
# ==============================================================================
def filter_strip_style() -> dict:
"""
Horizontal single-row filter container style.
- Height: 48px
- All filters inline
- Slate 100 background (or transparent)
"""
return {
"display": "flex",
"align_items": "center",
"height": FILTER_STRIP_HEIGHT,
"gap": Spacing.LG, # 12px between filter groups
"padding": f"0 {Spacing.XL}", # 16px horizontal padding
"background_color": Colors.SLATE_100,
"border_bottom": f"1px solid {Colors.SLATE_300}",
"width": "100%",
}
def compact_dropdown_trigger_style() -> dict:
"""
Compact dropdown trigger for filter strip.
- Height: 32px
- Padding: 8px 12px
- Smaller font: 13px
"""
return {
"height": "32px",
"padding": f"{Spacing.MD} {Spacing.LG}", # 8px 12px
"border": f"1px solid {Colors.SLATE_300}",
"border_radius": Radii.MD,
"font_size": Typography.BODY_SMALL_SIZE, # 13px
"font_family": Typography.FONT_FAMILY,
"color": Colors.SLATE_900,
"background_color": Colors.WHITE,
"cursor": "pointer",
"display": "flex",
"align_items": "center",
"gap": Spacing.SM,
"transition": f"border-color {Transitions.COLOR}",
"_hover": {
"border_color": Colors.PRIMARY,
}
}
def searchable_dropdown_panel_style() -> dict:
"""
Dropdown panel for searchable multi-select.
- Max height: 200px for items
- Compact item spacing
"""
return {
"background_color": Colors.WHITE,
"border": f"1px solid {Colors.SLATE_300}",
"border_radius": Radii.LG,
"box_shadow": Shadows.LG,
"min_width": "240px",
"max_width": "320px",
"z_index": "50",
"overflow": "hidden",
}
def searchable_dropdown_item_style(selected: bool = False) -> dict:
"""
Individual item in searchable dropdown.
- Tighter padding: 6px 8px
- Visual selected state
"""
base = {
"padding": f"{Spacing.SM} {Spacing.MD}", # 6px 8px
"font_size": Typography.BODY_SMALL_SIZE,
"cursor": "pointer",
"display": "flex",
"align_items": "center",
"gap": Spacing.SM,
"transition": f"background-color {Transitions.COLOR}",
}
if selected:
base.update({
"background_color": Colors.PALE,
"color": Colors.PRIMARY,
})
else:
base.update({
"background_color": Colors.WHITE,
"color": Colors.SLATE_900,
"_hover": {
"background_color": Colors.SLATE_100,
}
})
return base
# ==============================================================================
# Chart container styles - NEW for v2.1 redesign
# ==============================================================================
def chart_container_style() -> dict:
"""
Full-width, flex-grow chart wrapper.
- Width: full viewport minus padding (16px each side)
- Height: fills remaining space (min 500px)
- No max-width constraint
"""
return {
"width": "100%",
"padding": f"0 {Spacing.XL}", # 16px horizontal padding
"flex": "1",
"min_height": "500px",
"display": "flex",
"flex_direction": "column",
}
def chart_wrapper_style(overhead_height: str = "96px") -> dict:
"""
Inner chart wrapper with calculated height.
Args:
overhead_height: Total height of fixed elements above chart
(top bar + filter strip = 48px + 48px = 96px default)
"""
return {
"width": "100%",
"height": f"calc(100vh - {overhead_height})",
"min_height": "500px",
}
# ==============================================================================
# Typography helper functions
# ==============================================================================
def text_display() -> dict:
"""Display text style for page titles."""
return {
@@ -400,9 +618,64 @@ def text_mono() -> dict:
# ==============================================================================
# Layout constants
# Top bar styles - NEW for v2.1 redesign
# ==============================================================================
TOP_BAR_HEIGHT = "64px"
PAGE_MAX_WIDTH = "1600px"
PAGE_PADDING = Spacing.XXXL
def top_bar_style() -> dict:
"""
Top bar container style.
- Height: 48px (reduced from 64px)
- Heritage Blue background
"""
return {
"height": TOP_BAR_HEIGHT,
"background_color": Colors.HERITAGE_BLUE,
"display": "flex",
"align_items": "center",
"justify_content": "space_between",
"padding": f"0 {Spacing.XL}",
"width": "100%",
}
def top_bar_tab_style(active: bool = False) -> dict:
"""
Tab/pill style for top bar navigation.
- Height: 28px
- Smaller pills
"""
base = {
"height": "28px",
"padding": f"{Spacing.XS} {Spacing.LG}", # 4px 12px
"border_radius": Radii.MD,
"font_size": Typography.BODY_SMALL_SIZE,
"font_weight": "500",
"cursor": "pointer",
"transition": f"background-color {Transitions.COLOR}",
}
if active:
base.update({
"background_color": Colors.WHITE,
"color": Colors.HERITAGE_BLUE,
})
else:
base.update({
"background_color": "transparent",
"color": Colors.WHITE,
"_hover": {
"background_color": "rgba(255,255,255,0.1)",
}
})
return base
def logo_style() -> dict:
"""Logo style for top bar - 28px height (reduced from 36px)."""
return {
"height": "28px",
"width": "auto",
}