@citizenplane/pimp 10.1.9 → 10.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.1.9",
+  "version": "10.1.11",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/assets/css/colors.css

@@ -85,17 +85,17 @@
   --cp-colors-red-900: #48000c;
   --cp-colors-red-1000: #320006;
 
-  --cp-colors-violet-50: #f8f9ff;
-  --cp-colors-violet-100: #eaecff;
-  --cp-colors-violet-200: #ccd0ff;
-  --cp-colors-violet-300: #acb1ff;
-  --cp-colors-violet-400: #807dff;
-  --cp-colors-violet-500: #603dfd;
-  --cp-colors-violet-600: #4a00da;
-  --cp-colors-violet-700: #3400a0;
-  --cp-colors-violet-800: #2a0084;
-  --cp-colors-violet-900: #1f0067;
-  --cp-colors-violet-1000: #13004a;
+  --cp-colors-accent-50: #f8f9ff;
+  --cp-colors-accent-100: #eaecff;
+  --cp-colors-accent-200: #ccd0ff;
+  --cp-colors-accent-300: #acb1ff;
+  --cp-colors-accent-400: #807dff;
+  --cp-colors-accent-500: #603dfd;
+  --cp-colors-accent-600: #4a00da;
+  --cp-colors-accent-700: #3400a0;
+  --cp-colors-accent-800: #2a0084;
+  --cp-colors-accent-900: #1f0067;
+  --cp-colors-accent-1000: #13004a;
 
   --cp-colors-white: #ffffff;
 

package/src/assets/css/tokens.css

@@ -6,7 +6,7 @@
   --cp-background-surface: var(--cp-colors-white);
   --cp-background-primary: var(--cp-colors-white);
   --cp-background-primary-hover: var(--cp-colors-grey-100);
-  --cp-background-primary-hover-alt: var(--cp-colors-violet-100);
+  --cp-background-primary-hover-alt: var(--cp-colors-accent-100);
   --cp-background-secondary: var(--cp-colors-grey-50);
   --cp-background-secondary-hover: var(--cp-colors-grey-100);
   --cp-background-tertiary: var(--cp-colors-grey-100);
@@ -18,12 +18,12 @@
   --cp-background-disabled: var(--cp-colors-grey-50);
   --cp-background-overlay: rgba(62, 62, 91, 0.86);
 
-  --cp-background-accent-primary: var(--cp-colors-violet-50);
-  --cp-background-accent-primary-hover: var(--cp-colors-violet-100);
-  --cp-background-accent-secondary: var(--cp-colors-violet-100);
-  --cp-background-accent-secondary-hover: var(--cp-colors-violet-200);
-  --cp-background-accent-solid: var(--cp-colors-violet-500);
-  --cp-background-accent-solid-hover: var(--cp-colors-violet-600);
+  --cp-background-accent-primary: var(--cp-colors-accent-50);
+  --cp-background-accent-primary-hover: var(--cp-colors-accent-100);
+  --cp-background-accent-secondary: var(--cp-colors-accent-100);
+  --cp-background-accent-secondary-hover: var(--cp-colors-accent-200);
+  --cp-background-accent-solid: var(--cp-colors-accent-500);
+  --cp-background-accent-solid-hover: var(--cp-colors-accent-600);
 
   --cp-background-error-primary: var(--cp-colors-red-50);
   --cp-background-error-primary-hover: var(--cp-colors-red-100);
@@ -81,9 +81,9 @@
   --cp-border-disabled: var(--cp-colors-grey-100);
   --cp-border-solid: var(--cp-colors-grey-800);
 
-  --cp-border-accent-primary: var(--cp-colors-violet-200);
-  --cp-border-accent-primary-hover: var(--cp-colors-violet-300);
-  --cp-border-accent-solid: var(--cp-colors-violet-500);
+  --cp-border-accent-primary: var(--cp-colors-accent-200);
+  --cp-border-accent-primary-hover: var(--cp-colors-accent-300);
+  --cp-border-accent-solid: var(--cp-colors-accent-500);
 
   --cp-border-error-primary: var(--cp-colors-red-200);
   --cp-border-error-solid: var(--cp-colors-red-500);
@@ -115,10 +115,10 @@
   --cp-foreground-placeholder: var(--cp-colors-grey-500);
   --cp-foreground-white: var(--cp-colors-white);
 
-  --cp-foreground-accent-primary: var(--cp-colors-violet-500);
-  --cp-foreground-accent-primary-hover: var(--cp-colors-violet-600);
-  --cp-foreground-accent-secondary: var(--cp-colors-violet-400);
-  --cp-foreground-accent-secondary-hover: var(--cp-colors-violet-500);
+  --cp-foreground-accent-primary: var(--cp-colors-accent-500);
+  --cp-foreground-accent-primary-hover: var(--cp-colors-accent-600);
+  --cp-foreground-accent-secondary: var(--cp-colors-accent-400);
+  --cp-foreground-accent-secondary-hover: var(--cp-colors-accent-500);
 
   --cp-foreground-error-primary: var(--cp-colors-red-500);
   --cp-foreground-error-primary-hover: var(--cp-colors-red-600);
