@agorapulse/ui-theme 20.1.17 → 20.1.19

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

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

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

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

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