@hkdigital/lib-sveltekit 0.1.12 → 0.1.14

package/README.md

@@ -2,8 +2,8 @@
 
 Base library that we use to power up our Sveltekit projects
 
-This is a library for [SvelteKit](https://svelte.dev/) projects. 
-It contains common code and components that we use to create our projects. 
+This is a library for [SvelteKit](https://svelte.dev/) projects.
+It contains common code and components that we use to create our projects.
 
 ## Status
 
@@ -40,6 +40,7 @@ Upgrading works as follows:
 ```bash
 ncu "@hkdigital/*" -u && pnpm install
 ```
+
 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`.
@@ -66,8 +67,8 @@ Vite should include postcss-import, but the only solution to get it working for
 For example:
 
 ```css
-/* src/app.postcss */
-@import '../node_modules/@hkdigital/lib-sveltekit/dist/css/utilities.postcss';
+/* src/app.css */
+@import '../node_modules/@hkdigital/lib-sveltekit/dist/css/utilities.css';
 ```
 
 ### Enable tailwind processing
@@ -108,7 +109,7 @@ Everything inside `src/lib` is part of the library, everything inside `src/route
 
 ## Publishing
 
-The name of this library is `@hkdigital/lib-sveltekit` and it is published on [NPM](https://npmjs.com). You need NPM credentials to publish in the scope `@hkdigital`. 
+The name of this library is `@hkdigital/lib-sveltekit` and it is published on [NPM](https://npmjs.com). You need NPM credentials to publish in the scope `@hkdigital`.
 
 ```bash
 # Manually
@@ -124,4 +125,5 @@ pnpm run publish:npm
 ```
 
 ## 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.

package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte

@@ -91,7 +91,7 @@
     scaleW = containerWidth / designWidth;
     scaleH = containerHeight / designHeight;
 
-    // Use the smaller ratio to ensure content fits (from vars.postcss)
+    // Use the smaller ratio to ensure content fits
     scaleViewport = Math.min(scaleW, scaleH);
 
     try {

package/dist/components/icons/SteezeIcon.svelte

@@ -2,7 +2,8 @@
   /**
    * Steeze like icon component
    * The main difference with the original Steeze svelte component is that
-   * the component follows the conventions used for components in this library
+   * the component follows the conventions used for components in
+   * this library
    *
    * @see https://github.com/steeze-ui/icons
    *

package/dist/design/design-config.js

@@ -26,17 +26,17 @@ export const VIEWPORT_POINT_SIZES = [
 ];
 
 export const TEXT_BASE_SIZES = {
-  sm: { size: 14, lineHeight: 1.5 },
-  md: { size: 16, lineHeight: 1.5 },
-  lg: { size: 18, lineHeight: 1.4 }
+  sm: { size: 14, lineHeight: 1.25 },
+  md: { size: 16, lineHeight: 1.25 },
+  lg: { size: 18, lineHeight: 1.25 }
 };
 
 export const TEXT_HEADING_SIZES = {
-  h1: { size: 32, lineHeight: 1.1 },
-  h2: { size: 28, lineHeight: 1.1 },
-  h3: { size: 24, lineHeight: 1.2 },
-  h4: { size: 20, lineHeight: 1.2 },
-  h5: { size: 16, lineHeight: 1.3 }
+  h1: { size: 32, lineHeight: 1.25 },
+  h2: { size: 28, lineHeight: 1.25 },
+  h3: { size: 24, lineHeight: 1.25 },
+  h4: { size: 20, lineHeight: 1.25 },
+  h5: { size: 16, lineHeight: 1.25 }
 };
 
 export const TEXT_UI_SIZES = {

package/dist/design/tailwind-theme-extend.js

@@ -11,7 +11,7 @@
  * <script>
  *   import { onMount } from 'svelte';
  *
- *   import '../app.postcss';
+ *   import '../app.css';
  *
  *   let { children } = $props();
  *

package/dist/themes/hkdev/components/boxes/{game-box.postcss → game-box.css}

@@ -1,8 +1,7 @@
-@import "../../global/on-colors.postcss";
+@import '../../global/on-colors.css';
 
 @define-mixin boxes-game-box {
-
-  [data-boxes="game-box"] {
+  [data-boxes='game-box'] {
     /*& .game-box-padding-20p {
       @apply mt-20p;
       @apply mr-20p;

package/dist/themes/hkdev/components/buttons/{button-text.postcss → button-text.css}

@@ -4,24 +4,21 @@
 
   /* Type-based styling for text buttons */
   [data-component="button"][data-type="text"] {
+
     /* Typography settings */
     @apply font-ui text-ui-md;
     @apply uppercase;
     @apply whitespace-nowrap;
 
-    /* Size specific adjustments */
-    /*&[data-size="sm"] {
-      @apply px-8ut py-8ut;
-    }
+    /* Size settings */
 
     &[data-size="md"] {
-      @apply px-16ut py-12ut;
+      @apply rounded-sm;
+      @apply py-8ut px-16ut;
+      min-width: var(--btn-min-width);
+      min-height: var(--btn-min-height);
     }
 
-    &[data-size="lg"] {
-      @apply px-32ut py-16ut;
-    }*/
-
     /* Role-specific text adjustments */
     &[data-role="primary"] {
       @apply font-extrabold;

package/dist/themes/hkdev/components/buttons/{button.postcss → button.css}

@@ -1,12 +1,10 @@
 @define-mixin component-button {
   [data-component="button"] {
     /* ---- Core Button Variables ---- */
-    /* These are the most reusable across button types */
-    --btn-border-width: 2px;
-    --btn-transition-duration: 150ms;
-    --btn-disabled-opacity: 0.6;
-    --btn-focus-ring-width: 3px;
-    --btn-focus-ring-opacity: 0.4;
+
+    /* Size variables */
+    --btn-min-width: calc( 150px * var(--scale-ui) );
+    --btn-min-height: calc( 40px * var(--scale-ui) );
 
     /* ---- Primary Button Variables ---- */
     --btn-primary-bg: var(--color-primary-500);
@@ -37,6 +35,13 @@
     --btn-error-border: var(--color-error-500);
     --btn-loading-opacity: 0.8;
 
+    /* Appearance variations */
+    --btn-border-width: 2px;
+    --btn-transition-duration: 150ms;
+    --btn-disabled-opacity: 0.6;
+    --btn-focus-ring-width: 3px;
+    --btn-focus-ring-opacity: 0.4;
+
     /* Base styles */
     display: inline-flex;
     justify-content: center;
@@ -48,23 +53,17 @@
   }
 
   /* Size variants */
-  [data-component="button"][data-size="sm"] {
+  /*[data-component="button"][data-size="sm"] {
     @apply rounded-xs;
     @apply py-8ut px-8ut;
     @apply min-w-24ut min-h-24ut;
-  }
+  }*/
 
-  [data-component="button"][data-size="md"] {
-    @apply rounded-sm;
-    @apply py-8ut px-16ut;
-    @apply min-w-32ut min-h-32ut;
-  }
-
-  [data-component="button"][data-size="lg"] {
+  /*[data-component="button"][data-size="lg"] {
     @apply rounded-sm;
     @apply py-16ut px-36ut;
     @apply min-w-36ut min-h-36ut;
-  }
+  }*/
 
   /* Role-based styling for primary buttons */
   [data-component="button"][data-role="primary"] {

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

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

package/dist/themes/hkdev/components/inputs/{text-input.postcss → text-input.css}

@@ -1,29 +1,26 @@
-
-/*@import "../../global/on-colors.postcss";*/
+/*@import "../../global/on-colors.css";*/
 
 @define-mixin inputs-text-input {
-
-  [data-input="text-input"] {
-
+  [data-input='text-input'] {
     /* Base */
 
-
-
     /* Required and disabled */
 
-    &.required {}
-    &.disabled {}
+    &.required {
+    }
+    &.disabled {
+    }
 
     /* Focus */
 
     &.focused {
       border: solid thin black;
 
-      & [data-child="legend"] {
+      & [data-child='legend'] {
         color: black;
       }
 
-      & [data-child="input"] {
+      & [data-child='input'] {
         color: black;
       }
     }
@@ -31,29 +28,29 @@
     &.unfocused {
       border: solid thin grey;
 
-      & [data-child="legend"] {
+      & [data-child='legend'] {
         color: grey;
       }
 
-      & [data-child="input"] {
+      & [data-child='input'] {
         color: grey;
       }
     }
 
     /* Invalid */
     &.invalid {
-      &.pristine [data-child="legend"] {
+      &.pristine [data-child='legend'] {
         color: white;
         background-color: orange;
       }
 
       &.dirty {
-        &.focused [data-child="legend"] {
+        &.focused [data-child='legend'] {
           color: black;
           background-color: yellow;
         }
 
-        &.unfocused [data-child="legend"] {
+        &.unfocused [data-child='legend'] {
           color: white;
           background-color: red;
         }
@@ -63,13 +60,13 @@
     /* Pristine (valid-invalid) */
 
     &.pristine.valid {
-      & [data-child="icon-box"] {
+      & [data-child='icon-box'] {
         color: grey;
       }
     }
 
     &.pristine.invalid {
-      & [data-child="icon-box"] {
+      & [data-child='icon-box'] {
         color: orange;
       }
     }
@@ -78,13 +75,13 @@
 
     &.dirty.valid {
       &.focused {
-        & [data-child="icon-box"] {
+        & [data-child='icon-box'] {
           color: grey;
         }
       }
 
       &.unfocused {
-        & [data-child="icon-box"] {
+        & [data-child='icon-box'] {
           color: green;
         }
       }
@@ -92,17 +89,16 @@
 
     &.dirty.invalid {
       &.focused {
-        & [data-child="icon-box"] {
+        & [data-child='icon-box'] {
           color: orange;
         }
       }
 
       &.unfocused {
-        & [data-child="icon-box"] {
+        & [data-child='icon-box'] {
           color: red;
         }
       }
     }
-
   }
 }

package/dist/themes/hkdev/components/panels/{plain-panel.postcss → plain-panel.css}

@@ -1,21 +1,20 @@
-/*@import "../../global/on-colors.postcss";*/
+/*@import "../../global/on-colors.css";*/
 
 @define-mixin panels-plain-panel {
-  [data-panel="plain-panel"] {
-
+  [data-panel='plain-panel'] {
     @mixin on_surface_light;
     @apply bg-primary-50;
 
     @apply p-40p rounded-md;
 
     max-width: 50vw;
-/*    max-width: 27vw;*/
+    /*    max-width: 27vw;*/
     /* width: 26vw; */
 
     & picture {
       display: block;
       max-width: 100%;
-      @apply pr-80p;      
+      @apply pr-80p;
       /* border: solid 1px red; */
     }
 
@@ -29,7 +28,6 @@
       & + picture {
         @apply mt-40p;
       }
-      
     }
 
     & button {

package/dist/themes/hkdev/components/panels/{speech-bubble.postcss → speech-bubble.css}

@@ -1,9 +1,7 @@
-
-@import "../../global/on-colors.postcss";
+@import '../../global/on-colors.css';
 
 @define-mixin panels-speech-bubble {
-  [data-panel="speech-bubble"] {
-
+  [data-panel='speech-bubble'] {
     @mixin on_surface_light;
     @apply bg-primary-50;
 
@@ -19,19 +17,17 @@
     & picture {
       display: block;
       max-width: 100%;
-      @apply pr-80p;      
+      @apply pr-80p;
       /* border: solid 1px red; */
     }
 
-    & [data-section="title"]
-    {
+    & [data-section='title'] {
       & .h1 {
         @apply text-32p pt-8p pb-8p;
       }
     }
 
-    & [data-section="text"]
-    {
+    & [data-section='text'] {
       & .p {
         @apply text-20p pb-10p;
 
@@ -41,11 +37,9 @@
       }
     }
 
-
     /* Footer */
 
-    & [data-row][data-section="footer"]
-    {
+    & [data-row][data-section='footer'] {
       @apply pt-10p;
     }
   }

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

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

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

@@ -0,0 +1,7 @@
+@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;
+  }
+}

package/dist/themes/hkdev/components.css

@@ -0,0 +1,59 @@
+/* Import component styles */
+
+/* Panels */
+/*@import "./components/panels/plain-panel.css";*/
+
+/* Rows */
+/*@import "./components/rows/panel-grid-row.css";*/
+/*@import "./components/rows/panel-row-2.css";*/
+
+/* Buttons */
+@import './components/buttons/button.css';
+@import './components/buttons/button-text.css';
+@import './components/buttons/button-icon-steeze.css';
+
+/*@import "./components/buttons/skip-button.css";*/
+
+/* Icons */
+@import './components/icons/icon-steeze.css';
+
+/* Inputs */
+@import './components/inputs/text-input.css';
+
+/* ... */
+/*@import "./components/select-level.css";*/
+@import './components/blocks/text-block.css';
+
+/* Not used */
+/*@import "./components/hk-tab-icon.css";*/
+/*@import "./components/avatar-layer.css";*/
+
+/* Wrap component styles in theme selector */
+
+[data-theme='hkdev'] {
+  /* Panels */
+  /*  @mixin panels-plain-panel;*/
+  /*  @mixin panels-speech-bubble;*/
+
+  /* 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-icon-steeze;
+
+  @mixin text_block;
+
+  /* Inputs */
+  @mixin inputs-text-input;
+
+  /* ... */
+  /*  @mixin hk_tab_icon;*/
+  /*  @mixin avatar_layer;*/
+  /*  @mixin select_level;*/
+}

package/dist/themes/hkdev/globals.css

@@ -0,0 +1,11 @@
+/*@import "./global/vars.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;*/
+}

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

@@ -42,7 +42,7 @@ export function customUtilitiesPlugin({ addUtilities }) {
       'font-family': 'var(--heading-font-family)'
     },
     '.font-base': {
-      'font-family': 'var(--base-font-family))'
+      'font-family': 'var(--base-font-family)'
     },
     '.font-ui': {
       'font-family': 'var(--ui-font-family, var(--base-font-family))'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.12",
+	"version": "0.1.14",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"

package/dist/css/tw-prose.postcss__

@@ -1,259 +0,0 @@
-/* Base prose styles */
-.prose {
-  font-size: 1rem;
-  line-height: 1.75;
-  max-width: 65ch;
-}
-
-.prose > * + * {
-  margin-top: 1.25em;
-}
-
-/* Headings */
-.prose h1 {
-  font-size: 2.25em;
-  line-height: 1.1111111;
-  margin-top: 0;
-  margin-bottom: 0.8888889em;
-  font-weight: 800;
-}
-
-.prose h2 {
-  font-size: 1.5em;
-  line-height: 1.3333333;
-  margin-top: 2em;
-  margin-bottom: 1em;
-  font-weight: 700;
-}
-
-.prose h3 {
-  font-size: 1.25em;
-  line-height: 1.6;
-  margin-top: 1.6em;
-  margin-bottom: 0.6em;
-  font-weight: 600;
-}
-
-.prose h4 {
-  font-size: 1.125em;
-  line-height: 1.5;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  font-weight: 600;
-}
-
-/* Paragraphs */
-.prose p {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
-/* Lists */
-.prose ul,
-.prose ol {
-  padding-left: 1.625em;
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
-.prose li {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose > ul > li p {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose > ul > li > *:first-child {
-  margin-top: 1.25em;
-}
-
-.prose > ul > li > *:last-child {
-  margin-bottom: 1.25em;
-}
-
-/* Nested lists */
-.prose ul ul, 
-.prose ul ol,
-.prose ol ul,
-.prose ol ol {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-/* Links */
-.prose a {
-  color: #111827;
-  text-decoration: underline;
-  font-weight: 500;
-}
-
-.prose a:hover {
-  text-decoration-thickness: 2px;
-}
-
-/* Code blocks */
-.prose code {
-  color: #111827;
-  font-weight: 600;
-  font-size: 0.875em;
-}
-
-.prose pre {
-  color: #e5e7eb;
-  background-color: #1f2937;
-  overflow-x: auto;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-  border-radius: 0.375rem;
-  padding: 0.8571429em 1.1428571em;
-}
-
-.prose pre code {
-  background-color: transparent;
-  border-radius: 0;
-  padding: 0;
-  font-weight: 400;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-}
-
-/* Blockquotes */
-.prose blockquote {
-  font-weight: 500;
-  font-style: italic;
-  color: #111827;
-  border-left-width: 0.25rem;
-  border-left-color: #e5e7eb;
-  margin-top: 1.6em;
-  margin-bottom: 1.6em;
-  padding-left: 1em;
-}
-
-/* Tables */
-.prose table {
-  width: 100%;
-  table-layout: auto;
-  text-align: left;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-}
-
-.prose thead {
-  font-weight: 600;
-  border-bottom-width: 1px;
-  border-bottom-color: #d1d5db;
-}
-
-.prose thead th {
-  vertical-align: bottom;
-  padding-right: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-left: 0.5714286em;
-}
-
-.prose tbody tr {
-  border-bottom-width: 1px;
-  border-bottom-color: #e5e7eb;
-}
-
-.prose tbody td {
-  vertical-align: top;
-  padding: 0.5714286em;
-}
-
-/* Size variations */
-.prose-sm {
-  font-size: 0.875rem;
-  line-height: 1.7142857;
-}
-
-.prose-lg {
-  font-size: 1.125rem;
-  line-height: 1.7777778;
-}
-
-.prose-xl {
-  font-size: 1.25rem;
-  line-height: 1.8;
-}
-
-/* Dark mode */
-.prose-invert {
-  color: #d1d5db;
-}
-
-.prose-invert a {
-  color: #fff;
-}
-
-.prose-invert strong {
-  color: #fff;
-}
-
-.prose-invert code {
-  color: #fff;
-}
-
-.prose-invert thead {
-  border-bottom-color: #4b5563;
-}
-
-.prose-invert tbody tr {
-  border-bottom-color: #374151;
-}
-
-.prose-invert blockquote {
-  color: #9ca3af;
-  border-left-color: #4b5563;
-}
-
-/* Images */
-.prose img {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.prose figure > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose figure figcaption {
-  color: #6b7280;
-  font-size: 0.875em;
-  line-height: 1.4285714;
-  margin-top: 0.8571429em;
-}
-
-/* Custom elements */
-.prose hr {
-  border-color: #e5e7eb;
-  border-top-width: 1px;
-  margin-top: 3em;
-  margin-bottom: 3em;
-}
-
-.prose strong {
-  font-weight: 600;
-  color: #111827;
-}
-
-.prose em {
-  font-style: italic;
-}
-
-/* Focus styles */
-.prose a:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  text-decoration-thickness: 2px;
-}

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

@@ -1,40 +0,0 @@
-@define-mixin component-button {
-
-  [data-component="button"][data-type="plain"] {
-
-    &:not([disabled]) {
-      &[data-role="primary"] {
-        @apply ...
-      }
-
-      &[data-role="secondary"] {
-        @apply ...
-      }
-    }
-
-    &[disabled] {
-      &[data-role="primary"] {
-        @apply ...
-      }
-
-      &[data-role="secondary"] {
-        @apply ...
-      }
-    }
-  }
-
-  [data-component="button"][data-type="plain"] {
-
-    &[data-size="sm"] {
-      @apply ...
-    }
-
-    &[data-size="md"] {
-      @apply ...
-    }
-
-    &[data-size="lg"] {
-      @apply ...
-    }
-  }
-}

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

@@ -1,91 +0,0 @@
-@define-mixin component-button {
-
-  /* Base button styles */
-  [data-component="button"][data-type="plain"] {
-    @apply rounded-md;
-    @apply border-width-normal;
-    @apply text-ui-base base-font-family font-medium;
-  }
-
-  /* Role-based styling for enabled buttons */
-  [data-component="button"][data-type="plain"] {
-    &:not([disabled]) {
-      &[data-role="primary"] {
-        @apply border-primary-500 bg-primary-500;
-        @apply text-primary-contrast-500;
-      }
-
-      &[data-role="secondary"] {
-        @apply border-secondary-500 text-secondary-500 bg-transparent;
-      }
-    }
-
-    /* Role-based styling for disabled buttons */
-    &[disabled] {
-      @apply cursor-not-allowed;
-
-      &[data-role="primary"] {
-        @apply bg-surface-300 text-surface-100;
-      }
-
-      &[data-role="secondary"] {
-        @apply border-surface-300 text-surface-300 bg-transparent;
-      }
-    }
-  }
-
-  /* Size variants */
-  [data-component="button"][data-type="plain"] {
-    &[data-size="sm"] {
-      @apply px-8ut py-4ut;
-      @apply text-ui-sm;
-      @apply gap-4ut;
-/*      height: 32ut;*/
-    }
-
-    &[data-size="md"] {
-      @apply px-16ut py-8ut;
-      @apply text-ui-base;
-      @apply gap-8ut;
-/*      height: 40ut;*/
-    }
-
-    &[data-size="lg"] {
-      @apply px-20ut py-10ut;
-      @apply text-ui-lg;
-      @apply gap-10ut;
-/*      height: 50ut;*/
-    }
-  }
-
-  /* Hover, focus and active states for enabled buttons */
-  [data-component="button"][data-type="plain"]:not([disabled]) {
-    &[data-role="primary"] {
-      &:hover {
-        @apply bg-primary-600;
-      }
-      &:focus-visible {
-        @apply bg-primary-600;
-        outline: 2ut solid rgb(var(--color-primary-300));
-        outline-offset: 2ut;
-      }
-      &:active {
-        @apply bg-primary-700;
-      }
-    }
-
-    &[data-role="secondary"] {
-      &:hover {
-        @apply bg-secondary-50;
-      }
-      &:focus-visible {
-        @apply bg-secondary-50;
-        outline: 2ut solid rgb(var(--color-secondary-300));
-        outline-offset: 2ut;
-      }
-      &:active {
-        @apply bg-secondary-100;
-      }
-    }
-  }
-}

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

@@ -1,8 +0,0 @@
-@import "../../global/on-colors.postcss";
-
-@define-mixin buttons-skip-button {
-
-  [data-button="skip-button"] {
-
-  }
-}

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

@@ -1,7 +0,0 @@
-
-@import "../../global/on-colors.postcss";
-
-@define-mixin rows-panel-grid-row {
-  [data-row="panel-grid-row"] {
-  }
-}

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

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

package/dist/themes/hkdev/components.postcss

@@ -1,61 +0,0 @@
-/* Import component styles */
-
-/* Panels */
-/*@import "./components/panels/plain-panel.postcss";*/
-
-/* Rows */
-/*@import "./components/rows/panel-grid-row.postcss";*/
-/*@import "./components/rows/panel-row-2.postcss";*/
-
-/* Buttons */
-@import "./components/buttons/button.postcss";
-@import "./components/buttons/button-text.postcss";
-@import "./components/buttons/button-icon-steeze.postcss";
-
-/*@import "./components/buttons/skip-button.postcss";*/
-
-/* Icons */
-@import "./components/icons/icon-steeze.postcss";
-
-/* Inputs */
-@import "./components/inputs/text-input.postcss";
-
-/* ... */
-/*@import "./components/select-level.postcss";*/
-@import "./components/blocks/text-block.postcss";
-
-/* Not used */
-/*@import "./components/hk-tab-icon.postcss";*/
-/*@import "./components/avatar-layer.postcss";*/
-
-/* Wrap component styles in theme selector */
-
-
-[data-theme=hkdev] {
-
-  /* Panels */
-  /*  @mixin panels-plain-panel;*/
-  /*  @mixin panels-speech-bubble;*/
-
-  /* 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-icon-steeze;
-
-  @mixin text_block;
-
-  /* Inputs */
-  @mixin inputs-text-input;
-
-  /* ... */
-  /*  @mixin hk_tab_icon;*/
-  /*  @mixin avatar_layer;*/
-  /*  @mixin select_level;*/
-}

package/dist/themes/hkdev/global/text.postcss__

@@ -1,35 +0,0 @@
-/**
- * Tailwind defaults
- *
- * text-sm 14px;
- * text-base 16px;
- * text-lg 18px;
- * text-xl 20px;
- * text-2xl 24px;
- * text-3xl 30px;
- * text-4xl 36px;
- * text-5xl 48px;
- * text-6xl 60px;
- * text-7xl 72px;
- * text-8xl 96px;
- * text-9xl 128px;
- *
- * @see https://tailwindcss.com/docs/font-size
- */
-
-@define-mixin all_text {
-
-  a {
-    @apply text-sm font-bold underline;
-  }
-
-  p {
-    @apply text-xl;
-  }
-
-  h1 {
-    &.text-presenter-title {      
-      @apply text-5xl;
-    }
-  }
-}

package/dist/themes/hkdev/global/vars.postcss__

@@ -1,7 +0,0 @@
-
-@define-mixin all_vars {
-
-  /* --tab-bar-height: 72px;  
-  --tab-bar-selector-width: 132px;
-  --tab-bar-selector-height: var(--tab-bar-height, 72px); */
-}

package/dist/themes/hkdev/globals.postcss

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