@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -1,294 +0,0 @@
-/* Agorapulse Datepicker Styles */
-
-.ap-datepicker {
-    background-color: var(--ref-color-white);
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--ref-border-radius-md);
-    box-shadow: 0 4px 25px -2px rgba(52, 69, 99, 0.15), 0 4px 6px -2px rgba(52, 69, 99, 0.15);
-    font-family: var(--ref-font-family);
-    width: fit-content;
-    overflow: hidden;
-}
-
-/* Header with month navigation */
-.ap-datepicker-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--ref-spacing-sm) var(--ref-spacing-md);
-    border-bottom: 1px solid var(--ref-color-grey-10);
-}
-
-.ap-datepicker-month-nav {
-    display: flex;
-    align-items: center;
-    gap: var(--ref-spacing-sm);
-}
-
-.ap-datepicker-month-label {
-    font-size: var(--ref-font-size-sm);
-    font-weight: var(--ref-font-weight-bold);
-    color: var(--ref-color-grey-100);
-    text-transform: capitalize;
-    min-width: 120px;
-    text-align: center;
-}
-
-.ap-datepicker-nav-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: transparent;
-    border-radius: 50%;
-    cursor: pointer;
-    color: var(--ref-color-grey-60);
-    transition: background-color 0.15s ease;
-}
-
-.ap-datepicker-nav-button:hover {
-    background-color: var(--ref-color-grey-10);
-}
-
-.ap-datepicker-nav-button:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-}
-
-.ap-datepicker-nav-button:disabled:hover {
-    background-color: transparent;
-}
-
-.ap-datepicker-nav-icon {
-    width: 14px;
-    height: 14px;
-}
-
-/* Calendar container */
-.ap-datepicker-calendars {
-    display: flex;
-}
-
-.ap-datepicker-calendar {
-    padding: var(--ref-spacing-md);
-}
-
-.ap-datepicker-calendar + .ap-datepicker-calendar {
-    border-left: 1px solid var(--ref-color-grey-10);
-}
-
-/* Calendar table */
-.ap-datepicker-table {
-    border-collapse: separate;
-    border-spacing: 0 5px;
-}
-
-/* Weekday headers */
-.ap-datepicker-weekday {
-    width: 33px;
-    height: 24px;
-    font-size: var(--ref-font-size-xs);
-    font-weight: var(--ref-font-weight-bold);
-    color: var(--ref-color-grey-40);
-    text-transform: capitalize;
-    text-align: center;
-}
-
-/* Day cells */
-.ap-datepicker-day {
-    width: 33px;
-    height: 27px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-    position: relative;
-}
-
-.ap-datepicker-day-inner {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 27px;
-    height: 27px;
-    margin: 0 3px;
-    border-radius: 50%;
-    font-size: var(--ref-font-size-sm);
-    color: var(--ref-color-grey-100);
-    transition: background-color 0.15s ease;
-}
-
-.ap-datepicker-day:hover .ap-datepicker-day-inner {
-    background-color: var(--ref-color-electric-blue-20);
-}
-
-/* Today */
-.ap-datepicker-day.today .ap-datepicker-day-inner {
-    border: 1px solid var(--ref-color-electric-blue-100);
-    width: 25px;
-    height: 25px;
-}
-
-/* Selected day */
-.ap-datepicker-day.selected .ap-datepicker-day-inner {
-    background-color: var(--ref-color-electric-blue-100);
-    color: var(--ref-color-white);
-}
-
-.ap-datepicker-day.selected:hover .ap-datepicker-day-inner {
-    background-color: var(--ref-color-electric-blue-85);
-}
-
-/* In range (for range picker) */
-.ap-datepicker-day.in-range {
-    background-color: var(--ref-color-electric-blue-10);
-}
-
-.ap-datepicker-day.in-range:first-child,
-.ap-datepicker-day.range-start {
-    border-radius: 2em 0 0 2em;
-}
-
-.ap-datepicker-day.in-range:last-child,
-.ap-datepicker-day.range-end {
-    border-radius: 0 2em 2em 0;
-}
-
-.ap-datepicker-day.range-start.range-end {
-    border-radius: 2em;
-    background-color: transparent;
-}
-
-/* Start and end of range */
-.ap-datepicker-day.range-start .ap-datepicker-day-inner,
-.ap-datepicker-day.range-end .ap-datepicker-day-inner {
-    background-color: var(--ref-color-electric-blue-100);
-    color: var(--ref-color-white);
-}
-
-/* Disabled/off days */
-.ap-datepicker-day.off .ap-datepicker-day-inner,
-.ap-datepicker-day:disabled .ap-datepicker-day-inner {
-    color: var(--ref-color-grey-20);
-    cursor: default;
-}
-
-.ap-datepicker-day.off:hover .ap-datepicker-day-inner,
-.ap-datepicker-day:disabled:hover .ap-datepicker-day-inner {
-    background-color: transparent;
-}
-
-/* Preset ranges sidebar */
-.ap-datepicker-ranges {
-    border-left: 1px solid var(--ref-color-grey-10);
-    padding: var(--ref-spacing-sm);
-    min-width: 140px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--ref-spacing-xxxs);
-}
-
-.ap-datepicker-range-button {
-    display: block;
-    width: 100%;
-    padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
-    border: none;
-    background: transparent;
-    border-radius: var(--ref-border-radius-sm);
-    font-family: var(--ref-font-family);
-    font-size: var(--ref-font-size-sm);
-    color: var(--ref-color-grey-80);
-    text-align: left;
-    cursor: pointer;
-    transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.ap-datepicker-range-button:hover:not(.active):not(:disabled) {
-    color: var(--ref-color-electric-blue-100);
-    background-color: var(--ref-color-electric-blue-10);
-}
-
-.ap-datepicker-range-button.active {
-    color: var(--ref-color-white);
-    background-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-datepicker-range-button.active:hover {
-    background-color: var(--ref-color-electric-blue-85);
-}
-
-.ap-datepicker-range-button:disabled {
-    color: var(--ref-color-grey-20);
-    cursor: default;
-}
-
-/* Footer with actions */
-.ap-datepicker-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--ref-spacing-sm);
-    padding: var(--ref-spacing-sm) var(--ref-spacing-md);
-    border-top: 1px solid var(--ref-color-grey-10);
-}
-
-/* Single calendar mode */
-.ap-datepicker.single .ap-datepicker-calendars {
-    justify-content: center;
-}
-
-/* Range mode with ranges sidebar */
-.ap-datepicker.range .ap-datepicker-calendars {
-    display: flex;
-}
-
-/* Inline variant (no shadow, no border-radius) */
-.ap-datepicker.inline {
-    box-shadow: none;
-    border: 1px solid var(--ref-color-grey-20);
-}
-
-/* Compact variant */
-.ap-datepicker.compact .ap-datepicker-calendar {
-    padding: var(--ref-spacing-xs);
-}
-
-.ap-datepicker.compact .ap-datepicker-header {
-    padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
-}
-
-/* Time picker addon */
-.ap-datepicker-time {
-    display: flex;
-    align-items: center;
-    gap: var(--ref-spacing-xs);
-    padding: var(--ref-spacing-sm) var(--ref-spacing-md);
-    border-top: 1px solid var(--ref-color-grey-10);
-}
-
-.ap-datepicker-time-label {
-    font-size: var(--ref-font-size-sm);
-    color: var(--ref-color-grey-60);
-}
-
-.ap-datepicker-time-input {
-    width: 60px;
-    padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
-    border: 1px solid var(--ref-color-grey-20);
-    border-radius: var(--ref-border-radius-sm);
-    font-family: var(--ref-font-family);
-    font-size: var(--ref-font-size-sm);
-    text-align: center;
-}
-
-.ap-datepicker-time-input:focus {
-    outline: none;
-    border-color: var(--ref-color-electric-blue-100);
-}
-
-.ap-datepicker-time-separator {
-    color: var(--ref-color-grey-60);
-}

