refactor(架构调整): 移植assets改名通用theme-chalk

packages/components/components.d.ts

@@ -1,14 +0,0 @@
-// For this project development
-import '@vue/runtime-core'
-
-declare module '@vue/runtime-core' {
-    // GlobalComponents for Volar
-    export interface GlobalComponents {
-        KKAudio: typeof import('./component/audio')
-    }
-
-    // interface ComponentCustomProperties {
-    // }
-}
-
-export {}

packages/theme-chalk/package.json

@@ -0,0 +1,6 @@
+{
+    "name": "@kankan/theme-chalk",
+    "version": "0.1.0",
+    "description": "kankan component chalk theme.",
+    "main": "index.css"
+}

packages/theme-chalk/scss/_base-vars.scss

@@ -0,0 +1,63 @@
+
+:root {
+  --colors-primary-fill: 255, 255, 255;
+  --colors-primary-base-fill: 0, 200, 175;
+  --colors-primary-base: rgb(var(--colors-primary-base-fill));
+  --colors-primary-hover: #4DD8C7;
+  // --colors-primary-hover: #008B7A;
+  --colors-primary-active: #008B7A;
+  --colors-primary-click: #005046;
+  --colors-warn: #FA3F48;
+  --colors-color: #999;
+  --colors-border-color: rgba(var(--colors-primary-fill), 0.16);
+  --colors-content-color: rgb(--colors-primary-fill);
+  
+  
+  --colors-normal-back: rgba(var(--colors-primary-fill), 0.1);
+  --colors-normal-base: rgba(var(--colors-primary-fill), 0.4);
+  --colors-normal-hover: rgba(var(--colors-primary-fill), 1);
+  --colors-normal-click: var(--colors-primary-click);
+
+  --colors-normal-fill-back: var(--colors-normal-back);
+  --colors-normal-fill-base: var(--colors-normal-base);
+  --colors-normal-fill-hover: var(--colors-normal-hover);
+  --colors-normal-fill-click: var(--colors-primary-click);
+
+  --colors-error-fill: 250, 63, 72;
+  
+  --small-size: 12px;
+  --medium-size: 14px;
+  --big-size: 16px;
+
+
+  // 正常
+  --color-main-normal: var(--colors-primary-base);
+  // 悬停
+  --color-main-hover: var(--colors-primary-hover);
+  // 点击
+  --color-main-focus: var(--colors-primary-click);
+
+
+  --editor-head-filter: blur(0px);
+  --editor-head-height: 50px;
+  
+  --editor-head-back: rgba(20, 20, 20, 0.86);
+
+  --editor-menu-filter: var(--editor-head-filter);
+  --editor-menu-width: 80px;
+  --editor-menu-left: 0px;
+  --editor-menu-right: 0px;
+  --editer-menu-fill: 27, 27, 28;
+  --editor-menu-back: rgba(var(--editer-menu-fill), 0.8);
+  --editor-menu-active-back: rgba(var(--colors-primary-fill), 0.06);
+  --editor-menu-color: #999;
+  --editor-menu-active: rgba(255,255,255,0.06);;
+
+
+  --editor-toolbox-top: var(--editor-head-height);
+  --editor-toolbox-left: calc(var(--editor-menu-left) + var(--editor-menu-width));
+  --editor-toolbox-width: 340px;
+  --editor-toolbox-back: var(--editor-menu-back);
+  --editor-toolbox-padding: 20px;
+  --editor-toolbar-height: 60px;
+}

packages/theme-chalk/scss/_base.scss

@@ -0,0 +1,293 @@
+/*!
+ * ress.css • v4.0.0
+ * MIT License
+ * github.com/filipelinhares/ress
+ */
+
+/* # =================================================================
+   # Global selectors
+   # ================================================================= */
+
+html {
+    box-sizing: border-box;
+    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+    word-break: normal;
+    -moz-tab-size: 4;
+    tab-size: 4;
+}
+
+*,
+::before,
+::after {
+    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+    box-sizing: inherit;
+    appearance: none;
+    -webkit-tap-highlight-color: rgba(255,255,255,0);
+    text-rendering: optimizeLegibility!important;
+    -webkit-font-smoothing: antialiased!important;
+}
+
+::before,
+::after {
+    text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+    vertical-align: inherit;
+}
+
+* {
+    padding: 0; /* Reset `padding` and `margin` of all elements */
+    margin: 0;
+}
+
+/* # =================================================================
+     # General elements
+     # ================================================================= */
+
+hr {
+    overflow: visible; /* Show the overflow in Edge and IE */
+    height: 0; /* Add the correct box sizing in Firefox */
+    color: inherit; /* Correct border color in Firefox. */
+}
+
+details,
+main {
+    display: block; /* Render the `main` element consistently in IE. */
+}
+
+summary {
+    display: list-item; /* Add the correct display in all browsers */
+}
+
+small {
+    font-size: 80%; /* Set font-size to 80% in `small` elements */
+}
+
+[hidden] {
+    display: none; /* Add the correct display in IE */
+}
+
+abbr[title] {
+    border-bottom: none; /* Remove the bottom border in Chrome 57 */
+    /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+a {
+    background-color: transparent; /* Remove the gray background on active links in IE 10 */
+}
+
+a:active,
+a:hover {
+    outline-width: 0; /* Remove the outline when hovering in all browsers */
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace; /* Specify the font family of code elements */
+}
+
+pre {
+    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+}
+
+b,
+strong {
+    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+}
+
+/* https://gist.github.com/unruthless/413930 */
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+table {
+    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+}
+
+/* # =================================================================
+     # Forms
+     # ================================================================= */
+
+input {
+    border-radius: 0;
+}
+
+/* Replace pointer cursor in disabled elements */
+[disabled] {
+    cursor: default;
+    user-select: none;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+}
+
+[type='search'] {
+    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+    outline-offset: -2px; /* Correct the outline style in Safari */
+}
+
+[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+}
+
+textarea {
+    overflow: auto; /* Internet Explorer 11+ */
+    resize: vertical; /* Specify textarea resizability */
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font: inherit; /* Specify font inheritance of form elements */
+}
+
+optgroup {
+    font-weight: bold; /* Restore the font weight unset by the previous rule */
+}
+
+button {
+    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+}
+
+button,
+select {
+    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+}
+
+/* Apply cursor pointer to button elements */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+    cursor: pointer;
+    color: inherit;
+}
+
+/* Remove inner padding and border in Firefox 4+ */
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+/* Replace focus style removed in the border reset above */
+button:-moz-focusring,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+    outline: 1px dotted #ccc;
+}
+
+button,
+  html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+}
+
+/* Remove the default button styling in all browsers */
+button,
+input,
+select,
+textarea {
+    background-color: transparent;
+    border-style: none;
+}
+
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+    outline-width: 0;
+}
+
+/* Style select like a standard input */
+select {
+    -moz-appearance: none; /* Firefox 36+ */
+    -webkit-appearance: none; /* Chrome 41+ */
+}
+
+select::-ms-expand {
+    display: none; /* Internet Explorer 11+ */
+}
+
+select::-ms-value {
+    color: currentColor; /* Internet Explorer 11+ */
+}
+
+legend {
+    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
+    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
+    display: table; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge and IE */
+    white-space: normal; /* Correct the text wrapping in Edge and IE */
+    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+}
+
+::-webkit-file-upload-button {
+    /* Correct the inability to style clickable types in iOS and Safari */
+    -webkit-appearance: button;
+    color: inherit;
+    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+}
+
+/* # =================================================================
+     # Specify media element style
+     # ================================================================= */
+
+img {
+    border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+}
+
+/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
+progress {
+    vertical-align: baseline;
+}
+
+/* # =================================================================
+     # Accessibility
+     # ================================================================= */
+
+/* Specify the progress cursor of updating elements */
+[aria-busy='true'] {
+    cursor: progress;
+}
+
+/* Specify the pointer cursor of trigger elements */
+[aria-controls] {
+    cursor: pointer;
+}
+
+/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+[aria-disabled='true'] {
+    cursor: default;
+}
+
+.disabled,
+:disabled{
+    opacity: 0.3 !important;
+    pointer-events: none !important;
+}

