@hanzogui/kitchen-sink 3.0.5

package/tests/StyledContextColor.test.tsx

@@ -0,0 +1,119 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+// Test for GitHub issue #3676 - Context Values Not Accessible in Children Styles
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledContextColor', type: 'useCase' })
+})
+
+test(`standard Button passes color to text children`, async ({ page }) => {
+  // Find the button and get the text element inside
+  const button = page.getByTestId('standard-button-green')
+  await expect(button).toBeVisible()
+
+  // The text inside the button should have green color
+  const text = button.locator('span').first()
+  const styles = await getStyles(text)
+
+  // Color should be green (rgb format)
+  expect(styles.color).toContain('0, 128, 0') // green in rgb
+})
+
+test(`custom button with color variant passes color to ButtonText via context`, async ({
+  page,
+}) => {
+  const button = page.getByTestId('custom-button-green')
+  await expect(button).toBeVisible()
+
+  // Find the text element inside
+  const text = button.locator('span').first()
+  const textStyles = await getStyles(text)
+
+  // Text should be green - this is the core issue from #3676
+  // The color variant on the parent should propagate to children via context
+  expect(textStyles.color).toContain('0, 128, 0') // green in rgb
+})
+
+test(`custom button with red color variant passes to text`, async ({ page }) => {
+  const button = page.getByTestId('custom-button-red')
+  await expect(button).toBeVisible()
+
+  const text = button.locator('span').first()
+  const textStyles = await getStyles(text)
+
+  // Text should be red
+  expect(textStyles.color).toContain('255, 0, 0') // red in rgb
+})
+
+test(`explicit context provider passes color to children`, async ({ page }) => {
+  const text = page.getByTestId('context-text-blue')
+  await expect(text).toBeVisible()
+
+  const textStyles = await getStyles(text)
+
+  // Text should be blue
+  expect(textStyles.color).toContain('0, 0, 255') // blue in rgb
+})
+
+// This is the key test for issue #3676 - $color reference to context value
+// Test with explicit Provider (like direct Button usage with color prop)
+test(`$color reference in child variant gets parent color from Provider (issue #3676)`, async ({
+  page,
+}) => {
+  const text = page.getByTestId('context-ref-text-link')
+  await expect(text).toBeVisible()
+
+  const textStyles = await getStyles(text)
+
+  // Text should be green because:
+  // 1. Provider sets color: 'green'
+  // 2. Child uses color: '$color' which should resolve to 'green' from context
+  expect(textStyles.color).toContain('0, 128, 0') // green in rgb
+})
+
+// Test with variant setting color (more complex case)
+test(`$color reference works when parent variant sets color`, async ({ page }) => {
+  const button = page.getByTestId('context-ref-button-primary')
+  await expect(button).toBeVisible()
+
+  const text = button.locator('span').first()
+  const textStyles = await getStyles(text)
+
+  // Text should be blue from the primary variant's color
+  expect(textStyles.color).toContain('0, 0, 255') // blue in rgb
+})
+
+// Issue #3670 - pressStyle color not working on styled Button
+// Requires disableClassName to enable runtime press handling (not CSS transitions)
+test(`pressStyle color propagates to children via context (issue #3670)`, async ({
+  page,
+}) => {
+  const button = page.getByTestId('press-style-button')
+  await expect(button).toBeVisible()
+
+  const text = button.locator('span').first()
+
+  // Initially should be green
+  const initialStyles = await getStyles(text)
+  expect(initialStyles.color).toContain('0, 128, 0') // green in rgb
+
+  // Press and hold the button using mouse down (triggers onPressIn)
+  await button.hover()
+  await page.mouse.down()
+  await page.waitForTimeout(200)
+
+  // While pressed, text should be red
+  const pressedStyles = await getStyles(text)
+  expect(pressedStyles.color).toContain('255, 0, 0') // red in rgb
+
+  // Release
+  await page.mouse.up()
+  await page.waitForTimeout(100)
+
+  // After release, should be back to green
+  const releasedStyles = await getStyles(text)
+  expect(releasedStyles.color).toContain('0, 128, 0') // green in rgb
+})

