@turnipxenon/pineapple 2.4.62 → 2.4.63

package/.idea/workspace.xml

@@ -4,8 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Fix pkg import for Chip">
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="CreateUrlForm" comment="Extract tailwind css utility class to local-chip">
       <change beforePath="$PROJECT_DIR$/src/lib/components/chip/Chip.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/chip/Chip.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/template/seaweed/SeaweedTemplate.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/template/seaweed/SeaweedTemplate.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -340,15 +342,7 @@
       <workItem from="1712570296984" duration="1559000" />
       <workItem from="1712571884570" duration="7000" />
       <workItem from="1712636226857" duration="11130000" />
-      <workItem from="1712648417963" duration="1646000" />
-    </task>
-    <task id="LOCAL-00129" summary="Write vercel to azure migration">
-      <option name="closed" value="true" />
-      <created>1712298583241</created>
-      <option name="number" value="00129" />
-      <option name="presentableId" value="LOCAL-00129" />
-      <option name="project" value="LOCAL" />
-      <updated>1712298583242</updated>
+      <workItem from="1712648417963" duration="4959000" />
     </task>
     <task id="LOCAL-00130" summary="Remove vercel module">
       <option name="closed" value="true" />
@@ -734,7 +728,15 @@
       <option name="project" value="LOCAL" />
       <updated>1712649815862</updated>
     </task>
-    <option name="localTasksCounter" value="178" />
+    <task id="LOCAL-00178" summary="Extract tailwind css utility class to local-chip">
+      <option name="closed" value="true" />
+      <created>1712650184366</created>
+      <option name="number" value="00178" />
+      <option name="presentableId" value="LOCAL-00178" />
+      <option name="project" value="LOCAL" />
+      <updated>1712650184366</updated>
+    </task>
+    <option name="localTasksCounter" value="179" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -792,7 +794,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Extract EntryOrderConfig" />
     <MESSAGE value="Add group swapping" />
     <MESSAGE value="Add serverSideQueryParams in SeaweedTemplate" />
     <MESSAGE value="Add serverSideQueryParams and extraComponent in SeaweedTemplate" />
@@ -817,6 +818,7 @@
     <MESSAGE value="Export chip" />
     <MESSAGE value="Add border-radius for advanced settings cards" />
     <MESSAGE value="Fix pkg import for Chip" />
-    <option name="LAST_COMMIT_MESSAGE" value="Fix pkg import for Chip" />
+    <MESSAGE value="Extract tailwind css utility class to local-chip" />
+    <option name="LAST_COMMIT_MESSAGE" value="Extract tailwind css utility class to local-chip" />
   </component>
 </project>

package/.svelte-kit/__package__/components/chip/Chip.svelte

