feat(web-stack): update normal colors to info and add brand colors

[OlivierFL]

Description

Following colors naming update in the design system, CSS variables have been updated accordingly:

• rename --color-normal-* CSS variables to --color-info-*
• add new --color-brand-* CSS variables

Checklist

• Commit
  • Title follows commit conventions
  • Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
  • If bug fix, add Introduced by
• Changelog
  • If visible by XOA users, add changelog entry
  • Update "Packages to release" in CHANGELOG.unreleased.md
• PR
  • If UI changes, add screenshots
  • If not finished or not tested, open as Draft

Review process

This 2-passes review process aims to:

• develop skills of junior reviewers
• limit the workload for senior reviewers
• limit the number of unnecessary changes by the author

1. The author creates a PR.
2. Review process:
   1. The author assigns the junior reviewer.
   2. The junior reviewer conducts their review:
      • Resolves their comments if they are addressed.
      • Adds comments if necessary or approves the PR.
   3. The junior reviewer assigns the senior reviewer.
   4. The senior reviewer conducts their review:
      • If there are no unresolved comments on the PR → merge.
      • Otherwise, we continue with 3.
3. The author responds to comments and/or makes corrections, and we go back to 2.

Notes:

1. The author can request a review at any time, even if the PR is still a Draft.
2. In theory, there should not be more than one reviewer at a time.
3. The author should not make any changes:
   • When a reviewer is assigned.
   • Between the junior and senior reviews.

[MathieuRA]

Please add the info accent for components that use it and are on their latest version. For others, as we need to update them, I think these changes can be made at that time.

[MathieuRA]

In the DS, brand-txt-base for dark mode is: 6B63BF.
Probably an error in the DS?

[MathieuRA]

Suggested change

	--color-brand-background-selected: color-mix(in srgb, #000000 70%, var(--color-brand-txt-base));
	--color-brand-background-hover: color-mix(in srgb, #000000 60%, var(--color-brand-txt-base));
	--color-brand-background-active: color-mix(in srgb, #000000 50%, var(--color-brand-txt-base));
	--color-brand-background-selected: color-mix(in srgb, #000000 90%, var(--color-brand-item-base));
	--color-brand-background-hover: color-mix(in srgb, #000000 80%, var(--color-brand-item-base));
	--color-brand-background-active: color-mix(in srgb, #000000 70%, var(--color-brand-item-base));

[MathieuRA]

In the DS, brand-txt-base for dark mode is: D2CEFF.
Probably an error in the DS?

[MathieuRA]

Suggested change

	--color-info-background-selected: color-mix(in srgb, #000000 70%, var(--color-info-txt-base));
	--color-info-background-hover: color-mix(in srgb, #000000 60%, var(--color-info-txt-base));
	--color-info-background-active: color-mix(in srgb, #000000 50%, var(--color-info-txt-base));
	--color-info-background-selected: color-mix(in srgb, #000000 70%, var(--color-info-item-base));
	--color-info-background-hover: color-mix(in srgb, #000000 60%, var(--color-info-item-base));
	--color-info-background-active: color-mix(in srgb, #000000 50%, var(--color-info-item-base));

[MathieuRA]

the accent info has been added in the DS for this component.
And that makes sense since we now have brand and info as color possibilities.