@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -0,0 +1,258 @@
+// Agorapulse Button Styles
+@use 'mixins' as m;
+@use '../button-mixins' as btn;
+
+@keyframes slide {
+    0% {
+        left: calc(var(--comp-button-padding-vertical) * -1 - 50px);
+    }
+    100% {
+        left: 100%;
+    }
+}
+
+.ap-button {
+    border: none;
+    border-radius: var(--comp-button-border-radius);
+    padding: var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--comp-split-button-spacing);
+    font-size: var(--comp-button-text-size);
+    font-family: var(--comp-button-text-font-family);
+    line-height: var(--comp-button-text-line-height);
+    font-weight: var(--comp-button-text-weight);
+    max-height: var(--comp-button-height);
+    min-height: var(--comp-button-height);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:not(:disabled):not(.loading):hover {
+        cursor: pointer;
+    }
+
+    &:disabled {
+        pointer-events: none;
+    }
+
+    &.loading {
+        pointer-events: none;
+    }
+
+    &:focus:not(:disabled):not(:active):not(.loading) {
+        @include m.focus-ring;
+    }
+
+    // Primary variants
+    &.primary {
+        color: var(--ref-color-white);
+
+        &.orange {
+            @include btn.btn-primary-color('orange');
+        }
+
+        &.blue {
+            @include btn.btn-primary-color('electric-blue');
+        }
+    }
+
+    // Secondary variants
+    &.secondary {
+        &.orange {
+            @include btn.btn-secondary-color('orange');
+        }
+
+        &.blue {
+            @include btn.btn-secondary-color('electric-blue');
+        }
+    }
+
+    // Ghost variants
+    &.ghost {
+        background: transparent;
+
+        &.grey {
+            @include btn.btn-ghost-color('grey', $text-color-shade: 80, $hover-bg-shade: '05', $active-bg-shade: 10);
+        }
+
+        &.blue {
+            @include btn.btn-ghost-color('electric-blue');
+        }
+
+        &.red {
+            @include btn.btn-ghost-color('red');
+        }
+
+        &.green {
+            @include btn.btn-ghost-color('green');
+        }
+    }
+
+    // Stroked variants
+    &.stroked {
+        background: var(--ref-color-white);
+
+        &.grey {
+            border: 1px solid var(--ref-color-grey-20);
+            @include btn.btn-stroked-color('grey', $text-color-shade: 80, $border-color-shade: 20, $hover-border-shade: 40, $active-border-shade: 60, $focus-border-shade: 20);
+        }
+
+        &.blue {
+            border: 1px solid var(--ref-color-electric-blue-60);
+            @include btn.btn-stroked-color('electric-blue');
+        }
+
+        &.red {
+            border: 1px solid var(--ref-color-red-60);
+            @include btn.btn-stroked-color('red');
+        }
+    }
+
+    // Transparent variant
+    &.transparent {
+        background: transparent;
+    }
+
+    // Mermaid variant
+    &.mermaid {
+        background: linear-gradient(90deg, #578fff 0%, #df52ff 100%);
+        color: var(--ref-color-grey-100);
+        position: relative;
+        z-index: 1;
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            right: 1px;
+            bottom: 1px;
+            background: var(--ref-color-white);
+            border-radius: calc(var(--ref-border-radius-sm) - 1px);
+            z-index: -1;
+            pointer-events: none;
+        }
+
+        > *:not(.ap-loading-bar) {
+            position: relative;
+            z-index: 1;
+        }
+
+        &:hover:not(:disabled):not(.loading)::after {
+            background: var(--ref-color-mermaid-10);
+        }
+
+        &:active:not(:disabled):not(.loading)::after {
+            background: var(--ref-color-mermaid-20);
+        }
+
+        &:disabled {
+            background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from40) 0%, var(--ref-color-mermaid-gradient-to40) 100%);
+            color: var(--ref-color-grey-20);
+        }
+
+        &.loading {
+            background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from40) 0%, var(--ref-color-mermaid-gradient-to40) 100%);
+            color: var(--ref-color-grey-40);
+        }
+
+        .ap-loading-bar {
+            background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from) 0%, var(--ref-color-mermaid-gradient-to) 100%);
+            z-index: 2;
+        }
+    }
+
+    // Locked variant
+    &.locked {
+        overflow: visible;
+        background-color: var(--ref-color-purple-10);
+        color: var(--ref-color-purple-80);
+
+        &:hover:not(:disabled):not(.loading) {
+            background-color: var(--ref-color-purple-20);
+        }
+
+        &:active:not(:disabled):not(.loading) {
+            background-color: var(--ref-color-purple-40);
+        }
+    }
+
+    // Loading bar colors per variant
+    &.primary.orange .ap-loading-bar {
+        background-color: var(--ref-color-orange-100);
+    }
+
+    &.primary.blue .ap-loading-bar {
+        background-color: var(--ref-color-electric-blue-100);
+    }
+
+    &.secondary.orange .ap-loading-bar {
+        background-color: var(--ref-color-orange-100);
+    }
+
+    &.secondary.blue .ap-loading-bar {
+        background-color: var(--ref-color-electric-blue-100);
+    }
+
+    &.ghost.grey .ap-loading-bar,
+    &.stroked.grey .ap-loading-bar {
+        background-color: var(--ref-color-grey-80);
+    }
+
+    &.ghost.blue .ap-loading-bar,
+    &.stroked.blue .ap-loading-bar {
+        background-color: var(--ref-color-electric-blue-100);
+    }
+
+    &.ghost.red .ap-loading-bar,
+    &.stroked.red .ap-loading-bar {
+        background-color: var(--ref-color-red-100);
+    }
+
+    &.ghost.green .ap-loading-bar {
+        background-color: var(--ref-color-green-100);
+    }
+}
+
+// Icon sizing: explicit class or implicit > i
+.ap-button-icon {
+    @include m.fixed-size(16px);
+}
+
+.ap-button > i {
+    @include m.fixed-size(16px);
+    flex-shrink: 0;
+}
+
+// Loading bar
+.ap-loading-bar {
+    position: absolute;
+    bottom: 0;
+    left: var(--comp-button-padding-vertical);
+    width: 50px;
+    height: 5px;
+    border-radius: 8px;
+    animation: slide 1.5s ease-in-out infinite;
+}
+
+// Locked icon — lives inside .ap-button.locked or .ap-icon-button.locked, no wrapper needed
+.ap-button.locked > .ap-locked-symbol,
+.ap-icon-button.locked > .ap-locked-symbol {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1px;
+    border-radius: 100%;
+    background: var(--ref-color-white);
+    pointer-events: none;
+
+    > i {
+        color: var(--ref-color-purple-100);
+    }
+}

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

