@unifiedsoftware/styles 2.0.0-alpha.1 → 2.0.0-alpha.2

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 (13) hide show
  1. package/css/fci.css +251 -115
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +84 -23
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +2 -8
  7. package/scss/components/_card.scss +94 -21
  8. package/scss/components/_input.scss +3 -3
  9. package/scss/components/_tabs.scss +1 -1
  10. package/scss/themes/fci/components/_button.scss +85 -20
  11. package/scss/themes/fci/components/_card.scss +139 -94
  12. package/scss/themes/fci/components/_icon.scss +1 -1
  13. package/scss/themes/fci/components/_tabs.scss +99 -1
package/scss/themes/fci/components/_button.scss CHANGED
@@ -17,7 +17,7 @@ $colors-map: (
17
17
 
18
18
  .#{$prefix}theme-fci {
19
19
  .#{$prefix}button {
20
- --#{$prefix}button-font-weight: 500;
20
+ --#{$prefix}button-font-weight: 400;
21
21
  --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
22
22
 
23
23
  --#{$prefix}button-divider-width: 1px;
@@ -26,31 +26,31 @@ $colors-map: (
26
26
  &--xs {
27
27
  --#{$prefix}button-height: 24px;
28
28
  --#{$prefix}button-padding-y: 0;
29
- --#{$prefix}button-padding-x: 0.625rem;
29
+ --#{$prefix}button-padding-x: 0.75rem;
30
30
  --#{$prefix}button-font-size: 0.75rem;
31
31
  --#{$prefix}button-border-radius: 6px;
32
32
  --#{$prefix}button-gap: 0.25rem;
33
33
 
34
34
  .#{$prefix}icon {
35
- --#{$prefix}icon-font-size: 0.875rem;
35
+ --#{$prefix}icon-font-size: 0.75rem;
36
36
  }
37
37
  }
38
38
 
39
39
  &--sm {
40
40
  --#{$prefix}button-height: 28px;
41
41
  --#{$prefix}button-padding-y: 0;
42
- --#{$prefix}button-padding-x: 0.75rem;
42
+ --#{$prefix}button-padding-x: 0.875rem;
43
43
  --#{$prefix}button-font-size: 0.75rem;
44
- --#{$prefix}button-border-radius: 6px;
44
+ --#{$prefix}button-border-radius: 8px;
45
45
  --#{$prefix}button-gap: 0.25rem;
46
46
 
47
47
  .#{$prefix}icon {
48
- --#{$prefix}icon-font-size: 1rem;
48
+ --#{$prefix}icon-font-size: 0.875rem;
49
49
  }
50
50
  }
51
51
 
52
52
  &--md {
53
- --#{$prefix}button-height: 36px;
53
+ --#{$prefix}button-height: 32px;
54
54
  --#{$prefix}button-padding-y: 0;
55
55
  --#{$prefix}button-padding-x: 1rem;
56
56
  --#{$prefix}button-font-size: 0.875rem;
@@ -58,16 +58,29 @@ $colors-map: (
58
58
  --#{$prefix}button-gap: 0.375rem;
59
59
 
60
60
  .#{$prefix}icon {
61
- --#{$prefix}icon-font-size: 1.125rem;
61
+ --#{$prefix}icon-font-size: 1rem;
62
62
  }
63
63
  }
64
64
 
65
65
  &--lg {
66
- --#{$prefix}button-height: 36px;
66
+ --#{$prefix}button-height: 40px;
67
67
  --#{$prefix}button-padding-y: 0;
68
- --#{$prefix}button-padding-x: 1rem;
68
+ --#{$prefix}button-padding-x: 1.25rem;
69
+ --#{$prefix}button-font-size: 0.875rem;
70
+ --#{$prefix}button-border-radius: 10px;
71
+ --#{$prefix}button-gap: 0.5rem;
72
+
73
+ .#{$prefix}icon {
74
+ --#{$prefix}icon-font-size: 1.125rem;
75
+ }
76
+ }
77
+
78
+ &--xl {
79
+ --#{$prefix}button-height: 48px;
80
+ --#{$prefix}button-padding-y: 0;
81
+ --#{$prefix}button-padding-x: 1.25rem;
69
82
  --#{$prefix}button-font-size: 1rem;
70
- --#{$prefix}button-border-radius: 6px;
83
+ --#{$prefix}button-border-radius: 10px;
71
84
  --#{$prefix}button-gap: 0.5rem;
72
85
 
73
86
  .#{$prefix}icon {
@@ -75,13 +88,13 @@ $colors-map: (
75
88
  }
76
89
  }
