@unifiedsoftware/styles 2.0.0-alpha.3 → 2.0.0-alpha.5

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 (16) hide show
  1. package/css/fci.css +308 -118
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1296 -192
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +103 -6
  7. package/scss/components/_accordion.scss +19 -20
  8. package/scss/components/_card.scss +6 -5
  9. package/scss/components/_descriptions.scss +35 -10
  10. package/scss/themes/fci/_tokens.scss +10 -0
  11. package/scss/themes/fci/components/_accordion.scss +81 -131
  12. package/scss/themes/fci/components/_button.scss +2 -12
  13. package/scss/themes/fci/components/_card.scss +31 -31
  14. package/scss/themes/fci/components/_chip.scss +56 -19
  15. package/scss/themes/fci/components/_descriptions.scss +47 -0
  16. package/scss/themes/fci/components/_index.scss +1 -0
package/scss/components/_descriptions.scss CHANGED
@@ -1,24 +1,49 @@
1
1
  @use '../variables' as *;
2
2
 
3
3
  .#{$prefix}descriptions {
4
+ display: grid;
5
+ grid-template-columns: repeat(12, minmax(0, 1fr));
6
+ row-gap: var(--#{$prefix}descriptions-gap-x);
7
+ column-gap: var(--#{$prefix}descriptions-gap-y);
4
8
  }
5
9
 
6
10
  .#{$prefix}description {
7
- &__name {
8
- font-size: 14px;
9
- color: var(--#{$prefix}secondary-action-color);
10
- overflow: hidden;
11
- text-overflow: ellipsis;
12
- white-space: nowrap;
13
- display: block;
11
+ display: grid;
12
+ grid-template-columns: repeat(12, minmax(0, 1fr));
13
+ row-gap: var(--#{$prefix}description-gap-x);
14
+ column-gap: var(--#{$prefix}description-gap-y);
15
+
16
+ .#{$prefix}descriptions--row &__label {
17
+ grid-column: span 6 / span 6;
18
+ }
19
+
20
+ .#{$prefix}descriptions--row &__content {
21
+ grid-column: span 6 / span 6;
14
22
  }
15
23
 
16
- &__value {
17
- font-size: 14px;
18
- font-weight: 500;
24
+ .#{$prefix}descriptions--col &__label,
25
+ .#{$prefix}descriptions--col &__content {
26
+ grid-column: span 12 / span 12;
27
+ }
28
+
29
+ &__label {
30
+ font-size: var(--#{$prefix}description-label-font-size);
31
+ font-weight: var(--#{$prefix}description-text-font-weight);
32
+ color: var(--#{$prefix}description-label-color);
33
+ opacity: var(--#{$prefix}description-label-opacity);
34
+ }
35
+
36
+ &__content {
19
37
  overflow: hidden;
20
38
  text-overflow: ellipsis;
21
39
  white-space: nowrap;
22
40
  display: block;
23
41
  }
42
+
43
+ &__text {
44
+ font-size: var(--#{$prefix}description-text-font-size);
45
+ font-weight: var(--#{$prefix}description-text-font-weight);
46
+ color: var(--#{$prefix}description-text-color);
47
+ opacity: var(--#{$prefix}description-text-opacity);
48
+ }
24
49
  }
package/scss/themes/fci/_tokens.scss CHANGED
@@ -30,6 +30,16 @@
30
30
  --#{$prefix}font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
31
31
  Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
32
32
 
33
+ --#{$prefix}fs-xs: 0.75rem;
34
+ --#{$prefix}fs-sm: 0.875rem;
35
+ --#{$prefix}fs-md: 1rem;
36
+ --#{$prefix}fs-lg: 1.125rem;
37
+ --#{$prefix}fs-xl: 1.25rem;
38
+ --#{$prefix}fs-2xl: 1.5rem;
39
+ --#{$prefix}fs-3xl: 1.75rem;
40
+ --#{$prefix}fs-4xl: 2rem;
41
+ --#{$prefix}fs-5xl: 2.5rem;
42
+
33
43
  --#{$prefix}shadow-none: none;
34
44
  --#{$prefix}shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
35
45
  --#{$prefix}shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
package/scss/themes/fci/components/_accordion.scss CHANGED
@@ -1,20 +1,39 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
+ $colors-map: (primary, secondary, success, info, warning, danger);
4
+
3
5
  .#{$prefix}theme-fci {
4
6
  .#{$prefix}accordion {
5
- --#{$prefix}accordion-border-radius: 10px;
6
-
7
- --#{$prefix}accordion-border-width: 1px;
8
- --#{$prefix}accordion-border-style: solid;
9
- --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
10
-
11
7
  --#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
12
8
 
13
9
  --#{$prefix}accordion-header-title-font-weight: 500;
14
10
  --#{$prefix}accordion-header-subtitle-font-weight: 400;
11
+
12
+ --#{$prefix}accordion-body-color: inherit;
13
+
14
+ & > .#{$prefix}outline {
15
+ --#{$prefix}outline-border-width: 0px;
16
+ --#{$prefix}outline-z-index: 1;
17
+ }
15
18
  }
16
19
 
17
- .#{$prefix}accordion--xs .#{$prefix}accordion-header {
20
+ .#{$prefix}accordion--bordered:not(.#{$prefix}accordion--splitted) {
21
+ --#{$prefix}accordion-border-radius: 10px;
22
+
23
+ & > .#{$prefix}outline {
24
+ --#{$prefix}outline-border-width: 1px;
25
+ }
26
+ }
27
+
28
+ .#{$prefix}accordion--bordered.#{$prefix}accordion--splitted .#{$prefix}accordion-item {
29
+ --#{$prefix}accordion-border-radius: 10px;
30
+
31
+ & > .#{$prefix}outline {
32
+ --#{$prefix}outline-border-width: 1px;
33
+ }
34
+ }
35
+
36
+ .#{$prefix}accordion--xs {
18
37
  --#{$prefix}accordion-header-min-height: 36px;
19
38
  --#{$prefix}accordion-header-padding-y: 0.685rem;
20
39
  --#{$prefix}accordion-header-padding-x: 1rem;
@@ -27,16 +46,14 @@
27
46
 
28
47
  --#{$prefix}accordion-header-subtitle-font-size: 11px;
29
48
  --#{$prefix}accordion-header-title-line-height: 14px;
30
- }
31
49
 
32
- .#{$prefix}accordion--xs .#{$prefix}accordion-body {
33
50
  --#{$prefix}accordion-body-padding-y: 1rem;
34
51
  --#{$prefix}accordion-body-padding-x: 1rem;
35
52
  --#{$prefix}accordion-body-font-size: 0.75rem;
36
53
  --#{$prefix}accordion-body-line-height: 18px;
37
54
  }
38
55
 
39
- .#{$prefix}accordion--sm .#{$prefix}accordion-header {
56
+ .#{$prefix}accordion--sm {
40
57
  --#{$prefix}accordion-header-min-height: 48px;
41
58
  --#{$prefix}accordion-header-padding-y: 0.625rem;
42
59
  --#{$prefix}accordion-header-padding-x: 1rem;
@@ -48,9 +65,7 @@
48
65
 
49
66
  --#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
50
67
  --#{$prefix}accordion-header-subtitle-line-height: 16px;
51
- }
52
68
 
53
- .#{$prefix}accordion--sm .#{$prefix}accordion-body {
54
69
  --#{$prefix}accordion-body-padding-y: 1.25rem;
55
70
  --#{$prefix}accordion-body-padding-x: 1rem;
56
71
  --#{$prefix}accordion-body-font-size: 0.875rem;
@@ -59,9 +74,7 @@
59
74
 
60
75
  .#{$prefix}accordion--md {
61
76
  --#{$prefix}accordion-splitted-gap: 0.5rem;
62
- }
63
77
 
