@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha.1

package/src/lib/styles/app.css

@@ -0,0 +1,53 @@
+@import 'tailwindcss';
+@import "@skeletonlabs/skeleton";
+@import "@skeletonlabs/skeleton/optional/presets";
+@import "@skeletonlabs/skeleton/themes/crimson";
+@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] *));
+
+.footer-space {
+    width: 100%;
+    height: calc(var(--dialog-box-height) + 4em);
+}
+
+a.dialog-choice {
+    cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
+}
+
+a.external-link {
+    cursor: url("$pkg/assets/icons/external-link.svg"), auto;
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    background: rgba(var(--color-secondary-500));
+}
+
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --tw-ring-color: rgb(var(--color-text-400));
+    /*background-color: red;*/
+}

package/src/lib/theme.css

@@ -0,0 +1,114 @@
+@tailwind variants;
+
+/*todo: delete after all downstream works #migration*/
+:root {
+    /* =~= Theme Properties =~= */
+    --theme-font-family-base: system-ui;
+    --theme-font-family-heading: system-ui;
+    --theme-font-color-base: var(--color-primary-900);
+    --theme-font-color-dark: var(--color-primary-50);
+    --theme-rounded-base: 24px;
+    --theme-rounded-container: 16px;
+    --theme-border-base: 2px;
+    /* =~= Theme On-X Colors =~= */
+    --on-primary: var(--color-text-900);
+    --on-secondary: var(--color-surface-500);
+    --on-tertiary: var(--color-text-900);
+    --on-success: var(--color-text-900);
+    --on-warning: var(--color-text-900);
+    --on-error: var(--color-surface-500);
+    --on-surface: var(--color-text-900);
+    /* =~= Theme Colors  =~= */
+    /* primary | #b9a26e */
+    --color-primary-50: 245 241 233; /* ⬅ #f5f1e9 */
+    --color-primary-100: 241 236 226; /* ⬅ #f1ece2 */
+    --color-primary-200: 238 232 219; /* ⬅ #eee8db */
+    --color-primary-300: 227 218 197; /* ⬅ #e3dac5 */
+    --color-primary-400: 206 190 154; /* ⬅ #cebe9a */
+    --color-primary-500: 185 162 110; /* ⬅ #b9a26e */
+    --color-primary-600: 167 146 99; /* ⬅ #a79263 */
+    --color-primary-700: 139 122 83; /* ⬅ #8b7a53 */
+    --color-primary-800: 111 97 66; /* ⬅ #6f6142 */
+    --color-primary-900: 91 79 54; /* ⬅ #5b4f36 */
+    --color-primary-1000: 66 54 29; /* ⬅ #42361d */
+    /* secondary | #b55639 */
+    --color-secondary-50: 244 230 225; /* ⬅ #f4e6e1 */
+    --color-secondary-100: 240 221 215; /* ⬅ #f0ddd7 */
+    --color-secondary-200: 237 213 206; /* ⬅ #edd5ce */
+    --color-secondary-300: 225 187 176; /* ⬅ #e1bbb0 */
+    --color-secondary-350: 214 162 146; /* ⬅ #D6A292 */
+    --color-secondary-400: 203 137 116; /* ⬅ #cb8974 */
+    --color-secondary-450: 192 112 87; /* ⬅ #C07057 */
+    --color-secondary-500: 181 86 57; /* ⬅ #b55639 */
+    --color-secondary-600: 163 77 51; /* ⬅ #a34d33 */
+    --color-secondary-700: 136 65 43; /* ⬅ #88412b */
+    --color-secondary-800: 109 52 34; /* ⬅ #6d3422 */
+    --color-secondary-900: 89 42 28; /* ⬅ #592a1c */
+    /* tertiary | #cd7949 */
+    --color-tertiary-50: 248 235 228; /* ⬅ #f8ebe4 */
+    --color-tertiary-100: 245 228 219; /* ⬅ #f5e4db */
+    --color-tertiary-200: 243 222 210; /* ⬅ #f3ded2 */
+    --color-tertiary-300: 235 201 182; /* ⬅ #ebc9b6 */
+    --color-tertiary-400: 220 161 128; /* ⬅ #dca180 */
+    --color-tertiary-500: 205 121 73; /* ⬅ #cd7949 */
+    --color-tertiary-600: 185 109 66; /* ⬅ #b96d42 */
+    --color-tertiary-700: 154 91 55; /* ⬅ #9a5b37 */
+    --color-tertiary-800: 123 73 44; /* ⬅ #7b492c */
+    --color-tertiary-900: 100 59 36; /* ⬅ #643b24 */
+    /* success | #7cab36 */
+    --color-success-50: 235 242 225; /* ⬅ #ebf2e1 */
+    --color-success-100: 229 238 215; /* ⬅ #e5eed7 */
+    --color-success-200: 222 234 205; /* ⬅ #deeacd */
+    --color-success-300: 203 221 175; /* ⬅ #cbddaf */
+    --color-success-400: 163 196 114; /* ⬅ #a3c472 */
+    --color-success-500: 124 171 54; /* ⬅ #7cab36 */
+    --color-success-600: 112 154 49; /* ⬅ #709a31 */
+    --color-success-700: 93 128 41; /* ⬅ #5d8029 */
+    --color-success-800: 74 103 32; /* ⬅ #4a6720 */
+    --color-success-900: 61 84 26; /* ⬅ #3d541a */
+    /* warning | #b8993a */
+    --color-warning-50: 244 240 225; /* ⬅ #f4f0e1 */
+    --color-warning-100: 241 235 216; /* ⬅ #f1ebd8 */
+    --color-warning-200: 237 230 206; /* ⬅ #ede6ce */
+    --color-warning-300: 227 214 176; /* ⬅ #e3d6b0 */
+    --color-warning-400: 205 184 117; /* ⬅ #cdb875 */
+    --color-warning-500: 184 153 58; /* ⬅ #b8993a */
+    --color-warning-600: 166 138 52; /* ⬅ #a68a34 */
+    --color-warning-700: 138 115 44; /* ⬅ #8a732c */
+    --color-warning-800: 110 92 35; /* ⬅ #6e5c23 */
+    --color-warning-900: 90 75 28; /* ⬅ #5a4b1c */
+    /* error | #b53977 */
+    --color-error-50: 244 225 235; /* ⬅ #f4e1eb */
+    --color-error-100: 240 215 228; /* ⬅ #f0d7e4 */
+    --color-error-200: 237 206 221; /* ⬅ #edcedd */
+    --color-error-300: 225 176 201; /* ⬅ #e1b0c9 */
+    --color-error-400: 203 116 160; /* ⬅ #cb74a0 */
+    --color-error-500: 181 57 119; /* ⬅ #b53977 */
+    --color-error-600: 163 51 107; /* ⬅ #a3336b */
+    --color-error-700: 136 43 89; /* ⬅ #882b59 */
+    --color-error-800: 109 34 71; /* ⬅ #6d2247 */
+    --color-error-900: 89 28 58; /* ⬅ #591c3a */
+    /* surface | #fff7e3 */
+    --color-surface-50: 255 254 251; /* ⬅ #fffefb */
+    --color-surface-100: 255 253 249; /* ⬅ #fffdf9 */
+    --color-surface-200: 255 253 248; /* ⬅ #fffdf8 */
+    --color-surface-300: 255 252 244; /* ⬅ #fffcf4 */
+    --color-surface-400: 255 249 235; /* ⬅ #fff9eb */
+    --color-surface-500: 255 247 227; /* ⬅ #fff7e3 */
+    --color-surface-600: 230 222 204; /* ⬅ #e6decc */
+    --color-surface-700: 191 185 170; /* ⬅ #bfb9aa */
+    --color-surface-800: 153 148 136; /* ⬅ #999488 */
+    --color-surface-900: 125 121 111; /* ⬅ #7d796f */
+    /* text color | #3f312f */
+    --color-text-25: 237 234 234; /* ⬅ #e2e0e0 */
+    --color-text-50: 226 224 224; /* ⬅ #e2e0e0 */
+    --color-text-100: 217 214 213; /* ⬅ #d9d6d5 */
+    --color-text-200: 207 204 203; /* ⬅ #cfcccb */
+    --color-text-300: 178 173 172; /* ⬅ #b2adac */
+    --color-text-400: 121 111 109; /* ⬅ #796f6d */
+    --color-text-500: 63 49 47; /* ⬅ #3f312f */
+    --color-text-600: 57 44 42; /* ⬅ #392c2a */
+    --color-text-700: 47 37 35; /* ⬅ #2f2523 */
+    --color-text-800: 38 29 28; /* ⬅ #261d1c */
+    --color-text-900: 31 24 23; /* ⬅ #1f1817 */
+}

