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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/dialog_overlay/DialogOverlay.svelte +22 -30
  2. package/dist/styles/app.css +1 -1
  3. package/dist/styles/turnip-theme.css +17 -7
  4. package/dist/ui/components/SocialSection.svelte +2 -1
  5. package/dist/ui/elements/ImageIcon.svelte +2 -2
  6. package/dist/ui/elements/ImageIcon.svelte.d.ts +1 -1
  7. package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte +25 -0
  8. package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButton.svelte.d.ts +4 -0
  9. package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.d.ts +4 -0
  10. package/dist/ui/elements/PinyaAnchorButton/PinyaAnchorButtonProps.js +1 -0
  11. package/dist/ui/elements/PinyaAnchorButton/index.d.ts +2 -0
  12. package/dist/ui/elements/PinyaAnchorButton/index.js +2 -0
  13. package/dist/ui/elements/PinyaButton/PinyaButton.svelte +8 -31
  14. package/dist/ui/elements/PinyaButton/PinyaButton.svelte.d.ts +1 -1
  15. package/dist/ui/elements/PinyaButton/PinyaButtonProps.d.ts +4 -14
  16. package/dist/ui/elements/PinyaButton/PinyaButtonProps.js +1 -6
  17. package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.d.ts +5 -0
  18. package/dist/ui/elements/PinyaButtonCommon/ButtonVariant.js +6 -0
  19. package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.d.ts +8 -0
  20. package/dist/ui/elements/PinyaButtonCommon/PinyaButtonCommonProps.js +2 -0
  21. package/dist/ui/elements/PinyaButtonCommon/createButtonClass.d.ts +2 -0
  22. package/dist/ui/elements/PinyaButtonCommon/createButtonClass.js +31 -0
  23. package/dist/ui/elements/PinyaButtonCommon/index.d.ts +3 -0
  24. package/dist/ui/elements/PinyaButtonCommon/index.js +3 -0
  25. package/dist/ui/elements/PinyaCard/PinyaCard.svelte +3 -2
  26. package/dist/ui/elements/PinyaCard/PinyaCardProps.d.ts +1 -0
  27. package/dist/ui/elements/index.d.ts +4 -3
  28. package/dist/ui/elements/index.js +6 -3
  29. package/dist/ui/modules/projects/Hepcat.svelte +1 -1
  30. package/dist/ui/modules/projects/Pengi.svelte +1 -1
  31. package/dist/ui/modules/projects/Soulwork.svelte +1 -1
  32. package/dist/ui/modules/projects/ThisWebpage.svelte +1 -1
  33. package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte +2 -2
  34. package/package.json +1 -1
  35. package/src/lib/styles/app.css +1 -1
@@ -1,6 +1,8 @@
1
1
  <script lang="ts">
2
- import AresHappy from "../../assets/characters/ares/ares_happy.webp";
2
+ import { slide } from "svelte/transition";
3
3
  import { onMount } from "svelte";
4
+
5
+ import AresHappy from "../../assets/characters/ares/ares_happy.webp";
4
6
  import { DialogState } from "../../types/pineapple_fiber/DialogState";
5
7
  import { dialogManager } from "../dialog_manager/DialogManager";
6
8
  import PinyaCard from "../../ui/elements/PinyaCard/PinyaCard.svelte";
@@ -8,8 +10,7 @@
8
10
  import CloseIcon from "../../assets/icons/close.svg";
9
11
  import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
10
12
  import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
11
- import { PinyaButton } from "../../ui/elements/index";
12
- import { slide } from "svelte/transition";
13
+ import PinyaButton from "../../ui/elements/PinyaButton/PinyaButton.svelte";
13
14
 
14
15
  let currentMessage = $state("");
15
16
  let currentPortrait = $state(AresHappy);
@@ -80,13 +81,13 @@
80
81
  paddingClass=""
81
82
  className="dialog-name"
82
83
  >
83
- <div>
84
- <b class="fake-h1">Turnip</b>
85
- </div>
84
+ <div class="fake-h1">Turnip</div>
86
85
  </PinyaCard>
87
86
  <PinyaCard
88
87
  widthClass="w-full"
89
88
  className="dialog-text"
89
+ colorClass=""
90
+ flexClass=""
90
91
  >
91
92
  <!-- Made for 140 characters, like the original tweets -->
92
93
  {@html currentMessage}
