@oardi/css-utils 0.51.0 → 0.53.0

package/package.json

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

@@ -1,21 +1,17 @@
-@use 'sass:map';
-
 @layer components {
 	.breadcrumb {
-		--breadcrumb-padding-x: 0;
-		--breadcrumb-padding-y: 0;
-		--breadcrumb-margin-bottom: var(--spacer-3);
+		--breadcrumb-padding-x: var(--spacer-0);
+		--breadcrumb-padding-y: var(--spacer-0);
 		--breadcrumb-divider-color: var(--text-subtle);
 		--breadcrumb-item-padding-x: var(--spacer-2);
-		--breadcrumb-item-active-color: var(--text-color-muted);
+		--breadcrumb-item-active-color: var(--text-muted);
 
 		display: flex;
 		flex-wrap: wrap;
 		padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
-		margin-bottom: var(--breadcrumb-margin-bottom);
-		font-size: var(--breadcrumb-font-size);
+		margin-bottom: var(--breadcrumb-margin-bottom, var(--spacer-3));
+		font-size: var(--breadcrumb-font-size, var(--font-size));
 		list-style: none;
-		border-radius: var(--breadcrumb-border-radius);
 
 		.breadcrumb-item {
 			&.active {
@@ -23,11 +19,11 @@
 			}
 
 			& + .breadcrumb-item {
-				padding-left: var(--breadcrumb-item-padding-x);
+				padding-inline-start: var(--breadcrumb-item-padding-x);
 
 				&::before {
-					float: left;
-					padding-right: var(--breadcrumb-item-padding-x);
+					display: inline-block;
+					padding-inline-end: var(--breadcrumb-item-padding-x);
 					color: var(--breadcrumb-divider-color);
 					content: var(--breadcrumb-divider, '/');
 				}

package/scss/components/button.scss

@@ -9,16 +9,18 @@
 		--button-focus-outline-width: var(--focus-outline-width);
 		--button-focus-outline-style: var(--focus-outline-style);
 		--button-focus-outline-color: var(--focus-outline-color);
+		--button-focus-outline-offset: var(--focus-outline-color);
 
 		--button-font-size: var(--font-size);
-		--button-padding-y: 0.25rem;
-		--button-padding-x: 1rem;
+		--button-padding-y: var(--spacer-1);
+		--button-padding-x: var(--spacer-3);
 
 		--button-disabled-text-color: var(--disabled-text-color);
 		--button-disabled-bg-color: var(--disabled-bg-color);
 		--button-disabled-border-color: var(--disabled-border-color);
 
 		--button-transition-duration: var(--transition-duration, 0.2s);
+		--button-transition-easing: var(--transition-easing);
 
 		font-size: var(--button-font-size);
 		display: inline-flex;
@@ -35,10 +37,10 @@
 		fill: currentColor;
 
 		transition:
-			color var(--button-transition-duration) ease,
-			background-color var(--button-transition-duration) ease,
-			box-shadow var(--button-transition-duration) ease,
-			border-color var(--button-transition-duration) ease;
+			color var(--button-transition-duration) var(--button-transition-easing),
+			background-color var(--button-transition-duration) var(--button-transition-easing),
+			box-shadow var(--button-transition-duration) var(--button-transition-easing),
+			border-color var(--button-transition-duration) var(--button-transition-easing);
 
 		-webkit-tap-highlight-color: transparent;
 		touch-action: manipulation; // ios fix
@@ -55,11 +57,12 @@
 		&:focus-visible {
 			outline: var(--button-focus-outline-width) var(--button-focus-outline-style)
 				var(--button-focus-outline-color);
-			outline-offset: var(--focus-offset);
+			outline-offset: var(--button-focus-outline-offset);
 		}
 
 		&:disabled,
-		&[disabled] {
+		&[disabled],
+		&.disabled {
 			cursor: not-allowed;
 			pointer-events: none;
 			box-shadow: none;
@@ -82,7 +85,6 @@
 
 	.btn-solid {
 		color: var(--button-on-color);
-		fill: var(--button-on-color);
 		background-color: var(--button-color);
 		border-color: var(--button-color);
 
@@ -105,13 +107,11 @@
 
 	.btn-outline {
 		color: var(--button-color);
-		fill: var(--button-color);
 		background-color: transparent;
 		border-color: var(--button-color);
 
 		&:hover {
 			color: var(--button-on-color);
-			fill: var(--button-on-color);
 			background-color: var(--button-color-hover);
 			border-color: var(--button-color-hover);
 		}
@@ -119,26 +119,23 @@
 		&.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);
+			// color: var(--button-on-color);
 			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);
+			// background-color: var(--button-color);
+			// border-color: var(--button-color);
 		}
 	}
 
 	.btn-text {
-		--button-highlight: var(--highlight);
+		--button-highlight: var(--bg-highlight);
 
 		color: var(--button-color);
-		fill: var(--button-color);
 		background-color: transparent;
 		border-color: transparent;
 
@@ -155,14 +152,20 @@
 	}
 
 	.btn-xs {
-		--button-padding-y: 0.15rem;
-		--button-padding-x: 0.5rem;
-		--button-font-size: 0.75rem;
+		--button-padding-y: var(--spacer-0);
+		--button-padding-x: var(--spacer-2);
+		--button-font-size: var(--font-size-xs);
 	}
 
 	.btn-sm {
-		--button-padding-y: 0.2rem;
-		--button-padding-x: 0.75rem;
-		--button-font-size: 0.875rem;
+		--button-padding-y: var(--spacer-1);
+		--button-padding-x: var(--spacer-2);
+		--button-font-size: var(--font-size-sm);
+	}
+
+	.btn-lg {
+		--button-padding-y: var(--spacer-2);
+		--button-padding-x: var(--spacer-4);
+		--button-font-size: var(--font-size-lg);
 	}
 }

package/scss/components/card.scss

@@ -1,7 +1,9 @@
 @layer components {
 	.card {
 		--card-header-padding: var(--spacer-3) var(--spacer-3) 0 var(--spacer-3);
-		--card-header-border-bottom: 0;
+		--card-header-border-bottom-width: 0;
+		--card-header-border-bottom-color: var(--card-border-color);
+		--card-body-padding-top-after-header: var(--spacer-1);
 		--card-body-padding: var(--spacer-3);
 		--card-bg-color: var(--bg-surface);
 		--card-border-width: var(--border-width);
@@ -9,43 +11,57 @@
 		--card-border-radius: var(--border-radius);
 		--card-bg-hover-color: var(--bg-surface-hover);
 		--card-title-spacer-y: var(--spacer-2);
-		--card-subtitle-color: var(--text-color-muted);
+		--card-subtitle-color: var(--text-muted);
 
 		--card-transition-duration: var(--transition-duration, 0.2s);
+		--card-transition-easing: var(--transition-easing);
 
 		background-color: var(--card-bg-color);
 		border: var(--card-border-width) solid var(--card-border-color);
 		border-radius: var(--card-border-radius);
 
 		transition:
-			color var(--card-transition-duration) ease,
-			background-color var(--card-transition-duration) ease,
-			box-shadow var(--card-transition-duration) ease,
-			border-color var(--card-transition-duration) ease;
+			color var(--card-transition-duration) var(--card-transition-easing),
+			background-color var(--card-transition-duration) var(--card-transition-easing),
+			box-shadow var(--card-transition-duration) var(--card-transition-easing),
+			border-color var(--card-transition-duration) var(--card-transition-easing);
 
-		&.action:hover {
-			background-color: var(--card-bg-hover-color);
+		&.card-action {
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--card-bg-hover-color);
+			}
 		}
 
 		.card-title {
+			margin-top: 0;
 			margin-bottom: var(--card-title-spacer-y);
 		}
 
 		.card-subtitle {
 			color: var(--card-subtitle-color);
-			margin-top: calc(-0.5 * var(--card-title-spacer-y));
+			margin-top: 0;
 			margin-bottom: var(--card-title-spacer-y);
 		}
 
+		.card-title + .card-subtitle {
+			margin-top: calc(-0.5 * var(--card-title-spacer-y));
+		}
+
 		.card-header {
 			padding: var(--card-header-padding);
-			border-bottom: var(--card-header-border-bottom);
+			border-bottom: var(--card-header-border-bottom-width) solid var(--card-header-border-bottom-color);
 
-			--card-title-spacer-y: 0;
+			--card-title-spacer-y: 0.5rem;
 		}
 
 		.card-body {
 			padding: var(--card-body-padding);
 		}
+
+		.card-header + .card-body {
+			padding-top: var(--card-body-padding-top-after-header);
+		}
 	}
 }

package/scss/components/chip.scss

@@ -1,66 +1,63 @@
 @use 'sass:map';
-@use '../theme.scss';
+@use '../theme.scss' as theme;
 
 @layer components {
-	%chip-base {
-		--chip-label-font-size: 0.9rem;
-		--chip-label-padding: 0 7px;
-		--chip-border-radius: 16px;
+	.chip {
+		--chip-color: var(--primary);
+		--chip-color-hover: var(--primary-hover);
+		--chip-color-active: var(--primary-active);
+		--chip-on-color: var(--on-primary);
+
+		--chip-font-size: var(--font-size-sm);
+		--chip-padding-y: var(--spacer-0);
+		--chip-padding-x: var(--spacer-2);
+		--chip-border-radius: 9999px;
 		--chip-border-width: var(--border-width);
-		--chip-highlight: var(--highlight);
-		--chip-transition-duration: var(--transition-duration, 0.2s);
+
+		--chip-highlight: var(--bg-highlight);
+
+		--chip-disabled-text-color: var(--disabled-text-color);
+		--chip-disabled-bg-color: var(--disabled-bg-color);
+		--chip-disabled-border-color: var(--disabled-border-color);
+
+		--chip-transition-duration: var(--transition-duration);
+		--chip-transition-easing: var(--transition-easing);
 
 		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--spacer-1);
+		padding: var(--chip-padding-y) var(--chip-padding-x);
 		border-width: var(--chip-border-width);
 		border-style: solid;
-		background-color: transparent;
 		border-color: transparent;
+		border-radius: var(--chip-border-radius);
+		background-color: transparent;
 		color: var(--text-color);
-		font-size: var(--chip-label-font-size);
+		fill: currentColor;
+		font-size: var(--chip-font-size);
+		line-height: var(--line-height);
+		text-decoration: none;
+		white-space: nowrap;
+		touch-action: manipulation;
+		-webkit-tap-highlight-color: transparent;
 
 		transition:
-			color var(--chip-transition-duration) ease,
-			background-color var(--chip-transition-duration) ease,
-			box-shadow var(--chip-transition-duration) ease,
-			border-color var(--chip-transition-duration) ease;
-
-		-webkit-tap-highlight-color: transparent;
-		touch-action: manipulation; // ios fix
+			color var(--chip-transition-duration) var(--chip-transition-easing),
+			background-color var(--chip-transition-duration) var(--chip-transition-easing),
+			box-shadow var(--chip-transition-duration) var(--chip-transition-easing),
+			border-color var(--chip-transition-duration) var(--chip-transition-easing);
 
 		&:hover {
 			cursor: pointer;
 			text-decoration: none;
-		}
-
-		&.disabled:hover,
-		.disabled:focus {
-			cursor: not-allowed;
-		}
-	}
-
-	.chip {
-		@extend %chip-base;
-
-		border-radius: var(--chip-border-radius);
-		line-height: var(--line-height);
-
-		&:hover {
 			background-color: var(--chip-highlight);
 			border-color: var(--chip-highlight);
 		}
 
-		&.disabled,
-		&.disabled:hover {
-			color: var(--disabled-text-color);
-			outline: 0;
-			background-color: var(--disabled-bg-color);
-			border-color: var(--disabled-border-color);
-		}
-
 		.chip-label {
 			display: inline-flex;
 			flex-shrink: 0;
-			padding: var(--chip-label-padding);
 			margin: 0;
 
 			& > * {
@@ -72,29 +69,60 @@
 
 	@each $name, $value in map.get(theme.$theme, colors) {
 		.chip-#{$name} {
-			color: var(--on-#{$name});
-			fill: var(--on-#{$name});
-			background-color: var(--#{$name});
-			border-color: var(--#{$name});
-
-			&:hover,
-			&:active {
-				background-color: var(--#{$name}-hover);
-				border-color: var(--#{$name}-hover);
-			}
+			--chip-color: var(--#{$name});
+			--chip-color-hover: var(--#{$name}-hover);
+			--chip-color-active: var(--#{$name}-active);
+			--chip-on-color: var(--on-#{$name});
 		}
+	}
 
-		.chip-#{$name}-outline {
-			color: var(--#{$name});
-			background-color: transparent;
-			border-color: var(--#{$name});
+	.chip-solid {
+		color: var(--chip-on-color);
+		background-color: var(--chip-color);
+		border-color: var(--chip-color);
 
-			&:hover,
-			&:active {
-				color: var(--on-#{$name});
-				background-color: var(--#{$name}-hover);
-				border-color: var(--#{$name}-hover);
-			}
+		&:hover,
+		&:active {
+			color: var(--chip-on-color);
+			background-color: var(--chip-color-hover);
+			border-color: var(--chip-color-hover);
+		}
+	}
+
+	.chip-outline {
+		color: var(--chip-color);
+		background-color: transparent;
+		border-color: var(--chip-color);
+
+		&:hover,
+		&:active {
+			color: var(--chip-on-color);
+			background-color: var(--chip-color-hover);
+			border-color: var(--chip-color-hover);
+		}
+	}
+
+	.chip-text {
+		color: var(--chip-color);
+		background-color: transparent;
+		border-color: transparent;
+
+		&:hover,
+		&:active {
+			background-color: var(--chip-highlight);
+		}
+	}
+
+	.chip {
+		&.disabled,
+		&:disabled,
+		&[disabled] {
+			cursor: not-allowed;
+			pointer-events: none;
+			outline: 0;
+			color: var(--chip-disabled-text-color);
+			background-color: var(--chip-disabled-bg-color);
+			border-color: var(--chip-disabled-border-color);
 		}
 	}
 }

package/scss/components/drawer.scss

@@ -1,38 +1,60 @@
 @layer components {
 	.drawer {
-		--drawer-border-right-color: var(--border-color);
+		--drawer-width: 20rem;
+		--drawer-z-index: 1045;
+
 		--drawer-bg-color: var(--bg-surface);
 
+		--drawer-border-width: var(--border-width);
+		--drawer-border-color: var(--border-color);
+
+		--drawer-header-padding-y: var(--spacer-2);
+		--drawer-header-padding-x: var(--spacer-3);
+
+		--drawer-body-padding: var(--spacer-3);
+
+		--drawer-transition-duration: var(--transition-duration);
+		--drawer-transition-easing: var(--transition-easing);
+
+		position: fixed;
+		inset-block: 0;
+		inset-inline-start: 0;
+		z-index: var(--drawer-z-index);
 		display: flex;
 		flex-direction: column;
-		position: fixed;
-		top: 0;
-		left: -100%;
+		justify-content: flex-start;
+		width: min(var(--drawer-width), 100%);
 		height: 100dvh;
-		width: min(20rem, 100%);
-		z-index: 1045;
-		border-right: 1px solid var(--drawer-border-right-color);
-		justify-content: start;
 		background-color: var(--drawer-bg-color);
-		transition: left 250ms ease-out;
+		border-inline-end: var(--drawer-border-width) solid var(--drawer-border-color);
+		transform: translateX(-100%);
 
-		&.open ~ .overlay {
-			display: block;
+		transition: transform var(--drawer-transition-duration) var(--drawer-transition-easing);
+
+		&.is-open {
+			transform: translateX(0);
 		}
 
-		&.open {
-			left: 0;
+		&.is-open ~ .overlay {
+			display: block;
 		}
 
-		.drawer-title-container {
+		.drawer-header {
 			display: flex;
-			padding: 0.5rem 1rem;
 			align-items: center;
+			padding: var(--drawer-header-padding-y) var(--drawer-header-padding-x);
+		}
+
+		.drawer-title {
+			display: flex;
+			flex: 1;
+			margin: 0;
+		}
 
-			.drawer-title {
-				display: flex;
-				flex: 1;
-			}
+		.drawer-body {
+			flex: 1;
+			padding: var(--drawer-body-padding);
+			overflow: auto;
 		}
 	}
 }