[6.x] Legacy Javascript Compatibility

packages/craftcms-cp/scripts/generate-colors.js

@@ -33,6 +33,17 @@ const availableColors = [
   'black',
 ];
 
+const semanticColors = [
+  // Semantic colors
+  'neutral',
+  'brand',
+  'accent',
+  'info',
+  'success',
+  'warning',
+  'danger',
+];
+
 function lightScale(color) {
   switch (color) {
     case 'white':
@@ -136,7 +147,7 @@ function buildTokens(colors, scaleFn) {
 }
 
 function buildStyleBlock(color) {
-  return `.c-colorable--${color},
+  return `.cp-color-${color},
 [data-color='${color}'] {
   --c-color-fill-quiet: var(--c-color-${color}-fill-quiet);
   --c-color-border-quiet: var(--c-color-${color}-border-quiet);
@@ -161,24 +172,7 @@ ${buildTokens(colors, lightScale)}
 ${buildTokens(colors, darkScale)}
 }
 
-.c-colorable,
-[data-color] {
-  --c-color-fill-quiet: var(--c-color-neutral-fill-quiet);
-  --c-color-fill-normal: var(--c-color-neutral-fill-normal);
-  --c-color-fill-loud: var(--c-color-neutral-fill-loud);
-  --c-color-border-quiet: var(--c-color-neutral-border-quiet);
-  --c-color-border-normal: var(--c-color-neutral-border-normal);
-  --c-color-border-loud: var(--c-color-neutral-border-loud);
-  --c-color-on-quiet: var(--c-color-neutral-on-quiet);
-  --c-color-on-normal: var(--c-color-neutral-on-normal);
-  --c-color-on-loud: var(--c-color-neutral-on-loud);
-
-  background-color: var(--c-color-fill-quiet);
-  border-color: var(--c-color-border-quiet);
-  color: var(--c-color-on-quiet);
-}
-
-${colors.map((c) => buildStyleBlock(c)).join('\n')}
+${[...availableColors, ...semanticColors].map((c) => buildStyleBlock(c)).join('\n')}
 `;
 }
 

packages/craftcms-cp/src/components/button/button.ts

@@ -85,6 +85,8 @@ export default class CraftButton extends LionButtonSubmit {
 
   override render() {
     return html`
+      <!--@TODO need to figure this out-->
+      <!--<div role="status" class="sr-only"></div>-->
       <div
         class="${classMap({
           'button-content': true,

packages/craftcms-cp/src/components/chip/chip.styles.ts

@@ -5,7 +5,7 @@ export default css`
     display: contents;
   }
 
-  .chip {
+  .cp-chip {
     display: inline-flex;
     min-height: var(--c-chip-height, var(--c-size-control-sm));
     min-width: auto;
@@ -26,51 +26,50 @@ export default css`
     background-color: var(--c-color-fill-quiet, var(--c-surface-raised));
   }
 
-  .chip[appearance='plain'],
-  .chip--plain {
+  .cp-chip[appearance='plain'],
+  .cp-chip--plain {
     padding-block: 0;
     padding-inline: 0;
     border-color: transparent;
     background-color: transparent;
     box-shadow: none;
   }
 
-  .chip[size='small'],
-  .chip--small {
+  .cp-chip[size='small'],
+  .cp-chip--small {
     padding-block: 0;
     min-height: var(--c-size-control-sm);
   }
 
-  chip[size='medium'],
-  .chip--medium {
+  .cp-chip[size='medium'],
+  .cp-chip--medium {
     padding-block: 0;
     min-height: var(--c-size-control-md);
   }
 
-  .chip__prefix,
-  .chip__body,
-  .chip__suffix {
+  .cp-chip__prefix,
+  .cp-chip__body,
+  .cp-chip__suffix {
     display: inline-flex;
     flex-direction: column;
-    align-self: center;
   }
 
-  .chip__body {
+  .cp-chip__body {
     flex: 1 1 auto;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  .chip__prefix {
+  .cp-chip__prefix {
     padding-inline-end: var(--c-spacing-md);
   }
 
-  .chip__suffix {
+  .cp-chip__suffix {
     padding-inline-start: var(--c-spacing-md);
   }
 
-  :host(:not([variant='plain'])) .chip__suffix {
+  :host(:not([variant='plain'])) .cp-chip__suffix {
     margin-inline-end: calc(var(--c-spacing-sm) * -1);
   }
 `;

packages/craftcms-cp/src/components/chip/chip.ts

@@ -29,37 +29,42 @@ export default class CraftChip extends LitElement {
   @property() icon: string | null = null;
 
   renderPrefix() {
-    return html`<div class="chip__prefix" part="prefix">
+    return html`<div class="cp-chip__prefix" part="prefix">
       <slot name="prefix">
-        ${this.icon
-          ? html`<craft-icon name="${this.icon}"></craft-icon>`
-          : nothing}
+        <slot name="icon">
+          ${this.icon
+            ? html`<craft-icon name="${this.icon}"></craft-icon>`
+            : nothing}
+        </slot>
       </slot>
     </div>`;
   }
 
   override render() {
     // query the element Light DOM children for slotted elements
-    const renderPrefix = !!this.querySelector('[slot="prefix"]') || this.icon;
+    const renderPrefix =
+      !!this.querySelector('[slot="prefix"]') ||
+      !!this.querySelector('[slot="icon"]') ||
+      this.icon;
     const renderSuffix = !!this.querySelector('[slot="suffix"]');
 
     return html`
       <div
         part="chip"
         class="${classMap({
-          chip: true,
-          'chip--small': this.size === 'small',
-          'chip--medium': this.size === 'medium',
-          'chip--large': this.size === 'large',
-          'chip--plain': this.variant === 'plain',
+          'cp-chip': true,
+          'cp-chip--small': this.size === 'small',
+          'cp-chip--medium': this.size === 'medium',
+          'cp-chip--large': this.size === 'large',
+          'cp-chip--plain': this.variant === 'plain',
         })}"
       >
         ${renderPrefix ? this.renderPrefix() : nothing}
-        <div class="chip__body">
+        <div class="cp-chip__body">
           <slot></slot>
         </div>
         ${renderSuffix
-          ? html`<div class="chip__suffix" part="suffix">
+          ? html`<div class="cp-chip__suffix" part="suffix">
               <slot name="suffix"></slot>
             </div>`
           : nothing}

packages/craftcms-cp/src/components/tooltip/tooltip.stories.ts

@@ -24,11 +24,11 @@ const meta = {
     }
 
     return html`
-      <craft-tooltip
+      <c-tooltip
         placement="${args.placement}"
         style="${args.style}"
         for="my-button"
-        >${args.content}</craft-tooltip
+        >${args.content}</c-tooltip
       >
       <craft-button id="my-button">Hover me</craft-button>
     `;

packages/craftcms-cp/src/components/tooltip/tooltip.ts

@@ -12,37 +12,30 @@ export default class CraftTooltip extends WaTooltip {
     return [
       WaTooltip.styles,
       css`
-        wa-popup {
-          --wa-z-index-tooltip: var(--c-tooltip-z-index, 1000);
-          --wa-tooltip-background-color: var(
-            --c-tooltip-fill,
-            var(--c-surface-overlay)
-          );
-          --wa-tooltip-border-color: var(
-            --c-tooltip-border,
-            var(--c-color-neutral-border-quiet)
-          );
-          --wa-tooltip-content-color: var(--c-tooltip-text, currentColor);
+        :host {
+          --wa-tooltip-background-color: var(--c-color-black-fill-loud);
+          --wa-tooltip-border-color: var(--c-color-black-border-loud);
+          --wa-tooltip-content-color: var(--c-color-black-on-loud);
           --wa-tooltip-padding: var(
             --c-tooltip-padding,
             calc(4rem / 16) calc(8rem / 16)
           );
           --wa-tooltip-arrow-size: var(--c-tooltip-arrow-size, 5px);
           --wa-tooltip-font-family: inherit;
-          --wa-tooltip-font-size: var(
-            --c-tooltip-font-size,
-            var(--c-text-base)
-          );
-          --wa-tooltip-font-weight: var(--c-tooltip-font-weight, 400);
-          --wa-tooltip-line-height: var(--c-tooltip-line-height, 1.3);
-          --wa-tooltip-border-radius: var(
-            --c-tooltip-border-radius,
-            var(--c-radius-sm)
-          );
-          font-weight: 400;
-          color: var(--c-tooltip-text, currentColor);
+          --wa-tooltip-font-size: var(--c-text-base);
+          --wa-tooltip-font-weight: 400;
+          --wa-tooltip-line-height: 1.3;
+          --wa-tooltip-border-radius: var(--c-radius-sm);
+        }
+
+        &::part(base) {
           box-shadow: var(--c-shadow-md);
         }
+
+        .body {
+          color: var(--wa-tooltip-content-color);
+          font-weight: var(--wa-tooltip-font-weight);
+        }
       `,
     ];
   }

packages/craftcms-cp/src/index.ts

@@ -54,6 +54,7 @@ export * from './utilities/format.js';
 export * from './utilities/api/actionClient.js';
 export * from './utilities/api/apiClient.js';
 export * from './utilities/string.js';
+export * from './utilities/dom.js';
 
 // Services
 export {QueueService} from './services/Queue.js';

packages/craftcms-cp/src/styles/shared/base.css

@@ -40,21 +40,29 @@ ul {
   list-style: none;
 }
 
-.code {
-  font-size: 0.9em;
+.cp-code {
+  font-size: 0.75em;
+  font-family: var(--c-font-mono);
   display: inline-flex;
   padding: 0 var(--c-spacing-sm);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--c-color-on-quiet);
+  border: 1px solid var(--c-color-border-quiet);
+  background-color: color-mix(
+    var(--c-color-fill-quiet) 90%,
+    var(--c-color-fill-loud)
+  );
   border-radius: var(--c-radius-sm);
 }
 
 hr {
   display: block;
   width: 100%;
   border: 0;
-  border-top: 1px solid var(--c-color-neutral-border-quiet);
+  height: 0;
+  border-block-start: 1px solid var(--c-color-neutral-border-quiet);
   margin-block: var(--c-spacing-lg);
+  margin-inline: 0;
+  color: transparent;
 }
 
 .index-grid {