add filled tokens and update styles

docs/resources/changelog.md

@@ -11,7 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added initial surface design tokens to improve the appearance of alert, card, and panels in dark mode
 - 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>` 
+- Added the `filled` variation to `<sl-input>`, `<sl-textarea>`, and `<sl-select>` and supporting design tokens
 - Added the `control` part to `<sl-select>` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
 - Changed the default `distance` in `<sl-dropdown>` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
 

src/components/input/input.styles.ts

@@ -65,18 +65,22 @@ export default css`
 
   /* Filled inputs */
   .input--filled {
-    background-color: rgb(var(--sl-color-neutral-100));
+    border: none;
-    border: solid 1px rgb(var(--sl-color-neutral-100));
+    background-color: rgb(var(--sl-input-filled-background-color));
     color: rgb(var(--sl-input-color));
   }
 
+  .input--filled:hover:not(.input--disabled) {
+    background-color: rgb(var(--sl-input-filled-background-color-hover));
+  }
+
   .input--filled.input--focused:not(.input--disabled) {
-    background-color: rgb(var(--sl-color-surface-base));
+    background-color: rgb(var(--sl-input-filled-background-color-focus));
-    border-color: rgb(var(--sl-color-primary-500));
     box-shadow: var(--sl-focus-ring);
   }
 
   .input--filled.input--disabled {
+    background-color: rgb(var(--sl-input-filled-background-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
   }

src/components/select/select.styles.ts

@@ -61,22 +61,24 @@ export default css`
 
   /* Filled selects */
   .select--filled .select__control {
-    background-color: rgb(var(--sl-color-neutral-100));
+    border: none;
-    border: solid 1px rgb(var(--sl-color-neutral-100));
+    background-color: rgb(var(--sl-input-filled-background-color));
     color: rgb(var(--sl-input-color));
   }
 
+  .select--filled:hover:not(.select--disabled) .select__control {
+    background-color: rgb(var(--sl-input-filled-background-color-hover));
+  }
+
   .select--filled.select--focused:not(.select--disabled) .select__control {
-    background-color: rgb(var(--sl-color-surface-base));
+    background-color: rgb(var(--sl-input-filled-background-color-focus));
-    border-color: rgb(var(--sl-color-primary-500));
     box-shadow: var(--sl-focus-ring);
-    outline: none;
   }
 
   .select--filled.select--disabled .select__control {
+    background-color: rgb(var(--sl-input-filled-background-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
-    outline: none;
   }
 
   .select--disabled .select__tags,

src/components/textarea/textarea.styles.ts

@@ -67,21 +67,22 @@ export default css`
 
   /* Filled textareas */
   .textarea--filled {
-    background-color: rgb(var(--sl-color-neutral-100));
+    border: none;
-    border: solid 1px rgb(var(--sl-color-neutral-100));
+    background-color: rgb(var(--sl-input-filled-background-color));
+    color: rgb(var(--sl-input-color));
   }
 
-  .textarea--filled:hover:not(.textarea--disabled) .textarea__control {
+  .textarea--filled:hover:not(.textarea--disabled) {
-    color: rgb(var(--sl-input-color-hover));
+    background-color: rgb(var(--sl-input-filled-background-color-hover));
   }
 
   .textarea--filled.textarea--focused:not(.textarea--disabled) {
-    background-color: rgb(var(--sl-color-surface-base));
+    background-color: rgb(var(--sl-input-filled-background-color-focus));
-    border-color: rgb(var(--sl-color-primary-500));
     box-shadow: var(--sl-focus-ring);
   }
 
   .textarea--filled.textarea--disabled {
+    background-color: rgb(var(--sl-input-filled-background-color-disabled));
     opacity: 0.5;
     cursor: not-allowed;
   }

src/themes/dark.styles.ts

@@ -516,6 +516,15 @@ export default css`
     --sl-input-spacing-medium: var(--sl-spacing-medium);
     --sl-input-spacing-large: var(--sl-spacing-large);
 
+    --sl-input-filled-background-color: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-focus: var(--sl-color-neutral-0);
+    --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
+    --sl-input-filled-color: var(--sl-color-neutral-800);
+    --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+    --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+    --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
     /* Labels */
     --sl-input-label-font-size-small: var(--sl-font-size-small);
     --sl-input-label-font-size-medium: var(--sl-font-size-medium);

src/themes/light.styles.ts

@@ -516,6 +516,15 @@ export default css`
     --sl-input-spacing-medium: var(--sl-spacing-medium);
     --sl-input-spacing-large: var(--sl-spacing-large);
 
+    --sl-input-filled-background-color: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-hover: var(--sl-color-neutral-100);
+    --sl-input-filled-background-color-focus: var(--sl-color-neutral-0);
+    --sl-input-filled-background-color-disabled: var(--sl-color-neutral-100);
+    --sl-input-filled-color: var(--sl-color-neutral-800);
+    --sl-input-filled-color-hover: var(--sl-color-neutral-800);
+    --sl-input-filled-color-focus: var(--sl-color-neutral-700);
+    --sl-input-filled-color-disabled: var(--sl-color-neutral-800);
+
     /* Labels */
     --sl-input-label-font-size-small: var(--sl-font-size-small);
     --sl-input-label-font-size-medium: var(--sl-font-size-medium);