@citizenplane/pimp 10.6.0 → 10.6.2

package/package.json

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

package/src/assets/css/shadows.css

@@ -10,6 +10,7 @@
   --cp-drop-shadow-2xs-offset-x: 0;
   --cp-drop-shadow-2xs-offset-y: 3px;
   --cp-drop-shadow-2xs-spread: -2px;
+  --cp-drop-shadow-2xs-inset-spread: -1px;
   --cp-drop-shadow-xs-blur: 11px;
   --cp-drop-shadow-xs-color: var(--cp-colors-grey-shadow-color-12-5);
   --cp-drop-shadow-xs-offset-x: 0;

package/src/assets/css/tokens.css

@@ -365,6 +365,8 @@
     var(--cp-drop-shadow-3xs-blur) var(--cp-drop-shadow-3xs-inset-spread) var(--cp-drop-shadow-3xs-color);
   --cp-shadows-2xs: var(--cp-drop-shadow-2xs-offset-x) var(--cp-drop-shadow-2xs-offset-y) var(--cp-drop-shadow-2xs-blur)
     var(--cp-drop-shadow-2xs-spread) var(--cp-drop-shadow-2xs-color);
+  --cp-shadows-2xs-inset: var(--cp-drop-shadow-2xs-offset-x) var(--cp-drop-shadow-2xs-offset-y)
+    var(--cp-drop-shadow-2xs-blur) var(--cp-drop-shadow-2xs-inset-spread) var(--cp-drop-shadow-2xs-color);
   --cp-shadows-xs: var(--cp-drop-shadow-xs-offset-x) var(--cp-drop-shadow-xs-offset-y) var(--cp-drop-shadow-xs-blur)
     var(--cp-drop-shadow-xs-spread) var(--cp-drop-shadow-xs-color);
   --cp-shadows-sm: var(--cp-drop-shadow-sm-offset-x) var(--cp-drop-shadow-sm-offset-y) var(--cp-drop-shadow-sm-blur)

package/src/components/CpMenuItem.vue

@@ -92,6 +92,7 @@ const handleItemClick = async (event: Event) => {
     }
 
     position: relative;
+    color: var(--cp-text-primary);
     display: flex;
     width: 100%;
     align-items: center;

package/src/components/CpTable.vue

