@volverjs/style 0.0.0

package/src/utilities/animation.scss

@@ -0,0 +1,8 @@
+@import '../context';
+
+// animate
+@include spread-map-into-utilities(
+	$map: $animate,
+	$class: 'animate',
+	$attribute: 'animation'
+);

package/src/utilities/backgrounds.scss

@@ -0,0 +1,50 @@
+@import '../context';
+
+// background-attachment
+@include spread-map-into-utilities(
+	$map: $background-attachment,
+	$class: 'bg',
+	$attribute: 'background-attachment'
+);
+
+// background-clip
+@include spread-map-into-utilities(
+	$map: $background-clip,
+	$class: 'bg-clip',
+	$attribute: 'background-clip'
+);
+
+// background-origin
+@include spread-map-into-utilities(
+	$map: $background-origin,
+	$class: 'bg-origin',
+	$attribute: 'background-origin'
+);
+
+// background-position
+@include spread-map-into-utilities(
+	$map: $background-position,
+	$class: 'bg',
+	$attribute: 'background-position'
+);
+
+// background-repeat
+@include spread-map-into-utilities(
+	$map: $background-repeat,
+	$class: bg,
+	$attribute: background-repeat
+);
+
+// background-size
+@include spread-map-into-utilities(
+	$map: $background-size,
+	$class: bg,
+	$attribute: background-size
+);
+
+// background-image
+@include spread-map-into-utilities(
+	$map: $background-image,
+	$class: bg,
+	$attribute: background-image
+);

package/src/utilities/borders.scss

@@ -0,0 +1,79 @@
+@use 'sass:map';
+@import '../context';
+
+// border-radius
+@include spread-map-into-utilities(
+	$map: $border-radius,
+	$class: rounded,
+	$attribute: border-radius,
+	$prop: rounded
+);
+
+@each $x-key, $x-value in (t: top, b: bottom) {
+	@include spread-map-into-utilities(
+		$map: $border-radius,
+		$class: rounded- + $x-key,
+		$attribute: (
+			border- + $x-value + -left-radius,
+			border- + $x-value + -right-radius,
+		),
+		$prop: rounded
+	);
+
+	@each $y-key, $y-value in (r: right, l: left) {
+		@include spread-map-into-utilities(
+			$map: $border-radius,
+			$class: rounded- + $x-key + $y-key,
+			$attribute: (
+				border- + $x-value + '-' + $y-value + -radius,
+			),
+			$prop: rounded
+		);
+	}
+}
+
+// border-width
+@include spread-map-into-utilities(
+	$map: $border-width,
+	$class: border,
+	$attribute: border-width,
+	$prop: border
+);
+
+@include spread-map-into-utilities(
+	$map: $border-width,
+	$class: border-x,
+	$attribute: (
+		border-right-width,
+		border-left-width,
+	),
+	$prop: border
+);
+
+@include spread-map-into-utilities(
+	$map: $border-width,
+	$class: border-y,
+	$attribute: (
+		border-top-width,
+		border-bottom-width,
+	),
+	$prop: border
+);
+
+@each $key, $value in (t: top, r: right, b: bottom, l: left) {
+	@include spread-map-into-utilities(
+		$map: $border-width,
+		$class: border- + $key,
+		$attribute: (
+			border- + $value + -width,
+		),
+		$prop: border
+	);
+}
+
+// border-style
+@include spread-map-into-utilities(
+	$map: $border-style,
+	$class: border,
+	$attribute: border-style
+);

package/src/utilities/colors.scss

@@ -0,0 +1,33 @@
+@import '../context';
+
+// background-color
+@include spread-map-into-utilities(
+	$map: $colors,
+	$class: bg,
+	$attribute: background-color,
+	$prop: color
+);
+
+// color
+@include spread-map-into-utilities(
+	$map: $colors,
+	$class: text,
+	$attribute: color,
+	$prop: color
+);
+
+// text-decoration-color
+@include spread-map-into-utilities(
+	$map: $colors,
+	$class: decoration,
+	$attribute: text-decoration-color,
+	$prop: color
+);
+
+// border-color
+@include spread-map-into-utilities(
+	$map: $colors,
+	$class: border,
+	$attribute: border-color,
+	$prop: color
+);

