@agorapulse/ui-theme 20.1.1 → 20.1.3

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 (7) hide show
  1. package/agorapulse-ui-theme-20.1.3.tgz +0 -0
  2. package/assets/desktop_variables.css +0 -31
  3. package/assets/mobile_variables.css +0 -31
  4. package/assets/style/_table.scss +76 -82
  5. package/package.json +1 -1
  6. package/agorapulse-ui-theme-20.1.1.tgz +0 -0
  7. package/src/tokens/components/selection-dropdown.json +0 -141
package/agorapulse-ui-theme-20.1.3.tgz ADDED
Binary file
package/assets/desktop_variables.css CHANGED
@@ -538,37 +538,6 @@
538
538
  --comp-select-search-bar-bottom-link-padding-top: 12px;
539
539
  --comp-select-search-bar-bottom-link-padding-bottom: 4px;
540
540
  --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
541
- --comp-selection-dropdown-background-color: #FFFFFF;
542
- --comp-selection-dropdown-box-shadow: 0px 4px 25px -2px rgba(52, 69, 99, 0.15), 0px 4px 6px -2px rgba(52, 69, 99, 0.15);
543
- --comp-selection-dropdown-border-radius: 4px;
544
- --comp-selection-dropdown-header-top-padding: 12px 16px;
545
- --comp-selection-dropdown-header-title-font-size: 16px;
546
- --comp-selection-dropdown-header-title-font-weight: 700;
547
- --comp-selection-dropdown-header-title-text-color: #344563;
548
- --comp-selection-dropdown-header-searchbar-padding: 0 8px 8px;
549
- --comp-selection-dropdown-content-padding: 8px 0;
550
- --comp-selection-dropdown-footer-padding: 12px 16px;
551
- --comp-selection-dropdown-no-results-text-color: #5D6A82;
552
- --comp-selection-dropdown-no-results-font-size: 14px;
553
- --comp-selection-dropdown-item-padding: 8px 16px;
554
- --comp-selection-dropdown-item-text-size: 14px;
555
- --comp-selection-dropdown-item-text-line-height: 18px;
556
- --comp-selection-dropdown-item-text-color: #344563;
557
- --comp-selection-dropdown-item-background-color: #FFFFFF;
558
- --comp-selection-dropdown-item-background-color-hover: #E8F4FF;
559
- --comp-selection-dropdown-item-background-color-focused: #D1E8FF;
560
- --comp-selection-dropdown-item-icon-spacing: 8px;
561
- --comp-selection-dropdown-item-label-spacing: 8px;
562
- --comp-selection-dropdown-item-description-color: #5D6A82;
563
- --comp-selection-dropdown-item-description-size: 12px;
564
- --comp-selection-dropdown-item-description-line-height: 18px;
565
- --comp-selection-dropdown-divider-color: #EAECEF;
566
- --comp-selection-dropdown-divider-margin: 8px 0;
567
- --comp-selection-dropdown-group-header-padding: 8px 16px;
568
- --comp-selection-dropdown-group-header-border-top-color: #EAECEF;
569
- --comp-selection-dropdown-group-header-background-color: #F9F9FA;
570
- --comp-selection-dropdown-selected-section-margin-bottom: 8px;
571
- --comp-selection-dropdown-selected-section-padding-bottom: 8px;
572
541
  --comp-snackbar-text-style-font-family: Averta;
573
542
  --comp-snackbar-text-style-size: 14px;
574
543
  --comp-snackbar-text-style-font-weight: 400;
package/assets/mobile_variables.css CHANGED
@@ -538,37 +538,6 @@
538
538
  --comp-select-search-bar-bottom-link-padding-top: 12px;
539
539
  --comp-select-search-bar-bottom-link-padding-bottom: 4px;
540
540
  --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
