commons-shared-web-ui 0.0.44 → 0.0.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/fesm2022/commons-shared-web-ui.mjs +1342 -1338
  2. package/fesm2022/commons-shared-web-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/modules/alert/alert.theme.scss +84 -84
  5. package/src/lib/modules/button/button.theme.scss +120 -120
  6. package/src/lib/modules/configurable-form/configurable-form.theme.scss +77 -77
  7. package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss +86 -86
  8. package/src/lib/modules/filter/filter.theme.scss +91 -91
  9. package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss +37 -37
  10. package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss +36 -36
  11. package/src/lib/modules/form-builder/form-builder.theme.scss +212 -212
  12. package/src/lib/modules/form-components/components/checkbox/_theme.scss +62 -62
  13. package/src/lib/modules/form-components/components/datepicker/_theme.scss +81 -81
  14. package/src/lib/modules/form-components/components/dropdown/_theme.scss +90 -90
  15. package/src/lib/modules/form-components/components/input/_theme.scss +76 -76
  16. package/src/lib/modules/form-components/components/radio/_theme.scss +60 -60
  17. package/src/lib/modules/form-components/components/search/_theme.scss +72 -72
  18. package/src/lib/modules/form-components/components/toggle/_theme.scss +44 -44
  19. package/src/lib/modules/form-components/form-components.theme.scss +24 -24
  20. package/src/lib/modules/nav/nav.theme.scss +86 -86
  21. package/src/lib/modules/pagination/pagination.theme.scss +66 -66
  22. package/src/lib/modules/side-nav/side-nav.theme.scss +111 -111
  23. package/src/lib/modules/smart-form/smart-form.theme.scss +889 -889
  24. package/src/lib/modules/smart-table/smart-table.theme.scss +335 -335
  25. package/src/lib/modules/snackbar/snackbar.theme.scss +93 -93
  26. package/src/lib/modules/summary-card/summary-card.theme.scss +175 -175
  27. package/src/lib/styles/global.scss +151 -151
  28. package/src/lib/styles/utilities.scss +250 -250
