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

package/dist/components/dialog_overlay/DialogOverlay.svelte

@@ -80,13 +80,13 @@
 			paddingClass=""
 			className="dialog-name"
 		>
-			<div>
-				<b class="fake-h1">Turnip</b>
-			</div>
+			<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}
@@ -116,9 +116,9 @@
         padding: 1.2lh 2rem 0.5lh;
     }
 
-    :global(.dialog-box *,.dialog-name *) {
-        font-size: clamp(1em, 5vw, 1.3em);
-        line-height: 1.5em;
+    :global(.dialog-text) {
+        font-size: clamp(1em, 3vw, 1.75em);
+        line-height: 1.5lh;
     }
 
     .dialog-elements {
@@ -138,16 +138,6 @@
         transform: translateY(var(--hidePercentHeight));
     }
 
-
-    .dialog-padding :global(p) {
-        font-size: clamp(1em, 5vw, 1.3em) !important;
-        line-height: 1.5em !important;
-    }
-
-    .dialog-padding {
-        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-    }
-
     :global(.dialog-name) {
         padding-left: 2rem;
         padding-right: 2rem;
@@ -189,9 +179,16 @@
         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(--color-surface-500);
+        background-color: var(--bg-dialog);
         position: fixed;
         bottom: 0;
         width: var(--dialog-box-width); /*75em + 4em padding*/
@@ -200,12 +197,6 @@
         border-radius: 1rem;
     }
 
-    .dark .dialog-box {
-        background-color: rgb(var(--color-surface-900) / 0.95);
-        --tw-ring-color: rgb(var(--color-text-400));
-        /*background-color: red;*/
-    }
-
     :global(.fab) {
         /*@apply btn preset-filled-tertiary-500;*/
         background-color: var(--color-tertiary-500);

package/dist/styles/app.css

@@ -22,7 +22,7 @@ html {
     height: calc(var(--dialog-box-height) + 4em);
 }
 
-.dialog-box a {
+.dialog-box a, .dialog-box b, .dialog-box i {
     font-size: inherit;
 }
 

package/dist/styles/turnip-theme.css

@@ -250,7 +250,7 @@ blockquote {
     filter: brightness(140%);
 }
 
-h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
+h1, h2, h3, h4, h5, h6, .fake-h1, .fake-h2, .fake-h3, .fake-h4 {
     text-align: center;
     margin-top: 0;
     font-weight: bolder;
@@ -265,7 +265,7 @@ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fak
     margin-top: 0.5lh;
 }
 
-h1 {
+h1, .fake-h1 {
     @apply text-4xl;
 }
 

package/dist/ui/elements/PinyaCard/PinyaCard.svelte

@@ -8,14 +8,15 @@ let {
 	flexClass = "flex flex-col",
 	widthClass = "w-full max-w-md",
 	borderClass = "border-[2px] border-primary-500 dark:border-0",
+	colorClass = "bg-surface-200 dark:bg-surface-900",
 	marginClass = "",
 	className,
 	includeDataNoSnippet = false,
 	children
 }: PinyaCardProps = $props();
 
-let cardClass = $derived(`card bg-surface-200 dark:bg-surface-900 text-start rounded-xl
-	${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`);
+let cardClass = $derived(`card text-start rounded-xl
+	${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass} ${colorClass}`);
 </script>
 
 {#if includeDataNoSnippet}

package/dist/ui/elements/PinyaCard/PinyaCardProps.d.ts

@@ -6,5 +6,6 @@ export interface PinyaCardProps extends WrapperProps {
     widthClass?: string;
     borderClass?: string;
     marginClass?: string;
+    colorClass?: string;
     includeDataNoSnippet?: boolean;
 }

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.6",
+  "version": "3.1.0-alpha.7",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",

package/src/lib/styles/app.css

@@ -22,7 +22,7 @@ html {
     height: calc(var(--dialog-box-height) + 4em);
 }
 
-.dialog-box a {
+.dialog-box a, .dialog-box b, .dialog-box i {
     font-size: inherit;
 }