Why does <Details /> apply alert styling? And, overriding module styles.

[roydukkey]

First of all, it seems very out-of-place for this component to be using the alert styles (ie. alert alert--info) simply because the semantics of the native element don't suggest such attention. Practically, I do not want details to look like my admonitions. Can't imagine I'm the only one.

Furthermore, I'm having a lot of difficulty styling @theme components that use *.module.css stylesheets. Without swizzing, I have restored to selecting the component with details[class|='details_'] just to gain specificity. Is there a better way?

[Josh-Cena]

+1 for using an alternative style. I guess the alert class is just applied because it's the only block styling available (the version banners use alert--warning)

Some components have stable class names (https://docusaurus.io/docs/next/styling-layout#theme-class-names) but <Details /> doesn't. I think it should.

[Josh-Cena]

I happened to like the simple design of GitHub's. Maybe we still want something fancier?

[slorber]

I find the defaults and GH not very visible: https://github.com/typescript-cheatsheets/react/blob/main/docs/basic/getting-started/function-components.md

There are a few designs available online, like https://freefrontend.com/html-details-summary-css/
Any you prefer?

---

I like this one: sober, simple and visible:

https://codepen.io/MoritzGiessmann/pen/PobErJB

[Josh-Cena]

I like that one as well—looks much better without a non-black-white background color. Maybe reuse the Infima card class?

Not sure if the dropdown should have a background though, I'm fine with or without.

[roydukkey]

I'm not bothered by the general layout/function the current implementation, more so just with the loudness of the design. Here is what I have ended up with after my style overrides.

// Copyright (c) roydukkey. All rights reserved.
// Licensed under the MIT. See LICENSE file in the project root for full license information.

@use '../palette'


@mixin import

	details[class|='details__']
		--ifm-alert-border-color: var(--ifm-color-emphasis-200)
		--ifm-alert-background-color: transparent
		--ifm-code-background: #{palette.$background}
		--ifm-alert-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5)

		margin-bottom: var(--ifm-paragraph-margin-bottom)

		> summary
			--docusaurus-details-decoration-color: currentColor

		> div > div[class|='collapsibleContent__']
			margin-top: var(--ifm-alert-padding-vertical)

		dl
			--ifm-spacing-vertical: 0.5rem

Still severely untested.

[slorber]

That looks like a great design to me

The border makes element visible even for nested summary/details, which is probably better than a background color