@patternfly/pfe-sass - npm Package Compare versions

Comparing version 1.0.0-prerelease.24 to 1.0.0-prerelease.26

package.json

@@ -7,3 +7,3 @@ {
   },
-  "version": "1.0.0-prerelease.24",
+  "version": "1.0.0-prerelease.26",
   "publishConfig": {
@@ -22,2 +22,6 @@ "access": "public"
   },
+  "scripts": {
+    "build": "../../node_modules/.bin/gulp",
+    "dev": "../../node_modules/.bin/gulp dev"
+  },
   "contributors": [
@@ -46,3 +50,6 @@ {
   "license": "MIT",
-  "gitHead": "482894ff43a70845af04390bcb05c67bdc17e9bd"
+  "bugs": {
+    "url": "https://github.com/patternfly/patternfly-elements/issues"
+  },
+  "gitHead": "c60d5f78ffce971bf406747ac312c90e01358ea7"
 }

README.md

 # PFE SASS
 
-@Todo: Add All of the variables and mixins that are available to pfe-elements.
+Helper tools for building PatternFly Elements web components.
 
 
+## Broadcast variables
 
+1. Try to map CSS __properties__ such as `color` only once. If updates to that property are needed, those should be done by updating the local variable.
+2. Set the value equal to local variable:  `color: var(--pfe-local--Color);`.  Note that no fallback is defined at this level as that is done when the local variable is declared.
+3. In the pfe-component, do not set __value__ of the broadcasted variables unless the component is influencing the background color; instead, set local variables to look for the value of a broadcasted variable, followed by a fallback color.  This provides a hook for containers to influence the color of the typography in the component so that it remains readable.
+    * `--pfe-local--Color: var(--pfe-broadcasted--color--text, #444);`
+    * If a component sets it's own background color, it can and should update the value of the broadcasted variables.
+4. Reset local variable values as needed for attribute overrides.
 
-## 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
@@ -35,3 +29,3 @@
       ::slotted(a) {
-         //color: blue; CSS compiler will print this for IE11
+         // color: blue; CSS compiler will print this for IE11
          color: var(--pfe-cta--Color, blue) !important;
@@ -47,4 +41,6 @@ }
     // 4. Override broadcasted last
-    [color=accent] {
+    :host([color="accent"]) {
+      --pfe-cta--BackgroundColor: var(theme--surface--accent);
       --pfe-cta--Color: var(theme--surface-accent--ui-link);
+    }
 ```
@@ -58,11 +54,10 @@
 
-
+```css
+.on-dark {
+ --pfe-broadcasted--color--text: var(--pfe-theme--color--text--on-dark, #fff);
+ --pfe-broadcasted--color--ui-link:  var(--pfe-theme--color--ui-link--on-dark, #73bcf7);
+ --pfe-broadcasted--color--ui-link--hover: var(--pfe-theme--color--ui-link--on-dark--hover, #2b9af3);
+ --pfe-broadcasted--color--ui-link--visited:var(--pfe-theme--color--ui-link--on-dark--visited, #73bcf7);
+ --pfe-broadcasted--color--ui-link--focus: var(--pfe-theme--color--ui-link--on-dark--focus, #2b9af3);
+}
 ```
-.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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

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

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94920

increased by3.09%

Number of package files

21

increased by23.53%

Lines of code

52

increased by1200%

Number of low maintenance alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium maintenance alerts

1

increased byInfinity%

Number of lines in readme file

61

decreased by-7.58%

No dependency changes