feat(components): add styled scrollbar (VIV-2214)

apps/docs/assets/styles/iframe.scss

@@ -1,6 +1,11 @@
 @forward '../../../../dist/libs/styles/core/all.css';
+@use '../../../../libs/shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 @forward 'reset';
 
+html {
+	@include scrollbar.scrollbar;
+}
+
 body::before {
 	position: fixed;
 	z-index: -1;

apps/docs/assets/styles/main.scss

@@ -4,11 +4,16 @@
 @forward './welcome';
 @forward './footer';
 @forward './component-page';
+@use '../../../../libs/shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 
 /* #region document */
 
 html {
-	scroll-padding-top: var(--vvd-header-block-size, 64px);
+	@include scrollbar.scrollbar;
+
+	& {
+		scroll-padding-top: var(--vvd-header-block-size, 64px);
+	}
 }
 
 code {

libs/components/src/lib/data-grid/data-grid.scss

@@ -1,3 +1,5 @@
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
+
 :host {
 	display: block;
 }
@@ -6,9 +8,13 @@
 }
 
 .base {
-	position: relative;
-	overflow: auto;
-	block-size: inherit;
-	inline-size: 100%;
-	max-block-size: inherit;
+	@include scrollbar.scrollbar;
+
+	& {
+		position: relative;
+		overflow: auto;
+		block-size: inherit;
+		inline-size: 100%;
+		max-block-size: inherit;
+	}
 }

libs/components/src/lib/dialog/dialog.scss

@@ -7,6 +7,7 @@
 	border-radius-variables;
 @use '../../../../shared/src/lib/sass/mixins/focus' as focus;
 @use '../../../../shared/src/lib/sass/mixins/resets' as resets;
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 
 $dialog-space-size: 24px;
 
@@ -164,9 +165,13 @@ $dialog-space-size: 24px;
 }
 
 slot[name='main'] {
-	display: block;
-	overflow: hidden auto;
-	max-width: inherit;
-	max-height: inherit;
-	border-radius: inherit;
+	@include scrollbar.scrollbar;
+
+	& {
+		display: block;
+		overflow: hidden auto;
+		max-width: inherit;
+		max-height: inherit;
+		border-radius: inherit;
+	}
 }

libs/components/src/lib/popup/popup.scss

