@oardi/css-utils 0.129.1 → 0.131.0

package/css-utils-manifest.json

@@ -1,7 +1,57 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.129.1",
+	"version": "0.131.0",
 	"breakpoints": { "sm": "576px", "md": "768px", "lg": "992px", "xl": "1200px", "xxl": "1400px" },
+	"lifecycle": {
+		"deprecated": [
+			{
+				"pattern": "lh-{value}",
+				"values": ["xs", "sm", "md", "lg", "xl", "xxl", "xxxl"],
+				"deprecatedIn": "0.123.0",
+				"plannedRemoval": "next major release",
+				"replacements": {
+					"lh-xs": "line-height-none",
+					"lh-sm": "line-height-tight",
+					"lh-md": "line-height-snug",
+					"lh-lg": "line-height-normal",
+					"lh-xl": "line-height-relaxed",
+					"lh-xxl": "line-height-loose",
+					"lh-xxxl": "line-height-extra-loose"
+				}
+			},
+			{
+				"pattern": "letter-space-{value}",
+				"values": ["0", "1", "2", "3", "4", "5"],
+				"deprecatedIn": "0.130.0",
+				"plannedRemoval": "next major release",
+				"replacement": "letter-spacing-{effect}",
+				"note": "Choose an effect intentionally; the relative scale is not a visual alias for the pixel scale."
+			}
+		],
+		"removed": [
+			{
+				"pattern": "active",
+				"deprecatedIn": "0.53.0",
+				"removedIn": "0.60.0",
+				"replacement": "is-active",
+				"note": "This was a component state class."
+			},
+			{
+				"pattern": "bg-{value}-light",
+				"values": ["primary", "secondary", "success", "warning", "error", "white", "black"],
+				"removedIn": "0.37.0",
+				"replacement": "bg-{value}",
+				"note": "Use current background and opacity utilities; no exact visual alias is guaranteed."
+			},
+			{
+				"pattern": "bg-{value}-dark",
+				"values": ["primary", "secondary", "success", "warning", "error", "white", "black"],
+				"removedIn": "0.37.0",
+				"replacement": "bg-{value}",
+				"note": "Use current background and opacity utilities; no exact visual alias is guaranteed."
+			}
+		]
+	},
 	"utilities": {
 		"Display": {
 			"families": [
@@ -21,6 +71,10 @@
 		"Text / colors": {
 			"families": [
 				{ "patterns": ["letter-space-{value}"], "values": ["0", "1", "2", "3", "4", "5"] },
+				{
+					"patterns": ["letter-spacing-{value}"],
+					"values": ["normal", "tight", "wide", "wider", "widest"]
+				},
 				{
 					"patterns": ["lh-{value}"],
 					"values": ["lg", "md", "sm", "xl", "xs", "xxl", "xxxl"]
@@ -199,12 +253,30 @@
 		"Grid": {
 			"families": [
 				{
-					"patterns": ["col-{breakpoint}-{value}", "col-{value}"],
+					"patterns": [
+						"col-end-{breakpoint}-{value}",
+						"col-end-{value}",
+						"col-start-{breakpoint}-{value}",
+						"col-start-{value}"
+					],
+					"values": ["1", "10", "11", "12", "13", "2", "3", "4", "5", "6", "7", "8", "9"]
+				},
+				{
+					"patterns": ["col-offset-{breakpoint}-{value}", "col-offset-{value}"],
+					"values": ["0", "1", "10", "11", "2", "3", "4", "5", "6", "7", "8", "9"]
+				},
+				{
+					"patterns": [
+						"col-{breakpoint}-{value}",
+						"col-{value}",
+						"row-span-{breakpoint}-{value}",
+						"row-span-{value}"
+					],
 					"values": ["1", "10", "11", "12", "2", "3", "4", "5", "6", "7", "8", "9"]
 				}
 			],
 			"patterns": [],
-			"classes": ["col", "grid"]
+			"classes": ["col", "grid", "grid-auto-fit"]
 		},
 		"Gap": {
 			"families": [

package/css-utils-reference.md

@@ -3,7 +3,7 @@
 > Generated automatically. Do not edit manually.
 
 - Package: `@oardi/css-utils`
-- Version: `0.129.1`
+- Version: `0.131.0`
 - Source: public SCSS entry point and utility configuration
 
 ## Usage guidance
@@ -14,6 +14,55 @@ Use `@oardi/css-utils` as the primary styling system. Check this reference befor
 
 `{breakpoint}` means one of `sm` (576px), `md` (768px), `lg` (992px), `xl` (1200px), `xxl` (1400px). Variants apply from that breakpoint upward. `{value}` means one of the values listed beside its pattern. Decimal spacing classes use a literal dot, for example `m-0.5`.
 
+## Class lifecycle
+
+Deprecated classes are still emitted and remain listed in the current API groups. Removed classes are historical migration aids and are not emitted by the current package.
+
+### Deprecated
+
+- `lh-{value}`
+    - Values: `xs` | `sm` | `md` | `lg` | `xl` | `xxl` | `xxxl`
+    - Deprecated in: `0.123.0`
+    - Planned removal: next major release
+    - Replacements:
+        - `lh-xs` -> `line-height-none`
+        - `lh-sm` -> `line-height-tight`
+        - `lh-md` -> `line-height-snug`
+        - `lh-lg` -> `line-height-normal`
+        - `lh-xl` -> `line-height-relaxed`
+        - `lh-xxl` -> `line-height-loose`
+        - `lh-xxxl` -> `line-height-extra-loose`
+
+- `letter-space-{value}`
+    - Values: `0` | `1` | `2` | `3` | `4` | `5`
+    - Deprecated in: `0.130.0`
+    - Planned removal: next major release
+    - Replacement: `letter-spacing-{effect}`
+    - Note: Choose an effect intentionally; the relative scale is not a visual alias for the pixel scale.
+
+### Removed
+
+- `active`
+    - Deprecated in: `0.53.0`
+    - Removed in: `0.60.0`
+    - Replacement: `is-active`
+    - Note: This was a component state class.
+    - Availability: not emitted by the current package
+
+- `bg-{value}-light`
+    - Values: `primary` | `secondary` | `success` | `warning` | `error` | `white` | `black`
+    - Removed in: `0.37.0`
+    - Replacement: `bg-{value}`
+    - Note: Use current background and opacity utilities; no exact visual alias is guaranteed.
+    - Availability: not emitted by the current package
+
+- `bg-{value}-dark`
+    - Values: `primary` | `secondary` | `success` | `warning` | `error` | `white` | `black`
+    - Removed in: `0.37.0`
+    - Replacement: `bg-{value}`
+    - Note: Use current background and opacity utilities; no exact visual alias is guaranteed.
+    - Availability: not emitted by the current package
+
 ## Display
 
 Values: `block` | `flex` | `inline` | `none`
@@ -48,6 +97,10 @@ Values: `0` | `1` | `2` | `3` | `4` | `5`
 
 - `letter-space-{value}`
 
+Values: `normal` | `tight` | `wide` | `wider` | `widest`
+
+- `letter-spacing-{value}`
+
 Values: `lg` | `md` | `sm` | `xl` | `xs` | `xxl` | `xxxl`
 
 - `lh-{value}`
@@ -162,15 +215,30 @@ Classes:
 
 ## Grid
 
+Values: `1` | `10` | `11` | `12` | `13` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
+
+- `col-end-{breakpoint}-{value}`
+- `col-end-{value}`
+- `col-start-{breakpoint}-{value}`
+- `col-start-{value}`
+
+Values: `0` | `1` | `10` | `11` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
+
+- `col-offset-{breakpoint}-{value}`
+- `col-offset-{value}`
+
 Values: `1` | `10` | `11` | `12` | `2` | `3` | `4` | `5` | `6` | `7` | `8` | `9`
 
 - `col-{breakpoint}-{value}`
 - `col-{value}`
+- `row-span-{breakpoint}-{value}`
+- `row-span-{value}`
 
 Classes:
 
 - `col`
 - `grid`
+- `grid-auto-fit`
 
 ## Gap
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oardi/css-utils",
-	"version": "0.129.1",
+	"version": "0.131.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/grid-responsive.scss

@@ -9,7 +9,31 @@
 		@media (min-width: #{$bp-value}) {
 			@for $i from 1 through 12 {
 				.col-#{$bp}-#{$i} {
-					grid-column: span $i;
+					grid-column: span $i / span $i;
+				}
+
+				.row-span-#{$bp}-#{$i} {
+					grid-row: span $i;
+				}
+			}
+
+			@for $i from 1 through 13 {
+				.col-start-#{$bp}-#{$i} {
+					grid-column-start: $i;
+				}
+
+				.col-end-#{$bp}-#{$i} {
+					grid-column-end: $i;
+				}
+			}
+
+			.col-offset-#{$bp}-0 {
+				grid-column-start: auto;
+			}
+
+			@for $i from 1 through 11 {
+				.col-offset-#{$bp}-#{$i} {
+					grid-column-start: $i + 1;
 				}
 			}
 		}

package/scss/grid.scss

@@ -3,6 +3,7 @@
 @layer utilities.grid {
 	.grid {
 		--grid-gap: var(--spacer-3);
+		--grid-min-column-width: 16rem;
 
 		display: grid;
 		grid-template-columns: repeat(12, minmax(0, 1fr));
@@ -10,13 +11,44 @@
 		gap: var(--grid-gap);
 	}
 
+	.grid-auto-fit {
+		grid-template-columns: repeat(
+			auto-fit,
+			minmax(min(100%, var(--grid-min-column-width)), 1fr)
+		);
+	}
+
 	.col {
-		grid-column: span 12;
+		grid-column: span 12 / span 12;
 	}
 
 	@for $i from 1 through 12 {
 		.col-#{$i} {
-			grid-column: span $i;
+			grid-column: span $i / span $i;
+		}
+
+		.row-span-#{$i} {
+			grid-row: span $i;
+		}
+	}
+
+	@for $i from 1 through 13 {
+		.col-start-#{$i} {
+			grid-column-start: $i;
+		}
+
+		.col-end-#{$i} {
+			grid-column-end: $i;
+		}
+	}
+
+	.col-offset-0 {
+		grid-column-start: auto;
+	}
+
+	@for $i from 1 through 11 {
+		.col-offset-#{$i} {
+			grid-column-start: $i + 1;
 		}
 	}
 }

