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

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 (15) hide show
  1. package/css/fci.css +290 -110
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +1284 -194
  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 +9 -10
  9. package/scss/components/_descriptions.scss +17 -6
  10. package/scss/themes/fci/_tokens.scss +18 -5
  11. package/scss/themes/fci/components/_accordion.scss +81 -131
  12. package/scss/themes/fci/components/_button.scss +61 -28
  13. package/scss/themes/fci/components/_card.scss +3 -3
  14. package/scss/themes/fci/components/_descriptions.scss +37 -0
  15. package/scss/themes/fci/components/_index.scss +1 -0
package/scss/components/_descriptions.scss CHANGED
@@ -1,24 +1,35 @@
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);
11
+ &__label {
12
+ font-size: var(--#{$prefix}description-label-font-size);
13
+ font-weight: var(--#{$prefix}description-text-font-weight);
14
+ color: var(--#{$prefix}description-label-color);
15
+ opacity: var(--#{$prefix}description-label-opacity);
10
16
  overflow: hidden;
11
17
  text-overflow: ellipsis;
12
18
  white-space: nowrap;
13
19
  display: block;
14
20
  }
15
21
 
16
- &__value {
17
- font-size: 14px;
18
- font-weight: 500;
22
+ &__content {
19
23
  overflow: hidden;
20
24
  text-overflow: ellipsis;
21
25
  white-space: nowrap;
22
26
  display: block;
23
27
  }
28
+
29
+ &__text {
30
+ font-size: var(--#{$prefix}description-text-font-size);
31
+ font-weight: var(--#{$prefix}description-text-font-weight);
32
+ color: var(--#{$prefix}description-text-color);
33
+ opacity: var(--#{$prefix}description-text-opacity);
34
+ }
24
35
  }
package/scss/themes/fci/_tokens.scss CHANGED
@@ -4,11 +4,14 @@
4
4
  --#{$prefix}primary-rgb: 153 0 0;
5
5
 
6
6
  --#{$prefix}primary-color: hsl(0, 100%, 30%);
7
- --#{$prefix}secondary-color: hsl(217, 33%, 17%);
8
- --#{$prefix}success-color: hsl(150, 100%, 30%);
9
- --#{$prefix}info-color: rgb(120, 40, 200);
10
- --#{$prefix}warning-color: rgb(245, 165, 36);
11
- --#{$prefix}danger-color: rgb(243, 18, 18);
7
+ --#{$prefix}secondary-color: #0f172a;
8
+ --#{$prefix}success-color: #16a34a;
9
+ --#{$prefix}success-dark-color: #15803d;
10
+ --#{$prefix}info-color: #7c3aed;
11
+ --#{$prefix}info-dark-color: #5b21b6;
12
+ --#{$prefix}warning-color: #f59e0b;
13
+ --#{$prefix}warning-dark-color: #b45309;
14
+ --#{$prefix}danger-color: #dc2626;
12
15
  --#{$prefix}black-color: #000;
13
16
  --#{$prefix}white-color: #fff;
14
17
 
@@ -27,6 +30,16 @@
27
30
  --#{$prefix}font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
28
31
  Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
29
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
+
30
43
  --#{$prefix}shadow-none: none;
31
44
  --#{$prefix}shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
32
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
@@ -1,23 +1,26 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
+ $colors-map: (primary, secondary, success, info, warning, danger);
4
+
3
5
  html {
4
6
  -webkit-text-size-adjust: 100%;
5
7
  text-rendering: optimizeLegibility;
6
8
  -webkit-font-smoothing: antialiased;
7
9
  }
8
- $colors-map: (
9
- inherit: inherit,
10
- primary: var(--#{$prefix}primary-color),
11
- secondary: var(--#{$prefix}secondary-color),
12
- success: var(--#{$prefix}success-color),
13
- info: var(--#{$prefix}info-color),
14
- warning: var(--#{$prefix}warning-color),
15
- danger: var(--#{$prefix}danger-color),
16
- );
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
+ // );
17
20
 
18
21
  .#{$prefix}theme-fci {
19
22
  .#{$prefix}button {
20
- --#{$prefix}button-font-weight: 400;
23
+ --#{$prefix}button-font-weight: 500;
21
24
  --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
22
25
 
23
26
  --#{$prefix}button-divider-width: 1px;
@@ -41,7 +44,7 @@ $colors-map: (
41
44
  --#{$prefix}button-padding-y: 0;
42
45
  --#{$prefix}button-padding-x: 0.875rem;
43
46
  --#{$prefix}button-font-size: 0.75rem;
44
- --#{$prefix}button-border-radius: 8px;
47
+ --#{$prefix}button-border-radius: 6px;
45
48
  --#{$prefix}button-gap: 0.25rem;
46
49
 
47
50
  .#{$prefix}icon {
@@ -54,7 +57,7 @@ $colors-map: (
54
57
  --#{$prefix}button-padding-y: 0;
55
58
  --#{$prefix}button-padding-x: 1rem;
56
59
  --#{$prefix}button-font-size: 0.875rem;
57
- --#{$prefix}button-border-radius: 8px;
60
+ --#{$prefix}button-border-radius: 6px;
58
61
  --#{$prefix}button-gap: 0.375rem;
59
62
 
60
63
  .#{$prefix}icon {
@@ -67,7 +70,7 @@ $colors-map: (
67
70
  --#{$prefix}button-padding-y: 0;
68
71
  --#{$prefix}button-padding-x: 1.25rem;
69
72
  --#{$prefix}button-font-size: 0.875rem;
70
- --#{$prefix}button-border-radius: 10px;
73
+ --#{$prefix}button-border-radius: 8px;
71
74
  --#{$prefix}button-gap: 0.5rem;
72
75
 
73
76
  .#{$prefix}icon {
@@ -80,7 +83,7 @@ $colors-map: (
80
83
  --#{$prefix}button-padding-y: 0;
81
84
  --#{$prefix}button-padding-x: 1.25rem;
82
85
  --#{$prefix}button-font-size: 1rem;
83
- --#{$prefix}button-border-radius: 10px;
86
+ --#{$prefix}button-border-radius: 8px;
84
87
  --#{$prefix}button-gap: 0.5rem;
85
88
 
86
89
  .#{$prefix}icon {
@@ -88,7 +91,7 @@ $colors-map: (
88
91
  }
89
92
  }
90
93
 
91
- &--xxl {
94
+ &--2xl {
92
95
  --#{$prefix}button-height: 56px;
93
96
  --#{$prefix}button-padding-y: 0;
94
97
  --#{$prefix}button-padding-x: 1.75rem;
@@ -204,32 +207,32 @@ $colors-map: (
204
207
  }
205
208
  }
206
209
 
207
- .#{$prefix}button--xxl.#{$prefix}button--icon-only {
210
+ .#{$prefix}button--2xl.#{$prefix}button--icon-only {
208
211
  .#{$prefix}icon {
209
212
  --#{$prefix}icon-font-size: 1.875rem;
210
213
  }
211
214
  }
212
215
 
213
- @each $key, $value in $colors-map {
214
- .#{$prefix}button--filled.#{$prefix}button--#{$key} {
215
- --#{$prefix}button-background: #{$value};
216
+ @each $color in $colors-map {
217
+ .#{$prefix}button--filled.#{$prefix}button--#{$color} {
218
+ --#{$prefix}button-background: var(--#{$prefix}#{$color}-color);
216
219
  }
217
220
 
218
- .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
219
- --#{$prefix}button-color: #{$value};
221
+ .#{$prefix}button--outlined.#{$prefix}button--#{$color} {
222
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
220
223
  }
221
224
 
222
- .#{$prefix}button--flat.#{$prefix}button--#{$key} {
223
- --#{$prefix}button-color: #{$value};
225
+ .#{$prefix}button--flat.#{$prefix}button--#{$color} {
226
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
224
227
  }
225
228
 
226
- .#{$prefix}button--text.#{$prefix}button--#{$key} {
227
- --#{$prefix}button-color: #{$value};
229
+ .#{$prefix}button--text.#{$prefix}button--#{$color} {
230
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
228
231
  }
229
232
 
230
- @if $key == 'secondary' {
231
- .#{$prefix}button--filled.#{$prefix}button--#{$key} {
232
- --#{$prefix}button-color: #{$value};
233
+ @if $color == 'secondary' {
234
+ .#{$prefix}button--filled.#{$prefix}button--#{$color} {
235
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-color);
233
236
  --#{$prefix}button-background: transparent;
234
237
 
235
238
  & > .#{$prefix}overlay {
@@ -242,5 +245,35 @@ $colors-map: (
242
245
  }
243
246
  }
244
247
  }
248
+
249
+ @if $color == 'success' or $color == 'warning' {
250
+ .#{$prefix}button--outlined.#{$prefix}button--#{$color} {
251
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
252
+
253
+ & > .#{$prefix}overlay {
254
+ --#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
255
+ }
256
+ }
257
+ }
258
+
259
+ @if $color == 'success' or $color == 'info' or $color == 'warning' {
260
+ .#{$prefix}button--flat.#{$prefix}button--#{$color} {
261
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
262
+
263
+ & > .#{$prefix}overlay {
264
+ --#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
265
+ }
266
+ }
267
+ }
268
+
269
+ @if $color == 'success' or $color == 'info' or $color == 'warning' {
270
+ .#{$prefix}button--text.#{$prefix}button--#{$color} {
271
+ --#{$prefix}button-color: var(--#{$prefix}#{$color}-dark-color);
272
+
273
+ & > .#{$prefix}overlay {
274
+ --#{$prefix}overlay-color: var(--#{$prefix}#{$color}-color);
275
+ }
276
+ }
277
+ }
245
278
  }
246
279
  }
package/scss/themes/fci/components/_card.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  --#{$prefix}card-border-width: 1px;
6
6
  --#{$prefix}card-border-style: solid;
7
7
  --#{$prefix}card-border-color: var(--#{$prefix}border-color);
8
- --#{$prefix}card-border-radius: 10px;
8
+ --#{$prefix}card-border-radius: 8px;
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
 
@@ -188,7 +188,7 @@
188
188
  --#{$prefix}icon-font-size-default: 36px;
189
189
  }
190
190
 
191
- .#{$prefix}card--xxl {
191
+ .#{$prefix}card--2xl {
192
192
  --#{$prefix}card-padding-y: 1.5rem;
193
193
  --#{$prefix}card-padding-x: 2rem;
194
194
  --#{$prefix}card-gap: 1.5rem;
@@ -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) {
213
+ .#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
214
214
  --#{$prefix}icon-font-size-default: 48px;
215
215
  }
216
216
  }
package/scss/themes/fci/components/_descriptions.scss ADDED
@@ -0,0 +1,37 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}descriptions {
5
+ --#{$prefix}description-label-color: var(--#{$prefix}secondary-action-color);
6
+
7
+ --#{$prefix}description-text-color: var(--#{$prefix}primary-color);
8
+ --#{$prefix}description-text-font-weight: 500;
9
+ }
10
+
11
+ .#{$prefix}descriptions--sm {
12
+ --#{$prefix}descriptions-gap-y: 0.5rem;
13
+ --#{$prefix}descriptions-gap-x: 0.5rem;
14
+
15
+ --#{$prefix}description-label-font-size: 12px;
16
+
17
+ --#{$prefix}description-text-font-size: 12px;
18
+ }
19
+
20
+ .#{$prefix}descriptions--md {
21
+ --#{$prefix}descriptions-gap-y: 1rem;
22
+ --#{$prefix}descriptions-gap-x: 1rem;
23
+
24
+ --#{$prefix}description-label-font-size: 14px;
25
+
26
+ --#{$prefix}description-text-font-size: 14px;
27
+ }
28
+
29
+ .#{$prefix}descriptions--lg {
30
+ --#{$prefix}descriptions-gap-y: 1.5rem;
31
+ --#{$prefix}descriptions-gap-x: 1.5rem;
32
+
33
+ --#{$prefix}description-label-font-size: 16px;
34
+
35
+ --#{$prefix}description-text-font-size: 16px;
36
+ }
37
+ }
package/scss/themes/fci/components/_index.scss CHANGED
@@ -22,6 +22,7 @@
22
22
  @use 'tabs';
23
23
 
24
24
  @use 'card';
25
+ @use 'descriptions';
25
26
  @use 'result';
26
27
 
27
28
  @use 'nav-rail';