Elgato_dark/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n synced 2026-04-21 15:47:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

chore: Fix rest of css token errors (#21339)

Browse source
This commit is contained in:
Mutasem Aldmour 2025-10-30 09:29:58 +01:00 committed by GitHub
parent 284939ffdc
commit a0e548573f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
96 changed files with 732 additions and 583 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/@n8n/stylelint-config/package.json
View file

@ -11,9 +11,6 @@
"./rules": {
"default": "./dist/rules/index.js",
"types": "./dist/rules/index.d.ts"
},
"./formatter-summary": {
"default": "./dist/formatter-summary.js"
}
},
"scripts": {
@ -42,4 +39,4 @@
"peerDependencies": {
"stylelint": ">= 16"
}
}
}

54
packages/@n8n/stylelint-config/src/formatter-summary.ts
View file

@ -1,54 +0,0 @@
/**
* Custom stylelint formatter that outputs a summary by package
* @type {import('stylelint').Formatter}
*/
export default function formatter(results) {
const packageStats = new Map();
let totalWarnings = 0;
let totalErrors = 0;
for (const result of results) {
if (result.warnings.length === 0) continue;
// Extract package name from file path
const match = result.source.match(/packages\/([^/]+\/[^/]+)/);
const packageName = match ? match[1] : 'unknown';
if (!packageStats.has(packageName)) {
packageStats.set(packageName, { warnings: 0, errors: 0 });
}
const stats = packageStats.get(packageName);
for (const warning of result.warnings) {
if (warning.severity === 'error') {
stats.errors++;
totalErrors++;
} else {
stats.warnings++;
totalWarnings++;
}
}
}
if (packageStats.size === 0) {
return '✓ No style issues found\n';
}
let output = '\n📊 Style Lint Summary:\n';
output += '─'.repeat(50) + '\n';
for (const [packageName, stats] of packageStats) {
const parts = [];
if (stats.errors > 0) parts.push(`${stats.errors} error${stats.errors > 1 ? 's' : ''}`);
if (stats.warnings > 0) parts.push(`${stats.warnings} warning${stats.warnings > 1 ? 's' : ''}`);
output += ` ${packageName}: ${parts.join(', ')}\n`;
}
output += '─'.repeat(50) + '\n';
output += ` Total: ${totalErrors} error${totalErrors !== 1 ? 's' : ''}, ${totalWarnings} warning${totalWarnings !== 1 ? 's' : ''}\n`;
output += '\n';
return output;
}

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

