@nice2dev/icons 1.3.15 → 1.3.16
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 +9 -0
- package/dist/cjs/NiceDesktopIconExporter.js +688 -599
- package/dist/cjs/NiceFaviconGenerator.js +603 -417
- package/dist/cjs/NiceIconPicker.js +788 -508
- package/dist/cjs/NiceIconPreview.js +246 -188
- package/dist/cjs/NiceIconSetCreator.js +683 -552
- package/dist/cjs/NiceIconStacker.js +547 -171
- package/dist/cjs/NiceIconValue.js +27 -35
- package/dist/cjs/NtdIconBadge.js +384 -360
- package/dist/cjs/NtdIconMorph.js +419 -354
- package/dist/cjs/NtdStateMorph.js +150 -147
- package/dist/cjs/advancedIconSearch.js +373 -510
- package/dist/cjs/animationControls.js +518 -642
- package/dist/cjs/client.js +12 -15
- package/dist/cjs/createIcon.js +349 -251
- package/dist/cjs/design-tokens.js +324 -390
- package/dist/cjs/figmaExport.js +162 -257
- package/dist/cjs/figmaSync.js +234 -316
- package/dist/cjs/headless-ui.js +240 -368
- package/dist/cjs/iconAnalytics.js +337 -393
- package/dist/cjs/iconHtml.js +64 -86
- package/dist/cjs/iconMetadata.js +392 -472
- package/dist/cjs/iconParts.js +120 -90
- package/dist/cjs/iconStack.js +136 -155
- package/dist/cjs/iconStyles.js +1609 -504
- package/dist/cjs/iconValue.js +359 -430
- package/dist/cjs/icons/accessibility.js +1119 -134
- package/dist/cjs/icons/actions.js +1290 -330
- package/dist/cjs/icons/ai.js +1424 -144
- package/dist/cjs/icons/brand.js +1344 -172
- package/dist/cjs/icons/business.js +903 -193
- package/dist/cjs/icons/devtech.js +1656 -227
- package/dist/cjs/icons/ecommerce.js +802 -111
- package/dist/cjs/icons/education.js +1345 -199
- package/dist/cjs/icons/files.js +1597 -328
- package/dist/cjs/icons/fintech.js +793 -104
- package/dist/cjs/icons/food.js +1507 -153
- package/dist/cjs/icons/fun.js +786 -109
- package/dist/cjs/icons/gaming.js +916 -170
- package/dist/cjs/icons/health.js +623 -112
- package/dist/cjs/icons/index.js +32 -35
- package/dist/cjs/icons/input.js +282 -83
- package/dist/cjs/icons/legal.js +1065 -122
- package/dist/cjs/icons/media.js +1061 -267
- package/dist/cjs/icons/navigation.js +387 -122
- package/dist/cjs/icons/omniverk.js +747 -90
- package/dist/cjs/icons/realestate.js +1520 -193
- package/dist/cjs/icons/saas.js +867 -98
- package/dist/cjs/icons/science.js +1451 -202
- package/dist/cjs/icons/shapes.js +1316 -308
- package/dist/cjs/icons/smarthome.js +786 -90
- package/dist/cjs/icons/social.js +591 -59
- package/dist/cjs/icons/sports.js +1225 -133
- package/dist/cjs/icons/sustainability.js +1211 -139
- package/dist/cjs/icons/travel.js +1470 -148
- package/dist/cjs/icons/ui.js +1508 -315
- package/dist/cjs/icons/weather.js +1160 -173
- package/dist/cjs/index.js +566 -568
- package/dist/cjs/lottieIntegration.js +261 -266
- package/dist/cjs/nicetodev-icons.css +1 -1
- package/dist/cjs/particleEffects.js +270 -251
- package/dist/cjs/resolver.js +229 -284
- package/dist/cjs/rsc.js +175 -193
- package/dist/cjs/sharpen.js +73 -130
- package/dist/cjs/smilAnimations.js +371 -165
- package/dist/cjs/stacking.js +87 -122
- package/dist/cjs/tailwind-plugin.js +280 -320
- package/dist/cjs/types.js +46 -72
- package/dist/cjs/utilities.js +163 -324
- package/dist/cjs/variantProps.js +12 -52
- package/dist/esm/NiceDesktopIconExporter.js +671 -598
- package/dist/esm/NiceFaviconGenerator.js +583 -416
- package/dist/esm/NiceIconPicker.js +789 -507
- package/dist/esm/NiceIconPreview.js +247 -187
- package/dist/esm/NiceIconSetCreator.js +685 -551
- package/dist/esm/NiceIconStacker.js +549 -170
- package/dist/esm/NiceIconValue.js +29 -34
- package/dist/esm/NtdIconBadge.js +388 -359
- package/dist/esm/NtdIconMorph.js +423 -353
- package/dist/esm/NtdStateMorph.js +152 -146
- package/dist/esm/advancedIconSearch.js +391 -509
- package/dist/esm/animationControls.js +527 -641
- package/dist/esm/client.js +48 -10
- package/dist/esm/createIcon.js +350 -250
- package/dist/esm/design-tokens.js +334 -387
- package/dist/esm/figmaExport.js +170 -256
- package/dist/esm/figmaSync.js +237 -315
- package/dist/esm/headless-ui.js +254 -365
- package/dist/esm/iconAnalytics.js +342 -392
- package/dist/esm/iconHtml.js +67 -85
- package/dist/esm/iconMetadata.js +404 -471
- package/dist/esm/iconParts.js +125 -89
- package/dist/esm/iconStack.js +145 -154
- package/dist/esm/iconStyles.js +1620 -503
- package/dist/esm/iconValue.js +361 -429
- package/dist/esm/icons/accessibility.js +1133 -133
- package/dist/esm/icons/actions.js +1320 -329
- package/dist/esm/icons/ai.js +1441 -143
- package/dist/esm/icons/brand.js +1351 -171
- package/dist/esm/icons/business.js +931 -201
- package/dist/esm/icons/devtech.js +1687 -226
- package/dist/esm/icons/ecommerce.js +816 -110
- package/dist/esm/icons/education.js +1364 -198
- package/dist/esm/icons/files.js +1628 -327
- package/dist/esm/icons/fintech.js +807 -103
- package/dist/esm/icons/food.js +1524 -152
- package/dist/esm/icons/fun.js +801 -108
- package/dist/esm/icons/gaming.js +933 -169
- package/dist/esm/icons/health.js +636 -111
- package/dist/esm/icons/index.js +596 -32
- package/dist/esm/icons/input.js +326 -82
- package/dist/esm/icons/legal.js +1079 -121
- package/dist/esm/icons/media.js +1086 -266
- package/dist/esm/icons/navigation.js +401 -121
- package/dist/esm/icons/omniverk.js +759 -89
- package/dist/esm/icons/realestate.js +1544 -198
- package/dist/esm/icons/saas.js +880 -97
- package/dist/esm/icons/science.js +1477 -208
- package/dist/esm/icons/shapes.js +1343 -307
- package/dist/esm/icons/smarthome.js +799 -89
- package/dist/esm/icons/social.js +599 -58
- package/dist/esm/icons/sports.js +1240 -132
- package/dist/esm/icons/sustainability.js +1226 -138
- package/dist/esm/icons/travel.js +1486 -147
- package/dist/esm/icons/ui.js +1540 -314
- package/dist/esm/icons/weather.js +1181 -172
- package/dist/esm/index.js +756 -58
- package/dist/esm/lottieIntegration.js +264 -265
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/particleEffects.js +271 -250
- package/dist/esm/resolver.js +231 -283
- package/dist/esm/rsc.js +182 -192
- package/dist/esm/sharpen.js +78 -129
- package/dist/esm/smilAnimations.js +376 -164
- package/dist/esm/stacking.js +99 -121
- package/dist/esm/tailwind-plugin.js +282 -319
- package/dist/esm/types.js +50 -71
- package/dist/esm/utilities.js +177 -321
- package/dist/esm/variantProps.js +23 -52
- package/package.json +15 -22
|
@@ -28,421 +28,368 @@
|
|
|
28
28
|
*
|
|
29
29
|
* audit-allow: i18n-file — token descriptions written into Style Dictionary output, not UI copy.
|
|
30
30
|
*/
|
|
31
|
-
/* ────────────────────────────────────────────────────────────────────────────
|
|
32
|
-
DEFAULT TOKEN VALUES
|
|
33
|
-
───────────────────────────────────────────────────────────────────────────── */
|
|
34
|
-
/**
|
|
35
|
-
* Default icon size tokens
|
|
36
|
-
*/
|
|
37
31
|
const DEFAULT_SIZE_TOKENS = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
32
|
+
xs: "0.75rem",
|
|
33
|
+
// 12px
|
|
34
|
+
sm: "1rem",
|
|
35
|
+
// 16px
|
|
36
|
+
md: "1.5rem",
|
|
37
|
+
// 24px
|
|
38
|
+
lg: "2rem",
|
|
39
|
+
// 32px
|
|
40
|
+
xl: "3rem",
|
|
41
|
+
// 48px
|
|
42
|
+
"2xl": "4rem"
|
|
43
|
+
// 64px
|
|
44
44
|
};
|
|
45
|
-
/**
|
|
46
|
-
* Default icon color tokens
|
|
47
|
-
*/
|
|
48
45
|
const DEFAULT_COLOR_TOKENS = {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
46
|
+
primary: "#3b82f6",
|
|
47
|
+
// Blue 500
|
|
48
|
+
secondary: "#64748b",
|
|
49
|
+
// Slate 500
|
|
50
|
+
accent: "#8b5cf6",
|
|
51
|
+
// Violet 500
|
|
52
|
+
success: "#22c55e",
|
|
53
|
+
// Green 500
|
|
54
|
+
warning: "#f59e0b",
|
|
55
|
+
// Amber 500
|
|
56
|
+
error: "#ef4444",
|
|
57
|
+
// Red 500
|
|
58
|
+
info: "#06b6d4",
|
|
59
|
+
// Cyan 500
|
|
60
|
+
muted: "#9ca3af"
|
|
61
|
+
// Gray 400
|
|
57
62
|
};
|
|
58
|
-
/**
|
|
59
|
-
* Default stroke width tokens
|
|
60
|
-
*/
|
|
61
63
|
const DEFAULT_STROKE_TOKENS = {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
thin: "1",
|
|
65
|
+
normal: "1.5",
|
|
66
|
+
medium: "2",
|
|
67
|
+
thick: "2.5",
|
|
68
|
+
bold: "3"
|
|
67
69
|
};
|
|
68
|
-
/**
|
|
69
|
-
* Default animation tokens
|
|
70
|
-
*/
|
|
71
70
|
const DEFAULT_ANIMATION_TOKENS = {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
71
|
+
duration: {
|
|
72
|
+
instant: "0ms",
|
|
73
|
+
fast: "150ms",
|
|
74
|
+
normal: "300ms",
|
|
75
|
+
slow: "500ms",
|
|
76
|
+
slower: "1000ms"
|
|
77
|
+
},
|
|
78
|
+
easing: {
|
|
79
|
+
linear: "linear",
|
|
80
|
+
easeIn: "cubic-bezier(0.4, 0, 1, 1)",
|
|
81
|
+
easeOut: "cubic-bezier(0, 0, 0.2, 1)",
|
|
82
|
+
easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
83
|
+
spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
84
|
+
}
|
|
86
85
|
};
|
|
87
|
-
/* ────────────────────────────────────────────────────────────────────────────
|
|
88
|
-
TOKEN GENERATION
|
|
89
|
-
───────────────────────────────────────────────────────────────────────────── */
|
|
90
|
-
/**
|
|
91
|
-
* Generates Style Dictionary compatible design tokens for icons.
|
|
92
|
-
*
|
|
93
|
-
* @param config - Token configuration
|
|
94
|
-
* @returns Token group object ready for Style Dictionary
|
|
95
|
-
*
|
|
96
|
-
* @example
|
|
97
|
-
* ```ts
|
|
98
|
-
* const tokens = generateIconTokens({
|
|
99
|
-
* prefix: 'ntd',
|
|
100
|
-
* colorTokens: {
|
|
101
|
-
* primary: '{color.brand.500}',
|
|
102
|
-
* },
|
|
103
|
-
* });
|
|
104
|
-
*
|
|
105
|
-
* // Output:
|
|
106
|
-
* // {
|
|
107
|
-
* // ntd: {
|
|
108
|
-
* // icon: {
|
|
109
|
-
* // size: { md: { value: '1.5rem', type: 'dimension' } },
|
|
110
|
-
* // color: { primary: { value: '{color.brand.500}', type: 'color' } },
|
|
111
|
-
* // }
|
|
112
|
-
* // }
|
|
113
|
-
* // }
|
|
114
|
-
* ```
|
|
115
|
-
*/
|
|
116
86
|
function generateIconTokens(config = {}) {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
87
|
+
const {
|
|
88
|
+
prefix = "ntd",
|
|
89
|
+
namespace = "icon",
|
|
90
|
+
colorTokens = {},
|
|
91
|
+
sizeTokens = {},
|
|
92
|
+
strokeTokens = {},
|
|
93
|
+
includeAnimations = true,
|
|
94
|
+
includeVariants = true
|
|
95
|
+
} = config;
|
|
96
|
+
const mergedColors = { ...DEFAULT_COLOR_TOKENS, ...colorTokens };
|
|
97
|
+
const mergedSizes = { ...DEFAULT_SIZE_TOKENS, ...sizeTokens };
|
|
98
|
+
const mergedStrokes = { ...DEFAULT_STROKE_TOKENS, ...strokeTokens };
|
|
99
|
+
const result = {
|
|
100
|
+
[prefix]: {
|
|
101
|
+
[namespace]: {
|
|
102
|
+
// Size tokens
|
|
103
|
+
size: Object.entries(mergedSizes).reduce((acc, [key, value]) => {
|
|
104
|
+
acc[key] = {
|
|
105
|
+
value: typeof value === "number" ? `${value}px` : value,
|
|
106
|
+
type: "dimension",
|
|
107
|
+
description: `Icon size: ${key}`,
|
|
108
|
+
$extensions: {
|
|
109
|
+
"org.nice2dev.icons": {
|
|
110
|
+
cssVariable: `--${prefix}-${namespace}-size-${key}`,
|
|
111
|
+
tailwindClass: `${prefix}-${namespace}-${key}`
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
return acc;
|
|
116
|
+
}, {}),
|
|
117
|
+
// Color tokens
|
|
118
|
+
color: Object.entries(mergedColors).reduce((acc, [key, value]) => {
|
|
119
|
+
acc[key] = {
|
|
120
|
+
value,
|
|
121
|
+
type: "color",
|
|
122
|
+
description: `Icon color: ${key}`,
|
|
123
|
+
$extensions: {
|
|
124
|
+
"org.nice2dev.icons": {
|
|
125
|
+
cssVariable: `--${prefix}-${namespace}-color-${key}`,
|
|
126
|
+
tailwindClass: `${prefix}-${namespace}-${key}`
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
return acc;
|
|
131
|
+
}, {}),
|
|
132
|
+
// Stroke tokens
|
|
133
|
+
stroke: Object.entries(mergedStrokes).reduce((acc, [key, value]) => {
|
|
134
|
+
acc[key] = {
|
|
135
|
+
value: String(value),
|
|
136
|
+
type: "number",
|
|
137
|
+
description: `Icon stroke width: ${key}`,
|
|
138
|
+
$extensions: {
|
|
139
|
+
"org.nice2dev.icons": {
|
|
140
|
+
cssVariable: `--${prefix}-${namespace}-stroke-${key}`,
|
|
141
|
+
tailwindClass: `${prefix}-${namespace}-stroke-${key}`
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
return acc;
|
|
146
|
+
}, {}),
|
|
147
|
+
// Secondary opacity
|
|
148
|
+
opacity: {
|
|
149
|
+
secondary: {
|
|
150
|
+
value: "0.35",
|
|
151
|
+
type: "number",
|
|
152
|
+
description: "Secondary color opacity for duotone variant"
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
if (includeAnimations) {
|
|
159
|
+
result[prefix][namespace] = {
|
|
160
|
+
...result[prefix][namespace],
|
|
161
|
+
animation: {
|
|
162
|
+
duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
|
|
163
|
+
acc[key] = {
|
|
164
|
+
value,
|
|
165
|
+
type: "duration",
|
|
166
|
+
description: `Animation duration: ${key}`
|
|
167
|
+
};
|
|
168
|
+
return acc;
|
|
169
|
+
}, {}),
|
|
170
|
+
easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
|
|
171
|
+
acc[key] = {
|
|
172
|
+
value,
|
|
173
|
+
type: "cubicBezier",
|
|
174
|
+
description: `Animation easing: ${key}`
|
|
175
|
+
};
|
|
176
|
+
return acc;
|
|
177
|
+
}, {})
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
if (includeVariants) {
|
|
182
|
+
result[prefix][namespace] = {
|
|
183
|
+
...result[prefix][namespace],
|
|
184
|
+
variant: {
|
|
185
|
+
solid: { value: "solid", type: "string", description: "Filled icon variant" },
|
|
186
|
+
outline: { value: "outline", type: "string", description: "Outlined icon variant" },
|
|
187
|
+
wireframe: {
|
|
188
|
+
value: "wireframe",
|
|
189
|
+
type: "string",
|
|
190
|
+
description: "Thin construction-line variant"
|
|
191
|
+
},
|
|
192
|
+
duotone: { value: "duotone", type: "string", description: "Two-tone icon variant" },
|
|
193
|
+
cutout: {
|
|
194
|
+
value: "cutout",
|
|
195
|
+
type: "string",
|
|
196
|
+
description: "Knockout/cutout background variant"
|
|
178
197
|
},
|
|
198
|
+
sharp: { value: "sharp", type: "string", description: "Sharp corners variant" },
|
|
199
|
+
rounded: { value: "rounded", type: "string", description: "Rounded corners variant" },
|
|
200
|
+
mini: { value: "mini", type: "string", description: "Compact small size variant" },
|
|
201
|
+
vivid: { value: "vivid", type: "string", description: "Colorful multi-fill variant" },
|
|
202
|
+
"3d": { value: "3d", type: "string", description: "Extruded depth variant" }
|
|
203
|
+
}
|
|
179
204
|
};
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
result[prefix][namespace] = {
|
|
183
|
-
...result[prefix][namespace],
|
|
184
|
-
animation: {
|
|
185
|
-
duration: Object.entries(DEFAULT_ANIMATION_TOKENS.duration).reduce((acc, [key, value]) => {
|
|
186
|
-
acc[key] = {
|
|
187
|
-
value,
|
|
188
|
-
type: 'duration',
|
|
189
|
-
description: `Animation duration: ${key}`,
|
|
190
|
-
};
|
|
191
|
-
return acc;
|
|
192
|
-
}, {}),
|
|
193
|
-
easing: Object.entries(DEFAULT_ANIMATION_TOKENS.easing).reduce((acc, [key, value]) => {
|
|
194
|
-
acc[key] = {
|
|
195
|
-
value,
|
|
196
|
-
type: 'cubicBezier',
|
|
197
|
-
description: `Animation easing: ${key}`,
|
|
198
|
-
};
|
|
199
|
-
return acc;
|
|
200
|
-
}, {}),
|
|
201
|
-
},
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
// Add variant tokens
|
|
205
|
-
if (includeVariants) {
|
|
206
|
-
result[prefix][namespace] = {
|
|
207
|
-
...result[prefix][namespace],
|
|
208
|
-
variant: {
|
|
209
|
-
solid: { value: 'solid', type: 'string', description: 'Filled icon variant' },
|
|
210
|
-
outline: { value: 'outline', type: 'string', description: 'Outlined icon variant' },
|
|
211
|
-
wireframe: {
|
|
212
|
-
value: 'wireframe',
|
|
213
|
-
type: 'string',
|
|
214
|
-
description: 'Thin construction-line variant',
|
|
215
|
-
},
|
|
216
|
-
duotone: { value: 'duotone', type: 'string', description: 'Two-tone icon variant' },
|
|
217
|
-
cutout: {
|
|
218
|
-
value: 'cutout',
|
|
219
|
-
type: 'string',
|
|
220
|
-
description: 'Knockout/cutout background variant',
|
|
221
|
-
},
|
|
222
|
-
sharp: { value: 'sharp', type: 'string', description: 'Sharp corners variant' },
|
|
223
|
-
rounded: { value: 'rounded', type: 'string', description: 'Rounded corners variant' },
|
|
224
|
-
mini: { value: 'mini', type: 'string', description: 'Compact small size variant' },
|
|
225
|
-
vivid: { value: 'vivid', type: 'string', description: 'Colorful multi-fill variant' },
|
|
226
|
-
'3d': { value: '3d', type: 'string', description: 'Extruded depth variant' },
|
|
227
|
-
},
|
|
228
|
-
};
|
|
229
|
-
}
|
|
230
|
-
return result;
|
|
205
|
+
}
|
|
206
|
+
return result;
|
|
231
207
|
}
|
|
232
|
-
/**
|
|
233
|
-
* Creates a Style Dictionary configuration for icon tokens.
|
|
234
|
-
*
|
|
235
|
-
* @param options - Configuration options
|
|
236
|
-
* @returns Style Dictionary config object
|
|
237
|
-
*/
|
|
238
208
|
function createStyleDictionaryConfig(options = {}) {
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
transformGroup: 'js',
|
|
270
|
-
buildPath: `${outputPath}/js/`,
|
|
271
|
-
files: [
|
|
272
|
-
{
|
|
273
|
-
destination: 'icon-tokens.js',
|
|
274
|
-
format: 'javascript/module',
|
|
275
|
-
filter: { attributes: { category: 'ntd' } },
|
|
276
|
-
},
|
|
277
|
-
{
|
|
278
|
-
destination: 'icon-tokens.d.ts',
|
|
279
|
-
format: 'typescript/module-declarations',
|
|
280
|
-
filter: { attributes: { category: 'ntd' } },
|
|
281
|
-
},
|
|
282
|
-
],
|
|
283
|
-
};
|
|
284
|
-
}
|
|
285
|
-
if (platforms.includes('json')) {
|
|
286
|
-
platformConfigs.json = {
|
|
287
|
-
transformGroup: 'js',
|
|
288
|
-
buildPath: `${outputPath}/json/`,
|
|
289
|
-
files: [
|
|
290
|
-
{
|
|
291
|
-
destination: 'icon-tokens.json',
|
|
292
|
-
format: 'json/nested',
|
|
293
|
-
filter: { attributes: { category: 'ntd' } },
|
|
294
|
-
},
|
|
295
|
-
],
|
|
296
|
-
};
|
|
297
|
-
}
|
|
298
|
-
return {
|
|
299
|
-
source: [`${sourcePath}/**/*.json`],
|
|
300
|
-
platforms: platformConfigs,
|
|
209
|
+
const {
|
|
210
|
+
sourcePath = "./tokens",
|
|
211
|
+
outputPath = "./dist/tokens",
|
|
212
|
+
platforms = ["css", "scss", "js", "json"]
|
|
213
|
+
} = options;
|
|
214
|
+
const platformConfigs = {};
|
|
215
|
+
if (platforms.includes("css")) {
|
|
216
|
+
platformConfigs.css = {
|
|
217
|
+
transformGroup: "css",
|
|
218
|
+
buildPath: `${outputPath}/css/`,
|
|
219
|
+
files: [
|
|
220
|
+
{
|
|
221
|
+
destination: "icon-tokens.css",
|
|
222
|
+
format: "css/variables",
|
|
223
|
+
filter: { attributes: { category: "ntd" } }
|
|
224
|
+
}
|
|
225
|
+
]
|
|
226
|
+
};
|
|
227
|
+
}
|
|
228
|
+
if (platforms.includes("scss")) {
|
|
229
|
+
platformConfigs.scss = {
|
|
230
|
+
transformGroup: "scss",
|
|
231
|
+
buildPath: `${outputPath}/scss/`,
|
|
232
|
+
files: [
|
|
233
|
+
{
|
|
234
|
+
destination: "_icon-tokens.scss",
|
|
235
|
+
format: "scss/variables",
|
|
236
|
+
filter: { attributes: { category: "ntd" } }
|
|
237
|
+
}
|
|
238
|
+
]
|
|
301
239
|
};
|
|
240
|
+
}
|
|
241
|
+
if (platforms.includes("js")) {
|
|
242
|
+
platformConfigs.js = {
|
|
243
|
+
transformGroup: "js",
|
|
244
|
+
buildPath: `${outputPath}/js/`,
|
|
245
|
+
files: [
|
|
246
|
+
{
|
|
247
|
+
destination: "icon-tokens.js",
|
|
248
|
+
format: "javascript/module",
|
|
249
|
+
filter: { attributes: { category: "ntd" } }
|
|
250
|
+
},
|
|
251
|
+
{
|
|
252
|
+
destination: "icon-tokens.d.ts",
|
|
253
|
+
format: "typescript/module-declarations",
|
|
254
|
+
filter: { attributes: { category: "ntd" } }
|
|
255
|
+
}
|
|
256
|
+
]
|
|
257
|
+
};
|
|
258
|
+
}
|
|
259
|
+
if (platforms.includes("json")) {
|
|
260
|
+
platformConfigs.json = {
|
|
261
|
+
transformGroup: "js",
|
|
262
|
+
buildPath: `${outputPath}/json/`,
|
|
263
|
+
files: [
|
|
264
|
+
{
|
|
265
|
+
destination: "icon-tokens.json",
|
|
266
|
+
format: "json/nested",
|
|
267
|
+
filter: { attributes: { category: "ntd" } }
|
|
268
|
+
}
|
|
269
|
+
]
|
|
270
|
+
};
|
|
271
|
+
}
|
|
272
|
+
return {
|
|
273
|
+
source: [`${sourcePath}/**/*.json`],
|
|
274
|
+
platforms: platformConfigs
|
|
275
|
+
};
|
|
302
276
|
}
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
function processTokens(obj, path = []) {
|
|
316
|
-
for (const [key, value] of Object.entries(obj)) {
|
|
317
|
-
const newPath = [...path, key];
|
|
318
|
-
if (typeof value === 'object' && value !== null) {
|
|
319
|
-
if ('value' in value && typeof value.value !== 'object') {
|
|
320
|
-
// It's a token
|
|
321
|
-
const token = value;
|
|
322
|
-
const varName = `--${newPath.join('-')}`;
|
|
323
|
-
variables.push(` ${varName}: ${token.value};`);
|
|
324
|
-
}
|
|
325
|
-
else {
|
|
326
|
-
// It's a nested group
|
|
327
|
-
processTokens(value, newPath);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
277
|
+
function generateCSSVariables(tokens, selector = ":root") {
|
|
278
|
+
const variables = [];
|
|
279
|
+
function processTokens(obj, path = []) {
|
|
280
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
281
|
+
const newPath = [...path, key];
|
|
282
|
+
if (typeof value === "object" && value !== null) {
|
|
283
|
+
if ("value" in value && typeof value.value !== "object") {
|
|
284
|
+
const token = value;
|
|
285
|
+
const varName = `--${newPath.join("-")}`;
|
|
286
|
+
variables.push(` ${varName}: ${token.value};`);
|
|
287
|
+
} else {
|
|
288
|
+
processTokens(value, newPath);
|
|
330
289
|
}
|
|
290
|
+
}
|
|
331
291
|
}
|
|
332
|
-
|
|
333
|
-
|
|
292
|
+
}
|
|
293
|
+
processTokens(tokens);
|
|
294
|
+
return `${selector} {
|
|
295
|
+
${variables.join("\n")}
|
|
296
|
+
}`;
|
|
334
297
|
}
|
|
335
|
-
/**
|
|
336
|
-
* Generates Tailwind CSS config from icon tokens.
|
|
337
|
-
*
|
|
338
|
-
* @param tokens - Token group
|
|
339
|
-
* @returns Tailwind config extend object
|
|
340
|
-
*/
|
|
341
298
|
function generateTailwindConfig(tokens) {
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
}
|
|
357
|
-
else if (type === 'stroke') {
|
|
358
|
-
strokeWidth[tokenKey] = String(token.value);
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
else if (typeof value === 'object' && value !== null) {
|
|
362
|
-
extractTokens(value, type, key);
|
|
363
|
-
}
|
|
299
|
+
const colors = {};
|
|
300
|
+
const spacing = {};
|
|
301
|
+
const strokeWidth = {};
|
|
302
|
+
function extractTokens(obj, type, prefix = "") {
|
|
303
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
304
|
+
if (typeof value === "object" && value !== null && "value" in value) {
|
|
305
|
+
const token = value;
|
|
306
|
+
const tokenKey = prefix ? `${prefix}-${key}` : key;
|
|
307
|
+
if (token.type === "color") {
|
|
308
|
+
colors[tokenKey] = String(token.value);
|
|
309
|
+
} else if (token.type === "dimension") {
|
|
310
|
+
spacing[tokenKey] = String(token.value);
|
|
311
|
+
} else if (type === "stroke") {
|
|
312
|
+
strokeWidth[tokenKey] = String(token.value);
|
|
364
313
|
}
|
|
314
|
+
} else if (typeof value === "object" && value !== null) {
|
|
315
|
+
extractTokens(value, type, key);
|
|
316
|
+
}
|
|
365
317
|
}
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
}
|
|
375
|
-
if (iconTokens.stroke) {
|
|
376
|
-
extractTokens(iconTokens.stroke, 'stroke', 'icon');
|
|
377
|
-
}
|
|
318
|
+
}
|
|
319
|
+
const iconTokens = tokens.ntd?.icon;
|
|
320
|
+
if (iconTokens) {
|
|
321
|
+
if (iconTokens.color) {
|
|
322
|
+
extractTokens(iconTokens.color, "color", "icon");
|
|
323
|
+
}
|
|
324
|
+
if (iconTokens.size) {
|
|
325
|
+
extractTokens(iconTokens.size, "size", "icon");
|
|
378
326
|
}
|
|
379
|
-
|
|
327
|
+
if (iconTokens.stroke) {
|
|
328
|
+
extractTokens(iconTokens.stroke, "stroke", "icon");
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
return { colors, spacing, strokeWidth };
|
|
380
332
|
}
|
|
381
|
-
/* ────────────────────────────────────────────────────────────────────────────
|
|
382
|
-
FIGMA TOKENS EXPORT
|
|
383
|
-
───────────────────────────────────────────────────────────────────────────── */
|
|
384
|
-
/**
|
|
385
|
-
* Converts icon tokens to Figma Tokens format.
|
|
386
|
-
* Compatible with the Figma Tokens plugin.
|
|
387
|
-
*
|
|
388
|
-
* @param tokens - Token group
|
|
389
|
-
* @returns Figma Tokens compatible object
|
|
390
|
-
*/
|
|
391
333
|
function toFigmaTokens(tokens) {
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
}
|
|
405
|
-
currentObj = currentObj[part];
|
|
406
|
-
}
|
|
407
|
-
currentObj[newPath[newPath.length - 1]] = {
|
|
408
|
-
value: token.value,
|
|
409
|
-
type: mapToFigmaType(token.type),
|
|
410
|
-
};
|
|
411
|
-
}
|
|
412
|
-
else {
|
|
413
|
-
processTokens(value, newPath);
|
|
414
|
-
}
|
|
334
|
+
const figmaTokens = {};
|
|
335
|
+
function processTokens(obj, path = []) {
|
|
336
|
+
for (const [key, value] of Object.entries(obj)) {
|
|
337
|
+
const newPath = [...path, key];
|
|
338
|
+
if (typeof value === "object" && value !== null) {
|
|
339
|
+
if ("value" in value && typeof value.value !== "object") {
|
|
340
|
+
const token = value;
|
|
341
|
+
let currentObj = figmaTokens;
|
|
342
|
+
for (let i = 0; i < newPath.length - 1; i++) {
|
|
343
|
+
const part = newPath[i];
|
|
344
|
+
if (!currentObj[part]) {
|
|
345
|
+
currentObj[part] = {};
|
|
415
346
|
}
|
|
347
|
+
currentObj = currentObj[part];
|
|
348
|
+
}
|
|
349
|
+
currentObj[newPath[newPath.length - 1]] = {
|
|
350
|
+
value: token.value,
|
|
351
|
+
type: mapToFigmaType(token.type)
|
|
352
|
+
};
|
|
353
|
+
} else {
|
|
354
|
+
processTokens(value, newPath);
|
|
416
355
|
}
|
|
356
|
+
}
|
|
417
357
|
}
|
|
418
|
-
|
|
419
|
-
|
|
358
|
+
}
|
|
359
|
+
processTokens(tokens);
|
|
360
|
+
return figmaTokens;
|
|
420
361
|
}
|
|
421
362
|
function mapToFigmaType(type) {
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
return (_a = typeMap[type !== null && type !== void 0 ? type : 'other']) !== null && _a !== void 0 ? _a : 'other';
|
|
363
|
+
const typeMap = {
|
|
364
|
+
color: "color",
|
|
365
|
+
dimension: "sizing",
|
|
366
|
+
number: "number",
|
|
367
|
+
duration: "other",
|
|
368
|
+
cubicBezier: "other",
|
|
369
|
+
string: "other"
|
|
370
|
+
};
|
|
371
|
+
return typeMap[type ?? "other"] ?? "other";
|
|
432
372
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
373
|
+
const designTokens = {
|
|
374
|
+
generateIconTokens,
|
|
375
|
+
createStyleDictionaryConfig,
|
|
376
|
+
generateCSSVariables,
|
|
377
|
+
generateTailwindConfig,
|
|
378
|
+
toFigmaTokens,
|
|
379
|
+
DEFAULT_SIZE_TOKENS,
|
|
380
|
+
DEFAULT_COLOR_TOKENS,
|
|
381
|
+
DEFAULT_STROKE_TOKENS,
|
|
382
|
+
DEFAULT_ANIMATION_TOKENS
|
|
383
|
+
};
|
|
384
|
+
export {
|
|
385
|
+
DEFAULT_ANIMATION_TOKENS,
|
|
386
|
+
DEFAULT_COLOR_TOKENS,
|
|
387
|
+
DEFAULT_SIZE_TOKENS,
|
|
388
|
+
DEFAULT_STROKE_TOKENS,
|
|
389
|
+
createStyleDictionaryConfig,
|
|
390
|
+
designTokens as default,
|
|
391
|
+
generateCSSVariables,
|
|
392
|
+
generateIconTokens,
|
|
393
|
+
generateTailwindConfig,
|
|
394
|
+
toFigmaTokens
|
|
446
395
|
};
|
|
447
|
-
|
|
448
|
-
export { DEFAULT_ANIMATION_TOKENS, DEFAULT_COLOR_TOKENS, DEFAULT_SIZE_TOKENS, DEFAULT_STROKE_TOKENS, createStyleDictionaryConfig, designTokens as default, generateCSSVariables, generateIconTokens, generateTailwindConfig, toFigmaTokens };
|