@hkdigital/lib-core 0.3.9 → 0.3.11

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

@@ -1,158 +1,158 @@
-/**
- * Design System Configuration
- * Using CSS Custom Properties (variables) for consistent scaling
- *
- * @note
- * The tailwind theme extensions require CSS custom
- * properties (variables) to be set at the root level
- * of your application to function properly.
- *
- * @example Implementation in SvelteKit +layout.svelte
- * <script>
- *   import { onMount } from 'svelte';
- *
- *   import '../app.css';
- *
- *   let { children } = $props();
- *
- *   import { DESIGN, CLAMPING }
- *     from './design-config.js';
- *
- *   import { rootDesignVarsHTML }
- *     from '@hkdigital/lib-sveltekit/util/design-system/index.js';
- * </script>
- *
- * <svelte:head>
- *   {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
- * </svelte:head>
- *
- * Base units:
- * --scale-w: 0.052vw  (Viewport Width Point)
- * --scale-h: 0.09259vh (Viewport Height Point)
- * --scale-viewport: min(var(--scale-w), var(--scale-h)) (Viewport Point)
- * --scale-ui: clamp(0.3, var(--scale-viewport), 2) (UI Point)
- * --scale-text-base: clamp(0.75, var(--scale-viewport), 1.5) (Base Text)
- * --scale-text-heading: clamp(0.75, var(--scale-viewport), 2.25) (Heading Text)
- * --scale-text-ui: clamp(0.5, var(--scale-viewport), 1.25) (UI Text)
- *
- * --
- *
- * UI Points (up) - Clamped scaling values
- * Based on viewport scaling with minimum and maximum bounds
- * to ensure usability across all screen sizes
- *
- * > PREFERRED METHOD FOR UI ELEMENT SCALING
- *
- * Examples:
- * 5up  = 5px  at design size (clamps between 1.5px and 10px)
- * 10up = 10px at design size (clamps between 3px and 20px)
- * 20up = 20px at design size (clamps between 6px and 40px)
- *
- * Used for:
- * - Component padding and margins
- * - Interface element sizing
- * - Any UI element that needs responsive scaling with guardrails
- *
- * --
- *
- * Text-Based Spacing Units (ut, bt, ht)
- * Scaled by their respective text scaling variables
- *
- * > PREFERRED METHOD FOR TEXT-RELATED SPACING
- *
- * Examples:
- * 4ut = calc(4px * var(--scale-text-ui))       // UI text spacing
- * 4bt = calc(4px * var(--scale-text-base))  // Base text spacing
- * 4ht = calc(4px * var(--scale-text-heading))  // Heading text spacing
- *
- * Used for:
- * - ut: Button padding, form spacing, UI component margins
- * - bt: Paragraph margins, list spacing, base gaps
- * - ht: Heading margins, title spacing
- *
- * --
- *
- * Viewport Points (wp, hp) - Responsive scaling values
- * wp: Uses width-based scaling (1920px reference)
- * hp: Uses height-based scaling (1080px reference)
- *
- * > ALTERNATIVE SCALING METHODS
- *
- * Examples:
- * 10wp = calc(10px * var(--scale-w))
- * 10hp = calc(10px * var(--scale-h))
- *
- * Used for:
- * - Interface scaling that needs to fit both width and height
- * - Maintaining aspect ratio of design
- * - Preventing overflow in either direction
- */
-import {
-  generateTextBasedSpacing,
-  generateViewportBasedSpacing,
-  generateTextStyles,
-  generateBorderRadiusStyles,
-  generateWidthStyles
-} from '../util/design-system/tailwind.js';
-
-import {
-  TEXT_POINT_SIZES,
-  VIEWPORT_POINT_SIZES,
-  TEXT_BASE_SIZES,
-  TEXT_HEADING_SIZES,
-  TEXT_UI_SIZES,
-  RADIUS_SIZES,
-  BORDER_WIDTH_SIZES,
-  STROKE_WIDTH_SIZES
-} from './design-config.js';
-
-/* == Internals */
-
-const TEXT_BASED_SPACING = generateTextBasedSpacing(TEXT_POINT_SIZES);
-const VIEWPORT_BASED_SPACING =
-  generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
-
-/* == Exports */
-
-export const spacing = {
-  ...VIEWPORT_BASED_SPACING,
-  ...TEXT_BASED_SPACING
-};
-
-export const fontSize = {
-  ...TEXT_BASED_SPACING,
-
-  // Named styles
-  ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
-  ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
-  ...generateTextStyles(TEXT_UI_SIZES, 'ui')
-};
-
-export const borderRadius = {
-  // Named styles
-  ...generateBorderRadiusStyles(RADIUS_SIZES)
-};
-
-export const borderWidth = {
-  // Named styles
-  ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
-};
-
-export const strokeWidth = {
-  // Named styles
-  ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
-};
-
-export const outlineWidth = {
-  // Named styles
-  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
-};
-
-export const outlineOffset = {
-  // Named styles
-  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
-};
-
-// console.log('borderWidth', borderWidth);
-// console.log('outlineWidth', outlineWidth);
-// console.log('outlineOffset', outlineOffset);
+/**
+ * Design System Configuration
+ * Using CSS Custom Properties (variables) for consistent scaling
+ *
+ * @note
+ * The tailwind theme extensions require CSS custom
+ * properties (variables) to be set at the root level
+ * of your application to function properly.
+ *
+ * @example Implementation in SvelteKit +layout.svelte
+ * <script>
+ *   import { onMount } from 'svelte';
+ *
+ *   import '../app.css';
+ *
+ *   let { children } = $props();
+ *
+ *   import { DESIGN, CLAMPING }
+ *     from './config/design-config.js';
+ *
+ *   import { rootDesignVarsHTML }
+ *     from '@hkdigital/lib-core/design/utils/root-vars.js';
+ * </script>
+ *
+ * <svelte:head>
+ *   {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * </svelte:head>
+ *
+ * Base units:
+ * --scale-w: 0.052vw  (Viewport Width Point)
+ * --scale-h: 0.09259vh (Viewport Height Point)
+ * --scale-viewport: min(var(--scale-w), var(--scale-h)) (Viewport Point)
+ * --scale-ui: clamp(0.3, var(--scale-viewport), 2) (UI Point)
+ * --scale-text-base: clamp(0.75, var(--scale-viewport), 1.5) (Base Text)
+ * --scale-text-heading: clamp(0.75, var(--scale-viewport), 2.25) (Heading Text)
+ * --scale-text-ui: clamp(0.5, var(--scale-viewport), 1.25) (UI Text)
+ *
+ * --
+ *
+ * UI Points (up) - Clamped scaling values
+ * Based on viewport scaling with minimum and maximum bounds
+ * to ensure usability across all screen sizes
+ *
+ * > PREFERRED METHOD FOR UI ELEMENT SCALING
+ *
+ * Examples:
+ * 5up  = 5px  at design size (clamps between 1.5px and 10px)
+ * 10up = 10px at design size (clamps between 3px and 20px)
+ * 20up = 20px at design size (clamps between 6px and 40px)
+ *
+ * Used for:
+ * - Component padding and margins
+ * - Interface element sizing
+ * - Any UI element that needs responsive scaling with guardrails
+ *
+ * --
+ *
+ * Text-Based Spacing Units (ut, bt, ht)
+ * Scaled by their respective text scaling variables
+ *
+ * > PREFERRED METHOD FOR TEXT-RELATED SPACING
+ *
+ * Examples:
+ * 4ut = calc(4px * var(--scale-text-ui))       // UI text spacing
+ * 4bt = calc(4px * var(--scale-text-base))  // Base text spacing
+ * 4ht = calc(4px * var(--scale-text-heading))  // Heading text spacing
+ *
+ * Used for:
+ * - ut: Button padding, form spacing, UI component margins
+ * - bt: Paragraph margins, list spacing, base gaps
+ * - ht: Heading margins, title spacing
+ *
+ * --
+ *
+ * Viewport Points (wp, hp) - Responsive scaling values
+ * wp: Uses width-based scaling (1920px reference)
+ * hp: Uses height-based scaling (1080px reference)
+ *
+ * > ALTERNATIVE SCALING METHODS
+ *
+ * Examples:
+ * 10wp = calc(10px * var(--scale-w))
+ * 10hp = calc(10px * var(--scale-h))
+ *
+ * Used for:
+ * - Interface scaling that needs to fit both width and height
+ * - Maintaining aspect ratio of design
+ * - Preventing overflow in either direction
+ */
+import {
+  generateTextBasedSpacing,
+  generateViewportBasedSpacing,
+  generateTextStyles,
+  generateBorderRadiusStyles,
+  generateWidthStyles
+} from './generators/index.js';
+
+import {
+  TEXT_POINT_SIZES,
+  VIEWPORT_POINT_SIZES,
+  TEXT_BASE_SIZES,
+  TEXT_HEADING_SIZES,
+  TEXT_UI_SIZES,
+  RADIUS_SIZES,
+  BORDER_WIDTH_SIZES,
+  STROKE_WIDTH_SIZES
+} from './config/design-config.js';
+
+/* == Internals */
+
+const TEXT_BASED_SPACING = generateTextBasedSpacing(TEXT_POINT_SIZES);
+const VIEWPORT_BASED_SPACING =
+  generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
+
+/* == Exports */
+
+export const spacing = {
+  ...VIEWPORT_BASED_SPACING,
+  ...TEXT_BASED_SPACING
+};
+
+export const fontSize = {
+  ...TEXT_BASED_SPACING,
+
+  // Named styles
+  ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
+  ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
+  ...generateTextStyles(TEXT_UI_SIZES, 'ui')
+};
+
+export const borderRadius = {
+  // Named styles
+  ...generateBorderRadiusStyles(RADIUS_SIZES)
+};
+
+export const borderWidth = {
+  // Named styles
+  ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
+};
+
+export const strokeWidth = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
+};
+
+export const outlineWidth = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+};
+
+export const outlineOffset = {
+  // Named styles
+  ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+};
+
+// console.log('borderWidth', borderWidth);
+// console.log('outlineWidth', outlineWidth);
+// console.log('outlineOffset', outlineOffset);

