feat: design qa multi theming improvements

.changeset/frank-wolves-brush.md

@@ -0,0 +1,10 @@
+---
+'@solid-design-system/styles': patch
+---
+
+Fixes and improvements for multi-theming:
+- `sd-container`: fixed the triangle variable for multi-theming
+- `sd-copyright`: fixed shadow styling
+- `sd-footnotes`: fixed text colors
+- Add `css properties` section to docs table
+- Add `deprecated` attribute to indicate deprecated css variables

.changeset/green-queens-love.md

@@ -0,0 +1,9 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Fixes and improvements for multi-theming:
+- Added themed logos to the following templates: `sd-header`, `sd-badge`, `sd-breadcrumb`, `sd-header-navigation`
+- Fixed accessibility tests for `sd-headline` when used with `sd-mark`
+- Fixed gradient styling in `sd-expandable` for multi-theming
+- Fixed icon colors in `sd-map-marker`

.changeset/hot-spoons-refuse.md

@@ -0,0 +1,173 @@
+---
+'@solid-design-system/tokens': minor
+---
+
+Updated design tokens to align with design specifications and improve multi-theming robustness:
+- sd-accordion:
+    - `--sd-accordion-border-width`
+    - `--sd-accordion-color-icon-fill`
+- sd-audio
+    - `--sd-audio__slide-bar--inverted-color-background`
+    - `--sd-audio__track-bar--inverted-color-background`
+- sd-badge
+    - `--sd-badge--blue-color-background`
+- sd-brandshape
+    - `--sd-brandshape--neutral-100-color-background`
+    - `--sd-brandshape--white-color-background`
+- sd-breadcrumb
+    - `--sd-breadcrumb__separator--current-color`
+- sd-button
+    - `--sd-button--primary--hover-color-text`
+    - `--sd-button--primary--inverted--active-color-background`
+    - `--sd-button--secondary--active-color-text`
+    - `--sd-button--secondary--inverted-color-text`
+    - `--sd-button--secondary--inverted--hover-color-background`
+    - `--sd-button--secondary--inverted--active-color-text`
+    - `--sd-button--secondary--size-sm-padding-block`
+    - `--sd-button--secondary--size-md-padding-block`
+    - `--sd-button--secondary--size-lg-padding-block`
+    - `--sd-button--secondary-padding-inline`
+    - `--sd-button--tertiary--active-color-text`
+    - `--sd-button--tertiary--inverted-color-text`
+    - `--sd-button--tertiary--inverted--active-color-text`
+    - `--sd-button--size-lg-height`
+    - `--sd-button--size-lg-icon-height`
+    - `--sd-button--size-md--icon-only-padding-inline`
+    - `--sd-button--size-md-height`
+    - `--sd-button-border-width`
+    - `--sd-button-padding-inline`
+
+    **Renamed**
+    - `--sd-button--size-lg-border-radius` → `--sd-button-border-radius`
+    - `--sd-button--size-md-border-radius` → `--sd-button-border-radius`
+    - `--sd-button--size-sm-border-radius` → `--sd-button-border-radius`
+
+    **Fixed**
+    - `--sd-button--secondary--inverted--color-border` →  `--sd-button--secondary--inverted-color-border`
+- sd-chip:
+
+    **Renamed**
+    - `--sd-chip-font-size` → `--sd-marker-font-size`
+    - `--sd-chip-border-width` → `--sd-marker-border-width`
+    - `--sd-chip-font-weight` → `--sd-marker-font-weight`
+- sd-combobox
+    - `--sd-form-control-border-radius`
+    - `--sd-form-control-color-border`
+    - `--sd-form-control--filled__floating-label-color-text`
+    - `--sd-form-control__listbox-border-bottom-left-radius`
+    - `--sd-form-control__listbox-border-bottom-right-radius`
+    - `--sd-form-control__listbox-border-top-left-radius`
+    - `--sd-form-control__listbox-border-top-right-radius`
+    - `--sd-combobox__tag-border-width`
+- sd-datepicker
+    - `--sd-form-control-color-text`
+    - `--sd-form-control-border-radius`
+    - `--sd-form-control-color-border`
+    - `--sd-form-control--filled__floating-label-color-text`
+    - `--sd-form-control--invalid-color-background`
+    - `--sd-form-control__listbox-border-bottom-left-radius`
+    - `--sd-form-control__listbox-border-bottom-right-radius`
+    - `--sd-form-control__listbox-border-top-left-radius`
+    - `--sd-form-control__listbox-border-top-right-radius`
+    - `--sd-datepicker__date-item--default-color-text`
+    - `--sd-datepicker__date-item--hover--default-color-background`
+    - `--sd-datepicker__date-item--hover--default-color-text`
+    - `--sd-datepicker__date-item--default-color-border`
+    - `--sd-datepicker__date-item--selected-color-text`
+    - `--sd-datepicker__date-item--hover--prev-next-color-background`
+    - `--sd-datepicker__date-item--hover--prev-next-color-text`
+    - `--sd-datepicker__date-item--selected-color-background`
+    - `--sd-datepicker__date-item--selected--hover-color-background`
+    - `--sd-datepicker__date-item--range-color-background`
+    - `--sd-datepicker__date-item--current-color-text`
+    - `--sd-datepicker__date-item--current-font-weight`
+- sd-dropdown:  
+    - `--sd-dropdown-color-background`
+- sd-flag
+    - `--sd-marker-font-weight`
+    - `--sd-marker-font-size`
+
+    **Renamed**
+    - `--sd-flag-border-width` → `--sd-marker-border-width`
+- sd-header
+    - `--sd-header-padding-bottom`
+    - `--sd-header__underline-color-background`
+    - `--sd-header__underline-height`
+    - `--sd-header__shadow-height`
+- sd-headline
+    - `--sd-headline--3xl-onwards-color-text`
+- sd-input
+    - `--sd-form-control-border-radius`
+
+    **Fixed**
+    - `--sd-form-control-color-icon` → `--sd-form-control-color-icon-fill`
+- sd-link
+    - `--interactive--default-color-text`
+- sd-map-marker
+    - `--sd-map-marker-cluster--hovered-color-text`
+    - `--sd-map-marker--cluster--default-color-background`
+    - `--sd-map-marker--cluster--hover-color-background`
+    - `--sd-map-marker--cluster-color-text`
+    - `--sd-map-marker--main-color-background`
+    - `--sd-map-marker--pin--default-color-background`
+    - `--sd-map-marker--pin--hover-color-background`
+    - `--sd-map-marker--pin-color-text`
+- sd-menu-item
+
+    **Renamed**
+    - `--sd-menu-color-icon` → `--sd-menu-item-color-icon-fill`
+    - `--sd-menu-color-text` → `--sd-menu-item-color-text`
+    - `--sd-menu--disabled-color-icon` → `--sd-menu-item--disabled-color-icon-fill`
+    - `--sd-menu--disabled-color-text` → `--sd-menu-item--disabled-color-text`
+- sd-notification
+    - `--sd-notification__duration-indicator-color-background`
+- sd-option
+    - `--sd-form-control-color-border`
+- sd-pagination
+    - `--sd-pagination--default-border`
+    - `--sd-pagination--inverted-border`
+- sd-radio-button
+    - `--sd-radio-button--hover-color-background`
+    - `--sd-choice-control-font-weight`
+- sd-select
+    - `--sd-form-control-border-radius`
+    - `--sd-form-control__listbox-border-bottom-left-radius`
+    - `--sd-form-control__listbox-border-bottom-right-radius`
+    - `--sd-form-control__listbox-border-top-left-radius`
+    - `--sd-form-control__listbox-border-top-right-radius`
+- sd-skeleton
+    - `--sd-skeleton-color`
+- sd-step
+    - `--sd-step-color-text`
+- sd-tag
+    - `--sd-choice-control-font-weight`
+    - `--sd-tag--disabled-color-text`
+
+    **Renamed**
+    - `--sd-tag-font-weight` → `--sd-choice-control-font-weight`
+- sd-tab
+    - `--sd-tab--hover-color-background`
+    - `--sd-choice-control-font-weight`
+    - `--sd-tab--active-color-text`
+    - `--sd-tab-color-text`
+- sd-teaser-media
+    - `--sd-teaser-media--white--hover-color-background`
+    - `--sd-teaser-media--white-color-background`
+- sd-teaser
+    - `--sd-teaser-border-radius`
+- sd-textarea
+    - `--sd-form-control-border-radius`
+    - `--sd-form-control--filled__floating-label-color-text`
+
+
+Removed variables
+- `--sd-tag--disabled-color-border`
+- `--sd-navigation-item--current-color-text`
+- `--sd-option--disabled-color-border`
+- `--sd-audio__timestamp-color-text`
+
+**Important**: To avoid breaking changes, all variables marked as `renamed` or `deleted` **are still available** under their previous names. Only variables marked as `fixed` have been completely removed. However, this should not be considered a breaking change, as these variables were not functioning correctly.
+
+If you are using any of the `renamed`, `deleted` or `fixed`css variables manually overriding these in custom themes might lead to problems in future versions of Solid. Use the actual used value instead. Example: Instead of --sd-chip-border-width use --sd-marker-border-width--sd-marker-border-width for your overrides.
+
+If you need assistance, please reach out to the support channel.