package/dist/app.postcss

@@ -1,212 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-@tailwind variants;
-
-/* (all other styles below) */
-
-/*place global styles here */
-:root {
-    --default-card-max-width: calc(4rem + 4rem + 40rem);
-}
-
-html, body {
-    @apply h-full overflow-hidden;
-    @apply bg-surface-400 dark:bg-surface-800;
-    background-color: transparent;
-}
-
-/* font color */
-html, body {
-    color: rgb(var(--theme-font-color-base));
-}
-
-.accordion-panel {
-    color: rgb(var(--color-primary-1000));
-}
-
-.dark body,
-.dark .variant-filled-primary,
-.dark .turnip-button,
-.dark .turnip-button > span,
-.dark .accordion-panel,
-.dark button.accordion-control,
-.chip, .dark .chip {
-    color: rgb(var(--theme-font-color-dark));
-}
-
-.turnip-button, .turnip-button > span, button.accordion-control {
-    font-weight: bold;
-    color: rgb(var(--theme-font-color-base));
-}
-
-/* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
-.turnip-button > img, .img-icon {
-    filter: grayscale(100%) brightness(0%) invert(25%);
-}
-
-.turnip-icon {
-    filter: brightness(0%) invert(90%);
-}
-
-.dark .turnip-button > img, .dark .img-icon {
-    filter: brightness(0%) invert(100%);
-}
-
-button {
-    color: var(--color-text-50);
-}
-
-/*
-
-//for reference left here
-
-.bg-surface-custom-token {
-    @apply bg-surface-200 dark:bg-surface-700;
-}
-
-.app-bar {
-    @apply bg-surface-custom-token;
-}
-*/
-
-.default-card {
-    padding: 2em;
-    text-align: start;
-    max-width: var(--default-card-max-width);
-}
-
-h1,
-h2,
-p {
-    margin-bottom: 0.5em;
-}
-
-ul {
-    list-style-type: circle;
-    padding-left: 1em;
-}
-
-.default-page-container {
-    @apply flex justify-center items-center;
-    margin-top: 4em;
-    margin-left: 1em;
-    margin-right: 1em;
-    flex-direction: column;
-    z-index: 0;
-}
-
-.footer-space {
-    width: 100%;
-    height: calc(var(--dialog-box-height) + 4em);
-}
-
-a.dialog-choice {
-    cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
-}
-
-a.external-link {
-    cursor: url("$pkg/assets/icons/external-link.svg"), auto;
-}
-
-blockquote {
-    font-style: italic;
-    opacity: 60%;
-    font-weight: bold;
-}
-
-/* todo: add --tw-text-opacity division to add ambience based on bg better */
-a {
-    text-decoration: underline;
-    color: rgb(var(--color-secondary-500));
-}
-
-a:hover, a:hover:visited {
-    color: rgb(var(--color-secondary-400));
-}
-
-a:visited {
-    color: rgb(var(--color-secondary-800));
-}
-
-a:active {
-    color: rgb(var(--color-secondary-350));
-}
-
-.dark a {
-    text-decoration: underline;
-    color: rgb(var(--color-secondary-300));
-}
-
-.dark a:hover, .dark a:hover:visited {
-    color: rgb(var(--color-secondary-200));
-}
-
-.dark a:visited {
-    color: rgb(var(--color-secondary-350));
-}
-
-.dark a:active {
-    color: rgb(var(--color-secondary-100));
-}
-
-/* region Accordion css for handling missing styles in package */
-.accordion {
-    @apply variant-filled-primary rounded-md;
-}
-
-.accordion-control {
-    @apply hover:bg-surface-hover-token;
-}
-
-.accordion-item {
-    @apply variant-filled-primary rounded-md;
-}
-
-/* endregion Accordion css for handling missing styles in package */
-
-:root {
-    --shadow-color: rgba(91, 79, 54, 0.5);
-}
-
-/* todo: adjust shadow for each component + change depending on dark mode or not */
-.fab, #shell-header {
-    box-shadow: 3px 3px 3px var(--shadow-color);
-}
-
-#toast-progress {
-    position: relative;
-    top: 5px;
-    left: 6px;
-    width: calc(100% - 12px);
-    border-radius: 8px;
-    background: transparent;
-    height: 10px;
-}
-
-#toast-progress::-moz-progress-bar {
-    background: rgba(var(--color-secondary-500));
-}
-
-.dialog-box {
-    background-color: rgb(var(--color-surface-500) / 0.9);
-    position: fixed;
-    bottom: 0;
-    width: var(--dialog-box-width); /*75em + 4em padding*/
-    height: var(--dialog-box-height);
-    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
-}
-
-.dark .dialog-box {
-    background-color: rgb(var(--color-surface-900) / 0.95);
-    --tw-ring-color: rgb(var(--color-text-400));
-    /*background-color: red;*/
-}
-
-.dark .ares-logo {
-    filter: invert(100%);
-}
-
-.input {
-    @apply border-surface-800;
-}

