add panel border width token

docs/resources/changelog.md

@@ -8,7 +8,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
-- Added initial surface design tokens to improve the appearance of alert, card, and panels in dark mode
+- Added `--sl-surface-base` and `--sl-surface-base-alt` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
+- Added the `--sl-panel-border-width` design token
 - Added missing background color to `<sl-details>`
 - Added the `outline` variation to `<sl-button>` [#522](https://github.com/shoelace-style/shoelace/issues/522)
 - Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens

src/components/alert/alert.styles.ts

@@ -16,8 +16,8 @@ export default css`
     display: flex;
     align-items: stretch;
     background-color: rgb(var(--sl-surface-base-alt));
-    border: solid 1px rgb(var(--sl-color-neutral-200));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
-    border-top-width: 3px;
+    border-top-width: calc(var(--sl-panel-border-width) * 3);
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--box-shadow);
     font-family: var(--sl-font-sans);

src/components/color-picker/color-picker.styles.ts

@@ -28,7 +28,7 @@ export default css`
   }
 
   .color-picker--inline {
-    border: solid 1px rgb(var(--sl-panel-border-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
   }
 
   .color-picker__grid {

src/components/dropdown/dropdown.styles.ts

@@ -28,7 +28,7 @@ export default css`
     font-weight: var(--sl-font-weight-normal);
     color: var(--color);
     background-color: rgb(var(--sl-panel-background-color));
-    border: solid 1px rgb(var(--sl-panel-border-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     box-shadow: var(--sl-shadow-large);
     overflow: auto;

src/components/menu-divider/menu-divider.styles.ts

@@ -9,7 +9,7 @@ export default css`
   }
 
   .menu-divider {
-    border-top: solid 1px rgb(var(--sl-panel-border-color));
+    border-top: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
     margin: var(--sl-spacing-x-small) 0;
   }
 `;

src/components/radio-group/radio-group.styles.ts

@@ -9,7 +9,7 @@ export default css`
   }
 
   .radio-group {
-    border: solid 1px rgb(var(--sl-panel-border-color));
+    border: solid var(--sl-panel-border-width) rgb(var(--sl-panel-border-color));
     border-radius: var(--sl-border-radius-medium);
     padding: var(--sl-spacing-large);
     padding-top: var(--sl-spacing-x-small);

src/themes/dark.styles.ts

@@ -555,6 +555,7 @@ export default css`
 
     --sl-panel-background-color: var(--sl-surface-base-alt);
     --sl-panel-border-color: var(--sl-color-neutral-200);
+    --sl-panel-border-width: 1px;
 
     /*
      * Tooltips

src/themes/light.styles.ts

@@ -555,6 +555,7 @@ export default css`
 
     --sl-panel-background-color: var(--sl-surface-base-alt);
     --sl-panel-border-color: var(--sl-color-neutral-200);
+    --sl-panel-border-width: 1px;
 
     /*
      * Tooltips