chore: added all platform assets

fix: removed all default color transitions
N00nDay · Oct 4, 2022 · d17d91d · d17d91d
1 parent 1188e2f
commit d17d91d
Show file tree

Hide file tree

Showing 165 changed files with 476 additions and 628 deletions.
diff --git a/src/app.styles.css → src/app.css b/src/app.styles.css → src/app.css
@@ -22,8 +22,6 @@ body {
 	@apply flex-col;
 	@apply bg-light-surface;
 	@apply dark:bg-dark-surface;
-	@apply transition-all;
-	@apply duration-150;
 	@apply m-0;
 	@apply px-0;
 	@apply left-0;

diff --git a/src/app.html b/src/app.html
@@ -3,8 +3,6 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
 
 		<meta
 			name="viewport"
@@ -18,6 +16,73 @@
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
 
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb" />
+		<meta name="msapplication-TileColor" content="#2563eb" />
+
+		<link rel="apple-touch-icon" href="/180x180.png" />
+		<link rel="apple-touch-icon" sizes="152x152" href="/152x152.png" />
+		<link rel="apple-touch-icon" sizes="167x167" href="/167x167.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/180x180.png" />
+
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/828x1792.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+			href="/1242x2688.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+			href="/1125x2436.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
+			href="/1242x2288.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/750x1334.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/2048x2732.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/1668x2224.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/640x1136.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/1668x2388.png"
+		/>
+		<link
+			rel="apple-touch-startup-image"
+			media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
+			href="/1536x2048.png"
+		/>
+		<link rel="icon" sizes="192x192" href="/192x192.png" />
+		<link rel="icon" sizes="256x256" href="/256x256.png" />
+		<link rel="icon" sizes="384x384" href="/384x384.png" />
+		<link rel="icon" sizes="512x512" href="/512x512.png" />
+		<link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
+
 		<!-- Material Icons -->
 		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 

diff --git a/src/lib/components/HoverBackground.svelte b/src/lib/components/HoverBackground.svelte
@@ -1,5 +1,9 @@
-<div
-	class="absolute bg-light-icon-background-hover dark:bg-dark-icon-background-hover left-[50%] top-[50%] translate-y-[-50%] translate-x-[-50%] duration-150 transition-all h-0 w-0 group-hover:h-full group-hover:w-full{$$props.class
-		? ` ${$$props.class}`
-		: ''}"
-/>
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge';
+
+	const defaultClass =
+		'absolute bg-light-icon-background-hover dark:bg-dark-icon-background-hover left-[50%] top-[50%] translate-y-[-50%] translate-x-[-50%] duration-150 transition-size h-0 w-0 group-hover:h-full group-hover:w-full';
+	$: finalClass = twMerge(defaultClass, $$props.class);
+</script>
+
+<div class={finalClass} style={$$props.style} />
diff --git a/src/lib/components/accordion/Content.svelte b/src/lib/components/accordion/Content.svelte
@@ -3,7 +3,7 @@
 	import { twMerge } from 'tailwind-merge';
 
 	const defaultClass =
-		'border-t border-light-border dark:border-dark-border text-light-secondary-content dark:text-dark-secondary-content transition-all duration-150';
+		'border-t border-light-border dark:border-dark-border text-light-secondary-content dark:text-dark-secondary-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/accordion/Item.svelte b/src/lib/components/accordion/Item.svelte
@@ -25,7 +25,7 @@
 	});
 
 	const defaultClass =
-		'bg-light-surface dark:bg-dark-surface border border-light-border dark:border-dark-border first-of-type:rounded-t-md last-of-type:rounded-b-md overflow-hidden transition-all duration-150 outline-none focus:outline-none';
+		'bg-light-surface dark:bg-dark-surface border border-light-border dark:border-dark-border first-of-type:rounded-t-md last-of-type:rounded-b-md overflow-hidden outline-none focus:outline-none';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/accordion/Title.svelte b/src/lib/components/accordion/Title.svelte
@@ -26,11 +26,10 @@
 	const { open }: { open: Writable<boolean> } = getContext(ACCORDION_ITEM_CONTEXT_ID);
 
 	const defaultClass =
-		'relative flex items-center w-full py-4 px-5 text-base text-light-content dark:text-dark-content hover:text-primary dark:hover:text-primary text-left bg-light-surface dark:bg-dark-surface border-0 rounded-none transition-all duration-150 justify-between  outline-none focus:outline-none';
+		'relative flex items-center w-full py-4 px-5 text-base text-light-content dark:text-dark-content hover:text-primary dark:hover:text-primary text-left bg-light-surface dark:bg-dark-surface border-0 rounded-none justify-between  outline-none focus:outline-none';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
-<!-- TODO: replace on:click with forwardEventsBuilder -->
 <button
 	use:useActions={use}
 	use:forwardEvents