package/assets/style/css-ui/dot-stepper.css

@@ -1,67 +0,0 @@
-/* Agorapulse Dot Stepper Styles */
-
-.ap-dot-stepper {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: var(--comp-dot-stepper-spacing);
-    place-content: stretch center;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-/* Individual dot */
-.ap-dot-stepper-dot {
-    position: relative;
-    width: var(--comp-dot-stepper-dot-size);
-    height: var(--comp-dot-stepper-dot-size);
-    border-radius: 50%;
-    border: var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);
-    background: transparent;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Hover state */
-.ap-dot-stepper-dot:hover:not(.active):not(.disabled) {
-    border-color: var(--ref-color-electric-blue-60);
-    background: var(--comp-dot-stepper-dot-inactive-focused-background-color);
-}
-
-/* Focus state */
-.ap-dot-stepper-dot:focus:not(.disabled) {
-    background: var(--comp-dot-stepper-dot-inactive-hovered-background-color);
-    outline: none;
-}
-
-.ap-dot-stepper-dot:focus:not(.disabled)::after {
-    content: '';
-    position: absolute;
-    width: calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));
-    height: calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));
-    top: calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));
-    left: calc(-1 * (var(--comp-dot-stepper-dot-inactive-border-width) * 2 + 1px));
-    border-radius: 50%;
-    border: var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100);
-}
-
-/* Active state */
-.ap-dot-stepper-dot.active {
-    background: var(--comp-dot-stepper-dot-active-background-color);
-    border-color: var(--ref-color-electric-blue-150);
-    cursor: default;
-}
-
-/* Disabled state */
-.ap-dot-stepper-dot.disabled {
-    cursor: default;
-    pointer-events: none;
-    opacity: 0.5;
-}
-
-/* Clickable indication */
-.ap-dot-stepper-dot:not(.active):not(.disabled):active {
-    background: var(--comp-dot-stepper-dot-inactive-clicked-background-color);
-}

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

