From d50a651a5eaf0af5c229cbf7005f559029af63b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benny=20Powers=20-=20=D7=A2=D7=9D=20=D7=99=D7=A9=D7=A8?= =?UTF-8?q?=D7=90=D7=9C=20=D7=97=D7=99!?= Date: Thu, 11 Apr 2024 08:21:49 +0300 Subject: [PATCH] fix(tools): dev server icon and colours (#2733) --- .changeset/deep-mammals-rescue.md | 4 ++++ elements/pf-button/pf-button.ts | 5 ----- elements/pf-label/pf-label.ts | 9 --------- elements/pf-progress/pf-progress.ts | 10 ---------- elements/pf-tabs/pf-tab.ts | 5 ----- elements/pf-tile/pf-tile.ts | 1 - tools/pfe-tools/config.ts | 4 ++-- tools/pfe-tools/dev-server/demo.css | 3 +-- 8 files changed, 7 insertions(+), 34 deletions(-) create mode 100644 .changeset/deep-mammals-rescue.md diff --git a/.changeset/deep-mammals-rescue.md b/.changeset/deep-mammals-rescue.md new file mode 100644 index 0000000000..da5d640962 --- /dev/null +++ b/.changeset/deep-mammals-rescue.md @@ -0,0 +1,4 @@ +--- +"@patternfly/pfe-tools": patch +--- +Dev Server: update icon and theme colours diff --git a/elements/pf-button/pf-button.ts b/elements/pf-button/pf-button.ts index a40f0e618f..7890013788 100644 --- a/elements/pf-button/pf-button.ts +++ b/elements/pf-button/pf-button.ts @@ -119,7 +119,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--disabled--Color {@default `#6a6e73`} * @cssprop {} --pf-c-button--disabled--BackgroundColor {@default `#d2d2d2`} * @cssprop {} --pf-c-button--disabled--after--BorderColor {@default `transparent`} - * * @cssprop {} --pf-c-button--m-warning--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-warning--BackgroundColor {@default `#f0ab00`} * @cssprop {} --pf-c-button--m-warning--active--Color {@default `#151515`} @@ -128,7 +127,6 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-warning--focus--BackgroundColor {@default `#c58c00`} * @cssprop {} --pf-c-button--m-warning--hover--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-warning--hover--BackgroundColor {@default `#c58c00`} - * * @cssprop {} --pf-c-button--m-plain--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-plain--Color {@default `#6a6e73`} * @cssprop {} --pf-c-button--m-plain--hover--BackgroundColor {@default `transparent`} @@ -137,12 +135,9 @@ export type ButtonVariant = ( * @cssprop {} --pf-c-button--m-plain--focus--Color {@default `#151515`} * @cssprop {} --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`} * @cssprop {} --pf-c-button--m-plain--active--Color {@default `#151515`} - * * @cssprop {} --pf-c-button--m-plain--disabled--Color {@default `#d2d2d2`} * @cssprop {} --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`} - * * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`} - * */ @customElement('pf-button') export class PfButton extends LitElement { diff --git a/elements/pf-label/pf-label.ts b/elements/pf-label/pf-label.ts index 31efcceb3c..69675e5a76 100644 --- a/elements/pf-label/pf-label.ts +++ b/elements/pf-label/pf-label.ts @@ -58,43 +58,34 @@ export type LabelColor = ( * @cssprop {} --pf-c-label--m-green--BackgroundColor {@default `#f3faf2`} * @cssprop {} --pf-c-label--m-green__content--before--BorderColor {@default `#bde5b8`} * @cssprop {} --pf-c-label--m-outline--m-green__content--Color {@default `#3e8635`} - * * @cssprop {} --pf-c-label--m-orange__content--Color {@default `#003737`} * @cssprop {} --pf-c-label--m-orange--BackgroundColor {@default `#fff6ec`} * @cssprop {} --pf-c-label--m-orange__content--before--BorderColor {@default `#f4b678`} * @cssprop {} --pf-c-label--m-outline--m-orange__content--Color {@default `#8f4700`} - * * @cssprop {} --pf-c-label--m-purple__content--Color {@default `#1f0066`} * @cssprop {} --pf-c-label--m-purple--BackgroundColor {@default `#f2f0fc`} * @cssprop {} --pf-c-label--m-purple__content--before--BorderColor {@default `#cbc1ff`} * @cssprop {} --pf-c-label--m-outline--m-purple__content--Color {@default `#6753ac`} - * * @cssprop {} --pf-c-label--m-red__content--Color {@default `#7d1007`} * @cssprop {} --pf-c-label--m-red--BackgroundColor {@default `#faeae8`} * @cssprop {} --pf-c-label--m-red__content--before--BorderColor {@default `#c9190b`} * @cssprop {} --pf-c-label--m-outline--m-red__content--Color {@default `#c9190b`} - * * @cssprop {} --pf-c-label--m-gold__content--Color {@default `#3d2c00`} * @cssprop {} --pf-c-label--m-gold--BackgroundColor {@default `#fdf7e7`} * @cssprop {} --pf-c-label--m-gold__content--before--BorderColor {@default `#f9e0a2`} * @cssprop {} --pf-c-label--m-outline--m-gold__content--Color {@default `#795600`} - * @cssprop {} --pf-c-label--m-blue__icon--Color {@default `#06c`} * @cssprop {} --pf-c-label--m-cyan__icon--Color {@default `#009596`} * @cssprop {} --pf-c-label--m-green__icon--Color {@default `#3e8635`} * @cssprop {} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`} * @cssprop {} --pf-c-label--m-red__icon--Color {@default `#c9190b`} * @cssprop {} --pf-c-label--m-gold__icon--Color {@default `#f0ab00`} - * * @csspart icon - container for the label icon * @csspart close-button - container for removable labels' close button - * * @slot icon * Contains the labels's icon, e.g. web-icon-alert-success. - * * @slot * Must contain the text for the label. - * * @cssprop {} --pf-c-label--m-compact--PaddingTop {@default `0`} * @cssprop {} --pf-c-label--m-compact--PaddingRight {@default `0.5rem`} * @cssprop {} --pf-c-label--m-compact--PaddingBottom {@default `0`} diff --git a/elements/pf-progress/pf-progress.ts b/elements/pf-progress/pf-progress.ts index c0642b602c..93094bd5fb 100644 --- a/elements/pf-progress/pf-progress.ts +++ b/elements/pf-progress/pf-progress.ts @@ -47,43 +47,33 @@ const ICONS = new Map(Object.entries({ * @cssprop {} --pf-c-progress--m-warning__bar--BackgroundColor * Background color of the progress bar when variant is warning. * {@default `#f0ab00`} - * * @cssprop {} --pf-c-progress--m-danger__bar--BackgroundColor * Background color of the progress bar when variant is danger. * {@default `#c9190b`} - * * @cssprop {} --pf-c-progress--m-success__status-icon--Color * Color of the status icon when variant is success. * {@default `#3e8635`} - * * @cssprop {} --pf-c-progress--m-warning__status-icon--Color * Color of the status icon when variant is warning. * {@default `#f0ab00`} - * * @cssprop {} --pf-c-progress--m-danger__status-icon--Color * Color of the status icon when variant is danger. * {@default `#c9190b`} - * * @cssprop {} --pf-c-progress--m-success--m-inside__measure--Color * Color of the progress bar measure when variant is success and measure location is inside. * {@default `#ffffff`} - * * @cssprop {} --pf-c-progress--m-outside__measure--FontSize * Font size of the progress bar measure when measure location is outside. * {@default `0.875rem`} - * * @cssprop {} --pf-c-progress--m-sm__bar--Height * Height of the progress bar when the size is small. * {@default `0.5rem`} - * * @cssprop {} --pf-c-progress--m-sm__description--FontSize * Font size of the progress bar description when the size is small. * {@default `0.875rem`} - * * @cssprop {} --pf-c-progress--m-lg__bar--Height * Height of the progress bar when the size is large. * {@default `1.5rem`} - * */ @customElement('pf-progress') export class PfProgress extends LitElement { diff --git a/elements/pf-tabs/pf-tab.ts b/elements/pf-tabs/pf-tab.ts index e8f6d12728..3cc3ff9977 100644 --- a/elements/pf-tabs/pf-tab.ts +++ b/elements/pf-tabs/pf-tab.ts @@ -47,20 +47,15 @@ import styles from './pf-tab.css'; * @cssprop {} --pf-c-tabs__link--FontSize {@default `1rem`} * @cssprop {} --pf-c-tabs__link--Color {@default `#6a6e73`} * @cssprop {} --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`} - * * @cssprop {} --pf-c-tabs__link--after--BorderColor {@default `#b8bbbe`} * @cssprop {} --pf-c-tabs__link--after--BorderTopWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--after--BorderRightWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--after--BorderBottomWidth {@default `0`} * @cssprop {} --pf-c-tabs__link--after--BorderLeftWidth {@default `0`} - * * @cssprop {} --pf-c-tabs__item--m-current__link--Color {@default `#151515`} - * * @cssprop {} --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`} * @cssprop {} --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`} - * * @cssprop {} --pf-c-tabs__link--child--MarginRight {@default `1rem`} - * * @fires {TabExpandEvent} expand - when a tab expands */ @customElement('pf-tab') diff --git a/elements/pf-tile/pf-tile.ts b/elements/pf-tile/pf-tile.ts index 029473ea66..1be525683d 100644 --- a/elements/pf-tile/pf-tile.ts +++ b/elements/pf-tile/pf-tile.ts @@ -42,7 +42,6 @@ export type StackedSize = ( * @cssprop {} --pf-c-tile__icon--Color {@default `#06c`} * @cssprop {} --pf-c-tile__icon--MarginRight {@default `0`} * @cssprop {} --pf-c-tile__icon--FontSize {@default `1.5rem`} - * * @cssprop {} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`} */ @customElement('pf-tile') diff --git a/tools/pfe-tools/config.ts b/tools/pfe-tools/config.ts index 685d77aea6..d920a49238 100644 --- a/tools/pfe-tools/config.ts +++ b/tools/pfe-tools/config.ts @@ -38,8 +38,8 @@ export interface PfeConfig { const SITE_DEFAULTS: Required = { description: `PatternFly Elements: A set of community-created web components based on PatternFly design.`, - favicon: '/docs/images/favicon.ico', - logoUrl: '/docs/images/pf-logo-small.svg', + favicon: '/docs/images/logo/pf-logo-small.svg', + logoUrl: '/docs/images/logo/pf-logo-small.svg', stylesheets: [], title: 'PatternFly Elements', componentSubpath: 'components', diff --git a/tools/pfe-tools/dev-server/demo.css b/tools/pfe-tools/dev-server/demo.css index 4005c3f7d5..fa90fd5a08 100644 --- a/tools/pfe-tools/dev-server/demo.css +++ b/tools/pfe-tools/dev-server/demo.css @@ -58,7 +58,7 @@ body.menu-open { padding-inline-end: var(--pf-c-masthead--PaddingRight, var(--pf-c-masthead--inset, 24px)); padding-block: 8px; color: white; - background: var(--pf-theme--color--accent, #0066cc); + background: black; } .logo-bar > a { @@ -262,7 +262,6 @@ body.menu-open { main { grid-area: body; display: grid; - grid-template-rows: min-content 1fr; height: 100%; width: 100%; max-height: calc(100vh - var(--pf-demo-header-height));