64
- .#{$prefix}accordion--md .#{$prefix}accordion-header {
65
78
  --#{$prefix}accordion-header-min-height: 56px;
66
79
  --#{$prefix}accordion-header-padding-y: 0.625rem;
67
80
  --#{$prefix}accordion-header-padding-x: 1rem;
@@ -75,20 +88,18 @@
75
88
 
76
89
  --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
77
90
  --#{$prefix}accordion-header-subtitle-line-height: 18px;
78
- }
79
-
80
- .#{$prefix}accordion--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
81
- --#{$prefix}icon-font-size-default: 24px;
82
- }
83
91
 
84
- .#{$prefix}accordion--md .#{$prefix}accordion-body {
85
92
  --#{$prefix}accordion-body-padding-y: 1.5rem;
86
93
  --#{$prefix}accordion-body-padding-x: 1rem;
87
94
  --#{$prefix}accordion-body-font-size: 1rem;
88
95
  --#{$prefix}accordion-body-line-height: 24px;
89
96
  }
90
97
 
91
- .#{$prefix}accordion--lg .#{$prefix}accordion-header {
98
+ .#{$prefix}accordion--md .#{$prefix}accordion-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
99
+ --#{$prefix}icon-font-size-default: 24px;
100
+ }
101
+
102
+ .#{$prefix}accordion--lg {
92
103
  --#{$prefix}accordion-header-min-height: 64px;
