@unifiedsoftware/styles 1.0.46 → 1.0.48

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 (26) hide show
  1. package/css/fci.css +188 -43
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +77 -35
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/components/_accordion.scss +51 -9
  7. package/scss/components/_backdrop.scss +1 -1
  8. package/scss/components/_badge.scss +23 -12
  9. package/scss/components/_card.scss +6 -5
  10. package/scss/components/_collapse.scss +0 -5
  11. package/scss/components/_drawer.scss +2 -0
  12. package/scss/components/_input.scss +0 -1
  13. package/scss/components/_list.scss +3 -2
  14. package/scss/components/_popover.scss +1 -1
  15. package/scss/components/_tabs.scss +0 -1
  16. package/scss/components/_toolbar.scss +1 -0
  17. package/scss/themes/fci/components/_accordion.scss +91 -0
  18. package/scss/themes/fci/components/_badge.scss +30 -12
  19. package/scss/themes/fci/components/_button.scss +52 -22
  20. package/scss/themes/fci/components/_card.scss +1 -17
  21. package/scss/themes/fci/components/_chip.scss +32 -12
  22. package/scss/themes/fci/components/_icon.scss +1 -1
  23. package/scss/themes/fci/components/_index.scss +2 -0
  24. package/scss/themes/fci/components/_input.scss +1 -1
  25. package/scss/themes/fci/components/_menu.scss +2 -2
  26. package/scss/themes/fci/components/_result.scss +3 -0
package/scss/components/_collapse.scss CHANGED
@@ -3,9 +3,4 @@
3
3
  .#{$prefix}collapse {
4
4
  overflow: hidden;
5
5
  transition: all 0.15s ease-in-out;
6
-
7
- &-trigger {
8
- cursor: pointer;
9
- -webkit-tap-highlight-color: transparent;
10
- }
11
6
  }
package/scss/components/_drawer.scss CHANGED
@@ -6,6 +6,8 @@
6
6
  width: 100%;
7
7
  height: 100%;
