@citizenplane/pimp 10.0.8 → 10.1.1

package/src/components/CpSelectMenu.vue

@@ -139,33 +139,33 @@ const isSelectedValue = (value: string): boolean => {
 <style lang="scss">
 .cpSelectMenu {
   position: relative;
-  font-size: fn.px-to-em(14);
+  font-size: var(--cp-text-size-sm);
 
   &__button {
-    box-shadow: inset 0 fn.px-to-em(1) fn.px-to-em(2) rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 var(--cp-dimensions-0_25) var(--cp-dimensions-0_5) rgba(0, 0, 0, 0.12);
     border: none;
-    outline: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-em(10);
-    background: colors.$neutral-light;
-    padding: fn.px-to-rem(8);
+    outline: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md-lg);
+    background: var(--cp-background-white);
+    padding: var(--cp-spacing-md);
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: inherit;
-    line-height: fn.px-to-rem(24);
+    line-height: var(--cp-line-height-md);
     font-weight: normal;
     text-transform: capitalize;
 
     &:hover,
     &:active,
     &:focus {
-      outline: fn.px-to-rem(1) solid colors.$secondary-color;
+      outline: var(--cp-dimensions-0_25) solid var(--cp-background-accent-solid);
     }
 
     &:focus {
-      outline: fn.px-to-rem(2) solid colors.$secondary-color;
-      box-shadow: 0 0 0 fn.px-to-em(2) color.scale(colors.$secondary-color, $lightness: 80%);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-background-accent-solid);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_5) var(--cp-background-accent-solid);
     }
   }
 
