@agorapulse/ui-theme 20.1.18 → 20.1.20

package/assets/style/css-ui/_infobox.scss

@@ -0,0 +1,154 @@
+// Agorapulse Infobox Styles
+@use 'mixins' as m;
+
+.ap-infobox {
+    container: infobox / inline-size;
+    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(--ref-spacing-xs);
+
+    // Left banner via pseudo-element (no HTML needed)
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: var(--comp-infobox-border-width, 4px);
+        height: 100%;
+    }
+
+    // Icon — direct <i> child, size defaulted to sm (no wrapper, no size class needed)
+    > i {
+        font-size: var(--sys-icon-css-sm);
+        flex-shrink: 0;
+        margin-top: 1px;
+    }
+
+    // With title — center icon vertically with the title+message block
+    &.has-title {
+        align-items: center;
+
+        > i {
+            margin-top: 0;
+        }
+    }
+
+    // Variants
+    &.info {
+        background-color: var(--comp-infobox-info-background-color);
+        > i { color: var(--comp-infobox-info-icon-color); }
+        &::before { background-color: var(--comp-infobox-info-border-left-color); }
+    }
+
+    &.warning {
+        background-color: var(--comp-infobox-warning-background-color);
+        > i { color: var(--comp-infobox-warning-icon-color); }
+        &::before { background-color: var(--comp-infobox-warning-border-left-color); }
+    }
+
+    &.error {
+        background-color: var(--comp-infobox-error-background-color);
+        > i { color: var(--comp-infobox-error-icon-color); }
+        &::before { background-color: var(--comp-infobox-error-border-left-color); }
+    }
+
+    &.success {
+        background-color: var(--comp-infobox-success-background-color);
+        > i { color: var(--comp-infobox-success-icon-color); }
+        &::before { background-color: var(--comp-infobox-success-border-left-color); }
+    }
+}
+
+// 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;
+
+    > .ap-button {
+        width: unset;
+    }
+}
+
+// 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);
+}
+
+// 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);
+}
+
+// Close button
+.ap-infobox-close {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @include m.fixed-size(var(--comp-close-button-size));
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    padding: var(--comp-close-button-padding);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background 0.25s;
+
+    @media (hover: hover) {
+        &:focus:not(:active) {
+            @include m.focus-ring;
+        }
+    }
+
+    &:hover {
+        background: var(--comp-close-button-hover-background);
+    }
+
+    &:active {
+        background: var(--comp-close-button-active-background);
+    }
+
+    // Close icon (implicit > i)
+    > i {
+        color: var(--ref-color-grey-80);
+    }
+}
+
+// Wide layout via container query
+// Threshold adjusted from 588px to 560px to compensate for infobox padding (28px)
+// so the breakpoint triggers at the same visual width as the Angular component.
+@container infobox (min-width: 560px) {
+    .ap-infobox-content {
+        flex-direction: row;
+        align-items: center;
+    }
+}

package/assets/style/css-ui/_input.scss

@@ -0,0 +1,133 @@
+// Agorapulse Input Styles
+@use 'mixins' as m;
+@use 'ui-symbol/icons/build/ap-icons-data' as icons;
+
+// Form field container
+.ap-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-xxs);
+
+    // Label — implicit > label
+    > label {
+        @include m.text-style('body');
+        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-xs);
+
+    // Disabled input
+    &:has(input:disabled) {
+        background-color: var(--comp-input-fill-disabled-color);
+        color: var(--comp-input-text-disabled-color);
+    }
+
+    // Hover state
+    &:hover:not(:has(input:disabled)) {
+        border-color: var(--comp-input-border-hover-color);
+    }
+
+    // Focus state
+    &:focus-within:not(:has(input:disabled)) {
+        border-color: var(--comp-input-border-focused-color);
+    }
+
+    // Invalid state
+    &.invalid,
+    &:has(input.invalid) {
+        border-color: var(--comp-input-border-error-color);
+    }
+
+    // Valid state
+    &.valid,
+    &:has(input.valid) {
+        border-color: var(--comp-input-border-success-color);
+    }
+
+    // Icon on right
+    &.inverse {
+        flex-direction: row-reverse;
+    }
+
+    // Input — implicit > input
+    > input {
+        flex: 1;
+        border: none;
+        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;
+
+        &::placeholder {
+            color: var(--comp-input-text-placeholder-color);
+        }
+
+        &:disabled {
+            color: var(--comp-input-text-disabled-color);
+        }
+    }
+
+    // Icon — implicit > i
+    > i {
+        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-size: var(--comp-forms-status-text-size);
+    font-weight: var(--comp-forms-status-text-font-weight);
+    line-height: var(--comp-forms-status-text-line-height);
+    font-family: var(--comp-forms-status-text-font-family);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxxs);
+
+    // Icon injected via ::before (no <i> needed in HTML)
+    &::before {
+        @include icons.icon-base;
+        width: var(--comp-forms-status-icon-size);
+        height: var(--comp-forms-status-icon-size);
+        flex-shrink: 0;
+    }
+
+    &.error {
+        color: var(--comp-forms-status-text-error-color);
+
+        &::before {
+            @include icons.icon('error_fill');
+            color: var(--comp-forms-status-icon-error-color);
+        }
+    }
+
+    &.success {
+        color: var(--comp-forms-status-text-success-color);
+
+        &::before {
+            @include icons.icon('rounded-check_fill');
+            color: var(--comp-forms-status-icon-success-color);
+        }
+    }
+}

