@citizenplane/pimp 10.0.8 → 10.1.0

package/src/components/CpTabs.vue

@@ -130,13 +130,13 @@ watch(
   position: relative;
   display: flex;
   align-items: center;
-  gap: fn.v(spacing-md);
+  gap: var(--cp-spacing-md);
 
   &__activeUnderline {
     position: absolute;
     bottom: 0;
     left: 0;
-    height: fn.px-to-rem(2);
+    height: var(--cp-dimensions-0_5);
     transition:
       background-color 300ms ease,
       transform 300ms cubic-bezier(0.34, 1.26, 0.64, 1),
@@ -149,17 +149,17 @@ watch(
     position: relative;
     display: flex;
     align-items: center;
-    padding: fn.v(spacing-md);
-    border-radius: fn.px-to-rem(8);
-    color: fn.v(text-secondary);
-    gap: fn.v(spacing-sm);
+    padding: var(--cp-spacing-md);
+    border-radius: var(--cp-radius-md);
+    color: var(--cp-text-secondary);
+    gap: var(--cp-spacing-sm);
     -webkit-tap-highlight-color: transparent;
     transition:
       box-shadow 300ms ease,
       opacity 300ms ease;
 
     &:focus-visible {
-      outline-offset: fn.px-to-rem(-2);
+      outline-offset: calc(var(--cp-dimensions-0_5) * -1);
     }
 
     &--isLoading {
@@ -168,19 +168,19 @@ watch(
     }
 
     &--isActive {
-      color: fn.v(text-accent-primary);
+      color: var(--cp-text-accent-primary);
     }
 
     &--isActive ~ .cpTabs__activeUnderline {
-      background-color: fn.v(border-accent-solid);
+      background-color: var(--cp-border-accent-solid);
     }
   }
 
   &__title {
-    font-size: fn.px-to-em(14);
+    font-size: var(--cp-text-size-sm);
     font-weight: 500;
-    line-height: fn.px-to-rem(24);
-    padding-inline: fn.v(spacing-sm);
+    line-height: var(--cp-line-height-md);
+    padding-inline: var(--cp-spacing-sm);
     transition: color 300ms ease;
     white-space: nowrap;
   }
@@ -192,20 +192,20 @@ watch(
   &__icon {
     position: relative;
     display: flex;
-    border-radius: fn.px-to-rem(4);
+    border-radius: var(--cp-radius-sm);
   }
 }
 
 @include mx.media-query-max(768px) {
   .cpTabs {
-    margin-right: sp.$space-lg;
+    margin-right: var(--cp-spacing-xl);
     overflow-x: auto;
 
     &__activeUnderline {
       top: auto;
       bottom: auto;
       height: 100%;
-      border-radius: var(--pimp-radius-md);
+      border-radius: var(--cp-radius-md);
       opacity: 0.14;
     }
   }

package/src/components/CpTelInput.vue

@@ -166,7 +166,7 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   flex-direction: column;
 
   &:has(.cpTelInput__help, .cpTelInput__error) .cpTelInput__container {
-    margin-bottom: sp.$space;
+    margin-bottom: var(--cp-spacing-md);
   }
 
   &__container {
@@ -177,22 +177,24 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
 
   &__wrapper {
     border: none;
-    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-radius: fn.px-to-rem(10);
+    border-radius: var(--cp-radius-md-lg);
     width: 100%;
     color: inherit;
 
     &:focus-within {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
     }
 
     &:not(.cpTelInput__wrapper--isInvalid, .cpTelInput__wrapper--isDisabled):hover {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
     }
 
     &--isInvalid {
-      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);
     }
 
     &.disabled {
@@ -201,75 +203,76 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   }
 
   &__input {
-    padding: sp.$space sp.$space-lg;
+    padding: var(--cp-spacing-md) var(--cp-spacing-xl);
     color: inherit;
-    line-height: fn.px-to-rem(24);
-    font-size: fn.px-to-rem(14);
-    border-top-right-radius: fn.px-to-rem(10);
-    border-bottom-right-radius: fn.px-to-rem(10);
+    line-height: var(--cp-line-height-md);
+    font-size: var(--cp-text-size-sm);
+    border-top-right-radius: var(--cp-radius-md-lg);
+    border-bottom-right-radius: var(--cp-radius-md-lg);
 
     &:is(:hover, :focus) {
       z-index: 1;
     }
 
     &:not(.cpTelInput__input--isInvalid, .cpTelInput__input--isDisabled):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-border-accent-solid);
+      background-color: var(--cp-background-primary);
     }
 
     &::placeholder {
-      color: colors.$neutral-dark-1;
+      color: var(--cp-text-placeholder);
     }
 
     &--isDisabled {
       pointer-events: none;
-      background-color: colors.$neutral-light-1;
+      background-color: var(--cp-background-disabled);
     }
   }
 
   &__input--isInvalid {
     &:focus {
-      outline: fn.px-to-rem(2) solid colors.$error-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
     }
 
     .cpTelInput__input:focus {
-      outline: fn.px-to-rem(2) solid colors.$error-color;
-      box-shadow: 0 0 0 fn.px-to-em(1) color.scale(colors.$error-color, $lightness: 60%);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) solid var(--cp-border-error-solid);
     }
   }
 
   &__arrow,
   &__searchIcon {
-    color: colors.$neutral-dark-1;
+    color: var(--cp-foreground-secondary);
     transition: transform 150ms ease;
   }
 
   .vti__dropdown.open .cpTelInput__arrow {
     transform: rotate(180deg);
+    color: var(--cp-foreground-primary);
   }
 
   .vti__dropdown {
     z-index: 1;
     position: unset;
-    border-right: fn.px-to-rem(1) solid colors.$neutral-dark-5;
+    border-right: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
 
     &:focus,
     &:focus-within {
       z-index: 2;
-      outline: fn.px-to-rem(2) solid colors.$primary-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
   }
 
   &__wrapper--isInvalid {
     .vti__dropdown:focus,
     .vti__dropdown:focus-within {
-      outline: fn.px-to-rem(2) solid colors.$error-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
     }
   }
 
   &__wrapper--isDisabled {
-    background-color: colors.$neutral-light-1;
-    color: colors.$neutral-dark-1;
+    background-color: var(--cp-background-disabled);
+    color: var(--cp-foreground-disabled);
     cursor: not-allowed;
 
     .vti__dropdown:focus {
@@ -278,7 +281,7 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   }
 
   .vti__selection {
-    gap: sp.$space;
+    gap: var(--cp-spacing-md);
 
     .vti__flag {
       margin: 0;
@@ -286,89 +289,92 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   }
 
   .vti__flag {
-    max-width: fn.px-to-rem(20);
-    border-radius: fn.px-to-rem(2);
+    max-width: var(--cp-dimensions-5);
+    border-radius: var(--cp-radius-xs);
   }
 
   .vti__dropdown {
-    padding: sp.$space sp.$space sp.$space sp.$space-md;
-    border-bottom-left-radius: fn.px-to-rem(10);
-    border-top-left-radius: fn.px-to-rem(10);
+    padding: var(--cp-spacing-md) var(--cp-spacing-md) var(--cp-spacing-md) var(--cp-spacing-lg);
+    border-bottom-left-radius: var(--cp-radius-md-lg);
+    border-top-left-radius: var(--cp-radius-md-lg);
   }
 
   .vti__search_box_container {
     position: sticky;
     top: 0;
     display: flex;
-    margin-bottom: sp.$space-sm;
+    margin-bottom: var(--cp-spacing-sm);
   }
 
   .vti__search_box {
-    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-radius: fn.px-to-rem(6);
+    border-radius: var(--cp-radius-sm-md);
     width: 100%;
     color: inherit;
-    padding: sp.$space-sm sp.$space-sm sp.$space-sm sp.$space;
-    line-height: fn.px-to-rem(24);
-    font-size: fn.px-to-rem(14);
-    text-indent: fn.px-to-rem(28);
+    padding: var(--cp-spacing-sm) var(--cp-spacing-sm) var(--cp-spacing-sm) var(--cp-spacing-md);
+    line-height: var(--cp-line-height-md);
+    font-size: var(--cp-text-size-sm);
+    text-indent: calc(var(--cp-dimensions-1) * 7);
     border: none;
 
     &:hover {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
+      box-shadow: 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-border-accent-solid);
+      background-color: var(--cp-background-primary);
     }
 
     &::placeholder {
-      color: colors.$neutral-dark-1;
+      color: var(--cp-text-placeholder);
     }
   }
 
   &__searchIcon {
-    @include mx.square-sizing(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
 
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: fn.px-to-rem(12);
+    left: var(--cp-dimensions-3);
   }
 
   .vti__dropdown-list {
-    clip-path: inset(0 round fn.px-to-rem(10));
-    max-height: fn.px-to-rem(130);
-    width: calc(100% + fn.px-to-rem(2));
-    padding: sp.$space-sm;
-    border-radius: fn.px-to-rem(10);
-    border: fn.px-to-rem(1) solid colors.$border-color;
+    clip-path: inset(0 round var(--cp-radius-md-lg));
+    max-height: calc(var(--cp-dimensions-1) * 32.5);
+    width: calc(100% + var(--cp-dimensions-0_5));
+    padding: var(--cp-spacing-sm);
+    border-radius: var(--cp-radius-md-lg);
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
 
     &:has(.vti__search_box) {
-      max-height: fn.px-to-rem(170);
+      max-height: calc(var(--cp-dimensions-1) * 42.5);
     }
 
     &.below {
-      top: fn.px-to-rem(40) + sp.$space;
+      top: var(--cp-dimensions-10) + var(--cp-spacing-md);
     }
 
     &.above {
-      bottom: calc(100% + fn.px-to-rem(8));
+      bottom: calc(100% + var(--cp-dimensions-2));
     }
   }
 
   .vti__dropdown-item {
-    padding: sp.$space-md sp.$space-lg sp.$space-md sp.$space-md;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl) var(--cp-spacing-lg) var(--cp-spacing-lg);
     display: flex;
     align-items: flex-start;
-    border-radius: fn.px-to-rem(6);
-    font-size: fn.px-to-rem(14);
-    line-height: fn.px-to-rem(24);
+    border-radius: var(--cp-radius-sm-md);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
 
     .vti__flag {
-      margin: auto sp.$space-lg auto 0;
+      margin: auto var(--cp-spacing-xl) auto 0;
     }
 
     strong,
@@ -383,50 +389,50 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
     }
 
     span:not(.vti__flag) {
-      margin-left: 4px;
+      margin-left: var(--cp-spacing-sm);
     }
   }
 
   &--lg {
     .cpTelInput__input {
-      font-size: fn.px-to-rem(16);
-      padding: sp.$space-md sp.$space-lg;
+      font-size: var(--cp-text-size-md);
+      padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
     }
 
     .vti__dropdown {
-      padding: sp.$space-md sp.$space sp.$space-md sp.$space-md;
+      padding: var(--cp-spacing-lg) var(--cp-spacing-md) var(--cp-spacing-lg) var(--cp-spacing-lg);
     }
 
     .vti__search_box {
-      padding: sp.$space sp.$space-lg;
-      text-indent: fn.px-to-rem(24);
+      padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+      text-indent: var(--cp-dimensions-6);
     }
 
     .cpTelInput__searchIcon {
-      left: fn.px-to-rem(16);
+      left: var(--cp-dimensions-4);
     }
 
     .vti__dropdown-list.below {
-      top: fn.px-to-rem(48) + sp.$space;
+      top: var(--cp-dimensions-12) + var(--cp-spacing-md);
     }
 
     .vti__dropdown-item {
-      font-size: fn.px-to-rem(16);
+      font-size: var(--cp-text-size-md);
     }
   }
 
   &__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-text-error-primary-hover);
 
     &::first-letter {
       text-transform: capitalize;

package/src/components/CpTextarea.vue

@@ -90,53 +90,63 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
 
   &__input {
     appearance: none;
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-em(10);
+    border: none;
+    box-shadow:
+      var(--cp-shadows-3xs),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+    border-radius: var(--cp-radius-md-lg);
     outline: none;
-    padding: fn.px-to-em(16);
+    padding: var(--cp-spacing-xl);
     width: 100%;
     max-width: 100%;
     height: 100%;
-    font-size: fn.px-to-em(16);
-    color: colors.$neutral-dark;
+    font-size: var(--cp-text-size-md);
+    color: var(--cp-text-primary);
 
     &:hover {
-      border-color: 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);
     }
 
     &:disabled {
-      background: colors.$neutral-light-1;
       cursor: not-allowed;
-      color: colors.$neutral-dark-1;
+      background: var(--cp-background-disabled);
+      color: var(--cp-text-disabled);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
     }
 
     &::placeholder {
-      color: rgba(colors.$neutral-dark, 0.6);
+      color: var(--cp-text-placeholder);
     }
 
     &--isInvalid {
-      border: fn.px-to-rem(1) solid colors.$error-color;
+      box-shadow:
+        var(--cp-shadows-3xs),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
 
       &:hover,
       &:focus {
-        border: fn.px-to-rem(1) solid colors.$error-color;
+        box-shadow:
+          var(--cp-shadows-3xs),
+          0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
       }
 
       &:focus {
-        outline: fn.px-to-rem(2) solid colors.$error-color;
+        outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
       }
     }
   }
 
   &__error {
-    font-size: fn.px-to-em(14);
-    line-height: fn.px-to-rem(24);
-    color: colors.$error-color;
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
+    color: var(--cp-text-error-primary);
   }
 }
 </style>