@drivenets/design-system 0.13.0 → 0.15.0

package/src/components/ds-tabs/figma/ds-tabs-tab-vertical.figma.ts

@@ -0,0 +1,78 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14841-6024
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs.Tab
+//
+// `DAP_Tab item - vertical_v01` maps to `DsTabs.Tab`, resolved inside the vertical
+// `tabs slot` (nestable). Same code component as the horizontal tab item; the two
+// differ in Figma only by casing (`Show Leading Icon`) and by the vertical set
+// having no `Menu Actions` property.
+//
+// Variant divergence — `State`, `Selected` and `Size` have no `DsTabs.Tab` prop
+// (see `ds-tabs-tab.figma.ts` for the rationale).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const label = instance.getString('Tab Name');
+const showIcon = instance.getBoolean('Show Leading Icon');
+const showBadge = instance.getBoolean('Show Badge');
+
+// `value` is required by `DsTabsTabProps` but is data, not derivable from Figma.
+const value = label
+	? label
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	: 'tab';
+
+// Leading icon → `DsTabs.Tab.icon` name, read from the connected ds-icon instance.
+const resolveIcon = (): string | undefined => {
+	const node = instance
+		.findConnectedInstances((n) => n.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+			traverseInstances: true,
+		})
+		.find((n): n is figma.InstanceHandle => n.type === 'INSTANCE');
+
+	if (!node) {
+		return undefined;
+	}
+
+	const id = node.codeConnectId();
+	if (id?.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id?.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+
+	return node.name
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+};
+
+const icon = showIcon ? resolveIcon() : undefined;
+
+// Badge count is freeform nested text, read from the badge instance when shown.
+const resolveBadge = (): string | undefined => {
+	const badge = instance.findInstance('DAP_Tab badge_v01', { traverseInstances: true });
+	if (badge.type !== 'INSTANCE') {
+		return undefined;
+	}
+	return badge.children.find((c): c is figma.TextHandle => c.type === 'TEXT')?.textContent;
+};
+
+const badge = showBadge ? resolveBadge() : undefined;
+const badgeAttr = badge ? (/^\d+$/.test(badge) ? `badge={${badge}}` : `badge="${badge}"`) : '';
+
+const attrs = [`value="${value}"`, `label="${label}"`, icon ? `icon="${icon}"` : '', badgeAttr]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsTabs.Tab ${attrs} />`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs-tab-vertical',
+	metadata: { nestable: true },
+};

package/src/components/ds-tabs/figma/ds-tabs-tab.figma.ts

@@ -0,0 +1,89 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14829-217
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs.Tab
+//
+// `DAP_Tab item - horizontal_v01` maps to `DsTabs.Tab`. It resolves inside the
+// horizontal `tabs slot` (nestable).
+//
+// Variant divergence — these Figma axes intentionally have no `DsTabs.Tab` prop:
+//   • `State` (Default/Hover/Pressed) — visual only, driven by CSS.
+//   • `Selected` (Yes/No) — selection is owned by `DsTabs.Root` (`value`), not the tab.
+//   • `Size` (Base) — size lives on `DsTabs.Root` (`size`), not the tab.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const label = instance.getString('Tab Name');
+const showIcon = instance.getBoolean('Show leading icon');
+const showBadge = instance.getBoolean('Show Badge');
+const hasMenu = instance.getBoolean('Menu Actions');
+
+// `value` is required by `DsTabsTabProps` but is data, not derivable from Figma.
+// Slugify the label as a sensible default for the developer to confirm/replace.
+const value = label
+	? label
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/^-+|-+$/g, '')
+	: 'tab';
+
+// The leading icon maps to `DsTabs.Tab.icon` (an icon-name string). It is a
+// connected ds-icon instance: read its Code Connect id (`ds-icon-o-`/`-s-`) and
+// fall back to the layer name when it is unavailable.
+const resolveIcon = (): string | undefined => {
+	const node = instance
+		.findConnectedInstances((n) => n.codeConnectId()?.startsWith('ds-icon-') ?? false, {
+			traverseInstances: true,
+		})
+		.find((n): n is figma.InstanceHandle => n.type === 'INSTANCE');
+
+	if (!node) {
+		return undefined;
+	}
+
+	const id = node.codeConnectId();
+	if (id?.startsWith('ds-icon-o-')) {
+		return id.slice('ds-icon-o-'.length);
+	}
+	if (id?.startsWith('ds-icon-s-')) {
+		return id.slice('ds-icon-s-'.length);
+	}
+
+	return node.name
+		.replace(/^DAP_GM_[OS]_/, '')
+		.replace(/^DAP_/, '')
+		.replace(/[\s/]+/g, '_')
+		.toLowerCase();
+};
+
+const icon = showIcon ? resolveIcon() : undefined;
+
+// The badge count is freeform nested text (`DAP_Tab badge_v01`), not a component
+// property, so read it from the badge instance when shown.
+const resolveBadge = (): string | undefined => {
+	const badge = instance.findInstance('DAP_Tab badge_v01', { traverseInstances: true });
+	if (badge.type !== 'INSTANCE') {
+		return undefined;
+	}
+	return badge.children.find((c): c is figma.TextHandle => c.type === 'TEXT')?.textContent;
+};
+
+const badge = showBadge ? resolveBadge() : undefined;
+const badgeAttr = badge ? (/^\d+$/.test(badge) ? `badge={${badge}}` : `badge="${badge}"`) : '';
+
+const attrs = [
+	`value="${value}"`,
+	`label="${label}"`,
+	icon ? `icon="${icon}"` : '',
+	badgeAttr,
+	hasMenu ? 'menuActionItems={[]} onMenuActionSelect={() => {}}' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsTabs.Tab ${attrs} />`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs-tab',
+	metadata: { nestable: true },
+};