package/tests/StyledContextTokens.test.tsx

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for styled context token preservation (issues #3670, #3676)
+ *
+ * When a parent component sets a context value via a variant (like gap: '$8'),
+ * child components should receive the original token string ('$8') in their
+ * functional variants, NOT the resolved CSS variable ('var(--t-space-8)').
+ *
+ * This is important because functional variants need the token string to
+ * look up values in the tokens object.
+ */
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledContextTokens', type: 'useCase' })
+})
+
+test('variant should pass token string to context, not CSS variable - small spacing', async ({
+  page,
+}) => {
+  // The debug display shows what gap value the child received via context
+  const gapValue = await page.locator('#debug-small-gap-value').textContent()
+
+  // Should be '$2' (the token string), not 'var(--t-space-2)' (the CSS variable)
+  expect(gapValue).toBe('$2')
+})
+
+test('variant should pass token string to context, not CSS variable - large spacing', async ({
+  page,
+}) => {
+  const gapValue = await page.locator('#debug-large-gap-value').textContent()
+
+  // Should be '$8' (the token string), not 'var(--t-space-8)' (the CSS variable)
+  expect(gapValue).toBe('$8')
+})
+
+test('default context value should be preserved as token string', async ({ page }) => {
+  const gapValue = await page.locator('#debug-default-gap-value').textContent()
+
+  // Default context value should also be a token string
+  expect(gapValue).toBe('$4')
+})
+
+test('debug display should show green background when token is preserved', async ({
+  page,
+}) => {
+  // The debug display has green background if gap is a token string, red if CSS variable
+  const debugSmall = page.locator('#debug-small')
+  const bgColor = await debugSmall.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+  // Green-ish color indicates token was preserved (using $green5 theme token)
+  // This is a sanity check that our isToken logic in the component is working
+  expect(bgColor).not.toBe('rgb(254, 202, 202)') // not red ($red5)
+})

package/tests/StyledHOCNamed.test.tsx

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test'
+
+import { getStyles } from './utils'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledHOCNamed', type: 'useCase' })
+})
+
+test(`styled() name works on HOC`, async ({ page }) => {
+  const textStyles = await getStyles(page.getByTestId('text-named').first())
+  expect(textStyles.color).toBe(`rgb(255, 0, 0)`)
+
+  const labelStyles = await getStyles(page.getByTestId('label-named').first())
+  expect(labelStyles.color).toBe(`rgb(255, 0, 0)`)
+})

package/tests/StyledHtml.test.tsx

