geo-milev · NikolaGanchev · Sep 27, 2023 · Sep 27, 2023 · Sep 27, 2023 · Sep 28, 2023
diff --git a/src/lib/ArticlePreview.svelte b/src/lib/ArticlePreview.svelte
@@ -25,7 +25,7 @@
 	.container {
 		width: 100%;
 		height: 100%;
-		background-color: #FFFFFF;
+		background-color: var(--secondary);
         position: relative;
 		display: flex;
 		flex-direction: column;
@@ -53,7 +53,7 @@
         font-size: 20px;
         line-height: 24px;
         margin: 0 0 0.5rem;
-        color: #000000;
+        color: var(--secondary-text);
         text-overflow: ellipsis;
         overflow: hidden;
         display: -webkit-box;
@@ -69,7 +69,7 @@
         font-size: 16px;
         line-height: 18px;
 		margin: 0;
-        color: #000000;
+        color: var(--secondary-text);
 		text-overflow: ellipsis;
         overflow: hidden;
 		display: -webkit-box;

diff --git a/src/lib/BigArticlePreview.svelte b/src/lib/BigArticlePreview.svelte
@@ -43,7 +43,7 @@
 	}
 
 	.preview-image.logo {
-		background-color: #FFFFFF;
+		background-color: var(--secondary);
 	}
 
 	.content {
@@ -68,15 +68,15 @@
         font-weight: 700;
         font-size: 16px;
         line-height: 18px;
-        color: #FFFFFF;
+        color: var(--white);
 		margin-bottom: 0.5rem;
 	}
 
 	.separator {
 		display: block;
 		height: 2px;
 		width: 100%;
-		background-color: #7D0B09;
+		background-color: var(--primary);
 	}
 
 	h2 {
@@ -85,7 +85,7 @@
         font-weight: 700;
         font-size: 20px;
         line-height: 23px;
-        color: #FFFFFF;
+        color: var(--primary-text);
 		margin: 0;
 	}
 

diff --git a/src/lib/BlockRenderer.svelte b/src/lib/BlockRenderer.svelte
@@ -12,14 +12,6 @@
 	let formulaResults: Map<string, string> = new Map<string, string>()
 
 	export let blocks;
-	export let buttonColor = "#FFFFFF";
-	export let textColor = "#FFFFFF"
-	export let headerLineColor = "#FFFFFF"
-	export let buttonHoverTextColor = "#000000"
-	export let documentViewerBackgroundColor = "#4F0D0D"
-	export let documentViewerHoverColor = "#FFFFFF"
-	export let documentViewerTextColor = "#FFFFFF"
-	export let documentViewerTextColorNegative = "#FFFFFF"
 
 	let loaded = false;
 
