Skip to content

summary.outline buttons: arrow unreadable for .contrast #62

@elenes

Description

@elenes

Describe the issue

Current Behavior

An accordion like

<details>
  <summary role="button" class="outline contrast"></summary>
</details>

will render the arrow in the wrong color because this css rule

[data-theme=dark] details summary.contrast[role=button]::after {
  filter: brightness(100) invert(0);
}

does not account for .outline

Expected Behavior

The arrow should render correctly (un-inverted for darkmode, inverted for light mode).

It may make sense to simply use --pico-[color] for all outline arrows. This will also make the appearance of the arrows consistent with the border color.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions