@agorapulse/ui-theme 20.1.19 → 20.1.21

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);
+}

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

@@ -0,0 +1,177 @@
+// Agorapulse Pagination Styles
+@use 'mixins' as m;
+@use 'ui-symbol/icons/build/ap-icons-data' as icons;
+
+.ap-pagination {
+    --paginator-button-size: 36px;
+
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-lg);
+    width: 100%;
+    justify-content: space-between;
+
+    // Item count display — implicit > span
+    > span {
+        font-weight: var(--ref-font-weight-regular);
+        font-size: var(--ref-font-size-sm);
+        line-height: var(--ref-line-height-sm);
+        color: var(--ref-color-grey-60);
+        white-space: nowrap;
+    }
+}
+
+// Page numbers container (includes nav buttons + page buttons)
+.ap-pagination-pages {
+    display: flex;
+    align-items: center;
+    justify-self: center;
+    color: var(--ref-color-electric-blue-100);
+    gap: var(--ref-spacing-xxxs);
+}
+
+// Navigation buttons (prev/next)
+.ap-pagination-nav {
+    display: grid;
+    place-content: center;
+    @include m.fixed-size(var(--paginator-button-size));
+    border-radius: var(--ref-border-radius-sm);
+    background: transparent;
+    border: none;
+    color: var(--ref-color-electric-blue-100);
+    padding: 0;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+
+    &:disabled {
+        pointer-events: none;
+        color: var(--ref-color-grey-40);
+    }
+
+    &:hover:not(:disabled) {
+        background: var(--ref-color-electric-blue-10);
+    }
+
+    &:active:not(:disabled) {
+        background: var(--ref-color-electric-blue-20);
+    }
+
+    @media (hover: hover) {
+        &:focus:not(:disabled):not(:active) {
+            @include m.focus-ring;
+        }
+    }
+
+    // Nav icon — implicit > i
+    > i {
+        width: 16px;
+        height: 16px;
+    }
+
+    // Arrow icon via ::before (no <i> needed)
+    &::before {
+        @include icons.icon-base;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+// Arrow direction by position — first nav = left, last nav = right
+.ap-pagination-pages > .ap-pagination-nav:first-child::before {
+    @include icons.icon('arrow-left');
+}
+
+.ap-pagination-pages > .ap-pagination-nav:last-child::before {
+    @include icons.icon('arrow-right');
+}
+
+// Individual page button
+.ap-pagination-page {
+    @include m.fixed-size(var(--paginator-button-size));
+    border-radius: var(--ref-border-radius-sm);
+    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    box-sizing: border-box;
+    color: var(--ref-color-electric-blue-100);
+    font-family: var(--ref-font-family);
+    font-weight: var(--ref-font-weight-regular);
+    font-size: var(--ref-font-size-sm);
+    line-height: var(--ref-line-height-sm);
+    padding: 0;
+
+    &:hover:not(.active) {
+        cursor: pointer;
+        background-color: var(--ref-color-electric-blue-10);
+    }
+
+    @media (hover: hover) {
+        &:focus:not(.disabled):not(:active) {
+            @include m.focus-ring;
+        }
+    }
+
+    &:active:not(.active) {
+        background-color: var(--ref-color-electric-blue-20);
+    }
+
+    &.active {
+        background-color: var(--ref-color-electric-blue-100);
+        color: var(--ref-color-white);
+        cursor: default;
+    }
+}
+
+// Ellipsis — text injected via ::before (no inner text needed)
+.ap-pagination-ellipsis {
+    display: inline-block;
+    width: var(--paginator-button-size);
+    line-height: var(--paginator-button-size);
+    text-align: center;
+    color: var(--ref-color-grey-60);
+    font-family: var(--ref-font-family);
+    font-size: var(--ref-font-size-sm);
+
+    &::before {
+        content: '...';
+    }
+}
+
+// Go to page section
+.ap-pagination-goto {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xs);
+
+    // Label — implicit > span
+    > span {
+        font-weight: var(--ref-font-weight-standard);
+        font-size: var(--ref-font-size-sm);
+        line-height: var(--ref-line-height-sm);
+        color: var(--ref-color-grey-60);
+        white-space: nowrap;
+    }
+
+    // Input — implicit > input
+    > input {
+        box-sizing: border-box;
+        background: var(--ref-color-white);
+        width: 48px;
+        height: var(--paginator-button-size);
+        border-radius: var(--ref-border-radius-sm);
+        border: 1px solid var(--ref-color-grey-20);
+        padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
+        font-family: var(--ref-font-family);
+        font-size: var(--ref-font-size-sm);
+        text-align: center;
+
+        &:focus {
+            outline: none;
+            border-color: var(--ref-color-electric-blue-100);
+        }
+    }
+}

package/assets/style/css-ui/_radio-card.scss

@@ -0,0 +1,200 @@
+// Agorapulse Radio Button Card Styles
+@use 'mixins' as m;
+
+.ap-radio-card {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ref-spacing-xxs);
+    cursor: pointer;
+    position: relative;
+    box-sizing: border-box;
+
+    // Hide native radio input (accessible)
+    > input[type='radio'] {
+        @include m.sr-only;
+    }
+
+    // Radio indicator — ::before pseudo-element (no empty span needed)
+    &::before {
+        content: '';
+        @include m.fixed-size(16px);
+        border-radius: 100%;
+        border: 1px solid var(--ref-color-grey-60);
+        background: var(--ref-color-electric-blue-100);
+        box-shadow: inset 0 0 0 16px var(--ref-color-white);
+        transition: box-shadow var(--comp-radio-transition-duration);
+        flex-shrink: 0;
+        box-sizing: border-box;
+        margin-top: 1px;
+    }
+
+    // Indicator: checked
+    &:has(input:checked)::before {
+        border-color: var(--ref-color-electric-blue-100);
+        box-shadow: inset 0 0 0 3px var(--ref-color-white);
+    }
+
+    // Indicator: disabled
+    &:has(input:disabled)::before {
+        box-shadow: inset 0 0 0 16px var(--ref-color-grey-10);
+        border-color: var(--ref-color-grey-40);
+        opacity: 0.6;
+    }
+
+    // Indicator: disabled + checked
+    &:has(input:disabled:checked)::before {
+        background: var(--ref-color-grey-40);
+        box-shadow: inset 0 0 0 3px var(--ref-color-grey-10);
+        border-color: var(--ref-color-grey-40);
+    }
+
+    // Indicator: hover (not disabled, not locked)
+    &:hover:not(:has(input:disabled)):not(.locked)::before {
+        border-color: var(--ref-color-grey-80);
+    }
+
+    // Indicator: hover + checked
+    &:hover:not(:has(input:disabled)):not(.locked):has(input:checked)::before {
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    // Indicator: error — red fill (dot) + border, compound selectors override checked/hover
+    &.error::before,
+    &.error:has(input:checked)::before {
+        border-color: var(--ref-color-red-100);
+        background: var(--ref-color-red-100);
+    }
+
+    &.error:hover:not(:has(input:disabled))::before {
+        border-color: var(--ref-color-red-60);
+    }
+
+    // Locked — hide indicator, lock icon takes its place
+    &.locked::before {
+        display: none;
+    }
+
+    // Disabled state — cursor + content opacity (matches Angular --radio-content-opacity: 0.6)
+    &:has(input:disabled) {
+        cursor: default;
+
+        > :is(span, div) {
+            opacity: 0.6;
+        }
+    }
+
+    // Body — direct div child (structured content area)
+    > div {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ref-spacing-xxxs);
+        flex: 1;
+        min-width: 0;
+    }
+
+    // Description — span inside body div
+    > div > span {
+        font-family: var(--ref-font-family);
+        font-size: var(--ref-font-size-sm);
+        line-height: var(--ref-font-line-height-sm);
+        color: var(--ref-color-grey-80);
+    }
+
+    // Link inside body
+    > div > a {
+        display: block;
+    }
+
+    // Card mode
+    &.card {
+        padding: var(--ref-spacing-xs);
+        border: 1px solid var(--ref-color-grey-20);
+        border-radius: var(--ref-border-radius-md);
+        background: var(--ref-color-white);
+        transition: border-color 0.2s ease-in-out;
+
+        &:hover:not(:has(input:disabled)):not(.locked) {
+            border-color: var(--ref-color-grey-40);
+        }
+
+        // Checked card
+        &:has(input:checked) {
+            border-color: var(--ref-color-electric-blue-100);
+        }
+
+        // Disabled card (not locked — locked has own styles)
+        &:has(input:disabled):not(.locked) {
+            border-color: var(--ref-color-grey-20);
+        }
+
+        // Error card — compound selectors override :has(input:checked) specificity
+        &.error,
+        &.error:has(input:checked) {
+            border-color: var(--ref-color-red-100);
+        }
+
+        &.error:hover:not(:has(input:disabled)) {
+            border-color: var(--ref-color-red-60);
+        }
+
+        // Locked card
+        &.locked {
+            cursor: default;
+            background: var(--ref-color-purple-10);
+            border-color: var(--ref-color-purple-20);
+
+            &:hover {
+                border-color: var(--ref-color-purple-40);
+            }
+
+            // Lock icon replaces radio indicator
+            > i.ap-icon-feature-lock {
+                color: var(--ref-color-purple-100);
+                @include m.fixed-size(16px);
+                flex-shrink: 0;
+                margin-top: 1px;
+            }
+        }
+    }
+
+    // Focus ring when radio is focused
+    &:has(input:focus-visible) {
+        @include m.focus-ring-3px;
+    }
+}
+
+// Header row (icon + title + badge + info)
+.ap-radio-card-header {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ref-spacing-xxxs);
+
+    > i:first-child {
+        @include m.fixed-size(16px);
+        flex-shrink: 0;
+        margin-top: 1px; // center 16px icon with 18px title line-height
+    }
+}
+
+// Title text
+.ap-radio-card-title {
+    font-family: var(--ref-font-family);
+    font-size: var(--ref-font-size-sm);
+    font-weight: var(--ref-font-weight-bold);
+    line-height: var(--ref-font-line-height-sm);
+    color: var(--ref-color-grey-100);
+    flex: 1;
+    min-width: 0;
+}
+
+// Info icon (tooltip anchor in header)
+.ap-radio-card-info {
+    @include m.fixed-size(16px);
+    color: var(--ref-color-grey-60);
+    flex-shrink: 0;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--ref-color-grey-80);
+    }
+}

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

