docs: update docs and readmes

.github/FUNDING.yml

@@ -1,7 +1,7 @@
 # These are supported funding model platforms
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: tunnelgram # Replace with a single Patreon username
+patreon: # Replace with a single Patreon username
 open_collective: # Replace with a single Open Collective username
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

CONTRIBUTING.md

@@ -12,12 +12,6 @@ The first step is to fork the repo. Once you've got your own fork, check it out
 git clone [email protected]:yourusername/svelte-material-ui.git smui
 ```
 
-Now you'll need lerna to get going. You can install it globally or you can run it with `npx`. I'm going to assume you want to install it globally.
-
-```
-npm install -g lerna
-```
-
 Now let's get the repo set up for development.
 
 ```
@@ -27,18 +21,16 @@ npm i
 
 # This will take a while
 npm run bootstrap
-
-cd site
-npm i
 ```
 
-Now you're set up. If there are package-lock.json files updated after setting up, feel free to reset those changes. Run this in the site folder to start up the dev site.
+Now you're set up. If there are package-lock.json files updated after setting up, feel free to reset those changes. Run this to start up the dev site.
 
 ```
+cd packages/site
 npm run dev
 ```
 
-Once that starts, you should be able to see the site at http://localhost:5000 and the site will refresh automatically when you make a change.
+Once that starts, you should be able to see the site at http://localhost:3000/ and the site will refresh automatically when you make a change.
 
 ## Commiting Changes
 

MIGRATING.md

@@ -6,9 +6,10 @@ This doc contains information that will help you migrate your code from an older
 
 ## Breaking Changes
 
-- Events have been renamed from like "SMUI:component:sub-component:event" to "SMUIComponentSubComponent:event".
 - TypeScript!!! You don't need to use TypeScript, but you do need to use the [TypeScript preprocessor](https://github.com/sveltejs/svelte-preprocess) for Svelte.
+- Events have been renamed from like "SMUI:component:sub-component:event" to "SMUIComponentSubComponent:event".
 - Elemental components (from @smui/common) should be imported as named imports from `@smui/common/elements` instead, so that they have the right types.
+- The `/bare` import paths have been removed. (The default import path has been unstyled since v4.)
 
 # SMUI 4.0 -> SMUI 4.1
 

README.md

@@ -2,7 +2,7 @@
   <img src="packages/site/static/header-transparent.png" alt="Svelte Material UI" />
 </div>
 
-A library of Svelte 3 Material UI components, based on the [Material Design Components - Web](https://material.io/develop/web/).
+A library of Svelte Material UI components, based on [Material Design Components - Web](https://material.io/develop/web/).
 
 # Demos
 
@@ -31,7 +31,7 @@ Here are some features you should know about:
 
 # Installation
 
-To get started, check out the [installation docs](INSTALL.md).
+To get started, check out the [installation docs](INSTALL.md) or the [SvelteKit docs](SVELTEKIT.md).
 
 # Migration
 
@@ -41,6 +41,8 @@ Upgrading from v2? There are **lots** of changes listed in the [upgrade instruct
 
 Upgrading from v3? SMUI's styling method has been simplified. Check out the [upgrade instructions](MIGRATING.md#smui-3---smui-4).
 
+Upgrading from v4? SMUI now requires the [TypeScript preprocessor](https://github.com/sveltejs/svelte-preprocess). Check out the [upgrade instructions](MIGRATING.md#smui-4---smui-5).
+
 # Need Help?
 
 If you need help using SMUI, join the new [Discord server](https://discord.gg/aFzmkrmg9P).
@@ -105,10 +107,6 @@ Click a component/package below to go to the documentation. (Note that this docu
 
 <sub>‡ This is not an MDC Web component. It is an addition that SMUI provides.</sub>
 
-# Support
-
-You can support my work on this project through my other project, [Tunnelgram](https://tunnelgram.com). I have a [Patreon](https://www.patreon.com/tunnelgram) set up for it. I started this project in order to Materialize Tunnelgram.
-
 # License
 
 Copyright 2020-2021 Hunter Perrin

REPL.md

@@ -1,5 +1,7 @@
 # Using SMUI in the Svelte REPL
 
+Note: The latest version of SMUI doesn't work in the REPL, because the REPL doesn't support TypeScript.
+
 Check out an [example REPL](https://svelte.dev/repl/aa857c3bb5eb478cbe6b1fd6c6da522a?version=3.37.0).
 
 SMUI components provide "bare.css" files to use in the REPL. In a `<svelte:head>` section, load from a CDN like UNPKG the CSS files for the fonts, for Material typography, and for SMUI:

SAPPER.md

@@ -2,7 +2,7 @@
 
 <sub>\* As of 2021-Apr-06, these instructions will now work without a flash of unstyled content!</sub>
 
-These instructions are for the Advanced Styling Method. If you don't need the advantages of this method, it's much easier to use the [Easy Styling Method](/SASS.md#easy-styling-method).
+**These instructions are for the Advanced Styling Method. If you don't need the advantages of this method, it's much easier to use the [Easy Styling Method](/SASS.md#easy-styling-method).**
 
 Install the following packages as dev dependencies.
 

SVELTEKIT.md

@@ -1,4 +1,4 @@
-# SvelteKit
+# SvelteKit Installation
 
 Check out the [SvelteKit example repo](https://github.com/hperrin/smui-example-sveltekit).
 
@@ -12,19 +12,66 @@ npm install --save-dev @smui/card
 npm install --save-dev smui-theme
 ```
 
-You need to use the Easy Styling Method. If you aren't using the default theme, you'll need one of these sets of prepare scripts.
+You need to use the [Easy Styling Method](/SASS.md#easy-styling-method). Create theme files with `smui-theme`.
 
-- For the [Custom Theme](/THEMING.md), without Dark Mode
+```sh
+npx smui-theme template src/theme
+```
+
+You can [modify your theme variables](/THEMING.md) in the files now in `src/theme`.
+
+You'll need one of these sets of prepare scripts in your `package.json` file.
+
+- Without Dark Mode support.
 
   ```
   "prepare": "npm run smui-theme",
   "smui-theme": "smui-theme compile static/smui.css -i src/theme"
   ```
 
-- For the [Custom Theme](/THEMING.md), with Dark Mode
+- With Dark Mode.
 
   ```
   "prepare": "npm run smui-theme-light && npm run smui-theme-dark",
   "smui-theme-light": "smui-theme compile static/smui.css -i src/theme",
   "smui-theme-dark": "smui-theme compile static/smui-dark.css -i src/theme/dark"
   ```
+
+Now in your `src/app.html` file, add the following to the `head` section:
+
+```html
+<!-- Material Icons -->
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/icon?family=Material+Icons"
+/>
+<!-- Roboto -->
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
+/>
+<!-- Roboto Mono -->
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Roboto+Mono"
+/>
+```
+
+And this for no Dark Mode support.
+
+```html
+<!-- SMUI Styles -->
+<link rel="stylesheet" href="/smui.css" />
+```
+
+Or this for Dark Mode.
+
+```html
+<!-- SMUI Styles -->
+<link rel="stylesheet" href="/smui.css" media="(prefers-color-scheme: light)" />
+<link
+  rel="stylesheet"
+  href="/smui-dark.css"
+  media="screen and (prefers-color-scheme: dark)"
+/>
+```