@volverjs/style 0.0.0

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

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

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

@@ -0,0 +1,58 @@
+$vv-button: (
+	modifier: (
+		primary: (
+			border-color: var(--color-gray-lighten-3),
+			background: var(--color-gray-lighten-3),
+			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),
+				),
+			),
+		),
+		secondary: (
+			border-color: var(--color-gray-darken-1),
+			background: var(--color-gray-darken-3),
+			text-shadow: 0 1px 0 var(--color-gray-darken-5),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray),
+				),
+				hover: (
+					background: var(--color-gray-darken-4),
+				),
+				active: (
+					background: var(--color-gray-darken-5),
+				),
+			),
+		),
+		ghost: (
+			background: transparent,
+			border-color: transparent,
+			color: var(--color-gray-lighten-2),
+			text-shadow: 0 1px 0 var(--color-gray-darken-4),
+			state: (
+				focus-visible: (
+					outline: var(--spacing-px) solid var(--color-gray),
+					outline-offset: 0,
+				),
+				hover: (
+					background: var(--color-gray-darken-4),
+				),
+				active: (
+					background: var(--color-gray-darken-5),
+				),
+			),
+		),
+		text: (
+			text-shadow: 0 1px 0 var(--color-gray-darken-5),
+		),
+	),
+) !default;

package/src/themes/dark/settings/components/_vv-input-checkbox.scss

@@ -0,0 +1,26 @@
+$vv-input-checkbox: (
+	element: (
+		input: (
+			state: (
+				checked: (
+					background-image:
+						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"),
+				),
+			),
+		),
+	),
+	modifier: (
+		partial: (
+			element: (
+				input: (
+					state: (
+						checked: (
+							background-image:
+								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"),
+						),
+					),
+				),
+			),
+		),
+	),
+) !default;

package/src/themes/dark/style.scss

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

package/src/tools/_breakpoints.scss

@@ -0,0 +1,126 @@
+@use 'sass:map';
+
+// Breakpoint viewport sizes and media queries.
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+// The map defined in the `$breakpoints` global variable is used as the `$bps` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $bps-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next(
+	$name,
+	$bps: $breakpoints,
+	$bps-names: map.keys($bps)
+) {
+	$n: list.index($bps-names, $name);
+	@return if(
+		$n != null and $n < length($bps-names),
+		nth($bps-names, $n + 1),
+		null
+	);
+}
+
+// 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) {
+	$min: map.get($bps, $name);
+	@return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// 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) {
+	$next: breakpoint-next($name, $bps);
+	@return if($next, breakpoint-min($next, $bps) - 0.02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $bps: $breakpoints) {
+	@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) {
+	$min: breakpoint-min($name, $bps);
+	@if $min {
+		@media (min-width: $min) {
+			@content;
+		}
+	} @else {
+		@content;
+	}
+}
+
+// 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) {
+	$max: breakpoint-max($name, $bps);
+	@if $max {
+		@media (max-width: $max) {
+			@content;
+		}
+	} @else {
+		@content;
+	}
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $bps: $breakpoints) {
+	$min: breakpoint-min($lower, $bps);
+	$max: breakpoint-max($upper, $bps);
+
+	@if $min != null and $max != null {
+		@media (min-width: $min) and (max-width: $max) {
+			@content;
+		}
+	} @else if $max == null {
+		@include media-breakpoint-up($lower, $bps) {
+			@content;
+		}
+	} @else if $min == null {
+		@include media-breakpoint-down($upper, $bps) {
+			@content;
+		}
+	}
+}
+
+// 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) {
+	$min: breakpoint-min($name, $bps);
+	$max: breakpoint-max($name, $bps);
+
+	@if $min != null and $max != null {
+		@media (min-width: $min) and (max-width: $max) {
+			@content;
+		}
+	} @else if $max == null {
+		@include media-breakpoint-up($name, $bps) {
+			@content;
+		}
+	} @else if $min == null {
+		@include media-breakpoint-down($name, $bps) {
+			@content;
+		}
+	}
+}

package/src/tools/_functions.scss

@@ -0,0 +1,138 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:string';
+@use 'sass:list';
+
+@function hsla-map($color, $name) {
+	@return (
+		hue: color.hue($color),
+		saturation: color.saturation($color),
+		lightness: color.lightness($color),
+		#{$name}: hsla(var(--color-#{$name}-hue)
+					var(--color-#{$name}-saturation)
+					var(--color-#{$name}-lightness) / color.alpha($color))
+	);
+}
+
+@function alpha-color($name, $alpha) {
+	@return hsla(
+		var(--color-#{$name}-hue) var(--color-#{$name}-saturation)
+			var(--color-#{$name}-lightness) / #{$alpha}
+	);
+}
+
+@function hex-to-rgb($hex) {
+	@return red($hex), green($hex), blue($hex);
+}
+
+@function color-alpha-map($color, $name, $steps: 9, $scale: 10%) {
+	$result: hsla-map($color, $name);
+	@for $index from 1 to ($steps + 1) {
+		$result: map.merge(
+			$result,
+			(#{$index}: alpha-color($name, $index * $scale))
+		);
+	}
+	@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')
+		);
+	}
+	@return $result;
+}
+
+@function color-lighten-map(
+	$color,
+	$name,
+	$steps: 5,
+	$scale: 10%,
+	$prefix: ''
+) {
+	$result: hsla-map($color, $name);
+	@for $index from 1 to ($steps + 1) {
+		$key: $index;
+		@if $prefix != '' {
+			$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)
+					)
+			)
+		);
+	}
+	@return $result;
+}
+
+@function color-darken-map($color, $name, $steps: 5, $scale: 10%, $prefix: '') {
+	$result: hsla-map($color, $name);
+
+	@for $index from 1 to ($steps + 1) {
+		$key: $index;
+		@if $prefix != '' {
+			$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)
+					)
+			)
+		);
+	}
+	@return $result;
+}
+
+@function str-replace($string, $search, $replace: '') {
+	$index: string.index($string, $search);
+
+	@if $index {
+		@return string.slice($string, 1, $index - 1) + $replace +
+			str-replace(
+				string.slice($string, $index + string.length($search)),
+				$search,
+				$replace
+			);
+	}
+
+	@return $string;
+}
+
+@function list-to-string($list, $glue: ', ') {
+	$result: null;
+
+	@for $i from 1 through length($list) {
+		$e: list.nth($list, $i);
+
+		@if $result and $e {
+			$result: $result + $glue + $e;
+		} @else if $e {
+			$result: $e;
+		}
+	}
+
+	@return $result;
+}

package/src/tools/_index.scss

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