@agorapulse/ui-theme 20.1.1 → 20.1.2

package/assets/desktop_variables.css

@@ -538,37 +538,6 @@
   --comp-select-search-bar-bottom-link-padding-top: 12px;
   --comp-select-search-bar-bottom-link-padding-bottom: 4px;
   --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
-  --comp-selection-dropdown-background-color: #FFFFFF;
-  --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);
-  --comp-selection-dropdown-border-radius: 4px;
-  --comp-selection-dropdown-header-top-padding: 12px 16px;
-  --comp-selection-dropdown-header-title-font-size: 16px;
-  --comp-selection-dropdown-header-title-font-weight: 700;
-  --comp-selection-dropdown-header-title-text-color: #344563;
-  --comp-selection-dropdown-header-searchbar-padding: 0 8px 8px;
-  --comp-selection-dropdown-content-padding: 8px 0;
-  --comp-selection-dropdown-footer-padding: 12px 16px;
-  --comp-selection-dropdown-no-results-text-color: #5D6A82;
-  --comp-selection-dropdown-no-results-font-size: 14px;
-  --comp-selection-dropdown-item-padding: 8px 16px;
-  --comp-selection-dropdown-item-text-size: 14px;
-  --comp-selection-dropdown-item-text-line-height: 18px;
-  --comp-selection-dropdown-item-text-color: #344563;
-  --comp-selection-dropdown-item-background-color: #FFFFFF;
-  --comp-selection-dropdown-item-background-color-hover: #E8F4FF;
-  --comp-selection-dropdown-item-background-color-focused: #D1E8FF;
-  --comp-selection-dropdown-item-icon-spacing: 8px;
-  --comp-selection-dropdown-item-label-spacing: 8px;
-  --comp-selection-dropdown-item-description-color: #5D6A82;
-  --comp-selection-dropdown-item-description-size: 12px;
-  --comp-selection-dropdown-item-description-line-height: 18px;
-  --comp-selection-dropdown-divider-color: #EAECEF;
-  --comp-selection-dropdown-divider-margin: 8px 0;
-  --comp-selection-dropdown-group-header-padding: 8px 16px;
-  --comp-selection-dropdown-group-header-border-top-color: #EAECEF;
-  --comp-selection-dropdown-group-header-background-color: #F9F9FA;
-  --comp-selection-dropdown-selected-section-margin-bottom: 8px;
-  --comp-selection-dropdown-selected-section-padding-bottom: 8px;
   --comp-snackbar-text-style-font-family: Averta;
   --comp-snackbar-text-style-size: 14px;
   --comp-snackbar-text-style-font-weight: 400;

package/assets/mobile_variables.css

@@ -538,37 +538,6 @@
   --comp-select-search-bar-bottom-link-padding-top: 12px;
   --comp-select-search-bar-bottom-link-padding-bottom: 4px;
   --comp-select-search-bar-bottom-link-border-top-color: #EAECEF;
-  --comp-selection-dropdown-background-color: #FFFFFF;
-  --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);
-  --comp-selection-dropdown-border-radius: 4px;
-  --comp-selection-dropdown-header-top-padding: 12px 16px;
-  --comp-selection-dropdown-header-title-font-size: 16px;
-  --comp-selection-dropdown-header-title-font-weight: 700;
-  --comp-selection-dropdown-header-title-text-color: #344563;
-  --comp-selection-dropdown-header-searchbar-padding: 0 8px 8px;
-  --comp-selection-dropdown-content-padding: 8px 0;
-  --comp-selection-dropdown-footer-padding: 12px 16px;
-  --comp-selection-dropdown-no-results-text-color: #5D6A82;
-  --comp-selection-dropdown-no-results-font-size: 14px;
-  --comp-selection-dropdown-item-padding: 8px 16px;
-  --comp-selection-dropdown-item-text-size: 14px;
-  --comp-selection-dropdown-item-text-line-height: 18px;
-  --comp-selection-dropdown-item-text-color: #344563;
-  --comp-selection-dropdown-item-background-color: #FFFFFF;
-  --comp-selection-dropdown-item-background-color-hover: #E8F4FF;
-  --comp-selection-dropdown-item-background-color-focused: #D1E8FF;
-  --comp-selection-dropdown-item-icon-spacing: 8px;
-  --comp-selection-dropdown-item-label-spacing: 8px;
-  --comp-selection-dropdown-item-description-color: #5D6A82;
-  --comp-selection-dropdown-item-description-size: 12px;
-  --comp-selection-dropdown-item-description-line-height: 18px;
-  --comp-selection-dropdown-divider-color: #EAECEF;
-  --comp-selection-dropdown-divider-margin: 8px 0;
-  --comp-selection-dropdown-group-header-padding: 8px 16px;
-  --comp-selection-dropdown-group-header-border-top-color: #EAECEF;
-  --comp-selection-dropdown-group-header-background-color: #F9F9FA;
-  --comp-selection-dropdown-selected-section-margin-bottom: 8px;
-  --comp-selection-dropdown-selected-section-padding-bottom: 8px;
   --comp-snackbar-text-style-font-family: Averta;
   --comp-snackbar-text-style-size: 14px;
   --comp-snackbar-text-style-font-weight: 400;

