laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Map Accordion color schemes to radix colors (#2511)

Browse Source
This commit is contained in:
Elijah Ahianyo 2024-02-07 17:52:09 +00:00 committed by GitHub
parent a858d3a755
commit 1e4b0a163c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 108 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
reflex/components/radix/primitives/accordion.py
View File

@ -6,9 +6,10 @@ from types import SimpleNamespace
from typing import Any, Dict, Literal from typing import Any, Dict, Literal
from reflex.components.component import Component 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.lucide.icon import Icon
from reflex.components.radix.primitives.base import RadixPrimitiveComponent from reflex.components.radix.primitives.base import RadixPrimitiveComponent
from reflex.components.radix.themes.base import LiteralAccentColor
from reflex.style import ( from reflex.style import (
Style, Style,
convert_dict_to_style_and_format_emotion, 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( convert_dict_to_style_and_format_emotion(
{ {
"border_radius": "6px", "border_radius": "6px",
"background_color": cond( "background_color": f"var(--{color_scheme}-3)",
color_scheme == "primary", "var(--accent-3)", "var(--slate-3)"
),
"box_shadow": "0 2px 10px var(--black-a1)", "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( convert_dict_to_style_and_format_emotion(
{ {
"border_radius": "6px", "border_radius": "6px",
"border": cond( "border": f"1px solid var(--{color_scheme}-6)",
color_scheme == "primary",
"1px solid var(--accent-6)",
"1px solid var(--slate-6)",
),
"box_shadow": "0 2px 10px var(--black-a1)", "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( convert_dict_to_style_and_format_emotion(
{ {
"border_radius": "6px", "border_radius": "6px",
"border": cond( "border": f"1px solid var(--{color_scheme}-6)",
color_scheme == "primary", "background_color": f"var(--{color_scheme}-3)",
"1px solid var(--accent-6)",
"1px solid var(--slate-6)",
),
"background_color": cond(
color_scheme == "primary", "var(--accent-3)", "var(--slate-3)"
),
"box_shadow": "0 2px 10px var(--black-a1)", "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( convert_dict_to_style_and_format_emotion(
{ {
"border_radius": "6px", "border_radius": "6px",
"background_color": cond( "background_color": f"var(--{color_scheme}-9)",
color_scheme == "primary", "var(--accent-9)", "var(--slate-9)"
),
"box_shadow": "0 2px 10px var(--black-a4)", "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", "soft",
convert_dict_to_style_and_format_emotion( convert_dict_to_style_and_format_emotion(
{ {
"color": cond( "color": f"var(--{color_scheme}-11)",
color_scheme == "primary",
"var(--accent-11)",
"var(--slate-11)",
),
"&:hover": { "&:hover": {
"background_color": cond( "background_color": f"var(--{color_scheme}-4)",
color_scheme == "primary",
"var(--accent-4)",
"var(--slate-4)",
),
}, },
"& > .AccordionChevron": { "& > .AccordionChevron": {
"color": cond( "color": f"var(--{color_scheme}-11)",
color_scheme == "primary",
"var(--accent-11)",
"var(--slate-11)",
),
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
}, },
"&[data-state='open'] > .AccordionChevron": { "&[data-state='open'] > .AccordionChevron": {
@ -201,24 +176,12 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) ->
"ghost", "ghost",
convert_dict_to_style_and_format_emotion( convert_dict_to_style_and_format_emotion(
{ {
"color": cond( "color": f"var(--{color_scheme}-11)",
color_scheme == "primary",
"var(--accent-11)",
"var(--slate-11)",
),
"&:hover": { "&:hover": {
"background_color": cond( "background_color": f"var(--{color_scheme}-4)",
color_scheme == "primary",
"var(--accent-4)",
"var(--slate-4)",
),
}, },
"& > .AccordionChevron": { "& > .AccordionChevron": {
"color": cond( "color": f"var(--{color_scheme}-11)",
color_scheme == "primary",
"var(--accent-11)",
"var(--slate-11)",
),
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
}, },
"&[data-state='open'] > .AccordionChevron": { "&[data-state='open'] > .AccordionChevron": {
@ -240,27 +203,13 @@ def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) ->
# defaults to classic # defaults to classic
convert_dict_to_style_and_format_emotion( convert_dict_to_style_and_format_emotion(
{ {
"color": cond( "color": f"var(--{color_scheme}-9-contrast)",
color_scheme == "primary", "box_shadow": f"var(--{color_scheme}-11)",
"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)",
),
"&:hover": { "&:hover": {
"background_color": cond( "background_color": f"var(--{color_scheme}-10)",
color_scheme == "primary", "var(--accent-10)", "var(--slate-10)"
),
}, },
"& > .AccordionChevron": { "& > .AccordionChevron": {
"color": cond( "color": f"var(--{color_scheme}-9-contrast)",
color_scheme == "primary",
"var(--accent-9-contrast)",
"var(--slate-9-contrast)",
),
"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)", "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
}, },
"&[data-state='open'] > .AccordionChevron": { "&[data-state='open'] > .AccordionChevron": {
@ -300,11 +249,7 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
{ {
"overflow": "hidden", "overflow": "hidden",
"font_size": "10px", "font_size": "10px",
"color": cond( "color": f"var(--{color_scheme}-11)",
color_scheme == "primary",
"var(--accent-11)",
"var(--slate-11)",
),
"padding": "15px, 20px", "padding": "15px, 20px",
"&[data-state='open']": { "&[data-state='open']": {
"animation": Var.create( "animation": Var.create(
@ -327,31 +272,13 @@ def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) ->
"font_size": "10px", "font_size": "10px",
"color": match( "color": match(
variant, variant,
( ("classic", f"var(--{color_scheme}-9-contrast)"),
"classic", f"var(--{color_scheme}-11)",
cond(
color_scheme == "primary",
"var(--accent-9-contrast)",
"var(--slate-9-contrast)",
),
),
cond(
color_scheme == "primary", "var(--accent-11)", "var(--slate-11)"
),
), ),
"background_color": match( "background_color": match(
variant, variant,
( ("classic", f"var(--{color_scheme}-9)"),
"classic", f"var(--{color_scheme}-3)",
cond(
color_scheme == "primary",
"var(--accent-9)",
"var(--slate-9)",
),
),
cond(
color_scheme == "primary", "var(--accent-3)", "var(--slate-3)"
),
), ),
"padding": "15px, 20px", "padding": "15px, 20px",
"&[data-state='open']": { "&[data-state='open']": {
@ -409,7 +336,7 @@ class AccordionRoot(AccordionComponent):
variant: Var[LiteralAccordionRootVariant] = "classic" # type: ignore variant: Var[LiteralAccordionRootVariant] = "classic" # type: ignore
# The color scheme of the accordion. # 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 of the accordion generated at compile time.
_dynamic_themes: Var[dict] _dynamic_themes: Var[dict]
@ -430,11 +357,11 @@ class AccordionRoot(AccordionComponent):
""" """
comp = super().create(*children, **props) 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. # 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 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. # 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 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 return {"css": self._dynamic_themes._merge(format_as_emotion(self.style))} # type: ignore
def _apply_theme(self, theme: Component): 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( 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( 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( 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. # extract var_data from dynamic themes.
@ -480,7 +422,9 @@ class AccordionRoot(AccordionComponent):
) )
def _get_imports(self): 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]: def get_event_triggers(self) -> Dict[str, Any]:
"""Get the events triggers signatures for the component. """Get the events triggers signatures for the component.

64
reflex/components/radix/primitives/accordion.pyi
View File

@ -10,9 +10,10 @@ from reflex.style import Style
from types import SimpleNamespace from types import SimpleNamespace
from typing import Any, Dict, Literal from typing import Any, Dict, Literal
from reflex.components.component import Component 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.lucide.icon import Icon
from reflex.components.radix.primitives.base import RadixPrimitiveComponent from reflex.components.radix.primitives.base import RadixPrimitiveComponent
from reflex.components.radix.themes.base import LiteralAccentColor
from reflex.style import ( from reflex.style import (
Style, Style,
convert_dict_to_style_and_format_emotion, convert_dict_to_style_and_format_emotion,
@ -148,7 +149,66 @@ class AccordionRoot(AccordionComponent):
] ]
] = None, ] = None,
color_scheme: Optional[ 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, ] = None,
_dynamic_themes: Optional[Union[Var[dict], dict]] = None, _dynamic_themes: Optional[Union[Var[dict], dict]] = None,
_var_data: Optional[VarData] = None, _var_data: Optional[VarData] = None,