@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -1,188 +0,0 @@
-/* Agorapulse Tabs Styles */
-
-.ap-tabs {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-/* Tabs navigation bar */
-.ap-tabs-nav {
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--comp-tabs-border-color);
-    position: relative;
-}
-
-/* Individual tab button */
-.ap-tabs-tab {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    font-family: var(--comp-tabs-text-font-family);
-    text-align: center;
-    position: relative;
-    white-space: nowrap;
-    padding: var(--comp-tabs-tab-padding);
-    font-size: var(--comp-tabs-tab-font-size);
-    line-height: var(--comp-tabs-tab-line-height);
-    min-height: var(--comp-tabs-tab-min-height);
-    color: var(--comp-tabs-tab-text-color-default);
-    font-weight: var(--ref-font-weight-regular);
-}
-
-/* Tab content wrapper */
-.ap-tabs-tab-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--comp-tabs-tab-content-gap);
-}
-
-/* Tab header (icon + label) */
-.ap-tabs-tab-header {
-    display: flex;
-    align-items: center;
-    gap: var(--comp-tabs-tab-header-gap);
-}
-
-/* Tab label */
-.ap-tabs-tab-label {
-    font-weight: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-/* Tab icon */
-.ap-tabs-tab-icon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-}
-
-/* Feature lock icon */
-.ap-tabs-tab-lock {
-    width: 16px;
-    height: 16px;
-    color: var(--comp-tabs-tab-feature-lock-color);
-}
-
-/* Hover state */
-.ap-tabs-tab:hover:not(:disabled):not(.active) {
-    background-color: var(--comp-tabs-tab-hover-background-color);
-}
-
-/* Focus state */
-.ap-tabs-tab:focus {
-    outline: none;
-}
-
-.ap-tabs-tab:focus-visible:not(.active) {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--comp-tabs-tab-focus-color);
-    border-radius: var(--comp-tabs-tab-focus-border-radius);
-    background-color: var(--comp-tabs-tab-focus-background-color);
-}
-
-/* Active/pressed state */
-.ap-tabs-tab:active:not(:disabled):not(.active) {
-    background-color: var(--comp-tabs-tab-active-background-color);
-}
-
-/* Disabled state */
-.ap-tabs-tab:disabled,
-.ap-tabs-tab.disabled {
-    cursor: not-allowed;
-    color: var(--comp-tabs-tab-text-color-disabled);
-    opacity: 0.5;
-}
-
-/* Active tab */
-.ap-tabs-tab.active {
-    color: var(--comp-tabs-tab-text-color-active);
-    text-shadow: 0.5px 0 0 currentColor;
-}
-
-.ap-tabs-tab.active:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--comp-tabs-tab-focus-color);
-    border-radius: var(--comp-tabs-tab-focus-border-radius);
-}
-
-/* Feature locked tab */
-.ap-tabs-tab.feature-locked:hover:not(:disabled):not(.active) {
-    background-color: var(--comp-tabs-tab-feature-locked-hover-background-color);
-}
-
-.ap-tabs-tab.feature-locked:focus-visible:not(.active) {
-    color: var(--comp-tabs-tab-text-color-feature-locked-focus);
-    background-color: var(--comp-tabs-tab-feature-locked-focus-background-color);
-}
-
-.ap-tabs-tab.feature-locked:active:not(:disabled):not(.active) {
-    background-color: var(--comp-tabs-tab-feature-locked-active-background-color);
-}
-
-.ap-tabs-tab.feature-locked.active {
-    color: var(--comp-tabs-tab-text-color-feature-locked-active);
-    text-shadow: 0.5px 0 0 currentColor;
-}
-
-.ap-tabs-tab.feature-locked.active:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--comp-tabs-tab-focus-color);
-    border-radius: var(--comp-tabs-tab-focus-border-radius);
-}
-
-/* Active indicator (underline) */
-.ap-tabs-indicator {
-    position: absolute;
-    bottom: -1px;
-    height: 4px;
-    background-color: var(--comp-tabs-tab-active-indicator-color);
-    transition:
-        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-        background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    transform-origin: left;
-}
-
-/* Feature locked indicator */
-.ap-tabs-indicator.feature-locked {
-    background-color: var(--comp-tabs-tab-feature-locked-indicator-color);
-}
-
-/* Tab content panel */
-.ap-tabs-content {
-    flex: 1;
-    width: 100%;
-}
-
-/* Tab panel (individual content area) */
-.ap-tabs-panel {
-    display: none;
-    padding: var(--ref-spacing-md) 0;
-}
-
-.ap-tabs-panel.active {
-    display: block;
-}
-
-/* Scrollable tabs container */
-.ap-tabs-nav.scrollable {
-    overflow-x: auto;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-}
-
-.ap-tabs-nav.scrollable::-webkit-scrollbar {
-    display: none;
-}
-
-/* Full width tabs */
-.ap-tabs.full-width .ap-tabs-tab {
-    flex: 1;
-}

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

