|
from __future__ import annotations |
|
|
|
import json |
|
import re |
|
import tempfile |
|
import textwrap |
|
from pathlib import Path |
|
from typing import Dict, Iterable |
|
|
|
import huggingface_hub |
|
import requests |
|
import semantic_version as semver |
|
from huggingface_hub import CommitOperationAdd |
|
|
|
from gradio.documentation import document, set_documentation_group |
|
from gradio.themes.utils import ( |
|
colors, |
|
fonts, |
|
get_matching_version, |
|
get_theme_assets, |
|
sizes, |
|
) |
|
from gradio.themes.utils.readme_content import README_CONTENT |
|
|
|
set_documentation_group("themes") |
|
|
|
|
|
class ThemeClass: |
|
def __init__(self): |
|
self._stylesheets = [] |
|
|
|
def _get_theme_css(self): |
|
css = {} |
|
dark_css = {} |
|
|
|
for attr, val in self.__dict__.items(): |
|
if attr.startswith("_"): |
|
continue |
|
if val is None: |
|
if attr.endswith("_dark"): |
|
dark_css[attr[:-5]] = None |
|
continue |
|
else: |
|
raise ValueError( |
|
f"Cannot set '{attr}' to None - only dark mode variables can be None." |
|
) |
|
val = str(val) |
|
pattern = r"(\*)([\w_]+)(\b)" |
|
|
|
def repl_func(match): |
|
full_match = match.group(0) |
|
if full_match.startswith("*") and full_match.endswith("_dark"): |
|
raise ValueError( |
|
f"Cannot refer '{attr}' to '{val}' - dark variable references are automatically used for dark mode attributes, so do not use the _dark suffix in the value." |
|
) |
|
if ( |
|
attr.endswith("_dark") |
|
and full_match.startswith("*") |
|
and attr[:-5] == full_match[1:] |
|
): |
|
raise ValueError( |
|
f"Cannot refer '{attr}' to '{val}' - if dark and light mode values are the same, set dark mode version to None." |
|
) |
|
|
|
word = match.group(2) |
|
word = word.replace("_", "-") |
|
return f"var(--{word})" |
|
|
|
val = re.sub(pattern, repl_func, val) |
|
|
|
attr = attr.replace("_", "-") |
|
|
|
if attr.endswith("-dark"): |
|
attr = attr[:-5] |
|
dark_css[attr] = val |
|
else: |
|
css[attr] = val |
|
|
|
for attr, val in css.items(): |
|
if attr not in dark_css: |
|
dark_css[attr] = val |
|
|
|
css_code = ( |
|
":root {\n" |
|
+ "\n".join([f" --{attr}: {val};" for attr, val in css.items()]) |
|
+ "\n}" |
|
) |
|
dark_css_code = ( |
|
".dark {\n" |
|
+ "\n".join([f" --{attr}: {val};" for attr, val in dark_css.items()]) |
|
+ "\n}" |
|
) |
|
|
|
return css_code + "\n" + dark_css_code |
|
|
|
def to_dict(self): |
|
"""Convert the theme into a python dictionary.""" |
|
schema = {"theme": {}} |
|
for prop in dir(self): |
|
if ( |
|
not prop.startswith("_") |
|
or prop.startswith("_font") |
|
or prop == "_stylesheets" |
|
) and isinstance(getattr(self, prop), (list, str)): |
|
schema["theme"][prop] = getattr(self, prop) |
|
return schema |
|
|
|
@classmethod |
|
def load(cls, path: str) -> "ThemeClass": |
|
"""Load a theme from a json file. |
|
|
|
Parameters: |
|
path: The filepath to read. |
|
""" |
|
theme = json.load(open(path), object_hook=fonts.as_font) |
|
return cls.from_dict(theme) |
|
|
|
@classmethod |
|
def from_dict(cls, theme: Dict[str, Dict[str, str]]) -> "ThemeClass": |
|
"""Create a theme instance from a dictionary representation. |
|
|
|
Parameters: |
|
theme: The dictionary representation of the theme. |
|
""" |
|
base = cls() |
|
for prop, value in theme["theme"].items(): |
|
setattr(base, prop, value) |
|
return base |
|
|
|
def dump(self, filename: str): |
|
"""Write the theme to a json file. |
|
|
|
Parameters: |
|
filename: The path to write the theme too |
|
""" |
|
as_dict = self.to_dict() |
|
json.dump(as_dict, open(Path(filename), "w"), cls=fonts.FontEncoder) |
|
|
|
@classmethod |
|
def from_hub(cls, repo_name: str, hf_token: str | None = None): |
|
"""Load a theme from the hub. |
|
|
|
This DOES NOT require a HuggingFace account for downloading publicly available themes. |
|
|
|
Parameters: |
|
repo_name: string of the form <author>/<theme-name>@<semantic-version-expression>. If a semantic version expression is omitted, the latest version will be fetched. |
|
hf_token: HuggingFace Token. Only needed to download private themes. |
|
""" |
|
if "@" not in repo_name: |
|
name, version = repo_name, None |
|
else: |
|
name, version = repo_name.split("@") |
|
|
|
api = huggingface_hub.HfApi(token=hf_token) |
|
|
|
try: |
|
space_info = api.space_info(name) |
|
except requests.HTTPError as e: |
|
raise ValueError(f"The space {name} does not exist") from e |
|
|
|
assets = get_theme_assets(space_info) |
|
matching_version = get_matching_version(assets, version) |
|
|
|
if not matching_version: |
|
raise ValueError( |
|
f"Cannot find a matching version for expression {version} " |
|
f"from files {[f.filename for f in assets]}" |
|
) |
|
|
|
theme_file = huggingface_hub.hf_hub_download( |
|
repo_id=name, |
|
repo_type="space", |
|
filename=f"themes/theme_schema@{matching_version.version}.json", |
|
) |
|
return cls.load(theme_file) |
|
|
|
@staticmethod |
|
def _get_next_version(space_info: huggingface_hub.hf_api.SpaceInfo) -> str: |
|
assets = get_theme_assets(space_info) |
|
latest_version = max(assets, key=lambda asset: asset.version).version |
|
return str(latest_version.next_patch()) |
|
|
|
@staticmethod |
|
def _theme_version_exists( |
|
space_info: huggingface_hub.hf_api.SpaceInfo, version: str |
|
) -> bool: |
|
assets = get_theme_assets(space_info) |
|
return any(a.version == semver.Version(version) for a in assets) |
|
|
|
def push_to_hub( |
|
self, |
|
repo_name: str, |
|
org_name: str | None = None, |
|
version: str | None = None, |
|
hf_token: str | None = None, |
|
theme_name: str | None = None, |
|
description: str | None = None, |
|
private: bool = False, |
|
): |
|
"""Upload a theme to the HuggingFace hub. |
|
|
|
This requires a HuggingFace account. |
|
|
|
Parameters: |
|
repo_name: The name of the repository to store the theme assets, e.g. 'my_theme' or 'sunset'. |
|
org_name: The name of the org to save the space in. If None (the default), the username corresponding to the logged in user, or hƒ_token is used. |
|
version: A semantic version tag for theme. Bumping the version tag lets you publish updates to a theme without changing the look of applications that already loaded your theme. |
|
hf_token: API token for your HuggingFace account |
|
theme_name: Name for the name. If None, defaults to repo_name |
|
description: A long form description to your theme. |
|
""" |
|
|
|
from gradio import __version__ |
|
|
|
api = huggingface_hub.HfApi() |
|
|
|
if not hf_token: |
|
try: |
|
author = huggingface_hub.whoami()["name"] |
|
except OSError as e: |
|
raise ValueError( |
|
"In order to push to hub, log in via `huggingface-cli login` " |
|
"or provide a theme_token to push_to_hub. For more information " |
|
"see https://huggingface.co/docs/huggingface_hub/quick-start#login" |
|
) from e |
|
else: |
|
author = huggingface_hub.whoami(token=hf_token)["name"] |
|
|
|
space_id = f"{org_name or author}/{repo_name}" |
|
|
|
try: |
|
space_info = api.space_info(space_id) |
|
except requests.HTTPError: |
|
space_info = None |
|
|
|
space_exists = space_info is not None |
|
|
|
|
|
if not version: |
|
if space_exists: |
|
version = self._get_next_version(space_info) |
|
else: |
|
version = "0.0.1" |
|
else: |
|
_ = semver.Version(version) |
|
|
|
if space_exists and self._theme_version_exists(space_info, version): |
|
raise ValueError( |
|
f"The space {space_id} already has a " |
|
f"theme with version {version}. See: themes/theme_schema@{version}.json. " |
|
"To manually override this version, use the HuggingFace hub UI." |
|
) |
|
|
|
theme_name = theme_name or repo_name |
|
|
|
with tempfile.NamedTemporaryFile( |
|
mode="w", delete=False, suffix=".json" |
|
) as css_file: |
|
contents = self.to_dict() |
|
contents["version"] = version |
|
json.dump(contents, css_file, cls=fonts.FontEncoder) |
|
with tempfile.NamedTemporaryFile(mode="w", delete=False) as readme_file: |
|
readme_content = README_CONTENT.format( |
|
theme_name=theme_name, |
|
description=description or "Add a description of this theme here!", |
|
author=author, |
|
gradio_version=__version__, |
|
) |
|
readme_file.write(textwrap.dedent(readme_content)) |
|
with tempfile.NamedTemporaryFile(mode="w", delete=False) as app_file: |
|
contents = open(str(Path(__file__).parent / "app.py")).read() |
|
contents = re.sub( |
|
r"theme=gr.themes.Default\(\)", |
|
f"theme='{space_id}'", |
|
contents, |
|
) |
|
contents = re.sub(r"{THEME}", theme_name or repo_name, contents) |
|
contents = re.sub(r"{AUTHOR}", org_name or author, contents) |
|
contents = re.sub(r"{SPACE_NAME}", repo_name, contents) |
|
app_file.write(contents) |
|
|
|
operations = [ |
|
CommitOperationAdd( |
|
path_in_repo=f"themes/theme_schema@{version}.json", |
|
path_or_fileobj=css_file.name, |
|
), |
|
CommitOperationAdd( |
|
path_in_repo="README.md", path_or_fileobj=readme_file.name |
|
), |
|
CommitOperationAdd(path_in_repo="app.py", path_or_fileobj=app_file.name), |
|
CommitOperationAdd( |
|
path_in_repo="theme_dropdown.py", |
|
path_or_fileobj=str( |
|
Path(__file__).parent / "utils" / "theme_dropdown.py" |
|
), |
|
), |
|
] |
|
|
|
huggingface_hub.create_repo( |
|
space_id, |
|
repo_type="space", |
|
space_sdk="gradio", |
|
token=hf_token, |
|
exist_ok=True, |
|
private=private, |
|
) |
|
|
|
api.create_commit( |
|
repo_id=space_id, |
|
commit_message="Updating theme", |
|
repo_type="space", |
|
operations=operations, |
|
token=hf_token, |
|
) |
|
url = f"https://huggingface.co/spaces/{space_id}" |
|
print(f"See your theme here! {url}") |
|
return url |
|
|
|
|
|
@document("push_to_hub", "from_hub", "load", "dump", "from_dict", "to_dict") |
|
class Base(ThemeClass): |
|
def __init__( |
|
self, |
|
*, |
|
primary_hue: colors.Color | str = colors.blue, |
|
secondary_hue: colors.Color | str = colors.blue, |
|
neutral_hue: colors.Color | str = colors.gray, |
|
text_size: sizes.Size | str = sizes.text_md, |
|
spacing_size: sizes.Size | str = sizes.spacing_md, |
|
radius_size: sizes.Size | str = sizes.radius_md, |
|
font: fonts.Font |
|
| str |
|
| Iterable[fonts.Font | str] = ( |
|
fonts.GoogleFont("Source Sans Pro"), |
|
"ui-sans-serif", |
|
"system-ui", |
|
"sans-serif", |
|
), |
|
font_mono: fonts.Font |
|
| str |
|
| Iterable[fonts.Font | str] = ( |
|
fonts.GoogleFont("IBM Plex Mono"), |
|
"ui-monospace", |
|
"Consolas", |
|
"monospace", |
|
), |
|
): |
|
""" |
|
Parameters: |
|
primary_hue: The primary hue of the theme. Load a preset, like gradio.themes.colors.green (or just the string "green"), or pass your own gradio.themes.utils.Color object. |
|
secondary_hue: The secondary hue of the theme. Load a preset, like gradio.themes.colors.green (or just the string "green"), or pass your own gradio.themes.utils.Color object. |
|
neutral_hue: The neutral hue of the theme, used . Load a preset, like gradio.themes.colors.green (or just the string "green"), or pass your own gradio.themes.utils.Color object. |
|
text_size: The size of the text. Load a preset, like gradio.themes.sizes.text_sm (or just the string "sm"), or pass your own gradio.themes.utils.Size object. |
|
spacing_size: The size of the spacing. Load a preset, like gradio.themes.sizes.spacing_sm (or just the string "sm"), or pass your own gradio.themes.utils.Size object. |
|
radius_size: The radius size of corners. Load a preset, like gradio.themes.sizes.radius_sm (or just the string "sm"), or pass your own gradio.themes.utils.Size object. |
|
font: The primary font to use for the theme. Pass a string for a system font, or a gradio.themes.font.GoogleFont object to load a font from Google Fonts. Pass a list of fonts for fallbacks. |
|
font_mono: The monospace font to use for the theme, applies to code. Pass a string for a system font, or a gradio.themes.font.GoogleFont object to load a font from Google Fonts. Pass a list of fonts for fallbacks. |
|
""" |
|
|
|
def expand_shortcut(shortcut, mode="color", prefix=None): |
|
if not isinstance(shortcut, str): |
|
return shortcut |
|
if mode == "color": |
|
for color in colors.Color.all: |
|
if color.name == shortcut: |
|
return color |
|
raise ValueError(f"Color shortcut {shortcut} not found.") |
|
elif mode == "size": |
|
for size in sizes.Size.all: |
|
if size.name == prefix + "_" + shortcut: |
|
return size |
|
raise ValueError(f"Size shortcut {shortcut} not found.") |
|
|
|
primary_hue = expand_shortcut(primary_hue, mode="color") |
|
secondary_hue = expand_shortcut(secondary_hue, mode="color") |
|
neutral_hue = expand_shortcut(neutral_hue, mode="color") |
|
text_size = expand_shortcut(text_size, mode="size", prefix="text") |
|
spacing_size = expand_shortcut(spacing_size, mode="size", prefix="spacing") |
|
radius_size = expand_shortcut(radius_size, mode="size", prefix="radius") |
|
|
|
|
|
self.primary_50 = primary_hue.c50 |
|
self.primary_100 = primary_hue.c100 |
|
self.primary_200 = primary_hue.c200 |
|
self.primary_300 = primary_hue.c300 |
|
self.primary_400 = primary_hue.c400 |
|
self.primary_500 = primary_hue.c500 |
|
self.primary_600 = primary_hue.c600 |
|
self.primary_700 = primary_hue.c700 |
|
self.primary_800 = primary_hue.c800 |
|
self.primary_900 = primary_hue.c900 |
|
self.primary_950 = primary_hue.c950 |
|
|
|
self.secondary_50 = secondary_hue.c50 |
|
self.secondary_100 = secondary_hue.c100 |
|
self.secondary_200 = secondary_hue.c200 |
|
self.secondary_300 = secondary_hue.c300 |
|
self.secondary_400 = secondary_hue.c400 |
|
self.secondary_500 = secondary_hue.c500 |
|
self.secondary_600 = secondary_hue.c600 |
|
self.secondary_700 = secondary_hue.c700 |
|
self.secondary_800 = secondary_hue.c800 |
|
self.secondary_900 = secondary_hue.c900 |
|
self.secondary_950 = secondary_hue.c950 |
|
|
|
self.neutral_50 = neutral_hue.c50 |
|
self.neutral_100 = neutral_hue.c100 |
|
self.neutral_200 = neutral_hue.c200 |
|
self.neutral_300 = neutral_hue.c300 |
|
self.neutral_400 = neutral_hue.c400 |
|
self.neutral_500 = neutral_hue.c500 |
|
self.neutral_600 = neutral_hue.c600 |
|
self.neutral_700 = neutral_hue.c700 |
|
self.neutral_800 = neutral_hue.c800 |
|
self.neutral_900 = neutral_hue.c900 |
|
self.neutral_950 = neutral_hue.c950 |
|
|
|
|
|
self.spacing_xxs = spacing_size.xxs |
|
self.spacing_xs = spacing_size.xs |
|
self.spacing_sm = spacing_size.sm |
|
self.spacing_md = spacing_size.md |
|
self.spacing_lg = spacing_size.lg |
|
self.spacing_xl = spacing_size.xl |
|
self.spacing_xxl = spacing_size.xxl |
|
|
|
self.radius_xxs = radius_size.xxs |
|
self.radius_xs = radius_size.xs |
|
self.radius_sm = radius_size.sm |
|
self.radius_md = radius_size.md |
|
self.radius_lg = radius_size.lg |
|
self.radius_xl = radius_size.xl |
|
self.radius_xxl = radius_size.xxl |
|
|
|
self.text_xxs = text_size.xxs |
|
self.text_xs = text_size.xs |
|
self.text_sm = text_size.sm |
|
self.text_md = text_size.md |
|
self.text_lg = text_size.lg |
|
self.text_xl = text_size.xl |
|
self.text_xxl = text_size.xxl |
|
|
|
|
|
if not isinstance(font, Iterable): |
|
font = [font] |
|
self._font = [ |
|
fontfam if isinstance(fontfam, fonts.Font) else fonts.Font(fontfam) |
|
for fontfam in font |
|
] |
|
if not isinstance(font_mono, Iterable): |
|
font_mono = [font_mono] |
|
self._font_mono = [ |
|
fontfam if isinstance(fontfam, fonts.Font) else fonts.Font(fontfam) |
|
for fontfam in font_mono |
|
] |
|
self.font = ", ".join(str(font) for font in self._font) |
|
self.font_mono = ", ".join(str(font) for font in self._font_mono) |
|
|
|
self._stylesheets = [] |
|
for font in self._font + self._font_mono: |
|
font_stylesheet = font.stylesheet() |
|
if font_stylesheet: |
|
self._stylesheets.append(font_stylesheet) |
|
|
|
self.set() |
|
|
|
def set( |
|
self, |
|
*, |
|
|
|
body_background_fill=None, |
|
body_background_fill_dark=None, |
|
body_text_color=None, |
|
body_text_color_dark=None, |
|
body_text_size=None, |
|
body_text_color_subdued=None, |
|
body_text_color_subdued_dark=None, |
|
body_text_weight=None, |
|
embed_radius=None, |
|
|
|
background_fill_primary=None, |
|
background_fill_primary_dark=None, |
|
background_fill_secondary=None, |
|
background_fill_secondary_dark=None, |
|
border_color_accent=None, |
|
border_color_accent_dark=None, |
|
border_color_primary=None, |
|
border_color_primary_dark=None, |
|
color_accent=None, |
|
color_accent_soft=None, |
|
color_accent_soft_dark=None, |
|
|
|
link_text_color=None, |
|
link_text_color_dark=None, |
|
link_text_color_active=None, |
|
link_text_color_active_dark=None, |
|
link_text_color_hover=None, |
|
link_text_color_hover_dark=None, |
|
link_text_color_visited=None, |
|
link_text_color_visited_dark=None, |
|
prose_text_size=None, |
|
prose_text_weight=None, |
|
prose_header_text_weight=None, |
|
|
|
shadow_drop=None, |
|
shadow_drop_lg=None, |
|
shadow_inset=None, |
|
shadow_spread=None, |
|
shadow_spread_dark=None, |
|
|
|
block_background_fill=None, |
|
block_background_fill_dark=None, |
|
block_border_color=None, |
|
block_border_color_dark=None, |
|
block_border_width=None, |
|
block_border_width_dark=None, |
|
block_info_text_color=None, |
|
block_info_text_color_dark=None, |
|
block_info_text_size=None, |
|
block_info_text_weight=None, |
|
block_label_background_fill=None, |
|
block_label_background_fill_dark=None, |
|
block_label_border_color=None, |
|
block_label_border_color_dark=None, |
|
block_label_border_width=None, |
|
block_label_border_width_dark=None, |
|
block_label_text_color=None, |
|
block_label_text_color_dark=None, |
|
block_label_margin=None, |
|
block_label_padding=None, |
|
block_label_radius=None, |
|
block_label_right_radius=None, |
|
block_label_text_size=None, |
|
block_label_text_weight=None, |
|
block_padding=None, |
|
block_radius=None, |
|
block_shadow=None, |
|
block_shadow_dark=None, |
|
block_title_background_fill=None, |
|
block_title_background_fill_dark=None, |
|
block_title_border_color=None, |
|
block_title_border_color_dark=None, |
|
block_title_border_width=None, |
|
block_title_border_width_dark=None, |
|
block_title_text_color=None, |
|
block_title_text_color_dark=None, |
|
block_title_padding=None, |
|
block_title_radius=None, |
|
block_title_text_size=None, |
|
block_title_text_weight=None, |
|
container_radius=None, |
|
form_gap_width=None, |
|
layout_gap=None, |
|
panel_background_fill=None, |
|
panel_background_fill_dark=None, |
|
panel_border_color=None, |
|
panel_border_color_dark=None, |
|
panel_border_width=None, |
|
panel_border_width_dark=None, |
|
section_header_text_size=None, |
|
section_header_text_weight=None, |
|
|
|
checkbox_background_color=None, |
|
checkbox_background_color_dark=None, |
|
checkbox_background_color_focus=None, |
|
checkbox_background_color_focus_dark=None, |
|
checkbox_background_color_hover=None, |
|
checkbox_background_color_hover_dark=None, |
|
checkbox_background_color_selected=None, |
|
checkbox_background_color_selected_dark=None, |
|
checkbox_border_color=None, |
|
checkbox_border_color_dark=None, |
|
checkbox_border_color_focus=None, |
|
checkbox_border_color_focus_dark=None, |
|
checkbox_border_color_hover=None, |
|
checkbox_border_color_hover_dark=None, |
|
checkbox_border_color_selected=None, |
|
checkbox_border_color_selected_dark=None, |
|
checkbox_border_radius=None, |
|
checkbox_border_width=None, |
|
checkbox_border_width_dark=None, |
|
checkbox_check=None, |
|
radio_circle=None, |
|
checkbox_shadow=None, |
|
checkbox_label_background_fill=None, |
|
checkbox_label_background_fill_dark=None, |
|
checkbox_label_background_fill_hover=None, |
|
checkbox_label_background_fill_hover_dark=None, |
|
checkbox_label_background_fill_selected=None, |
|
checkbox_label_background_fill_selected_dark=None, |
|
checkbox_label_border_color=None, |
|
checkbox_label_border_color_dark=None, |
|
checkbox_label_border_color_hover=None, |
|
checkbox_label_border_color_hover_dark=None, |
|
checkbox_label_border_width=None, |
|
checkbox_label_border_width_dark=None, |
|
checkbox_label_gap=None, |
|
checkbox_label_padding=None, |
|
checkbox_label_shadow=None, |
|
checkbox_label_text_size=None, |
|
checkbox_label_text_weight=None, |
|
checkbox_label_text_color=None, |
|
checkbox_label_text_color_dark=None, |
|
checkbox_label_text_color_selected=None, |
|
checkbox_label_text_color_selected_dark=None, |
|
error_background_fill=None, |
|
error_background_fill_dark=None, |
|
error_border_color=None, |
|
error_border_color_dark=None, |
|
error_border_width=None, |
|
error_border_width_dark=None, |
|
error_text_color=None, |
|
error_text_color_dark=None, |
|
input_background_fill=None, |
|
input_background_fill_dark=None, |
|
input_background_fill_focus=None, |
|
input_background_fill_focus_dark=None, |
|
input_background_fill_hover=None, |
|
input_background_fill_hover_dark=None, |
|
input_border_color=None, |
|
input_border_color_dark=None, |
|
input_border_color_focus=None, |
|
input_border_color_focus_dark=None, |
|
input_border_color_hover=None, |
|
input_border_color_hover_dark=None, |
|
input_border_width=None, |
|
input_border_width_dark=None, |
|
input_padding=None, |
|
input_placeholder_color=None, |
|
input_placeholder_color_dark=None, |
|
input_radius=None, |
|
input_shadow=None, |
|
input_shadow_dark=None, |
|
input_shadow_focus=None, |
|
input_shadow_focus_dark=None, |
|
input_text_size=None, |
|
input_text_weight=None, |
|
loader_color=None, |
|
loader_color_dark=None, |
|
slider_color=None, |
|
slider_color_dark=None, |
|
stat_background_fill=None, |
|
stat_background_fill_dark=None, |
|
table_border_color=None, |
|
table_border_color_dark=None, |
|
table_even_background_fill=None, |
|
table_even_background_fill_dark=None, |
|
table_odd_background_fill=None, |
|
table_odd_background_fill_dark=None, |
|
table_radius=None, |
|
table_row_focus=None, |
|
table_row_focus_dark=None, |
|
|
|
button_border_width=None, |
|
button_border_width_dark=None, |
|
button_cancel_background_fill=None, |
|
button_cancel_background_fill_dark=None, |
|
button_cancel_background_fill_hover=None, |
|
button_cancel_background_fill_hover_dark=None, |
|
button_cancel_border_color=None, |
|
button_cancel_border_color_dark=None, |
|
button_cancel_border_color_hover=None, |
|
button_cancel_border_color_hover_dark=None, |
|
button_cancel_text_color=None, |
|
button_cancel_text_color_dark=None, |
|
button_cancel_text_color_hover=None, |
|
button_cancel_text_color_hover_dark=None, |
|
button_large_padding=None, |
|
button_large_radius=None, |
|
button_large_text_size=None, |
|
button_large_text_weight=None, |
|
button_primary_background_fill=None, |
|
button_primary_background_fill_dark=None, |
|
button_primary_background_fill_hover=None, |
|
button_primary_background_fill_hover_dark=None, |
|
button_primary_border_color=None, |
|
button_primary_border_color_dark=None, |
|
button_primary_border_color_hover=None, |
|
button_primary_border_color_hover_dark=None, |
|
button_primary_text_color=None, |
|
button_primary_text_color_dark=None, |
|
button_primary_text_color_hover=None, |
|
button_primary_text_color_hover_dark=None, |
|
button_secondary_background_fill=None, |
|
button_secondary_background_fill_dark=None, |
|
button_secondary_background_fill_hover=None, |
|
button_secondary_background_fill_hover_dark=None, |
|
button_secondary_border_color=None, |
|
button_secondary_border_color_dark=None, |
|
button_secondary_border_color_hover=None, |
|
button_secondary_border_color_hover_dark=None, |
|
button_secondary_text_color=None, |
|
button_secondary_text_color_dark=None, |
|
button_secondary_text_color_hover=None, |
|
button_secondary_text_color_hover_dark=None, |
|
button_shadow=None, |
|
button_shadow_active=None, |
|
button_shadow_hover=None, |
|
button_small_padding=None, |
|
button_small_radius=None, |
|
button_small_text_size=None, |
|
button_small_text_weight=None, |
|
button_transition=None, |
|
) -> Base: |
|
""" |
|
Parameters: |
|
body_background_fill: The background of the entire app. |
|
body_background_fill_dark: The background of the entire app in dark mode. |
|
body_text_color: The default text color. |
|
body_text_color_dark: The default text color in dark mode. |
|
body_text_size: The default text size. |
|
body_text_color_subdued: The text color used for softer, less important text. |
|
body_text_color_subdued_dark: The text color used for softer, less important text in dark mode. |
|
body_text_weight: The default text weight. |
|
embed_radius: The corner radius used for embedding when the app is embedded within a page. |
|
background_fill_primary: The background primarily used for items placed directly on the page. |
|
background_fill_primary_dark: The background primarily used for items placed directly on the page in dark mode. |
|
background_fill_secondary: The background primarily used for items placed on top of another item. |
|
background_fill_secondary_dark: The background primarily used for items placed on top of another item in dark mode. |
|
border_color_accent: The border color used for accented items. |
|
border_color_accent_dark: The border color used for accented items in dark mode. |
|
border_color_primary: The border color primarily used for items placed directly on the page. |
|
border_color_primary_dark: The border color primarily used for items placed directly on the page in dark mode. |
|
color_accent: The color used for accented items. |
|
color_accent_soft: The softer color used for accented items. |
|
color_accent_soft_dark: The softer color used for accented items in dark mode. |
|
link_text_color: The text color used for links. |
|
link_text_color_dark: The text color used for links in dark mode. |
|
link_text_color_active: The text color used for links when they are active. |
|
link_text_color_active_dark: The text color used for links when they are active in dark mode. |
|
link_text_color_hover: The text color used for links when they are hovered over. |
|
link_text_color_hover_dark: The text color used for links when they are hovered over in dark mode. |
|
link_text_color_visited: The text color used for links when they have been visited. |
|
link_text_color_visited_dark: The text color used for links when they have been visited in dark mode. |
|
prose_text_size: The text size used for markdown and other prose. |
|
prose_text_weight: The text weight used for markdown and other prose. |
|
prose_header_text_weight: The text weight of a header used for markdown and other prose. |
|
shadow_drop: Drop shadow used by other shadowed items. |
|
shadow_drop_lg: Larger drop shadow used by other shadowed items. |
|
shadow_inset: Inset shadow used by other shadowed items. |
|
shadow_spread: Size of shadow spread used by shadowed items. |
|
shadow_spread_dark: Size of shadow spread used by shadowed items in dark mode. |
|
block_background_fill: The background around an item. |
|
block_background_fill_dark: The background around an item in dark mode. |
|
block_border_color: The border color around an item. |
|
block_border_color_dark: The border color around an item in dark mode. |
|
block_border_width: The border width around an item. |
|
block_border_width_dark: The border width around an item in dark mode. |
|
block_info_text_color: The color of the info text. |
|
block_info_text_color_dark: The color of the info text in dark mode. |
|
block_info_text_size: The size of the info text. |
|
block_info_text_weight: The weight of the info text. |
|
block_label_background_fill: The background of the title label of a media element (e.g. image). |
|
block_label_background_fill_dark: The background of the title label of a media element (e.g. image) in dark mode. |
|
block_label_border_color: The border color of the title label of a media element (e.g. image). |
|
block_label_border_color_dark: The border color of the title label of a media element (e.g. image) in dark mode. |
|
block_label_border_width: The border width of the title label of a media element (e.g. image). |
|
block_label_border_width_dark: The border width of the title label of a media element (e.g. image) in dark mode. |
|
block_label_text_color: The text color of the title label of a media element (e.g. image). |
|
block_label_text_color_dark: The text color of the title label of a media element (e.g. image) in dark mode. |
|
block_label_margin: The margin of the title label of a media element (e.g. image) from its surrounding container. |
|
block_label_padding: The padding of the title label of a media element (e.g. image). |
|
block_label_radius: The corner radius of the title label of a media element (e.g. image). |
|
block_label_right_radius: The corner radius of a right-aligned helper label. |
|
block_label_text_size: The text size of the title label of a media element (e.g. image). |
|
block_label_text_weight: The text weight of the title label of a media element (e.g. image). |
|
block_padding: The padding around an item. |
|
block_radius: The corner radius around an item. |
|
block_shadow: The shadow under an item. |
|
block_shadow_dark: The shadow under an item in dark mode. |
|
block_title_background_fill: The background of the title of a form element (e.g. textbox). |
|
block_title_background_fill_dark: The background of the title of a form element (e.g. textbox) in dark mode. |
|
block_title_border_color: The border color of the title of a form element (e.g. textbox). |
|
block_title_border_color_dark: The border color of the title of a form element (e.g. textbox) in dark mode. |
|
block_title_border_width: The border width of the title of a form element (e.g. textbox). |
|
block_title_border_width_dark: The border width of the title of a form element (e.g. textbox) in dark mode. |
|
block_title_text_color: The text color of the title of a form element (e.g. textbox). |
|
block_title_text_color_dark: The text color of the title of a form element (e.g. textbox) in dark mode. |
|
block_title_padding: The padding of the title of a form element (e.g. textbox). |
|
block_title_radius: The corner radius of the title of a form element (e.g. textbox). |
|
block_title_text_size: The text size of the title of a form element (e.g. textbox). |
|
block_title_text_weight: The text weight of the title of a form element (e.g. textbox). |
|
container_radius: The corner radius of a layout component that holds other content. |
|
form_gap_width: The border gap between form elements, (e.g. consecutive textboxes). |
|
layout_gap: The gap between items within a row or column. |
|
panel_background_fill: The background of a panel. |
|
panel_background_fill_dark: The background of a panel in dark mode. |
|
panel_border_color: The border color of a panel. |
|
panel_border_color_dark: The border color of a panel in dark mode. |
|
panel_border_width: The border width of a panel. |
|
panel_border_width_dark: The border width of a panel in dark mode. |
|
section_header_text_size: The text size of a section header (e.g. tab name). |
|
section_header_text_weight: The text weight of a section header (e.g. tab name). |
|
checkbox_background_color: The background of a checkbox square or radio circle. |
|
checkbox_background_color_dark: The background of a checkbox square or radio circle in dark mode. |
|
checkbox_background_color_focus: The background of a checkbox square or radio circle when focused. |
|
checkbox_background_color_focus_dark: The background of a checkbox square or radio circle when focused in dark mode. |
|
checkbox_background_color_hover: The background of a checkbox square or radio circle when hovered over. |
|
checkbox_background_color_hover_dark: The background of a checkbox square or radio circle when hovered over in dark mode. |
|
checkbox_background_color_selected: The background of a checkbox square or radio circle when selected. |
|
checkbox_background_color_selected_dark: The background of a checkbox square or radio circle when selected in dark mode. |
|
checkbox_border_color: The border color of a checkbox square or radio circle. |
|
checkbox_border_color_dark: The border color of a checkbox square or radio circle in dark mode. |
|
checkbox_border_color_focus: The border color of a checkbox square or radio circle when focused. |
|
checkbox_border_color_focus_dark: The border color of a checkbox square or radio circle when focused in dark mode. |
|
checkbox_border_color_hover: The border color of a checkbox square or radio circle when hovered over. |
|
checkbox_border_color_hover_dark: The border color of a checkbox square or radio circle when hovered over in dark mode. |
|
checkbox_border_color_selected: The border color of a checkbox square or radio circle when selected. |
|
checkbox_border_color_selected_dark: The border color of a checkbox square or radio circle when selected in dark mode. |
|
checkbox_border_radius: The corner radius of a checkbox square. |
|
checkbox_border_width: The border width of a checkbox square or radio circle. |
|
checkbox_border_width_dark: The border width of a checkbox square or radio circle in dark mode. |
|
checkbox_check: The checkmark visual of a checkbox square. |
|
radio_circle: The circle visual of a radio circle. |
|
checkbox_shadow: The shadow of a checkbox square or radio circle. |
|
checkbox_label_background_fill: The background of the surrounding button of a checkbox or radio element. |
|
checkbox_label_background_fill_dark: The background of the surrounding button of a checkbox or radio element in dark mode. |
|
checkbox_label_background_fill_hover: The background of the surrounding button of a checkbox or radio element when hovered over. |
|
checkbox_label_background_fill_hover_dark: The background of the surrounding button of a checkbox or radio element when hovered over in dark mode. |
|
checkbox_label_background_fill_selected: The background of the surrounding button of a checkbox or radio element when selected. |
|
checkbox_label_background_fill_selected_dark: The background of the surrounding button of a checkbox or radio element when selected in dark mode. |
|
checkbox_label_border_color: The border color of the surrounding button of a checkbox or radio element. |
|
checkbox_label_border_color_dark: The border color of the surrounding button of a checkbox or radio element in dark mode. |
|
checkbox_label_border_color_hover: The border color of the surrounding button of a checkbox or radio element when hovered over. |
|
checkbox_label_border_color_hover_dark: The border color of the surrounding button of a checkbox or radio element when hovered over in dark mode. |
|
checkbox_label_border_width: The border width of the surrounding button of a checkbox or radio element. |
|
checkbox_label_border_width_dark: The border width of the surrounding button of a checkbox or radio element in dark mode. |
|
checkbox_label_gap: The gap consecutive checkbox or radio elements. |
|
checkbox_label_padding: The padding of the surrounding button of a checkbox or radio element. |
|
checkbox_label_shadow: The shadow of the surrounding button of a checkbox or radio element. |
|
checkbox_label_text_size: The text size of the label accompanying a checkbox or radio element. |
|
checkbox_label_text_weight: The text weight of the label accompanying a checkbox or radio element. |
|
checkbox_label_text_color: The text color of the label accompanying a checkbox or radio element. |
|
checkbox_label_text_color_dark: The text color of the label accompanying a checkbox or radio element in dark mode. |
|
checkbox_label_text_color_selected: The text color of the label accompanying a checkbox or radio element when selected. |
|
checkbox_label_text_color_selected_dark: The text color of the label accompanying a checkbox or radio element when selected in dark mode. |
|
error_background_fill: The background of an error message. |
|
error_background_fill_dark: The background of an error message in dark mode. |
|
error_border_color: The border color of an error message. |
|
error_border_color_dark: The border color of an error message in dark mode. |
|
error_border_width: The border width of an error message. |
|
error_border_width_dark: The border width of an error message in dark mode. |
|
error_text_color: The text color of an error message. |
|
error_text_color_dark: The text color of an error message in dark mode. |
|
input_background_fill: The background of an input field. |
|
input_background_fill_dark: The background of an input field in dark mode. |
|
input_background_fill_focus: The background of an input field when focused. |
|
input_background_fill_focus_dark: The background of an input field when focused in dark mode. |
|
input_background_fill_hover: The background of an input field when hovered over. |
|
input_background_fill_hover_dark: The background of an input field when hovered over in dark mode. |
|
input_border_color: The border color of an input field. |
|
input_border_color_dark: The border color of an input field in dark mode. |
|
input_border_color_focus: The border color of an input field when focused. |
|
input_border_color_focus_dark: The border color of an input field when focused in dark mode. |
|
input_border_color_hover: The border color of an input field when hovered over. |
|
input_border_color_hover_dark: The border color of an input field when hovered over in dark mode. |
|
input_border_width: The border width of an input field. |
|
input_border_width_dark: The border width of an input field in dark mode. |
|
input_padding: The padding of an input field. |
|
input_placeholder_color: The placeholder text color of an input field. |
|
input_placeholder_color_dark: The placeholder text color of an input field in dark mode. |
|
input_radius: The corner radius of an input field. |
|
input_shadow: The shadow of an input field. |
|
input_shadow_dark: The shadow of an input field in dark mode. |
|
input_shadow_focus: The shadow of an input field when focused. |
|
input_shadow_focus_dark: The shadow of an input field when focused in dark mode. |
|
input_text_size: The text size of an input field. |
|
input_text_weight: The text weight of an input field. |
|
loader_color: The color of the loading animation while a request is pending. |
|
loader_color_dark: The color of the loading animation while a request is pending in dark mode. |
|
slider_color: The color of the slider in a range element. |
|
slider_color_dark: The color of the slider in a range element in dark mode. |
|
stat_background_fill: The background used for stats visuals (e.g. confidence bars in label). |
|
stat_background_fill_dark: The background used for stats visuals (e.g. confidence bars in label) in dark mode. |
|
table_border_color: The border color of a table. |
|
table_border_color_dark: The border color of a table in dark mode. |
|
table_even_background_fill: The background of even rows in a table. |
|
table_even_background_fill_dark: The background of even rows in a table in dark mode. |
|
table_odd_background_fill: The background of odd rows in a table. |
|
table_odd_background_fill_dark: The background of odd rows in a table in dark mode. |
|
table_radius: The corner radius of a table. |
|
table_row_focus: The background of a focused row in a table. |
|
table_row_focus_dark: The background of a focused row in a table in dark mode. |
|
button_border_width: The border width of a button. |
|
button_border_width_dark: The border width of a button in dark mode. |
|
button_cancel_background_fill: The background of a button of "cancel" variant. |
|
button_cancel_background_fill_dark: The background of a button of "cancel" variant in dark mode. |
|
button_cancel_background_fill_hover: The background of a button of "cancel" variant when hovered over. |
|
button_cancel_background_fill_hover_dark: The background of a button of "cancel" variant when hovered over in dark mode. |
|
button_cancel_border_color: The border color of a button of "cancel" variant. |
|
button_cancel_border_color_dark: The border color of a button of "cancel" variant in dark mode. |
|
button_cancel_border_color_hover: The border color of a button of "cancel" variant when hovered over. |
|
button_cancel_border_color_hover_dark: The border color of a button of "cancel" variant when hovered over in dark mode. |
|
button_cancel_text_color: The text color of a button of "cancel" variant. |
|
button_cancel_text_color_dark: The text color of a button of "cancel" variant in dark mode. |
|
button_cancel_text_color_hover: The text color of a button of "cancel" variant when hovered over. |
|
button_cancel_text_color_hover_dark: The text color of a button of "cancel" variant when hovered over in dark mode. |
|
button_large_padding: The padding of a button with the default "large" size. |
|
button_large_radius: The corner radius of a button with the default "large" size. |
|
button_large_text_size: The text size of a button with the default "large" size. |
|
button_large_text_weight: The text weight of a button with the default "large" size. |
|
button_primary_background_fill: The background of a button of "primary" variant. |
|
button_primary_background_fill_dark: The background of a button of "primary" variant in dark mode. |
|
button_primary_background_fill_hover: The background of a button of "primary" variant when hovered over. |
|
button_primary_background_fill_hover_dark: The background of a button of "primary" variant when hovered over in dark mode. |
|
button_primary_border_color: The border color of a button of "primary" variant. |
|
button_primary_border_color_dark: The border color of a button of "primary" variant in dark mode. |
|
button_primary_border_color_hover: The border color of a button of "primary" variant when hovered over. |
|
button_primary_border_color_hover_dark: The border color of a button of "primary" variant when hovered over in dark mode. |
|
button_primary_text_color: The text color of a button of "primary" variant. |
|
button_primary_text_color_dark: The text color of a button of "primary" variant in dark mode. |
|
button_primary_text_color_hover: The text color of a button of "primary" variant when hovered over. |
|
button_primary_text_color_hover_dark: The text color of a button of "primary" variant when hovered over in dark mode. |
|
button_secondary_background_fill: The background of a button of default "secondary" variant. |
|
button_secondary_background_fill_dark: The background of a button of default "secondary" variant in dark mode. |
|
button_secondary_background_fill_hover: The background of a button of default "secondary" variant when hovered over. |
|
button_secondary_background_fill_hover_dark: The background of a button of default "secondary" variant when hovered over in dark mode. |
|
button_secondary_border_color: The border color of a button of default "secondary" variant. |
|
button_secondary_border_color_dark: The border color of a button of default "secondary" variant in dark mode. |
|
button_secondary_border_color_hover: The border color of a button of default "secondary" variant when hovered over. |
|
button_secondary_border_color_hover_dark: The border color of a button of default "secondary" variant when hovered over in dark mode. |
|
button_secondary_text_color: The text color of a button of default "secondary" variant. |
|
button_secondary_text_color_dark: The text color of a button of default "secondary" variant in dark mode. |
|
button_secondary_text_color_hover: The text color of a button of default "secondary" variant when hovered over. |
|
button_secondary_text_color_hover_dark: The text color of a button of default "secondary" variant when hovered over in dark mode. |
|
button_shadow: The shadow under a button. |
|
button_shadow_active: The shadow under a button when pressed. |
|
button_shadow_hover: The shadow under a button when hovered over. |
|
button_small_padding: The padding of a button set to "small" size. |
|
button_small_radius: The corner radius of a button set to "small" size. |
|
button_small_text_size: The text size of a button set to "small" size. |
|
button_small_text_weight: The text weight of a button set to "small" size. |
|
button_transition: The transition animation duration of a button between regular, hover, and focused states. |
|
""" |
|
|
|
|
|
self.body_background_fill = body_background_fill or getattr( |
|
self, "body_background_fill", "*background_fill_primary" |
|
) |
|
self.body_background_fill_dark = body_background_fill_dark or getattr( |
|
self, "body_background_fill_dark", "*background_fill_primary" |
|
) |
|
self.body_text_color = body_text_color or getattr( |
|
self, "body_text_color", "*neutral_800" |
|
) |
|
self.body_text_color_dark = body_text_color_dark or getattr( |
|
self, "body_text_color_dark", "*neutral_100" |
|
) |
|
self.body_text_size = body_text_size or getattr( |
|
self, "body_text_size", "*text_md" |
|
) |
|
self.body_text_weight = body_text_weight or getattr( |
|
self, "body_text_weight", "400" |
|
) |
|
self.embed_radius = embed_radius or getattr(self, "embed_radius", "*radius_lg") |
|
|
|
self.color_accent = color_accent or getattr( |
|
self, "color_accent", "*primary_500" |
|
) |
|
self.color_accent_soft = color_accent_soft or getattr( |
|
self, "color_accent_soft", "*primary_50" |
|
) |
|
self.color_accent_soft_dark = color_accent_soft_dark or getattr( |
|
self, "color_accent_soft_dark", "*neutral_700" |
|
) |
|
self.background_fill_primary = background_fill_primary or getattr( |
|
self, "background_primary", "white" |
|
) |
|
self.background_fill_primary_dark = background_fill_primary_dark or getattr( |
|
self, "background_primary_dark", "*neutral_950" |
|
) |
|
self.background_fill_secondary = background_fill_secondary or getattr( |
|
self, "background_secondary", "*neutral_50" |
|
) |
|
self.background_fill_secondary_dark = background_fill_secondary_dark or getattr( |
|
self, "background_secondary_dark", "*neutral_900" |
|
) |
|
self.border_color_accent = border_color_accent or getattr( |
|
self, "border_color_accent", "*primary_300" |
|
) |
|
self.border_color_accent_dark = border_color_accent_dark or getattr( |
|
self, "border_color_accent_dark", "*neutral_600" |
|
) |
|
self.border_color_primary = border_color_primary or getattr( |
|
self, "border_color_primary", "*neutral_200" |
|
) |
|
self.border_color_primary_dark = border_color_primary_dark or getattr( |
|
self, "border_color_primary_dark", "*neutral_700" |
|
) |
|
|
|
self.link_text_color = link_text_color or getattr( |
|
self, "link_text_color", "*secondary_600" |
|
) |
|
self.link_text_color_active = link_text_color_active or getattr( |
|
self, "link_text_color_active", "*secondary_600" |
|
) |
|
self.link_text_color_active_dark = link_text_color_active_dark or getattr( |
|
self, "link_text_color_active_dark", "*secondary_500" |
|
) |
|
self.link_text_color_dark = link_text_color_dark or getattr( |
|
self, "link_text_color_dark", "*secondary_500" |
|
) |
|
self.link_text_color_hover = link_text_color_hover or getattr( |
|
self, "link_text_color_hover", "*secondary_700" |
|
) |
|
self.link_text_color_hover_dark = link_text_color_hover_dark or getattr( |
|
self, "link_text_color_hover_dark", "*secondary_400" |
|
) |
|
self.link_text_color_visited = link_text_color_visited or getattr( |
|
self, "link_text_color_visited", "*secondary_500" |
|
) |
|
self.link_text_color_visited_dark = link_text_color_visited_dark or getattr( |
|
self, "link_text_color_visited_dark", "*secondary_600" |
|
) |
|
self.body_text_color_subdued = body_text_color_subdued or getattr( |
|
self, "body_text_color_subdued", "*neutral_400" |
|
) |
|
self.body_text_color_subdued_dark = body_text_color_subdued_dark or getattr( |
|
self, "body_text_color_subdued_dark", "*neutral_400" |
|
) |
|
|
|
self.shadow_drop = shadow_drop or getattr( |
|
self, "shadow_drop", "rgba(0,0,0,0.05) 0px 1px 2px 0px" |
|
) |
|
self.shadow_drop_lg = shadow_drop_lg or getattr( |
|
self, |
|
"shadow_drop_lg", |
|
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", |
|
) |
|
self.shadow_inset = shadow_inset or getattr( |
|
self, "shadow_inset", "rgba(0,0,0,0.05) 0px 2px 4px 0px inset" |
|
) |
|
self.shadow_spread = shadow_spread or getattr(self, "shadow_spread", "3px") |
|
self.shadow_spread_dark = shadow_spread_dark or getattr( |
|
self, "shadow_spread_dark", "1px" |
|
) |
|
|
|
self.block_background_fill = block_background_fill or getattr( |
|
self, "block_background_fill", "*background_fill_primary" |
|
) |
|
self.block_background_fill_dark = block_background_fill_dark or getattr( |
|
self, "block_background_fill_dark", "*neutral_800" |
|
) |
|
self.block_border_color = block_border_color or getattr( |
|
self, "block_border_color", "*border_color_primary" |
|
) |
|
self.block_border_color_dark = block_border_color_dark or getattr( |
|
self, "block_border_color_dark", "*border_color_primary" |
|
) |
|
self.block_border_width = block_border_width or getattr( |
|
self, "block_border_width", "1px" |
|
) |
|
self.block_border_width_dark = block_border_width_dark or getattr( |
|
self, "block_border_width_dark", None |
|
) |
|
self.block_info_text_color = block_info_text_color or getattr( |
|
self, "block_info_text_color", "*body_text_color_subdued" |
|
) |
|
self.block_info_text_color_dark = block_info_text_color_dark or getattr( |
|
self, "block_info_text_color_dark", "*body_text_color_subdued" |
|
) |
|
self.block_info_text_size = block_info_text_size or getattr( |
|
self, "block_info_text_size", "*text_sm" |
|
) |
|
self.block_info_text_weight = block_info_text_weight or getattr( |
|
self, "block_info_text_weight", "400" |
|
) |
|
self.block_label_background_fill = block_label_background_fill or getattr( |
|
self, "block_label_background_fill", "*background_fill_primary" |
|
) |
|
self.block_label_background_fill_dark = ( |
|
block_label_background_fill_dark |
|
or getattr( |
|
self, "block_label_background_fill_dark", "*background_fill_secondary" |
|
) |
|
) |
|
self.block_label_border_color = block_label_border_color or getattr( |
|
self, "block_label_border_color", "*border_color_primary" |
|
) |
|
self.block_label_border_color_dark = block_label_border_color_dark or getattr( |
|
self, "block_label_border_color_dark", "*border_color_primary" |
|
) |
|
self.block_label_border_width = block_label_border_width or getattr( |
|
self, "block_label_border_width", "1px" |
|
) |
|
self.block_label_border_width_dark = block_label_border_width_dark or getattr( |
|
self, "block_label_border_width_dark", None |
|
) |
|
self.block_label_text_color = block_label_text_color or getattr( |
|
self, "block_label_text_color", "*neutral_500" |
|
) |
|
self.block_label_text_color_dark = block_label_text_color_dark or getattr( |
|
self, "block_label_text_color_dark", "*neutral_200" |
|
) |
|
self.block_label_margin = block_label_margin or getattr( |
|
self, "block_label_margin", "0" |
|
) |
|
self.block_label_padding = block_label_padding or getattr( |
|
self, "block_label_padding", "*spacing_sm *spacing_lg" |
|
) |
|
self.block_label_radius = block_label_radius or getattr( |
|
self, |
|
"block_label_radius", |
|
"calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px) 0", |
|
) |
|
self.block_label_right_radius = block_label_right_radius or getattr( |
|
self, |
|
"block_label_right_radius", |
|
"0 calc(*radius_lg - 1px) 0 calc(*radius_lg - 1px)", |
|
) |
|
self.block_label_text_size = block_label_text_size or getattr( |
|
self, "block_label_text_size", "*text_sm" |
|
) |
|
self.block_label_text_weight = block_label_text_weight or getattr( |
|
self, "block_label_text_weight", "400" |
|
) |
|
self.block_padding = block_padding or getattr( |
|
self, "block_padding", "*spacing_xl calc(*spacing_xl + 2px)" |
|
) |
|
self.block_radius = block_radius or getattr(self, "block_radius", "*radius_lg") |
|
self.block_shadow = block_shadow or getattr(self, "block_shadow", "none") |
|
self.block_shadow_dark = block_shadow_dark or getattr( |
|
self, "block_shadow_dark", None |
|
) |
|
self.block_title_background_fill = block_title_background_fill or getattr( |
|
self, "block_title_background_fill", "none" |
|
) |
|
self.block_title_background_fill_dark = ( |
|
block_title_background_fill_dark |
|
or getattr(self, "block_title_background_fill_dark", None) |
|
) |
|
self.block_title_border_color = block_title_border_color or getattr( |
|
self, "block_title_border_color", "none" |
|
) |
|
self.block_title_border_color_dark = block_title_border_color_dark or getattr( |
|
self, "block_title_border_color_dark", None |
|
) |
|
self.block_title_border_width = block_title_border_width or getattr( |
|
self, "block_title_border_width", "0px" |
|
) |
|
self.block_title_border_width_dark = block_title_border_width_dark or getattr( |
|
self, "block_title_border_width_dark", None |
|
) |
|
self.block_title_text_color = block_title_text_color or getattr( |
|
self, "block_title_text_color", "*neutral_500" |
|
) |
|
self.block_title_text_color_dark = block_title_text_color_dark or getattr( |
|
self, "block_title_text_color_dark", "*neutral_200" |
|
) |
|
self.block_title_padding = block_title_padding or getattr( |
|
self, "block_title_padding", "0" |
|
) |
|
self.block_title_radius = block_title_radius or getattr( |
|
self, "block_title_radius", "none" |
|
) |
|
self.block_title_text_size = block_title_text_size or getattr( |
|
self, "block_title_text_size", "*text_md" |
|
) |
|
self.block_title_text_weight = block_title_text_weight or getattr( |
|
self, "block_title_text_weight", "400" |
|
) |
|
self.container_radius = container_radius or getattr( |
|
self, "container_radius", "*radius_lg" |
|
) |
|
self.form_gap_width = form_gap_width or getattr(self, "form_gap_width", "0px") |
|
self.layout_gap = layout_gap or getattr(self, "layout_gap", "*spacing_xxl") |
|
self.panel_background_fill = panel_background_fill or getattr( |
|
self, "panel_background_fill", "*background_fill_secondary" |
|
) |
|
self.panel_background_fill_dark = panel_background_fill_dark or getattr( |
|
self, "panel_background_fill_dark", "*background_fill_secondary" |
|
) |
|
self.panel_border_color = panel_border_color or getattr( |
|
self, "panel_border_color", "*border_color_primary" |
|
) |
|
self.panel_border_color_dark = panel_border_color_dark or getattr( |
|
self, "panel_border_color_dark", "*border_color_primary" |
|
) |
|
self.panel_border_width = panel_border_width or getattr( |
|
self, "panel_border_width", "0" |
|
) |
|
self.panel_border_width_dark = panel_border_width_dark or getattr( |
|
self, "panel_border_width_dark", None |
|
) |
|
self.section_header_text_size = section_header_text_size or getattr( |
|
self, "section_header_text_size", "*text_md" |
|
) |
|
self.section_header_text_weight = section_header_text_weight or getattr( |
|
self, "section_header_text_weight", "400" |
|
) |
|
|
|
self.checkbox_background_color = checkbox_background_color or getattr( |
|
self, "checkbox_background_color", "*background_fill_primary" |
|
) |
|
self.checkbox_background_color_dark = checkbox_background_color_dark or getattr( |
|
self, "checkbox_background_color_dark", "*neutral_800" |
|
) |
|
self.checkbox_background_color_focus = ( |
|
checkbox_background_color_focus |
|
or getattr( |
|
self, "checkbox_background_color_focus", "*checkbox_background_color" |
|
) |
|
) |
|
self.checkbox_background_color_focus_dark = ( |
|
checkbox_background_color_focus_dark |
|
or getattr( |
|
self, |
|
"checkbox_background_color_focus_dark", |
|
"*checkbox_background_color", |
|
) |
|
) |
|
self.checkbox_background_color_hover = ( |
|
checkbox_background_color_hover |
|
or getattr( |
|
self, "checkbox_background_color_hover", "*checkbox_background_color" |
|
) |
|
) |
|
self.checkbox_background_color_hover_dark = ( |
|
checkbox_background_color_hover_dark |
|
or getattr( |
|
self, |
|
"checkbox_background_color_hover_dark", |
|
"*checkbox_background_color", |
|
) |
|
) |
|
self.checkbox_background_color_selected = ( |
|
checkbox_background_color_selected |
|
or getattr(self, "checkbox_background_color_selected", "*secondary_600") |
|
) |
|
self.checkbox_background_color_selected_dark = ( |
|
checkbox_background_color_selected_dark |
|
or getattr( |
|
self, "checkbox_background_color_selected_dark", "*secondary_600" |
|
) |
|
) |
|
self.checkbox_border_color = checkbox_border_color or getattr( |
|
self, "checkbox_border_color", "*neutral_300" |
|
) |
|
self.checkbox_border_color_dark = checkbox_border_color_dark or getattr( |
|
self, "checkbox_border_color_dark", "*neutral_700" |
|
) |
|
self.checkbox_border_color_focus = checkbox_border_color_focus or getattr( |
|
self, "checkbox_border_color_focus", "*secondary_500" |
|
) |
|
self.checkbox_border_color_focus_dark = ( |
|
checkbox_border_color_focus_dark |
|
or getattr(self, "checkbox_border_color_focus_dark", "*secondary_500") |
|
) |
|
self.checkbox_border_color_hover = checkbox_border_color_hover or getattr( |
|
self, "checkbox_border_color_hover", "*neutral_300" |
|
) |
|
self.checkbox_border_color_hover_dark = ( |
|
checkbox_border_color_hover_dark |
|
or getattr(self, "checkbox_border_color_hover_dark", "*neutral_600") |
|
) |
|
self.checkbox_border_color_selected = checkbox_border_color_selected or getattr( |
|
self, "checkbox_border_color_selected", "*secondary_600" |
|
) |
|
self.checkbox_border_color_selected_dark = ( |
|
checkbox_border_color_selected_dark |
|
or getattr(self, "checkbox_border_color_selected_dark", "*secondary_600") |
|
) |
|
self.checkbox_border_radius = checkbox_border_radius or getattr( |
|
self, "checkbox_border_radius", "*radius_sm" |
|
) |
|
self.checkbox_border_width = checkbox_border_width or getattr( |
|
self, "checkbox_border_width", "*input_border_width" |
|
) |
|
self.checkbox_border_width_dark = checkbox_border_width_dark or getattr( |
|
self, "checkbox_border_width_dark", "*input_border_width" |
|
) |
|
self.checkbox_label_background_fill = checkbox_label_background_fill or getattr( |
|
self, "checkbox_label_background_fill", "*button_secondary_background_fill" |
|
) |
|
self.checkbox_label_background_fill_dark = ( |
|
checkbox_label_background_fill_dark |
|
or getattr( |
|
self, |
|
"checkbox_label_background_fill_dark", |
|
"*button_secondary_background_fill", |
|
) |
|
) |
|
self.checkbox_label_background_fill_hover = ( |
|
checkbox_label_background_fill_hover |
|
or getattr( |
|
self, |
|
"checkbox_label_background_fill_hover", |
|
"*button_secondary_background_fill_hover", |
|
) |
|
) |
|
self.checkbox_label_background_fill_hover_dark = ( |
|
checkbox_label_background_fill_hover_dark |
|
or getattr( |
|
self, |
|
"checkbox_label_background_fill_hover_dark", |
|
"*button_secondary_background_fill_hover", |
|
) |
|
) |
|
self.checkbox_label_background_fill_selected = ( |
|
checkbox_label_background_fill_selected |
|
or getattr( |
|
self, |
|
"checkbox_label_background_fill_selected", |
|
"*checkbox_label_background_fill", |
|
) |
|
) |
|
self.checkbox_label_background_fill_selected_dark = ( |
|
checkbox_label_background_fill_selected_dark |
|
or getattr( |
|
self, |
|
"checkbox_label_background_fill_selected_dark", |
|
"*checkbox_label_background_fill", |
|
) |
|
) |
|
self.checkbox_label_border_color = checkbox_label_border_color or getattr( |
|
self, "checkbox_label_border_color", "*border_color_primary" |
|
) |
|
self.checkbox_label_border_color_dark = ( |
|
checkbox_label_border_color_dark |
|
or getattr( |
|
self, "checkbox_label_border_color_dark", "*border_color_primary" |
|
) |
|
) |
|
self.checkbox_label_border_color_hover = ( |
|
checkbox_label_border_color_hover |
|
or getattr( |
|
self, |
|
"checkbox_label_border_color_hover", |
|
"*checkbox_label_border_color", |
|
) |
|
) |
|
self.checkbox_label_border_color_hover_dark = ( |
|
checkbox_label_border_color_hover_dark |
|
or getattr( |
|
self, |
|
"checkbox_label_border_color_hover_dark", |
|
"*checkbox_label_border_color", |
|
) |
|
) |
|
self.checkbox_label_border_width = checkbox_label_border_width or getattr( |
|
self, "checkbox_label_border_width", "*input_border_width" |
|
) |
|
self.checkbox_label_border_width_dark = ( |
|
checkbox_label_border_width_dark |
|
or getattr(self, "checkbox_label_border_width_dark", "*input_border_width") |
|
) |
|
self.checkbox_label_gap = checkbox_label_gap or getattr( |
|
self, "checkbox_label_gap", "*spacing_lg" |
|
) |
|
self.checkbox_label_padding = checkbox_label_padding or getattr( |
|
self, "checkbox_label_padding", "*spacing_md calc(2 * *spacing_md)" |
|
) |
|
self.checkbox_label_shadow = checkbox_label_shadow or getattr( |
|
self, "checkbox_label_shadow", "none" |
|
) |
|
self.checkbox_label_text_size = checkbox_label_text_size or getattr( |
|
self, "checkbox_label_text_size", "*text_md" |
|
) |
|
self.checkbox_label_text_weight = checkbox_label_text_weight or getattr( |
|
self, "checkbox_label_text_weight", "400" |
|
) |
|
self.checkbox_check = checkbox_check or getattr( |
|
self, |
|
"checkbox_check", |
|
"""url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")""", |
|
) |
|
self.radio_circle = radio_circle or getattr( |
|
self, |
|
"radio_circle", |
|
"""url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")""", |
|
) |
|
self.checkbox_shadow = checkbox_shadow or getattr( |
|
self, "checkbox_shadow", "*input_shadow" |
|
) |
|
self.checkbox_label_text_color = checkbox_label_text_color or getattr( |
|
self, "checkbox_label_text_color", "*body_text_color" |
|
) |
|
self.checkbox_label_text_color_dark = checkbox_label_text_color_dark or getattr( |
|
self, "checkbox_label_text_color_dark", "*body_text_color" |
|
) |
|
self.checkbox_label_text_color_selected = ( |
|
checkbox_label_text_color_selected |
|
or getattr( |
|
self, "checkbox_label_text_color_selected", "*checkbox_label_text_color" |
|
) |
|
) |
|
self.checkbox_label_text_color_selected_dark = ( |
|
checkbox_label_text_color_selected_dark |
|
or getattr( |
|
self, |
|
"checkbox_label_text_color_selected_dark", |
|
"*checkbox_label_text_color", |
|
) |
|
) |
|
self.error_background_fill = error_background_fill or getattr( |
|
self, "error_background_fill", colors.red.c100 |
|
) |
|
self.error_background_fill_dark = error_background_fill_dark or getattr( |
|
self, "error_background_fill_dark", "*background_fill_primary" |
|
) |
|
self.error_border_color = error_border_color or getattr( |
|
self, "error_border_color", colors.red.c200 |
|
) |
|
self.error_border_color_dark = error_border_color_dark or getattr( |
|
self, "error_border_color_dark", "*border_color_primary" |
|
) |
|
self.error_border_width = error_border_width or getattr( |
|
self, "error_border_width", "1px" |
|
) |
|
self.error_border_width_dark = error_border_width_dark or getattr( |
|
self, "error_border_width_dark", None |
|
) |
|
self.error_text_color = error_text_color or getattr( |
|
self, "error_text_color", colors.red.c500 |
|
) |
|
self.error_text_color_dark = error_text_color_dark or getattr( |
|
self, "error_text_color_dark", colors.red.c500 |
|
) |
|
self.input_background_fill = input_background_fill or getattr( |
|
self, "input_background_fill", "*neutral_100" |
|
) |
|
self.input_background_fill_dark = input_background_fill_dark or getattr( |
|
self, "input_background_fill_dark", "*neutral_700" |
|
) |
|
self.input_background_fill_focus = input_background_fill_focus or getattr( |
|
self, "input_background_fill_focus", "*secondary_500" |
|
) |
|
self.input_background_fill_focus_dark = ( |
|
input_background_fill_focus_dark |
|
or getattr(self, "input_background_fill_focus_dark", "*secondary_600") |
|
) |
|
self.input_background_fill_hover = input_background_fill_hover or getattr( |
|
self, "input_background_fill_hover", "*input_background_fill" |
|
) |
|
self.input_background_fill_hover_dark = ( |
|
input_background_fill_hover_dark |
|
or getattr( |
|
self, "input_background_fill_hover_dark", "*input_background_fill" |
|
) |
|
) |
|
self.input_border_color = input_border_color or getattr( |
|
self, "input_border_color", "*border_color_primary" |
|
) |
|
self.input_border_color_dark = input_border_color_dark or getattr( |
|
self, "input_border_color_dark", "*border_color_primary" |
|
) |
|
self.input_border_color_focus = input_border_color_focus or getattr( |
|
self, "input_border_color_focus", "*secondary_300" |
|
) |
|
self.input_border_color_focus_dark = input_border_color_focus_dark or getattr( |
|
self, "input_border_color_focus_dark", "*neutral_700" |
|
) |
|
self.input_border_color_hover = input_border_color_hover or getattr( |
|
self, "input_border_color_hover", "*input_border_color" |
|
) |
|
self.input_border_color_hover_dark = input_border_color_hover_dark or getattr( |
|
self, "input_border_color_hover_dark", "*input_border_color" |
|
) |
|
self.input_border_width = input_border_width or getattr( |
|
self, "input_border_width", "0px" |
|
) |
|
self.input_border_width_dark = input_border_width_dark or getattr( |
|
self, "input_border_width_dark", None |
|
) |
|
self.input_padding = input_padding or getattr( |
|
self, "input_padding", "*spacing_xl" |
|
) |
|
self.input_placeholder_color = input_placeholder_color or getattr( |
|
self, "input_placeholder_color", "*neutral_400" |
|
) |
|
self.input_placeholder_color_dark = input_placeholder_color_dark or getattr( |
|
self, "input_placeholder_color_dark", "*neutral_500" |
|
) |
|
self.input_radius = input_radius or getattr(self, "input_radius", "*radius_lg") |
|
self.input_shadow = input_shadow or getattr(self, "input_shadow", "none") |
|
self.input_shadow_dark = input_shadow_dark or getattr( |
|
self, "input_shadow_dark", None |
|
) |
|
self.input_shadow_focus = input_shadow_focus or getattr( |
|
self, "input_shadow_focus", "*input_shadow" |
|
) |
|
self.input_shadow_focus_dark = input_shadow_focus_dark or getattr( |
|
self, "input_shadow_focus_dark", None |
|
) |
|
self.input_text_size = input_text_size or getattr( |
|
self, "input_text_size", "*text_md" |
|
) |
|
self.input_text_weight = input_text_weight or getattr( |
|
self, "input_text_weight", "400" |
|
) |
|
self.loader_color = loader_color or getattr( |
|
self, "loader_color", "*color_accent" |
|
) |
|
self.loader_color_dark = loader_color_dark or getattr( |
|
self, "loader_color_dark", None |
|
) |
|
self.prose_text_size = prose_text_size or getattr( |
|
self, "prose_text_size", "*text_md" |
|
) |
|
self.prose_text_weight = prose_text_weight or getattr( |
|
self, "prose_text_weight", "400" |
|
) |
|
self.prose_header_text_weight = prose_header_text_weight or getattr( |
|
self, "prose_header_text_weight", "600" |
|
) |
|
self.slider_color = slider_color or getattr(self, "slider_color", "") |
|
self.slider_color_dark = slider_color_dark or getattr( |
|
self, "slider_color_dark", None |
|
) |
|
self.stat_background_fill = stat_background_fill or getattr( |
|
self, "stat_background_fill", "*primary_300" |
|
) |
|
self.stat_background_fill_dark = stat_background_fill_dark or getattr( |
|
self, "stat_background_fill_dark", "*primary_500" |
|
) |
|
self.table_border_color = table_border_color or getattr( |
|
self, "table_border_color", "*neutral_300" |
|
) |
|
self.table_border_color_dark = table_border_color_dark or getattr( |
|
self, "table_border_color_dark", "*neutral_700" |
|
) |
|
self.table_even_background_fill = table_even_background_fill or getattr( |
|
self, "table_even_background_fill", "white" |
|
) |
|
self.table_even_background_fill_dark = ( |
|
table_even_background_fill_dark |
|
or getattr(self, "table_even_background_fill_dark", "*neutral_950") |
|
) |
|
self.table_odd_background_fill = table_odd_background_fill or getattr( |
|
self, "table_odd_background_fill", "*neutral_50" |
|
) |
|
self.table_odd_background_fill_dark = table_odd_background_fill_dark or getattr( |
|
self, "table_odd_background_fill_dark", "*neutral_900" |
|
) |
|
self.table_radius = table_radius or getattr(self, "table_radius", "*radius_lg") |
|
self.table_row_focus = table_row_focus or getattr( |
|
self, "table_row_focus", "*color_accent_soft" |
|
) |
|
self.table_row_focus_dark = table_row_focus_dark or getattr( |
|
self, "table_row_focus_dark", "*color_accent_soft" |
|
) |
|
|
|
self.button_border_width = button_border_width or getattr( |
|
self, "button_border_width", "*input_border_width" |
|
) |
|
self.button_border_width_dark = button_border_width_dark or getattr( |
|
self, "button_border_width_dark", "*input_border_width" |
|
) |
|
self.button_cancel_background_fill = button_cancel_background_fill or getattr( |
|
self, "button_cancel_background_fill", "*button_secondary_background_fill" |
|
) |
|
self.button_cancel_background_fill_dark = ( |
|
button_cancel_background_fill_dark |
|
or getattr( |
|
self, |
|
"button_cancel_background_fill_dark", |
|
"*button_secondary_background_fill", |
|
) |
|
) |
|
self.button_cancel_background_fill_hover = ( |
|
button_cancel_background_fill_hover |
|
or getattr( |
|
self, |
|
"button_cancel_background_fill_hover", |
|
"*button_cancel_background_fill", |
|
) |
|
) |
|
self.button_cancel_background_fill_hover_dark = ( |
|
button_cancel_background_fill_hover_dark |
|
or getattr( |
|
self, |
|
"button_cancel_background_fill_hover_dark", |
|
"*button_cancel_background_fill", |
|
) |
|
) |
|
self.button_cancel_border_color = button_cancel_border_color or getattr( |
|
self, "button_cancel_border_color", "*button_secondary_border_color" |
|
) |
|
self.button_cancel_border_color_dark = ( |
|
button_cancel_border_color_dark |
|
or getattr( |
|
self, |
|
"button_cancel_border_color_dark", |
|
"*button_secondary_border_color", |
|
) |
|
) |
|
self.button_cancel_border_color_hover = ( |
|
button_cancel_border_color_hover |
|
or getattr( |
|
self, |
|
"button_cancel_border_color_hover", |
|
"*button_cancel_border_color", |
|
) |
|
) |
|
self.button_cancel_border_color_hover_dark = ( |
|
button_cancel_border_color_hover_dark |
|
or getattr( |
|
self, |
|
"button_cancel_border_color_hover_dark", |
|
"*button_cancel_border_color", |
|
) |
|
) |
|
self.button_cancel_text_color = button_cancel_text_color or getattr( |
|
self, "button_cancel_text_color", "*button_secondary_text_color" |
|
) |
|
self.button_cancel_text_color_dark = button_cancel_text_color_dark or getattr( |
|
self, "button_cancel_text_color_dark", "*button_secondary_text_color" |
|
) |
|
self.button_cancel_text_color_hover = button_cancel_text_color_hover or getattr( |
|
self, "button_cancel_text_color_hover", "*button_cancel_text_color" |
|
) |
|
self.button_cancel_text_color_hover_dark = ( |
|
button_cancel_text_color_hover_dark |
|
or getattr( |
|
self, "button_cancel_text_color_hover_dark", "*button_cancel_text_color" |
|
) |
|
) |
|
self.button_large_padding = button_large_padding or getattr( |
|
self, "button_large_padding", "*spacing_lg calc(2 * *spacing_lg)" |
|
) |
|
self.button_large_radius = button_large_radius or getattr( |
|
self, "button_large_radius", "*radius_lg" |
|
) |
|
self.button_large_text_size = button_large_text_size or getattr( |
|
self, "button_large_text_size", "*text_lg" |
|
) |
|
self.button_large_text_weight = button_large_text_weight or getattr( |
|
self, "button_large_text_weight", "600" |
|
) |
|
self.button_primary_background_fill = button_primary_background_fill or getattr( |
|
self, "button_primary_background_fill", "*primary_200" |
|
) |
|
self.button_primary_background_fill_dark = ( |
|
button_primary_background_fill_dark |
|
or getattr(self, "button_primary_background_fill_dark", "*primary_700") |
|
) |
|
self.button_primary_background_fill_hover = ( |
|
button_primary_background_fill_hover |
|
or getattr( |
|
self, |
|
"button_primary_background_fill_hover", |
|
"*button_primary_background_fill", |
|
) |
|
) |
|
self.button_primary_background_fill_hover_dark = ( |
|
button_primary_background_fill_hover_dark |
|
or getattr( |
|
self, |
|
"button_primary_background_fill_hover_dark", |
|
"*button_primary_background_fill", |
|
) |
|
) |
|
self.button_primary_border_color = button_primary_border_color or getattr( |
|
self, "button_primary_border_color", "*primary_200" |
|
) |
|
self.button_primary_border_color_dark = ( |
|
button_primary_border_color_dark |
|
or getattr(self, "button_primary_border_color_dark", "*primary_600") |
|
) |
|
self.button_primary_border_color_hover = ( |
|
button_primary_border_color_hover |
|
or getattr( |
|
self, |
|
"button_primary_border_color_hover", |
|
"*button_primary_border_color", |
|
) |
|
) |
|
self.button_primary_border_color_hover_dark = ( |
|
button_primary_border_color_hover_dark |
|
or getattr( |
|
self, |
|
"button_primary_border_color_hover_dark", |
|
"*button_primary_border_color", |
|
) |
|
) |
|
self.button_primary_text_color = button_primary_text_color or getattr( |
|
self, "button_primary_text_color", "*primary_600" |
|
) |
|
self.button_primary_text_color_dark = button_primary_text_color_dark or getattr( |
|
self, "button_primary_text_color_dark", "white" |
|
) |
|
self.button_primary_text_color_hover = ( |
|
button_primary_text_color_hover |
|
or getattr( |
|
self, "button_primary_text_color_hover", "*button_primary_text_color" |
|
) |
|
) |
|
self.button_primary_text_color_hover_dark = ( |
|
button_primary_text_color_hover_dark |
|
or getattr( |
|
self, |
|
"button_primary_text_color_hover_dark", |
|
"*button_primary_text_color", |
|
) |
|
) |
|
self.button_secondary_background_fill = ( |
|
button_secondary_background_fill |
|
or getattr(self, "button_secondary_background_fill", "*neutral_200") |
|
) |
|
self.button_secondary_background_fill_dark = ( |
|
button_secondary_background_fill_dark |
|
or getattr(self, "button_secondary_background_fill_dark", "*neutral_600") |
|
) |
|
self.button_secondary_background_fill_hover = ( |
|
button_secondary_background_fill_hover |
|
or getattr( |
|
self, |
|
"button_secondary_background_fill_hover", |
|
"*button_secondary_background_fill", |
|
) |
|
) |
|
self.button_secondary_background_fill_hover_dark = ( |
|
button_secondary_background_fill_hover_dark |
|
or getattr( |
|
self, |
|
"button_secondary_background_fill_hover_dark", |
|
"*button_secondary_background_fill", |
|
) |
|
) |
|
self.button_secondary_border_color = button_secondary_border_color or getattr( |
|
self, "button_secondary_border_color", "*neutral_200" |
|
) |
|
self.button_secondary_border_color_dark = ( |
|
button_secondary_border_color_dark |
|
or getattr(self, "button_secondary_border_color_dark", "*neutral_600") |
|
) |
|
self.button_secondary_border_color_hover = ( |
|
button_secondary_border_color_hover |
|
or getattr( |
|
self, |
|
"button_secondary_border_color_hover", |
|
"*button_secondary_border_color", |
|
) |
|
) |
|
self.button_secondary_border_color_hover_dark = ( |
|
button_secondary_border_color_hover_dark |
|
or getattr( |
|
self, |
|
"button_secondary_border_color_hover_dark", |
|
"*button_secondary_border_color", |
|
) |
|
) |
|
self.button_secondary_text_color = button_secondary_text_color or getattr( |
|
self, "button_secondary_text_color", "*neutral_700" |
|
) |
|
self.button_secondary_text_color_dark = ( |
|
button_secondary_text_color_dark |
|
or getattr(self, "button_secondary_text_color_dark", "white") |
|
) |
|
self.button_secondary_text_color_hover = ( |
|
button_secondary_text_color_hover |
|
or getattr( |
|
self, |
|
"button_secondary_text_color_hover", |
|
"*button_secondary_text_color", |
|
) |
|
) |
|
self.button_secondary_text_color_hover_dark = ( |
|
button_secondary_text_color_hover_dark |
|
or getattr( |
|
self, |
|
"button_secondary_text_color_hover_dark", |
|
"*button_secondary_text_color", |
|
) |
|
) |
|
self.button_shadow = button_shadow or getattr(self, "button_shadow", "none") |
|
self.button_shadow_active = button_shadow_active or getattr( |
|
self, "button_shadow_active", "none" |
|
) |
|
self.button_shadow_hover = button_shadow_hover or getattr( |
|
self, "button_shadow_hover", "none" |
|
) |
|
self.button_small_padding = button_small_padding or getattr( |
|
self, "button_small_padding", "*spacing_sm calc(2 * *spacing_sm)" |
|
) |
|
self.button_small_radius = button_small_radius or getattr( |
|
self, "button_small_radius", "*radius_lg" |
|
) |
|
self.button_small_text_size = button_small_text_size or getattr( |
|
self, "button_small_text_size", "*text_md" |
|
) |
|
self.button_small_text_weight = button_small_text_weight or getattr( |
|
self, "button_small_text_weight", "400" |
|
) |
|
self.button_transition = button_transition or getattr( |
|
self, "button_transition", "background-color 0.2s ease" |
|
) |
|
return self |
|
|
