@astryxdesign/theme-neutral 0.7.5-canary.fccd771 → 0.7.5

package/src/neutralTheme.test.ts

@@ -24,13 +24,6 @@ function contrastRatio(foreground: string, background: string): number {
   return (lighter + 0.05) / (darker + 0.05);
 }
 
-const statusFill = {
-  accent: 'var(--astryx-theme-neutral-color-status-fill-accent)',
-  success: 'var(--astryx-theme-neutral-color-status-fill-success)',
-  warning: 'var(--astryx-theme-neutral-color-status-fill-warning)',
-  error: 'var(--astryx-theme-neutral-color-status-fill-error)',
-} as const;
-
 const lightDark = (light: string, dark: string) =>
   `light-dark(${light}, ${dark})`;
 
@@ -81,17 +74,50 @@ describe('neutral theme palette mappings', () => {
         neutralPalettes.neutral.light[10],
         neutralPalettes.neutral.dark[95],
       ),
-      '--color-success': lightDark(
+      '--color-info': lightDark('#0074e2', '#6d9cfe'),
+      '--color-info-muted': lightDark(
+        neutralPalettes.blue.light[85],
+        `${neutralPalettes.blue.dark[75]}3D`,
+      ),
+      '--color-on-info': lightDark(
+        neutralPalettes.neutral.light[100],
+        neutralPalettes.neutral.dark[5],
+      ),
+      // Strong status fills: Neutral's released Badge fill colours.
+      '--color-success': lightDark('#198100', '#64af4c'),
+      '--color-warning': '#ffce2f',
+      '--color-error': lightDark('#c9303a', '#ff705d'),
+      '--color-text-info': lightDark(
+        neutralPalettes.blue.light[45],
+        neutralPalettes.blue.dark[80],
+      ),
+      '--color-text-success': lightDark(
+        neutralPalettes.green.light[45],
+        neutralPalettes.green.light[75],
+      ),
+      '--color-text-warning': lightDark(
+        neutralPalettes.yellow.light[45],
+        neutralPalettes.yellow.light[80],
+      ),
+      '--color-text-error': lightDark(
+        neutralPalettes.red.light[45],
+        neutralPalettes.red.dark[80],
+      ),
+      '--color-on-info-muted': lightDark(
+        neutralPalettes.blue.light[25],
+        neutralPalettes.blue.dark[80],
+      ),
+      '--color-on-success-muted': lightDark(
         neutralPalettes.green.light[25],
-        neutralPalettes.green.light[80],
+        neutralPalettes.green.light[75],
       ),
-      '--color-warning': lightDark(
+      '--color-on-warning-muted': lightDark(
         neutralPalettes.yellow.light[25],
-        neutralPalettes.yellow.light[85],
+        neutralPalettes.yellow.light[80],
       ),
-      '--color-error': lightDark(
+      '--color-on-error-muted': lightDark(
         neutralPalettes.red.light[25],
-        neutralPalettes.red.dark[85],
+        neutralPalettes.red.dark[80],
       ),
       '--color-background-red': lightDark(
         neutralPalettes.red.light[85],
@@ -291,106 +317,114 @@ describe('neutral syntax contrast', () => {
   });
 });
 
-describe('neutral theme-local status mappings', () => {
-  it('preserves the independently approved component status fills', () => {
-    expect(neutralTheme.localTokens).toMatchObject({
-      '--astryx-theme-neutral-color-status-fill-accent':
-        'light-dark(#0074e2, #6d9cfe)',
-      '--astryx-theme-neutral-color-status-fill-success':
-        'light-dark(#198100, #64af4c)',
-      '--astryx-theme-neutral-color-status-fill-warning': '#ffce2f',
-      '--astryx-theme-neutral-color-status-fill-error':
-        'light-dark(#c9303a, #ff705d)',
+describe('neutral semantic status roles', () => {
+  it('keeps public plain-surface and on-muted roles on reviewed palette stops', () => {
+    expect(neutralTheme.tokens).toMatchObject({
+      '--color-text-info': lightDark(
+        neutralPalettes.blue.light[45],
+        neutralPalettes.blue.dark[80],
+      ),
+      '--color-text-success': lightDark(
+        neutralPalettes.green.light[45],
+        neutralPalettes.green.light[75],
+      ),
+      '--color-text-warning': lightDark(
+        neutralPalettes.yellow.light[45],
+        neutralPalettes.yellow.light[80],
+      ),
+      '--color-text-error': lightDark(
+        neutralPalettes.red.light[45],
+        neutralPalettes.red.dark[80],
+      ),
+      '--color-on-info-muted': lightDark(
+        neutralPalettes.blue.light[25],
+        neutralPalettes.blue.dark[80],
+      ),
+      '--color-on-success-muted': lightDark(
+        neutralPalettes.green.light[25],
+        neutralPalettes.green.light[75],
+      ),
+      '--color-on-warning-muted': lightDark(
+        neutralPalettes.yellow.light[25],
+        neutralPalettes.yellow.light[80],
+      ),
+      '--color-on-error-muted': lightDark(
+        neutralPalettes.red.light[25],
+        neutralPalettes.red.dark[80],
+      ),
     });
-    expect(neutralTheme.tokens).not.toHaveProperty(
-      '--astryx-theme-neutral-color-status-fill-accent',
+    expect(neutralTheme.localTokens).not.toHaveProperty(
+      '--astryx-theme-neutral-color-status-emphasized-info',
     );
   });
 
-  it('shares each status fill across the components with the same role', () => {
-    expect(neutralTheme.components?.badge?.['variant:info']).toMatchObject({
-      backgroundColor: statusFill.accent,
+  it('keeps only the released accent local token, unused by Neutral itself', () => {
+    expect(neutralTheme.localTokens).toEqual({
+      '--astryx-theme-neutral-color-status-fill-accent': lightDark(
+        '#0074e2',
+        '#6d9cfe',
+      ),
     });
-    expect(
-      neutralTheme.components?.['status-dot']?.['variant:success'],
-    ).toEqual({
-      backgroundColor: statusFill.success,
+    const css = JSON.stringify({
+      tokens: neutralTheme.tokens,
+      components: neutralTheme.components,
     });
+    expect(css).not.toContain('--astryx-theme-neutral-');
+  });
+
+  it('uses public semantic roles on plain and pale surfaces while preserving fill roles', () => {
+    expect(neutralTheme.tokens).toMatchObject({
+      '--color-info': lightDark('#0074e2', '#6d9cfe'),
+      // Strong status fills: Neutral's released Badge fill colours.
+      '--color-success': lightDark('#198100', '#64af4c'),
+      '--color-warning': '#ffce2f',
+      '--color-error': lightDark('#c9303a', '#ff705d'),
+    });
+    expect(neutralTheme.components).not.toHaveProperty('icon');
+    expect(neutralTheme.components).not.toHaveProperty('text-input');
+    expect(neutralTheme.components).not.toHaveProperty('text-area-counter');
+    expect(neutralTheme.components?.badge).not.toHaveProperty('variant:info');
+    // Status and accent variants read the portable roles, not overrides.
+    expect(neutralTheme.components).not.toHaveProperty('status-dot');
+    expect(neutralTheme.components).not.toHaveProperty('step-indicator');
+    expect(neutralTheme.components).not.toHaveProperty('avatar-status-dot');
+    expect(neutralTheme.components?.['progress-bar']).not.toHaveProperty(
+      'variant:accent',
+    );
     expect(
-      neutralTheme.components?.['avatar-status-dot']?.['variant:error'],
-    ).toEqual({backgroundColor: statusFill.error});
-    expect(
-      neutralTheme.components?.['step-indicator']?.['status:warning'],
-    ).toEqual({'--color-warning': statusFill.warning});
-    expect(
-      neutralTheme.components?.['progress-bar']?.['variant:accent'],
-    ).toEqual({
-      '--color-accent': statusFill.accent,
+      neutralTheme.components?.button?.['variant:destructive'],
+    ).toMatchObject({
+      backgroundColor: 'var(--color-error-muted)',
+      color: 'var(--color-on-error-muted)',
     });
   });
 
+  it('keeps plain-surface status roles at their required contrast on the page background in light mode', () => {
+    const surface = neutralPalettes.neutral.light[95];
+    for (const foreground of [
+      neutralPalettes.blue.light[45],
+      neutralPalettes.green.light[45],
+      neutralPalettes.yellow.light[45],
+      neutralPalettes.red.light[45],
+    ]) {
+      expect(contrastRatio(foreground, surface)).toBeGreaterThanOrEqual(4.5);
+    }
+  });
+
   it('does not adopt the unapproved table row-status target', () => {
     expect(neutralTheme.components).not.toHaveProperty('table-row-status');
   });
 });
 
-describe('neutral Banner tint mappings', () => {
-  it('uses a dedicated muted info surface without changing categorical blue', () => {
-    const mutedAccent = 'var(--astryx-theme-neutral-color-status-muted-accent)';
-    expect(neutralTheme.localTokens).toMatchObject({
-      '--astryx-theme-neutral-color-status-muted-accent': lightDark(
-        neutralPalettes.blue.light[85],
-        `${neutralPalettes.blue.dark[75]}3D`,
-      ),
-    });
-    expect(neutralTheme.components?.banner?.['status:info']).toMatchObject({
-      '--color-accent-muted': mutedAccent,
-    });
+describe('neutral Banner and destructive Button', () => {
+  it('paint with the portable roles and no Neutral-only overrides', () => {
+    expect(neutralTheme.components).not.toHaveProperty('banner');
     expect(neutralTheme.tokens['--color-background-blue']).toBe(
       lightDark(neutralPalettes.blue.light[85], neutralPalettes.blue.dark[25]),
     );
-  });
-
-  it('keeps the error background on the semantic muted token', () => {
-    expect(
-      neutralTheme.components?.banner?.['status:error'],
-    ).not.toHaveProperty('--color-error-muted');
-  });
-
-  it('uses light overlays in light mode and dark overlays in dark mode', () => {
-    expect(neutralTheme.localTokens).toMatchObject({
-      '--astryx-theme-neutral-color-on-tint-neutral':
-        'light-dark(#fafafa4D, #0a0a0a4D)',
-      '--astryx-theme-neutral-color-on-tint-overlay-hover':
-        'light-dark(#fafafa1A, #0a0a0a1A)',
-      '--astryx-theme-neutral-color-on-tint-overlay-pressed':
-        'light-dark(#fafafa33, #0a0a0a33)',
-    });
-    expect(neutralTheme.components?.banner?.base).toMatchObject({
-      '--color-neutral': 'var(--astryx-theme-neutral-color-on-tint-neutral)',
-      '--color-overlay-hover':
-        'var(--astryx-theme-neutral-color-on-tint-overlay-hover)',
-      '--color-overlay-pressed':
-        'var(--astryx-theme-neutral-color-on-tint-overlay-pressed)',
-    });
-  });
-});
-
-describe('neutral destructive Button interaction treatment', () => {
-  it('uses component-scoped red palette overlays', () => {
-    expect(neutralTheme.localTokens).toMatchObject({
-      '--astryx-theme-neutral-color-destructive-overlay-hover':
-        'light-dark(#ff7f770D, #ee736c0D)',
-      '--astryx-theme-neutral-color-destructive-overlay-pressed':
-        'light-dark(#ff7f771A, #ee736c1A)',
-    });
-    expect(
-      neutralTheme.components?.button?.['variant:destructive'],
-    ).toMatchObject({
-      '--color-overlay-hover':
-        'var(--astryx-theme-neutral-color-destructive-overlay-hover)',
-      '--color-overlay-pressed':
-        'var(--astryx-theme-neutral-color-destructive-overlay-pressed)',
+    expect(neutralTheme.components?.button?.['variant:destructive']).toEqual({
+      backgroundColor: 'var(--color-error-muted)',
+      color: 'var(--color-on-error-muted)',
     });
   });
 });

package/src/neutralTheme.ts

@@ -33,40 +33,12 @@ const neutralSyntax = defineSyntaxTheme({
 });
 
 const neutralLocalTokens: Record<string, TokenValue> = {
+  // Deprecated: kept with its released name, meaning, and value for Neutral
+  // extensions (theme:neutral DEC-1); Neutral itself paints status through the
+  // portable --color-* roles and no longer reads it.
   '--astryx-theme-neutral-color-status-fill-accent': ['#0074e2', '#6d9cfe'],
-  '--astryx-theme-neutral-color-status-fill-success': ['#198100', '#64af4c'],
-  '--astryx-theme-neutral-color-status-fill-warning': '#ffce2f',
-  '--astryx-theme-neutral-color-status-fill-error': ['#c9303a', '#ff705d'],
-  '--astryx-theme-neutral-color-status-muted-accent': [
-    blue.light[85],
-    withAlpha(blue.dark[75], '3D'),
-  ],
-  '--astryx-theme-neutral-color-on-tint-neutral': ['#fafafa4D', '#0a0a0a4D'],
-  '--astryx-theme-neutral-color-on-tint-overlay-hover': [
-    '#fafafa1A',
-    '#0a0a0a1A',
-  ],
-  '--astryx-theme-neutral-color-on-tint-overlay-pressed': [
-    '#fafafa33',
-    '#0a0a0a33',
-  ],
-  '--astryx-theme-neutral-color-destructive-overlay-hover': [
-    withAlpha(red.light[70], '0D'),
-    withAlpha(red.dark[65], '0D'),
-  ],
-  '--astryx-theme-neutral-color-destructive-overlay-pressed': [
-    withAlpha(red.light[70], '1A'),
-    withAlpha(red.dark[65], '1A'),
-  ],
 };
 
-const statusFill = {
-  accent: 'var(--astryx-theme-neutral-color-status-fill-accent)',
-  success: 'var(--astryx-theme-neutral-color-status-fill-success)',
-  warning: 'var(--astryx-theme-neutral-color-status-fill-warning)',
-  error: 'var(--astryx-theme-neutral-color-status-fill-error)',
-} as const;
-
 export const neutralTheme = defineTheme({
   name: 'neutral',
   localTokens: neutralLocalTokens,
@@ -154,15 +126,31 @@ export const neutralTheme = defineTheme({
     '--color-on-error': [neutral.light[100], neutral.dark[5]],
     '--color-on-warning': neutral.light[5],
 
+    '--color-info': ['#0074e2', '#6d9cfe'],
+    '--color-info-muted': [blue.light[85], withAlpha(blue.dark[75], '3D')],
+    '--color-on-info': [neutral.light[100], neutral.dark[5]],
+
+    '--color-text-info': [blue.light[45], blue.dark[80]],
+    '--color-text-success': [green.light[45], green.light[75]],
+    '--color-text-warning': [yellow.light[45], yellow.light[80]],
+    '--color-text-error': [red.light[45], red.dark[80]],
+
+    '--color-on-info-muted': [blue.light[25], blue.dark[80]],
+    '--color-on-success-muted': [green.light[25], green.light[75]],
+    '--color-on-warning-muted': [yellow.light[25], yellow.light[80]],
+    '--color-on-error-muted': [red.light[25], red.dark[80]],
+
     // Icon
     '--color-icon-accent': [neutral.light[10], neutral.dark[95]],
     '--color-icon-primary': [neutral.light[0], neutral.dark[100]],
     '--color-icon-secondary': [neutral.light[45], neutral.dark[65]],
     '--color-icon-disabled': [neutral.light[60], neutral.dark[35]],
 
-    '--color-success': [green.light[25], green.light[80]],
-    '--color-error': [red.light[25], red.dark[85]],
-    '--color-warning': [yellow.light[25], yellow.light[85]],
+    // Strong status fills (architecture:theme-tokens INV11): Neutral's
+    // reviewed status-fill colours, with --color-on-<status> above.
+    '--color-success': ['#198100', '#64af4c'],
+    '--color-warning': '#ffce2f',
+    '--color-error': ['#c9303a', '#ff705d'],
     '--color-success-muted': [green.dark[85], withAlpha(green.light[75], '3D')],
     '--color-error-muted': [red.light[85], withAlpha(red.dark[75], '3D')],
     '--color-warning-muted': [
@@ -182,7 +170,7 @@ export const neutralTheme = defineTheme({
       withAlpha(neutral.light[0], '1A'),
       withAlpha(neutral.dark[0], '4D'),
     ],
-    '--color-tint-hover': ['black', 'white'],
+    '--color-tint-hover': [neutral.light[0], neutral.dark[100]],
 
     '--color-background-red': [red.light[85], red.dark[25]],
     '--color-border-red': [red.light[80], red.light[65]],
@@ -288,35 +276,15 @@ export const neutralTheme = defineTheme({
     button: {
       'variant:destructive': {
         backgroundColor: 'var(--color-error-muted)',
-        color: 'var(--color-error)',
-        '--color-overlay-hover':
-          'var(--astryx-theme-neutral-color-destructive-overlay-hover)',
-        '--color-overlay-pressed':
-          'var(--astryx-theme-neutral-color-destructive-overlay-pressed)',
+        color: 'var(--color-on-error-muted)',
       },
     },
 
     badge: {
-      'variant:info': {
-        backgroundColor: statusFill.accent,
-        color: 'var(--color-on-accent)',
-      },
       'variant:neutral': {
         backgroundColor: 'var(--color-background-gray)',
         color: 'var(--color-text-gray)',
       },
-      'variant:success': {
-        backgroundColor: statusFill.success,
-        color: 'var(--color-on-success)',
-      },
-      'variant:warning': {
-        backgroundColor: statusFill.warning,
-        color: 'var(--color-on-warning)',
-      },
-      'variant:error': {
-        backgroundColor: statusFill.error,
-        color: 'var(--color-on-error)',
-      },
 
       'variant:red': {
         backgroundColor: 'var(--color-background-red)',
@@ -360,18 +328,6 @@ export const neutralTheme = defineTheme({
       },
     },
 
-    'status-dot': {
-      'variant:success': {backgroundColor: statusFill.success},
-      'variant:warning': {backgroundColor: statusFill.warning},
-      'variant:error': {backgroundColor: statusFill.error},
-      'variant:accent': {backgroundColor: statusFill.accent},
-    },
-
-    'avatar-status-dot': {
-      'variant:success': {backgroundColor: statusFill.success},
-      'variant:error': {backgroundColor: statusFill.error},
-    },
-
     // Give the Neutral segmented control a roomier inset without changing its
     // outside height. The selected item stays flat against the tinted track.
     'segmented-control': {
@@ -394,45 +350,6 @@ export const neutralTheme = defineTheme({
       },
     },
 
-    banner: {
-      base: {
-        '--color-neutral': 'var(--astryx-theme-neutral-color-on-tint-neutral)',
-        '--color-overlay-hover':
-          'var(--astryx-theme-neutral-color-on-tint-overlay-hover)',
-        '--color-overlay-pressed':
-          'var(--astryx-theme-neutral-color-on-tint-overlay-pressed)',
-      },
-      'status:info': {
-        '--color-accent-muted':
-          'var(--astryx-theme-neutral-color-status-muted-accent)',
-        '--color-text-primary': 'var(--color-text-blue)',
-        '--color-text-secondary': 'var(--color-text-blue)',
-        '--color-accent': 'var(--color-text-blue)',
-      },
-      'status:success': {
-        '--color-text-primary': 'var(--color-text-green)',
-        '--color-text-secondary': 'var(--color-text-green)',
-        '--color-success': 'var(--color-text-green)',
-      },
-      'status:warning': {
-        '--color-text-primary': 'var(--color-text-yellow)',
-        '--color-text-secondary': 'var(--color-text-yellow)',
-        '--color-warning': 'var(--color-text-yellow)',
-      },
-      'status:error': {
-        '--color-text-primary': 'var(--color-text-red)',
-        '--color-text-secondary': 'var(--color-text-red)',
-        '--color-error': 'var(--color-text-red)',
-      },
-    },
-
-    'step-indicator': {
-      'status:accent': {'--color-accent': statusFill.accent},
-      'status:success': {'--color-success': statusFill.success},
-      'status:warning': {'--color-warning': statusFill.warning},
-      'status:error': {'--color-error': statusFill.error},
-    },
-
     switch: {
       base: {
         '--color-background-gray': 'var(--color-border-emphasized)',
@@ -443,18 +360,6 @@ export const neutralTheme = defineTheme({
       base: {
         '--color-background-muted': 'var(--color-border-emphasized)',
       },
-      'variant:accent': {
-        '--color-accent': statusFill.accent,
-      },
-      'variant:success': {
-        '--color-success': statusFill.success,
-      },
-      'variant:warning': {
-        '--color-warning': statusFill.warning,
-      },
-      'variant:error': {
-        '--color-error': statusFill.error,
-      },
     },
 
     card: {