Skip to content

Commit 8715ff6

Browse files
intern-bllintern-bll
committed
docs: separate variants and add 5 true custom indicator styles
1 parent 63824b0 commit 8715ff6

4 files changed

Lines changed: 131 additions & 30 deletions

File tree

‎docs/notebooks/indicator-styling.ipynb‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,16 @@
4343
},
4444
"outputs": [],
4545
"source": [
46-
"mr.Markdown(\"---\\n## 2. Custom Styles Indicators\\nYou can customize the look of your indicators using semantic variants or explicit hex colors.\")\n",
46+
"mr.Markdown(\"---\")\n",
47+
"mr.Markdown(\"## 2. Built-in Variants\")\n",
48+
"mr.Markdown(\"Mercury provides built-in semantic and domain variants for quick styling.\")\n",
4749
"\n",
48-
"# Checklist Item 2: Variants\n",
49-
"ind1 = mr.Indicator(value=\"98%\", label=\"ACCURACY\", variant=\"success\")\n",
50-
"ind2 = mr.Indicator(value=\"340ms\", label=\"LATENCY\", variant=\"warning\")\n",
51-
"ind3 = mr.Indicator(value=\"$12k\", label=\"REVENUE\", variant=\"danger\")\n",
50+
"# Using the variants exactly as the maintainer specified\n",
51+
"ind_success = mr.Indicator(value=\"98%\", label=\"ACCURACY\", variant=\"success\")\n",
52+
"ind_warning = mr.Indicator(value=\"340ms\", label=\"LATENCY\", variant=\"warning\")\n",
53+
"ind_danger = mr.Indicator(value=\"3\", label=\"ERRORS\", variant=\"danger\")\n",
5254
"\n",
53-
"display(ind1, ind2, ind3)"
55+
"display(ind_success, ind_warning, ind_danger)"
5456
]
5557
},
5658
{
@@ -64,15 +66,60 @@
6466
},
6567
"outputs": [],
6668
"source": [
67-
"# Checklist Item 2: Explicit Colors\n",
68-
"mr.Indicator(\n",
69-
" value=\"$12,340\",\n",
70-
" label=\"CUSTOM PURPLE\",\n",
71-
" accent_color=\"#7c3aed\",\n",
72-
" border_color=\"#ddd6fe\",\n",
73-
" value_color=\"#111827\",\n",
74-
" label_color=\"#6b7280\"\n",
75-
")"
69+
"import ipywidgets as widgets\n",
70+
"\n",
71+
"mr.Markdown(\"---\")\n",
72+
"mr.Markdown(\"## 3. Custom Styles Indicator\")\n",
73+
"mr.Markdown(\"For complete control, override the default styling with explicit hex colors, including the background.\")\n",
74+
"\n",
75+
"ind_dark = mr.Indicator(\n",
76+
" value=\"142 IOPS\", label=\"DISK READ\",\n",
77+
" background_color=\"#1e1e2f\", accent_color=\"#ff007f\", border_color=\"#ff007f\",\n",
78+
" value_color=\"#00ffff\", label_color=\"#aaaaaa\"\n",
79+
")\n",
80+
"\n",
81+
"ind_pastel = mr.Indicator(\n",
82+
" value=\"8.4 hrs\", label=\"AVG SLEEP\",\n",
83+
" background_color=\"#fdf6e3\", accent_color=\"#b58900\", border_color=\"#eee8d5\",\n",
84+
" value_color=\"#657b83\", label_color=\"#93a1a1\"\n",
85+
")\n",
86+
"\n",
87+
"ind_alert = mr.Indicator(\n",
88+
" value=\"OFFLINE\", label=\"SERVER STATUS\",\n",
89+
" background_color=\"#7f0000\", accent_color=\"#ff4444\", border_color=\"#ff0000\",\n",
90+
" value_color=\"#ffffff\", label_color=\"#ffcccc\"\n",
91+
")\n",
92+
"\n",
93+
"ind_corp = mr.Indicator(\n",
94+
" value=\"$4.2M\", label=\"Q3 REVENUE\",\n",
95+
" background_color=\"#0f172a\", accent_color=\"#38bdf8\", border_color=\"#1e293b\",\n",
96+
" value_color=\"#f8fafc\", label_color=\"#94a3b8\"\n",
97+
")\n",
98+
"\n",
99+
"ind_eco = mr.Indicator(\n",
100+
" value=\"94 AQI\", label=\"AIR QUALITY\",\n",
101+
" background_color=\"#f0fdf4\", accent_color=\"#22c55e\", border_color=\"#bbf7d0\",\n",
102+
" value_color=\"#166534\", label_color=\"#15803d\"\n",
103+
")\n",
104+
"\n",
105+
"# Row 1 (3 items)\n",
106+
"mr.Indicator([ind_dark, ind_pastel, ind_alert])\n",
107+
"\n"
108+
]
109+
},
110+
{
111+
"cell_type": "code",
112+
"execution_count": null,
113+
"id": "38dfa2b1",
114+
"metadata": {
115+
"vscode": {
116+
"languageId": "plaintext"
117+
}
118+
},
119+
"outputs": [],
120+
"source": [
121+
"# Row 2 (2 items)\n",
122+
"mr.Indicator([ind_corp, ind_eco])"
76123
]
77124
}
78125
],

