@volverjs/style 0.1.12-beta.4 → 0.1.12-beta.6

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.12-beta.4",
+  "version": "0.1.12-beta.6",
   "engines": {
     "node": ">= 12.x"
   },
@@ -53,11 +53,12 @@
     "postcss-preset-env": "^8.4.2",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
+    "reduce-css-calc": "^2.1.8",
     "remark": "^14.0.3",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-lint": "^9.1.2",
-    "sass": "^1.62.1",
+    "sass": "^1.63.3",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-recommended-scss": "^12.0.0",
@@ -226,7 +227,7 @@
   "scripts": {
     "dev": "vite --port 3000 --open",
     "build": "node ./scripts/build.js",
-    "generate-design-tokens": "node ./scripts/generateDesignTokens.js",
+    "design-tokens": "node ./scripts/generateDesignTokens.js",
     "styleguide": "vite-ssg build"
   }
 }

package/src/export.scss

@@ -24,6 +24,8 @@
 						} @else {
 							#{'colors__' + $key + '-' + $subKey}: $subValue;
 						}
+					} @else {
+						#{'colors-values__' + $key + '-' + $subKey}: $subValue;
 					}
 				}
 			}
@@ -32,8 +34,7 @@
 		}
 	}
 
-	// colors exported with no vars
-	@each $key, $value in $colors-computed {
+	@each $key, $value in $dark-colors {
 		@if type-of($value) == 'map' {
 			@each $subKey, $subValue in $value {
 				@if type-of($value) not 'map' {
@@ -43,38 +44,17 @@
 						str-index($subKey, 'lightness')
 					{
 						@if '' + $key == $subKey {
-							#{'colors-computed__' + $key}: $subValue;
+							#{'dark-colors__' + $key}: $subValue;
 						} @else {
-							#{'colors-computed__' + $key + '-' + $subKey}: $subValue;
+							#{'dark-colors__' + $key + '-' + $subKey}: $subValue;
 						}
+					} @else {
+						#{'dark-colors-values__' + $key + '-' + $subKey}: $subValue;
 					}
 				}
 			}
 		} @else if $key != 'scheme' {
-			#{'colors-computed__' + $key}: $value;
-		}
-	}
-
-	// dark colors exported with no vars
-	@each $key, $value in $dark-colors-computed {
-		@if type-of($value) == 'map' {
-			@each $subKey, $subValue in $value {
-				@if type-of($value) not 'map' {
-					@if not
-						str-index($subKey, 'hue') and not
-						str-index($subKey, 'saturation') and not
-						str-index($subKey, 'lightness')
-					{
-						@if '' + $key == $subKey {
-							#{'dark-colors-computed__' + $key}: $subValue;
-						} @else {
-							#{'dark-colors-computed__' + $key + '-' + $subKey}: $subValue;
-						}
-					}
-				}
-			}
-		} @else if $key != 'scheme' {
-			#{'dark-colors-computed__' + $key}: $value;
+			#{'dark-colors__' + $key}: $value;
 		}
 	}
 
@@ -467,10 +447,6 @@
 		#{'box-shadow__' + $key}: $value;
 	}
 
