@oardi/css-utils 0.52.0 → 0.53.0

package/package.json

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

@@ -4,7 +4,7 @@
 		--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;

package/scss/components/button.scss

@@ -133,7 +133,7 @@
 	}
 
 	.btn-text {
-		--button-highlight: var(--highlight);
+		--button-highlight: var(--bg-highlight);
 
 		color: var(--button-color);
 		background-color: transparent;

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;
 		}
 	}
 }

package/scss/components/expansion-panel.scss

@@ -3,23 +3,72 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--spacer-2);
+	}
+
+	.expansion-panel {
+		--expansion-panel-header-padding-y: var(--spacer-3);
+		--expansion-panel-header-padding-x: var(--spacer-3);
+		--expansion-panel-header-icon-space: var(--spacer-5);
+		--expansion-panel-inner-padding: var(--spacer-3);
+
+		--expansion-panel-bg-color: var(--bg-surface);
+		--expansion-panel-header-bg-color: var(--bg-surface);
+		--expansion-panel-content-bg-color: var(--bg-surface);
+
+		--expansion-panel-border-width: var(--border-width);
+		--expansion-panel-border-color: var(--border-color);
+		--expansion-panel-border-radius: var(--border-radius);
+
+		--expansion-panel-icon-size: 2rem;
+		--expansion-panel-icon-inline-end: var(--spacer-2);
+		--expansion-panel-icon-closed: '+';
+		--expansion-panel-icon-open: '−';
+
+		--expansion-panel-content-max-height: 32rem;
+
+		--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);
+		--expansion-panel-focus-outline-offset: var(--focus-offset);
+
+		--expansion-panel-transition-duration: var(--transition-duration);
+		--expansion-panel-transition-easing: var(--transition-easing);
+		--expansion-panel-content-transition-duration: 0.25s;
+
+		color: var(--text-color);
+		background-color: var(--expansion-panel-bg-color);
+		border: var(--expansion-panel-border-width) solid var(--expansion-panel-border-color);
+		border-radius: var(--expansion-panel-border-radius);
+
+		transition:
+			color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
+			background-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
+			box-shadow var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
+			border-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
+
+		/** for focus button header */
+		&:focus-within {
+			outline: var(--expansion-panel-focus-outline-width) var(--expansion-panel-focus-outline-style)
+				var(--expansion-panel-focus-outline-color);
+			outline-offset: var(--expansion-panel-focus-outline-offset);
+		}
 
-		.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);
-			--expansion-panel-transition-duration: var(--transition-duration, 0.2s);
-			--expansion-panel-transition-easing: var(--transition-easing, ease-out);
-
-			--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(--text-color);
-			border: 1px solid var(--expansion-panel-border-color);
-			border-radius: var(--border-radius);
+		.expansion-panel-header {
+			position: relative;
+			display: flex;
+			align-items: center;
+			width: 100%;
+			padding-block: var(--expansion-panel-header-padding-y);
+			padding-inline-start: var(--expansion-panel-header-padding-x);
+			padding-inline-end: var(--expansion-panel-header-icon-space);
+			border: 0;
+			border-start-start-radius: var(--expansion-panel-border-radius);
+			border-start-end-radius: var(--expansion-panel-border-radius);
 			background-color: var(--expansion-panel-header-bg-color);
+			color: inherit;
+			text-align: start;
+			font: inherit;
+			-webkit-tap-highlight-color: transparent;
 
 			transition:
 				color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
@@ -27,88 +76,69 @@
 				box-shadow var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing),
 				border-color var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
 
-			&:focus {
-				outline: var(--expansion-panel-focus-outline-width) var(--expansion-panel-focus-outline-style)
-					var(--expansion-panel-focus-outline-color);
-				outline-offset: var(--focus-offset);
-			}
-
-			.expansion-panel-header {
+			&::after {
+				content: var(--expansion-panel-icon-closed);
+				position: absolute;
+				inset-inline-end: var(--expansion-panel-icon-inline-end);
 				display: flex;
 				align-items: center;
-				padding: var(--expansion-panel-header-padding);
-				border-top-left-radius: var(--border-radius);
-				border-top-right-radius: var(--border-radius);
-				position: relative;
-				-webkit-tap-highlight-color: transparent;
-
-				transition:
-					color var(--expansion-panel-transition-duration) ease,
-					background-color var(--expansion-panel-transition-duration) ease,
-					box-shadow var(--expansion-panel-transition-duration) ease,
-					border-color var(--expansion-panel-transition-duration) ease;
-
-				&::after {
-					content: '+';
-					position: absolute;
-					right: 16px;
-					width: 32px;
-					height: 32px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					font-size: 1.75rem;
-					transition: transform 0.5s;
-				}
-
-				&:hover {
-					cursor: pointer;
-					color: var(--primary);
-				}
-
-				&:focus {
-					outline: 0;
-				}
+				justify-content: center;
+				width: var(--expansion-panel-icon-size);
+				height: var(--expansion-panel-icon-size);
+				font-size: 1.75rem;
+				transition: transform var(--expansion-panel-transition-duration)
+					var(--expansion-panel-transition-easing);
 			}
 
-			.expansion-panel-content {
-				--expansion-panel-content-bg-color: var(--bg-surface);
+			&:hover {
+				cursor: pointer;
+				color: var(--primary);
+			}
 
-				background-color: var(--expansion-panel-content-bg-color);
-				border-bottom-left-radius: var(--border-radius);
-				border-bottom-right-radius: var(--border-radius);
+			&:focus {
+				outline: 0;
+			}
+		}
 
-				max-height: 0;
-				overflow: hidden;
-				transition: max-height 0.25s ease-out;
+		.expansion-panel-content {
+			max-height: 0;
+			overflow: hidden;
+			opacity: 0;
+			background-color: var(--expansion-panel-content-bg-color);
+			border-end-start-radius: var(--expansion-panel-border-radius);
+			border-end-end-radius: var(--expansion-panel-border-radius);
 
-				.expansion-panel-inner {
-					padding: var(--expansion-panel-inner-padding);
-					transition: transform 0.25s linear;
-					transform: translateY(-10px);
-				}
+			transition:
+				max-height var(--expansion-panel-content-transition-duration) var(--expansion-panel-transition-easing),
+				opacity var(--expansion-panel-transition-duration) var(--expansion-panel-transition-easing);
+
+			.expansion-panel-inner {
+				padding: var(--expansion-panel-inner-padding);
+				transform: translateY(-0.5rem);
+				transition: transform var(--expansion-panel-content-transition-duration)
+					var(--expansion-panel-transition-easing);
 			}
+		}
 
-			&.active {
-				.expansion-panel-header::after {
-					content: '-';
-				}
+		&.is-open {
+			.expansion-panel-header::after {
+				content: var(--expansion-panel-icon-open);
+			}
 
-				.expansion-panel-content {
-					max-height: 500px;
-					opacity: 1;
+			.expansion-panel-content {
+				max-height: var(--expansion-panel-content-max-height);
+				opacity: 1;
 
-					.expansion-panel-inner {
-						transform: translateY(0);
-					}
+				.expansion-panel-inner {
+					transform: translateY(0);
 				}
 			}
+		}
 
-			&:not(.active) {
-				.expansion-panel-header {
-					border-bottom-left-radius: var(--border-radius);
-					border-bottom-right-radius: var(--border-radius);
-				}
+		&:not(.is-open) {
+			.expansion-panel-header {
+				border-end-start-radius: var(--expansion-panel-border-radius);
+				border-end-end-radius: var(--expansion-panel-border-radius);
 			}
 		}
 	}