github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-12 08:00:27 +02:00
Code Issues Actions 13 Packages Projects Releases Wiki Activity

refactor(editor): Align @n8n/design-system with DS3 (no-changelog) (#28428)

Browse Source
This commit is contained in:
Rob Hough 2026-04-28 10:53:05 +01:00 committed by GitHub
parent 47ad39777f
commit d332fe9c84
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 1979 additions and 1224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.agents/design-system-style-rules.md → .claude/plugins/n8n/skills/design-system-rules/SKILL.md
View File

@ -1,7 +1,7 @@
# Design System Style Review Rules
Use these rules when reviewing CSS/SCSS/Vue style changes, especially in
`packages/frontend/` and `packages/frontend/@n8n/design-system/`.
Use these rules when working in `packages/frontend/` and `packages/frontend/@n8n/design-system/`.
Always follow guidance in `packages/frontend/@n8n/design-system/src/styleguide/*.mdx`.
## 1) Token source priority

1
.gitignore vendored
View File

@ -25,6 +25,7 @@ packages/**/.turbo
*.swp
CHANGELOG-*.md
*.mdx
!packages/frontend/@n8n/design-system/**/*.mdx
build-storybook.log
build.log
*.junit.xml

7
AGENTS.md
View File

@ -146,14 +146,11 @@ const children = getChildNodes(workflow.connections, 'NodeName', 'main', 1);
- Import from appropriate error classes in each package
### Frontend Development
- Refer to `packages/frontend/AGENTS.md`
- **All UI text must use i18n** - add translations to `@n8n/i18n` package
- **Use CSS variables directly** - never hardcode spacing as px values
- **data-testid must be a single value** (no spaces or multiple values)
- For style changes and design-system updates, follow
`.agents/design-system-style-rules.md`
When implementing CSS, refer to @packages/frontend/CLAUDE.md for guidelines on
CSS variables and styling conventions.
- Always use `design-system-rules` skill in reviews
### Testing Guidelines
- **Always work from within the package directory** when running tests

4
cubic.yaml
View File

@ -43,7 +43,7 @@ reviews:
## Step 4: Design System Style Rules
Follow `.agents/design-system-style-rules.md` for all CSS/SCSS/Vue style
Follow `.claude/plugins/n8n/skills/design-system-rules/SKILL.md` for all CSS/SCSS/Vue style
review guidance.
Enforcement level:
@ -213,7 +213,7 @@ reviews:
humans handle edge cases.
- name: Design System Tokens
description: |-
Follow `.agents/design-system-style-rules.md`.
Follow `.claude/plugins/n8n/skills/design-system-rules/SKILL.md`.
Apply balanced enforcement:
- Strong warning: hard-coded visual values, legacy token usage, and

47
packages/@n8n/stylelint-config/src/rules/css-var-naming.test.ts
View File

@ -20,17 +20,29 @@ describe('css-var-naming rule', () => {
describe('namespace validation', () => {
it('should accept valid n8n namespace', async () => {
const namespacePattern = `
:root {
--n8n--color--primary: #0d6efd;
--n8n--button--color--background--primary: #0d6efd;
--n8n--button--color--background--primary--hover: #0b5ed7;
--n8n--color--text--muted: #888;
}
`;
:root {
--n8n--color--primary: #0d6efd;
--n8n--button--color--background--primary: #0d6efd;
--n8n--button--color--background--primary--hover: #0b5ed7;
--n8n--color--text--muted: #888;
}
`;
const result = await lintCSS(namespacePattern);
expect(result.warnings).toHaveLength(0);
});
it('should bypass validation for custom n8n-prefixed variables', async () => {
const customN8nVars = `
:root {
--n8n--my-custom-token: #0d6efd;
--n8n--x: 1;
color: var(--n8n--my-custom-token);
}
`;
const result = await lintCSS(customN8nVars);
expect(result.warnings).toHaveLength(0);
});
it('should accept valid chat namespace', async () => {
const namespacePattern = `
:root {
@ -145,18 +157,17 @@ describe('css-var-naming rule', () => {
});
});
it('should reject properties without values', async () => {
const invalidPattern = `
it('should accept standalone properties without values', async () => {
const validPattern = `
:root {
--color: #0d6efd;
--spacing: 4px;
--background: #fff;
--icon-color: #999;
--text-color: #222;
--border-color: #ddd;
}
`;
const result = await lintCSS(invalidPattern);
expect(result.warnings.length).toBeGreaterThan(0);
expect(result.warnings[0]).toMatchObject({
text: expect.stringContaining('Must have at least 2 groups'),
});
const result = await lintCSS(validPattern);
expect(result.warnings).toHaveLength(0);
});
it('should reject spacing property without value', async () => {
@ -1028,13 +1039,13 @@ describe('css-var-naming rule', () => {
it('should reject invalid CSS variables in var() references', async () => {
const invalidVarReferences = `
.button {
background: var(--button-color--background);
background: var(--button-color);
}
`;
const result = await lintCSS(invalidVarReferences);
expect(result.warnings.length).toBeGreaterThan(0);
expect(result.warnings[0]).toMatchObject({
text: expect.stringContaining('Must include a valid property'),
text: expect.stringContaining('Must have at least 2 groups'),
});
});

33
packages/@n8n/stylelint-config/src/rules/css-var-naming.ts
View File

@ -2,6 +2,7 @@ import stylelint from 'stylelint';
import type { Rule } from 'stylelint';
const ruleName = '@n8n/css-var-naming';
const DESIGN_SYSTEM_CSS_PATH_SEGMENT = '/frontend/@n8n/design-system/src/css/';
const messages = stylelint.utils.ruleMessages(ruleName, {
rejected: (variable: string, reason: string) => `Invalid CSS variable "${variable}": ${reason}`,
@ -19,6 +20,8 @@ const PROPERTY_VOCABULARY = new Set([
'color--text',
'color--background',
'color--foreground',
'background',
'text-color',
'border-color',
'border-width',
'border-top-color',
@ -33,6 +36,7 @@ const PROPERTY_VOCABULARY = new Set([
'size',
'stroke-width',
'shadow',
'shadow-color',
'spacing',
'padding',
'font-size',
@ -59,6 +63,7 @@ const PROPERTY_VOCABULARY = new Set([
'bottom',
'left',
'right',
'letter-spacing',
]);
// Properties that can be used as standalone single-group variables (without a value)
@ -70,6 +75,11 @@ const STANDALONE_PROPERTIES = new Set([
'border-width',
'border',
'font-family',
'background',
'icon-color',
'text-color',
'shadow-color',
'letter-spacing',
]);
const STATES = new Set([
@ -93,6 +103,8 @@ const MODES = new Set(['light', 'dark', 'hc', 'rtl', 'print']);
const MEDIA = new Set(['sm', 'md', 'lg', 'xl', '2xl']);
const N8N_BYPASS_PREFIX = '--n8n--';
// Ignore issues related to these namespaces
const DISABLE_CHECK_FOR_NAMESPACES = new Set(['reka', 'ag', 'chat']);
@ -141,7 +153,24 @@ interface ValidationResult {
reason?: string;
}
function shouldValidateFile(filePath: string | undefined) {
if (!filePath) {
return false;
}
const normalizedPath = filePath.replace(/\\/g, '/');
return normalizedPath.includes(DESIGN_SYSTEM_CSS_PATH_SEGMENT);
}
function shouldSkip(variable: string) {
if (variable.startsWith(N8N_BYPASS_PREFIX)) {
const groups = variable.slice(2).split('--').slice(1);
const hasKnownProperty = groups.some((group) => PROPERTY_VOCABULARY.has(group));
return !hasKnownProperty;
}
// Split into groups first (drop first empty element from leading --)
const parts = variable.slice(2).split('-');
if (DISABLE_CHECK_FOR_NAMESPACES.has(parts[0])) {
@ -350,6 +379,10 @@ function validateCssVariable(variable: string): ValidationResult {
const ruleFunction: Rule = (primary, secondaryOptions, context) => {
return (root, result) => {
if (root.source?.input.file && !shouldValidateFile(root.source.input.file)) {
return;
}
const validOptions = stylelint.utils.validateOptions(result, ruleName, {
actual: primary,
});

76
packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue
View File

@ -147,8 +147,8 @@ const handleClick = (event: MouseEvent) => {
font-size: var(--button--font-size);
--button--color--background: transparent;
--button--color--background-hover: transparent;
--button--color--background-active: transparent;
--button--color--background-hover: var(--background--hover);
--button--color--background-active: var(--background--active);
--button--color: light-dark(var(--color--neutral-900), var(--color--neutral-100));
--button--shadow: 0 0 0 0 transparent;
--button--shadow--hover: 0 0 0 0 transparent;
@ -191,6 +191,7 @@ const handleClick = (event: MouseEvent) => {
&:focus-visible {
@include focus.focus-ring;
--button--border-color: var(--focus--border-color) !important;
}
&.xsmall {
@ -229,50 +230,30 @@ const handleClick = (event: MouseEvent) => {
}
&.solid {
--button--color--background: var(--color--orange-400);
--button--color--background-hover: var(--color--orange-500);
--button--color--background-active: var(--color--orange-600);
--button--color--background: var(--background--brand);
--button--color--background-hover: var(--background--brand--hover);
--button--color--background-active: var(--background--brand--active);
--button--color: var(--color--neutral-white);
--button--shadow: 0 1px 3px 0
light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
--button--shadow--hover: 0 1px 3px 0
light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
--button--shadow--active: 0 1px 3px 0
light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
--button--border-color: var(--color--orange-400);
--button--border-color--hover: var(--color--orange-500);
--button--border-color--active: var(--color--orange-600);
--button--shadow: var(--shadow--xs);
--button--shadow--hover: var(--shadow--xs);
--button--shadow--active: var(--shadow--xs);
--button--border-color: var(--background--brand);
--button--border-color--hover: var(--background--brand--hover);
--button--border-color--active: var(--background--brand--active);
--button--border--shadow: 0 0 0 1px var(--button--border-color);
--button--border--shadow--hover: 0 0 0 1px var(--button--border-color--hover);
--button--border--shadow--active: 0 0 0 1px var(--button--border-color--active);
}
&.subtle {
--button--color--background: light-dark(var(--color--neutral-white), var(--color--neutral-800));
--button--color--background-hover: light-dark(
var(--color--neutral-150),
var(--color--neutral-700)
);
--button--color--background-active: light-dark(
var(--color--neutral-200),
var(--color--neutral-600)
);
--button--shadow:
0 1px 3px light-dark(var(--color--black-alpha-100), var(--color--black-alpha-300)),
0 0 0 1.5px light-dark(transparent, var(--color--black-alpha-100));
--button--shadow--hover:
0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
--button--shadow--active:
0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
--button--border-color: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-100)
);
--button--color--background: var(--background--surface);
--button--shadow: var(--shadow--xs);
--button--shadow--hover: var(--shadow--xs);
--button--shadow--active: var(--shadow--xs);
--button--border-color: var(--border-color);
--button--border-color--hover: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-300)
var(--color--white-alpha-200)
);
--button--border-color--active: light-dark(
var(--color--black-alpha-300),
@ -285,18 +266,7 @@ const handleClick = (event: MouseEvent) => {
&.outline {
--button--color--background: transparent;
--button--color--background-hover: light-dark(
var(--color--neutral-150),
var(--color--white-alpha-100)
);
--button--color--background-active: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-200)
);
--button--border-color: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-100)
);
--button--border-color: var(--border-color);
--button--border-color--hover: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-200)
@ -312,14 +282,6 @@ const handleClick = (event: MouseEvent) => {
&.ghost {
--button--color--background: transparent;
--button--color--background-hover: light-dark(
var(--color--black-alpha-100),
var(--color--white-alpha-100)
);
--button--color--background-active: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-200)
);
--button--border-color: transparent;
--button--border--shadow: 0 0 0 1px var(--button--border-color);
--button--border--shadow--hover: 0 0 0 1px var(--button--border-color);

2
packages/frontend/@n8n/design-system/src/components/N8nCard/Card.vue
View File

@ -47,7 +47,7 @@ const classes = computed(() => ({
<style lang="scss" module>
.card {
border-radius: var(--radius--lg);
border: var(--border);
border: 1px solid var(--border-color);
background-color: var(--color--background--light-3);
padding: var(--card--padding, var(--spacing--sm));
display: flex;

6
packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts
View File

@ -6,6 +6,12 @@ export default {
title: 'Core/Heading',
component: N8nHeading,
argTypes: {
step: {
control: {
type: 'select',
},
options: [undefined, '4xs', '3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
},
size: {
control: {
type: 'select',

69
packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.vue
View File

@ -1,6 +1,8 @@
<script lang="ts" setup>
import { computed, useCssModule } from 'vue';
import type { TextStep } from '../../types/text';
const SIZES = ['2xlarge', 'xlarge', 'large', 'medium', 'small'] as const;
const COLORS = [
'primary',
@ -16,6 +18,7 @@ interface HeadingProps {
tag?: string;
bold?: boolean;
size?: (typeof SIZES)[number];
step?: TextStep;
color?: (typeof COLORS)[number];
align?: (typeof ALIGN)[number];
}
@ -37,7 +40,11 @@ const classes = computed(() => {
applied.push(props.color);
}
applied.push(`size-${props.size}`);
if (props.step) {
applied.push(`step-${props.step}`);
} else {
applied.push(`size-${props.size}`);
}
applied.push(props.bold ? 'bold' : 'regular');
return applied.map((c) => $style[c]);
@ -84,20 +91,74 @@ const classes = computed(() => {
line-height: var(--line-height--md);
}
.step-4xs {
font-size: var(--font-size--4xs);
line-height: var(--line-height--xs);
letter-spacing: var(--letter-spacing--normal);
}
.step-3xs {
font-size: var(--font-size--3xs);
line-height: var(--line-height--sm);
letter-spacing: var(--letter-spacing--normal);
}
.step-2xs {
font-size: var(--font-size--2xs);
line-height: var(--line-height--md);
letter-spacing: var(--letter-spacing--normal);
}
.step-xs {
font-size: var(--font-size--xs);
line-height: var(--line-height--md);
letter-spacing: var(--letter-spacing--normal);
}
.step-sm {
font-size: var(--font-size--sm);
line-height: var(--line-height--lg);
letter-spacing: var(--letter-spacing--normal);
}
.step-md {
font-size: var(--font-size--md);
line-height: var(--line-height--lg);
letter-spacing: var(--letter-spacing--normal);
}
.step-lg {
font-size: var(--font-size--lg);
line-height: var(--line-height--xl);
letter-spacing: var(--letter-spacing--normal);
}
.step-xl {
font-size: var(--font-size--xl);
line-height: var(--line-height--xl);
letter-spacing: var(--letter-spacing--normal);
}
.step-2xl {
font-size: var(--font-size--2xl);
line-height: var(--line-height--xl);
letter-spacing: var(--letter-spacing--tight);
}
.primary {
color: var(--color--primary);
}
.text-dark {
color: var(--color--text--shade-1);
color: var(--text-color);
}
.text-base {
color: var(--color--text);
color: var(--text-color--subtle);
}
.text-light {
color: var(--color--text--tint-1);
color: var(--text-color--subtler);
}
.text-xlight {

12
packages/frontend/@n8n/design-system/src/components/N8nInput/Input.vue
View File

@ -395,15 +395,9 @@ defineExpose({ focus, blur, select });
--input--shadow: 0 0 0 0 transparent;
--input--shadow--hover: 0 0 0 0 transparent;
--input--shadow--focus: 0 0 0 0 transparent;
--input--border-color: light-dark(var(--color--black-alpha-200), var(--color--white-alpha-100));
--input--border-color--hover: light-dark(
var(--color--black-alpha-200),
var(--color--white-alpha-200)
);
--input--border-color--focus: light-dark(
var(--color--black-alpha-300),
var(--color--white-alpha-300)
);
--input--border-color: var(--border-color);
--input--border-color--hover: var(--border-color--strong);
--input--border-color--focus: var(--focus--border-color);
--input--border--shadow: 0 0 0 1px var(--input--border-color);
--input--border--shadow--hover: 0 0 0 1px var(--input--border-color--hover);
--input--border--shadow--focus: 0 0 0 1px var(--input--border-color--focus);

2
packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
View File

@ -232,6 +232,8 @@ const resizerMove = (event: MouseEvent) => {
top: var(--resizer--spacing--side);
right: var(--resizer--spacing--side);
cursor: ew-resize;
border-color: var(--border-color);
border-color: var(--color--neutral-400);
}
.top {

6
packages/frontend/@n8n/design-system/src/components/N8nText/Text.stories.ts
View File

@ -6,6 +6,12 @@ export default {
title: 'Core/Text',
component: N8nText,
argTypes: {
step: {
control: {
type: 'select',
},
options: [undefined, '4xs', '3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
},
size: {
control: {
type: 'select',

69
packages/frontend/@n8n/design-system/src/components/N8nText/Text.vue
View File

@ -1,11 +1,12 @@
<script lang="ts" setup>
import { computed, useCssModule } from 'vue';
import type { TextAlign, TextColor, TextSize } from '../../types/text';
import type { TextAlign, TextColor, TextSize, TextStep } from '../../types/text';
interface TextProps {
bold?: boolean;
size?: TextSize;
step?: TextStep;
// @TODO Tech debt - property value should be updated to match token names (text-shade-2 instead of text-dark for example)
color?: TextColor;
align?: TextAlign;
@ -35,7 +36,11 @@ const classes = computed(() => {
applied.push('compact');
}
applied.push(`size-${props.size}`);
if (props.step) {
applied.push(`step-${props.step}`);
} else {
applied.push(`size-${props.size}`);
}
applied.push(props.bold ? 'bold' : 'regular');
return applied.map((c) => $style[c]);
@ -82,6 +87,60 @@ const classes = computed(() => {
line-height: var(--line-height--sm);
}
.step-4xs {
font-size: var(--font-size--4xs);
line-height: var(--line-height--xs);
letter-spacing: var(--letter-spacing--wider);
}
.step-3xs {
font-size: var(--font-size--3xs);
line-height: var(--line-height--sm);
letter-spacing: var(--letter-spacing--wider);
}
.step-2xs {
font-size: var(--font-size--2xs);
line-height: var(--line-height--md);
letter-spacing: var(--letter-spacing--normal);
}
.step-xs {
font-size: var(--font-size--xs);
line-height: var(--line-height--md);
letter-spacing: var(--letter-spacing--normal);
}
.step-sm {
font-size: var(--font-size--sm);
line-height: var(--line-height--lg);
letter-spacing: var(--letter-spacing--normal);
}
.step-md {
font-size: var(--font-size--md);
line-height: var(--line-height--lg);
letter-spacing: var(--letter-spacing--normal);
}
.step-lg {
font-size: var(--font-size--lg);
line-height: var(--line-height--xl);
letter-spacing: var(--letter-spacing--tight);
}
.step-xl {
font-size: var(--font-size--xl);
line-height: var(--line-height--xl);
letter-spacing: var(--letter-spacing--tight);
}
.step-2xl {
font-size: var(--font-size--2xl);
line-height: var(--line-height--xl);
letter-spacing: var(--letter-spacing--tighter);
}
.compact {
line-height: 1;
}
@ -95,15 +154,15 @@ const classes = computed(() => {
}
.text-dark {
color: var(--color--text--shade-1);
color: var(--text-color);
}
.text-base {
color: var(--color--text);
color: var(--text-color--subtle);
}
.text-light {
color: var(--color--text--tint-1);
color: var(--text-color--subtler);
}
.text-xlight {

379
packages/frontend/@n8n/design-system/src/css/_primitives.scss
View File

@ -1,159 +1,223 @@
@mixin primitives {
--color--white-alpha-100: hsla(220, 1%, 100%, 0.1);
--color--white-alpha-200: hsla(220, 1%, 100%, 0.15);
--color--white-alpha-300: hsla(220, 1%, 100%, 0.2);
--color--white-alpha-400: hsla(220, 1%, 100%, 0.25);
--color--white-alpha-500: hsla(220, 1%, 100%, 0.3);
--color--white-alpha-600: hsla(220, 1%, 100%, 0.4);
--color--white-alpha-700: hsla(220, 1%, 100%, 0.5);
--color--white-alpha-800: hsla(220, 1%, 100%, 0.7);
--color--white-alpha-900: hsla(220, 1%, 100%, 0.9);
/* pink */
--color--pink-50: oklch(97.14% 0.0141 343.2);
--color--pink-100: oklch(94.82% 0.0276 342.26);
--color--pink-150: oklch(92.3% 0.0423 343.08);
--color--pink-200: oklch(89.85% 0.0615 343.45);
--color--pink-250: oklch(86.04% 0.0898 343.69);
--color--pink-300: oklch(82.25% 0.119 346.16);
--color--pink-400: oklch(71.76% 0.2017 349.7);
--color--pink-500: oklch(65.58% 0.2404 354.32);
--color--pink-600: oklch(59.79% 0.2417 1.37);
--color--pink-700: oklch(53.17% 0.2137 4.81);
--color--pink-800: oklch(46.07% 0.1853 4.1);
--color--pink-900: oklch(40.82% 0.1533 2.23);
--color--pink-950: oklch(28.41% 0.1089 3.59);
--color--black-alpha-100: hsl(220, 1%, 0%, 0.05);
--color--black-alpha-200: hsl(220, 1%, 0%, 0.1);
--color--black-alpha-300: hsl(220, 1%, 0%, 0.2);
--color--black-alpha-400: hsl(220, 1%, 0%, 0.3);
--color--black-alpha-500: hsl(220, 1%, 0%, 0.5);
--color--black-alpha-600: hsl(220, 1%, 0%, 0.8);
--color--black-alpha-700: hsl(220, 1%, 0%, 0.85);
--color--black-alpha-800: hsl(220, 1%, 0%, 0.9);
--color--black-alpha-900: hsl(220, 1%, 0%, 0.95);
/* white */
--color--white-alpha-50: oklch(100% 0 89.88 / 0.05);
--color--white-alpha-100: oklch(100% 0 89.88 / 0.1);
--color--white-alpha-150: oklch(100% 0 89.88 / 0.15);
--color--white-alpha-200: oklch(100% 0 89.88 / 0.2);
--color--white-alpha-250: oklch(100% 0 89.88 / 0.25);
--color--white-alpha-300: oklch(100% 0 89.88 / 0.3);
--color--white-alpha-400: oklch(100% 0 89.88 / 0.4);
--color--white-alpha-500: oklch(100% 0 89.88 / 0.5);
--color--white-alpha-600: oklch(100% 0 89.88 / 0.6);
--color--white-alpha-700: oklch(100% 0 89.88 / 0.7);
--color--white-alpha-800: oklch(100% 0 89.88 / 0.8);
--color--white-alpha-900: oklch(100% 0 89.88 / 0.9);
--color--white-alpha-950: oklch(100% 0 89.88 / 0.95);
--color--neutral-white: hsl(0, 0%, 100%);
--color--neutral-50: hsl(0, 0%, 99%);
--color--neutral-100: hsl(0, 0%, 97.5%);
/* black */
--color--black-alpha-50: oklch(0% 0 0 / 0.05);
--color--black-alpha-100: oklch(0% 0 0 / 0.1);
--color--black-alpha-150: oklch(0% 0 0 / 0.15);
--color--black-alpha-200: oklch(0% 0 0 / 0.2);
--color--black-alpha-250: oklch(0% 0 0 / 0.25);
--color--black-alpha-300: oklch(0% 0 0 / 0.3);
--color--black-alpha-400: oklch(0% 0 0 / 0.4);
--color--black-alpha-500: oklch(0% 0 0 / 0.5);
--color--black-alpha-600: oklch(0% 0 0 / 0.6);
--color--black-alpha-700: oklch(0% 0 0 / 0.7);
--color--black-alpha-800: oklch(0% 0 0 / 0.8);
--color--black-alpha-900: oklch(0% 0 0 / 0.9);
--color--black-alpha-950: oklch(0% 0 0 / 0.95);
/* neutral */
--color--neutral-white: oklch(100% 0 89.88);
--color--neutral-50: oklch(98.51% 0 89.88);
--color--neutral-100: oklch(97.02% 0 89.88);
--color--neutral-150: oklch(95.51% 0 89.88);
--color--neutral-200: oklch(92.19% 0 89.88);
--color--neutral-250: oklch(90.67% 0 89.88);
--color--neutral-300: oklch(88.53% 0 89.88);
--color--neutral-400: oklch(79.21% 0 89.88);
--color--neutral-500: oklch(68.3% 0 89.88);
--color--neutral-600: oklch(55.55% 0 89.88);
--color--neutral-700: oklch(38.67% 0 89.88);
--color--neutral-800: oklch(31.71% 0 89.88);
--color--neutral-900: oklch(26.86% 0 89.88);
--color--neutral-950: oklch(20.46% 0 89.88);
--color--neutral-black: oklch(0% 0 0);
/* orange */
--color--orange-50: oklch(97.96% 0.0158 73.68);
--color--orange-100: oklch(95.4% 0.0382 76.2);
--color--orange-150: oklch(95.4% 0.0382 76.2);
--color--orange-200: oklch(89.99% 0.0763 70.44);
--color--orange-250: oklch(89.99% 0.0763 70.44);
--color--orange-300: oklch(83.37% 0.1256 67.19);
--color--orange-400: oklch(74.58% 0.1802 56.73);
--color--orange-500: oklch(69.96% 0.202 44.44);
--color--orange-600: oklch(64.71% 0.2173 36.85);
--color--orange-700: oklch(55.42% 0.1922 35.48);
--color--orange-800: oklch(46.96% 0.1566 37.15);
--color--orange-900: oklch(40.73% 0.1228 38.02);
--color--orange-950: oklch(26.62% 0.0789 35.91);
--color--orange-alpha-100: oklch(69.96% 0.202 44.44 / 0.1);
--color--orange-alpha-150: oklch(69.96% 0.202 44.44 / 0.15);
--color--orange-alpha-200: oklch(69.96% 0.202 44.44 / 0.2);
--color--orange-alpha-300: oklch(69.96% 0.202 44.44 / 0.3);
--color--orange-alpha-400: oklch(69.96% 0.202 44.44 / 0.4);
--color--orange-alpha-500: oklch(69.96% 0.202 44.44 / 0.5);
--color--orange-alpha-600: oklch(69.96% 0.202 44.44 / 0.6);
--color--orange-alpha-700: oklch(69.96% 0.202 44.44 / 0.7);
--color--orange-alpha-800: oklch(69.96% 0.202 44.44 / 0.8);
--color--orange-alpha-900: oklch(69.96% 0.202 44.44 / 0.9);
--color--orange-alpha-950: oklch(69.96% 0.202 44.44 / 0.95);
/* green */
--color--green-50: oklch(98.19% 0.0181 155.83);
--color--green-100: oklch(96.24% 0.0434 156.74);
--color--green-150: oklch(94.08% 0.0693 155.66);
--color--green-200: oklch(92.58% 0.0845 155.86);
--color--green-250: oklch(88.88% 0.1311 154.31);
--color--green-300: oklch(87.04% 0.149 154.62);
--color--green-400: oklch(79.14% 0.2091 151.66);
--color--green-500: oklch(72.89% 0.2119 147.82);
--color--green-600: oklch(63.2% 0.186 147.37);
--color--green-700: oklch(52.96% 0.1495 148.99);
--color--green-800: oklch(44.68% 0.1187 151.4);
--color--green-900: oklch(39.35% 0.0957 152.28);
--color--green-950: oklch(26.54% 0.0651 152.77);
--color--green-alpha-100: oklch(58.78% 0.1343 153.89 / 0.149);
--color--green-alpha-200: oklch(58.78% 0.1343 153.89 / 0.251);
/* purple */
--color--purple-50: oklch(96.91% 0.0161 293.76);
--color--purple-100: oklch(94.33% 0.0284 294.59);
--color--purple-150: oklch(94.33% 0.0284 294.59);
--color--purple-200: oklch(89.46% 0.0562 293.06);
--color--purple-250: oklch(89.46% 0.0562 293.06);
--color--purple-300: oklch(81.01% 0.1055 293.7);
--color--purple-400: oklch(69.89% 0.176 294.12);
--color--purple-500: oklch(60.06% 0.2425 293.89);
--color--purple-600: oklch(54.05% 0.2811 292.85);
--color--purple-700: oklch(49.07% 0.2699 292.56);
--color--purple-800: oklch(43.16% 0.232 292.71);
--color--purple-900: oklch(38.01% 0.1888 293.64);
--color--purple-950: oklch(28.4% 0.1414 291.29);
--color--purple-alpha-100: oklch(49.83% 0.1772 283.27 / 0.102);
--color--purple-alpha-200: oklch(49.83% 0.1772 283.27 / 0.251);
--color--purple-alpha-300: oklch(49.83% 0.1772 283.27 / 0.402);
--color--purple-alpha-400: oklch(49.83% 0.1772 283.27 / 0.602);
--color--purple-alpha-500: oklch(49.83% 0.1772 283.27 / 0.802);
/* mint */
--color--mint-50: oklch(98.36% 0.0142 180.72);
--color--mint-100: oklch(95.2% 0.0507 181.07);
--color--mint-150: oklch(91.84% 0.0887 179.84);
--color--mint-200: oklch(91.08% 0.0962 180.11);
--color--mint-250: oklch(89.1% 0.1141 179.41);
--color--mint-300: oklch(85.39% 0.1375 181.57);
--color--mint-400: oklch(78.3% 0.1408 181.38);
--color--mint-500: oklch(71.05% 0.1276 181.6);
--color--mint-600: oklch(60.49% 0.107 184.17);
--color--mint-700: oklch(51.52% 0.0905 185.73);
--color--mint-800: oklch(43.76% 0.0759 188.55);
--color--mint-900: oklch(38.71% 0.0634 187.21);
--color--mint-950: oklch(27.66% 0.046 192.53);
/* red */
--color--red-50: oklch(97.05% 0.0129 17.38);
--color--red-100: oklch(93.65% 0.032 17.74);
--color--red-150: oklch(91.08% 0.046 18.03);
--color--red-200: oklch(88.34% 0.0616 18.39);
--color--red-250: oklch(84.85% 0.0827 18.93);
--color--red-300: oklch(80.53% 0.1109 19.78);
--color--red-400: oklch(70.22% 0.1892 22.23);
--color--red-500: oklch(63.78% 0.2373 25.44);
--color--red-600: oklch(58.3% 0.2387 28.48);
--color--red-700: oklch(50.95% 0.2086 28.51);
--color--red-800: oklch(44.46% 0.1774 26.79);
--color--red-900: oklch(39.67% 0.1408 25.71);
--color--red-950: oklch(25.75% 0.0918 25.84);
--color--red-alpha-020: oklch(59.99% 0.2299 24.84 / 0.2);
/* blue */
--color--blue-50: oklch(97.05% 0.0142 254.6);
--color--blue-100: oklch(93.19% 0.0316 255.59);
--color--blue-150: oklch(90.6% 0.0446 255.63);
--color--blue-200: oklch(88.2% 0.0588 253.97);
--color--blue-250: oklch(83.4% 0.0842 254.17);
--color--blue-300: oklch(80.71% 0.1007 250.45);
--color--blue-400: oklch(70.4% 0.1583 253.63);
--color--blue-500: oklch(61.87% 0.2067 259.23);
--color--blue-600: oklch(54.65% 0.2455 262.87);
--color--blue-700: oklch(48.78% 0.2432 264.4);
--color--blue-800: oklch(42.42% 0.1982 265.5);
--color--blue-900: oklch(37.96% 0.1453 265.47);
--color--blue-950: oklch(28.1% 0.0924 268.13);
/* yellow */
--color--yellow-50: oklch(98.73% 0.0262 102.21);
--color--yellow-100: oklch(97.27% 0.0706 103.29);
--color--yellow-150: oklch(95.75% 0.1125 103.41);
--color--yellow-200: oklch(94.53% 0.1293 101.4);
--color--yellow-250: oklch(93.07% 0.1604 101.32);
--color--yellow-300: oklch(90.32% 0.1817 98.27);
--color--yellow-400: oklch(85.35% 0.1744 88.77);
--color--yellow-500: oklch(79.77% 0.1641 82.71);
--color--yellow-600: oklch(68.22% 0.1465 71.47);
--color--yellow-700: oklch(55.48% 0.1271 62.52);
--color--yellow-800: oklch(47.76% 0.1115 60.43);
--color--yellow-900: oklch(42.15% 0.0952 57.94);
--color--yellow-950: oklch(28.71% 0.0662 54.59);
/* gold */
--color--gold-50: oklch(98.3% 0.0114 84.58);
--color--gold-100: oklch(92.41% 0.0463 78.84);
--color--gold-200: oklch(89.52% 0.0631 77.82);
--color--gold-300: oklch(84.14% 0.0975 76.95);
--color--gold-400: oklch(76.08% 0.1386 73.14);
--color--gold-500: oklch(69.33% 0.143 69.76);
--color--gold-600: oklch(61.78% 0.1267 70.31);
--color--gold-700: oklch(52.43% 0.1059 70.78);
--color--gold-800: oklch(40.5% 0.0793 72.23);
--color--gold-900: oklch(24.57% 0.0436 73.41);
--color--gold-alpha-020: oklch(76.08% 0.1386 73.14 / 0.2);
/* slate */
--color--slate-100: oklch(91.8% 0.0068 295.44);
--color--slate-200: oklch(83.35% 0.0138 290.7);
--color--slate-300: oklch(74.76% 0.0214 292);
--color--slate-400: oklch(65.92% 0.0295 292.45);
--color--slate-500: oklch(56.71% 0.0383 290.62);
--color--slate-600: oklch(48.5% 0.0319 292.04);
--color--slate-700: oklch(39.82% 0.0251 291.33);
--color--slate-800: oklch(30.63% 0.0179 289.89);
--color--slate-900: oklch(20.8% 0.0099 294.69);
--color--slate-alpha-700: oklch(39.82% 0.0251 291.33 / 0.749);
/* deprecated */
--color--neutral-125: hsl(0, 0%, 96%);
--color--neutral-150: hsl(0, 0%, 93%);
--color--neutral-200: hsl(0, 0%, 88%);
--color--neutral-250: hsl(0, 0%, 80%);
--color--neutral-300: hsl(0, 0%, 68%);
--color--neutral-400: hsl(0, 0%, 58%);
--color--neutral-500: hsl(0, 0%, 51%);
--color--neutral-600: hsl(0, 0%, 46%);
--color--neutral-700: hsl(0, 0%, 30%);
--color--neutral-750: hsl(0, 0%, 26%);
--color--neutral-800: hsl(0, 0%, 24%);
--color--neutral-850: hsl(0, 0%, 17%);
--color--neutral-900: hsl(0, 0%, 13%);
--color--neutral-950: hsl(0, 0%, 9%);
--color--neutral-black: hsl(0, 0%, 0%);
--color--neutral-150-alpha-100: hsla(0, 0%, 93%, 0.1);
--color--neutral-300-alpha-100: hsla(0, 0%, 68%, 0.1);
--color--neutral-800-alpha-100: hsla(0, 0%, 24%, 0.1);
--color--orange-50: hsl(7, 100%, 98%);
--color--orange-100: hsl(7, 100%, 95%);
--color--orange-150: hsl(7, 100%, 93%);
--color--orange-200: hsl(7, 100%, 88%);
--color--orange-250: hsl(7, 100%, 78%);
--color--orange-300: hsl(7, 100%, 68%);
--color--orange-400: hsl(7, 100%, 60%);
--color--orange-500: hsl(7, 100%, 50%);
--color--orange-600: hsl(7, 100%, 40%);
--color--orange-700: hsl(7, 100%, 30%);
--color--orange-800: hsl(7, 100%, 20%);
--color--orange-900: hsl(7, 100%, 10%);
--color--orange-950: hsl(7, 100%, 5%);
--color--orange-alpha-100: hsla(7, 100%, 68%, 0.1);
--color--orange-alpha-300: hsla(7, 100%, 68%, 0.35);
--color--orange-alpha-500: hsla(7, 100%, 68%, 0.5);
--color--purple-50: hsl(247, 49%, 98%);
--color--purple-100: hsl(247, 49%, 95%);
--color--purple-200: hsl(247, 49%, 93%);
--color--purple-300: hsl(247, 49%, 83%);
--color--purple-400: hsl(247, 49%, 73%);
--color--purple-500: hsl(247, 49%, 63%);
--color--purple-600: hsl(247, 49%, 53%);
--color--purple-700: hsl(247, 49%, 43%);
--color--purple-800: hsl(247, 49%, 37%);
--color--purple-900: hsl(247, 49%, 30%);
--color--purple-950: hsl(247, 49%, 21%);
--color--purple-alpha-100: hsla(247, 49%, 53%, 0.1);
--color--purple-alpha-200: hsla(247, 49%, 53%, 0.25);
--color--green-50: hsl(144, 60%, 95%);
--color--green-100: hsl(145, 60%, 90%);
--color--green-200: hsl(145, 60%, 80%);
--color--green-300: hsl(146, 60%, 70%);
--color--green-400: hsl(147, 60%, 60%);
--color--green-500: hsl(147, 60%, 50%);
--color--green-600: hsl(147, 60%, 40%);
--color--green-700: hsl(147, 60%, 30%);
--color--green-800: hsl(148, 60%, 25%);
--color--green-900: hsl(148, 60%, 20%);
--color--green-950: hsl(151, 60%, 10%);
--color--green-alpha-100: hsl(147, 60%, 36%, 0.15);
--color--green-alpha-200: hsl(147, 60%, 36%, 0.25);
--color--mint-100: hsl(147, 83%, 90%);
--color--mint-200: hsl(147, 83%, 80%);
--color--mint-300: hsl(147, 83%, 70%);
--color--mint-400: hsl(147, 83%, 60%);
--color--mint-500: hsl(147, 83%, 50%);
--color--mint-600: hsl(147, 83%, 44%);
--color--mint-700: hsl(147, 83%, 30%);
--color--mint-800: hsl(147, 83%, 20%);
--color--mint-900: hsl(147, 83%, 10%);
--color--red-50: hsl(356, 83%, 97%);
--color--red-100: hsl(354, 83%, 92%);
--color--red-200: hsl(355, 83%, 89%);
--color--red-250: hsl(355, 83%, 82%);
--color--red-300: hsl(355, 83%, 77%);
--color--red-400: hsl(355, 83%, 68%);
--color--red-500: hsl(355, 83%, 60%);
--color--red-600: hsl(355, 83%, 52%);
--color--red-700: hsl(355, 83%, 42%);
--color--red-800: hsl(355, 83%, 37%);
--color--red-900: hsl(355, 83%, 27%);
--color--red-950: hsl(355, 83%, 17%);
--color--red-alpha-020: hsla(355, 83%, 52%, 0.2);
--color--blue-50: hsl(210, 67%, 95%);
--color--blue-100: hsl(210, 67%, 92%);
--color--blue-200: hsl(210, 67%, 82%);
--color--blue-300: hsl(210, 67%, 70%);
--color--blue-400: hsl(210, 67%, 57%);
--color--blue-500: hsl(210, 67%, 47%);
--color--blue-600: hsl(210, 67%, 42%);
--color--blue-700: hsl(210, 67%, 32%);
--color--blue-800: hsl(210, 67%, 22%);
--color--blue-900: hsl(210, 67%, 10%);
--color--yellow-100: hsl(46, 100%, 92%);
--color--yellow-200: hsl(46, 100%, 77%);
--color--yellow-300: hsl(46, 100%, 70%);
--color--yellow-400: hsl(46, 100%, 60%);
--color--yellow-500: hsl(46, 100%, 50%);
--color--yellow-600: hsl(46, 100%, 40%);
--color--yellow-700: hsl(46, 100%, 32%);
--color--yellow-800: hsl(46, 100%, 22%);
--color--yellow-900: hsl(46, 100%, 10%);
--color--gold-50: hsl(36, 77%, 97%);
--color--gold-100: hsl(36, 77%, 87%);
--color--gold-200: hsl(36, 77%, 82%);
--color--gold-300: hsl(36, 77%, 72%);
--color--gold-400: hsl(36, 77%, 57%);
--color--gold-500: hsl(36, 77%, 47%);
--color--gold-600: hsl(36, 77%, 40%);
--color--gold-700: hsl(36, 77%, 32%);
--color--gold-800: hsl(36, 77%, 22%);
--color--gold-900: hsl(36, 77%, 10%);
--color--gold-alpha-020: hsla(36, 77%, 57%, 0.2);
--color--slate-100: hsl(248, 10%, 90%);
--color--slate-200: hsl(248, 10%, 80%);
--color--slate-300: hsl(248, 10%, 70%);
--color--slate-400: hsl(248, 10%, 60%);
--color--slate-500: hsl(248, 10%, 50%);
--color--slate-600: hsl(248, 10%, 40%);
--color--slate-700: hsl(248, 10%, 30%);
--color--slate-800: hsl(248, 10%, 20%);
--color--slate-900: hsl(248, 10%, 10%);
--color--slate-alpha-700: hsla(247, 10%, 30%, 0.75);
--spacing--5xs: 0.125rem; /** 2px **/
--spacing--4xs: 0.25rem; /** 4px **/
--spacing--3xs: 0.375rem; /** 6px **/
@ -192,6 +256,14 @@
--line-height--lg: 1.35;
--line-height--xl: 1.5;
--letter-spacing--tightest: -0.05em;
--letter-spacing--tighter: -0.025em;
--letter-spacing--tight: -0.01em;
--letter-spacing--normal: 0;
--letter-spacing--wide: 0.025em;
--letter-spacing--wider: 0.05em;
--letter-spacing--widest: 0.1em;
--radius--4xs: 0.125rem; /** 2px **/
--radius--3xs: 0.25rem; /** 4px **/
--radius--2xs: 0.375rem; /** 6px **/
@ -216,11 +288,22 @@
--height--3xl: 3.5rem; /** 56px **/
--height--4xl: 4rem; /** 64px **/
--height--5xl: 6rem; /** 96px **/
--duration--snappy: 0.15s;
--duration--base: 0.3s;
--duration--snappy: 200ms;
--duration--base: 400ms;
--easing--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--easing--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--easing--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--shadow-color: var(--color--black-alpha-100);
/* box-shadow: var(--shadow--xs), inset var(--shadow--outline); */
--shadow--outline: 0 0 0 1px var(--shadow-color);
--shadow--2xs: 0 1px var(--shadow-color);
--shadow--xs: 0 1px 3px -1px var(--shadow-color);
--shadow--sm: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
--shadow--md: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
--shadow--xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
}
:root {

146
packages/frontend/@n8n/design-system/src/css/_tokens.legacy.scss Normal file
View File

@ -0,0 +1,146 @@
/**
* Non-semantic compatibility tokens.
*
* These are intentionally separated from semantic tokens to make migration
* progress explicit while preserving backwards compatibility.
*/
/**
* CSS Variable Naming Migration with Backwards Compatibility
*
* We are migrating from single-dash format (--color-primary-shade-1) to a new
* double-dash format (--color--primary--shade-1) to align with design system guidelines.
*
* To maintain backwards compatibility for users (for example embed customers that customize n8n)
* we use CSS variable fallbacks:
* --color--primary: var(--color-primary, var(--color--orange-300))
*
* This ensures:
* 1. New code using --color--primary--* works correctly
* 2. Legacy code using --color-primary-* continues to work
* 3. External integrations and custom CSS won't break
* 4. Gradual migration path without breaking changes
*
*/
/* stylelint-disable @n8n/css-var-naming */
@mixin theme-legacy {
--color--primary--h: 7;
--color--primary--s: 100%;
--color--primary--l: 68%;
// Legacy tokens (kept for compatibility)
// Primary
--color--primary--shade-1: var(--color-primary-shade-1, var(--color--primary));
--color--primary: var(--color-primary, var(--color--orange-500));
--color--primary--tint-1: var(--color-primary-tint-1, var(--color--orange-400));
--color--primary--tint-2: var(--color-primary-tint-2, var(--color--orange-250));
--color--primary--tint-3: var(--color-primary-tint-3, var(--color--orange-100));
--text--color: var(--text-color);
// Secondary
--color--secondary--shade-1: var(--color-secondary-shade-1, var(--color--purple-700));
--color--secondary: var(--color-secondary, var(--color--purple-600));
--color--secondary--tint-1: var(--color-secondary-tint-1, var(--color--purple-300));
--color--secondary--tint-2: var(--color-secondary-tint-3, var(--color--purple-200));
// Success
--color--success--shade-1: var(--color-success-shade-1, var(--color--green-700));
--color--success: var(--color-success, var(--color--green-600));
--color--success--tint-1: var(--color-success-light, var(--color--green-300));
--color--success--tint-2: var(--color-success-light-2, var(--color--green-200));
--color--success--tint-3: var(--color-success-tint-1, var(--color--green-100));
--color--success--tint-4: var(--color-success-tint-2, var(--color--green-50));
// Warning
--color--warning--shade-1: var(--color-warning-shade-1, var(--color--gold-500));
--color--warning: var(--color-warning, var(--color--gold-600));
--color--warning--tint-1: var(--color-warning-tint-1, var(--color--gold-200));
--color--warning--tint-2: var(--color-warning-tint-2, var(--color--gold-50));
// Danger
--color--danger--shade-1: var(--color-danger-shade-1, var(--color--red-700));
--color--danger: var(--color-danger, var(--color--red-600));
--color--danger--tint-1: var(--color-danger-light, var(--color--red-400));
--color--danger--tint-2: var(--color-danger-light-2, var(--color--red-300));
--color--danger--tint-3: var(--color-danger-tint-1, var(--color--red-100));
--color--danger--tint-4: var(--color-danger-tint-2, var(--color--red-50));
// Text
--color--text--shade-1: var(--color-text-dark, var(--color--neutral-900));
--color--text: var(--color-text-base, var(--color--neutral-700));
--color--text--tint-1: var(--color-text-light, var(--color--neutral-500));
--color--text--tint-2: var(--color-text-lighter, var(--color--neutral-200));
--color--text--tint-3: var(--color-text-xlight, var(--color--neutral-white));
--color--text--danger: var(--color-text-danger, var(--color--red-600));
// Foreground
--color--foreground--shade-2: var(--color-foreground-xdark, var(--color--neutral-500));
--color--foreground--shade-1: var(--color-foreground-dark, var(--color--neutral-250));
--color--foreground: var(--color-foreground-base, var(--color--neutral-200));
--color--foreground--tint-1: var(--color-foreground-light, var(--color--neutral-150));
--color--foreground--tint-2: var(--color-foreground-xlight, var(--color--neutral-white));
// Background
--color--background--shade-2: var(--color-background-dark, var(--color--neutral-950));
--color--background--shade-1: var(--color-background-medium, var(--color--neutral-200));
--color--background: var(--color-background-base, var(--color--neutral-125));
--color--background--light-1: var(--color-background-light-base, var(--color--neutral-100));
--color--background--light-2: var(--color-background-light, var(--color--neutral-50));
--color--background--light-3: var(--color-background-xlight, var(--color--neutral-white));
--shadow: var(
--box-shadow-base,
0 2px 4px var(--color--black-alpha-200),
0 0 6px var(--color--black-alpha-100)
);
--shadow--dark: var(
--box-shadow-dark,
0 2px 4px var(--color--black-alpha-200),
0 0 6px var(--color--black-alpha-200)
);
--shadow--light: var(--box-shadow-light, 0 2px 12px 0 var(--color--black-alpha-100));
--shadow--card-hover: 0 2px 8px rgba(68, 28, 23, 0.1);
--radius--xl: var(--border-radius-xlarge, 12px);
--radius--lg: var(--border-radius-large, 8px);
--radius: var(--border-radius-base, 4px);
--radius--sm: var(--border-radius-small, 2px);
--border-color--light: var(--border-color-light, var(--color--foreground--tint-1));
--border-style: var(--border-style-base, solid);
--border-width: var(--border-width-base, 1px);
--border: var(--border-base, var(--border-width) var(--border-style) var(--border-color));
}
@mixin theme-dark-legacy {
--color--danger: var(--color--red-400);
--color--text--shade-1: var(--color--neutral-white);
--color--text: var(--color--neutral-200);
--color--text--tint-1: var(--color--neutral-400);
--color--text--tint-2: var(--color--neutral-600);
--color--text--tint-3: var(--color--neutral-800);
--color--text--danger: var(--color--red-400);
--color--foreground--shade-2: var(--color--neutral-400);
--color--foreground--shade-1: var(--color--neutral-700);
--color--foreground: var(--color--neutral-800);
--color--foreground--tint-1: var(--color--neutral-850);
--color--foreground--tint-2: var(--color--neutral-950);
--color--background--shade-2: var(--color--neutral-150);
--color--background--shade-1: var(--color--neutral-600);
--color--background: var(--color--neutral-700);
--color--background--light-1: var(--color--neutral-850);
--color--background--light-2: var(--color--neutral-950);
--color--background--light-3: var(--color--neutral-900);
--border: var(
--border-base,
var(--border-width) var(--border-style) var(--color--white-alpha-100)
);
}
/* stylelint-enable @n8n/css-var-naming */

294
packages/frontend/@n8n/design-system/src/css/_tokens.scss
View File

@ -1,189 +1,31 @@
@use 'sass:math';
/**
* CSS Variable Naming Migration with Backwards Compatibility
*
* We are migrating from single-dash format (--color-primary-shade-1) to a new
* double-dash format (--color--primary--shade-1) to align with design system guidelines.
*
* To maintain backwards compatibility for users (for example embed customers that customize n8n)
* we use CSS variable fallbacks:
* --color--primary: var(--color-primary, var(--color--orange-300))
*
* This ensures:
* 1. New code using --color--primary--* works correctly
* 2. Legacy code using --color-primary-* continues to work
* 3. External integrations and custom CSS won't break
* 4. Gradual migration path without breaking changes
*
*/
@use './tokens.legacy.scss' as tokens-legacy;
@mixin theme {
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--h: 7;
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--s: 100%;
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--l: 68%;
// Legacy tokens (kept for compatibility)
// Primary
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--shade-1: var(--color-primary-shade-1, var(--color--primary));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary: var(--color-primary, var(--color--orange-300));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--tint-1: var(--color-primary-tint-1, var(--color--orange-200));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--tint-2: var(--color-primary-tint-2, var(--color--orange-150));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--primary--tint-3: var(--color-primary-tint-3, var(--color--orange-50));
// Secondary
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--secondary--shade-1: var(--color-secondary-shade-1, var(--color--purple-700));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--secondary: var(--color-secondary, var(--color--purple-600));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--secondary--tint-1: var(--color-secondary-tint-1, var(--color--purple-300));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--secondary--tint-2: var(--color-secondary-tint-3, var(--color--purple-200));
// Success
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--success--shade-1: var(--color-success-shade-1, var(--color--green-700));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--success: var(--color-success, var(--color--green-600));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--success--tint-1: var(--color-success-light, var(--color--green-300));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--success--tint-2: var(--color-success-light-2, var(--color--green-200));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--success--tint-3: var(--color-success-tint-1, var(--color--green-100));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--success--tint-4: var(--color-success-tint-2, var(--color--green-50));
// Warning
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--warning--shade-1: var(--color-warning-shade-1, var(--color--gold-500));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--warning: var(--color-warning, var(--color--gold-600));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--warning--tint-1: var(--color-warning-tint-1, var(--color--gold-200));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--warning--tint-2: var(--color-warning-tint-2, var(--color--gold-50));
// Danger
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--danger--shade-1: var(--color-danger-shade-1, var(--color--red-700));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--danger: var(--color-danger, var(--color--red-600));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--danger--tint-1: var(--color-danger-light, var(--color--red-400));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--danger--tint-2: var(--color-danger-light-2, var(--color--red-300));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--danger--tint-3: var(--color-danger-tint-1, var(--color--red-100));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--danger--tint-4: var(--color-danger-tint-2, var(--color--red-50));
// Text
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--text--shade-1: var(--color-text-dark, var(--color--neutral-850));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--text: var(--color-text-base, var(--color--neutral-600));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--text--tint-1: var(--color-text-light, var(--color--neutral-400));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--text--tint-2: var(--color-text-lighter, var(--color--neutral-200));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--text--tint-3: var(--color-text-xlight, var(--color--neutral-white));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--text--danger: var(--color-text-danger, var(--color--red-600));
// Foreground
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--foreground--shade-2: var(--color-foreground-xdark, var(--color--neutral-500));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--foreground--shade-1: var(--color-foreground-dark, var(--color--neutral-250));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--foreground: var(--color-foreground-base, var(--color--neutral-200));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--foreground--tint-1: var(--color-foreground-light, var(--color--neutral-150));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--foreground--tint-2: var(--color-foreground-xlight, var(--color--neutral-white));
// Background
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--background--shade-2: var(--color-background-dark, var(--color--neutral-950));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--background--shade-1: var(--color-background-medium, var(--color--neutral-200));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--background: var(--color-background-base, var(--color--neutral-125));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--background--light-1: var(--color-background-light-base, var(--color--neutral-100));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--background--light-2: var(--color-background-light, var(--color--neutral-50));
/* stylelint-disable-next-line @n8n/css-var-naming */
--color--background--light-3: var(--color-background-xlight, var(--color--neutral-white));
/* stylelint-disable-next-line @n8n/css-var-naming */
--shadow: var(
--box-shadow-base,
0 2px 4px var(--color--black-alpha-200),
0 0 6px var(--color--black-alpha-100)
);
--shadow--dark: var(
/* stylelint-disable-next-line @n8n/css-var-naming */ --box-shadow-dark,
0 2px 4px var(--color--black-alpha-200),
0 0 6px var(--color--black-alpha-200)
);
/* stylelint-disable-next-line @n8n/css-var-naming */
--shadow--light: var(--box-shadow-light, 0 2px 12px 0 var(--color--black-alpha-100));
--shadow--card-hover: 0 2px 8px rgba(68, 28, 23, 0.1);
/* stylelint-disable-next-line @n8n/css-var-naming */
--radius--xl: var(--border-radius-xlarge, 12px);
/* stylelint-disable-next-line @n8n/css-var-naming */
--radius--lg: var(--border-radius-large, 8px);
/* stylelint-disable-next-line @n8n/css-var-naming */
--radius: var(--border-radius-base, 4px);
/* stylelint-disable-next-line @n8n/css-var-naming */
--radius--sm: var(--border-radius-small, 2px);
/* stylelint-disable-next-line @n8n/css-var-naming */
/* stylelint-disable-next-line @n8n/css-var-naming */
--border-color--light: var(--border-color-light, var(--color--foreground--tint-1));
/* stylelint-disable-next-line @n8n/css-var-naming */
--border-style: var(--border-style-base, solid);
/* stylelint-disable-next-line @n8n/css-var-naming */
--border-width: var(--border-width-base, 1px);
/* stylelint-disable-next-line @n8n/css-var-naming */
--border: var(--border-base, var(--border-width) var(--border-style) var(--border-color--light));
/* stylelint-disable @n8n/css-var-naming */
// New semantic tokens (preferred)
--background--brand: var(--color--orange-400);
--background--brand--hover: var(--color--orange-500);
--background--brand--active: var(--color--orange-600);
@include tokens-legacy.theme-legacy;
--background--brand: var(--color--orange-500);
--background--brand--hover: var(--color--orange-600);
--background--brand--active: var(--color--orange-700);
--background--brand--focus: var(--color--orange-400);
--background--brand--disabled: var(--color--neutral-200);
--background--surface: var(--color--neutral-white);
--background--surface--hover: var(--color--neutral-100);
--background--surface--active: var(--color--neutral-125);
--background--surface--focus: var(--color--neutral-100);
--background--surface--disabled: var(--color--neutral-200);
--background--hover: var(--color--black-alpha-50);
--background--active: var(--color--black-alpha-100);
--background--focus: var(--color--black-alpha-100);
--background--disabled: var(--color--neutral-200);
--border-color: var(--border-color-base, var(--color--black-alpha-200));
--border-color--subtle: var(--color--black-alpha-100);
--border-color--strong: var(--color--black-alpha-300);
--border-color--stronger: var(--color--black-alpha-400);
/* stylelint-disable @n8n/css-var-naming */
--border-color: var(--border-color-base, var(--color--black-alpha-100));
/* stylelint-enable @n8n/css-var-naming */
--border-color--subtle: var(--color--black-alpha-50);
--border-color--strong: var(--color--black-alpha-200);
--border-color--stronger: var(--color--black-alpha-300);
--border: var(--border-width, 1px) var(--border-style, solid) var(--border-color);
--icon-color--subtle: var(--color--neutral-200);
--icon-color: var(--color--neutral-500);
--icon-color--subtle: var(--color--neutral-200);
--icon-color--strong: var(--color--neutral-800);
--text-color: var(--color--neutral-900);
@ -216,10 +58,8 @@
--icon-color--inverse: var(--color--neutral-100);
--focus--border-width: 2px;
--focus--border-color: var(--color--neutral-900);
/* stylelint-enable @n8n/css-var-naming */
// Secondary tokens
--focus--outline-color: var(--color--purple-alpha-200);
--focus--border-color: var(--color--purple-500);
// LangChain
--lm-chat--messages--color--background: var(--color--background);
@ -326,7 +166,7 @@
--node--icon--color--dark-blue: #353f6e;
--node--icon--color--sky-blue: #5699ff;
--node--icon--color--orange: #ff965a;
--node--icon--color--orange-red: var(--color--orange-300);
--node--icon--color--orange-red: var(--color--orange-500);
--node--icon--color--amber: #f92;
--node--icon--color--rust: #e44d26;
--node--icon--color--pink-red: #ea4b71;
@ -419,21 +259,21 @@
// Button primary
--button--color--text--primary: var(--color--neutral-white);
--button--border-color--primary: var(--color--orange-300);
--button--color--background--primary: var(--color--orange-300);
--button--border-color--primary: var(--color--orange-500);
--button--color--background--primary: var(--color--orange-500);
--button--border-color--primary--hover-active: var(--color--primary);
--button--color--background--primary--hover-active-focus: var(--color--primary);
--button--outline-color--primary--focus: var(--color--orange-alpha-300);
--button--color--text--primary--disabled: var(--color--white-alpha-800);
--button--border-color--primary--disabled: var(--color--orange-200);
--button--color--background--primary--disabled: var(--color--orange-200);
--button--border-color--primary--disabled: var(--color--orange-400);
--button--color--background--primary--disabled: var(--color--orange-400);
// Button secondary
--button--color--text--secondary: var(--color--neutral-700);
--button--border-color--secondary: var(--color--neutral-300);
--button--color--background--secondary: var(--color--neutral-white);
--button--color--text--secondary--hover-active-focus: var(--color--orange-400);
--button--border-color--secondary--hover-active-focus: var(--color--orange-300);
--button--color--text--secondary--hover-active-focus: var(--color--orange-500);
--button--border-color--secondary--hover-active-focus: var(--color--orange-600);
--button--color--background--secondary--hover: var(--color--orange-50);
--button--color--background--secondary--active-focus: var(--color--orange-100);
--button--outline-color--secondary--focus: var(--color--neutral-200);
@ -466,10 +306,6 @@
--button--border-color--highlight-fill--disabled: transparent;
--button--color--background--highlight-fill--disabled: var(--color--background);
// Focus
--focus--border-width: 1px;
--focus--border-color: var(--color--secondary);
// Button success, warning, danger
--button--color--text--success: var(--color--neutral-white);
--button--color--text--success--disabled: var(--color--white-alpha-800);
@ -487,8 +323,8 @@
// Node Creator Button
--node-creator--button--color--text: var(--color--neutral-600);
--node-creator--button--color--text--hover: var(--color--orange-300);
--node-creator--button--border-color--hover: var(--color--orange-300);
--node-creator--button--color--text--hover: var(--color--orange-500);
--node-creator--button--border-color--hover: var(--color--orange-500);
--node-creator--button--color--background: var(--color--neutral-white);
// Table
@ -570,7 +406,7 @@
// Switch (Activation, boolean)
--switch--color--background: var(--color--neutral-400);
--switch--color--background--active: var(--color--mint-600);
--switch--color--background--active: var(--color--green-500);
--switch--border-color: transparent;
--switch--toggle--color: var(--color--neutral-white);
@ -793,7 +629,7 @@
// Params
--icon--color: var(--color--text--tint-1);
--icon--color--hover: var(--color--orange-300);
--icon--color--hover: var(--color--orange-600);
/* Ag Grid */
--grid--row--color--background--selected: var(--color--purple-200);
@ -811,53 +647,26 @@
}
@mixin theme-dark {
/* stylelint-disable @n8n/css-var-naming */
--color--danger: var(--color--red-400);
@include tokens-legacy.theme-dark-legacy;
--color--text--shade-1: var(--color--neutral-125);
--color--text: var(--color--neutral-250);
--color--text--tint-1: var(--color--neutral-300);
--color--text--tint-2: var(--color--neutral-600);
--color--text--tint-3: var(--color--neutral-800);
--color--text--danger: var(--color--red-400);
--color--foreground--shade-2: var(--color--neutral-400);
--color--foreground--shade-1: var(--color--neutral-700);
--color--foreground: var(--color--neutral-800);
--color--foreground--tint-1: var(--color--neutral-850);
--color--foreground--tint-2: var(--color--neutral-950);
--color--background--shade-2: var(--color--neutral-150);
--color--background--shade-1: var(--color--neutral-600);
--color--background: var(--color--neutral-700);
--color--background--light-1: var(--color--neutral-850);
--color--background--light-2: var(--color--neutral-950);
--color--background--light-3: var(--color--neutral-900);
/* stylelint-enable @n8n/css-var-naming */
--shadow: 0 2px 4px var(--color--black-alpha-300), 0 0 6px var(--color--black-alpha-200);
--shadow--dark: 0 2px 4px var(--color--black-alpha-300), 0 0 6px var(--color--black-alpha-300);
--shadow--light: 0 2px 12px 0 var(--color--black-alpha-300);
/* stylelint-disable @n8n/css-var-naming */
--background--brand: var(--color--orange-300);
--background--brand--hover: var(--color--orange-400);
--background--brand--active: var(--color--orange-500);
--background--brand: var(--color--orange-500);
--background--brand--hover: var(--color--orange-600);
--background--brand--active: var(--color--orange-700);
--background--brand--focus: var(--color--orange-400);
--background--brand--disabled: var(--color--neutral-800);
--background--surface: var(--color--neutral-900);
--background--surface--hover: var(--color--neutral-750);
--background--surface--active: var(--color--neutral-600);
--background--surface--focus: var(--color--neutral-750);
--background--surface--disabled: var(--color--neutral-800);
--background--hover: var(--color--white-alpha-100);
--background--active: var(--color--white-alpha-150);
--background--focus: var(--color--white-alpha-150);
--background--disabled: var(--color--neutral-800);
--border-color: var(--border-color-base, var(--color--white-alpha-200));
--border-color--subtle: var(--color--white-alpha-100);
--border-color--strong: var(--color--white-alpha-300);
/* stylelint-disable @n8n/css-var-naming */
--border-color: var(--border-color-base, var(--color--white-alpha-100));
/* stylelint-enable @n8n/css-var-naming */
--border-color--subtle: var(--color--white-alpha-50);
--border-color--strong: var(--color--white-alpha-200);
--border-color--stronger: var(--color--white-alpha-400);
--border: var(--border-base, var(--border-width) var(--border-style) var(--border-color));
--icon-color--subtle: var(--color--neutral-600);
--icon-color: var(--color--neutral-300);
@ -892,11 +701,6 @@
--text-color--inverse: var(--color--neutral-800);
--icon-color--inverse: var(--color--neutral-800);
--focus--border-color: var(--color--neutral-100);
/* stylelint-enable @n8n/css-var-naming */
// Secondary tokens
// AI Assistant
--assistant--color--highlight-1: #8c90f2;
--assistant--color--highlight-2: #a977f0;
@ -991,7 +795,7 @@
--node--icon--color--dark-blue: #7ba7ff;
--node--icon--color--sky-blue: #7fb3ff;
--node--icon--color--orange: #ffb080;
--node--icon--color--orange-red: var(--color--orange-300);
--node--icon--color--orange-red: var(--color--orange-500);
--node--icon--color--amber: #ffb966;
--node--icon--color--rust: #f75;
--node--icon--color--pink-red: #f85d82;
@ -1134,7 +938,7 @@
--node-creator--button--color--text--hover: var(
--button--color--text--secondary--hover-active-focus
);
--node-creator--button--border-color--hover: var(--color--orange-300);
--node-creator--button--border-color--hover: var(--color--orange-500);
--node-creator--button--color--background: var(--color--orange-alpha-100);
// Table
@ -1158,7 +962,7 @@
// NDV
--run-data--color--background: var(--color--neutral-900);
--ndvv2--run-data--color--background: var(--color--neutral-900);
--ndv--droppable-parameter--color: var(--color--orange-300);
--ndv--droppable-parameter--color: var(--color--orange-500);
--ndv--droppable-parameter--color--background: var(--color--orange-alpha-100);
--ndv--droppable-parameter--color--background--active: var(--color--green-alpha-100);
--ndv--back--color--text: var(--color--neutral-white);
@ -1416,7 +1220,7 @@
--link--color--secondary--hover: var(--color--purple-500);
// Params
--icon--color: var(--color--text--tint-1);
--icon--color--hover: var(--color--orange-300);
--icon--color--hover: var(--color--orange-500);
--menu--color--background: var(--color--neutral-900);
--menu--color--background--hover: var(--color--neutral-700);
@ -1428,6 +1232,8 @@
--command-bar-item--color--background--hover: var(--color--background--light-1);
--command-bar--shadow:
0 15px 45px 0 var(--color--black-alpha-400), 0 5px 10px 0 var(--color--black-alpha-200);
--shadow-color: var(--color--black-alpha-250);
}
:root {

3
packages/frontend/@n8n/design-system/src/css/mixins/_focus.scss
View File

@ -2,8 +2,7 @@
-------------------------- */
@mixin focus-ring {
outline: var(--focus--border-width) solid var(--focus--border-color);
outline-offset: 2px;
outline: var(--focus--border-width) solid var(--focus--outline-color);
transition: outline 0.15s ease-out;
}

33
packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.test.ts
View File

@ -1,33 +0,0 @@
import { render } from '@testing-library/vue';
import { mock, mockClear } from 'vitest-mock-extended';
import ColorCircles from './ColorCircles.vue';
describe('ColorCircles', () => {
const mockCssDeclaration = mock<CSSStyleDeclaration>();
window.getComputedStyle = () => mockCssDeclaration;
beforeEach(() => {
mockClear(mockCssDeclaration);
});
it('should render an empty section with empty colors', () => {
const wrapper = render(ColorCircles, {
props: {
colors: [],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
it('should render a section with two colors', () => {
mockCssDeclaration.getPropertyValue.mockReturnValue('#663399');
const wrapper = render(ColorCircles, {
props: {
colors: ['--color--primary--shade-1', '--color--primary'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

28
packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.utils.ts
View File

@ -1,28 +0,0 @@
/**
* Convert an HSL color to a Hex color
*/
export function hslToHex(h: number, s: number, l: number): string {
l /= 100;
const a = (s * Math.min(l, 1 - l)) / 100;
const f = (n: number) => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color)
.toString(16)
.padStart(2, '0');
};
return `#${f(0)}${f(8)}${f(4)}`;
}
/**
* Get the Hex color from an HSL color string
*/
export function getHex(hsl: string): string {
const colors = hsl
.replace('hsl(', '')
.replace(')', '')
.replace(/%/g, '')
.split(',')
.map(parseFloat);
return hslToHex(colors[0], colors[1], colors[2]);
}

95
packages/frontend/@n8n/design-system/src/styleguide/ColorCircles.vue
View File

@ -1,95 +0,0 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { getHex } from './ColorCircles.utils';
const props = defineProps<{ colors: string[] }>();
const getColors = () => {
const style = getComputedStyle(document.body);
const hslColors: Record<string, string> = {};
for (const color of props.colors) {
const colorValue = style.getPropertyValue(color);
if (colorValue) {
hslColors[color] = colorValue;
}
}
return hslColors;
};
const hsl = ref<{ [color: string]: string }>(getColors());
const observer = ref<MutationObserver | null>(null);
onMounted(() => {
observer.value = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
hsl.value = getColors();
}
}
});
const body = document.querySelector('body');
if (body) {
observer.value.observe(body, { attributes: true });
}
});
onUnmounted(() => {
observer.value?.disconnect();
});
// Expose functions for template usage
const getHexValue = (color: string) => getHex(hsl.value[color]);
</script>
<template>
<div :class="$style.section">
<div v-for="color in colors" :key="color" :class="$style.container">
<div :class="$style.circle" :style="{ backgroundColor: `var(${color})` }"></div>
<span>{{ color }}</span>
<span :class="$style.hsl">{{ hsl[color] }}</span>
<span :class="$style.color">{{ getHexValue(color) }}</span>
</div>
</div>
</template>
<style lang="scss" module>
.section {
display: flex;
}
.name {
align-self: center;
}
.container {
width: 140px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
align-self: flex-start;
padding: 5px;
color: var(--color--text--shade-1);
}
.circle {
border-radius: 50%;
height: 80px;
width: 80px;
margin-bottom: 5px;
border: 1px solid lightgray;
}
.color {
font-size: 0.8em;
}
.hsl {
composes: color;
content: var(--color--primary);
}
</style>

24
packages/frontend/@n8n/design-system/src/styleguide/Sizes.test.ts
View File

@ -1,24 +0,0 @@
import { render } from '@testing-library/vue';
import { mock, mockClear } from 'vitest-mock-extended';
import Sizes from './Sizes.vue';
describe('Sizes', () => {
const mockCssDeclaration = mock<CSSStyleDeclaration>();
window.getComputedStyle = () => mockCssDeclaration;
beforeEach(() => {
mockClear(mockCssDeclaration);
});
it('should render a section with a variable', () => {
mockCssDeclaration.getPropertyValue.mockReturnValue('400');
const wrapper = render(Sizes, {
props: {
variables: ['--font-weight--regular'],
},
});
expect(wrapper.html()).toMatchSnapshot();
});
});

87
packages/frontend/@n8n/design-system/src/styleguide/Sizes.vue
View File

@ -1,87 +0,0 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
type Size = {
rem: string;
px: number;
};
// Define props with their types
const props = withDefaults(
defineProps<{
variables: string[];
attr?: string;
}>(),
{
attr: '',
},
);
const getSizes = () => {
const style = getComputedStyle(document.body);
const sizeByVariableName: Record<string, Size> = {};
for (const variable of props.variables) {
const rem = style.getPropertyValue(variable);
const px = parseFloat(rem.replace('rem', '')) * 16; // Assuming default font-size is 16px
sizeByVariableName[variable] = { rem, px };
}
return sizeByVariableName;
};
const sizes = ref<Record<string, Size>>(getSizes());
const observer = ref<MutationObserver | null>(null);
onMounted(() => {
// Observing attributes changes in body to recompute sizes
const mutationObserverCallback = (mutationsList: MutationRecord[]) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
sizes.value = getSizes();
}
}
};
const body = document.querySelector('body');
if (body) {
observer.value = new MutationObserver(mutationObserverCallback);
observer.value.observe(body, { attributes: true });
}
});
onUnmounted(() => {
observer.value?.disconnect();
});
</script>
<template>
<table :class="$style.table">
<tr>
<th :class="$style.row">Name</th>
<th :class="$style.row">rem</th>
<th :class="$style.row">px</th>
</tr>
<tr
v-for="variable in variables"
:key="variable"
:style="attr ? { [attr]: `var(${variable})` } : {}"
>
<td>{{ variable }}</td>
<td>{{ sizes[variable].rem }}</td>
<td>{{ sizes[variable].px }}</td>
</tr>
</table>
</template>
<style lang="scss" module>
.table {
text-align: center;
color: var(--color--text--shade-1);
}
.row {
min-width: 150px;
}
</style>

