@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha-3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.10.0",
+  "version": "3.0.0-alpha-3",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -19,42 +19,43 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",
-    "@sveltejs/kit": "^2.5.2",
-    "@sveltejs/package": "^2.2.1",
-    "@tailwindcss/forms": "^0.5.3",
-    "@tailwindcss/typography": "^0.5.9",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/package": "^2.3.7",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
-    "autoprefixer": "^10.4.14",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "8.4.35",
     "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "prettier-plugin-svelte": "^3.2.6",
     "prisma": "^5.12.1",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.6",
+    "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
-    "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.5"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
   },
   "dependencies": {
+    "@inlang/paraglide-js": "2.0.0-beta.30",
     "@prisma/client": "^5.12.1",
-    "@skeletonlabs/skeleton": "^2.9.0",
-    "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/kit": "^2.5.2",
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@skeletonlabs/skeleton": "^3.1.0",
+    "@skeletonlabs/skeleton-svelte": "^1.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.14",
     "@types/htmlparser2": "^3.10.7",
     "@types/node": "^20.11.25",
     "highlight.js": "^11.8.0",
     "htmlparser2": "^9.1.0",
+    "mode-watcher": "^0.5.1",
     "node-html-parser": "^6.1.5",
     "publint": "^0.2.7",
+    "shiki": "^3.2.1",
+    "shiki-transformer-copy-button": "0.0.3",
     "string-width": "^7.1.0",
-    "svelte": "^4.2.12",
+    "svelte": "^5.0.0",
+    "svelte-modals": "^2.0.1",
+    "tailwindcss": "^4.0.14",
     "ts-node": "^10.9.1"
   },
   "exports": {
@@ -62,13 +63,29 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./components": {
+      "types": "./dist/ui/components/index.d.ts",
+      "svelte": "./dist/ui/components/index.js"
+    },
+    "./elements": {
+      "types": "./dist/ui/elements/index.d.ts",
+      "svelte": "./dist/ui/elements/index.js"
+    },
+    "./modules": {
+      "types": "./dist/ui/modules/index.d.ts",
+      "svelte": "./dist/ui/modules/index.js"
+    },
+    "./templates": {
+      "types": "./dist/ui/templates/index.d.ts",
+      "svelte": "./dist/ui/templates/index.js"
+    },
     "./app.postcss": "./src/lib/app.postcss",
     "./theme.postcss": "./src/lib/theme.postcss"
   },
   "files": [
     "dist",
-    "./src/lib/app.postcss",
-    "./src/lib/theme.postcss"
+    "src/lib/styles/app.css",
+    "src/lib/theme.css"
   ],
   "repository": "https://github.com/TurnipXenon/pineapple",
   "author": "turnipxenon <turnipxenon@gmail.com>",

package/src/lib/styles/app.css

@@ -0,0 +1,144 @@
+@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;*/
+}
+
+@layer base {
+    .game-link-section {
+        @apply mt-6 flex gap-2 justify-center;
+    }
+
+    .game-video-cover {
+        @apply rounded-t-lg max-h-64 object-cover w-full;
+    }
+
+    .text-chip-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .text-chip {
+        background-color: var(--color-secondary-50-950) /* light-dark(var(--color-secondary-50), var(--color-secondary-950)) */;
+        color: var(--color-secondary-950-50) /* light-dark(var(--color-secondary-950), var(--color-secondary-50)) */;
+    }
+}
+
+/*https://shiki.style/guide/dual-themes*/
+html.dark .shiki,
+html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+.shiki {
+    span {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+}
+
+/* region shiki copy button */
+pre:has(code) {
+    position: relative;
+}
+
+pre button.copy {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    height: 28px;
+    width: 28px;
+    padding: 0;
+    display: flex;
+
+    & span {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    & .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");
+        }
+    }
+
+    & .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");
+        }
+    }
+
+    &.copied {
+        & .success {
+            display: block;
+        }
+
+        & .ready {
+            display: none;
+        }
+    }
+}
+
+/* endregion shiki copy button */

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;
-}