clr-ui shim issues

[ashleyryan]

Describe the bug

Some of the ng components aren't styled correctly with the shim.

https://6282ae49fdaf3a0c394b6c68--clr-angular-demo.netlify.app/

Components

Accordion (light mode)

• clr-accordion-header background color (--clr-accordion-header-background-color) should be --cds-alias-object-container-background-tint, not --cds-alias-object-app-background.
• clr-accordion-header text color (--clr-accordion-text-color) should be --cds-alias-object-interaction-color
• clr-accordion-title font-weight? Core doesn't have the same concept of a title vs description that ng does
• Spacing between caret and title (will require ng change to add CSS var)

Alert (light mode)

• danger alert font color should be --cds-global-typography-color-400 not --cds-global-typography-color-500
• warning font color --clr-alert-warning-font-color should be --cds-global-color-construction-900 not var(--cds-global-color-black)
• info font color --clr-alert-info-font-color should be --cds-global-typography-color-400 not --cds-global-typography-color-500
• success font color --clr-alert-success-font-color should be --cds-global-typography-color-400 not --cds-global-typography-color-500

Badge

• Default badge color doesn't have a CSS variable to change
• Orange badge color --clr-badge-orange-bg-color: should be --cds-global-color-tangerine-400 not ochre
• Blue badge color --clr-badge-light-blue-bg-colo should be blue 300, not 400

Card

• Drop Shadow is different in ng vs Core (not controllable by CSS var)

Card (dark mode)

• Card Content bottom border should match the horizontal divider color in Core (not controllable by CSS var)

Forms

• label colors (--clr-forms-label-color) should use --cds-global-typography-color-400

Labels (tags)

• Purple border color should be --cds-global-color-violet-600 not 500

Signposts

• Drop Shadow is different in NG vs Core
• Border Color --clr-signpost-content-border-color should be --cds-alias-object-border-color

Vertical Nav

• Container background color is blue instead of white(ish). Should be --cds-alias-object-container-background
• Icons when collapsed are left aligned in Core and center-aligned in Angular

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.