@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/serverSafeComponents.test.ts

@@ -71,6 +71,13 @@ const CLIENT_APIS = new Set([
 
 const EXTENSIONS = ['.tsx', '.ts', '.mjs', '.js', '.jsx'];
 
+/**
+ * `'use client'` modules a server-safe component may render as a client
+ * island: each does nothing on the server, so the component's server output
+ * is unchanged. The walk stops at them.
+ */
+const CLIENT_ISLANDS = new Set(['hooks/AnnounceRenderedText.tsx']);
+
 const isSourceFile = (name: string) =>
   /\.[jt]sx?$/.test(name) &&
   !/\.(test|test-violations|stories|doc|perf)\./.test(name) &&
@@ -357,6 +364,9 @@ function findClientSurfaces(
       continue;
     }
     visited.add(key);
+    if (CLIENT_ISLANDS.has(relative(SRC_DIR, file))) {
+      continue;
+    }
 
     const info = parseModule(file);
     const chain = via.join(' -> ');

package/src/tailwind-theme.css

@@ -75,6 +75,9 @@
   --color-tint-hover: var(--color-tint-hover);
 
   /* --- Status --- */
+  --color-info: var(--color-info);
+  --color-info-muted: var(--color-info-muted);
+  --color-on-info: var(--color-on-info);
   --color-success: var(--color-success);
   --color-success-muted: var(--color-success-muted);
   --color-on-success: var(--color-on-success);
@@ -84,6 +87,52 @@
   --color-warning: var(--color-warning);
   --color-warning-muted: var(--color-warning-muted);
   --color-on-warning: var(--color-on-warning);
+  /* Each --color-<status> is the strong status fill, with --color-on-<status>
+   * content at 4.5:1 or more (architecture:theme-tokens INV11). text-status-*
+   * reads the status text role for page text; icons and borders use the same
+   * colour by default. */
+  --text-color-status-info: var(--color-text-info);
+  --text-color-status-success: var(--color-text-success);
+  --text-color-status-warning: var(--color-text-warning);
+  --text-color-status-error: var(--color-text-error);
+  /* Each status projects by paint property: text-like utilities (text-,
+   * decoration-, placeholder-, caret-) read the status text role, line-like
+   * utilities (border-, divide-, outline-, ring-) read the status border role,
+   * and fill-like utilities (bg-, accent-, fill-, stroke-, shadows, gradients)
+   * keep the strong fill. Tailwind resolves these per-utility keys before
+   * --color-*. */
+  --text-color-info: var(--color-text-info);
+  --text-color-success: var(--color-text-success);
+  --text-color-warning: var(--color-text-warning);
+  --text-color-error: var(--color-text-error);
+  --text-decoration-color-info: var(--color-text-info);
+  --text-decoration-color-success: var(--color-text-success);
+  --text-decoration-color-warning: var(--color-text-warning);
+  --text-decoration-color-error: var(--color-text-error);
+  --placeholder-color-info: var(--color-text-info);
+  --placeholder-color-success: var(--color-text-success);
+  --placeholder-color-warning: var(--color-text-warning);
+  --placeholder-color-error: var(--color-text-error);
+  --caret-color-info: var(--color-text-info);
+  --caret-color-success: var(--color-text-success);
+  --caret-color-warning: var(--color-text-warning);
+  --caret-color-error: var(--color-text-error);
+  --border-color-info: var(--color-border-info);
+  --border-color-success: var(--color-border-success);
+  --border-color-warning: var(--color-border-warning);
+  --border-color-error: var(--color-border-error);
+  --outline-color-info: var(--color-border-info);
+  --outline-color-success: var(--color-border-success);
+  --outline-color-warning: var(--color-border-warning);
+  --outline-color-error: var(--color-border-error);
+  --ring-color-info: var(--color-border-info);
+  --ring-color-success: var(--color-border-success);
+  --ring-color-warning: var(--color-border-warning);
+  --ring-color-error: var(--color-border-error);
+  --color-on-info-muted: var(--color-on-info-muted);
+  --color-on-success-muted: var(--color-on-success-muted);
+  --color-on-warning-muted: var(--color-on-warning-muted);
+  --color-on-error-muted: var(--color-on-error-muted);
 
   /* --- Borders --- */
   --color-border: var(--color-border);
@@ -217,7 +266,8 @@
    * The system has a richer duration/easing scale than Tailwind's defaults.
    * We map the primary durations and expose the standard easing.
    * ========================================================================= */
-  --transition-property-colors: color, background-color, border-color, text-decoration-color, fill, stroke;
+  --transition-property-colors:
+    color, background-color, border-color, text-decoration-color, fill, stroke;
   --transition-property-opacity: opacity;
   --transition-property-shadow: box-shadow;
   --transition-property-transform: transform;

package/src/tailwind-theme.test.ts

@@ -27,6 +27,9 @@ const sameNameColorTokens = [
   '--color-overlay-hover',
   '--color-overlay-pressed',
   '--color-tint-hover',
+  '--color-info',
+  '--color-info-muted',
+  '--color-on-info',
   '--color-success',
   '--color-success-muted',
   '--color-on-success',
@@ -36,6 +39,10 @@ const sameNameColorTokens = [
   '--color-warning',
   '--color-warning-muted',
   '--color-on-warning',
+  '--color-on-info-muted',
+  '--color-on-success-muted',
+  '--color-on-warning-muted',
+  '--color-on-error-muted',
   '--color-border',
   '--color-on-dark',
   '--color-on-light',
@@ -68,6 +75,10 @@ async function compileBridge(): Promise<string> {
       token => `rounded-${suffix(token, '--radius-')}`,
     ),
     'bg-surface',
+    'text-status-info',
+    'text-status-success',
+    'text-status-warning',
+    'text-status-error',
   ]);
 }
 
@@ -97,6 +108,46 @@ describe('Tailwind theme bridge', () => {
     const css = await compileBridge();
 
     expect(css).toContain('background-color: var(--color-background-surface);');
+    expect(css).toContain('color: var(--color-text-info);');
+    expect(css).toContain('color: var(--color-text-success);');
+    expect(css).toContain('color: var(--color-text-warning);');
+    expect(css).toContain('color: var(--color-text-error);');
     expect(css).not.toContain('background-color: var(--color-surface);');
   });
+
+  it('projects each status by paint property', async () => {
+    const compiler = await compile(`${bridgeCSS}\n@tailwind utilities;`);
+    for (const status of ['info', 'success', 'warning', 'error']) {
+      const text = `var(--color-text-${status})`;
+      const border = `var(--color-border-${status})`;
+      const fill = `var(--color-${status})`;
+      for (const [utility, expected] of [
+        [`text-${status}`, text],
+        [`decoration-${status}`, text],
+        [`placeholder-${status}`, text],
+        [`caret-${status}`, text],
+        [`border-${status}`, border],
+        [`divide-${status}`, border],
+        [`outline-${status}`, border],
+        [`ring-${status}`, border],
+        [`bg-${status}`, fill],
+        [`accent-${status}`, fill],
+        [`fill-${status}`, fill],
+        [`text-status-${status}`, text],
+      ]) {
+        expect([utility, compiler.build([utility])]).toEqual([
+          utility,
+          expect.stringContaining(expected),
+        ]);
+      }
+      // text-status-<status> is a text-only alias.
+      for (const utility of [
+        `bg-status-${status}`,
+        `border-status-${status}`,
+        `ring-status-${status}`,
+      ]) {
+        expect(compiler.build([utility])).not.toContain(`.${utility} {`);
+      }
+    }
+  });
 });

