@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -1,92 +0,0 @@
-/* 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

@@ -1,247 +0,0 @@
-/* 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

@@ -1,161 +0,0 @@
-/* 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

@@ -1,109 +0,0 @@
-/* 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);
-}