vgapp 1.4.2 → 1.4.4

package/app/modules/vgrollup/scss/vgrollup.scss

@@ -6,17 +6,16 @@
 *--------------------------------------------------------------------------
 **/
 
-@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-rollup {
-	@include mix-vars('rollup', $rollup-map);
+	@include vg.mix-vars('rollup', vars.$rollup-map);
 	transform: var(--vg-rollup-transition);
 
 	&-button {
-		@include mix-vars('rollup-button', $rollup-button-map);
+		@include vg.mix-vars('rollup-button', vars.$rollup-button-map);
 		text-align: var(--vg-rollup-button-align);
 	}
 
@@ -52,4 +51,4 @@
 			display: none !important;
 		}
 	}
-}
+}

package/app/modules/vgselect/scss/_variables.scss

@@ -1,9 +1,11 @@
-$select-current-map: (
-		background-color: white,
-		color: black,
-		border-width: 1px,
-		border-style: solid,
-		border-color: #dddddd,
+@use "../../../utils/scss" as vg;
+
+$select-current-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
 		border-radius: 5px,
 		padding-left: 16px,
 		padding-right: 40px,
@@ -14,69 +16,69 @@ $select-current-map: (
 		z-index: 10,
 ) !default;
 
-$select-placeholder-map: (
-		placehoder-color: rgba(0, 0, 0, .32),
-		placehoder-font-size: 16px,
-);
+$select-placeholder-map: (
+		placehoder-color: var(--vg-text-placeholder-color, rgba(0, 0, 0, .32)),
+		placehoder-font-size: 16px,
+) !default;
 
 $select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
 
-$select-dropdown-map: (
-		background-color: white,
-		color: black,
-		border-width: 1px,
-		border-style: solid,
-		border-color: #dddddd,
-		border-radius: $border-radius,
-		box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11),
+$select-dropdown-map: (
+		background-color: var(--vg-control-bg, #ffffff),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-width: vg.$border-width,
+		border-style: vg.$border-style,
+		border-color: var(--vg-control-border-color, #dddddd),
+		border-radius: vg.$border-radius,
+		box-shadow: 0 7px 12px 1px var(--vg-shadow-soft-color, rgba(68, 68, 68, .11)),
 		z-index: 15,
 ) !default;
 
-$select-list-map: (
-		background-color: transparent,
-		color: black,
+$select-list-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: 1px,
-		border-bottom-style: solid,
-		border-bottom-color: #f5f5f5,
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-map: (
-		background-color: transparent,
-		color: #000,
+$select-optgroup-map: (
+		background-color: transparent,
+		color: var(--vg-text-color, #{vg.$color}),
 		padding-left: 8px,
 		padding-right: 8px,
 		padding-top: 8px,
 		padding-bottom: 8px,
-		border-bottom-width: 1px,
-		border-bottom-style: solid,
-		border-bottom-color: #838383,
+		border-bottom-width: vg.$border-width,
+		border-bottom-style: vg.$border-style,
+		border-bottom-color: var(--vg-border-strong-color, #838383),
 		font-weight: 500,
 ) !default;
 
 $select-list-max-height: 286px !default;
 $select-list-scrollbar-width: 6px !default;
-$select-list-scrollbar-bg: #F5F5F5 !default;
-$select-list-scrollbar-thumb: #999 !default;
+$select-list-scrollbar-bg: var(--vg-surface-muted-bg, #f5f5f5) !default;
+$select-list-scrollbar-thumb: var(--vg-text-muted-color, #999999) !default;
 
-$select-list-hover-map: (
-		background-color: #f7f7f7,
-		color: black,
-		border-bottom-color: #f5f5f5,
+$select-list-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-optgroup-hover-map: (
-		background-color: #f7f7f7,
-		color: black,
-		border-bottom-color: #f5f5f5,
+$select-optgroup-hover-map: (
+		background-color: var(--vg-surface-hover-bg, #f7f7f7),
+		color: var(--vg-text-color, #{vg.$color}),
+		border-bottom-color: var(--vg-border-disabled-color, #f5f5f5),
 ) !default;
 
-$select-search-map: (
-		background-color: #f2f2f2,
-		color: #000000
+$select-search-map: (
+		background-color: var(--vg-control-muted-bg, #f2f2f2),
+		color: var(--vg-text-color, #{vg.$color})
 ) !default;
 
 $select-tags-map: (
@@ -86,15 +88,15 @@ $select-tags-map: (
 		padding: 2px 0
 ) !default;
 
-$select-tag-map: (
-		gap: 4px,
-		background: #0d6efd,
-		color: white,
+$select-tag-map: (
+		gap: 4px,
+		background: var(--vg-primary-color, #0d6efd),
+		color: var(--vg-primary-contrast-color, #ffffff),
 		padding: 2px 6px,
 		border-radius: 4px,
 		font-size: 14px,
 		remove-width: 12px,
 		remove-height: 12px,
-		remove-stroke: white,
+		remove-stroke: var(--vg-primary-contrast-color, #ffffff),
 		remove-stroke-width: 2
 ) !default;

package/app/modules/vgselect/scss/vgselect.scss

@@ -6,10 +6,9 @@
 *--------------------------------------------------------------------------
 **/
 
-@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;
 
 select {
 	&.vg-select {
@@ -26,20 +25,20 @@ select {
 }
 
 .vg-select {
-	@include mix-vars('select-current', $select-current-map);
-	@include mix-vars('select-current', $select-placeholder-map);
-	@include mix-vars('select-dropdown', $select-dropdown-map);
-	@include mix-vars('select-list', $select-list-map);
-	@include mix-vars('select-optgroup', $select-optgroup-map);
-	@include mix-vars('select-optgroup-hover', $select-optgroup-hover-map);
-	@include mix-vars('select-list-hover', $select-list-hover-map);
-	@include mix-vars('select-search', $select-search-map);
-	@include mix-vars('select-tags', $select-tags-map);
-	@include mix-vars('select-tag', $select-tag-map);
-	--vg-select-list-max-height: #{$select-list-max-height};
-	--vg-select-list-scrollbar-width: #{$select-list-scrollbar-width};
-	--vg-select-list-scrollbar-bg: #{$select-list-scrollbar-bg};
-	--vg-select-list-scrollbar-thumb: #{$select-list-scrollbar-thumb};
+	@include vg.mix-vars('select-current', vars.$select-current-map);
+	@include vg.mix-vars('select-current', vars.$select-placeholder-map);
+	@include vg.mix-vars('select-dropdown', vars.$select-dropdown-map);
+	@include vg.mix-vars('select-list', vars.$select-list-map);
+	@include vg.mix-vars('select-optgroup', vars.$select-optgroup-map);
+	@include vg.mix-vars('select-optgroup-hover', vars.$select-optgroup-hover-map);
+	@include vg.mix-vars('select-list-hover', vars.$select-list-hover-map);
+	@include vg.mix-vars('select-search', vars.$select-search-map);
+	@include vg.mix-vars('select-tags', vars.$select-tags-map);
+	@include vg.mix-vars('select-tag', vars.$select-tag-map);
+	--vg-select-list-max-height: #{vars.$select-list-max-height};
+	--vg-select-list-scrollbar-width: #{vars.$select-list-scrollbar-width};
+	--vg-select-list-scrollbar-bg: #{vars.$select-list-scrollbar-bg};
+	--vg-select-list-scrollbar-thumb: #{vars.$select-list-scrollbar-thumb};
 	position: relative;
 
 	&:not(.show) {
@@ -87,7 +86,7 @@ select {
 	}
 
 	&-current {
-		@each $key, $value in $select-current-map {
+		@each $key, $value in vars.$select-current-map {
 			#{$key}: var(--vg-select-current-#{$key})
 		}
 		box-sizing: border-box;
@@ -105,7 +104,7 @@ select {
 			top: 50%;
 			transform: translateY(-50%);
 			transition: all .4s ease-in-out;
-			background-image: url("data:image/svg+xml, " + $select-current-svg);
+			background-image: url("data:image/svg+xml, " + vars.$select-current-svg);
 			background-repeat: no-repeat;
 			width: 16px;
 			height: 16px;
@@ -118,7 +117,7 @@ select {
 	}
 
 	&-dropdown {
-		@each $key, $value in $select-dropdown-map {
+		@each $key, $value in vars.$select-dropdown-map {
 			#{$key}: var(--vg-select-dropdown-#{$key})
 		}
 		position: absolute;
@@ -158,8 +157,8 @@ select {
 		max-height: var(--vg-select-list-max-height);
 		overflow-y: auto;
 
-		&::-webkit-scrollbar-track {
-			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+		&::-webkit-scrollbar-track {
+			-webkit-box-shadow: inset 0 0 6px var(--vg-shadow-color, rgba(0, 0, 0, .3));
 			background-color: var(--vg-select-list-scrollbar-bg);
 		}
 
@@ -175,7 +174,7 @@ select {
 		}
 
 		&--option {
-			@each $key, $value in $select-list-map {
+			@each $key, $value in vars.$select-list-map {
 				#{$key}: var(--vg-select-list-#{$key})
 			}
 			display: block;
@@ -188,7 +187,7 @@ select {
 			}
 
 			&:hover, &.selected {
-				@each $key, $value in $select-list-hover-map {
+				@each $key, $value in vars.$select-list-hover-map {
 					#{$key}: var(--vg-select-list-hover-#{$key})
 				}
 			}
@@ -218,7 +217,7 @@ select {
 			}
 
 			&-title {
-				@each $key, $value in $select-optgroup-map {
+				@each $key, $value in vars.$select-optgroup-map {
 					#{$key}: var(--vg-select-optgroup-#{$key})
 				}
 			}
@@ -227,7 +226,7 @@ select {
 
 	&-search {
 		input {
-			@each $key, $value in $select-search-map {
+			@each $key, $value in vars.$select-search-map {
 				#{$key}: var(--vg-select-search-#{$key})
 			}
 			padding: 8px;

package/app/modules/vgsidebar/scss/_variables.scss

@@ -1,4 +1,6 @@
-$sidebar-map: (
+@use "../../../utils/scss" as vg;
+
+$sidebar-map: (
 		horizontal: (
 				width: 400px,
 				height: 100vh,
@@ -7,13 +9,13 @@ $sidebar-map: (
 				width: 100vw,
 				height: 30vh,
 		),
-		bg-color:                  $bg-color,
-		color:                     $color,
-		box-shadow:                $box-shadow,
+		bg-color:                  var(--vg-surface-bg, #{vg.$surface-bg}),
+		color:                     var(--vg-text-color, #{vg.$color}),
+		box-shadow:                var(--vg-box-shadow, #{vg.$box-shadow}),
 		header-height:             60px,
 		footer-height:             70px,
 		padding:                   1rem,
-		border:                    1px solid #{$border-color},
-		z-index:                   $sidebar-index,
-		transition:                $transition-base,
-);
+		border:                    vg.$border-width vg.$border-style var(--vg-border-color, #{vg.$border-color}),
+		z-index:                   vg.$sidebar-index,
+		transition:                vg.$transition-base,
+) !default;

package/app/modules/vgsidebar/scss/vgsidebar.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-sidebar {
-	@include mix-vars('sidebar', $sidebar-map);
+	@include vg.mix-vars('sidebar', vars.$sidebar-map);
 	position: fixed;
 	width: auto;
 	height: auto;
@@ -91,4 +90,4 @@
 		padding: var(--vg-sidebar-padding);
 		border-top: var(--vg-sidebar-border);
 	}
-}
+}

package/app/modules/vgtabs/scss/_variables.scss

@@ -1,29 +1,32 @@
-$tabs-map: (
-		panel-gap: 10px,
-		panel-margin-bottom: 1.5rem,
-		link-border-radius: $border-radius,
-		link-border-style: $border-style,
-		link-border-width: $border-width,
-		link-border-color: $border-color,
-		link-border-active-color: $border-color-active,
-		link-border-disabled-color: $border-color-disabled,
-		link-color: $color,
-		link-active-color: $color-active,
-		link-focus-color: $color-active,
-		link-disabled-color: $color-disabled,
+@use "../../../utils/scss" as vg;
+
+$tabs-map: (
+		panel-gap: 10px,
+		panel-margin-bottom: 1.5rem,
+		link-border-radius: vg.$border-radius,
+		link-border-style: vg.$border-style,
+		link-border-width: vg.$border-width,
+		link-border-color: var(--vg-border-color, #{vg.$border-color}),
+		link-border-active-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-border-focus-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-border-disabled-color: var(--vg-border-disabled-color, #{vg.$border-color-disabled}),
+		link-color: var(--vg-text-color, #{vg.$color}),
+		link-active-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-focus-color: var(--vg-primary-color, #{vg.$color-active}),
+		link-disabled-color: var(--vg-text-disabled-color, #{vg.$color-disabled}),
 		link-bg: transparent,
 		link-active-bg: transparent,
 		link-focus-bg: transparent,
 		link-disabled-bg: transparent,
 		link-padding-x: 16px,
 		link-padding-y: 8px,
-		link-transition: $transition-base,
-		slider-bg: $color-active,
-		slider-link-color: white,
-		slider-border-radius: $border-radius,
-		slider-transition: $transition-base,
+		link-transition: vg.$transition-base,
+		slider-bg: var(--vg-primary-color, #{vg.$color-active}),
+		slider-link-color: var(--vg-primary-contrast-color, #{vg.$color-inverse}),
+		slider-border-radius: vg.$border-radius,
+		slider-transition: vg.$transition-base,
 		track-slider-padding-x: 6px,
 		track-slider-padding-y: 6px,
 		track-slider-border-radius: 6px,
-		track-slider-bg: rgba(white, .1),
-);
+		track-slider-bg: var(--vg-border-disabled-color, rgba(255, 255, 255, .1)),
+) !default;

package/app/modules/vgtabs/scss/vgtabs.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-tabs {
-	@include mix-vars('tabs', $tabs-map);
+	@include vg.mix-vars('tabs', vars.$tabs-map);
 
 	&-panel {
 		display: flex;
@@ -109,4 +108,4 @@
 	> .active {
 		display: block;
 	}
-}
+}

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};
+	}
+}