feat: implement bbbank theme (#2994)

Author: auroraVasconcelos

.changeset/cool-phones-search.md

@@ -0,0 +1,7 @@
+---
+'@solid-design-system/styles': minor
+---
+
+Add BBBank theme.
+- New token `--sd-form-control--disabled-color-text` in `sd-interactive` allows you to change the text color when disabled.
+

.changeset/new-goats-walk.md

@@ -0,0 +1,6 @@
+---
+'@solid-design-system/docs': minor
+---
+
+Add BBBank theme.
+- Fix `sd-map-marker` icon color.

.changeset/silly-deserts-grab.md

@@ -0,0 +1,26 @@
+---
+'@solid-design-system/tokens': minor
+---
+
+New tokens added:
+    - --sd-accordion--hover-color-background
+    - --sd-accordion--open-color-text
+    - --sd-accordion-color-border
+    - --sd-breadcrumb--current-color-text
+    - --sd-button--primary--active-color-background
+    - --sd-button--primary--disabled-color-background
+    - --sd-button--secondary--active-color-border
+    - --sd-button--secondary--default-color-border
+    - --sd-button--secondary--disabled-color-border
+    - --sd-button--secondary--hover-color-border
+    - --sd-button--secondary--hover-color-text
+    - --sd-button--tertiary--hover-color-text
+    - --sd-form-control--disabled-color-text
+    - --sd-form-control--hover-color-background
+    - --sd-form-control--read-only-color-background
+    - --sd-radio__checked-height
+    - --sd-radio__checked-width
+    - --sd-radio--checked--disabled__icon-color-background
+    - --sd-switch--unchecked--hover-color-background
+    - --sd-switch-border-width
+    - --sd-tab--disabled-color-text

.changeset/upset-ads-knock.md

@@ -0,0 +1,30 @@
+---
+'@solid-design-system/components': minor
+---
+
+Add BBBank theme.
+- New token `--sd-accordion--hover-color-background` in `sd-accordion` allows you to change the accordion background color on hover.
+- New token `--sd-accordion--open-color-text` in `sd-accordion` allows you to change the accordion summary text color when the accordion is open.
+- New token `--sd-accordion-color-border` in `sd-accordion` allows you to change the accordion item divider color.
+- New token `--sd-breadcrumb--current-color-text` in `sd-breadcrumb-item` allows you to change the `current` breadcrumb text color.
+- New token `--sd-button--primary--active-color-background` in `sd-button` allows you to change the background color of primary buttons when active.
+- New token `--sd-button--primary--disabled-color-background` in `sd-button` allows you to change the background color of disabled primary buttons.
+- New token `--sd-button--secondary--default-color-border` in `sd-button` allows you to change the border color of secondary buttons.
+- New token `--sd-button--secondary--hover-color-border` in `sd-button` allows you to change the border color of secondary buttons on hover.
+- New token `--sd-button--secondary--hover-color-text` in `sd-button` allows you to change the text color of secondary buttons on hover.
+- New token `--sd-button--secondary--active-color-border` in `sd-button` allows you to change the border color of secondary buttons when active.
+- New token `--sd-button--secondary--disabled-color-border` in `sd-button` allows you to change the border color of secondary buttons when disabled.
+- New token `--sd-button--tertiary--hover-color-text` in `sd-button` allows you to change the text color of tertiary buttons on hover.
+- New token `--sd-form-control--hover-color-background` in `sd-combobox`, `sd-datepicker`, `sd-input`, `sd-select`, and `sd-textarea` allows you to change the component background color on hover.
+- New token `--sd-form-control--read-only-color-background` in `sd-datepicker`, `sd-input`, and `sd-textarea` allows you to change the component background color when using the `read-only` property.
+- New token `--sd-radio__checked-height` and `--sd-radio__checked-width` in `sd-radio` allow you to change the height or width, respectively, of the radio checked indicator.
+- New token `--sd-radio--checked--disabled__icon-color-background` in `sd-radio` allows you to change the radio indicator background color when disabled.
+- New token `--sd-switch--unchecked--hover-color-background` in `sd-switch` allows you to change the switch background color on hover when unchecked.
+- New token `--sd-switch-border-width` in `sd-switch` allows you to change the switch border width.
+- New token `--sd-tab--disabled-color-text` in `sd-tab` allows you to change the disabled tab text color.
+- Fix `sd-carousel` chevron color.
+- Fix `sd-tag` disabled text color.
+- Fix `floating-label` text color in `sd-checkbox`, `sd-combobox`, `sd-datepicker`, `sd-input`, `sd-select`, and `sd-textarea`.
+- Add `--sd-choice-control-font-weight` to `sd-navigation-item`, allowing you to change the default font weight.
+- Fix icon accent color in the BBBank theme.
+

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

@@ -45,6 +45,10 @@ import SolidElement from '../../internal/solid-element';
  * @cssproperty --sd-accordion-padding-block - The accordion vertical padding value.
  * @cssproperty --sd-accordion__indicator-color - The accordion indicator color.
  * @cssproperty --sd-accordion-color-icon-fill - The accordion icon color.
+ * @cssproperty --sd-accordion--hover-color-background - The accordion hover background color.
+ * @cssproperty --sd-accordion--open-color-text - The accordion color text when open.
+ * @cssproperty --sd-accordion-color-border - The accordion color border.
+ *
  * @cssproperty --sd-accordion__chevron-color-text - This custom property is deprecated. Use `--sd-accordion-color-icon-fill`instead.
  */
 @customElement('sd-accordion')
@@ -188,12 +192,12 @@ export default class SdAccordion extends SolidElement {
 
   render() {
     return html`
-      <details part="base" class="border-neutral-400">
+      <details part="base">
         <summary
           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 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:sd-accordion--hover-color-background'
           )}
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-controls="content"
@@ -208,7 +212,13 @@ 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 sd-accordion-color-text"
+          <slot
+            name="summary"
+            part="summary"
+            class=${cx(
+              this.open ? 'sd-accordion--open-color-text' : 'sd-accordion-color-text',
+              'flex flex-auto items-center text-left'
+            )}
             >${this.summary}</slot
           >
           <span
@@ -244,6 +254,7 @@ export default class SdAccordion extends SolidElement {
       }
 
       [part='base'] {
+        border-color: rgba(var(--sd-accordion-color-border, var(--sd-accordion-color-text)));
         border-block-width: var(--sd-accordion-border-width);
       }
 

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

@@ -44,6 +44,7 @@ import type SdRange from '../range/range';
  *
  * @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 custom property is deprecated. Use `--sd-color-text-neutral-700` instead.
  */
 @customElement('sd-audio')

packages/components/src/components/breadcrumb-item/breadcrumb-item.ts

@@ -18,6 +18,8 @@ import SolidElement from '../../internal/solid-element';
  *
  * @csspart base - The component's base wrapper.
  *
+ * @cssproperty --sd-breadcrumb--current-color-text - The text color for the current breadcrumb.
+ *
  */
 @customElement('sd-breadcrumb-item')
 export default class SdBreadcrumbItem extends SolidElement {
@@ -80,7 +82,7 @@ export default class SdBreadcrumbItem extends SolidElement {
       }
 
       :host([current]) sd-link::part(base) {
-        @apply text-neutral-700;
+        @apply sd-breadcrumb--current-color-text;
       }
 
       :host([current]) sd-link::part(label) {