@@ -163,10 +163,10 @@
   --cp-text-placeholder: var(--cp-colors-grey-500);
   --cp-text-white: var(--cp-colors-white);
 
-  --cp-text-accent-primary: var(--cp-colors-violet-500);
-  --cp-text-accent-primary-hover: var(--cp-colors-violet-600);
-  --cp-text-accent-secondary: var(--cp-colors-violet-700);
-  --cp-text-accent-secondary-hover: var(--cp-colors-violet-800);
+  --cp-text-accent-primary: var(--cp-colors-accent-500);
+  --cp-text-accent-primary-hover: var(--cp-colors-accent-600);
+  --cp-text-accent-secondary: var(--cp-colors-accent-700);
+  --cp-text-accent-secondary-hover: var(--cp-colors-accent-800);
 
   --cp-text-error-primary: var(--cp-colors-red-500);
   --cp-text-error-primary-hover: var(--cp-colors-red-600);
@@ -203,17 +203,17 @@
   --cp-text-yellow-secondary: var(--cp-colors-yellow-700);
   --cp-text-yellow-secondary-hover: var(--cp-colors-yellow-800);
 
-  --cp-utility-accent-50: var(--cp-colors-violet-50);
-  --cp-utility-accent-100: var(--cp-colors-violet-100);
-  --cp-utility-accent-200: var(--cp-colors-violet-200);
-  --cp-utility-accent-300: var(--cp-colors-violet-300);
-  --cp-utility-accent-400: var(--cp-colors-violet-400);
-  --cp-utility-accent-500: var(--cp-colors-violet-500);
-  --cp-utility-accent-600: var(--cp-colors-violet-600);
-  --cp-utility-accent-700: var(--cp-colors-violet-700);
-  --cp-utility-accent-800: var(--cp-colors-violet-800);
-  --cp-utility-accent-900: var(--cp-colors-violet-900);
-  --cp-utility-accent-1000: var(--cp-colors-violet-1000);
+  --cp-utility-accent-50: var(--cp-colors-accent-50);
+  --cp-utility-accent-100: var(--cp-colors-accent-100);
+  --cp-utility-accent-200: var(--cp-colors-accent-200);
+  --cp-utility-accent-300: var(--cp-colors-accent-300);
+  --cp-utility-accent-400: var(--cp-colors-accent-400);
+  --cp-utility-accent-500: var(--cp-colors-accent-500);
+  --cp-utility-accent-600: var(--cp-colors-accent-600);
+  --cp-utility-accent-700: var(--cp-colors-accent-700);
+  --cp-utility-accent-800: var(--cp-colors-accent-800);
+  --cp-utility-accent-900: var(--cp-colors-accent-900);
+  --cp-utility-accent-1000: var(--cp-colors-accent-1000);
 
   --cp-utility-blue-50: var(--cp-colors-blue-50);
   --cp-utility-blue-100: var(--cp-colors-blue-100);

package/src/components/BaseInputLabel.vue

