@citizenplane/pimp 10.0.7 → 10.1.0

package/src/components/CpButton.vue

@@ -10,7 +10,7 @@
     :type="type"
   >
     <span class="cpButton__body">
-      <span v-if="isLoading" class="cpButton__loader"><cp-loader color="#B2B2BD" /></span>
+      <span v-if="isLoading" class="cpButton__loader"><cp-loader :color="Colors.NEUTRAL" /></span>
       <span v-if="hasIconBefore" class="cpButton__icon cpButton__icon--isBefore">
         <slot name="leading-icon" />
       </span>
@@ -84,162 +84,164 @@ const dynamicClasses = computed(() => {
 </script>
 
 <style lang="scss">
-// Mixins
-@mixin cp-button-default($className, $color) {
+@mixin cp-button-default($className, $textColor, $textColorHover) {
   &--isDefault#{&}--is#{$className} {
+    background-color: var(--cp-background-primary);
+    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);
+
     &,
     &:visited {
-      color: $color;
+      color: $textColor;
+    }
+
+    &:active,
+    &:hover {
+      background-color: var(--cp-background-primary-hover);
+      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) $textColorHover;
+      color: $textColorHover;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: fn.px-to-rem(2) solid $textColorHover;
+      outline-offset: fn.px-to-rem(3);
     }
   }
 }
 
-@mixin cp-button-primary($className, $color) {
+@mixin cp-button-primary($className, $color, $hoverColor) {
   &--isPrimary#{&}--is#{$className} {
     background-color: $color;
-    box-shadow: 0 0 0 fn.px-to-rem(1) $color;
+    color: var(--cp-text-white);
 
     &:hover {
-      background-color: color.scale($color, $lightness: 7%);
-      box-shadow: 0 0 0 fn.px-to-rem(1) color.scale($color, $lightness: 7%);
+      background-color: $hoverColor;
     }
 
+    &:focus,
+    &:focus-visible,
     &:active {
-      background-color: color.scale($color, $lightness: -12%);
-      box-shadow: 0 0 0 fn.px-to-rem(1) color.scale($color, $lightness: -12%);
+      background-color: $hoverColor;
+      outline: fn.px-to-rem(2) solid $color;
     }
   }
 }
 
-@mixin cp-button-minimal($className, $color) {
+@mixin cp-button-tertiary($className, $textColor, $hoverColor) {
   &--isMinimal#{&}--is#{$className} {
+    color: $textColor;
+    box-shadow: none;
+
     &,
     &:visited {
-      color: $color;
+      color: $textColor;
     }
 
     &:hover {
-      background: color.scale($color, $lightness: 90%);
+      background: $hoverColor;
     }
 
+    &:focus,
+    &:focus-visible,
     &:active {
-      background: color.scale($color, $lightness: 80%);
-      color: color.scale($color, $lightness: -10%);
+      outline: fn.px-to-rem(2) solid $textColor;
     }
-  }
-}
 