-	@each $key, $value in $box-shadow-no-vars {
-		#{'box-shadow-no-vars__' + $key}: $value;
-	}
-
 	// opacity
 	@each $key, $value in $opacity {
 		#{'opacity__' + $key}: $value;

package/src/settings/_colors.scss

@@ -7,7 +7,7 @@ $color-scheme: light !default;
 $color-transparent: transparent !default;
 $color-black: #000 !default;
 $color-white: #fff !default;
-$color-brand: #1976d2 !default;
+$color-brand: #166abd !default;
 $color-accent: #9c27b0 !default;
 $color-success: #178230 !default;
 $color-danger: #af2323 !default;
@@ -34,67 +34,23 @@ $color-surface-palette-no-vars: (
 ) !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;
+$color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
 // colors map
 $colors: (
 	scheme: $color-scheme,
 	transparent: $color-transparent,
-	black: hsla-map($color-black, 'black'),
-	white: hsla-map($color-white, 'white'),
-	brand: color-shades-map($color-brand, 'brand'),
-	accent: color-shades-map($color-accent, 'accent'),
-	success: color-shades-map($color-success, 'success'),
-	danger: color-shades-map($color-danger, 'danger'),
-	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: 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%),
-) !default;
-
-// colors-computed map
-$colors-computed: (
-	scheme: $color-scheme,
-	transparent: $color-transparent,
-	black: hsla-map($color-black, 'black', $noVarExport: true),
-	white: hsla-map($color-white, 'white', $noVarExport: true),
-	shadow: hsla-map($color-shadow, 'shadow', $noVarExport: true),
-	backdrop: hsla-map($color-backdrop, 'backdrop', $noVarExport: true),
-	alpha:
-		color-alpha-map(
-			$color-alpha,
-			'alpha',
-			$steps: 5,
-			$scale: 5%,
-			$noVarExport: true
-		),
-	brand: color-shades-map($color-brand, 'brand', $noVarExport: true),
-	accent: color-shades-map($color-accent, 'accent', $noVarExport: true),
-	success: color-shades-map($color-success, 'success', $noVarExport: true),
-	danger: color-shades-map($color-danger, 'danger', $noVarExport: true),
-	info: color-shades-map($color-info, 'info', $noVarExport: true),
-	warning: color-shades-map($color-warning, 'warning', $noVarExport: true),
-	gray: color-shades-map($color-gray, 'gray', $scale: 15%, $noVarExport: true),
+	black: hsla-map($color-black, 'black'),
+	white: hsla-map($color-white, 'white'),
 	word:
 		color-lighten-map(
 			$color-word,
 			'word',
 			$scale: 12%,
 			$fixed: true,
-			$noVarExport: true
+			$inverted: false
 		),
 	surface:
 		map.merge(
@@ -102,9 +58,16 @@ $colors-computed: (
 				$color-surface,
 				'surface',
 				$scale: 2%,
-				$fixed: true,
-				$noVarExport: true
+				$fixed: true
 			),
-			$color-surface-palette-no-vars
+			$color-surface-palette
 		),
+	alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
+	brand: color-shades-map($color-brand, 'brand'),
+	accent: color-shades-map($color-accent, 'accent'),
+	success: color-shades-map($color-success, 'success'),
+	danger: color-shades-map($color-danger, 'danger'),
+	info: color-shades-map($color-info, 'info'),
+	warning: color-shades-map($color-warning, 'warning'),
+	gray: color-shades-map($color-gray, 'gray', $scale: 15%),
 ) !default;

package/src/settings/_effects.scss

@@ -26,24 +26,6 @@ $color-shadow-hue: color.hue(colors.$color-shadow);
 $color-shadow-saturation: color.saturation(colors.$color-shadow);
 $color-shadow-lightness: color.lightness(colors.$color-shadow);
 
-$box-shadow-no-vars: (
-	sm:
-		'0 1px 2px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 5%)',
-	shadow:
-		'0 1px 3px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 1px 2px -1px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	md:
-		'0 4px 6px -1px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 2px 4px -2px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	lg:
-		'0 10px 15px -3px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 4px 6px -4px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	xl:
-		'0 20px 25px -5px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%), 0 8px 10px -6px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 10%)',
-	2xl:
-		'0 25px 50px -12px hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 25%)',
-	inner:
-		'inset 0 2px 4px 0 hsla(#{$color-shadow-hue} #{$color-shadow-saturation} #{$color-shadow-lightness} / 5%)',
-	none: '0 0 #0000'
-) !default;
-
 // opacity
 $opacity: (
 	0: 0,

package/src/settings/components/_vv-alert-group.scss

@@ -5,17 +5,24 @@ $vv-alert-group: (
 	flex-direction: column,
 	gap: var(--spacing-sm),
 	overflow: hidden,
+	pointer-events: none,
 	element: (
 		list: (
 			_alias: '> [role="group"]',
 			display: flex,
 			flex-direction: column,
 			gap: var(--spacing-xs),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
 		),
 		item: (
 			_alias: '> [role="group"] > *',
 			transition: var(--transition-all),
 			flex-shrink: 0,
+			pointer-events: auto,
 		),
 		not-first: (
 			_alias: '> [role="group"] > *:not(:first-child)',
@@ -58,10 +65,10 @@ $vv-alert-group: (
 			max-height: var(--h-full),
 		),
 		reverse: (
-			flex-flow: column-reverse,
+			flex-direction: column-reverse,
 			element: (
 				list: (
-					flex-flow: column-reverse,
+					flex-direction: column-reverse,
 				),
 			),
 		),

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

@@ -132,10 +132,10 @@ $vv-alert: (
 			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 				header: (
-					color: var(--color-brand-darken-2),
+					color: var(--color-brand-darken-3),
 				),
 			),
 		),
@@ -214,18 +214,18 @@ $vv-alert: (
 					),
 				),
 				warning: (
-					border-color: var(--color-warning),
+					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-warning),
+							background-color: var(--color-warning-darken-5),
 						),
 					),
 				),
 				info: (
-					border-color: var(--color-info),
+					border-color: var(--color-info-darken-5),
 					element: (
 						header: (
-							background-color: var(--color-info),
+							background-color: var(--color-info-darken-5),
 						),
 					),
 				),

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