diff --git a/src/lib/components/alert/Alert.svelte b/src/lib/components/alert/Alert.svelte
@@ -18,17 +18,13 @@
 
 	let defaultClass = '';
 	$: if ($reactiveType === 'info') {
-		defaultClass =
-			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-info-background';
+		defaultClass = 'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 bg-info-background';
 	} else if ($reactiveType === 'warn') {
-		defaultClass =
-			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-warn-background';
+		defaultClass = 'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 bg-warn-background';
 	} else if ($reactiveType === 'success') {
-		defaultClass =
-			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-success-background';
+		defaultClass = 'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 bg-success-background';
 	} else if ($reactiveType === 'error') {
-		defaultClass =
-			'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-error-background';
+		defaultClass = 'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 bg-error-background';
 	}
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>

diff --git a/src/lib/components/alert/Description.svelte b/src/lib/components/alert/Description.svelte
@@ -10,17 +10,15 @@
 	// TODO: make clsses reactive
 	let defaultClass = '';
 	$: if ($type === 'info') {
-		defaultClass =
-			'mt-2 text-sm transition-all duration-150 text-info-secondary-content dark:text-dark-info-secondary-content';
+		defaultClass = 'mt-2 text-sm text-info-secondary-content dark:text-dark-info-secondary-content';
 	} else if ($type === 'warn') {
-		defaultClass =
-			'mt-2 text-sm transition-all duration-150 text-warn-secondary-content dark:text-dark-warn-secondary-content';
+		defaultClass = 'mt-2 text-sm text-warn-secondary-content dark:text-dark-warn-secondary-content';
 	} else if ($type === 'success') {
 		defaultClass =
-			'mt-2 text-sm transition-all duration-150 text-success-secondary-content dark:text-dark-success-secondary-content';
+			'mt-2 text-sm text-success-secondary-content dark:text-dark-success-secondary-content';
 	} else if ($type === 'error') {
 		defaultClass =
-			'mt-2 text-sm transition-all duration-150 text-error-secondary-content dark:text-dark-error-secondary-content=';
+			'mt-2 text-sm text-error-secondary-content dark:text-dark-error-secondary-content=';
 	}
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>

diff --git a/src/lib/components/alert/Title.svelte b/src/lib/components/alert/Title.svelte
@@ -10,16 +10,16 @@
 	let defaultClass = '';
 	$: if ($type === 'info') {
 		defaultClass =
-			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-info-content dark:text-dark-info-content';
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 text-info-content dark:text-dark-info-content';
 	} else if ($type === 'warn') {
 		defaultClass =
-			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-warn-content dark:text-dark-warn-content';
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 text-warn-content dark:text-dark-warn-content';
 	} else if ($type === 'success') {
 		defaultClass =
-			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-success-content dark:text-dark-success-content';
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 text-success-content dark:text-dark-success-content';
 	} else if ($type === 'error') {
 		defaultClass =
-			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-error-content dark:text-dark-error-content';
+			'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 text-error-content dark:text-dark-error-content';
 	}
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>

