commons-shared-web-ui 0.0.43 → 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 (29) hide show
  1. package/fesm2022/commons-shared-web-ui.mjs +1459 -1347
  2. package/fesm2022/commons-shared-web-ui.mjs.map +1 -1
  3. package/index.d.ts +49 -0
  4. package/package.json +1 -1
  5. package/src/lib/modules/alert/alert.theme.scss +84 -84
  6. package/src/lib/modules/button/button.theme.scss +120 -120
  7. package/src/lib/modules/configurable-form/configurable-form.theme.scss +77 -77
  8. package/src/lib/modules/confirmation-modal/confirmation-modal.theme.scss +86 -86
  9. package/src/lib/modules/filter/filter.theme.scss +91 -91
  10. package/src/lib/modules/filter-sidebar/filter-sidebar.theme.scss +37 -37
  11. package/src/lib/modules/filter-table-selector/filter-table-selector.theme.scss +36 -36
  12. package/src/lib/modules/form-builder/form-builder.theme.scss +212 -212
  13. package/src/lib/modules/form-components/components/checkbox/_theme.scss +62 -62
  14. package/src/lib/modules/form-components/components/datepicker/_theme.scss +81 -81
  15. package/src/lib/modules/form-components/components/dropdown/_theme.scss +90 -90
  16. package/src/lib/modules/form-components/components/input/_theme.scss +76 -76
  17. package/src/lib/modules/form-components/components/radio/_theme.scss +60 -60
  18. package/src/lib/modules/form-components/components/search/_theme.scss +72 -72
  19. package/src/lib/modules/form-components/components/toggle/_theme.scss +44 -44
  20. package/src/lib/modules/form-components/form-components.theme.scss +24 -24
  21. package/src/lib/modules/nav/nav.theme.scss +86 -86
  22. package/src/lib/modules/pagination/pagination.theme.scss +66 -66
  23. package/src/lib/modules/side-nav/side-nav.theme.scss +111 -111
  24. package/src/lib/modules/smart-form/smart-form.theme.scss +889 -889
  25. package/src/lib/modules/smart-table/smart-table.theme.scss +335 -335
  26. package/src/lib/modules/snackbar/snackbar.theme.scss +93 -93
  27. package/src/lib/modules/summary-card/summary-card.theme.scss +175 -175
  28. package/src/lib/styles/global.scss +151 -151
  29. package/src/lib/styles/utilities.scss +250 -250
