@agorapulse/ui-theme 20.1.17 → 20.1.19

package/assets/style/css-ui/label.css

@@ -0,0 +1,67 @@
+/* Agorapulse Label Styles */
+
+.ap-label {
+    display: inline-flex;
+    align-items: center;
+    max-width: 100%;
+    background: var(--comp-label-background-color);
+    border-radius: var(--comp-label-border-radius);
+    padding: 0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);
+    height: var(--comp-label-height);
+    box-sizing: border-box;
+}
+
+.ap-label.removable {
+    gap: var(--comp-label-closable-spacing);
+    padding: 0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs);
+}
+
+/* Label content text */
+.ap-label-content {
+    color: var(--comp-label-text-color);
+    font-family: var(--comp-label-text-style-font-family);
+    font-size: var(--comp-label-text-style-size);
+    font-weight: var(--comp-label-text-style-font-weight);
+    line-height: var(--comp-label-text-style-line-height);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 180px;
+}
+
+/* Close button for removable labels */
+.ap-label-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--comp-label-height) - 4px);
+    height: calc(var(--comp-label-height) - 4px);
+    min-width: calc(var(--comp-label-height) - 4px);
+    border: none;
+    background: transparent;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 0;
+    color: var(--comp-label-text-color);
+    transition: background-color 0.15s;
+}
+
+.ap-label-close:hover {
+    background: var(--ref-color-electric-blue-40);
+}
+
+.ap-label-close:active {
+    background: var(--ref-color-electric-blue-60);
+}
+
+.ap-label-close-icon {
+    width: 12px;
+    height: 12px;
+}
+
+/* Label list container */
+.ap-label-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ref-spacing-xxs);
+}

package/assets/style/css-ui/link.css

@@ -0,0 +1,92 @@
+/* Agorapulse Link Styles */
+
+/* Base link styling */
+.ap-link {
+    display: inline-flex;
+    gap: var(--comp-link-spacing);
+    font-family: var(--comp-link-text-font-family);
+    font-weight: var(--comp-link-text-font-weight);
+    line-height: var(--comp-link-text-line-height);
+    font-size: var(--comp-link-text-size);
+    align-items: center;
+    text-decoration: underline;
+    -webkit-tap-highlight-color: transparent;
+    cursor: pointer;
+    color: var(--comp-link-default-color);
+}
+
+/* Size variants */
+.ap-link.small {
+    font-family: var(--comp-link-small-text-style-font-family);
+    font-weight: var(--comp-link-small-text-style-font-weight);
+    line-height: var(--comp-link-small-text-style-line-height);
+    font-size: var(--comp-link-small-text-style-size);
+}
+
+.ap-link.big {
+    font-family: var(--comp-link-big-text-style-font-family);
+    font-weight: var(--comp-link-big-text-style-font-weight);
+    line-height: var(--comp-link-big-text-style-line-height);
+    font-size: var(--comp-link-big-text-style-size);
+}
+
+/* Standalone variant (no underline) */
+.ap-link.standalone {
+    text-decoration: none;
+    font-family: var(--comp-link-standalone-default-text-style-font-family);
+    font-weight: var(--comp-link-standalone-default-text-style-font-weight);
+    line-height: var(--comp-link-standalone-default-text-style-line-height);
+    font-size: var(--comp-link-standalone-default-text-style-size);
+    color: var(--comp-link-default-color);
+}
+
+.ap-link.standalone.small {
+    font-family: var(--comp-link-standalone-small-text-style-font-family);
+    font-weight: var(--comp-link-standalone-small-text-style-font-weight);
+    line-height: var(--comp-link-standalone-small-text-style-line-height);
+    font-size: var(--comp-link-standalone-small-text-style-size);
+}
+
+/* Hover state */
+.ap-link:hover {
+    color: var(--comp-link-hover-color);
+}
+
+/* Active state */
+.ap-link:active:not(:visited):not(.disabled) {
+    color: var(--comp-link-clicked-color);
+}
+
+/* Visited state (only for non-standalone links) */
+.ap-link:visited:not(.standalone) {
+    color: var(--comp-link-visited-color);
+}
+
+/* Disabled state */
+.ap-link.disabled,
+.ap-link[aria-disabled='true'] {
+    color: var(--comp-link-disabled-color);
+    pointer-events: none;
+    cursor: default;
+}
+
+/* Icon sizing */
+.ap-link-icon {
+    min-width: var(--comp-link-icon-size);
+    min-height: var(--comp-link-icon-size);
+    max-width: var(--comp-link-icon-size);
+    max-height: var(--comp-link-icon-size);
+    flex-shrink: 0;
+}
+
+/* Icon positioning */
+.ap-link.inverse {
+    flex-direction: row-reverse;
+}
+
+/* Focus state for accessibility */
+.ap-link:focus-visible {
+    outline: 2px solid var(--ref-color-electric-blue-100);
+    outline-offset: 2px;
+    border-radius: 2px;
+}

