@agorapulse/ui-theme 20.1.19 → 20.1.21

package/assets/desktop_variables.css

@@ -200,6 +200,16 @@
   --sys-color-feature-lock-text: #6554C0;
   --sys-icon-sm: 14px;
   --sys-icon-md: 16px;
+  --sys-icon-css-xxs: 8px;
+  --sys-icon-css-nano: 10px;
+  --sys-icon-css-xs: 12px;
+  --sys-icon-css-sm: 16px;
+  --sys-icon-css-mini-sm: 18px;
+  --sys-icon-css-md: 24px;
+  --sys-icon-css-lg: 32px;
+  --sys-icon-css-xl: 40px;
+  --sys-icon-css-xxl: 48px;
+  --sys-icon-css-xxxl: 64px;
   --sys-radio-transition-duration: 250ms;
   --sys-settings-content-max-width-md: 700px;
   --sys-settings-content-max-width-lg: 1200px;

package/assets/mobile_variables.css

@@ -200,6 +200,16 @@
   --sys-color-feature-lock-text: #6554C0;
   --sys-icon-sm: 14px;
   --sys-icon-md: 16px;
+  --sys-icon-css-xxs: 8px;
+  --sys-icon-css-nano: 10px;
+  --sys-icon-css-xs: 12px;
+  --sys-icon-css-sm: 16px;
+  --sys-icon-css-mini-sm: 18px;
+  --sys-icon-css-md: 24px;
+  --sys-icon-css-lg: 32px;
+  --sys-icon-css-xl: 40px;
+  --sys-icon-css-xxl: 48px;
+  --sys-icon-css-xxxl: 64px;
   --sys-radio-transition-duration: 250ms;
   --sys-settings-content-max-width-md: 700px;
   --sys-settings-content-max-width-lg: 1200px;

package/assets/style/_tooltip.scss

@@ -2,13 +2,14 @@
     --ap-arrow-width: 16px;
     --ap-arrow-height: 8px;
     --ap-arrow-offset: 10px;
+    --ap-tooltip-z-index: 9999998;
 
     width: fit-content;
     max-width: 350px;
     background: var(--comp-tooltip-text-color-main-default-bg);
     border-radius: var(--ref-border-radius-md);
     position: absolute;
-    z-index: 9999999;
+    z-index: var(--ap-tooltip-z-index);
     animation: fadeIn var(--ref-animation-short) ease-in-out;
 
     @keyframes fadeIn {
@@ -39,6 +40,10 @@
         }
     }
 
+    &.ap-tooltip-click-trigger {
+        z-index: calc(var(--ap-tooltip-z-index) + 1); // has to be above the z-index of the .ap-tooltip class above
+    }
+
     .ap-content-container {
         padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
         border-radius: var(--ref-border-radius-md);

package/assets/style/css-ui/_accordion.scss

@@ -0,0 +1,54 @@
+.ap-accordion {
+  background-color: var(--ref-color-white);
+  border: 1px solid var(--ref-color-grey-10);
+  border-radius: var(--ref-border-radius-md);
+  display: flex;
+  flex-direction: column;
+}
+
+.ap-accordion-header {
+  border-bottom: 1px solid var(--ref-color-grey-10);
+  display: flex;
+  align-items: center;
+  gap: var(--ref-spacing-xxs);
+  padding: 6px var(--ref-spacing-xs) 6px var(--ref-spacing-sm);
+
+  > i {
+    flex-shrink: 0;
+  }
+}
+
+.ap-accordion-title {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--ref-font-size-sm);
+  font-weight: var(--ref-font-weight-bold);
+  line-height: var(--ref-font-line-height-md);
+  color: var(--ref-color-grey-100);
+}
+
+.ap-accordion-toggle {
+  flex-shrink: 0;
+  transition: transform var(--ref-animation-short);
+}
+
+.ap-accordion-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ref-spacing-sm);
+  padding: var(--ref-spacing-sm);
+}
+
+.ap-accordion.collapsed {
+  .ap-accordion-header {
+    border-bottom: none;
+  }
+
+  .ap-accordion-toggle {
+    transform: rotate(180deg);
+  }
+
+  .ap-accordion-content {
+    display: none;
+  }
+}

package/assets/style/css-ui/_action-dropdown.scss

