@hkdigital/lib-sveltekit 0.1.6 → 0.1.7

package/dist/stores/theme.js

@@ -1,80 +1,80 @@
-/**
- * @example Set theme color in a layout file
- *
- * // +layout.svelte
- * <script>
- * import { theme as themeStore } from './theme.js';
- *
- * const { metaThemeColorBase, metaThemeColorDark } = themeStore;
- * </script>
- *
- * <svelte:head>
- *   <meta
- *     name="theme-color"
- *     media="(prefers-color-scheme: light)"
- *     content={$metaThemeColorBase}
- *   />
- *   <meta
- *     name="theme-color"
- *     media="(prefers-color-scheme: dark)"
- *     content={$metaThemeColorDark}
- *   />
- * </svelte:head>
- */
-
-import { writable, get } from 'svelte/store';
-
-// > Internals
-
-const DEFAULT_THEME_COLOR_BASE = '#fffffe';
-const DEFAULT_THEME_COLOR_DARK = '#000001';
-
-/** @type {import('svelte/store').Writable<string>} */
-const themeColorBase = writable(DEFAULT_THEME_COLOR_BASE);
-
-/** @type {import('svelte/store').Writable<string|null>} */
-const themeColorDark = writable(DEFAULT_THEME_COLOR_DARK);
-
-// > Exports
-
-/**
- * Set meta theme color for both light and dark mode
- *
- * @param {string} value - HTML Color
- */
-export function setMetaThemeColor(value) {
-	themeColorBase.set(value);
-	themeColorDark.set(value);
-}
-
-/**
- * Set meta theme color for light mode
- *
- * @param {string} value - HTML Color
- */
-export function setMetaThemeColorBase(value) {
-	themeColorBase.set(value);
-}
-
-/**
- * Set meta theme color for dark mode only
- *
- * @param {string} value - HTML Color
- */
-export function setMetaThemeColorDark(value) {
-	themeColorDark.set(value);
-}
-
-export const metaThemeColorBase = {
-	subscribe: themeColorBase.subscribe,
-	get: () => {
-		get(themeColorBase);
-	}
-};
-
-export const metaThemeColorDark = {
-	subscribe: themeColorDark.subscribe,
-	get: () => {
-		get(themeColorDark);
-	}
-};
+/**
+ * @example Set theme color in a layout file
+ *
+ * // +layout.svelte
+ * <script>
+ * import { theme as themeStore } from './theme.js';
+ *
+ * const { metaThemeColorBase, metaThemeColorDark } = themeStore;
+ * </script>
+ *
+ * <svelte:head>
+ *   <meta
+ *     name="theme-color"
+ *     media="(prefers-color-scheme: light)"
+ *     content={$metaThemeColorBase}
+ *   />
+ *   <meta
+ *     name="theme-color"
+ *     media="(prefers-color-scheme: dark)"
+ *     content={$metaThemeColorDark}
+ *   />
+ * </svelte:head>
+ */
+
+import { writable, get } from 'svelte/store';
+
+// > Internals
+
+const DEFAULT_THEME_COLOR_BASE = '#fffffe';
+const DEFAULT_THEME_COLOR_DARK = '#000001';
+
+/** @type {import('svelte/store').Writable<string>} */
+const themeColorBase = writable(DEFAULT_THEME_COLOR_BASE);
+
+/** @type {import('svelte/store').Writable<string|null>} */
+const themeColorDark = writable(DEFAULT_THEME_COLOR_DARK);
+
+// > Exports
+
+/**
+ * Set meta theme color for both light and dark mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColor(value) {
+	themeColorBase.set(value);
+	themeColorDark.set(value);
+}
+
+/**
+ * Set meta theme color for light mode
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorBase(value) {
+	themeColorBase.set(value);
+}
+
+/**
+ * Set meta theme color for dark mode only
+ *
+ * @param {string} value - HTML Color
+ */
+export function setMetaThemeColorDark(value) {
+	themeColorDark.set(value);
+}
+
+export const metaThemeColorBase = {
+	subscribe: themeColorBase.subscribe,
+	get: () => {
+		get(themeColorBase);
+	}
+};
+
+export const metaThemeColorDark = {
+	subscribe: themeColorDark.subscribe,
+	get: () => {
+		get(themeColorDark);
+	}
+};

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

