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