@n8n/design-system 2.33.4 → 2.34.1

package/dist/css/message-box.scss

@@ -0,0 +1,353 @@
+@use 'mixins/mixins';
+@use './common/var';
+@use 'common/popup';
+@use 'input';
+
+@include mixins.b(message-box) {
+	display: inline-block;
+	width: var.$msgbox-width;
+	padding-bottom: var(--spacing--sm);
+	vertical-align: middle;
+	background-color: var.$color-white;
+	border-radius: var.$msgbox-border-radius;
+	border: 1px solid var(--border-color--light);
+	font-size: var.$messagebox-font-size;
+	box-shadow: var.$box-shadow-light;
+	text-align: left;
+	overflow: hidden;
+	backface-visibility: hidden;
+
+	&.wide {
+		width: calc(var.$msgbox-width * 1.25);
+	}
+
+	@include mixins.e(wrapper) {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		text-align: center;
+
+		&::after {
+			content: '';
+			display: inline-block;
+			height: 100%;
+			width: 0;
+			vertical-align: middle;
+		}
+	}
+
+	@include mixins.e(header) {
+		position: relative;
+		padding: var.$msgbox-padding-primary;
+		padding-bottom: var(--spacing--2xs);
+	}
+
+	@include mixins.e(title) {
+		padding-left: 0;
+		padding-right: var(--spacing--lg);
+		overflow-wrap: anywhere;
+		margin-bottom: 0;
+		font-size: var.$messagebox-font-size;
+		line-height: var(--line-height--md);
+		color: var.$messagebox-title-color;
+	}
+
+	@include mixins.e(headerbtn) {
+		position: absolute;
+		top: var.$msgbox-padding-primary;
+		right: var.$msgbox-padding-primary;
+		padding: 0;
+		border: none;
+		outline: none;
+		background: transparent;
+		font-size: var.$message-close-size;
+		cursor: pointer;
+
+		.el-message-box__close {
+			color: var(--color--info);
+		}
+
+		&:focus,
+		&:hover {
+			.el-message-box__close {
+				color: var(--color--primary);
+			}
+		}
+	}
+
+	@include mixins.e(content) {
+		padding: var(--spacing--2xs) var.$msgbox-padding-primary var(--spacing--sm);
+		color: var.$messagebox-content-color;
+		font-size: var.$messagebox-content-font-size;
+	}
+
+	&.with-confirmation-checkbox {
+		@include mixins.e(content) {
+			padding-bottom: 0;
+		}
+	}
+
+	@include mixins.e(container) {
+		position: relative;
+	}
+
+	@include mixins.e(input) {
+		padding-top: 15px;
+
+		& input.invalid {
+			border-color: var(--color--danger);
+			&:focus {
+				border-color: var(--color--danger);
+			}
+		}
+	}
+
+	@include mixins.e(status) {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		font-size: 24px !important;
+
+		&::before {
+			// 防止图标切割
+			padding-left: 1px;
+		}
+
+		+ .el-message-box__message {
+			padding-left: 36px;
+			padding-right: 12px;
+		}
+
+		&.el-icon-success {
+			color: var.$messagebox-success-color;
+		}
+
+		&.el-icon-info {
+			color: var.$messagebox-info-color;
+		}
+
+		&.el-icon-warning {
+			color: var.$messagebox-warning-color;
+		}
+
+		&.el-icon-error {
+			color: var.$messagebox-danger-color;
+		}
+	}
+
+	@include mixins.e(message) {
+		margin: 0;
+
+		& p {
+			margin: 0;
+			line-height: var(--line-height--lg);
+		}
+
+		& .el-message-box__message__structured {
+			margin-bottom: var(--spacing--xs);
+		}
+
+		& .el-message-box__message__structured p {
+			margin-bottom: var(--spacing--sm);
+		}
+	}
+
+	@include mixins.e(errormsg) {
+		color: var(--color--danger);
+		font-size: var.$messagebox-error-font-size;
+		min-height: 18px;
+		margin-top: var(--spacing--2xs);
+	}
+
+	@include mixins.e(btns) {
+		padding: var(--spacing--sm) var(--spacing--sm) 0;
+		text-align: right;
+
+		& button {
+			margin-left: 10px;
+		}
+
+		// Align MessageBox buttons with N8nButton styles; DS-463 will replace this patch.
+		& .btn--confirm,
+		& .btn--cancel {
+			--button--color--background: transparent;
+			--button--color--background-hover: transparent;
+			--button--color--background-active: transparent;
+			--button--color: light-dark(var(--color--neutral-900), var(--color--neutral-100));
+			--button--shadow: none;
+			--button--shadow--hover: none;
+			--button--shadow--active: none;
+			--button--border-color: transparent;
+			--button--border-color--hover: transparent;
+			--button--border-color--active: transparent;
+
+			height: 2rem;
+			padding: 0 var(--spacing--xs);
+			border-radius: var(--radius--3xs);
+			font-size: var(--font-size--sm);
+			font-family: var(--font-family);
+			font-weight: var(--font-weight--medium);
+			line-height: 1;
+			border: 1px solid var(--button--border-color);
+			background-color: var(--button--color--background);
+			color: var(--button--color);
+			box-shadow: var(--button--shadow);
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+		}
+
+		& .btn--confirm:hover,
+		& .btn--cancel:hover {
+			background-color: var(--button--color--background-hover);
+			box-shadow: var(--button--shadow--hover);
+			border-color: var(--button--border-color--hover);
+		}
+
+		& .btn--confirm:active,
+		& .btn--cancel:active {
+			background-color: var(--button--color--background-active);
+			box-shadow: var(--button--shadow--active);
+			border-color: var(--button--border-color--active);
+		}
+
+		& .btn--confirm {
+			--button--color--background: var(--color--orange-400);
+			--button--color--background-hover: var(--color--orange-500);
+			--button--color--background-active: var(--color--orange-600);
+			--button--color: var(--color--neutral-white);
+			--button--shadow: 0 1px 3px 0
+				light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
+			--button--shadow--hover: 0 1px 3px 0
+				light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
+			--button--shadow--active: 0 1px 3px 0
+				light-dark(var(--color--black-alpha-100), var(--color--black-alpha-200));
+			--button--border-color: var(--color--orange-400);
+			--button--border-color--hover: var(--color--orange-500);
+			--button--border-color--active: var(--color--orange-600);
+		}
+
+		& .btn--cancel {
+			--button--color--background: transparent;
+			--button--color--background-hover: light-dark(
+				var(--color--neutral-150),
+				var(--color--white-alpha-100)
+			);
+			--button--color--background-active: light-dark(
+				var(--color--black-alpha-200),
+				var(--color--white-alpha-200)
+			);
+			--button--border-color: light-dark(
+				var(--color--black-alpha-200),
+				var(--color--white-alpha-100)
+			);
+			--button--border-color--hover: light-dark(
+				var(--color--black-alpha-200),
+				var(--color--white-alpha-200)
+			);
+			--button--border-color--active: light-dark(
+				var(--color--black-alpha-300),
+				var(--color--white-alpha-300)
+			);
+		}
+	}
+
+	@include mixins.e(btns-reverse) {
+		flex-direction: row-reverse;
+	}
+
+	// Destructive variant: matches Modal component look for delete confirmations
+	&.el-message-box--destructive {
+		width: 540px;
+
+		.el-message-box__title span {
+			font-size: var(--font-size--xl);
+			font-weight: var(--font-weight--bold);
+			line-height: var(--line-height--sm);
+		}
+
+		.el-message-box__btns .btn--confirm {
+			--button--color--background: light-dark(var(--color--red-500), var(--color--red-600));
+			--button--color--background-hover: light-dark(var(--color--red-600), var(--color--red-500));
+			--button--color--background-active: light-dark(var(--color--red-600), var(--color--red-400));
+			--button--border-color: light-dark(var(--color--red-500), var(--color--red-600));
+			--button--border-color--hover: light-dark(var(--color--red-600), var(--color--red-500));
+			--button--border-color--active: light-dark(var(--color--red-600), var(--color--red-400));
+			--button--shadow: none;
+			--button--shadow--hover: none;
+			--button--shadow--active: none;
+		}
+	}
+
+	// centerAlign 布局
+	@include mixins.m(center) {
+		padding-bottom: 30px;
+
+		@include mixins.e(header) {
+			padding-top: 30px;
+		}
+
+		@include mixins.e(title) {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		@include mixins.e(status) {
+			position: relative;
+			top: auto;
+			padding-right: 5px;
+			text-align: center;
+			transform: translateY(-1px);
+		}
+
+		@include mixins.e(message) {
+			margin-left: 0;
+		}
+
+		@include mixins.e((btns, content)) {
+			text-align: center;
+		}
+
+		@include mixins.e(content) {
+			$padding-horizontal: var.$msgbox-padding-primary + 12px;
+
+			padding-left: $padding-horizontal;
+			padding-right: $padding-horizontal;
+		}
+	}
+}
+
+.msgbox-fade-enter-active {
+	animation: msgbox-fade-in 0.3s;
+}
+
+.msgbox-fade-leave-active {
+	animation: msgbox-fade-out 0.3s;
+}
+
+@keyframes msgbox-fade-in {
+	0% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+	100% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes msgbox-fade-out {
+	0% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	100% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+}

package/dist/css/mixins/_breakpoints.scss

@@ -0,0 +1,22 @@
+@use '../common/var';
+@use 'sass:map';
+@use 'sass:string';
+
+@mixin breakpoint($name) {
+	@if map.has-key(var.$breakpoints-spec, $name) {
+		$query: map.get(var.$breakpoints-spec, $name);
+		$media-query: '';
+
+		@each $key, $value in $query {
+			$media-query: '#{$media-query} and (#{$key}: #{$value})';
+		}
+
+		$media-query: string.unquote(string.slice($media-query, 6)); // Remove the initial ' and '
+
+		@media screen and #{$media-query} {
+			@content;
+		}
+	} @else {
+		@error "No breakpoint named `#{$name}` found in `$breakpoints-spec`.";
+	}
+}

package/dist/css/mixins/_button.scss

@@ -0,0 +1,129 @@
+@use '../common/var';
+@use './mixins';
+@use 'function';
+
+@mixin button-plain($color, $h, $s, $l) {
+	&,
+	&:focus,
+	&:hover {
+		color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+		background-color: var(--color--foreground--tint-2);
+		border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+	}
+
+	@include mixins.when(loading) {
+		color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
+		background-color: var(--color--foreground--tint-2);
+		border-color: function.lightness($h, $s, $l, var.$button-hover-tint-percent);
+	}
+
+	&:active {
+		border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+		background-color: var(--color--foreground--tint-2);
+		color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+		outline: none;
+	}
+
+	&.is-disabled {
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			color: var(--color--text--tint-1);
+			background-color: var(--color--foreground--tint-2);
+			border-color: var(--color--foreground);
+		}
+	}
+}
+
+@mixin button-variant($color, $background-color, $border-color, $h, $s, $l, $t, $plain: true) {
+	& {
+		color: $color;
+		background-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+		border-color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+	}
+
+	&:active {
+		background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+		border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+		color: $color;
+		outline: none;
+	}
+
+	&.is-active {
+		background: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+		border-color: function.lightness($h, $s, $l, -(var.$button-active-shade-percent));
+		color: $color;
+	}
+
+	&.is-light {
+		color: hsl(var(#{$h}), var(#{$s}), var(#{$l}));
+		background-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
+		border-color: hsl(var(#{$h}), var(#{$s}), var(#{$t}));
+	}
+
+	&.is-disabled {
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			color: var(--color--text--tint-1);
+			background-color: var(--color--foreground);
+			border-color: var(--color--foreground);
+		}
+	}
+
+	@if $plain {
+		&.is-plain {
+			@include button-plain($background-color, $h, $s, $l);
+		}
+	}
+}
+
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size) {
+	&.is-round {
+		padding: $padding-vertical $padding-horizontal;
+	}
+
+	& {
+		padding: $padding-vertical $padding-horizontal;
+		font-size: $font-size;
+	}
+}
+
+@mixin button-round() {
+	& {
+		--button--radius: 20px;
+	}
+}
+
+// ignore plain overrides
+@mixin button-just-primary() {
+	@include button-variant(
+		var.$button-primary-font-color,
+		var.$button-primary-background-color,
+		var.$button-primary-border-color,
+		--color--primary--h,
+		--color--primary--s,
+		--color--primary--l,
+		--color--primary--tint-2-l,
+		$plain: false
+	);
+}
+
+@mixin button-outline() {
+	@include button-plain(
+		var.$button-primary-background-color,
+		--color--primary--h,
+		--color--primary--s,
+		--color--primary--l
+	);
+}
+
+@mixin button-small() {
+	@include button-size(var(--spacing--3xs), var(--spacing--xs), var(--font-size--2xs));
+}
+
+@mixin button-medium() {
+	@include button-size(var(--spacing--2xs), var(--spacing--xs), var(--font-size--2xs));
+}

package/dist/css/mixins/_focus.scss

@@ -0,0 +1,34 @@
+/* Focus State
+ -------------------------- */
+
+@mixin focus-ring {
+	outline: var(--focus--border-width) solid var(--focus--outline-color);
+}
+
+@mixin focus-ring-with-border {
+	outline: var(--focus--border-width) solid var(--focus--outline-color);
+	border-color: var(--focus--border-color);
+}
+
+@mixin focus-visible-ring {
+	&:focus-visible {
+		@include focus-ring;
+	}
+}
+
+@mixin focus-within-ring {
+	&:focus-within {
+		@include focus-ring;
+	}
+}
+
+@mixin focus-ring-offset {
+	outline: var(--focus--border-width) solid var(--focus--border-color);
+	outline-offset: var(--spacing--5xs);
+}
+
+@mixin focus-visible-ring-offset {
+	&:focus-visible {
+		@include focus-ring-offset;
+	}
+}

package/dist/css/mixins/_input.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+
+$input-sizes: (
+	'xlarge': (
+		height: var(--height--xl),
+		radius: var(--radius--2xs),
+		font-size: var(--font-size--md),
+		padding: var(--spacing--xs),
+	),
+	'large': (
+		height: var(--height--lg),
+		radius: var(--radius--2xs),
+		font-size: var(--font-size--sm),
+		padding: var(--spacing--xs),
+	),
+	'medium': (
+		height: var(--height--md),
+		radius: var(--radius--3xs),
+		font-size: var(--font-size--sm),
+		padding: var(--spacing--xs),
+	),
+	'small': (
+		height: var(--height--sm),
+		radius: var(--radius--3xs),
+		font-size: var(--font-size--xs),
+		padding: var(--spacing--2xs),
+	),
+	'mini': (
+		height: var(--height--xs),
+		radius: var(--radius--3xs),
+		font-size: var(--font-size--2xs),
+		padding: var(--spacing--2xs),
+	),
+);
+
+@mixin size-variables($size: 'large') {
+	$config: map.get($input-sizes, $size);
+
+	--input--height: #{map.get($config, height)};
+	--input--radius: #{map.get($config, radius)};
+	--input--font-size: #{map.get($config, font-size)};
+	--input--padding: #{map.get($config, padding)};
+}
+
+@mixin theme-variables($border-color: var(--border-color)) {
+	--input--color--background: light-dark(var(--color--neutral-white), var(--color--neutral-950));
+	--input--color--background--disabled: var(--background--disabled);
+	--input--color--text: var(--color--text--shade-1);
+	--input--placeholder--color: var(--color--text--tint-1);
+	--input--color--disabled: var(--color--text--tint-1);
+	--input--placeholder--color--disabled: var(--input--color--disabled);
+	--input--shadow: 0 0 0 0 transparent;
+	--input--shadow--hover: 0 0 0 0 transparent;
+	--input--shadow--focus: 0 0 0 0 transparent;
+	--input--border-color: #{$border-color};
+	--input--border-color--hover: var(--border-color--strong);
+	--input--border-color--focus: var(--focus--border-color);
+	--input--border--shadow: 0 0 0 1px var(--input--border-color);
+	--input--border--shadow--hover: 0 0 0 1px var(--input--border-color--hover);
+	--input--border--shadow--focus: 0 0 0 1px var(--input--border-color--focus);
+}

package/dist/css/mixins/config.scss

@@ -0,0 +1,4 @@
+$namespace: 'el';
+$element-separator: '__';
+$modifier-separator: '--';
+$state-prefix: 'is-';

package/dist/css/mixins/function.scss

@@ -0,0 +1,53 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'config';
+
+/* BEM support Func
+ -------------------------- */
+@function selectorToString($selector) {
+	$selector: meta.inspect($selector);
+	$selector: string.slice($selector, 2, -2);
+	@return $selector;
+}
+
+@function containsModifier($selector) {
+	$selector: selectorToString($selector);
+
+	@if string.index($selector, config.$modifier-separator) {
+		@return true;
+	} @else {
+		@return false;
+	}
+}
+
+@function containWhenFlag($selector) {
+	$selector: selectorToString($selector);
+
+	@if string.index($selector, '.' + config.$state-prefix) {
+		@return true;
+	} @else {
+		@return false;
+	}
+}
+
+@function containPseudoClass($selector) {
+	$selector: selectorToString($selector);
+
+	@if string.index($selector, ':') {
+		@return true;
+	} @else {
+		@return false;
+	}
+}
+
+@function hitAllSpecialNestRule($selector) {
+	@return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+
+@function lightness($h, $s, $l, $lightness) {
+	@return hsl(var(#{$h}), var(#{$s}), calc(var(#{$l}) + #{$lightness}));
+}
+
+@function saturation($h, $s, $l, $saturation) {
+	@return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}));
+}

package/dist/css/mixins/index.scss

@@ -0,0 +1,9 @@
+@forward 'breakpoints';
+@forward 'button' hide $B, $E;
+@forward 'config';
+@forward 'focus';
+@forward 'function';
+@forward 'input';
+@forward 'markdown';
+@forward 'mixins';
+@forward 'utils';