packages/theme-chalk/scss/_components.scss

@@ -0,0 +1,18 @@
+@import "components/loading";
+@import "components/dialog";
+@import "components/toast";
+@import "components/tree";
+@import "components/input";
+@import "components/button";
+@import "components/group";
+@import "components/floating";
+@import "components/icon";
+@import "components/size-animation";
+@import "components/men-item";
+@import "components/gate";
+@import "components/slide";
+@import "components/audio";
+@import "components/message";
+@import "components/cropper";
+@import "components/bubble";
+@import "components/guide";

packages/theme-chalk/scss/components/_audio.scss

@@ -0,0 +1,22 @@
+.audio {
+  display: inline-block;
+  cursor: pointer;
+  
+  > span {
+    --height: 18px;
+    width: 3px;
+    height: calc(var(--height) * var(--percent));
+    background: var(--colors-primary-base);
+    display: inline-block;
+    transition: height .2s linear;
+
+
+    &:not(:last-child) {
+      margin-right: 2px;
+    }
+  }
+
+  audio {
+    display: none;
+  }
+}

packages/theme-chalk/scss/components/_bubble.scss

@@ -0,0 +1,168 @@
+.bubble {
+  --arrow-width: 45px;
+  --arrow-height: 32px;
+  --back-color: rgba(27, 27, 28, 0.8);
+  --border-color-fill: 0, 0, 0;
+  --border-color: rgb(var(--border-color-fill));
+  --radius: 8px;
+  --padding: 20px 20px;
+  --bottom-left: 40px;
+  position: absolute;
+  z-index: 9;
+  transition: transform .3s ease, opacity .3s ease;
+
+
+
+  >.bubble-layer {
+    // backdrop-filter: blur(4px);
+    position: relative;
+    padding: var(--padding);
+    min-width: calc(3 * var(--arrow-width));
+    min-height: calc(3 * var(--arrow-height));
+    background: var(--back-color);
+    box-shadow: 0px 0px 10px 0px rgba(var(--border-color-fill), 0.3);
+    // border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+
+    > .bubble-arr {
+      position: absolute;
+      display: block;
+      pointer-events: none;
+      margin-left: 1px;
+      z-index: 99;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-color: transparent;
+      border-width: calc(var(--arrow-width) / 2);
+    }
+  }
+
+  &.left,
+  &.right {
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      width: calc(var(--arrow-width) / 1.4);
+      height: calc(var(--arrow-width) / 1.3);
+      top: 50%;
+      transform: translateY(calc(-50% + 0.5px));
+    }
+
+    top: 50%;
+    transform: translateY(calc(-50% + 0.5px));
+
+
+    >.bubble-layer > .bubble-arr {
+      top: 50%;
+      transform: translateY(calc(-50% + 0.5px));
+      border-width: calc(var(--arrow-width) / 3);
+
+    }
+    
+    
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transform: translateY(calc(-50% + 0.5px)) scale(1);
+      opacity: 1;
+    }
+    &.fade-enter-from,
+    &.fade-leave-to {
+      transform: translateY(calc(-50% + 0.5px)) scale(0);
+      opacity: 0;
+    }
+  }
+
+  &.left {
+    transform-origin: center right;
+    margin-right: var(--arrow-width);
+    right: 50%;
+    
+    &::after {
+      left: 100%;
+    }
+
+    >.bubble-layer > .bubble-arr {
+      left: calc(100% - 1px);
+      right: calc(-1 * var(--arrow-width) * 1.1);
+      border-left-color: var(--back-color);
+      border-left-width: calc(var(--arrow-width) / 1.3);
+    }
+  }
+
+  &.right {
+    transform-origin: center left;
+    margin-left: var(--arrow-width);
+    left: 50%;
+
+    &::after {
+      right: 100%;
+    }
+
+    >.bubble-layer > .bubble-arr {
+      right: 100%;
+      left: calc(-1 * var(--arrow-width) * 1.1);
+      border-right-color: var(--back-color);
+      border-right-width: calc(var(--arrow-width) / 1.3);
+    }
+  }
+
+
+  &.bottom,
+  &.top {
+
+    &.fade-enter-active,
+    &.fade-leave-active {
+      transform: scale(1);
+      opacity: 1;
+    }
+    &.fade-enter-from,
+    &.fade-leave-to {
+      transform: scale(0);
+      opacity: 0;
+    }
+  }
+
+  &.bottom {
+    top: 100%;
+    left: calc(50% - var(--bottom-left));
+    padding-top: var(--arrow-width);
+    transform-origin: var(--bottom-left) top;
+
+
+    >.bubble-layer > .bubble-arr {
+      border-width: calc(var(--arrow-width) / 3);
+      border-bottom-width: calc(var(--arrow-width) / 1.3);
+      border-bottom-color: var(--back-color);
+
+
+      left: 0;
+      top: calc(-1 * var(--arrow-width));
+      bottom: 100%;
+      transform: translateX(calc(-50% + 0.5px));
+      margin-left: var(--bottom-left);
+      // clip-path: polygon(0 100%, 50% 0, 100% 100%);
+    }
+  }
+
+  &.top {
+    bottom: 100%;
+    left: calc(50% - var(--bottom-left));
+    padding-bottom: var(--arrow-width);
+    transform-origin: var(--bottom-left) bottom;
+
+
+    >.bubble-layer > .bubble-arr {
+      border-width: calc(var(--arrow-width) / 3);
+      border-top-width: calc(var(--arrow-width) / 1.3);
+      border-top-color: var(--back-color);
+
+      left: 0;
+      top: 100%;
+      transform: translateX(calc(-50% + 0.5px));
+      margin-left: var(--bottom-left);
+      // clip-path: polygon(0 100%, 50% 0, 100% 100%);
+    }
+  }
+}

