@citizenplane/pimp 18.6.2 → 18.8.0

package/src/assets/css/typography.css

@@ -12,7 +12,6 @@
   --cp-letter-spacing-7xl: 0;
   --cp-letter-spacing-8xl: 0;
   --cp-letter-spacing-9xl: 0;
-
   --cp-line-height-xs: 1rem;
   --cp-line-height-sm: 1.25rem;
   --cp-line-height-md: 1.5rem;
@@ -26,7 +25,6 @@
   --cp-line-height-7xl: 5rem;
   --cp-line-height-8xl: 6rem;
   --cp-line-height-9xl: 8rem;
-
   --cp-text-size-xs: 0.75rem;
   --cp-text-size-sm: 0.875rem;
   --cp-text-size-md: 1rem;
@@ -40,43 +38,30 @@
   --cp-text-size-7xl: 4.5rem;
   --cp-text-size-8xl: 6rem;
   --cp-text-size-9xl: 8rem;
-
   --cp-text-xs-line-height: var(--cp-line-height-xs);
   --cp-text-xs-letter-spacing: var(--cp-letter-spacing-xs);
-
   --cp-text-sm-line-height: var(--cp-line-height-sm);
   --cp-text-sm-letter-spacing: var(--cp-letter-spacing-sm);
-
   --cp-text-md-line-height: var(--cp-line-height-md);
   --cp-text-md-letter-spacing: var(--cp-letter-spacing-md);
-
   --cp-text-lg-line-height: var(--cp-line-height-lg);
   --cp-text-lg-letter-spacing: var(--cp-letter-spacing-lg);
-
   --cp-text-xl-line-height: var(--cp-line-height-xl);
   --cp-text-xl-letter-spacing: var(--cp-letter-spacing-xl);
-
   --cp-text-2xl-line-height: var(--cp-line-height-2xl);
   --cp-text-2xl-letter-spacing: var(--cp-letter-spacing-2xl);
-
   --cp-text-3xl-line-height: var(--cp-line-height-3xl);
   --cp-text-3xl-letter-spacing: var(--cp-letter-spacing-3xl);
-
   --cp-text-4xl-line-height: var(--cp-line-height-4xl);
   --cp-text-4xl-letter-spacing: var(--cp-letter-spacing-4xl);
-
   --cp-text-5xl-line-height: var(--cp-line-height-5xl);
   --cp-text-5xl-letter-spacing: var(--cp-letter-spacing-5xl);
-
   --cp-text-6xl-line-height: var(--cp-line-height-6xl);
   --cp-text-6xl-letter-spacing: var(--cp-letter-spacing-6xl);
-
   --cp-text-7xl-line-height: var(--cp-line-height-7xl);
   --cp-text-7xl-letter-spacing: var(--cp-letter-spacing-7xl);
-
   --cp-text-8xl-line-height: var(--cp-line-height-8xl);
   --cp-text-8xl-letter-spacing: var(--cp-letter-spacing-8xl);
-
   --cp-text-9xl-line-height: var(--cp-line-height-9xl);
   --cp-text-9xl-letter-spacing: var(--cp-letter-spacing-9xl);
 
@@ -85,11 +70,9 @@
   --cp-monospace-xs: var(--cp-text-size-xs);
   --cp-monospace-xs-line-height: var(--cp-line-height-xs);
   --cp-monospace-xs-letter-spacing: var(--cp-letter-spacing-xs);
-
   --cp-monospace-sm-font-light: var(--cp-size-sm);
   --cp-monospace-sm-line-height: var(--cp-line-height-sm);
   --cp-monospace-sm-letter-spacing: var(--cp-letter-spacing-sm);
-
   --cp-monospace-md-font-light: var(--cp-text-size-md);
   --cp-monospace-md-line-height: var(--cp-line-height-md);
   --cp-monospace-md-letter-spacing: var(--cp-letter-spacing-md);