@@ -1,14 +1,34 @@
-<span class="local-chip">
-<slot />
-</span>
+<script>import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
+export let onClick = void 0;
+export let checked = false;
+$:
+  textColorClass = $isLightMode ? "local-light" : "local-dark";
+let buttonClass = "variant-filled-tertiary";
+const toggleChipColor = (isLightMode2, checked2) => {
+  if (isLightMode2) {
+    buttonClass = checked2 ? "variant-filled-tertiary" : "variant-filled-primary";
+  } else {
+    buttonClass = checked2 ? "variant-filled-tertiary" : "variant-soft-tertiary";
+  }
+};
+$:
+  toggleChipColor($isLightMode, checked);
+</script>
+
+<!-- aria wanrning is okay to ignore since it dynamically shifts between button or span -->
+{#if onClick}
+	<button class={`chip ${buttonClass} ${textColorClass}`}
+	        on:click={onClick}>
+		<slot />
+	</button>
+{:else }
+	<span class={`local-chip variant-filled-tertiary ${textColorClass}`}>
+		<slot />
+	</span>
+{/if}
 
 <style>
-    :is(.dark .local-chip) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-.local-chip {
+    .local-chip {
         cursor: pointer;
         white-space: nowrap;
         padding-left: 0.75rem;
@@ -44,16 +64,6 @@ a.local-chip:hover,
         --tw-scale-x: 1;
         --tw-scale-y: 1;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.local-chip {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-:is(.dark .local-chip) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
 }
     .local-chip {
         border-radius: 1em;
@@ -62,4 +72,13 @@ a.local-chip:hover,
         pointer-events: none;
         background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
+
+    .local-light {
+        color: rgb(var(--theme-font-color-base));
+    }
+
+    .local-dark {
+        color: whitesmoke;
+        /*color: rgb(var(--theme-font-color-dark));*/
+    }
 </style>

package/.svelte-kit/__package__/components/chip/Chip.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  ChipProps */
-/** @typedef {typeof __propDef.events}  ChipEvents */
-/** @typedef {typeof __propDef.slots}  ChipSlots */
-export default class Chip extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ChipProps = typeof __propDef.props;
-export type ChipEvents = typeof __propDef.events;
-export type ChipSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        onClick?: undefined | (() => void);
+        checked?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type ChipProps = typeof __propDef.props;
+export type ChipEvents = typeof __propDef.events;
+export type ChipSlots = typeof __propDef.slots;
+export default class Chip extends SvelteComponent<ChipProps, ChipEvents, ChipSlots> {
+}
 export {};

package/.svelte-kit/__package__/index.d.ts

@@ -3,6 +3,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Chip } from "./components/chip/Chip.svelte";
+export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
 export { default as SocialSection } from "./components/SocialSection.svelte";
 export * from "./components/overrideable_meta/index";
 export * from "./components/navigation_component/index";

package/.svelte-kit/__package__/index.js

@@ -4,6 +4,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Chip } from "./components/chip/Chip.svelte";
+export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
 export { default as SocialSection } from "./components/SocialSection.svelte";
 export * from "./components/overrideable_meta/index";
 export * from "./components/navigation_component/index";

package/.svelte-kit/__package__/template/seaweed/SeaweedTemplate.svelte

@@ -4,7 +4,7 @@ import { runChaos } from "./RunChaos";
 import SocialSection from "../../components/SocialSection.svelte";
 import "./seaweed.postcss";
 import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
-import { Accordion, AccordionItem, CodeBlock, SlideToggle } from "@skeletonlabs/skeleton";
+import { Accordion, AccordionItem, CodeBlock } from "@skeletonlabs/skeleton";
 import { page } from "$app/stores";
 import Card from "../../components/Card.svelte";
 import ElementVisbilityDetector from "../../components/ElementVisbilityDetector.svelte";
@@ -17,6 +17,7 @@ import {
 import { parseQueryTerms } from "./ParseQueryTerms";
 import UrlShortenerForm from "./CreateUrlForm.svelte";
 import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
+import { Chip } from "../../index";
 export let letChaos = true;
 export let name = "Turnip";
 export let email = "turnipxenon@gmail.com";
@@ -345,14 +346,14 @@ $:
 						<div class="query-term-grid">
 							{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
 								<!--{@const shouldBold = false}-->
-								<button
-									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
-									on:click={() => {toggleTerm(term)}}
-								>
+								<Chip onClick={() => {toggleTerm(term)}}
+								      checked={shouldBold}>
 									<!-- todo: change shouldBold -->
-									{#if (shouldBold)}&check;{/if}
-									{term}
-								</button>
+									<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
+										{#if (shouldBold)}&check;{/if}
+										{term}
+									</span>
+								</Chip>
 							{/each}
 						</div>
 

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "jouiyd"
+	version_hash: "1rrfos4"
 };
 
 export async function get_hooks() {

package/dist/components/chip/Chip.svelte

@@ -1,14 +1,34 @@
-<span class="local-chip">
-<slot />
-</span>
+<script>import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
+export let onClick = void 0;
+export let checked = false;
+$:
+  textColorClass = $isLightMode ? "local-light" : "local-dark";
+let buttonClass = "variant-filled-tertiary";
+const toggleChipColor = (isLightMode2, checked2) => {
+  if (isLightMode2) {
+    buttonClass = checked2 ? "variant-filled-tertiary" : "variant-filled-primary";
+  } else {
+    buttonClass = checked2 ? "variant-filled-tertiary" : "variant-soft-tertiary";
+  }
+};
+$:
+  toggleChipColor($isLightMode, checked);
+</script>
+
+<!-- aria wanrning is okay to ignore since it dynamically shifts between button or span -->
+{#if onClick}
+	<button class={`chip ${buttonClass} ${textColorClass}`}
+	        on:click={onClick}>
+		<slot />
+	</button>
+{:else }
+	<span class={`local-chip variant-filled-tertiary ${textColorClass}`}>
+		<slot />
+	</span>
+{/if}
 
 <style>
-    :is(.dark .local-chip) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-.local-chip {
+    .local-chip {
         cursor: pointer;
         white-space: nowrap;
         padding-left: 0.75rem;
@@ -44,16 +64,6 @@ a.local-chip:hover,
         --tw-scale-x: 1;
         --tw-scale-y: 1;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-.local-chip {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-:is(.dark .local-chip) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
 }
     .local-chip {
         border-radius: 1em;
@@ -62,4 +72,13 @@ a.local-chip:hover,
         pointer-events: none;
         background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
+
+    .local-light {
+        color: rgb(var(--theme-font-color-base));
+    }
+
+    .local-dark {
+        color: whitesmoke;
+        /*color: rgb(var(--theme-font-color-dark));*/
+    }
 </style>

package/dist/components/chip/Chip.svelte.d.ts

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  ChipProps */
-/** @typedef {typeof __propDef.events}  ChipEvents */
-/** @typedef {typeof __propDef.slots}  ChipSlots */
-export default class Chip extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ChipProps = typeof __propDef.props;
-export type ChipEvents = typeof __propDef.events;
-export type ChipSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        onClick?: undefined | (() => void);
+        checked?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type ChipProps = typeof __propDef.props;
+export type ChipEvents = typeof __propDef.events;
+export type ChipSlots = typeof __propDef.slots;
+export default class Chip extends SvelteComponent<ChipProps, ChipEvents, ChipSlots> {
+}
 export {};

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Chip } from "./components/chip/Chip.svelte";
+export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
 export { default as SocialSection } from "./components/SocialSection.svelte";
 export * from "./components/overrideable_meta/index";
 export * from "./components/navigation_component/index";

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as SeaweedTemplate } from "./template/seaweed/SeaweedTemplate.s
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Chip } from "./components/chip/Chip.svelte";
+export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
 export { default as SocialSection } from "./components/SocialSection.svelte";
 export * from "./components/overrideable_meta/index";
 export * from "./components/navigation_component/index";

package/dist/template/seaweed/SeaweedTemplate.svelte

@@ -4,7 +4,7 @@ import { runChaos } from "./RunChaos";
 import SocialSection from "../../components/SocialSection.svelte";
 import "./seaweed.postcss";
 import SeaweedBaseLayout from "../../components/layouts/SeaweedBaseLayout.svelte";
-import { Accordion, AccordionItem, CodeBlock, SlideToggle } from "@skeletonlabs/skeleton";
+import { Accordion, AccordionItem, CodeBlock } from "@skeletonlabs/skeleton";
 import { page } from "$app/stores";
 import Card from "../../components/Card.svelte";
 import ElementVisbilityDetector from "../../components/ElementVisbilityDetector.svelte";
@@ -17,6 +17,7 @@ import {
 import { parseQueryTerms } from "./ParseQueryTerms";
 import UrlShortenerForm from "./CreateUrlForm.svelte";
 import PineappleSlideToggle from "../../components/PineappleSlideToggle.svelte";
+import { Chip } from "../../index";
 export let letChaos = true;
 export let name = "Turnip";
 export let email = "turnipxenon@gmail.com";
@@ -345,14 +346,14 @@ $:
 						<div class="query-term-grid">
 							{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
 								<!--{@const shouldBold = false}-->
-								<button
-									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
-									on:click={() => {toggleTerm(term)}}
-								>
+								<Chip onClick={() => {toggleTerm(term)}}
+								      checked={shouldBold}>
 									<!-- todo: change shouldBold -->
-									{#if (shouldBold)}&check;{/if}
-									{term}
-								</button>
+									<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
+										{#if (shouldBold)}&check;{/if}
+										{term}
+									</span>
+								</Chip>
 							{/each}
 						</div>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.62",
+  "version": "2.4.63",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/src/lib/components/chip/Chip.svelte

@@ -1,14 +1,49 @@
-<span class="local-chip">
-<slot />
-</span>
+<script lang="ts">
+	import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
+
+	export let onClick: undefined | (() => void) = undefined;
+	export let checked = false;
+
+	$: textColorClass = $isLightMode ? "local-light" : "local-dark";
+	let buttonClass = "variant-filled-tertiary";
+	const toggleChipColor = (isLightMode: boolean, checked: boolean) => {
+		if (isLightMode) {
+			buttonClass = checked ? "variant-filled-tertiary" : "variant-filled-primary";
+		} else {
+			buttonClass = checked ? "variant-filled-tertiary" : "variant-soft-tertiary";
+		}
+	};
+	$: toggleChipColor($isLightMode, checked);
+</script>
+
+<!-- aria wanrning is okay to ignore since it dynamically shifts between button or span -->
+{#if onClick}
+	<button class={`chip ${buttonClass} ${textColorClass}`}
+	        on:click={onClick}>
+		<slot />
+	</button>
+{:else }
+	<span class={`local-chip variant-filled-tertiary ${textColorClass}`}>
+		<slot />
+	</span>
+{/if}
 
 <style lang="postcss">
     .local-chip {
-        @apply chip variant-filled-tertiary;
+        @apply chip;
         border-radius: 1em;
         margin: 0.25em;
         font-weight: bold;
         pointer-events: none;
         background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
+
+    .local-light {
+        color: rgb(var(--theme-font-color-base));
+    }
+
+    .local-dark {
+        color: whitesmoke;
+        /*color: rgb(var(--theme-font-color-dark));*/
+    }
 </style>

package/src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as SeaweedTemplate } from "$pkg/template/seaweed/SeaweedTemplat
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export { default as Card } from "./components/Card.svelte";
 export { default as Chip } from "./components/chip/Chip.svelte";
+export { default as PineappleSlideToggle } from "./components/PineappleSlideToggle.svelte";
 export { default as SocialSection } from "./components/SocialSection.svelte";
 
 export * from "$pkg/components/overrideable_meta/index";

package/src/lib/template/seaweed/SeaweedTemplate.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { afterUpdate, type ComponentType, onMount } from "svelte";
+	import { afterUpdate, onMount } from "svelte";
 	import EntryOrderConfig from "$pkg/template/seaweed/entry_order_config/EntryOrderConfig.svelte";
 	import { runChaos } from "$pkg/template/seaweed/RunChaos";
 	import SocialSection from "$pkg/components/SocialSection.svelte";
 	import "./seaweed.postcss";
 	import SeaweedBaseLayout from "$pkg/components/layouts/SeaweedBaseLayout.svelte";
-	import { Accordion, AccordionItem, CodeBlock, SlideToggle } from "@skeletonlabs/skeleton";
+	import { Accordion, AccordionItem, CodeBlock } from "@skeletonlabs/skeleton";
 	import { page } from "$app/stores";
 	import Card from "$pkg/components/Card.svelte";
 	import ElementVisbilityDetector from "$pkg/components/ElementVisbilityDetector.svelte";
@@ -21,6 +21,7 @@
 	import { parseQueryTerms } from "$pkg/template/seaweed/ParseQueryTerms";
 	import UrlShortenerForm from "$pkg/template/seaweed/CreateUrlForm.svelte";
 	import PineappleSlideToggle from "$pkg/components/PineappleSlideToggle.svelte";
+	import { Chip } from "$pkg/index";
 
 	export let letChaos = true;
 	export let name = "Turnip";
@@ -406,14 +407,14 @@
 						<div class="query-term-grid">
 							{#each seaweedTemplateData.queryTermMap.entries() as [term, shouldBold]}
 								<!--{@const shouldBold = false}-->
-								<button
-									class="chip {shouldBold ? 'variant-filled-tertiary' : 'variant-soft-tertiary'}"
-									on:click={() => {toggleTerm(term)}}
-								>
+								<Chip onClick={() => {toggleTerm(term)}}
+								      checked={shouldBold}>
 									<!-- todo: change shouldBold -->
-									{#if (shouldBold)}&check;{/if}
-									{term}
-								</button>
+									<span style={`font-weight: ${shouldBold ? "bold" : "normal"}`}>
+										{#if (shouldBold)}&check;{/if}
+										{term}
+									</span>
+								</Chip>
 							{/each}
 						</div>