refactor(components): use semantic design tokens

[dpellier]

First attempt to use semantic tokens on components (here: accordion, badge, breadcrumb, button, card and link).

TBD:
Define what we actually expose as component dedicated CSS var as theme ones can be override specifically (see button example)
=> at least expose all computable values as a SCSS variable and a CSS var (referencing the SCSS var), this way it is easy to override locally a computed value, ex:

// If we set the theme value directly, it is hard to override
.some-ods-component {
  border-radius: calc(var(--ods-theme-border-radius) / 2);
}
.custom-css {
  --ods-theme-border-radius: <value that needs to take into account the computation>
}

// By exposing the var, it is way more easy
.some-ods-component {
  --ods-component-border-radius: calc(var(--ods-theme-border-radius) / 2);
  border-radius: var(--ods-component-border-radius);
}
.custom-css {
  --ods-component-border-radius: <actual value>
}

Accordion:

• border-color token for open / closed [hover] state

Badge:

• which tokens for all the colors combination? each are very specific/uniq
• then remove all local CSS color variables

Button:

• actual paddings are 7, 5, 5 => changing to 8, 6, 4 (or 8, 6, 6)

Card:

• all border-color are -200, which match none of the border colors set for now, do we replace it to use defined ones or do we add some "presentational" colors for each color type (border + background + text)?
  Code:
• do we add primary/secondary color token or we try adding a syntax highlighter before that?
• depending on that, how de ow handle copy button active/hover color?

Combobox:

• ComboboxControl => check Tag color
• ComboboxOption new item border bottom color is neutral-100 => no associated token + same for Group separator
• ComboboxOption new item text color is primary-500 => no associated token
• Update combobox option under group padding to 24px (same as Select)

Datepicker:

• Why is the content border red when invalid and not on select and combobox?
• Which tokens for selected day/month/year (+focus/hover)?
• Which tokens for today day?

Divider:

• Which tokens for primary & neutral?

Drawer:

• Do we try to normalize box-shadow into one token?
• Set max-size with horizontal/vertical padding vars?
  (-still need to do overlay z-indexes)

FileUpload:

• Feels really weird to use --ods-theme-text-color-success-ghost to define default success text color
• Dragging tokens? (see also Range?)
• Dragzone icon token?

Input:

• update "padding: 3px 8px;" to "padding: 4px 8px;"

Message:

• need a crappy fix on icon due to the custom font
• TODO tokens for all colors + custom close button color on primary (see also Modal)

Meter:

• Token for track colors (see how to merge with progress-bar and range)

Modal:

• TODO tokens for all colors + custom close button color on primary (see also Message)
  (-still need to do overlay z-indexes)

Pagination:

• Which tokens for selected page?

ProgressBar:

• Apply same as Meter/Range

Range:

• Apply same as Meter/ProgressBar
• Dragging tokens? (see also FileUpload?)
• Toggle color (check if match with Toggle)

Select:

• Need normalization on merged selection color (and disabled)
• Normalize toggle icon disabled color from -600 to -500 (same as text)
  (-still need to do overlay z-indexes)

Skeleton:

• Which color tokens?

Spinner:

• Which color tokens?

Switch:

• TODO all

Table:

• Which tokens for all colors?

Tabs:

• Token for border color + selected state
• Why is disabled border color -100 instead of -200?

Tags:

• Color tokens

Text:

• Move font sizes to rem?

Toggle:

• Label colors
• Toggle color (check if match with Range)

Treeview:

• Color tokens match overlay items, but weird semantic