reflex 0.4.9a1__py3-none-any.whl → 0.5.0__py3-none-any.whl

reflex/components/radix/primitives/accordion.py

@@ -5,302 +5,69 @@ from __future__ import annotations
 from typing import Any, Dict, List, Literal, Optional, Union
 
 from reflex.components.component import Component, ComponentNamespace
-from reflex.components.core.match import Match
+from reflex.components.core.colors import color
+from reflex.components.core.cond import cond
 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,
-    format_as_emotion,
-)
+from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
+from reflex.style import Style
 from reflex.utils import imports
-from reflex.vars import BaseVar, Var, VarData, get_uuid_string_var
+from reflex.vars import Var, get_uuid_string_var
 
 LiteralAccordionType = Literal["single", "multiple"]
 LiteralAccordionDir = Literal["ltr", "rtl"]
 LiteralAccordionOrientation = Literal["vertical", "horizontal"]
-LiteralAccordionRootVariant = Literal["classic", "soft", "surface", "outline", "ghost"]
-LiteralAccordionRootColorScheme = Literal["primary", "accent"]
+LiteralAccordionVariant = Literal["classic", "soft", "surface", "outline", "ghost"]
 
 DEFAULT_ANIMATION_DURATION = 250
+DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
 
 
-def get_theme_accordion_root(variant: Var[str], color_scheme: Var[str]) -> BaseVar:
-    """Get the theme for the accordion root component.
+def _inherited_variant_selector(
+    variant: Var[LiteralAccordionVariant] | LiteralAccordionVariant,
+    *selectors: str,
+) -> str:
+    """Create a multi CSS selector for targeting variant against the given selectors.
 
     Args:
-        variant: The variant of the accordion.
-        color_scheme: The color of the accordion.
+        variant: The variant to target.
+        selectors: The selectors to apply the variant to (default &)
 
     Returns:
-        The theme for the accordion root component.
+        A CSS selector that is more specific on elements that directly set the variant.
     """
-    return Match.create(  # type: ignore
-        variant,
-        (
-            "soft",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "border_radius": "6px",
-                    "background_color": f"var(--{color_scheme}-3)",
-                    "box_shadow": "0 2px 10px var(--black-a1)",
-                }
-            ),
-        ),
-        (
-            "outline",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "border_radius": "6px",
-                    "border": f"1px solid var(--{color_scheme}-6)",
-                    "box_shadow": "0 2px 10px var(--black-a1)",
-                }
-            ),
-        ),
-        (
-            "surface",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "border_radius": "6px",
-                    "border": f"1px solid var(--{color_scheme}-6)",
-                    "background_color": f"var(--{color_scheme}-3)",
-                    "box_shadow": "0 2px 10px var(--black-a1)",
-                }
-            ),
-        ),
-        (
-            "ghost",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "border_radius": "6px",
-                    "background_color": "none",
-                    "box_shadow": "None",
-                }
-            ),
-        ),
-        convert_dict_to_style_and_format_emotion(
-            {
-                "border_radius": "6px",
-                "background_color": f"var(--{color_scheme}-9)",
-                "box_shadow": "0 2px 10px var(--black-a4)",
-            }
-        ),
-        # defaults to classic
-    )
-
-
-def get_theme_accordion_item():
-    """Get the theme for the accordion item component.
-
-    Returns:
-        The theme for the accordion item component.
-    """
-    return convert_dict_to_style_and_format_emotion(
-        {
-            "overflow": "hidden",
-            "width": "100%",
-            "margin_top": "1px",
-            "&:first-child": {
-                "margin_top": 0,
-                "border_top_left_radius": "4px",
-                "border_top_right_radius": "4px",
-            },
-            "&:last-child": {
-                "border_bottom_left_radius": "4px",
-                "border_bottom_right_radius": "4px",
-            },
-            "&:focus-within": {
-                "position": "relative",
-                "z_index": 1,
-            },
-        }
+    if not selectors:
+        selectors = ("&",)
+    # Prefer the `data-variant` that is set directly on the selector,
+    # but also inherit the `data-variant` from any parent element.
+    return ", ".join(
+        [
+            f"{selector}[data-variant='{variant}'], *:where([data-variant='{variant}']) {selector}"
+            for selector in selectors
+        ]
     )
 
 
-def get_theme_accordion_header() -> dict[str, str]:
-    """Get the theme for the accordion header component.
-
-    Returns:
-        The theme for the accordion header component.
-    """
-    return {
-        "display": "flex",
-    }
-
-
-def get_theme_accordion_trigger(variant: str | Var, color_scheme: str | Var) -> BaseVar:
-    """Get the theme for the accordion trigger component.
-
-    Args:
-        variant: The variant of the accordion.
-        color_scheme: The color of the accordion.
+class AccordionComponent(RadixPrimitiveComponent):
+    """Base class for all @radix-ui/accordion components."""
 
