fix(design): generalize CSS paint sinks and dimension parsing

Author: Bill Leoutsakos

scripts/check-design-conformance-colour-assignments.test.ts

@@ -597,7 +597,16 @@ test('none is not approved as a colour or a context-free local colour alias', ()
 })
 
 test('text decoration inspects its paint without treating line/style/thickness as colours', () => {
-  for (const value of ['underline', 'underline dashed 2px', 'none', 'underline var(--text-body)'])
+  for (const value of [
+    'underline',
+    'underline dashed 2px',
+    'underline 2pt',
+    'underline 1Q',
+    'underline 2cqw',
+    'underline 1cap',
+    'none',
+    'underline var(--text-body)',
+  ])
     expect(
       flagged({
         [ui]: `export function update(node){node.style.textDecoration=${JSON.stringify(value)}}`,
@@ -612,3 +621,21 @@ test('text decoration inspects its paint without treating line/style/thickness a
       .unchecked.length
   ).toBeGreaterThan(0)
 })
+
+test('CSS colour longhands inspect authored paint across standard and vendor properties', () => {
+  for (const property of [
+    'textEmphasisColor',
+    'columnRuleColor',
+    'floodColor',
+    'stopColor',
+    'WebkitTextFillColor',
+  ]) {
+    expect(
+      flagged({ [ui]: `export function update(node){node.style.${property}='#ff00ff'}` }).length
+    ).toBeGreaterThan(0)
+    expect(
+      flagged({ [ui]: `export function update(node){node.style.${property}='var(--text-body)'}` })
+    ).toEqual([])
+    expect(flagged({ [ui]: `export const data={${property}:'#ff00ff'}` })).toEqual([])
+  }
+})

scripts/check-design-conformance.test.ts

@@ -561,7 +561,7 @@ test('supported central v3/v4 utility aliases compare as the same styling defini
     input(sources)
   )
   expect(r.findings.filter((f) => f.file === file)).toEqual([])
-})
+}, 15_000)
 
 test('CSS and inline token provenance survives numeric normalization', async () => {
   expect(

scripts/design-conformance/control-colour-assignments.ts

@@ -58,7 +58,7 @@ export interface ColourAssignmentReport {
   coverage: { checked: number; verified: number; invalid: number; unresolved: number }
 }
 const colourProperty =
-  /^(?:color|background(?:-color|-image)?|border(?:-(?:top|bottom|left|right|inline|block)(?:-start|-end)?)?(?:-color)?|outline(?:-color)?|fill|stroke|caret-color|accent-color|text-decoration(?:-color)?|box-shadow|text-shadow)$/
+  /^(?:color|(?:-[a-z]+-)?[a-z][\w-]*-color|background(?:-image)?|border(?:-(?:top|bottom|left|right|inline|block)(?:-start|-end)?)?|outline|fill|stroke|text-decoration|box-shadow|text-shadow)$/
 const kebab = (key: string) => key.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)
 /** A missing layout variable is not evidence of a colour. Actual colour sinks still take precedence. */
 const dimensional = (value: string): boolean => {
@@ -638,13 +638,13 @@ export class ColourAssignments {
         }
       const shadowSink = assignment.direct && /^(?:box|text)-shadow$/.test(assignment.name)
       const checks = assignment.values.map((value): Check => {
-        const border = assignment.direct ? paintDeclarations(assignment.name, value) : null
-        if (border) {
-          const paint = border.filter((declaration) => declaration.category === 'colours')
+        const shorthand = assignment.direct ? paintDeclarations(assignment.name, value) : null
+        if (shorthand) {
+          const paint = shorthand.filter((declaration) => declaration.category === 'colours')
           if (!paint.length)
             return {
               status: 'verified',
-              reason: 'Border shorthand authors no colour',
+              reason: 'CSS shorthand authors no explicit colour',
               references: [],
             }
           return combine(

scripts/design-conformance/normalize.ts

@@ -106,12 +106,16 @@ export function paintDeclarations(property: string, value: string): Declaration[
       .nodes.filter((node) => node.type !== 'space' && node.type !== 'comment')
       .map((node) => {
         const part = valueParser.stringify(node)
+        const dimension = valueParser.unit(part)
+        const thickness =
+          /^(?:auto|from-font|0)$/.test(part) ||
+          (dimension && /^(?:[a-z]+|%)$/i.test(dimension.unit)) ||
+          (node.type === 'function' && ['calc', 'min', 'max', 'clamp'].includes(node.value))
         const suffix = /^(?:none|underline|overline|line-through|blink)$/.test(part)
           ? 'line'
           : /^(?:solid|double|dotted|dashed|wavy)$/.test(part)
             ? 'style'
-            : /^(?:auto|from-font|0|[\d.]+(?:px|rem|em|ex|ch|lh|vw|vh|%))$/.test(part) ||
-                (node.type === 'function' && ['calc', 'min', 'max', 'clamp'].includes(node.value))
+            : thickness
               ? 'thickness'
               : 'color'
         return {