@citizenplane/pimp 10.0.7 → 10.1.0

package/src/components/CpCheckbox.vue

@@ -55,7 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   checkboxValue: '',
   checkboxLabel: '',
   groupName: '',
-  color: ToggleColors.BLUE,
+  color: ToggleColors.ACCENT,
   helper: '',
 })
 
@@ -132,7 +132,7 @@ const onChange = () => {
 </script>
 
 <style lang="scss">
-@mixin cp-checkbox-style($color, $className) {
+@mixin cp-checkbox-style($color, $bgHoverColor, $className) {
   &--is#{$className} input:checked,
   &--is#{$className} input:indeterminate {
     background-color: $color;
@@ -140,43 +140,49 @@ const onChange = () => {
   }
 
   &--is#{$className}:hover input {
-    background-color: color.scale($color, $lightness: 95%);
+    background-color: var(--cp-background-primary-hover);
+    border-color: var(--cp-border-soft-hover);
   }
 
   &--is#{$className}:hover input:checked,
   &--is#{$className}:hover input:indeterminate {
-    background-color: color.adjust($color, $lightness: -10%);
+    background-color: $bgHoverColor;
+    border-color: $bgHoverColor;
   }
 
   &--is#{$className} input:focus-visible {
     position: relative;
     z-index: 1;
-    outline: fn.px-to-rem(2) solid $color;
-    outline-offset: fn.px-to-rem(2);
+    outline: var(--cp-dimensions-0_5) solid $color;
+    outline-offset: var(--cp-dimensions-0_5);
   }
 }
 
 .cpCheckbox {
-  $cp-checkbox-base-width: fn.px-to-rem(16);
-  $cp-checkbox-tick-base-width: fn.px-to-rem(12);
-
   position: relative;
   display: flex;
   align-items: flex-start;
   cursor: pointer;
 
-  @include cp-checkbox-style(colors.$secondary-color, 'Blue');
-  @include cp-checkbox-style(colors.$primary-color, 'Purple');
+  @include cp-checkbox-style(var(--cp-background-accent-solid), var(--cp-background-accent-solid-hover), 'Accent');
+
+  @include cp-checkbox-style(var(--cp-background-blue-solid), var(--cp-background-blue-solid-hover), 'Blue');
+
+  @include cp-checkbox-style(
+    var(--cp-background-accent-solid),
+    var(--cp-background-accent-solid-hover),
+    'Purple'
+  ); // TODO: Should be replace by ACCENT
 
   &:not(&--isEmpty) {
-    gap: sp.$space;
+    gap: var(--cp-spacing-md);
   }
 
   &__wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: sp.$space-sm;
+    padding: var(--cp-spacing-sm);
     flex-shrink: 0;
   }
 
@@ -184,23 +190,24 @@ const onChange = () => {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    border: fn.px-to-rem(1) solid colors.$neutral-dark-4;
-    border-radius: fn.px-to-rem(4);
-    width: $cp-checkbox-base-width;
-    height: $cp-checkbox-base-width;
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-sm);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
     flex-shrink: 0;
     cursor: pointer;
+    box-shadow: var(--cp-shadows-3xs);
     transition:
       background-color 0.1s ease-out,
       transform 0.1s linear;
-    background-color: colors.$neutral-light;
+    background-color: var(--cp-background-primary);
 
     & + i {
       position: absolute;
       z-index: 2;
-      width: $cp-checkbox-tick-base-width;
-      height: $cp-checkbox-tick-base-width;
-      color: colors.$neutral-light;
+      width: var(--cp-dimensions-3);
+      height: var(--cp-dimensions-3);
+      color: var(--cp-foreground-white);
       opacity: 0;
       transition: opacity 0.2s linear 0.1s;
     }
@@ -216,20 +223,18 @@ const onChange = () => {
     }
 
     &:disabled {
-      background-color: colors.$neutral-light-1;
+      background-color: var(--cp-background-disabled);
       cursor: not-allowed;
-
-      & ~ span {
-        color: colors.$neutral-dark-1;
-      }
+      box-shadow: none;
     }
 
