ENH - align Sky UI with Konsta kitchen sink

frontend/src/components/PhoneLockScreen.contract.test.ts

@@ -0,0 +1,38 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const styles = readFileSync(
+  new URL('../assets/main.css', import.meta.url),
+  'utf8',
+)
+
+describe('PhoneLockScreen notification theme contract', () => {
+  it('uses explicit light and dark notification material tokens', () => {
+    expect(styles).toMatch(
+      /\.lock-screen\s*\{[^}]*--lock-notification-background:\s*rgb\(38 36 40 \/ 76%\)[^}]*--lock-notification-color:\s*#fff/s,
+    )
+    expect(styles).toMatch(
+      /\.phone-app--light \.lock-screen\s*\{[^}]*--lock-notification-background:\s*rgb\(247 247 248 \/ 82%\)[^}]*--lock-notification-color:\s*#111[^}]*--lock-notification-muted:\s*rgb\(0 0 0 \/ 55%\)/s,
+    )
+  })
+
+  it('applies the adaptive tokens to cards, metadata, focus and clear all', () => {
+    expect(styles).toMatch(
+      /\.lock-screen__notification\s*\{[^}]*color:\s*var\(--lock-notification-color\)[^}]*background-color:\s*var\(--lock-notification-background\)[^}]*text-shadow:\s*var\(--lock-notification-text-shadow\)/s,
+    )
+    expect(styles).toMatch(
+      /\.lock-screen__notifications-clear\s*\{[^}]*color:\s*var\(--lock-notification-color\)[^}]*background:\s*var\(--lock-notification-clear-background\)/s,
+    )
+    expect(styles).toContain('color: var(--lock-notification-muted);')
+    expect(styles).toContain(
+      'outline: 2px solid var(--lock-notification-focus);',
+    )
+  })
+
+  it('uses the solid mode material for the performance clear action', () => {
+    expect(styles).toMatch(
+      /\.phone-app--performance \.lock-screen\s*\{[^}]*--lock-notification-clear-background:\s*var\(--phone-performance-glass\)/s,
+    )
+  })
+})