@hkdigital/lib-sveltekit 0.1.0 → 0.1.1

package/dist/util/design-system/css/root-design-vars.js

@@ -0,0 +1,100 @@
+import { getRootCssVar } from '../../css/css-vars.js';
+
+/**
+ * Generates a complete HTML style tag with CSS custom properties for
+ * the design system based on provided configuration.
+ *
+ * @param {Object} design - Design dimensions configuration
+ * @param {number} design.width - The design width in pixels
+ * @param {number} design.height - The design height in pixels
+ * @param {Object} clamping - Scaling configuration parameters
+ * @param {Object} clamping.ui - UI clamping configuration
+ * @param {number} clamping.ui.min - Minimum UI scaling factor
+ * @param {number} clamping.ui.max - Maximum UI scaling factor
+ * @param {Object} clamping.textContent - Content text scaling configuration
+ * @param {number} clamping.textContent.min - Minimum content text scaling
+ * @param {number} clamping.textContent.max - Maximum content text scaling
+ * @param {Object} clamping.textHeading - Heading text clamping configuration
+ * @param {number} clamping.textHeading.min - Minimum heading text scaling
+ * @param {number} clamping.textHeading.max - Maximum heading text scaling
+ * @param {Object} clamping.textUi - UI text clamping configuration
+ * @param {number} clamping.textUi.min - Minimum UI text scaling
+ * @param {number} clamping.textUi.max - Maximum UI text scaling
+ *
+ * @returns {string} Complete HTML style tag with design system CSS variables
+ *
+ * @example
+ * // +layout.svelte
+ * <script>
+ * import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
+ *
+ * import { rootDesignVarsHTML } from '../index.js';
+ * </script>
+ *
+ * <svelte:head>
+ * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
+ * </svelte:head>
+ *
+ * // Generates style tag for use in svelte:head
+ * // <style>:root { --design-width: 1920; ... }</style>
+ */
+export function rootDesignVarsHTML(design, clamping) {
+  return `<style>:root {
+      /* Design dimensions */
+      --design-width: ${design.width};
+      --design-height: ${design.height};
+
+      /* Base clamping units */
+      --scale-w: 1;
+      --scale-h: 1;
+      --scale-viewport: min(var(--scale-w), var(--scale-h));
+
+      /* Scaling factors with configurable clamping */
+      --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
+      --scale-text-content: clamp(${clamping.textContent.min}, var(--scale-viewport), ${clamping.textContent.max});
+      --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
+      --scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
+    }</style>`;
+}
+
+/**
+ * Get design width from CSS variables
+ *
+ * @returns {number} Design width
+ */
+export function getRootCssDesignWidth() {
+  return getRootCssVar('design-width');
+}
+
+/**
+ * Get design height from CSS variables
+ *
+ * @returns {number} Design height
+ */
+export function getRootCssDesignHeight() {
+  return getRootCssVar('design-height');
+}
+
+/**
+ * Retrieves all current scaling factors from CSS variables
+ *
+ * @returns {Object} An object containing all scaling factors
+ */
+export function getAllRootScalingVars() {
+  const styles = getComputedStyle(document.documentElement);
+
+  return {
+    scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
+    scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
+    scaleViewport:
+      parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
+
+    scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
+    scaleTextContent:
+      parseFloat(styles.getPropertyValue('--scale-text-content').trim()) || 0,
+    scaleTextHeading:
+      parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
+    scaleTextUI:
+      parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
+  };
+}

package/dist/util/design-system/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./css/clamp.js";
+export * from "./css/root-design-vars.js";
+export * from "./components/states.js";
+export * from "./layout/scaling.js";
+export * from "./tailwind.js";

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

@@ -0,0 +1,5 @@
+export * from './css/clamp.js';
+export * from './css/root-design-vars.js';
+export * from './components/states.js';
+export * from './layout/scaling.js';
+export * from './tailwind.js';