@@ -174,9 +174,9 @@ const isSelectedValue = (value: string): boolean => {
   }
 
   &__icon {
-    margin-left: fn.px-to-em(12);
-    width: fn.px-to-em(20);
-    height: fn.px-to-em(20);
+    margin-left: var(--cp-dimensions-3);
+    width: var(--cp-dimensions-5);
+    height: var(--cp-dimensions-5);
     flex-shrink: 0;
     transition: transform 0.2s ease-out;
 
@@ -188,52 +188,52 @@ const isSelectedValue = (value: string): boolean => {
   &__dropdown {
     z-index: 3;
     position: absolute;
-    top: calc(100% + 4px);
+    top: calc(100% + var(--cp-dimensions-1));
     left: 0;
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-em(10);
-    background: colors.$neutral-light;
-    width: max(100%, #{fn.px-to-rem(250)});
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md-lg);
+    background: var(--cp-background-white);
+    width: max(100%, calc(var(--cp-dimensions-1) * 62.5));
     font-size: inherit;
   }
 
   .dropdown {
     svg {
-      width: fn.px-to-em(18);
-      height: fn.px-to-em(18);
+      width: calc(var(--cp-dimensions-1) * 4.5);
+      height: calc(var(--cp-dimensions-1) * 4.5);
     }
 
     &__title {
-      padding: fn.px-to-em(12) fn.px-to-em(8);
+      padding: var(--cp-spacing-lg) var(--cp-spacing-md);
       display: flex;
       align-items: center;
       justify-content: space-between;
       white-space: normal;
       font-weight: 600;
-      color: colors.$neutral-dark;
+      color: var(--cp-text-primary);
     }
 
     &__filterBar {
-      border-top: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-      border-bottom: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-      background-color: rgba(colors.$neutral-dark-5, 0.6);
-      padding: fn.px-to-em(8);
+      border-top: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+      border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+      background-color: var(--cp-background-disabled);
+      padding: var(--cp-spacing-md);
       display: flex;
       align-items: center;
 
       & > input {
         background-color: transparent;
         flex: 1;
-        color: colors.$neutral-dark;
+        color: var(--cp-text-primary);
 
         &::placeholder {
-          color: colors.$neutral-dark-1;
+          color: var(--cp-text-secondary);
         }
       }
 
       i {
-        margin-right: fn.px-to-em(8);
-        color: colors.$neutral-dark;
+        margin-right: var(--cp-spacing-md);
+        color: var(--cp-text-primary);
         flex-shrink: 0;
       }
     }
@@ -241,13 +241,13 @@ const isSelectedValue = (value: string): boolean => {
     &__list {
       display: flex;
       flex-direction: column;
-      min-height: fn.px-to-rem(250);
+      min-height: calc(var(--cp-dimensions-1) * 62.5);
     }
 
     &__items {
-      margin: fn.px-to-em(4) 0;
+      margin: var(--cp-spacing-sm) 0;
       padding: 0;
-      max-height: fn.px-to-rem(250);
+      max-height: calc(var(--cp-dimensions-1) * 62.5);
       overflow-y: auto;
 
       li {
@@ -257,7 +257,7 @@ const isSelectedValue = (value: string): boolean => {
 
     &__item {
       position: relative;
-      padding: fn.px-to-em(8) fn.px-to-em(16) fn.px-to-em(8) fn.px-to-em(36);
+      padding: var(--cp-spacing-md) var(--cp-spacing-xl) var(--cp-spacing-md) calc(var(--cp-dimensions-1) * 9);
       width: 100%;
       display: flex;
       text-align: initial;
@@ -265,7 +265,7 @@ const isSelectedValue = (value: string): boolean => {
       text-transform: capitalize;
 
       &:hover {
-        background-color: rgba(colors.$neutral-dark-5, 0.5);
+        background-color: var(--cp-background-disabled);
       }
 
       input {
@@ -275,19 +275,19 @@ const isSelectedValue = (value: string): boolean => {
 
     &__icon {
       position: absolute;
-      left: fn.px-to-em(8);
+      left: var(--cp-spacing-md);
       top: 50%;
       transform: translateY(-50%);
-      color: colors.$secondary-color;
+      color: var(--cp-background-accent-solid);
     }
 
     &__emptyState {
-      padding: fn.px-to-em(16) fn.px-to-em(8);
+      padding: var(--cp-spacing-xl) var(--cp-spacing-md);
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
-      color: colors.$neutral-dark-1;
+      color: var(--cp-text-secondary);
     }
   }
 }

package/src/components/CpSwitch.vue

@@ -97,22 +97,22 @@ const handleClick = (value: boolean): void => {
     background-color: $color;
   }
 
-  &--is#{$className} &__switch:focus-within {
-    outline: $color solid fn.px-to-rem(3);
-    outline-offset: fn.px-to-rem(3);
+  &--is#{$className}:has(input:focus-visible) &__switch {
+    outline: $color solid calc(var(--cp-dimensions-0_5) * 1.5);
+    outline-offset: calc(var(--cp-dimensions-0_5) * 1.5);
   }
 
   &--is#{$className}:hover:not(#{&}--isDisabled) &__switch {
-    background-color: colors.$neutral-dark-1;
+    background-color: var(--cp-background-quaternary-hover);
   }
 
   &--is#{$className}#{&}--isActive:not(#{&}--isDisabled):hover &__switch {
-    background-color: colors.$purple-600;
+    background-color: $color;
   }
 }
 
 .cpSwitch {
-  $cp-switch-base-height: fn.px-to-rem(20);
+  --cp-switch-base-height: var(--cp-dimensions-5);
   align-items: center;
 
   &,
@@ -126,32 +126,40 @@ const handleClick = (value: boolean): void => {
   }
 
   &__helper {
-    color: colors.$neutral-dark-1;
-    line-height: fn.px-to-rem(24);
+    color: var(--cp-text-secondary);
+    line-height: var(--cp-line-height-md);
   }
 
   &__labelContainer {
     display: flex;
     align-items: center;
-    gap: sp.$space-sm;
+    gap: var(--cp-spacing-sm);
   }
 
   &__label {
-    line-height: fn.px-to-rem(24);
+    line-height: var(--cp-line-height-md);
   }
 
   &__tooltip {
-    color: colors.$neutral-dark-3;
-    padding: sp.$space-sm;
+    color: var(--cp-foreground-quaternary);
+    padding: var(--cp-spacing-sm);
   }
 
   &--hasLabel {
     display: grid;
     grid-template-columns: min-content 1fr;
-    grid-gap: fn.px-to-rem(12);
+    grid-gap: var(--cp-spacing-lg);
     align-items: flex-start;
   }
 
+  &--isReversed {
+    grid-template-columns: 1fr min-content;
+
+    .cpSwitch__content {
+      grid-row: 1;
+    }
+  }
+
   &--isDisabled,
   &--isDisabled:hover {
     &,
@@ -160,25 +168,25 @@ const handleClick = (value: boolean): void => {
     }
 
     .cpSwitch__switch {
-      background-color: colors.$neutral-dark-4;
+      background-color: var(--cp-background-disabled);
+      border: var(--cp-dimensions-0_25) solid var(--cp-border-disabled);
     }
-  }
 
-  &--isReversed {
-    grid-template-columns: 1fr min-content;
-
-    .cpSwitch__content {
-      grid-row: 1;
+    .cpSwitch__label,
+    .cpSwitch__helper {
+      color: var(--cp-text-disabled);
     }
-  }
 
-  &--isDisabled &__label {
-    color: colors.$neutral-dark-1;
-  }
+    .cpSwitch__knob {
+      background-color: var(--cp-foreground-disabled);
+      box-shadow: none;
+      width: calc(var(--cp-switch-base-height) * 0.5 - var(--cp-dimensions-0_5));
+      height: calc(var(--cp-switch-base-height) * 0.5 - var(--cp-dimensions-0_5));
+    }
 
-  &--isDisabled &__switch,
-  &--isDisabled:hover &__switch {
-    background-color: colors.$neutral-dark-5;
+    .cpSwitch__knobContainer {
+      padding: calc(var(--cp-switch-base-height) * 0.25 + var(--cp-dimensions-0_25));
+    }
   }
 
   &--isActive .cpSwitch {
@@ -187,18 +195,20 @@ const handleClick = (value: boolean): void => {
     }
   }
 
-  @include cp-switch-style(colors.$primary-color, 'Purple');
+  @include cp-switch-style(var(--cp-background-accent-solid), 'Accent');
+
+  @include cp-switch-style(var(--cp-background-accent-solid), 'Purple'); // TODO: Should be replace by ACCENT
 
   &__switch {
     position: relative;
-    border-radius: 1000px;
-    background-color: colors.$gray-3;
+    border-radius: var(--cp-radius-full);
+    background-color: var(--cp-background-quaternary);
     overflow: hidden;
-    transition: background-color 0.1s ease-out;
+    transition: background-color 100ms ease-out;
     display: flex;
-    height: $cp-switch-base-height;
-    width: $cp-switch-base-height * 2;
-    margin-block: sp.$space-xs;
+    height: var(--cp-switch-base-height);
+    width: calc(var(--cp-switch-base-height) * 2);
+    margin-block: var(--cp-spacing-xs);
   }
 
   input {
@@ -213,17 +223,18 @@ const handleClick = (value: boolean): void => {
 
   &__knobContainer {
     width: 100%;
-    padding: fn.px-to-rem(2);
+    padding: var(--cp-dimensions-0_5);
     display: flex;
     align-items: center;
-    transition: transform 300ms easings.$easing-elastic;
+    transition: transform 300ms var(--cp-easing-elastic);
   }
 
   &__knob {
-    background-color: colors.$neutral-light;
-    border-radius: 100%;
-    width: calc(#{$cp-switch-base-height} - #{fn.px-to-rem(4)});
-    height: calc(#{$cp-switch-base-height} - #{fn.px-to-rem(4)});
+    background-color: var(--cp-foreground-white);
+    border-radius: var(--cp-radius-full);
+    box-shadow: var(--cp-shadows-3xs);
+    width: calc(var(--cp-switch-base-height) - var(--cp-dimensions-1));
+    height: calc(var(--cp-switch-base-height) - var(--cp-dimensions-1));
   }
 }
 </style>