541
- --comp-selection-dropdown-background-color: #FFFFFF;
542
- --comp-selection-dropdown-box-shadow: 0px 4px 25px -2px rgba(52, 69, 99, 0.15), 0px 4px 6px -2px rgba(52, 69, 99, 0.15);
543
- --comp-selection-dropdown-border-radius: 4px;
544
- --comp-selection-dropdown-header-top-padding: 12px 16px;
545
- --comp-selection-dropdown-header-title-font-size: 16px;
546
- --comp-selection-dropdown-header-title-font-weight: 700;
547
- --comp-selection-dropdown-header-title-text-color: #344563;
548
- --comp-selection-dropdown-header-searchbar-padding: 0 8px 8px;
549
- --comp-selection-dropdown-content-padding: 8px 0;
550
- --comp-selection-dropdown-footer-padding: 12px 16px;
551
- --comp-selection-dropdown-no-results-text-color: #5D6A82;
552
- --comp-selection-dropdown-no-results-font-size: 14px;
553
- --comp-selection-dropdown-item-padding: 8px 16px;
554
- --comp-selection-dropdown-item-text-size: 14px;
555
- --comp-selection-dropdown-item-text-line-height: 18px;
556
- --comp-selection-dropdown-item-text-color: #344563;
557
- --comp-selection-dropdown-item-background-color: #FFFFFF;
558
- --comp-selection-dropdown-item-background-color-hover: #E8F4FF;
559
- --comp-selection-dropdown-item-background-color-focused: #D1E8FF;
560
- --comp-selection-dropdown-item-icon-spacing: 8px;
561
- --comp-selection-dropdown-item-label-spacing: 8px;
562
- --comp-selection-dropdown-item-description-color: #5D6A82;
563
- --comp-selection-dropdown-item-description-size: 12px;
564
- --comp-selection-dropdown-item-description-line-height: 18px;
565
- --comp-selection-dropdown-divider-color: #EAECEF;
566
- --comp-selection-dropdown-divider-margin: 8px 0;
567
- --comp-selection-dropdown-group-header-padding: 8px 16px;
568
- --comp-selection-dropdown-group-header-border-top-color: #EAECEF;
569
- --comp-selection-dropdown-group-header-background-color: #F9F9FA;
570
- --comp-selection-dropdown-selected-section-margin-bottom: 8px;
571
- --comp-selection-dropdown-selected-section-padding-bottom: 8px;
572
541
  --comp-snackbar-text-style-font-family: Averta;
573
542
  --comp-snackbar-text-style-size: 14px;
574
543
  --comp-snackbar-text-style-font-weight: 400;
package/assets/style/_table.scss CHANGED
@@ -15,12 +15,15 @@
15
15
  background-color: var(--ref-color-grey-05);
16
16
  }
17
17
 
18
- &.ap-table--small td[cdk-cell] {
19
- height: 40px;
18
+ &.ap-table--small {
19
+ th[cdk-header-cell],
20
+ td[cdk-cell] {
21
+ height: 40px;
22
+ }
20
23
  }
21
24
 
22
25
  &.ap-table--striped tbody tr[cdk-row]:nth-child(even) {
23
- background-color: var(--ref-color-grey-05);
26
+ background-color: var(--ref-color-grey-bg);
24
27
  }
25
28
 
26
29
  // Selected rows in striped tables - higher specificity to override striped background
@@ -30,7 +33,8 @@
30
33
 
31
34
  // Header cells - using CDK attribute selector
32
35
  th[cdk-header-cell] {
33
- padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
36
+ height: 52px;
37
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
34
38
  text-align: left;
35
39
  font-size: var(--ref-font-size-xs);
36
40
  font-weight: var(--ref-font-weight-bold);
@@ -56,13 +60,33 @@
56
60
  justify-content: flex-end;
57
61
  }
58
62
 
59
- // Checkbox header cells
60
- &.ap-table__header-cell--checkbox {
63
+ &.ap-table__header-cell--sortable {
64
+ cursor: pointer;
65
+
66
+ // Hide sorting icon by default
67
+ ap-symbol {
68
+ opacity: 0;
69
+ }
70
+
71
+ // Show sorting icon on hover
72
+ &:hover ap-symbol {
73
+ opacity: 1;
74
+ }
75
+ }
76
+ }
77
+
78
+ // Checkbox cells - shared styles for both header and body
79
+ th[cdk-header-cell].ap-table__header-cell--checkbox,
80
+ td[cdk-cell].ap-table__body-cell--checkbox {
81
+ width: 52px;
82
+ text-align: center;
83
+ }
84
+
85
+ // Small variant checkbox cells
86
+ &.ap-table--small {
87
+ th[cdk-header-cell].ap-table__header-cell--checkbox,
88
+ td[cdk-cell].ap-table__body-cell--checkbox {
61
89
  width: 40px;
62
- text-align: center;
63
- justify-content: center;
64
- padding: var(--ref-spacing-xs);
65
- vertical-align: middle;
66
90
  }
67
91
  }
68
92
 
@@ -86,24 +110,15 @@
86
110
  }
87
111
  }
88
112
 
89
- // Checkbox body cells
90
- &.ap-table__body-cell--checkbox {
91
- width: 40px;
92
- text-align: center;
93
- justify-content: center;
94
- padding: var(--ref-spacing-xs);
95
- vertical-align: middle;
96
- }
97
-
98
113
  // Drag handle body cells
99
114
  &.ap-table__body-cell--drag {
100
115
  padding: 0 var(--ref-spacing-sm);
101
116
  }
102
117
  }
103
118
 
