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

package/dist/runtime/editor/components/InfoBox/index.d.vue.ts

@@ -1,17 +1,20 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../global/types/theme.js';
 type __VLS_Props = {
     text?: string;
     icon?: BlokkliIcon;
-    color?: 'yellow' | 'accent';
+    color?: ThemeColorName;
+    small?: boolean;
 };
-declare var __VLS_6: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    small: boolean;
     text: string;
     icon: BlokkliIcon;
-    color: "yellow" | "accent";
+    color: ThemeColorName;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/InfoBox/index.vue

@@ -1,11 +1,24 @@
 <template>
-  <div class="bk-info-box" :class="'bk-is-' + color">
-    <Icon :name="icon" />
+  <div
+    class="_bk_bg-scheme-light _bk_text-scheme-dark _bk_border-l-4 _bk_border-l-scheme-normal _bk_flex _bk_items-center _bk_justify-between _bk_border _bk_border-scheme-light-hover _bk_rounded"
+    :class="[
+  'bk-scheme-' + color,
+  {
+    '_bk_p-15 _bk_gap-10': !small,
+    '_bk_p-10 _bk_gap-5 _bk_text-sm': small
+  }
+]"
+  >
     <div>
       <slot>
-        <p v-html="text" />
+        <p class="_bk_text-pretty" v-html="text" />
       </slot>
     </div>
+    <Icon
+      :name="icon"
+      class="_bk_shrink-0"
+      :class="small ? '_bk_size-20' : '_bk_size-30'"
+    />
   </div>
 </template>
 
@@ -14,71 +27,7 @@ import { Icon } from "#blokkli/editor/components";
 defineProps({
   text: { type: String, required: false, default: void 0 },
   icon: { type: null, required: false, default: "bk_mdi_info-fill" },
-  color: { type: String, required: false, default: "yellow" }
+  color: { type: String, required: false, default: "yellow" },
+  small: { type: Boolean, required: false, default: false }
 });
 </script>
-
-<style>
-.bk .bk-info-box {
-
-    border-radius: 6px;
-
-    padding: 15px;
-
-    font-weight: 500;
-
-    display: flex;
-
-    align-items: center;
-
-    gap: 10px
-}
-
-  .bk .bk-info-box.bk-is-yellow {
-
-    border-width: 1px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-border-opacity, 1));
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-bg-opacity, 1));
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1))
-}
-
-  .bk .bk-info-box.bk-is-accent {
-
-    border-width: 1px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-border-opacity, 1));
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-bg-opacity, 1));
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1))
-}
-
-  .bk .bk-info-box .bk-icon {
-
-    width: 30px;
-
-    height: 30px;
-
-    flex-shrink: 0
-}
-
-  .bk .bk-info-box .bk-icon svg {
-
-    fill: currentColor
-}
-</style>

package/dist/runtime/editor/components/InfoBox/index.vue.d.ts

@@ -1,17 +1,20 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../global/types/theme.js';
 type __VLS_Props = {
     text?: string;
     icon?: BlokkliIcon;
-    color?: 'yellow' | 'accent';
+    color?: ThemeColorName;
+    small?: boolean;
 };
-declare var __VLS_6: {};
+declare var __VLS_1: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    small: boolean;
     text: string;
     icon: BlokkliIcon;
-    color: "yellow" | "accent";
+    color: ThemeColorName;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/InlineActions/Button/index.d.vue.ts

@@ -0,0 +1,19 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../../global/types/theme.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    icon: BlokkliIcon;
+    label: string;
+    scheme?: ThemeColorName;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    icon: BlokkliIcon;
+    label: string;
+    scheme?: ThemeColorName;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    scheme: ThemeColorName;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/InlineActions/Button/index.vue

@@ -0,0 +1,27 @@
+<template>
+  <button
+    type="button"
+    class="_bk_size-25 _bk_flex _bk_items-center _bk_justify-center _bk_group/tooltip _bk_text-mono-600 _bk_hover:bg-scheme-light _bk_hover:text-scheme-dark _bk_border-r _bk_border-r-mono-400 _bk_last:border-r-0 _bk_first:rounded-l _bk_last:rounded-r"
+    :class="'bk-scheme-' + scheme"
+    @click.stop="$emit('click')"
+  >
+    <Icon :name="icon" class="_bk_size-15" />
+    <Tooltip :label="label" small placement="center-before" />
+  </button>
+</template>
+
+<script setup>
+import { Icon, Tooltip } from "#blokkli/editor/components";
+defineProps({
+  icon: { type: null, required: true },
+  label: { type: String, required: true },
+  scheme: { type: String, required: false, default: "mono" }
+});
+defineEmits(["click"]);
+</script>
+
+<script>
+export default {
+  name: "InlineActionsButton"
+};
+</script>

