@oardi/css-utils 0.30.0 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.30.0",
+	"version": "0.31.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/scss/borders.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use './theme.scss';
+
+.border-0 {
+	border: 0 !important;
+}
+
+@each $name, $value in map.get(theme.$theme, colors) {
+	// TODO - add borders for positions
+	.border-#{$name} {
+		border: var(--border-width) solid var(--#{$name}) !important;
+	}
+
+	// TODO - refactor directions s = start = left = l?
+	@each $dir, $prop in map.get(theme.$theme, directions) {
+		.border-#{$dir}-#{$name} {
+			border-#{$prop}: var(--border-width) solid var(--#{$name}) !important;
+		}
+	}
+}
+
+@each $dir, $prop in map.get(theme.$theme, directions) {
+	.border-#{$dir}-0 {
+		border-#{$dir}: none !important;
+	}
+}

package/scss/components/navbar.scss

@@ -15,6 +15,7 @@
 	color: var(--primary-dark);
 }
 
+/** @deprecated - use bg-color instead */
 @each $name, $value in map.get(theme.$theme, colors) {
 	.navbar-#{$name} {
 		color: var(--on-#{$name});

package/scss/index.scss

@@ -9,6 +9,7 @@
 @forward './flex-responsive.scss';
 @forward './grid.scss';
 @forward './grid-responsive.scss';
+@forward './borders.scss';
 
 @forward './components/breadcrumb.scss';
 @forward './components/button.scss';

package/scss/theme.scss

@@ -7,7 +7,7 @@ $default-theme: (
 		'primary': #9163e7,
 		'secondary': #595959,
 		'success': #16a085,
-		'warn': #ffc557,
+		'warning': #ffc557,
 		'error': #eb4242,
 		'white': #ffffff,
 		'black': #000000,
@@ -16,7 +16,7 @@ $default-theme: (
 		'on-primary': #ffffff,
 		'on-secondary': #ffffff,
 		'on-success': #ffffff,
-		'on-warn': #ffffff,
+		'on-warning': #ffffff,
 		'on-error': #ffffff,
 		'on-white': #000000,
 		'on-black': #ffffff,

package/scss/utilities.scss

@@ -19,15 +19,15 @@
 
 // add responsive
 .text-center {
-	text-align: center;
+	text-align: center !important;
 }
 
 .text-start {
-	text-align: left;
+	text-align: left !important;
 }
 
 .text-end {
-	text-align: right;
+	text-align: right !important;
 }
 
 .text-white {
@@ -56,42 +56,42 @@
 
 @each $name, $value in map.get(theme.$theme, colors) {
 	.text-#{$name} {
-		color: var(--#{$name});
-		fill: var(--#{$name});
+		color: var(--#{$name}) !important;
+		fill: var(--#{$name}) !important;
 	}
 
-	// deprecated
+	// deprecated - use bg-opacity-*
 	.bg-#{$name}-light {
 		background-color: var(--#{$name}-light);
 		color: var(--on-#{$name});
 	}
 
 	.bg-#{$name} {
-		// background-color: var(--#{$name});
-		color: var(--on-#{$name});
+		color: var(--on-#{$name}) !important;
+		fill: var(--on-#{$name}) !important;
 		background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity)) !important;
 	}
 
 	// deprecated
 	.bg-#{$name}-dark {
-		background-color: var(--#{$name}-dark);
-		color: var(--on-#{$name});
+		background-color: var(--#{$name}-dark) !important;
+		color: var(--on-#{$name}) !important;
 	}
 }
 
 @each $name, $value in map.get(theme.$theme, grays) {
 	.text-gray-#{$name} {
-		color: var(--gray-#{$name});
-		fill: var(--gray-#{$name});
+		color: var(--gray-#{$name}) !important;
+		fill: var(--gray-#{$name}) !important;
 	}
 
 	.bg-gray-#{$name} {
-		background-color: var(--gray-#{$name});
+		background-color: var(--gray-#{$name}) !important;
 	}
 }
 
 .bg-white {
-	background-color: var(--white);
+	background-color: var(--white) !important;
 }
 
 /**
@@ -101,7 +101,7 @@ bg-light(top)?
 */
 
 .img-responsive {
-	width: 100%;
+	width: 100% !important;
 }
 
 .rounded-circle {
@@ -133,42 +133,42 @@ bg-light(top)?
 }
 
 .w-100 {
-	width: 100%;
+	width: 100% !important;
 }
 
 .w-60 {
-	width: 60%;
+	width: 60% !important;
 }
 
 .w-50 {
-	width: 50%;
+	width: 50% !important;
 }
 
 .w-40 {
-	width: 40%;
+	width: 40% !important;
 }
 
 // TODO - add several heights
 .h-100 {
-	height: 100%;
+	height: 100% !important;
 }
 
 // TODO - check if more classes are needed
 // arrange elements top, start, bottom, end
 .top-0 {
-	top: 0px;
+	top: 0px !important;
 }
 
 .right-0 {
-	right: 0px;
+	right: 0px !important;
 }
 
 .bottom-0 {
-	bottom: 0px;
+	bottom: 0px !important;
 }
 
 .left-0 {
-	left: 0px;
+	left: 0px !important;
 }
 
 .fixed-top {
@@ -180,7 +180,7 @@ bg-light(top)?
 }
 
 .overflow-y-scroll {
-	overflow-y: scroll;
+	overflow-y: scroll !important;
 }
 
 .no-scroll {
@@ -190,10 +190,6 @@ bg-light(top)?
 	height: 100%;
 }
 
-.border-0 {
-	border: 0 !important;
-}
-
 // width, height, display with breakpoints and directions
 @each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 	@media (min-width: #{$bp-value}) {
@@ -250,6 +246,6 @@ bg-light(top)?
 
 @each $name, $value in map.get(theme.$theme, zIndexLevels) {
 	.z-index-#{$name} {
-		z-index: $value;
+		z-index: $value !important;
 	}
 }

package/scss/variables.scss

@@ -34,9 +34,8 @@
 	--black: #000000;
 
 	--bg-surface: var(--white);
-
+	--body-bg-color: var(--white);
 	--font-color: var(--gray-100);
-	--body-bg-color: var(--gray-950);
 
 	--highlight: rgba(0, 0, 0, 0.08);
 
@@ -49,7 +48,7 @@
 	--disabled-border-color: var(--gray-850);
 
 	--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
-	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+	--shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
 	--shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.175);
 
 	--focus-outline: 2px solid rgba(var(--primary-rgb), 0.5);