@hkdigital/lib-sveltekit 0.2.20 → 0.2.22

package/dist/themes/hkdev/global/layout.css

@@ -1,39 +1,32 @@
 
-@define-mixin all_layout {
+.page-centered-xl {
+  @apply max-w-xl px-20p mb-40p;
+  @apply flex flex-col;
 
-  .page-centered-xl {
-    @apply max-w-xl px-20p mb-40p;
-    @apply flex flex-col;
-
-    @apply self-center;
-    @apply w-full;
-  }
-
-  .page-full {
-    @apply flex flex-col;
-
-    @apply w-full h-full;
-  }
+  @apply self-center;
+  @apply w-full;
+}
 
-  .page-row {
-    @apply w-full flex flex-col;
-  }
+.page-full {
+  @apply flex flex-col;
 
+  @apply w-full h-full;
+}
 
-  .page-ui-margins
-  {
-    @apply mt-120p;
-    @apply mr-20p;
-    @apply mb-120p;
-    @apply ml-20p;
-  }
+.page-row {
+  @apply w-full flex flex-col;
+}
 
-  .page-ui-margins-equal
-  {
-    @apply mt-20p;
-    @apply mr-20p;
-    @apply mb-20p;
-    @apply ml-20p;
-  }
+.page-ui-margins {
+  @apply mt-120p;
+  @apply mr-20p;
+  @apply mb-120p;
+  @apply ml-20p;
+}
 
+.page-ui-margins-equal {
+  @apply mt-20p;
+  @apply mr-20p;
+  @apply mb-20p;
+  @apply ml-20p;
 }

package/dist/themes/hkdev/global/on-colors.css

@@ -1,53 +1,32 @@
-
-@define-mixin on_surface_dark {
-  
-  & .h1 {
-    color: rgb(var(--color-primary-contrast-light));
-  }
-
-  & .p {
-    color: rgb(var(--color-primary-contrast-light));
-  }
-
-  & .a {
-    color: rgb(var(--color-primary-contrast-light));
-  }
-
-  & svg {
-    color: rgb(var(--color-primary-contrast-light));
-  }
-
+& .h1 {
+  color: var(--color-primary-contrast-light);
 }
 
-@define-mixin on_surface_light {
-  
-  & .h1 {
-    color: rgb(var(--color-surface-950));
-  }
-
-  & .p {
-    color: rgb(var(--color-surface-500));
-  }
+& .p {
+  color: var(--color-primary-contrast-light);
+}
 
-  & .a {
-    color: rgb(var(--color-surface-500));
-  }
+& .a {
+  color: var(--color-primary-contrast-light);
+}
 
-  & svg {
-    color: rgb(var(--color-surface-500));
-  }
-  
+& svg {
+  color: var(--color-primary-contrast-light);
 }
 
-@define-mixin all_on_colors {
+& .h1 {
+  color: var(--color-surface-950);
+}
 
-  /* .on-primary-dark < :not('cancel-on-primary-dark') */
-  .on-primary-dark {
-    @mixin on_surface_dark;
-  }
+& .p {
+  color: var(--color-surface-500);
+}
 
-  .on-primary-light {    
-    @mixin on_surface_light;
-  }
+& .a {
+  color: var(--color-surface-500);
+}
 
+& svg {
+  color: var(--color-surface-500);
 }
+

package/dist/themes/hkdev/globals.css

@@ -1,11 +1,4 @@
 /*@import "./global/vars.css";*/
-/*@import "./global/on-colors.css";*/
+@import "./global/on-colors.css";
 @import './global/layout.css';
-/*@import "./global/text.css";*/
-
-[data-theme='hkdev'] {
-  /*  @mixin all_vars;*/
-  /*  @mixin all_on_colors;*/
-  @mixin all_layout;
-  /*  @mixin all_text;*/
-}
+/*@import "./global/text.css";*/

package/dist/themes/hkdev/theme-ext.js

@@ -1,15 +1,12 @@
-import theme from '../hkdev/theme.js';
-
 import { theme as themeStore } from '../../stores/index.js';
 
 /**
  * Set meta them color for the current theme
  */
 export function setMetaThemeColor() {
-  const props = theme.properties;
-
-  themeStore.setMetaThemeColor(`rgb( ${props['--color-surface-950']})`);
+  const surfaceColor = getComputedStyle(document.documentElement)
+    .getPropertyValue('--color-surface-950')
+    .trim();
 
-  // setMetaThemeColorDark(`rgb( ${props['--color-primary-950']})`);
-  // setMetaThemeColorBase(`rgb( ${props['--color-primary-50']})`);
+  themeStore.setMetaThemeColor(`rgb(${surfaceColor})`);
 }

package/dist/themes/hkdev/theme.css

@@ -0,0 +1,219 @@
+[data-theme='hkdev'] {
+  --text-scaling: 1.067;
+  --base-font-color: var(--color-surface-950);
+  --base-font-color-dark: var(--color-surface-50);
+  --base-font-family: mulish, system-ui, sans-serif;
+  --base-font-size: inherit;
+  --base-line-height: inherit;
+  --base-font-weight: normal;
+  --base-font-style: normal;
+  --base-letter-spacing: 0em;
+  --heading-font-color: var(--color-surface-950);
+  --heading-font-color-dark: var(--color-surface-50);
+  --heading-font-family: 'Guyot-Sans', system-ui, sans-serif;
+  --heading-font-weight: 900;
+  --heading-font-style: normal;
+  --heading-letter-spacing: inherit;
+  --anchor-font-color: var(--color-primary-500);
+  --anchor-font-color-dark: var(--color-primary-500);
+  --anchor-font-family: inherit;
+  --anchor-font-size: inherit;
+  --anchor-line-height: inherit;
+  --anchor-font-weight: inherit;
+  --anchor-font-style: inherit;
+  --anchor-letter-spacing: inherit;
+  --anchor-text-decoration: none;
+  --anchor-text-decoration-hover: underline;
+  --anchor-text-decoration-active: none;
+  --anchor-text-decoration-focus: none;
+  --spacing: 0.25rem;
+  --radius-base: 6px;
+  --radius-container: 12px;
+  --default-border-width: 1px;
+  --default-divide-width: 1px;
+  --default-ring-width: 1px;
+  --body-background-color: var(--color-surface-50);
+  --body-background-color-dark: var(--color-surface-950);
+  
+  /* Primary Colors */
+	--color-primary-50: oklch(100% 0 none);
+	--color-primary-100: oklch(89.21% 0.06 344.59deg);
+	--color-primary-200: oklch(79.1% 0.13 346.59deg);
+	--color-primary-300: oklch(70.14% 0.19 348.99deg);
+	--color-primary-400: oklch(63.52% 0.23 352.85deg);
+	--color-primary-500: oklch(59.83% 0.24 358.78deg);
+	--color-primary-600: oklch(55.33% 0.22 358.81deg);
+	--color-primary-700: oklch(50.94% 0.2 359.11deg);
+	--color-primary-800: oklch(46.26% 0.18 359.76deg);
+	--color-primary-900: oklch(41.75% 0.16 0.47deg);
+	--color-primary-950: oklch(37.02% 0.14 1.33deg);
+  --color-primary-contrast-dark: var(--color-primary-950);
+  --color-primary-contrast-light: var(--color-primary-50);
+  --color-primary-contrast-50: var(--color-primary-contrast-dark);
+  --color-primary-contrast-100: var(--color-primary-contrast-dark);
+  --color-primary-contrast-200: var(--color-primary-contrast-dark);
+  --color-primary-contrast-300: var(--color-primary-contrast-dark);
+  --color-primary-contrast-400: var(--color-primary-contrast-light);
+  --color-primary-contrast-500: var(--color-primary-contrast-light);
+  --color-primary-contrast-600: var(--color-primary-contrast-light);
+  --color-primary-contrast-700: var(--color-primary-contrast-light);
+  --color-primary-contrast-800: var(--color-primary-contrast-light);
+  --color-primary-contrast-900: var(--color-primary-contrast-light);
+  --color-primary-contrast-950: var(--color-primary-contrast-light);
+  
+  /* Secondary Colors */
+	--color-secondary-50: oklch(100% 0 none);
+	--color-secondary-100: oklch(92.02% 0.04 56.93deg);
+	--color-secondary-200: oklch(84.06% 0.08 54.85deg);
+	--color-secondary-300: oklch(76.66% 0.12 53.95deg);
+	--color-secondary-400: oklch(69.69% 0.15 50.67deg);
+	--color-secondary-500: oklch(63.83% 0.18 44.57deg);
+	--color-secondary-600: oklch(60.17% 0.18 43.16deg);
+	--color-secondary-700: oklch(56.48% 0.17 41.6deg);
+	--color-secondary-800: oklch(52.69% 0.16 40.52deg);
+	--color-secondary-900: oklch(48.91% 0.15 38.6deg);
+	--color-secondary-950: oklch(45.09% 0.15 36.44deg);
+  --color-secondary-contrast-dark: var(--color-secondary-950);
+  --color-secondary-contrast-light: var(--color-secondary-50);
+  --color-secondary-contrast-50: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-100: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-200: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-300: var(--color-secondary-contrast-dark);
+  --color-secondary-contrast-400: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-500: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-600: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-700: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-800: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-900: var(--color-secondary-contrast-light);
+  --color-secondary-contrast-950: var(--color-secondary-contrast-light);
+  
+  /* Tertiary Colors */
+	--color-tertiary-50: oklch(100% 0 none);
+	--color-tertiary-100: oklch(91.02% 0.03 239.84deg);
+	--color-tertiary-200: oklch(81.89% 0.07 242.23deg);
+	--color-tertiary-300: oklch(73.25% 0.1 243.03deg);
+	--color-tertiary-400: oklch(64.86% 0.14 246.03deg);
+	--color-tertiary-500: oklch(57.51% 0.16 250.54deg);
+	--color-tertiary-600: oklch(53.76% 0.16 252.89deg);
+	--color-tertiary-700: oklch(49.99% 0.16 255.29deg);
+	--color-tertiary-800: oklch(46.26% 0.16 257.75deg);
+	--color-tertiary-900: oklch(42.46% 0.16 260.05deg);
+	--color-tertiary-950: oklch(38.66% 0.16 262.13deg);
+  --color-tertiary-contrast-dark: var(--color-tertiary-950);
+  --color-tertiary-contrast-light: var(--color-tertiary-50);
+  --color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
+  --color-tertiary-contrast-400: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
+  --color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
+  
+  /* Success Colors */
+	--color-success-50: oklch(100% 0 none);
+	--color-success-100: oklch(92.84% 0.04 120.75deg);
+	--color-success-200: oklch(85.91% 0.08 122.19deg);
+	--color-success-300: oklch(78.79% 0.12 123.79deg);
+	--color-success-400: oklch(72.08% 0.15 125.47deg);
+	--color-success-500: oklch(65.33% 0.17 127.94deg);
+	--color-success-600: oklch(60.9% 0.16 127.69deg);
+	--color-success-700: oklch(56.39% 0.14 127.39deg);
+	--color-success-800: oklch(51.72% 0.13 127.41deg);
+	--color-success-900: oklch(47.01% 0.12 127.01deg);
+	--color-success-950: oklch(42.19% 0.1 126.49deg);
+  --color-success-contrast-dark: var(--color-success-950);
+  --color-success-contrast-light: var(--color-success-50);
+  --color-success-contrast-50: var(--color-success-contrast-dark);
+  --color-success-contrast-100: var(--color-success-contrast-dark);
+  --color-success-contrast-200: var(--color-success-contrast-dark);
+  --color-success-contrast-300: var(--color-success-contrast-dark);
+  --color-success-contrast-400: var(--color-success-contrast-dark);
+  --color-success-contrast-500: var(--color-success-contrast-light);
+  --color-success-contrast-600: var(--color-success-contrast-light);
+  --color-success-contrast-700: var(--color-success-contrast-light);
+  --color-success-contrast-800: var(--color-success-contrast-light);
+  --color-success-contrast-900: var(--color-success-contrast-light);
+  --color-success-contrast-950: var(--color-success-contrast-light);
+  
+  /* Warning Colors */
+	--color-warning-50: oklch(100% 0 none);
+	--color-warning-100: oklch(94.18% 0.04 94.27deg);
+	--color-warning-200: oklch(88.37% 0.08 95.33deg);
+	--color-warning-300: oklch(82.58% 0.11 94.03deg);
+	--color-warning-400: oklch(77.04% 0.13 93.57deg);
+	--color-warning-500: oklch(71.79% 0.14 90.64deg);
+	--color-warning-600: oklch(67.54% 0.14 90.18deg);
+	--color-warning-700: oklch(63.12% 0.13 88.36deg);
+	--color-warning-800: oklch(58.72% 0.12 87.66deg);
+	--color-warning-900: oklch(54.14% 0.11 85.27deg);
+	--color-warning-950: oklch(49.57% 0.1 84.14deg);
+  --color-warning-contrast-dark: var(--color-warning-950);
+  --color-warning-contrast-light: var(--color-warning-50);
+  --color-warning-contrast-50: var(--color-warning-contrast-dark);
+  --color-warning-contrast-100: var(--color-warning-contrast-dark);
+  --color-warning-contrast-200: var(--color-warning-contrast-dark);
+  --color-warning-contrast-300: var(--color-warning-contrast-dark);
+  --color-warning-contrast-400: var(--color-warning-contrast-dark);
+  --color-warning-contrast-500: var(--color-warning-contrast-light);
+  --color-warning-contrast-600: var(--color-warning-contrast-light);
+  --color-warning-contrast-700: var(--color-warning-contrast-light);
+  --color-warning-contrast-800: var(--color-warning-contrast-light);
+  --color-warning-contrast-900: var(--color-warning-contrast-light);
+  --color-warning-contrast-950: var(--color-warning-contrast-light);
+  
+  /* Error Colors */
+	--color-error-50: oklch(100% 0 none);
+	--color-error-100: oklch(90.1% 0.04 12.28deg);
+	--color-error-200: oklch(80.53% 0.09 12.75deg);
+	--color-error-300: oklch(71.54% 0.14 14.79deg);
+	--color-error-400: oklch(63.85% 0.18 17.92deg);
+	--color-error-500: oklch(58.16% 0.21 22.85deg);
+	--color-error-600: oklch(53.02% 0.19 22.7deg);
+	--color-error-700: oklch(47.67% 0.17 22.71deg);
+	--color-error-800: oklch(42.25% 0.15 22.49deg);
+	--color-error-900: oklch(36.57% 0.13 22.46deg);
+	--color-error-950: oklch(30.75% 0.11 22.06deg);
+  --color-error-contrast-dark: var(--color-error-950);
+  --color-error-contrast-light: var(--color-error-50);
+  --color-error-contrast-50: var(--color-error-contrast-dark);
+  --color-error-contrast-100: var(--color-error-contrast-dark);
+  --color-error-contrast-200: var(--color-error-contrast-dark);
+  --color-error-contrast-300: var(--color-error-contrast-dark);
+  --color-error-contrast-400: var(--color-error-contrast-dark);
+  --color-error-contrast-500: var(--color-error-contrast-light);
+  --color-error-contrast-600: var(--color-error-contrast-light);
+  --color-error-contrast-700: var(--color-error-contrast-light);
+  --color-error-contrast-800: var(--color-error-contrast-light);
+  --color-error-contrast-900: var(--color-error-contrast-light);
+  --color-error-contrast-950: var(--color-error-contrast-light);
+  
+  /* Surface Colors */
+	--color-surface-50: oklch(100% 0 none);
+	--color-surface-100: oklch(89.43% 0.04 261.71deg);
+	--color-surface-200: oklch(78.91% 0.09 261.69deg);
+	--color-surface-300: oklch(68.77% 0.13 260.58deg);
+	--color-surface-400: oklch(59% 0.18 260.54deg);
+	--color-surface-500: oklch(50.57% 0.22 261.54deg);
+	--color-surface-600: oklch(46.58% 0.2 261.41deg);
+	--color-surface-700: oklch(42.51% 0.18 261.24deg);
+	--color-surface-800: oklch(38.37% 0.16 261.17deg);
+	--color-surface-900: oklch(34.11% 0.13 260.96deg);
+	--color-surface-950: oklch(29.76% 0.11 260.7deg);
+  --color-surface-contrast-dark: var(--color-surface-950);
+  --color-surface-contrast-light: var(--color-surface-50);
+  --color-surface-contrast-50: var(--color-surface-contrast-dark);
+  --color-surface-contrast-100: var(--color-surface-contrast-dark);
+  --color-surface-contrast-200: var(--color-surface-contrast-dark);
+  --color-surface-contrast-300: var(--color-surface-contrast-dark);
+  --color-surface-contrast-400: var(--color-surface-contrast-light);
+  --color-surface-contrast-500: var(--color-surface-contrast-light);
+  --color-surface-contrast-600: var(--color-surface-contrast-light);
+  --color-surface-contrast-700: var(--color-surface-contrast-light);
+  --color-surface-contrast-800: var(--color-surface-contrast-light);
+  --color-surface-contrast-900: var(--color-surface-contrast-light);
+  --color-surface-contrast-950: var(--color-surface-contrast-light);
+}

package/dist/themes/index.d.ts

@@ -1 +1 @@
-export { default as hkdev } from "./hkdev/theme.js";
+export {};

package/dist/util/design-system/skeleton.js

@@ -51,22 +51,22 @@ export function customUtilitiesPlugin({ addUtilities, theme }) {
 
   const textColorUtilities = {
     '.text-base-color': {
-      color: 'rgb( var(--base-font-color) )'
+      color: 'var(--base-font-color)'
     },
     '.text-base-color-dark': {
-      color: 'rgb( var(--base-font-color-dark) )'
+      color: 'var(--base-font-color-dark)'
     },
     '.text-heading-color': {
-      color: 'rgb( var(--heading-font-color) )'
+      color: 'var(--heading-font-color)'
     },
     '.text-heading-color-dark': {
-      color: 'rgb( var(--heading-font-color-dark) )'
+      color: 'var(--heading-font-color-dark)'
     },
     '.text-ui-color': {
-      color: 'rgb( var(--ui-font-color, var(--base-font-color)) )'
+      color: 'var(--ui-font-color, var(--base-font-color))'
     },
     '.text-ui-color-dark': {
-      color: 'rgb( var(--ui-font-color-dark, var(--base-font-color-dark)) )'
+      color: 'var(--ui-font-color-dark, var(--base-font-color-dark))'
     }
   };
 
@@ -142,12 +142,12 @@ function generateTypographyUtilities(theme) {
         fontStyle: 'var(--heading-font-style)',
         fontWeight: 'var(--heading-font-weight)',
         letterSpacing: 'var(--heading-letter-spacing)',
-        color: 'rgb(var(--heading-font-color))'
+        color: 'var(--heading-font-color)'
       };
 
       propertiesDark = {
         ...properties,
-        color: 'rgb(var(--heading-font-color-dark))'
+        color: 'var(--heading-font-color-dark)'
       };
     } else if (key.startsWith('base-')) {
       properties = {
@@ -155,12 +155,12 @@ function generateTypographyUtilities(theme) {
         fontFamily: 'var(--base-font-family)',
         fontWeight: 'var(--base-font-weight)',
         letterSpacing: 'var(--base-letter-spacing)',
-        color: 'rgb(var(--base-font-color))'
+        color: 'var(--base-font-color)'
       };
 
       propertiesDark = {
         ...properties,
-        color: 'rgb(var(--base-font-color-dark))'
+        color: 'var(--base-font-color-dark)'
       };
     } else if (key.startsWith('ui-')) {
       properties = {
@@ -168,12 +168,12 @@ function generateTypographyUtilities(theme) {
         fontFamily: 'var(--ui-font-family, var(--base-font-family))',
         fontWeight: 'var(--ui-font-weight)',
         letterSpacing: 'var(--ui-letter-spacing, var(--base-letter-spacing))',
-        color: 'rgb(var(--ui-font-color, var(--base-font-color)))'
+        color: 'var(--ui-font-color, var(--base-font-color))'
       };
 
       propertiesDark = {
         ...properties,
-        color: 'rgb(var(--ui-font-color-dark, var(--base-font-color-dark)))'
+        color: 'var(--ui-font-color-dark, var(--base-font-color-dark))'
       };
     }
 

package/dist/util/exceptions/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Creates a new Error from the error message and throws it with a reference
+ * to the originating Error
+ * - The originating Error is set as `cause` property
+ *
+ * @param {string} message - Additional message to prepend
+ * @param {Error|string} error - Original error
+ *
+ * @throws {Error}
+ */
+export function rethrow(message: string, error: Error | string): void;

package/dist/util/exceptions/index.js

@@ -0,0 +1,17 @@
+/**
+ * Creates a new Error from the error message and throws it with a reference
+ * to the originating Error
+ * - The originating Error is set as `cause` property
+ *
+ * @param {string} message - Additional message to prepend
+ * @param {Error|string} error - Original error
+ *
+ * @throws {Error}
+ */
+export function rethrow(message, error) {
+  if (!(error instanceof Error)) {
+    // Convert non-Error values to Error objects
+    error = new Error(String(error));
+  }
+  throw new Error(message, { cause: error });
+}

package/dist/util/index.d.ts

@@ -1,2 +1,3 @@
+export * as exceptions from "./exceptions/index.js";
 export * as expect from "./expect/index.js";
 export * as singleton from "./singleton/index.js";

package/dist/util/index.js

@@ -1,2 +1,3 @@
+export * as exceptions from './exceptions/index.js';
 export * as expect from './expect/index.js';
 export * as singleton from './singleton/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.2.20",
+	"version": "0.2.22",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"
@@ -88,8 +88,8 @@
 	"devDependencies": {
 		"@eslint/js": "^9.28.0",
 		"@playwright/test": "^1.52.0",
-		"@skeletonlabs/skeleton": "3.0.0-next.2",
-		"@skeletonlabs/skeleton-svelte": "1.0.0-next.4",
+		"@skeletonlabs/skeleton": "3.0.0",
+		"@skeletonlabs/skeleton-svelte": "1.2.3",
 		"@steeze-ui/heroicons": "^2.4.2",
 		"@sveltejs/adapter-auto": "^6.0.1",
 		"@sveltejs/package": "^2.3.11",
@@ -106,6 +106,7 @@
 		"fake-indexeddb": "^6.0.0",
 		"globals": "^16.2.0",
 		"jsdom": "^26.1.0",
+		"npm-check-updates": "^18.0.1",
 		"npm-run-all": "^4.1.5",
 		"pino": "^9.7.0",
 		"pino-pretty": "^13.0.0",
@@ -119,11 +120,14 @@
 		"svelte": "^5.33.16",
 		"svelte-check": "^4.2.1",
 		"svelte-preprocess": "^6.0.3",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.1.10",
 		"typescript": "^5.8.3",
 		"vite": "^6.3.5",
 		"vite-imagetools": "^7.1.0",
 		"vitest": "^3.2.2",
 		"zod": "^3.24.2"
+	},
+	"dependencies": {
+		"@tailwindcss/postcss": "^4.1.11"
 	}
 }