refactor(color-picker): simplify, remove wrappers, rewrite styles properly

Author: Kiarokh

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

@@ -3,33 +3,26 @@
 @import './partial-styles/lime-admin-hack';
 
 :host(limel-color-picker) {
-    isolation: isolate;
-}
-
-.color-picker {
     display: grid;
     gap: 0.25rem;
     grid-template-columns: auto 1fr;
 }
 
-.picker-trigger {
+button[slot='trigger'] {
     all: unset;
-    border-radius: 0.5rem;
-    @include mixins.is-elevated-clickable();
-    @include mixins.visualize-keyboard-focus();
-
-    &:after {
-        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
-    }
-}
-
-.picker-trigger {
     box-sizing: border-box;
     position: relative;
     isolation: isolate;
     width: shared_input-select-picker.$height-of-mdc-text-field;
     height: shared_input-select-picker.$height-of-mdc-text-field;
 
+    border-radius: 0.5rem;
+
+    &:not([disabled]):not([disabled='true']) {
+        @include mixins.is-elevated-clickable();
+        @include mixins.visualize-keyboard-focus();
+    }
+
     &:before,
     &:after {
         content: '';
@@ -44,29 +37,28 @@
     }
 
     &:after {
-        background: var(--background);
         z-index: 1;
+        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;
+        background: var(--background);
     }
 }
 
-:host([readonly]) {
-    .picker-trigger {
-        &:hover,
-        &:active {
-            cursor: default;
-            box-shadow: var(--button-shadow-normal);
-            transform: none;
-        }
+:host([readonly]:not([readonly='false'])) {
+    limel-input-field {
+        transform: translateX(
+                calc(
+                    #{shared_input-select-picker.$height-of-mdc-text-field} /
+                        4 * -1
+                )
+            )
+            translateY(
+                calc(
+                    #{shared_input-select-picker.$height-of-mdc-text-field} / 4
+                )
+            );
     }
-}
 
-.chosen-color-input[readonly] {
-    transform: translateX(
-            calc(
-                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1
-            )
-        )
-        translateY(
-            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)
-        );
+    button[slot='trigger'] {
+        border: 1px solid rgba(var(--contrast-700), 0.65);
+    }
 }

src/components/color-picker/color-picker.spec.tsx

@@ -26,15 +26,13 @@ test('the component renders', () => {
     expect(page.body).toEqualHtml(`
         <limel-color-picker label="Hair color">
             <mock:shadow-root>
-                    <div class="color-picker">
-                        <limel-popover opendirection="bottom-start">
-                            <button class="picker-trigger" id="tooltip-button" role="button" slot="trigger"></button>
-                            <limel-color-picker-palette label="Hair color">
-                                <mock:shadow-root></mock:shadow-root>
-                            </limel-color-picker-palette>
-                        </limel-popover>
-                        <limel-input-field class="chosen-color-input" label="Hair color"></limel-input-field>
-                    </div>
+                <limel-popover opendirection="bottom-start">
+                    <button id="tooltip-button" role="button" slot="trigger"></button>
+                    <limel-color-picker-palette label="Hair color">
+                        <mock:shadow-root></mock:shadow-root>
+                    </limel-color-picker-palette>
+                </limel-popover>
+                <limel-input-field label="Hair color"></limel-input-field>
             </mock:shadow-root>
         </limel-color-picker>`);
 });

src/components/color-picker/color-picker.tsx

@@ -1,4 +1,12 @@
-import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';
+import {
+    Component,
+    h,
+    Prop,
+    State,
+    Event,
+    EventEmitter,
+    Host,
+} from '@stencil/core';
 import { FormComponent } from '../form/form.types';
 import type { CustomColorSwatch } from './color-picker.types';
 
@@ -96,22 +104,20 @@ export class ColorPicker implements FormComponent {
     private shouldFocus = false;
 
     public render() {
-        return [
-            this.renderTooltip(),
-            <div class="color-picker">
+        return (
+            <Host>
+                {this.renderTooltip()}
                 {this.renderPickerPalette()}
-
                 <limel-input-field
                     label={this.label}
                     helperText={this.helperText}
                     value={this.value}
                     onChange={this.handleChange}
                     required={this.required}
                     readonly={this.readonly}
-                    class="chosen-color-input"
                 />
-            </div>,
-        ];
+            </Host>
+        );
     }
     private renderTooltip = () => {
         if (!this.readonly && this.tooltipLabel) {
@@ -155,7 +161,6 @@ export class ColorPicker implements FormComponent {
 
         return (
             <button
-                class="picker-trigger"
                 slot="trigger"
                 style={background}
                 role="button"