@spacemade/ui 0.0.1

package/src/sass/components/_rich-content.scss

@@ -0,0 +1,531 @@
+/*
+ * Legacy rich-content styles for existing HTML entries.
+ * Keep these selectors to preserve rendering of previously saved content.
+ */
+
+:root {
+	/* Overrides the border radius setting in the theme. */
+	--ck-border-radius: 12px !important;
+
+	/* Overrides the default font size in the theme. */
+	--ck-font-size-base: 14px !important;
+
+	/* -- Overrides generic colors. ------------------------------------------------------------- */
+	--ck-color-focus-border: hsl(209, 85%, 50%) !important;
+
+	--ck-drop-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+
+	--ck-color-toolbar-border: hsl(240, 4%, 89%) !important;
+	--ck-color-toolbar-border: hsl(240, 4%, 89%) !important;
+
+	/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+	--ck-color-button-action-background: hsl(168, 76%, 42%) !important;
+	--ck-color-button-action-hover-background: hsl(168, 76%, 38%) !important;
+	--ck-color-button-action-active-background: hsl(168, 76%, 36%) !important;
+	--ck-color-button-action-active-shadow: hsl(168, 75%, 34%) !important;
+	--ck-color-button-action-disabled-background: hsl(168, 76%, 42%) !important;
+	--ck-color-button-action-text: var(--ck-custom-white) !important;
+
+	--ck-color-button-save: hsl(98, 49%, 51%) !important;
+	--ck-color-button-cancel: hsl(359, 91%, 63%) !important;
+
+	/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+	--ck-color-list-background: var(--ck-custom-background) !important;
+	--ck-color-list-button-hover-background: var(
+		--ck-color-base-foreground
+	) !important;
+	--ck-color-list-button-on-background: var(--ck-color-base-active) !important;
+	--ck-color-list-button-on-background-focus: var(
+		--ck-color-base-active-focus
+	) !important;
+	--ck-color-list-button-on-text: var(--ck-color-base-background) !important;
+
+
+	--ck-color-widget-blurred-border: hsl(0, 0%, 87%) !important;
+	--ck-color-widget-hover-border: hsl(43, 100%, 68%) !important;
+	--ck-color-widget-editable-focus-background: var(
+		--ck-custom-white
+	) !important;
+
+
+	--ck-color-link-default: hsl(190, 100%, 75%) !important;
+
+	--ck-color-image-caption-background: hsl(0, 0%, 97%);
+	--ck-color-image-caption-text: hsl(0, 0%, 20%);
+	--ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+	--ck-color-mention-text: hsl(341, 100%, 30%);
+	--ck-color-table-caption-background: hsl(0, 0%, 97%);
+	--ck-color-table-caption-text: hsl(0, 0%, 20%);
+	--ck-highlight-marker-blue: hsl(201, 97%, 72%);
+	--ck-highlight-marker-green: hsl(120, 93%, 68%);
+	--ck-highlight-marker-pink: hsl(345, 96%, 73%);
+	--ck-highlight-marker-yellow: hsl(60, 97%, 73%);
+	--ck-highlight-pen-green: hsl(112, 100%, 27%);
+	--ck-highlight-pen-red: hsl(0, 85%, 49%);
+	--ck-image-style-spacing: 1.5em;
+	--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+	--ck-todo-list-checkmark-size: 16px;
+}
+
+.ck-content {
+	h2:not(.ad-item-header),
+	h3:not(.ad-item-header) {
+		margin-top: 3rem;
+	}
+}
+
+.ck-content img {
+	max-width: 100% !important;
+}
+.ck-content {
+	ul {
+		li {
+			margin-bottom: 1rem;
+		}
+	}
+}
+
+.ck-content figcaption {
+	text-align: center;
+}
+
+.ck-content a {
+	text-decoration: none;
+	outline: 0;
+	color: #3482c6;
+	&:hover {
+		color: #0056b3;
+	}
+}
+
+.ck-character-grid {
+	padding: 0.25rem 0 0.25rem 0.25rem !important;
+	.ck-character-grid__tiles {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		max-height: 200px;
+		overflow: auto;
+
+		.ck-button {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+}
+
+.ck-character-info {
+	padding: var(--ck-spacing-small) var(--ck-spacing-large) !important;
+}
+
+.ck .ck-button {
+	height: auto;
+}
+
+.ck-dropdown__panel {
+	border: 0 !important;
+}
+
+.ck.ck-editor__main {
+	> .ck-editor__editable {
+		&.ck-focused {
+			@include InputActiveState('primary');
+		}
+		&:not(.ck-focused) {
+			border-color: theme-color('light-gray') !important;
+		}
+	}
+}
+
+.ck-source-editing-area {
+	min-height: 500px;
+	overflow: initial !important;
+
+	textarea {
+		border-color: theme-color('light-gray') !important;
+		&:focus {
+			@include InputActiveState('primary');
+		}
+	}
+}
+
+.ck-dropdown__panel {
+	.ck-toolbar {
+		border-bottom-left-radius: var(--ck-border-radius) !important;
+		border-bottom-right-radius: var(--ck-border-radius) !important;
+	}
+}
+
+.ck-content code {
+	background-color: hsla(0, 0%, 78%, 0.3);
+	padding: 0.15em;
+	border-radius: 2px;
+}
+.ck-content .text-tiny {
+	font-size: 0.7em;
+}
+.ck-content .text-small {
+	font-size: 0.85em;
+}
+.ck-content .text-big {
+	font-size: 1.4em;
+}
+.ck-content .text-huge {
+	font-size: 1.8em;
+}
+.ck-content blockquote {
+	overflow: hidden;
+	padding-right: 1.5em;
+	padding-left: 1.5em;
+	margin-left: 0;
+	margin-right: 0;
+	font-style: italic;
+	border-left: solid 5px hsl(0, 0%, 80%);
+}
+.ck-content[dir='rtl'] blockquote {
+	border-left: 0;
+	border-right: solid 5px hsl(0, 0%, 80%);
+}
+.ck-editor mark,
+.ck-content mark {
+	line-height: 1.5;
+}
+.ck-content .marker-yellow {
+	background-color: var(--ck-highlight-marker-yellow);
+}
+.ck-content .marker-green {
+	background-color: var(--ck-highlight-marker-green);
+}
+.ck-content .marker-pink {
+	background-color: var(--ck-highlight-marker-pink);
+}
+.ck-content .marker-blue {
+	background-color: var(--ck-highlight-marker-blue);
+}
+.ck-content .pen-red {
+	color: var(--ck-highlight-pen-red);
+	background-color: transparent;
+}
+.ck-content .pen-green {
+	color: var(--ck-highlight-pen-green);
+	background-color: transparent;
+}
+.ck-content .image {
+	display: table;
+	clear: both;
+	text-align: center;
+	margin: 0.9em auto;
+	min-width: 50px;
+}
+.ck-content .image img {
+	display: block;
+	margin: 0 auto;
+	max-width: 100%;
+	min-width: 100%;
+}
+.ck-content .image-inline {
+	/*
+	 * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
+	 * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
+	 * This strange behavior does not happen with inline-flex.
+	 */
+	display: inline-flex;
+	max-width: 100%;
+	align-items: flex-start;
+}
+.ck-content .image-inline picture {
+	display: flex;
+}
+.ck-content .image-inline picture,
+.ck-content .image-inline img {
+	flex-grow: 1;
+	flex-shrink: 1;
+	max-width: 100%;
+}
+.ck-content .image > figcaption {
+	display: table-caption;
+	caption-side: bottom;
+	word-break: break-word;
+	color: var(--ck-color-image-caption-text);
+	background-color: var(--ck-color-image-caption-background);
+	padding: 0.6em;
+	font-size: 0.75em;
+	outline-offset: -1px;
+}
+.ck-content .image.image_resized {
+	max-width: 100%;
+	display: block;
+	box-sizing: border-box;
+}
+.ck-content .image.image_resized img {
+	width: 100%;
+}
+.ck-content .image.image_resized > figcaption {
+	display: block;
+}
+.ck-content .image-style-block-align-left,
+.ck-content .image-style-block-align-right {
+	max-width: calc(100% - var(--ck-image-style-spacing));
+}
+.ck-content .image-style-align-left,
+.ck-content .image-style-align-right {
+	clear: none;
+}
+.ck-content .image-style-side {
+	float: right;
+	margin-left: var(--ck-image-style-spacing);
+	max-width: 50%;
+}
+.ck-content .image-style-align-left {
+	float: left;
+	margin-right: var(--ck-image-style-spacing);
+}
+.ck-content .image-style-align-center {
+	margin-left: auto;
+	margin-right: auto;
+}
+.ck-content .image-style-align-right {
+	float: right;
+	margin-left: var(--ck-image-style-spacing);
+}
+.ck-content .image-style-block-align-right {
+	margin-right: 0;
+	margin-left: auto;
+}
+.ck-content .image-style-block-align-left {
+	margin-left: 0;
+	margin-right: auto;
+}
+.ck-content p + .image-style-align-left,
+.ck-content p + .image-style-align-right,
+.ck-content p + .image-style-side {
+	margin-top: 0;
+}
+.ck-content .image-inline.image-style-align-left,
+.ck-content .image-inline.image-style-align-right {
+	margin-top: var(--ck-inline-image-style-spacing);
+	margin-bottom: var(--ck-inline-image-style-spacing);
+}
+.ck-content .image-inline.image-style-align-left {
+	margin-right: var(--ck-inline-image-style-spacing);
+}
+.ck-content .image-inline.image-style-align-right {
+	margin-left: var(--ck-inline-image-style-spacing);
+}
+.ck-content span[lang] {
+	font-style: italic;
+}
+.ck-content .todo-list {
+	list-style: none;
+}
+.ck-content .todo-list li {
+	margin-bottom: 5px;
+}
+.ck-content .todo-list li .todo-list {
+	margin-top: 5px;
+}
+.ck-content .todo-list .todo-list__label > input {
+	-webkit-appearance: none;
+	display: inline-block;
+	position: relative;
+	width: var(--ck-todo-list-checkmark-size);
+	height: var(--ck-todo-list-checkmark-size);
+	vertical-align: middle;
+	border: 0;
+	left: -25px;
+	margin-right: -15px;
+	right: 0;
+	margin-left: 0;
+}
+.ck-content .todo-list .todo-list__label > input::before {
+	display: block;
+	position: absolute;
+	box-sizing: border-box;
+	content: '';
+	width: 100%;
+	height: 100%;
+	border: 1px solid hsl(0, 0%, 20%);
+	border-radius: 2px;
+	transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background,
+		250ms ease-in-out border;
+}
+.ck-content .todo-list .todo-list__label > input::after {
+	display: block;
+	position: absolute;
+	box-sizing: content-box;
+	pointer-events: none;
+	content: '';
+	left: calc(var(--ck-todo-list-checkmark-size) / 3);
+	top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
+	width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
+	height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
+	border-style: solid;
+	border-color: transparent;
+	border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8)
+		calc(var(--ck-todo-list-checkmark-size) / 8) 0;
+	transform: rotate(45deg);
+}
+.ck-content .todo-list .todo-list__label > input[checked]::before {
+	background: hsl(126, 64%, 41%);
+	border-color: hsl(126, 64%, 41%);
+}
+.ck-content .todo-list .todo-list__label > input[checked]::after {
+	border-color: hsl(0, 0%, 100%);
+}
+.ck-content .todo-list .todo-list__label .todo-list__label__description {
+	vertical-align: middle;
+}
+.ck-content .media {
+	clear: both;
+	margin: 0.9em 0;
+	display: block;
+	min-width: 15em;
+}
+.ck-content .page-break {
+	position: relative;
+	clear: both;
+	padding: 5px 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.ck-content .page-break::after {
+	content: '';
+	position: absolute;
+	border-bottom: 2px dashed hsl(0, 0%, 77%);
+	width: 100%;
+}
+.ck-content .page-break__label {
+	position: relative;
+	z-index: 1;
+	padding: 0.3em 0.6em;
+	display: block;
+	text-transform: uppercase;
+	border: 1px solid hsl(0, 0%, 77%);
+	border-radius: 2px;
+	font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+	font-size: 0.75em;
+	font-weight: bold;
+	color: hsl(0, 0%, 20%);
+	background: hsl(0, 0%, 100%);
+	box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.ck-content:not(.ck-editor__editable) table {
+	color: theme-color('dark-900');
+}
+.ck-content table {
+	margin: 0.9em auto;
+	display: table;
+}
+.ck-content table {
+	border-collapse: collapse;
+	border-spacing: 0;
+	width: 100%;
+	height: 100%;
+	border: 1px double theme-color('light');
+}
+.ck-content table td,
+.ck-content table th {
+	min-width: 2em;
+	padding: 0.4em;
+	border: 1px solid theme-color('light');
+}
+.ck-content table th {
+	font-weight: bold;
+	background: theme-color('white');
+}
+.ck-content[dir='rtl'] table th {
+	text-align: right;
+}
+.ck-content[dir='ltr'] table th {
+	text-align: left;
+}
+.ck-content table .ck-table-resized {
+	table-layout: fixed;
+}
+.ck-content table {
+	overflow: hidden;
+}
+.ck-content table td,
+.ck-content table th {
+	position: relative;
+}
+.ck-content table > figcaption {
+	display: table-caption;
+	caption-side: top;
+	word-break: break-word;
+	text-align: center;
+	color: var(--ck-color-table-caption-text);
+	background-color: var(--ck-color-table-caption-background);
+	padding: 0.6em;
+	font-size: 0.75em;
+	outline-offset: -1px;
+}
+.ck-content pre {
+	padding: 1em;
+	color: hsl(0, 0%, 20.8%);
+	background: #f5f2f0;
+	border-radius: 2px;
+	text-align: left;
+	direction: ltr;
+	tab-size: 4;
+	white-space: pre-wrap;
+	font-style: normal;
+	min-width: 200px;
+}
+.ck-content pre code {
+	background: unset;
+	padding: 0;
+	border-radius: 0;
+}
+.ck-content hr {
+	margin: 15px 0;
+	height: 4px;
+	background: hsl(0, 0%, 87%);
+	border: 0;
+}
+.ck-content ol {
+	list-style-type: decimal;
+}
+.ck-content ol ol {
+	list-style-type: lower-latin;
+}
+.ck-content ol ol ol {
+	list-style-type: lower-roman;
+}
+.ck-content ol ol ol ol {
+	list-style-type: upper-latin;
+}
+.ck-content ol ol ol ol ol {
+	list-style-type: upper-roman;
+}
+.ck-content ul {
+	list-style-type: circle;
+}
+.ck-content ul ul {
+	list-style-type: disc;
+}
+.ck-content ul ul ul {
+	list-style-type: square;
+}
+.ck-content ul ul ul ul {
+	list-style-type: square;
+}
+.ck-content .mention {
+	background: var(--ck-color-mention-background);
+	color: var(--ck-color-mention-text);
+}
+@media print {
+	.ck-content .page-break {
+		padding: 0;
+	}
+	.ck-content .page-break::after {
+		display: none;
+	}
+}

package/src/sass/components/_spinner.scss

@@ -0,0 +1,71 @@
+.spinner-in-front {
+	z-index: 110;
+}
+
+.spinner {
+  border: 3px solid rgba(theme-color('primary'), 0.2);
+  border-top-color: theme-color('primary');
+  border-radius: 50%;
+  width: 3em;
+  height: 3em;
+  animation: spin 1s linear infinite;
+
+	&-metaverse {
+		--line-width: 5px;
+		width: 90px;
+		height: 90px;
+		border: var(--line-width) solid transparent;
+		border-top-color: theme-color('secondary');
+		border-radius: 100%;
+		-webkit-animation: spin 2s linear infinite;
+		animation: spin 1s linear infinite;
+
+		&:before {
+			content:"";
+			position: absolute;
+			top: 4px;
+			left: 4px;
+			right: 4px;
+			bottom: 4px;
+			border:var(--line-width) solid transparent;
+			border-top-color: theme-color('purple');
+			border-radius: 100%;
+			-webkit-animation: spin 3s linear infinite;
+			animation: spin 3s linear infinite;
+		}
+
+		&:after {
+			content:"";
+			position: absolute;
+			top: 14px;
+			left: 14px;
+			right: 14px;
+			bottom: 14px;
+			border: var(--line-width) solid transparent;
+			border-top-color: theme-color('light-blue');
+			border-radius: 100%;
+			-webkit-animation: spin 1.5s linear infinite;
+			animation: spin 1.5s linear infinite;
+		}
+	}
+}
+
+@each $color, $value in $theme-colors {
+	.spinner-#{$color} {
+		border: 3px solid rgba(theme-color($color), 0.3);
+		border-top-color: theme-color($color);
+	}
+}
+
+@keyframes spin {
+  0%   {
+    -webkit-transform: rotate(0deg);
+		-ms-transform: rotate(0deg);
+		transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+		-ms-transform: rotate(360deg);
+		transform: rotate(360deg);
+  }
+}

package/src/sass/components/_swagger.scss

@@ -0,0 +1,7 @@
+.swagger-container {
+	.swagger-ui {
+		.wrapper {
+			padding: 0;
+		}
+	}
+}

package/src/sass/components/_swiper.scss

@@ -0,0 +1,16 @@
+.swiper {
+	.swiper-pagination {
+		.swiper-pagination-bullet {
+			margin: 0 0.5rem !important;
+			width: 14px;
+			height: 14px;
+			background: transparent;
+			border: 1px solid theme-color('black');
+			opacity: 1;
+
+			&.swiper-pagination-bullet-active {
+				background-color: theme-color('black');
+			}
+		}
+	}
+}

package/src/sass/components/_switch.scss

@@ -0,0 +1,46 @@
+$switch-track-width: 2.7rem;
+$switch-track-height: 1.2rem;
+$switch-track-diff: calc($switch-track-width - $switch-track-height);
+$switch-thumb-x: $switch-track-diff;
+
+.chakra-switch {
+	display: inline-block;
+	position: relative;
+	vertical-align: middle;
+	line-height: 0;
+
+	.chakra-switch__track {
+		display: inline-flex;
+		flex-shrink: 0;
+		-webkit-box-pack: start;
+		justify-content: flex-start;
+		box-sizing: content-box;
+		cursor: pointer;
+		border-radius: 9999px;
+		padding: 2px;
+		width: $switch-track-width;
+		height: $switch-track-height;
+		transition-property: background-color, border-color, color, fill, stroke,
+			opacity, box-shadow, transform;
+		transition-duration: 150ms;
+		background-color: theme-color('lighter-gray');
+		border: 1px solid;
+		border-color: theme-color('light');
+		&[data-checked] {
+			background-color: theme-color('primary');
+			border-color: theme-color('primary');
+		}
+
+		.chakra-switch__thumb {
+			background: theme-color('white');
+			transition-property: transform;
+			transition-duration: 200ms;
+			border-radius: inherit;
+			width: $switch-track-diff - 0.3rem;
+			height: $switch-track-height;
+			&[data-checked] {
+				transform: translateX($switch-thumb-x);
+			}
+		}
+	}
+}

package/src/sass/components/_table.scss

@@ -0,0 +1,39 @@
+.table {
+	color: theme-color('dark');
+	background-color: theme-color('white');
+
+	& > :not(:first-child) {
+		border: 0;
+		border-color: $border-color;
+	}
+
+	th,
+	td {
+		min-width: 100px;
+	}
+
+	thead {
+		tr {
+			th {
+				background: theme-color('white');
+				position: sticky;
+				top: 0;
+				padding: 0.8rem 0.5rem;
+			}
+		}
+	}
+
+	tbody {
+		tr {
+			&.pointer {
+				&:hover {
+					background-color: theme-color('background');
+				}
+			}
+			td {
+				padding: 1rem 0.5rem;
+				vertical-align: middle;
+			}
+		}
+	}
+}