improve color picker

docs/resources/changelog.md

@@ -8,7 +8,11 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Added `--swatch-size` custom property to `sl-color-picker`
 - Adjusted elevation tokens to use neutral in light mode and black in dark mode
+- Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray
+- Fixed a bug in `sl-color-picker` where the opacity slider wasn't showing the current color
+- Improved color picker size
 - Removed elevation from `sl-color-picker` when rendered inline
 
 ## 2.0.0-beta.48

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

@@ -5,11 +5,12 @@ export default css`
   ${componentStyles}
 
   :host {
-    --grid-width: 260px;
-    --grid-height: 200px;
+    --grid-width: 300px;
+    --grid-height: 220px;
     --grid-handle-size: 16px;
-    --slider-height: 15px;
-    --slider-handle-size: 17px;
+    --slider-height: 17px;
+    --slider-handle-size: 19px;
+    --swatch-size: 25px;
 
     display: inline-block;
   }
@@ -113,15 +114,13 @@ export default css`
     );
   }
 
-  .color-picker__alpha {
-    .color-picker__alpha-gradient {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      border-radius: inherit;
-    }
+  .color-picker__alpha .color-picker__alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
   }
 
   .color-picker__preview {
@@ -130,10 +129,10 @@ export default css`
     align-items: center;
     justify-content: center;
     position: relative;
-    width: 3.125rem;
-    height: var(--sl-input-height-small);
+    width: 3.25rem;
+    height: 2.25rem;
     border: none;
-    border-radius: var(--sl-input-border-radius-small);
+    border-radius: var(--sl-input-border-radius-medium);
     background: none;
     margin-left: var(--sl-spacing-small);
     cursor: copy;
@@ -213,8 +212,8 @@ export default css`
   }
 
   .color-picker__user-input sl-button {
-    min-width: 3.125rem;
-    max-width: 3.125rem;
+    min-width: 3.25rem;
+    max-width: 3.25rem;
     font-size: 1rem;
     margin-left: var(--sl-spacing-small);
   }
@@ -222,7 +221,7 @@ export default css`
   .color-picker__swatches {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
-    grid-gap: 6px;
+    grid-gap: 0.5rem;
     justify-items: center;
     border-top: solid 1px rgb(var(--sl-color-neutral-200));
     padding: var(--sl-spacing-small);
@@ -230,9 +229,9 @@ export default css`
 
   .color-picker__swatch {
     position: relative;
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
+    width: var(--swatch-size);
+    height: var(--swatch-size);
+    border-radius: var(--sl-border-radius-small);
   }
 
   .color-picker__swatch .color-picker__swatch-color {

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

@@ -47,6 +47,7 @@ import '../input/input';
  * @cssproperty --grid-handle-size - The size of the color grid's handle.
  * @cssproperty --slider-height - The height of the hue and alpha sliders.
  * @cssproperty --slider-handle-size - The diameter of the slider's handle.
+ * @cssproperty --swatch-size - The size of each predefined color swatch.
  */
 @customElement('sl-color-picker')
 export default class SlColorPicker extends LitElement {
@@ -725,7 +726,6 @@ export default class SlColorPicker extends LitElement {
         <div class="color-picker__user-input">
           <sl-input
             part="input"
-            size="small"
             type="text"
             name=${this.name}
             autocomplete="off"
@@ -740,7 +740,7 @@ export default class SlColorPicker extends LitElement {
 
           ${!this.noFormatToggle
             ? html`
-                <sl-button exportparts="base:format-button" size="small" @click=${this.handleFormatToggle}>
+                <sl-button exportparts="base:format-button" @click=${this.handleFormatToggle}>
                   ${this.setLetterCase(this.format)}
                 </sl-button>
               `