feat(accordion): add tokens/update shim (#575)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: N/A

## What is the new behavior?

## Does this PR introduce a breaking change?

- [ ] Yes
- [ ] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <noreply@github.com>

projects/angular/src/accordion/STYLES.md

@@ -2,28 +2,39 @@
 
 ## CSS Custom Properties
 
-| CSS Custom Property                            | Description                                                          |
-| ---------------------------------------------- | -------------------------------------------------------------------- |
-| --clr-accordion-text-color                     | Text color of the accordion component.                               |
-| --clr-accordion-active-background-color        | Background color of the active accordion panel.                      |
-| --clr-accordion-content-background-color       | Background color of the accordion content area.                      |
-| --clr-accordion-header-background-color        | Background color of the accordion header.                            |
-| --clr-accordion-header-hover-background-color  | Background color of the accordion header on hover.                   |
-| --clr-accordion-header-font-size               | Font size of the accordion header                                    |
-| --clr-accordion-header-button-font-size        | Font size of the accordion header button                             |
-| --clr-accordion-title-font-weight              | Font weight of the accordion title                                   |
-| --clr-accordion-title-font-size                | Font size of the accordion title                                     |
-| --clr-accordion-error-color                    | Color representing an error state in the accordion.                  |
-| --clr-accordion-complete-color                 | Color representing a completed state in the accordion.               |
-| --clr-accordion-border-color                   | Color of the accordion border.                                       |
-| --clr-accordion-border-radius                  | Border radius of the accordion.                                      |
-| --clr-accordion-border-left-color              | Color of the left border in the accordion.                           |
-| --clr-accordion-border-left-width              | Width of the left border in the accordion.                           |
-| --clr-accordion-border-left-color-complete     | Color of the left border in the accordion for the complete state.    |
-| --clr-accordion-border-left-color-error        | Color of the left border in the accordion for the error state.       |
-| --clr-accordion-header-left-indicator          | Left indicator style for the accordion header.                       |
-| --clr-accordion-header-left-complete-indicator | Left indicator style for the accordion header in the complete state. |
-| --clr-accordion-header-left-error-indicator    | Left indicator style for the accordion header in the error state.    |
+| CSS Custom Property                              | Description                                                          |
+| ------------------------------------------------ | -------------------------------------------------------------------- |
+| --clr-accordion-text-color                       | Text color of the accordion component.                               |
+| --clr-accordion-text-color-hover                 | Text color of the accordion header when hovered.                     |
+| --clr-accordion-text-color-active                | Text color of the accordion header when active.                      |
+| --clr-accordion-text-color-selected              | Text color of the accordion header when selected.                    |
+| --clr-accordion-active-background-color          | Background color of the active accordion panel.                      |
+| --clr-accordion-content-background-color         | Background color of the accordion content area.                      |
+| --clr-accordion-content-color                    | Color of the text in the accordion content area.                     |
+| --clr-accordion-content-font-size                | Font size of the text in the accordion content area.                 |
+| --clr-accordion-header-background-color          | Background color of the accordion header.                            |
+| --clr-accordion-header-disabled-background-color | Background color of the accordion header when disabled.              |
+| --clr-accordion-header-hover-background-color    | Background color of the accordion header on hover.                   |
+| --clr-accordion-header-active-background-color   | Background color of the accordion header when active.                |
+| --clr-accordion-header-font-size                 | Font size of the accordion header                                    |
+| --clr-accordion-header-button-font-size          | Font size of the accordion header button                             |
+| --clr-accordion-header-button-padding            | Padding surrounded button used for the header.                       |
+| --clr-accordion-title-font-weight                | Font weight of the accordion title                                   |
+| --clr-accordion-title-font-size                  | Font size of the accordion title                                     |
+| --clr-accordion-error-color                      | Color representing an error state in the accordion.                  |
+| --clr-accordion-complete-color                   | Color representing a completed state in the accordion.               |
+| --clr-accordion-border-color                     | Color of the accordion border.                                       |
+| --clr-accordion-border-radius                    | Border radius of the accordion.                                      |
+| --clr-accordion-border-left-color                | Color of the left border in the accordion.                           |
+| --clr-accordion-border-left-width                | Width of the left border in the accordion.                           |
+| --clr-accordion-border-left-color-complete       | Color of the left border in the accordion for the complete state.    |
+| --clr-accordion-border-left-color-error          | Color of the left border in the accordion for the error state.       |
+| --clr-accordion-header-left-indicator            | Left indicator style for the accordion header.                       |
+| --clr-accordion-header-left-complete-indicator   | Left indicator style for the accordion header in the complete state. |
+| --clr-accordion-header-left-error-indicator      | Left indicator style for the accordion header in the error state.    |
+| --clr-accordion-header-button-line-height        | Line height of the button used for the header.                       |
+| --clr-accordion-header-gap                       | Gap between the icon and title text in the accordion header.         |
+| --clr-accordion-status-icon-width                | Width of the icon used for the accordion arrow.                      |
 
 ## CSS Classes
 
@@ -47,5 +58,6 @@
 | clr-accordion-panel-open             | Open or expanded accordion panel.                     |
 | clr-accordion-panel-complete         | Complete state of an accordion panel.                 |
 | clr-accordion-panel-error            | Error state of an accordion panel.                    |
+| clr-accordion-panel-disabled         | Disabled state of an accordion panel.                 |
 | clr-stepper-forms                    | Stepper forms mode for the accordion.                 |
 | clr-step-button                      | Step button within the accordion.                     |

projects/angular/src/accordion/_accordion.clarity.scss

@@ -61,13 +61,72 @@
     text-align: left;
 
     &:hover {
+      @include mixins.css-var(
+        color,
+        clr-accordion-text-color-hover,
+        accordion-variables.$clr-accordion-text-color-hover,
+        variables.$clr-use-custom-properties
+      );
       @include mixins.css-var(
         background-color,
         clr-accordion-header-hover-background-color,
         accordion-variables.$clr-accordion-header-hover-background-color,
         variables.$clr-use-custom-properties
       );
     }
+
+    &:active {
+      @include mixins.css-var(
+        color,
+        clr-accordion-text-color-active,
+        accordion-variables.$clr-accordion-text-color-active,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        background-color,
+        clr-accordion-header-active-background-color,
+        accordion-variables.$clr-accordion-header-active-background-color,
+        variables.$clr-use-custom-properties
+      );
+    }
+
+    .clr-accordion-panel-disabled > div > & {
+      @include mixins.css-var(
+        background-color,
+        clr-accordion-header-background-color,
+        accordion-variables.$clr-accordion-header-background-color,
+        variables.$clr-use-custom-properties
+      );
+
+      &:hover,
+      &:active {
+        @include mixins.css-var(
+          background-color,
+          clr-accordion-header-background-color,
+          accordion-variables.$clr-accordion-header-background-color,
+          variables.$clr-use-custom-properties
+        );
+      }
+    }
+
+    .clr-accordion-panel-disabled > .clr-accordion-panel-open > & {
+      @include mixins.css-var(
+        background-color,
+        clr-accordion-header-disabled-background-color,
+        accordion-variables.$clr-accordion-header-disabled-background-color,
+        variables.$clr-use-custom-properties
+      );
+
+      &:hover,
+      &:active {
+        @include mixins.css-var(
+          background-color,
+          clr-accordion-header-disabled-background-color,
+          accordion-variables.$clr-accordion-header-disabled-background-color,
+          variables.$clr-use-custom-properties
+        );
+      }
+    }
   }
 
   .clr-accordion-panel:last-child {
@@ -104,13 +163,8 @@
     background: transparent;
     text-align: left;
     cursor: pointer;
-    @include mixins.css-var(
-      color,
-      clr-accordion-text-color,
-      accordion-variables.$clr-accordion-text-color,
-      variables.$clr-use-custom-properties
-    );
-
+    color: inherit;
+    @include mixins.css-var(gap, clr-accordion-header-gap, 0, variables.$clr-use-custom-properties);
     @media (min-width: accordion-variables.$clr-accordion-responsive-breakpoint) {
       flex-flow: row;
     }
@@ -370,19 +424,52 @@
         variables.$clr_baselineRem_0_5,
         variables.$clr-use-custom-properties
       );
