mirror of
https://github.com/Ladebeze66/projetcbaollm.git
synced 2025-12-16 20:17:51 +01:00
1981 lines
95 KiB
Python
1981 lines
95 KiB
Python
from __future__ import annotations
|
|
|
|
import json
|
|
import re
|
|
import tempfile
|
|
import textwrap
|
|
import warnings
|
|
from collections.abc import Iterable
|
|
from pathlib import Path
|
|
|
|
import huggingface_hub
|
|
import semantic_version as semver
|
|
from gradio_client.documentation import document
|
|
from huggingface_hub import CommitOperationAdd
|
|
|
|
from gradio.themes.utils import (
|
|
colors,
|
|
fonts,
|
|
get_matching_version,
|
|
get_theme_assets,
|
|
sizes,
|
|
)
|
|
from gradio.themes.utils.readme_content import README_CONTENT
|
|
|
|
|
|
class ThemeClass:
|
|
def __init__(self):
|
|
self._stylesheets = []
|
|
self.name = None
|
|
self._font_css = []
|
|
|
|
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 = (
|
|
"\n:root .dark {\n"
|
|
+ "\n".join([f" --{attr}: {val};" for attr, val in dark_css.items()])
|
|
+ "\n}"
|
|
)
|
|
|
|
font_css = "\n".join(self._font_css)
|
|
|
|
return f"{font_css}\n{css_code}\n{dark_css_code}"
|
|
|
|
def _get_computed_value(self, property: str, depth=0) -> str:
|
|
max_depth = 100
|
|
if depth > max_depth:
|
|
warnings.warn(f"Cannot resolve '{property}' - circular reference detected.")
|
|
return ""
|
|
is_dark = property.endswith("_dark")
|
|
if is_dark:
|
|
set_value = getattr(
|
|
self, property, getattr(self, property[:-5], "")
|
|
) # if dark mode value is unavailable, use light mode value
|
|
else:
|
|
set_value = getattr(self, property, "")
|
|
pattern = r"(\*)([\w_]+)(\b)"
|
|
|
|
def repl_func(match, depth):
|
|
word = match.group(2)
|
|
dark_suffix = "_dark" if property.endswith("_dark") else ""
|
|
return self._get_computed_value(word + dark_suffix, depth + 1)
|
|
|
|
computed_value = re.sub(
|
|
pattern, lambda match: repl_func(match, depth), set_value
|
|
)
|
|
return computed_value
|
|
|
|
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 in ("_stylesheets", "name")
|
|
) 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.
|
|
"""
|
|
with open(path, encoding="utf-8") as fp:
|
|
return cls.from_dict(json.load(fp, object_hook=fonts.as_font))
|
|
|
|
@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.
|
|
"""
|
|
new_theme = cls()
|
|
for prop, value in theme["theme"].items():
|
|
setattr(new_theme, prop, value)
|
|
|
|
# For backwards compatibility, load attributes in base theme not in the loaded theme from the base theme.
|
|
base = Base()
|
|
for attr in base.__dict__:
|
|
if not attr.startswith("_") and not hasattr(new_theme, attr):
|
|
setattr(new_theme, attr, getattr(base, attr))
|
|
|
|
return new_theme
|
|
|
|
def dump(self, filename: str):
|
|
"""Write the theme to a json file.
|
|
|
|
Parameters:
|
|
filename: The path to write the theme too
|
|
"""
|
|
Path(filename).write_text(json.dumps(self.to_dict(), 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 huggingface_hub.utils.RepositoryNotFoundError 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",
|
|
)
|
|
theme = cls.load(theme_file)
|
|
theme.name = name
|
|
return theme
|
|
|
|
@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 Exception:
|
|
space_info = None
|
|
|
|
space_exists = space_info is not None
|
|
|
|
# If no version, set the version to next patch release
|
|
if not version:
|
|
version = self._get_next_version(space_info) if space_exists else "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": 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 = (Path(__file__).parent / "app.py").read_text()
|
|
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),
|
|
]
|
|
|
|
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.zinc,
|
|
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.LocalFont("IBM Plex Sans"),
|
|
"ui-sans-serif",
|
|
"system-ui",
|
|
"sans-serif",
|
|
),
|
|
font_mono: fonts.Font | str | Iterable[fonts.Font | str] = (
|
|
fonts.LocalFont("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.
|
|
"""
|
|
|
|
self.name = "base"
|
|
self._font_css = []
|
|
|
|
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 == f"{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")
|
|
|
|
# Hue ranges
|
|
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
|
|
|
|
# Spacing
|
|
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
|
|
|
|
# Font
|
|
if isinstance(font, (fonts.Font, str)):
|
|
font = [font]
|
|
self._font = [
|
|
fontfam if isinstance(fontfam, fonts.Font) else fonts.LocalFont(fontfam)
|
|
for fontfam in font
|
|
]
|
|
if isinstance(font_mono, (fonts.Font, str)):
|
|
font_mono = [font_mono]
|
|
self._font_mono = [
|
|
fontfam if isinstance(fontfam, fonts.Font) else fonts.LocalFont(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 = []
|
|
self._font_css = []
|
|
for font in self._font + self._font_mono:
|
|
font_stylesheet = font.stylesheet()
|
|
if isinstance(font_stylesheet, str):
|
|
self._stylesheets.append(font_stylesheet)
|
|
elif isinstance(font_stylesheet, dict):
|
|
if font_stylesheet["url"]:
|
|
self._stylesheets.append(font_stylesheet["url"])
|
|
elif font_stylesheet["css"]:
|
|
self._font_css.append(font_stylesheet["css"])
|
|
|
|
self.set()
|
|
|
|
def set(
|
|
self,
|
|
*,
|
|
# Body Attributes: These set set the values for the entire body of the app.
|
|
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,
|
|
# Element Colors: These set the colors for common elements.
|
|
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_accent_subdued=None,
|
|
border_color_accent_subdued_dark=None,
|
|
border_color_primary=None,
|
|
border_color_primary_dark=None,
|
|
color_accent=None,
|
|
color_accent_soft=None,
|
|
color_accent_soft_dark=None,
|
|
# Text: This sets the text styling for text elements.
|
|
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,
|
|
code_background_fill=None,
|
|
code_background_fill_dark=None,
|
|
# Shadows: These set the high-level shadow rendering styles. These variables are often referenced by other component-specific shadow variables.
|
|
shadow_drop=None,
|
|
shadow_drop_lg=None,
|
|
shadow_inset=None,
|
|
shadow_spread=None,
|
|
shadow_spread_dark=None,
|
|
# Layout Atoms: These set the style for common layout elements, such as the blocks that wrap components.
|
|
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_shadow=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,
|
|
# Component Atoms: These set the style for elements within components.
|
|
accordion_text_color=None,
|
|
accordion_text_color_dark=None,
|
|
table_text_color=None,
|
|
table_text_color_dark=None,
|
|
checkbox_background_color=None,
|
|
chatbot_text_size=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_color_selected=None,
|
|
checkbox_label_border_color_selected_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,
|
|
error_icon_color=None,
|
|
error_icon_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,
|
|
# Buttons: These set the style for buttons.
|
|
button_border_width=None,
|
|
button_border_width_dark=None,
|
|
button_transform_hover=None,
|
|
button_transform_active=None,
|
|
button_transition=None,
|
|
button_large_padding=None,
|
|
button_large_radius=None,
|
|
button_large_text_size=None,
|
|
button_large_text_weight=None,
|
|
button_small_padding=None,
|
|
button_small_radius=None,
|
|
button_small_text_size=None,
|
|
button_small_text_weight=None,
|
|
button_medium_padding=None,
|
|
button_medium_radius=None,
|
|
button_medium_text_size=None,
|
|
button_medium_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_primary_shadow=None,
|
|
button_primary_shadow_hover=None,
|
|
button_primary_shadow_active=None,
|
|
button_primary_shadow_dark=None,
|
|
button_primary_shadow_hover_dark=None,
|
|
button_primary_shadow_active_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_secondary_shadow=None,
|
|
button_secondary_shadow_hover=None,
|
|
button_secondary_shadow_active=None,
|
|
button_secondary_shadow_dark=None,
|
|
button_secondary_shadow_hover_dark=None,
|
|
button_secondary_shadow_active_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,
|
|
) -> 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_accent_subdued: The subdued border color for accented items.
|
|
border_color_accent_subdued_dark: The subdued border color 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.
|
|
code_background_fill: The background color of code blocks.
|
|
code_background_fill_dark: The background color of code blocks in dark mode.
|
|
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_shadow: The shadow of the title label of a media element (e.g. image).
|
|
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.
|
|
accordion_text_color: The body text color in the accordion.
|
|
accordion_text_color_dark: The body text color in the accordion in dark mode.
|
|
table_text_color: The body text color in the table.
|
|
table_text_color_dark: The body text color in the table 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).
|
|
chatbot_text_size: The text size of the chatbot text.
|
|
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_color_selected: The border color of the surrounding button of a checkbox or radio element when selected.
|
|
checkbox_label_border_color_selected_dark: The border color of the surrounding button of a checkbox or radio element when selected 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_primary_shadow: The shadow under a primary button.
|
|
button_primary_shadow_active: The shadow under a primary button when pressed.
|
|
button_primary_shadow_hover: The shadow under a primary button when hovered over.
|
|
button_primary_shadow_dark: The shadow under a primary button in dark mode.
|
|
button_primary_shadow_active_dark: The shadow under a primary button when pressed in dark mode.
|
|
button_primary_shadow_hover_dark: The shadow under a primary button 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_secondary_shadow: The shadow under a secondary button.
|
|
button_secondary_shadow_active: The shadow under a secondary button when pressed.
|
|
button_secondary_shadow_hover: The shadow under a secondary button when hovered over.
|
|
button_secondary_shadow_dark: The shadow under a secondary button in dark mode.
|
|
button_secondary_shadow_active_dark: The shadow under a secondary button when pressed in dark mode.
|
|
button_secondary_shadow_hover_dark: The shadow under a secondary button when hovered over in dark mode.
|
|
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_medium_padding: The padding of a button set to "medium" size.
|
|
button_medium_radius: The corner radius of a button set to "medium" size.
|
|
button_medium_text_size: The text size of a button set to "medium" size.
|
|
button_medium_text_weight: The text weight of a button set to "medium" size.
|
|
button_transition: The transition animation duration of a button between regular, hover, and focused states.
|
|
button_transform_hover: The transform animation of a button on hover.
|
|
button_transform_active: The transform animation of a button when pressed.
|
|
"""
|
|
|
|
# Body
|
|
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_sm")
|
|
# Core Colors
|
|
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"
|
|
)
|
|
# Text Colors
|
|
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.accordion_text_color = accordion_text_color or getattr(
|
|
self, "accordion_text_color", "*body_text_color"
|
|
)
|
|
self.accordion_text_color_dark = accordion_text_color_dark or getattr(
|
|
self, "accordion_text_color_dark", "*body_text_color"
|
|
)
|
|
self.table_text_color = table_text_color or getattr(
|
|
self, "table_text_color", "*body_text_color"
|
|
)
|
|
self.table_text_color_dark = table_text_color_dark or getattr(
|
|
self, "table_text_color_dark", "*body_text_color"
|
|
)
|
|
# Shadows
|
|
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"
|
|
)
|
|
# Layout Atoms
|
|
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_shadow = block_label_shadow or getattr(
|
|
self, "block_label_shadow", "*block_shadow"
|
|
)
|
|
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_sm - 1px) 0 calc(*radius_sm - 1px) 0",
|
|
)
|
|
self.block_label_right_radius = block_label_right_radius or getattr(
|
|
self,
|
|
"block_label_right_radius",
|
|
"0 calc(*radius_sm - 1px) 0 calc(*radius_sm - 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_sm")
|
|
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_sm"
|
|
)
|
|
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.border_color_accent_subdued = border_color_accent_subdued or getattr(
|
|
self, "border_color_accent_subdued", "*border_color_accent"
|
|
)
|
|
self.border_color_accent_subdued_dark = (
|
|
border_color_accent_subdued_dark
|
|
or getattr(self, "border_color_accent_subdued_dark", "*border_color_accent")
|
|
)
|
|
# Component Atoms
|
|
self.code_background_fill = code_background_fill or getattr(
|
|
self, "code_background_fill", "*neutral_100"
|
|
)
|
|
self.code_background_fill_dark = code_background_fill_dark or getattr(
|
|
self, "code_background_fill_dark", "*neutral_800"
|
|
)
|
|
self.chatbot_text_size = chatbot_text_size or getattr(
|
|
self, "chatbot_text_size", "*text_lg"
|
|
)
|
|
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", "*color_accent")
|
|
)
|
|
self.checkbox_background_color_selected_dark = (
|
|
checkbox_background_color_selected_dark
|
|
or getattr(self, "checkbox_background_color_selected_dark", "*color_accent")
|
|
)
|
|
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", "*color_accent"
|
|
)
|
|
self.checkbox_border_color_focus_dark = (
|
|
checkbox_border_color_focus_dark
|
|
or getattr(self, "checkbox_border_color_focus_dark", "*color_accent")
|
|
)
|
|
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", "*color_accent"
|
|
)
|
|
self.checkbox_border_color_selected_dark = (
|
|
checkbox_border_color_selected_dark
|
|
or getattr(self, "checkbox_border_color_selected_dark", "*color_accent")
|
|
)
|
|
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_color_selected = (
|
|
checkbox_label_border_color_selected
|
|
or getattr(
|
|
self,
|
|
"checkbox_label_border_color_selected",
|
|
"*checkbox_label_border_color",
|
|
)
|
|
)
|
|
self.checkbox_label_border_color_selected_dark = (
|
|
checkbox_label_border_color_selected_dark
|
|
or getattr(
|
|
self,
|
|
"checkbox_label_border_color_selected_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.c50
|
|
)
|
|
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.c700
|
|
)
|
|
self.error_border_color_dark = error_border_color_dark or getattr(
|
|
self, "error_border_color_dark", colors.red.c500
|
|
)
|
|
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.c700
|
|
)
|
|
self.error_text_color_dark = error_text_color_dark or getattr(
|
|
self, "error_text_color_dark", colors.red.c50
|
|
)
|
|
self.error_icon_color = error_icon_color or getattr(
|
|
self, "error_icon_color", colors.red.c700
|
|
)
|
|
self.error_icon_color_dark = error_icon_color_dark or getattr(
|
|
self, "error_icon_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", "*input_background_fill"
|
|
)
|
|
self.input_background_fill_focus_dark = (
|
|
input_background_fill_focus_dark
|
|
or getattr(self, "input_background_fill_focus_dark", None)
|
|
)
|
|
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_sm")
|
|
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", "*color_accent"
|
|
)
|
|
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_sm")
|
|
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"
|
|
)
|
|
# Buttons
|
|
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", None
|
|
)
|
|
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_secondary_background_fill_hover",
|
|
)
|
|
)
|
|
self.button_cancel_background_fill_hover_dark = (
|
|
button_cancel_background_fill_hover_dark
|
|
or getattr(
|
|
self,
|
|
"button_cancel_background_fill_hover_dark",
|
|
"*button_secondary_background_fill_hover",
|
|
)
|
|
)
|
|
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_secondary_border_color_hover",
|
|
)
|
|
)
|
|
self.button_cancel_border_color_hover_dark = (
|
|
button_cancel_border_color_hover_dark
|
|
or getattr(
|
|
self,
|
|
"button_cancel_border_color_hover_dark",
|
|
"*button_secondary_border_color_hover",
|
|
)
|
|
)
|
|
|
|
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_secondary_text_color_hover"
|
|
)
|
|
self.button_cancel_text_color_hover_dark = (
|
|
button_cancel_text_color_hover_dark
|
|
or getattr(self, "button_cancel_text_color_hover_dark", "white")
|
|
)
|
|
|
|
self.button_transform_hover = button_transform_hover or getattr(
|
|
self, "button_transform_hover", "none"
|
|
)
|
|
self.button_transform_active = button_transform_active or getattr(
|
|
self, "button_transform_active", "none"
|
|
)
|
|
self.button_transition = button_transition or getattr(
|
|
self, "button_transition", "all 0.2s ease"
|
|
)
|
|
|
|
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_md"
|
|
)
|
|
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_500"
|
|
)
|
|
self.button_primary_background_fill_dark = (
|
|
button_primary_background_fill_dark
|
|
or getattr(self, "button_primary_background_fill_dark", "*primary_600")
|
|
)
|
|
self.button_primary_background_fill_hover = (
|
|
button_primary_background_fill_hover
|
|
or getattr(self, "button_primary_background_fill_hover", "*primary_600")
|
|
)
|
|
self.button_primary_background_fill_hover_dark = (
|
|
button_primary_background_fill_hover_dark
|
|
or getattr(
|
|
self,
|
|
"button_primary_background_fill_hover_dark",
|
|
"*primary_700",
|
|
)
|
|
)
|
|
self.button_primary_border_color = button_primary_border_color or getattr(
|
|
self, "button_primary_border_color", "*primary_500"
|
|
)
|
|
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",
|
|
"*primary_500",
|
|
)
|
|
)
|
|
self.button_primary_border_color_hover_dark = (
|
|
button_primary_border_color_hover_dark
|
|
or getattr(
|
|
self,
|
|
"button_primary_border_color_hover_dark",
|
|
"*primary_500",
|
|
)
|
|
)
|
|
self.button_primary_text_color = button_primary_text_color or getattr(
|
|
self, "button_primary_text_color", "white"
|
|
)
|
|
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_primary_shadow = button_primary_shadow or getattr(
|
|
self, "button_primary_shadow", "none"
|
|
)
|
|
self.button_primary_shadow_hover = button_primary_shadow_hover or getattr(
|
|
self, "button_primary_shadow_hover", "*button_primary_shadow"
|
|
)
|
|
self.button_primary_shadow_active = button_primary_shadow_active or getattr(
|
|
self, "button_primary_shadow_active", "*button_primary_shadow"
|
|
)
|
|
self.button_primary_shadow_dark = button_primary_shadow_dark or getattr(
|
|
self, "button_primary_shadow_dark", None
|
|
)
|
|
self.button_primary_shadow_hover_dark = (
|
|
button_primary_shadow_hover_dark
|
|
or getattr(
|
|
self, "button_primary_shadow_hover_dark", "*button_primary_shadow"
|
|
)
|
|
)
|
|
self.button_primary_shadow_active_dark = (
|
|
button_primary_shadow_active_dark
|
|
or getattr(
|
|
self, "button_primary_shadow_active_dark", "*button_primary_shadow"
|
|
)
|
|
)
|
|
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", "*neutral_300")
|
|
)
|
|
self.button_secondary_background_fill_hover_dark = (
|
|
button_secondary_background_fill_hover_dark
|
|
or getattr(
|
|
self, "button_secondary_background_fill_hover_dark", "*neutral_700"
|
|
)
|
|
)
|
|
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",
|
|
"*neutral_200",
|
|
)
|
|
)
|
|
self.button_secondary_border_color_hover_dark = (
|
|
button_secondary_border_color_hover_dark
|
|
or getattr(
|
|
self,
|
|
"button_secondary_border_color_hover_dark",
|
|
"*neutral_500",
|
|
)
|
|
)
|
|
self.button_secondary_text_color = button_secondary_text_color or getattr(
|
|
self, "button_secondary_text_color", "black"
|
|
)
|
|
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_secondary_shadow = button_secondary_shadow or getattr(
|
|
self, "button_secondary_shadow", "*button_primary_shadow"
|
|
)
|
|
self.button_secondary_shadow_hover = button_secondary_shadow_hover or getattr(
|
|
self, "button_secondary_shadow_hover", "*button_secondary_shadow"
|
|
)
|
|
self.button_secondary_shadow_active = button_secondary_shadow_active or getattr(
|
|
self, "button_secondary_shadow_active", "*button_secondary_shadow"
|
|
)
|
|
self.button_secondary_shadow_dark = button_secondary_shadow_dark or getattr(
|
|
self, "button_secondary_shadow_dark", None
|
|
)
|
|
self.button_secondary_shadow_hover_dark = (
|
|
button_secondary_shadow_hover_dark
|
|
or getattr(
|
|
self, "button_secondary_shadow_hover_dark", "*button_secondary_shadow"
|
|
)
|
|
)
|
|
self.button_secondary_shadow_active_dark = (
|
|
button_secondary_shadow_active_dark
|
|
or getattr(
|
|
self, "button_secondary_shadow_active_dark", "*button_secondary_shadow"
|
|
)
|
|
)
|
|
|
|
self.button_small_padding = button_small_padding or getattr(
|
|
self, "button_small_padding", "*spacing_sm calc(1.5 * *spacing_sm)"
|
|
)
|
|
self.button_small_radius = button_small_radius or getattr(
|
|
self, "button_small_radius", "*radius_md"
|
|
)
|
|
self.button_small_text_size = button_small_text_size or getattr(
|
|
self, "button_small_text_size", "*text_sm"
|
|
)
|
|
self.button_small_text_weight = button_small_text_weight or getattr(
|
|
self, "button_small_text_weight", "400"
|
|
)
|
|
self.button_medium_padding = button_medium_padding or getattr(
|
|
self, "button_medium_padding", "*spacing_md calc(2 * *spacing_md)"
|
|
)
|
|
self.button_medium_radius = button_medium_radius or getattr(
|
|
self, "button_medium_radius", "*radius_md"
|
|
)
|
|
self.button_medium_text_size = button_medium_text_size or getattr(
|
|
self, "button_medium_text_size", "*text_md"
|
|
)
|
|
self.button_medium_text_weight = button_medium_text_weight or getattr(
|
|
self, "button_medium_text_weight", "600"
|
|
)
|
|
|
|
return self
|