93
104
  --#{$prefix}accordion-header-padding-y: 0.625rem;
94
105
  --#{$prefix}accordion-header-padding-x: 1rem;
@@ -101,16 +112,14 @@
101
112
 
102
113
  --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
103
114
  --#{$prefix}accordion-header-subtitle-line-height: 18px;
104
- }
105
115
 
106
- .#{$prefix}accordion--lg .#{$prefix}accordion-body {
107
116
  --#{$prefix}accordion-body-padding-y: 1.5rem;
108
117
  --#{$prefix}accordion-body-padding-x: 1rem;
109
118
  --#{$prefix}accordion-body-font-size: 1rem;
110
119
  --#{$prefix}accordion-body-line-height: 24px;
111
120
  }
112
121
 
113
- .#{$prefix}accordion--xl .#{$prefix}accordion-header {
122
+ .#{$prefix}accordion--xl {
114
123
  --#{$prefix}accordion-header-min-height: 3.5rem;
115
124
  --#{$prefix}accordion-header-padding-y: 0.625rem;
116
125
  --#{$prefix}accordion-header-padding-x: 1rem;
@@ -123,152 +132,93 @@
123
132
 
124
133
  --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
125
134
  --#{$prefix}accordion-header-subtitle-line-height: 18px;
126
- }
127
135
 
128
- .#{$prefix}accordion--xl .#{$prefix}accordion-body {
129
136
  --#{$prefix}accordion-body-padding-y: 1.5rem;
130
137
  --#{$prefix}accordion-body-padding-x: 1rem;
131
138
  --#{$prefix}accordion-body-font-size: 1rem;
132
139
  --#{$prefix}accordion-body-line-height: 24px;
133
140
  }
134
141
 
135
- .#{$prefix}accordion-item--selected {
136
- --#{$prefix}accordion-header-title-font-weight: 700;
137
- }
138
-
139
- .#{$prefix}accordion--plain.#{$prefix}accordion--primary .#{$prefix}accordion-body {
140
- --#{$prefix}accordion-body-color: var(--#{$prefix}primary-color);
141
-
142
- & > .#{$prefix}surface {
143
- --#{$prefix}surface-color: var(--#{$prefix}white-color);
142
+ .#{$prefix}accordion-item {
143
+ & > .#{$prefix}outline {
144
+ --#{$prefix}outline-border-width: 0px;
145
+ --#{$prefix}outline-z-index: 1;
144
146
  }
145
147
  }
146
148
 
147
- .#{$prefix}accordion-header--plain.#{$prefix}accordion-header--primary {
148
- --#{$prefix}accordion-header-color: var(--#{$prefix}primary-color);
149
-
150
- & > .#{$prefix}surface {
151
- --#{$prefix}surface-color: var(--#{$prefix}white-color);
152
- }
153
- }
154
-
155
- .#{$prefix}accordion--plain.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
156
- --#{$prefix}accordion-body-color: inherit;
157
-
158
- & > .#{$prefix}surface {
159
- --#{$prefix}surface-color: var(--#{$prefix}white-color);
160
- }
149
+ .#{$prefix}accordion-item--selected {
150
+ --#{$prefix}accordion-header-title-font-weight: 700;
161
151
  }
162
152
 
