@unifiedsoftware/styles 1.1.8 → 2.0.0-alpha.10

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 (33) hide show
  1. package/css/fci.css +823 -160
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +614 -41
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +48 -10
  7. package/scss/components/_accordion.scss +44 -1
  8. package/scss/components/_card.scss +128 -13
  9. package/scss/components/_descriptions.scss +69 -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 +54 -5
  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 +7 -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 +22 -7
  21. package/scss/themes/fci/components/_accordion.scss +166 -25
  22. package/scss/themes/fci/components/_badge.scss +13 -14
  23. package/scss/themes/fci/components/_button.scss +127 -52
  24. package/scss/themes/fci/components/_card.scss +167 -58
  25. package/scss/themes/fci/components/_chip.scss +47 -28
  26. package/scss/themes/fci/components/_descriptions.scss +53 -0
  27. package/scss/themes/fci/components/_icon.scss +1 -1
  28. package/scss/themes/fci/components/_index.scss +3 -0
  29. package/scss/themes/fci/components/_input.scss +10 -7
  30. package/scss/themes/fci/components/_list.scss +0 -4
  31. package/scss/themes/fci/components/_nav-rail.scss +62 -0
  32. package/scss/themes/fci/components/_tabs.scss +116 -10
  33. package/scss/themes/fci/components/_toolbar.scss +6 -0
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: 8px;
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,186 @@
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-header-padding-y: 0.375rem;
50
+ --#{$prefix}card-header-padding-x: 0.75rem;
51
+ --#{$prefix}card-header-min-height: 1.75rem;
52
+ --#{$prefix}card-header-gap: 0.5rem;
53
+ --#{$prefix}card-header-content-gap: 0.25rem;
31
54
 
32
- --#{$prefix}card-header-title-font-weight: 500;
33
- --#{$prefix}card-header-title-color: var(--#{$prefix}title-color);
55
+ --#{$prefix}card-header-title-font-size: 11px;
56
+ --#{$prefix}card-header-title-font-weight: 500;
57
+ --#{$prefix}card-header-title-line-height: 14px;
34
58
 
35
- --#{$prefix}card-header-subtitle-font-weight: 400;
36
- --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
37
- }
59
+ --#{$prefix}card-header-subtitle-font-size: 10px;
60
+ --#{$prefix}card-header-subtitle-font-weight: 500;
61
+ --#{$prefix}card-header-subtitle-line-height: 14px;
38
62
 
39
- &-body {
40
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
41
- }
63
+ --#{$prefix}card-body-padding-y: 0.375rem;
64
+ --#{$prefix}card-body-padding-x: 0.75rem;
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-padding-y: 0.375rem;
69
+ --#{$prefix}card-footer-padding-x: 0.75rem;
70
+ --#{$prefix}card-footer-min-height: 1.75rem;
71
+ --#{$prefix}card-footer-gap: 0.5rem;
72
+ }
47
73
 
48
- --#{$prefix}card-footer-border-color: rgba(9, 30, 66, 0.14);
49
- }
74
+ .#{$prefix}card--xs .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
75
+ --#{$prefix}icon-font-size-default: 16px;
50
76
  }
51
77
 
52
- .#{$prefix}card--sm .#{$prefix}card-header {
53
- --#{$prefix}card-header-min-height: 36px;
54
- --#{$prefix}card-header-padding-y: 0.685rem;
78
+ .#{$prefix}card--sm {
79
+ --#{$prefix}card-title-padding-y: 0.875rem 0.375rem;
80
+ --#{$prefix}card-title-font-size: 1.25rem;
81
+
82
+ --#{$prefix}card-header-padding-y: 0.375rem;
55
83
  --#{$prefix}card-header-padding-x: 1rem;
56
- --#{$prefix}card-header-padding-level: 1.25rem;
57
- --#{$prefix}card-header-font-size: 12px;
58
- --#{$prefix}card-header-gap: 1rem;
84
+ --#{$prefix}card-header-min-height: 2rem;
85
+ --#{$prefix}card-header-gap: 0.75rem;
86
+ --#{$prefix}card-header-content-gap: 0.5rem;
59
87
 
60
88
  --#{$prefix}card-header-title-font-size: 12px;
61
- --#{$prefix}card-header-title-line-height: 18px;
89
+ --#{$prefix}card-header-title-font-weight: 500;
90
+ --#{$prefix}card-header-title-line-height: 16px;
62
91
 
63
92
  --#{$prefix}card-header-subtitle-font-size: 11px;