30
packages/frontend/@n8n/design-system/src/styleguide/border.stories.ts
View File

@ -1,30 +0,0 @@
import { type StoryFn } from '@storybook/vue3-vite';
import VariableTable from './VariableTable.vue';
export default {
title: 'Styleguide/Border',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
},
},
};
const Template =
(template: string): StoryFn =>
() => ({
components: {
VariableTable,
},
template,
});
export const BorderRadius = Template(
"<variable-table :variables=\"['--radius--sm','--radius', '--radius--lg', '--radius--xl']\" />",
);
export const BorderWidth = Template('<variable-table :variables="[\'--border-width\']" />');
export const BorderStyle = Template('<variable-table :variables="[\'--border-style\']" />');

54
packages/frontend/@n8n/design-system/src/styleguide/colors.stories.ts
View File

@ -1,54 +0,0 @@
import { type StoryFn } from '@storybook/vue3-vite';
import ColorCircles from './ColorCircles.vue';
export default {
title: 'Styleguide/Colors Tokens',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
},
};
const Template =
(template: string): StoryFn =>
() => ({
components: {
ColorCircles,
},
template,
});
export const Primary = Template(
"<color-circles :colors=\"['--color--primary--shade-1', '--color--primary', '--color--primary--tint-1', '--color--primary--tint-2', '--color--primary--tint-3']\" />",
);
export const Secondary = Template(
"<color-circles :colors=\"['--color--secondary--shade-1', '--color--secondary', '--color--secondary--tint-1', '--color--secondary--tint-2']\" />",
);
export const Success = Template(
"<color-circles :colors=\"['--color--success--shade-1', '--color--success', '--color--success--tint-1', '--color--success--tint-2', '--color--success--tint-3', '--color--success--tint-4']\" />",
);
export const Warning = Template(
"<color-circles :colors=\"['--color--warning--shade-1', '--color--warning', '--color--warning--tint-1', '--color--warning--tint-2']\" />",
);
export const Danger = Template(
"<color-circles :colors=\"['--color--danger--shade-1', '--color--danger', '--color--danger--tint-1', '--color--danger--tint-2', '--color--danger--tint-3', '--color--danger--tint-4']\" />",
);
export const Text = Template(
"<color-circles :colors=\"['--color--text--shade-1', '--color--text', '--color--text--tint-1', '--color--text--tint-2', '--color--text--tint-3', '--color--text--danger']\" />",
);
export const Foreground = Template(
"<color-circles :colors=\"['--color--foreground--shade-2', '--color--foreground--shade-1', '--color--foreground', '--color--foreground--tint-1', '--color--foreground--tint-2']\" />",
);
export const Background = Template(
"<color-circles :colors=\"['--color--background--shade-2', '--color--background--shade-1', '--color--background', '--color--background--light-1', '--color--background--light-2', '--color--background--light-3']\" />",
);

