@unifiedsoftware/styles 1.1.8 → 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 (29) hide show
  1. package/css/fci.css +544 -145
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +345 -34
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +17 -7
  7. package/scss/components/_accordion.scss +45 -0
  8. package/scss/components/_card.scss +127 -13
  9. package/scss/components/_descriptions.scss +24 -0
  10. package/scss/components/_divider.scss +1 -1
  11. package/scss/components/_icon.scss +1 -1
  12. package/scss/components/_index.scss +3 -0
  13. package/scss/components/_input.scss +3 -3
  14. package/scss/components/_nav-rail.scss +183 -0
  15. package/scss/components/_swipe.scss +30 -30
  16. package/scss/components/_tabs.scss +1 -1
  17. package/scss/components/_toolbar.scss +8 -2
  18. package/scss/themes/fci/_index.scss +2 -0
  19. package/scss/themes/fci/_kendo.scss +44 -0
  20. package/scss/themes/fci/_tokens.scss +9 -7
  21. package/scss/themes/fci/components/_accordion.scss +204 -21
  22. package/scss/themes/fci/components/_button.scss +92 -40
  23. package/scss/themes/fci/components/_card.scss +159 -62
  24. package/scss/themes/fci/components/_chip.scss +0 -18
  25. package/scss/themes/fci/components/_icon.scss +1 -1
  26. package/scss/themes/fci/components/_index.scss +2 -0
  27. package/scss/themes/fci/components/_nav-rail.scss +62 -0
  28. package/scss/themes/fci/components/_tabs.scss +116 -10
  29. package/scss/themes/fci/components/_toolbar.scss +6 -0
package/scss/themes/fci/components/_button.scss CHANGED
@@ -1,5 +1,10 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
+ html {
4
+ -webkit-text-size-adjust: 100%;
5
+ text-rendering: optimizeLegibility;
6
+ -webkit-font-smoothing: antialiased;
7
+ }
3
8
  $colors-map: (
4
9
  inherit: inherit,
5
10
  primary: var(--#{$prefix}primary-color),
@@ -21,48 +26,61 @@ $colors-map: (
21
26
  &--xs {
22
27
  --#{$prefix}button-height: 24px;
23
28
  --#{$prefix}button-padding-y: 0;
24
- --#{$prefix}button-padding-x: 0.625rem;
29
+ --#{$prefix}button-padding-x: 0.75rem;
25
30
  --#{$prefix}button-font-size: 0.75rem;
26
31
  --#{$prefix}button-border-radius: 6px;
27
32
  --#{$prefix}button-gap: 0.25rem;
28
33
 
29
34
  .#{$prefix}icon {
30
- --#{$prefix}icon-font-size: 0.875rem;
35
+ --#{$prefix}icon-font-size: 0.75rem;
31
36
  }
32
37
  }
33
38
 
34
39
  &--sm {
35
40
  --#{$prefix}button-height: 28px;
36
41
  --#{$prefix}button-padding-y: 0;
37
- --#{$prefix}button-padding-x: 0.75rem;
42
+ --#{$prefix}button-padding-x: 0.875rem;
38
43
  --#{$prefix}button-font-size: 0.75rem;
39
- --#{$prefix}button-border-radius: 6px;
44
+ --#{$prefix}button-border-radius: 8px;
40
45
  --#{$prefix}button-gap: 0.25rem;
41
46
 
42
47
  .#{$prefix}icon {
43
- --#{$prefix}icon-font-size: 1rem;
48
+ --#{$prefix}icon-font-size: 0.875rem;
44
49
  }
45
50
  }
46
51
 
47
52
  &--md {
48
53
  --#{$prefix}button-height: 32px;
49
54
  --#{$prefix}button-padding-y: 0;
50
- --#{$prefix}button-padding-x: 0.875rem;
55
+ --#{$prefix}button-padding-x: 1rem;
51
56
  --#{$prefix}button-font-size: 0.875rem;
52
- --#{$prefix}button-border-radius: 6px;
57
+ --#{$prefix}button-border-radius: 8px;
53
58
  --#{$prefix}button-gap: 0.375rem;
54
59
 
55
60
  .#{$prefix}icon {
56
- --#{$prefix}icon-font-size: 1.125rem;
61
+ --#{$prefix}icon-font-size: 1rem;
57
62
  }
58
63
  }
59
64
 