@@ -1,163 +0,0 @@
-/* Agorapulse Infobox Styles */
-
-.ap-infobox {
-    --comp-icon-size: 20px;
-
-    display: flex;
-    width: 100%;
-    max-width: 100%;
-    font-size: var(--ref-font-size-sm);
-    line-height: var(--ref-font-line-height-sm);
-    align-items: flex-start;
-    color: var(--ref-color-grey-100);
-    padding: var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);
-    border-radius: var(--comp-infobox-border-radius);
-    overflow: hidden;
-    font-family: var(--comp-infobox-text-title-font-family);
-    box-sizing: border-box;
-    position: relative;
-    gap: var(--comp-infobox-button-margin-left);
-}
-
-/* Status banner on the left */
-.ap-infobox-banner {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: var(--comp-infobox-border-width);
-    height: 100%;
-}
-
-/* Infobox icon wrapper */
-.ap-infobox-icon {
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    width: var(--comp-icon-size);
-    min-width: var(--comp-icon-size);
-    height: var(--comp-icon-size);
-    margin-top: 1px;
-    flex-shrink: 0;
-}
-
-.ap-infobox-icon svg {
-    width: 100%;
-    height: 100%;
-}
-
-/* Infobox with title - adjust icon alignment */
-.ap-infobox.has-title .ap-infobox-icon {
-    margin-top: var(--ref-spacing-xxxs);
-}
-
-/* Content wrapper */
-.ap-infobox-content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 1;
-    justify-content: space-between;
-    gap: var(--ref-spacing-xxs);
-    min-width: 0;
-}
-
-/* Text content */
-.ap-infobox-texts {
-    display: flex;
-    flex-direction: column;
-    overflow-wrap: anywhere;
-    width: 100%;
-}
-
-/* Title */
-.ap-infobox-title {
-    font-weight: var(--comp-infobox-text-title-weight);
-    font-family: var(--comp-infobox-text-title-font-family);
-    font-size: var(--comp-infobox-text-title-size);
-    line-height: var(--comp-infobox-text-title-line-height);
-    margin: 0;
-}
-
-/* Message/Body text */
-.ap-infobox-message {
-    font-weight: var(--comp-infobox-text-content-weight);
-    font-family: var(--comp-infobox-text-content-font-family);
-    font-size: var(--comp-infobox-text-content-size);
-    line-height: var(--comp-infobox-text-content-line-height);
-    margin: 0;
-}
-
-/* Action button area */
-.ap-infobox-actions {
-    display: flex;
-    gap: var(--ref-spacing-xs);
-    flex-shrink: 0;
-}
-
-/* Info variant */
-.ap-infobox.info {
-    background-color: var(--comp-infobox-info-background-color);
-}
-
-.ap-infobox.info .ap-infobox-icon {
-    color: var(--comp-infobox-info-icon-color);
-}
-
-.ap-infobox.info .ap-infobox-banner {
-    background-color: var(--comp-infobox-info-border-left-color);
-}
-
-/* Warning variant */
-.ap-infobox.warning {
-    background-color: var(--comp-infobox-warning-background-color);
-}
-
-.ap-infobox.warning .ap-infobox-icon {
-    color: var(--comp-infobox-warning-icon-color);
-}
-
-.ap-infobox.warning .ap-infobox-banner {
-    background-color: var(--comp-infobox-warning-border-left-color);
-}
-
-/* Error variant */
-.ap-infobox.error {
-    background-color: var(--comp-infobox-error-background-color);
-}
-
-.ap-infobox.error .ap-infobox-icon {
-    color: var(--comp-infobox-error-icon-color);
-}
-
-.ap-infobox.error .ap-infobox-banner {
-    background-color: var(--comp-infobox-error-border-left-color);
-}
-
-/* Success variant */
-.ap-infobox.success {
-    background-color: var(--comp-infobox-success-background-color);
-}
-
-.ap-infobox.success .ap-infobox-icon {
-    color: var(--comp-infobox-success-icon-color);
-}
-
-.ap-infobox.success .ap-infobox-banner {
-    background-color: var(--comp-infobox-success-border-left-color);
-}
-
-/* Wide layout (content and actions side by side) */
-@media (min-width: 588px) {
-    .ap-infobox.wide .ap-infobox-content {
-        flex-direction: row;
-        align-items: center;
-    }
-
-    .ap-infobox.wide .ap-infobox-icon {
-        margin-top: 0;
-    }
-
-    .ap-infobox.wide {
-        align-items: center;
-    }
-}

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

