@volverjs/style 0.1.2-beta.9 → 0.1.2

package/src/themes/dark/settings/_colors.scss

@@ -1,15 +1,35 @@
 @use 'sass:color';
+@use 'sass:map';
+@use '../../../tools/functions' as *;
+@use '../../../settings/colors' as *;
 
 $dark-color-scheme: dark !default;
 $dark-color-brand: #1976d2 !default;
 $dark-color-word: hsl(color.hue($dark-color-brand) 15% 85%) !default;
 $dark-color-surface: hsl(color.hue($dark-color-brand) 10% 5%) !default;
 $dark-color-alpha: hsla(0deg 0% 100% / 0%) !default;
+$dark-color-surface-palette: (
+	brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
+	accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
+	success: hsl(var(--color-success-hue) var(--color-success-saturation) 10%),
+	danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 10%),
+	info: hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
+	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
+) !default;
 
 // color map
 $dark-colors: (
 	scheme: $dark-color-scheme,
-	word: color-darken-map($dark-color-word, 'word', $scale: 15%),
-	surface: color-lighten-map($dark-color-surface, 'surface', $scale: 5%),
+	word: color-darken-map($dark-color-word, 'word', $scale: 12%, $fixed: true),
+	surface:
+		map.merge(
+			color-lighten-map(
+				$dark-color-surface,
+				'surface',
+				$scale: 5%,
+				$fixed: true
+			),
+			$dark-color-surface-palette
+		),
 	alpha: color-alpha-map($dark-color-alpha, 'alpha', $steps: 5, $scale: 5%),
 ) !default;

package/src/themes/dark/settings/_index.scss

@@ -1,5 +1,5 @@
-@import 'colors';
-@import 'background';
+@forward 'colors';
+@forward 'background';
+@forward 'input';
 
-@import 'components/vv-button';
-@import 'components/vv-input-checkbox';
+@forward 'components/vv-button';

package/src/themes/dark/settings/_input.scss

@@ -0,0 +1,8 @@
+$dark-input: (
+	invalid: (
+		color: var(--color-danger-lighten-2),
+	),
+	valid: (
+		color: var(--color-success-lighten-2),
+	),
+) !default;

package/src/themes/dark/settings/components/_vv-button.scss