package/src/components/ds-tabs/figma/ds-tabs-vertical.figma.ts

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14841-11560
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs
+//
+// `DAP_Tabs group-vertical_v01` is the vertical tab bar. Horizontal and vertical
+// are separate Figma component sets but a single code component switched by the
+// `orientation` prop, so this template mirrors `ds-tabs.figma.ts` with
+// `orientation="vertical"`. The `tabs slot` resolves each vertical tab item via
+// its own template (`DsTabs.Tab`); `DsTabs.Content` panels are authored in code.
+import figma from 'figma';
+
+// The vertical set labels its size `Base` (= default `medium`); also accept the
+// horizontal naming so a future shared variant keeps mapping to the `size` prop.
+const size = figma.selectedInstance.getEnum('Size', {
+	Base: 'medium',
+	medium: 'medium',
+	small: 'small',
+});
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+const tabs = figma.selectedInstance.getSlot('tabs slot');
+
+export default {
+	example: figma.code`<DsTabs.Root orientation="vertical"${sizeAttr}>
+	<DsTabs.List>${tabs}</DsTabs.List>
+	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
+</DsTabs.Root>`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs-vertical',
+	metadata: { nestable: false },
+};

package/src/components/ds-tabs/figma/ds-tabs.figma.ts

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14841-11053
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tabs
+// component=DsTabs
+//
+// `DAP_Tabs group-horizontal_v01` is the horizontal tab bar. It maps to the
+// composed `DsTabs.Root` + `DsTabs.List`. The `tabs slot` resolves each tab item
+// via its own Code Connect template (`DsTabs.Tab`), so added/removed tabs stay in
+// sync. Figma only models the tab bar — the `DsTabs.Content` panels have no Figma
+// equivalent and are authored in code, so the snippet emits a hint instead.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// Figma's group `Size` is the code `size` prop; `medium` is the default so only
+// `small` is emitted.
+const size = instance.getEnum('Size', { medium: 'medium', small: 'small' });
+const sizeAttr = size === 'small' ? ' size="small"' : '';
+
+const tabs = instance.getSlot('tabs slot');
+
+export default {
+	example: figma.code`<DsTabs.Root orientation="horizontal"${sizeAttr}>
+	<DsTabs.List>${tabs}</DsTabs.List>
+	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
+</DsTabs.Root>`,
+	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	id: 'ds-tabs',
+	metadata: { nestable: false },
+};

