@n8n/design-system 2.34.2 → 2.35.0

package/src/styleguide/spacing-size.mdx

@@ -1,78 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Style guide/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>

package/src/styleguide/type.mdx

@@ -1,91 +0,0 @@
-import { Meta, Typeset } from '@storybook/addon-docs/blocks';
-
-<Meta title="Style guide/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)` |

package/src/v2/components/Tree/Tree.variables.module.css

@@ -1,7 +0,0 @@
-.root {
-	--tree-item-height: var(--spacing--xl);
-	--tree-icon-size: var(--spacing--lg);
-	--tree-item-padding-block: var(--spacing--4xs);
-	--tree-item-padding-inline: var(--tree-item-padding-block);
-	--tree-indent-unit: calc(var(--tree-item-padding-inline) + var(--tree-icon-size));
-}

package/stylelint.config.mjs

@@ -1,9 +0,0 @@
-import { baseConfig } from '@n8n/stylelint-config/base';
-
-export default {
-	...baseConfig,
-	rules: {
-		...baseConfig.rules,
-		'@n8n/css-var-naming': [true, { severity: 'error' }],
-	},
-};

package/tailwind.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-	content: ['./src/**/*.{vue,js,ts}'],
-	darkMode: ['selector', '[data-theme="dark"]'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-};

package/tsconfig.build.json

@@ -1,27 +0,0 @@
-{
-	"extends": "@n8n/typescript-config/tsconfig.frontend.json",
-	"compilerOptions": {
-		"noEmit": false,
-		"declaration": true,
-		"emitDeclarationOnly": true,
-		"outDir": "dist",
-		"rootDir": "src",
-		"moduleResolution": "bundler",
-		"noUnusedLocals": false,
-		"noUnusedParameters": false,
-		"types": ["vite/client", "unplugin-icons/types/vue", "vue-router"],
-		"paths": {
-			"@n8n/design-system*": ["./src*"]
-		}
-	},
-	"include": ["src/**/*.ts", "src/**/*.vue"],
-	"exclude": [
-		"src/**/*.test.ts",
-		"src/**/*.spec.ts",
-		"src/**/*.stories.*",
-		"src/**/__tests__/**",
-		"src/styleguide/**",
-		"src/icons/lucide/vite.ts",
-		"src/components/N8nBreadcrumbs/AsyncLoadingCacheDemo.vue"
-	]
-}

package/tsconfig.json

@@ -1,16 +0,0 @@
-{
-	"extends": "@n8n/typescript-config/tsconfig.frontend.json",
-	"compilerOptions": {
-		"rootDirs": [".", "../composables/src"],
-		"noEmit": true,
-		"moduleResolution": "bundler",
-		"types": ["vite/client", "unplugin-icons/types/vue", "vitest/globals"],
-		"paths": {
-			"@n8n/design-system*": ["./src*"],
-			"@n8n/composables*": ["../composables/src*"],
-			"@n8n/frontend-utils*": ["../frontend-utils/src*"],
-			"@n8n/utils*": ["../../../@n8n/utils/src*"]
-		}
-	},
-	"include": ["src/**/*.ts", "src/**/*.vue"]
-}