-    &:checked:disabled {
-      border-color: colors.$neutral-dark-3;
-      background-color: colors.$neutral-dark-3;
+    &:checked:disabled,
+    &:indeterminate:disabled {
+      border-color: var(--cp-border-disabled);
+      background-color: var(--cp-background-disabled);
 
-      & ~ span {
-        color: colors.$neutral-dark-3;
+      & + i {
+        color: var(--cp-foreground-disabled);
       }
     }
 
@@ -242,6 +247,11 @@ const onChange = () => {
     cursor: not-allowed;
   }
 
+  &--isDisabled &__label,
+  &--isDisabled &__helper {
+    color: var(--cp-text-disabled);
+  }
+
   &--isReversed {
     flex-direction: row-reverse;
   }
@@ -253,7 +263,7 @@ const onChange = () => {
   &__label,
   &__helper {
     display: block;
-    line-height: fn.px-to-rem(24);
+    line-height: var(--cp-line-height-md);
   }
 
   &__label {
@@ -265,7 +275,7 @@ const onChange = () => {
   }
 
   &__helper {
-    color: colors.$neutral-dark-1;
+    color: var(--cp-text-secondary);
   }
 }
 </style>

package/src/components/CpContextualMenu.vue

@@ -54,14 +54,11 @@ defineExpose({ show, hide })
 
 <style lang="scss">
 .cpContextualMenu {
-  min-width: fn.px-to-rem(250);
-  padding: sp.$space 0;
-  border: 1px solid colors.$neutral-dark-4;
-  border-radius: fn.px-to-rem(10);
-  background-color: colors.$neutral-light;
-  box-shadow:
-    0 9px 24px rgba(colors.$neutral-dark, 0.2),
-    0 4px 4px rgba(colors.$neutral-dark, 0.1);
-  font-size: fn.px-to-em(14);
+  min-width: calc(var(--cp-dimensions-1) * 62.5);
+  padding: var(--cp-spacing-sm) 0;
+  border-radius: var(--cp-radius-md);
+  background-color: var(--cp-background-primary);
+  box-shadow: var(--cp-shadows-overlay);
+  font-size: var(--cp-text-size-sm);
 }
 </style>

package/src/components/CpDate.vue

@@ -282,7 +282,7 @@ watch(year, handleUpdate)
   input,
   select {
     background-color: transparent;
-    color: colors.$neutral-dark;
+    color: var(--cp-text-primary);
   }
 
   // Hide arrows from number input
@@ -307,72 +307,74 @@ watch(year, handleUpdate)
 .cpDate {
   input::placeholder,
   &__month--isEmpty {
-    color: colors.$neutral-dark;
+    color: var(--cp-text-placeholder);
   }
 
   &__inputs {
     display: flex;
-    box-shadow: 0 0 0 fn.px-to-rem(1) rgba(0, 0, 0, 0.12);
-    border-radius: fn.px-to-em(10);
+    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);
     overflow: hidden;
-    background-color: colors.$neutral-light;
+    background-color: var(--cp-background-primary);
 
     &:hover {
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
+      border-color: var(--cp-border-soft-hover);
     }
 
     &:focus-within {
-      outline: fn.px-to-rem(2) solid colors.$primary-color;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
   }
 
   &__inputs > *:not(.cpDate__divider) {
-    line-height: fn.px-to-rem(24);
+    line-height: var(--cp-line-height-md);
   }
 
   &--lg {
     .cpDate__day,
     .cpDate__year {
-      padding: sp.$space-md sp.$space-lg;
-      font-size: fn.px-to-rem(16);
+      padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-md);
     }
 
     .cpDate__month select {
-      padding: sp.$space-md fn.px-to-rem(32) sp.$space-md sp.$space-lg;
-      font-size: fn.px-to-rem(16);
+      padding: var(--cp-spacing-lg) var(--cp-dimensions-8) var(--cp-spacing-lg) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-md);
     }
   }
 
   &--md {
     .cpDate__day,
     .cpDate__year {
-      padding: sp.$space sp.$space-lg;
-      font-size: fn.px-to-rem(14);
+      padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-sm);
     }
 
     .cpDate__month select {
-      padding: sp.$space fn.px-to-rem(28) sp.$space sp.$space-md;
-      font-size: fn.px-to-rem(14);
+      padding: var(--cp-spacing-md) calc(var(--cp-dimensions-1) * 7) var(--cp-spacing-md) var(--cp-spacing-lg);
+      font-size: var(--cp-text-size-sm);
     }
   }
 
   &--sm {
     .cpDate__day,
     .cpDate__year {
-      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);
     }
 
     .cpDate__month select {
-      padding: sp.$space-sm fn.px-to-rem(32) sp.$space-sm sp.$space-md;
-      font-size: fn.px-to-rem(14);
+      padding: var(--cp-spacing-sm) var(--cp-dimensions-8) var(--cp-spacing-sm) var(--cp-spacing-lg);
+      font-size: var(--cp-text-size-sm);
     }
   }
 
   &__divider {
     flex-shrink: 0;
-    width: fn.px-to-rem(1);
-    background-color: colors.$border-color;
+    width: var(--cp-dimensions-0_25);
+    background-color: var(--cp-border-soft);
   }
 
   &__month,