@@ -96,7 +97,7 @@
96
97
 
97
98
 
98
99
  {#if appState.allowDialog && isMounted}
99
- <div class="fab-container" in:slide>
100
+ <div class="fab-container" transition:slide>
100
101
  <PinyaButton
101
102
  classes="fab"
102
103
  onclick={()=>{dialogManager.toggleDialogOverlay();}}
@@ -113,12 +114,12 @@
113
114
  <style>
114
115
  :global(.dialog-text) {
115
116
  height: 100%;
116
- padding: 1.2lh 2rem 0.5lh;
117
+ padding: 0.8lh 2rem 0.5lh;
117
118
  }
118
119
 
119
- :global(.dialog-box *,.dialog-name *) {
120
- font-size: clamp(1em, 5vw, 1.3em);
121
- line-height: 1.5em;
120
+ :global(.dialog-text) {
121
+ font-size: clamp(1rem, 3vw, 1.75rem);
122
+ line-height: calc(clamp(1rem, 3vw, 1.75rem) * 1.5);
122
123
  }
123
124
 
124
125
  .dialog-elements {
@@ -138,16 +139,6 @@
138
139
  transform: translateY(var(--hidePercentHeight));
139
140
  }
140
141
 
141
-
142
- .dialog-padding :global(p) {
143
- font-size: clamp(1em, 5vw, 1.3em) !important;
144
- line-height: 1.5em !important;
145
- }
146
-
147
- .dialog-padding {
148
- padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
149
- }
150
-
151
142
  :global(.dialog-name) {
152
143
  padding-left: 2rem;
153
144
  padding-right: 2rem;
@@ -189,28 +180,29 @@
189
180
  transform: scaleX(-1);
190
181
  }
191
182
 
183
+ :global(html) {
184
+ --bg-dialog: rgba(255, 247, 225, 0.9);
185
+ }
186
+
187
+ :global(html.dark) {
188
+ --bg-dialog: rgba(76, 71, 59, 0.9);
189
+ }
192
190
 
193
191
  .dialog-box {
194
- background-color: var(--color-surface-500);
192
+ background-color: var(--bg-dialog);
195
193
  position: fixed;
196
194
  bottom: 0;
197
195
  width: var(--dialog-box-width); /*75em + 4em padding*/
198
196
  height: var(--dialog-box-height);
199
- max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
197
+ max-width: calc(100vw - ((var(--fab-margin) * 3) + (clamp(2rem, 5vw, 4rem))));
200
198
  border-radius: 1rem;
201
199
  }
202
200
 
203
- .dark .dialog-box {
204
- background-color: rgb(var(--color-surface-900) / 0.95);
205
- --tw-ring-color: rgb(var(--color-text-400));
206
- /*background-color: red;*/
207
- }
208
-
209
201
  :global(.fab) {
210
202
  /*@apply btn preset-filled-tertiary-500;*/
211
203
  background-color: var(--color-tertiary-500);
212
204
  padding: 0.3rem;
213
- width: 4em;
205
+ width: clamp(2rem, 5vw, 4rem);
214
206
  border-radius: 50%;
215
207
  z-index: 100;
216
208
  box-shadow: 3px 3px 3px var(--shadow-color);
@@ -22,7 +22,7 @@ html {
22
22
  height: calc(var(--dialog-box-height) + 4em);
23
23
  }
24
24
 
25
- .dialog-box a {
25
+ .dialog-box a, .dialog-box b, .dialog-box i {
26
26
  font-size: inherit;
27
27
  }
28
28
 
@@ -250,7 +250,7 @@ blockquote {
250
250
  filter: brightness(140%);
251
251
  }
252
252
 
253
- h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
253
+ h1, h2, h3, h4, h5, h6, .fake-h1, .fake-h2, .fake-h3, .fake-h4 {
254
254
  text-align: center;
255
255
  margin-top: 0;
256
256
  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
265
265
  margin-top: 0.5lh;
266
266
  }
267
267
 
268
- h1 {
268
+ h1, .fake-h1 {
269
269
  @apply text-4xl;
270
270
  }
271
271
 
@@ -289,7 +289,11 @@ h6 {
289
289
  text-decoration: underline;
290
290
  }
291
291
 
292
- a {
292
+ a.a-as-btn {
293
+ text-decoration: none;
294
+ }
295
+
296
+ a:not(.a-as-btn) {
293
297
  text-decoration: underline;
294
298
  color: var(--color-secondary-500);
295
299
 
@@ -298,11 +302,16 @@ a {
298
302
  }
299
303
  }
300
304
 
301
- a:hover, a:focus {
305
+ a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
302
306
  filter: brightness(150%);
303
307
  }
304
308
 
305
- a:visited {
309
+ /* we're fighting a specificity war with skeleton components */
310
+ a.a-as-btn:hover {
311
+ filter: brightness(110%);
312
+ }
313
+
314
+ a:not(.a-as-btn):visited {
306
315
  color: var(--color-secondary-950);
307
316
 
308
317
  @variant dark {
@@ -310,6 +319,7 @@ a:visited {
310
319
  }
311
320
  }
312
321
 
322
+
313
323
  ul {
314
324
  list-style: inside;
315
325
  }
@@ -318,10 +328,10 @@ ol {
318
328
  list-style: decimal inside;
319
329
  }
320
330
 
321
- p{
331
+ p {
322
332
  @apply mb-3;
323
333
  }
324
334
 
325
335
  @theme {
326
336
  --color-secondary-0: oklch(99% 0.02 38.38deg);
327
- }
337
+ }
@@ -6,8 +6,9 @@
6
6
  import GithubIcon from "../../assets/icons/github-mark.svg";
7
7
  import LinkedinIcon from "../../assets/icons/linkedin.svg";
8
8
  import { ItchLogoHotLink } from "../../consts";
9
- import { ButtonVariant, PinyaButton } from "../elements/PinyaButton/index";
9
+ import { PinyaButton } from "../elements/PinyaButton/index";
10
10
  import ImageIcon from "../elements/ImageIcon.svelte";
11
+ import { ButtonVariant } from "../elements/PinyaButtonCommon/ButtonVariant";
11
12
 
12
13
  /** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
13
14
  let {
@@ -1,7 +1,7 @@
1
1
  <script lang="ts">
2
2
  import type { HTMLImgAttributes } from 'svelte/elements';
3
- import type { GeneralUIProps } from './GeneralUIProps';
4
- import { ColorScheme } from './ColorScheme';
3
+ import type { GeneralUIProps } from "./GeneralUIProps";
4
+ import { ColorScheme } from "./ColorScheme";
5
5
 
6
6
  type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
7
7
 
@@ -1,5 +1,5 @@
1
1
  import type { HTMLImgAttributes } from 'svelte/elements';
2
- import type { GeneralUIProps } from './GeneralUIProps';
2
+ import type { GeneralUIProps } from "./GeneralUIProps";
3
3
  type PinyaButtonProps = HTMLImgAttributes & GeneralUIProps;
4
4
  declare const ImageIcon: import("svelte").Component<PinyaButtonProps, {}, "">;
5
5
  type ImageIcon = ReturnType<typeof ImageIcon>;
@@ -0,0 +1,25 @@
1
+ <script lang="ts">
2
+ import { ColorScheme } from "../ColorScheme";
3
+ import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
4
+ import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
5
+ import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
6
+
7
+ let {
8
+ children,
9
+ colorScheme = ColorScheme.Primary,
10
+ paddingClass = "",
11
+ buttonVariant = ButtonVariant.Default,
12
+ colorClass = "",
13
+ classes = "",
14
+ ...props
15
+ }: PinyaAnchorButtonProps = $props();
16
+
17
+ let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
18
+ </script>
19
+
20
+ <a
21
+ {...props}
22
+ class={`a-as-btn ${tailwindClass}}`}
23
+ >
24
+ {@render children()}
25
+ </a>
@@ -0,0 +1,4 @@
1
+ import type { PinyaAnchorButtonProps } from "./PinyaAnchorButtonProps";
2
+ declare const PinyaAnchorButton: import("svelte").Component<PinyaAnchorButtonProps, {}, "">;
3
+ type PinyaAnchorButton = ReturnType<typeof PinyaAnchorButton>;
4
+ export default PinyaAnchorButton;
@@ -0,0 +1,4 @@
1
+ import type { HTMLAnchorAttributes } from "svelte/elements";
2
+ import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
3
+ import type { WrapperProps } from "../index";
4
+ export type PinyaAnchorButtonProps = WrapperProps & HTMLAnchorAttributes & PinyaButtonCommonProps;
@@ -0,0 +1,2 @@
1
+ export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
2
+ export * from "./PinyaAnchorButtonProps";
@@ -0,0 +1,2 @@
1
+ export { default as PinyaAnchorButton } from "./PinyaAnchorButton.svelte";
2
+ export * from "./PinyaAnchorButtonProps";
@@ -1,48 +1,25 @@
1
1
  <script lang="ts">
2
- import { ButtonVariant, type PinyaButtonProps } from './PinyaButtonProps';
2
+ import { type PinyaButtonProps } from "./PinyaButtonProps";
3
3
  import { ColorScheme } from "../ColorScheme";
4
+ import { ButtonVariant } from "../PinyaButtonCommon/ButtonVariant";
5
+ import { createButtonClass } from "../PinyaButtonCommon/createButtonClass";
4
6
 
5
7
  let {
6
8
  children,
7
9
  colorScheme = ColorScheme.Primary,
8
- paddingClass = '',
10
+ paddingClass = "",
9
11
  buttonVariant = ButtonVariant.Default,
10
- colorClass = '',
11
- classes = '',
12
+ colorClass = "",
13
+ classes = "",
12
14
  ...props
13
15
  }: PinyaButtonProps = $props();
14
16
 
15
- paddingClass = paddingClass
16
- ? paddingClass
17
- : (
18
- buttonVariant === ButtonVariant.Image
19
- ? 'pl-3 pr-3 pt-2 pb-2'
20
- : 'pl-3 pr-3'
21
- );
22
-
23
- const chooseTailwindClass = () => {
24
- switch (colorScheme) {
25
- case ColorScheme.Custom:
26
- return colorClass;
27
- case ColorScheme.Warning:
28
- return 'bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110';
29
- case ColorScheme.Surface:
30
- return 'bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110';
31
- default:
32
- console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
33
- // eslint-disable-next-line no-fallthrough
34
- case ColorScheme.Primary:
35
- return 'bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110';
36
- }
37
- };
38
-
39
- const tailwindClass = chooseTailwindClass();
17
+ let tailwindClass = $derived(createButtonClass({ colorScheme, paddingClass, buttonVariant, colorClass, classes }));
40
18
  </script>
41
19
 
42
20
  <button
43
21
  {...props}
44
- class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
45
- class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
22
+ class={tailwindClass}
46
23
  >
47
24
  {@render children()}
48
25
  </button>
@@ -1,4 +1,4 @@
1
- import { type PinyaButtonProps } from './PinyaButtonProps';
1
+ import { type PinyaButtonProps } from "./PinyaButtonProps";
2
2
  declare const PinyaButton: import("svelte").Component<PinyaButtonProps, {}, "">;
3
3
  type PinyaButton = ReturnType<typeof PinyaButton>;
4
4
  export default PinyaButton;
@@ -1,14 +1,4 @@
1
- import type { HTMLButtonAttributes } from 'svelte/elements';
2
- import type { GeneralUIProps } from '../GeneralUIProps';
3
- import type { WrapperProps } from '../WrapperProps';
4
- export declare enum ButtonVariant {
5
- Default = 0,
6
- Image = 1,
7
- SmallIcon = 2
8
- }
9
- export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIProps & {
10
- paddingClass?: string;
11
- buttonVariant?: ButtonVariant;
12
- colorClass?: string;
13
- classes?: string;
14
- };
1
+ import type { HTMLButtonAttributes } from "svelte/elements";
2
+ import type { PinyaButtonCommonProps } from "../PinyaButtonCommon/PinyaButtonCommonProps";
3
+ import type { WrapperProps } from "../index";
4
+ export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & PinyaButtonCommonProps;
@@ -1,6 +1 @@
1
- export var ButtonVariant;
2
- (function (ButtonVariant) {
3
- ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
4
- ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
5
- ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
6
- })(ButtonVariant || (ButtonVariant = {}));
1
+ export {};
@@ -0,0 +1,5 @@
1
+ export declare enum ButtonVariant {
2
+ Default = 0,
3
+ Image = 1,
4
+ SmallIcon = 2
5
+ }
@@ -0,0 +1,6 @@
1
+ export var ButtonVariant;
2
+ (function (ButtonVariant) {
3
+ ButtonVariant[ButtonVariant["Default"] = 0] = "Default";
4
+ ButtonVariant[ButtonVariant["Image"] = 1] = "Image";
5
+ ButtonVariant[ButtonVariant["SmallIcon"] = 2] = "SmallIcon";
6
+ })(ButtonVariant || (ButtonVariant = {}));
@@ -0,0 +1,8 @@
1
+ import { type GeneralUIProps } from "../index";
2
+ import { ButtonVariant } from "./ButtonVariant";
3
+ export type PinyaButtonCommonProps = GeneralUIProps & {
4
+ paddingClass?: string;
5
+ buttonVariant?: ButtonVariant;
6
+ colorClass?: string;
7
+ classes?: string;
8
+ };
@@ -0,0 +1,2 @@
1
+ import {} from "../index";
2
+ import { ButtonVariant } from "./ButtonVariant";
@@ -0,0 +1,2 @@
1
+ import type { PinyaButtonCommonProps } from "./PinyaButtonCommonProps";
2
+ export declare const createButtonClass: (props: PinyaButtonCommonProps) => string;
@@ -0,0 +1,31 @@
1
+ import { ColorScheme } from "../ColorScheme";
2
+ import { ButtonVariant } from "./ButtonVariant";
3
+ export const createButtonClass = (props) => {
4
+ let { colorScheme, paddingClass, buttonVariant, colorClass, classes } = props;
5
+ colorScheme ??= ColorScheme.Primary;
6
+ buttonVariant ??= ButtonVariant.Default;
7
+ paddingClass ??= buttonVariant === ButtonVariant.Image
8
+ ? "pl-3 pr-3 pt-2 pb-2"
9
+ : "pl-3 pr-3";
10
+ colorClass ??= "";
11
+ classes ??= "";
12
+ const chooseTailwindClass = () => {
13
+ switch (colorScheme) {
14
+ case ColorScheme.Custom:
15
+ return colorClass;
16
+ case ColorScheme.Warning:
17
+ return "bg-warning-700 dark:bg-warning-400 text-secondary-0 dark:text-secondary-950 hover:brightness-110";
18
+ case ColorScheme.Surface:
19
+ return "bg-surface-700 dark:bg-surface-600 text-surface-50-950 hover:brightness-110";
20
+ default:
21
+ console.error(`Unimplemented color scheme: ${colorScheme.toString()}`);
22
+ // eslint-disable-next-line no-fallthrough
23
+ case ColorScheme.Primary:
24
+ return "bg-primary-400-600 text-secondary-950 dark:text-secondary-0 hover:brightness-110";
25
+ }
26
+ };
27
+ const tailwindClass = chooseTailwindClass();
28
+ return `btn rounded-2xl text-xl font-bold
29
+ ${buttonVariant === ButtonVariant.SmallIcon ? 'small-icon-button' : ''}
30
+ ${tailwindClass} ${paddingClass} ${classes}`;
31
+ };
@@ -0,0 +1,3 @@
1
+ export * from "./ButtonVariant";
2
+ export * from "./createButtonClass";
3
+ export * from "./PinyaButtonCommonProps";
@@ -0,0 +1,3 @@
1
+ export * from "./ButtonVariant";
2
+ export * from "./createButtonClass";
3
+ export * from "./PinyaButtonCommonProps";
@@ -8,14 +8,15 @@ let {
8
8
  flexClass = "flex flex-col",
9
9
  widthClass = "w-full max-w-md",
10
10
  borderClass = "border-[2px] border-primary-500 dark:border-0",
11
+ colorClass = "bg-surface-200 dark:bg-surface-900",
11
12
  marginClass = "",
12
13
  className,
13
14
  includeDataNoSnippet = false,
14
15
  children
15
16
  }: PinyaCardProps = $props();
16
17
 
17
- let cardClass = $derived(`card bg-surface-200 dark:bg-surface-900 text-start rounded-xl
18
- ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`);
18
+ let cardClass = $derived(`card text-start rounded-xl
19
+ ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass} ${colorClass}`);
19
20
  </script>
20
21
 
21
22
  {#if includeDataNoSnippet}
@@ -6,5 +6,6 @@ export interface PinyaCardProps extends WrapperProps {
6
6
  widthClass?: string;
7
7
  borderClass?: string;
8
8
  marginClass?: string;
9
+ colorClass?: string;
9
10
  includeDataNoSnippet?: boolean;
10
11
  }
@@ -1,9 +1,10 @@
1
- export { default as ImageIcon } from "./ImageIcon.svelte";
2
- export { default as TextLink } from "./TextLink.svelte";
3
- export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
4
1
  export * from "./ColorScheme";
5
2
  export * from "./GeneralUIProps";
6
3
  export * from "./OnBackground";
4
+ export * from "./PinyaButtonCommon";
5
+ export { default as ImageIcon } from "./ImageIcon.svelte";
6
+ export { default as TextLink } from "./TextLink.svelte";
7
+ export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
7
8
  export * from "./PinyaCard/index";
8
9
  export * from "./WrapperProps";
9
10
  export * from "./PinyaButton/index";
@@ -1,9 +1,12 @@
1
- export { default as ImageIcon } from "./ImageIcon.svelte";
2
- export { default as TextLink } from "./TextLink.svelte";
3
- export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
1
+ // types
4
2
  export * from "./ColorScheme";
5
3
  export * from "./GeneralUIProps";
6
4
  export * from "./OnBackground";
5
+ export * from "./PinyaButtonCommon";
6
+ // components
7
+ export { default as ImageIcon } from "./ImageIcon.svelte";
8
+ export { default as TextLink } from "./TextLink.svelte";
9
+ export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
7
10
  export * from "./PinyaCard/index";
8
11
  export * from "./WrapperProps";
9
12
  export * from "./PinyaButton/index";
@@ -5,8 +5,8 @@
5
5
  import { default as FourPartCard } from "../../components/FourPartCard.svelte";
6
6
  import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
7
7
  import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
8
- import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
9
8
  import { ItchLogoHotLink } from "../../../consts";
9
+ import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
10
10
 
11
11
  const key = "Hepcat";
12
12
  export { component, key };
@@ -5,8 +5,8 @@
5
5
  import { default as FourPartCard } from "../../components/FourPartCard.svelte";
6
6
  import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
7
7
  import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
8
- import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
9
8
  import { ItchLogoHotLink } from "../../../consts";
9
+ import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
10
10
 
11
11
  const key = "Pengi";
12
12
  export { component, key };
@@ -5,8 +5,8 @@
5
5
  import { default as FourPartCard } from "../../components/FourPartCard.svelte";
6
6
  import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
7
7
  import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
8
- import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
9
8
  import { ItchLogoHotLink } from "../../../consts";
9
+ import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
10
10
 
11
11
  const key = "Soulwork";
12
12
  export { component, key };
@@ -5,8 +5,8 @@
5
5
  import { default as FourPartCard } from "../../components/FourPartCard.svelte";
6
6
  import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
7
7
  import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
8
- import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
9
8
  import { default as TextChip } from "../../elements/text-chip/TextChip.svelte";
9
+ import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
10
10
 
11
11
  const key = "This Webpage";
12
12
  export { component, key };
@@ -1,13 +1,13 @@
1
1
  <script lang="ts">
2
2
  import type { Snippet } from "svelte";
3
+ import { modals } from "svelte-modals";
3
4
  import { m } from "../../../paraglide/messages";
5
+ import { localizeHref } from "../../../paraglide/runtime";
4
6
 
5
7
  import AresLogo from "../../../assets/characters/ares/ares_logo.webp";
6
8
  import SettingsLogo from "../../../assets/icons/icon-settings.svg";
7
9
  import RandomizedBackground from "../../components/randomized-background/RandomizedBackground.svelte";
8
- import { modals } from "svelte-modals";
9
10
  import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
10
- import { localizeHref } from "../../../paraglide/runtime";
11
11
  import { appState } from "./runes.svelte";
12
12
  import { enableBackground } from "../../../store";
13
13
  import DialogOverlay from "../../../components/dialog_overlay/DialogOverlay.svelte";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@turnipxenon/pineapple",
3
3
  "description": "personal package for base styling for other personal projects",
4
- "version": "3.1.0-alpha.6",
4
+ "version": "3.1.0-alpha.8",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && yarn package",
@@ -22,7 +22,7 @@ html {
22
22
  height: calc(var(--dialog-box-height) + 4em);
23
23
  }
24
24
 
25
- .dialog-box a {
25
+ .dialog-box a, .dialog-box b, .dialog-box i {
26
26
  font-size: inherit;
27
27
  }
28
28