[Task](ui): use global border color variable for `Card` component

[franzheidl]

Use global border color variable for Card component

Overview

Problem Statement

Currently, Card unnecessarily uses a local, component-scoped variable for its border color which references the same colors as the global default border. In order to consolidate our design systems, design tokens and variables we should use the global default border color variable.

There may be more components affected, for finding and consolidating these we have this follow-up: #1333 .

Context

Ongoing development and enhancement of our Design System, tokenization of our Design System.

Details

Implementation

Currently, Card uses --border-color-theme-card-default which references --color-card-border-default which again refrences --color-juno-grey-light-7(Light Theme) and --color-juno-grey-blue-3 (Dark Theme) respectively.

The design intent however is to bind the border color of Card to our global border-color, which is not reflected in the current implementation: Should we ever change our global border color --color-border-default, the change would not be reflected in the Card component with our current implementation.

In order to bind the border color of Card, the correct assignment chain would be: --border-color-theme-card-default -> --color-card-border-default -> --color-border-default.

Acceptance Criteria

• Card uses the assignment chain as described above
• The resulting colors are the same as is, we expect no visual change