@agorapulse/ui-theme 20.1.19 → 20.1.20

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

@@ -0,0 +1,121 @@
+// Agorapulse Textarea Styles
+@use 'mixins' as m;
+
+// Textarea field container
+.ap-textarea-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-xxs);
+
+    // Label — implicit > label
+    > 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);
+
+        // Description — implicit > label > small
+        > small {
+            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 — implicit > textarea
+    > 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 {
+            color: var(--comp-input-text-placeholder-color);
+        }
+
+        &:hover:not(:focus):not(:disabled) {
+            border-color: var(--comp-input-border-hover-color);
+        }
+
+        &:focus:not(:disabled) {
+            border-color: var(--comp-input-border-focused-color);
+        }
+
+        &:focus-visible {
+            @include m.focus-ring;
+        }
+
+        &:disabled {
+            background-color: var(--comp-input-fill-disabled-color);
+            color: var(--comp-input-text-disabled-color);
+            cursor: default;
+        }
+    }
+
+    // Invalid state — on container
+    &.invalid > textarea {
+        border-color: var(--comp-input-border-error-color);
+
+        &:hover:not(:focus):not(:disabled) {
+            border-color: var(--comp-input-border-error-color);
+        }
+    }
+
+    // Valid state — on container
+    &.valid > textarea {
+        border-color: var(--comp-input-border-success-color);
+
+        &:hover:not(:focus):not(:disabled) {
+            border-color: var(--comp-input-border-success-color);
+        }
+    }
+
+    // Resize variants — on container
+    &.resizable > textarea {
+        resize: vertical;
+    }
+
+    &.resizable-horizontal > textarea {
+        resize: horizontal;
+    }
+
+    &.resizable-both > textarea {
+        resize: both;
+    }
+
+    &.autoresize > textarea {
+        overflow: hidden;
+    }
+}
+
+// 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;
+
+    &.warning {
+        color: var(--ref-color-orange-100);
+    }
+
+    &.error {
+        color: var(--ref-color-red-100);
+    }
+}

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

@@ -0,0 +1,136 @@
+// Agorapulse Toggle Styles
+@use 'mixins' as m;
+
+.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);
+
+    &:has(input:disabled) {
+        cursor: default;
+    }
+
+    // Label positioning
+    &.label-left {
+        flex-direction: row-reverse;
+    }
+
+    // Native checkbox input (visually hidden but accessible)
+    > input {
+        @include m.sr-only;
+    }
+
+    // Toggle track — <i> element
+    > i {
+        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;
+
+        // Knob circle
+        &::before {
+            content: '';
+            width: 12px;
+            height: 12px;
+            background: var(--ref-color-white);
+            border-radius: 100%;
+            position: absolute;
+            left: 2px;
+            transition: left 0.25s ease-in-out;
+        }
+
+        // Icon (X by default, check when checked)
+        &::after {
+            content: '';
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            left: 3px;
+            transition: left 0.25s ease-in-out;
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.394 12.525a.8.8 0 1 0 1.131-1.13L9.131 8l3.394-3.394a.8.8 0 0 0-1.13-1.131L8 6.869 4.606 3.474a.8.8 0 1 0-1.131 1.132L6.869 8l-3.395 3.394a.8.8 0 1 0 1.132 1.132L8 9.13l3.394 3.394Z'/%3E%3C/svg%3E");
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: var(--ref-color-grey-80);
+        }
+    }
+
+    // Hover state (unchecked)
+    &:hover:not(:has(input:disabled)) > i {
+        background: var(--ref-color-grey-80);
+    }
+
+    // Hover state (checked)
+    &:hover:not(:has(input:disabled)):has(input:checked) > i {
+        background: var(--ref-color-electric-blue-80);
+    }
+
+    // Active state (checked)
+    &:active:not(:has(input:disabled)):has(input:checked) > i {
+        background: var(--ref-color-electric-blue-60);
+    }
+
+    // Focus ring (keyboard only)
+    &:has(input:focus-visible) > i {
+        @include m.focus-ring;
+    }
+
+    // Checked state
+    &:has(input:checked) > i {
+        background: var(--ref-color-electric-blue-100);
+
+        &::before {
+            left: 18px;
+        }
+
+        &::after {
+            left: 19px;
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.238 3.337a.92.92 0 0 1 .025 1.301l-7.7 8a.92.92 0 0 1-1.326 0l-3.5-3.636a.92.92 0 1 1 1.326-1.276L5.9 10.674l7.037-7.312a.92.92 0 0 1 1.301-.025Z'/%3E%3C/svg%3E");
+            background-color: var(--ref-color-electric-blue-150);
+        }
+    }
+
+    // Disabled state
+    &:has(input:disabled) > i {
+        background: var(--ref-color-grey-20);
+
+        &::after {
+            background-color: var(--ref-color-grey-40);
+        }
+    }
+
+    // Disabled + checked
+    &:has(input:disabled:checked) > i::after {
+        background-color: var(--ref-color-grey-40);
+    }
+
+    // Label — implicit > span
+    > span {
+        display: flex;
+        align-items: center;
+        @include m.text-style('body');
+        color: var(--ref-color-grey-100);
+        user-select: none;
+        cursor: pointer;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    &:has(input:disabled) > span {
+        color: var(--ref-color-grey-60);
+        cursor: default;
+    }
+}

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