-    Returns:
-        The theme for the accordion trigger component.
-    """
-    return Match.create(  # type: ignore
-        variant,
-        (
-            "soft",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "color": f"var(--{color_scheme}-11)",
-                    "&:hover": {
-                        "background_color": f"var(--{color_scheme}-4)",
-                    },
-                    "& > .AccordionChevron": {
-                        "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": {
-                        "transform": "rotate(180deg)",
-                    },
-                    "font_family": "inherit",
-                    "width": "100%",
-                    "padding": "0 20px",
-                    "height": "45px",
-                    "flex": 1,
-                    "display": "flex",
-                    "align_items": "center",
-                    "justify_content": "space-between",
-                    "font_size": "15px",
-                    "line_height": 1,
-                }
-            ),
-        ),
-        (
-            "outline",
-            "surface",
-            "ghost",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "color": f"var(--{color_scheme}-11)",
-                    "&:hover": {
-                        "background_color": f"var(--{color_scheme}-4)",
-                    },
-                    "& > .AccordionChevron": {
-                        "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": {
-                        "transform": "rotate(180deg)",
-                    },
-                    "font_family": "inherit",
-                    "width": "100%",
-                    "padding": "0 20px",
-                    "height": "45px",
-                    "flex": 1,
-                    "display": "flex",
-                    "align_items": "center",
-                    "justify_content": "space-between",
-                    "font_size": "15px",
-                    "line_height": 1,
-                }
-            ),
-        ),
-        # defaults to classic
-        convert_dict_to_style_and_format_emotion(
-            {
-                "color": f"var(--{color_scheme}-9-contrast)",
-                "box_shadow": f"var(--{color_scheme}-11)",
-                "&:hover": {
-                    "background_color": f"var(--{color_scheme}-10)",
-                },
-                "& > .AccordionChevron": {
-                    "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": {
-                    "transform": "rotate(180deg)",
-                },
-                "font_family": "inherit",
-                "width": "100%",
-                "padding": "0 20px",
-                "height": "45px",
-                "flex": 1,
-                "display": "flex",
-                "align_items": "center",
-                "justify_content": "space-between",
-                "font_size": "15px",
-                "line_height": 1,
-            }
-        ),
-    )
+    library = "@radix-ui/react-accordion@^1.1.2"
 
+    # The color scheme of the component.
+    color_scheme: Var[LiteralAccentColor]
 
-def get_theme_accordion_content(variant: str | Var, color_scheme: str | Var) -> BaseVar:
-    """Get the theme for the accordion content component.
+    # The variant of the component.
+    variant: Var[LiteralAccordionVariant]
 
-    Args:
-        variant: The variant of the accordion.
-        color_scheme: The color of the accordion.
+    def add_style(self) -> Style | None:
+        """Add style to the component."""
+        if self.color_scheme is not None:
+            self.custom_attrs["data-accent-color"] = self.color_scheme
+        if self.variant is not None:
+            self.custom_attrs["data-variant"] = self.variant
 