@@ -1,171 +0,0 @@
-/* Agorapulse Tag Styles */
-
-.ap-tag {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    height: var(--comp-tag-height);
-    max-height: var(--comp-tag-height);
-    box-sizing: border-box;
-    border-width: 1px;
-    border-style: solid;
-    padding: 0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);
-    border-radius: var(--comp-tag-border-radius);
-    gap: var(--ref-spacing-xxxs);
-    vertical-align: middle;
-}
-
-/* Clearable/Add variant - with close button */
-.ap-tag.clearable,
-.ap-tag.add {
-    padding: 0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left);
-}
-
-/* Mini size */
-.ap-tag.mini {
-    height: var(--comp-tag-mini-height);
-    padding: 0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left);
-}
-
-/* Tag text */
-.ap-tag-text {
-    max-width: 180px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: var(--comp-tag-text-style-size);
-    line-height: var(--comp-tag-text-style-line-height);
-    font-weight: var(--comp-tag-text-style-font-weight);
-    font-family: var(--comp-tag-text-style-font-family);
-}
-
-/* Tag avatar */
-.ap-tag-avatar {
-    --avatar-size: 16px;
-    min-width: var(--avatar-size);
-    width: var(--avatar-size);
-    max-width: var(--avatar-size);
-    min-height: var(--avatar-size);
-    height: var(--avatar-size);
-    max-height: var(--avatar-size);
-    border-radius: 100%;
-    overflow: hidden;
-}
-
-.ap-tag-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-/* Tag action button (close/add) */
-.ap-tag-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: var(--comp-close-button-size);
-    max-width: var(--comp-close-button-size);
-    height: var(--comp-close-button-size);
-    max-height: var(--comp-close-button-size);
-    border-radius: 50%;
-    background: transparent;
-    border: none;
-    padding: var(--comp-close-button-padding);
-    outline: none;
-    cursor: pointer;
-    transition: background-color 0.25s;
-}
-
-@media (hover: hover) {
-    .ap-tag-button:focus:not(:disabled):not(:active) {
-        outline: 2px solid var(--ref-color-electric-blue-100);
-        outline-offset: 1px;
-    }
-}
-
-.ap-tag-button:hover {
-    background: var(--comp-close-button-hover-background);
-}
-
-.ap-tag-button:active {
-    background: var(--comp-close-button-active-background);
-    outline: none;
-}
-
-.ap-tag-button-icon {
-    width: 12px;
-    height: 12px;
-}
-
-/* Blue variant */
-.ap-tag.blue {
-    background-color: var(--comp-tag-blue-background-color);
-    border-color: var(--comp-tag-blue-border-color);
-    color: var(--comp-tag-blue-text-color);
-}
-
-.ap-tag.blue .ap-tag-button {
-    color: var(--comp-tag-blue-icon-color);
-}
-
-/* Grey variant */
-.ap-tag.grey {
-    background-color: var(--comp-tag-grey-background-color);
-    border-color: var(--comp-tag-grey-border-color);
-    color: var(--comp-tag-grey-text-color);
-}
-
-.ap-tag.grey .ap-tag-button {
-    color: var(--comp-tag-grey-icon-color);
-}
-
-/* Tag Orange variant */
-.ap-tag.tagOrange {
-    background-color: var(--comp-tag-tag-orange-background-color);
-    border-color: var(--comp-tag-tag-orange-border-color);
-    color: var(--comp-tag-tag-orange-text-color);
-}
-
-.ap-tag.tagOrange .ap-tag-button {
-    color: var(--comp-tag-tag-orange-icon-color);
-}
-
-/* Menthol variant */
-.ap-tag.menthol {
-    background-color: var(--comp-tag-menthol-background-color);
-    border-color: var(--comp-tag-menthol-border-color);
-    color: var(--comp-tag-menthol-text-color);
-}
-
-.ap-tag.menthol .ap-tag-button {
-    color: var(--comp-tag-menthol-icon-color);
-}
-
-/* Green variant */
-.ap-tag.green {
-    background-color: var(--comp-tag-green-background-color);
-    border-color: var(--comp-tag-green-border-color);
-    color: var(--comp-tag-green-text-color);
-}
-
-.ap-tag.green .ap-tag-button {
-    color: var(--comp-tag-green-icon-color);
-}
-
-/* Red variant */
-.ap-tag.red {
-    background-color: var(--comp-tag-red-background-color);
-    border-color: var(--comp-tag-red-border-color);
-    color: var(--comp-tag-red-text-color);
-}
-
-.ap-tag.red .ap-tag-button {
-    color: var(--comp-tag-red-icon-color);
-}
-
-/* Tag list container */
-.ap-tag-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ref-spacing-xxs);
-}

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