@@ -0,0 +1,122 @@
+// Agorapulse Tooltip Styles
+
+@keyframes ap-tooltip-fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+.ap-tooltip {
+    --ap-arrow-width: 16px;
+    --ap-arrow-height: 8px;
+    --ap-arrow-offset: 10px;
+
+    width: fit-content;
+    max-width: 350px;
+    background: var(--comp-tooltip-text-color-main-default-bg);
+    border-radius: var(--ref-border-radius-md);
+    position: absolute;
+    z-index: 9999999;
+    animation: ap-tooltip-fade-in var(--ref-animation-short, 0.15s) ease-in-out;
+
+    // Text styles — gated to CSS-UI position classes to avoid leaking into Angular tooltip
+    &.top, &.top-left, &.top-right,
+    &.bottom, &.bottom-left, &.bottom-right,
+    &.left, &.right {
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
+        color: var(--comp-tooltip-text-default-color);
+        font-family: var(--comp-tooltip-text-style-font-family);
+        font-size: var(--comp-tooltip-text-style-size);
+        font-weight: var(--comp-tooltip-text-style-weight);
+        line-height: var(--comp-tooltip-text-style-line-height);
+    }
+
+    // Arrow via CSS (no inline SVG needed)
+    // Base arrow styles on ::after — content is only set when a position class is present
+    // to avoid conflicts with the Angular tooltip which also uses .ap-tooltip
+    &::after {
+        display: block;
+        position: absolute;
+        z-index: 10000;
+        width: var(--ap-arrow-width);
+        height: var(--ap-arrow-height);
+        background-color: var(--ref-color-grey-100);
+        clip-path: polygon(0 0, 50% 100%, 100% 0);
+    }
+
+    // Only render the arrow when a CSS-UI position class is applied
+    &.top::after,
+    &.top-left::after,
+    &.top-right::after,
+    &.bottom::after,
+    &.bottom-left::after,
+    &.bottom-right::after,
+    &.left::after,
+    &.right::after {
+        content: '';
+    }
+
+    // Arrow positioning - Top
+    &.top::after,
+    &.top-left::after,
+    &.top-right::after {
+        bottom: 0;
+        transform: translateY(100%);
+    }
+
+    &.top::after {
+        left: 50%;
+        transform: translateX(-50%) translateY(100%);
+    }
+
+    &.top-left::after {
+        left: var(--ap-arrow-offset);
+    }
+
+    &.top-right::after {
+        right: var(--ap-arrow-offset);
+    }
+
+    // Arrow positioning - Bottom
+    &.bottom::after,
+    &.bottom-left::after,
+    &.bottom-right::after {
+        top: 0;
+        transform: rotate(180deg) translateY(100%);
+    }
+
+    &.bottom::after {
+        left: 50%;
+        transform: translateX(-50%) rotate(180deg) translateY(100%);
+    }
+
+    &.bottom-left::after {
+        left: var(--ap-arrow-offset);
+    }
+
+    &.bottom-right::after {
+        right: var(--ap-arrow-offset);
+    }
+
+    // Arrow positioning - Left (arrow points right, toward the trigger)
+    &.left::after {
+        right: 0;
+        top: 50%;
+        transform: translateX(calc(100% - var(--ap-arrow-height) / 2)) translateY(-50%) rotate(-90deg);
+    }
+
+    // Arrow positioning - Right (arrow points left, toward the trigger)
+    &.right::after {
+        left: 0;
+        top: 50%;
+        transform: translateX(calc(-100% + var(--ap-arrow-height) / 2)) translateY(-50%) rotate(90deg);
+    }
+
+    // Custom template tooltip (white background, rich content)
+    &.custom {
+        background-color: var(--ref-color-white);
+        color: var(--ref-color-grey-100);
+        filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.08));
+
+        &::after { background-color: var(--ref-color-white); }
+    }
+}