package/assets/style/css-ui/_label.scss

@@ -0,0 +1,89 @@
+// Agorapulse Label Styles
+@use 'mixins' as m;
+
+.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;
+
+    // Text styles on container (span optional)
+    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;
+    text-decoration: none;
+
+    // Auto-detect close button — tighter padding + gap
+    &:has(> button) {
+        gap: var(--comp-label-closable-spacing);
+        padding: 0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs);
+    }
+
+    // Text truncation — use > span when combined with a close button
+    > span {
+        @include m.truncate;
+        max-width: 180px;
+    }
+
+    // Icon slot — implicit > i
+    > i {
+        width: 12px;
+        height: 12px;
+    }
+
+    // Close button with <i class="ap-icon-close"> inside
+    > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        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;
+
+        &:hover {
+            background: var(--ref-color-electric-blue-40);
+        }
+
+        &:active {
+            background: var(--ref-color-electric-blue-60);
+        }
+
+        > i {
+            width: 12px;
+            height: 12px;
+        }
+    }
+
+    // button.ap-label — focus ring for clickable labels
+    &:is(button) {
+        cursor: pointer;
+
+        @media (hover: hover) {
+            &:focus:not(:disabled):not(:active) {
+                @include m.focus-ring;
+            }
+        }
+    }
+}
+
+// Label list container
+.ap-label-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ref-spacing-xxs);
+}

package/assets/style/css-ui/_link.scss

@@ -0,0 +1,91 @@
+// Agorapulse Link Styles
+@use 'mixins' as m;
+
+// 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
+    &.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);
+    }
+
+    &.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)
+    &.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);
+
+        &.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);
+        }
+    }
+
+    // States
+    &:hover {
+        color: var(--comp-link-hover-color);
+    }
+
+    &:active:not(:visited):not(.disabled) {
+        color: var(--comp-link-clicked-color);
+    }
+
+    &:visited:not(.standalone) {
+        color: var(--comp-link-visited-color);
+    }
+
+    // Disabled state
+    &.disabled,
+    &[aria-disabled='true'] {
+        color: var(--comp-link-disabled-color);
+        pointer-events: none;
+        cursor: default;
+    }
+
+    // Icon positioning
+    &.inverse {
+        flex-direction: row-reverse;
+    }
+
+    // Focus state for accessibility
+    &:focus-visible {
+        @include m.focus-ring;
+        outline-offset: 2px;
+        border-radius: 2px;
+    }
+
+    // Icon sizing — implicit > i
+    > i {
+        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;
+    }
+}

package/assets/style/css-ui/_loader.scss

