@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/runtime/editor/features/settings/index.vue

@@ -78,3 +78,155 @@ export default {
   name: "Settings"
 };
 </script>
+
+<style>
+.bk.bk-settings .bk-settings-group-title {
+    font-size: 20px;
+    line-height: 28px;
+    font-weight: 700;
+    line-height: 1.25
+}
+  .bk.bk-settings .bk-form-section {
+    margin-top: 0px;
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding-top: 25px;
+    padding-bottom: 25px
+}
+  .bk.bk-settings .bk-form-section:first-child {
+    padding-top: 0px
+}
+  .bk.bk-settings .bk-form-section:last-child {
+    border-bottom-width: 0;
+    padding-bottom: 0px
+}
+
+.bk .bk-settings-checkboxes {
+    display: grid;
+    gap: 10px
+}
+
+.bk .bk-settings-buttons {
+    display: grid;
+    gap: 10px
+}
+
+.bk .bk-settings-ui {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 15px
+}
+
+.bk .bk-settings-ui li {
+    position: relative
+}
+
+.bk .bk-settings-ui li:focus-within .bk-icon {
+    outline-style: solid;
+    outline-offset: 3px;
+    outline-color: rgb(var(--bk-theme-accent-950) / 0.8)
+}
+
+.bk .bk-settings-ui li label {
+    display: block;
+    cursor: pointer
+}
+
+.bk .bk-settings-ui li input {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    cursor: pointer;
+    appearance: none;
+    opacity: 0
+}
+
+.bk .bk-settings-ui li input + .bk-icon {
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: 4px;
+    border-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
+}
+
+.bk .bk-settings-ui li input + .bk-icon svg {
+    height: auto;
+    width: 100%;
+    opacity: 0.5
+}
+
+.bk .bk-settings-ui li input:checked + .bk-icon {
+    --bk-tw-ring-offset-shadow: var(--bk-tw-ring-inset) 0 0 0 var(--bk-tw-ring-offset-width) var(--bk-tw-ring-offset-color);
+    --bk-tw-ring-shadow: var(--bk-tw-ring-inset) 0 0 0 calc(3px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color);
+    box-shadow: var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow, 0 0 #0000);
+    --bk-tw-ring-opacity: 1;
+    --bk-tw-ring-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-ring-opacity, 1))
+}
+
+.bk .bk-settings-ui li input:checked + .bk-icon svg {
+    opacity: 1
+}
+
+.bk .bk-settings-ui li input:checked + .bk-icon + span {
+    font-weight: 600;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-settings-ui li input:not(:checked):hover + .bk-icon {
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
+}
+
+.bk .bk-settings-ui li input:not(:checked):hover + .bk-icon svg {
+    opacity: 0.7
+}
+
+.bk .bk-settings-ui li input:not(:checked):hover + .bk-icon + span {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-settings-ui li span {
+    margin-top: 10px;
+    display: inline-block;
+    width: 100%;
+    text-align: left;
+    font-size: 14px;
+    line-height: 20px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-icon-theme-bg {
+    fill: rgb(var(--bk-theme-mono-200) / 1)
+}
+
+.bk .bk-icon-theme-fg {
+    fill: white
+}
+
+.bk .bk-icon-theme-text {
+    fill: rgb(var(--bk-theme-mono-300) / 1)
+}
+
+.bk .bk-icon-theme-toolbar {
+    fill: rgb(var(--bk-theme-mono-950) / 1)
+}
+
+.bk .bk-icon-theme-toolbar-dark-item {
+    fill: rgb(var(--bk-theme-mono-800) / 1);
+    stroke: rgb(var(--bk-theme-mono-600) / 1)
+}
+
+.bk .bk-icon-theme-toolbar-light-item {
+    fill: rgb(var(--bk-theme-mono-200) / 1);
+    stroke: rgb(var(--bk-theme-mono-300) / 1)
+}
+</style>

package/dist/runtime/editor/features/structure/List/Item/index.vue

@@ -125,3 +125,10 @@ defineOptions({
   name: "StructureListItem"
 });
 </script>
+
+<style>
+.bk-vars .bk-dragging-overlay-item [bk-structure-uuid] {
+    --bk-tw-bg-opacity: 1 !important;
+    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1)) !important
+}
+</style>

package/dist/runtime/editor/features/structure/index.vue

@@ -97,3 +97,181 @@ export default {
   name: "Structure"
 };
 </script>
+
+<style>
+.bk.bk-structure {
+        height: 100%;
+        overflow: auto;
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-structure > .bk-structure-list > li {
+        border-bottom-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+        padding-top: 10px;
+        padding-bottom: 10px;
+}
+
+  .bk.bk-structure > .bk-structure-list > li > .bk-structure-item {
+        border-left-width: 0;
+        border-right-width: 0;
+}
+
+  .bk.bk-structure > .bk-structure-list .bk-structure-list {
+        position: relative;
+        padding-left: 11px;
+}
+
+  .bk.bk-structure > .bk-structure-list .bk-structure-list > li:not(:first-child) > .bk-structure-field > .bk-structure-field-label {
+        margin-top: 20px;
+}
+
+  .bk.bk-structure > .bk-structure-list .bk-structure-list:before {
+        content: '';
+        position: absolute;
+        top: -9px;
+        left: 11px;
+        bottom: 18px;
+        width: 0px;
+        border-left-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-left-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+      }
+
+  .bk.bk-structure > .bk-structure-list .bk-structure-list .bk-structure-item-label {
+        height: 40px;
+        cursor: grab;
+}
+
+  .bk.bk-structure > .bk-structure-list .bk-structure-list .bk-structure-item-label:before {
+          content: '';
+          position: absolute;
+          left: -20px;
+          top: 22px;
+          height: 1px;
+          width: 19px;
+          border-top-width: 1px;
+          --bk-tw-border-opacity: 1;
+          border-top-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+        }
+
+  .bk.bk-structure .bk-structure-item {
+        border-width: 1px;
+        border-color: transparent;
+        padding-left: 20px;
+}
+
+  .bk.bk-structure .bk-structure-item:hover {
+        --bk-tw-border-opacity: 1;
+        border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+        background-color: rgb(var(--bk-theme-mono-300) / 0.2);
+}
+
+  .bk.bk-structure .bk-structure-item .bk-blokkli-item-icon {
+        height: 25px;
+        width: 25px;
+        border-radius: 4px;
+        border-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+        padding: 3px;
+}
+
+  .bk.bk-structure .bk-structure-item .bk-blokkli-item-icon.bk-is-selected {
+        --bk-tw-border-opacity: 1;
+        border-color: rgb(var(--bk-theme-accent-900) / var(--bk-tw-border-opacity, 1));
+        --bk-tw-bg-opacity: 1;
+        background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
+        --bk-tw-text-opacity: 1;
+        color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-structure .bk-structure-item.bk-is-selected > .bk-structure-item-label {
+        font-weight: 600;
+}
+
+  .bk.bk-structure .bk-structure-item.bk-is-selected .bk-structure-list:before {
+        --bk-tw-border-opacity: 1;
+        border-left-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
+}
+
+  .bk.bk-structure .bk-structure-item.bk-is-selected .bk-structure-item .bk-structure-item-label:before {
+        --bk-tw-border-opacity: 1;
+        border-top-color: rgb(var(--bk-theme-accent-500) / var(--bk-tw-border-opacity, 1));
+}
+
+  .bk.bk-structure .bk-structure-item.bk-is-selected .bk-structure-item .bk-blokkli-item-icon {
+        --bk-tw-border-opacity: 1;
+        border-color: rgb(var(--bk-theme-accent-400) / 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-structure .bk-structure-item-label {
+        position: relative;
+        display: flex;
+        width: 100%;
+        align-items: center;
+        gap: 5px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-size: 14px;
+        line-height: 20px;
+        line-height: 1;
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-structure .bk-structure-field-label {
+        margin-bottom: 5px;
+        display: flex;
+        height: 20px;
+        align-items: center;
+        padding-left: 17px;
+        font-size: 12px;
+        line-height: 16px;
+        font-weight: 500;
+        text-transform: uppercase;
+        --bk-tw-text-opacity: 1;
+        color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-structure .bk-structure-field-item {
+        position: relative;
+}
+
+  .bk.bk-structure .bk-structure-field-items {
+        position: relative;
+}
+
+  .bk.bk-structure .bk-structure-field-target {
+        position: absolute;
+        height: 40px;
+        width: 100%;
+        opacity: 0.2;
+}
+
+  .bk.bk-structure .bk-structure-field-target:hover {
+        opacity: 1;
+}
+
+  .bk.bk-structure .bk-structure-field-target {
+        border-bottom-width: 4px;
+        --bk-tw-border-opacity: 1;
+        border-bottom-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
+}
+
+  .bk.bk-structure .bk-structure-field-target.bk-is-before {
+        top: -40px;
+}
+
+  .bk.bk-structure .bk-structure-field-target.bk-is-after {
+        bottom: 0px;
+}
+</style>

package/dist/runtime/editor/features/templates/ManageDialog/Item.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr>
+  <tr class="_bk_hover:bg-mono-50">
     <td>
       <div>
         <span>{{ label }}</span>
@@ -16,7 +16,7 @@
         >
       </div>
       <div v-if="description">{{ description }}</div>
-      <ul class="bk-pill-list">
+      <ul class="bk-pill-list _bk_mt-8">
         <li v-for="(bundle, index) in bundleLabels" :key="index">
           <span class="bk-pill bk-is-mono" v-text="bundle" />
         </li>
@@ -32,7 +32,7 @@
       <RelativeTime v-if="dateUpdated" :timestamp="dateUpdated" />
     </td>
     <td class="bk-templates-manage-table-actions">
-      <div>
+      <div class="_bk_flex _bk_gap-10 _bk_justify-end">
         <template v-if="confirmDelete">
           <button
             class="bk-button bk-is-danger bk-is-small"

package/dist/runtime/editor/features/templates/ManageDialog/index.vue

@@ -14,12 +14,12 @@
     @cancel="$emit('cancel')"
   >
     <div ref="dialogEl" class="bk-templates-manage">
-      <div v-if="config.length" class="bk-form-group">
+      <div v-if="config.length" class="_bk_mt-20 _bk_mb-30">
         <ConfigForm v-model="filters" :config />
       </div>
       <Loading v-if="status === 'pending'" />
       <template v-if="items.length">
-        <table class="bk-table">
+        <table class="bk-table _bk_mt-40">
           <thead>
             <tr>
               <th>
@@ -34,7 +34,7 @@
               <th>
                 {{ $t("dateUpdated", "Updated") }}
               </th>
-              <th>
+              <th class="_bk_text-right">
                 {{ $t("actions", "Actions") }}
               </th>
             </tr>
@@ -105,3 +105,24 @@ watch(page, () => {
   confirmDeleteUuid.value = "";
 });
 </script>
+
+<style>
+.bk .bk-templates-manage {
+    min-height: 80vh;
+    position: relative;
+    user-select: text;
+    margin-top: 25px;
+  }
+    .bk .bk-templates-manage .bk-table tbody td {
+    padding-top: 15px;
+    padding-bottom: 15px;
+}
+    .bk .bk-templates-manage .bk-table tbody td:first-child div:first-child {
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: 700;
+}
+    .bk .bk-templates-manage .bk-table tbody td:first-child div:first-child .bk-pill {
+    margin-left: 5px;
+}
+</style>

package/dist/runtime/editor/features/theme/index.vue

@@ -107,3 +107,97 @@ export default {
   name: "Theme"
 };
 </script>
+
+<style>
+.bk.bk-theme-editor {
+  container-type: inline-size;
+}
+
+@container (min-width: 600px) {
+
+.bk .bk-theme-editor-groups {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+    }
+
+.bk .bk-theme-editor-table {
+  width: 100%;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.bk .bk-theme-editor-table tr {
+  border-bottom-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+}
+
+.bk .bk-theme-editor-table td {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.bk .bk-theme-editor-table .bk-theme-editor-color-shade {
+  text-align: right;
+  font-weight: 500;
+}
+
+.bk .bk-theme-editor-table .bk-theme-editor-color-buttons svg {
+  height: 20px;
+  width: 20px;
+}
+
+.bk .bk-theme-editor-table .bk-theme-editor-color-hex {
+  width: 100%;
+}
+
+.bk .bk-theme-editor-table .bk-theme-editor-color-hex input {
+  width: 100%;
+  font-family: monospace;
+}
+
+.bk .bk-theme-editor-table .bk-theme-editor-color-color {
+  width: 0px;
+}
+
+.bk .bk-theme-editor-code textarea {
+  width: 100%;
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.bk .bk-theme-editor-group h2 {
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  text-transform: uppercase;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
+  border-bottom-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk .bk-theme-editor-select {
+  border-bottom-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-bottom-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
+}
+
+.bk .bk-theme-editor-select select {
+  width: 100%;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  font-weight: 600;
+}
+</style>

package/dist/runtime/editor/features/touch-action-bar/Bar/index.vue

@@ -23,3 +23,37 @@ export default {
   name: "TouchActionBar"
 };
 </script>
+
+<style>
+.bk.bk-touch-action-bar {
+
+    pointer-events: auto;
+
+    position: fixed;
+
+    bottom: 0px;
+
+    left: 0px;
+
+    z-index: calc(var(--bk-z-index-base) + 260000) /* "touch-action-bar" */;
+
+    height: 50px;
+
+    width: 100%;
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1))
+}
+
+  .bk.bk-touch-action-bar button {
+
+    height: 100%;
+
+    min-height: 0px;
+
+    width: 100%;
+
+    border-radius: 0px !important
+}
+</style>