@ozdao/prometheus-framework 0.2.29 → 0.2.31

package/src/styles/base/all.scss

@@ -1,15 +1,39 @@
 @import './backgrounds';
 @import './borders';
-@import './border-radius';
-@import './cursors';
-@import './hovers';
-@import './positions';
 @import './scrolling';
-@import './shadows';
-@import './transitions';
+@import './shadow_transitions_hover_refactor';
+
+*[disabled] {
+	opacity: 0.75;
+	pointer-events: none;
+	cursor: default;
+}
+
+.disabled {
+	opacity: 0.75;
+	pointer-events: none;
+	cursor: default;
+}
+
+.unactive { opacity: 0.0; }
+.hide { display: block; position: absolute; opacity: 0; pointer-events: none; }
+
+.t-truncate {
+  overflow: hidden; /* Скрывает все, что выходит за пределы блока */
+  text-overflow: ellipsis; /* Добавляет многоточие, если текст обрезается */
+  display: -webkit-box; /* Устанавливает элемент как блочный контейнер */
+  -webkit-line-clamp: 1; /* Ограничивает количество строк до 3 */
+  -webkit-box-orient: vertical; /* Устанавливает вертикальное направление расположения строк */
+}
+
+.t-trimmed {
+  overflow: hidden; /* Скрывает все, что выходит за пределы блока */
+  text-overflow: ellipsis clip;
+  display: -webkit-box; /* Устанавливает элемент как блочный контейнер */
+  -webkit-line-clamp: 1; /* Ограничивает количество строк до 3 */
+  -webkit-box-orient: vertical; /* Устанавливает вертикальное направление расположения строк */
+}
 