64
- --#{$prefix}card-header-subtitle-line-height: 14px;
65
- }
93
+ --#{$prefix}card-header-subtitle-font-weight: 500;
94
+ --#{$prefix}card-header-subtitle-line-height: 16px;
66
95
 
67
- .#{$prefix}card--sm .#{$prefix}card-body {
68
- --#{$prefix}card-body-padding-y: 1rem;
96
+ --#{$prefix}card-body-padding-y: 0.375rem;
69
97
  --#{$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);
98
+ --#{$prefix}card-body-font-size: 0.875rem;
99
+ --#{$prefix}card-body-line-height: 20px;
100
+
101
+ --#{$prefix}card-footer-padding-y: 0.375rem;
102
+ --#{$prefix}card-footer-padding-x: 1rem;
103
+ --#{$prefix}card-footer-min-height: 2rem;
104
+ --#{$prefix}card-footer-gap: 0.75rem;
73
105
  }
74
106
 
75
- .#{$prefix}card--md .#{$prefix}card-header {
76
- --#{$prefix}card-header-min-height: 2.5rem;
77
- --#{$prefix}card-header-padding-y: 0.625rem;
107
+ .#{$prefix}card--sm .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
108
+ --#{$prefix}icon-font-size-default: 20px;
109
+ }
110
+
111
+ .#{$prefix}card--md {
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;
116
+ --#{$prefix}card-header-padding-y: 0.5rem;
78
117
  --#{$prefix}card-header-padding-x: 1rem;
79
- --#{$prefix}card-header-padding-level: 1.25rem;
80
- --#{$prefix}card-header-gap: 1rem;
118
+ --#{$prefix}card-header-gap: 0.75rem;
119
+ --#{$prefix}card-header-content-gap: 0.5rem;
81
120
 
82
- --#{$prefix}card-header-title-font-size: 0.8125rem;
83
- --#{$prefix}card-header-title-line-height: 20px;
121
+ --#{$prefix}card-header-title-font-size: 13px;
122
+ --#{$prefix}card-header-title-line-height: 16px;
84
123
 
85
- --#{$prefix}card-header-subtitle-font-size: 0.75rem;
124
+ --#{$prefix}card-header-subtitle-font-size: 12px;
86
125
  --#{$prefix}card-header-subtitle-line-height: 16px;
87
- }
88
126
 
89
- .#{$prefix}card--md .#{$prefix}card-body {
90
- --#{$prefix}card-body-padding-y: 1.25rem;
127
+ --#{$prefix}card-body-padding-y: 0.5rem;
91
128
  --#{$prefix}card-body-padding-x: 1rem;
92
129
  --#{$prefix}card-body-font-size: 0.875rem;
93
- --#{$prefix}card-body-line-height: 20px;
94
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
130
+ --#{$prefix}card-body-line-height: 24px;
131
+
132
+ --#{$prefix}card-footer-padding-y: 0.5rem;
133
+ --#{$prefix}card-footer-padding-x: 1rem;
134
+ --#{$prefix}card-footer-min-height: 2rem;
135
+ --#{$prefix}card-footer-gap: 1rem;
136
+ }
137
+
138
+ .#{$prefix}card--md .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
139
+ --#{$prefix}icon-font-size-default: 24px;
95
140
  }
96
141
 
97
- .#{$prefix}card--lg .#{$prefix}card-header {
98
- --#{$prefix}card-header-min-height: 2.75rem;
142
+ .#{$prefix}card--lg {
143
+ --#{$prefix}card-title-padding-y: 1.25rem 0.75rem;
144
+ --#{$prefix}card-title-font-size: 1.5rem;
145
+
99
146
  --#{$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;
147
+ --#{$prefix}card-header-padding-x: 1.25rem;
148
+ --#{$prefix}card-header-min-height: 2.25rem;
103
149
  --#{$prefix}card-header-gap: 1rem;
150
+ --#{$prefix}card-header-content-gap: 0.75rem;
104
151
 
105
- --#{$prefix}card-header-title-font-size: 0.875rem;
106
- --#{$prefix}card-header-title-line-height: 24px;
152
+ --#{$prefix}card-header-title-font-size: 14px;
153
+ --#{$prefix}card-header-title-line-height: 18px;
107
154
 
108
- --#{$prefix}card-header-subtitle-font-size: 0.8125rem;
155
+ --#{$prefix}card-header-subtitle-font-size: 13px;
109
156
  --#{$prefix}card-header-subtitle-line-height: 18px;
110
- }
111
157
 