77
90
 
78
- &--xl {
79
- --#{$prefix}button-height: 40px;
91
+ &--xxl {
92
+ --#{$prefix}button-height: 56px;
80
93
  --#{$prefix}button-padding-y: 0;
81
- --#{$prefix}button-padding-x: 1.125rem;
94
+ --#{$prefix}button-padding-x: 1.75rem;
82
95
  --#{$prefix}button-font-size: 1.125rem;
83
- --#{$prefix}button-border-radius: 6px;
84
- --#{$prefix}button-gap: 0.5rem;
96
+ --#{$prefix}button-border-radius: 10px;
97
+ --#{$prefix}button-gap: 0.75rem;
85
98
 
86
99
  .#{$prefix}icon {
87
100
  --#{$prefix}icon-font-size: 1.5rem;
@@ -116,14 +129,14 @@ $colors-map: (
116
129
  & > .#{$prefix}overlay {
117
130
  --#{$prefix}overlay-color: inherit;
118
131
  --#{$prefix}overlay-opacity: 0;
119
- --#{$prefix}_hover-overlay-opacity: 0.12;
132
+ --#{$prefix}_hover-overlay-opacity: 0.16;
120
133
  --#{$prefix}_active-overlay-opacity: 0.24;
121
134
  --#{$prefix}_focus-hover-overlay-opacity: 0.12;
122
135
  --#{$prefix}_focus-active-overlay-opacity: 0.24;
123
136
  }
124
137
 
125
138
  & > .#{$prefix}outline {
126
- --#{$prefix}outline-border-width: 2px;
139
+ --#{$prefix}outline-border-width: 1px;
127
140
  --#{$prefix}outline-border-color: currentColor;
128
141
  }
129
142
  }
@@ -131,7 +144,7 @@ $colors-map: (
131
144
  &--flat {
132
145
  & > .#{$prefix}overlay {
133
146
  --#{$prefix}overlay-color: inherit;
134
- --#{$prefix}overlay-opacity: 0.12;
147
+ --#{$prefix}overlay-opacity: 0.16;
135
148
  --#{$prefix}_hover-overlay-opacity: 0.24;
136
149
  --#{$prefix}_active-overlay-opacity: 0.32;
137
150
  --#{$prefix}_focus-hover-overlay-opacity: 0.24;
@@ -148,7 +161,7 @@ $colors-map: (
148
161
  & > .#{$prefix}overlay {
149
162
  --#{$prefix}overlay-color: inherit;
150
163
  --#{$prefix}overlay-opacity: 0;
151
- --#{$prefix}_hover-overlay-opacity: 0.12;
164
+ --#{$prefix}_hover-overlay-opacity: 0.16;
152
165
  --#{$prefix}_active-overlay-opacity: 0.24;
153
166
  --#{$prefix}_focus-hover-overlay-opacity: 0.12;
154
167
  --#{$prefix}_focus-active-overlay-opacity: 0.24;
@@ -161,6 +174,42 @@ $colors-map: (
161
174
  }
162
175
  }
163
176
 
177
+ .#{$prefix}button--xs.#{$prefix}button--icon-only {
178
+ .#{$prefix}icon {
179
+ --#{$prefix}icon-font-size: 0.875rem;
180
+ }
181
+ }
182
+
183
+ .#{$prefix}button--sm.#{$prefix}button--icon-only {
184
+ .#{$prefix}icon {
185
+ --#{$prefix}icon-font-size: 1rem;
186
+ }
187
+ }
188
+
189
+ .#{$prefix}button--md.#{$prefix}button--icon-only {
190
+ .#{$prefix}icon {
191
+ --#{$prefix}icon-font-size: 1.25rem;
192
+ }
193
+ }
194
+
195
+ .#{$prefix}button--lg.#{$prefix}button--icon-only {
196
+ .#{$prefix}icon {
197
+ --#{$prefix}icon-font-size: 1.5rem;
198
+ }
199
+ }
200
+
201
+ .#{$prefix}button--xl.#{$prefix}button--icon-only {
202
+ .#{$prefix}icon {
203
+ --#{$prefix}icon-font-size: 1.75rem;
204
+ }
205
+ }
206
+
207
+ .#{$prefix}button--xxl.#{$prefix}button--icon-only {
208
+ .#{$prefix}icon {
209
+ --#{$prefix}icon-font-size: 1.875rem;
210
+ }
211
+ }
212
+
164
213
  @each $key, $value in $colors-map {
165
214
  .#{$prefix}button--filled.#{$prefix}button--#{$key} {
166
215
  --#{$prefix}button-background: #{$value};
@@ -177,5 +226,21 @@ $colors-map: (
177
226
  .#{$prefix}button--text.#{$prefix}button--#{$key} {
178
227
  --#{$prefix}button-color: #{$value};
179
228
  }
229
+
230
+ @if $key == 'secondary' {
231
+ .#{$prefix}button--filled.#{$prefix}button--#{$key} {
232
+ --#{$prefix}button-color: #{$value};
233
+ --#{$prefix}button-background: transparent;
234
+
235
+ & > .#{$prefix}overlay {
236
+ --#{$prefix}overlay-color: inherit;
237
+ --#{$prefix}overlay-opacity: 0.16;
238
+ --#{$prefix}_hover-overlay-opacity: 0.24;
239
+ --#{$prefix}_active-overlay-opacity: 0.32;
240
+ --#{$prefix}_focus-hover-overlay-opacity: 0.24;
241
+ --#{$prefix}_focus-active-overlay-opacity: 0.32;
242
+ }
243
+ }
244
+ }
180
245
  }
