@ozdao/prometheus-framework 0.1.99 → 0.2.0

package/src/styles/base/width.scss

@@ -0,0 +1,2 @@
+body { 
+}

package/src/styles/config.scss

@@ -1,6 +1,7 @@
+// Generate Variants for Colors Variables
 @mixin generate-vars-color($base-var-name) {
-  	--#{$base-var-name}-extra: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 10%, black 80%);
-	--#{$base-var-name}-big: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 25%, black 70%);
+  --#{$base-var-name}-extra: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 10%, black 80%);
+	--#{$base-var-name}-big: 			color-mix(in srgb, rgb(var(--#{$base-var-name})) 25%, black 70%);
 	--#{$base-var-name}-semi: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 50%, black 60%);
 	--#{$base-var-name}-medium: 	color-mix(in srgb, rgb(var(--#{$base-var-name})) 90%, black 50%);
 	--#{$base-var-name}-regular: 	rgb(var(--#{$base-var-name}));
@@ -10,60 +11,86 @@
 	--#{$base-var-name}-nano: 		color-mix(in srgb, rgb(var(--#{$base-var-name})) 10%, white 80%);
 }
 
+@mixin generate-utility-classes($class-name, $css-property, $modifiers, $values) {
+  @each $value-key, $value in $values {
+    // Генерация классов без модификаторов
+    .#{$class-name}-#{$value-key} {
+      #{$css-property}: $value;
+    }
+    // Генерация отрицательных классов без модификаторов
+    .#{$class-name}-#{$value-key}-negative {
+      #{$css-property}: -#{$value};
+    }
+
+    // Генерация классов с модификаторами
+    @if $modifiers {
+      @each $modifier, $css-modifier in $modifiers {
+        .#{$class-name}-#{$modifier}-#{$value-key} {
+          #{$css-property}-#{$css-modifier}: $value;
+        }
+        // Генерация отрицательных классов с модификаторами
+        .#{$class-name}-#{$modifier}-#{$value-key}-negative {
+          #{$css-property}-#{$css-modifier}: -#{$value};
+        }
+      }
+    }
+  }
+}
+
 :root {
 	////////////////////////////////////////
 	// 1.COLORS VARIABLES 
 	///////////////////////////////////////
-  	--main: 			0,255,136;
-  	@include generate-vars-color('main');
-	--second:    		34,102,255;
-  	@include generate-vars-color('second');
-	--third:			162,10,255;
-	@include generate-vars-color('third');
-	--fourth:			255,10,84;
-  	@include generate-vars-color('fourth');
-	--fifth:			255,216,10;
-  	@include generate-vars-color('fifth');
+	--main: 	0,255,136;
+	@include 	generate-vars-color('main');
+	--second:	34,102,255;
+	@include 	generate-vars-color('second');
+	--third:	162,10,255;
+	@include 	generate-vars-color('third');
+	--fourth:	255,10,84;
+	@include 	generate-vars-color('fourth');
+	--fifth:	255,216,10;
+	@include 	generate-vars-color('fifth');
 	// Black and white colors
-	--black:      		10,10,10;
-	@include generate-vars-color('black');
-	--dark:      		36,36,36; 	
-	@include generate-vars-color('dark');
-	--grey:      		245,249,247; 
-	@include generate-vars-color('grey');
-	--light:     		249,251,252; 
-	@include generate-vars-color('light');
-	--white:     		255,255,255;
-	@include generate-vars-color('white');
+	--black:  10,10,10;
+	@include 	generate-vars-color('black');
+	--dark:   36,36,36; 	
+	@include 	generate-vars-color('dark');
+	--grey:   245,249,247; 
+	@include 	generate-vars-color('grey');
+	--light:  249,251,252; 
+	@include 	generate-vars-color('light');
+	--white:  255,255,255;
+	@include 	generate-vars-color('white');
 	// Tones
-	--red: 				360, 70, 90;
+	--red: 					360, 70, 90;
 	--red-nice: 		354, 80, 100;
-	--green: 			120, 58, 70;
-	--green-nice: 		126, 70, 80;
+	--green: 				120, 58, 70;
+	--green-nice: 	126, 70, 80;
 	--orange: 			8, 72, 94;
-	--orange-nice: 		13, 70, 100;
+	--orange-nice:	13, 70, 100;
 	--yellow: 			38, 100, 100;
-	--yellow-nice: 		45, 97, 100;
+	--yellow-nice: 	45, 97, 100;
 	// For brands
 	--youtube:			252,13,27;
 	--telegram:			linear-gradient(0deg, #1D93D2 0%, #38B0E3 100%), #000000;
 	--twitter:			29,155,240;
 	--instagram:		233,89,80;
-	--reddit:			255,69,0;
+	--reddit:				255,69,0;
 	// Special
-	--transparent:   	0,0,0,0;
-	////////////////////////\////////////////
+	--transparent:  0,0,0,0;
+	/////////////////////////////////////////
 	// 2.SIZE VARIABLES //
 	///////////////////////////////////////
-	--extra:   			4.00rem;
-	--big:   			2.50rem; 
-	--semi:    			1.50rem;
-	--medium:  			1.25rem;
-	--regular: 			1.00rem;
-	--small:   			0.75rem;
-	--thin:    			0.50rem;
-	--micro: 			0.25rem;
-	--nano: 			0.10rem;
+	--extra:   	4.00rem;
+	--big:   		2.50rem; 
+	--semi:    	1.50rem;
+	--medium:  	1.25rem;
+	--regular:	1.00rem;
+	--small:   	0.75rem;
+	--thin:    	0.50rem;
+	--micro: 		0.25rem;
+	--nano: 		0.10rem;
 	////////////////////////////////////////
 	// 3. TEXT VARIABLES
 	///////////////////////////////////////
@@ -71,16 +98,91 @@
 	////////////////////////////////////////
 	// 4. BREAKPOINTS
 	///////////////////////////////////////
-	--super-ultra-tiny-flip-phone-max:	240px;
-	--flip-phone-max: 					320px;
-	--phone-landscape-max: 				640px;
-	--tablet-portrait-min: 				641px;
-	--tablet-portrait-max: 				768px;
-	--tablet-landscape-min: 			769px;
-	--tablet-landscape-max: 			1024px;
-	--desktop-min: 						1025px;
-	--desktop-max: 						1440px;
-	--xl-desktop-min: 					1441px;
-	--xl-desktop-max: 					1920px;
-	--xxl-desktop-min: 					1921px;
+	--flip-phone-max:				320px;
+	--phone-landscape-max: 	640px;
+	--tablet-portrait-min: 	641px;
+	--tablet-portrait-max: 	768px;
+	--tablet-landscape-min:	769px;
+	--tablet-landscape-max:	1024px;
+	--desktop-min: 					1025px;
+	--desktop-max: 					1440px;
+	--xl-desktop-min: 			1441px;
+	--xl-desktop-max: 			1920px;
+	--xxl-desktop-min: 			1921px;
 }
+
+$base: (
+  'auto': auto,
+  'zero': 0,
+);
+
+$variables: (
+  'extra': var(--extra),
+  'big': var(--big),
+  'semi': var(--semi),
+  'medium': var(--medium),
+  'regular': var(--regular),
+  'small': var(--small),
+  'thin': var(--thin),
+  'micro': var(--micro),
+  'nano': var(--nano),
+);
+
+$rem: (
+  '50r': 50rem,
+  '30r': 30rem,
+  '20r': 20rem,
+  '10r': 10rem,
+  '8r': 8rem,
+  '5r': 5rem,
+  '4r': 4rem,
+  '3r': 3rem,
+  '2r': 2rem,
+  '1r': 1rem,
+);
+
+$vh: (
+  '100vh': 100vh,
+  '80vh': 80vh,
+  '75vh': 75vh,
+  '66vh': 66vh,
+  '50vh': 50vh,
+  '40vh': 40vh,
+  '33vh': 33vh,
+  '25vh': 25vh,
+  '20vh': 20vh,
+  '15vh': 15vh,
+  '10vh': 10vh,
+);
+
+$percent: (
+  '100': 100%,
+  '80': 80%,
+  '75': 75%,
+  '66': 66%,
+  '50': 50%,
+  '40': 40%,
+  '33': 33%,
+  '25': 25%,
+  '20': 20%,
+  '15': 15%,
+  '10': 10%,
+);
+
+$combined: map-merge($base, $variables);
+
+$combined: map-merge($combined, $rem);
+$combined: map-merge($combined, $vh);
+$combined: map-merge($combined, $percent);
+
+$modifiers: (
+  't': 'top',
+  'r': 'right',
+  'b': 'bottom',
+  'l': 'left'
+);
+
+@include generate-utility-classes('pd', 'padding', 	$modifiers, $variables);
+@include generate-utility-classes('mn', 'margin', 	$modifiers, $variables);
+@include generate-utility-classes('w', 'width', 	$modifiers, $combined);
+@include generate-utility-classes('h', 'height', 	$modifiers, $combined);

package/src/styles/responsive.scss

@@ -70,7 +70,7 @@ $xxl-desktop-min:                   1921px;
        display: inherit !important;
     }
 
-    .mn-small { margin-bottom: 1.5rem !important;}
+    .mn-b-small { margin-bottom: 1.5rem !important;}
 
  
      // Cols
@@ -196,7 +196,7 @@ $xxl-desktop-min:                   1921px;
       margin-right: 2rem;
     }
 
-    .mn-big {
+    .mn-b-big {
       margin-bottom: 1.5rem;
     }