fix(ui): align frontend with Telekom Scale design tokens by MaxRink · Pull Request #727 · telekom/k8s-breakglass

MaxRink · 2026-05-17T12:47:38Z

Summary

Replace 103+ hardcoded font-size values across 26 Vue files with var(--telekom-text-style-*) tokens
Replace all hardcoded transitions with var(--telekom-motion-*) tokens (App.vue, AutoLogoutWarning, ClusterSelectGrid, CountdownTimer, DebugPanel, DebugSessionCard, PendingApprovalsView, SessionBrowser)
Replace all hardcoded spacing in ClusterSelectGrid/BindingOptionsGrid with --space-* tokens
Replace hardcoded rgba(226, 0, 116, 0.15) with color-mix(in srgb, var(--telekom-color-primary-standard) 15%, transparent)
Add z-index token scale (--z-header through --z-debug-panel) and apply across all components
Keep neutral/OSS primary purple intact; Telekom-branded surfaces use Telekom magenta, while contrast overrides remain brand-independent
Add CSS :not(:defined) fallback for scale-telekom-header/nav/app-shell when using the neutral/OSS package
Replace all border: dashed -> border: solid for cleaner card/empty-state borders
Reset scale-card::part(base) border to prevent double borders
Remove decorative radial-gradient from #app background
Update design.md (audit score 82->96) and SCALE_DEVIATIONS.md (+3 new deviations)

Supersedes #719

Test plan