.changeset/lemon-pillows-yawn.md

@@ -0,0 +1,22 @@
+---
+'@solid-design-system/components': patch
+---
+
+Small fixes and improvements:
+- Improved the `bold` font weight for the kid theme
+- Fixed inverted thumb color in `sd-audio`
+- Corrected `sd-button` size definitions
+- Fixed invalid state colors in `sd-checkbox`
+- Fixed listbox shadow in `sd-combobox` and `sd-select`
+- Removed white border from the selected day in `sd-datepicker`
+- Removed overlay opacity from `sd-dialog`
+- Fixed outline color in `sd-drawer`
+- Fixed gradient colors for `sd-expandable` in multi-theming
+- Fixed gradient variants for `sd-flipcard` and `sd-teaser-media` in multi-theming
+- Fixed current text color in `sd-navigation-item`
+- Fixed text size for `sd-option` in `sm` size
+- Corrected `sd-radio-button` heights when used inside `sd-radio-group`
+- Fixed error message text color in `sd-radio` and `sd-switch`
+- Fixed `sd-step` tail color on hover
+- Fixed gradient variant opacities in `sd-teaser-media`
+- - Add `deprecated`attribute to indicate deprecated css variables

packages/components/src/components/accordion-group/accordion-group.ts

@@ -15,6 +15,8 @@ import SolidElement from '../../internal/solid-element';
  * @slot - The default slot where `<sd-accordion>` elements are placed.
  *
  * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --sd-accordion-border-width - The accordion border width.
  */
 @customElement('sd-accordion-group')
 export default class SdAccordionGroup extends SolidElement {

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

@@ -41,11 +41,11 @@ 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.
+ * @cssproperty --sd-accordion__chevron-color-text - This variable is deprecated please use --sd-accordion-color-icon-fill.
  */
 @customElement('sd-accordion')
 export default class SdAccordion extends SolidElement {
@@ -193,7 +193,7 @@ export default class SdAccordion extends SolidElement {
           part="header"
           id="header"
           class=${cx(
-            'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 sd-accordion-color-text relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200'
+            'flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200'
           )}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-controls="content"
@@ -208,7 +208,9 @@ export default class SdAccordion extends SolidElement {
               'w-1 sd-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full'
             )}
           ></div>
-          <slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot>
+          <slot name="summary" part="summary" class="flex flex-auto items-center text-left sd-accordion-color-text"
+            >${this.summary}</slot
+          >
           <span
             part="summary-icon"
             class=${cx(
@@ -245,8 +247,9 @@ export default class SdAccordion extends SolidElement {
         border-block-width: var(--sd-accordion-border-width);
       }
 
-      [part='summary-icon'] {
-        color: var(--sd-accordion__chevron-color-text);
+      /* TODO clean sd-accordion__chevron-color-text variable and replace with sd-accordion-color-icon-fill (breaking change) */
+      [part='summary-icon'] sd-icon {
+        color: rgb(var(--sd-accordion__chevron-color-text, var(--sd-accordion-color-icon-fill)));
       }
     `
   ];

packages/components/src/components/audio/audio.ts

@@ -41,6 +41,10 @@ import type SdRange from '../range/range';
  * @csspart volume - The volume button.
  * @csspart progress-slider - The audio progress slider.
  * @csspart timestamps - The audio timestamps.
+ *
+ * @cssproperty --sd-audio__slide-bar--inverted-color-background - The background color for the progress slider when the component is inverted.
+ * @cssproperty --sd-audio__track-bar--inverted-color-background - The background color for the active part of the progress slider when the component is inverted.
+ * @cssproperty --sd-audio__timestamp-color-text - This variable is deprecated please use --sd-color-text-neutral-700.
  */
 @customElement('sd-audio')
 export default class SdAudio extends SolidElement {
@@ -556,19 +560,26 @@ export default class SdAudio extends SolidElement {
       :host([inverted]) sd-range::part(thumb) {
         @apply outline-white;
 
-        background-color: rgba(var(--sd-color-border-white, rgba(var(--sd-color-white))));
+        background-color: rgba(var(--sd-color-icon-fill-white, rgba(var(--sd-color-white))));
       }
 
       :host([animated]) sd-range::part(track) {
         @apply bg-transparent;
       }
 
       :host([inverted]:not([animated])) sd-range::part(track) {
-        background-color: rgba(var(--sd-color-border-primary-400, rgba(var(--sd-color-primary-400))));
+        background-color: rgba(
+          var(--sd-audio__slide-bar--inverted-color-background, rgba(var(--sd-color-primary-400)))
+        );
       }
 
       :host([inverted]:not([animated])) sd-range::part(active-track) {
-        background-color: rgba(var(--sd-color-border-white, rgba(var(--sd-color-white))));
+        background-color: rgba(var(--sd-audio__track-bar--inverted-color-background, rgba(var(--sd-color-white))));
+      }
+
+      /* TODO clean sd-audio__timestamp-color-text variable and replace with text-neutral-700 in lines 491 and 496 (breaking change) */
+      .sd-audio__timestamp-color-text {
+        color: rgb(var(--sd-audio__timestamp-color-text, var(--sd-color-text-neutral-700)));
       }
     `
   ];

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,