packages/theme-chalk/scss/components/_button.scss

@@ -0,0 +1,79 @@
+@use "sass:map";
+
+.ui-button {
+    width: 100%;
+    height: 34px;
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    font-size: 14px;
+    background: none !important;
+
+    transition: all .3s ease;
+
+    .ui-button-icon {
+        margin-right: 0.6em;
+    }
+}
+
+.ui-button.customize {
+    background: none;
+    color: rgba(var(--color), 0.8);
+    border: 1px solid rgba(var(--color), 0.6);
+}
+
+.ui-button.normal{
+    color: var(--colors-color);
+    border: 1px solid var(--colors-normal-base);
+    &:hover {
+        color: var(--colors-normal-hover);
+        border: 1px solid var(--colors-normal-hover);
+    }
+    &:active {
+        color: var(--colors-normal-click);
+        border: 1px solid var(--colors-normal-click);
+    }
+}
+
+.ui-button.submit {
+    color: var( --color-main-hover);
+    border: 1px solid var( --color-main-normal);
+    background-color: var( --color-main-normal);
+    &:hover {
+        border-color: var( --color-main-hover);
+        background-color: var( --color-main-hover);
+    }
+    &:active {
+        border-color: var( --color-main-focus);
+        background-color: var( --color-main-focus);
+    }
+}
+
+.ui-button.cancel {
+    color: var( --color-main-normal);
+    border: 1px solid var( --color-main-normal);
+    &:hover {
+        border-color: var( --color-main-hover);
+    }
+    &:active {
+        border-color: var( --color-main-focus);
+    }
+}
+
+.ui-button.primary {
+    background-color: var(--colors-primary-base) !important;
+    color: var(--colors-normal-fill-hover);
+    border: none;
+    opacity: 1;
+
+    // &:active,
+    &:hover {
+        // opacity: 0.8;
+        // background: var(--colors-primary-hover) !important;
+        background: #4DD8C7 !important;
+    }
+    &:active {
+        background-color: var(--colors-primary-active) !important;
+        color: rgba(255,255,255,0.6);
+    }
+}

packages/theme-chalk/scss/components/_cropper.scss

@@ -0,0 +1,4 @@
+.cropper-layer {
+  // height: 500px;
+  // width: 500px;
+}

packages/theme-chalk/scss/components/_dialog.scss

