diff --git a/.changeset/heavy-roses-poke.md b/.changeset/heavy-roses-poke.md new file mode 100644 index 0000000000..3a8a3690b8 --- /dev/null +++ b/.changeset/heavy-roses-poke.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": minor +--- +`` added `red-orange`, `yellow`, and `teal` colors. **NOTE** that `cyan` is now deprecated, but will continue to work using the `teal` colors. diff --git a/.changeset/rotten-bottles-suffer.md b/.changeset/rotten-bottles-suffer.md new file mode 100644 index 0000000000..294007c677 --- /dev/null +++ b/.changeset/rotten-bottles-suffer.md @@ -0,0 +1,8 @@ +--- +"@rhds/elements": minor +--- +``: added desaturated variant: + +```html +New +``` diff --git a/.changeset/seven-bats-grin.md b/.changeset/seven-bats-grin.md new file mode 100644 index 0000000000..d3a7c2ac21 --- /dev/null +++ b/.changeset/seven-bats-grin.md @@ -0,0 +1,8 @@ +--- +"@rhds/elements": minor +--- +``: added `size` attribute. + +```html +New +``` diff --git a/.changeset/shy-taxis-knock.md b/.changeset/shy-taxis-knock.md new file mode 100644 index 0000000000..9e97495827 --- /dev/null +++ b/.changeset/shy-taxis-knock.md @@ -0,0 +1,4 @@ +--- +"@rhds/elements": patch +--- +``: now supports color [theming](https://ux.redhat.com/theming/) diff --git a/.changeset/wild-apples-enjoy.md b/.changeset/wild-apples-enjoy.md new file mode 100644 index 0000000000..571b66f43f --- /dev/null +++ b/.changeset/wild-apples-enjoy.md @@ -0,0 +1,9 @@ +--- +"@rhds/elements": minor +--- +``: added `href` attribute + +```html +Info +``` diff --git a/docs/patterns/card/patterns/title-bar.html b/docs/patterns/card/patterns/title-bar.html index 44d9fa117a..652b273949 100644 --- a/docs/patterns/card/patterns/title-bar.html +++ b/docs/patterns/card/patterns/title-bar.html @@ -16,8 +16,6 @@

Card title

