@n8n/design-system 2.33.3 → 2.34.0

package/dist/css/mixins/markdown.scss

@@ -0,0 +1,313 @@
+@mixin markdown-content {
+	--markdown--spacing: var(--spacing--2xs);
+
+	display: block;
+	color: inherit;
+
+	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 var(--duration--snappy) var(--easing--ease-out);
+
+		&:hover {
+			color: var(--color--primary);
+		}
+
+		code {
+			font-weight: var(--font-weight--medium);
+		}
+	}
+
+	:not(pre) > code {
+		font-family: var(--font-family--monospace);
+		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(--background--subtle);
+		border-radius: var(--radius--sm);
+		font-variant-ligatures: none;
+	}
+
+	: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(--background--subtle);
+		border-radius: var(--radius--lg);
+		position: relative;
+
+		code {
+			font-family: var(--font-family--monospace);
+			font-variant-ligatures: none;
+
+			&::before,
+			&::after {
+				content: none;
+			}
+		}
+
+		code:last-of-type {
+			padding-bottom: 0;
+		}
+
+		code * + * {
+			margin-top: 0;
+		}
+
+		& ~ pre {
+			margin-bottom: calc(var(--markdown--spacing) * 2.5);
+		}
+	}
+
+	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 ul,
+	ol ol,
+	ul ol,
+	ol ul {
+		margin-top: var(--markdown--spacing);
+		margin-bottom: 0;
+		padding-left: calc(var(--markdown--spacing) * 3);
+	}
+
+	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: var(--border-width);
+		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 {
+		padding-inline-start: 0;
+	}
+
+	thead th:last-child {
+		padding-inline-end: 0;
+	}
+
+	tbody tr {
+		border-bottom-width: var(--border-width);
+		border-bottom-style: solid;
+		border-bottom-color: var(--color--neutral-200);
+	}
+
+	tbody tr:last-child {
+		border-bottom-width: 0;
+	}
+
+	tbody td {
+		vertical-align: baseline;
+		padding-top: 0.8em;
+		padding-inline-start: 0.6em;
+		padding-inline-end: 0.6em;
+		padding-bottom: 0.8em;
+	}
+
+	tbody td:first-child {
+		padding-inline-start: 0;
+	}
+
+	tbody td:last-child {
+		padding-inline-end: 0;
+	}
+
+	tfoot {
+		border-top-width: var(--border-width);
+		border-top-style: solid;
+		border-top-color: var(--color--neutral-300);
+	}
+
+	tfoot td {
+		vertical-align: top;
+		padding-top: 0.8em;
+		padding-inline-start: 0.6em;
+		padding-inline-end: 0.6em;
+		padding-bottom: 0.8em;
+	}
+
+	tfoot td:first-child {
+		padding-inline-start: 0;
+	}
+
+	tfoot td:last-child {
+		padding-inline-end: 0;
+	}
+
+	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);
+	}
+}

package/dist/css/mixins/mixins.scss