‎docs/src/assets/indicator/indicator-examples-custom.webp‎

6.12 KB
Loading

‎docs/src/assets/indicator/indicator-examples-variant.webp‎

18.6 KB
Loading

‎docs/src/content/docs/examples/indicator-styling.mdx‎

Lines changed: 69 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ description: Learn how to customize the visual style of Indicator widgets using
55

66
import { Image } from "astro:assets";
77
import indicatorExamplesDefault from "../../../assets/indicator/indicator-examples-default.webp";
8+
import indicatorExamplesVariant from "../../../assets/indicator/indicator-examples-variant.webp";
89
import indicatorExamplesCustom from "../../../assets/indicator/indicator-examples-custom.webp";
910

1011
Indicators are perfect for highlighting key metrics in your Mercury web app. While the default styling is clean and minimal, you have full control over their appearance to match your branding or alert states.
1112

12-
## Default Built-in Indicator
13+
## 1. Default Built-in Indicator
1314

1415
To create a basic indicator, simply pass a `value` and a `label`. By default, the indicator provides a neutral card.
1516

@@ -24,15 +25,14 @@ mr.Indicator(
2425
)
2526
```
2627

27-
## Custom Styled Indicators
28+
## 2. Built-in Variant Styles
2829

29-
You can quickly customize the look of your indicators using semantic variants such as `"success"`, `"warning"`, or `"danger"`. You can also explicitly define colors for borders, accents, labels, and values.
30+
You can quickly apply pre-built themes using semantic variant parameters such as `"success"`, `"warning"`, or `"danger"`.
3031

31-
<Image src={indicatorExamplesCustom} alt="Styled indicator examples" />
32+
<Image src={indicatorExamplesVariant} alt="Indicator variant styles" />
3233

3334
```python
3435
import mercury as mr
35-
from IPython.display import display
3636

3737
ind1 = mr.Indicator(
3838
value="98%",
@@ -52,22 +52,76 @@ ind3 = mr.Indicator(
5252
variant="danger"
5353
)
5454

55-
display(ind1, ind2, ind3)
5655
```
5756

58-
### Explicit Color Customization
57+
## 3. Custom Styled Indicators
5958

60-
For complete control over the appearance, pass color values directly.
59+
For complete control over the widget's appearance, you can explicitly define hex colors. This overrides variants and allows you to customize:
60+
61+
- `background_color`
62+
- `accent_color`
63+
- `border_color`
64+
- `label_color`
65+
- `value_color`
66+
67+
<Image src={indicatorExamplesCustom} alt="Custom styled indicators" />
6168

6269
```python
6370
import mercury as mr
6471

65-
mr.Indicator(
66-
value="$12,340",
67-
label="CUSTOM PURPLE",
68-
accent_color="#7c3aed",
69-
border_color="#ddd6fe",
70-
value_color="#111827",
71-
label_color="#6b7280"
72+
# 1. Dark Mode / Cyberpunk
73+
ind_dark = mr.Indicator(
74+
value="142 IOPS",
75+
label="DISK READ",
76+
background_color="#1e1e2f",
77+
accent_color="#ff007f",
78+
border_color="#ff007f",
79+
value_color="#00ffff",
80+
label_color="#aaaaaa"
81+
)
82+
83+
# 2. Soft Pastel / Elegant
84+
ind_pastel = mr.Indicator(
85+
value="8.4 hrs",
86+
label="AVG SLEEP",
87+
background_color="#fdf6e3",
88+
accent_color="#b58900",
89+
border_color="#eee8d5",
90+
value_color="#657b83",
91+
label_color="#93a1a1"
92+
)
93+
94+
# 3. High Contrast Alert
95+
ind_alert = mr.Indicator(
96+
value="OFFLINE",
97+
label="SERVER STATUS",
98+
background_color="#7f0000",
99+
accent_color="#ff4444",
100+
border_color="#ff0000",
101+
value_color="#ffffff",
102+
label_color="#ffcccc"
103+
)
104+
105+
# 4. Deep Corporate / FinTech
106+
ind_corp = mr.Indicator(
107+
value="$4.2M",
108+
label="Q3 REVENUE",
109+
background_color="#0f172a",
110+
accent_color="#38bdf8",
111+
border_color="#1e293b",
112+
value_color="#f8fafc",
113+
label_color="#94a3b8"
72114
)
115+
116+
# 5. Eco / Nature
117+
ind_eco = mr.Indicator(
118+
value="94 AQI",
119+
label="AIR QUALITY",
120+
background_color="#f0fdf4",
121+
accent_color="#22c55e",
122+
border_color="#bbf7d0",
123+
value_color="#166534",
124+
label_color="#15803d"
125+
)
126+
73127
```

0 commit comments

Comments
 (0)