@oardi/css-utils 0.27.2 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.27.2",
+	"version": "0.29.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/readme.md

@@ -47,6 +47,10 @@ will render as:
 
 <button class="btn btn-primary">some button text</button>
 
+### Maintainer
+
+Developed and maintained by [Ardian Shala](https://github.com/oardi)
+
 ### Credits and Inspiration
 
 The main Frameworks which inspired me to create this set of CSS Utility Classes:

package/scss/components/button.scss

@@ -4,16 +4,13 @@
 .btn-base {
 	--button-padding: 5px 14px;
 	--button-border-width: 2px;
-	--button-text-highlight: var(--gray-90);
-	--button-icon-highlight: var(--gray-90);
-	--button-disabled-bg-color: var(--gray-80);
 
 	border-width: var(--button-border-width);
 	border-style: solid;
 	background-color: transparent;
 	border-color: transparent;
 	color: var(--font-color);
-	transition: all 0.3s ease;
+	transition: var(--transition-color);
 	-webkit-tap-highlight-color: transparent;
 	touch-action: manipulation; // ios fix
 
@@ -37,23 +34,18 @@
 .btn {
 	@extend .btn-base;
 
-	border-radius: var(--border-radius);
+	border-radius: var(--button-border-radius, var(--border-radius));
 	line-height: var(--line-height);
 	padding: var(--button-padding);
 
-	&:hover {
-		background-color: var(--button-text-highlight);
-		border-color: var(--button-text-highlight);
-	}
-
 	&[disabled],
 	&[disabled]:hover,
 	&[active]:hover {
-		color: var(--gray-30);
+		color: var(--gray-300);
 		outline: 0;
 		box-shadow: none;
-		background-color: var(--button-disabled-bg-color);
-		border-color: var(--button-disabled-bg-color);
+		background-color: var(--button-disabled-bg-color, var(--disabled-bg-color));
+		border-color: var(--button-disabled-bg-color, var(--disabled-border-color));
 	}
 }
 
@@ -96,12 +88,13 @@
 	.btn-#{$name}-text {
 		color: var(--#{$name});
 
+		&:hover,
+		&:active {
+			background-color: var(--button-highlight, var(--highlight));
+		}
+
 		&:focus {
 			outline: 2px solid var(--#{$name}-light);
 		}
 	}
 }
-
-.btn-rounded {
-	border-radius: 50px;
-}

package/scss/components/card.scss

@@ -15,3 +15,11 @@
 		padding: var(--card-body-padding);
 	}
 }
+
+// [data-theme='red'] {
+// 	.card,
+// 	&.card {
+// 		color: white;
+// 		background-color: red;
+// 	}
+// }

package/scss/components/chip.scss

