@n8n/design-system 2.24.2 → 2.26.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@n8n/design-system",
-  "version": "2.24.2",
+  "version": "2.26.0",
   "main": "src/index.ts",
   "import": "src/index.ts",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/index.ts

@@ -7,6 +7,8 @@ export * from './types';
 export * from './utils';
 export * from './directives';
 export type { IconOrEmoji } from './components/N8nIconPicker/types';
+export { IconBodyLoaderKey, useInjectIconBodyLoader } from './composables/useIconBodyLoader';
+export type { IconBodyLoader } from './composables/useIconBodyLoader';
 export { default as N8nSelect2 } from './v2/components/Select/Select.vue';
 export { default as N8nSelect2Item } from './v2/components/Select/SelectItem.vue';
 export type * from './v2/components/Select/Select.types';

package/vite.config.mts

@@ -4,6 +4,7 @@ import { defineConfig, mergeConfig } from 'vite';
 import icons from 'unplugin-icons/vite';
 import { vitestConfig } from '@n8n/vitest-config/frontend';
 import svgLoader from 'vite-svg-loader';
+import { lucideIconsPlugin } from './src/icons/lucide/vite';
 
 const packagesDir = resolve(__dirname, '..', '..', '..');
 
@@ -11,6 +12,7 @@ export default mergeConfig(
 	defineConfig({
 		plugins: [
 			vue(),
+			lucideIconsPlugin(),
 			svgLoader({
 				svgoConfig: {
 					plugins: [

package/.turbo/turbo-build.log

@@ -1,112 +0,0 @@
-
-> @n8n/design-system@2.24.2 build /home/runner/work/n8n/n8n/packages/frontend/@n8n/design-system
-> vite build
-
-vite v8.0.2 building client environment for production...
-
-rendering chunks...
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-511 |   */
-512 |  /** @deprecated Use a semantic variant instead of success color */
-513 |  :global(.n8n-button--success) {
-    |          ^
-514 |    --button--color--background: var(--color--success);
-515 |    --button--color--background-hover: var(--color--success--shade-1);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-520 |    --button--shadow--active: 0 0 0 1px var(--color--success--shade-1);
-521 |  }
-522 |  :global(.n8n-button--success):disabled, :global(.n8n-button--success)[aria-disabled=true] {
-    |          ^
-523 |    --button--color--background: var(--color--success--tint-3);
-524 |    --button--shadow: 0 0 0 1px var(--color--success--tint-3);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-520 |    --button--shadow--active: 0 0 0 1px var(--color--success--shade-1);
-521 |  }
-522 |  :global(.n8n-button--success):disabled, :global(.n8n-button--success)[aria-disabled=true] {
-    |                                                  ^
-523 |    --button--color--background: var(--color--success--tint-3);
-524 |    --button--shadow: 0 0 0 1px var(--color--success--tint-3);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-526 |  
-527 |  /** @deprecated Use a semantic variant instead of warning color */
-528 |  :global(.n8n-button--warning) {
-    |          ^
-529 |    --button--color--background: var(--color--warning);
-530 |    --button--color--background-hover: var(--color--warning--shade-1);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-535 |    --button--shadow--active: 0 0 0 1px var(--color--warning--shade-1);
-536 |  }
-537 |  :global(.n8n-button--warning):disabled, :global(.n8n-button--warning)[aria-disabled=true] {
-    |          ^
-538 |    --button--color--background: var(--color--warning--tint-1);
-539 |    --button--shadow: 0 0 0 1px var(--color--warning--tint-1);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-535 |    --button--shadow--active: 0 0 0 1px var(--color--warning--shade-1);
-536 |  }
-537 |  :global(.n8n-button--warning):disabled, :global(.n8n-button--warning)[aria-disabled=true] {
-    |                                                  ^
-538 |    --button--color--background: var(--color--warning--tint-1);
-539 |    --button--shadow: 0 0 0 1px var(--color--warning--tint-1);
-computing gzip size...
-dist/design-system.css          238.84 kB │ gzip:  32.73 kB
-dist/en-CddpS_8k.js               0.06 kB │ gzip:   0.08 kB
-dist/en-cusRXFgs.js               7.45 kB │ gzip:   2.38 kB
-dist/node-icons-VCyExEKH.js      50.40 kB │ gzip:   8.42 kB
-dist/compact-Q0gG5s1Q.js        660.36 kB │ gzip:  87.46 kB
-dist/n8n-design-system.es.js  2,445.01 kB │ gzip: 648.50 kB
-
-[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugins. Here is a breakdown:
-  - unplugin-icons (57%)
-  - svg-loader (27%)
-  - vite:vue (11%)
-See https://rolldown.rs/options/checks#plugintimings for more details.
-
-
-rendering chunks...
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-511 |   */
-512 |  /** @deprecated Use a semantic variant instead of success color */
-513 |  :global(.n8n-button--success) {
-    |          ^
-514 |    --button--color--background: var(--color--success);
-515 |    --button--color--background-hover: var(--color--success--shade-1);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-520 |    --button--shadow--active: 0 0 0 1px var(--color--success--shade-1);
-521 |  }
-522 |  :global(.n8n-button--success):disabled, :global(.n8n-button--success)[aria-disabled=true] {
-    |          ^
-523 |    --button--color--background: var(--color--success--tint-3);
-524 |    --button--shadow: 0 0 0 1px var(--color--success--tint-3);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-520 |    --button--shadow--active: 0 0 0 1px var(--color--success--shade-1);
-521 |  }
-522 |  :global(.n8n-button--success):disabled, :global(.n8n-button--success)[aria-disabled=true] {
-    |                                                  ^
-523 |    --button--color--background: var(--color--success--tint-3);
-524 |    --button--shadow: 0 0 0 1px var(--color--success--tint-3);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-526 |  
-527 |  /** @deprecated Use a semantic variant instead of warning color */
-528 |  :global(.n8n-button--warning) {
-    |          ^
-529 |    --button--color--background: var(--color--warning);
-530 |    --button--color--background-hover: var(--color--warning--shade-1);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-535 |    --button--shadow--active: 0 0 0 1px var(--color--warning--shade-1);
-536 |  }
-537 |  :global(.n8n-button--warning):disabled, :global(.n8n-button--warning)[aria-disabled=true] {
-    |          ^
-538 |    --button--color--background: var(--color--warning--tint-1);
-539 |    --button--shadow: 0 0 0 1px var(--color--warning--tint-1);
-[lightningcss minify] 'global' is not recognized as a valid pseudo-class. Did you mean '::global' (pseudo-element) or is this a typo?
-535 |    --button--shadow--active: 0 0 0 1px var(--color--warning--shade-1);
-536 |  }
-537 |  :global(.n8n-button--warning):disabled, :global(.n8n-button--warning)[aria-disabled=true] {
-    |                                                  ^
-538 |    --button--color--background: var(--color--warning--tint-1);
-539 |    --button--shadow: 0 0 0 1px var(--color--warning--tint-1);
-computing gzip size...
-dist/design-system.css           238.84 kB │ gzip:  32.73 kB
-dist/n8n-design-system.umd.js  2,680.16 kB │ gzip: 685.05 kB
-
-✓ built in 7.17s