@@ -0,0 +1,161 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledHtmlCase', type: 'useCase' })
+})
+
+test.describe('styled.element() API', () => {
+  test.describe('styled.a()', () => {
+    test('renders anchor element with proper tag', async ({ page }) => {
+      const element = page.getByTestId('styled-a')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('a')
+    })
+
+    test('accepts href attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-a')
+      expect(await element.getAttribute('href')).toBe('https://example.com')
+    })
+
+    test('accepts target attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-a')
+      expect(await element.getAttribute('target')).toBe('_blank')
+    })
+
+    test('accepts rel attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-a')
+      expect(await element.getAttribute('rel')).toBe('noopener')
+    })
+  })
+
+  test.describe('styled.button()', () => {
+    test('renders button element with proper tag', async ({ page }) => {
+      const element = page.getByTestId('styled-button')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('button')
+    })
+
+    test('accepts type attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-button')
+      expect(await element.getAttribute('type')).toBe('submit')
+    })
+  })
+
+  test.describe('styled.div()', () => {
+    test('renders div element', async ({ page }) => {
+      const element = page.getByTestId('styled-div')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('div')
+    })
+  })
+
+  test.describe('styled.span()', () => {
+    test('renders span element', async ({ page }) => {
+      const element = page.getByTestId('styled-span')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('span')
+    })
+  })
+
+  test.describe('styled.input()', () => {
+    test('renders input element with proper tag', async ({ page }) => {
+      const element = page.getByTestId('styled-input')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('input')
+    })
+
+    test('accepts type attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-input')
+      expect(await element.getAttribute('type')).toBe('text')
+    })
+
+    test('accepts placeholder attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-input')
+      expect(await element.getAttribute('placeholder')).toBe('Enter text')
+    })
+
+    test('accepts maxLength attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-input')
+      expect(await element.getAttribute('maxlength')).toBe('100')
+    })
+  })
+
+  test.describe('styled.form()', () => {
+    test('renders form element with proper tag', async ({ page }) => {
+      const element = page.getByTestId('styled-form')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('form')
+    })
+
+    test('accepts action attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-form')
+      expect(await element.getAttribute('action')).toBe('/submit')
+    })
+
+    test('accepts method attribute', async ({ page }) => {
+      const element = page.getByTestId('styled-form')
+      expect(await element.getAttribute('method')).toBe('post')
+    })
+  })
+
+  test.describe('styled.label()', () => {
+    test('renders label element with proper tag', async ({ page }) => {
+      const element = page.getByTestId('styled-label')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('label')
+    })
+
+    test('accepts htmlFor attribute (rendered as for)', async ({ page }) => {
+      const element = page.getByTestId('styled-label')
+      expect(await element.getAttribute('for')).toBe('test-input')
+    })
+  })
+
+  test.describe('semantic elements', () => {
+    test('styled.nav() renders nav element', async ({ page }) => {
+      const element = page.getByTestId('styled-nav')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('nav')
+    })
+
+    test('styled.main() renders main element', async ({ page }) => {
+      const element = page.getByTestId('styled-main')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('main')
+    })
+
+    test('styled.section() renders section element', async ({ page }) => {
+      const element = page.getByTestId('styled-section')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('section')
+    })
+  })
+
+  test.describe('styled.a() with variants', () => {
+    test('renders with large size variant', async ({ page }) => {
+      const element = page.getByTestId('styled-a-variants')
+      await expect(element).toBeVisible()
+      const tagName = await element.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('a')
+      expect(await element.getAttribute('href')).toBe('/internal')
+    })
+
+    test('renders with small size variant', async ({ page }) => {
+      const element = page.getByTestId('styled-a-variants-small')
+      await expect(element).toBeVisible()
+      expect(await element.getAttribute('href')).toBe('/small')
+    })
+  })
+})

package/tests/StyledIconColor.test.tsx

@@ -0,0 +1,32 @@
+import { expect, test } from '@playwright/test'
+
+test('styled() icon respects color prop', async ({ page }) => {
+  await page.goto('/?test=StyledIconColor')
+  await page.waitForTimeout(1000)
+
+  // Helper to get computed stroke color from SVG path
+  // Uses computedStyle to resolve CSS variables like var(--color)
+  async function getSvgStrokeColor(testId: string) {
+    const element = page.getByTestId(testId)
+    await expect(element).toBeVisible()
+    // The testID is on the svg, path has stroke
+    const path = element.locator('path').first()
+    return await path.evaluate((el) => getComputedStyle(el).stroke)
+  }
+
+  // Direct color prop should work
+  const directColor = await getSvgStrokeColor('direct-blue')
+  expect(directColor).toBe('rgb(0, 0, 255)') // blue
+
+  // styled() with color should work
+  const redColor = await getSvgStrokeColor('styled-red')
+  expect(redColor).toBe('rgb(255, 0, 0)') // red
+
+  // another styled() with different color
+  const greenColor = await getSvgStrokeColor('styled-green')
+  expect(greenColor).toBe('rgb(0, 128, 0)') // green
+
+  // runtime prop should override styled() default
+  const purpleColor = await getSvgStrokeColor('override-purple')
+  expect(purpleColor).toBe('rgb(128, 0, 128)') // purple
+})

package/tests/StyledInputFocusStyle.test.tsx

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledInputFocusStyle', type: 'useCase' })
+})
+
+test(`styled input + focusStyle`, async ({ page }) => {
+  const input = page.locator('input')
+
+  await input.focus()
+
+  const styles = await input.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.borderColor).toBe(`rgb(0, 0, 255)`)
+  expect(styles.borderWidth).toBe(`10px`)
+})