@@ -388,11 +390,16 @@ watch(year, handleUpdate)
     &::after {
       position: absolute;
       top: 50%;
-      right: fn.px-to-em(12);
-      width: fn.px-to-em(20);
-      height: fn.px-to-em(20);
-      background-image: url('@/assets/images/icons/chevron-down-icon.svg');
-      background-size: cover;
+      right: var(--cp-dimensions-3);
+      width: var(--cp-dimensions-5);
+      height: var(--cp-dimensions-5);
+      background-color: var(--cp-text-secondary);
+      mask-image: url('@/assets/images/icons/chevron-down-icon.svg');
+      mask-size: cover;
+      mask-repeat: no-repeat;
+      -webkit-mask-image: url('@/assets/images/icons/chevron-down-icon.svg');
+      -webkit-mask-size: cover;
+      -webkit-mask-repeat: no-repeat;
       transform: translateY(-50%);
       content: '';
       pointer-events: none;
@@ -403,7 +410,7 @@ watch(year, handleUpdate)
       width: 100%;
       color: inherit;
       cursor: pointer;
-      line-height: fn.px-to-rem(24);
+      line-height: var(--cp-line-height-md);
 
       &:focus-visible {
         text-decoration: underline;
@@ -411,7 +418,7 @@ watch(year, handleUpdate)
     }
 
     select > option:not(:disabled) {
-      color: colors.$neutral-dark;
+      color: var(--cp-text-primary);
     }
   }
 
@@ -424,41 +431,47 @@ watch(year, handleUpdate)
   &--isInvalid {
     .cpDate__inputs,
     .cpDate__inputs:hover {
-      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-primary);
     }
 
     .cpDate__inputs:focus-within {
-      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-primary);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) color-mix(in srgb, #{var(--cp-border-error-primary)} 40%, transparent);
     }
 
     .cpDate__divider {
-      background-color: colors.$error-color;
+      background-color: var(--cp-border-error-primary);
     }
   }
 
   &--isDisabled {
     .cpDate__inputs {
-      border-color: colors.$neutral-dark-4;
-      background: colors.$neutral-light-1;
+      background: var(--cp-background-disabled);
+      border-color: var(--cp-border-disabled);
     }
 
     .cpDate__inputs *,
     input::placeholder {
-      color: colors.$neutral-dark-2 !important;
+      color: var(--cp-text-disabled) !important;
       cursor: not-allowed !important;
     }
 
+    .cpDate__month select:disabled {
+      color: var(--cp-text-disabled) !important;
+      -webkit-text-fill-color: var(--cp-text-disabled) !important;
+      opacity: 1;
+    }
+
     .cpDate__month::after {
       opacity: 0.4;
     }
   }
 
   &__errorMessage {
-    margin-top: sp.$space;
-    font-size: fn.px-to-em(14);
-    line-height: fn.px-to-rem(24);
-    color: colors.$error-color;
+    margin-top: var(--cp-spacing-md);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
+    color: var(--cp-text-error-primary);
   }
 }
 </style>

