@volverjs/style 0.1.2-beta.9 → 0.1.3

package/src/export.scss

@@ -3,7 +3,7 @@
 @use 'sass:string';
 
 // context
-@import 'context';
+@use 'context' as *;
 
 :export {
 	// ============================================================== */
@@ -13,21 +13,20 @@
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
 				@if type-of($value) not 'map' {
-					@if not str-index($subKey, #{$key}) {
-						#{'colors__' + $key}: $subValue;
-					}
-
 					@if not
 						str-index($subKey, 'hue') and not
 						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness') and not
-						str-index($subKey, #{$key})
+						str-index($subKey, 'lightness')
 					{
-						#{'colors__' + $key}-#{$subKey}: $subValue;
+						@if '' + $key == $subKey {
+							#{'colors__' + $key}: $subValue;
+						} @else {
+							#{'colors__' + $key + '-' + $subKey}: $subValue;
+						}
 					}
 				}
 			}
-		} @else {
+		} @else if $key != 'scheme' {
 			#{'colors__' + $key}: $value;
 		}
 	}
@@ -45,7 +44,7 @@
 	}
 
 	// breakpoints
-	@each $key, $value in $breakpoints {
+	@each $key, $value in map.remove($breakpoints, 'xxs') {
 		#{'breakpoints__' + $key}: $value;
 	}
 
@@ -89,11 +88,24 @@
 		#{'object-position__' + $key}: $value;
 	}
 
+	// overflow
+	@each $key, $value in $overflow {
+		#{'overflow__' + $key}: $value;
+	}
+
 	// position
 	@each $index in $position {
 		#{'position__' + $index}: $index;
 	}
 