-      padding: variables.$clr_baselineRem_0_25 variables.$clr_baselineRem_0_5;
+      @include mixins.css-var(
+        padding,
+        clr-accordion-header-button-padding,
+        variables.$clr_baselineRem_0_25 variables.$clr_baselineRem_0_5,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        line-height,
+        clr-accordion-header-button-line-height,
+        variables.$clr_baselineRem_1,
+        variables.$clr-use-custom-properties
+      );
     }
 
     .clr-accordion-content {
       padding: 0;
     }
 
     .clr-accordion-inner-content {
-      padding: variables.$clr_baselineRem_0_25 variables.$clr_baselineRem_1_4583;
+      @include mixins.css-var(
+        padding,
+        clr-accordion-content-padding,
+        variables.$clr_baselineRem_0_25 variables.$clr_baselineRem_1_4583,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        color,
+        clr-accordion-content-color,
+        accordion-variables.$clr-accordion-content-color,
+        variables.$clr-use-custom-properties
+      );
+      @include mixins.css-var(
+        font-size,
+        clr-accordion-content-font-size,
+        accordion-variables.$clr-accordion-content-font-size,
+        variables.$clr-use-custom-properties
+      );
     }
 
     .clr-accordion-status {
-      width: variables.$clr_baselineRem_0_8;
+      @include mixins.css-var(
+        width,
+        clr-accordion-status-icon-width,
+        variables.$clr_baselineRem_0_8,
+        variables.$clr-use-custom-properties
+      );
 
       cds-icon,
       clr-icon {

projects/angular/src/accordion/_properties.accordion.scss

@@ -5,22 +5,31 @@
  */
 @use '../utils/mixins';
 @use '../utils/variables/variables.global';
+@use '../utils/variables/variables' as typography-variables;
 @use 'variables.accordion' as accordion-variables;
 
 @include mixins.exports('accordion.properties') {
   @if variables.$clr-use-custom-properties == true {
     :root {
       --clr-accordion-text-color: var(--clr-global-font-color);
+      --clr-accordion-text-color-hover: var(--clr-global-font-color);
+      --clr-accordion-text-color-active: var(--clr-global-font-color);
+      --clr-accordion-text-color-selected: var(--clr-global-font-color);
       --clr-accordion-panel-disabled-color: var(--clr-color-neutral-500);
 
       --clr-accordion-active-background-color: var(--clr-global-selection-color);
       --clr-accordion-content-background-color: var(--clr-color-neutral-0);
 
       --clr-accordion-header-background-color: var(--clr-color-neutral-50);
+      --clr-accordion-header-disabled-background-color: var(--clr-global-selection-color);
       --clr-accordion-header-hover-background-color: var(--clr-color-neutral-200);
+      --clr-accordion-header-active-background-color: var(--clr-color-neutral-200);
       --clr-accordion-header-font-size: #{variables.$clr_baselineRem_0_65};
 
       --clr-accordion-header-button-font-size: #{variables.$clr_baselineRem_0_5};
+      --clr-accordion-header-button-line-height: #{variables.$clr_baselineRem_1};
+      --clr-accordion-header-button-padding: #{variables.$clr_baselineRem_0_25} #{variables.$clr_baselineRem_0_5};
+
       --clr-accordion-title-font-weight: 500;
       --clr-accordion-title-font-size: #{variables.$clr_baselineRem_0_5416};
 
@@ -51,6 +60,12 @@
         0
         0
         var(--clr-accordion-border-left-color-error);
+
+      --clr-accordion-header-gap: 0;
+      --clr-accordion-status-icon-width: #{variables.$clr_baselineRem_0_8};
+
+      --clr-accordion-content-color: #{accordion-variables.$clr-accordion-content-color};
+      --clr-accordion-content-font-size: #{accordion-variables.$clr-accordion-content-font-size};
     }
   }
 }

projects/angular/src/accordion/_variables.accordion.scss

@@ -7,11 +7,16 @@
 @use '../utils/variables/variables';
 
 $clr-accordion-text-color: variables.$clr-global-font-color !default;
+$clr-accordion-text-color-hover: variables.$clr-global-font-color !default;
+$clr-accordion-text-color-active: variables.$clr-global-font-color !default;
+$clr-accordion-text-color-selected: variables.$clr-global-font-color !default;
 $clr-accordion-panel-disabled-color: variables.$clr-color-neutral-500 !default;
 $clr-accordion-active-background-color: variables.$clr-global-selection-color !default;
 $clr-accordion-content-background-color: variables.$clr-color-neutral-0 !default;
 $clr-accordion-header-background-color: variables.$clr-color-neutral-50 !default;
+$clr-accordion-header-disabled-background-color: variables.$clr-color-neutral-200 !default;
 $clr-accordion-header-hover-background-color: variables.$clr-color-neutral-200 !default;
+$clr-accordion-header-active-background-color: variables.$clr-color-neutral-200 !default;
 $clr-accordion-border-left-color: variables.$clr-color-neutral-200 !default;
 $clr-accordion-responsive-breakpoint: map.get(variables.$clr-grid-breakpoints, sm) !default;
 $clr-accordion-error-color: variables.$clr-global-error-color !default;
@@ -22,3 +27,5 @@ $clr-accordion-border-radius: variables.$clr-global-borderradius !default;
 $clr-accordion-border-left-width: variables.$clr_baselineRem_0_25 !default;
 $clr-accordion-border-left-color-complete: $clr-accordion-complete-color !default;
 $clr-accordion-border-left-color-error: $clr-accordion-error-color !default;
+$clr-accordion-content-color: variables.$clr-p1-color !default;
+$clr-accordion-content-font-size: variables.$clr-p1-font-size !default;

projects/angular/src/accordion/accordion-panel.ts

@@ -10,6 +10,7 @@ import {
   Component,
   ContentChildren,
   EventEmitter,
+  HostBinding,
   Input,
   OnChanges,
   OnInit,
@@ -38,7 +39,7 @@ import { panelAnimation } from './utils/animation';
   providers: [IfExpandService],
 })
 export class ClrAccordionPanel implements OnInit, OnChanges {
-  @Input('clrAccordionPanelDisabled') disabled = false;
+  @Input('clrAccordionPanelDisabled') @HostBinding('class.clr-accordion-panel-disabled') disabled = false;
   @Input('clrAccordionPanelOpen') panelOpen = false;
 
   @Output('clrAccordionPanelOpenChange') panelOpenChange = new EventEmitter<boolean>();

projects/angular/src/utils/_theme.dark.clarity.scss

@@ -143,7 +143,9 @@
   $clr-accordion-text-color: color-variables.$clr-color-neutral-0,
   $clr-accordion-panel-disabled-color: color-variables.$clr-color-neutral-600,
   $clr-accordion-active-background-color: variables.$clr-global-selection-color,
+  $clr-accordion-header-active-background-color: variables.$clr-global-selection-color,
   $clr-accordion-header-hover-background-color: variables.$clr-global-selection-color,
+  $clr-accordion-header-disabled-background-color: variables.$clr-global-selection-color,
   $clr-accordion-content-background-color: hsl(198, 28%, 18%),
   $clr-accordion-header-background-color: hsl(201, 30%, 15%),
   $clr-accordion-border-left-color: hsl(202, 30%, 24%),