@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.10

package/src/lib/styles/app.css

@@ -1,20 +1,19 @@
-@import 'tailwindcss';
-@import "@skeletonlabs/skeleton";
-@import "@skeletonlabs/skeleton/optional/presets";
-@import "@skeletonlabs/skeleton/themes/crimson";
+@import "./tailwind.css";
+@import "./color-tokens.css";
 @import "./turnip-theme.css";
 
-@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@custom-variant turnip (&:where([data-theme=turnip], [data-theme=turnip] *));
-
 html {
     --dialog-start-pad: clamp(0em, 5vw, 2em);
-    --dialog-box-width: min(calc(54em), calc(100vw - var(--dialog-start-pad) - 2px));
+    --dialog-box-width: 54em;
     --dialog-box-height: clamp(15em, 50vw, 18em);
     --fab-margin: 1rem;
+
+
+    /* spacing calcs */
+    --spacing-1: calc(var(--spacing) * 1);
+    --spacing-2: calc(var(--spacing) * 2);
+    --spacing-3: calc(var(--spacing) * 3);
+    --spacing-4: calc(var(--spacing) * 4);
 }
 
 .footer-space {
@@ -22,7 +21,7 @@ html {
     height: calc(var(--dialog-box-height) + 4em);
 }
 
-.dialog-box a, .dialog-box b, .dialog-box i {
+.main-dialog-box-container a, .main-dialog-box-container b, .main-dialog-box-container i {
     font-size: inherit;
 }
 
@@ -51,11 +50,18 @@ a.external-link {
 
 @layer base {
     .game-link-section {
-        @apply mt-6 flex gap-2 justify-center;
+        margin-top: calc(var(--spacing) * 6);
+        display: flex;
+        gap: calc(var(--spacing) * 2);
+        justify-content: center;
     }
 
     .game-video-cover {
-        @apply rounded-t-lg max-h-64 object-cover w-full;
+        border-top-left-radius: var(--radius-lg);
+        border-top-right-radius: var(--radius-lg);
+        max-height: calc(var(--spacing) * 64);
+        object-fit: cover;
+        width: 100%;
     }
 
     .text-chip-container {
@@ -122,19 +128,20 @@ pre button.copy {
 
     & .ready {
         background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
-
-        @variant dark {
-            background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");
-        }
+        /*todo*/
+        /*@variant dark {*/
+        /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
+        /*}*/
     }
 
     & .success {
         display: none;
         background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
 
-        @variant dark {
-            background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");
-        }
+        /*todo: migration*/
+        /*@variant dark {*/
+        /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
+        /*}*/
     }
 
     &.copied {
@@ -149,3 +156,16 @@ pre button.copy {
 }
 
 /* endregion shiki copy button */
+
+
+ul + h2, ol + h2 {
+    margin-top: 1rlh;
+}
+
+.default-flex {
+    display: flex;
+    gap: 0.5lh;
+    flex-direction: column;
+}
+
+/* endregion general styles */

package/dist/ui/modules/dialog_overlay/DialogOverlay.svelte

@@ -1,239 +0,0 @@
-<script lang="ts">
-	import { slide } from "svelte/transition";
-	import { onMount } from "svelte";
-
-	import AresHappy from "../../../assets/characters/ares/ares_happy.webp";
-	import { DialogState } from "../../../types/pineapple_fiber/DialogState";
-	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
-	import PinyaCard from "../../elements/PinyaCard/PinyaCard.svelte";
-	import { appState } from "../../templates/PinyaPageLayout/runes.svelte";
-	import CloseIcon from "../../../assets/icons/close.svg";
-	import FABIcon from "../../../assets/bg_tiled/bg_tiled_turnip.png";
-	import { enableDialogueOverlay } from "../../../components/dialog_manager/DialogManagerStore";
-	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
-
-	let currentMessage = $state("");
-	let currentPortrait = $state(AresHappy);
-	let isMounted = $state(false);
-
-	let hidePercent = $state(100);
-	let isHidden = $state(true);
-	onMount(() => {
-
-		dialogManager.currentMessage.subscribe((value) => {
-			currentMessage = value;
-		});
-
-		dialogManager.currentPortrait.subscribe((value) => {
-			console.log("sub value", value);
-			if (value) {
-				currentPortrait = value;
-			}
-		});
-
-		dialogManager.hidePercent.subscribe((value) => {
-			hidePercent = value * 0.4;
-			isHidden = false;
-		});
-
-		dialogManager.currentReadableState.subscribe((value) => {
-			isHidden = value === DialogState.Invisible;
-		});
-
-		console.log("CAlling update");
-		dialogManager.update(0);
-		isMounted = true;
-
-	});
-
-	const onDialogClick = () => {
-		dialogManager?.skipAnimation();
-	};
-
-	let enableDialogueOverlayValue = $state(true);
-	enableDialogueOverlay.subscribe((value) => {
-		enableDialogueOverlayValue = value;
-	});
-
-	enableDialogueOverlay.set(appState.enableDialogOnByDefault ?? false);
-</script>
-
-<div class="dialog-elements"
-     hidden={isHidden}
-     style="--hidePercentWidth: -{hidePercent}vw;
-            --hidePercentHeight: {hidePercent}vh;">
-	<div class="dialog-portrait-container">
-		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
-	</div>
-	<div
-		tabindex="0"
-		role="button"
-		class="dialog-box"
-		onclick={onDialogClick}
-		onkeyup={(e) => {
-			if (e.key === 'j') {
-				onDialogClick()
-;			}
-		}}
-	>
-		<PinyaCard
-			widthClass=""
-			paddingClass=""
-			className="dialog-name"
-		>
-			<div class="fake-h1">Turnip</div>
-		</PinyaCard>
-		<PinyaCard
-			widthClass="w-full"
-			className="dialog-text"
-			colorClass=""
-			flexClass=""
-		>
-			<!-- Made for 140 characters, like the original tweets -->
-			{@html currentMessage}
-		</PinyaCard>
-	</div>
-</div>
-
-
-{#if appState.allowDialog && isMounted}
-	<div class="fab-container" transition:slide>
-		<PinyaButton
-			classes="fab"
-			onclick={()=>{dialogManager.toggleDialogOverlay();}}
-		>
-			{#if (enableDialogueOverlayValue)}
-				<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
-			{:else }
-				<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">
-			{/if}
-		</PinyaButton>
-	</div>
-{/if}
-
-<style>
-    :global(.dialog-text) {
-        height: 100%;
-        padding: 0.8lh 2rem 0.5lh;
-    }
-
-    :global(.dialog-text) {
-        font-size: clamp(1rem, 3vw, 1.75rem);
-        line-height: calc(clamp(1rem, 3vw, 1.75rem) * 1.5);
-    }
-
-    .dialog-elements {
-        position: fixed;
-        z-index: 10;
-    }
-
-    .dialog-elements:dir(ltr) {
-        left: 0;
-    }
-
-    .dialog-elements:dir(rtl) {
-        right: 0;
-    }
-
-    .dialog-elements > div {
-        transform: translateY(var(--hidePercentHeight));
-    }
-
-    :global(.dialog-name) {
-        padding-left: 2rem;
-        padding-right: 2rem;
-        position: fixed;
-    }
-
-    :global(.dialog-name:dir(ltr)) {
-        /* for centering vertically */
-        transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
-    }
-
-    :global(.dialog-name:dir(rtl)) {
-        /* for centering vertically */
-        transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
-    }
-
-    .dialog-portrait-container {
-        position: fixed;
-        bottom: 0;
-        height: clamp(30rem, 75vw, 40rem);
-        width: auto;
-    }
-
-    .dialog-portrait-container:dir(ltr) {
-        transform: translateX(var(--hidePercentWidth));
-        left: clamp(-4rem, calc(5vw - 5em), 0rem);
-    }
-
-    .dialog-portrait-container:dir(rtl) {
-        transform: translateX(calc(var(--hidePercentWidth) * -1));
-        right: clamp(-4rem, calc(5vw - 5em), 0rem);
-    }
-
-    .dialog-portrait {
-        height: 100%;
-    }
-
-    .dialog-portrait:dir(rtl) {
-        transform: scaleX(-1);
-    }
-
-    :global(html) {
-        --bg-dialog: rgba(255, 247, 225, 0.9);
-    }
-
-    :global(html.dark) {
-        --bg-dialog: rgba(76, 71, 59, 0.9);
-    }
-
-    .dialog-box {
-        background-color: var(--bg-dialog);
-        position: fixed;
-        bottom: 0;
-        width: var(--dialog-box-width); /*75em + 4em padding*/
-        height: var(--dialog-box-height);
-        max-width: calc(100vw - ((var(--fab-margin) * 3) + (clamp(2rem, 5vw, 4rem))));
-        border-radius: 1rem;
-    }
-
-    :global(.fab) {
-		    position: relative;
-        transform: scale3d(1, 1, 1.5);
-        background-color: var(--color-tertiary-500);
-        padding: 0.3rem;
-        width: clamp(2rem, 5vw, 4rem);
-        border-radius: 50%;
-        z-index: 100;
-        box-shadow: 3px 3px 3px var(--shadow-color);
-        margin-bottom: var(--fab-margin);
-    }
-
-    .fab-container {
-        position: fixed;
-        bottom: 0;
-    }
-
-    .fab-container:dir(ltr) {
-        right: 0;
-    }
-
-    .fab-container:dir(rtl) {
-        left: 0;
-    }
-
-    :global(.fab > img) {
-        width: 100%;
-        filter: brightness(0) invert(1);
-    }
-
-    :global(.fab:dir(ltr)) {
-        margin-right: var(--fab-margin);
-    }
-
-    :global(.fab:dir(rtl)) {
-        margin-left: var(--fab-margin);
-    }
-
-</style>

package/dist/ui/modules/dialog_overlay/DialogOverlay.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const DialogOverlay: import("svelte").Component<Record<string, never>, {}, "">;
-type DialogOverlay = ReturnType<typeof DialogOverlay>;
-export default DialogOverlay;