package/src/lib/modules/snackbar/snackbar.theme.scss CHANGED
@@ -1,93 +1,93 @@
1
- @use 'sass:map';
2
-
3
- // Default configuration for the snackbar theme
4
- $default-snackbar-config: (
5
- // Shared Layout
6
- font-family: ('Inter', sans-serif),
7
- font-size: 14px,
8
- font-weight: 500,
9
- min-width: 300px,
10
- padding: 12px 16px,
11
- gap: 12px,
12
- radius: 8px,
13
- shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)),
14
- icon-size: 20px,
15
- close-icon-size: 16px,
16
-
17
- // Base Colors
18
- bg: #ffffff,
19
- color: #1f2937,
20
- border: 1px solid transparent,
21
-
22
- // Success
23
- success-bg: #ecfdf5,
24
- success-color: #065f46,
25
- success-border: #a7f3d0,
26
- success-icon-color: #10b981,
27
-
28
- // Error
29
- error-bg: #fef2f2,
30
- error-color: #991b1b,
31
- error-border: #fecaca,
32
- error-icon-color: #ef4444,
33
-
34
- // Info
35
- info-bg: #eff6ff,
36
- info-color: #1e40af,
37
- info-border: #bfdbfe,
38
- info-icon-color: #3b82f6,
39
-
40
- // Warning
41
- warning-bg: #fffbeb,
42
- warning-color: #92400e,
43
- warning-border: #fde68a,
44
- warning-icon-color: #f59e0b
45
- );
46
-
47
- // Mixin to generate CSS variables for the snackbar component
48
- // E.g., @include cc-snackbar-theme()
49
- @mixin snackbar-theme($user-config: ()) {
50
- // Merge user config with defaults
51
- $config: map.merge($default-snackbar-config, $user-config);
52
-
53
- // Structural
54
- --cc-sb-font-family: #{map.get($config, font-family)};
55
- --cc-sb-font-size: #{map.get($config, font-size)};
56
- --cc-sb-font-weight: #{map.get($config, font-weight)};
57
- --cc-sb-min-width: #{map.get($config, min-width)};
58
- --cc-sb-padding: #{map.get($config, padding)};
59
- --cc-sb-gap: #{map.get($config, gap)};
60
- --cc-sb-radius: #{map.get($config, radius)};
61
- --cc-sb-shadow: #{map.get($config, shadow)};
62
- --cc-sb-icon-size: #{map.get($config, icon-size)};
63
- --cc-sb-close-icon-size: #{map.get($config, close-icon-size)};
64
-
65
- // Base Defaults
66
- --cc-sb-bg: #{map.get($config, bg)};
67
- --cc-sb-color: #{map.get($config, color)};
68
- --cc-sb-border: #{map.get($config, border)};
69
-
70
- // Success
71
- --cc-sb-success-bg: #{map.get($config, success-bg)};
72
- --cc-sb-success-color: #{map.get($config, success-color)};
73
- --cc-sb-success-border: #{map.get($config, success-border)};
74
- --cc-sb-success-icon-color: #{map.get($config, success-icon-color)};
75
-
76
- // Error
77
- --cc-sb-error-bg: #{map.get($config, error-bg)};
78
- --cc-sb-error-color: #{map.get($config, error-color)};
79
- --cc-sb-error-border: #{map.get($config, error-border)};
80
- --cc-sb-error-icon-color: #{map.get($config, error-icon-color)};
81
-
82
- // Info
83
- --cc-sb-info-bg: #{map.get($config, info-bg)};
84
- --cc-sb-info-color: #{map.get($config, info-color)};
85
- --cc-sb-info-border: #{map.get($config, info-border)};
86
- --cc-sb-info-icon-color: #{map.get($config, info-icon-color)};
87
-
88
- // Warning
89
- --cc-sb-warning-bg: #{map.get($config, warning-bg)};
90
- --cc-sb-warning-color: #{map.get($config, warning-color)};
91
- --cc-sb-warning-border: #{map.get($config, warning-border)};
92
- --cc-sb-warning-icon-color: #{map.get($config, warning-icon-color)};
93
- }
1
+ @use 'sass:map';
2
+
3
+ // Default configuration for the snackbar theme
4
+ $default-snackbar-config: (
5
+ // Shared Layout
6
+ font-family: ('Inter', sans-serif),
7
+ font-size: 14px,
8
+ font-weight: 500,
9
+ min-width: 300px,
10
+ padding: 12px 16px,
11
+ gap: 12px,
12
+ radius: 8px,
13
+ shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)),
14
+ icon-size: 20px,
15
+ close-icon-size: 16px,
16
+
17
+ // Base Colors
18
+ bg: #ffffff,
19
+ color: #1f2937,
20
+ border: 1px solid transparent,
21
+
22
+ // Success
23
+ success-bg: #ecfdf5,
24
+ success-color: #065f46,
25
+ success-border: #a7f3d0,
26
+ success-icon-color: #10b981,
27
+
28
+ // Error
29
+ error-bg: #fef2f2,
30
+ error-color: #991b1b,
31
+ error-border: #fecaca,
32
+ error-icon-color: #ef4444,
33
+
34
+ // Info
35
+ info-bg: #eff6ff,
36
+ info-color: #1e40af,
37
+ info-border: #bfdbfe,
38
+ info-icon-color: #3b82f6,
39
+
40
+ // Warning
41
+ warning-bg: #fffbeb,
42
+ warning-color: #92400e,
43
+ warning-border: #fde68a,
44
+ warning-icon-color: #f59e0b
45
+ );
46
+
47
+ // Mixin to generate CSS variables for the snackbar component
48
+ // E.g., @include cc-snackbar-theme()
49
+ @mixin snackbar-theme($user-config: ()) {
50
+ // Merge user config with defaults
51
+ $config: map.merge($default-snackbar-config, $user-config);
52
+
53
+ // Structural
54
+ --cc-sb-font-family: #{map.get($config, font-family)};
55
+ --cc-sb-font-size: #{map.get($config, font-size)};
56
+ --cc-sb-font-weight: #{map.get($config, font-weight)};
57
+ --cc-sb-min-width: #{map.get($config, min-width)};
58
+ --cc-sb-padding: #{map.get($config, padding)};
59
+ --cc-sb-gap: #{map.get($config, gap)};
60
+ --cc-sb-radius: #{map.get($config, radius)};
61
+ --cc-sb-shadow: #{map.get($config, shadow)};
62
+ --cc-sb-icon-size: #{map.get($config, icon-size)};
63
+ --cc-sb-close-icon-size: #{map.get($config, close-icon-size)};
64
+
65
+ // Base Defaults
66
+ --cc-sb-bg: #{map.get($config, bg)};
67
+ --cc-sb-color: #{map.get($config, color)};
68
+ --cc-sb-border: #{map.get($config, border)};
69
+
70
+ // Success
71
+ --cc-sb-success-bg: #{map.get($config, success-bg)};
72
+ --cc-sb-success-color: #{map.get($config, success-color)};
73
+ --cc-sb-success-border: #{map.get($config, success-border)};
74
+ --cc-sb-success-icon-color: #{map.get($config, success-icon-color)};
75
+
76
+ // Error
77
+ --cc-sb-error-bg: #{map.get($config, error-bg)};
78
+ --cc-sb-error-color: #{map.get($config, error-color)};
79
+ --cc-sb-error-border: #{map.get($config, error-border)};
80
+ --cc-sb-error-icon-color: #{map.get($config, error-icon-color)};
81
+
82
+ // Info
83
+ --cc-sb-info-bg: #{map.get($config, info-bg)};
84
+ --cc-sb-info-color: #{map.get($config, info-color)};
85
+ --cc-sb-info-border: #{map.get($config, info-border)};
86
+ --cc-sb-info-icon-color: #{map.get($config, info-icon-color)};
87
+
88
+ // Warning
89
+ --cc-sb-warning-bg: #{map.get($config, warning-bg)};
90
+ --cc-sb-warning-color: #{map.get($config, warning-color)};
91
+ --cc-sb-warning-border: #{map.get($config, warning-border)};
92
+ --cc-sb-warning-icon-color: #{map.get($config, warning-icon-color)};
93
+ }
package/src/lib/modules/summary-card/summary-card.theme.scss CHANGED
@@ -1,176 +1,176 @@
1
- @use 'sass:map';
2
-
3
- // Default configuration for the summary card theme (Theme 1 - Clean & Minimal)
4
- $default-summary-card-config: (
5
- // Base
6
- font-family: ('Inter', sans-serif),
7
- bg-color: #ffffff,
8
- border-radius: 8px,
9
- border: 1px solid #e0e0e0,
10
- padding: 20px,
11
- shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
12
- min-height: auto,
13
- transition-duration: 0.2s,
14
-
15
- // Hover States
16
- hover-transform: translateY(-2px),
17
- hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
18
-
19
- // Disabled State
20
- disabled-opacity: 0.5,
21
-
22
- // Icon Section
23
- icon-box-size: 48px,
24
- icon-size: 24px,
25
- icon-radius: 8px,
26
- icon-bg: rgba(0, 0, 0, 0.05),
27
- icon-color: #666666,
28
- icon-margin: 1rem,
29
-
30
- // Content Section
31
- content-gap: 0.5rem,
32
-
33
- // Header
34
- header-size: 0.75rem,
35
- header-weight: 600,
36
- header-color: #6c757d,
37
- header-transform: uppercase,
38
- header-letter-spacing: 0.05em,
39
- header-line-height: 1.2,
40
-
41
- // Value
42
- value-size: 1.5rem,
43
- value-weight: 700,
44
- value-color: #333333,
45
- value-line-height: 1.2,
46
-
47
- // Description
48
- desc-size: 0.75rem,
49
- desc-weight: 400,
50
- desc-color: #6c757d,
51
- desc-line-height: 1.4,
52
- value-desc-gap: 0.25rem,
53
-
54
- // Meta Pill
55
- meta-pill-bg: #f1f5f9,
56
- meta-pill-color: #475569,
57
- meta-pill-padding: 4px 12px,
58
- meta-pill-radius: 20px,
59
- meta-pill-font-size: 0.75rem,
60
- meta-pill-font-weight: 600
61
- );
62
-
63
- // Theme 2 configuration (Aesthetic & Modern)
64
- $theme-2-summary-card-config: (
65
- // Base
66
- font-family: ('Poppins', 'Segoe UI', sans-serif),
67
- bg-color: #ffffff,
68
- border-radius: 16px,
69
- border: none,
70
- padding: 28px,
71
- shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
72
- min-height: 120px,
73
- transition-duration: 0.3s,
74
-
75
- // Hover States
76
- hover-transform: translateY(-4px),
77
- hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),
78
-
79
- // Disabled State
80
- disabled-opacity: 0.4,
81
-
82
- // Icon Section
83
- icon-box-size: 56px,
84
- icon-size: 28px,
85
- icon-radius: 12px,
86
- icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%),
87
- icon-color: #6366f1,
88
- icon-margin: 1.25rem,
89
-
90
- // Content Section
91
- content-gap: 0.75rem,
92
-
93
- // Header
94
- header-size: 0.8rem,
95
- header-weight: 500,
96
- header-color: #94a3b8,
97
- header-transform: none,
98
- header-letter-spacing: 0.02em,
99
- header-line-height: 1.3,
100
-
101
- // Value
102
- value-size: 2rem,
103
- value-weight: 700,
104
- value-color: #1e293b,
105
- value-line-height: 1.1,
106
-
107
- // Description
108
- desc-size: 0.85rem,
109
- desc-weight: 400,
110
- desc-color: #64748b,
111
- desc-line-height: 1.5,
112
- value-desc-gap: 0.5rem,
113
-
114
- // Meta Pill
115
- meta-pill-bg: #f1f5f9,
116
- meta-pill-color: #475569,
117
- meta-pill-padding: 4px 12px,
118
- meta-pill-radius: 20px,
119
- meta-pill-font-size: 0.75rem,
120
- meta-pill-font-weight: 600
121
- );
122
-
123
- // Mixin to generate CSS variables for the summary card component
124
- @mixin summary-card-theme($user-config: ()) {
125
- // Merge user config with defaults
126
- $config: map.merge($default-summary-card-config, $user-config);
127
-
128
- // Generate CSS Variables
129
- --cc-sc-font-family: #{map.get($config, font-family)};
130
- --cc-sc-bg-color: #{map.get($config, bg-color)};
131
- --cc-sc-border-radius: #{map.get($config, border-radius)};
132
- --cc-sc-border: #{map.get($config, border)};
133
- --cc-sc-padding: #{map.get($config, padding)};
134
- --cc-sc-shadow: #{map.get($config, shadow)};
135
- --cc-sc-min-height: #{map.get($config, min-height)};
136
- --cc-sc-transition-duration: #{map.get($config, transition-duration)};
137
-
138
- --cc-sc-hover-transform: #{map.get($config, hover-transform)};
139
- --cc-sc-hover-shadow: #{map.get($config, hover-shadow)};
140
-
141
- --cc-sc-disabled-opacity: #{map.get($config, disabled-opacity)};
142
-
143
- --cc-sc-icon-box-size: #{map.get($config, icon-box-size)};
144
- --cc-sc-icon-size: #{map.get($config, icon-size)};
145
- --cc-sc-icon-radius: #{map.get($config, icon-radius)};
146
- --cc-sc-icon-bg: #{map.get($config, icon-bg)};
147
- --cc-sc-icon-color: #{map.get($config, icon-color)};
148
- --cc-sc-icon-margin: #{map.get($config, icon-margin)};
149
-
150
- --cc-sc-content-gap: #{map.get($config, content-gap)};
151
-
152
- --cc-sc-header-size: #{map.get($config, header-size)};
153
- --cc-sc-header-weight: #{map.get($config, header-weight)};
154
- --cc-sc-header-color: #{map.get($config, header-color)};
155
- --cc-sc-header-transform: #{map.get($config, header-transform)};
156
- --cc-sc-header-letter-spacing: #{map.get($config, header-letter-spacing)};
157
- --cc-sc-header-line-height: #{map.get($config, header-line-height)};
158
-
159
- --cc-sc-value-size: #{map.get($config, value-size)};
160
- --cc-sc-value-weight: #{map.get($config, value-weight)};
161
- --cc-sc-value-color: #{map.get($config, value-color)};
162
- --cc-sc-value-line-height: #{map.get($config, value-line-height)};
163
-
164
- --cc-sc-desc-size: #{map.get($config, desc-size)};
165
- --cc-sc-desc-weight: #{map.get($config, desc-weight)};
166
- --cc-sc-desc-color: #{map.get($config, desc-color)};
167
- --cc-sc-desc-line-height: #{map.get($config, desc-line-height)};
168
- --cc-sc-value-desc-gap: #{map.get($config, value-desc-gap)};
169
-
170
- --cc-sc-meta-pill-bg: #{map.get($config, meta-pill-bg)};
171
- --cc-sc-meta-pill-color: #{map.get($config, meta-pill-color)};
172
- --cc-sc-meta-pill-padding: #{map.get($config, meta-pill-padding)};
173
- --cc-sc-meta-pill-radius: #{map.get($config, meta-pill-radius)};
174
- --cc-sc-meta-pill-font-size: #{map.get($config, meta-pill-font-size)};
175
- --cc-sc-meta-pill-font-weight: #{map.get($config, meta-pill-font-weight)};
1
+ @use 'sass:map';
2
+
3
+ // Default configuration for the summary card theme (Theme 1 - Clean & Minimal)
4
+ $default-summary-card-config: (
5
+ // Base
6
+ font-family: ('Inter', sans-serif),
7
+ bg-color: #ffffff,
8
+ border-radius: 8px,
9
+ border: 1px solid #e0e0e0,
10
+ padding: 20px,
11
+ shadow: 0 1px 3px rgba(0, 0, 0, 0.05),
12
+ min-height: auto,
13
+ transition-duration: 0.2s,
14
+
15
+ // Hover States
16
+ hover-transform: translateY(-2px),
17
+ hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
18
+
19
+ // Disabled State
20
+ disabled-opacity: 0.5,
21
+
22
+ // Icon Section
23
+ icon-box-size: 48px,
24
+ icon-size: 24px,
25
+ icon-radius: 8px,
26
+ icon-bg: rgba(0, 0, 0, 0.05),
27
+ icon-color: #666666,
28
+ icon-margin: 1rem,
29
+
30
+ // Content Section
31
+ content-gap: 0.5rem,
32
+
33
+ // Header
34
+ header-size: 0.75rem,
35
+ header-weight: 600,
36
+ header-color: #6c757d,
37
+ header-transform: uppercase,
38
+ header-letter-spacing: 0.05em,
39
+ header-line-height: 1.2,
40
+
41
+ // Value
42
+ value-size: 1.5rem,
43
+ value-weight: 700,
44
+ value-color: #333333,
45
+ value-line-height: 1.2,
46
+
47
+ // Description
48
+ desc-size: 0.75rem,
49
+ desc-weight: 400,
50
+ desc-color: #6c757d,
51
+ desc-line-height: 1.4,
52
+ value-desc-gap: 0.25rem,
53
+
54
+ // Meta Pill
55
+ meta-pill-bg: #f1f5f9,
56
+ meta-pill-color: #475569,
57
+ meta-pill-padding: 4px 12px,
58
+ meta-pill-radius: 20px,
59
+ meta-pill-font-size: 0.75rem,
60
+ meta-pill-font-weight: 600
61
+ );
62
+
63
+ // Theme 2 configuration (Aesthetic & Modern)
64
+ $theme-2-summary-card-config: (
65
+ // Base
66
+ font-family: ('Poppins', 'Segoe UI', sans-serif),
67
+ bg-color: #ffffff,
68
+ border-radius: 16px,
69
+ border: none,
70
+ padding: 28px,
71
+ shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
72
+ min-height: 120px,
73
+ transition-duration: 0.3s,
74
+
75
+ // Hover States
76
+ hover-transform: translateY(-4px),
77
+ hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.15),
78
+
79
+ // Disabled State
80
+ disabled-opacity: 0.4,
81
+
82
+ // Icon Section
83
+ icon-box-size: 56px,
84
+ icon-size: 28px,
85
+ icon-radius: 12px,
86
+ icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%),
87
+ icon-color: #6366f1,
88
+ icon-margin: 1.25rem,
89
+
90
+ // Content Section
91
+ content-gap: 0.75rem,
92
+
93
+ // Header
94
+ header-size: 0.8rem,
95
+ header-weight: 500,
96
+ header-color: #94a3b8,
97
+ header-transform: none,
98
+ header-letter-spacing: 0.02em,
99
+ header-line-height: 1.3,
100
+
101
+ // Value
102
+ value-size: 2rem,
103
+ value-weight: 700,
104
+ value-color: #1e293b,
105
+ value-line-height: 1.1,
106
+
107
+ // Description
108
+ desc-size: 0.85rem,
109
+ desc-weight: 400,
110
+ desc-color: #64748b,
111
+ desc-line-height: 1.5,
112
+ value-desc-gap: 0.5rem,
113
+
114
+ // Meta Pill
115
+ meta-pill-bg: #f1f5f9,
116
+ meta-pill-color: #475569,
117
+ meta-pill-padding: 4px 12px,
118
+ meta-pill-radius: 20px,
119
+ meta-pill-font-size: 0.75rem,
120
+ meta-pill-font-weight: 600
121
+ );
122
+
123
+ // Mixin to generate CSS variables for the summary card component
124
+ @mixin summary-card-theme($user-config: ()) {
125
+ // Merge user config with defaults
126
+ $config: map.merge($default-summary-card-config, $user-config);
127
+
128
+ // Generate CSS Variables
129
+ --cc-sc-font-family: #{map.get($config, font-family)};
130
+ --cc-sc-bg-color: #{map.get($config, bg-color)};
131
+ --cc-sc-border-radius: #{map.get($config, border-radius)};
132
+ --cc-sc-border: #{map.get($config, border)};
133
+ --cc-sc-padding: #{map.get($config, padding)};
134
+ --cc-sc-shadow: #{map.get($config, shadow)};
135
+ --cc-sc-min-height: #{map.get($config, min-height)};
136
+ --cc-sc-transition-duration: #{map.get($config, transition-duration)};
137
+
138
+ --cc-sc-hover-transform: #{map.get($config, hover-transform)};
139
+ --cc-sc-hover-shadow: #{map.get($config, hover-shadow)};
140
+
141
+ --cc-sc-disabled-opacity: #{map.get($config, disabled-opacity)};
142
+
143
+ --cc-sc-icon-box-size: #{map.get($config, icon-box-size)};
144
+ --cc-sc-icon-size: #{map.get($config, icon-size)};
145
+ --cc-sc-icon-radius: #{map.get($config, icon-radius)};
146
+ --cc-sc-icon-bg: #{map.get($config, icon-bg)};
147
+ --cc-sc-icon-color: #{map.get($config, icon-color)};
148
+ --cc-sc-icon-margin: #{map.get($config, icon-margin)};
149
+
150
+ --cc-sc-content-gap: #{map.get($config, content-gap)};
151
+
152
+ --cc-sc-header-size: #{map.get($config, header-size)};
153
+ --cc-sc-header-weight: #{map.get($config, header-weight)};
154
+ --cc-sc-header-color: #{map.get($config, header-color)};
155
+ --cc-sc-header-transform: #{map.get($config, header-transform)};
156
+ --cc-sc-header-letter-spacing: #{map.get($config, header-letter-spacing)};
157
+ --cc-sc-header-line-height: #{map.get($config, header-line-height)};
158
+
159
+ --cc-sc-value-size: #{map.get($config, value-size)};
160
+ --cc-sc-value-weight: #{map.get($config, value-weight)};
161
+ --cc-sc-value-color: #{map.get($config, value-color)};
162
+ --cc-sc-value-line-height: #{map.get($config, value-line-height)};
163
+
164
+ --cc-sc-desc-size: #{map.get($config, desc-size)};
165
+ --cc-sc-desc-weight: #{map.get($config, desc-weight)};
166
+ --cc-sc-desc-color: #{map.get($config, desc-color)};
167
+ --cc-sc-desc-line-height: #{map.get($config, desc-line-height)};
168
+ --cc-sc-value-desc-gap: #{map.get($config, value-desc-gap)};
169
+
170
+ --cc-sc-meta-pill-bg: #{map.get($config, meta-pill-bg)};
171
+ --cc-sc-meta-pill-color: #{map.get($config, meta-pill-color)};
172
+ --cc-sc-meta-pill-padding: #{map.get($config, meta-pill-padding)};
173
+ --cc-sc-meta-pill-radius: #{map.get($config, meta-pill-radius)};
174
+ --cc-sc-meta-pill-font-size: #{map.get($config, meta-pill-font-size)};
175
+ --cc-sc-meta-pill-font-weight: #{map.get($config, meta-pill-font-weight)};
176
176
  }