feat(): Bump ui components

Update svelte material to the latest version

Author: n0th1ng-else

package-lock.json

@@ -12,6 +12,16 @@
 		"@rollup/plugin-json": "4.1.0",
 		"@rollup/plugin-node-resolve": "10.0.0",
 		"@rollup/plugin-typescript": "6.1.0",
+		"@smui/button": "4.2.0",
+		"@smui/card": "4.2.0",
+		"@smui/chips": "4.2.0",
+		"@smui/dialog": "4.2.0",
+		"@smui/form-field": "4.2.0",
+		"@smui/icon-button": "4.2.0",
+		"@smui/paper": "4.2.0",
+		"@smui/switch": "4.2.0",
+		"@smui/tab": "4.2.0",
+		"@smui/tab-bar": "4.2.0",
 		"@tsconfig/svelte": "2.0.1",
 		"@typescript-eslint/eslint-plugin": "4.29.2",
 		"@typescript-eslint/parser": "4.29.2",
@@ -28,18 +38,19 @@
 		"metascraper-publisher": "5.24.2",
 		"metascraper-title": "5.24.2",
 		"metascraper-url": "5.24.2",
+		"postcss": "8.3.6",
 		"prettier": "2.3.2",
 		"prettier-plugin-svelte": "2.3.1",
 		"rollup": "2.33.1",
 		"rollup-plugin-livereload": "2.0.0",
-		"rollup-plugin-postcss": "3.1.8",
+		"rollup-plugin-postcss": "4.0.1",
 		"rollup-plugin-svelte": "6.1.0",
 		"rollup-plugin-terser": "7.0.2",
 		"sass": "1.38.0",
 		"simple-git-hooks": "2.6.1",
+		"smui-theme": "4.2.0",
 		"svelte": "3.42.2",
 		"svelte-check": "2.2.4",
-		"svelte-material-ui": "1.0.0",
 		"svelte-preprocess": "4.7.4",
 		"svelte-spa-router": "3.2.0",
 		"tslib": "2.3.1",

package.json

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import Tab, { Icon, Label } from '@smui/tab';
-	import TabBar from '@smui/tab-bar';
+	import Tab, { Icon, Label } from '@smui/tab/styled';
+	import TabBar from '@smui/tab-bar/styled';
 	import type { MetaInfo } from '../../common';
 	import { push } from 'svelte-spa-router';
 	import { wrap } from 'svelte-spa-router/wrap';

src/components/App.svelte

@@ -4,10 +4,10 @@
 		ActionIcons,
 		Actions as CardActions,
 		Content as CardContent
-	} from '@smui/card';
-	import IconButton from '@smui/icon-button';
-	import Dialog, { Actions as DialogActions, Content as DialogContent, Title } from '@smui/dialog';
-	import Button, { Label } from '@smui/button';
+	} from '@smui/card/styled';
+	import IconButton from '@smui/icon-button/styled';
+	import Dialog, { Actions, Content, Title } from '@smui/dialog/styled';
+	import Button, { Label } from '@smui/button/styled';
 	import { ContactType } from '../data/contact';
 	import { copyToClipboard } from '../helpers/clipboard';
 	import { getEmailLink, getGMapsLink } from '../helpers/links';
@@ -22,7 +22,7 @@
 	export let link = '';
 	export let type: ContactType = ContactType.Url;
 
