@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
  1. package/dist/css/unity.css +1653 -543
  2. package/dist/esm/components/unity-theme-provider.d.ts +25 -0
  3. package/dist/esm/components/unity-theme-provider.js +34 -0
  4. package/dist/esm/components/unity-theme-provider.test.d.ts +1 -0
  5. package/dist/esm/index.d.ts +1 -0
  6. package/dist/esm/index.js +8 -5
  7. package/dist/esm/scripts/actions/compose-multi-theme.d.ts +15 -0
  8. package/dist/esm/scripts/transforms/tailwind-color-token.d.ts +4 -3
  9. package/dist/esm/scripts/transforms/tailwind-grid-token.d.ts +2 -1
  10. package/dist/esm/scripts/transforms/tailwind-spacing-token.d.ts +1 -1
  11. package/dist/esm/scripts/transforms/tailwind-text-token.d.ts +1 -1
  12. package/dist/esm/scripts/transforms/tailwind-typography-token.d.ts +1 -4
  13. package/dist/esm/scripts/utils/prefix-transform.d.ts +4 -0
  14. package/dist/esm/utils/cn.d.ts +4 -3
  15. package/package.json +3 -2
  16. package/src/components/unity-theme-provider.stories.tsx +532 -0
  17. package/src/components/unity-theme-provider.test.tsx +150 -0
  18. package/src/components/unity-theme-provider.tsx +72 -0
  19. package/src/index.ts +8 -0
  20. package/src/scripts/actions/compose-multi-theme.ts +59 -0
  21. package/src/scripts/build.ts +261 -55
  22. package/src/scripts/formats/unity-theme.test.ts +180 -253
  23. package/src/scripts/formats/unity-theme.ts +27 -64
  24. package/src/scripts/transforms/tailwind-color-token.test.ts +18 -0
  25. package/src/scripts/transforms/tailwind-color-token.ts +7 -3
  26. package/src/scripts/transforms/tailwind-grid-token.test.ts +22 -0
  27. package/src/scripts/transforms/tailwind-grid-token.ts +7 -3
  28. package/src/scripts/transforms/tailwind-spacing-token.test.ts +9 -0
  29. package/src/scripts/transforms/tailwind-spacing-token.ts +15 -2
  30. package/src/scripts/transforms/tailwind-text-token.test.ts +18 -0
  31. package/src/scripts/transforms/tailwind-text-token.ts +15 -2
  32. package/src/scripts/transforms/tailwind-typography-token.test.ts +8 -2
  33. package/src/scripts/transforms/tailwind-typography-token.ts +5 -1
  34. package/src/scripts/utils/prefix-transform.test.ts +137 -0
  35. package/src/scripts/utils/prefix-transform.ts +16 -0
  36. package/src/utils/cn.ts +2 -2
  37. package/tokens/common/aspect-ratios.json +11 -0
  38. package/tokens/common/breakpoints.json +18 -0
  39. package/tokens/{text.json → common/font-sizes.json} +0 -28
  40. package/tokens/common/font-weights.json +18 -0
  41. package/tokens/{radii.json → common/radii.json} +0 -15
  42. package/tokens/{spacings.json → common/spacings.json} +0 -25
  43. package/tokens/legacy/radii.json +21 -0
  44. package/tokens/legacy/text.json +14 -0
  45. package/tokens/rebrand/colors.json +1400 -0
  46. package/tokens/rebrand/radii.json +21 -0
  47. package/tokens/rebrand/shadows.json +81 -0
  48. package/tokens/rebrand/text.json +14 -0
  49. package/tokens/rebrand/typography.json +329 -0
  50. package/dist/esm/scripts/formats/generators/header-generator.d.ts +0 -2
  51. package/src/scripts/formats/generators/header-generator.ts +0 -32
  52. /package/tokens/{animations.json → common/animations.json} +0 -0
  53. /package/tokens/{layout.json → common/layout.json} +0 -0
  54. /package/tokens/{sizes.json → common/sizes.json} +0 -0
  55. /package/tokens/{colors.json → legacy/colors.json} +0 -0
  56. /package/tokens/{shadows.json → legacy/shadows.json} +0 -0
  57. /package/tokens/{typography.json → legacy/typography.json} +0 -0
