@volverjs/style 0.1.2-beta.3 → 0.1.2-beta.30

package/src/settings/components/_vv-tooltip.scss

@@ -0,0 +1,74 @@
+$vv-tooltip: (
+	opacity: 0,
+	display: block,
+	position: absolute,
+	inset-inline: 100% auto,
+	top: 50%,
+	transform: translate(var(--spacing-10), -50%),
+	z-index: var(--z-tooltip),
+	inline-size: max-content,
+	max-inline-size: 25ch,
+	border-radius: var(--rounded-md),
+	padding: var(--spacing-4) var(--spacing-sm),
+	background: var(--color-gray-darken-4),
+	font-size: var(--text-12),
+	font-weight: var(--font-normal),
+	color: var(--color-gray-lighten-5),
+	text-align: center,
+	box-shadow: var(--shadow-md),
+	will-change: opacity,
+	transition: var(--transition-opacity),
+	pseudo: (
+		after: (
+			position: absolute,
+			z-index: -1,
+			inset-inline: 0 auto,
+			inset-block: 50% auto,
+			transform: translate(-100%, -50%),
+			border-width: var(--spacing-8),
+			border-style: solid,
+			border-color: transparent var(--color-gray-darken-4) transparent
+				transparent,
+		),
+	),
+	modifier: (
+		visible: (
+			opacity: 1,
+		),
+		top: (
+			inset-inline: 50% 0,
+			inset-block: auto 100%,
+			transform: translate(-50%, calc(var(--spacing-10) * -1)),
+			pseudo: (
+				after: (
+					inset-inline: 50% auto,
+					inset-block: 100% auto,
+					transform: translate(-50%, 0) rotate(-90deg),
+				),
+			),
+		),
+		bottom: (
+			inset-inline: 50% 0,
+			inset-block: 100% auto,
+			transform: translate(-50%, var(--spacing-10)),
+			pseudo: (
+				after: (
+					inset-inline: 50% auto,
+					inset-block: 0 auto,
+					transform: translate(-50%, -100%) rotate(90deg),
+				),
+			),
+		),
+		left: (
+			inset-inline: auto 100%,
+			transform: translate(calc(var(--spacing-10) * -1), -50%),
+			pseudo: (
+				after: (
+					position: absolute,
+					inset-inline: auto 0,
+					transform: translate(100%, -50%) rotate(180deg),
+				),
+			),
+		),
+	),
+) !default;

package/src/themes/dark/_context.scss

@@ -1,8 +1,11 @@
 // configuration
-@import '../../config';
+@forward '../../config';
 
 // tools (mixins, functions, recipes)
-@import '../../tools';
+@forward '../../tools';
 
-// settings
-@import 'settings';
+// main settings
+@forward '../../settings';
+
+// theme settings
+@forward 'settings';

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

@@ -1,15 +1,13 @@
 @use 'sass:map';
-@import '../context';
+@use '../context' as *;
 
 $component-name: map.get($components-names, vv-button);
-$component-map: $vv-button;
-$props: true;
+$component-map: $dark-vv-button;
 
 @mixin theme-dark-vv-button {
 	@include spread-map-into-props(
 		$map: $component-map,
-		$prefix: $component-name,
-		$deep: $props
+		$prefix: $component-name
 	);
 }
 

package/src/themes/dark/components/index.scss

@@ -1,2 +1 @@
-@import 'vv-button';
-@import 'vv-input-checkbox';
+@use 'vv-button';

package/src/themes/dark/props/_background.scss

@@ -1,7 +1,7 @@
-@import '../context';
+@use '../context' as *;
 
 @mixin theme-dark-bg {
-	@include spread-map-into-props($background-image, 'bg');
+	@include spread-map-into-props($dark-background-image, 'bg');
 }
 
 :where(:host, :root, .theme):not(.theme--light) {

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

@@ -1,7 +1,7 @@
-@import '../context';
+@use '../context' as *;
 
 @mixin theme-dark-colors {
-	@include spread-map-into-props($colors, 'color');
+	@include spread-map-into-props($dark-colors, 'color');
 }
 
 :where(:host, :root, .theme):not(.theme--light) {

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

@@ -0,0 +1,15 @@
+@use '../context' as *;
+
+@mixin theme-dark-input {
+	@include spread-map-into-props($dark-input, 'input');
+}
+
+:where(:host, :root, .theme):not(.theme--light) {
+	@media (prefers-color-scheme: dark) {
+		@include theme-dark-input;
+	}
+}
+
+:where(.theme.theme--dark) {
+	@include theme-dark-input;
+}

package/src/themes/dark/props/index.scss

@@ -1,2 +1,3 @@
-@import 'background';
-@import 'colors';
+@use 'background';
+@use 'colors';
+@use 'input';

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

@@ -1,12 +1,17 @@
+@use 'colors' as *;
+@use '../../../tools/functions' as *;
+
 // background-image
-$background-image: (
+$dark-background-image: (
 	none: none,
 	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"),
+		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($dark-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"),
 	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"),
+		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($dark-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"),
+		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($dark-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($dark-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/themes/dark/settings/_colors.scss

@@ -1,15 +1,30 @@
 @use 'sass:color';
+@use 'sass:map';
+@use '../../../tools/functions' as *;
+@use '../../../settings/colors' as *;
 
-$color-scheme: dark !default;
-$color-brand: #1976d2 !default;
-$color-word: hsl(color.hue($color-brand) 15% 85%) !default;
-$color-surface: hsl(color.hue($color-brand) 10% 5%) !default;
-$color-alpha: hsla(0deg 0% 100% / 0%) !default;
+$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(color.hue($color-brand) color.saturation($color-brand) 10%),
+	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 10%),
+	success: hsl(color.hue($color-success) color.saturation($color-success) 10%),
+	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 10%),
+	info: hsl(color.hue($color-info) color.saturation($color-info) 10%),
+	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 10%),
+) !default;
 
 // color map
-$colors: (
-	scheme: $color-scheme,
-	word: color-darken-map($color-word, 'word', $scale: 15%),
-	surface: color-lighten-map($color-surface, 'surface', $scale: 5%),
-	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 5%),
+$dark-colors: (
+	scheme: $dark-color-scheme,
+	word: color-darken-map($dark-color-word, 'word', $scale: 15%),
+	surface:
+		map.merge(
+			color-lighten-map($dark-color-surface, 'surface', $scale: 5%),
+			$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 @@
-$vv-button: (
+$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 @@ $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 @@ $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

@@ -0,0 +1,5 @@
+// props
+@use 'props';
+
+// 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/_index.scss

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