@lifecorner/angular-ui-kit 3.27.0 → 3.27.1

package/src/styles/_theme-light.scss

@@ -14,9 +14,14 @@
 @use './tokens/animation' as *;
 @use './tokens/size' as *;
 
-// Default theme (light) on :root
-:root,
-:root.light {
+// Every colour token of the light theme: --color-*, --gradient-*, --shadow-*,
+// --elevation-*, --accent-line and --app-background-image (request 043, F-25).
+// The root rule below emits them, and `.lc-header--light` emits them a second
+// time: derived tokens (`--color-primary: var(--color-primary-500)`) resolve
+// where they are declared, so only the full set on the header gives its slot
+// content (buttons, links, the theme toggle, the account menu) the light
+// values inside a dark page.
+@mixin -light-theme-colors {
   // ============================================================================
   // Colors - Primary
   // ============================================================================
@@ -91,65 +96,6 @@
   --color-accent-rust: #{$color-accent-rust};
   --color-accent-violet: #{$color-accent-violet};
 
-  // ============================================================================
-  // Spacing
-  // ============================================================================
-  --spacing-0: #{$spacing-0};
-  --spacing-0-5: #{$spacing-0-5};
-  --spacing-1: #{$spacing-1};
-  --spacing-1-5: #{$spacing-1-5};
-  --spacing-2: #{$spacing-2};
-  --spacing-2-5: #{$spacing-2-5};
-  --spacing-3: #{$spacing-3};
-  --spacing-3-5: #{$spacing-3-5};
-  --spacing-4: #{$spacing-4};
-  --spacing-5: #{$spacing-5};
-  --spacing-6: #{$spacing-6};
-  --spacing-7: #{$spacing-7};
-  --spacing-8: #{$spacing-8};
-  --spacing-9: #{$spacing-9};
-  --spacing-10: #{$spacing-10};
-  --spacing-11: #{$spacing-11};
-  --spacing-12: #{$spacing-12};
-  --spacing-14: #{$spacing-14};
-  --spacing-16: #{$spacing-16};
-
-  // ============================================================================
-  // Typography - Font Families
-  // ============================================================================
-  --typography-font-family-base: #{$typography-font-family-base};
-  --typography-font-family-mono: #{$typography-font-family-mono};
-
-  // ============================================================================
-  // Typography - Font Sizes
-  // ============================================================================
-  --typography-font-size-xs: #{$typography-font-size-xs};
-  --typography-font-size-sm: #{$typography-font-size-sm};
-  --typography-font-size-base: #{$typography-font-size-base};
-  --typography-font-size-lg: #{$typography-font-size-lg};
-  --typography-font-size-xl: #{$typography-font-size-xl};
-  --typography-font-size-2xl: #{$typography-font-size-2xl};
-  --typography-font-size-3xl: #{$typography-font-size-3xl};
-  --typography-font-size-4xl: #{$typography-font-size-4xl};
-  --typography-font-size-5xl: #{$typography-font-size-5xl};
-  --typography-font-size-6xl: #{$typography-font-size-6xl};
-  --typography-font-size-7xl: #{$typography-font-size-7xl};
-
-  // ============================================================================
-  // Typography - Font Weights
-  // ============================================================================
-  --typography-font-weight-normal: #{$typography-font-weight-normal};
-  --typography-font-weight-medium: #{$typography-font-weight-medium};
-  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
-  --typography-font-weight-bold: #{$typography-font-weight-bold};
-
-  // ============================================================================
-  // Typography - Line Heights
-  // ============================================================================
-  --typography-line-height-tight: #{$typography-line-height-tight};
-  --typography-line-height-normal: #{$typography-line-height-normal};
-  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
-
   // ============================================================================
   // Elevation (Box Shadows) — light-tuned
   // ============================================================================
@@ -162,58 +108,6 @@
   --elevation-3: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.10);
   --elevation-4: 0 8px 8px -4px rgba(16, 24, 40, 0.04), 0 20px 24px -4px rgba(16, 24, 40, 0.10);
 
-  // ============================================================================
-  // Border Radius
-  // ============================================================================
-  --border-radius-none: #{$border-radius-none};
-  --border-radius-sm: #{$border-radius-sm};
-  --border-radius-md: #{$border-radius-md};
-  --border-radius-lg: #{$border-radius-lg};
-  --border-radius-xl: #{$border-radius-xl};
-  --border-radius-2xl: #{$border-radius-2xl};
-  --border-radius-full: #{$border-radius-full};
-
-  // ============================================================================
-  // Animation
-  // ============================================================================
-  --animation-duration-base: #{$animation-duration-fast};
-  --animation-easing-ease-in: #{$animation-easing-ease-in};
-  --animation-easing-ease-out: #{$animation-easing-ease-out};
-  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
-
-  // ============================================================================
-  // Size - Interactive Elements
-  // ============================================================================
-  --size-interactive-xs-height: #{$size-interactive-xs-height};
-  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
-  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
-  
-  --size-interactive-sm-height: #{$size-interactive-sm-height};
-  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
-  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
-  
-  --size-interactive-md-height: #{$size-interactive-md-height};
-  --size-interactive-md-padding: #{$size-interactive-md-padding};
-  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
-  
-  --size-interactive-lg-height: #{$size-interactive-lg-height};
-  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
-  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
-
-  // ============================================================================
-  // Size - Minimum Touch Target
-  // ============================================================================
-  --size-min-touch-width: #{$size-min-touch-width};
-  --size-min-touch-height: #{$size-min-touch-height};
-
-  // ============================================================================
-  // Layout - Content Width
-  // ============================================================================
-  // Canonical cap for page content. `lc-container size="xxl"` reads this, so an
-  // app shell that centres its own content against the same custom property
-  // stays in lockstep with the container instead of hard-coding a width.
-  --lc-content-max-width: #{$size-content-max-width};
-
   // ============================================================================
   // Semantic Color Mappings for Light Theme (DS2.0 — mirrors dark token names)
   // ============================================================================
@@ -415,6 +309,147 @@
   --color-skeleton: #e6eff1;
   --color-skeleton-highlight: #f2f7f8;
 
+  // Semantic color scale aliases — map the numeric scale some components use
+  // onto the three canonical semantic shades so they always resolve.
+  --color-error-50: #{$color-error-light};
+  --color-error-100: #{$color-error-light};
+  --color-error-500: var(--color-error-default);
+  --color-error-600: var(--color-error-default);
+  --color-error-700: var(--color-error-dark);
+  --color-error-800: #5a0707; // Darker shade for active state
+  --color-success-50: #{$color-success-light};
+  --color-success-100: #{$color-success-light};
+  --color-success-500: var(--color-success-default);
+  --color-success-600: var(--color-success-default);
+  --color-success-700: var(--color-success-dark);
+  --color-warning-50: #{$color-warning-light};
+  --color-warning-100: #{$color-warning-light};
+  --color-warning-500: var(--color-warning-default);
+  --color-warning-600: var(--color-warning-default);
+  --color-warning-700: var(--color-warning-dark);
+  --color-info-50: #{$color-info-light};
+  --color-info-100: #{$color-info-light};
+  --color-info-500: var(--color-info-default);
+  --color-info-600: var(--color-info-default);
+  --color-info-700: var(--color-info-dark);
+}
+
+// Default theme (light) on :root
+:root,
+:root.light {
+  @include -light-theme-colors;
+
+  // ============================================================================
+  // Spacing
+  // ============================================================================
+  --spacing-0: #{$spacing-0};
+  --spacing-0-5: #{$spacing-0-5};
+  --spacing-1: #{$spacing-1};
+  --spacing-1-5: #{$spacing-1-5};
+  --spacing-2: #{$spacing-2};
+  --spacing-2-5: #{$spacing-2-5};
+  --spacing-3: #{$spacing-3};
+  --spacing-3-5: #{$spacing-3-5};
+  --spacing-4: #{$spacing-4};
+  --spacing-5: #{$spacing-5};
+  --spacing-6: #{$spacing-6};
+  --spacing-7: #{$spacing-7};
+  --spacing-8: #{$spacing-8};
+  --spacing-9: #{$spacing-9};
+  --spacing-10: #{$spacing-10};
+  --spacing-11: #{$spacing-11};
+  --spacing-12: #{$spacing-12};
+  --spacing-14: #{$spacing-14};
+  --spacing-16: #{$spacing-16};
+
+  // ============================================================================
+  // Typography - Font Families
+  // ============================================================================
+  --typography-font-family-base: #{$typography-font-family-base};
+  --typography-font-family-mono: #{$typography-font-family-mono};
+
+  // ============================================================================
+  // Typography - Font Sizes
+  // ============================================================================
+  --typography-font-size-xs: #{$typography-font-size-xs};
+  --typography-font-size-sm: #{$typography-font-size-sm};
+  --typography-font-size-base: #{$typography-font-size-base};
+  --typography-font-size-lg: #{$typography-font-size-lg};
+  --typography-font-size-xl: #{$typography-font-size-xl};
+  --typography-font-size-2xl: #{$typography-font-size-2xl};
+  --typography-font-size-3xl: #{$typography-font-size-3xl};
+  --typography-font-size-4xl: #{$typography-font-size-4xl};
+  --typography-font-size-5xl: #{$typography-font-size-5xl};
+  --typography-font-size-6xl: #{$typography-font-size-6xl};
+  --typography-font-size-7xl: #{$typography-font-size-7xl};
+
+  // ============================================================================
+  // Typography - Font Weights
+  // ============================================================================
+  --typography-font-weight-normal: #{$typography-font-weight-normal};
+  --typography-font-weight-medium: #{$typography-font-weight-medium};
+  --typography-font-weight-semibold: #{$typography-font-weight-semibold};
+  --typography-font-weight-bold: #{$typography-font-weight-bold};
+
+  // ============================================================================
+  // Typography - Line Heights
+  // ============================================================================
+  --typography-line-height-tight: #{$typography-line-height-tight};
+  --typography-line-height-normal: #{$typography-line-height-normal};
+  --typography-line-height-relaxed: #{$typography-line-height-relaxed};
+
+  // ============================================================================
+  // Border Radius
+  // ============================================================================
+  --border-radius-none: #{$border-radius-none};
+  --border-radius-sm: #{$border-radius-sm};
+  --border-radius-md: #{$border-radius-md};
+  --border-radius-lg: #{$border-radius-lg};
+  --border-radius-xl: #{$border-radius-xl};
+  --border-radius-2xl: #{$border-radius-2xl};
+  --border-radius-full: #{$border-radius-full};
+
+  // ============================================================================
+  // Animation
+  // ============================================================================
+  --animation-duration-base: #{$animation-duration-fast};
+  --animation-easing-ease-in: #{$animation-easing-ease-in};
+  --animation-easing-ease-out: #{$animation-easing-ease-out};
+  --animation-easing-ease-in-out: #{$animation-easing-ease-in-out};
+
+  // ============================================================================
+  // Size - Interactive Elements
+  // ============================================================================
+  --size-interactive-xs-height: #{$size-interactive-xs-height};
+  --size-interactive-xs-padding: #{$size-interactive-xs-padding};
+  --size-interactive-xs-font-size: #{$size-interactive-xs-font-size};
+  
+  --size-interactive-sm-height: #{$size-interactive-sm-height};
+  --size-interactive-sm-padding: #{$size-interactive-sm-padding};
+  --size-interactive-sm-font-size: #{$size-interactive-sm-font-size};
+  
+  --size-interactive-md-height: #{$size-interactive-md-height};
+  --size-interactive-md-padding: #{$size-interactive-md-padding};
+  --size-interactive-md-font-size: #{$size-interactive-md-font-size};
+  
+  --size-interactive-lg-height: #{$size-interactive-lg-height};
+  --size-interactive-lg-padding: #{$size-interactive-lg-padding};
+  --size-interactive-lg-font-size: #{$size-interactive-lg-font-size};
+
+  // ============================================================================
+  // Size - Minimum Touch Target
+  // ============================================================================
+  --size-min-touch-width: #{$size-min-touch-width};
+  --size-min-touch-height: #{$size-min-touch-height};
+
+  // ============================================================================
+  // Layout - Content Width
+  // ============================================================================
+  // Canonical cap for page content. `lc-container size="xxl"` reads this, so an
+  // app shell that centres its own content against the same custom property
+  // stays in lockstep with the container instead of hard-coding a width.
+  --lc-content-max-width: #{$size-content-max-width};
+
   // ============================================================================
   // Short Aliases for Common Usage (Component Convenience)
   // ============================================================================
@@ -441,28 +476,13 @@
   --line-height-normal: var(--typography-line-height-normal);
   --line-height-relaxed: var(--typography-line-height-relaxed);
   --animation-timing-ease: var(--animation-easing-ease-in-out);
-  
-  // Semantic color scale aliases — map the numeric scale some components use
-  // onto the three canonical semantic shades so they always resolve.
-  --color-error-50: #{$color-error-light};
-  --color-error-100: #{$color-error-light};
-  --color-error-500: var(--color-error-default);
-  --color-error-600: var(--color-error-default);
-  --color-error-700: var(--color-error-dark);
-  --color-error-800: #5a0707; // Darker shade for active state
-  --color-success-50: #{$color-success-light};
-  --color-success-100: #{$color-success-light};
-  --color-success-500: var(--color-success-default);
-  --color-success-600: var(--color-success-default);
-  --color-success-700: var(--color-success-dark);
-  --color-warning-50: #{$color-warning-light};
-  --color-warning-100: #{$color-warning-light};
-  --color-warning-500: var(--color-warning-default);
-  --color-warning-600: var(--color-warning-default);
-  --color-warning-700: var(--color-warning-dark);
-  --color-info-50: #{$color-info-light};
-  --color-info-100: #{$color-info-light};
-  --color-info-500: var(--color-info-default);
-  --color-info-600: var(--color-info-default);
-  --color-info-700: var(--color-info-dark);
+}
+
+// `<lc-header theme="light">` keeps the light palette inside a dark page
+// (request 043, F-25): its slot buttons and primary inks measured 1.05:1
+// (outline) and 1.59:1 (link) there; with the tokens re-declared they match a
+// light page (17.12:1, 6.21:1). A root-level token override does not reach
+// inside a themed header.
+.lc-header--light {
+  @include -light-theme-colors;
 }