@@ -45,7 +45,7 @@ defineOptions({
   letter-spacing: var(--cp-letter-spacing-sm);
   margin-bottom: var(--cp-spacing-md);
   color: var(--cp-text-primary);
-  z-index: 1;
+  z-index: 2;
 
   &::first-letter {
     text-transform: capitalize;

package/src/components/CpBadge.vue

@@ -125,16 +125,6 @@ const handleClear = () => emit('onClear')
     }
   }
 
-  &--isDisabled {
-    background-color: var(--cp-background-disabled);
-    color: var(--cp-text-disabled);
-
-    &.cpBadge--isStroked,
-    &.cpBadge--isDashed {
-      outline-color: var(--cp-border-disabled);
-    }
-  }
-
   @include cp-badge-dynamic-padding(
     var(--cp-spacing-md),
     var(--cp-spacing-sm),
@@ -311,6 +301,16 @@ const handleClear = () => emit('onClear')
     var(--cp-border-error-primary)
   ); // TODO: Should be replace by ERROR
 
+  &--isDisabled {
+    background-color: var(--cp-background-disabled);
+    color: var(--cp-text-disabled);
+
+    &.cpBadge--isStroked,
+    &.cpBadge--isDashed {
+      outline-color: var(--cp-border-disabled);
+    }
+  }
+
   &__icon {
     width: var(--cp-dimensions-4);
     aspect-ratio: 1/1;

package/src/components/CpButton.vue

@@ -162,7 +162,7 @@ const dynamicClasses = computed(() => {
 
 .cpButton {
   border-radius: fn.px-to-rem(1000);
-  background-color: transparent;
+  background-color: var(--cp-background-primary);
   padding: var(--cp-spacing-md) var(--cp-spacing-lg);
   font-size: var(--cp-text-size-md);
   box-shadow: var(--cp-shadows-3xs);

package/src/components/CpDate.vue

@@ -431,16 +431,16 @@ watch(year, handleUpdate)
   &--isInvalid {
     .cpDate__inputs,
     .cpDate__inputs:hover {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-primary);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
     }
 
     .cpDate__inputs:focus-within {
-      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);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) color-mix(in srgb, #{var(--cp-border-error-solid)} 40%, transparent);
     }
 
     .cpDate__divider {
-      background-color: var(--cp-border-error-primary);
+      background-color: var(--cp-border-error-solid);
     }
   }
 

package/src/components/CpInput.vue

@@ -195,6 +195,10 @@ onMounted(async () => {
     margin-bottom: var(--cp-spacing-md);
   }
 
+  &:has(.v-popper__popper--shown) {
+    z-index: 3;
+  }
+
   &__container {
     z-index: 1;
     position: relative;
@@ -209,7 +213,7 @@ onMounted(async () => {
     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);
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-strong);
     appearance: none;
     border-radius: var(--cp-radius-md);
     width: 100%;
@@ -222,7 +226,7 @@ onMounted(async () => {
       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);
+        0 0 0 var(--cp-dimensions-0_25) var(--cp-border-strong-hover);
     }
 
     &:focus {

package/src/components/CpMultiselect.vue

@@ -274,6 +274,10 @@ onMounted(() => overrideAlignOverlay())
   flex-direction: column;
   gap: var(--cp-spacing-md);
 
+  &:has(.cpMultiselect__input:disabled) {
+    cursor: not-allowed;
+  }
+
   &__label {
     margin-bottom: 0;
   }
@@ -313,8 +317,8 @@ onMounted(() => overrideAlignOverlay())
     }
 
     &:has(input:disabled) {
-      background-color: var(--cp-background-white);
-      cursor: not-allowed;
+      background: var(--cp-background-disabled);
+      pointer-events: none;
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
       color: var(--cp-text-disabled);
 

package/src/components/CpTable.vue

@@ -699,7 +699,13 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       box-shadow: inset 0 calc(var(--cp-dimensions-0_25) * -1) 0 var(--cp-border-soft);
     }
 
-    &--body:has(+ #{&}--isFullWidth) {
+    &--body:has(+ #{&}--isFullWidth),
+    &--isFullWidth:has(+ .cpTable__row:hover) {
+      box-shadow: none !important;
+    }
+
+    &--isFullWidth:has(+ .cpTable__row:is(:hover, :focus, :focus-within), + .cpTable__row--isSelected)
+      + .cpTable__row::after {
       box-shadow: none !important;
     }
 
@@ -708,6 +714,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
 
     &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
+      position: relative;
       transition: background-color 100ms ease-in-out;
     }
 
@@ -715,11 +722,10 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       background-color: var(--cp-background-primary-hover);
     }
 
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
-      position: relative;
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within)::after {
+    &--body:not(#{&}--isFullWidth):not(
+        :has(+ #{&}--isSelected),
+        :has(+ .cpTable__row:is(:hover, :focus, :focus-within))
+      ):is(:hover, :focus, :focus-within)::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -785,7 +791,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       position: relative;
     }
 
-    &--isSelected::after {
+    &--isSelected:not(:has(+ #{&}--isFullWidth))::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -1012,7 +1018,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   // On desktop devices, display options only on row focus or hover
   @media (hover: hover) and (pointer: fine) {
     &__cell--isOptions {
-      opacity: 0;
       min-width: calc(var(--cp-dimensions-1) * 12.5);
       transition: none;
     }
@@ -1020,6 +1025,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     // Actions wrapper on desktop : displayed only if there are quick actions inside
     &__cell--isOptions .cpTable__actions {
       position: absolute;
+      opacity: 0;
       top: 50%;
       transform: translateY(-50%);
       right: var(--cp-dimensions-3);
@@ -1040,9 +1046,9 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       display: flex;
     }
 
-    &__row:focus &__cell--isOptions,
-    &__row:focus-within &__cell--isOptions,
-    &__row:hover &__cell--isOptions {
+    &__row:focus &__cell--isOptions > .cpTable__actions,
+    &__row:focus-within &__cell--isOptions > .cpTable__actions,
+    &__row:hover &__cell--isOptions > .cpTable__actions {
       opacity: 1;
     }
   }

package/src/components/CpTelInput.vue

@@ -432,7 +432,7 @@ const handleOnValidate = (phoneObject: PhoneObject) => {
   }
 
   &__error {
-    color: var(--cp-text-error-primary-hover);
+    color: var(--cp-text-error-primary);
 
     &::first-letter {
       text-transform: capitalize;

package/src/stories/CpBadge.stories.ts

@@ -208,6 +208,18 @@ export const IsDisabled: Story = {
   render: defaultRender,
 }
 
+export const IsDisabledWithIcon: Story = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+    label: 'Disabled',
+    color: Colors.RED,
+    leadingIcon: 'check',
+    trailingIcon: 'arrow-right',
+  },
+  render: defaultRender,
+}
+
 export const WithSlot: Story = {
   render: (args: Args) => ({
     components: { CpBadge },