60
65
  &--lg {
61
- --#{$prefix}button-height: 36px;
66
+ --#{$prefix}button-height: 40px;
62
67
  --#{$prefix}button-padding-y: 0;
63
- --#{$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;
64
82
  --#{$prefix}button-font-size: 1rem;
65
- --#{$prefix}button-border-radius: 6px;
83
+ --#{$prefix}button-border-radius: 10px;
66
84
  --#{$prefix}button-gap: 0.5rem;
67
85
 
68
86
  .#{$prefix}icon {
@@ -70,13 +88,13 @@ $colors-map: (
70
88
  }
71
89
  }
72
90
 
73
- &--xl {
74
- --#{$prefix}button-height: 40px;
91
+ &--xxl {
92
+ --#{$prefix}button-height: 56px;
75
93
  --#{$prefix}button-padding-y: 0;
76
- --#{$prefix}button-padding-x: 1.125rem;
94
+ --#{$prefix}button-padding-x: 1.75rem;
77
95
  --#{$prefix}button-font-size: 1.125rem;
78
- --#{$prefix}button-border-radius: 6px;
79
- --#{$prefix}button-gap: 0.5rem;
96
+ --#{$prefix}button-border-radius: 10px;
97
+ --#{$prefix}button-gap: 0.75rem;
80
98
 
81
99
  .#{$prefix}icon {
82
100
  --#{$prefix}icon-font-size: 1.5rem;
@@ -91,10 +109,10 @@ $colors-map: (
91
109
  & > .#{$prefix}overlay {
92
110
  --#{$prefix}overlay-color: inherit;
93
111
  --#{$prefix}overlay-opacity: 0;
94
- --#{$prefix}_hover-overlay-opacity: 0.12;
95
- --#{$prefix}_active-overlay-opacity: 0.24;
96
- --#{$prefix}_focus-hover-overlay-opacity: 0.12;
97
- --#{$prefix}_focus-active-overlay-opacity: 0.24;
112
+ --#{$prefix}_hover-overlay-opacity: 0.24;
113
+ --#{$prefix}_active-overlay-opacity: 0.32;
114
+ --#{$prefix}_focus-hover-overlay-opacity: 0.24;
115
+ --#{$prefix}_focus-active-overlay-opacity: 0.32;
98
116
  }
99
117
 
100
118
  & > .#{$prefix}outline {
@@ -111,7 +129,7 @@ $colors-map: (
111
129
  & > .#{$prefix}overlay {
112
130
  --#{$prefix}overlay-color: inherit;
113
131
  --#{$prefix}overlay-opacity: 0;
114
- --#{$prefix}_hover-overlay-opacity: 0.12;
132
+ --#{$prefix}_hover-overlay-opacity: 0.16;
115
133
  --#{$prefix}_active-overlay-opacity: 0.24;
116
134
  --#{$prefix}_focus-hover-overlay-opacity: 0.12;
117
135
  --#{$prefix}_focus-active-overlay-opacity: 0.24;
@@ -126,11 +144,11 @@ $colors-map: (
126
144
  &--flat {
127
145
  & > .#{$prefix}overlay {
128
146
  --#{$prefix}overlay-color: inherit;
129
- --#{$prefix}overlay-opacity: 0.08;
130
- --#{$prefix}_hover-overlay-opacity: 0.12;
131
- --#{$prefix}_active-overlay-opacity: 0.24;
132
- --#{$prefix}_focus-hover-overlay-opacity: 0.12;
133
- --#{$prefix}_focus-active-overlay-opacity: 0.24;
147
+ --#{$prefix}overlay-opacity: 0.16;
148
+ --#{$prefix}_hover-overlay-opacity: 0.24;
149
+ --#{$prefix}_active-overlay-opacity: 0.32;
150
+ --#{$prefix}_focus-hover-overlay-opacity: 0.24;
151
+ --#{$prefix}_focus-active-overlay-opacity: 0.32;
134
152
  }
135
153
 
136
154
  & > .#{$prefix}outline {
@@ -143,7 +161,7 @@ $colors-map: (
143
161
  & > .#{$prefix}overlay {
144
162
  --#{$prefix}overlay-color: inherit;
145
163
  --#{$prefix}overlay-opacity: 0;
146
- --#{$prefix}_hover-overlay-opacity: 0.12;
164
+ --#{$prefix}_hover-overlay-opacity: 0.16;
147
165
  --#{$prefix}_active-overlay-opacity: 0.24;
148
166
  --#{$prefix}_focus-hover-overlay-opacity: 0.12;
149
167
  --#{$prefix}_focus-active-overlay-opacity: 0.24;
@@ -156,6 +174,42 @@ $colors-map: (
156
174
  }
157
175
  }
158
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
+
159
213
  @each $key, $value in $colors-map {
160
214
  .#{$prefix}button--filled.#{$prefix}button--#{$key} {
161
215
  --#{$prefix}button-background: #{$value};
@@ -175,19 +229,17 @@ $colors-map: (
175
229
 
176
230
  @if $key == 'secondary' {
177
231
  .#{$prefix}button--filled.#{$prefix}button--#{$key} {
178
- --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
179
- }
180
-
181
- .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
182
- --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
183
- }
184
-
185
- .#{$prefix}button--flat.#{$prefix}button--#{$key} {
186
- --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
187
- }
188
-
189
- .#{$prefix}button--text.#{$prefix}button--#{$key} {
190
- --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
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
+ }
191
243
  }
192
244
  }
193
245
  }
