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

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 (11) hide show
  1. package/css/fci.css +85 -38
  2. package/css/fci.min.css +1 -1
  3. package/css/styles.css +16 -917
  4. package/css/styles.min.css +1 -1
  5. package/package.json +1 -1
  6. package/scss/_utilities.scss +0 -76
  7. package/scss/components/_descriptions.scss +19 -5
  8. package/scss/themes/fci/components/_button.scss +0 -10
  9. package/scss/themes/fci/components/_card.scss +29 -29
  10. package/scss/themes/fci/components/_chip.scss +56 -19
  11. package/scss/themes/fci/components/_descriptions.scss +17 -10
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,32 +88,76 @@ $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);
119
+ }
120
+
121
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$color} {
122
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
123
+ }
124
+
125
+ .#{$prefix}chip--flat.#{$prefix}chip--#{$color} {
126
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
127
+ }
128
+
129
+ .#{$prefix}chip--text.#{$prefix}chip--#{$color} {
130
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-color);
131
+ }
132
+
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
+ }
142
+ }
112
143
  }
113
144
 
114
- .#{$prefix}chip--outlined.#{$prefix}chip--#{$key} {
115
- --#{$prefix}chip-color: #{$value};
145
+ @if $color == 'success' or $color == 'warning' {
146
+ .#{$prefix}chip--outlined.#{$prefix}chip--#{$color} {
147
+ --#{$prefix}chip-color: var(--#{$prefix}#{$color}-dark-color);
148
+ }
116
149
  }
117
150
 
118
- .#{$prefix}chip--flat.#{$prefix}chip--#{$key} {
119
- --#{$prefix}chip-color: #{$value};
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);
154
+ }
120
155
  }
121
156
 
122
- .#{$prefix}chip--text.#{$prefix}chip--#{$key} {
123
- --#{$prefix}chip-color: #{$value};
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);
160
+ }
124
161
  }
125
162
  }
126
163
  }
package/scss/themes/fci/components/_descriptions.scss CHANGED
@@ -3,35 +3,42 @@
3
3
  .#{$prefix}theme-fci {
4
4
  .#{$prefix}descriptions {
5
5
  --#{$prefix}description-label-color: var(--#{$prefix}secondary-action-color);
6
-
7
6
  --#{$prefix}description-text-color: var(--#{$prefix}primary-color);
8
- --#{$prefix}description-text-font-weight: 500;
9
7
  }
10
8
 
11
9
  .#{$prefix}descriptions--sm {
12
10
  --#{$prefix}descriptions-gap-y: 0.5rem;
13
11
  --#{$prefix}descriptions-gap-x: 0.5rem;
14
12
 
13
+ --#{$prefix}description-gap-y: 0.125rem;
14
+ --#{$prefix}description-gap-x: 0.125rem;
15
+
15
16
  --#{$prefix}description-label-font-size: 12px;
16
17
 
17
18
  --#{$prefix}description-text-font-size: 12px;
18
19
  }
19
20
 
20
21
  .#{$prefix}descriptions--md {
21
- --#{$prefix}descriptions-gap-y: 1rem;
22
- --#{$prefix}descriptions-gap-x: 1rem;
22
+ --#{$prefix}descriptions-gap-y: 0.75rem;
23
+ --#{$prefix}descriptions-gap-x: 0.75rem;
23
24
 
24
- --#{$prefix}description-label-font-size: 14px;
25
+ --#{$prefix}description-gap-y: 0.25rem;
26
+ --#{$prefix}description-gap-x: 0.25rem;
25
27
 
26
- --#{$prefix}description-text-font-size: 14px;
28
+ --#{$prefix}description-label-font-size: 13px;
29
+
30
+ --#{$prefix}description-text-font-size: 13px;
27
31
  }
28
32
 
29
33
  .#{$prefix}descriptions--lg {
30
- --#{$prefix}descriptions-gap-y: 1.5rem;
31
- --#{$prefix}descriptions-gap-x: 1.5rem;
34
+ --#{$prefix}descriptions-gap-y: 1rem;
35
+ --#{$prefix}descriptions-gap-x: 1rem;
32
36
 
33
- --#{$prefix}description-label-font-size: 16px;
37
+ --#{$prefix}description-gap-y: 0.5rem;
38
+ --#{$prefix}description-gap-x: 0.5rem;
34
39
 
35
- --#{$prefix}description-text-font-size: 16px;
40
+ --#{$prefix}description-label-font-size: 14px;
41
+
42
+ --#{$prefix}description-text-font-size: 14px;
36
43
  }
37
44
  }