@@ -1,158 +0,0 @@
-/* Agorapulse Textarea Styles */
-
-/* Textarea container */
-.ap-textarea-field {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ref-spacing-xxs);
-}
-
-/* Textarea label */
-.ap-textarea-label {
-    display: flex;
-    flex-direction: column;
-    gap: var(--comp-forms-label-spacing-vertical);
-    font-size: var(--comp-forms-label-size);
-    font-weight: var(--comp-forms-label-font-weight);
-    line-height: var(--comp-forms-label-line-height);
-    font-family: var(--comp-forms-label-font-family);
-    color: var(--comp-forms-label-text-color);
-}
-
-/* Label description */
-.ap-textarea-description {
-    font-size: var(--comp-forms-label-description-text-size);
-    font-weight: var(--comp-forms-label-description-text-font-weight);
-    line-height: var(--comp-forms-label-description-text-line-height);
-    font-family: var(--comp-forms-label-description-text-font-family);
-    color: var(--comp-forms-label-description-text-color);
-}
-
-/* Textarea element */
-.ap-textarea {
-    resize: none;
-    width: 100%;
-    min-width: 256px;
-    border: 1px solid var(--comp-input-border-default-color);
-    background-color: var(--ref-color-white);
-    padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
-    border-radius: var(--ref-border-radius-sm);
-    font-family: var(--comp-input-text-font-family);
-    font-size: var(--comp-input-text-size);
-    font-weight: var(--comp-input-text-font-weight);
-    color: var(--comp-input-text-default-color);
-    box-sizing: border-box;
-    outline: none;
-}
-
-/* Placeholder */
-.ap-textarea::placeholder {
-    color: var(--comp-input-text-placeholder-color);
-}
-
-/* Hover state */
-.ap-textarea:hover:not(:focus):not(:disabled):not(.invalid):not(.valid) {
-    border-color: var(--comp-input-border-hover-color);
-}
-
-/* Focus state */
-.ap-textarea:focus:not(:disabled) {
-    border-color: var(--comp-input-border-focused-color);
-}
-
-/* Focus visible for accessibility */
-.ap-textarea:focus-visible {
-    outline: 2px solid var(--ref-color-electric-blue-100);
-    outline-offset: 1px;
-}
-
-/* Disabled state */
-.ap-textarea:disabled {
-    background-color: var(--comp-input-fill-disabled-color);
-    color: var(--comp-input-text-disabled-color);
-    cursor: default;
-}
-
-/* Invalid/Error state */
-.ap-textarea.invalid,
-.ap-textarea-field.invalid .ap-textarea {
-    border-color: var(--comp-input-border-error-color);
-}
-
-/* Valid/Success state */
-.ap-textarea.valid,
-.ap-textarea-field.valid .ap-textarea {
-    border-color: var(--comp-input-border-success-color);
-}
-
-/* Resizable variant */
-.ap-textarea.resizable {
-    resize: vertical;
-}
-
-/* Horizontal resize */
-.ap-textarea.resizable-horizontal {
-    resize: horizontal;
-}
-
-/* Both directions resize */
-.ap-textarea.resizable-both {
-    resize: both;
-}
-
-/* Auto-resize variant (works with JS) */
-.ap-textarea.autoresize {
-    overflow: hidden;
-}
-
-/* Textarea message (error/success) */
-.ap-textarea-message {
-    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);
-    font-family: var(--sys-text-style-body-font-family);
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: var(--ref-spacing-xxxs);
-}
-
-.ap-textarea-message.error {
-    color: var(--comp-forms-status-text-error-color);
-}
-
-.ap-textarea-message.success {
-    color: var(--comp-forms-status-text-success-color);
-}
-
-/* Message icons */
-.ap-textarea-message-icon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-}
-
-.ap-textarea-message.error .ap-textarea-message-icon {
-    color: var(--comp-forms-status-icon-error-color);
-}
-
-.ap-textarea-message.success .ap-textarea-message-icon {
-    color: var(--comp-forms-status-icon-success-color);
-}
-
-/* Character count */
-.ap-textarea-counter {
-    font-size: var(--sys-text-style-caption-size);
-    font-weight: var(--sys-text-style-caption-weight);
-    line-height: var(--sys-text-style-caption-line-height);
-    color: var(--ref-color-grey-80);
-    text-align: right;
-}
-
-.ap-textarea-counter.warning {
-    color: var(--ref-color-orange-100);
-}
-
-.ap-textarea-counter.error {
-    color: var(--ref-color-red-100);
-}

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