package/dist/runtime/editor/components/InlineActions/Button/index.vue.d.ts

@@ -0,0 +1,19 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from './../../../../../global/types/theme.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    icon: BlokkliIcon;
+    label: string;
+    scheme?: ThemeColorName;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    icon: BlokkliIcon;
+    label: string;
+    scheme?: ThemeColorName;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    scheme: ThemeColorName;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/InlineActions/index.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/InlineActions/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="_bk_flex _bk_items-center _bk_bg-white _bk_border _bk_border-mono-400 _bk_rounded _bk_shadow">
+    <slot />
+  </div>
+</template>

package/dist/runtime/editor/components/InlineActions/index.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Konami/Game/index.vue

@@ -750,7 +750,7 @@ onBlokkliEvent("canvas:draw", (e) => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-konami {
   --bg: #859018;
   position: fixed;
@@ -764,53 +764,51 @@ onBlokkliEvent("canvas:draw", (e) => {
   align-items: center;
   justify-content: center;
   gap: 5px;
-  background-color: rgb(var(--bk-theme-mono-950) / 0.9);
+  background-color: rgb(var(--bk-theme-mono-950) / 1);
 }
-
-  .bk.bk-konami .bk-konami-game {
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-konami {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-mono-950) / 1) 90%, transparent);
+  }
+}
+.bk.bk-konami .bk-konami-game {
   position: relative;
   padding: 60px;
-  --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --bk-tw-shadow-colored: 0 25px 50px -12px var(--bk-tw-shadow-color);
-  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
-  outline-style: solid;
+  --bk-tw-shadow: 0 25px 50px -12px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.25));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  outline-width: 1px;
+  outline-style: var(--bk-tw-outline-style);
   outline-width: 5px;
   outline-color: rgb(var(--bk-theme-mono-900) / 1);
   overflow: hidden;
   border-radius: 2vw;
-    background: var(--bg);
+  background: var(--bg);
 }
-
-  .bk.bk-konami .bk-konami-game:before {
-      content: '';
-      position: absolute;
-      inset: 0px;
-      z-index: 999;
-      box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.4);
-    }
-
-  .bk.bk-konami .bk-konami-game canvas {
+:is(.bk.bk-konami .bk-konami-game):before {
+  content: '';
+  position: absolute;
+  inset: 0px;
+  z-index: 999;
+  box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.4);
+}
+:is(.bk.bk-konami .bk-konami-game) canvas {
   display: block;
 }
