@teambit/compositions 1.0.957 → 1.0.959

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 (21) hide show
  1. package/compositions.module.scss +232 -13
  2. package/compositions.tsx +85 -11
  3. package/dist/compositions.js +107 -3
  4. package/dist/compositions.js.map +1 -1
  5. package/dist/compositions.module.scss +232 -13
  6. package/dist/{preview-1776705141733.js → preview-1776776950183.js} +2 -2
  7. package/dist/ui/compositions-panel/compositions-panel.d.ts +0 -15
  8. package/dist/ui/compositions-panel/compositions-panel.js +10 -59
  9. package/dist/ui/compositions-panel/compositions-panel.js.map +1 -1
  10. package/dist/ui/compositions-panel/compositions-panel.module.scss +71 -119
  11. package/dist/ui/compositions-panel/live-control-input.module.scss +79 -22
  12. package/dist/ui/compositions-panel/live-control-panel.module.scss +29 -7
  13. package/dist/ui/compositions-panel/live-controls-diff-panel.module.scss +34 -34
  14. package/dist/ui/compositions-panel/overlay.module.scss +4 -2
  15. package/package.json +15 -16
  16. package/ui/compositions-panel/compositions-panel.module.scss +71 -119
  17. package/ui/compositions-panel/compositions-panel.tsx +40 -86
  18. package/ui/compositions-panel/live-control-input.module.scss +79 -22
  19. package/ui/compositions-panel/live-control-panel.module.scss +29 -7
  20. package/ui/compositions-panel/live-controls-diff-panel.module.scss +34 -34
  21. package/ui/compositions-panel/overlay.module.scss +4 -2
package/ui/compositions-panel/live-control-panel.module.scss CHANGED
@@ -1,16 +1,38 @@
1
1
  .container {
2
- display: flex;
3
- flex-direction: column;
4
- font-size: 12px;
5
- padding: 8px 0;
2
+ display: grid;
3
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4
+ gap: 2px 0;
5
+ font-size: 13px;
6
+ padding: 0;
6
7
  width: 100%;
7
8
  }
8
9
 
9
10
  .item {
10
- padding: 4px 8px;
11
+ padding: 8px 14px;
12
+ border-right: 1px solid var(--bit-border-color-lightest, rgba(0, 0, 0, 0.05));
13
+ border-bottom: 1px solid var(--bit-border-color-lightest, rgba(0, 0, 0, 0.05));
14
+ transition: background 120ms ease;
15
+ min-width: 0;
16
+
17
+ &:hover {
18
+ background: rgba(0, 0, 0, 0.015);
19
+ }
11
20
  }
12
21
 
13
22
  .label {
14
- font-weight: bold;
15
- color: var(--on-background-color);
23
+ display: flex;
24
+ align-items: center;
25
+ gap: 6px;
26
+ margin-bottom: 6px;
27
+
28
+ label {
29
+ font-size: 11px;
30
+ font-weight: 600;
31
+ letter-spacing: 0.3px;
32
+ text-transform: uppercase;
33
+ color: var(--bit-text-color-light, #8b8d98);
34
+ overflow: hidden;
35
+ text-overflow: ellipsis;
36
+ white-space: nowrap;
37
+ }
16
38
  }
package/ui/compositions-panel/live-controls-diff-panel.module.scss CHANGED
@@ -30,21 +30,20 @@
30
30
  }
31
31
 