package/assets/style/css-ui/loader.css

@@ -0,0 +1,247 @@
+/* Agorapulse Loader Styles */
+
+.ap-loader {
+    display: inline-block;
+    line-height: 0;
+}
+
+.ap-loader svg {
+    background: transparent;
+}
+
+.ap-loader circle {
+    fill: transparent;
+    stroke-linecap: round;
+    transform: rotate(-90deg);
+    transform-origin: center;
+}
+
+/* Fade circle (background track) */
+.ap-loader circle.fade.blue {
+    stroke: var(--ref-color-electric-blue-10);
+}
+
+.ap-loader circle.fade.orange {
+    stroke: var(--ref-color-orange-40);
+}
+
+.ap-loader circle.fade.white {
+    stroke: rgba(255, 255, 255, 0.4);
+}
+
+.ap-loader circle.fade.grey {
+    stroke: var(--ref-color-grey-20);
+}
+
+/* Main circle (animated) */
+.ap-loader circle.main.blue {
+    stroke: var(--ref-color-electric-blue-100);
+}
+
+.ap-loader circle.main.orange {
+    stroke: var(--ref-color-orange-100);
+}
+
+.ap-loader circle.main.white {
+    stroke: #ffffff;
+}
+
+.ap-loader circle.main.grey {
+    stroke: var(--ref-color-grey-80);
+}
+
+/* Size variants with pre-calculated values */
+/* Formula: radius = (diameter - thickness) / 2, circumference = trunc(2 * PI * radius) */
+
+/* 16px loader: radius=6.5, circumference=40 */
+.ap-loader.size-16 {
+    width: 16px;
+    height: 16px;
+}
+
+.ap-loader.size-16 circle {
+    stroke-width: 3px;
+    stroke-dasharray: 40;
+}
+
+.ap-loader.size-16 circle.main {
+    animation: ap-loader-16 1.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
+}
+
+.ap-loader.size-16 circle.fade {
+    animation: ap-loader-16 1.5s cubic-bezier(0.42, 0.0, 0.78, 1.0) infinite;
+}
+
+/* 24px loader: radius=10, circumference=62 */
+.ap-loader.size-24 {
+    width: 24px;
+    height: 24px;
+}
+
+.ap-loader.size-24 circle {
+    stroke-width: 4px;
+    stroke-dasharray: 62;
+}
+
+.ap-loader.size-24 circle.main {
+    animation: ap-loader-24 1.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
+}
+
+.ap-loader.size-24 circle.fade {
+    animation: ap-loader-24 1.5s cubic-bezier(0.42, 0.0, 0.78, 1.0) infinite;
+}
+
+/* 30px loader: radius=12.5, circumference=78 */
+.ap-loader.size-30 {
+    width: 30px;
+    height: 30px;
+}
+
+.ap-loader.size-30 circle {
+    stroke-width: 5px;
+    stroke-dasharray: 78;
+}
+
+.ap-loader.size-30 circle.main {
+    animation: ap-loader-30 1.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
+}
+
+.ap-loader.size-30 circle.fade {
+    animation: ap-loader-30 1.5s cubic-bezier(0.42, 0.0, 0.78, 1.0) infinite;
+}
+
+/* 48px loader: radius=20.5, circumference=128 */
+.ap-loader.size-48 {
+    width: 48px;
+    height: 48px;
+}
+
+.ap-loader.size-48 circle {
+    stroke-width: 7px;
+    stroke-dasharray: 128;
+}
+
+.ap-loader.size-48 circle.main {
+    animation: ap-loader-48 1.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
+}
+
+.ap-loader.size-48 circle.fade {
+    animation: ap-loader-48 1.5s cubic-bezier(0.42, 0.0, 0.78, 1.0) infinite;
+}
+
+/* 60px loader: radius=26, circumference=163 */
+.ap-loader.size-60 {
+    width: 60px;
+    height: 60px;
+}
+
+.ap-loader.size-60 circle {
+    stroke-width: 8px;
+    stroke-dasharray: 163;
+}
+
+.ap-loader.size-60 circle.main {
+    animation: ap-loader-60 1.5s cubic-bezier(0.42, 0.0, 0.58, 1.0) infinite;
+}
+
+.ap-loader.size-60 circle.fade {
+    animation: ap-loader-60 1.5s cubic-bezier(0.42, 0.0, 0.78, 1.0) infinite;
+}
+
+/*
+ * Animations
+ * Base transform: rotate(-90deg) is set on circle element
+ * Animation rotates from -90deg (base) to 630deg = 720deg (2 full turns)
+ * The stroke-dashoffset goes from full -> 55% -> full (arc grows then shrinks)
+ */
+
+/* 16px animation - circumference = 40 */
+@keyframes ap-loader-16 {
+    0% {
+        stroke-dashoffset: 40;
+    }
+    50% {
+        stroke-dashoffset: 22;
+    }
+    100% {
+        stroke-dashoffset: 40;
+        transform: rotate(630deg);
+    }
+}
+
+/* 24px animation - circumference = 62 */
+@keyframes ap-loader-24 {
+    0% {
+        stroke-dashoffset: 62;
+    }
+    50% {
+        stroke-dashoffset: 34;
+    }
+    100% {
+        stroke-dashoffset: 62;
+        transform: rotate(630deg);
+    }
+}
+
+/* 30px animation - circumference = 78 */
+@keyframes ap-loader-30 {
+    0% {
+        stroke-dashoffset: 78;
+    }
+    50% {
+        stroke-dashoffset: 42;
+    }
+    100% {
+        stroke-dashoffset: 78;
+        transform: rotate(630deg);
+    }
+}
+
+/* 48px animation - circumference = 128 */
+@keyframes ap-loader-48 {
+    0% {
+        stroke-dashoffset: 128;
+    }
+    50% {
+        stroke-dashoffset: 70;
+    }
+    100% {
+        stroke-dashoffset: 128;
+        transform: rotate(630deg);
+    }
+}
+
+/* 60px animation - circumference = 163 */
+@keyframes ap-loader-60 {
+    0% {
+        stroke-dashoffset: 163;
+    }
+    50% {
+        stroke-dashoffset: 89;
+    }
+    100% {
+        stroke-dashoffset: 163;
+        transform: rotate(630deg);
+    }
+}
+
+/* Loader container for centered display */
+.ap-loader-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Full page loader overlay */
+.ap-loader-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 9999;
+}