-
-  .bk.bk-konami .bk-konami-game canvas.bk-is-pixel-grid {
+.bk-is-pixel-grid:is(:is(.bk.bk-konami .bk-konami-game) canvas) {
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 50;
-        image-rendering: pixelated;
+  image-rendering: pixelated;
 }
-
-  .bk.bk-konami .bk-konami-game canvas.bk-is-display {
-        image-rendering: pixelated;
-      }
-
-  .bk.bk-konami .bk-konami-game-canvas {
+.bk-is-display:is(:is(.bk.bk-konami .bk-konami-game) canvas) {
+  image-rendering: pixelated;
+}
+.bk.bk-konami .bk-konami-game-canvas {
   position: relative;
-    outline: 1px solid rgba(0, 0, 0, 0.3);
+  outline: 1px solid rgba(0, 0, 0, 0.3);
 }
-
-  .bk.bk-konami .bk-konami-game-block-icon {
+.bk.bk-konami .bk-konami-game-block-icon {
   pointer-events: none;
   position: absolute;
   top: 0px;
@@ -818,54 +816,47 @@ onBlokkliEvent("canvas:draw", (e) => {
   display: flex;
   align-items: center;
   justify-content: center;
-    transition: all 0.1s ease;
-    background: rgba(0, 0, 0, 0.6);
+  transition: all 0.1s ease;
+  background: rgba(0, 0, 0, 0.6);
 }
-
-  .bk.bk-konami .bk-konami-game-block-icon svg {
+:is(.bk.bk-konami .bk-konami-game-block-icon) svg {
   width: 60%;
   height: 60%;
-  fill: currentColor;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
+  fill: currentcolor;
+  color: rgb(var(--bk-theme-lime-normal) / 1);
 }
-
-  .bk.bk-konami .bk-konami-score {
+.bk.bk-konami .bk-konami-score {
   text-align: center;
-  font-size: 24px;
-  line-height: 32px;
-    color: #0f0;
-    font-family: 'Courier New', monospace;
-    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
+  font-size: var(--text-2xl, 24px);
+  line-height: var(--bk-tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+  color: #0f0;
+  font-family: 'Courier New', monospace;
+  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
 }
-
-  .bk.bk-konami .bk-konami-game-over {
+.bk.bk-konami .bk-konami-game-over {
   margin-top: 5px;
   text-align: center;
-  font-size: 30px;
-  line-height: 36px;
-    color: #f00;
-    font-family: 'Courier New', monospace;
-    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+  font-size: var(--text-3xl, 30px);
+  line-height: var(--bk-tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
+  color: #f00;
+  font-family: 'Courier New', monospace;
+  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
 }
-
-  .bk.bk-konami .bk-konami-instructions {
+.bk.bk-konami .bk-konami-instructions {
   text-align: center;
-  font-size: 14px;
-  line-height: 20px;
-  opacity: 0.7;
-    color: #0f0;
-    font-family: 'Courier New', monospace;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  opacity: 70%;
+  color: #0f0;
+  font-family: 'Courier New', monospace;
 }
-
-  .bk.bk-konami .bk-konami-debug-canvas {
+.bk.bk-konami .bk-konami-debug-canvas {
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 50;
 }
-
-  .bk.bk-konami .bk-konami-debug-canvas canvas {
-      image-rendering: pixelated;
-    }
+:is(.bk.bk-konami .bk-konami-debug-canvas) canvas {
+  image-rendering: pixelated;
+}
 </style>

package/dist/runtime/editor/components/Messages/Item/index.vue

@@ -5,7 +5,10 @@
     @mouseenter="stopTimer"
     @mouseleave="startTimer"
   >
-    <button class="bk-message-content" @click="$emit('close')">
+    <button
+      class="bk-message-content"
+      @click="$emit('close')"
+    >
       <p>{{ message }}</p>
       <p v-if="additionalText" class="bk-message-additional">
         {{ additionalText }}
@@ -17,7 +20,7 @@
       class="bk-message-actions"
     >
       <button
-        class="bk-button bk-is-danger"
+        class="bk-button bk-scheme-red"
         @click.prevent="showDetails = true"
       >
         <Icon name="bk_mdi_bug_report" />

package/dist/runtime/editor/components/Messages/index.vue

@@ -32,6 +32,9 @@ onBlokkliEvent("message", (message) => {
     messages.value.push(message);
   }
 });
+onBlokkliEvent("message:clear", () => {
+  messages.value = [];
+});
 </script>
 
 <script>
@@ -40,7 +43,7 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 @keyframes bk-message-timer {
   from {
     transform: scaleX(1);
@@ -49,124 +52,115 @@ export default {
     transform: scaleX(0);
   }
 }
-
 .bk.bk-messages {
   pointer-events: auto;
   position: absolute;
-  left: 0px;
   bottom: 0px;
+  left: 0px;
   z-index: calc(var(--bk-z-index-base) + 380000) /* "messages" */;
   width: 100%;
   overflow: hidden;
 }
-
 .bk.bk-messages .bk-message {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-
-@media (min-width: 768px) {
+@media (width >= 48rem) {
   .bk.bk-messages .bk-message {
     flex-direction: row;
   }
 }
-
-.bk.bk-messages .bk-message.bk-has-timer:before {
-        content: '';
-        position: absolute;
-        bottom: 0px;
-        left: 0px;
-        height: 5px;
-        width: 100%;
-        transform-origin: top left;
-        background-color: rgb(255 255 255 / 0.5);
-        animation: 6.1s bk-message-timer linear;
-      }
-
-.bk.bk-messages .bk-message.bk-is-success {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-has-timer:is(.bk.bk-messages .bk-message):before {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  height: 5px;
+  width: 100%;
+  transform-origin: 0 0;
+  background-color: color-mix(in oklab, white 50%, transparent);
+  animation: 6.1s bk-message-timer linear;
 }
-
-.bk.bk-messages .bk-message.bk-is-success .bk-message-content {
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+.bk-is-success:is(.bk.bk-messages .bk-message) {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
 }
-
-.bk.bk-messages .bk-message.bk-is-error {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-success:is(.bk.bk-messages .bk-message) .bk-message-content {
+  color: white;
 }
-
-.bk.bk-messages .bk-message.bk-is-error .bk-message-content {
-  --bk-tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+.bk-is-error:is(.bk.bk-messages .bk-message) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
-.bk.bk-messages .bk-message.bk-is-warning {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1));
+.bk-is-error:is(.bk.bk-messages .bk-message) .bk-message-content {
+  color: white;
 }
-
-.bk.bk-messages .bk-message.bk-is-warning .bk-message-content {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
+.bk-is-warning:is(.bk.bk-messages .bk-message) {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+}
+.bk-is-warning:is(.bk.bk-messages .bk-message) .bk-message-content {
+  color: rgb(var(--bk-theme-yellow-dark) / 1);
 }
-
 .bk.bk-messages .bk-message-content {
   position: relative;
-  flex: 1 1 0%;
+  flex: 1;
   padding: 20px;
   text-align: center;
-  font-size: 18px;
-  line-height: 28px;
-  font-weight: 700;
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-
-@media (min-width: 1024px) {
+@media (width >= 64rem) {
   .bk.bk-messages .bk-message-content {
-    font-size: 24px;
-    line-height: 32px;
+    font-size: var(--text-2xl, 24px);
+    line-height: var(--bk-tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
   }
 }
-
-.bk.bk-messages .bk-message-content:hover {
-  background-color: rgb(var(--bk-theme-red-dark) / 0.15);
+@media (hover: hover) {
+  :is(.bk.bk-messages .bk-message-content):hover {
+    background-color: rgb(var(--bk-theme-red-dark) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.bk.bk-messages .bk-message-content):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-red-dark) / 1) 15%, transparent);
+    }
+  }
 }
-
 .bk.bk-messages .bk-message-additional {
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  --bk-tw-font-weight: var(--font-weight-normal, 400);
+  font-weight: var(--font-weight-normal, 400);
 }
-
-@media (min-width: 1024px) {
+@media (width >= 64rem) {
   .bk.bk-messages .bk-message-additional {
-    font-size: 20px;
-    line-height: 28px;
+    font-size: var(--text-xl, 20px);
+    line-height: var(--bk-tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
   }
 }
-
 .bk.bk-messages .bk-message-actions {
   padding: 10px;
 }
-
-.bk.bk-messages .bk-message-actions button {
+:is(.bk.bk-messages .bk-message-actions) button {
+  border-style: var(--bk-tw-border-style);
   border-width: 1px;
-  border-color: rgb(var(--bk-theme-red-light) / 0.6);
+  border-color: rgb(var(--bk-theme-red-light) / 1);
 }
-
-.bk.bk-messages .bk-message-actions button:hover {
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-border-opacity, 1));
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk.bk-messages .bk-message-actions) button {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 60%, transparent);
+  }
+}
+@media (hover: hover) {
+  :is(:is(.bk.bk-messages .bk-message-actions) button):hover {
+    border-color: rgb(var(--bk-theme-red-dark) / 1);
+  }
 }
-
 .bk.bk-message-error {
-  user-select: text;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
   padding: 20px;
+  -webkit-user-select: text;
+  user-select: text;
 }
 </style>

package/dist/runtime/editor/components/NestedEditorOverlay/index.d.vue.ts

@@ -1,9 +1,10 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from '../../../../global/types/theme.js';
 export type NestedEditorOverlayProps = {
     url?: string;
     uuid: string;
     title: string;
-    theme: 'lime' | 'red' | 'accent';
+    theme: ThemeColorName;
     icon: BlokkliIcon;
     blockUuid?: string;
     element?: HTMLElement | null;