package/src/assets/main.css

@@ -1,7 +1,7 @@
-@import './css/base.css';
-@import './css/colors.css';
-@import './css/dimensions.css';
-@import './css/shadows.css';
-@import './css/typography.css';
-@import './css/easings.css';
-@import './css/tokens.css';
+@import "./css/base.css";
+@import "./css/colors.css";
+@import "./css/dimensions.css";
+@import "./css/shadows.css";
+@import "./css/typography.css";
+@import "./css/easings.css";
+@import "./css/tokens.css";

package/src/assets/styles/helpers/_functions.scss

@@ -5,7 +5,7 @@
 // The default font size for html is 16px
 $base-size: 16;
 
-//Function to convert px value into rem or em
+// Function to convert px value into rem or em
 
 @function px-to-rem($target, $context: $base-size) {
   @return math.div($target, $context) * 1rem;
@@ -16,7 +16,7 @@ $base-size: 16;
 }
 
 @function v($var, $fallback: null) {
-  @if ($fallback) {
+  @if $fallback {
     @return var(--cp-#{$var}, #{$fallback});
   } @else {
     @return var(--cp-#{$var});

package/src/assets/styles/utilities/_index.scss

@@ -2,9 +2,9 @@
 
 .u-text-ellipsis,
 %u-text-ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .u-layout-box-padding,
@@ -52,7 +52,6 @@ label .u-asterisk {
     linear-gradient(90deg, #fff0, #fff 70%) 0 100%,
     radial-gradient(farthest-side at 0 50%, #3e3e5b33, #3e3e5b00),
     radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
-
   background-attachment: local, local, scroll, scroll;
   background-color: var(--cp-background-primary);
   background-position:

package/src/components/BaseInputLabel.vue

@@ -38,14 +38,14 @@ defineOptions({
 <style lang="scss">
 .baseInputLabel {
   position: relative;
+  z-index: 2;
   display: flex;
   align-items: center;
-  font-size: var(--cp-text-size-sm);
-  line-height: var(--cp-line-height-md);
-  letter-spacing: var(--cp-letter-spacing-sm);
   margin-bottom: var(--cp-spacing-md);
   color: var(--cp-text-primary);
-  z-index: 2;
+  font-size: var(--cp-text-size-sm);
+  letter-spacing: var(--cp-letter-spacing-sm);
+  line-height: var(--cp-line-height-md);
 
   &::first-letter {
     text-transform: capitalize;
@@ -55,13 +55,14 @@ defineOptions({
     display: flex;
     align-items: center;
     gap: var(--cp-spacing-sm);
+    transition: transform 300ms var(--cp-easing-elastic) 100ms;
   }
 
   &__tooltip {
     display: flex;
-    padding: var(--cp-spacing-sm);
     align-items: center;
     justify-content: center;
+    padding: var(--cp-spacing-sm);
     border-radius: var(--cp-radius-full);
     color: var(--cp-foreground-quaternary);
     outline-offset: calc(var(--cp-dimensions-1) * -0.75);
@@ -83,8 +84,8 @@ defineOptions({
 
   &__iconWrapper {
     position: absolute;
-    left: 0;
     top: 0;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -99,14 +100,9 @@ defineOptions({
   &__invalidIcon {
     width: var(--cp-dimensions-4);
     height: var(--cp-dimensions-4);
-
     color: var(--cp-foreground-error-primary);
   }
 
-  &__content {
-    transition: transform 300ms var(--cp-easing-elastic) 100ms;
-  }
-
   &--isInvalid .baseInputLabel__content {
     transform: translate3d(calc(var(--cp-dimensions-6) + var(--cp-spacing-sm)), 0, 0);
   }

package/src/components/BaseSelectClearButton.vue

@@ -10,25 +10,24 @@ import CpIcon from '@/components/CpIcon.vue'
 
 <style lang="scss">
 .baseSelectClearButton {
-  width: var(--cp-dimensions-6);
-  height: var(--cp-dimensions-6);
-
   position: absolute;
   z-index: 1;
   top: 50%;
   right: var(--cp-dimensions-3_5);
   display: flex;
+  width: var(--cp-dimensions-6);
+  height: var(--cp-dimensions-6);
   justify-content: center;
   padding: var(--cp-dimensions-1);
-  cursor: pointer;
-  transform: translateY(-50%);
-  color: var(--cp-foreground-secondary);
   border-radius: var(--cp-radius-full);
   background-color: transparent;
+  color: var(--cp-foreground-secondary);
+  cursor: pointer;
+  transform: translateY(-50%);
 
   &:hover {
-    color: var(--cp-foreground-secondary-hover);
     background-color: var(--cp-background-primary-hover);
+    color: var(--cp-foreground-secondary-hover);
   }
 
   &:focus {

package/src/components/CpAccordion.vue

@@ -41,9 +41,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useId, useSlots } from 'vue'
-
 import type { MenuItem } from 'primevue/menuitem'
+import { computed, ref, useId, useSlots } from 'vue'
 
 export interface CpAccordionBaseProps {
   defaultOpenState?: boolean
@@ -114,17 +113,17 @@ const handleClick = () => (isToggled.value = !isToggled.value)
 <style lang="scss">
 .cpAccordion {
   display: flex;
+  width: 100%;
   flex-direction: column;
   background-color: var(--cp-background-primary);
-  width: 100%;
 
   &__header {
     position: relative;
-    border-radius: var(--cp-radius-none);
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     padding: var(--cp-spacing-lg);
+    border-radius: var(--cp-radius-none);
     gap: var(--cp-spacing-lg);
 
     &:hover,
@@ -133,51 +132,51 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     }
 
     &:has(.cpAccordion__trigger:focus-visible) {
-      box-shadow: var(--cp-shadow-focus-ring-accent);
-      border-radius: var(--cp-radius-md);
       z-index: 1;
+      border-radius: var(--cp-radius-md);
+      box-shadow: var(--cp-shadow-focus-ring-accent);
     }
   }
 
   &__trigger {
     position: absolute;
-    inset: 0;
     width: 100%;
     height: 100%;
-    background: transparent;
-    border: 0;
     padding: 0;
+    border: 0;
     margin: 0;
+    background: transparent;
     cursor: pointer;
+    inset: 0;
     outline: none;
   }
 
   &__title {
-    flex: 1 1 0%;
-    min-width: 0;
     display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 0%;
     align-items: center;
-    gap: var(--cp-spacing-lg);
-    font-weight: 500;
+    order: 1;
     font-size: var(--cp-text-size-sm);
+    font-weight: 500;
+    gap: var(--cp-spacing-lg);
     line-height: var(--cp-line-height-sm);
-    overflow: hidden;
-    order: 1;
   }
 
   &__icon {
-    color: var(--cp-foreground-secondary);
     flex-shrink: 0;
     padding: var(--cp-spacing-xs);
+    color: var(--cp-foreground-secondary);
     pointer-events: none;
   }
 
   &__leading {
     display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
     overflow: hidden;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
     text-align: left;
   }
 
@@ -190,30 +189,30 @@ const handleClick = () => (isToggled.value = !isToggled.value)
 
   &__trailingSlot {
     display: flex;
-    align-items: center;
     flex-shrink: 0;
+    align-items: center;
     order: 2;
     pointer-events: auto;
   }
 
   &__trailingIcons {
     display: flex;
-    align-items: center;
     flex-shrink: 0;
-    gap: var(--cp-spacing-lg);
+    align-items: center;
     order: 3;
+    gap: var(--cp-spacing-lg);
     pointer-events: none;
   }
 
   &__actions {
     position: absolute;
-    right: 0;
+    z-index: 1;
     top: 0;
-    height: 100%;
-    padding: 0 var(--cp-spacing-md) 0 15%;
+    right: 0;
     display: flex;
+    height: 100%;
     align-items: center;
-    z-index: 1;
+    padding: 0 var(--cp-spacing-md) 0 15%;
     pointer-events: none;
 
     & > .cpItemActions {
@@ -235,7 +234,7 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     }
 
     .cpAccordion__actions {
-      background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0) 100%);
+      background: linear-gradient(270deg, var(--cp-utility-neutral-100) 0%, rgba(242, 246, 250, 0%) 100%);
     }
   }
 }
@@ -252,8 +251,8 @@ const handleClick = () => (isToggled.value = !isToggled.value)
     }
 
     &__trailingSlot {
-      order: 3;
       flex-basis: 100%;
+      order: 3;
       padding-left: var(--cp-spacing-3xl);
     }
 

package/src/components/CpAccordionGroup.vue

@@ -25,8 +25,8 @@ const groupClass = computed(() => {
 <style lang="scss">
 .cpAccordionGroup {
   display: flex;
-  flex-direction: column;
   width: 100%;
+  flex-direction: column;
 
   &--isDefault {
     .cpAccordion {
@@ -39,9 +39,9 @@ const groupClass = computed(() => {
   }
 
   &--isPrimary {
+    overflow: hidden;
     border: fn.px-to-rem(1) solid var(--cp-border-soft);
     border-radius: var(--cp-radius-md);
-    overflow: hidden;
 
     .cpAccordion:not(:last-child) {
       border-bottom: fn.px-to-rem(1) solid var(--cp-border-soft);

package/src/components/CpAlert.vue

@@ -63,6 +63,7 @@
 import { computed, useSlots } from 'vue'
 
 import type { Colors } from '@/constants'
+
 import { capitalizeFirstLetter } from '@/helpers'
 
 type AlertColors = Extract<Colors, 'neutral' | 'accent' | 'success' | 'warning' | 'error'>
@@ -153,25 +154,25 @@ const dynamicClasses = computed(() => [
 
 <style lang="scss">
 .cpAlert {
-  width: 100%;
   display: flex;
+  width: 100%;
 
   &__inner {
     position: relative;
     display: flex;
-    align-items: flex-start;
     overflow: hidden;
-    padding: var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-md);
-    gap: var(--cp-spacing-md);
     width: 100%;
-    background-color: var(--cp-background-primary);
+    align-items: flex-start;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-lg) var(--cp-spacing-md);
     border: 1px solid var(--cp-alert-border);
     border-radius: var(--cp-radius-md);
     margin: var(--cp-spacing-sm);
+    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)
         fn.px-to-rem(-4) var(--cp-drop-shadow-3xs-color),
       0 0 0 var(--cp-dimensions-1) var(--cp-alert-shadow);
+    gap: var(--cp-spacing-md);
   }
 
   &__icon {
@@ -182,10 +183,10 @@ const dynamicClasses = computed(() => [
   }
 
   &__body {
-    flex: 1;
     display: flex;
-    gap: var(--cp-spacing-md);
+    flex: 1;
     flex-direction: column;
+    gap: var(--cp-spacing-md);
   }
 
   &__content {
@@ -202,17 +203,17 @@ const dynamicClasses = computed(() => [
   }
 
   &__title {
+    color: var(--cp-alert-title);
     font-size: var(--cp-text-size-sm);
-    line-height: var(--cp-line-height-sm);
     font-weight: 600;
-    color: var(--cp-alert-title);
+    line-height: var(--cp-line-height-sm);
   }
 
   &__contentText {
+    color: var(--cp-alert-text);
     font-size: var(--cp-text-size-sm);
-    line-height: var(--cp-line-height-sm);
     font-weight: 400;
-    color: var(--cp-alert-text);
+    line-height: var(--cp-line-height-sm);
   }
 
   &--isInline {

package/src/components/CpBadge.vue

@@ -69,10 +69,10 @@ const componentDynamicClasses = computed(() => [
   $clear-icon-width
 ) {
   &--#{$size} {
+    padding: $padding;
     font-size: $font-size;
-    line-height: $line-height;
     font-weight: 400;
-    padding: $padding;
+    line-height: $line-height;
 
     &.cpBadge--isSquare {
       border-radius: $square-radius;
@@ -96,13 +96,13 @@ const componentDynamicClasses = computed(() => [
 
 @mixin cp-badge-themed($className, $color, $bg-color, $solid-color, $solid-bg-color, $outline-color) {
   &--is#{$className} {
-    color: $color;
     background-color: $bg-color;
+    color: $color;
     outline-color: $outline-color;
 
     &.cpBadge--isSolid {
-      color: $solid-color;
       background-color: $solid-bg-color;
+      color: $solid-color;
     }
 
     &.cpBadge--isOutline {
@@ -138,7 +138,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-dimensions-5),
     var(--cp-dimensions-4_5)
   );
-
   @include cp-badge-sized(
     'md',
     var(--cp-text-size-sm),
@@ -149,7 +148,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-dimensions-4),
     var(--cp-dimensions-3_5)
   );
-
   @include cp-badge-sized(
     'sm',
     var(--cp-text-size-xs),
@@ -160,7 +158,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-dimensions-4),
     var(--cp-dimensions-3_5)
   );
-
   @include cp-badge-sized(
     'xs',
     var(--cp-text-size-xs),
@@ -171,7 +168,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-dimensions-3),
     var(--cp-dimensions-2_5)
   );
-
   @include cp-badge-sized(
     '2xs',
     var(--cp-text-size-xs),
@@ -182,7 +178,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-dimensions-3),
     var(--cp-dimensions-2_5)
   );
-
   @include cp-badge-themed(
     'Neutral',
     var(--cp-foreground-primary),
@@ -191,7 +186,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-solid),
     var(--cp-border-strong)
   );
-
   @include cp-badge-themed(
     'Accent',
     var(--cp-foreground-accent-primary),
@@ -200,7 +194,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-accent-solid),
     var(--cp-border-accent-primary)
   );
-
   @include cp-badge-themed(
     'Error',
     var(--cp-foreground-error-primary),
@@ -209,7 +202,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-error-solid),
     var(--cp-border-error-primary)
   );
-
   @include cp-badge-themed(
     'Warning',
     var(--cp-foreground-warning-primary),
@@ -218,7 +210,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-warning-solid),
     var(--cp-border-warning-primary)
   );
-
   @include cp-badge-themed(
     'Success',
     var(--cp-foreground-success-primary),
@@ -227,7 +218,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-success-solid),
     var(--cp-border-success-primary)
   );
-
   @include cp-badge-themed(
     'Blue',
     var(--cp-foreground-blue-primary),
@@ -236,7 +226,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-blue-solid),
     var(--cp-border-blue-primary)
   );
-
   @include cp-badge-themed(
     'Pink',
     var(--cp-foreground-pink-primary),
@@ -245,7 +234,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-pink-solid),
     var(--cp-border-pink-primary)
   );
-
   @include cp-badge-themed(
     'Magenta',
     var(--cp-foreground-magenta-primary),
@@ -254,7 +242,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-magenta-solid),
     var(--cp-border-magenta-primary)
   );
-
   @include cp-badge-themed(
     'Yellow',
     var(--cp-foreground-yellow-primary),
@@ -263,7 +250,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-yellow-solid),
     var(--cp-border-yellow-primary)
   );
-
   @include cp-badge-themed(
     'White',
     var(--cp-foreground-primary),
@@ -272,7 +258,6 @@ const componentDynamicClasses = computed(() => [
     var(--cp-background-primary),
     var(--cp-border-soft)
   );
-
   @include cp-badge-themed(
     'Disabled',
     var(--cp-text-disabled),