Skip to content

Commit a9fb968

Browse files
gadenbuiegadenbuie
committed
feat(example): Add colors page
1 parent a012b8a commit a9fb968

File tree

2 files changed

+153
-1
lines changed

2 files changed

+153
-1
lines changed

‎examples/brand/_colors.scss‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
// https://github.com/twbs/bootstrap/blob/v5.3.3/site/assets/scss/_colors.scss
2+
3+
.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
4+
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
5+
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
6+
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
7+
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
8+
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
9+
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
10+
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
11+
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }
12+
13+
.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
14+
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
15+
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
16+
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
17+
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
18+
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
19+
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
20+
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
21+
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }
22+
23+
.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
24+
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
25+
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
26+
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
27+
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
28+
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
29+
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
30+
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
31+
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }
32+
33+
.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
34+
.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
35+
.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
36+
.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
37+
.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
38+
.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
39+
.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
40+
.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
41+
.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }
42+
43+
.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
44+
.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
45+
.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
46+
.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
47+
.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
48+
.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
49+
.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
50+
.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
51+
.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }
52+
53+
.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
54+
.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
55+
.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
56+
.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
57+
.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
58+
.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
59+
.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
60+
.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
61+
.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }
62+
63+
.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
64+
.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
65+
.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
66+
.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
67+
.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
68+
.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
69+
.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
70+
.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
71+
.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }
72+
73+
.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
74+
.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
75+
.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
76+
.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
77+
.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
78+
.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
79+
.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
80+
.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
81+
.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }
82+
83+
.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
84+
.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
85+
.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
86+
.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
87+
.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
88+
.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
89+
.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
90+
.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
91+
.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }
92+
93+
.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
94+
.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
95+
.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
96+
.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
97+
.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
98+
.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
99+
.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
100+
.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
101+
.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }
102+
103+
.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
104+
.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
105+
.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
106+
.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
107+
.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
108+
.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
109+
.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
110+
.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
111+
.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
112+
113+
.bd-white { color: color-contrast($white); background-color: $white; }
114+
.bd-black { color: color-contrast($black); background-color: $black; }

‎examples/brand/app.py‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import os
2+
from pathlib import Path
23

34
import matplotlib.pyplot as plt
45
import numpy as np
56

67
from shiny import App, render, ui
8+
from shiny.ui._theme_brand import bootstrap_colors
79

810
# TODO: Move this into the test that runs this app
911
os.environ["SHINY_BRAND_YML_RAISE_UNMAPPED"] = "true"
10-
1112
theme = ui.Theme.from_brand(__file__)
13+
# theme = ui.Theme()
14+
theme.add_rules((Path(__file__).parent / "_colors.scss").read_text())
1215

1316
app_ui = ui.page_navbar(
1417
ui.nav_panel(
@@ -122,6 +125,7 @@
122125
heights_equal=False,
123126
),
124127
),
128+
ui.nav_panel("Colors", ui.output_ui("ui_colors")),
125129
ui.nav_panel(
126130
"Documentation",
127131
ui.div(
@@ -266,5 +270,39 @@ def out_text1():
266270
["def example_function():", ' return "Function output text"']
267271
)
268272

273+
@render.ui
274+
def ui_colors():
275+
colors = []
276+
# Replicates: https://getbootstrap.com/docs/5.3/customize/color/#all-colors
277+
# Source: https://github.com/twbs/bootstrap/blob/6e1f75f4/site/content/docs/5.3/customize/color.md?plain=1#L395-L409
278+
for color in ["gray", *bootstrap_colors]:
279+
if color in ["white", "black"]:
280+
continue
281+
282+
colors += [
283+
ui.div(
284+
ui.div(color, class_=f"p-3 mb-2 position-relative bd-{color}-500"),
285+
*[
286+
ui.div(f"{color}-{r}", class_=f"p-3 bd-{color}-{r}")
287+
for r in range(100, 1000, 100)
288+
],
289+
class_="col-md-4 mb-3",
290+
)
291+
]
292+
293+
return ui.TagList(
294+
ui.div(
295+
*[
296+
ui.div(
297+
ui.div(color, class_=f"p-3 mb-2 position-relative bd-{color}"),
298+
class_="col-md-4 mb-3",
299+
)
300+
for color in ["black", "white"]
301+
],
302+
class_="row font-monospace",
303+
),
304+
ui.div(*colors, class_="row font-monospace"),
305+
)
306+
269307

270308
app = App(app_ui, server)

0 commit comments

Comments
 (0)