163
- .#{$prefix}accordion-header--plain.#{$prefix}accordion-header--secondary {
164
- --#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
165
-
153
+ .#{$prefix}accordion-body {
166
154
  & > .#{$prefix}surface {
167
155
  --#{$prefix}surface-color: var(--#{$prefix}white-color);
168
156
  }
169
157
  }
170
158
 
171
- .#{$prefix}accordion--flat.#{$prefix}accordion--primary .#{$prefix}accordion-body {
172
- --#{$prefix}accordion-body-color: var(--#{$prefix}primary-color);
173
-
174
- & > .#{$prefix}surface {
175
- --#{$prefix}surface-color: var(--#{$prefix}primary-color);
176
- --#{$prefix}surface-opacity: 0.16;
159
+ @each $color in $colors-map {
160
+ .#{$prefix}accordion--#{$color} {
161
+ & > .#{$prefix}outline {
162
+ --#{$prefix}outline-border-color: var(--#{$prefix}#{$color}-color);
163
+ --#{$prefix}outline-opacity: 0.2;
164
+ }
177
165
  }
178
- }
179
-
180
- .#{$prefix}accordion-header--flat.#{$prefix}accordion-header--primary {
181
- --#{$prefix}accordion-header-color: var(--#{$prefix}primary-color);
182
166
 
183
- & > .#{$prefix}surface {
184
- --#{$prefix}surface-color: var(--#{$prefix}primary-color);
185
- --#{$prefix}surface-opacity: 0.16;
167
+ .#{$prefix}accordion-item--#{$color} {
168
+ & > .#{$prefix}outline {
169
+ --#{$prefix}outline-border-color: var(--#{$prefix}#{$color}-color);
170
+ --#{$prefix}outline-opacity: 0.2;
171
+ }
186
172
  }
187
173
  }
188
174
 
189
- .#{$prefix}accordion--flat.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
190
- --#{$prefix}accordion-body-color: inherit;
191
-
192
- & > .#{$prefix}surface {
193
- --#{$prefix}surface-color: var(--#{$prefix}secondary-color);
194
- --#{$prefix}surface-opacity: 0.08;
175
+ @each $color in $colors-map {
176
+ .#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} {
177
+ --#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
195
178
  }
196
- }
197
-
198
- .#{$prefix}accordion-header--flat.#{$prefix}accordion-header--secondary {
199
- --#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
200
179
 
201
- & > .#{$prefix}surface {
202
- --#{$prefix}surface-color: var(--#{$prefix}secondary-color);
203
- --#{$prefix}surface-opacity: 0.08;
180
+ .#{$prefix}accordion-item--plain.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
181
+ & > .#{$prefix}surface {
182
+ --#{$prefix}surface-color: var(--#{$prefix}white-color);
183
+ }
204
184
  }
205
185
  }
206
186
 
207
- .#{$prefix}accordion--tonal.#{$prefix}accordion--primary .#{$prefix}accordion-body {
208
- --#{$prefix}accordion-body-color: inherit;
209
-
210
- & > .#{$prefix}surface {
211
- --#{$prefix}surface-color: var(--#{$prefix}primary-color);
212
- --#{$prefix}surface-opacity: 0.16;
187
+ @each $color in $colors-map {
188
+ .#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} {
189
+ --#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
213
190
  }
214
- }
215
-
216
- .#{$prefix}accordion-header--tonal.#{$prefix}accordion-header--primary {
217
- --#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
218
191
 
219
- & > .#{$prefix}surface {
220
- --#{$prefix}surface-color: var(--#{$prefix}primary-color);
221
- --#{$prefix}surface-opacity: 0.16;
222
- }
223
- }
224
-
225
- .#{$prefix}accordion--tonal.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
226
- --#{$prefix}accordion-body-color: inherit;
227
-
228
- & > .#{$prefix}surface {
229
- --#{$prefix}surface-color: var(--#{$prefix}secondary-color);
230
- --#{$prefix}surface-opacity: 0.08;
231
- }
232
- }
233
-
234
- .#{$prefix}accordion-header--tonal.#{$prefix}accordion-header--secondary {
235
- --#{$prefix}accordion-header-color: var(--#{$prefix}secondary-color);
236
-
237
- & > .#{$prefix}surface {
238
- --#{$prefix}surface-color: var(--#{$prefix}secondary-color);
239
- --#{$prefix}surface-opacity: 0.08;
192
+ .#{$prefix}accordion-item--filled.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
193
+ & > .#{$prefix}surface {
194
+ --#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
195
+ }
240
196
  }
