@oardi/css-utils 0.129.1 → 0.130.0

package/css-utils-manifest.json

@@ -1,7 +1,57 @@
 {
 	"package": "@oardi/css-utils",
-	"version": "0.129.1",
+	"version": "0.130.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"]

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.130.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}`

package/package.json

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