@@ -695,75 +695,15 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   }
 
   &__row {
-    &--body:not(:last-of-type):not(#{&}--isFullWidth) {
-      box-shadow: inset 0 calc(var(--cp-dimensions-0_25) * -1) 0 var(--cp-border-soft);
-    }
-
-    &--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;
-    }
-
-    &--isFullWidth {
-      border-top: none;
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) {
-      position: relative;
-      transition: background-color 100ms ease-in-out;
+    &--body:not(:last-of-type) {
+      border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     }
 
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within) td {
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
       background-color: var(--cp-background-primary-hover);
-    }
-
-    &--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;
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-      pointer-events: none;
-    }
-
-    &--body:not(#{&}--isFullWidth):hover td:first-child,
-    &--body:not(#{&}--isFullWidth):focus td:first-child,
-    &--body:not(#{&}--isFullWidth):focus-within td:first-child {
-      border-top-left-radius: var(--cp-radius-md);
-      border-bottom-left-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):hover td:last-child,
-    &--body:not(#{&}--isFullWidth):focus td:last-child,
-    &--body:not(#{&}--isFullWidth):focus-within td:last-child {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):hover
-      td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus
-      td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions:not([style*='display: none'])):focus-within
-      td:nth-last-child(2) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):hover td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus td:nth-last-child(2),
-    &--body:not(#{&}--isFullWidth):has(.cpTable__cell--isOptions[style*='display: none']):focus-within
-      td:nth-last-child(2) {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
+      transition: background-color 100ms ease-in-out;
     }
 
     &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
@@ -774,8 +714,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     &--isFullWidth td {
       padding: var(--cp-spacing-md);
       background-color: var(--cp-background-secondary);
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
     }
 
     &--isClickable {
@@ -787,49 +725,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       color: var(--cp-text-accent-primary);
     }
 
-    &--isSelected {
-      position: relative;
-    }
-
-    &--isSelected:not(:has(+ #{&}--isFullWidth))::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: var(--cp-radius-md);
-      box-shadow: inset 0 0 0 var(--cp-dimensions-0_25) var(--cp-utility-accent-100);
-      pointer-events: none;
-    }
-
-    &--isSelected td:first-child {
-      border-top-left-radius: var(--cp-radius-md);
-      border-bottom-left-radius: var(--cp-radius-md);
-    }
-
-    &--isSelected td:last-child {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--isSelected:has(.cpTable__cell--isOptions:not([style*='display: none'])) td:nth-last-child(2) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &--isSelected:has(.cpTable__cell--isOptions[style*='display: none']) td:nth-last-child(2) {
-      border-top-right-radius: var(--cp-radius-md);
-      border-bottom-right-radius: var(--cp-radius-md);
-    }
-
-    &--body:not(#{&}--isFullWidth):is(:hover, :focus, :focus-within),
-    &--body:not(#{&}--isFullWidth).cpTable__row--isSelected {
-      box-shadow: none !important;
-    }
-
-    &--body:not(#{&}--isFullWidth):has(+ #{&}--isSelected),
-    &--body:not(#{&}--isFullWidth):has(+ #{&}:is(:hover, :focus, :focus-within)) {
-      box-shadow: none !important;
-    }
-
     &--body td {
       font-size: var(--cp-text-size-sm);
     }
@@ -873,28 +768,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
   }
 
-  &:has(
-    .cpTable__row--body:first-of-type:is(:hover, :focus, :focus-within),
-    .cpTable__row--body:first-of-type.cpTable__row--isSelected
-  ) {
-    .cpTable__column:after {
-      background-color: transparent;
-    }
-  }
-
-  &:has(
-    .cpTable__row--body:last-of-type:is(:hover, :focus, :focus-within),
-    .cpTable__row--body:last-of-type.cpTable__row--isSelected
-  ) {
-    .cpTable__container--hasPagination {
-      border-bottom-color: transparent;
-    }
-  }
-
-  &__table:has(.cpTable__row--body:first-of-type.cpTable__row--isFullWidth) &__column:after {
-    background-color: transparent;
-  }
-
   &__columnEditor {
     padding-right: calc(var(--cp-spacing-lg) + var(--cp-dimensions-0_5));
 

package/src/components/icons/IconOffline.vue

@@ -1,25 +1,12 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-path="url(#clip0_7211_17582)">
-      <path
-        d="M5.89999 2.37764C6.09017 2.30657 6.28499 2.24487 6.4839 2.1931C6.39865 2.32123 6.31621 2.45105 6.23662 2.58244C6.04586 2.89736 6.14652 3.30729 6.46144 3.49805C6.77636 3.68881 7.18629 3.58815 7.37705 3.27323C7.56648 2.9605 7.77434 2.65795 7.99996 2.36728C8.99641 3.65107 9.64661 5.1666 9.89209 6.76777C9.94788 7.13171 10.2881 7.38151 10.6521 7.32572C11.016 7.26992 11.2658 6.92966 11.21 6.56572C10.9702 5.00162 10.3916 3.50921 9.51615 2.1933C11.8874 2.81073 13.688 4.84224 13.9633 7.33342H12C11.6318 7.33342 11.3333 7.63189 11.3333 8.00008C11.3333 8.36827 11.6318 8.66675 12 8.66675H13.9634C13.903 9.21371 13.7692 9.73787 13.5723 10.2296C13.4354 10.5714 13.6015 10.9594 13.9433 11.0963C14.2851 11.2332 14.6731 11.0671 14.81 10.7253C15.1478 9.88191 15.3333 8.96184 15.3333 8.00008C15.3333 3.94999 12.05 0.666748 7.99996 0.666748C7.0982 0.666748 6.233 0.829818 5.43327 1.12866C5.08837 1.25754 4.91326 1.64162 5.04214 1.98651C5.17102 2.33141 5.55509 2.50652 5.89999 2.37764Z"
-      />
-      <path
-        d="M12.6926 13.6356C11.4213 14.6953 9.78431 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0502 0.666626 8.00008C0.666626 6.21573 1.30474 4.57878 2.36443 3.30742L0.861888 1.80488C0.601539 1.54453 0.601539 1.12242 0.861888 0.862071C1.12224 0.601722 1.54435 0.601722 1.8047 0.862071L15.138 14.1954C15.3984 14.4558 15.3984 14.8779 15.138 15.1382C14.8777 15.3986 14.4556 15.3986 14.1952 15.1382L12.6926 13.6356ZM3.31198 4.25497C2.6212 5.11838 2.16436 6.17593 2.03653 7.33342H4.70002C4.74028 6.83724 4.81443 6.34642 4.92117 5.86417L3.31198 4.25497ZM6.0731 7.01609C6.05976 7.12155 6.04817 7.22733 6.03835 7.33342H6.39042L6.0731 7.01609ZM7.72375 8.66675H6.03835C6.20582 10.4755 6.88684 12.1988 7.99996 13.6329C8.72056 12.7045 9.26007 11.6549 9.5964 10.5394L7.72375 8.66675ZM10.6481 11.5911C10.3576 12.3687 9.97817 13.1124 9.51603 13.807C10.3417 13.5922 11.0979 13.2058 11.7451 12.6881L10.6481 11.5911ZM4.70002 8.66675C4.84949 10.5089 5.46603 12.2771 6.48376 13.8069C4.1125 13.1894 2.31196 11.1579 2.03658 8.66675H4.70002Z"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_7211_17582">
-        <rect width="16" height="16" />
-      </clipPath>
-    </defs>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.29297 1.29297C1.68348 0.902506 2.31652 0.902506 2.70703 1.29297L22.707 21.293C23.0975 21.6835 23.0975 22.3165 22.707 22.707C22.3165 23.0976 21.6835 23.0976 21.293 22.707L19.0391 20.4531C17.132 22.0427 14.6765 23 12 23C5.92487 23 1 18.0751 1 12C1 9.32347 1.95734 6.86798 3.54688 4.96094L1.29297 2.70703C0.90249 2.3165 0.90246 1.68348 1.29297 1.29297ZM3.05469 13C3.46776 16.7367 6.16877 19.7838 9.72559 20.71C8.19906 18.4154 7.274 15.7631 7.0498 13H3.05469ZM15.9727 17.3867C15.5369 18.5529 14.9675 19.6682 14.2744 20.71C15.5125 20.3877 16.6466 19.8086 17.6172 19.0322L15.9727 17.3867ZM9.05762 13C9.30881 15.7132 10.3303 18.2981 12 20.4492C13.0809 19.0566 13.89 17.4819 14.3945 15.8086L11.5859 13H9.05762ZM4.96777 6.38281C3.93179 7.67785 3.2464 9.26396 3.05469 11H7.0498C7.1102 10.2557 7.22172 9.51927 7.38184 8.7959L4.96777 6.38281ZM9.05762 11H9.58594L9.10938 10.5244C9.08939 10.6824 9.07234 10.841 9.05762 11Z"
+    />
+    <path
+      d="M12 1C18.0751 1 23 5.92487 23 12C23 13.4426 22.7215 14.8228 22.2148 16.0879C22.0095 16.6004 21.4277 16.8498 20.915 16.6445C20.4023 16.4392 20.1531 15.8564 20.3584 15.3438C20.6537 14.6063 20.8547 13.8203 20.9453 13H18C17.4477 13 17 12.5523 17 12C17 11.4477 17.4477 11 18 11H20.9453C20.5322 7.2633 17.8312 4.21623 14.2744 3.29004C15.5876 5.26385 16.4558 7.50256 16.8154 9.84863C16.899 10.3943 16.5242 10.9044 15.9785 10.9883C15.4326 11.072 14.9216 10.6973 14.8379 10.1514C14.4697 7.74969 13.4946 5.47641 12 3.55078C11.6616 3.98679 11.3496 4.44106 11.0654 4.91016C10.7792 5.38216 10.1646 5.53298 9.69238 5.24707C9.22 4.96093 9.06933 4.34543 9.35547 3.87305C9.47474 3.67616 9.59783 3.48108 9.72559 3.28906C9.42729 3.36671 9.13483 3.45983 8.84961 3.56641C8.33237 3.75944 7.75675 3.4967 7.56348 2.97949C7.3702 2.46216 7.63307 1.88667 8.15039 1.69336C9.34993 1.24514 10.6474 1 12 1Z"
+    />
   </svg>
 </template>