package/dist/design/themes/README.md

@@ -0,0 +1,103 @@
+# Themes
+
+This folder contains theme configurations for the SvelteKit library, built on top of Skeleton.dev's theming system.
+
+## Current Themes
+
+### hkdev
+The main theme for this project, containing:
+- `theme.css` - Skeleton.dev generated theme file with CSS custom properties
+- `globals.css` - Global styles and utilities
+- `components.css` - Component-specific styles
+- `responsive.css` - Responsive design adjustments
+- `debug.css` - Debug styles for development (commented out by default)
+
+## How to Use Themes
+
+Themes are imported and configured in `src/app.css`. The current setup imports the hkdev theme:
+
+```css
+/* Import theme classes and styles */
+@import './lib/themes/hkdev/theme.css' layer(theme);
+
+/* Import additional theme files */
+@import '$lib/design/themes/hkdev/globals.css';
+@import '$lib/design/themes/hkdev/components.css' layer(components);
+@import '$lib/design/themes/hkdev/responsive.css';
+```
+
+### Applying Themes
+
+To activate a theme, set the `data-theme` attribute on your HTML element:
+
+```html
+<html data-theme="hkdev">
+```
+
+Or dynamically with JavaScript:
+```javascript
+document.documentElement.setAttribute('data-theme', 'hkdev');
+```
+
+## Creating New Themes
+
+### Using Skeleton.dev Theme Generator
+
+1. **Visit the Theme Generator**: Go to [themes.skeleton.dev/themes/create](https://themes.skeleton.dev/themes/create)
+
+2. **Customize Your Theme**:
+   - Choose color palettes
+   - Set font styles for base text, headings, and anchors
+   - Configure background options
+   - Preview changes in real-time
+
+3. **Generate and Download**:
+   - The generator creates a CSS file with CSS custom properties
+   - Download the generated `theme.css` file
+
+4. **Integration Steps**:
+   - Create a new folder in `src/lib/design/themes/[your-theme-name]/`
+   - Place the downloaded `theme.css` file in the new folder
+   - Create additional files as needed:
+     - `globals.css` - Global styles
+     - `components.css` - Component styles
+     - `responsive.css` - Responsive adjustments
+   - Update `src/app.css` to import your new theme files
+
+### Theme Structure
+
+Each theme folder should follow this structure:
+```
+themes/
+└── [theme-name]/
+    ├── theme.css          # Skeleton.dev generated theme
+    ├── globals.css        # Global styles and utilities
+    ├── components.css     # Component-specific styles
+    ├── responsive.css     # Responsive design rules
+    └── components/        # Individual component styles
+        ├── buttons/
+        ├── inputs/
+        ├── panels/
+        └── ...
+```
+
+## Theme System Features
+
+- **CSS Custom Properties**: Themes use CSS variables for easy customization
+- **Layer Support**: Organized with CSS layers (theme, base, components, utilities)
+- **Light/Dark Mode**: Automatic support for light and dark variants
+- **Component Isolation**: Individual component styles in separate files
+- **Responsive Design**: Mobile-first responsive adjustments
+
+## Documentation
+
+For more information about Skeleton.dev themes:
+- [Skeleton.dev Theme Documentation](https://www.skeleton.dev/docs/design/themes)
+- [Theme Generator](https://themes.skeleton.dev/themes/create)
+- [Skeleton.dev GitHub](https://github.com/skeletonlabs/skeleton)
+
+## Notes
+
+- The theme generator is not available for small screens - use a tablet or desktop
+- Themes can be imported and modified for advanced customization
+- All themes should be compatible with Skeleton.dev v3 components

package/dist/{themes → design/themes}/hkdev/components/blocks/text-block.css

@@ -1,34 +1,34 @@
-/* .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-base-md;
-  }
-
-  & > .content-box:has(+ .footer-box) {
-    @apply mb-30p; /* 10p + 20p */
-  }
-
-  & > .footer-box {
-  }
-}
+/* .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-base-md;
+  }
+
+  & > .content-box:has(+ .footer-box) {
+    @apply mb-30p; /* 10p + 20p */
+  }
+
+  & > .footer-box {
+  }
+}

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

