@x33025/sveltely 0.1.18 → 0.1.21

package/dist/style.css

@@ -13,11 +13,12 @@
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
     --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
-    --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-zinc-950: oklch(14.1% 0.005 285.823);
     --color-black: #000;
@@ -30,19 +31,11 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --tracking-tight: -0.025em;
-    --tracking-wide: 0.025em;
-    --leading-tight: 1.25;
     --radius-md: 0.375rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -276,6 +269,12 @@
   .table {
     display: table;
   }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -290,9 +289,6 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -356,9 +352,6 @@
   .animate-spin {
     animation: var(--animate-spin);
   }
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .touch-none {
     touch-action: none;
   }
@@ -417,13 +410,6 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -496,18 +482,12 @@
   .bg-zinc-200 {
     background-color: var(--color-zinc-200);
   }
-  .bg-zinc-950 {
-    background-color: var(--color-zinc-950);
-  }
   .object-contain {
     object-fit: contain;
   }
   .object-cover {
     object-fit: cover;
   }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -517,15 +497,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -538,59 +512,29 @@
   .text-left {
     text-align: left;
   }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[15px\] {
-    font-size: 15px;
-  }
   .text-\[17px\] {
     font-size: 17px;
   }
-  .leading-6 {
-    --tw-leading: calc(var(--spacing) * 6);
-    line-height: calc(var(--spacing) * 6);
-  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
   }
-  .leading-8 {
-    --tw-leading: calc(var(--spacing) * 8);
-    line-height: calc(var(--spacing) * 8);
-  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
-  .leading-tight {
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
-  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -599,30 +543,21 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[-0\.03em\] {
-    --tw-tracking: -0.03em;
-    letter-spacing: -0.03em;
-  }
-  .tracking-\[-0\.025em\] {
-    --tw-tracking: -0.025em;
-    letter-spacing: -0.025em;
-  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
-  .tracking-wide {
-    --tw-tracking: var(--tracking-wide);
-    letter-spacing: var(--tracking-wide);
-  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[var\(--sveltely-primary-color\)\] {
-    color: var(--sveltely-primary-color);
+  .text-\[var\(--sveltely-text-primary-color\)\] {
+    color: var(--sveltely-text-primary-color);
+  }
+  .text-\[var\(--sveltely-text-secondary-color\)\] {
+    color: var(--sveltely-text-secondary-color);
   }
-  .text-\[var\(--sveltely-secondary-color\)\] {
-    color: var(--sveltely-secondary-color);
+  .text-\[var\(--sveltely-text-tertiary-color\)\] {
+    color: var(--sveltely-text-tertiary-color);
   }
   .text-gray-700 {
     color: var(--color-gray-700);
@@ -630,22 +565,19 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-zinc-100 {
-    color: var(--color-zinc-100);
-  }
-  .text-zinc-700 {
-    color: var(--color-zinc-700);
-  }
   .text-zinc-950 {
     color: var(--color-zinc-950);
   }
-  .uppercase {
-    text-transform: uppercase;
-  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -698,6 +630,15 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -820,9 +761,9 @@
       background-color: var(--color-zinc-200);
     }
   }
-  .disabled\:text-\[var\(--sveltely-secondary-color\)\] {
+  .disabled\:text-\[var\(--sveltely-text-secondary-color\)\] {
     &:disabled {
-      color: var(--sveltely-secondary-color);
+      color: var(--sveltely-text-secondary-color);
     }
   }
   .disabled\:opacity-50 {
@@ -850,23 +791,13 @@
     --sveltely-padding-x: 0.75rem;
     --sveltely-padding-y: 0.75rem;
     --sveltely-gap: 0.5rem;
-    --sveltely-primary-color: var(--color-zinc-900);
-    --sveltely-secondary-color: var(--color-zinc-500);
-    --sveltely-active-color: var(--color-zinc-900);
-    --sveltely-inactive-color: var(--color-zinc-100);
+    --sveltely-text-primary-color: var(--color-zinc-900);
+    --sveltely-text-secondary-color: var(--color-zinc-500);
+    --sveltely-text-tertiary-color: var(--color-zinc-400);
     --sveltely-background-color: white;
-    --sveltely-hover-color: var(--sveltely-active-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
-    }
-    --sveltely-inactive-hover-color: var(--sveltely-inactive-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);
-    }
-    --sveltely-active-hover-color: var(--sveltely-active-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
-    }
+    --sveltely-control-active-color: var(--color-zinc-900);
+    --sveltely-control-inactive-color: var(--color-zinc-100);
+    --sveltely-control-background-color: var(--color-zinc-50);
     --sveltely-shadow: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 14px rgb(0 0 0 / 0.08);
     --sveltely-border-radius-nested: clamp(
 			0px,
@@ -880,7 +811,7 @@
     height: 100%;
     overflow: hidden;
     background: var(--sveltely-background-color);
-    color: var(--sveltely-primary-color);
+    color: var(--sveltely-text-primary-color);
     -webkit-user-select: none;
     user-select: none;
   }
@@ -892,9 +823,6 @@
     appearance: none;
     background-clip: padding-box;
   }
-  button {
-    cursor: pointer;
-  }
   button:disabled {
     cursor: not-allowed;
   }
@@ -1096,6 +1024,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-ease {
   syntax: "*";
   inherits: false;
@@ -1146,6 +1078,7 @@
       --tw-backdrop-opacity: initial;
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
       --tw-ease: initial;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.18",
+	"version": "0.1.21",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/Library/ArticleEditor/Blocks/ImagePreview.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import { ImageIcon } from '@lucide/svelte';
-
-	let {
-		src,
-		alt,
-		aspectRatio = '4 / 3'
-	} = $props<{
-		src?: string | null;
-		alt: string;
-		aspectRatio?: string;
-	}>();
-
-	let imageLoaded = $state(false);
-	let imageFailed = $state(false);
-
-	$effect(() => {
-		src;
-		imageLoaded = false;
-		imageFailed = false;
-	});
-</script>
-
-<div class="article-image-preview" style={`aspect-ratio: ${aspectRatio};`}>
-	{#if src && !imageFailed}
-		<img
-			{src}
-			{alt}
-			class="article-image-preview-media"
-			class:article-image-preview-media-loaded={imageLoaded}
-			onload={() => (imageLoaded = true)}
-			onerror={() => (imageFailed = true)}
-		/>
-	{/if}
-	{#if !src || !imageLoaded || imageFailed}
-		<div class="article-image-preview-placeholder" aria-hidden="true">
-			<ImageIcon size={32} strokeWidth={1.75} />
-		</div>
-	{/if}
-</div>
-
-<style>
-	.article-image-preview {
-		position: relative;
-		display: grid;
-		place-items: center;
-		overflow: hidden;
-		background: #f4f4f5;
-	}
-
-	.article-image-preview-media {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		opacity: 0;
-		transition: opacity 120ms ease;
-	}
-
-	.article-image-preview-media-loaded {
-		opacity: 1;
-	}
-
-	.article-image-preview-placeholder {
-		position: absolute;
-		inset: 0;
-		display: grid;
-		place-items: center;
-		color: #a1a1aa;
-	}
-</style>

package/dist/components/Library/ArticleEditor/Blocks/ImagePreview.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    src?: string | null;
-    alt: string;
-    aspectRatio?: string;
-};
-declare const ImagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
-type ImagePreview = ReturnType<typeof ImagePreview>;
-export default ImagePreview;