@@ -0,0 +1,163 @@
+// Agorapulse Action Dropdown Styles
+@use 'mixins' as m;
+
+// Container
+.ap-action-dropdown {
+    background-color: var(--comp-action-dropdown-background-color, var(--ref-color-white));
+    border-radius: var(--comp-action-dropdown-border-radius, var(--ref-border-radius-md));
+    box-shadow: var(--comp-action-dropdown-box-shadow, 0 4px 25px -2px rgba(52, 69, 99, 0.15), 0 4px 6px -2px rgba(52, 69, 99, 0.15));
+    padding: var(--comp-action-dropdown-padding, var(--ref-spacing-xxs));
+    outline: none;
+    overflow: hidden;
+    z-index: 1000;
+    width: 250px;
+
+    &.large {
+        width: 340px;
+    }
+
+    &:focus {
+        outline: 2px solid var(--comp-action-dropdown-item-background-color-focused, var(--ref-color-electric-blue-10));
+        outline-offset: 2px;
+    }
+}
+
+// Item
+.ap-action-dropdown-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+    padding: var(--comp-action-dropdown-item-padding, var(--ref-spacing-xxs) var(--ref-spacing-xs));
+    border: none;
+    background: transparent;
+    color: var(--comp-action-dropdown-item-text-color, var(--ref-color-grey-100));
+    cursor: pointer;
+    font-family: var(--ref-font-family);
+    font-size: var(--comp-action-dropdown-item-text-size, var(--ref-font-size-sm));
+    line-height: var(--comp-action-dropdown-item-text-line-height, var(--ref-line-height-sm));
+    text-align: left;
+    box-sizing: border-box;
+
+    // Implicit icon styling via > i
+    > i {
+        @include m.fixed-size(16px);
+        flex-shrink: 0;
+        color: var(--ref-color-grey-100);
+
+        // Start icon = first child
+        &:first-child {
+            margin-right: var(--comp-action-dropdown-item-icon-spacing, var(--ref-spacing-xs));
+        }
+
+        // End icon = last child (but not the only child)
+        &:last-child:not(:first-child) {
+            margin-left: var(--comp-action-dropdown-item-icon-spacing, var(--ref-spacing-xs));
+            color: var(--ref-color-grey-60);
+        }
+    }
+
+    &:hover {
+        background-color: var(--comp-action-dropdown-item-background-color-hover, var(--ref-color-grey-05));
+    }
+
+    &:focus,
+    &.focused {
+        outline: none;
+        background-color: var(--comp-action-dropdown-item-background-color-focused, var(--ref-color-electric-blue-10));
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.4;
+
+        &:hover {
+            background-color: transparent;
+        }
+    }
+
+    // Item with description
+    &.has-description {
+        height: auto;
+        min-height: 50px;
+    }
+
+    // Red mode (destructive action)
+    &.red-mode {
+        color: var(--comp-action-dropdown-item-text-color-red-mode, var(--ref-color-red-100));
+
+        > i {
+            color: inherit;
+        }
+
+        &:hover {
+            background-color: var(--comp-action-dropdown-item-background-color-red-mode-hover, var(--ref-color-red-10));
+        }
+
+        &:focus,
+        &.focused {
+            background-color: var(--comp-action-dropdown-item-background-color-red-mode-focused, var(--ref-color-red-10));
+        }
+    }
+
+    // Feature lock
+    &.feature-lock {
+        > i:last-child {
+            color: var(--ref-color-purple-100);
+        }
+
+        &:hover {
+            background-color: var(--comp-action-dropdown-item-background-color-feature-lock-hover, var(--ref-color-purple-10));
+        }
+
+        &:focus,
+        &.focused {
+            background-color: var(--comp-action-dropdown-item-background-color-feature-lock-focused, var(--ref-color-purple-10));
+        }
+    }
+
+    // Badge within dropdown item
+    .ap-badge {
+        flex-shrink: 0;
+    }
+}
+
+// Text container
+.ap-action-dropdown-item-text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    gap: var(--ref-spacing-xxxs);
+}
+
+// Label container
+.ap-action-dropdown-item-label-container {
+    display: flex;
+    align-items: center;
+    gap: var(--comp-action-dropdown-item-label-spacing, var(--ref-spacing-xs));
+    @include m.truncate;
+}
+
+// Label
+.ap-action-dropdown-item-label {
+    @include m.truncate;
+
+    &.bold {
+        font-weight: var(--ref-font-weight-bold);
+    }
+}
+
+// Description
+.ap-action-dropdown-item-description {
+    color: var(--comp-action-dropdown-item-description-color, var(--ref-color-grey-60));
+    font-size: var(--comp-action-dropdown-item-description-size, var(--ref-font-size-xs));
+    line-height: var(--comp-action-dropdown-item-description-line-height, var(--ref-line-height-xs));
+}
+
+// Divider
+.ap-action-dropdown-divider {
+    height: 1px;
+    background-color: var(--comp-action-dropdown-divider-color, var(--ref-color-grey-10));
+    margin: var(--comp-action-dropdown-divider-margin, var(--ref-spacing-xxs) 0);
+}

