commons-shared-web-ui 0.0.1

package/src/lib/modules/summary-card/summary-card.theme.scss

@@ -0,0 +1,184 @@
+@use 'sass:map';
+
+// Default configuration for the summary card theme (Theme 1 - Clean & Minimal)
+$default-summary-card-config: (
+    // Base
+    font-family: ('Inter', sans-serif),
+    bg-color: #ffffff,
+    border-radius: 8px,
+    border: 1px solid #e0e0e0,
+    padding: 20px,
+    shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
+    min-height: auto,
+    transition-duration: 0.2s,
+
+    // Hover States
+    hover-transform: translateY(-2px),
+    hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+
+    // Disabled State
+    disabled-opacity: 0.5,
+
+    // Icon Section
+    icon-box-size: 48px,
+    icon-size: 24px,
+    icon-radius: 8px,
+    icon-bg: rgba(0, 0, 0, 0.05),
+    icon-color: #666666,
+    icon-margin: 1rem,
+
+    // Content Section
+    content-gap: 0.5rem,
+
+    // Header
+    header-size: 0.75rem,
+    header-weight: 600,
+    header-color: #6c757d,
+    header-transform: uppercase,
+    header-letter-spacing: 0.05em,
+    header-line-height: 1.2,
+
+    // Value
+    value-size: 1.5rem,
+    value-weight: 700,
+    value-color: #333333,
+    value-line-height: 1.2,
+
+    // Description
+    desc-size: 0.75rem,
+    desc-weight: 400,
+    desc-color: #6c757d,
+    desc-line-height: 1.4,
+    value-desc-gap: 0.25rem,
+
+    // Meta Pill
+    meta-pill-bg: #f1f5f9,
+    meta-pill-color: #475569,
+    meta-pill-padding: 4px 12px,
+    meta-pill-radius: 20px,
+    meta-pill-font-size: 0.75rem,
+    meta-pill-font-weight: 600
+);
+
+// Theme 2 configuration (Aesthetic & Modern)
+$theme-2-summary-card-config: (
+    // Base
+    font-family: ('Poppins', 'Segoe UI', sans-serif),
+    bg-color: #ffffff,
+    border-radius: 16px,
+    border: none,
+    padding: 28px,
+    shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
+    min-height: 120px,
+    transition-duration: 0.3s,
+
+    // Hover States
+    hover-transform: translateY(-4px),
+    hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),
+
+    // Disabled State
+    disabled-opacity: 0.4,
+
+    // Icon Section
+    icon-box-size: 56px,
+    icon-size: 28px,
+    icon-radius: 12px,
+    icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%),
+    icon-color: #6366f1,
+    icon-margin: 1.25rem,
+
+    // Content Section
+    content-gap: 0.75rem,
+
+    // Header
+    header-size: 0.8rem,
+    header-weight: 500,
+    header-color: #94a3b8,
+    header-transform: none,
+    header-letter-spacing: 0.02em,
+    header-line-height: 1.3,
+
+    // Value
+    value-size: 2rem,
+    value-weight: 700,
+    value-color: #1e293b,
+    value-line-height: 1.1,
+
+    // Description
+    desc-size: 0.85rem,
+    desc-weight: 400,
+    desc-color: #64748b,
+    desc-line-height: 1.5,
+    value-desc-gap: 0.5rem,
+
+    // Meta Pill
+    meta-pill-bg: #f1f5f9,
+    meta-pill-color: #475569,
+    meta-pill-padding: 4px 12px,
+    meta-pill-radius: 20px,
+    meta-pill-font-size: 0.75rem,
+    meta-pill-font-weight: 600
+);
+
+// Mixin to generate CSS variables for the summary card component
+@mixin summary-card-theme($user-config: ()) {
+    // Merge user config with defaults
+    $config: map.merge($default-summary-card-config, $user-config);
+
+    // Generate CSS Variables
+    --cc-sc-font-family: #{map.get($config, font-family)};
+    --cc-sc-bg-color: #{map.get($config, bg-color)};
+    --cc-sc-border-radius: #{map.get($config, border-radius)};
+    --cc-sc-border: #{map.get($config, border)};
+    --cc-sc-padding: #{map.get($config, padding)};
+    --cc-sc-shadow: #{map.get($config, shadow)};
+    --cc-sc-min-height: #{map.get($config, min-height)};
+    --cc-sc-transition-duration: #{map.get($config, transition-duration)};
+
+    --cc-sc-hover-transform: #{map.get($config, hover-transform)};
+    --cc-sc-hover-shadow: #{map.get($config, hover-shadow)};
+
+    --cc-sc-disabled-opacity: #{map.get($config, disabled-opacity)};
+
+    --cc-sc-icon-box-size: #{map.get($config, icon-box-size)};
+    --cc-sc-icon-size: #{map.get($config, icon-size)};
+    --cc-sc-icon-radius: #{map.get($config, icon-radius)};
+    --cc-sc-icon-bg: #{map.get($config, icon-bg)};
+    --cc-sc-icon-color: #{map.get($config, icon-color)};
+    --cc-sc-icon-margin: #{map.get($config, icon-margin)};
+
+    --cc-sc-content-gap: #{map.get($config, content-gap)};
+
+    --cc-sc-header-size: #{map.get($config, header-size)};
+    --cc-sc-header-weight: #{map.get($config, header-weight)};
+    --cc-sc-header-color: #{map.get($config, header-color)};
+    --cc-sc-header-transform: #{map.get($config, header-transform)};
+    --cc-sc-header-letter-spacing: #{map.get($config, header-letter-spacing)};
+    --cc-sc-header-line-height: #{map.get($config, header-line-height)};
+
+    --cc-sc-value-size: #{map.get($config, value-size)};
+    --cc-sc-value-weight: #{map.get($config, value-weight)};
+    --cc-sc-value-color: #{map.get($config, value-color)};
+    --cc-sc-value-line-height: #{map.get($config, value-line-height)};
+
+    --cc-sc-desc-size: #{map.get($config, desc-size)};
+    --cc-sc-desc-weight: #{map.get($config, desc-weight)};
+    --cc-sc-desc-color: #{map.get($config, desc-color)};
+    --cc-sc-desc-line-height: #{map.get($config, desc-line-height)};
+    --cc-sc-value-desc-gap: #{map.get($config, value-desc-gap)};
+
+    --cc-sc-meta-pill-bg: #{map.get($config, meta-pill-bg)};
+    --cc-sc-meta-pill-color: #{map.get($config, meta-pill-color)};
+    --cc-sc-meta-pill-padding: #{map.get($config, meta-pill-padding)};
+    --cc-sc-meta-pill-radius: #{map.get($config, meta-pill-radius)};
+    --cc-sc-meta-pill-font-size: #{map.get($config, meta-pill-font-size)};
+    --cc-sc-meta-pill-font-weight: #{map.get($config, meta-pill-font-weight)};
+}
+
+.theme-1 .cc-summary-card {
+    @include summary-card-theme();
+}
+
+.theme-2 .cc-summary-card {
+    @include summary-card-theme($theme-2-summary-card-config);
+}

