fix(ui): align component theme and login step visibility

tests/unit/component-theme.test.tsadded+24-0

Changes to tests/unit/component-theme.test.ts

		@@ -0,0 +1,24 @@
	1	+import { describe, expect, test } from 'bun:test'
	2	+import theme from '../../config/crosswind'
	3	+// STX exposes its selected CSS engine through these installed files.
	4	+import { loadCssEngine } from '../../node_modules/@stacksjs/stx/dist/dev-server/ts-css.js'
	5	+import { SEMANTIC_TOKENS, SHAPE_TOKENS } from '../../node_modules/@stacksjs/stx/dist/theme-tokens.js'
	6	+import { mergeCssConfig } from '../../node_modules/@stacksjs/stx/dist/ts-css-config.js'
	7	+
	8	+describe('component palette contract', () => {
	9	+ test('every component color and radius emits an app-owned utility', async () => {
	10	+ const engine = await loadCssEngine()
	11	+ if (!engine) throw new Error('The installed STX CSS engine is required')
	12	+ const generator = new engine.CSSGenerator(mergeCssConfig(engine.defaultConfig || engine.config, theme).config)
	13	+ for (const role of Object.keys(SEMANTIC_TOKENS)) generator.generate(`bg-${role}`)
	14	+ for (const role of Object.keys(SHAPE_TOKENS)) generator.generate(`rounded-${role}`)
	15	+ const css = generator.toCSS(false, false)
	16	+ expect(css).not.toContain('var(--stx-')
	17	+ for (const role of Object.keys(SEMANTIC_TOKENS)) expect(css).toContain(`.bg-${role} {`)
	18	+ for (const role of Object.keys(SHAPE_TOKENS)) expect(css).toContain(`.rounded-${role} {`)
	19	+ expect(css).toContain('.bg-content {\n background-color: var(--panel);')
	20	+ expect(css).toContain('.bg-accent-solid {\n background-color: var(--accent);')
	21	+ expect(css).toContain('.rounded-control {\n border-radius: 8px;')
	22	+ expect(css).toContain('.rounded-panel {\n border-radius: 0.75rem;')
	23	+ })
	24	+})