package/src/components/ds-tag/ds-tag.module.scss

@@ -63,7 +63,9 @@
 		background: var(--background);
 		border-color: var(--border-contrast);
 
-		.label {
+		.label,
+		.key,
+		.value {
 			color: var(--font-disabled);
 		}
 
@@ -105,6 +107,25 @@
 	@include typography.ellipsis;
 }
 
+.keyValue {
+	min-width: 0;
+}
+
+.key {
+	flex-shrink: 0;
+	color: var(--font-main);
+
+	&::after {
+		content: ':';
+	}
+}
+
+.value {
+	@include typography.ellipsis;
+
+	color: var(--font-secondary);
+}
+
 .icon {
 	flex-shrink: 0;
 	display: flex;

package/src/components/ds-tag/ds-tag.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import styles from './ds-tag.module.scss';
 import type { DsTagProps } from './ds-tag.types';
 import { DsIcon } from '../ds-icon';
+import { DsStack } from '../ds-stack';
 import { DsTypography } from '../ds-typography';
 
 /**
@@ -11,6 +12,7 @@ import { DsTypography } from '../ds-typography';
 const DsTag = ({
 	ref,
 	label,
+	value,
 	className,
 	style = {},
 	size = 'medium',
@@ -102,9 +104,20 @@ const DsTag = ({
 						))}
 				</span>
 			)}
-			<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
-				{label}
-			</DsTypography>
+			{variant === 'key-value' ? (
+				<DsStack direction="row" alignItems="center" gap="var(--3xs)" className={styles.keyValue}>
+					<DsTypography variant={size === 'small' ? 'body-xs-md' : 'body-sm-md'} className={styles.key}>
+						{label}
+					</DsTypography>
+					<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.value}>
+						{value}
+					</DsTypography>
+				</DsStack>
+			) : (
+				<DsTypography variant={size === 'small' ? 'body-xs-reg' : 'body-sm-reg'} className={styles.label}>
+					{label}
+				</DsTypography>
+			)}
 			{onDelete && !disabled && (
 				<button
 					type="button"

package/src/components/ds-tag/ds-tag.types.ts

@@ -3,16 +3,16 @@ import type { CSSProperties, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'r
 export const tagSizes = ['medium', 'small'] as const;
 export type TagSize = (typeof tagSizes)[number];
 
-export const tagVariants = ['default', 'include', 'exclude'] as const;
+export const tagVariants = ['default', 'include', 'exclude', 'key-value'] as const;
 export type TagVariant = (typeof tagVariants)[number];
 
-export interface DsTagProps {
+interface DsTagBaseProps {
 	/**
 	 * Ref to the tag element
 	 */
 	ref?: Ref<HTMLElement>;
 	/**
-	 * The label text to display in the tag
+	 * The label text to display in the tag. For the `key-value` variant this is the key.
 	 */
 	label: ReactNode;
 	/**
@@ -50,11 +50,6 @@ export interface DsTagProps {
 	 * @default false
 	 */
 	selected?: boolean;
-	/**
-	 * Variant of the tag
-	 * @default 'default'
-	 */
-	variant?: TagVariant;
 	/**
 	 * Whether the tag is disabled
 	 * @default false
@@ -71,3 +66,22 @@ export interface DsTagProps {
 		icon?: ReactNode;
 	};
 }
+
+interface DsTagStandardProps extends DsTagBaseProps {
+	/**
+	 * Variant of the tag
+	 * @default 'default'
+	 */
+	variant?: 'default' | 'include' | 'exclude';
+	value?: never;
+}
+
+interface DsTagKeyValueProps extends DsTagBaseProps {
+	variant: 'key-value';
+	/**
+	 * Secondary-colored value rendered after the key (`label`). Required for the `key-value` variant.
+	 */
+	value: ReactNode;
+}
+
+export type DsTagProps = DsTagStandardProps | DsTagKeyValueProps;