package/src/utilities/effects.scss

@@ -0,0 +1,15 @@
+@import '../context';
+
+// box shadow
+@include spread-map-into-utilities(
+	$map: $box-shadow,
+	$class: shadow,
+	$attribute: box-shadow
+);
+
+// blend mode
+@include spread-map-into-utilities(
+	$map: $blend-mode,
+	$class: mix-blend,
+	$attribute: mix-blend-mode
+);

package/src/utilities/filters.scss

@@ -0,0 +1,22 @@
+@import '../context';
+
+// blur
+@include spread-map-into-utilities(
+	$map: $blur,
+	$class: blur,
+	$attribute: filter
+);
+
+// brightness
+@include spread-map-into-utilities(
+	$map: $brightness,
+	$class: brightness,
+	$attribute: filter
+);
+
+// backdrop blur
+@include spread-map-into-utilities(
+	$map: $blur,
+	$class: backdrop-blur,
+	$attribute: backdrop-filter
+);

package/src/utilities/flexbox.scss

@@ -0,0 +1,113 @@
+@use 'sass:map';
+@import '../context';
+
+// flex direction
+@include spread-map-into-utilities(
+	$map: $flex-direction,
+	$class: flex,
+	$attribute: flex-direction
+);
+
+// flex wrap
+@include spread-map-into-utilities(
+	$map: $flex-wrap,
+	$class: flex,
+	$attribute: flex-wrap
+);
+
+// flex
+@include spread-map-into-utilities($map: $flex, $class: flex, $attribute: flex);
+
+// flex grow
+@each $prefix, $prop in (grow: flex-grow, shrink: flex-shrink) {
+	@each $value, $postfix in (1: '', 0: '-0') {
+		%#{$prefix}#{$postfix} {
+			#{$prop}: #{$value};
+		}
+		@include wrap-with-where(
+			$selector: '.#{$prefix}#{$postfix}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %#{$prefix}#{$postfix};
+		}
+	}
+}
+
+// order
+@include spread-map-into-utilities(
+	$map: $order,
+	$class: order,
+	$attribute: order
+);
+
+// gap
+@each $size, $value in map.merge($spacing, $spacing-dynamic) {
+	$default: null;
+
+	// check if value is not a map (spacing-dynamic)
+	@if type-of($value) != 'map' {
+		$default: $value;
+	}
+
+	$var: var(--spacing-#{$size}, #{$default});
+
+	// all
+	%gap-#{$size} {
+		gap: #{$var};
+	}
+	@include wrap-with-where(
+		$selector: '.gap-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %gap-#{$size};
+	}
+
+	// horizontal
+	%gap-x-#{$size} {
+		column-gap: #{$var};
+	}
+	@include wrap-with-where(
+		$selector: '.gap-x-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %gap-x-#{$size};
+	}
+
+	// vertical
+	%gap-y-#{$size} {
+		row-gap: #{$var};
+	}
+	@include wrap-with-where(
+		$selector: '.gap-y-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %gap-y-#{$size};
+	}
+}
+
+// justify and align content
+@each $class, $attribute in (justify: justify-content, content: align-content) {
+	@include spread-map-into-utilities(
+		$map: $justify-align-content,
+		$class: $class,
+		$attribute: $attribute
+	);
+}
+
+// justify and align items
+@each $class, $attribute in (justify-items: justify-items, items: align-items) {
+	@include spread-map-into-utilities(
+		$map: $justify-align-items,
+		$class: $class,
+		$attribute: $attribute
+	);
+}
+
+// justify and align self
+@each $class, $attribute in (justify-self: justify-self, self: align-self) {
+	@include spread-map-into-utilities(
+		$map: $justify-align-self,
+		$class: $class,
+		$attribute: $attribute
+	);
+}