package/assets/style/{_mat-typography.scss → css-ui/_typography.scss}

@@ -1,7 +1,7 @@
-@use '@angular/material' as mat;
-@use 'variables' as vars;
+@use 'mixins';
+
+// ── Tag-based rules (global styling) ──
 
-// Override base header tags (so that we don't have to add Material classes, e.g: class="mat-h1")
 h1,
 h2,
 h3,
@@ -30,30 +30,43 @@ h4 {
     font-weight: var(--sys-text-style-h4-weight);
 }
 p {
-    margin: 0 0 vars.$padding-ml;
+    margin: 0 0 var(--ref-spacing-xs);
 }
-.h0 {
-    font-size: var(--sys-text-style-h0-size);
-    line-height: var(--sys-text-style-h0-line-height);
-    font-weight: var(--sys-text-style-h0-weight);
+
+// ── Typography classes — legacy + .ap-* aliases ──
+
+.h0,
+.ap-h0 {
+    @include mixins.text-style(h0);
 }
+
 .ap-subtitle {
-    font-size: var(--sys-text-style-subtitle-size);
-    line-height: var(--sys-text-style-subtitle-line-height);
-    font-weight: var(--sys-text-style-subtitle-weight);
-}
-p.large,
-span.large {
-    font-size: 16px;
-    line-height: 20px;
+    @include mixins.text-style(subtitle);
 }
+
+.ap-h1 { @include mixins.text-style(h1); }
+.ap-h2 { @include mixins.text-style(h2); }
+.ap-h3 { @include mixins.text-style(h3); }
+.ap-h4 { @include mixins.text-style(h4); }
+.ap-body { @include mixins.text-style(body); }
+.ap-body-bold { @include mixins.text-style(body-bold); }
+
 p.caption,
 span.caption,
-.ap-caption .mat-caption,
+.ap-caption,
 .mat-caption {
     font-size: var(--sys-text-style-caption-size);
     line-height: var(--sys-text-style-caption-line-height);
 }
+
+.ap-caption-bold { @include mixins.text-style(caption-bold); }
+.ap-marketing { @include mixins.text-style(marketing); }
+
+p.large,
+span.large {
+    font-size: 16px;
+    line-height: 20px;
+}
 p.small,
 span.small,
 small {
@@ -61,17 +74,12 @@ small {
     line-height: 14px;
 }
 
-.bold {
+.bold,
+.ap-bold {
     font-weight: var(--sys-text-style-body-bold-weight);
 }
 
-.italic {
+.italic,
+.ap-italic {
     font-style: italic;
 }
-
-// Override default text state
-body {
-    .mat-drawer-container {
-        color: vars.$font-color;
-    }
-}