@@ -1,11 +1,7 @@
 $vv-avatar: (
-	--avatar-background-color: var(--color-brand),
-	--avatar-color: var(--color-white),
-	--avatar-border-radius: var(--rounded),
-	--avatar-border-color: var(--color-brand-darken-3),
-	[background-color]: var(--avatar-background-color),
-	[border-radius]: var(--avatar-border-radius),
-	[color]: var(--avatar-color),
+	background-color: var(--color-brand),
+	border-radius: var(--rounded),
+	color: var(--color-white),
 	display: inline-flex,
 	position: relative,
 	justify-content: center,
@@ -46,19 +42,29 @@ $vv-avatar: (
 			width: 100%,
 			height: 100%,
 			object-fit: inherit,
-			[border-radius]: var(--avatar-border-radius),
+			border-radius: var(--rounded),
 			overflow: hidden,
 		),
 	),
 	modifier: (
 		rounded: (
-			--avatar-border-radius: var(--rounded-full),
+			border-radius: var(--rounded-full),
+			element: (
+				image: (
+					border-radius: var(--rounded-full),
+				),
+			),
 		),
 		square: (
-			--avatar-border-radius: var(--rounded-none),
+			border-radius: var(--rounded-none),
+			element: (
+				image: (
+					border-radius: var(--rounded-none),
+				),
+			),
 		),
 		bordered: (
-			[border-color]: var(--avatar-border-color),
+			border-color: var(--color-brand-darken-3),
 			border-width: var(--border),
 			border-style: solid,
 		),
@@ -73,79 +79,71 @@ $vv-avatar: (
 			height: var(--spacing-40),
 		),
 		transparent: (
-			--avatar-background-color: var(--color-transparent),
+			background-color: var(--color-transparent),
 		),
 		surface: (
-			--avatar-background-color: var(--color-surface-1),
-			--avatar-border-color: var(--color-surface-3),
-			--avatar-color: var(--color-word-2),
+			background-color: var(--color-surface-1),
+			border-color: var(--color-surface-3),
+			color: var(--color-word-2),
 		),
 		danger: (
-			--avatar-background-color: var(--color-danger),
-			--avatar-border-color: var(--color-danger-darken-3),
+			background-color: var(--color-danger),
+			border-color: var(--color-danger-darken-3),
 		),
 		success: (
-			--avatar-background-color: var(--color-success),
-			--avatar-border-color: var(--color-success-darken-3),
+			background-color: var(--color-success),
+			border-color: var(--color-success-darken-3),
 		),
 		warning: (
-			--avatar-background-color: var(--color-warning),
-			--avatar-border-color: var(--color-warning-darken-3),
+			background-color: var(--color-warning-darken-5),
+			border-color: var(--color-warning-darken-3),
 		),
 		info: (
-			--avatar-background-color: var(--color-info),
-			--avatar-border-color: var(--color-info-darken-3),
+			background-color: var(--color-info-darken-5),
+			border-color: var(--color-info-darken-3),
 		),
 		accent: (
-			--avatar-background-color: var(--color-accent),
-			--avatar-border-color: var(--color-accent-darken-3),
+			background-color: var(--color-accent),
+			border-color: var(--color-accent-darken-3),
 		),
 		gray: (
-			--avatar-background-color: var(--color-gray),
-			--avatar-border-color: var(--color-gray-darken-3),
+			background-color: var(--color-gray-darken-1),
+			border-color: var(--color-gray-darken-3),
 		),
 		ring: (
-			--avatar-color: var(--color-brand),
-			--avatar-background-color: var(--color-surface-brand),
-			--avatar-border-color: var(--color-brand),
-			[border-color]: var(--avatar-border-color),
+			color: var(--color-brand-darken-3),
+			background-color: var(--color-surface-brand),
+			border-color: currentcolor,
 			border-width: var(--border),
 			border-style: solid,
 			modifier: (
 				surface: (
-					--avatar-background-color: var(--color-surface),
-					--avatar-border-color: var(--color-surface-5),
-					--avatar-color: var(--color-word-2),
+					background-color: var(--color-surface),
+					color: var(--color-word-2),
 				),
 				danger: (
-					--avatar-background-color: var(--color-surface-danger),
-					--avatar-border-color: var(--color-danger),
-					--avatar-color: var(--color-danger),
+					background-color: var(--color-surface-danger),
+					color: var(--color-danger),
 				),
 				success: (
-					--avatar-background-color: var(--color-surface-success),
-					--avatar-border-color: var(--color-success),
-					--avatar-color: var(--color-success),
+					background-color: var(--color-surface-success),
+					color: var(--color-success-darken-3),
 				),
 				warning: (
-					--avatar-background-color: var(--color-surface-warning),
-					--avatar-border-color: var(--color-warning),
-					--avatar-color: var(--color-warning),
+					background-color: var(--color-surface-warning),
+					color: var(--color-warning-darken-5),
 				),
 				info: (
-					--avatar-background-color: var(--color-surface-info),
-					--avatar-border-color: var(--color-info),
-					--avatar-color: var(--color-info),
+					background-color: var(--color-surface-info),
+					color: var(--color-info-darken-5),
 				),
 				accent: (
-					--avatar-background-color: var(--color-surface-accent),
-					--avatar-border-color: var(--color-accent),
-					--avatar-color: var(--color-accent),
+					background-color: var(--color-surface-accent),
+					color: var(--color-accent),
 				),
 				gray: (
-					--avatar-background-color: var(--color-surface-4),
-					--avatar-border-color: var(--color-gray),
-					--avatar-color: var(--color-word-2),
+					background-color: var(--color-surface-4),
+					color: var(--color-word-2),
 				),
 			),
 		),

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

@@ -1,13 +1,10 @@
 $vv-badge: (
 	--badge-font-size: 0.7rem,
-	--badge-color: var(--color-white),
-	--badge-background-color: var(--color-brand),
-	--badge-border-width: 0,
 	[font-size]: var(--badge-font-size),
-	[background-color]: var(--badge-background-color),
-	[color]: var(--badge-color),
-	[border-width]: var(--badge-border-width),
-	[border-color]: var(--badge-background-color),
+	border-width: 0,
+	background-color: var(--color-brand),
+	border-color: var(--color-brand),
+	color: var(--color-white),
 	border-style: solid,
 	border-radius: 0.5em,
 	min-height: 2em,
@@ -36,7 +33,7 @@ $vv-badge: (
 		),
 		focus-within: (
 			outline-offset: var(--spacing-4),
-			[outline]: var(--spacing-px) solid var(--badge-background-color),
+			outline: var(--spacing-px) solid currentcolor,
 		),
 	),
 	element: (
@@ -67,48 +64,89 @@ $vv-badge: (
 		rounded: (
 			border-radius: 1em,
 		),
-		outline: (
-			--badge-border-width: var(--border),
-			[background-color]: transparent,
-			[color]: var(--badge-background-color),
-		),
-		ghost: (
-			[background-color]: transparent,
-			[color]: var(--badge-background-color),
-		),
 		white: (
-			--badge-background-color:
+			background-color:
 				hsla(
 					var(--color-white-hue) var(--color-white-saturation)
 						var(--color-white-lightness) / 80%
 				),
-			--badge-color: var(--color-black),
+			color: var(--color-black),
 		),
 		black: (
-			--badge-background-color:
+			background-color:
 				hsla(
 					var(--color-black-hue) var(--color-black-saturation)
 						var(--color-black-lightness) / 80%
 				),
-			--badge-color: var(--color-white),
+			color: var(--color-white),
 		),
 		danger: (
-			--badge-background-color: var(--color-danger),
+			background-color: var(--color-danger),
 		),
 		success: (
-			--badge-background-color: var(--color-success),
+			background-color: var(--color-success),
 		),
 		warning: (
-			--badge-background-color: var(--color-warning),
+			background-color: var(--color-warning-darken-5),
 		),
 		info: (
-			--badge-background-color: var(--color-info),
+			background-color: var(--color-info-darken-5),
 		),
 		accent: (
-			--badge-background-color: var(--color-accent),
+			background-color: var(--color-accent),
 		),
 		gray: (
-			--badge-background-color: var(--color-gray),
+			background-color: var(--color-gray-darken-1),
+		),
+		outline: (
+			border-width: var(--border),
+			color: var(--color-brand),
+			border-color: currentcolor,
+			background-color: transparent,
+			modifier: (
+				danger: (
+					color: var(--color-danger),
+				),
+				success: (
+					color: var(--color-success),
+				),
+				warning: (
+					color: var(--color-warning-darken-5),
+				),
+				info: (
+					color: var(--color-info-darken-5),
+				),
+				accent: (
+					color: var(--color-accent),
+				),
+				gray: (
+					color: var(--color-gray-darken-1),
+				),
+			),
+		),
+		ghost: (
+			background-color: transparent,
+			color: var(--color-brand),
+			modifier: (
+				danger: (
+					color: var(--color-danger),
+				),
+				success: (
+					color: var(--color-success),
+				),
+				warning: (
+					color: var(--color-warning-darken-5),
+				),
+				info: (
+					color: var(--color-info-darken-5),
+				),
+				accent: (
+					color: var(--color-accent),
+				),
+				gray: (
+					color: var(--color-gray-darken-1),
+				),
+			),
 		),
 	),
 ) !default;

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

@@ -142,12 +142,15 @@ $vv-button: (
 				),
 				hover: (
 					background: var(--color-gray-lighten-5),
+					color: var(--color-word-2),
 				),
 				active: (
 					background: var(--color-gray-lighten-4),
+					color: var(--color-word-2),
 				),
 				pressed: (
 					background: var(--color-gray-lighten-4),
+					color: var(--color-word-2),
 				),
 			),
 		),