241
197
  }
242
198
 
243
- .#{$prefix}accordion--filled.#{$prefix}accordion--primary .#{$prefix}accordion-body {
244
- --#{$prefix}accordion-body-color: #fff;
245
-
246
- & > .#{$prefix}surface {
247
- --#{$prefix}surface-color: var(--#{$prefix}primary-color);
199
+ @each $color in $colors-map {
200
+ .#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} {
201
+ --#{$prefix}accordion-header-color: var(--#{$prefix}#{$color}-color);
248
202
  }
249
- }
250
-
251
- .#{$prefix}accordion-header--filled.#{$prefix}accordion-header--primary {
252
- --#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
253
203
 
254
- & > .#{$prefix}surface {
255
- --#{$prefix}surface-color: var(--#{$prefix}primary-color);
204
+ .#{$prefix}accordion-item--flat.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
205
+ & > .#{$prefix}surface {
206
+ --#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
207
+ --#{$prefix}surface-opacity: 0.08;
208
+ }
256
209
  }
257
210
  }
258
211
 
259
- .#{$prefix}accordion--filled.#{$prefix}accordion--secondary .#{$prefix}accordion-body {
260
- --#{$prefix}accordion-body-color: #fff;
261
-
262
- & > .#{$prefix}surface {
263
- --#{$prefix}surface-color: var(--#{$prefix}secondary-color);
212
+ @each $color in $colors-map {
213
+ .#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} {
214
+ --#{$prefix}accordion-header-color: var(--#{$prefix}black-color);
264
215
  }
265
- }
266
216
 
267
- .#{$prefix}accordion-header--filled.#{$prefix}accordion-header--secondary {
268
- --#{$prefix}accordion-header-color: var(--#{$prefix}white-color);
269
-
270
- & > .#{$prefix}surface {
271
- --#{$prefix}surface-color: var(--#{$prefix}secondary-color);
217
+ .#{$prefix}accordion-item--tonal.#{$prefix}accordion-item--#{$color} .#{$prefix}accordion-header {
218
+ & > .#{$prefix}surface {
219
+ --#{$prefix}surface-color: var(--#{$prefix}#{$color}-color);
220
+ --#{$prefix}surface-opacity: 0.08;
221
+ }
272
222
  }
273
223
  }
274
224
  }
package/scss/themes/fci/components/_button.scss CHANGED
@@ -8,16 +8,6 @@ html {
8
8
  -webkit-font-smoothing: antialiased;
9
9
  }
10
10
 
11
- // $colors-map: (
12
- // inherit: inherit,
13
- // primary: var(--#{$prefix}primary-color),
14
- // secondary: var(--#{$prefix}secondary-color),
15
- // success: var(--#{$prefix}success-color),
16
- // info: var(--#{$prefix}info-color),
17
- // warning: var(--#{$prefix}warning-color),
18
- // danger: var(--#{$prefix}danger-color),
19
- // );
20
-
21
11
  .#{$prefix}theme-fci {
22
12
  .#{$prefix}button {
23
13
  --#{$prefix}button-font-weight: 500;
@@ -91,7 +81,7 @@ html {
91
81
  }
92
82
  }
93
83
 
94
- &--xxl {
84
+ &--2xl {
95
85
  --#{$prefix}button-height: 56px;
96
86
  --#{$prefix}button-padding-y: 0;
97
87
  --#{$prefix}button-padding-x: 1.75rem;
@@ -207,7 +197,7 @@ html {
207
197
  }
208
198
  }
209
199
 
210
- .#{$prefix}button--xxl.#{$prefix}button--icon-only {
200
+ .#{$prefix}button--2xl.#{$prefix}button--icon-only {
211
201
  .#{$prefix}icon {
212
202
  --#{$prefix}icon-font-size: 1.875rem;
213
203
  }
package/scss/themes/fci/components/_card.scss CHANGED
@@ -46,7 +46,7 @@
46
46
  }
