@agorapulse/ui-theme 0.0.1

package/assets/lib-ui-theme/style/components-custom-style/_mat-menu.scss

@@ -0,0 +1,181 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.mat-menu-panel:not(.pop-menu) {
+    box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
+    min-width: unset !important;
+    border-radius: 4px;
+    background-color: $color-white;
+
+    .mat-menu-item {
+        color: map_get($colors-grey, 100);
+        height: unset;
+        line-height: $font-line-height;
+        padding: $padding-s $padding-m;
+        display: flex;
+        font-size: $font-size;
+        background: none;
+
+        &::after {
+            color: map_get($colors-grey, 100);
+        }
+
+        &:hover:not([disabled]), &.mat-menu-item-highlighted:not([disabled]) {
+            background-color: map_get($colors-electric-blue, 10);
+            color: map_get($colors-electric-blue, 100);
+            &::after {
+                color: map_get($colors-electric-blue, 100);
+            }
+            ap-symbol .svg {
+                fill:  map_get($colors-electric-blue, 100) !important;
+            }
+        }
+
+        ap-symbol {
+            padding-right: $padding-s;
+            color: map_get($colors-grey, 60);
+        }
+    }
+}
+
+.mat-menu-panel.pop-menu {
+    max-width: unset;
+    background-color: white;
+    padding: 0px;
+    border: none!important;
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.05);
+
+    &.shadow {
+        filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25))
+    }
+
+    &.shadow-no-border {
+        box-shadow: 0px 7px 50px rgba(0, 0, 0, 0.08);
+    }
+
+    &.arrow-left{
+        background: transparent;
+        .mat-menu-content {
+            margin-left: 8px;
+        }
+    }
+    &.arrow-top{
+        background: transparent;
+        .mat-menu-content {
+            margin-top: 8px;
+        }
+    }
+    &.arrow-right{
+        background: transparent;
+        .mat-menu-content {
+            margin-right: 8px;
+        }
+    }
+    &.arrow-bottom{
+        background: transparent;
+        .mat-menu-content {
+            margin-bottom: 8px;
+        }
+    }
+    .mat-menu-content {
+        background-color: white;
+        padding: 0px;
+        position: relative;
+
+        .arrow-before {
+            background-color: $color-pale-grey;
+            /*border: 5px solid black;
+            border-color: transparent transparent $color-white $color-white;*/
+            //box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.05);
+            content: '';
+            display: block;
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            transform: rotate(135deg);
+            z-index: 99999;
+            &.arrow-left{
+                bottom: 12px;
+                left: -4px;
+                -webkit-transform: rotate(45deg);
+                transform: rotate(45deg);
+            }
+            &.arrow-right{
+                bottom: 12px;
+                right: -4px;
+                -webkit-transform: rotate(45deg);
+                transform: rotate(45deg);
+            }
+            &.arrow-top{
+                top: -4px;
+                left: 50%;
+                -webkit-transform: rotate(45deg);
+                transform: rotate(45deg);
+                //box-shadow: -3px 0px 0px 0px rgba(0, 0, 0, 0.05);
+            }
+            &.arrow-bottom{
+                bottom: -4px;
+                left: 50%;
+                -webkit-transform: rotate(45deg);
+                transform: rotate(45deg);
+                //box-shadow: -3px 0px 0px 0px rgba(0, 0, 0, 0.05);
+            }
+        }
+        .arrow-before::after {
+            display: block;
+            position: absolute;
+            width: inherit;
+            height: inherit;
+            background-color: $color-white;
+            content: ' ';
+        }
+
+        .arrow-before.arrow-top::after {
+            top: 1px;
+            right: -1px;
+        }
+
+        .arrow-before.arrow-left::after {
+            right: -1px;
+            top: -1px;
+        }
+
+        .arrow-before.arrow-right::after {
+            right: 1px;
+            top: 1px;
+        }
+        .arrow-before.arrow-bottom::after {
+            top: -1px;
+            right: 1px;
+        }
+    }
+
+    .mat-menu-item {
+        line-height: unset;
+    }
+
+    &.no-background {
+        background-color: transparent;
+        .mat-menu-content {
+            background-color: transparent;
+        }
+    }
+}
+
+.mat-menu-panel.button-dropdown {
+    margin-bottom: $padding-sm;
+    .mat-menu-item {
+        font-weight: $font-weight-bold;
+        display: flex;
+        flex-direction: column;
+        .caption {
+            font-weight: normal;
+            color: map_get($colors-grey, 60);
+            margin-top: 0px;
+        }
+        &:hover {
+            .caption {
+                color: map_get($colors-electric-blue, 85);
+            }
+        }
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_mat-radio-button.scss

@@ -0,0 +1,86 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+@mixin radio-button-state-style($color) {
+    .mat-radio-button:not(.mat-radio-disabled) {
+        .mat-radio-outer-circle {
+            border-color: $color;
+        }
+        &.mat-radio-checked {
+            .mat-radio-inner-circle {
+                background-color: $color;
+            }
+        }
+    }
+}
+
+.mat-radio-button {
+    margin-right: $padding-m;
+    .mat-radio-container {
+        height: 16px;
+        width: 16px;
+        .mat-radio-inner-circle {
+            border-color: $form-control-default-border-color;
+            left: -2px;
+            top: -2px;
+        }
+        .mat-radio-outer-circle {
+            border-color: $form-control-default-border-color;
+            border-width: 1px;
+            height: 16px;
+            width: 16px;
+        }
+    }
+    .mat-radio-label-content {
+        color: $form-control-default-font-color;
+    }
+    // Checked
+    &.mat-radio-checked:not(.mat-radio-disabled) {
+        .mat-radio-container {
+            .mat-radio-outer-circle {
+                border-color: $form-control-selected-border-color;
+            }
+        }
+        .mat-radio-label-content {
+            color: $form-control-selected-font-color;
+        }
+    }
+    // Disabled
+    &.mat-radio-disabled {
+        .mat-radio-outer-circle {
+            background-color: $form-control-disabled-background-color;
+            border-color: $form-control-disabled-border-color;
+        }
+        &.mat-radio-checked {
+            .mat-radio-inner-circle {
+                background-color: $form-control-disabled-border-color;
+            }
+            .mat-radio-outer-circle {
+                border-color: $form-control-disabled-border-color;
+            }
+        }
+        .mat-radio-label-content {
+            color: $form-control-disabled-font-color;
+        }
+    }
+}
+
+.mat-radio-group {
+    // Invalid
+    &.invalid,
+    &.ng-invalid.ng-touched {
+        @include radio-button-state-style($color-error);
+    }
+    // Valid
+    &.valid {
+        @include radio-button-state-style($color-success);
+    }
+}
+
+form.submitted {
+    .mat-radio-group {
+        // Invalid
+        &.ng-invalid {
+            @include radio-button-state-style($color-error);
+        }
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_mat-slide-toggle.scss

@@ -0,0 +1,45 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.mat-slide-toggle {
+    .mat-slide-toggle-bar {
+        background-color: $form-control-default-background-color;
+        border-radius: 16px;
+        box-shadow: none;
+        height: 16px;
+        width: 32px;
+        .mat-slide-toggle-thumb-container {
+            top: 2px;
+            left: 2px;
+            .mat-slide-toggle-thumb {
+                background-color: $color-white;
+                box-shadow: none;
+                height: 12px;
+                width: 12px;
+            }
+        }
+    }
+    .mat-slide-toggle-ripple {
+        display: none;
+    }
+    &.mat-disabled {
+        opacity: 1 !important;
+        .mat-slide-toggle-bar {
+            background-color: $form-control-disabled-selected-background-color;
+        }
+        .mat-slide-toggle-content {
+            color: $form-control-disabled-font-color;
+        }
+    }
+    &.mat-checked {
+        .mat-slide-toggle-bar {
+            background-color: $form-control-selected-background-color;
+            .mat-slide-toggle-thumb-container {
+                top: 2px;
+                left: 2px;
+            }
+        }
+        .mat-slide-toggle-content {
+            color: $form-control-selected-font-color;
+        }
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_mat-snack-bar.scss

@@ -0,0 +1,40 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+snack-bar-container.mat-snack-bar-container {
+    min-width: 300px;
+    max-width: 900px;
+    border-radius: $border-radius;
+    padding: $padding-ml $padding-ml;
+    background-position: left;
+    background-position-x: $padding-ml;
+    background-repeat: no-repeat;
+    box-shadow: none;
+
+    &.error {
+        background-color: $color-error;
+        background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 20C11.9778 20 13.9112 19.4135 15.5557 18.3147C17.2002 17.2159 18.4819 15.6541 19.2388 13.8268C19.9957 11.9996 20.1937 9.98891 19.8078 8.0491C19.422 6.10929 18.4696 4.32746 17.0711 2.92894C15.6725 1.53041 13.8907 0.578004 11.9509 0.192152C10.0111 -0.1937 8.00043 0.00433289 6.17316 0.761209C4.3459 1.51809 2.78412 2.79981 1.6853 4.4443C0.58649 6.08879 0 8.02219 0 10C0.00299199 12.6512 1.05752 15.1931 2.93224 17.0678C4.80695 18.9425 7.34875 19.997 10 20ZM5.69565 7.54087C5.6148 7.46011 5.55066 7.36421 5.5069 7.25865C5.46314 7.15308 5.44062 7.03993 5.44062 6.92566C5.44062 6.81138 5.46314 6.69823 5.5069 6.59266C5.55066 6.4871 5.6148 6.3912 5.69565 6.31044L6.31043 5.69566C6.39119 5.61481 6.4871 5.55067 6.59266 5.50691C6.69822 5.46315 6.81138 5.44062 6.92565 5.44062C7.03993 5.44062 7.15308 5.46315 7.25864 5.50691C7.36421 5.55067 7.46011 5.61481 7.54087 5.69566L9.84609 8C9.86628 8.02025 9.89027 8.03631 9.91668 8.04727C9.94309 8.05823 9.9714 8.06387 10 8.06387C10.0286 8.06387 10.0569 8.05823 10.0833 8.04727C10.1097 8.03631 10.1337 8.02025 10.1539 8L12.4591 5.69566C12.5399 5.61481 12.6358 5.55067 12.7414 5.50691C12.8469 5.46315 12.9601 5.44062 13.0743 5.44062C13.1886 5.44062 13.3018 5.46315 13.4073 5.50691C13.5129 5.55067 13.6088 5.61481 13.6896 5.69566L14.3043 6.31044C14.3852 6.3912 14.4493 6.4871 14.4931 6.59266C14.5369 6.69823 14.5594 6.81138 14.5594 6.92566C14.5594 7.03993 14.5369 7.15308 14.4931 7.25865C14.4493 7.36421 14.3852 7.46011 14.3043 7.54087L12 9.84609C11.9798 9.86628 11.9637 9.89027 11.9527 9.91668C11.9418 9.94309 11.9361 9.97141 11.9361 10C11.9361 10.0286 11.9418 10.0569 11.9527 10.0833C11.9637 10.1097 11.9798 10.1337 12 10.1539L14.3061 12.4591C14.3869 12.5399 14.4511 12.6358 14.4948 12.7414C14.5386 12.8469 14.5611 12.9601 14.5611 13.0743C14.5611 13.1886 14.5386 13.3018 14.4948 13.4073C14.4511 13.5129 14.3869 13.6088 14.3061 13.6896L13.6913 14.3044C13.6105 14.3852 13.5146 14.4493 13.4091 14.4931C13.3035 14.5369 13.1904 14.5594 13.0761 14.5594C12.9618 14.5594 12.8487 14.5369 12.7431 14.4931C12.6375 14.4493 12.5416 14.3852 12.4609 14.3044L10.1539 12C10.1129 11.9595 10.0576 11.9368 10 11.9368C9.94239 11.9368 9.88709 11.9595 9.84609 12L7.54087 14.3044C7.46011 14.3852 7.36421 14.4493 7.25864 14.4931C7.15308 14.5369 7.03993 14.5594 6.92565 14.5594C6.81138 14.5594 6.69822 14.5369 6.59266 14.4931C6.4871 14.4493 6.39119 14.3852 6.31043 14.3044L5.69565 13.6896C5.6148 13.6088 5.55066 13.5129 5.5069 13.4073C5.46314 13.3018 5.44062 13.1886 5.44062 13.0743C5.44062 12.9601 5.46314 12.8469 5.5069 12.7414C5.55066 12.6358 5.6148 12.5399 5.69565 12.4591L8 10.1539C8.02024 10.1337 8.03631 10.1097 8.04727 10.0833C8.05822 10.0569 8.06387 10.0286 8.06387 10C8.06387 9.97141 8.05822 9.94309 8.04727 9.91668C8.03631 9.89027 8.02024 9.86628 8 9.84609L5.69565 7.54087Z" fill="white"/></svg>');
+        color: $color-white;
+        padding-left: calc(#{$padding-xl} + #{$font-size-icon});
+    }
+
+    &.info {
+        background-color: map_get($colors-electric-blue, 100);
+        background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.14583C4.735 1.14583 0.450836 4.67583 0.450836 9.01417C0.466548 10.0566 0.71037 11.0829 1.16516 12.021C1.61996 12.9591 2.27469 13.7862 3.08334 14.4442L1.18 18.25C1.14798 18.3136 1.13276 18.3843 1.13581 18.4554C1.13886 18.5265 1.16008 18.5956 1.19743 18.6562C1.23478 18.7168 1.28702 18.7668 1.34918 18.8014C1.41134 18.8361 1.48134 18.8542 1.5525 18.8542C1.61324 18.8538 1.6732 18.8405 1.72834 18.815L6.83334 16.4392C7.86289 16.7346 8.92891 16.8835 10 16.8817C15.265 16.8817 19.5492 13.3517 19.5492 9.01417C19.5492 4.67667 15.265 1.14583 10 1.14583ZM5.79917 10.3125C5.55194 10.3125 5.31027 10.2392 5.10471 10.1018C4.89915 9.96448 4.73893 9.76926 4.64432 9.54085C4.54971 9.31245 4.52496 9.06111 4.57319 8.81864C4.62142 8.57616 4.74047 8.35343 4.91529 8.17862C5.0901 8.0038 5.31283 7.88475 5.55531 7.83652C5.79778 7.78829 6.04912 7.81304 6.27752 7.90765C6.50593 8.00226 6.70116 8.16248 6.83851 8.36804C6.97586 8.5736 7.04917 8.81527 7.04917 9.0625C7.04917 9.39402 6.91747 9.71196 6.68305 9.94638C6.44863 10.1808 6.13069 10.3125 5.79917 10.3125ZM10 7.8125C10.2472 7.8125 10.4889 7.88581 10.6945 8.02316C10.9 8.16051 11.0602 8.35574 11.1549 8.58414C11.2495 8.81255 11.2742 9.06389 11.226 9.30636C11.1778 9.54884 11.0587 9.77157 10.8839 9.94638C10.7091 10.1212 10.4863 10.2402 10.2439 10.2885C10.0014 10.3367 9.75006 10.312 9.52165 10.2173C9.29324 10.1227 9.09802 9.96252 8.96067 9.75696C8.82331 9.5514 8.75 9.30973 8.75 9.0625C8.75 8.73098 8.8817 8.41304 9.11612 8.17862C9.35054 7.94419 9.66848 7.8125 10 7.8125ZM14.1667 10.3125C13.9194 10.3125 13.6778 10.2392 13.4722 10.1018C13.2666 9.96448 13.1064 9.76926 13.0118 9.54085C12.9172 9.31245 12.8925 9.06111 12.9407 8.81864C12.9889 8.57616 13.108 8.35343 13.2828 8.17862C13.4576 8.0038 13.6803 7.88475 13.9228 7.83652C14.1653 7.78829 14.4166 7.81304 14.645 7.90765C14.8734 8.00226 15.0687 8.16248 15.206 8.36804C15.3434 8.5736 15.4167 8.81527 15.4167 9.0625C15.4167 9.39402 15.285 9.71196 15.0506 9.94638C14.8161 10.1808 14.4982 10.3125 14.1667 10.3125Z" fill="white"/></svg>');
+        color: $color-white;
+        padding-left: calc(#{$padding-xl} + #{$font-size-icon});
+    }
+
+    &.success {
+        background-color: $color-success;
+        background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="white"/><path d="M14.9367 7.23975L13.7003 6.06178C13.6797 6.04219 13.6553 6.02665 13.6284 6.01605C13.6015 6.00544 13.5726 5.99998 13.5435 5.99998C13.5144 5.99998 13.4856 6.00544 13.4587 6.01605C13.4318 6.02665 13.4073 6.04219 13.3868 6.06178L8.16474 11.0261C8.14417 11.0457 8.11973 11.0612 8.09283 11.0718C8.06593 11.0824 8.03709 11.0879 8.00797 11.0879C7.97885 11.0879 7.95001 11.0824 7.92311 11.0718C7.89621 11.0612 7.87177 11.0457 7.8512 11.0261L6.61478 9.8481C6.59421 9.82851 6.56978 9.81297 6.54288 9.80236C6.51598 9.79176 6.48714 9.7863 6.45802 9.7863C6.42889 9.7863 6.40005 9.79176 6.37315 9.80236C6.34625 9.81297 6.32182 9.82851 6.30125 9.8481L5.06483 11.0261C5.02332 11.0655 5 11.119 5 11.1748C5 11.2306 5.02332 11.2841 5.06483 11.3235L7.8512 13.971C7.87177 13.9906 7.89621 14.0061 7.92311 14.0167C7.95001 14.0273 7.97885 14.0328 8.00797 14.0328C8.03709 14.0328 8.06593 14.0273 8.09283 14.0167C8.11973 14.0061 8.14417 13.9906 8.16474 13.971L14.9367 7.53424C14.9773 7.49492 15 7.44205 15 7.38699C15 7.33193 14.9773 7.27907 14.9367 7.23975Z" fill="%2345B854"/></svg>');
+        color: $color-white;
+        padding-left: calc(#{$padding-xl} + #{$font-size-icon});
+    }
+
+    &.warning {
+        background-color: map_get($colors-yellow, 100);
+        background-image: url('data:image/svg+xml;utf8,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.158 0.00223185C7.46858 0.0459718 4.90451 1.1394 3.02007 3.04615C2.07719 3.97872 1.33326 5.09058 0.832739 6.31526C0.332222 7.53994 0.0853979 8.8523 0.10702 10.1739C0.105473 11.4653 0.360466 12.7443 0.857387 13.9376C1.35431 15.1309 2.08338 16.215 3.00284 17.1279C3.92229 18.0408 5.01404 18.7644 6.21553 19.2574C7.41701 19.7503 8.70461 20.0029 10.0045 20.0006H10.184C12.8743 19.9731 15.4437 18.8865 17.3285 16.9793C19.2132 15.072 20.2594 12.4999 20.2375 9.82726C20.2406 8.52022 19.9806 7.22575 19.4728 6.01998C18.965 4.81422 18.2196 3.7215 17.2804 2.80609C16.3413 1.89068 15.2274 1.17106 14.0043 0.689544C12.7811 0.20803 11.4734 -0.0256546 10.158 0.00223185ZM8.91412 13.7861C8.90807 13.6227 8.93488 13.4598 8.99296 13.3068C9.05105 13.1538 9.13926 13.0139 9.25242 12.8952C9.36559 12.7765 9.50144 12.6814 9.65204 12.6155C9.80263 12.5495 9.96495 12.5141 10.1295 12.5112H10.1521C10.4831 12.5118 10.801 12.6397 11.0392 12.8681C11.2773 13.0964 11.4172 13.4075 11.4296 13.7361C11.4358 13.8995 11.409 14.0625 11.351 14.2155C11.2929 14.3685 11.2047 14.5085 11.0916 14.6273C10.9784 14.746 10.8425 14.8411 10.6918 14.907C10.5412 14.9729 10.3788 15.0082 10.2142 15.011H10.1916C9.86071 15.01 9.54305 14.8819 9.30499 14.6537C9.06693 14.4254 8.92688 14.1146 8.91412 13.7861ZM9.3335 10.418V5.41846C9.3335 5.19746 9.42188 4.98552 9.57917 4.82925C9.73647 4.67298 9.94982 4.58519 10.1723 4.58519C10.3947 4.58519 10.6081 4.67298 10.7654 4.82925C10.9227 4.98552 11.011 5.19746 11.011 5.41846V10.418C11.011 10.639 10.9227 10.851 10.7654 11.0073C10.6081 11.1635 10.3947 11.2513 10.1723 11.2513C9.94982 11.2513 9.73647 11.1635 9.57917 11.0073C9.42188 10.851 9.3335 10.639 9.3335 10.418Z" fill="%235D6A82"/></svg>');
+        color: map_get($colors-grey, 80);
+        padding-left: calc(#{$padding-xl} + #{$font-size-icon});
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_ng-select.scss

@@ -0,0 +1,130 @@
+@import '../../../../../../node_modules/@ng-select/ng-select/themes/default.theme.css';
+@import 'assets/lib-ui-theme/style/variables';
+
+@mixin select-state-style($color) {
+    .ng-select-container {
+        border-color: $color;
+    }
+}
+
+.ng-select {
+    div, span {
+        font-weight: normal !important;
+    }
+    input {
+        padding: 0; // Reset theme input padding
+    }
+    &:not(.ng-select-disabled):not(.ng-select-focused):not(.valid):not(.invalid) {
+        .ng-select-container:hover {
+            border-color: map_get($colors-grey, 40);
+        }
+    }
+    .ng-select-container {
+        border-radius: $border-radius !important;
+        border: 1px solid $form-input-default-border-color;
+        font-weight: normal;
+        box-shadow: none !important;
+        .ng-placeholder {
+            color: $form-input-placeholder-font-color !important;
+        }
+        .ng-value-container {
+            font-weight: normal;
+            padding-left: $padding-m;
+            .ng-placeholder {
+                color: $border-color;
+            }
+            .ng-value span:not(.ng-value-icon) {
+                color: $form-control-selected-font-color;
+                display: flex;
+                ap-symbol {
+                    padding-right: $padding-s;
+                }
+            }
+        }
+    }
+    &.ng-select-opened {
+        .ng-select-container {
+            border-color: $form-control-selected-border-color !important;
+            .ng-arrow {
+                border-color: transparent transparent $form-control-selected-border-color;
+            }
+        }
+    }
+    &.ng-select-single {
+        .ng-select-container {
+            .ng-value-container {
+                .ng-input  {
+                    padding-left: $padding-m;
+                }
+            }
+        }
+    }
+    // Invalid
+    &.invalid:not(.ng-select-disabled),
+    &.ng-invalid.ng-dirty.ng-touched:not(.ng-select-disabled) {
+        @include select-state-style($color-error);
+    }
+    // Valid
+    &.valid:not(.ng-select-disabled) {
+        @include select-state-style($color-success);
+    }
+}
+
+form.submitted {
+    .ng-select {
+        // Invalid
+        &.ng-invalid:not(.ng-select-disabled) {
+            @include select-state-style($color-error);
+        }
+    }
+}
+
+.ng-dropdown-panel {
+    border: none;
+    box-shadow: none;
+    &.ng-select-bottom {
+        border-radius: $border-radius;
+        box-shadow: 0 7px 50px rgba(0, 0, 0, 0.08);
+        margin-top: $padding-sm;
+    }
+    .ng-dropdown-panel-items {
+        padding: $padding-s 0;
+        .ng-option, .ng-optgroup {
+            padding: $padding-s $padding-m;
+            span {
+                color: $form-control-selected-font-color;
+                display: flex;
+                ap-symbol {
+                    padding-right: $padding-s;
+                }
+            }
+            &.ng-option-selected {
+                background-color: unset;
+                span {
+                    color: map_get($colors-electric-blue, 100);
+                    ap-symbol .svg {
+                        fill: map_get($colors-electric-blue, 100) !important;
+                    }
+                }
+            }
+            &.ng-option-marked {
+                background-color: map_get($colors-electric-blue, 10);
+                span {
+                    color: map_get($colors-electric-blue, 100);
+                    ap-symbol .svg {
+                        fill: map_get($colors-electric-blue, 100) !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
+    top: unset;
+}

package/assets/lib-ui-theme/style/components-custom-style/_notification.scss

@@ -0,0 +1,48 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.notification {
+    align-items: center;
+    background: map_get($colors-soft-blue, 10);
+    display: flex;
+    color: $color-info;
+    font-size: $font-size;
+    line-height: 17px;
+    padding: $padding-s $padding-m $padding-s $padding-s;
+    border-radius: $padding-sm;
+
+    .notification-border {
+        align-self: stretch;
+        border: 2px solid $color-info;
+        background-color: $color-info;
+        border-radius: 4px;
+        margin-right: $padding-s;
+    }
+
+    .notification-icon {
+        margin-right: $padding-s;
+    }
+
+    &.warning {
+        background: map_get($colors-yellow, 10);
+        color: map_get($colors-grey, 60);
+        .notification-border {
+            border-color: map_get($colors-yellow, 100);
+            background-color: map_get($colors-yellow, 100);
+        }
+    }
+
+    &.error {
+        background: map_get($colors-red, 10);
+        color: $color-error;
+        .notification-border {
+            border-color: $color-error;
+            background-color: $color-error;
+        }
+    }
+
+    /*&.large {
+        padding-bottom: $padding-sm - 1;
+        padding-top: $padding-sm - 1;
+        font-size: $font-size;
+    }*/
+}

package/assets/lib-ui-theme/style/components-custom-style/_reduction.scss

@@ -0,0 +1,14 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+span.ap-reduction {
+    color: map-get($colors-green, 100);
+    font-size: $font-size-s;
+    font-weight: $font-weight-bold;
+    padding: $padding-sm $padding-s $padding-sm $padding-s;
+    background-color: map-get($colors-green, 10);
+    border-radius: $border-radius;
+
+    &.ap-line-through {
+        text-decoration: line-through;
+    }
+}

package/assets/lib-ui-theme/style/components-custom-style/_select.scss

@@ -0,0 +1,16 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+select {
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    color: $font-color;
+    font-family: $font-family;
+    font-size: $font-size;
+    font-weight: $font-weight-semibold;
+    padding: 6px $padding-m;
+    -webkit-appearance: none;
+}
+
+select:focus {
+    outline: none;
+}

package/assets/lib-ui-theme/style/components-custom-style/_sign.scss

@@ -0,0 +1,10 @@
+@import 'assets/lib-ui-theme/style/variables';
+
+.sign {
+    padding: 0 2px;
+    border-radius: 2px;
+    font-size: $font-size-s;
+    font-weight: $font-weight-bold;
+    background-color: map_get($colors-orange, 100);
+    color: white;
+}

package/assets/lib-ui-theme/style/theme.scss

@@ -0,0 +1,77 @@
+/*
+ * THEMING
+ * See https://material.angular.io/guide/theming
+ */
+@use '../../../../../node_modules/@angular/material/index' as mat;
+@include mat.core();
+
+
+@import 'font-face';
+@import 'colors';
+@import 'variables';
+
+// Custom palettes
+@include mat.all-component-themes(mat.define-light-theme(
+    $primary: mat.define-palette($colors-primary),
+    $accent: mat.define-palette($colors-accent),
+    $warn: mat.define-palette($colors-warn)
+));
+
+/*
+ * TYPOGRAPHY
+ */
+
+@import 'mat-typography';
+
+/*
+ * GRID
+ */
+@import 'grid';
+
+/*
+ * HELPERS
+ */
+@import 'helpers';
+
+/*
+ * COMPONENTS
+ */
+
+@import 'assets/lib-ui-theme/style/components-custom-style/alert';
+@import 'assets/lib-ui-theme/style/components-custom-style/form';
+@import 'assets/lib-ui-theme/style/components-custom-style/input';
+@import 'assets/lib-ui-theme/style/components-custom-style/notification';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-button';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-button-toggle-group';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-checkbox';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-dialog';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-divider';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-expansion-panel';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-list';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-menu';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-radio-button';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-slide-toggle';
+@import 'assets/lib-ui-theme/style/components-custom-style/mat-snack-bar';
+@import 'assets/lib-ui-theme/style/components-custom-style/ng-select';
+@import 'assets/lib-ui-theme/style/components-custom-style/select';
+@import 'assets/lib-ui-theme/style/components-custom-style/sign';
+@import 'assets/lib-ui-theme/style/components-custom-style/reduction';
+@import 'assets/lib-ui-theme/style/components-custom-style/clickable-text';
+@import 'assets/lib-ui-theme/style/components-custom-style/input-error';
+
+.mat-ripple { display: none; }
+
+/*
+* {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
+}
+
+a, button {
+    cursor: pointer;
+}
+*/
+
+
+

package/ng-package.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ui-theme"
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@agorapulse/ui-theme",
+  "version": "0.0.1",
+  "description": "Agorapulse UI Theme Library",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agorapulse/design.git"
+  },
+  "author": "Arnaud BUSO",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/agorapulse/design/issues"
+  },
+  "homepage": "https://github.com/agorapulse/design#readme"
+}