npm - @payfit/unity-themes - Versions diffs - 2.24.1 → 2.25.0 - Mend

@payfit/unity-themes 2.24.1 → 2.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/css/unity.css +1653 -543
package/dist/esm/components/unity-theme-provider.d.ts +25 -0
package/dist/esm/components/unity-theme-provider.js +34 -0
package/dist/esm/components/unity-theme-provider.test.d.ts +1 -0
package/dist/esm/index.d.ts +1 -0
package/dist/esm/index.js +8 -5
package/dist/esm/scripts/actions/compose-multi-theme.d.ts +15 -0
package/dist/esm/scripts/transforms/tailwind-color-token.d.ts +4 -3
package/dist/esm/scripts/transforms/tailwind-grid-token.d.ts +2 -1
package/dist/esm/scripts/transforms/tailwind-spacing-token.d.ts +1 -1
package/dist/esm/scripts/transforms/tailwind-text-token.d.ts +1 -1
package/dist/esm/scripts/transforms/tailwind-typography-token.d.ts +1 -4
package/dist/esm/scripts/utils/prefix-transform.d.ts +4 -0
package/dist/esm/utils/cn.d.ts +4 -3
package/package.json +3 -2
package/src/components/unity-theme-provider.stories.tsx +532 -0
package/src/components/unity-theme-provider.test.tsx +150 -0
package/src/components/unity-theme-provider.tsx +72 -0
package/src/index.ts +8 -0
package/src/scripts/actions/compose-multi-theme.ts +59 -0
package/src/scripts/build.ts +261 -55
package/src/scripts/formats/unity-theme.test.ts +180 -253
package/src/scripts/formats/unity-theme.ts +27 -64
package/src/scripts/transforms/tailwind-color-token.test.ts +18 -0
package/src/scripts/transforms/tailwind-color-token.ts +7 -3
package/src/scripts/transforms/tailwind-grid-token.test.ts +22 -0
package/src/scripts/transforms/tailwind-grid-token.ts +7 -3
package/src/scripts/transforms/tailwind-spacing-token.test.ts +9 -0
package/src/scripts/transforms/tailwind-spacing-token.ts +15 -2
package/src/scripts/transforms/tailwind-text-token.test.ts +18 -0
package/src/scripts/transforms/tailwind-text-token.ts +15 -2
package/src/scripts/transforms/tailwind-typography-token.test.ts +8 -2
package/src/scripts/transforms/tailwind-typography-token.ts +5 -1
package/src/scripts/utils/prefix-transform.test.ts +137 -0
package/src/scripts/utils/prefix-transform.ts +16 -0
package/src/utils/cn.ts +2 -2
package/tokens/common/aspect-ratios.json +11 -0
package/tokens/common/breakpoints.json +18 -0
package/tokens/{text.json → common/font-sizes.json} +0 -28
package/tokens/common/font-weights.json +18 -0
package/tokens/{radii.json → common/radii.json} +0 -15
package/tokens/{spacings.json → common/spacings.json} +0 -25
package/tokens/legacy/radii.json +21 -0
package/tokens/legacy/text.json +14 -0
package/tokens/rebrand/colors.json +1400 -0
package/tokens/rebrand/radii.json +21 -0
package/tokens/rebrand/shadows.json +81 -0
package/tokens/rebrand/text.json +14 -0
package/tokens/rebrand/typography.json +329 -0
package/dist/esm/scripts/formats/generators/header-generator.d.ts +0 -2
package/src/scripts/formats/generators/header-generator.ts +0 -32
/package/tokens/{animations.json → common/animations.json} +0 -0
/package/tokens/{layout.json → common/layout.json} +0 -0
/package/tokens/{sizes.json → common/sizes.json} +0 -0
/package/tokens/{colors.json → legacy/colors.json} +0 -0
/package/tokens/{shadows.json → legacy/shadows.json} +0 -0
/package/tokens/{typography.json → legacy/typography.json} +0 -0

package/src/components/unity-theme-provider.stories.tsx ADDED Viewed