@@ -1,119 +0,0 @@
-/* Agorapulse Input Styles */
-
-/* Form field container */
-.ap-form-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ref-spacing-xxs);
-}
-
-/* Form label */
-.ap-form-label {
-    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);
-}
-
-/* Input group container */
-.ap-input-group {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    height: var(--comp-input-height);
-    border: 1px solid var(--comp-input-border-default-color);
-    box-sizing: border-box;
-    border-radius: var(--comp-input-border-radius);
-    overflow: hidden;
-    background-color: var(--comp-input-fill-color);
-    gap: var(--ref-spacing-xxs);
-    padding: 0 var(--ref-spacing-xxs);
-}
-
-/* Input group with disabled input */
-.ap-input-group:has(input:disabled) {
-    background-color: var(--comp-input-fill-disabled-color);
-    color: var(--comp-input-text-disabled-color);
-}
-
-/* Input group hover state */
-.ap-input-group:hover:not(:has(input:disabled)) {
-    border-color: var(--comp-input-border-hover-color);
-}
-
-/* Input group focus state */
-.ap-input-group:focus-within:not(:has(input:disabled)) {
-    border-color: var(--comp-input-border-focused-color);
-}
-
-/* Input group invalid state */
-.ap-input-group.invalid,
-.ap-input-group:has(input.invalid) {
-    border-color: var(--comp-input-border-error-color);
-}
-
-/* Input group valid state */
-.ap-input-group.valid,
-.ap-input-group:has(input.valid) {
-    border-color: var(--comp-input-border-success-color);
-}
-
-/* Input group with icon on right */
-.ap-input-group.inverse {
-    flex-direction: row-reverse;
-}
-
-/* Input element */
-.ap-input {
-    flex: 1;
-    border: none !important;
-    outline: none;
-    background: transparent;
-    color: var(--comp-input-text-default-color);
-    font-family: var(--comp-input-text-font-family);
-    font-size: var(--comp-input-text-size);
-    font-weight: var(--comp-input-text-font-weight);
-    padding: 0;
-    min-width: 0;
-}
-
-/* Input inside input-group should never have border */
-.ap-input-group .ap-input {
-    border: none !important;
-}
-
-.ap-input::placeholder {
-    color: var(--comp-input-text-placeholder-color);
-}
-
-.ap-input:disabled {
-    color: var(--comp-input-text-disabled-color);
-}
-
-/* Input icon */
-.ap-input-icon {
-    flex-shrink: 0;
-    width: var(--comp-input-icon-size);
-    height: var(--comp-input-icon-size);
-    color: var(--comp-input-icon-color);
-    pointer-events: none;
-}
-
-/* Form message (error/success) */
-.ap-form-message {
-    font-family: var(--sys-text-style-body-font-family);
-    font-size: var(--sys-text-style-caption-size);
-    line-height: var(--sys-text-style-caption-line-height);
-    display: flex;
-    align-items: center;
-    gap: var(--ref-spacing-xxs);
-}
-
-.ap-form-message.error {
-    color: var(--ref-color-red-100);
-}
-
-.ap-form-message.success {
-    color: var(--ref-color-green-100);
-}

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

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