104
- // Header rows - using CDK attribute selector
105
- tr[cdk-header-row] {
106
- // Header row specific styles can go here if needed
119
+ // Show grabbing cursor on grab icon when row is being dragged
120
+ .ap-table__drag-handle {
121
+ cursor: move;
107
122
  }
108
123
 
109
124
  // Body rows - using CDK attribute selector
@@ -123,10 +138,6 @@
123
138
  }
124
139
  }
125
140
 
126
- &:hover {
127
- background-color: var(--ref-color-grey-05);
128
- }
129
-
130
141
  &.selected {
131
142
  background-color: var(--ref-color-soft-blue-10);
132
143
  }
@@ -154,6 +165,7 @@
154
165
  .ap-table__cell-text {
155
166
  color: var(--ref-color-grey-100);
156
167
  font-size: var(--ref-font-size-sm);
168
+ line-height: var(--ref-font-line-height-sm);
157
169
 
158
170
  &.ap-table__cell-text--bold {
159
171
  font-weight: var(--ref-font-weight-bold);
@@ -163,7 +175,7 @@
163
175
  .ap-table__cell-description {
164
176
  color: var(--ref-color-grey-80);
165
177
  font-size: var(--ref-font-size-xs);
166
- margin-top: 2px;
178
+ line-height: var(--ref-font-line-height-xs);
167
179
  }
168
180
 
169
181
  // Action buttons alignment - can be used on action containers within cells
@@ -181,70 +193,52 @@
181
193
  gap: var(--ref-spacing-xxxs);
182
194
  }
183
195
  }