8
8
  background-color: var(--#{$prefix}drawer-background);
9
+ display: flex;
10
+ flex-direction: column;
9
11
 
10
12
  &-appear,
11
13
  &-enter {
package/scss/components/_input.scss CHANGED
@@ -29,7 +29,6 @@
29
29
  }
30
30
 
31
31
  &--clearable &__clearable {
32
- opacity: 0.75;
33
32
  transform: scale(0);
34
33
  transition: all 0.2s ease-in-out;
35
34
  }
package/scss/components/_list.scss CHANGED
@@ -31,14 +31,15 @@
31
31
 
32
32
  @include overlay();
33
33
 
34
- &--hoverable {
34
+ &--hoverable,
35
+ &--selected {
35
36
  cursor: pointer;
36
37
  user-select: none;
37
38
  }
38
39
 
39
40
  &--disabled {
40
41
  opacity: 0.6;
41
- pointer-events: none;
42
+ cursor: not-allowed;
42
43
  user-select: none;
43
44
  }
44
45
 
package/scss/components/_popover.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  rgba(0, 0, 0, 0.133) 0px 12px 32px -16px;
11
11
  background-color: #fff;
12
12
  overflow: hidden;
13
- z-index: 40;
13
+ z-index: 1060;
14
14
  display: flex;
15
15
  flex-direction: column;
16
16
 
package/scss/components/_tabs.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  .#{$prefix}tabs {
5
5
  width: 100%;
6
6
  white-space: nowrap;
7
- overflow: hidden;
8
7
  display: flex;
9
8
  align-items: center;
10
9
 
package/scss/components/_toolbar.scss CHANGED
@@ -33,6 +33,7 @@
33
33
  flex-grow: 1;
34
34
  overflow: hidden;
35
35
  display: flex;
36
+ flex-direction: column;
36
37
  }
37
38
 
38
39
  &__title {
package/scss/themes/fci/components/_accordion.scss ADDED
@@ -0,0 +1,91 @@
1
+ @use '../../../variables' as *;
2
+
3
+ .#{$prefix}theme-fci {
4
+ .#{$prefix}accordion {
5
+ --#{$prefix}accordion-border-width: 1px;
6
+ --#{$prefix}accordion-border-style: solid;
7
+ --#{$prefix}accordion-border-color: rgba(9, 30, 66, 0.14);
8
+ }
9
+
10
+ .#{$prefix}accordion-header {
11
+ --#{$prefix}accordion-header-border-color: var(--#{$prefix}accordion-border-color);
12
+
13
+ --#{$prefix}accordion-header-title-font-weight: 500;
14
+ --#{$prefix}accordion-header-title-color: var(--#{$prefix}title-color);
15
+
16
+ --#{$prefix}accordion-header-subtitle-font-weight: 400;
17
+ --#{$prefix}accordion-header-subtitle-color: var(--#{$prefix}subtitle-color);
18
+ }
19
+
20
+ .#{$prefix}accordion-body {
21
+ --#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
22
+ }
23
+
24
+ .#{$prefix}accordion--sm .#{$prefix}accordion-header {
25
+ --#{$prefix}accordion-header-min-height: 36px;
26
+ --#{$prefix}accordion-header-padding-y: 0.685rem;
27
+ --#{$prefix}accordion-header-padding-x: 1rem;
28
+ --#{$prefix}accordion-header-padding-level: 1.25rem;
29
+ --#{$prefix}accordion-header-font-size: 12px;
30
+ --#{$prefix}accordion-header-gap: 1rem;
31
+
32
+ --#{$prefix}accordion-header-title-font-size: 12px;
33
+ --#{$prefix}accordion-header-title-line-height: 18px;
34
+
35
+ --#{$prefix}accordion-header-subtitle-font-size: 11px;
36
+ --#{$prefix}accordion-header-title-line-height: 14px;
37
+ }
38
+
39
+ .#{$prefix}accordion--sm .#{$prefix}accordion-body {
40
+ --#{$prefix}accordion-body-padding-y: 1rem;
41
+ --#{$prefix}accordion-body-padding-x: 1rem;
42
+ --#{$prefix}accordion-body-font-size: 0.75rem;
43
+ --#{$prefix}accordion-body-line-height: 18px;
44
+ --#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
45
+ }
46
+
47
+ .#{$prefix}accordion--md .#{$prefix}accordion-header {
48
+ --#{$prefix}accordion-header-min-height: 2.5rem;
49
+ --#{$prefix}accordion-header-padding-y: 0.625rem;
50
+ --#{$prefix}accordion-header-padding-x: 1rem;
51
+ --#{$prefix}accordion-header-padding-level: 1.25rem;
52
+ --#{$prefix}accordion-header-gap: 1rem;
53
+
54
+ --#{$prefix}accordion-header-title-font-size: 0.8125rem;
55
+ --#{$prefix}accordion-header-title-line-height: 20px;
56
+
57
+ --#{$prefix}accordion-header-subtitle-font-size: 0.75rem;
58
+ --#{$prefix}accordion-header-subtitle-line-height: 16px;
59
+ }
60
+
61
+ .#{$prefix}accordion--md .#{$prefix}accordion-body {
62
+ --#{$prefix}accordion-body-padding-y: 1.25rem;
63
+ --#{$prefix}accordion-body-padding-x: 1rem;
64
+ --#{$prefix}accordion-body-font-size: 0.875rem;
65
+ --#{$prefix}accordion-body-line-height: 20px;
66
+ --#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
67
+ }
68
+
69
+ .#{$prefix}accordion--lg .#{$prefix}accordion-header {
70
+ --#{$prefix}accordion-header-min-height: 2.75rem;
71
+ --#{$prefix}accordion-header-padding-y: 0.625rem;
72
+ --#{$prefix}accordion-header-padding-x: 1rem;
73
+ --#{$prefix}accordion-header-padding-level: 1.25rem;
74
+ --#{$prefix}accordion-header-font-size: 0.75rem;
75
+ --#{$prefix}accordion-header-gap: 1rem;
76
+
77
+ --#{$prefix}accordion-header-title-font-size: 0.875rem;
78
+ --#{$prefix}accordion-header-title-line-height: 24px;
79
+
80
+ --#{$prefix}accordion-header-subtitle-font-size: 0.8125rem;
81
+ --#{$prefix}accordion-header-subtitle-line-height: 18px;
82
+ }
83
+
84
+ .#{$prefix}accordion--lg .#{$prefix}accordion-body {
85
+ --#{$prefix}accordion-body-padding-y: 1.5rem;
86
+ --#{$prefix}accordion-body-padding-x: 1rem;
87
+ --#{$prefix}accordion-body-font-size: 1rem;
88
+ --#{$prefix}accordion-body-line-height: 24px;
89
+ --#{$prefix}accordion-body-color: var(--#{$prefix}body-color);
90
+ }
91
+ }
package/scss/themes/fci/components/_badge.scss CHANGED
@@ -1,24 +1,42 @@
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
+ );
11
+
3
12
  .#{$prefix}theme-fci {
