@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -1,446 +0,0 @@
-/* Agorapulse Button Styles */
-
-@keyframes slide {
-    0% {
-        left: calc(var(--comp-button-padding-vertical) * -1 - 50px);
-    }
-    100% {
-        left: 100%;
-    }
-}
-
-.ap-button-container {
-    display: inline-block;
-    position: relative;
-}
-
-.ap-button {
-    border: none;
-    border-radius: var(--comp-button-border-radius);
-    padding: var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--comp-split-button-spacing);
-    font-size: var(--comp-button-text-size);
-    font-family: var(--comp-button-text-font-family);
-    line-height: var(--comp-button-text-line-height);
-    font-weight: var(--comp-button-text-weight);
-    max-height: var(--comp-button-height);
-    min-height: var(--comp-button-height);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 100%;
-}
-
-.ap-button:not(:disabled):not(.loading):hover {
-    cursor: pointer;
-}
-
-.ap-button:disabled {
-    pointer-events: none;
-}
-
-.ap-button.loading {
-    pointer-events: none;
-}
-
-.ap-button:focus:not(:disabled):not(:active):not(.loading) {
-    outline: 2px solid var(--ref-color-electric-blue-100);
-    outline-offset: 1px;
-}
-
-.ap-button.inverse {
-    flex-direction: row-reverse;
-}
-
-.ap-button-icon {
-    width: 16px;
-    min-width: 16px;
-    max-width: 16px;
-    height: 16px;
-    min-height: 16px;
-    max-height: 16px;
-}
-
-/* Primary Orange */
-.ap-button.primary.orange {
-    background: var(--ref-color-orange-100);
-    color: var(--ref-color-white);
-}
-
-.ap-button.primary.orange:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-orange-80);
-}
-
-.ap-button.primary.orange:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-orange-60);
-}
-
-.ap-button.primary.orange:disabled {
-    background-color: var(--ref-color-orange-20);
-}
-
-.ap-button.primary.orange.loading {
-    background-color: var(--ref-color-orange-60);
-}
-
-/* Primary Blue */
-.ap-button.primary.blue {
-    background: var(--ref-color-electric-blue-100);
-    color: var(--ref-color-white);
-}
-
-.ap-button.primary.blue:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-electric-blue-80);
-}
-
-.ap-button.primary.blue:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-electric-blue-60);
-}
-
-.ap-button.primary.blue:disabled {
-    background-color: var(--ref-color-electric-blue-20);
-}
-
-.ap-button.primary.blue.loading {
-    background-color: var(--ref-color-electric-blue-60);
-}
-
-/* Secondary Orange */
-.ap-button.secondary.orange {
-    background: var(--ref-color-orange-10);
-    color: var(--ref-color-orange-100);
-}
-
-.ap-button.secondary.orange:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-orange-20);
-}
-
-.ap-button.secondary.orange:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-orange-40);
-}
-
-.ap-button.secondary.orange:disabled {
-    background-color: var(--ref-color-orange-10);
-    color: var(--ref-color-orange-20);
-}
-
-.ap-button.secondary.orange.loading {
-    background-color: var(--ref-color-orange-40);
-}
-
-/* Secondary Blue */
-.ap-button.secondary.blue {
-    background: var(--ref-color-electric-blue-10);
-    color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.secondary.blue:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-electric-blue-20);
-}
-
-.ap-button.secondary.blue:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-electric-blue-40);
-}
-
-.ap-button.secondary.blue:disabled {
-    background-color: var(--ref-color-electric-blue-10);
-    color: var(--ref-color-electric-blue-20);
-}
-
-.ap-button.secondary.blue.loading {
-    background-color: var(--ref-color-electric-blue-40);
-}
-
-/* Ghost Grey */
-.ap-button.ghost.grey {
-    background: transparent;
-    color: var(--ref-color-grey-80);
-}
-
-.ap-button.ghost.grey:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-grey-05);
-}
-
-.ap-button.ghost.grey:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-grey-10);
-}
-
-.ap-button.ghost.grey:disabled {
-    color: var(--ref-color-grey-20);
-}
-
-.ap-button.ghost.grey.loading {
-    color: var(--ref-color-grey-40);
-}
-
-/* Ghost Blue */
-.ap-button.ghost.blue {
-    background: transparent;
-    color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.ghost.blue:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-electric-blue-10);
-}
-
-.ap-button.ghost.blue:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-electric-blue-20);
-}
-
-.ap-button.ghost.blue:disabled {
-    color: var(--ref-color-electric-blue-20);
-}
-
-.ap-button.ghost.blue.loading {
-    color: var(--ref-color-electric-blue-40);
-}
-
-/* Ghost Red */
-.ap-button.ghost.red {
-    background: transparent;
-    color: var(--ref-color-red-100);
-}
-
-.ap-button.ghost.red:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-red-10);
-}
-
-.ap-button.ghost.red:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-red-20);
-}
-
-.ap-button.ghost.red:disabled {
-    color: var(--ref-color-red-20);
-}
-
-.ap-button.ghost.red.loading {
-    color: var(--ref-color-red-40);
-}
-
-/* Ghost Green */
-.ap-button.ghost.green {
-    background: transparent;
-    color: var(--ref-color-green-100);
-}
-
-.ap-button.ghost.green:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-green-10);
-}
-
-.ap-button.ghost.green:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-green-20);
-}
-
-.ap-button.ghost.green:disabled {
-    color: var(--ref-color-green-20);
-}
-
-.ap-button.ghost.green.loading {
-    color: var(--ref-color-green-40);
-}
-
-/* Stroked Grey */
-.ap-button.stroked.grey {
-    background: var(--ref-color-white);
-    border: 1px solid var(--ref-color-grey-20);
-    color: var(--ref-color-grey-80);
-}
-
-.ap-button.stroked.grey:hover:not(:disabled):not(.loading) {
-    border-color: var(--ref-color-grey-40);
-}
-
-.ap-button.stroked.grey:active:not(:disabled):not(.loading) {
-    border-color: var(--ref-color-grey-60);
-}
-
-.ap-button.stroked.grey:disabled {
-    border-color: var(--ref-color-grey-20);
-    color: var(--ref-color-grey-20);
-}
-
-.ap-button.stroked.grey.loading {
-    border-color: var(--ref-color-grey-20);
-    color: var(--ref-color-grey-40);
-}
-
-/* Stroked Blue */
-.ap-button.stroked.blue {
-    background: var(--ref-color-white);
-    border: 1px solid var(--ref-color-electric-blue-60);
-    color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.stroked.blue:hover:not(:disabled):not(.loading) {
-    border-color: var(--ref-color-electric-blue-80);
-}
-
-.ap-button.stroked.blue:active:not(:disabled):not(.loading) {
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.stroked.blue:disabled {
-    border-color: var(--ref-color-electric-blue-20);
-    color: var(--ref-color-electric-blue-20);
-}
-
-.ap-button.stroked.blue.loading {
-    border-color: var(--ref-color-electric-blue-20);
-    color: var(--ref-color-electric-blue-40);
-}
-
-/* Stroked Red */
-.ap-button.stroked.red {
-    background: var(--ref-color-white);
-    border: 1px solid var(--ref-color-red-60);
-    color: var(--ref-color-red-100);
-}
-
-.ap-button.stroked.red:hover:not(:disabled):not(.loading) {
-    border-color: var(--ref-color-red-80);
-}
-
-.ap-button.stroked.red:active:not(:disabled):not(.loading) {
-    border-color: var(--ref-color-red-100);
-}
-
-.ap-button.stroked.red:disabled {
-    border-color: var(--ref-color-red-20);
-    color: var(--ref-color-red-20);
-}
-
-.ap-button.stroked.red.loading {
-    border-color: var(--ref-color-red-20);
-    color: var(--ref-color-red-40);
-}
-
-/* Stroked Transparent */
-.ap-button.transparent {
-    background: transparent;
-}
-
-/* Mermaid */
-.ap-button.mermaid {
-    background: linear-gradient(90deg, #578fff 0%, #df52ff 100%);
-    color: var(--ref-color-grey-100);
-    position: relative;
-    z-index: 1;
-}
-
-.ap-button.mermaid::after {
-    content: '';
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    right: 1px;
-    bottom: 1px;
-    background: var(--ref-color-white);
-    border-radius: calc(var(--ref-border-radius-sm) - 1px);
-    z-index: -1;
-    pointer-events: none;
-}
-
-.ap-button.mermaid > * {
-    position: relative;
-    z-index: 1;
-}
-
-.ap-button.mermaid:hover:not(:disabled):not(.loading)::after {
-    background: var(--ref-color-mermaid-10);
-}
-
-.ap-button.mermaid:active:not(:disabled):not(.loading)::after {
-    background: var(--ref-color-mermaid-20);
-}
-
-.ap-button.mermaid:disabled {
-    background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from40) 0%, var(--ref-color-mermaid-gradient-to40) 100%);
-    color: var(--ref-color-grey-20);
-}
-
-.ap-button.mermaid.loading {
-    background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from40) 0%, var(--ref-color-mermaid-gradient-to40) 100%);
-    color: var(--ref-color-grey-40);
-}
-
-/* Locked */
-.ap-button.locked {
-    background-color: var(--ref-color-purple-10);
-    color: var(--ref-color-purple-80);
-}
-
-.ap-button.locked:hover:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-purple-20);
-}
-
-.ap-button.locked:active:not(:disabled):not(.loading) {
-    background-color: var(--ref-color-purple-40);
-}
-
-/* Loading bar */
-.ap-loading-bar {
-    position: absolute;
-    bottom: 0;
-    left: var(--comp-button-padding-vertical);
-    width: 50px;
-    height: 5px;
-    border-radius: 8px;
-    animation: slide 1.5s ease-in-out infinite;
-}
-
-.ap-button.primary.orange .ap-loading-bar {
-    background-color: var(--ref-color-orange-100);
-}
-
-.ap-button.primary.blue .ap-loading-bar {
-    background-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.secondary.orange .ap-loading-bar {
-    background-color: var(--ref-color-orange-100);
-}
-
-.ap-button.secondary.blue .ap-loading-bar {
-    background-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.ghost.grey .ap-loading-bar,
-.ap-button.stroked.grey .ap-loading-bar {
-    background-color: var(--ref-color-grey-80);
-}
-
-.ap-button.ghost.blue .ap-loading-bar,
-.ap-button.stroked.blue .ap-loading-bar {
-    background-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-button.ghost.red .ap-loading-bar,
-.ap-button.stroked.red .ap-loading-bar {
-    background-color: var(--ref-color-red-100);
-}
-
-.ap-button.ghost.green .ap-loading-bar {
-    background-color: var(--ref-color-green-100);
-}
-
-.ap-button.mermaid .ap-loading-bar {
-    background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from) 0%, var(--ref-color-mermaid-gradient-to) 100%);
-    z-index: 2;
-}
-
-/* Locked icon */
-.ap-locked-symbol {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    border-radius: 100%;
-    background: var(--ref-color-white);
-}
-
-.ap-locked-symbol svg {
-    color: var(--ref-color-purple-100);
-}

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

@@ -1,170 +0,0 @@
-/* Agorapulse Checkbox Styles */
-
-.ap-checkbox-container {
-    display: flex;
-    align-items: center;
-    gap: var(--ref-spacing-xxs);
-    cursor: pointer;
-}
-
-.ap-checkbox-container:has(input:disabled) {
-    cursor: default;
-}
-
-/* Label positioning */
-.ap-checkbox-container.label-left {
-    flex-direction: row-reverse;
-}
-
-.ap-checkbox-container.full-width {
-    justify-content: space-between;
-    width: 100%;
-}
-
-/* Native checkbox input (visually hidden but accessible) */
-.ap-checkbox-input {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-    overflow: hidden;
-}
-
-/* Focus state */
-@media (hover: hover) {
-    .ap-checkbox-input:focus:not(:disabled) ~ .ap-checkbox-box {
-        outline: 3px solid var(--ref-color-electric-blue-100);
-        outline-offset: 1px;
-    }
-}
-
-/* Custom checkbox visual */
-.ap-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    min-width: 16px;
-    min-height: 16px;
-    max-width: 16px;
-    max-height: 16px;
-    border-radius: var(--sys-border-radius-sm);
-    border: 1px solid var(--ref-color-grey-60);
-    background: var(--ref-color-white);
-    box-sizing: border-box;
-    flex-shrink: 0;
-    transition: background-color 0.15s, border-color 0.15s;
-}
-
-/* Hover state */
-.ap-checkbox-container:hover:not(:has(input:disabled)) .ap-checkbox-box {
-    border-color: var(--ref-color-grey-80);
-}
-
-/* Active state */
-.ap-checkbox-container:active:not(:has(input:disabled)) .ap-checkbox-box {
-    border-color: var(--ref-color-grey-100);
-}
-
-/* Checked state */
-.ap-checkbox-input:checked ~ .ap-checkbox-box {
-    background: var(--ref-color-electric-blue-100);
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-/* Checked hover state */
-.ap-checkbox-container:hover:not(:has(input:disabled)) .ap-checkbox-input:checked ~ .ap-checkbox-box {
-    background: var(--ref-color-electric-blue-80);
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-/* Checked active state */
-.ap-checkbox-container:active:not(:has(input:disabled)) .ap-checkbox-input:checked ~ .ap-checkbox-box {
-    background: var(--ref-color-electric-blue-60);
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-/* Indeterminate state */
-.ap-checkbox-box.indeterminate {
-    background: var(--ref-color-electric-blue-100);
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-checkbox-container:hover:not(:has(input:disabled)) .ap-checkbox-box.indeterminate {
-    background: var(--ref-color-electric-blue-80);
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-/* Disabled state */
-.ap-checkbox-input:disabled ~ .ap-checkbox-box {
-    background: var(--ref-color-grey-10);
-    border-color: var(--ref-color-grey-20);
-    pointer-events: none;
-}
-
-.ap-checkbox-input:disabled:checked ~ .ap-checkbox-box,
-.ap-checkbox-box.indeterminate.disabled {
-    background: var(--ref-color-grey-20);
-    border-color: var(--ref-color-grey-20);
-}
-
-/* Error state (for form validation) */
-.ap-checkbox-container.error .ap-checkbox-box {
-    border-color: var(--ref-color-red-100);
-}
-
-/* Checkmark icon */
-.ap-checkbox-icon {
-    width: 10px;
-    height: 10px;
-    color: var(--ref-color-white);
-    display: none;
-}
-
-.ap-checkbox-input:checked ~ .ap-checkbox-box .ap-checkbox-icon-check {
-    display: block;
-}
-
-.ap-checkbox-box.indeterminate .ap-checkbox-icon-indeterminate {
-    display: block;
-}
-
-/* Indeterminate line */
-.ap-checkbox-indeterminate-line {
-    width: 8px;
-    height: 1.5px;
-    background: var(--ref-color-white);
-    display: none;
-}
-
-.ap-checkbox-box.indeterminate .ap-checkbox-indeterminate-line {
-    display: block;
-}
-
-/* Label styling */
-.ap-checkbox-label {
-    display: flex;
-    align-items: center;
-    font-family: var(--comp-forms-label-font-family);
-    font-size: var(--comp-forms-label-size);
-    font-weight: var(--comp-forms-label-font-weight);
-    line-height: var(--comp-forms-label-line-height);
-    color: var(--comp-forms-label-text-color);
-    user-select: none;
-}
-
-.ap-checkbox-label:empty {
-    display: none;
-}
-
-.ap-checkbox-label.disabled {
-    color: var(--ref-color-grey-60);
-}
-
-.ap-checkbox-label.bold {
-    font-weight: var(--ref-font-weight-bold);
-}

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

@@ -1,73 +0,0 @@
-/* Agorapulse Counter Styles */
-
-.ap-counter {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: fit-content;
-    border-radius: var(--comp-counter-border-radius);
-    padding: 0 2px;
-    box-sizing: border-box;
-}
-
-/* Normal size (default) */
-.ap-counter.normal {
-    font-weight: var(--comp-counter-text-style-font-weight);
-    font-family: var(--comp-counter-text-style-font-family);
-    line-height: var(--comp-counter-text-style-line-height);
-    font-size: var(--comp-counter-text-style-size);
-    height: var(--comp-counter-height);
-    max-height: var(--comp-counter-height);
-}
-
-/* Big size */
-.ap-counter.big {
-    font-weight: var(--comp-counter-big-text-style-font-weight);
-    font-family: var(--comp-counter-big-text-style-font-family);
-    line-height: var(--comp-counter-big-text-style-line-height);
-    font-size: var(--comp-counter-big-text-style-size);
-    height: var(--comp-counter-big-height);
-    max-height: var(--comp-counter-big-height);
-}
-
-/* Blue color */
-.ap-counter.blue {
-    color: var(--comp-counter-blue-color);
-}
-
-.ap-counter.blue.bg {
-    background-color: var(--comp-counter-blue-with-background-background-color);
-}
-
-/* Orange color */
-.ap-counter.orange {
-    color: var(--comp-counter-orange-color);
-}
-
-.ap-counter.orange.bg {
-    color: var(--comp-counter-orange-with-background-color);
-    background-color: var(--comp-counter-orange-with-background-background-color);
-}
-
-/* Grey color */
-.ap-counter.grey {
-    color: var(--comp-counter-grey-color);
-}
-
-.ap-counter.grey.bg {
-    background-color: var(--comp-counter-grey-with-background-background-color);
-}
-
-/* Notification style */
-.ap-counter.notif {
-    padding: 0 4px;
-    border-radius: var(--comp-counter-notif-border-radius);
-    font-size: var(--comp-counter-text-style-size);
-    font-weight: var(--comp-counter-text-style-font-weight);
-    font-family: var(--comp-counter-text-style-font-family);
-    line-height: var(--comp-counter-text-style-line-height);
-    min-width: var(--comp-counter-notif-min-width);
-    height: var(--comp-counter-notif-min-width);
-    color: var(--comp-counter-notif-color);
-    background-color: var(--comp-counter-notif-background-color);
-}