+	// placement
+	@each $key, $value in $placement {
+		$name: meta.inspect($key);
+		$name: str-replace($name, '\\/', '_');
+
+		#{'placement__' + $name}: $value;
+	}
+
 	// visibility
 	@each $key, $value in $visibility {
 		#{'visibility__' + $key}: $value;
@@ -191,55 +203,57 @@
 	// ============================================================== */
 	// #region SPACING
 	// spacing & spacing-dynamic
-	@each $size, $value in map.merge($spacing, $spacing-dynamic) {
+	@each $size, $value in $spacing {
+		spacing__#{$size}: $value;
+	}
+	@each $size, $value in $spacing-dynamic {
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
 				@if type-of($value) not 'map' {
-					#{'spacers__' + $size}-#{$subKey}: $subValue;
+					spacing-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
-		} @else {
-			#{'spacers__' + $size}: $value;
 		}
 	}
 
 	// font-size & font-size-dynamic
-	@each $size, $value in map.merge($font-size, $font-size-dynamic) {
+	@each $size, $value in $font-size {
+		font-size__#{$size}: $value;
+	}
+	@each $size, $value in $font-size-dynamic {
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
 				@if type-of($value) not 'map' {
-					#{'font-size__' + $size}-#{$subKey}: $subValue;
+					font-size-dynamic__#{$size}__#{$subKey}: $subValue;
 				}
 			}
-		} @else {
-			#{'font-size__' + $size}: $value;
 		}
 	}
 
 	// width spacer
 	@each $key, $value in $width {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
-		#{'width-spacer__' + $name}: $value;
+		#{'width__' + $name}: $value;
 	}
 
 	// height spacer
 	@each $key, $value in $height {
 		$name: meta.inspect($key);
-		$name: str-replace($name, '\\/', '/');
+		$name: str-replace($name, '\\/', '_');
 
-		#{'height-spacer__' + $name}: $value;
+		#{'height__' + $name}: $value;
 	}
 
 	// border radius
 	@each $key, $value in $border-radius {
-		#{'border-radius-spacer__' + $key}: $value;
+		#{'border-radius__' + $key}: $value;
 	}
 
 	// border width
 	@each $key, $value in $border-width {
-		#{'border-width-spacer__' + $key}: $value;
+		#{'border-width__' + $key}: $value;
 	}
 
 	// #endregion
@@ -402,9 +416,106 @@
 
 	// ============================================================== */
 	// #region EFFECTS
-	// blend-mode
-	@each $index in $blend-mode {
-		#{'blend-mode__' + $index}: $index;
+	// box-shadow
+	@each $key, $value in $box-shadow {
+		#{'box-shadow__' + $key}: $value;
+	}
+
+	// opacity
+	@each $key, $value in $opacity {
+		#{'opacity__' + $key}: $value;
+	}
+
+	// mix-blend-mode
+	@each $index in $mix-blend-mode {
+		#{'mix-blend-mode__' + $index}: $index;
+	}
+
+	// background-blend-mode
+	@each $index in $background-blend-mode {
+		#{'background-blend-mode__' + $index}: $index;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region FILTERS
+	// blur
+	@each $key, $value in $blur {
+		#{'blur__' + $key}: $value;
+	}
+
+	// brightness
+	@each $key, $value in $brightness {
+		#{'brightness__' + $key}: $value;
+	}
+
+	// saturation
+	@each $key, $value in $saturation {
+		#{'saturation__' + $key}: $value;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region TABLES
+	// border-collapse
+	@each $key, $value in $border-collapse {
+		#{'border-collapse__' + $key}: $value;
+	}
+
+	// table-layout
+	@each $key, $value in $table-layout {
+		#{'table-layout__' + $key}: $value;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region TRANSITIONS & ANIMATIONS
+	// transition property
+	@each $key, $value in $transition-property {
+		#{'transition-property__' + $key}: $value;
+	}
+
+	// transition duration
+	@each $key, $value in $transition-duration-delay {
+		#{'transition-duration-delay__' + $key}: $value;
+	}
+
+	@each $key, $value in $transition-timing-function {
+		#{'transition-timing-function__' + $key}: $value;
+	}
+
+	@each $key, $value in $animation {
+		#{'animation__' + $key}: $value;
+	}
+
+	// #endregion
+
+	// ============================================================== */
+	// #region TRANSFORMS
+	// scale
+	@each $key, $value in $scale {
+		#{'scale__' + $key}: $value;
+	}
+
+	// rotate
+	@each $key, $value in $rotate {
+		#{'rotate__' + $key}: $value;
+	}
+
+	// translate
+	@each $key, $value in $translate {
+		$name: meta.inspect($key);
+		$name: str-replace($name, '\\/', '/');
+
+		#{'translate__' + $name}: $value;
+	}
+
+	// transform-origin
+	@each $key, $value in $transform-origin {
+		#{'transform-origin__' + $key}: $value;
 	}
 
 	// #endregion

package/src/props/background.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($background-image, $prefix: bg);

package/src/props/borders.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($border-radius, $prefix: rounded);

package/src/props/breakpoints.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../context' as *;
+
+:where(:host, :root, .theme) {
+	@each $breakpoint, $breakpoint-value in $breakpoints {
+		@media screen and (min-width: $breakpoint-value) {
+			--breakpoint-key: #{$breakpoint};
+			--breakpoint-value: #{$breakpoint-value};
+		}
+	}
+	@include spread-map-into-props(
+		$map: map.remove($breakpoints, 'xxs'),
+		$prefix: breakpoint
+	);
+}

package/src/props/colors.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($colors, $prefix: color);

package/src/props/effects.scss

@@ -1,5 +1,6 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($box-shadow, $prefix: shadow);
+	@include spread-map-into-props($opacity, $prefix: opacity);
 }

package/src/props/filters.scss

@@ -1,6 +1,7 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($blur, $prefix: blur);
 	@include spread-map-into-props($brightness, $prefix: brightness);
+	@include spread-map-into-props($saturation, $prefix: saturate);
 }

package/src/props/index.scss

@@ -1,12 +1,13 @@
-@import 'animation';
-@import 'background';
-@import 'borders';
-@import 'colors';
-@import 'effects';
-@import 'filters';
-@import 'layout';
-@import 'media';
-@import 'spacing';
-@import 'typography';
-@import 'sizing';
-@import 'input';
+@use 'background';
+@use 'borders';
+@use 'breakpoints';
+@use 'colors';
+@use 'effects';
+@use 'filters';
+@use 'input';
+@use 'layout';
+@use 'media';
+@use 'sizing';
+@use 'spacing';
+@use 'transitions';
+@use 'typography';

package/src/props/input.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $input, $prefix: input);

package/src/props/layout.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($map: $aspect-ratio, $prefix: aspect);

package/src/props/media.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 // motion
 @custom-media --motion-ok (prefers-reduced-motion: no-preference);

package/src/props/sizing.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	@include spread-map-into-props($width, $prefix: w);

package/src/props/spacing.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	// static
@@ -11,7 +11,7 @@
 	@each $name, $sizes in $spacing-dynamic {
 		@each $breakpoint, $size in $sizes {
 			@if map-has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint) {
+				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static spacing

package/src/props/{animation.scss → transitions.scss}

@@ -1,11 +1,45 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
+	// animation
 	@media (prefers-reduced-motion: no-preference) {
-		@include spread-map-into-props($animate, $prefix: animate);
+		// transition-property
+		@include spread-map-into-props(
+			$transition-property,
+			$prefix: transition-property
+		);
+
+		// duration
+		@include spread-map-into-props(
+			$transition-duration-delay,
+			$prefix: duration
+		);
+
+		// ease
+		@include spread-map-into-props(
+			$transition-timing-function,
+			$prefix: ease
+		);
+
+		// animation
+		@include spread-map-into-props($animation, animation);
+
+		// transition
+		@each $property, $value in $transition-property {
+			@if $property != 'none' {
+				--transition-#{$property}: var(
+						--transition-property-#{$property}
+					)
+					var(--duration-300)
+					var(--ease-in-out);
+			} @else {
+				--transition-#{$property}: none;
+			}
+		}
 	}
 }
 
+// keyframes
 @keyframes indeterminate {
 	0% {
 		transform: scaleX(0);
@@ -78,3 +112,20 @@
 		background-position: -200% 0;
 	}
 }
+
+@keyframes pie-masks {
+	0% {
+		opacity: 1;
+	}
+
+	50%,
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes shine {
+	to {
+		background-position-x: -200%;
+	}
+}

package/src/props/typography.scss

@@ -1,4 +1,4 @@
-@import '../context';
+@use '../context' as *;
 
 :where(:host, :root, .theme) {
 	// font-family
@@ -22,7 +22,7 @@
 	@each $name, $sizes in $font-size-dynamic {
 		@each $breakpoint, $size in $sizes {
 			@if map-has-key($breakpoints, $breakpoint) {
-				@include media-breakpoint-up($breakpoint) {
+				@include media-breakpoint-up($breakpoint, $breakpoints) {
 					$var: $size;
 
 					// if is a static font-size

package/src/settings/_background.scss

@@ -1,3 +1,6 @@
+@use 'colors' as *;
+@use '../tools/functions' as *;
+
 // background-attachment
 $background-attachment: (fixed, local, scroll) !default;
 
@@ -48,9 +51,11 @@ $background-image: (
 	chevron:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"),
 	grid:
-		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='rgb(51 65 85 / 0.25)'%3E%3Cpath d='M0 .5H31.5V32'/%3E%3C/svg%3E"),
 	check:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"),
 	minus:
 		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"),
+	close:
+		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(#{hex-to-rgb($color-word)})' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20L4 4m16 0L4 20'/%3E%3C/svg%3E"),
 ) !default;

package/src/settings/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use '../tools/mixins' as *;
+
 $breakpoints: (
 	xxs: 0,
 	xs: 360px,

package/src/settings/_colors.scss

@@ -1,4 +1,6 @@
 @use 'sass:color';
+@use 'sass:map';
+@use '../tools/functions' as *;
 
 // color variables
 $color-scheme: light !default;
@@ -7,13 +9,21 @@ $color-black: #000 !default;
 $color-white: #fff !default;
 $color-brand: #1976d2 !default;
 $color-accent: #9c27b0 !default;
-$color-success: #21ba45 !default;
-$color-danger: #c10015 !default;
+$color-success: #178230 !default;
+$color-danger: #af2323 !default;
 $color-info: #31ccec !default;
 $color-warning: #f2c037 !default;
 $color-gray: hsl(color.hue($color-brand) 15% 50%) !default;
 $color-word: hsl(color.hue($color-brand) 15% 10%) !default;
 $color-surface: hsl(color.hue($color-brand) 10% 98%) !default;
+$color-surface-palette: (
+	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
+	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
+	success: hsl(var(--color-success-hue) var(--color-success-saturation) 90%),
+	danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
+	info: hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
+	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
+) !default;
 $color-shadow: hsl(color.hue($color-brand) 50% 20%) !default;
 $color-backdrop: hsla(color.hue($color-brand) 50% 20% / 20%) !default;
 $color-alpha: hsla(0deg 0% 0% / 0%) !default;
@@ -31,8 +41,17 @@ $colors: (
 	info: color-shades-map($color-info, 'info'),
 	warning: color-shades-map($color-warning, 'warning'),
 	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
-	word: color-lighten-map($color-word, 'word', $scale: 15%),
-	surface: color-darken-map($color-surface, 'surface', $scale: 2%),
+	word: color-lighten-map($color-word, 'word', $scale: 12%, $fixed: true),
+	surface:
+		map.merge(
+			color-darken-map(
+				$color-surface,
+				'surface',
+				$scale: 2%,
+				$fixed: true
+			),
+			$color-surface-palette
+		),
 	shadow: hsla-map($color-shadow, 'shadow'),
 	backdrop: hsla-map($color-backdrop, 'backdrop'),
 	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),

package/src/settings/_effects.scss

@@ -17,8 +17,33 @@ $box-shadow: (
 	none: '0 0 #0000',
 ) !default;
 
-// blend-mode
-$blend-mode: (
+// opacity
+$opacity: (
+	0: 0,
+	5: 0.05,
+	10: 0.1,
+	15: 0.15,
+	20: 0.2,
+	25: 0.25,
+	30: 0.3,
+	35: 0.35,
+	40: 0.4,
+	45: 0.45,
+	50: 0.5,
+	55: 0.55,
+	60: 0.6,
+	65: 0.65,
+	70: 0.7,
+	75: 0.75,
+	80: 0.8,
+	85: 0.85,
+	90: 0.9,
+	95: 0.95,
+	100: 1,
+) !default;
+
+// mix blend-mode
+$mix-blend-mode: (
 	normal,
 	multiply,
 	screen,
@@ -37,3 +62,23 @@ $blend-mode: (
 	luminosity,
 	plus-lighter
 ) !default;
+
+// background blend-mode
+$background-blend-mode: (
+	normal,
+	multiply,
+	screen,
+	overlay,
+	darken,
+	lighten,
+	color-dodge,
+	color-burn,
+	hard-light,
+	soft-light,
+	difference,
+	exclusion,
+	hue,
+	saturation,
+	color,
+	luminosity
+) !default;

package/src/settings/_filters.scss

@@ -24,3 +24,12 @@ $brightness: (
 	150: brightness(1.5),
 	200: brightness(2),
 ) !default;
+
+// saturation
+$saturation: (
+	0: saturate(0),
+	50: saturate(0.5),
+	100: saturate(1),
+	150: saturate(1.5),
+	200: saturate(2),
+) !default;