From 7a7bb10553c6c330341dbc3971953fa252baecbb Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Tue, 13 Apr 2021 09:42:56 -0400 Subject: [PATCH 1/6] feat: Update pfe-base to include text broadcast styles --- CHANGELOG-1.x.md | 1 + elements/pfe-styles/src/pfe-base.scss | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index e84fde4507..6197c6fb04 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -2,6 +2,7 @@ - [a1e4b67](https://github.com/patternfly/patternfly-elements/commit/a1e4b67ac012f5987e6cddf2cc7b532a135fa989) feat: Add CSS variable support for typography & background colors on tabs - [](https://github.com/patternfly/patternfly-elements/commit/) fix: Updated CSS to allow CSS custom properties to override dynamically calculated theme context +- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add broadcast variable to pfe-base stylesheet # 1.4.0 (2021-03-30) diff --git a/elements/pfe-styles/src/pfe-base.scss b/elements/pfe-styles/src/pfe-base.scss index 42e0624c4d..f5e9cdffc9 100644 --- a/elements/pfe-styles/src/pfe-base.scss +++ b/elements/pfe-styles/src/pfe-base.scss @@ -84,8 +84,8 @@ th { body { @extend %pfe-content-base; /* This variable is intentionally left empty for light DOM within components */ - font-size: var( --pf-c--FontSize, pfe-var(content--FontSize)); - color: pfe-var(text); + font-size: var(--pf-c--FontSize, pfe-var(content--FontSize)); + color: var(--pfe-broadcasted--text, #{pfe-var(text)}); text-align: left; margin: 0; } From fe33e7b4d998c1620a4f928b12c1b0c7e77253d2 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Tue, 13 Apr 2021 10:25:32 -0400 Subject: [PATCH 2/6] Update CHANGELOG-1.x.md --- CHANGELOG-1.x.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index 6197c6fb04..7a0b55f62b 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -1,7 +1,7 @@ # 1.5.0 (TBD) - [a1e4b67](https://github.com/patternfly/patternfly-elements/commit/a1e4b67ac012f5987e6cddf2cc7b532a135fa989) feat: Add CSS variable support for typography & background colors on tabs -- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Updated CSS to allow CSS custom properties to override dynamically calculated theme context +- [84cb0b1](https://github.com/patternfly/patternfly-elements/commit/84cb0b1ea257a33dc28954367e82771bb3e17a52) fix: Updated CSS to allow CSS custom properties to override dynamically calculated theme context - [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add broadcast variable to pfe-base stylesheet # 1.4.0 (2021-03-30) From f5b36074a793c992c60740574991205071a0b329 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Tue, 13 Apr 2021 12:33:50 -0400 Subject: [PATCH 3/6] feat: Update readme --- elements/pfe-styles/README.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/elements/pfe-styles/README.md b/elements/pfe-styles/README.md index c367edd8ec..761ecf6fcc 100644 --- a/elements/pfe-styles/README.md +++ b/elements/pfe-styles/README.md @@ -16,13 +16,19 @@ To get started, include a link to the css file of your choice: Since PatternFly Elements Styles are not web components, their classes can be applied to any element, giving you lots of control over where and how you utilize them. - `pfe-base.css` - - This stylesheet provides normalize styles, and styles for standard typographical HTML tags such as `
    `, `

    `, etc. However they are opt-in, in that you must use the wrapper class of `.pfe-c-content` around them. We recommend loading this as a standard stylesheet in your project + - This stylesheet provides normalize styles and styles for standard typographical HTML tags such as `
      `, `

      `, etc. + - The typographical elements are opt-in, in that you must use the wrapper class of `.pfe-c-content` around them for them to be applied. + - The "normalize" settings are very lightweight and help clear common issues with default browser styles such as collapsing borders on tables or clearing padding and margins on `ul` tags. + - We recommend loading this as a standard stylesheet in your project - `pfe-typography-classes.css` - - This stylesheet includes modifier clases you may use with any markup to invoke those particular heading styles. Please see https://ux.redhat.com/foundations/typography/ for details on styles. Useful if you do not already have typographical classes defined. + - This stylesheet includes modifier clases you may use with any markup to invoke those particular heading styles. Please see the [documentation](https://ux.redhat.com/foundations/typography) for additional details on styles. This is very useful if you do not already have typographical classes defined. - `pfe-vars-as-px.css` - This is a demo file to show how you may reset the core t-shirt sizing variables using pixels, if you are unable to use REM units in your project. - `pfe-context.css` - - This set is available to help in updating the broadcast variables for pages where your might be setting the background color yourself with custom styles. If you manually set a background color to #000, you can add the `.on-dark` class to your element and it will load the broadcast variables for a dark context to make your life a little easier. + - This set is available to help in managing context in raw markup. Components will handle setting context for you when they are used to set surface colors but if you have raw HTML setting the surface color, we recommend making use of this lightweight set of styles that update the broadcast variables for you or let you use the built-in surface colors. + - If you manually set a background color to #000, you can add the `.on-dark` class to your element and it will load the broadcast variables for a dark context. + - If you want to manually set an element to the accent surface color, you can use `.surface--accent` to set the background color along with appropriate context variables. + - All of this is to make development just a little easier but is entirely optional. - **(mobile styles)** - Please inspect the [mobile typography demo page](http://patternflyelements.com/elements/pfe-styles/demo/typography-mobile.html) for examples of how to scale type for smaller devices. From c0ef03313521772a4fcbee1231009b85faa91742 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Mon, 14 Jun 2021 07:05:25 -0700 Subject: [PATCH 4/6] Update elements/pfe-styles/src/pfe-base.scss --- elements/pfe-styles/src/pfe-base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pfe-styles/src/pfe-base.scss b/elements/pfe-styles/src/pfe-base.scss index f5e9cdffc9..55c4c73680 100644 --- a/elements/pfe-styles/src/pfe-base.scss +++ b/elements/pfe-styles/src/pfe-base.scss @@ -85,7 +85,7 @@ body { @extend %pfe-content-base; /* This variable is intentionally left empty for light DOM within components */ font-size: var(--pf-c--FontSize, pfe-var(content--FontSize)); - color: var(--pfe-broadcasted--text, #{pfe-var(text)}); + color: pfe-var(text); text-align: left; margin: 0; } From d12093249a0f1c2e1f9dda5f9dbff9066deb013a Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Mon, 14 Jun 2021 10:05:52 -0400 Subject: [PATCH 5/6] Update CHANGELOG-1.x.md --- CHANGELOG-1.x.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index b4fc8e21f4..563f4d85c1 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -1,6 +1,6 @@ # 1.9.0 (2021) -- [](https://github.com/patternfly/patternfly-elements/commit/) feat: Add broadcast variable to pfe-base stylesheet +- [](https://github.com/patternfly/patternfly-elements/commit/) # 1.8.0 (2021-05-18) From 0f20b70f0520b35074ec2732a0938e2f6aa41db0 Mon Sep 17 00:00:00 2001 From: "[ Cassondra ]" Date: Mon, 14 Jun 2021 07:07:43 -0700 Subject: [PATCH 6/6] Update elements/pfe-styles/src/pfe-base.scss --- elements/pfe-styles/src/pfe-base.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pfe-styles/src/pfe-base.scss b/elements/pfe-styles/src/pfe-base.scss index 55c4c73680..3f0c669559 100644 --- a/elements/pfe-styles/src/pfe-base.scss +++ b/elements/pfe-styles/src/pfe-base.scss @@ -84,7 +84,7 @@ th { body { @extend %pfe-content-base; /* This variable is intentionally left empty for light DOM within components */ - font-size: var(--pf-c--FontSize, pfe-var(content--FontSize)); + font-size: var(--pf-c--FontSize, #{pfe-var(content--FontSize)}); color: pfe-var(text); text-align: left; margin: 0;