@citizenplane/pimp 8.2.6 → 8.2.8

package/src/components/selects/CpSelect.vue

@@ -126,7 +126,7 @@ export default {
 
 <style lang="scss">
 .cpSelect {
-  $cp-select-icon-size: pxToEm(20);
+  $cp-select-icon-size: px-to-em(20);
 
   &__container {
     position: relative;
@@ -134,7 +134,7 @@ export default {
     &:after {
       content: '';
       position: absolute;
-      right: pxToEm(12);
+      right: px-to-em(12);
       top: 50%;
       transform: translateY(-50%);
       width: $cp-select-icon-size;
@@ -147,20 +147,20 @@ export default {
 
   &__inner {
     @extend %u-text-ellipsis;
-    box-shadow: inset 0 pxToEm(1) pxToEm(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 px-to-em(1) px-to-em(2) rgba(0, 0, 0, 0.12);
     outline: none;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(10);
+    border: px-to-rem(1) solid $neutral-dark-4;
+    border-radius: px-to-em(10);
     background-color: $neutral-light;
     width: 100%;
     height: $component-size-default;
     color: $neutral-dark;
     cursor: pointer;
-    padding: pxToEm(12) calc(#{$cp-select-icon-size} + #{pxToEm(12)} + #{pxToEm(8)}) pxToEm(12) pxToEm(12);
-    font-size: pxToEm(16);
+    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);
 
     &:hover,
     &:focus {
@@ -169,7 +169,7 @@ export default {
     }
 
     &:focus {
-      box-shadow: rgba($secondary-color, 0.1) 0 0 0 pxToRem(4), $secondary-color 0 0 0 pxToRem(0.5);
+      box-shadow: rgba($secondary-color, 0.1) 0 0 0 px-to-rem(4), $secondary-color 0 0 0 px-to-rem(0.5);
     }
   }
 
@@ -177,11 +177,11 @@ export default {
     display: block;
 
     &:not(#{&}--isAfter) {
-      margin-bottom: pxToEm(6);
+      margin-bottom: px-to-em(6);
     }
 
     &--isAfter {
-      margin-top: pxToEm(6);
+      margin-top: px-to-em(6);
     }
   }
 
@@ -210,22 +210,23 @@ export default {
     }
 
     .cpSelect__inner:focus {
-      box-shadow: 0 0 0 pxToEm(3) scale-color($error-color, $lightness: 60%);
+      box-shadow: 0 0 0 px-to-em(3) scale-color($error-color, $lightness: 60%);
     }
   }
 
   &--isLarge {
-    $cp-select-large-icon-size: pxToEm(24);
-    $cp-select-large-padding: pxToEm(16);
+    $cp-select-large-icon-size: px-to-em(24);
+    $cp-select-large-padding: px-to-em(16);
 
     .cpSelect__container:after {
-      right: pxToEm(16);
+      right: px-to-em(16);
       width: $cp-select-large-icon-size;
       height: $cp-select-large-icon-size;
     }
 
     .cpSelect__inner {
-      padding: pxToEm(16) calc(#{$cp-select-large-icon-size} + #{pxToEm(16)} + #{pxToEm(8)}) pxToEm(16) pxToEm(16);
+      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;
     }
   }

package/src/components/selects/CpSelectMenu/index.vue

@@ -149,14 +149,14 @@ export default {
 <style lang="scss">
 .cpSelectMenu {
   position: relative;
-  font-size: pxToEm(16);
+  font-size: px-to-em(16);
 
   &__button {
-    box-shadow: inset 0 pxToEm(1) pxToEm(2) rgba(0, 0, 0, 0.12);
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(10);
+    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: pxToEm(12);
+    padding: px-to-em(12);
     width: 100%;
     height: $component-size-default;
     display: flex;
@@ -174,7 +174,7 @@ export default {
 
     &:focus {
       outline: none !important;
-      box-shadow: 0 0 0 pxToEm(3) scale-color($secondary-color, $lightness: 80%);
+      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
     }
   }
 
@@ -183,9 +183,9 @@ export default {
   }
 
   &__icon {
-    margin-left: pxToEm(12);
-    width: pxToEm(20);
-    height: pxToEm(20);
+    margin-left: px-to-em(12);
+    width: px-to-em(20);
+    height: px-to-em(20);
     flex-shrink: 0;
     transition: transform 0.2s ease-out;
 
@@ -199,21 +199,21 @@ export default {
     position: absolute;
     top: calc(100% + 4px);
     left: 0;
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(10);
+    border: px-to-rem(1) solid $neutral-dark-4;
+    border-radius: px-to-em(10);
     background: $neutral-light;
-    width: unquote('max(100%, #{pxToRem(250)})');
+    width: unquote('max(100%, #{px-to-rem(250)})');
     font-size: inherit;
   }
 
   .dropdown {
     svg {
-      width: pxToEm(18);
-      height: pxToEm(18);
+      width: px-to-em(18);
+      height: px-to-em(18);
     }
 
     &__title {
-      padding: pxToEm(12) pxToEm(8);
+      padding: px-to-em(12) px-to-em(8);
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -223,10 +223,10 @@ export default {
     }
 
     &__filterBar {
-      border-top: pxToRem(1) solid $neutral-dark-4;
-      border-bottom: pxToRem(1) solid $neutral-dark-4;
+      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: pxToEm(8);
+      padding: px-to-em(8);
       display: flex;
       align-items: center;
 
@@ -241,7 +241,7 @@ export default {
       }
 
       i {
-        margin-right: pxToEm(8);
+        margin-right: px-to-em(8);
         color: $neutral-dark;
         flex-shrink: 0;
       }
@@ -250,13 +250,13 @@ export default {
     &__list {
       display: flex;
       flex-direction: column;
-      min-height: pxToRem(250);
+      min-height: px-to-rem(250);
     }
 
     &__items {
-      margin: pxToEm(4) 0;
+      margin: px-to-em(4) 0;
       padding: 0;
-      max-height: pxToRem(250);
+      max-height: px-to-rem(250);
       overflow-y: auto;
 
       li {
@@ -266,7 +266,7 @@ export default {
 
     &__item {
       position: relative;
-      padding: pxToEm(8) pxToEm(16) pxToEm(8) pxToEm(36);
+      padding: px-to-em(8) px-to-em(16) px-to-em(8) px-to-em(36);
       width: 100%;
       display: flex;
       text-align: initial;
@@ -284,14 +284,14 @@ export default {
 
     &__icon {
       position: absolute;
-      left: pxToEm(8);
+      left: px-to-em(8);
       top: 50%;
       transform: translateY(-50%);
       color: $secondary-color;
     }
 
     &__emptyState {
-      padding: pxToEm(16) pxToEm(8);
+      padding: px-to-em(16) px-to-em(8);
       flex: 1;
       display: flex;
       align-items: center;

package/src/components/toggles/CpCheckbox/index.scss

@@ -1,8 +1,8 @@
 @use 'sass:math';
 @import 'src/assets/styles/main';
 
-$cp-checkbox-base-width: pxToEm(20);
-$cp-checkbox-tick-base-width: pxToEm(14);
+$cp-checkbox-base-width: px-to-em(20);
+$cp-checkbox-tick-base-width: px-to-em(14);
 
 @mixin cp-checkbox-style($color, $className) {
   &--is#{$className} input:checked {
@@ -21,7 +21,7 @@ $cp-checkbox-tick-base-width: pxToEm(14);
   &--is#{$className} input:focus-within {
     position: relative;
     z-index: 1;
-    box-shadow: 0 0 0 pxToEm(3) scale-color($color, $lightness: 70%);
+    box-shadow: 0 0 0 px-to-em(3) scale-color($color, $lightness: 70%);
     border-color: scale-color($color, $lightness: 70%);
   }
 }
@@ -30,7 +30,7 @@ $cp-checkbox-tick-base-width: pxToEm(14);
   position: relative;
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-gap: pxToRem(12);
+  grid-gap: px-to-rem(12);
   align-items: center;
   cursor: pointer;
 
@@ -41,8 +41,8 @@ $cp-checkbox-tick-base-width: pxToEm(14);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    border: pxToRem(1) solid $neutral-dark-4;
-    border-radius: pxToEm(4);
+    border: px-to-rem(1) solid $neutral-dark-4;
+    border-radius: px-to-em(4);
     width: $cp-checkbox-base-width;
     height: $cp-checkbox-base-width;
     flex-shrink: 0;
@@ -114,7 +114,7 @@ $cp-checkbox-tick-base-width: pxToEm(14);
   &__label {
     display: block;
     font-weight: 500;
-    line-height: pxToEm(20);
+    line-height: px-to-em(20);
 
     &--isCapitalized::first-letter {
       text-transform: capitalize;

package/src/components/toggles/CpRadio/index.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @import 'src/assets/styles/main';
 
-$cp-radio-base-width: pxToEm(20);
+$cp-radio-base-width: px-to-em(20);
 
 @mixin cp-radio-style($color, $className) {
   &--is#{$className}#{&}--isActive {
@@ -26,14 +26,14 @@ $cp-radio-base-width: pxToEm(20);
   }
 
   &--is#{$className}:focus-within {
-    box-shadow: 0 0 0 pxToRem(4) rgba($color, 0.1);
+    box-shadow: 0 0 0 px-to-rem(4) rgba($color, 0.1);
   }
 }
 
 .cpRadio {
   position: relative;
-  border: pxToRem(1) solid $neutral-dark-4;
-  border-radius: pxToRem(10);
+  border: px-to-rem(1) solid $neutral-dark-4;
+  border-radius: px-to-rem(10);
   padding: $space-lg $space-md;
   display: grid;
   grid-template-columns: min-content 1fr;
@@ -78,7 +78,7 @@ $cp-radio-base-width: pxToEm(20);
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    border: pxToRem(1) solid $neutral-dark-4;
+    border: px-to-rem(1) solid $neutral-dark-4;
     border-radius: 100%;
     padding: 25%;
     width: $cp-radio-base-width;

package/src/components/toggles/CpSwitch/index.vue

@@ -102,7 +102,7 @@ export default {
   }
 
   &--is#{$className} &__switch:focus-within {
-    box-shadow: 0 0 0 pxToEm(3) scale-color($color, $lightness: 70%);
+    box-shadow: 0 0 0 px-to-em(3) scale-color($color, $lightness: 70%);
   }
 
   &--is#{$className}:hover:not(#{&}--isDisabled) &__switch {
@@ -120,7 +120,7 @@ export default {
 }
 
 .cpSwitch {
-  $cp-switch-base-height: pxToEm(24);
+  $cp-switch-base-height: px-to-em(24);
   align-items: center;
 
   &,
@@ -131,7 +131,7 @@ export default {
   &--hasLabel {
     display: grid;
     grid-template-columns: min-content 1fr;
-    grid-gap: pxToRem(12);
+    grid-gap: px-to-rem(12);
     align-items: center;
   }
 
@@ -209,7 +209,7 @@ export default {
     top: 50%;
     transform: translateY(-50%);
     opacity: 0;
-    padding-left: pxToRem(4);
+    padding-left: px-to-rem(4);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -230,7 +230,7 @@ export default {
 
   &__knobContainer {
     width: 100%;
-    padding: pxToRem(2);
+    padding: px-to-rem(2);
     display: flex;
     align-items: center;
     transition: transform 0.3s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
@@ -239,8 +239,8 @@ export default {
   &__knob {
     background-color: $neutral-light;
     border-radius: 100%;
-    width: calc(#{$cp-switch-base-height} - #{pxToRem(4)});
-    height: calc(#{$cp-switch-base-height} - #{pxToRem(4)});
+    width: calc(#{$cp-switch-base-height} - #{px-to-rem(4)});
+    height: calc(#{$cp-switch-base-height} - #{px-to-rem(4)});
   }
 }
 </style>

package/src/components/typography/CpHeading/index.vue

@@ -45,64 +45,64 @@ export default {
   }
 
   &--100 {
-    font-size: pxToRem(11);
+    font-size: px-to-rem(11);
     font-weight: 400;
-    line-height: pxToRem(16);
-    letter-spacing: pxToEm(0.6);
+    line-height: px-to-rem(16);
+    letter-spacing: px-to-em(0.6);
     color: $neutral-dark-1;
   }
 
   &--200 {
-    font-size: pxToRem(12);
+    font-size: px-to-rem(12);
     font-weight: 600;
-    line-height: pxToRem(16);
+    line-height: px-to-rem(16);
     color: $neutral-dark-1;
   }
 
   &--300 {
-    font-size: pxToRem(12);
+    font-size: px-to-rem(12);
     font-weight: 600;
-    line-height: pxToRem(16);
+    line-height: px-to-rem(16);
   }
 
   &--400 {
-    font-size: pxToRem(14);
+    font-size: px-to-rem(14);
     font-weight: 500;
-    line-height: pxToRem(18);
+    line-height: px-to-rem(18);
   }
 
   &--500 {
-    font-size: pxToRem(16);
+    font-size: px-to-rem(16);
     font-weight: 500;
-    line-height: pxToRem(20);
+    line-height: px-to-rem(20);
   }
 
   &--600 {
-    font-size: pxToRem(18);
+    font-size: px-to-rem(18);
     font-weight: 500;
-    line-height: pxToRem(23);
-    letter-spacing: pxToEm(0.4);
+    line-height: px-to-rem(23);
+    letter-spacing: px-to-em(0.4);
   }
 
   &--700 {
-    font-size: pxToRem(20);
+    font-size: px-to-rem(20);
     font-weight: 500;
-    line-height: pxToRem(25);
-    letter-spacing: pxToEm(0.4);
+    line-height: px-to-rem(25);
+    letter-spacing: px-to-em(0.4);
   }
 
   &--800 {
-    font-size: pxToRem(29);
+    font-size: px-to-rem(29);
     font-weight: 500;
-    line-height: pxToRem(32);
-    letter-spacing: pxToEm(0.4);
+    line-height: px-to-rem(32);
+    letter-spacing: px-to-em(0.4);
   }
 
   &--900 {
-    font-size: pxToRem(35);
+    font-size: px-to-rem(35);
     font-weight: 500;
-    line-height: pxToRem(40);
-    letter-spacing: pxToEm(0.4);
+    line-height: px-to-rem(40);
+    letter-spacing: px-to-em(0.4);
   }
 }
 </style>

package/src/main.js

@@ -5,10 +5,8 @@ const app = createApp(App)
 
 // Plugins
 import Pimp from './components'
-app.use(Pimp)
 
-import Toaster from './plugins/toaster'
-app.use(Toaster)
+app.use(Pimp)
 
 // Mount
 app.mount('#app')

package/src/plugins/toaster.js

@@ -58,12 +58,4 @@ const createToaster = (globalOptions = {}) => {
   }
 }
 
-export default {
-  install(app, options) {
-    app.component('CpToaster', CpToaster)
-
-    let methods = createToaster(options)
-    app.$toaster = methods
-    app.config.globalProperties.$toaster = methods
-  },
-}
+export default createToaster