60
packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts
View File

@ -1,60 +0,0 @@
import { type StoryFn } from '@storybook/vue3-vite';
import ColorCircles from './ColorCircles.vue';
export default {
title: 'Styleguide/Colors Primitives',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
},
},
};
const Template =
(template: string): StoryFn =>
() => ({
components: {
ColorCircles,
},
template,
});
export const Gray = Template(
"<color-circles :colors=\"['--color--neutral-950', '--color--neutral-900', '--color--neutral-850', '--color--neutral-800', '--color--neutral-700', '--color--neutral-600', '--color--neutral-500', '--color--neutral-400', '--color--neutral-300', '--color--neutral-250', '--color--neutral-200', '--color--neutral-150', '--color--neutral-125', '--color--neutral-100', '--color--neutral-100', '--color--neutral-50', '--color--neutral-white']\" />",
);
export const Primary = Template(
"<color-circles :colors=\"['--color--orange-400', '--color--orange-300', '--color--orange-250', '--color--orange-200', '--color--orange-150', '--color--orange-100', '--color--orange-50']\" />",
);
export const Secondary = Template(
"<color-circles :colors=\"['--color--purple-900','--color--purple-700','--color--purple-600','--color--purple-500','--color--purple-400','--color--purple-300','--color--purple-200']\" />",
);
export const AlternateA = Template(
"<color-circles :colors=\"['--color--green-900', '--color--green-700', '--color--green-600', '--color--green-300', '--color--green-200', '--color--green-100', '--color--green-50']\" />",
);
export const AlternateB = Template(
"<color-circles :colors=\"['--color--gold-800', '--color--gold-700', '--color--gold-500', '--color--gold-400', '--color--gold-300', '--color--gold-200', '--color--gold-100', '--color--gold-50']\" />",
);
export const AlternateC = Template(
"<color-circles :colors=\"['--color--red-900', '--color--red-800', '--color--red-700', '--color--red-600', '--color--red-400', '--color--red-300', '--color--red-250', '--color--red-100', '--color--red-50']\" />",
);
export const AlternateD = Template(
"<color-circles :colors=\"['--color--yellow-800', '--color--yellow-700', '--color--yellow-200', '--color--yellow-100']\" />",
);
export const AlternateE = Template(
"<color-circles :colors=\"['--color--blue-800', '--color--blue-700', '--color--blue-600', '--color--blue-500', '--color--blue-400', '--color--blue-200', '--color--blue-100']\" />",
);
export const AlternateF = Template('<color-circles :colors="[\'--color--mint-600\']" />');
export const AlternateG = Template('<color-circles :colors="[\'--color--slate-700\']" />');
export const AlternateH = Template('<color-circles :colors="[\'--color--red-400\']" />');