package/src/lib/styles/global.scss

@@ -0,0 +1,115 @@
+:root {
+  /* Default Variables (Can be overridden) */
+  --cc-card-bg: #ffffff;
+  --cc-card-border-color: #e0e0e0;
+  --cc-card-border-radius: 8px;
+  --cc-card-padding: 16px;
+  --cc-card-shadow: none;
+
+
+
+  /* Text Colors */
+  --text-color: #333333;
+  --text-muted: #666666;
+  --text-muted-2: #888888;
+  --text-light: #6c757d;
+  --text-on-primary: #ffffff;
+
+  /* Borders & Icons */
+  --border-color: #dee2e6;
+  --icon-bg: rgba(0, 0, 0, 0.05);
+
+  /* Components */
+  --primary-color: #c21e25;
+  /* Default Base Primary */
+  --btn-primary-bg: var(--primary-color);
+  --btn-primary-text: #ffffff;
+  --card-bg: #ffffff;
+  --input-bg: #fcfcfc;
+  --sidenav-bg: #ffffff;
+  --sidenav-active-bg: #fff0f0;
+  --sidenav-active-text: #ff0000;
+
+  /* Status & Chips */
+  --status-active-bg: #f6ffed;
+  --status-active-text: #52c41a;
+  --status-inactive-bg: #fffbe6;
+  --status-inactive-text: #faad14;
+
+  --chip-blue-bg: #e6f7ff;
+  --chip-blue-text: #1890ff;
+  --chip-green-bg: #f6ffed;
+  --chip-green-text: #52c41a;
+
+  /* Form Fields */
+  --field-label-color: #202124;
+  --field-label-height: 27px;
+  --field-input-bg: #fefefe;
+  --field-input-border: #bdc1c6;
+  --field-input-height: 40px;
+  --field-input-radius: 7px;
+  --field-hint-color: #5f6368;
+}
+
+/* ----------------------------------------------------
+   Theme 2 - Aesthetic Midnight (Dark/Neon)
+   ---------------------------------------------------- */
+body.theme-2 {
+  --primary-color: #00d4ff;
+  /* Neon Cyan */
+  --secondary-color: #2b52ff;
+  /* Bright Blue */
+
+  /* Layout Backgrounds */
+  --header-bg: rgba(15, 28, 63, 0.95);
+  /* Deep Indigo */
+  --footer-bg-start: #0a1128;
+  --footer-bg-end: #0f1c3f;
+  --sidebar-bg: #0a1128;
+  --content-bg: #0f1c3f;
+
+  /* Text Colors */
+  --text-color: #ffffff;
+  --text-muted: rgba(255, 255, 255, 0.7);
+  --text-muted-2: rgba(255, 255, 255, 0.6);
+  --text-light: #aaaaaa;
+  --text-on-primary: #000000;
+
+  /* Borders & Icons */
+  --border-color: rgba(255, 255, 255, 0.1);
+  --icon-bg: rgba(255, 255, 255, 0.1);
+  /* Typography */
+  --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
+  --cc-text-color-primary: #000000;
+  --cc-text-color-secondary: #757575;
+  --cc-text-size-label: 12px;
+  --cc-text-size-value: 24px;
+  --cc-text-weight-bold: 700;
+  --cc-text-weight-medium: 500;
+
+  /* Theme 1 - Screenshot Match */
+  --cc-theme-1-padding: 20px;
+  --cc-theme-1-border-radius: 6px;
+  --cc-theme-1-border: 1px solid #eeeeee;
+  --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+
+  /* Theme 2 - Aesthetic */
+  --cc-theme-2-padding: 32px;
+  --cc-theme-2-border-radius: 16px;
+  --cc-theme-2-border: none;
+  --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
+  --cc-theme-2-bg: #ffffff;
+
+}
+
+/* Global Reset/Base */
+body {
+  margin: 0;
+  font-family: 'Inter', sans-serif;
+  background-color: var(--content-bg);
+  /* Use content-bg, not generic bg-color */
+  color: var(--text-color);
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
+}