@oardi/css-utils 0.29.9 → 0.31.0

package/package.json

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

@@ -4,9 +4,9 @@
 .breadcrumb {
 	--breadcrumb-padding-x: 0;
 	--breadcrumb-padding-y: 0;
-	--breadcrumb-margin-bottom: 1rem;
+	--breadcrumb-margin-bottom: var(--spacer-3);
 	--breadcrumb-divider-color: var(--secondary);
-	--breadcrumb-item-padding-x: 0.5rem;
+	--breadcrumb-item-padding-x: var(--spacer-2);
 	--breadcrumb-item-active-color: var(--secondary);
 
 	display: flex;

package/scss/components/button.scss

@@ -6,7 +6,7 @@
 
 	display: inline-flex;
 	align-items: center;
-	gap: 0.5rem;
+	gap: var(--spacer-2);
 
 	border-width: var(--button-border-width, var(--border-width));
 	border-style: solid;

package/scss/components/card.scss

@@ -1,17 +1,24 @@
+@use '../spacings.scss';
+
 .card {
-	--card-body-padding: 1rem;
+	--card-body-padding: var(--spacer-3);
+	--card-bg-color: var(--bg-surface);
+	--card-border-width: var(--border-width);
+	--card-border-color: var(--border-color);
+	--card-border-radius: var(--border-radius);
+	--card-bg-hover-color: var(--gray-900);
 
-	background-color: var(--card-bg-color, var(--bg-surface));
-	border: var(--card-border-width, var(--border-width)) solid var(--card-border-color, var(--border-color));
-	border-radius: var(--border-radius);
+	background-color: var(--card-bg-color);
+	border: var(--card-border-width) solid var(--card-border-color);
+	border-radius: var(--card-border-radius);
 
 	&.is-hoverable:hover {
-		background-color: var(--card-bg-hover-color, var(--gray-900));
+		background-color: var(--card-bg-hover-color);
 		cursor: pointer;
 	}
 
 	.card-title + * {
-		margin-top: 1rem;
+		@extend .mt-3;
 	}
 
 	.card-body {

package/scss/components/chip.scss

@@ -4,9 +4,11 @@
 .chip-base {
 	--chip-label-padding: 0 7px;
 	--chip-border-radius: 16px;
+	--chip-border-width: var(--border-width);
+	--chip-highlight: var(--highlight);
 
 	display: inline-flex;
-	border-width: var(--chip-border-width, var(--border-width));
+	border-width: var(--chip-border-width);
 	border-style: solid;
 	background-color: transparent;
 	border-color: transparent;
@@ -33,8 +35,8 @@
 	line-height: var(--line-height);
 
 	&:hover {
-		background-color: var(--chip-highlight, var(--highlight));
-		border-color: var(--chip-highlight, var(--highlight));
+		background-color: var(--chip-highlight);
+		border-color: var(--chip-highlight);
 	}
 
 	&.disabled,

package/scss/components/drawer.scss

@@ -1,4 +1,7 @@
 .drawer {
+	--drawer-border-right-color: var(--border-color);
+	--drawer-bg-color: var(--bg-surface);
+
 	display: flex;
 	flex-direction: column;
 	position: fixed;
@@ -7,9 +10,9 @@
 	height: 100dvh;
 	width: min(20rem, 100%);
 	z-index: 1045;
-	border-right: 1px solid var(--drawer-border-right-color, var(--border-color));
+	border-right: 1px solid var(--drawer-border-right-color);
 	justify-content: start;
-	background-color: var(--drawer-bg-color, var(--bg-surface));
+	background-color: var(--drawer-bg-color);
 	transition: left 250ms ease-out;
 
 	&.open ~ .overlay {

package/scss/components/expansion-panel.scss

@@ -1,16 +1,18 @@
 .expansion-panel-container {
 	display: flex;
 	flex-direction: column;
-	gap: 0.5rem;
+	gap: var(--spacer-2);
 
 	.expansion-panel {
 		--expansion-panel-header-padding: 1.25rem 2.5rem 1.25rem 1.25rem;
 		--expansion-panel-inner-padding: 1.25rem;
+		--expansion-panel-border-color: var(--border-color);
+		--expansion-panel-header-bg-color: var(--bg-surface);
 
 		color: var(--font-color);
-		border: 1px solid var(--expansion-panel-border-color, var(--border-color));
+		border: 1px solid var(--expansion-panel-border-color);
 		border-radius: var(--border-radius);
-		background-color: var(--expansion-panel-header-bg-color, var(--bg-surface));
+		background-color: var(--expansion-panel-header-bg-color);
 		transition: var(--transition-color);
 
 		&:focus {
@@ -51,7 +53,9 @@
 		}
 
 		.expansion-panel-content {
-			background-color: var(--expansion-panel-content-bg-color, var(--bg-surface));
+			--expansion-panel-content-bg-color: var(--bg-surface);
+
+			background-color: var(--expansion-panel-content-bg-color);
 			border-bottom-left-radius: var(--border-radius);
 			border-bottom-right-radius: var(--border-radius);
 

package/scss/components/form.scss

@@ -1,4 +1,11 @@
 .form-control {
+	--input-bg-color: var(--bg-surface);
+	--input-border-width: var(--border-width);
+	--input-border-color: var(--border-color);
+	--form-control-disabled-font-color: var(--disabled-font-color);
+	--form-control-disabled-bg-color: var(--disabled-bg-color);
+	--form-control-disabled-border-color: var(--disabled-border-color);
+
 	display: block;
 	width: 100%;
 	padding: 0.375rem 0.75rem;
@@ -9,14 +16,14 @@
 	-moz-appearance: none;
 	appearance: none;
 	color: var(--font-color);
-	background-color: var(--input-bg-color, var(--bg-surface));
+	background-color: var(--input-bg-color);
 	background-clip: padding-box;
-	border: var(--input-border-width, var(--border-width)) solid var(--input-border-color, var(--border-color));
+	border: var(--input-border-width) solid var(--input-border-color);
 	border-radius: var(--border-radius);
 	transition: transform 0.2s ease;
 
 	&:focus {
-		background-color: var(--input-bg-color, var(--bg-surface));
+		background-color: var(--input-bg-color);
 		border-color: var(--primary-dark);
 		outline: var(--focus-outline);
 		outline-offset: var(--focus-offset);
@@ -33,9 +40,9 @@
 	}
 
 	&[disabled] {
-		color: var(--form-control-disabled-font-color, var(--disabled-font-color));
-		background-color: var(--form-control-disabled-bg-color, var(--disabled-bg-color));
-		border-color: var(--form-control-disabled-bg-color, var(--disabled-border-color));
+		color: var(--form-control-disabled-font-color);
+		background-color: var(--form-control-disabled-bg-color);
+		border-color: var(--form-control-disabled-border-color);
 	}
 
 	&[disabled]:hover,

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/spacings.scss

@@ -1,28 +1,28 @@
 @use 'sass:map';
 @use './theme.scss';
 
-.ml-auto {
-	margin-left: auto;
+.ms-auto {
+	margin-left: auto !important;
 }
-.mr-auto {
-	margin-right: auto;
+.me-auto {
+	margin-right: auto !important;
 }
 .mt-auto {
-	margin-top: auto;
+	margin-top: auto !important;
 }
 .mb-auto {
-	margin-bottom: auto;
+	margin-bottom: auto !important;
 }
 
 // margin / padding spacings
 // i.e. m-2, m-5, p-1, ...
 @each $key, $value in map.get(theme.$theme, spacings) {
 	.m-#{$key} {
-		margin: $value;
+		margin: $value !important;
 	}
 
 	.p-#{$key} {
-		padding: $value;
+		padding: $value !important;
 	}
 }
 

package/scss/theme.scss

@@ -1,23 +1,25 @@
 @use 'sass:map';
 
+$spacer: 1rem;
+
 $default-theme: (
 	colors: (
 		'primary': #9163e7,
 		'secondary': #595959,
 		'success': #16a085,
-		'warn': #ffc557,
+		'warning': #ffc557,
 		'error': #eb4242,
 		'white': #ffffff,
 		'black': #000000,
 	),
 	on-colors: (
-		'primary': #ffffff,
-		'secondary': #ffffff,
-		'success': #ffffff,
-		'warn': #ffffff,
-		'error': #ffffff,
-		'white': #000000,
-		'black': #ffffff,
+		'on-primary': #ffffff,
+		'on-secondary': #ffffff,
+		'on-success': #ffffff,
+		'on-warning': #ffffff,
+		'on-error': #ffffff,
+		'on-white': #000000,
+		'on-black': #ffffff,
 	),
 	grays: (
 		50: hsl(0, 0%, 5%),
@@ -42,21 +44,21 @@ $default-theme: (
 	),
 	directions: (
 		t: top,
-		r: right,
+		e: right,
 		// rename r to e -> end
 		b: bottom,
-		l: left,
+		s: left,
 		// rename l to s -> start
 		// add x for left and right
 		 // add y for top and bottom
 	),
 	spacings: (
-		0: 0rem,
-		1: 1rem,
-		2: 2rem,
-		3: 3rem,
-		4: 4rem,
-		5: 5rem,
+		0: 0,
+		1: $spacer * 0.25,
+		2: $spacer * 0.5,
+		3: $spacer,
+		4: $spacer * 1.5,
+		5: $spacer * 3,
 		// add auto
 	),
 	positions: (

package/scss/utilities.scss

@@ -12,22 +12,22 @@
 	max-width: var(--container);
 	margin-left: auto;
 	margin-right: auto;
-	padding-left: 1rem;
-	padding-right: 1rem;
+	padding-left: var(--spacer-3);
+	padding-right: var(--spacer-3);
 	width: 100%;
 }
 
 // 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

@@ -19,13 +19,17 @@
 	}
 
 	@each $name, $value in map.get(theme.$theme, on-colors) {
-		--on-#{$name}: #{$value};
+		--#{$name}: #{$value};
 	}
 
 	@each $name, $value in map.get(theme.$theme, grays) {
 		--gray-#{$name}: #{$value};
 	}
 
+	@each $name, $value in map.get(theme.$theme, spacings) {
+		--spacer-#{$name}: #{$value};
+	}
+
 	--white: #ffffff;
 	--black: #000000;
 
@@ -42,7 +46,7 @@
 
 	--disabled-font-color: var(--gray-600);
 	--disabled-bg-color: var(--gray-800);
-	--disabled-border-color: var(--gray-800);
+	--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);