package/dist/util/design-system/layout/scaling.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Manages responsive design scaling by calculating and applying scale factors
+ * based on viewport dimensions and design system requirements.
+ *
+ * @param {Object} design - The base design dimensions
+ * @param {number} design.width - The reference design width
+ * @param {number} design.height - The reference design height
+ * @param {Object} clamping - The min/max values for various scale factors
+ * @param {Object} clamping.ui - UI element scaling constraints
+ * @param {number} clamping.ui.min - Minimum UI scale factor
+ * @param {number} clamping.ui.max - Maximum UI scale factor
+ * @param {Object} clamping.textContent - Content text scaling constraints
+ * @param {number} clamping.textContent.min - Minimum content text scale factor
+ * @param {number} clamping.textContent.max - Maximum content text scale factor
+ * @param {Object} clamping.textHeading - Heading text scaling constraints
+ * @param {number} clamping.textHeading.min - Minimum heading text scale factor
+ * @param {number} clamping.textHeading.max - Maximum heading text scale factor
+ * @param {Object} clamping.textUi - UI text scaling constraints
+ * @param {number} clamping.textUi.min - Minimum UI text scale factor
+ * @param {number} clamping.textUi.max - Maximum UI text scale factor
+ *
+ * @returns {()=>void} A cleanup function that removes the event listener
+ */
+export function enableScalingUI(design: {
+    width: number;
+    height: number;
+}, clamping: {
+    ui: {
+        min: number;
+        max: number;
+    };
+    textContent: {
+        min: number;
+        max: number;
+    };
+    textHeading: {
+        min: number;
+        max: number;
+    };
+    textUi: {
+        min: number;
+        max: number;
+    };
+}): () => void;

package/dist/util/design-system/layout/scaling.js

@@ -0,0 +1,97 @@
+import { clamp } from '../css/clamp.js';
+
+/**
+ * Manages responsive design scaling by calculating and applying scale factors
+ * based on viewport dimensions and design system requirements.
+ *
+ * @param {Object} design - The base design dimensions
+ * @param {number} design.width - The reference design width
+ * @param {number} design.height - The reference design height
+ * @param {Object} clamping - The min/max values for various scale factors
+ * @param {Object} clamping.ui - UI element scaling constraints
+ * @param {number} clamping.ui.min - Minimum UI scale factor
+ * @param {number} clamping.ui.max - Maximum UI scale factor
+ * @param {Object} clamping.textContent - Content text scaling constraints
+ * @param {number} clamping.textContent.min - Minimum content text scale factor
+ * @param {number} clamping.textContent.max - Maximum content text scale factor
+ * @param {Object} clamping.textHeading - Heading text scaling constraints
+ * @param {number} clamping.textHeading.min - Minimum heading text scale factor
+ * @param {number} clamping.textHeading.max - Maximum heading text scale factor
+ * @param {Object} clamping.textUi - UI text scaling constraints
+ * @param {number} clamping.textUi.min - Minimum UI text scale factor
+ * @param {number} clamping.textUi.max - Maximum UI text scale factor
+ *
+ * @returns {()=>void} A cleanup function that removes the event listener
+ */
+export function enableScalingUI(design, clamping) {
+  /**
+   * Updates CSS scale variables based on current viewport dimensions
+   * and design system constraints
+   */
+  function updateScaleValues() {
+    try {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+
+      // Calculate scale factors based on viewport size relative to design dimensions
+      const scaleW = vw / design.width;
+      const scaleH = vh / design.height;
+
+      // Use the smaller scale factor to ensure content fits within viewport
+      const scaleViewport = Math.min(scaleW, scaleH);
+
+      // Apply clamping to different element types
+      const scaleUI = clamp(scaleViewport, clamping.ui.min, clamping.ui.max);
+
+      const scaleTextContent = clamp(
+        scaleViewport,
+        clamping.textContent.min,
+        clamping.textContent.max
+      );
+
+      const scaleTextHeading = clamp(
+        scaleViewport,
+        clamping.textHeading.min,
+        clamping.textHeading.max
+      );
+
+      const scaleTextUi = clamp(
+        scaleViewport,
+        clamping.textUi.min,
+        clamping.textUi.max
+      );
+
+      // Set CSS custom properties for use in the design system
+      document.documentElement.style.setProperty('--scale-w', String(scaleW));
+      document.documentElement.style.setProperty('--scale-h', String(scaleH));
+      document.documentElement.style.setProperty(
+        '--scale-viewport',
+        String(scaleViewport)
+      );
+      document.documentElement.style.setProperty('--scale-ui', String(scaleUI));
+      document.documentElement.style.setProperty(
+        '--scale-text-content',
+        String(scaleTextContent)
+      );
+      document.documentElement.style.setProperty(
+        '--scale-text-heading',
+        String(scaleTextHeading)
+      );
+      document.documentElement.style.setProperty(
+        '--scale-text-ui',
+        String(scaleTextUi)
+      );
+    } catch (error) {
+      console.error('Error updating design scale values:', error);
+    }
+  }
+
+  // Initialize scales and attach resize listener
+  updateScaleValues();
+  window.addEventListener('resize', updateScaleValues);
+
+  // Return cleanup function
+  return function cleanup() {
+    window.removeEventListener('resize', updateScaleValues);
+  };
+}