@@ -3,7 +3,6 @@
 
 .chip-base {
 	--chip-label-padding: 0 7px;
-	--chip-text-highlight: var(--gray-90);
 	--chip-border-width: 2px;
 	--chip-border-radius: 16px;
 
@@ -13,11 +12,10 @@
 	background-color: transparent;
 	border-color: transparent;
 	color: var(--font-color);
-	transition: all 0.3s ease;
+	transition: var(--transition-color);
 	-webkit-tap-highlight-color: transparent;
 	touch-action: manipulation; // ios fix
 
-	// TODO - don´t add hover on default
 	&:hover {
 		cursor: pointer;
 		text-decoration: none;
@@ -26,8 +24,6 @@
 	&.disabled:hover,
 	.disabled:focus {
 		cursor: not-allowed;
-		// background-color: var(--chip-disabled-bg-color, var(--bg-surface));
-		// border-color: var(--chip-border-color, var(--border-color));
 	}
 }
 
@@ -38,14 +34,14 @@
 	line-height: var(--line-height);
 
 	&:hover {
-		background-color: var(--button-text-highlight);
-		border-color: var(--button-text-highlight);
+		background-color: var(--chip-highlight, var(--highlight));
+		border-color: var(--chip-highlight, var(--highlight));
 	}
 
 	&.disabled,
 	&.disabled:hover,
 	&[active]:hover {
-		color: var(--gray-30);
+		color: var(--gray-300);
 		outline: 0;
 		background-color: var(--disabled-bg-color);
 		border-color: var(--disabled-border-color);

package/scss/components/expansion-panel.scss

@@ -11,7 +11,7 @@
 		border: 1px solid var(--expansion-panel-border-color, var(--border-color));
 		border-radius: var(--border-radius);
 		background-color: var(--expansion-panel-header-bg-color, var(--bg-surface));
-		transition: all 0.3s ease;
+		transition: var(--transition-color);
 
 		&:focus {
 			outline: var(--focus-outline);

package/scss/components/form.scss

@@ -44,7 +44,7 @@
 	}
 
 	&::placeholder {
-		color: var(--gray-50);
+		color: var(--gray-500);
 	}
 }
 
@@ -113,7 +113,7 @@ textarea.form-control {
 		&[disabled]:focus {
 			cursor: not-allowed;
 			outline: 0;
-			background-color: var(--gray-90);
+			background-color: var(--gray-900);
 			border-color: var(--disabled-border-color);
 		}
 	}

package/scss/components/icon-button.scss

@@ -11,7 +11,6 @@ $sizes: (
 .icon-btn {
 	--icon-button-padding: 0.25rem;
 	--icon-button-border-width: 2px;
-	--icon-button-highlight: var(--gray-90);
 	--icon-button-disabled-bg-color: none;
 
 	fill: var(--font-color);
@@ -29,7 +28,7 @@ $sizes: (
 	background-color: transparent;
 	border-color: transparent;
 	color: var(--font-color);
-	transition: all 0.3s ease;
+	transition: var(--transition-color);
 	-webkit-tap-highlight-color: transparent;
 	touch-action: manipulation; // ios fix
 
@@ -42,14 +41,14 @@ $sizes: (
 	&:hover {
 		cursor: pointer;
 		text-decoration: none;
-		background-color: var(--icon-button-highlight);
+		background-color: var(--icon-button-highlight, var(--highlight));
 	}
 
 	&[disabled],
 	&[disabled]:hover,
 	&[active]:hover {
-		color: var(--gray-80);
-		fill: var(--gray-80);
+		color: var(--gray-800);
+		fill: var(--gray-800);
 		cursor: not-allowed;
 		outline: 0;
 		background-color: var(--icon-button-disabled-bg-color);

package/scss/components/navbar.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../theme.scss';
+
 .navbar {
 	padding-top: 0.6rem;
 	padding-bottom: 0.6rem;
@@ -12,3 +15,10 @@
 	text-decoration: none;
 	color: var(--primary-dark);
 }
+
+@each $name, $value in map.get(theme.$theme, colors) {
+	.navbar-#{$name} {
+		color: var(--on-#{$name});
+		background-color: var(--#{$name});
+	}
+}

package/scss/components/tabs.scss

@@ -1,6 +1,4 @@
 .tabs {
-	--tab-highlight: var(--highlight);
-
 	display: flex;
 	cursor: pointer;
 	-webkit-tap-highlight-color: transparent;
@@ -16,7 +14,7 @@
 		border-bottom: 3px solid var(--tab-border-color, var(--border-color));
 		flex: 1 0 auto;
 
-		transition: all 0.3s ease;
+		transition: var(--transition-color);
 
 		&.active {
 			color: var(--primary);
@@ -33,10 +31,11 @@
 		&:hover {
 			cursor: pointer;
 			color: var(--primary);
+			background-color: var(--tab-highlight, var(--highlight));
 		}
 
 		&.disabled {
-			color: var(--gray-80);
+			color: var(--gray-800);
 			outline: 0;
 			&:hover {
 				cursor: not-allowed;
@@ -50,7 +49,7 @@
 	padding: 20px;
 	background-color: var(--tab-content-bg-color, var(--bg-surface));
 
-	transition: all 0.3s ease;
+	transition: var(--transition-color);
 
 	&.active {
 		display: block;

package/scss/components/toast.scss

@@ -15,7 +15,7 @@
 
 @each $name, $value in map.get(theme.$theme, colors) {
 	.toast-#{$name} {
-		color: var(--white);
+		color: var(--on-#{$name});
 		background-color: var(--#{$name});
 	}
 }

package/scss/flex.scss

@@ -153,14 +153,14 @@ $flex-align-items-alignments: (start, end, center, between, around, evenly);
 // gap - move to own file?
 @each $key, $value in map.get(theme.$theme, spacings) {
 	.gap-#{$key} {
-		gap: $value;
+		gap: $value !important;
 	}
 
 	.row-gap-#{$key} {
-		row-gap: $value;
+		row-gap: $value !important;
 	}
 
 	.column-gap-#{$key} {
-		column-gap: $value;
+		column-gap: $value !important;
 	}
 }

package/scss/theme.scss

@@ -2,29 +2,43 @@
 
 $default-theme: (
 	colors: (
-		primary: #715acd,
-		secondary: #595959,
-		success: #16a085,
-		warn: #f6d545,
-		error: #f03e3e,
+		'primary': #6c5ce7,
+		'secondary': #595959,
+		'success': #16a085,
+		'warn': #ffc557,
+		'error': #f03e3e,
+		'white': #ffffff,
+		'black': #000000,
 	),
 	on-colors: (
-		primary: #ffffff,
-		secondary: #ffffff,
-		success: #ffffff,
-		warn: #ffffff,
-		error: #ffffff,
+		'primary': #ffffff,
+		'secondary': #ffffff,
+		'success': #ffffff,
+		'warn': #ffffff,
+		'error': #ffffff,
+		'white': #000000,
+		'black': #ffffff,
 	),
 	grays: (
-		10: hsl(0, 0%, 10%),
-		20: hsl(0, 0%, 20%),
-		30: hsl(0, 0%, 30%),
-		40: hsl(0, 0%, 40%),
-		50: hsl(0, 0%, 50%),
-		60: hsl(0, 0%, 60%),
-		70: hsl(0, 0%, 70%),
-		80: hsl(0, 0%, 80%),
-		90: hsl(0, 0%, 90%),
+		50: hsl(0, 0%, 5%),
+		100: hsl(0, 0%, 10%),
+		150: hsl(0, 0%, 15%),
+		200: hsl(0, 0%, 20%),
+		250: hsl(0, 0%, 25%),
+		300: hsl(0, 0%, 30%),
+		350: hsl(0, 0%, 35%),
+		400: hsl(0, 0%, 40%),
+		450: hsl(0, 0%, 45%),
+		500: hsl(0, 0%, 50%),
+		550: hsl(0, 0%, 55%),
+		600: hsl(0, 0%, 60%),
+		650: hsl(0, 0%, 65%),
+		700: hsl(0, 0%, 70%),
+		750: hsl(0, 0%, 75%),
+		800: hsl(0, 0%, 80%),
+		850: hsl(0, 0%, 85%),
+		900: hsl(0, 0%, 90%),
+		950: hsl(0, 0%, 95%),
 	),
 	directions: (
 		t: top,

package/scss/utilities.scss

@@ -34,25 +34,44 @@
 	color: var(--white) !important;
 }
 
-.text-dark {
+.text-black {
 	color: var(--black) !important;
 }
 
+.bg-opacity-10 {
+	--bg-opacity: 0.1;
+}
+
+.bg-opacity-25 {
+	--bg-opacity: 0.25;
+}
+
+.bg-opacity-50 {
+	--bg-opacity: 0.5;
+}
+
+.bg-opacity-75 {
+	--bg-opacity: 0.75;
+}
+
 @each $name, $value in map.get(theme.$theme, colors) {
 	.text-#{$name} {
 		color: var(--#{$name});
 	}
 
+	// deprecated
 	.bg-#{$name}-light {
 		background-color: var(--#{$name}-light);
 		color: var(--on-#{$name});
 	}
 
 	.bg-#{$name} {
-		background-color: var(--#{$name});
+		// background-color: var(--#{$name});
 		color: var(--on-#{$name});
+		background-color: rgba(var(--#{$name}-rgb), var(--bg-opacity)) !important;
 	}
 
+	// deprecated
 	.bg-#{$name}-dark {
 		background-color: var(--#{$name}-dark);
 		color: var(--on-#{$name});

package/scss/variables.scss

@@ -2,10 +2,18 @@
 @use 'sass:map';
 @use './theme.scss' as theme;
 
+@function to-rgb-string($color) {
+	$r: color.channel($color, 'red', $space: rgb);
+	$g: color.channel($color, 'green', $space: rgb);
+	$b: color.channel($color, 'blue', $space: rgb);
+	@return '#{$r}, #{$g}, #{$b}';
+}
+
 :root {
 	@each $name, $value in map.get(theme.$theme, colors) {
 		--#{$name}-light: #{color.adjust($value, $lightness: 15%)};
 		--#{$name}: #{$value};
+		--#{$name}-rgb: #{to-rgb-string($value)};
 		--#{$name}-dark: #{color.adjust($value, $lightness: -15%)};
 		--text-#{$name}: #{$value};
 	}
@@ -23,23 +31,27 @@
 
 	--bg-surface: var(--white);
 
-	--font-color: var(--gray-10);
+	--font-color: var(--gray-100);
 	--body-bg-color: #ffffff;
 
-	--highlight: rgba(189, 189, 189, 0.1);
-	--border-color: var(--gray-90);
-	--border-radius: 6px;
+	--highlight: var(--gray-900);
+	--border-color: var(--gray-900);
+	--border-radius: 8px;
 
-	--disabled-bg-color: var(--gray-80);
-	--disabled-border-color: var(--gray-80);
+	--disabled-bg-color: var(--gray-800);
+	--disabled-border-color: var(--gray-800);
 
-	--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);
+	--shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+	--shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.175);
 
 	--focus-outline: 2px solid var(--primary-light);
 	--focus-outline-error: 2px solid var(--error-light);
 	--focus-offset: -2px;
 
 	--container: 900px;
+
+	--transition-color: color 0.4s, background-color 0.4s;
+
+	--bg-opacity: 1;
 }