112
- .#{$prefix}card--lg .#{$prefix}card-body {
113
- --#{$prefix}card-body-padding-y: 1.5rem;
114
- --#{$prefix}card-body-padding-x: 1rem;
158
+ --#{$prefix}card-body-padding-y: 0.625rem;
159
+ --#{$prefix}card-body-padding-x: 1.25rem;
115
160
  --#{$prefix}card-body-font-size: 1rem;
116
161
  --#{$prefix}card-body-line-height: 24px;
117
- --#{$prefix}card-body-color: var(--#{$prefix}body-color);
162
+
163
+ --#{$prefix}card-footer-padding-y: 0.625rem;
164
+ --#{$prefix}card-footer-padding-x: 1.25rem;
165
+ --#{$prefix}card-footer-min-height: 2.25rem;
166
+ --#{$prefix}card-footer-gap: 1rem;
167
+ }
168
+
169
+ .#{$prefix}card--lg .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
170
+ --#{$prefix}icon-font-size-default: 28px;
171
+ }
172
+
173
+ .#{$prefix}card--xl {
174
+ --#{$prefix}card-header-padding-y: 0.75rem;
175
+ --#{$prefix}card-header-padding-x: 1.5rem;
176
+ --#{$prefix}card-header-min-height: 2.5rem;
177
+ --#{$prefix}card-header-gap: 1rem;
178
+ --#{$prefix}card-header-content-gap: 0.875rem;
179
+
180
+ --#{$prefix}card-header-title-font-size: 16px;
181
+ --#{$prefix}card-header-title-line-height: 20px;
182
+
183
+ --#{$prefix}card-header-subtitle-font-size: 15px;
184
+ --#{$prefix}card-header-subtitle-line-height: 20px;
185
+
186
+ --#{$prefix}card-body-padding-y: 0.75rem;
187
+ --#{$prefix}card-body-padding-x: 1.5rem;
188
+ --#{$prefix}card-body-font-size: 1.125rem;
189
+ --#{$prefix}card-body-line-height: 28px;
190
+
191
+ --#{$prefix}card-footer-padding-y: 0.75rem;
192
+ --#{$prefix}card-footer-padding-x: 1.5rem;
193
+ --#{$prefix}card-footer-min-height: 2.5rem;
194
+ --#{$prefix}card-footer-gap: 1rem;
195
+ }
196
+
197
+ .#{$prefix}card--xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
198
+ --#{$prefix}icon-font-size-default: 36px;
199
+ }
200
+
201
+ .#{$prefix}card--2xl {
202
+ --#{$prefix}card-header-padding-y: 0.75rem;
203
+ --#{$prefix}card-header-padding-x: 1.5rem;
204
+ --#{$prefix}card-header-min-height: 3rem;
205
+ --#{$prefix}card-header-gap: 1rem;
206
+ --#{$prefix}card-header-content-gap: 1rem;
207
+
208
+ --#{$prefix}card-header-title-font-size: 18px;
209
+ --#{$prefix}card-header-title-line-height: 24px;
210
+
211
+ --#{$prefix}card-header-subtitle-font-size: 16px;
212
+ --#{$prefix}card-header-subtitle-line-height: 24px;
213
+
214
+ --#{$prefix}card-body-padding-y: 0.75rem;
215
+ --#{$prefix}card-body-padding-x: 1.5rem;
216
+ --#{$prefix}card-body-font-size: 1.25rem;
217
+ --#{$prefix}card-body-line-height: 36px;
218
+
219
+ --#{$prefix}card-footer-padding-y: 0.75rem;
220
+ --#{$prefix}card-footer-padding-x: 1.5rem;
221
+ --#{$prefix}card-footer-min-height: 2.5rem;
222
+ --#{$prefix}card-footer-gap: 1rem;
223
+ }
224
+
225
+ .#{$prefix}card--2xl .#{$prefix}card-header .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
226
+ --#{$prefix}icon-font-size-default: 40px;
118
227
  }
119
228
  }
package/scss/themes/fci/components/_chip.scss CHANGED
@@ -1,20 +1,13 @@
1
1
  @use '../../../variables' as *;
2
2
 