package/dist/components/SocialSection.svelte

@@ -1,166 +0,0 @@
-<script>
-	export let isSmallVersion = false;
-	export let email = "turnipxenon@gmail.com";
-	export let linkedinSlug = "turnip-xenon";
-	export let isSlot = false;
-	export let allowLinkedIn = true;
-
-	import { ItchLogoHotLink } from "../consts";
-	import { onMount } from "svelte";
-	import { scale } from "svelte/transition";
-
-	import MailIcon from "../assets/icons/mail.svg";
-	import GithubIcon from "../assets/icons/github-mark.svg";
-	import LinkedinIcon from "../assets/icons/linkedin.svg";
-
-	let shouldShowExtra = false;
-	const style = `
-		--preferred-justify-content: ${isSlot ? "flex-start" : "center"};
-		--preferred-overall-margin-bottom: ${isSlot ? "0" : "0.75lh"};
-	`;
-
-	onMount(() => {
-		shouldShowExtra = window.screen.availWidth >= 440;
-	});
-</script>
-
-<div class="socials" class:isSmall={isSmallVersion} style={style} data-nosnippet>
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title="https://github.com/TurnipXenon"
-	        on:click={() => window.open("https://github.com/TurnipXenon")}>
-		<img src={GithubIcon} alt="github icon">
-		{#if (!isSmallVersion)}
-			<span>TurnipXenon</span>
-		{/if}
-	</button>
-	{#if allowLinkedIn}
-		<button type="button" class="social-button turnip-button"
-		        role="link"
-		        title={`https://www.linkedin.com/in/${linkedinSlug}/`}
-		        on:click={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
-			<img src={LinkedinIcon} alt="linkedin icon">
-			{#if (!isSmallVersion)}
-				<span>{linkedinSlug}</span>
-			{/if}
-		</button>
-	{/if}
-	<button type="button" class="social-button turnip-button"
-	        role="link"
-	        title={`mailto:${email}`}
-	        on:click={() => window.open(`mailto:${email}`)}>
-		<img src={MailIcon} alt="mail icon" />
-		{#if (!isSmallVersion)}
-			<span>{email}</span>
-		{/if}
-	</button>
-	{#if (shouldShowExtra)}
-		<button type="button" class="social-button turnip-button"
-		        role="link"
-		        title="https://turnipxenon.itch.io/"
-		        transition:scale
-		        on:click={() => window.open("https://turnipxenon.itch.io/")}>
-			<img src={ItchLogoHotLink} alt="itch icon">
-			{#if (!isSmallVersion)}
-				<span>TurnipXenon</span>
-			{/if}
-		</button>
-	{/if}
-</div>
-
-<style>
-    :is(.dark .social-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-.social-button:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-.social-button: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);
-}
-
-.social-button: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));
-}
-
-.social-button {
-        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);
-}
-
-.social-button > :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)));
-}
-
-.social-button: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);
-}
-
-.social-button: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);
-}
-
-.social-button {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-:is(.dark .social-button) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
-}
-
-    button > img {
-        max-height: 1lh;
-    }
-
-    button {
-        min-width: 0;
-        min-height: 0;
-    }
-
-    .socials {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: var(--preferred-justify-content);
-    }
-
-    .socials > button {
-        margin: 0 0.5em var(--preferred-overall-margin-bottom);
-    }
-
-    .socials.isSmall > button {
-        margin-left: 0.25em;
-        margin-right: 0.25em;
-    }
-</style>