@@ -0,0 +1,532 @@
+import React, { useRef } from 'react'
+import type { PropsWithChildren } from 'react'
+import type { UnityTheme } from './unity-theme-provider'
+import preview from '../../.storybook/preview'
+import { cn } from '../utils/cn'
+import { UnityThemeProvider, useUnityTheme } from './unity-theme-provider'
+const meta = preview.meta({
+  component: UnityThemeProvider,
+  title: '3 - Component Reference/UnityThemeProvider',
+  parameters: {
+    docs: {
+      description: {
+        component: `\`UnityThemeProvider\` manages the active Unity theme for your application by setting the \`data-uy-theme\` attribute on a target DOM element (defaults to \`<html>\`). All Unity CSS custom properties (\`--uy-*\`) resolve based on this attribute, so every \`uy:\` utility class updates automatically when the theme changes.
+Wrap your app (or a subtree) with this provider and use the \`useUnityTheme()\` hook to read or switch the active theme at runtime. You can scope a theme to a specific element by passing a React ref or CSS selector to the \`target\` prop.
+Supported themes: \`legacy\` (default) and \`rebrand\`.`,
+      },
+    },
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+})
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function ThemedCard({
+  label,
+  children,
+}: PropsWithChildren<{ label?: string }>) {
+  return (
+    <div className="uy:rounded-md uy:border uy:border-border-neutral uy:bg-surface-neutral uy:p-300 uy:text-content-neutral uy:shadow-raising uy:typography-body uy:flex uy:flex-col uy:items-start uy:gap-100 uy:max-w-80">
+      <h2 className="uy:typography-h1 uy:text-content-primary uy:mb-100">
+        {label ?? 'Themed card'}
+      </h2>
+      {children ?? (
+        <p>
+          This card uses semantic tokens. Its appearance changes when the active
+          theme is switched between <code>legacy</code> and <code>rebrand</code>
+          .
+        </p>
+      )}
+      <footer className="uy:pt-150">
+        <button className="uy:transition-all uy:cursor-pointer uy:px-300 uy:py-100 uy:rounded-md uy:bg-surface-primary uy:text-content-inverted uy:typography-action uy:grow-0 uy:hover:bg-surface-primary-hover">
+          Themed button
+        </button>
+      </footer>
+    </div>
+  )
+}
+function ThemeSwitcher() {
+  const { theme, setTheme } = useUnityTheme()
+  return (
+    <div className="uy:inline-flex uy:gap-100 uy:items-center">
+      <span id="theme-switcher-label" className="uy:typography-body">
+        Switch theme:
+      </span>
+      <div
+        role="group"
+        aria-labelledby="theme-switcher-label"
+        className="uy:inline-flex uy:gap-50 uy:w-fit uy:rounded-sm uy:bg-surface-neutral-lowest uy:p-50 uy:overflow-hidden"
+      >
+        {(['legacy', 'rebrand'] as UnityTheme[]).map(t => (
+          <button
+            key={t}
+            onClick={() => {
+              setTheme(t)
+            }}
+            className={cn(
+              'uy:rounded-sm uy:typography-action uy:cursor-pointer uy:transition-colors uy:py-75 uy:px-150',
+              'uy:text-content-neutral-enabled uy:hover:bg-surface-neutral-hover',
+              'uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring',
+              {
+                'uy:bg-surface-neutral uy:shadow-floating': theme === t,
+                'uy:bg-transparent': theme !== t,
+              },
+            )}
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+/**
+ * You can set up theming by wrapping your application with `UnityThemeProvider` and passing the desired theme via the `theme` prop.
+ * The provider sets `data-uy-theme` on `<html>` by default, which activates the corresponding set of `--uy-*` CSS custom properties so all `uy:` utility classes resolve to the correct palette.
+ */
+export const BasicSetup = meta.story({
+  name: 'Basic Setup',
+  parameters: {
+    docs: {
+      source: {
+        code: `
+import { UnityThemeProvider } from '@payfit/unity-themes'
+function ThemedCard() {
+  return (
+    <div className="uy:rounded-md uy:border uy:border-border-neutral uy:bg-surface-neutral uy:p-300 uy:text-content-neutral uy:shadow-raising uy:typography-body uy:flex uy:flex-col uy:items-start uy:gap-100 uy:max-w-80">
+      <h2 className="uy:typography-h1 uy:text-content-primary uy:mb-100">
+        Legacy theme
+      </h2>
+      <p>
+        This card uses semantic tokens. Its appearance changes when the active
+        theme is switched between <code>legacy</code> and <code>rebrand</code>.
+      </p>
+      <footer className="uy:pt-150">
+        <button className="uy:transition-all uy:cursor-pointer uy:px-300 uy:py-100 uy:rounded-md uy:bg-surface-primary uy:text-content-inverted uy:typography-action uy:grow-0 uy:hover:bg-surface-primary-hover">
+          Themed button
+        </button>
+      </footer>
+    </div>
+  )
+}
+function App() {
+  return (
+    <UnityThemeProvider theme="legacy">
+      <ThemedCard />
+    </UnityThemeProvider>
+  )
+}
+`.trim(),
+      },
+    },
+  },
+  render() {
+    return (
+      <UnityThemeProvider theme="legacy">
+        <div className="uy:flex uy:flex-col uy:gap-200">
+          <ThemedCard label="Legacy theme" />
+        </div>
+      </UnityThemeProvider>
+    )
+  },
+})
+/**
+ * You can switch the active theme at runtime by calling `setTheme()` from the `useUnityTheme()` hook.
+ * The provider updates the `data-uy-theme` attribute on the target element, causing all `--uy-*` CSS custom properties to re-resolve automatically without prop drilling or page reloads.
+ */
+export const RuntimeThemeSwitching = meta.story({
+  name: 'Runtime Theme Switching',
+  parameters: {
+    docs: {
+      source: {
+        code: `
+import { UnityThemeProvider, useUnityTheme } from '@payfit/unity-themes'
+import { cn } from '@payfit/unity-themes'
+import type { UnityTheme } from '@payfit/unity-themes'
+const themes: UnityTheme[] = ['legacy', 'rebrand']
+function ThemeSwitcher() {
+  const { theme, setTheme } = useUnityTheme()
+  return (
+    <div className="uy:inline-flex uy:gap-100 uy:items-center">
+      <span id="theme-switcher-label" className="uy:typography-body">Switch theme:</span>
+      <div role="group" aria-labelledby="theme-switcher-label" className="uy:inline-flex uy:gap-50 uy:w-fit uy:rounded-sm uy:bg-surface-neutral-lowest uy:p-50 uy:overflow-hidden">
+        {themes.map(t => (
+          <button
+            key={t}
+            onClick={() => setTheme(t)}
+            className={
+              cn(
+                'uy:rounded-sm uy:typography-action uy:cursor-pointer uy:transition-colors uy:py-75 uy:px-150',
+                'uy:text-content-neutral-enabled uy:hover:bg-surface-neutral-hover',
+                'uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring',
+                {
+                  'uy:bg-surface-neutral uy:shadow-floating': theme === t,
+                  'uy:bg-transparent': theme !== t,
+                }
+              )
+            }
+          >
+            {t}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+function ThemedCard() {
+  return (
+    <div className="uy:rounded-md uy:border uy:border-border-neutral uy:bg-surface-neutral uy:p-300 uy:text-content-neutral uy:shadow-raising uy:typography-body uy:flex uy:flex-col uy:items-start uy:gap-100 uy:max-w-80 uy:[&>code]:inline">
+      <h2 className="uy:typography-h1 uy:text-content-primary uy:mb-100">
+        Themed card
+      </h2>
+      <p>
+        This card uses semantic tokens. Its appearance changes when the active
+        theme is switched between <code>legacy</code> and <code>rebrand</code>.
+      </p>
+      <footer className="uy:pt-150">
+        <button className="uy:transition-all uy:cursor-pointer uy:px-300 uy:py-100 uy:rounded-md uy:bg-surface-primary uy:text-content-inverted uy:typography-action uy:grow-0 uy:hover:bg-surface-primary-hover">
+          Themed button
+        </button>
+      </footer>
+    </div>
+  )
+}
+function App() {
+  return (
+    <UnityThemeProvider theme="legacy">
+      <div className="uy:flex uy:flex-col uy:gap-200">
+        <ThemeSwitcher />
+        <ThemedCard />
+      </div>
+    </UnityThemeProvider>
+  )
+}
+`.trim(),
+      },
+    },
+  },
+  render() {
+    return (
+      <UnityThemeProvider theme="legacy">
+        <div className="uy:flex uy:flex-col uy:gap-200">
+          <ThemeSwitcher />
+          <ThemedCard />
+        </div>
+      </UnityThemeProvider>
+    )
+  },
+})
+/**
+ * You can scope a theme to a specific DOM element by passing a React ref or CSS selector string to the `target` prop.
+ * This sets `data-uy-theme` on that element instead of `<html>`.
+ *
+ * You can specify 3 possible value types:
+ * - **`undefined` or not set:** targets `document.documentElement` (usually the `<html>` tag)
+ * - **A React ref:** targets the element that the ref points to (remember to use `useRef` and assign it via the `ref` attribute to the element).
+ * - **A string with a valid CSS selector:** the provider will use `document.querySelector()` to find the element and attach the attribute.
+ *
+ * This will allow for different parts of the page to use different themes simultaneously. e.g: a rebrand preview panel embedded in a legacy app.
+ *
+ * > ⚠️ **Warning:** Nested `UnityThemeProvider`s _do not share any state between them_, which can lead to theme discrepancies, particularly when changing it at runtime. If you use scoped themes, it is your responsibility to keep them in sync (if they need to).
+ */
+export const ScopedTarget = meta.story({
+  name: 'Scoped Target',
+  parameters: {
+    docs: {
+      source: {
+        code: `
+import { useRef } from 'react'
+import { UnityThemeProvider } from '@payfit/unity-themes'
+function ThemedCard({ label, children }: PropsWithChildren<{ label: string }>) {
+  return (
+    <div className="uy:rounded-md uy:border uy:border-border-neutral uy:bg-surface-neutral uy:p-300 uy:text-content-neutral uy:shadow-raising uy:typography-body uy:flex uy:flex-col uy:items-start uy:gap-100 uy:max-w-80">
+      <h2 className="uy:typography-h1 uy:text-content-primary uy:mb-100">
+        {label}
+      </h2>
+      {children}
+      <footer className="uy:pt-150">
+        <button className="uy:transition-all uy:cursor-pointer uy:px-300 uy:py-100 uy:rounded-md uy:bg-surface-primary uy:text-content-inverted uy:typography-action uy:grow-0 uy:hover:bg-surface-primary-hover">
+          Themed button
+        </button>
+      </footer>
+    </div>
+  )
+}
+function ScopedThemeDemo() {
+  const ref = useRef<HTMLDivElement>(null)
+  return (
+    <UnityThemeProvider theme="legacy">
+      <div className="uy:flex uy:flex-col uy:gap-300">
+        <p className="uy:typography-body">
+          The theme below is scoped to its own container via a <code>ref</code>.
+          It does <strong>not</strong> change the global <code>&lt;html&gt;</code> attribute.
+        </p>
+        <ThemeSwitcher />
+        <div
+          ref={ref}
+          className="uy:rounded-md uy:border uy:border-border-neutral-low uy:p-300"
+        >
+          <UnityThemeProvider theme="rebrand" target={ref}>
+            <ThemedCard label="Scoped Themed Card">
+              <p>This card is inside a nested <code>UnityThemeProvider</code> with the <code>rebrand</code> theme. It will always pick up this theme despite the set theme in the root page element</p>
+            </ThemedCard>
+          </UnityThemeProvider>
+        </div>
+        <div className="uy:rounded-md uy:border uy:border-border-neutral-low uy:p-300">
+          <ThemedCard label="Global Themed Card">
+            <p>This card will take whichever theme the <code>html</code> element has set up</p>
+          </ThemedCard>
+        </div>
+      </div>
+    </UnityThemeProvider>
+  )
+}
+`.trim(),
+      },
+    },
+  },
+  render() {
+    function ScopedDemo() {
+      const ref = useRef<HTMLDivElement>(null)
+      return (
+        <UnityThemeProvider theme="legacy">
+          <div className="uy:flex uy:flex-col uy:gap-300">
+            <p className="uy:typography-body">
+              The theme below is scoped to its own container via a{' '}
+              <code>ref</code>. It does <strong>not</strong> change the global{' '}
+              <code>&lt;html&gt;</code> attribute.
+            </p>
+            <ThemeSwitcher />
+            <div
+              ref={ref}
+              className="uy:rounded-md uy:border uy:border-border-neutral-low uy:p-300"
+            >
+              <UnityThemeProvider theme="rebrand" target={ref}>
+                <ThemedCard label="Scoped Themed Card">
+                  <p>
+                    This card is inside a nested <code>UnityThemeProvider</code>
+                    with the <code>rebrand</code> theme. It will always pick up
+                    this theme despite the set theme in the root page element
+                  </p>
+                </ThemedCard>
+              </UnityThemeProvider>
+            </div>
+            <div className="uy:rounded-md uy:border uy:border-border-neutral-low uy:p-300">
+              <ThemedCard label="Global Themed Card">
+                <p>
+                  This card will take whichever theme the <code>html</code>{' '}
+                  element has set up
+                </p>
+              </ThemedCard>
+            </div>
+          </div>
+        </UnityThemeProvider>
+      )
+    }
+    return <ScopedDemo />
+  },
+})
+/**
+ * The provider works by setting a `data-uy-theme` attribute on its target element. Unity's CSS defines two token blocks — `:root` for legacy and `[data-uy-theme="rebrand"]` for rebrand — so toggling the attribute instantly swaps all `--uy-*` custom properties.
+ * Open DevTools and inspect the `<html>` element to see the attribute change as you toggle between themes.
+ */
+export const HowItWorks = meta.story({
+  name: 'How It Works',
+  parameters: {
+    docs: {
+      source: {
+        code: `
+import { UnityThemeProvider, useUnityTheme } from '@payfit/unity-themes'
+function ThemedCard() {
+  return (
+    <div className="uy:rounded-md uy:border uy:border-border-neutral uy:bg-surface-neutral uy:p-300 uy:text-content-neutral uy:shadow-raising uy:typography-body uy:flex uy:flex-col uy:items-start uy:gap-100 uy:max-w-80">
+      <h2 className="uy:typography-h1 uy:text-content-primary uy:mb-100">
+        Themed card
+      </h2>
+      <p>
+        This card uses semantic tokens. Its appearance changes when the active
+        theme is switched between <code>legacy</code> and <code>rebrand</code>.
+      </p>
+      <footer className="uy:pt-150">
+        <button className="uy:transition-all uy:cursor-pointer uy:px-300 uy:py-100 uy:rounded-md uy:bg-surface-primary uy:text-content-inverted uy:typography-action uy:grow-0 uy:hover:bg-surface-primary-hover">
+          Themed button
+        </button>
+      </footer>
+    </div>
+  )
+}
+function Demo() {
+  const { theme } = useUnityTheme()
+  return (
+    <div className="uy:flex uy:flex-col uy:gap-300">
+      <div className="uy:rounded-md uy:bg-surface-neutral-lowest uy:p-300 uy:typography-body-small">
+        Applied Code: <code>&lt;html data-uy-theme="{theme}"&gt;</code>
+      </div>
+      <ThemeSwitcher />
+      <ThemedCard />
+    </div>
+  )
+}
+function App() {
+  return (
+    <UnityThemeProvider theme="legacy">
+      <Demo />
+    </UnityThemeProvider>
+  )
+}
+`.trim(),
+      },
+    },
+  },
+  render() {
+    function Demo() {
+      const { theme } = useUnityTheme()
+      return (
+        <div className="uy:flex uy:flex-col uy:gap-300">
+          <div className="uy:rounded-md uy:bg-surface-neutral-lowest uy:p-300 uy:typography-body-small">
+            Applied Code: <code>&lt;html data-uy-theme="{theme}"&gt;</code>
+          </div>
+          <ThemeSwitcher />
+          <ThemedCard />
+        </div>
+      )
+    }
+    return (
+      <UnityThemeProvider theme="legacy">
+        <Demo />
+      </UnityThemeProvider>
+    )
+  },
+})
+/**
+ * You can apply styles conditionally per theme using the `theme-legacy:` and `theme-rebrand:` Tailwind custom variant prefixes.
+ * These variants match elements inside the corresponding `data-uy-theme` context, letting you handle one-off visual differences between themes directly in utility classes without writing raw CSS.
+ *
+ * For example, `uy:theme-legacy:bg-red-l4 uy:theme-rebrand:bg-blue-l9` renders a red background in legacy and blue in rebrand.
+ */
+export const ThemeSpecificStyles = meta.story({
+  name: 'Targeting Specific Themes in Styles',
+  parameters: {
+    docs: {
+      source: {
+        code: `
+import { UnityThemeProvider } from '@payfit/unity-themes'
+function Demo() {
+  return (
+    <div className="uy:flex uy:flex-col uy:gap-300">
+      <ThemeSwitcher />
+      <div className="uy:flex uy:gap-200">
+        <div className="uy:flex-1 uy:rounded-md uy:p-300 uy:typography-body-strong uy:text-grayscale-l1 uy:theme-legacy:bg-yellow-l6 uy:theme-rebrand:bg-orange-l7 uy:theme-legacy:text-content-neutral uy:theme-rebrand:text-content-inverted">
+          <code>theme-legacy:bg-yellow-l6</code>
+          <br />
+          <code>theme-rebrand:bg-orange-l7</code>
+        </div>
+        <div className="uy:flex-1 uy:rounded-md uy:border-2 uy:p-300 uy:typography-body-strong uy:theme-legacy:border-blue-l7 uy:theme-legacy:text-blue-l9 uy:theme-rebrand:border-plum-l7 uy:theme-rebrand:text-plum-l9">
+          <code>theme-legacy:border-blue-l7</code>
+          <br />
+          <code>theme-rebrand:border-plum-l7</code>
+        </div>
+      </div>
+      <p className="uy:typography-body-small uy:text-content-neutral-low">
+        Toggle the theme to see different colors applied via
+        theme-legacy: and theme-rebrand: variant prefixes.
+      </p>
+    </div>
+  )
+}
+function App() {
+  return (
+    <UnityThemeProvider theme="legacy">
+      <Demo />
+    </UnityThemeProvider>
+  )
+}
+`.trim(),
+      },
+    },
+  },
+  render() {
+    function Demo() {
+      return (
+        <div className="uy:flex uy:flex-col uy:gap-300">
+          <ThemeSwitcher />
+          <div className="uy:flex uy:gap-200">
+            <div className="uy:flex-1 uy:rounded-md uy:p-300 uy:typography-body-strong uy:text-grayscale-l1 uy:theme-legacy:bg-yellow-l6 uy:theme-rebrand:bg-orange-l7 uy:theme-legacy:text-content-neutral uy:theme-rebrand:text-content-inverted">
+              <code>theme-legacy:bg-yellow-l6</code>
+              <br />
+              <code>theme-rebrand:bg-orange-l7</code>
+            </div>
+            <div className="uy:flex-1 uy:rounded-md uy:border-2 uy:p-300 uy:typography-body-strong uy:theme-legacy:border-blue-l7 uy:theme-legacy:text-blue-l9 uy:theme-rebrand:border-plum-l7 uy:theme-rebrand:text-plum-l9">
+              <code>theme-legacy:border-blue-l7</code>
+              <br />
+              <code>theme-rebrand:border-plum-l7</code>
+            </div>
+          </div>
+          <p className="uy:typography-body-small uy:text-content-neutral-low">
+            Toggle the theme to see different colors applied via{' '}
+            <code>theme-legacy:</code> and <code>theme-rebrand:</code> variant
+            prefixes.
+          </p>
+        </div>
+      )
+    }
+    return (
+      <UnityThemeProvider theme="legacy">
+        <Demo />
+      </UnityThemeProvider>
+    )
+  },
+})

package/src/components/unity-theme-provider.test.tsx ADDED Viewed

@@ -0,0 +1,150 @@
+import { useRef } from 'react'
+import type { PropsWithChildren } from 'react'
+import { act, render, renderHook } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'vitest'
+import { UnityThemeProvider, useUnityTheme } from './unity-theme-provider'
+afterEach(() => {
+  delete document.documentElement.dataset.uyTheme
+})
+describe('UnityThemeProvider', () => {
+  it('sets data-uy-theme on the html element when mounted', () => {
+    render(
+      <UnityThemeProvider theme="rebrand">
+        <div>child</div>
+      </UnityThemeProvider>,
+    )
+    expect(document.documentElement.dataset.uyTheme).toBe('rebrand')
+  })
+  it('defaults to legacy when no theme prop is provided', () => {
+    render(
+      <UnityThemeProvider>
+        <div>child</div>
+      </UnityThemeProvider>,
+    )
+    expect(document.documentElement.dataset.uyTheme).toBe('legacy')
+  })
+  it('removes data-uy-theme on unmount', () => {
+    const { unmount } = render(
+      <UnityThemeProvider theme="rebrand">
+        <div>child</div>
+      </UnityThemeProvider>,
+    )
+    expect(document.documentElement.dataset.uyTheme).toBe('rebrand')
+    unmount()
+    expect(document.documentElement.dataset.uyTheme).toBeUndefined()
+  })
+  it('renders children unchanged', () => {
+    const { getByText } = render(
+      <UnityThemeProvider>
+        <span>hello world</span>
+      </UnityThemeProvider>,
+    )
+    expect(getByText('hello world')).toBeTruthy()
+  })
+  describe('target', () => {
+    it('sets data-uy-theme on a custom element via CSS selector', () => {
+      const container = document.createElement('div')
+      container.id = 'theme-root'
+      document.body.appendChild(container)
+      render(
+        <UnityThemeProvider theme="rebrand" target="#theme-root">
+          <div>child</div>
+        </UnityThemeProvider>,
+      )
+      expect(container.dataset.uyTheme).toBe('rebrand')
+      expect(document.documentElement.dataset.uyTheme).toBeUndefined()
+      document.body.removeChild(container)
+    })
+    it('sets data-uy-theme on a custom element via ref', () => {
+      const targetEl = document.createElement('section')
+      document.body.appendChild(targetEl)
+      function TestComponent() {
+        const ref = useRef<HTMLElement>(targetEl)
+        return (
+          <UnityThemeProvider theme="rebrand" target={ref}>
+            <div>child</div>
+          </UnityThemeProvider>
+        )
+      }
+      render(<TestComponent />)
+      expect(targetEl.dataset.uyTheme).toBe('rebrand')
+      expect(document.documentElement.dataset.uyTheme).toBeUndefined()
+      document.body.removeChild(targetEl)
+    })
+  })
+})
+describe('useUnityTheme', () => {
+  it('returns the theme value from the provider', () => {
+    const { result } = renderHook(() => useUnityTheme(), {
+      wrapper: ({ children }) => (
+        <UnityThemeProvider theme="rebrand">{children}</UnityThemeProvider>
+      ),
+    })
+    expect(result.current.theme).toBe('rebrand')
+  })
+  it('returns "legacy" when used outside a provider', () => {
+    const { result } = renderHook(() => useUnityTheme())
+    expect(result.current.theme).toBe('legacy')
+  })
+  it('does not throw when used outside a provider', () => {
+    expect(() => renderHook(() => useUnityTheme())).not.toThrow()
+  })
+  it('exposes setTheme to change the theme at runtime', () => {
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <UnityThemeProvider theme="legacy">{children}</UnityThemeProvider>
+    )
+    const { result } = renderHook(() => useUnityTheme(), { wrapper })
+    expect(result.current.theme).toBe('legacy')
+    expect(document.documentElement.dataset.uyTheme).toBe('legacy')
+    act(() => {
+      result.current.setTheme('rebrand')
+    })
+    expect(result.current.theme).toBe('rebrand')
+    expect(document.documentElement.dataset.uyTheme).toBe('rebrand')
+  })
+  it('setTheme is a no-op outside a provider', () => {
+    const { result } = renderHook(() => useUnityTheme())
+    expect(() => {
+      act(() => {
+        result.current.setTheme('rebrand')
+      })
+    }).not.toThrow()
+    expect(result.current.theme).toBe('legacy')
+  })
+})