package/assets/style/_table.scss

@@ -15,12 +15,15 @@
         background-color: var(--ref-color-grey-05);
     }
 
-    &.ap-table--small td[cdk-cell] {
-        height: 40px;
+    &.ap-table--small {
+        th[cdk-header-cell],
+        td[cdk-cell] {
+            height: 40px;
+        }
     }
 
     &.ap-table--striped tbody tr[cdk-row]:nth-child(even) {
-        background-color: var(--ref-color-grey-05);
+        background-color: var(--ref-color-grey-bg);
     }
 
     // Selected rows in striped tables - higher specificity to override striped background
@@ -30,7 +33,8 @@
 
     // Header cells - using CDK attribute selector
     th[cdk-header-cell] {
-        padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
+        height: 52px;
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
         text-align: left;
         font-size: var(--ref-font-size-xs);
         font-weight: var(--ref-font-weight-bold);
@@ -56,6 +60,20 @@
             justify-content: flex-end;
         }
 
+        &.ap-table__header-cell--sortable {
+            cursor: pointer;
+
+            // Hide sorting icon by default
+            ap-symbol {
+                opacity: 0;
+            }
+
+            // Show sorting icon on hover
+            &:hover ap-symbol {
+                opacity: 1;
+            }
+        }
+
         // Checkbox header cells
         &.ap-table__header-cell--checkbox {
             width: 40px;
@@ -101,9 +119,9 @@
         }
     }
 
-    // Header rows - using CDK attribute selector
-    tr[cdk-header-row] {
-        // Header row specific styles can go here if needed
+    // Show grabbing cursor on grab icon when row is being dragged
+    .ap-table__drag-handle {
+        cursor: move;
     }
 
     // Body rows - using CDK attribute selector
@@ -123,10 +141,6 @@
             }
         }
 
-        &:hover {
-            background-color: var(--ref-color-grey-05);
-        }
-
         &.selected {
             background-color: var(--ref-color-soft-blue-10);
         }
