@volverjs/style 0.0.0

package/src/utilities/spacing.scss

@@ -0,0 +1,109 @@
+@use 'sass:map';
+@import '../context';
+
+@each $prefix, $prop in (m: margin, p: padding, n: margin) {
+	@each $size, $value in map.merge($spacing, $spacing-dynamic) {
+		$var: var(--spacing-#{$size});
+
+		// check if value is not a map (spacing-dynamic)
+		@if type-of($value) != 'map' {
+			$var: var(--spacing-#{$size}, #{$value});
+		}
+
+		// negative margin
+		@if $prefix == 'n' {
+			$var: calc(-1 * #{$var});
+		}
+
+		// all
+		%#{$prefix}#{$size} {
+			#{$prop}: #{$var};
+		}
+		@include wrap-with-where(
+			$selector: '.#{$prefix}-#{$size}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %#{$prefix}#{$size};
+		}
+
+		// horizontal
+		%#{$prefix}x-#{$size} {
+			#{$prop}-inline: #{$var};
+		}
+		@include wrap-with-where(
+			$selector: '.#{$prefix}x-#{$size}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %#{$prefix}x-#{$size};
+		}
+
+		// vertical
+		%#{$prefix}y-#{$size} {
+			#{$prop}-block: #{$var};
+		}
+		@include wrap-with-where(
+			$selector: '.#{$prefix}y-#{$size}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %#{$prefix}y-#{$size};
+		}
+
+		// sides
+		@each $direction-prefix,
+			$direction in(t: top, r: right, b: bottom, l: left)
+		{
+			%#{$prefix}#{$direction-prefix}-#{$size} {
+				#{$prop}-#{$direction}: #{$var};
+			}
+			@include wrap-with-where(
+				$selector: '.#{$prefix}#{$direction-prefix}-#{$size}',
+				$enabled: $zero-specificity-for-utilities
+			) {
+				@extend %#{$prefix}#{$direction-prefix}-#{$size};
+			}
+		}
+	}
+}
+
+// auto
+%m-auto {
+	margin: auto;
+}
+@include wrap-with-where(
+	$selector: '.m-auto',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %m-auto;
+}
+
+%mx-auto {
+	margin-inline: auto;
+}
+@include wrap-with-where(
+	$selector: '.mx-auto',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %mx-auto;
+}
+
+%my-auto {
+	margin-block: auto;
+}
+@include wrap-with-where(
+	$selector: '.my-auto',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %my-auto;
+}
+
+@each $direction-prefix, $direction in(t: top, r: right, b: bottom, l: left) {
+	%m#{$direction-prefix}-auto {
+		margin-#{$direction}: auto;
+	}
+	@include wrap-with-where(
+		$selector: '.m#{$direction-prefix}-auto',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %m#{$direction-prefix}-auto;
+	}
+}

package/src/utilities/typography.scss

@@ -0,0 +1,226 @@
+@use 'sass:map';
+@import '../context';
+
+// font-family
+@include spread-map-into-utilities(
+	$map: $font-family,
+	$class: font,
+	$attribute: font-family,
+	$prop: font
+);
+
+// font-weight
+@include spread-map-into-utilities(
+	$map: $font-weight,
+	$class: font,
+	$attribute: font-weight,
+	$prop: font
+);
+
+// font-size
+@include spread-map-into-utilities(
+	$map: map.merge($font-size, $font-size-dynamic),
+	$class: text,
+	$attribute: font-size,
+	$prop: text,
+	$deep: false
+);
+
+// font-style
+%italic {
+	font-style: italic;
+}
+@include wrap-with-where(
+	$selector: '.italic',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %italic;
+}
+
+%non-italic {
+	font-style: normal;
+}
+@include wrap-with-where(
+	$selector: '.non-italic',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %non-italic;
+}
+
+// font-smoothing
+%antialiased {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+@include wrap-with-where(
+	$selector: '.antialiased',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %antialiased;
+}
+
+%subpixel-antialiased {
+	-webkit-font-smoothing: auto;
+	-moz-osx-font-smoothing: auto;
+}
+@include wrap-with-where(
+	$selector: '.subpixel-antialiased',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %subpixel-antialiased;
+}
+
+// line-height
+@include spread-map-into-utilities(
+	$map: $line-height,
+	$class: leading,
+	$attribute: line-height,
+	$prop: leading
+);
+
+// letter-spacing
+@include spread-map-into-utilities(
+	$map: $letter-spacing,
+	$class: tracking,
+	$attribute: letter-spacing,
+	$prop: tracking
+);
+
+// font-variant-numeric
+@include spread-map-into-utilities(
+	$map: $font-variant-numeric,
+	$attribute: font-variant-numeric
+);
+
+// list-style-type
+@include spread-map-into-utilities(
+	$map: $list-style-type,
+	$class: list,
+	$attribute: list-style-type
+);
+
+// list-style-position
+@include spread-map-into-utilities(
+	$map: $list-style-position,
+	$class: list,
+	$attribute: list-style-position
+);
+
+// text-align
+@include spread-map-into-utilities(
+	$map: $text-align,
+	$class: text,
+	$attribute: text-align
+);
+
+// text-decorator-line
+@include spread-map-into-utilities(
+	$map: $text-decorator-line,
+	$attribute: text-decoration-line
+);
+
+// text-decorator-style
+@include spread-map-into-utilities(
+	$map: $text-decorator-style,
+	$class: decoration,
+	$attribute: text-decoration-style
+);
+
+// text-decorator-thickness
+@include spread-map-into-utilities(
+	$map: $text-decorator-thickness,
+	$class: decoration,
+	$attribute: text-decoration-thickness
+);
+
+// text-underline-offset
+@include spread-map-into-utilities(
+	$map: $text-underline-offset,
+	$class: underline-offset,
+	$attribute: text-underline-offset
+);
+
+// text-transform
+@include spread-map-into-utilities(
+	$map: $text-transform,
+	$attribute: text-transform
+);
+
+// text-overflow
+%truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+@include wrap-with-where(
+	$selector: '.truncate',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %truncate;
+}
+
+%text-ellipsis {
+	text-overflow: ellipsis;
+}
+@include wrap-with-where(
+	$selector: '.text-ellipsis',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %text-ellipsis;
+}
+
+%text-clip {
+	text-overflow: clip;
+}
+@include wrap-with-where(
+	$selector: '.text-clip',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %text-clip;
+}
+
+// word break
+%break-normal {
+	overflow-wrap: normal;
+	word-break: normal;
+}
+@include wrap-with-where(
+	$selector: '.break-normal',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %break-normal;
+}
+
+%break-words {
+	overflow-wrap: break-word;
+}
+@include wrap-with-where(
+	$selector: '.break-words',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %break-words;
+}
+
+%break-all {
+	word-break: break-all;
+}
+@include wrap-with-where(
+	$selector: '.break-all',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %break-all;
+}
+
+// vertical align
+@include spread-map-into-utilities(
+	$map: $vertical-align,
+	$class: align,
+	$attribute: vertical-align
+);
+
+// white-space
+@include spread-map-into-utilities(
+	$map: $white-space,
+	$class: whitespace,
+	$attribute: white-space
+);