package/src/components/ds-tag/ds-tag.unit.test.ts

@@ -0,0 +1,32 @@
+/* eslint-disable vitest/expect-expect */
+import type { ReactNode } from 'react';
+import { describe, expectTypeOf, it } from 'vitest';
+import type { DsTagProps, TagVariant } from './ds-tag.types';
+
+describe('DsTagProps discriminated union', () => {
+	it('includes key-value in the variant union', () => {
+		expectTypeOf<TagVariant>().toEqualTypeOf<'default' | 'include' | 'exclude' | 'key-value'>();
+	});
+
+	it('allows standard variants without a value', () => {
+		expectTypeOf<{ label: string }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'default' }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'include' }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'exclude' }>().toExtend<DsTagProps>();
+	});
+
+	it('requires a value for the key-value variant', () => {
+		expectTypeOf<{ label: string; variant: 'key-value'; value: string }>().toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'key-value' }>().not.toExtend<DsTagProps>();
+	});
+
+	it('forbids a value on standard variants', () => {
+		expectTypeOf<{ label: string; value: string }>().not.toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'default'; value: string }>().not.toExtend<DsTagProps>();
+		expectTypeOf<{ label: string; variant: 'include'; value: string }>().not.toExtend<DsTagProps>();
+	});
+
+	it('types the key-value value as ReactNode', () => {
+		expectTypeOf<Extract<DsTagProps, { variant: 'key-value' }>['value']>().toEqualTypeOf<ReactNode>();
+	});
+});

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -5,7 +5,7 @@ import styles from './ds-tag-filter.module.scss';
 import type { DsTagFilterProps, TagFilterItem } from './ds-tag-filter.types';
 import { useTagOverflowCalculation } from './hooks/use-tag-overflow-calculation';
 import { DsTypography } from '../ds-typography';
-import { DsTag } from '../ds-tag';
+import { DsTag, type DsTagProps } from '../ds-tag';
 import { DsButton } from '../ds-button';
 import { DsIcon } from '../ds-icon';
 
