@payfit/unity-themes 2.55.22 → 2.56.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.
- package/dist/esm/scripts/style-dictionary-config.d.ts +14 -0
- package/package.json +14 -5
- package/skills/unity-themes/SKILL.md +45 -0
- package/src/agent-references/manifest.json +16 -0
- package/src/agent-references/tokens-catalog.json +13891 -0
- package/dist/esm/scripts/agent-references/color-reference.d.ts +0 -37
- package/src/agent-references/README.mdx +0 -25
- package/src/agent-references/primitive-colors.mdx +0 -18
- package/src/agent-references/semantic-border-colors.mdx +0 -16
- package/src/agent-references/semantic-content-colors.mdx +0 -16
- package/src/agent-references/semantic-surface-colors.mdx +0 -16
- package/src/agent-references/semantic-utility-colors.mdx +0 -16
- package/src/components/unity-theme-provider.stories.tsx +0 -532
- package/src/components/unity-theme-provider.test.tsx +0 -150
- package/src/components/unity-theme-provider.tsx +0 -72
- package/src/index.ts +0 -15
- package/src/scripts/actions/append-animations.ts +0 -73
- package/src/scripts/actions/compose-multi-theme.ts +0 -59
- package/src/scripts/agent-references/color-reference.test.ts +0 -140
- package/src/scripts/agent-references/color-reference.ts +0 -348
- package/src/scripts/build.ts +0 -420
- package/src/scripts/file-headers/unity.ts +0 -31
- package/src/scripts/formats/processors/grid-processor.test.ts +0 -378
- package/src/scripts/formats/processors/grid-processor.ts +0 -64
- package/src/scripts/formats/processors/typography-processor.test.ts +0 -111
- package/src/scripts/formats/processors/typography-processor.ts +0 -48
- package/src/scripts/formats/unity-theme.test.ts +0 -329
- package/src/scripts/formats/unity-theme.ts +0 -54
- package/src/scripts/formats/utils.test.ts +0 -264
- package/src/scripts/formats/utils.ts +0 -15
- package/src/scripts/transforms/oklch.test.ts +0 -166
- package/src/scripts/transforms/oklch.ts +0 -19
- package/src/scripts/transforms/tailwind-animation-token.test.ts +0 -108
- package/src/scripts/transforms/tailwind-animation-token.ts +0 -51
- package/src/scripts/transforms/tailwind-color-token.test.ts +0 -304
- package/src/scripts/transforms/tailwind-color-token.ts +0 -17
- package/src/scripts/transforms/tailwind-grid-token.test.ts +0 -114
- package/src/scripts/transforms/tailwind-grid-token.ts +0 -27
- package/src/scripts/transforms/tailwind-spacing-token.test.ts +0 -315
- package/src/scripts/transforms/tailwind-spacing-token.ts +0 -24
- package/src/scripts/transforms/tailwind-text-token.test.ts +0 -328
- package/src/scripts/transforms/tailwind-text-token.ts +0 -30
- package/src/scripts/transforms/tailwind-typography-token.test.ts +0 -55
- package/src/scripts/transforms/tailwind-typography-token.ts +0 -20
- package/src/scripts/types.ts +0 -30
- package/src/scripts/utils/prefix-transform.test.ts +0 -137
- package/src/scripts/utils/prefix-transform.ts +0 -16
- package/src/utils/cn.ts +0 -109
- package/src/utils/merge-config.ts +0 -194
- package/src/utils/tailwind-merge.test.ts +0 -462
- package/src/utils/tailwind-merge.ts +0 -77
- package/src/utils/tailwind-variants.ts +0 -53
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
type ColorToken = {
|
|
2
|
-
name: string;
|
|
3
|
-
value?: string;
|
|
4
|
-
$value?: string;
|
|
5
|
-
path: string[];
|
|
6
|
-
};
|
|
7
|
-
type ReferenceToken = {
|
|
8
|
-
name: string;
|
|
9
|
-
group: string;
|
|
10
|
-
variable: string;
|
|
11
|
-
};
|
|
12
|
-
type ReferenceFile = {
|
|
13
|
-
filename: string;
|
|
14
|
-
content: string;
|
|
15
|
-
};
|
|
16
|
-
type UtilitySection = {
|
|
17
|
-
title: string;
|
|
18
|
-
patterns: string[];
|
|
19
|
-
};
|
|
20
|
-
export declare const generateColorGroupReference: ({ title, storybookTitle, description, tokens, utilitySections, }: {
|
|
21
|
-
title: string;
|
|
22
|
-
storybookTitle: string;
|
|
23
|
-
description: string;
|
|
24
|
-
tokens: ReferenceToken[];
|
|
25
|
-
utilitySections?: UtilitySection[];
|
|
26
|
-
}) => string;
|
|
27
|
-
export declare const generatePrimitiveColorReferenceFiles: (legacyTokens: ColorToken[]) => ReferenceFile[];
|
|
28
|
-
export declare const generateSemanticColorReferenceFiles: (legacyTokens: ColorToken[]) => ReferenceFile[];
|
|
29
|
-
export declare const generateThemesAgentReferencesReadme: ({ primitiveFiles, semanticFiles, }: {
|
|
30
|
-
primitiveFiles: ReferenceFile[];
|
|
31
|
-
semanticFiles: ReferenceFile[];
|
|
32
|
-
}) => string;
|
|
33
|
-
export declare const writeColorAgentReferences: ({ legacyTokens, outputDir, }: {
|
|
34
|
-
legacyTokens: ColorToken[];
|
|
35
|
-
outputDir: string;
|
|
36
|
-
}) => void;
|
|
37
|
-
export {};
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
-
|
|
3
|
-
<Meta title="Agent References/Unity Themes" />
|
|
4
|
-
|
|
5
|
-
{/* AUTO-GENERATED FILE. DO NOT EDIT.
|
|
6
|
-
Generated by unity-themes:pre-build.
|
|
7
|
-
Source: Unity Style Dictionary color tokens.
|
|
8
|
-
*/}
|
|
9
|
-
|
|
10
|
-
# Unity Themes Agent References
|
|
11
|
-
|
|
12
|
-
Static Unity theme references for Storybook MCP, search, and agents.
|
|
13
|
-
|
|
14
|
-
Storybook includes these MDX files through the shared `../src/**/*.mdx` stories glob, and `@storybook/addon-mcp` exposes docs content to MCP clients.
|
|
15
|
-
|
|
16
|
-
## Semantic colors
|
|
17
|
-
|
|
18
|
-
- [semantic-surface-colors](./semantic-surface-colors.mdx)
|
|
19
|
-
- [semantic-content-colors](./semantic-content-colors.mdx)
|
|
20
|
-
- [semantic-border-colors](./semantic-border-colors.mdx)
|
|
21
|
-
- [semantic-utility-colors](./semantic-utility-colors.mdx)
|
|
22
|
-
|
|
23
|
-
## Primitive colors
|
|
24
|
-
|
|
25
|
-
- [primitive-colors](./primitive-colors.mdx)
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
-
|
|
3
|
-
<Meta title="Agent References/Primitive Colors" />
|
|
4
|
-
|
|
5
|
-
{/* AUTO-GENERATED FILE. DO NOT EDIT.
|
|
6
|
-
Generated by unity-themes:pre-build.
|
|
7
|
-
Source: Unity Style Dictionary color tokens.
|
|
8
|
-
*/}
|
|
9
|
-
|
|
10
|
-
# Primitive Colors
|
|
11
|
-
|
|
12
|
-
Prefer semantic color tokens for product UI. Use primitive colors only when no semantic token fits the use case.
|
|
13
|
-
|
|
14
|
-
Color names: grayscale, blue, red, green, orange, cyan, purple, plum, peach, sunglow, teal, yellow
|
|
15
|
-
|
|
16
|
-
Scale: l1, l2, l3, l4, l5, l6, l7, l8, l9, l10, l11, l12. Grayscale also has l0.
|
|
17
|
-
|
|
18
|
-
Tailwind usage: `uy:bg-<color>-<scale>`, for example `uy:bg-blue-l6` or `uy:bg-grayscale-l0`.
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
-
|
|
3
|
-
<Meta title="Agent References/Semantic Colors/Border" />
|
|
4
|
-
|
|
5
|
-
{/* AUTO-GENERATED FILE. DO NOT EDIT.
|
|
6
|
-
Generated by unity-themes:pre-build.
|
|
7
|
-
Source: Unity Style Dictionary color tokens.
|
|
8
|
-
*/}
|
|
9
|
-
|
|
10
|
-
# Semantic Border Colors
|
|
11
|
-
|
|
12
|
-
Use semantic color tokens for product UI. These names encode intent and stay stable across Unity themes. Use border tokens for borders and outlines. Other Tailwind color utilities may exist for these tokens, but using border tokens for backgrounds, text, gradients, or rings is discouraged.
|
|
13
|
-
|
|
14
|
-
Names: danger, danger-lowest, form-active, form-disabled, form-enabled, form-error, form-focus, form-hover, form-pressed, form-read-only, form-selected, info, info-lowest, inverted, inverted-active, inverted-disabled, inverted-enabled, inverted-focus, inverted-high, inverted-hover, inverted-pressed, neutral, neutral-active, neutral-disabled, neutral-enabled, neutral-high, neutral-high-active, neutral-high-disabled, neutral-high-enabled, neutral-high-focus, neutral-high-hover, neutral-high-pressed, neutral-hover, neutral-low, neutral-pressed, neutral-selected, primary, primary-active, primary-disabled, primary-enabled, primary-focus, primary-hover, primary-lowest, primary-pressed, promo, promo-lowest, success, success-low, success-lowest, warning, warning-lowest
|
|
15
|
-
|
|
16
|
-
Recommended: `uy:border-border-{name}`, `uy:outline-border-{name}`
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
-
|
|
3
|
-
<Meta title="Agent References/Semantic Colors/Content" />
|
|
4
|
-
|
|
5
|
-
{/* AUTO-GENERATED FILE. DO NOT EDIT.
|
|
6
|
-
Generated by unity-themes:pre-build.
|
|
7
|
-
Source: Unity Style Dictionary color tokens.
|
|
8
|
-
*/}
|
|
9
|
-
|
|
10
|
-
# Semantic Content Colors
|
|
11
|
-
|
|
12
|
-
Use semantic color tokens for product UI. These names encode intent and stay stable across Unity themes. Use content tokens for text, icon color, and text decoration. Other Tailwind color utilities may exist for these tokens, but using content tokens for backgrounds, borders, rings, or outlines is discouraged.
|
|
13
|
-
|
|
14
|
-
Names: danger, danger-active, danger-disabled, danger-enabled, danger-focus, danger-high, danger-hover, danger-pressed, decorative-orange, decorative-orange-high, decorative-plum, decorative-plum-high, decorative-purple, decorative-purple-high, decorative-teal, decorative-teal-high, form-active, form-disabled, form-enabled, form-focus, form-hover, form-invalid, form-pressed, form-read-only, form-selected, info, info-active, info-disabled, info-enabled, info-focus, info-high, info-hover, info-pressed, inverted, inverted-active, inverted-disabled, inverted-enabled, inverted-focus, inverted-hover, inverted-pressed, neutral, neutral-active, neutral-disabled, neutral-enabled, neutral-focus, neutral-hover, neutral-low, neutral-lowest, neutral-lowest-active, neutral-lowest-disabled, neutral-lowest-enabled, neutral-lowest-focus, neutral-lowest-hover, neutral-lowest-pressed, neutral-pressed, primary, primary-active, primary-disabled, primary-enabled, primary-focus, primary-high, primary-hover, primary-pressed, promo, promo-high, success, success-active, success-disabled, success-enabled, success-focus, success-high, success-hover, success-pressed, warning, warning-active, warning-disabled, warning-enabled, warning-focus, warning-high, warning-hover, warning-pressed
|
|
15
|
-
|
|
16
|
-
Recommended: `uy:text-content-{name}`, `uy:decoration-content-{name}`
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
-
|
|
3
|
-
<Meta title="Agent References/Semantic Colors/Surface" />
|
|
4
|
-
|
|
5
|
-
{/* AUTO-GENERATED FILE. DO NOT EDIT.
|
|
6
|
-
Generated by unity-themes:pre-build.
|
|
7
|
-
Source: Unity Style Dictionary color tokens.
|
|
8
|
-
*/}
|
|
9
|
-
|
|
10
|
-
# Semantic Surface Colors
|
|
11
|
-
|
|
12
|
-
Use semantic color tokens for product UI. These names encode intent and stay stable across Unity themes. Use surface tokens for backgrounds and filled UI surfaces. Other Tailwind color utilities may exist for these tokens, but using surface tokens for text, borders, rings, or outlines is discouraged.
|
|
13
|
-
|
|
14
|
-
Names: ai-low, danger, danger-active, danger-disabled, danger-enabled, danger-focus, danger-hover, danger-low, danger-lowest, danger-lowest-active, danger-lowest-disabled, danger-lowest-enabled, danger-lowest-focus, danger-lowest-hover, danger-lowest-pressed, danger-pressed, decorative-orange, decorative-orange-high, decorative-orange-low, decorative-orange-lowest, decorative-plum, decorative-plum-high, decorative-plum-low, decorative-plum-lowest, decorative-purple, decorative-purple-high, decorative-purple-low, decorative-purple-lowest, decorative-teal, decorative-teal-high, decorative-teal-low, decorative-teal-lowest, form-active, form-disabled, form-enabled, form-error, form-focus, form-high-active, form-high-disabled, form-high-enabled, form-high-error, form-high-focus, form-high-hover, form-high-pressed, form-high-read-only, form-high-selected, form-hover, form-pressed, form-read-only, form-selected, info, info-low, info-lowest, info-lowest-active, info-lowest-disabled, info-lowest-enabled, info-lowest-focus, info-lowest-hover, info-lowest-pressed, inverted, inverted-active, inverted-enabled, inverted-focus, inverted-hover, inverted-pressed, neutral, neutral-active, neutral-disabled, neutral-enabled, neutral-focus, neutral-hover, neutral-low, neutral-low-active, neutral-low-disabled, neutral-low-enabled, neutral-low-focus, neutral-low-hover, neutral-low-pressed, neutral-low-selected, neutral-lowest, neutral-lowest-active, neutral-lowest-disabled, neutral-lowest-enabled, neutral-lowest-focus, neutral-lowest-hover, neutral-lowest-pressed, neutral-lowest-selected, neutral-pressed, neutral-selected, primary, primary-active, primary-disabled, primary-enabled, primary-focus, primary-high, primary-highest, primary-hover, primary-low, primary-lowest, primary-lowest-active, primary-lowest-disabled, primary-lowest-enabled, primary-lowest-focus, primary-lowest-hover, primary-lowest-pressed, primary-pressed, promo, promo-low, promo-lowest, success, success-low, success-lowest, success-lowest-active, success-lowest-disabled, success-lowest-enabled, success-lowest-focus, success-lowest-hover, success-lowest-pressed, warning, warning-active, warning-disabled, warning-enabled, warning-focus, warning-hover, warning-low, warning-lowest, warning-lowest-active, warning-lowest-disabled, warning-lowest-enabled, warning-lowest-focus, warning-lowest-hover, warning-lowest-pressed, warning-pressed
|
|
15
|
-
|
|
16
|
-
Recommended: `uy:bg-surface-{name}`
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
-
|
|
3
|
-
<Meta title="Agent References/Semantic Colors/Utility & Canvas" />
|
|
4
|
-
|
|
5
|
-
{/* AUTO-GENERATED FILE. DO NOT EDIT.
|
|
6
|
-
Generated by unity-themes:pre-build.
|
|
7
|
-
Source: Unity Style Dictionary color tokens.
|
|
8
|
-
*/}
|
|
9
|
-
|
|
10
|
-
# Semantic Utility & Canvas Colors
|
|
11
|
-
|
|
12
|
-
Use semantic color tokens for product UI. These names encode intent and stay stable across Unity themes. Use utility and canvas tokens only for their named UI purpose. These tokens are intentionally narrow and should not be treated as a general color palette.
|
|
13
|
-
|
|
14
|
-
Names: backdrop, focus-ring, inverted-focus-ring, shadow-100, shadow-200, shadow-300, shadow-400, shadow-500, shadow-600
|
|
15
|
-
|
|
16
|
-
Token-specific: `uy:bg-canvas-{name}`, `uy:ring-utility-focus-ring`, `uy:ring-utility-inverted-focus-ring`, `uy:bg-utility-backdrop`, shadow-\* tokens are not UI colors
|