npm - @blokkli/editor - Versions diffs - 2.0.0-alpha.58 → 2.0.0-alpha.60 - Mend

@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1088) hide show

package/dist/runtime/editor/features/add-list/index.vue CHANGED Viewed

@@ -305,291 +305,182 @@ export default {
 };
 </script>
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-add-list {
   pointer-events: auto;
   z-index: calc(var(--bk-z-index-base) + 190000) /* "add-list" */;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
   position: relative;
   height: 100%;
   width: var(--bk-toolbar-left-width);
   grid-area: left;
 }
-  .bk.bk-add-list .bk-add-item {
+.bk.bk-add-list .bk-add-item {
   cursor: grab;
 }
-  .bk.bk-add-list .bk-add-item-description {
+.bk.bk-add-list .bk-add-item-description {
   display: block;
   position: absolute;
   left: 100%;
 }
-  .bk.bk-add-list #blokkli-add-list-blocks {
+.bk.bk-add-list #blokkli-add-list-blocks {
   display: grid;
   padding-bottom: 25px;
 }
-  .bk.bk-add-list #blokkli-add-list-actions {
+.bk.bk-add-list #blokkli-add-list-actions {
   display: grid;
   position: sticky;
   bottom: 0px;
   z-index: 50;
+  border-top-style: var(--bk-tw-border-style);
   border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+  border-top-color: rgb(var(--bk-theme-mono-700) / 1);
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
   margin-top: auto;
 }
-  .bk.bk-add-list #blokkli-add-list-actions .bk-add-item-label {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+:is(.bk.bk-add-list #blokkli-add-list-actions) .bk-add-item-label {
+  color: rgb(var(--bk-theme-mono-400) / 1);
 }
-  .bk.bk-add-list #blokkli-add-list-actions .bk-add-item-label .bk-icon {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+:is(:is(.bk.bk-add-list #blokkli-add-list-actions) .bk-add-item-label) .bk-icon {
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
 }
-  .bk.bk-add-list #blokkli-add-list-actions .bk-item-icon {
-      --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-900) / 1);
-    }
-  .bk.bk-add-list #blokkli-add-list-actions:after {
-      content: '';
-      pointer-events: none;
-      position: sticky;
-      bottom: 0px;
-      z-index: 50;
-      display: block;
-      height: 40px;
-      width: 100%;
-      position: absolute;
-      bottom: 100%;
-      left: 0px;
-      margin-bottom: 1px;
-      background: linear-gradient(
-        rgb(var(--bk-theme-mono-900) / 0) 30%,
+:is(.bk.bk-add-list #blokkli-add-list-actions) .bk-item-icon {
+  --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-900) / 1);
+}
+:is(.bk.bk-add-list #blokkli-add-list-actions):after {
+  content: '';
+  pointer-events: none;
+  position: sticky;
+  bottom: 0px;
+  z-index: 50;
+  display: block;
+  height: 40px;
+  width: 100%;
+  position: absolute;
+  bottom: 100%;
+  left: 0px;
+  margin-bottom: 1px;
+  background: linear-gradient(
+        rgb(var(--bk-theme-mono-900) / 1) 30%,
         rgb(var(--bk-theme-mono-900) / 1)
       );
-    }
-.bk .bk-add-item-label, .bk-vars .bk-add-item-label {
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk.bk-add-list #blokkli-add-list-actions):after {
+    background: linear-gradient(
+        color-mix(in oklab, rgb(var(--bk-theme-mono-900) / 1) 0%, transparent) 30%,
+        rgb(var(--bk-theme-mono-900) / 1)
+      );
+  }
+}
+:is(.bk,.bk-vars) .bk-add-item-label {
   display: flex;
-  flex: 1 1 0%;
+  flex: 1;
   align-items: center;
   gap: 8px;
   padding-right: 25px;
 }
