@citizenplane/pimp 8.9.5 → 8.10.0

package/src/components/inputs/CpInput.vue

@@ -59,7 +59,7 @@
 <script setup>
 import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'vue'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 
 import { randomString } from '@/helpers'
 
@@ -214,7 +214,7 @@ onMounted(async () => {
 <style lang="scss">
 // Mixins
 @mixin cp-input-hover-style() {
-  border-color: $secondary-color;
+  border-color: colors.$primary-color;
 }
 
 // Main
@@ -224,7 +224,7 @@ onMounted(async () => {
   flex-direction: column;
 
   &:has(.cpInput__help, .cpInput__error) .cpInput__container {
-    margin-bottom: $space;
+    margin-bottom: sp.$space;
   }
 
   &__container {
@@ -239,46 +239,46 @@ onMounted(async () => {
 
   &__clear {
     display: flex;
-    padding: px-to-em(3);
-    color: $neutral-light;
+    padding: fn.px-to-em(3);
+    color: colors.$neutral-light;
     border-radius: 50%;
-    background-color: $neutral-dark-1;
+    background-color: colors.$neutral-dark-1;
 
     &:focus-visible {
-      outline: px-to-em(3) solid scale-color($secondary-color, $lightness: 80%);
+      outline: fn.px-to-em(3) solid color.scale(colors.$primary-color, $lightness: 80%);
     }
   }
 
   &__clearIcon {
-    width: px-to-em(12);
-    height: px-to-em(12);
+    width: fn.px-to-em(12);
+    height: fn.px-to-em(12);
     pointer-events: none;
   }
 
   &__inner {
-    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);
     appearance: none;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
     outline: none;
     width: 100%;
-    height: $component-size-default;
+    height: sizing.$component-size-default;
     color: inherit;
-    padding: px-to-em(12);
-    font-size: px-to-em(16);
+    padding: fn.px-to-em(12);
+    font-size: fn.px-to-em(16);
 
     &:hover {
       @include cp-input-hover-style;
     }
 
     &:focus {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
-      border-color: $secondary-color;
-      background-color: $neutral-light;
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 80%);
+      border-color: colors.$primary-color;
+      background-color: colors.$neutral-light;
     }
 
     &::placeholder {
-      color: $neutral-dark-1;
+      color: colors.$neutral-dark-1;
     }
   }
 
@@ -287,32 +287,32 @@ onMounted(async () => {
     .cpInput__inner:hover,
     .cpInput__inner:focus,
     .cpInput__icon:hover ~ .cpInput__inner {
-      border: px-to-rem(1) solid $error-color;
+      border: fn.px-to-rem(1) solid colors.$error-color;
     }
 
     .cpInput__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%);
     }
   }
 
   &--isDisabled {
-    color: $neutral-dark-2 !important;
+    color: colors.$neutral-dark-2 !important;
 
     .cpInput__container * {
       cursor: not-allowed;
     }
 
     .cpInput__inner {
-      background: $neutral-light-1;
+      background: colors.$neutral-light-1;
     }
 
     .cpInput__inner,
     .cpInput__inner:hover {
-      border-color: $neutral-dark-4 !important;
+      border-color: colors.$neutral-dark-4 !important;
     }
 
     .cpInput__icon svg {
-      stroke: $neutral-dark-2 !important;
+      stroke: colors.$neutral-dark-2 !important;
     }
   }
 
@@ -327,52 +327,52 @@ onMounted(async () => {
   &__label {
     display: flex;
     align-items: center;
-    font-size: px-to-em(14);
-    line-height: px-to-rem(24);
-    margin-bottom: $space;
-    gap: $space-sm;
+    font-size: fn.px-to-em(14);
+    line-height: fn.px-to-rem(24);
+    margin-bottom: sp.$space;
+    gap: sp.$space-sm;
 
     sup {
-      color: $error-color;
+      color: colors.$error-color;
     }
   }
 
   &__tooltip {
     display: flex;
-    padding: $space-sm;
+    padding: sp.$space-sm;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
-    color: $neutral-dark-3;
-    outline-offset: px-to-em(-3);
+    color: colors.$neutral-dark-3;
+    outline-offset: fn.px-to-em(-3);
 
     &:hover,
     &:focus {
-      color: $primary-color;
+      color: colors.$primary-color;
     }
 
     &:focus-visible {
-      outline: px-to-em(2) solid $primary-color;
+      outline: fn.px-to-em(2) solid colors.$primary-color;
     }
   }
 
   &__tooltipIcon {
-    width: px-to-rem(16);
-    height: px-to-rem(16);
+    width: fn.px-to-rem(16);
+    height: fn.px-to-rem(16);
   }
 
   &__help,
   &__error {
-    font-size: px-to-em(14);
-    line-height: px-to-rem(24);
+    font-size: fn.px-to-em(14);
+    line-height: fn.px-to-rem(24);
   }
 
   &__help {
-    color: $neutral-dark-1;
+    color: colors.$neutral-dark-1;
   }
 
   &__error {
-    color: $error-color;
+    color: colors.$error-color;
     font-weight: 500;
 
     &::first-letter {
@@ -380,10 +380,10 @@ onMounted(async () => {
     }
   }
 
-  $cp-input-icon-size: px-to-em(20);
+  $cp-input-icon-size: fn.px-to-em(20);
 
   &__icon {
-    left: px-to-em(12);
+    left: fn.px-to-em(12);
     z-index: 1;
     position: absolute;
     top: 50%;
@@ -403,13 +403,13 @@ onMounted(async () => {
     }
 
     &--isInvalidity svg {
-      stroke: $error-color;
+      stroke: colors.$error-color;
     }
 
     &--isAfter,
     &--isInvalidity {
       left: auto;
-      right: px-to-em(12);
+      right: fn.px-to-em(12);
       justify-content: flex-end;
     }
 
@@ -418,36 +418,36 @@ onMounted(async () => {
     }
 
     &--isAfter ~ input {
-      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{px-to-em(8)});
+      padding-right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{fn.px-to-em(8)});
     }
 
     &--isBefore ~ input {
-      padding-left: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
+      padding-left: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
     }
 
     &--isInvalidity ~ input {
-      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
+      padding-right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
     }
 
     &--hasAfterAndInvalidityIcon ~ input {
-      padding-right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{px-to-em(8)} * 2);
+      padding-right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} * 2 + #{fn.px-to-em(8)} * 2);
     }
 
     &--isInvalidity {
       & ~ .cpInput__icon--isAfter {
-        right: calc(#{px-to-em(12)} + #{$cp-input-icon-size} + #{px-to-em(8)});
+        right: calc(#{fn.px-to-em(12)} + #{$cp-input-icon-size} + #{fn.px-to-em(8)});
         transition: right 0.25s cubic-bezier(0.17, 0.84, 0.44, 1);
       }
     }
   }
 
   &--isLarge {
-    $cp-input-large-icon-size: px-to-em(24);
-    $cp-input-large-spacing: px-to-em(12);
-    $cp-input-large-padding: px-to-em(16);
+    $cp-input-large-icon-size: fn.px-to-em(24);
+    $cp-input-large-spacing: fn.px-to-em(12);
+    $cp-input-large-padding: fn.px-to-em(16);
 
     .cpInput__inner {
-      height: $component-size-large;
+      height: sizing.$component-size-large;
       padding: $cp-input-large-padding;
     }
 
@@ -483,7 +483,7 @@ onMounted(async () => {
 
     .cpInput__icon--isInvalidity ~ .cpInput__icon--isAfter {
       & ~ .cpInput__icon--isAfter {
-        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{px-to-em(8)});
+        right: calc(#{$cp-input-large-padding} + #{$cp-input-large-icon-size} + #{fn.px-to-em(8)});
       }
     }
   }

package/src/components/inputs/CpTextarea.vue

@@ -29,7 +29,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel/index.vue'
+import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
 import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
 import { randomString } from '@/helpers'
@@ -109,49 +109,49 @@ const handleChange = (newValue) => emit('update:modelValue', newValue)
 <style lang="scss">
 .cpTextarea {
   &__input {
-    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);
     appearance: none;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-em(10);
+    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
+    border-radius: fn.px-to-em(10);
     outline: none;
-    padding: px-to-em(16);
+    padding: fn.px-to-em(16);
     width: 100%;
     max-width: 100%;
     height: 100%;
-    font-size: px-to-em(16);
-    color: $neutral-dark;
+    font-size: fn.px-to-em(16);
+    color: colors.$neutral-dark;
 
     &:hover {
-      border-color: $secondary-color;
+      border-color: colors.$primary-color;
     }
 
     &:focus {
-      box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 80%);
-      border-color: $secondary-color;
-      background-color: $neutral-light;
+      box-shadow: 0 0 0 fn.px-to-em(3) color.scale(colors.$primary-color, $lightness: 80%);
+      border-color: colors.$primary-color;
+      background-color: colors.$neutral-light;
     }
 
     &:disabled {
-      background: $neutral-light-1;
+      background: colors.$neutral-light-1;
       cursor: not-allowed;
-      color: $neutral-dark-1;
+      color: colors.$neutral-dark-1;
     }
 
     &::placeholder {
-      color: rgba($neutral-dark, 0.6);
+      color: rgba(colors.$neutral-dark, 0.6);
     }
 
     &--isInvalid {
-      box-shadow: 0 0 0 px-to-rem(0.5) $error-color;
-      border: px-to-rem(1) solid $error-color;
+      box-shadow: 0 0 0 fn.px-to-rem(0.5) colors.$error-color;
+      border: fn.px-to-rem(1) solid colors.$error-color;
 
       &:hover,
       &:focus {
-        border: px-to-rem(1) solid $error-color;
+        border: fn.px-to-rem(1) solid colors.$error-color;
       }
 
       &: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%);
       }
     }
   }
@@ -160,11 +160,11 @@ const handleChange = (newValue) => emit('update:modelValue', newValue)
     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);
     }
   }
 }