@citizenplane/pimp 8.9.5 → 8.10.0

package/src/components/lists-and-table/{CpTable/CpTableEmptyState/index.vue → CpTableEmptyState.vue}

@@ -23,27 +23,27 @@ export default {
 
 <style lang="scss">
 .cpTableEmptyState {
-  padding: 10vh $space-lg;
+  padding: 10vh sp.$space-lg;
   display: flex;
   align-items: center;
   justify-content: center;
 
   &__icon {
-    margin-bottom: $space-xl;
-    border-radius: px-to-rem(4);
+    margin-bottom: sp.$space-xl;
+    border-radius: fn.px-to-rem(4);
     display: inline-block;
-    background-color: $neutral-light-1;
-    padding: $space-lg;
-    color: $neutral-dark-1;
+    background-color: colors.$neutral-light-1;
+    padding: sp.$space-lg;
+    color: colors.$neutral-dark-1;
   }
 
   &__headline {
-    margin-bottom: $space;
-    font-size: px-to-em(20);
+    margin-bottom: sp.$space;
+    font-size: fn.px-to-em(20);
   }
 
   &__description {
-    color: $neutral-dark-1;
+    color: colors.$neutral-dark-1;
   }
 }
 </style>

package/src/components/selects/CpSelect.vue

@@ -35,7 +35,7 @@
 <script>
 import { randomString } from '@/helpers'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
 export default {
@@ -130,7 +130,7 @@ export default {
 
 <style lang="scss">
 .cpSelect {
-  $cp-select-icon-size: px-to-em(20);
+  $cp-select-icon-size: fn.px-to-em(20);
 
   &__container {
     position: relative;
@@ -138,7 +138,7 @@ export default {
     &:after {
       content: '';
       position: absolute;
-      right: px-to-em(12);
+      right: fn.px-to-em(12);
       top: 50%;
       transform: translateY(-50%);
       width: $cp-select-icon-size;
@@ -151,31 +151,32 @@ export default {
 
   &__inner {
     @extend %u-text-ellipsis;
-    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
     outline: none;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
-    background-color: $neutral-light;
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
+    background-color: colors.$neutral-light;
     width: 100%;
-    height: $component-size-default;
-    color: $neutral-dark;
+    height: sizing.$component-size-default;
+    color: colors.$neutral-dark;
     cursor: pointer;
-    padding: px-to-em(12) calc(#{$cp-select-icon-size} + #{px-to-em(12)} + #{px-to-em(8)}) px-to-em(12) px-to-em(12);
-    font-size: px-to-em(16);
+    padding: fn.px-to-em(12) calc(#{$cp-select-icon-size} + #{fn.px-to-em(12)} + #{fn.px-to-em(8)}) fn.px-to-em(12)
+      fn.px-to-em(12);
+    font-size: fn.px-to-em(16);
 
     &:hover,
     &:focus {
-      border-color: $secondary-color;
-      background-color: $neutral-light;
+      border-color: colors.$primary-color;
+      background-color: colors.$neutral-light;
     }
 
     &:focus {
       box-shadow:
-        rgba($secondary-color, 0.1) 0 0 0 px-to-rem(4),
-        $secondary-color 0 0 0 px-to-rem(0.5);
+        rgba(colors.$primary-color, 0.1) 0 0 0 fn.px-to-rem(4),
+        colors.$primary-color 0 0 0 fn.px-to-rem(0.5);
     }
   }
 
@@ -183,24 +184,24 @@ export default {
     display: block;
 
     &:not(#{&}--isAfter) {
-      margin-bottom: px-to-em(6);
+      margin-bottom: fn.px-to-em(6);
     }
 
     &--isAfter {
-      margin-top: px-to-em(6);
+      margin-top: fn.px-to-em(6);
     }
   }
 
   &--isDisabled {
     .cpSelect__inner {
-      border-color: $neutral-dark-4 !important;
-      background: $neutral-light-1;
+      border-color: colors.$neutral-dark-4 !important;
+      background: colors.$neutral-light-1;
     }
 
     .cpSelect__inner,
     .cpSelect__container:after {
       cursor: not-allowed;
-      color: $neutral-dark-2;
+      color: colors.$neutral-dark-2;
     }
 
     .cpSelect__container:after {
@@ -212,28 +213,28 @@ export default {
     .cpSelect__inner,
     .cpSelect__inner:hover,
     .cpSelect__inner:focus {
-      border-color: $error-color;
+      border-color: colors.$error-color;
     }
 
     .cpSelect__inner:focus {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$error-color, $lightness: 60%);
     }
   }
 
   &--isLarge {
-    $cp-select-large-icon-size: px-to-em(24);
-    $cp-select-large-padding: px-to-em(16);
+    $cp-select-large-icon-size: fn.px-to-em(24);
+    $cp-select-large-padding: fn.px-to-em(16);
 
     .cpSelect__container:after {
-      right: px-to-em(16);
+      right: fn.px-to-em(16);
       width: $cp-select-large-icon-size;
       height: $cp-select-large-icon-size;
     }
 
     .cpSelect__inner {
-      padding: px-to-em(16) calc(#{$cp-select-large-icon-size} + #{px-to-em(16)} + #{px-to-em(8)}) px-to-em(16)
-        px-to-em(16);
-      height: $component-size-large;
+      padding: fn.px-to-em(16) calc(#{$cp-select-large-icon-size} + #{fn.px-to-em(16)} + #{fn.px-to-em(8)})
+        fn.px-to-em(16) fn.px-to-em(16);
+      height: sizing.$component-size-large;
     }
   }
 }

package/src/components/selects/{CpSelectMenu/index.vue → CpSelectMenu.vue}

@@ -47,7 +47,7 @@
 </template>
 
 <script>
-import anime from 'animejs'
+import { animate } from 'animejs'
 
 export default {
   props: {
@@ -105,12 +105,11 @@ export default {
   },
   methods: {
     enter() {
-      anime({
-        targets: this.$refs.dropdownRef,
+      animate(this.$refs.dropdownRef, {
         scale: [0.8, 1],
         opacity: [0, 1],
         duration: 200,
-        easing: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
+        ease: 'cubicBezier(0.175, 0.885, 0.32, 1.175)',
       })
     },
     toggleDropdown() {
@@ -149,16 +148,16 @@ export default {
 <style lang="scss">
 .cpSelectMenu {
   position: relative;
-  font-size: px-to-em(16);
+  font-size: fn.px-to-em(16);
 
   &__button {
-    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
-    background: $neutral-light;
-    padding: px-to-em(12);
+    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
+    background: colors.$neutral-light;
+    padding: fn.px-to-em(12);
     width: 100%;
-    height: $component-size-default;
+    height: sizing.$component-size-default;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -169,12 +168,12 @@ export default {
     &:hover,
     &:active,
     &:focus {
-      border-color: $secondary-color;
+      border-color: colors.$secondary-color;
     }
 
     &:focus {
       outline: none !important;
-      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$secondary-color, $lightness: 80%);
     }
   }
 
@@ -183,9 +182,9 @@ export default {
   }
 
   &__icon {
-    margin-left: px-to-em(12);
-    width: px-to-em(20);
-    height: px-to-em(20);
+    margin-left: fn.px-to-em(12);
+    width: fn.px-to-em(20);
+    height: fn.px-to-em(20);
     flex-shrink: 0;
     transition: transform 0.2s ease-out;
 
@@ -199,50 +198,50 @@ export default {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
-    background: $neutral-light;
-    width: unquote('max(100%, #{px-to-rem(250)})');
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
+    background: colors.$neutral-light;
+    width: max(100%, #{fn.px-to-rem(250)});
     font-size: inherit;
   }
 
   .dropdown {
     svg {
-      width: px-to-em(18);
-      height: px-to-em(18);
+      width: fn.px-to-em(18);
+      height: fn.px-to-em(18);
     }
 
     &__title {
-      padding: px-to-em(12) px-to-em(8);
+      padding: fn.px-to-em(12) fn.px-to-em(8);
       display: flex;
       align-items: center;
       justify-content: space-between;
       white-space: normal;
       font-weight: 600;
-      color: $neutral-dark;
+      color: colors.$neutral-dark;
     }
 
     &__filterBar {
-      border-top: px-to-rem(1) solid $neutral-dark-4;
-      border-bottom: px-to-rem(1) solid $neutral-dark-4;
-      background-color: rgba($neutral-dark-5, 0.6);
-      padding: px-to-em(8);
+      border-top: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+      border-bottom: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+      background-color: rgba(colors.$neutral-dark-5, 0.6);
+      padding: fn.px-to-em(8);
       display: flex;
       align-items: center;
 
       & > input {
         background-color: transparent;
         flex: 1;
-        color: $neutral-dark;
+        color: colors.$neutral-dark;
 
         &::placeholder {
-          color: $neutral-dark-1;
+          color: colors.$neutral-dark-1;
         }
       }
 
       i {
-        margin-right: px-to-em(8);
-        color: $neutral-dark;
+        margin-right: fn.px-to-em(8);
+        color: colors.$neutral-dark;
         flex-shrink: 0;
       }
     }
@@ -250,13 +249,13 @@ export default {
     &__list {
       display: flex;
       flex-direction: column;
-      min-height: px-to-rem(250);
+      min-height: fn.px-to-rem(250);
     }
 
     &__items {
-      margin: px-to-em(4) 0;
+      margin: fn.px-to-em(4) 0;
       padding: 0;
-      max-height: px-to-rem(250);
+      max-height: fn.px-to-rem(250);
       overflow-y: auto;
 
       li {
@@ -266,7 +265,7 @@ export default {
 
     &__item {
       position: relative;
-      padding: px-to-em(8) px-to-em(16) px-to-em(8) px-to-em(36);
+      padding: fn.px-to-em(8) fn.px-to-em(16) fn.px-to-em(8) fn.px-to-em(36);
       width: 100%;
       display: flex;
       text-align: initial;
@@ -274,7 +273,7 @@ export default {
       text-transform: capitalize;
 
       &:hover {
-        background-color: rgba($neutral-dark-5, 0.5);
+        background-color: rgba(colors.$neutral-dark-5, 0.5);
       }
 
       input {
@@ -284,19 +283,19 @@ export default {
 
     &__icon {
       position: absolute;
-      left: px-to-em(8);
+      left: fn.px-to-em(8);
       top: 50%;
       transform: translateY(-50%);
-      color: $secondary-color;
+      color: colors.$secondary-color;
     }
 
     &__emptyState {
-      padding: px-to-em(16) px-to-em(8);
+      padding: fn.px-to-em(16) fn.px-to-em(8);
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: $neutral-dark-1;
+      color: colors.$neutral-dark-1;
     }
   }
 }

package/src/components/toggles/{CpCheckbox/index.vue → CpCheckbox.vue}

@@ -127,5 +127,137 @@ const onChange = () => emit('update:modelValue', checkedProxy.value)
 </script>
 
 <style lang="scss">
-@import 'index';
+@mixin cp-checkbox-style($color, $className) {
+  &--is#{$className} input:checked {
+    background-color: $color;
+    border-color: $color;
+  }
+
+  &--is#{$className}:hover input {
+    background-color: color.scale($color, $lightness: 95%);
+  }
+
+  &--is#{$className}:hover input:checked {
+    background-color: color.adjust($color, $lightness: -10%);
+  }
+
+  &--is#{$className} input:focus-visible {
+    position: relative;
+    z-index: 1;
+    outline: fn.px-to-rem(2) solid $color;
+    outline-offset: fn.px-to-rem(2);
+  }
+}
+
+.cpCheckbox {
+  $cp-checkbox-base-width: fn.px-to-rem(16);
+  $cp-checkbox-tick-base-width: fn.px-to-rem(12);
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+
+  @include cp-checkbox-style(colors.$secondary-color, 'Blue');
+  @include cp-checkbox-style(colors.$primary-color, 'Purple');
+
+  &:not(&--isEmpty) {
+    gap: sp.$space-md;
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: sp.$space-sm;
+    flex-shrink: 0;
+  }
+
+  input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-rem(4);
+    width: $cp-checkbox-base-width;
+    height: $cp-checkbox-base-width;
+    flex-shrink: 0;
+    cursor: pointer;
+    transition:
+      background-color 0.1s ease-out,
+      transform 0.1s linear;
+    background-color: colors.$neutral-light;
+
+    & + i {
+      position: absolute;
+      z-index: 2;
+      width: $cp-checkbox-tick-base-width;
+      height: $cp-checkbox-tick-base-width;
+      color: colors.$neutral-light;
+      opacity: 0;
+      transition: opacity 0.2s linear 0.1s;
+    }
+
+    & + i svg {
+      stroke-width: 3;
+    }
+
+    &:checked + i {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    &:disabled {
+      background-color: colors.$neutral-light-1;
+      cursor: not-allowed;
+
+      & ~ span {
+        color: colors.$neutral-dark-1;
+      }
+    }
+
+    &:checked:disabled {
+      border-color: colors.$neutral-dark-3;
+      background-color: colors.$neutral-dark-3;
+
+      & ~ span {
+        color: colors.$neutral-dark-3;
+      }
+    }
+
+    &:active:not(:disabled) {
+      transform: scale(0.8);
+    }
+  }
+
+  &--isDisabled {
+    cursor: not-allowed;
+  }
+
+  &--isReversed {
+    flex-direction: row-reverse;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__label,
+  &__helper {
+    display: block;
+    line-height: fn.px-to-rem(24);
+  }
+
+  &__label {
+    font-weight: 500;
+
+    &--isCapitalized::first-letter {
+      text-transform: capitalize;
+    }
+  }
+
+  &__helper {
+    color: colors.$neutral-dark-1;
+  }
+}
 </style>