@citizenplane/pimp 10.0.8 → 10.1.0

package/src/components/CpInput.vue

@@ -192,7 +192,7 @@ onMounted(async () => {
   flex-direction: column;
 
   &:has(.cpInput__help, .cpInput__error) .cpInput__container {
-    margin-bottom: sp.$space;
+    margin-bottom: var(--cp-spacing-md);
   }
 
   &__container {
@@ -206,26 +206,32 @@ onMounted(async () => {
   }
 
   &__inner {
-    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
+    box-shadow:
+      var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur) -1px
+        var(--cp-drop-shadow-3xs-color),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     appearance: none;
-    border-radius: fn.px-to-rem(8);
+    border-radius: var(--cp-radius-md);
     width: 100%;
     color: inherit;
-    padding: sp.$space sp.$space-lg;
-    line-height: fn.px-to-rem(24);
-    font-size: fn.px-to-rem(14);
+    padding: 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-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur) -1px
+          var(--cp-drop-shadow-3xs-color),
+        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);
     }
 
     &::placeholder {
-      color: colors.$neutral-dark-1;
+      color: var(--cp-text-placeholder);
     }
   }
 
@@ -234,33 +240,35 @@ onMounted(async () => {
     .cpInput__inner:hover,
     .cpInput__inner:focus,
     .cpInput__icon:hover ~ .cpInput__inner {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$error-color;
+      box-shadow:
+        var(--cp-drop-shadow-3xs-offset-x) var(--cp-drop-shadow-3xs-offset-y) var(--cp-drop-shadow-3xs-blur) -1px
+          var(--cp-drop-shadow-3xs-color),
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
     }
 
     .cpInput__inner: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);
     }
   }
 
   &--isDisabled {
-    color: colors.$neutral-dark-2;
+    color: var(--cp-foreground-disabled);
 
     .cpInput__container * {
       cursor: not-allowed;
     }
 
     .cpInput__inner {
-      background: colors.$neutral-light-1;
+      background: var(--cp-background-disabled);
     }
 
     .cpInput__inner,
     .cpInput__inner:hover {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$neutral-dark-4;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
     }
 
     .cpInput__icon:hover ~ .cpInput__inner {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$neutral-dark-4;
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
     }
   }
 