package/src/theme/Theme.test.tsx

@@ -213,6 +213,34 @@ describe('Theme', () => {
     expect(nestedWrapper?.getAttribute('data-theme')).toBe('light');
   });
 
+  it('rebinds a default status role inside a nested theme that authors its source token', () => {
+    const outer = defineTheme({
+      name: 'status-role-outer',
+      tokens: {
+        '--color-text-blue': '#0074E2',
+        '--color-text-info': '#0074E2',
+      },
+    });
+    const inner = defineTheme({
+      name: 'status-role-inner',
+      tokens: {'--color-text-blue': '#A000C8'},
+    });
+
+    render(
+      <Theme theme={outer}>
+        <Theme theme={inner}>
+          <span>nested</span>
+        </Theme>
+      </Theme>,
+    );
+
+    const innerCss = document.head.querySelector(
+      'style[data-astryx-theme="status-role-inner"]',
+    )?.textContent;
+    expect(innerCss).toContain('--color-text-blue: #A000C8;');
+    expect(innerCss).toContain('--color-text-info: var(--color-text-blue);');
+  });
+
   // =========================================================================
   // Data token ownership — StyleX defaults, sparse Theme overrides
   // =========================================================================

package/src/theme/__tests__/SpacingRootFontSize.a11y.chromium.spec.ts

@@ -1,4 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// @pr-a11y release-only
 
 /**
  * @file SpacingRootFontSize.a11y.chromium.spec.ts

package/src/theme/declarationBoundary.ts

@@ -52,7 +52,25 @@ function isNameChar(ch: string): boolean {
 
 /** CSS Syntax §3.3 preprocessing, for scanning only; emitted bytes stay intact. */
 function preprocess(input: string): string {
-  return input.replace(/\r\n?|\f/g, '\n').replace(/\0/g, '\uFFFD');
+  const normalized = input.replace(/\r\n?|\f/g, '\n').replace(/\0/g, '\uFFFD');
+  let output = '';
+  for (let index = 0; index < normalized.length; index++) {
+    const code = normalized.charCodeAt(index);
+    if (code >= 0xd800 && code <= 0xdbff) {
+      const next = normalized.charCodeAt(index + 1);
+      if (next >= 0xdc00 && next <= 0xdfff) {
+        output += normalized[index] + normalized[index + 1];
+        index++;
+      } else {
+        output += '\uFFFD';
+      }
+    } else if (code >= 0xdc00 && code <= 0xdfff) {
+      output += '\uFFFD';
+    } else {
+      output += normalized[index];
+    }
+  }
+  return output;
 }
 
 /** Non-printable code points make an unquoted url() a bad-url token. */