4
13
  .#{$prefix}badge {
5
- --#{$prefix}badge-padding-y: 0.125rem;
6
- --#{$prefix}badge-padding-x: 0.325rem;
14
+ --#{$prefix}badge-min-width: 18px;
15
+ --#{$prefix}badge-min-height: 18px;
16
+ --#{$prefix}badge-padding-y: 0;
17
+ --#{$prefix}badge-padding-x: 0.25rem;
7
18
  --#{$prefix}badge-font-size: 0.75rem;
8
- --#{$prefix}badge-font-weight: 700;
19
+ --#{$prefix}badge-font-weight: 400;
20
+ --#{$prefix}badge-line-height: 1;
9
21
  --#{$prefix}badge-border-radius: 9999px;
10
- --#{$prefix}badge-border-width: 2px;
11
- --#{$prefix}badge-border-color: var(--#{$prefix}white-color);
12
- --#{$prefix}badge-color: var(--#{$prefix}white-color);
13
- --#{$prefix}badge-background: var(--#{$prefix}primary-color);
14
22
 
15
23
  & > .#{$prefix}overlay {
16
24
  --#{$prefix}overlay-color: inherit;
17
- --#{$prefix}overlay-opacity: 0.08;
18
- --#{$prefix}_hover-overlay-color: inherit;
19
- --#{$prefix}_hover-overlay-opacity: 0.08;
20
- --#{$prefix}_active-overlay-color: inherit;
21
- --#{$prefix}_active-overlay-opacity: 0.12;
25
+ --#{$prefix}overlay-opacity: 0;
26
+ }
27
+
28
+ --#{$prefix}badge-color: var(--#{$prefix}white-color);
29
+ }
30
+
31
+ @each $key, $value in $colors-map {
32
+ .#{$prefix}badge--#{$key} {
33
+ --#{$prefix}badge-background: #{$value};
34
+ }
35
+
36
+ @if $key == 'secondary' {
37
+ .#{$prefix}badge--#{$key} {
38
+ --#{$prefix}badge-color: var(--#{$prefix}black-color);
39
+ }
22
40
  }
23
41
  }
24
42
  }