@@ -1,20 +1,20 @@
 $dark-vv-button: (
 	modifier: (
 		primary: (
-			border-color: var(--color-gray-lighten-3),
-			background: var(--color-gray-lighten-3),
+			border-color: var(--color-gray-darken-1),
+			background: var(--color-gray-darken-1),
 			state: (
 				focus-visible: (
 					outline: var(--spacing-px) solid var(--color-gray),
 				),
 				hover: (
-					background: var(--color-gray-lighten-2),
-					border-color: var(--color-gray-lighten-2),
-				),
-				active: (
 					background: var(--color-gray-lighten-1),
 					border-color: var(--color-gray-lighten-1),
 				),
+				active: (
+					background: var(--color-gray),
+					border-color: var(--color-gray),
+				),
 			),
 		),
 		secondary: (
@@ -41,7 +41,7 @@ $dark-vv-button: (
 			state: (
 				focus-visible: (
 					outline: var(--spacing-px) solid var(--color-gray),
-					outline-offset: 0,
+					outline-offset: var(--spacing-0),
 				),
 				hover: (
 					background: var(--color-gray-darken-4),
@@ -51,8 +51,8 @@ $dark-vv-button: (
 				),
 			),
 		),
-		text: (
-			text-shadow: 0 1px 0 var(--color-gray-darken-5),
+		link: (
+			color: var(--color-brand-lighten-1),
 		),
 	),
 ) !default;

package/src/themes/dark/volver.scss

@@ -1,5 +1,5 @@
 // props
-@import 'props';
+@use 'props';
 
 // components
-@import 'components';
+@use 'components';

package/src/tools/_breakpoints.scss

@@ -28,7 +28,7 @@
 // Minimum breakpoint width. Null for the smallest (first) breakpoint.
 //    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    576px
-@function breakpoint-min($name, $bps: $breakpoints) {
+@function breakpoint-min($name, $bps) {
 	$min: map.get($bps, $name);
 	@return if($min != 0, $min, null);
 }
@@ -41,7 +41,7 @@
 // See https://bugs.webkit.org/show_bug.cgi?id=178261
 //    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    767.98px
-@function breakpoint-max($name, $bps: $breakpoints) {
+@function breakpoint-max($name, $bps) {
 	$next: breakpoint-next($name, $bps);
 	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
 }
@@ -52,13 +52,13 @@
 //    ""  (Returns a blank string)
 //    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
 //    "-sm"
-@function breakpoint-infix($name, $bps: $breakpoints) {
+@function breakpoint-infix($name, $bps) {
 	@return if(breakpoint-min($name, $bps) == null, '', '-#{$name}');
 }
 
 // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
 // Makes the @content apply to the given breakpoint and wider.
-@mixin media-breakpoint-up($name, $bps: $breakpoints) {
+@mixin media-breakpoint-up($name, $bps) {
 	$min: breakpoint-min($name, $bps);
 	@if $min {
 		@media (min-width: $min) {
@@ -71,7 +71,7 @@
 
 // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
 // Makes the @content apply to the given breakpoint and narrower.
-@mixin media-breakpoint-down($name, $bps: $breakpoints) {
+@mixin media-breakpoint-down($name, $bps) {
 	$max: breakpoint-max($name, $bps);
 	@if $max {
 		@media (max-width: $max) {
@@ -84,7 +84,7 @@
 
 // Media that spans multiple breakpoint widths.
 // Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $bps: $breakpoints) {
+@mixin media-breakpoint-between($lower, $upper, $bps) {
 	$min: breakpoint-min($lower, $bps);
 	$max: breakpoint-max($upper, $bps);
 
@@ -106,7 +106,7 @@
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
-@mixin media-breakpoint-only($name, $bps: $breakpoints) {
+@mixin media-breakpoint-only($name, $bps) {
 	$min: breakpoint-min($name, $bps);
 	$max: breakpoint-max($name, $bps);
 

package/src/tools/_functions.scss

@@ -3,6 +3,7 @@
 @use 'sass:color';
 @use 'sass:string';
 @use 'sass:list';
+@use 'sass:math';
 
 @function hsla-map($color, $name) {
 	@return (
@@ -37,17 +38,20 @@
 	@return $result;
 }
 
-@function color-shades-map($color, $name, $steps: 5, $scale: 10%) {
-	$result: (#{$name}: $color);
-	@for $index from 1 to ($steps + 1) {
-		$result: map.merge(
-			map.merge(
-				$result,
-				color-lighten-map($color, $name, $steps, $scale, 'lighten')
-			),
-			color-darken-map($color, $name, $steps, $scale, 'darken')
-		);
-	}
+@function color-shades-map(
+	$color,
+	$name,
+	$steps: 5,
+	$scale: 10%,
+	$fixed: false
+) {
+	$result: map.merge(
+		map.merge(
+			(#{$name}: $color),
+			color-lighten-map($color, $name, $steps, $scale, 'lighten', $fixed)
+		),
+		color-darken-map($color, $name, $steps, $scale, 'darken', $fixed)
+	);
 	@return $result;
 }
 
@@ -56,7 +60,8 @@
 	$name,
 	$steps: 5,
 	$scale: 10%,
-	$prefix: ''
+	$prefix: '',
+	$fixed: false
 ) {
 	$result: hsla-map($color, $name);
 	@for $index from 1 to ($steps + 1) {
@@ -65,23 +70,53 @@
 			$key: $prefix + '-' + $index;
 		}
 
-		$value: color.scale($color, $lightness: $scale * $index);
-		$result: map.merge(
-			$result,
-			(
-				#{$key}:
-					hsl(
-						var(--color-#{$name}-hue)
-							var(--color-#{$name}-saturation)
-							color.lightness($value)
-					)
-			)
-		);
+		@if $fixed {
+			$increment: $scale * $index;
+			$result: map.merge(
+				$result,
+				(
+					#{$key}:
+						hsl(
+							var(--color-#{$name}-hue)
+								var(--color-#{$name}-saturation)
+								calc(
+									var(--color-#{$name}-lightness) +
+										#{$increment}
+								)
+						)
+				)
+			);
+		} @else {
+			$increment: math.div($scale * $index, 100);
+			$increment: math.div($increment, ($increment * 0 + 1));
+			$result: map.merge(
+				$result,
+				(
+					#{$key}:
+						hsl(
+							var(--color-#{$name}-hue)
+								var(--color-#{$name}-saturation)
+								calc(
+									var(--color-#{$name}-lightness) +
+										var(--color-#{$name}-lightness) *
+										#{$increment}
+								)
+						)
+				)
+			);
+		}
 	}
 	@return $result;
 }
 
-@function color-darken-map($color, $name, $steps: 5, $scale: 10%, $prefix: '') {
+@function color-darken-map(
+	$color,
+	$name,
+	$steps: 5,
+	$scale: 10%,
+	$prefix: '',
+	$fixed: false
+) {
 	$result: hsla-map($color, $name);
 
 	@for $index from 1 to ($steps + 1) {
@@ -90,18 +125,41 @@
 			$key: $prefix + '-' + $index;
 		}
 
-		$value: color.scale($color, $lightness: -1 * $scale * $index);
-		$result: map.merge(
-			$result,
-			(
-				#{$key}:
-					hsl(
-						var(--color-#{$name}-hue)
-							var(--color-#{$name}-saturation)
-							color.lightness($value)
-					)
-			)
-		);
+		@if $fixed {
+			$decrement: $scale * $index;
+			$result: map.merge(
+				$result,
+				(
+					#{$key}:
+						hsl(
+							var(--color-#{$name}-hue)
+								var(--color-#{$name}-saturation)
+								calc(
+									var(--color-#{$name}-lightness) -
+										#{$decrement}
+								)
+						)
+				)
+			);
+		} @else {
+			$decrement: math.div($scale * $index, 100);
+			$decrement: math.div($decrement, ($decrement * 0 + 1));
+			$result: map.merge(
+				$result,
+				(
+					#{$key}:
+						hsl(
+							var(--color-#{$name}-hue)
+								var(--color-#{$name}-saturation)
+								calc(
+									var(--color-#{$name}-lightness) -
+										var(--color-#{$name}-lightness) *
+										#{$decrement}
+								)
+						)
+				)
+			);
+		}
 	}
 	@return $result;
 }

package/src/tools/_index.scss

@@ -1,3 +1,3 @@
-@import 'functions';
-@import 'mixins';
-@import 'breakpoints';
+@forward 'functions';
+@forward 'mixins';
+@forward 'breakpoints';