Card consolidation and updates

[navkaur76]

Task 1 (design + dev):

• Address #3514

Task 2 (design):

Problem:

Current use of accent is confusing. By default it is grey, but purpose of accent bar is to display color.

Should Cards be:

1. Default = no accent, grey border
2. Accent = color accent, grey border

Hoverable? 1) Remove it? (Is it confusing to have hover state but no click? was an MCP requirement) or... 2) Keep it? If hoverable is true, then the accent bar color is only be displayed on hover.

[navkaur76]

26/07 - regroup meeting with Nav, Ben, Darrin, Zhihao + Josh.

• Confirmed card states + characteristics
• Accent display is optional for all variants.
• Rounded corners - some further figma + code work to be done to address the structure. Exploring accent inset within border.

Nav to pick back up figma work on 30/07 after AL. Zhihao has left some comments around component structure in figma, in the meantime.

[origami-z]

Aug 2nd - Code / doc update in Cortado

[origami-z]

Aug 5 - more Figma component work needed to address borderless snap issue

[mark-tate]

Cortado Goal: KIckoff required Ready For Dev by EOS

[navkaur76]

Card token discussion notes:

Requirement (if Card is using selectable tokens):

To add a disabled token for interactable card (so the accent is blue, essentially treating disabled card as an alpha of default card).

Outcome:

Explore using actionable tokens for card, instead of selectable. Reasoning:

• Actionable/background contains colours for all card accent states (apart from a new token that will need adding for “active disabled”).
• Instead of adding action states to accent (which is only treated as a static border + background colour) - we’re saying it is an interactive card, therefore an actionable item. This semantically aligns to actionable tokens.
• Provides continuity with button which is also an actionable item.
• Q: Is Card then considered an actionable or selectable component? A: We can take precedent for this from toggle button group, which uses actionable tokens but is a component you make a selection from. Similarly, we’re saying interactable card is using actionable tokens, but can be considered selectable when used within a group (i.e., selectable pattern). Either way, visually card wouldn’t change and would use actionable tokens across both use cases.
• (Follow up note: does toggle button group also need an active-disabled token?)

We would end up with: Static card, Link card and Interactable card (which covers both “actionable” and “selectable” interactions)

Question: do we want to consider a name change from “Interactable card” to “Actionable card”? We don’t use the term “interactable” elsewhere. OR, do we document what we mean by “interactable” – i.e., Interactable card is both actionable and selectable. This could be added as an entry in the site glossary page.

Other agenda items discussed:

• When wiring up card to category, the category colours will require equivalent disabled tokens
• Figma borderless issue – Nav to first make token updates and then address the borderless behaviour as a secondary problem. Follow up call on this pending.

[pseys]

Had a discussion with Nav today about actionable token use in Card. Nav has set-up time for us to look into this in more detail tomorrow as it's not as straight forward as first thought and we need to review our options.

[origami-z]

Aug 12 - discussed tokens on Friday

[joshwooding]

Aug 14 - Made token updates to card set. Waiting for review from @dplsek @pseys @origami-z + others

[origami-z]

Aug 16 - likely slip to next sprint

[joshwooding]

Aug 20 - Tokens agreed, but need updates to the library. @origami-z to look at the code updates.

[pseys]

The variable accent-background-disabled has been added to the Salt (Next) Style Library. The variable references --palette-accent-disabled

[pseys]

In Next I've added: accent-background-disabled that points to an existing palette token of --palette-accent-disabled

In Legacy we need to also add --palette-accent-disabled which points to --salt-color-blue-500-fade-background – It needs to be 'accent-disabled' because --palette-accent-background-disabled has previously been deprecated.

[joshwooding]

In Next I've added: accent-background-disabled that points to an existing palette token of --palette-accent-disabled

In Legacy we need to also add --palette-accent-disabled which points to --salt-color-blue-500-fade-background – It needs to be 'accent-disabled' because --palette-accent-background-disabled has previously been deprecated.

We've undeprecated tokens before (tertiary container tokens). Is the a reason accent-disabled is different?

[pseys]

We've undeprecated tokens before (tertiary container tokens). Is the a reason accent-disabled is different?

If we're OK undeprecating the token then let's do that rather than add more to the legacy palette. I'll change what I've done to use --palette-accent-background-disabled

Thanks Josh.

[joshwooding]

We've undeprecated tokens before (tertiary container tokens). Is the a reason accent-disabled is different?

If we're OK undeprecating the token then let's do that rather than add more to the legacy palette. I'll change what I've done to use --palette-accent-background-disabled

Thanks Josh.

Worthing confirming with @origami-z but we've done it before so we have precedence

[origami-z]

if that's the right naming, let's undeprecate i guess

[origami-z]

Aug 28 - Token used is blocked by Button update (extend a sprint)

[mark-tate]

Espresso Goal to be released by September 13th