3
- $colors-map: (
4
- primary: var(--#{$prefix}primary-color),
5
- secondary: var(--#{$prefix}secondary-color),
6
- success: var(--#{$prefix}success-color),
7
- info: var(--#{$prefix}info-color),
8
- warning: var(--#{$prefix}warning-color),
9
- danger: var(--#{$prefix}danger-color),
10
- );
3
+ $colors-map: (primary, secondary, success, info, warning, danger);
11
4
 
12
5
  .#{$prefix}theme-fci {
13
6
  .#{$prefix}chip {
14
7
  --#{$prefix}chip-padding-y: 0.125rem;
15
8
  --#{$prefix}chip-padding-x: 0.5rem;
16
9
  --#{$prefix}chip-font-size: 0.75rem;
17
- --#{$prefix}chip-font-weight: 400;
10
+ --#{$prefix}chip-font-weight: 500;
18
11
  --#{$prefix}chip-border-radius: 9999px;
19
12
 
20
13
  & > .#{$prefix}overlay {
@@ -95,49 +88,75 @@ $colors-map: (
95
88
 
96
89
  &--outlined {
97
90
  & > .#{$prefix}outline {
91
+ --#{$prefix}outline-border-width: 1px;
98
92
  --#{$prefix}outline-border-color: currentColor;
99
93
  }
100
94
  }
101
95
 
102
96
  &--flat {
97
+ & > .#{$prefix}outline {
98
+ --#{$prefix}outline-border-width: 1px;
99
+ --#{$prefix}outline-border-color: transparent;
100
+ }
101
+
103
102
  & > .#{$prefix}overlay {
104
- --#{$prefix}overlay-opacity: 0.08;
103
+ --#{$prefix}overlay-color: inherit;
104
+ --#{$prefix}overlay-opacity: 0.16;
105
+ }
106
+ }
107
+
108
+ &--text {
109
+ & > .#{$prefix}outline {
110
+ --#{$prefix}outline-border-width: 1px;
111
+ --#{$prefix}outline-border-color: transparent;
105
112
  }
106
113
  }
107
114
  }
108
115
 
109
- @each $key, $value in $colors-map {
110
- .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
111
- --#{$prefix}chip-background: #{$value};
116
+ @each $color in $colors-map {
117
+ .#{$prefix}chip--filled.#{$prefix}chip--#{$color} {
118
+ --#{$prefix}chip-background: var(--#{$prefix}#{$color}-color);
112
119
  }
113
120
 
114
- .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
115
- --#{$prefix}chip-color: #{$value};
121
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$color} {
122
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
116
123
  }
117
124
 
118
- .#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
119
- --#{$prefix}chip-color: #{$value};
125
+ .#{$prefix}chip--flat.#{$prefix}chip--#{$color} {
126
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
120
127
  }
121
128
 
122
- .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
123
- --#{$prefix}chip-color: #{$value};
129
+ .#{$prefix}chip--text.#{$prefix}chip--#{$color} {
130
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
124
131
  }
125
132
 
126
- @if $key == 'secondary' {
127
- .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
128
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
133
+ @if $color == 'secondary' {
134
+ .#{$prefix}chip--filled.#{$prefix}chip--#{$color} {
135
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
136
+ --#{$prefix}chip-background: transparent;
137
+
138
+ & > .#{$prefix}overlay {
139
+ --#{$prefix}overlay-color: inherit;
140
+ --#{$prefix}overlay-opacity: 0.16;
141
+ }
129
142
  }
143
+ }
130
144
 
131
- .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
132
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
145
+ @if $color == 'success' or $color == 'warning' {
146
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$color} {
147
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
133
148
  }
149
+ }
134
150
 
135
- .#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
136
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
151
+ @if $color == 'success' or $color == 'info' or $color == 'warning' {
152
+ .#{$prefix}chip--flat.#{$prefix}chip--#{$color} {
153
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
137
154
  }
155
+ }
138
156
 
139
- .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
140
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
157
+ @if $color == 'success' or $color == 'info' or $color == 'warning' {
158
+ .#{$prefix}chip--text.#{$prefix}chip--#{$color} {
159
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
141
160
  }
142
161
  }
143
162
  }