@@ -51,20 +51,19 @@ const DsTagFilter = ({
 		return null;
 	}
 
-	const renderTag = (item: TagFilterItem) => {
-		const tagProps = item.slotProps?.tag || {};
+	// Merging per-item overrides with the filter-controlled props drops the
+	// discriminated-union narrowing of `DsTagProps` (a known TS spread limitation),
+	// so build the props once and assert the union type.
+	const buildTagProps = (item: TagFilterItem): DsTagProps =>
+		({
+			...item.slotProps?.tag,
+			label: item.label,
+			selected: item.selected,
+			onClick: onItemSelect ? () => onItemSelect(item) : undefined,
+			onDelete: onItemDelete ? () => onItemDelete(item) : undefined,
+		}) as DsTagProps;
 
-		return (
-			<DsTag
-				{...tagProps}
-				key={item.id}
-				label={item.label}
-				selected={item.selected}
-				onClick={onItemSelect ? () => onItemSelect(item) : undefined}
-				onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
-			/>
-		);
-	};
+	const renderTag = (item: TagFilterItem) => <DsTag key={item.id} {...buildTagProps(item)} />;
 
 	const handleExpandToggle = () => {
 		const newExpanded = !expanded;
@@ -75,14 +74,7 @@ const DsTagFilter = ({
 	const measurementContainer = (
 		<div ref={measurementRef} className={styles.measurementContainer} aria-hidden="true">
 			{items.map((item) => (
-				<DsTag
-					key={item.id}
-					data-measure-tag=""
-					label={item.label}
-					selected={item.selected}
-					onClick={onItemSelect ? () => onItemSelect(item) : undefined}
-					onDelete={onItemDelete ? () => onItemDelete(item) : undefined}
-				/>
+				<DsTag key={item.id} data-measure-tag="" {...buildTagProps(item)} />
 			))}
 		</div>
 	);

package/src/components/ds-text-input/ds-text-input.figma.ts

@@ -0,0 +1,60 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=13346-18325
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-text-input
+// component=DsTextInput
+//
+// The Figma component `DAP_input_v01` is a single multi-type input. Its `Type`
+// variant selects which code component to render:
+//   Number              -> DsNumberInput
+//   Password            -> DsPasswordInput
+//   Standard/Error/Read -> DsTextInput
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum('Type', {
+	Standard: 'standard',
+	Error: 'error',
+	'Read Only': 'readOnly',
+	Number: 'number',
+	Password: 'password',
+});
+
+const size = instance.getEnum('Size', {
+	Small: 'small',
+	Default: 'default',
+	Large: 'default',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	'Focus/ Typing': 'focus',
+	Disabled: 'disabled',
+	'Read only': 'readOnly',
+});
+
+const disabled = state === 'disabled';
+const readOnly = type === 'readOnly' || state === 'readOnly';
+
+const sizeAttr = size === 'small' ? 'size="small"' : '';
+
+const componentName =
+	type === 'number' ? 'DsNumberInput' : type === 'password' ? 'DsPasswordInput' : 'DsTextInput';
+
+// `DsFormControl` member name and attribute string, surfaced so a parent `DsFormControl`
+// template can emit `<DsFormControl.${fcMember} ${fcProps} />`.
+const fcMember = type === 'number' ? 'NumberInput' : type === 'password' ? 'PasswordInput' : 'TextInput';
+
+const fcProps = [sizeAttr, disabled ? 'disabled' : '', readOnly ? 'readOnly' : ''].filter(Boolean).join(' ');
+
+export default {
+	example:
+		type === 'number'
+			? figma.code`<DsNumberInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
+			: type === 'password'
+				? figma.code`<DsPasswordInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
+				: figma.code`<DsTextInput ${sizeAttr} ${disabled ? 'disabled' : ''} ${readOnly ? 'readOnly' : ''} />`,
+	imports: [`import { ${componentName} } from '@drivenets/design-system'`],
+	id: 'ds-text-input',
+	metadata: { nestable: true, props: { fcMember, fcProps } },
+};

package/src/components/ds-time-picker/ds-time-picker.figma.ts

@@ -0,0 +1,18 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=30102-172478
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-time-picker
+// component=DsTimePicker
+//
+// `DAP_hh_mm_drop_down_v1.0` exposes no component properties. The snippet is therefore an
+// illustrative controlled-usage starter (props are not derived from Figma) showing the
+// idiomatic `useState` + `value`/`onChange` pattern. `fcMember`/`fcProps` are surfaced so
+// a parent `DsFormControl` template can render `<DsFormControl.TimePicker />`.
+import figma from 'figma';
+
+export default {
+	example: figma.code`const [value, setValue] = useState<Date | null>(null);
+
+<DsTimePicker value={value} onChange={setValue} placeholder="hh:mm AM/PM" />`,
+	imports: ["import { useState } from 'react'", "import { DsTimePicker } from '@drivenets/design-system'"],
+	id: 'ds-time-picker',
+	metadata: { nestable: true, props: { fcMember: 'TimePicker', fcProps: '' } },
+};

package/src/index.ts

@@ -39,6 +39,7 @@ export * from './components/ds-popover';
 export * from './components/ds-progress-arc';
 export * from './components/ds-progress-donut';
 export * from './components/ds-progress-linear';
+export * from './components/ds-progress-task-bar';
 export * from './components/ds-radio-group';
 export * from './components/ds-segment-group';
 export * from './components/ds-select';

package/src/styles/_root_new.scss

@@ -264,6 +264,7 @@
 	--background-secondary-hover: var(--color-dap-blue-050);
 	--background-secondary-selected-weak: var(--color-dap-gray-100);
 	--background-success: var(--color-dap-green-075);
+	--background-success-medium: var(--color-dap-green-500);
 	--background-success-strong: var(--color-dap-green-600);
 	--background-success-strong-hover: var(--color-dap-green-700);
 	--background-tertiary: var(--color-dap-gray-200);
@@ -327,6 +328,7 @@
 	--icon-secondary: var(--color-dap-gray-600);
 	--icon-success: var(--color-dap-green-700);
 	--icon-success-light: var(--color-dap-green-400);
+	--icon-tertiary: var(--color-dap-brand-200);
 	--icon-warning: var(--color-dap-orange-600);
 	--icon-warning-light: var(--color-dap-orange-400);
 	--light-buttons-primary: var(--color-dap-dark-blue-300);

package/src/styles/_scrollbars.scss

@@ -1,44 +1,12 @@
 $scrollbar-border-radius: 100px;
-$scrollbar-default-size: 12px;
-$scrollbar-thin-size: 4px;
+$scrollbar-default-size: 10px;
+$scrollbar-hover-size: 12px;
+$scrollbar-thin-size: 8px;
 
-@mixin scrollbar-base($size) {
+@mixin scrollbar-auto-hide($rest-size, $hover-size) {
 	&::-webkit-scrollbar {
-		width: $size;
-		height: $size;
-		background: var(--background-secondary);
-	}
-
-	&::-webkit-scrollbar-track {
-		background: var(--background-secondary);
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: var(--background-deselected-hover);
-		border-radius: $scrollbar-border-radius;
-	}
-
-	&::-webkit-scrollbar-corner {
-		background: var(--background-secondary);
-	}
-}
-
-@mixin firefox-scrollbar($size) {
-	@-moz-document url-prefix() {
-		@if $size == $scrollbar-thin-size {
-			scrollbar-width: thin;
-		} @else {
-			scrollbar-width: auto;
-		}
-
-		scrollbar-color: var(--background-deselected-hover) var(--background-secondary);
-	}
-}
-
-@mixin scrollbar-on-hover {
-	&::-webkit-scrollbar {
-		width: $scrollbar-thin-size;
-		height: $scrollbar-thin-size;
+		width: $rest-size;
+		height: $rest-size;
 		background: transparent;
 	}
 
@@ -51,33 +19,42 @@ $scrollbar-thin-size: 4px;
 	}
 
 	&::-webkit-scrollbar-thumb {
-		background-color: transparent;
+		background-color: var(--background-tertiary);
 		border-radius: $scrollbar-border-radius;
 		transition: background-color 0.2s;
 	}
 
-	&:hover::-webkit-scrollbar-thumb {
-		background-color: var(--background-tertiary);
-	}
+	&:hover {
+		&::-webkit-scrollbar {
+			width: $hover-size;
+			height: $hover-size;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: var(--background-secondary);
+		}
 
-	&::-webkit-scrollbar-thumb:hover {
-		background-color: var(--background-deselected-hover);
+		&::-webkit-scrollbar-thumb {
+			background-color: var(--background-deselected-hover);
+		}
 	}
 
 	scrollbar-width: thin;
-	scrollbar-color: transparent transparent;
+	scrollbar-color: var(--background-tertiary) transparent;
 
 	&:hover {
-		scrollbar-color: var(--background-tertiary) transparent;
+		scrollbar-color: var(--background-deselected-hover) var(--background-secondary);
 	}
 }
 
+@mixin scrollbar-on-hover {
+	@include scrollbar-auto-hide($scrollbar-default-size, $scrollbar-hover-size);
+}
+
 * {
-	@include scrollbar-base($scrollbar-default-size);
-	@include firefox-scrollbar($scrollbar-default-size);
+	@include scrollbar-auto-hide($scrollbar-default-size, $scrollbar-hover-size);
 }
 
 .scrollbar-thin {
-	@include scrollbar-base($scrollbar-thin-size);
-	@include firefox-scrollbar($scrollbar-thin-size);
+	@include scrollbar-auto-hide($scrollbar-thin-size, $scrollbar-thin-size);
 }