basalt-ui 1.27.0 → 1.29.0

package/src/theme/layout-rhythm-css.test.ts

@@ -1,72 +0,0 @@
-/**
- * CSS-text regression tests for two shell rules that broke silently because neither is exercised
- * by a render test: `.footerVersion`'s collapsed-rail hide (a corrupted selector left it unscoped,
- * hiding the sidebar version label at every desktop viewport) and the sticky page-bar rows' z-index
- * (a bare `1` let ordinary in-flow content — Mantine's Input section, Indicator, sticky table
- * headers — paint over them while scrolling).
- *
- * Both are asserted against the raw `.module.css` source text rather than through jsdom: jsdom does
- * not implement CSS cascade/specificity resolution or `getComputedStyle` for stacking, so a
- * render-based test cannot see either regression. Reading the source text directly is what actually
- * pins the rule shape.
- */
-import { readFileSync } from 'node:fs'
-import { join } from 'node:path'
-import { describe, expect, it } from 'bun:test'
-
-const APP_SIDEBAR_CSS = readFileSync(
-  join(import.meta.dir, '../shell/app-sidebar.module.css'),
-  'utf8',
-)
-const PAGE_BAR_CSS = readFileSync(join(import.meta.dir, '../shell/page-bar.module.css'), 'utf8')
-
-/** The `@media (min-width: 48em)` rail block — where `[data-collapsed]` rules live. */
-function railBlock(css: string): string {
-  const start = css.indexOf('@media (min-width: 48em)')
-  expect(start).toBeGreaterThanOrEqual(0)
-  return css.slice(start)
-}
-
-describe('app-sidebar.module.css — collapsed-rail `.footerVersion` hide', () => {
-  const rail = railBlock(APP_SIDEBAR_CSS)
-
-  it('scopes the version-label hide to `.root[data-collapsed]`, not a bare `.footerVersion`', () => {
-    expect(rail).toContain('.root[data-collapsed] .footerVersion {\n    display: none;\n  }')
-  })
-
-  it('never declares an unscoped `.footerVersion` rule inside the rail media query', () => {
-    // A bare `.footerVersion {` (no `[data-collapsed]` ancestor on the same rule) would hide the
-    // version label at every desktop viewport, expanded or collapsed — the exact regression.
-    for (const m of rail.matchAll(/([^{}\n]+)\{\s*display:\s*none;\s*\}/g)) {
-      const selector = m[1]!.trim()
-      if (!selector.endsWith('.footerVersion')) continue
-      expect(selector).toContain('[data-collapsed]')
-    }
-  })
-
-  it('does not duplicate the base `.footerIconSlot` rule inside the rail media query', () => {
-    // The real `.footerIconSlot` rule is declared once, outside the media query — a stray copy
-    // inside `@media (min-width: 48em)` is the corruption artifact this test guards against.
-    expect([...rail.matchAll(/\.footerIconSlot\s*\{/g)]).toHaveLength(0)
-  })
-})
-
-describe('page-bar.module.css — sticky rows sit under the AppShell header, above page content', () => {
-  it('`.bar` sits one layer below the AppShell header, not at the bare `z-index: 1` every sibling can equal', () => {
-    const bar = PAGE_BAR_CSS.slice(
-      PAGE_BAR_CSS.indexOf('.bar {'),
-      PAGE_BAR_CSS.indexOf('\n}', PAGE_BAR_CSS.indexOf('.bar {')),
-    )
-    expect(bar).toContain('z-index: calc(var(--app-shell-header-z-index, 100) - 1);')
-    expect(bar).not.toMatch(/z-index:\s*1\s*;/)
-  })
-
-  it('`.row2Sticky` uses the same header-relative z-index as `.bar`, so the two never fall out of sync', () => {
-    const row2 = PAGE_BAR_CSS.slice(
-      PAGE_BAR_CSS.indexOf('.row2Sticky {'),
-      PAGE_BAR_CSS.indexOf('\n}', PAGE_BAR_CSS.indexOf('.row2Sticky {')),
-    )
-    expect(row2).toContain('z-index: calc(var(--app-shell-header-z-index, 100) - 1);')
-    expect(row2).not.toMatch(/z-index:\s*1\s*;/)
-  })
-})

package/src/theme/radius-option.test.ts

@@ -1,86 +0,0 @@
-/**
- * `createBasaltTheme`'s `{ radius }` option — the graduation of `deriveRadius` into a first-class
- * consumer API. Mirrors `derive-theme.test.ts`'s two invariants:
- *
- *  1. The DEFAULT path (no `options`, or `radius: 0`) stays byte-identical to the pre-baked static
- *     `baseTheme` — `theme.other.basaltRadius` stays unset, and `radius.test.ts` (untouched) stays
- *     green.
- *  2. A NON-default level rebuilds every radius-anchored `defaultProps`/`styles` number AND the
- *     `radius` size-scale from `deriveRadius(level)`'s output, and lands it on
- *     `theme.other.basaltRadius`.
- */
-import { describe, expect, test } from 'bun:test'
-import { deriveRadius } from '../tokens/palette'
-import { createBasaltTheme } from './index'
-
-describe('the default level stays on the static path', () => {
-  test('createBasaltTheme() carries no theme.other.basaltRadius', () => {
-    expect(createBasaltTheme().other?.['basaltRadius']).toBeUndefined()
-  })
-
-  test('createBasaltTheme(undefined, {}) resolves to the same default', () => {
-    expect(createBasaltTheme(undefined, {}).other?.['basaltRadius']).toBeUndefined()
-  })
-
-  test('an explicit radius: 0 also carries no basaltRadius', () => {
-    expect(createBasaltTheme(undefined, { radius: 0 }).other?.['basaltRadius']).toBeUndefined()
-  })
-})
-
-describe('a non-default radius level graduates onto the theme', () => {
-  const theme = createBasaltTheme(undefined, { radius: 2 })
-  const expected = deriveRadius(2)
-
-  test('the resolved values land on theme.other.basaltRadius', () => {
-    expect(theme.other?.['basaltRadius']).toEqual(expected)
-  })
-
-  test('Tooltip/Modal defaultProps radius follows floating (card + 1 = 10)', () => {
-    expect(theme.components?.['Tooltip']?.defaultProps?.['radius']).toBe(10)
-    expect(theme.components?.['Modal']?.defaultProps?.['radius']).toBe(10)
-  })
-
-  test('the radius size-scale md step reflects ctrl (8)', () => {
-    expect(theme.radius?.md).toBe(`${8 / 16}rem`)
-  })
-
-  test('the independent scale steps (xs/lg/xl) stay fixed', () => {
-    expect(theme.radius?.xs).toBe(`${2 / 16}rem`)
-    expect(theme.radius?.lg).toBe(`${16 / 16}rem`)
-    expect(theme.radius?.xl).toBe(`${32 / 16}rem`)
-  })
-})
-
-describe('the default theme is unchanged by the radius option existing', () => {
-  test('createBasaltTheme() still matches the shipped level-0 numbers', () => {
-    const theme = createBasaltTheme()
-    expect(theme.components?.['Tooltip']?.defaultProps?.['radius']).toBe(8)
-    expect(theme.components?.['Badge']?.defaultProps?.['radius']).toBe(6)
-  })
-})
-
-describe('a malformed radius level throws through createBasaltTheme', () => {
-  test('rejects a non-integer', () => {
-    expect(() => createBasaltTheme(undefined, { radius: 1.5 })).toThrow()
-  })
-
-  test('rejects an out-of-range level', () => {
-    expect(() => createBasaltTheme(undefined, { radius: 10 })).toThrow()
-  })
-})
-
-describe('consumer overrides still win on top of a radius option', () => {
-  test('an explicit override merges onto the radius-rebuilt theme', () => {
-    const theme = createBasaltTheme({ primaryColor: 'green' }, { radius: 2 })
-    expect(theme.primaryColor).toBe('green')
-    expect(theme.other?.['basaltRadius']).toEqual(deriveRadius(2))
-  })
-})
-
-describe('radius and derive combine without dropping either', () => {
-  test('both land on theme.other', () => {
-    const theme = createBasaltTheme(undefined, { derive: { accent: '#16a34a' }, radius: 2 })
-    expect(theme.other?.['basaltDerive']).toBeDefined()
-    expect(theme.other?.['basaltRadius']).toEqual(deriveRadius(2))
-  })
-})

package/src/theme/radius.test.ts

@@ -1,142 +0,0 @@
-/**
- * The radius gate — this is a TOKENIZATION-only refactor (`RADIUS`/`RADIUS_STEP` in
- * `tokens/palette.ts` replace ~10 components' hardcoded `defaultProps`/`styles` radius literals,
- * the Mantine `radius` size-scale, and the `--vx-radius-card`/`--vx-radius-ctrl` CSS vars), so the
- * rendered output must stay byte-identical to the numbers shipped before it. This locks today's
- * exact values as the acceptance baseline — a future change to `RADIUS.card`/`RADIUS.ctrl` (or any
- * `RADIUS_STEP` offset) that moves one of these numbers is a deliberate visual change, not a
- * silent regression, and must update this file in the same commit.
- */
-import { describe, expect, test } from 'bun:test'
-import { buildPaletteCss } from '../tokens'
-import { RADIUS, RADIUS_STEP } from '../tokens/palette'
-import { baseTheme } from './index'
-
-describe('the two anchors match the shipped identity', () => {
-  test('RADIUS.card is 7', () => {
-    expect(RADIUS.card).toBe(7)
-  })
-
-  test('RADIUS.ctrl is 6', () => {
-    expect(RADIUS.ctrl).toBe(6)
-  })
-})
-
-describe('every derived/independent step reproduces its exact shipped number', () => {
-  test('floating (Tooltip/Popover/Modal/Notification) = card + 1 = 8', () => {
-    expect(RADIUS_STEP.floating).toBe(8)
-  })
-
-  test('tight (SegmentedControl indicator, Kbd, Code) = ctrl - 1 = 5', () => {
-    expect(RADIUS_STEP.tight).toBe(5)
-  })
-
-  test('fine (Progress, Mantine scale sm) = ctrl - 2 = 4', () => {
-    expect(RADIUS_STEP.fine).toBe(4)
-  })
-
-  test('the independent Mantine-scale steps are unchanged', () => {
-    expect(RADIUS_STEP.scaleXs).toBe(2)
-    expect(RADIUS_STEP.scaleLg).toBe(16)
-    expect(RADIUS_STEP.scaleXl).toBe(32)
-  })
-
-  test('the pill affordance is fixed at 9999, independent of the radius knob', () => {
-    expect(RADIUS_STEP.pill).toBe(9999)
-  })
-})
-
-describe('the Mantine radius size-scale is byte-identical to the pre-tokenization literals', () => {
-  test('xs/sm/md/lg/xl resolve to the exact prior rem strings', () => {
-    expect(baseTheme.radius).toEqual({
-      xs: '0.125rem',
-      sm: '0.25rem',
-      md: '0.375rem',
-      lg: '1rem',
-      xl: '2rem',
-    })
-  })
-
-  test('defaultRadius stays "md" (= RADIUS.ctrl)', () => {
-    expect(baseTheme.defaultRadius).toBe('md')
-  })
-})
-
-describe('every re-pointed component defaultProps/styles radius matches its shipped number', () => {
-  test('Badge = 6', () => {
-    expect(baseTheme.components?.['Badge']?.defaultProps?.['radius']).toBe(6)
-  })
-
-  test('SegmentedControl root = 7, indicator = 5', () => {
-    const sc = baseTheme.components?.['SegmentedControl']
-    expect(sc?.defaultProps?.['radius']).toBe(7)
-    // `styles` is function-form (size='ctl' gates a label override — see `theme/index.ts`), not a
-    // flat object, so it has to be called rather than indexed directly.
-    const stylesFn = sc?.styles as
-      | ((
-          theme: unknown,
-          props: { size?: string },
-          ctx: unknown,
-        ) => Record<string, Record<string, unknown>>)
-      | undefined
-    const resolved = stylesFn?.({}, {}, {})
-    expect(resolved?.['indicator']?.['borderRadius']).toBe('var(--vx-radius-tight)')
-  })
-
-  test('Progress = 4', () => {
-    expect(baseTheme.components?.['Progress']?.defaultProps?.['radius']).toBe(4)
-  })
-
-  test('Tooltip = 8', () => {
-    expect(baseTheme.components?.['Tooltip']?.defaultProps?.['radius']).toBe(8)
-  })
-
-  test('Popover = 8', () => {
-    expect(baseTheme.components?.['Popover']?.defaultProps?.['radius']).toBe(8)
-  })
-
-  test('Modal = 8', () => {
-    expect(baseTheme.components?.['Modal']?.defaultProps?.['radius']).toBe(8)
-  })
-
-  test('Notification = 8', () => {
-    expect(baseTheme.components?.['Notification']?.defaultProps?.['radius']).toBe(8)
-  })
-
-  test('NavLink root = 6', () => {
-    expect(baseTheme.components?.['NavLink']?.styles?.['root']?.['borderRadius']).toBe(
-      'var(--vx-radius-ctrl)',
-    )
-  })
-
-  test('Menu item = 6', () => {
-    expect(baseTheme.components?.['Menu']?.styles?.['item']?.['borderRadius']).toBe(
-      'var(--vx-radius-ctrl)',
-    )
-  })
-
-  test('Kbd = 5', () => {
-    expect(baseTheme.components?.['Kbd']?.styles?.['root']?.['borderRadius']).toBe(
-      'var(--vx-radius-tight)',
-    )
-  })
-
-  test('Code = 5', () => {
-    expect(baseTheme.components?.['Code']?.styles?.['root']?.['borderRadius']).toBe(
-      'var(--vx-radius-tight)',
-    )
-  })
-})
-
-describe('--vx-radius-card / --vx-radius-ctrl are emitted from the SAME constants', () => {
-  const css = buildPaletteCss()
-
-  test('emits 7px / 6px, unchanged', () => {
-    expect(css).toContain('--vx-radius-card: 7px;')
-    expect(css).toContain('--vx-radius-ctrl: 6px;')
-  })
-
-  test('emits the fixed pill radius', () => {
-    expect(css).toContain('--vx-radius-pill: 9999px;')
-  })
-})