@@ -0,0 +1,98 @@
+.ui-dialog {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #fff;
+    background-color: rgba($color: #000000, $alpha: 0.3);
+    backdrop-filter: blur(1px);
+}
+.ui-dialog__box {
+    position: relative;
+    display: inline-block;
+    min-width: 400px;
+    min-height: 100px;
+    background-color: rgba($color: #1a1a1a, $alpha: 0.8);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+    border-radius: 4px;
+    border: 1px solid #000000;
+    // backdrop-filter: blur(400px);
+    backdrop-filter: blur(4px);
+    &::after {
+        content: '';
+        position: absolute;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        top: 1px;
+        border: 1px solid rgba($color: #fff, $alpha: 0.1);
+        border-radius: 4px;
+        z-index: 0;
+        pointer-events: none;
+    }
+    header {
+        color: #999999;
+        padding: 0 20px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: solid 1px rgba($color: #ffffff, $alpha: 0.16);
+        font-weight: bold;
+        i {
+            cursor: pointer;
+        }
+    }
+    section {
+        padding: 40px 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .message {
+            text-align: center;
+            line-height: 1.7;
+        }
+    }
+    footer {
+        padding: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: solid 1px rgba($color: #ffffff, $alpha: 0.16);
+        button {
+            width: 105px;
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+}
+[is-mobile]{
+  .ui-dialog__box{
+    max-width: 90%;
+    min-width: 80%;
+    // width: 8.9333rem;
+    // min-width: 5.3333rem;
+    // min-height: 1.3333rem;
+    // section{
+    //   padding: 1.0667rem .5333rem .8rem;
+    // }
+    // footer{
+    //   padding:  0 0 .8rem;
+    //   border-top: none;
+    // }
+    // header{
+    //   display: none;
+    // }
+  } 
+  section {
+ 
+    .message {
+        text-align: left;
+    }
+}
+} 

packages/theme-chalk/scss/components/_floating.scss

@@ -0,0 +1,3 @@
+.ui-floating {
+  position: absolute;
+}

packages/theme-chalk/scss/components/_gate.scss

@@ -0,0 +1,30 @@
+.ui-gate-layer {
+  --len: 1;
+  --current: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden !important;
+
+  .ui-gate-slides {
+    --content-width: calc(var(--len) * 100%);
+    --item-width: calc(100% / var(--len));
+
+    width: var(--content-width);
+    height: 100%;
+    transition: transform .3s ease;
+    transform: translateX(calc(-1 * var(--current) * var(--item-width)));
+
+    .ui-gate-content {
+      width: var(--item-width);
+      height: 100%;
+      float: left;
+      opacity: 0;
+      transition: opacity .3s ease;
+
+      &.active {
+        opacity: 1;
+      }
+    }
+  }
+
+}

packages/theme-chalk/scss/components/_group.scss

@@ -0,0 +1,94 @@
+$padding: 14px;
+
+.ui-group {
+  &:not(:last-child) {
+    margin-bottom: 20px;
+  }
+
+
+  &.control {
+    > .group-title {
+
+      .group-icon {
+        transition: transform .1s ease;
+        cursor: pointer;
+
+        &.show {
+          transform: rotateZ(180deg);
+        }
+      }
+    }
+    > div.group-title .group-icon.show {
+      transform: translateY(-50%) rotateZ(180deg);
+    }
+
+    .group-content {
+      overflow: hidden;
+      &.ready {
+        transition: max-height .1s ease;
+      }
+    }
+  }
+
+  > .group-title {
+    font-size: var( --big-size);
+    margin-bottom: $padding;
+    color: var(--colors-color);
+
+    .group-icon {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  > div.group-title {
+    position: relative;
+
+    .group-icon {
+      position: absolute;
+      width: 14px;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  > h3.group-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .border-bottom {
+    padding-bottom: $padding;
+    border-bottom: 1px solid var(--colors-border-color);
+  }
+  .border-top {
+    padding-top: $padding;
+    border-top: 1px solid var(--colors-border-color);
+  }
+
+  > .group-content {
+    font-size: var( --medium-size);
+
+    &.border-bottom {
+      margin-bottom: 0;
+    }
+    &.border-top {
+      margin-top: 0;
+    }
+  }
+
+}
+
+.group-option {
+  &:not(:last-child) {
+    margin-bottom: $padding;
+  }
+
+  > .group-option-label {
+    display: block;
+    margin-bottom: 10px;
+    color: var(--colors-content-color);
+  }
+}

packages/theme-chalk/scss/components/_guide.scss

@@ -0,0 +1,73 @@
+.guide {
+  position: relative;
+
+  &:not(.floating-mode) {
+    &.top {
+      transform: translateY(-100%);
+    }
+  
+    .bubble {
+      --arrow-width: 14px;
+      --arrow-height: 10px;
+      --padding: 10px;
+      --bottom-left: 20px;
+  
+      .bubble-layer {
+        min-height: auto;
+        min-width: auto;
+        padding-right: 30px;
+  
+        .guide-close {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          // margin-top: 2px;
+          font-size: 12px;
+        }
+      }
+    }
+  
+    .guide-bubble {
+      .default-msg {
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.guide-floating {
+  color: #fff;
+  font-size: 14px;
+
+  &.top {
+    transform: translateY(-100%);
+  }
+
+  .bubble {
+    --arrow-width: 14px;
+    --arrow-height: 10px;
+    --padding: 10px;
+    --bottom-left: 20px;
+    position: static;
+
+    .bubble-layer {
+      min-height: auto;
+      min-width: auto;
+      padding-right: 30px;
+
+      .guide-close {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        // margin-top: 2px;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .guide-bubble {
+    .default-msg {
+      white-space: nowrap;
+    }
+  }
+}

packages/theme-chalk/scss/components/_icon.scss

@@ -0,0 +1,75 @@
+.ui-kankan-icon.iconfont {
+  color: currentColor;
+  font-size: 1em;
+
+  &.small {
+    font-size: 12px;
+  }
+
+  &.medium {
+    font-size: 16px;
+  }
+
+  &.big {
+    font-size: 20px;
+  }
+}
+
+.icon {
+  position: relative;
+  
+
+  .tip {
+    color: rgba(255,255,255,1);
+    position: absolute;
+    transform-origin: top center;
+    background: #000000;
+    border-radius: 4px;
+    opacity: 0;
+    padding: 10px;
+    margin: 10px;
+    font-size: 12px;
+    transition: opacity .3s ease;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+
+  &:hover {
+    z-index: 999;
+    .tip {
+      opacity: 0.8;
+    }
+  }
+}
+
+  
+.tip-h-right .tip{
+  right: 0;
+  margin-right: 0;
+}
+
+.tip-h-left .tip {
+  left: 0;
+  margin-left: 0;
+}
+
+.tip-h-center .tip {
+  left: 50%;
+  transform: translateX(-50%);
+  margin-left: 0;
+  margin-right: 0;
+  z-index: 10;
+}
+
+.tip-v-top .tip {
+  bottom: 100%;
+}
+
+.tip-v-center .tip {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.tip-v-bottom .tip {
+  top: 100%;
+}

packages/theme-chalk/scss/components/_input.scss

@@ -0,0 +1,673 @@
+.ui-input {
+    display: inline-flex;
+    align-items: center;
+    --base-border-color: rgba(255, 255, 255, 0.2);
+    --colors-content-color: #fff;
+    height: 100%;
+    &.error {
+        position: relative;
+        --colors-primary-base: #fa3f48;
+        --base-border-color: #fa3f48;
+        .error-msg {
+            top: 100%;
+            position: absolute;
+            color: var(--colors-primary-base);
+            margin-top: 5px;
+        }
+    }
+
+    &.require {
+        position: relative;
+
+        &::before {
+            content: '*';
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            right: 100%;
+            margin-right: 4px;
+            color: #fa3f48;
+            line-height: 1.5em;
+        }
+    }
+
+    .input {
+        position: relative;
+        align-items: center;
+        display: inline-flex;
+
+        .input-div,
+        textarea,
+        input {
+            width: 100%;
+            height: 100%;
+            outline: none;
+            border: none;
+            font-size: 14px;
+            color: var(--colors-content-color);
+            padding-left: 4px;
+            resize: none;
+
+            & + .replace {
+                position: absolute;
+                z-index: 1;
+            }
+
+            &.replace-input {
+                opacity: 0;
+                cursor: pointer;
+            }
+        }
+
+        .pre-icon {
+            position: absolute;
+            z-index: 1;
+        }
+    }
+
+    .label {
+        cursor: pointer;
+        margin-left: 7px;
+    }
+
+    .radio,
+    .checkbox {
+        width: 16px;
+        height: 16px;
+
+        input {
+            & + .replace {
+                color: var(--colors-color);
+                border: 1px solid currentColor;
+                background-color: var(--colors-normal-back);
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                pointer-events: none;
+                transition: all 0.1s linear;
+            }
+
+            &:focus + .replace {
+                border-color: var(--colors-primary-base);
+            }
+
+            &:checked + .replace {
+                color: var(--colors-primary-base);
+            }
+        }
+    }
+
+    .checkbox input {
+        & + .replace {
+            border-radius: 4px;
+            .icon {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%) scale(0);
+                transition: all 0.1s linear;
+            }
+        }
+
+        &:checked + .replace {
+            .icon {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+    }
+
+    .radio input {
+        & + .replace {
+            border-radius: 50%;
+            &::after {
+                content: '';
+                border-radius: 50%;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%) scale(0);
+                transition: all 0.1s linear;
+                width: 60%;
+                height: 60%;
+                background-color: currentColor;
+            }
+        }
+
+        &:checked + .replace::after {
+            transform: translate(-50%, -50%) scale(1);
+        }
+    }
+
+    .text {
+        width: 100%;
+        height: 100%;
+        border-radius: 4px;
+
+        input {
+            background: var(--colors-normal-back);
+            height: 100%;
+            padding: 8px 10px;
+            border-radius: 4px;
+            border: 1px solid var(--base-border-color);
+            transition: border 0.3s ease;
+
+            &:focus {
+                border-color: var(--colors-primary-base);
+            }
+            &.warn {
+                border-color: var(--colors-warn);
+                &:focus {
+                    border-color: var(--colors-warn);
+                }
+            }
+
+            &::placeholder {
+                color: var(--colors-color);
+            }
+        }
+
+        &.pre-suffix {
+            input {
+                padding-left: 30px;
+            }
+            .pre-icon {
+                left: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+
+        &.right input {
+            text-align: right;
+        }
+
+        &.suffix {
+            input {
+                padding-right: 60px;
+            }
+            .retouch {
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 10;
+                cursor: pointer;
+            }
+
+            .len {
+                font-size: var(--small-size);
+                color: rgba(var(--colors-primary-fill), 1);
+
+                span {
+                    color: var(--colors-primary-base);
+                }
+            }
+        }
+
+        &.ready {
+            .retouch,
+            input {
+                transition: all 0.1s linear;
+            }
+        }
+    }
+
+    .textarea {
+        width: 100%;
+        height: 100%;
+        min-height: 50px;
+
+        > .replace {
+            border-radius: 4px;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            pointer-events: none;
+            background: var(--colors-normal-back);
+            border: 1px solid var(--base-border-color);
+            transition: border 0.3s ease;
+        }
+
+        .input-div {
+            overflow-y: auto;
+
+            a {
+                color: var(--color-main-normal);
+            }
+        }
+        .input-div,
+        textarea {
+            height: 100%;
+            width: 100%;
+            padding: 10px;
+
+            &:focus + .replace {
+                border-color: var(--colors-primary-base);
+            }
+
+            &::placeholder {
+                color: var(--colors-color);
+            }
+        }
+
+        &.right .input-div,
+        &.right textarea {
+            text-align: right;
+        }
+
+        &.suffix {
+            --bar-height: 30px;
+
+            .input-div,
+            textarea {
+                margin-bottom: var(--bar-height);
+                height: calc(100% - var(--bar-height));
+            }
+
+            > .retouch {
+                position: absolute;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                background-color: rgba(var(--colors-primary-fill), 0.1);
+                height: var(--bar-height);
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .len {
+                justify-self: end;
+                font-size: var(--small-size);
+                color: rgba(var(--colors-primary-fill), 1);
+
+                span {
+                    color: var(--colors-primary-base);
+                }
+            }
+        }
+    }
+
+    .number {
+        input {
+            -moz-appearance: textfield;
+        }
+        input::-webkit-inner-spin-button,
+        input::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        .ctrls {
+            position: absolute;
+            inset: 2px 0;
+            width: 8px;
+            .icon {
+                position: absolute;
+                right: 0;
+
+                &.up {
+                    bottom: 0;
+                }
+                &.down {
+                    top: 0;
+                }
+            }
+        }
+
+        &.ctrl.suffix input {
+            padding-right: 20px;
+            z-index: 1;
+        }
+    }
+
+    .select {
+        input {
+            cursor: pointer;
+            &.ui-text {
+                padding-right: 0;
+            }
+            &.icon {
+                padding-right: 30px;
+            }
+        }
+
+        &.focus {
+            input {
+                border-color: var(--colors-primary-base);
+            }
+            .retouch {
+                transform: translateY(-50%) rotateZ(180deg);
+            }
+        }
+    }
+
+    .range {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        --height: 6px;
+        --slideSize: calc(var(--height) + 8px);
+
+        .range-content {
+            flex: 1;
+            background-color: var(--colors-normal-back);
+            position: relative;
+            cursor: pointer;
+        }
+
+        .range-content::before,
+        .range-content {
+            height: var(--height);
+            border-radius: calc(var(--height) / 2);
+        }
+
+        .range-content::before,
+        .range-content .range-slide {
+            content: '';
+            position: absolute;
+        }
+
+        .range-content::before {
+            pointer-events: none;
+            left: 0;
+            top: 0;
+            width: var(--percentage);
+            background-color: var(--colors-primary-base);
+        }
+
+        .range-locus {
+            width: calc(100% - var(--slideSize));
+            height: var(--height);
+            position: relative;
+
+            .range-slide {
+                cursor: pointer;
+                height: var(--slideSize);
+                width: var(--slideSize);
+                top: 50%;
+                left: var(--percentage);
+                transform: translateY(-50%);
+                background-color: var(--colors-content-color);
+                border-radius: 50%;
+                .tips{
+                  position: absolute;
+                  background: rgba(0, 0, 0, 0.6);
+                  padding: 4px 6px;
+                  border-radius: 4px;
+                  bottom: 120%;
+                  left: 50%;
+                  -webkit-transform: translateX(-50%);
+                  transform: translateX(-50%);
+                  display: none;
+                  font-size: 12px;
+                }
+                &:hover{
+                  .tips{
+                   display: block;
+                  }
+                }
+            }
+        }
+
+        .range-text {
+            margin-left: 10px;
+            width: 65px;
+        }
+
+        .animation {
+            &.range-content::before,
+            .range-slide {
+                transition: all 0.1s linear;
+            }
+        }
+    }
+
+    .switch {
+        --height: 24px;
+        width: 50px;
+        height: var(--height);
+
+        .replace {
+            background-color: rgba(255, 255, 255, 0.3);
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: calc(var(--height) / 2);
+            pointer-events: none;
+            position: relative;
+            transition: background-color 0.3s ease;
+
+            &::after {
+                content: '';
+                --padding: 3px;
+                --size: calc(var(--height) - var(--padding) * 2);
+                position: absolute;
+                width: var(--size);
+                height: var(--size);
+                top: var(--padding);
+                background: var(--colors-content-color);
+                border-radius: 50%;
+                left: var(--padding);
+                transition: left 0.3s ease;
+            }
+        }
+
+        input:checked + .replace {
+            background-color: var(--colors-primary-base);
+
+            &::after {
+                left: calc(100% - var(--size) - var(--padding));
+            }
+        }
+    }
+
+    .file {
+        width: 100%;
+        height: 100%;
+
+        input {
+            cursor: pointer;
+            opacity: 0;
+        }
+        .use-replace {
+            position: absolute;
+        }
+        .use-replace,
+        .replace {
+            left: 0;
+            right: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            pointer-events: none;
+        }
+
+        &:not(.valuable) {
+            .replace {
+                top: 0;
+                bottom: 0;
+                background: rgba(var(--colors-primary-fill), 0.1);
+                border-radius: 4px;
+                border: 1px solid rgba(var(--colors-primary-fill), 0.2);
+                // position: relative;
+
+                .placeholder {
+                    text-align: center;
+                    max-width: 80%;
+
+                    p:not(:last-child) {
+                        margin-bottom: 10px;
+                    }
+
+                    .bottom {
+                        font-size: 12px;
+                        color: rgba(255, 255, 255, 0.3);
+                        width: 90%;
+                        position: absolute;
+                        bottom: 10px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                        text-align: left;
+                    }
+                }
+            }
+
+            input {
+                width: 100%;
+                height: 100%;
+
+                &:focus + .replace {
+                    border-color: var(--colors-primary-base);
+                }
+            }
+        }
+        &.valuable {
+            background: rgba(var(--colors-primary-fill), 0.1);
+            border-radius: 4px;
+            border: 1px solid rgba(var(--colors-primary-fill), 0.2);
+
+            input,
+            .replace {
+                position: absolute;
+                bottom: 0;
+                background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%);
+                height: 32px;
+                line-height: 32px;
+
+                .tj {
+                    position: absolute;
+                    right: 10px;
+                    top: 0;
+                    bottom: 0;
+                    display: flex;
+                    align-items: center;
+                    font-size: 10px;
+
+                    > span {
+                        color: var(--colors-primary-base);
+                        margin-right: 4px;
+                    }
+                }
+            }
+
+            .icons {
+                position: absolute;
+                right: 10px;
+                top: 0;
+
+                span {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 50%;
+                    background: rgba(0, 0, 0, 0.3);
+                    font-size: 12px;
+                    color: rgba(255, 255, 255, 0.6);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-top: 10px;
+                }
+            }
+        }
+    }
+
+    .search {
+        .retouch {
+            transform: translateY(-50%) !important;
+
+            .clear {
+                // background-color: rgba(255,255,255,.3);
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: rgba(255, 255, 255, 0.6);
+                border-radius: 50%;
+                cursor: pointer;
+            }
+        }
+    }
+
+    .color {
+        &.default {
+            input {
+                opacity: 1;
+                border: inherit;
+                outline: inherit;
+            }
+        }
+        .replace {
+            pointer-events: none;
+        }
+    }
+}
+
+.select-float {
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    transform-origin: center top;
+
+    &:not(.show) {
+        transform: scale(1, 0);
+        opacity: 0;
+        pointer-events: none;
+    }
+    &.show {
+        transform: scale(1, 1);
+        opacity: 1;
+    }
+}
+
+.select-replace {
+    --colors-content-color: #fff;
+    list-style: none;
+    max-height: 288px;
+    background: rgba(26, 26, 26, 0.8);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3), inset 0 0 1px rgb(255 255 255 / 90%);
+    backdrop-filter: blur(4px);
+    border-radius: 4px;
+    overflow-y: auto;
+    color: var(--colors-content-color);
+    &.hide-scroll{
+      max-height: 100%;
+    }
+    li {
+        padding: 10px 10px;
+        font-size: 14px;
+
+        &.un-data {
+            padding: 20px;
+            color: rgba(255, 255, 255, 0.3);
+            pointer-events: none;
+        }
+        &.active {
+            background: var(--colors-normal-back);
+            color: var(--colors-primary-base);
+        }
+
+        &:not(.active):hover {
+            cursor: pointer;
+            background-color: var(--colors-primary-base);
+        }
+    }
+}
+
+.is-hidden {
+    position: absolute;
+    left: -10000px;
+    top: -10000px;
+}
+.no-vip {
+    .file {
+        input {
+            pointer-events: none;
+        }
+        label {
+            pointer-events: none;
+        }
+    }
+}

packages/theme-chalk/scss/components/_loading.scss

@@ -0,0 +1,56 @@
+.ui-loading {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: rgba($color: #000000, $alpha: 0.3);
+    --width: 15px;
+    --color: #fff;
+}
+.ui-loading__box {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .default {
+        div {
+            width: var(--width);
+            height: var(--width);
+            background: var(--color);
+            border-radius: 50%;
+            display: inline-block;
+            margin-left: calc(var(--width));
+        }
+        div:nth-child(1) {
+            animation: ui-loading-default 1s -0.5s linear infinite;
+        }
+        div:nth-child(2) {
+            animation: ui-loading-default 1s -0.25s linear infinite;
+        }
+        div:nth-child(3) {
+            animation: ui-loading-default 1s 0s linear infinite;
+        }
+    }
+}
+
+@keyframes ui-loading-default {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(0.5);
+        opacity: 0.5;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 0.8;
+    }
+}

packages/theme-chalk/scss/components/_men-item.scss

@@ -0,0 +1,27 @@
+
+
+.ui-menu-item {
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  color: var(--editor-men-color);
+  transition: all .3s ease;
+
+  span{
+    width: 100%;
+    text-align: center;
+    margin-top: 6px;
+    overflow: hidden;
+  }
+  &:hover{
+      color: var( --color-main-hover);
+  }
+  &.active{
+      color: var( --color-main-normal);
+      background-color: var(--editor-menu-active);
+  }
+}

packages/theme-chalk/scss/components/_message.scss

@@ -0,0 +1,41 @@
+.ui-message {
+  position: absolute;
+  left: 50%;
+  top: 70px;
+  height: 40px;
+  padding: 0 20px;
+  background: rgba(20,20,20,0.7);
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  border: 1px solid #000000;
+  backdrop-filter: blur(4px);
+  color: #fff;
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  transition: all .5s ease;
+  opacity: 1;
+  transform: translateX(-50%);
+
+  .icon {
+    font-size: 16px;
+    margin-right: 10px;
+  }
+
+  &.success .icon {
+    color: #43c665;
+  }
+  &.warning .icon {
+    color: #f49b42;
+  }
+  &.error .icon {
+    color: #f34447;
+  }
+
+
+  &.fade-enter-from,
+  &.fade-leave-to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-100%);
+  }
+}

packages/theme-chalk/scss/components/_size-animation.scss

@@ -0,0 +1,28 @@
+.ui-size-animation {
+
+  &.height {
+    overflow: hidden;
+  }
+
+  &:not(.ready) {
+    opacity: 0;
+  }
+  &.ready {
+    transition: max-height .2s ease;
+  }
+
+  &.scale {
+    transform-origin: center top;
+    transform: scaleY(0); 
+
+    &.show {
+      transform: scaleY(1); 
+    }
+
+    &.ready {
+      transition: max-height .2s ease,
+        transform .2s ease;
+    }
+  }
+
+}

packages/theme-chalk/scss/components/_slide.scss

@@ -0,0 +1,27 @@
+
+.ui-slide {
+  position: relative;
+  height: 100%;
+
+  .right,
+  .left {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0,0,0,0.3);
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .right {
+    right: 10px;
+  }
+
+  .left {
+    left: 10px;
+  }
+}

packages/theme-chalk/scss/components/_toast.scss

@@ -0,0 +1,93 @@
+.ui-toast {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    top: 30px;
+    left: 0;
+    right: 0;
+    min-width: 100px;
+    height: 100px;
+    overflow: hidden;
+    pointer-events:none;
+}
+.ui-toast__box {
+    color: #fff;
+    font-size: 14px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #1a1a1a, $alpha: 0.8);
+    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
+    border-radius: 4px;
+    border: 1px solid #000000;
+    padding: 8px 20px;
+    pointer-events: all;
+
+    &.fixed,
+    &.success,
+    &.error,
+    &.warn{
+        i{
+            display:inline-block;
+        }
+    }
+    &.success {
+        .icon {
+            background-image: url('#{$img-base-path}icons/toast-success.png');
+        }
+    }
+    &.error {
+        .icon {
+            background-image: url('#{$img-base-path}icons/toast-error.png');
+        }
+    }
+    &.warn {
+        .icon {
+            background-image: url('#{$img-base-path}icons/toast-warn.png');
+        }
+    }
+    &::after {
+        content: '';
+        position: absolute;
+        left: 1px;
+        right: 1px;
+        bottom: 1px;
+        top: 1px;
+        border: 1px solid rgba($color: #fff, $alpha: 0.1);
+        border-radius: 4px;
+        z-index: 0;
+        pointer-events: none;
+    }
+
+    // >i{
+    //     display: none;
+    // }
+
+    .icon{
+        margin-right: 10px;
+        font-size: 0;
+        width: 16px;
+        height: 16px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+    }
+    .close{
+        cursor: pointer;
+        font-size: 14px;
+        margin-left: 20px;
+    }
+}
+.ui-toast__msg{
+  display: flex;
+  align-items: center;
+  img{
+    width:24px;
+    height: 24px;
+  }
+}
+body[is-mobile] .ui-toast__box {
+  max-width: 80%;
+}

packages/theme-chalk/scss/components/_tree.scss

@@ -0,0 +1,173 @@
+.ui-tree {
+  /* 收缩控件大小 */
+  --ctrl-size: 14px;
+  /* 左边留白大小 */
+  --padding-size: 20px;
+  // 底部margind大小
+  --margin-size: 20px;
+  --border-style: dashed;
+  --border-width: 1px;
+  
+  // 用于计算，防止样式覆盖而失效
+  --calc-size: var(--padding-size);
+  --half-ctrl: calc(var(--ctrl-size) / 2);
+  --half-margin: calc(var(--margin-size) / 2);
+
+  &.flat {
+    .ui-tree-item {
+      --padding-size: 20px;
+      // padding-left: 0;
+      margin-left: calc(-1 * var(--padding-size));
+    }
+  }
+
+  color: var(--colors-normal-base);;
+
+  .ui-tree-item{
+    list-style: none;
+    padding-left: var(--padding-size);
+    position: relative;
+
+    &.un-children {
+      --padding-size: 0;
+    }
+  }
+
+  .ui-tree-content {
+    margin-bottom: var(--margin-size);
+    position: relative;
+  }
+
+  .ui-tree-ctrl {
+    position: absolute;
+    width: var(--ctrl-size);
+    height: var(--ctrl-size);
+    left: calc(var(--padding-size) * -1);
+    top: 50%;
+    transform: translateY(-50%);
+    border: 1px solid currentColor;
+    line-height: var(--ctrl-size);
+    border-radius: calc(var(--ctrl-size) / 6);
+    cursor: pointer;
+
+    &::before,
+    &::after {
+      content: '';
+      height: 1px;
+      width: 60%;
+      background-color: currentColor;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+    }
+
+    &::before {
+      transform: translate(-50%, -50%);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotateZ(90deg);
+      transition: transform .3s ease;
+    }
+
+    &.open::after {
+      transform: translate(-50%, -50%) rotateZ(90deg) scale(0);
+    }
+  }
+  .ui-tree-item-child {
+    --offset: calc(var(--calc-size) * 2);
+    width: calc(100% + var(--offset));
+    padding-left: var(--offset);
+    margin-left: calc(-1 * var(--offset));
+    padding-top: var(--margin-size);
+    margin-top: calc(-1 * var(--margin-size));
+    // overflow: hidden;
+    transition: all .3s ease !important;
+  }
+
+  &.stroke {
+    --slideWidth: calc(var(--padding-size) - var(--half-ctrl));
+
+    .ui-tree-auxiliary::after,
+    .ui-tree-auxiliary::before,
+    .ui-tree-item::before,
+    .ui-tree-content::after {
+      content: '';
+      position: absolute;
+    }
+
+    .ui-tree-content::after {
+      left: calc(var(--padding-size) * -1);
+      width: var(--slideWidth);
+      border-bottom: var(--border-width) var(--border-style) currentColor;
+      top: 50%;
+      transform: translateX(-100%) translateY(-50%);
+    }
+
+    .ui-tree-auxiliary::after,
+    .ui-tree-auxiliary::before,
+    .ui-tree-item.un-children:last-child::before,
+    .ui-tree-item:not(:last-child):before {
+      border-left: var(--border-width) var(--border-style) currentColor;
+      transform: translateX(calc(var(--slideWidth) * -1));
+      left: 0;
+    }
+
+    .ui-tree-item:not(:last-child):before  {
+      top: 0;
+      bottom: calc(-1 * var(--half-ctrl));
+    }
+
+    .ui-tree-item.un-children:last-child::before {
+      top: 0;
+      bottom: calc(50% + var(--half-margin));
+    }
+
+    .ui-tree-auxiliary::before,
+    .ui-tree-auxiliary::after {
+      height: calc(50% - var(--half-ctrl));
+      transition: height .3s ease
+    }
+
+    .ui-tree-auxiliary::before {
+      height: calc(50% - var(--half-ctrl));
+      left: calc(var(--padding-size) * -1);
+      top: var(--half-ctrl);
+    }
+
+    .ui-tree-auxiliary::after {
+      height: calc(50% - var(--half-ctrl) + var(--margin-size));
+      bottom: calc(-1 * var(--margin-size));
+    }
+    
+    .first.ui-tree-auxiliary::before {
+      display: none;
+    }
+
+    .alone .ui-tree-auxiliary::before {
+      display: inherit;
+      height: 50%;
+      top: 0;
+    }
+
+    &:not(.children) > {
+      .ui-tree-item > .ui-tree-content > .ui-tree-auxiliary::before,
+      .ui-tree-item::before,
+      .ui-tree-item > .ui-tree-content::after {
+        display: none;
+      }
+    }
+
+    .ui-tree-item.put {
+      .ui-tree-item-child {
+        padding-top: 0;
+        margin-top: 0;
+      }
+
+      > .ui-tree-content .ui-tree-auxiliary::after {
+        height: 0;
+      }
+    }
+  }
+
+}

packages/theme-chalk/scss/editor/_head.scss

@@ -0,0 +1,24 @@
+@use "sass:map";
+
+.ui-editor-head {
+    filter: var(--editor-head-filter);
+    height: var(--editor-head-height);
+    background-color: var(--editor-head-back);
+    position: absolute;
+    backdrop-filter: blur(4px);
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 4000;
+    &::after{
+        position: absolute;
+        content: "";
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 0px;
+        line-height: 0;
+        border-top: solid 1px rgba(255, 255, 255, 0.16);
+        border-bottom: solid 1px #000;
+    }
+}

packages/theme-chalk/scss/editor/_layout.scss

@@ -0,0 +1,7 @@
+.ui-editor-layout {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    color: #fff;
+    font-size: 14px;
+}

packages/theme-chalk/scss/editor/_main.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+.ui-editor-main {
+    filter: var(--editor-menu-filter); 
+    position: fixed;
+    top: var(--editor-head-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    z-index: 4000;
+}
+[is-mobile]  .ui-editor-main {
+    top:0;
+}

packages/theme-chalk/scss/editor/_menu.scss

@@ -0,0 +1,37 @@
+@use "sass:map";
+
+.ui-editor-menu {
+    user-select: none;
+    width: var(--editor-menu-width);
+    filter: var(--editor-menu-filter); 
+    background-color: var(--editor-menu-back);
+    position: fixed;
+    left: var(--editor-menu-left);
+    top: var(--editor-head-height);
+    bottom: 0;
+    z-index: 2000;
+    overflow: hidden;
+
+    backdrop-filter: blur(4px);
+
+    >div{
+        height: 100%;
+        width: 100%;
+        overflow: visible;
+    }
+
+    .ui-editor-menu-item {
+        width: var(--editor-menu-width);
+        height: var(--editor-menu-width);
+    }
+
+    &::after{
+        position: absolute;
+        content: "";
+        top: 0;
+        bottom: 0;
+        right: 0;
+        border-left: solid 1px rgba(255, 255, 255, 0.16);
+        border-right: solid 1px #000;
+    }
+}

packages/theme-chalk/scss/editor/_toolbar.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+
+.ui-editor-toolbar {
+    position: absolute;
+    bottom: 0;
+    right: calc(var(--editor-toolbox-width) + var(--editor-menu-right));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: var(--editor-toolbar-height);
+    background-color: var(--editor-menu-back);
+    pointer-events: all;
+    left: var(--editor-toolbox-left);
+    z-index: 1;
+    transition: all 0.3s ease;
+    &.full {
+        left: calc(0px - var(--editor-menu-width)) !important;
+        right: 0;
+    }
+    &.full-left {
+        left: calc(0px - var(--editor-menu-width)) !important;
+    }
+    &.full-right {
+        right: 0;
+    }
+}

packages/theme-chalk/scss/editor/_toolbox.scss

@@ -0,0 +1,32 @@
+@use "sass:map";
+
+.ui-editor-toolbox {
+    position: absolute;
+    z-index: 1;
+    right: var(--editor-menu-right);
+    padding: var(--editor-toolbox-padding);
+    width:  var(--editor-toolbox-width);;
+    bottom: 0;
+    pointer-events: all;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: var(--editor-toolbox-back);
+    top: var(--editor-toolbox-top);
+    transition: right ease .3s;
+    filter: var(--editor-head-filter);
+    backdrop-filter: blur(4px);
+    ul,li{
+        list-style: none;
+        margin:0;
+        padding: 0;
+    }
+    &::after{
+        position: absolute;
+        content: "";
+        top: 0;
+        bottom: 0;
+        left: 0;
+        border-right: solid 1px rgba(255, 255, 255, 0.16);
+        border-left: solid 1px #000;
+    }
+}

packages/theme-chalk/scss/editor/_view.scss

@@ -0,0 +1,15 @@
+@use "sass:map";
+
+.ui-editor-view {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    font-size: 14px;
+    // background-color: #fff;
+    align-items: flex-end;
+    justify-content: flex-end;
+    overflow: hidden;
+}
+

packages/theme-chalk/scss/theme-editor.scss

@@ -0,0 +1,12 @@
+@import "base";
+@import "base-vars";
+@import "components";
+
+@import "editor/layout";
+@import "editor/head";
+@import "editor/menu";
+@import "editor/main";
+@import "editor/view";
+@import "editor/toolbox";
+@import "editor/toolbar";
+