commons-shared-web-ui 0.0.26 → 0.0.28

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

@@ -14,6 +14,9 @@ $default-smart-form-config: (
     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,
+
     // ── Form container ──────────────────────────────────────────────────────────
     form-bg: #ffffff,
     form-padding: 24px,
@@ -21,6 +24,7 @@ $default-smart-form-config: (
     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,
@@ -29,7 +33,7 @@ $default-smart-form-config: (
     form-desc-size: 0.875rem,
     form-desc-color: #6B7280,
 
-    // ── Section / GROUP card ────────────────────────────────────────────────────
+    // ── Section / GROUP — flat layout (no card shell) ───────────────────────────
     section-bg: #ffffff,
     section-border: 1px solid #E5E7EB,
     section-radius: 10px,
@@ -42,6 +46,19 @@ $default-smart-form-config: (
     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,
@@ -51,8 +68,13 @@ $default-smart-form-config: (
     instance-num-color: #4B5563,
     instance-num-size: 0.8125rem,
 
-    // ── Grid gap ────────────────────────────────────────────────────────────────
+    // ── 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,
@@ -119,7 +141,7 @@ $default-smart-form-config: (
     generated-padding: 0.625rem 0.875rem,
 
     // ── File upload drop-zone ───────────────────────────────────────────────────
-    dropzone-bg: #FFFAF1,
+    dropzone-bg: #F8FAFC,
     dropzone-border: 1.5px dashed #CBD5E1,
     dropzone-radius: 12px,
     dropzone-hover-bg: #EFF6FF,
@@ -127,6 +149,7 @@ $default-smart-form-config: (
     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,
 
@@ -194,6 +217,31 @@ $default-smart-form-config: (
     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) ────────────────────────────────────────
@@ -202,6 +250,9 @@ $theme-2-smart-form-config: (
     font-family: ('Poppins', 'Segoe UI', sans-serif),
     font-size-base: 0.875rem,
 
+    // ── Accent colour ───────────────────────────────────────────────────────────
+    accent-color: #818CF8,
+
     // ── Form container ──────────────────────────────────────────────────────────
     form-bg: #0F172A,
     form-padding: 28px,
@@ -209,6 +260,7 @@ $theme-2-smart-form-config: (
     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,
@@ -217,7 +269,7 @@ $theme-2-smart-form-config: (
     form-desc-size: 0.9rem,
     form-desc-color: #94A3B8,
 
-    // ── Section / GROUP card ────────────────────────────────────────────────────
+    // ── Section / GROUP — flat layout ───────────────────────────────────────────
     section-bg: #1E293B,
     section-border: 1px solid rgba(255, 255, 255, 0.08),
     section-radius: 12px,
@@ -230,6 +282,19 @@ $theme-2-smart-form-config: (
     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),
@@ -239,8 +304,13 @@ $theme-2-smart-form-config: (
     instance-num-color: #94A3B8,
     instance-num-size: 0.8125rem,
 
-    // ── Grid gap ────────────────────────────────────────────────────────────────
+    // ── 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,
@@ -315,6 +385,7 @@ $theme-2-smart-form-config: (
     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,
 
@@ -382,8 +453,90 @@ $theme-2-smart-form-config: (
     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, (
+    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:
@@ -398,6 +551,9 @@ $theme-2-smart-form-config: (
     --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)};
+
     // Form container
     --cc-sf-form-bg: #{map.get($config, form-bg)};
     --cc-sf-form-padding: #{map.get($config, form-padding)};
@@ -405,6 +561,7 @@ $theme-2-smart-form-config: (
     --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)};
@@ -413,7 +570,7 @@ $theme-2-smart-form-config: (
     --cc-sf-form-desc-size: #{map.get($config, form-desc-size)};
     --cc-sf-form-desc-color: #{map.get($config, form-desc-color)};
 
-    // Section card
+    // 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)};
@@ -425,6 +582,19 @@ $theme-2-smart-form-config: (
     --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)};
@@ -434,8 +604,13 @@ $theme-2-smart-form-config: (
     --cc-sf-instance-num-color:#{map.get($config, instance-num-color)};
     --cc-sf-instance-num-size: #{map.get($config, instance-num-size)};
 
-    // Grid
+    // 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)};
@@ -508,6 +683,7 @@ $theme-2-smart-form-config: (
     --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)};
 
@@ -531,6 +707,24 @@ $theme-2-smart-form-config: (
     --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)};
@@ -571,4 +765,120 @@ $theme-2-smart-form-config: (
     --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;
+            }
+        }
+    }
 }