-@mixin cp-button-style($className, $color) {
-  @include cp-button-primary($className, $color);
-  @include cp-button-minimal($className, $color);
-
-  &--isMinimal#{&}--is#{$className}:focus {
-    outline: fn.px-to-rem(2) solid $color;
-  }
-
-  &--isPrimary#{&}--is#{$className}:focus {
-    box-shadow: 0 0 0 fn.px-to-em(3) color.scale($color, $lightness: 70%);
+    &:active {
+      background: $hoverColor;
+      color: $textColor;
+    }
   }
 }
 
 .cpButton {
   border-radius: fn.px-to-rem(1000);
   background-color: transparent;
-  padding: sp.$space sp.$space-md;
-  font-size: fn.px-to-rem(16);
-  box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
-  line-height: fn.px-to-rem(24);
+  padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+  font-size: var(--cp-text-size-md);
+  box-shadow: var(--cp-shadows-3xs);
+  line-height: var(--cp-line-height-md); /* 150% */
   text-decoration: none;
-  color: colors.$neutral-dark;
+  color: var(--cp-text-primary);
   font-weight: 500;
   transition-property: box-shadow, background-color, transform, width;
   transition-duration: 150ms;
   transition-timing-function: ease;
+  outline-offset: fn.px-to-rem(2);
   cursor: pointer;
 
   &,
   &:visited {
-    color: colors.$neutral-dark;
-  }
-
-  &,
-  &__body {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &:hover {
-    transform: translateY(fn.px-to-rem(-1));
+    color: var(--cp-text-primary);
   }
 
-  &:active {
-    transform: translateY(fn.px-to-rem(1));
-  }
-
-  &--isDefault {
-    background-color: colors.$neutral-light;
-    box-shadow: 0 0 0 fn.px-to-rem(1) colors.$neutral-dark-4;
-
+  &--isDefault,
+  &--isPrimary,
+  &--isMinimal {
     &:hover {
-      background-color: color.scale(colors.$neutral-dark, $lightness: 98%);
-      box-shadow: 0 0 0 fn.px-to-rem(1) colors.$primary-color;
-    }
-
-    &:active {
-      background-color: color.scale(colors.$neutral-dark, $lightness: 95%);
+      background-color: var(--cp-background-primary-hover);
     }
 
     &:focus {
+      outline: fn.px-to-rem(2) solid var(--cp-border-strong);
       box-shadow: none;
-      outline: fn.px-to-rem(2) solid currentColor;
     }
   }
 
-  &--isDefault,
-  &--isPrimary {
-    filter: drop-shadow(0 fn.px-to-rem(1) fn.px-to-rem(2) rgba(colors.$neutral-dark, 0.08));
+  &--isDefault {
+    box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-strong);
   }
 
-  @include cp-button-default('Blue', colors.$secondary-color);
-  @include cp-button-default('Purple', colors.$primary-color);
-  @include cp-button-default('Green', colors.$success-color);
-  @include cp-button-default('Orange', colors.$warning-color);
-  @include cp-button-default('Red', colors.$error-color);
-
-  &--isPrimary {
-    &,
-    &:visited {
-      color: colors.$neutral-light;
-    }
+  &--isMinimal {
+    box-shadow: none;
+  }
 
-    &:hover {
-      box-shadow:
-        0 fn.px-to-rem(4) fn.px-to-rem(6) rgba(50, 50, 93, 0.11),
-        0 fn.px-to-rem(1) fn.px-to-rem(3) rgba(colors.$neutral-dark, 0.08);
-    }
+  &,
+  &__body {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    &:active {
-      box-shadow:
-        inset 0 0 0 fn.px-to-em(1) rgba(67, 90, 111, 0.14),
-        inset 0 fn.px-to-em(1) fn.px-to-em(1) 0 rgba(67, 90, 111, 0.06);
-    }
+  &:hover {
+    transform: translateY(fn.px-to-rem(-1));
   }
 
-  &--isMinimal {
-    box-shadow: none;
+  &:active {
+    transform: translateY(fn.px-to-rem(1));
   }
 
-  @include cp-button-style('Blue', colors.$secondary-color);
-  @include cp-button-style('Purple', colors.$primary-color);
-  @include cp-button-style('Green', colors.$success-color);
-  @include cp-button-style('Orange', colors.$warning-color);
-  @include cp-button-style('Red', colors.$error-color);
+  // Default appearance (style secondary on Figma)
+  @include cp-button-default('Blue', var(--cp-text-blue-primary), var(--cp-text-blue-primary-hover));
+  @include cp-button-default('Purple', var(--cp-text-accent-primary), var(--cp-text-accent-primary-hover));
+  @include cp-button-default('Green', var(--cp-text-success-primary), var(--cp-text-success-primary-hover));
+  @include cp-button-default('Orange', var(--cp-text-warning-primary), var(--cp-text-warning-primary-hover));
+  @include cp-button-default('Red', var(--cp-text-error-primary), var(--cp-text-error-primary-hover));
+
+  // Primary appearance (style primary on Figma)
+  @include cp-button-primary('Blue', var(--cp-background-blue-solid), var(--cp-background-blue-solid-hover));
+  @include cp-button-primary('Purple', var(--cp-background-accent-solid), var(--cp-background-accent-solid-hover));
+  @include cp-button-primary('Green', var(--cp-background-success-solid), var(--cp-background-success-solid-hover));
+  @include cp-button-primary('Orange', var(--cp-background-warning-solid), var(--cp-background-warning-solid-hover));
+  @include cp-button-primary('Red', var(--cp-background-error-solid), var(--cp-background-error-solid-hover));
+
+  // Minimal appearance (style tertiary on Figma)
+  @include cp-button-tertiary('Blue', var(--cp-text-blue-primary), var(--cp-background-blue-primary-hover));
+  @include cp-button-tertiary('Purple', var(--cp-text-accent-primary), var(--cp-background-accent-primary-hover));
+  @include cp-button-tertiary('Green', var(--cp-text-success-primary), var(--cp-background-success-primary-hover));
+  @include cp-button-tertiary('Orange', var(--cp-text-warning-primary), var(--cp-background-warning-primary-hover));
+  @include cp-button-tertiary('Red', var(--cp-text-error-primary), var(--cp-background-error-primary-hover));
 
   &--isDisabled {
     box-shadow: none !important;
-    background-color: colors.$neutral-light-1 !important;
-    color: colors.$neutral-dark-2 !important;
+    background-color: var(--cp-background-disabled) !important;
+    color: var(--cp-text-disabled) !important;
     cursor: not-allowed !important;
     user-select: none;
 
@@ -258,9 +260,12 @@ const dynamicClasses = computed(() => {
   }
 
   &__body {
+    display: flex;
+    align-items: center;
+    gap: var(--cp-spacing-sm-md);
     position: relative;
     text-align: center;
-    transition: padding-left 250ms easings.$easing-elastic;
+    transition: padding-left 250ms var(--cp-easing-elastic);
   }
 
   &__icon,
@@ -281,18 +286,10 @@ const dynamicClasses = computed(() => {
     @include mx.square-sizing(20);
 
     flex-shrink: 0;
-
-    &--isBefore:not(:only-child) {
-      margin-right: sp.$space;
-    }
-
-    &--isAfter:not(:only-child) {
-      margin-left: sp.$space;
-    }
   }
 
   &--isLoading .cpButton__body {
-    padding-left: calc(#{fn.px-to-rem(24) + sp.$space});
+    padding-left: calc(#{var(--cp-spacing-2xl)} + #{var(--cp-spacing-md)});
   }
 
   &__loader {
@@ -305,18 +302,24 @@ const dynamicClasses = computed(() => {
   }
 
   &--isSquare {
-    border-radius: fn.px-to-rem(8);
+    border-radius: var(--cp-radius-md);
 
     &.cpButton--lg {
-      border-radius: fn.px-to-rem(10);
+      border-radius: var(--cp-radius-md-lg);
+    }
+
+    &.cpButton--2xs {
+      border-radius: var(--cp-radius-sm-md);
     }
   }
 
   &--lg {
-    padding: sp.$space-md sp.$space-lg;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+    font-size: var(--cp-text-size-md);
+    line-height: var(--cp-line-height-md); /* 150% */
 
     &.cpButton--isIcon {
-      padding: sp.$space-md;
+      padding: var(--cp-spacing-lg);
     }
 
     .cpButton__icon,
@@ -327,15 +330,20 @@ const dynamicClasses = computed(() => {
 
   &--sm,
   &--xs {
-    padding: sp.$space-sm sp.$space;
-    font-size: fn.px-to-rem(14);
+    .cpButton__body {
+      gap: var(--cp-spacing-xs);
+    }
 
     &.cpButton--isIcon {
-      padding: fn.px-to-rem(6);
+      padding: var(--cp-spacing-sm-md);
     }
   }
 
   &--sm {
+    padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm); /* 142.857% */
+
     .cpButton__icon,
     .cpButton__loader {
       @include mx.square-sizing(20);
@@ -343,12 +351,29 @@ const dynamicClasses = computed(() => {
   }
 
   &--xs {
-    line-height: fn.px-to-rem(20);
+    font-size: var(--cp-text-size-sm);
+    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    line-height: var(--cp-line-height-sm);
 
     .cpButton__icon,
     .cpButton__loader {
       @include mx.square-sizing(16);
     }
   }
+
+  &--2xs {
+    font-size: var(--cp-text-size-xs);
+    padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    line-height: var(--cp-line-height-xs);
+
+    .cpButton__body {
+      gap: var(--cp-spacing-xs);
+    }
+
+    .cpButton__icon,
+    .cpButton__loader {
+      @include mx.square-sizing(12);
+    }
+  }
 }
 </style>

package/src/components/CpButtonGroup.vue

@@ -10,8 +10,8 @@
   padding: fn.px-to-rem(1);
   align-items: flex-start;
   border-radius: fn.px-to-rem(4);
-  box-shadow: 0 0 0 fn.px-to-rem(1) colors.$border-color;
-  gap: sp.$space-xs;
+  box-shadow: 0 0 0 fn.px-to-rem(1) var(--cp-border-soft);
+  gap: var(--cp-spacing-xs);
 
   > * {
     position: relative;
@@ -28,7 +28,7 @@
       width: fn.px-to-rem(1);
       height: calc(100% + fn.px-to-rem(2));
       top: fn.px-to-rem(-1);
-      background-color: colors.$border-color;
+      background-color: var(--cp-border-soft);
     }
   }
 }

package/src/components/CpCalendar.vue

@@ -277,7 +277,7 @@ watch(isInline, (value) => {
   }
 
   &__datepicker:not(&__datepicker--isInline) {
-    margin-top: 10px;
+    margin-top: var(--cp-dimensions-2_5);
   }
 
   @media (min-width: 350px) {
@@ -292,7 +292,7 @@ watch(isInline, (value) => {
     }
 
     &__datepicker:not(&__datepicker--isInline) {
-      margin-top: 16px;
+      margin-top: var(--cp-spacing-xl);
     }
 
     // Opening transition layout adaptation
@@ -306,22 +306,22 @@ watch(isInline, (value) => {
   }
 
   &__input input:disabled {
-    background-color: colors.$neutral-light;
+    background-color: var(--cp-background-white);
   }
 
   .footer-container {
-    background: colors.$neutral-light;
-    border-top: 1px solid colors.$neutral-dark-5;
+    background: var(--cp-background-white);
+    border-top: 1px solid var(--cp-border-soft);
 
     .asd__recurency--action {
-      padding: 16px;
+      padding: var(--cp-spacing-xl);
       display: flex;
       align-items: center;
       justify-content: space-between;
 
       button {
-        font-size: 16px;
-        color: colors.$neutral-dark;
+        font-size: var(--cp-text-size-md);
+        color: var(--cp-text-primary);
       }
     }
 
@@ -329,9 +329,9 @@ watch(isInline, (value) => {
       border: #b5b5b5;
 
       &:not([disabled]) {
-        background-color: colors.$primary-color;
-        color: colors.$neutral-light !important;
-        border: colors.$primary-color;
+        background-color: var(--cp-background-accent-solid);
+        color: var(--cp-text-white) !important;
+        border: var(--cp-background-accent-solid);
       }
     }
 
@@ -344,7 +344,7 @@ watch(isInline, (value) => {
       cursor: pointer;
 
       @media (min-width: 768px) {
-        height: 64px;
+        height: var(--cp-dimensions-16);
       }
 
       @media (max-width: 768px) {
@@ -359,10 +359,10 @@ watch(isInline, (value) => {
       flex: 1;
       justify-content: center;
       align-items: center;
-      border-top: 1px solid colors.$neutral-dark-5;
-      font-size: 16px;
-      color: colors.$neutral-dark;
-      height: 64px;
+      border-top: 1px solid var(--cp-border-soft);
+      font-size: var(--cp-text-size-md);
+      color: var(--cp-text-primary);
+      height: var(--cp-dimensions-16);
       transition: background 200ms linear;
 
       @media (max-width: 768px) {
@@ -370,42 +370,42 @@ watch(isInline, (value) => {
       }
 
       .checkbox {
-        width: 16px;
-        height: 16px;
+        width: var(--cp-dimensions-4);
+        height: var(--cp-dimensions-4);
       }
 
       .checkbox--border {
         height: 100%;
         width: 100%;
-        border: 1px solid colors.$neutral-dark-5;
+        border: 1px solid var(--cp-border-soft);
       }
 
       .feather-check {
         height: 100%;
         width: 100%;
-        color: colors.$accent-color-1;
+        color: var(--cp-text-accent-primary);
       }
 
       span {
-        font-size: 14px;
-        line-height: 20px;
-        padding-top: 3px;
+        font-size: var(--cp-text-size-sm);
+        line-height: var(--cp-line-height-sm);
+        padding-top: calc(var(--cp-dimensions-0_5) * 1.5);
         user-select: none;
       }
     }
 
     .asd__recurency--li--selected {
-      color: colors.$accent-color-1;
+      color: var(--cp-text-accent-primary);
     }
 
     .asd__recurency--summary {
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: var(--cp-spacing-xl);
+      padding-right: var(--cp-spacing-xl);
     }
 
     .asd__recurency--text {
-      background: colors.$neutral-dark;
-      border-radius: 10px;
+      background: var(--cp-text-primary);
+      border-radius: var(--cp-radius-md-lg);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -417,12 +417,12 @@ watch(isInline, (value) => {
 
       span {
         white-space: normal;
-        padding: 10px;
-        padding-left: 2px;
-        font-size: 14px;
+        padding: var(--cp-dimensions-2_5);
+        padding-left: var(--cp-dimensions-0_5);
+        font-size: var(--cp-text-size-sm);
 
         strong {
-          color: colors.$neutral-light;
+          color: var(--cp-text-white);
         }
       }
     }