-    Returns:
-        The theme for the accordion content component.
-    """
-    return Match.create(  # type: ignore
-        variant,
-        (
-            "outline",
-            "ghost",
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "overflow": "hidden",
-                    "font_size": "10px",
-                    "color": f"var(--{color_scheme}-11)",
-                    "padding": "15px 20px",
-                    "&[data-state='open']": {
-                        "animation": Var.create(
-                            f"${{slideDown}} {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
-                            _var_is_string=True,
-                        ),
-                    },
-                    "&[data-state='closed']": {
-                        "animation": Var.create(
-                            f"${{slideUp}} {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
-                            _var_is_string=True,
-                        ),
-                    },
-                }
-            ),
-        ),
-        convert_dict_to_style_and_format_emotion(
-            {
-                "overflow": "hidden",
-                "font_size": "10px",
-                "color": Match.create(
-                    variant,
-                    ("classic", f"var(--{color_scheme}-9-contrast)"),
-                    f"var(--{color_scheme}-11)",
-                ),
-                "background_color": Match.create(
-                    variant,
-                    ("classic", f"var(--{color_scheme}-9)"),
-                    f"var(--{color_scheme}-3)",
-                ),
-                "padding": "15px 20px",
-                "&[data-state='open']": {
-                    "animation": Var.create(
-                        f"${{slideDown}} {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
-                        _var_is_string=True,
-                    ),
-                },
-                "&[data-state='closed']": {
-                    "animation": Var.create(
-                        f"${{slideUp}} {DEFAULT_ANIMATION_DURATION}ms cubic-bezier(0.87, 0, 0.13, 1)",
-                        _var_is_string=True,
-                    ),
-                },
-            }
-        ),
-    )
-
-
-class AccordionComponent(RadixPrimitiveComponent):
-    """Base class for all @radix-ui/accordion components."""
-
-    library = "@radix-ui/react-accordion@^1.1.2"
+    def _exclude_props(self) -> list[str]:
+        return ["color_scheme", "variant"]
 
 
 class AccordionRoot(AccordionComponent):
@@ -314,10 +81,10 @@ class AccordionRoot(AccordionComponent):
     type: Var[LiteralAccordionType]
 
     # The value of the item to expand.
-    value: Var[Optional[Union[str, List[str]]]]
+    value: Var[Union[str, List[str]]]
 
     # The default value of the item to expand.
-    default_value: Var[Optional[Union[str, List[str]]]]
+    default_value: Var[Union[str, List[str]]]
 
     # Whether or not the accordion is collapsible.
     collapsible: Var[bool]
@@ -331,106 +98,27 @@ class AccordionRoot(AccordionComponent):
     # The orientation of the accordion.
     orientation: Var[LiteralAccordionOrientation]
 
-    # The variant of the accordion.
-    variant: Var[LiteralAccordionRootVariant] = "classic"  # type: ignore
+    # The radius of the accordion corners.
+    radius: Var[LiteralRadius]
 
-    # The color scheme of the accordion.
-    color_scheme: Var[LiteralAccentColor]  # type: ignore
+    # The time in milliseconds to animate open and close
+    duration: Var[int] = Var.create_safe(DEFAULT_ANIMATION_DURATION)
 
-    # dynamic themes of the accordion generated at compile time.
-    _dynamic_themes: Var[dict] = Var.create({})  # type: ignore
+    # The easing function to use for the animation.
+    easing: Var[str] = Var.create_safe(DEFAULT_ANIMATION_EASING)
 
-    # The var_data associated with the component.
-    _var_data: VarData = VarData()  # type: ignore
+    # Whether to show divider lines between items.
+    show_dividers: Var[bool]
 
     _valid_children: List[str] = ["AccordionItem"]
 
-    @classmethod
-    def create(cls, *children, **props) -> Component:
-        """Create the Accordion root component.
-
-        Args:
-            *children: The children of the component.
-            **props: The properties of the component.
-
-        Returns:
-            The Accordion root Component.
-        """
-        comp = super().create(*children, **props)
-
-        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 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
-
-        return comp
-
-    def _get_style(self) -> dict:
-        """Get the style for the component.
-
-        Returns:
-            The dictionary of the component style as value and the style notation as key.
-        """
-        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=color_scheme
-        )
-        accordion_theme_content = get_theme_accordion_content(
-            variant=self.variant, color_scheme=color_scheme
-        )
-        accordion_theme_trigger = get_theme_accordion_trigger(
-            variant=self.variant, color_scheme=color_scheme
-        )
-
-        # extract var_data from dynamic themes.
-        self._var_data = (
-            self._var_data.merge(  # type: ignore
-                accordion_theme_trigger._var_data,
-                accordion_theme_content._var_data,
-                accordion_theme_root._var_data,
-            )
-            or self._var_data
-        )
-
-        self._dynamic_themes = Var.create(  # type: ignore
-            convert_dict_to_style_and_format_emotion(
-                {
-                    "& .AccordionItem": get_theme_accordion_item(),
-                    "& .AccordionHeader": get_theme_accordion_header(),
-                    "& .AccordionTrigger": accordion_theme_trigger,
-                    "& .AccordionContent": accordion_theme_content,
-                }
-            )
-        )._merge(  # type: ignore
-            accordion_theme_root
-        )
-
-    def _get_imports(self):
-        return imports.merge_imports(
-            super()._get_imports(),
-            self._var_data.imports if self._var_data else {},
-            {"@emotion/react": [imports.ImportVar(tag="keyframes")]},
-        )
+    def _exclude_props(self) -> list[str]:
+        return super()._exclude_props() + [
+            "radius",
+            "duration",
+            "easing",
+            "show_dividers",
+        ]
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the events triggers signatures for the component.
@@ -443,28 +131,48 @@ class AccordionRoot(AccordionComponent):
             "on_value_change": lambda e0: [e0],
         }
 
-    def _get_custom_code(self) -> str:
-        return """
-const slideDown = keyframes`
-from {
-  height: 0;
-}
-to {
-  height: var(--radix-accordion-content-height);
-}
-`
-const slideUp = keyframes`
-from {
-  height: var(--radix-accordion-content-height);
-}
-to {
-  height: 0;
-}
-`
-"""
+    def add_style(self):
+        """Add style to the component.
 