package/dist/components/SocialSection.svelte.d.ts

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  SocialSectionProps */
-/** @typedef {typeof __propDef.events}  SocialSectionEvents */
-/** @typedef {typeof __propDef.slots}  SocialSectionSlots */
-export default class SocialSection extends SvelteComponent<{
-    isSmallVersion?: boolean | undefined;
-    email?: string | undefined;
-    linkedinSlug?: string | undefined;
-    isSlot?: boolean | undefined;
-    allowLinkedIn?: boolean | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SocialSectionProps = typeof __propDef.props;
-export type SocialSectionEvents = typeof __propDef.events;
-export type SocialSectionSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        isSmallVersion?: boolean | undefined;
-        email?: string | undefined;
-        linkedinSlug?: string | undefined;
-        isSlot?: boolean | undefined;
-        allowLinkedIn?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/postcss.d.ts

@@ -1,3 +0,0 @@
-// from https://stackoverflow.com/a/63885623/17836168
-declare module "./app.postcss";
-declare module "./theme.postcss";

package/dist/styles/DefaultGridContainer.css

@@ -1,61 +0,0 @@
-.default-grid-container-title-card {
-	max-width: calc(var(--default-card-max-width) + 32rem) !important;
-	width: 100%;
-	padding: 2rem !important;
-	text-align: center !important;
-}
-
-.default-grid-container {
-	width: 100%;
-	max-width: calc(var(--default-card-max-width) + 32rem);
-	padding-top: 4rem;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: flex-start;
-}
-
-.default-grid-container > .card,
-.default-grid-container > .lite-wrapper {
-	width: 22rem;
-	margin: clamp(0vw, 1vw, 1.5rem);
-}
-
-.default-grid-container div h3 {
-	margin: 0.5em;
-	text-align: center;
-	font-weight: bold;
-}
-
-.default-grid-container video {
-	padding: var(--theme-border-base);
-}
-
-.default-grid-container img {
-	padding: var(--theme-border-base);
-	width: 100%;
-}
-
-.links {
-	width: 100%;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-}
-
-.card.tx-badge {
-	object-fit: scale-down;
-	padding: 0.5rem;
-}
-
-img.tx-badge,
-.card.tx-badge {
-	max-height: 5rem;
-	max-width: 6rem;
-	margin: 1rem;
-}
-
-.twitter-wrapper {
-	padding: 1rem;
-}

package/dist/template/seaweed/ChumBucket.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ChumBucketProps = typeof __propDef.props;
-export type ChumBucketEvents = typeof __propDef.events;
-export type ChumBucketSlots = typeof __propDef.slots;
-export default class ChumBucket extends SvelteComponent<ChumBucketProps, ChumBucketEvents, ChumBucketSlots> {
-}
-export {};