[Task](ui): find, clarify and consolidate global border color variables

[franzheidl]

Find, Clarify and Consolidate Global Border Color Variables

This is a follow-up to #1332 . If #1332 is not done yet, it can be done in scope of this ticket as well.

Overview

Problem Statement

Currently, there may be cases where we use a local, component-scoped variable for defining a border color for a component that exactly matches our global default border color --color-border-default (as introduced with either #1237 or #1172), but never maps to our global border color variable in the assignment chain.

Task

In order to consolidate our variables and prepare for better tokenization of the system we need to find these components, and map these to our global default border color if that expresses the design intent.

Goal

Whenever a change is made to the global border color, all components that should use the global border color should reflect that change.

Context

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

Details

First, find all component border color variables in theme.css and global.css that reference the colors used for global default border in the respective modes of our Juno theme in a hardcoded manner, without ever referencing our global varibale in the assignment chain, thus effecgtively decoupling their border color from the global border color variable / token:

Light Theme.	Dark Theme
--color-juno-grey-light-7	--color-juno-grey-blue-3

Create a list of affected components if any – if none are found, this issue can be commented on and closed now, and no further action is needed.

Based on the list, we can then look into whether we want to use the global variable for any given border directly, or use a specific component token to reference the global one, and make that decision for each individual affected component.

Clarification

Get in touch with design team (Martin) and clarify for each affected component whether using the global default color reflects design intent.

Implementation

Once clarified, use --border-color-theme-default (-> --color-border-default) for each component where the design team confirmed positively that using the global default border color would reflect their desing intent. Delete respective local, component-scoped variables that hardcode the respective border colors. Whether we reference the global color directly or via a component token is a decis0on we will take on a case-by-case basis for all affected components.

Acceptance Criteria

• All components using the above mentioned border color reference the global border color variable at the appropriate point in their assignment chain, if dependency on the global default border color expresses design intent
• All previously used local, component-scoped border color variables are removed or reference the global border color variable
• If [Task](ui): use global border color variable for Card component #1332 is not closed yet, it can be closed with this ticket.