-    def _exclude_props(self) -> list[str]:
-        return ["color_scheme", "variant"]
+        Returns:
+            The style of the component.
+        """
+        if self.radius is not None:
+            self.custom_attrs["data-radius"] = self.radius
+        if self.variant is None:
+            # The default variant is classic
+            self.custom_attrs["data-variant"] = "classic"
+
+        style = {
+            "border_radius": "var(--radius-4)",
+            "box_shadow": f"0 2px 10px {color('black', 1, alpha=True)}",
+            "&[data-variant='classic']": {
+                "background_color": color("accent", 9),
+                "box_shadow": f"0 2px 10px {color('black', 4, alpha=True)}",
+            },
+            "&[data-variant='soft']": {
+                "background_color": color("accent", 3),
+            },
+            "&[data-variant='outline']": {
+                "border": f"1px solid {color('accent', 6)}",
+            },
+            "&[data-variant='surface']": {
+                "border": f"1px solid {color('accent', 6)}",
+                "background_color": "var(--accent-surface)",
+            },
+            "&[data-variant='ghost']": {
+                "background_color": "none",
+                "box_shadow": "None",
+            },
+            "--animation-duration": f"{self.duration}ms",
+            "--animation-easing": self.easing,
+        }
+        if self.show_dividers is not None:
+            style["--divider-px"] = cond(self.show_dividers, "1px", "0")
+        else:
+            style["&[data-variant='outline']"]["--divider-px"] = "1px"
+            style["&[data-variant='surface']"]["--divider-px"] = "1px"
+        return Style(style)
 
 
 class AccordionItem(AccordionComponent):
@@ -488,13 +196,6 @@ class AccordionItem(AccordionComponent):
 
     _valid_parents: List[str] = ["AccordionRoot"]
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style(
-            {
-                **self.style,
-            }
-        )
-
     @classmethod
     def create(
         cls,
@@ -506,9 +207,9 @@ class AccordionItem(AccordionComponent):
         """Create an accordion item.
 
         Args:
+            *children: The list of children to use if header and content are not provided.
             header: The header of the accordion item.
             content: The content of the accordion item.
-            *children: The list of children to use if header and content are not provided.
             **props: Additional properties to apply to the accordion item.
 
         Returns:
@@ -522,19 +223,71 @@ class AccordionItem(AccordionComponent):
         ):
             cls_name = f"{cls_name} AccordionItem"
 