@@ -1,11 +1,11 @@
-@import '../../global/on-colors.css';
-
-  [data-boxes='game-box'] {
-    /*& .game-box-padding-20p {
-      @apply mt-20p;
-      @apply mr-20p;
-      @apply mb-20p;
-      @apply ml-20p;
-    }*/
-  }
-
+@import '../../global/on-colors.css';
+
+  [data-boxes='game-box'] {
+    /*& .game-box-padding-20p {
+      @apply mt-20p;
+      @apply mr-20p;
+      @apply mb-20p;
+      @apply ml-20p;
+    }*/
+  }
+

package/dist/{themes → design/themes}/hkdev/components/buttons/button-icon-steeze.css

@@ -1,22 +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;
-    }*/
-
-  }
-
-}
+@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 → design/themes}/hkdev/components/buttons/button-text.css

@@ -1,32 +1,32 @@
-@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 font-ui text-ui-md;
-    @apply uppercase;
-    @apply whitespace-nowrap;
-
-    /* Size settings */
-
-    &[data-size="md"] {
-      @apply rounded-sm;
-      @apply py-8ut px-16ut;
-      min-width: var(--btn-min-width);
-      min-height: var(--btn-min-height);
-    }
-
-    /* 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 font-ui text-ui-md;
+    @apply uppercase;
+    @apply whitespace-nowrap;
+
+    /* Size settings */
+
+    &[data-size="md"] {
+      @apply rounded-sm;
+      @apply py-8ut px-16ut;
+      min-width: var(--btn-min-width);
+      min-height: var(--btn-min-height);
+    }
+
+    /* Role-specific text adjustments */
+    &[data-role="primary"] {
+      @apply font-extrabold;
+    }
+
+    &[data-role="secondary"] {
+      @apply font-bold;
+    }
+  }
+
+}