184
- }
185
-
186
- // CDK Drag and Drop styling - applied globally
187
- tr[cdk-row].cdk-drag-preview,
188
- .cdk-drag-preview {
189
- border-radius: var(--ref-border-radius-md);
190
- background-color: var(--ref-color-electric-blue-10);
191
- border: 1px solid var(--ref-color-electric-blue-40);
192
- opacity: 0.95;
193
196
 
194
- // Remove default table borders from preview
195
- td[cdk-cell] {
196
- border: none;
197
- padding: var(--ref-spacing-xs);
198
- font-size: var(--ref-font-size-sm);
199
- color: var(--ref-color-grey-100);
200
- font-family: Averta;
201
- background-color: transparent;
202
- }
197
+ // CDK Drag and Drop styling - applied globally
198
+ tr[cdk-row].cdk-drag-preview,
199
+ .cdk-drag-preview {
200
+ display: flex;
201
+ align-items: center;
202
+ border-radius: var(--ref-border-radius-md);
203
+ background-color: var(--ref-color-electric-blue-10);
204
+ border: 1px solid var(--ref-color-electric-blue-40);
205
+ opacity: 0.95;
206
+
207
+ // Remove default table borders from preview
208
+ td[cdk-cell] {
209
+ border: none;
210
+ padding: var(--ref-spacing-xs);
211
+ font-size: var(--ref-font-size-sm);
212
+ color: var(--ref-color-grey-100);
213
+ font-family: Averta;
214
+ background-color: transparent;
215
+ }
203
216
 
204
- // Preserve text styling in drag preview
205
- .ap-table__cell-text {
206
- color: var(--ref-color-grey-100);
207
- font-size: var(--ref-font-size-sm);
208
- font-family: Averta;
217
+ // Preserve text styling in drag preview
218
+ .ap-table__cell-text {
219
+ color: var(--ref-color-grey-100);
220
+ font-size: var(--ref-font-size-sm);
221
+ font-family: Averta;
209
222
 
210
- &.ap-table__cell-text--bold {
211
- font-weight: var(--ref-font-weight-bold);
223
+ &.ap-table__cell-text--bold {
224
+ font-weight: var(--ref-font-weight-bold);
225
+ }
212
226
  }
213
227
  }
214
- }
215
-
216
- .cdk-drag-placeholder {
217
- background-color: var(--ref-color-electric-blue-05) !important;
218
- border: 1px dashed var(--ref-color-electric-blue-30) !important;
219
- opacity: 0.7 !important;
220
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
221
228
 
222
- td[cdk-cell] {
223
- border: none !important;
224
- background-color: transparent !important;
229
+ .cdk-drag-placeholder {
230
+ background-color: var(--ref-color-electric-blue-05) !important;
231
+ border: 1px dashed var(--ref-color-electric-blue-30) !important;
232
+ opacity: 0.7 !important;
233
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
225
234
  }
226
- }
227
-
228
- .cdk-drag-animating {
229
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
230
- }
231
-
232
- // Dragging state styles
233
- .cdk-drop-list-dragging .cdk-drag {
234
- transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
235
- }
236
-
237
- // Active dragging row state
238
- tr[cdk-row].cdk-drag {
239
- cursor: move;
240
235
 
241
- &:hover {
242
- background-color: var(--ref-color-soft-blue-05);
236
+ .cdk-drag-animating {
237
+ transition: transform 350ms cubic-bezier(0, 0, 0.2, 1);
243
238
  }
244
239
 
245
- // Style while being dragged
246
- &.cdk-drag-dragging {
247
- background-color: var(--ref-color-red-05);
248
- opacity: 0.7;
240
+ // Dragging state styles
241
+ .cdk-drop-list-dragging .cdk-drag {
242
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
249
243
  }
250
244
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "20.1.1",
3
+ "version": "20.1.3",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
package/agorapulse-ui-theme-20.1.1.tgz DELETED
Binary file
package/src/tokens/components/selection-dropdown.json DELETED
@@ -1,141 +0,0 @@
1
- {
2
- "comp": {
3
- "selectionDropdown": {
4
- "background": {
5
- "color": {
6
- "value": "{ref.color.white}"
7
- }
8
- },
9
- "boxShadow": {
10
- "value": "0px 4px 25px -2px rgba(52, 69, 99, 0.15), 0px 4px 6px -2px rgba(52, 69, 99, 0.15)"
11
- },
12
- "border": {
13
- "radius": {
14
- "value": "{sys.border.radius.sm}"
15
- }
16
- },
17
- "header": {
18
- "top": {
19
- "padding": {
20
- "value": "{ref.spacing.xs} {ref.spacing.sm}"
21
- }
22
- },
23
- "title": {
24
- "fontSize": {
25
- "value": "{ref.font.size.md}"
26
- },
27
- "fontWeight": {
28
- "value": "{ref.font.weight.bold}"
29
- },
30
- "textColor": {
31
- "value": "{ref.color.grey.100}"
32
- }
33
- },
34
- "searchbar": {
35
- "padding": {
36
- "value": "0 {ref.spacing.xxs} {ref.spacing.xxs}"
37
- }
38
- }
39
- },
40
- "content": {
41
- "padding": {
42
- "value": "{ref.spacing.xxs} 0"
43
- }
44
- },
45
- "footer": {
46
- "padding": {
47
- "value": "{ref.spacing.xs} {ref.spacing.sm}"
48
- }
49
- },
50
- "noResults": {
51
- "textColor": {
52
- "value": "{ref.color.grey.80}"
53
- },
54
- "fontSize": {
55
- "value": "{ref.font.size.sm}"
56
- }
57
- },
58
- "item": {
59
- "padding": {
60
- "value": "{ref.spacing.xxs} {ref.spacing.sm}"
61
- },
62
- "text": {
63
- "size": {
64
- "value": "{sys.text.style.body.size}"
65
- },
66
- "lineHeight": {
67
- "value": "{sys.text.style.body.line-height}"
68
- },
69
- "color": {
70
- "value": "{ref.color.grey.100}"
71
- }
72
- },
73
- "background": {
74
- "color": {
75
- "value": "{ref.color.white}"
76
- },
77
- "colorHover": {
78
- "value": "{ref.color.electricBlue.10}"
79
- },
80
- "colorFocused": {
81
- "value": "{ref.color.electricBlue.20}"
82
- }
83
- },
84
- "icon": {
85
- "spacing": {
86
- "value": "{ref.spacing.xxs}"
87
- }
88
- },
89
- "label": {
90
- "spacing": {
91
- "value": "{ref.spacing.xxs}"
92
- }
93
- },
94
- "description": {
95
- "color": {
96
- "value": "{ref.color.grey.80}"
97
- },
98
- "size": {
99
- "value": "{sys.text.style.caption.size}"
100
- },
101
- "lineHeight": {
102
- "value": "{sys.text.style.body.line-height}"
103
- }
104
- }
105
- },
106
- "divider": {
107
- "color": {
108
- "value": "{ref.color.grey.10}"
109
- },
110
- "margin": {
111
- "value": "{ref.spacing.xxs} 0"
112
- }
113
- },
114
- "group": {
115
- "header": {
116
- "padding": {
117
- "value": "{ref.spacing.xxs} {ref.spacing.sm}"
118
- },
119
- "borderTop": {
120
- "color": {
121
- "value": "{ref.color.grey.10}"
122
- }
123
- },
124
- "background": {
125
- "color": {
126
- "value": "{ref.color.grey.bg}"
127
- }
128
- }
129
- }
130
- },
131
- "selectedSection": {
132
- "marginBottom": {
133
- "value": "{ref.spacing.xxs}"
134
- },
135
- "paddingBottom": {
136
- "value": "{ref.spacing.xxs}"
137
- }
138
- }
139
- }
140
- }
141
- }