package/scss/themes/fci/components/_card.scss CHANGED
@@ -4,8 +4,26 @@
4
4
  .#{$prefix}card {
5
5
  --#{$prefix}card-border-width: 1px;
6
6
  --#{$prefix}card-border-style: solid;
7
- --#{$prefix}card-border-color: rgba(9, 30, 66, 0.14);
8
- --#{$prefix}card-border-radius: 6px;
7
+ --#{$prefix}card-border-color: var(--#{$prefix}border-color);
8
+ --#{$prefix}card-border-radius: 10px;
9
+ --#{$prefix}card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
10
+ rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
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
+ }
9
27
 
10
28
  & > .#{$prefix}overlay {
11
29
  --#{$prefix}overlay-color: inherit;
@@ -25,95 +43,174 @@
25
43
  --#{$prefix}_active-overlay-opacity: 0.16;
26
44
  }
27
45
  }
46
+ }
28
47
 
29
- &-header {
30
- --#{$prefix}card-header-border-color: var(--#{$prefix}card-border-color);
48
+ .#{$prefix}card--xs {
49
+ --#{$prefix}card-padding-y: 0.5rem;
50
+ --#{$prefix}card-padding-x: 0.75rem;
51
+ --#{$prefix}card-gap: 0.5rem;
31
52
 
32
- --#{$prefix}card-header-title-font-weight: 500;
33
- --#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
53
+ --#{$prefix}card-header-min-height: 1.75rem;
54
+ --#{$prefix}card-header-gap: 0.5rem;
55
+ --#{$prefix}card-header-content-gap: 0.25rem;
34
56
 
35
- --#{$prefix}card-header-subtitle-font-weight: 400;
36
- --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
37
- }
57
+ --#{$prefix}card-header-title-font-size: 12px;
58
+ --#{$prefix}card-header-title-font-weight: 500;
59
+ --#{$prefix}card-header-title-line-height: 14px;
38
60
 
39
- &-body {
40
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
41
- }
61
+ --#{$prefix}card-header-subtitle-font-size: 11px;
62
+ --#{$prefix}card-header-subtitle-font-weight: 500;
63
+ --#{$prefix}card-header-subtitle-line-height: 14px;
64
+
65
+ --#{$prefix}card-body-font-size: 0.75rem;
66
+ --#{$prefix}card-body-line-height: 18px;
42
67
 
43
- &-footer {
44
- --#{$prefix}card-footer-min-height: 48px;
45
- --#{$prefix}card-footer-padding-y: 0.5rem;
46
- --#{$prefix}card-footer-padding-x: 1rem;
68
+ --#{$prefix}card-footer-min-height: 1.75rem;
69
+ --#{$prefix}card-footer-gap: 0.5rem;
70
+ }
47
71
 
48
- --#{$prefix}card-footer-border-color: rgba(9, 30, 66, 0.14);
49
- }
72
+ .#{$prefix}card--xs .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
73
+ --#{$prefix}icon-font-size-default: 16px;
50
74
  }
51
75
 