package/tests/StyledInputOnFocus.test.tsx

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledInputOnFocus', type: 'useCase' })
+})
+
+test(`styled input + onFocus`, async ({ page }) => {
+  const input = page.locator('#onFocus')
+
+  await input.focus()
+
+  await page.waitForFunction(
+    async () => {
+      const inputElement = document.querySelector('#onFocus')
+      return inputElement?.getAttribute('data-onfocus') === 'true'
+    },
+    { timeout: 2000 }
+  )
+
+  const styles = await input.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.borderColor).toBe(`rgb(0, 0, 255)`)
+  expect(styles.borderWidth).toBe(`10px`)
+})

package/tests/StyledMediaQueryMerge.test.tsx

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles, getHoverStyle } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledMediaQueryMerge', type: 'useCase' })
+  await page.setViewportSize({ width: 700, height: 600 })
+})
+
+test(`styled component media query merge works correctly`, async ({ page }) => {
+  // Test 1: $sm media query merge
+  const test1 = page.locator('#test1')
+  const styles1 = await getStyles(test1)
+
+  // Test 2: $md media query merge
+  const test2 = page.locator('#test2')
+  const styles2 = await getStyles(test2)
+
+  // Test 3: Both media queries
+  const test3 = page.locator('#test3')
+  const styles3 = await getStyles(test3)
+
+  // Test 4: Pseudo selector merge
+  const test4 = page.locator('#test4')
+  const styles4 = await getStyles(test4)
+
+  // Test 5: Direct component
+  const test5 = page.locator('#test5')
+  const styles5 = await getStyles(test5)
+
+  // Test 1: $sm should have styled definition + runtime override
+  expect(styles1.paddingTop).toBe('100px')
+  expect(styles1.marginLeft).toBe('100px')
+  expect(styles1.marginRight).toBe('100px')
+  expect(styles1.height).toBe('100px')
+  expect(styles1.width).toBe('100px')
+  expect(styles1.backgroundColor).toBe('rgb(0, 0, 255)') // blue (runtime override)
+
+  // Test 2: $sm should have styled definition + runtime override
+  expect(styles2.paddingTop).toBe('100px')
+  expect(styles2.marginLeft).toBe('100px')
+  expect(styles2.marginRight).toBe('100px')
+  expect(styles2.height).toBe('100px')
+  expect(styles2.width).toBe('100px')
+  expect(styles2.backgroundColor).toBe('rgb(128, 0, 128)') // purple (runtime override)
+
+  // Test 3: $sm media query should be merged with runtime override
+  expect(styles3.paddingTop).toBe('100px') // from $sm
+  expect(styles3.marginLeft).toBe('100px') // from $sm
+  expect(styles3.marginRight).toBe('100px') // from $sm
+  expect(styles3.height).toBe('100px') // from $sm
+  expect(styles3.width).toBe('100px') // from $sm
+  expect(styles3.backgroundColor).toBe('rgb(0, 0, 255)') // blue (from $sm runtime override)
+
+  // Test 4: Pseudo selectors should be merged (runtime override)
+  // Test hover state - runtime override should take precedence
+  const hoverStyles4 = await getHoverStyle(test4)
+  expect(hoverStyles4.backgroundColor).toBe('rgb(0, 255, 255)') // cyan (runtime override)
+
+  // Test 5: Direct component should work as expected
+  expect(styles5.paddingTop).toBe('50px')
+  expect(styles5.marginLeft).toBe('50px')
+  expect(styles5.marginRight).toBe('50px')
+  expect(styles5.backgroundColor).toBe('rgb(165, 42, 42)') // brown
+})

