feat: design qa multi theming improvements (DEVS, PLEASE IGNORE IT FOR NOW)

.changeset/lemon-pillows-yawn.md

@@ -0,0 +1,3 @@
+---
+
+---

packages/components/src/components/accordion/accordion.ts

@@ -41,11 +41,10 @@ import SolidElement from '../../internal/solid-element';
  * @animation accordion.hide - The animation to use when hiding accordion. You can use `height: auto` with this animation.
  *
  * @cssproperty --sd-accordion-border-width - The accordion border width.
- * @cssproperty --sd-accordion-color-background - The accordion background color.
  * @cssproperty --sd-accordion-color-text - The accordion color text.
  * @cssproperty --sd-accordion-padding-block - The accordion vertical padding value.
- * @cssproperty --sd-accordion__chevron-color-text - The accordion chevron color.
  * @cssproperty --sd-accordion__indicator-color - The accordion indicator color.
+ * @cssproperty --sd-accordion-color-icon-fill - The accordion icon color.
  */
 @customElement('sd-accordion')
 export default class SdAccordion extends SolidElement {
@@ -246,7 +245,7 @@ export default class SdAccordion extends SolidElement {
       }
 
       [part='summary-icon'] {
-        color: var(--sd-accordion__chevron-color-text);
+        fill: rgb(var(--sd-accordion-color-icon-fill));
       }
     `
   ];

packages/components/src/components/badge/badge.ts

@@ -17,6 +17,7 @@ import SolidElement from '../../internal/solid-element';
  *
  * @cssproperty --sd-badge--blue--inverted-color-background - The background color for the blue badge in its inverted state.
  * @cssproperty --sd-badge--blue--inverted-color-text - The text color for the blue badge in its inverted state.
+ * @cssproperty --sd-badge--blue-color-background - The background color for the blue badge in its standard state.
  * @cssproperty --sd-badge--green-color--inverted-background - The background color for the green badge in its inverted state.
  * @cssproperty --sd-badge--green-color--inverted-text - The text color for the green badge in its inverted state.
  * @cssproperty --sd-badge--inverted-color-border - The border color used in inverted state.
@@ -47,7 +48,7 @@ export default class SdBadge extends SolidElement {
           {
             /* variants */
             blue: !this.inverted
-              ? 'text-white bg-primary-500 border-white'
+              ? 'text-white  sd-badge--blue-color-background border-white'
               : 'sd-badge--blue--inverted-color-text sd-badge--blue--inverted-color-background sd-badge--inverted-color-border',
             green: !this.inverted
               ? 'text-white sd-badge--green-color-background border-white'

packages/components/src/components/brandshape/brandshape.ts

@@ -146,9 +146,9 @@ export default class SdBrandshape extends SolidElement {
           part="shape-middle"
           class=${cx(
             {
-              'neutral-100': 'bg-neutral-100',
+              'neutral-100': 'sd-brandshape--neutral-100-color-background',
               primary: 'bg-primary',
-              white: 'bg-white',
+              white: 'sd-brandshape--white-color-background',
               'border-white': 'bg-transparent',
               'border-primary': 'bg-transparent',
               image: 'bg-transparent'
@@ -176,9 +176,9 @@ export default class SdBrandshape extends SolidElement {
     return html` <div
       class=${cx(
         {
-          'neutral-100': 'bg-neutral-100',
+          'neutral-100': 'sd-brandshape--neutral-100-color-background',
           primary: 'bg-primary',
-          white: 'bg-white',
+          white: 'sd-brandshape--white-color-background',
           'border-white': 'bg-transparent',
           'border-primary': 'bg-transparent',
           image: 'bg-transparent'

packages/components/src/components/breadcrumb/breadcrumb.ts

@@ -24,6 +24,7 @@ import SolidElement from '../../internal/solid-element';
  * @csspart truncated-dropdown - The truncated dropdown containing the truncated breadcrumbs.
  *
  * @cssproperty --sd-breadcrumb__separator-color - The color of the breadcrumb separators.
+ * @cssproperty --sd-breadcrumb__separator--current-color - The color of the current breadcrumb separators.
  */
 @customElement('sd-breadcrumb')
 export default class SdBreadcrumb extends SolidElement {
@@ -167,7 +168,7 @@ export default class SdBreadcrumb extends SolidElement {
       }
 
       ::slotted(sd-breadcrumb-item:nth-last-child(2))::after {
-        @apply lg:bg-accent;
+        @apply lg:sd-breadcrumb__separator--current-color;
       }
 
       sd-dropdown,

packages/components/src/components/checkbox/checkbox.ts

@@ -36,6 +36,7 @@ import type { SolidFormControl } from '../../internal/solid-element';
  *
  * @cssproperty --sd-checkbox-border-width - The border width of the checkbox.
  * @cssproperty --sd-form-control-color-border - The color border for form controls.
+ * @cssproperty --sd-checkbox--checked--hovered-color-border - The border color of the checkbox when checked and hovered.
  */
 @customElement('sd-checkbox')
 export default class SdCheckbox extends SolidElement implements SolidFormControl {
@@ -264,7 +265,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
                 disabled: 'border-neutral-500',
                 visuallyDisabled: 'border-neutral-500',
                 invalidIndeterminate: 'border-error bg-error group-hover:bg-error-400',
-                invalid: 'border-error group-hover:bg-neutral-200',
+                invalid: 'border-error group-hover:border-error-400 group-hover:bg-transparent',
                 filled:
                   'border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550',
                 default: 'form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white'
@@ -287,7 +288,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
                     disabled: '',
                     visuallyDisabled: '',
                     invalidIndeterminate: ' bg-error group-hover:bg-error-400',
-                    invalid: 'group-hover:bg-neutral-200',
+                    invalid: '',
                     filled: 'bg-accent group-hover:bg-accent-550',
                     default: 'hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white'
                   }[checkboxState]
@@ -320,11 +321,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
             id="label"
             class=${cx(
               'select-none inline-block ml-2',
-              this.disabled || this.visuallyDisabled
-                ? 'text-neutral-500'
-                : this.showInvalidStyle
-                  ? 'text-error'
-                  : 'text-black'
+              this.disabled || this.visuallyDisabled ? 'text-neutral-500' : 'text-black'
             )}
           >
             <slot></slot>
@@ -336,14 +333,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
           class=${cx('flex items-center gap-2', this.showInvalidStyle && 'mt-2')}
         >
           ${this.showInvalidStyle
-            ? html` <sd-icon
-                id="invalid-icon"
-                part="invalid-icon"
-                class=${cx('text-error')}
-                library="_internal"
-                name="risk"
-              >
-              </sd-icon>`
+            ? html` <sd-icon id="invalid-icon" part="invalid-icon" library="_internal" name="risk"> </sd-icon>`
             : ''}
           ${this.formControlController.renderInvalidMessage(this.size)}
         </div>
@@ -368,6 +358,10 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
       :host([required]) #label::after {
         content: ' *';
       }
+
+      [part='invalid-icon'] {
+        color: rgb(var(--sd-color-icon-fill-error));
+      }
     `
   ];
 }

packages/components/src/components/combobox/combobox.ts

@@ -76,6 +76,14 @@ import type SdPopup from '../popup/popup';
  * @cssproperty --tag-max-width - Set the maximum width of the tags and to show an ellipsis. Defaults to "15ch"
  * @cssproperty --sd-form-control--invalid-color-background - The background color for form controls in invalid state.
  * @cssproperty --sd-form-control-color-text - The text color for form controls.
+ * @cssproperty --sd-form-control-border-radius - The border radius for form controls.
+ * @cssproperty --sd-form-control-color-border - The border color for default and readonly form controls.
+ * @cssproperty --sd-form-control--filled__floating-label-color-text - The text color for the floating label when the input is filled.
+ * @cssproperty --sd-form-control__listbox-border-bottom-left-radius - The border radius for the bottom left corner of the listbox.
+ * @cssproperty --sd-form-control__listbox-border-bottom-right-radius - The border radius for the bottom right corner of the listbox.
+ * @cssproperty --sd-form-control__listbox-border-top-left-radius - The border radius for the top left corner of the listbox.
+ * @cssproperty --sd-form-control__listbox-border-top-right-radius - The border radius for the top right corner of the listbox.
+ * @cssproperty --sd-combobox__tag-border-width - The border width for the tags for multiple options combobox.
  */
 
 @customElement('sd-combobox')
@@ -1195,7 +1203,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
 
     // Conditional Styles
     const cursorStyles = this.disabled || this.visuallyDisabled ? 'cursor-not-allowed' : 'cursor-pointer';
-    const iconColor = this.disabled || this.visuallyDisabled ? 'text-neutral-500' : 'text-primary';
+    const iconColor = this.disabled || this.visuallyDisabled ? 'text-neutral-500' : 'sd-icon-fill-primary';
     const iconMarginLeft = { sm: 'ml-1', md: 'ml-2', lg: 'ml-2' }[this.size];
     const iconMarginRight = { sm: 'mr-1', md: 'mr-2', lg: 'mr-2' }[this.size];
     const iconSize = {
@@ -1280,7 +1288,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
           <div
             part="border"
             class=${cx(
-              'absolute top-0 w-full h-full pointer-events-none border rounded-default z-10 transition-[border] duration-medium ease-in-out',
+              'absolute top-0 w-full h-full pointer-events-none border form-control-border-radius z-10 transition-[border] duration-medium ease-in-out',
               {
                 disabled: 'border-neutral-500',
                 visuallyDisabled: 'border-neutral-500',
@@ -1318,7 +1326,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
             <div
               part="combobox"
               class=${cx(
-                'relative w-full px-4 flex flex-row items-center rounded-default transition-colors hover:duration-fast ease-in-out',
+                'relative w-full px-4 flex flex-row items-center form-control-border-radius transition-colors hover:duration-fast ease-in-out',
                 this.visuallyDisabled || this.disabled ? 'hover:bg-transparent' : 'hover:bg-neutral-200',
                 this.open && 'shadow transition-shadow duration-medium ease-in-out',
                 ['invalid', 'activeInvalid'].includes(selectState) && 'form-control--invalid-color-background',
@@ -1356,9 +1364,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                 class=${cx(
                   'appearance-none outline-none bg-transparent flex-auto min-w-0',
                   cursorStyles,
-                  this.selectedTextLabel && !this.multiple
-                    ? 'placeholder:form-control-color-text'
-                    : 'placeholder:text-neutral-700',
+                  this.selectedTextLabel && !this.multiple ? 'placeholder:text-black' : 'placeholder:text-neutral-700',
                   this.size === 'sm' ? (isFloatingLabelActive ? 'h-4' : 'h-6') : isFloatingLabelActive ? 'h-6' : 'h-8',
                   isFloatingLabelActive && 'leading-none mt-4'
                 )}
@@ -1454,7 +1460,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                 part="right"
                 class=${cx(
                   'inline-flex ml-2 leading-[0]',
-                  this.disabled || this.visuallyDisabled ? 'text-neutral-500' : 'text-primary',
+                  this.disabled || this.visuallyDisabled ? 'text-neutral-500' : 'sd-icon-fill-primary',
                   iconSize
                 )}
               >
@@ -1485,7 +1491,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                   `
                 : html`
                     <button
-                      class="sd-interactive combobox-button absolute top-2"
+                      class="sd-interactive combobox-button absolute top-2 sd-icon-fill-primary"
                       @keydown=${this.handleComboboxMouseDown}
                       type="button"
                     >
@@ -1503,10 +1509,10 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
               part="listbox"
               class=${cx(
                 'bg-white px-2 py-3 relative border-primary overflow-y-auto',
-                this.open && 'shadow transition-shadow duration-medium ease-in-out',
+                this.open && 'shadow-listbox transition-shadow duration-medium ease-in-out',
                 this.currentPlacement === 'bottom'
-                  ? 'border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default'
-                  : 'border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default'
+                  ? 'border-r-2 border-b-2 border-l-2 form-control__listbox-border-bottom-right-radius form-control__listbox-border-bottom-left-radius'
+                  : 'border-r-2 border-t-2 border-l-2 form-control__listbox-border-top-right-radius form-control__listbox-border-top-left-radius'
               )}
               tabindex="-1"
               @mousedown=${this.preventLoosingFocus}
@@ -1582,7 +1588,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
       }
 
       sd-tag::part(base) {
-        @apply rounded-default px-1;
+        @apply rounded-default px-1 sd-combobox__tag-border-width;
       }
 
       sd-tag::part(content) {
@@ -1605,6 +1611,15 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
       mark {
         @apply bg-transparent text-inherit font-bold;
       }
+
+      [part='chevron'] {
+        color: rgb(var(--sd-color-icon-fill-primary));
+      }
+
+      :host([visually-disabled])[part='chevron'],
+      :host([disabled])[part='chevron'] {
+        @apply text-neutral-500;
+      }
     `
   ];
 }