@hkdigital/lib-core 0.3.14 → 0.4.3

package/dist/design/config/{design-config.d.ts → design-tokens.d.ts}

@@ -1,8 +1,20 @@
-export namespace DESIGN {
+export namespace designTokens {
+    export { DESIGN };
+    export { CLAMPING };
+    export { TEXT_POINT_SIZES };
+    export { VIEWPORT_POINT_SIZES };
+    export { TEXT_BASE_SIZES };
+    export { TEXT_HEADING_SIZES };
+    export { TEXT_UI_SIZES };
+    export { RADIUS_SIZES };
+    export { BORDER_WIDTH_SIZES };
+    export { STROKE_WIDTH_SIZES };
+}
+declare namespace DESIGN {
     let width: number;
     let height: number;
 }
-export namespace CLAMPING {
+declare namespace CLAMPING {
     namespace ui {
         let min: number;
         let max: number;
@@ -26,9 +38,9 @@ export namespace CLAMPING {
         export { max_3 as max };
     }
 }
-export const TEXT_POINT_SIZES: number[];
-export const VIEWPORT_POINT_SIZES: number[];
-export namespace TEXT_BASE_SIZES {
+declare const TEXT_POINT_SIZES: number[];
+declare const VIEWPORT_POINT_SIZES: number[];
+declare namespace TEXT_BASE_SIZES {
     namespace sm {
         let size: number;
         let lineHeight: number;
@@ -46,7 +58,7 @@ export namespace TEXT_BASE_SIZES {
         export { lineHeight_2 as lineHeight };
     }
 }
-export namespace TEXT_HEADING_SIZES {
+declare namespace TEXT_HEADING_SIZES {
     namespace h1 {
         let size_3: number;
         export { size_3 as size };
@@ -78,7 +90,7 @@ export namespace TEXT_HEADING_SIZES {
         export { lineHeight_7 as lineHeight };
     }
 }
-export namespace TEXT_UI_SIZES {
+declare namespace TEXT_UI_SIZES {
     export namespace sm_1 {
         let size_8: number;
         export { size_8 as size };
@@ -101,7 +113,7 @@ export namespace TEXT_UI_SIZES {
     }
     export { lg_1 as lg };
 }
-export namespace RADIUS_SIZES {
+declare namespace RADIUS_SIZES {
     export let none: string;
     export namespace xs {
         let size_11: number;
@@ -124,7 +136,7 @@ export namespace RADIUS_SIZES {
     export { lg_2 as lg };
     export let full: string;
 }
-export namespace BORDER_WIDTH_SIZES {
+declare namespace BORDER_WIDTH_SIZES {
     namespace thin {
         let size_15: number;
         export { size_15 as size };
@@ -138,7 +150,7 @@ export namespace BORDER_WIDTH_SIZES {
         export { size_17 as size };
     }
 }
-export namespace STROKE_WIDTH_SIZES {
+declare namespace STROKE_WIDTH_SIZES {
     export namespace thin_1 {
         let size_18: number;
         export { size_18 as size };
@@ -155,3 +167,4 @@ export namespace STROKE_WIDTH_SIZES {
     }
     export { thick_1 as thick };
 }
+export {};

package/dist/design/config/design-tokens.js

@@ -0,0 +1,107 @@
+/**
+ * @fileoverview HKdigital Design Tokens
+ * 
+ * Default design system tokens for the HKdigital design system.
+ * These tokens define all the design values used to generate Tailwind theme extensions.
+ * 
+ * Users can create their own design-tokens.js file with custom values
+ * and pass it to generateTailwindThemeExtensions().
+ */
+
+/* == Design dimensions == */
+
+const DESIGN = {
+  width: 1024,
+  height: 768
+};
+
+/* == Scaling-clamping behaviour == */
+
+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 == */
+
+const TEXT_POINT_SIZES = [
+  1, 2, 4, 6, 8, 10, 11, 12, 16, 20, 24, 28, 32, 36, 50
+];
+
+const VIEWPORT_POINT_SIZES = [
+  1, 2, 4, 5, 6, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120, 140, 160, 180,
+  200
+];
+
+const TEXT_BASE_SIZES = {
+  sm: { size: 14, lineHeight: 1.25 },
+  md: { size: 16, lineHeight: 1.25 },
+  lg: { size: 18, lineHeight: 1.25 }
+};
+
+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 }
+};
+
+const TEXT_UI_SIZES = {
+  sm: { size: 14, lineHeight: 1 },
+  md: { size: 16, lineHeight: 1 },
+  lg: { size: 18, lineHeight: 1 }
+};
+
+/* == Border radius == */
+
+const RADIUS_SIZES = {
+  none: '0px',
+  xs: { size: 5 },
+  sm: { size: 10 },
+  md: { size: 25 },
+  lg: { size: 35 },
+  full: '9999px'
+};
+
+/* == Border width == */
+
+const BORDER_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};
+
+/* == Stroke width == */
+
+const STROKE_WIDTH_SIZES = {
+  thin: { size: 1 },
+  normal: { size: 2 },
+  thick: { size: 4 }
+};
+
+/**
+ * Complete design tokens configuration
+ * 
+ * @example Usage with generateTailwindThemeExtensions
+ * ```javascript
+ * import { generateTailwindThemeExtensions } from '@hkdigital/lib-core/design/index.js';
+ * import { designTokens } from '@hkdigital/lib-core/design/config/design-tokens.js';
+ * 
+ * const themeExtensions = generateTailwindThemeExtensions(designTokens);
+ * ```
+ */
+export const designTokens = {
+  DESIGN,
+  CLAMPING,
+  TEXT_POINT_SIZES,
+  VIEWPORT_POINT_SIZES,
+  TEXT_BASE_SIZES,
+  TEXT_HEADING_SIZES,
+  TEXT_UI_SIZES,
+  RADIUS_SIZES,
+  BORDER_WIDTH_SIZES,
+  STROKE_WIDTH_SIZES
+};

package/dist/design/generators/index.d.ts

@@ -1,3 +1,54 @@
+/**
+ * Generate complete Tailwind CSS theme extensions from design configuration
+ *
+ * Takes design configuration objects and generates complete Tailwind theme extensions.
+ * Users can define their own design-config.js with custom values and pass them here.
+ *
+ * @param {Object} designConfig - Design configuration object
+ * @param {Object} designConfig.TEXT_POINT_SIZES - Array of text point sizes for spacing
+ * @param {Object} designConfig.VIEWPORT_POINT_SIZES - Array of viewport point sizes
+ * @param {Object} designConfig.TEXT_BASE_SIZES - Base text size configurations
+ * @param {Object} designConfig.TEXT_HEADING_SIZES - Heading text size configurations
+ * @param {Object} designConfig.TEXT_UI_SIZES - UI text size configurations
+ * @param {Object} designConfig.RADIUS_SIZES - Border radius configurations
+ * @param {Object} designConfig.BORDER_WIDTH_SIZES - Border width configurations
+ * @param {Object} designConfig.STROKE_WIDTH_SIZES - Stroke width configurations
+ *
+ * @returns {Object} Complete Tailwind theme extension object
+ *
+ * @example Basic usage
+ * ```javascript
+ * // your-project/src/lib/design/design-config.js
+ * export const DESIGN = { width: 1440, height: 900 };
+ * export const TEXT_BASE_SIZES = {
+ *   sm: { size: 12, lineHeight: 1.3 },
+ *   md: { size: 16, lineHeight: 1.4 }
+ * };
+ * // ... other exports
+ *
+ * // your-project/tailwind.config.js
+ * import { generateTailwindThemeExtensions } from '@hkdigital/lib-core/design/index.js';
+ * import { customUtilitiesPlugin } from '@hkdigital/lib-core/design/index.js';
+ * import * as designConfig from './src/lib/design/design-config.js';
+ *
+ * export default {
+ *   theme: {
+ *     extend: generateTailwindThemeExtensions(designConfig)
+ *   },
+ *   plugins: [customUtilitiesPlugin]
+ * };
+ * ```
+ */
+export function generateTailwindThemeExtensions({ TEXT_POINT_SIZES, VIEWPORT_POINT_SIZES, TEXT_BASE_SIZES, TEXT_HEADING_SIZES, TEXT_UI_SIZES, RADIUS_SIZES, BORDER_WIDTH_SIZES, STROKE_WIDTH_SIZES }: {
+    TEXT_POINT_SIZES: any;
+    VIEWPORT_POINT_SIZES: any;
+    TEXT_BASE_SIZES: any;
+    TEXT_HEADING_SIZES: any;
+    TEXT_UI_SIZES: any;
+    RADIUS_SIZES: any;
+    BORDER_WIDTH_SIZES: any;
+    STROKE_WIDTH_SIZES: any;
+}): any;
 /**
  * Generates text-based spacing units with with different scaling
  * units (ut, bt, ht)

package/dist/design/generators/index.js

@@ -1,3 +1,127 @@
+/**
+ * Generate complete Tailwind CSS theme extensions from design configuration
+ *
+ * Takes design configuration objects and generates complete Tailwind theme extensions.
+ * Users can define their own design-config.js with custom values and pass them here.
+ *
+ * @param {Object} designConfig - Design configuration object
+ * @param {Object} designConfig.TEXT_POINT_SIZES - Array of text point sizes for spacing
+ * @param {Object} designConfig.VIEWPORT_POINT_SIZES - Array of viewport point sizes
+ * @param {Object} designConfig.TEXT_BASE_SIZES - Base text size configurations
+ * @param {Object} designConfig.TEXT_HEADING_SIZES - Heading text size configurations
+ * @param {Object} designConfig.TEXT_UI_SIZES - UI text size configurations
+ * @param {Object} designConfig.RADIUS_SIZES - Border radius configurations
+ * @param {Object} designConfig.BORDER_WIDTH_SIZES - Border width configurations
+ * @param {Object} designConfig.STROKE_WIDTH_SIZES - Stroke width configurations
+ *
+ * @returns {Object} Complete Tailwind theme extension object
+ *
+ * @example Basic usage
+ * ```javascript
+ * // your-project/src/lib/design/design-config.js
+ * export const DESIGN = { width: 1440, height: 900 };
+ * export const TEXT_BASE_SIZES = {
+ *   sm: { size: 12, lineHeight: 1.3 },
+ *   md: { size: 16, lineHeight: 1.4 }
+ * };
+ * // ... other exports
+ *
+ * // your-project/tailwind.config.js
+ * import { generateTailwindThemeExtensions } from '@hkdigital/lib-core/design/index.js';
+ * import { customUtilitiesPlugin } from '@hkdigital/lib-core/design/index.js';
+ * import * as designConfig from './src/lib/design/design-config.js';
+ *
+ * export default {
+ *   theme: {
+ *     extend: generateTailwindThemeExtensions(designConfig)
+ *   },
+ *   plugins: [customUtilitiesPlugin]
+ * };
+ * ```
+ */
+export function generateTailwindThemeExtensions({
+  TEXT_POINT_SIZES,
+  VIEWPORT_POINT_SIZES,
+  TEXT_BASE_SIZES,
+  TEXT_HEADING_SIZES,
+  TEXT_UI_SIZES,
+  RADIUS_SIZES,
+  BORDER_WIDTH_SIZES,
+  STROKE_WIDTH_SIZES
+}) {
+  const textBasedSpacing = generateTextBasedSpacing(TEXT_POINT_SIZES);
+  const viewportBasedSpacing = generateViewportBasedSpacing(VIEWPORT_POINT_SIZES);
+
+  return {
+    spacing: {
+      ...viewportBasedSpacing,
+      ...textBasedSpacing
+    },
+
+    fontSize: {
+      ...textBasedSpacing,
+      ...generateTextStyles(TEXT_BASE_SIZES, 'base'),
+      ...generateTextStyles(TEXT_HEADING_SIZES, 'heading'),
+      ...generateTextStyles(TEXT_UI_SIZES, 'ui')
+    },
+
+    borderRadius: {
+      ...generateBorderRadiusStyles(RADIUS_SIZES)
+    },
+
+    borderWidth: {
+      ...generateWidthStyles(BORDER_WIDTH_SIZES, 'width')
+    },
+
+    strokeWidth: {
+      ...generateWidthStyles(STROKE_WIDTH_SIZES, 'width')
+    },
+
+    outlineWidth: {
+      ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+    },
+
+    outlineOffset: {
+      ...generateWidthStyles(STROKE_WIDTH_SIZES, '')
+    },
+
+    colors: {
+      ...generateColorStyles()
+    },
+
+    borderColor: {
+      ...generateColorStyles()
+    }
+  };
+}
+
+/**
+ * Generates color styles using CSS variables
+ * Creates color classes for the design system theme
+ * @returns {Object} Color styles in Tailwind format
+ */
+function generateColorStyles() {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+  const colorNames = ['primary', 'secondary', 'tertiary', 'surface', 'success', 'warning', 'error'];
+  const colors = {};
+
+  // Generate main color variations
+  for (const colorName of colorNames) {
+    colors[colorName] = {};
+    for (const shade of shades) {
+      colors[colorName][shade] = `rgb(var(--color-${colorName}-${shade}) / <alpha-value>)`;
+    }
+    
+    // Add contrast colors
+    for (const shade of shades) {
+      colors[`${colorName}-contrast`] = colors[`${colorName}-contrast`] || {};
+      colors[`${colorName}-contrast`][shade] = `rgb(var(--color-${colorName}-contrast-${shade}) / <alpha-value>)`;
+    }
+  }
+
+  return colors;
+}
+
 /**
  * Generates text-based spacing units with with different scaling
  * units (ut, bt, ht)

package/dist/design/index.d.ts

@@ -1,8 +1,7 @@
+export { designTokens } from "./config/design-tokens.js";
 export { customUtilitiesPlugin } from "./plugins/skeleton.js";
 export { toStateClasses } from "./utils/states.js";
-export { DESIGN, CLAMPING, 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";
-export { generateTextBasedSpacing, generateViewportBasedSpacing, generateTextStyles, generateBorderRadiusStyles, generateWidthStyles } from "./generators/index.js";
-export { spacing, fontSize, borderRadius, borderWidth, strokeWidth, outlineWidth, outlineOffset } from "./tailwind-theme-extend.js";
-export { rootDesignVarsHTML, getRootCssDesignWidth, getRootCssDesignHeight, getAllRootScalingVars } from "./utils/root-vars.js";
+export { generateTailwindThemeExtensions, generateTextBasedSpacing, generateViewportBasedSpacing, generateTextStyles, generateBorderRadiusStyles, generateWidthStyles } from "./generators/index.js";
+export { designTokensToRootCssVars, getRootCssDesignWidth, getRootCssDesignHeight, getAllRootScalingVars } from "./utils/root-vars.js";
 export { getClampParams, clamp } from "./utils/clamp.js";
 export { enableContainerScaling, enableScalingUI } from "./utils/scaling.js";

package/dist/design/index.js

@@ -2,53 +2,49 @@
  * @fileoverview HKdigital Core Design System
  * 
  * This module provides a comprehensive design system for building consistent,
- * responsive interfaces. It includes configuration objects, generator functions,
- * and ready-to-use Tailwind theme extensions.
+ * responsive interfaces. It includes design tokens, generator functions,
+ * and utility functions for creating custom Tailwind theme extensions.
  * 
- * @example Basic usage in tailwind.config.js
+ * @example Basic usage with default tokens
  * ```javascript
- * import { spacing, fontSize, customUtilitiesPlugin } from '@hkdigital/lib-core/design';
+ * import { generateTailwindThemeExtensions, designTokens, customUtilitiesPlugin } from '@hkdigital/lib-core/design/index.js';
+ *
+ * const themeExtensions = generateTailwindThemeExtensions(designTokens);
  * 
  * export default {
  *   theme: {
- *     extend: { spacing, fontSize }
+ *     extend: themeExtensions
  *   },
  *   plugins: [customUtilitiesPlugin]
  * };
  * ```
  * 
- * @example Advanced customization
+ * @example Custom design tokens
  * ```javascript
- * import { 
- *   generateTextBasedSpacing, 
- *   DESIGN, 
- *   TEXT_POINT_SIZES 
- * } from '@hkdigital/lib-core/design';
+ * import { generateTailwindThemeExtensions } from '@hkdigital/lib-core/design/index.js';
+ *
+ * const myTokens = {
+ *   TEXT_POINT_SIZES: [4, 8, 12, 16, 24],
+ *   TEXT_BASE_SIZES: {
+ *     sm: { size: 12, lineHeight: 1.3 }
+ *   }
+ *   // ... other tokens
+ * };
  * 
- * const customSpacing = generateTextBasedSpacing([8, 12, 16, 24]);
+ * const themeExtensions = generateTailwindThemeExtensions(myTokens);
  * ```
  */
 
-// === Configuration Objects ===
-// Projects can import and customize these for their own design systems
+// === Design Tokens ===
+// Default design tokens - projects can import and customize for their own design systems
 
-export {
-  DESIGN,
-  CLAMPING,
-  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';
+export { designTokens } from './config/design-tokens.js';
 
 // === Generator Functions ===
 // Essential tools for projects to build custom Tailwind extensions
 
 export {
+  generateTailwindThemeExtensions,
   generateTextBasedSpacing,
   generateViewportBasedSpacing,
   generateTextStyles,
@@ -56,19 +52,6 @@ export {
   generateWidthStyles
 } from './generators/index.js';
 
-// === Ready-to-use Tailwind Extensions ===
-// Built using default configuration - projects can use directly or as reference
-
-export {
-  spacing,
-  fontSize,
-  borderRadius,
-  borderWidth,
-  strokeWidth,
-  outlineWidth,
-  outlineOffset
-} from './tailwind-theme-extend.js';
-
 // === Plugins & Utilities ===
 // Framework integration tools
 
@@ -78,7 +61,7 @@ export { customUtilitiesPlugin } from './plugins/skeleton.js';
 // Essential utility functions for design system implementation
 
 export { 
-  rootDesignVarsHTML,
+  designTokensToRootCssVars,
   getRootCssDesignWidth,
   getRootCssDesignHeight,
   getAllRootScalingVars
@@ -94,4 +77,4 @@ export { toStateClasses } from './utils/states.js';
 export {
   enableContainerScaling,
   enableScalingUI
-} from './utils/scaling.js';
+} from './utils/scaling.js';

package/dist/design/plugins/skeleton.d.ts

@@ -33,9 +33,11 @@
  *   ]
  * };
  *
- * @param {Object} api - Tailwind plugin API
- * @param {Function} api.addUtilities - Function to add utilities
+ * @param {object} _ - Tailwind plugin API
+ * @param {function} _.addUtilities - Function to add utilities
+ * @param {*} _.theme
  */
 export function customUtilitiesPlugin({ addUtilities, theme }: {
     addUtilities: Function;
+    theme: any;
 }): void;

package/dist/design/plugins/skeleton.js

@@ -33,8 +33,9 @@
  *   ]
  * };
  *
- * @param {Object} api - Tailwind plugin API
- * @param {Function} api.addUtilities - Function to add utilities
+ * @param {object} _ - Tailwind plugin API
+ * @param {function} _.addUtilities - Function to add utilities
+ * @param {*} _.theme
  */
 export function customUtilitiesPlugin({ addUtilities, theme }) {
   const fontFamilyUtilities = {

package/dist/design/themes/hkdev/components/buttons/button-text.css

@@ -1,32 +1,45 @@
-@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 */
+/* Type-based styling for text buttons */
+[data-component='button'][data-type='text'] {
+  /* Typography settings */
+  @apply type-ui-md-dark;
+  @apply uppercase;
+  @apply whitespace-nowrap;
+
+  /* Size settings */
+
+  &[data-size='sm'] {
+    @apply rounded-sm;
+    @apply type-ui-sm-dark;
+    @apply py-2ut px-8ut;
+    min-width: var(--btn-min-width);
+    min-height: var(--btn-min-height);
+  }
 
-    &[data-size="md"] {
-      @apply rounded-sm;
-      @apply py-8ut px-16ut;
-      min-width: var(--btn-min-width);
-      min-height: var(--btn-min-height);
-    }
+  &[data-size='md'] {
+    @apply rounded-sm;
+    @apply type-ui-md-dark;
+    @apply py-4ut px-8ut;
+    min-width: var(--btn-min-width);
+    min-height: var(--btn-min-height);
+  }
 
-    /* Role-specific text adjustments */
-    &[data-role="primary"] {
-      @apply font-extrabold;
-    }
+  &[data-size='lg'] {
+    @apply rounded-sm;
+    @apply type-ui-lg-dark;
+    @apply py-8ut px-16ut;
+    min-width: var(--btn-min-width);
+    min-height: var(--btn-min-height);
+  }
 
-    &[data-role="secondary"] {
-      @apply font-bold;
-    }
+  /* Role-specific text adjustments */
+  &[data-role='primary'] {
+    color: var(--btn-primary-text);
+    @apply font-extrabold;
   }
 
+  &[data-role='secondary'] {
+    color: var(--btn-secondary-text);
+    @apply font-bold;
+  }
 }

package/dist/design/themes/hkdev/theme-ext.js

@@ -1,4 +1,4 @@
-import { theme as themeStore } from '../../../stores/index.js';
+import { theme as themeStore } from '../../../state/stores.js';
 
 /**
  * Set meta them color for the current theme

package/dist/design/utils/clamp.js

@@ -1,4 +1,4 @@
-import { getRootCssVar } from '../../util/css/index.js';
+import { getRootCssVar } from './root-vars.js';
 
 /**
  * Cache to that ensures we parse CSS clamp parameters only once