@ -49,6 +49,8 @@ describe('css-var-naming rule', () => {
--reka-color-primary: #0d6efd;
--reka--button--color--background--primary: #0d6efd;
--reka--other: #333;
--ag-other: #333;
--chat-other: #333;
}
`;
const result = await lintCSS(namespacePattern);
@ -429,7 +431,7 @@ describe('css-var-naming rule', () => {
it('should reject namespace with muted value before color--text property', async () => {
const invalidOrder = `
:root {
--chat--muted--color--text: #888;
--namespace--muted--color--text: #888;
}
`;
const result = await lintCSS(invalidOrder);

9
packages/@n8n/stylelint-config/src/rules/css-var-naming.ts
View file

@ -46,12 +46,19 @@ const PROPERTY_VOCABULARY = new Set([
'margin-bottom',
'max-height',
'max-width',
'min-height',
'min-width',
'z',
'duration',
'easing',
'offset',
'outline-color',
'outline-width',
'width',
'top',
'bottom',
'left',
'right',
]);
// Properties that can be used as standalone single-group variables (without a value)
@ -87,7 +94,7 @@ const MODES = new Set(['light', 'dark', 'hc', 'rtl', 'print']);
const MEDIA = new Set(['sm', 'md', 'lg', 'xl', '2xl']);
// Ignore issues related to these namespaces
const DISABLE_CHECK_FOR_NAMESPACES = new Set(['reka']);
const DISABLE_CHECK_FOR_NAMESPACES = new Set(['reka', 'ag', 'chat']);
// Allowed namespaces
const NAMESPACES = new Set(['n8n', 'p', ...DISABLE_CHECK_FOR_NAMESPACES]);

9
packages/extensions/insights/package.json
View file

@ -32,12 +32,8 @@
"dev": "tsdown --watch",
"lint": "eslint src --quiet",
"lint:fix": "eslint src --fix",
"lint:styles": "run-script-os",
"lint:styles:default": "stylelint \"src/**/*.{scss,sass,vue}\" --cache --custom-formatter $(pwd)/../../../packages/@n8n/stylelint-config/dist/formatter-summary.js",
"lint:styles:windows": "stylelint \"src/**/*.{scss,sass,vue}\" --cache --custom-formatter \"%cd%/../../../packages/@n8n/stylelint-config/dist/formatter-summary.js\"",
"lint:styles:fix": "run-script-os",
"lint:styles:fix:default": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache --custom-formatter $(pwd)/../../../packages/@n8n/stylelint-config/dist/formatter-summary.js",
"lint:styles:fix:windows": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache --custom-formatter \"%cd%/../../../packages/@n8n/stylelint-config/dist/formatter-summary.js\"",
"lint:styles": "stylelint \"src/**/*.{scss,sass,vue}\" --cache",
"lint:styles:fix": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache",
"typecheck": "vue-tsc --noEmit",
"build:backend": "tsdown",
"build:frontend": "vite build",
@ -52,7 +48,6 @@
"@n8n/extension-sdk": "workspace:*"
},
"devDependencies": {
"run-script-os": "catalog:",
"@n8n/stylelint-config": "workspace:*",
"@n8n/typescript-config": "workspace:*",
"@vitejs/plugin-vue": "catalog:frontend",

4
packages/frontend/@n8n/design-system/src/css/common/var.scss
View file

@ -415,7 +415,7 @@ $input-height: 40px;
$input-border-radius: var(--input--radius, var(--radius));
$input-border-top-left-radius: var(--input--radius--top-left, var(--input--radius, var(--radius)));
$input-border-top-right-radius: var(
--input-border-top-right-radius,
--input-triple--radius--top-right,
var(--input--radius, var(--radius)),
);
$input-border-bottom-left-radius: var(
@ -423,7 +423,7 @@ $input-border-bottom-left-radius: var(
var(--input--radius, var(--radius)),
);
$input-border-bottom-right-radius: var(
--input-border-bottom-right-radius,
--input-triple--radius--bottom-right,
var(--input--radius, var(--radius)),
);
$input-border-radius: var(--input--radius, var(--radius));

9
packages/frontend/editor-ui/package.json
View file

@ -15,12 +15,8 @@
"dev": "pnpm serve",
"lint": "eslint src --quiet",
"lint:fix": "eslint src --fix",
"lint:styles": "run-script-os",
"lint:styles:default": "stylelint \"src/**/*.{scss,sass,vue}\" --cache --custom-formatter ../../@n8n/stylelint-config/dist/formatter-summary.js",
"lint:styles:windows": "stylelint \"src/**/*.{scss,sass,vue}\" --cache --custom-formatter \"%cd%/../../@n8n/stylelint-config/dist/formatter-summary.js\"",
"lint:styles:fix": "run-script-os",
"lint:styles:fix:default": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache --custom-formatter ../../@n8n/stylelint-config/dist/formatter-summary.js",
"lint:styles:fix:windows": "stylelint \"src/**/*.{scss,sass,vue}\" --fix --cache --custom-formatter \"%cd%/../../@n8n/stylelint-config/dist/formatter-summary.js\"",
"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",
@ -114,7 +110,6 @@
"xss": "catalog:"
},
"devDependencies": {
"run-script-os": "catalog:",
"@faker-js/faker": "^8.0.2",
"@iconify/json": "^2.2.349",
"@n8n/eslint-config": "workspace:*",

10
packages/frontend/editor-ui/src/App.vue
View file

@ -132,8 +132,8 @@ watch(
{ immediate: true },
);
useExposeCssVar('--toast-bottom-offset', toastBottomOffset);
useExposeCssVar('--ask-assistant-floating-button-bottom-offset', askAiFloatingButtonBottomOffset);
useExposeCssVar('--toast--offset', toastBottomOffset);
useExposeCssVar('--ask-assistant--floating-button--margin-bottom', askAiFloatingButtonBottomOffset);
</script>
<template>
@ -216,7 +216,7 @@ useExposeCssVar('--ask-assistant-floating-button-bottom-offset', askAiFloatingBu
.banners {
grid-area: banners;
z-index: var(--z-index-top-banners);
z-index: var(--top-banners--z);
}
.content {
@ -256,14 +256,14 @@ useExposeCssVar('--ask-assistant-floating-button-bottom-offset', askAiFloatingBu
.header {
grid-area: header;
z-index: var(--z-index-app-header);
z-index: var(--app-header--z);
min-width: 0;
min-height: 0;
}
.sidebar {
grid-area: sidebar;
z-index: var(--z-index-app-sidebar);
z-index: var(--app-sidebar--z);
}
.modals {

2
packages/frontend/editor-ui/src/components/CopyInput.vue
View file

@ -89,6 +89,7 @@ function copy() {
font-weight: var(--font-weight--regular);
&:hover {
/* stylelint-disable-next-line @n8n/css-var-naming */
--display-copy-button: flex;
width: 100%;
}
@ -118,6 +119,7 @@ function copy() {
}
.copyButton {
/* stylelint-disable-next-line @n8n/css-var-naming */
display: var(--display-copy-button, none);
position: absolute;
top: 0;

1
packages/frontend/editor-ui/src/components/FocusPanel.vue
View file

@ -819,6 +819,5 @@ function onRenameNode(value: string) {
.forceHover {
color: var(--button--color--text--secondary--hover-active-focus);
border-color: var(--button--border-color--secondary--hover-active-focus);
background-color: var(--color-button-secondary-hover-active-focus-background);
}
</style>

2
packages/frontend/editor-ui/src/components/MainSidebar.vue
View file

@ -608,7 +608,7 @@ onClickOutside(createBtn as Ref<VueInstance>, () => {
flex-direction: column;
border-right: var(--border-width) var(--border-style) var(--color--foreground);
width: $sidebar-expanded-width;
background-color: var(--menu-background, var(--color--background--light-3));
background-color: var(--menu--color--background, var(--color--background--light-3));
.logo {
display: flex;

20
packages/frontend/editor-ui/src/components/Modal.vue
View file

@ -59,19 +59,19 @@ const { APP_Z_INDEXES } = useStyles();
const styles = computed(() => {
const styles: { [prop: string]: string } = {};
if (props.height) {
styles['--dialog-height'] = props.height;
styles['--dialog--height'] = props.height;
}
if (props.minHeight) {
styles['--dialog-min-height'] = props.minHeight;
styles['--dialog--min-height'] = props.minHeight;
}
if (props.maxHeight) {
styles['--dialog-max-height'] = props.maxHeight;
styles['--dialog--max-height'] = props.maxHeight;
}
if (props.maxWidth) {
styles['--dialog-max-width'] = props.maxWidth;
styles['--dialog--max-width'] = props.maxWidth;
}
if (props.minWidth) {
styles['--dialog-min-width'] = props.minWidth;
styles['--dialog--min-width'] = props.minWidth;
}
return styles;
});
@ -195,11 +195,11 @@ function getCustomClass() {
&.el-dialog {
display: flex;
flex-direction: column;
max-width: var(--dialog-max-width, 80%);
min-width: var(--dialog-min-width, 420px);
height: var(--dialog-height);
min-height: var(--dialog-min-height);
max-height: var(--dialog-max-height);
max-width: var(--dialog--max-width, 80%);
min-width: var(--dialog--min-width, 420px);
height: var(--dialog--height);
min-height: var(--dialog--min-height);
max-height: var(--dialog--max-height);
}
.el-dialog__body {

2
packages/frontend/editor-ui/src/components/NodeIcon.vue
View file

@ -86,6 +86,6 @@ const nodeTypeName = computed(() =>
<style lang="scss" module>
.nodeIcon {
--node--icon--color: var(--canvas-node-icon-color, v-bind(iconColor));
--node--icon--color: var(--canvas-node--icon-color, v-bind(iconColor));
}
</style>

2
packages/frontend/editor-ui/src/components/WorkflowPreview.vue
View file

@ -277,7 +277,7 @@ watch(
left: 0;
height: 100%;
width: 100%;
z-index: var(--z-index-workflow-preview-ndv);
z-index: var(--workflow-preview-ndv--z);
}
.spinner {

2
packages/frontend/editor-ui/src/components/layouts/PageViewLayout.vue
View file

@ -13,7 +13,7 @@
flex-direction: column;
height: 100%;
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
box-sizing: border-box;
align-content: start;
padding: var(--spacing--lg) var(--spacing--2xl) 0;

8
packages/frontend/editor-ui/src/composables/useStyles.test.ts
View file

@ -10,21 +10,21 @@ describe('useStyles', () => {
expect(global.document.documentElement.style.setProperty).toHaveBeenNthCalledWith(
2,
'--z-index-app-header',
'--app-header--z',
'99',
);
expect(global.document.documentElement.style.setProperty).toHaveBeenCalledWith(
'--z-index-canvas-add-button',
'--canvas-add-button--z',
'101',
);
expect(global.document.documentElement.style.setProperty).toHaveBeenCalledWith(
'--z-index-workflow-preview-ndv',
'--workflow-preview-ndv--z',
'9999999',
);
expect(global.document.documentElement.style.setProperty).toHaveBeenLastCalledWith(
'--z-index-nps-survey-modal',
'--nps-survey-modal--z',
'3001',
);
});

2
packages/frontend/editor-ui/src/composables/useStyles.ts
View file

@ -23,7 +23,7 @@ const APP_Z_INDEXES = {
const setAppZIndexes = () => {
Object.keys(APP_Z_INDEXES).forEach((key) => {
const variableName = `--z-index-${key.toLowerCase().replaceAll('_', '-')}`;
const variableName = `--${key.toLowerCase().replaceAll('_', '-')}--z`;
const value = APP_Z_INDEXES[key as keyof typeof APP_Z_INDEXES];
document.documentElement.style.setProperty(variableName, `${value}`);
});

2
packages/frontend/editor-ui/src/features/ai/assistant/components/AssistantsHub.vue
View file

@ -151,7 +151,7 @@ onBeforeUnmount(() => {
<style lang="scss" module>
.resizeWrapper {
z-index: var(--z-index-ask-assistant-chat);
z-index: var(--ask-assistant-chat--z);
}
.wrapper {

4
packages/frontend/editor-ui/src/features/ai/assistant/components/Chat/AskAssistantFloatingButton.vue
View file

@ -74,8 +74,8 @@ const onClick = async () => {
.container {
position: absolute;
right: var(--spacing--sm);
bottom: var(--ask-assistant-floating-button-bottom-offset, --spacing--2xl);
z-index: var(--z-index-ask-assistant-floating-button);
bottom: var(--ask-assistant--floating-button--margin-bottom, --spacing--2xl);
z-index: var(--ask-assistant-floating-button--z);
}
.tooltip {

2
packages/frontend/editor-ui/src/features/ai/chatHub/ChatAgentsView.vue
View file

@ -225,7 +225,7 @@ onMounted(async () => {
flex-direction: column;
height: 100%;
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
padding: var(--spacing--xl);
gap: var(--spacing--xl);
overflow-y: auto;

2
packages/frontend/editor-ui/src/features/ai/evaluation.ee/components/ListRuns/MetricsChart.vue
View file

@ -96,7 +96,7 @@ watchEffect(() => {
.chartWrapper {
position: relative;
height: var(--metrics-chart-height, 147px);
height: var(--metrics-chart--height, 147px);
width: 100%;
padding: var(--spacing--sm);
}

2
packages/frontend/editor-ui/src/features/ai/evaluation.ee/views/TestRunDetailView.vue
View file

@ -418,7 +418,7 @@ onMounted(async () => {
.container {
height: 100%;
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
padding: var(--spacing--lg) 0;
}

10
packages/frontend/editor-ui/src/features/collaboration/projects/views/ProjectSettings.vue
View file

@ -632,7 +632,7 @@ onMounted(() => {
<style lang="scss" module>
.projectSettings {
--project-field-width: 560px;
--project-field--width: 560px;
display: grid;
width: 100%;
@ -641,7 +641,7 @@ onMounted(() => {
form {
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
padding: 0 var(--spacing--2xl);
fieldset {
@ -664,7 +664,7 @@ onMounted(() => {
.header {
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
padding: var(--spacing--lg) var(--spacing--2xl) 0;
}
@ -705,7 +705,7 @@ onMounted(() => {
.projectName {
display: flex;
gap: var(--spacing--2xs);
max-width: var(--project-field-width);
max-width: var(--project-field--width);
.projectNameInput {
flex: 1;
@ -714,7 +714,7 @@ onMounted(() => {
.projectDescriptionInput,
.userSelect {
max-width: var(--project-field-width);
max-width: var(--project-field--width);
width: 100%;
}

1
packages/frontend/editor-ui/src/features/core/auth/views/SettingsPersonalView.vue
View file

@ -506,7 +506,6 @@ onBeforeUnmount(() => {
}
.disableMfaButton {
--button-color: var(--color--danger);
> span {
font-weight: var(--font-weight--bold);
}

4
packages/frontend/editor-ui/src/features/core/dataTable/components/dataGrid/DataTableTable.vue
View file

@ -345,10 +345,6 @@ defineExpose({
&:global(.boolean-cell) {
border: var(--grid--cell--border-color--editing) !important;
&:global(.ag-cell-focus) {
background-color: var(--grid-cell-active-background);
}
}
}

4
packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/CredentialEdit.vue
View file

@ -1199,9 +1199,9 @@ const { width } = useElementSize(credNameRef);
<style module lang="scss">
.credentialModal {
--dialog-max-width: 1200px;
--dialog--max-width: 1200px;
--dialog--close--spacing--top: 31px;
--dialog-max-height: 750px;
--dialog--max-height: 750px;
:global(.el-dialog__header) {
padding-bottom: 0;

22
packages/frontend/editor-ui/src/features/credentials/components/CredentialEdit/GoogleAuthButton.vue
View file

@ -7,10 +7,10 @@ const { baseUrl } = useRootStore();
const type = useUIStore().appliedTheme === 'dark' ? '.dark.png' : '.png';
const i18n = useI18n();
const googleAuthButtons = {
'--google-auth-btn-normal': `url(${baseUrl}static/google-auth/normal${type}`,
'--google-auth-btn-focus': `url(${baseUrl}static/google-auth/focus${type}`,
'--google-auth-btn-pressed': `url(${baseUrl}static/google-auth/pressed${type}`,
'--google-auth-btn-disabled': `url(${baseUrl}static/google-auth/disabled${type}`,
'--google-auth-btn--color--background--normal': `url(${baseUrl}static/google-auth/normal${type}`,
'--google-auth-btn--color--background--focus': `url(${baseUrl}static/google-auth/focus${type}`,
'--google-auth-btn--color--background--pressed': `url(${baseUrl}static/google-auth/pressed${type}`,
'--google-auth-btn--color--background--disabled': `url(${baseUrl}static/google-auth/disabled${type}`,
};
</script>
@ -24,29 +24,29 @@ const googleAuthButtons = {
<style module lang="scss">
.googleAuthBtn {
--google-auth-btn-height: 46px;
--google-auth-btn--height: 46px;
cursor: pointer;
border: none;
padding: 0;
background-image: var(--google-auth-btn-normal);
background-image: var(--google-auth-btn--color--background--normal);
background-repeat: no-repeat;
background-color: transparent;
background-size: 100% 100%;
border-radius: 4px;
height: var(--google-auth-btn-height);
height: var(--google-auth-btn--height);
// We have to preserve exact google button ratio
width: calc(var(--google-auth-btn-height) * 4.15217391);
width: calc(var(--google-auth-btn--height) * 4.15217391);
&:focus,
&:hover {
outline: none;
background-image: var(--google-auth-btn-focus);
background-image: var(--google-auth-btn--color--background--focus);
}
&:active {
background-image: var(--google-auth-btn-pressed);
background-image: var(--google-auth-btn--color--background--pressed);
}
&:disabled {
background-image: var(--google-auth-btn-disabled);
background-image: var(--google-auth-btn--color--background--disabled);
}
}
</style>

2
packages/frontend/editor-ui/src/features/credentials/components/NodeCredentials.vue
View file

@ -626,7 +626,7 @@ async function onClickCreateCredential(type: ICredentialType | INodeCredentialDe
font-weight: var(--font-weight--bold);
padding: var(--spacing--xs) var(--spacing--md);
background-color: var(--color--background--light-2);
color: var(--color-text--dark);
color: var(--color--text--shade-1);
border: 0;
border-top: var(--border);

2
packages/frontend/editor-ui/src/features/execution/executions/components/global/GlobalExecutionsList.vue
View file

@ -470,7 +470,7 @@ const goToUpgrade = () => {
flex-direction: column;
overflow: hidden;
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
}
.execList {

8
packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsCard.vue
View file

@ -191,8 +191,8 @@ function onRetryMenuItemSelect(action: string): void {
@use '@/styles/variables' as *;
.WorkflowExecutionsCard {
--execution-list-item-background: var(--execution-card--color--background);
--execution-list-item-highlight-background: var(--color--warning--tint-1);
--execution-list-item--color--background: var(--execution-card--color--background);
--execution-list-item--color--background--highlight: var(--color--warning--tint-1);
display: flex;
flex-direction: column;
@ -209,7 +209,7 @@ function onRetryMenuItemSelect(action: string): void {
&:hover,
&.active {
.executionLink {
--execution-list-item-background: var(--execution-card--color--background--hover);
--execution-list-item--color--background: var(--execution-card--color--background--hover);
}
}
@ -298,7 +298,7 @@ function onRetryMenuItemSelect(action: string): void {
}
.executionLink {
background: var(--execution-list-item-background);
background: var(--execution-list-item--color--background);
display: flex;
width: 100%;
align-items: center;

6
packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDashboard.vue
View file

@ -292,7 +292,7 @@ const projects = computed(() =>
.insightsContainer {
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
padding: var(--spacing--lg) var(--spacing--2xl);
margin: 0 auto;
}
@ -404,10 +404,10 @@ const projects = computed(() =>
text-align: left;
font-size: 13px;
cursor: pointer;
color: var(--color-text-base);
color: var(--color--text);
font-weight: 400;
&:hover {
background-color: var(--color-foreground-light);
background-color: var(--color--foreground--tint-1);
}
}
</style>

2
packages/frontend/editor-ui/src/features/execution/insights/components/InsightsDataRangePicker.vue
View file

@ -181,7 +181,7 @@ function isActiveRange(presetValue: number) {
<style module>
.PresetButton {
--button-border-color: transparent;
--button--border-color: transparent;
text-align: left;
display: flex;
}

2
packages/frontend/editor-ui/src/features/execution/insights/components/InsightsSummary.vue
View file

@ -210,7 +210,7 @@ const trackTabClick = (insightType: keyof InsightsSummary) => {
margin: 0 0 var(--spacing--xs);
color: var(--color--text--tint-1);
font-size: var(--font-size--2xs);
font-weight: var(--font-weight-normal);
font-weight: var(--font-weight--regular);
}
span {

2
packages/frontend/editor-ui/src/features/execution/logs/components/ChatMessagesPanel.vue
View file

@ -297,7 +297,7 @@ async function copySessionId() {
--chat--message--user--border: none;
--chat--input--padding: var(--spacing--xs);
--chat--color-typing: var(--color--text--tint-1);
--chat--textarea--max-height: calc(var(--logs-panel-height) * 0.3);
--chat--textarea--max-height: calc(var(--logs-panel--height) * 0.3);
--chat--message--pre--background: var(--color--foreground--tint-1);
--chat--textarea--height: calc(
var(--chat--input--padding) * 2 + var(--chat--input--font-size) *

3
packages/frontend/editor-ui/src/features/execution/logs/components/LogsOverviewRow.vue
View file

@ -253,8 +253,10 @@ watch(
.background {
position: absolute;
/* stylelint-disable-next-line @n8n/css-var-naming */
left: calc(var(--indent-depth) * 32px);
top: 0;
/* stylelint-disable-next-line @n8n/css-var-naming */
width: calc(100% - var(--indent-depth) * 32px);
height: 100%;
border-radius: var(--radius);
@ -304,6 +306,7 @@ watch(
}
.icon {
/* stylelint-disable-next-line @n8n/css-var-naming */
margin-left: var(--row-gap-thickness);
flex-grow: 0;
flex-shrink: 0;

4
packages/frontend/editor-ui/src/features/execution/logs/composables/useLogsPanelLayout.ts
View file

@ -118,11 +118,11 @@ export function useLogsPanelLayout(
if (state === LOGS_PANEL_STATE.FLOATING) {
popOutWindow?.value?.document.documentElement.style.setProperty(
'--logs-panel-height',
'--logs-panel--height',
'100vh',
);
} else {
document.documentElement.style.setProperty('--logs-panel-height', `${updatedHeight}px`);
document.documentElement.style.setProperty('--logs-panel--height', `${updatedHeight}px`);
}
logsStore.setHeight(updatedHeight);

2
packages/frontend/editor-ui/src/features/integrations/logStreaming.ee/components/EventSelection.vue
View file

@ -137,7 +137,7 @@ function groupLabelInfo(t: string): string | undefined {
align-items: center;
justify-content: left;
margin: 10px;
color: var(--el-color-primary);
color: var(--color--primary);
}
.eventListItemDisabled > {

6
packages/frontend/editor-ui/src/features/ndv/panel/components/InputNodeSelect.vue
View file

@ -167,8 +167,8 @@ function onInputNodeChange(value: string) {
<style lang="scss" module>
.select {
--max-select-width: 224px;
max-width: var(--max-select-width);
--node-input--select--max-width: 224px;
max-width: var(--node-input--select--max-width);
:global(.el-input--suffix .el-input__inner) {
padding-left: calc(var(--spacing--lg) + var(--spacing--4xs));
@ -191,7 +191,7 @@ function onInputNodeChange(value: string) {
.title {
color: var(--color--text--shade-1);
font-weight: var(--font-weight--regular);
max-width: var(--max-select-width);
max-width: var(--node-input--select--max-width);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

35
packages/frontend/editor-ui/src/features/ndv/panel/components/NDVSubConnections.vue
View file

@ -405,30 +405,31 @@ defineExpose({
}
}
.container {
--node-size: 45px;
--plus-button-size: 30px;
--animation-duration: 150ms;
--collapsed-offset: 10px;
padding-top: calc(var(--node-size) + var(--spacing--3xs));
--node--size: 45px;
--plus-button--size: 30px;
--ndv--sub-connections--duration: 150ms;
--collapsed--offset: 10px;
padding-top: calc(var(--node--size) + var(--spacing--3xs));
}
.connections {
// Make sure container has matching height if there's no connections
// since the plus button is absolutely positioned
min-height: calc(var(--node-size) + var(--spacing--md));
min-height: calc(var(--node--size) + var(--spacing--md));
position: absolute;
bottom: calc((var(--node-size) / 2) * -1);
bottom: calc((var(--node--size) / 2) * -1);
left: 0;
right: 0;
user-select: none;
justify-content: space-between;
display: grid;
/* stylelint-disable-next-line @n8n/css-var-naming */
grid-template-columns: repeat(var(--possible-connections), 1fr);
}
.connectionType {
display: flex;
flex-direction: column;
align-items: center;
transition: all calc((var(--animation-duration) - 50ms)) ease;
transition: all calc((var(--ndv--sub-connections--duration) - 50ms)) ease;
}
.connectionLabel {
margin-bottom: var(--spacing--2xs);
@ -448,7 +449,7 @@ defineExpose({
position: relative;
}
.plusButton {
transition: all var(--animation-duration) ease;
transition: all var(--ndv--sub-connections--duration) ease;
position: absolute;
top: var(--spacing--2xs);
@ -463,7 +464,7 @@ defineExpose({
&:not(:last-child) {
z-index: 1;
right: 100%;
margin-right: calc((var(--plus-button-size) * -1) * 0.9);
margin-right: calc((var(--plus-button--size) * -1) * 0.9);
pointer-events: none;
.connectedNodesWrapperExpanded & {
@ -476,7 +477,7 @@ defineExpose({
}
.connectedNodesMultiple {
transition: all var(--animation-duration) ease;
transition: all var(--ndv--sub-connections--duration) ease;
}
.connectedNodesWrapperExpanded {
z-index: 1;
@ -495,7 +496,7 @@ defineExpose({
padding: var(--spacing--xs);
cursor: pointer;
pointer-events: all;
transition: all var(--animation-duration) ease;
transition: all var(--ndv--sub-connections--duration) ease;
position: relative;
display: flex;
justify-self: center;
@ -504,18 +505,19 @@ defineExpose({
.connectedNodes {
display: flex;
justify-content: center;
/* stylelint-disable-next-line @n8n/css-var-naming */
margin-right: calc(
(var(--nodes-length) - 1) * (-1 * (var(--node-size) - var(--collapsed-offset)))
(var(--nodes-length) - 1) * (-1 * (var(--node--size) - var(--collapsed--offset)))
);
.connectedNodesWrapperExpanded & {
margin-right: 0;
// Negative margin to offset the absolutely positioned plus button
// when the nodes are expanded to center the nodes
margin-right: calc((var(--spacing--2xs) + var(--plus-button-size)) * -1);
margin-right: calc((var(--spacing--2xs) + var(--plus-button--size)) * -1);
}
}
.nodeWrapper {
transition: all var(--animation-duration) ease;
transition: all var(--ndv--sub-connections--duration) ease;
transform-origin: center;
z-index: 1;
.connectedNodesWrapperExpanded &:not(:first-child) {
@ -529,8 +531,9 @@ defineExpose({
}
&:not(:first-child) {
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: translateX(
calc(var(--node-index) * (-1 * (var(--node-size) - var(--collapsed-offset))))
calc(var(--node-index) * (-1 * (var(--node--size) - var(--collapsed--offset))))
);
}

2
packages/frontend/editor-ui/src/features/ndv/panel/components/OutputPanel.vue
View file

@ -573,7 +573,7 @@ function handleChangeCollapsingColumn(columnName: string | null) {
.spinner {
display: flex;
justify-content: center;
margin-bottom: var(--ndv-spacing);
margin-bottom: var(--ndv--spacing);
* {
color: var(--color--primary);

2
packages/frontend/editor-ui/src/features/ndv/parameters/components/AssignmentCollection/Assignment.vue
View file

@ -284,7 +284,7 @@ const onValueInputHoverChange = (hovered: boolean): void => {
left: 0;
opacity: 0;
transition: opacity 100ms ease-in;
color: var(--icon-base-color);
color: var(--icon--color);
}
.extraTopPadding {
top: calc(20px + var(--spacing--lg));

2
packages/frontend/editor-ui/src/features/ndv/parameters/components/CollectionParameter.vue
View file

@ -229,7 +229,7 @@ function valueChanged(parameterData: IUpdateInformation) {
.button {
color: var(--color--text--shade-1);
font-weight: var(--font-weight-normal);
font-weight: var(--font-weight--regular);
--button--border-color: var(--color--foreground);
--button--color--background: var(--color--background);

2
packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/Condition.vue
View file

@ -276,7 +276,7 @@ const onBlur = (): void => {
left: 0;
opacity: 0;
transition: opacity 100ms ease-in;
color: var(--icon-base-color);
color: var(--icon--color);
}
.defaultTopPadding {

2
packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/FilterConditions.vue
View file

@ -275,7 +275,7 @@ function getIssues(index: number): string[] {
.addCondition {
// Styling to match collection button (should move to standard button in future)
font-weight: var(--font-weight-normal);
font-weight: var(--font-weight--regular);
--button--color--text: var(--color--text--shade-1);
--button--border-color: var(--color--foreground);
--button--color--background: var(--color--background);

2
packages/frontend/editor-ui/src/features/ndv/parameters/components/FixedCollectionParameter.vue
View file

@ -386,7 +386,7 @@ function getItemKey(item: INodeParameters, property: INodePropertyCollection) {
.controls {
:deep(.button) {
font-weight: var(--font-weight-normal);
font-weight: var(--font-weight--regular);
--button--color--text: var(--color--text--shade-1);
--button--border-color: var(--color--foreground);
--button--color--background: var(--color--background);

32
packages/frontend/editor-ui/src/features/ndv/parameters/components/InputTriple/InputTriple.vue
View file

@ -53,7 +53,7 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
}
.observer {
--parameter-input-options-height: 22px;
--parameter-input-options--height: 22px;
width: 100%;
position: relative;
}
@ -61,7 +61,7 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
.background {
position: absolute;
background-color: var(--input-triple--color--background);
top: var(--parameter-input-options-height);
top: var(--parameter-input-options--height);
bottom: 0;
left: 0;
right: 0;
@ -90,21 +90,21 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
.middle {
flex-grow: 0;
flex-basis: 160px;
padding-top: var(--parameter-input-options-height);
padding-top: var(--parameter-input-options--height);
}
.item:first-of-type {
--input--radius--top-left: var(--radius);
--input--radius--bottom-left: var(--radius);
--input-border-top-right-radius: 0;
--input-border-bottom-right-radius: 0;
--input-triple--radius--top-right: 0;
--input-triple--radius--bottom-right: 0;
}
.item:last-of-type {
--input--radius--top-left: 0;
--input--radius--bottom-left: 0;
--input-border-top-right-radius: var(--radius);
--input-border-bottom-right-radius: var(--radius);
--input-triple--radius--top-right: var(--radius);
--input-triple--radius--bottom-right: var(--radius);
}
.medium:not(.noRightSlot) {
@ -113,13 +113,13 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
.middle {
margin-left: -1px;
--input-border-top-right-radius: var(--radius);
--input-border-bottom-right-radius: 0;
--input-triple--radius--top-right: var(--radius);
--input-triple--radius--bottom-right: 0;
}
.item:first-of-type {
--input--radius--top-left: var(--radius);
--input-border-top-right-radius: 0;
--input-triple--radius--top-right: 0;
--input--radius--bottom-left: 0;
}
@ -128,9 +128,9 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
margin-top: -1px;
--input--radius--top-left: 0;
--input-border-top-right-radius: 0;
--input-triple--radius--top-right: 0;
--input--radius--bottom-left: var(--radius);
--input-border-bottom-right-radius: var(--radius);
--input-triple--radius--bottom-right: var(--radius);
}
}
@ -148,9 +148,9 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
.item:first-of-type {
--input--radius--top-left: var(--radius);
--input-border-top-right-radius: var(--radius);
--input-triple--radius--top-right: var(--radius);
--input--radius--bottom-left: 0;
--input-border-bottom-right-radius: 0;
--input-triple--radius--bottom-right: 0;
}
.item:not(:first-of-type) {
@ -159,9 +159,9 @@ withDefaults(defineProps<Props>(), { middleWidth: '160px' });
.item:last-of-type {
--input--radius--top-left: 0;
--input-border-top-right-radius: 0;
--input-triple--radius--top-right: 0;
--input--radius--bottom-left: var(--radius);
--input-border-bottom-right-radius: var(--radius);
--input-triple--radius--bottom-right: var(--radius);
}
}
</style>

6
packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue
View file

@ -2002,7 +2002,7 @@ onUpdated(async () => {
.tipVisible {
--input--radius--bottom-left: 0;
--input-border-bottom-right-radius: 0;
--input-triple--radius--bottom-right: 0;
}
.tip {
@ -2019,8 +2019,8 @@ onUpdated(async () => {
}
.noRightCornersInput > * {
--input-border-bottom-right-radius: 0;
--input-border-top-right-radius: 0;
--input-triple--radius--bottom-right: 0;
--input-triple--radius--top-right: 0;
}
.overrideButton {

4
packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/ResourceLocatorDropdown.vue
View file

@ -341,11 +341,11 @@ defineExpose({ isWithinDropdown });
<style lang="scss" module>
:root .popover {
--content-height: 236px;
--content--height: 236px;
padding: 0 !important;
border: var(--border);
display: flex;
max-height: calc(var(--content-height) + var(--spacing--xl));
max-height: calc(var(--content--height) + var(--spacing--xl));
flex-direction: column;
& ::-webkit-scrollbar {

12
packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/resourceLocator.scss
View file

@ -42,8 +42,8 @@ $--mode-selector-width: 92px;
}
.rightNoCorner > * {
--input-border-bottom-right-radius: 0;
--input-border-top-right-radius: 0;
--input-triple--radius--bottom-right: 0;
--input-triple--radius--top-right: 0;
}
.resourceLocator {
@ -52,8 +52,8 @@ $--mode-selector-width: 92px;
width: 100%;
position: relative;
--input-issues-width: 28px;
--input-override-width: 30px;
--resource-locator--input-issues--width: 28px;
--resource-locator--input-override--width: 30px;
.inputContainer {
display: flex;
@ -78,13 +78,13 @@ $--mode-selector-width: 92px;
top: 0;
bottom: 0;
left: 0;
right: var(--input-issues-width);
right: var(--resource-locator--input-issues--width);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.backgroundOverride {
right: var(--input-override-width);
right: var(--resource-locator--input-override--width);
}
.backgroundWithIssuesAndShowResourceLink {

6
packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceMapper/MappingFields.vue
View file

@ -446,16 +446,16 @@ defineExpose({
<style module lang="scss">
.parameterItem {
--delete-option-width: 22px;
--delete-option--width: 22px;
display: flex;
padding: 0 0 0 var(--spacing--sm);
.parameterInput {
width: calc(100% - var(--delete-option-width));
width: calc(100% - var(--delete-option--width));
}
.parameterInput:first-child {
margin-left: var(--delete-option-width);
margin-left: var(--delete-option--width);
}
&.hasIssues {

64
packages/frontend/editor-ui/src/features/ndv/runData/components/RunData.vue
View file

@ -2017,7 +2017,7 @@ defineExpose({ enterEditMode });
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--ndv-spacing) var(--ndv-spacing) var(--spacing--xl) var(--ndv-spacing);
padding: var(--ndv--spacing) var(--ndv--spacing) var(--spacing--xl) var(--ndv--spacing);
text-align: center;
> * {
@ -2027,7 +2027,7 @@ defineExpose({ enterEditMode });
}
.container {
--ndv-spacing: var(--spacing--sm);
--ndv--spacing: var(--spacing--sm);
position: relative;
width: 100%;
height: 100%;
@ -2047,12 +2047,12 @@ defineExpose({ enterEditMode });
.header {
display: flex;
align-items: center;
margin-bottom: var(--ndv-spacing);
padding: var(--ndv-spacing) var(--spacing--3xs) 0 var(--ndv-spacing);
margin-bottom: var(--ndv--spacing);
padding: var(--ndv--spacing) var(--spacing--3xs) 0 var(--ndv--spacing);
position: relative;
overflow-x: auto;
overflow-y: hidden;
min-height: calc(30px + var(--ndv-spacing));
min-height: calc(30px + var(--ndv--spacing));
scrollbar-width: thin;
container-type: inline-size;
@ -2081,7 +2081,7 @@ defineExpose({ enterEditMode });
position: absolute;
top: 0;
left: 0;
padding: 0 var(--ndv-spacing) var(--spacing--3xl) var(--ndv-spacing);
padding: 0 var(--ndv--spacing) var(--spacing--3xl) var(--ndv--spacing);
right: 0;
overflow-y: auto;
line-height: var(--line-height--xl);
@ -2095,18 +2095,18 @@ defineExpose({ enterEditMode });
.inlineError {
line-height: var(--line-height--xl);
padding-left: var(--ndv-spacing);
padding-right: var(--ndv-spacing);
padding-bottom: var(--ndv-spacing);
padding-left: var(--ndv--spacing);
padding-right: var(--ndv--spacing);
padding-bottom: var(--ndv--spacing);
}
.outputs {
display: flex;
flex-direction: column;
gap: var(--ndv-spacing);
padding-left: var(--ndv-spacing);
padding-right: var(--ndv-spacing);
padding-bottom: var(--ndv-spacing);
gap: var(--ndv--spacing);
padding-left: var(--ndv--spacing);
padding-right: var(--ndv--spacing);
padding-bottom: var(--ndv--spacing);
.compact & {
padding-left: var(--spacing--2xs);
@ -2128,9 +2128,9 @@ defineExpose({ enterEditMode });
display: flex;
align-items: center;
gap: var(--spacing--2xs);
padding-left: var(--ndv-spacing);
padding-right: var(--ndv-spacing);
padding-bottom: var(--ndv-spacing);
padding-left: var(--ndv--spacing);
padding-right: var(--ndv--spacing);
padding-bottom: var(--ndv--spacing);
flex-flow: wrap;
}
@ -2139,18 +2139,18 @@ defineExpose({ enterEditMode });
}
.inputSelect {
padding-left: var(--ndv-spacing);
padding-right: var(--ndv-spacing);
padding-bottom: var(--ndv-spacing);
padding-left: var(--ndv--spacing);
padding-right: var(--ndv--spacing);
padding-bottom: var(--ndv--spacing);
}
.runSelector {
display: flex;
align-items: center;
flex-flow: wrap;
padding-left: var(--ndv-spacing);
padding-right: var(--ndv-spacing);
margin-bottom: var(--ndv-spacing);
padding-left: var(--ndv--spacing);
padding-right: var(--ndv--spacing);
margin-bottom: var(--ndv--spacing);
gap: var(--spacing--3xs);
:global(.el-input--suffix .el-input__inner) {
@ -2206,7 +2206,7 @@ defineExpose({ enterEditMode });
.spinner {
display: flex;
justify-content: center;
margin-bottom: var(--ndv-spacing);
margin-bottom: var(--ndv--spacing);
* {
color: var(--color--primary);
@ -2220,8 +2220,8 @@ defineExpose({ enterEditMode });
display: flex;
flex-direction: column;
justify-content: stretch;
padding-left: var(--ndv-spacing);
padding-right: var(--ndv-spacing);
padding-left: var(--ndv--spacing);
padding-right: var(--ndv--spacing);
}
.editModeBody {
@ -2237,8 +2237,8 @@ defineExpose({ enterEditMode });
width: 100%;
justify-content: space-between;
align-items: center;
padding-top: var(--ndv-spacing);
padding-bottom: var(--ndv-spacing);
padding-top: var(--ndv--spacing);
padding-bottom: var(--ndv--spacing);
}
.editModeFooterInfotip {
@ -2251,7 +2251,7 @@ defineExpose({ enterEditMode });
display: flex;
justify-content: flex-end;
align-items: center;
margin-left: var(--ndv-spacing);
margin-left: var(--ndv--spacing);
}
.stretchVertically {
@ -2265,8 +2265,8 @@ defineExpose({ enterEditMode });
.hintCallout {
margin-bottom: var(--spacing--xs);
margin-left: var(--ndv-spacing);
margin-right: var(--ndv-spacing);
margin-left: var(--ndv--spacing);
margin-right: var(--ndv--spacing);
.compact & {
margin: 0 var(--spacing--2xs) var(--spacing--2xs) var(--spacing--2xs);
@ -2274,7 +2274,7 @@ defineExpose({ enterEditMode });
}
.schema {
padding: 0 var(--ndv-spacing);
padding: 0 var(--ndv--spacing);
}
.messageSection {
@ -2333,7 +2333,7 @@ defineExpose({ enterEditMode });
.ndv-v2,
.compact {
--ndv-spacing: var(--spacing--2xs);
--ndv--spacing: var(--spacing--2xs);
}
</style>

8
packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataBinary.vue
View file

@ -129,7 +129,7 @@ async function downloadBinaryData(index: number, key: string | number) {
position: absolute;
top: 0;
left: 0;
padding: 0 var(--ndv-spacing) var(--spacing--3xl) var(--ndv-spacing);
padding: 0 var(--ndv--spacing) var(--spacing--3xl) var(--ndv--spacing);
right: 0;
overflow-y: auto;
line-height: var(--line-height--xl);
@ -165,11 +165,11 @@ async function downloadBinaryData(index: number, key: string | number) {
width: 300px;
overflow: hidden;
background-color: var(--color--foreground--tint-2);
margin-right: var(--ndv-spacing);
margin-bottom: var(--ndv-spacing);
margin-right: var(--ndv--spacing);
margin-bottom: var(--ndv--spacing);
border-radius: var(--radius);
border: var(--border);
padding: var(--ndv-spacing);
padding: var(--ndv--spacing);
}
.binaryHeader {

2
packages/frontend/editor-ui/src/features/ndv/runData/components/RunDataTable.vue
View file

@ -981,7 +981,7 @@ th.isCollapsingColumn + th {
.tableRightMargin {
// becomes necessary with large tables
width: var(--ndv-spacing);
width: var(--ndv--spacing);
border-right: none !important;
border-top: none !important;
border-bottom: none !important;

6
packages/frontend/editor-ui/src/features/ndv/runData/components/VirtualSchema.vue
View file

@ -591,7 +591,7 @@ const onDragEnd = (el: HTMLElement) => {
}
.scroller {
padding: 0 var(--ndv-spacing);
padding: 0 var(--ndv--spacing);
padding-bottom: var(--spacing--2xl);
.compact & {
@ -603,7 +603,7 @@ const onDragEnd = (el: HTMLElement) => {
display: inline-flex;
margin-left: var(--spacing--xl);
color: var(--color--text--tint-1);
margin-bottom: var(--ndv-spacing);
margin-bottom: var(--ndv--spacing);
}
.notice {
@ -611,11 +611,13 @@ const onDragEnd = (el: HTMLElement) => {
color: var(--color--text);
font-size: var(--font-size--2xs);
line-height: var(--line-height--lg);
/* stylelint-disable-next-line @n8n/css-var-naming */
margin-left: calc(var(--spacing--lg) * var(--schema-level));
}
.empty-schema {
padding-bottom: var(--spacing--xs);
/* stylelint-disable-next-line @n8n/css-var-naming */
margin-left: calc((var(--spacing--xl) * var(--schema-level)));
}
</style>

12
packages/frontend/editor-ui/src/features/ndv/runData/components/VirtualSchemaItem.vue
View file

@ -120,13 +120,13 @@ const emit = defineEmits<{
&.pill--preview {
/* Cannot use CSS variable inside data URL, so instead switching based on data-theme and media query */
--schema-preview-dashed-border: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' viewBox='0 0 400 400' fill='none' rx='4' ry='4' stroke='%230000002A' stroke-width='2' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
--schema-preview-dashed-border-dark: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' viewBox='0 0 400 400' fill='none' rx='4' ry='4' stroke='%23FFFFFF2A' stroke-width='2' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
--schema-preview--border--dashed: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' viewBox='0 0 400 400' fill='none' rx='4' ry='4' stroke='%230000002A' stroke-width='2' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
--schema-preview--border--dashed--dark: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' viewBox='0 0 400 400' fill='none' rx='4' ry='4' stroke='%23FFFFFF2A' stroke-width='2' stroke-dasharray='4%2c 4' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
color: var(--color--text--tint-1);
background-color: var(--color--foreground--tint-1);
border: none;
max-width: calc(100% - var(--spacing--lg));
background-image: var(--schema-preview-dashed-border);
background-image: var(--schema-preview--border--dashed);
.title {
color: var(--color--text--tint-1);
@ -136,12 +136,12 @@ const emit = defineEmits<{
@media (prefers-color-scheme: dark) {
body:not([data-theme]) .pill--preview {
background-image: var(--schema-preview-dashed-border-dark);
background-image: var(--schema-preview--border--dashed--dark);
}
}
[data-theme='dark'] .pill--preview {
background-image: var(--schema-preview-dashed-border-dark);
background-image: var(--schema-preview--border--dashed--dark);
}
.draggable .pill.pill--highlight {
@ -180,7 +180,7 @@ const emit = defineEmits<{
}
.text {
font-weight: var(--font-weight-normal);
font-weight: var(--font-weight--regular);
font-size: var(--font-size--2xs);
margin-left: var(--spacing--2xs);
word-break: break-word;

4
packages/frontend/editor-ui/src/features/ndv/runData/components/error/NodeErrorView.vue
View file

@ -879,7 +879,7 @@ async function onAskAssistantClick() {
flex-grow: 0;
flex-shrink: 0;
width: 120px;
color: var(--color-text);
color: var(--color--text);
font-size: var(--font-size--2xs);
}
@ -887,7 +887,7 @@ async function onAskAssistantClick() {
flex: 1;
overflow: hidden;
margin-right: auto;
color: var(--color-text);
color: var(--color--text);
font-size: var(--font-size--2xs);
word-wrap: break-word;

10
packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsViewV2.vue
View file

@ -856,7 +856,7 @@ onBeforeUnmount(() => {
<style lang="scss" module>
.backdrop {
position: absolute;
z-index: var(--z-index-ndv);
z-index: var(--ndv--z);
top: 0;
left: 0;
right: 0;
@ -866,7 +866,7 @@ onBeforeUnmount(() => {
.dialog {
position: absolute;
z-index: var(--z-index-ndv);
z-index: var(--ndv--z);
width: calc(100% - var(--spacing--2xl));
height: calc(100% - var(--spacing--2xl));
top: var(--spacing--lg);
@ -937,11 +937,11 @@ onBeforeUnmount(() => {
}
.draggable {
--draggable-height: 18px;
--draggable--height: 18px;
position: absolute;
top: calc(-1 * var(--draggable-height));
top: calc(-1 * var(--draggable--height));
left: 50%;
transform: translateX(-50%);
height: var(--draggable-height);
height: var(--draggable--height);
}
</style>

4
packages/frontend/editor-ui/src/features/project-roles/ProjectRoleView.vue
View file

@ -432,7 +432,7 @@ const displayNameValidationRules = [
.cardContainer {
padding: 8px 16px;
border-radius: 4px;
border: var(--border-base);
border: var(--border);
background-color: var(--color--background--light-3);
:global(.el-skeleton__p) {
margin-bottom: 8px;
@ -445,7 +445,7 @@ const displayNameValidationRules = [
}
.card:not(:last-child) {
border-bottom: var(--border-base);
border-bottom: var(--border);
}
.cardTitle {

2
packages/frontend/editor-ui/src/features/settings/communityNodes/components/nodeCreator/CommunityNodeDetails.vue
View file

@ -138,7 +138,7 @@ const onInstall = async () => {
.title {
display: flex;
align-items: center;
color: var(--color-text);
color: var(--color--text);
font-size: var(--font-size--xl);
font-weight: var(--font-weight--bold);
}

2
packages/frontend/editor-ui/src/features/settings/sso/views/SettingsLdapView.vue
View file

@ -747,7 +747,7 @@ onMounted(async () => {
}
.enableFeatureContainer {
margin-bottom: var(--spacing-1xl);
margin-bottom: var(--spacing--xl);
> span {
font-size: var(--font-size--sm);

2
packages/frontend/editor-ui/src/features/shared/banners/components/banners/BaseBanner.vue
View file

@ -75,7 +75,7 @@ async function onCloseClick() {
<style lang="scss" module>
.callout {
height: var(--banner-height);
height: var(--banner--height);
}
.mainContent {

8
packages/frontend/editor-ui/src/features/shared/editors/components/InlineExpressionEditor/OutputItemSelect.vue
View file

@ -52,7 +52,7 @@ function prevItem() {
:min="0"
:max="max"
:model-value="itemIndex"
:style="{ '--input-width': `calc(${inputCharWidth}ch + var(--spacing--sm))` }"
:style="{ '--output-item-select--width': `calc(${inputCharWidth}ch + var(--spacing--sm))` }"
@update:model-value="updateItemIndex"
></N8nInputNumber>
<N8nIconButton
@ -99,8 +99,8 @@ function prevItem() {
--input--height: 22px;
--input--radius--top-left: var(--radius);
--input--radius--bottom-left: var(--radius);
--input-border-top-right-radius: var(--radius);
--input-border-bottom-right-radius: var(--radius);
--input-triple--radius--top-right: var(--radius);
--input-triple--radius--bottom-right: var(--radius);
line-height: calc(var(--input--height) - var(--spacing--4xs));
&.hovering {
@ -113,7 +113,7 @@ function prevItem() {
line-height: var(--input--height);
text-align: center;
padding: 0 var(--spacing--4xs);
max-width: var(--input-width);
max-width: var(--output-item-select--width);
}
}
</style>

4
packages/frontend/editor-ui/src/features/shared/editors/components/InlineExpressionEditor/theme.ts
View file

@ -35,10 +35,10 @@ export const inputTheme = ({ rows, isReadOnly } = { rows: 5, isReadOnly: false }
borderRadius: 'var(--input--radius, var(--radius))',
borderTopLeftRadius: 0,
borderTopRightRadius:
'var(--input-border-top-right-radius, var(--input--radius, var(--radius)))',
'var(--input-triple--radius--top-right, var(--input--radius, var(--radius)))',
borderBottomLeftRadius: 0,
borderBottomRightRadius:
'var(--input-border-bottom-right-radius, var(--input--radius, var(--radius)))',
'var(--input-triple--radius--bottom-right, var(--input--radius, var(--radius)))',
backgroundColor: 'white',
},
'.cm-cursor, .cm-dropCursor': {

6
packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/ActionItem.vue
View file

@ -123,9 +123,9 @@ const { draggableDataTransfer, dragging } = toRefs(state);
<style lang="scss" module>
.action {
--node-creator--name--font-size: var(--font-size--2xs);
--node-creator--name--font-weight: var(--font-weight-normal);
--trigger-icon-background-color: #{$trigger-icon-background-color};
--trigger-icon-border-color: #{$trigger-icon-border-color};
--node-creator--name--font-weight: var(--font-weight--regular);
--trigger-icon--color--background: #{$trigger-icon-background-color};
--trigger-icon--border-color: #{$trigger-icon-border-color};
--node--icon--size: 20px;
--node--icon--margin-right: var(--spacing--xs);

4
packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/NodeItem.vue
View file

@ -244,8 +244,8 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
<style lang="scss" module>
.nodeItem {
--trigger-icon-background-color: #{$trigger-icon-background-color};
--trigger-icon-border-color: #{$trigger-icon-border-color};
--trigger-icon--color--background: #{$trigger-icon-background-color};
--trigger-icon--border-color: #{$trigger-icon-border-color};
margin-left: 15px;
margin-right: 12px;
user-select: none;

10
packages/frontend/editor-ui/src/features/shared/nodeCreator/components/NodeCreator.vue
View file

@ -207,14 +207,14 @@ onClickOutside(
font-weight: var(--font-weight--bold);
}
.nodeCreator {
--node-creator-width: #{$node-creator-width};
--node-creator--width: #{$node-creator-width};
--node--icon--color: var(--color--text);
position: fixed;
top: $header-height;
bottom: 0;
right: 0;
z-index: var(--z-index-node-creator);
width: var(--node-creator-width);
z-index: var(--node-creator--z);
width: var(--node-creator--width);
color: $node-creator-text-color;
}
@ -237,7 +237,7 @@ onClickOutside(
.close {
position: absolute;
z-index: calc(var(--z-index-node-creator) + 1);
z-index: calc(var(--node-creator--z) + 1);
top: var(--spacing--xs);
right: var(--spacing--xs);
background: transparent;
@ -247,7 +247,7 @@ onClickOutside(
@media screen and (max-width: #{$node-creator-width + $sidebar-width}) {
.nodeCreator {
--node-creator-width: calc(100vw - #{$sidebar-width});
--node-creator--width: calc(100vw - #{$sidebar-width});
}
.close {

2
packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/CommunityNodeDetails.vue
View file

@ -135,7 +135,7 @@ const onInstall = async () => {
.title {
display: flex;
align-items: center;
color: var(--color-text);
color: var(--color--text);
font-size: var(--font-size--xl);
font-weight: var(--font-weight--bold);
}

3
packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/NodesListPanel.vue
View file

@ -307,7 +307,7 @@ function onBackButton() {
height: 100%;
background-color: $node-creator-background-color;
--node--icon--badge--color--background: var(--color--background--light-3);
width: var(--node-creator-width);
width: var(--node-creator--width);
display: flex;
flex-direction: column;
@ -374,6 +374,7 @@ function onBackButton() {
@each $node-type in $supplemental-node-types {
.nodes-list-panel-#{$node-type} .nodes-list-panel-header {
.n8n-node-icon svg {
/* stylelint-disable-next-line @n8n/css-var-naming */
color: var(--node-type-#{$node-type}-color);
}
}

2
packages/frontend/editor-ui/src/features/shared/nodeCreator/components/Panel/SearchBar.vue
View file

@ -80,7 +80,7 @@ defineExpose({
height: 40px;
padding: 0 var(--spacing--xs);
align-items: center;
margin: var(--search-margin, var(--spacing--sm));
margin: var(--search--margin, var(--spacing--sm));
filter: drop-shadow(0 2px 5px rgba(46, 46, 50, 0.04));
border: 1px solid $node-creator-border-color;

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/Canvas.vue
View file

@ -1077,6 +1077,7 @@ defineExpose({
}
&.isExperimentalNdvActive {
/* stylelint-disable-next-line @n8n/css-var-naming */
--canvas-zoom-compensation-factor: 0.5;
}
}

6
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdge.vue
View file

@ -183,7 +183,8 @@ function onEdgeLabelMouseLeave() {
fill 0.3s ease;
// @bugfix cat-1639-connection-colors-not-rendering-correctly
// Using !important here to override BaseEdge styles after Rolldown Vite migration
stroke: var(--canvas-edge-color, v-bind(edgeStroke)) !important;
stroke: var(--canvas-edge--color, v-bind(edgeStroke)) !important;
/* stylelint-disable-next-line @n8n/css-var-naming */
stroke-width: calc(2 * var(--canvas-zoom-compensation-factor, 1)) !important;
stroke-linecap: square;
}
@ -192,14 +193,17 @@ function onEdgeLabelMouseLeave() {
transform: translateY(calc(var(--spacing--xs) * -1));
position: absolute;
/* stylelint-disable-next-line @n8n/css-var-naming */
--label-translate-y: 0;
&.straight {
/* stylelint-disable-next-line @n8n/css-var-naming */
--label-translate-y: -100%;
}
}
.edgeLabel {
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: scale(var(--canvas-zoom-compensation-factor, 1)) translate(0, var(--label-translate-y));
color: var(--color--text);
font-size: var(--font-size--xs);

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/edges/CanvasEdgeToolbar.vue
View file

@ -67,6 +67,7 @@ function onDelete() {
gap: var(--spacing--2xs);
pointer-events: all;
padding: var(--spacing--2xs);
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: scale(var(--canvas-zoom-compensation-factor, 1));
}
</style>

3
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/CanvasHandleRenderer.vue
View file

@ -166,7 +166,9 @@ provide(CanvasNodeHandleKey, {
<style lang="scss" module>
.handle {
/* stylelint-disable-next-line @n8n/css-var-naming */
--handle--indicator--width: calc(16px * var(--canvas-zoom-compensation-factor, 1));
/* stylelint-disable-next-line @n8n/css-var-naming */
--handle--indicator--height: calc(16px * var(--canvas-zoom-compensation-factor, 1));
width: var(--handle--indicator--width);
@ -181,6 +183,7 @@ provide(CanvasNodeHandleKey, {
&.inputs {
&.main {
/* stylelint-disable-next-line @n8n/css-var-naming */
--handle--indicator--width: calc(8px * var(--canvas-zoom-compensation-factor, 1));
}
}

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/CanvasHandleMainInput.vue
View file

@ -34,6 +34,7 @@ const handleClasses = 'target';
position: absolute;
top: 50%;
left: calc(var(--spacing--xs) * -1);
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: translate(0, -50%) scale(var(--canvas-zoom-compensation-factor, 1)) translate(-100%, 0);
transform-origin: center left;
font-size: var(--font-size--2xs);

3
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/CanvasHandleMainOutput.vue
View file

@ -127,6 +127,7 @@ function onClickAdd() {
.outputLabel {
top: 50%;
left: var(--spacing--md);
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: translate(0, -50%) scale(var(--canvas-zoom-compensation-factor, 1));
transform-origin: center left;
font-size: var(--font-size--2xs);
@ -136,7 +137,9 @@ function onClickAdd() {
.runDataLabel {
position: absolute;
top: 50%;
/* stylelint-disable-next-line @n8n/css-var-naming */
left: calc(50% * var(--canvas-zoom-compensation-factor, 1));
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: translate(-50%, -50%) scale(var(--canvas-zoom-compensation-factor, 1))
translate(0, -100%);
font-size: var(--font-size--xs);

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/CanvasHandleNonMainInput.vue
View file

@ -73,6 +73,7 @@ function onClickAdd() {
position: absolute;
top: 20px;
left: 50%;
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: translate(-50%, 0) scale(var(--canvas-zoom-compensation-factor, 1));
font-size: var(--font-size--2xs);
color: var(--node-type--supplemental--color);

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/CanvasHandleNonMainOutput.vue
View file

@ -33,6 +33,7 @@ const classes = computed(() => ({
position: absolute;
top: -20px;
left: 50%;
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: translate(-50%, 0) scale(var(--canvas-zoom-compensation-factor, 1));
font-size: var(--font-size--2xs);
color: var(--node-type--supplemental--color);

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/handles/render-types/parts/CanvasHandlePlus.vue
View file

@ -143,6 +143,7 @@ function onClick(event: MouseEvent) {
<style lang="scss" module>
.wrapper {
position: relative;
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: scale(var(--canvas-zoom-compensation-factor, 1));
&.right {

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/CanvasNodeToolbar.vue
View file

@ -201,6 +201,7 @@ function onFocusNode() {
justify-content: space-between;
align-items: center;
padding-bottom: var(--spacing--3xs);
/* stylelint-disable-next-line @n8n/css-var-naming */
zoom: var(--canvas-zoom-compensation-factor, 1);
margin-bottom: var(--spacing--2xs);
}

30
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/CanvasNodeDefault.vue
View file

@ -190,9 +190,9 @@ function onActivate(event: MouseEvent) {
<style lang="scss" module>
.node {
--canvas-node-border-width: 2px;
--trigger-node--border-radius: 36px;
--canvas-node--status-icons-offset: var(--spacing--3xs);
--canvas-node--border-width: 2px;
--trigger-node--radius: 36px;
--canvas-node--status-icons--margin: var(--spacing--3xs);
--node--icon--color: var(--color--foreground--shade-1);
position: relative;
@ -201,14 +201,14 @@ function onActivate(event: MouseEvent) {
display: flex;
align-items: center;
justify-content: center;
background: var(--canvas-node--background, var(--node--color--background));
border: var(--canvas-node-border-width) solid
background: var(--canvas-node--color--background, var(--node--color--background));
border: var(--canvas-node--border-width) solid
var(--canvas-node--border-color, var(--color--foreground--shade-2));
border-radius: var(--radius--lg);
&.trigger {
border-radius: var(--trigger-node--border-radius) var(--radius--lg) var(--radius--lg)
var(--trigger-node--border-radius);
border-radius: var(--trigger-node--radius) var(--radius--lg) var(--radius--lg)
var(--trigger-node--radius);
}
/**
@ -216,8 +216,11 @@ function onActivate(event: MouseEvent) {
*/
&.configuration {
background: var(--canvas-node--background, var(--node-type--supplemental--color--background));
border: var(--canvas-node-border-width) solid
background: var(
--canvas-node--color--background,
var(--node-type--supplemental--color--background)
);
border: var(--canvas-node--border-width) solid
var(--canvas-node--border-color, var(--color--foreground--shade-1));
border-radius: calc(var(--canvas-node--height) / 2);
@ -228,7 +231,7 @@ function onActivate(event: MouseEvent) {
&.configurable {
.icon {
margin-left: calc(40px - (var(--node--icon--size)) / 2 - var(--canvas-node-border-width));
margin-left: calc(40px - (var(--node--icon--size)) / 2 - var(--canvas-node--border-width));
}
.description {
@ -278,6 +281,7 @@ function onActivate(event: MouseEvent) {
*/
&.selected {
/* stylelint-disable-next-line @n8n/css-var-naming */
box-shadow: 0 0 0 calc(8px * var(--canvas-zoom-compensation-factor, 1))
var(--canvas--color--selected-transparent);
}
@ -294,7 +298,7 @@ function onActivate(event: MouseEvent) {
}
&.error {
--canvas-node--border-color: var(--color-canvas-node-error-border-color, var(--color--danger));
--canvas-node--border-color: var(--canvas-node--border-color--error, var(--color--danger));
}
&.pinned {
@ -367,8 +371,8 @@ function onActivate(event: MouseEvent) {
.statusIcons {
position: absolute;
bottom: var(--canvas-node--status-icons-offset);
right: var(--canvas-node--status-icons-offset);
bottom: var(--canvas-node--status-icons--margin);
right: var(--canvas-node--status-icons--margin);
}
.icon {

4
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeSettingsIcons.vue
View file

@ -90,8 +90,8 @@ const size = 'medium';
<style lang="scss" module>
.settingsIcons {
position: absolute;
top: var(--canvas-node--status-icons-offset);
right: var(--canvas-node--status-icons-offset);
top: var(--canvas-node--status-icons--margin);
right: var(--canvas-node--status-icons--margin);
display: flex;
flex-direction: row;
}

2
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeStatusIcons.vue
View file

@ -189,7 +189,7 @@ const commonClasses = computed(() => [
position: absolute;
left: 0;
top: 0;
padding: var(--canvas-node--status-icons-offset);
padding: var(--canvas-node--status-icons--margin);
}
&.spinnerScrim {

1
packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/nodes/render-types/parts/CanvasNodeTrigger.vue
View file

@ -129,6 +129,7 @@ async function handleClickExecute() {
transition:
translate 0.1s ease-in,
opacity 0.1s ease-in;
/* stylelint-disable-next-line @n8n/css-var-naming */
transform: scale(var(--canvas-zoom-compensation-factor, 1));
transform-origin: center right;
}

16
packages/frontend/editor-ui/src/features/workflows/canvas/experimental/components/ExperimentalEmbeddedNodeDetails.vue
View file

@ -88,7 +88,7 @@ watchOnce(isVisible, (visible) => {
node?.disabled ? $style.disabled : '',
]"
:style="{
'--max-height-on-focus': `${maxHeightOnFocus / experimentalNdvStore.maxCanvasZoom}px`,
'--input--max-height--focus': `${maxHeightOnFocus / experimentalNdvStore.maxCanvasZoom}px`,
pointerEvents: isPaneMoving ? 'none' : 'auto', // Don't interrupt canvas panning
}"
>
@ -140,9 +140,9 @@ watchOnce(isVisible, (visible) => {
overflow: hidden;
--canvas-node--border-color: var(--color--text--tint-2);
--expanded-max-height: min(
--embedded-ndv--max-height--expanded: min(
calc(var(--canvas-node--height) * 2),
var(--max-height-on-focus),
var(--input--max-height--focus),
300px
);
@ -150,11 +150,11 @@ watchOnce(isVisible, (visible) => {
user-select: text;
cursor: auto;
height: auto;
max-height: var(--expanded-max-height);
max-height: var(--embedded-ndv--max-height--expanded);
min-height: var(--spacing--3xl);
:global(.selected) & {
max-height: var(--max-height-on-focus);
max-height: var(--input--max-height--focus);
}
}
&.collapsed {
@ -177,11 +177,11 @@ watchOnce(isVisible, (visible) => {
width: 100%;
height: auto;
max-height: calc(var(--expanded-max-height) - var(--border-width) * 2);
max-height: calc(var(--embedded-ndv--max-height--expanded) - var(--border-width) * 2);
min-height: var(--spacing--2xl); // should be multiple of GRID_SIZE
:global(.selected) & {
max-height: calc(var(--max-height-on-focus) - var(--border-width) * 2);
max-height: calc(var(--input--max-height--focus) - var(--border-width) * 2);
}
}
@ -200,6 +200,7 @@ watchOnce(isVisible, (visible) => {
}
& > * {
/* stylelint-disable-next-line @n8n/css-var-naming */
zoom: var(--canvas-zoom-compensation-factor, 1);
flex-grow: 0;
flex-shrink: 0;
@ -222,6 +223,7 @@ watchOnce(isVisible, (visible) => {
.settingsView {
& > * {
/* stylelint-disable-next-line @n8n/css-var-naming */
zoom: var(--canvas-zoom-compensation-factor, 1);
}
}

2
packages/frontend/editor-ui/src/features/workflows/templates/views/TemplatesView.vue
View file

@ -30,7 +30,7 @@ withDefaults(defineProps<Props>(), {
.template {
display: flex;
width: 100%;
max-width: var(--content-container-width);
max-width: var(--content-container--width);
padding: var(--spacing--lg) var(--spacing--lg) 0;
justify-content: center;
@media (min-width: 1200px) {

2
packages/frontend/editor-ui/src/features/workflows/workflowDiff/HighlightedEdge.vue
View file

@ -14,7 +14,7 @@ const props = defineProps<CanvasEdgeProps>();
:key="segment[0]"
:style="{
strokeWidth: 15,
stroke: 'var(--edge-highlight-color)',
stroke: 'var(--edge--color--highlight)',
}"
:path="segment[0]"
:interaction-width="0"

19
packages/frontend/editor-ui/src/features/workflows/workflowDiff/NodeDiff.vue
View file

@ -45,23 +45,26 @@ const props = withDefaults(
}
&:global([theme='dark']) {
/* stylelint-disable-next-line @n8n/css-var-naming */
--fgColor-default: var(--color--text--shade-1);
/* stylelint-disable-next-line @n8n/css-var-naming */
--bgColor-default: var(--color--background--light-2);
/* stylelint-disable-next-line @n8n/css-var-naming */
--color-fg-subtle: var(--color--text--tint-1); // Muted text
// deletions
--color-diff-blob-deletion-num-bg: var(--diff--color--deleted--light);
--color-diff-blob-deletion-num-text: var(--color--text--tint-3);
--color-danger-emphasis: var(--diff--color--deleted);
--diff--blob--deletion-num--color--background: var(--diff--color--deleted--light);
--diff--blob--deletion-num--color--text: var(--color--text--tint-3);
--diff--color--danger--emphasis: var(--diff--color--deleted);
// insertions
--color-diff-blob-addition-num-text: var(--color--text--tint-3);
--color-diff-blob-addition-num-bg: var(--diff--color--new--light);
--color-success-emphasis: var(--diff--color--new);
--diff--blob--addition-num--color--text: var(--color--text--tint-3);
--diff--blob--addition-num--color--background: var(--diff--color--new--light);
--diff--color--success--emphasis: var(--diff--color--new);
--color-diff-blob-hunk-num-bg: var(--color--background--shade-1);
--diff--blob--hunk-num--color--background: var(--color--background--shade-1);
:global(.blob-code-hunk) {
background-color: var(--color-diff-blob-hunk-num-bg);
background-color: var(--diff--blob--hunk-num--color--background);
}
}
}

16
packages/frontend/editor-ui/src/features/workflows/workflowDiff/WorkflowDiffModal.vue
View file

@ -857,7 +857,7 @@ const modifiers = [
}
.deleted {
--canvas-node--background: var(--diff--color--deleted--faint);
--canvas-node--color--background: var(--diff--color--deleted--faint);
--canvas-node--border-color: var(--diff--color--deleted);
--sticky--color--background: var(--diff--color--deleted--faint);
--sticky--border-color: var(--diff--color--deleted);
@ -879,7 +879,7 @@ const modifiers = [
}
.added {
--canvas-node--border-color: var(--diff--color--new);
--canvas-node--background: var(--diff--color--new--faint);
--canvas-node--color--background: var(--diff--color--new--faint);
--sticky--color--background: var(--diff--color--new--faint);
--sticky--border-color: var(--diff--color--new);
position: relative;
@ -905,7 +905,7 @@ const modifiers = [
pointer-events: none;
cursor: default;
--sticky--color--background: rgba(126, 129, 134, 0.2);
--canvas-node-icon-color: var(--color--foreground--shade-2);
--canvas-node--icon-color: var(--color--foreground--shade-2);
--sticky--border-color: var(--color--foreground--shade-2);
&:deep(img) {
filter: contrast(0) grayscale(100%);
@ -913,7 +913,7 @@ const modifiers = [
}
.modified {
--canvas-node--border-color: var(--diff--color--modified);
--canvas-node--background: var(--diff--color--modified--faint);
--canvas-node--color--background: var(--diff--color--modified--faint);
--sticky--color--background: var(--diff--color--modified--faint);
--sticky--border-color: var(--diff--color--modified);
position: relative;
@ -935,12 +935,12 @@ const modifiers = [
}
.edge-deleted {
--canvas-edge-color: var(--diff--color--deleted);
--edge-highlight-color: var(--diff--color--deleted--light);
--canvas-edge--color: var(--diff--color--deleted);
--edge--color--highlight: var(--diff--color--deleted--light);
}
.edge-added {
--canvas-edge-color: var(--diff--color--new);
--edge-highlight-color: var(--diff--color--new--light);
--canvas-edge--color: var(--diff--color--new);
--edge--color--highlight: var(--diff--color--new--light);
}
.edge-equal {
opacity: 0.5;

2
packages/frontend/editor-ui/src/n8n-theme-variables.scss
View file

@ -24,7 +24,7 @@ $badge-warning-color: var(--color--text--shade-1);
$warning-tooltip-color: var(--color--danger);
// sass variable is used for scss files
$header-height: calc(var(--header-height) * 1px);
$header-height: calc(var(--header--height) * 1px);
// sidebar
$sidebar-width: 65px;

8
packages/frontend/editor-ui/src/n8n-theme.scss
View file

@ -4,9 +4,9 @@
:root {
// Using native css variable enables us to use this value in JS
--header-height: 65;
--content-container-width: 1280px;
--banner-height: 48px;
--header--height: 65;
--content-container--width: 1280px;
--banner--height: 48px;
}
.clickable {
@ -176,7 +176,7 @@
.el-notification {
border-radius: 4px;
border: none;
margin-bottom: var(--toast-bottom-offset, 0);
margin-bottom: var(--toast--offset, 0);
&.whats-new-notification {
bottom: var(--spacing--xs) !important;

2
packages/frontend/editor-ui/src/stores/ui.store.ts
View file

@ -411,7 +411,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
const headerHeight = computed(() => {
const style = getComputedStyle(document.body);
return Number(style.getPropertyValue('--header-height'));
return Number(style.getPropertyValue('--header--height'));
});
const isAnyModalOpen = computed(() => {

2
packages/frontend/editor-ui/src/styles/plugins/_codemirror.scss
View file

@ -1,6 +1,6 @@
#cm-tooltip-container {
position: relative;
z-index: var(--z-index-codemirror-tooltip);
z-index: var(--codemirror-tooltip--z);
max-width: 0;
max-height: 0;
}

10
packages/frontend/editor-ui/src/views/CanvasAddButton.vue
View file

@ -16,8 +16,8 @@ const props = defineProps<Props>();
const nodeCreatorStore = useNodeCreatorStore();
const containerCssVars = computed(() => ({
'--trigger-placeholder-left-position': `${props.position[0]}px`,
'--trigger-placeholder-top-position': `${props.position[1]}px`,
'--trigger-placeholder--margin-left': `${props.position[0]}px`,
'--trigger-placeholder--margin-top': `${props.position[1]}px`,
}));
</script>
@ -55,11 +55,11 @@ const containerCssVars = computed(() => ({
width: 100px;
height: 100px;
position: absolute;
top: var(--trigger-placeholder-top-position);
left: var(--trigger-placeholder-left-position);
top: var(--trigger-placeholder--margin-top);
left: var(--trigger-placeholder--margin-left);
// We have to increase z-index to make sure it's higher than selecting box in NodeView
// otherwise the clicks wouldn't register
z-index: var(--z-index-canvas-add-button);
z-index: var(--canvas-add-button--z);
&:hover .button svg path {
fill: var(--color--primary);

8
packages/frontend/editor-ui/stylelint.config.mjs
View file

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

213
pnpm-lock.yaml
View file

@ -102,9 +102,6 @@ catalogs:
rimraf:
specifier: 6.0.1
version: 6.0.1
run-script-os:
specifier: 1.1.6
version: 1.1.6
simple-git:
specifier: 3.28.0
version: 3.28.0
@ -539,7 +536,7 @@ importers:
version: 4.0.7
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
dotenv:
specifier: 8.6.0
version: 8.6.0
@ -564,7 +561,7 @@ importers:
dependencies:
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
devDependencies:
'@n8n/typescript-config':
specifier: workspace:*
@ -1318,7 +1315,7 @@ importers:
version: link:../eslint-plugin-community-nodes
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
eslint:
specifier: 'catalog:'
version: 9.29.0(jiti@2.6.1)
@ -1532,7 +1529,7 @@ importers:
version: 1.11.0
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
bcryptjs:
specifier: 2.4.3
version: 2.4.3
@ -1884,7 +1881,7 @@ importers:
version: 9.42.1
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
callsites:
specifier: 'catalog:'
version: 3.1.0
@ -2016,9 +2013,6 @@ importers:
rimraf:
specifier: 'catalog:'
version: 6.0.1
run-script-os:
specifier: 'catalog:'
version: 1.1.6
tsdown:
specifier: 'catalog:'
version: 0.15.6(typescript@5.9.2)(vue-tsc@2.2.8(patch_hash=e2aee939ccac8a57fe449bfd92bedd8117841579526217bc39aca26c6b8c317f)(typescript@5.9.2))
@ -2354,7 +2348,7 @@ importers:
version: link:../../../@n8n/utils
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
flatted:
specifier: 'catalog:'
version: 3.2.7
@ -2611,7 +2605,7 @@ importers:
version: 1.1.4
axios:
specifier: 1.12.0
version: 1.12.0(debug@4.4.3)
version: 1.12.0(debug@4.4.1)
bowser:
specifier: 2.11.0
version: 2.11.0
@ -2814,9 +2808,6 @@ importers:
miragejs:
specifier: ^0.1.48
version: 0.1.48
run-script-os:
specifier: 'catalog:'
version: 1.1.6
unplugin-icons:
specifier: catalog:frontend
version: 0.19.0(@vue/compiler-sfc@3.5.13)
@ -6442,20 +6433,16 @@ packages:
'@otplib/preset-v11@12.0.1':
resolution: {integrity: sha512-9hSetMI7ECqbFiKICrNa4w70deTUfArtwXykPUvSHWOdzOlfa9ajglu7mNCntlvxycTiOAXkQGwjQCzzDEMRMg==}
'@oxc-project/runtime@0.71.0':
resolution: {integrity: sha512-QwoF5WUXIGFQ+hSxWEib4U/aeLoiDN9JlP18MnBgx9LLPRDfn1iICtcow7Jgey6HLH4XFceWXQD5WBJ39dyJcw==}
engines: {node: '>=6.9.0'}
'@oxc-project/runtime@0.92.0':
resolution: {integrity: sha512-Z7x2dZOmznihvdvCvLKMl+nswtOSVxS2H2ocar+U9xx6iMfTp0VGIrX6a4xB1v80IwOPC7dT1LXIJrY70Xu3Jw==}
engines: {node: ^20.19.0 || >=22.12.0}
'@oxc-project/types@0.71.0':
resolution: {integrity: sha512-5CwQ4MI+P4MQbjLWXgNurA+igGwu/opNetIE13LBs9+V93R64MLvDKOOLZIXSzEfovU3Zef3q3GjPnMTgJTn2w==}
'@oxc-project/types@0.94.0':
resolution: {integrity: sha512-+UgQT/4o59cZfH6Cp7G0hwmqEQ0wE+AdIwhikdwnhWI9Dp8CgSY081+Q3O67/wq3VJu8mgUEB93J9EHHn70fOw==}
'@oxc-project/types@0.95.0':
resolution: {integrity: sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==}
'@paralleldrive/cuid2@2.2.2':
resolution: {integrity: sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==}
@ -6673,14 +6660,21 @@ packages:
cpu: [arm64]
os: [android]
'@rolldown/binding-android-arm64@1.0.0-beta.45':
resolution: {integrity: sha512-bfgKYhFiXJALeA/riil908+2vlyWGdwa7Ju5S+JgWZYdR4jtiPOGdM6WLfso1dojCh+4ZWeiTwPeV9IKQEX+4g==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [android]
'@rolldown/binding-darwin-arm64@1.0.0-beta.42':
resolution: {integrity: sha512-abw/wtgJA8OCgaTlL+xJxnN/Z01BwV1rfzIp5Hh9x+IIO6xOBfPsQ0nzi0+rWx3TyZ9FZXyC7bbC+5NpQ9EaXQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [darwin]
'@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-Mp0/gqiPdepHjjVm7e0yL1acWvI0rJVVFQEADSezvAjon9sjQ7CEg9JnXICD4B1YrPmN9qV/e7cQZCp87tTV4w==}
'@rolldown/binding-darwin-arm64@1.0.0-beta.45':
resolution: {integrity: sha512-xjCv4CRVsSnnIxTuyH1RDJl5OEQ1c9JYOwfDAHddjJDxCw46ZX9q80+xq7Eok7KC4bRSZudMJllkvOKv0T9SeA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [darwin]
@ -6690,8 +6684,9 @@ packages:
cpu: [x64]
os: [darwin]
'@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-40re4rMNrsi57oavRzIOpRGmg3QRlW6Ea8Q3znaqgOuJuKVrrm2bIQInTfkZJG7a4/5YMX7T951d0+toGLTdCA==}
'@rolldown/binding-darwin-x64@1.0.0-beta.45':
resolution: {integrity: sha512-ddcO9TD3D/CLUa/l8GO8LHzBOaZqWg5ClMy3jICoxwCuoz47h9dtqPsIeTiB6yR501LQTeDsjA4lIFd7u3Ljfw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [darwin]
@ -6701,8 +6696,9 @@ packages:
cpu: [x64]
os: [freebsd]
'@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-8BDM939bbMariZupiHp3OmP5N+LXPT4mULA0hZjDaq970PCxv4krZOSMG+HkWUUwmuQROtV+/00xw39EO0P+8g==}
'@rolldown/binding-freebsd-x64@1.0.0-beta.45':
resolution: {integrity: sha512-MBTWdrzW9w+UMYDUvnEuh0pQvLENkl2Sis15fHTfHVW7ClbGuez+RWopZudIDEGkpZXdeI4CkRXk+vdIIebrmg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [freebsd]
@ -6712,8 +6708,9 @@ packages:
cpu: [arm]
os: [linux]
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-sntsPaPgrECpBB/+2xrQzVUt0r493TMPI+4kWRMhvMsmrxOqH1Ep5lM0Wua/ZdbfZNwm1aVa5pcESQfNfM4Fhw==}
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.45':
resolution: {integrity: sha512-4YgoCFiki1HR6oSg+GxxfzfnVCesQxLF1LEnw9uXS/MpBmuog0EOO2rYfy69rWP4tFZL9IWp6KEfGZLrZ7aUog==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm]
os: [linux]
@ -6724,8 +6721,9 @@ packages:
os: [linux]
libc: [glibc]
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-5clBW/I+er9F2uM1OFjJFWX86y7Lcy0M+NqsN4s3o07W+8467Zk8oQa4B45vdaXoNUF/yqIAgKkA/OEdQDxZqA==}
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.45':
resolution: {integrity: sha512-LE1gjAwQRrbCOorJJ7LFr10s5vqYf5a00V5Ea9wXcT2+56n5YosJkcp8eQ12FxRBv2YX8dsdQJb+ZTtYJwb6XQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [glibc]
@ -6737,8 +6735,9 @@ packages:
os: [linux]
libc: [musl]
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-wv+rnAfQDk9p/CheX8/Kmqk2o1WaFa4xhWI9gOyDMk/ljvOX0u0ubeM8nI1Qfox7Tnh71eV5AjzSePXUhFOyOg==}
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.45':
resolution: {integrity: sha512-tdy8ThO/fPp40B81v0YK3QC+KODOmzJzSUOO37DinQxzlTJ026gqUSOM8tzlVixRbQJltgVDCTYF8HNPRErQTA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [musl]
@ -6750,8 +6749,9 @@ packages:
os: [linux]
libc: [glibc]
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-gxD0/xhU4Py47IH3bKZbWtvB99tMkUPGPJFRfSc5UB9Osoje0l0j1PPbxpUtXIELurYCqwLBKXIMTQGifox1BQ==}
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.45':
resolution: {integrity: sha512-lS082ROBWdmOyVY/0YB3JmsiClaWoxvC+dA8/rbhyB9VLkvVEaihLEOr4CYmrMse151C4+S6hCw6oa1iewox7g==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [glibc]
@ -6763,8 +6763,9 @@ packages:
os: [linux]
libc: [musl]
'@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-HotuVe3XUjDwqqEMbm3o3IRkP9gdm8raY/btd/6KE3JGLF/cv4+3ff1l6nOhAZI8wulWDPEXPtE7v+HQEaTXnA==}
'@rolldown/binding-linux-x64-musl@1.0.0-beta.45':
resolution: {integrity: sha512-Hi73aYY0cBkr1/SvNQqH8Cd+rSV6S9RB5izCv0ySBcRnd/Wfn5plguUoGYwBnhHgFbh6cPw9m2dUVBR6BG1gxA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [musl]
@ -6775,14 +6776,20 @@ packages:
cpu: [arm64]
os: [openharmony]
'@rolldown/binding-openharmony-arm64@1.0.0-beta.45':
resolution: {integrity: sha512-fljEqbO7RHHogNDxYtTzr+GNjlfOx21RUyGmF+NrkebZ8emYYiIqzPxsaMZuRx0rgZmVmliOzEp86/CQFDKhJQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [openharmony]
'@rolldown/binding-wasm32-wasi@1.0.0-beta.42':
resolution: {integrity: sha512-2Ft32F7uiDTrGZUKws6CLNTlvTWHC33l4vpXrzUucf9rYtUThAdPCOt89Pmn13tNX6AulxjGEP2R0nZjTSW3eQ==}
engines: {node: '>=14.0.0'}
cpu: [wasm32]
'@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-8Cx+ucbd8n2dIr21FqBh6rUvTVL0uTgEtKR7l+MUZ5BgY4dFh1e4mPVX8oqmoYwOxBiXrsD2JIOCz4AyKLKxWA==}
engines: {node: '>=14.21.3'}
'@rolldown/binding-wasm32-wasi@1.0.0-beta.45':
resolution: {integrity: sha512-ZJDB7lkuZE9XUnWQSYrBObZxczut+8FZ5pdanm8nNS1DAo8zsrPuvGwn+U3fwU98WaiFsNrA4XHngesCGr8tEQ==}
engines: {node: '>=14.0.0'}
cpu: [wasm32]
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.42':
@ -6791,8 +6798,9 @@ packages:
cpu: [arm64]
os: [win32]
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-Vhq5vikrVDxAa75fxsyqj0c0Y/uti/TwshXI71Xb8IeUQJOBnmLUsn5dgYf5ljpYYkNa0z9BPAvUDIDMmyDi+w==}
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.45':
resolution: {integrity: sha512-zyzAjItHPUmxg6Z8SyRhLdXlJn3/D9KL5b9mObUrBHhWS/GwRH4665xCiFqeuktAhhWutqfc+rOV2LjK4VYQGQ==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [win32]
@ -6802,8 +6810,9 @@ packages:
cpu: [ia32]
os: [win32]
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-lN7RIg9Iugn08zP2aZN9y/MIdG8iOOCE93M1UrFlrxMTqPf8X+fDzmR/OKhTSd1A2pYNipZHjyTcb5H8kyQSow==}
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.45':
resolution: {integrity: sha512-wODcGzlfxqS6D7BR0srkJk3drPwXYLu7jPHN27ce2c4PUnVVmJnp9mJzUQGT4LpmHmmVdMZ+P6hKvyTGBzc1CA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [ia32]
os: [win32]
@ -6813,16 +6822,17 @@ packages:
cpu: [x64]
os: [win32]
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-7/7cLIn48Y+EpQ4CePvf8reFl63F15yPUlg4ZAhl+RXJIfydkdak1WD8Ir3AwAO+bJBXzrfNL+XQbxm0mcQZmw==}
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.45':
resolution: {integrity: sha512-wiU40G1nQo9rtfvF9jLbl79lUgjfaD/LTyUEw2Wg/gdF5OhjzpKMVugZQngO+RNdwYaNj+Fs+kWBWfp4VXPMHA==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [win32]
'@rolldown/pluginutils@1.0.0-beta.42':
resolution: {integrity: sha512-N7pQzk9CyE7q0bBN/q0J8s6Db279r5kUZc6d7/wWRe9/zXqC52HQovVyu6iXPIDY4BEzzgbVLhVFXrOuGJ22ZQ==}
'@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5':
resolution: {integrity: sha512-8sExkWRK+zVybw3+2/kBkYBFeLnEUWz1fT7BLHplpzmtqkOfTbAQ9gkt4pzwGIIZmg4Qn5US5ACjUBenrhezwQ==}
'@rolldown/pluginutils@1.0.0-beta.45':
resolution: {integrity: sha512-Le9ulGCrD8ggInzWw/k2J8QcbPz7eGIOWqfJ2L+1R0Opm7n6J37s2hiDWlh6LJN0Lk9L5sUzMvRHKW7UxBZsQA==}
'@rollup/plugin-inject@5.0.5':
resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
@ -15541,8 +15551,9 @@ packages:
engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true
rolldown@1.0.0-beta.9-commit.d91dfb5:
resolution: {integrity: sha512-FHkj6gGEiEgmAXQchglofvUUdwj2Oiw603Rs+zgFAnn9Cb7T7z3fiaEc0DbN3ja4wYkW6sF2rzMEtC1V4BGx/g==}
rolldown@1.0.0-beta.45:
resolution: {integrity: sha512-iMmuD72XXLf26Tqrv1cryNYLX6NNPLhZ3AmNkSf8+xda0H+yijjGJ+wVT9UdBUHOpKzq9RjKtQKRCWoEKQQBZQ==}
engines: {node: ^20.19.0 || >=22.12.0}
hasBin: true
rollup@4.49.0:
@ -21908,14 +21919,12 @@ snapshots:
'@otplib/plugin-crypto': 12.0.1
'@otplib/plugin-thirty-two': 12.0.1
'@oxc-project/runtime@0.71.0': {}
'@oxc-project/runtime@0.92.0': {}
'@oxc-project/types@0.71.0': {}
'@oxc-project/types@0.94.0': {}
'@oxc-project/types@0.95.0': {}
'@paralleldrive/cuid2@2.2.2':
dependencies:
'@noble/hashes': 1.8.0
@ -22127,88 +22136,94 @@ snapshots:
'@rolldown/binding-android-arm64@1.0.0-beta.42':
optional: true
'@rolldown/binding-android-arm64@1.0.0-beta.45':
optional: true
'@rolldown/binding-darwin-arm64@1.0.0-beta.42':
optional: true
'@rolldown/binding-darwin-arm64@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-darwin-arm64@1.0.0-beta.45':
optional: true
'@rolldown/binding-darwin-x64@1.0.0-beta.42':
optional: true
'@rolldown/binding-darwin-x64@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-darwin-x64@1.0.0-beta.45':
optional: true
'@rolldown/binding-freebsd-x64@1.0.0-beta.42':
optional: true
'@rolldown/binding-freebsd-x64@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-freebsd-x64@1.0.0-beta.45':
optional: true
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.42':
optional: true
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.45':
optional: true
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.42':
optional: true
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.45':
optional: true
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.42':
optional: true
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.45':
optional: true
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.42':
optional: true
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.45':
optional: true
'@rolldown/binding-linux-x64-musl@1.0.0-beta.42':
optional: true
'@rolldown/binding-linux-x64-musl@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-linux-x64-musl@1.0.0-beta.45':
optional: true
'@rolldown/binding-openharmony-arm64@1.0.0-beta.42':
optional: true
'@rolldown/binding-openharmony-arm64@1.0.0-beta.45':
optional: true
'@rolldown/binding-wasm32-wasi@1.0.0-beta.42':
dependencies:
'@napi-rs/wasm-runtime': 1.0.7
optional: true
'@rolldown/binding-wasm32-wasi@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-wasm32-wasi@1.0.0-beta.45':
dependencies:
'@napi-rs/wasm-runtime': 0.2.11
'@napi-rs/wasm-runtime': 1.0.7
optional: true
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.42':
optional: true
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.45':
optional: true
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.42':
optional: true
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.45':
optional: true
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.42':
optional: true
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.9-commit.d91dfb5':
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.45':
optional: true
'@rolldown/pluginutils@1.0.0-beta.42': {}
'@rolldown/pluginutils@1.0.0-beta.9-commit.d91dfb5': {}
'@rolldown/pluginutils@1.0.0-beta.45': {}
'@rollup/plugin-inject@5.0.5(rollup@4.52.4)':
dependencies:
@ -22356,7 +22371,7 @@ snapshots:
'@rudderstack/rudder-sdk-node@2.1.4(tslib@2.8.1)':
dependencies:
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
axios-retry: 4.5.0(axios@1.12.0)
component-type: 2.0.0
join-component: 1.1.0
@ -24940,7 +24955,7 @@ snapshots:
axios-retry@4.5.0(axios@1.12.0):
dependencies:
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
is-retry-allowed: 2.2.0
axios@1.12.0(debug@4.3.6):
@ -25342,7 +25357,7 @@ snapshots:
bundlemon@3.1.0(typescript@5.9.2):
dependencies:
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
axios-retry: 4.5.0(axios@1.12.0)
brotli-size: 4.0.0
bundlemon-utils: 2.0.1
@ -28544,7 +28559,7 @@ snapshots:
infisical-node@1.3.0:
dependencies:
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
dotenv: 16.3.1
tweetnacl: 1.0.3
tweetnacl-util: 0.15.1
@ -29945,7 +29960,7 @@ snapshots:
'@langchain/groq': 0.2.3(@langchain/core@0.3.68(@opentelemetry/api@1.9.0)(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(openai@5.12.2(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))(zod@3.25.67)))(encoding@0.1.13)
'@langchain/mistralai': 0.2.3(@langchain/core@0.3.68(@opentelemetry/api@1.9.0)(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(openai@5.12.2(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))(zod@3.25.67)))
'@langchain/ollama': 0.2.3(@langchain/core@0.3.68(@opentelemetry/api@1.9.0)(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(openai@5.12.2(ws@8.18.3(bufferutil@4.0.9)(utf-8-validate@5.0.10))(zod@3.25.67)))
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
cheerio: 1.0.0
handlebars: 4.7.8
transitivePeerDependencies:
@ -32089,7 +32104,7 @@ snapshots:
posthog-node@3.2.1:
dependencies:
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
rusha: 0.8.14
transitivePeerDependencies:
- debug
@ -32796,7 +32811,7 @@ snapshots:
retry-axios@2.6.0(axios@1.12.0):
dependencies:
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
retry-request@7.0.2(encoding@0.1.13):
dependencies:
@ -32857,7 +32872,7 @@ snapshots:
rndm@1.2.0: {}
rolldown-plugin-dts@0.16.11(rolldown@1.0.0-beta.9-commit.d91dfb5)(typescript@5.9.2)(vue-tsc@2.2.8(patch_hash=e2aee939ccac8a57fe449bfd92bedd8117841579526217bc39aca26c6b8c317f)(typescript@5.9.2)):
rolldown-plugin-dts@0.16.11(rolldown@1.0.0-beta.45)(typescript@5.9.2)(vue-tsc@2.2.8(patch_hash=e2aee939ccac8a57fe449bfd92bedd8117841579526217bc39aca26c6b8c317f)(typescript@5.9.2)):
dependencies:
'@babel/generator': 7.28.3
'@babel/parser': 7.28.4
@ -32868,7 +32883,7 @@ snapshots:
dts-resolver: 2.1.2
get-tsconfig: 4.10.1
magic-string: 0.30.19
rolldown: 1.0.0-beta.9-commit.d91dfb5
rolldown: 1.0.0-beta.45
optionalDependencies:
typescript: 5.9.2
vue-tsc: 2.2.8(patch_hash=e2aee939ccac8a57fe449bfd92bedd8117841579526217bc39aca26c6b8c317f)(typescript@5.9.2)
@ -32915,25 +32930,25 @@ snapshots:
'@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.42
'@rolldown/binding-win32-x64-msvc': 1.0.0-beta.42
rolldown@1.0.0-beta.9-commit.d91dfb5:
rolldown@1.0.0-beta.45:
dependencies:
'@oxc-project/runtime': 0.71.0
'@oxc-project/types': 0.71.0
'@rolldown/pluginutils': 1.0.0-beta.9-commit.d91dfb5
ansis: 4.2.0
'@oxc-project/types': 0.95.0
'@rolldown/pluginutils': 1.0.0-beta.45
optionalDependencies:
'@rolldown/binding-darwin-arm64': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-darwin-x64': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-freebsd-x64': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-linux-arm64-musl': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-linux-x64-gnu': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-linux-x64-musl': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-wasm32-wasi': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-win32-x64-msvc': 1.0.0-beta.9-commit.d91dfb5
'@rolldown/binding-android-arm64': 1.0.0-beta.45
'@rolldown/binding-darwin-arm64': 1.0.0-beta.45
'@rolldown/binding-darwin-x64': 1.0.0-beta.45
'@rolldown/binding-freebsd-x64': 1.0.0-beta.45
'@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.45
'@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.45
'@rolldown/binding-linux-arm64-musl': 1.0.0-beta.45
'@rolldown/binding-linux-x64-gnu': 1.0.0-beta.45
'@rolldown/binding-linux-x64-musl': 1.0.0-beta.45
'@rolldown/binding-openharmony-arm64': 1.0.0-beta.45
'@rolldown/binding-wasm32-wasi': 1.0.0-beta.45
'@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.45
'@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.45
'@rolldown/binding-win32-x64-msvc': 1.0.0-beta.45
rollup@4.49.0:
dependencies:
@ -33403,7 +33418,7 @@ snapshots:
asn1.js: 5.4.1
asn1.js-rfc2560: 5.0.1(asn1.js@5.4.1)
asn1.js-rfc5280: 3.0.0
axios: 1.12.0(debug@4.4.3)
axios: 1.12.0(debug@4.4.1)
big-integer: 1.6.52
bignumber.js: 9.1.2
binascii: 0.0.2
@ -34457,8 +34472,8 @@ snapshots:
diff: 8.0.2
empathic: 2.0.0
hookable: 5.5.3
rolldown: 1.0.0-beta.9-commit.d91dfb5
rolldown-plugin-dts: 0.16.11(rolldown@1.0.0-beta.9-commit.d91dfb5)(typescript@5.9.2)(vue-tsc@2.2.8(patch_hash=e2aee939ccac8a57fe449bfd92bedd8117841579526217bc39aca26c6b8c317f)(typescript@5.9.2))
rolldown: 1.0.0-beta.45
rolldown-plugin-dts: 0.16.11(rolldown@1.0.0-beta.45)(typescript@5.9.2)(vue-tsc@2.2.8(patch_hash=e2aee939ccac8a57fe449bfd92bedd8117841579526217bc39aca26c6b8c317f)(typescript@5.9.2))
semver: 7.7.2
tinyexec: 1.0.1
tinyglobby: 0.2.15

460
scripts/replace-css-tokens.sh
View file

@ -4,7 +4,7 @@
# Run from anywhere - uses absolute paths
# Absolute path to frontend directory
FRONTEND_DIR="./packages/frontend"
FRONTEND_DIR="./packages/frontend/editor-ui"
# Find all files in frontend folder except _tokens.scss (which is already updated)
echo "Finding files to process..."
@ -19,175 +19,329 @@ echo ""
echo "Starting token replacements..."
echo ""
# Primary color tokens (including HSL components) - process first as most specific
echo "[1] Replacing primary color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-primary-shade-1/--color--primary--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-primary-tint-3/--color--primary--tint-3/g'
echo "$files" | xargs perl -pi -e 's/--color-primary-tint-2/--color--primary--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-primary-tint-1/--color--primary--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color--primary-h/--color--primary--h/g'
echo "$files" | xargs perl -pi -e 's/--color--primary-s/--color--primary--s/g'
echo "$files" | xargs perl -pi -e 's/--color--primary-l/--color--primary--l/g'
echo "$files" | xargs perl -pi -e 's/--color-primary-h/--color--primary--h/g'
echo "$files" | xargs perl -pi -e 's/--color-primary-s/--color--primary--s/g'
echo "$files" | xargs perl -pi -e 's/--color-primary-l/--color--primary--l/g'
echo "$files" | xargs perl -pi -e 's/--color-primary(?!-)/--color--primary/g'
echo "✓ Primary color tokens replaced"
# # Primary color tokens (including HSL components) - process first as most specific
# echo "[1] Replacing primary color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-primary-shade-1/--color--primary--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary-tint-3/--color--primary--tint-3/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary-tint-2/--color--primary--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary-tint-1/--color--primary--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color--primary-h/--color--primary--h/g'
# echo "$files" | xargs perl -pi -e 's/--color--primary-s/--color--primary--s/g'
# echo "$files" | xargs perl -pi -e 's/--color--primary-l/--color--primary--l/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary-h/--color--primary--h/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary-s/--color--primary--s/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary-l/--color--primary--l/g'
# echo "$files" | xargs perl -pi -e 's/--color-primary(?!-)/--color--primary/g'
# echo "✓ Primary color tokens replaced"
# echo ""
# # Secondary color tokens
# echo "[2] Replacing secondary color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-secondary-shade-1/--color--secondary--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-secondary-tint-3/--color--secondary--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-secondary-tint-1/--color--secondary--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-secondary(?!-)/--color--secondary/g'
# echo "✓ Secondary color tokens replaced"
# echo ""
# # Success color tokens
# echo "[3] Replacing success color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-success-shade-1/--color--success--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-success-light-2/--color--success--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-success-light/--color--success--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-success-tint-2/--color--success--tint-4/g'
# echo "$files" | xargs perl -pi -e 's/--color-success-tint-1/--color--success--tint-3/g'
# echo "$files" | xargs perl -pi -e 's/--color-success(?!-)/--color--success/g'
# echo "✓ Success color tokens replaced"
# echo ""
# # Warning color tokens
# echo "[4] Replacing warning color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-warning-shade-1/--color--warning--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-warning-tint-2/--color--warning--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-warning-tint-1/--color--warning--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-warning(?!-)/--color--warning/g'
# echo "✓ Warning color tokens replaced"
# echo ""
# # Danger color tokens
# echo "[5] Replacing danger color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-danger-shade-1/--color--danger--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-danger-light-2/--color--danger--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-danger-light/--color--danger--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-danger-tint-2/--color--danger--tint-4/g'
# echo "$files" | xargs perl -pi -e 's/--color-danger-tint-1/--color--danger--tint-3/g'
# echo "$files" | xargs perl -pi -e 's/--color-danger(?!-)/--color--danger/g'
# echo "✓ Danger color tokens replaced"
# echo ""
# # Text color tokens
# echo "[6] Replacing text color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-text-lighter/--color--text--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-text-xlight/--color--text--tint-3/g'
# echo "$files" | xargs perl -pi -e 's/--color-text-danger/--color--text--danger/g'
# echo "$files" | xargs perl -pi -e 's/--color-text-light/--color--text--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-text-base/--color--text/g'
# echo "$files" | xargs perl -pi -e 's/--color-text-dark/--color--text--shade-1/g'
# echo "✓ Text color tokens replaced"
# echo ""
# # Foreground color tokens
# echo "[7] Replacing foreground color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-foreground-light/--color--foreground--tint-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-foreground-xlight/--color--foreground--tint-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-foreground-dark/--color--foreground--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-foreground-xdark/--color--foreground--shade-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-foreground-base/--color--foreground/g'
# echo "✓ Foreground color tokens replaced"
# echo ""
# # Background color tokens
# echo "[8] Replacing background color tokens..."
# echo "$files" | xargs perl -pi -e 's/--color-background-medium/--color--background--shade-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-background-dark/--color--background--shade-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-background-xlight/--color--background--light-3/g'
# echo "$files" | xargs perl -pi -e 's/--color-background-light-base/--color--background--light-1/g'
# echo "$files" | xargs perl -pi -e 's/--color-background-light/--color--background--light-2/g'
# echo "$files" | xargs perl -pi -e 's/--color-background-base/--color--background/g'
# echo "✓ Background color tokens replaced"
# echo ""
# # Box shadow tokens
# echo "[9] Replacing box shadow tokens..."
# echo "$files" | xargs perl -pi -e 's/--box-shadow-light/--shadow--light/g'
# echo "$files" | xargs perl -pi -e 's/--box-shadow-dark/--shadow--dark/g'
# echo "$files" | xargs perl -pi -e 's/--box-shadow-base/--shadow/g'
# echo "✓ Box shadow tokens replaced"
# echo ""
# # Border radius tokens
# echo "[10] Replacing border radius tokens..."
# echo "$files" | xargs perl -pi -e 's/--border-radius-xlarge/--radius--xl/g'
# echo "$files" | xargs perl -pi -e 's/--border-radius-large/--radius--lg/g'
# echo "$files" | xargs perl -pi -e 's/--border-radius-small/--radius--sm/g'
# echo "$files" | xargs perl -pi -e 's/--border-radius-base/--radius/g'
# echo "✓ Border radius tokens replaced"
# echo ""
# # Border tokens (remove -base suffix)
# echo "[11] Replacing border tokens..."
# echo "$files" | xargs perl -pi -e 's/--border-style-base/--border-style/g'
# echo "$files" | xargs perl -pi -e 's/--border-width-base/--border-width/g'
# echo "$files" | xargs perl -pi -e 's/--border-color-light/--border-color--light/g'
# echo "$files" | xargs perl -pi -e 's/--border-color-base/--border-color/g'
# echo "$files" | xargs perl -pi -e 's/--border-base(?!-)/--border/g'
# echo "✓ Border tokens replaced"
# echo ""
# # Font line height tokens
# echo "[12] Replacing font line height tokens..."
# echo "$files" | xargs perl -pi -e 's/--font-line-height-xsmall/--line-height--xs/g'
# echo "$files" | xargs perl -pi -e 's/--font-line-height-compact/--line-height--sm/g'
# echo "$files" | xargs perl -pi -e 's/--font-line-height-regular/--line-height--md/g'
# echo "$files" | xargs perl -pi -e 's/--font-line-height-loose/--line-height--lg/g'
# echo "$files" | xargs perl -pi -e 's/--font-line-height-xloose/--line-height--xl/g'
# echo "✓ Font line height tokens replaced"
# echo ""
# # Spacing tokens
# echo "[13] Replacing spacing tokens..."
# echo "$files" | xargs perl -pi -e 's/--spacing-5xl/--spacing--5xl/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-4xl/--spacing--4xl/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-3xl/--spacing--3xl/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-2xl/--spacing--2xl/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-xl/--spacing--xl/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-l(?!-)/--spacing--lg/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-m(?!-)/--spacing--md/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-s(?!-)/--spacing--sm/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-xs/--spacing--xs/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-2xs/--spacing--2xs/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-3xs/--spacing--3xs/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-4xs/--spacing--4xs/g'
# echo "$files" | xargs perl -pi -e 's/--spacing-5xs/--spacing--5xs/g'
# echo "✓ Spacing tokens replaced"
# echo ""
# # Font family tokens
# echo "[14] Replacing font family tokens..."
# echo "$files" | xargs perl -pi -e 's/--font-family-monospace/--font-family--monospace/g'
# echo "✓ Font family tokens replaced"
# echo ""
# # Font weight tokens
# echo "[15] Replacing font weight tokens..."
# echo "$files" | xargs perl -pi -e 's/--font-weight-bold/--font-weight--bold/g'
# echo "$files" | xargs perl -pi -e 's/--font-weight-medium/--font-weight--medium/g'
# echo "$files" | xargs perl -pi -e 's/--font-weight-regular/--font-weight--regular/g'
# echo "✓ Font weight tokens replaced"
# echo ""
# # Font size tokens
# echo "[16] Replacing font size tokens..."
# echo "$files" | xargs perl -pi -e 's/--font-size-4xs/--font-size--4xs/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-3xs/--font-size--3xs/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-2xs/--font-size--2xs/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-2xl/--font-size--2xl/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-xl/--font-size--xl/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-xs/--font-size--xs/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-l/--font-size--lg/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-m/--font-size--md/g'
# echo "$files" | xargs perl -pi -e 's/--font-size-s/--font-size--sm/g'
# echo "✓ Font size tokens replaced"
# echo ""
# NOTE: Commenting out - these were already run in previous iterations
# # Z-index tokens
# echo "[New] Replacing z-index tokens..."
# echo "$files" | xargs perl -pi -e 's/--z-index-top-banners/--top-banners--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-app-header/--app-header--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-app-sidebar/--app-sidebar--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-workflow-preview-ndv/--workflow-preview--ndv--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-canvas-add-button/--canvas-add-button--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-codemirror-tooltip/--codemirror-tooltip--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-ask-assistant-chat/--ask-assistant--chat--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-ask-assistant-floating-button/--ask-assistant--floating-button--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-ndv/--ndv--z/g'
# echo "$files" | xargs perl -pi -e 's/--z-index-node-creator/--node-creator--z/g'
# echo "✓ Z-index tokens replaced"
# echo ""
# Height tokens
echo "[New] Replacing height tokens..."
echo "$files" | xargs perl -pi -e 's/--header-height/--header--height/g'
echo "$files" | xargs perl -pi -e 's/--banner-height/--banner--height/g'
echo "$files" | xargs perl -pi -e 's/--dialog-height/--dialog--height/g'
echo "$files" | xargs perl -pi -e 's/--dialog-min-height/--dialog--min-height/g'
echo "$files" | xargs perl -pi -e 's/--dialog-max-height/--dialog--max-height/g'
echo "$files" | xargs perl -pi -e 's/--content-height/--content--height/g'
echo "$files" | xargs perl -pi -e 's/--draggable-height/--draggable--height/g'
echo "$files" | xargs perl -pi -e 's/--expanded-max-height/--embedded-ndv--max-height--expanded/g'
echo "$files" | xargs perl -pi -e 's/--metrics-chart-height/--metrics-chart--height/g'
echo "$files" | xargs perl -pi -e 's/--parameter-input-options-height/--parameter-input-options--height/g'
echo "$files" | xargs perl -pi -e 's/--logs-panel-height/--logs-panel--height/g'
echo "$files" | xargs perl -pi -e 's/--google-auth-btn-height/--google-auth-btn--height/g'
echo "$files" | xargs perl -pi -e 's/--max-height-on-focus/--input--max-height--focus/g'
echo "✓ Height tokens replaced"
echo ""
# Secondary color tokens
echo "[2] Replacing secondary color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-secondary-shade-1/--color--secondary--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-secondary-tint-3/--color--secondary--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-secondary-tint-1/--color--secondary--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color-secondary(?!-)/--color--secondary/g'
echo "✓ Secondary color tokens replaced"
# Width tokens
echo "[New] Replacing width tokens..."
echo "$files" | xargs perl -pi -e 's/--content-container-width/--content-container--width/g'
echo "$files" | xargs perl -pi -e 's/--dialog-max-width/--dialog--max-width/g'
echo "$files" | xargs perl -pi -e 's/--dialog-min-width/--dialog--min-width/g'
echo "$files" | xargs perl -pi -e 's/--node-creator-width/--node-creator--width/g'
echo "$files" | xargs perl -pi -e 's/--delete-option-width/--delete-option--width/g'
echo "$files" | xargs perl -pi -e 's/--input-issues-width/--resource-locator--input-issues--width/g'
echo "$files" | xargs perl -pi -e 's/--input-override-width/--resource-locator--input-override--width/g'
echo "$files" | xargs perl -pi -e 's/--input-width/--output-item-select--width/g'
echo "$files" | xargs perl -pi -e 's/--max-select-width/--node-input--select--max-width/g'
echo "$files" | xargs perl -pi -e 's/--project-field-width/--project-field--width/g'
echo "$files" | xargs perl -pi -e 's/--canvas-node-border-width/--canvas-node--border-width/g'
echo "✓ Width tokens replaced"
echo ""
# Success color tokens
echo "[3] Replacing success color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-success-shade-1/--color--success--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-success-light-2/--color--success--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-success-light/--color--success--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color-success-tint-2/--color--success--tint-4/g'
echo "$files" | xargs perl -pi -e 's/--color-success-tint-1/--color--success--tint-3/g'
echo "$files" | xargs perl -pi -e 's/--color-success(?!-)/--color--success/g'
echo "✓ Success color tokens replaced"
# Background tokens (color--background)
echo "[New] Replacing background tokens..."
echo "$files" | xargs perl -pi -e 's/--menu-background/--menu--color--background/g'
echo "$files" | xargs perl -pi -e 's/--execution-list-item-background/--execution-list-item--color--background/g'
echo "$files" | xargs perl -pi -e 's/--execution-list-item-highlight-background/--execution-list-item--color--background--highlight/g'
echo "$files" | xargs perl -pi -e 's/--grid-cell-active-background/--grid-cell--color--background--active/g'
echo "$files" | xargs perl -pi -e 's/--trigger-icon-background-color/--trigger-icon--color--background/g'
echo "$files" | xargs perl -pi -e 's/--google-auth-btn-normal/--google-auth-btn--color--background--normal/g'
echo "$files" | xargs perl -pi -e 's/--google-auth-btn-focus/--google-auth-btn--color--background--focus/g'
echo "$files" | xargs perl -pi -e 's/--google-auth-btn-pressed/--google-auth-btn--color--background--pressed/g'
echo "$files" | xargs perl -pi -e 's/--google-auth-btn-disabled/--google-auth-btn--color--background--disabled/g'
echo "✓ Background tokens replaced"
echo ""
# Warning color tokens
echo "[4] Replacing warning color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-warning-shade-1/--color--warning--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-warning-tint-2/--color--warning--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-warning-tint-1/--color--warning--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color-warning(?!-)/--color--warning/g'
echo "✓ Warning color tokens replaced"
# Color tokens
echo "[New] Replacing color tokens..."
echo "$files" | xargs perl -pi -e 's/--canvas-node-icon-color/--canvas-node--icon-color/g'
echo "$files" | xargs perl -pi -e 's/--canvas-edge-color/--canvas-edge--color/g'
echo "$files" | xargs perl -pi -e 's/--edge-highlight-color/--edge--color--highlight/g'
echo "$files" | xargs perl -pi -e 's/--icon-base-color/--icon--color/g'
echo "$files" | xargs perl -pi -e 's/--button-color/--button--color/g'
echo "$files" | xargs perl -pi -e 's/--button-border-color/--button--border-color/g'
echo "$files" | xargs perl -pi -e 's/--trigger-icon-border-color/--trigger-icon--border-color/g'
echo "$files" | xargs perl -pi -e 's/--color-canvas-node-error-border-color/--canvas-node--border-color--error/g'
echo "$files" | xargs perl -pi -e 's/--color-button-secondary-hover-active-focus-background/--button--color--background--secondary--hover/g'
echo "$files" | xargs perl -pi -e 's/--el-color-primary/--color--primary/g'
echo "✓ Color tokens replaced"
echo ""
# Danger color tokens
echo "[5] Replacing danger color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-danger-shade-1/--color--danger--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-danger-light-2/--color--danger--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-danger-light/--color--danger--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color-danger-tint-2/--color--danger--tint-4/g'
echo "$files" | xargs perl -pi -e 's/--color-danger-tint-1/--color--danger--tint-3/g'
echo "$files" | xargs perl -pi -e 's/--color-danger(?!-)/--color--danger/g'
echo "✓ Danger color tokens replaced"
echo ""
# Text color tokens
echo "[6] Replacing text color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-text-lighter/--color--text--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-text-xlight/--color--text--tint-3/g'
echo "$files" | xargs perl -pi -e 's/--color-text-danger/--color--text--danger/g'
echo "$files" | xargs perl -pi -e 's/--color-text-light/--color--text--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color-text-base/--color--text/g'
echo "$files" | xargs perl -pi -e 's/--color-text-dark/--color--text--shade-1/g'
echo "✓ Text color tokens replaced"
echo ""
# Foreground color tokens
echo "[7] Replacing foreground color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-foreground-light/--color--foreground--tint-1/g'
echo "$files" | xargs perl -pi -e 's/--color-foreground-xlight/--color--foreground--tint-2/g'
echo "$files" | xargs perl -pi -e 's/--color-foreground-dark/--color--foreground--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-foreground-xdark/--color--foreground--shade-2/g'
echo "$files" | xargs perl -pi -e 's/--color-foreground-base/--color--foreground/g'
echo "✓ Foreground color tokens replaced"
echo ""
# Background color tokens
echo "[8] Replacing background color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-background-medium/--color--background--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-background-dark/--color--background--shade-2/g'
echo "$files" | xargs perl -pi -e 's/--color-background-xlight/--color--background--light-3/g'
echo "$files" | xargs perl -pi -e 's/--color-background-light-base/--color--background--light-1/g'
echo "$files" | xargs perl -pi -e 's/--color-background-light/--color--background--light-2/g'
echo "$files" | xargs perl -pi -e 's/--color-background-base/--color--background/g'
echo "✓ Background color tokens replaced"
echo ""
# Box shadow tokens
echo "[9] Replacing box shadow tokens..."
echo "$files" | xargs perl -pi -e 's/--box-shadow-light/--shadow--light/g'
echo "$files" | xargs perl -pi -e 's/--box-shadow-dark/--shadow--dark/g'
echo "$files" | xargs perl -pi -e 's/--box-shadow-base/--shadow/g'
echo "✓ Box shadow tokens replaced"
echo ""
# Border radius tokens
echo "[10] Replacing border radius tokens..."
echo "$files" | xargs perl -pi -e 's/--border-radius-xlarge/--radius--xl/g'
echo "$files" | xargs perl -pi -e 's/--border-radius-large/--radius--lg/g'
echo "$files" | xargs perl -pi -e 's/--border-radius-small/--radius--sm/g'
echo "$files" | xargs perl -pi -e 's/--border-radius-base/--radius/g'
echo "✓ Border radius tokens replaced"
echo ""
# Border tokens (remove -base suffix)
echo "[11] Replacing border tokens..."
echo "$files" | xargs perl -pi -e 's/--border-style-base/--border-style/g'
echo "$files" | xargs perl -pi -e 's/--border-width-base/--border-width/g'
echo "$files" | xargs perl -pi -e 's/--border-color-light/--border-color--light/g'
echo "$files" | xargs perl -pi -e 's/--border-color-base/--border-color/g'
echo "$files" | xargs perl -pi -e 's/--border-base(?!-)/--border/g'
# Border tokens - using radius for border-radius, border for border style
echo "[New] Replacing border tokens..."
echo "$files" | xargs perl -pi -e 's/--schema-preview-dashed-border-dark/--schema-preview--border--dashed--dark/g'
echo "$files" | xargs perl -pi -e 's/--schema-preview-dashed-border/--schema-preview--border--dashed/g'
echo "$files" | xargs perl -pi -e 's/--input-border-bottom-right-radius/--input-triple--radius--bottom-right/g'
echo "$files" | xargs perl -pi -e 's/--input-border-top-right-radius/--input-triple--radius--top-right/g'
echo "✓ Border tokens replaced"
echo ""
# Font line height tokens
echo "[12] Replacing font line height tokens..."
echo "$files" | xargs perl -pi -e 's/--font-line-height-xsmall/--line-height--xs/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-compact/--line-height--sm/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-regular/--line-height--md/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-loose/--line-height--lg/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-xloose/--line-height--xl/g'
echo "✓ Font line height tokens replaced"
echo ""
# Spacing tokens
echo "[13] Replacing spacing tokens..."
echo "$files" | xargs perl -pi -e 's/--spacing-5xl/--spacing--5xl/g'
echo "$files" | xargs perl -pi -e 's/--spacing-4xl/--spacing--4xl/g'
echo "$files" | xargs perl -pi -e 's/--spacing-3xl/--spacing--3xl/g'
echo "$files" | xargs perl -pi -e 's/--spacing-2xl/--spacing--2xl/g'
echo "$files" | xargs perl -pi -e 's/--spacing-xl/--spacing--xl/g'
echo "$files" | xargs perl -pi -e 's/--spacing-l(?!-)/--spacing--lg/g'
echo "$files" | xargs perl -pi -e 's/--spacing-m(?!-)/--spacing--md/g'
echo "$files" | xargs perl -pi -e 's/--spacing-s(?!-)/--spacing--sm/g'
echo "$files" | xargs perl -pi -e 's/--spacing-xs/--spacing--xs/g'
echo "$files" | xargs perl -pi -e 's/--spacing-2xs/--spacing--2xs/g'
echo "$files" | xargs perl -pi -e 's/--spacing-3xs/--spacing--3xs/g'
echo "$files" | xargs perl -pi -e 's/--spacing-4xs/--spacing--4xs/g'
echo "$files" | xargs perl -pi -e 's/--spacing-5xs/--spacing--5xs/g'
echo "✓ Spacing tokens replaced"
echo ""
# Font family tokens
echo "[14] Replacing font family tokens..."
echo "$files" | xargs perl -pi -e 's/--font-family-monospace/--font-family--monospace/g'
echo "✓ Font family tokens replaced"
# Spacing and margin tokens (using margin-left, margin-top, etc)
echo "[New] Replacing spacing/margin tokens..."
echo "$files" | xargs perl -pi -e 's/--spacing-1xl/--spacing--xl/g'
echo "$files" | xargs perl -pi -e 's/--toast-bottom-offset/--toast--margin-bottom/g'
echo "$files" | xargs perl -pi -e 's/--ask-assistant-floating-button-bottom-offset/--ask-assistant--floating-button--margin-bottom/g'
echo "$files" | xargs perl -pi -e 's/--trigger-placeholder-top-position/--trigger-placeholder--margin-top/g'
echo "$files" | xargs perl -pi -e 's/--trigger-placeholder-left-position/--trigger-placeholder--margin-left/g'
echo "$files" | xargs perl -pi -e 's/--search-margin/--search--margin/g'
echo "$files" | xargs perl -pi -e 's/--ndv-spacing/--ndv--spacing/g'
echo "$files" | xargs perl -pi -e 's/--collapsed-offset/--collapsed--spacing/g'
echo "✓ Spacing/margin tokens replaced"
echo ""
# Font weight tokens
echo "[15] Replacing font weight tokens..."
echo "$files" | xargs perl -pi -e 's/--font-weight-bold/--font-weight--bold/g'
echo "$files" | xargs perl -pi -e 's/--font-weight-medium/--font-weight--medium/g'
echo "$files" | xargs perl -pi -e 's/--font-weight-regular/--font-weight--regular/g'
echo "[New] Replacing font weight tokens..."
echo "$files" | xargs perl -pi -e 's/--font-weight-normal/--font-weight--regular/g'
echo "✓ Font weight tokens replaced"
echo ""
# Font size tokens
echo "[16] Replacing font size tokens..."
echo "$files" | xargs perl -pi -e 's/--font-size-4xs/--font-size--4xs/g'
echo "$files" | xargs perl -pi -e 's/--font-size-3xs/--font-size--3xs/g'
echo "$files" | xargs perl -pi -e 's/--font-size-2xs/--font-size--2xs/g'
echo "$files" | xargs perl -pi -e 's/--font-size-2xl/--font-size--2xl/g'
echo "$files" | xargs perl -pi -e 's/--font-size-xl/--font-size--xl/g'
echo "$files" | xargs perl -pi -e 's/--font-size-xs/--font-size--xs/g'
echo "$files" | xargs perl -pi -e 's/--font-size-l/--font-size--lg/g'
echo "$files" | xargs perl -pi -e 's/--font-size-m/--font-size--md/g'
echo "$files" | xargs perl -pi -e 's/--font-size-s/--font-size--sm/g'
echo "✓ Font size tokens replaced"
# Animation/duration tokens
echo "[New] Replacing animation/duration tokens..."
echo "$files" | xargs perl -pi -e 's/--animation-duration/--ndv--sub-connections--duration/g'
echo "✓ Animation/duration tokens replaced"
echo ""
# Size tokens
echo "[New] Replacing size tokens..."
echo "$files" | xargs perl -pi -e 's/--node-size/--node--size/g'
echo "$files" | xargs perl -pi -e 's/--plus-button-size/--plus-button--size/g'
echo "✓ Size tokens replaced"
echo ""
# === New batch of tokens to fix remaining errors (excluding --chat namespace and unsupported properties) ===
# Fix simple text color tokens
echo "[Batch 2] Replacing remaining simple tokens..."
echo "$files" | xargs perl -pi -e 's/--color-text-base/--color--text/g'
echo "$files" | xargs perl -pi -e 's/--color-text(?!-)/--color--text/g'
echo "$files" | xargs perl -pi -e 's/--border-base(?!-)/--border/g'
echo "$files" | xargs perl -pi -e 's/--color-foreground-light/--color--foreground--tint-1/g'
echo "✓ Simple tokens replaced"
echo ""
# Fix incorrect conversions that need property adjustments (excluding chat)
echo "[Batch 2] Fixing property vocabulary issues..."
echo "$files" | xargs perl -pi -e 's/--canvas-node--background/--canvas-node--color--background/g'
echo "$files" | xargs perl -pi -e 's/--canvas-node--status-icons-offset/--canvas-node--status-icons--margin/g'
echo "$files" | xargs perl -pi -e 's/--trigger-node--border-radius/--trigger-node--radius/g'
echo "✓ Property vocabulary issues fixed"
echo ""
# GitHub-style diff viewer variables (third-party lib conventions)
echo "[Batch 2] Replacing third-party lib variables..."
echo "$files" | xargs perl -pi -e 's/--fgColor-default/--diff--color--foreground/g'
echo "$files" | xargs perl -pi -e 's/--bgColor-default/--diff--color--background/g'
echo "$files" | xargs perl -pi -e 's/--color-fg-subtle/--diff--color--foreground--subtle/g'
echo "$files" | xargs perl -pi -e 's/--color-diff-blob-deletion-num-bg/--diff--blob--deletion-num--color--background/g'
echo "$files" | xargs perl -pi -e 's/--color-diff-blob-deletion-num-text/--diff--blob--deletion-num--color--text/g'
echo "$files" | xargs perl -pi -e 's/--color-danger-emphasis/--diff--color--danger--emphasis/g'
echo "$files" | xargs perl -pi -e 's/--color-diff-blob-addition-num-text/--diff--blob--addition-num--color--text/g'
echo "$files" | xargs perl -pi -e 's/--color-diff-blob-addition-num-bg/--diff--blob--addition-num--color--background/g'
echo "$files" | xargs perl -pi -e 's/--color-success-emphasis/--diff--color--success--emphasis/g'
echo "$files" | xargs perl -pi -e 's/--color-diff-blob-hunk-num-bg/--diff--blob--hunk-num--color--background/g'
echo "✓ Third-party lib variables replaced"
echo ""
echo "✓ Token replacements complete!"