package/dist/util/design-system/tailwind.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Generates text-based spacing units with with different scaling
+ * units (ut, ct, ht)
+ *
+ * @param {number[]} values
+ *   Array of pixel values to generate text-based spacing units for
+ *
+ * @returns {{[key: string]: string}}
+ *   Generated text-based spacing units with ut, ct, and ht suffixes
+ *
+ * @throws {Error} If values is not an array or contains non-numeric values
+ *
+ * @example
+ * generateTextBasedSpacing([1, 2, 4, 8])
+ * // Returns:
+ * // {
+ * //   '1ut': 'calc(1px * var(--scale-text-ui))',
+ * //   '2ut': 'calc(2px * var(--scale-text-ui))',
+ * //   '1ct': 'calc(1px * var(--scale-text-content))',
+ * //   '2ct': 'calc(2px * var(--scale-text-content))',
+ * //   '1ht': 'calc(1px * var(--scale-text-heading))',
+ * //   '2ht': 'calc(2px * var(--scale-text-heading))'
+ * // }
+ */
+export function generateTextBasedSpacing(values: number[]): {
+    [key: string]: string;
+};
+/**
+ * Generates viewport-based spacing units with different scaling
+ * units (p, vp, wp, hp)
+ *
+ * @param {number[]} values
+ *   Array of pixel values to generate viewport-based spacing units for
+ *
+ * @returns {Object.<string, string>}
+ *   Generated viewport-based spacing units:
+ *   - p:  UI points (clamped scaling)
+ *   - vp: Viewport points (min of width/height)
+ *   - wp: Width points
+ *   - hp: Height points
+ *
+ * @throws {Error} If values is not an array or contains non-numeric values
+ *
+ * @example
+ * generateViewportBasedSpacing([1, 2, 4])
+ * // Returns:
+ * // {
+ * //   '1p': 'calc(1px * var(--scale-ui))',
+ * //   '1vp': 'calc(1px * var(--scale-viewport))',
+ * //   '1wp': 'calc(1px * var(--scale-w))',
+ * //   '1hp': 'calc(1px * var(--scale-h))'
+ * // }
+ */
+export function generateViewportBasedSpacing(values: number[]): {
+    [x: string]: string;
+};
+/**
+ * Generates semantic text style definitions for a specific text category
+ * (content, UI, or heading). Each style includes a scaled font size and
+ * line height.
+ *
+ * @param {{[key: string]: {size: number, lineHeight?: number}}} sizes
+ *   Set of text sizes to generate styles for
+ *
+ * @param {'content' | 'ui' | 'heading'} category
+ *   Text category to generate styles for
+ *
+ * @returns {{[key: string]: [string, {lineHeight: number}]}}
+ *   Generated text styles in Tailwind format
+ *
+ * @throws {Error} If a size has an invalid size or lineHeight
+ *
+ * @example
+ * const TEXT_CONTENT_SIZES = {
+ *   sm: { size: 16, lineHeight: 1.5 },
+ *   base: { size: 20, lineHeight: 1.5 },
+ *   lg: { size: 24, lineHeight: 1.4 }
+ * };
+ *
+ * generateTextStyles(TEXT_CONTENT_SIZES, 'content');
+ * // Returns:
+ * // {
+ * //   'content-sm':
+ * //     ['calc(16px * var(--scale-text-content))', { lineHeight: 1.5 }],
+ * //   'content-base':
+ * //     ['calc(20px * var(--scale-text-content))', { lineHeight: 1.5 }],
+ * //   'content-lg':
+ * //     ['calc(24px * var(--scale-text-content))', { lineHeight: 1.4 }]
+ * // }
+ */
+export function generateTextStyles(sizes: {
+    [key: string]: {
+        size: number;
+        lineHeight?: number;
+    };
+}, category: "content" | "ui" | "heading"): {
+    [key: string]: [string, {
+        lineHeight: number;
+    }];
+};
+/**
+ * Generates border radius styles with UI scaling
+ *
+ * @param {{[key: string]: string | {size: number}}} sizes
+ *   Set of radius sizes to generate, either as:
+ *   - Object with size property (e.g., { size: 10 })
+ *   - Direct string value (e.g., '0px', '9999px')
+ *
+ * @returns {Object.<string, string>}
+ *   Generated border radius styles in Tailwind format
+ *
+ * @throws {Error} If a value has an invalid type
+ *
+ * @example
+ * const RADIUS_SIZES = {
+ *   none: '0px',
+ *   sm: { size: 10 },
+ *   md: { size: 15 },
+ *   full: '9999px'
+ * };
+ *
+ * generateBorderRadiusStyles(RADIUS_SIZES)
+ * // Returns:
+ * // {
+ * //   'none': '0px',
+ * //   'sm': 'calc(10px * var(--scale-ui))',
+ * //   'md': 'calc(15px * var(--scale-ui))',
+ * //   'full': '9999px'
+ * // }
+ */
+export function generateBorderRadiusStyles(sizes: {
+    [key: string]: string | {
+        size: number;
+    };
+}): {
+    [x: string]: string;
+};
+/**
+ * Generates width styles for various CSS properties with UI scaling and explicit naming
+ *
+ * @param {{[key: string]: {size: number}}} sizes
+ *   Set of width sizes to generate
+ *
+ * @param {string} [prefix='width']
+ *   Prefix to add before each variant name (default: 'width')
+ *
+ * @param {string} scaleVar
+ *   CSS variable to use for scaling (default: '--scale-ui')
+ *
+ * @returns {{[key: string]: string}}
+ *   Generated width styles in Tailwind format
+ *
+ * @throws {Error} If a size has an invalid type
+ *
+ * @example
+ * const WIDTH_SIZES = {
+ *   thin: { size: 1 },
+ *   normal: { size: 2 },
+ *   thick: { size: 4 }
+ * };
+ *
+ * generateWidthStyles(WIDTH_SIZES, 'width')
+ * // Returns:
+ * // {
+ * //   'width-thin': 'calc(1px * var(--scale-ui))',
+ * //   'width-normal': 'calc(2px * var(--scale-ui))',
+ * //   'width-thick': 'calc(4px * var(--scale-ui))'
+ * // }
+ */
+export function generateWidthStyles(sizes: {
+    [key: string]: {
+        size: number;
+    };
+}, prefix?: string, scaleVar?: string): {
+    [key: string]: string;
+};