@oardi/css-utils 0.26.3 → 0.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.26.3",
+	"version": "0.27.1",
 	"author": "Ardian Shala",
 	"homepage": "https://css-utils.oardi.com",
 	"description": "Powerful set of semantic css classes with support for breakpoints, directions and spacings",

package/readme.md

@@ -2,6 +2,8 @@
 
 Powerful set of CSS Utility classes for Colors, Typography, Spacings, Flex and CSS Grid.
 
+<!-- [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/oardi-css-utils/) -->
+
 ## Showcase
 
 - Browse the Showcase [here](https://css-utils.oardi.com/)
@@ -17,11 +19,10 @@ npm i @oardi/css-utils
 
 ### Import SCSS files
 
-This will import the theme with all utility classes and their responsive classes as well as predefined components.
+Import the theme with all utility classes and their responsive classes as well as predefined components.
 
 ```scss
 @use '@oardi/css-utilss/scss/index.scss';
-@use '@oardi/css-utils/scss/components.scss';
 ```
 
 ### Use Utility classes

package/scss/spacings.scss

@@ -4,8 +4,18 @@
 .ml-auto {
 	margin-left: auto;
 }
+.mr-auto {
+	margin-right: auto;
+}
+.mt-auto {
+	margin-top: auto;
+}
+.mb-auto {
+	margin-bottom: auto;
+}
 
 // margin / padding spacings
+// i.e. m-2, m-5, p-1, ...
 @each $key, $value in map.get(theme.$theme, spacings) {
 	.m-#{$key} {
 		margin: $value;
@@ -17,6 +27,7 @@
 }
 
 // margin / padding with directions
+// i.e. mt-2, mb-5, pt-1, ...
 @each $key, $value in map.get(theme.$theme, spacings) {
 	@each $dir, $prop in map.get(theme.$theme, directions) {
 		.m#{$dir}-#{$key} {

package/scss/theme.scss

@@ -27,8 +27,12 @@ $theme: (
 	directions: (
 		t: top,
 		r: right,
+		// rename r to e -> end
 		b: bottom,
 		l: left,
+		// rename l to s -> start
+		// add x for left and right
+		 // add y for top and bottom
 	),
 	spacings: (
 		0: 0rem,
@@ -37,6 +41,7 @@ $theme: (
 		3: 3rem,
 		4: 4rem,
 		5: 5rem,
+		// add auto
 	),
 	positions: (
 		relative,

package/scss/utilities.scss

@@ -1,18 +1,6 @@
 @use 'sass:map';
 @use './theme.scss';
 
-.d-block {
-	display: block;
-}
-
-.d-inline-block {
-	display: inline-block;
-}
-
-.d-none {
-	display: none;
-}
-
 // positions
 @each $value in map.get(theme.$theme, positions) {
 	.position-#{$value} {
@@ -29,15 +17,16 @@
 	width: 100%;
 }
 
+// add responsive
 .text-center {
 	text-align: center;
 }
 
-.text-left {
+.text-start {
 	text-align: left;
 }
 
-.text-right {
+.text-end {
 	text-align: right;
 }
 
@@ -98,16 +87,24 @@ bg-light(top)?
 	border-radius: 50%;
 }
 
-.shadow-light {
-	box-shadow: var(--shadow-light);
+.rounded {
+	border-radius: var(--border-radius) !important;
+}
+
+.shadow-none {
+	box-shadow: none !important;
+}
+
+.shadow-sm {
+	box-shadow: var(--shadow-sm) !important;
 }
 
 .shadow {
-	box-shadow: var(--shadow);
+	box-shadow: var(--shadow) !important;
 }
 
-.shadow-dark {
-	box-shadow: var(--shadow-dark);
+.shadow-lg {
+	box-shadow: var(--shadow-lg) !important;
 }
 
 .w-100 {
@@ -126,11 +123,13 @@ bg-light(top)?
 	width: 40%;
 }
 
+// TODO - add several heights
 .h-100 {
 	height: 100%;
 }
 
 // TODO - check if more classes are needed
+// arrange elements top, start, bottom, end
 .top-0 {
 	top: 0px;
 }
@@ -192,10 +191,35 @@ bg-light(top)?
 		.w-#{$bp}-30 {
 			width: 30% !important;
 		}
+	}
+}
+
+// display
+.d-none {
+	display: none !important;
+}
+
+.d-block {
+	display: block !important;
+}
+
+.d-inline-block {
+	display: inline-block !important;
+}
+
+@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
+	@media (min-width: #{$bp-value}) {
+		.d-#{$bp}-none {
+			display: none !important;
+		}
 
 		.d-#{$bp}-block {
 			display: block !important;
 		}
+
+		.d-#{$bp}-inline-block {
+			display: inline-block !important;
+		}
 	}
 }
 

package/scss/variables.scss

@@ -33,9 +33,9 @@
 	--disabled-bg-color: var(--gray-80);
 	--disabled-border-color: var(--gray-80);
 
-	--shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.075);
-	--shadow-dark: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);
-	--shadow-light: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.025);
+	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+	--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+	--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
 
 	--focus-outline: 2px solid var(--primary-light);
 	--focus-outline-error: 2px solid var(--error-light);