47
47
 
48
48
  .#{$prefix}card--xs {
49
- --#{$prefix}card-padding-y: 0.5rem;
49
+ --#{$prefix}card-padding-y: 0.375rem;
50
50
  --#{$prefix}card-padding-x: 0.75rem;
51
51
  --#{$prefix}card-gap: 0.5rem;
52
52
 
@@ -54,11 +54,11 @@
54
54
  --#{$prefix}card-header-gap: 0.5rem;
55
55
  --#{$prefix}card-header-content-gap: 0.25rem;
56
56
 
57
- --#{$prefix}card-header-title-font-size: 12px;
57
+ --#{$prefix}card-header-title-font-size: 11px;
58
58
  --#{$prefix}card-header-title-font-weight: 500;
59
59
  --#{$prefix}card-header-title-line-height: 14px;
60
60
 
61
- --#{$prefix}card-header-subtitle-font-size: 11px;
61
+ --#{$prefix}card-header-subtitle-font-size: 10px;
62
62
  --#{$prefix}card-header-subtitle-font-weight: 500;
63
63
  --#{$prefix}card-header-subtitle-line-height: 14px;
64
64
 
@@ -74,7 +74,7 @@
74
74
  }
75
75
 
76
76
  .#{$prefix}card--sm {
77
- --#{$prefix}card-padding-y: 0.5rem;
77
+ --#{$prefix}card-padding-y: 0.375rem;
78
78
  --#{$prefix}card-padding-x: 1rem;
79
79
  --#{$prefix}card-gap: 0.5rem;
80
80
 
@@ -85,11 +85,11 @@
85
85
  --#{$prefix}card-header-gap: 0.75rem;
86
86
  --#{$prefix}card-header-content-gap: 0.5rem;
87
87
 
88
- --#{$prefix}card-header-title-font-size: 13px;
88
+ --#{$prefix}card-header-title-font-size: 12px;
89
89
  --#{$prefix}card-header-title-font-weight: 500;
90
90
  --#{$prefix}card-header-title-line-height: 16px;
91
91
 
92
- --#{$prefix}card-header-subtitle-font-size: 12px;
92
+ --#{$prefix}card-header-subtitle-font-size: 11px;
93
93
  --#{$prefix}card-header-subtitle-font-weight: 500;
94
94
  --#{$prefix}card-header-subtitle-line-height: 16px;
95
95
 
@@ -105,21 +105,21 @@
105
105
  }
106
106
 
107
107
  .#{$prefix}card--md {
108
- --#{$prefix}card-padding-y: 0.75rem;
109
- --#{$prefix}card-padding-x: 1.5rem;
110
- --#{$prefix}card-gap: 0.75rem;
108
+ --#{$prefix}card-padding-y: 0.5rem;
109
+ --#{$prefix}card-padding-x: 1rem;
110
+ --#{$prefix}card-gap: 0.5rem;
111
111
 
112
112
  --#{$prefix}card-title-padding-y: 1rem 0.5rem;
113
113
  --#{$prefix}card-title-font-size: 1.25rem;
114
114
 
115
115
  --#{$prefix}card-header-min-height: 2rem;
116
- --#{$prefix}card-header-gap: 1rem;
116
+ --#{$prefix}card-header-gap: 0.75rem;
117
117
  --#{$prefix}card-header-content-gap: 0.5rem;
118
118
 
119
- --#{$prefix}card-header-title-font-size: 0.875rem;
119
+ --#{$prefix}card-header-title-font-size: 13px;
120
120
  --#{$prefix}card-header-title-line-height: 16px;
121
121
 
122
- --#{$prefix}card-header-subtitle-font-size: 0.8125rem;
122
+ --#{$prefix}card-header-subtitle-font-size: 14px;
123
123
  --#{$prefix}card-header-subtitle-line-height: 16px;
124
124
 
125
125
  --#{$prefix}card-body-font-size: 0.875rem;
@@ -134,9 +134,9 @@
134
134
  }
135
135
 
136
136
  .#{$prefix}card--lg {
