From 84e139f7777ee6e49d6a5c08fc940fe2e4ead263 Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Tue, 15 Aug 2023 08:55:17 -0400 Subject: [PATCH 1/8] fix: Adding public css variable for background color. --- .changeset/wild-apes-talk.md | 5 +++++ elements/rh-card/rh-card.css | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/wild-apes-talk.md diff --git a/.changeset/wild-apes-talk.md b/.changeset/wild-apes-talk.md new file mode 100644 index 0000000000..696973c9fc --- /dev/null +++ b/.changeset/wild-apes-talk.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": patch +--- + +`rh-card`: adding public css variable for card background color. (#1198) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index fbd3bfe46c..d553e0a804 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -60,7 +60,11 @@ article { var(--rh-color-border-subtle-on-light, #c7c7c7) ) ); - background-color: var(--_background-color, var(--rh-color-surface-lightest, #ffffff)); + background-color: + var( + --rh-card-background-color, + var(--_background-color, var(--rh-color-surface-lightest, #ffffff)) + ); border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px)); color: var(--_color, var(--rh-color-text-primary-on-light, #151515)); font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif); From 8af10110aefec3a8adf5bff3b8e183efc039ddfc Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Tue, 15 Aug 2023 10:25:50 -0400 Subject: [PATCH 2/8] docs(card): jsdocs for rh-card-background-color cssprop --- elements/rh-card/rh-card.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index cfcc1a41b3..284516370b 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -27,7 +27,9 @@ import styles from './rh-card.css'; * @cssprop {} --rh-card-header-font-size * Font size for header on card * {@default `1.5rem`} - * + * @cssprop {} --rh-card-background-color + * Background color for card + * {@default `#ffffff`} */ @customElement('rh-card') export class RhCard extends LitElement { From 8d85fdf71acaec1f67e7b8b66204de1a3305bd4a Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Tue, 29 Aug 2023 10:54:04 -0400 Subject: [PATCH 3/8] fix(card): reverting card background color css, adding docs for custom theming --- docs/patterns/card/index.md | 51 ++++++++++++++++++++++++++++++++++++ elements/rh-card/README.md | 2 +- elements/rh-card/rh-card.css | 6 +---- elements/rh-card/rh-card.ts | 3 --- 4 files changed, 53 insertions(+), 9 deletions(-) diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index bdbeb9149f..66a8d56fb6 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -115,6 +115,45 @@ A card can be used in light and dark themes. +### Custom Theming + +To customize a card the design tokens must be altered. These design tokens are different depending on the context for the card (light or dark theme). + +Examples include: + +
    +
  • --rh-color-surface-lightest
    • +
  • --rh-color-border-subtle-on-light
    • +
  • --rh-color-text-primary-on-light
    • +
+ +For more information, please see the card css custom properties. + + +#### Custom Light Theme + + + +

Card title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit + libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id + elit. Donec id elit non mi porta gravida at eget metus.

+ Footer + + + +#### Custom Dark Theme + + + +

Card title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit + libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id + elit. Donec id elit non mi porta gravida at eget metus.

+ Footer + + + {% repoStatus %} {% include 'feedback.html' %} @@ -160,5 +199,17 @@ A card can be used in light and dark themes. padding-inline: 0; padding-block: 0; } + + rh-card.custom-light-theme { + --rh-color-border-subtle-on-light: #EF6461; + --rh-color-surface-lightest: #0081AF; + --rh-color-text-primary-on-light: #30292F; + } + + rh-card.custom-dark-theme { + --rh-color-border-subtle-on-dark: #988B8E; + --rh-color-surface-darkest: #210B2C; + --rh-color-text-primary-on-dark: #F5FFC6; + } diff --git a/elements/rh-card/README.md b/elements/rh-card/README.md index 274f94d05b..79cca22c72 100644 --- a/elements/rh-card/README.md +++ b/elements/rh-card/README.md @@ -71,4 +71,4 @@ A card consists of the following slots: ``` -[spec]: https://ux.redhat.com/elements/card \ No newline at end of file +[spec]: https://ux.redhat.com/elements/card diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index d553e0a804..fbd3bfe46c 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -60,11 +60,7 @@ article { var(--rh-color-border-subtle-on-light, #c7c7c7) ) ); - background-color: - var( - --rh-card-background-color, - var(--_background-color, var(--rh-color-surface-lightest, #ffffff)) - ); + background-color: var(--_background-color, var(--rh-color-surface-lightest, #ffffff)); border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px)); color: var(--_color, var(--rh-color-text-primary-on-light, #151515)); font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif); diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index 284516370b..bd90b02e8d 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -27,9 +27,6 @@ import styles from './rh-card.css'; * @cssprop {} --rh-card-header-font-size * Font size for header on card * {@default `1.5rem`} - * @cssprop {} --rh-card-background-color - * Background color for card - * {@default `#ffffff`} */ @customElement('rh-card') export class RhCard extends LitElement { From e15f8a28f1084a8174dfa94f9a7a26303af2ced1 Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Wed, 30 Aug 2023 10:16:30 -0400 Subject: [PATCH 4/8] docs(card): pattern page context provider fit content, updating custom theme colors --- docs/patterns/card/index.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index 66a8d56fb6..db7c83f082 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -165,6 +165,10 @@ For more information, please see the Date: Tue, 5 Sep 2023 10:11:13 -0400 Subject: [PATCH 6/8] Update docs/patterns/card/index.md Co-authored-by: Benny Powers --- docs/patterns/card/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index db7c83f082..37fc45bb04 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -127,7 +127,7 @@ Examples include:
  • --rh-color-text-primary-on-light
    • -For more information, please see the     card css custom properties. +For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties"). #### Custom Light Theme From dc9db4a97409e59493585b619b186111e5e6aa0c Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Tue, 5 Sep 2023 10:11:23 -0400 Subject: [PATCH 7/8] Update docs/patterns/card/index.md Co-authored-by: Benny Powers --- docs/patterns/card/index.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index 37fc45bb04..abcdc5de99 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -121,11 +121,9 @@ To customize a card the design tokens must be altered. These design tokens are Examples include: -
      -
    • --rh-color-surface-lightest
      • -
    • --rh-color-border-subtle-on-light
      • -
    • --rh-color-text-primary-on-light
      • -
    +- `--rh-color-surface-lightest` +- `--rh-color-border-subtle-on-light` +- `--rh-color-text-primary-on-light` For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties"). From 05f9acf0c742613d8ed7069b6c65a7e39ae6574c Mon Sep 17 00:00:00 2001 From: Brian Ferry Date: Tue, 5 Sep 2023 10:24:51 -0400 Subject: [PATCH 8/8] docs(card): linking tokens to the tokens documentation pages --- docs/patterns/card/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md index abcdc5de99..57c7d8811b 100644 --- a/docs/patterns/card/index.md +++ b/docs/patterns/card/index.md @@ -121,11 +121,11 @@ To customize a card the design tokens must be altered. These design tokens are Examples include: -- `--rh-color-surface-lightest` -- `--rh-color-border-subtle-on-light` -- `--rh-color-text-primary-on-light` +- [`--rh-color-surface-lightest`](https://ux.redhat.com/tokens/color/#rh-color-surface-lightest) +- [`--rh-color-border-subtle-on-light`](https://ux.redhat.com/tokens/border/#rh-color-border-subtle-on-light) +- [`--rh-color-text-primary-on-light`](https://ux.redhat.com/tokens/font/#rh-color-text-primary-on-light) -For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties"). +For more information, please see the [card css custom properties](/elements/card/code/#css-custom-properties). #### Custom Light Theme