package/assets/style/css-ui/_avatar-group.scss

@@ -0,0 +1,61 @@
+// Agorapulse Avatar Group Styles
+@use 'mixins' as m;
+
+// Avatar group container — uses row-reverse for correct z-stacking (first avatar on top)
+// DOM order is reversed from visual order
+.ap-avatar-group {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    padding-left: 2px; // compensate overlap offset
+
+    .ap-avatar,
+    .ap-avatar-group-overflow {
+        margin-inline-start: -2px;
+        cursor: default;
+    }
+
+    // Size variants set overflow counter dimensions
+    &.size-16 .ap-avatar-group-overflow {
+        width: 16px;
+        height: 16px;
+        font-size: 8px;
+    }
+
+    &.size-32 .ap-avatar-group-overflow {
+        width: 32px;
+        height: 32px;
+        font-size: 12px;
+    }
+}
+
+// Overflow counter badge
+.ap-avatar-group-overflow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--ref-color-grey-10);
+    border-radius: 24px;
+    transition: background-color var(--ref-animation-short);
+    width: 24px;
+    height: 24px;
+    font-family: var(--ref-font-family);
+    font-weight: 700;
+    font-size: 10px;
+    color: var(--ref-color-grey-80);
+    line-height: 1em;
+
+    &:hover {
+        background-color: var(--ref-color-grey-20);
+    }
+
+    &:active {
+        background-color: var(--ref-color-grey-40);
+    }
+
+    &:focus-visible {
+        background-color: var(--ref-color-grey-20);
+        outline: 3px solid var(--ref-color-electric-blue-100);
+        outline-offset: 1px;
+    }
+}

package/assets/style/css-ui/_avatar.scss

