vgapp 1.4.4 → 1.4.6

package/app/utils/scss/_tokens.scss

@@ -1,170 +1,170 @@
-@use "sass:map";
-
-// Semantic color tokens. Components should consume the generated --vg-* custom
-// properties instead of binding themselves to a concrete palette.
-$theme-light: (
-	body-bg: #ffffff,
-	body-bg-rgb: 255 255 255,
-	surface-bg: #ffffff,
-	surface-bg-rgb: 255 255 255,
-	surface-transparent: rgba(255, 255, 255, 0),
-	surface-raised-bg: #ffffff,
-	surface-muted-bg: #f5f5f5,
-	surface-hover-bg: #f7f7f7,
-	surface-active-bg: #c7dcf6,
-	surface-inverse-bg: rgba(30, 30, 30, .95),
-	surface-subtle-bg: rgba(0, 0, 0, .025),
-	surface-subtle-hover-bg: rgba(0, 0, 0, .07),
-	text-color: #000000,
-	text-emphasis-color: #3c3c3c,
-	text-muted-color: #6b7280,
-	text-disabled-color: rgba(0, 0, 0, .5),
-	text-placeholder-color: rgba(0, 0, 0, .32),
-	text-inverse-color: #ffffff,
-	border-color: rgba(0, 0, 0, .2),
-	border-strong-color: rgba(0, 0, 0, .32),
-	border-disabled-color: rgba(0, 0, 0, .1),
-	primary-color: #0065ff,
-	primary-hover-color: #0057db,
-	primary-active-color: #0047b3,
-	primary-contrast-color: #ffffff,
-	primary-subtle-bg: rgba(0, 101, 255, .06),
-	primary-muted-bg: rgba(0, 101, 255, .1),
-	primary-outline-color: rgba(0, 101, 255, .55),
-	primary-strong-border-color: rgba(0, 101, 255, .72),
-	secondary-color: #6b7280,
-	secondary-rgb: 107 114 128,
-	secondary-bg: #f5f5f5,
-	secondary-bg-rgb: 245 245 245,
-	shadow-color: rgba(0, 0, 0, .2),
-	shadow-soft-color: rgba(0, 0, 0, .18),
-	box-shadow: 0 8px 14px 5px rgba(0, 0, 0, .2),
-	backdrop-color: #000000,
-	backdrop-subtle-color: rgba(0, 0, 0, .25),
-	control-bg: #ffffff,
-	control-muted-bg: #f1f4f8,
-	control-border-color: #dddddd,
-	control-strong-color: #111827,
-	control-mark-color: #cbd5e1,
-	media-bg: #111111,
-	media-text-color: #ffffff,
-	media-border-color: rgba(255, 255, 255, .12),
-	media-subtle-bg: rgba(255, 255, 255, .06),
-	media-muted-bg: rgba(255, 255, 255, .08),
-	media-active-bg: rgba(255, 255, 255, .16),
-	media-link-color: #93c5fd,
-	success-color: #4fd90b,
-	success-text-color: #40be02,
-	success-border-color: #baf98a,
-	success-bg: #f6ffed,
-	success-close-color: rgb(12.8, 38, .4),
-	success-contrast-color: #ffffff,
-	warning-color: #ffc107,
-	warning-text-color: #ffc107,
-	warning-border-color: #ffde79,
-	warning-bg: #fff6da,
-	warning-close-color: rgb(51, 38.6, 1.4),
-	warning-contrast-color: #111827,
-	danger-color: #ff2a2c,
-	danger-text-color: #df0306,
-	danger-border-color: #ffccc7,
-	danger-bg: #fff2f0,
-	danger-close-color: rgb(44.6, .6, 1.2),
-	danger-contrast-color: #ffffff,
-	danger-subtle-bg: rgba(255, 42, 44, .06),
-	danger-outline-color: rgba(255, 42, 44, .5),
-	info-color: #1f8bff,
-	info-text-color: #0471e5,
-	info-border-color: #f0faff,
-	info-bg: #adddff,
-	info-close-color: rgb(.8, 22.6, 45.8),
-	info-contrast-color: #ffffff,
-) !default;
-
-$theme-dark: (
-	body-bg: #121212,
-	body-bg-rgb: 18 18 18,
-	surface-bg: #1f1f1f,
-	surface-bg-rgb: 31 31 31,
-	surface-transparent: rgba(31, 31, 31, 0),
-	surface-raised-bg: #292929,
-	surface-muted-bg: #272727,
-	surface-hover-bg: #333333,
-	surface-active-bg: #173f73,
-	surface-inverse-bg: rgba(245, 245, 245, .95),
-	surface-subtle-bg: rgba(255, 255, 255, .04),
-	surface-subtle-hover-bg: rgba(255, 255, 255, .1),
-	text-color: #f5f5f5,
-	text-emphasis-color: #ffffff,
-	text-muted-color: #a7a7a7,
-	text-disabled-color: rgba(255, 255, 255, .5),
-	text-placeholder-color: rgba(255, 255, 255, .45),
-	text-inverse-color: #111827,
-	border-color: rgba(255, 255, 255, .2),
-	border-strong-color: rgba(255, 255, 255, .32),
-	border-disabled-color: rgba(255, 255, 255, .12),
-	primary-color: #6ea8fe,
-	primary-hover-color: #8abbff,
-	primary-active-color: #9ec5fe,
-	primary-contrast-color: #08111f,
-	primary-subtle-bg: rgba(110, 168, 254, .08),
-	primary-muted-bg: rgba(110, 168, 254, .14),
-	primary-outline-color: rgba(110, 168, 254, .62),
-	primary-strong-border-color: rgba(110, 168, 254, .78),
-	secondary-color: #a7a7a7,
-	secondary-rgb: 167 167 167,
-	secondary-bg: #272727,
-	secondary-bg-rgb: 39 39 39,
-	shadow-color: rgba(0, 0, 0, .45),
-	shadow-soft-color: rgba(0, 0, 0, .35),
-	box-shadow: 0 8px 14px 5px rgba(0, 0, 0, .45),
-	backdrop-color: #000000,
-	backdrop-subtle-color: rgba(0, 0, 0, .55),
-	control-bg: #292929,
-	control-muted-bg: #333a45,
-	control-border-color: rgba(255, 255, 255, .22),
-	control-strong-color: #f5f5f5,
-	control-mark-color: #64748b,
-	media-bg: #111111,
-	media-text-color: #ffffff,
-	media-border-color: rgba(255, 255, 255, .12),
-	media-subtle-bg: rgba(255, 255, 255, .06),
-	media-muted-bg: rgba(255, 255, 255, .08),
-	media-active-bg: rgba(255, 255, 255, .16),
-	media-link-color: #93c5fd,
-	success-color: #75d944,
-	success-text-color: #8ee85f,
-	success-border-color: #3f6f2c,
-	success-bg: #182d12,
-	success-close-color: #8ee85f,
-	success-contrast-color: #111827,
-	warning-color: #ffd24d,
-	warning-text-color: #ffda66,
-	warning-border-color: #806b29,
-	warning-bg: #30280e,
-	warning-close-color: #ffda66,
-	warning-contrast-color: #111827,
-	danger-color: #ff6b6d,
-	danger-text-color: #ff8587,
-	danger-border-color: #7d3638,
-	danger-bg: #321719,
-	danger-close-color: #ff8587,
-	danger-contrast-color: #111827,
-	danger-subtle-bg: rgba(255, 107, 109, .1),
-	danger-outline-color: rgba(255, 107, 109, .62),
-	info-color: #6eb6ff,
-	info-text-color: #8fc7ff,
-	info-border-color: #315d86,
-	info-bg: #12283c,
-	info-close-color: #8fc7ff,
-	info-contrast-color: #111827,
-) !default;
-
-$themes: (
-	light: $theme-light,
-	dark: $theme-dark,
-) !default;
-
-@function theme-token($theme, $token) {
-	@return map.get($theme, $token);
-}
+@use "sass:map";
+
+// Semantic color tokens. Components should consume the generated --vg-* custom
+// properties instead of binding themselves to a concrete palette.
+$theme-light: (
+	body-bg: #ffffff,
+	body-bg-rgb: 255 255 255,
+	surface-bg: #ffffff,
+	surface-bg-rgb: 255 255 255,
+	surface-transparent: rgba(255, 255, 255, 0),
+	surface-raised-bg: #ffffff,
+	surface-muted-bg: #f5f5f5,
+	surface-hover-bg: #f7f7f7,
+	surface-active-bg: #c7dcf6,
+	surface-inverse-bg: rgba(30, 30, 30, .95),
+	surface-subtle-bg: rgba(0, 0, 0, .025),
+	surface-subtle-hover-bg: rgba(0, 0, 0, .07),
+	text-color: #000000,
+	text-emphasis-color: #3c3c3c,
+	text-muted-color: #6b7280,
+	text-disabled-color: rgba(0, 0, 0, .5),
+	text-placeholder-color: rgba(0, 0, 0, .32),
+	text-inverse-color: #ffffff,
+	border-color: rgba(0, 0, 0, .2),
+	border-strong-color: rgba(0, 0, 0, .32),
+	border-disabled-color: rgba(0, 0, 0, .1),
+	primary-color: #0065ff,
+	primary-hover-color: #0057db,
+	primary-active-color: #0047b3,
+	primary-contrast-color: #ffffff,
+	primary-subtle-bg: rgba(0, 101, 255, .06),
+	primary-muted-bg: rgba(0, 101, 255, .1),
+	primary-outline-color: rgba(0, 101, 255, .55),
+	primary-strong-border-color: rgba(0, 101, 255, .72),
+	secondary-color: #6b7280,
+	secondary-rgb: 107 114 128,
+	secondary-bg: #f5f5f5,
+	secondary-bg-rgb: 245 245 245,
+	shadow-color: rgba(0, 0, 0, .2),
+	shadow-soft-color: rgba(0, 0, 0, .18),
+	box-shadow: 0 8px 14px 5px rgba(0, 0, 0, .2),
+	backdrop-color: #000000,
+	backdrop-subtle-color: rgba(0, 0, 0, .25),
+	control-bg: #ffffff,
+	control-muted-bg: #f1f4f8,
+	control-border-color: #dddddd,
+	control-strong-color: #111827,
+	control-mark-color: #cbd5e1,
+	media-bg: #111111,
+	media-text-color: #ffffff,
+	media-border-color: rgba(255, 255, 255, .12),
+	media-subtle-bg: rgba(255, 255, 255, .06),
+	media-muted-bg: rgba(255, 255, 255, .08),
+	media-active-bg: rgba(255, 255, 255, .16),
+	media-link-color: #93c5fd,
+	success-color: #4fd90b,
+	success-text-color: #40be02,
+	success-border-color: #baf98a,
+	success-bg: #f6ffed,
+	success-close-color: rgb(12.8, 38, .4),
+	success-contrast-color: #ffffff,
+	warning-color: #ffc107,
+	warning-text-color: #ffc107,
+	warning-border-color: #ffde79,
+	warning-bg: #fff6da,
+	warning-close-color: rgb(51, 38.6, 1.4),
+	warning-contrast-color: #111827,
+	danger-color: #ff2a2c,
+	danger-text-color: #df0306,
+	danger-border-color: #ffccc7,
+	danger-bg: #fff2f0,
+	danger-close-color: rgb(44.6, .6, 1.2),
+	danger-contrast-color: #ffffff,
+	danger-subtle-bg: rgba(255, 42, 44, .06),
+	danger-outline-color: rgba(255, 42, 44, .5),
+	info-color: #1f8bff,
+	info-text-color: #0471e5,
+	info-border-color: #f0faff,
+	info-bg: #adddff,
+	info-close-color: rgb(.8, 22.6, 45.8),
+	info-contrast-color: #ffffff,
+) !default;
+
+$theme-dark: (
+	body-bg: #121212,
+	body-bg-rgb: 18 18 18,
+	surface-bg: #1f1f1f,
+	surface-bg-rgb: 31 31 31,
+	surface-transparent: rgba(31, 31, 31, 0),
+	surface-raised-bg: #292929,
+	surface-muted-bg: #272727,
+	surface-hover-bg: #333333,
+	surface-active-bg: #173f73,
+	surface-inverse-bg: rgba(245, 245, 245, .95),
+	surface-subtle-bg: rgba(255, 255, 255, .04),
+	surface-subtle-hover-bg: rgba(255, 255, 255, .1),
+	text-color: #f5f5f5,
+	text-emphasis-color: #ffffff,
+	text-muted-color: #a7a7a7,
+	text-disabled-color: rgba(255, 255, 255, .5),
+	text-placeholder-color: rgba(255, 255, 255, .45),
+	text-inverse-color: #111827,
+	border-color: rgba(255, 255, 255, .2),
+	border-strong-color: rgba(255, 255, 255, .32),
+	border-disabled-color: rgba(255, 255, 255, .12),
+	primary-color: #6ea8fe,
+	primary-hover-color: #8abbff,
+	primary-active-color: #9ec5fe,
+	primary-contrast-color: #08111f,
+	primary-subtle-bg: rgba(110, 168, 254, .08),
+	primary-muted-bg: rgba(110, 168, 254, .14),
+	primary-outline-color: rgba(110, 168, 254, .62),
+	primary-strong-border-color: rgba(110, 168, 254, .78),
+	secondary-color: #a7a7a7,
+	secondary-rgb: 167 167 167,
+	secondary-bg: #272727,
+	secondary-bg-rgb: 39 39 39,
+	shadow-color: rgba(0, 0, 0, .45),
+	shadow-soft-color: rgba(0, 0, 0, .35),
+	box-shadow: 0 8px 14px 5px rgba(0, 0, 0, .45),
+	backdrop-color: #000000,
+	backdrop-subtle-color: rgba(0, 0, 0, .55),
+	control-bg: #292929,
+	control-muted-bg: #333a45,
+	control-border-color: rgba(255, 255, 255, .22),
+	control-strong-color: #f5f5f5,
+	control-mark-color: #64748b,
+	media-bg: #111111,
+	media-text-color: #ffffff,
+	media-border-color: rgba(255, 255, 255, .12),
+	media-subtle-bg: rgba(255, 255, 255, .06),
+	media-muted-bg: rgba(255, 255, 255, .08),
+	media-active-bg: rgba(255, 255, 255, .16),
+	media-link-color: #93c5fd,
+	success-color: #75d944,
+	success-text-color: #8ee85f,
+	success-border-color: #3f6f2c,
+	success-bg: #182d12,
+	success-close-color: #8ee85f,
+	success-contrast-color: #111827,
+	warning-color: #ffd24d,
+	warning-text-color: #ffda66,
+	warning-border-color: #806b29,
+	warning-bg: #30280e,
+	warning-close-color: #ffda66,
+	warning-contrast-color: #111827,
+	danger-color: #ff6b6d,
+	danger-text-color: #ff8587,
+	danger-border-color: #7d3638,
+	danger-bg: #321719,
+	danger-close-color: #ff8587,
+	danger-contrast-color: #111827,
+	danger-subtle-bg: rgba(255, 107, 109, .1),
+	danger-outline-color: rgba(255, 107, 109, .62),
+	info-color: #6eb6ff,
+	info-text-color: #8fc7ff,
+	info-border-color: #315d86,
+	info-bg: #12283c,
+	info-close-color: #8fc7ff,
+	info-contrast-color: #111827,
+) !default;
+
+$themes: (
+	light: $theme-light,
+	dark: $theme-dark,
+) !default;
+
+@function theme-token($theme, $token) {
+	@return map.get($theme, $token);
+}

