@flyanra/vue-core 0.1.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyanra/vue-core",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "private": false,
   "description": "Source-distributed Vue component library for Vite and Nuxt consumers.",
   "sideEffects": false,
@@ -17,6 +17,7 @@
       "types": "./src/styles/index.d.ts",
       "default": "./src/styles/index.scss"
     },
+    "./styles/*": "./src/styles/*",
     "./components": {
       "types": "./dist/types/components/index.d.ts",
       "import": "./src/components/index.ts"

package/src/components/basic/fly-button/FlyButton.mixins.scss

@@ -3,7 +3,7 @@
 $disabledOpacity: 0.5;
 
 @mixin fly-button-overrides {
-  &.ep-button {
+  &.el-button {
     &.aspect-1 {
       aspect-ratio: 1;
     }
@@ -15,42 +15,42 @@ $disabledOpacity: 0.5;
 
     &--primary {
       &:not(.is-link) {
-        --ep-button-text-color: var(--anra-white);
-        --ep-button-hover-text-color: var(--anra-white);
+        --el-button-text-color: var(--anra-white);
+        --el-button-hover-text-color: var(--anra-white);
 
         &.is-plain {
-          --ep-button-text-color: var(--default-text-color);
+          --el-button-text-color: var(--default-text-color);
         }
       }
     }
     &--success {
-      --ep-button-text-color: var(--dynamic-dark);
-      --ep-button-hover-text-color: var(--dynamic-dark);
+      --el-button-text-color: var(--dynamic-dark);
+      --el-button-hover-text-color: var(--dynamic-dark);
 
       &.is-plain {
-        --ep-button-text-color: var(--default-text-color);
+        --el-button-text-color: var(--default-text-color);
       }
     }
     &--warning {
-      --ep-button-text-color: var(--dynamic-dark);
-      --ep-button-hover-text-color: var(--dynamic-dark);
+      --el-button-text-color: var(--dynamic-dark);
+      --el-button-hover-text-color: var(--dynamic-dark);
 
       &.is-plain {
-        --ep-button-text-color: var(--default-text-color);
+        --el-button-text-color: var(--default-text-color);
       }
     }
   }
 }
 
 @mixin fly-button-overrides-dark {
-  &.ep-button {
+  &.el-button {
     &--primary {
       &:not(.is-link) {
-        --ep-button-text-color: var(--anra-black);
-        --ep-button-hover-text-color: var(--anra-black);
+        --el-button-text-color: var(--anra-black);
+        --el-button-hover-text-color: var(--anra-black);
 
         &.is-plain {
-          --ep-button-text-color: var(--default-text-color);
+          --el-button-text-color: var(--default-text-color);
         }
       }
     }

package/src/components/basic/fly-button/FlyButton.vue

@@ -102,7 +102,7 @@ function handleClick(e: MouseEvent) {
     width: 100%;
   }
 
-  :deep(.ep-button) {
+  :deep(.el-button) {
     &.active {
       /* 1px ring stile */
       box-shadow: 0 0 0 1px var(--anra-white);
@@ -160,17 +160,17 @@ function handleClick(e: MouseEvent) {
 <style lang="scss">
 @use './FlyButton.mixins.scss' as button;
 
-.ep-button-group {
+.el-button-group {
   display: flex;
 }
 
 html.dark {
-  button.ep-button {
+  button.el-button {
     @include button.fly-button-overrides-dark;
   }
 }
 
-button.ep-button {
+button.el-button {
   position: relative;
   overflow: hidden;
   transition: 0.1s;

package/src/components/navigation/menu/fly-sidebar/FlySidebar.vue

@@ -52,14 +52,14 @@ $trigger-height: 20px;
   position: relative;
   display: inline-block;
   height: 100%;
-  background-color: var(--ep-menu-bg-color);
+  background-color: var(--el-menu-bg-color);
   border-inline-end: 1px solid var(--anra-border-color);
 
-  :deep(.ep-menu) {
+  :deep(.el-menu) {
     border-right: 0;
-    &.ep-menu--vertical {
-      --ep-menu-item-height: #{$height};
-      --ep-menu-sub-item-height: calc(var(--ep-menu-item-height) - 6px);
+    &.el-menu--vertical {
+      --el-menu-item-height: #{$height};
+      --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
 
       padding-inline-end: 1rem;
       padding-top: calc(#{$trigger-height} + 10px);
@@ -67,11 +67,11 @@ $trigger-height: 20px;
       min-height: auto;
       height: 100%;
 
-      &.ep-menu--collapse {
+      &.el-menu--collapse {
         padding-inline-end: 0.3rem;
       }
 
-      &:not(.ep-menu--collapse) {
+      &:not(.el-menu--collapse) {
         width: 200px;
       }
     }
@@ -106,32 +106,32 @@ $trigger-height: 20px;
 $radius: 9999px;
 $height: 30px;
 
-.fly-sidebar .ep-menu.ep-menu--vertical,
+.fly-sidebar .el-menu.el-menu--vertical,
 .fly-sidebar-popper {
-  --ep-menu-item-height: #{$height};
-  --ep-menu-sub-item-height: calc(var(--ep-menu-item-height) - 2px);
+  --el-menu-item-height: #{$height};
+  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 2px);
 
   & > li:not(:last-child),
-  .ep-sub-menu .ep-menu .ep-menu-item {
+  .el-sub-menu .el-menu .el-menu-item {
     margin-bottom: 4px;
   }
 
-  .ep-sub-menu {
-    --ep-menu-item-height: #{$height};
+  .el-sub-menu {
+    --el-menu-item-height: #{$height};
 
-    .ep-menu {
+    .el-menu {
       padding-top: 0.25rem;
       padding-bottom: 0.25rem;
     }
   }
 
-  .ep-sub-menu__title,
-  .ep-menu-item {
+  .el-sub-menu__title,
+  .el-menu-item {
     border-top-right-radius: $radius;
     border-bottom-right-radius: $radius;
   }
 
-  .ep-menu-item.is-active {
+  .el-menu-item.is-active {
     font-weight: 500;
     background-color: var(--anra-primary);
     color: var(--anra-text-on-primary);
@@ -139,10 +139,10 @@ $height: 30px;
 }
 
 .fly-sidebar {
-  --ep-menu-base-level-padding: 10px;
+  --el-menu-base-level-padding: 10px;
 
-  .ep-menu-item [class^='ep-icon'],
-  .ep-sub-menu__title [class^='ep-icon']:not(.ep-sub-menu__icon-arrow) {
+  .el-menu-item [class^='el-icon'],
+  .el-sub-menu__title [class^='el-icon']:not(.el-sub-menu__icon-arrow) {
     margin-right: 10px;
     font-size: 15px;
   }

package/src/components/navigation/menu/fly-sidebar/FlySidebarNode.vue

@@ -1,7 +1,7 @@
 <template>
   <el-menu-item v-if="node.type === 'item'" :index="node.index" :disabled="node.disabled">
     <template v-if="node.icon">
-      <i class="ep-icon">
+      <i class="el-icon">
         <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
       </i>
     </template>
@@ -14,7 +14,7 @@
   <el-sub-menu v-else-if="node.type === 'submenu'" :index="node.index">
     <template #title>
       <template v-if="node.icon">
-        <i class="ep-icon">
+        <i class="el-icon">
           <FlyIcon :icon="node.icon.icon" :type="node.icon.type" />
         </i>
       </template>

package/src/styles/core/animations.scss

@@ -0,0 +1,40 @@
+@keyframes invisible-in {
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  100% {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+@keyframes fade-in-out {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.invisible-in {
+  visibility: hidden;
+  animation: invisible-in 0.1s ease-in 0.2s forwards;
+}
+
+.invisible-in-slow-sm {
+  visibility: hidden;
+  animation: invisible-in 0.2s ease-in 0.2s forwards;
+}
+
+.invisible-in-slow-md {
+  visibility: hidden;
+  animation: invisible-in 0.3s ease-in 0.5s forwards;
+}

package/src/styles/core/index.scss

@@ -0,0 +1,36 @@
+@use './animations.scss' as *;
+@use './scrollbar.scss' as *;
+@use './typography-utils.scss' as *;
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--background-dark-20);
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  word-break: normal;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-30px);
+}

package/src/styles/core/scrollbar.scss

@@ -0,0 +1,36 @@
+html {
+  body {
+    scroll-behavior: smooth;
+
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 5px;
+    }
+
+    /* Track */
+    ::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 10px;
+    }
+
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+    }
+  }
+}
+
+html.dark,
+html.light {
+  body {
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: var(--anra-border-color);
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--anra-primary);
+    }
+  }
+}

package/src/styles/core/typography-utils.scss

@@ -0,0 +1,9 @@
+.simple-metadata {
+  background: var(--anra-bg-20);
+  padding: 0px 5px;
+  border-radius: 5px;
+
+  &.bg-15 {
+    background: var(--anra-bg-15);
+  }
+}

package/src/styles/element/common.scss

@@ -1,6 +1,5 @@
 @use '../scss-tokens' as *;
 
-@use './config.scss' as *;
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (
     'primary': (

package/src/styles/element/dark.scss

@@ -1,4 +1,3 @@
-@use './config.scss' as *;
 @use '../scss-tokens' as *;
 
 @forward 'element-plus/theme-chalk/src/dark/var.scss' with (

package/src/styles/element/mixins/collapse.scss

@@ -0,0 +1,61 @@
+@mixin el-collapse-operation-style {
+  .el-collapse-item {
+    &__header {
+      padding: 0.5rem 0rem 0.5rem 0rem;
+      min-height: 48px;
+      text-align: left;
+    }
+    &__content {
+      background: var(--anra-bg-15-accent);
+    }
+  }
+}
+
+@mixin el-collapse-advisory-style {
+  .el-collapse-item {
+    border-bottom: 10px solid transparent;
+    &__header {
+      border-top: 1px solid var(--el-collapse-border-color);
+    }
+    &__content {
+      background: var(--anra-bg-20);
+      padding-bottom: 0;
+    }
+    &.is-disabled {
+      .el-collapse-item {
+        &__header {
+          color: var(--default-text-color);
+        }
+        &__arrow {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}
+
+@mixin el-airspace-layer-style {
+  .el-collapse-item {
+    border-bottom: 10px solid transparent;
+    &__header {
+      padding: 0.25rem 0rem 0.25rem 0rem;
+      // min-height: 30px;
+      text-align: left;
+      border-top: 1px solid var(--el-collapse-border-color);
+    }
+    &__content {
+      background: var(--anra-bg-15-accent);
+      padding-bottom: 0;
+    }
+    &.is-disabled {
+      .el-collapse-item {
+        &__header {
+          color: var(--default-text-color);
+        }
+        &__arrow {
+          visibility: hidden;
+        }
+      }
+    }
+  }
+}

package/src/styles/element/mixins/dialog.scss

@@ -0,0 +1,101 @@
+@mixin el-dialog-max-w-max-h {
+  --modal-padding-top: 30px;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      --el-dialog-width: 90%;
+
+      height: calc(100% - var(--modal-padding-top));
+    }
+  }
+}
+
+@mixin el-dialog-max-h {
+  --modal-padding-top: 30px;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      height: calc(100% - var(--modal-padding-top));
+    }
+  }
+}
+
+@mixin el-dialog-card-medium {
+  --modal-padding-top: 30px;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      --el-dialog-width: 90%;
+
+      max-width: 500px;
+      height: auto;
+      max-height: calc(100% - var(--modal-padding-top));
+    }
+  }
+}
+
+@mixin el-dialog-card-large {
+  @include el-dialog-card-medium;
+
+  .el-overlay-dialog {
+    .el-dialog {
+      --el-dialog-width: 90%;
+
+      max-width: 900px;
+    }
+  }
+}
+
+@mixin el-dialog-allow-body-scroll {
+  .el-overlay-dialog {
+    .el-dialog {
+      &__body {
+        overflow: auto;
+      }
+    }
+  }
+}
+
+@mixin el-dialog-operation-details-style {
+  .el-overlay-dialog {
+    padding-top: var(--modal-padding-top);
+    .el-dialog {
+      margin: 0 auto;
+      overflow: hidden;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      &__header {
+        padding-bottom: 0;
+        flex-shrink: 0;
+        border-bottom: 1px solid var(--anra-border-color);
+      }
+      &__body {
+        flex-grow: 1;
+        overflow: hidden;
+
+        .app-scroll-effect {
+          &__scroll-box {
+            padding: 0.75rem 1rem;
+          }
+        }
+      }
+      &__footer {
+        padding: 0.75rem 1rem;
+        flex-shrink: 0;
+        border-top: 1px solid var(--anra-border-color);
+      }
+    }
+  }
+}
+
+@mixin el-dialog-hide-header {
+  .el-overlay-dialog {
+    .el-dialog {
+      &__header {
+        display: none;
+      }
+    }
+  }
+}

package/src/styles/element/overrides/alerts.scss

@@ -0,0 +1,28 @@
+@use 'element-plus/theme-chalk/src/alert.scss' as *;
+
+@mixin alert-overrides {
+  &--error {
+    --el-color-error: var(--anra-state-error-lighter);
+    &.is-light {
+      --el-color-error: var(--anra-state-error-lighter);
+    }
+  }
+  &--warning {
+    &.is-dark {
+      --el-color-warning: var(--anra-state-warning-50);
+    }
+  }
+  &--info {
+    &.is-light {
+      --el-color-info: var(--anra-state-info-lighter);
+    }
+  }
+}
+
+.el-alert {
+  @include alert-overrides;
+
+  &__content {
+    flex-grow: 1;
+  }
+}

package/src/styles/element/overrides/badge.scss

@@ -0,0 +1,6 @@
+@use 'element-plus/theme-chalk/src/badge.scss' as *;
+
+.el-badge__content.is-dot {
+  height: 12px;
+  width: 12px;
+}

package/src/styles/element/overrides/cascader.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/cascader-panel.scss';
+@use 'element-plus/theme-chalk/src/cascader.scss';

package/src/styles/element/overrides/collapse.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/collapse-item.scss';
+@use 'element-plus/theme-chalk/src/collapse.scss';

package/src/styles/element/overrides/dialog.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/dialog.scss' as *;
+@use 'element-plus/theme-chalk/src/overlay.scss' as *;

package/src/styles/element/overrides/dropdown.scss

@@ -0,0 +1,11 @@
+@use 'element-plus/theme-chalk/src/dropdown.scss' as *;
+@use 'element-plus/theme-chalk/src/dropdown-item.scss' as *;
+@use 'element-plus/theme-chalk/src/dropdown-menu.scss' as *;
+
+.el-dropdown-menu {
+  .el-dropdown-menu__item {
+    &--divided {
+      border-color: var(--anra-border-color);
+    }
+  }
+}

package/src/styles/element/overrides/form.scss

@@ -0,0 +1,107 @@
+@use 'element-plus/theme-chalk/src/form.scss' as *;
+@use 'element-plus/theme-chalk/src/form-item.scss' as *;
+@use 'element-plus/theme-chalk/src/input.scss' as *;
+@use 'element-plus/theme-chalk/src/input-number.scss' as *;
+@use 'element-plus/theme-chalk/src/option.scss' as *;
+@use 'element-plus/theme-chalk/src/select.scss' as *;
+@use 'element-plus/theme-chalk/src/radio.scss' as *;
+@use 'element-plus/theme-chalk/src/radio-group.scss' as *;
+@use 'element-plus/theme-chalk/src/checkbox.scss' as *;
+@use 'element-plus/theme-chalk/src/date-picker.scss' as *;
+@use 'element-plus/theme-chalk/src/switch.scss' as *;
+
+.el-form-item {
+  &__error,
+  .el-form-item__label {
+    --el-color-danger: var(--anra-form-item-error-color);
+  }
+
+  &.hide-label {
+    .el-form-item__label {
+      display: none;
+    }
+  }
+
+  .el-form-item__content {
+    flex-direction: column;
+    align-items: start;
+
+    .el-form-item__error {
+      position: relative;
+    }
+  }
+
+  &.inline-form-item {
+    .el-form-item__label {
+      flex-grow: 1;
+    }
+    .el-form-item__content {
+      flex-basis: auto;
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.el-form-item.is-error .el-input__wrapper,
+.el-form-item.is-error .el-input__wrapper:hover,
+.el-form-item.is-error .el-input__wrapper:focus,
+.el-form-item.is-error .el-input__wrapper.is-focus,
+.el-form-item.is-error .el-textarea__inner,
+.el-form-item.is-error .el-textarea__inner:hover,
+.el-form-item.is-error .el-textarea__inner:focus,
+.el-form-item.is-error .el-textarea__inner.is-focus,
+.el-form-item.is-error .el-select__wrapper,
+.el-form-item.is-error .el-select__wrapper:hover,
+.el-form-item.is-error .el-select__wrapper:focus,
+.el-form-item.is-error .el-select__wrapper.is-focus,
+.el-form-item.is-error .el-input-tag__wrapper,
+.el-form-item.is-error .el-input-tag__wrapper:hover,
+.el-form-item.is-error .el-input-tag__wrapper:focus,
+.el-form-item.is-error .el-input-tag__wrapper.is-focus {
+  --el-color-danger: var(--anra-form-item-error-color);
+}
+
+.el-select__wrapper {
+  --el-fill-color-blank: var(--anra-bg-20);
+  --el-border-color: var(--anra-form-input-border);
+
+  &.is-disabled {
+    background-color: var(--anra-disabled-bg);
+  }
+}
+
+.el-input-tag {
+  &.el-input-tag__wrapper {
+    background-color: var(--anra-bg-20);
+  }
+  .el-input-tag__input {
+    background-color: var(--anra-bg-20);
+  }
+}
+
+.el-radio-group {
+  &.fill-available-space {
+    width: 100%;
+    display: flex;
+    .el-radio-button {
+      flex: 1;
+      &__inner {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.el-input-number {
+  width: 100%;
+}
+
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
+.el-form-item.is-required:not(.is-no-asterisk).asterisk-left
+  > .el-form-item__label-wrap
+  > .el-form-item__label:before {
+  font-size: 1rem;
+  line-height: 1px;
+  font-weight: bolder;
+}

package/src/styles/element/overrides/message.scss

@@ -0,0 +1,39 @@
+@use 'element-plus/theme-chalk/src/message.scss' as *;
+
+@mixin message-overrides {
+  &.el-message {
+    &.no-icon {
+      .el-message__icon {
+        display: none;
+      }
+    }
+    &.priority-notification {
+      width: 80%;
+      max-width: 700px;
+    }
+    &--success {
+      --el-message-text-color: var(--anra-white);
+    }
+    &--info {
+      --el-message-border-color: var(--anra-info-bg);
+      --el-message-text-color: var(--default-text-color);
+      --el-message-bg-color: var(--anra-info-bg);
+    }
+    &--error {
+      --el-message-border-color: var(--anra-state-error);
+      --el-message-text-color: var(--default-text-color);
+      --el-message-bg-color: var(--dynamic-dark);
+    }
+  }
+}
+
+.el-message {
+  @include message-overrides;
+}
+
+@media (max-width: 768px) {
+  .el-message {
+    top: 70px !important;
+    width: 80%;
+  }
+}

package/src/styles/element/overrides/notification.scss

@@ -0,0 +1,46 @@
+@use 'element-plus/theme-chalk/src/notification.scss' as *;
+
+.el-notification {
+  --el-notification-radius: 5px;
+  width: 400px;
+  background-color: var(--anra-bg-25);
+  border-color: var(--anra-border-color);
+}
+
+.el-notification.collision-alert-notification-container {
+  --border-color: var(--anra-state-error-lighter-50);
+  --text-color: var(--default-text-color);
+  --bg-color: var(--dynamic-dark);
+
+  width: 500px;
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
+
+  .el-notification__icon,
+  .el-notification__title {
+    display: none;
+  }
+
+  .el-notification__content {
+    color: var(--text-color);
+  }
+}
+
+.el-notification.geofence-alert-notification-container {
+  --border-color: var(--anra-state-warning-50);
+  --text-color: var(--default-text-color);
+  --bg-color: var(--dynamic-dark);
+
+  width: 500px;
+  background-color: var(--bg-color);
+  border-color: var(--border-color);
+
+  .el-notification__icon,
+  .el-notification__title {
+    display: none;
+  }
+
+  .el-notification__content {
+    color: var(--text-color);
+  }
+}

package/src/styles/element/overrides/segmented.scss

@@ -0,0 +1,17 @@
+@use 'element-plus/theme-chalk/src/segmented.scss' as *;
+
+.el-segmented {
+  border: 1px solid var(--anra-border-color);
+
+  .el-segmented__item.is-selected {
+    --el-segmented-item-selected-color: var(--anra-white);
+  }
+}
+
+html.dark {
+  .el-segmented {
+    .el-segmented__item.is-selected {
+      --el-segmented-item-selected-color: var(--anra-black);
+    }
+  }
+}

package/src/styles/element/overrides/step.scss

@@ -0,0 +1,100 @@
+@use 'element-plus/theme-chalk/src/steps.scss' as *;
+@use 'element-plus/theme-chalk/src/step.scss' as *;
+
+.el-steps {
+  &.el-steps--horizontal {
+    .el-step__head {
+      .el-step__line {
+        height: 1px;
+        top: 15px;
+      }
+
+      .el-step__icon {
+        width: 30px;
+        height: 30px;
+      }
+
+      &.is-process {
+        border-color: var(--primary);
+
+        .el-step__icon {
+          &.is-text {
+            background-color: var(--anra-primary);
+            color: var(--anra-black);
+          }
+        }
+      }
+
+      &.is-success {
+        border-color: var(--anra-primary-accent);
+
+        .el-step__icon {
+          &.is-text {
+            background-color: var(--anra-primary-accent);
+            color: var(--anra-black);
+          }
+        }
+      }
+    }
+
+    .el-step__main {
+      .el-step__title {
+        font-size: 13px;
+        line-height: normal;
+        padding-top: 0.25rem;
+
+        .clickable {
+          cursor: pointer;
+          text-decoration: underline;
+          border-bottom: 1px solid transparent;
+
+          &:hover {
+            color: var(--anra-primary);
+            border-color: transparent;
+          }
+        }
+
+        &.is-process,
+        &.is-success {
+          color: var(--default-text-color);
+        }
+
+        &.is-process {
+          text-decoration: none;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .el-step {
+    &.is-center {
+      &:first-child {
+        .el-step__head {
+          text-align: start;
+          .el-step__line {
+            inset-inline-start: 0;
+          }
+        }
+        .el-step__main {
+          text-align: start;
+        }
+      }
+      &:last-child {
+        .el-step__head {
+          text-align: end;
+        }
+        .el-step__main {
+          text-align: end;
+        }
+      }
+      &:nth-last-child(2) {
+        .el-step__head {
+          .el-step__line {
+            inset-inline-end: -100%;
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/element/overrides/table.scss

@@ -0,0 +1,2 @@
+@use 'element-plus/theme-chalk/src/table-column.scss';
+@use 'element-plus/theme-chalk/src/table.scss';

package/src/styles/element/overrides/tag.scss

@@ -0,0 +1,19 @@
+@use 'element-plus/theme-chalk/src/tag.scss' as *;
+
+.el-tag--info {
+  &.el-tag--light {
+    --el-tag-text-color: var(--default-text-color);
+    --el-tag-bg-color: var(--anra-info-bg);
+    --el-tag-border-color: var(--anra-info-bg);
+  }
+  &.el-tag--dark {
+  }
+}
+
+.el-tag--warning {
+  &.el-tag--light {
+  }
+  &.el-tag--dark {
+    --el-tag-text-color: var(--anra-black);
+  }
+}

package/src/styles/element/config.scss

@@ -1,3 +0,0 @@
-@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
-  $namespace: 'ep'
-);