@@ -273,11 +281,12 @@ onMounted(async () => {
   }
 
   &__icon {
-    @include mx.square-sizing(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
 
     display: flex;
     align-items: center;
-    left: fn.px-to-rem(14);
+    left: var(--cp-dimensions-3_5);
     z-index: 1;
     position: absolute;
     top: 50%;
@@ -285,7 +294,7 @@ onMounted(async () => {
     overflow: hidden;
 
     &:hover ~ .cpInput__inner {
-      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-foreground-accent-primary);
     }
 
     svg {
@@ -296,81 +305,82 @@ onMounted(async () => {
 
     &--isBefore,
     &--isAfter {
-      font-size: fn.px-to-rem(14);
+      font-size: var(--cp-text-size-sm);
     }
 
     &--isAfter {
       left: auto;
-      right: fn.px-to-rem(14);
+      right: var(--cp-dimensions-3_5);
     }
 
     &--isBefore ~ input {
-      padding-left: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
+      padding-left: calc(var(--cp-spacing-lg) + var(--cp-spacing-sm) + var(--cp-dimensions-4) + var(--cp-spacing-md));
     }
   }
 
   &:has(.cpInput__icon--isAfter) input {
-    padding-right: calc(#{sp.$space-md} + #{sp.$space-sm} + #{fn.px-to-rem(16) + sp.$space});
+    padding-right: calc(var(--cp-spacing-lg) + var(--cp-spacing-sm) + var(--cp-dimensions-4) + var(--cp-spacing-md));
   }
 
   &--lg {
     .cpInput__inner {
-      border-radius: fn.px-to-rem(10);
-      padding: sp.$space-md sp.$space-lg;
-      font-size: fn.px-to-rem(16);
+      border-radius: var(--cp-radius-md-lg);
+      padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-md);
     }
 
     .cpInput__icon {
-      @include mx.square-sizing(20);
+      width: var(--cp-dimensions-5);
+      height: var(--cp-dimensions-5);
 
-      left: fn.px-to-rem(12);
+      left: var(--cp-spacing-lg);
     }
 
     .cpInput__icon--isBefore,
     .cpInput__icon--isAfter {
-      font-size: fn.px-to-rem(16);
+      font-size: var(--cp-text-size-md);
     }
 
     .cpInput__icon--isAfter {
       left: auto;
-      right: fn.px-to-rem(12);
+      right: var(--cp-spacing-lg);
     }
 
     .cpInput__icon--isAfter ~ input {
-      padding-right: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
+      padding-right: calc(var(--cp-spacing-xl) + var(--cp-dimensions-5) + var(--cp-spacing-sm));
     }
 
     .cpInput__icon--isBefore ~ input {
-      padding-left: calc(#{sp.$space-lg} + #{fn.px-to-rem(20)} + #{sp.$space-sm});
+      padding-left: calc(var(--cp-spacing-xl) + var(--cp-dimensions-5) + var(--cp-spacing-sm));
     }
   }
 
   &--sm {
     .cpInput__inner {
-      padding: sp.$space-sm sp.$space-md;
-      font-size: fn.px-to-rem(14);
+      padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
+      font-size: var(--cp-text-size-sm);
     }
 
     .cpInput__icon {
-      left: fn.px-to-rem(10);
+      left: var(--cp-dimensions-2_5);
     }
 
     .cpInput__icon--isBefore,
     .cpInput__icon--isAfter {
-      font-size: fn.px-to-rem(12);
+      font-size: var(--cp-text-size-xs);
     }
 
     .cpInput__icon--isAfter {
       left: auto;
-      right: fn.px-to-rem(10);
+      right: var(--cp-dimensions-2_5);
     }
 
     .cpInput__icon--isBefore ~ input {
-      padding-left: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
+      padding-left: calc(var(--cp-spacing-md) + var(--cp-dimensions-5) + var(--cp-spacing-md));
     }
 
     .cpInput__icon--isAfter ~ input {
-      padding-right: calc(#{sp.$space-sm * 2} + #{fn.px-to-rem(20) + sp.$space});
+      padding-right: calc(var(--cp-spacing-md) + var(--cp-dimensions-5) + var(--cp-spacing-md));
     }
   }
 
@@ -390,40 +400,49 @@ onMounted(async () => {
 
     .cpInput__clear {
       display: flex;
-      color: colors.$neutral-light;
-      padding: sp.$space-xs;
-      border-radius: 50%;
-      background-color: colors.$neutral-dark-1;
+      color: var(--cp-foreground-secondary);
+      padding: var(--cp-spacing-sm);
+      width: var(--cp-dimensions-6);
+      height: var(--cp-dimensions-6);
+      border-radius: var(--cp-radius-full);
+      background-color: transparent;
+
+      &:hover {
+        color: var(--cp-foreground-secondary-hover);
+        background-color: var(--cp-background-primary-hover);
+      }
 
       &:focus-visible {
-        outline: fn.px-to-rem(2) solid colors.$primary-color;
-        outline-offset: fn.px-to-rem(1);
+        outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
+        outline-offset: var(--cp-dimensions-0_25);
       }
     }
 
     .cpInput__clearIcon {
-      @include mx.square-sizing(12);
+      width: var(--cp-dimensions-4);
+      height: var(--cp-dimensions-4);
 
       pointer-events: none;
     }
 
     &.cpInput--lg .cpInput__clearIcon {
-      @include mx.square-sizing(16);
+      width: var(--cp-dimensions-4);
+      height: var(--cp-dimensions-4);
     }
   }
 
   &__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);
 
     &::first-letter {
       text-transform: capitalize;

package/src/components/CpItemActions.vue

@@ -63,19 +63,19 @@ const slicedActions = computed(() => {
 <style lang="scss">
 .cpItemActions {
   position: absolute;
-  right: sp.$space-md;
+  right: var(--cp-spacing-lg);
   top: 50%;
-  transform: translate3d(fn.px-to-rem(5), -50%, 0);
+  transform: translate3d(calc(var(--cp-dimensions-1) * 1.25), -50%, 0);
   transition:
     transform 150ms ease,
     opacity 150ms ease;
 
   &__buttonGroup {
-    background-color: colors.$neutral-light;
+    background-color: var(--cp-background-primary);
   }
 
   .cpMenuItem__button {
-    padding: sp.$space-xs sp.$space-sm;
+    padding: var(--cp-spacing-xs) var(--cp-spacing-sm);
   }
 }
 

package/src/components/CpLoader.vue

@@ -46,7 +46,7 @@ interface Props {
   size?: number | string
 }
 
-const props = withDefaults(defineProps<Props>(), { color: Colors.PURPLE, size: 24 })
+const props = withDefaults(defineProps<Props>(), { color: Colors.ACCENT, size: 24 })
 
 const capitalizedColor = computed(() => capitalizeFirstLetter(props.color))
 
@@ -68,11 +68,18 @@ const sizeAttrs = computed(() => ({
 }
 
 .cpLoader {
-  @include cp-loader-themed('Blue', colors.$secondary-color);
-  @include cp-loader-themed('Purple', colors.$primary-color);
-  @include cp-loader-themed('Green', colors.$success-color);
-  @include cp-loader-themed('Orange', colors.$warning-color);
-  @include cp-loader-themed('Red', colors.$error-color);
-  @include cp-loader-themed('Yellow', colors.$yellow);
+  @include cp-loader-themed('Neutral', var(--cp-utility-neutral-500));
+  @include cp-loader-themed('Accent', var(--cp-foreground-accent-primary));
+  @include cp-loader-themed('Error', var(--cp-foreground-error-secondary));
+  @include cp-loader-themed('Warning', var(--cp-foreground-warning-secondary));
+  @include cp-loader-themed('Success', var(--cp-foreground-success-secondary));
+
+  @include cp-loader-themed('Blue', var(--cp-foreground-blue-secondary));
+  @include cp-loader-themed('Yellow', var(--cp-utility-yellow-300));
+
+  @include cp-loader-themed('Purple', var(--cp-text-accent-primary)); // TODO: Should be replace by ACCENT
+  @include cp-loader-themed('Green', var(--cp-text-success-primary)); // TODO: Should be replace by SUCCESS
+  @include cp-loader-themed('Orange', var(--cp-text-warning-primary)); // TODO: Should be replace by WARNING
+  @include cp-loader-themed('Red', var(--cp-text-error-primary)); // TODO: Should be replace by ERROR
 }
 </style>

package/src/components/CpMenuItem.vue

@@ -79,8 +79,10 @@ const handleItemClick = async (event: Event) => {
 
 <style lang="scss">
 .cpMenuItem {
+  padding: 0 var(--cp-spacing-sm);
+
   > * {
-    padding: sp.$space sp.$space-md;
+    padding: var(--cp-spacing-md) var(--cp-spacing-md);
   }
 
   &__button {
@@ -88,15 +90,19 @@ const handleItemClick = async (event: Event) => {
     @extend %u-text-ellipsis;
 
     [data-p-focused='true'] & {
-      background-color: colors.$neutral-light-1;
+      background-color: var(--cp-background-primary-hover);
+    }
+
+    [data-p-focused='true'] &--isCritical {
+      background-color: var(--cp-background-error-primary-hover);
     }
 
     position: relative;
     display: flex;
     width: 100%;
     align-items: center;
-    gap: sp.$space;
-    line-height: fn.px-to-rem(20);
+    gap: var(--cp-spacing-md);
+    line-height: var(--cp-line-height-sm);
     text-align: start;
 
     &--reverseLabel {
@@ -104,7 +110,7 @@ const handleItemClick = async (event: Event) => {
     }
 
     &:disabled {
-      color: colors.$neutral-dark-2;
+      color: var(--cp-foreground-disabled);
       cursor: not-allowed;
     }
 
@@ -117,19 +123,17 @@ const handleItemClick = async (event: Event) => {
 
     &:hover:not(:disabled):not(#{&}--isCritical),
     &:focus-visible:not(:disabled):not(#{&}--isCritical) {
-      background-color: colors.$neutral-light-1;
-      color: colors.$primary-color;
+      background-color: var(--cp-background-primary-hover);
+      color: var(--cp-foreground-primary);
     }
 
-    &--isCritical,
-    &--isCritical:hover:not(:disabled),
-    &--isCritical:focus-visible:not(:disabled) {
-      color: colors.$error-color;
-    }
+    &--isCritical {
+      color: var(--cp-foreground-error-primary);
 
-    &--isCritical:hover:not(:disabled),
-    &--isCritical:focus-visible:not(:disabled) {
-      background-color: color.scale(colors.$error-color, $lightness: 86%);
+      &:is(:hover, :focus-visible):not(:disabled) {
+        background-color: var(--cp-background-error-primary-hover);
+        color: var(--cp-foreground-error-primary-hover);
+      }
     }
   }
 
@@ -140,7 +144,8 @@ const handleItemClick = async (event: Event) => {
 
   &__icon,
   &__loaderWrapper {
-    @include mx.square-sizing(16);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
   }
 
   &__button:is(:hover, :focus-visible) &__icon {
@@ -159,7 +164,8 @@ const handleItemClick = async (event: Event) => {
   }
 
   &__loader {
-    @include mx.square-sizing(22);
+    width: calc(var(--cp-dimensions-1) * 5.5);
+    height: calc(var(--cp-dimensions-1) * 5.5);
   }
 }
 </style>