@citizenplane/pimp 10.0.8 → 10.1.1

package/src/components/CpMultiselect.vue

@@ -53,7 +53,7 @@
         </slot>
       </template>
       <template v-if="typeahead" #dropdown>
-        <div v-if="displayPrefix" class="cpMultiselect__prefix">
+        <div v-if="hasPrefixSlot" class="cpMultiselect__prefix">
           <slot name="prefix" />
         </div>
         <cp-loader v-if="isLoading" class="cpMultiselect__loader" color="#B2B2BD" />
@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, useSlots } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
@@ -136,6 +136,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const slots = useSlots()
+
 const selectModel = computed({
   get() {
     return props.modelValue
@@ -178,10 +180,7 @@ const chevronDynamicClass = computed(() => {
   return { 'cpMultiselect__dropdownIcon--isRotated': isDropdownOpen.value }
 })
 
-const displayPrefix = computed(() => {
-  if (!props.multiple) return true
-  return !selectModel.value?.length
-})
+const hasPrefixSlot = computed(() => !!slots.prefix)
 
 const displayClearButton = computed(() => {
   if (props.multiple) return false
@@ -273,7 +272,7 @@ onMounted(() => overrideAlignOverlay())
 .cpMultiselect {
   display: flex;
   flex-direction: column;
-  gap: sp.$space;
+  gap: var(--cp-spacing-md);
 
   &__label {
     margin-bottom: 0;
@@ -294,45 +293,56 @@ onMounted(() => overrideAlignOverlay())
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: sp.$space sp.$space-lg;
-    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
-    border-radius: fn.px-to-rem(8);
-    gap: sp.$space;
+    padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+    box-shadow:
+      var(--cp-shadows-3xs),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+    border-radius: var(--cp-radius-md);
+    gap: var(--cp-spacing-md);
 
     &--sm {
-      padding: sp.$space-sm sp.$space-md;
+      padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
     }
 
     &:has(input:hover):not(:has(input:disabled)) {
-      outline: fn.px-to-rem(1) solid colors.$primary-color;
+      outline: var(--cp-dimensions-0_25) solid var(--cp-border-soft-hover);
     }
 
     &:has(input:focus-visible):not(:has(input:disabled)) {
-      outline: fn.px-to-rem(2) solid colors.$primary-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
 
     &:has(input:disabled) {
-      background-color: colors.$neutral-light-1;
+      background-color: var(--cp-background-white);
       cursor: not-allowed;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
+      color: var(--cp-text-disabled);
+
+      input,
+      input::placeholder {
+        color: var(--cp-text-disabled);
+      }
 
       .cpMultiselect__toggle {
         display: none;
       }
       .cpIcon {
-        color: colors.$gray-500;
+        color: var(--cp-foreground-disabled);
       }
     }
 
-    &:has([data-p*='invalid']) {
-      outline: fn.px-to-rem(1) solid colors.$error-color;
-      box-shadow: 0 0 0 fn.px-to-em(1) color.scale(colors.$error-color, $lightness: 70%);
+    &:is([data-p*='invalid'], .p-invalid, :has([data-p*='invalid']), :has([aria-invalid='true'])) {
+      outline: var(--cp-dimensions-0_25) solid var(--cp-border-error-solid) !important;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid) !important;
 
-      &:has(input:hover) {
-        outline: fn.px-to-rem(1) solid colors.$error-color;
+      &:is(:hover, :has(input:hover), :has(input:placeholder-shown):has(input:hover)) {
+        outline: var(--cp-dimensions-0_25) solid var(--cp-border-error-solid) !important;
+        box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid) !important;
       }
 
-      &:has(input:focus-visible) {
-        outline: fn.px-to-rem(2) solid colors.$error-color;
+      &:is(:focus-within, :has(input:focus-visible), :has(input:placeholder-shown):has(input:focus-visible)) {
+        outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid) !important;
+        box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid) !important;
       }
     }
   }
@@ -341,7 +351,7 @@ onMounted(() => overrideAlignOverlay())
     display: flex;
     flex: 1;
     flex-wrap: wrap;
-    gap: sp.$space;
+    gap: var(--cp-spacing-md);
 
     li {
       display: flex;
@@ -350,8 +360,8 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__tag.cpBadge.cpBadge--sm {
-    padding-top: fn.px-to-rem(3);
-    padding-bottom: fn.px-to-rem(3);
+    padding-top: calc(var(--cp-dimensions-0_5) * 1.5);
+    padding-bottom: calc(var(--cp-dimensions-0_5) * 1.5);
   }
 
   &__toggle {
@@ -374,17 +384,21 @@ onMounted(() => overrideAlignOverlay())
 
   &__input {
     padding: 0;
-    font-size: fn.px-to-rem(14);
-    line-height: fn.px-to-rem(24);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
     background-color: transparent;
     width: 100%;
 
+    &::placeholder {
+      color: var(--cp-text-placeholder);
+    }
+
     &:disabled {
-      color: colors.$gray-500;
+      color: var(--cp-foreground-disabled);
       cursor: not-allowed;
 
       &::placeholder {
-        color: colors.$gray-500;
+        color: var(--cp-text-disabled);
       }
     }
 
@@ -396,32 +410,31 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__dropdownIcon {
-    @include mx.square-sizing(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
 
+    color: var(--cp-foreground-secondary);
     transition: rotate 200ms ease;
 
     &--isRotated {
       rotate: 180deg;
+      color: var(--cp-foreground-primary);
     }
   }
 
   &__loader {
-    @include mx.square-sizing(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
   }
 
   &__overlay {
-    padding-block: sp.$space-sm;
+    padding-block: var(--cp-spacing-sm);
     left: 0;
     overflow: hidden;
-    background: colors.$neutral-light;
-    border-radius: fn.px-to-rem(8);
-    margin-block: sp.$space;
-    box-shadow:
-      0 2px 4px 0 rgba(18, 18, 23, 0.04),
-      0 5px 8px 0 rgba(18, 18, 23, 0.04),
-      0 10px 18px 0 rgba(18, 18, 23, 0.03),
-      0 24px 48px 0 rgba(18, 18, 23, 0.03),
-      0 0 0 1px rgba(18, 18, 23, 0.1);
+    background: var(--cp-background-primary);
+    border-radius: var(--cp-radius-md);
+    margin-block: var(--cp-spacing-md);
+    box-shadow: var(--cp-shadows-overlay);
 
     &--isHidden {
       display: none;
@@ -438,23 +451,28 @@ onMounted(() => overrideAlignOverlay())
 
   &__list {
     display: flex;
-    padding-inline: sp.$space-sm;
+    padding-inline: var(--cp-spacing-sm);
     flex-direction: column;
-    gap: sp.$space-xs;
+    gap: var(--cp-spacing-xs);
   }
 
   &__optionWrapper {
-    border-radius: fn.px-to-rem(6);
+    border-radius: var(--cp-radius-sm-md);
 
     &:hover,
     &[data-p-focused='true'],
     &[data-p-selected='true'] {
-      background: colors.$neutral-dark-5;
-      color: colors.$neutral-dark;
+      background: var(--cp-background-primary-hover);
+      color: var(--cp-foreground-primary);
     }
 
     &[data-p-selected='true'] {
-      border: 1px dashed colors.$border-color;
+      background: var(--cp-background-accent-primary);
+    }
+
+    &[data-p-selected='true'] .cpMultiselect__option {
+      color: var(--cp-foreground-accent-primary);
+      font-weight: 500;
     }
 
     &[data-p-disabled='true'] {
@@ -466,10 +484,10 @@ onMounted(() => overrideAlignOverlay())
 
   &__optionWrapper > *,
   &__option {
-    padding: fn.px-to-rem(10);
-    border-radius: fn.px-to-rem(6);
-    font-size: fn.px-to-rem(14);
-    line-height: fn.px-to-rem(18);
+    padding: var(--cp-dimensions-2_5);
+    border-radius: var(--cp-radius-sm-md);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
     text-align: left;
     width: 100%;
   }
@@ -479,21 +497,29 @@ onMounted(() => overrideAlignOverlay())
   }
 
   &__empty {
-    padding: sp.$space;
-    font-size: fn.px-to-rem(14);
-    color: colors.$neutral-dark-1;
+    padding: var(--cp-spacing-md);
+    font-size: var(--cp-text-size-sm);
+    color: var(--cp-text-secondary);
   }
 
   &__error {
-    color: colors.$error-color;
-    font-size: fn.px-to-rem(14);
-    line-height: fn.px-to-rem(24);
+    color: var(--cp-text-error-primary);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
 
     &::first-letter {
       text-transform: capitalize;
     }
   }
 
+  &__clear {
+    position: absolute;
+    right: var(--cp-dimensions-3_5);
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: var(--cp-background-primary);
+  }
+
   @include mx.media-query-pointer-device-only {
     &__clear {
       display: none;

package/src/components/CpPartnerBadge.vue

@@ -48,42 +48,42 @@ const componentDynamicClasses = computed(() => {
 <style lang="scss">
 .cpPartnerBadge {
   display: inline-flex;
-  padding: sp.$space-xs;
+  padding: var(--cp-spacing-xs);
   align-items: center;
   justify-content: center;
-  border-radius: fn.px-to-rem(4);
-  color: colors.$neutral-light;
+  border-radius: var(--cp-radius-sm);
+  color: var(--cp-text-white);
 
   &--isOta {
-    background-color: colors.$orange;
+    background-color: var(--cp-background-warning-solid);
   }
 
   &--isAirline {
-    background-color: colors.$blue-1;
+    background-color: var(--cp-background-blue-solid);
   }
 
   &--isSupplier {
-    background-color: colors.$purple;
+    background-color: var(--cp-background-accent-solid);
   }
 
   &--isThirdParty {
-    background-color: colors.$pink;
+    background-color: var(--cp-background-pink-solid);
   }
 
   > * {
-    width: fn.px-to-rem(20);
-    height: fn.px-to-rem(20);
+    width: var(--cp-dimensions-5);
+    height: var(--cp-dimensions-5);
     aspect-ratio: 1/1;
   }
 
   &--sm > * {
-    width: fn.px-to-rem(16);
-    height: fn.px-to-rem(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
   }
 
   &--xs > * {
-    width: fn.px-to-rem(12);
-    height: fn.px-to-rem(12);
+    width: var(--cp-dimensions-3);
+    height: var(--cp-dimensions-3);
   }
 }
 </style>

package/src/components/CpRadio.vue

@@ -105,20 +105,20 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
   }
 
   &--is#{$className}:focus-within {
-    box-shadow: 0 0 0 fn.px-to-rem(4) rgba($color, 0.1);
+    box-shadow: 0 0 0 var(--cp-dimensions-1) rgba($color, 0.1);
   }
 }
 
 .cpRadio {
-  $cp-radio-base-width: fn.px-to-em(20);
+  $cp-radio-base-width: var(--cp-dimensions-5);
 
   position: relative;
-  border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-  border-radius: fn.px-to-rem(10);
-  padding: sp.$space-lg sp.$space-md;
+  border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+  border-radius: var(--cp-radius-md-lg);
+  padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-gap: sp.$space-md;
+  grid-gap: var(--cp-spacing-lg);
   align-items: center;
   width: 100%;
 
@@ -127,12 +127,16 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     cursor: pointer;
   }
 
-  @include cp-radio-style(colors.$secondary-color, 'Blue');
-  @include cp-radio-style(colors.$primary-color, 'Purple');
+  @include cp-radio-style(var(--cp-foreground-accent-primary), 'Accent');
+
+  @include cp-radio-style(var(--cp-foreground-blue-primary), 'Blue');
+
+  @include cp-radio-style(var(--cp-foreground-accent-primary), 'Purple'); // TODO: Sould be replace by ACCENT
 
   &--isDisabled {
-    background-color: colors.$neutral-light-1;
-    color: colors.$neutral-dark-1;
+    background-color: var(--cp-background-disabled);
+    color: var(--cp-foreground-disabled);
+    border-color: var(--cp-border-disabled);
 
     &,
     * {
@@ -142,25 +146,25 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     &:hover,
     &:focus {
       box-shadow: none;
-      border-color: colors.$neutral-dark-4;
+      border-color: var(--cp-border-disabled);
     }
   }
 
   &--isActive#{&}--isDisabled,
   &--isActive#{&}--isDisabled:hover {
-    border-color: colors.$neutral-dark-4;
+    border-color: var(--cp-border-disabled);
   }
 
   &:not(:last-of-type) {
-    margin-bottom: sp.$space-md;
+    margin-bottom: var(--cp-spacing-lg);
   }
 
   input {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: 100%;
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-full);
     padding: 25%;
     width: $cp-radio-base-width;
     height: $cp-radio-base-width;
@@ -171,8 +175,8 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
       display: flex;
       width: 100%;
       height: 100%;
-      border-radius: 100%;
-      background-color: colors.$neutral-light;
+      border-radius: var(--cp-radius-full);
+      background-color: var(--cp-background-primary);
       transition: transform 0.15s linear;
       transform: scale(0);
     }
@@ -186,14 +190,18 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     }
 
     &:checked:disabled {
-      border-color: colors.$neutral-dark-1;
-      background-color: colors.$neutral-dark-1;
+      border-color: var(--cp-border-disabled);
+      background-color: var(--cp-background-disabled);
+    }
+
+    &:checked:disabled:before {
+      background-color: var(--cp-foreground-disabled);
     }
 
     &:checked:disabled ~ span .cpRadio {
       &__label,
       &__additionalData {
-        color: colors.$neutral-dark-1;
+        color: var(--cp-foreground-disabled);
       }
     }
   }
@@ -211,12 +219,12 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
     justify-content: space-between;
     flex-wrap: wrap;
     text-transform: capitalize;
-    margin: 0 (-(sp.$space));
+    margin: 0 calc(var(--cp-spacing-md) * -1);
   }
 
   &__label,
   &__description {
-    margin: 0 sp.$space;
+    margin: 0 var(--cp-spacing-md);
     flex-grow: 1;
   }
 
@@ -227,7 +235,7 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
 
   &__description,
   &__additionalData {
-    color: colors.$neutral-dark-1;
+    color: var(--cp-text-secondary);
   }
 
   &__label {
@@ -236,7 +244,7 @@ const computedClasses = ({ value, disabled }: { disabled?: boolean; value: strin
 
   &__additionalData {
     text-align: right;
-    margin-left: sp.$space-lg;
+    margin-left: var(--cp-spacing-xl);
   }
 }
 </style>

package/src/components/CpSelect.vue

@@ -122,22 +122,25 @@ const handleChange = (e: Event): void => {
   position: relative;
 
   &:has(.cpSelect__help, .cpSelect__error) .cpSelect__container {
-    margin-bottom: sp.$space;
+    margin-bottom: var(--cp-spacing-md);
   }
 
   &__container {
     position: relative;
 
     &:after {
-      @include mx.square-sizing(16);
+      width: var(--cp-dimensions-4);
+      height: var(--cp-dimensions-4);
 
       content: '';
       position: absolute;
-      right: fn.px-to-em(12);
+      right: var(--cp-dimensions-3);
       top: 50%;
       transform: translateY(-50%);
-      background-image: url('@/assets/images/icons/chevron-down-icon.svg');
-      background-size: cover;
+      background-color: var(--cp-foreground-secondary);
+      mask-image: url('@/assets/images/icons/chevron-down-icon.svg');
+      mask-size: cover;
+      mask-repeat: no-repeat;
       pointer-events: none;
     }
   }
@@ -145,40 +148,46 @@ const handleChange = (e: Event): void => {
   &__inner {
     @extend %u-text-ellipsis;
 
-    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+    box-shadow:
+      var(--cp-shadows-3xs),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     appearance: none;
     border: none;
-    border-radius: fn.px-to-rem(8);
-    background-color: colors.$neutral-light;
+    border-radius: var(--cp-radius-md);
+    background-color: var(--cp-background-primary);
     width: 100%;
-    color: colors.$neutral-dark;
+    color: var(--cp-foreground-primary);
     cursor: pointer;
-    padding: sp.$space calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space}) sp.$space sp.$space-lg;
-    line-height: fn.px-to-rem(24);
-    font-size: fn.px-to-rem(14);
+    padding: var(--cp-spacing-md)
+      calc(var(--cp-spacing-lg) + var(--cp-spacing-sm) + var(--cp-dimensions-4) + var(--cp-spacing-md))
+      var(--cp-spacing-md) var(--cp-spacing-xl);
+    line-height: var(--cp-line-height-md);
+    font-size: var(--cp-text-size-sm);
 
     &:hover {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
+      box-shadow:
+        var(--cp-shadows-3xs),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
     }
 
     &:focus {
-      outline: fn.px-to-rem(2) solid colors.$primary-color;
-      background-color: colors.$neutral-light;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
+      background-color: var(--cp-background-primary);
     }
   }
 
   &__help,
   &__error {
-    font-size: fn.px-to-em(14);
-    line-height: fn.px-to-rem(24);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
   }
 
   &__help {
-    color: colors.$neutral-dark-1;
+    color: var(--cp-text-secondary);
   }
 
   &__error {
-    color: colors.$error-color;
+    color: var(--cp-foreground-error-primary);
 
     &::first-letter {
       text-transform: capitalize;
@@ -187,18 +196,19 @@ const handleChange = (e: Event): void => {
 
   &--isDisabled {
     .cpSelect__inner {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$neutral-dark-4;
-      background: colors.$neutral-light-1;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
+      background: var(--cp-background-disabled);
     }
 
     .cpSelect__inner,
     .cpSelect__container:after {
       cursor: not-allowed;
-      color: colors.$neutral-dark-2;
+      color: var(--cp-text-disabled);
+      opacity: 1;
     }
 
     .cpSelect__container:after {
-      opacity: 0.4;
+      background-color: var(--cp-foreground-disabled);
     }
   }
 
@@ -206,29 +216,32 @@ const handleChange = (e: Event): void => {
     .cpSelect__inner,
     .cpSelect__inner:hover,
     .cpSelect__inner:focus {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$error-color;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
     }
 
     .cpSelect__inner:focus {
-      outline: fn.px-to-rem(2) solid colors.$error-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
     }
   }
 
   &--sm {
     .cpSelect__inner {
-      padding: sp.$space-sm calc(sp.$space-xl + fn.px-to-rem(12)) sp.$space-sm sp.$space-md;
+      padding: var(--cp-spacing-sm) calc(var(--cp-spacing-2xl) + var(--cp-dimensions-3)) var(--cp-spacing-sm)
+        var(--cp-spacing-lg);
     }
   }
 
   &--lg {
     .cpSelect__inner {
-      border-radius: fn.px-to-rem(10);
-      font-size: fn.px-to-rem(16);
-      padding: sp.$space-md calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm}) sp.$space-md sp.$space-lg;
+      border-radius: var(--cp-radius-md-lg);
+      font-size: var(--cp-text-size-md);
+      padding: var(--cp-spacing-lg) calc(var(--cp-spacing-xl) + var(--cp-dimensions-5) + var(--cp-spacing-sm))
+        var(--cp-spacing-lg) var(--cp-spacing-xl);
     }
 
     .cpSelect__container:after {
-      @include mx.square-sizing(20);
+      width: var(--cp-dimensions-5);
+      height: var(--cp-dimensions-5);
     }
   }
 }