package/dist/esm/components/unity-theme-provider.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { PropsWithChildren, RefObject } from 'react';
2
+ export type UnityTheme = 'legacy' | 'rebrand';
3
+ interface UnityThemeContextValue {
4
+ theme: UnityTheme;
5
+ setTheme: (theme: UnityTheme) => void;
6
+ }
7
+ export interface UnityThemeProviderProps {
8
+ /** Initial theme. Can be changed at runtime via `useUnityTheme().setTheme`. */
9
+ theme?: UnityTheme;
10
+ /**
11
+ * Element on which `data-uy-theme` is set.
12
+ * - `undefined` (default): uses `document.documentElement` (`<html>`)
13
+ * - A React ref: uses the referenced element
14
+ * - A CSS selector string: uses `document.querySelector(selector)`
15
+ * @default document.documentElement
16
+ */
17
+ target?: RefObject<HTMLElement | null> | string;
18
+ }
19
+ export declare function UnityThemeProvider({ theme: initialTheme, target, children, }: PropsWithChildren<UnityThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
20
+ /**
21
+ * Returns the current theme and a setter to change it at runtime.
22
+ * Returns `"legacy"` with a no-op setter when used outside a provider.
23
+ */
24
+ export declare function useUnityTheme(): UnityThemeContextValue;
25
+ export {};
package/dist/esm/components/unity-theme-provider.js ADDED
@@ -0,0 +1,34 @@
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { createContext as i, useState as s, useEffect as f, useContext as h } from "react";
3
+ const o = i({
4
+ // Render legacy by default for backwards compatibility
5
+ theme: "legacy",
6
+ // Intentional noop. Will be replaced by a set dispatcher from React
7
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
8
+ setTheme: () => {
9
+ }
10
+ });
11
+ function d(e) {
12
+ return e === void 0 ? document.documentElement : typeof e == "string" ? document.querySelector(e) : e.current;
13
+ }
14
+ function T({
15
+ theme: e = "legacy",
16
+ target: r,
17
+ children: u
18
+ }) {
19
+ const [t, m] = s(e);
20
+ return f(() => {
21
+ const n = d(r);
22
+ if (n)
23
+ return n.dataset.uyTheme = t, () => {
24
+ delete n.dataset.uyTheme;
25
+ };
26
+ }, [t, r]), /* @__PURE__ */ c(o.Provider, { value: { theme: t, setTheme: m }, children: u });
27
+ }
28
+ function a() {
29
+ return h(o);
30
+ }
31
+ export {
32
+ T as UnityThemeProvider,
33
+ a as useUnityTheme
34
+ };
package/dist/esm/components/unity-theme-provider.test.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/esm/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export * from './utils/cn.js';
2
2
  export * from './utils/tailwind-merge.js';
3
3
  export * from './utils/tailwind-variants.js';
4
4
  export { twMergeConfig } from './utils/merge-config.js';
5
+ export { UnityThemeProvider, useUnityTheme, type UnityTheme, type UnityThemeProviderProps, } from './components/unity-theme-provider.js';
package/dist/esm/index.js CHANGED
@@ -1,12 +1,15 @@
1
- import { classNames as o, clsx as f, cn as m } from "./utils/cn.js";
1
+ import { classNames as o, clsx as m, cn as t } from "./utils/cn.js";
2
2
  import { uyMerge as x } from "./utils/tailwind-merge.js";
3
3
  import { uyTv as s } from "./utils/tailwind-variants.js";
4
- import { twMergeConfig as g } from "./utils/merge-config.js";
4
+ import { twMergeConfig as n } from "./utils/merge-config.js";
5
+ import { UnityThemeProvider as c, useUnityTheme as g } from "./components/unity-theme-provider.js";
5
6
  export {
7
+ c as UnityThemeProvider,
6
8
  o as classNames,
7
- f as clsx,
8
- m as cn,
9
- g as twMergeConfig,
9
+ m as clsx,
10
+ t as cn,
11
+ n as twMergeConfig,
12
+ g as useUnityTheme,
10
13
  x as uyMerge,
11
14
  s as uyTv
12
15
  };
package/dist/esm/scripts/actions/compose-multi-theme.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ export interface ComposeInput {
2
+ /** css/variables output for legacy (:root selector) */
3
+ legacyCss: string;
4
+ /** css/variables output for rebrand ([data-uy-theme="rebrand"] selector) */
5
+ rebrandCss: string;
6
+ /** css/unity-theme output (@theme block + grid/typography utilities) */
7
+ themeCss: string;
8
+ /** File header + imports */
9
+ header: string;
10
+ /** Custom variant declarations */
11
+ customVariants: string;
12
+ /** Output path for the composed CSS */
13
+ outputPath: string;
14
+ }
15
+ export declare function composeMultiThemeCss(input: ComposeInput): Promise<void>;
package/dist/esm/scripts/transforms/tailwind-color-token.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Token } from 'style-dictionary';
2
- import { Config, NameTransform } from 'style-dictionary/types';
2
+ import { NameTransform } from 'style-dictionary/types';
3
3
  type Transformer = NameTransform['transform'];
4
- export declare function filter(token: Token, options: Config): boolean;
5
- export declare const transform: Transformer;
4
+ export declare function filter(token: Token): boolean;
5
+ export declare const tailwindColorTokenNameTransform: Transformer;
6
+ export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: import('style-dictionary/types').PlatformConfig, options: import('style-dictionary/types').Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
6
7
  export {};
