[6.x] Component select

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

@@ -55,9 +55,9 @@ function lightScale(color) {
         borderQuiet: 'var(--color-gray-800)',
         borderNormal: 'var(--color-gray-800)',
         borderLoud: 'var(--color-gray-800)',
-        onQuiet: 'var(--color-gray-100)',
-        onNormal: 'var(--color-gray-100)',
-        onLoud: 'var(--color-gray-100)',
+        onQuiet: 'var(--color-gray-50)',
+        onNormal: 'var(--color-gray-50)',
+        onLoud: 'var(--color-gray-50)',
       };
     default:
       return {
@@ -136,7 +136,7 @@ function buildTokens(colors, scaleFn) {
 }
 
 function buildStyleBlock(color) {
-  return `.c-colorable--${color},
+  return `.cp-colorable--${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,7 +161,7 @@ ${buildTokens(colors, lightScale)}
 ${buildTokens(colors, darkScale)}
 }
 
-.c-colorable,
+.cp-colorable,
 [data-color] {
   --c-color-fill-quiet: var(--c-color-neutral-fill-quiet);
   --c-color-fill-normal: var(--c-color-neutral-fill-normal);

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

@@ -36,7 +36,7 @@ export default css`
     :host(:hover) {
       background-color: color-mix(
         in oklab,
-        var(--c-color-fill-loud, var(--c-button-default-fill)),
+        var(--c-color-fill-loud, var(--c-color-neutral-fill-loud)),
         var(--c-color-mix-hover)
       );
       color: var(--c-color-on-loud);
@@ -123,7 +123,7 @@ export default css`
   :host([appearance~='plain']:hover) {
     background-color: color-mix(
       in oklab,
-      var(--c-color-fill-quiet, var(--c-button-default-fill)),
+      var(--c-color-fill-quiet, var(--c-color-neutral-fill-quiet)),
       var(--c-color-mix-hover)
     );
     color: var(--c-color-on-quiet);

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

@@ -37,13 +37,13 @@ export default css`
 
   .cp-chip[size='small'],
   .cp-chip--small {
-    padding-block: 0;
+    padding-block: var(--c-spacing-xs);
     min-height: var(--c-size-control-sm);
   }
 
   .cp-chip[size='medium'],
   .cp-chip--medium {
-    padding-block: 0;
+    padding-block: var(--c-spacing-sm);
     min-height: var(--c-size-control-md);
   }
 

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/styles/shared/base.css

@@ -40,12 +40,17 @@ 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-loud) 10%,
+    var(--c-color-fill-quiet)
+  );
   border-radius: var(--c-radius-sm);
 }
 

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

@@ -1,4 +1,4 @@
-/* Auto-generated by scripts/generate-colors.ts — do not edit manually */
+/* Auto-generated by scripts/generate-colors.js — do not edit manually */
 
 :root {
   /* red */
@@ -215,8 +215,8 @@
   --c-color-black-fill-normal: var(--color-gray-900);
   --c-color-black-fill-loud: var(--color-gray-900);
   --c-color-black-border-quiet: var(--color-gray-800);
-  --c-color-black-border-normal: undefined;
-  --c-color-black-border-loud: undefined;
+  --c-color-black-border-normal: var(--color-gray-800);
+  --c-color-black-border-loud: var(--color-gray-800);
   --c-color-black-on-quiet: var(--color-gray-100);
   --c-color-black-on-normal: var(--color-gray-100);
   --c-color-black-on-loud: var(--color-gray-100);
@@ -444,24 +444,24 @@
   --c-color-black-on-loud: var(--color-gray-300);
 }
 
-.c-colorable,
+.cp-colorable,
 [data-color] {
   --c-color-fill-quiet: var(--c-color-neutral-fill-quiet);
-  --c-color-fill-normal: var(--c-color-neutral-fill-quiet);
-  --c-color-fill-loud: 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-quiet);
-  --c-color-border-loud: 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-quiet);
-  --c-color-on-loud: 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);
 }
 
-.c-colorable--red,
+.cp-colorable--red,
 [data-color='red'] {
   --c-color-fill-quiet: var(--c-color-red-fill-quiet);
   --c-color-border-quiet: var(--c-color-red-border-quiet);
@@ -473,7 +473,7 @@
   --c-color-border-loud: var(--c-color-red-border-loud);
   --c-color-on-loud: var(--c-color-red-on-loud);
 }
-.c-colorable--orange,
+.cp-colorable--orange,
 [data-color='orange'] {
   --c-color-fill-quiet: var(--c-color-orange-fill-quiet);
   --c-color-border-quiet: var(--c-color-orange-border-quiet);
@@ -485,7 +485,7 @@
   --c-color-border-loud: var(--c-color-orange-border-loud);
   --c-color-on-loud: var(--c-color-orange-on-loud);
 }
-.c-colorable--amber,
+.cp-colorable--amber,
 [data-color='amber'] {
   --c-color-fill-quiet: var(--c-color-amber-fill-quiet);
   --c-color-border-quiet: var(--c-color-amber-border-quiet);
@@ -497,7 +497,7 @@
   --c-color-border-loud: var(--c-color-amber-border-loud);
   --c-color-on-loud: var(--c-color-amber-on-loud);
 }
-.c-colorable--yellow,
+.cp-colorable--yellow,
 [data-color='yellow'] {
   --c-color-fill-quiet: var(--c-color-yellow-fill-quiet);
   --c-color-border-quiet: var(--c-color-yellow-border-quiet);
@@ -509,7 +509,7 @@
   --c-color-border-loud: var(--c-color-yellow-border-loud);
   --c-color-on-loud: var(--c-color-yellow-on-loud);
 }
-.c-colorable--lime,
+.cp-colorable--lime,
 [data-color='lime'] {
   --c-color-fill-quiet: var(--c-color-lime-fill-quiet);
   --c-color-border-quiet: var(--c-color-lime-border-quiet);
@@ -521,7 +521,7 @@
   --c-color-border-loud: var(--c-color-lime-border-loud);
   --c-color-on-loud: var(--c-color-lime-on-loud);
 }
-.c-colorable--green,
+.cp-colorable--green,
 [data-color='green'] {
   --c-color-fill-quiet: var(--c-color-green-fill-quiet);
   --c-color-border-quiet: var(--c-color-green-border-quiet);
@@ -533,7 +533,7 @@
   --c-color-border-loud: var(--c-color-green-border-loud);
   --c-color-on-loud: var(--c-color-green-on-loud);
 }
-.c-colorable--emerald,
+.cp-colorable--emerald,
 [data-color='emerald'] {
   --c-color-fill-quiet: var(--c-color-emerald-fill-quiet);
   --c-color-border-quiet: var(--c-color-emerald-border-quiet);
@@ -545,7 +545,7 @@
   --c-color-border-loud: var(--c-color-emerald-border-loud);
   --c-color-on-loud: var(--c-color-emerald-on-loud);
 }
-.c-colorable--teal,
+.cp-colorable--teal,
 [data-color='teal'] {
   --c-color-fill-quiet: var(--c-color-teal-fill-quiet);
   --c-color-border-quiet: var(--c-color-teal-border-quiet);
@@ -557,7 +557,7 @@
   --c-color-border-loud: var(--c-color-teal-border-loud);
   --c-color-on-loud: var(--c-color-teal-on-loud);
 }
-.c-colorable--cyan,
+.cp-colorable--cyan,
 [data-color='cyan'] {
   --c-color-fill-quiet: var(--c-color-cyan-fill-quiet);
   --c-color-border-quiet: var(--c-color-cyan-border-quiet);
@@ -569,7 +569,7 @@
   --c-color-border-loud: var(--c-color-cyan-border-loud);
   --c-color-on-loud: var(--c-color-cyan-on-loud);
 }
-.c-colorable--sky,
+.cp-colorable--sky,
 [data-color='sky'] {
   --c-color-fill-quiet: var(--c-color-sky-fill-quiet);
   --c-color-border-quiet: var(--c-color-sky-border-quiet);
@@ -581,7 +581,7 @@
   --c-color-border-loud: var(--c-color-sky-border-loud);
   --c-color-on-loud: var(--c-color-sky-on-loud);
 }
-.c-colorable--blue,
+.cp-colorable--blue,
 [data-color='blue'] {
   --c-color-fill-quiet: var(--c-color-blue-fill-quiet);
   --c-color-border-quiet: var(--c-color-blue-border-quiet);
@@ -593,7 +593,7 @@
   --c-color-border-loud: var(--c-color-blue-border-loud);
   --c-color-on-loud: var(--c-color-blue-on-loud);
 }
-.c-colorable--indigo,
+.cp-colorable--indigo,
 [data-color='indigo'] {
   --c-color-fill-quiet: var(--c-color-indigo-fill-quiet);
   --c-color-border-quiet: var(--c-color-indigo-border-quiet);
@@ -605,7 +605,7 @@
   --c-color-border-loud: var(--c-color-indigo-border-loud);
   --c-color-on-loud: var(--c-color-indigo-on-loud);
 }
-.c-colorable--violet,
+.cp-colorable--violet,
 [data-color='violet'] {
   --c-color-fill-quiet: var(--c-color-violet-fill-quiet);
   --c-color-border-quiet: var(--c-color-violet-border-quiet);
@@ -617,7 +617,7 @@
   --c-color-border-loud: var(--c-color-violet-border-loud);
   --c-color-on-loud: var(--c-color-violet-on-loud);
 }
-.c-colorable--purple,
+.cp-colorable--purple,
 [data-color='purple'] {
   --c-color-fill-quiet: var(--c-color-purple-fill-quiet);
   --c-color-border-quiet: var(--c-color-purple-border-quiet);
@@ -629,7 +629,7 @@
   --c-color-border-loud: var(--c-color-purple-border-loud);
   --c-color-on-loud: var(--c-color-purple-on-loud);
 }
-.c-colorable--fuchsia,
+.cp-colorable--fuchsia,
 [data-color='fuchsia'] {
   --c-color-fill-quiet: var(--c-color-fuchsia-fill-quiet);
   --c-color-border-quiet: var(--c-color-fuchsia-border-quiet);
@@ -641,7 +641,7 @@
   --c-color-border-loud: var(--c-color-fuchsia-border-loud);
   --c-color-on-loud: var(--c-color-fuchsia-on-loud);
 }
-.c-colorable--pink,
+.cp-colorable--pink,
 [data-color='pink'] {
   --c-color-fill-quiet: var(--c-color-pink-fill-quiet);
   --c-color-border-quiet: var(--c-color-pink-border-quiet);
@@ -653,7 +653,7 @@
   --c-color-border-loud: var(--c-color-pink-border-loud);
   --c-color-on-loud: var(--c-color-pink-on-loud);
 }
-.c-colorable--rose,
+.cp-colorable--rose,
 [data-color='rose'] {
   --c-color-fill-quiet: var(--c-color-rose-fill-quiet);
   --c-color-border-quiet: var(--c-color-rose-border-quiet);
@@ -665,7 +665,7 @@
   --c-color-border-loud: var(--c-color-rose-border-loud);
   --c-color-on-loud: var(--c-color-rose-on-loud);
 }
-.c-colorable--white,
+.cp-colorable--white,
 [data-color='white'] {
   --c-color-fill-quiet: var(--c-color-white-fill-quiet);
   --c-color-border-quiet: var(--c-color-white-border-quiet);
@@ -677,7 +677,7 @@
   --c-color-border-loud: var(--c-color-white-border-loud);
   --c-color-on-loud: var(--c-color-white-on-loud);
 }
-.c-colorable--gray,
+.cp-colorable--gray,
 [data-color='gray'] {
   --c-color-fill-quiet: var(--c-color-gray-fill-quiet);
   --c-color-border-quiet: var(--c-color-gray-border-quiet);
@@ -689,7 +689,7 @@
   --c-color-border-loud: var(--c-color-gray-border-loud);
   --c-color-on-loud: var(--c-color-gray-on-loud);
 }
-.c-colorable--black,
+.cp-colorable--black,
 [data-color='black'] {
   --c-color-fill-quiet: var(--c-color-black-fill-quiet);
   --c-color-border-quiet: var(--c-color-black-border-quiet);

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

@@ -283,13 +283,19 @@
   /**
   Web Awesome
    */
+
+  /* Colors */
+  --wa-color-surface-border: var(--c-color-neutral-border-quiet);
+  --wa-color-surface-raised: var(--c-surface-raised);
+
+  /* Shadow */
+  --wa-shadow-l: var(--c-shadow-lg);
+
+  /* Panels */
   --wa-panel-border-style: solid;
   --wa-panel-border-width: 1px;
-  --wa-color-surface-border: var(--c-color-neutral-border-quiet);
   --wa-panel-border-color: var(--c-color-neutral-border-quiet);
   --wa-panel-border-radius: var(--c-radius-md);
-  --wa-color-surface-raised: var(--c-surface-raised);
-  --wa-shadow-l: var(--c-shadow-lg);
 }
 
 [data-theme='dark'] {