@@ -1,161 +0,0 @@
-/* Agorapulse Toggle Styles */
-
-.ap-toggle-container {
-    display: flex;
-    align-items: center;
-    gap: var(--ref-spacing-xxs);
-    cursor: pointer;
-    font-family: var(--sys-text-style-body-font-family);
-    font-size: var(--sys-text-style-body-size);
-    line-height: var(--sys-text-style-body-line-height);
-    color: var(--ref-color-grey-100);
-}
-
-.ap-toggle-container:has(input:disabled) {
-    cursor: default;
-}
-
-/* Label positioning */
-.ap-toggle-container.label-left {
-    flex-direction: row-reverse;
-}
-
-/* Native checkbox input (visually hidden but accessible) */
-.ap-toggle-input {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-/* Focus state */
-@media (hover: hover) {
-    .ap-toggle-input:focus:not(:disabled) ~ .ap-toggle-switch {
-        outline: 2px solid var(--ref-color-electric-blue-100);
-        outline-offset: 1px;
-    }
-}
-
-/* Toggle switch visual */
-.ap-toggle-switch {
-    box-sizing: content-box;
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 2px;
-    width: 28px;
-    height: 12px;
-    border-radius: 16px;
-    background: var(--ref-color-grey-60);
-    transition: background-color 0.25s;
-    flex-shrink: 0;
-}
-
-/* Hover state for unchecked */
-.ap-toggle-container:hover:not(:has(input:disabled)) .ap-toggle-switch {
-    background: var(--ref-color-grey-80);
-}
-
-/* Checked state */
-.ap-toggle-input:checked ~ .ap-toggle-switch {
-    background: var(--ref-color-electric-blue-100);
-}
-
-/* Hover state for checked */
-.ap-toggle-container:hover:not(:has(input:disabled)) .ap-toggle-input:checked ~ .ap-toggle-switch {
-    background: var(--ref-color-electric-blue-80);
-}
-
-/* Active state for checked */
-.ap-toggle-container:active:not(:has(input:disabled)) .ap-toggle-input:checked ~ .ap-toggle-switch {
-    background: var(--ref-color-electric-blue-60);
-}
-
-/* Disabled state */
-.ap-toggle-switch.disabled,
-.ap-toggle-input:disabled ~ .ap-toggle-switch {
-    background: var(--ref-color-grey-20);
-}
-
-/* Toggle knob */
-.ap-toggle-knob {
-    width: 12px;
-    height: 12px;
-    background: var(--ref-color-white);
-    border-radius: 100%;
-    position: absolute;
-    transition: left 0.25s ease-in-out;
-    left: 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Knob position when checked */
-.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-knob {
-    left: 18px;
-}
-
-/* Toggle icon */
-.ap-toggle-icon {
-    width: 10px;
-    height: 10px;
-    min-width: 10px;
-    max-width: 10px;
-    max-height: 10px;
-    position: absolute;
-    color: var(--ref-color-grey-80);
-}
-
-/* Hide check icon by default, show close icon */
-.ap-toggle-icon-check {
-    display: none;
-}
-
-.ap-toggle-icon-close {
-    display: block;
-}
-
-/* When checked: hide close icon, show check icon */
-.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-icon-close {
-    display: none;
-}
-
-.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-icon-check {
-    display: block;
-}
-
-/* Icon color when checked */
-.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-icon {
-    color: var(--ref-color-electric-blue-150);
-}
-
-/* Icon color when disabled */
-.ap-toggle-switch.disabled .ap-toggle-icon,
-.ap-toggle-input:disabled ~ .ap-toggle-switch .ap-toggle-icon {
-    color: var(--ref-color-grey-40);
-}
-
-/* Label styling */
-.ap-toggle-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-toggle-label:empty {
-    display: none;
-}
-
-.ap-toggle-label.disabled {
-    color: var(--ref-color-grey-60);
-}