package/src/components/CpDatepicker.vue

@@ -163,7 +163,7 @@ watch(
   }
 
   &__input input:disabled {
-    background-color: colors.$neutral-light;
+    background-color: var(--cp-background-primary);
   }
 
   &__datepicker {
@@ -173,7 +173,7 @@ watch(
   }
 
   &__datepicker:not(&__datepicker--isInline) {
-    margin-top: 10px;
+    margin-top: var(--cp-dimensions-2_5);
   }
 
   @media (min-width: 350px) {
@@ -188,7 +188,7 @@ watch(
     }
 
     &__datepicker:not(&__datepicker--isInline) {
-      margin-top: 16px;
+      margin-top: var(--cp-spacing-xl);
     }
 
     // Opening transition layout adaptation

package/src/components/CpDialog.vue

@@ -94,7 +94,7 @@ $dialog-breakpoint: 550px;
   transition-duration: 300ms;
 
   @media screen and (min-width: calc(#{$dialog-breakpoint} + 1px)) {
-    padding: 10vh sp.$space * 4;
+    padding: 10vh var(--cp-dimensions-8);
   }
 
   &__dialog {
@@ -114,7 +114,7 @@ $dialog-breakpoint: 550px;
     z-index: -1;
     width: 100%;
     height: 100%;
-    background: rgba(colors.$neutral-dark, 0.86);
+    background: var(--cp-background-overlay);
     inset: 0;
     pointer-events: none;
     transition: opacity 250ms ease;
@@ -128,9 +128,9 @@ $dialog-breakpoint: 550px;
     max-height: 100%;
     flex-direction: column;
     justify-content: space-between;
-    border-radius: fn.px-to-rem(12);
-    background-color: colors.$neutral-light;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 33%);
+    border-radius: var(--cp-radius-lg);
+    background-color: var(--cp-background-primary);
+    box-shadow: var(--cp-shadows-overlay);
     -webkit-overflow-scrolling: touch;
     transition:
       transform 300ms ease,
@@ -158,29 +158,29 @@ $dialog-breakpoint: 550px;
 
   &__header {
     position: relative;
-    border-bottom: 1px solid colors.$border-color;
+    border-bottom: 1px solid var(--cp-border-soft);
   }
 
   &__close {
     position: absolute;
-    top: sp.$space-xl;
-    right: sp.$space-xl;
+    top: var(--cp-spacing-2xl);
+    right: var(--cp-spacing-2xl);
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: sp.$space-sm;
-    border-radius: fn.px-to-rem(8);
-    color: colors.$neutral-dark-1;
+    padding: var(--cp-spacing-sm);
+    border-radius: var(--cp-radius-md);
+    color: var(--cp-foreground-secondary);
     transition: 0.2s ease-in-out;
-    transform: translate(fn.px-to-rem(4), fn.px-to-rem(-4));
+    transform: translate(var(--cp-dimensions-1), calc(var(--cp-dimensions-1) * -1));
     transition-property: color, background-color;
 
     &:hover {
-      color: colors.$neutral-dark;
+      color: var(--cp-foreground-primary);
     }
 
     &:focus-visible {
-      outline: fn.px-to-em(3) solid color.scale(colors.$secondary-color, $lightness: 75%);
+      outline: calc(var(--cp-dimensions-0_5) * 1.5) solid var(--cp-focus);
     }
   }
 
@@ -192,8 +192,8 @@ $dialog-breakpoint: 550px;
 
   &__footer {
     &:not(:empty) {
-      border-top: 1px solid colors.$border-color;
-      padding: sp.$space-lg sp.$space-xl;
+      border-top: 1px solid var(--cp-border-soft);
+      padding: var(--cp-spacing-xl) var(--cp-spacing-2xl);
     }
 
     &--noBorder {
@@ -204,14 +204,14 @@ $dialog-breakpoint: 550px;
 
 @media screen and (max-width: $dialog-breakpoint) {
   .cpDialog__close {
-    top: sp.$space-lg;
-    right: sp.$space-lg;
+    top: var(--cp-spacing-xl);
+    right: var(--cp-spacing-xl);
   }
 }
 
 @media (max-width: 650px) {
   .cpDialog__footer {
-    padding: sp.$space-lg;
+    padding: var(--cp-spacing-xl);
   }
 }
 </style>

package/src/components/CpHeading.vue

@@ -31,62 +31,62 @@ defineOptions({
   }
 
   &--100 {
-    font-size: fn.px-to-rem(11);
+    font-size: var(--cp-text-size-xs);
     font-weight: 400;
-    line-height: fn.px-to-rem(16);
-    letter-spacing: fn.px-to-em(0.6);
+    line-height: var(--cp-line-height-xs);
+    letter-spacing: var(--cp-letter-spacing-sm);
   }
 
   &--200 {
-    font-size: fn.px-to-rem(12);
+    font-size: var(--cp-text-size-xs);
     font-weight: 600;
-    line-height: fn.px-to-rem(16);
+    line-height: var(--cp-line-height-xs);
   }
 
   &--300 {
-    font-size: fn.px-to-rem(12);
+    font-size: var(--cp-text-size-xs);
     font-weight: 600;
-    line-height: fn.px-to-rem(16);
+    line-height: var(--cp-line-height-xs);
   }
 
   &--400 {
-    font-size: fn.px-to-rem(14);
+    font-size: var(--cp-text-size-sm);
     font-weight: 500;
-    line-height: fn.px-to-rem(18);
+    line-height: var(--cp-line-height-sm);
   }
 
   &--500 {
-    font-size: fn.px-to-rem(16);
+    font-size: var(--cp-text-size-md);
     font-weight: 500;
-    line-height: fn.px-to-rem(20);
+    line-height: var(--cp-line-height-sm);
   }
 
   &--600 {
-    font-size: fn.px-to-rem(18);
+    font-size: var(--cp-text-size-lg);
     font-weight: 500;
-    line-height: fn.px-to-rem(23);
-    letter-spacing: fn.px-to-em(0.4);
+    line-height: var(--cp-line-height-md);
+    letter-spacing: var(--cp-letter-spacing-md);
   }
 
   &--700 {
-    font-size: fn.px-to-rem(20);
+    font-size: var(--cp-text-size-xl);
     font-weight: 500;
-    line-height: fn.px-to-rem(25);
-    letter-spacing: fn.px-to-em(0.4);
+    line-height: var(--cp-line-height-md);
+    letter-spacing: var(--cp-letter-spacing-md);
   }
 
   &--800 {
-    font-size: fn.px-to-rem(29);
+    font-size: var(--cp-text-size-3xl);
     font-weight: 500;
-    line-height: fn.px-to-rem(32);
-    letter-spacing: fn.px-to-em(0.4);
+    line-height: var(--cp-line-height-2xl);
+    letter-spacing: var(--cp-letter-spacing-md);
   }
 
   &--900 {
-    font-size: fn.px-to-rem(35);
+    font-size: var(--cp-text-size-4xl);
     font-weight: 500;
-    line-height: fn.px-to-rem(40);
-    letter-spacing: fn.px-to-em(0.4);
+    line-height: var(--cp-line-height-4xl);
+    letter-spacing: var(--cp-letter-spacing-md);
   }
 }
 </style>