@astryxdesign/core 0.7.0-canary.fe57f54 → 0.7.0

package/src/reset.a11y.chromium.spec.ts

@@ -0,0 +1,178 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reset.a11y.chromium.spec.ts
+ * @input packages/core/src/reset.css, alone on a blank Chromium page
+ * @output Browser evidence that the reset reaches ::before, ::after,
+ *   ::placeholder and the search field's cancel button
+ * @position reset.css integration proof. A pseudo-element inside :where() is
+ *   invalid, and the forgiving list drops it without an error, so only a
+ *   shipping engine shows which of the reset's rules still match.
+ */
+
+import * as fs from 'node:fs';
+import {fileURLToPath} from 'node:url';
+import {expect, test, type Page} from '@playwright/test';
+
+const RESET_CSS = fs.readFileSync(
+  fileURLToPath(new URL('./reset.css', import.meta.url)),
+  'utf8',
+);
+
+// No Astryx CSS is loaded, so --color-text-secondary is undefined and a
+// placeholder takes the reset's fallback: the token's own light-dark() default.
+const PLACEHOLDER_FALLBACK = {
+  light: 'rgb(78, 96, 111)',
+  dark: 'rgb(170, 175, 181)',
+};
+
+/** Every style rule's selector, in source order, comments stripped. */
+function sourceSelectors(css: string): string[] {
+  const stripped = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  return [...stripped.matchAll(/([^{}]+)\{[^{}]*\}/g)].map(([, selector]) =>
+    selector.trim(),
+  );
+}
+
+/** Whitespace and quote style are the only differences serialization adds. */
+function normalize(selector: string): string {
+  return selector.replace(/\s+/g, '').replace(/'/g, '"');
+}
+
+async function loadReset(page: Page) {
+  await page.setContent(`
+    <div id="probe"></div>
+    <input id="name" placeholder="Name">
+    <textarea id="notes" placeholder="Notes"></textarea>
+    <input id="query" type="search" value="query" style="width: 200px">
+  `);
+  await page.addStyleTag({content: RESET_CSS});
+  // Width 100 plus 10px padding a side: 100 wide under border-box, 120
+  // under content-box. The ::before border sets only its width.
+  await page.addStyleTag({
+    content: `
+      #probe { display: inline-block; }
+      #probe::before, #probe::after {
+        content: '';
+        display: block;
+        width: 100px;
+        height: 20px;
+        padding: 10px;
+      }
+      #probe::before { border-width: 5px; }
+    `,
+  });
+}
+
+test.beforeEach(async ({page}) => {
+  await loadReset(page);
+});
+
+test('Chromium keeps every selector the reset writes', async ({page}) => {
+  // A forgiving list drops an invalid entry instead of the whole rule, so a
+  // dropped pseudo-element shows up as a shorter serialized selector.
+  const parsed = await page.evaluate(() => {
+    const layer = document.styleSheets[0].cssRules[0] as CSSLayerBlockRule;
+    return [...layer.cssRules].map(rule => (rule as CSSStyleRule).selectorText);
+  });
+  expect(parsed.map(normalize)).toEqual(
+    sourceSelectors(RESET_CSS).map(normalize),
+  );
+});
+
+test('::before and ::after are border-box and take the border reset', async ({
+  page,
+}) => {
+  const measured = await page.evaluate(() => {
+    const probe = document.getElementById('probe');
+    if (!probe) {
+      throw new Error('missing probe');
+    }
+    const before = getComputedStyle(probe, '::before');
+    const after = getComputedStyle(probe, '::after');
+    return {
+      beforeBoxSizing: before.boxSizing,
+      afterBoxSizing: after.boxSizing,
+      beforeBorderStyle: before.borderTopStyle,
+      beforeBorderWidth: before.borderTopWidth,
+      afterBorderWidth: after.borderTopWidth,
+      width: probe.getBoundingClientRect().width,
+    };
+  });
+  expect(measured).toEqual({
+    beforeBoxSizing: 'border-box',
+    afterBoxSizing: 'border-box',
+    beforeBorderStyle: 'solid',
+    beforeBorderWidth: '5px',
+    afterBorderWidth: '0px',
+    width: 100,
+  });
+});
+
+test('input and textarea placeholders take the reset color in both schemes', async ({
+  page,
+}) => {
+  const readPlaceholders = async () =>
+    page.evaluate(() =>
+      ['name', 'notes'].map(id => {
+        const field = document.getElementById(id);
+        if (!field) {
+          throw new Error(`missing #${id}`);
+        }
+        const placeholder = getComputedStyle(field, '::placeholder');
+        return {color: placeholder.color, opacity: placeholder.opacity};
+      }),
+    );
+  for (const scheme of ['light', 'dark'] as const) {
+    await page.emulateMedia({colorScheme: scheme});
+    const color = PLACEHOLDER_FALLBACK[scheme];
+    expect(await readPlaceholders(), scheme).toEqual([
+      {color, opacity: '1'},
+      {color, opacity: '1'},
+    ]);
+  }
+});
+
+test('a search field has no cancel button to clear it', async ({page}) => {
+  // Chromium draws the cancel button at the inline end of a focused search
+  // field that has a value, and a click on it empties the field.
+  const query = page.locator('#query');
+  await query.focus();
+  const box = await query.boundingBox();
+  if (!box) {
+    throw new Error('missing search field box');
+  }
+  await page.mouse.click(box.x + box.width - 8, box.y + box.height / 2);
+  await expect(query).toHaveValue('query');
+});
+
+test('a later layer and an unlayered rule still override the reset', async ({
+  page,
+}) => {
+  // Same 0,0,1 specificity as the reset's own selectors, so only the cascade
+  // layer decides.
+  await page.addStyleTag({
+    content: `
+      @layer reset, astryx-base;
+      @layer astryx-base {
+        :where(textarea)::placeholder { color: rgb(0, 128, 0); }
+      }
+      :where(#probe)::after { box-sizing: content-box; }
+    `,
+  });
+  const overridden = await page.evaluate(() => {
+    const probe = document.getElementById('probe');
+    const notes = document.getElementById('notes');
+    if (!probe || !notes) {
+      throw new Error('missing probe or textarea');
+    }
+    return {
+      placeholderColor: getComputedStyle(notes, '::placeholder').color,
+      afterBoxSizing: getComputedStyle(probe, '::after').boxSizing,
+    };
+  });
+  expect(overridden).toEqual({
+    placeholderColor: 'rgb(0, 128, 0)',
+    afterBoxSizing: 'content-box',
+  });
+});

package/src/reset.css

@@ -13,7 +13,7 @@
  * - Removes default margins, padding, and list styles
  * - Makes images block-level and responsive
  * - Resets form elements to inherit font styles
- * - Uses :where() for zero specificity (easy to override)
+ * - Uses :where() for zero specificity (pseudo-elements go outside it)
  *
  * Usage:
  *
@@ -46,7 +46,7 @@
    * Use border-box globally. Prevents padding/border from affecting
    * element dimensions — the single most impactful reset.
    */
-  :where(*, *::before, *::after) {
+  :where(*), :where(*)::before, :where(*)::after {
     box-sizing: border-box;
   }
 
@@ -54,7 +54,7 @@
    * Reset borders to 0-width solid. This lets you add a border by just
    * setting border-width — no need to also specify border-style.
    */
-  :where(*, *::before, *::after) {
+  :where(*), :where(*)::before, :where(*)::after {
     border-width: 0;
     border-style: solid;
     border-color: currentColor;
@@ -284,19 +284,19 @@
 
   /*
    * Normalize placeholder opacity (Firefox renders at reduced opacity)
-   * and set a sensible default color using the Astryx text-placeholder token.
+   * and color it with the --color-text-secondary token, or its default.
    */
-  :where(input::placeholder, textarea::placeholder) {
+  :where(input, textarea)::placeholder {
     opacity: 1;
-    color: var(--color-text-secondary, #9ca3af);
+    color: var(--color-text-secondary, light-dark(#4E606F, #AAAFB5));
   }
 
   /*
    * Remove the inner padding and cancel buttons in search inputs
    * for Chrome and Safari.
    */
-  :where([type='search']::-webkit-search-decoration,
-         [type='search']::-webkit-search-cancel-button) {
+  :where([type='search'])::-webkit-search-decoration,
+  :where([type='search'])::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
 

package/src/reset.test.ts

@@ -80,3 +80,115 @@ describe('reset.css accessibility invariants', () => {
     ).toBe(true);
   });
 });
+
+/** The argument of every `:where()` and `:is()`, nested ones included. */
+function forgivingListArguments(selector: string): string[] {
+  return [...selector.matchAll(/:(?:where|is)\(/g)].map(match => {
+    const start = match.index + match[0].length;
+    let depth = 1;
+    let end = start;
+    for (; end < selector.length && depth > 0; end++) {
+      if (selector[end] === '(') {
+        depth++;
+      } else if (selector[end] === ')') {
+        depth--;
+      }
+    }
+    return selector.slice(start, end - 1);
+  });
+}
+
+/** A selector list split on its top-level commas. */
+function topLevelSelectors(list: string): string[] {
+  const selectors: string[] = [];
+  let depth = 0;
+  let start = 0;
+  for (let index = 0; index < list.length; index++) {
+    if (list[index] === '(') {
+      depth++;
+    } else if (list[index] === ')') {
+      depth--;
+    } else if (list[index] === ',' && depth === 0) {
+      selectors.push(list.slice(start, index).trim());
+      start = index + 1;
+    }
+  }
+  selectors.push(list.slice(start).trim());
+  return selectors;
+}
+
+/**
+ * A pseudo-element is not valid inside :where() or :is() (Selectors Level 4).
+ * Both take a forgiving selector list, so the browser drops that entry rather
+ * than the rule, and the declarations silently stop reaching the
+ * pseudo-element. It goes after the :where(), as in `:where(*)::before`.
+ * reset.a11y.chromium.spec.ts measures the result in Chromium.
+ */
+describe('reset.css pseudo-element rules', () => {
+  let ruleBlocks: {selector: string; body: string}[];
+
+  beforeAll(() => {
+    const stripped = fs
+      .readFileSync(path.resolve(__dirname, './reset.css'), 'utf-8')
+      .replace(/\/\*[\s\S]*?\*\//g, '');
+    ruleBlocks = [...stripped.matchAll(/([^{}]+)\{([^{}]*)\}/g)].map(
+      ([, selector, body]) => ({selector: selector.trim(), body}),
+    );
+  });
+
+  it('keeps every pseudo-element outside :where() and :is()', () => {
+    for (const {selector} of ruleBlocks) {
+      for (const argument of forgivingListArguments(selector)) {
+        expect
+          .soft(argument, `"${selector}" puts a pseudo-element in a list`)
+          .not.toMatch(/::|:(?:before|after|first-line|first-letter)\b/);
+      }
+    }
+  });
+
+  it('targets ::before, ::after, ::placeholder and the search field parts', () => {
+    const selectorsFor = (declaration: string) =>
+      ruleBlocks
+        .filter(({body}) => body.includes(declaration))
+        .flatMap(({selector}) => topLevelSelectors(selector));
+    const endsWith = (declaration: string, pseudoElement: string) =>
+      selectorsFor(declaration).some(selector =>
+        selector.endsWith(pseudoElement),
+      );
+
+    for (const declaration of [
+      'box-sizing: border-box',
+      'border-style: solid',
+    ]) {
+      expect(endsWith(declaration, '::before'), declaration).toBe(true);
+      expect(endsWith(declaration, '::after'), declaration).toBe(true);
+    }
+    expect(endsWith('opacity: 1', '::placeholder')).toBe(true);
+    expect(
+      endsWith('-webkit-appearance: none', '::-webkit-search-decoration'),
+    ).toBe(true);
+    expect(
+      endsWith('-webkit-appearance: none', '::-webkit-search-cancel-button'),
+    ).toBe(true);
+  });
+
+  it('falls back to the --color-text-secondary default for placeholders', () => {
+    // A page that loads only the reset never defines the token. The fallback
+    // repeats the token's own default, so that page shows the placeholder an
+    // Astryx page does, at the contrast the token was chosen for.
+    const tokens = fs.readFileSync(
+      path.resolve(__dirname, './theme/tokens.stylex.ts'),
+      'utf-8',
+    );
+    const tokenDefault = tokens.match(
+      /'--color-text-secondary':\s*'([^']+)'/,
+    )?.[1];
+    expect(tokenDefault).toMatch(/^light-dark\(/);
+    const placeholder = ruleBlocks.find(({selector}) =>
+      selector.endsWith('::placeholder'),
+    );
+    expect(placeholder?.body).toContain(
+      `color: var(--color-text-secondary, ${tokenDefault});`,
+    );
+  });
+});

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

@@ -0,0 +1,198 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file SpacingRootFontSize.a11y.chromium.spec.ts
+ * @input The checked-in Stack and TableRowExpansion stories, and Chromium
+ * @output Browser evidence that spacing follows the root font size as text does
+ * @position Theme token proof (WCAG 2.2 SC 1.4.4 Resize Text). A reader who
+ *   raises the browser's font size gets larger text from the rem type scale;
+ *   the gaps and padding between that text have to grow with it, and stay
+ *   exactly as they were at the default 16px root.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+/** Each spacing token and the step it multiplies by the 4px base unit. */
+const SPACING_STEPS: Readonly<Record<string, number>> = {
+  '--spacing-0': 0,
+  '--spacing-0-5': 0.5,
+  '--spacing-1': 1,
+  '--spacing-1-5': 1.5,
+  '--spacing-2': 2,
+  '--spacing-3': 3,
+  '--spacing-4': 4,
+  '--spacing-5': 5,
+  '--spacing-6': 6,
+  '--spacing-7': 7,
+  '--spacing-8': 8,
+  '--spacing-9': 9,
+  '--spacing-10': 10,
+  '--spacing-11': 11,
+  '--spacing-12': 12,
+};
+
+let storybook: StaticServer;
+
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+async function openStory(
+  page: Page,
+  id: string,
+  rootFontSizePx: number,
+  globals = '',
+) {
+  const query = globals === '' ? '' : `&globals=${globals}`;
+  await page.goto(
+    `${storybook.origin}/iframe.html?id=${id}&viewMode=story${query}`,
+    {waitUntil: 'load'},
+  );
+  await page.locator('#storybook-root > *').first().waitFor();
+  // The browser's font-size setting changes the root font size; setting it
+  // on the root element is the same input, without restarting the browser.
+  await page.evaluate(size => {
+    document.documentElement.style.fontSize = `${size}px`;
+  }, rootFontSizePx);
+}
+
+/** Every spacing token's used length in px, read off a probe's width. */
+async function spacingLengths(page: Page): Promise<Record<string, number>> {
+  return page.evaluate(names => {
+    const probe = document.createElement('div');
+    probe.style.position = 'absolute';
+    document.body.append(probe);
+    const lengths: Record<string, number> = {};
+    for (const name of names) {
+      probe.style.width = `var(${name})`;
+      lengths[name] = Number.parseFloat(getComputedStyle(probe).width);
+    }
+    probe.remove();
+    return lengths;
+  }, Object.keys(SPACING_STEPS));
+}
+
+/** The left edge of the first text node that reads exactly `text`. */
+async function textLeft(page: Page, text: string): Promise<number> {
+  return page.evaluate(wanted => {
+    const walker = document.createTreeWalker(
+      document.body,
+      NodeFilter.SHOW_TEXT,
+    );
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      if (node.textContent?.trim() === wanted) {
+        const range = document.createRange();
+        range.selectNodeContents(node);
+        return range.getBoundingClientRect().left;
+      }
+    }
+    throw new Error(`no text node reads "${wanted}"`);
+  }, text);
+}
+
+for (const rootFontSizePx of [16, 20]) {
+  const scale = rootFontSizePx / 16;
+
+  test(`every spacing step is ${4 * scale}px × step at a ${rootFontSizePx}px root`, async ({
+    page,
+  }) => {
+    await openStory(page, 'core-stack--vertical', rootFontSizePx);
+    const lengths = await spacingLengths(page);
+    for (const [name, step] of Object.entries(SPACING_STEPS)) {
+      expect(lengths[name], name).toBeCloseTo(4 * scale * step, 3);
+    }
+  });
+
+  test(`a stack's gap grows with its text at a ${rootFontSizePx}px root`, async ({
+    page,
+  }) => {
+    await openStory(page, 'core-stack--vertical', rootFontSizePx);
+    const stack = page.getByText('Item 1', {exact: true}).locator('..');
+    const gap = await stack.evaluate(
+      element => getComputedStyle(element).rowGap,
+    );
+    // gap={4} is --spacing-4: 16px at the default root, 20px at 20px.
+    expect(gap).toBe(`${16 * scale}px`);
+  });
+}
+
+test('a detail panel keeps its place beside the first column at any root size', async ({
+  page,
+}) => {
+  // The chevron column is a fixed pixel width, so the panel's indent spells
+  // those pixels while its padding half follows the spacing scale, as the
+  // cell's own padding does. A larger root font size must not slide the
+  // panel's content away from the first column's.
+  const offsets: number[] = [];
+  // 32px is text at 200%, where the column's own insets would outgrow it.
+  for (const rootFontSizePx of [16, 20, 32]) {
+    await openStory(
+      page,
+      'core-tablerowexpansion--detail-panel',
+      rootFontSizePx,
+    );
+    await expect(page.getByText('Line items')).toBeVisible();
+    offsets.push(
+      (await textLeft(page, 'Line items')) -
+        (await textLeft(page, 'Ada Lovelace')),
+    );
+  }
+  expect(Math.abs(offsets[0])).toBeLessThanOrEqual(1);
+  for (const offset of offsets) {
+    expect(Math.abs(offset - offsets[0])).toBeLessThan(0.5);
+  }
+});
+
+test('the expansion chevron sits inside its column at any root size or spacing scale', async ({
+  page,
+}) => {
+  // The chevron column is a fixed pixel width while the cell's insets follow
+  // the spacing scale, so the chevron centers itself in the column instead of
+  // laying out after those insets and running past the column's edge.
+  for (const [rootFontSizePx, globals] of [
+    [16, ''],
+    [20, ''],
+    [32, ''],
+    [16, 'astryxTheme:matcha'],
+  ] as const) {
+    await openStory(
+      page,
+      'core-tablerowexpansion--detail-panel',
+      rootFontSizePx,
+      globals,
+    );
+    const chevron = page.locator('button[aria-expanded="true"]').first();
+    await expect(chevron).toBeVisible();
+    const {glyph, cell} = await chevron.evaluate(button => {
+      const box = (element: Element) => {
+        const rect = element.getBoundingClientRect();
+        return {left: rect.left, right: rect.right};
+      };
+      const svg = button.querySelector('svg');
+      const td = button.closest('td');
+      if (svg == null || td == null) {
+        throw new Error('missing chevron glyph or cell');
+      }
+      return {glyph: box(svg), cell: box(td)};
+    });
+    const where = `${rootFontSizePx}px root ${globals}`;
+    expect(cell.right - cell.left, where).toBeCloseTo(40, 0);
+    expect(glyph.left, where).toBeGreaterThanOrEqual(cell.left);
+    expect(glyph.right, where).toBeLessThanOrEqual(cell.right);
+    expect(
+      Math.abs((glyph.left + glyph.right) / 2 - (cell.left + cell.right) / 2),
+      where,
+    ).toBeLessThan(1);
+  }
+});

package/src/theme/tokens.stylex.ts

@@ -151,22 +151,25 @@ export const colorVars = stylex.defineVars(colorDefaults);
 // Spacing Tokens
 // =============================================================================
 
+// rem, like the type scale, so gaps and padding grow with the reader's root
+// font size instead of tightening around larger text. At the default 16px
+// root every step is still 4px × step: --spacing-2 is 8px, --spacing-4 16px.
 export const spacingDefaults = {
-  '--spacing-0': '0px',
-  '--spacing-0-5': '2px',
-  '--spacing-1': '4px',
-  '--spacing-1-5': '6px',
-  '--spacing-2': '8px',
-  '--spacing-3': '12px',
-  '--spacing-4': '16px',
-  '--spacing-5': '20px',
-  '--spacing-6': '24px',
-  '--spacing-7': '28px',
-  '--spacing-8': '32px',
-  '--spacing-9': '36px',
-  '--spacing-10': '40px',
-  '--spacing-11': '44px',
-  '--spacing-12': '48px',
+  '--spacing-0': '0rem',
+  '--spacing-0-5': '0.125rem',
+  '--spacing-1': '0.25rem',
+  '--spacing-1-5': '0.375rem',
+  '--spacing-2': '0.5rem',
+  '--spacing-3': '0.75rem',
+  '--spacing-4': '1rem',
+  '--spacing-5': '1.25rem',
+  '--spacing-6': '1.5rem',
+  '--spacing-7': '1.75rem',
+  '--spacing-8': '2rem',
+  '--spacing-9': '2.25rem',
+  '--spacing-10': '2.5rem',
+  '--spacing-11': '2.75rem',
+  '--spacing-12': '3rem',
 } as const;
 
 export const spacingVars = stylex.defineVars(spacingDefaults);

package/src/theme/tokens.test.ts

@@ -39,7 +39,7 @@ describe('resolveThemeTokens', () => {
   it('resolves defaults when no theme is provided', () => {
     const tokens = resolveThemeTokens(null, {mode: 'light'});
     expect(tokens['--color-text-primary']).toBe('#0A1317');
-    expect(tokens['--spacing-1']).toBe('4px');
+    expect(tokens['--spacing-1']).toBe('0.25rem');
     expect(tokens['--border-width']).toBe('1px');
   });
 

package/src/theme/useTheme.test.tsx

@@ -42,7 +42,7 @@ describe('useTheme', () => {
     expect(result.current.name).toBe('default');
     // Should resolve default light-dark() tokens for light mode (useMediaQuery mocked to false = light)
     expect(result.current.token('--color-text-primary')).toBe('#0A1317');
-    expect(result.current.token('--spacing-1')).toBe('4px');
+    expect(result.current.token('--spacing-1')).toBe('0.25rem');
     expect(result.current.mode).toBe('light');
   });
 
@@ -78,8 +78,8 @@ describe('useTheme', () => {
     const {result} = renderHook(() => useTheme(), {
       wrapper: ({children}) => wrapper({children, mode: 'light'}),
     });
-    // --spacing-1 is not overridden — should be the default '4px'
-    expect(result.current.token('--spacing-1')).toBe('4px');
+    // --spacing-1 is not overridden — should be the default '0.25rem'
+    expect(result.current.token('--spacing-1')).toBe('0.25rem');
     expect(result.current.token('--border-width')).toBe('1px');
   });
 
@@ -139,7 +139,7 @@ describe('useTheme', () => {
     const tokens = result.current.tokens;
     expect(tokens['--color-accent']).toBe('#AA0000');
     expect(tokens['--spacing-4']).toBe('20px');
-    expect(tokens['--spacing-1']).toBe('4px');
+    expect(tokens['--spacing-1']).toBe('0.25rem');
   });
 
   it('uses the same token resolution as resolveThemeTokens', () => {

package/src/theme/useTheme.ts

@@ -81,7 +81,7 @@ export interface UseThemeReturn {
    * @example
    * ```
    * const accent = token('--color-accent'); // "#0064E0" in light mode
-   * const spacing = token('--spacing-4');   // "16px"
+   * const spacing = token('--spacing-4');   // "1rem"
    * ```
    */
   token: (name: string) => string;