@@ -154,6 +168,7 @@
     .ap-table__cell-text {
         color: var(--ref-color-grey-100);
         font-size: var(--ref-font-size-sm);
+        line-height: var(--ref-font-line-height-sm);
 
         &.ap-table__cell-text--bold {
             font-weight: var(--ref-font-weight-bold);
@@ -163,7 +178,7 @@
     .ap-table__cell-description {
         color: var(--ref-color-grey-80);
         font-size: var(--ref-font-size-xs);
-        margin-top: 2px;
+        line-height: var(--ref-font-line-height-xs);
     }
 
     // Action buttons alignment - can be used on action containers within cells
@@ -186,6 +201,8 @@
 // CDK Drag and Drop styling - applied globally
 tr[cdk-row].cdk-drag-preview,
 .cdk-drag-preview {
+    display: flex;
+    align-items: center;
     border-radius: var(--ref-border-radius-md);
     background-color: var(--ref-color-electric-blue-10);
     border: 1px solid var(--ref-color-electric-blue-40);
@@ -218,33 +235,13 @@ tr[cdk-row].cdk-drag-preview,
     border: 1px dashed var(--ref-color-electric-blue-30) !important;
     opacity: 0.7 !important;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
-
-    td[cdk-cell] {
-        border: none !important;
-        background-color: transparent !important;
-    }
 }
 
 .cdk-drag-animating {
-    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    transition: transform 350ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 // Dragging state styles
 .cdk-drop-list-dragging .cdk-drag {
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
-
-// Active dragging row state
-tr[cdk-row].cdk-drag {
-    cursor: move;
-
-    &:hover {
-        background-color: var(--ref-color-soft-blue-05);
-    }
-
-    // Style while being dragged
-    &.cdk-drag-dragging {
-        background-color: var(--ref-color-red-05);
-        opacity: 0.7;
-    }
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agorapulse/ui-theme",
-  "version": "20.1.1",
+  "version": "20.1.2",
   "description": "Agorapulse UI Theme Library",
   "repository": {
     "type": "git",

package/src/tokens/components/selection-dropdown.json

@@ -1,141 +0,0 @@
-{
-    "comp": {
-        "selectionDropdown": {
-            "background": {
-                "color": {
-                    "value": "{ref.color.white}"
-                }
-            },
-            "boxShadow": {
-                "value": "0px 4px 25px -2px rgba(52, 69, 99, 0.15), 0px 4px 6px -2px rgba(52, 69, 99, 0.15)"
-            },
-            "border": {
-                "radius": {
-                    "value": "{sys.border.radius.sm}"
-                }
-            },
-            "header": {
-                "top": {
-                    "padding": {
-                        "value": "{ref.spacing.xs} {ref.spacing.sm}"
-                    }
-                },
-                "title": {
-                    "fontSize": {
-                        "value": "{ref.font.size.md}"
-                    },
-                    "fontWeight": {
-                        "value": "{ref.font.weight.bold}"
-                    },
-                    "textColor": {
-                        "value": "{ref.color.grey.100}"
-                    }
-                },
-                "searchbar": {
-                    "padding": {
-                        "value": "0 {ref.spacing.xxs} {ref.spacing.xxs}"
-                    }
-                }
-            },
-            "content": {
-                "padding": {
-                    "value": "{ref.spacing.xxs} 0"
-                }
-            },
-            "footer": {
-                "padding": {
-                    "value": "{ref.spacing.xs} {ref.spacing.sm}"
-                }
-            },
-            "noResults": {
-                "textColor": {
-                    "value": "{ref.color.grey.80}"
-                },
-                "fontSize": {
-                    "value": "{ref.font.size.sm}"
-                }
-            },
-            "item": {
-                "padding": {
-                    "value": "{ref.spacing.xxs} {ref.spacing.sm}"
-                },
-                "text": {
-                    "size": {
-                        "value": "{sys.text.style.body.size}"
-                    },
-                    "lineHeight": {
-                        "value": "{sys.text.style.body.line-height}"
-                    },
-                    "color": {
-                        "value": "{ref.color.grey.100}"
-                    }
-                },
-                "background": {
-                    "color": {
-                        "value": "{ref.color.white}"
-                    },
-                    "colorHover": {
-                        "value": "{ref.color.electricBlue.10}"
-                    },
-                    "colorFocused": {
-                        "value": "{ref.color.electricBlue.20}"
-                    }
-                },
-                "icon": {
-                    "spacing": {
-                        "value": "{ref.spacing.xxs}"
-                    }
-                },
-                "label": {
-                    "spacing": {
-                        "value": "{ref.spacing.xxs}"
-                    }
-                },
-                "description": {
-                    "color": {
-                        "value": "{ref.color.grey.80}"
-                    },
-                    "size": {
-                        "value": "{sys.text.style.caption.size}"
-                    },
-                    "lineHeight": {
-                        "value": "{sys.text.style.body.line-height}"
-                    }
-                }
-            },
-            "divider": {
-                "color": {
-                    "value": "{ref.color.grey.10}"
-                },
-                "margin": {
-                    "value": "{ref.spacing.xxs} 0"
-                }
-            },
-            "group": {
-                "header": {
-                    "padding": {
-                        "value": "{ref.spacing.xxs} {ref.spacing.sm}"
-                    },
-                    "borderTop": {
-                        "color": {
-                            "value": "{ref.color.grey.10}"
-                        }
-                    },
-                    "background": {
-                        "color": {
-                            "value": "{ref.color.grey.bg}"
-                        }
-                    }
-                }
-            },
-            "selectedSection": {
-                "marginBottom": {
-                    "value": "{ref.spacing.xxs}"
-                },
-                "paddingBottom": {
-                    "value": "{ref.spacing.xxs}"
-                }
-            }
-        }
-    }
-}