@@ -3,6 +3,7 @@
 @use '../../../../shared/src/lib/sass/mixins/border-radius' as
 	border-radius-variables;
 @use '../../../../shared/src/lib/sass/mixins/resets' as resets;
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 
 :host {
 	display: var(#{variables.$popup-display}, inline);
@@ -20,14 +21,17 @@
 
 .popup-wrapper {
 	@include resets.floating-element-reset;
+	@include scrollbar.scrollbar;
 
-	z-index: var(#{variables.$popup-z-index}, 10);
-	overflow: visible;
-	padding: 0;
-	border: none;
-	border-radius: #{border-radius-variables.$border-radius-normal};
-	margin: 0;
-	inline-size: max-content;
+	& {
+		z-index: var(#{variables.$popup-z-index}, 10);
+		overflow: visible;
+		padding: 0;
+		border: none;
+		border-radius: #{border-radius-variables.$border-radius-normal};
+		margin: 0;
+		inline-size: max-content;
+	}
 
 	&:not(.absolute) {
 		position: fixed;

libs/components/src/lib/side-drawer/side-drawer.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use 'partials/variables' as variables;
 @use '../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 @use '../../../../shared/src/lib/sass/mixins/scrim' as scrim-mixins;
 
 :host {
@@ -14,13 +15,17 @@
 $inline-size: 280px;
 
 .control {
-	position: fixed;
-	z-index: 1;
-	background-color: var(#{constants.$vvd-color-canvas});
-	color: var(#{constants.$vvd-color-canvas-text});
-	inline-size: $inline-size;
-	inset-block: 0;
-	overflow-y: auto;
+	@include scrollbar.scrollbar;
+
+	& {
+		position: fixed;
+		z-index: 1;
+		background-color: var(#{constants.$vvd-color-canvas});
+		color: var(#{constants.$vvd-color-canvas-text});
+		inline-size: $inline-size;
+		inset-block: 0;
+		overflow-y: auto;
+	}
 
 	&[part~='vvd-theme-alternate'] {
 		background-color: var(#{constants.$vvd-color-canvas});

libs/components/src/lib/tabs/tabs.scss

@@ -18,6 +18,7 @@
 @use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
 @use '../../../../shared/src/lib/sass/mixins/border-radius' as
 	border-radius-variables;
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 
 :host {
 	display: block;
@@ -145,6 +146,8 @@
 	}
 
 	&-wrapper {
+		@include scrollbar.scrollbar;
+
 		.base:not(.orientation-vertical) & {
 			overflow: auto hidden;
 			align-self: end;
@@ -185,6 +188,8 @@ slot[name='action-items'] {
 
 	.base.scroll & {
 		overflow-y: auto;
+
+		@include scrollbar.scrollbar;
 	}
 
 	@include mixins.measurement(map.keys(variables.$spaces)...) using ($space) {

libs/components/src/lib/text-area/text-area.scss

@@ -18,6 +18,7 @@
 );
 @use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
 @use '../../../../../dist/libs/tokens/scss/size.variables' as size;
+@use '../../../../shared/src/lib/sass/mixins/scrollbar' as scrollbar;
 
 $low-ink-color: --_low-ink-color;
 $outline-width: 2px;
@@ -67,19 +68,23 @@ $outline-width: 2px;
 }
 
 .control {
-	box-sizing: border-box;
-	padding: 8px 16px;
-	border: 0 none;
-	border-radius: #{border-radius-variables.$border-radius-normal};
-	appearance: none; /* for box-shadow visibility on IOS */
-	background-color: var(#{appearance.get-appearance-token(fill)});
-	box-shadow: inset 0 0 0 1px var(#{appearance.get-appearance-token(outline)});
-	color: var(#{appearance.get-appearance-token(text)});
-	font: var(#{constants.$vvd-typography-base});
-	grid-column: 1 / -1;
-	min-block-size: #{size.$vvd-size-condensed};
-	resize: none;
-	transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
+	@include scrollbar.scrollbar;
+
+	& {
+		box-sizing: border-box;
+		padding: 8px 16px;
+		border: 0 none;
+		border-radius: #{border-radius-variables.$border-radius-normal};
+		appearance: none; /* for box-shadow visibility on IOS */
+		background-color: var(#{appearance.get-appearance-token(fill)});
+		box-shadow: inset 0 0 0 1px var(#{appearance.get-appearance-token(outline)});
+		color: var(#{appearance.get-appearance-token(text)});
+		font: var(#{constants.$vvd-typography-base});
+		grid-column: 1 / -1;
+		min-block-size: #{size.$vvd-size-condensed};
+		resize: none;
+		transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
+	}
 
 	@supports selector(::-webkit-resizer) {
 		&::-webkit-resizer {

libs/components/src/lib/time-picker/time-picker.scss

@@ -72,9 +72,6 @@
 		inline-size: $item-inline-size;
 		list-style: none;
 
-		// Make scrollbar appearance less intrusive
-		scrollbar-width: thin;
-
 		// Hide scrollbar when not hovering
 		&:hover {
 			overflow-y: auto;

libs/shared/src/lib/sass/mixins/scrollbar/_index.scss

@@ -0,0 +1,2 @@
+@forward 'variables' show $scrollbar-track-color, $scrollbar-thumb-color;
+@forward 'mixins' show scrollbar;

libs/shared/src/lib/sass/mixins/scrollbar/_mixins.scss

@@ -0,0 +1,33 @@
+@use 'variables' as variables;
+@use '../../../../../../../dist/libs/tokens/scss/tokens.constants' as constants;
+
+@mixin scrollbar {
+	#{variables.$scrollbar-track-color}: transparent;
+	#{variables.$scrollbar-thumb-color}: color-mix(
+		in srgb,
+		var(#{constants.$vvd-color-neutral-950}),
+		transparent 70%
+	);
+
+	// *	Firefox */
+	& {
+		scrollbar-color: var(#{variables.$scrollbar-thumb-color})
+			var(#{variables.$scrollbar-track-color});
+		scrollbar-width: thin;
+	}
+
+	// * Chrome, Edge, and Safari */
+	::-webkit-scrollbar {
+		width: 4px;
+	}
+
+	::-webkit-scrollbar-track {
+		background: var(#{variables.$scrollbar-track-color});
+	}
+
+	::-webkit-scrollbar-thumb {
+		border: 0;
+		border-radius: 4px;
+		background-color: var(#{variables.$scrollbar-thumb-color});
+	}
+}

libs/shared/src/lib/sass/mixins/scrollbar/_variables.scss

@@ -0,0 +1,2 @@
+$scrollbar-track-color: --scrollbar-track-color;
+$scrollbar-thumb-color: --scrollbar-thumb-color;