@agorapulse/ui-theme 20.1.18 → 20.1.19

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

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

@@ -0,0 +1,67 @@
+/* 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/index.css

@@ -0,0 +1,27 @@
+/* Agorapulse CSS-UI Components Index */
+
+@import 'action-dropdown.css';
+@import 'avatar.css';
+@import 'badge.css';
+@import 'button.css';
+@import 'checkbox.css';
+@import 'counter.css';
+@import 'datepicker.css';
+@import 'dot-stepper.css';
+@import 'infobox.css';
+@import 'input.css';
+@import 'label.css';
+@import 'link.css';
+@import 'loader.css';
+@import 'pagination.css';
+@import 'radio.css';
+@import 'select.css';
+@import 'snackbar.css';
+@import 'status.css';
+@import 'stepper.css';
+@import 'table.css';
+@import 'tabs.css';
+@import 'tag.css';
+@import 'textarea.css';
+@import 'toggle.css';
+@import 'tooltip.css';

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

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