diff --git a/.gitignore b/.gitignore index 97903e13b6..b4b25b34f4 100644 --- a/.gitignore +++ b/.gitignore @@ -18,6 +18,7 @@ nodelinter.config.json packages/**/.turbo .turbo *.tsbuildinfo +.stylelintcache *.swp CHANGELOG-*.md *.mdx diff --git a/lefthook.yml b/lefthook.yml index b6aac6e069..055ea2d47a 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -14,3 +14,9 @@ pre-commit: skip: - merge - rebase + styles_check: + glob: 'packages/**/*.{scss,sass,vue}' + run: pnpm lint:styles:fix + skip: + - merge + - rebase diff --git a/package.json b/package.json index da4ed3ab4e..88c7b1bc39 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ "format": "turbo run format && node scripts/format.mjs", "format:check": "turbo run format:check", "lint": "turbo run lint", + "lint:styles": "turbo run lint:styles", + "lint:styles:fix": "turbo run lint:styles:fix", "lint:affected": "turbo run lint --affected", "lint:fix": "turbo run lint:fix", "optimize-svg": "find ./packages -name '*.svg' ! -name 'pipedrive.svg' -print0 | xargs -0 -P16 -L20 npx svgo", diff --git a/packages/@n8n/stylelint-config/package.json b/packages/@n8n/stylelint-config/package.json new file mode 100644 index 0000000000..b4a7bac620 --- /dev/null +++ b/packages/@n8n/stylelint-config/package.json @@ -0,0 +1,36 @@ +{ + "private": true, + "name": "@n8n/stylelint-config", + "type": "module", + "version": "0.0.1", + "exports": { + "./base": { + "default": "./dist/configs/base.js", + "types": "./dist/configs/base.d.ts" + } + }, + "scripts": { + "build": "tsc", + "clean": "rimraf dist .turbo", + "dev": "pnpm watch", + "format": "biome format --write .", + "format:check": "biome ci .", + "typecheck": "tsc --noEmit", + "watch": "tsc --watch" + }, + "dependencies": { + "stylelint": "^16.23.0", + "stylelint-config-standard-scss": "^15.0.1", + "stylelint-scss": "^6.12.1", + "postcss-html": "^1.8.0", + "postcss-scss": "^4.0.9" + }, + "devDependencies": { + "@n8n/typescript-config": "workspace:*", + "typescript": "catalog:", + "rimraf": "catalog:" + }, + "peerDependencies": { + "stylelint": ">= 16" + } +} \ No newline at end of file diff --git a/packages/@n8n/stylelint-config/src/configs/base.ts b/packages/@n8n/stylelint-config/src/configs/base.ts new file mode 100644 index 0000000000..00f4f5a503 --- /dev/null +++ b/packages/@n8n/stylelint-config/src/configs/base.ts @@ -0,0 +1,93 @@ +import type { Config } from 'stylelint'; + +export const baseConfig: Config = { + // TODO: Extending with standard config requires a lot of manual fixes but would be great to have + // extends: 'stylelint-config-standard-scss', + // Basic SCSS support with essential rules + plugins: ['stylelint-scss'], + rules: { + 'no-empty-source': true, + + // Basic syntax and consistency rules + 'color-hex-length': 'short', + 'comment-no-empty': true, + // 'declaration-block-no-duplicate-properties': disabled due to vendor prefixes + 'no-duplicate-selectors': true, + 'no-invalid-double-slash-comments': true, + + // Quality rules (keep only the working ones) + 'length-zero-no-unit': true, + // 'no-descending-specificity': disabled - too many existing issues (would require major refactoring) but this would be a must have + 'no-duplicate-at-import-rules': true, + 'shorthand-property-no-redundant-values': true, + // 'declaration-block-no-shorthand-property-overrides': disabled - conflicts with intentional CSS patterns + 'at-rule-no-unknown': [ + true, + { + ignoreAtRules: [ + 'tailwind', + 'apply', + 'variants', + 'responsive', + 'screen', + 'use', + 'forward', + 'include', + 'mixin', + 'function', + 'return', + 'if', + 'else', + 'for', + 'each', + 'while', + 'extend', + 'at-root', + 'warn', + 'error', + ], + }, + ], + 'at-rule-disallowed-list': [ + ['import'], + { + message: + '@import is deprecated! Use @use for local SCSS files. For third-party libraries that need scoping: use @use "sass:meta"; and @include meta.load-css("library") inside a CSS selector.', + }, + ], + + // SCSS specific rules + 'scss/dollar-variable-colon-space-after': 'always-single-line', + 'scss/dollar-variable-colon-space-before': 'never', + 'scss/dollar-variable-no-missing-interpolation': true, + 'scss/double-slash-comment-whitespace-inside': 'always', + 'scss/operator-no-unspaced': true, + 'scss/property-no-unknown': [ + true, + { + ignoreProperties: ['composes'], + }, + ], + 'scss/at-import-partial-extension-disallowed-list': ['scss'], + // 'scss/selector-no-redundant-nesting-selector': disabled - would require manual fixes across many files + }, + ignoreFiles: [ + '**/node_modules/**/*', + '**/dist/**/*', + '**/build/**/*', + '**/.turbo/**/*', + '**/coverage/**/*', + ], + overrides: [ + { + files: ['**/*.vue'], + customSyntax: 'postcss-html', + }, + { + files: ['**/*.scss', '**/*.sass'], + customSyntax: 'postcss-scss', + }, + ], +}; + +export default baseConfig; diff --git a/packages/@n8n/stylelint-config/tsconfig.json b/packages/@n8n/stylelint-config/tsconfig.json new file mode 100644 index 0000000000..3814c458ed --- /dev/null +++ b/packages/@n8n/stylelint-config/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ES2015", + "module": "ESNext", + "moduleResolution": "node", + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": false, + "outDir": "dist", + "rootDir": "src", + "declaration": true, + "declarationMap": true, + "downlevelIteration": true, + "skipLibCheck": true + }, + "include": ["src/**/*"], + "exclude": ["dist", "node_modules", "**/*.test.ts"] +} diff --git a/packages/extensions/insights/package.json b/packages/extensions/insights/package.json index 73c332561c..3f33bc2c42 100644 --- a/packages/extensions/insights/package.json +++ b/packages/extensions/insights/package.json @@ -31,6 +31,9 @@ "cleanup": "rimraf dist", "dev": "vite", "lint": "eslint src --quiet", + "lint:fix": "eslint src --fix", + "lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache", + "lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache", "typecheck": "vue-tsc --noEmit", "build:backend": "tsup", "build:frontend": "vite build", @@ -45,6 +48,7 @@ "@n8n/extension-sdk": "workspace:*" }, "devDependencies": { + "@n8n/stylelint-config": "workspace:*", "@n8n/typescript-config": "workspace:*", "@vitejs/plugin-vue": "catalog:frontend", "@vue/tsconfig": "catalog:frontend", diff --git a/packages/extensions/insights/stylelint.config.mjs b/packages/extensions/insights/stylelint.config.mjs new file mode 100644 index 0000000000..a86e148c67 --- /dev/null +++ b/packages/extensions/insights/stylelint.config.mjs @@ -0,0 +1,3 @@ +import { baseConfig } from '@n8n/stylelint-config/base'; + +export default baseConfig; diff --git a/packages/frontend/@n8n/chat/package.json b/packages/frontend/@n8n/chat/package.json index 021300bac5..1b48d36a53 100644 --- a/packages/frontend/@n8n/chat/package.json +++ b/packages/frontend/@n8n/chat/package.json @@ -12,6 +12,8 @@ "typecheck": "vue-tsc --noEmit", "lint": "eslint src --quiet", "lint:fix": "eslint src --fix", + "lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache", + "lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache", "format": "biome format --write src .storybook && prettier --write src/ --ignore-path ../../../../.prettierignore", "format:check": "biome ci src .storybook && prettier --check src/ --ignore-path ../../../../.prettierignore", "storybook": "storybook dev -p 6006 --no-open", @@ -48,6 +50,7 @@ "@iconify-json/mdi": "^1.1.54", "@n8n/storybook": "workspace:*", "@n8n/eslint-config": "workspace:*", + "@n8n/stylelint-config": "workspace:*", "@n8n/typescript-config": "workspace:*", "@n8n/vitest-config": "workspace:*", "@vitejs/plugin-vue": "catalog:frontend", diff --git a/packages/frontend/@n8n/chat/src/css/_tokens.scss b/packages/frontend/@n8n/chat/src/css/_tokens.scss index d5357ee863..330bab7438 100644 --- a/packages/frontend/@n8n/chat/src/css/_tokens.scss +++ b/packages/frontend/@n8n/chat/src/css/_tokens.scss @@ -5,7 +5,7 @@ --chat--color-primary-shade-100: #cf3c5c; --chat--color-secondary: #20b69e; --chat--color-secondary-shade-50: #1ca08a; - --chat--color-white: #ffffff; + --chat--color-white: #fff; --chat--color-light: #f2f4f8; --chat--color-light-shade-50: #e6e9f1; --chat--color-light-shade-100: #c2c5cc; diff --git a/packages/frontend/@n8n/chat/src/css/index.scss b/packages/frontend/@n8n/chat/src/css/index.scss index 8b293c5f5e..ebec87ccf4 100644 --- a/packages/frontend/@n8n/chat/src/css/index.scss +++ b/packages/frontend/@n8n/chat/src/css/index.scss @@ -1,2 +1,2 @@ -@import 'tokens'; -@import 'markdown'; +@use 'tokens'; +@use 'markdown'; diff --git a/packages/frontend/@n8n/chat/src/css/markdown.scss b/packages/frontend/@n8n/chat/src/css/markdown.scss index c30707065c..f8b980c536 100644 --- a/packages/frontend/@n8n/chat/src/css/markdown.scss +++ b/packages/frontend/@n8n/chat/src/css/markdown.scss @@ -155,6 +155,7 @@ body { */ small { font-size: 80%; + opacity: 0.8; /* or some other way of differentiating it from body text */ } /* @@ -389,6 +390,8 @@ body { max-width: 36rem; min-height: 100%; overflow-x: hidden; + background: var(--background-main); + color: var(--text-main); } /* ----- Typography ----- */ @@ -479,13 +482,9 @@ body { font-size: 0.9em; } - small { - font-size: 1em; - opacity: 0.8; /* or some other way of differentiating it from body text */ - } - mark { background: pink; /* change to proper color, based on theme */ + padding: 0.1em 0.15em; } /* @@ -508,7 +507,7 @@ body { blockquote { border-left: 0.3rem solid #7a283a; border-left: 0.3rem solid var(--theme); - margin: 0.6rem 0 1.2rem 0; + margin: 0.6rem 0 1.2rem; padding-left: 2rem; } @@ -522,13 +521,6 @@ body { } /* ----- Layout ----- */ - body { - background: #fefefe; - background: var(--background-main); - color: #1f1f1f; - color: var(--text-main); - } - a { color: #7a283a; color: var(--theme); @@ -561,11 +553,6 @@ body { font-size: 1rem; } - mark { - background: pink; /* change to proper color, based on theme */ - padding: 0.1em 0.15em; - } - kbd, /* different style for kbd? */ code { padding: 0.1em 0.25em; @@ -579,12 +566,6 @@ body { padding-right: 0; } - pre { - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - } - pre code { display: block; padding: 0 0 0.5rem 0.5rem; diff --git a/packages/frontend/@n8n/chat/src/main.scss b/packages/frontend/@n8n/chat/src/main.scss index f91c9fff55..1dc5076776 100644 --- a/packages/frontend/@n8n/chat/src/main.scss +++ b/packages/frontend/@n8n/chat/src/main.scss @@ -1,5 +1,6 @@ -.n8n-chat { - @import 'highlight.js/styles/github'; -} +@use 'sass:meta'; +@use 'css'; -@import 'css'; +.n8n-chat { + @include meta.load-css('highlight.js/styles/github'); +} diff --git a/packages/frontend/@n8n/chat/src/style.scss b/packages/frontend/@n8n/chat/src/style.scss deleted file mode 100644 index f91c9fff55..0000000000 --- a/packages/frontend/@n8n/chat/src/style.scss +++ /dev/null @@ -1,5 +0,0 @@ -.n8n-chat { - @import 'highlight.js/styles/github'; -} - -@import 'css'; diff --git a/packages/frontend/@n8n/chat/stylelint.config.mjs b/packages/frontend/@n8n/chat/stylelint.config.mjs new file mode 100644 index 0000000000..a86e148c67 --- /dev/null +++ b/packages/frontend/@n8n/chat/stylelint.config.mjs @@ -0,0 +1,3 @@ +import { baseConfig } from '@n8n/stylelint-config/base'; + +export default baseConfig; diff --git a/packages/frontend/@n8n/design-system/.storybook/fonts.scss b/packages/frontend/@n8n/design-system/.storybook/fonts.scss index 00f332c4f8..c62fc97d1d 100644 --- a/packages/frontend/@n8n/design-system/.storybook/fonts.scss +++ b/packages/frontend/@n8n/design-system/.storybook/fonts.scss @@ -23,4 +23,4 @@ src: url('../src/css/fonts/CommitMonoVariable.woff2') format('woff2'); } -@import '../src/css/_tokens.scss'; +@use '../src/css/_tokens.scss'; diff --git a/packages/frontend/@n8n/design-system/package.json b/packages/frontend/@n8n/design-system/package.json index b5ec04e9e0..a1c98761de 100644 --- a/packages/frontend/@n8n/design-system/package.json +++ b/packages/frontend/@n8n/design-system/package.json @@ -18,11 +18,14 @@ "format": "biome format --write . && prettier --write . --ignore-path ../../../../.prettierignore", "format:check": "biome ci . && prettier --check . --ignore-path ../../../../.prettierignore", "lint": "eslint src --quiet", - "lint:fix": "eslint src --fix" + "lint:fix": "eslint src --fix", + "lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache", + "lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache" }, "devDependencies": { "@n8n/eslint-config": "workspace:*", "@n8n/storybook": "workspace:*", + "@n8n/stylelint-config": "workspace:*", "@n8n/typescript-config": "workspace:*", "@n8n/vitest-config": "workspace:*", "@testing-library/jest-dom": "catalog:frontend", diff --git a/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue b/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue index fcda1335d9..5931b984c1 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.vue @@ -78,7 +78,7 @@ const alertBoxClassNames = computed(() => { diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss index 38d7ec0966..7ac369e1a5 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss +++ b/packages/frontend/@n8n/design-system/src/css/_tokens.dark.scss @@ -491,7 +491,7 @@ --color-configurable-node-name: var(--color-text-dark); --color-secondary-link: var(--prim-color-secondary-tint-200); --color-secondary-link-hover: var(--prim-color-secondary-tint-100); - //Params + // Params --color-icon-base: var(--color-text-light); --color-icon-hover: var(--prim-color-primary); diff --git a/packages/frontend/@n8n/design-system/src/css/_tokens.scss b/packages/frontend/@n8n/design-system/src/css/_tokens.scss index 9963534bc0..47dd7d47f2 100644 --- a/packages/frontend/@n8n/design-system/src/css/_tokens.scss +++ b/packages/frontend/@n8n/design-system/src/css/_tokens.scss @@ -166,8 +166,8 @@ --color-node-icon-green: #108e49; --color-node-icon-dark-green: #157562; --color-node-icon-azure: #54b8c9; - --color-node-icon-purple: #553399; - --color-node-icon-crimson: #772244; + --color-node-icon-purple: #539; + --color-node-icon-crimson: #724; // Expressions, autocomplete, infobox --color-valid-resolvable-foreground: var(--prim-color-alt-a); @@ -657,7 +657,7 @@ --spacing-4xl: 8rem; --spacing-5xl: 16rem; - //Params + // Params --color-icon-base: var(--color-text-light); --color-icon-hover: var(--prim-color-primary); } diff --git a/packages/frontend/@n8n/design-system/src/css/alert.scss b/packages/frontend/@n8n/design-system/src/css/alert.scss index 747c27244c..5d5474c15d 100644 --- a/packages/frontend/@n8n/design-system/src/css/alert.scss +++ b/packages/frontend/@n8n/design-system/src/css/alert.scss @@ -122,7 +122,7 @@ & .el-alert__description { font-size: var.$alert-description-font-size; - margin: 5px 0 0 0; + margin: 5px 0 0; } @include mixins.e(closebtn) { diff --git a/packages/frontend/@n8n/design-system/src/css/aside.scss b/packages/frontend/@n8n/design-system/src/css/aside.scss deleted file mode 100644 index 2b6f473aaf..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/aside.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'mixins/mixins'; - -@include mixins.b(aside) { - overflow: auto; - box-sizing: border-box; - flex-shrink: 0; -} diff --git a/packages/frontend/@n8n/design-system/src/css/autocomplete.scss b/packages/frontend/@n8n/design-system/src/css/autocomplete.scss deleted file mode 100644 index 721b8870a1..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/autocomplete.scss +++ /dev/null @@ -1,80 +0,0 @@ -@use 'mixins/mixins'; -@use 'mixins/utils'; -@use './common/var'; -@use './input.scss'; -@use './scrollbar.scss'; -@use './popper'; - -@include mixins.b(autocomplete) { - position: relative; - display: inline-block; -} - -@include mixins.b(autocomplete-suggestion) { - margin: 5px 0; - box-shadow: var.$box-shadow-light; - border-radius: var(--border-radius-base); - border: 1px solid var(--border-color-base); - box-sizing: border-box; - background-color: var.$color-white; - - @include mixins.e(wrap) { - max-height: 280px; - padding: 10px 0; - box-sizing: border-box; - } - - @include mixins.e(list) { - margin: 0; - padding: 0; - } - - & li { - padding: 0 20px; - margin: 0; - line-height: 34px; - cursor: pointer; - color: var(--color-text-dark); - font-size: var.$font-size-base; - list-style: none; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:hover { - background-color: var.$select-option-hover-background; - } - - &.highlighted { - background-color: var.$select-option-hover-background; - } - - &.divider { - margin-top: 6px; - border-top: 1px solid var.$color-black; - } - - &.divider:last-child { - margin-bottom: -6px; - } - } - - @include mixins.when(loading) { - li { - text-align: center; - height: 100px; - line-height: 100px; - font-size: 20px; - color: var(--color-text-light); - @include utils.utils-vertical-center; - - &:hover { - background-color: var.$color-white; - } - } - - & .el-icon-loading { - vertical-align: middle; - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/avatar.scss b/packages/frontend/@n8n/design-system/src/css/avatar.scss deleted file mode 100644 index 8fde894ba6..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/avatar.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(avatar) { - display: inline-block; - box-sizing: border-box; - text-align: center; - overflow: hidden; - color: var.$avatar-font-color; - background: var.$avatar-background-color; - width: var.$avatar-large-size; - height: var.$avatar-large-size; - line-height: var.$avatar-large-size; - font-size: var.$avatar-text-font-size; - - > img { - display: block; - height: 100%; - vertical-align: middle; - } - - @include mixins.m(circle) { - border-radius: 50%; - } - - @include mixins.m(square) { - border-radius: var.$avatar-border-radius; - } - - @include mixins.m(icon) { - font-size: var.$avatar-icon-font-size; - } - - @include mixins.m(large) { - width: var.$avatar-large-size; - height: var.$avatar-large-size; - line-height: var.$avatar-large-size; - } - - @include mixins.m(medium) { - width: var.$avatar-medium-size; - height: var.$avatar-medium-size; - line-height: var.$avatar-medium-size; - } - - @include mixins.m(small) { - width: var.$avatar-small-size; - height: var.$avatar-small-size; - line-height: var.$avatar-small-size; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/backtop.scss b/packages/frontend/@n8n/design-system/src/css/backtop.scss deleted file mode 100644 index f80d9f8880..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/backtop.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(backtop) { - position: fixed; - background-color: var.$backtop-background-color; - width: 40px; - height: 40px; - border-radius: 50%; - color: var.$backtop-font-color; - display: flex; - align-items: center; - justify-content: center; - font-size: 20px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); - cursor: pointer; - z-index: 5; - - &:hover { - background-color: var.$backtop-hover-background-color; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/base.scss b/packages/frontend/@n8n/design-system/src/css/base.scss index 02f9229a95..23f7b087bd 100644 --- a/packages/frontend/@n8n/design-system/src/css/base.scss +++ b/packages/frontend/@n8n/design-system/src/css/base.scss @@ -1,3 +1,3 @@ @forward 'common/var.scss'; -@import 'common/transition.scss'; -@import 'icon.scss'; +@use 'common/transition.scss'; +@use 'icon.scss'; diff --git a/packages/frontend/@n8n/design-system/src/css/breadcrumb-item.scss b/packages/frontend/@n8n/design-system/src/css/breadcrumb-item.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/breadcrumb.scss b/packages/frontend/@n8n/design-system/src/css/breadcrumb.scss deleted file mode 100644 index 7c41fb2229..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/breadcrumb.scss +++ /dev/null @@ -1,57 +0,0 @@ -@use 'mixins/mixins'; -@use 'mixins/utils'; -@use './common/var'; - -@include mixins.b(breadcrumb) { - font-size: 14px; - line-height: 1; - @include utils.utils-clearfix; - - @include mixins.e(separator) { - margin: 0 9px; - font-weight: var(--font-weight-bold); - color: var(--color-text-lighter); - - &[class*='icon'] { - margin: 0 6px; - font-weight: var(--font-weight-regular); - } - } - - @include mixins.e(item) { - float: left; - - @include mixins.e(inner) { - color: var(--color-text-dark); - - &.is-link, - & a { - font-weight: var(--font-weight-bold); - text-decoration: none; - transition: var.$color-transition-base; - color: var(--color-text-dark); - - &:hover { - color: var(--color-primary); - cursor: pointer; - } - } - } - - &:last-child { - .el-breadcrumb__inner, - .el-breadcrumb__inner a { - &, - &:hover { - font-weight: var(--font-weight-regular); - color: var(--color-text-dark); - cursor: text; - } - } - - .el-breadcrumb__separator { - display: none; - } - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/calendar.scss b/packages/frontend/@n8n/design-system/src/css/calendar.scss deleted file mode 100644 index 56cf005ea5..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/calendar.scss +++ /dev/null @@ -1,78 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; -@use 'button-group'; - -@include mixins.b(calendar) { - background-color: var(--color-foreground-xlight); - - @include mixins.e(header) { - display: flex; - justify-content: space-between; - padding: 12px 20px; - border-bottom: var.$table-border; - } - - @include mixins.e(title) { - color: #000000; - align-self: center; - } - - @include mixins.e(body) { - padding: 12px 20px 35px; - } -} - -@include mixins.b(calendar-table) { - table-layout: fixed; - width: 100%; - - thead th { - padding: 12px 0; - color: var(--color-text-dark); - font-weight: var(--font-weight-regular); - } - - &:not(.is-range) { - td.prev, - td.next { - color: var(--color-text-lighter); - } - } - - td { - border-bottom: var.$calendar-border; - border-right: var.$calendar-border; - vertical-align: top; - transition: background-color 0.2s ease; - - @include mixins.when(selected) { - background-color: var.$calendar-selected-background-color; - } - - @include mixins.when(today) { - color: var(--color-primary); - } - } - - tr:first-child td { - border-top: var.$calendar-border; - } - - tr td:first-child { - border-left: var.$calendar-border; - } - - tr.el-calendar-table__row--hide-border td { - border-top: none; - } - - @include mixins.b(calendar-day) { - box-sizing: border-box; - padding: 8px; - height: var.$calendar-cell-width; - &:hover { - cursor: pointer; - background-color: var.$calendar-selected-background-color; - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/carousel-item.scss b/packages/frontend/@n8n/design-system/src/css/carousel-item.scss deleted file mode 100644 index be29878f37..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/carousel-item.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(carousel) { - @include mixins.e(item) { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: inline-block; - overflow: hidden; - z-index: #{var.$index-normal - 1}; - - @include mixins.when(active) { - z-index: #{var.$index-normal + 1}; - } - - @include mixins.when(animating) { - transition: transform 0.4s ease-in-out; - } - - @include mixins.m(card) { - width: 50%; - transition: transform 0.4s ease-in-out; - &.is-in-stage { - cursor: pointer; - z-index: var.$index-normal; - &:hover .el-carousel__mask, - &.is-hover .el-carousel__mask { - opacity: 0.12; - } - } - &.is-active { - z-index: #{var.$index-normal + 1}; - } - } - } - - @include mixins.e(mask) { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: var.$color-white; - opacity: 0.24; - transition: 0.2s; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/carousel.scss b/packages/frontend/@n8n/design-system/src/css/carousel.scss deleted file mode 100644 index 45ed4defa9..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/carousel.scss +++ /dev/null @@ -1,161 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(carousel) { - position: relative; - - @include mixins.m(horizontal) { - overflow-x: hidden; - } - - @include mixins.m(vertical) { - overflow-y: hidden; - } - - @include mixins.e(container) { - position: relative; - height: 300px; - } - - @include mixins.e(arrow) { - border: none; - outline: none; - padding: 0; - margin: 0; - height: var.$carousel-arrow-size; - width: var.$carousel-arrow-size; - cursor: pointer; - transition: 0.3s; - border-radius: 50%; - background-color: var.$carousel-arrow-background; - color: var.$color-white; - position: absolute; - top: 50%; - z-index: 10; - transform: translateY(-50%); - text-align: center; - font-size: var.$carousel-arrow-font-size; - - @include mixins.m(left) { - left: 16px; - } - - @include mixins.m(right) { - right: 16px; - } - - &:hover { - background-color: var.$carousel-arrow-hover-background; - } - - & i { - cursor: pointer; - } - } - - @include mixins.e(indicators) { - position: absolute; - list-style: none; - margin: 0; - padding: 0; - z-index: #{var.$index-normal + 1}; - - @include mixins.m(horizontal) { - bottom: 0; - left: 50%; - transform: translateX(-50%); - } - - @include mixins.m(vertical) { - right: 0; - top: 50%; - transform: translateY(-50%); - } - - @include mixins.m(outside) { - bottom: #{var.$carousel-indicator-height + var.$carousel-indicator-padding-vertical * 2}; - text-align: center; - position: static; - transform: none; - .el-carousel__indicator:hover button { - opacity: 0.64; - } - button { - background-color: var.$carousel-indicator-out-color; - opacity: 0.24; - } - } - - @include mixins.m(labels) { - left: 0; - right: 0; - transform: none; - text-align: center; - - .el-carousel__button { - height: auto; - width: auto; - padding: 2px 18px; - font-size: 12px; - } - - .el-carousel__indicator { - padding: 6px 4px; - } - } - } - - @include mixins.e(indicator) { - background-color: transparent; - cursor: pointer; - - &:hover button { - opacity: 0.72; - } - - @include mixins.m(horizontal) { - display: inline-block; - padding: var.$carousel-indicator-padding-vertical var.$carousel-indicator-padding-horizontal; - } - - @include mixins.m(vertical) { - padding: var.$carousel-indicator-padding-horizontal var.$carousel-indicator-padding-vertical; - .el-carousel__button { - width: var.$carousel-indicator-height; - height: #{var.$carousel-indicator-width * 0.5}; - } - } - - @include mixins.when(active) { - button { - opacity: 1; - } - } - } - - @include mixins.e(button) { - display: block; - opacity: 0.48; - width: var.$carousel-indicator-width; - height: var.$carousel-indicator-height; - background-color: var.$color-white; - border: none; - outline: none; - padding: 0; - margin: 0; - cursor: pointer; - transition: 0.3s; - } -} - -.carousel-arrow-left-enter-from, -.carousel-arrow-left-leave-active { - transform: translateY(-50%) translateX(-10px); - opacity: 0; -} - -.carousel-arrow-right-enter-from, -.carousel-arrow-right-leave-active { - transform: translateY(-50%) translateX(10px); - opacity: 0; -} diff --git a/packages/frontend/@n8n/design-system/src/css/cascader-panel.scss b/packages/frontend/@n8n/design-system/src/css/cascader-panel.scss deleted file mode 100644 index b45b7aa9fd..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/cascader-panel.scss +++ /dev/null @@ -1,121 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; -@use './checkbox'; -@use './radio'; -@use './scrollbar'; - -@include mixins.b(cascader-panel) { - display: flex; - border-radius: var.$cascader-menu-radius; - font-size: var.$cascader-menu-font-size; - - @include mixins.when(bordered) { - border: var.$cascader-menu-border; - border-radius: var.$cascader-menu-radius; - } -} - -@include mixins.b(cascader-menu) { - min-width: 180px; - box-sizing: border-box; - color: var.$cascader-menu-font-color; - border-right: var.$cascader-menu-border; - - &:last-child { - border-right: none; - .el-cascader-node { - padding-right: 20px; - } - } - - @include mixins.e(wrap) { - height: 204px; - } - - @include mixins.e(list) { - position: relative; - min-height: 100%; - margin: 0; - padding: 6px 0; - list-style: none; - box-sizing: border-box; - } - - @include mixins.e(hover-zone) { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - } - - @include mixins.e(empty-text) { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - color: var.$cascader-color-empty; - } -} - -@include mixins.b(cascader-node) { - position: relative; - display: flex; - align-items: center; - padding: 0 30px 0 20px; - height: 34px; - line-height: 34px; - outline: none; - - &.is-selectable.in-active-path { - color: var.$cascader-menu-font-color; - } - - &.in-active-path, - &.is-selectable.in-checked-path, - &.is-active { - color: var.$cascader-menu-selected-font-color; - font-weight: var(--font-weight-bold); - } - - &:not(.is-disabled) { - cursor: pointer; - &:hover, - &:focus { - background: var.$cascader-node-background-hover; - } - } - - @include mixins.when(disabled) { - color: var.$cascader-node-color-disabled; - cursor: not-allowed; - } - - @include mixins.e(prefix) { - position: absolute; - left: 10px; - } - - @include mixins.e(postfix) { - position: absolute; - right: 10px; - } - - @include mixins.e(label) { - flex: 1; - padding: 0 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - > .el-radio { - margin-right: 0; - - .el-radio__label { - padding-left: 0; - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/cascader.scss b/packages/frontend/@n8n/design-system/src/css/cascader.scss deleted file mode 100644 index 1a3eb79071..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/cascader.scss +++ /dev/null @@ -1,183 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; -@use './input'; -@use './popper'; -@use './tag'; -@use './cascader-panel'; - -@include mixins.b(cascader) { - display: inline-block; - position: relative; - font-size: var.$font-size-base; - line-height: var.$input-height; - - &:not(.is-disabled):hover { - .el-input__inner { - cursor: pointer; - border-color: var.$input-hover-border; - } - } - - .el-input { - cursor: pointer; - - .el-input__inner { - text-overflow: ellipsis; - - &:focus { - border-color: var.$input-focus-border; - } - } - - .el-icon-arrow-down { - transition: transform 0.3s; - font-size: 14px; - - @include mixins.when(reverse) { - transform: rotateZ(180deg); - } - } - - .el-icon-circle-close:hover { - color: var.$input-clear-hover-color; - } - - @include mixins.when(focus) { - .el-input__inner { - border-color: var.$input-focus-border; - } - } - } - - @include mixins.m(medium) { - font-size: var.$input-medium-font-size; - line-height: var.$input-medium-height; - } - - @include mixins.m(small) { - font-size: var.$input-small-font-size; - line-height: var.$input-small-height; - } - - @include mixins.m(mini) { - font-size: var.$input-mini-font-size; - line-height: var.$input-mini-height; - } - - @include mixins.when(disabled) { - .el-cascader__label { - z-index: #{var.$index-normal + 1}; - color: var.$disabled-color-base; - } - } - - @include mixins.e(dropdown) { - margin: 5px 0; - font-size: var.$cascader-menu-font-size; - background: var.$cascader-menu-fill; - border: var.$cascader-menu-border; - border-radius: var.$cascader-menu-radius; - box-shadow: var.$cascader-menu-shadow; - } - - @include mixins.e(tags) { - position: absolute; - left: 0; - right: 30px; - top: 50%; - transform: translateY(-50%); - display: flex; - flex-wrap: wrap; - line-height: normal; - text-align: left; - box-sizing: border-box; - - .el-tag { - display: inline-flex; - align-items: center; - max-width: 100%; - margin: 2px 0 2px 6px; - text-overflow: ellipsis; - background: var.$cascader-tag-background; - - &:not(.is-hit) { - border-color: transparent; - } - - > span { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - } - - .el-icon-close { - flex: none; - background-color: var(--color-text-lighter); - color: var.$color-white; - - &:hover { - background-color: var(--color-text-light); - } - } - } - } - - @include mixins.e(suggestion-panel) { - border-radius: var.$cascader-menu-radius; - } - - @include mixins.e(suggestion-list) { - max-height: 204px; - margin: 0; - padding: 6px 0; - font-size: var.$font-size-base; - color: var.$cascader-menu-font-color; - text-align: center; - } - - @include mixins.e(suggestion-item) { - display: flex; - justify-content: space-between; - align-items: center; - height: 34px; - padding: 0 15px; - text-align: left; - outline: none; - cursor: pointer; - - &:hover, - &:focus { - background: var.$cascader-node-background-hover; - } - - &.is-checked { - color: var.$cascader-menu-selected-font-color; - font-weight: var(--font-weight-bold); - } - - > span { - margin-right: 10px; - } - } - - @include mixins.e(empty-text) { - margin: 10px 0; - color: var.$cascader-color-empty; - } - - @include mixins.e(search-input) { - flex: 1; - height: 24px; - min-width: 60px; - margin: 2px 0 2px 15px; - padding: 0; - color: var.$cascader-menu-font-color; - border: none; - outline: none; - box-sizing: border-box; - - &::placeholder { - color: var(--color-text-lighter); - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/checkbox-button.scss b/packages/frontend/@n8n/design-system/src/css/checkbox-button.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/checkbox-group.scss b/packages/frontend/@n8n/design-system/src/css/checkbox-group.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/collapse-item.scss b/packages/frontend/@n8n/design-system/src/css/collapse-item.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/color-picker.scss b/packages/frontend/@n8n/design-system/src/css/color-picker.scss index 2e5b61383d..5c1264fc62 100644 --- a/packages/frontend/@n8n/design-system/src/css/color-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/color-picker.scss @@ -223,7 +223,10 @@ @include mixins.e(link-btn) { @include button.button-small(); - margin-right: var(--spacing-2xs); + + & { + margin-right: var(--spacing-2xs); + } } } diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss index 214386d111..cbf154ab1e 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-picker.scss @@ -36,7 +36,7 @@ position: relative; border-bottom: 1px solid var.$datepicker-inner-border-color; font-size: 12px; - padding: 8px 5px 5px 5px; + padding: 8px 5px 5px; display: table; width: 100%; box-sizing: border-box; diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/date-range-picker.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/date-range-picker.scss index e2f27af4c9..e9d7c38f9a 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/date-range-picker.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/date-range-picker.scss @@ -72,7 +72,7 @@ position: relative; border-bottom: 1px solid var.$datepicker-inner-border-color; font-size: 12px; - padding: 8px 5px 5px 5px; + padding: 8px 5px 5px; display: table; width: 100%; box-sizing: border-box; diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss index 63d839a768..9b607d6acd 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/month-table.scss @@ -8,7 +8,7 @@ td { text-align: center; - padding: 8px 0px; + padding: 8px 0; cursor: pointer; & div { height: 48px; diff --git a/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss b/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss index a462679fc7..6912eca8b1 100644 --- a/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss +++ b/packages/frontend/@n8n/design-system/src/css/date-picker/picker-panel.scss @@ -100,12 +100,14 @@ @include button.button-small(); @include button.button-round(); - vertical-align: middle; - margin-left: var(--spacing-2xs); - &.is-plain { @include button.button-just-primary(); } + + & { + vertical-align: middle; + margin-left: var(--spacing-2xs); + } } } diff --git a/packages/frontend/@n8n/design-system/src/css/divider.scss b/packages/frontend/@n8n/design-system/src/css/divider.scss deleted file mode 100644 index e641bc3033..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/divider.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use './common/var'; -@use 'mixins/mixins'; - -@include mixins.b(divider) { - background-color: var(--border-color-base); - position: relative; - - @include mixins.m(horizontal) { - display: block; - height: 1px; - width: 100%; - margin: 24px 0; - } - - @include mixins.m(vertical) { - display: inline-block; - width: 1px; - height: 1em; - margin: 0 8px; - vertical-align: middle; - position: relative; - } - - @include mixins.e(text) { - position: absolute; - background-color: var.$color-white; - padding: 0 20px; - font-weight: var(--font-weight-medium); - color: var(--color-text-dark); - font-size: 14px; - - @include mixins.when(left) { - left: 20px; - transform: translateY(-50%); - } - - @include mixins.when(center) { - left: 50%; - transform: translateX(-50%) translateY(-50%); - } - - @include mixins.when(right) { - right: 20px; - transform: translateY(-50%); - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/drawer.scss b/packages/frontend/@n8n/design-system/src/css/drawer.scss index 8afdf31650..e5d292384f 100644 --- a/packages/frontend/@n8n/design-system/src/css/drawer.scss +++ b/packages/frontend/@n8n/design-system/src/css/drawer.scss @@ -9,7 +9,7 @@ $directions: rtl, ltr, ttb, btt; background-color: var.$dialog-background-color; display: flex; flex-direction: column; - box-shadow: 0px 6px 16px rgb(68 28 23 / 6%); + box-shadow: 0 6px 16px rgb(68 28 23 / 6%); overflow: hidden; transition: all 0.3s; @@ -123,15 +123,7 @@ $directions: rtl, ltr, ttb, btt; &-enter-from, &-leave-to { opacity: 0; - } - &-enter-to, - &-leave-from { - opacity: 1; - } - - &-enter-from, - &-leave-to { @each $direction in $directions { .#{$direction} { @if $direction == ltr { @@ -152,4 +144,9 @@ $directions: rtl, ltr, ttb, btt; } } } + + &-enter-to, + &-leave-from { + opacity: 1; + } } diff --git a/packages/frontend/@n8n/design-system/src/css/dropdown-item.scss b/packages/frontend/@n8n/design-system/src/css/dropdown-item.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/dropdown-menu.scss b/packages/frontend/@n8n/design-system/src/css/dropdown-menu.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/footer.scss b/packages/frontend/@n8n/design-system/src/css/footer.scss deleted file mode 100644 index 3f08cfcc1a..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/footer.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(footer) { - padding: var.$footer-padding; - box-sizing: border-box; - flex-shrink: 0; -} diff --git a/packages/frontend/@n8n/design-system/src/css/form-item.scss b/packages/frontend/@n8n/design-system/src/css/form-item.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/form.scss b/packages/frontend/@n8n/design-system/src/css/form.scss index 981f4e2aa0..e1f59b98dd 100644 --- a/packages/frontend/@n8n/design-system/src/css/form.scss +++ b/packages/frontend/@n8n/design-system/src/css/form.scss @@ -13,7 +13,7 @@ float: none; display: inline-block; text-align: left; - padding: 0 0 10px 0; + padding: 0 0 10px; } } @include mixins.m(inline) { diff --git a/packages/frontend/@n8n/design-system/src/css/header.scss b/packages/frontend/@n8n/design-system/src/css/header.scss deleted file mode 100644 index 682de4adcb..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/header.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(header) { - padding: var.$header-padding; - box-sizing: border-box; - flex-shrink: 0; -} diff --git a/packages/frontend/@n8n/design-system/src/css/image.scss b/packages/frontend/@n8n/design-system/src/css/image.scss deleted file mode 100644 index 829f09f3a9..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/image.scss +++ /dev/null @@ -1,176 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -%size { - width: 100%; - height: 100%; -} - -@include mixins.b(image) { - position: relative; - display: inline-block; - overflow: hidden; - - @include mixins.e(inner) { - @extend %size; - vertical-align: top; - - @include mixins.m(center) { - position: relative; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: block; - } - } - - @include mixins.e(placeholder) { - @extend %size; - background: var.$background-color-base; - } - - @include mixins.e(error) { - @extend %size; - display: flex; - justify-content: center; - align-items: center; - font-size: 14px; - background: var.$background-color-base; - color: var(--color-text-lighter); - vertical-align: middle; - } - - @include mixins.e(preview) { - cursor: pointer; - } -} - -@include mixins.b(image-viewer) { - @include mixins.e(wrapper) { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - @include mixins.e(btn) { - position: absolute; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - opacity: 0.8; - cursor: pointer; - box-sizing: border-box; - user-select: none; - } - - @include mixins.e(close) { - top: 40px; - right: 40px; - width: 40px; - height: 40px; - font-size: 24px; - color: var(--color-foreground-xlight); - background-color: #606266; - } - - @include mixins.e(canvas) { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - @include mixins.e(actions) { - left: 50%; - bottom: 30px; - transform: translateX(-50%); - width: 282px; - height: 44px; - padding: 0 23px; - background-color: #606266; - border-color: var(--color-foreground-xlight); - border-radius: 22px; - - @include mixins.e(actions__inner) { - width: 100%; - height: 100%; - text-align: justify; - cursor: default; - font-size: 23px; - color: var(--color-foreground-xlight); - display: flex; - align-items: center; - justify-content: space-around; - } - } - - @include mixins.e(prev) { - top: 50%; - transform: translateY(-50%); - width: 44px; - height: 44px; - font-size: 24px; - color: var(--color-foreground-xlight); - background-color: #606266; - border-color: var(--color-foreground-xlight); - left: 40px; - } - - @include mixins.e(next) { - top: 50%; - transform: translateY(-50%); - width: 44px; - height: 44px; - font-size: 24px; - color: var(--color-foreground-xlight); - background-color: #606266; - border-color: var(--color-foreground-xlight); - right: 40px; - text-indent: 2px; - } - - @include mixins.e(mask) { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - opacity: 0.5; - background: #000; - } -} - -.viewer-fade-enter-active { - animation: viewer-fade-in 0.3s; -} - -.viewer-fade-leave-active { - animation: viewer-fade-out 0.3s; -} - -@keyframes viewer-fade-in { - 0% { - transform: translate3d(0, -20px, 0); - opacity: 0; - } - 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - -@keyframes viewer-fade-out { - 0% { - transform: translate3d(0, 0, 0); - opacity: 1; - } - 100% { - transform: translate3d(0, -20px, 0); - opacity: 0; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/index.scss b/packages/frontend/@n8n/design-system/src/css/index.scss index 1f3bb4ad92..2552f26785 100644 --- a/packages/frontend/@n8n/design-system/src/css/index.scss +++ b/packages/frontend/@n8n/design-system/src/css/index.scss @@ -7,82 +7,42 @@ @use './pagination.scss'; @use './dialog.scss'; @use './display.scss'; -// @use "./autocomplete.scss"; @use './dropdown.scss'; -@use './dropdown-menu.scss'; -@use './dropdown-item.scss'; @use './menu.scss'; -@use './submenu.scss'; -@use './menu-item.scss'; -// @use "./menu-item-group.scss"; @use './input.scss'; @use './input-number.scss'; @use './radio.scss'; @use './radio-group.scss'; @use './radio-button.scss'; @use './checkbox.scss'; -// @use "./checkbox-button.scss"; -// @use "./checkbox-group.scss"; @use './switch.scss'; @use './select.scss'; @use './skeleton.scss'; -// @use "./button-group.scss"; +@use './button-group.scss'; @use './table.scss'; @use './table-column.scss'; @use './date-picker.scss'; -// @use "./time-select.scss"; -// @use "./time-picker.scss"; @use './popover.scss'; -//@use './tooltip.scss'; +@use './tooltip.scss'; @use './message-box.scss'; -// @use "./breadcrumb.scss"; -// @use "./breadcrumb-item.scss"; @use './form.scss'; -@use './form-item.scss'; @use './tabs.scss'; -@use './tab-pane.scss'; @use './tag.scss'; -// @use "./tree.scss"; +@use './tree.scss'; @use './alert.scss'; @use './notification.scss'; -// @use "./slider.scss"; @use './loading.scss'; @use './row.scss'; @use './col.scss'; -// @use "./upload.scss"; -// @use "./progress.scss"; -// @use "./spinner.scss"; +@use './progress.scss'; @use './message.scss'; @use './badge.scss'; @use './card.scss'; -// @use "./rate.scss"; -// @use "./steps.scss"; -// @use "./step.scss"; -// @use "./carousel.scss"; -// @use "./scrollbar.scss"; -// @use "./carousel-item.scss"; -// @use "./collapse.scss"; -// @use "./collapse-item.scss"; -// @use "./cascader.scss"; +@use './scrollbar.scss'; +@use './collapse.scss'; @use './color-picker.scss'; @use './transfer.scss'; @use './container.scss'; -// @use "./header.scss"; -// @use "./aside.scss"; -// @use "./main.scss"; -// @use "./footer.scss"; -// @use "./timeline.scss"; -// @use "./timeline-item.scss"; -// @use "./link.scss"; -// @use "./divider.scss"; -// @use "./image.scss"; -// @use "./calendar.scss"; -// @use "./backtop.scss"; -// @use "./infinite-scroll.scss"; -// @use "./page-header.scss"; -// @use "./cascader-panel.scss"; -// @use "./avatar.scss"; @use './drawer.scss'; @use './popper.scss'; -// @use "./popconfirm.scss"; @use './utilities/index.scss'; diff --git a/packages/frontend/@n8n/design-system/src/css/infinite-scroll.scss b/packages/frontend/@n8n/design-system/src/css/infinite-scroll.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/infiniteScroll.scss b/packages/frontend/@n8n/design-system/src/css/infiniteScroll.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/input.scss b/packages/frontend/@n8n/design-system/src/css/input.scss index d388969e41..3281b9f3f2 100644 --- a/packages/frontend/@n8n/design-system/src/css/input.scss +++ b/packages/frontend/@n8n/design-system/src/css/input.scss @@ -11,7 +11,7 @@ @include mixins.e(inner) { display: block; resize: vertical; - padding: 8px 12px 5px 12px; + padding: 8px 12px 5px; line-height: 1.5; box-sizing: border-box; width: 100%; diff --git a/packages/frontend/@n8n/design-system/src/css/link.scss b/packages/frontend/@n8n/design-system/src/css/link.scss deleted file mode 100644 index 4a34bcd8e9..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/link.scss +++ /dev/null @@ -1,80 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -$typeMap: ( - primary: var.$link-primary-font-color, - danger: var.$link-danger-font-color, - success: var.$link-success-font-color, - warning: var.$link-warning-font-color, - info: var.$link-info-font-color, -); - -@include mixins.b(link) { - display: inline-flex; - flex-direction: row; - align-items: center; - justify-content: center; - vertical-align: middle; - position: relative; - text-decoration: none; - outline: none; - cursor: pointer; - padding: 0; - font-size: var.$link-font-size; - font-weight: var.$link-font-weight; - - @include mixins.when(underline) { - &:hover:after { - content: ''; - position: absolute; - left: 0; - right: 0; - height: 0; - bottom: 0; - border-bottom: 1px solid var.$link-default-active-color; - } - } - - @include mixins.when(disabled) { - cursor: not-allowed; - } - - & [class*='el-icon-'] { - & + span { - margin-left: 5px; - } - } - - &.el-link--default { - color: var.$link-default-font-color; - &:hover { - color: var.$link-default-active-color; - } - &:after { - border-color: var.$link-default-active-color; - } - @include mixins.when(disabled) { - color: var.$link-disabled-font-color; - } - } - - @each $type, $primaryColor in $typeMap { - &.el-link--#{$type} { - color: $primaryColor; - &:hover { - color: var.$color-primary-light-3; - } - &:after { - border-color: $primaryColor; - } - @include mixins.when(disabled) { - color: var.$color-primary-light-6; - } - @include mixins.when(underline) { - &:hover:after { - border-color: $primaryColor; - } - } - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/main.scss b/packages/frontend/@n8n/design-system/src/css/main.scss deleted file mode 100644 index a0d9915555..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/main.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(main) { - // IE11 supports the
element partially https://caniuse.com/#search=main - display: block; - flex: 1; - flex-basis: auto; - overflow: auto; - box-sizing: border-box; - padding: var.$main-padding; -} diff --git a/packages/frontend/@n8n/design-system/src/css/menu-item-group.scss b/packages/frontend/@n8n/design-system/src/css/menu-item-group.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/menu-item.scss b/packages/frontend/@n8n/design-system/src/css/menu-item.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/message-box.scss b/packages/frontend/@n8n/design-system/src/css/message-box.scss index 023c984a16..f5e6d80056 100644 --- a/packages/frontend/@n8n/design-system/src/css/message-box.scss +++ b/packages/frontend/@n8n/design-system/src/css/message-box.scss @@ -156,9 +156,6 @@ } // & .btn--cancel { - @include button.button-small(); - @include button.button-outline; - --button-active-background-color: var(--color-primary-tint-2); --button-active-color: var(--color-primary); --button-active-border-color: var(--color-primary); @@ -166,6 +163,9 @@ --button-hover-color: var(--color-primary); --button-hover-border-color: var(--color-primary); --button-focus-outline-color: var(--color-primary-tint-1); + + @include button.button-small(); + @include button.button-outline; } } diff --git a/packages/frontend/@n8n/design-system/src/css/mixins/_breakpoints.scss b/packages/frontend/@n8n/design-system/src/css/mixins/_breakpoints.scss index 405351eb21..5bb0adb0cf 100644 --- a/packages/frontend/@n8n/design-system/src/css/mixins/_breakpoints.scss +++ b/packages/frontend/@n8n/design-system/src/css/mixins/_breakpoints.scss @@ -1,15 +1,17 @@ @use '../common/var'; +@use 'sass:map'; +@use 'sass:string'; @mixin breakpoint($name) { - @if map-has-key(var.$breakpoints-spec, $name) { - $query: map-get(var.$breakpoints-spec, $name); + @if map.has-key(var.$breakpoints-spec, $name) { + $query: map.get(var.$breakpoints-spec, $name); $media-query: ''; @each $key, $value in $query { $media-query: '#{$media-query} and (#{$key}: #{$value})'; } - $media-query: unquote(str-slice($media-query, 6)); // Remove the initial ' and ' + $media-query: string.unquote(string.slice($media-query, 6)); // Remove the initial ' and ' @media screen and #{$media-query} { @content; diff --git a/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss b/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss index ca87fa86d4..1a675ecf8e 100644 --- a/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss +++ b/packages/frontend/@n8n/design-system/src/css/mixins/_button.scss @@ -37,9 +37,11 @@ } @mixin button-variant($color, $background-color, $border-color, $h, $s, $l, $t, $plain: true) { - color: $color; - background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); - border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + & { + color: $color; + background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l})); + } &:active { background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent)); @@ -79,16 +81,20 @@ } @mixin button-size($padding-vertical, $padding-horizontal, $font-size) { - padding: $padding-vertical $padding-horizontal; - font-size: $font-size; - &.is-round { padding: $padding-vertical $padding-horizontal; } + + & { + padding: $padding-vertical $padding-horizontal; + font-size: $font-size; + } } @mixin button-round() { - --button-border-radius: 20px; + & { + --button-border-radius: 20px; + } } // ignore plain overrides diff --git a/packages/frontend/@n8n/design-system/src/css/mixins/index.scss b/packages/frontend/@n8n/design-system/src/css/mixins/index.scss index bda8c57b75..78ed5ee0ee 100644 --- a/packages/frontend/@n8n/design-system/src/css/mixins/index.scss +++ b/packages/frontend/@n8n/design-system/src/css/mixins/index.scss @@ -1,5 +1,5 @@ @forward 'breakpoints'; -@forward 'button'; +@forward 'button' hide $B, $E; @forward 'config'; @forward 'function'; @forward 'mixins'; diff --git a/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss b/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss index fe806f1450..b032bfb70d 100644 --- a/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss +++ b/packages/frontend/@n8n/design-system/src/css/mixins/mixins.scss @@ -4,6 +4,10 @@ @use '../common/var'; @use 'config'; +// Module-level variables for BEM mixins +$B: null; +$E: null; + /* Break-points -------------------------- */ @mixin res($key, $map: var.$breakpoints) { diff --git a/packages/frontend/@n8n/design-system/src/css/notification.scss b/packages/frontend/@n8n/design-system/src/css/notification.scss index 152da58ea5..09b4392263 100644 --- a/packages/frontend/@n8n/design-system/src/css/notification.scss +++ b/packages/frontend/@n8n/design-system/src/css/notification.scss @@ -52,7 +52,7 @@ @include mixins.e(content) { font-size: var.$notification-content-font-size; line-height: 1.5; - margin: 6px 0 0 0; + margin: 6px 0 0; color: var.$notification-content-color; text-align: justify; diff --git a/packages/frontend/@n8n/design-system/src/css/page-header.scss b/packages/frontend/@n8n/design-system/src/css/page-header.scss deleted file mode 100644 index daa94cd8c1..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/page-header.scss +++ /dev/null @@ -1,41 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(page-header) { - display: flex; - line-height: 24px; - - @include mixins.e(left) { - display: flex; - cursor: pointer; - margin-right: 40px; - position: relative; - - &::after { - content: ''; - position: absolute; - width: 1px; - height: 16px; - right: -20px; - top: 50%; - transform: translateY(-50%); - background-color: var(--border-color-base); - } - - .el-icon-back { - font-size: 18px; - margin-right: 6px; - align-self: center; - } - - @include mixins.e(title) { - font-size: 14px; - font-weight: var(--font-weight-medium); - } - } - - @include mixins.e(content) { - font-size: 18px; - color: var(--color-text-dark); - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/pagination.scss b/packages/frontend/@n8n/design-system/src/css/pagination.scss index 85152b14b8..b512ebaae1 100644 --- a/packages/frontend/@n8n/design-system/src/css/pagination.scss +++ b/packages/frontend/@n8n/design-system/src/css/pagination.scss @@ -312,7 +312,7 @@ } } -//@mixin pagination-button { +// @mixin pagination-button { // display: flex; // justify-content: center; // align-items: center; @@ -363,9 +363,9 @@ // outline: 1px solid getCssVar('pagination-hover-color'); // outline-offset: -1px; // } -//} +// } // -//@include b(pagination) { +// @include b(pagination) { // @include set-component-css-var('pagination', $pagination); // // white-space: nowrap; @@ -517,9 +517,9 @@ // width: 100px; // } // } -//} +// } // -//@include b(pager) { +// @include b(pager) { // user-select: none; // list-style: none; // font-size: 0; @@ -531,4 +531,4 @@ // li { // @include pagination-button; // } -//} +// } diff --git a/packages/frontend/@n8n/design-system/src/css/popconfirm.scss b/packages/frontend/@n8n/design-system/src/css/popconfirm.scss deleted file mode 100644 index 784b96bfe9..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/popconfirm.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(popconfirm) { - @include mixins.e(main) { - display: flex; - align-items: center; - } - @include mixins.e(icon) { - margin-right: 5px; - } - @include mixins.e(action) { - text-align: right; - margin: 0; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/rate.scss b/packages/frontend/@n8n/design-system/src/css/rate.scss deleted file mode 100644 index eddcfe0f52..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/rate.scss +++ /dev/null @@ -1,50 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(rate) { - height: var.$rate-height; - line-height: 1; - - &:focus, - &:active { - outline-width: 0; - } - - @include mixins.e(item) { - display: inline-block; - position: relative; - font-size: 0; - vertical-align: middle; - } - - @include mixins.e(icon) { - position: relative; - display: inline-block; - font-size: var.$rate-icon-size; - margin-right: var.$rate-icon-margin; - color: var.$rate-icon-color; - transition: 0.3s; - &.hover { - transform: scale(1.15); - } - - .path2 { - position: absolute; - left: 0; - top: 0; - } - } - - @include mixins.e(decimal) { - position: absolute; - top: 0; - left: 0; - display: inline-block; - overflow: hidden; - } - - @include mixins.e(text) { - font-size: var.$rate-font-size; - vertical-align: middle; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/slider.scss b/packages/frontend/@n8n/design-system/src/css/slider.scss deleted file mode 100644 index 8eb7982557..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/slider.scss +++ /dev/null @@ -1,246 +0,0 @@ -@use 'mixins/mixins'; -@use 'mixins/utils'; -@use 'input-number'; -@use 'tooltip'; -@use './common/var'; - -@include mixins.b(slider) { - @include utils.utils-clearfix; - - @include mixins.e(runway) { - width: 100%; - height: var.$slider-height; - margin: var.$slider-margin; - background-color: var.$slider-runway-background-color; - border-radius: var.$slider-border-radius; - position: relative; - cursor: pointer; - vertical-align: middle; - - &.show-input { - margin-right: 160px; - width: auto; - } - - &.disabled { - cursor: default; - - .el-slider__bar { - background-color: var.$slider-disable-color; - } - - .el-slider__button { - border-color: var.$slider-disable-color; - } - - .el-slider__button-wrapper { - &:hover, - &.hover { - cursor: not-allowed; - } - - &.dragging { - cursor: not-allowed; - } - } - - .el-slider__button { - &:hover, - &.hover, - &.dragging { - transform: scale(1); - } - - &:hover, - &.hover { - cursor: not-allowed; - } - - &.dragging { - cursor: not-allowed; - } - } - } - } - - @include mixins.e(input) { - float: right; - margin-top: 3px; - width: 130px; - - &.el-input-number--mini { - margin-top: 5px; - } - - &.el-input-number--medium { - margin-top: 0; - } - - &.el-input-number--large { - margin-top: -2px; - } - } - - @include mixins.e(bar) { - height: var.$slider-height; - background-color: var.$slider-main-background-color; - border-top-left-radius: var.$slider-border-radius; - border-bottom-left-radius: var.$slider-border-radius; - position: absolute; - } - - @include mixins.e(button-wrapper) { - height: var.$slider-button-wrapper-size; - width: var.$slider-button-wrapper-size; - position: absolute; - z-index: 1001; - top: var.$slider-button-wrapper-offset; - transform: translateX(-50%); - background-color: transparent; - text-align: center; - user-select: none; - line-height: normal; - @include utils.utils-vertical-center; - - .el-tooltip { - vertical-align: middle; - display: inline-block; - } - - &:hover, - &.hover { - cursor: grab; - } - - &.dragging { - cursor: grabbing; - } - } - - @include mixins.e(button) { - width: var.$slider-button-size; - height: var.$slider-button-size; - border: solid 2px var.$slider-main-background-color; - background-color: var.$color-white; - border-radius: 50%; - transition: 0.2s; - user-select: none; - - &:hover, - &.hover, - &.dragging { - transform: scale(1.2); - } - - &:hover, - &.hover { - cursor: grab; - } - - &.dragging { - cursor: grabbing; - } - } - - @include mixins.e(stop) { - position: absolute; - height: var.$slider-height; - width: var.$slider-height; - border-radius: var.$border-radius-circle; - background-color: var.$slider-stop-background-color; - transform: translateX(-50%); - } - - @include mixins.e(marks) { - top: 0; - left: 12px; - width: 18px; - height: 100%; - - @include mixins.e(marks-text) { - position: absolute; - transform: translateX(-50%); - font-size: 14px; - color: var(--color-info); - margin-top: 15px; - } - } - - @include mixins.when(vertical) { - position: relative; - .el-slider__runway { - width: var.$slider-height; - height: 100%; - margin: 0 16px; - } - .el-slider__bar { - width: var.$slider-height; - height: auto; - border-radius: 0 0 3px 3px; - } - .el-slider__button-wrapper { - top: auto; - left: var.$slider-button-wrapper-offset; - transform: translateY(50%); - } - .el-slider__stop { - transform: translateY(50%); - } - &.el-slider--with-input { - padding-bottom: #{var.$input-medium-height + 22px}; - .el-slider__input { - overflow: visible; - float: none; - position: absolute; - bottom: 22px; - width: 36px; - margin-top: 15px; - .el-input__inner { - text-align: center; - padding-left: 5px; - padding-right: 5px; - } - .el-input-number__decrease, - .el-input-number__increase { - top: var.$input-small-height; - margin-top: -1px; - border: var.$input-border; - line-height: 20px; - box-sizing: border-box; - transition: var.$border-transition-base; - } - .el-input-number__decrease { - width: 18px; - right: 18px; - border-bottom-left-radius: var.$input-border-radius; - } - .el-input-number__increase { - width: 19px; - border-bottom-right-radius: var.$input-border-radius; - & ~ .el-input .el-input__inner { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - } - &:hover { - .el-input-number__decrease, - .el-input-number__increase { - border-color: var.$input-hover-border; - } - } - &:active { - .el-input-number__decrease, - .el-input-number__increase { - border-color: var.$input-focus-border; - } - } - } - } - - @include mixins.e(marks-text) { - margin-top: 0; - left: 15px; - transform: translateY(50%); - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/spinner.scss b/packages/frontend/@n8n/design-system/src/css/spinner.scss deleted file mode 100644 index 9569056c31..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/spinner.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use 'mixins/mixins'; - -@include mixins.b(time-spinner) { - width: 100%; - white-space: nowrap; -} - -@include mixins.b(spinner) { - display: inline-block; - vertical-align: middle; -} -@include mixins.b(spinner-inner) { - animation: rotate 2s linear infinite; - width: 50px; - height: 50px; - - & .path { - stroke: #ececec; - stroke-linecap: round; - animation: dash 1.5s ease-in-out infinite; - } -} - -@keyframes rotate { - 100% { - transform: rotate(360deg); - } -} - -@keyframes dash { - 0% { - stroke-dasharray: 1, 150; - stroke-dashoffset: 0; - } - 50% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -35; - } - 100% { - stroke-dasharray: 90, 150; - stroke-dashoffset: -124; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/step.scss b/packages/frontend/@n8n/design-system/src/css/step.scss deleted file mode 100644 index dd9c94c726..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/step.scss +++ /dev/null @@ -1,316 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(step) { - position: relative; - flex-shrink: 1; - - @include mixins.pseudo(last-of-type) { - @include mixins.e(line) { - display: none; - } - - // 只有未设置 space 的情况下才自适应宽度 - @include mixins.when(flex) { - flex-basis: auto !important; - flex-shrink: 0; - flex-grow: 0; - } - - @include mixins.e((main, description)) { - padding-right: 0; - } - } - - @include mixins.e(head) { - position: relative; - width: 100%; - - @include mixins.when(process) { - color: var(--color-text-dark); - border-color: var(--color-text-dark); - } - - @include mixins.when(wait) { - color: var(--color-text-lighter); - border-color: var(--color-text-lighter); - } - - @include mixins.when(success) { - color: var(--color-success); - border-color: var(--color-success); - } - - @include mixins.when(error) { - color: var(--color-danger); - border-color: var(--color-danger); - } - - @include mixins.when(finish) { - color: var(--color-primary); - border-color: var(--color-primary); - } - } - - @include mixins.e(icon) { - position: relative; - z-index: 1; - display: inline-flex; - justify-content: center; - align-items: center; - width: 24px; - height: 24px; - font-size: 14px; - box-sizing: border-box; - background: var.$color-white; - transition: 0.15s ease-out; - - @include mixins.when(text) { - border-radius: 50%; - border: 2px solid; - border-color: inherit; - } - - @include mixins.when(icon) { - width: 40px; - } - } - - @include mixins.e(icon-inner) { - display: inline-block; - user-select: none; - text-align: center; - font-weight: var(--font-weight-bold); - line-height: 1; - color: inherit; - - &[class*='el-icon']:not(.is-status) { - font-size: 25px; - font-weight: var(--font-weight-regular); - } - - // 组件自身表示状态的图标 - @include mixins.when(status) { - transform: translateY(1px); - } - } - - @include mixins.e(line) { - position: absolute; - border-color: inherit; - background-color: var(--color-text-lighter); - } - - @include mixins.e(line-inner) { - display: block; - border-width: 1px; - border-style: solid; - border-color: inherit; - transition: 0.15s ease-out; - box-sizing: border-box; - width: 0; - height: 0; - } - - @include mixins.e(main) { - white-space: normal; - text-align: left; - } - - @include mixins.e(title) { - font-size: 16px; - line-height: 38px; - - @include mixins.when(process) { - font-weight: var(--font-weight-bold); - color: var(--color-text-dark); - } - - @include mixins.when(wait) { - color: var(--color-text-lighter); - } - - @include mixins.when(success) { - color: var(--color-success); - } - - @include mixins.when(error) { - color: var(--color-danger); - } - - @include mixins.when(finish) { - color: var(--color-primary); - } - } - - @include mixins.e(description) { - padding-right: 10%; - margin-top: -5px; - font-size: 12px; - line-height: 20px; - font-weight: var(--font-weight-regular); - - @include mixins.when(process) { - color: var(--color-text-dark); - } - - @include mixins.when(wait) { - color: var(--color-text-lighter); - } - - @include mixins.when(success) { - color: var(--color-success); - } - - @include mixins.when(error) { - color: var(--color-danger); - } - - @include mixins.when(finish) { - color: var(--color-primary); - } - } - - @include mixins.when(horizontal) { - display: inline-block; - - @include mixins.e(line) { - height: 2px; - top: 11px; - left: 0; - right: 0; - } - } - - @include mixins.when(vertical) { - display: flex; - - @include mixins.e(head) { - flex-grow: 0; - width: 24px; - } - - @include mixins.e(main) { - padding-left: 10px; - flex-grow: 1; - } - - @include mixins.e(title) { - line-height: 24px; - padding-bottom: 8px; - } - - @include mixins.e(line) { - width: 2px; - top: 0; - bottom: 0; - left: 11px; - } - - @include mixins.e(icon) { - @include mixins.when(icon) { - width: 24px; - } - } - } - - @include mixins.when(center) { - @include mixins.e(head) { - text-align: center; - } - - @include mixins.e(main) { - text-align: center; - } - - @include mixins.e(description) { - padding-left: 20%; - padding-right: 20%; - } - - @include mixins.e(line) { - left: 50%; - right: -50%; - } - } - - @include mixins.when(simple) { - display: flex; - align-items: center; - - @include mixins.e(head) { - width: auto; - font-size: 0; - padding-right: 10px; - } - - @include mixins.e(icon) { - background: transparent; - width: 16px; - height: 16px; - font-size: 12px; - } - - @include mixins.e(icon-inner) { - &[class*='el-icon']:not(.is-status) { - font-size: 18px; - } - - &.is-status { - transform: scale(0.8) translateY(1px); - } - } - - @include mixins.e(main) { - position: relative; - display: flex; - align-items: stretch; - flex-grow: 1; - } - - @include mixins.e(title) { - font-size: 16px; - line-height: 20px; - } - - @include mixins.pseudo('not(:last-of-type)') { - @include mixins.e(title) { - max-width: 50%; - word-break: break-all; - } - } - - @include mixins.e(arrow) { - flex-grow: 1; - display: flex; - align-items: center; - justify-content: center; - - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - height: 15px; - width: 1px; - background: var(--color-text-lighter); - } - - &::before { - transform: rotate(-45deg) translateY(-4px); - transform-origin: 0 0; - } - - &::after { - transform: rotate(45deg) translateY(4px); - transform-origin: 100% 100%; - } - } - - @include mixins.pseudo(last-of-type) { - @include mixins.e(arrow) { - display: none; - } - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/steps.scss b/packages/frontend/@n8n/design-system/src/css/steps.scss deleted file mode 100644 index d83744ace5..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/steps.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use 'mixins/mixins'; -@use 'common/var'; - -@include mixins.b(steps) { - display: flex; - - @include mixins.m(simple) { - padding: 13px 8%; - border-radius: 4px; - background: var.$background-color-base; - } - - @include mixins.m(horizontal) { - white-space: nowrap; - } - - @include mixins.m(vertical) { - height: 100%; - flex-flow: column; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/submenu.scss b/packages/frontend/@n8n/design-system/src/css/submenu.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/tab-pane.scss b/packages/frontend/@n8n/design-system/src/css/tab-pane.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/frontend/@n8n/design-system/src/css/tabs.scss b/packages/frontend/@n8n/design-system/src/css/tabs.scss index a755e45bb0..ec2a5aad0a 100644 --- a/packages/frontend/@n8n/design-system/src/css/tabs.scss +++ b/packages/frontend/@n8n/design-system/src/css/tabs.scss @@ -301,7 +301,7 @@ border: 1px solid transparent; } .el-tabs__item.is-bottom { - margin: 0 -1px -1px -1px; + margin: 0 -1px -1px; } } } diff --git a/packages/frontend/@n8n/design-system/src/css/time-picker.scss b/packages/frontend/@n8n/design-system/src/css/time-picker.scss deleted file mode 100644 index 59d4b704bf..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/time-picker.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use './date-picker/picker.scss'; -@use './date-picker/picker-panel.scss'; -@use './date-picker/time-spinner.scss'; -@use './date-picker/time-picker.scss'; -@use './date-picker/time-range-picker.scss'; -@use './input.scss'; -@use './scrollbar.scss'; -@use './popper'; diff --git a/packages/frontend/@n8n/design-system/src/css/time-select.scss b/packages/frontend/@n8n/design-system/src/css/time-select.scss deleted file mode 100644 index 869a650749..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/time-select.scss +++ /dev/null @@ -1,37 +0,0 @@ -@use './common/var'; -@use './date-picker/picker.scss'; -@use './date-picker/date-picker.scss'; -@use './scrollbar.scss'; -@use './popper'; - -.time-select { - margin: 5px 0; - min-width: 0; -} - -.time-select .el-picker-panel__content { - max-height: 200px; - margin: 0; -} - -.time-select-item { - padding: 8px 10px; - font-size: 14px; - line-height: 20px; -} - -.time-select-item.selected:not(.disabled) { - color: var(--color-primary); - font-weight: var(--font-weight-bold); -} - -.time-select-item.disabled { - color: var.$datepicker-border-color; - cursor: not-allowed; -} - -.time-select-item:hover { - background-color: var.$background-color-base; - font-weight: var(--font-weight-bold); - cursor: pointer; -} diff --git a/packages/frontend/@n8n/design-system/src/css/timeline-item.scss b/packages/frontend/@n8n/design-system/src/css/timeline-item.scss deleted file mode 100644 index 02b256eba8..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/timeline-item.scss +++ /dev/null @@ -1,86 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(timeline-item) { - position: relative; - padding-bottom: 20px; - - @include mixins.e(wrapper) { - position: relative; - padding-left: 28px; - top: -3px; - } - - @include mixins.e(tail) { - position: absolute; - left: 4px; - height: 100%; - border-left: 2px solid var.$timeline-node-color; - } - - @include mixins.e(icon) { - color: var.$color-white; - font-size: var.$font-size-small; - } - - @include mixins.e(node) { - position: absolute; - background-color: var.$timeline-node-color; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - - @include mixins.m(normal) { - left: -1px; - width: var.$timeline-node-size-normal; - height: var.$timeline-node-size-normal; - } - @include mixins.m(large) { - left: -2px; - width: var.$timeline-node-size-large; - height: var.$timeline-node-size-large; - } - - @include mixins.m(primary) { - background-color: var(--color-primary); - } - @include mixins.m(success) { - background-color: var(--color-success); - } - @include mixins.m(warning) { - background-color: var(--color-warning); - } - @include mixins.m(danger) { - background-color: var(--color-danger); - } - @include mixins.m(info) { - background-color: var(--color-info); - } - } - - @include mixins.e(dot) { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - } - - @include mixins.e(content) { - color: var(--color-text-dark); - } - - @include mixins.e(timestamp) { - color: var(--color-text-light); - line-height: 1; - font-size: var.$font-size-small; - - @include mixins.when(top) { - margin-bottom: 8px; - padding-top: 4px; - } - @include mixins.when(bottom) { - margin-top: 8px; - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/timeline.scss b/packages/frontend/@n8n/design-system/src/css/timeline.scss deleted file mode 100644 index 2b5e9edb7e..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/timeline.scss +++ /dev/null @@ -1,14 +0,0 @@ -@use 'mixins/mixins'; -@use './common/var'; - -@include mixins.b(timeline) { - margin: 0; - font-size: var.$font-size-base; - list-style: none; - - & .el-timeline-item:last-child { - & .el-timeline-item__tail { - display: none; - } - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/transfer.scss b/packages/frontend/@n8n/design-system/src/css/transfer.scss index 72ec32c55c..bb8752bd5f 100644 --- a/packages/frontend/@n8n/design-system/src/css/transfer.scss +++ b/packages/frontend/@n8n/design-system/src/css/transfer.scss @@ -3,7 +3,6 @@ @use './common/var'; @use 'input'; @use 'checkbox'; -@use 'checkbox-group'; @include mixins.b(transfer) { font-size: var.$font-size-base; diff --git a/packages/frontend/@n8n/design-system/src/css/upload.scss b/packages/frontend/@n8n/design-system/src/css/upload.scss deleted file mode 100644 index f1446c8a08..0000000000 --- a/packages/frontend/@n8n/design-system/src/css/upload.scss +++ /dev/null @@ -1,609 +0,0 @@ -@use 'mixins/mixins'; -@use 'progress'; -@use './common/var'; -@use 'mixins/utils'; - -@include mixins.b(upload) { - display: inline-block; - text-align: center; - cursor: pointer; - outline: none; - @include mixins.e(input) { - display: none; - } - - @include mixins.e(tip) { - font-size: 12px; - color: var(--color-text-dark); - margin-top: 7px; - } - - iframe { - position: absolute; - z-index: -1; - top: 0; - left: 0; - opacity: 0; - filter: alpha(opacity=0); - } - - /* 照片墙模式 */ - @include mixins.m(picture-card) { - background-color: #fbfdff; - border: 1px dashed #c0ccda; - border-radius: 6px; - box-sizing: border-box; - width: 148px; - height: 148px; - cursor: pointer; - line-height: 146px; - vertical-align: top; - - i { - font-size: 28px; - color: #8c939d; - } - - &:hover { - border-color: var(--color-primary); - color: var(--color-primary); - } - } - &:focus { - border-color: var(--color-primary); - color: var(--color-primary); - - .el-upload-dragger { - border-color: var(--color-primary); - } - } -} - -@include mixins.b(upload-dragger) { - background-color: var(--color-foreground-xlight); - border: 1px dashed #d9d9d9; - border-radius: 6px; - box-sizing: border-box; - width: 360px; - height: 180px; - text-align: center; - cursor: pointer; - position: relative; - overflow: hidden; - - .el-icon-upload { - font-size: 67px; - color: var(--color-text-lighter); - margin: 40px 0 16px; - line-height: 50px; - } - - + .el-upload__tip { - text-align: center; - } - - ~ .el-upload__files { - border-top: var(--border-base); - margin-top: 7px; - padding-top: 5px; - } - - .el-upload__text { - color: var(--color-text-dark); - font-size: 14px; - text-align: center; - - em { - color: var(--color-primary); - font-style: normal; - } - } - - &:hover { - border-color: var(--color-primary); - } - - @include mixins.when(dragover) { - background-color: rgba(32, 159, 255, 0.06); - border: 2px dashed var(--color-primary); - } -} - -@include mixins.b(upload-list) { - margin: 0; - padding: 0; - list-style: none; - - @include mixins.e(item) { - transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1); - font-size: 14px; - color: var(--color-text-dark); - line-height: 1.8; - margin-top: 5px; - position: relative; - box-sizing: border-box; - border-radius: 4px; - width: 100%; - - .el-progress { - position: absolute; - top: 20px; - width: 100%; - } - - .el-progress__text { - position: absolute; - right: 0; - top: -13px; - } - - .el-progress-bar { - margin-right: 0; - padding-right: 0; - } - - &:first-child { - margin-top: 10px; - } - - & .el-icon-upload-success { - color: var(--color-success); - } - - .el-icon-close { - display: none; - position: absolute; - top: 5px; - right: 5px; - cursor: pointer; - opacity: 0.75; - color: var(--color-text-dark); - //transform: scale(.7); - - &:hover { - opacity: 1; - } - } - - & .el-icon-close-tip { - display: none; - position: absolute; - top: 5px; - right: 5px; - font-size: 12px; - cursor: pointer; - opacity: 1; - color: var(--color-primary); - } - - &:hover { - background-color: var.$background-color-base; - - .el-icon-close { - display: inline-block; - } - - .el-progress__text { - display: none; - } - } - - @include mixins.when(success) { - .el-upload-list__item-status-label { - display: block; - } - - .el-upload-list__item-name:hover, - .el-upload-list__item-name:focus { - color: var.$link-color-hover; - cursor: pointer; - } - - &:focus:not(:hover) { - /* 键盘focus */ - .el-icon-close-tip { - display: inline-block; - } - } - - &:not(.focusing):focus, - &:active { - /* click时 */ - outline-width: 0; - .el-icon-close-tip { - display: none; - } - } - - &:hover, - &:focus { - .el-upload-list__item-status-label { - display: none; - } - } - } - } - - @include mixins.when(disabled) { - .el-upload-list__item:hover .el-upload-list__item-status-label { - display: block; - } - } - - @include mixins.e(item-name) { - color: var(--color-text-dark); - display: block; - margin-right: 40px; - overflow: hidden; - padding-left: 4px; - text-overflow: ellipsis; - transition: color 0.3s; - white-space: nowrap; - - [class^='el-icon'] { - height: 100%; - margin-right: 7px; - color: var(--color-text-light); - line-height: inherit; - } - } - - @include mixins.e(item-status-label) { - position: absolute; - right: 5px; - top: 0; - line-height: inherit; - display: none; - } - - @include mixins.e(item-delete) { - position: absolute; - right: 10px; - top: 0; - font-size: 12px; - color: var(--color-text-dark); - display: none; - - &:hover { - color: var(--color-primary); - } - } - - @include mixins.m(picture-card) { - margin: 0; - display: inline; - vertical-align: top; - - .el-upload-list__item { - overflow: hidden; - background-color: var(--color-foreground-xlight); - border: 1px solid #c0ccda; - border-radius: 6px; - box-sizing: border-box; - width: 148px; - height: 148px; - margin: 0 8px 8px 0; - display: inline-block; - - .el-icon-check, - .el-icon-circle-check { - color: var.$color-white; - } - - .el-icon-close { - display: none; - } - &:hover { - .el-upload-list__item-status-label { - display: none; - } - - .el-progress__text { - display: block; - } - } - } - - .el-upload-list__item-name { - display: none; - } - - .el-upload-list__item-thumbnail { - width: 100%; - height: 100%; - } - - .el-upload-list__item-status-label { - position: absolute; - right: -15px; - top: -6px; - width: 40px; - height: 24px; - background: #13ce66; - text-align: center; - transform: rotate(45deg); - box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); - - i { - font-size: 12px; - margin-top: 11px; - transform: rotate(-45deg); - } - } - - .el-upload-list__item-actions { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - cursor: default; - text-align: center; - color: var(--color-foreground-xlight); - opacity: 0; - font-size: 20px; - background-color: rgba(0, 0, 0, 0.5); - transition: opacity 0.3s; - &::after { - display: inline-block; - content: ''; - height: 100%; - vertical-align: middle; - } - - span { - display: none; - cursor: pointer; - } - - span + span { - margin-left: 15px; - } - - .el-upload-list__item-delete { - position: static; - font-size: inherit; - color: inherit; - } - - &:hover { - opacity: 1; - span { - display: inline-block; - } - } - } - - .el-progress { - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - bottom: auto; - width: 126px; - - .el-progress__text { - top: 50%; - } - } - } - - @include mixins.m(picture) { - .el-upload-list__item { - overflow: hidden; - z-index: 0; - background-color: var(--color-foreground-xlight); - border: 1px solid #c0ccda; - border-radius: 6px; - box-sizing: border-box; - margin-top: 10px; - padding: 10px 10px 10px 90px; - height: 92px; - - .el-icon-check, - .el-icon-circle-check { - color: var.$color-white; - } - - &:hover { - .el-upload-list__item-status-label { - background: transparent; - box-shadow: none; - top: -2px; - right: -12px; - } - - .el-progress__text { - display: block; - } - } - - &.is-success { - .el-upload-list__item-name { - line-height: 70px; - margin-top: 0; - i { - display: none; - } - } - } - } - - .el-upload-list__item-thumbnail { - vertical-align: middle; - display: inline-block; - width: 70px; - height: 70px; - float: left; - position: relative; - z-index: 1; - margin-left: -80px; - background-color: var.$color-white; - } - - .el-upload-list__item-name { - display: block; - margin-top: 20px; - - i { - font-size: 70px; - line-height: 1; - position: absolute; - left: 9px; - top: 10px; - } - } - - .el-upload-list__item-status-label { - position: absolute; - right: -17px; - top: -7px; - width: 46px; - height: 26px; - background: #13ce66; - text-align: center; - transform: rotate(45deg); - box-shadow: 0 1px 1px var(--color-text-light); - - i { - font-size: 12px; - margin-top: 12px; - transform: rotate(-45deg); - } - } - - .el-progress { - position: relative; - top: -7px; - } - } -} - -@include mixins.b(upload-cover) { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: hidden; - z-index: 10; - cursor: default; - @include utils.utils-vertical-center; - - img { - display: block; - width: 100%; - height: 100%; - } - - @include mixins.e(label) { - position: absolute; - right: -15px; - top: -6px; - width: 40px; - height: 24px; - background: #13ce66; - text-align: center; - transform: rotate(45deg); - box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2); - - i { - font-size: 12px; - margin-top: 11px; - transform: rotate(-45deg); - color: var(--color-foreground-xlight); - } - } - - @include mixins.e(progress) { - display: inline-block; - vertical-align: middle; - position: static; - width: 243px; - - + .el-upload__inner { - opacity: 0; - } - } - - @include mixins.e(content) { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - @include mixins.e(interact) { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(#000, 0.72); - text-align: center; - - .btn { - display: inline-block; - color: var.$color-white; - font-size: 14px; - cursor: pointer; - vertical-align: middle; - transition: var.$md-fade-transition; - margin-top: 60px; - - i { - margin-top: 0; - } - - span { - opacity: 0; - transition: opacity 0.15s linear; - } - - &:not(:first-child) { - margin-left: 35px; - } - - &:hover { - transform: translateY(-13px); - - span { - opacity: 1; - } - } - - i { - color: var.$color-white; - display: block; - font-size: 24px; - line-height: inherit; - margin: 0 auto 5px; - } - } - } - - @include mixins.e(title) { - position: absolute; - bottom: 0; - left: 0; - background-color: var.$color-white; - height: 36px; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-weight: var(--font-weight-regular); - text-align: left; - padding: 0 10px; - margin: 0; - line-height: 36px; - font-size: 14px; - color: var(--color-text-dark); - } - - + .el-upload__inner { - opacity: 0; - position: relative; - z-index: 1; - } -} diff --git a/packages/frontend/@n8n/design-system/src/css/utilities/index.scss b/packages/frontend/@n8n/design-system/src/css/utilities/index.scss index e79fb2651a..1eca711bad 100644 --- a/packages/frontend/@n8n/design-system/src/css/utilities/index.scss +++ b/packages/frontend/@n8n/design-system/src/css/utilities/index.scss @@ -1,5 +1,5 @@ -@import 'float'; -@import 'link'; -@import 'list'; -@import 'spacing'; -@import 'typography'; +@use 'float'; +@use 'link'; +@use 'list'; +@use 'spacing'; +@use 'typography'; diff --git a/packages/frontend/@n8n/design-system/stylelint.config.mjs b/packages/frontend/@n8n/design-system/stylelint.config.mjs new file mode 100644 index 0000000000..a86e148c67 --- /dev/null +++ b/packages/frontend/@n8n/design-system/stylelint.config.mjs @@ -0,0 +1,3 @@ +import { baseConfig } from '@n8n/stylelint-config/base'; + +export default baseConfig; diff --git a/packages/frontend/editor-ui/package.json b/packages/frontend/editor-ui/package.json index d9e8764fe7..374c84fc32 100644 --- a/packages/frontend/editor-ui/package.json +++ b/packages/frontend/editor-ui/package.json @@ -12,6 +12,8 @@ "dev": "pnpm serve", "lint": "eslint src --quiet", "lint:fix": "eslint src --fix", + "lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache", + "lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache", "format": "biome format --write . && prettier --write . --ignore-path ../../../.prettierignore", "format:check": "biome ci . && prettier --check . --ignore-path ../../../.prettierignore", "serve": "cross-env VUE_APP_URL_BASE_API=http://localhost:5678/ vite --host 0.0.0.0 --port 8080 dev", @@ -107,6 +109,7 @@ "@faker-js/faker": "^8.0.2", "@iconify/json": "^2.2.349", "@n8n/eslint-config": "workspace:*", + "@n8n/stylelint-config": "workspace:*", "@n8n/typescript-config": "workspace:*", "@n8n/vitest-config": "workspace:*", "@pinia/testing": "^0.1.6", diff --git a/packages/frontend/editor-ui/src/components/ApiKeyScopes.vue b/packages/frontend/editor-ui/src/components/ApiKeyScopes.vue index 860e4b7772..533d21912e 100644 --- a/packages/frontend/editor-ui/src/components/ApiKeyScopes.vue +++ b/packages/frontend/editor-ui/src/components/ApiKeyScopes.vue @@ -163,7 +163,7 @@ function goToUpgradeApiKeyScopes() { } .scopes-dropdown-container :global(.el-select-group__wrap:not(:last-of-type)) { - padding: 0px; + padding: 0; margin-bottom: var(--spacing-xs); } diff --git a/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue b/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue index 8feffb7b4b..f9c5ff4e31 100644 --- a/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue +++ b/packages/frontend/editor-ui/src/components/DropArea/DropArea.vue @@ -32,7 +32,7 @@ const onDrop = (value: string) => { justify-content: center; font-size: var(--font-size-s); transition: border-color 0.1s ease-in; - box-shadow: inset 0 0 0px 1.5px var(--color-background-xlight); + box-shadow: inset 0 0 0 1.5px var(--color-background-xlight); &:not(.active):hover { border-color: var(--color-ndv-droppable-parameter); diff --git a/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue b/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue index dcf4e17d1d..9eb85080b3 100644 --- a/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue +++ b/packages/frontend/editor-ui/src/components/Error/NodeErrorView.vue @@ -748,6 +748,7 @@ async function onAskAssistantClick() { &__button { margin-left: var(--spacing-s); margin-bottom: var(--spacing-xs); + margin-top: var(--spacing-xs); flex-direction: row-reverse; span { margin-right: var(--spacing-5xs); @@ -887,8 +888,4 @@ async function onAskAssistantClick() { } } } - -.node-error-view__button { - margin-top: var(--spacing-xs); -} diff --git a/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue b/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue index 5d89f4aaa0..8099a51774 100644 --- a/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue +++ b/packages/frontend/editor-ui/src/components/Evaluations.ee/shared/TableStatusCell.vue @@ -102,5 +102,3 @@ function getErrorTooltipUrl(column: TestTableColumn, row: T): string | undefi - - diff --git a/packages/frontend/editor-ui/src/components/ExpressionFunctionIcon.vue b/packages/frontend/editor-ui/src/components/ExpressionFunctionIcon.vue index 156f54f9a0..65d2c68eae 100644 --- a/packages/frontend/editor-ui/src/components/ExpressionFunctionIcon.vue +++ b/packages/frontend/editor-ui/src/components/ExpressionFunctionIcon.vue @@ -12,5 +12,3 @@ export default { /> - - diff --git a/packages/frontend/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue b/packages/frontend/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue index ed7dd15e14..5a0eee62b9 100644 --- a/packages/frontend/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue +++ b/packages/frontend/editor-ui/src/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue @@ -83,6 +83,13 @@ onBeforeUnmount(() => { .body { padding: var(--spacing-3xs); + padding-top: 0; + padding-left: var(--spacing-2xs); + color: var(--color-text-dark); + + &:first-child { + padding-top: var(--spacing-2xs); + } } .footer { @@ -99,15 +106,5 @@ onBeforeUnmount(() => { padding: 0 var(--spacing-2xs); padding-top: var(--spacing-2xs); } - - .body { - padding-top: 0; - padding-left: var(--spacing-2xs); - color: var(--color-text-dark); - - &:first-child { - padding-top: var(--spacing-2xs); - } - } } diff --git a/packages/frontend/editor-ui/src/components/Logo/Logo.vue b/packages/frontend/editor-ui/src/components/Logo/Logo.vue index 58ff64f251..067c7f731b 100644 --- a/packages/frontend/editor-ui/src/components/Logo/Logo.vue +++ b/packages/frontend/editor-ui/src/components/Logo/Logo.vue @@ -80,16 +80,16 @@ onMounted(() => { .authView { transform: scale(2); margin-bottom: var(--spacing-xl); -} -.logo, -.logoText { - transform: scale(1.3) translateY(-2px); -} + .logo, + .logoText { + transform: scale(1.3) translateY(-2px); + } -.logoText { - margin-left: var(--spacing-xs); - margin-right: var(--spacing-3xs); + .logoText { + margin-left: var(--spacing-xs); + margin-right: var(--spacing-3xs); + } } .sidebarExpanded .logo { diff --git a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue index 203160bb78..c092439397 100644 --- a/packages/frontend/editor-ui/src/components/MfaSetupModal.vue +++ b/packages/frontend/editor-ui/src/components/MfaSetupModal.vue @@ -303,7 +303,7 @@ onMounted(async () => { } .textContainer { text-align: left; - margin: 0px; + margin: 0; margin-bottom: 5px; } diff --git a/packages/frontend/editor-ui/src/components/ModalDrawer.vue b/packages/frontend/editor-ui/src/components/ModalDrawer.vue index 280ae36bdf..6edd42ffe6 100644 --- a/packages/frontend/editor-ui/src/components/ModalDrawer.vue +++ b/packages/frontend/editor-ui/src/components/ModalDrawer.vue @@ -95,7 +95,7 @@ onBeforeUnmount(() => { diff --git a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue index 5b4269941a..2d01708cbd 100644 --- a/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue +++ b/packages/frontend/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue @@ -80,7 +80,7 @@ defineExpose({ padding: 0 var(--spacing-xs); align-items: center; margin: var(--search-margin, var(--spacing-s)); - filter: drop-shadow(0px 2px 5px rgba(46, 46, 50, 0.04)); + filter: drop-shadow(0 2px 5px rgba(46, 46, 50, 0.04)); border: 1px solid $node-creator-border-color; background-color: $node-creator-search-background-color; diff --git a/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue b/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue index 5d968c75bd..66c7316c26 100644 --- a/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue +++ b/packages/frontend/editor-ui/src/components/NodeDetailsViewV2.vue @@ -880,10 +880,13 @@ onBeforeUnmount(() => { } .main { - width: 0; + width: 100%; flex-grow: 1; display: flex; align-items: stretch; + height: 100%; + min-height: 0; + position: relative; } .column { @@ -917,14 +920,6 @@ onBeforeUnmount(() => { border-top-right-radius: var(--border-radius-large); } -.main { - display: flex; - width: 100%; - height: 100%; - min-height: 0; - position: relative; -} - .settings { overflow: hidden; flex-grow: 1; diff --git a/packages/frontend/editor-ui/src/components/NodeList.vue b/packages/frontend/editor-ui/src/components/NodeList.vue index 71255ebde6..8a34bb5b81 100644 --- a/packages/frontend/editor-ui/src/components/NodeList.vue +++ b/packages/frontend/editor-ui/src/components/NodeList.vue @@ -70,7 +70,7 @@ const countNodesToBeSliced = (nodes: ITemplatesNode[]): number => { margin-left: var(--spacing-xs); } .button { - top: 0px; + top: 0; position: relative; display: flex; justify-content: center; diff --git a/packages/frontend/editor-ui/src/components/NodeSettings.vue b/packages/frontend/editor-ui/src/components/NodeSettings.vue index 58ac26efc0..02413fce08 100644 --- a/packages/frontend/editor-ui/src/components/NodeSettings.vue +++ b/packages/frontend/editor-ui/src/components/NodeSettings.vue @@ -892,7 +892,7 @@ function handleSelectAction(params: INodeParameters) { &.dragging { border-color: var(--color-primary); - box-shadow: 0px 6px 16px rgba(255, 74, 51, 0.15); + box-shadow: 0 6px 16px rgba(255, 74, 51, 0.15); } } diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue index f11d113997..34e82ab74c 100644 --- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue +++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideButton.vue @@ -32,7 +32,7 @@ const emit = defineEmits<{ .overrideButton { display: flex; justify-content: center; - border: 0px; + border: 0; height: 30px; width: 30px; background-color: var(--color-foreground-base); diff --git a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue index 1c68e6da56..5be0db588e 100644 --- a/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue +++ b/packages/frontend/editor-ui/src/components/ParameterInputOverrides/FromAiOverrideField.vue @@ -58,8 +58,8 @@ const emit = defineEmits<{ } .overrideCloseButton { - padding: 0px var(--spacing-2xs); - border: 0px; + padding: 0 var(--spacing-2xs); + border: 0; color: var(--color-text-base); margin-left: auto; --button-hover-background-color: transparent; diff --git a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue index 70f44c36b0..0286edae5c 100644 --- a/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue +++ b/packages/frontend/editor-ui/src/components/ResourceLocator/ResourceLocator.vue @@ -1112,5 +1112,5 @@ function removeOverride() { diff --git a/packages/frontend/editor-ui/src/components/RunData.vue b/packages/frontend/editor-ui/src/components/RunData.vue index 5e41b8bd79..9cd930b209 100644 --- a/packages/frontend/editor-ui/src/components/RunData.vue +++ b/packages/frontend/editor-ui/src/components/RunData.vue @@ -2119,15 +2119,15 @@ defineExpose({ enterEditMode }); } .spinner { + display: flex; + justify-content: center; + margin-bottom: var(--ndv-spacing); + * { color: var(--color-primary); min-height: 40px; min-width: 40px; } - - display: flex; - justify-content: center; - margin-bottom: var(--ndv-spacing); } .editMode { diff --git a/packages/frontend/editor-ui/src/components/RunDataParsedAiContent.vue b/packages/frontend/editor-ui/src/components/RunDataParsedAiContent.vue index 83fef2a825..4522043fb0 100644 --- a/packages/frontend/editor-ui/src/components/RunDataParsedAiContent.vue +++ b/packages/frontend/editor-ui/src/components/RunDataParsedAiContent.vue @@ -157,43 +157,41 @@ function onCopyToClipboard(object: IDataObject | IDataObject[]) { } .markdown { - & { + white-space: pre-wrap; + + h1 { + font-size: var(--font-size-l); + line-height: var(--font-line-height-xloose); + } + + h2 { + font-size: var(--font-size-m); + line-height: var(--font-line-height-loose); + } + + h3 { + font-size: var(--font-size-s); + line-height: var(--font-line-height-regular); + } + + pre { + background: var(--chat--message--pre--background); + border-radius: var(--border-radius-base); + line-height: var(--font-line-height-xloose); + padding: var(--spacing-s); + font-size: var(--font-size-s); white-space: pre-wrap; - h1 { - font-size: var(--font-size-l); + .compact & { + padding: var(--spacing-3xs); + font-size: var(--font-size-xs); + } + } + + p { + .compact & { line-height: var(--font-line-height-xloose); } - - h2 { - font-size: var(--font-size-m); - line-height: var(--font-line-height-loose); - } - - h3 { - font-size: var(--font-size-s); - line-height: var(--font-line-height-regular); - } - - pre { - background: var(--chat--message--pre--background); - border-radius: var(--border-radius-base); - line-height: var(--font-line-height-xloose); - padding: var(--spacing-s); - font-size: var(--font-size-s); - white-space: pre-wrap; - - .compact & { - padding: var(--spacing-3xs); - font-size: var(--font-size-xs); - } - } - - p { - .compact & { - line-height: var(--font-line-height-xloose); - } - } } } diff --git a/packages/frontend/editor-ui/src/components/RunDataSearch.vue b/packages/frontend/editor-ui/src/components/RunDataSearch.vue index 445d44f636..0415279a86 100644 --- a/packages/frontend/editor-ui/src/components/RunDataSearch.vue +++ b/packages/frontend/editor-ui/src/components/RunDataSearch.vue @@ -122,7 +122,7 @@ watch( diff --git a/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersLastActiveCell.vue b/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersLastActiveCell.vue index 70e7923c8f..4736921968 100644 --- a/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersLastActiveCell.vue +++ b/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersLastActiveCell.vue @@ -15,5 +15,3 @@ const formattedDate = computed(() => - - diff --git a/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersTable.vue b/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersTable.vue index be43f2f92d..d1657252bc 100644 --- a/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersTable.vue +++ b/packages/frontend/editor-ui/src/components/SettingsUsers/SettingsUsersTable.vue @@ -188,5 +188,3 @@ const onRoleChange = ({ role, userId }: { role: string; userId: string }) => { - - diff --git a/packages/frontend/editor-ui/src/components/TemplatesInfoCard.vue b/packages/frontend/editor-ui/src/components/TemplatesInfoCard.vue index 760d8cce97..c8b05ef72c 100644 --- a/packages/frontend/editor-ui/src/components/TemplatesInfoCard.vue +++ b/packages/frontend/editor-ui/src/components/TemplatesInfoCard.vue @@ -33,5 +33,3 @@ const i18n = useI18n(); - - diff --git a/packages/frontend/editor-ui/src/components/UpdatesPanel.vue b/packages/frontend/editor-ui/src/components/UpdatesPanel.vue index e25d7563a6..79a0e52a14 100644 --- a/packages/frontend/editor-ui/src/components/UpdatesPanel.vue +++ b/packages/frontend/editor-ui/src/components/UpdatesPanel.vue @@ -88,7 +88,7 @@ const i18n = useI18n(); } .description { - padding: 0px 30px; + padding: 0 30px; margin-block-start: 16px; margin-block-end: 30px; @@ -97,7 +97,7 @@ const i18n = useI18n(); line-height: 22px; color: $updates-panel-description-text-color; font-weight: var(--font-weight-regular); - margin: 0 0 16px 0; + margin: 0 0 16px; } div { @@ -105,7 +105,7 @@ const i18n = useI18n(); } .link { - padding-left: 0px; + padding-left: 0; display: flex; } diff --git a/packages/frontend/editor-ui/src/components/VersionCard.vue b/packages/frontend/editor-ui/src/components/VersionCard.vue index 8ca69c147c..517f63584c 100644 --- a/packages/frontend/editor-ui/src/components/VersionCard.vue +++ b/packages/frontend/editor-ui/src/components/VersionCard.vue @@ -80,7 +80,7 @@ const nodeName = (node: VersionNode): string => { text-decoration: none; &:hover { - box-shadow: 0px 2px 10px $version-card-box-shadow-color; + box-shadow: 0 2px 10px $version-card-box-shadow-color; } } @@ -112,7 +112,7 @@ const nodeName = (node: VersionNode): string => { .divider { border-bottom: $version-card-border; width: 100%; - margin: 10px 0 15px 0; + margin: 10px 0 15px; } .description { diff --git a/packages/frontend/editor-ui/src/components/VirtualSchema.vue b/packages/frontend/editor-ui/src/components/VirtualSchema.vue index 0c689e5f54..5e0ce41d7a 100644 --- a/packages/frontend/editor-ui/src/components/VirtualSchema.vue +++ b/packages/frontend/editor-ui/src/components/VirtualSchema.vue @@ -570,9 +570,6 @@ const onDragEnd = (el: HTMLElement) => { color: var(--color-text-base); font-size: var(--font-size-2xs); line-height: var(--font-line-height-loose); -} - -.notice { margin-left: calc(var(--spacing-l) * var(--schema-level)); } diff --git a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue index d32a96cd01..215b6902ac 100644 --- a/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue +++ b/packages/frontend/editor-ui/src/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue @@ -425,5 +425,5 @@ const onAddResourceClicked = async () => { diff --git a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue index 40153c7467..499443c425 100644 --- a/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue +++ b/packages/frontend/editor-ui/src/components/executions/workflow/WorkflowExecutionsCard.vue @@ -180,7 +180,7 @@ function onRetryMenuItemSelect(action: string): void { diff --git a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailed.vue b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailed.vue index 84a11db32f..8d23ba546c 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailed.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailed.vue @@ -55,5 +55,3 @@ const chartData = computed>(() => { - - diff --git a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailureRate.vue b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailureRate.vue index 5139117adb..3c5c918611 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailureRate.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartFailureRate.vue @@ -58,5 +58,3 @@ const chartData = computed>(() => { - - diff --git a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTimeSaved.vue b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTimeSaved.vue index b13ee48f13..b6a48fc073 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTimeSaved.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTimeSaved.vue @@ -79,5 +79,3 @@ const chartData = computed>(() => { :plugins="[Filler]" /> - - diff --git a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTotal.vue b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTotal.vue index f2ee1591cd..a81aac066e 100644 --- a/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTotal.vue +++ b/packages/frontend/editor-ui/src/features/insights/components/charts/InsightsChartTotal.vue @@ -55,5 +55,3 @@ const chartData = computed>(() => { - - diff --git a/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue b/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue index 971593b25a..2936ec01ff 100644 --- a/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue +++ b/packages/frontend/editor-ui/src/features/logs/components/ChatMessagesPanel.vue @@ -362,13 +362,6 @@ async function copySessionId() { --chat--input--file--button--color: var(--color-button-secondary-font); --chat--input--file--button--color-hover: var(--color-primary); - [data-theme='dark'] & { - --chat--input--text-color: var(--input-font-color, var(--color-text-dark)); - } - @media (prefers-color-scheme: dark) { - --chat--input--text-color: var(--input-font-color, var(--color-text-dark)); - } - padding: var(--spacing-5xs); margin: 0 var(--chat--spacing) var(--chat--spacing); flex-grow: 1; @@ -380,6 +373,13 @@ async function copySessionId() { var(--input-border-style, var(--border-style-base)) var(--input-border-width, var(--border-width-base)); + [data-theme='dark'] & { + --chat--input--text-color: var(--input-font-color, var(--color-text-dark)); + } + @media (prefers-color-scheme: dark) { + --chat--input--text-color: var(--input-font-color, var(--color-text-dark)); + } + &:focus-within { --input-border-color: #4538a3; } diff --git a/packages/frontend/editor-ui/src/features/logs/components/LogsOverviewPanel.vue b/packages/frontend/editor-ui/src/features/logs/components/LogsOverviewPanel.vue index 2118be84b4..5a15fc0562 100644 --- a/packages/frontend/editor-ui/src/features/logs/components/LogsOverviewPanel.vue +++ b/packages/frontend/editor-ui/src/features/logs/components/LogsOverviewPanel.vue @@ -218,7 +218,7 @@ watch( diff --git a/packages/frontend/editor-ui/stylelint.config.mjs b/packages/frontend/editor-ui/stylelint.config.mjs new file mode 100644 index 0000000000..a86e148c67 --- /dev/null +++ b/packages/frontend/editor-ui/stylelint.config.mjs @@ -0,0 +1,3 @@ +import { baseConfig } from '@n8n/stylelint-config/base'; + +export default baseConfig; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e409e2d673..b31e0ddc35 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1242,6 +1242,34 @@ importers: specifier: ^8.6.4 version: 8.6.4(prettier@3.3.3) + packages/@n8n/stylelint-config: + dependencies: + postcss-html: + specifier: ^1.8.0 + version: 1.8.0 + postcss-scss: + specifier: ^4.0.9 + version: 4.0.9(postcss@8.5.6) + stylelint: + specifier: ^16.23.0 + version: 16.23.0(typescript@5.8.3) + stylelint-config-standard-scss: + specifier: ^15.0.1 + version: 15.0.1(postcss@8.5.6)(stylelint@16.23.0(typescript@5.8.3)) + stylelint-scss: + specifier: ^6.12.1 + version: 6.12.1(stylelint@16.23.0(typescript@5.8.3)) + devDependencies: + '@n8n/typescript-config': + specifier: workspace:* + version: link:../typescript-config + rimraf: + specifier: 'catalog:' + version: 6.0.1 + typescript: + specifier: 5.8.3 + version: 5.8.3 + packages/@n8n/task-runner: dependencies: '@n8n/config': @@ -1877,6 +1905,9 @@ importers: specifier: workspace:* version: link:../../@n8n/extension-sdk devDependencies: + '@n8n/stylelint-config': + specifier: workspace:* + version: link:../../@n8n/stylelint-config '@n8n/typescript-config': specifier: workspace:* version: link:../../@n8n/typescript-config @@ -1935,6 +1966,9 @@ importers: '@n8n/storybook': specifier: workspace:* version: link:../../../@n8n/storybook + '@n8n/stylelint-config': + specifier: workspace:* + version: link:../../../@n8n/stylelint-config '@n8n/typescript-config': specifier: workspace:* version: link:../../../@n8n/typescript-config @@ -2083,6 +2117,9 @@ importers: '@n8n/storybook': specifier: workspace:* version: link:../../../@n8n/storybook + '@n8n/stylelint-config': + specifier: workspace:* + version: link:../../../@n8n/stylelint-config '@n8n/typescript-config': specifier: workspace:* version: link:../../../@n8n/typescript-config @@ -2591,6 +2628,9 @@ importers: '@n8n/eslint-config': specifier: workspace:* version: link:../../@n8n/eslint-config + '@n8n/stylelint-config': + specifier: workspace:* + version: link:../../@n8n/stylelint-config '@n8n/typescript-config': specifier: workspace:* version: link:../../@n8n/typescript-config @@ -4243,6 +4283,29 @@ packages: resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} engines: {node: '>=12'} + '@csstools/css-parser-algorithms@3.0.5': + resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-tokenizer@3.0.4': + resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} + engines: {node: '>=18'} + + '@csstools/media-query-list-parser@4.0.3': + resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/selector-specificity@5.0.0': + resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 + '@ctrl/tinycolor@3.6.0': resolution: {integrity: sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==} engines: {node: '>=10'} @@ -4281,6 +4344,9 @@ packages: resolution: {integrity: sha512-Y6+WUMsTFWE5jb20IFP4YGa5IrGY/+a/FbOSjDF/wz9gepU2hwCYSXRHP/vPwBvwcY3SVMASt4yXxbXNXigmZQ==} engines: {node: '>=18'} + '@dual-bundle/import-meta-resolve@4.1.0': + resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==} + '@element-plus/icons-vue@2.3.1': resolution: {integrity: sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==} peerDependencies: @@ -4937,6 +5003,9 @@ packages: '@kafkajs/confluent-schema-registry@3.8.0': resolution: {integrity: sha512-33iCTcNofWznLAy9YcfPmUVoArTzRHUOl+s79Br3+rRvwtNqRueIRBrPwGuA4tYA24VHux77qekSy0yNTHVoeA==} + '@keyv/serialize@1.1.0': + resolution: {integrity: sha512-RlDgexML7Z63Q8BSaqhXdCYNBy/JQnqYIwxofUrNLGCblOMHp+xux2Q8nLMLlPpgHQPoU0Do8Z6btCpRBEqZ8g==} + '@kurkle/color@0.3.2': resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==} @@ -8383,6 +8452,9 @@ packages: balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + balanced-match@2.0.0: + resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==} + bare-events@2.5.4: resolution: {integrity: sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==} @@ -8625,6 +8697,9 @@ packages: cache-manager@5.2.3: resolution: {integrity: sha512-9OErI8fksFkxAMJ8Mco0aiZSdphyd90HcKiOMJQncSlU1yq/9lHHxrT8PDayxrmr9IIIZPOAEfXuGSD7g29uog==} + cacheable@1.10.3: + resolution: {integrity: sha512-M6p10iJ/VT0wT7TLIGUnm958oVrU2cUK8pQAVU21Zu7h8rbk/PeRtRWrvHJBql97Bhzk3g1N6+2VKC+Rjxna9Q==} + cachedir@2.3.0: resolution: {integrity: sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==} engines: {node: '>=6'} @@ -8913,6 +8988,9 @@ packages: resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==} engines: {node: '>=12.5.0'} + colord@2.9.3: + resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} + colorette@1.4.0: resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==} @@ -9104,6 +9182,15 @@ packages: typescript: optional: true + cosmiconfig@9.0.0: + resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==} + engines: {node: '>=14'} + peerDependencies: + typescript: 5.8.3 + peerDependenciesMeta: + typescript: + optional: true + cpu-features@0.0.10: resolution: {integrity: sha512-9IkYqtX3YHPCzoVg1Py+o9057a3i0fp7S530UWokCSaFVTc7CwXPRiOjRjBQQ18ZCNafx78YfnG+HALxtVmOGA==} engines: {node: '>=10.0.0'} @@ -9182,6 +9269,10 @@ packages: resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} engines: {node: '>=4'} + css-functions-list@3.2.3: + resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==} + engines: {node: '>=12 || >=16'} + css-select@4.3.0: resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} @@ -9199,6 +9290,10 @@ packages: resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + css-tree@3.1.0: + resolution: {integrity: sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==} + engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} + css-what@6.1.0: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} @@ -10341,6 +10436,9 @@ packages: resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==} engines: {node: '>=18'} + file-entry-cache@10.1.3: + resolution: {integrity: sha512-D+w75Ub8T55yor7fPgN06rkCAUbAYw2vpxJmmjv/GDAcvCnv9g7IvHhIZoxzRZThrXPFI2maeY24pPbtyYU7Lg==} + file-entry-cache@8.0.0: resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==} engines: {node: '>=16.0.0'} @@ -10404,6 +10502,9 @@ packages: resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} engines: {node: '>=16'} + flat-cache@6.1.12: + resolution: {integrity: sha512-U+HqqpZPPXP5d24bWuRzjGqVqUcw64k4nZAbruniDwdRg0H10tvN7H6ku1tjhA4rg5B9GS3siEvwO2qjJJ6f8Q==} + flat@5.0.2: resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==} hasBin: true @@ -10689,6 +10790,14 @@ packages: resolution: {integrity: sha512-v8ho2DS5RiCjftj1nD9NmnfaOzTdud7RRnVd9kFNOjqZbISlx5DQ+OrTkywgd0dIt7oFCvKetZSHoHcP3sDdiA==} engines: {node: '>=10'} + global-modules@2.0.0: + resolution: {integrity: sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==} + engines: {node: '>=6'} + + global-prefix@3.0.0: + resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==} + engines: {node: '>=6'} + globals@11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} engines: {node: '>=4'} @@ -10717,6 +10826,9 @@ packages: resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==} engines: {node: '>=10'} + globjoin@0.1.4: + resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==} + gm@1.25.1: resolution: {integrity: sha512-jgcs2vKir9hFogGhXIfs0ODhJTfIrbECCehg38tqFgHm8zqXx7kAJyCYAFK4jTjx71AxrkFtkJBawbAxYUPX9A==} engines: {node: '>=14'} @@ -10868,6 +10980,9 @@ packages: resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==} engines: {node: '>=0.10.0'} + hookified@1.11.0: + resolution: {integrity: sha512-aDdIN3GyU5I6wextPplYdfmWCo+aLmjjVbntmX6HLD5RCi/xKsivYEBhnRD+d9224zFf008ZpLMPlWF0ZodYZw==} + html-encoding-sniffer@3.0.0: resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==} engines: {node: '>=12'} @@ -10887,6 +11002,10 @@ packages: engines: {node: '>=6'} hasBin: true + html-tags@3.3.1: + resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} + engines: {node: '>=8'} + html-to-text@9.0.5: resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==} engines: {node: '>=14'} @@ -11826,10 +11945,23 @@ packages: keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + keyv@5.4.0: + resolution: {integrity: sha512-TMckyVjEoacG5IteUpUrOBsFORtheqziVyyY2dLUwg1jwTb8u48LX4TgmtogkNl9Y9unaEJ1luj10fGyjMGFOQ==} + + kind-of@6.0.3: + resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} + engines: {node: '>=0.10.0'} + kleur@3.0.3: resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==} engines: {node: '>=6'} + known-css-properties@0.36.0: + resolution: {integrity: sha512-A+9jP+IUmuQsNdsLdcg6Yt7voiMF/D4K83ew0OpJtpu+l34ef7LaohWV0Rc6KNvzw6ZDizkqfyB5JznZnzuKQA==} + + known-css-properties@0.37.0: + resolution: {integrity: sha512-JCDrsP4Z1Sb9JwG0aJ8Eo2r7k4Ou5MwmThS/6lcIe1ICyb7UBJKGRIUUdqc2ASdE/42lgz6zFUnzAIhtXnBVrQ==} + kolorist@1.8.0: resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} @@ -12125,6 +12257,9 @@ packages: lodash.throttle@4.1.1: resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==} + lodash.truncate@4.4.2: + resolution: {integrity: sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==} + lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} @@ -12296,6 +12431,9 @@ packages: resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} engines: {node: '>= 0.4'} + mathml-tag-names@2.1.3: + resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==} + md5.js@1.3.5: resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==} @@ -12308,6 +12446,12 @@ packages: mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} + mdn-data@2.12.2: + resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==} + + mdn-data@2.23.0: + resolution: {integrity: sha512-786vq1+4079JSeu2XdcDjrhi/Ry7BWtjDl9WtGPWLiIHb2T66GvIVflZTBoSNZ5JqTtJGYEVMuFA/lbQlMOyDQ==} + mdurl@1.0.1: resolution: {integrity: sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==} @@ -13518,6 +13662,10 @@ packages: resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==} engines: {node: '>= 0.4'} + postcss-html@1.8.0: + resolution: {integrity: sha512-5mMeb1TgLWoRKxZ0Xh9RZDfwUUIqRrcxO2uXO+Ezl1N5lqpCiSU5Gk6+1kZediBfBHFtPCdopr2UZ2SgUsKcgQ==} + engines: {node: ^12 || >=14} + postcss-import@15.1.0: resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -13560,12 +13708,36 @@ packages: yaml: optional: true + postcss-media-query-parser@0.2.3: + resolution: {integrity: sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==} + postcss-nested@6.0.1: resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} engines: {node: '>=12.0'} peerDependencies: postcss: ^8.2.14 + postcss-resolve-nested-selector@0.1.6: + resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} + + postcss-safe-parser@6.0.0: + resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.3.3 + + postcss-safe-parser@7.0.1: + resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==} + engines: {node: '>=18.0'} + peerDependencies: + postcss: ^8.4.31 + + postcss-scss@4.0.9: + resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.4.29 + postcss-selector-parser@6.0.16: resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==} engines: {node: '>=4'} @@ -13574,6 +13746,10 @@ packages: resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} engines: {node: '>=4'} + postcss-selector-parser@7.1.0: + resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==} + engines: {node: '>=4'} + postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} @@ -14833,6 +15009,49 @@ packages: react: '>= 16.8.0' react-dom: '>= 16.8.0' + stylelint-config-recommended-scss@15.0.1: + resolution: {integrity: sha512-V24bxkNkFGggqPVJlP9iXaBabwSGEG7QTz+PyxrRtjPkcF+/NsWtB3tKYvFYEmczRkWiIEfuFMhGpJFj9Fxe6Q==} + engines: {node: '>=20'} + peerDependencies: + postcss: ^8.3.3 + stylelint: ^16.16.0 + peerDependenciesMeta: + postcss: + optional: true + + stylelint-config-recommended@16.0.0: + resolution: {integrity: sha512-4RSmPjQegF34wNcK1e1O3Uz91HN8P1aFdFzio90wNK9mjgAI19u5vsU868cVZboKzCaa5XbpvtTzAAGQAxpcXA==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.16.0 + + stylelint-config-standard-scss@15.0.1: + resolution: {integrity: sha512-8pmmfutrMlPHukLp+Th9asmk21tBXMVGxskZCzkRVWt1d8Z0SrXjUUQ3vn9KcBj1bJRd5msk6yfEFM0UYHBRdg==} + engines: {node: '>=20'} + peerDependencies: + postcss: ^8.3.3 + stylelint: ^16.18.0 + peerDependenciesMeta: + postcss: + optional: true + + stylelint-config-standard@38.0.0: + resolution: {integrity: sha512-uj3JIX+dpFseqd/DJx8Gy3PcRAJhlEZ2IrlFOc4LUxBX/PNMEQ198x7LCOE2Q5oT9Vw8nyc4CIL78xSqPr6iag==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.18.0 + + stylelint-scss@6.12.1: + resolution: {integrity: sha512-UJUfBFIvXfly8WKIgmqfmkGKPilKB4L5j38JfsDd+OCg2GBdU0vGUV08Uw82tsRZzd4TbsUURVVNGeOhJVF7pA==} + engines: {node: '>=18.12.0'} + peerDependencies: + stylelint: ^16.0.2 + + stylelint@16.23.0: + resolution: {integrity: sha512-69T5aS2LUY306ekt1Q1oaSPwz/jaG9HjyMix3UMrai1iEbuOafBe2Dh8xlyczrxFAy89qcKyZWWtc42XLx3Bbw==} + engines: {node: '>=18.12.0'} + hasBin: true + stylis@4.3.1: resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} @@ -14868,10 +15087,17 @@ packages: resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==} engines: {node: '>=10'} + supports-hyperlinks@3.2.0: + resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==} + engines: {node: '>=14.18'} + supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + svg-tags@1.0.0: + resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==} + svgo@3.3.2: resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==} engines: {node: '>=14.0.0'} @@ -14899,6 +15125,10 @@ packages: systemjs@6.15.1: resolution: {integrity: sha512-Nk8c4lXvMB98MtbmjX7JwJRgJOL8fluecYCfCeYBznwmpOs8Bf15hLM6z4z71EDAhQVrQrI+wt1aLWSXZq+hXA==} + table@6.9.0: + resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==} + engines: {node: '>=10.0.0'} + tailwindcss@3.4.3: resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==} engines: {node: '>=14.0.0'} @@ -15849,8 +16079,8 @@ packages: vue-component-type-helpers@2.2.10: resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==} - vue-component-type-helpers@3.0.4: - resolution: {integrity: sha512-WtR3kPk8vqKYfCK/HGyT47lK/T3FaVyWxaCNuosaHYE8h9/k0lYRZ/PI/+T/z2wP+uuNKmL6z30rOcBboOu/YA==} + vue-component-type-helpers@3.0.5: + resolution: {integrity: sha512-uoNZaJ+a1/zppa/Vgmi8zIOP2PHXDN2rT8NyF+zQRK6ZG94lNB9prcV0GdLJbY9i9lrD47JOVIH92SaiA7oJ1A==} vue-demi@0.14.10: resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} @@ -16144,6 +16374,10 @@ packages: resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + write-file-atomic@5.0.1: + resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} + ws@8.17.1: resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==} engines: {node: '>=10.0.0'} @@ -18413,6 +18647,21 @@ snapshots: '@jridgewell/trace-mapping': 0.3.9 optional: true + '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/css-tokenizer@3.0.4': {} + + '@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + + '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.0)': + dependencies: + postcss-selector-parser: 7.1.0 + '@ctrl/tinycolor@3.6.0': {} '@currents/commit-info@1.0.1-beta.0': @@ -18524,6 +18773,8 @@ snapshots: gonzales-pe: 4.3.0 node-source-walk: 7.0.1 + '@dual-bundle/import-meta-resolve@4.1.0': {} + '@element-plus/icons-vue@2.3.1(vue@3.5.13(typescript@5.8.3))': dependencies: vue: 3.5.13(typescript@5.8.3) @@ -19264,6 +19515,8 @@ snapshots: mappersmith: 2.45.0 protobufjs: 7.4.0 + '@keyv/serialize@1.1.0': {} + '@kurkle/color@0.3.2': {} '@kwsites/file-exists@1.1.1': @@ -21359,7 +21612,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.5.13(typescript@5.8.3) - vue-component-type-helpers: 3.0.4 + vue-component-type-helpers: 3.0.5 '@stylistic/eslint-plugin@5.0.0(eslint@9.29.0(jiti@1.21.7))': dependencies: @@ -23214,6 +23467,8 @@ snapshots: balanced-match@1.0.2: {} + balanced-match@2.0.0: {} + bare-events@2.5.4: optional: true @@ -23518,6 +23773,11 @@ snapshots: lodash.clonedeep: 4.5.0 lru-cache: 9.1.2 + cacheable@1.10.3: + dependencies: + hookified: 1.11.0 + keyv: 5.4.0 + cachedir@2.3.0: {} call-bind-apply-helpers@1.0.2: @@ -23860,6 +24120,8 @@ snapshots: color-convert: 2.0.1 color-string: 1.9.1 + colord@2.9.3: {} + colorette@1.4.0: {} colorette@2.0.19: {} @@ -24037,6 +24299,15 @@ snapshots: optionalDependencies: typescript: 5.8.3 + cosmiconfig@9.0.0(typescript@5.8.3): + dependencies: + env-paths: 2.2.1 + import-fresh: 3.3.0 + js-yaml: 4.1.0 + parse-json: 5.2.0 + optionalDependencies: + typescript: 5.8.3 + cpu-features@0.0.10: dependencies: buildcheck: 0.0.6 @@ -24155,6 +24426,8 @@ snapshots: css-color-keywords@1.0.0: {} + css-functions-list@3.2.3: {} + css-select@4.3.0: dependencies: boolbase: 1.0.0 @@ -24187,6 +24460,11 @@ snapshots: mdn-data: 2.0.30 source-map-js: 1.2.1 + css-tree@3.1.0: + dependencies: + mdn-data: 2.12.2 + source-map-js: 1.2.1 + css-what@6.1.0: {} css.escape@1.5.1: {} @@ -24843,8 +25121,7 @@ snapshots: entities@4.5.0: {} - env-paths@2.2.1: - optional: true + env-paths@2.2.1: {} epub2@3.0.2(ts-toolbelt@9.6.0): dependencies: @@ -25651,6 +25928,10 @@ snapshots: dependencies: is-unicode-supported: 2.1.0 + file-entry-cache@10.1.3: + dependencies: + flat-cache: 6.1.12 + file-entry-cache@8.0.0: dependencies: flat-cache: 4.0.1 @@ -25739,6 +26020,12 @@ snapshots: flatted: 3.3.3 keyv: 4.5.4 + flat-cache@6.1.12: + dependencies: + cacheable: 1.10.3 + flatted: 3.3.3 + hookified: 1.11.0 + flat@5.0.2: {} flatted@3.2.7: {} @@ -26087,6 +26374,16 @@ snapshots: dependencies: ini: 2.0.0 + global-modules@2.0.0: + dependencies: + global-prefix: 3.0.0 + + global-prefix@3.0.0: + dependencies: + ini: 1.3.8 + kind-of: 6.0.3 + which: 1.3.1 + globals@11.12.0: {} globals@13.24.0: @@ -26113,6 +26410,8 @@ snapshots: merge2: 1.4.1 slash: 3.0.0 + globjoin@0.1.4: {} + gm@1.25.1: dependencies: array-parallel: 0.1.3 @@ -26300,6 +26599,8 @@ snapshots: dependencies: parse-passwd: 1.0.0 + hookified@1.11.0: {} + html-encoding-sniffer@3.0.0: dependencies: whatwg-encoding: 2.0.0 @@ -26322,6 +26623,8 @@ snapshots: relateurl: 0.2.7 uglify-js: 3.17.4 + html-tags@3.3.1: {} + html-to-text@9.0.5: dependencies: '@selderee/plugin-htmlparser2': 0.11.0 @@ -27212,7 +27515,7 @@ snapshots: jest-message-util@29.5.0: dependencies: - '@babel/code-frame': 7.26.2 + '@babel/code-frame': 7.27.1 '@jest/types': 29.6.1 '@types/stack-utils': 2.0.1 chalk: 4.1.2 @@ -27224,7 +27527,7 @@ snapshots: jest-message-util@29.6.2: dependencies: - '@babel/code-frame': 7.26.2 + '@babel/code-frame': 7.27.1 '@jest/types': 29.6.1 '@types/stack-utils': 2.0.1 chalk: 4.1.2 @@ -27678,8 +27981,18 @@ snapshots: dependencies: json-buffer: 3.0.1 + keyv@5.4.0: + dependencies: + '@keyv/serialize': 1.1.0 + + kind-of@6.0.3: {} + kleur@3.0.3: {} + known-css-properties@0.36.0: {} + + known-css-properties@0.37.0: {} + kolorist@1.8.0: {} kuler@2.0.0: {} @@ -27924,6 +28237,8 @@ snapshots: lodash.throttle@4.1.1: {} + lodash.truncate@4.4.2: {} + lodash@4.17.21: {} log-symbols@4.1.0: @@ -28126,6 +28441,8 @@ snapshots: math-intrinsics@1.1.0: {} + mathml-tag-names@2.1.3: {} + md5.js@1.3.5: dependencies: hash-base: 3.0.5 @@ -28142,6 +28459,10 @@ snapshots: mdn-data@2.0.30: {} + mdn-data@2.12.2: {} + + mdn-data@2.23.0: {} + mdurl@1.0.1: {} media-typer@0.3.0: {} @@ -29357,7 +29678,7 @@ snapshots: parse-json@5.2.0: dependencies: - '@babel/code-frame': 7.26.2 + '@babel/code-frame': 7.27.1 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 @@ -29620,6 +29941,13 @@ snapshots: possible-typed-array-names@1.1.0: {} + postcss-html@1.8.0: + dependencies: + htmlparser2: 8.0.2 + js-tokens: 9.0.1 + postcss: 8.5.6 + postcss-safe-parser: 6.0.0(postcss@8.5.6) + postcss-import@15.1.0(postcss@8.4.49): dependencies: postcss: 8.4.49 @@ -29648,10 +29976,26 @@ snapshots: postcss: 8.5.6 tsx: 4.19.3 + postcss-media-query-parser@0.2.3: {} + postcss-nested@6.0.1(postcss@8.4.49): dependencies: postcss: 8.4.49 - postcss-selector-parser: 6.0.16 + postcss-selector-parser: 6.1.2 + + postcss-resolve-nested-selector@0.1.6: {} + + postcss-safe-parser@6.0.0(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-safe-parser@7.0.1(postcss@8.5.6): + dependencies: + postcss: 8.5.6 + + postcss-scss@4.0.9(postcss@8.5.6): + dependencies: + postcss: 8.5.6 postcss-selector-parser@6.0.16: dependencies: @@ -29663,6 +30007,11 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-selector-parser@7.1.0: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-value-parser@4.2.0: {} postcss-values-parser@6.0.2(postcss@8.5.6): @@ -31268,6 +31617,88 @@ snapshots: stylis: 4.3.1 tslib: 2.8.1 + stylelint-config-recommended-scss@15.0.1(postcss@8.5.6)(stylelint@16.23.0(typescript@5.8.3)): + dependencies: + postcss-scss: 4.0.9(postcss@8.5.6) + stylelint: 16.23.0(typescript@5.8.3) + stylelint-config-recommended: 16.0.0(stylelint@16.23.0(typescript@5.8.3)) + stylelint-scss: 6.12.1(stylelint@16.23.0(typescript@5.8.3)) + optionalDependencies: + postcss: 8.5.6 + + stylelint-config-recommended@16.0.0(stylelint@16.23.0(typescript@5.8.3)): + dependencies: + stylelint: 16.23.0(typescript@5.8.3) + + stylelint-config-standard-scss@15.0.1(postcss@8.5.6)(stylelint@16.23.0(typescript@5.8.3)): + dependencies: + stylelint: 16.23.0(typescript@5.8.3) + stylelint-config-recommended-scss: 15.0.1(postcss@8.5.6)(stylelint@16.23.0(typescript@5.8.3)) + stylelint-config-standard: 38.0.0(stylelint@16.23.0(typescript@5.8.3)) + optionalDependencies: + postcss: 8.5.6 + + stylelint-config-standard@38.0.0(stylelint@16.23.0(typescript@5.8.3)): + dependencies: + stylelint: 16.23.0(typescript@5.8.3) + stylelint-config-recommended: 16.0.0(stylelint@16.23.0(typescript@5.8.3)) + + stylelint-scss@6.12.1(stylelint@16.23.0(typescript@5.8.3)): + dependencies: + css-tree: 3.1.0 + is-plain-object: 5.0.0 + known-css-properties: 0.36.0 + mdn-data: 2.23.0 + postcss-media-query-parser: 0.2.3 + postcss-resolve-nested-selector: 0.1.6 + postcss-selector-parser: 7.1.0 + postcss-value-parser: 4.2.0 + stylelint: 16.23.0(typescript@5.8.3) + + stylelint@16.23.0(typescript@5.8.3): + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + '@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.0) + '@dual-bundle/import-meta-resolve': 4.1.0 + balanced-match: 2.0.0 + colord: 2.9.3 + cosmiconfig: 9.0.0(typescript@5.8.3) + css-functions-list: 3.2.3 + css-tree: 3.1.0 + debug: 4.4.1(supports-color@8.1.1) + fast-glob: 3.3.3 + fastest-levenshtein: 1.0.16 + file-entry-cache: 10.1.3 + global-modules: 2.0.0 + globby: 11.1.0 + globjoin: 0.1.4 + html-tags: 3.3.1 + ignore: 7.0.5 + imurmurhash: 0.1.4 + is-plain-object: 5.0.0 + known-css-properties: 0.37.0 + mathml-tag-names: 2.1.3 + meow: 13.2.0 + micromatch: 4.0.8 + normalize-path: 3.0.0 + picocolors: 1.1.1 + postcss: 8.5.6 + postcss-resolve-nested-selector: 0.1.6 + postcss-safe-parser: 7.0.1(postcss@8.5.6) + postcss-selector-parser: 7.1.0 + postcss-value-parser: 4.2.0 + resolve-from: 5.0.0 + string-width: 4.2.3 + supports-hyperlinks: 3.2.0 + svg-tags: 1.0.0 + table: 6.9.0 + write-file-atomic: 5.0.1 + transitivePeerDependencies: + - supports-color + - typescript + stylis@4.3.1: {} stylus-lookup@6.1.0: @@ -31317,8 +31748,15 @@ snapshots: dependencies: has-flag: 4.0.0 + supports-hyperlinks@3.2.0: + dependencies: + has-flag: 4.0.0 + supports-color: 7.2.0 + supports-preserve-symlinks-flag@1.0.0: {} + svg-tags@1.0.0: {} + svgo@3.3.2: dependencies: '@trysound/sax': 0.2.0 @@ -31358,6 +31796,14 @@ snapshots: systemjs@6.15.1: {} + table@6.9.0: + dependencies: + ajv: 8.17.1 + lodash.truncate: 4.4.2 + slice-ansi: 4.0.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + tailwindcss@3.4.3(ts-node@10.9.2(@types/node@20.19.1)(typescript@5.8.3)): dependencies: '@alloc/quick-lru': 5.2.0 @@ -32389,7 +32835,7 @@ snapshots: vue-component-type-helpers@2.2.10: {} - vue-component-type-helpers@3.0.4: {} + vue-component-type-helpers@3.0.5: {} vue-demi@0.14.10(vue@3.5.13(typescript@5.8.3)): dependencies: @@ -32773,6 +33219,11 @@ snapshots: imurmurhash: 0.1.4 signal-exit: 3.0.7 + write-file-atomic@5.0.1: + dependencies: + imurmurhash: 0.1.4 + signal-exit: 4.1.0 + ws@8.17.1: {} ws@8.18.2: {} diff --git a/turbo.json b/turbo.json index 7c478afd55..a797e5e115 100644 --- a/turbo.json +++ b/turbo.json @@ -14,6 +14,12 @@ "dependsOn": ["^build", "@n8n/eslint-config#build"] }, "lint:fix": {}, + "lint:styles": { + "dependsOn": ["@n8n/stylelint-config#build"] + }, + "lint:styles:fix": { + "dependsOn": ["@n8n/stylelint-config#build"] + }, "test": { "dependsOn": ["^build", "build"], "outputs": ["coverage/**", "*.xml"]