@@ -156,7 +159,7 @@ $vv-button: (
 			border-width: var(--border-0),
 			padding: 0,
 			color: var(--color-brand-darken-1),
-			font-weight: var(--font-normal),
+			font-weight: inherit,
 			text-shadow: none,
 			state: (
 				focus-visible: (
@@ -244,11 +247,12 @@ $vv-button: (
 				),
 				active: (
 					background: var(--color-surface-5),
+					color: var(--color-word),
 				),
 				pressed: (
 					color: var(--color-white),
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 			element: (
@@ -282,11 +286,12 @@ $vv-button: (
 				active: (
 					background: var(--color-surface-5),
 					border-color: var(--color-surface-5),
+					color: var(--color-word),
 				),
 				pressed: (
 					color: var(--color-white),
-					background: var(--color-gray),
-					border-color: var(--color-gray),
+					background: var(--color-gray-darken-1),
+					border-color: var(--color-gray-darken-1),
 				),
 			),
 			element: (

package/src/settings/components/_vv-dropdown-option.scss

@@ -13,7 +13,7 @@ $vv-dropdown-option: (
 		),
 		focus-visible: (
 			background-color: var(--color-surface-success),
-			color: var(--color-success),
+			color: var(--color-success-darken-1),
 			element: (
 				hint: (
 					opacity: var(--opacity-100),
@@ -23,7 +23,7 @@ $vv-dropdown-option: (
 		selected: (
 			font-weight: var(--font-bold),
 			background-color: var(--color-surface-brand),
-			color: var(--color-brand),
+			color: var(--color-brand-darken-1),
 		),
 	),
 	modifier: (