@@ -31,14 +23,10 @@
 {#each blocks as block}
 	{#if block.blockType === "rich-text"}
 		<RichText richText="{parseRichText(block.importantInfo)}"
-				  isCentered="{block.isCentered}"
-				  buttonColor={buttonColor}
-				  textColor={textColor}
-				  headerLineColor={headerLineColor}
-				  buttonHoverTextColor="{buttonHoverTextColor}" />
+				  isCentered="{block.isCentered}" />
 	{/if}
 	{#if block.blockType === "admission-requirements"}
-		<div class="table-wrapper" style="--text-color: {textColor}">
+		<div class="table-wrapper">
 			<table>
 				<thead>
 				<tr>
@@ -60,7 +48,7 @@
 		</div>
 	{/if}
 	{#if block.blockType === "table"}
-		<div class="table-wrapper" style="--text-color: {textColor}">
+		<div class="table-wrapper">
 			<table>
 				<thead>
 					<tr>
@@ -85,20 +73,16 @@
 				 alt="{block.image.alt}"
 				 loading="lazy"/>
 			<div class="block-renderer">
-				<BlockRenderer blocks="{block.content}"
-							   buttonColor={buttonColor}
-							   textColor={textColor}
-							   headerLineColor={headerLineColor}
-							   buttonHoverTextColor = {buttonHoverTextColor}/>
+				<BlockRenderer blocks="{block.content}"/>
 
 			</div>
 		</div>
 	{/if}
 	{#if block.blockType === "gallery"}
-		<Gallery images="{block.images}" arrowColor={textColor}></Gallery>
+		<Gallery images="{block.images}"></Gallery>
 	{/if}
 	{#if block.blockType === "formula"}
-		<div class="formula" style="--text-color: {textColor}">
+		<div class="formula">
 			<form method="POST" on:submit|preventDefault={async function handleSubmit(event) {
 									const data = new FormData(event.target);
 									const formVariables = {}
@@ -161,34 +145,26 @@
 					allowfullscreen></iframe>
 			</div>
 			<div class="block-renderer">
-				<BlockRenderer blocks="{block.content}"
-							   buttonColor={buttonColor}
-							   textColor={textColor}
-							   headerLineColor={headerLineColor}
-							   buttonHoverTextColor = {buttonHoverTextColor}/>
+				<BlockRenderer blocks="{block.content}" />
 			</div>
 		</div>
 	{/if}
 	{#if block.blockType === "file-viewer"}
+		<div class="document-viewer">
 			<DocumentViewer documents="{block.files}" autoSelect="{block.autoSelect}"
 				header="{block.title}"
 				getNext="{() => { return }}"
 				sort="{documentViewerSorts[block.sort]}"
-				hasSearch="{block.hasSearch}"
-				backgroundColor = "{documentViewerBackgroundColor}"
-				textColor = "{documentViewerTextColor}"
-				textColorNegative = "{documentViewerTextColorNegative}"
-				hoverColor = "{documentViewerHoverColor}"
-				buttonTextHoverColor = "{buttonHoverTextColor}"
-				buttonHoverColor = "{buttonColor}"></DocumentViewer>
+				hasSearch="{block.hasSearch}"></DocumentViewer>
+		</div>
 	{/if}
 {/each}
 
 <style>
     table {
 		width: 100%;
         border-collapse: collapse;
-        border: 3px solid #FFFFFF;
+        border: 3px solid var(--background-text);
     }
 
     thead td {
@@ -198,7 +174,7 @@
         font-size: 22px;
         line-height: 33px;
         text-align: center;
-        color: var(--text-color);
+        color: var(--background-text);
     }
 
     td {
@@ -209,8 +185,8 @@
         font-size: 16px;
         line-height: 20px;
         text-align: center;
-        color: var(--text-color);
-        border: 3px solid var(--text-color);
+        color: var(--background-text);
+        border: 3px solid var(--background-text);
     }
 
     .table-wrapper {
@@ -245,7 +221,7 @@
         font-weight: 500;
         font-size: 28px;
         line-height: 34px;
-        color: var(--text-color);
+        color: var(--background-text);
     }
 
     .formula .result-text {
@@ -254,7 +230,7 @@
         font-weight: 400;
         font-size: 22px;
         line-height: 28px;
-        color: var(--text-color);
+        color: var(--background-text);
     }
 
     .formula form .variable-pair {
@@ -288,7 +264,7 @@
         font-weight: 400;
         font-size: 16px;
         line-height: 19px;
-        color: var(--text-color);
+        color: var(--background-text);
     }
 
     .formula form input {

diff --git a/src/lib/BookPreview.svelte b/src/lib/BookPreview.svelte
@@ -47,8 +47,8 @@
 		flex-direction: column;
 		justify-content: space-between;
 		align-items: center;
-		background-color: #FFFFFF;
-		padding: 8px;
+		background-color: var(--secondary);
+        padding: 8px;
 		box-sizing: border-box;
 	}
 
@@ -69,7 +69,7 @@
         font-weight: 400;
         font-size: 40px;
         line-height: 45px;
-        color: #D9D9D9;
+        color: var(--secondary-light-text);
 		transform: rotate(-45deg);
 		user-select: none;
     }
@@ -87,7 +87,7 @@
 	.line {
 		width: 50%;
 		height: 1px;
-		background-color: #000000;
+		background-color: var(--secondary-text);
 	}
 
 	h4 {
@@ -96,7 +96,7 @@
         font-weight: 700;
         font-size: 20px;
         line-height: 23px;
-        color: #000000;
+        color: var(--secondary-text);
 		text-align: center;
 		margin: 0;
 		width: 100%;
@@ -108,7 +108,7 @@
         font-weight: 400;
         font-size: 16px;
         line-height: 19px;
-        color: #000000;
+        color: var(--secondary-text);
     }
 
 	.year {
@@ -118,7 +118,7 @@
         font-size: 16px;
         line-height: 19px;
 		text-align: end;
-        color: #000000;
+        color: var(--secondary-text);
 		width: 100%;
 	}
 </style>
diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
@@ -15,10 +15,10 @@
 
 <style>
 	button {
-		background-color: #7D0B09;
-		border: 2px solid #7d0b09;
+		background-color: var(--primary);
+		border: 2px solid var(--primary);
         padding: 0.5rem 3rem;
-        color: #FFFFFF;
+        color: var(--primary-text);
 		text-transform: uppercase;
         font-family: 'Roboto', serif;
         font-style: normal;
@@ -31,8 +31,7 @@
     }
 
 	button:hover {
-		color: #7d0b09;
-		background-color: #FFFFFF;
-        border: 2px solid #7d0b09;
+		color: var(--secondary-text);
+		background-color: var(--secondary);
 	}
 </style>
diff --git a/src/lib/Carousel.svelte b/src/lib/Carousel.svelte
@@ -19,7 +19,6 @@
 	export let component;
 	export let componentHeight;
 	export let componentWidth;
-	export let arrowFill = "#FFFFFF";
 
 	const scrollConfig: ScrollIntoViewOptions = {
 		behavior: 'smooth',
@@ -127,7 +126,7 @@
 	}
 </script>
 
-<div class="container" style="--component-width: {componentWidth}; --component-height: {componentHeight}; --arrow-fill: {arrowFill}">
+<div class="container" style="--component-width: {componentWidth}; --component-height: {componentHeight}">
 	<button on:click={scrollLeft} aria-label="лява стрелка" class="arrow-button big-screen" disabled="{selectedGroupIndex === 0}">
 		<ArrowLeft />
 	</button>
@@ -248,13 +247,10 @@
 		background-color: rgba(0, 0, 0, 0);
 		border: none;
 		cursor: pointer;
+		fill: var(--background-text);
 	}
 
-	.arrow-button {
-        fill: var(--arrow-fill);
+	.arrow-button:disabled {
+        fill: var(--background-disabled);
 	}
-
-    .arrow-button:disabled :global(path) {
-        fill: #B3B3B3;
-    }
 </style>
diff --git a/src/lib/Close.svelte b/src/lib/Close.svelte
@@ -1,3 +1,3 @@
-<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M0.851624 0.851624C1.12121 0.581652 1.44138 0.367476 1.79381 0.221346C2.14625 0.0752166 2.52403 0 2.90556 0C3.28708 0 3.66487 0.0752166 4.0173 0.221346C4.36973 0.367476 4.6899 0.581652 4.95949 0.851624L15.5004 11.3887L26.0414 0.851624C26.3111 0.581898 26.6313 0.367939 26.9837 0.221964C27.3361 0.0759895 27.7138 0.000857437 28.0953 0.000857429C28.4767 0.000857422 28.8545 0.0759895 29.2069 0.221964C29.5593 0.367939 29.8795 0.581898 30.1492 0.851624C30.419 1.12135 30.6329 1.44156 30.7789 1.79398C30.9249 2.14639 31 2.52411 31 2.90556C31 3.28701 30.9249 3.66472 30.7789 4.01714C30.6329 4.36955 30.419 4.68976 30.1492 4.95949L19.6122 15.5004L30.1492 26.0414C30.694 26.5861 31 27.3249 31 28.0953C31 28.8657 30.694 29.6045 30.1492 30.1492C29.6045 30.694 28.8657 31 28.0953 31C27.3249 31 26.5861 30.694 26.0414 30.1492L15.5004 19.6122L4.95949 30.1492C4.41475 30.694 3.67593 31 2.90556 31C2.13518 31 1.39636 30.694 0.851624 30.1492C0.306887 29.6045 0.000857429 28.8657 0.000857429 28.0953C0.000857429 27.3249 0.306887 26.5861 0.851624 26.0414L11.3887 15.5004L0.851624 4.95949C0.581652 4.6899 0.367476 4.36973 0.221346 4.0173C0.0752166 3.66487 0 3.28708 0 2.90556C0 2.52403 0.0752166 2.14625 0.221346 1.79381C0.367476 1.44138 0.581652 1.12121 0.851624 0.851624Z" fill="white"/>
-</svg>
+<svg width="31" height="31" viewBox="0 0 31 31" xmlns="http://www.w3.org/2000/svg">
+	<path d="M0.851624 0.851624C1.12121 0.581652 1.44138 0.367476 1.79381 0.221346C2.14625 0.0752166 2.52403 0 2.90556 0C3.28708 0 3.66487 0.0752166 4.0173 0.221346C4.36973 0.367476 4.6899 0.581652 4.95949 0.851624L15.5004 11.3887L26.0414 0.851624C26.3111 0.581898 26.6313 0.367939 26.9837 0.221964C27.3361 0.0759895 27.7138 0.000857437 28.0953 0.000857429C28.4767 0.000857422 28.8545 0.0759895 29.2069 0.221964C29.5593 0.367939 29.8795 0.581898 30.1492 0.851624C30.419 1.12135 30.6329 1.44156 30.7789 1.79398C30.9249 2.14639 31 2.52411 31 2.90556C31 3.28701 30.9249 3.66472 30.7789 4.01714C30.6329 4.36955 30.419 4.68976 30.1492 4.95949L19.6122 15.5004L30.1492 26.0414C30.694 26.5861 31 27.3249 31 28.0953C31 28.8657 30.694 29.6045 30.1492 30.1492C29.6045 30.694 28.8657 31 28.0953 31C27.3249 31 26.5861 30.694 26.0414 30.1492L15.5004 19.6122L4.95949 30.1492C4.41475 30.694 3.67593 31 2.90556 31C2.13518 31 1.39636 30.694 0.851624 30.1492C0.306887 29.6045 0.000857429 28.8657 0.000857429 28.0953C0.000857429 27.3249 0.306887 26.5861 0.851624 26.0414L11.3887 15.5004L0.851624 4.95949C0.581652 4.6899 0.367476 4.36973 0.221346 4.0173C0.0752166 3.66487 0 3.28708 0 2.90556C0 2.52403 0.0752166 2.14625 0.221346 1.79381C0.367476 1.44138 0.581652 1.12121 0.851624 0.851624Z" />
+</svg>
diff --git a/src/lib/Curve.svelte b/src/lib/Curve.svelte
@@ -1,15 +1,12 @@
-<script>
-	export let fill = "#151515";
-</script>
-
-<svg viewBox="0 0 298 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L0 17H297.979V0.705564C275.605 6.59721 217.895 10.7921 150.231 10.7921C79.8958 10.7921 20.3163 6.25946 0 0Z" fill="{fill}"/>
+<svg viewBox="0 0 298 17" xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L0 17H297.979V0.705564C275.605 6.59721 217.895 10.7921 150.231 10.7921C79.8958 10.7921 20.3163 6.25946 0 0Z"/>
 </svg>
 
 
 <style>
 	svg {
 		width: 100%;
 		height: 100%;
+		fill: var(--background)
 	}
 </style>