@@ -1,41 +1,41 @@
-@define-mixin text_block {
-
-/* .on-primary-dark
-{
-  & [data-title-text-button-block] {
-    & > .title-box {
-      @apply text-white;
-    }
-
-    & > .text-box {
-      ...text color
-    }  
-  }
-} */
-
-[data-title-text-button-block] {
-
-  &.block-width {
-    @apply w-1/2;
-  }
-
-  & > .title-box {
-    @apply text-heading-h3;
-    @apply uppercase;
-  }
-
-  & > .content-box .p {
-    @apply text-content-base;
-  }
-
-  & > .content-box:has( + .footer-box )
-  {
-    @apply mb-30p; /* 10p + 20p */
-  }
-
-  & > .footer-box {
-  }
-}
-
-
+@define-mixin text_block {
+
+/* .on-primary-dark
+{
+  & [data-title-text-button-block] {
+    & > .title-box {
+      @apply text-white;
+    }
+
+    & > .text-box {
+      ...text color
+    }  
+  }
+} */
+
+[data-title-text-button-block] {
+
+  &.block-width {
+    @apply w-1/2;
+  }
+
+  & > .title-box {
+    @apply text-heading-h3;
+    @apply uppercase;
+  }
+
+  & > .content-box .p {
+    @apply text-content-base;
+  }
+
+  & > .content-box:has( + .footer-box )
+  {
+    @apply mb-30p; /* 10p + 20p */
+  }
+
+  & > .footer-box {
+  }
+}
+
+
 }

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

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

package/dist/themes/hkdev/components/buttons/button-icon-steeze.postcss

@@ -0,0 +1,22 @@
+@define-mixin component-button-icon-steeze {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="icon-steeze"] {
+
+    /*&[data-size="sm"] {
+      @apply px-8ut py-8ut;
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-12ut;
+    }
+
+    &[data-size="lg"] {
+      @apply px-32ut py-16ut;
+    }*/
+
+  }
+
+}

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

@@ -1,34 +1,34 @@
-@define-mixin component-button-text {
-
-  /* @note using CSS vars defined in the parent button postcss */
-
-  /* Type-based styling for text buttons */
-  [data-component="button"][data-type="text"] {
-    /* Typography settings */
-    @apply text-ui-base uppercase;
-    @apply whitespace-nowrap;
-
-    /* Adjust padding to better fit text */
-    /*&[data-size="sm"] {
-      @apply px-8ut py-8ut;
-    }
-
-    &[data-size="md"] {
-      @apply px-16ut py-12ut;
-    }
-
-    &[data-size="lg"] {
-      @apply px-32ut py-16ut;
-    }*/
-
-    /* Role-specific text adjustments */
-    &[data-role="primary"] {
-      @apply font-extrabold;
-    }
-
-    &[data-role="secondary"] {
-      @apply font-bold;
-    }
-  }
-
-}
+@define-mixin component-button-text {
+
+  /* @note using CSS vars defined in the parent button postcss */
+
+  /* Type-based styling for text buttons */
+  [data-component="button"][data-type="text"] {
+    /* Typography settings */
+    @apply text-ui-base uppercase;
+    @apply whitespace-nowrap;
+
+    /* Adjust padding to better fit text */
+    /*&[data-size="sm"] {
+      @apply px-8ut py-8ut;
+    }
+
+    &[data-size="md"] {
+      @apply px-16ut py-12ut;
+    }
+
+    &[data-size="lg"] {
+      @apply px-32ut py-16ut;
+    }*/
+
+    /* Role-specific text adjustments */
+    &[data-role="primary"] {
+      @apply font-extrabold;
+    }
+
+    &[data-role="secondary"] {
+      @apply font-bold;
+    }
+  }
+
+}

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

