@hkdigital/lib-sveltekit 0.2.20 → 0.2.22

package/README.md

@@ -13,14 +13,6 @@ Do not use in production environments yet.
 
 ### TODO
 
-Add information about Skeleton, theming and imagetools
-
-## A note about tailwindcss
-
-Components in this package use [tailwindcss](https://tailwindcss.com/).
-
-To compile tailwind classes inside this package, you must add the package location to your tailwindcss plugin configuration (instructions below).
-
 ## Using the library
 
 ### Install
@@ -31,37 +23,51 @@ The library can be installed as a normal NPM library.
 pnpm add @hkdigital/lib-sveltekit
 ```
 
-### Update
+#### Tailwind
 
-We use a global installion of the `ncu` package to upgrade our `package.json`. Install `ncu` first if you don't have it yet
+Components in this package use [tailwindcss](https://tailwindcss.com/).
 
-```bash
-npm install -g npm-check-updates
+To compile tailwind classes inside this package, you must add the package location to your tailwindcss plugin configuration.
+
+```
+// tailwind.config.js
+export default {
+  content: [
+    './node_modules/@hkdigital/**/*.{html,js,svelte,ts}',
+    './src/**/*.{html,js,svelte,ts}',
 ```
 
-Upgrading works as follows:
+### Update
+
+Make sure your project has a script called `upgrade:hk` to upgrade all packages
+in the '@hkdigital' namespace.
 
 ```bash
-ncu "@hkdigital/*" -u && pnpm install
+pnpm upgrade:hk
 ```
 
-We use a wildcard to upgrade all installed `node_modules` in the scope `@hkdigital`.
-
-You can also add this command to your project. To do so, add the lines to the bottom of the `scripts` section of your `package.json`.
+### The package.json scripts:
 
 ```bash
-"upgrade:hk": "ncu --dep dev,optional,peer,prod '@hkdigital/*' -u && pnpm install",
-"upgrade:all": "ncu -u && pnpm install"
+pnpm add -D npm-check-updates
+pnpm add -D npm-check-updates
 ```
 
-### Import JS & Svelte
+```js
+"scripts": {
+  "upgrade:hk": "run-s upgrade:hk:update pnpm:install",
+  "upgrade:hk:update": "ncu --dep dev,optional,peer,prod '@hkdigital/*' -u",
+  "pnpm:install": "pnpm install"
+}
+```
 
-All exports are in subfolders.
 
-For example to import a constant from `constants/regexp/index.js`
+### Import JS, Svelte files and Typedefs
+
+Most subfolders have an index.js that export all functionality and typedefs.
 
 ```svelte
-import { CHAR } from '@hkdigital/lib-sveltekit/constants/regexp';
+import { CHAR } from '@hkdigital/lib-sveltekit/constants/regexp/index.js';
 ```
 
 ### Import CSS
@@ -130,6 +136,14 @@ npm publish --access public
 pnpm run publish:npm
 ```
 
+### Troubleshooting
+
+#### Running scripts from package.json in Windows
+
+The CMD terminal in Windows is quite limited. Use the PowerShell instead of some scripts from package.json do not run correctly.
+
+
 ## Contribute
 
-If your wish to contribute to this library, please contact us [HKdigital](https://hkdigital.nl/contact). Alternatively, the license permits you to fork the library and publish under an alternative name. Change the package name in [package.json](./package.json) to do so.
+If your wish to contribute to this library, please contact us [HKdigital](https://hkdigital.nl/contact). Alternatively, the license permits you to fork the library and publish under an alternative name. Don't forget to change the package name in [package.json](./package.json) if you do so.
+

package/dist/themes/hkdev/components/blocks/text-block.css

@@ -1,5 +1,3 @@
-@define-mixin text_block {
-
 /* .on-primary-dark
 {
   & [data-title-text-button-block] {
@@ -14,7 +12,6 @@
 } */
 
 [data-title-text-button-block] {
-
   &.block-width {
     @apply w-1/2;
   }
@@ -28,14 +25,10 @@
     @apply text-base-md;
   }
 
-  & > .content-box:has( + .footer-box )
-  {
+  & > .content-box:has(+ .footer-box) {
     @apply mb-30p; /* 10p + 20p */
   }
 
   & > .footer-box {
   }
 }
-
-
-}

package/dist/themes/hkdev/components/boxes/game-box.css

@@ -1,6 +1,5 @@
 @import '../../global/on-colors.css';
 
-@define-mixin boxes-game-box {
   [data-boxes='game-box'] {
     /*& .game-box-padding-20p {
       @apply mt-20p;
@@ -9,4 +8,4 @@
       @apply ml-20p;
     }*/
   }
-}
+

package/dist/themes/hkdev/components/buttons/button.css

@@ -1,4 +1,4 @@
-@define-mixin component-button {
+
   [data-component='button'] {
     /* ---- Core Button Variables ---- */
 
@@ -73,48 +73,48 @@
   /* Role-based styling for primary buttons */
   [data-component='button'][data-role='primary'] {
     @apply border-width-normal;
-    border-color: rgb(var(--btn-primary-border));
-    background-color: rgb(var(--btn-primary-bg));
-    color: rgb(var(--btn-primary-text));
+    border-color: var(--btn-primary-border);
+    background-color: var(--btn-primary-bg);
+    color: var(--btn-primary-text);
 
     &:hover:not(:disabled):not(.state-selected) {
-      border-color: rgb(var(--btn-primary-hover-border));
-      background-color: rgb(var(--btn-primary-hover-bg));
+      border-color: var(--btn-primary-hover-border);
+      background-color: var(--btn-primary-hover-bg);
     }
 
     &:focus-visible {
-      @apply outline outline-normal outline-offset-normal;
-      outline-color: rgb(var(--btn-primary-focus-outline));
+      @apply outline-normal outline-offset-normal;
+      outline-color: var(--btn-primary-focus-outline);
     }
 
     &.state-selected {
-      background-color: rgb(var(--btn-primary-selected-bg));
-      border-color: rgb(var(--btn-primary-selected-border));
-      color: rgb(var(--btn-primary-selected-text));
+      background-color: var(--btn-primary-selected-bg);
+      border-color: var(--btn-primary-selected-border);
+      color: var(--btn-primary-selected-text);
     }
   }
 
   /* Role-based styling for secondary buttons */
   [data-component='button'][data-role='secondary'] {
     @apply border-width-normal;
-    border-color: rgb(var(--btn-secondary-border));
-    color: rgb(var(--btn-secondary-text));
+    border-color: var(--btn-secondary-border);
+    color: var(--btn-secondary-text);
     background-color: var(--btn-secondary-bg);
 
     &:hover:not(:disabled):not(.state-selected) {
-      background-color: rgb(var(--btn-secondary-hover-bg));
-      border-color: rgb(var(--btn-secondary-hover-border));
+      background-color: var(--btn-secondary-hover-bg);
+      border-color: var(--btn-secondary-hover-border);
     }
 
     &:focus-visible {
       @apply outline outline-normal outline-offset-normal;
-      outline-color: rgb(var(--btn-secondary-focus-outline));
+      outline-color: var(--btn-secondary-focus-outline);
     }
 
     &.state-selected {
-      background-color: rgb(var(--btn-secondary-selected-bg));
-      border-color: rgb(var(--btn-secondary-selected-border));
-      color: rgb(var(--btn-secondary-selected-text));
+      background-color: var(--btn-secondary-selected-bg);
+      border-color: var(--btn-secondary-selected-border);
+      color: var(--btn-secondary-selected-text);
     }
   }
 
@@ -128,7 +128,7 @@
     }
 
     &.state-error {
-      border-color: rgb(var(--btn-error-border));
+      border-color:var(--btn-error-border);
     }
 
     &.state-loading {
@@ -143,4 +143,4 @@
     opacity: var(--btn-disabled-opacity);
     pointer-events: none;
   }
-}
+

package/dist/themes/hkdev/components/buttons/skip-button.css

@@ -1,6 +1,5 @@
 @import '../../global/on-colors.css';
 
-@define-mixin buttons-skip-button {
   [data-button='skip-button'] {
   }
-}
+

package/dist/themes/hkdev/components/drag-drop/draggable.css

@@ -1,4 +1,4 @@
-@define-mixin component-draggable {
+
   [data-component='draggable'] {
     user-select: none;
     transition:
@@ -70,4 +70,4 @@
       opacity: 1;
     }
   }
-}
+

package/dist/themes/hkdev/components/drag-drop/drop-zone.css

@@ -1,48 +1,58 @@
-@define-mixin component-drop-zone {
-  /* Visual styling and customizable aspects */
-  [data-component='drop-zone'] {
-    /*min-height: 100px;*/
-    border: 1px dashed rgb(var(--color-surface-400));
-    border-radius: var(--theme-rounded-container);
-    /*padding: 1rem;*/
-    transition: all 0.2s ease;
-    position: relative;
-    background-color: rgb(var(--color-surface-50) / 0.5);
+/* Visual styling and customizable aspects */
+[data-component='drop-zone'] {
+  /*min-height: 100px;*/
+  border: 1px dashed var(--color-surface-400);
+  border-radius: var(--theme-rounded-container);
+  /*padding: 1rem;*/
+  transition: all 0.2s ease;
+  position: relative;
+  background-color: --alpha(var(--color-surface-50) / 0.5);
 
-    /* State-based styling using state classes - visual aspects only */
-    &.state-ready {
-      border-color: rgb(var(--color-surface-400));
-      background-color: transparent;
-    }
-
-    &.state-drag-over {
-      border-color: rgb(var(--color-primary-400));
-      background-color: rgb(var(--color-primary-500) / 0.05);
-    }
+  /* State-based styling using state classes - visual aspects only */
+  &.state-ready {
+    border-color: var(--color-surface-400);
+    background-color: transparent;
+  }
 
-    &.state-can-drop {
-      border-color: rgb(var(--color-success-500));
-      background-color: rgb(var(--color-success-500) / 0.08);
-      box-shadow: 0 0 0 3px rgb(var(--color-success-500) / 0.2);
-    }
+  &.state-drag-over {
+    border-color: var(--color-primary-400);
+    background-color: color-mix(
+      in oklch,
+      var(--color-primary-500) 5%,
+      transparent
+    );
+  }
+  &.state-can-drop {
+    border-color: var(--color-success-500);
+    background-color: color-mix(
+      in oklch,
+      var(--color-success-500) 8%,
+      transparent
+    );
+    box-shadow: 0 0 0 3px
+      color-mix(in oklch, var(--color-success-500) 20%, transparent);
+  }
 
-    &.state-cannot-drop {
-      border-color: rgb(var(--color-error-500));
-      background-color: rgb(var(--color-error-500) / 0.08);
-      cursor: not-allowed;
-    }
+  &.state-cannot-drop {
+    border-color: var(--color-error-500);
+    background-color: color-mix(
+      in oklch,
+      var(--color-error-500) 8%,
+      transparent
+    );
+    cursor: not-allowed;
+  }
 
-    /*&.state-drop-disabled {
+  /*&.state-drop-disabled {
       opacity: 0.5;
       cursor: not-allowed;
-      background-color: rgb(var(--color-surface-100));
+      background-color: var(--color-surface-100);
     }*/
-  }
+}
 
-  /* Default styling for inner elements - all visual/customizable */
-  [data-layer='content'],
-  [data-layer='preview'],
-  [data-layer='empty'] {
-    @apply type-base-md;
-  }
+/* Default styling for inner elements - all visual/customizable */
+[data-layer='content'],
+[data-layer='preview'],
+[data-layer='empty'] {
+  @apply type-base-md;
 }

package/dist/themes/hkdev/components/icons/icon-steeze.css

@@ -1,22 +1,16 @@
-@define-mixin component-icon-steeze {
+/* @note using CSS vars defined in the parent button postcss */
 
-  /* @note using CSS vars defined in the parent button postcss */
-
-  /* Type-based styling for text buttons */
-  [data-component="icon"][data-type="steeze"] {
-
-    &[data-size="sm"] {
-      @apply w-16bt h-16bt;
-    }
-
-    &[data-size="md"] {
-      @apply w-28bt h-28bt;
-    }
-
-    &[data-size="lg"] {
-      @apply w-50bt h-50bt;
-    }
+/* Type-based styling for text buttons */
+[data-component='icon'][data-type='steeze'] {
+  &[data-size='sm'] {
+    @apply w-16bt h-16bt;
+  }
 
+  &[data-size='md'] {
+    @apply w-28bt h-28bt;
   }
 
-}
+  &[data-size='lg'] {
+    @apply w-50bt h-50bt;
+  }
+}

package/dist/themes/hkdev/components/inputs/text-input.css

@@ -1,103 +1,101 @@
 /*@import "../../global/on-colors.css";*/
 
-@define-mixin inputs-text-input {
-  [data-input='text-input'] {
-    /* Base */
+[data-input='text-input'] {
+  /* Base */
 
-    /* Required and disabled */
+  /* Required and disabled */
 
-    &.required {
-    }
-    &.disabled {
+  &.required {
+  }
+  &.disabled {
+  }
+
+  /* Focus */
+
+  &.focused {
+    border: solid thin black;
+
+    & [data-child='legend'] {
+      color: black;
     }
 
-    /* Focus */
+    & [data-child='input'] {
+      color: black;
+    }
+  }
 
-    &.focused {
-      border: solid thin black;
+  &.unfocused {
+    border: solid thin grey;
 
-      & [data-child='legend'] {
-        color: black;
-      }
+    & [data-child='legend'] {
+      color: grey;
+    }
 
-      & [data-child='input'] {
-        color: black;
-      }
+    & [data-child='input'] {
+      color: grey;
     }
+  }
 
-    &.unfocused {
-      border: solid thin grey;
+  /* Invalid */
+  &.invalid {
+    &.pristine [data-child='legend'] {
+      color: white;
+      background-color: orange;
+    }
 
-      & [data-child='legend'] {
-        color: grey;
+    &.dirty {
+      &.focused [data-child='legend'] {
+        color: black;
+        background-color: yellow;
       }
 
-      & [data-child='input'] {
-        color: grey;
+      &.unfocused [data-child='legend'] {
+        color: white;
+        background-color: red;
       }
     }
+  }
 
-    /* Invalid */
-    &.invalid {
-      &.pristine [data-child='legend'] {
-        color: white;
-        background-color: orange;
-      }
+  /* Pristine (valid-invalid) */
 
-      &.dirty {
-        &.focused [data-child='legend'] {
-          color: black;
-          background-color: yellow;
-        }
+  &.pristine.valid {
+    & [data-child='icon-box'] {
+      color: grey;
+    }
+  }
 
-        &.unfocused [data-child='legend'] {
-          color: white;
-          background-color: red;
-        }
-      }
+  &.pristine.invalid {
+    & [data-child='icon-box'] {
+      color: orange;
     }
+  }
 
-    /* Pristine (valid-invalid) */
+  /* Dirty (valid-invalid) */
 
-    &.pristine.valid {
+  &.dirty.valid {
+    &.focused {
       & [data-child='icon-box'] {
         color: grey;
       }
     }
 
-    &.pristine.invalid {
+    &.unfocused {
       & [data-child='icon-box'] {
-        color: orange;
+        color: green;
       }
     }
+  }
 
-    /* Dirty (valid-invalid) */
-
-    &.dirty.valid {
-      &.focused {
-        & [data-child='icon-box'] {
-          color: grey;
-        }
-      }
-
-      &.unfocused {
-        & [data-child='icon-box'] {
-          color: green;
-        }
+  &.dirty.invalid {
+    &.focused {
+      & [data-child='icon-box'] {
+        color: orange;
       }
     }
 
-    &.dirty.invalid {
-      &.focused {
-        & [data-child='icon-box'] {
-          color: orange;
-        }
-      }
-
-      &.unfocused {
-        & [data-child='icon-box'] {
-          color: red;
-        }
+    &.unfocused {
+      & [data-child='icon-box'] {
+        color: red;
       }
     }
   }

package/dist/themes/hkdev/components/panels/panel.css

@@ -1,27 +1,25 @@
-@define-mixin component-panel {
-  [data-component='panel'] {
-    @apply py-30up px-40up;
-    @apply rounded-md;
+[data-component='panel'] {
+  @apply py-30up px-40up;
+  @apply rounded-md;
 
-    &[data-variant='light'] {
-      @apply bg-surface-50;
-    }
+  &[data-variant='light'] {
+    @apply bg-surface-50;
+  }
 
-    &[data-variant='dark'] {
-      @apply bg-surface-950;
-    }
+  &[data-variant='dark'] {
+    @apply bg-surface-950;
+  }
 
-    /* Size variants */
-    &[data-width='sm'] {
-      width: calc(400px * var(--scale-ui));
-    }
+  /* Size variants */
+  &[data-width='sm'] {
+    width: calc(400px * var(--scale-ui));
+  }
 
-    &[data-width='md'] {
-      width: calc(600px * var(--scale-ui));
-    }
+  &[data-width='md'] {
+    width: calc(600px * var(--scale-ui));
+  }
 
-    &[data-width='lg'] {
-      width: calc(800px * var(--scale-ui));
-    }
+  &[data-width='lg'] {
+    width: calc(800px * var(--scale-ui));
   }
 }

package/dist/themes/hkdev/components/rows/panel-grid-row.css

@@ -1,6 +1,4 @@
 @import '../../global/on-colors.css';
 
-@define-mixin rows-panel-grid-row {
-  [data-row='panel-grid-row'] {
-  }
+[data-row='panel-grid-row'] {
 }

package/dist/themes/hkdev/components/rows/panel-row-2.css

@@ -1,7 +1,5 @@
 @import '../../global/on-colors.css';
 
-@define-mixin rows-panel-row-2 {
-  [data-row='panel-grid-row'][data-wrapper='panel-row-2'] {
-    @apply gap-20p mb-8p mt-8p;
-  }
+[data-row='panel-grid-row'][data-wrapper='panel-row-2'] {
+  @apply gap-20p mb-8p mt-8p;
 }

package/dist/themes/hkdev/components.css

@@ -26,28 +26,4 @@
 /* ... */
 @import './components/blocks/text-block.css';
 
-/* Wrap component styles in theme selector */
 
-[data-theme='hkdev'] {
-  /* Rows */
-  /*  @mixin rows-panel-grid-row;*/
-  /*  @mixin rows-panel-row-2;*/
-
-  /* Buttons */
-  @mixin component-button;
-  @mixin component-button-text;
-  @mixin component-button-icon-steeze;
-  /*  @mixin buttons-skip-button;*/
-
-  @mixin component-draggable;
-  @mixin component-drop-zone;
-
-  @mixin component-icon-steeze;
-
-  @mixin component-panel;
-
-  @mixin text_block;
-
-  /* Inputs */
-  @mixin inputs-text-input;
-}