@n8n/design-system 2.33.3 → 2.34.0

package/dist/css/markdown.scss

@@ -0,0 +1,397 @@
+@use 'sass:meta';
+
+@include meta.load-css('highlight.js/styles/github.css');
+
+@mixin hljs-dark-theme {
+	@include meta.load-css('highlight.js/styles/github-dark-dimmed.css');
+}
+
+[data-theme='dark'] {
+	@include hljs-dark-theme;
+}
+
+@media (prefers-color-scheme: dark) {
+	body:not([data-theme]) {
+		@include hljs-dark-theme;
+	}
+}
+
+.n8n-markdown {
+	--markdown--spacing: var(--spacing--2xs);
+
+	display: block;
+	color: inherit;
+	line-height: 1.5em;
+	-webkit-text-size-adjust: 100%;
+	word-break: break-word;
+
+	*,
+	::before,
+	::after {
+		box-sizing: border-box;
+	}
+
+	p,
+	li {
+		font-size: inherit;
+		line-height: inherit;
+		margin: calc(var(--markdown--spacing) * 2) 0;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	li {
+		margin: 0;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin: 0;
+		color: var(--color--text--shade-1);
+		line-height: var(--line-height--md);
+		font-weight: var(--font-weight--bold);
+		scroll-margin-top: calc(var(--markdown--spacing) * 4);
+	}
+
+	h1 {
+		font-size: var(--font-size--xl);
+		margin-top: calc(var(--markdown--spacing) * 3);
+	}
+
+	h2 {
+		font-size: var(--font-size--lg);
+		margin-top: calc(var(--markdown--spacing) * 4);
+	}
+
+	h3 {
+		font-size: var(--font-size--md);
+		margin-top: calc(var(--markdown--spacing) * 4);
+	}
+
+	h4 {
+		font-size: var(--font-size--sm);
+		margin-top: calc(var(--markdown--spacing) * 4);
+	}
+
+	h5,
+	h6 {
+		font-size: var(--font-size--sm);
+		margin-top: calc(var(--markdown--spacing) * 3);
+	}
+
+	h2 + h3 {
+		margin-top: calc(var(--markdown--spacing) * 3);
+	}
+
+	li > :is(h1, h2, h3, h4, h5, h6, p, strong):first-child {
+		margin-top: 0;
+	}
+
+	strong,
+	b {
+		color: var(--color--text--shade-1);
+		font-weight: var(--font-weight--bold);
+	}
+
+	a:not(:where(h1, h2, h3, h4, h5, h6) *) {
+		color: var(--color--text--shade-1);
+		font-weight: var(--font-weight--medium);
+		text-decoration: underline;
+		text-underline-offset: 3px;
+		text-decoration-thickness: 1px;
+		transition: color 0.15s ease;
+
+		&:hover {
+			color: var(--color--primary);
+		}
+
+		code {
+			font-weight: var(--font-weight--medium);
+		}
+	}
+
+	pre,
+	code,
+	kbd,
+	samp {
+		font-family:
+			var(--font-family--monospace), 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+			'Noto Color Emoji';
+		font-variant-ligatures: none;
+	}
+
+	:not(pre) > code {
+		font-weight: var(--font-weight--medium);
+		font-size: var(--font-size--sm);
+		padding: calc(var(--markdown--spacing) * 0.25) calc(var(--markdown--spacing) * 0.5);
+		line-height: var(--line-height--lg);
+		background-color: var(--chat--message--pre--background, var(--color--background));
+		border-radius: var(--radius--sm);
+	}
+
+	:is(h1, h2, h3, h4, h5, h6) code {
+		font-weight: var(--font-weight--bold);
+	}
+
+	pre {
+		width: 100%;
+		font-family: var(--font-family--monospace);
+		font-size: var(--font-size--sm);
+		line-height: var(--line-height--xl);
+		margin: var(--markdown--spacing) 0 calc(var(--markdown--spacing) * 2.5);
+		white-space: pre-wrap;
+		box-sizing: border-box;
+		padding: calc(var(--markdown--spacing) * 2);
+		background: var(--chat--message--pre--background, var(--color--background));
+		border-radius: var(--radius--lg);
+		position: relative;
+		-moz-tab-size: 4;
+		-o-tab-size: 4;
+		tab-size: 4;
+
+		code {
+			font-family: var(--font-family--monospace);
+
+			&::before,
+			&::after {
+				content: none;
+			}
+		}
+
+		code:last-of-type {
+			padding-bottom: 0;
+		}
+
+		code * + * {
+			margin-top: 0;
+		}
+
+		& ~ pre {
+			margin-bottom: calc(var(--markdown--spacing) * 2.5);
+		}
+	}
+
+	&.n8n-markdown--single-pre pre {
+		background: transparent;
+		margin: 0;
+		border-radius: 0;
+	}
+
+	.n8n-markdown-code-block-actions {
+		position: sticky;
+		top: var(--markdown--spacing);
+		right: var(--markdown--spacing);
+		height: 0;
+		display: flex;
+		justify-content: flex-end;
+		pointer-events: none;
+		z-index: 1;
+
+		> * {
+			pointer-events: auto;
+		}
+	}
+
+	blockquote {
+		font-style: italic;
+		border-left: calc(var(--markdown--spacing) * 0.5) solid var(--color--foreground--shade-1);
+		padding-left: calc(var(--markdown--spacing) * 2);
+		margin: calc(var(--markdown--spacing) * 2) 0;
+		color: var(--color--text--tint-1);
+
+		p:first-of-type::before {
+			content: open-quote;
+		}
+
+		p:last-of-type::after {
+			content: close-quote;
+		}
+	}
+
+	hr {
+		border: none;
+		border-top: var(--border-width) var(--border-style) var(--color--foreground);
+		margin: calc(var(--markdown--spacing) * 3) 0;
+
+		& + h2 {
+			margin-top: calc(var(--markdown--spacing) * 3);
+		}
+	}
+
+	ol {
+		padding-left: calc(var(--markdown--spacing) * 4);
+		list-style-type: decimal;
+		list-style-position: outside;
+		margin: calc(var(--markdown--spacing) * 2) 0;
+
+		li + li {
+			margin-top: calc(var(--markdown--spacing) * 1.5);
+		}
+
+		li::marker {
+			font-family: var(--font-family--monospace);
+			color: var(--color--text);
+		}
+	}
+
+	ul {
+		padding-left: calc(var(--markdown--spacing) * 4);
+		list-style-type: disc;
+		list-style-position: outside;
+		margin: calc(var(--markdown--spacing) * 2) 0;
+
+		li + li {
+			margin-top: var(--markdown--spacing);
+		}
+
+		li::marker {
+			color: var(--color--foreground--shade-1);
+		}
+	}
+
+	ul[data-type='taskList'] {
+		padding-left: 0;
+		list-style: none;
+
+		li {
+			display: flex;
+			align-items: flex-start;
+			gap: var(--spacing--2xs);
+		}
+
+		li > label {
+			flex: 0 0 auto;
+			user-select: none;
+		}
+
+		li > div {
+			flex: 1 1 auto;
+			min-width: 0;
+		}
+	}
+
+	ul ul,
+	ol ol,
+	ul ol,
+	ol ul {
+		margin-top: var(--markdown--spacing);
+		margin-bottom: 0;
+		padding-left: calc(var(--markdown--spacing) * 3);
+	}
+
+	.n8n-markdown-footnote-ref {
+		display: inline-block;
+		font-size: var(--font-size--3xs);
+		line-height: 1;
+		color: var(--color--text);
+		background: var(--color--foreground--tint-1);
+		border-radius: var(--radius--xl);
+		padding: var(--spacing--4xs) var(--spacing--2xs);
+		margin-inline: var(--spacing--5xs);
+		vertical-align: middle;
+		white-space: nowrap;
+		font-weight: var(--font-weight--regular);
+	}
+
+	.n8n-markdown-table-container {
+		width: 100%;
+		overflow-x: auto;
+	}
+
+	table {
+		width: 100%;
+		table-layout: auto;
+		margin: calc(var(--markdown--spacing) * 2) 0;
+		font-size: var(--font-size--sm);
+		line-height: var(--line-height--lg);
+	}
+
+	thead {
+		border-bottom-width: 1px;
+		border-bottom-style: solid;
+		border-bottom-color: var(--color--neutral-300);
+	}
+
+	thead th {
+		color: var(--color--text--shade-1);
+		font-weight: var(--font-weight--bold);
+		vertical-align: bottom;
+		padding-inline-start: 0.6em;
+		padding-inline-end: 0.6em;
+		padding-bottom: 0.8em;
+		text-align: start;
+	}
+
+	thead th:first-child,
+	tbody td:first-child,
+	tfoot td:first-child {
+		padding-inline-start: 0;
+	}
+
+	thead th:last-child,
+	tbody td:last-child,
+	tfoot td:last-child {
+		padding-inline-end: 0;
+	}
+
+	tbody tr {
+		border-bottom-width: 1px;
+		border-bottom-style: solid;
+		border-bottom-color: var(--color--neutral-200);
+	}
+
+	tbody tr:last-child {
+		border-bottom-width: 0;
+	}
+
+	tbody td,
+	tfoot td {
+		vertical-align: baseline;
+		padding-top: 0.8em;
+		padding-inline-start: 0.6em;
+		padding-inline-end: 0.6em;
+		padding-bottom: 0.8em;
+	}
+
+	tfoot {
+		border-top-width: 1px;
+		border-top-style: solid;
+		border-top-color: var(--color--neutral-300);
+	}
+
+	td code {
+		font-size: var(--font-size--xs);
+	}
+
+	th,
+	td {
+		text-align: start;
+	}
+
+	figure {
+		margin: calc(var(--markdown--spacing) * 2) 0;
+	}
+
+	figcaption {
+		margin-top: calc(var(--markdown--spacing) * 1.5);
+		text-align: center;
+		font-size: var(--font-size--sm);
+		font-style: italic;
+		color: var(--color--text--tint-1);
+	}
+
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+}

package/dist/css/menu.scss

@@ -0,0 +1,311 @@
+@use 'mixins/mixins';
+@use 'mixins/utils';
+@use './common/var';
+@use 'common/transition';
+
+@mixin menu-item {
+	height: var.$menu-item-height;
+	line-height: var.$menu-item-height;
+	font-size: var.$menu-item-font-size;
+	color: var.$menu-item-font-color;
+	font-weight: var.$menu-item-font-weight;
+	padding: 0 20px;
+	list-style: none;
+	cursor: pointer;
+	position: relative;
+	transition:
+		border-color 0.3s,
+		background-color 0.3s,
+		color 0.3s;
+	box-sizing: border-box;
+	white-space: nowrap;
+	border-radius: var.$menu-item-border-radius;
+
+	i {
+		color: var.$menu-item-icon-font-color;
+	}
+
+	&:hover,
+	&:focus {
+		outline: none;
+		background-color: var.$menu-item-hover-fill;
+		color: var.$menu-item-hover-font-color;
+
+		i {
+			color: var.$menu-item-hover-font-color;
+		}
+	}
+
+	@include mixins.when(disabled) {
+		opacity: 0.25;
+		cursor: not-allowed;
+		background: none !important;
+	}
+}
+
+@include mixins.b(menu) {
+	list-style: none;
+	position: relative;
+	margin: 0;
+	padding-left: 0;
+	background-color: var.$menu-background-color;
+	@include utils.utils-clearfix;
+	&.el-menu--horizontal {
+		border-bottom: solid 1px #e6e6e6;
+	}
+
+	@include mixins.m(horizontal) {
+		border-right: none;
+		& > .el-menu-item {
+			float: left;
+			height: 60px;
+			line-height: 60px;
+			margin: 0;
+			border-bottom: 2px solid transparent;
+			color: var(--color--text--tint-1);
+
+			a,
+			a:hover {
+				color: inherit;
+			}
+
+			&:not(.is-disabled):hover,
+			&:not(.is-disabled):focus {
+				background-color: var(--color--foreground--tint-2);
+			}
+		}
+		& > .el-sub-menu {
+			float: left;
+
+			&:focus,
+			&:hover {
+				outline: none;
+				.el-sub-menu__title {
+					color: var(--color--text--shade-1);
+				}
+			}
+
+			&.is-active {
+				.el-sub-menu__title {
+					border-bottom: 2px solid var(--color--primary);
+					color: var(--color--text--shade-1);
+				}
+			}
+
+			& .el-sub-menu__title {
+				height: 60px;
+				line-height: 60px;
+				border-bottom: 2px solid transparent;
+				color: var(--color--text--tint-1);
+
+				&:hover {
+					background-color: var(--color--foreground--tint-2);
+				}
+			}
+			& .el-sub-menu__icon-arrow {
+				position: static;
+				vertical-align: middle;
+				margin-left: 8px;
+				margin-top: -3px;
+			}
+		}
+		& .el-menu {
+			& .el-menu-item,
+			& .el-sub-menu__title {
+				background-color: var.$color-white;
+				float: none;
+				height: 36px;
+				line-height: 36px;
+				padding: 0 10px;
+				color: var(--color--text--tint-1);
+			}
+			& .el-menu-item.is-active,
+			& .el-sub-menu.is-active > .el-sub-menu__title {
+				color: var(--color--text--shade-1);
+			}
+		}
+		& .el-menu-item:not(.is-disabled):hover,
+		& .el-menu-item:not(.is-disabled):focus {
+			outline: none;
+			color: var(--color--text--shade-1);
+		}
+		& > .el-menu-item.is-active {
+			border-bottom: 2px solid var(--color--primary);
+			color: var(--color--text--shade-1);
+		}
+	}
+	@include mixins.m(collapse) {
+		width: 64px;
+
+		> .el-menu-item,
+		> .el-sub-menu > .el-sub-menu__title {
+			[class^='el-icon-'] {
+				margin: 0;
+				vertical-align: middle;
+				width: 24px;
+				text-align: center;
+			}
+			.el-sub-menu__icon-arrow {
+				display: none;
+			}
+			span {
+				height: 0;
+				width: 0;
+				overflow: hidden;
+				visibility: hidden;
+				display: inline-block;
+			}
+		}
+
+		> .el-menu-item.is-active i {
+			color: inherit;
+		}
+
+		.el-menu .el-sub-menu {
+			min-width: 200px;
+		}
+
+		.el-sub-menu {
+			position: relative;
+			& .el-menu {
+				position: absolute;
+				margin-left: 5px;
+				top: 0;
+				left: 100%;
+				z-index: 10;
+				border: 1px solid var(--border-color);
+				border-radius: var(--radius--sm);
+				box-shadow: var.$box-shadow-light;
+			}
+
+			&.is-opened {
+				> .el-sub-menu__title .el-sub-menu__icon-arrow {
+					transform: none;
+				}
+			}
+		}
+	}
+	@include mixins.m(popup) {
+		z-index: 100;
+		min-width: 200px;
+		border: none;
+		padding: 5px 0;
+		border-radius: var(--radius--sm);
+		box-shadow: var.$box-shadow-light;
+
+		&-bottom-start {
+			margin-top: 5px;
+		}
+		&-right-start {
+			margin-left: 5px;
+			margin-right: 5px;
+		}
+	}
+}
+@include mixins.b(menu-item) {
+	@include menu-item;
+
+	display: flex;
+	align-items: center;
+
+	& [class^='el-icon-'] {
+		margin-right: 5px;
+		width: 24px;
+		text-align: center;
+		font-size: 18px;
+		vertical-align: middle;
+	}
+	@include mixins.when(active) {
+		color: var.$menu-item-active-font-color;
+		background-color: var.$menu-item-active-background-color;
+		font-weight: var.$menu-item-active-font-weight;
+
+		i {
+			color: inherit;
+		}
+	}
+}
+
+@include mixins.b(sub-menu) {
+	list-style: none;
+	margin: 0;
+	padding-left: 0;
+
+	@include mixins.e(title) {
+		@include menu-item;
+
+		&:hover {
+			background-color: var.$menu-item-hover-fill;
+		}
+	}
+	& .el-menu {
+		border: none;
+	}
+	& .el-menu-item {
+		height: 50px;
+		line-height: 50px;
+		padding: 0 45px;
+		min-width: 200px;
+	}
+	@include mixins.e(icon-arrow) {
+		right: 20px;
+		position: absolute;
+		top: 50%;
+		margin-top: -6px;
+		transition: transform 0.3s;
+		margin-right: 0;
+		font-size: 12px;
+		width: 12px;
+		height: 12px;
+
+		svg {
+			width: 12px;
+			height: 12px;
+			position: relative;
+			display: block;
+			margin-top: -2px;
+		}
+	}
+	@include mixins.when(active) {
+		.el-sub-menu__title {
+			border-bottom-color: var(--color--primary);
+		}
+	}
+	@include mixins.when(opened) {
+		> .el-sub-menu__title .el-sub-menu__icon-arrow {
+			transform: rotateZ(180deg);
+		}
+	}
+	@include mixins.when(disabled) {
+		.el-sub-menu__title,
+		.el-menu-item {
+			opacity: 0.25;
+			cursor: not-allowed;
+			background: none !important;
+		}
+	}
+	[class^='el-icon-'] {
+		vertical-align: middle;
+		margin-right: 5px;
+		width: 24px;
+		text-align: center;
+		font-size: 18px;
+	}
+}
+
+@include mixins.b(menu-item-group) {
+	> ul {
+		padding: 0;
+	}
+	@include mixins.e(title) {
+		padding: 7px 0 7px 20px;
+		line-height: normal;
+		font-size: 12px;
+		color: var(--color--text--tint-1);
+	}
+}
+
+.horizontal-collapse-transition .el-sub-menu__title .el-sub-menu__icon-arrow {
+	transition: 0.2s;
+	opacity: 0;
+}