-.bk .bk-add-item-description, .bk-vars .bk-add-item-description {
+:is(.bk,.bk-vars) .bk-add-item-description {
   display: none;
 }
 .bk .bk-add-list-inner {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 100%;
   width: auto;
   overflow: auto;
   transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
   transition-duration: 200ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
   transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
   display: flex;
   flex-direction: column;
+  border-top-style: var(--bk-tw-border-style);
   border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
+  border-top-color: rgb(var(--bk-theme-mono-700) / 1);
   clip-path: rect(0px var(--bk-toolbar-left-width) 100% 0px);
 }
-.bk .bk-add-list-inner .bk-add-item-label {
-  opacity: 0;
+:is(.bk .bk-add-list-inner) .bk-add-item-label {
+  opacity: 0%;
 }
-.bk .bk-add-list-inner .bk-add-item:not(:last-child) {
-    margin-bottom: calc(var(--bk-add-item-icon-padding) * -1);
-  }
-.bk .bk-add-list-inner.bk-is-active {
-    clip-path: rect(0px 100% 100% 0px);
-  }
-.bk .bk-add-list-inner::-webkit-scrollbar {
-    display: none;
-  }
-.bk .bk-add-list-inner .bk-add-item-icon, .bk-vars.bk-dragging-overlay .bk-add-item-icon {
+:is(.bk .bk-add-list-inner) .bk-add-item:not(:last-child) {
+  margin-bottom: calc(var(--bk-add-item-icon-padding) * -1);
+}
+.bk-is-active:is(.bk .bk-add-list-inner) {
+  clip-path: rect(0px 100% 100% 0px);
+}
+:is(.bk .bk-add-list-inner)::-webkit-scrollbar {
+  display: none;
+}
+:is(.bk .bk-add-list-inner,.bk-vars.bk-dragging-overlay) .bk-add-item-icon {
   width: var(--bk-toolbar-left-width);
   height: var(--bk-toolbar-left-width);
-    padding: var(--bk-add-item-icon-padding);
+  padding: var(--bk-add-item-icon-padding);
 }
-.bk .bk-add-list-inner.bk-is-active .bk-add-item-label, .bk-vars.bk-dragging-overlay .bk-add-item-label {
-  opacity: 1 !important;
+:is(.bk .bk-add-list-inner.bk-is-active,.bk-vars.bk-dragging-overlay) .bk-add-item-label {
+  opacity: 100% !important;
 }
-.bk .bk-add-item:hover .bk-add-item, .bk-vars.bk-dragging-overlay .bk-add-item {
-  opacity: 1 !important;
+:is(.bk .bk-add-item:hover,.bk-vars.bk-dragging-overlay) .bk-add-item {
+  opacity: 100% !important;
 }
-.bk .bk-add-item:hover .bk-add-item-label, .bk-vars.bk-dragging-overlay .bk-add-item-label {
-  --bk-tw-text-opacity: 1 !important;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1)) !important;
+:is(.bk .bk-add-item:hover,.bk-vars.bk-dragging-overlay) .bk-add-item-label {
+  color: white !important;
 }
 .bk .bk-add-item {
   position: relative;
   overflow: hidden;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
   display: flex;
   width: 100%;
   min-width: fit-content;
   align-items: center;
   white-space: nowrap;
 }
-.bk .bk-add-item.bk-is-action {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+.bk-is-action:is(.bk .bk-add-item) {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
 }
-.bk .bk-add-item.bk-is-disabled {
-  opacity: 0.3;
+.bk-is-disabled:is(.bk .bk-add-item) {
+  opacity: 30%;
 }
-.bk .bk-add-item.bk-is-disabled:hover {
-  opacity: 1;
+.bk-is-disabled:is(.bk .bk-add-item):hover {
+  opacity: 100%;
 }
 .bk .bk-add-item-label {
   padding-left: 3px;
-  font-weight: 600;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-400) / 1);
   transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
   transition-duration: 200ms;
-    font-size: var(--bk-add-item-font-size, 18px);
+  font-size: var(--bk-add-item-font-size, 18px);
 }
 .bk .bk-add-item-icon {
   position: relative;
   z-index: 50;
   flex-shrink: 0;
 }
-.bk-item-icon-hover-parent:hover .bk-item-icon, .bk-add-item:hover .bk-item-icon, .bk-add-item:focus-visible .bk-item-icon, .bk-vars .bk-dragging-overlay .bk-item-icon {
-  outline-style: solid;
-  outline-color: rgb(255 255 255 / 0.4);
-    outline-width: var(--bk-item-icon-outline);
-    outline-offset: calc(var(--bk-item-icon-outline) * -1);
+:is(.bk-item-icon-hover-parent:hover,.bk-add-item:hover,.bk-add-item:focus-visible,.bk-vars .bk-dragging-overlay) .bk-item-icon {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-color: color-mix(in oklab, white 40%, transparent);
+  outline-width: var(--bk-item-icon-outline);
+  outline-offset: calc(var(--bk-item-icon-outline) * -1);
 }
-.bk-item-icon-hover-parent:hover .bk-item-icon svg, .bk-add-item:hover .bk-item-icon svg, .bk-add-item:focus-visible .bk-item-icon svg, .bk-vars .bk-dragging-overlay .bk-item-icon svg {
-  opacity: 1 !important;
+:is(:is(.bk-item-icon-hover-parent:hover,.bk-add-item:hover,.bk-add-item:focus-visible,.bk-vars .bk-dragging-overlay) .bk-item-icon) svg {
+  opacity: 100% !important;
 }
 .bk-vars.bk-dragging-overlay .bk-add-item {
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 4px;
 }
 .bk .bk-item-icon {
   --bk-item-icon-outline: 2px;
   --bk-item-icon-size: calc(
@@ -597,15 +488,15 @@ export default {
   );
   --bk-item-icon-radius-base: var(--bk-item-icon-radius-base-toolbar, 8px);
   --bk-item-icon-radius-multiplier: 1;
-  --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-950) / 1);
   display: flex;
   aspect-ratio: 1 / 1;
   align-items: center;
   justify-content: center;
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--bk-tw-bg-opacity, 1));
-  background-image: linear-gradient(to bottom, var(--bk-tw-gradient-stops));
+  background-color: black;
+  --bk-tw-gradient-position: to bottom in oklab;
+  background-image: linear-gradient(var(--bk-tw-gradient-stops));
   width: var(--bk-item-icon-size);
   height: var(--bk-item-icon-size);
   box-shadow: 0 2px 3px 1px var(--bk-item-icon-shadow-color);
@@ -613,135 +504,89 @@ export default {
     var(--bk-item-icon-radius-base) * var(--bk-item-icon-radius-multiplier)
   );
 }
 @supports (corner-shape: squircle) {
-.bk .bk-item-icon {
+  .bk .bk-item-icon {
     corner-shape: squircle;
-    --bk-item-icon-radius-multiplier: 2.25
-}
-  }
-.bk .bk-item-icon.bk-is-small {
-    --bk-item-icon-outline: 1px;
-    --bk-item-icon-size: 35px;
-    --bk-item-icon-radius-base: 6px;
-    box-shadow: 0 1px 1px 1px var(--bk-item-icon-shadow-color);
+    --bk-item-icon-radius-multiplier: 2.25;
   }
-.bk .bk-item-icon.bk-is-small svg {
-      filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
-    }
-.bk .bk-item-icon.bk-is-tiny {
-    --bk-item-icon-outline: 1px;
-    --bk-item-icon-size: 25px;
-    --bk-item-icon-radius-base: 5px;
-    box-shadow: 0 1px 1px 1px var(--bk-item-icon-shadow-color);
-  }
-.bk .bk-item-icon.bk-is-tiny svg {
-      filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
-    }
-.bk .bk-item-icon > .bk-blokkli-item-icon,
-  .bk .bk-item-icon > .bk-icon {
+}
+.bk-is-small:is(.bk .bk-item-icon) {
+  --bk-item-icon-outline: 1px;
+  --bk-item-icon-size: 35px;
+  --bk-item-icon-radius-base: 6px;
+  box-shadow: 0 1px 1px 1px var(--bk-item-icon-shadow-color);
+}
+.bk-is-small:is(.bk .bk-item-icon) svg {
+  filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+}
+.bk-is-tiny:is(.bk .bk-item-icon) {
+  --bk-item-icon-outline: 1px;
+  --bk-item-icon-size: 25px;
+  --bk-item-icon-radius-base: 5px;
+  box-shadow: 0 1px 1px 1px var(--bk-item-icon-shadow-color);
+}
+.bk-is-tiny:is(.bk .bk-item-icon) svg {
+  filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+}
+:is(.bk .bk-item-icon)  > .bk-blokkli-item-icon,:is(.bk .bk-item-icon)  > .bk-icon {
   width: 66.6666666%;
   height: 66.6666666%;
 }
 .bk .bk-item-icon {
   --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-950) / 1);
 }
-.bk .bk-item-icon svg {
+:is(.bk .bk-item-icon) svg {
   width: 100%;
   height: 100%;
-  fill: currentColor;
-  opacity: 0.8;
-    filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+  fill: currentcolor;
+  opacity: 80%;
+  filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+}
+.bk-is-default:is(.bk .bk-item-icon) {
+  border-color: color-mix(in oklab, rgb(var(--bk-theme-mono-100) / 1) 40%, transparent);
+  color: rgb(var(--bk-theme-mono-100) / 1);
+  --bk-tw-gradient-from: rgb(var(--bk-theme-mono-800) / 1);
+  --bk-tw-gradient-to: rgb(var(--bk-theme-mono-600) / 1);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
+}
+.bk-is-yellow:is(.bk .bk-item-icon) {
+  --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+  border-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 50%, transparent);
+  color: rgb(var(--bk-theme-yellow-light) / 1);
+  --bk-tw-gradient-from: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 25%, transparent);
+  --bk-tw-gradient-to: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 40%, transparent);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
+}
+.bk-is-rose:is(.bk .bk-item-icon) {
+  --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: rgb(var(--bk-theme-red-light) / 1);
+  --bk-tw-gradient-from: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 50%, transparent);
+  --bk-tw-gradient-to: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 70%, transparent);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
+}
+.bk-is-lime:is(.bk .bk-item-icon) {
+  --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+  color: rgb(var(--bk-theme-lime-light) / 1);
+  --bk-tw-gradient-from: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 50%, transparent);
+  --bk-tw-gradient-to: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 70%, transparent);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
+}
+.bk-is-accent:is(.bk .bk-item-icon) {
+  --bk-item-icon-shadow-color: rgb(var(--bk-theme-accent-900) / 1);
+  border-color: rgb(var(--bk-theme-accent-400) / 1);
+  color: rgb(var(--bk-theme-accent-50) / 1);
+  --bk-tw-gradient-from: rgb(var(--bk-theme-accent-800) / 1);
+  --bk-tw-gradient-to: rgb(var(--bk-theme-accent-600) / 1);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
+}
+.bk-is-orange:is(.bk .bk-item-icon) {
+  --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+  border-color: rgb(var(--bk-theme-orange-normal) / 1);
+  color: rgb(var(--bk-theme-orange-light) / 1);
+  --bk-tw-gradient-from: color-mix(in oklab, rgb(var(--bk-theme-orange-normal) / 1) 50%, transparent);
+  --bk-tw-gradient-to: color-mix(in oklab, rgb(var(--bk-theme-orange-normal) / 1) 70%, transparent);
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-via-stops, var(--bk-tw-gradient-position), var(--bk-tw-gradient-from) var(--bk-tw-gradient-from-position), var(--bk-tw-gradient-to) var(--bk-tw-gradient-to-position));
 }