181
246
  }
package/scss/themes/fci/components/_card.scss CHANGED
@@ -2,13 +2,29 @@
2
2
 
3
3
  .#{$prefix}theme-fci {
4
4
  .#{$prefix}card {
5
- --#{$prefix}card-border-width: 0px;
5
+ --#{$prefix}card-border-width: 1px;
6
6
  --#{$prefix}card-border-style: solid;
7
7
  --#{$prefix}card-border-color: var(--#{$prefix}border-color);
8
8
  --#{$prefix}card-border-radius: 10px;
9
9
  --#{$prefix}card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
10
10
  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
11
11
 
12
+ --#{$prefix}card-title-font-weight: 700;
13
+ --#{$prefix}card-subtitle-font-weight: 400;
14
+
15
+ --#{$prefix}card-header-title-font-weight: 500;
16
+ --#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
17
+
18
+ --#{$prefix}card-header-subtitle-font-weight: 400;
19
+ --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
20
+
21
+ --#{$prefix}card-body-color: var(--#{$prefix}body-color);
22
+
23
+ & > .#{$prefix}surface {
24
+ --#{$prefix}surface-color: var(--#{$prefix}white-color);
25
+ --#{$prefix}surface-opacity: 1;
26
+ }
27
+
12
28
  & > .#{$prefix}overlay {
13
29
  --#{$prefix}overlay-color: inherit;
14
30
  --#{$prefix}overlay-opacity: 0;
@@ -27,145 +43,174 @@
27
43
  --#{$prefix}_active-overlay-opacity: 0.16;
28
44
  }
29
45
  }
30
-
31
- &-header {
32
- --#{$prefix}card-header-border-color: var(--#{$prefix}card-border-color);
33
-
34
- --#{$prefix}card-header-title-font-weight: 500;
35
- --#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
36
-
37
- --#{$prefix}card-header-subtitle-font-weight: 400;
38
- --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
39
- }
40
-
41
- &-body {
42
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
43
- }
44
-
45
- &-footer {
46
- --#{$prefix}card-footer-min-height: 48px;
47
- --#{$prefix}card-footer-padding-y: 0.5rem;
48
- --#{$prefix}card-footer-padding-x: 1rem;
49
-
50
- --#{$prefix}card-footer-border-color: rgba(9, 30, 66, 0.14);
51
- }
52
46
  }
53
47
 
54
- .#{$prefix}card--xs .#{$prefix}card-header {
55
- --#{$prefix}card-header-min-height: 36px;
56
- --#{$prefix}card-header-padding-y: 0.685rem;
57
- --#{$prefix}card-header-padding-x: 1rem;
58
- --#{$prefix}card-header-padding-level: 1.25rem;
59
- --#{$prefix}card-header-font-size: 12px;
60
- --#{$prefix}card-header-gap: 1rem;
48
+ .#{$prefix}card--xs {
49
+ --#{$prefix}card-padding-y: 0.5rem;
50
+ --#{$prefix}card-padding-x: 0.75rem;
51
+ --#{$prefix}card-gap: 0.5rem;
52
+
53
+ --#{$prefix}card-header-min-height: 1.75rem;
54
+ --#{$prefix}card-header-gap: 0.5rem;
55
+ --#{$prefix}card-header-content-gap: 0.25rem;
61
56
 
