@phelan/design 0.0.1

package/packages/styles/src/tabs.scss

@@ -0,0 +1,45 @@
+@use './theme.scss';
+
+.m-tabs {
+  .el-tabs__item {
+    font-size: 16px;
+    font-weight: 400;
+    color: var(--el-text-color-secondary);
+    line-height: 24px;
+    min-width: 64px;
+    text-align: center;
+    padding: 0 20px;
+    box-sizing: content-box;
+    height: 36px;
+    align-items: flex-start;
+  }
+
+  .el-tabs__item:hover {
+    color: var(--el-color-primary);
+  }
+
+  .el-tabs__item.is-active {
+    color: var(--el-color-primary);
+    font-weight: 500;
+  }
+
+  .el-tabs__item.is-disabled {
+    color: var(--el-text-color-disabled);
+  }
+
+  .el-tabs__item.is-disabled:hover {
+    color: var(--el-text-color-disabled);
+  }
+
+  .el-tabs__active-bar {
+    background-color: var(--el-color-primary);
+    height: 2px;
+    border-radius: 8px;
+  }
+
+  .el-tabs__nav-wrap:after {
+    height: 1px;
+    border-radius: 10px;
+    background-color: #e6ebf4;
+  }
+}

package/packages/styles/src/tag.scss

@@ -0,0 +1,29 @@
+@use './theme.scss';
+
+.m-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 6px;
+  font-size: 12px;
+  border-radius: 2px;
+  border-width: 1px;
+  border-style: solid;
+  vertical-align: top;
+  .m-tag-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    margin-right: 4px;
+  }
+
+  .m-tag-icon {
+    display: inline-flex;
+    margin-right: 4px;
+  }
+
+  .m-tag-close {
+    margin-left: 4px;
+  }
+}

package/packages/styles/src/theme.scss

