@citizenplane/pimp 8.9.5 → 8.11.0

package/src/components/atomic-elements/CpBadge.vue

@@ -85,14 +85,14 @@ const onClear = () => {
 }
 
 @mixin cp-badge-color-solid($color) {
-  color: $neutral-light;
+  color: colors.$neutral-light;
   background-color: $color;
   border-color: transparent;
 
   .cpBadge__clear:hover,
   .cpBadge__clear:focus-visible {
     color: $color;
-    background-color: $neutral-light;
+    background-color: colors.$neutral-light;
   }
 }
 
@@ -109,48 +109,48 @@ const onClear = () => {
 .cpBadge {
   display: inline-flex;
   align-items: center;
-  padding-block: $space-sm;
-  font-size: px-to-em(14);
+  padding-block: sp.$space-sm;
+  font-size: fn.px-to-em(14);
   font-weight: 500;
-  border-radius: px-to-rem(1000);
-  border: 1px solid $border-color;
-  background-color: $neutral-light;
-
-  @include cp-badge-style($neutral-dark, 'Neutral');
-  @include cp-badge-style($secondary-color, 'Blue');
-  @include cp-badge-style($green-2, 'Green');
-  @include cp-badge-style($red, 'Red');
-  @include cp-badge-style($orange, 'Orange');
-  @include cp-badge-style($purple, 'Purple');
-  @include cp-badge-style($blue-1, 'Teal');
-  @include cp-badge-style($pink, 'Pink');
-  @include cp-badge-style($yellow, 'Yellow');
+  border-radius: fn.px-to-rem(1000);
+  border: 1px solid colors.$border-color;
+  background-color: colors.$neutral-light;
+
+  @include cp-badge-style(colors.$neutral-dark, 'Neutral');
+  @include cp-badge-style(colors.$secondary-color, 'Blue');
+  @include cp-badge-style(colors.$green-2, 'Green');
+  @include cp-badge-style(colors.$red, 'Red');
+  @include cp-badge-style(colors.$orange, 'Orange');
+  @include cp-badge-style(colors.$purple, 'Purple');
+  @include cp-badge-style(colors.$blue-1, 'Teal');
+  @include cp-badge-style(colors.$pink, 'Pink');
+  @include cp-badge-style(colors.$yellow, 'Yellow');
 
   &--isYellow#{&}--isSolid {
-    color: darken($yellow, 20);
+    color: darken(colors.$yellow, 20);
 
     &:before {
-      background-color: darken($yellow, 20);
+      background-color: darken(colors.$yellow, 20);
     }
   }
 
   &:not(#{&}--isPlain):not(#{&}--hasIcon)::before {
     content: '';
-    width: px-to-rem(6);
-    height: px-to-rem(6);
-    margin-right: px-to-rem(6);
+    width: fn.px-to-rem(6);
+    height: fn.px-to-rem(6);
+    margin-right: fn.px-to-rem(6);
     border-radius: 100%;
     flex-shrink: 0;
     background-color: currentColor;
   }
 
   &:not(&--isClearable) {
-    padding-inline: $space;
+    padding-inline: sp.$space;
   }
 
   &--isClearable {
-    padding-left: $space;
-    padding-right: $space-sm;
+    padding-left: sp.$space;
+    padding-right: sp.$space-sm;
   }
 
   &__label {
@@ -161,15 +161,15 @@ const onClear = () => {
 
   &__icon {
     color: currentColor;
-    width: px-to-rem(16);
-    height: px-to-rem(16);
+    width: fn.px-to-rem(16);
+    height: fn.px-to-rem(16);
 
     &:not(&--isClear) {
-      margin-right: $space-sm;
+      margin-right: sp.$space-sm;
     }
 
     &--isClear svg {
-      stroke-width: px-to-rem(2);
+      stroke-width: fn.px-to-rem(2);
     }
 
     > * {
@@ -182,15 +182,15 @@ const onClear = () => {
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-left: px-to-rem(6);
-    padding: px-to-rem(1);
+    margin-left: fn.px-to-rem(6);
+    padding: fn.px-to-rem(1);
     border-radius: 100%;
     color: inherit;
 
     &:hover,
     &:focus-visible {
-      color: $neutral-light;
-      background-color: $neutral-dark;
+      color: colors.$neutral-light;
+      background-color: colors.$neutral-dark;
     }
 
     &:focus {

package/src/components/atomic-elements/CpDialog.vue

@@ -90,7 +90,7 @@ $dialog-breakpoint: 550px;
   transition-duration: 300ms;
 
   @media screen and (min-width: calc(#{$dialog-breakpoint} + 1px)) {
-    padding: 10vh $space * 4;
+    padding: 10vh sp.$space * 4;
   }
 
   &__dialog {
@@ -110,7 +110,7 @@ $dialog-breakpoint: 550px;
     z-index: -1;
     width: 100%;
     height: 100%;
-    background: rgba($neutral-dark, 0.86);
+    background: rgba(colors.$neutral-dark, 0.86);
     inset: 0;
     pointer-events: none;
     transition: opacity 250ms ease;
@@ -129,8 +129,8 @@ $dialog-breakpoint: 550px;
     max-height: 100%;
     flex-direction: column;
     justify-content: space-between;
-    border-radius: px-to-rem(12);
-    background-color: $neutral-light;
+    border-radius: fn.px-to-rem(12);
+    background-color: colors.$neutral-light;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 33%);
     -webkit-overflow-scrolling: touch;
     transition:
@@ -147,7 +147,7 @@ $dialog-breakpoint: 550px;
   &.dialog-enter-from &__container,
   &.dialog-leave-to &__container {
     opacity: 0;
-    transform: scale3d(0.85, 0.85, 1) translate3d(0, px-to-rem(30), 0);
+    transform: scale3d(0.85, 0.85, 1) translate3d(0, fn.px-to-rem(30), 0);
   }
 
   &__header,
@@ -165,29 +165,29 @@ $dialog-breakpoint: 550px;
 
   &__header {
     position: relative;
-    border-bottom: 1px solid $border-color;
+    border-bottom: 1px solid colors.$border-color;
   }
 
   &__close {
     position: absolute;
-    top: $space-xl;
-    right: $space-xl;
+    top: sp.$space-xl;
+    right: sp.$space-xl;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: $space-sm;
-    border-radius: px-to-rem(8);
-    color: $neutral-dark-1;
+    padding: sp.$space-sm;
+    border-radius: fn.px-to-rem(8);
+    color: colors.$neutral-dark-1;
     transition: 0.2s ease-in-out;
-    transform: translate(px-to-rem(4), px-to-rem(-4));
+    transform: translate(fn.px-to-rem(4), fn.px-to-rem(-4));
     transition-property: color, background-color;
 
     &:hover {
-      color: $neutral-dark;
+      color: colors.$neutral-dark;
     }
 
     &:focus-visible {
-      outline: px-to-em(3) solid scale-color($secondary-color, $lightness: 75%);
+      outline: fn.px-to-em(3) solid color.scale(colors.$secondary-color, $lightness: 75%);
     }
   }
 
@@ -199,8 +199,8 @@ $dialog-breakpoint: 550px;
 
   &__footer {
     &:not(:empty) {
-      border-top: 1px solid $border-color;
-      padding: $space-lg $space-xl;
+      border-top: 1px solid colors.$border-color;
+      padding: sp.$space-lg sp.$space-xl;
     }
 
     &--noBorder {
@@ -211,14 +211,14 @@ $dialog-breakpoint: 550px;
 
 @media screen and (max-width: $dialog-breakpoint) {
   .cpDialog__close {
-    top: $space-lg;
-    right: $space-lg;
+    top: sp.$space-lg;
+    right: sp.$space-lg;
   }
 }
 
 @media (max-width: 650px) {
   .cpDialog__footer {
-    padding: $space-lg;
+    padding: sp.$space-lg;
   }
 }
 </style>

package/src/components/atomic-elements/CpTooltip.vue

@@ -31,15 +31,15 @@ const ariaId = useId()
 <style lang="scss">
 .cpTooltip.v-popper--theme-tooltip {
   .v-popper__inner {
-    padding: $space $space-md;
-    border-radius: px-to-rem(8);
-    background-color: $primary-color;
-    font-size: px-to-rem(12);
-    line-height: px-to-rem(16);
+    padding: sp.$space sp.$space-md;
+    border-radius: fn.px-to-rem(8);
+    background-color: colors.$primary-color;
+    font-size: fn.px-to-rem(12);
+    line-height: fn.px-to-rem(16);
   }
 
   .v-popper__arrow-outer {
-    border-color: $primary-color;
+    border-color: colors.$primary-color;
   }
 }
 </style>

package/src/components/buttons/CpButton.vue

@@ -156,13 +156,13 @@ export default {
     border-color: $color;
 
     &:hover {
-      background-color: scale-color($color, $lightness: 7%);
-      border-color: scale-color($color, $lightness: 7%);
+      background-color: color.scale($color, $lightness: 7%);
+      border-color: color.scale($color, $lightness: 7%);
     }
 
     &:active {
-      background-color: scale-color($color, $lightness: -12%);
-      border-color: scale-color($color, $lightness: -12%);
+      background-color: color.scale($color, $lightness: -12%);
+      border-color: color.scale($color, $lightness: -12%);
     }
   }
 }
@@ -175,12 +175,12 @@ export default {
     }
 
     &:hover {
-      background: scale-color($color, $lightness: 90%);
+      background: color.scale($color, $lightness: 90%);
     }
 
     &:active {
-      background: scale-color($color, $lightness: 80%);
-      color: scale-color($color, $lightness: -10%);
+      background: color.scale($color, $lightness: 80%);
+      color: color.scale($color, $lightness: -10%);
     }
   }
 }
@@ -191,21 +191,21 @@ export default {
 
   &--isPrimary#{&}--is#{$className}:focus,
   &--isMinimal#{&}--is#{$className}:focus {
-    box-shadow: 0 0 0 px-to-em(3) scale-color($color, $lightness: 70%);
+    box-shadow: 0 0 0 fn.px-to-em(3) color.scale($color, $lightness: 70%);
   }
 }
 
 .cpButton {
-  border: px-to-rem(1) solid;
-  border-radius: px-to-rem(1000);
+  border: fn.px-to-rem(1) solid;
+  border-radius: fn.px-to-rem(1000);
   background-color: transparent;
-  padding: px-to-em(12) px-to-em(16);
+  padding: fn.px-to-em(12) fn.px-to-em(16);
   min-width: 10ch;
-  height: $component-size-default;
+  height: sizing.$component-size-default;
   font-size: inherit;
   line-height: 1.1;
   text-decoration: none;
-  color: $neutral-dark;
+  color: colors.$neutral-dark;
   font-weight: 500;
   transition-property: box-shadow, background-color, transform, width;
   transition-duration: 0.15s;
@@ -214,7 +214,7 @@ export default {
 
   &,
   &:visited {
-    color: $neutral-dark;
+    color: colors.$neutral-dark;
   }
 
   &,
@@ -225,34 +225,30 @@ export default {
   }
 
   @media screen and (-ms-high-contrast: active) {
-    border: px-to-em(2) solid currentcolor;
+    border: fn.px-to-em(2) solid currentcolor;
   }
 
   &:hover {
-    transform: translateY(px-to-rem(-1));
+    transform: translateY(fn.px-to-rem(-1));
   }
 
   &:active {
-    transform: translateY(px-to-rem(1));
-  }
-
-  &:focus {
-    outline: none !important;
+    transform: translateY(fn.px-to-rem(1));
   }
 
   &--isDefault {
-    background-color: $neutral-light;
-    border-color: $neutral-dark-4;
+    background-color: colors.$neutral-light;
+    border-color: colors.$neutral-dark-4;
 
     &:hover {
-      background-color: scale-color($neutral-dark, $lightness: 98%);
+      background-color: color.scale(colors.$neutral-dark, $lightness: 98%);
       box-shadow:
-        0 px-to-rem(1) px-to-rem(2) rgba($neutral-dark, 0.08),
-        0 px-to-rem(3) px-to-rem(6) rgba($neutral-dark, 0.08);
+        0 fn.px-to-rem(1) fn.px-to-rem(2) rgba(colors.$neutral-dark, 0.08),
+        0 fn.px-to-rem(3) fn.px-to-rem(6) rgba(colors.$neutral-dark, 0.08);
     }
 
     &:active {
-      background-color: scale-color($neutral-dark, $lightness: 95%);
+      background-color: color.scale(colors.$neutral-dark, $lightness: 95%);
     }
 
     &:focus {
@@ -262,36 +258,36 @@ export default {
 
   &--isDefault,
   &--isPrimary {
-    filter: drop-shadow(0 px-to-rem(1) px-to-rem(2) rgba($neutral-dark, 0.08));
+    filter: drop-shadow(0 fn.px-to-rem(1) fn.px-to-rem(2) rgba(colors.$neutral-dark, 0.08));
   }
 
   &--isDefault:focus,
   &--isDisabled:focus {
-    box-shadow: 0 0 0 px-to-em(3) scale-color($secondary-color, $lightness: 75%) !important;
+    outline: fn.px-to-em(3) solid color.scale(colors.$primary-color, $lightness: 75%);
   }
 
-  @include cp-button-default('Blue', $secondary-color);
-  @include cp-button-default('Purple', $primary-color);
-  @include cp-button-default('Green', $success-color);
-  @include cp-button-default('Orange', $warning-color);
-  @include cp-button-default('Red', $error-color);
+  @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: $neutral-light;
+      color: colors.$neutral-light;
     }
 
     &:hover {
       box-shadow:
-        0 px-to-rem(4) px-to-rem(6) rgba(50, 50, 93, 0.11),
-        0 px-to-rem(1) px-to-rem(3) rgba($neutral-dark, 0.08);
+        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);
     }
 
     &:active {
       box-shadow:
-        inset 0 0 0 px-to-em(1) rgba(67, 90, 111, 0.14),
-        inset 0 px-to-em(1) px-to-em(1) 0 rgba(67, 90, 111, 0.06);
+        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);
     }
   }
 
@@ -299,17 +295,17 @@ export default {
     border-color: transparent;
   }
 
-  @include cp-button-style('Blue', $secondary-color);
-  @include cp-button-style('Purple', $primary-color);
-  @include cp-button-style('Green', $success-color);
-  @include cp-button-style('Orange', $warning-color);
-  @include cp-button-style('Red', $error-color);
+  @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);
 
   &--isDisabled {
     box-shadow: none !important;
-    border-color: $neutral-light-1 !important;
-    background-color: $neutral-light-1 !important;
-    color: $neutral-dark-2 !important;
+    border-color: colors.$neutral-light-1 !important;
+    background-color: colors.$neutral-light-1 !important;
+    color: colors.$neutral-dark-2 !important;
     cursor: not-allowed !important;
     user-select: none;
 
@@ -320,8 +316,8 @@ export default {
   }
 
   &--isIcon {
-    min-width: $component-size-default;
-    padding: px-to-em(10);
+    min-width: sizing.$component-size-default;
+    padding: fn.px-to-em(10);
   }
 
   &__body {
@@ -345,23 +341,23 @@ export default {
   }
 
   &__icon {
-    width: px-to-em(16);
-    height: px-to-em(16);
+    width: fn.px-to-em(16);
+    height: fn.px-to-em(16);
     flex-shrink: 0;
 
     &--isBefore:not(:only-child) {
-      margin-right: px-to-em(8);
+      margin-right: fn.px-to-em(8);
     }
 
     &--isAfter:not(:only-child) {
-      margin-left: px-to-em(8);
+      margin-left: fn.px-to-em(8);
     }
   }
 
-  $cp-button-loader-size: px-to-em(24);
+  $cp-button-loader-size: fn.px-to-em(24);
 
   &--isLoading .cpButton__body {
-    padding-left: calc(#{$cp-button-loader-size + px-to-em(8)});
+    padding-left: calc(#{$cp-button-loader-size + fn.px-to-em(8)});
   }
 
   &__loader {
@@ -374,11 +370,11 @@ export default {
   }
 
   &--isSquare {
-    border-radius: px-to-rem(10);
+    border-radius: fn.px-to-rem(10);
   }
 
   &--isLarge {
-    height: $component-size-large;
+    height: sizing.$component-size-large;
     text-transform: uppercase;
   }
 }

package/src/components/core/{BaseInputLabel/index.vue → BaseInputLabel.vue}

@@ -20,9 +20,9 @@ export default {
 <style lang="scss">
 .baseInputLabel {
   display: block;
-  font-size: px-to-em(14);
+  font-size: fn.px-to-em(14);
   font-weight: 500;
-  color: $neutral-dark;
+  color: colors.$neutral-dark;
 
   &::first-letter {
     text-transform: capitalize;
@@ -30,7 +30,7 @@ export default {
 
   &--isInvalid {
     font-weight: 500;
-    color: $error-color;
+    color: colors.$error-color;
   }
 }
 </style>

package/src/components/core/playground-sections/SectionAtomicElements.vue

@@ -77,7 +77,7 @@ export default {
   &__badges {
     display: flex;
     flex-wrap: wrap;
-    gap: $space;
+    gap: sp.$space;
   }
 }
 </style>

package/src/components/core/playground-sections/SectionButtons.vue

@@ -126,7 +126,7 @@ export default {
 <style lang="scss">
 .sectionButtons {
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 
   &__buttons {
@@ -135,7 +135,7 @@ export default {
     flex-wrap: wrap;
 
     > * {
-      margin: 0 $space-lg $space-lg 0;
+      margin: 0 sp.$space-lg sp.$space-lg 0;
     }
   }
 }

package/src/components/core/playground-sections/SectionContainer.vue

@@ -20,15 +20,15 @@ export default {
 
 <style lang="scss">
 .sectionContainer {
-  padding: $space-xl;
+  padding: sp.$space-xl;
   width: 100%;
 
   &:not(first-child) {
-    border-top: 1px solid $neutral-dark-4;
+    border-top: 1px solid colors.$neutral-dark-4;
   }
 
   &__title {
-    margin-bottom: $space-xl;
+    margin-bottom: sp.$space-xl;
   }
 
   .item {
@@ -39,11 +39,11 @@ export default {
     align-items: center;
 
     & > span {
-      margin-bottom: px-to-rem(10);
+      margin-bottom: fn.px-to-rem(10);
     }
 
     h3 {
-      margin-bottom: px-to-rem(10);
+      margin-bottom: fn.px-to-rem(10);
     }
   }
 }

package/src/components/core/playground-sections/SectionDatePickers.vue

@@ -120,7 +120,7 @@ export default {
 <style lang="scss">
 .sectionDatePickers {
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 
   &__datepickers {
@@ -129,7 +129,7 @@ export default {
     flex-wrap: wrap;
 
     > * {
-      margin: 0 $space-lg $space-lg 0;
+      margin: 0 sp.$space-lg sp.$space-lg 0;
     }
   }
 
@@ -144,7 +144,7 @@ export default {
   }
 
   &__button {
-    margin-left: $space-lg;
+    margin-left: sp.$space-lg;
   }
 
   &__wrapper {

package/src/components/core/playground-sections/SectionDialog.vue

@@ -35,7 +35,7 @@ const toggleDialog = () => (isDialogVisible.value = !isDialogVisible.value)
 .sectionDialog {
   &__header,
   &__content {
-    padding: $space-xl;
+    padding: sp.$space-xl;
   }
 
   &__footer {

package/src/components/core/playground-sections/SectionFeedbackIndicators.vue

@@ -36,12 +36,12 @@ export default {
     width: 100%;
 
     > *:not(:last-of-type) {
-      margin-bottom: $space;
+      margin-bottom: sp.$space;
     }
   }
 
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 }
 </style>

package/src/components/core/playground-sections/SectionInputs.vue

@@ -36,11 +36,11 @@ export default {
 <style lang="scss">
 .sectionInputs {
   &__section:not(:last-of-type) {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 
   &__title {
-    margin-bottom: $space-lg;
+    margin-bottom: sp.$space-lg;
   }
 }
 </style>