package/scss/themes/fci/components/_button.scss CHANGED
@@ -14,25 +14,12 @@ $colors-map: (
14
14
  --#{$prefix}button-font-weight: 400;
15
15
  --#{$prefix}button-font-family: var(--#{$prefix}font-sans);
16
16
 
17
- & > .#{$prefix}overlay {
18
- --#{$prefix}overlay-color: inherit;
19
- --#{$prefix}overlay-opacity: 0;
20
- --#{$prefix}_hover-overlay-opacity: 0;
21
- --#{$prefix}_hover-overlay-opacity: 0.12;
22
- --#{$prefix}_active-overlay-opacity: 0.24;
23
- }
24
-
25
- & > .#{$prefix}outline {
26
- --#{$prefix}outline-border-width: 1px;
27
- --#{$prefix}outline-border-color: transparent;
28
- }
29
-
30
17
  &--xs {
31
18
  --#{$prefix}button-height: 24px;
32
19
  --#{$prefix}button-padding-y: 0;
33
20
  --#{$prefix}button-padding-x: 0.625rem;
34
21
  --#{$prefix}button-font-size: 0.625rem;
35
- --#{$prefix}button-border-radius: 8px;
22
+ --#{$prefix}button-border-radius: 6px;
36
23
  --#{$prefix}button-gap: 0.25rem;
37
24
 
38
25
  .#{$prefix}icon {
@@ -45,7 +32,7 @@ $colors-map: (
45
32
  --#{$prefix}button-padding-y: 0;
46
33
  --#{$prefix}button-padding-x: 0.75rem;
47
34
  --#{$prefix}button-font-size: 0.75rem;
48
- --#{$prefix}button-border-radius: 8px;
35
+ --#{$prefix}button-border-radius: 6px;
49
36
  --#{$prefix}button-gap: 0.25rem;
50
37
 
51
38
  .#{$prefix}icon {
@@ -58,7 +45,7 @@ $colors-map: (
58
45
  --#{$prefix}button-padding-y: 0;
59
46
  --#{$prefix}button-padding-x: 0.875rem;
60
47
  --#{$prefix}button-font-size: 0.875rem;
61
- --#{$prefix}button-border-radius: 8px;
48
+ --#{$prefix}button-border-radius: 6px;
62
49
  --#{$prefix}button-gap: 0.375rem;
63
50
 
64
51
  .#{$prefix}icon {
@@ -71,7 +58,7 @@ $colors-map: (
71
58
  --#{$prefix}button-padding-y: 0;
72
59
  --#{$prefix}button-padding-x: 1rem;
73
60
  --#{$prefix}button-font-size: 1rem;
74
- --#{$prefix}button-border-radius: 8px;
61
+ --#{$prefix}button-border-radius: 6px;
75
62
  --#{$prefix}button-gap: 0.5rem;
76
63
 
77
64
  .#{$prefix}icon {
@@ -84,7 +71,7 @@ $colors-map: (
84
71
  --#{$prefix}button-padding-y: 0;
85
72
  --#{$prefix}button-padding-x: 1.125rem;
86
73
  --#{$prefix}button-font-size: 1.125rem;
87
- --#{$prefix}button-border-radius: 8px;
74
+ --#{$prefix}button-border-radius: 6px;
88
75
  --#{$prefix}button-gap: 0.5rem;
89
76
 
90
77
  .#{$prefix}icon {
@@ -97,23 +84,66 @@ $colors-map: (
97
84
  --#{$prefix}button-border-color: transparent;
98
85
  --#{$prefix}button-color: var(--#{$prefix}white-color);
99
86
 
87
+ & > .#{$prefix}overlay {
88
+ --#{$prefix}overlay-color: inherit;
89
+ --#{$prefix}overlay-opacity: 0;
90
+ --#{$prefix}_hover-overlay-opacity: 0;
91
+ --#{$prefix}_hover-overlay-opacity: 0.12;
92
+ --#{$prefix}_active-overlay-opacity: 0.24;
93
+ }
94
+
95
+ & > .#{$prefix}outline {
96
+ --#{$prefix}outline-border-width: 1px;
97
+ --#{$prefix}outline-border-color: transparent;
98
+ }
99
+
100
100
  .#{$prefix}chip {
101
101
  --#{$prefix}chip-background: var(--#{$prefix}white-color);
102
102
  }
103
103
  }
104
104
 
105
105
  &--outlined {
106
+ & > .#{$prefix}overlay {
107
+ --#{$prefix}overlay-color: inherit;
108
+ --#{$prefix}overlay-opacity: 0;
109
+ --#{$prefix}_hover-overlay-opacity: 0;
110
+ --#{$prefix}_hover-overlay-opacity: 0.12;
111
+ --#{$prefix}_active-overlay-opacity: 0.24;
112
+ }
113
+
106
114
  & > .#{$prefix}outline {
115
+ --#{$prefix}outline-border-width: 1px;
107
116
  --#{$prefix}outline-border-color: currentColor;
108
117
  }
109
118
  }