-// GENERIC NEED TO CREATE GENERATOR
-@import './height';
 
 body { 
 	.w-auto { width: auto  !important; }
@@ -36,6 +60,40 @@ body {
 	.w-m-2r  { width: min(100%, 2rem); 	}
 }
 
+body {
+	.rotate-90 {
+		transform: rotate(90deg)
+	}
+
+	.rotate-180 {
+		transform: rotate(180deg)
+	}
+}
+
+body { 
+	.cursor-pointer {cursor: pointer; }
+	.cursor-move {cursor: move; }
+	.cursor-text {cursor: text; }
+	.cursor-help {cursor: help; }
+	.cursor-wait {cursor: wait; }
+	.cursor-crosshair {cursor: crosshair; }
+	.cursor-not-allowed {cursor: not-allowed; }
+	.cursor-grab {cursor: grab; }
+	.cursor-grabbing {cursor: grabbing; }
+
+	.cursor-ns-resize {cursor: ns-resize; }
+	.cursor-ew-resize {cursor: ew-resize; }
+	.cursor-ne-resize {cursor: ne-resize; }
+	.cursor-nw-resize {cursor: nw-resize; }
+	.cursor-se-resize {cursor: se-resize; }
+	.cursor-sw-resize {cursor: sw-resize; }
+	
+	.cursor-n-resize {cursor: n-resize; }
+	.cursor-e-resize {cursor: e-resize; }
+	.cursor-s-resize {cursor: s-resize; }
+	.cursor-w-resize {cursor: w-resize; } 
+}
+
 body { 
 	// Text Brands
 	.t-youtube 		{ color: rgba(var(--youtube), 1); 	}
@@ -92,22 +150,27 @@ body {
 	// //////////////////////////////////////// 
 	// Layout
 	// //////////////////////////////////////// 
+	// Positions
+	.pos-relative { position: relative; }
+	.pos-absolute { position: absolute; }
+	.pos-fixed    { position: fixed; }
+	.pos-sticky   { position: sticky; }
+	.pos-static   { position: static; }
+	// Overflow
 	.o-hidden 	{overflow: hidden; }
 	.o-scroll 	{overflow: scroll; }
 	.o-y-scroll {overflow-y: scroll; }
-	.o-x-hidden {overflow-y: hidden; touch-action: pan-y;}
+	.o-x-hidden {overflow-x: hidden; touch-action: pan-y;}
 	.o-auto 		{overflow: auto; }
 	.o-visible 	{overflow: visible; } 
 	// Display
 	.d-flex 				{display: flex; }
 	.d-block 				{display: block; }
 	.d-inline-block {display: inline-block; }
-	.d-grid 				{display: grid; }
+	.d-grid 				{display: grid; }	
 	// Flex
 	.flex {
 		display: flex;
-		position: relative;
-		flex-wrap: wrap;
 		&-row 						{ flex-direction: row; }
 		&-column 					{ flex-direction: column; }
 		&-h-center 				{ justify-content: center; }
@@ -155,9 +218,78 @@ body {
 		&-order-last  { order: 9999; }
 	}
 
+	.grid {
+	  display: grid;
+	}
+
+	.cols {
+	  grid-template-columns: repeat(var(--cols), 1fr);
+	}
+
+	.col-1-1fr {
+	  --col-width: 1fr;
+	}
+
+	.col-2-1fr {
+	  --col-width: 1fr;
+	}
+
+	.col-3-1fr {
+	  --col-width: 1fr;
+	}
+
+	.col-1-2fr {
+	  --col-width: 2fr;
+	}
+
+	.col-2-2fr {
+	  --col-width: 2fr;
+	}
+
+	.col-3-2fr {
+	  --col-width: 2fr;
+	}
+
+	.col-1-3fr {
+	  --col-width: 3fr;
+	}
+
+	.col-2-3fr {
+	  --col-width: 3fr;
+	}
+
+	.col-3-3fr {
+	  --col-width: 3fr;
+	}
+
+	.cols-1 {
+	  --cols: 1;
+	}
+
+	.cols-2 {
+	  --cols: 2;
+	}
+
+	.cols-3 {
+	  --cols: 3;
+	}
+
+	.cols-1 .col {
+	  width: var(--col-width);
+	}
+
+	.cols-2 .col {
+	  width: var(--col-width);
+	}
+
+	.cols-3 .col {
+	  width: var(--col-width);
+	}
+
 	// COLUMNS AND ROWS
 	.cols-1 {display: grid; grid-template-columns: 1fr; }
 	.cols-2 {display: grid; grid-template-columns: 1fr 1fr; }  
+	.cols-2-fit-content {display: grid; grid-template-columns: fit-content(100%) 1fr; }  
 	.cols-3 {display: grid; grid-template-columns: 1fr 1fr 1fr; } 
 	.cols-4 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }  	
 	.cols-5 {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } 

package/src/styles/base/backgrounds.scss

@@ -1,36 +1,4 @@
 body { 
-	@mixin generate-bg-classes($base-class-name, $base-var-name) {
-		.#{$base-class-name} 		{ background: rgb(var(--#{$base-var-name})); 	}
-		.#{$base-class-name}-extra	{ background: var(--#{$base-var-name}-extra); 	}
-		.#{$base-class-name}-big 	{ background: var(--#{$base-var-name}-big); 	}
-		.#{$base-class-name}-semi 	{ background: var(--#{$base-var-name}-semi); 	}
-		.#{$base-class-name}-medium { background: var(--#{$base-var-name}-medium); 	} 
-		.#{$base-class-name}-regular { background: var(--#{$base-var-name}-regular);} 
-		.#{$base-class-name}-small 	{ background: var(--#{$base-var-name}-small); 	} 
-		.#{$base-class-name}-thin 	{ background: var(--#{$base-var-name}-thin); 	} 
-		.#{$base-class-name}-micro 	{ background: var(--#{$base-var-name}-micro); 	} 
-		.#{$base-class-name}-nano 	{ background: var(--#{$base-var-name}-nano); 	} 
-
-	 	@for $i from 1 through 20 {
-	        $percentage: $i * 5;
-
-	        .#{$base-class-name}-transp-#{$percentage} {
-	            background: rgba(var(--#{$base-var-name}), $percentage * 0.01);
-	        }
-	    }
-	}
-	
-	@include generate-bg-classes('bg-main', 	'main');
-	@include generate-bg-classes('bg-second', 	'second');
-	@include generate-bg-classes('bg-third', 	'third');
-	@include generate-bg-classes('bg-fourth', 	'fourth');
-	@include generate-bg-classes('bg-fifth', 	'fifth');
-
-	@include generate-bg-classes('bg-black', 	'black');
-	@include generate-bg-classes('bg-dark', 	'dark');
-	@include generate-bg-classes('bg-grey', 	'grey');
-	@include generate-bg-classes('bg-light', 	'light');
-	@include generate-bg-classes('bg-white', 	'white');
 	// Colors
 	.bg-red         { background: rgb(var(--red));          }
 	.bg-red-nice    { background: rgb(var(--red-nice));     }
@@ -48,10 +16,10 @@ body {
 	.bg-instagram 	{ background: rgba(var(--instagram), 	1); }
 	// BG Blur
 	.bg-blur-extra 		{ backdrop-filter: blur(var(--extra)) 	}
-	.bg-blur-big 		{ backdrop-filter: blur(var(--big)) 		}
+	.bg-blur-big 			{ backdrop-filter: blur(var(--big)) 		}
 	.bg-blur-semi 		{ backdrop-filter: blur(var(--semi)) 		}	
 	.bg-blur-medium 	{ backdrop-filter: blur(var(--medium)) 	}
-	.bg-blur-regular 	{ backdrop-filter: blur(var(--regular)) 	}
+	.bg-blur-regular 	{ backdrop-filter: blur(var(--regular)) }
 	.bg-blur-small 		{ backdrop-filter: blur(var(--small)) 	}
 	.bg-blur-thin 		{ backdrop-filter: blur(var(--thin)) 		}
 	// Other

package/src/styles/base/borders.scss

@@ -73,10 +73,7 @@ body {
 	/* Inset borders */
 	.br-inset-2px-black { box-shadow: inset 0 0 0 2px rgba(var(--black),1); }
 	// Border anim
-	.br-anim {
-	  border-style: dashed;
-	  animation: dash-animation 1s linear infinite;
-	}
+	.br-anim { border-style: dashed; animation: dash-animation 1s linear infinite;}
 
 	@keyframes dash-animation {
 	  0% {
@@ -93,10 +90,25 @@ body {
 	}
 
 	.br-glow {
-	  border: 2px solid #ffffff;
-	  box-shadow: 0px 0px 5px #ffffff, 0px 0px 10px #ffffff, 0px 0px 15px #ffffff;
+	  border: 2px solid rgb(var(--white));
+	  box-shadow: 0px 0px 5px rgb(var(--white)), 0px 0px 10px rgb(var(--white)), 0px 0px 15px rgb(var(--white));
+	}
+
+	.br-glow-animation {
+		animation: glow-animation 2s ease-in-out infinite;
 	}
 
+	@keyframes glow-animation {
+    0%, 100% {
+        box-shadow: 0px 0px 5px rgba(var(--white), 0.5), 0px 0px 10px rgba(var(--white), 0.5), 0px 0px 15px rgba(var(--white), 0.5);
+    }
+	    50% {
+	        box-shadow: 0px 0px 10px rgba(var(--white), 1), 0px 0px 20px rgba(var(--white), 1), 0px 0px 30px rgba(var(--white), 1);
+	    }
+	}
+
+
+
 	.br-double-line {
 	  border: double 4px #ffffff;
 	  box-shadow: 10px 10px 30px #d1d1d1, -10px -10px 30px #ffffff;
@@ -139,23 +151,6 @@ body {
 	  box-shadow: 10px 10px 30px #d1d1d1, -10px -10px 30px #ffffff;
 	}
 
-	.br-glow-animation {
-	  border: 2px solid #00ff00;
-	  animation: glow 2s linear infinite;
-	}
-
-	@keyframes glow {
-	  0% {
-	    box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00, 0 0 20px #00ff00;
-	  }
-	  50% {
-	    box-shadow: 0 0 20px #00ff00, 0 0 30px #00ff00, 0 0 40px #00ff00, 0 0 50px #00ff00;
-	  }
-	  100% {
-	    box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00, 0 0 20px #00ff00;
-	  }
-	}
-
 	.br-border-flip {
 	  border: 2px solid #ffffff;
 	  animation: border-flip 3s linear infinite;

package/src/styles/base/scrolling.scss

@@ -1,24 +1,16 @@
 body { 
-	.scroll-snap-type-x-mandatory { scroll-snap-type: x mandatory; } 
-	.scroll-snap-type-y-mandatory { scroll-snap-type: y mandatory; }
-	// Scroll pd
-	.scroll-pd-auto 		{ scroll-padding: auto; }
-	.scroll-pd-top-auto 	{ scroll-pd-top: auto; }
-	.scroll-pd-right-auto 	{ scroll-pd-right: auto; }
-	.scroll-pd-bottom-auto 	{ scroll-pd-bottom: auto; }
-	.scroll-pd-left-auto 	{ scroll-pd-left: auto; }
-	// Scroll mn
-	.scroll-mn-auto 		{ scroll-margin: auto; }
-	.scroll-mn-top-auto 	{ scroll-mn-top: auto; }
-	.scroll-mn-right-auto 	{ scroll-mn-right: auto; }
-	.scroll-mn-bottom-auto 	{ scroll-mn-bottom: auto; }
-	.scroll-mn-left-auto 	{ scroll-mn-left: auto; }
 	// Overflow Anchor
 	.overflow-anchor-auto { overflow-anchor: auto; }
 	.overflow-anchor-none { overflow-anchor: none; }
-	// Scroll Behavior
-	.scroll-behavior-auto 	{ scroll-behavior: auto; }
-	.scroll-behavior-smooth { scroll-behavior: smooth; }
+	// Overscroll Behavior
+	.overscroll-behavior-auto 		{ overscroll-behavior: auto; }
+	.overscroll-behavior-contain 	{ overscroll-behavior: contain; }
+	.overscroll-behavior-none 		{ overscroll-behavior: none; }
+	.overscroll-behavior-x-auto 	{ overscroll-behavior-x: auto; }
+	.overscroll-behavior-y-auto 	{ overscroll-behavior-y: auto; }
+	// Scroll
+	.scroll-snap-type-x-mandatory { scroll-snap-type: x mandatory; } 
+	.scroll-snap-type-y-mandatory { scroll-snap-type: y mandatory; }
 	// Scroll Snap Align
 	.scroll-snap-align-start 	{ scroll-snap-align: start; }
 	.scroll-snap-align-end 		{ scroll-snap-align: end; }
@@ -26,18 +18,16 @@ body {
 	// Scroll Snap Stop
 	.scroll-snap-stop-normal 	{ scroll-snap-stop: normal; }
 	.scroll-snap-stop-always 	{ scroll-snap-stop: always; }
-	// Overscroll Behavior
-	.overscroll-behavior-auto 		{ overscroll-behavior: auto; }
-	.overscroll-behavior-contain 	{ overscroll-behavior: contain; }
-	.overscroll-behavior-none 		{ overscroll-behavior: none; }
-	.overscroll-behavior-x-auto 	{ overscroll-behavior-x: auto; }
-	.overscroll-behavior-y-auto 	{ overscroll-behavior-y: auto; }
-	// Scrollbar Color
-	.scrollbar-color-auto 	{ scrollbar-color: auto; }
-	// Scrollbar Width
-	.scrollbar-width-auto 	{ scrollbar-width: auto; }
-	.scrollbar-width-thin 	{ scrollbar-width: thin; }
-	.scrollbar-width-none 	{ scrollbar-width: none; }
+	// Scroll Behavior
+	.scroll-behavior-auto 	{ scroll-behavior: auto; }
+	.scroll-behavior-smooth { scroll-behavior: smooth; }
+	// Scroll mn
+	.scroll-mn-auto 		{ scroll-margin: auto; }
+	.scroll-mn-top-auto 	{ scroll-mn-top: auto; }
+	.scroll-mn-right-auto 	{ scroll-mn-right: auto; }
+	.scroll-mn-bottom-auto 	{ scroll-mn-bottom: auto; }
+	.scroll-mn-left-auto 	{ scroll-mn-left: auto; }
+	// Scroll mn Variables
 	.scroll-mn-b-extra 		{ scroll-margin: var(--extra); }
 	.scroll-mn-b-big 			{ scroll-margin: var(--big); }
 	.scroll-mn-b-semi 		{ scroll-margin: var(--semi); }
@@ -46,6 +36,12 @@ body {
 	.scroll-mn-b-small 		{ scroll-margin: var(--small); }
 	.scroll-mn-b-thin 		{ scroll-margin: var(--thin); }
 	.scroll-mn-b-micro 		{ scroll-margin: var(--micro); }
+	// Scroll pd
+	.scroll-pd-auto 		{ scroll-padding: auto; }
+	.scroll-pd-top-auto 	{ scroll-pd-top: auto; }
+	.scroll-pd-right-auto 	{ scroll-pd-right: auto; }
+	.scroll-pd-bottom-auto 	{ scroll-pd-bottom: auto; }
+	.scroll-pd-left-auto 	{ scroll-pd-left: auto; }
 	// Scroll pd with Variables
 	.scroll-pd-extra 		{ scroll-padding: var(--extra); }
 	.scroll-pd-big 			{ scroll-padding: var(--big); }
@@ -55,4 +51,76 @@ body {
 	.scroll-pd-small 		{ scroll-padding: var(--small); }
 	.scroll-pd-thin 		{ scroll-padding: var(--thin); }
 	.scroll-pd-micro 		{ scroll-padding: var(--micro); }
+
+	.scroll-hide::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  /* Главный трек scrollbar */
+  .scroll-hide::-webkit-scrollbar-track {
+    background: red;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  /* Ползунок scrollbar */
+  .scroll-hide::-webkit-scrollbar-thumb {
+    background-color: red;
+    outline: 1px solid slategrey;
+  }
+
+  /* Горизонтальный scrollbar */
+  .scroll-hide::-webkit-scrollbar:horizontal {
+    height: 0;
+  }
+
+  /* Вертикальный scrollbar */
+  .scroll-hide::-webkit-scrollbar:vertical {
+    width: 0;
+  }
+
+  /* Кнопка уменьшения (decrement) */
+  .scroll-hide::-webkit-scrollbar-button:decrement {
+    display: none;
+  }
+
+  /* Кнопка увеличения (increment) */
+  .scroll-hide::-webkit-scrollbar-button:increment {
+    display: none;
+  }
+
+  /* Кнопка уменьшения (decrement) - отдельная */
+  .scroll-hide::-webkit-scrollbar-button:start {
+    display: none;
+  }
+
+  /* Кнопка увеличения (increment) - отдельная */
+  .scroll-hide::-webkit-scrollbar-button:end {
+    display: none;
+  }
+
+  /* Двойная кнопка */
+  .scroll-hide::-webkit-scrollbar-button:double-button {
+    display: none;
+  }
+
+  /* Одиночная кнопка */
+  .scroll-hide::-webkit-scrollbar-button:single-button {
+    display: none;
+  }
+
+  /* Нет кнопок */
+  .scroll-hide::-webkit-scrollbar-button:no-button {
+    display: none;
+  }
+
+  /* Угол scrollbar */
+  .scroll-hide::-webkit-scrollbar-corner:corner-present {
+    background: red;
+  }
+
+  /* scrollbar в неактивном окне */
+  .scroll-hide::-webkit-scrollbar:window-inactive {
+    background: red;
+  }
 }

package/src/styles/base/{shadows.scss → shadow_transitions_hover_refactor.scss}

@@ -1,9 +1,62 @@
 body { 
-	
+	.hover-scale-0 {&:hover {transform: scale(1.015); 	} } 
+	.hover-scale-1 {&:hover {transform: scale(1.05); 	} } 
+	.hover-scale-2 {&:hover {transform: scale(1.1); 	} }
+	.hover-scale-3 {&:hover {transform: scale(1.2); 	} }
+
+
+
+	.hover-bg-main {&:hover {background: rgb(var(--main), 1);; } }
+	.hover-bg-white {&:hover {background: rgb(var(--white), 1);; } }
+	.hover-bg-black {&:hover {background: rgb(var(--black), 1);; } }
+	.hover-t-white {&:hover {color: rgba(var(--white), 1);; } }
+	.hover-t-black {&:hover {color: rgba(var(--black), 1);; } }
+	.hover-br-transp {&:hover {background: rgba(var(--white),0); } }
+	.hover-br-l-dark {&:hover {border: 1px solid rgba(var(--dark), 0.2) } }
+
+
+	.hover-translate-1 {&:hover {transform: translateY(-10px); } }
+	.hover-rotate-1 {&:hover {transform: rotate(-10deg); } }
+	.hover-translateX-1 {&:hover {transform: translateX(20px); } }
+	.hover-combined-1 {&:hover {transform: translateY(-10px) rotate(-10deg); } }
+	.hover-easeInOut-1 {&:hover {transform: translateY(-10px) scale(1.1); } }
+	.hover-arc-1 {&:hover {transform: translateX(20px) translateY(-10px) rotate(-10deg); } }
+	.hover-timing-1 {&:hover {transition: transform 0.2s ease-in-out; transform: translateY(-10px); } }
+	.hover-exaggeration-1 {&:hover {transform: scale(1.5); } }
+	.hover-solid-drawing-1 {&:hover {transform: translateY(-10px) scale(1.1) rotate(-10deg); } }
+	.hover-appeal-1 {&:hover {transform: translateY(-10px) scale(1.1) rotate(-5deg); } } 
+
+	.transition-linear {transition: all 0.33s linear; }
+ 	.transition-ease-in {transition: all 0.33s cubic-bezier(0.42, 0, 1, 1); }
+	.transition-ease-out {transition: all 0.33s cubic-bezier(0, 0, 0.58, 1); }
+	.transition-ease-in-out {transition: all 0.33s cubic-bezier(0.42, 0, 0.58, 1); }
+	.transition-staggered {transition: all 0.33s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+	.transition-bounce {transition: all 0.33s cubic-bezier(0.71, -0.46, 0.88, 0.6); }
+	.transition-elastic {transition: all 0.33s cubic-bezier(0.17, 0.67, 0.33, 0.94); }
+	.transition-spring {transition: all 0.33s cubic-bezier(0.23, 1, 0.32, 1.01); }
+	.transition-boomerang {transition: all 0.66s cubic-bezier(0.42, 0, 0.58, 1); }
+	.transition-slow-motion {transition: all 1.33s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
+	.transition-zoom {transition: all 0.33s cubic-bezier(0.71, -0.46, 0.88, 0.6); }
+	.transition-fly-away {transition: all 0.33s cubic-bezier(0.17, 0.67, 0.33, 0.94); }
+	.transition-squeeze {transition: all 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000); transform-origin: center; }
+
+	.transition-timing-1 {
+		transition-duration: 0.15s;
+	}
+	.transition-timing-2 {
+		transition-duration: 0.25s;
+	}
+	.transition-timing-3 {
+		transition-duration: 0.35s;
+	}
+	.transition-timing-4 {
+		transition-duration: 0.45s;
+	}
+
 	// Shadows 
 	.bs-red { box-shadow: 0 0 5px red; }
 
-	.bs-black { box-shadow: 0 0 5px rgba(0,0,0,0.1); }
+	.bs-black { box-shadow: 0 10px 15px rgba(0,0,0,0.05); }
 
 
 	.bs-tilt {

package/src/styles/config.scss

@@ -11,6 +11,28 @@
 	--#{$base-var-name}-nano: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 10%, white 80%);
 }
 
+@mixin generate-bg-classes($base-class-name, $base-var-name) {
+	.#{$base-class-name} 				{ background: rgb(var(--#{$base-var-name})); 	}
+	.#{$base-class-name}-extra	{ background: var(--#{$base-var-name}-extra); 	}
+	.#{$base-class-name}-big 		{ background: var(--#{$base-var-name}-big); 	}
+	.#{$base-class-name}-semi 	{ background: var(--#{$base-var-name}-semi); 	}
+	.#{$base-class-name}-medium { background: var(--#{$base-var-name}-medium); 	} 
+	.#{$base-class-name}-regular{ background: var(--#{$base-var-name}-regular);} 
+	.#{$base-class-name}-small 	{ background: var(--#{$base-var-name}-small); 	} 
+	.#{$base-class-name}-thin 	{ background: var(--#{$base-var-name}-thin); 	} 
+	.#{$base-class-name}-micro 	{ background: var(--#{$base-var-name}-micro); 	} 
+	.#{$base-class-name}-nano 	{ background: var(--#{$base-var-name}-nano); 	} 
+
+ 	@for $i from 1 through 20 {
+        $percentage: $i * 5;
+
+        .#{$base-class-name}-transp-#{$percentage} {
+            background: rgba(var(--#{$base-var-name}), $percentage * 0.01);
+        }
+    }
+}
+
+
 @mixin generate-utility-classes($class-name, $css-property, $modifiers, $values) {
   @each $value-key, $value in $values {
     // Генерация классов без модификаторов
@@ -19,7 +41,7 @@
     }
     // Генерация отрицательных классов без модификаторов
     .#{$class-name}-#{$value-key}-negative {
-      #{$css-property}: -#{$value};
+      #{$css-property}: calc(#{$value} * -1);
     }
 
     // Генерация классов с модификаторами
@@ -30,14 +52,17 @@
         }
         // Генерация отрицательных классов с модификаторами
         .#{$class-name}-#{$modifier}-#{$value-key}-negative {
-          #{$css-property}-#{$css-modifier}: -#{$value};
+          #{$css-property}-#{$css-modifier}: calc(#{$value} * -1);
         }
       }
     }
   }
 }
 
+
 :root {
+	// THEME
+	color-scheme: light dark;
 	////////////////////////////////////////
 	// 1.COLORS VARIABLES 
 	///////////////////////////////////////
@@ -110,7 +135,12 @@
 	--xl-desktop-max: 			1920px;
 	--xxl-desktop-min: 			1921px;
 }
-
+$modifiers: (
+  't': 'top',
+  'r': 'right',
+  'b': 'bottom',
+  'l': 'left'
+);
 
 $variables: (
   'extra': var(--extra),
@@ -128,6 +158,7 @@ $rem: (
   '50r': 50rem,
   '30r': 30rem,
   '20r': 20rem,
+  '15r': 15rem,
   '10r': 10rem,
   '8r': 8rem,
   '5r': 5rem,
@@ -155,6 +186,7 @@ $percent: (
   '100': 100%,
   '80': 80%,
   '75': 75%,
+  '70': 70%,
   '66': 66%,
   '50': 50%,
   '40': 40%,
@@ -163,6 +195,7 @@ $percent: (
   '20': 20%,
   '15': 15%,
   '10': 10%,
+  '0': 0%,
 );
 
 $base: (
@@ -170,23 +203,42 @@ $base: (
   'zero': 0,
 );
 
-
-
 $combined: map-merge($vh, $rem);
 $combined: map-merge($combined, $percent);
 $combined: map-merge($combined, $variables);
 $combined: map-merge($combined, $base);
 
-$modifiers: (
-  't': 'top',
-  'r': 'right',
-  'b': 'bottom',
-  'l': 'left'
-);
-
 body {
-	@include generate-utility-classes('pd', 'padding', 	$modifiers, $combined);
-	@include generate-utility-classes('mn', 'margin', 	$modifiers, $combined);
-	@include generate-utility-classes('w', 'width', 	$modifiers, $combined);
-	@include generate-utility-classes('h', 'height', 	$modifiers, $combined);
-}
+	@include generate-utility-classes('pd',	'padding', 		$modifiers, $combined);
+	@include generate-utility-classes('mn', 'margin', 		$modifiers, $combined);
+
+	@include generate-utility-classes('w', 	'width', 			null, $combined);
+	@include generate-utility-classes('h', 	'height', 		null, $combined);
+
+	@include generate-utility-classes('pos-t', 'top', 		null, $combined);
+	@include generate-utility-classes('pos-r', 'right', 	null, $combined);
+	@include generate-utility-classes('pos-b', 'bottom',	null, $combined);
+	@include generate-utility-classes('pos-l', 'left', 		null, $combined);
+
+	@include generate-utility-classes('h-max', 'max-height',	null, $combined);
+	@include generate-utility-classes('h-min', 'min-height',	null, $combined);
+
+	@include generate-utility-classes('radius', 'border-radius',	null, $combined);
+
+	@include generate-utility-classes('radius-tl', 'border-top-left-radius',	null, $combined);
+	@include generate-utility-classes('radius-br', 'border-top-right-radius-radius',	null, $combined);
+	@include generate-utility-classes('radius-tr', 'border-bottom-right-radius',	null, $combined);
+	@include generate-utility-classes('radius-bl', 'border-bottom-left-radius-radius',	null, $combined);
+	
+	@include generate-bg-classes('bg-main', 	'main');
+	@include generate-bg-classes('bg-second',	'second');
+	@include generate-bg-classes('bg-third', 	'third');
+	@include generate-bg-classes('bg-fourth', 'fourth');
+	@include generate-bg-classes('bg-fifth', 	'fifth');
+
+	@include generate-bg-classes('bg-black', 	'black');
+	@include generate-bg-classes('bg-dark', 	'dark');
+	@include generate-bg-classes('bg-grey', 	'grey');
+	@include generate-bg-classes('bg-light', 	'light');
+	@include generate-bg-classes('bg-white', 	'white');
+}