@kopexa/theme 1.7.7 → 2.1.0

package/dist/editor.css

@@ -0,0 +1,839 @@
+:root {
+	--tt-brand-color-500: var(--color-primary-500);
+
+	--tt-bg-color: var(--color-background);
+	--tt-cursor-color: var(--tt-brand-color-500);
+	--tt-selection-color: var(--color-primary-200);
+	--tt-selection-color-border: var(--color-primary-500);
+	--tt-resize-handle-color: var(--color-default-400);
+	--separator-color: var(--color-default-300);
+	--placeholder-color: var(--color-default-400);
+	--blockquote-bg-color: var(--color-primary-300);
+	--link-text-color: var(--color-primary-700);
+
+	--tt-radius-xs: var(--radius-xs);
+	--tt-font-size: var(--text-sm);
+
+	--tt-checklist-bg-color: var(--color-default-100);
+	--tt-checklist-bg-active-color: var(--color-default-900);
+	--tt-checklist-border-color: var(--color-default-200);
+	--tt-checklist-border-active-color: var(--color-default-900);
+	--tt-checklist-check-icon-color: var(--white);
+	--tt-checklist-text-active: var(--color-default-500);
+
+	--tt-inline-code-bg-color: var(--color-default-100);
+	--tt-inline-code-text-color: var(--color-default-700);
+	--tt-inline-code-border-color: var(--color-default-200);
+	--tt-codeblock-bg: var(--color-default-950);
+	--tt-codeblock-text: var(--color-default-200);
+	--tt-codeblock-border: var(--color-default-200);
+
+	--tt-color-highlight-gray: var(--color-default-500);
+	--tt-color-highlight-gray-contrast: var(--color-default-900);
+	--tt-color-highlight-brown: var(--color-yellow-800);
+	--tt-color-highlight-brown-contrast: var(--color-yellow-950);
+	--tt-color-highlight-orange: var(--color-orange-500);
+	--tt-color-highlight-orange-contrast: var(--color-orange-900);
+	--tt-color-highlight-pink: var(--color-pink-500);
+	--tt-color-highlight-pink-contrast: var(--color-pink-900);
+	--tt-color-highlight-green: var(--color-green-500);
+	--tt-color-highlight-green-contrast: var(--color-green-900);
+	--tt-color-highlight-blue: var(--color-blue-500);
+	--tt-color-highlight-blue-contrast: var(--color-blue-900);
+	--tt-color-highlight-red: var(--color-red-500);
+	--tt-color-highlight-red-contrast: var(--color-red-900);
+	--tt-color-highlight-purple: var(--color-purple-500);
+	--tt-color-highlight-purple-contrast: var(--color-purple-900);
+	--tt-color-highlight-yellow: var(--color-yellow-500);
+	--tt-color-highlight-yellow-contrast: var(--color-yellow-900);
+}
+
+/* =====================
+     CORE EDITOR STYLES
+     ===================== */
+
+.tiptap.ProseMirror {
+	white-space: pre-wrap;
+	outline: none;
+	font-size: var(--tt-font-size);
+	caret-color: var(--tt-cursor-color);
+
+	/* Paragraph spacing */
+	p:not(:first-child) {
+		font-size: var(--tt-font-size);
+		line-height: 1.6;
+		font-weight: normal;
+		margin-top: 20px;
+	}
+
+	/* Selection styles */
+	&:not(.readonly):not(.ProseMirror-hideselection) {
+		::selection {
+			background-color: var(--tt-selection-color);
+		}
+
+		.selection::selection {
+			background: transparent;
+		}
+	}
+
+	.selection {
+		display: inline;
+		background-color: var(--tt-selection-color);
+	}
+
+	.ProseMirror-hideselection {
+		caret-color: transparent;
+	}
+
+	/* Placeholder */
+	>p.is-editor-empty::before {
+		content: attr(data-placeholder);
+		pointer-events: none;
+		color: var(--placeholder-color);
+		float: left;
+		height: 0;
+	}
+
+	/* Resize cursor */
+	&.resize-cursor {
+		cursor: ew-resize;
+		cursor: col-resize;
+	}
+
+
+	/* =====================
+     PLACEHOLDER
+     ===================== */
+  .is-empty:not(.with-slash)[data-placeholder]:has(
+      > .ProseMirror-trailingBreak:only-child
+    )::before {
+    content: attr(data-placeholder);
+  }
+
+  .is-empty.with-slash[data-placeholder]:has(
+      > .ProseMirror-trailingBreak:only-child
+    )::before {
+    content: "Write, type '/' for commands…";
+    font-style: italic;
+  }
+}
+
+/* =====================
+     GAP CURSOR
+     ===================== */
+.tiptap.ProseMirror {
+	.ProseMirror-gapcursor {
+		display: none;
+		pointer-events: none;
+		position: absolute;
+
+		&:after {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 1em;
+			width: 1.25em;
+			border-top: 1px solid black;
+			animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+		}
+	}
+
+	&.ProseMirror-focused,
+	&.ProseMirror.ProseMirror-focused {
+		.ProseMirror-gapcursor {
+			display: block;
+		}
+	}
+}
+
+@keyframes ProseMirror-cursor-blink {
+	to {
+		visibility: hidden;
+	}
+}
+
+
+/* =====================
+     TEXT DECORATION
+     ===================== */
+.tiptap.ProseMirror {
+
+	/* Text decoration inheritance for spans */
+	a span {
+		text-decoration: underline;
+	}
+
+	s span {
+		text-decoration: line-through;
+	}
+
+	u span {
+		text-decoration: underline;
+	}
+}
+
+
+/* =====================
+     BLOCKQUOTE
+     ===================== */
+.tiptap.ProseMirror {
+	blockquote {
+		position: relative;
+		padding-left: 1em;
+		padding-top: 0.375em;
+		padding-bottom: 0.375em;
+		margin: 1.5rem 0;
+
+		p {
+			margin-top: 0;
+		}
+
+		&::before,
+		&.is-empty::before {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 0.25em;
+			background-color: var(--blockquote-bg-color);
+			content: "";
+			border-radius: 0;
+		}
+	}
+}
+
+/* =====================
+     COLLABORATION
+     ===================== */
+.tiptap.ProseMirror {
+	.collaboration-cursor {
+		&__caret {
+			border-right: 1px solid transparent;
+			border-left: 1px solid transparent;
+			pointer-events: none;
+			margin-left: -1px;
+			margin-right: -1px;
+			position: relative;
+			word-break: normal;
+		}
+
+		&__label {
+			border-radius: 0.25rem;
+			border-bottom-left-radius: 0;
+			font-size: 0.75rem;
+			font-weight: 600;
+			left: -1px;
+			line-height: 1;
+			padding: 0.125rem 0.375rem;
+			position: absolute;
+			top: -1.3em;
+			user-select: none;
+			white-space: nowrap;
+		}
+	}
+}
+
+/* =====================
+     EMOJI
+     ===================== */
+.tiptap.ProseMirror [data-type="emoji"] img {
+	display: inline-block;
+	width: 1.25em;
+	height: 1.25em;
+	cursor: text;
+}
+
+/* =====================
+     HEADINGS
+     ===================== */
+.tiptap.ProseMirror {
+
+	h1,
+	h2,
+	h3,
+	h4 {
+		position: relative;
+		color: inherit;
+		font-style: inherit;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	h1 {
+		font-size: 1.5em;
+		font-weight: 700;
+		margin-top: 2em;
+	}
+
+	h2 {
+		font-size: 1.25em;
+		font-weight: 700;
+		margin-top: 1.5em;
+	}
+
+	h3 {
+		font-size: 1.125em;
+		font-weight: 600;
+		margin-top: 1em;
+	}
+
+	h4 {
+		font-size: 1em;
+		font-weight: 600;
+		margin-top: 1em;
+	}
+}
+
+
+/* =====================
+     HORIZONTAL RULE
+     ===================== */
+.tiptap.ProseMirror {
+	hr {
+		margin-top: 3em;
+		margin-bottom: 3em;
+		border: none;
+		height: 1px;
+		background-color: var(--separator-color);
+	}
+
+	&.ProseMirror-focused {
+		hr.ProseMirror-selectednode {
+			border-radius: 9999px;
+			outline: 3px solid var(--tt-brand-color-500);
+			outline-offset: 2px;
+		}
+	}
+}
+
+/* =====================
+     LINKS
+     ===================== */
+.tiptap.ProseMirror {
+	a {
+		color: var(--link-text-color);
+		text-decoration: underline;
+	}
+}
+
+/* =====================
+     MENTION
+     ===================== */
+.tiptap.ProseMirror {
+	[data-type="mention"] {
+		display: inline-block;
+		color: var(--tt-brand-color-500);
+	}
+}
+
+/* =====================
+     PLACEHOLDER
+     ===================== */
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child)::before {
+	content: "Write, type '/' for commands…";
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak:only-child):before {
+	pointer-events: none;
+	height: 0;
+	position: absolute;
+	font-style: italic;
+}
+
+.is-empty[data-placeholder]:has(> .ProseMirror-trailingBreak):before {
+	color: var(--placeholder-color);
+}
+
+/* =====================
+     LISTS
+     ===================== */
+.tiptap.ProseMirror {
+
+	/* Common list styles */
+	ol,
+	ul {
+		margin-top: 1.5em;
+		margin-bottom: 1.5em;
+		padding-left: 1.5em;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		ol,
+		ul {
+			margin-top: 0;
+			margin-bottom: 0;
+		}
+	}
+
+	li {
+		p {
+			margin-top: 0;
+		}
+	}
+
+	/* Ordered lists */
+	ol {
+		list-style: decimal;
+
+		ol {
+			list-style: lower-alpha;
+
+			ol {
+				list-style: lower-roman;
+			}
+		}
+	}
+
+	/* Unordered lists */
+	ul:not([data-type="taskList"]) {
+		list-style: disc;
+
+		ul {
+			list-style: circle;
+
+			ul {
+				list-style: disc;
+			}
+		}
+	}
+
+	/* Task lists */
+	ul[data-type="taskList"] {
+		padding-left: 0.25em;
+
+		li {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+
+			&:not(:has(> p:first-child)) {
+				list-style-type: none;
+			}
+
+			&[data-checked="true"] {
+				>div>p {
+					opacity: 0.5;
+					text-decoration: line-through;
+				}
+
+				>div>p span {
+					text-decoration: line-through;
+				}
+			}
+
+			label {
+				position: relative;
+				padding-top: 4px;
+				padding-right: 8px;
+
+				input[type="checkbox"] {
+					position: absolute;
+					opacity: 0;
+					width: 0;
+					height: 0;
+				}
+
+				span {
+					display: block;
+					width: 1em;
+					height: 1em;
+					border: 1px solid var(--tt-checklist-border-color);
+					border-radius: var(--tt-radius-xs, 0.25rem);
+					position: relative;
+					cursor: pointer;
+					background-color: var(--tt-checklist-bg-color);
+					transition:
+						background-color 80ms ease-out,
+						border-color 80ms ease-out;
+
+					&::before {
+						content: "";
+						position: absolute;
+						left: 50%;
+						top: 50%;
+						transform: translate(-50%, -50%);
+						width: 0.75em;
+						height: 0.75em;
+						background-color: var(--tt-checklist-check-icon-color);
+						opacity: 0;
+						-webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
+						mask: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.4142%204.58579C22.1953%205.36683%2022.1953%206.63317%2021.4142%207.41421L10.4142%2018.4142C9.63317%2019.1953%208.36684%2019.1953%207.58579%2018.4142L2.58579%2013.4142C1.80474%2012.6332%201.80474%2011.3668%202.58579%2010.5858C3.36683%209.80474%204.63317%209.80474%205.41421%2010.5858L9%2014.1716L18.5858%204.58579C19.3668%203.80474%2020.6332%203.80474%2021.4142%204.58579Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
+					}
+				}
+
+				input[type="checkbox"]:checked+span {
+					background: var(--tt-checklist-bg-active-color);
+					border-color: var(--tt-checklist-border-active-color);
+
+					&::before {
+						opacity: 1;
+					}
+				}
+			}
+
+			div {
+				flex: 1 1 0%;
+				min-width: 0;
+			}
+		}
+	}
+}
+
+/* =====================
+   CODE FORMATTING
+   ===================== */
+.tiptap.ProseMirror {
+
+	/* Inline code */
+	code {
+		background-color: var(--tt-inline-code-bg-color);
+		color: var(--tt-inline-code-text-color);
+		border: 1px solid var(--tt-inline-code-border-color);
+		font-family: "JetBrains Mono NL", monospace;
+		font-size: 0.875em;
+		line-height: 1.4;
+		border-radius: 6px/0.375rem;
+		padding: 0.1em 0.2em;
+	}
+
+	/* Code blocks */
+	pre {
+		background-color: var(--tt-codeblock-bg);
+		color: var(--tt-codeblock-text);
+		border: 1px solid var(--tt-codeblock-border);
+		margin-top: 1.5em;
+		margin-bottom: 1.5em;
+		padding: 1em;
+		font-size: 1rem;
+		border-radius: 6px/0.375rem;
+
+		white-space: pre;
+
+		code {
+			background-color: transparent;
+			border: none;
+			border-radius: 0;
+			-webkit-text-fill-color: inherit;
+			color: inherit;
+			white-space: inherit;
+		}
+
+		/* Code styling */
+    .hljs-comment,
+    .hljs-quote {
+      color: #616161;
+    }
+
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-attribute,
+    .hljs-tag,
+    .hljs-regexp,
+    .hljs-link,
+    .hljs-name,
+    .hljs-selector-id,
+    .hljs-selector-class {
+      color: #f98181;
+    }
+
+    .hljs-number,
+    .hljs-meta,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-literal,
+    .hljs-type,
+    .hljs-params {
+      color: #fbbc88;
+    }
+
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-bullet {
+      color: #b9f18d;
+    }
+
+    .hljs-title,
+    .hljs-section {
+      color: #faf594;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #70cff8;
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+
+    .hljs-strong {
+      font-weight: 700;
+    }
+	}
+}
+
+/* =====================
+   TABLE
+   ===================== */
+.tiptap.ProseMirror {
+	.table-wrapper {
+		overflow-x: auto;
+		width: fit-content;
+		max-width: 100%;
+		margin-top: 0.5rem;
+		margin-bottom: 1rem;
+	}
+
+	table {
+		border-collapse: collapse;
+		border-style: solid;
+		border-width: 1px;
+		border-color: var(--color-border);
+		width: 100%;
+		table-layout: fixed;
+	}
+
+	td,
+	th {
+		border-style: solid;
+		border-width: 1px;
+		border-color: var(--color-border);
+		min-width: 100px;
+		padding: 0.5rem;
+		text-align: left;
+		vertical-align: top;
+		box-sizing: border-box;
+		position: relative;
+		transition: background-color 0.3s ease;
+
+		&:first-of-type:not(a) {
+			margin-top: 0;
+		}
+
+		p {
+			margin: 0 !important;
+
+			&+p {
+				margin-top: 0.75rem !important;
+			}
+		}
+
+		>* {
+			margin-bottom: 0;
+		}
+	}
+
+	th {
+		font-weight: 500;
+		text-align: start;
+	}
+
+	.column-resize-handle {
+		background-color: var(--tt-resize-handle-color);
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 2px;
+		height: 100%;
+		z-index: 5;
+		pointer-events: none;
+	}
+
+	.selectedCell {
+		border-style: double;
+		border-color: var(--tt-selection-color-border);
+		background-color: var(--tt-selection-color);
+	}
+
+	/** Grip Column, Cell Column */
+	.grip-column,
+	.grip-row {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		z-index: 10;
+		cursor: pointer;
+		background-color: rgba(0, 0, 0, .05);
+	}
+
+	.grip-column {
+		width: calc(100% - 1px);
+		border-left-width: 1px;
+		border-left-color: rgba(0, 0, 0, .2);
+		height: .75rem;
+		left: 0;
+		margin-left: -1px;
+		top: -.75rem;
+
+		&:hover,
+		&.selected {
+			&::before {
+				content: '';
+				width: .625rem;
+			}
+		}
+
+		&:hover {
+			background-color: rgba(0, 0, 0, .1);
+
+			&::before {
+				border-bottom-width: 2px;
+				border-style: dotted;
+				border-color: rgba(0, 0, 0, .60);
+			}
+		}
+
+		&.first {
+			border-color: transparent;
+			border-top-left-radius: .125rem;
+		}
+
+		&.last {
+			border-top-right-radius: .125rem;
+		}
+
+		&.selected {
+			--tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+			--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+			background-color: rgba(0, 0, 0, .30);
+			border-color: rgba(0, 0, 0, .30);
+			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+			&::before {
+				border-bottom-width: 2px;
+				border-style: dotted;
+			}
+		}
+	}
+
+	.grip-row {
+		height: calc(100% + 1px);
+		border-top-width: 1px;
+		border-color: rgba(0, 0, 0, .2);
+		left: -.75rem;
+		width: .75rem;
+		margin-top: -1px;
+		top: 0;
+
+		&:hover,
+		&.selected {
+			&::before {
+				content: '';
+				height: .625rem;
+			}
+		}
+
+		&:hover {
+			background-color: rgba(0, 0, 0, .1);
+
+			&::before {
+				border-left-width: 2px;
+				border-style: dotted;
+				border-color: rgba(0, 0, 0, .60);
+			}
+		}
+
+		&.first {
+			border-color: transparent;
+			border-top-left-radius: .125rem;
+		}
+
+		&.last {
+			border-bottom-left-radius: .125rem;
+		}
+
+		&.selected {
+			background-color: rgba(0, 0, 0, .30);
+			border-color: rgba(0, 0, 0, .30);
+			box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+
+			&::before {
+				border-left-width: 2px;
+			}
+		}
+	}
+
+	table {
+
+		tr[background="none"],
+		tr:not([background]) {
+			th {
+				background-color: var(--color-muted);
+			}
+		}
+	}
+
+	.table-controls {
+		position: absolute;
+	}
+
+	.table-wrapper .table-controls .columns-control,
+	.table-wrapper .table-controls .rows-control {
+		transition: opacity ease-in 100ms;
+		position: absolute;
+		z-index: 5;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.table-wrapper .table-controls .columns-control {
+		height: 20px;
+		transform: translateY(-50%);
+	}
+
+	.table-wrapper .table-controls .columns-control .columns-control-div {
+		color: white;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+		width: 30px;
+		height: 15px;
+	}
+
+	.table-wrapper .table-controls .rows-control {
+		width: 20px;
+		transform: translateX(-50%);
+		left: -8px;
+	}
+
+	.table-wrapper .table-controls .rows-control .rows-control-div {
+		color: white;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+		height: 30px;
+		width: 15px;
+	}
+
+	.table-wrapper .table-controls .rows-control-div,
+	.table-wrapper .table-controls .columns-control-div {
+		border: 1px solid var(--color-border);
+		background-color: var(--color-muted);
+		box-shadow: var(--shadow-sm);
+		border-radius: 4px;
+		background-size: 1.25rem;
+		background-repeat: no-repeat;
+		background-position: center;
+		transition:
+			transform ease-out 100ms,
+			background-color ease-out 100ms;
+		outline: none;
+		cursor: pointer;
+	}
+
+	.resize-cursor .table-wrapper .table-controls .rows-control,
+	.table-wrapper.controls--disabled .table-controls .rows-control,
+	.resize-cursor .table-wrapper .table-controls .columns-control,
+	.table-wrapper.controls--disabled .table-controls .columns-control {
+		opacity: 0;
+		pointer-events: none;
+	}
+}