package/app/utils/scss/default.scss

@@ -1,11 +1,11 @@
 @forward "index";
 
-@forward "index";
-
-@use "animation";
-@use "placement";
-@use "theme-default";
-@use "backdrop";
-@use "closable";
-@use "collapsable";
-@use "loaders";
+@forward "index";
+
+@use "animation";
+@use "placement";
+@use "theme-default";
+@use "backdrop";
+@use "closable";
+@use "collapsable";
+@use "loaders";

package/app/utils/scss/functions.scss

@@ -1,26 +1,26 @@
-@use "sass:color";
-@use "sass:map";
-@use "sass:meta";
-
-@function is-map($var){
-	@return meta.type-of($var) == 'map';
-}
+@use "sass:color";
+@use "sass:map";
+@use "sass:meta";
+
+@function is-map($var){
+	@return meta.type-of($var) == 'map';
+}
 
 // Merge multiple maps
 @function map-merge-multiple($maps...) {
-	$merged-maps: ();
-
-	@each $map in $maps {
-		$merged-maps: map.merge($merged-maps, $map);
-	}
-	@return $merged-maps;
-}
+	$merged-maps: ();
+
+	@each $map in $maps {
+		$merged-maps: map.merge($merged-maps, $map);
+	}
+	@return $merged-maps;
+}
 
 // mix colors
