vgapp 1.4.3 → 1.4.5

package/app/modules/vgtoast/scss/_variables.scss

@@ -1,20 +1,22 @@
-$toast-map: (
+@use "../../../utils/scss" as vg;
+
+$toast-map: (
 		indent: 1rem,
 		height: auto,
 		width: auto,
-		z-index: $toast-index,
+		z-index: vg.$toast-index,
 		transition: all .3s ease-in-out,
 		padding: 8px 22px,
 		font-size: 1.125rem,
-		background-color: $bg-color,
-		color: $color,
-		border-width: $border-width,
-		border-color: transparent,
-		border-style: $border-style,
-		border-radius: 20px,
-		box-shadow: $box-shadow,
+		background-color: var(--vg-surface-bg, #{vg.$surface-bg}),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-color: transparent,
+		border-style: vg.$border-style,
+		border-radius: 20px,
+		box-shadow: var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-font-weight: 500,
 		header-font-size: .975rem,
 		body-font-size: 1rem,
-		body-font-weight: 400,
-);
+		body-font-weight: 400,
+) !default;

package/app/modules/vgtoast/scss/vgtoast.scss

@@ -6,14 +6,13 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-toast {
-	@include mix-vars('toast', $toast-map);
-	@include mix-alert-color-mode($class: vg-toast);
+	@include vg.mix-vars('toast', vars.$toast-map);
+	@include vg.mix-alert-color-mode($class: vg-toast);
 	position: fixed;
 	width: var(--vg-toast-width);
 	height: var(--vg-toast-height);

package/app/modules/vgtooltip/scss/_variables.scss

@@ -1,15 +1,17 @@
-$tooltip-map: (
-		zindex: 1080,
+@use "../../../utils/scss" as vg;
+
+$tooltip-map: (
+		zindex: 1080,
 		max-width: 260px,
 		padding: 8px 12px,
 		font-size: 13px,
 		line-height: 1.4,
-		color: #fff,
-		background: rgba(30, 30, 30, .95),
-		border-radius: 6px,
-		box-shadow: 0 6px 20px rgba(0, 0, 0, .18),
+		color: var(--vg-text-inverse-color, #ffffff),
+		background: var(--vg-surface-inverse-bg, rgba(30, 30, 30, .95)),
+		border-radius: 6px,
+		box-shadow: 0 6px 20px var(--vg-shadow-soft-color, rgba(0, 0, 0, .18)),
 		word-break: break-word,
 		arrow-width: 8px,
 		arrow-height: 8px,
-		border-color: $border-color,
-);
+		border-color: var(--vg-border-color, #{vg.$border-color}),
+) !default;

package/app/modules/vgtooltip/scss/vgtooltip.scss

@@ -6,13 +6,12 @@
 *--------------------------------------------------------------------------
 **/
 
-@import "../../../utils/scss/functions";
-@import "../../../utils/scss/mixin";
-@import "../../../utils/scss/variables";
-@import "variables";
+@forward "variables";
+@use "../../../utils/scss" as vg;
+@use "variables" as vars;
 
 .vg-tooltip {
-	@include mix-vars('tooltip', $tooltip-map );
+	@include vg.mix-vars('tooltip', vars.$tooltip-map);
 	position: absolute;
 	z-index: var(--vg-tooltip-zindex);
 	pointer-events: none;
@@ -61,4 +60,4 @@
 			}
 		}
 	}
-}
+}

package/app/utils/scss/_backdrop.scss

@@ -0,0 +1,19 @@
+@use "mixin" as mix;
+@use "variables" as vars;
+
+.vg-backdrop {
+	@include mix.mix-vars('backdrop', vars.$backdrop-map);
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background: var(--vg-backdrop-bg);
+	transition: var(--vg-backdrop-transition);
+	opacity: 0;
+	z-index: var(--vg-backdrop-z-index);
+
+	&.fade.show {
+		opacity: var(--vg-backdrop-opacity);
+	}
+}

package/app/utils/scss/_closable.scss

