@hkdigital/lib-sveltekit 0.2.21 → 0.2.22

package/dist/css/utilities.css

@@ -1,43 +1,43 @@
-/**
- * Common utility CSS classes
- * 
- * Using tailwind layers
- * @see https://tailwindcss.com/docs/functions-and-directives 
- */
-
-@layer utilities {
-  .g-no-select {
-    user-select: none;
-    -webkit-user-select: none; /* ios safari */
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  input[type='text'].g-no-select,
-  textarea.g-no-select {
-    user-select: text !important;
-    cursor: text;
-  }
-
-  .g-no-double-tab-zoom {
-    /* tailwind touch-manipulation */
-    touch-action: manipulation;
-  }
-
-  .g-no-pinch-zoom {
-    touch-action: pan-x pan-y; /* no pinch zoom, but allow scroll  */
-  }
-
-  .g-no-highlights {
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-/* .g-grid-layers {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-
-  & > * {
-    grid-area: 1/1/2/2;
-  }
-} */
+/**
+ * Common utility CSS classes
+ * 
+ * Using tailwind layers
+ * @see https://tailwindcss.com/docs/functions-and-directives 
+ */
+
+@layer utilities {
+  .g-no-select {
+    user-select: none;
+    -webkit-user-select: none; /* ios safari */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  input[type='text'].g-no-select,
+  textarea.g-no-select {
+    user-select: text !important;
+    cursor: text;
+  }
+
+  .g-no-double-tab-zoom {
+    /* tailwind touch-manipulation */
+    touch-action: manipulation;
+  }
+
+  .g-no-pinch-zoom {
+    touch-action: pan-x pan-y; /* no pinch zoom, but allow scroll  */
+  }
+
+  .g-no-highlights {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+/* .g-grid-layers {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+
+  & > * {
+    grid-area: 1/1/2/2;
+  }
+} */

package/dist/design/design-config.js

@@ -1,73 +1,73 @@
-/* == Design dimensions == */
-
-export const DESIGN = {
-  width: 1024,
-  height: 768
-};
-
-/* == Scaling-clamping behaviour == */
-
-export const CLAMPING = {
-  ui: { min: 0.3, max: 2 },
-  textBase: { min: 0.75, max: 1.5 },
-  textHeading: { min: 0.75, max: 2.25 },
-  textUi: { min: 0.5, max: 1.25 }
-};
-
-/* == Text == */
-
-export const TEXT_POINT_SIZES = [
-  1, 2, 4, 6, 8, 10, 11, 12, 16, 20, 24, 28, 32, 36, 50
-];
-
-export const VIEWPORT_POINT_SIZES = [
-  1, 2, 4, 5, 6, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180,
-  200
-];
-
-export const TEXT_BASE_SIZES = {
-  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.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 = {
-  sm: { size: 14, lineHeight: 1 },
-  md: { size: 16, lineHeight: 1 },
-  lg: { size: 18, lineHeight: 1 }
-};
-
-/* == Border radius == */
-
-export const RADIUS_SIZES = {
-  none: '0px',
-  xs: { size: 5 },
-  sm: { size: 10 },
-  md: { size: 25 },
-  lg: { size: 35 },
-  full: '9999px'
-};
-
-/* == Border width == */
-
-export const BORDER_WIDTH_SIZES = {
-  thin: { size: 1 },
-  normal: { size: 2 },
-  thick: { size: 4 }
-};
-
-/* == Stroke width == */
-
-export const STROKE_WIDTH_SIZES = {
-  thin: { size: 1 },
-  normal: { size: 2 },
-  thick: { size: 4 }
-};
+/* == Design dimensions == */
+
+export const DESIGN = {
+  width: 1024,
+  height: 768
+};
+
+/* == Scaling-clamping behaviour == */
+
+export const CLAMPING = {
+  ui: { min: 0.3, max: 2 },
+  textBase: { min: 0.75, max: 1.5 },
+  textHeading: { min: 0.75, max: 2.25 },
+  textUi: { min: 0.5, max: 1.25 }
+};
+
+/* == Text == */
+
+export const TEXT_POINT_SIZES = [
+  1, 2, 4, 6, 8, 10, 11, 12, 16, 20, 24, 28, 32, 36, 50
+];
+
+export const VIEWPORT_POINT_SIZES = [
+  1, 2, 4, 5, 6, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180,
+  200
+];
+
+export const TEXT_BASE_SIZES = {
+  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.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 = {
+  sm: { size: 14, lineHeight: 1 },
+  md: { size: 16, lineHeight: 1 },
+  lg: { size: 18, lineHeight: 1 }
+};
+
+/* == Border radius == */
+
+export const RADIUS_SIZES = {
+  none: '0px',
+  xs: { size: 5 },
+  sm: { size: 10 },
+  md: { size: 25 },
+  lg: { size: 35 },
+  full: '9999px'
+};
+
+/* == Border width == */
+
+export const BORDER_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};
+
+/* == Stroke width == */
+
+export const STROKE_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};

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 './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);