Player style improvements

materialious/src/lib/components/Author.svelte

@@ -75,8 +75,8 @@
 			<nav class="group split">
 				<button
 					onclick={toggleSubscribed}
-					class:inverse-surface={!subscribed}
-					class:border={subscribed}
+					class:primary={!subscribed}
+					class:surface-container-highest={subscribed}
 				>
 					{#if !subscribed}
 						{$_('subscribe')}
@@ -86,8 +86,8 @@
 				</button>
 				{#if window.indexedDB && subscribed}
 					<button
-						class:inverse-surface={!favoritedChannel}
-						class:border={favoritedChannel}
+						class:primary={!favoritedChannel}
+						class:surface-container-highest={favoritedChannel}
 						onclick={toggleFavourited}
 						class="square"
 					>
@@ -99,7 +99,7 @@
 				{/if}
 			</nav>
 		{:else}
-			<button class="inverse-surface" disabled>
+			<button class="surface-container-highest" disabled>
 				{$_('subscribe')}
 				<div class="tooltip">
 					{$_('loginRequired')}

materialious/src/lib/components/Player.svelte

@@ -1332,14 +1332,14 @@
 	{/if}
 	{#if showControls}
 		<div id="mobile-time" transition:fade>
-			<p class="chip inverse-primary s">
+			<p class="chip surface-container-highest s">
 				{#if data.video.liveNow}
 					{$_('thumbnail.live')}
 				{:else}
 					{videoLength(currentTime)} / {videoLength(playerMaxKnownTime)}
 				{/if}
 			</p>
-			<p class="chip inverse-primary">
+			<p class="chip surface-container-highest">
 				{playerVideoEndTimePretty}
 			</p>
 		</div>
@@ -1445,7 +1445,7 @@
 			<nav>
 				{#if !$isAndroidTvStore}
 					<nav class="no-wrap">
-						<button class="inverse-primary" onclick={toggleVideoPlaybackStatus}>
+						<button class="surface-container-highest" onclick={toggleVideoPlaybackStatus}>
 							<i>
 								{#if playerCurrentPlaybackState}
 									pause
@@ -1481,7 +1481,7 @@
 					</p>
 					{#if !$isAndroidTvStore}
 						{#if playerTextTracks && playerTextTracks.length > 0 && !data.video.liveNow}
-							<button class="inverse-primary">
+							<button class="surface-container-highest">
 								<i>closed_caption</i>
 								<menu class="no-wrap mobile" id="cc-menu" data-ui="#cc-menu">
 									<li
@@ -1506,7 +1506,7 @@
 								</menu>
 							</button>
 						{/if}
-						<button class="inverse-primary">
+						<button class="surface-container-highest">
 							<i>settings</i>
 							<menu class="no-wrap mobile" id="settings-menu">
 								{#if playerSettings !== 'root'}
@@ -1641,13 +1641,17 @@
 							</menu>
 						</button>
 						{#if playerElement && hasWebkitShowPlaybackTargetPicker(playerElement)}
-							<button class="inverse-primary" onclick={handleAirPlayClick} title="AirPlay">
+							<button
+								class="surface-container-highest"
+								onclick={handleAirPlayClick}
+								title="AirPlay"
+							>
 								<i>airplay</i>
 							</button>
 						{/if}
 						{#if document.pictureInPictureEnabled}
 							<button
-								class="inverse-primary"
+								class="surface-container-highest"
 								onclick={() => {
 									(playerElement as HTMLVideoElement).requestPictureInPicture();
 								}}
@@ -1655,7 +1659,7 @@
 								<i>pip</i>
 							</button>
 						{/if}
-						<button class="inverse-primary" onclick={toggleFullscreen}>
+						<button class="surface-container-highest" onclick={toggleFullscreen}>
 							<i>
 								{#if playerIsFullscreen}
 									fullscreen_exit
@@ -1775,7 +1779,7 @@
 	.player-slider [data-melt-slider-thumb] {
 		position: absolute;
 		border-radius: 1rem;
-		background: var(--inverse-primary);
+		background: var(--primary);
 		left: var(--percentage);
 		top: 50%;
 		width: 5px;
@@ -1889,8 +1893,8 @@
 	}
 
 	.chip {
-		background-color: var(--inverse-primary);
-		color: var(--primary);
+		background-color: var(--surface-container-highest);
+		color: var(--on-surface);
 		border: none;
 	}
 

materialious/src/lib/components/watch/LikesDislikes.svelte

@@ -10,14 +10,14 @@
 
 {#await returnYTDislikes then returnYTDislikes}
 	{#if returnYTDislikes}
-		<button style="cursor: default;margin-left: 0;" class="border">
+		<button style="cursor: default;margin-left: 0;" class="surface-container-highest">
 			<i class="small">thumb_up</i>
 			<span>{cleanNumber(returnYTDislikes.likes)}</span>
 			<i class="small" style="margin-left: 0.5em;">thumb_down_alt</i>
 			<span>{cleanNumber(returnYTDislikes.dislikes)}</span>
 		</button>
 	{:else}
-		<button style="cursor: default;margin-left: 0;" class="border">
+		<button style="cursor: default;margin-left: 0;" class="surface-container-highest">
 			<i class="small">thumb_up</i>
 			<span>{cleanNumber(video.likeCount)}</span>
 		</button>

materialious/src/routes/(app)/watch/[slug]/+page.svelte

@@ -418,7 +418,7 @@
 					<button
 						onclick={toggleTheatreMode}
 						class="m l"
-						class:border={!$playertheatreModeIsActive}
+						class:surface-container-highest={!$playertheatreModeIsActive}
 					>
 						<i>width_wide</i>
 						<div class="tooltip">{$_('player.theatreMode')}</div>
@@ -431,7 +431,7 @@
 								}
 								ui('#pause-timer');
 							}}
-							class:border={pauseTimerSeconds < 1}
+							class:surface-container-highest={pauseTimerSeconds < 1}
 						>
 							<i>snooze</i>
 							<div class="tooltip">{$_('player.pauseTimer')}</div>
@@ -442,14 +442,14 @@
 							(showTranscript = !showTranscript),
 							playertheatreModeIsActive.set(false)
 						)}
-						class:border={!showTranscript}
+						class:surface-container-highest={!showTranscript}
 					>
 						<i>description</i>
 						<div class="tooltip">
 							{$_('transcript')}
 						</div>
 					</button>
-					<button class="border"
+					<button class="surface-container-highest"
 						><i>share</i>
 						<div class="tooltip">
 							{$_('player.share.title')}
@@ -457,7 +457,7 @@
 						<ShareVideo bind:currentTime={playerCurrentTime} video={data.video} />
 					</button>
 					{#if personalPlaylists && personalPlaylists.length > 0}
-						<button class="border">
+						<button class="surface-container-highest">
 							<i>add</i>
 							<div class="tooltip">{$_('player.addToPlaylist')}</div>
 							<menu class="no-wrap mobile">
@@ -485,7 +485,7 @@
 							</menu>
 						</button>
 					{:else}
-						<button disabled class="border">
+						<button disabled class="surface-container-highest">
 							<i>add</i>
 							<div class="tooltip">
 								{#if $authStore || isYTBackend()}