52
packages/frontend/@n8n/design-system/src/styleguide/colour.mdx Normal file
View File

@ -0,0 +1,52 @@
import { Meta } from '@storybook/addon-docs/blocks';
import PrimitivesColorTable from './components/PrimitivesColorTable.vue';
<Meta title="Styleguide/Colour" />
# Colour
We have a vast, beautiful color palette out of the box. Prefer using these rather than custom colours (e.g #ff0000). These are similar to Tailwind CSS.
Each colour has 13 steps ranging from lightest (50) to darkest (950).
<div class="sb-unstyled">
<PrimitivesColorTable />
</div>
## Tokens
Instead of using the raw primitive colours, it's often better to use a token. These are aliases for common use cases (e.g text color) to make it easier to keep UI consistent and flexible.
### Text
| Token | Description |
| ----------------------- | ----------------------------------------------- |
| `--text-color` | Default body text and primary labels. |
| `--text-color--subtle` | Secondary text such as helper copy or metadata. |
| `--text-color--subtler` | Tertiary or low-emphasis text. |
| `--text-color--inverse` | Text shown on dark or inverse surfaces. |
### Background
| Token | Description |
| ----------------------- | ------------------------------------------------------ |
| `--background--surface` | Base surface for cards, panels, and page sections. |
| `--background--hover` | Hover state for neutral interactive surfaces. |
| `--background--active` | Pressed/active state for neutral interactive surfaces. |
| `--background--success` | Success banners, badges, or confirmation surfaces. |
| `--background--warning` | Warning callouts and cautionary surfaces. |
| `--background--danger` | Danger/error surfaces behind destructive messaging. |
| `--background--info` | Informational surfaces and neutral notices. |
### Border
| Token | Description |
| ------------------------- | ------------------------------------------------- |
| `--border-color` | Default border for inputs, cards, and separators. |
| `--border-color--subtle` | Low-contrast dividers and lightweight outlines. |
| `--border-color--strong` | More prominent outlines for elevated contrast. |
| `--border-color--success` | Borders for success states and confirmations. |
| `--border-color--warning` | Borders for warning states and cautions. |
| `--border-color--danger` | Borders for error states and destructive actions. |
| `--border-color--info` | Borders for informational states. |

239
packages/frontend/@n8n/design-system/src/styleguide/components/PrimitivesColorTable.vue Normal file
View File

@ -0,0 +1,239 @@
<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import N8nTooltip from '../../components/N8nTooltip/Tooltip.vue';
import { TOOLTIP_DELAY_MS } from '../../constants';
type ColorRow = {
label: string;
tokenPrefix?: string;
tokens?: Record<string, string>;
};
const columns = [
'50',
'100',
'150',
'200',
'250',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'950',
];
const rows: ColorRow[] = [
{ label: 'Neutral', tokenPrefix: '--color--neutral-' },
{ label: 'Red', tokenPrefix: '--color--red-' },
{ label: 'Orange', tokenPrefix: '--color--orange-' },
{ label: 'Yellow', tokenPrefix: '--color--yellow-' },
{ label: 'Green', tokenPrefix: '--color--green-' },
{ label: 'Mint', tokenPrefix: '--color--mint-' },
{ label: 'Blue', tokenPrefix: '--color--blue-' },
{ label: 'Purple', tokenPrefix: '--color--purple-' },
{ label: 'Pink', tokenPrefix: '--color--pink-' },
{ label: 'White Alpha', tokenPrefix: '--color--white-alpha-' },
{ label: 'Black Alpha', tokenPrefix: '--color--black-alpha-' },
];
const tokenValues = ref<Record<string, string>>({});
const copiedToken = ref('');
let copiedTimeout: ReturnType<typeof setTimeout> | null = null;
let observer: MutationObserver | null = null;
const allTokens = computed(() => {
const tokens = new Set<string>();
for (const row of rows) {
for (const column of columns) {
const token = resolveToken(row, column);
if (token) {
tokens.add(token);
}
}
}
return [...tokens];
});
const updateValues = () => {
const style = getComputedStyle(document.body);
tokenValues.value = allTokens.value.reduce<Record<string, string>>((acc, token) => {
acc[token] = style.getPropertyValue(token).trim();
return acc;
}, {});
};
const resolveToken = (row: ColorRow, column: string): string => {
if (row.tokens?.[column]) {
return row.tokens[column];
}
if (row.tokenPrefix) {
return `${row.tokenPrefix}${column}`;
}
return '';
};
const hasTokenValue = (token: string) => Boolean(token && tokenValues.value[token]);
const getTooltipContent = (token: string) =>
copiedToken.value === token ? 'Copy' : 'Click to copy';
const copyToken = async (token: string) => {
if (!token || !hasTokenValue(token) || !navigator.clipboard?.writeText) {
return;
}
await navigator.clipboard.writeText(token);
copiedToken.value = token;
if (copiedTimeout) {
clearTimeout(copiedTimeout);
}
copiedTimeout = setTimeout(() => {
copiedToken.value = '';
}, 1200);
};
onMounted(() => {
updateValues();
observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (mutation.type === 'attributes') {
updateValues();
}
}
});
observer.observe(document.body, { attributes: true });
});
onUnmounted(() => {
observer?.disconnect();
if (copiedTimeout) {
clearTimeout(copiedTimeout);
}
});
</script>
<template>
<div :class="$style.container">
<div :class="$style.wrapper">
<div></div>
<div :class="$style.row">
<p v-for="column in columns" :key="column">{{ column }}</p>
</div>
</div>
<section v-for="row in rows" :key="row.label" :class="$style.wrapper">
<p :class="$style.label">{{ row.label }}</p>
<div :class="$style.row">
<N8nTooltip
v-for="column in columns"
:key="`${row.label}-${column}`"
:disabled="!hasTokenValue(resolveToken(row, column))"
placement="top"
:show-after="TOOLTIP_DELAY_MS"
>
<template #content>{{ getTooltipContent(resolveToken(row, column)) }}</template>
<button
type="button"
:class="$style.swatch"
:style="{ backgroundColor: `var(${resolveToken(row, column)})` }"
:aria-label="`Copy ${resolveToken(row, column)}`"
:disabled="!hasTokenValue(resolveToken(row, column))"
@click="copyToken(resolveToken(row, column))"
>
<span v-if="copiedToken === resolveToken(row, column)" :class="$style.copied">
Copied
</span>
</button>
</N8nTooltip>
</div>
</section>
</div>
</template>
<style lang="scss" module>
.container {
position: relative;
display: flex;
flex-direction: column;
gap: var(--spacing--2xs);
overflow: hidden;
margin: var(--spacing--2xl) 0;
}
.wrapper {
display: grid;
grid-template-columns: 160px 1fr;
width: 100%;
align-items: end;
gap: var(--spacing--xs);
margin-top: 0;
}
.row {
display: grid;
grid-template-columns: repeat(13, 1fr);
gap: var(--spacing--2xs);
justify-items: end;
p {
margin: 0;
font-size: var(--font-size--sm);
color: var(--text-color--subtle);
}
}
.label {
margin: 0;
font-size: var(--font-size--sm);
font-weight: var(--font-weight--medium);
color: var(--color--text--shade-1);
margin-bottom: 0 !important;
}
.swatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: var(--radius);
box-shadow: var(--shadow--outline);
cursor: pointer;
&:disabled {
cursor: default;
opacity: 0.4;
}
&:focus-visible {
outline: var(--focus--border-width) solid var(--focus--outline-color);
outline-offset: 2px;
}
}
.copied {
font-size: var(--font-size--2xs);
font-weight: var(--font-weight--bold);
line-height: 1;
padding: 2px 4px;
border-radius: var(--radius);
color: var(--text-color);
background: var(--color--white-alpha-500);
}
</style>