package/tests/StyledRNW.test.tsx

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledRNW', type: 'useCase' })
+})
+
+test(`RNW + styled() + styleable() twice`, async ({ page }) => {
+  const inputStyles = await getStyles(page.locator('#styled-rnw-input'))
+  expect(inputStyles.fontFamily).toBe(
+    `Silkscreen, "Fira Code", Monaco, Consolas, "Ubuntu Mono", monospace`
+  )
+  expect(inputStyles.paddingLeft).toBe(`14px`)
+  expect(inputStyles.paddingTop).toBe(`12px`)
+})

package/tests/StyledStyleableInputOnFocus.test.tsx

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledStyleableInputOnFocus', type: 'useCase' })
+})
+
+test(`styled styleable input + onFocus`, async ({ page }) => {
+  const input = page.locator('#onFocus')
+
+  await input.focus()
+
+  await page.waitForFunction(
+    async () => {
+      const inputElement = document.querySelector('#onFocus')
+      return inputElement?.getAttribute('data-onfocus') === 'true'
+    },
+    { timeout: 2000 }
+  )
+
+  const styles = await input.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.borderColor).toBe(`rgb(0, 0, 255)`)
+  expect(styles.borderWidth).toBe(`10px`)
+})

package/tests/StyledStyleableInputVariant.test.tsx

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledStyleableInputVariant', type: 'useCase' })
+})
+
+test(`styled(styleable(styled(RNView))) applies proper variant overrides`, async ({
+  page,
+}) => {
+  const styles = await getStyles(page.locator('#input').first())
+
+  expect(styles.color).toBe('rgb(255, 0, 0)')
+  expect(styles.borderTopLeftRadius).toBe('100px')
+  expect(styles.borderColor).toBe('rgb(255, 0, 0)')
+
+  await page.locator('#input').focus()
+  const focusStyle = await getStyles(page.locator('#input').first())
+  expect(focusStyle.borderColor).toBe('rgb(0, 128, 0)')
+})

package/tests/StyledStyledStyleableInputOnFocus.test.tsx

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledStyledStyleableInputOnFocus', type: 'useCase' })
+})
+
+test(`styled styleable input + onFocus`, async ({ page }) => {
+  const input = page.locator('#onFocus')
+
+  await input.focus()
+
+  await page.waitForFunction(
+    async () => {
+      const inputElement = document.querySelector('#onFocus')
+      return inputElement?.getAttribute('data-onfocus') === 'true'
+    },
+    { timeout: 2000 }
+  )
+
+  const styles = await input.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.borderColor).toBe(`rgb(0, 0, 255)`)
+  expect(styles.borderWidth).toBe(`10px`)
+})

package/tests/StyledVariantTextColor.test.tsx

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+
+import { getStyles } from './utils'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledVariantTextColor', type: 'useCase' })
+})
+
+test(`sets text colors with variants + theme`, async ({ page }) => {
+  const defaultStyles = await getStyles(page.getByTestId('default').first())
+  const defaultStylesFlat = await getStyles(page.getByTestId('default-flat').first())
+
+  // $color - updated for themeDev
+  expect(defaultStyles.color).toBe('rgb(17, 50, 100)')
+  expect(defaultStylesFlat.color).toBe(defaultStyles.color)
+
+  const activeStyles = await getStyles(page.getByTestId('active').first())
+  const activeStylesFlat = await getStyles(page.getByTestId('active-flat').first())
+
+  // $color10 - updated for themeDev
+  expect(activeStyles.color).toBe('rgb(5, 134, 240)')
+  expect(activeStylesFlat.color).toBe(activeStyles.color)
+})

package/tests/StyledViewOnFocus.test.tsx

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledViewOnFocus', type: 'useCase' })
+})
+
+test(`styled view + onFocus`, async ({ page }) => {
+  const view = page.locator('#onFocus')
+
+  await view.focus()
+
+  await page.waitForFunction(
+    async () => {
+      const element = document.querySelector('#onFocus')
+      return element?.getAttribute('data-onfocus') === 'true'
+    },
+    { timeout: 2000 }
+  )
+
+  const styles = await view.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.borderColor).toBe(`rgb(0, 0, 255)`)
+  expect(styles.borderWidth).toBe(`10px`)
+})