-@function shade-color($color, $weight) {
-	@return color.mix(black, $color, $weight);
-}
-
-@function tint-color($color, $weight) {
-	@return color.mix(white, $color, $weight);
-}
+@function shade-color($color, $weight) {
+	@return color.mix(black, $color, $weight);
+}
+
+@function tint-color($color, $weight) {
+	@return color.mix(white, $color, $weight);
+}

package/app/utils/scss/index.scss

@@ -1,4 +1,4 @@
-@forward "theme";
-@forward "functions";
-@forward "variables";
-@forward "mixin";
+@forward "theme";
+@forward "functions";
+@forward "variables";
+@forward "mixin";

package/app/utils/scss/mixin.scss

@@ -1,26 +1,26 @@
-@use "sass:meta";
-@use "variables" as vars;
-
-@mixin mix-vars($module, $properties) {
-	@each $key, $value in $properties {
-		@if (meta.type-of($value) == 'map') {
-			@each $k, $v in $value {
-				--vg-#{$module}-#{$key}-#{$k}: #{$v};
-			}
-		} @else {
-			--vg-#{$module}-#{$key}: #{$value};
-		}
+@use "sass:meta";
+@use "variables" as vars;
+
+@mixin mix-vars($module, $properties) {
+	@each $key, $value in $properties {
+		@if (meta.type-of($value) == 'map') {
+			@each $k, $v in $value {
+				--vg-#{$module}-#{$key}-#{$k}: #{$v};
+			}
+		} @else {
+			--vg-#{$module}-#{$key}: #{$value};
+		}
 	}
 }
 
 @mixin mix-alert-color-mode($class) {
 	$colors: ['success', 'info', 'warning', 'danger', 'dark'];
 
-	@each $value in $colors {
-		&.#{$class}-#{$value} {
-			@each $property, $val in vars.get-alert-color($value) {
+	@each $value in $colors {
+		&.#{$class}-#{$value} {
+			@each $property, $val in vars.get-alert-color($value) {
 				--#{$class}-#{$property}: #{$val};
 			}
 		}
 	}
-}
+}