@@ -0,0 +1,101 @@
+:root {
+  --el-color-white: var(--m-color-white);
+  --el-color-black: var(--m-color-black);
+
+  --el-color-primary: var(--m-color-primary);
+  --el-color-primary-light-3: var(--m-color-primary-light-3); /* 8 */
+  --el-color-primary-light-5: var(--m-color-primary-light-5); /* 7 */
+  --el-color-primary-light-7: var(--m-color-primary-light-7); /* 6 */
+  --el-color-primary-light-8: var(--m-color-primary-light-8); /* 4 */
+  --el-color-primary-light-9: var(--m-color-primary-light-9); /* 1 */
+  --el-color-primary-dark-2: var(--m-color-primary-dark-2); /* 10 */
+
+  --el-color-success: var(--m-color-success);
+  --el-color-success-light-3: var(--m-color-success-light-3);
+  --el-color-success-light-5: var(--m-color-success-light-5);
+  --el-color-success-light-7: var(--m-color-success-light-7);
+  --el-color-success-light-8: var(--m-color-success-light-8);
+  --el-color-success-light-9: var(--m-color-success-light-9);
+  --el-color-success-dark-2: var(--m-color-success-dark-2);
+
+  --el-color-warning: var(--m-color-warning);
+  --el-color-warning-light-3: var(--m-color-warning-light-3);
+  --el-color-warning-light-5: var(--m-color-warning-light-5);
+  --el-color-warning-light-7: var(--m-color-warning-light-7);
+  --el-color-warning-light-8: var(--m-color-warning-light-8);
+  --el-color-warning-light-9: var(--m-color-warning-light-9);
+  --el-color-warning-dark-2: var(--m-color-warning-dark-2);
+
+  --el-color-danger: var(--m-color-danger);
+  --el-color-danger-light-3: var(--m-color-danger-light-3);
+  --el-color-danger-light-5: var(--m-color-danger-light-5);
+  --el-color-danger-light-7: var(--m-color-danger-light-7);
+  --el-color-danger-light-8: var(--m-color-danger-light-8);
+  --el-color-danger-light-9: var(--m-color-danger-light-9);
+  --el-color-danger-dark-2: var(--m-color-danger-dark-2);
+  --el-color-error: var(--m-color-error);
+  --el-color-error-light-3: var(--m-color-error-light-3);
+  --el-color-error-light-5: var(--m-color-error-light-5);
+  --el-color-error-light-7: var(--m-color-error-light-7);
+  --el-color-error-light-8: var(--m-color-error-light-8);
+  --el-color-error-light-9: var(--m-color-error-light-9);
+  --el-color-error-dark-2: var(--m-color-error-dark-2);
+
+  --el-text-color-primary: var(--m-text-color-primary);
+  --el-text-color-regular: var(--m-text-color-regular);
+  --el-text-color-secondary: var(--m-text-color-secondary);
+  --el-text-color-placeholder: var(--m-text-color-placeholder);
+  --el-text-color-disabled: var(--m-text-color-disabled);
+
+  --el-border-color: var(--m-border-color);
+  --el-border-color-light: var(--m-border-color-light);
+  --el-border-color-lighter: var(--m-border-color-lighter);
+  --el-border-color-extra-light: var(--m-border-color-extra-light);
+  --el-border-color-dark: var(--m-border-color-dark);
+  --el-border-color-darker: var(--m-border-color-darker);
+
+  --time-icon-default: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNS44MzMyNCAxMC43OTE3QzMuMDk0ODcgMTAuNzkxNyAwLjg3NDk4NyA4LjU3MTc0IDAuODc0OTg3IDUuODMzMzNDMC44NzQ5ODcgMy4wOTQ5MiAzLjA5NDg3IDAuODc1IDUuODMzMjQgMC44NzVDOC41NzE2MiAwLjg3NSAxMC43OTE1IDMuMDk0OTIgMTAuNzkxNSA1LjgzMzMzQzEwLjc5MTUgNi41MTgwNiAxMC42NTMgNy4xNjkzMSAxMC40MDI4IDcuNzYxNDRDMTAuMzczMiA3LjgzMTQ1IDEwLjM0MjEgNy45MDA2NCAxMC4zMDk0IDcuOTY4OTdDMTAuMTM1NyA4LjMzMjMgMTAuMjE4MyA4Ljc4MzgxIDEwLjU1MjIgOS4wMDg5M0wxMC42NzMyIDkuMDkwNDVDMTAuNzQ3OCA4Ljk3OTczIDEwLjgxODggOC44NjYyOSAxMC44ODU4IDguNzUwMzJDMTAuOTQ3MSA4LjY0NDM1IDExLjAwNTIgOC41MzYyNiAxMS4wNTk5IDguNDI2MThDMTEuMTEyNyA4LjMxOTkyIDExLjE2MjQgOC4yMTE4MiAxMS4yMDg4IDguMTAxOTlDMTEuNTAzNyA3LjQwNDA0IDExLjY2NjUgNi42MzcxNCAxMS42NjY1IDUuODMzMzNDMTEuNjY2NSAyLjYxMTY3IDkuMDU0ODYgMCA1LjgzMzI0IDBDMi42MTE2MyAwIDAgMi42MTE2NyAwIDUuODMzMzNDMCA5LjA1NDk5IDIuNjExNjMgMTEuNjY2NyA1LjgzMzI0IDExLjY2NjdDNi42MzcwNCAxMS42NjY3IDcuNDAzOTMgMTEuNTAzOCA4LjEwMTg2IDExLjIwOUM4LjIxMTY5IDExLjE2MjUgOC4zMTk4IDExLjExMjkgOC40MjYwNSAxMS4wNjAxQzguNTM2MTMgMTEuMDA1NCA4LjY0NDIxIDEwLjk0NzMgOC43NTAxOCAxMC44ODZDOC44NjA1NSAxMC44MjIyIDguOTY4NjIgMTAuNzU0OCA5LjA3NDI0IDEwLjY4NDFMOC45OTMxMiAxMC41NjI5QzguNzY5MTIgMTAuMjI4MyA4LjMxNzg5IDEwLjE0NDIgNy45NTM5OSAxMC4zMTY2QzcuODkwNSAxMC4zNDY3IDcuODI2MjYgMTAuMzc1NSA3Ljc2MTMyIDEwLjQwMjlDNy4xNjkyIDEwLjY1MzEgNi41MTc5NiAxMC43OTE3IDUuODMzMjQgMTAuNzkxN1oiIGZpbGw9IiM3MTc3N0UiLz4KICA8cGF0aCBkPSJNNS44MzMyNCAyLjE4NzVDNi4wNzQ4NyAyLjE4NzUgNi4yNzA3NCAyLjM4MzM4IDYuMjcwNzQgMi42MjVWNS42NTIxMkw3Ljg5MjU3IDcuMjczOTdDOC4wNjM0MiA3LjQ0NDgzIDguMDYzNDIgNy43MjE4NCA3Ljg5MjU3IDcuODkyNjlDNy43MjE3MiA4LjA2MzU1IDcuNDQ0NzIgOC4wNjM1NSA3LjI3Mzg2IDcuODkyNjlMNS41MjM4OSA2LjE0MjY5QzUuNDgxOTUgNi4xMDA3NSA1LjQ1MDMgNi4wNTI0IDUuNDI4OTUgNi4wMDA4QzUuNDA3NTYgNS45NDkyMiA1LjM5NTc1IDUuODkyNjUgNS4zOTU3NSA1LjgzMzMzVjIuNjI1QzUuMzk1NzUgMi4zODMzOCA1LjU5MTYyIDIuMTg3NSA1LjgzMzI0IDIuMTg3NVoiIGZpbGw9IiM3MTc3N0UiLz4KPC9zdmc+');
+  --time-icon-active: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNS44MzMyNCAxMC43OTE3QzMuMDk0ODcgMTAuNzkxNyAwLjg3NDk4NyA4LjU3MTc0IDAuODc0OTg3IDUuODMzMzNDMC44NzQ5ODcgMy4wOTQ5MiAzLjA5NDg3IDAuODc1IDUuODMzMjQgMC44NzVDOC41NzE2MiAwLjg3NSAxMC43OTE1IDMuMDk0OTIgMTAuNzkxNSA1LjgzMzMzQzEwLjc5MTUgNi41MTgwNiAxMC42NTMgNy4xNjkzMSAxMC40MDI4IDcuNzYxNDRDMTAuMzczMiA3LjgzMTQ1IDEwLjM0MjEgNy45MDA2NCAxMC4zMDk0IDcuOTY4OTdDMTAuMTM1NyA4LjMzMjMgMTAuMjE4MyA4Ljc4MzgxIDEwLjU1MjIgOS4wMDg5M0wxMC42NzMyIDkuMDkwNDVDMTAuNzQ3OCA4Ljk3OTczIDEwLjgxODggOC44NjYyOSAxMC44ODU4IDguNzUwMzJDMTAuOTQ3MSA4LjY0NDM1IDExLjAwNTIgOC41MzYyNiAxMS4wNTk5IDguNDI2MThDMTEuMTEyNyA4LjMxOTkyIDExLjE2MjQgOC4yMTE4MiAxMS4yMDg4IDguMTAxOTlDMTEuNTAzNyA3LjQwNDA0IDExLjY2NjUgNi42MzcxNCAxMS42NjY1IDUuODMzMzNDMTEuNjY2NSAyLjYxMTY3IDkuMDU0ODYgMCA1LjgzMzI0IDBDMi42MTE2MyAwIDAgMi42MTE2NyAwIDUuODMzMzNDMCA5LjA1NDk5IDIuNjExNjMgMTEuNjY2NyA1LjgzMzI0IDExLjY2NjdDNi42MzcwNCAxMS42NjY3IDcuNDAzOTMgMTEuNTAzOCA4LjEwMTg2IDExLjIwOUM4LjIxMTY5IDExLjE2MjUgOC4zMTk4IDExLjExMjkgOC40MjYwNSAxMS4wNjAxQzguNTM2MTMgMTEuMDA1NCA4LjY0NDIxIDEwLjk0NzMgOC43NTAxOCAxMC44ODZDOC44NjA1NSAxMC44MjIyIDguOTY4NjIgMTAuNzU0OCA5LjA3NDI0IDEwLjY4NDFMOC45OTMxMiAxMC41NjI5QzguNzY5MTIgMTAuMjI4MyA4LjMxNzg5IDEwLjE0NDIgNy45NTM5OSAxMC4zMTY2QzcuODkwNSAxMC4zNDY3IDcuODI2MjYgMTAuMzc1NSA3Ljc2MTMyIDEwLjQwMjlDNy4xNjkyIDEwLjY1MzEgNi41MTc5NiAxMC43OTE3IDUuODMzMjQgMTAuNzkxN1oiIGZpbGw9IiMwRDNBOTMiLz4KICA8cGF0aCBkPSJNNS44MzMyNCAyLjE4NzVDNi4wNzQ4NyAyLjE4NzUgNi4yNzA3NCAyLjM4MzM4IDYuMjcwNzQgMi42MjVWNS42NTIxMkw3Ljg5MjU3IDcuMjczOTdDOC4wNjM0MiA3LjQ0NDgzIDguMDYzNDIgNy43MjE4NCA3Ljg5MjU3IDcuODkyNjlDNy43MjE3MiA4LjA2MzU1IDcuNDQ0NzIgOC4wNjM1NSA3LjI3Mzg2IDcuODkyNjlMNS41MjM4OSA2LjE0MjY5QzUuNDgxOTUgNi4xMDA3NSA1LjQ1MDMgNi4wNTI0IDUuNDI4OTUgNi4wMDA4QzUuNDA3NTYgNS45NDkyMiA1LjM5NTc1IDUuODkyNjUgNS4zOTU3NSA1LjgzMzMzVjIuNjI1QzUuMzk1NzUgMi4zODMzOCA1LjU5MTYyIDIuMTg3NSA1LjgzMzI0IDIuMTg3NVoiIGZpbGw9IiMwRDNBOTMiLz4KPC9zdmc+');
+  --calendar-icon-default: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuMTYzOTEgMC41ODMyNTJDNC4zNzExNiAwLjU4MzI1MiA0LjUzOTE3IDAuNzUxMTA1IDQuNTM5MTcgMC45NTgxNjJWMi4wNTU4OUg4LjU4NzYxVjAuOTU4MTYyQzguNTg3NjEgMC43NTExMDUgOC43NTU2MiAwLjU4MzI1MiA4Ljk2Mjg3IDAuNTgzMjUyQzkuMTcwMTIgMC41ODMyNTIgOS4zMzgxMyAwLjc1MTEwNSA5LjMzODEzIDAuOTU4MTYyVjIuMDU1ODlIMTIuNDk4OUMxMi43MDYyIDIuMDU1ODkgMTIuODc0MiAyLjIyMzc0IDEyLjg3NDIgMi40MzA4VjYuODQ4NzJDMTIuODc0MiA3LjA1NTc4IDEyLjcwNjIgNy4yMjM2MyAxMi40OTg5IDcuMjIzNjNDMTIuMjkxNyA3LjIyMzYzIDEyLjEyMzcgNy4wNTU3OCAxMi4xMjM3IDYuODQ4NzJWMi44MDU3MUg5LjMzODEzVjMuNjU4QzkuMzM4MTMgMy44NjUwNiA5LjE3MDEyIDQuMDMyOTEgOC45NjI4NyA0LjAzMjkxQzguNzU1NjIgNC4wMzI5MSA4LjU4NzYxIDMuODY1MDYgOC41ODc2MSAzLjY1OFYyLjgwNTcxSDQuNTM5MTdWMy42NThDNC41MzkxNyAzLjg2NTA2IDQuMzcxMTYgNC4wMzI5MSA0LjE2MzkxIDQuMDMyOTFDMy45NTY2NiA0LjAzMjkxIDMuNzg4NjUgMy44NjUwNiAzLjc4ODY1IDMuNjU4VjIuODA1NzFIMC43NTA1MTRWMTIuMTE4OUg3LjY5OTk4QzcuOTA3MjMgMTIuMTE4OSA4LjA3NTI0IDEyLjI4NjggOC4wNzUyNCAxMi40OTM4QzguMDc1MjQgMTIuNzAwOSA3LjkwNzIzIDEyLjg2ODggNy42OTk5OCAxMi44Njg4SDAuMzc1MjU3QzAuMTY4MDA4IDEyLjg2ODggMCAxMi43MDA5IDAgMTIuNDkzOFYyLjQzMDhDMCAyLjIyMzc0IDAuMTY4MDA4IDIuMDU1ODkgMC4zNzUyNTcgMi4wNTU4OUgzLjc4ODY1VjAuOTU4MTYyQzMuNzg4NjUgMC43NTExMDUgMy45NTY2NiAwLjU4MzI1MiA0LjE2MzkxIDAuNTgzMjUyWiIgZmlsbD0iIzcxNzc3RSIvPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNDk5IDUuOTQ3MzRIMC4zNzUyNzFWNS4xOTc1MkgxMi40OTlWNS45NDczNFoiIGZpbGw9IiM3MTc3N0UiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjc2NyA5LjI2Mzc0QzEwLjk1ODMgOS4yNjM3NCAxMS4xMTM0IDkuNDE4NjggMTEuMTEzNCA5LjYwOTgxVjEwLjQxNzNIMTEuOTIxN0MxMi4xMTMgMTAuNDE3MyAxMi4yNjggMTAuNTcyMiAxMi4yNjggMTAuNzYzNEMxMi4yNjggMTAuOTU0NSAxMi4xMTMgMTEuMTA5NCAxMS45MjE3IDExLjEwOTRIMTAuNzY3QzEwLjU3NTcgMTEuMTA5NCAxMC40MjA2IDEwLjk1NDUgMTAuNDIwNiAxMC43NjM0VjkuNjA5ODFDMTAuNDIwNiA5LjQxODY4IDEwLjU3NTcgOS4yNjM3NCAxMC43NjcgOS4yNjM3NFoiIGZpbGw9IiM3MTc3N0UiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjA1NTcgOC4yMjU1M0M5LjgxMjE4IDguMjI1NTMgOC44MDQxMyA5LjIzMjY1IDguODA0MTMgMTAuNDc1QzguODA0MTMgMTEuNzE3MyA5LjgxMjE4IDEyLjcyNDQgMTEuMDU1NyAxMi43MjQ0QzEyLjI5OTIgMTIuNzI0NCAxMy4zMDcyIDExLjcxNzMgMTMuMzA3MiAxMC40NzVDMTMuMzA3MiA5LjIzMjY1IDEyLjI5OTIgOC4yMjU1MyAxMS4wNTU3IDguMjI1NTNaTTguMTExMzUgMTAuNDc1QzguMTExMzUgOC44NTAzOSA5LjQyOTU3IDcuNTMzMzkgMTEuMDU1NyA3LjUzMzM5QzEyLjY4MTggNy41MzMzOSAxNCA4Ljg1MDM5IDE0IDEwLjQ3NUMxNCAxMi4wOTk2IDEyLjY4MTggMTMuNDE2NiAxMS4wNTU3IDEzLjQxNjZDOS40Mjk1NyAxMy40MTY2IDguMTExMzUgMTIuMDk5NiA4LjExMTM1IDEwLjQ3NVoiIGZpbGw9IiM3MTc3N0UiLz4KPC9zdmc+');
+  --calendar-icon-active: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQuMTYzOTEgMC41ODMyNTJDNC4zNzExNiAwLjU4MzI1MiA0LjUzOTE3IDAuNzUxMTA1IDQuNTM5MTcgMC45NTgxNjJWMi4wNTU4OUg4LjU4NzYxVjAuOTU4MTYyQzguNTg3NjEgMC43NTExMDUgOC43NTU2MiAwLjU4MzI1MiA4Ljk2Mjg3IDAuNTgzMjUyQzkuMTcwMTIgMC41ODMyNTIgOS4zMzgxMyAwLjc1MTEwNSA5LjMzODEzIDAuOTU4MTYyVjIuMDU1ODlIMTIuNDk4OUMxMi43MDYyIDIuMDU1ODkgMTIuODc0MiAyLjIyMzc0IDEyLjg3NDIgMi40MzA4VjYuODQ4NzJDMTIuODc0MiA3LjA1NTc4IDEyLjcwNjIgNy4yMjM2MyAxMi40OTg5IDcuMjIzNjNDMTIuMjkxNyA3LjIyMzYzIDEyLjEyMzcgNy4wNTU3OCAxMi4xMjM3IDYuODQ4NzJWMi44MDU3MUg5LjMzODEzVjMuNjU4QzkuMzM4MTMgMy44NjUwNiA5LjE3MDEyIDQuMDMyOTEgOC45NjI4NyA0LjAzMjkxQzguNzU1NjIgNC4wMzI5MSA4LjU4NzYxIDMuODY1MDYgOC41ODc2MSAzLjY1OFYyLjgwNTcxSDQuNTM5MTdWMy42NThDNC41MzkxNyAzLjg2NTA2IDQuMzcxMTYgNC4wMzI5MSA0LjE2MzkxIDQuMDMyOTFDMy45NTY2NiA0LjAzMjkxIDMuNzg4NjUgMy44NjUwNiAzLjc4ODY1IDMuNjU4VjIuODA1NzFIMC43NTA1MTRWMTIuMTE4OUg3LjY5OTk4QzcuOTA3MjMgMTIuMTE4OSA4LjA3NTI0IDEyLjI4NjggOC4wNzUyNCAxMi40OTM4QzguMDc1MjQgMTIuNzAwOSA3LjkwNzIzIDEyLjg2ODggNy42OTk5OCAxMi44Njg4SDAuMzc1MjU3QzAuMTY4MDA4IDEyLjg2ODggMCAxMi43MDA5IDAgMTIuNDkzOFYyLjQzMDhDMCAyLjIyMzc0IDAuMTY4MDA4IDIuMDU1ODkgMC4zNzUyNTcgMi4wNTU4OUgzLjc4ODY1VjAuOTU4MTYyQzMuNzg4NjUgMC43NTExMDUgMy45NTY2NiAwLjU4MzI1MiA0LjE2MzkxIDAuNTgzMjUyWiIgZmlsbD0iIzBEM0E5MyIvPgogIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIuNDk5IDUuOTQ3MzRIMC4zNzUyNzFWNS4xOTc1MkgxMi40OTlWNS45NDczNFoiIGZpbGw9IiMwRDNBOTMiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTEwLjc2NyA5LjI2Mzc0QzEwLjk1ODMgOS4yNjM3NCAxMS4xMTM0IDkuNDE4NjggMTEuMTEzNCA5LjYwOTgxVjEwLjQxNzNIMTEuOTIxN0MxMi4xMTMgMTAuNDE3MyAxMi4yNjggMTAuNTcyMiAxMi4yNjggMTAuNzYzNEMxMi4yNjggMTAuOTU0NSAxMi4xMTMgMTEuMTA5NCAxMS45MjE3IDExLjEwOTRIMTAuNzY3QzEwLjU3NTcgMTEuMTA5NCAxMC40MjA2IDEwLjk1NDUgMTAuNDIwNiAxMC43NjM0VjkuNjA5ODFDMTAuNDIwNiA5LjQxODY4IDEwLjU3NTcgOS4yNjM3NCAxMC43NjcgOS4yNjM3NFoiIGZpbGw9IiMwRDNBOTMiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjA1NTcgOC4yMjU1M0M5LjgxMjE4IDguMjI1NTMgOC44MDQxMyA5LjIzMjY1IDguODA0MTMgMTAuNDc1QzguODA0MTMgMTEuNzE3MyA5LjgxMjE4IDEyLjcyNDQgMTEuMDU1NyAxMi43MjQ0QzEyLjI5OTIgMTIuNzI0NCAxMy4zMDcyIDExLjcxNzMgMTMuMzA3MiAxMC40NzVDMTMuMzA3MiA5LjIzMjY1IDEyLjI5OTIgOC4yMjU1MyAxMS4wNTU3IDguMjI1NTNaTTguMTExMzUgMTAuNDc1QzguMTExMzUgOC44NTAzOSA5LjQyOTU3IDcuNTMzMzkgMTEuMDU1NyA3LjUzMzM5QzEyLjY4MTggNy41MzMzOSAxNCA4Ljg1MDM5IDE0IDEwLjQ3NUMxNCAxMi4wOTk2IDEyLjY4MTggMTMuNDE2NiAxMS4wNTU3IDEzLjQxNjZDOS40Mjk1NyAxMy40MTY2IDguMTExMzUgMTIuMDk5NiA4LjExMTM1IDEwLjQ3NVoiIGZpbGw9IiMwRDNBOTMiLz4KPC9zdmc+');
+  --close-icon: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNOS4wNTkzNSA1LjU1OTJDOS4yMzAyIDUuMzg4MzQgOS4yMzAyIDUuMTExMzMgOS4wNTkzNSA0Ljk0MDQ4QzguODg4NSA0Ljc2OTYyIDguNjExNDkgNC43Njk2MiA4LjQ0MDYzIDQuOTQwNDhMNi45OTk5OSA2LjM4MTEyTDUuNTU5MzUgNC45NDA0OEM1LjM4ODUgNC43Njk2MiA1LjExMTQ5IDQuNzY5NjIgNC45NDA2MyA0Ljk0MDQ4QzQuNzY5NzggNS4xMTEzMyA0Ljc2OTc4IDUuMzg4MzQgNC45NDA2MyA1LjU1OTJMNi4zODEyNyA2Ljk5OTg0TDQuOTQwNjMgOC40NDA0OEM0Ljc2OTc4IDguNjExMzMgNC43Njk3OCA4Ljg4ODM0IDQuOTQwNjMgOS4wNTkyQzUuMTExNDkgOS4yMzAwNSA1LjM4ODUgOS4yMzAwNSA1LjU1OTM1IDkuMDU5Mkw2Ljk5OTk5IDcuNjE4NTZMOC40NDA2MyA5LjA1OTJDOC42MTE0OSA5LjIzMDA1IDguODg4NSA5LjIzMDA1IDkuMDU5MzUgOS4wNTkyQzkuMjMwMiA4Ljg4ODM0IDkuMjMwMiA4LjYxMTMzIDkuMDU5MzUgOC40NDA0OEw3LjYxODcxIDYuOTk5ODRMOS4wNTkzNSA1LjU1OTJaIiBmaWxsPSIjNzE3NzdFIi8+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yLjA0MTY2IDYuOTk5ODRDMi4wNDE2NiA5LjczODI1IDQuMjYxNTggMTEuOTU4MiA2Ljk5OTk5IDExLjk1ODJDNy42ODQ3MiAxMS45NTgyIDguMzM1OTcgMTEuODE5NiA4LjkyODEgMTEuNTY5NEM4Ljk5MzA0IDExLjU0MiA5LjA1NzI3IDExLjUxMzIgOS4xMjA3NyAxMS40ODMxQzkuNDg0NjggMTEuMzEwNyA5LjkzNTkxIDExLjM5NDggMTAuMTU5OSAxMS43Mjk0TDEwLjI0MSAxMS44NTA2QzEwLjEzNTQgMTEuOTIxMyAxMC4wMjczIDExLjk4ODcgOS45MTY5NyAxMi4wNTI1QzkuODExIDEyLjExMzggOS43MDI5MSAxMi4xNzE5IDkuNTkyODQgMTIuMjI2NkM5LjQ4NjU4IDEyLjI3OTQgOS4zNzg0NyAxMi4zMjkxIDkuMjY4NjQgMTIuMzc1NUM4LjU3MDcgMTIuNjcwMyA3LjgwMzggMTIuODMzMiA2Ljk5OTk5IDEyLjgzMzJDMy43NzgzMyAxMi44MzMyIDEuMTY2NjYgMTAuMjIxNSAxLjE2NjY2IDYuOTk5ODRDMS4xNjY2NiAzLjc3ODE4IDMuNzc4MzMgMS4xNjY1IDYuOTk5OTkgMS4xNjY1QzEwLjIyMTcgMS4xNjY1IDEyLjgzMzMgMy43NzgxOCAxMi44MzMzIDYuOTk5ODRDMTIuODMzMyA3LjgwMzY1IDEyLjY3MDUgOC41NzA1NSAxMi4zNzU2IDkuMjY4NDlDMTIuMzI5MiA5LjM3ODMyIDEyLjI3OTUgOS40ODY0MyAxMi4yMjY3IDkuNTkyNjlDMTIuMTcyIDkuNzAyNzYgMTIuMTE0IDkuODEwODUgMTIuMDUyNyA5LjkxNjgyQzExLjk4NTYgMTAuMDMyOCAxMS45MTQ2IDEwLjE0NjIgMTEuODQgMTAuMjU3TDExLjcxOTEgMTAuMTc1NEMxMS4zODUxIDkuOTUwMzEgMTEuMzAyNSA5LjQ5ODgxIDExLjQ3NjIgOS4xMzU0OEMxMS41MDg5IDkuMDY3MTUgMTEuNTQgOC45OTc5NSAxMS41Njk2IDguOTI3OTRDMTEuODE5OCA4LjMzNTgyIDExLjk1ODMgNy42ODQ1NyAxMS45NTgzIDYuOTk5ODRDMTEuOTU4MyA0LjI2MTQyIDkuNzM4NCAyLjA0MTUgNi45OTk5OSAyLjA0MTVDNC4yNjE1OCAyLjA0MTUgMi4wNDE2NiA0LjI2MTQyIDIuMDQxNjYgNi45OTk4NFoiIGZpbGw9IiM3MTc3N0UiLz4KPC9zdmc+');
+  --more-icon: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAmSURBVHgB7cixCQAACMTA4ASC4P6bKo5g+/xBmoApyeq5vi8wgwXIuQdTVmNzvQAAAABJRU5ErkJggg==');
+  --more-disabled-icon: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnSURBVHgB7cgxDQAACMTABv8KmFGAQQgSWD9/SZeCKcnqub4vMIMFA4ARncK8EFkAAAAASUVORK5CYII=');
+  /* --el-color-info: #909399;
+    --el-color-info-light-3: rgb(177.3, 179.4, 183.6);
+    --el-color-info-light-5: rgb(199.5, 201, 204);
+    --el-color-info-light-7: rgb(221.7, 222.6, 224.4);
+    --el-color-info-light-8: rgb(232.8, 233.4, 234.6);
+    --el-color-info-light-9: rgb(243.9, 244.2, 244.8);
+    --el-color-info-dark-2: rgb(115.2, 117.6, 122.4);
+
+    --el-bg-color: #ffffff;
+    --el-bg-color-page: #f2f3f5;
+    --el-bg-color-overlay: #ffffff;
+
+
+    --el-fill-color: #f0f2f5;
+    --el-fill-color-light: #f5f7fa;
+    --el-fill-color-lighter: #fafafa;
+    --el-fill-color-extra-light: #fafcff;
+    --el-fill-color-dark: #ebedf0;
+    --el-fill-color-darker: #e6e8eb;
+    --el-fill-color-blank: #ffffff;
+    --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
+    --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
+    --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+    --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
+    --el-disabled-bg-color: var(--el-fill-color-light);
+    --el-disabled-text-color: var(--el-text-color-placeholder);
+    --el-disabled-border-color: var(--el-border-color-light);
+    --el-overlay-color: rgba(0, 0, 0, .8);
+    --el-overlay-color-light: rgba(0, 0, 0, .7);
+    --el-overlay-color-lighter: rgba(0, 0, 0, .5);
+    --el-mask-color: rgba(255, 255, 255, .9);
+    --el-mask-color-extra-light: rgba(255, 255, 255, .3);
+    --el-border-width: 1px;
+    --el-border-style: solid;
+    --el-border-color-hover: var(--el-text-color-disabled);
+    --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);
+    --el-svg-monochrome-grey: var(--el-border-color) */
+}

