@oardi/css-utils 0.122.0 → 0.124.0

package/package.json

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

@@ -4,8 +4,8 @@ CSS Utils is a lightweight SCSS toolkit with utility classes, responsive helpers
 
 ## What it includes
 
-- Utilities for colors, typography, spacing, display, flex and grid
-- Mobile-first responsive variants for layout and spacing
+- Utilities for colors, typography, spacing, sizing, positioning, display, flex and grid
+- Mobile-first responsive variants for layout, sizing, positioning and spacing
 - Components for buttons, cards, forms, badges, tabs, toasts and more
 - Global and component-specific design tokens
 - A predefined cascade order: `reset`, `base`, `components`, then `utilities`

package/scss/text.scss

@@ -86,12 +86,19 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
 		}
 	}
 
+	// Deprecated: use .line-height-* utilities instead.
 	@each $name, $value in map.get(theme.$theme, lineHeights) {
 		.lh-#{$name} {
 			line-height: var(--line-height-#{$name});
 		}
 	}
 
+	@each $effect, $legacy-name in theme.$line-height-effect-names {
+		.line-height-#{$effect} {
+			line-height: var(--line-height-#{$effect});
+		}
+	}
+
 	@each $letterSpacing in $letterSpacings {
 		.letter-space-#{$letterSpacing} {
 			letter-spacing: #{$letterSpacing}px;

package/scss/theme.scss

@@ -166,6 +166,17 @@ $-line-heights: (
 	xxxl: 2.5,
 );
 
+// Map the public effect names to the existing Sass scale during the compatibility period.
+$line-height-effect-names: (
+	none: xs,
+	tight: sm,
+	snug: md,
+	normal: lg,
+	relaxed: xl,
+	loose: xxl,
+	extra-loose: xxxl,
+);
+
 $-font-sizes: (
 	xs: 0.75rem,
 	sm: 0.875rem,

package/scss/utilities.scss

@@ -4,7 +4,7 @@
 @use './display.scss';
 @use './theme.scss' as theme;
 
-$-widths: (
+$-sizes: (
 	100: 100%,
 	75: 75%,
 	60: 60%,
@@ -15,6 +15,29 @@ $-widths: (
 	auto: auto,
 );
 
+$-insets: (
+	0: 0,
+	25: 25%,
+	50: 50%,
+	75: 75%,
+	100: 100%,
+	auto: auto,
+);
+
+$-inset-properties: (
+	inset: inset,
+	inset-inline: inset-inline,
+	inset-block: inset-block,
+	inset-inline-start: inset-inline-start,
+	inset-inline-end: inset-inline-end,
+	inset-block-start: inset-block-start,
+	inset-block-end: inset-block-end,
+	top: top,
+	right: right,
+	bottom: bottom,
+	left: left,
+);
+
 $-overflow-wrap-values: normal, break-word, anywhere;
 
 // Guard the dynamic value: a var() declaration can otherwise become invalid only
@@ -277,33 +300,30 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 		min-width: 0;
 	}
 
-	@each $name, $value in $-widths {
+	@each $name, $value in $-sizes {
 		.w-#{$name} {
 			width: $value;
 		}
-	}
 
-	// TODO - add several heights
-	.h-100 {
-		height: 100%;
-	}
-
-	// TODO - check if more classes are needed
-	// arrange elements top, start, bottom, end
-	.top-0 {
-		top: 0px;
-	}
+		.h-#{$name} {
+			height: $value;
+		}
 
-	.right-0 {
-		right: 0px;
-	}
+		.inline-size-#{$name} {
+			inline-size: $value;
+		}
 
-	.bottom-0 {
-		bottom: 0px;
+		.block-size-#{$name} {
+			block-size: $value;
+		}
 	}
 
-	.left-0 {
-		left: 0px;
+	@each $name, $value in $-insets {
+		@each $class-name, $property in $-inset-properties {
+			.#{$class-name}-#{$name} {
+				#{$property}: $value;
+			}
+		}
 	}
 
 	.fixed-top {
@@ -333,10 +353,30 @@ $-overflow-wrap-values: normal, break-word, anywhere;
 	// width with breakpoints
 	@each $bp, $bp-value in map.get(theme.$theme, breakpoints) {
 		@media (min-width: #{$bp-value}) {
-			@each $name, $value in $-widths {
+			@each $name, $value in $-sizes {
 				.w-#{$bp}-#{$name} {
 					width: $value;
 				}
+
+				.h-#{$bp}-#{$name} {
+					height: $value;
+				}
+
+				.inline-size-#{$bp}-#{$name} {
+					inline-size: $value;
+				}
+
+				.block-size-#{$bp}-#{$name} {
+					block-size: $value;
+				}
+			}
+
+			@each $name, $value in $-insets {
+				@each $class-name, $property in $-inset-properties {
+					.#{$class-name}-#{$bp}-#{$name} {
+						#{$property}: $value;
+					}
+				}
 			}
 		}
 	}

package/scss/variables.scss

@@ -32,6 +32,11 @@
 		}
 
 		--line-height: 1.8;
+		@each $effect, $legacy-name in theme.$line-height-effect-names {
+			--line-height-#{$effect}: #{map.get(map.get(theme.$theme, lineHeights), $legacy-name)};
+		}
+
+		// Deprecated: retained for existing .lh-* utilities and component tokens.
 		@each $name, $value in map.get(theme.$theme, lineHeights) {
 			--line-height-#{$name}: #{$value};
 		}