package/dist/esm/scripts/transforms/tailwind-grid-token.d.ts CHANGED
@@ -2,5 +2,6 @@ import { Token } from 'style-dictionary';
2
2
  import { NameTransform } from 'style-dictionary/types';
3
3
  type Transformer = NameTransform['transform'];
4
4
  export declare function filter(token: Token): boolean;
5
- export declare const transform: Transformer;
5
+ export declare const tailwindGridTokenNameTransform: Transformer;
6
+ export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: import('style-dictionary/types').PlatformConfig, options: import('style-dictionary/types').Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
6
7
  export {};
package/dist/esm/scripts/transforms/tailwind-spacing-token.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { Token } from 'style-dictionary';
2
2
  import { Config, PlatformConfig } from 'style-dictionary/types';
3
3
  export declare function filter(token: Token, options: Config): boolean;
4
- export declare function transform(token: Token, _config: PlatformConfig): string;
4
+ export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: PlatformConfig, options: Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
package/dist/esm/scripts/transforms/tailwind-text-token.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { Token } from 'style-dictionary';
2
2
  import { Config, PlatformConfig } from 'style-dictionary/types';
3
3
  export declare function filter(token: Token, options: Config): boolean;
4
- export declare function transform(token: Token, _config: PlatformConfig): string;
4
+ export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: PlatformConfig, options: Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
package/dist/esm/scripts/transforms/tailwind-typography-token.d.ts CHANGED
@@ -1,6 +1,3 @@
1
1
  import { Token } from 'style-dictionary';
2
- import { NameTransform } from 'style-dictionary/types';
3
- type Transformer = NameTransform['transform'];
4
2
  export declare function filter(token: Token): boolean;
5
- export declare const transform: Transformer;
6
- export {};
3
+ export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: import('style-dictionary/types').PlatformConfig, options: import('style-dictionary/types').Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
package/dist/esm/scripts/utils/prefix-transform.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { NameTransform } from 'style-dictionary/types';
2
+ type Transformer = NameTransform['transform'];
3
+ export declare const prefixTransform: (transformer: Transformer) => Transformer;
4
+ export {};
package/dist/esm/utils/cn.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { cnMerge } from 'tailwind-variants';
1
2
  /**
2
3
  * Unity-configured class name utility function for merging CSS classes.
3
4
  *
@@ -50,7 +51,7 @@
50
51
  * @see {@link uyMerge} for the underlying merge function
51
52
  * @see {@link twMergeConfig} for the Unity merge configuration details
52
53
  */
53
- export declare const cn: (...classes: string[]) => import('tailwind-variants').CnReturn;
54
+ export declare const cn: (...params: Parameters<typeof cnMerge>) => import('tailwind-variants').CnReturn;
54
55
  /**
55
56
  * Alias for {@link cn} - Unity-configured class name utility function.
56
57
  *
@@ -70,7 +71,7 @@ export declare const cn: (...classes: string[]) => import('tailwind-variants').C
70
71
  * ```
71
72
  * @see {@link cn} for detailed documentation and examples
72
73
  */
73
- export declare const classNames: (...classes: string[]) => import('tailwind-variants').CnReturn;
74
+ export declare const classNames: (...params: Parameters<typeof cnMerge>) => import('tailwind-variants').CnReturn;
74
75
  /**
75
76
  * Alias for {@link cn} - Unity-configured class name utility function.
76
77
  *
@@ -90,4 +91,4 @@ export declare const classNames: (...classes: string[]) => import('tailwind-vari
90
91
  * ```
91
92
  * @see {@link cn} for detailed documentation and examples
92
93
  */
93
- export declare const clsx: (...classes: string[]) => import('tailwind-variants').CnReturn;
94
+ export declare const clsx: (...params: Parameters<typeof cnMerge>) => import('tailwind-variants').CnReturn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-themes",
3
- "version": "2.24.1",
3
+ "version": "2.25.0",
4
4
  "main": "./dist/esm/index.js",
5
5
  "types": "./dist/esm/index.d.ts",
6
6
  "style": "./dist/css/unity.css",
@@ -21,7 +21,7 @@
21
21
  "default": "./dist/esm/index.js"
22
22
  }
23
23
  },
24
- "./tokens/*.json": "./tokens/*.json",
24
+ "./tokens/*": "./tokens/*",
25
25
  "./css/*": {
26
26
  "default": "./dist/css/*"
27
27
  },
@@ -39,6 +39,7 @@
39
39
  "@storybook/addon-a11y": "10.3.5",
40
40
  "@storybook/addon-docs": "10.3.5",
41
41
  "@storybook/addon-links": "10.3.5",
42
+ "@storybook/addon-themes": "10.3.5",
42
43
  "@storybook/addon-vitest": "10.3.5",
43
44
  "@storybook/react-vite": "10.3.5",
44
45
  "@storybook/test-runner": "0.24.3",