@oardi/css-utils 0.38.1 → 0.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.38.1",
+	"version": "0.39.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/components/button.scss

@@ -11,7 +11,7 @@
 
 	--button-font-size: var(--font-size);
 	--button-padding-y: 0.25rem;
-	--button-padding-x: 0.9rem;
+	--button-padding-x: 1rem;
 
 	--button-disabled-font-color: var(--disabled-font-color);
 	--button-disabled-bg-color: var(--disabled-bg-color);
@@ -72,6 +72,7 @@
 	.btn-#{$name} {
 		--button-color: var(--#{$name});
 		--button-color-hover: var(--#{$name}-hover);
+		--button-color-active: var(--#{$name}-active);
 		--button-color-rgb: var(--#{$name}-rgb);
 		--button-on-color: var(--on-#{$name});
 	}
@@ -83,13 +84,17 @@
 	background-color: var(--button-color);
 	border-color: var(--button-color);
 
-	&:hover,
-	&.active,
-	&:active {
+	&:hover {
 		background-color: var(--button-color-hover);
 		border-color: var(--button-color-hover);
 	}
 
+	&.active,
+	&:active {
+		background-color: var(--button-color-active);
+		border-color: var(--button-color-active);
+	}
+
 	&:focus-visible {
 		outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
 	}
@@ -101,15 +106,21 @@
 	background-color: transparent;
 	border-color: var(--button-color);
 
-	&:hover,
-	&.active,
-	&:active {
+	&:hover {
 		color: var(--button-on-color);
 		fill: var(--button-on-color);
 		background-color: var(--button-color-hover);
 		border-color: var(--button-color-hover);
 	}
 
+	&.active,
+	&:active {
+		color: var(--button-on-color);
+		fill: var(--button-on-color);
+		background-color: var(--button-color-active);
+		border-color: var(--button-color-active);
+	}
+
 	&:focus-visible {
 		color: var(--button-on-color);
 		fill: var(--button-on-color);

package/scss/components/chip.scss

@@ -7,6 +7,7 @@
 	--chip-border-radius: 16px;
 	--chip-border-width: var(--border-width);
 	--chip-highlight: var(--highlight);
+	--chip-transition-duration: var(--transition-duration, 0.2s);
 
 	display: inline-flex;
 	border-width: var(--chip-border-width);
@@ -15,7 +16,12 @@
 	border-color: transparent;
 	color: var(--font-color);
 	font-size: var(--chip-label-font-size);
-	transition: var(--transition-color);
+
+	transition:
+		color var(--chip-transition-duration),
+		background-color var(--chip-transition-duration),
+		border-color var(--chip-transition-duration);
+
 	-webkit-tap-highlight-color: transparent;
 	touch-action: manipulation; // ios fix
 

package/scss/components/expansion-panel.scss

@@ -8,15 +8,25 @@
 		--expansion-panel-inner-padding: 1.25rem;
 		--expansion-panel-border-color: var(--border-color);
 		--expansion-panel-header-bg-color: var(--bg-surface);
+		--expansion-panel-transition-duration: var(--transition-duration, 0.2s);
+
+		--expansion-panel-focus-outline-width: var(--focus-outline-width);
+		--expansion-panel-focus-outline-style: var(--focus-outline-style);
+		--expansion-panel-focus-outline-color: var(--focus-outline-color);
 
 		color: var(--font-color);
 		border: 1px solid var(--expansion-panel-border-color);
 		border-radius: var(--border-radius);
 		background-color: var(--expansion-panel-header-bg-color);
-		transition: var(--transition-color);
+
+		transition:
+			color var(--expansion-panel-transition-duration),
+			background-color var(--expansion-panel-transition-duration),
+			border-color var(--expansion-panel-transition-duration);
 
 		&:focus {
-			outline: var(--focus-outline);
+			outline: var(--expansion-panel-focus-outline-width) var(--expansion-panel-focus-outline-style)
+				var(--expansion-panel-focus-outline-color);
 			outline-offset: var(--focus-offset);
 		}
 

package/scss/components/form.scss

@@ -2,10 +2,15 @@
 	--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);
 
+	--form-control-focus-outline-width: var(--focus-outline-width);
+	--form-control-focus-outline-style: var(--focus-outline-style);
+	--form-control-focus-outline-color: var(--focus-outline-color);
+
 	display: block;
 	width: 100%;
 	max-width: 100%;
@@ -26,7 +31,8 @@
 	&:focus {
 		background-color: var(--input-bg-color);
 		border-color: var(--primary-hover);
-		outline: var(--focus-outline);
+		outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
+			var(--form-control-focus-outline-color);
 		outline-offset: var(--focus-offset);
 	}
 
@@ -111,7 +117,8 @@ textarea.form-control {
 		}
 
 		&:focus {
-			outline: var(--focus-outline);
+			outline: var(--form-control-focus-outline-width) var(--form-control-focus-outline-style)
+				var(--form-control-focus-outline-color);
 			outline-offset: var(--focus-offset);
 		}
 

package/scss/components/icon-button.scss

@@ -18,10 +18,13 @@ $sizes: (
 
 	--icon-button-focus-outline-width: var(--focus-outline-width);
 	--icon-button-focus-outline-style: var(--focus-outline-style);
+	--icon-button-focus-outline-color: var(--focus-outline-color);
 
 	--icon-button-svg-width: 18px;
 	--icon-button-svg-height: 18px;
 
+	--icon-button-transition-duration: var(--transition-duration, 0.2s);
+
 	padding: var(--icon-button-padding);
 	min-width: var(--icon-button-min-width);
 	width: var(--icon-button-width);
@@ -39,7 +42,11 @@ $sizes: (
 	fill: var(--font-color);
 	color: var(--font-color);
 
-	transition: var(--transition-color);
+	transition:
+		color var(--icon-button-transition-duration),
+		background-color var(--icon-button-transition-duration),
+		border-color var(--icon-button-transition-duration);
+
 	-webkit-tap-highlight-color: transparent;
 	touch-action: manipulation; // ios fix
 

package/scss/components/tabs.scss

@@ -6,6 +6,8 @@
 	overflow-y: visible;
 
 	.tab {
+		--tab-transition-duration: var(--transition-duration, 0.2s);
+
 		color: var(--font-color);
 		background-color: var(--tab-bg-color, var(--bg-surface));
 		text-align: center;
@@ -14,7 +16,10 @@
 		border-bottom: 3px solid var(--tab-border-color, var(--border-color));
 		flex: 1 0 auto;
 
-		transition: var(--transition-color);
+		transition:
+			color var(--tab-transition-duration),
+			background-color var(--tab-transition-duration),
+			border-color var(--tab-transition-duration);
 
 		&.active {
 			color: var(--primary);
@@ -46,11 +51,16 @@
 }
 
 .tab-content {
+	--tab-content-transition-duration: var(--transition-duration, 0.2s);
+
 	display: none;
 	padding: 20px;
 	background-color: var(--tab-content-bg-color, var(--bg-surface));
 
-	transition: var(--transition-color);
+	transition:
+		color var(--tab-content-transition-duration),
+		background-color var(--tab-content-transition-duration),
+		border-color var(--tab-content-transition-duration);
 
 	&.active {
 		display: block;

package/scss/theme.scss

@@ -4,22 +4,48 @@ $spacer: 1rem;
 
 $default-theme: (
 	colors: (
-		'primary': #9163e7,
-		'secondary': #595959,
-		'success': #16a085,
-		'warning': #ffc557,
-		'error': #eb4242,
-		'white': #ffffff,
-		'black': #000000,
-	),
-	on-colors: (
-		'on-primary': #ffffff,
-		'on-secondary': #ffffff,
-		'on-success': #ffffff,
-		'on-warning': #ffffff,
-		'on-error': #ffffff,
-		'on-white': #000000,
-		'on-black': #ffffff,
+		'primary': (
+			base: #9163e7,
+			hover: #7e4fdb,
+			active: #6f3bd2,
+			on: #ffffff,
+		),
+		'secondary': (
+			base: #595959,
+			hover: #4d4d4d,
+			active: #414141,
+			on: #ffffff,
+		),
+		'success': (
+			base: #16a085,
+			hover: #138f77,
+			active: #0f7e69,
+			on: #ffffff,
+		),
+		'warning': (
+			base: #ffc557,
+			hover: #f0b84f,
+			active: #e0a843,
+			on: #000000,
+		),
+		'error': (
+			base: #eb4242,
+			hover: #d73a3a,
+			active: #c73232,
+			on: #ffffff,
+		),
+		'white': (
+			base: #ffffff,
+			hover: #f2f2f2,
+			active: #e6e6e6,
+			on: #000000,
+		),
+		'black': (
+			base: #000000,
+			hover: #1a1a1a,
+			active: #333333,
+			on: #ffffff,
+		),
 	),
 	grays: (
 		50: hsl(0, 0%, 5%),

package/scss/typography.scss

@@ -72,6 +72,10 @@ h6,
 a {
 	--link-font-color: var(--primary);
 
+	--link-focus-outline-width: var(--focus-outline-width);
+	--link-focus-outline-style: var(--focus-outline-style);
+	--link-focus-outline-color: var(--focus-outline-color);
+
 	color: var(--link-font-color);
 	fill: var(--link-font-color);
 
@@ -82,7 +86,7 @@ a {
 	}
 
 	&:focus {
-		outline: var(--focus-outline);
+		outline: var(--link-focus-outline-width) var(--link-focus-outline-style) var(--link-focus-outline-color);
 		outline-offset: var(--focus-offset);
 	}
 }

package/scss/variables.scss

@@ -11,14 +11,16 @@
 
 :root {
 	@each $name, $value in map.get(theme.$theme, colors) {
-		--#{$name}: #{$value};
-		--#{$name}-rgb: #{to-rgb-string($value)};
-		--#{$name}-hover: #{color.adjust($value, $lightness: -10%)};
-		--text-#{$name}: #{$value};
-	}
+		$base: map.get($value, base);
+		$hover: map.get($value, hover);
+		$active: map.get($value, active);
+		$on: map.get($value, on);
 
-	@each $name, $value in map.get(theme.$theme, on-colors) {
-		--#{$name}: #{$value};
+		--#{$name}: #{$base};
+		--#{$name}-hover: #{$hover};
+		--#{$name}-active: #{$active};
+		--#{$name}-rgb: #{to-rgb-string($base)};
+		--on-#{$name}: #{$on};
 	}
 
 	@each $name, $value in map.get(theme.$theme, grays) {
@@ -29,9 +31,6 @@
 		--spacer-#{$name}: #{$value};
 	}
 
-	--white: #ffffff;
-	--black: #000000;
-
 	--bg-surface: var(--white);
 	--body-bg-color: var(--white);
 	--font-color: var(--gray-100);
@@ -53,13 +52,13 @@
 	--focus-outline-color: rgba(var(--primary-rgb), 0.5);
 	--focus-outline-style: solid;
 	--focus-outline-width: 2px;
-	--focus-outline-error: 2px solid var(--error-light);
+	// create focus outline for every theme color
+	--focus-outline-error: var(--focus-outline-width) var(focus-outline-style) rgba(var(--error-rgb), 0.5);
 	--focus-offset: 0px;
 
 	--container: 900px;
 
 	--transition-duration: 0.2s;
-	--transition-color: color 0.4s, background-color 0.4s;
 
 	--bg-opacity: 1;
 }