package/packages/styles/src/time-picker.scss

@@ -0,0 +1,225 @@
+@use './theme.scss';
+.m-time-picker {
+  &.el-input__wrapper,
+  .el-input__wrapper {
+    display: inline-flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--el-color-white);
+    background-image: none;
+    cursor: text;
+    transform: translateZ(0px);
+    padding: 4px 12px;
+    border-radius: 2px;
+    border: 1px solid #d3dcec;
+    box-shadow: none;
+
+    .el-range-input,
+    .el-input__inner {
+      color: var(--el-text-color-primary);
+    }
+
+    .el-range__icon,
+    .el-input__prefix {
+      display: none;
+    }
+
+    &.is-active,
+    &.is-focus {
+      border: 1px solid var(--el-color-primary, #0d3a93);
+      box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+      .el-input__suffix .el-input__suffix-inner:not(:has(.el-icon))::after {
+        content: var(--time-icon-active);
+        display: block;
+        font-size: 14px;
+        line-height: 1;
+      }
+
+      .el-range__close-icon {
+        &::before {
+          visibility: visible;
+          content: var(--time-icon-active);
+          display: block;
+          font-size: 14px;
+          line-height: 1;
+          position: absolute;
+          right: 0;
+        }
+      }
+    }
+
+    .el-input__suffix .el-input__suffix-inner:not(:has(.el-icon))::after {
+      content: var(--time-icon-default);
+      display: block;
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .el-input__suffix .el-input__suffix-inner {
+      .el-icon {
+        svg {
+          display: none;
+        }
+
+        &::after {
+          content: var(--close-icon);
+          display: block;
+          font-size: 14px;
+          line-height: 1;
+        }
+      }
+    }
+
+    .el-range__close-icon {
+      &::before {
+        visibility: visible;
+        content: var(--time-icon-default);
+        display: block;
+        font-size: 14px;
+        line-height: 1;
+        position: absolute;
+        right: 0;
+      }
+      &::after {
+        content: var(--close-icon);
+        display: block;
+        font-size: 14px;
+        line-height: 1;
+        width: 14px;
+        height: 14px;
+        background-color: var(--el-color-white);
+        z-index: 10;
+      }
+      svg {
+        visibility: hidden;
+        position: absolute;
+        right: 0;
+      }
+    }
+
+    .el-range__close-icon--hidden {
+      opacity: 100;
+      visibility: hidden;
+    }
+
+    .el-range-separator {
+      color: var(--el-text-color-disabled);
+    }
+  }
+  &.el-input__wrapper:hover,
+  .el-input__wrapper:hover {
+    border: 1px solid var(--el-color-primary-light-3);
+    box-shadow: none;
+
+    &.is-active,
+    &.is-focus {
+      border: 1px solid var(--el-color-primary, #0d3a93);
+      box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+      .el-input__prefix {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+}
+
+.m-time-picker-popper {
+  // el-time-panel:考虑到el-date-time-picker
+  .el-date-picker__editor-wrap .el-time-panel,
+  &.el-picker__popper.el-popper {
+    box-shadow: 0 3px 10px 2px rgba(13, 58, 147, 0.08);
+    border-radius: 6px;
+    border: 1px solid #e6ebf4;
+  }
+
+  .el-popper__arrow,
+  .el-time-panel__content::after,
+  .el-time-panel__content::before {
+    display: none;
+  }
+
+  .el-scrollbar__bar.is-horizontal,
+  .el-scrollbar__bar.is-vertical {
+    display: none;
+  }
+
+  .el-time-spinner .el-time-spinner__wrapper {
+    width: 90px;
+    height: 156px;
+    padding: 8px;
+    box-sizing: border-box;
+
+    &:not(:last-child) {
+      border-right: 1px solid #e6ebf4;
+    }
+
+    .el-time-spinner__item {
+      width: 74px;
+      height: 28px;
+      line-height: 28px;
+      color: var(--el-text-color-regular);
+      font-size: 12px;
+      font-weight: 400;
+      text-align: center;
+
+      &.is-active:not(.disabled) {
+        color: var(--el-color-primary);
+        font-weight: 500;
+        border-radius: 2px;
+        background: var(--el-color-primary-light-9);
+      }
+      &:hover {
+        background: none;
+      }
+
+      &.is-disabled {
+        color: var(--el-text-color-disabled);
+      }
+    }
+
+    .el-time-spinner__arrow {
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+
+    .el-time-spinner__list:after,
+    .el-time-spinner__list:before {
+      height: 56px;
+    }
+  }
+
+  // has-seconds
+  .el-time-spinner.has-seconds .el-time-spinner__wrapper {
+    width: 60px;
+
+    .el-time-spinner__item {
+      width: 44px;
+    }
+
+    .el-time-spinner__list:after,
+    .el-time-spinner__list:before {
+      height: 56px;
+    }
+  }
+
+  .el-time-panel .el-time-panel__footer {
+    .el-time-panel__btn {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+    }
+
+    .cancel {
+      color: var(--el-text-color-regular);
+    }
+
+    .confirm {
+      color: var(--el-color-primary);
+    }
+  }
+
+  .el-time-range-picker {
+    width: fit-content;
+  }
+}

package/packages/styles/src/time-select.scss

@@ -0,0 +1,141 @@
+@use './theme.scss';
+
+.m-time-select {
+  .el-select__wrapper {
+    background-color: var(--el-color-white);
+    padding: 4px 12px;
+    border-radius: 2px;
+    border: 1px solid #d3dcec;
+    box-shadow: none;
+    height: 32px;
+    box-sizing: border-box;
+
+    // 鼠标悬停样式
+    &.is-hovering {
+      border: 1px solid var(--el-color-primary-light-3);
+      box-shadow: none;
+    }
+
+    // 选中样式
+    &.is-focused {
+      border: 1px solid var(--el-color-primary, #0d3a93);
+      box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+
+      // 其他情况(上下箭头)替换为自定义图标-高亮
+      .el-select__suffix:not(:has(.el-select__clear)) {
+        &::after {
+          content: var(--time-icon-active);
+        }
+      }
+    }
+    // 禁用样式
+    &.is-disabled {
+      border: 1px solid #d3dcec;
+      box-shadow: none;
+      background: #f5f5f6;
+
+      .el-select__selection .el-select__placeholder {
+        color: var(--el-text-color-secondary);
+
+        &.is-transparent {
+          color: var(--el-text-color-secondary);
+        }
+      }
+    }
+    // 隐藏前面自带的图标
+    .el-select__prefix {
+      display: none;
+    }
+
+    // 文本颜色调整
+    .el-select__selection .el-select__placeholder {
+      color: var(--el-text-color-primary);
+
+      &.is-transparent {
+        color: var(--el-text-color-disabled);
+      }
+    }
+
+    .el-select__suffix .el-select__clear {
+      svg {
+        opacity: 0;
+      }
+      &::after {
+        content: var(--close-icon);
+        display: block;
+        font-size: 14px;
+        line-height: 1;
+        position: relative;
+      }
+    }
+
+    // 其他情况(上下箭头)替换为自定义图标
+    .el-select__suffix:not(:has(.el-select__clear)) {
+      svg {
+        opacity: 0;
+      }
+      &::after {
+        content: var(--time-icon-default);
+        display: block;
+        font-size: 14px;
+        line-height: 1;
+        position: absolute;
+      }
+    }
+  }
+}
+
+// 选择框UI调整
+.m-time-select-popper {
+  &.el-popper {
+    box-shadow: 0 3px 10px 2px rgba(13, 58, 147, 0.08);
+    border-radius: 6px;
+    border: 1px solid #e6ebf4;
+  }
+
+  .el-popper__arrow,
+  .el-scrollbar__bar.is-horizontal,
+  .el-scrollbar__bar.is-vertical {
+    display: none;
+  }
+
+  .el-scrollbar {
+    &.is-empty {
+      display: none;
+    }
+  }
+
+  .el-scrollbar .el-select-dropdown__wrap {
+    max-height: 208px;
+
+    .el-select-dropdown__list {
+      padding: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .el-select-dropdown__item {
+      color: var(--el-text-color-primary);
+      height: 32px;
+      line-height: 26px;
+      padding: 3px 8px;
+
+      &.is-hovering {
+        background-color: #f5f5f6;
+        border-radius: 4px;
+      }
+
+      &.is-selected {
+        border-radius: 4px;
+        background: var(--el-color-primary-light-9);
+        color: var(--el-color-primary);
+        font-weight: 500;
+      }
+
+      &.is-disabled {
+        color: var(--el-text-color-disabled);
+      }
+    }
+  }
+}

package/packages/styles/src/tooltip.scss

@@ -0,0 +1,21 @@
+@use './theme.scss';
+
+$prefix: "m-tooltip";
+
+.#{$prefix} {
+}
+
+.#{$prefix}-popper {
+  box-shadow: 0 2px 8px 0 rgba(13, 58, 147, 0.2);
+  &.el-popper.is-dark {
+    background: #525a6d;
+    border: none;
+
+    .el-popper__arrow {
+      &::before {
+        background: #525a6d;
+        border: none;
+      }
+    }
+  }
+}

package/packages/styles/src/tree-select.scss

@@ -0,0 +1,52 @@
+@use './theme.scss';
+
+$prefix: "m-tree-select";
+
+.#{$prefix} {
+  --el-border-radius-base: 2px;
+
+  .el-select__wrapper {
+    border: 1px solid #d3dcec;
+    box-shadow: unset;
+  }
+  .el-select__wrapper.is-hovering {
+    border-color: var(--el-color-primary-light-3);
+    box-shadow: unset;
+  }
+  .el-select__wrapper.is-focused {
+    border-radius: 2px;
+    border: 1px solid var(--el-color-primary);
+    box-shadow: 0 0 0 2px var(--Projection, #e3ecf9);
+  }
+}
+
+.m-tree-select-dropdown {
+  .el-select-dropdown__wrap {
+    .el-select-dropdown__list {
+      padding: 8px;
+
+      .el-tree-node__expand-icon {
+        margin-left: 0px;
+      }
+      .el-tree-node__content {
+        &:active {
+          background-color: var(--el-color-primary-light-9);
+        }
+      }
+
+      .el-select-dropdown__item {
+        &.is-hovering {
+          background-color: #f5f5f6;
+        }
+
+        &.is-selected:after {
+          right: 12px;
+        }
+      }
+    }
+  }
+  // popper箭头隐藏
+  .el-popper__arrow::before {
+    display: none;
+  }
+}

package/packages/styles/src/tree.scss

@@ -0,0 +1,8 @@
+@use './theme.scss';
+
+.m-tree {
+  --el-tree-expand-icon-color: #71777e;
+  .el-checkbox {
+    --el-checkbox-input-border: 1px solid #cfd8e9;
+  }
+}