@@ -1,138 +1,138 @@
-@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;
-
-    /* ---- Primary Button Variables ---- */
-    --btn-primary-bg: var(--color-primary-500);
-    --btn-primary-text: var(--color-primary-50);
-    --btn-primary-border: var(--color-primary-500);
-    --btn-primary-selected-bg: var(--color-primary-700);
-    --btn-primary-selected-border: var(--color-primary-800);
-    --btn-primary-selected-text: var(--color-primary-50);
-    --btn-primary-hover-bg: var(--color-primary-600);
-    --btn-primary-hover-border: var(--color-primary-600);
-    --btn-primary-focus-outline: var(--color-primary-800);
-
-    /* ---- Secondary Button Variables ---- */
-    --btn-secondary-bg: transparent;
-    --btn-secondary-text: var(--color-secondary-500);
-    --btn-secondary-border: var(--color-secondary-500);
-    --btn-secondary-selected-bg: var(--color-secondary-100);
-    --btn-secondary-selected-border: var(--color-secondary-600);
-    --btn-secondary-selected-text: var(--color-secondary-800);
-    --btn-secondary-hover-bg: var(--color-secondary-50);
-    --btn-secondary-hover-border: var(--color-secondary-500);
-    --btn-secondary-focus-outline: var(--color-secondary-800);
-
-    /* ---- State Variables ---- */
-    --btn-active-transform: scale(0.98);
-    --btn-active-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-
-    --btn-error-border: var(--color-error-500);
-    --btn-loading-opacity: 0.8;
-
-    /* Base styles */
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    transition-property: background-color, color, border-color, transform, box-shadow;
-    transition-duration: var(--btn-transition-duration);
-  }
-
-  /* Size variants */
-  [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"] {
-    @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"] {
-    @apply border-width-normal;
-    border-color: rgb(var(--btn-primary-border));
-    background-color: rgb(var(--btn-primary-bg));
-    color: rgb(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));
-    }
-
-    &:focus-visible {
-      @apply outline outline-normal outline-offset-normal;
-      outline-color: rgb(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));
-    }
-  }
-
-  /* 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));
-    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));
-    }
-
-    &:focus-visible {
-      @apply outline outline-normal outline-offset-normal;
-      outline-color: rgb(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));
-    }
-  }
-
-  /* State-based styling */
-  [data-component="button"].state-active {
-    transform: var(--btn-active-transform);
-    box-shadow: var(--btn-active-shadow);
-  }
-
-  [data-component="button"].state-error {
-    border-color: rgb(var(--btn-error-border));
-  }
-
-  [data-component="button"].state-loading {
-    opacity: var(--btn-loading-opacity);
-    cursor: wait;
-  }
-
-  /* Disabled state */
-  [data-component="button"]:disabled {
-    cursor: not-allowed;
-    opacity: var(--btn-disabled-opacity);
-    pointer-events: none;
-  }
-}
+@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;
+
+    /* ---- Primary Button Variables ---- */
+    --btn-primary-bg: var(--color-primary-500);
+    --btn-primary-text: var(--color-primary-50);
+    --btn-primary-border: var(--color-primary-500);
+    --btn-primary-selected-bg: var(--color-primary-700);
+    --btn-primary-selected-border: var(--color-primary-800);
+    --btn-primary-selected-text: var(--color-primary-50);
+    --btn-primary-hover-bg: var(--color-primary-600);
+    --btn-primary-hover-border: var(--color-primary-600);
+    --btn-primary-focus-outline: var(--color-primary-800);
+
+    /* ---- Secondary Button Variables ---- */
+    --btn-secondary-bg: transparent;
+    --btn-secondary-text: var(--color-secondary-500);
+    --btn-secondary-border: var(--color-secondary-500);
+    --btn-secondary-selected-bg: var(--color-secondary-100);
+    --btn-secondary-selected-border: var(--color-secondary-600);
+    --btn-secondary-selected-text: var(--color-secondary-800);
+    --btn-secondary-hover-bg: var(--color-secondary-50);
+    --btn-secondary-hover-border: var(--color-secondary-500);
+    --btn-secondary-focus-outline: var(--color-secondary-800);
+
+    /* ---- State Variables ---- */
+    --btn-active-transform: scale(0.98);
+    --btn-active-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+
+    --btn-error-border: var(--color-error-500);
+    --btn-loading-opacity: 0.8;
+
+    /* Base styles */
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+    transition-property: background-color, color, border-color, transform, box-shadow;
+    transition-duration: var(--btn-transition-duration);
+  }
+
+  /* Size variants */
+  [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"] {
+    @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"] {
+    @apply border-width-normal;
+    border-color: rgb(var(--btn-primary-border));
+    background-color: rgb(var(--btn-primary-bg));
+    color: rgb(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));
+    }
+
+    &:focus-visible {
+      @apply outline outline-normal outline-offset-normal;
+      outline-color: rgb(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));
+    }
+  }
+
+  /* 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));
+    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));
+    }
+
+    &:focus-visible {
+      @apply outline outline-normal outline-offset-normal;
+      outline-color: rgb(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));
+    }
+  }
+
+  /* State-based styling */
+  [data-component="button"].state-active {
+    transform: var(--btn-active-transform);
+    box-shadow: var(--btn-active-shadow);
+  }
+
+  [data-component="button"].state-error {
+    border-color: rgb(var(--btn-error-border));
+  }
+
+  [data-component="button"].state-loading {
+    opacity: var(--btn-loading-opacity);
+    cursor: wait;
+  }
+
+  /* Disabled state */
+  [data-component="button"]:disabled {
+    cursor: not-allowed;
+    opacity: var(--btn-disabled-opacity);
+    pointer-events: none;
+  }
+}

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

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