110
119
 
111
120
  &--flat {
112
121
  & > .#{$prefix}overlay {
122
+ --#{$prefix}overlay-color: inherit;
113
123
  --#{$prefix}overlay-opacity: 0.08;
114
124
  --#{$prefix}_hover-overlay-opacity: 0.12;
115
125
  --#{$prefix}_active-overlay-opacity: 0.24;
116
126
  }
127
+
128
+ & > .#{$prefix}outline {
129
+ --#{$prefix}outline-border-width: 1px;
130
+ --#{$prefix}outline-border-color: transparent;
131
+ }
132
+ }
133
+
134
+ &--text {
135
+ & > .#{$prefix}overlay {
136
+ --#{$prefix}overlay-color: inherit;
137
+ --#{$prefix}overlay-opacity: 0;
138
+ --#{$prefix}_hover-overlay-opacity: 0;
139
+ --#{$prefix}_hover-overlay-opacity: 0.12;
140
+ --#{$prefix}_active-overlay-opacity: 0.24;
141
+ }
142
+
143
+ & > .#{$prefix}outline {
144
+ --#{$prefix}outline-border-width: 1px;
145
+ --#{$prefix}outline-border-color: transparent;
146
+ }
117
147
  }
118
148
  }
119
149
 
@@ -136,19 +166,19 @@ $colors-map: (
136
166
 
137
167
  @if $key == 'secondary' {
138
168
  .#{$prefix}button--filled.#{$prefix}button--#{$key} {
139
- --#{$prefix}button-color: var(--#{$prefix}black-color);
169
+ --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
140
170
  }
141
171
 
142
172
  .#{$prefix}button--outlined.#{$prefix}button--#{$key} {
143
- --#{$prefix}button-color: var(--#{$prefix}black-color);
173
+ --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
144
174
  }
145
175
 
146
176
  .#{$prefix}button--flat.#{$prefix}button--#{$key} {
147
- --#{$prefix}button-color: var(--#{$prefix}black-color);
177
+ --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
148
178
  }
149
179
 
150
180
  .#{$prefix}button--text.#{$prefix}button--#{$key} {
151
- --#{$prefix}button-color: var(--#{$prefix}black-color);
181
+ --#{$prefix}button-color: var(--#{$prefix}secondary-action-color);
152
182
  }
153
183
  }
154
184
  }
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: rgba(9, 30, 66, 0.14);
8
- --#{$prefix}card-border-radius: 12px;
8
+ --#{$prefix}card-border-radius: 6px;
9
9
 
10
10
  & > .#{$prefix}overlay {
11
11
  --#{$prefix}overlay-color: inherit;
@@ -35,10 +35,6 @@
35
35
 
36
36
  --#{$prefix}card-header-subtitle-font-weight: 400;
37
37
  --#{$prefix}card-header-subtitle-color: var(--#{$prefix}subtitle-color);
38
-
39
- // .#{$prefix}icon {
40
- // --#{$prefix}icon-color: var(--#{$prefix}primary-color);
41
- // }
42
38
  }
43
39
 
44
40
  .#{$prefix}card-body {
@@ -60,10 +56,6 @@
60
56
  --#{$prefix}card-header-title-line-height: 14px;
61
57
  }
62
58
 
63
- // .#{$prefix}card--sm .#{$prefix}card-header .#{$prefix}icon {
64
- // --#{$prefix}icon-font-size: 18px;
65
- // }
66
-
67
59
  .#{$prefix}card--sm .#{$prefix}card-body {
68
60
  --#{$prefix}card-body-padding-y: 1rem;
69
61
  --#{$prefix}card-body-padding-x: 1rem;
