@hkdigital/lib-sveltekit 0.0.99 → 0.1.1

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

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

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

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

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 ...
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+@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.postcss

@@ -9,7 +9,9 @@
 /*@import "./components/rows/panel-row-2.postcss";*/
 
 /* Buttons */
-@import "./components/buttons/plain-button.postcss";
+@import "./components/buttons/button.postcss";
+@import "./components/buttons/button-text.postcss";
+
 /*@import "./components/buttons/skip-button.postcss";*/
 
 /* Inputs */
@@ -17,6 +19,7 @@
 
 /* ... */
 /*@import "./components/select-level.postcss";*/
+@import "./components/blocks/text-block.postcss";
 
 /* Not used */
 /*@import "./components/hk-tab-icon.postcss";*/
@@ -36,8 +39,11 @@
   /*  @mixin rows-panel-row-2;*/
 
   /* Buttons */
-  @mixin buttons-plain-button;
+  @mixin component-button;
+  @mixin component-button-text;
+
   /*  @mixin buttons-skip-button;*/
+  @mixin text_block;
 
   /* Inputs */
   @mixin inputs-text-input;

package/dist/themes/hkdev/globals.postcss

@@ -3,10 +3,9 @@
 @import "./global/layout.postcss";
 /*@import "./global/text.postcss";*/
 