@@ -0,0 +1,17 @@
+.ap-card {
+  background-color: var(--ref-color-white);
+  border: 1px solid var(--ref-color-grey-10);
+  border-radius: var(--ref-border-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--ref-spacing-sm);
+  padding: var(--ref-spacing-sm);
+}
+
+.ap-card-title {
+  font-size: var(--ref-font-size-md);
+  font-weight: var(--ref-font-weight-bold);
+  line-height: var(--ref-font-line-height-lg);
+  color: var(--ref-color-grey-100);
+  margin: 0;
+}

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

@@ -0,0 +1,164 @@
+// Agorapulse Checkbox Styles
+@use 'mixins' as m;
+
+.ap-checkbox-container {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xxs);
+    cursor: pointer;
+
+    // Hide native checkbox input (accessible)
+    > input[type='checkbox'] {
+        @include m.sr-only;
+    }
+
+
+    &.full-width {
+        justify-content: space-between;
+        width: 100%;
+    }
+
+    // Disabled container
+    &:has(input:disabled) {
+        cursor: default;
+    }
+
+    // Checkbox box — <i> element (hosts ::before dash + ::after checkmark)
+    > i {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @include m.fixed-size(16px);
+        border-radius: var(--sys-border-radius-sm);
+        border: 1px solid var(--ref-color-grey-60);
+        background: var(--ref-color-white);
+        box-sizing: border-box;
+        flex-shrink: 0;
+        transition: background-color 0.15s, border-color 0.15s;
+
+        // Checkmark via CSS (no inline SVG needed)
+        &::after {
+            content: '';
+            display: none;
+            width: 10px;
+            height: 10px;
+            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M1 5L4 8L9 2' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background-color: var(--ref-color-white);
+        }
+
+        // Indeterminate dash via CSS
+        &::before {
+            content: '';
+            display: none;
+            width: 8px;
+            height: 1.5px;
+            background: var(--ref-color-white);
+        }
+    }
+
+    // Hover state
+    &:hover:not(:has(input:disabled)) > i {
+        border-color: var(--ref-color-grey-80);
+    }
+
+    // Active state
+    &:active:not(:has(input:disabled)) > i {
+        border-color: var(--ref-color-grey-100);
+    }
+
+    // Checked state — show checkmark
+    &:has(input:checked) > i {
+        background: var(--ref-color-electric-blue-100);
+        border-color: var(--ref-color-electric-blue-100);
+
+        &::after {
+            display: block;
+        }
+    }
+
+    // Checked hover
+    &:hover:not(:has(input:disabled)):has(input:checked) > i {
+        background: var(--ref-color-electric-blue-80);
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    // Checked active
+    &:active:not(:has(input:disabled)):has(input:checked) > i {
+        background: var(--ref-color-electric-blue-60);
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    // Disabled state
+    &:has(input:disabled) > i {
+        background: var(--ref-color-grey-10);
+        border-color: var(--ref-color-grey-20);
+        pointer-events: none;
+    }
+
+    // Disabled + checked
+    &:has(input:disabled:checked) > i {
+        background: var(--ref-color-grey-20);
+        border-color: var(--ref-color-grey-20);
+    }
+
+    // Indeterminate state (class on container)
+    &.indeterminate > i {
+        background: var(--ref-color-electric-blue-100);
+        border-color: var(--ref-color-electric-blue-100);
+
+        &::before {
+            display: block;
+        }
+    }
+
+    // Indeterminate hover
+    &.indeterminate:hover:not(:has(input:disabled)) > i {
+        background: var(--ref-color-electric-blue-80);
+        border-color: var(--ref-color-electric-blue-100);
+    }
+
+    // Indeterminate disabled
+    &.indeterminate:has(input:disabled) > i {
+        background: var(--ref-color-grey-20);
+        border-color: var(--ref-color-grey-20);
+    }
+
+    // Focus ring (keyboard only)
+    &:has(input:focus-visible) > i {
+        @include m.focus-ring-3px;
+    }
+
+    // Error state
+    &.error > i {
+        border-color: var(--ref-color-red-100);
+    }
+
+    // Label — direct span child
+    > span {
+        display: flex;
+        align-items: center;
+        font-family: var(--comp-forms-label-font-family);
+        font-size: var(--comp-forms-label-size);
+        font-weight: var(--comp-forms-label-font-weight);
+        line-height: var(--comp-forms-label-line-height);
+        color: var(--comp-forms-label-text-color);
+        user-select: none;
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    // Label: disabled
+    &:has(input:disabled) > span {
+        color: var(--ref-color-grey-60);
+        cursor: default;
+    }
+
+    // Bold modifier
+    &.bold > span {
+        font-weight: var(--ref-font-weight-bold);
+    }
+}

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

@@ -0,0 +1,76 @@
+// Agorapulse Counter Styles
+
+.ap-counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    border-radius: var(--comp-counter-border-radius);
+    padding: 0 2px;
+    box-sizing: border-box;
+
+    // Normal size (default)
+    &.normal {
+        font-weight: var(--comp-counter-text-style-font-weight);
+        font-family: var(--comp-counter-text-style-font-family);
+        line-height: var(--comp-counter-text-style-line-height);
+        font-size: var(--comp-counter-text-style-size);
+        height: var(--comp-counter-height);
+        max-height: var(--comp-counter-height);
+    }
+
+    // Big size
+    &.big {
+        font-weight: var(--comp-counter-big-text-style-font-weight);
+        font-family: var(--comp-counter-big-text-style-font-family);
+        line-height: var(--comp-counter-big-text-style-line-height);
+        font-size: var(--comp-counter-big-text-style-size);
+        height: var(--comp-counter-big-height);
+        max-height: var(--comp-counter-big-height);
+    }
+
+    // Blue color (background by default)
+    &.blue {
+        color: var(--comp-counter-blue-color);
+        background-color: var(--comp-counter-blue-with-background-background-color);
+
+        &.no-bg {
+            background-color: transparent;
+        }
+    }
+
+    // Orange color (background by default)
+    &.orange {
+        color: var(--comp-counter-orange-with-background-color);
+        background-color: var(--comp-counter-orange-with-background-background-color);
+
+        &.no-bg {
+            color: var(--comp-counter-orange-color);
+            background-color: transparent;
+        }
+    }
+
+    // Grey color (background by default)
+    &.grey {
+        color: var(--comp-counter-grey-color);
+        background-color: var(--comp-counter-grey-with-background-background-color);
+
+        &.no-bg {
+            background-color: transparent;
+        }
+    }
+
+    // Notification style
+    &.notif {
+        padding: 0 4px;
+        border-radius: var(--comp-counter-notif-border-radius);
+        font-size: var(--comp-counter-text-style-size);
+        font-weight: var(--comp-counter-text-style-font-weight);
+        font-family: var(--comp-counter-text-style-font-family);
+        line-height: var(--comp-counter-text-style-line-height);
+        min-width: var(--comp-counter-notif-min-width);
+        height: var(--comp-counter-notif-min-width);
+        color: var(--comp-counter-notif-color);
+        background-color: var(--comp-counter-notif-background-color);
+    }
+}