79
packages/frontend/@n8n/design-system/src/styleguide/components/SpacingPreview.vue
View File

@ -1,79 +0,0 @@
<script lang="ts" setup>
import { computed } from 'vue';
interface SpacingPreviewProps {
property?: 'padding' | 'margin';
side?: string;
}
const SIZES = [
'0',
'5xs',
'4xs',
'3xs',
'2xs',
'xs',
's',
'm',
'l',
'xl',
'2xl',
'3xl',
'4xl',
'5xl',
] as const;
const props = withDefaults(defineProps<SpacingPreviewProps>(), {
property: 'padding',
side: '',
});
const sizes = computed(() => [...SIZES, ...(props.property === 'margin' ? ['auto'] : [])]);
</script>
<template>
<div>
<div v-for="size in sizes" :key="size" class="spacing-group">
<div class="spacing-example" :class="`${property[0]}${side ? side[0] : ''}-${size}`">
<div class="spacing-box" />
<div class="label">{{ property[0] }}{{ side ? side[0] : '' }}-{{ size }}</div>
</div>
</div>
</div>
</template>
<style lang="scss">
$box-size: 64px;
.spacing-group {
border: var(--border);
margin: var(--spacing--sm);
display: inline-flex;
}
.spacing-example {
background: white;
position: relative;
background: hsla(
var(--color--primary--h),
var(--color--primary--s),
var(--color--primary--l),
0.25
);
}
.spacing-box {
width: $box-size;
height: $box-size;
display: block;
position: relative;
background: var(--color--primary);
}
.label {
position: absolute;
bottom: -1rem;
right: 0;
font-size: var(--font-size--sm);
}
</style>

