@turnipxenon/pineapple 2.4.21 → 2.4.23

package/.idea/shelf/Changes/shelved.patch

@@ -0,0 +1,118 @@
+Index: src/lib/app.postcss
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+>@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@tailwind variants;\n\n/* (all other styles below) */\n\n/*place global styles here */\n:root {\n    --default-card-max-width: calc(4rem + 4rem + 40rem);\n}\n\nhtml, body {\n    @apply h-full overflow-hidden;\n    @apply bg-surface-400 dark:bg-surface-800;\n    background-color: transparent;\n}\n\n/* font color */\nhtml, body {\n    color: rgb(var(--theme-font-color-base));\n}\n\n.accordion-panel {\n    color: rgb(var(--color-primary-1000));\n}\n\n.dark body,\n.dark .variant-filled-primary,\n.dark .turnip-button,\n.dark .turnip-button > span,\n.dark .accordion-panel,\n.dark button.accordion-control,\n.chip, .dark .chip {\n    color: rgb(var(--theme-font-color-dark));\n}\n\n.turnip-button, .turnip-button > span, button.accordion-control {\n    font-weight: bold;\n    color: rgb(var(--theme-font-color-base));\n}\n\n/* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */\n.turnip-button > img, .img-icon {\n    filter: grayscale(100%) brightness(0%) invert(25%);\n}\n\n.dark .turnip-button > img, .dark .img-icon {\n    filter: grayscale(100%) brightness(0%) invert(100%);\n}\n\n/*\n\n//for reference left here\n\n.bg-surface-custom-token {\n    @apply bg-surface-200 dark:bg-surface-700;\n}\n\n.app-bar {\n    @apply bg-surface-custom-token;\n}\n*/\n\n.default-card {\n    padding: 2em;\n    text-align: start;\n    max-width: var(--default-card-max-width);\n}\n\nh1,\nh2,\np {\n    margin-bottom: 0.5em;\n}\n\nul {\n    list-style-type: circle;\n    padding-left: 1em;\n}\n\n.default-page-container {\n    @apply flex justify-center items-center;\n    margin-top: 4em;\n    margin-left: 1em;\n    margin-right: 1em;\n    flex-direction: column;\n    z-index: 0;\n}\n\n.footer-space {\n    width: 100%;\n    height: calc(var(--dialog-box-height) + 4em);\n}\n\na.dialog-choice {\n    cursor: url(\"$pkg/assets/icons/chat-cursor.svg\"), auto;\n}\n\na.external-link {\n    cursor: url(\"$pkg/assets/icons/external-link.svg\"), auto;\n}\n\nblockquote {\n    font-style: italic;\n    opacity: 60%;\n    font-weight: bold;\n}\n\n/* todo: add --tw-text-opacity division to add ambience based on bg better */\na {\n    text-decoration: underline;\n    color: rgb(var(--color-secondary-500));\n}\n\na:hover, a:hover:visited {\n    color: rgb(var(--color-secondary-400));\n}\n\na:visited {\n    color: rgb(var(--color-secondary-800));\n}\n\na:active {\n    color: rgb(var(--color-secondary-350));\n}\n\n.dark a {\n    text-decoration: underline;\n    color: rgb(var(--color-secondary-300));\n}\n\n.dark a:hover, .dark a:hover:visited {\n    color: rgb(var(--color-secondary-200));\n}\n\n.dark a:visited {\n    color: rgb(var(--color-secondary-350));\n}\n\n.dark a:active {\n    color: rgb(var(--color-secondary-100));\n}\n\n/* region Accordion css for handling missing styles in package */\n.accordion {\n    @apply variant-filled-primary rounded-md;\n}\n\n.accordion-control {\n    @apply hover:bg-surface-hover-token;\n}\n\n.accordion-item {\n    @apply variant-filled-primary rounded-md;\n}\n\n/* endregion Accordion css for handling missing styles in package */\n\n:root {\n    --shadow-color: rgba(91, 79, 54, 0.5);\n}\n\n/* todo: adjust shadow for each component + change depending on dark mode or not */\n.fab, #shell-header {\n    box-shadow: 3px 3px 3px var(--shadow-color);\n}\n\n#toast-progress {\n    position: relative;\n    top: 5px;\n    left: 6px;\n    width: calc(100% - 12px);\n    border-radius: 8px;\n    background: transparent;\n    height: 10px;\n}\n\n#toast-progress::-moz-progress-bar {\n    /*background-color: red;*/\n    background: rgba(var(--color-secondary-500));\n}\n\n.dialog-box {\n    background-color: rgb(var(--color-surface-500) / 0.9);\n    position: fixed;\n    bottom: 0;\n    width: var(--dialog-box-width); /*75em + 4em padding*/\n    height: var(--dialog-box-height);\n    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));\n}\n\n.dark .dialog-box {\n    background-color: rgb(var(--color-surface-900) / 0.95);\n    --tw-ring-color: rgb(var(--color-text-400));\n    /*background-color: red;*/\n}\n\n.dark .ares-logo {\n    filter: invert(100%);\n}\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/src/lib/app.postcss b/src/lib/app.postcss
+--- a/src/lib/app.postcss	(revision 6a23be06c0482005bd0be5fdcf6f94083ed08c64)
++++ b/src/lib/app.postcss	(date 1711101285355)
+@@ -49,6 +49,10 @@
+     filter: grayscale(100%) brightness(0%) invert(100%);
+ }
+ 
++button {
++    color: var(--color-text-50);
++}
++
+ /*
+ 
+ //for reference left here
+Index: src/routes/(pineapple)/+page.svelte
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+><script>\n\timport { PUBLIC_CRINGE_USERNAME } from \"$env/static/public\";\n\n\n\timport { createGoToFunction } from \"$pkg/util/util\";\n\timport { Card } from \"$pkg\";\n</script>\n\n<svelte:head>\n\t<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>\n\t<meta content=\"Welcome to {PUBLIC_CRINGE_USERNAME}'s Home\" name=\"og:title\" />\n\t<meta\n\t\tcontent=\"Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!\"\n\t\tname=\"og:description\"\n\t/>\n</svelte:head>\n\n<Card>\n\t<div slot=\"content\" class=\"content\">\n\t\t<h1 class=\"mb-8\" style=\"font-weight: bolder\">Directory</h1>\n\n\t\t<div class=\"btn-group\">\n\t\t\t<button on:click={createGoToFunction(\"pineapple\")}><h2>Pineapple playground</h2></button>\n\t\t\t<button on:click={createGoToFunction(\"portfolio\")}><h2>Seaweed playrground</h2></button>\n\t\t</div>\n\t</div>\n</Card>\n\n<style lang=\"postcss\">\n    .btn-group {\n        padding: 2em;\n\t\t    display: flex;\n\t\t    gap: 2em;\n\t\t    flex-direction: column;\n\n    }\n\n    button {\n\t\t    @apply btn variant-filled-secondary;\n    }\n\n    .content {\n        padding: 2em;\n        text-align: center;\n    }\n</style>\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/src/routes/(pineapple)/+page.svelte b/src/routes/(pineapple)/+page.svelte
+--- a/src/routes/(pineapple)/+page.svelte	(revision 6a23be06c0482005bd0be5fdcf6f94083ed08c64)
++++ b/src/routes/(pineapple)/+page.svelte	(date 1711101419454)
+@@ -19,24 +19,23 @@
+ 	<div slot="content" class="content">
+ 		<h1 class="mb-8" style="font-weight: bolder">Directory</h1>
+ 
+-		<div class="btn-group">
++		<div class="turnip-menu">
+ 			<button on:click={createGoToFunction("pineapple")}><h2>Pineapple playground</h2></button>
+-			<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playrground</h2></button>
++			<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playground</h2></button>
+ 		</div>
+ 	</div>
+ </Card>
+ 
+ <style lang="postcss">
+-    .btn-group {
++    .turnip-menu {
+         padding: 2em;
+-		    display: flex;
+-		    gap: 2em;
+-		    flex-direction: column;
+-
++        display: flex;
++        gap: 2em;
++        flex-direction: column;
+     }
+ 
+     button {
+-		    @apply btn variant-filled-secondary;
++        @apply btn variant-filled-secondary;
+     }
+ 
+     .content {
+Index: src/routes/(pineapple)/pineapple/+page.svelte
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+><script lang=\"ts\">\n\timport { PUBLIC_CRINGE_USERNAME } from \"$env/static/public\";\n\timport { showComponentInToast, showTextInToast } from \"$pkg/components/pineapple/toast/Toast\";\n\timport TestCard from \"$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte\";\n\timport TestDialogYarn from \"./TestDialog.yarn?raw\";\n\timport { dialogManager } from \"$pkg\";\n\n\n\tlet testingQueueNumber = 1;\n\tconst testingRandomPhrases = [\n\t\t\"Niko\",\n\t\t\"Niko the Baikal seal\",\n\t\t\"Niko the Baikal seal\\nfrom Toba Aquarium\"\n\t];\n\tconst testDialogYarn = TestDialogYarn;\n\n\tlet parsed = false;\n\tconst onTestDialogClick = () => {\n\t\tif (!parsed) {\n\t\t\tdialogManager.parseAndSetDialogTree(testDialogYarn).then(() => {\n\t\t\t\tdialogManager.toggleDialogOverlay();\n\t\t\t});\n\t\t\tparsed = true;\n\t\t} else {\n\t\t\tdialogManager.toggleDialogOverlay();\n\t\t}\n\t};\n</script>\n\n<svelte:head>\n\t<title>Welcome to {PUBLIC_CRINGE_USERNAME}'s Home</title>\n\t<meta content=\"Welcome to {PUBLIC_CRINGE_USERNAME}'s Home\" name=\"og:title\" />\n\t<meta\n\t\tcontent=\"Welcome to {PUBLIC_CRINGE_USERNAME}'s home! It's a neat place to be at if you're feeling lost. Come hang around!\"\n\t\tname=\"og:description\"\n\t/>\n</svelte:head>\n\n<div class=\"card default-card\">\n\t<button\n\t\tclass=\"btn variant-filled-secondary\"\n\t\ton:click={() => {\n\t\t\tshowComponentInToast({componentAndProps: {component: TestCard, props: undefined}});\n\t\t}}><h3>Test custom toast</h3></button>\n\t<button\n\t\tclass=\"btn variant-filled-secondary\"\n\t\ton:click={() => {\n\t\t\tshowTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);\n\t\t\ttestingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;\n\t\t}}><h3>Handy toast</h3></button>\n\t<button\n\t\tclass=\"btn variant-filled-secondary\"\n\t\ton:click={onTestDialogClick}><h3>Test dialog</h3></button>\n</div>\n\n<style lang=\"postcss\">\n    .default-card {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 2em;\n    }\n</style>\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/src/routes/(pineapple)/pineapple/+page.svelte b/src/routes/(pineapple)/pineapple/+page.svelte
+--- a/src/routes/(pineapple)/pineapple/+page.svelte	(revision 6a23be06c0482005bd0be5fdcf6f94083ed08c64)
++++ b/src/routes/(pineapple)/pineapple/+page.svelte	(date 1711101466055)
+@@ -3,7 +3,7 @@
+ 	import { showComponentInToast, showTextInToast } from "$pkg/components/pineapple/toast/Toast";
+ 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
+ 	import TestDialogYarn from "./TestDialog.yarn?raw";
+-	import { dialogManager } from "$pkg";
++	import { Card, dialogManager } from "$pkg";
+ 
+ 
+ 	let testingQueueNumber = 1;
+@@ -36,22 +36,24 @@
+ 	/>
+ </svelte:head>
+ 
+-<div class="card default-card">
+-	<button
+-		class="btn variant-filled-secondary"
+-		on:click={() => {
++<Card>
++	<div slot="content" class="default-card">
++		<button
++			class="btn variant-filled-secondary"
++			on:click={() => {
+ 			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
+ 		}}><h3>Test custom toast</h3></button>
+-	<button
+-		class="btn variant-filled-secondary"
+-		on:click={() => {
++		<button
++			class="btn variant-filled-secondary"
++			on:click={() => {
+ 			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
+ 			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
+ 		}}><h3>Handy toast</h3></button>
+-	<button
+-		class="btn variant-filled-secondary"
+-		on:click={onTestDialogClick}><h3>Test dialog</h3></button>
+-</div>
++		<button
++			class="btn variant-filled-secondary"
++			on:click={onTestDialogClick}><h3>Test dialog</h3></button>
++	</div>
++</Card>
+ 
+ <style lang="postcss">
+     .default-card {

package/.idea/shelf/Changes.xml

@@ -0,0 +1,4 @@
+<changelist name="Changes" date="1711101484346" recycled="false">
+  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Changes/shelved.patch" />
+  <option name="DESCRIPTION" value="Changes" />
+</changelist>

package/.idea/workspace.xml

@@ -4,13 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix breadcrumb layout">
-      <change afterPath="$PROJECT_DIR$/src/routes/(pineapple)/about/+layout.server.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/routes/(pineapple)/about/+page.svelte" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/routes/(pineapple)/about/About.yarn" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/routes/(pineapple)/about/AboutYarn.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/app.postcss" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/app.postcss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Add external link warning stub">
+      <change beforePath="$PROJECT_DIR$/src/lib/util/util.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/util/util.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -47,7 +42,7 @@
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="main" />
+        <entry key="$PROJECT_DIR$" value="6a23be06c0482005bd0be5fdcf6f94083ed08c64" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -81,39 +76,39 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent"><![CDATA[{
-  "keyToString": {
-    "DefaultHtmlFileTemplate": "HTML File",
-    "RunOnceActivity.OpenProjectViewOnStart": "true",
-    "RunOnceActivity.ShowReadmeOnStart": "true",
-    "WebServerToolWindowFactoryState": "false",
-    "git-widget-placeholder": "turnip/dev",
-    "ignore.virus.scanning.warn.message": "true",
-    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/routes/(pineapple)/about",
-    "node.js.detected.package.eslint": "true",
-    "node.js.detected.package.tslint": "true",
-    "node.js.selected.package.eslint": "(autodetect)",
-    "node.js.selected.package.tslint": "(autodetect)",
-    "nodejs_interpreter_path": "node",
-    "nodejs_package_manager_path": "yarn",
-    "npm.build.executor": "Run",
-    "npm.dev (1).executor": "Run",
-    "npm.dev --open.executor": "Run",
-    "npm.dev offline.executor": "Run",
-    "npm.dev-offline.executor": "Run",
-    "npm.dev.executor": "Run",
-    "settings.editor.selected.configurable": "preferences.pluginManager",
-    "ts.external.directory.path": "C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib",
-    "vue.rearranger.settings.migration": "true"
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
+    &quot;git-widget-placeholder&quot;: &quot;turnip/dev&quot;,
+    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/Pumpkin/Projects/Web/pineapple/src/lib/assets/placeholder&quot;,
+    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
+    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
+    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
+    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
+    &quot;nodejs_interpreter_path&quot;: &quot;node&quot;,
+    &quot;nodejs_package_manager_path&quot;: &quot;yarn&quot;,
+    &quot;npm.build.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev (1).executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev --open.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev offline.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev-offline.executor&quot;: &quot;Run&quot;,
+    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
+    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
+    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Pumpkin\\Projects\\Web\\pineapple\\node_modules\\typescript\\lib&quot;,
+    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
   }
-}]]></component>
+}</component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\assets\placeholder" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\scripts\pineapple_fiber" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\about" />
@@ -154,10 +149,11 @@
     </list>
     <recent_temporary>
       <list>
-        <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
         <item itemvalue="npm.dev --open" />
+        <item itemvalue="npm.dev --open" />
         <item itemvalue="npm.dev-offline" />
+        <item itemvalue="npm.dev --open" />
       </list>
     </recent_temporary>
   </component>
@@ -218,31 +214,9 @@
       <workItem from="1710914868232" duration="41000" />
       <workItem from="1711051949931" duration="144000" />
       <workItem from="1711052377810" duration="128000" />
-      <workItem from="1711090540281" duration="7097000" />
-    </task>
-    <task id="LOCAL-00033" summary="Finalize available content for portfolio">
-      <option name="closed" value="true" />
-      <created>1710007096175</created>
-      <option name="number" value="00033" />
-      <option name="presentableId" value="LOCAL-00033" />
-      <option name="project" value="LOCAL" />
-      <updated>1710007096175</updated>
-    </task>
-    <task id="LOCAL-00034" summary="Quick fix ares logo missing class">
-      <option name="closed" value="true" />
-      <created>1710007320331</created>
-      <option name="number" value="00034" />
-      <option name="presentableId" value="LOCAL-00034" />
-      <option name="project" value="LOCAL" />
-      <updated>1710007320331</updated>
-    </task>
-    <task id="LOCAL-00035" summary="Fix light-dark theming">
-      <option name="closed" value="true" />
-      <created>1710093358574</created>
-      <option name="number" value="00035" />
-      <option name="presentableId" value="LOCAL-00035" />
-      <option name="project" value="LOCAL" />
-      <updated>1710093358574</updated>
+      <workItem from="1711090540281" duration="11162000" />
+      <workItem from="1711104214619" duration="25000" />
+      <workItem from="1711108187279" duration="358000" />
     </task>
     <task id="LOCAL-00036" summary="Fix broken string width resolution">
       <option name="closed" value="true" />
@@ -612,7 +586,31 @@
       <option name="project" value="LOCAL" />
       <updated>1711096829327</updated>
     </task>
-    <option name="localTasksCounter" value="82" />
+    <task id="LOCAL-00082" summary="Fix default card postcss style">
+      <option name="closed" value="true" />
+      <created>1711098795806</created>
+      <option name="number" value="00082" />
+      <option name="presentableId" value="LOCAL-00082" />
+      <option name="project" value="LOCAL" />
+      <updated>1711098795806</updated>
+    </task>
+    <task id="LOCAL-00083" summary="Adjust turnip fab button color">
+      <option name="closed" value="true" />
+      <created>1711101211481</created>
+      <option name="number" value="00083" />
+      <option name="presentableId" value="LOCAL-00083" />
+      <option name="project" value="LOCAL" />
+      <updated>1711101211481</updated>
+    </task>
+    <task id="LOCAL-00084" summary="Replace btn-group postcss class with turnip-menu&#10;&#10;There is postcss defined class called btn-group which has styles that have !important, which I accidentally used not knowing it exists, and it overrides whatever styles I apply on my class">
+      <option name="closed" value="true" />
+      <created>1711101645201</created>
+      <option name="number" value="00084" />
+      <option name="presentableId" value="LOCAL-00084" />
+      <option name="project" value="LOCAL" />
+      <updated>1711101645201</updated>
+    </task>
+    <option name="localTasksCounter" value="85" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -670,10 +668,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Change lib to pkg to prevent the references from breaking from downstream apps" />
-    <MESSAGE value="Add data-nosnippet" />
-    <MESSAGE value="Fix wrong link in migrante" />
-    <MESSAGE value="Reorganize directories to make Pineapple as default layout but still overrideable by Seaweed" />
     <MESSAGE value="Improve text contrast" />
     <MESSAGE value="Improve text contrast in dark mode" />
     <MESSAGE value="Add animation to dynamically added button in social section" />
@@ -695,6 +689,10 @@
     <MESSAGE value="Refactor all util functions into util/util" />
     <MESSAGE value="v2.4.19" />
     <MESSAGE value="Fix breadcrumb layout" />
-    <option name="LAST_COMMIT_MESSAGE" value="Fix breadcrumb layout" />
+    <MESSAGE value="Fix default card postcss style" />
+    <MESSAGE value="Adjust turnip fab button color" />
+    <MESSAGE value="Replace btn-group postcss class with turnip-menu&#10;&#10;There is postcss defined class called btn-group which has styles that have !important, which I accidentally used not knowing it exists, and it overrides whatever styles I apply on my class" />
+    <MESSAGE value="Add external link warning stub" />
+    <option name="LAST_COMMIT_MESSAGE" value="Add external link warning stub" />
   </component>
 </project>

package/.svelte-kit/__package__/app.postcss

@@ -45,8 +45,16 @@ html, body {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
+.turnip-icon {
+    filter: brightness(0%) invert(90%);
+}
+
 .dark .turnip-button > img, .dark .img-icon {
-    filter: grayscale(100%) brightness(0%) invert(100%);
+    filter: brightness(0%) invert(100%);
+}
+
+button {
+    color: var(--color-text-50);
 }
 
 /*

package/.svelte-kit/__package__/components/pineapple/PineappleBaseLayout.svelte

@@ -4,7 +4,7 @@ import RandomizedBackground from "../RandomizedBackground.svelte";
 import { page } from "$app/stores";
 import { enableBackground } from "../../store";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
-import FABIcon from "../../assets/placeholder/placeholder_circle.png";
+import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 import CloseIcon from "../../assets/icons/close.svg";
 import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 import Toast from "./toast/Toast.svelte";
@@ -53,13 +53,13 @@ enableDialogueOverlay.set(showDialogByDefault);
 </svelte:head>
 
 <!--todo: turn off hidden when it's time-->
-<button type="button" class="fab" on:click={()=>{
+<button class="fab" on:click={()=>{
 	dialogManager.toggleDialogOverlay()
 }}>
 	{#if (enableDialogueOverlayValue)}
-		<img class="img-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
 	{:else }
-		<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+		<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
 	{/if}
 </button>
 
@@ -83,7 +83,7 @@ enableDialogueOverlay.set(showDialogByDefault);
 						{#if i < pages.length - 1}
 							<li class="crumb" in:fade>
 								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
-							  &nbsp;&rsaquo;&nbsp;
+								&nbsp;&rsaquo;&nbsp;
 							</li>
 						{:else}
 							<li class="crumb" in:fade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
@@ -165,7 +165,7 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: flex;
         align-items: center;
         justify-content: center;
-		    margin: 0.1em;
+        margin: 0.1em;
 }
 
     .crumb-separator {
@@ -192,7 +192,79 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: block;
 }
 
+    :is(.dark .fab) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    .fab:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .fab:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .fab:disabled:active {
+        --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));
+}
+
+    .fab {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .fab > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .fab:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .fab:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        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));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
     .fab {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    :is(.dark .fab) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    .fab {
+        padding: 0;
         position: fixed;
         bottom: var(--fab-margin);
         width: 4em;
@@ -210,4 +282,8 @@ enableDialogueOverlay.set(showDialogByDefault);
     .fab:dir(rtl) {
         left: var(--fab-margin);
     }
+
+    .turnip-icon {
+		    margin: 4px;
+    }
 </style>

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

@@ -1,3 +1,7 @@
 export declare const generatedDailySeed: () => number;
 export declare const mulberry32Generator: (a: number) => (() => number);
 export declare const createGoToFunction: (path: string) => (() => void);
+export interface ExternalLinkWarningArgs {
+    href: string;
+}
+export declare const createExternalLinkWarningFunction: (args: ExternalLinkWarningArgs) => (() => void);

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

@@ -18,3 +18,10 @@ export const createGoToFunction = (path) => {
         location.href = path;
     });
 };
+export const createExternalLinkWarningFunction = (args) => {
+    return (() => {
+        // todo: https://github.com/TurnipXenon/pineapple/issues/99
+        //  add the warning here for future functions
+        location.href = args.href;
+    });
+};

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: "lfp8bi"
+	version_hash: "1h70f76"
 };
 
 export async function get_hooks() {

package/dist/app.postcss

@@ -45,8 +45,16 @@ html, body {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
+.turnip-icon {
+    filter: brightness(0%) invert(90%);
+}
+
 .dark .turnip-button > img, .dark .img-icon {
-    filter: grayscale(100%) brightness(0%) invert(100%);
+    filter: brightness(0%) invert(100%);
+}
+
+button {
+    color: var(--color-text-50);
 }
 
 /*

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -4,7 +4,7 @@ import RandomizedBackground from "../RandomizedBackground.svelte";
 import { page } from "$app/stores";
 import { enableBackground } from "../../store";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
-import FABIcon from "../../assets/placeholder/placeholder_circle.png";
+import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 import CloseIcon from "../../assets/icons/close.svg";
 import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 import Toast from "./toast/Toast.svelte";
@@ -53,13 +53,13 @@ enableDialogueOverlay.set(showDialogByDefault);
 </svelte:head>
 
 <!--todo: turn off hidden when it's time-->
-<button type="button" class="fab" on:click={()=>{
+<button class="fab" on:click={()=>{
 	dialogManager.toggleDialogOverlay()
 }}>
 	{#if (enableDialogueOverlayValue)}
-		<img class="img-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
 	{:else }
-		<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+		<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
 	{/if}
 </button>
 
@@ -83,7 +83,7 @@ enableDialogueOverlay.set(showDialogByDefault);
 						{#if i < pages.length - 1}
 							<li class="crumb" in:fade>
 								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
-							  &nbsp;&rsaquo;&nbsp;
+								&nbsp;&rsaquo;&nbsp;
 							</li>
 						{:else}
 							<li class="crumb" in:fade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
@@ -165,7 +165,7 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: flex;
         align-items: center;
         justify-content: center;
-		    margin: 0.1em;
+        margin: 0.1em;
 }
 
     .crumb-separator {
@@ -192,7 +192,79 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: block;
 }
 
+    :is(.dark .fab) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    .fab:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .fab:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .fab:disabled:active {
+        --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));
+}
+
+    .fab {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        border-radius: var(--theme-rounded-base);
+}
+
+    .fab > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .fab:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .fab:active {
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        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));
+        --tw-brightness: brightness(.9);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
     .fab {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    :is(.dark .fab) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    .fab {
+        padding: 0;
         position: fixed;
         bottom: var(--fab-margin);
         width: 4em;
@@ -210,4 +282,8 @@ enableDialogueOverlay.set(showDialogByDefault);
     .fab:dir(rtl) {
         left: var(--fab-margin);
     }
+
+    .turnip-icon {
+		    margin: 4px;
+    }
 </style>

package/dist/util/util.d.ts

@@ -1,3 +1,7 @@
 export declare const generatedDailySeed: () => number;
 export declare const mulberry32Generator: (a: number) => (() => number);
 export declare const createGoToFunction: (path: string) => (() => void);
+export interface ExternalLinkWarningArgs {
+    href: string;
+}
+export declare const createExternalLinkWarningFunction: (args: ExternalLinkWarningArgs) => (() => void);

package/dist/util/util.js

@@ -18,3 +18,10 @@ export const createGoToFunction = (path) => {
         location.href = path;
     });
 };
+export const createExternalLinkWarningFunction = (args) => {
+    return (() => {
+        // todo: https://github.com/TurnipXenon/pineapple/issues/99
+        //  add the warning here for future functions
+        location.href = args.href;
+    });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.21",
+  "version": "2.4.23",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/app.postcss

@@ -45,8 +45,16 @@ html, body {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
+.turnip-icon {
+    filter: brightness(0%) invert(90%);
+}
+
 .dark .turnip-button > img, .dark .img-icon {
-    filter: grayscale(100%) brightness(0%) invert(100%);
+    filter: brightness(0%) invert(100%);
+}
+
+button {
+    color: var(--color-text-50);
 }
 
 /*

package/src/lib/components/pineapple/PineappleBaseLayout.svelte

@@ -13,7 +13,7 @@
 	// assets
 	// import DialogOverlay from "$lib/components/DialogOverlay.svelte";
 	import AresLogo from "$pkg/assets/characters/ares/ares_logo.webp";
-	import FABIcon from "$pkg/assets/placeholder/placeholder_circle.png";
+	import FABIcon from "$pkg/assets/bg_tiled/bg_tiled_turnip.png";
 	import CloseIcon from "$pkg/assets/icons/close.svg";
 	import { dialogManager, enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
 	import Toast from "$pkg/components/pineapple/toast/Toast.svelte";
@@ -70,13 +70,13 @@
 </svelte:head>
 
 <!--todo: turn off hidden when it's time-->
-<button type="button" class="fab" on:click={()=>{
+<button class="fab" on:click={()=>{
 	dialogManager.toggleDialogOverlay()
 }}>
 	{#if (enableDialogueOverlayValue)}
-		<img class="img-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
 	{:else }
-		<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+		<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
 	{/if}
 </button>
 
@@ -100,7 +100,7 @@
 						{#if i < pages.length - 1}
 							<li class="crumb" in:fade>
 								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
-							  &nbsp;&rsaquo;&nbsp;
+								&nbsp;&rsaquo;&nbsp;
 							</li>
 						{:else}
 							<li class="crumb" in:fade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
@@ -174,7 +174,7 @@
 
     .crumb {
         @apply flex justify-center items-center;
-		    margin: 0.1em;
+        margin: 0.1em;
     }
 
     .crumb-separator {
@@ -195,6 +195,8 @@
     }
 
     .fab {
+        @apply btn variant-filled-tertiary;
+        padding: 0;
         position: fixed;
         bottom: var(--fab-margin);
         width: 4em;
@@ -212,4 +214,8 @@
     .fab:dir(rtl) {
         left: var(--fab-margin);
     }
+
+    .turnip-icon {
+		    margin: 4px;
+    }
 </style>

package/src/lib/util/util.ts

@@ -19,4 +19,16 @@ export const createGoToFunction = (path: string): (() => void) => {
 	return (() => {
 		location.href = path;
 	});
-};
+};
+
+export interface ExternalLinkWarningArgs {
+	href: string;
+}
+
+export const createExternalLinkWarningFunction = (args: ExternalLinkWarningArgs): (() => void) => {
+	return (() => {
+		// todo: https://github.com/TurnipXenon/pineapple/issues/99
+		//  add the warning here for future functions
+		location.href = args.href;
+	});
+};

package/src/routes/(pineapple)/+page.svelte

@@ -19,24 +19,23 @@
 	<div slot="content" class="content">
 		<h1 class="mb-8" style="font-weight: bolder">Directory</h1>
 
-		<div class="btn-group">
+		<div class="turnip-menu">
 			<button on:click={createGoToFunction("pineapple")}><h2>Pineapple playground</h2></button>
-			<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playrground</h2></button>
+			<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playground</h2></button>
 		</div>
 	</div>
 </Card>
 
 <style lang="postcss">
-    .btn-group {
+    .turnip-menu {
         padding: 2em;
-		    display: flex;
-		    gap: 2em;
-		    flex-direction: column;
-
+        display: flex;
+        gap: 2em;
+        flex-direction: column;
     }
 
     button {
-		    @apply btn variant-filled-secondary;
+        @apply btn variant-filled-secondary;
     }
 
     .content {

package/src/routes/(pineapple)/pineapple/+page.svelte

@@ -3,7 +3,7 @@
 	import { showComponentInToast, showTextInToast } from "$pkg/components/pineapple/toast/Toast";
 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
 	import TestDialogYarn from "./TestDialog.yarn?raw";
-	import { dialogManager } from "$pkg";
+	import { Card, dialogManager } from "$pkg";
 
 
 	let testingQueueNumber = 1;
@@ -36,22 +36,24 @@
 	/>
 </svelte:head>
 
-<div class="card default-card">
-	<button
-		class="btn variant-filled-secondary"
-		on:click={() => {
+<Card>
+	<div slot="content" class="default-card">
+		<button
+			class="btn variant-filled-secondary"
+			on:click={() => {
 			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
 		}}><h3>Test custom toast</h3></button>
-	<button
-		class="btn variant-filled-secondary"
-		on:click={() => {
+		<button
+			class="btn variant-filled-secondary"
+			on:click={() => {
 			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
 			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
 		}}><h3>Handy toast</h3></button>
-	<button
-		class="btn variant-filled-secondary"
-		on:click={onTestDialogClick}><h3>Test dialog</h3></button>
-</div>
+		<button
+			class="btn variant-filled-secondary"
+			on:click={onTestDialogClick}><h3>Test dialog</h3></button>
+	</div>
+</Card>
 
 <style lang="postcss">
     .default-card {