32
32
  .columnHeader {
33
- font-size: var(--bit-p-xxs, 12px);
33
+ font-size: 11px;
34
34
  font-weight: 600;
35
35
  text-transform: uppercase;
36
36
  letter-spacing: 0.5px;
37
37
  line-height: 1.3;
38
- color: var(--on-background-color, #222222);
39
- opacity: 0.5;
38
+ color: var(--bit-text-color-light, #8b8d98);
40
39
  margin-bottom: 12px;
41
40
  padding-bottom: 8px;
42
- border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
41
+ border-bottom: 1px solid var(--bit-border-color-lightest, rgba(0, 0, 0, 0.06));
43
42
  }
44
43
 
45
44
  .columnDivider {
46
45
  width: 1px;
47
- background: var(--border-medium-color, rgba(0, 0, 0, 0.14));
46
+ background: var(--bit-border-color-lightest, rgba(0, 0, 0, 0.08));
48
47
  flex-shrink: 0;
49
48
  margin: 0 8px;
50
49
  }
@@ -54,7 +53,7 @@
54
53
  margin: 0;
55
54
  padding: 0;
56
55
  display: grid;
57
- grid-template-columns: repeat(2, minmax(0, 1fr));
56
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
58
57
  gap: 14px 12px;
59
58
  align-items: start;
60
59
  }
@@ -72,9 +71,9 @@
72
71
 
73
72
  .controlMain {
74
73
  display: grid;
75
- grid-template-rows: auto minmax(36px, auto);
74
+ grid-template-rows: auto minmax(34px, auto);
76
75
  align-content: start;
77
- row-gap: 8px;
76
+ row-gap: 6px;
78
77
  flex: 1;
79
78
  min-width: 0;
80
79
  }
@@ -91,33 +90,35 @@
91
90
  min-height: 20px;
92
91
 
93
92
  label {
94
- font-size: var(--bit-p-xs, 13px);
95
- font-weight: 500;
96
- color: var(--on-background-color, #222222);
93
+ font-size: 11px;
94
+ font-weight: 600;
95
+ letter-spacing: 0.3px;
96
+ text-transform: uppercase;
97
+ color: var(--bit-text-color-light, #8b8d98);
97
98
  }
98
99
  }
99
100
 
100
101
  .sourceTag {
101
102
  font-size: 10px;
102
103
  line-height: 14px;
103
- padding: 0 5px;
104
- border-radius: 999px;
104
+ padding: 1px 5px;
105
+ border-radius: 3px;
105
106
  text-transform: capitalize;
106
107
  font-weight: 500;
107
108
  }
108
109
 
109
110
  .tagCommon {
110
- background: rgba(106, 87, 253, 0.12);
111
- color: var(--primary-color, #6a57fd);
111
+ background: rgba(108, 92, 231, 0.08);
112
+ color: var(--bit-accent-color, #6c5ce7);
112
113
  }
113
114
 
114
115
  .tagBase {
115
- background: rgba(255, 152, 0, 0.12);
116
+ background: rgba(255, 152, 0, 0.08);
116
117
  color: #e65100;
117
118
  }
118
119
 
119
120
  .tagCompare {
120
- background: rgba(33, 150, 243, 0.12);
121
+ background: rgba(33, 150, 243, 0.08);
121
122
  color: #1565c0;
122
123
  }
123
124
 
@@ -129,9 +130,9 @@
129
130
  color: var(--skeleton-color, #e0e0e0);
130
131
  }
131
132
 
132
- @media (max-width: 1200px) {
133
+ @media (max-width: 900px) {
133
134
  .column {
134
- min-width: 280px;
135
+ min-width: 240px;
135
136
  }
136
137
 
137
138
  .controlsList {
@@ -142,19 +143,18 @@
142
143
 
143
144
  .emptyState {
144
145
  display: flex;
146
+ flex-direction: column;
145
147
  align-items: center;
146
- gap: 12px;
147
- padding: 12px;
148
- border: 1px dashed var(--border-medium-color, rgba(0, 0, 0, 0.12));
149
- border-radius: 8px;
150
- background: var(--background-color, #ffffff);
148
+ gap: 8px;
149
+ padding: 32px 16px;
150
+ text-align: center;
151
151
  }
152
152
 
153
153
  .emptyStateIconWrap {
154
- width: 32px;
155
- height: 32px;
156
- border-radius: 8px;
157
- background: rgba(0, 0, 0, 0.04);
154
+ width: 36px;
155
+ height: 36px;
156
+ border-radius: 10px;
157
+ background: var(--bit-border-color-lightest, rgba(0, 0, 0, 0.04));
158
158
  display: flex;
159
159
  align-items: center;
160
160
  justify-content: center;
@@ -163,7 +163,7 @@
163
163
  .emptyStateIcon {
164
164
  width: 18px;
165
165
  height: 18px;
166
- opacity: 0.7;
166
+ color: var(--bit-text-color-light, #8b8d98);
167
167
  }
168
168
 
169
169
  .emptyStateText {
@@ -173,13 +173,13 @@
173
173
  }
174
174
 
175
175
  .emptyStateTitle {
176
- font-size: var(--bit-p-xs, 13px);
176
+ font-size: 12px;
177
177
  font-weight: 600;
178
- color: var(--on-background-color, #222222);
178
+ color: var(--on-background-color, #1c2024);
179
179
  }
180
180
 
181
181
  .emptyStateSubtitle {
182
- font-size: var(--bit-p-xxs, 12px);
183
- color: var(--on-background-color, #222222);
184
- opacity: 0.7;
182
+ font-size: 12px;
183
+ color: var(--bit-text-color-light, #8b8d98);
184
+ line-height: 1.5;
185
185
  }
package/ui/compositions-panel/overlay.module.scss CHANGED
@@ -5,9 +5,11 @@
5
5
  z-index: $modal-z-index - 1;
6
6
  overflow-y: auto;
7
7
  background: var(--surface-neutral-color, #fff);
8
- border: 1px solid var(--border-medium-color, #ededed);
8
+ border: 1px solid var(--bit-border-color-lightest, #eaeaec);
9
9
  border-radius: 8px;
10
- box-shadow: var(--bit-shadow-hover-low, 0 2px 8px 0 rgba(0, 0, 0, 0.2));
10
+ box-shadow:
11
+ 0 4px 16px rgba(0, 0, 0, 0.08),
12
+ 0 1px 3px rgba(0, 0, 0, 0.06);
11
13
  }
12
14
 
13
15
  .suppressNativeMenu {