97
packages/frontend/@n8n/design-system/src/styleguide/css-tokens.mdx Normal file
View File

@ -0,0 +1,97 @@
import { Meta } from '@storybook/addon-docs/blocks';
<Meta title="Styleguide/CSS Tokens" />
# CSS Tokens
Our CSS variables are layered so we can keep the design system consistent and themeable.
## Token layers
There are two main token layers
1. Primitives (`@n8n/design-system/src/css/_primitives.scss`)
2. Semantic Tokens (`@n8n/design-system/src/css/_tokens.scss`)
### Primitives
Raw design decisions: color scales, spacing, typography, radius, heights, durations, easing, and shadows.
```scss
--color--orange-500: oklch(...);
--spacing--sm: 1rem;
--font-size--md: 1rem;
--shadow--md: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
```
### Semantic theme tokens
Contextual tokens used by components (`--text-color`, `--background--surface`, `--border-color--success`, etc.).
These map to primitives (directly or through compatibility aliases), and have light/dark definitions via `@mixin theme` and `@mixin theme-dark`.
## How to choose tokens
- Use semantic tokens first in component styles (for example `--text-color`, `--background--surface`, `--icon-color`).
- Use primitives when you need a low-level scale value (for example spacing, radius, or a specific color step).
- Add new semantic tokens in `src/css/_tokens.scss` when the value is reused by multiple components or represents a shared UI meaning.
- Add new primitive tokens in `src/css/_primitives.scss` only for new base scales.
## Naming rules
Naming is validated by `@n8n/css-var-naming` in `packages/@n8n/stylelint-config/src/rules/css-var-naming.ts` for files in `@n8n/design-system/src/css`.
### Required format
- Use groups separated by double dashes: `--group--group`.
- Use lowercase alphanumerics; single dashes are allowed only within a group.
- Keep values after properties (for example `--color--primary`, not `--primary--color`).
```scss
/* valid */
--background--surface
--button--color--background--primary--hover
--font-weight--regular
/* invalid */
--background-surface
--Primary--color
--primary--color
```
### Property vocabulary
Variable names must include a recognized property group such as `color`, `background`, `text-color`, `border-color`, `spacing`, `radius`, `shadow`, `font-size`, `font-weight`, `duration`, or `easing`.
### Allowed exceptions
- `--n8n--*` prefix bypasses validation for local/internal helper variables.
- Namespaces `--reka--*`, `--ag--*`, and `--chat--*` are ignored for third-party interoperability.
- Single-group variables are only allowed for specific standalone properties (for example `--border`, `--radius`, `--shadow`, `--font-family`).
## Migration pattern (single-dash to double-dash)
When replacing older tokens, preserve compatibility by chaining fallbacks:
```scss
--color--secondary: var(--color-secondary, var(--color--purple-600));
```
This gives us:
- New naming for design system code.
- Existing overrides for embed/custom CSS users.
- Safe, incremental migration without breaking consumers.
## Practical guidance for contributors
- Prefer updating existing semantic tokens before introducing new one-off variables.
- If you must add a temporary exception, scope it tightly with `/* stylelint-disable @n8n/css-var-naming */` and re-enable immediately.
- Avoid hardcoded color hex values in component styles when an existing token can express the same intent.
---
<small>
Compatibility note: `src/css/_tokens.legacy.scss` contains non-semantic compatibility aliases used
during migration to the double-dash naming format. Keep new work on primitives + semantic tokens
in `src/css/_primitives.scss` and `src/css/_tokens.scss`.
</small>

37
packages/frontend/@n8n/design-system/src/styleguide/fonts.stories.ts
View File

@ -1,37 +0,0 @@
import { type StoryFn } from '@storybook/vue3-vite';
import Sizes from './Sizes.vue';
import VariableTable from './VariableTable.vue';
export default {
title: 'Styleguide/Font',
};
export const FontSize: StoryFn = () => ({
components: {
Sizes,
},
template:
"<sizes :variables=\"['--font-size--3xs', '--font-size--2xs','--font-size--xs','--font-size--sm','--font-size--md','--font-size--lg','--font-size--xl','--font-size--2xl']\" attr=\"font-size\" />",
});
const Template =
(template: string): StoryFn =>
() => ({
components: {
VariableTable,
},
template,
});
export const LineHeight = Template(
"<variable-table :variables=\"['--line-height--sm','--line-height--md','--line-height--lg','--line-height--xl']\" />",
);
export const FontWeight = Template(
'<variable-table :variables="[\'--font-weight--regular\',\'--font-weight--bold\']" attr="font-weight" />',
);
export const FontFamily = Template(
'<variable-table :variables="[\'--font-family\']" attr="font-family" />',
);

96
packages/frontend/@n8n/design-system/src/styleguide/shadow.mdx Normal file
View File

@ -0,0 +1,96 @@
import { Meta, Source } from '@storybook/addon-docs/blocks';
<Meta title="Styleguide/Shadow" />
# Shadows
Create depth and elevation for UI elements
Shadows can be applied using the `shadow-*` primitive. Variants range from `xs` to `xl` and can be used to create depth and elevation for UI elements.
Below is a table showcasing the different shadow variants available in the design system.
| Step | Value | Description |
| ------- | ------------------------ | -------------------------------------------------------------- |
| outline | `var(--shadow--outline)` | Used for focus outlines and similar effects. |
| 2xs | `var(--shadow--2xs)` | Used for very subtle shadows, such as small elements. |
| xs | `var(--shadow--xs)` | Used for slightly subtle shadows, such as on buttons or cards. |
| sm | `var(--shadow--sm)` | Used for standard shadows, such as on popovers or selects. |
| md | `var(--shadow--md)` | Used for more prominent shadows, such as floating elements. |
| lg | `var(--shadow--lg)` | Used for larger shadows. |
| xl | `var(--shadow--xl)` | Used for elevated elements, such as dialogs. |
## Example
Shadows can be applied using the `shadow-*` primitive. It's recommended to create a local variable and apply the `_primitives.scss` token for flexibility.
<div class="sb-unstyled shadow-demo">
<div class="shadow-demo__item">
<div class="shadow-demo__label">.box1</div>
<div class="shadow-demo__card" style={{ boxShadow: 'var(--shadow--xs)' }} />
</div>
<div class="shadow-demo__item">
<div class="shadow-demo__label">.box2</div>
<div class="shadow-demo__card" style={{ boxShadow: 'var(--shadow--md)' }} />
</div>
<div class="shadow-demo__item">
<div class="shadow-demo__label">.box3</div>
<div class="shadow-demo__card" style={{ boxShadow: 'var(--shadow--xl)' }} />
</div>
</div>
```css
.box {
width: 160px;
height: 160px;
border-radius: var(--radius--lg);
background: var(--background--surface);
box-shadow: var(--n8n--shadow--box);
}
.box1 {
--n8n--shadow--box: var(--shadow--xs);
}
.box2 {
--n8n--shadow--box: var(--shadow--md);
}
.box3 {
--n8n--shadow--box: var(--shadow--xl);
}
```
<style>
{`
.shadow-demo {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--spacing--lg);
padding: var(--spacing--xl);
padding-bottom:calc(2rem + var(--spacing--xl));
border-radius:var(--radius--lg) var(--radius--lg) 0 0;
border: 1px solid var(--border-color);
border-bottom:0;
background: light-dark(var(--color--neutral-100), var(--color--neutral-900));
margin-bottom:-2rem;
}
.shadow-demo__item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing--md);
}
.shadow-demo__label {
color: var(--text-color);
font-weight: var(--font-weight--semibold);
}
.shadow-demo__card {
width: 160px;
height: 160px;
border: 1px solid var(--border-color);
border-radius: var(--radius--lg);
background: var(--background--surface);
}
`}
</style>

78
packages/frontend/@n8n/design-system/src/styleguide/spacing-size.mdx Normal file
View File

@ -0,0 +1,78 @@
import { Meta } from '@storybook/addon-docs/blocks';
<Meta title="Styleguide/Spacing & Size" />
# Spacing & Size
Our spacing scale is built to keep visual rhythm consistent across components, with step names (`5xs` to `5xl`) that map to fixed pixel values.
Use adjacent steps when adjusting layouts so spacing feels intentional instead of drifting into one-off values.
The height scale complements spacing and gives controls a shared size language, so buttons, inputs, and panels align naturally.
## Spacing
| Name | Size (px) | Visualization |
| ---- | --------- | ------------------------------------------------------------------------------ |
| 5xs | 2px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--5xs)' }} /> |
| 4xs | 4px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--4xs)' }} /> |
| 3xs | 6px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--3xs)' }} /> |
| 2xs | 8px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--2xs)' }} /> |
| xs | 12px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--xs)' }} /> |
| sm | 16px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--sm)' }} /> |
| md | 20px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--md)' }} /> |
| lg | 24px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--lg)' }} /> |
| xl | 32px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--xl)' }} /> |
| 2xl | 48px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--2xl)' }} /> |
| 3xl | 64px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--3xl)' }} /> |
| 4xl | 128px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--4xl)' }} /> |
| 5xl | 256px | <span class="spacing-size spacing" style={{ width: 'var(--spacing--5xl)' }} /> |
## Height
| Name | Size (px) | Visualization |
| ---- | --------- | ----------------------------------------------------------------------------- |
| 5xs | 8px | <span class="spacing-size height" style={{ height: 'var(--height--5xs)' }} /> |
| 4xs | 12px | <span class="spacing-size height" style={{ height: 'var(--height--4xs)' }} /> |
| 3xs | 16px | <span class="spacing-size height" style={{ height: 'var(--height--3xs)' }} /> |
| 2xs | 20px | <span class="spacing-size height" style={{ height: 'var(--height--2xs)' }} /> |
| xs | 24px | <span class="spacing-size height" style={{ height: 'var(--height--xs)' }} /> |
| sm | 28px | <span class="spacing-size height" style={{ height: 'var(--height--sm)' }} /> |
| md | 32px | <span class="spacing-size height" style={{ height: 'var(--height--md)' }} /> |
| lg | 36px | <span class="spacing-size height" style={{ height: 'var(--height--lg)' }} /> |
| xl | 40px | <span class="spacing-size height" style={{ height: 'var(--height--xl)' }} /> |
| 2xl | 48px | <span class="spacing-size height" style={{ height: 'var(--height--2xl)' }} /> |
| 3xl | 56px | <span class="spacing-size height" style={{ height: 'var(--height--3xl)' }} /> |
| 4xl | 64px | <span class="spacing-size height" style={{ height: 'var(--height--4xl)' }} /> |
| 5xl | 96px | <span class="spacing-size height" style={{ height: 'var(--height--5xl)' }} /> |
### Negative Values
To get negative values, use the `calc()` function like so:
```css
.box {
margin-inline: calc(var(--spacing--xs) * -1); /* -12px */
}
```
<style>
{`
.spacing-size {
display: inline-block;
margin:var(--spacing--4xs);
background: var(--color--mint-500);
border-radius: var(--radius--4xs);
}
.spacing-size.height {
aspect-ratio:1/1;
min-width: 2px;
}
.spacing-size.spacing {
min-width: 2px;
height:var(--spacing--xs);
}
`}
</style>

21
packages/frontend/@n8n/design-system/src/styleguide/spacing.stories.ts
View File

@ -1,21 +0,0 @@
import { type StoryFn } from '@storybook/vue3-vite';
import Sizes from './Sizes.vue';
export default {
title: 'Styleguide/Spacing',
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
},
},
};
export const Spacing: StoryFn = () => ({
components: {
Sizes,
},
template:
"<sizes :variables=\"['--spacing--5xs','--spacing--4xs','--spacing--3xs','--spacing--2xs','--spacing--xs','--spacing--sm','--spacing--md','--spacing--lg','--spacing--xl','--spacing--2xl','--spacing--3xl','--spacing--4xl','--spacing--5xl']\" />",
});

91
packages/frontend/@n8n/design-system/src/styleguide/type.mdx Normal file
View File

@ -0,0 +1,91 @@
import { Meta, Typeset } from '@storybook/addon-docs/blocks';
<Meta title="Styleguide/Type" />
export const typography = {
type: {
primary: 'InterVariable, sans-serif',
monospace: "CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace",
},
weight: {
regular: '400',
medium: '500',
bold: '600',
},
size: {
s1: 8,
s2: 10,
s3: 12,
s4: 13,
s5: 14,
m1: 16,
m2: 18,
m3: 20,
l1: 28,
},
};
export const SampleText = 'The quick brown fox jumps over the lazy dog.';
# Type
**Font:** InterVariable
**Weights:** 400 (regular), 500 (medium), 600 (bold)
<Typeset
fontSizes={[
typography.size.s1,
typography.size.s2,
typography.size.s3,
typography.size.s4,
typography.size.s5,
typography.size.m1,
typography.size.m2,
typography.size.m3,
typography.size.l1,
]}
fontWeight={typography.weight.bold}
sampleText={SampleText}
fontFamily={typography.type.primary}
/>
---
**Font:** CommitMono
**Weights:** 400 (regular), 600 (bold)
<Typeset
fontSizes={[
typography.size.s1,
typography.size.s2,
typography.size.s3,
typography.size.s4,
typography.size.s5,
typography.size.m1,
typography.size.m2,
typography.size.m3,
typography.size.l1,
]}
fontWeight={typography.weight.bold}
sampleText={SampleText}
fontFamily={typography.type.monospace}
/>
## Usage
When rendering text inside the app, use `<Heading />` or `<Text />` and stick to the style and size set.
Both of them share the same size and weight options.
| Step | Size | Letter spacing | Line height |
| ---- | ----------------------- | --------------------------------- | ------------------------ |
| 4xs | `var(--font-size--4xs)` | `var(--letter-spacing--wide)` | `var(--line-height--xs)` |
| 3xs | `var(--font-size--3xs)` | `var(--letter-spacing--normal)` | `var(--line-height--sm)` |
| 2xs | `var(--font-size--2xs)` | `var(--letter-spacing--normal)` | `var(--line-height--md)` |
| xs | `var(--font-size--xs)` | `var(--letter-spacing--normal)` | `var(--line-height--md)` |
| sm | `var(--font-size--sm)` | `var(--letter-spacing--normal)` | `var(--line-height--lg)` |
| md | `var(--font-size--md)` | `var(--letter-spacing--normal)` | `var(--line-height--lg)` |
| lg | `var(--font-size--lg)` | `var(--letter-spacing--tight)` | `var(--line-height--xl)` |
| xl | `var(--font-size--xl)` | `var(--letter-spacing--tighter)` | `var(--line-height--xl)` |
| 2xl | `var(--font-size--2xl)` | `var(--letter-spacing--tightest)` | `var(--line-height--xl)` |

46
packages/frontend/@n8n/design-system/src/styleguide/utilities/spacing.stories.ts
View File