@@ -86,10 +78,6 @@
86
78
  --#{$prefix}card-header-subtitle-line-height: 16px;
87
79
  }
88
80
 
89
- // .#{$prefix}card--md .#{$prefix}card-header .#{$prefix}icon {
90
- // --#{$prefix}icon-font-size: 20px;
91
- // }
92
-
93
81
  .#{$prefix}card--md .#{$prefix}card-body {
94
82
  --#{$prefix}card-body-padding-y: 1.25rem;
95
83
  --#{$prefix}card-body-padding-x: 1rem;
@@ -113,10 +101,6 @@
113
101
  --#{$prefix}card-header-subtitle-line-height: 18px;
114
102
  }
115
103
 
116
- // .#{$prefix}card--lg .#{$prefix}card-header .#{$prefix}icon {
117
- // --#{$prefix}icon-font-size: 22px;
118
- // }
119
-
120
104
  .#{$prefix}card--lg .#{$prefix}card-body {
121
105
  --#{$prefix}card-body-padding-y: 1.5rem;
122
106
  --#{$prefix}card-body-padding-x: 1rem;
package/scss/themes/fci/components/_chip.scss CHANGED
@@ -1,6 +1,4 @@
1
1
  @use '../../../variables' as *;
2
- @use '../../../mixins/chip' as *;
3
- @use '../../../mixins/overlay' as *;
4
2
 
5
3
  $colors-map: (
6
4
  primary: var(--#{$prefix}primary-color),
@@ -33,7 +31,7 @@ $colors-map: (
33
31
  --#{$prefix}chip-padding-y: 0;
34
32
  --#{$prefix}chip-padding-x: 0.625rem;
35
33
  --#{$prefix}chip-font-size: 0.625rem;
36
- --#{$prefix}chip-border-radius: 8px;
34
+ --#{$prefix}chip-border-radius: 6px;
37
35
  --#{$prefix}chip-gap: 0.25rem;
38
36
 
39
37
  .#{$prefix}icon {
@@ -46,7 +44,7 @@ $colors-map: (
46
44
  --#{$prefix}chip-padding-y: 0;
47
45
  --#{$prefix}chip-padding-x: 0.75rem;
48
46
  --#{$prefix}chip-font-size: 0.75rem;
49
- --#{$prefix}chip-border-radius: 8px;
47
+ --#{$prefix}chip-border-radius: 6px;
50
48
  --#{$prefix}chip-gap: 0.25rem;
51
49
 
52
50
  .#{$prefix}icon {
@@ -59,7 +57,7 @@ $colors-map: (
59
57
  --#{$prefix}chip-padding-y: 0;
60
58
  --#{$prefix}chip-padding-x: 0.875rem;
61
59
  --#{$prefix}chip-font-size: 0.875rem;
62
- --#{$prefix}chip-border-radius: 8px;
60
+ --#{$prefix}chip-border-radius: 6px;
63
61
  --#{$prefix}chip-gap: 0.375rem;
64
62
 
65
63
  .#{$prefix}icon {
@@ -72,7 +70,7 @@ $colors-map: (
72
70
  --#{$prefix}chip-padding-y: 0;
73
71
  --#{$prefix}chip-padding-x: 1rem;
74
72
  --#{$prefix}chip-font-size: 1rem;
75
- --#{$prefix}chip-border-radius: 8px;
73
+ --#{$prefix}chip-border-radius: 6px;
76
74
  --#{$prefix}chip-gap: 0.5rem;
77
75
 
78
76
  .#{$prefix}icon {
@@ -85,7 +83,7 @@ $colors-map: (
85
83
  --#{$prefix}chip-padding-y: 0;
86
84
  --#{$prefix}chip-padding-x: 1.125rem;
87
85
  --#{$prefix}chip-font-size: 1.125rem;
88
- --#{$prefix}chip-border-radius: 8px;
86
+ --#{$prefix}chip-border-radius: 6px;
89
87
  --#{$prefix}chip-gap: 0.5rem;
90
88
 
91
89
  .#{$prefix}icon {
@@ -104,6 +102,12 @@ $colors-map: (
104
102
  --#{$prefix}outline-border-color: currentColor;
105
103
  }
106
104
  }
105
+
106
+ &--flat {
107
+ & > .#{$prefix}overlay {
108
+ --#{$prefix}overlay-opacity: 0.08;
109
+ }
110
+ }
107
111
  }
108
112
 
109
113
  @each $key, $value in $colors-map {
@@ -111,18 +115,34 @@ $colors-map: (
111
115
  --#{$prefix}chip-background: #{$value};
112
116
  }
113
117
 
114
- @if $key == 'secondary' {
115
- .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
116
- --#{$prefix}chip-color: var(--#{$prefix}black-color);
117
- }
118
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
119
+ --#{$prefix}chip-color: #{$value};
118
120
  }
119
121
 
120
- .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
122
+ .#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
121
123
  --#{$prefix}chip-color: #{$value};
122
124
  }
123
125
 
124
126
  .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
125
127
  --#{$prefix}chip-color: #{$value};
126
128
  }
129
+
130
+ @if $key == 'secondary' {
131
+ .#{$prefix}chip--filled.#{$prefix}chip--#{$key} {
132
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
133
+ }
134
+
135
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
136
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
137
+ }
138
+
139
+ .#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
140
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
141
+ }
142
+
143
+ .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
144
+ --#{$prefix}chip-color: var(--#{$prefix}black-color);
145
+ }
146
+ }
127
147
  }