62
57
  --#{$prefix}card-header-title-font-size: 12px;
63
- --#{$prefix}card-header-title-line-height: 18px;
58
+ --#{$prefix}card-header-title-font-weight: 500;
59
+ --#{$prefix}card-header-title-line-height: 14px;
64
60
 
65
61
  --#{$prefix}card-header-subtitle-font-size: 11px;
62
+ --#{$prefix}card-header-subtitle-font-weight: 500;
66
63
  --#{$prefix}card-header-subtitle-line-height: 14px;
67
- }
68
64
 
69
- .#{$prefix}card--xs .#{$prefix}card-body {
70
- --#{$prefix}card-body-padding-y: 1rem;
71
- --#{$prefix}card-body-padding-x: 1rem;
72
65
  --#{$prefix}card-body-font-size: 0.75rem;
73
66
  --#{$prefix}card-body-line-height: 18px;
74
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
67
+
68
+ --#{$prefix}card-footer-min-height: 1.75rem;
69
+ --#{$prefix}card-footer-gap: 0.5rem;
75
70
  }
76
71
 
77
- .#{$prefix}card--sm .#{$prefix}card-header {
78
- --#{$prefix}card-header-min-height: 48px;
79
- --#{$prefix}card-header-padding-y: 0.625rem;
80
- --#{$prefix}card-header-padding-x: 1rem;
81
- --#{$prefix}card-header-padding-level: 1.25rem;
82
- --#{$prefix}card-header-gap: 1rem;
72
+ .#{$prefix}card--xs .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
73
+ --#{$prefix}icon-font-size-default: 16px;
74
+ }
83
75
 
84
- --#{$prefix}card-header-title-font-size: 0.875rem;
85
- --#{$prefix}card-header-title-line-height: 20px;
76
+ .#{$prefix}card--sm {
77
+ --#{$prefix}card-padding-y: 0.5rem;
78
+ --#{$prefix}card-padding-x: 1rem;
79
+ --#{$prefix}card-gap: 0.5rem;
80
+
81
+ --#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
82
+ --#{$prefix}card-title-font-size: 1.25rem;
83
+
84
+ --#{$prefix}card-header-min-height: 2rem;
85
+ --#{$prefix}card-header-gap: 0.75rem;
86
+ --#{$prefix}card-header-content-gap: 0.5rem;
86
87
 
87
- --#{$prefix}card-header-subtitle-font-size: 0.75rem;
88
+ --#{$prefix}card-header-title-font-size: 13px;
89
+ --#{$prefix}card-header-title-font-weight: 500;
90
+ --#{$prefix}card-header-title-line-height: 16px;
91
+
92
+ --#{$prefix}card-header-subtitle-font-size: 12px;
93
+ --#{$prefix}card-header-subtitle-font-weight: 500;
88
94
  --#{$prefix}card-header-subtitle-line-height: 16px;
89
- }
90
95
 
91
- .#{$prefix}card--sm .#{$prefix}card-body {
92
- --#{$prefix}card-body-padding-y: 1.25rem;
93
- --#{$prefix}card-body-padding-x: 1rem;
94
96
  --#{$prefix}card-body-font-size: 0.875rem;
95
97
  --#{$prefix}card-body-line-height: 20px;
96
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
98
+
99
+ --#{$prefix}card-footer-min-height: 2rem;
100
+ --#{$prefix}card-footer-gap: 0.75rem;
97
101
  }
98
102
 
99
- .#{$prefix}card--md .#{$prefix}card-header {
100
- --#{$prefix}card-header-min-height: 56px;
101
- --#{$prefix}card-header-padding-y: 0.625rem;
102
- --#{$prefix}card-header-padding-x: 1rem;
103
- --#{$prefix}card-header-padding-level: 1.25rem;
104
- --#{$prefix}card-header-font-size: 0.75rem;
103
+ .#{$prefix}card--sm .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
104
+ --#{$prefix}icon-font-size-default: 20px;
105
+ }
106
+
107
+ .#{$prefix}card--md {
108
+ --#{$prefix}card-padding-y: 0.75rem;
109
+ --#{$prefix}card-padding-x: 1.5rem;
110
+ --#{$prefix}card-gap: 0.75rem;
111
+
112
+ --#{$prefix}card-title-padding-y: 1rem 0.5rem;
113
+ --#{$prefix}card-title-font-size: 1.25rem;
114
+
115
+ --#{$prefix}card-header-min-height: 2rem;
105
116
  --#{$prefix}card-header-gap: 1rem;