@@ -0,0 +1,214 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'function';
+@use '../common/var';
+@use 'config';
+
+// Module-level variables for BEM mixins
+$B: null;
+$E: null;
+
+/* Break-points
+ -------------------------- */
+@mixin res($key, $map: var.$breakpoints) {
+	// 循环断点Map，如果存在则返回
+	@if map.has-key($map, $key) {
+		@media only screen and #{meta.inspect(map.get($map, $key))} {
+			@content;
+		}
+	} @else {
+		@warn "Undefeined points: `#{$map}`";
+	}
+}
+
+/* Scrollbar
+ -------------------------- */
+@mixin scroll-bar {
+	scrollbar-width: thin;
+	scrollbar-color: var.$scrollbar-background-color transparent;
+
+	&::-webkit-scrollbar {
+		z-index: 11;
+		width: 6px;
+
+		&:horizontal {
+			height: 6px;
+		}
+
+		&-thumb {
+			border-radius: 5px;
+			width: 6px;
+			background-color: var.$scrollbar-background-color;
+
+			&:hover {
+				background-color: var.$scrollbar-hover-background-color;
+			}
+		}
+
+		&-corner,
+		&-track,
+		&-track-piece {
+			background-color: transparent;
+		}
+	}
+}
+
+@mixin hoverable-scroll-bar {
+	@include scroll-bar;
+	scrollbar-color: transparent transparent;
+
+	&::-webkit-scrollbar-thumb {
+		background-color: transparent;
+	}
+
+	&:hover {
+		scrollbar-color: var.$scrollbar-background-color transparent;
+
+		&::-webkit-scrollbar-thumb {
+			background-color: var.$scrollbar-background-color;
+
+			&:hover {
+				background-color: var.$scrollbar-hover-background-color;
+			}
+		}
+	}
+}
+
+/* Placeholder
+ -------------------------- */
+@mixin placeholder {
+	&::-webkit-input-placeholder {
+		@content;
+	}
+
+	&::-moz-placeholder {
+		@content;
+	}
+
+	&:-ms-input-placeholder {
+		@content;
+	}
+}
+
+/* BEM
+ -------------------------- */
+@mixin b($block) {
+	$B: config.$namespace + '-' + $block !global;
+
+	.#{$B} {
+		@content;
+	}
+}
+
+@mixin e($element) {
+	$E: $element !global;
+	$selector: &;
+	$currentSelector: '';
+	@each $unit in $element {
+		$currentSelector: #{$currentSelector + '.' + $B + config.$element-separator + $unit + ','};
+	}
+
+	@if function.hitAllSpecialNestRule($selector) {
+		@at-root {
+			#{$selector} {
+				#{$currentSelector} {
+					@content;
+				}
+			}
+		}
+	} @else {
+		@at-root {
+			#{$currentSelector} {
+				@content;
+			}
+		}
+	}
+}
+
+@mixin m($modifier) {
+	$selector: &;
+	$currentSelector: '';
+	@each $unit in $modifier {
+		$currentSelector: #{$currentSelector + & + config.$modifier-separator + $unit + ','};
+	}
+
+	@at-root {
+		#{$currentSelector} {
+			@content;
+		}
+	}
+}
+
+@mixin configurable-m($modifier, $E-flag: false) {
+	$selector: &;
+	$interpolation: '';
+
+	@if $E-flag {
+		$interpolation: config.$element-separator + $E-flag;
+	}
+
+	@at-root {
+		#{$selector} {
+			.#{$B + $interpolation + config.$modifier-separator + $modifier} {
+				@content;
+			}
+		}
+	}
+}
+
+@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
+	$modifierCombo: '';
+
+	@if $modifier {
+		$modifierCombo: config.$modifier-separator + $modifier;
+	}
+
+	@at-root {
+		#{&}#{$specSelector}.#{$block + config.$element-separator + $element + $modifierCombo} {
+			@content;
+		}
+	}
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+	$selector: &;
+	$modifierCombo: '';
+
+	@if $modifier {
+		$modifierCombo: config.$modifier-separator + $modifier;
+	}
+
+	@at-root {
+		#{$selector} {
+			.#{$block + config.$element-separator + $element + $modifierCombo} {
+				@content;
+			}
+		}
+	}
+}
+
+@mixin when($state) {
+	@at-root {
+		&.#{config.$state-prefix + $state} {
+			@content;
+		}
+	}
+}
+
+@mixin extend-rule($name) {
+	@extend #{'%shared-' + $name};
+}
+
+@mixin share-rule($name) {
+	$rule-name: '%shared-' + $name;
+
+	@at-root #{$rule-name} {
+		@content;
+	}
+}
+
+@mixin pseudo($pseudo) {
+	@at-root #{&}#{':#{$pseudo}'} {
+		@content;
+	}
+}