@@ -0,0 +1,178 @@
+// Agorapulse Loader Styles
+// SVG-based loader with CSS-driven geometry and animation
+// Usage: <div class="ap-loader orange size-48"><svg><circle/><circle/></svg></div>
+//
+// Zero attributes on SVG elements — all geometry, stroke, and animation in CSS.
+// Reproduces the Angular loader exactly: round caps, per-size dasharray, dual easing.
+
+.ap-loader {
+    --_track: var(--ref-color-electric-blue-10);
+    --_color: var(--ref-color-electric-blue-100);
+
+    display: inline-block;
+    position: relative;
+    line-height: 0;
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+
+    circle {
+        cx: 50%;
+        cy: 50%;
+        fill: transparent;
+        stroke-linecap: round;
+        transform: rotate(-90deg);
+        transform-origin: center;
+    }
+
+    circle:first-child {
+        stroke: var(--_track);
+    }
+
+    circle:last-child {
+        stroke: var(--_color);
+    }
+
+    // Color variants
+    &.blue {
+        --_track: var(--ref-color-electric-blue-10);
+        --_color: var(--ref-color-electric-blue-100);
+    }
+
+    &.orange {
+        --_track: var(--ref-color-orange-40);
+        --_color: var(--ref-color-orange-100);
+    }
+
+    &.white {
+        --_track: rgba(255, 255, 255, 0.4);
+        --_color: #ffffff;
+    }
+
+    &.grey {
+        --_track: var(--ref-color-grey-20);
+        --_color: var(--ref-color-grey-80);
+    }
+
+    // Size variants — r, stroke-width, dasharray from Angular source
+    &.size-16 {
+        width: 16px;
+        height: 16px;
+        circle {
+            r: 6.5px;
+            stroke-width: 3;
+            stroke-dasharray: 40;
+            stroke-dashoffset: 47;
+        }
+        circle:first-child { animation: ap-loader-16 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite; }
+        circle:last-child  { animation: ap-loader-16 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
+    }
+
+    &.size-24 {
+        width: 24px;
+        height: 24px;
+        circle {
+            r: 10px;
+            stroke-width: 4;
+            stroke-dasharray: 62;
+            stroke-dashoffset: 69;
+        }
+        circle:first-child { animation: ap-loader-24 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite; }
+        circle:last-child  { animation: ap-loader-24 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
+    }
+
+    &.size-30 {
+        width: 30px;
+        height: 30px;
+        circle {
+            r: 12.5px;
+            stroke-width: 5;
+            stroke-dasharray: 78;
+            stroke-dashoffset: 84;
+        }
+        circle:first-child { animation: ap-loader-30 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite; }
+        circle:last-child  { animation: ap-loader-30 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
+    }
+
+    &.size-48 {
+        width: 48px;
+        height: 48px;
+        circle {
+            r: 20.5px;
+            stroke-width: 7;
+            stroke-dasharray: 128;
+            stroke-dashoffset: 131;
+        }
+        circle:first-child { animation: ap-loader-48 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite; }
+        circle:last-child  { animation: ap-loader-48 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
+    }
+
+    &.size-60 {
+        width: 60px;
+        height: 60px;
+        circle {
+            r: 26px;
+            stroke-width: 8;
+            stroke-dasharray: 163;
+            stroke-dashoffset: 166;
+        }
+        circle:first-child { animation: ap-loader-60 1.5s cubic-bezier(0.42, 0, 0.78, 1) infinite; }
+        circle:last-child  { animation: ap-loader-60 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite; }
+    }
+}
+
+// Keyframes per size — exact Angular stroke-dashoffset values
+// 0%: full dashoffset (invisible) → 50%: ~55% mark (arc visible) → 100%: back to full + 630deg rotation
+
+@keyframes ap-loader-16 {
+    0%   { stroke-dashoffset: 47; }
+    50%  { stroke-dashoffset: 25; }
+    100% { stroke-dashoffset: 47; transform: rotate(630deg); }
+}
+
+@keyframes ap-loader-24 {
+    0%   { stroke-dashoffset: 69; }
+    50%  { stroke-dashoffset: 37; }
+    100% { stroke-dashoffset: 69; transform: rotate(630deg); }
+}
+
+@keyframes ap-loader-30 {
+    0%   { stroke-dashoffset: 84; }
+    50%  { stroke-dashoffset: 46; }
+    100% { stroke-dashoffset: 84; transform: rotate(630deg); }
+}
+
+@keyframes ap-loader-48 {
+    0%   { stroke-dashoffset: 131; }
+    50%  { stroke-dashoffset: 72; }
+    100% { stroke-dashoffset: 131; transform: rotate(630deg); }
+}
+
+@keyframes ap-loader-60 {
+    0%   { stroke-dashoffset: 166; }
+    50%  { stroke-dashoffset: 91; }
+    100% { stroke-dashoffset: 166; transform: rotate(630deg); }
+}
+
+// Loader container for centered display
+.ap-loader-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// Full page loader overlay
+.ap-loader-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.8);
+    z-index: 9999;
+}

package/assets/style/css-ui/_mixins.scss

@@ -0,0 +1,50 @@
+// Shared mixins for css-ui components
+
+// Focus ring standard
+@mixin focus-ring {
+    outline: 2px solid var(--ref-color-electric-blue-100);
+    outline-offset: 1px;
+}
+
+// Focus ring with 3px width (checkbox, radio)
+@mixin focus-ring-3px {
+    outline: 3px solid var(--ref-color-electric-blue-100);
+    outline-offset: 1px;
+}
+
+// Visually hidden, accessible to screen readers
+@mixin sr-only {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+}
+
+// Truncate text with ellipsis
+@mixin truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// Fixed size (width + height + min + max)
+@mixin fixed-size($size) {
+    width: $size;
+    height: $size;
+    min-width: $size;
+    min-height: $size;
+    max-width: $size;
+    max-height: $size;
+}
+
+// Text-style shorthand
+@mixin text-style($name) {
+    font-family: var(--sys-text-style-#{$name}-font-family);
+    font-size: var(--sys-text-style-#{$name}-size);
+    font-weight: var(--sys-text-style-#{$name}-weight);
+    line-height: var(--sys-text-style-#{$name}-line-height);
+}