137
- --#{$prefix}card-padding-y: 1.125rem;
138
- --#{$prefix}card-padding-x: 1.75rem;
139
- --#{$prefix}card-gap: 1.125rem;
137
+ --#{$prefix}card-padding-y: 0.625rem;
138
+ --#{$prefix}card-padding-x: 1.25rem;
139
+ --#{$prefix}card-gap: 0.75rem;
140
140
 
141
141
  --#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
142
142
  --#{$prefix}card-title-font-size: 1.5rem;
@@ -145,10 +145,10 @@
145
145
  --#{$prefix}card-header-gap: 1rem;
146
146
  --#{$prefix}card-header-content-gap: 0.75rem;
147
147
 
148
- --#{$prefix}card-header-title-font-size: 1rem;
148
+ --#{$prefix}card-header-title-font-size: 14px;
149
149
  --#{$prefix}card-header-title-line-height: 18px;
150
150
 
151
- --#{$prefix}card-header-subtitle-font-size: 0.875rem;
151
+ --#{$prefix}card-header-subtitle-font-size: 13px;
152
152
  --#{$prefix}card-header-subtitle-line-height: 18px;
153
153
 
154
154
  --#{$prefix}card-body-font-size: 1rem;
@@ -163,18 +163,18 @@
163
163
  }
164
164
 
165
165
  .#{$prefix}card--xl {
166
- --#{$prefix}card-padding-y: 1.25rem;
167
- --#{$prefix}card-padding-x: 2rem;
168
- --#{$prefix}card-gap: 1.25rem;
166
+ --#{$prefix}card-padding-y: 0.75rem;
167
+ --#{$prefix}card-padding-x: 1.5rem;
168
+ --#{$prefix}card-gap: 1rem;
169
169
 
170
170
  --#{$prefix}card-header-min-height: 2.5rem;
171
171
  --#{$prefix}card-header-gap: 1rem;
172
172
  --#{$prefix}card-header-content-gap: 0.875rem;
173
173
 
174
- --#{$prefix}card-header-title-font-size: 1.125rem;
174
+ --#{$prefix}card-header-title-font-size: 16px;
175
175
  --#{$prefix}card-header-title-line-height: 20px;
176
176
 
177
- --#{$prefix}card-header-subtitle-font-size: 1rem;
177
+ --#{$prefix}card-header-subtitle-font-size: 15px;
178
178
  --#{$prefix}card-header-subtitle-line-height: 20px;
179
179
 
180
180
  --#{$prefix}card-body-font-size: 1.125rem;
@@ -188,19 +188,19 @@
188
188
  --#{$prefix}icon-font-size-default: 36px;
189
189
  }
190
190
 
191
- .#{$prefix}card--xxl {
192
- --#{$prefix}card-padding-y: 1.5rem;
193
- --#{$prefix}card-padding-x: 2rem;
194
- --#{$prefix}card-gap: 1.5rem;
191
+ .#{$prefix}card--2xl {
192
+ --#{$prefix}card-padding-y: 0.75rem;
193
+ --#{$prefix}card-padding-x: 1.5rem;
194
+ --#{$prefix}card-gap: 1rem;
195
195
 
196
196
  --#{$prefix}card-header-min-height: 3rem;
197
- --#{$prefix}card-header-gap: 1.5em;
197
+ --#{$prefix}card-header-gap: 1rem;
198
198
  --#{$prefix}card-header-content-gap: 1rem;
199
199
 
200
- --#{$prefix}card-header-title-font-size: 1.25rem;
200
+ --#{$prefix}card-header-title-font-size: 18px;
201
201
  --#{$prefix}card-header-title-line-height: 24px;
202
202
 
203
- --#{$prefix}card-header-subtitle-font-size: 1.125rem;
203
+ --#{$prefix}card-header-subtitle-font-size: 16px;
204
204
  --#{$prefix}card-header-subtitle-line-height: 24px;
205
205
 
206
206
  --#{$prefix}card-body-font-size: 1.25rem;
@@ -210,7 +210,7 @@
210
210
  --#{$prefix}card-footer-gap: 1rem;
211
211
  }
212
212
 
213
- .#{$prefix}card--xxl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
214
- --#{$prefix}icon-font-size-default: 48px;
213
+ .#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
214
+ --#{$prefix}icon-font-size-default: 40px;
215
215
  }
216
216
  }