@@ -0,0 +1,183 @@
+// Agorapulse Avatar Styles
+@use 'mixins' as m;
+
+.ap-avatar {
+    --ap-avatar-size: 40px;
+    --ap-avatar-border-radius: 100%;
+    --ap-avatar-initials-size: 14px;
+    --ap-avatar-symbol-size: 20px;
+    --ap-avatar-network-size: 16px;
+    --ap-avatar-online-icon-size: 10px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @include m.fixed-size(var(--ap-avatar-size));
+    box-sizing: border-box;
+    position: relative;
+    border-radius: var(--ap-avatar-border-radius);
+    background: var(--comp-avatar-background-color);
+    box-shadow: var(--comp-avatar-background-shadow);
+    // Size variants
+    &.size-16 {
+        --ap-avatar-size: 16px;
+        --ap-avatar-initials-size: 8px;
+        --ap-avatar-symbol-size: 8px;
+        --ap-avatar-network-size: 8px;
+        --ap-avatar-online-icon-size: 6px;
+    }
+
+    &.size-24 {
+        --ap-avatar-size: 24px;
+        --ap-avatar-initials-size: 12px;
+        --ap-avatar-symbol-size: 12px;
+        --ap-avatar-network-size: 12px;
+        --ap-avatar-online-icon-size: 6px;
+    }
+
+    &.size-32 {
+        --ap-avatar-size: 32px;
+        --ap-avatar-initials-size: 16px;
+        --ap-avatar-symbol-size: 16px;
+        --ap-avatar-network-size: 12px;
+        --ap-avatar-online-icon-size: 8px;
+    }
+
+    &.size-36 {
+        --ap-avatar-size: 36px;
+        --ap-avatar-initials-size: 16px;
+        --ap-avatar-symbol-size: 18px;
+        --ap-avatar-network-size: 16px;
+        --ap-avatar-online-icon-size: 8px;
+    }
+
+    &.size-40 {
+        --ap-avatar-size: 40px;
+        --ap-avatar-initials-size: 20px;
+        --ap-avatar-symbol-size: 20px;
+        --ap-avatar-network-size: 16px;
+        --ap-avatar-online-icon-size: 12px;
+    }
+
+    &.size-48 {
+        --ap-avatar-size: 48px;
+        --ap-avatar-initials-size: 24px;
+        --ap-avatar-symbol-size: 24px;
+        --ap-avatar-network-size: 16px;
+        --ap-avatar-online-icon-size: 12px;
+    }
+
+    &.size-56 {
+        --ap-avatar-size: 56px;
+        --ap-avatar-initials-size: 28px;
+        --ap-avatar-symbol-size: 28px;
+        --ap-avatar-network-size: 16px;
+        --ap-avatar-online-icon-size: 16px;
+    }
+
+    // Square variant
+    &.square {
+        --ap-avatar-border-radius: var(--sys-border-radius-sm);
+    }
+
+    // Image — implicit > img
+    > img {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        border-radius: var(--ap-avatar-border-radius);
+    }
+
+    // Initials
+    > .ap-avatar-initials {
+        font-weight: var(--comp-avatar-initials-weight);
+        font-size: var(--ap-avatar-initials-size);
+        font-family: 'Averta', sans-serif;
+        color: var(--comp-avatar-initials-color);
+        text-transform: uppercase;
+        user-select: none;
+    }
+
+    // Symbol/icon — implicit > i
+    > i {
+        color: var(--comp-avatar-symbol-color);
+        width: var(--ap-avatar-symbol-size);
+        height: var(--ap-avatar-symbol-size);
+    }
+
+    // Big network variant — network icon fills the full avatar
+    &.big {
+        background: none;
+        box-shadow: none;
+
+        > i {
+            color: unset;
+            width: 100%;
+            height: 100%;
+            font-size: var(--ap-avatar-size);
+        }
+    }
+
+    // Online indicator — via ::after pseudo-element when .online class is present
+    &.online::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        @include m.fixed-size(var(--ap-avatar-online-icon-size));
+        border-radius: 100%;
+        border: 1px solid var(--comp-avatar-online-border-color);
+        background: var(--comp-avatar-online-background);
+        box-sizing: border-box;
+    }
+}
+
+// Network overlay badge
+.ap-avatar-network {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    @include m.fixed-size(var(--ap-avatar-network-size));
+    overflow: hidden;
+    box-sizing: border-box;
+    box-shadow: var(--comp-avatar-background-shadow);
+    border-radius: 100%; // round by default (facebook, twitter, youtube…)
+
+    // Shape inferred from icon child
+    &:has(.ap-icon-instagram-official, .ap-icon-instagram) {
+        border-radius: 28%;
+    }
+
+    &:has(.ap-icon-linkedin-official, .ap-icon-linkedin) {
+        border-radius: 6%;
+    }
+
+    &:has(.ap-icon-google, .ap-icon-meta) {
+        box-shadow: none;
+        border-radius: 0;
+    }
+
+    &:has(.ap-icon-youtube-official, .ap-icon-youtube) {
+        box-shadow: none;
+        border-radius: 0;
+    }
+
+    > i {
+        font-size: var(--ap-avatar-network-size);
+        width: var(--ap-avatar-network-size);
+        height: var(--ap-avatar-network-size);
+
+        // Monochrome icon fallback colors (when using ap-icon-{network} instead of -official)
+        &.ap-icon-facebook { color: var(--ref-color-facebook-100); }
+        &.ap-icon-instagram { color: var(--ref-color-instagram-100); }
+        &.ap-icon-linkedin { color: var(--ref-color-linkedin-100); }
+        &.ap-icon-youtube { color: var(--ref-color-youtube-100); }
+    }
+}
+
+// Avatar group styles are in _avatar-group.scss

package/assets/style/css-ui/{badge.css → _badge.scss}

@@ -1,4 +1,4 @@
-/* Agorapulse Badge Styles */
+// Agorapulse Badge Styles
 
 .ap-badge {
     display: inline-flex;
@@ -14,17 +14,15 @@
     border-radius: 2px;
     white-space: nowrap;
     box-sizing: border-box;
-}
 
-/* Blue variant (default) */
-.ap-badge.blue {
-    background-color: var(--comp-badge-blue-background-color);
-    color: var(--comp-badge-blue-color);
-}
+    &.blue {
+        background-color: var(--comp-badge-blue-background-color);
+        color: var(--comp-badge-blue-color);
+    }
 
-/* Orange variant */
-.ap-badge.orange {
-    text-transform: uppercase;
-    background-color: var(--comp-badge-orange-background-color);
-    color: var(--comp-badge-orange-color);
+    &.orange {
+        text-transform: uppercase;
+        background-color: var(--comp-badge-orange-background-color);
+        color: var(--comp-badge-orange-color);
+    }
 }