@ -1,46 +0,0 @@
import type { StoryFn } from '@storybook/vue3-vite';
import SpacingPreview from '../components/SpacingPreview.vue';
export default {
title: 'Utilities/Spacing',
};
const Template: StoryFn = (args, { argTypes }) => ({
setup: () => ({ args }),
props: Object.keys(argTypes),
components: {
SpacingPreview,
},
template: '<spacing-preview v-bind="args" />',
});
export const Padding = Template.bind({});
Padding.args = { property: 'padding' };
export const PaddingTop = Template.bind({});
PaddingTop.args = { property: 'padding', side: 'top' };
export const PaddingRight = Template.bind({});
PaddingRight.args = { property: 'padding', side: 'right' };
export const PaddingBottom = Template.bind({});
PaddingBottom.args = { property: 'padding', side: 'bottom' };
export const PaddingLeft = Template.bind({});
PaddingLeft.args = { property: 'padding', side: 'left' };
export const Margin = Template.bind({});
Margin.args = { property: 'margin' };
export const MarginTop = Template.bind({});
MarginTop.args = { property: 'margin', side: 'top' };
export const MarginRight = Template.bind({});
MarginRight.args = { property: 'margin', side: 'right' };
export const MarginBottom = Template.bind({});
MarginBottom.args = { property: 'margin', side: 'bottom' };
export const MarginLeft = Template.bind({});
MarginLeft.args = { property: 'margin', side: 'left' };

3
packages/frontend/@n8n/design-system/src/types/text.ts
View File