package/scss/text.scss

@@ -2,6 +2,7 @@
 @use './layers.scss';
 @use './theme.scss' as theme;
 
+// Deprecated: retained for the existing pixel-based utilities.
 $letterSpacings: 0, 1, 2, 3, 4, 5;
 
 @layer utilities {
@@ -99,6 +100,13 @@ $letterSpacings: 0, 1, 2, 3, 4, 5;
 		}
 	}
 
+	@each $name, $value in map.get(theme.$theme, letterSpacings) {
+		.letter-spacing-#{$name} {
+			letter-spacing: var(--letter-spacing-#{$name});
+		}
+	}
+
+	// Deprecated: use .letter-spacing-* utilities instead.
 	@each $letterSpacing in $letterSpacings {
 		.letter-space-#{$letterSpacing} {
 			letter-spacing: #{$letterSpacing}px;

package/scss/theme.scss

@@ -189,6 +189,14 @@ $line-height-effect-names: (
 	extra-loose: xxxl,
 );
 
+$-letter-spacings: (
+	tight: -0.025em,
+	normal: 0,
+	wide: 0.025em,
+	wider: 0.05em,
+	widest: 0.1em,
+);
+
 $-font-sizes: (
 	xs: 0.75rem,
 	sm: 0.875rem,
@@ -209,6 +217,7 @@ $default-theme: (
 	zIndexLevels: $-z-index-levels,
 	breakpoints: $-breakpoints,
 	lineHeights: $-line-heights,
+	letterSpacings: $-letter-spacings,
 	fontSizes: $-font-sizes,
 );
 

package/scss/variables.scss

@@ -41,6 +41,10 @@
 			--line-height-#{$name}: #{$value};
 		}
 
+		@each $name, $value in map.get(theme.$theme, letterSpacings) {
+			--letter-spacing-#{$name}: #{$value};
+		}
+
 		--font-size: 16px;
 		@each $name, $value in map.get(theme.$theme, fontSizes) {
 			--font-size-#{$name}: #{$value};