-[data-theme] {
-/*  @mixin all_vars;*/
-/*  @mixin all_on_colors;*/
-  @mixin all_layout;
-/*  @mixin all_text;*/
-
+[data-theme="hkdev"] {
+  /*  @mixin all_vars;*/
+  /*  @mixin all_on_colors;*/
+    @mixin all_layout;
+  /*  @mixin all_text;*/
 }

package/dist/util/css/css-vars.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Normalizes a CSS variable name to ensure it has the -- prefix
+ *
+ * @param {string} varName - The CSS variable name
+ * @returns {string} Normalized variable name with -- prefix
+ */
+export function normalizeCssVarName(varName: string): string;
+/**
+ * Extract a CSS variable value from document root
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @param {boolean} [useCache=false]
+ *
+ * @returns {any} Parsed value or default
+ */
+export function getRootCssVar(varName: string, useCache?: boolean): any;
+/**
+ * Sets a CSS variable in :root to a new value
+ *
+ * @param {string} varName - The CSS variable name (with or without --)
+ * @param {string|number} value - The new value to set
+ * @returns {boolean} True if successful, false otherwise
+ */
+export function setRootCssVar(varName: string, value: string | number): boolean;

package/dist/util/css/css-vars.js

@@ -0,0 +1,83 @@
+let cssVarCache = {};
+
+/**
+ * Normalizes a CSS variable name to ensure it has the -- prefix
+ *
+ * @param {string} varName - The CSS variable name
+ * @returns {string} Normalized variable name with -- prefix
+ */
+export function normalizeCssVarName(varName) {
+  if (typeof varName !== 'string') {
+    throw new Error('Variable name must be a string');
+  }
+  return varName.startsWith('--') ? varName : `--${varName}`;
+}
+
+/**
+ * Extract a CSS variable value from document root
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @param {boolean} [useCache=false]
+ *
+ * @returns {any} Parsed value or default
+ */
+export function getRootCssVar(varName, useCache = false) {
+  if (cssVarCache[varName] !== undefined && useCache) {
+    return cssVarCache[varName];
+  }
+
+  // Get computed style from document root
+  const rootStyle = getComputedStyle(document.documentElement);
+  const declaration = rootStyle.getPropertyValue(`--${varName}`).trim();
+
+  if (!declaration) {
+    return null;
+  }
+
+  let result;
+
+  // Try to parse as number
+  if (!isNaN(parseFloat(declaration))) {
+    result = parseFloat(declaration);
+  } else {
+    // Return string value
+    result = declaration;
+  }
+
+  // Cache the result
+  cssVarCache[varName] = result;
+  return result;
+}
+
+/**
+ * Sets a CSS variable in :root to a new value
+ *
+ * @param {string} varName - The CSS variable name (with or without --)
+ * @param {string|number} value - The new value to set
+ * @returns {boolean} True if successful, false otherwise
+ */
+export function setRootCssVar(varName, value) {
+  try {
+    if (varName === undefined || varName === null) {
+      throw new Error('Variable name cannot be null or undefined');
+    }
+
+    if (value === undefined || value === null) {
+      throw new Error('Value cannot be null or undefined');
+    }
+
+    const normalizedName = normalizeCssVarName(varName);
+
+    // Convert to string if numeric
+    const formattedValue = typeof value === 'number' ? `${value}` : value;
+
+    document.documentElement.style.setProperty(normalizedName, formattedValue);
+
+    delete cssVarCache[varName];
+
+    return true;
+  } catch (error) {
+    console.error(`Error setting CSS variable ${varName}:`, error);
+    return false;
+  }
+}

package/dist/util/css/index.d.ts

@@ -0,0 +1 @@
+export * from "./css-vars.js";

package/dist/util/css/index.js

@@ -0,0 +1 @@
+export * from './css-vars.js';

package/dist/util/design-system/components/states.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Generates state classes from an object of state variables
+ *
+ * @param {Object.<string, boolean>} stateObject
+ *   Object with state names as keys and boolean values
+ *
+ * @returns {string} Space-separated string of state classes
+ *
+ * @example
+ * // Returns "state-selected state-error"
+ * toStateClasses({ selected: true, loading: false, error: true });
+ */
+export function toStateClasses(stateObject: {
+    [x: string]: boolean;
+}): string;

package/dist/util/design-system/components/states.js

@@ -0,0 +1,22 @@
+/**
+ * Generates state classes from an object of state variables
+ *
+ * @param {Object.<string, boolean>} stateObject
+ *   Object with state names as keys and boolean values
+ *
+ * @returns {string} Space-separated string of state classes
+ *
+ * @example
+ * // Returns "state-selected state-error"
+ * toStateClasses({ selected: true, loading: false, error: true });
+ */
+export function toStateClasses(stateObject) {
+  if (!stateObject || typeof stateObject !== 'object') {
+    return '';
+  }
+
+  return Object.entries(stateObject)
+    .filter((entry) => entry[1] === true)
+    .map(([state]) => `state-${state}`)
+    .join(' ');
+}

package/dist/util/design-system/css/clamp.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Extract clamp parameters from a CSS variable
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @returns {Object} Object with min and max values
+ * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
+ */
+export function getClampParams(varName: string): any;
+/**
+ * CSS clamp function implementation
+ *
+ * @param {number} min - Minimum value
+ * @param {number} val - Value to clamp
+ * @param {number} max - Maximum value
+ * @returns {number} Clamped value
+ */
+export function clamp(min: number, val: number, max: number): number;

package/dist/util/design-system/css/clamp.js

@@ -0,0 +1,66 @@
+import { getRootCssVar } from '../../css/index.js';
+
+/**
+ * Cache to that ensures we parse CSS clamp parameters only once
+ * @type {Object.<string, {min: number, max: number}>}
+ */
+let clampParamCache = {};
+
+/**
+ * Extract clamp parameters from a CSS variable
+ *
+ * @param {string} varName - CSS variable name without '--'
+ * @returns {Object} Object with min and max values
+ * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
+ */
+export function getClampParams(varName) {
+  // Check cache first
+  if (clampParamCache[varName]) {
+    return clampParamCache[varName];
+  }
+
+  // Get the CSS variable value using the existing utility
+  const declaration = getRootCssVar(varName);
+
+  if (declaration === null) {
+    throw new Error(`CSS variable --${varName} not found`);
+  }
+
+  // Parse clamp() function values
+  const clampMatch =
+    typeof declaration === 'string'
+      ? declaration.match(
+          /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
+        )
+      : null;
+
+  if (!clampMatch || clampMatch.length < 3) {
+    // console.log(declaration);
+    throw new Error(
+      `CSS variable --${varName} does not contain a valid clamp function`
+    );
+  }
+
+  const min = parseFloat(clampMatch[1]);
+  const max = parseFloat(clampMatch[2]);
+
+  if (isNaN(min) || isNaN(max)) {
+    throw new Error(`Invalid min/max values in CSS variable --${varName}`);
+  }
+
+  // Cache the result
+  clampParamCache[varName] = { min, max };
+  return { min, max };
+}
+
+/**
+ * CSS clamp function implementation
+ *
+ * @param {number} min - Minimum value
+ * @param {number} val - Value to clamp
+ * @param {number} max - Maximum value
+ * @returns {number} Clamped value
+ */
+export function clamp(min, val, max) {
+  return Math.max(min, Math.min(val, max));
+}

package/dist/util/design-system/css/root-design-vars.d.ts

@@ -0,0 +1,77 @@
+/**
+ * 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: {
+    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;
+    };
+}): string;
+/**
+ * Get design width from CSS variables
+ *
+ * @returns {number} Design width
+ */
+export function getRootCssDesignWidth(): number;
+/**
+ * Get design height from CSS variables
+ *
+ * @returns {number} Design height
+ */
+export function getRootCssDesignHeight(): number;
+/**
+ * Retrieves all current scaling factors from CSS variables
+ *
+ * @returns {Object} An object containing all scaling factors
+ */
+export function getAllRootScalingVars(): any;