commons-shared-web-ui 0.0.38 → 0.0.40

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)};
 }

package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss

@@ -1,87 +1,87 @@
-@use 'sass:map';
-
-$default-confirmation-modal-config: (
-    bg: #FFFFFF,
-    radius: 0.75rem,
-    // 12px
-    shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
-    // 0 4px 24px
-    border: none,
-
-    // Header
-    header-padding: 0.5rem 1rem,
-    // 24px
-    header-border-bottom: 0.0625rem solid #E5E7EB,
-    // 1px
-    title-font-size: 0.875rem,
-    // 20px
-    title-font-weight: 600,
-    title-color: #111827,
-    icon-size: 1.5rem,
-    // 24px
-    close-icon-size: 1.25rem,
-    // 20px
-
-    // Body
-    body-padding: 1.5rem,
-    // 24px
-    body-text-color: #374151,
-
-    // Inputs (Defaults)
-    input-padding: 0.625rem 0.75rem,
-    // 10px 12px
-    input-radius: 0.375rem,
-    // 6px
-    input-font-size: 0.875rem,
-    // 14px
-    label-margin-bottom: 0.5rem,
-    // 8px
-    textarea-min-height: 6.25rem,
-    // 100px
-
-    // Footer
-    footer-bg: #F9FAFB,
-    footer-padding: 1rem 1.5rem,
-    // 24px
-    footer-border-top: 0.0625rem solid #E5E7EB,
-    // 1px
-
-    // Spinner
-    spinner-size: 1rem // 16px
-);
-
-@mixin confirmation-modal-theme($user-config: ()) {
-    $config: map.merge($default-confirmation-modal-config, $user-config);
-
-    --cc-modal-bg: #{map.get($config, bg)};
-    --cc-modal-radius: #{map.get($config, radius)};
-    --cc-modal-shadow: #{map.get($config, shadow)};
-    --cc-modal-border: #{map.get($config, border)};
-
-    // Header Themes
-    --cc-modal-header-bg-dark: #262125;
-    --cc-modal-header-title-color-dark: #FFFFFF;
-
-    --cc-modal-header-padding: #{map.get($config, header-padding)};
-    --cc-modal-header-border-bottom: #{map.get($config, header-border-bottom)};
-    --cc-modal-title-size: #{map.get($config, title-font-size)};
-    --cc-modal-title-weight: #{map.get($config, title-font-weight)};
-    --cc-modal-title-color: #{map.get($config, title-color)};
-    --cc-modal-icon-size: #{map.get($config, icon-size)};
-    --cc-modal-close-icon-size: #{map.get($config, close-icon-size)};
-
-    --cc-modal-body-padding: #{map.get($config, body-padding)};
-    --cc-modal-body-color: #{map.get($config, body-text-color)};
-
-    --cc-modal-input-padding: #{map.get($config, input-padding)};
-    --cc-modal-input-radius: #{map.get($config, input-radius)};
-    --cc-modal-input-font-size: #{map.get($config, input-font-size)};
-    --cc-modal-label-margin-bottom: #{map.get($config, label-margin-bottom)};
-    --cc-modal-textarea-min-height: #{map.get($config, textarea-min-height)};
-
-    --cc-modal-footer-bg: #{map.get($config, footer-bg)};
-    --cc-modal-footer-padding: #{map.get($config, footer-padding)};
-    --cc-modal-footer-border-top: #{map.get($config, footer-border-top)};
-
-    --cc-modal-spinner-size: #{map.get($config, spinner-size)};
+@use 'sass:map';
+
+$default-confirmation-modal-config: (
+    bg: #FFFFFF,
+    radius: 0.75rem,
+    // 12px
+    shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
+    // 0 4px 24px
+    border: none,
+
+    // Header
+    header-padding: 0.5rem 1rem,
+    // 24px
+    header-border-bottom: 0.0625rem solid #E5E7EB,
+    // 1px
+    title-font-size: 0.875rem,
+    // 20px
+    title-font-weight: 600,
+    title-color: #111827,
+    icon-size: 1.5rem,
+    // 24px
+    close-icon-size: 1.25rem,
+    // 20px
+
+    // Body
+    body-padding: 1.5rem,
+    // 24px
+    body-text-color: #374151,
+
+    // Inputs (Defaults)
+    input-padding: 0.625rem 0.75rem,
+    // 10px 12px
+    input-radius: 0.375rem,
+    // 6px
+    input-font-size: 0.875rem,
+    // 14px
+    label-margin-bottom: 0.5rem,
+    // 8px
+    textarea-min-height: 6.25rem,
+    // 100px
+
+    // Footer
+    footer-bg: #F9FAFB,
+    footer-padding: 1rem 1.5rem,
+    // 24px
+    footer-border-top: 0.0625rem solid #E5E7EB,
+    // 1px
+
+    // Spinner
+    spinner-size: 1rem // 16px
+);
+
+@mixin confirmation-modal-theme($user-config: ()) {
+    $config: map.merge($default-confirmation-modal-config, $user-config);
+
+    --cc-modal-bg: #{map.get($config, bg)};
+    --cc-modal-radius: #{map.get($config, radius)};
+    --cc-modal-shadow: #{map.get($config, shadow)};
+    --cc-modal-border: #{map.get($config, border)};
+
+    // Header Themes
+    --cc-modal-header-bg-dark: #262125;
+    --cc-modal-header-title-color-dark: #FFFFFF;
+
+    --cc-modal-header-padding: #{map.get($config, header-padding)};
+    --cc-modal-header-border-bottom: #{map.get($config, header-border-bottom)};
+    --cc-modal-title-size: #{map.get($config, title-font-size)};
+    --cc-modal-title-weight: #{map.get($config, title-font-weight)};
+    --cc-modal-title-color: #{map.get($config, title-color)};
+    --cc-modal-icon-size: #{map.get($config, icon-size)};
+    --cc-modal-close-icon-size: #{map.get($config, close-icon-size)};
+
+    --cc-modal-body-padding: #{map.get($config, body-padding)};
+    --cc-modal-body-color: #{map.get($config, body-text-color)};
+
+    --cc-modal-input-padding: #{map.get($config, input-padding)};
+    --cc-modal-input-radius: #{map.get($config, input-radius)};
+    --cc-modal-input-font-size: #{map.get($config, input-font-size)};
+    --cc-modal-label-margin-bottom: #{map.get($config, label-margin-bottom)};
+    --cc-modal-textarea-min-height: #{map.get($config, textarea-min-height)};
+
+    --cc-modal-footer-bg: #{map.get($config, footer-bg)};
+    --cc-modal-footer-padding: #{map.get($config, footer-padding)};
+    --cc-modal-footer-border-top: #{map.get($config, footer-border-top)};
+
+    --cc-modal-spinner-size: #{map.get($config, spinner-size)};
 }

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

@@ -1,92 +1,92 @@
-@use 'sass:map';
-
-// Default configuration for the filter theme
-$default-filter-config: (
-    // Button Trigger
-    btn-bg: #ffffff,
-    btn-border: 1px solid #e0e0e0,
-    btn-radius: 4px,
-    btn-text-color: #333,
-    btn-hover-bg: #f5f5f5,
-    btn-active-bg: #e3f2fd,
-    btn-active-text: #1976d2,
-    btn-badge-bg: #f44336,
-    btn-badge-text: #fff,
-
-    // Panel / Sidebar
-    panel-bg: #ffffff,
-    panel-border: 1px solid #e0e0e0,
-    panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
-    panel-width: 320px,
-    panel-min-width: 480px,
-    panel-header-bg: #fafafa,
-    panel-header-text: #333,
-    panel-padding: 1rem,
-    panel-radius: 8px,
-    panel-header-height: 48px,
-
-    // Tabs
-    tab-bg: transparent,
-    tab-text: #666,
-    tab-active-bg: #fff,
-    tab-active-text: #1976d2,
-    tab-border-bottom: 2px solid #1976d2,
-
-    // Content
-    section-title: #333,
-    option-text: #555,
-    option-hover-bg: #f9f9f9,
-
-    // Footer actions
-    footer-bg: #fff,
-    footer-border-top: 1px solid #e0e0e0,
-    action-primary-bg: #1976d2,
-    action-primary-text: #fff,
-    action-secondary-text: #666
-);
-
-@mixin filter-theme($user-config: ()) {
-    $config: map.merge($default-filter-config, $user-config);
-
-    // Button Trigger
-    --cc-filter-btn-bg: #{map.get($config, btn-bg)};
-    --cc-filter-btn-border: #{map.get($config, btn-border)};
-    --cc-filter-btn-radius: #{map.get($config, btn-radius)};
-    --cc-filter-btn-text-color: #{map.get($config, btn-text-color)};
-    --cc-filter-btn-hover-bg: #{map.get($config, btn-hover-bg)};
-    --cc-filter-btn-active-bg: #{map.get($config, btn-active-bg)};
-    --cc-filter-btn-active-text: #{map.get($config, btn-active-text)};
-    --cc-filter-btn-badge-bg: #{map.get($config, btn-badge-bg)};
-    --cc-filter-btn-badge-text: #{map.get($config, btn-badge-text)};
-
-    // Panel
-    --cc-filter-panel-bg: #{map.get($config, panel-bg)};
-    --cc-filter-panel-border: #{map.get($config, panel-border)};
-    --cc-filter-panel-shadow: #{map.get($config, panel-shadow)};
-    --cc-filter-panel-width: #{map.get($config, panel-width)};
-    --cc-filter-panel-min-width: #{map.get($config, panel-min-width)};
-    --cc-filter-panel-padding: #{map.get($config, panel-padding)};
-    --cc-filter-panel-header-bg: #{map.get($config, panel-header-bg)};
-    --cc-filter-panel-header-text: #{map.get($config, panel-header-text)};
-    --cc-filter-panel-radius: #{map.get($config, panel-radius)};
-    --cc-filter-panel-header-height: #{map.get($config, panel-header-height)};
-
-    // Tabs
-    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
-    --cc-filter-tab-text: #{map.get($config, tab-text)};
-    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
-    --cc-filter-tab-active-text: #{map.get($config, tab-active-text)};
-    --cc-filter-tab-border-bottom: #{map.get($config, tab-border-bottom)};
-
-    // Content
-    --cc-filter-section-title: #{map.get($config, section-title)};
-    --cc-filter-option-text: #{map.get($config, option-text)};
-    --cc-filter-option-hover-bg: #{map.get($config, option-hover-bg)};
-
-    // Footer
-    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
-    --cc-filter-footer-border-top: #{map.get($config, footer-border-top)};
-    --cc-filter-action-primary-bg: #{map.get($config, action-primary-bg)};
-    --cc-filter-action-primary-text: #{map.get($config, action-primary-text)};
-    --cc-filter-action-secondary-text: #{map.get($config, action-secondary-text)};
+@use 'sass:map';
+
+// Default configuration for the filter theme
+$default-filter-config: (
+    // Button Trigger
+    btn-bg: #ffffff,
+    btn-border: 1px solid #e0e0e0,
+    btn-radius: 4px,
+    btn-text-color: #333,
+    btn-hover-bg: #f5f5f5,
+    btn-active-bg: #e3f2fd,
+    btn-active-text: #1976d2,
+    btn-badge-bg: #f44336,
+    btn-badge-text: #fff,
+
+    // Panel / Sidebar
+    panel-bg: #ffffff,
+    panel-border: 1px solid #e0e0e0,
+    panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
+    panel-width: 320px,
+    panel-min-width: 480px,
+    panel-header-bg: #fafafa,
+    panel-header-text: #333,
+    panel-padding: 1rem,
+    panel-radius: 8px,
+    panel-header-height: 48px,
+
+    // Tabs
+    tab-bg: transparent,
+    tab-text: #666,
+    tab-active-bg: #fff,
+    tab-active-text: #1976d2,
+    tab-border-bottom: 2px solid #1976d2,
+
+    // Content
+    section-title: #333,
+    option-text: #555,
+    option-hover-bg: #f9f9f9,
+
+    // Footer actions
+    footer-bg: #fff,
+    footer-border-top: 1px solid #e0e0e0,
+    action-primary-bg: #1976d2,
+    action-primary-text: #fff,
+    action-secondary-text: #666
+);
+
+@mixin filter-theme($user-config: ()) {
+    $config: map.merge($default-filter-config, $user-config);
+
+    // Button Trigger
+    --cc-filter-btn-bg: #{map.get($config, btn-bg)};
+    --cc-filter-btn-border: #{map.get($config, btn-border)};
+    --cc-filter-btn-radius: #{map.get($config, btn-radius)};
+    --cc-filter-btn-text-color: #{map.get($config, btn-text-color)};
+    --cc-filter-btn-hover-bg: #{map.get($config, btn-hover-bg)};
+    --cc-filter-btn-active-bg: #{map.get($config, btn-active-bg)};
+    --cc-filter-btn-active-text: #{map.get($config, btn-active-text)};
+    --cc-filter-btn-badge-bg: #{map.get($config, btn-badge-bg)};
+    --cc-filter-btn-badge-text: #{map.get($config, btn-badge-text)};
+
+    // Panel
+    --cc-filter-panel-bg: #{map.get($config, panel-bg)};
+    --cc-filter-panel-border: #{map.get($config, panel-border)};
+    --cc-filter-panel-shadow: #{map.get($config, panel-shadow)};
+    --cc-filter-panel-width: #{map.get($config, panel-width)};
+    --cc-filter-panel-min-width: #{map.get($config, panel-min-width)};
+    --cc-filter-panel-padding: #{map.get($config, panel-padding)};
+    --cc-filter-panel-header-bg: #{map.get($config, panel-header-bg)};
+    --cc-filter-panel-header-text: #{map.get($config, panel-header-text)};
+    --cc-filter-panel-radius: #{map.get($config, panel-radius)};
+    --cc-filter-panel-header-height: #{map.get($config, panel-header-height)};
+
+    // Tabs
+    --cc-filter-tab-bg: #{map.get($config, tab-bg)};
+    --cc-filter-tab-text: #{map.get($config, tab-text)};
+    --cc-filter-tab-active-bg: #{map.get($config, tab-active-bg)};
+    --cc-filter-tab-active-text: #{map.get($config, tab-active-text)};
+    --cc-filter-tab-border-bottom: #{map.get($config, tab-border-bottom)};
+
+    // Content
+    --cc-filter-section-title: #{map.get($config, section-title)};
+    --cc-filter-option-text: #{map.get($config, option-text)};
+    --cc-filter-option-hover-bg: #{map.get($config, option-hover-bg)};
+
+    // Footer
+    --cc-filter-footer-bg: #{map.get($config, footer-bg)};
+    --cc-filter-footer-border-top: #{map.get($config, footer-border-top)};
+    --cc-filter-action-primary-bg: #{map.get($config, action-primary-bg)};
+    --cc-filter-action-primary-text: #{map.get($config, action-primary-text)};
+    --cc-filter-action-secondary-text: #{map.get($config, action-secondary-text)};
 }

package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss

@@ -1,38 +1,38 @@
-@use 'sass:map';
-
-$default-filter-sidebar-config: (
-    // Layout
-    width: 100%,
-    padding: 1.5rem,
-    gap: 1.5rem,
-    bg: #FEFEFE,
-    border-radius: 0,
-
-    // Header
-    header-height: 3rem,
-    header-title-size: 1.125rem,
-    header-title-weight: 500,
-    header-title-color: #202124,
-
-    // Footer
-    footer-padding: 1rem 0 0 0,
-    footer-gap: 1rem,
-);
-
-@mixin filter-sidebar-theme($user-config: ()) {
-    $config: map.merge($default-filter-sidebar-config, $user-config);
-
-    --cc-filter-sidebar-width: #{map.get($config, width)};
-    --cc-filter-sidebar-padding: #{map.get($config, padding)};
-    --cc-filter-sidebar-gap: #{map.get($config, gap)};
-    --cc-filter-sidebar-bg: #{map.get($config, bg)};
-    --cc-filter-sidebar-border-radius: #{map.get($config, border-radius)};
-
-    --cc-filter-header-height: #{map.get($config, header-height)};
-    --cc-filter-header-title-size: #{map.get($config, header-title-size)};
-    --cc-filter-header-title-weight: #{map.get($config, header-title-weight)};
-    --cc-filter-header-title-color: #{map.get($config, header-title-color)};
-
-    --cc-filter-footer-padding: #{map.get($config, footer-padding)};
-    --cc-filter-footer-gap: #{map.get($config, footer-gap)};
+@use 'sass:map';
+
+$default-filter-sidebar-config: (
+    // Layout
+    width: 100%,
+    padding: 1.5rem,
+    gap: 1.5rem,
+    bg: #FEFEFE,
+    border-radius: 0,
+
+    // Header
+    header-height: 3rem,
+    header-title-size: 1.125rem,
+    header-title-weight: 500,
+    header-title-color: #202124,
+
+    // Footer
+    footer-padding: 1rem 0 0 0,
+    footer-gap: 1rem,
+);
+
+@mixin filter-sidebar-theme($user-config: ()) {
+    $config: map.merge($default-filter-sidebar-config, $user-config);
+
+    --cc-filter-sidebar-width: #{map.get($config, width)};
+    --cc-filter-sidebar-padding: #{map.get($config, padding)};
+    --cc-filter-sidebar-gap: #{map.get($config, gap)};
+    --cc-filter-sidebar-bg: #{map.get($config, bg)};
+    --cc-filter-sidebar-border-radius: #{map.get($config, border-radius)};
+
+    --cc-filter-header-height: #{map.get($config, header-height)};
+    --cc-filter-header-title-size: #{map.get($config, header-title-size)};
+    --cc-filter-header-title-weight: #{map.get($config, header-title-weight)};
+    --cc-filter-header-title-color: #{map.get($config, header-title-color)};
+
+    --cc-filter-footer-padding: #{map.get($config, footer-padding)};
+    --cc-filter-footer-gap: #{map.get($config, footer-gap)};
 }

package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss

@@ -1,36 +1,36 @@
-@use 'sass:map';
-
-$filter-table-selector-config: (
-  panel-bg: #ffffff,
-  filter-panel-width: 220px,
-  filter-panel-border: 1px solid #dee2e6,
-  header-bg: #ffffff,
-  header-border: 1px solid #dee2e6,
-  header-height: 56px,
-  header-padding: 0 24px,
-  header-title-color: #333333,
-  header-title-font-size: 18px,
-  header-title-font-weight: 600,
-  footer-bg: #ffffff,
-  footer-border: 1px solid #dee2e6,
-  footer-height: 64px,
-  footer-padding: 0 24px,
-  footer-gap: 12px,
-  body-bg: #f8f9fb,
-  filter-section-title-color: #666666,
-  filter-section-title-font-size: 12px,
-  filter-section-title-font-weight: 600,
-  selection-count-color: #666666,
-  selection-count-font-size: 14px,
-  toolbar-border: 1px solid #dee2e6,
-);
-
-@mixin filter-table-selector-theme($user-config: ()) {
-  $config: map.merge($filter-table-selector-config, $user-config);
-
-  :root {
-    @each $key, $value in $config {
-      --fts-#{$key}: #{$value};
-    }
-  }
-}
+@use 'sass:map';
+
+$filter-table-selector-config: (
+  panel-bg: #ffffff,
+  filter-panel-width: 220px,
+  filter-panel-border: 1px solid #dee2e6,
+  header-bg: #ffffff,
+  header-border: 1px solid #dee2e6,
+  header-height: 56px,
+  header-padding: 0 24px,
+  header-title-color: #333333,
+  header-title-font-size: 18px,
+  header-title-font-weight: 600,
+  footer-bg: #ffffff,
+  footer-border: 1px solid #dee2e6,
+  footer-height: 64px,
+  footer-padding: 0 24px,
+  footer-gap: 12px,
+  body-bg: #f8f9fb,
+  filter-section-title-color: #666666,
+  filter-section-title-font-size: 12px,
+  filter-section-title-font-weight: 600,
+  selection-count-color: #666666,
+  selection-count-font-size: 14px,
+  toolbar-border: 1px solid #dee2e6,
+);
+
+@mixin filter-table-selector-theme($user-config: ()) {
+  $config: map.merge($filter-table-selector-config, $user-config);
+
+  :root {
+    @each $key, $value in $config {
+      --fts-#{$key}: #{$value};
+    }
+  }
+}