@ -1,6 +1,9 @@
const TEXT_SIZE = ['xsmall', 'small', 'mini', 'medium', 'large', 'xlarge'] as const;
export type TextSize = (typeof TEXT_SIZE)[number];
const TEXT_STEP = ['4xs', '3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const;
export type TextStep = (typeof TEXT_STEP)[number];
const TEXT_COLOR = [
'primary',
'secondary',

14
packages/frontend/@n8n/storybook/.storybook/main.ts
View File

@ -1,6 +1,7 @@
import type { StorybookConfig } from '@storybook/vue3-vite';
import { dirname } from 'path';
import remarkGfm from 'remark-gfm';
import { fileURLToPath } from 'url';
@ -16,13 +17,24 @@ const config: StorybookConfig = {
'../../design-system/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
'../../chat/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
'../../../editor-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
'../../design-system/src/**/*.mdx',
],
addons: [
getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-vitest'),
getAbsolutePath('@storybook/addon-a11y'),
getAbsolutePath('@storybook/addon-docs'),
{
name: getAbsolutePath('@storybook/addon-docs'),
options: {
mdxPluginOptions: {
mdxCompileOptions: {
remarkPlugins: [remarkGfm],
},
},
},
},
getAbsolutePath('@storybook/addon-themes'),
getAbsolutePath('storybook-addon-vue-mdx'),
],
framework: getAbsolutePath('@storybook/vue3-vite'),
staticDirs: ['../../design-system/assets'],

1
packages/frontend/@n8n/storybook/.storybook/preview.ts
View File

@ -79,7 +79,6 @@ export const parameters = {
order: [
'Docs',
'Styleguide',
['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'],
'Core',
'Assistant',
'Chat',

18
packages/frontend/@n8n/storybook/.storybook/storybook.scss
View File

@ -20,3 +20,21 @@ body {
display: flex;
gap: 1rem;
}
.sbdocs .sbdocs-content table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size--2xs);
margin-block: var(--spacing--2xl);
}
.sbdocs .sbdocs-content th,
.sbdocs .sbdocs-content td {
padding: var(--spacing--2xs) var(--spacing--xs);
text-align: left;
border-bottom: 1px solid var(--color--neutral-300);
}
.sbdocs .sbdocs-content th {
font-weight: var(--font-weight--bold);
}

2
packages/frontend/@n8n/storybook/package.json
View File

@ -28,6 +28,7 @@
"@storybook/addon-themes": "catalog:storybook",
"@storybook/addon-vitest": "catalog:storybook",
"@storybook/vue3-vite": "catalog:storybook",
"storybook-addon-vue-mdx": "3.0.0",
"@types/node": "^24.10.1",
"@vitejs/plugin-vue": "catalog:frontend",
"@vitest/browser-playwright": "^4.0.16",
@ -40,6 +41,7 @@
"unplugin-icons": "catalog:frontend",
"vite": "catalog:",
"vite-svg-loader": "catalog:frontend",
"remark-gfm": "^4.0.1",
"vitest": "catalog:",
"vue-tsc": "catalog:frontend"
},

136
packages/frontend/AGENTS.md
View File

@ -1,133 +1,15 @@
# AGENTS.md
Extra information, specific to the frontend codebase.
Extra information, specific to the frontend codebase. Use this when doing any frontend work.
### Style Review Rules
For CSS/SCSS/Vue style changes and updates touching `@n8n/design-system`,
follow `.agents/design-system-style-rules.md`.
### CSS Variables Reference
Use the following CSS variables to maintain consistency across the
application. These variables cover colors, spacing, typography, and borders.
#### Colors
```css
/* Primary Colors */
--color--primary--shade-1
--color--primary
--color--primary--tint-1
--color--primary--tint-2
--color--primary--tint-3
/* Secondary Colors */
--color--secondary--shade-1
--color--secondary
--color--secondary--tint-1
--color--secondary--tint-2
/* Success Colors */
--color--success--shade-1
--color--success
--color--success--tint-1
--color--success--tint-2
--color--success--tint-3
--color--success--tint-4
/* Warning Colors */
--color--warning--shade-1
--color--warning
--color--warning--tint-1
--color--warning--tint-2
/* Danger Colors */
--color--danger--shade-1
--color--danger
--color--danger--tint-3
--color--danger--tint-4
/* Text Colors */
--color--text--shade-1
--color--text
--color--text--tint-1
--color--text--tint-2
--color--text--tint-3
--color--text--danger
/* Foreground Colors */
--color--foreground--shade-2
--color--foreground--shade-1
--color--foreground
--color--foreground--tint-1
--color--foreground--tint-2
/* Background Colors */
--color--background--shade-2
--color--background--shade-1
--color--background
--color--background--light-2
--color--background--light-3
```
#### Spacing
```css
--spacing--5xs: 2px
--spacing--4xs: 4px
--spacing--3xs: 6px
--spacing--2xs: 8px
--spacing--xs: 12px
--spacing--sm: 16px
--spacing--md: 20px
--spacing--lg: 24px
--spacing--xl: 32px
--spacing--2xl: 48px
--spacing--3xl: 64px
--spacing--4xl: 128px
--spacing--5xl: 256px
```
#### Typography
```css
--font-size--3xs: 10px
--font-size--2xs: 12px
--font-size--xs: 13px
--font-size--sm: 14px
--font-size--md: 16px
--font-size--lg: 18px
--font-size--xl: 20px
--font-size--2xl: 28px
--line-height--sm: 1.25
--line-height--md: 1.3
--line-height--lg: 1.35
--line-height--xl: 1.5
--font-weight--regular: 400
--font-weight--bold: 600
--font-family: InterVariable, sans-serif
```
#### Borders
```css
--radius--sm: 2px
--radius: 4px
--radius--lg: 8px
--radius--xl: 12px
--border-width: 1px
--border-style: solid
--border: var(--border-width) var(--border-style) var(--color--foreground)
```
### Icons (N8nIcon)
Available icon names are in `packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts`.
Use keys from `updatedIconSet` only — `deprecatedIconSet` entries must not be used in new code.
### Debounce Timing
Use centralized constants from `@/app/constants/durations` instead of hardcoding:
- When reviewing CSS/SCSS/Vue changes in `@n8n/design-system` or `editor-ui`, always use `design-system-rules` skill.
- ALWAYS follow the guides in `@n8n/design-system/src/styleguide/*.mdx`
- PREFER using **semantic tokens** for styling from `@n8n/design-system/src/css/_tokens.scss` or `@n8n/design-system/src/css/_primitives.scss`.
- AVOID using legacy tokens from `@n8n/design-system/src/css/_tokens.legacy.scss`
- PREFER using existing components from `@n8n/design-system` over creating new ones
- Available icon names are in `packages/frontend/@n8n/design-system/src/components/N8nIcon/icons.ts`.
Use keys from `updatedIconSet` only — `deprecatedIconSet` entries must not be used in new code.
- Use centralized constants from `@/app/constants/durations` instead of hardcoding:
```typescript
import { DEBOUNCE_TIME, getDebounceTime } from '@/app/constants';

8
packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue
View File

@ -186,7 +186,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
height: 101px;
align-items: stretch;
justify-content: space-evenly;
border: var(--border-width) var(--border-style) var(--color--foreground);
border: var(--border);
border-radius: 6px;
list-style: none;
overflow-x: auto;
@ -196,7 +196,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
justify-content: stretch;
align-items: stretch;
flex: 1 0;
border-left: var(--border-width) var(--border-style) var(--color--foreground);
border-left: var(--border);
&:first-child {
border-left: 0;
@ -216,11 +216,11 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
width: 100%;
height: 100%;
padding: var(--spacing--3xs) var(--spacing--lg) 0;
background-color: var(--background--surface);
border-bottom: 3px solid transparent;
&:hover {
background-color: var(--color--background--light-3);
transition: background-color 0.3s;
background-color: var(--background-hover);
}
&.activeTab {

1
packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsViewV2.vue
View File

@ -906,6 +906,7 @@ onBeforeUnmount(() => {
.column {
min-width: 0;
background-color: var(--ndv--background--color);
+ .column {
border-left: var(--border);

613
pnpm-lock.yaml
View File

@ -3556,9 +3556,15 @@ importers:
playwright:
specifier: catalog:e2e
version: 1.58.0
remark-gfm:
specifier: ^4.0.1
version: 4.0.1
storybook:
specifier: catalog:storybook
version: 10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10)
storybook-addon-vue-mdx:
specifier: 3.0.0
version: 3.0.0(@storybook/addon-docs@10.1.11(@types/react@18.0.27)(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(@storybook/builder-vite@10.1.11(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vue@3.5.26(typescript@6.0.2))
typescript:
specifier: 6.0.2
version: 6.0.2
@ -11387,6 +11393,9 @@ packages:
'@types/md5@2.3.5':
resolution: {integrity: sha512-/i42wjYNgE6wf0j2bcTX6kuowmdL/6PE4IVitMpm2eYKBUuYCprdcWVK+xEF0gcV6ufMCRhtxmReGfc6hIK7Jw==}
'@types/mdast@4.0.4':
resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
'@types/mdurl@1.0.5':
resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
@ -11585,6 +11594,9 @@ packages:
'@types/turndown@5.0.6':
resolution: {integrity: sha512-ru00MoyeeouE5BX4gRL+6m/BsDfbRayOskWqUvh7CLGW+UXxHQItqALa38kKnOiZPqJrtzJUgAC2+F0rL1S4Pg==}
'@types/unist@3.0.3':
resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
'@types/utf8@3.0.3':
resolution: {integrity: sha512-+lqLGxWZsEe4Z6OrzBI7Ym4SMUTaMS5yOrHZ0/IL0bpIye1Qbs4PpobJL2mLDbftUXlPFZR7fu6d1yM+bHLX1w==}
@ -12690,6 +12702,9 @@ packages:
resolution: {integrity: sha512-GAwkz0AihzY5bkwIY5QDR+LvsRQgB/B+1foMPvi0FZPMl5fjD7ICiznUiBdLYMH1QYe6vqu4gWYytZOccLouFw==}
engines: {node: '>= 10.0.0'}
bail@2.0.2:
resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@ -13051,6 +13066,9 @@ packages:
capital-case@1.0.4:
resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
ccount@2.0.1:
resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
chai@5.2.0:
resolution: {integrity: sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==}
engines: {node: '>=12'}
@ -13084,6 +13102,9 @@ packages:
char-spinner@1.0.1:
resolution: {integrity: sha512-acv43vqJ0+N0rD+Uw3pDHSxP30FHrywu2NO6/wBaHChJIizpDeBUd6NjqhNhy9LGaEAhZAXn46QzmlAvIWd16g==}
character-entities@2.0.2:
resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
character-parser@2.2.0:
resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==}
@ -13907,6 +13928,9 @@ packages:
decko@1.2.0:
resolution: {integrity: sha512-m8FnyHXV1QX+S1cl+KPFDIl6NMkxtKsy6+U/aYyjrOqWMuwAwYWu7ePqrsUHtDR5Y8Yk2pi/KIDSgF+vT4cPOQ==}
decode-named-character-reference@1.3.0:
resolution: {integrity: sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==}
decompress-response@6.0.0:
resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
engines: {node: '>=10'}
@ -14087,6 +14111,9 @@ packages:
peerDependencies:
typescript: 6.0.2
devlop@1.1.0:
resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
devtools-protocol@0.0.1595872:
resolution: {integrity: sha512-kRfgp8vWVjBu/fbYCiVFiOqsCk3CrMKEo3WbgGT2NXK2dG7vawWPBljixajVgGK9II8rDO9G0oD0zLt3I1daRg==}
@ -17134,6 +17161,9 @@ packages:
long@5.3.2:
resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
longest-streak@3.1.0:
resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
loose-envify@1.4.0:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true
@ -17316,6 +17346,39 @@ packages:
md5@2.3.0:
resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
mdast-util-find-and-replace@3.0.2:
resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
mdast-util-from-markdown@2.0.3:
resolution: {integrity: sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==}
mdast-util-gfm-autolink-literal@2.0.1:
resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
mdast-util-gfm-footnote@2.1.0:
resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
mdast-util-gfm-strikethrough@2.0.0:
resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
mdast-util-gfm-table@2.0.0:
resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
mdast-util-gfm-task-list-item@2.0.0:
resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
mdast-util-gfm@3.1.0:
resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
mdast-util-phrasing@4.1.0:
resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
mdast-util-to-markdown@2.1.2:
resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
mdast-util-to-string@4.0.0:
resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
mdn-data@2.0.28:
resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
@ -17374,6 +17437,90 @@ packages:
resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
engines: {node: '>= 0.6'}
micromark-core-commonmark@2.0.3:
resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
micromark-extension-gfm-autolink-literal@2.1.0:
resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
micromark-extension-gfm-footnote@2.1.0:
resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
micromark-extension-gfm-strikethrough@2.1.0:
resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
micromark-extension-gfm-table@2.1.1:
resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
micromark-extension-gfm-tagfilter@2.0.0:
resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
micromark-extension-gfm-task-list-item@2.1.0:
resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
micromark-extension-gfm@3.0.0:
resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
micromark-factory-destination@2.0.1:
resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
micromark-factory-label@2.0.1:
resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
micromark-factory-space@2.0.1:
resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
micromark-factory-title@2.0.1:
resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
micromark-factory-whitespace@2.0.1:
resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
micromark-util-character@2.1.1:
resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
micromark-util-chunked@2.0.1:
resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
micromark-util-classify-character@2.0.1:
resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
micromark-util-combine-extensions@2.0.1:
resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
micromark-util-decode-numeric-character-reference@2.0.2:
resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
micromark-util-decode-string@2.0.1:
resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
micromark-util-encode@2.0.1:
resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
micromark-util-html-tag-name@2.0.1:
resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
micromark-util-normalize-identifier@2.0.1:
resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
micromark-util-resolve-all@2.0.1:
resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
micromark-util-sanitize-uri@2.0.1:
resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
micromark-util-subtokenize@2.1.0:
resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
micromark-util-symbol@2.0.1:
resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
micromark-util-types@2.0.2:
resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
micromark@4.0.2:
resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
micromatch@4.0.8:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'}
@ -19485,6 +19632,15 @@ packages:
resolution: {integrity: sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==}
engines: {node: '>=4'}
remark-gfm@4.0.1:
resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
remark-parse@11.0.0:
resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
remark-stringify@11.0.0:
resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
remove-trailing-slash@0.1.1:
resolution: {integrity: sha512-o4S4Qh6L2jpnCy83ysZDau+VORNvnFw07CKSAymkd6ICNVEPisMyzlc00KlvvicsxKck94SEwhDnMNdICzO+tA==}
@ -20316,6 +20472,17 @@ packages:
resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
engines: {node: '>= 0.4'}
storybook-addon-vue-mdx@3.0.0:
resolution: {integrity: sha512-iP+IPhaYpkGgL97a8G/Cs/+rSsN4XQhBWe/yQduyzW0vDNTrXyxYFhXjzrviMVYtCm9HtGbLlLV79Ka8wQ7yRw==}
engines: {node: '>=20.19'}
peerDependencies:
'@storybook/addon-docs': ^10.0.0
'@storybook/builder-vite': ^10.0.0
react: '>= 16.4.0'
react-dom: '>= 16.4.0'
storybook: ^10.0.0
vue: ^3.4.31
storybook@10.1.11:
resolution: {integrity: sha512-pKP5jXJYM4OjvNklGuHKO53wOCAwfx79KvZyOWHoi9zXUH5WVMFUe/ZfWyxXG/GTcj0maRgHGUjq/0I43r0dDQ==}
hasBin: true
@ -20833,6 +21000,9 @@ packages:
triple-beam@1.3.0:
resolution: {integrity: sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==}
trough@2.2.0:
resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
truncate-utf8-bytes@1.0.2:
resolution: {integrity: sha512-95Pu1QXQvruGEhv62XCMO3Mm90GscOCClvrIUwCM0PYOXK3kaF3l3sIHxx71ThJfcbM2O5Au6SO3AWCSEfW4mQ==}
@ -21177,12 +21347,34 @@ packages:
resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
engines: {node: '>=18'}
unified@11.0.5:
resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
unique-filename@1.1.1:
resolution: {integrity: sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==}
unique-slug@2.0.2:
resolution: {integrity: sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==}
unique-slug@3.0.0:
resolution: {integrity: sha512-8EyMynh679x/0gqE9fT9oilG+qEt+ibFyqjuVTsZn1+CMxH+XLlpvr2UZx4nVcCwTpx81nICr2JQFkM+HPLq4w==}
engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
unique-slug@5.0.0:
resolution: {integrity: sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==}
engines: {node: ^18.17.0 || >=20.5.0}
unist-util-is@6.0.1:
resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
unist-util-stringify-position@4.0.0:
resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
unist-util-visit-parents@6.0.2:
resolution: {integrity: sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==}
unist-util-visit@5.1.0:
resolution: {integrity: sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==}
universal-user-agent@6.0.1:
resolution: {integrity: sha512-yCzhz6FN2wU1NiiQRogkTQszlQSlpWaw8SvVegAc+bDxbzHgh1vX8uIe8OYyMH6DwH+sdTJsgMl36+mSMdRJIQ==}
@ -21423,10 +21615,22 @@ packages:
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
engines: {node: '>= 0.8'}
veaury@2.6.3:
resolution: {integrity: sha512-hb4R1iAjaN0wlNdPJefF2E7z4JCXKzipaFIuWUarFism6OSnHdk74fMsj7uRe38/iSNGPiHPy0+x6H25uLUR4g==}
peerDependencies:
react: '>= 16.4.0'
react-dom: '>= 16.4.0'
verror@1.10.1:
resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
engines: {node: '>=0.6.0'}
vfile-message@4.0.3:
resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
vfile@6.0.3:
resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
vite-plugin-dts@4.5.3:
resolution: {integrity: sha512-P64VnD00dR+e8S26ESoFELqc17+w7pKkwlBpgXteOljFyT0zDwD8hH4zXp49M/kciy//7ZbVXIwQCekBJjfWzA==}
peerDependencies:
@ -22145,6 +22349,9 @@ packages:
zod@3.25.67:
resolution: {integrity: sha512-idA2YXwpCdqUSKRCACDE6ItZD9TZzy3OZMtpfLoh6oPR47lipysRrJfjzMqFxQ3uJuUPyUeWe1r9vLH33xO/Qw==}
zwitch@2.0.4:
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
zx@8.8.5:
resolution: {integrity: sha512-SNgDF5L0gfN7FwVOdEFguY3orU5AkfFZm9B5YSHog/UDHv+lvmd82ZAsOenOkQixigwH2+yyH198AwNdKhj+RA==}
engines: {node: '>= 12.17.0'}
@ -31691,6 +31898,10 @@ snapshots:
'@types/md5@2.3.5': {}
'@types/mdast@4.0.4':
dependencies:
'@types/unist': 3.0.3
'@types/mdurl@1.0.5': {}
'@types/mdx@2.0.3': {}
@ -31927,6 +32138,8 @@ snapshots:
'@types/turndown@5.0.6': {}
'@types/unist@3.0.3': {}
'@types/utf8@3.0.3': {}
'@types/uuencode@0.0.3(patch_hash=083a73709a54db57b092d986b43d27ddda3cb8008f9510e98bc9e6da0e1cbb62)':
@ -33365,6 +33578,8 @@ snapshots:
dependencies:
'@babel/types': 7.29.0
bail@2.0.2: {}
balanced-match@1.0.2: {}
balanced-match@2.0.0: {}
@ -33808,6 +34023,8 @@ snapshots:
tslib: 2.8.1
upper-case-first: 2.0.2
ccount@2.0.1: {}
chai@5.2.0:
dependencies:
assertion-error: 2.0.1
@ -33855,6 +34072,8 @@ snapshots:
char-spinner@1.0.1: {}
character-entities@2.0.2: {}
character-parser@2.2.0:
dependencies:
is-regex: 1.2.1
@ -34695,6 +34914,10 @@ snapshots:
decko@1.2.0: {}
decode-named-character-reference@1.3.0:
dependencies:
character-entities: 2.0.2
decompress-response@6.0.0:
dependencies:
mimic-response: 3.1.0
@ -34871,6 +35094,10 @@ snapshots:
transitivePeerDependencies:
- supports-color
devlop@1.1.0:
dependencies:
dequal: 2.0.3
devtools-protocol@0.0.1595872: {}
dezalgo@1.0.4:
@ -39020,6 +39247,8 @@ snapshots:
long@5.3.2: {}
longest-streak@3.1.0: {}
loose-envify@1.4.0:
dependencies:
js-tokens: 4.0.0
@ -39237,6 +39466,108 @@ snapshots:
crypt: 0.0.2
is-buffer: 1.1.6
mdast-util-find-and-replace@3.0.2:
dependencies:
'@types/mdast': 4.0.4
escape-string-regexp: 5.0.0
unist-util-is: 6.0.1
unist-util-visit-parents: 6.0.2
mdast-util-from-markdown@2.0.3:
dependencies:
'@types/mdast': 4.0.4
'@types/unist': 3.0.3
decode-named-character-reference: 1.3.0
devlop: 1.1.0
mdast-util-to-string: 4.0.0
micromark: 4.0.2
micromark-util-decode-numeric-character-reference: 2.0.2
micromark-util-decode-string: 2.0.1
micromark-util-normalize-identifier: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
unist-util-stringify-position: 4.0.0
transitivePeerDependencies:
- supports-color
mdast-util-gfm-autolink-literal@2.0.1:
dependencies:
'@types/mdast': 4.0.4
ccount: 2.0.1
devlop: 1.1.0
mdast-util-find-and-replace: 3.0.2
micromark-util-character: 2.1.1
mdast-util-gfm-footnote@2.1.0:
dependencies:
'@types/mdast': 4.0.4
devlop: 1.1.0
mdast-util-from-markdown: 2.0.3
mdast-util-to-markdown: 2.1.2
micromark-util-normalize-identifier: 2.0.1
transitivePeerDependencies:
- supports-color
mdast-util-gfm-strikethrough@2.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-from-markdown: 2.0.3
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-gfm-table@2.0.0:
dependencies:
'@types/mdast': 4.0.4
devlop: 1.1.0
markdown-table: 3.0.4
mdast-util-from-markdown: 2.0.3
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-gfm-task-list-item@2.0.0:
dependencies:
'@types/mdast': 4.0.4
devlop: 1.1.0
mdast-util-from-markdown: 2.0.3
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-gfm@3.1.0:
dependencies:
mdast-util-from-markdown: 2.0.3
mdast-util-gfm-autolink-literal: 2.0.1
mdast-util-gfm-footnote: 2.1.0
mdast-util-gfm-strikethrough: 2.0.0
mdast-util-gfm-table: 2.0.0
mdast-util-gfm-task-list-item: 2.0.0
mdast-util-to-markdown: 2.1.2
transitivePeerDependencies:
- supports-color
mdast-util-phrasing@4.1.0:
dependencies:
'@types/mdast': 4.0.4
unist-util-is: 6.0.1
mdast-util-to-markdown@2.1.2:
dependencies:
'@types/mdast': 4.0.4
'@types/unist': 3.0.3
longest-streak: 3.1.0
mdast-util-phrasing: 4.1.0
mdast-util-to-string: 4.0.0
micromark-util-classify-character: 2.0.1
micromark-util-decode-string: 2.0.1
unist-util-visit: 5.1.0
zwitch: 2.0.4
mdast-util-to-string@4.0.0:
dependencies:
'@types/mdast': 4.0.4
mdn-data@2.0.28: {}
mdn-data@2.0.30: {}
@ -39271,6 +39602,197 @@ snapshots:
methods@1.1.2: {}
micromark-core-commonmark@2.0.3:
dependencies:
decode-named-character-reference: 1.3.0
devlop: 1.1.0
micromark-factory-destination: 2.0.1
micromark-factory-label: 2.0.1
micromark-factory-space: 2.0.1
micromark-factory-title: 2.0.1
micromark-factory-whitespace: 2.0.1
micromark-util-character: 2.1.1
micromark-util-chunked: 2.0.1
micromark-util-classify-character: 2.0.1
micromark-util-html-tag-name: 2.0.1
micromark-util-normalize-identifier: 2.0.1
micromark-util-resolve-all: 2.0.1
micromark-util-subtokenize: 2.1.0
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-extension-gfm-autolink-literal@2.1.0:
dependencies:
micromark-util-character: 2.1.1
micromark-util-sanitize-uri: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-extension-gfm-footnote@2.1.0:
dependencies:
devlop: 1.1.0
micromark-core-commonmark: 2.0.3
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-normalize-identifier: 2.0.1
micromark-util-sanitize-uri: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-extension-gfm-strikethrough@2.1.0:
dependencies:
devlop: 1.1.0
micromark-util-chunked: 2.0.1
micromark-util-classify-character: 2.0.1
micromark-util-resolve-all: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-extension-gfm-table@2.1.1:
dependencies:
devlop: 1.1.0
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-extension-gfm-tagfilter@2.0.0:
dependencies:
micromark-util-types: 2.0.2
micromark-extension-gfm-task-list-item@2.1.0:
dependencies:
devlop: 1.1.0
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-extension-gfm@3.0.0:
dependencies:
micromark-extension-gfm-autolink-literal: 2.1.0
micromark-extension-gfm-footnote: 2.1.0
micromark-extension-gfm-strikethrough: 2.1.0
micromark-extension-gfm-table: 2.1.1
micromark-extension-gfm-tagfilter: 2.0.0
micromark-extension-gfm-task-list-item: 2.1.0
micromark-util-combine-extensions: 2.0.1
micromark-util-types: 2.0.2
micromark-factory-destination@2.0.1:
dependencies:
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-factory-label@2.0.1:
dependencies:
devlop: 1.1.0
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-factory-space@2.0.1:
dependencies:
micromark-util-character: 2.1.1
micromark-util-types: 2.0.2
micromark-factory-title@2.0.1:
dependencies:
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-factory-whitespace@2.0.1:
dependencies:
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-util-character@2.1.1:
dependencies:
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-util-chunked@2.0.1:
dependencies:
micromark-util-symbol: 2.0.1
micromark-util-classify-character@2.0.1:
dependencies:
micromark-util-character: 2.1.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-util-combine-extensions@2.0.1:
dependencies:
micromark-util-chunked: 2.0.1
micromark-util-types: 2.0.2
micromark-util-decode-numeric-character-reference@2.0.2:
dependencies:
micromark-util-symbol: 2.0.1
micromark-util-decode-string@2.0.1:
dependencies:
decode-named-character-reference: 1.3.0
micromark-util-character: 2.1.1
micromark-util-decode-numeric-character-reference: 2.0.2
micromark-util-symbol: 2.0.1
micromark-util-encode@2.0.1: {}
micromark-util-html-tag-name@2.0.1: {}
micromark-util-normalize-identifier@2.0.1:
dependencies:
micromark-util-symbol: 2.0.1
micromark-util-resolve-all@2.0.1:
dependencies:
micromark-util-types: 2.0.2
micromark-util-sanitize-uri@2.0.1:
dependencies:
micromark-util-character: 2.1.1
micromark-util-encode: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-subtokenize@2.1.0:
dependencies:
devlop: 1.1.0
micromark-util-chunked: 2.0.1
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
micromark-util-symbol@2.0.1: {}
micromark-util-types@2.0.2: {}
micromark@4.0.2:
dependencies:
'@types/debug': 4.1.12
debug: 4.4.3(supports-color@8.1.1)
decode-named-character-reference: 1.3.0
devlop: 1.1.0
micromark-core-commonmark: 2.0.3
micromark-factory-space: 2.0.1
micromark-util-character: 2.1.1
micromark-util-chunked: 2.0.1
micromark-util-combine-extensions: 2.0.1
micromark-util-decode-numeric-character-reference: 2.0.2
micromark-util-encode: 2.0.1
micromark-util-normalize-identifier: 2.0.1
micromark-util-resolve-all: 2.0.1
micromark-util-sanitize-uri: 2.0.1
micromark-util-subtokenize: 2.1.0
micromark-util-symbol: 2.0.1
micromark-util-types: 2.0.2
transitivePeerDependencies:
- supports-color
micromatch@4.0.8:
dependencies:
braces: 3.0.3
@ -41825,6 +42347,32 @@ snapshots:
dependencies:
es6-error: 4.1.1
remark-gfm@4.0.1:
dependencies:
'@types/mdast': 4.0.4
mdast-util-gfm: 3.1.0
micromark-extension-gfm: 3.0.0
remark-parse: 11.0.0
remark-stringify: 11.0.0
unified: 11.0.5
transitivePeerDependencies:
- supports-color
remark-parse@11.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-from-markdown: 2.0.3
micromark-util-types: 2.0.2
unified: 11.0.5
transitivePeerDependencies:
- supports-color
remark-stringify@11.0.0:
dependencies:
'@types/mdast': 4.0.4
mdast-util-to-markdown: 2.1.2
unified: 11.0.5
remove-trailing-slash@0.1.1: {}
replace-in-file@6.3.5:
@ -42840,6 +43388,16 @@ snapshots:
es-errors: 1.3.0
internal-slot: 1.1.0
storybook-addon-vue-mdx@3.0.0(@storybook/addon-docs@10.1.11(@types/react@18.0.27)(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(@storybook/builder-vite@10.1.11(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vue@3.5.26(typescript@6.0.2)):
dependencies:
'@storybook/addon-docs': 10.1.11(@types/react@18.0.27)(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3))
'@storybook/builder-vite': 10.1.11(esbuild@0.25.10)(rollup@4.52.4)(storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10))(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3))
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
storybook: 10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.6.2)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10)
veaury: 2.6.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
vue: 3.5.26(typescript@6.0.2)
storybook@10.1.11(@testing-library/dom@10.4.0)(bufferutil@4.0.9)(prettier@3.3.3)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(utf-8-validate@5.0.10):
dependencies:
'@storybook/global': 5.0.0
@ -43535,6 +44093,8 @@ snapshots:
triple-beam@1.3.0: {}
trough@2.2.0: {}
truncate-utf8-bytes@1.0.2:
dependencies:
utf8-byte-length: 1.0.5
@ -43887,6 +44447,16 @@ snapshots:
unicorn-magic@0.3.0: {}
unified@11.0.5:
dependencies:
'@types/unist': 3.0.3
bail: 2.0.2
devlop: 1.1.0
extend: 3.0.2
is-plain-obj: 4.1.0
trough: 2.2.0
vfile: 6.0.3
unique-filename@1.1.1:
dependencies:
unique-slug: 2.0.2
@ -43897,6 +44467,32 @@ snapshots:
imurmurhash: 0.1.4
optional: true
unique-slug@3.0.0:
dependencies:
imurmurhash: 0.1.4
unique-slug@5.0.0:
dependencies:
imurmurhash: 0.1.4
unist-util-is@6.0.1:
dependencies:
'@types/unist': 3.0.3
unist-util-stringify-position@4.0.0:
dependencies:
'@types/unist': 3.0.3
unist-util-visit-parents@6.0.2:
dependencies:
'@types/unist': 3.0.3
unist-util-is: 6.0.1
unist-util-visit@5.1.0:
dependencies:
'@types/unist': 3.0.3
unist-util-is: 6.0.1
unist-util-visit-parents: 6.0.2
universal-user-agent@6.0.1: {}
universalify@0.1.2: {}
@ -44145,6 +44741,11 @@ snapshots:
vary@1.1.2: {}
veaury@2.6.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0):
dependencies:
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
verror@1.10.1:
dependencies:
assert-plus: 1.0.0
@ -44152,6 +44753,16 @@ snapshots:
extsprintf: 1.4.1
optional: true
vfile-message@4.0.3:
dependencies:
'@types/unist': 3.0.3
unist-util-stringify-position: 4.0.0
vfile@6.0.3:
dependencies:
'@types/unist': 3.0.3
vfile-message: 4.0.3
vite-plugin-dts@4.5.3(@types/node@20.19.21)(rollup@4.52.4)(typescript@6.0.2)(vite@8.0.2(@types/node@20.19.21)(esbuild@0.25.10)(jiti@2.6.1)(sass-embedded@1.98.0)(sass@1.98.0)(terser@5.16.1)(tsx@4.19.3)(yaml@2.8.3)):
dependencies:
'@microsoft/api-extractor': 7.52.1(@types/node@20.19.21)
@ -44962,4 +45573,6 @@ snapshots:
zod@3.25.67: {}
zwitch@2.0.4: {}
zx@8.8.5: {}