117
+ --#{$prefix}card-header-content-gap: 0.5rem;
106
118
 
107
- --#{$prefix}card-header-title-font-size: 1rem;
108
- --#{$prefix}card-header-title-line-height: 24px;
119
+ --#{$prefix}card-header-title-font-size: 0.875rem;
120
+ --#{$prefix}card-header-title-line-height: 16px;
109
121
 
110
122
  --#{$prefix}card-header-subtitle-font-size: 0.8125rem;
111
- --#{$prefix}card-header-subtitle-line-height: 18px;
123
+ --#{$prefix}card-header-subtitle-line-height: 16px;
124
+
125
+ --#{$prefix}card-body-font-size: 0.875rem;
126
+ --#{$prefix}card-body-line-height: 24px;
127
+
128
+ --#{$prefix}card-footer-min-height: 2rem;
129
+ --#{$prefix}card-footer-gap: 1rem;
112
130
  }
113
131
 
114
132
  .#{$prefix}card--md .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
115
133
  --#{$prefix}icon-font-size-default: 24px;
116
134
  }
117
135
 
118
- .#{$prefix}card--md .#{$prefix}card-body {
119
- --#{$prefix}card-body-padding-y: 1.5rem;
120
- --#{$prefix}card-body-padding-x: 1rem;
136
+ .#{$prefix}card--lg {
137
+ --#{$prefix}card-padding-y: 1.125rem;
138
+ --#{$prefix}card-padding-x: 1.75rem;
139
+ --#{$prefix}card-gap: 1.125rem;
140
+
141
+ --#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
142
+ --#{$prefix}card-title-font-size: 1.5rem;
143
+
144
+ --#{$prefix}card-header-min-height: 2.25rem;
145
+ --#{$prefix}card-header-gap: 1rem;
146
+ --#{$prefix}card-header-content-gap: 0.75rem;
147
+
148
+ --#{$prefix}card-header-title-font-size: 1rem;
149
+ --#{$prefix}card-header-title-line-height: 18px;
150
+
151
+ --#{$prefix}card-header-subtitle-font-size: 0.875rem;
152
+ --#{$prefix}card-header-subtitle-line-height: 18px;
153
+
121
154
  --#{$prefix}card-body-font-size: 1rem;
122
155
  --#{$prefix}card-body-line-height: 24px;
123
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
156
+
157
+ --#{$prefix}card-footer-min-height: 2.25rem;
158
+ --#{$prefix}card-footer-gap: 1rem;
124
159
  }
125
160
 
126
- .#{$prefix}card--lg .#{$prefix}card-header {
127
- --#{$prefix}card-header-min-height: 64px;
128
- --#{$prefix}card-header-padding-y: 0.625rem;
129
- --#{$prefix}card-header-padding-x: 1rem;
130
- --#{$prefix}card-header-padding-level: 1.25rem;
131
- --#{$prefix}card-header-font-size: 0.75rem;
161
+ .#{$prefix}card--lg .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
162
+ --#{$prefix}icon-font-size-default: 28px;
163
+ }
164
+
165
+ .#{$prefix}card--xl {
166
+ --#{$prefix}card-padding-y: 1.25rem;
167
+ --#{$prefix}card-padding-x: 2rem;
168
+ --#{$prefix}card-gap: 1.25rem;
169
+
170
+ --#{$prefix}card-header-min-height: 2.5rem;
132
171
  --#{$prefix}card-header-gap: 1rem;
172
+ --#{$prefix}card-header-content-gap: 0.875rem;
133
173
 
134
- --#{$prefix}card-header-title-font-size: 0.875rem;
135
- --#{$prefix}card-header-title-line-height: 24px;
174
+ --#{$prefix}card-header-title-font-size: 1.125rem;
175
+ --#{$prefix}card-header-title-line-height: 20px;
136
176
 
137
177
  --#{$prefix}card-header-subtitle-font-size: 1rem;