@@ -0,0 +1,22 @@
+@use "variables" as vars;
+
+.vg-btn-close {
+	position: absolute;
+	width: 30px;
+	height: 30px;
+	right: 15px;
+	top: 15px;
+	border: none;
+	background: transparent;
+	border-radius: 50%;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	
+	svg {
+		width: 20px;
+		height: 20px;
+		fill: var(--vg-text-color, #{vars.$color});
+	}
+}

package/app/utils/scss/_collapsable.scss

@@ -0,0 +1,13 @@
+@use "variables" as vars;
+
+.vg-collapse {
+	&:not(.show) {
+		display: none;
+	}
+}
+
+.vg-collapsing {
+	height: 0;
+	overflow: hidden;
+	transition: vars.$transition-base;
+}

package/app/utils/scss/_loaders.scss

@@ -0,0 +1,22 @@
+@use "mixin" as mix;
+@use "variables" as vars;
+
+.vg-loader, .vg.loader:after {
+	border-radius: 50%;
+	width: 7em;
+	height: 7em;
+}
+
+.vg-loader {
+	@include mix.mix-vars('loader', vars.$loader-map);
+	margin: var(--vg-loader-margin);
+	font-size: var(--vg-loader-font-size);
+	position: relative;
+	text-indent: -9999em;
+	border-top: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
+	border-right: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
+	border-bottom: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
+	border-left: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-color);
+	transform: var(--vg-loader-transform);
+	animation: var(--vg-loader-animation);
+}

package/app/utils/scss/_theme-default.scss

@@ -0,0 +1,12 @@
+@use "theme";
+
+// Default adapter for the ready-made VGApp stylesheet. Projects that own
+// their theme selector can use vgapp/theme and emit the same variables there.
+:root,
+[data-vg-theme="light"] {
+	@include theme.theme-variables(theme.$theme-light);
+}
+
+[data-vg-theme="dark"] {
+	@include theme.theme-variables(theme.$theme-dark);
+}

package/app/utils/scss/_theme.scss

@@ -0,0 +1,7 @@
+@forward "tokens";
+
+@mixin theme-variables($theme) {
+	@each $token, $value in $theme {
+		--vg-#{$token}: #{$value};
+	}
+}

package/app/utils/scss/_tokens.scss

@@ -0,0 +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);
+}

package/app/utils/scss/default.scss

@@ -1,78 +1,11 @@
-@import "../../utils/scss/functions";
-@import "../../utils/scss/variables";
-@import "../../utils/scss/mixin";
-@import "../../utils/scss/animation";
-@import "../../utils/scss/placement";
-
-.vg-backdrop {
-	@include mix-vars('backdrop', $backdrop-map);
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
-	background: var(--vg-backdrop-bg);
-	transition: var(--vg-backdrop-transition);
-	opacity: 0;
-	z-index: var(--vg-backdrop-z-index);
-
-	&.fade.show {
-		opacity: var(--vg-backdrop-opacity);
-	}
-}
-
-.vg-btn-close {
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	right: 15px;
-	top: 15px;
-	border: none;
-	background: transparent;
-	border-radius: 50%;
-	padding: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	svg {
-		width: 20px;
-		height: 20px;
-		fill: $color;
-	}
-}
-
-.vg-collapse {
-	&:not(.show) {
-		display: none;
-	}
-}
-
-.vg-collapsing {
-	height: 0;
-	overflow: hidden;
-	transition: $transition-base;
-}
-
-/**
-* Loader
- */
-.vg-loader, .vg.loader:after {
-	border-radius: 50%;
-	width: 7em;
-	height: 7em;
-}
-
-.vg-loader {
-	@include mix-vars('loader', $loader-map);
-	margin: var(--vg-loader-margin);
-	font-size: var(--vg-loader-font-size);
-	position: relative;
-	text-indent: -9999em;
-	border-top: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
-	border-right: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
-	border-bottom: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-border-color);
-	border-left: var(--vg-loader-border-width) var(--vg-loader-border-style) var(--vg-loader-color);
-	transform: var(--vg-loader-transform);
-	animation: var(--vg-loader-animation);
-}
+@forward "index";
+
+@forward "index";
+
+@use "animation";
+@use "placement";
+@use "theme-default";
+@use "backdrop";
+@use "closable";
+@use "collapsable";
+@use "loaders";

package/app/utils/scss/functions.scss

@@ -1,44 +1,26 @@
-@function is-map($var){
-	@return 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 mix(black, $color, $weight);
-}
-
-@function tint-color($color, $weight) {
-	@return mix(white, $color, $weight);
-}
-
-@function get-alert-color($type) {
-	@if $type == success {
-		@return $success-map;
-	}
-
-	@if $type == danger {
-		@return $danger-map;
-	}
-
-	@if $type == warning {
-		@return $warning-map;
-	}
-
-	@if $type == info {
-		@return $info-map;
-	}
-
-	@if $type == dark {
-		@return $dark-map;
-	}
-}
+@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

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

package/app/utils/scss/mixin.scss

@@ -1,23 +1,26 @@
-@mixin mix-vars($module, $properties) {
-	@each $key, $value in $properties {
-		@if (is-map($value)) {
-			@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 get-alert-color($value) {
+	@each $value in $colors {
+		&.#{$class}-#{$value} {
+			@each $property, $val in vars.get-alert-color($value) {
 				--#{$class}-#{$property}: #{$val};
 			}
 		}
 	}
-}
+}