fix(tools): dev server icon and colours (#2733)

.changeset/deep-mammals-rescue.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/pfe-tools": patch
+---
+Dev Server: update icon and theme colours

elements/pf-button/pf-button.ts

@@ -119,7 +119,6 @@ export type ButtonVariant = (
  * @cssprop {<color>}  --pf-c-button--disabled--Color              {@default `#6a6e73`}
  * @cssprop {<color>}  --pf-c-button--disabled--BackgroundColor    {@default `#d2d2d2`}
  * @cssprop {<color>}  --pf-c-button--disabled--after--BorderColor {@default `transparent`}
- *
  * @cssprop {<color>}  --pf-c-button--m-warning--Color                   {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-warning--BackgroundColor         {@default `#f0ab00`}
  * @cssprop {<color>}  --pf-c-button--m-warning--active--Color           {@default `#151515`}
@@ -128,7 +127,6 @@ export type ButtonVariant = (
  * @cssprop {<color>}  --pf-c-button--m-warning--focus--BackgroundColor  {@default `#c58c00`}
  * @cssprop {<color>}  --pf-c-button--m-warning--hover--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-warning--hover--BackgroundColor  {@default `#c58c00`}
- *
  * @cssprop {<color>}  --pf-c-button--m-plain--BackgroundColor         {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-plain--Color                   {@default `#6a6e73`}
  * @cssprop {<color>}  --pf-c-button--m-plain--hover--BackgroundColor  {@default `transparent`}
@@ -137,12 +135,9 @@ export type ButtonVariant = (
  * @cssprop {<color>}  --pf-c-button--m-plain--focus--Color            {@default `#151515`}
  * @cssprop {<color>}  --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}
  * @cssprop {<color>}  --pf-c-button--m-plain--active--Color           {@default `#151515`}
- *
  * @cssprop {<color>}  --pf-c-button--m-plain--disabled--Color           {@default `#d2d2d2`}
  * @cssprop {<color>}  --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 {

elements/pf-label/pf-label.ts

@@ -58,43 +58,34 @@ export type LabelColor = (
  * @cssprop {<color>} --pf-c-label--m-green--BackgroundColor               {@default `#f3faf2`}
  * @cssprop {<color>} --pf-c-label--m-green__content--before--BorderColor  {@default `#bde5b8`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-green__content--Color     {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-label--m-orange__content--Color                {@default `#003737`}
  * @cssprop {<color>} --pf-c-label--m-orange--BackgroundColor               {@default `#fff6ec`}
  * @cssprop {<color>} --pf-c-label--m-orange__content--before--BorderColor  {@default `#f4b678`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-orange__content--Color     {@default `#8f4700`}
- *
  * @cssprop {<color>} --pf-c-label--m-purple__content--Color                {@default `#1f0066`}
  * @cssprop {<color>} --pf-c-label--m-purple--BackgroundColor               {@default `#f2f0fc`}
  * @cssprop {<color>} --pf-c-label--m-purple__content--before--BorderColor  {@default `#cbc1ff`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-purple__content--Color     {@default `#6753ac`}
- *
  * @cssprop {<color>} --pf-c-label--m-red__content--Color                {@default `#7d1007`}
  * @cssprop {<color>} --pf-c-label--m-red--BackgroundColor               {@default `#faeae8`}
  * @cssprop {<color>} --pf-c-label--m-red__content--before--BorderColor  {@default `#c9190b`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-red__content--Color     {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-label--m-gold__content--Color                {@default `#3d2c00`}
  * @cssprop {<color>} --pf-c-label--m-gold--BackgroundColor               {@default `#fdf7e7`}
  * @cssprop {<color>} --pf-c-label--m-gold__content--before--BorderColor  {@default `#f9e0a2`}
  * @cssprop {<color>} --pf-c-label--m-outline--m-gold__content--Color     {@default `#795600`}
-
  * @cssprop {<color>} --pf-c-label--m-blue__icon--Color {@default `#06c`}
  * @cssprop {<color>} --pf-c-label--m-cyan__icon--Color {@default `#009596`}
  * @cssprop {<color>} --pf-c-label--m-green__icon--Color {@default `#3e8635`}
  * @cssprop {<color>} --pf-c-label--m-orange__icon--Color {@default `#ec7a08`}
  * @cssprop {<color>} --pf-c-label--m-red__icon--Color {@default `#c9190b`}
  * @cssprop {<color>} --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 {<length>} --pf-c-label--m-compact--PaddingTop     {@default `0`}
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingRight   {@default `0.5rem`}
  * @cssprop {<length>} --pf-c-label--m-compact--PaddingBottom  {@default `0`}

elements/pf-progress/pf-progress.ts

@@ -47,43 +47,33 @@ const ICONS = new Map(Object.entries({
  * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
  *          Background color of the progress bar when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
  *          Background color of the progress bar when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
  *          Color of the status icon when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
  *          Color of the status icon when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
  *          Color of the status icon when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --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 {<length>} --pf-c-progress--m-outside__measure--FontSize
  *          Font size of the progress bar measure when measure location is outside.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
  *          Height of the progress bar when the size is small.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
  *          Font size of the progress bar description when the size is small.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --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 {

elements/pf-tabs/pf-tab.ts

@@ -47,20 +47,15 @@ import styles from './pf-tab.css';
  * @cssprop     {<length>}  --pf-c-tabs__link--FontSize      {@default `1rem`}
  * @cssprop     {<color>}   --pf-c-tabs__link--Color          {@default `#6a6e73`}
  * @cssprop     {<length>}  --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}
- *
  * @cssprop     {<color>}  --pf-c-tabs__link--after--BorderColor        {@default `#b8bbbe`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderTopWidth     {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderRightWidth   {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderBottomWidth  {@default `0`}
  * @cssprop     {<length>} --pf-c-tabs__link--after--BorderLeftWidth    {@default `0`}
- *
  * @cssprop     {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}
- *
  * @cssprop     {<color>}   --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}
  * @cssprop     {<length>}  --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}
- *
  * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
- *
  * @fires {TabExpandEvent} expand - when a tab expands
  */
 @customElement('pf-tab')

elements/pf-tile/pf-tile.ts

@@ -42,7 +42,6 @@ export type StackedSize = (
  * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}
  * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}
  * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}
- *
  * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
  */
 @customElement('pf-tile')

tools/pfe-tools/config.ts

@@ -38,8 +38,8 @@ export interface PfeConfig {
 
 const SITE_DEFAULTS: Required<SiteOptions> = {
   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',

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));