138
- --#{$prefix}card-header-subtitle-line-height: 18px;
178
+ --#{$prefix}card-header-subtitle-line-height: 20px;
179
+
180
+ --#{$prefix}card-body-font-size: 1.125rem;
181
+ --#{$prefix}card-body-line-height: 28px;
182
+
183
+ --#{$prefix}card-footer-min-height: 2.5rem;
184
+ --#{$prefix}card-footer-gap: 1rem;
139
185
  }
140
186
 
141
- .#{$prefix}card--lg .#{$prefix}card-body {
142
- --#{$prefix}card-body-padding-y: 1.5rem;
143
- --#{$prefix}card-body-padding-x: 1rem;
144
- --#{$prefix}card-body-font-size: 1rem;
145
- --#{$prefix}card-body-line-height: 24px;
146
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
187
+ .#{$prefix}card--xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
188
+ --#{$prefix}icon-font-size-default: 36px;
147
189
  }
148
190
 
149
- .#{$prefix}card--xl .#{$prefix}card-header {
150
- --#{$prefix}card-header-min-height: 72px;
151
- --#{$prefix}card-header-padding-y: 0.625rem;
152
- --#{$prefix}card-header-padding-x: 1rem;
153
- --#{$prefix}card-header-padding-level: 1.25rem;
154
- --#{$prefix}card-header-font-size: 0.75rem;
155
- --#{$prefix}card-header-gap: 1rem;
191
+ .#{$prefix}card--xxl {
192
+ --#{$prefix}card-padding-y: 1.5rem;
193
+ --#{$prefix}card-padding-x: 2rem;
194
+ --#{$prefix}card-gap: 1.5rem;
156
195
 
157
- --#{$prefix}card-header-title-font-size: 1rem;
196
+ --#{$prefix}card-header-min-height: 3rem;
197
+ --#{$prefix}card-header-gap: 1.5em;
198
+ --#{$prefix}card-header-content-gap: 1rem;
199
+
200
+ --#{$prefix}card-header-title-font-size: 1.25rem;
158
201
  --#{$prefix}card-header-title-line-height: 24px;
159
202
 
160
- --#{$prefix}card-header-subtitle-font-size: 0.8125rem;
161
- --#{$prefix}card-header-subtitle-line-height: 18px;
203
+ --#{$prefix}card-header-subtitle-font-size: 1.125rem;
204
+ --#{$prefix}card-header-subtitle-line-height: 24px;
205
+
206
+ --#{$prefix}card-body-font-size: 1.25rem;
207
+ --#{$prefix}card-body-line-height: 36px;
208
+
209
+ --#{$prefix}card-footer-min-height: 2.5rem;
210
+ --#{$prefix}card-footer-gap: 1rem;
162
211
  }
163
212
 
164
- .#{$prefix}card--xl .#{$prefix}card-body {
165
- --#{$prefix}card-body-padding-y: 1.5rem;
166
- --#{$prefix}card-body-padding-x: 1rem;
167
- --#{$prefix}card-body-font-size: 1rem;
168
- --#{$prefix}card-body-line-height: 24px;
169
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
213
+ .#{$prefix}card--xxl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
214
+ --#{$prefix}icon-font-size-default: 48px;
170
215
  }
171
216
  }
package/scss/themes/fci/components/_icon.scss CHANGED
@@ -11,7 +11,7 @@ $colors-map: (
11
11
 
12
12
  .#{$prefix}theme-fci {
13
13
  .#{$prefix}icon {
14
- --#{$prefix}icon-font-size: 1.5rem;
14
+ --#{$prefix}icon-font-size-default: 1.5rem;
15
15
  --#{$prefix}icon-color: inherit;
16
16
 
17
17
  &--xs {
package/scss/themes/fci/components/_tabs.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  .#{$prefix}tabs--underlined .#{$prefix}tab {
11
11
  --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
12
12
  --#{$prefix}tab-indicator-height: 3px;
13
- --#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
13
+ --#{$prefix}tab-indicator-border-radius: 3px;
14
14
  --#{$prefix}tab-border-radius: 0px;
15
15
 
16
16
  & > .#{$prefix}overlay {
@@ -25,6 +25,104 @@
25
25
  }
26
26
  }
27
27
 