52
- .#{$prefix}card--sm .#{$prefix}card-header {
53
- --#{$prefix}card-header-min-height: 36px;
54
- --#{$prefix}card-header-padding-y: 0.685rem;
55
- --#{$prefix}card-header-padding-x: 1rem;
56
- --#{$prefix}card-header-padding-level: 1.25rem;
57
- --#{$prefix}card-header-font-size: 12px;
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;
87
+
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;
94
+ --#{$prefix}card-header-subtitle-line-height: 16px;
95
+
96
+ --#{$prefix}card-body-font-size: 0.875rem;
97
+ --#{$prefix}card-body-line-height: 20px;
98
+
99
+ --#{$prefix}card-footer-min-height: 2rem;
100
+ --#{$prefix}card-footer-gap: 0.75rem;
101
+ }
102
+
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;
58
116
  --#{$prefix}card-header-gap: 1rem;
117
+ --#{$prefix}card-header-content-gap: 0.5rem;
59
118
 
60
- --#{$prefix}card-header-title-font-size: 12px;
119
+ --#{$prefix}card-header-title-font-size: 0.875rem;
120
+ --#{$prefix}card-header-title-line-height: 16px;
121
+
122
+ --#{$prefix}card-header-subtitle-font-size: 0.8125rem;
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;
130
+ }
131
+
132
+ .#{$prefix}card--md .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
133
+ --#{$prefix}icon-font-size-default: 24px;
134
+ }
135
+
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;
61
149
  --#{$prefix}card-header-title-line-height: 18px;
62
150
 
63
- --#{$prefix}card-header-subtitle-font-size: 11px;
64
- --#{$prefix}card-header-subtitle-line-height: 14px;
151
+ --#{$prefix}card-header-subtitle-font-size: 0.875rem;
152
+ --#{$prefix}card-header-subtitle-line-height: 18px;
153
+
154
+ --#{$prefix}card-body-font-size: 1rem;
155
+ --#{$prefix}card-body-line-height: 24px;
156
+
157
+ --#{$prefix}card-footer-min-height: 2.25rem;
158
+ --#{$prefix}card-footer-gap: 1rem;
65
159
  }
66
160
 
67
- .#{$prefix}card--sm .#{$prefix}card-body {
68
- --#{$prefix}card-body-padding-y: 1rem;
69
- --#{$prefix}card-body-padding-x: 1rem;
70
- --#{$prefix}card-body-font-size: 0.75rem;
71
- --#{$prefix}card-body-line-height: 18px;
72
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
161
+ .#{$prefix}card--lg .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
162
+ --#{$prefix}icon-font-size-default: 28px;
73
163
  }
74
164
 
75
- .#{$prefix}card--md .#{$prefix}card-header {
165
+ .#{$prefix}card--xl {
166
+ --#{$prefix}card-padding-y: 1.25rem;
167
+ --#{$prefix}card-padding-x: 2rem;
168
+ --#{$prefix}card-gap: 1.25rem;
169
+
76
170
  --#{$prefix}card-header-min-height: 2.5rem;
77
- --#{$prefix}card-header-padding-y: 0.625rem;
78
- --#{$prefix}card-header-padding-x: 1rem;
79
- --#{$prefix}card-header-padding-level: 1.25rem;
80
171
  --#{$prefix}card-header-gap: 1rem;
172
+ --#{$prefix}card-header-content-gap: 0.875rem;
81
173
 
82
- --#{$prefix}card-header-title-font-size: 0.8125rem;
174
+ --#{$prefix}card-header-title-font-size: 1.125rem;
83
175
  --#{$prefix}card-header-title-line-height: 20px;
84
176
 
85
- --#{$prefix}card-header-subtitle-font-size: 0.75rem;
86
- --#{$prefix}card-header-subtitle-line-height: 16px;
177
+ --#{$prefix}card-header-subtitle-font-size: 1rem;
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;
87
185
  }
88
186
 
89
- .#{$prefix}card--md .#{$prefix}card-body {
90
- --#{$prefix}card-body-padding-y: 1.25rem;
91
- --#{$prefix}card-body-padding-x: 1rem;
92
- --#{$prefix}card-body-font-size: 0.875rem;
93
- --#{$prefix}card-body-line-height: 20px;
94
- --#{$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;
95
189
  }
96
190
 
97
- .#{$prefix}card--lg .#{$prefix}card-header {
98
- --#{$prefix}card-header-min-height: 2.75rem;
99
- --#{$prefix}card-header-padding-y: 0.625rem;
100
- --#{$prefix}card-header-padding-x: 1rem;
101
- --#{$prefix}card-header-padding-level: 1.25rem;
102
- --#{$prefix}card-header-font-size: 0.75rem;
103
- --#{$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;
104
195
 