vue-tsc --noEmit passes (verified locally)
vite build succeeds (verified locally)
Visual check: light mode - header, nav, cards, buttons, checkboxes all render correctly
Visual check: dark mode - proper contrast, dark header background, magenta accent
Verify neutral/OSS mode: fallback header renders with sticky positioning and nav layout
Verify Telekom-branded mode: Scale Telekom header renders normally (:not(:defined) rules don't apply)
No remaining hardcoded font-size, transition, or rgba(226 values in components

Generated with Claude Code

github-actions · 2026-05-17T12:48:07Z

⚠️ Deprecation Warning: The deny-licenses option is deprecated for possible removal in the next major release. For more information, see issue 997.

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

github-actions · 2026-05-17T12:48:20Z

Manifest Changes vs v0.1.0-beta.28

base

✅ No changes

debug

✅ No changes

crds

✅ No changes

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

github-actions · 2026-05-17T12:50:44Z

📸 UI Screenshots

Captured 44 screenshots (11 light, 11 dark, 22 high-contrast mode)

📥 Download

View Screenshots Gallery - Download the ui-screenshots artifact
View Playwright Report - Download the playwright-report artifact

Pages Captured

Page	Light	Dark	High Contrast
Home	✅	✅	✅
Session Browser	✅	✅	✅
Pending Approvals	✅	✅	✅
My Requests	✅	✅	✅
Session Review	✅	✅	✅
Debug Sessions	✅	✅	✅
Create Debug Session	✅	✅	✅
404 Not Found	✅	✅	✅
Mobile Views	✅	✅	✅
Tablet Views	✅	✅	✅

Screenshots are generated automatically on each PR that modifies frontend code.

codecov-commenter · 2026-05-17T12:51:01Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.28%. Comparing base (c871103) to head (93defa7).

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #727   +/-   ##
=======================================
  Coverage   69.28%   69.28%           
=======================================
  Files         160      160           
  Lines       33830    33830           
=======================================
  Hits        23438    23438           
  Misses       8851     8851           
  Partials     1541     1541

Flag	Coverage Δ
cli	`62.84% <ø> (ø)`
controller	`71.76% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 35 out of 35 changed files in this pull request and generated 11 comments.

Copilot

Pull request overview

Copilot reviewed 35 out of 35 changed files in this pull request and generated 5 comments.

Copilot

Pull request overview

Copilot reviewed 35 out of 35 changed files in this pull request and generated 4 comments.

Copilot

Pull request overview

Copilot reviewed 35 out of 35 changed files in this pull request and generated 2 comments.

 .loading-state--small .loading-state__message {
-  font-size: 0.875rem;
+  font: var(--telekom-text-style-caption);
 }


+              if curl -skf --connect-timeout 5 --max-time 10 "$url/realms/master" > /dev/null 2>&1; then
+                return 0
+              fi
+              sleep 1
+            done


Copilot

Pull request overview

Copilot reviewed 36 out of 36 changed files in this pull request and generated no new comments.

Copilot

⚠️ Not ready to approve

It introduces an accessibility regression by removing the <main> landmark for the skip-link target in frontend/src/App.vue.

Copilot's findings

Files reviewed: 36/36 changed files
Comments generated: 1

Note

Your feedback helps us improve the quality of this feature.
Please use 👍 or 👎 to tell us whether this assessment is correct.

+      <div id="main" class="app-container">
        <div v-if="!authenticated" class="center login-gate">


Copilot

Pull request overview

Copilot reviewed 36 out of 36 changed files in this pull request and generated 1 comment.

Replace all hardcoded CSS values (103+ font-sizes, transitions, spacing, z-index, rgba colors) with Scale design tokens across 33 files. Override neutral theme purple (#5300ff) with Telekom magenta (#e20074) via runtime style injection. Add fallback header/nav layout for OSS/neutral variant where Scale Telekom shell components aren't registered. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…nize remaining hardcodes - Remove runtime magenta (#e20074) injection for neutral/OSS theme — the neutral flavour is intentionally unbranded and should keep Scale's default purple primary (#5300ff) - Scope branded-only overrides (primary button, active nav link) to :not([data-ui-flavour="oss"]):not([data-ui-flavour="neutral"]) - Replace custom-styled 404 CTA link with <scale-button variant="primary"> to fix color-contrast a11y violation in dark/HC-dark modes - Remove dead :root primary color override from base.css (Scale CSS loads dynamically and overwrites it) - Replace all remaining hardcoded rgba() colors with Scale functional tokens and color-mix(): debug panel, SessionConfigForm constraint tags - Replace all remaining hardcoded px spacing (gap, margin, padding) with --space-* and --scl-spacing-* tokens across 6 component files - Update SCALE_DEVIATIONS.md and design.md to reflect neutral theme intent and completed remediation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Signed-off-by: Maximilian Rink <maximilian.rink@telekom.de>

Copilot

Pull request overview

Copilot reviewed 35 out of 35 changed files in this pull request and generated 2 comments.

Copilot

Pull request overview

Copilot reviewed 36 out of 36 changed files in this pull request and generated 1 comment.

-| Token coverage — z-index | 1 hardcoded `z-index: 99` | 9/10 |
-| Naming consistency | Minor `--space-*` vs `--stack-gap-*` overlap | 8/10 |
+| Token coverage — colors | 0 hardcoded colors; all rgba replaced with functional tokens or `color-mix()` | 10/10 |
+| Token coverage — spacing | 0 hardcoded px gaps/margins/padding; all use `--space-*` or `--scl-spacing-*` | 10/10 |


Copilot AI review requested due to automatic review settings May 17, 2026 12:47

MaxRink requested a review from a team as a code owner May 17, 2026 12:47

github-actions Bot added frontend size/L labels May 17, 2026

Copilot started reviewing on behalf of MaxRink May 17, 2026 12:48 View session

Copilot AI reviewed May 17, 2026

Copilot AI review requested due to automatic review settings May 18, 2026 10:55

Copilot started reviewing on behalf of MaxRink May 18, 2026 10:56 View session

Copilot AI reviewed May 18, 2026

MaxRink force-pushed the ui-scale-redesign branch from 37cd4ff to c6c166b Compare June 7, 2026 16:04

Copilot AI review requested due to automatic review settings June 7, 2026 20:31

github-actions Bot added the ci label Jun 7, 2026

Copilot started reviewing on behalf of MaxRink June 7, 2026 20:31 View session

Copilot AI reviewed Jun 7, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 8, 2026 13:17

Copilot started reviewing on behalf of MaxRink June 8, 2026 13:18 View session

Copilot AI reviewed Jun 8, 2026

View reviewed changes

Comment thread frontend/src/views/NotFoundView.vue Outdated

Comment thread frontend/tests/unit/views/NotFoundView.spec.ts

Comment thread frontend/src/assets/base.css

Comment thread frontend/src/assets/base.css Outdated

Comment thread .github/workflows/ci.yml Outdated

Copilot AI review requested due to automatic review settings June 8, 2026 13:51

Copilot started reviewing on behalf of MaxRink June 8, 2026 13:52 View session

Copilot AI reviewed Jun 8, 2026

View reviewed changes

Comment thread frontend/src/views/NotFoundView.vue

Comment thread frontend/src/views/NotFoundView.vue

Comment thread frontend/design.md

Comment thread frontend/src/views/SessionErrorView.vue Outdated

Copilot AI review requested due to automatic review settings June 9, 2026 22:20

MaxRink force-pushed the ui-scale-redesign branch from 93da552 to 694b1d0 Compare June 9, 2026 22:20

Copilot started reviewing on behalf of MaxRink June 9, 2026 22:20 View session

Copilot AI reviewed Jun 9, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 10, 2026 00:41

Copilot started reviewing on behalf of MaxRink June 10, 2026 00:41 View session

Copilot AI reviewed Jun 10, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings June 16, 2026 09:59

MaxRink force-pushed the ui-scale-redesign branch from b02a9e8 to c0a319f Compare June 16, 2026 09:59

Copilot started reviewing on behalf of MaxRink June 16, 2026 10:00 View session

Copilot AI reviewed Jun 16, 2026

View reviewed changes

Comment thread frontend/src/App.vue Outdated

Comment on lines 531 to 532

<div id="main" class="app-container">

<div v-if="!authenticated" class="center login-gate">

Copilot AI review requested due to automatic review settings June 19, 2026 20:55

MaxRink force-pushed the ui-scale-redesign branch from 6d88688 to 43c7574 Compare June 19, 2026 20:55

Copilot started reviewing on behalf of MaxRink June 19, 2026 20:55 View session

Copilot AI reviewed Jun 19, 2026

View reviewed changes

Comment thread frontend/src/components/common/LoadingState.vue

MaxRink and others added 11 commits June 20, 2026 02:22

style(ui): format SessionConfigForm color-mix values for Prettier

7591f10

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ci: recover keycloak port-forward before ui e2e

8506c84

fix(ui): address scale redesign review findings

4f1f540

fix(ui): expose not-found dashboard action as link

b6bd79a

fix(ui): address scale review follow-ups

e3ec18e

fix(ui): improve not-found CTA contrast

f2dd9e6

fix(ui): resolve not-found a11y review

abaceeb

fix(ci): remove trailing whitespace in keycloak wait

4a3bdab

fix(ci): extend e2e job timeouts

05ae9ad

Signed-off-by: Maximilian Rink <maximilian.rink@telekom.de>

Copilot AI review requested due to automatic review settings June 20, 2026 00:22

MaxRink force-pushed the ui-scale-redesign branch from 64be824 to 05ae9ad Compare June 20, 2026 00:22

Copilot started reviewing on behalf of MaxRink June 20, 2026 00:23 View session

Copilot AI reviewed Jun 20, 2026

View reviewed changes

Comment thread frontend/tests/unit/views/NotFoundView.spec.ts

Comment thread frontend/src/components/common/LoadingState.vue

MaxRink added 2 commits June 20, 2026 02:36

test: tighten loading and navigation assertions

f201e67

fix: tighten navigation and refresh button tests

93defa7

Copilot AI review requested due to automatic review settings June 20, 2026 14:28

Copilot started reviewing on behalf of MaxRink June 20, 2026 14:28 View session

Copilot AI reviewed Jun 20, 2026

View reviewed changes

fix: correct design audit and keycloak wait

4a183ae

		<div id="main" class="app-container">
		<div v-if="!authenticated" class="center login-gate">

Conversation

MaxRink commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Uh oh!

github-actions Bot commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency Review

Scanned Files

Uh oh!

github-actions Bot commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Manifest Changes vs v0.1.0-beta.28

base

debug

crds

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📸 UI Screenshots

📥 Download

Pages Captured

Uh oh!

codecov-commenter commented May 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

⚠️ Not ready to approve

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

MaxRink commented May 17, 2026 •

edited

Loading

github-actions Bot commented May 17, 2026 •

edited

Loading

github-actions Bot commented May 17, 2026 •

edited

Loading

github-actions Bot commented May 17, 2026 •

edited

Loading

codecov-commenter commented May 17, 2026 •

edited

Loading