@patternfly/pfe-sass - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

gulpfile.js

@@ -1,2 +0,9 @@
-const { task, src, dest, watch, parallel, series } = require("gulp");
+const {
+  task,
+  src,
+  dest,
+  watch,
+  parallel,
+  series
+} = require("gulp");
 
@@ -36,13 +43,10 @@ const pfelementPackage = require("./package.json");
       ])
-        .pipe(
-          globSass(
-            {
-              path: `__${folder}.scss`
-            },
-            {
-              signature: `// generated with sass globbing, v${version}`
-            }
-          )
-        )
-        .pipe(dest(paths.compiled))
+      .pipe(
+        globSass({
+          path: `__${folder}.scss`
+        }, {
+          signature: `// generated with sass globbing, v${version}`
+        })
+      )
+      .pipe(dest(paths.compiled))
     );
@@ -63,11 +67,8 @@ });
 
-task("watch", () => {
-  return watch(
-    ["{extends,functions,maps,mixins,variables}/_*.scss", "pfe-sass.scss"],
-    {
-      cwd: paths.compiled
-    },
-    parallel("build")
-  );
-});
+task("watch", () => watch(
+  ["{extends,functions,maps,mixins,variables}/_*.scss", "pfe-sass.scss"], {
+    cwd: paths.compiled
+  },
+  series("build")
+));
 
@@ -74,0 +75,0 @@ task("dev", parallel("build", "watch"));

package.json

@@ -9,3 +9,3 @@ {
   },
-  "version": "1.3.2",
+  "version": "1.3.3",
   "publishConfig": {
@@ -68,3 +68,3 @@ "access": "public"
   },
-  "gitHead": "5cef517d83a343957460237252988e22a9423075"
+  "gitHead": "0a51caddb291cff1f96d973f202a12b3a8c5583d"
 }

README.md

@@ -51,1 +51,180 @@ # PFE SASS
 ```
+
+
+
+# Typography Classes
+
+There are a variety of mixins, extends, and variables available in pfe-sass. We recommend checking out the sass doc for extensive information about how to use these tools. 
+
+There are already utility / modifier classes available within pfe-typography-classes.css for use within long form content. However if you need custom classes, you can utilize either the placeholders, or the `pfe-typography` mixin.
+
+## Text class examples
+
+```scss
+.custom-text--foo {
+  @extend %pfe-text--lg;
+}
+.custom-text--bar {
+ @include pfe-typography(lg, $type: "text"); 
+}
+.custom-text--baz {
+ @include pfe-typography(lg, $type: "text", $base: true); 
+}
+
+```
+ 
+
+```css
+.custom-text--foo {
+  font-size: 1.125rem;
+  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
+  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
+  line-height: 1.5;
+  line-height: var(--pfe-theme--line-height, 1.5);
+  font-weight: 400;
+  font-weight: var(--pfe-theme--font-weight--normal, 400);
+}
+
+.custom-text--foo:not(:last-child):not(:empty) {
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
+}
+
+.custom-text--bar {
+  font-size: 1.125rem;
+  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
+  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
+  line-height: 1.5;
+  line-height: var(--pfe-theme--line-height, 1.5);
+  font-weight: 400;
+  font-weight: var(--pfe-theme--font-weight--normal, 400);
+}
+
+.custom-text--bar:not(:last-child):not(:empty) {
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
+}
+
+.custom-text--baz {
+  font-size: 1.125rem;
+  font-size: var(--pf-c-text--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
+  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif);
+  line-height: 1.5;
+  line-height: var(--pfe-theme--line-height, 1.5);
+  font-weight: 400;
+  font-weight: var(--pfe-theme--font-weight--normal, 400);
+}
+
+.custom-text--baz:not(:last-child):not(:empty) {
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--pfe-theme--content-spacer--body--sm, 0.5rem);
+}
+```
+
+## Title examples
+
+Note that you can opt in or out out of properties beyond the font-family and font-size if desired, via the argument: `$base: false` and/or `$spacing: false`.
+
+```scss
+.custom-title--foo {
+  @extend %pfe-title--lg;
+}
+.custom-title--bar {
+ @include pfe-typography(lg, $type: "title"); 
+}
+.custom-title--baz {
+ @include pfe-typography(lg, $type: "title", $base: false); 
+}
+```
+
+```css
+.custom-title--foo {
+  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
+  font-size: 1.125rem;
+  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
+  line-height: 1.5;
+  line-height: var(--pfe-theme--line-height, 1.5);
+  font-weight: 400;
+  font-weight: var(--pfe-theme--font-weight--normal, 400);
+}
+
+.custom-title--foo:not(:last-child) {
+  margin-bottom: 1rem;
+  margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
+}
+
+.custom-title--bar {
+  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
+  font-size: 1.125rem;
+  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
+  line-height: 1.5;
+  line-height: var(--pfe-theme--line-height, 1.5);
+  font-weight: 400;
+  font-weight: var(--pfe-theme--font-weight--normal, 400);
+}
+
+.custom-title--bar:not(:last-child) {
+  margin-bottom: 1rem;
+  margin-bottom: var(--pfe-theme--content-spacer--heading--sm, 1rem);
+}
+
+.custom-title--baz {
+  font-family: "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial, sans-serif);
+  font-size: 1.125rem;
+  font-size: var(--pf-c-title--m-lg--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
+}
+
+```
+
+### Component examples
+
+```scss
+:host[foo] {
+  font-size: pfe-local(FontSize);
+}
+
+:host[bar] {
+  @include pfe-c-typography($type: text, $sizing: md);
+}
+
+:host[baz] {
+  @include pfe-c-typography($type: text, $sizing: md, $base: true, $spacing: true, $light-dom-heading:true);
+}
+
+```
+
+```css
+:host[foo] {
+  font-size: 1rem;
+  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
+}
+
+:host[bar] {
+  font-size: 1rem;
+  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
+}
+
+:host[baz] {
+  font-size: 1rem;
+  font-size: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
+  font-family: "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif;
+  font-family: var(--pfe-clipboard--LineHeight, var(--pfe-theme--font-family, "Red Hat Text", "RedHatText", "Overpass", Overpass, Arial, sans-serif));
+  line-height: 1.5;
+  line-height: var(--pfe-clipboard--LineHeight, var(--pfe-theme--line-height, 1.5));
+  font-weight: 400;
+  font-weight: var(--pfe-clipboard--FontWeight, var(--pfe-theme--font-weight--normal, 400));
+  --pf-c--FontSize: var(--pfe-clipboard--FontSize, var(--pf-global--FontSize--md, 1rem));
+}
+
+:host[baz]:not(:last-child) {
+  margin-bottom: 0.5rem;
+  margin-bottom: var(--pfe-clipboard--MarginBottom, var(--pfe-theme--content-spacer--body--sm, 0.5rem));
+}
+```
+ 

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

881307

increased by2.88%

Lines of code

835

increased by0.12%

Number of lines in readme file

230

increased by350.98%

No dependency changes