@agorapulse/ui-theme 20.1.19 → 20.1.21

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

@@ -0,0 +1,307 @@
+// Agorapulse Datepicker Styles
+
+.ap-datepicker {
+    background-color: var(--ref-color-white);
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--ref-border-radius-md);
+    box-shadow: none;
+    font-family: var(--ref-font-family);
+    width: fit-content;
+    overflow: hidden;
+
+    // Single calendar mode
+    &.single .ap-datepicker-calendars {
+        justify-content: center;
+    }
+
+    // Range mode
+    &.range .ap-datepicker-calendars {
+        display: flex;
+    }
+
+    // Inline variant
+    &.inline {
+        box-shadow: none;
+        border: 1px solid var(--ref-color-grey-20);
+    }
+
+    // Compact variant
+    &.compact {
+        .ap-datepicker-calendar {
+            padding: var(--ref-spacing-xs);
+        }
+
+        .ap-datepicker-header {
+            padding: var(--ref-spacing-xs) var(--ref-spacing-sm);
+        }
+    }
+}
+
+// Header with month navigation
+.ap-datepicker-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 55px;
+    padding: 0 var(--ref-spacing-md);
+}
+
+// Month navigation group (contains nav buttons + month label)
+.ap-datepicker-month-nav {
+    display: flex;
+    align-items: center;
+    flex: 1;
+
+    // Nav buttons — implicit > button
+    > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        border-radius: 50%;
+        cursor: pointer;
+        color: var(--ref-color-grey-60);
+        transition: background-color 0.15s ease;
+        padding: 0;
+        flex-shrink: 0;
+
+        &:hover {
+            background-color: var(--ref-color-grey-10);
+        }
+
+        &:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        // Nav icon — implicit > i
+        > i {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    // Month label — implicit > span
+    > span {
+        flex: 1;
+        font-size: var(--ref-font-size-xs);
+        font-weight: var(--ref-font-weight-bold);
+        color: var(--ref-color-grey-100);
+        text-transform: capitalize;
+        text-align: center;
+    }
+}
+
+// Calendar container
+.ap-datepicker-calendars {
+    display: flex;
+}
+
+// Individual calendar panel
+.ap-datepicker-calendar {
+    padding: 0 var(--ref-spacing-md) var(--ref-spacing-md);
+
+    & + & {
+        border-left: 1px solid var(--ref-color-grey-10);
+    }
+
+    // Calendar table — implicit > table
+    > table {
+        border-collapse: separate;
+        border-spacing: 0 5px;
+    }
+
+    // Weekday headers — implicit th
+    th {
+        width: 33px;
+        height: 24px;
+        font-size: var(--ref-font-size-xs);
+        font-weight: var(--ref-font-weight-bold);
+        color: var(--ref-color-grey-40);
+        text-transform: capitalize;
+        text-align: center;
+    }
+
+    // Day cells — implicit td
+    td {
+        width: 33px;
+        height: 27px;
+        padding: 0;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        position: relative;
+
+        &:hover > span {
+            background-color: var(--ref-color-electric-blue-20);
+        }
+
+        // Day inner — implicit > span
+        > span {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 27px;
+            height: 27px;
+            margin: 0 3px;
+            border-radius: 50%;
+            font-size: var(--ref-font-size-sm);
+            color: var(--ref-color-grey-100);
+            transition: background-color 0.15s ease;
+        }
+
+        // Today
+        &.today > span {
+            border: 1px solid var(--ref-color-electric-blue-100);
+            width: 25px;
+            height: 25px;
+        }
+
+        // Selected day
+        &.selected > span {
+            background-color: var(--ref-color-electric-blue-100);
+            color: var(--ref-color-white);
+        }
+
+        &.selected:hover > span {
+            background-color: var(--ref-color-electric-blue-85);
+        }
+
+        // In range (for range picker)
+        &.in-range {
+            background-color: var(--ref-color-electric-blue-10);
+
+            &:first-child,
+            &.range-start {
+                border-radius: 2em 0 0 2em;
+            }
+
+            &:last-child,
+            &.range-end {
+                border-radius: 0 2em 2em 0;
+            }
+        }
+
+        &.range-start.range-end {
+            border-radius: 2em;
+            background-color: transparent;
+        }
+
+        // Start and end of range
+        &.range-start > span,
+        &.range-end > span {
+            background-color: var(--ref-color-electric-blue-100);
+            color: var(--ref-color-white);
+        }
+
+        // Disabled/off days
+        &.off,
+        &:disabled {
+            > span {
+                color: var(--ref-color-grey-20);
+                cursor: default;
+            }
+
+            &:hover > span {
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+// Preset ranges sidebar
+.ap-datepicker-ranges {
+    border-left: 1px solid var(--ref-color-grey-10);
+    padding: var(--ref-spacing-sm);
+    min-width: 140px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--ref-spacing-xxxs);
+
+    // Range buttons — implicit > button
+    > button {
+        display: block;
+        width: 100%;
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
+        border: none;
+        background: transparent;
+        border-radius: var(--ref-border-radius-sm);
+        font-family: var(--ref-font-family);
+        font-size: var(--ref-font-size-sm);
+        color: var(--ref-color-grey-80);
+        text-align: left;
+        cursor: pointer;
+        transition: background-color 0.15s ease, color 0.15s ease;
+
+        &:hover:not(.active):not(:disabled) {
+            color: var(--ref-color-electric-blue-100);
+            background-color: var(--ref-color-electric-blue-10);
+        }
+
+        &.active {
+            color: var(--ref-color-white);
+            background-color: var(--ref-color-electric-blue-100);
+
+            &:hover {
+                background-color: var(--ref-color-electric-blue-85);
+            }
+        }
+
+        &:disabled {
+            color: var(--ref-color-grey-20);
+            cursor: default;
+        }
+    }
+}
+
+// Footer with actions
+.ap-datepicker-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--ref-spacing-sm);
+    padding: var(--ref-spacing-sm) var(--ref-spacing-md);
+    border-top: 1px solid var(--ref-color-grey-10);
+}
+
+// Time picker addon
+.ap-datepicker-time {
+    display: flex;
+    align-items: center;
+    gap: var(--ref-spacing-xs);
+    padding: var(--ref-spacing-sm) var(--ref-spacing-md);
+    border-top: 1px solid var(--ref-color-grey-10);
+
+    // Time inputs — implicit > input
+    > input {
+        width: 60px;
+        padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
+        border: 1px solid var(--ref-color-grey-20);
+        border-radius: var(--ref-border-radius-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);
+        }
+    }
+}
+
+.ap-datepicker-time-label {
+    font-size: var(--ref-font-size-sm);
+    color: var(--ref-color-grey-60);
+}
+
+.ap-datepicker-time-separator {
+    color: var(--ref-color-grey-60);
+}

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

@@ -0,0 +1,74 @@
+.ap-dialog {
+  background-color: var(--ref-color-white);
+  border-radius: var(--ref-border-radius-md);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.ap-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ref-spacing-xxxs);
+  padding: var(--ref-spacing-lg) var(--ref-spacing-lg) 0;
+  padding-right: 64px;
+}
+
+.ap-dialog-title {
+  font-size: var(--ref-font-size-xxl);
+  font-weight: var(--ref-font-weight-bold);
+  line-height: var(--ref-font-line-height-xl);
+  color: var(--ref-color-grey-100);
+  margin: 0;
+}
+
+.ap-dialog-subtitle {
+  font-size: var(--ref-font-size-md);
+  line-height: var(--ref-font-line-height-lg);
+  color: var(--ref-color-grey-80);
+}
+
+.ap-dialog-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ref-spacing-md);
+  padding: var(--ref-spacing-md) var(--ref-spacing-lg);
+}
+
+.ap-dialog-footer {
+  border-top: 1px solid var(--ref-color-grey-10);
+  display: flex;
+  align-items: center;
+  gap: var(--ref-spacing-sm);
+  padding: var(--ref-spacing-sm) var(--ref-spacing-lg);
+}
+
+.ap-dialog-footer-left {
+  display: flex;
+  align-items: center;
+  gap: var(--ref-spacing-sm);
+}
+
+.ap-dialog-footer-right {
+  display: flex;
+  align-items: center;
+  gap: var(--ref-spacing-sm);
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.ap-dialog-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  padding: 10px;
+  border-radius: var(--ref-border-radius-md);
+  cursor: pointer;
+  background: none;
+  border: none;
+  color: var(--ref-color-grey-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/assets/style/css-ui/_dot-stepper.scss

@@ -0,0 +1,68 @@
+// Agorapulse Dot Stepper Styles
+
+.ap-dot-stepper {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--comp-dot-stepper-spacing);
+    place-content: stretch center;
+    width: 100%;
+    box-sizing: border-box;
+
+    // Individual dot — implicit > button
+    > button {
+        position: relative;
+        width: var(--comp-dot-stepper-dot-size);
+        height: var(--comp-dot-stepper-dot-size);
+        border-radius: 50%;
+        border: var(--comp-dot-stepper-dot-inactive-border-width) solid var(--comp-dot-stepper-dot-inactive-border-color);
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.2s ease-in-out;
+        padding: 0;
+        box-sizing: border-box;
+
+        // Hover state
+        &:hover:not(.active):not(:disabled) {
+            border-color: var(--ref-color-electric-blue-60);
+            background: var(--comp-dot-stepper-dot-inactive-focused-background-color);
+        }
+
+        // Focus state (inactive dots only)
+        &:focus:not(:disabled):not(.active) {
+            background: var(--comp-dot-stepper-dot-inactive-hovered-background-color);
+            outline: none;
+
+            &::after {
+                content: '';
+                position: absolute;
+                width: calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));
+                height: calc(var(--comp-dot-stepper-dot-size) + var(--comp-dot-stepper-dot-inactive-border-width));
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                border-radius: 50%;
+                border: var(--comp-dot-stepper-dot-inactive-border-width) solid var(--ref-color-electric-blue-100);
+            }
+        }
+
+        // Active state
+        &.active {
+            background: var(--comp-dot-stepper-dot-active-background-color);
+            border-color: var(--ref-color-electric-blue-150);
+            cursor: default;
+        }
+
+        // Disabled state
+        &:disabled {
+            cursor: default;
+            pointer-events: none;
+            opacity: 0.5;
+        }
+
+        // Pressed state
+        &:not(.active):not(:disabled):active {
+            background: var(--comp-dot-stepper-dot-inactive-clicked-background-color);
+        }
+    }
+}

