Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(theme): Branded theming via brand_yml #1743

Merged
merged 83 commits into from
Oct 25, 2024
Merged
Show file tree
Hide file tree
Changes from 72 commits
Commits
Show all changes
83 commits
Select commit Hold shift + click to select a range
f0b3464
feat: initial BrandTheme
gadenbuie Oct 21, 2024
730af5c
feat: rename ThemeBrand
gadenbuie Oct 21, 2024
b73470f
feat: Add `_brand*.yml` to default reload includes
gadenbuie Oct 21, 2024
ef936ea
feat(Theme): Add `from_brand()` method
gadenbuie Oct 22, 2024
9ebf4a5
docs: Add brand-yml to interlinks inventories
gadenbuie Oct 22, 2024
9fe9714
chore: add brand_yml to dev dependencies too
gadenbuie Oct 22, 2024
3943ebc
chore(Theme): Rename method `_html_dependencies`
gadenbuie Oct 22, 2024
669e08a
feat: get fonts dependency from brand.typography
gadenbuie Oct 23, 2024
263ee07
chore: clean up code
gadenbuie Oct 23, 2024
6035788
feat: Apply brand.color.palette to bootstrap color map
gadenbuie Oct 23, 2024
3184691
fix: Use Bootstrap major version
gadenbuie Oct 23, 2024
137cc4c
chore: Add todo comments
gadenbuie Oct 23, 2024
949f6f1
refactor: Move ThemeBrand init code into constructor
gadenbuie Oct 23, 2024
2af0941
feat(ThemeBrand): sanitize color name into valid sass/css variable names
gadenbuie Oct 23, 2024
03adf5c
refactor: Use `brand.color.to_dict()` method
gadenbuie Oct 23, 2024
ced644a
chore: Apply suggestions from code review
gadenbuie Oct 23, 2024
409a53b
refactor: More strongly type sass var maps
gadenbuie Oct 23, 2024
dcf4e32
refactor: Don't version the bootstrap color list
gadenbuie Oct 23, 2024
948ddce
refactor: Consolidate all brand.color sass var logic
gadenbuie Oct 23, 2024
142409e
refactor: Raise ThemeBrandUnmappedFieldError following envvar
gadenbuie Oct 23, 2024
048622e
chore: Update brand.ya?ml reload includes
gadenbuie Oct 23, 2024
96a9b95
Merged origin/main into feat/brand-yml
gadenbuie Oct 23, 2024
fc66b21
feat: Convert `typography.base.size` to `rem` for Bootstrap
gadenbuie Oct 23, 2024
20b1210
feat(brand): Add example app and brand
gadenbuie Oct 23, 2024
b905415
feat(brand): finish mapping the variables
gadenbuie Oct 23, 2024
95ffd5a
chore: Add some notes in example brand
gadenbuie Oct 23, 2024
db42401
chore: add a few more notes
gadenbuie Oct 23, 2024
f785d75
refactor: Simplify splitting css value and unit
gadenbuie Oct 24, 2024
aaed92a
chore: link back to bootstrap source for code rules
gadenbuie Oct 24, 2024
a012b8a
fix(brand): Map typography.link.color to $link-color-dark too
gadenbuie Oct 24, 2024
a9fb968
feat(example): Add colors page
gadenbuie Oct 24, 2024
5624064
fix(typing): of split_css_value_and_unit()
gadenbuie Oct 24, 2024
67e9b7d
feat(brand): Swap foreground/background in dark mode
gadenbuie Oct 24, 2024
c772164
feat(brand): Pick white/black from brand's foreground/background and …
gadenbuie Oct 24, 2024
2573e0a
feat(brand-example): Add color swatch page
gadenbuie Oct 24, 2024
e05ab3d
chore: remove sass debug output
gadenbuie Oct 24, 2024
484c89b
feat(brand): restore card borders in dark mode if brand makes dark mode
gadenbuie Oct 24, 2024
51cf4f1
feat(brand): Mix of font sources
gadenbuie Oct 24, 2024
75ab45d
fix(brand): Rules for code-block-line-height
gadenbuie Oct 24, 2024
792af38
refactor: ._handle_unmapped_variable method
gadenbuie Oct 24, 2024
c5f6302
refactor(ThemeBrand): Separate into smaller methods
gadenbuie Oct 24, 2024
0fe7fa1
chore(brand): rename methods and add sass comments for dividers
gadenbuie Oct 24, 2024
b1d0ccc
refactor: move theme method calls into helper methods
gadenbuie Oct 24, 2024
a4eee03
refactor: factor out get_theme_name
gadenbuie Oct 24, 2024
ab5085e
refactor: Rename BrandBootstrapConfig
gadenbuie Oct 24, 2024
75a7f97
feat: read layers from `brand.defaults.shiny.theme.*`
gadenbuie Oct 24, 2024
438605f
chore: Add `!default` flag
gadenbuie Oct 24, 2024
f083519
chore: early return in no-op case
gadenbuie Oct 24, 2024
dbc4759
refactor: Static method for brand to sass variable helpers
gadenbuie Oct 24, 2024
6e57945
fix: brand-yml inventory objects location
gadenbuie Oct 24, 2024
1c2a504
feat(typography): Map inline code color to $code-color-dark
gadenbuie Oct 24, 2024
9591fb2
example(brand): Keep navbar visible
gadenbuie Oct 24, 2024
721b1be
feat: check that brand_yml is installed before using
gadenbuie Oct 24, 2024
c314806
refactor(BrandBootstrapConfig): Make static methods
gadenbuie Oct 24, 2024
cf103d8
refactor: return brand/bootstrap color sass vars separately
gadenbuie Oct 24, 2024
82b4493
chore: set black/white to brand black white if not set
gadenbuie Oct 24, 2024
59b93c9
refactor: simplify return value
gadenbuie Oct 24, 2024
9e8211c
chore(types): Fix return value
gadenbuie Oct 24, 2024
22bd9bd
refactor: Move preset checking into `ui.Theme()`
gadenbuie Oct 24, 2024
1242c6d
fix: defaults from `defaults.bootstrap`
gadenbuie Oct 24, 2024
9bebe72
fix: rework layer adding to ensure correct order
gadenbuie Oct 24, 2024
0d72daa
chore: update type hint
gadenbuie Oct 24, 2024
fa78936
temp: switch to brand_yml from github
gadenbuie Oct 25, 2024
f7f5605
refactor: brand_yml now handles validation of `color.palette` names
gadenbuie Oct 25, 2024
16db15d
chore: use `_add_defaults_hdr()` in additional place
gadenbuie Oct 25, 2024
af8532a
refactor: don't use `as_css_unit()` just work with strings
gadenbuie Oct 25, 2024
04b3011
refactor: Call `cls` from inside class method
gadenbuie Oct 25, 2024
d030f8d
chore(reload): On `yml` and `yaml` changes
gadenbuie Oct 25, 2024
90b03f5
refactor: brand_yml handles converting typography.base.size to rem
gadenbuie Oct 25, 2024
5d059e2
refactor: simplify finding spec or pkg
gadenbuie Oct 25, 2024
f2d35b6
chore(examples): Add requirements.txt
gadenbuie Oct 25, 2024
83e4a33
docs: Fill out `.from_brand()` documentation
gadenbuie Oct 25, 2024
a34e936
docs: small edit
gadenbuie Oct 25, 2024
9c9b0da
chore: slim type
gadenbuie Oct 25, 2024
439f557
refactor: BrandBootstrapConfig
gadenbuie Oct 25, 2024
805aecd
chore: Add changelog item
gadenbuie Oct 25, 2024
65ae093
chore: use released brand_yml
gadenbuie Oct 25, 2024
bda5054
chore: create new dict
gadenbuie Oct 25, 2024
9b73147
chore: only import brand for type checking
gadenbuie Oct 25, 2024
75dcf2a
Update CHANGELOG.md
cpsievert Oct 25, 2024
51dc33b
Update _theme_brand.py
gadenbuie Oct 25, 2024
339a9aa
example: use layout_sidebar() not page_sidebar()
cpsievert Oct 25, 2024
edbae14
example: pass brand colors along to plotting code (instead of repeati…
cpsievert Oct 25, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/_quarto.yml
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,6 @@ interlinks:
url: https://matplotlib.org/stable/
python:
url: https://docs.python.org/3/
brand-yml:
url: https://posit-dev.github.io/brand-yml/
inv: objects.txt
93 changes: 93 additions & 0 deletions examples/brand/Monda-OFL.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
Copyright 2021 The Monda Project Authors (https://github.com/googlefonts/mondaFont)

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org


-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.

The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.

DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.

"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).

"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).

"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.

"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.

5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are
not met.

DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.
Binary file added examples/brand/Monda.ttf
Binary file not shown.
114 changes: 114 additions & 0 deletions examples/brand/_brand.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
meta:
name:
full: "Retro Arcade Brand"
short: "RetroArc"
link:
home: https://retroarc.example.com
mastodon: https://mastodon.social/@retroarc
github: https://github.com/retroarc
linkedin: https://linkedin.com/company/retroarc
twitter: https://twitter.com/retroarc
facebook: https://facebook.com/retroarc

# logo:
# images:
# icon-light: logos/retroarc-icon-light.png
# icon-dark: logos/retroarc-icon-dark.png
# wide-light: logos/retroarc-wide-light.png
# wide-dark: logos/retroarc-wide-dark.png
# tall-light: logos/retroarc-tall-light.png
# tall-dark: logos/retroarc-tall-dark.png
# small:
# light: logos/retroarc-icon-light.png
# dark: logos/retroarc-icon-dark.png
# medium:
# light: logos/retroarc-wide-light.png
# dark: logos/retroarc-wide-dark.png
# large:
# light: logos/retroarc-tall-light.png
# dark: logos/retroarc-tall-dark.png

color:
palette:
pink: "#E83E8C"
blue: "#007BFF"
cyan: "#17A2B8"
teal: "#20C997"
green: "#28A745"
yellow: "#FFD700"
orange: "#FF7F50"
red: "#FF3333"
purple: "#6F42C1"
indigo: "#6610F2"
black: "#1A1A1A"
white: "#F8F8F8"
foreground: black
background: white
primary: purple
success: green
info: cyan
warning: yellow
danger: orange
light: white
dark: black

typography:
fonts:
- family: Quantico
source: google
weight: [700]
style: [normal, italic]
display: swap
- family: Monda
source: file
files:
- path: Monda.ttf
weight: 400..700
- family: Share Tech Mono
source: bunny
weight: 400
style: normal
display: swap
base:
family: Monda
size: 17px
weight: 400
line-height: 1.5
headings:
family: Quantico
weight: 400
line-height: 1.2
style: normal
monospace:
family: Share Tech Mono
size: 0.9em
weight: 400
monospace-inline:
family: Share Tech Mono
# size: 0.9em
weight: 400
color: yellow
background-color: "#1a1a1add"
monospace-block:
family: Share Tech Mono
size: 1.1em
weight: 400
color: green
background-color: black
line-height: 1.4
link:
weight: 400
background-color: purple
color: white
decoration: "underline"

defaults:
bootstrap:
my-pink: "$brand-pink"
shiny:
theme:
preset: shiny
rules: |
.navbar-brand { color: $my-pink }
# TODO: Find an appropriate theme variable to set
# navbar-bg: $brand-purple
116 changes: 116 additions & 0 deletions examples/brand/_colors.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
// https://github.com/twbs/bootstrap/blob/v5.3.3/site/assets/scss/_colors.scss

.bd-blue-100 { color: color-contrast($blue-100); background-color: $blue-100; }
.bd-blue-200 { color: color-contrast($blue-200); background-color: $blue-200; }
.bd-blue-300 { color: color-contrast($blue-300); background-color: $blue-300; }
.bd-blue-400 { color: color-contrast($blue-400); background-color: $blue-400; }
.bd-blue-500 { color: color-contrast($blue-500); background-color: $blue-500; }
.bd-blue-600 { color: color-contrast($blue-600); background-color: $blue-600; }
.bd-blue-700 { color: color-contrast($blue-700); background-color: $blue-700; }
.bd-blue-800 { color: color-contrast($blue-800); background-color: $blue-800; }
.bd-blue-900 { color: color-contrast($blue-900); background-color: $blue-900; }

.bd-indigo-100 { color: color-contrast($indigo-100); background-color: $indigo-100; }
.bd-indigo-200 { color: color-contrast($indigo-200); background-color: $indigo-200; }
.bd-indigo-300 { color: color-contrast($indigo-300); background-color: $indigo-300; }
.bd-indigo-400 { color: color-contrast($indigo-400); background-color: $indigo-400; }
.bd-indigo-500 { color: color-contrast($indigo-500); background-color: $indigo-500; }
.bd-indigo-600 { color: color-contrast($indigo-600); background-color: $indigo-600; }
.bd-indigo-700 { color: color-contrast($indigo-700); background-color: $indigo-700; }
.bd-indigo-800 { color: color-contrast($indigo-800); background-color: $indigo-800; }
.bd-indigo-900 { color: color-contrast($indigo-900); background-color: $indigo-900; }

.bd-purple-100 { color: color-contrast($purple-100); background-color: $purple-100; }
.bd-purple-200 { color: color-contrast($purple-200); background-color: $purple-200; }
.bd-purple-300 { color: color-contrast($purple-300); background-color: $purple-300; }
.bd-purple-400 { color: color-contrast($purple-400); background-color: $purple-400; }
.bd-purple-500 { color: color-contrast($purple-500); background-color: $purple-500; }
.bd-purple-600 { color: color-contrast($purple-600); background-color: $purple-600; }
.bd-purple-700 { color: color-contrast($purple-700); background-color: $purple-700; }
.bd-purple-800 { color: color-contrast($purple-800); background-color: $purple-800; }
.bd-purple-900 { color: color-contrast($purple-900); background-color: $purple-900; }

.bd-pink-100 { color: color-contrast($pink-100); background-color: $pink-100; }
.bd-pink-200 { color: color-contrast($pink-200); background-color: $pink-200; }
.bd-pink-300 { color: color-contrast($pink-300); background-color: $pink-300; }
.bd-pink-400 { color: color-contrast($pink-400); background-color: $pink-400; }
.bd-pink-500 { color: color-contrast($pink-500); background-color: $pink-500; }
.bd-pink-600 { color: color-contrast($pink-600); background-color: $pink-600; }
.bd-pink-700 { color: color-contrast($pink-700); background-color: $pink-700; }
.bd-pink-800 { color: color-contrast($pink-800); background-color: $pink-800; }
.bd-pink-900 { color: color-contrast($pink-900); background-color: $pink-900; }

.bd-red-100 { color: color-contrast($red-100); background-color: $red-100; }
.bd-red-200 { color: color-contrast($red-200); background-color: $red-200; }
.bd-red-300 { color: color-contrast($red-300); background-color: $red-300; }
.bd-red-400 { color: color-contrast($red-400); background-color: $red-400; }
.bd-red-500 { color: color-contrast($red-500); background-color: $red-500; }
.bd-red-600 { color: color-contrast($red-600); background-color: $red-600; }
.bd-red-700 { color: color-contrast($red-700); background-color: $red-700; }
.bd-red-800 { color: color-contrast($red-800); background-color: $red-800; }
.bd-red-900 { color: color-contrast($red-900); background-color: $red-900; }

.bd-orange-100 { color: color-contrast($orange-100); background-color: $orange-100; }
.bd-orange-200 { color: color-contrast($orange-200); background-color: $orange-200; }
.bd-orange-300 { color: color-contrast($orange-300); background-color: $orange-300; }
.bd-orange-400 { color: color-contrast($orange-400); background-color: $orange-400; }
.bd-orange-500 { color: color-contrast($orange-500); background-color: $orange-500; }
.bd-orange-600 { color: color-contrast($orange-600); background-color: $orange-600; }
.bd-orange-700 { color: color-contrast($orange-700); background-color: $orange-700; }
.bd-orange-800 { color: color-contrast($orange-800); background-color: $orange-800; }
.bd-orange-900 { color: color-contrast($orange-900); background-color: $orange-900; }

.bd-yellow-100 { color: color-contrast($yellow-100); background-color: $yellow-100; }
.bd-yellow-200 { color: color-contrast($yellow-200); background-color: $yellow-200; }
.bd-yellow-300 { color: color-contrast($yellow-300); background-color: $yellow-300; }
.bd-yellow-400 { color: color-contrast($yellow-400); background-color: $yellow-400; }
.bd-yellow-500 { color: color-contrast($yellow-500); background-color: $yellow-500; }
.bd-yellow-600 { color: color-contrast($yellow-600); background-color: $yellow-600; }
.bd-yellow-700 { color: color-contrast($yellow-700); background-color: $yellow-700; }
.bd-yellow-800 { color: color-contrast($yellow-800); background-color: $yellow-800; }
.bd-yellow-900 { color: color-contrast($yellow-900); background-color: $yellow-900; }

.bd-green-100 { color: color-contrast($green-100); background-color: $green-100; }
.bd-green-200 { color: color-contrast($green-200); background-color: $green-200; }
.bd-green-300 { color: color-contrast($green-300); background-color: $green-300; }
.bd-green-400 { color: color-contrast($green-400); background-color: $green-400; }
.bd-green-500 { color: color-contrast($green-500); background-color: $green-500; }
.bd-green-600 { color: color-contrast($green-600); background-color: $green-600; }
.bd-green-700 { color: color-contrast($green-700); background-color: $green-700; }
.bd-green-800 { color: color-contrast($green-800); background-color: $green-800; }
.bd-green-900 { color: color-contrast($green-900); background-color: $green-900; }

.bd-teal-100 { color: color-contrast($teal-100); background-color: $teal-100; }
.bd-teal-200 { color: color-contrast($teal-200); background-color: $teal-200; }
.bd-teal-300 { color: color-contrast($teal-300); background-color: $teal-300; }
.bd-teal-400 { color: color-contrast($teal-400); background-color: $teal-400; }
.bd-teal-500 { color: color-contrast($teal-500); background-color: $teal-500; }
.bd-teal-600 { color: color-contrast($teal-600); background-color: $teal-600; }
.bd-teal-700 { color: color-contrast($teal-700); background-color: $teal-700; }
.bd-teal-800 { color: color-contrast($teal-800); background-color: $teal-800; }
.bd-teal-900 { color: color-contrast($teal-900); background-color: $teal-900; }

.bd-cyan-100 { color: color-contrast($cyan-100); background-color: $cyan-100; }
.bd-cyan-200 { color: color-contrast($cyan-200); background-color: $cyan-200; }
.bd-cyan-300 { color: color-contrast($cyan-300); background-color: $cyan-300; }
.bd-cyan-400 { color: color-contrast($cyan-400); background-color: $cyan-400; }
.bd-cyan-500 { color: color-contrast($cyan-500); background-color: $cyan-500; }
.bd-cyan-600 { color: color-contrast($cyan-600); background-color: $cyan-600; }
.bd-cyan-700 { color: color-contrast($cyan-700); background-color: $cyan-700; }
.bd-cyan-800 { color: color-contrast($cyan-800); background-color: $cyan-800; }
.bd-cyan-900 { color: color-contrast($cyan-900); background-color: $cyan-900; }

.bd-gray-100 { color: color-contrast($gray-100); background-color: $gray-100; }
.bd-gray-200 { color: color-contrast($gray-200); background-color: $gray-200; }
.bd-gray-300 { color: color-contrast($gray-300); background-color: $gray-300; }
.bd-gray-400 { color: color-contrast($gray-400); background-color: $gray-400; }
.bd-gray-500 { color: color-contrast($gray-500); background-color: $gray-500; }
.bd-gray-600 { color: color-contrast($gray-600); background-color: $gray-600; }
.bd-gray-700 { color: color-contrast($gray-700); background-color: $gray-700; }
.bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
.bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }

.bd-white { color: color-contrast($white); background-color: $white; border: 2px solid $body-color;}
.bd-black { color: color-contrast($black); background-color: $black; }
.bd-foreground { color: $body-bg; background-color: $body-color; }
.bd-background { color: $body-color; background-color: $body-bg; border: 2px solid $body-color;}
10 changes: 10 additions & 0 deletions examples/brand/app-express.py
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
from shiny.express import input, render, ui

ui.page_opts(theme=ui.Theme.from_brand(__file__))

ui.input_slider("n", "N", 0, 100, 20)


@render.code
def txt():
return f"n*2 is {input.n() * 2}"
Loading
Loading