From a41787d23a95e632b495d6f5745035c84d36f4e2 Mon Sep 17 00:00:00 2001 From: Lea Verou Date: Wed, 18 Dec 2024 14:18:24 -0500 Subject: [PATCH] Remove opt-out class, add docs on opting out, closes #300 --- docs/docs/essentials/index.md | 48 ++++++++++++++++++++++++----------- src/styles/applied.css | 2 +- src/styles/native/button.css | 4 +-- src/styles/native/details.css | 2 +- src/styles/native/dialog.css | 4 +-- 5 files changed, 38 insertions(+), 22 deletions(-) diff --git a/docs/docs/essentials/index.md b/docs/docs/essentials/index.md index 151425ec1..3bfca508a 100644 --- a/docs/docs/essentials/index.md +++ b/docs/docs/essentials/index.md @@ -24,14 +24,30 @@ Here’s what we have so far: {%- endfor -%} -## Opting out of Essentials +## Opting out of Essentials on a case by case basis -If you don’t want to use all essentials, you can cherry pick just the parts you need. -For instructions on how to do that, refer to the individual pages. +So you've decided to use Essentials and now you need to style an element or a part of a page completely differently, what to do? +You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)! -You can also opt-out of Essentials styling by using a `wa-off` class on individual elements: +Instead of including Essentials with a `` element, you can include it like this: -```html {.example} +```html + +``` + +Then you can opt-out of Essentials styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees: + +```html

@@ -45,21 +61,23 @@ You can also opt-out of Essentials styling by using a `wa-off` class on individu

Lorem Ipsum dolor sit amet

-``` - -You can also use `wa-off-deep` to opt-out of Essentials styling for an element **and all its descendants**: - -```html {.example}

Lorem Ipsum dolor sit amet

``` -This means you could opt an entire page out of Essentials styling by adding a `wa-off-deep` class to the `` element. - - - - +You could even design opt-outs for specific elements! +E.g. to opt-out of `
` styling: +```css +@layer wa { + details.wa-details-off, + .wa-details-off details,{ + all: revert-layer; + } +} +``` +If you find yourself opting out of entire element types too much, you could consider only including the parts of Essentials you need instead of the whole thing. +You can find instructions for how to do that on the individual Essentials pages. diff --git a/src/styles/applied.css b/src/styles/applied.css index 39f65a2df..1888b10b3 100644 --- a/src/styles/applied.css +++ b/src/styles/applied.css @@ -90,7 +90,7 @@ video, wa-callout, wa-code-demo, wa-viewport-demo { - &:where(:not(.wa-off, .wa-off-deep *)):has(+ *) { + &:has(+ *) { margin: 0 0 var(--wa-space-xl) 0; } } diff --git a/src/styles/native/button.css b/src/styles/native/button.css index bc1bd620a..a139543ca 100644 --- a/src/styles/native/button.css +++ b/src/styles/native/button.css @@ -1,6 +1,4 @@ -:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where( - :not(:host *, .wa-off, .wa-off-deep *) - ), +:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *)), :host, .wa-button:where(:not([part~='base'])) { --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)); diff --git a/src/styles/native/details.css b/src/styles/native/details.css index 6314c96c2..145535175 100644 --- a/src/styles/native/details.css +++ b/src/styles/native/details.css @@ -1,5 +1,5 @@ /* Details */ -details:not(.wa-off, .wa-off-deep *) { +details { background-color: var(--wa-color-neutral-fill-quiet); border-radius: var(--wa-panel-border-radius); padding-block: 0; diff --git a/src/styles/native/dialog.css b/src/styles/native/dialog.css index c59aa98ac..f4fbf38a9 100644 --- a/src/styles/native/dialog.css +++ b/src/styles/native/dialog.css @@ -1,6 +1,6 @@ /* by itself or */ :host, -dialog:not(:host *, .wa-off, .wa-off-deep *) { +dialog:not(:host *) { width: 31rem; max-width: calc(100% - var(--wa-space-2xl)); max-height: calc(100% - var(--wa-space-2xl)); @@ -14,7 +14,7 @@ dialog:not(:host *, .wa-off, .wa-off-deep *) { } /* wherever it is */ -dialog:not(.wa-off, .wa-off-deep *) { +dialog { flex-direction: column; inset: 0;