@hkdigital/lib-sveltekit 0.1.7 → 0.1.9

package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte

@@ -24,7 +24,7 @@
    *   scaleW?: number,
    *   scaleH?: number,
    *   scaleUI?: number,
-   *   scaleTextContent?: number,
+   *   scaleTextBase?: number,
    *   scaleTextHeading?: number,
    *   scaleTextUI?: number,
    *   children?: import('svelte').Snippet,
@@ -47,7 +47,7 @@
     scaleW = $bindable(0),
     scaleH = $bindable(0),
     scaleUI = $bindable(0),
-    scaleTextContent = $bindable(0),
+    scaleTextBase = $bindable(0),
     scaleTextHeading = $bindable(0),
     scaleTextUI = $bindable(0),
 
@@ -97,17 +97,14 @@
     try {
       // Get clamp parameters from CSS variables
       const uiParams = getClampParams('scale-ui');
-      const contentParams = getClampParams('scale-text-content');
+      const baseParams = getClampParams('scale-text-base');
       const headingParams = getClampParams('scale-text-heading');
       const textUIParams = getClampParams('scale-text-ui');
 
       // Apply scaling according to extracted clamp parameters
       scaleUI = clamp(uiParams.min, scaleViewport, uiParams.max);
-      scaleTextContent = clamp(
-        contentParams.min,
-        scaleViewport,
-        contentParams.max
-      );
+
+      scaleTextBase = clamp(baseParams.min, scaleViewport, baseParams.max);
       scaleTextHeading = clamp(
         headingParams.min,
         scaleViewport,
@@ -124,7 +121,7 @@
 
       // Fallback to simple scaling without clamping
       scaleUI = scaleViewport;
-      scaleTextContent = scaleViewport;
+      scaleTextBase = scaleViewport;
       scaleTextHeading = scaleViewport;
       scaleTextUI = scaleViewport;
     }
@@ -135,7 +132,7 @@
       --scale-h: ${scaleH};
       --scale-viewport: ${scaleViewport};
       --scale-ui: ${scaleUI};
-      --scale-text-content: ${scaleTextContent};
+      --scale-text-base: ${scaleTextBase};
       --scale-text-heading: ${scaleTextHeading};
       --scale-text-ui: ${scaleTextUI};
     `;

package/dist/components/boxes/virtual-viewport/VirtualViewport.svelte.d.ts

@@ -15,7 +15,7 @@ type VirtualViewport = {
         scaleW?: number;
         scaleH?: number;
         scaleUI?: number;
-        scaleTextContent?: number;
+        scaleTextBase?: number;
         scaleTextHeading?: number;
         scaleTextUI?: number;
         children?: Snippet<[]>;
@@ -35,8 +35,8 @@ declare const VirtualViewport: import("svelte").Component<{
     scaleW?: number;
     scaleH?: number;
     scaleUI?: number;
-    scaleTextContent?: number;
+    scaleTextBase?: number;
     scaleTextHeading?: number;
     scaleTextUI?: number;
     children?: import("svelte").Snippet;
-}, {}, "designWidth" | "designHeight" | "scaleViewport" | "scaleW" | "scaleH" | "scaleUI" | "scaleTextContent" | "scaleTextHeading" | "scaleTextUI">;
+}, {}, "designWidth" | "designHeight" | "scaleViewport" | "scaleW" | "scaleH" | "scaleUI" | "scaleTextBase" | "scaleTextHeading" | "scaleTextUI">;

package/dist/design/design-config.d.ts

@@ -7,7 +7,7 @@ export namespace CLAMPING {
         let min: number;
         let max: number;
     }
-    namespace textContent {
+    namespace textBase {
         let min_1: number;
         export { min_1 as min };
         let max_1: number;
@@ -28,12 +28,12 @@ export namespace CLAMPING {
 }
 export const TEXT_POINT_SIZES: number[];
 export const VIEWPORT_POINT_SIZES: number[];
-export namespace TEXT_CONTENT_SIZES {
+export namespace TEXT_BASE_SIZES {
     namespace sm {
         let size: number;
         let lineHeight: number;
     }
-    namespace base {
+    namespace md {
         let size_1: number;
         export { size_1 as size };
         let lineHeight_1: number;
@@ -86,13 +86,13 @@ export namespace TEXT_UI_SIZES {
         export { lineHeight_8 as lineHeight };
     }
     export { sm_1 as sm };
-    export namespace base_1 {
+    export namespace md_1 {
         let size_9: number;
         export { size_9 as size };
         let lineHeight_9: number;
         export { lineHeight_9 as lineHeight };
     }
-    export { base_1 as base };
+    export { md_1 as md };
     export namespace lg_1 {
         let size_10: number;
         export { size_10 as size };
@@ -112,10 +112,11 @@ export namespace RADIUS_SIZES {
         export { size_12 as size };
     }
     export { sm_2 as sm };
-    export namespace md {
+    export namespace md_2 {
         let size_13: number;
         export { size_13 as size };
     }
+    export { md_2 as md };
     export namespace lg_2 {
         let size_14: number;
         export { size_14 as size };

package/dist/design/design-config.js

@@ -9,7 +9,7 @@ export const DESIGN = {
 
 export const CLAMPING = {
   ui: { min: 0.3, max: 2 },
-  textContent: { min: 0.75, max: 1.5 },
+  textBase: { min: 0.75, max: 1.5 },
   textHeading: { min: 0.75, max: 2.25 },
   textUi: { min: 0.5, max: 1.25 }
 };
@@ -25,9 +25,9 @@ export const VIEWPORT_POINT_SIZES = [
   200
 ];
 
-export const TEXT_CONTENT_SIZES = {
+export const TEXT_BASE_SIZES = {
   sm: { size: 14, lineHeight: 1.5 },
-  base: { size: 16, lineHeight: 1.5 },
+  md: { size: 16, lineHeight: 1.5 },
   lg: { size: 18, lineHeight: 1.4 }
 };
 
@@ -41,7 +41,7 @@ export const TEXT_HEADING_SIZES = {
 
 export const TEXT_UI_SIZES = {
   sm: { size: 14, lineHeight: 1.1 },
-  base: { size: 16, lineHeight: 1.1 },
+  md: { size: 16, lineHeight: 1.1 },
   lg: { size: 18, lineHeight: 1.1 }
 };
 

package/dist/design/tailwind-theme-extend.d.ts

@@ -21,3 +21,11 @@ export const outlineWidth: {
 export const outlineOffset: {
     [key: string]: string;
 };
+export const fontFamily: {
+    [x: string]: string;
+};
+export const textColor: {
+    [x: string]: {
+        [x: string]: string;
+    };
+};

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

@@ -31,22 +31,22 @@
  * --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-content: clamp(0.75, var(--scale-viewport), 1.5) (Content Text)
+ * --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 (p) - Clamped scaling values
+ * 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:
- * 5p  = 5px  at design size (clamps between 1.5px and 10px)
- * 10p = 10px at design size (clamps between 3px and 20px)
- * 20p = 20px at design size (clamps between 6px and 40px)
+ * 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
@@ -55,32 +55,30 @@
  *
  * --
  *
- * Text-Based Spacing Units (ut, ct, ht)
+ * 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
- * 4ct = calc(4px * var(--scale-text-content))  // Content 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
- * - ct: Paragraph margins, list spacing, content gaps
+ * - bt: Paragraph margins, list spacing, base gaps
  * - ht: Heading margins, title spacing
  *
  * --
  *
- * Viewport Points (vp, wp, hp) - Responsive scaling values
- * vp: Uses min of width/height scaling
+ * 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:
- * 10vp = calc(10px * var(--scale-viewport))
  * 10wp = calc(10px * var(--scale-w))
  * 10hp = calc(10px * var(--scale-h))
  *
@@ -94,13 +92,15 @@ import {
   generateViewportBasedSpacing,
   generateTextStyles,
   generateBorderRadiusStyles,
-  generateWidthStyles
+  generateWidthStyles,
+  generateFontFamilyStyles,
+  generateTextColorStyles
 } from '../util/design-system/tailwind.js';
 
 import {
   TEXT_POINT_SIZES,
   VIEWPORT_POINT_SIZES,
-  TEXT_CONTENT_SIZES,
+  TEXT_BASE_SIZES,
   TEXT_HEADING_SIZES,
   TEXT_UI_SIZES,
   RADIUS_SIZES,
@@ -125,7 +125,7 @@ export const fontSize = {
   ...TEXT_BASED_SPACING,
 
   // Named styles
-  ...generateTextStyles(TEXT_CONTENT_SIZES, 'content'),
+  ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
   ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
   ...generateTextStyles(TEXT_UI_SIZES, 'ui')
 };
@@ -155,6 +155,16 @@ export const outlineOffset = {
   ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
 };
 
+// Add UI font family extension
+export const fontFamily = {
+  ...generateFontFamilyStyles()
+};
+
+// Add UI text color extension
+export const textColor = {
+  ...generateTextColorStyles()
+};
+
 // console.log('borderWidth', borderWidth);
 // console.log('outlineWidth', outlineWidth);
 // console.log('outlineOffset', outlineOffset);

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

@@ -25,7 +25,7 @@
   }
 
   & > .content-box .p {
-    @apply text-content-base;
+    @apply text-base-md;
   }
 
   & > .content-box:has( + .footer-box )
@@ -38,4 +38,4 @@
 }
 
 
-}
+}

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

@@ -5,10 +5,11 @@
   /* Type-based styling for text buttons */
   [data-component="button"][data-type="text"] {
     /* Typography settings */
-    @apply text-ui-base uppercase;
+    @apply font-ui text-ui-md;
+    @apply uppercase;
     @apply whitespace-nowrap;
 
-    /* Adjust padding to better fit text */
+    /* Size specific adjustments */
     /*&[data-size="sm"] {
       @apply px-8ut py-8ut;
     }

package/dist/themes/hkdev/components/icons/icon-steeze.postcss

@@ -6,15 +6,15 @@
   [data-component="icon"][data-type="steeze"] {
 
     &[data-size="sm"] {
-      @apply w-16ct h-16ct;
+      @apply w-16bt h-16bt;
     }
 
     &[data-size="md"] {
-      @apply w-28ct h-28ct;
+      @apply w-28bt h-28bt;
     }
 
     &[data-size="lg"] {
-      @apply w-50ct h-50ct;
+      @apply w-50bt h-50bt;
     }
 
   }

package/dist/themes/hkdev/theme.d.ts

@@ -42,6 +42,14 @@ declare namespace theme {
         '--anchor-text-decoration-hover': string;
         '--anchor-text-decoration-active': string;
         '--anchor-text-decoration-focus': string;
+        '--ui-font-color': string;
+        '--ui-font-color-dark': string;
+        '--ui-font-family': string;
+        '--ui-font-size': string;
+        '--ui-line-height': string;
+        '--ui-font-weight': string;
+        '--ui-font-style': string;
+        '--ui-letter-spacing': string;
         '--space-scale-factor': string;
         '--radii-default': string;
         '--radii-container': string;

package/dist/themes/hkdev/theme.js

@@ -41,6 +41,16 @@ const theme = {
     '--anchor-text-decoration-hover': 'underline',
     '--anchor-text-decoration-active': 'none',
     '--anchor-text-decoration-focus': 'none',
+
+    '--ui-font-color': 'var(--color-surface-950)',
+    '--ui-font-color-dark': 'var(--color-surface-50)',
+    '--ui-font-family': 'Source Sans Pro, system-ui, sans-serif',
+    '--ui-font-size': 'inherit',
+    '--ui-line-height': 'inherit',
+    '--ui-font-weight': 'normal',
+    '--ui-font-style': 'normal',
+    '--ui-letter-spacing': '0em',
+
     '--space-scale-factor': '1',
     '--radii-default': '6px',
     '--radii-container': '12px',

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

@@ -9,9 +9,9 @@ export function getClampParams(varName: string): any;
 /**
  * CSS clamp function implementation
  *
- * @param {number} value - Value to clamp
  * @param {number} min - Minimum value
+ * @param {number} value - Value to clamp
  * @param {number} max - Maximum value
  * @returns {number} Clamped value
  */
-export function clamp(value: number, min: number, max: number): number;
+export function clamp(min: number, value: number, max: number): number;

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

@@ -56,11 +56,11 @@ export function getClampParams(varName) {
 /**
  * CSS clamp function implementation
  *
- * @param {number} value - Value to clamp
  * @param {number} min - Minimum value
+ * @param {number} value - Value to clamp
  * @param {number} max - Maximum value
  * @returns {number} Clamped value
  */
-export function clamp(value, min, max) {
+export function clamp(min, value, max) {
   return Math.max(min, Math.min(value, max));
 }

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

@@ -9,9 +9,9 @@
  * @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.textBase - Base text scaling configuration
+ * @param {number} clamping.textBase.min - Minimum base text scaling
+ * @param {number} clamping.textBase.max - Maximum base 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
@@ -44,7 +44,7 @@ export function rootDesignVarsHTML(design: {
         min: number;
         max: number;
     };
-    textContent: {
+    textBase: {
         min: number;
         max: number;
     };

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

@@ -11,9 +11,9 @@ import { getRootCssVar } from '../../css/css-vars.js';
  * @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.textBase - Base text scaling configuration
+ * @param {number} clamping.textBase.min - Minimum base text scaling
+ * @param {number} clamping.textBase.max - Maximum base 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
@@ -51,7 +51,7 @@ export function rootDesignVarsHTML(design, clamping) {
 
       /* 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-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.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>`;
@@ -90,8 +90,8 @@ export function getAllRootScalingVars() {
       parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
 
     scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
-    scaleTextContent:
-      parseFloat(styles.getPropertyValue('--scale-text-content').trim()) || 0,
+    scaleTextBase:
+      parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
     scaleTextHeading:
       parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
     scaleTextUI:

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

@@ -9,9 +9,9 @@
  * @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.textBase - Base text scaling constraints
+ * @param {number} clamping.textBase.min - Minimum base text scale factor
+ * @param {number} clamping.textBase.max - Maximum base 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
@@ -29,7 +29,7 @@ export function enableScalingUI(design: {
         min: number;
         max: number;
     };
-    textContent: {
+    textBase: {
         min: number;
         max: number;
     };

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

@@ -11,9 +11,9 @@ import { clamp } from '../css/clamp.js';
  * @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.textBase - Base text scaling constraints
+ * @param {number} clamping.textBase.min - Minimum base text scale factor
+ * @param {number} clamping.textBase.max - Maximum base 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
@@ -41,23 +41,23 @@ export function enableScalingUI(design, clamping) {
       const scaleViewport = Math.min(scaleW, scaleH);
 
       // Apply clamping to different element types
-      const scaleUI = clamp(scaleViewport, clamping.ui.min, clamping.ui.max);
+      const scaleUI = clamp(clamping.ui.min, scaleViewport, clamping.ui.max);
 
-      const scaleTextContent = clamp(
+      const scaleTextBase = clamp(
+        clamping.textBase.min,
         scaleViewport,
-        clamping.textContent.min,
-        clamping.textContent.max
+        clamping.textBase.max
       );
 
       const scaleTextHeading = clamp(
-        scaleViewport,
         clamping.textHeading.min,
+        scaleViewport,
         clamping.textHeading.max
       );
 
       const scaleTextUi = clamp(
-        scaleViewport,
         clamping.textUi.min,
+        scaleViewport,
         clamping.textUi.max
       );
 
@@ -70,8 +70,8 @@ export function enableScalingUI(design, clamping) {
       );
       document.documentElement.style.setProperty('--scale-ui', String(scaleUI));
       document.documentElement.style.setProperty(
-        '--scale-text-content',
-        String(scaleTextContent)
+        '--scale-text-base',
+        String(scaleTextBase)
       );
       document.documentElement.style.setProperty(
         '--scale-text-heading',

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

@@ -0,0 +1,41 @@
+/**
+ * Creates utility classes for UI font styling that work with Skeleton themes
+ *
+ * This plugin adds utility classes for UI typography that reference CSS
+ * variables defined in your Skeleton theme, allowing consistent styling of UI
+ * elements across your application.
+ *
+ * @note Important Configuration Requirements:
+ * 1. Add UI font variables to your theme file:
+ *    - `--ui-font-family`: Font family for UI elements
+ *      (falls back to `--base-font-family`)
+ *    - `--ui-font-color`: Text color for UI elements
+ *      (falls back to `--base-font-color`)
+ *    - `--ui-font-color-dark`: Dark mode text color
+ *      (falls back to `--base-font-color-dark`)
+ *
+ * 2. This plugin generates the following utility classes:
+ *    - `font-ui`: Applies UI font family
+ *    - `text-ui`: Applies UI text color
+ *    - `text-ui-dark`: Applies UI dark mode text color (with .dark selector)
+ *
+ * @example
+ * // tailwind.config.js
+ * import { customUtilitiesPlugin }
+ *   from './src/lib/util/design-system/skeleton.js';
+ *
+ * export default {
+ *   plugins: [
+ *     customUtilitiesPlugin,
+ *     skeleton({
+ *       themes: [defaultThemes.cerberus, customThemes.yourTheme]
+ *     })
+ *   ]
+ * };
+ *
+ * @param {Object} api - Tailwind plugin API
+ * @param {Function} api.addUtilities - Function to add utilities
+ */
+export function customUtilitiesPlugin({ addUtilities }: {
+    addUtilities: Function;
+}): void;

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

@@ -0,0 +1,65 @@
+/**
+ * Creates utility classes for UI font styling that work with Skeleton themes
+ *
+ * This plugin adds utility classes for UI typography that reference CSS
+ * variables defined in your Skeleton theme, allowing consistent styling of UI
+ * elements across your application.
+ *
+ * @note Important Configuration Requirements:
+ * 1. Add UI font variables to your theme file:
+ *    - `--ui-font-family`: Font family for UI elements
+ *      (falls back to `--base-font-family`)
+ *    - `--ui-font-color`: Text color for UI elements
+ *      (falls back to `--base-font-color`)
+ *    - `--ui-font-color-dark`: Dark mode text color
+ *      (falls back to `--base-font-color-dark`)
+ *
+ * 2. This plugin generates the following utility classes:
+ *    - `font-ui`: Applies UI font family
+ *    - `text-ui`: Applies UI text color
+ *    - `text-ui-dark`: Applies UI dark mode text color (with .dark selector)
+ *
+ * @example
+ * // tailwind.config.js
+ * import { customUtilitiesPlugin }
+ *   from './src/lib/util/design-system/skeleton.js';
+ *
+ * export default {
+ *   plugins: [
+ *     customUtilitiesPlugin,
+ *     skeleton({
+ *       themes: [defaultThemes.cerberus, customThemes.yourTheme]
+ *     })
+ *   ]
+ * };
+ *
+ * @param {Object} api - Tailwind plugin API
+ * @param {Function} api.addUtilities - Function to add utilities
+ */
+export function customUtilitiesPlugin({ addUtilities }) {
+  const utilities = {
+    '.font-ui': {
+      'font-family': 'var(--ui-font-family, var(--base-font-family))'
+    },
+    '.text-base-color': {
+      color: 'var(--base-font-color)'
+    },
+    '.text-base-color-dark': {
+      color: 'var(--base-font-color-dark)'
+    },
+    '.text-heading-color': {
+      color: 'var(--heading-font-color)'
+    },
+    '.text-heading-color-dark': {
+      color: 'var(--heading-font-color-dark)'
+    },
+    '.text-ui-color': {
+      color: 'var(--ui-font-color, var(--base-font-color))'
+    },
+    '.text-ui-color-dark': {
+      color: 'var(--ui-font-color-dark, var(--base-font-color-dark))'
+    }
+  };
+
+  addUtilities(utilities);
+}

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

@@ -1,12 +1,12 @@
 /**
  * Generates text-based spacing units with with different scaling
- * units (ut, ct, ht)
+ * units (ut, bt, 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
+ *   Generated text-based spacing units with ut, bt, and ht suffixes
  *
  * @throws {Error} If values is not an array or contains non-numeric values
  *
@@ -16,8 +16,8 @@
  * // {
  * //   '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))',
+ * //   '1bt': 'calc(1px * var(--scale-text-base))',
+ * //   '2bt': 'calc(2px * var(--scale-text-base))',
  * //   '1ht': 'calc(1px * var(--scale-text-heading))',
  * //   '2ht': 'calc(2px * var(--scale-text-heading))'
  * // }
@@ -27,15 +27,15 @@ export function generateTextBasedSpacing(values: number[]): {
 };
 /**
  * Generates viewport-based spacing units with different scaling
- * units (p, vp, wp, hp)
+ * units (up, 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)
+ *   - up: UI points (clamped scaling)
+ *   - p:  UI points (deprecated, will be removed in future versions)
  *   - wp: Width points
  *   - hp: Height points
  *
@@ -45,8 +45,8 @@ export function generateTextBasedSpacing(values: number[]): {
  * generateViewportBasedSpacing([1, 2, 4])
  * // Returns:
  * // {
- * //   '1p': 'calc(1px * var(--scale-ui))',
- * //   '1vp': 'calc(1px * var(--scale-viewport))',
+ * //   '1up': 'calc(1px * var(--scale-ui))',
+ * //   '1p': 'calc(1px * var(--scale-ui))',  // deprecated
  * //   '1wp': 'calc(1px * var(--scale-w))',
  * //   '1hp': 'calc(1px * var(--scale-h))'
  * // }
@@ -56,13 +56,13 @@ export function generateViewportBasedSpacing(values: number[]): {
 };
 /**
  * Generates semantic text style definitions for a specific text category
- * (content, UI, or heading). Each style includes a scaled font size and
+ * (base, 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
+ * @param {'base' | 'ui' | 'heading'} category
  *   Text category to generate styles for
  *
  * @returns {{[key: string]: [string, {lineHeight: number}]}}
@@ -71,21 +71,21 @@ export function generateViewportBasedSpacing(values: number[]): {
  * @throws {Error} If a size has an invalid size or lineHeight
  *
  * @example
- * const TEXT_CONTENT_SIZES = {
+ * const TEXT_BASE_SIZES = {
  *   sm: { size: 16, lineHeight: 1.5 },
  *   base: { size: 20, lineHeight: 1.5 },
  *   lg: { size: 24, lineHeight: 1.4 }
  * };
  *
- * generateTextStyles(TEXT_CONTENT_SIZES, 'content');
+ * generateTextStyles(TEXT_BASE_SIZES, 'base');
  * // 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 }]
+ * //   'base-sm':
+ * //     ['calc(16px * var(--scale-text-base))', { lineHeight: 1.5 }],
+ * //   'base-base':
+ * //     ['calc(20px * var(--scale-text-base))', { lineHeight: 1.5 }],
+ * //   'base-lg':
+ * //     ['calc(24px * var(--scale-text-base))', { lineHeight: 1.4 }]
  * // }
  */
 export function generateTextStyles(sizes: {
@@ -93,7 +93,7 @@ export function generateTextStyles(sizes: {
         size: number;
         lineHeight?: number;
     };
-}, category: "content" | "ui" | "heading"): {
+}, category: "base" | "ui" | "heading"): {
     [key: string]: [string, {
         lineHeight: number;
     }];
@@ -174,3 +174,38 @@ export function generateWidthStyles(sizes: {
 }, prefix?: string, scaleVar?: string): {
     [key: string]: string;
 };
+/**
+ * Generates font family styles for different text categories
+ * with fallbacks to base properties when needed
+ *
+ * @returns {Object.<string, string>} Generated font family styles
+ *
+ * @example
+ * // Returns:
+ * // {
+ * //   'ui': 'var(--ui-font-family, var(--base-font-family))'
+ * // }
+ */
+export function generateFontFamilyStyles(): {
+    [x: string]: string;
+};
+/**
+ * Generates text color styles for different text categories
+ * with fallbacks to base properties when needed
+ *
+ * @returns {Object.<string, Object.<string, string>>} Generated text color styles
+ *
+ * @example
+ * // Returns:
+ * // {
+ * //   'ui': {
+ * //     'DEFAULT': 'var(--ui-font-color, var(--base-font-color))',
+ * //     'dark': 'var(--ui-font-color-dark, var(--base-font-color-dark))'
+ * //   }
+ * // }
+ */
+export function generateTextColorStyles(): {
+    [x: string]: {
+        [x: string]: string;
+    };
+};

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

@@ -1,12 +1,12 @@
 /**
  * Generates text-based spacing units with with different scaling
- * units (ut, ct, ht)
+ * units (ut, bt, 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
+ *   Generated text-based spacing units with ut, bt, and ht suffixes
  *
  * @throws {Error} If values is not an array or contains non-numeric values
  *
@@ -16,8 +16,8 @@
  * // {
  * //   '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))',
+ * //   '1bt': 'calc(1px * var(--scale-text-base))',
+ * //   '2bt': 'calc(2px * var(--scale-text-base))',
  * //   '1ht': 'calc(1px * var(--scale-text-heading))',
  * //   '2ht': 'calc(2px * var(--scale-text-heading))'
  * // }
@@ -35,8 +35,8 @@ export function generateTextBasedSpacing(values) {
     // Generate UI text spacing units
     units[`${value}ut`] = `calc(${value}px * var(--scale-text-ui))`;
 
-    // Generate content text spacing units
-    units[`${value}ct`] = `calc(${value}px * var(--scale-text-content))`;
+    // Generate base text spacing units
+    units[`${value}bt`] = `calc(${value}px * var(--scale-text-base))`;
 
     // Generate heading text spacing units
     units[`${value}ht`] = `calc(${value}px * var(--scale-text-heading))`;
@@ -47,15 +47,15 @@ export function generateTextBasedSpacing(values) {
 
 /**
  * Generates viewport-based spacing units with different scaling
- * units (p, vp, wp, hp)
+ * units (up, 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)
+ *   - up: UI points (clamped scaling)
+ *   - p:  UI points (deprecated, will be removed in future versions)
  *   - wp: Width points
  *   - hp: Height points
  *
@@ -65,8 +65,8 @@ export function generateTextBasedSpacing(values) {
  * generateViewportBasedSpacing([1, 2, 4])
  * // Returns:
  * // {
- * //   '1p': 'calc(1px * var(--scale-ui))',
- * //   '1vp': 'calc(1px * var(--scale-viewport))',
+ * //   '1up': 'calc(1px * var(--scale-ui))',
+ * //   '1p': 'calc(1px * var(--scale-ui))',  // deprecated
  * //   '1wp': 'calc(1px * var(--scale-w))',
  * //   '1hp': 'calc(1px * var(--scale-h))'
  * // }
@@ -81,13 +81,13 @@ export function generateViewportBasedSpacing(values) {
       throw new Error(`Invalid spacing value: ${value}. Must be a number.`);
     }
 
-    // Viewport points (min of width/height)
-    units[`${value}vp`] = `calc(${value}px * var(--scale-viewport))`;
     // Width points
     units[`${value}wp`] = `calc(${value}px * var(--scale-w))`;
     // Height points
     units[`${value}hp`] = `calc(${value}px * var(--scale-h))`;
-    // UI points
+    // UI points (standard)
+    units[`${value}up`] = `calc(${value}px * var(--scale-ui))`;
+    // UI points (deprecated)
     units[`${value}p`] = `calc(${value}px * var(--scale-ui))`;
     return units;
   }, {});
@@ -95,13 +95,13 @@ export function generateViewportBasedSpacing(values) {
 
 /**
  * Generates semantic text style definitions for a specific text category
- * (content, UI, or heading). Each style includes a scaled font size and
+ * (base, 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
+ * @param {'base' | 'ui' | 'heading'} category
  *   Text category to generate styles for
  *
  * @returns {{[key: string]: [string, {lineHeight: number}]}}
@@ -110,21 +110,21 @@ export function generateViewportBasedSpacing(values) {
  * @throws {Error} If a size has an invalid size or lineHeight
  *
  * @example
- * const TEXT_CONTENT_SIZES = {
+ * const TEXT_BASE_SIZES = {
  *   sm: { size: 16, lineHeight: 1.5 },
  *   base: { size: 20, lineHeight: 1.5 },
  *   lg: { size: 24, lineHeight: 1.4 }
  * };
  *
- * generateTextStyles(TEXT_CONTENT_SIZES, 'content');
+ * generateTextStyles(TEXT_BASE_SIZES, 'base');
  * // 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 }]
+ * //   'base-sm':
+ * //     ['calc(16px * var(--scale-text-base))', { lineHeight: 1.5 }],
+ * //   'base-base':
+ * //     ['calc(20px * var(--scale-text-base))', { lineHeight: 1.5 }],
+ * //   'base-lg':
+ * //     ['calc(24px * var(--scale-text-base))', { lineHeight: 1.4 }]
  * // }
  */
 export function generateTextStyles(sizes, category) {
@@ -132,8 +132,8 @@ export function generateTextStyles(sizes, category) {
     throw new Error('sizes must be an object');
   }
 
-  if (!['content', 'ui', 'heading'].includes(category)) {
-    throw new Error('category must be one of: content, ui, heading');
+  if (!['base', 'ui', 'heading'].includes(category)) {
+    throw new Error('category must be one of: base, ui, heading');
   }
 
   return Object.entries(sizes).reduce((result, [variant, config]) => {
@@ -287,3 +287,49 @@ export function generateWidthStyles(
     return result;
   }, {});
 }
+
+/**
+ * Generates font family styles for different text categories
+ * with fallbacks to base properties when needed
+ *
+ * @returns {Object.<string, string>} Generated font family styles
+ *
+ * @example
+ * // Returns:
+ * // {
+ * //   'ui': 'var(--ui-font-family, var(--base-font-family))'
+ * // }
+ */
+export function generateFontFamilyStyles() {
+  return {
+    // UI font family with fallback to base font family
+    ui: 'var(--ui-font-family, var(--base-font-family))'
+  };
+}
+
+/**
+ * Generates text color styles for different text categories
+ * with fallbacks to base properties when needed
+ *
+ * @returns {Object.<string, Object.<string, string>>} Generated text color styles
+ *
+ * @example
+ * // Returns:
+ * // {
+ * //   'ui': {
+ * //     'DEFAULT': 'var(--ui-font-color, var(--base-font-color))',
+ * //     'dark': 'var(--ui-font-color-dark, var(--base-font-color-dark))'
+ * //   }
+ * // }
+ */
+export function generateTextColorStyles() {
+  return {
+    // UI text color with fallbacks
+    ui: {
+      // Default color (light mode)
+      DEFAULT: 'var(--ui-font-color, var(--base-font-color))',
+      // Dark mode color
+      dark: 'var(--ui-font-color-dark, var(--base-font-color-dark))'
+    }
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.7",
+	"version": "0.1.9",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"