128
148
  }
package/scss/themes/fci/components/_icon.scss CHANGED
@@ -41,7 +41,7 @@ $colors-map: (
41
41
 
42
42
  @if $key == 'secondary' {
43
43
  &--#{$key} {
44
- --#{$prefix}icon-color: var(--#{$prefix}black-color);
44
+ --#{$prefix}icon-color: var(--#{$prefix}secondary-action-color);
45
45
  }
46
46
  }
47
47
  }
package/scss/themes/fci/components/_index.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use 'accordion';
2
+
1
3
  @use 'toolbar';
2
4
 
3
5
  @use 'icon';
package/scss/themes/fci/components/_input.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  --#{$prefix}input-padding-y: 0rem;
6
6
  --#{$prefix}input-padding-x: 0.875rem;
7
7
  --#{$prefix}input-height: 32px;
8
- --#{$prefix}input-font-size: 0.875rem;
8
+ --#{$prefix}input-font-size: 0.75rem;
9
9
  --#{$prefix}input-font-family: var(--#{$prefix}font-sans);
10
10
  --#{$prefix}input-line-height: 24px;
11
11
  --#{$prefix}input-border-radius: 6px;
package/scss/themes/fci/components/_menu.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  .#{$prefix}menu-item {
12
- --#{$prefix}menu-item-height: 40px;
12
+ --#{$prefix}menu-item-height: 36px;
13
13
  --#{$prefix}menu-item-padding-y: 0;
14
14
  --#{$prefix}menu-item-padding-x: 1rem;
15
15
  --#{$prefix}menu-item-padding-level: 1.5rem;
@@ -43,7 +43,7 @@
43
43
  }
44
44
 
45
45
  .#{$prefix}menu-group {
46
- --#{$prefix}menu-group-height: 40px;
46
+ --#{$prefix}menu-group-height: 36px;
47
47
  --#{$prefix}menu-group-padding-y: 0;
48
48
  --#{$prefix}menu-group-padding-x: 1rem;
49
49
  --#{$prefix}menu-group-padding-level: 2rem;
package/scss/themes/fci/components/_result.scss CHANGED
@@ -18,6 +18,9 @@
18
18
  }
19
19
 
20
20
  &--md {
21
+ --#{$prefix}result-padding-y: 3rem;
22
+ --#{$prefix}result-padding-x: 3rem;
23
+
21
24
  --#{$prefix}result-gap: 1.5rem;
22
25
 
23
26
  --#{$prefix}result-content-gap: 0.5rem;