padding: var(--rh-space-lg) var(--rh-space-2xl); flex-direction: row; gap: var(--rh-space-lg); - } - & h4 { font-weight: var(--rh-font-weight-heading-regular); font-size: var(--rh-font-size-body-text-md); font-family: var(--rh-font-family-body-text); diff --git a/docs/theming/color-palettes.css b/docs/theming/color-palettes.css index bf335273a8..d45c3d7ff6 100644 --- a/docs/theming/color-palettes.css +++ b/docs/theming/color-palettes.css @@ -1,3 +1,7 @@ +.container > rh-alert { + width: 100%; +} + #elements-grid { &::part(example) { display: block; @@ -21,12 +25,21 @@ } } +.surface-grid, .tile-grid { display: grid; padding: 0; list-style-type: none; - grid-template-columns: 1fr 1fr 1fr; gap: var(--rh-space-sm); + grid-template-columns: 1fr 1fr 1fr; +} + +.surface-grid { + grid-template-columns: 1fr 1fr; +} + +.icon-card { + --rh-icon-size: var(--rh-size-icon-07); } .pullquote-card { diff --git a/docs/theming/color-palettes.md b/docs/theming/color-palettes.md index 6aecbda506..4af1f149a0 100644 --- a/docs/theming/color-palettes.md +++ b/docs/theming/color-palettes.md @@ -37,13 +37,12 @@ less effort and greater cross-property consistency. ## What are color palettes -There are various color palettes within our design system. The palettes you will -use the most for the majority of your projects are the lightest and darkest -themes. +RHDS defines six color palettes They range from lightest to darkest, and those +are the two palettes you will use the most for the majority of your projects. - examples of several elements against a white surface + examples of several elements against a white surface {% uxdotPattern id="elements-grid", stacked=true %} @@ -56,10 +55,11 @@ themes. *HTML* and *CSS* system with some supporting JavaScript[^1]. The color palette system has two main parts: **providers** and **consumers**. Providers actively define a color palette, while consumers passively accept -their theme from the nearest provider ancestor. +their background color from the nearest provider ancestor. - HTML design systems help teams ship better digital experiences, faster. + HTML design systems help teams ship better digital experiences, + faster. Color palettes allow for the creation of different experiences using the same @@ -68,8 +68,8 @@ space, text, and more. Layouts, content, and imagery usually stay the same. ## Choosing a color palette -How you choose a color palette is based on content, user experience, and accessibility -needs. +How you choose a color palette is based on content, user experience, and +accessibility needs. ### Lightest color palette @@ -83,65 +83,32 @@ light elements and patterns have dark counterparts.

Brand red and accessibility

-

Do not apply the Red Hat red color to text in dark environments - unless it meets WCAG 2.1 AA - requirements.

- - -### Inline color palettes Beta -Inlining a color palette is when a section switches palette and looks different -than the rest of the page or interface. Some use cases include highlighting an -important section on a page or adding a sidebar to an interface. Use inline -theming only for major shifts in color. For minor shifts, use a different -surface color from the same theme. + Do not apply the Red Hat red color to text in dark environments unless it + meets [WCAG 2.1 AA][wcag21aa] requirements. - -

Update from the team

-

The design system team is working on creating inline theming best - practices in the near future. Contact - us if you would like to contribute.

 - - wireframe of a dark theme section sandwiched by two light theme sections - - - - wireframe of cards in a dark theme section extending into a light theme section - - - - wireframe of dark theme navigation framing the top and left sides of a light theme content area - - ## Illustrations and imagery -Illustrations and imagery should align to the theme. The light theme should -feature imagery with light colors and vice versa. Imagery with high contrast is -only acceptable if it has a transparent background. If you cannot find -theme-specific imagery, contact the Brand team. - - -

More information

-

High contrast is using bright elements, patterns, or images in dark -environments and vice versa. This is useful to focus attention or create -visual tension.

- +Illustrations and imagery should align to the color palette. The light color +palette should feature imagery with light colors and vice versa. Imagery with +high contrast is only acceptable if it has a transparent background. If you +cannot find color-palette-specific imagery, contact the Brand team. Developers +have a number of [art-direction][artdirection] techniques at their disposal for +creating themable, responsive graphics. - correct uses of an illustration with a transparent background and one illustration incorrectly using a white background in a dark theme area -## Color theme consumers and theme tokens +## Backgrounds and theme tokens + +### Color palettes -### Color palette providers **Providers** define the **color palette** for themselves and their child -elements. There are six main color palettes: +elements. There are six color palettes in RHDS:
  1. Lightest
    2. @@ -153,27 +120,50 @@ elements. There are six main color palettes:
Context providers typically use the `lightest` color palette as the default. -Authors may define the color palette of a container using the `color-palette` HTML -attribute. So for example, to create a card with the darkest color palette, use -this HTML: +Authors may define the color palette of a container using the `color-palette` +HTML attribute. So for example, to create a card with the darkest color palette, +use this HTML: {% uxdotPattern class="card-snippet-grid", fullHeight=true %} {% include './patterns/card-default-vs-set-palette.html' %} {% enduxdotPattern %} -### Color theme consumers -**Consumers**, which adopt a **color theme**. Color themes correspond to the -active color palette, and represent the quality of the background colour: - -1. light -1. dark - -Child elements which are providers will automatically adapt, applying their own -**color theme** as needed. Page authors *do not need to and should not customize* -colors of consumer elements. - -Color palette containers can be nested, such that child elements will always -adopt the color theme corresponding to the nearest container's palette. +A color palette provider is a **surface** on which a particular color palette is +active, as well as a **container** for themable consumer elements. + +### Backgrounds + +Consumers are elements which automatically adapt to their background surface. +Color **Consumers** adopt a **background** color based on the palette of the +surface they are on. In other words, the background of a consumer corresponds to +the color palette of it's containing surface. There are two backgrounds in RHDS: + +
    +
  • + + + Light + +
    • + +
  • + + + Dark +
    • +
+ +These backgrounds don't represent a specific colour, but rather they indicate +whether the background is light or dark. This is so things like icons, text, +and border colours can be chosen which will contrast enough with the background +to remain legible. In other words, the background is the *color context* in +which a consumer finds itself. + +Page authors *do not need to and should not customize* colors of + consumer elements, but instead should set custom values for [theme + tokens][theming]. Color palette containers can be nested, such that child + elements will always adopt the color theme corresponding to the nearest + container's palette. Extending our card example from above, if our page author then adds an `` to the card, it will *automatically* adopt the dark color theme. The @@ -184,23 +174,68 @@ page author need not and should not customize the CTA. {% enduxdotPattern %} - - Color palettes lets authors write more HTML, simpler CSS, and less JavaScript - + Color palettes lets authors write more HTML, simpler CSS, and + less JavaScript -To summarize: color providers can have one of up to six palettes, three dark and -three light, and they provide a `dark` or `light` theme to their children. +To summarize: color providers can adopt one six palettes, three dark and +three light, and they provide a `dark` or `light` background to their children. ## Combination elements + Some elements are both providers and consumers. Card, for example is both a -provider and a consumer. It can accept the color theme of its parent context and it -can also set its own color palette. +provider and a consumer. It can accept the color theme of its parent context and +it can also set its own color palette. {% uxdotPattern class="card-snippet-grid", fullHeight=true %} {% include './patterns/card-consumer-provider.html' %} {% enduxdotPattern %} +## Inline color palettes Beta + +Inlining a color palette is when a section switches palette and looks different +than the rest of the page or interface. Some use cases include highlighting an +important section on a page or adding a sidebar to an interface. Use inline +palettes only for major shifts in color. For minor shifts, use a related color +palette, e.g. from `lightest` to `light`. + + +

Update from the team

+ + The design system team is working on creating inline color palette best + practices in the near future. [Contact us][contact] if you would like to + contribute. + + + + + wireframe of a dark palette section sandwiched by two light palette sections + + + + wireframe of cards in a dark palette section extending into a light palette section + + + + wireframe of dark palette navigation framing the top and left sides of a light palette content area + + + +

More information

+

High contrast is using bright elements, patterns, or images in dark +environments and vice versa. This is useful to focus attention or create +visual tension.

+ + {% include 'partials/component/feedback.html' %} -[^1]: As the web platform [improves](https://results.web-platform-tests.org/results/css/css-values/attr-container-style-query.html?label=experimental&label=master&aligned), the RHDS authors expect that eventually no JavaScript will be required for this feature. +[^1]: As the web platform [improves][wpt], the RHDS authors expect that eventually no JavaScript will be required for this feature. + +[wpt]: https://results.web-platform-tests.org/results/css/css-values/attr-container-style-query.html?label=experimental&label=master&aligned +[contact]: https://github.com/RedHat-UX/red-hat-design-system/discussions +[artdirection]: /theming/developers/#art-direction +[theming]: /theming/customizing/ +[wcag21aa]: https://www.w3.org/WAI/WCAG21/Understanding/ diff --git a/docs/theming/developers.md b/docs/theming/developers.md index f4ecf3f00b..23fe175374 100644 --- a/docs/theming/developers.md +++ b/docs/theming/developers.md @@ -2,3 +2,93 @@ title: Developers order: 4 --- + + + + + + + +## Context Protocol + +## Style Queries + +Your page markup declares a custom surface: + +```html +
+ GO! +
+``` + +And your document css sets the desired color context: + +```css +.custom-surface { + container: surface; + &.dark { --rh-background-context: dark; } + &.light { --rh-background-context: light; } +} +``` + +Internally / in shared CSS: + +```css +@container style (--rh-context-background: dark) { + --rh-color-text-primary: var(--rh-color-text-primary-on-dark) +} +``` + +## Art Direction + +Art direction is the process of selecting art assets based on the context in +which they are used. + +### Inline SVG + +Page authors using _inline SVG_ can use theme tokens to style graphics. + +```html + + + +``` + +This approach _does not work_ with svg loaded through the `` tag, or with +raster graphics, however another approach is in development which could help: + +### `` Planned + +```html + + + Logo for Red Hat partner Google Cloud + +``` + +Join the [discussion](https://github.com/orgs/RedHat-UX/discussions/1780) diff --git a/elements/rh-accordion/context.ts b/elements/rh-accordion/context.ts index 64dd3ac94c..b6adb2d80e 100644 --- a/elements/rh-accordion/context.ts +++ b/elements/rh-accordion/context.ts @@ -3,6 +3,8 @@ import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js export interface RhAccordionContext { accents?: 'inline' | 'bottom'; large: boolean; + /** if this accordion has at least one expanded panel */ + expanded: boolean; } export const context = createContextWithRoot(Symbol('rh-accordion-context')); diff --git a/elements/rh-accordion/rh-accordion-header.css b/elements/rh-accordion/rh-accordion-header.css index 0eda1df3f6..907839767f 100644 --- a/elements/rh-accordion/rh-accordion-header.css +++ b/elements/rh-accordion/rh-accordion-header.css @@ -155,6 +155,14 @@ span { inset-inline-start: 0; } +.expanded.on.light { + --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); +} + +.expanded.on.dark { + --rh-color-surface: var(--rh-color-surface-darkest, #151515); +} + @container (min-width: 576px) { #header-container:not(.bottom) { flex-direction: row; diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts index 001d27db68..5c7d75f999 100644 --- a/elements/rh-accordion/rh-accordion-header.ts +++ b/elements/rh-accordion/rh-accordion-header.ts @@ -47,8 +47,6 @@ const isAccordion = (x: EventTarget): x is RhAccordion => */ @customElement('rh-accordion-header') export class RhAccordionHeader extends LitElement { - static readonly version = '{{version}}'; - static readonly styles = [styles]; @property({ type: Boolean, reflect: true }) expanded = false; diff --git a/elements/rh-accordion/rh-accordion-panel.css b/elements/rh-accordion/rh-accordion-panel.css index 66bce675f6..61afe418f9 100644 --- a/elements/rh-accordion/rh-accordion-panel.css +++ b/elements/rh-accordion/rh-accordion-panel.css @@ -55,6 +55,14 @@ background-color: var(--rh-color-surface); } +.expanded.on.light { + --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); +} + +.expanded.on.dark { + --rh-color-surface: var(--rh-color-surface-darkest, #151515); +} + .body:after { content: ''; position: absolute; diff --git a/elements/rh-accordion/rh-accordion.css b/elements/rh-accordion/rh-accordion.css index 501d10d88d..2eb688c1de 100644 --- a/elements/rh-accordion/rh-accordion.css +++ b/elements/rh-accordion/rh-accordion.css @@ -1,8 +1,10 @@ #container { - height: 100%; - width: 100%; color: var(--rh-color-text-primary); background-color: var(--rh-color-surface); + + &.expanded { + box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2)); + } } ::slotted(rh-accordion-header:first-child) { @@ -18,7 +20,6 @@ ::slotted(rh-accordion-header:is([expanded])) { display: block; border-block-end: 0; - box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2)); } ::slotted(rh-accordion-panel:is([expanded])) { diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts index dbb1a55f42..b2db7b07f9 100644 --- a/elements/rh-accordion/rh-accordion.ts +++ b/elements/rh-accordion/rh-accordion.ts @@ -47,8 +47,6 @@ export class AccordionCollapseEvent extends ComposedEvent { */ @customElement('rh-accordion') export class RhAccordion extends LitElement { - static readonly version = '{{version}}'; - static readonly styles = [styles]; static isAccordion(target: EventTarget | null): target is RhAccordion { @@ -72,6 +70,25 @@ export class RhAccordion extends LitElement { */ @property({ attribute: true, reflect: true }) accents?: 'inline' | 'bottom'; + /** + * If this accordion uses large styles + */ + @property({ reflect: true, type: Boolean }) large = false; + + /** + * If this accordion has a border + */ + @property({ reflect: true, type: Boolean }) bordered = true; + + /** + * Color Palette for this accordion. + * @see https://ux.redhat.com/theming/color-palettes/ + */ + @colorContextProvider() + @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; + + @colorContextConsumer() private on?: ColorTheme; + /** * Sets and reflects the currently expanded accordion 0-based indexes. * Use commas to separate multiple indexes. @@ -84,34 +101,41 @@ export class RhAccordion extends LitElement { @property({ attribute: 'expanded-index', converter: NumberListConverter, + hasChanged(value, old) { + return JSON.stringify(old) !== JSON.stringify(value); + }, }) get expandedIndex() { return this.#expandedIndex; } set expandedIndex(value) { - const old = this.#expandedIndex; this.#expandedIndex = value; - if (JSON.stringify(old) !== JSON.stringify(value)) { - this.requestUpdate('expandedIndex', old); - this.collapseAll().then(async () => { - for (const i of this.expandedIndex) { - await this.expand(i, this); - } - }); - } + this.#expanded = !!this.#expandedIndex.length; + this.headers.forEach((header, i) => { + const expanded = this.#expandedIndexSet.has(i); + header.expanded = expanded; + const panel = this.panels[i]; + if (panel) { + panel.expanded = expanded; + panel.hidden = !expanded; + } + }); } - @property({ reflect: true, type: Boolean }) large = false; - - @property({ reflect: true, type: Boolean }) bordered = true; + /** All headers for this accordion */ + get headers() { + return this.#allHeaders(); + } - @colorContextProvider() - @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; + /** All panels for this accordion */ + get panels() { + return this.#allPanels(); + } - @colorContextConsumer() private on?: ColorTheme; + #expandedIndexSet = new Set(); - protected expandedSets = new Set(); + #expanded = false; #expandedIndex: number[] = []; @@ -126,31 +150,22 @@ export class RhAccordion extends LitElement { this.addEventListener('change', this.#onChange as EventListener); this.#mo.observe(this, { childList: true }); this.updateAccessibility(); - const { headers } = this; - headers.forEach((header, index) => { - if (header.expanded) { - this.#expandHeader(header, index); - const panel = this.#panelForHeader(header); - if (panel) { - this.#expandPanel(panel); - panel.hidden = !panel.expanded; - } - } - }); } override render(): TemplateResult { - const { on = '' } = this; + const { on = 'light' } = this; + const expanded = this.#expanded; return html` -
+
`; } protected override async getUpdateComplete(): Promise { const c = await super.getUpdateComplete(); const results = await Promise.all([ - ...this.#allHeaders().map(x => x.updateComplete), - ...this.#allPanels().map(x => x.updateComplete), + ...this.headers.map(x => x.updateComplete), + ...this.panels.map(x => x.updateComplete), ]); return c && results.every(Boolean); } @@ -158,13 +173,15 @@ export class RhAccordion extends LitElement { @observes('accents') @observes('large') @observes('bordered') + @observes('expandedIndex') private contextChanged() { this.ctx = this.#makeContext(); } #makeContext(): RhAccordionContext { const { accents = 'inline', large } = this; - return { accents, large }; + const expanded = this.#expanded; + return { accents, large, expanded }; } #panelForHeader(header: RhAccordionHeader) { @@ -176,35 +193,15 @@ export class RhAccordion extends LitElement { } } - #expandHeader(header: RhAccordionHeader, index = this.#getIndex(header)) { + #expand(index: number) { // If this index is not already listed in the expandedSets array, add it - this.expandedSets.add(index); - this.#expandedIndex = [...this.expandedSets as Set]; - header.expanded = true; - } - - #expandPanel(panel: RhAccordionPanel) { - panel.expanded = true; - panel.hidden = false; - } - - async #collapseHeader(header: RhAccordionHeader, index = this.#getIndex(header)) { - if (!this.expandedSets) { - await this.updateComplete; - } - this.expandedSets.delete(index); - header.expanded = false; - await header.updateComplete; + this.expandedIndex = [...this.#expandedIndexSet.add(index)]; } - async #collapsePanel(panel: RhAccordionPanel) { - await panel.updateComplete; - if (!panel.expanded) { - return; + #collapse(index: number) { + if (this.#expandedIndexSet.delete(index)) { + this.expandedIndex = [...this.#expandedIndexSet]; } - - panel.expanded = false; - panel.hidden = true; } #onChange(event: AccordionHeaderChangeEvent) { @@ -216,6 +213,7 @@ export class RhAccordion extends LitElement { this.collapse(index); } } + this.requestUpdate('expandedIndex'); } #allHeaders(accordion: RhAccordion = this): RhAccordionHeader[] { @@ -243,14 +241,6 @@ export class RhAccordion extends LitElement { return -1; } - get headers() { - return this.#allHeaders(); - } - - get panels() { - return this.#allPanels(); - } - /** * Initialize the accordion by connecting headers and panels * with aria controls and labels; set up the default disclosure @@ -305,8 +295,7 @@ export class RhAccordion extends LitElement { } // If the header and panel exist, open both - this.#expandHeader(header, index); - this.#expandPanel(panel); + this.#expand(index); header.focus(); @@ -319,8 +308,7 @@ export class RhAccordion extends LitElement { * Expands all accordion items. */ public async expandAll() { - this.headers.forEach(header => this.#expandHeader(header)); - this.panels.forEach(panel => this.#expandPanel(panel)); + this.headers.forEach((_, i) => this.#expand(i)); await this.updateComplete; } @@ -336,8 +324,7 @@ export class RhAccordion extends LitElement { return; } - this.#collapseHeader(header); - this.#collapsePanel(panel); + this.#collapse(index); this.dispatchEvent(new AccordionCollapseEvent(header, panel)); await this.updateComplete; @@ -347,8 +334,7 @@ export class RhAccordion extends LitElement { * Collapses all accordion items. */ public async collapseAll() { - this.headers.forEach(header => this.#collapseHeader(header)); - this.panels.forEach(panel => this.#collapsePanel(panel)); + this.headers.forEach((_, i) => this.#collapse(i)); await this.updateComplete; } } @@ -357,4 +343,9 @@ declare global { interface HTMLElementTagNameMap { 'rh-accordion': RhAccordion; } + + interface HTMLElementEventMap { + 'expand': AccordionExpandEvent; + 'collapse': AccordionCollapseEvent; + } } diff --git a/elements/rh-alert/demo/toast.html b/elements/rh-alert/demo/toast.html index 2fecacae0e..338614767c 100644 --- a/elements/rh-alert/demo/toast.html +++ b/elements/rh-alert/demo/toast.html @@ -23,7 +23,7 @@

Success

Confirm - +

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

@@ -31,13 +31,21 @@

Warning

Confirm - +

Danger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt.

Dismiss Confirm + + +

Error

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est + egestas, a sollicitudin mauris tincidunt.

+ Dismiss + Confirm + \ No newline at end of file + } + diff --git a/elements/rh-health-index/rh-health-index.css b/elements/rh-health-index/rh-health-index.css index 1d8bfddda2..8528649f2f 100644 --- a/elements/rh-health-index/rh-health-index.css +++ b/elements/rh-health-index/rh-health-index.css @@ -23,7 +23,7 @@ --_color-text-inactive: var(--rh-color-gray-70, #383838); --_color-text: var(--_color-text-inactive); --_color-fill: var(--rh-color-surface-lightest, #ffffff); - --_color-border: var(--rh-color-border-subtle-on-light, #c7c7c7); + --_color-border: var(--rh-color-border-subtle); } #grade { @@ -198,10 +198,6 @@ * Dark Color Theme *****************************************************************************/ -#container.dark { - --_color-border: var(--rh-color-border-subtle-on-dark, #707070); -} - #container.dark .box { --_color-text-active: var(--rh-color-white, #ffffff); --_color-fill: var(--rh-color-surface-darkest, #151515); diff --git a/elements/rh-icon/rh-icon.css b/elements/rh-icon/rh-icon.css index 0ec4afabee..44d42ef549 100644 --- a/elements/rh-icon/rh-icon.css +++ b/elements/rh-icon/rh-icon.css @@ -1,12 +1,18 @@ :host { - display: inline-block; line-height: 0; + aspect-ratio: 1/1; + display: inline-flex; + place-content: center; +} + +#container { + display: contents; } svg { width: var(--rh-icon-size, var(--rh-size-icon-01, 16px)); fill: currentcolor; - aspect-ratio: 1; + aspect-ratio: 1/1; } .standard svg { diff --git a/elements/rh-surface/rh-surface.css b/elements/rh-surface/rh-surface.css index 58c7216afa..42ed489c5c 100644 --- a/elements/rh-surface/rh-surface.css +++ b/elements/rh-surface/rh-surface.css @@ -3,3 +3,15 @@ background-color: var(--rh-color-surface); color: var(--rh-color-text-primary); } + +.on.dark, +.on.light { + --rh-color-surface: unset; +} + +#slot.palette-lightest { --rh-color-surface: var(--rh-color-surface-lightest, #ffffff); } +#slot.palette-lighter { --rh-color-surface: var(--rh-color-surface-lighter, #f2f2f2); } +#slot.palette-light { --rh-color-surface: var(--rh-color-surface-light, #e0e0e0); } +#slot.palette-dark { --rh-color-surface: var(--rh-color-surface-dark, #383838); } +#slot.palette-darker { --rh-color-surface: var(--rh-color-surface-darker, #1f1f1f); } +#slot.palette-darkest { --rh-color-surface: var(--rh-color-surface-darkest, #151515); } diff --git a/elements/rh-surface/rh-surface.ts b/elements/rh-surface/rh-surface.ts index 2e71d25f80..01fd313355 100644 --- a/elements/rh-surface/rh-surface.ts +++ b/elements/rh-surface/rh-surface.ts @@ -1,5 +1,4 @@ import type { ColorPalette } from '@rhds/elements/lib/context/color/provider.js'; -import type { ColorTheme } from '@rhds/elements/lib/context/color/consumer.js'; import { LitElement, html } from 'lit'; import { customElement } from 'lit/decorators/custom-element.js'; @@ -39,12 +38,16 @@ export class RhSurface extends LitElement { @colorContextProvider() @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; - get #on() { - return this.colorPalette?.replace(/e(st|r)/, '') ?? 'light'; - } - render() { - return html``; + const { colorPalette = 'lightest' } = this; + const on = colorPalette?.replace(/e(st|r)/, '') ?? 'light'; + return html``; } #onSlotchange() { diff --git a/elements/rh-tabs/demo/color-context.html b/elements/rh-tabs/demo/color-context.html index 6fb18c5e19..2b1a0df340 100644 --- a/elements/rh-tabs/demo/color-context.html +++ b/elements/rh-tabs/demo/color-context.html @@ -71,3 +71,17 @@ }); + diff --git a/elements/rh-tabs/demo/long-tab-content.html b/elements/rh-tabs/demo/long-tab-content.html index 7e64c3319d..a8ecb5a0a2 100644 --- a/elements/rh-tabs/demo/long-tab-content.html +++ b/elements/rh-tabs/demo/long-tab-content.html @@ -24,7 +24,21 @@ Cloud - + + diff --git a/elements/rh-tabs/demo/nested.html b/elements/rh-tabs/demo/nested.html index 39a8fc124c..cdd7f678be 100644 --- a/elements/rh-tabs/demo/nested.html +++ b/elements/rh-tabs/demo/nested.html @@ -28,6 +28,19 @@ rh-tab-panel { padding: 0; } + + a { + color: var(--rh-color-interactive-primary-default); + &:hover { color: var(--rh-color-interactive-primary-hover); } + &:focus-within { color: var(--rh-color-interactive-primary-focus); } + &:active { color: var(--rh-color-interactive-primary-active); } + &:visited { + color: var(--rh-color-interactive-primary-visited); + &:hover { color: var(--rh-color-interactive-primary-visited-hover); } + &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); } + &:active { color: var(--rh-color-interactive-primary-visited-active); } + } + } + + + diff --git a/elements/rh-tabs/demo/right-to-left.html b/elements/rh-tabs/demo/right-to-left.html index 56a96e4411..fbfdb0a50c 100644 --- a/elements/rh-tabs/demo/right-to-left.html +++ b/elements/rh-tabs/demo/right-to-left.html @@ -90,3 +90,19 @@ + + + diff --git a/elements/rh-tabs/demo/vertical.html b/elements/rh-tabs/demo/vertical.html index c2cf351497..ac77cbe3cf 100644 --- a/elements/rh-tabs/demo/vertical.html +++ b/elements/rh-tabs/demo/vertical.html @@ -14,3 +14,19 @@ + + + diff --git a/elements/rh-tabs/rh-tab-panel.ts b/elements/rh-tabs/rh-tab-panel.ts index 2bdec511ab..7abdd8bb51 100644 --- a/elements/rh-tabs/rh-tab-panel.ts +++ b/elements/rh-tabs/rh-tab-panel.ts @@ -16,8 +16,6 @@ import styles from './rh-tab-panel.css'; */ @customElement('rh-tab-panel') export class RhTabPanel extends LitElement { - static readonly version = '{{version}}'; - static readonly styles = [styles]; /** @@ -48,7 +46,7 @@ export class RhTabPanel extends LitElement { render() { const { on = '' } = this; return html` -
+
`; diff --git a/elements/rh-tabs/rh-tab.ts b/elements/rh-tabs/rh-tab.ts index ea0b7fafef..208e05ca40 100644 --- a/elements/rh-tabs/rh-tab.ts +++ b/elements/rh-tabs/rh-tab.ts @@ -44,8 +44,6 @@ export class TabExpandEvent extends Event { */ @customElement('rh-tab') export class RhTab extends LitElement { - static readonly version = '{{version}}'; - static readonly styles = [styles]; /** True when the tab is selected */ diff --git a/elements/rh-tabs/rh-tabs.ts b/elements/rh-tabs/rh-tabs.ts index 6e82005077..5f5b895aa3 100644 --- a/elements/rh-tabs/rh-tabs.ts +++ b/elements/rh-tabs/rh-tabs.ts @@ -83,30 +83,19 @@ export class RhTabs extends LitElement { @property({ attribute: false }) activeTab?: RhTab; - /** - * Sets color theme based on parent context - */ @colorContextConsumer() private on?: ColorTheme; - /** - * Sets color context for child components, overrides parent context - */ + /** Sets color context for child components, overrides parent context */ @colorContextProvider() @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; - /** - * Aligns tabs to the center - */ + /** Aligns tabs to the center */ @property({ reflect: true, type: Boolean }) centered? = false; - /** - * Sets tabs to a boxed style with or without an inset - */ + /** Sets tabs to a boxed style with or without an inset */ @property({ reflect: true }) box?: 'box' | 'inset'; - /** - * Sets the alignment of the tabs vertical - */ + /** Sets the alignment of the tabs vertical */ @property({ reflect: true, type: Boolean }) vertical = false; @query('[part="tabs"]') private tabList!: HTMLElement; diff --git a/elements/rh-tag/demo/color-context.html b/elements/rh-tag/demo/color-context.html index c420426cf8..00106498ef 100644 --- a/elements/rh-tag/demo/color-context.html +++ b/elements/rh-tag/demo/color-context.html @@ -1,65 +1,495 @@ -

Filled Color

- Red - Orange - Green - Cyan - Blue - Purple - Gray - - -

Outline

- Red - Orange - Green - Cyan - Blue - Purple - Gray - - -

Filled Color With Icon

- Red - Orange - - Green - - - Cyan - Blue - - Purple - - - Gray +
+
Filled
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+
Filled with icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
-

Filled Color With Icon

- Red - Orange - - Green - - - Cyan - Blue - - Purple -
Filled with slotted icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Filled with link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Filled with icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Filled with slotted icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Outline
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Outlined with icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Outlined with slotted icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Outline with link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Outlined with icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Outlined with slotted icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Desaturated
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Desaturated with icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Desaturated with slotted icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Desaturated with link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Desaturated with icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Desaturated with slotted icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ + +
Compact filled
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact filled with icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact filled with slotted icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact filled with link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact filled with icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact filled with slotted icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact outline
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact outlined with icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact outlined with slotted icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact outline with link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact outlined with icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact outlined with slotted icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact desaturated
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact desaturated with icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact desaturated with slotted icon
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact desaturated with link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact desaturated with icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+ +
Compact desaturated with slotted icon and link
+
+ Red + Red Orange + Orange + Yellow + Green + Teal + Blue + Purple + Gray +
+
+ + + + + +} diff --git a/elements/rh-tag/demo/desaturated-with-icon.html b/elements/rh-tag/demo/desaturated-with-icon.html new file mode 100644 index 0000000000..e56385ce52 --- /dev/null +++ b/elements/rh-tag/demo/desaturated-with-icon.html @@ -0,0 +1,11 @@ +Red +Orange +Green +Cyan +Blue +Purple +Gray + + diff --git a/elements/rh-tag/demo/desaturated.html b/elements/rh-tag/demo/desaturated.html new file mode 100644 index 0000000000..0317a7ad85 --- /dev/null +++ b/elements/rh-tag/demo/desaturated.html @@ -0,0 +1,11 @@ +Red +Orange +Green +Cyan +Blue +Purple +Gray + + diff --git a/elements/rh-tag/demo/filled-color-with-icon.html b/elements/rh-tag/demo/filled-color-with-icon.html index 50acce570e..52f02d0ea5 100644 --- a/elements/rh-tag/demo/filled-color-with-icon.html +++ b/elements/rh-tag/demo/filled-color-with-icon.html @@ -1,10 +1,12 @@ -Red -Orange -Green -Cyan -Blue -Purple -Gray +Red +Red Orange +Orange +Yellow +Green +Teal +Blue +Purple +Gray diff --git a/elements/rh-tag/demo/filled-color.html b/elements/rh-tag/demo/filled-color.html index 5f3611becf..04a14c1255 100644 --- a/elements/rh-tag/demo/filled-color.html +++ b/elements/rh-tag/demo/filled-color.html @@ -1,10 +1,12 @@ Red +Red Orange Orange +Yellow Green -Cyan +Teal Blue Purple -Gray +Gray diff --git a/elements/rh-tag/demo/outline.html b/elements/rh-tag/demo/outline.html index 1a8f706314..1dbc10193f 100644 --- a/elements/rh-tag/demo/outline.html +++ b/elements/rh-tag/demo/outline.html @@ -4,7 +4,7 @@ Cyan Blue Purple -Gray +Gray