@volverjs/style 0.1.9-beta.5 → 0.1.9-beta.7

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.9-beta.5",
+  "version": "0.1.9-beta.7",
   "engines": {
     "node": ">= 12.x"
   },
@@ -37,33 +37,33 @@
     "dist/*"
   ],
   "devDependencies": {
-    "@iconify/vue": "^4.1.0",
+    "@iconify/vue": "^4.1.1",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vueuse/core": "^9.13.0",
     "@vueuse/head": "^1.1.23",
-    "eslint": "^8.36.0",
+    "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "glob": "^9.3.1",
+    "eslint-plugin-vue": "^9.10.0",
+    "glob": "^10.0.0",
     "icss-utils": "^5.1.0",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
-    "postcss-preset-env": "^8.0.1",
+    "postcss-preset-env": "^8.3.1",
     "prism-themes": "^1.9.0",
     "prismjs": "1.29.0",
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-lint": "^9.1.1",
-    "sass": "^1.59.3",
-    "stylelint": "^15.3.0",
+    "sass": "^1.62.0",
+    "stylelint": "^15.4.0",
     "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended-scss": "^9.0.1",
+    "stylelint-config-recommended-scss": "^10.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
-    "stylelint-config-standard-scss": "^7.0.1",
-    "unplugin-auto-import": "^0.15.1",
+    "stylelint-config-standard-scss": "^8.0.0",
+    "unplugin-auto-import": "^0.15.2",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.1",
     "vite-plugin-css-export": "^2.0.0",
@@ -73,7 +73,7 @@
     "vite-plugin-pages": "^0.29.0",
     "vite-plugin-stylelint": "^4.3.0",
     "vite-plugin-vue-layouts": "^0.8.0",
-    "vite-ssg": "^0.22.1",
+    "vite-ssg": "^0.22.2",
     "vite-ssg-sitemap": "^0.4.3",
     "vue": "^3.2.47",
     "vue-live": "2.4.10",

package/src/export.scss

@@ -4,6 +4,7 @@
 
 // context
 @use 'context' as *;
+@use './themes/dark/context' as *;
 
 :export {
 	// ============================================================== */
@@ -31,6 +32,52 @@
 		}
 	}
 
+	// colors exported with no vars
+	@each $key, $value in $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 {
+							#{'colors-computed__' + $key}: $subValue;
+						} @else {
+							#{'colors-computed__' + $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;
+		}
+	}
+
 	// #endregion
 
 	// ==============================================================
@@ -280,11 +327,6 @@
 		#{'max-height__' + $key}: $value;
 	}
 
-	// max height
-	@each $key, $value in $max-height {
-		#{'max-height__' + $key}: $value;
-	}
-
 	// #endregion
 
 	// ============================================================== */
@@ -421,6 +463,10 @@
 		#{'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

@@ -24,6 +24,14 @@ $color-surface-palette: (
 	info: hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
 ) !default;