package/src/lib/styles/global.scss CHANGED
@@ -1,152 +1,152 @@
1
- @use '../modules/side-nav/side-nav.theme' as sideNav;
2
- @use '../modules/form-builder/form-builder.theme' as fb;
3
- @use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
4
- @import 'quill/dist/quill.snow.css';
5
- @import './utilities.scss';
6
-
7
- :root {
8
- @include sideNav.side-nav-theme();
9
- @include fb.form-builder-theme();
10
- --cc-card-bg: #ffffff;
11
- --cc-card-border-color: #e0e0e0;
12
- --cc-card-border-radius: 8px;
13
- --cc-card-padding: 16px;
14
- --cc-card-shadow: none;
15
-
16
- @include fts.filter-table-selector-theme();
17
-
18
- /* Text Colors */
19
- --text-color: #333333;
20
- --text-muted: #666666;
21
- --text-muted-2: #888888;
22
- --text-light: #6c757d;
23
- --text-on-primary: #ffffff;
24
-
25
- /* Borders & Icons */
26
- --border-color: #dee2e6;
27
- --icon-bg: rgba(0, 0, 0, 0.05);
28
-
29
- /* Components */
30
- --primary-color: #c21e25;
31
- /* Default Base Primary */
32
- --btn-primary-bg: var(--primary-color);
33
- --btn-primary-text: #ffffff;
34
- --card-bg: #ffffff;
35
- --input-bg: #fcfcfc;
36
- --sidenav-bg: #ffffff;
37
- --sidenav-active-bg: #fff0f0;
38
- --sidenav-active-text: #ff0000;
39
-
40
- /* Status & Chips */
41
- --status-active-bg: #f6ffed;
42
- --status-active-text: #52c41a;
43
- --status-inactive-bg: #fffbe6;
44
- --status-inactive-text: #faad14;
45
-
46
- --chip-blue-bg: #e6f7ff;
47
- --chip-blue-text: #1890ff;
48
- --chip-green-bg: #f6ffed;
49
- --chip-green-text: #52c41a;
50
-
51
- /* Form Fields */
52
- --field-label-color: #202124;
53
- --field-label-height: 27px;
54
- --field-input-bg: #fefefe;
55
- --field-input-border: #bdc1c6;
56
- --field-input-height: 40px;
57
- --field-input-radius: 7px;
58
- --field-hint-color: #5f6368;
59
-
60
- /* Smart Table Inline Edit Controls */
61
- --st-cell-input-border: 1px solid var(--field-input-border, #dee2e6);
62
- --st-cell-input-focus-outline-color: var(--primary-color, #c21e25);
63
- --st-cell-input-bg: var(--field-input-bg, #fcfcfc);
64
- --st-cell-select-bg: var(--field-input-bg, #fcfcfc);
65
-
66
- /* Smart Table Inline Edit Controls (Mirrored) */
67
- --st-edit-actions-gap: 0.75rem;
68
- --st-action-btn-size: 32px;
69
- --st-action-btn-icon-size: 16px;
70
- --st-tick-btn-bg: transparent;
71
- --st-cross-btn-bg: #ffffff;
72
- --st-cross-btn-border: 1px solid #e8eaed;
73
- --st-cross-btn-hover-bg: #f8f9fa;
74
- --st-top-add-btn-bg: #4d89eb;
75
- --st-top-add-btn-hover-bg: #295eb7;
76
-
77
- /* MultiSave (Card Repeater) */
78
- --ms-card-bg: #ffffff;
79
- --ms-card-border: #e8eaed;
80
- --ms-card-radius: 10px;
81
- --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
82
- --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
83
- --ms-title-color: #111827;
84
- --ms-desc-color: #6b7280;
85
- --ms-btn-add-color: #3b82f6;
86
- --ms-btn-add-hover: #2563eb;
87
-
88
- @include sideNav.side-nav-theme();
89
- }
90
-
91
- /* ----------------------------------------------------
92
- Theme 2 - Aesthetic Midnight (Dark/Neon)
93
- ---------------------------------------------------- */
94
- body.theme-2 {
95
- --primary-color: #00d4ff;
96
- /* Neon Cyan */
97
- --secondary-color: #2b52ff;
98
- /* Bright Blue */
99
-
100
- /* Layout Backgrounds */
101
- --header-bg: rgba(15, 28, 63, 0.95);
102
- /* Deep Indigo */
103
- --footer-bg-start: #0a1128;
104
- --footer-bg-end: #0f1c3f;
105
- --sidebar-bg: #0a1128;
106
- --content-bg: #0f1c3f;
107
-
108
- /* Text Colors */
109
- --text-color: #ffffff;
110
- --text-muted: rgba(255, 255, 255, 0.7);
111
- --text-muted-2: rgba(255, 255, 255, 0.6);
112
- --text-light: #aaaaaa;
113
- --text-on-primary: #000000;
114
-
115
- /* Borders & Icons */
116
- --border-color: rgba(255, 255, 255, 0.1);
117
- --icon-bg: rgba(255, 255, 255, 0.1);
118
- /* Typography */
119
- --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
120
- --cc-text-color-primary: #000000;
121
- --cc-text-color-secondary: #757575;
122
- --cc-text-size-label: 12px;
123
- --cc-text-size-value: 24px;
124
- --cc-text-weight-bold: 700;
125
- --cc-text-weight-medium: 500;
126
-
127
- /* Theme 1 - Screenshot Match */
128
- --cc-theme-1-padding: 20px;
129
- --cc-theme-1-border-radius: 6px;
130
- --cc-theme-1-border: 1px solid #eeeeee;
131
- --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
132
-
133
- /* Theme 2 - Aesthetic */
134
- --cc-theme-2-padding: 32px;
135
- --cc-theme-2-border-radius: 16px;
136
- --cc-theme-2-border: none;
137
- --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
138
- --cc-theme-2-bg: #ffffff;
139
-
140
- }
141
-
142
- /* Global Reset/Base */
143
- body {
144
- margin: 0;
145
- font-family: 'Inter', sans-serif;
146
- background-color: var(--content-bg);
147
- /* Use content-bg, not generic bg-color */
148
- color: var(--text-color);
149
- transition:
150
- background-color 0.3s ease,
151
- color 0.3s ease;
1
+ @use '../modules/side-nav/side-nav.theme' as sideNav;
2
+ @use '../modules/form-builder/form-builder.theme' as fb;
3
+ @use '../modules/filter-table-selector/filter-table-selector.theme' as fts;
4
+ @import 'quill/dist/quill.snow.css';
5
+ @import './utilities.scss';
6
+
7
+ :root {
8
+ @include sideNav.side-nav-theme();
9
+ @include fb.form-builder-theme();
10
+ --cc-card-bg: #ffffff;
11
+ --cc-card-border-color: #e0e0e0;
12
+ --cc-card-border-radius: 8px;
13
+ --cc-card-padding: 16px;
14
+ --cc-card-shadow: none;
15
+
16
+ @include fts.filter-table-selector-theme();
17
+
18
+ /* Text Colors */
19
+ --text-color: #333333;
20
+ --text-muted: #666666;
21
+ --text-muted-2: #888888;
22
+ --text-light: #6c757d;
23
+ --text-on-primary: #ffffff;
24
+
25
+ /* Borders & Icons */
26
+ --border-color: #dee2e6;
27
+ --icon-bg: rgba(0, 0, 0, 0.05);
28
+
29
+ /* Components */
30
+ --primary-color: #c21e25;
31
+ /* Default Base Primary */
32
+ --btn-primary-bg: var(--primary-color);
33
+ --btn-primary-text: #ffffff;
34
+ --card-bg: #ffffff;
35
+ --input-bg: #fcfcfc;
36
+ --sidenav-bg: #ffffff;
37
+ --sidenav-active-bg: #fff0f0;
38
+ --sidenav-active-text: #ff0000;
39
+
40
+ /* Status & Chips */
41
+ --status-active-bg: #f6ffed;
42
+ --status-active-text: #52c41a;
43
+ --status-inactive-bg: #fffbe6;
44
+ --status-inactive-text: #faad14;
45
+
46
+ --chip-blue-bg: #e6f7ff;
47
+ --chip-blue-text: #1890ff;
48
+ --chip-green-bg: #f6ffed;
49
+ --chip-green-text: #52c41a;
50
+
51
+ /* Form Fields */
52
+ --field-label-color: #202124;
53
+ --field-label-height: 27px;
54
+ --field-input-bg: #fefefe;
55
+ --field-input-border: #bdc1c6;
56
+ --field-input-height: 40px;
57
+ --field-input-radius: 7px;
58
+ --field-hint-color: #5f6368;
59
+
60
+ /* Smart Table Inline Edit Controls */
61
+ --st-cell-input-border: 1px solid var(--field-input-border, #dee2e6);
62
+ --st-cell-input-focus-outline-color: var(--primary-color, #c21e25);
63
+ --st-cell-input-bg: var(--field-input-bg, #fcfcfc);
64
+ --st-cell-select-bg: var(--field-input-bg, #fcfcfc);
65
+
66
+ /* Smart Table Inline Edit Controls (Mirrored) */
67
+ --st-edit-actions-gap: 0.75rem;
68
+ --st-action-btn-size: 32px;
69
+ --st-action-btn-icon-size: 16px;
70
+ --st-tick-btn-bg: transparent;
71
+ --st-cross-btn-bg: #ffffff;
72
+ --st-cross-btn-border: 1px solid #e8eaed;
73
+ --st-cross-btn-hover-bg: #f8f9fa;
74
+ --st-top-add-btn-bg: #4d89eb;
75
+ --st-top-add-btn-hover-bg: #295eb7;
76
+
77
+ /* MultiSave (Card Repeater) */
78
+ --ms-card-bg: #ffffff;
79
+ --ms-card-border: #e8eaed;
80
+ --ms-card-radius: 10px;
81
+ --ms-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
82
+ --ms-card-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.08);
83
+ --ms-title-color: #111827;
84
+ --ms-desc-color: #6b7280;
85
+ --ms-btn-add-color: #3b82f6;
86
+ --ms-btn-add-hover: #2563eb;
87
+
88
+ @include sideNav.side-nav-theme();
89
+ }
90
+
91
+ /* ----------------------------------------------------
92
+ Theme 2 - Aesthetic Midnight (Dark/Neon)
93
+ ---------------------------------------------------- */
94
+ body.theme-2 {
95
+ --primary-color: #00d4ff;
96
+ /* Neon Cyan */
97
+ --secondary-color: #2b52ff;
98
+ /* Bright Blue */
99
+
100
+ /* Layout Backgrounds */
101
+ --header-bg: rgba(15, 28, 63, 0.95);
102
+ /* Deep Indigo */
103
+ --footer-bg-start: #0a1128;
104
+ --footer-bg-end: #0f1c3f;
105
+ --sidebar-bg: #0a1128;
106
+ --content-bg: #0f1c3f;
107
+
108
+ /* Text Colors */
109
+ --text-color: #ffffff;
110
+ --text-muted: rgba(255, 255, 255, 0.7);
111
+ --text-muted-2: rgba(255, 255, 255, 0.6);
112
+ --text-light: #aaaaaa;
113
+ --text-on-primary: #000000;
114
+
115
+ /* Borders & Icons */
116
+ --border-color: rgba(255, 255, 255, 0.1);
117
+ --icon-bg: rgba(255, 255, 255, 0.1);
118
+ /* Typography */
119
+ --cc-font-family: 'Roboto', 'Helvetica Neue', sans-serif;
120
+ --cc-text-color-primary: #000000;
121
+ --cc-text-color-secondary: #757575;
122
+ --cc-text-size-label: 12px;
123
+ --cc-text-size-value: 24px;
124
+ --cc-text-weight-bold: 700;
125
+ --cc-text-weight-medium: 500;
126
+
127
+ /* Theme 1 - Screenshot Match */
128
+ --cc-theme-1-padding: 20px;
129
+ --cc-theme-1-border-radius: 6px;
130
+ --cc-theme-1-border: 1px solid #eeeeee;
131
+ --cc-theme-1-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
132
+
133
+ /* Theme 2 - Aesthetic */
134
+ --cc-theme-2-padding: 32px;
135
+ --cc-theme-2-border-radius: 16px;
136
+ --cc-theme-2-border: none;
137
+ --cc-theme-2-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
138
+ --cc-theme-2-bg: #ffffff;
139
+
140
+ }
141
+
142
+ /* Global Reset/Base */
143
+ body {
144
+ margin: 0;
145
+ font-family: 'Inter', sans-serif;
146
+ background-color: var(--content-bg);
147
+ /* Use content-bg, not generic bg-color */
148
+ color: var(--text-color);
149
+ transition:
150
+ background-color 0.3s ease,
151
+ color 0.3s ease;
152
152
  }