feat: extends fit width & height for max & min constraints

Author: vis97c

packages/styles/src/modifiers/size/_height.scss

@@ -41,6 +41,24 @@
 					min-height: math.div(module.$size-px-default, 16) * 1rem;
 				}
 			}
+
+			&-fit {
+				@include module.extend-viewports-classes {
+					min-height: fit-content;
+				}
+			}
+
+			&-max {
+				@include module.extend-viewports-classes {
+					min-height: max-content;
+				}
+			}
+
+			&-min {
+				@include module.extend-viewports-classes {
+					min-height: min-content;
+				}
+			}
 		}
 
 		.#{module.$prefix-default}--maxHeight {
@@ -54,6 +72,24 @@
 					max-height: math.div(module.$size-px-default, 16) * 1rem;
 				}
 			}
+
+			&-fit {
+				@include module.extend-viewports-classes {
+					max-height: fit-content;
+				}
+			}
+
+			&-max {
+				@include module.extend-viewports-classes {
+					max-height: max-content;
+				}
+			}
+
+			&-min {
+				@include module.extend-viewports-classes {
+					max-height: min-content;
+				}
+			}
 		}
 	}
 }

packages/styles/src/modifiers/size/_module.scss

@@ -102,6 +102,7 @@
 // Viewport based dimensions
 // --maxWidth, --maxHeight, --minWidth, --minHeight
 @mixin extend-dimension-viewport($property, $model) {
+	// vh or vw
 	$vm: "v" + string.slice($model, 1, 1);
 	$unit: if($vm == "vh", 1vh, 1vw);
 

packages/styles/src/modifiers/size/_width.scss

@@ -41,6 +41,24 @@
 					min-width: math.div(module.$size-px-default, 16) * 1rem;
 				}
 			}
+
+			&-fit {
+				@include module.extend-viewports-classes {
+					min-width: fit-content;
+				}
+			}
+
+			&-max {
+				@include module.extend-viewports-classes {
+					min-width: max-content;
+				}
+			}
+
+			&-min {
+				@include module.extend-viewports-classes {
+					min-width: min-content;
+				}
+			}
 		}
 
 		.#{module.$prefix-default}--maxWidth {
@@ -54,6 +72,24 @@
 					max-width: math.div(module.$size-px-default, 16) * 1rem;
 				}
 			}
+
+			&-fit {
+				@include module.extend-viewports-classes {
+					max-width: fit-content;
+				}
+			}
+
+			&-max {
+				@include module.extend-viewports-classes {
+					max-width: max-content;
+				}
+			}
+
+			&-min {
+				@include module.extend-viewports-classes {
+					max-width: min-content;
+				}
+			}
 		}
 	}
 }