-	let dialog;
+	let open = false;
 	let copyError: Error | null = null;
 
 	const openLink = (contactType: ContactType, title: string, url: string): void => {
@@ -37,25 +37,25 @@
 	};
 
 	const copyLink = (url: string): void => {
-		if (!url || !dialog) {
+		if (!url) {
 			return;
 		}
 
 		copyToClipboard(url)
 			.then(() => {
 				copyError = null;
-				dialog.open();
+				open = true;
 			})
 			.catch(err => {
 				log.error('Unable to copy to clipboard', err);
 				copyError = err;
-				dialog.open();
+				open = true;
 			});
 	};
 
 	const closeDialog = () => {
 		copyError = null;
-		dialog.close();
+		open = false;
 	};
 </script>
 
@@ -92,9 +92,9 @@
 			</CardActions>
 		</Card>
 
-		<Dialog bind:this="{dialog}" aria-labelledby="dialog-title" aria-describedby="dialog-content">
+		<Dialog bind:open aria-labelledby="dialog-title" aria-describedby="dialog-content">
 			<Title id="dialog-title">Copied to the clipboard</Title>
-			<DialogContent id="dialog-content">
+			<Content id="dialog-content">
 				{#if copyError}
 					Ugh! Unable to copy the link...
 				{:else if type === ContactType.Email}
@@ -106,12 +106,12 @@
 					<b>{link || title}</b>
 					has been copied to the clipboard
 				{:else}The link <b>{link || title}</b> has been copied to the clipboard{/if}
-			</DialogContent>
-			<DialogActions>
+			</Content>
+			<Actions>
 				<Button on:click="{() => closeDialog()}">
 					<Label>OK</Label>
 				</Button>
-			</DialogActions>
+			</Actions>
 		</Dialog>
 	</div>
 </div>

src/components/ContactItem.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Paper, { Title, Content } from '@smui/paper';
+	import Paper, { Title, Content } from '@smui/paper/styled';
 	import Link from './Link.svelte';
 	import type { LinkInfo } from '../../common';
 	import { onMount, onDestroy } from 'svelte';

src/components/LinkItem.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { TagModel } from '../data/tags';
-	import Chip, { Set, Text } from '@smui/chips';
+	import Chip, { Set, Text } from '@smui/chips/styled';
 
 	export let items: TagModel[] = [];
 
@@ -12,7 +12,7 @@
 </script>
 
 <Set chips="{items}" let:chip>
-	<Chip shouldRemoveOnTrailingIconClick="{false}" on:click="{() => onClick(chip)}">
+	<Chip chip="{chip}" shouldRemoveOnTrailingIconClick="{false}" on:click="{() => onClick(chip)}">
 		{#if chip.icon}<i class="{chip.icon}"></i>{/if}
 		<Text>{chip.title}</Text>
 	</Chip>

src/components/Tags.svelte

@@ -1,16 +1,16 @@
-@import '~@material/typography/mdc-typography';
-@import '~@material/theme/color-palette';
+@use '@material/typography/mdc-typography';
+@use '@material/theme/color-palette';
 @import './global.scss';
 
 html {
 	body {
 		margin: 0;
 	}
 
-	color: $material-color-grey-900;
+	color: color-palette.$grey-900;
 
 	a {
-		color: $material-color-grey-900;
+		color: color-palette.$grey-900;
 		cursor: pointer;
 		text-decoration: none;
 	}
@@ -20,7 +20,7 @@ html {
 	}
 
 	.greyed {
-		color: $material-color-blue-grey-300;
+		color: color-palette.$blue-grey-300;
 	}
 
 	// Responsive things ----

src/index.scss

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { LinkInfo } from '../../common';
-	import Switch from '@smui/switch';
-	import FormField from '@smui/form-field';
+	import Switch from '@smui/switch/styled';
+	import FormField from '@smui/form-field/styled';
 	import LinkItem from '../components/LinkItem.svelte';
 	import { RoutePath } from '.';
 	import { getSortedList } from '../helpers/sort';

src/routes/Articles.svelte

@@ -1,22 +1,18 @@
 // Nothing here. Just use the default theme.
+@use '@material/theme/color-palette';
 
-.app-page {
-	@import '~@material/theme/color-palette';
+$background: #fff;
 
-	//min-height: 100%;
-	//min-width: 100%;
-	//background-color: #000;
-	//color: #fff;
+@use '@material/theme/index' as theme with (
+  $primary: color-palette.$deep-purple-400,
+  $secondary: color-palette.$deep-orange-500,
+  $surface: color-palette.$blue-grey-50,
+  $background: $background,
+  $error: color-palette.$red-a400,
+);
 
-	$mdc-theme-primary: $material-color-deep-purple-400;
-	$mdc-theme-secondary: $material-color-deep-orange-500;
-	//$mdc-theme-background: #000;
-	$mdc-theme-surface: $material-color-blue-grey-50;
-	$mdc-theme-error: $material-color-orange-100;
-
-	@import '~@material/theme/variables';
-
-	@each $style in map-keys($mdc-theme-property-values) {
-		--mdc-theme-#{$style}: #{map-get($mdc-theme-property-values, $style)};
-	}
+html,
+body {
+	background-color: $background;
+	color: if(theme.contrast-tone($background) == 'dark', #000, #fff);
 }