platformcommons-web-lib 1.0.0

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

@@ -0,0 +1,890 @@
+@use 'sass:map';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Smart Form Theme
+// Prefix: --cc-sf-
+// Two built-in configs supplied:
+//   $default-smart-form-config  → Theme 1 · Clean & Professional (light)
+//   $theme-2-smart-form-config  → Theme 2 · Vibrant & Modern (dark)
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ── Theme 1 — Clean & Professional (default) ─────────────────────────────────
+$default-smart-form-config: (
+    // Typography
+    font-family: ('Inter', 'Segoe UI', sans-serif),
+    font-size-base: 0.875rem,
+
+    // ── Accent colour (flows from app primary; replaces hard-coded blue) ────────
+    accent-color: #3B82F6,
+    selected-color: #3B82F6,
+
+    // ── Form container ──────────────────────────────────────────────────────────
+    form-bg: #ffffff,
+    form-padding: 24px,
+    form-border-radius: 12px,
+    form-border: none,
+    form-shadow: 0 1px 3px rgba(0, 0, 0, 0.06),
+    form-max-width: 1200px,
+    form-section-gap: 24px,
+
+    // ── Form header (title + description) ──────────────────────────────────────
+    form-title-size: 1.5rem,
+    form-title-weight: 700,
+    form-title-color: #111827,
+    form-desc-size: 0.875rem,
+    form-desc-color: #6B7280,
+
+    // ── Section / GROUP — flat layout (no card shell) ───────────────────────────
+    section-bg: #ffffff,
+    section-border: 1px solid #E5E7EB,
+    section-radius: 10px,
+    section-padding: 20px,
+    section-shadow: 0 1px 4px rgba(0, 0, 0, 0.05),
+    section-gap: 20px,
+
+    section-label-size: 1rem,
+    section-label-weight: 600,
+    section-label-color: #1F2937,
+    section-label-border: 2px solid #E5E7EB,
+
+    // ── Section heading left-accent bar ─────────────────────────────────────────
+    section-header-accent-width: 4px,
+    section-header-accent-color: #3B82F6,
+    section-header-bg: #F9FAFB,
+
+    // ── Repeater accordion ──────────────────────────────────────────────────────
+    repeater-accordion-header-bg: #F9FAFB,
+    repeater-accordion-header-color: #1F2937,
+    repeater-accordion-active-bg: #EFF6FF,
+    repeater-badge-bg: #E5E7EB,
+    repeater-badge-color: #374151,
+    section-border-radius-inner: 8px,
+
+    // ── GROUP repeater instance card ────────────────────────────────────────────
+    instance-bg: #F9FAFB,
+    instance-border: 1px solid #E5E7EB,
+    instance-radius: 8px,
+    instance-padding: 16px,
+    instance-divider: 1px dashed #D1D5DB,
+    instance-num-color: #4B5563,
+    instance-num-size: 0.8125rem,
+
+    // ── Grid gap + field gap ─────────────────────────────────────────────────────
+    grid-gap: 16px,
+    field-gap: 6px,
+
+    // ── Focus ring ──────────────────────────────────────────────────────────────
+    focus-ring-width: 3px,
+    focus-ring-offset: 0,
+
+    // ── Field label ─────────────────────────────────────────────────────────────
+    label-size: 0.875rem,
+    label-weight: 500,
+    label-color: #111827,
+    label-required-color: #DC2626,
+
+    // ── Input ───────────────────────────────────────────────────────────────────
+    input-bg: #ffffff,
+    input-color: #111827,
+    input-placeholder: #9CA3AF,
+    input-border: 1.5px solid #D1D5DB,
+    input-radius: 8px,
+    input-padding: 0.625rem 0.875rem,
+    input-font-size: 0.875rem,
+    input-shadow: none,
+
+    input-hover-border: #9CA3AF,
+    input-focus-border: #3B82F6,
+    input-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12),
+    input-transition: all 0.2s ease,
+
+    input-disabled-bg: #F3F4F6,
+    input-disabled-color: #6B7280,
+    input-disabled-border:#E5E7EB,
+
+    // ── Error state ─────────────────────────────────────────────────────────────
+    error-border: #DC2626,
+    error-bg: #FEF2F2,
+    error-focus-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1),
+    error-text-color: #DC2626,
+    error-text-size: 0.75rem,
+
+    // ── Hint / helper text ──────────────────────────────────────────────────────
+    hint-color: #6B7280,
+    hint-size: 0.75rem,
+
+    // ── Chip ────────────────────────────────────────────────────────────────────
+    chip-border: 1px solid #D1D5DB,
+    chip-radius: 20px,
+    chip-padding: 6px 14px,
+    chip-bg: #ffffff,
+    chip-color: #374151,
+    chip-hover-bg: #F3F4F6,
+    chip-selected-bg: #3B82F6,
+    chip-selected-color: #ffffff,
+    chip-selected-border: #3B82F6,
+
+    // ── Switch ──────────────────────────────────────────────────────────────────
+    switch-track-off: #D1D5DB,
+    switch-track-on: #3B82F6,
+    switch-thumb: #ffffff,
+
+    // ── Rating stars ────────────────────────────────────────────────────────────
+    star-empty: #D1D5DB,
+    star-filled: #F59E0B,
+    star-size: 28px,
+
+    // ── Generated (read-only) field ─────────────────────────────────────────────
+    generated-bg: #F3F4F6,
+    generated-border: 1px solid #E5E7EB,
+    generated-color: #6B7280,
+    generated-radius: 8px,
+    generated-padding: 0.625rem 0.875rem,
+
+    // ── File upload drop-zone ───────────────────────────────────────────────────
+    dropzone-bg: #F8FAFC,
+    dropzone-border: 1.5px dashed #CBD5E1,
+    dropzone-radius: 12px,
+    dropzone-hover-bg: #EFF6FF,
+    dropzone-hover-border:#93C5FD,
+    dropzone-over-border: #3B82F6,
+    dropzone-over-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12),
+    dropzone-icon-color: #94A3B8,
+    dropzone-icon-bg: rgba(59, 130, 246, 0.10),
+    dropzone-link-color: #3B82F6,
+    dropzone-hint-color: #64748B,
+
+    uploaded-item-bg: #ffffff,
+    uploaded-item-border: 1px solid #E2E8F0,
+    uploaded-item-radius: 8px,
+    uploaded-remove-color: #94A3B8,
+    uploaded-remove-hover-bg: #FEF2F2,
+    uploaded-remove-hover-color: #DC2626,
+
+    // ── Repeater add/remove buttons ─────────────────────────────────────────────
+    btn-add-bg: transparent,
+    btn-add-color: #3B82F6,
+    btn-add-border: 1px dashed #CBD5E1,
+    btn-add-radius: 6px,
+    btn-add-hover-bg: #EFF6FF,
+    btn-add-hover-border: #BFDBFE,
+
+    btn-remove-bg: #FFF5F5,
+    btn-remove-color: #E53E3E,
+    btn-remove-border: 1px solid #FED7D7,
+    btn-remove-radius: 4px,
+    btn-remove-hover-bg: #FED7D7,
+
+    // ── Stepper navigation ──────────────────────────────────────────────────────
+    step-connector-color: #E5E7EB,
+    step-connector-done: #22C55E,
+
+    step-number-bg: #E5E7EB,
+    step-number-color: #6B7280,
+    step-number-size: 40px,
+    step-number-font-size: 0.875rem,
+    step-number-weight: 600,
+
+    step-label-size: 0.875rem,
+    step-label-color: #6B7280,
+    step-label-weight: 500,
+
+    step-active-bg: #3B82F6,
+    step-active-color: #ffffff,
+    step-active-label: #1D4ED8,
+    step-active-label-weight: 700,
+
+    step-done-bg: #22C55E,
+    step-done-color: #ffffff,
+
+    // ── Form action bar (submit / previous) ─────────────────────────────────────
+    actions-border: 1px solid #E5E7EB,
+    actions-padding: 20px 10px 0,
+    actions-gap: 12px,
+
+    btn-primary-bg: #3B82F6,
+    btn-primary-color: #ffffff,
+    btn-primary-radius: 8px,
+    btn-primary-padding: 0.625rem 1.5rem,
+    btn-primary-hover-bg: #2563EB,
+
+    btn-secondary-bg: #F3F4F6,
+    btn-secondary-color: #374151,
+    btn-secondary-radius: 8px,
+    btn-secondary-padding: 0.625rem 1.5rem,
+    btn-secondary-hover-bg: #E5E7EB,
+
+    btn-font-size: 0.875rem,
+    btn-font-weight: 600,
+    btn-transition: all 0.2s ease,
+    btn-disabled-opacity: 0.55,
+
+    // ── Repeater button sizing ──────────────────────────────────────────────────
+    btn-remove-padding: 0.375rem 0.75rem,
+    btn-remove-font-size: 0.875rem,
+    btn-remove-font-weight: 500,
+
+    btn-add-padding: 0.625rem 1.5rem,
+    btn-add-font-size: 0.875rem,
+    btn-add-font-weight: 600,
+
+    // ── Instance card polish ────────────────────────────────────────────────────
+    stepper-connector-display: block,
+    instance-shadow: none,
+    instance-hover-shadow: none,
+    instance-transition: none,
+    instance-header-divider: none,
+    instance-header-pb: 0px,
+    instance-header-mb: 0px,
+    instance-num-weight: 600,
+
+    // ── Section stepper accent (top stripe + active badge) ──────────────────────
+    section-stepper-accent: #6366F1,
+    section-stepper-accent-end: #8B5CF6,
+    section-stepper-active-label: #4F46E5,
+    section-stepper-active-glow: rgba(99, 102, 241, 0.25),
+);
+
+// ── Theme 2 — Vibrant & Modern (dark) ────────────────────────────────────────
+$theme-2-smart-form-config: (
+    // Typography
+    font-family: ('Poppins', 'Segoe UI', sans-serif),
+    font-size-base: 0.875rem,
+
+    // ── Accent colour ───────────────────────────────────────────────────────────
+    accent-color: #818CF8,
+    selected-color: #818CF8,
+
+    // ── Form container ──────────────────────────────────────────────────────────
+    form-bg: #0F172A,
+    form-padding: 28px,
+    form-border-radius: 16px,
+    form-border: 1px solid rgba(255, 255, 255, 0.06),
+    form-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
+    form-max-width: 1200px,
+    form-section-gap: 24px,
+
+    // ── Form header ─────────────────────────────────────────────────────────────
+    form-title-size: 1.75rem,
+    form-title-weight: 700,
+    form-title-color: #F1F5F9,
+    form-desc-size: 0.9rem,
+    form-desc-color: #94A3B8,
+
+    // ── Section / GROUP — flat layout ───────────────────────────────────────────
+    section-bg: #1E293B,
+    section-border: 1px solid rgba(255, 255, 255, 0.08),
+    section-radius: 12px,
+    section-padding: 22px,
+    section-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),
+    section-gap: 20px,
+
+    section-label-size: 1rem,
+    section-label-weight: 600,
+    section-label-color: #E2E8F0,
+    section-label-border: 2px solid #334155,
+
+    // ── Section heading left-accent bar ─────────────────────────────────────────
+    section-header-accent-width: 4px,
+    section-header-accent-color: #818CF8,
+    section-header-bg: #162032,
+
+    // ── Repeater accordion ──────────────────────────────────────────────────────
+    repeater-accordion-header-bg: #162032,
+    repeater-accordion-header-color: #E2E8F0,
+    repeater-accordion-active-bg: rgba(129, 140, 248, 0.10),
+    repeater-badge-bg: #334155,
+    repeater-badge-color: #CBD5E1,
+    section-border-radius-inner: 8px,
+
+    // ── GROUP repeater instance card ────────────────────────────────────────────
+    instance-bg: #162032,
+    instance-border: 1px solid rgba(255, 255, 255, 0.07),
+    instance-radius: 8px,
+    instance-padding: 16px,
+    instance-divider: 1px dashed #334155,
+    instance-num-color: #94A3B8,
+    instance-num-size: 0.8125rem,
+
+    // ── Grid gap + field gap ─────────────────────────────────────────────────────
+    grid-gap: 16px,
+    field-gap: 6px,
+
+    // ── Focus ring ──────────────────────────────────────────────────────────────
+    focus-ring-width: 3px,
+    focus-ring-offset: 0,
+
+    // ── Field label ─────────────────────────────────────────────────────────────
+    label-size: 0.875rem,
+    label-weight: 500,
+    label-color: #CBD5E1,
+    label-required-color: #F87171,
+
+    // ── Input ───────────────────────────────────────────────────────────────────
+    input-bg: #ffffff,
+    input-color: #0D0D0D,
+    input-placeholder: #9CA3AF,
+    input-border: 1.5px solid #334155,
+    input-radius: 8px,
+    input-padding: 0.625rem 0.875rem,
+    input-font-size: 0.875rem,
+    input-shadow: none,
+
+    input-hover-border: #9CA3AF,
+    input-focus-border: #39FF14,
+    input-focus-shadow: 0 0 0 3px rgba(57, 255, 20, 0.25),
+    input-transition: all 0.2s ease,
+
+    input-disabled-bg: #1E293B,
+    input-disabled-color: #475569,
+    input-disabled-border:#1E293B,
+
+    // ── Error state ─────────────────────────────────────────────────────────────
+    error-border: #F87171,
+    error-bg: rgba(248, 113, 113, 0.08),
+    error-focus-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2),
+    error-text-color: #F87171,
+    error-text-size: 0.75rem,
+
+    // ── Hint ────────────────────────────────────────────────────────────────────
+    hint-color: #64748B,
+    hint-size: 0.75rem,
+
+    // ── Chip ────────────────────────────────────────────────────────────────────
+    chip-border: 1px solid #334155,
+    chip-radius: 20px,
+    chip-padding: 6px 14px,
+    chip-bg: #1E293B,
+    chip-color: #CBD5E1,
+    chip-hover-bg: #263548,
+    chip-selected-bg: #818CF8,
+    chip-selected-color: #ffffff,
+    chip-selected-border: #818CF8,
+
+    // ── Switch ──────────────────────────────────────────────────────────────────
+    switch-track-off: #334155,
+    switch-track-on: #818CF8,
+    switch-thumb: #ffffff,
+
+    // ── Rating stars ────────────────────────────────────────────────────────────
+    star-empty: #334155,
+    star-filled: #F59E0B,
+    star-size: 28px,
+
+    // ── Generated field ─────────────────────────────────────────────────────────
+    generated-bg: #162032,
+    generated-border: 1px solid #334155,
+    generated-color: #64748B,
+    generated-radius: 8px,
+    generated-padding: 0.625rem 0.875rem,
+
+    // ── File upload ─────────────────────────────────────────────────────────────
+    dropzone-bg: #162032,
+    dropzone-border: 1.5px dashed #334155,
+    dropzone-radius: 12px,
+    dropzone-hover-bg: #1a253a,
+    dropzone-hover-border:#818CF8,
+    dropzone-over-border: #818CF8,
+    dropzone-over-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2),
+    dropzone-icon-color: #475569,
+    dropzone-icon-bg: rgba(129, 140, 248, 0.12),
+    dropzone-link-color: #818CF8,
+    dropzone-hint-color: #64748B,
+
+    uploaded-item-bg: #1E293B,
+    uploaded-item-border: 1px solid #334155,
+    uploaded-item-radius: 8px,
+    uploaded-remove-color: #475569,
+    uploaded-remove-hover-bg: rgba(248, 113, 113, 0.12),
+    uploaded-remove-hover-color: #F87171,
+
+    // ── Repeater buttons ────────────────────────────────────────────────────────
+    btn-add-bg: transparent,
+    btn-add-color: #818CF8,
+    btn-add-border: 1px dashed #334155,
+    btn-add-radius: 6px,
+    btn-add-hover-bg: rgba(129, 140, 248, 0.08),
+    btn-add-hover-border: #818CF8,
+
+    btn-remove-bg: rgba(248, 113, 113, 0.08),
+    btn-remove-color: #F87171,
+    btn-remove-border: 1px solid rgba(248, 113, 113, 0.3),
+    btn-remove-radius: 4px,
+    btn-remove-hover-bg: rgba(248, 113, 113, 0.18),
+
+    // ── Stepper ─────────────────────────────────────────────────────────────────
+    step-connector-color: #334155,
+    step-connector-done: #34D399,
+
+    step-number-bg: #1E293B,
+    step-number-color: #64748B,
+    step-number-size: 40px,
+    step-number-font-size: 0.875rem,
+    step-number-weight: 600,
+
+    step-label-size: 0.875rem,
+    step-label-color: #64748B,
+    step-label-weight: 500,
+
+    step-active-bg: #818CF8,
+    step-active-color: #ffffff,
+    step-active-label: #A5B4FC,
+    step-active-label-weight: 700,
+
+    step-done-bg: #34D399,
+    step-done-color: #0F172A,
+
+    // ── Actions bar ─────────────────────────────────────────────────────────────
+    actions-border: 1px solid #1E293B,
+    actions-padding: 20px 10px 0,
+    actions-gap: 12px,
+
+    btn-primary-bg: #818CF8,
+    btn-primary-color: #ffffff,
+    btn-primary-radius: 8px,
+    btn-primary-padding: 0.625rem 1.5rem,
+    btn-primary-hover-bg: #6366F1,
+
+    btn-secondary-bg: #1E293B,
+    btn-secondary-color: #CBD5E1,
+    btn-secondary-radius: 8px,
+    btn-secondary-padding: 0.625rem 1.5rem,
+    btn-secondary-hover-bg: #263548,
+
+    btn-font-size: 0.875rem,
+    btn-font-weight: 600,
+    btn-transition: all 0.2s ease,
+    btn-disabled-opacity: 0.45,
+
+    // ── Repeater button sizing ──────────────────────────────────────────────────
+    btn-remove-padding: 0.375rem 0.75rem,
+    btn-remove-font-size: 0.875rem,
+    btn-remove-font-weight: 600,
+
+    btn-add-padding: 0.625rem 1.5rem,
+    btn-add-font-size: 0.875rem,
+    btn-add-font-weight: 600,
+
+    // ── Instance card polish ────────────────────────────────────────────────────
+    stepper-connector-display: block,
+    instance-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
+    instance-hover-shadow: 0 4px 16px rgba(0, 0, 0, 0.4),
+    instance-transition: box-shadow 0.15s ease,
+    instance-header-divider: 1px solid #1a253a,
+    instance-header-pb: 12px,
+    instance-header-mb: 16px,
+    instance-num-weight: 600,
+
+    // ── Section stepper accent ──────────────────────────────────────────────────
+    section-stepper-accent: #818CF8,
+    section-stepper-accent-end: #A5B4FC,
+    section-stepper-active-label: #A5B4FC,
+    section-stepper-active-glow: rgba(129, 140, 248, 0.25),
+);
+
+// ── Theme 3 — Campus Students (campus red accent) ─────────────────────────────
+$type1-config: map.merge($default-smart-form-config, (
+    accent-color: #E63E30,
+    selected-color: #E63E30,
+
+    input-focus-border: #E63E30,
+    input-focus-shadow: 0 0 0 3px rgba(230, 62, 48, 0.08),
+    chip-selected-bg: #E63E30,
+    chip-selected-border: #E63E30,
+    switch-track-on: #E63E30,
+
+    section-bg: transparent,
+    section-border: none,
+    section-shadow: none,
+    section-header-accent-color: #E63E30,
+
+    step-active-bg: #E63E30,
+    step-active-label: #C13320,
+    stepper-connector-display: none,
+
+    btn-add-color: #E63E30,
+    btn-add-border: 1.5px dashed rgba(230, 62, 48, 0.3),
+    btn-add-hover-bg: rgba(230, 62, 48, 0.04),
+    btn-add-hover-border: rgba(230, 62, 48, 0.6),
+
+    btn-remove-bg: transparent,
+    btn-remove-color: #EF4444,
+    btn-remove-border: 1px solid #FECACA,
+    btn-remove-hover-bg: #FEF2F2,
+    btn-remove-radius: 6px,
+    btn-remove-padding: 5px 12px,
+    btn-remove-font-size: 0.75rem,
+    btn-remove-font-weight: 600,
+
+    btn-add-padding: 10px 20px,
+    btn-add-font-size: 0.875rem,
+    btn-add-font-weight: 600,
+
+    btn-primary-bg: #E63E30,
+    btn-primary-hover-bg: #C13320,
+    btn-primary-color: #ffffff,
+
+    instance-bg: #ffffff,
+    instance-border: 1px solid #E5E7EB,
+    instance-radius: 12px,
+    instance-shadow: 0 1px 4px rgba(0, 0, 0, 0.04),
+    instance-hover-shadow: 0 2px 8px rgba(0, 0, 0, 0.07),
+    instance-transition: box-shadow 0.15s ease,
+    instance-header-divider: 1px solid #F5F5F5,
+    instance-header-pb: 12px,
+    instance-header-mb: 16px,
+    instance-num-color: #9CA3AF,
+    instance-num-weight: 600,
+
+    section-stepper-accent: #E63E30,
+    section-stepper-accent-end: #C13320,
+    section-stepper-active-label: #C13320,
+    section-stepper-active-glow: rgba(230, 62, 48, 0.2),
+));
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Mixin — apply theme by emitting CSS custom properties
+// Usage:
+//   .my-wrapper { @include smart-form-theme(); }            ← default (theme 1)
+//   .dark-wrapper { @include smart-form-theme($theme-2-smart-form-config); }
+//   .custom { @include smart-form-theme((btn-primary-bg: #e91e63)); }
+// ─────────────────────────────────────────────────────────────────────────────
+@mixin smart-form-theme($user-config: ()) {
+    $config: map.merge($default-smart-form-config, $user-config);
+
+    // Typography
+    --cc-sf-font-family: #{map.get($config, font-family)};
+    --cc-sf-font-size-base: #{map.get($config, font-size-base)};
+
+    // Accent colour
+    --cc-sf-accent-color: #{map.get($config, accent-color)};
+    --cc-sf-selected-color: #{map.get($config, selected-color)};
+
+    // Form container
+    --cc-sf-form-bg: #{map.get($config, form-bg)};
+    --cc-sf-form-padding: #{map.get($config, form-padding)};
+    --cc-sf-form-border-radius: #{map.get($config, form-border-radius)};
+    --cc-sf-form-border: #{map.get($config, form-border)};
+    --cc-sf-form-shadow: #{map.get($config, form-shadow)};
+    --cc-sf-form-max-width: #{map.get($config, form-max-width)};
+    --cc-sf-form-section-gap: #{map.get($config, form-section-gap)};
+
+    // Header
+    --cc-sf-form-title-size: #{map.get($config, form-title-size)};
+    --cc-sf-form-title-weight: #{map.get($config, form-title-weight)};
+    --cc-sf-form-title-color: #{map.get($config, form-title-color)};
+    --cc-sf-form-desc-size: #{map.get($config, form-desc-size)};
+    --cc-sf-form-desc-color: #{map.get($config, form-desc-color)};
+
+    // Section — flat layout tokens
+    --cc-sf-section-bg: #{map.get($config, section-bg)};
+    --cc-sf-section-border: #{map.get($config, section-border)};
+    --cc-sf-section-radius: #{map.get($config, section-radius)};
+    --cc-sf-section-padding: #{map.get($config, section-padding)};
+    --cc-sf-section-shadow: #{map.get($config, section-shadow)};
+    --cc-sf-section-gap: #{map.get($config, section-gap)};
+    --cc-sf-section-label-size: #{map.get($config, section-label-size)};
+    --cc-sf-section-label-weight: #{map.get($config, section-label-weight)};
+    --cc-sf-section-label-color: #{map.get($config, section-label-color)};
+    --cc-sf-section-label-border: #{map.get($config, section-label-border)};
+
+    // Section heading accent bar
+    --cc-sf-section-header-accent-width: #{map.get($config, section-header-accent-width)};
+    --cc-sf-section-header-accent-color: #{map.get($config, section-header-accent-color)};
+    --cc-sf-section-header-bg: #{map.get($config, section-header-bg)};
+
+    // Repeater accordion
+    --cc-sf-repeater-accordion-header-bg: #{map.get($config, repeater-accordion-header-bg)};
+    --cc-sf-repeater-accordion-header-color: #{map.get($config, repeater-accordion-header-color)};
+    --cc-sf-repeater-accordion-active-bg: #{map.get($config, repeater-accordion-active-bg)};
+    --cc-sf-repeater-badge-bg: #{map.get($config, repeater-badge-bg)};
+    --cc-sf-repeater-badge-color: #{map.get($config, repeater-badge-color)};
+    --cc-sf-section-border-radius-inner: #{map.get($config, section-border-radius-inner)};
+
+    // Repeater instance
+    --cc-sf-instance-bg: #{map.get($config, instance-bg)};
+    --cc-sf-instance-border: #{map.get($config, instance-border)};
+    --cc-sf-instance-radius: #{map.get($config, instance-radius)};
+    --cc-sf-instance-padding: #{map.get($config, instance-padding)};
+    --cc-sf-instance-divider: #{map.get($config, instance-divider)};
+    --cc-sf-instance-num-color:#{map.get($config, instance-num-color)};
+    --cc-sf-instance-num-size: #{map.get($config, instance-num-size)};
+
+    // Grid + field gap
+    --cc-sf-grid-gap: #{map.get($config, grid-gap)};
+    --cc-sf-field-gap: #{map.get($config, field-gap)};
+
+    // Focus ring
+    --cc-sf-focus-ring-width: #{map.get($config, focus-ring-width)};
+    --cc-sf-focus-ring-offset: #{map.get($config, focus-ring-offset)};
+
+    // Label
+    --cc-sf-label-size: #{map.get($config, label-size)};
+    --cc-sf-label-weight: #{map.get($config, label-weight)};
+    --cc-sf-label-color: #{map.get($config, label-color)};
+    --cc-sf-label-required-color: #{map.get($config, label-required-color)};
+
+    // Input
+    --cc-sf-input-bg: #{map.get($config, input-bg)};
+    --cc-sf-input-color: #{map.get($config, input-color)};
+    --cc-sf-input-placeholder: #{map.get($config, input-placeholder)};
+    --cc-sf-input-border: #{map.get($config, input-border)};
+    --cc-sf-input-radius: #{map.get($config, input-radius)};
+    --cc-sf-input-padding: #{map.get($config, input-padding)};
+    --cc-sf-input-font-size: #{map.get($config, input-font-size)};
+    --cc-sf-input-shadow: #{map.get($config, input-shadow)};
+    --cc-sf-input-hover-border:#{map.get($config, input-hover-border)};
+    --cc-sf-input-focus-border:#{map.get($config, input-focus-border)};
+    --cc-sf-input-focus-shadow:#{map.get($config, input-focus-shadow)};
+    --cc-sf-input-transition: #{map.get($config, input-transition)};
+    --cc-sf-input-disabled-bg: #{map.get($config, input-disabled-bg)};
+    --cc-sf-input-disabled-color: #{map.get($config, input-disabled-color)};
+    --cc-sf-input-disabled-border:#{map.get($config, input-disabled-border)};
+
+    // Error
+    --cc-sf-error-border: #{map.get($config, error-border)};
+    --cc-sf-error-bg: #{map.get($config, error-bg)};
+    --cc-sf-error-focus-shadow: #{map.get($config, error-focus-shadow)};
+    --cc-sf-error-text-color: #{map.get($config, error-text-color)};
+    --cc-sf-error-text-size: #{map.get($config, error-text-size)};
+
+    // Hint
+    --cc-sf-hint-color: #{map.get($config, hint-color)};
+    --cc-sf-hint-size: #{map.get($config, hint-size)};
+
+    // Chip
+    --cc-sf-chip-border: #{map.get($config, chip-border)};
+    --cc-sf-chip-radius: #{map.get($config, chip-radius)};
+    --cc-sf-chip-padding: #{map.get($config, chip-padding)};
+    --cc-sf-chip-bg: #{map.get($config, chip-bg)};
+    --cc-sf-chip-color: #{map.get($config, chip-color)};
+    --cc-sf-chip-hover-bg: #{map.get($config, chip-hover-bg)};
+    --cc-sf-chip-selected-bg: #{map.get($config, chip-selected-bg)};
+    --cc-sf-chip-selected-color: #{map.get($config, chip-selected-color)};
+    --cc-sf-chip-selected-border:#{map.get($config, chip-selected-border)};
+
+    // Switch
+    --cc-sf-switch-track-off: #{map.get($config, switch-track-off)};
+    --cc-sf-switch-track-on: #{map.get($config, switch-track-on)};
+    --cc-sf-switch-thumb: #{map.get($config, switch-thumb)};
+
+    // Rating
+    --cc-sf-star-empty: #{map.get($config, star-empty)};
+    --cc-sf-star-filled: #{map.get($config, star-filled)};
+    --cc-sf-star-size: #{map.get($config, star-size)};
+
+    // Generated
+    --cc-sf-generated-bg: #{map.get($config, generated-bg)};
+    --cc-sf-generated-border: #{map.get($config, generated-border)};
+    --cc-sf-generated-color: #{map.get($config, generated-color)};
+    --cc-sf-generated-radius: #{map.get($config, generated-radius)};
+    --cc-sf-generated-padding: #{map.get($config, generated-padding)};
+
+    // File upload
+    --cc-sf-dropzone-bg: #{map.get($config, dropzone-bg)};
+    --cc-sf-dropzone-border: #{map.get($config, dropzone-border)};
+    --cc-sf-dropzone-radius: #{map.get($config, dropzone-radius)};
+    --cc-sf-dropzone-hover-bg: #{map.get($config, dropzone-hover-bg)};
+    --cc-sf-dropzone-hover-border: #{map.get($config, dropzone-hover-border)};
+    --cc-sf-dropzone-over-border: #{map.get($config, dropzone-over-border)};
+    --cc-sf-dropzone-over-shadow: #{map.get($config, dropzone-over-shadow)};
+    --cc-sf-dropzone-icon-color: #{map.get($config, dropzone-icon-color)};
+    --cc-sf-dropzone-icon-bg: #{map.get($config, dropzone-icon-bg)};
+    --cc-sf-dropzone-link-color: #{map.get($config, dropzone-link-color)};
+    --cc-sf-dropzone-hint-color: #{map.get($config, dropzone-hint-color)};
+
+    --cc-sf-uploaded-item-bg: #{map.get($config, uploaded-item-bg)};
+    --cc-sf-uploaded-item-border: #{map.get($config, uploaded-item-border)};
+    --cc-sf-uploaded-item-radius: #{map.get($config, uploaded-item-radius)};
+    --cc-sf-uploaded-remove-color: #{map.get($config, uploaded-remove-color)};
+    --cc-sf-uploaded-remove-hover-bg: #{map.get($config, uploaded-remove-hover-bg)};
+    --cc-sf-uploaded-remove-hover-color: #{map.get($config, uploaded-remove-hover-color)};
+
+    // Repeater buttons
+    --cc-sf-btn-add-bg: #{map.get($config, btn-add-bg)};
+    --cc-sf-btn-add-color: #{map.get($config, btn-add-color)};
+    --cc-sf-btn-add-border: #{map.get($config, btn-add-border)};
+    --cc-sf-btn-add-radius: #{map.get($config, btn-add-radius)};
+    --cc-sf-btn-add-hover-bg: #{map.get($config, btn-add-hover-bg)};
+    --cc-sf-btn-add-hover-border: #{map.get($config, btn-add-hover-border)};
+
+    --cc-sf-btn-remove-bg: #{map.get($config, btn-remove-bg)};
+    --cc-sf-btn-remove-color: #{map.get($config, btn-remove-color)};
+    --cc-sf-btn-remove-border: #{map.get($config, btn-remove-border)};
+    --cc-sf-btn-remove-radius: #{map.get($config, btn-remove-radius)};
+    --cc-sf-btn-remove-hover-bg: #{map.get($config, btn-remove-hover-bg)};
+    --cc-sf-btn-remove-padding: #{map.get($config, btn-remove-padding)};
+    --cc-sf-btn-remove-font-size: #{map.get($config, btn-remove-font-size)};
+    --cc-sf-btn-remove-font-weight: #{map.get($config, btn-remove-font-weight)};
+    --cc-sf-btn-add-padding: #{map.get($config, btn-add-padding)};
+    --cc-sf-btn-add-font-size: #{map.get($config, btn-add-font-size)};
+    --cc-sf-btn-add-font-weight: #{map.get($config, btn-add-font-weight)};
+    --cc-sf-stepper-connector-display: #{map.get($config, stepper-connector-display)};
+    --cc-sf-instance-shadow: #{map.get($config, instance-shadow)};
+    --cc-sf-instance-hover-shadow: #{map.get($config, instance-hover-shadow)};
+    --cc-sf-instance-transition: #{map.get($config, instance-transition)};
+    --cc-sf-instance-header-divider: #{map.get($config, instance-header-divider)};
+    --cc-sf-instance-header-pb: #{map.get($config, instance-header-pb)};
+    --cc-sf-instance-header-mb: #{map.get($config, instance-header-mb)};
+    --cc-sf-instance-num-weight: #{map.get($config, instance-num-weight)};
+    --cc-sf-section-stepper-accent: #{map.get($config, section-stepper-accent)};
+    --cc-sf-section-stepper-accent-end: #{map.get($config, section-stepper-accent-end)};
+    --cc-sf-section-stepper-active-label: #{map.get($config, section-stepper-active-label)};
+    --cc-sf-section-stepper-active-glow: #{map.get($config, section-stepper-active-glow)};
+
+    // Stepper
+    --cc-sf-step-connector-color: #{map.get($config, step-connector-color)};
+    --cc-sf-step-connector-done: #{map.get($config, step-connector-done)};
+    --cc-sf-step-number-bg: #{map.get($config, step-number-bg)};
+    --cc-sf-step-number-color: #{map.get($config, step-number-color)};
+    --cc-sf-step-number-size: #{map.get($config, step-number-size)};
+    --cc-sf-step-number-font-size: #{map.get($config, step-number-font-size)};
+    --cc-sf-step-number-weight: #{map.get($config, step-number-weight)};
+    --cc-sf-step-label-size: #{map.get($config, step-label-size)};
+    --cc-sf-step-label-color: #{map.get($config, step-label-color)};
+    --cc-sf-step-label-weight: #{map.get($config, step-label-weight)};
+    --cc-sf-step-active-bg: #{map.get($config, step-active-bg)};
+    --cc-sf-step-active-color: #{map.get($config, step-active-color)};
+    --cc-sf-step-active-label: #{map.get($config, step-active-label)};
+    --cc-sf-step-active-label-weight: #{map.get($config, step-active-label-weight)};
+    --cc-sf-step-done-bg: #{map.get($config, step-done-bg)};
+    --cc-sf-step-done-color: #{map.get($config, step-done-color)};
+
+    // Action bar / submit buttons
+    --cc-sf-actions-border: #{map.get($config, actions-border)};
+    --cc-sf-actions-padding: #{map.get($config, actions-padding)};
+    --cc-sf-actions-gap: #{map.get($config, actions-gap)};
+
+    --cc-sf-btn-primary-bg: #{map.get($config, btn-primary-bg)};
+    --cc-sf-btn-primary-color: #{map.get($config, btn-primary-color)};
+    --cc-sf-btn-primary-radius: #{map.get($config, btn-primary-radius)};
+    --cc-sf-btn-primary-padding: #{map.get($config, btn-primary-padding)};
+    --cc-sf-btn-primary-hover-bg: #{map.get($config, btn-primary-hover-bg)};
+
+    --cc-sf-btn-secondary-bg: #{map.get($config, btn-secondary-bg)};
+    --cc-sf-btn-secondary-color: #{map.get($config, btn-secondary-color)};
+    --cc-sf-btn-secondary-radius: #{map.get($config, btn-secondary-radius)};
+    --cc-sf-btn-secondary-padding: #{map.get($config, btn-secondary-padding)};
+    --cc-sf-btn-secondary-hover-bg: #{map.get($config, btn-secondary-hover-bg)};
+
+    --cc-sf-btn-font-size: #{map.get($config, btn-font-size)};
+    --cc-sf-btn-font-weight: #{map.get($config, btn-font-weight)};
+    --cc-sf-btn-transition: #{map.get($config, btn-transition)};
+    --cc-sf-btn-disabled-opacity: #{map.get($config, btn-disabled-opacity)};
+
+    // ── Structural rules using the emitted tokens ─────────────────────────────
+    ::ng-deep {
+        .stepper-nav .stepper-step:not(:last-child)::after {
+            display: var(--cc-sf-stepper-connector-display) !important;
+        }
+
+        .section-instance {
+            background: var(--cc-sf-instance-bg) !important;
+            border: var(--cc-sf-instance-border) !important;
+            border-radius: var(--cc-sf-instance-radius) !important;
+            box-shadow: var(--cc-sf-instance-shadow);
+            transition: var(--cc-sf-instance-transition);
+
+            &:hover {
+                box-shadow: var(--cc-sf-instance-hover-shadow);
+            }
+        }
+
+        .section-instance-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-bottom: var(--cc-sf-instance-header-pb);
+            margin-bottom: var(--cc-sf-instance-header-mb);
+            border-bottom: var(--cc-sf-instance-header-divider);
+        }
+
+        .section-instance-num {
+            font-size: var(--cc-sf-instance-num-size);
+            font-weight: var(--cc-sf-instance-num-weight);
+            color: var(--cc-sf-instance-num-color);
+        }
+
+        .btn-instance-remove {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: var(--cc-sf-btn-remove-padding);
+            border-radius: var(--cc-sf-btn-remove-radius);
+            border: var(--cc-sf-btn-remove-border) !important;
+            background: var(--cc-sf-btn-remove-bg);
+            color: var(--cc-sf-btn-remove-color) !important;
+            font-size: var(--cc-sf-btn-remove-font-size);
+            font-weight: var(--cc-sf-btn-remove-font-weight);
+            cursor: pointer;
+            transition: all 0.15s ease;
+
+            &:hover {
+                background: var(--cc-sf-btn-remove-hover-bg);
+            }
+        }
+
+        .btn-add-section {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: var(--cc-sf-btn-add-padding);
+            border-radius: var(--cc-sf-btn-add-radius);
+            border: var(--cc-sf-btn-add-border) !important;
+            background: var(--cc-sf-btn-add-bg);
+            color: var(--cc-sf-btn-add-color);
+            font-size: var(--cc-sf-btn-add-font-size);
+            font-weight: var(--cc-sf-btn-add-font-weight);
+            cursor: pointer;
+            transition: all 0.18s ease;
+
+            &:hover {
+                background: var(--cc-sf-btn-add-hover-bg);
+                border-color: var(--cc-sf-btn-add-hover-border) !important;
+            }
+        }
+
+        // ── Section stepper — accent colour override ──────────────────────────
+        .section-stepper-nav::before {
+            background: linear-gradient(
+                90deg,
+                var(--cc-sf-section-stepper-accent) 0%,
+                var(--cc-sf-section-stepper-accent-end) 100%
+            ) !important;
+        }
+
+        .section-stepper-step {
+            &.ss-active {
+                .ss-badge {
+                    background: linear-gradient(
+                        135deg,
+                        var(--cc-sf-section-stepper-accent) 0%,
+                        var(--cc-sf-section-stepper-accent-end) 100%
+                    ) !important;
+                    box-shadow:
+                        0 0 0 4px var(--cc-sf-section-stepper-active-glow),
+                        0 4px 12px var(--cc-sf-section-stepper-active-glow) !important;
+                }
+
+                .ss-label {
+                    color: var(--cc-sf-section-stepper-active-label) !important;
+                }
+            }
+
+            &:not(.ss-active):not(.ss-completed):not(.ss-warning):hover {
+                .ss-badge {
+                    color: var(--cc-sf-section-stepper-accent) !important;
+                    border-color: var(--cc-sf-section-stepper-accent-end) !important;
+                }
+            }
+
+            .ss-connector::after {
+                background: linear-gradient(
+                    90deg,
+                    var(--cc-sf-section-stepper-accent),
+                    var(--cc-sf-section-stepper-accent-end)
+                ) !important;
+            }
+        }
+    }
+}