commons-shared-web-ui 0.0.43 → 0.0.45

package/index.d.ts

@@ -300,6 +300,7 @@ interface FieldConfig {
     phoneConfig?: PhoneConfig;
     numberConfig?: NumberConfig;
     dateConfig?: DateConfig;
+    timeConfig?: TimeConfig;
     optionConfig?: OptionConfig$1;
     autocompleteConfig?: AutocompleteConfig;
     generatedConfig?: GeneratedConfig;
@@ -336,6 +337,8 @@ interface NumberConfig {
 }
 interface DateConfig {
     allowFuture?: boolean;
+    /** When false, dates before today are disabled (today is the minimum). When true (default), all past dates are allowed. */
+    allowPast?: boolean;
     minDate?: string;
     maxDate?: string;
     /** When true, the text input is readonly (picker-only, no keyboard entry). */
@@ -343,6 +346,20 @@ interface DateConfig {
     /** Name of a sibling field whose value is used as the dynamic minimum date. */
     minDateField?: string;
 }
+interface TimeConfig {
+    /** Explicit minimum time in "HH:mm" 24-hour format (e.g. "09:00"). */
+    minTime?: string;
+    /** Explicit maximum time in "HH:mm" 24-hour format (e.g. "18:00"). */
+    maxTime?: string;
+    /** When true, the input is readonly. */
+    inputReadonly?: boolean;
+    /**
+     * Name of a sibling TIME field whose value is used as the dynamic minimum time.
+     * When the sibling changes, this field's minimum updates and any now-invalid
+     * value (earlier than the new minimum) is cleared. Mirrors DateConfig.minDateField.
+     */
+    minTimeField?: string;
+}
 interface OptionConfig$1 {
     optionClass?: string;
     optionUrl?: string;
@@ -1461,6 +1478,21 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     isVisible: boolean;
     showPassword: boolean;
     dynamicMinDate: string | null;
+    dynamicMinTime: string | null;
+    /**
+     * Effective minimum date for the datepicker.
+     * Priority: dynamic (sibling field) → explicit minDate → today (when allowPast is false).
+     * When allowPast is not false, past dates stay allowed unless an explicit min is set.
+     */
+    get effectiveMinDate(): string | null;
+    /**
+     * Effective minimum time for the time input.
+     * Priority: dynamic (sibling field) → explicit minTime.
+     * Mirrors {@link effectiveMinDate} for TIME fields.
+     */
+    get effectiveMinTime(): string | null;
+    /** Effective maximum time for the time input (explicit maxTime only). */
+    get effectiveMaxTime(): string | null;
     isMultiDropdownOpen: boolean;
     isDragOver: boolean;
     fileUploadError: string;
@@ -1589,6 +1621,13 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
     setupMatchValidation(): void;
     setupVisibility(): void;
     setupMinDateField(): void;
+    /**
+     * Wires up a dynamic minimum for a TIME field from a sibling TIME field
+     * (config.timeConfig.minTimeField). When the source changes, this field's
+     * minimum updates and any now-invalid value (earlier than the new minimum)
+     * is cleared. Mirrors {@link setupMinDateField} for TIME fields.
+     */
+    setupMinTimeField(): void;
     setupGeneratedField(): void;
     evaluateFormula(context: {
         [key: string]: any;
@@ -1599,6 +1638,16 @@ declare class FormFieldComponent implements OnInit, OnDestroy {
         [key: string]: any;
     }): void;
     private getValueByPath;
+    /**
+     * Replaces `{placeholder}` tokens in a URL with values resolved from the
+     * current form data (supports dot / array-index paths via getValueByPath).
+     * Returns the interpolated URL plus whether EVERY token was resolved.
+     *
+     * Used by the delete flows: when a required id (e.g. `{entityId}`) is missing
+     * — as in CREATE mode before the entity exists — `resolved` is false and the
+     * caller skips the server delete and just removes the item from the form.
+     */
+    private resolveUrlPlaceholders;
     /** Builds HttpHeaders using the token stored in the SmartFormController (sourced from configJSON)
      *  merged with any custom headers declared in optionConfig.headers.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "commons-shared-web-ui",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "peerDependencies": {
     "@angular/animations": "20.3.15",
     "@angular/cdk": "20.2.14",

package/src/lib/modules/alert/alert.theme.scss

@@ -1,85 +1,85 @@
-@use 'sass:map';
-
-$default-alert-config: (
-    font-family: ('Roboto', sans-serif),
-
-    // Structure (Default values in rem, assuming 16px root)
-    padding: 1rem 2rem,
-    // 16px 32px
-    radius: 0.75rem,
-    // 12px
-    gap: 1rem,
-    // 16px
-
-    // Icon
-    icon-size: 1.25rem,
-    // 20px
-    icon-margin-top: 0.125rem,
-    // 2px
-
-    // Text
-    title-size: 1rem,
-    // 16px
-    title-line-height: 1.5rem,
-    // 24px
-    message-size: 0.875rem,
-    // 14px
-
-    // Info
-    info-bg: #F1F3F4,
-    info-color: #3C4043,
-
-    // Warning
-    warning-bg: #F9C80E1F,
-    warning-color: #3C4043,
-    // Default text color for warning usually dark
-    warning-title-color: #3C4043,
-    // Making title dark for better contrast with light yellow bg
-    warning-shadow: none,
-    // Removing shadow as per clean flat design, or keeping if specified. User said "warning-shadow" variant exists.
-
-    // Success
-    success-bg: #E6F4EA,
-    // Light green similar to Info/Error pattern
-    success-color: #16A34A,
-
-    // Error
-    error-bg: #FCE8E6,
-    // Light red
-    error-color: #D93025
-);
-
-@mixin alert-theme($user-config: ()) {
-    $config: map.merge($default-alert-config, $user-config);
-
-    --cc-alert-font-family: #{map.get($config, font-family)};
-
-    // Structure
-    --cc-alert-padding: #{map.get($config, padding)};
-    --cc-alert-radius: #{map.get($config, radius)};
-    --cc-alert-gap: #{map.get($config, gap)};
-
-    // Icon
-    --cc-alert-icon-size: #{map.get($config, icon-size)};
-    --cc-alert-icon-margin-top: #{map.get($config, icon-margin-top)};
-
-    // Text
-    --cc-alert-title-size: #{map.get($config, title-size)};
-    --cc-alert-title-line-height: #{map.get($config, title-line-height)};
-    --cc-alert-message-size: #{map.get($config, message-size)};
-
-    // Colors
-    --cc-alert-info-bg: #{map.get($config, info-bg)};
-    --cc-alert-info-color: #{map.get($config, info-color)};
-
-    --cc-alert-warning-bg: #{map.get($config, warning-bg)};
-    --cc-alert-warning-color: #{map.get($config, warning-color)};
-    --cc-alert-warning-title-color: #{map.get($config, warning-title-color)};
-    --cc-alert-warning-shadow: #{map.get($config, warning-shadow)};
-    --cc-alert-success-bg: #{map.get($config, success-bg)};
-    --cc-alert-success-color: #{map.get($config, success-color)};
-
-    --cc-alert-error-bg: #{map.get($config, error-bg)};
-    --cc-alert-error-color: #{map.get($config, error-color)};
-    --cc-alert-warning-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); // 0px 4px 4px
+@use 'sass:map';
+
+$default-alert-config: (
+    font-family: ('Roboto', sans-serif),
+
+    // Structure (Default values in rem, assuming 16px root)
+    padding: 1rem 2rem,
+    // 16px 32px
+    radius: 0.75rem,
+    // 12px
+    gap: 1rem,
+    // 16px
+
+    // Icon
+    icon-size: 1.25rem,
+    // 20px
+    icon-margin-top: 0.125rem,
+    // 2px
+
+    // Text
+    title-size: 1rem,
+    // 16px
+    title-line-height: 1.5rem,
+    // 24px
+    message-size: 0.875rem,
+    // 14px
+
+    // Info
+    info-bg: #F1F3F4,
+    info-color: #3C4043,
+
+    // Warning
+    warning-bg: #F9C80E1F,
+    warning-color: #3C4043,
+    // Default text color for warning usually dark
+    warning-title-color: #3C4043,
+    // Making title dark for better contrast with light yellow bg
+    warning-shadow: none,
+    // Removing shadow as per clean flat design, or keeping if specified. User said "warning-shadow" variant exists.
+
+    // Success
+    success-bg: #E6F4EA,
+    // Light green similar to Info/Error pattern
+    success-color: #16A34A,
+
+    // Error
+    error-bg: #FCE8E6,
+    // Light red
+    error-color: #D93025
+);
+
+@mixin alert-theme($user-config: ()) {
+    $config: map.merge($default-alert-config, $user-config);
+
+    --cc-alert-font-family: #{map.get($config, font-family)};
+
+    // Structure
+    --cc-alert-padding: #{map.get($config, padding)};
+    --cc-alert-radius: #{map.get($config, radius)};
+    --cc-alert-gap: #{map.get($config, gap)};
+
+    // Icon
+    --cc-alert-icon-size: #{map.get($config, icon-size)};
+    --cc-alert-icon-margin-top: #{map.get($config, icon-margin-top)};
+
+    // Text
+    --cc-alert-title-size: #{map.get($config, title-size)};
+    --cc-alert-title-line-height: #{map.get($config, title-line-height)};
+    --cc-alert-message-size: #{map.get($config, message-size)};
+
+    // Colors
+    --cc-alert-info-bg: #{map.get($config, info-bg)};
+    --cc-alert-info-color: #{map.get($config, info-color)};
+
+    --cc-alert-warning-bg: #{map.get($config, warning-bg)};
+    --cc-alert-warning-color: #{map.get($config, warning-color)};
+    --cc-alert-warning-title-color: #{map.get($config, warning-title-color)};
+    --cc-alert-warning-shadow: #{map.get($config, warning-shadow)};
+    --cc-alert-success-bg: #{map.get($config, success-bg)};
+    --cc-alert-success-color: #{map.get($config, success-color)};
+
+    --cc-alert-error-bg: #{map.get($config, error-bg)};
+    --cc-alert-error-color: #{map.get($config, error-color)};
+    --cc-alert-warning-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.25); // 0px 4px 4px
 }

package/src/lib/modules/button/button.theme.scss

@@ -1,121 +1,121 @@
-@use 'sass:map';
-
-// Default Button Configuration
-$default-button-config: (
-    // Common
-    font-family: ('Roboto', sans-serif),
-    font-weight: 500,
-    font-size: 1rem,
-    // 16px
-    padding: 0.5rem 1rem,
-    // 8px 16px
-
-    // Primary (Dark)
-    primary-bg: #262125,
-    primary-color: #FFFFFF,
-    primary-radius: 0.5rem,
-    // 8px
-    primary-border: none,
-
-    // Warning (Yellow)
-    warning-bg: #F9C80E,
-    warning-color: #000000,
-    warning-radius: 0.25rem,
-    // 4px
-    warning-border: none,
-
-    // Outline (Grey Outline)
-    outline-bg: transparent,
-    outline-color: #000000,
-    outline-radius: 0.25rem,
-    // 4px
-    outline-border: 0.0625rem solid #BDC1C6,
-    // 1px solid
-
-    // Secondary (Light Grey)
-    secondary-bg: #E8EAED,
-    secondary-color: #000000,
-    secondary-radius: 0.25rem,
-    // 4px
-    secondary-border: none,
-
-    // Success (Green)
-    success-bg: #16A34A,
-    success-color: #FFFFFF,
-    success-radius: 0.5rem,
-    // 8px
-    success-border: none,
-
-    // Danger (Red)
-    danger-bg: #E63E30,
-    danger-color: #FFFFFF,
-    danger-radius: 0.25rem,
-    // 4px
-    danger-border: none,
-
-    // Danger Outline (Red Outline)
-    danger-outline-bg: transparent,
-    danger-outline-color: #E63E30,
-    danger-outline-radius: 0.5rem,
-    // 8px
-    danger-outline-border: 0.0625rem solid #E63E30,
-    // 1px solid
-
-    // Disabled State
-    disabled-opacity: 0.6,
-    disabled-cursor: not-allowed
-);
-
-@mixin button-theme($user-config: ()) {
-    $config: map.merge($default-button-config, $user-config);
-
-    // Common
-    --cc-btn-font-family: #{map.get($config, font-family)};
-    --cc-btn-font-weight: #{map.get($config, font-weight)};
-    --cc-btn-font-size: #{map.get($config, font-size)};
-    --cc-btn-padding: #{map.get($config, padding)};
-    --cc-btn-disabled-opacity: #{map.get($config, disabled-opacity)};
-    --cc-btn-disabled-cursor: #{map.get($config, disabled-cursor)};
-
-    // Primary
-    --cc-btn-primary-bg: #{map.get($config, primary-bg)};
-    --cc-btn-primary-color: #{map.get($config, primary-color)};
-    --cc-btn-primary-radius: #{map.get($config, primary-radius)};
-    --cc-btn-primary-border: #{map.get($config, primary-border)};
-
-    // Warning
-    --cc-btn-warning-bg: #{map.get($config, warning-bg)};
-    --cc-btn-warning-color: #{map.get($config, warning-color)};
-    --cc-btn-warning-radius: #{map.get($config, warning-radius)};
-    --cc-btn-warning-border: #{map.get($config, warning-border)};
-
-    // Outline
-    --cc-btn-outline-bg: #{map.get($config, outline-bg)};
-    --cc-btn-outline-color: #{map.get($config, outline-color)};
-    --cc-btn-outline-radius: #{map.get($config, outline-radius)};
-    --cc-btn-outline-border: #{map.get($config, outline-border)};
-
-    // Secondary
-    --cc-btn-secondary-bg: #{map.get($config, secondary-bg)};
-    --cc-btn-secondary-color: #{map.get($config, secondary-color)};
-    --cc-btn-secondary-radius: #{map.get($config, secondary-radius)};
-    --cc-btn-secondary-border: #{map.get($config, secondary-border)};
-
-    // Success
-    --cc-btn-success-bg: #{map.get($config, success-bg)};
-    --cc-btn-success-color: #{map.get($config, success-color)};
-    --cc-btn-success-radius: #{map.get($config, success-radius)};
-    --cc-btn-success-border: #{map.get($config, success-border)};
-
-    // Danger
-    --cc-btn-danger-bg: #{map.get($config, danger-bg)};
-    --cc-btn-danger-color: #{map.get($config, danger-color)};
-    --cc-btn-danger-radius: #{map.get($config, danger-radius)};
-    --cc-btn-danger-border: #{map.get($config, danger-border)};
-
-    // Danger Outline
-    --cc-btn-danger-outline-bg: #{map.get($config, danger-outline-bg)};
-    --cc-btn-danger-outline-color: #{map.get($config, danger-outline-color)};
-    --cc-btn-danger-outline-radius: #{map.get($config, danger-outline-radius)};
-    --cc-btn-danger-outline-border: #{map.get($config, danger-outline-border)};
+@use 'sass:map';
+
+// Default Button Configuration
+$default-button-config: (
+    // Common
+    font-family: ('Roboto', sans-serif),
+    font-weight: 500,
+    font-size: 1rem,
+    // 16px
+    padding: 0.5rem 1rem,
+    // 8px 16px
+
+    // Primary (Dark)
+    primary-bg: #262125,
+    primary-color: #FFFFFF,
+    primary-radius: 0.5rem,
+    // 8px
+    primary-border: none,
+
+    // Warning (Yellow)
+    warning-bg: #F9C80E,
+    warning-color: #000000,
+    warning-radius: 0.25rem,
+    // 4px
+    warning-border: none,
+
+    // Outline (Grey Outline)
+    outline-bg: transparent,
+    outline-color: #000000,
+    outline-radius: 0.25rem,
+    // 4px
+    outline-border: 0.0625rem solid #BDC1C6,
+    // 1px solid
+
+    // Secondary (Light Grey)
+    secondary-bg: #E8EAED,
+    secondary-color: #000000,
+    secondary-radius: 0.25rem,
+    // 4px
+    secondary-border: none,
+
+    // Success (Green)
+    success-bg: #16A34A,
+    success-color: #FFFFFF,
+    success-radius: 0.5rem,
+    // 8px
+    success-border: none,
+
+    // Danger (Red)
+    danger-bg: #E63E30,
+    danger-color: #FFFFFF,
+    danger-radius: 0.25rem,
+    // 4px
+    danger-border: none,
+
+    // Danger Outline (Red Outline)
+    danger-outline-bg: transparent,
+    danger-outline-color: #E63E30,
+    danger-outline-radius: 0.5rem,
+    // 8px
+    danger-outline-border: 0.0625rem solid #E63E30,
+    // 1px solid
+
+    // Disabled State
+    disabled-opacity: 0.6,
+    disabled-cursor: not-allowed
+);
+
+@mixin button-theme($user-config: ()) {
+    $config: map.merge($default-button-config, $user-config);
+
+    // Common
+    --cc-btn-font-family: #{map.get($config, font-family)};
+    --cc-btn-font-weight: #{map.get($config, font-weight)};
+    --cc-btn-font-size: #{map.get($config, font-size)};
+    --cc-btn-padding: #{map.get($config, padding)};
+    --cc-btn-disabled-opacity: #{map.get($config, disabled-opacity)};
+    --cc-btn-disabled-cursor: #{map.get($config, disabled-cursor)};
+
+    // Primary
+    --cc-btn-primary-bg: #{map.get($config, primary-bg)};
+    --cc-btn-primary-color: #{map.get($config, primary-color)};
+    --cc-btn-primary-radius: #{map.get($config, primary-radius)};
+    --cc-btn-primary-border: #{map.get($config, primary-border)};
+
+    // Warning
+    --cc-btn-warning-bg: #{map.get($config, warning-bg)};
+    --cc-btn-warning-color: #{map.get($config, warning-color)};
+    --cc-btn-warning-radius: #{map.get($config, warning-radius)};
+    --cc-btn-warning-border: #{map.get($config, warning-border)};
+
+    // Outline
+    --cc-btn-outline-bg: #{map.get($config, outline-bg)};
+    --cc-btn-outline-color: #{map.get($config, outline-color)};
+    --cc-btn-outline-radius: #{map.get($config, outline-radius)};
+    --cc-btn-outline-border: #{map.get($config, outline-border)};
+
+    // Secondary
+    --cc-btn-secondary-bg: #{map.get($config, secondary-bg)};
+    --cc-btn-secondary-color: #{map.get($config, secondary-color)};
+    --cc-btn-secondary-radius: #{map.get($config, secondary-radius)};
+    --cc-btn-secondary-border: #{map.get($config, secondary-border)};
+
+    // Success
+    --cc-btn-success-bg: #{map.get($config, success-bg)};
+    --cc-btn-success-color: #{map.get($config, success-color)};
+    --cc-btn-success-radius: #{map.get($config, success-radius)};
+    --cc-btn-success-border: #{map.get($config, success-border)};
+
+    // Danger
+    --cc-btn-danger-bg: #{map.get($config, danger-bg)};
+    --cc-btn-danger-color: #{map.get($config, danger-color)};
+    --cc-btn-danger-radius: #{map.get($config, danger-radius)};
+    --cc-btn-danger-border: #{map.get($config, danger-border)};
+
+    // Danger Outline
+    --cc-btn-danger-outline-bg: #{map.get($config, danger-outline-bg)};
+    --cc-btn-danger-outline-color: #{map.get($config, danger-outline-color)};
+    --cc-btn-danger-outline-radius: #{map.get($config, danger-outline-radius)};
+    --cc-btn-danger-outline-border: #{map.get($config, danger-outline-border)};
 }

package/src/lib/modules/configurable-form/configurable-form.theme.scss

@@ -1,78 +1,78 @@
-@use 'sass:map';
-
-// Default configuration for the configurable form theme
-$default-configurable-form-config: (
-    // Colors
-    primary-color: #3B82F6,
-    surface-background: #ffffff,
-    border-color: #D1D5DB,
-    text-primary: #111827,
-    text-secondary: #6B7280,
-    error-color: #DC2626,
-    disabled-background: #F3F4F6,
-    hover-background: #F9FAFB,
-
-    // Inputs specific
-    input-border-color: #D1D5DB,
-    input-focus-border-color: #3B82F6,
-    input-hover-border-color: #9CA3AF,
-    input-bg: #ffffff,
-
-    // Dimensions
-    section-radius: 12px,
-    section-padding: 2rem,
-    section-spacing: 1.5rem,
-    input-radius: 8px,
-    input-padding-y: 0.625rem,
-    input-padding-x: 0.875rem,
-
-    // Typography
-    font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
-    section-title-size: 1.25rem,
-    section-title-weight: 600,
-    label-size: 0.875rem,
-    label-weight: 600,
-    input-font-size: 0.875rem,
-    hint-size: 0.75rem,
-
-    // Shadows
-    section-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)),
-);
-
-// Mixin to generate CSS variables for the configurable form component
-@mixin configurable-form-theme($user-config: ()) {
-    // Merge user config with defaults
-    $config: map.merge($default-configurable-form-config, $user-config);
-
-    // Generate CSS Variables
-    --cf-primary-color: #{map.get($config, primary-color)};
-    --cf-surface-background: #{map.get($config, surface-background)};
-    --cf-border-color: #{map.get($config, border-color)};
-    --cf-text-primary: #{map.get($config, text-primary)};
-    --cf-text-secondary: #{map.get($config, text-secondary)};
-    --cf-error-color: #{map.get($config, error-color)};
-    --cf-disabled-background: #{map.get($config, disabled-background)};
-    --cf-hover-background: #{map.get($config, hover-background)};
-
-    --cf-input-border-color: #{map.get($config, input-border-color)};
-    --cf-input-focus-border-color: #{map.get($config, input-focus-border-color)};
-    --cf-input-hover-border-color: #{map.get($config, input-hover-border-color)};
-    --cf-input-bg: #{map.get($config, input-bg)};
-
-    --cf-section-radius: #{map.get($config, section-radius)};
-    --cf-section-padding: #{map.get($config, section-padding)};
-    --cf-section-spacing: #{map.get($config, section-spacing)};
-    --cf-input-radius: #{map.get($config, input-radius)};
-    --cf-input-padding-y: #{map.get($config, input-padding-y)};
-    --cf-input-padding-x: #{map.get($config, input-padding-x)};
-
-    --cf-font-family: #{map.get($config, font-family)};
-    --cf-section-title-size: #{map.get($config, section-title-size)};
-    --cf-section-title-weight: #{map.get($config, section-title-weight)};
-    --cf-label-size: #{map.get($config, label-size)};
-    --cf-label-weight: #{map.get($config, label-weight)};
-    --cf-input-font-size: #{map.get($config, input-font-size)};
-    --cf-hint-size: #{map.get($config, hint-size)};
-
-    --cf-section-shadow: #{map.get($config, section-shadow)};
+@use 'sass:map';
+
+// Default configuration for the configurable form theme
+$default-configurable-form-config: (
+    // Colors
+    primary-color: #3B82F6,
+    surface-background: #ffffff,
+    border-color: #D1D5DB,
+    text-primary: #111827,
+    text-secondary: #6B7280,
+    error-color: #DC2626,
+    disabled-background: #F3F4F6,
+    hover-background: #F9FAFB,
+
+    // Inputs specific
+    input-border-color: #D1D5DB,
+    input-focus-border-color: #3B82F6,
+    input-hover-border-color: #9CA3AF,
+    input-bg: #ffffff,
+
+    // Dimensions
+    section-radius: 12px,
+    section-padding: 2rem,
+    section-spacing: 1.5rem,
+    input-radius: 8px,
+    input-padding-y: 0.625rem,
+    input-padding-x: 0.875rem,
+
+    // Typography
+    font-family: (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif),
+    section-title-size: 1.25rem,
+    section-title-weight: 600,
+    label-size: 0.875rem,
+    label-weight: 600,
+    input-font-size: 0.875rem,
+    hint-size: 0.75rem,
+
+    // Shadows
+    section-shadow: (0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)),
+);
+
+// Mixin to generate CSS variables for the configurable form component
+@mixin configurable-form-theme($user-config: ()) {
+    // Merge user config with defaults
+    $config: map.merge($default-configurable-form-config, $user-config);
+
+    // Generate CSS Variables
+    --cf-primary-color: #{map.get($config, primary-color)};
+    --cf-surface-background: #{map.get($config, surface-background)};
+    --cf-border-color: #{map.get($config, border-color)};
+    --cf-text-primary: #{map.get($config, text-primary)};
+    --cf-text-secondary: #{map.get($config, text-secondary)};
+    --cf-error-color: #{map.get($config, error-color)};
+    --cf-disabled-background: #{map.get($config, disabled-background)};
+    --cf-hover-background: #{map.get($config, hover-background)};
+
+    --cf-input-border-color: #{map.get($config, input-border-color)};
+    --cf-input-focus-border-color: #{map.get($config, input-focus-border-color)};
+    --cf-input-hover-border-color: #{map.get($config, input-hover-border-color)};
+    --cf-input-bg: #{map.get($config, input-bg)};
+
+    --cf-section-radius: #{map.get($config, section-radius)};
+    --cf-section-padding: #{map.get($config, section-padding)};
+    --cf-section-spacing: #{map.get($config, section-spacing)};
+    --cf-input-radius: #{map.get($config, input-radius)};
+    --cf-input-padding-y: #{map.get($config, input-padding-y)};
+    --cf-input-padding-x: #{map.get($config, input-padding-x)};
+
+    --cf-font-family: #{map.get($config, font-family)};
+    --cf-section-title-size: #{map.get($config, section-title-size)};
+    --cf-section-title-weight: #{map.get($config, section-title-weight)};
+    --cf-label-size: #{map.get($config, label-size)};
+    --cf-label-weight: #{map.get($config, label-weight)};
+    --cf-input-font-size: #{map.get($config, input-font-size)};
+    --cf-hint-size: #{map.get($config, hint-size)};
+
+    --cf-section-shadow: #{map.get($config, section-shadow)};
 }