105
- --#{$prefix}card-header-title-font-size: 0.875rem;
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;
106
201
  --#{$prefix}card-header-title-line-height: 24px;
107
202
 
108
- --#{$prefix}card-header-subtitle-font-size: 0.8125rem;
109
- --#{$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;
110
211
  }
111
212
 
112
- .#{$prefix}card--lg .#{$prefix}card-body {
113
- --#{$prefix}card-body-padding-y: 1.5rem;
114
- --#{$prefix}card-body-padding-x: 1rem;
115
- --#{$prefix}card-body-font-size: 1rem;
116
- --#{$prefix}card-body-line-height: 24px;
117
- --#{$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;
118
215
  }
119
216
  }
package/scss/themes/fci/components/_chip.scss CHANGED
@@ -122,23 +122,5 @@ $colors-map: (
122
122
  .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
123
123
  --#{$prefix}chip-color: #{$value};
124
124
  }
125
-
126
- @if $key == 'secondary' {
127
- .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
128
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
129
- }
130
-
131
- .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
132
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
133
- }
134
-
135
- .#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
136
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
137
- }
138
-
139
- .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
140
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
141
- }
142
- }
143
125
  }
144
126
  }
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/_index.scss CHANGED
@@ -23,3 +23,5 @@
23
23
 
24
24
  @use 'card';
25
25
  @use 'result';
26
+
27
+ @use 'nav-rail';
package/scss/themes/fci/components/_nav-rail.scss ADDED
@@ -0,0 +1,62 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}nav-rail {
5
+ --#{$prefix}nav-rail-border-color: var(--#{$prefix}border-color);
6
+
7
+ --#{$prefix}nav-rail-start-content-padding-y: 0.5rem;
8
+ --#{$prefix}nav-rail-start-content-gap: 0.5rem;
9
+
10
+ --#{$prefix}nav-rail-content-padding-y: 0.5rem;
11
+ --#{$prefix}nav-rail-content-gap: 0.5rem;
12
+
13
+ --#{$prefix}nav-rail-end-content-padding-y: 0.5rem;
14
+ --#{$prefix}nav-rail-end-content-gap: 0.5rem;
15
+
16
+ & > .#{$prefix}surface {
17
+ --#{$prefix}surface-color: #fff;
18
+ --#{$prefix}surface-opacity: 1;
19
+ }
20
+
21
+ &-item {
22
+ --#{$prefix}nav-rail-item-border-radius: 6px;
23
+ --#{$prefix}nav-rail-item-gap: 0.75rem;
24
+
25
+ --#{$prefix}nav-rail-item-padding-y: 1rem;
26
+
27
+ --#{$prefix}nav-rail-item-label-font-size: 11px;
28
+ --#{$prefix}nav-rail-item-label-font-weight: 700;
29
+ --#{$prefix}nav-rail-item-label-line-height: 16px;
30
+
31
+ --#{$prefix}nav-rail-item-indicator-size: 4px;
32
+ --#{$prefix}nav-rail-item-indicator-border-radius: 4px;
33
+ --#{$prefix}nav-rail-item-indicator-color: currentColor;
34
+
35
+ --#{$prefix}nav-rail-item-media-width: 48px;
36
+ --#{$prefix}nav-rail-item-media-height: 48px;
37
+ --#{$prefix}nav-rail-item-media-border-radius: 1rem;
38
+
39
+ --#{$prefix}nav-rail-item-icon-font-size: 1.5rem;
40
+
41
+ --#{$prefix}nav-rail-item-color: var(--#{$prefix}secondary-action-color);
42
+
43
+ --#{$prefix}_active-nav-rail-item-color: var(--#{$prefix}primary-color);
44
+ --#{$prefix}_active-nav-rail-item-indicator-color: var(--#{$prefix}primary-color);
45
+
46
+ & > .#{$prefix}surface {
47
+ --#{$prefix}surface-opacity: 0;
48
+ }
49
+
50
+ & > .#{$prefix}overlay {
51
+ --#{$prefix}overlay-opacity: 0;
52
+ }
53
+
54
+ &__icon,
55
+ &__media {
56
+ & > .#{$prefix}overlay {
57
+ --#{$prefix}overlay-opacity: 0;
58
+ }
59
+ }
60
+ }
61
+ }
62
+ }