+$color-surface-palette-no-vars: (
+	brand: hsl(color.hue($color-brand) color.saturation($color-brand) 90%),
+	accent: hsl(color.hue($color-accent) color.saturation($color-accent) 90%),
+	success: hsl(color.hue($color-success) color.saturation($color-success) 90%),
+	danger: hsl(color.hue($color-danger) color.saturation($color-danger) 90%),
+	info: hsl(color.hue($color-info) color.saturation($color-info) 90%),
+	warning: hsl(color.hue($color-warning) color.saturation($color-warning) 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;
@@ -56,3 +64,47 @@ $colors: (
 	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),
+	word:
+		color-lighten-map(
+			$color-word,
+			'word',
+			$scale: 12%,
+			$fixed: true,
+			$noVarExport: true
+		),
+	surface:
+		map.merge(
+			color-darken-map(
+				$color-surface,
+				'surface',
+				$scale: 2%,
+				$fixed: true,
+				$noVarExport: true
+			),
+			$color-surface-palette-no-vars
+		),
+) !default;

package/src/settings/_effects.scss

@@ -1,3 +1,7 @@
+@use 'sass:color';
+@use 'sass:map';
+@use './colors';
+
 // box-shadow
 $box-shadow: (
 	sm:
@@ -17,6 +21,29 @@ $box-shadow: (
 	none: '0 0 #0000',
 ) !default;
 
+// box-shadow without css vars
+$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-dropdown-optgroup.scss

@@ -9,6 +9,5 @@ $vv-dropdown-optgroup: (
 	text-transform: uppercase,
 	font-size: var(--text-xs),
 	font-weight: var(--font-bold),
-	colot: var(--color-word-3),
 	background-color: var(--color-surface-2),
 );

package/src/settings/components/_vv-input-text.scss

@@ -282,6 +282,7 @@ $vv-input-text: (
 				wrapper: (
 					pseudo: (
 						after: (
+							opacity: var(--opacity-100),
 							animation: var(--animation-indeterminate),
 						),
 					),

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

@@ -24,6 +24,7 @@ $vv-nav: (
 			will-change: background-color color,
 			transition: var(--transition-all),
 			color: var(--color-word-3),
+			cursor: pointer,
 			[padding]: var(--nav-item-padding),
 			state: (
 				hover: (

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

@@ -39,12 +39,14 @@ $vv-radio: (
 	element: (
 		input: (
 			_alias: "> input[type='radio']",
-			border: var(--spacing-2) solid var(--input-color),
+			border-width: var(--spacing-2),
+			border-style: solid,
+			border-color: var(--input-color),
 			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			border-radius: 50%,
 			margin: 0 var(--input-label-gap) 0 0,
-			background: transparent,
+			background-color: transparent,
 			cursor: pointer,
 			position: relative,
 			pseudo: (
@@ -52,7 +54,7 @@ $vv-radio: (
 					position: absolute,
 					width: 70%,
 					height: 70%,
-					background: var(--input-color),
+					background-color: var(--input-color),
 					inset: 50% 50%,
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),

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

@@ -226,6 +226,7 @@ $vv-select: (
 				wrapper: (
 					pseudo: (
 						after: (
+							opacity: var(--opacity-100),
 							animation: var(--animation-indeterminate),
 						),
 					),

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

@@ -8,6 +8,11 @@ $vv-table: (
 			_alias: 'caption',
 			caption-side: bottom,
 			[padding]: var(--table-cell-padding),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
 		),
 		tr: (
 			_alias: 'tr',

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

@@ -202,6 +202,7 @@ $vv-textarea: (
 				wrapper: (
 					pseudo: (
 						after: (
+							opacity: var(--opacity-100),
 							animation: var(--animation-indeterminate),
 						),
 					),

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

@@ -16,6 +16,14 @@ $dark-color-surface-palette: (
 	info: hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
 	warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
 ) !default;
+$dark-color-surface-palette-no-vars: (
+	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
 $dark-colors: (
@@ -33,3 +41,35 @@ $dark-colors: (
 		),
 	alpha: color-alpha-map($dark-color-alpha, 'alpha', $steps: 5, $scale: 5%),
 ) !default;
+
+// dark-colors computed map
+$dark-colors-computed: (
+	scheme: $dark-color-scheme,
+	word:
+		color-darken-map(
+			$dark-color-word,
+			'word',
+			$scale: 12%,
+			$fixed: true,
+			$noVarExport: true
+		),
+	surface:
+		map.merge(
+			color-lighten-map(
+				$dark-color-surface,
+				'surface',
+				$scale: 5%,
+				$fixed: true,
+				$noVarExport: true
+			),
+			$dark-color-surface-palette-no-vars
+		),
+	alpha:
+		color-alpha-map(
+			$dark-color-alpha,
+			'alpha',
+			$steps: 5,
+			$scale: 5%,
+			$noVarExport: true
+		),
+) !default;