From 1e4b0a163ce7ba3a4f84b2ecd5188258aa185d46 Mon Sep 17 00:00:00 2001 From: Elijah Ahianyo Date: Wed, 7 Feb 2024 17:52:09 +0000 Subject: [PATCH] Map Accordion color schemes to radix colors (#2511) --- .../components/radix/primitives/accordion.py | 148 ++++++------------ .../components/radix/primitives/accordion.pyi | 64 +++++++- 2 files changed, 108 insertions(+), 104 deletions(-) diff --git a/reflex/components/radix/primitives/accordion.py b/reflex/components/radix/primitives/accordion.py index aa012da00..00d674d73 100644 --- a/reflex/components/radix/primitives/accordion.py +++ b/reflex/components/radix/primitives/accordion.py @@ -6,9 +6,10 @@ from types import SimpleNamespace from typing import Any, Dict, Literal from reflex.components.component import Component -from reflex.components.core import cond, match +from reflex.components.core import match from reflex.components.lucide.icon import Icon from reflex.components.radix.primitives.base import RadixPrimitiveComponent +from reflex.components.radix.themes.base import LiteralAccentColor from reflex.style import ( Style, convert_dict_to_style_and_format_emotion, @@ -43,9 +44,7 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV convert_dict_to_style_and_format_emotion( { "border_radius": "6px", - "background_color": cond( - color_scheme == "primary", "var(--accent-3)", "var(--slate-3)" - ), + "background_color": f"var(--{color_scheme}-3)", "box_shadow": "0 2px 10px var(--black-a1)", } ), @@ -55,11 +54,7 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV convert_dict_to_style_and_format_emotion( { "border_radius": "6px", - "border": cond( - color_scheme == "primary", - "1px solid var(--accent-6)", - "1px solid var(--slate-6)", - ), + "border": f"1px solid var(--{color_scheme}-6)", "box_shadow": "0 2px 10px var(--black-a1)", } ), @@ -69,14 +64,8 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV convert_dict_to_style_and_format_emotion( { "border_radius": "6px", - "border": cond( - color_scheme == "primary", - "1px solid var(--accent-6)", - "1px solid var(--slate-6)", - ), - "background_color": cond( - color_scheme == "primary", "var(--accent-3)", "var(--slate-3)" - ), + "border": f"1px solid var(--{color_scheme}-6)", + "background_color": f"var(--{color_scheme}-3)", "box_shadow": "0 2px 10px var(--black-a1)", } ), @@ -94,9 +83,7 @@ def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseV convert_dict_to_style_and_format_emotion( { "border_radius": "6px", - "background_color": cond( - color_scheme == "primary", "var(--accent-9)", "var(--slate-9)" - ), + "background_color": f"var(--{color_scheme}-9)", "box_shadow": "0 2px 10px var(--black-a4)", } ) @@ -159,24 +146,12 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) -> "soft", convert_dict_to_style_and_format_emotion( { - "color": cond( - color_scheme == "primary", - "var(--accent-11)", - "var(--slate-11)", - ), + "color": f"var(--{color_scheme}-11)", "&:hover": { - "background_color": cond( - color_scheme == "primary", - "var(--accent-4)", - "var(--slate-4)", - ), + "background_color": f"var(--{color_scheme}-4)", }, "& > .AccordionChevron": { - "color": cond( - color_scheme == "primary", - "var(--accent-11)", - "var(--slate-11)", - ), + "color": f"var(--{color_scheme}-11)", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)", }, "&[data-state='open'] > .AccordionChevron": { @@ -201,24 +176,12 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) -> "ghost", convert_dict_to_style_and_format_emotion( { - "color": cond( - color_scheme == "primary", - "var(--accent-11)", - "var(--slate-11)", - ), + "color": f"var(--{color_scheme}-11)", "&:hover": { - "background_color": cond( - color_scheme == "primary", - "var(--accent-4)", - "var(--slate-4)", - ), + "background_color": f"var(--{color_scheme}-4)", }, "& > .AccordionChevron": { - "color": cond( - color_scheme == "primary", - "var(--accent-11)", - "var(--slate-11)", - ), + "color": f"var(--{color_scheme}-11)", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)", }, "&[data-state='open'] > .AccordionChevron": { @@ -240,27 +203,13 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) -> # defaults to classic convert_dict_to_style_and_format_emotion( { - "color": cond( - color_scheme == "primary", - "var(--accent-9-contrast)", - "var(--slate-9-contrast)", - ), - "box_shadow": cond( - color_scheme == "primary", - "0 1px 0 var(--accent-6)", - "0 1px 0 var(--slate-11)", - ), + "color": f"var(--{color_scheme}-9-contrast)", + "box_shadow": f"var(--{color_scheme}-11)", "&:hover": { - "background_color": cond( - color_scheme == "primary", "var(--accent-10)", "var(--slate-10)" - ), + "background_color": f"var(--{color_scheme}-10)", }, "& > .AccordionChevron": { - "color": cond( - color_scheme == "primary", - "var(--accent-9-contrast)", - "var(--slate-9-contrast)", - ), + "color": f"var(--{color_scheme}-9-contrast)", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)", }, "&[data-state='open'] > .AccordionChevron": { @@ -300,11 +249,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) -> { "overflow": "hidden", "font_size": "10px", - "color": cond( - color_scheme == "primary", - "var(--accent-11)", - "var(--slate-11)", - ), + "color": f"var(--{color_scheme}-11)", "padding": "15px, 20px", "&[data-state='open']": { "animation": Var.create( @@ -327,31 +272,13 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) -> "font_size": "10px", "color": match( variant, - ( - "classic", - cond( - color_scheme == "primary", - "var(--accent-9-contrast)", - "var(--slate-9-contrast)", - ), - ), - cond( - color_scheme == "primary", "var(--accent-11)", "var(--slate-11)" - ), + ("classic", f"var(--{color_scheme}-9-contrast)"), + f"var(--{color_scheme}-11)", ), "background_color": match( variant, - ( - "classic", - cond( - color_scheme == "primary", - "var(--accent-9)", - "var(--slate-9)", - ), - ), - cond( - color_scheme == "primary", "var(--accent-3)", "var(--slate-3)" - ), + ("classic", f"var(--{color_scheme}-9)"), + f"var(--{color_scheme}-3)", ), "padding": "15px, 20px", "&[data-state='open']": { @@ -409,7 +336,7 @@ class AccordionRoot(AccordionComponent): variant: Var[LiteralAccordionRootVariant] = "classic" # type: ignore # The color scheme of the accordion. - color_scheme: Var[LiteralAccordionRootColorScheme] = "primary" # type: ignore + color_scheme: Var[LiteralAccentColor] # type: ignore # dynamic themes of the accordion generated at compile time. _dynamic_themes: Var[dict] @@ -430,11 +357,11 @@ class AccordionRoot(AccordionComponent): """ comp = super().create(*children, **props) - if not comp.color_scheme._var_state: # type: ignore + if comp.color_scheme is not None and not comp.color_scheme._var_state: # type: ignore # mark the vars of color string literals as strings so they can be formatted properly when performing a var operation. comp.color_scheme._var_is_string = True # type: ignore - if not comp.variant._var_state: # type: ignore + if comp.variant is not None and not comp.variant._var_state: # type: ignore # mark the vars of variant string literals as strings so they are formatted properly in the match condition. comp.variant._var_is_string = True # type: ignore @@ -449,14 +376,29 @@ class AccordionRoot(AccordionComponent): return {"css": self._dynamic_themes._merge(format_as_emotion(self.style))} # type: ignore def _apply_theme(self, theme: Component): + global_color_scheme = getattr(theme, "accent_color", None) + + if global_color_scheme is None and self.color_scheme is None: + raise ValueError( + "`color_scheme` cannot be None. Either set the `color_scheme` prop on the accordion " + "component or set the `accent_color` prop in your global theme." + ) + + # prepare the color_scheme var to be used in an f-string(strip off the wrapping curly brace) + color_scheme = Var.create( + self.color_scheme if self.color_scheme is not None else global_color_scheme + )._replace( # type: ignore + _var_is_string=False + ) + accordion_theme_root = get_theme_accordion_root( - variant=self.variant, color_scheme=self.color_scheme + variant=self.variant, color_scheme=color_scheme ) accordion_theme_content = get_theme_accordion_content( - variant=self.variant, color_scheme=self.color_scheme + variant=self.variant, color_scheme=color_scheme ) accordion_theme_trigger = get_theme_accordion_trigger( - variant=self.variant, color_scheme=self.color_scheme + variant=self.variant, color_scheme=color_scheme ) # extract var_data from dynamic themes. @@ -480,7 +422,9 @@ class AccordionRoot(AccordionComponent): ) def _get_imports(self): - return imports.merge_imports(super()._get_imports(), self._var_data.imports) + return imports.merge_imports( + super()._get_imports(), self._var_data.imports if self._var_data else {} + ) def get_event_triggers(self) -> Dict[str, Any]: """Get the events triggers signatures for the component. diff --git a/reflex/components/radix/primitives/accordion.pyi b/reflex/components/radix/primitives/accordion.pyi index 56488e4b6..a7c88b001 100644 --- a/reflex/components/radix/primitives/accordion.pyi +++ b/reflex/components/radix/primitives/accordion.pyi @@ -10,9 +10,10 @@ from reflex.style import Style from types import SimpleNamespace from typing import Any, Dict, Literal from reflex.components.component import Component -from reflex.components.core import cond, match +from reflex.components.core import match from reflex.components.lucide.icon import Icon from reflex.components.radix.primitives.base import RadixPrimitiveComponent +from reflex.components.radix.themes.base import LiteralAccentColor from reflex.style import ( Style, convert_dict_to_style_and_format_emotion, @@ -148,7 +149,66 @@ class AccordionRoot(AccordionComponent): ] ] = None, color_scheme: Optional[ - Union[Var[Literal["primary", "accent"]], Literal["primary", "accent"]] + Union[ + Var[ + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ] + ], + Literal[ + "tomato", + "red", + "ruby", + "crimson", + "pink", + "plum", + "purple", + "violet", + "iris", + "indigo", + "blue", + "cyan", + "teal", + "jade", + "green", + "grass", + "brown", + "orange", + "sky", + "mint", + "lime", + "yellow", + "amber", + "gold", + "bronze", + "gray", + ], + ] ] = None, _dynamic_themes: Optional[Union[Var[dict], dict]] = None, _var_data: Optional[VarData] = None,