package/src/styles/focus-indicators.spec.ts

@@ -44,7 +44,9 @@ const rings: [string, string, string][] = [
   ['document-viewer/document-viewer.component.scss', '.doc-viewer__btn', '2px'],
   ['document-viewer/document-viewer.component.scss', '.doc-viewer__download-btn', '2px'],
   ['filter-bar/filter-bar.component.scss', '.lc-filter-bar__toggle-btn', '-2px'],
-  ['select/select.component.scss', '.lc-select__clear', '2px'],
+  // 2px → 0 by review 043 r1 F3: the button grew from 20 to 24 px (2 px padding
+  // inside a −2 px margin), so offset 0 draws the ring where 2 px round 20 px did.
+  ['select/select.component.scss', '.lc-select__clear', '0'],
   ['gallery/gallery.component.scss', '.gallery__filter-btn', '2px'],
   ['log-viewer/log-viewer.component.scss', '.lc-log-viewer__level-pill', '2px'],
   ['callout/callout.component.scss', '.callout__dismiss', '2px'],
@@ -171,14 +173,18 @@ describe('Focus indicators (request 042)', () => {
 
   describe('D-6: focus wins over hover in every field with the pattern (F-19)', () => {
     // [sheet, hover selector after the fix, declarations it keeps]
+    // Request 043 (F-23, design D-5) changed the first seven rows on purpose:
+    // they also exclude the error class (an error field kept no error border
+    // under the pointer), and the textarea/datepicker outline hover moved from
+    // --color-primary-400 (1.89:1 light) to --color-text-secondary (7.55:1).
     const hovers: [string, string, Record<string, string>][] = [
-      ['textarea/textarea.component.scss', '.lc-textarea--outline:hover:not(:disabled):not(:read-only):not(:focus)', { 'border-color': 'var(--color-primary-400)' }],
-      ['textarea/textarea.component.scss', '.lc-textarea--filled:hover:not(:disabled):not(:read-only):not(:focus)', { 'background-color': 'var(--color-surface-hover)' }],
-      ['datepicker/datepicker.component.scss', '.lc-datepicker:hover:not(:disabled):not([readonly]):not(:focus)', { 'border-color': 'var(--color-primary-400)' }],
-      ['datepicker/datepicker.component.scss', '.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
-      ['input/input.component.scss', '.input-container:hover:not(.input-disabled):not(.input-readonly):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
-      ['select/select.component.scss', '.lc-select:hover:not(.lc-select--disabled):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
-      ['select/select.component.scss', '.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
+      ['textarea/textarea.component.scss', '.lc-textarea--outline:hover:not(:disabled):not(:read-only):not(.lc-textarea--error):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['textarea/textarea.component.scss', '.lc-textarea--filled:hover:not(:disabled):not(:read-only):not(.lc-textarea--error):not(:focus)', { 'background-color': 'var(--color-surface-hover)' }],
+      ['datepicker/datepicker.component.scss', '.lc-datepicker:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['datepicker/datepicker.component.scss', '.lc-datepicker.lc-datepicker--filled:hover:not(:disabled):not([readonly]):not(.lc-datepicker--error):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
+      ['input/input.component.scss', '.input-container:hover:not(.input-disabled):not(.input-readonly):not(.input-invalid):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['select/select.component.scss', '.lc-select:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus)', { 'border-color': 'var(--color-text-secondary)' }],
+      ['select/select.component.scss', '.lc-select.lc-select--filled:hover:not(.lc-select--disabled):not(.lc-select--error):not(:focus)', { 'background-color': 'var(--color-surface-hover)', 'border-color': 'var(--color-border)' }],
       ['search-input/search-input.component.scss', '.search-input:hover:not(.search-input--disabled):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],
       ['tag-input/tag-input.component.scss', '.lc-tag-input__container:hover:not(.lc-tag-input__container--focused)', { 'border-color': 'var(--color-text-secondary)' }],
       ['date-range-picker/date-range-picker.component.scss', '.lc-drp__field:hover:not(.lc-drp__field--disabled):not(:focus-within)', { 'border-color': 'var(--color-text-secondary)' }],

package/src/styles/theme-contrast.spec.ts

@@ -981,9 +981,21 @@ describe('Component pairings of 3.22.4 (request 034)', () => {
     ['diff', '.lc-diff__num', { color: secondary }],
     // F-4: the lc-badge primary pair with a primary border.
     ['card', '.card__badge--primary', { 'background-color': 'var(--color-primary-subtle)', color: 'var(--color-on-primary-subtle)', border: '1px solid var(--color-primary-500)' }],
-    // F-5: a 40 px hit area into half of each gap; the visible pill is unchanged.
+    // F-5: a hit area into half of each gap; the visible pill is unchanged.
+    // Request 043 (F-22) raised it from 40 to 44 px high (and at least 44 wide):
+    // the spacing exception is no longer relied on.
     ['log', '.lc-log-viewer__level-pill', { position: 'relative', padding: '0.125rem 0.5rem', 'font-size': '0.6875rem' }],
-    ['log', '.lc-log-viewer__level-pill::before', { content: '""', position: 'absolute', 'inset-inline': '-0.125rem', top: 'calc(50% - 20px)', bottom: 'calc(50% - 20px)' }],
+    [
+      'log',
+      '.lc-log-viewer__level-pill::before',
+      {
+        content: '""',
+        position: 'absolute',
+        'inset-inline': 'min(-0.125rem, (100% - var(--size-min-touch-height, 2.75rem)) / 2)',
+        top: 'calc(50% - var(--size-min-touch-height, 2.75rem) / 2)',
+        bottom: 'calc(50% - var(--size-min-touch-height, 2.75rem) / 2)',
+      },
+    ],
     // F-7: three text steps instead of opacity, in the log and the terminal.
     ['log', '.lc-log-viewer__line--debug', { color: secondary }],
     ...meta.map((m): Row => ['log', `.lc-log-viewer__${m}`, { color: secondary }]),

package/src/styles/theme-modes.spec.ts

@@ -58,3 +58,43 @@ describe('Theme modes', () => {
     expect(tokens['--app-background-image']).toContain('rgba(78, 63, 132, 0.14)');
   });
 });
+
+/**
+ * Request 043 (F-25, design D-7): a header with `theme="light"` / `"dark"`
+ * re-declares every colour token of that theme, so its slot content (buttons,
+ * links, the theme toggle, the account menu) resolves the header's palette
+ * instead of the page's. Derived tokens resolve where they are declared, so
+ * the set must be complete.
+ */
+describe('Theme scope of a themed header', () => {
+  const COLOUR = /^--(color-|gradient-|shadow-|elevation-|accent-line$|app-background-image$)/;
+  const colours = (tokens: Record<string, string>) =>
+    Object.fromEntries(Object.entries(tokens).filter(([name]) => COLOUR.test(name)));
+
+  it('AC-6: .lc-header--light declares exactly the colour tokens of the light root (172), with the same values', () => {
+    const root = tokensOf(light, ':root,');
+    const header = tokensOf(light, '\n.lc-header--light {');
+    expect(Object.keys(header)).toHaveLength(172);
+    expect(header).toEqual(colours(root));
+  });
+
+  it('AC-7: .lc-header--dark declares exactly the colour tokens of the dark root (172), with the same values', () => {
+    const root = tokensOf(dark, ':root.dark,');
+    const header = tokensOf(dark, '\n.lc-header--dark {');
+    expect(Object.keys(header)).toHaveLength(172);
+    expect(header).toEqual(colours(root));
+  });
+
+  it('AC-12: the root rules still declare the full token set (252 per theme), colours and the rest', () => {
+    expect(Object.keys(tokensOf(light, ':root,'))).toHaveLength(252);
+    expect(Object.keys(tokensOf(dark, ':root.dark,'))).toHaveLength(252);
+    expect(Object.keys(colours(tokensOf(light, ':root,')))).toHaveLength(172);
+  });
+
+  it('scopes only the header: each theme file emits the header rule once, after its root rules', () => {
+    expect(light.match(/\.lc-header--light \{/g)).toHaveLength(1);
+    expect(dark.match(/\.lc-header--dark \{/g)).toHaveLength(1);
+    expect(light.indexOf('.lc-header--light {')).toBeGreaterThan(light.indexOf(':root,'));
+    expect(dark.indexOf('.lc-header--dark {')).toBeGreaterThan(dark.indexOf(':root.system {'));
+  });
+});