@agorapulse/ui-theme 20.1.0 → 20.1.2

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 (8) hide show
  1. package/agorapulse-ui-theme-20.1.2.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 +247 -0
  5. package/assets/style/theme.scss +1 -0
  6. package/package.json +1 -1
  7. package/agorapulse-ui-theme-20.1.0.tgz +0 -0
  8. package/src/tokens/components/selection-dropdown.json +0 -141
package/agorapulse-ui-theme-20.1.2.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 ADDED
@@ -0,0 +1,247 @@
1
+ .ap-table {
2
+ width: 100%;
3
+ overflow-x: auto;
4
+ font-family: Averta;
5
+ border-radius: var(--ref-border-radius-md);
6
+ border-collapse: separate;
7
+ border-spacing: 0;
8
+ background-color: var(--ref-color-white);
9
+
10
+ &.ap-table--outer-border {
11
+ border: 1px solid var(--ref-color-grey-20);
12
+ }
13
+
14
+ &.ap-table--header-background th[cdk-header-cell] {
15
+ background-color: var(--ref-color-grey-05);
16
+ }
17
+
18
+ &.ap-table--small {
19
+ th[cdk-header-cell],
20
+ td[cdk-cell] {
21
+ height: 40px;
22
+ }
23
+ }
24
+
25
+ &.ap-table--striped tbody tr[cdk-row]:nth-child(even) {
26
+ background-color: var(--ref-color-grey-bg);
27
+ }
28
+
29
+ // Selected rows in striped tables - higher specificity to override striped background
30
+ &.ap-table--striped tbody tr[cdk-row].selected {
31
+ background-color: var(--ref-color-soft-blue-10);
32
+ }
33
+
34
+ // Header cells - using CDK attribute selector
35
+ th[cdk-header-cell] {
36
+ height: 52px;
37
+ padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
38
+ text-align: left;
39
+ font-size: var(--ref-font-size-xs);
40
+ font-weight: var(--ref-font-weight-bold);
41
+ color: var(--ref-color-grey-100);
42
+ border: none;
43
+ border-bottom: 1px solid var(--ref-color-grey-20);
44
+ background-color: transparent;
45
+ position: sticky;
46
+ top: 0;
47
+ z-index: 1;
48
+
49
+ &:first-child {
50
+ border-top-left-radius: var(--ref-border-radius-md);
51
+ }
52
+
53
+ &:last-child {
54
+ border-top-right-radius: var(--ref-border-radius-md);
55
+ }
56
+
57
+ // Right-aligned header cells
58
+ &.ap-table__header-cell--right {
59
+ text-align: right;
60
+ justify-content: flex-end;
61
+ }
62
+
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
+ // Checkbox header cells
78
+ &.ap-table__header-cell--checkbox {
79
+ width: 40px;
80
+ text-align: center;
81
+ justify-content: center;
82
+ padding: var(--ref-spacing-xs);
83
+ vertical-align: middle;
84
+ }
85
+ }
86
+
87
+ // Body cells - using CDK attribute selector
88
+ td[cdk-cell] {
89
+ padding: var(--ref-spacing-xs);
90
+ font-size: var(--ref-font-size-sm);
91
+ color: var(--ref-color-grey-100);
92
+ border: none;
93
+ height: 52px;
94
+ vertical-align: middle;
95
+ font-family: Averta;
96
+
97
+ // Right-aligned body cells
98
+ &.ap-table__body-cell--right {
99
+ text-align: right;
100
+ justify-content: flex-end;
101
+
102
+ .ap-table__cell-content {
103
+ justify-content: flex-end;
104
+ }
105
+ }
106
+
107
+ // Checkbox body cells
108
+ &.ap-table__body-cell--checkbox {
109
+ width: 40px;
110
+ text-align: center;
111
+ justify-content: center;
112
+ padding: var(--ref-spacing-xs);
113
+ vertical-align: middle;
114
+ }
115
+
116
+ // Drag handle body cells
117
+ &.ap-table__body-cell--drag {
118
+ padding: 0 var(--ref-spacing-sm);
119
+ }
120
+ }
121
+
122
+ // Show grabbing cursor on grab icon when row is being dragged
123
+ .ap-table__drag-handle {
124
+ cursor: move;
125
+ }
126
+
127
+ // Body rows - using CDK attribute selector
128
+ tr[cdk-row] {
129
+ border-bottom: 1px solid var(--ref-color-grey-20);
130
+ background-color: var(--ref-color-white);
131
+
132
+ &:last-child {
133
+ border-bottom: none;
134
+
135
+ td[cdk-cell]:first-child {
136
+ border-bottom-left-radius: var(--ref-border-radius-md);
137
+ }
138
+
139
+ td[cdk-cell]:last-child {
140
+ border-bottom-right-radius: var(--ref-border-radius-md);
141
+ }
142
+ }
143
+
144
+ &.selected {
145
+ background-color: var(--ref-color-soft-blue-10);
146
+ }
147
+ }
148
+
149
+ // Header and cell content wrappers for proper alignment
150
+ .ap-table__header-content {
151
+ display: flex;
152
+ align-items: center;
153
+ gap: var(--ref-spacing-xxxs);
154
+ }
155
+
156
+ .ap-table__cell-content {
157
+ display: flex;
158
+ align-items: center;
159
+ gap: var(--ref-spacing-xxs);
160
+ }
161
+
162
+ // Text styling utilities - can be used directly on spans within cells
163
+ .ap-table__cell-text-container {
164
+ display: flex;
165
+ flex-direction: column;
166
+ }
167
+
168
+ .ap-table__cell-text {
169
+ color: var(--ref-color-grey-100);
170
+ font-size: var(--ref-font-size-sm);
171
+ line-height: var(--ref-font-line-height-sm);
172
+
173
+ &.ap-table__cell-text--bold {
174
+ font-weight: var(--ref-font-weight-bold);
175
+ }
176
+ }
177
+
178
+ .ap-table__cell-description {
179
+ color: var(--ref-color-grey-80);
180
+ font-size: var(--ref-font-size-xs);
181
+ line-height: var(--ref-font-line-height-xs);
182
+ }
183
+
184
+ // Action buttons alignment - can be used on action containers within cells
185
+ .ap-table__cell-actions {
186
+ display: flex;
187
+ align-items: center;
188
+ gap: var(--ref-spacing-xxxs);
189
+ margin-left: auto;
190
+ }
191
+
192
+ // Spacing for labels and tags in table cells
193
+ .ap-table__cell-content {
194
+ &.ap-table__cell-content--items {
195
+ flex-wrap: wrap;
196
+ gap: var(--ref-spacing-xxxs);
197
+ }
198
+ }
199
+ }
200
+
201
+ // CDK Drag and Drop styling - applied globally
202
+ tr[cdk-row].cdk-drag-preview,
203
+ .cdk-drag-preview {
204
+ display: flex;
205
+ align-items: center;
206
+ border-radius: var(--ref-border-radius-md);
207
+ background-color: var(--ref-color-electric-blue-10);
208
+ border: 1px solid var(--ref-color-electric-blue-40);
209
+ opacity: 0.95;
210
+
211
+ // Remove default table borders from preview
212
+ td[cdk-cell] {
213
+ border: none;
214
+ padding: var(--ref-spacing-xs);
215
+ font-size: var(--ref-font-size-sm);
216
+ color: var(--ref-color-grey-100);
217
+ font-family: Averta;
218
+ background-color: transparent;
219
+ }
220
+
221
+ // Preserve text styling in drag preview
222
+ .ap-table__cell-text {
223
+ color: var(--ref-color-grey-100);
224
+ font-size: var(--ref-font-size-sm);
225
+ font-family: Averta;
226
+
227
+ &.ap-table__cell-text--bold {
228
+ font-weight: var(--ref-font-weight-bold);
229
+ }
230
+ }
231
+ }
232
+
233
+ .cdk-drag-placeholder {
234
+ background-color: var(--ref-color-electric-blue-05) !important;
235
+ border: 1px dashed var(--ref-color-electric-blue-30) !important;
236
+ opacity: 0.7 !important;
237
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
238
+ }
239
+
240
+ .cdk-drag-animating {
241
+ transition: transform 350ms cubic-bezier(0, 0, 0.2, 1);
242
+ }
243
+
244
+ // Dragging state styles
245
+ .cdk-drop-list-dragging .cdk-drag {
246
+ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
247
+ }
package/assets/style/theme.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  @import '_link.scss';
10
10
  @import '_input.scss';
11
11
  @import '_select.scss';
12
+ @import '_table.scss';
12
13
 
13
14
  @import 'font-face';
14
15
  @import 'colors';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@agorapulse/ui-theme",
3
- "version": "20.1.0",
3
+ "version": "20.1.2",
4
4
  "description": "Agorapulse UI Theme Library",
5
5
  "repository": {
6
6
  "type": "git",
package/agorapulse-ui-theme-20.1.0.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
- }