Add panel tokens

docs/components/badge.md

@@ -80,9 +80,7 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
 
 ```html preview
-<sl-menu
+<sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
-  style="max-width: 240px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
->
   <sl-menu-label>Messages</sl-menu-label>
   <sl-menu-item>Comments <sl-badge slot="suffix" pill>4</sl-badge></sl-menu-item>
   <sl-menu-item>Replies <sl-badge slot="suffix" pill>12</sl-badge></sl-menu-item>

docs/components/icon.md

@@ -125,7 +125,7 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s
 
 <style>
   .icon-search {
-    border: solid 1px var(--sl-color-gray-90);
+    border: solid 1px var(--sl-panel-border-color);
     border-radius: var(--sl-border-radius-medium);
     padding: var(--sl-spacing-medium);
   }
@@ -180,6 +180,10 @@ Custom icons can be loaded by setting the `src` attribute. Only SVG images are s
     color: var(--sl-color-primary-50);
   }
 
+  .sl-theme-dark .icon-list-item:hover {
+    background-color: var(--sl-color-primary-15);
+  }
+
   .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {
     display: none;
   }

docs/components/menu-divider.md

@@ -6,7 +6,7 @@ Menu dividers are used to visually group menu items.
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-item value="1">Option 1</sl-menu-item>
   <sl-menu-item value="2">Option 2</sl-menu-item>

docs/components/menu-item.md

@@ -6,7 +6,7 @@ Menu items provide options for the user to pick from in a menu.
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-item>Option 1</sl-menu-item>
   <sl-menu-item>Option 2</sl-menu-item>

docs/components/menu-label.md

@@ -6,7 +6,7 @@ Menu labels are used to describe a group of menu items.
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-label>Fruits</sl-menu-label>
   <sl-menu-item value="apple">Apple</sl-menu-item>

docs/components/menu.md

@@ -8,7 +8,7 @@ Use [menu items](/components/menu-item.md), [menu dividers](/components/menu-div
 
 ```html preview
 <sl-menu
-  style="max-width: 200px; border: solid 1px var(--sl-color-gray-90); border-radius: var(--sl-border-radius-medium);"
+  style="max-width: 200px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);"
 >
   <sl-menu-item value="undo">Undo</sl-menu-item>
   <sl-menu-item value="redo">Redo</sl-menu-item>

src/components/color-picker/color-picker.scss

@@ -23,7 +23,7 @@
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   color: var(--color);
-  background-color: var(--sl-color-white);
+  background-color: var(--sl-panel-background-color);
   border-radius: var(--sl-border-radius-medium);
   user-select: none;
 }

src/components/dialog/dialog.scss

@@ -32,7 +32,7 @@
   width: var(--width);
   max-width: calc(100% - var(--sl-spacing-xx-large));
   max-height: calc(100% - var(--sl-spacing-xx-large));
-  background-color: var(--sl-color-white);
+  background-color: var(--sl-panel-background-color);
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-x-large);
   opacity: 0;

src/components/drawer/drawer.scss

@@ -40,7 +40,7 @@
   z-index: 2;
   max-width: 100%;
   max-height: 100%;
-  background-color: var(--sl-color-white);
+  background-color: var(--sl-panel-background-color);
   box-shadow: var(--sl-shadow-x-large);
   transition: var(--sl-transition-medium) transform;
   overflow: auto;

src/components/dropdown/dropdown.scss

@@ -20,8 +20,8 @@
   font-size: var(--sl-font-size-medium);
   font-weight: var(--sl-font-weight-normal);
   color: var(--color);
-  background-color: var(--sl-color-white);
+  background-color: var(--sl-panel-background-color);
-  border: solid 1px var(--sl-color-gray-90);
+  border: solid 1px var(--sl-panel-border-color);
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-large);
   opacity: 0;

src/components/menu-divider/menu-divider.scss

@@ -4,12 +4,10 @@
  * @prop --color: The color of the divider.
  */
 :host {
-  --color: var(--sl-color-gray-90);
-
   display: block;
 }
 
 .menu-divider {
-  border-top: solid 1px var(--color);
+  border-top: solid 1px var(--sl-panel-border-color);
   margin: var(--sl-spacing-x-small) 0;
 }

src/components/menu/menu.scss

@@ -5,7 +5,6 @@
 }
 
 .menu {
-  background-color: var(--sl-color-white);
   padding: var(--sl-spacing-x-small) 0;
 
   &:focus {

src/styles/shoelace.scss

@@ -229,6 +229,13 @@
 
   --sl-overlay-background-color: hsla(var(--sl-color-gray-hue), var(--sl-color-gray-saturation), 20%, 0.5);
 
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+  // Panels
+  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+  --sl-panel-background-color: var(--sl-color-white);
+  --sl-panel-border-color: var(--sl-color-gray-90);
+
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
   // Tooltip tokens
   //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////