@nice2dev/icons 1.1.5 → 1.1.7
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/CHANGELOG.md +52 -0
- package/dist/cjs/NiceDesktopIconExporter.js +0 -1
- package/dist/cjs/NiceFaviconGenerator.js +0 -1
- package/dist/cjs/NiceIconEditor.js +0 -1
- package/dist/cjs/NiceIconPicker.js +0 -1
- package/dist/cjs/NiceIconPreview.js +0 -1
- package/dist/cjs/NiceIconSetCreator.js +0 -1
- package/dist/cjs/NtdIconBadge.js +0 -1
- package/dist/cjs/NtdIconMorph.js +0 -1
- package/dist/cjs/NtdStateMorph.js +0 -1
- package/dist/cjs/advancedIconSearch.js +0 -1
- package/dist/cjs/animationControls.js +0 -1
- package/dist/cjs/client.js +33 -0
- package/dist/cjs/createIcon.js +0 -1
- package/dist/cjs/design-tokens.js +459 -0
- package/dist/cjs/figmaExport.js +0 -1
- package/dist/cjs/figmaSync.js +0 -1
- package/dist/cjs/headless-ui.js +430 -0
- package/dist/cjs/iconAnalytics.js +0 -1
- package/dist/cjs/iconMetadata.js +0 -1
- package/dist/cjs/iconStyles.js +0 -1
- package/dist/cjs/icons/accessibility.js +0 -1
- package/dist/cjs/icons/actions.js +0 -1
- package/dist/cjs/icons/ai.js +0 -1
- package/dist/cjs/icons/brand.js +0 -1
- package/dist/cjs/icons/business.js +0 -1
- package/dist/cjs/icons/devtech.js +0 -1
- package/dist/cjs/icons/ecommerce.js +0 -1
- package/dist/cjs/icons/education.js +0 -1
- package/dist/cjs/icons/files.js +0 -1
- package/dist/cjs/icons/fintech.js +0 -1
- package/dist/cjs/icons/food.js +0 -1
- package/dist/cjs/icons/fun.js +0 -1
- package/dist/cjs/icons/gaming.js +0 -1
- package/dist/cjs/icons/health.js +0 -1
- package/dist/cjs/icons/index.js +0 -1
- package/dist/cjs/icons/legal.js +0 -1
- package/dist/cjs/icons/media.js +0 -1
- package/dist/cjs/icons/navigation.js +0 -1
- package/dist/cjs/icons/omniverk.js +0 -1
- package/dist/cjs/icons/realestate.js +0 -1
- package/dist/cjs/icons/saas.js +0 -1
- package/dist/cjs/icons/science.js +0 -1
- package/dist/cjs/icons/shapes.js +0 -1
- package/dist/cjs/icons/smarthome.js +0 -1
- package/dist/cjs/icons/social.js +0 -1
- package/dist/cjs/icons/sports.js +0 -1
- package/dist/cjs/icons/sustainability.js +0 -1
- package/dist/cjs/icons/travel.js +0 -1
- package/dist/cjs/icons/ui.js +0 -1
- package/dist/cjs/icons/weather.js +0 -1
- package/dist/cjs/index.js +0 -1
- package/dist/cjs/lottieIntegration.js +0 -1
- package/dist/cjs/particleEffects.js +0 -1
- package/dist/cjs/resolver.js +0 -1
- package/dist/cjs/rsc.js +209 -0
- package/dist/cjs/sharpen.js +0 -1
- package/dist/cjs/smilAnimations.js +0 -1
- package/dist/cjs/tailwind-plugin.js +0 -1
- package/dist/cjs/types.js +0 -1
- package/dist/cjs/utilities.js +401 -0
- package/dist/cjs/variantProps.js +0 -1
- package/dist/esm/NiceDesktopIconExporter.js +0 -1
- package/dist/esm/NiceFaviconGenerator.js +0 -1
- package/dist/esm/NiceIconEditor.js +0 -1
- package/dist/esm/NiceIconPicker.js +0 -1
- package/dist/esm/NiceIconPreview.js +0 -1
- package/dist/esm/NiceIconSetCreator.js +0 -1
- package/dist/esm/NtdIconBadge.js +0 -1
- package/dist/esm/NtdIconMorph.js +0 -1
- package/dist/esm/NtdStateMorph.js +0 -1
- package/dist/esm/advancedIconSearch.js +0 -1
- package/dist/esm/animationControls.js +0 -1
- package/dist/esm/client.js +5 -0
- package/dist/esm/createIcon.js +0 -1
- package/dist/esm/design-tokens.js +446 -0
- package/dist/esm/figmaExport.js +0 -1
- package/dist/esm/figmaSync.js +0 -1
- package/dist/esm/headless-ui.js +413 -0
- package/dist/esm/iconAnalytics.js +0 -1
- package/dist/esm/iconMetadata.js +0 -1
- package/dist/esm/iconStyles.js +0 -1
- package/dist/esm/icons/accessibility.js +0 -1
- package/dist/esm/icons/actions.js +0 -1
- package/dist/esm/icons/ai.js +0 -1
- package/dist/esm/icons/brand.js +0 -1
- package/dist/esm/icons/business.js +0 -1
- package/dist/esm/icons/devtech.js +0 -1
- package/dist/esm/icons/ecommerce.js +0 -1
- package/dist/esm/icons/education.js +0 -1
- package/dist/esm/icons/files.js +0 -1
- package/dist/esm/icons/fintech.js +0 -1
- package/dist/esm/icons/food.js +0 -1
- package/dist/esm/icons/fun.js +0 -1
- package/dist/esm/icons/gaming.js +0 -1
- package/dist/esm/icons/health.js +0 -1
- package/dist/esm/icons/index.js +0 -1
- package/dist/esm/icons/legal.js +0 -1
- package/dist/esm/icons/media.js +0 -1
- package/dist/esm/icons/navigation.js +0 -1
- package/dist/esm/icons/omniverk.js +0 -1
- package/dist/esm/icons/realestate.js +0 -1
- package/dist/esm/icons/saas.js +0 -1
- package/dist/esm/icons/science.js +0 -1
- package/dist/esm/icons/shapes.js +0 -1
- package/dist/esm/icons/smarthome.js +0 -1
- package/dist/esm/icons/social.js +0 -1
- package/dist/esm/icons/sports.js +0 -1
- package/dist/esm/icons/sustainability.js +0 -1
- package/dist/esm/icons/travel.js +0 -1
- package/dist/esm/icons/ui.js +0 -1
- package/dist/esm/icons/weather.js +0 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/lottieIntegration.js +0 -1
- package/dist/esm/particleEffects.js +0 -1
- package/dist/esm/resolver.js +0 -1
- package/dist/esm/rsc.js +201 -0
- package/dist/esm/sharpen.js +0 -1
- package/dist/esm/smilAnimations.js +0 -1
- package/dist/esm/tailwind-plugin.js +0 -1
- package/dist/esm/types.js +0 -1
- package/dist/esm/utilities.js +384 -0
- package/dist/esm/variantProps.js +0 -1
- package/dist/types/headless-ui.d.ts +4 -4
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,57 @@
|
|
|
1
1
|
# @nice2dev/icons — Changelog
|
|
2
2
|
|
|
3
|
+
## 1.1.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Close the three items left open in the 1.1.6 response to OmniVerk.
|
|
8
|
+
|
|
9
|
+
**Every value control works without state in the parent.** The `audit-controllable-state` gate
|
|
10
|
+
counted 87 value props that were required with no `default*`, so the control could not render from a
|
|
11
|
+
manifest without data. It now reports 0 and gates CI at `--max=0`. 48 controls gained `default*` props
|
|
12
|
+
through `useControllableState` (existing `value` + handler call sites behave as before); 33 read-only
|
|
13
|
+
data lists are optional with a stable empty default; 4 props paired with a handler only by name are
|
|
14
|
+
optional; `NiceWhiteboard` and `NiceMetricsDashboard` render an empty state until a session or
|
|
15
|
+
dashboard arrives. Additive API only — nothing renamed or removed.
|
|
16
|
+
|
|
17
|
+
- `NicePivotGrid.fields`, `NiceScheduler.events` and `NiceGitHooks.hooks` are controlled only together
|
|
18
|
+
with their change handler, as `NiceScheduler` already documented for `currentDate`/`view`. A bare
|
|
19
|
+
prop stays an initial value; prop plus handler now always wins (later prop updates used to be
|
|
20
|
+
ignored). `NiceGitHooks.onHookChange` is now called; `onHooksChange` and
|
|
21
|
+
`NiceLocaleManager.onTranslationsChange` are new.
|
|
22
|
+
- `NiceCodeEditor` / `NiceCodeDiffEditor` no longer report a value written from the prop back through
|
|
23
|
+
`onChange`, and call the latest handler rather than the one captured at mount.
|
|
24
|
+
- `NiceHtmlEditor` no longer rewrites its content on every render (React 19 compares the
|
|
25
|
+
`dangerouslySetInnerHTML` object, not its string), which moved the caret; the HTML source and
|
|
26
|
+
Markdown views can be closed again.
|
|
27
|
+
- Selections seeded once from the first item (access manager, automation/scene editors, git diff
|
|
28
|
+
viewer, ribbon, setup wizard) follow data that arrives after mount.
|
|
29
|
+
- `useControllableState`: new `fallbackValue` seed that never triggers the value/default clash warning;
|
|
30
|
+
two functional updates in one tick no longer lose the first; `onChange` is called with one argument
|
|
31
|
+
when there is no meta. `UseControllableStateOptions` is now a union type alias.
|
|
32
|
+
|
|
33
|
+
**`--nice-*` is the source of truth for design tokens.** Controls read only `--nice-*` (9,225 reads in
|
|
34
|
+
339 files). The unprefixed names (`--color-primary`, `--bg-primary`, `--text-muted`, …) stay declared
|
|
35
|
+
as aliases pointing at the Nice tokens, so reading them works, but setting them no longer repaints Nice
|
|
36
|
+
controls. Apps that relied on that can import `@nice2dev/ui/css/legacy-bg-text-aliases.css` after
|
|
37
|
+
`style.css` (removed in 1.2), or set `--nice-color-primary` and friends directly. 13 tokens that were
|
|
38
|
+
read and never declared (`--color-danger`, `--text-on-primary`, `--color-white`, …) are defined; the
|
|
39
|
+
dark blocks define the canonical names, so `.nice-dark` on `<body>` no longer leaves them on light
|
|
40
|
+
values; `--nice-primary-bg` and `--nice-selected-bg` are a primary tint instead of falling through to
|
|
41
|
+
grey. New gate `audit-token-names`.
|
|
42
|
+
|
|
43
|
+
**Node ESM and `require()`.** `@nice2dev/spatial-core` imports from plain Node ESM (51 relative
|
|
44
|
+
specifiers gained extensions, enforced by `nodenext`), and so does `@nice2dev/ui-buildings`, which
|
|
45
|
+
failed through it. `require()` works for `ui-3d`, `ui-graphics` and `game-engine`. The package-exports
|
|
46
|
+
gate now loads every entry in both module systems.
|
|
47
|
+
|
|
48
|
+
**Hygiene.** Sources are prettier-formatted and CI gates on it; 640 stale `.d.ts` files were removed
|
|
49
|
+
from source trees (never published).
|
|
50
|
+
|
|
51
|
+
## 1.1.6
|
|
52
|
+
|
|
53
|
+
No changes in this release.
|
|
54
|
+
|
|
3
55
|
## 1.1.5
|
|
4
56
|
|
|
5
57
|
No changes in this release.
|
|
@@ -655,4 +655,3 @@ exports.LINUX_HICOLOR_DIRS = LINUX_HICOLOR_DIRS;
|
|
|
655
655
|
exports.NiceDesktopIconExporter = NiceDesktopIconExporter;
|
|
656
656
|
exports.RETINA_VARIANTS = RETINA_VARIANTS;
|
|
657
657
|
exports.useDesktopIconExporter = useDesktopIconExporter;
|
|
658
|
-
//# sourceMappingURL=NiceDesktopIconExporter.js.map
|
package/dist/cjs/NtdIconBadge.js
CHANGED
package/dist/cjs/NtdIconMorph.js
CHANGED
|
@@ -690,4 +690,3 @@ exports.createClickAnimation = createClickAnimation;
|
|
|
690
690
|
exports.createHoverAnimation = createHoverAnimation;
|
|
691
691
|
exports.createVisibilityAnimation = createVisibilityAnimation;
|
|
692
692
|
exports.useAnimationSequence = useAnimationSequence;
|
|
693
|
-
//# sourceMappingURL=animationControls.js.map
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var animationControls = require('./animationControls.js');
|
|
4
|
+
var NiceIconPicker = require('./NiceIconPicker.js');
|
|
5
|
+
var NtdIconMorph = require('./NtdIconMorph.js');
|
|
6
|
+
var NtdIconBadge = require('./NtdIconBadge.js');
|
|
7
|
+
var smilAnimations = require('./smilAnimations.js');
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
exports.AnimationController = animationControls.AnimationController;
|
|
12
|
+
exports.InteractiveIcon = animationControls.InteractiveIcon;
|
|
13
|
+
exports.PRESET_INTERACTIONS = animationControls.PRESET_INTERACTIONS;
|
|
14
|
+
exports.PRESET_SEQUENCES = animationControls.PRESET_SEQUENCES;
|
|
15
|
+
exports.createAnimationSequence = animationControls.createAnimationSequence;
|
|
16
|
+
exports.createClickAnimation = animationControls.createClickAnimation;
|
|
17
|
+
exports.createHoverAnimation = animationControls.createHoverAnimation;
|
|
18
|
+
exports.createVisibilityAnimation = animationControls.createVisibilityAnimation;
|
|
19
|
+
exports.useAnimationSequence = animationControls.useAnimationSequence;
|
|
20
|
+
exports.NiceIconPicker = NiceIconPicker.NiceIconPicker;
|
|
21
|
+
exports.NtdIconMorph = NtdIconMorph.NtdIconMorph;
|
|
22
|
+
exports.NtdMorphPair = NtdIconMorph.NtdMorphPair;
|
|
23
|
+
exports.NtdPathMorph = NtdIconMorph.NtdPathMorph;
|
|
24
|
+
exports.useMorphState = NtdIconMorph.useMorphState;
|
|
25
|
+
exports.NtdBadge = NtdIconBadge.NtdBadge;
|
|
26
|
+
exports.NtdIconOverlay = NtdIconBadge.NtdIconOverlay;
|
|
27
|
+
exports.NtdIconStack = NtdIconBadge.NtdIconStack;
|
|
28
|
+
exports.NtdStatusDot = NtdIconBadge.NtdStatusDot;
|
|
29
|
+
exports.SMIL_ANIMATION_TYPES = smilAnimations.SMIL_ANIMATION_TYPES;
|
|
30
|
+
exports.SmilAnimationWrapper = smilAnimations.SmilAnimationWrapper;
|
|
31
|
+
exports.createSmilAnimationDef = smilAnimations.createSmilAnimationDef;
|
|
32
|
+
exports.generateSmilAnimation = smilAnimations.generateSmilAnimation;
|
|
33
|
+
exports.isSmilSupported = smilAnimations.isSmilSupported;
|
package/dist/cjs/createIcon.js
CHANGED
|
@@ -0,0 +1,459 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file design-tokens.ts
|
|
7
|
+
* @description Design Tokens Integration for @nice2dev/icons
|
|
8
|
+
*
|
|
9
|
+
* Provides Style Dictionary compatible design tokens for icon styling.
|
|
10
|
+
* Supports auto-generation from design systems and custom token sources.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```ts
|
|
14
|
+
* // Generate tokens for Style Dictionary
|
|
15
|
+
* import { generateIconTokens, createTokensConfig } from '@nice2dev/icons/design-tokens';
|
|
16
|
+
*
|
|
17
|
+
* const tokens = generateIconTokens({
|
|
18
|
+
* prefix: 'ntd',
|
|
19
|
+
* namespace: 'icon',
|
|
20
|
+
* colorTokens: {
|
|
21
|
+
* primary: '{color.brand.500}',
|
|
22
|
+
* secondary: '{color.gray.400}',
|
|
23
|
+
* },
|
|
24
|
+
* });
|
|
25
|
+
*
|
|
26
|
+
* // tokens.json output
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @version 1.0.0
|
|
30
|
+
* @since 2026-03
|
|
31
|
+
* @license MIT
|
|
32
|
+
*/
|
|
33
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
34
|
+
DEFAULT TOKEN VALUES
|
|
35
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
36
|
+
/**
|
|
37
|
+
* Default icon size tokens
|
|
38
|
+
*/
|
|
39
|
+
const DEFAULT_SIZE_TOKENS = {
|
|
40
|
+
xs: '0.75rem', // 12px
|
|
41
|
+
sm: '1rem', // 16px
|
|
42
|
+
md: '1.5rem', // 24px
|
|
43
|
+
lg: '2rem', // 32px
|
|
44
|
+
xl: '3rem', // 48px
|
|
45
|
+
'2xl': '4rem', // 64px
|
|
46
|
+
};
|
|
47
|
+
/**
|
|
48
|
+
* Default icon color tokens
|
|
49
|
+
*/
|
|
50
|
+
const DEFAULT_COLOR_TOKENS = {
|
|
51
|
+
primary: '#3b82f6', // Blue 500
|
|
52
|
+
secondary: '#64748b', // Slate 500
|
|
53
|
+
accent: '#8b5cf6', // Violet 500
|
|
54
|
+
success: '#22c55e', // Green 500
|
|
55
|
+
warning: '#f59e0b', // Amber 500
|
|
56
|
+
error: '#ef4444', // Red 500
|
|
57
|
+
info: '#06b6d4', // Cyan 500
|
|
58
|
+
muted: '#9ca3af', // Gray 400
|
|
59
|
+
};
|
|
60
|
+
/**
|
|
61
|
+
* Default stroke width tokens
|
|
62
|
+
*/
|
|
63
|
+
const DEFAULT_STROKE_TOKENS = {
|
|
64
|
+
thin: '1',
|
|
65
|
+
normal: '1.5',
|
|
66
|
+
medium: '2',
|
|
67
|
+
thick: '2.5',
|
|
68
|
+
bold: '3',
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Default animation tokens
|
|
72
|
+
*/
|
|
73
|
+
const DEFAULT_ANIMATION_TOKENS = {
|
|
74
|
+
duration: {
|
|
75
|
+
instant: '0ms',
|
|
76
|
+
fast: '150ms',
|
|
77
|
+
normal: '300ms',
|
|
78
|
+
slow: '500ms',
|
|
79
|
+
slower: '1000ms',
|
|
80
|
+
},
|
|
81
|
+
easing: {
|
|
82
|
+
linear: 'linear',
|
|
83
|
+
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
84
|
+
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
|
|
85
|
+
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
86
|
+
spring: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
90
|
+
TOKEN GENERATION
|
|
91
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
92
|
+
/**
|
|
93
|
+
* Generates Style Dictionary compatible design tokens for icons.
|
|
94
|
+
*
|
|
95
|
+
* @param config - Token configuration
|
|
96
|
+
* @returns Token group object ready for Style Dictionary
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* ```ts
|
|
100
|
+
* const tokens = generateIconTokens({
|
|
101
|
+
* prefix: 'ntd',
|
|
102
|
+
* colorTokens: {
|
|
103
|
+
* primary: '{color.brand.500}',
|
|
104
|
+
* },
|
|
105
|
+
* });
|
|
106
|
+
*
|
|
107
|
+
* // Output:
|
|
108
|
+
* // {
|
|
109
|
+
* // ntd: {
|
|
110
|
+
* // icon: {
|
|
111
|
+
* // size: { md: { value: '1.5rem', type: 'dimension' } },
|
|
112
|
+
* // color: { primary: { value: '{color.brand.500}', type: 'color' } },
|
|
113
|
+
* // }
|
|
114
|
+
* // }
|
|
115
|
+
* // }
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
function generateIconTokens(config = {}) {
|
|
119
|
+
const { prefix = 'ntd', namespace = 'icon', colorTokens = {}, sizeTokens = {}, strokeTokens = {}, includeAnimations = true, includeVariants = true, } = config;
|
|
120
|
+
const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
|
|
121
|
+
const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
|
|
122
|
+
const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
|
|
123
|
+
const result = {
|
|
124
|
+
[prefix]: {
|
|
125
|
+
[namespace]: {
|
|
126
|
+
// Size tokens
|
|
127
|
+
size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
|
|
128
|
+
acc[key] = {
|
|
129
|
+
value: typeof value === 'number' ? `${value}px` : value,
|
|
130
|
+
type: 'dimension',
|
|
131
|
+
description: `Icon size: ${key}`,
|
|
132
|
+
$extensions: {
|
|
133
|
+
'org.nice2dev.icons': {
|
|
134
|
+
cssVariable: `--${prefix}-${namespace}-size-${key}`,
|
|
135
|
+
tailwindClass: `${prefix}-${namespace}-${key}`,
|
|
136
|
+
},
|
|
137
|
+
},
|
|
138
|
+
};
|
|
139
|
+
return acc;
|
|
140
|
+
}, {}),
|
|
141
|
+
// Color tokens
|
|
142
|
+
color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
|
|
143
|
+
acc[key] = {
|
|
144
|
+
value,
|
|
145
|
+
type: 'color',
|
|
146
|
+
description: `Icon color: ${key}`,
|
|
147
|
+
$extensions: {
|
|
148
|
+
'org.nice2dev.icons': {
|
|
149
|
+
cssVariable: `--${prefix}-${namespace}-color-${key}`,
|
|
150
|
+
tailwindClass: `${prefix}-${namespace}-${key}`,
|
|
151
|
+
},
|
|
152
|
+
},
|
|
153
|
+
};
|
|
154
|
+
return acc;
|
|
155
|
+
}, {}),
|
|
156
|
+
// Stroke tokens
|
|
157
|
+
stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
|
|
158
|
+
acc[key] = {
|
|
159
|
+
value: String(value),
|
|
160
|
+
type: 'number',
|
|
161
|
+
description: `Icon stroke width: ${key}`,
|
|
162
|
+
$extensions: {
|
|
163
|
+
'org.nice2dev.icons': {
|
|
164
|
+
cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
|
|
165
|
+
tailwindClass: `${prefix}-${namespace}-stroke-${key}`,
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
};
|
|
169
|
+
return acc;
|
|
170
|
+
}, {}),
|
|
171
|
+
// Secondary opacity
|
|
172
|
+
opacity: {
|
|
173
|
+
secondary: {
|
|
174
|
+
value: '0.35',
|
|
175
|
+
type: 'number',
|
|
176
|
+
description: 'Secondary color opacity for duotone variant',
|
|
177
|
+
},
|
|
178
|
+
},
|
|
179
|
+
},
|
|
180
|
+
},
|
|
181
|
+
};
|
|
182
|
+
// Add animation tokens
|
|
183
|
+
if (includeAnimations) {
|
|
184
|
+
result[prefix][namespace] = {
|
|
185
|
+
...result[prefix][namespace],
|
|
186
|
+
animation: {
|
|
187
|
+
duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
|
|
188
|
+
acc[key] = {
|
|
189
|
+
value,
|
|
190
|
+
type: 'duration',
|
|
191
|
+
description: `Animation duration: ${key}`,
|
|
192
|
+
};
|
|
193
|
+
return acc;
|
|
194
|
+
}, {}),
|
|
195
|
+
easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
|
|
196
|
+
acc[key] = {
|
|
197
|
+
value,
|
|
198
|
+
type: 'cubicBezier',
|
|
199
|
+
description: `Animation easing: ${key}`,
|
|
200
|
+
};
|
|
201
|
+
return acc;
|
|
202
|
+
}, {}),
|
|
203
|
+
},
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
// Add variant tokens
|
|
207
|
+
if (includeVariants) {
|
|
208
|
+
result[prefix][namespace] = {
|
|
209
|
+
...result[prefix][namespace],
|
|
210
|
+
variant: {
|
|
211
|
+
solid: { value: 'solid', type: 'string', description: 'Filled icon variant' },
|
|
212
|
+
outline: { value: 'outline', type: 'string', description: 'Outlined icon variant' },
|
|
213
|
+
wireframe: {
|
|
214
|
+
value: 'wireframe',
|
|
215
|
+
type: 'string',
|
|
216
|
+
description: 'Thin construction-line variant',
|
|
217
|
+
},
|
|
218
|
+
duotone: { value: 'duotone', type: 'string', description: 'Two-tone icon variant' },
|
|
219
|
+
cutout: {
|
|
220
|
+
value: 'cutout',
|
|
221
|
+
type: 'string',
|
|
222
|
+
description: 'Knockout/cutout background variant',
|
|
223
|
+
},
|
|
224
|
+
sharp: { value: 'sharp', type: 'string', description: 'Sharp corners variant' },
|
|
225
|
+
rounded: { value: 'rounded', type: 'string', description: 'Rounded corners variant' },
|
|
226
|
+
mini: { value: 'mini', type: 'string', description: 'Compact small size variant' },
|
|
227
|
+
vivid: { value: 'vivid', type: 'string', description: 'Colorful multi-fill variant' },
|
|
228
|
+
'3d': { value: '3d', type: 'string', description: 'Extruded depth variant' },
|
|
229
|
+
},
|
|
230
|
+
};
|
|
231
|
+
}
|
|
232
|
+
return result;
|
|
233
|
+
}
|
|
234
|
+
/**
|
|
235
|
+
* Creates a Style Dictionary configuration for icon tokens.
|
|
236
|
+
*
|
|
237
|
+
* @param options - Configuration options
|
|
238
|
+
* @returns Style Dictionary config object
|
|
239
|
+
*/
|
|
240
|
+
function createStyleDictionaryConfig(options = {}) {
|
|
241
|
+
const { sourcePath = './tokens', outputPath = './dist/tokens', platforms = ['css', 'scss', 'js', 'json'], } = options;
|
|
242
|
+
const platformConfigs = {};
|
|
243
|
+
if (platforms.includes('css')) {
|
|
244
|
+
platformConfigs.css = {
|
|
245
|
+
transformGroup: 'css',
|
|
246
|
+
buildPath: `${outputPath}/css/`,
|
|
247
|
+
files: [
|
|
248
|
+
{
|
|
249
|
+
destination: 'icon-tokens.css',
|
|
250
|
+
format: 'css/variables',
|
|
251
|
+
filter: { attributes: { category: 'ntd' } },
|
|
252
|
+
},
|
|
253
|
+
],
|
|
254
|
+
};
|
|
255
|
+
}
|
|
256
|
+
if (platforms.includes('scss')) {
|
|
257
|
+
platformConfigs.scss = {
|
|
258
|
+
transformGroup: 'scss',
|
|
259
|
+
buildPath: `${outputPath}/scss/`,
|
|
260
|
+
files: [
|
|
261
|
+
{
|
|
262
|
+
destination: '_icon-tokens.scss',
|
|
263
|
+
format: 'scss/variables',
|
|
264
|
+
filter: { attributes: { category: 'ntd' } },
|
|
265
|
+
},
|
|
266
|
+
],
|
|
267
|
+
};
|
|
268
|
+
}
|
|
269
|
+
if (platforms.includes('js')) {
|
|
270
|
+
platformConfigs.js = {
|
|
271
|
+
transformGroup: 'js',
|
|
272
|
+
buildPath: `${outputPath}/js/`,
|
|
273
|
+
files: [
|
|
274
|
+
{
|
|
275
|
+
destination: 'icon-tokens.js',
|
|
276
|
+
format: 'javascript/module',
|
|
277
|
+
filter: { attributes: { category: 'ntd' } },
|
|
278
|
+
},
|
|
279
|
+
{
|
|
280
|
+
destination: 'icon-tokens.d.ts',
|
|
281
|
+
format: 'typescript/module-declarations',
|
|
282
|
+
filter: { attributes: { category: 'ntd' } },
|
|
283
|
+
},
|
|
284
|
+
],
|
|
285
|
+
};
|
|
286
|
+
}
|
|
287
|
+
if (platforms.includes('json')) {
|
|
288
|
+
platformConfigs.json = {
|
|
289
|
+
transformGroup: 'js',
|
|
290
|
+
buildPath: `${outputPath}/json/`,
|
|
291
|
+
files: [
|
|
292
|
+
{
|
|
293
|
+
destination: 'icon-tokens.json',
|
|
294
|
+
format: 'json/nested',
|
|
295
|
+
filter: { attributes: { category: 'ntd' } },
|
|
296
|
+
},
|
|
297
|
+
],
|
|
298
|
+
};
|
|
299
|
+
}
|
|
300
|
+
return {
|
|
301
|
+
source: [`${sourcePath}/**/*.json`],
|
|
302
|
+
platforms: platformConfigs,
|
|
303
|
+
};
|
|
304
|
+
}
|
|
305
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
306
|
+
CSS GENERATION
|
|
307
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
308
|
+
/**
|
|
309
|
+
* Generates CSS custom properties from icon tokens.
|
|
310
|
+
*
|
|
311
|
+
* @param tokens - Token group
|
|
312
|
+
* @param selector - CSS selector (default: ':root')
|
|
313
|
+
* @returns CSS string with custom properties
|
|
314
|
+
*/
|
|
315
|
+
function generateCSSVariables(tokens, selector = ':root') {
|
|
316
|
+
const variables = [];
|
|
317
|
+
function processTokens(obj, path = []) {
|
|
318
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
319
|
+
const newPath = [...path, key];
|
|
320
|
+
if (typeof value === 'object' && value !== null) {
|
|
321
|
+
if ('value' in value && typeof value.value !== 'object') {
|
|
322
|
+
// It's a token
|
|
323
|
+
const token = value;
|
|
324
|
+
const varName = `--${newPath.join('-')}`;
|
|
325
|
+
variables.push(` ${varName}: ${token.value};`);
|
|
326
|
+
}
|
|
327
|
+
else {
|
|
328
|
+
// It's a nested group
|
|
329
|
+
processTokens(value, newPath);
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
processTokens(tokens);
|
|
335
|
+
return `${selector} {\n${variables.join('\n')}\n}`;
|
|
336
|
+
}
|
|
337
|
+
/**
|
|
338
|
+
* Generates Tailwind CSS config from icon tokens.
|
|
339
|
+
*
|
|
340
|
+
* @param tokens - Token group
|
|
341
|
+
* @returns Tailwind config extend object
|
|
342
|
+
*/
|
|
343
|
+
function generateTailwindConfig(tokens) {
|
|
344
|
+
var _a;
|
|
345
|
+
const colors = {};
|
|
346
|
+
const spacing = {};
|
|
347
|
+
const strokeWidth = {};
|
|
348
|
+
function extractTokens(obj, type, prefix = '') {
|
|
349
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
350
|
+
if (typeof value === 'object' && value !== null && 'value' in value) {
|
|
351
|
+
const token = value;
|
|
352
|
+
const tokenKey = prefix ? `${prefix}-${key}` : key;
|
|
353
|
+
if (token.type === 'color') {
|
|
354
|
+
colors[tokenKey] = String(token.value);
|
|
355
|
+
}
|
|
356
|
+
else if (token.type === 'dimension') {
|
|
357
|
+
spacing[tokenKey] = String(token.value);
|
|
358
|
+
}
|
|
359
|
+
else if (type === 'stroke') {
|
|
360
|
+
strokeWidth[tokenKey] = String(token.value);
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
else if (typeof value === 'object' && value !== null) {
|
|
364
|
+
extractTokens(value, type, key);
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
}
|
|
368
|
+
// Navigate to the icon tokens
|
|
369
|
+
const iconTokens = (_a = tokens.ntd) === null || _a === void 0 ? void 0 : _a.icon;
|
|
370
|
+
if (iconTokens) {
|
|
371
|
+
if (iconTokens.color) {
|
|
372
|
+
extractTokens(iconTokens.color, 'color', 'icon');
|
|
373
|
+
}
|
|
374
|
+
if (iconTokens.size) {
|
|
375
|
+
extractTokens(iconTokens.size, 'size', 'icon');
|
|
376
|
+
}
|
|
377
|
+
if (iconTokens.stroke) {
|
|
378
|
+
extractTokens(iconTokens.stroke, 'stroke', 'icon');
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
return { colors, spacing, strokeWidth };
|
|
382
|
+
}
|
|
383
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
384
|
+
FIGMA TOKENS EXPORT
|
|
385
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
386
|
+
/**
|
|
387
|
+
* Converts icon tokens to Figma Tokens format.
|
|
388
|
+
* Compatible with the Figma Tokens plugin.
|
|
389
|
+
*
|
|
390
|
+
* @param tokens - Token group
|
|
391
|
+
* @returns Figma Tokens compatible object
|
|
392
|
+
*/
|
|
393
|
+
function toFigmaTokens(tokens) {
|
|
394
|
+
const figmaTokens = {};
|
|
395
|
+
function processTokens(obj, path = []) {
|
|
396
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
397
|
+
const newPath = [...path, key];
|
|
398
|
+
if (typeof value === 'object' && value !== null) {
|
|
399
|
+
if ('value' in value && typeof value.value !== 'object') {
|
|
400
|
+
const token = value;
|
|
401
|
+
let currentObj = figmaTokens;
|
|
402
|
+
for (let i = 0; i < newPath.length - 1; i++) {
|
|
403
|
+
const part = newPath[i];
|
|
404
|
+
if (!currentObj[part]) {
|
|
405
|
+
currentObj[part] = {};
|
|
406
|
+
}
|
|
407
|
+
currentObj = currentObj[part];
|
|
408
|
+
}
|
|
409
|
+
currentObj[newPath[newPath.length - 1]] = {
|
|
410
|
+
value: token.value,
|
|
411
|
+
type: mapToFigmaType(token.type),
|
|
412
|
+
};
|
|
413
|
+
}
|
|
414
|
+
else {
|
|
415
|
+
processTokens(value, newPath);
|
|
416
|
+
}
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
processTokens(tokens);
|
|
421
|
+
return figmaTokens;
|
|
422
|
+
}
|
|
423
|
+
function mapToFigmaType(type) {
|
|
424
|
+
var _a;
|
|
425
|
+
const typeMap = {
|
|
426
|
+
color: 'color',
|
|
427
|
+
dimension: 'sizing',
|
|
428
|
+
number: 'number',
|
|
429
|
+
duration: 'other',
|
|
430
|
+
cubicBezier: 'other',
|
|
431
|
+
string: 'other',
|
|
432
|
+
};
|
|
433
|
+
return (_a = typeMap[type !== null && type !== void 0 ? type : 'other']) !== null && _a !== void 0 ? _a : 'other';
|
|
434
|
+
}
|
|
435
|
+
/* ────────────────────────────────────────────────────────────────────────────
|
|
436
|
+
EXPORTS
|
|
437
|
+
───────────────────────────────────────────────────────────────────────────── */
|
|
438
|
+
var designTokens = {
|
|
439
|
+
generateIconTokens,
|
|
440
|
+
createStyleDictionaryConfig,
|
|
441
|
+
generateCSSVariables,
|
|
442
|
+
generateTailwindConfig,
|
|
443
|
+
toFigmaTokens,
|
|
444
|
+
DEFAULT_SIZE_TOKENS,
|
|
445
|
+
DEFAULT_COLOR_TOKENS,
|
|
446
|
+
DEFAULT_STROKE_TOKENS,
|
|
447
|
+
DEFAULT_ANIMATION_TOKENS,
|
|
448
|
+
};
|
|
449
|
+
|
|
450
|
+
exports.DEFAULT_ANIMATION_TOKENS = DEFAULT_ANIMATION_TOKENS;
|
|
451
|
+
exports.DEFAULT_COLOR_TOKENS = DEFAULT_COLOR_TOKENS;
|
|
452
|
+
exports.DEFAULT_SIZE_TOKENS = DEFAULT_SIZE_TOKENS;
|
|
453
|
+
exports.DEFAULT_STROKE_TOKENS = DEFAULT_STROKE_TOKENS;
|
|
454
|
+
exports.createStyleDictionaryConfig = createStyleDictionaryConfig;
|
|
455
|
+
exports.default = designTokens;
|
|
456
|
+
exports.generateCSSVariables = generateCSSVariables;
|
|
457
|
+
exports.generateIconTokens = generateIconTokens;
|
|
458
|
+
exports.generateTailwindConfig = generateTailwindConfig;
|
|
459
|
+
exports.toFigmaTokens = toFigmaTokens;
|
package/dist/cjs/figmaExport.js
CHANGED
|
@@ -296,4 +296,3 @@ exports.exportIconToDataUrl = exportIconToDataUrl;
|
|
|
296
296
|
exports.exportIconToFigmaNode = exportIconToFigmaNode;
|
|
297
297
|
exports.exportIconToSvgString = exportIconToSvgString;
|
|
298
298
|
exports.generateFigmaPluginManifest = generateFigmaPluginManifest;
|
|
299
|
-
//# sourceMappingURL=figmaExport.js.map
|
package/dist/cjs/figmaSync.js
CHANGED