@@ -325,6 +343,269 @@ export function checkDeclarationValue(input: string): string | null {
   return null;
 }
 
+export interface DeclarationValueAnalysis {
+  reason: string | null;
+  references: string[];
+  important: boolean;
+  singleVarReference: string | null;
+}
+
+function skipWhitespaceAndComments(input: string, start: number): number {
+  let index = start;
+  for (;;) {
+    while (index < input.length && isWhitespace(input[index])) {
+      index++;
+    }
+    if (input[index] !== '/' || input[index + 1] !== '*') {
+      return index;
+    }
+    const close = input.indexOf('*/', index + 2);
+    if (close === -1) {
+      return input.length;
+    }
+    index = close + 2;
+  }
+}
+
+function varReferenceAt(input: string, openParen: number): string | null {
+  const start = skipWhitespaceAndComments(input, openParen + 1);
+  if (!startsIdent(input, start)) {
+    return null;
+  }
+  const token = consumeIdent(input, start);
+  if (!token.name.startsWith('--')) {
+    return null;
+  }
+  const end = skipWhitespaceAndComments(input, token.end);
+  return input[end] === ',' || input[end] === ')' ? token.name : null;
+}
+
+function startsNumber(input: string, position: number): boolean {
+  const first = input[position];
+  const second = input[position + 1];
+  const third = input[position + 2];
+  if (first === '+' || first === '-') {
+    return (
+      /^[0-9]$/.test(second ?? '') ||
+      (second === '.' && /^[0-9]$/.test(third ?? ''))
+    );
+  }
+  return (
+    /^[0-9]$/.test(first ?? '') ||
+    (first === '.' && /^[0-9]$/.test(second ?? ''))
+  );
+}
+
+function consumeNumber(input: string, position: number): number {
+  let index = position;
+  if (input[index] === '+' || input[index] === '-') {
+    index++;
+  }
+  while (/^[0-9]$/.test(input[index] ?? '')) {
+    index++;
+  }
+  if (input[index] === '.' && /^[0-9]$/.test(input[index + 1] ?? '')) {
+    index += 2;
+    while (/^[0-9]$/.test(input[index] ?? '')) {
+      index++;
+    }
+  }
+  if (
+    (input[index] === 'e' || input[index] === 'E') &&
+    (/^[0-9]$/.test(input[index + 1] ?? '') ||
+      ((input[index + 1] === '+' || input[index + 1] === '-') &&
+        /^[0-9]$/.test(input[index + 2] ?? '')))
+  ) {
+    index++;
+    if (input[index] === '+' || input[index] === '-') {
+      index++;
+    }
+    while (/^[0-9]$/.test(input[index] ?? '')) {
+      index++;
+    }
+  }
+  return index;
+}
+
+const DECLARATION_ANALYSIS_CACHE = new Map<string, DeclarationValueAnalysis>();
+const MAX_DECLARATION_ANALYSIS_CACHE = 4096;
+
+/**
+ * Analyze one accepted declaration value using the same CSS tokenization rules
+ * as the declaration-boundary check.
+ */
+export function analyzeDeclarationValue(
+  input: string,
+): DeclarationValueAnalysis {
+  const cached = DECLARATION_ANALYSIS_CACHE.get(input);
+  if (cached !== undefined) {
+    return cached;
+  }
+  const reason = checkDeclarationValue(input);
+  if (reason !== null) {
+    const analysis = {
+      reason,
+      references: [],
+      important: false,
+      singleVarReference: null,
+    };
+    if (DECLARATION_ANALYSIS_CACHE.size >= MAX_DECLARATION_ANALYSIS_CACHE) {
+      DECLARATION_ANALYSIS_CACHE.clear();
+    }
+    DECLARATION_ANALYSIS_CACHE.set(input, analysis);
+    return analysis;
+  }
+
+  const value = preprocess(input);
+  const references: string[] = [];
+  const open: string[] = [];
+  type TopLevelToken = {
+    type: 'delim' | 'ident' | 'var-function' | 'other';
+    value: string;
+    reference?: string;
+  };
+  const topLevelTokens: TopLevelToken[] = [];
+  const firstTopLevelTokens: TopLevelToken[] = [];
+  let topLevelTokenCount = 0;
+  const recordTopLevel = (token: TopLevelToken): void => {
+    if (open.length === 0) {
+      topLevelTokenCount++;
+      if (firstTopLevelTokens.length === 0) {
+        firstTopLevelTokens.push(token);
+      }
+      topLevelTokens.push(token);
+      if (topLevelTokens.length > 2) {
+        topLevelTokens.shift();
+      }
+    }
+  };
+
+  let index = 0;
+  while (index < value.length) {
+    const character = value[index];
+    if (isWhitespace(character)) {
+      index++;
+      continue;
+    }
+    if (character === '/' && value[index + 1] === '*') {
+      index = value.indexOf('*/', index + 2) + 2;
+      continue;
+    }
+    if (character === '"' || character === "'") {
+      recordTopLevel({type: 'other', value: character});
+      const string = consumeString(value, index);
+      index = 'end' in string ? string.end : value.length;
+      continue;
+    }
+    if (character === '#') {
+      const nameStart = index + 1;
+      if (isNameChar(value[nameStart]) || isValidEscape(value, nameStart)) {
+        recordTopLevel({type: 'other', value: '#'});
+        index = consumeIdent(value, nameStart).end;
+        continue;
+      }
+    }
+    if (character === '@' && startsIdent(value, index + 1)) {
+      recordTopLevel({type: 'other', value: '@'});
+      index = consumeIdent(value, index + 1).end;
+      continue;
+    }
+    if (startsNumber(value, index)) {
+      recordTopLevel({type: 'other', value: character});
+      index = consumeNumber(value, index);
+      if (startsIdent(value, index)) {
+        index = consumeIdent(value, index).end;
+      } else if (value[index] === '%') {
+        index++;
+      }
+      continue;
+    }
+    if (startsIdent(value, index)) {
+      const ident = consumeIdent(value, index);
+      index = ident.end;
+      const isFunction = value[index] === '(';
+      const reference =
+        isFunction && ident.name.toLowerCase() === 'var'
+          ? varReferenceAt(value, index)
+          : null;
+      recordTopLevel(
+        reference !== null
+          ? {type: 'var-function', value: ident.name, reference}
+          : {
+              type: isFunction ? 'other' : 'ident',
+              value: ident.name,
+            },
+      );
+      if (isFunction) {
+        if (reference !== null) {
+          references.push(reference);
+        }
+        if (ident.name.toLowerCase() === 'url') {
+          let body = index + 1;
+          while (body < value.length && isWhitespace(value[body])) {
+            body++;
+          }
+          if (value[body] !== '"' && value[body] !== "'") {
+            const url = consumeUrl(value, body);
+            index = 'end' in url ? url.end : value.length;
+            continue;
+          }
+        }
+        open.push(')');
+        index++;
+      }
+      continue;
+    }
+    if (character === '(' || character === '[' || character === '{') {
+      recordTopLevel({type: 'other', value: character});
+      open.push(CLOSER[character]);
+      index++;
+      continue;
+    }
+    if (character === ')' || character === ']' || character === '}') {
+      open.pop();
+      index++;
+      continue;
+    }
+    if (character === '!') {
+      recordTopLevel({type: 'delim', value: character});
+    } else {
+      recordTopLevel({type: 'other', value: character});
+    }
+    index++;
+  }
+
+  const previousTopLevel = topLevelTokens.at(-2);
+  const lastTopLevel = topLevelTokens.at(-1);
+  const important =
+    previousTopLevel?.type === 'delim' &&
+    previousTopLevel.value === '!' &&
+    lastTopLevel?.type === 'ident' &&
+    lastTopLevel.value.toLowerCase() === 'important';
+  const firstTopLevelToken = firstTopLevelTokens[0];
+  const singleVarReference =
+    topLevelTokenCount - (important ? 2 : 0) === 1 &&
+    firstTopLevelToken?.type === 'var-function'
+      ? (firstTopLevelToken.reference ?? null)
+      : null;
+  const analysis = {reason: null, references, important, singleVarReference};
+  if (DECLARATION_ANALYSIS_CACHE.size >= MAX_DECLARATION_ANALYSIS_CACHE) {
+    DECLARATION_ANALYSIS_CACHE.clear();
+  }
+  DECLARATION_ANALYSIS_CACHE.set(input, analysis);
+  return analysis;
+}
+
+/** The browser-canonical spelling of one valid declaration name. */
+export function canonicalizeDeclarationName(input: string): string | null {
+  const name = preprocess(input);
+  if (name.length === 0 || !startsIdent(name, 0)) {
+    return null;
+  }
+  const ident = consumeIdent(name, 0);
+  return ident.end === name.length ? ident.name : null;
+}
+
 /**
  * Why `name` cannot be emitted as a declaration's property name, or `null`
  * when it can. A property name is one CSS ident sequence: a standard