- From: [ Cassondra ] <notifications@github.com>
- Date: Thu, 27 Feb 2020 08:03:31 -0800
- To: w3c/webcomponents <webcomponents@noreply.github.com>
- Cc: Subscribed <subscribed@noreply.github.com>
- Message-ID: <w3c/webcomponents/issues/864/592037427@github.com>
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
Received on Thursday, 27 February 2020 16:03:44 UTC