@turnipxenon/pineapple 3.1.0-alpha.7 → 3.1.0-alpha.9

package/dist/components/dialog_overlay/DialogOverlay.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import AresHappy from "../../assets/characters/ares/ares_happy.webp";
+	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 "../dialog_manager/DialogManager";
 	import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
@@ -8,8 +10,7 @@
 	import CloseIcon from "../../assets/icons/close.svg";
 	import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-	import { PinyaButton } from "../../ui/elements/index";
-	import { slide } from "svelte/transition";
+	import PinyaButton from "../../ui/elements/PinyaButton/PinyaButton.svelte";
 
 	let currentMessage = $state("");
 	let currentPortrait = $state(AresHappy);
@@ -96,7 +97,7 @@
 
 
 {#if appState.allowDialog && isMounted}
-	<div class="fab-container" in:slide>
+	<div class="fab-container" transition:slide>
 		<PinyaButton
 			classes="fab"
 			onclick={()=>{dialogManager.toggleDialogOverlay();}}
@@ -113,12 +114,12 @@
 <style>
     :global(.dialog-text) {
         height: 100%;
-        padding: 1.2lh 2rem 0.5lh;
+        padding: 0.8lh 2rem 0.5lh;
     }
 
     :global(.dialog-text) {
-        font-size: clamp(1em, 3vw, 1.75em);
-        line-height: 1.5lh;
+        font-size: clamp(1rem, 3vw, 1.75rem);
+        line-height: calc(clamp(1rem, 3vw, 1.75rem) * 1.5);
     }
 
     .dialog-elements {
@@ -193,7 +194,7 @@
         bottom: 0;
         width: var(--dialog-box-width); /*75em + 4em padding*/
         height: var(--dialog-box-height);
-        max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+        max-width: calc(100vw - ((var(--fab-margin) * 3) + (clamp(2rem, 5vw, 4rem))));
         border-radius: 1rem;
     }
 
@@ -201,7 +202,7 @@
         /*@apply btn preset-filled-tertiary-500;*/
         background-color: var(--color-tertiary-500);
         padding: 0.3rem;
-        width: 4em;
+        width: clamp(2rem, 5vw, 4rem);
         border-radius: 50%;
         z-index: 100;
         box-shadow: 3px 3px 3px var(--shadow-color);

package/dist/styles/turnip-theme.css

@@ -289,7 +289,11 @@ h6 {
     text-decoration: underline;
 }
 
-a {
+a.a-as-btn {
+    text-decoration: none;
+}
+
+a:not(.a-as-btn) {
     text-decoration: underline;
     color: var(--color-secondary-500);
 
@@ -298,11 +302,16 @@ a {
     }
 }
 
-a:hover, a:focus {
+a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
     filter: brightness(150%);
 }
 
-a:visited {
+/*  we're fighting a specificity war with skeleton components */
+a.a-as-btn:hover {
+    filter: brightness(110%);
+}
+
+a:not(.a-as-btn):visited {
     color: var(--color-secondary-950);
 
     @variant dark {
@@ -310,6 +319,7 @@ a:visited {
     }
 }
 
+
 ul {
     list-style: inside;
 }
@@ -318,10 +328,10 @@ ol {
     list-style: decimal inside;
 }
 
-p{
+p {
     @apply mb-3;
 }
 
 @theme {
     --color-secondary-0: oklch(99% 0.02 38.38deg);
-}
+}

package/dist/ui/components/SocialSection.svelte

@@ -6,8 +6,9 @@
 	import GithubIcon from "../../assets/icons/github-mark.svg";
 	import LinkedinIcon from "../../assets/icons/linkedin.svg";
 	import { ItchLogoHotLink } from "../../consts";
-	import { ButtonVariant, PinyaButton } from "../elements/PinyaButton/index";
+	import { PinyaButton } from "../elements/PinyaButton/index";
 	import ImageIcon from "../elements/ImageIcon.svelte";
+	import { ButtonVariant } from "../elements/PinyaButtonCommon/ButtonVariant";
 
 	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
 	let {

package/dist/ui/elements/ImageIcon.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLImgAttributes } from 'svelte/elements';
-	import type { GeneralUIProps } from './GeneralUIProps';
-	import { ColorScheme } from './ColorScheme';
+	import type { GeneralUIProps } from "./GeneralUIProps";
+	import { ColorScheme } from "./ColorScheme";
 
 	type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
 

package/dist/ui/elements/ImageIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLImgAttributes } from 'svelte/elements';
-import type { GeneralUIProps } from './GeneralUIProps';
+import type { GeneralUIProps } from "./GeneralUIProps";
 type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
 declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
 type ImageIcon = ReturnType<typeof ImageIcon>;

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { ColorScheme } from "../ColorScheme";
+	import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
+	import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
+	import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
+
+	let {
+		children,
+		colorScheme = ColorScheme.Primary,
+		paddingClass = "",
+		buttonVariant = ButtonVariant.Default,
+		colorClass = "",
+		classes = "",
+		...props
+	}: PinyaAnchorButtonProps = $props();
+
+	let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
+</script>
+
+<a
+	{...props}
+	class={`a-as-btn ${tailwindClass}}`}
+>
+	{@render children()}
+</a>

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
+declare const PinyaAnchorButton: import("svelte").Component<PinyaAnchorButtonProps, {}, "">;
+type PinyaAnchorButton = ReturnType<typeof PinyaAnchorButton>;
+export default PinyaAnchorButton;

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAnchorAttributes } from "svelte/elements";
+import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
+import type { WrapperProps } from "../index";
+export type PinyaAnchorButtonProps = WrapperProps & HTMLAnchorAttributes & PinyaButtonCommonProps;

package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/PinyaAnchorButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
+export * from "./PinyaAnchorButtonProps";

package/dist/ui/elements/PinyaAnchorButton/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
+export * from "./PinyaAnchorButtonProps";

package/dist/ui/elements/PinyaButton/PinyaButton.svelte

@@ -1,48 +1,25 @@
 <script lang="ts">
-	import { ButtonVariant, type PinyaButtonProps } from './PinyaButtonProps';
+	import { type PinyaButtonProps } from "./PinyaButtonProps";
 	import { ColorScheme } from "../ColorScheme";
+	import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
+	import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
 
 	let {
 		children,
 		colorScheme = ColorScheme.Primary,
-		paddingClass = '',
+		paddingClass = "",
 		buttonVariant = ButtonVariant.Default,
-		colorClass = '',
-		classes = '',
+		colorClass = "",
+		classes = "",
 		...props
 	}: PinyaButtonProps = $props();
 
-	paddingClass = paddingClass
-		? paddingClass
-		: (
-			buttonVariant === ButtonVariant.Image
-				? 'pl-3 pr-3 pt-2 pb-2'
-				: 'pl-3 pr-3'
-		);
-
-	const chooseTailwindClass = () => {
-		switch (colorScheme) {
-			case ColorScheme.Custom:
-				return colorClass;
-			case ColorScheme.Warning:
-				return 'bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110';
-			case ColorScheme.Surface:
-				return 'bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110';
-			default:
-				console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
-			// eslint-disable-next-line no-fallthrough
-			case ColorScheme.Primary:
-				return 'bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110';
-		}
-	};
-
-	const tailwindClass = chooseTailwindClass();
+	let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
 </script>
 
 <button
 	{...props}
-	class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
-	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
+	class={tailwindClass}
 >
 	{@render children()}
 </button>

package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PinyaButtonProps } from './PinyaButtonProps';
+import { type PinyaButtonProps } from "./PinyaButtonProps";
 declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
 type PinyaButton = ReturnType<typeof PinyaButton>;
 export default PinyaButton;

package/dist/ui/elements/PinyaButton/PinyaButtonProps.d.ts

@@ -1,14 +1,4 @@
-import type { HTMLButtonAttributes } from 'svelte/elements';
-import type { GeneralUIProps } from '../GeneralUIProps';
-import type { WrapperProps } from '../WrapperProps';
-export declare enum ButtonVariant {
-    Default = 0,
-    Image = 1,
-    SmallIcon = 2
-}
-export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIProps & {
-    paddingClass?: string;
-    buttonVariant?: ButtonVariant;
-    colorClass?: string;
-    classes?: string;
-};
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
+import type { WrapperProps } from "../index";
+export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & PinyaButtonCommonProps;

package/dist/ui/elements/PinyaButton/PinyaButtonProps.js

@@ -1,6 +1 @@
-export var ButtonVariant;
-(function (ButtonVariant) {
-    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
-    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
-    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
-})(ButtonVariant || (ButtonVariant = {}));
+export {};

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.d.ts

@@ -0,0 +1,5 @@
+export declare enum ButtonVariant {
+    Default = 0,
+    Image = 1,
+    SmallIcon = 2
+}

package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.js

@@ -0,0 +1,6 @@
+export var ButtonVariant;
+(function (ButtonVariant) {
+    ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
+    ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
+    ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
+})(ButtonVariant || (ButtonVariant = {}));

package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.d.ts

@@ -0,0 +1,8 @@
+import { type GeneralUIProps } from "../index";
+import { ButtonVariant } from "./ButtonVariant";
+export type PinyaButtonCommonProps = GeneralUIProps & {
+    paddingClass?: string;
+    buttonVariant?: ButtonVariant;
+    colorClass?: string;
+    classes?: string;
+};

package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.js

@@ -0,0 +1,2 @@
+import {} from "../index";
+import { ButtonVariant } from "./ButtonVariant";

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.d.ts

@@ -0,0 +1,2 @@
+import type { PinyaButtonCommonProps } from "./PinyaButtonCommonProps";
+export declare const createButtonClass: (props: PinyaButtonCommonProps) => string;

package/dist/ui/elements/PinyaButtonCommon/createButtonClass.js

@@ -0,0 +1,31 @@
+import { ColorScheme } from "../ColorScheme";
+import { ButtonVariant } from "./ButtonVariant";
+export const createButtonClass = (props) => {
+    let { colorScheme, paddingClass, buttonVariant, colorClass, classes } = props;
+    colorScheme ??= ColorScheme.Primary;
+    buttonVariant ??= ButtonVariant.Default;
+    paddingClass ??= buttonVariant === ButtonVariant.Image
+        ? "pl-3 pr-3 pt-2 pb-2"
+        : "pl-3 pr-3";
+    colorClass ??= "";
+    classes ??= "";
+    const chooseTailwindClass = () => {
+        switch (colorScheme) {
+            case ColorScheme.Custom:
+                return colorClass;
+            case ColorScheme.Warning:
+                return "bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110";
+            case ColorScheme.Surface:
+                return "bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110";
+            default:
+                console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
+            // eslint-disable-next-line no-fallthrough
+            case ColorScheme.Primary:
+                return "bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110";
+        }
+    };
+    const tailwindClass = chooseTailwindClass();
+    return `btn rounded-2xl text-xl font-bold 
+	${buttonVariant === ButtonVariant.SmallIcon ? 'small-icon-button' : ''}
+	${tailwindClass} ${paddingClass} ${classes}`;
+};

package/dist/ui/elements/PinyaButtonCommon/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ButtonVariant";
+export * from "./createButtonClass";
+export * from "./PinyaButtonCommonProps";

package/dist/ui/elements/PinyaButtonCommon/index.js

@@ -0,0 +1,3 @@
+export * from "./ButtonVariant";
+export * from "./createButtonClass";
+export * from "./PinyaButtonCommonProps";

package/dist/ui/elements/index.d.ts

@@ -1,11 +1,13 @@
-export { default as ImageIcon } from "./ImageIcon.svelte";
-export { default as TextLink } from "./TextLink.svelte";
-export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";
+export * from "./PinyaButtonCommon";
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./PinyaCard/index";
 export * from "./WrapperProps";
-export * from "./PinyaButton/index";
+export * from "./PinyaButton";
+export * from "./PinyaAnchorButton";
 export * from "./text-chip";
 export * from "./CodeBlock";

package/dist/ui/elements/index.js

@@ -1,11 +1,15 @@
-export { default as ImageIcon } from "./ImageIcon.svelte";
-export { default as TextLink } from "./TextLink.svelte";
-export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
+// types
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";
+export * from "./PinyaButtonCommon";
+// components
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./PinyaCard/index";
 export * from "./WrapperProps";
-export * from "./PinyaButton/index";
+export * from "./PinyaButton";
+export * from "./PinyaAnchorButton";
 export * from "./text-chip";
 export * from "./CodeBlock";

package/dist/ui/modules/projects/Hepcat.svelte

@@ -5,8 +5,8 @@
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
 	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
 	import { ItchLogoHotLink } from "../../../consts";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "Hepcat";
 	export { component, key };

package/dist/ui/modules/projects/Pengi.svelte

@@ -5,8 +5,8 @@
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
 	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
 	import { ItchLogoHotLink } from "../../../consts";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "Pengi";
 	export { component, key };

package/dist/ui/modules/projects/Soulwork.svelte

@@ -5,8 +5,8 @@
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
 	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
 	import { ItchLogoHotLink } from "../../../consts";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "Soulwork";
 	export { component, key };

package/dist/ui/modules/projects/ThisWebpage.svelte

@@ -5,8 +5,8 @@
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
 	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
-	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
 	import { default as TextChip } from "../../elements/text-chip/TextChip.svelte";
+	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "This Webpage";
 	export { component, key };

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import { modals } from "svelte-modals";
 	import { m } from "../../../paraglide/messages";
+	import { localizeHref } from "../../../paraglide/runtime";
 
 	import AresLogo from "../../../assets/characters/ares/ares_logo.webp";
 	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
 	import RandomizedBackground from "../../components/randomized-background/RandomizedBackground.svelte";
-	import { modals } from "svelte-modals";
 	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
-	import { localizeHref } from "../../../paraglide/runtime";
 	import { appState } from "./runes.svelte";
 	import { enableBackground } from "../../../store";
 	import DialogOverlay from "../../../components/dialog_overlay/DialogOverlay.svelte";

package/package.json

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