@patternfly/pfe-sass - npm Package Compare versions

Comparing version 1.0.0-prerelease.17 to 1.0.0-prerelease.18

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.17",
+  "version": "1.0.0-prerelease.18",
   "publishConfig": {
@@ -45,3 +45,3 @@ "access": "public"
   "license": "MIT",
-  "gitHead": "4382b491b97b4b6b154a35d2c9db47c065eff081"
+  "gitHead": "36e6fc8b78e70127e7008b72ca23fd990519b0a3"
 }

README.md

@@ -1,3 +0,65 @@
-# WIP 🐣: PFE SASS
+# PFE SASS
 
-All of the variables and mixins that are available to pfe-elements.
+@Todo: Add All of the variables and mixins that are available to pfe-elements.
+
+
+
+
+## Containers & broadcast vars
+
+If the container allows changes to  background colors should influence the children:  pfe-set-broadcasted function
+
+
+## Notes on using broadcast colors in components  
+
+1. Only define CSS color <span style="text-decoration:underline;">property</span> ( `color: ;` ) once per element 
+2. Set the value equal to local variable:  `color: var(pfe-pfe-local--Color);`
+3. In the pfe-component, do not set <span style="text-decoration:underline;">value</span> of the broadcasted variables, instead set local variable values equal to the value of broadcasted, then with fallback colors
+    1. Content components should never set the value of broadcasted vars, otherwise container components won't be able to pass them that information
+4. Reset local variable values as needed for color attribute overrides.
+
+
+### CSS Example
+
+Let's use the pfe-cta as an example. We can start by defining local variables, namespaced for this component, and then updating the values of those variables as we go.
+
+```
+    // 1. set up local vars equal to theme vars & fallbacks
+    :host {
+      --pfe-cta--Color: var(theme--ui-link, #06c);
+    }
+
+    // 2. Use color property once, map to local var value
+    :host(:not([priority]) {
+      ::slotted(a) {
+         //color: blue; CSS compiler will print this for IE11
+         color: var(--pfe-cta--Color, blue) !important;
+      }
+    }
+
+    // 3. Use broadcasted variables as needed, with theme fallback after other declarations
+    :host {
+      --pfe-cta--Color: var(broadcasted--ui-link, var(theme--ui-link, #06c));   
+    }
+
+    // 4. Override broadcasted last
+    [color=accent] {
+      --pfe-cta--Color: var(theme--surface-accent--ui-link);
+```
+
+
+
+### On=dark is being deprecated.
+
+**Instead, custom classes already on the page should set broadcast values:**
+
+
+```
+.ux-card[data-ux-theme="dark"] {
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark);
+ --pfe-broadcasted--color--ui-link:  var(--pfe-theme--color--ui-link--on-dark);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover);
+ --pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus);
+}
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

91889

increased by6.4%

Number of lines in readme file

66

increased by1550%

No dependency changes