package/assets/style/css-ui/pagination.css

@@ -0,0 +1,161 @@
+/* Agorapulse Pagination Styles */
+
+.ap-pagination {
+    --paginator-button-size: 36px;
+
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-lg);
+    width: 100%;
+    justify-content: space-between;
+}
+
+/* Item count display */
+.ap-pagination-info {
+    font-weight: var(--ref-font-weight-regular);
+    font-size: var(--ref-font-size-sm);
+    line-height: var(--ref-line-height-sm);
+    color: var(--ref-color-grey-60);
+    white-space: nowrap;
+}
+
+/* Navigation buttons (prev/next) */
+.ap-pagination-nav {
+    display: grid;
+    place-content: center;
+    height: var(--paginator-button-size);
+    width: var(--paginator-button-size);
+    min-height: var(--paginator-button-size);
+    min-width: var(--paginator-button-size);
+    max-height: var(--paginator-button-size);
+    max-width: var(--paginator-button-size);
+    border-radius: var(--ref-border-radius-sm);
+    background: transparent;
+    border: none;
+    color: var(--ref-color-electric-blue-100);
+    cursor: pointer;
+    padding: 0;
+}
+
+.ap-pagination-nav:disabled {
+    pointer-events: none;
+    color: var(--ref-color-grey-40);
+}
+
+.ap-pagination-nav:hover:not(:disabled) {
+    background: var(--ref-color-electric-blue-10);
+}
+
+.ap-pagination-nav:active:not(:disabled) {
+    background: var(--ref-color-electric-blue-20);
+}
+
+@media (hover: hover) {
+    .ap-pagination-nav:focus:not(:disabled):not(:active) {
+        outline: 2px solid var(--ref-color-electric-blue-100);
+        outline-offset: 1px;
+    }
+}
+
+.ap-pagination-nav-icon {
+    width: 16px;
+    height: 16px;
+}
+
+/* Page numbers container */
+.ap-pagination-pages {
+    display: flex;
+    justify-self: center;
+    color: var(--ref-color-electric-blue-100);
+    gap: var(--ref-spacing-xxxs);
+}
+
+/* Individual page button */
+.ap-pagination-page {
+    width: var(--paginator-button-size);
+    height: var(--paginator-button-size);
+    max-width: var(--paginator-button-size);
+    max-height: var(--paginator-button-size);
+    min-width: var(--paginator-button-size);
+    min-height: var(--paginator-button-size);
+    border-radius: var(--ref-border-radius-sm);
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    color: var(--ref-color-electric-blue-100);
+    font-family: var(--ref-font-family);
+    font-weight: var(--ref-font-weight-regular);
+    font-size: var(--ref-font-size-sm);
+    line-height: var(--ref-line-height-sm);
+    padding: 0;
+}
+
+.ap-pagination-page:hover:not(.active) {
+    background-color: var(--ref-color-electric-blue-10);
+}
+
+@media (hover: hover) {
+    .ap-pagination-page:focus:not(.disabled):not(:active) {
+        outline: 2px solid var(--ref-color-electric-blue-100);
+        outline-offset: 1px;
+    }
+}
+
+.ap-pagination-page:active:not(.active) {
+    background-color: var(--ref-color-electric-blue-20);
+}
+
+.ap-pagination-page.active {
+    background-color: var(--ref-color-electric-blue-100);
+    color: var(--ref-color-white);
+    cursor: default;
+}
+
+/* Ellipsis */
+.ap-pagination-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--paginator-button-size);
+    height: var(--paginator-button-size);
+    color: var(--ref-color-grey-60);
+    font-family: var(--ref-font-family);
+    font-size: var(--ref-font-size-sm);
+}
+
+/* Go to page input */
+.ap-pagination-goto {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xs);
+}
+
+.ap-pagination-goto-label {
+    font-weight: var(--ref-font-weight-standard);
+    font-size: var(--ref-font-size-sm);
+    line-height: var(--ref-line-height-sm);
+    color: var(--ref-color-grey-60);
+    white-space: nowrap;
+}
+
+.ap-pagination-goto-input {
+    box-sizing: border-box;
+    background: var(--ref-color-white);
+    width: 48px;
+    height: var(--paginator-button-size);
+    border-radius: var(--ref-border-radius-sm);
+    border: 1px solid var(--ref-color-grey-20);
+    padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
+    font-family: var(--ref-font-family);
+    font-size: var(--ref-font-size-sm);
+    text-align: center;
+}
+
+.ap-pagination-goto-input:focus {
+    outline: none;
+    border-color: var(--ref-color-electric-blue-100);
+}