+        color_scheme = props.get("color_scheme")
+        variant = props.get("variant")
+
         if (header is not None) and (content is not None):
             children = [
                 AccordionHeader.create(
                     AccordionTrigger.create(
                         header,
-                        AccordionIcon.create(),
+                        AccordionIcon.create(
+                            color_scheme=color_scheme,
+                            variant=variant,
+                        ),
+                        color_scheme=color_scheme,
+                        variant=variant,
                     ),
+                    color_scheme=color_scheme,
+                    variant=variant,
+                ),
+                AccordionContent.create(
+                    content,
+                    color_scheme=color_scheme,
+                    variant=variant,
                 ),
-                AccordionContent.create(content),
             ]
 
         return super().create(*children, value=value, **props, class_name=cls_name)
 
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
+        return Style(
+            {
+                "overflow": "hidden",
+                "width": "100%",
+                "margin_top": "1px",
+                "border_top": divider_style,
+                "&:first-child": {
+                    "margin_top": 0,
+                    "border_top": 0,
+                    "border_top_left_radius": "var(--radius-4)",
+                    "border_top_right_radius": "var(--radius-4)",
+                },
+                "&:last-child": {
+                    "border_bottom_left_radius": "var(--radius-4)",
+                    "border_bottom_right_radius": "var(--radius-4)",
+                },
+                "&:focus-within": {
+                    "position": "relative",
+                    "z_index": 1,
+                },
+                _inherited_variant_selector("ghost", "&:first-child"): {
+                    "border_radius": 0,
+                    "border_top": divider_style,
+                },
+                _inherited_variant_selector("ghost", "&:last-child"): {
+                    "border_radius": 0,
+                    "border_bottom": divider_style,
+                },
+            }
+        )
+
 
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
@@ -561,8 +314,13 @@ class AccordionHeader(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style({**self.style})
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style({"display": "flex"})
 
 
 class AccordionTrigger(AccordionComponent):
@@ -590,8 +348,44 @@ class AccordionTrigger(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style({**self.style})
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style(
+            {
+                "color": color("accent", 11),
+                "font_size": "1.1em",
+                "line_height": 1,
+                "justify_content": "space-between",
+                "align_items": "center",
+                "flex": 1,
+                "display": "flex",
+                "padding": "var(--space-3) var(--space-4)",
+                "width": "100%",
+                "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
+                "&[data-state='open'] > .AccordionChevron": {
+                    "transform": "rotate(180deg)",
+                },
+                "&:hover": {
+                    "background_color": color("accent", 4),
+                },
+                "& > .AccordionChevron": {
+                    "transition": f"transform var(--animation-duration) var(--animation-easing)",
+                },
+                _inherited_variant_selector("classic"): {
+                    "color": "var(--accent-contrast)",
+                    "&:hover": {
+                        "background_color": color("accent", 10),
+                    },
+                    "& > .AccordionChevron": {
+                        "color": "var(--accent-contrast)",
+                    },
+                },
+            }
+        )
 
 
 class AccordionIcon(Icon):
@@ -623,6 +417,14 @@ class AccordionContent(AccordionComponent):
 
     alias = "RadixAccordionContent"
 
+    def add_imports(self) -> imports.ImportDict:
+        """Add imports to the component.
+
+        Returns:
+            The imports of the component.
+        """
+        return {"@emotion/react": [imports.ImportVar(tag="keyframes")]}
+
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create the Accordion content component.
@@ -641,14 +443,67 @@ class AccordionContent(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style({**self.style})
+    def add_custom_code(self) -> list[str]:
+        """Add custom code to the component.
+
+        Returns:
+            The custom code of the component.
+        """
+        return [
+            """
+const slideDown = keyframes`
+from {
+  height: 0;
+}
+to {
+  height: var(--radix-accordion-content-height);
+}
+`
+const slideUp = keyframes`
+from {
+  height: var(--radix-accordion-content-height);
+}
+to {
+  height: 0;
+}
+`
+"""
+        ]
+
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        slideDown = Var.create(
+            f"${{slideDown}} var(--animation-duration) var(--animation-easing)",
+            _var_is_string=True,
+        )
+
+        slideUp = Var.create(
+            f"${{slideUp}} var(--animation-duration) var(--animation-easing)",
+            _var_is_string=True,
+        )
 
-    # def _get_imports(self):
-    #     return {
-    #         **super()._get_imports(),
-    #         "@emotion/react": [imports.ImportVar(tag="keyframes")],
-    #     }
+        return Style(
+            {
+                "overflow": "hidden",
+                "color": color("accent", 11),
+                "padding_x": "var(--space-4)",
+                # Apply before and after content to avoid height animation jank.
+                "&:before, &:after": {
+                    "content": "' '",
+                    "display": "block",
+                    "height": "var(--space-3)",
+                },
+                "&[data-state='open']": {"animation": slideDown},
+                "&[data-state='closed']": {"animation": slideUp},
+                _inherited_variant_selector("classic"): {
+                    "color": "var(--accent-contrast)",
+                },
+            }
+        )
 
 
 class Accordion(ComponentNamespace):