package/src/utilities/grid.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@import '../context';
+
+// grid template columns
+@include spread-map-into-utilities(
+	$map: $grid-template-columns,
+	$class: grid-cols,
+	$attribute: grid-template-columns
+);
+
+// grid column
+@include spread-map-into-utilities(
+	$map: $grid-column,
+	$class: col,
+	$attribute: grid-column
+);
+
+// grid column start/end
+@each $class,
+	$attribute in (col-start: grid-column-start, col-end: grid-column-end)
+{
+	@include spread-map-into-utilities(
+		$map: $grid-column-start-end,
+		$class: $class,
+		$attribute: $attribute
+	);
+}
+
+// grid template rows
+@include spread-map-into-utilities(
+	$map: $grid-template-rows,
+	$class: grid-rows,
+	$attribute: grid-template-rows
+);
+
+// grid row
+@include spread-map-into-utilities(
+	$map: $grid-row,
+	$class: row,
+	$attribute: grid-row
+);
+
+// grid row start/end
+@each $class, $attribute in (row-start: grid-row-start, row-end: grid-row-end) {
+	@include spread-map-into-utilities(
+		$map: $grid-row-start-end,
+		$class: $class,
+		$attribute: $attribute
+	);
+}
+
+// grid auto flow
+@include spread-map-into-utilities(
+	$map: $grid-auto-flow,
+	$class: grid-flow,
+	$attribute: grid-auto-flow
+);
+
+// grid auto rows/columns
+@each $class,
+	$attribute in (auto-cols: grid-auto-columns, auto-rows: grid-auto-rows)
+{
+	@include spread-map-into-utilities(
+		$map: $grid-auto-rows-columns,
+		$class: $class,
+		$attribute: $attribute
+	);
+}

package/src/utilities/index.scss

@@ -0,0 +1,12 @@
+@import 'animation';
+@import 'backgrounds';
+@import 'borders';
+@import 'colors';
+@import 'effects';
+@import 'filters';
+@import 'flexbox';
+@import 'grid';
+@import 'layout';
+@import 'sizing';
+@import 'spacing';
+@import 'typography';

package/src/utilities/layout.scss

@@ -0,0 +1,188 @@
+@use 'sass:map';
+@import '../context';
+
+// aspect
+@include spread-map-into-utilities(
+	$map: $aspect-ratio,
+	$class: aspect,
+	$attribute: aspect-ratio,
+	$prop: aspect
+);
+
+// container
+%container {
+	width: 100%;
+
+	@each $breakpoint, $value in $breakpoints {
+		@if $value > 0 {
+			@include media-breakpoint-up($breakpoint) {
+				max-width: $value;
+			}
+		}
+	}
+}
+@include wrap-with-where(
+	$selector: '.container',
+	$enabled: $zero-specificity-for-utilities
+) {
+	@extend %container;
+}
+
+// columns
+@include spread-map-into-utilities(
+	$map: $columns,
+	$class: columns,
+	$attribute: column-count,
+	$bps: $breakpoints
+);
+
+// break-after
+@include spread-map-into-utilities(
+	$map: $break-after,
+	$class: break-after,
+	$attribute: break-after
+);
+
+// break-before
+@include spread-map-into-utilities(
+	$map: $break-before,
+	$class: break-before,
+	$attribute: break-before
+);
+
+// break-inside
+@include spread-map-into-utilities(
+	$map: $break-inside,
+	$class: break-inside,
+	$attribute: break-inside
+);
+
+// display
+@include spread-map-into-utilities(
+	$map: $display-without-breakpoints,
+	$attribute: display
+);
+
+@include spread-map-into-utilities(
+	$map: $display-with-breakpoints,
+	$attribute: display,
+	$bps: $breakpoints
+);
+
+// object-fit
+@include spread-map-into-utilities(
+	$map: $object-fit,
+	$class: object,
+	$attribute: object-fit
+);
+
+// object-position
+@include spread-map-into-utilities(
+	$map: $object-position,
+	$class: object,
+	$attribute: object-position
+);
+
+// overflow
+@each $overflow in (auto, hidden, clip, visible, scroll) {
+	%overflow-#{$overflow} {
+		overflow: #{$overflow};
+	}
+
+	@include wrap-with-where(
+		$selector: '.overflow-#{$overflow}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %overflow-#{$overflow};
+	}
+
+	@each $prefix in (x, y) {
+		%overflow-#{$prefix}-#{$overflow} {
+			overflow-#{$prefix}: #{$overflow};
+		}
+
+		@include wrap-with-where(
+			$selector: '.overflow-#{$prefix}-#{$overflow}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %overflow-#{$prefix}-#{$overflow};
+		}
+	}
+}
+
+// position
+@include spread-map-into-utilities(
+	$map: $position,
+	$attribute: position,
+	$bps: $breakpoints
+);
+
+// visibility
+@include spread-map-into-utilities(
+	$map: $visibility,
+	$attribute: visibility,
+	$bps: $breakpoints
+);
+
+// top / right / bottom / left
+@each $size, $value in map.merge($spacing, $spacing-dynamic) {
+	// check if value is not a map (spacing-dynamic)
+	$var: var(--spacing-#{$size});
+	@if type-of($value) != 'map' {
+		$var: var(--spacing-#{$size}, #{$value});
+	}
+
+	// all
+	%inset-#{$size} {
+		inset: #{$var};
+	}
+	@include wrap-with-where(
+		$selector: '.inset-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %inset-#{$size};
+	}
+
+	// horizontal
+	%inset-x-#{$size} {
+		inset-inline: #{$var};
+	}
+	@include wrap-with-where(
+		$selector: '.inset-x-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %inset-x-#{$size};
+	}
+
+	// vertical
+	%inset-y-#{$size} {
+		inset-block: #{$var};
+	}
+	@include wrap-with-where(
+		$selector: '.inset-y-#{$size}',
+		$enabled: $zero-specificity-for-utilities
+	) {
+		@extend %inset-y-#{$size};
+	}
+
+	// sides
+	@each $direction in(top, right, bottom, left) {
+		%#{$direction}-#{$size} {
+			#{$direction}: #{$var};
+		}
+		@include wrap-with-where(
+			$selector: '.#{$direction}-#{$size}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %#{$direction}-#{$size};
+		}
+	}
+}
+
+// z-index
+@include spread-map-into-utilities(
+	$map: $z-index,
+	$class: z,
+	$attribute: z-index,
+	$prop: z
+);

