token shaker and other style tweaks

Author: KTibow

src/routes/docs/detailed-walkthrough/+page.svelte

@@ -108,11 +108,7 @@
   <span class="theme-defined">Colors</span>, the
   <code class="theme-defined">--m3c-</code> variables, are also tokens.
 </p>
-<p>
-  We recommend using <a href="https://www.npmjs.com/package/vite-plugin-token-shaker"
-    >vite-plugin-token-shaker</a
-  > to minify tokens by dropping unused ones, inlining rarely used ones, and mangling commonly used ones.
-</p>
+<p>Want these to be minified and inlined? The "Use token-shaker" option from setup does that.</p>
 <h3>Variables</h3>
 <p>These start with <code>--m3v-</code>, and let you send information to M3 Svelte.</p>
 <ul>

src/routes/docs/quick-start/+page.svelte

@@ -6,14 +6,14 @@
   import iconNext from "@ktibow/iconset-material-symbols/arrow-forward";
 
   import Icon from "$lib/misc/Icon.svelte";
-  import ConnectedButtons from "$lib/buttons/ConnectedButtons.svelte";
   import Button from "$lib/buttons/Button.svelte";
   import { resolve } from "$app/paths";
 
   import Snippet from "../Snippet.svelte";
 
-  let fontSelection = $state("gsans");
-  let useKit: "yes" | "no" = $state("yes");
+  let useTokenShaker = $state(false);
+  let useVite = $state(false);
+  let useCustomFont = $state(false);
 </script>
 
 <svelte:head><title>Quick start</title></svelte:head>
@@ -25,48 +25,81 @@
         <Icon icon={iconDownload} />
       </div>
       <div class="text">Install M3 Svelte</div>
+      <Button label>
+        <input type="checkbox" bind:checked={useTokenShaker} />
+        Use token-shaker?
+      </Button>
     </h2>
-    <Snippet
-      name="install.sh"
-      html={/* sh */ `pnpm install m3-svelte vite-plugin-functions-mixins -D`}
-    />
+    {#if useTokenShaker}
+      <Snippet
+        name="install.sh"
+        html={/* sh */ `pnpm install m3-svelte vite-plugin-functions-mixins vite-plugin-token-shaker -D`}
+      />
+    {:else}
+      <Snippet
+        name="install.sh"
+        html={/* sh */ `pnpm install m3-svelte vite-plugin-functions-mixins -D`}
+      />
+    {/if}
   </li>
   <li>
     <h2>
       <div class="number">
         2
         <Icon icon={iconConfig} />
       </div>
-      <div class="text">Enable functions and mixins</div>
-      <ConnectedButtons>
-        <Button variant="tonal" square label
-          ><input type="radio" value="yes" name="usekit" bind:group={useKit} />SvelteKit</Button
-        >
-        <Button variant="tonal" square label
-          ><input type="radio" value="no" name="usekit" bind:group={useKit} />Pure Vite</Button
-        >
-      </ConnectedButtons>
+      <div class="text">Enable plugins</div>
+      <Button label>
+        <input type="checkbox" bind:checked={useVite} />
+        Use pure Vite?
+      </Button>
     </h2>
-    {#if useKit == "yes"}
+    {#if useVite}
+      {#if useTokenShaker}
+        <Snippet
+          name="vite.config.ts"
+          html={/* typescript */ `import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { functionsMixins } from "vite-plugin-functions-mixins";
+import { tokenShaker } from "vite-plugin-token-shaker";
+
+export default defineConfig({
+  plugins: [svelte(), functionsMixins({ deps: ["m3-svelte"] }), tokenShaker()],
+});`}
+        />
+      {:else}
+        <Snippet
+          name="vite.config.ts"
+          html={/* typescript */ `import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { functionsMixins } from "vite-plugin-functions-mixins";
+
+export default defineConfig({
+  plugins: [svelte(), functionsMixins({ deps: ["m3-svelte"] })],
+});`}
+        />
+      {/if}
+    {:else if useTokenShaker}
       <Snippet
         name="vite.config.ts"
         html={/* typescript */ `import { defineConfig } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { functionsMixins } from "vite-plugin-functions-mixins";
+import { tokenShaker } from "vite-plugin-token-shaker";
 
 export default defineConfig({
-  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] })],
+  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] }), tokenShaker()],
 });`}
       />
     {:else}
       <Snippet
         name="vite.config.ts"
         html={/* typescript */ `import { defineConfig } from "vite";
-import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { sveltekit } from "@sveltejs/kit/vite";
 import { functionsMixins } from "vite-plugin-functions-mixins";
 
 export default defineConfig({
-  plugins: [svelte(), functionsMixins({ deps: ["m3-svelte"] })],
+  plugins: [sveltekit(), functionsMixins({ deps: ["m3-svelte"] })],
 });`}
       />
     {/if}
@@ -79,15 +112,15 @@ export default defineConfig({
       </div>
       <div class="text">Enable your <a href={resolve("/theme")}>theme snippet</a></div>
     </h2>
-    {#if useKit == "yes"}
+    {#if useVite}
+      <Snippet name="index.ts" html={/* typescript */ `import "./app.css";`} />
+    {:else}
       <Snippet
         name="+layout.svelte"
         html={/* svelte */ `<${""}script>
-  import "../app.css";
+import "../app.css";
 </${""}script>`}
       />
-    {:else}
-      <Snippet name="index.ts" html={/* typescript */ `import "./app.css";`} />
     {/if}
     <Snippet name="app.css" html={/* css */ `/* Your theme snippet */`} />
   </li>
@@ -97,29 +130,24 @@ export default defineConfig({
         4
         <Icon icon={iconType} />
       </div>
-      <ConnectedButtons>
-        <Button variant="tonal" square label>
-          <input type="radio" value="gsans" name="font" bind:group={fontSelection} />Enable Google
-          Sans
-        </Button>
-        <Button variant="tonal" square label>
-          <input type="radio" value="manual" name="font" bind:group={fontSelection} />Enable a
-          custom font
-        </Button>
-      </ConnectedButtons>
+      <div class="text">Enable a font</div>
+      <Button label>
+        <input type="checkbox" bind:checked={useCustomFont} />
+        Use custom font?
+      </Button>
     </h2>
-    {#if fontSelection == "gsans"}
-      <Snippet
-        name={useKit == "yes" ? "app.html" : "index.html"}
-        html={/* html */ `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,[email protected],400..700&display=swap" />`}
-      />
-    {:else}
+    {#if useCustomFont}
       <Snippet
         name="app.css"
         html={/* css */ `:root {
   --m3-font: [your font], system-ui;
 }`}
       />
+    {:else}
+      <Snippet
+        name={useVite ? "index.html" : "app.html"}
+        html={/* html */ `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,[email protected],400..700&display=swap" />`}
+      />
     {/if}
   </li>
 </ol>