Skip to content

Commit 83e4a33

Browse files
committed
docs: Fill out .from_brand() documentation
1 parent f2d35b6 commit 83e4a33

File tree

2 files changed

+63
-3
lines changed

2 files changed

+63
-3
lines changed

examples/brand/app-express.py

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
from shiny.express import input, render, ui
2+
3+
ui.page_opts(theme=ui.Theme.from_brand(__file__))
4+
5+
ui.input_slider("n", "N", 0, 100, 20)
6+
7+
8+
@render.code
9+
def txt():
10+
return f"n*2 is {input.n() * 2}"

shiny/ui/_theme.py

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -508,9 +508,59 @@ def from_brand(cls, brand: "str | pathlib.Path | Brand"):
508508
Create a custom Shiny theme from a `_brand.yml`
509509
510510
Creates a custom Shiny theme for your brand using
511-
[brand.yml](https://posit-dev.github.io/brand-yml), which may be either an
512-
instance of :class:`brand_yml.Brand` or a :class:`Path` used by
513-
:meth:`brand_yml.Brand.from_yaml` to locate the `_brand.yml` file.
511+
[brand.yml](https://posit-dev.github.io/brand-yml), a single YAML file that
512+
describes the brand's color and typography. Learn more about writing a
513+
`_brand.yml` file for your Brand at the
514+
[brand.yml homepage](https://posit-dev.github.io/brand-yml).
515+
516+
As a simple example, suppose your brand guidelines include a color palette with
517+
custom orange and black colors. The orange is used as the primary accent color
518+
and the black for all text. For typography, the brand also uses
519+
[Roboto](https://fonts.google.com/specimen/Roboto?query=roboto) and
520+
[Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono?query=roboto) from
521+
Google Fonts for text and monospace-styled text, respectively. Here's a
522+
`_brand.yml` file for this brand:
523+
524+
```{.yaml filename="_brand.yml"}
525+
meta:
526+
name: brand.yml Example
527+
528+
color:
529+
palette:
530+
orange: "#F96302"
531+
black: "#000000"
532+
foreground: black
533+
primary: orange
534+
535+
typography:
536+
fonts:
537+
- family: Roboto
538+
source: google
539+
- family: Roboto Mono
540+
source: google
541+
base: Roboto
542+
monospace: Roboto Mono
543+
```
544+
545+
You can store the `_brand.yml` file next to your Shiny `app.py` or, for larger
546+
projects, in a parent folder. To use a theme generated from the `_brand.yml`
547+
file, call :meth:`~shiny.ui.Theme.from_brand` on `__file__` and pass the result
548+
to the `theme` argument of :func:`~shiny.express.ui.page_opts` (Shiny Express)
549+
or the `theme` argument of `shiny.ui.page_*` functions, like
550+
:func:`~shiny.ui.page_sidebar`.
551+
552+
```{.python filename="app.py"}
553+
from shiny.express import input, render, ui
554+
555+
ui.page_opts(theme=ui.Theme.from_brand(__file__))
556+
557+
ui.input_slider("n", "N", 0, 100, 20)
558+
559+
560+
@render.code
561+
def txt():
562+
return f"n*2 is {input.n() * 2}"
563+
```
514564
515565
Parameters
516566
----------

0 commit comments

Comments
 (0)