package/scss/themes/fci/components/_descriptions.scss ADDED
@@ -0,0 +1,53 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}description {
5
+ & > .#{$prefix}surface {
6
+ --#{$prefix}surface-opacity: 0;
7
+ }
8
+
9
+ & > .#{$prefix}overlay {
10
+ --#{$prefix}overlay-opacity: 0;
11
+ --#{$prefix}_hover-overlay-opacity: 0.08;
12
+ --#{$prefix}_active-overlay-opacity: 0.12;
13
+ }
14
+ }
15
+
16
+ .#{$prefix}descriptions {
17
+ --#{$prefix}description-label-color: var(--#{$prefix}secondary-action-color);
18
+ --#{$prefix}description-text-color: var(--#{$prefix}primary-color);
19
+ }
20
+
21
+ .#{$prefix}descriptions--sm {
22
+ --#{$prefix}description-padding-y: 0.5rem;
23
+ --#{$prefix}description-padding-x: 0.75rem;
24
+ --#{$prefix}description-gap-y: 0.5rem;
25
+ --#{$prefix}description-gap-x: 0.75rem;
26
+
27
+ --#{$prefix}description-label-font-size: 12px;
28
+
29
+ --#{$prefix}description-text-font-size: 12px;
30
+ }
31
+
32
+ .#{$prefix}descriptions--md {
33
+ --#{$prefix}description-padding-y: 0.5rem;
34
+ --#{$prefix}description-padding-x: 1rem;
35
+ --#{$prefix}description-gap-y: 0.5rem;
36
+ --#{$prefix}description-gap-x: 1rem;
37
+
38
+ --#{$prefix}description-label-font-size: 13px;
39
+
40
+ --#{$prefix}description-text-font-size: 13px;
41
+ }
42
+
43
+ .#{$prefix}descriptions--lg {
44
+ --#{$prefix}description-padding-y: 0.75rem;
45
+ --#{$prefix}description-padding-x: 1.25rem;
46
+ --#{$prefix}description-gap-y: 0.75rem;
47
+ --#{$prefix}description-gap-x: 1.25rem;
48
+
49
+ --#{$prefix}description-label-font-size: 14px;
50
+
51
+ --#{$prefix}description-text-font-size: 14px;
52
+ }
53
+ }
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
@@ -22,4 +22,7 @@
22
22
  @use 'tabs';
23
23
 
24
24
  @use 'card';
25
+ @use 'descriptions';
25
26
  @use 'result';
27
+
28
+ @use 'nav-rail';
package/scss/themes/fci/components/_input.scss CHANGED
@@ -4,39 +4,42 @@
4
4
  .#{$prefix}input {
5
5
  --#{$prefix}input-font-family: var(--#{$prefix}font-sans);
6
6
  --#{$prefix}input-border-radius: 6px;
7
- --#{$prefix}input-gap: 0.5rem;
8
- --#{$prefix}input-icon-size: 1.125rem;
9
7
 
10
8
  &--xs {
11
- --#{$prefix}input-height: 24px;
9
+ --#{$prefix}input-height: 22px;
12
10
  --#{$prefix}input-padding-y: 0.282rem;
13
11
  --#{$prefix}input-padding-x: 0.625rem;
14
12
  --#{$prefix}input-font-size: 0.75rem;
15
13
  }
16
14
 
17
15
  &--sm {
18
- --#{$prefix}input-height: 28px;
16
+ --#{$prefix}input-height: 24px;
19
17
  --#{$prefix}input-padding-y: 0.407rem;
20
18
  --#{$prefix}input-padding-x: 0.75rem;
21
19
  --#{$prefix}input-font-size: 0.75rem;
22
20
  }
23
21
 
24
22
  &--md {
25
- --#{$prefix}input-height: 32px;
23
+ --#{$prefix}input-height: 30px;
26
24
  --#{$prefix}input-padding-y: 0.532rem;
27
25
  --#{$prefix}input-padding-x: 0.875rem;
28
26
  --#{$prefix}input-font-size: 0.75rem;
27
+ --#{$prefix}input-content-gap: 0.25rem;
28
+ }
29
+
30
+ &--md .#{$prefix}icon:not(.#{$prefix}button .#{$prefix}icon) {
31
+ --#{$prefix}icon-font-size-default: 16px;
29
32
  }
30
33
 
31
34
  &--lg {
32
- --#{$prefix}input-height: 36px;
35
+ --#{$prefix}input-height: 34px;
33
36
  --#{$prefix}input-padding-y: 0.625rem;
34
37
  --#{$prefix}input-padding-x: 1rem;
35
38
  --#{$prefix}input-font-size: 0.85rem;
36
39
  }
37
40
 
38
41
  &--xl {
39
- --#{$prefix}input-height: 40px;
42
+ --#{$prefix}input-height: 44px;
40
43
  --#{$prefix}input-padding-y: 0.75rem;
41
44
  --#{$prefix}input-padding-x: 1.125rem;
42
45
  --#{$prefix}input-font-size: 0.85rem;
package/scss/themes/fci/components/_list.scss CHANGED
@@ -35,10 +35,6 @@
35
35
  --#{$prefix}_active-overlay-opacity: 0.16;
36
36
  }
37
37
  }
38
-
39
- // .#{$prefix}icon {
40
- // --#{$prefix}icon-color: var(--#{$prefix}primary-color);
41
- // }
42
38
  }
43
39
 
44
40
  .#{$prefix}list-subheader {
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
+ }