@payfit/unity-themes 2.56.0 → 2.56.1
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@payfit/unity-themes",
|
|
3
|
-
"version": "2.56.
|
|
3
|
+
"version": "2.56.1",
|
|
4
4
|
"main": "./dist/esm/index.js",
|
|
5
5
|
"types": "./dist/esm/index.d.ts",
|
|
6
6
|
"style": "./dist/css/unity.css",
|
|
@@ -69,10 +69,10 @@
|
|
|
69
69
|
"typescript": "npm:@typescript/typescript6@6.0.2",
|
|
70
70
|
"vite": "8.1.4",
|
|
71
71
|
"vitest": "4.1.10",
|
|
72
|
+
"@payfit/storybook-config": "0.0.0-use.local",
|
|
72
73
|
"@payfit/hr-app-eslint": "0.0.0-use.local",
|
|
73
74
|
"@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
|
|
74
|
-
"@payfit/vite-configs": "0.0.0-use.local"
|
|
75
|
-
"@payfit/storybook-config": "0.0.0-use.local"
|
|
75
|
+
"@payfit/vite-configs": "0.0.0-use.local"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
78
|
"@fontsource/inter": "5.0.19",
|
|
@@ -2,11 +2,18 @@
|
|
|
2
2
|
name: unity-themes
|
|
3
3
|
description: >
|
|
4
4
|
Use when selecting a Unity design token, resolving a token reference or CSS
|
|
5
|
-
variable, or
|
|
6
|
-
|
|
5
|
+
variable, writing responsive or state-based uy: utilities, merging classes,
|
|
6
|
+
or defining typed style variants. Search the canonical token catalog first
|
|
7
|
+
and use Unity's uyMerge, uyTv, and cn helpers instead of raw alternatives.
|
|
7
8
|
metadata:
|
|
8
9
|
type: core
|
|
9
10
|
library: '@payfit/unity-themes'
|
|
11
|
+
sources:
|
|
12
|
+
- 'PayFit/hr-apps:libs/shared/unity/themes/src/agent-references/tokens-catalog.json'
|
|
13
|
+
- 'PayFit/hr-apps:libs/shared/unity/themes/src/utils/tailwind-merge.ts'
|
|
14
|
+
- 'PayFit/hr-apps:libs/shared/unity/themes/src/utils/tailwind-variants.ts'
|
|
15
|
+
- 'PayFit/hr-apps:libs/shared/unity/themes/src/utils/cn.ts'
|
|
16
|
+
- 'PayFit/hr-apps:libs/shared/unity/themes/src/scripts/build.ts'
|
|
10
17
|
---
|
|
11
18
|
|
|
12
19
|
## Source order
|
|
@@ -34,7 +41,9 @@ jq '.tokens[] | select(.name | test("border-neutral"; "i"))' \
|
|
|
34
41
|
4. Preserve token references. Inspect `values.legacy` and `values.rebrand` to understand theme-specific resolution, and inspect `references` when explaining an alias.
|
|
35
42
|
5. For classes, use the generated `src/storybook-mcp` blueprint for the relevant family and substitute only a catalog-confirmed token name. Do not enumerate or invent the complete class space.
|
|
36
43
|
6. Prefer semantic tokens for product UI. Use primitives only when the intent has no semantic equivalent or the user explicitly asks for a raw palette value.
|
|
37
|
-
7. Keep the `uy:` prefix on every Unity utility class
|
|
44
|
+
7. Keep the `uy:` prefix on every Unity utility class.
|
|
45
|
+
8. Use `uyMerge` when external classes may collide with internal ones, `uyTv`
|
|
46
|
+
for typed component variants, and `cn` for ad-hoc conditional strings.
|
|
38
47
|
|
|
39
48
|
```tsx
|
|
40
49
|
<div className="uy:bg-surface-primary uy:text-content-primary" />
|
|
@@ -43,3 +52,60 @@ jq '.tokens[] | select(.name | test("border-neutral"; "i"))' \
|
|
|
43
52
|
Never assume that a plausible Tailwind name exists. If it is not represented by the catalog or an applicable blueprint, keep searching or state that no confirmed class was found.
|
|
44
53
|
|
|
45
54
|
Prefer semantic tokens over primitive values and use the `uy:` prefix for Tailwind utilities. Do not invent utility names or expand the full class space; consult the catalog and use the semantic family that matches the element's role.
|
|
55
|
+
|
|
56
|
+
## Utility conventions
|
|
57
|
+
|
|
58
|
+
- Prefix every class and modifier with `uy:`, for example
|
|
59
|
+
`uy:md:gap-200` and `uy:data-[hovered=true]:bg-surface-primary-hover`.
|
|
60
|
+
- Prefer a component's exposed `data-*` state over a raw pseudo-class when the
|
|
61
|
+
component manages that state.
|
|
62
|
+
- Import `uyMerge`, `uyTv`, `VariantProps`, and `cn` from
|
|
63
|
+
`@payfit/unity-themes`; raw `tailwind-merge` and `tailwind-variants` are not
|
|
64
|
+
configured for Unity tokens.
|
|
65
|
+
- Use `uyTv` for a reusable component API with variant axes. Use `cn` for a
|
|
66
|
+
small conditional class expression.
|
|
67
|
+
|
|
68
|
+
Read [references/patterns.md](references/patterns.md) for focused examples of
|
|
69
|
+
responsive and state modifiers, class merging, conditional classes, and typed
|
|
70
|
+
variants.
|
|
71
|
+
|
|
72
|
+
## Common mistakes
|
|
73
|
+
|
|
74
|
+
### Omit the uy: prefix
|
|
75
|
+
|
|
76
|
+
Bare Tailwind classes are absent from Unity's prefixed stylesheet and silently
|
|
77
|
+
produce no styling.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
// Wrong
|
|
81
|
+
<div className="flex gap-4" />
|
|
82
|
+
|
|
83
|
+
// Correct
|
|
84
|
+
<div className="uy:flex uy:gap-200" />
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Guess a plausible token name
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
// Wrong: standard Tailwind-looking names are not Unity tokens.
|
|
91
|
+
<div className="uy:bg-primary-500 uy:text-gray-900" />
|
|
92
|
+
|
|
93
|
+
// Correct: both names are confirmed by tokens-catalog.json.
|
|
94
|
+
<div className="uy:bg-surface-primary uy:text-content-primary" />
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Import unconfigured helpers
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
// Wrong
|
|
101
|
+
import { twMerge } from 'tailwind-merge'
|
|
102
|
+
import { tv } from 'tailwind-variants'
|
|
103
|
+
|
|
104
|
+
// Correct
|
|
105
|
+
import { uyMerge, uyTv } from '@payfit/unity-themes'
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## See also
|
|
109
|
+
|
|
110
|
+
- `unity-layout` — choose and compose `Flex`, `Grid`, and semantic `Text`
|
|
111
|
+
primitives from `@payfit/unity-components`.
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Unity theme styling patterns
|
|
2
|
+
|
|
3
|
+
## Responsive and state modifiers
|
|
4
|
+
|
|
5
|
+
Keep the `uy:` prefix before the complete Tailwind modifier chain.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
<div className="uy:grid uy:grid-cols-1 uy:md:grid-cols-2 uy:lg:grid-cols-3" />
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
When a Unity component exposes managed state through `data-*`, target that
|
|
12
|
+
state rather than the native pseudo-class.
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import { ListViewItem } from '@payfit/unity-components'
|
|
16
|
+
;<ListViewItem className="uy:data-[hovered=true]:bg-surface-primary-hover" />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Merge external classes with uyMerge
|
|
20
|
+
|
|
21
|
+
`uyMerge` knows Unity's custom class groups and token families.
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
import { uyMerge } from '@payfit/unity-themes'
|
|
25
|
+
|
|
26
|
+
uyMerge('uy:p-100', 'uy:p-200')
|
|
27
|
+
// => 'uy:p-200'
|
|
28
|
+
|
|
29
|
+
uyMerge('uy:bg-surface-primary', 'uy:bg-surface-danger')
|
|
30
|
+
// => 'uy:bg-surface-danger'
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Define typed variants with uyTv
|
|
34
|
+
|
|
35
|
+
Use `uyTv` for reusable component variants and derive public props with
|
|
36
|
+
`VariantProps`.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import type { VariantProps } from '@payfit/unity-themes'
|
|
40
|
+
import { uyTv } from '@payfit/unity-themes'
|
|
41
|
+
|
|
42
|
+
export const callout = uyTv({
|
|
43
|
+
base: 'uy:inline-flex uy:items-center uy:gap-100 uy:rounded-100 uy:px-200 uy:py-100',
|
|
44
|
+
variants: {
|
|
45
|
+
intent: {
|
|
46
|
+
info: 'uy:bg-surface-primary uy:text-content-inverted',
|
|
47
|
+
danger: 'uy:bg-surface-danger uy:text-content-inverted',
|
|
48
|
+
neutral: 'uy:bg-surface-neutral uy:text-content-neutral',
|
|
49
|
+
},
|
|
50
|
+
size: {
|
|
51
|
+
sm: 'uy:typography-body-small',
|
|
52
|
+
md: 'uy:typography-body',
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
defaultVariants: { intent: 'info', size: 'md' },
|
|
56
|
+
})
|
|
57
|
+
|
|
58
|
+
export type CalloutVariantProps = VariantProps<typeof callout>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Compose conditional classes with cn
|
|
62
|
+
|
|
63
|
+
Use `cn` for local boolean conditions, not for a reusable multi-axis variant
|
|
64
|
+
API.
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { cn } from '@payfit/unity-themes'
|
|
68
|
+
|
|
69
|
+
function Row({ isActive }: { isActive: boolean }) {
|
|
70
|
+
return (
|
|
71
|
+
<div
|
|
72
|
+
className={cn(
|
|
73
|
+
'uy:flex uy:items-center uy:px-200 uy:py-100',
|
|
74
|
+
isActive && 'uy:bg-surface-primary',
|
|
75
|
+
)}
|
|
76
|
+
/>
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
```
|