Re: [w3c/webcomponents] Theming options for shadow roots (#864)

Let me add a little code context too for those (like me) who mostly think in code:

My web component, `pfe-card` ([compiled asset](https://unpkg.com/@patternfly/pfe-card/dist/pfe-card.umd.js)), has the following CSS defined for it's host:

```
:host {
  --pfe-card--PaddingTop: calc(var(--pfe-theme--container-spacer, 16px) * 2);
  --pfe-card--PaddingRight: calc(var(--pfe-theme--container-spacer, 16px) * 2);
  --pfe-card--PaddingBottom: calc(var(--pfe-theme--container-spacer, 16px) * 2);
  --pfe-card--PaddingLeft: calc(var(--pfe-theme--container-spacer, 16px) * 2);

  --pfe-card--Padding: var(--pfe-card--PaddingTop) var(--pfe-card--PaddingRight) var(--pfe-card--PaddingBottom) var(--pfe-card--PaddingLeft);

  padding: var(--pfe-card--Padding);
}
```

Top, right, bottom, left padding all look to the global `--pfe-theme--container-spacer` variable first, falling back to a default of 16px if none is defined and then doubles it.  The `pfe-theme` variables are all globally scoped variables defined on `root`.  Each padding region can be overriden using a more scoped approach:

```
pfe-cta {
    --pfe-card--PaddingTop: 20px;
}
```

Or by assigning specific classes (or IDs) to those components (`<pfe-card id="custom">`).  Doing this completely throws out the reference to `container-spacer`.

These varying levels of hooks meet several use-cases for large corporate sites such as redhat.com.

1. I need to change the general spacing across all my web components on my site to be tighter:
  ```
    :root {
      --pfe-theme--container-spacer: 12px;
    }
  ```
2. I need to change the spacing on all the card components specifically:
  ```
    pfe-card {
        --pfe-theme--container-spacer: 20px;
    }
  ```
3. I need to change the padding only on all the card components specifically:
  ```
    pfe-card {
        --pfe-theme--Padding: 20px;
    }
  ```
3. I need to change only the top padding on all the card components specifically:
  ```
    pfe-card {
        --pfe-theme--PaddingTop: 10px;
    }
  ```
4. I need to change the padding on just these specific cards:
  ```
    .custom-card {
     --pfe-card--Padding: 20px;
    }
  ```



-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/864#issuecomment-592037427