package/src/utilities/sizing.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@import '../context';
+
+// width / height / max-width / max-height
+@each $dimension,
+	$attr in(w: width, h: height, max-w: max-width, max-h: max-height)
+{
+	@each $size, $value in map.merge($spacing, $spacing-dynamic) {
+		// check if value is not a map (spacing-dynamic)
+		$var: var(--spacing-#{$size});
+		@if type-of($value) != 'map' {
+			$var: var(--spacing-#{$size}, #{$value});
+		}
+
+		%#{$dimension}-#{$size} {
+			#{$attr}: #{$var};
+		}
+		@include wrap-with-where(
+			$selector: '.#{$dimension}-#{$size}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %#{$dimension}-#{$size};
+		}
+	}
+}
+
+@include spread-map-into-utilities(
+	$map: $width,
+	$class: w,
+	$attribute: width,
+	$bps: $breakpoints,
+	$prop: w
+);
+
+@include spread-map-into-utilities(
+	$map: $height,
+	$class: h,
+	$attribute: height,
+	$bps: $breakpoints,
+	$prop: h
+);
+
+@include spread-map-into-utilities(
+	$map: $max-width,
+	$class: max-w,
+	$attribute: max-width
+);
+
+@include spread-map-into-utilities(
+	$map: $max-height,
+	$class: max-h,
+	$attribute: max-height
+);
+
+@each $breakpoint, $breakpoint-value in $breakpoints {
+	@if $breakpoint-value > 0 {
+		%max-w-screen-#{$breakpoint} {
+			max-width: $breakpoint-value;
+		}
+		@include wrap-with-where(
+			$selector: '.max-w-screen-#{$breakpoint}',
+			$enabled: $zero-specificity-for-utilities
+		) {
+			@extend %max-w-screen-#{$breakpoint};
+		}
+	}
+}
+
+// min-width / min-height
+@include spread-map-into-utilities(
+	$map: $min-width,
+	$class: min-w,
+	$attribute: min-width
+);
+
+@include spread-map-into-utilities(
+	$map: $min-height,
+	$class: min-h,
+	$attribute: min-height
+);