28
+ .#{$prefix}tabs--underlined .#{$prefix}tab {
29
+ --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
30
+ --#{$prefix}tab-indicator-height: 3px;
31
+ --#{$prefix}tab-indicator-border-radius: 3px;
32
+ --#{$prefix}tab-border-radius: 0px;
33
+
34
+ & > .#{$prefix}surface {
35
+ --#{$prefix}surface-opacity: 0;
36
+ }
37
+
38
+ & > .#{$prefix}overlay {
39
+ --#{$prefix}overlay-opacity: 0;
40
+ --#{$prefix}overlay-color: inherit;
41
+ --#{$prefix}_hover-overlay-opacity: 0.08;
42
+ --#{$prefix}_active-overlay-opacity: 0.12;
43
+ }
44
+
45
+ &--selected &__indicator {
46
+ --#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
47
+ }
48
+ }
49
+
50
+ .#{$prefix}tabs--underlined .#{$prefix}tab__indicator {
51
+ & > .#{$prefix}surface {
52
+ --#{$prefix}surface-opacity: 0;
53
+ --#{$prefix}surface-transition: none;
54
+ }
55
+
56
+ & > .#{$prefix}overlay {
57
+ --#{$prefix}overlay-opacity: 0;
58
+ --#{$prefix}overlay-transition: none;
59
+ }
60
+ }
61
+
62
+ .#{$prefix}tabs--underlined .#{$prefix}tab--selected .#{$prefix}tab__indicator {
63
+ & > .#{$prefix}surface {
64
+ --#{$prefix}surface-opacity: 1;
65
+ }
66
+
67
+ & > .#{$prefix}overlay {
68
+ --#{$prefix}overlay-opacity: 0;
69
+ }
70
+ }
71
+
72
+ .#{$prefix}tabs--pills {
73
+ --#{$prefix}tab-indicator-color: var(--#{$prefix}primary-action-color);
74
+ --#{$prefix}tab-indicator-height: 3px;
75
+ --#{$prefix}tab-indicator-border-radius: 3px 3px 0px 0px;
76
+ }
77
+
78
+ .#{$prefix}tabs--pills .#{$prefix}tab {
79
+ --#{$prefix}tab-indicator-height: 100%;
80
+ --#{$prefix}tab-indicator-border-radius: 9999px;
81
+ --#{$prefix}tab-border-radius: 9999px;
82
+
83
+ & > .#{$prefix}surface {
84
+ --#{$prefix}surface-opacity: 0;
85
+ }
86
+
87
+ & > .#{$prefix}overlay {
88
+ --#{$prefix}overlay-opacity: 0;
89
+ --#{$prefix}overlay-color: inherit;
90
+ --#{$prefix}_hover-overlay-opacity: 0.08;
91
+ --#{$prefix}_active-overlay-opacity: 0.12;
92
+ }
93
+ }
94
+
95
+ .#{$prefix}tabs--pills .#{$prefix}tab--selected {
96
+ --#{$prefix}tab-color: var(--#{$prefix}primary-action-color);
97
+ }
98
+
99
+ .#{$prefix}tabs--pills .#{$prefix}tab__indicator {
100
+ & > .#{$prefix}surface {
101
+ --#{$prefix}surface-opacity: 0;
102
+ --#{$prefix}surface-transition: none;
103
+ }
104
+
105
+ & > .#{$prefix}overlay {
106
+ --#{$prefix}overlay-opacity: 0;
107
+ --#{$prefix}overlay-color: inherit;
108
+ --#{$prefix}_hover-overlay-opacity: 0.08;
109
+ --#{$prefix}_active-overlay-opacity: 0.12;
110
+ }
111
+ }
112
+
113
+ .#{$prefix}tabs--pills .#{$prefix}tab--selected .#{$prefix}tab__indicator {
114
+ & > .#{$prefix}surface {
115
+ --#{$prefix}surface-opacity: 0.12;
116
+ }
117
+
118
+ & > .#{$prefix}overlay {
119
+ --#{$prefix}overlay-opacity: 0;
120
+ --#{$prefix}overlay-color: inherit;
121
+ --#{$prefix}_hover-overlay-opacity: 0.08;
122
+ --#{$prefix}_active-overlay-opacity: 0.12;
123
+ }
124
+ }
125
+
28
126
  .#{$prefix}tab {
29
127
  --#{$prefix}tab-color: var(--#{$prefix}secondary-action-color);
30
128
  --#{$prefix}tab-padding-y: 0px;