@@ -0,0 +1,107 @@
+// Agorapulse Radio Styles
+@use 'mixins' as m;
+
+.ap-radio-container {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    cursor: pointer;
+
+    // Hide native radio input (accessible)
+    > input[type='radio'] {
+        @include m.sr-only;
+    }
+
+
+    // Disabled container
+    &:has(input:disabled) {
+        cursor: default;
+    }
+
+    // Radio indicator — ::before pseudo-element (no empty span needed)
+    &::before {
+        content: '';
+        @include m.fixed-size(16px);
+        border-radius: 100%;
+        border: 1px solid var(--ref-color-grey-60);
+        background: var(--ref-color-electric-blue-100);
+        box-shadow: inset 0 0 0 16px var(--ref-color-white);
+        transition: box-shadow var(--comp-radio-transition-duration);
+        flex-shrink: 0;
+        box-sizing: border-box;
+    }
+
+    // Indicator: checked
+    &:has(input:checked)::before {
+        border-color: var(--ref-color-electric-blue-100);
+        box-shadow: inset 0 0 0 3px var(--ref-color-white);
+    }
+
+    // Indicator: disabled
+    &:has(input:disabled)::before {
+        box-shadow: inset 0 0 0 16px var(--ref-color-grey-10);
+        border-color: var(--ref-color-grey-20);
+    }
+
+    // Indicator: disabled + checked
+    &:has(input:disabled:checked)::before {
+        background: var(--ref-color-grey-40);
+        box-shadow: inset 0 0 0 3px var(--ref-color-grey-10);
+        border-color: var(--ref-color-grey-20);
+    }
+
+    // Indicator: hover (not disabled)
+    &:hover:not(:has(input:disabled))::before {
+        border-color: var(--ref-color-grey-80);
+    }
+
+    // Indicator: hover + checked (keep blue)
+    &:hover:not(:has(input:disabled)):has(input:checked)::before {
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    // Focus ring on indicator (keyboard only)
+    &:has(input:focus-visible)::before {
+        outline: 3px solid var(--ref-color-electric-blue-100);
+        outline-offset: 1px;
+        border-color: var(--ref-color-grey-80);
+    }
+
+    // Focus + checked
+    &:has(input:focus-visible:checked)::before {
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    // Error state — compound selectors to override :has(input:checked) specificity
+    &.error::before,
+    &.error:has(input:checked)::before {
+        border-color: var(--ref-color-red-100);
+    }
+
+    &.error:hover:not(:has(input:disabled))::before {
+        border-color: var(--ref-color-red-60);
+    }
+
+    &.error:has(input:focus-visible)::before {
+        outline-color: var(--ref-color-red-100);
+        border-color: var(--ref-color-red-60);
+    }
+
+    // Label — direct span child
+    > span {
+        display: flex;
+        align-items: center;
+        @include m.text-style('body');
+        color: var(--ref-color-grey-100);
+        user-select: none;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    // Label: disabled
+    &:has(input:disabled) > span {
+        color: var(--ref-color-grey-60);
+    }
+}