package/assets/style/{_helpers.scss → css-ui/_helpers.scss}

@@ -1,28 +1,29 @@
-@use 'variables' as vars;
+// ── Helpers ──
 
-/*
- * Helpers, mostly from https://materializecss.com/helpers.html
- */
 blockquote {
-    border-left: 5px solid vars.$color-azure;
-    margin: vars.$padding-l 0;
+    border-left: 5px solid var(--sys-color-accent-default);
+    margin: var(--ref-spacing-md) 0;
     padding-left: 1.5rem;
     font-style: italic;
 }
 
-.divider {
+.divider,
+.ap-divider {
     height: 1px;
     overflow: hidden;
-    background-color: vars.$color-silver;
+    background-color: var(--sys-color-border-color-default);
 }
 
-.left-align {
+.left-align,
+.ap-text-left {
     text-align: left;
 }
-.center-align {
+.center-align,
+.ap-text-center {
     text-align: center;
 }
-.right-align {
+.right-align,
+.ap-text-right {
     text-align: right;
 }
 
@@ -31,7 +32,8 @@ blockquote {
     display: flex;
 }
 
-.truncate {
+.truncate,
+.ap-truncate {
     display: block;
     white-space: nowrap;
     overflow: hidden;
@@ -69,7 +71,6 @@ embed {
     height: 100%;
 }
 
-/* Other (used?) */
 .square,
 .rounded,
 .round {

package/assets/style/css-ui/_icon-button.scss

@@ -0,0 +1,162 @@
+// Agorapulse Icon Button Styles
+@use 'mixins' as m;
+@use '../button-mixins' as btn;
+
+.ap-icon-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @include m.fixed-size(var(--comp-icon-button-width));
+    border-radius: var(--comp-icon-button-border-radius);
+    background: transparent;
+    border: none;
+    padding: var(--comp-icon-button-padding);
+    position: relative;
+    cursor: pointer;
+    transition: border-color 0.25s, background-color 0.25s;
+    box-sizing: border-box;
+
+    > i {
+        color: var(--ref-color-grey-60);
+        @include m.fixed-size(calc(var(--comp-icon-button-height) - (var(--comp-icon-button-padding) * 2)));
+        flex-shrink: 0;
+    }
+
+    // Default hover/active (flat, no color)
+    &:hover:not(.stroked):not(.locked):not(:disabled) {
+        background: var(--ref-color-grey-05);
+    }
+
+    &:active:not(.stroked):not(.locked):not(:disabled) {
+        background: var(--ref-color-grey-10);
+    }
+
+    &:focus:not(:disabled):not(:active) {
+        @include m.focus-ring;
+    }
+
+    &:disabled {
+        pointer-events: none;
+
+        > i {
+            color: var(--ref-color-grey-20);
+        }
+    }
+
+    // Color variants — flat
+    &.blue {
+        > i { color: var(--ref-color-electric-blue-100); }
+
+        &:hover:not(.stroked):not(.locked):not(:disabled) {
+            background: var(--ref-color-electric-blue-05);
+        }
+
+        &:active:not(.stroked):not(.locked):not(:disabled) {
+            background: var(--ref-color-electric-blue-10);
+        }
+
+        &:disabled > i { color: var(--ref-color-electric-blue-20); }
+    }
+
+    &.green {
+        > i { color: var(--ref-color-green-100); }
+
+        &:hover:not(.stroked):not(.locked):not(:disabled) {
+            background: var(--ref-color-green-10);
+        }
+
+        &:active:not(.stroked):not(.locked):not(:disabled) {
+            background: var(--ref-color-green-20);
+        }
+
+        &:disabled > i { color: var(--ref-color-green-20); }
+    }
+
+    &.red {
+        > i { color: var(--ref-color-red-100); }
+
+        &:hover:not(.stroked):not(.locked):not(:disabled) {
+            background: var(--ref-color-red-10);
+        }
+
+        &:active:not(.stroked):not(.locked):not(:disabled) {
+            background: var(--ref-color-red-20);
+        }
+
+        &:disabled > i { color: var(--ref-color-red-20); }
+    }
+
+    // Stroked variant
+    &.stroked {
+        border: 1px solid var(--ref-color-grey-20);
+        background: var(--ref-color-white);
+
+        &:hover:not(.locked):not(:disabled) {
+            border-color: var(--ref-color-grey-40);
+        }
+
+        &:active:not(.locked):not(:disabled) {
+            border-color: var(--ref-color-grey-60);
+        }
+
+        &:disabled {
+            border-color: var(--ref-color-grey-20);
+        }
+
+        // Stroked color variants
+        &.blue:not(.loading):not(.locked) {
+            border-color: var(--ref-color-electric-blue-100);
+
+            &:hover:not(:disabled) { border-color: var(--ref-color-electric-blue-60); }
+            &:active:not(:disabled) { border-color: var(--ref-color-electric-blue-100); }
+            &:disabled { border-color: var(--ref-color-electric-blue-20); }
+        }
+
+        &.green:not(.loading):not(.locked) {
+            border-color: var(--ref-color-green-100);
+
+            &:hover:not(:disabled) { border-color: var(--ref-color-green-60); }
+            &:active:not(:disabled) { border-color: var(--ref-color-green-100); }
+            &:disabled { border-color: var(--ref-color-green-20); }
+        }
+
+        &.red:not(.loading):not(.locked) {
+            border-color: var(--ref-color-red-100);
+
+            &:hover:not(:disabled) { border-color: var(--ref-color-red-60); }
+            &:active:not(:disabled) { border-color: var(--ref-color-red-100); }
+            &:disabled { border-color: var(--ref-color-red-20); }
+        }
+    }
+
+    // Stroked transparent
+    &.stroked.transparent:not(.loading):not(.locked) {
+        background: transparent;
+    }
+
+    // Loading state
+    &.loading {
+        background: var(--ref-color-grey-20);
+        border: none;
+        pointer-events: none;
+    }
+
+    // Locked state — reuses .ap-locked-symbol from _button.scss
+    &.locked {
+        background: var(--ref-color-purple-10);
+        border: 1px solid var(--ref-color-purple-20);
+        overflow: visible;
+
+        > i {
+            color: var(--ref-color-purple-100);
+        }
+
+        &:hover {
+            border-color: var(--ref-color-purple-40);
+        }
+
+        &:active {
+            border-color: var(--ref-color-purple-60);
+        }
+    }
+}