-.bk .bk-item-icon.bk-is-default {
-  border-color: rgb(var(--bk-theme-mono-100) / 0.4);
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-  --bk-tw-gradient-from: rgb(var(--bk-theme-mono-800) / 1) var(--bk-tw-gradient-from-position);
-  --bk-tw-gradient-to: rgb(var(--bk-theme-mono-800) / 0) var(--bk-tw-gradient-to-position);
-  --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-  --bk-tw-gradient-to: rgb(var(--bk-theme-mono-600) / 1) var(--bk-tw-gradient-to-position);
-}
-.bk .bk-item-icon.bk-is-yellow {
-    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
-    border-color: rgb(var(--bk-theme-yellow-normal) / 0.5);
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1));
-    --bk-tw-gradient-from: rgb(var(--bk-theme-yellow-normal) / 0.25) var(--bk-tw-gradient-from-position);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-yellow-normal) / 0) var(--bk-tw-gradient-to-position);
-    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-yellow-normal) / 0.4) var(--bk-tw-gradient-to-position);
-  }
-.bk .bk-item-icon.bk-is-rose {
-    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-red-light) / var(--bk-tw-text-opacity, 1));
-    --bk-tw-gradient-from: rgb(var(--bk-theme-red-normal) / 0.5) var(--bk-tw-gradient-from-position);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-red-normal) / 0) var(--bk-tw-gradient-to-position);
-    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-red-normal) / 0.7) var(--bk-tw-gradient-to-position);
-  }
-.bk .bk-item-icon.bk-is-lime {
-    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-text-opacity, 1));
-    --bk-tw-gradient-from: rgb(var(--bk-theme-lime-normal) / 0.5) var(--bk-tw-gradient-from-position);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-lime-normal) / 0) var(--bk-tw-gradient-to-position);
-    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-lime-normal) / 0.7) var(--bk-tw-gradient-to-position);
-  }
-.bk .bk-item-icon.bk-is-accent {
-    --bk-item-icon-shadow-color: rgb(var(--bk-theme-accent-900) / 1);
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-accent-400) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-text-opacity, 1));
-    --bk-tw-gradient-from: rgb(var(--bk-theme-accent-800) / 1) var(--bk-tw-gradient-from-position);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-accent-800) / 0) var(--bk-tw-gradient-to-position);
-    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-accent-600) / 1) var(--bk-tw-gradient-to-position);
-  }
-.bk .bk-item-icon.bk-is-orange {
-    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-orange-normal) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-orange-light) / var(--bk-tw-text-opacity, 1));
-    --bk-tw-gradient-from: rgb(var(--bk-theme-orange-normal) / 0.5) var(--bk-tw-gradient-from-position);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-orange-normal) / 0) var(--bk-tw-gradient-to-position);
-    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
-    --bk-tw-gradient-to: rgb(var(--bk-theme-orange-normal) / 0.7) var(--bk-tw-gradient-to-position);
-  }
 </style>

package/dist/runtime/editor/features/analyze/Ignored/index.vue CHANGED Viewed

@@ -1,30 +1,14 @@
 <template>
-  <details class="bk-analyze-results">
-    <summary>
-      <div>
-        <span>{{ $t("analyzeIgnoredResults", "Ignored") }}</span>
-        <div>
-          <span class="bk-pill">{{ totalCount }}</span>
-        </div>
-      </div>
-      <Icon name="bk_mdi_arrow_drop_down" />
-    </summary>
-    <ul>
-      <li>
-        <ResultsItem
-          v-for="result in results"
-          v-bind="result"
-          :key="result.id"
-        />
-      </li>
-    </ul>
-  </details>
+  <Section
+    :label="$t('analyzeIgnoredResults', 'Ignored')"
+    :count="totalCount"
+    :results="results"
+  />
 </template>
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import ResultsItem from "../Results/ResultsItem.vue";
-import { Icon } from "#blokkli/editor/components";
+import Section from "../Results/Section.vue";
 const props = defineProps({
   results: { type: Array, required: true }
 });