diff --git a/src/lib/components/autocomplete/Autocomplete.svelte b/src/lib/components/autocomplete/Autocomplete.svelte
@@ -71,7 +71,7 @@
 	{#if label}
 		<label
 			for={name}
-			class="block text-sm font-medium transition-all duration-150{srOnly ? ' sr-only' : ''}"
+			class="block text-sm font-medium{srOnly ? ' sr-only' : ''}"
 			class:text-light-secondary-content={!error}
 			class:dark:text-dark-secondary-content={!error}
 			class:text-danger={error}>{label}</label
@@ -82,12 +82,12 @@
 			bind:this={button}
 			type="button"
 			on:click={handleOpen}
-			class="group relative cursor-pointer h-[2.5rem] text-left border-none focus:outline-none sm:text-sm block w-full outline-none rounded-md bg-light-surface dark:bg-dark-surface transition-all duration-150 shadow-sm dark:shadow-black"
+			class="group relative cursor-pointer h-[2.5rem] text-left border-none focus:outline-none sm:text-sm block w-full outline-none rounded-md bg-light-surface dark:bg-dark-surface shadow-sm dark:shadow-black"
 		>
 			{#if leading}
 				<span
 					on:click|stopPropagation={handleLeadingClick}
-					class="material-icons absolute inset-y-0 left-0 pl-3 flex items-center transition-all duration-150"
+					class="material-icons absolute inset-y-0 left-0 pl-3 flex items-center"
 					class:pointer-events-none={!handleLeadingClick}
 					class:pointer-events-auto={handleLeadingClick}
 					class:cursor-pointer={handleLeadingClick}
@@ -110,7 +110,7 @@
 				autocomplete="off"
 				role="presentation"
 				aria-controls="options"
-				class="bg-transparent w-full h-[2.5rem] pl-3 pr-10 py-2 shadow-sm dark:shadow-black border rounded-md transition-all duration-150 outline-none"
+				class="bg-transparent w-full h-[2.5rem] pl-3 pr-10 py-2 shadow-sm dark:shadow-black border rounded-md outline-none"
 				class:border-red-400={error}
 				class:text-danger={error}
 				class:dark:text-danger={error}
@@ -129,11 +129,7 @@
 					class="absolute inset-y-0 z-10 right-8 items-center cursor-pointer hidden group-focus-within:flex active:flex"
 					on:click={handleClear}
 				>
-					<span
-						class="material-icons text-light-icon dark:text-dark-icon text-base transition-all duration-150"
-					>
-						clear
-					</span>
+					<span class="material-icons text-light-icon dark:text-dark-icon text-base"> clear </span>
 				</span>
 			{/if}
 
@@ -145,11 +141,7 @@
 				>
 			{:else}
 				<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-					<span
-						class="material-icons text-light-icon dark:text-dark-icon transition-all duration-150"
-					>
-						unfold_more
-					</span>
+					<span class="material-icons text-light-icon dark:text-dark-icon"> unfold_more </span>
 				</span>
 			{/if}
 		</button>

diff --git a/src/lib/components/avatar-group/Avatar.svelte b/src/lib/components/avatar-group/Avatar.svelte
@@ -45,12 +45,11 @@
 	let defaultClass = '';
 	let containerDefaultClass = '';
 	if (src) {
-		defaultClass =
-			'inline-block absolute ring-2 ring-light-surface dark:ring-dark-surface transition-all duration-150';
+		defaultClass = 'inline-block absolute ring-2 ring-light-surface dark:ring-dark-surface';
 		containerDefaultClass = 'inline-block relative align-middle';
 	} else if (initials) {
 		defaultClass =
-			'inline-flex items-center justify-center align-middle transition-all duration-150 bg-light-icon-background dark:bg-dark-icon-background text-light-content dark:text-dark-content ring-2 ring-light-surface dark:ring-dark-surface transition-all duration-150';
+			'inline-flex items-center justify-center align-middle bg-light-icon-background dark:bg-dark-icon-background text-light-content dark:text-dark-content ring-2 ring-light-surface dark:ring-dark-surface';
 	}
 	if (size === 'xs') {
 		defaultClass += ' h-6 w-6';

diff --git a/src/lib/components/avatar-group/Icon.svelte b/src/lib/components/avatar-group/Icon.svelte
@@ -29,8 +29,7 @@
 
 	const { size }: { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } = getContext(AVATAR_GROUP_CONTEXT_ID);
 
-	let defaultClass =
-		'material-icons absolute text-light-icon dark:text-dark-icon transition-all duration-150';
+	let defaultClass = 'material-icons absolute text-light-icon dark:text-dark-icon';
 	if (size === 'xs') {
 		defaultClass += ' text-2xl bottom-[-0.5rem]';
 	} else if (size === 'sm') {

diff --git a/src/lib/components/avatar-group/Indicator.svelte b/src/lib/components/avatar-group/Indicator.svelte
@@ -21,16 +21,16 @@
 	let defaultClass = '';
 	if (placement === 'top-right') {
 		defaultClass =
-			'absolute top-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute top-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	} else if (placement === 'top-left') {
 		defaultClass =
-			'absolute top-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute top-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	} else if (placement === 'bottom-left') {
 		defaultClass =
-			'absolute bottom-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute bottom-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	} else if (placement === 'bottom-right') {
 		defaultClass =
-			'absolute bottom-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute bottom-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	}
 	if (shape !== 'circle') {
 		defaultClass += ' transform';

diff --git a/src/lib/components/avatar-group/Placeholder.svelte b/src/lib/components/avatar-group/Placeholder.svelte
@@ -25,7 +25,7 @@
 	});
 
 	let defaultClass =
-		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden transition-all duration-150 bg-light-icon-background dark:bg-dark-icon-background';
+		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
 	if (shape === 'circle') {
 		defaultClass += ' rounded-full';
 	} else if (shape === 'rounded') {

diff --git a/src/lib/components/avatar/Avatar.svelte b/src/lib/components/avatar/Avatar.svelte
@@ -37,7 +37,7 @@
 		containerDefaultClass = 'inline-block relative align-middle';
 	} else if (initials) {
 		defaultClass =
-			'inline-flex items-center justify-center align-middle transition-all duration-150 bg-light-icon-background dark:bg-dark-icon-background text-light-content dark:text-dark-content';
+			'inline-flex items-center justify-center align-middle bg-light-icon-background dark:bg-dark-icon-background text-light-content dark:text-dark-content';
 	}
 	if (size === 'xs') {
 		defaultClass += ' h-6 w-6';

diff --git a/src/lib/components/avatar/Icon.svelte b/src/lib/components/avatar/Icon.svelte
@@ -22,8 +22,7 @@
 
 	const { size }: { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } = getContext(AVATAR_CONTEXT_ID);
 
-	let defaultClass =
-		'material-icons absolute text-light-icon dark:text-dark-icon transition-all duration-150';
+	let defaultClass = 'material-icons absolute text-light-icon dark:text-dark-icon';
 	if (size === 'xs') {
 		defaultClass += ' text-2xl bottom-[-0.5rem]';
 	} else if (size === 'sm') {

diff --git a/src/lib/components/avatar/Indicator.svelte b/src/lib/components/avatar/Indicator.svelte
@@ -21,16 +21,16 @@
 	let defaultClass = '';
 	if (placement === 'top-right') {
 		defaultClass =
-			'absolute top-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute top-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	} else if (placement === 'top-left') {
 		defaultClass =
-			'absolute top-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute top-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	} else if (placement === 'bottom-left') {
 		defaultClass =
-			'absolute bottom-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute bottom-0 left-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	} else if (placement === 'bottom-right') {
 		defaultClass =
-			'absolute bottom-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary transition-all duration-150';
+			'absolute bottom-0 right-0 block rounded-full ring-2 ring-light-surface dark:ring-dark-surface bg-primary';
 	}
 	if (shape !== 'circle') {
 		defaultClass += ' transform';

diff --git a/src/lib/components/avatar/Placeholder.svelte b/src/lib/components/avatar/Placeholder.svelte
@@ -22,7 +22,7 @@
 	});
 
 	let defaultClass =
-		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden transition-all duration-150 bg-light-icon-background dark:bg-dark-icon-background';
+		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
 	if (shape === 'circle') {
 		defaultClass += ' rounded-full';
 	} else if (shape === 'rounded') {

diff --git a/src/lib/components/badge/Badge.svelte b/src/lib/components/badge/Badge.svelte
@@ -18,7 +18,7 @@
 	});
 
 	let defaultClass =
-		'inline-flex items-center py-0.5 font-medium transition-all duration-150 bg-opacity-20 dark:bg-opacity-20 dark:text-dark-content text-light-content bg-dark-icon-background bg-light-icon-background';
+		'inline-flex items-center py-0.5 font-medium bg-opacity-20 dark:bg-opacity-20 dark:text-dark-content text-light-content bg-dark-icon-background bg-light-icon-background';
 	if (type === 'info') {
 		defaultClass +=
 			'bg-opacity-20 dark:bg-opacity-20 bg-info-background dark:bg-dark-info-background text-info-content dark:text-dark-info-content';

diff --git a/src/lib/components/badge/Close.svelte b/src/lib/components/badge/Close.svelte
@@ -14,7 +14,7 @@
 		getContext(BADGE_CONTEXT_ID);
 
 	let defaultClass =
-		'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none hover:focus:text-white hover:text-white dark:hover:text-white transition-all duration-150';
+		'flex-shrink-0 ml-0.5 h-4 w-4 rounded-full inline-flex items-center justify-center focus:outline-none hover:focus:text-white hover:text-white dark:hover:text-white';
 	if (type === 'info') {
 		defaultClass +=
 			' hover:bg-info-background dark:hover:bg-dark-info-background text-info-content dark:text-dark-info-content';

diff --git a/src/lib/components/breadcrumbs/Breadcrumbs.svelte b/src/lib/components/breadcrumbs/Breadcrumbs.svelte
@@ -12,7 +12,7 @@
 		type
 	});
 
-	let defaultClass = 'breadcrumbs flex items-center space-x-4 transition-all duration-150';
+	let defaultClass = 'breadcrumbs flex items-center space-x-4';
 	if (type === 'solid') {
 		defaultClass +=
 			' border light-border dark:dark-border bg-light-surface dark:bg-dark-surface dark:shadow-black shadow rounded-md px-6';