@oardi/css-utils 0.38.0 → 0.39.0

package/package.json

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

@@ -40,12 +40,12 @@ This will render a centered text:
 ### Use predefined component classes
 
 ```html
-<button class="btn btn-primary">some button text</button>
+<button class="btn btn-solid btn-primary">some button text</button>
 ```
 
 will render as:
 
-<button class="btn btn-primary">some button text</button>
+<button class="btn btn-solid btn-primary">some button text</button>
 
 ### Maintainer
 

package/scss/components/button.scss

@@ -36,8 +36,7 @@
 	transition:
 		color var(--button-transition-duration),
 		background-color var(--button-transition-duration),
-		border-color var(--button-transition-duration),
-		outline-color var(--button-transition-duration);
+		border-color var(--button-transition-duration);
 
 	-webkit-tap-highlight-color: transparent;
 	touch-action: manipulation; // ios fix
@@ -57,9 +56,7 @@
 	}
 
 	&:disabled,
-	&[disabled],
-	&[disabled]:hover,
-	&[disabled]:focus {
+	&[disabled] {
 		cursor: not-allowed;
 		pointer-events: none;
 		box-shadow: none;
@@ -75,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});
 	}
@@ -86,14 +84,19 @@
 	background-color: var(--button-color);
 	border-color: var(--button-color);
 
-	&:hover,
-	&: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) solid rgba(var(--button-color-rgb), 0.5);
+		outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
 	}
 }
 
@@ -103,18 +106,25 @@
 	background-color: transparent;
 	border-color: var(--button-color);
 
-	&:hover,
-	&: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);
-		outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
+		outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
 		background-color: var(--button-color);
 		border-color: var(--button-color);
 	}
@@ -129,12 +139,13 @@
 	border-color: transparent;
 
 	&:hover,
+	&.active,
 	&:active {
 		background-color: var(--button-highlight);
 	}
 
 	&:focus-visible {
-		outline: var(--button-focus-outline-width) solid rgba(var(--button-color-rgb), 0.5);
+		outline: var(--button-focus-outline-width) var(--button-focus-outline-style) rgba(var(--button-color-rgb), 0.5);
 	}
 }
 

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,12 +8,17 @@
 		--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);
 
 		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);

package/scss/components/icon-button.scss

@@ -22,6 +22,8 @@ $sizes: (
 	--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 +41,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
 
@@ -73,6 +79,7 @@ $sizes: (
 }
 
 // sizes
+// change to use css vars
 @each $name, $value in $sizes {
 	.icon-btn-#{$name} {
 		min-width: $value;

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/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};
-	}
-
-	@each $name, $value in map.get(theme.$theme, on-colors) {
-		--#{$name}: #{$value};
+		$base: map.get($value, base);
+		$hover: map.get($value, hover);
+		$active: map.get($value, active);
+		$on: map.get($value, on);
+
+		--#{$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,12 @@
 	--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);
+	--focus-outline-error: 2px solid 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;
 }