package/assets/style/css-ui/radio.css

@@ -0,0 +1,109 @@
+/* Agorapulse Radio Styles */
+
+.ap-radio-container {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    cursor: pointer;
+}
+
+.ap-radio-container:has(input:disabled) {
+    cursor: default;
+}
+
+/* Label positioning */
+.ap-radio-container.label-left {
+    flex-direction: row-reverse;
+}
+
+/* Native radio input (visually hidden but accessible) */
+.ap-radio-input {
+    transform: scale(0);
+    position: absolute;
+}
+
+/* Checked state */
+.ap-radio-input:checked ~ .ap-radio-button {
+    border-color: var(--ref-color-electric-blue-100);
+    box-shadow: inset 0 0 0 3px var(--ref-color-white);
+}
+
+.ap-radio-input:checked ~ .ap-radio-button.disabled {
+    background: var(--ref-color-grey-40);
+    box-shadow: inset 0 0 0 3px var(--ref-color-grey-10);
+}
+
+.ap-radio-input:checked:focus ~ .ap-radio-button {
+    border-color: var(--ref-color-electric-blue-100);
+}
+
+/* Disabled state */
+.ap-radio-input:disabled ~ .ap-radio-button {
+    box-shadow: inset 0 0 0 16px var(--ref-color-grey-10);
+    border-color: var(--ref-color-grey-20);
+}
+
+.ap-radio-input:disabled ~ .ap-radio-label {
+    color: var(--ref-color-grey-60);
+}
+
+/* Focus state */
+@media (hover: hover) {
+    .ap-radio-input:focus ~ .ap-radio-button {
+        outline: 3px solid var(--ref-color-electric-blue-100);
+        border-color: var(--ref-color-grey-80);
+        outline-offset: 1px;
+    }
+}
+
+/* Custom radio button visual */
+.ap-radio-button {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    border-radius: 100%;
+    border: 1px solid var(--ref-color-grey-60);
+    background: var(--ref-color-electric-blue-100);
+    box-shadow: inset 0 0 0 16px var(--ref-color-white);
+    transition: box-shadow var(--comp-radio-transition-duration);
+    flex-shrink: 0;
+}
+
+.ap-radio-container:hover:not(:has(input:disabled)) .ap-radio-button {
+    border-color: var(--ref-color-grey-80);
+}
+
+/* Label styling */
+.ap-radio-label {
+    display: flex;
+    align-items: center;
+    font-family: var(--sys-text-style-body-font-family);
+    font-size: var(--sys-text-style-body-size);
+    font-weight: var(--sys-text-style-body-weight);
+    line-height: var(--sys-text-style-body-line-height);
+    color: var(--ref-color-grey-100);
+    user-select: none;
+}
+
+.ap-radio-label:empty {
+    display: none;
+}
+
+.ap-radio-label.disabled {
+    color: var(--ref-color-grey-60);
+}
+
+/* Error state (for form validation) */
+.ap-radio-container.error .ap-radio-button {
+    border-color: var(--ref-color-red-100);
+}
+
+.ap-radio-container.error .ap-radio-button:hover {
+    border-color: var(--ref-color-red-60);
+}
+
+.ap-radio-container.error .ap-radio-input:focus ~ .ap-radio-button {
+    outline-color: var(--ref-color-red-100);
+    border-color: var(--ref-color-red-60);
+}