Base component var scoping (#480)

* Avatar / badge

* Move base component vars to body scope

* Fix global icon override

src/components/v-avatar/v-avatar.vue

@@ -27,11 +27,15 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-avatar {
+<style>
+body {
 	--v-avatar-color: var(--primary);
 	--v-avatar-size: 48px;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-avatar {
 	position: relative;
 	display: flex;
 	align-items: center;

src/components/v-breadcrumb/v-breadcrumb.vue

@@ -41,13 +41,17 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-breadcrumb {
+<style>
+body {
 	--v-breadcrumb-color: var(--foreground-subdued);
 	--v-breadcrumb-color-hover: var(--foreground-normal);
 	--v-breadcrumb-color-disabled: var(--foreground-subdued);
 	--v-breadcrumb-divider-color: var(--foreground-subdued);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-breadcrumb {
 	display: flex;
 	align-items: center;
 

src/components/v-button-group/v-button-group.vue

@@ -52,10 +52,15 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style>
+body {
+	--v-button-group-background-color-active: var(--primary-alt);
+}
+</style>
+
 <style lang="scss" scoped>
 .v-button-group {
-	--v-button-group-background-color-active: var(--primary-alt);
-
 	.v-item-group {
 		::v-deep .v-button {
 			--border-radius: 0px;

src/components/v-button/v-button.vue

@@ -135,8 +135,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-button {
+<style>
+body {
 	--v-button-width: auto;
 	--v-button-height: 44px;
 	--v-button-color: var(--foreground-inverted);
@@ -151,7 +151,11 @@ export default defineComponent({
 	--v-button-font-weight: 500;
 	--v-button-line-height: 22px;
 	--v-button-min-width: 140px;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-button {
 	display: inline-flex;
 	align-items: center;
 

src/components/v-card/v-card.vue

@@ -24,8 +24,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-card {
+<style>
+body {
 	--v-card-min-width: none;
 	--v-card-max-width: 400px;
 	--v-card-height: auto;
@@ -33,7 +33,11 @@ export default defineComponent({
 	--v-card-max-height: min-content;
 	--v-card-padding: 16px;
 	--v-card-background-color: var(--background-subdued);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-card {
 	min-width: var(--v-card-min-width);
 	max-width: var(--v-card-max-width);
 	height: var(--v-card-height);

src/components/v-checkbox/v-checkbox.vue

@@ -112,7 +112,7 @@ export default defineComponent({
 </script>
 
 <style>
-:root {
+body {
 	--v-checkbox-color: var(--primary);
 }
 </style>

src/components/v-chip/v-chip.vue

@@ -83,13 +83,17 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-chip {
+<style>
+body {
 	--v-chip-color: var(--foreground-normal);
 	--v-chip-background-color: var(--border-normal);
 	--v-chip-color-hover: var(--foreground-normal);
 	--v-chip-background-color-hover: var(--border-normal);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-chip {
 	display: inline-flex;
 	align-items: center;
 	height: 32px;

src/components/v-divider/v-divider.vue

@@ -25,11 +25,15 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-divider {
+<style>
+body {
 	--v-divider-color: var(--border-normal);
 	--v-divider-label-color: var(--foreground-subdued);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-divider {
 	flex-basis: 0px;
 	flex-grow: 1;
 	flex-shrink: 1;

src/components/v-form/v-form.vue

@@ -306,13 +306,17 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-form {
+<style>
+body {
 	--v-form-column-width: 300px;
 	--v-form-row-max-height: calc(var(--v-form-column-width) * 2);
 	--v-form-horizontal-gap: 32px;
 	--v-form-vertical-gap: 48px;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-form {
 	&.grid {
 		display: grid;
 		grid-template-columns: [start] minmax(0, 1fr) [half] minmax(0, 1fr) [full];

src/components/v-icon/v-icon.vue

@@ -110,7 +110,7 @@ export default defineComponent({
 </script>
 
 <style>
-:root {
+body {
 	--v-icon-color: currentColor;
 	--v-icon-size: 24px;
 }

src/components/v-input/v-input.vue

@@ -157,10 +157,15 @@ export default defineComponent({
 });
 </script>
 
+<style>
+body {
+	--v-input-font-family: var(--family-sans-serif);
+}
+</style>
+
 <style lang="scss" scoped>
 .v-input {
 	--arrow-color: var(--border-normal);
-	--v-input-font-family: var(--family-sans-serif);
 	--v-icon-color: var(--foreground-subdued);
 
 	display: flex;

src/components/v-list/v-list-item-content.vue

@@ -4,10 +4,14 @@
 	</div>
 </template>
 
+<style>
+body {
+	--v-list-item-content-padding: 9px 0;
+}
+</style>
+
 <style lang="scss" scoped>
 .v-list-item-content {
-	--v-list-item-content-padding: 9px 0;
-
 	display: flex;
 	flex-basis: 0;
 	flex-grow: 1;

src/components/v-list/v-list-item.vue

@@ -59,10 +59,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-list-item {
-	$this: &;
-
+<style>
+body {
 	--v-list-item-one-line-min-height: 40px;
 	--v-list-item-two-line-min-height: 52px;
 	--v-list-item-three-line-min-height: 64px;
@@ -89,6 +87,12 @@ export default defineComponent({
 		--v-list-background-color-active,
 		var(--background-normal-alt)
 	);
+}
+</style>
+
+<style lang="scss" scoped>
+.v-list-item {
+	$this: &;
 
 	position: relative;
 	display: flex;

src/components/v-list/v-list.vue

@@ -50,8 +50,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-list {
+<style>
+body {
 	--v-list-padding: 4px 0;
 	--v-list-max-height: none;
 	--v-list-max-width: none;
@@ -62,7 +62,11 @@ export default defineComponent({
 	--v-list-color-active: var(--foreground-normal);
 	--v-list-background-color-hover: var(--background-normal-alt);
 	--v-list-background-color-active: var(--background-normal-alt);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-list {
 	position: static;
 	display: block;
 	min-width: var(--v-list-min-width);

src/components/v-menu/v-menu.vue

@@ -146,10 +146,14 @@ export default defineComponent({
 });
 </script>
 
+<style>
+body {
+	--v-menu-min-width: 100px;
+}
+</style>
+
 <style lang="scss" scoped>
 .v-menu {
-	--v-menu-min-width: 100px;
-
 	display: contents;
 }
 

src/components/v-notice/v-notice.vue

@@ -61,12 +61,16 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-notice {
+<style>
+body {
 	--v-notice-color: var(--primary);
 	--v-notice-background-color: var(--primary-alt);
 	--v-notice-icon-color: var(--primary);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-notice {
 	display: flex;
 	align-items: center;
 	justify-content: flex-start;

src/components/v-overlay/v-overlay.vue

@@ -31,11 +31,15 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-overlay {
+<style>
+body {
 	--v-overlay-color: rgba(38, 50, 56, 0.9);
 	--v-overlay-z-index: 500;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-overlay {
 	position: fixed;
 	top: 0;
 	left: 0;

src/components/v-pagination/v-pagination.vue

@@ -123,10 +123,14 @@ export default defineComponent({
 });
 </script>
 
+<style>
+body {
+	--v-pagination-active-color: var(--primary);
+}
+</style>
+
 <style lang="scss" scoped>
 .v-pagination {
-	--v-pagination-active-color: var(--primary);
-
 	.gap {
 		margin: 0 4px;
 		color: var(--foreground-subdued);

src/components/v-progress/circular/v-progress-circular.vue

@@ -45,15 +45,19 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-progress-circular {
+<style>
+body {
 	--v-progress-circular-color: var(--foreground-normal);
 	--v-progress-circular-background-color: var(--border-normal);
 	--v-progress-circular-transition: 400ms;
 	--v-progress-circular-speed: 2s;
 	--v-progress-circular-size: 28px;
 	--v-progress-circular-line-size: 3px;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-progress-circular {
 	position: relative;
 	display: flex;
 	align-items: center;

src/components/v-progress/linear/v-progress-linear.vue

@@ -57,13 +57,17 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-progress-linear {
+<style>
+body {
 	--v-progress-linear-height: 4px;
 	--v-progress-linear-color: var(--foreground-normal);
 	--v-progress-linear-background-color: var(--border-normal);
 	--v-progress-linear-transition: 400ms;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-progress-linear {
 	position: relative;
 	display: flex;
 	align-items: center;

src/components/v-radio/v-radio.vue

@@ -71,7 +71,7 @@ export default defineComponent({
 </script>
 
 <style>
-:root {
+body {
 	--v-radio-color: var(--primary);
 }
 </style>

src/components/v-select/v-select.vue

@@ -240,7 +240,7 @@ export default defineComponent({
 </script>
 
 <style>
-:root {
+body {
 	--v-select-font-family: var(--family-sans-serif);
 }
 </style>

src/components/v-sheet/v-sheet.vue

@@ -15,8 +15,8 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-sheet {
+<style>
+body {
 	--v-sheet-background-color: var(--background-subdued);
 	--v-sheet-height: auto;
 	--v-sheet-min-height: var(--input-height);
@@ -25,7 +25,11 @@ export default defineComponent({
 	--v-sheet-min-width: none;
 	--v-sheet-max-width: none;
 	--v-sheet-padding: 8px;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-sheet {
 	width: var(--v-sheet-width);
 	min-width: var(--v-sheet-min-width);
 	max-width: var(--v-sheet-max-width);

src/components/v-skeleton-loader/v-skeleton-loader.vue

@@ -22,11 +22,15 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-skeleton-loader {
+<style>
+body {
 	--v-skeleton-loader-color: var(--background-page);
 	--v-skeleton-loader-background-color: var(--background-subdued);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-skeleton-loader {
 	position: relative;
 	overflow: hidden;
 	cursor: progress;

src/components/v-slider/v-slider.vue

@@ -86,12 +86,16 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-slider {
+<style>
+body {
 	--v-slider-color: var(--border-normal);
 	--v-slider-thumb-color: var(--foreground-normal);
 	--v-slider-fill-color: var(--foreground-normal);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-slider {
 	display: flex;
 	align-items: center;
 

src/components/v-switch/v-switch.vue

@@ -70,10 +70,14 @@ export default defineComponent({
 });
 </script>
 
+<style>
+body {
+	--v-switch-color: var(--foreground-normal);
+}
+</style>
+
 <style lang="scss" scoped>
 .v-switch {
-	--v-switch-color: var(--foreground-normal);
-
 	display: flex;
 	align-items: center;
 	font-size: 0;

src/components/v-table/v-table.vue

@@ -322,11 +322,15 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-table {
+<style>
+body {
 	--v-table-height: auto;
 	--v-table-sticky-offset-top: 0;
+}
+</style>
 
+<style lang="scss" scoped>
+.v-table {
 	position: relative;
 	height: var(--v-table-height);
 	overflow-y: auto;

src/components/v-tabs/v-tab/v-tab.vue

@@ -41,13 +41,17 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-tab.horizontal {
+<style>
+body {
 	--v-tab-color: var(--foreground-normal);
 	--v-tab-background-color: var(--background-page);
 	--v-tab-color-active: var(--foreground-normal);
 	--v-tab-background-color-active: var(--background-page);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-tab.horizontal {
 	color: var(--v-tab-color);
 	font-weight: 500;
 	font-size: 12px;

src/components/v-tabs/v-tabs.vue

@@ -57,10 +57,15 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style>
+body {
+	--v-tabs-underline-color: var(--foreground-normal);
+}
+</style>
+
 <style lang="scss" scoped>
 .v-tabs.horizontal {
-	--v-tabs-underline-color: var(--foreground-normal);
-
 	position: relative;
 	display: flex;
 

src/components/v-textarea/v-textarea.vue

@@ -76,13 +76,17 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
-.v-textarea {
+<style>
+body {
 	--v-textarea-min-height: none;
 	--v-textarea-max-height: var(--input-height-tall);
 	--v-textarea-height: var(--input-height-tall);
 	--v-textarea-font-family: var(--family-sans-serif);
+}
+</style>
 
+<style lang="scss" scoped>
+.v-textarea {
 	position: relative;
 	display: flex;
 	flex-direction: column;