@timus-networks/theme 2.4.138 → 2.4.141

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@timus-networks/theme",
   "configKey": "themeOptions",
-  "version": "2.4.137",
+  "version": "2.4.140",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -11,7 +11,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@timus-networks/theme";
-const version = "2.4.137";
+const version = "2.4.140";
 const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
 const type = "module";
 const exports = {

package/dist/runtime/assets/scss/main.css

@@ -1301,7 +1301,7 @@ body {
   --el-color-white: #ffffff;
   --el-color-black: #000000;
   --el-color-primary-rgb: 87, 55, 214;
-  --el-color-secondary-rgb: 119, 212, 183;
+  --el-color-secondary-rgb: 168, 166, 177;
   --el-color-neutral-rgb: 168, 166, 177;
   --el-color-success-rgb: 76, 183, 112;
   --el-color-warning-rgb: 232, 197, 82;
@@ -1373,8 +1373,8 @@ body {
   --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
   --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
   --el-disabled-bg-color: var(--el-color-neutral-light-1);
-  --el-disabled-text-color: var(--el-color-neutral-light-4);
-  --el-disabled-border-color: var(--el-color-neutral-light-4);
+  --el-disabled-text-color: var(--el-color-neutral-light-6);
+  --el-disabled-border-color: var(--el-color-neutral-light-5);
   --el-overlay-color: rgba(0, 0, 0, 0.8);
   --el-overlay-color-light: rgba(0, 0, 0, 0.7);
   --el-overlay-color-lighter: #4cb770;
@@ -1561,11 +1561,11 @@ body {
   --el-alert-description-font-size: 10px;
   --el-alert-close-font-size: 14px;
   --el-alert-close-customed-font-size: 14px;
-  --el-alert-icon-size: 18px;
+  --el-alert-icon-size: 12px;
   --el-alert-icon-large-size: 32px;
   position: relative;
   width: 100%;
-  padding: var(--el-alert-padding);
+  padding: 8px 16px;
   margin: 0;
   box-sizing: border-box;
   border-radius: var(--el-border-radius-small);
@@ -1573,7 +1573,7 @@ body {
   border-style: var(--el-border-style);
   border-color: var(--el-alert-border-color);
   position: relative;
-  background-color: var(--el-color-info-light-1);
+  background-color: var(--el-color-neutral-light-1);
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -1594,42 +1594,61 @@ body {
   justify-content: center;
 }
 
+.el-alert--primary {
+  --el-alert-bg-color: var(--el-color-primary-light-1);
+  --el-alert-border-color: var(--el-color-primary-light-3);
+}
+.el-alert--primary.is-light {
+  background-color: var(--el-alert-bg-color);
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-light .el-alert__description {
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-dark {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
+}
+.el-alert--primary.is-light .el-alert__close-btn {
+  color: var(--el-color-primary-light-6);
+}
+
 .el-alert--success {
   --el-alert-bg-color: var(--el-color-success-light-1);
   --el-alert-border-color: var(--el-color-success-light-3);
 }
 .el-alert--success.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-light .el-alert__description {
-  color: var(--el-color-success-light-4);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-dark {
   background-color: var(--el-color-success);
   color: var(--el-color-white);
 }
 .el-alert--success.is-light .el-alert__close-btn {
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 
 .el-alert--info {
-  --el-alert-bg-color: var(--el-color-info-light-1);
-  --el-alert-border-color: var(--el-color-info-light-3);
+  --el-alert-bg-color: var(--el-color-neutral-light-1);
+  --el-alert-border-color: var(--el-color-neutral-light-3);
 }
 .el-alert--info.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-light .el-alert__description {
-  color: var(--el-color-info-light-4);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-dark {
-  background-color: var(--el-color-info);
+  background-color: var(--el-color-neutral);
   color: var(--el-color-white);
 }
 .el-alert--info.is-light .el-alert__close-btn {
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 
 .el-alert--warning {
@@ -1638,17 +1657,17 @@ body {
 }
 .el-alert--warning.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-light .el-alert__description {
-  color: var(--el-color-warning-light-4);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-dark {
   background-color: var(--el-color-warning);
   color: var(--el-color-white);
 }
 .el-alert--warning.is-light .el-alert__close-btn {
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 
 .el-alert--error {
@@ -1657,36 +1676,17 @@ body {
 }
 .el-alert--error.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-error-light-5);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-light .el-alert__description {
-  color: var(--el-color-error-light-4);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-dark {
   background-color: var(--el-color-error);
   color: var(--el-color-white);
 }
 .el-alert--error.is-light .el-alert__close-btn {
-  color: var(--el-color-error-light-5);
-}
-
-.el-alert--danger {
-  --el-alert-bg-color: var(--el-color-danger-light-1);
-  --el-alert-border-color: var(--el-color-danger-light-3);
-}
-.el-alert--danger.is-light {
-  background-color: var(--el-alert-bg-color);
-  color: var(--el-color-danger-light-5);
-}
-.el-alert--danger.is-light .el-alert__description {
-  color: var(--el-color-danger-light-4);
-}
-.el-alert--danger.is-dark {
-  background-color: var(--el-color-danger);
-  color: var(--el-color-white);
-}
-.el-alert--danger.is-light .el-alert__close-btn {
-  color: var(--el-color-danger-light-5);
+  color: var(--el-color-error-light-6);
 }
 
 .el-alert::before {
@@ -1851,10 +1851,10 @@ body {
   text-overflow: ellipsis;
 }
 .el-autocomplete-suggestion li:hover {
-  background-color: var(--el-color-white);
+  background-color: var(--el-color-neutral-light-1);
 }
 .el-autocomplete-suggestion li.highlighted {
-  background-color: var(--el-color-white);
+  background-color: var(--el-color-neutral-light-1);
 }
 .el-autocomplete-suggestion li.divider {
   margin-top: 6px;
@@ -8218,10 +8218,10 @@ heights > $common-component-size
 }
 
 .el-date-editor {
-  --el-date-editor-width: 220px;
-  --el-date-editor-monthrange-width: 300px;
-  --el-date-editor-daterange-width: 350px;
-  --el-date-editor-datetimerange-width: 400px;
+  --el-date-editor-width: 100%;
+  --el-date-editor-monthrange-width: 100%;
+  --el-date-editor-daterange-width: 100%;
+  --el-date-editor-datetimerange-width: 100%;
   --el-input-text-color: var(--el-text-color-regular);
   --el-input-border: var(--el-border);
   --el-input-hover-border: var(--el-border-color-hover);
@@ -9484,8 +9484,8 @@ heights > $common-component-size
 
 .el-dropdown {
   --el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
-  --el-dropdown-menuItem-hover-fill: var(--el-color-white);
-  --el-dropdown-menuItem-hover-color: var(--el-color-primary);
+  --el-dropdown-menuItem-hover-fill: var(--el-color-neutral-light-1);
+  --el-dropdown-menuItem-hover-color: var(--el-color-neutral-light-9);
   --el-dropdown-menu-index: 10;
   display: inline-flex;
   position: relative;
@@ -9504,8 +9504,8 @@ heights > $common-component-size
 }
 .el-dropdown__popper {
   --el-dropdown-menu-box-shadow: var(--el-box-shadow-light);
-  --el-dropdown-menuItem-hover-fill: var(--el-color-white);
-  --el-dropdown-menuItem-hover-color: var(--el-color-primary);
+  --el-dropdown-menuItem-hover-fill: var(--el-color-neutral-light-1);
+  --el-dropdown-menuItem-hover-color: var(--el-color-neutral-light-9);
   --el-dropdown-menu-index: 10;
 }
 .el-dropdown__popper.el-popper {
@@ -9602,7 +9602,7 @@ heights > $common-component-size
   top: 0;
   left: 0;
   z-index: var(--el-dropdown-menu-index);
-  padding: 5px 0;
+  padding: 8px;
   margin: 0;
   background-color: var(--el-bg-color-overlay);
   border: none;
@@ -9620,9 +9620,10 @@ heights > $common-component-size
   margin: 0;
   font-size: var(--el-font-size-small);
   font-weight: 500;
-  color: var(--el-text-color-secondary);
+  color: var(--el-text-color-neutral-light-9);
   cursor: pointer;
   outline: none;
+  border-radius: var(--el-border-radius-small);
 }
 .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:not(.is-disabled):focus {
   background-color: var(--el-dropdown-menuItem-hover-fill);
@@ -11580,6 +11581,10 @@ heights > $common-component-size
 .el-message-box__status {
   font-size: 24px;
 }
+.el-message-box__status.el-message-box-icon--primary {
+  --el-messagebox-color: var(--el-color-primary);
+  color: var(--el-messagebox-color);
+}
 .el-message-box__status.el-message-box-icon--success {
   --el-messagebox-color: var(--el-color-success);
   color: var(--el-messagebox-color);
@@ -11596,10 +11601,6 @@ heights > $common-component-size
   --el-messagebox-color: var(--el-color-error);
   color: var(--el-messagebox-color);
 }
-.el-message-box__status.el-message-box-icon--danger {
-  --el-messagebox-color: var(--el-color-danger);
-  color: var(--el-messagebox-color);
-}
 
 .el-message-box__message {
   margin: 0;
@@ -11756,6 +11757,30 @@ heights > $common-component-size
 .el-message .el-message__closeBtn:hover {
   color: var(--el-color-info-light-6);
 }
+.el-message--primary {
+  --el-message-bg-color: var(--el-color-primary-light-1);
+  --el-message-border-color: var(--el-color-primary-light-3);
+  --el-message-text-color: var(--el-color-primary);
+}
+.el-message--primary .el-message__content {
+  color: var(--el-message-text-color);
+  overflow-wrap: break-word;
+}
+.el-message--primary .el-message__closeBtn {
+  color: var(--el-color-primary);
+}
+.el-message--primary .el-message__closeBtn:hover {
+  color: var(--el-color-primary-light-4);
+}
+.el-message--primary .el-message__closeBtn:active {
+  color: var(--el-color-primary-light-6);
+}
+
+.el-message .el-message-icon--primary {
+  color: var(--el-message-text-color);
+  width: 12px;
+  height: 12px;
+}
 .el-message--success {
   --el-message-bg-color: var(--el-color-success-light-1);
   --el-message-border-color: var(--el-color-success-light-3);
@@ -11852,30 +11877,6 @@ heights > $common-component-size
   width: 12px;
   height: 12px;
 }
-.el-message--danger {
-  --el-message-bg-color: var(--el-color-danger-light-1);
-  --el-message-border-color: var(--el-color-danger-light-3);
-  --el-message-text-color: var(--el-color-danger);
-}
-.el-message--danger .el-message__content {
-  color: var(--el-message-text-color);
-  overflow-wrap: break-word;
-}
-.el-message--danger .el-message__closeBtn {
-  color: var(--el-color-danger);
-}
-.el-message--danger .el-message__closeBtn:hover {
-  color: var(--el-color-danger-light-4);
-}
-.el-message--danger .el-message__closeBtn:active {
-  color: var(--el-color-danger-light-6);
-}
-
-.el-message .el-message-icon--danger {
-  color: var(--el-message-text-color);
-  width: 12px;
-  height: 12px;
-}
 .el-message .el-message__badge {
   position: absolute;
   top: -8px;
@@ -12002,6 +12003,10 @@ heights > $common-component-size
 .el-notification .el-notification__closeBtn:hover {
   color: var(--el-notification-close-hover-color);
 }
+.el-notification .el-notification--primary {
+  --el-notification-icon-color: var(--el-color-primary);
+  color: var(--el-notification-icon-color);
+}
 .el-notification .el-notification--success {
   --el-notification-icon-color: var(--el-color-success);
   color: var(--el-notification-icon-color);
@@ -12018,10 +12023,6 @@ heights > $common-component-size
   --el-notification-icon-color: var(--el-color-error);
   color: var(--el-notification-icon-color);
 }
-.el-notification .el-notification--danger {
-  --el-notification-icon-color: var(--el-color-danger);
-  color: var(--el-notification-icon-color);
-}
 
 .el-notification-fade-enter-from.right {
   right: 0;
@@ -12102,13 +12103,13 @@ heights > $common-component-size
 }
 
 .el-pagination {
-  --el-pagination-font-size: 14px;
+  --el-pagination-font-size: 12px;
   --el-pagination-bg-color: var(--el-fill-color-blank);
-  --el-pagination-text-color: var(--el-color-neutral-light-4);
+  --el-pagination-text-color: var(--el-color-neutral-light-6);
   --el-pagination-border-radius: 2px;
-  --el-pagination-button-color: var(--el-color-neutral-light-4);
-  --el-pagination-button-width: 32px;
-  --el-pagination-button-height: 30px;
+  --el-pagination-button-color: var(--el-color-neutral-light-6);
+  --el-pagination-button-width: 24px;
+  --el-pagination-button-height: 28px;
   --el-pagination-select-height: 20px;
   --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
   --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
@@ -12116,18 +12117,18 @@ heights > $common-component-size
   --el-pagination-hover-color: var(--el-color-primary);
   --el-pagination-font-size-small: 12px;
   --el-pagination-button-width-small: 24px;
-  --el-pagination-button-height-small: 30px;
+  --el-pagination-button-height-small: 28px;
   --el-pagination-button-width-large: 40px;
-  --el-pagination-button-height-large: 30px;
+  --el-pagination-button-height-large: 28px;
   --el-pagination-item-gap: 16px;
   --el-pagination-width: 100%;
-  --el-pagination-font-size: 14px;
+  --el-pagination-font-size: 12px;
   --el-pagination-bg-color: var(--el-fill-color-blank);
-  --el-pagination-text-color: var(--el-color-neutral-light-4);
+  --el-pagination-text-color: var(--el-color-neutral-light-6);
   --el-pagination-border-radius: 2px;
-  --el-pagination-button-color: var(--el-color-neutral-light-4);
-  --el-pagination-button-width: 32px;
-  --el-pagination-button-height: 30px;
+  --el-pagination-button-color: var(--el-color-neutral-light-6);
+  --el-pagination-button-width: 24px;
+  --el-pagination-button-height: 28px;
   --el-pagination-select-height: 20px;
   --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
   --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
@@ -12135,9 +12136,9 @@ heights > $common-component-size
   --el-pagination-hover-color: var(--el-color-primary);
   --el-pagination-font-size-small: 12px;
   --el-pagination-button-width-small: 24px;
-  --el-pagination-button-height-small: 30px;
+  --el-pagination-button-height-small: 28px;
   --el-pagination-button-width-large: 40px;
-  --el-pagination-button-height-large: 30px;
+  --el-pagination-button-height-large: 28px;
   --el-pagination-item-gap: 16px;
   --el-pagination-width: 100%;
   white-space: nowrap;
@@ -12152,6 +12153,7 @@ heights > $common-component-size
   text-align: center;
   -moz-appearance: textfield;
   height: calc(var(--el-pagination-button-height, 30px) - 2px);
+  font-size: 12px;
 }
 .el-pagination .el-select {
   width: 128px;
@@ -12159,6 +12161,7 @@ heights > $common-component-size
 .el-pagination .el-select .el-select__wrapper {
   height: var(--el-pagination-select-height);
   min-height: var(--el-pagination-button-height);
+  font-size: 12px;
 }
 .el-pagination button {
   display: flex;
@@ -13366,12 +13369,12 @@ heights > $common-component-size
 
 .el-select-dropdown__list {
   list-style: none;
-  padding: 6px 0;
+  padding: 8px;
   margin: 0;
   box-sizing: border-box;
 }
 .el-select-dropdown__list.el-vl__window {
-  margin: 6px 0;
+  margin: 8px;
   padding: 0;
 }
 
@@ -13394,19 +13397,21 @@ heights > $common-component-size
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--el-text-color-secondary);
+  color: var(--el-text-color-neutral-light-9);
   height: 32px;
   line-height: 32px;
   box-sizing: border-box;
   cursor: pointer;
+  border-radius: var(--el-border-radius-small);
 }
 .el-select-dropdown__item.is-hovering {
-  background-color: var(--el-color-white);
-  color: var(--el-color-primary);
+  background-color: var(--el-color-neutral-light-1);
+  color: var(--el-text-color-neutral-light-9);
 }
 
 .el-select-dropdown__item.is-selected {
-  color: var(--el-color-primary);
+  color: var(--el-text-color-neutral-light-9);
+  background-color: var(--el-color-neutral-light-2);
   font-weight: 500;
 }
 
@@ -13425,7 +13430,7 @@ heights > $common-component-size
   border-right: none;
   background-repeat: no-repeat;
   background-position: center;
-  background-color: var(--el-color-primary);
+  background-color: var(--el-text-color-neutral-light-9);
   mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
   mask-size: 100% 100%;
   -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
@@ -14787,8 +14792,8 @@ heights > $common-component-size
   font-size: var(--el-font-size-base);
 }
 .el-table-filter__list-item:hover {
-  background-color: var(--el-color-white);
-  color: var(--el-color-primary);
+  background-color: var(--el-color-neutral-light-1);
+  color: var(--el-color-neutral-light-9);
 }
 .el-table-filter__list-item.is-active {
   background-color: var(--el-color-primary);

package/dist/runtime/components/development/example.alert.vue

@@ -13,6 +13,21 @@
         <div class="flex gap-4 items-start flex-col">
           <el-alert :title="`default`" />
           <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" show-icon />
+        </div>
+      </div>
+      <template #footer> <html-encode :tag="snippets.basic" /> </template>
+    </el-card>
+
+    <el-card>
+      <template #header> With Description </template>
+      <div class="flex flex-col gap-7.5">
+        <p>
+          Alert components are non-overlay elements in the page that does not disappear automatically. Alert provides 4 types of themes defined by
+          <el-text tag="mark">type</el-text>, whose default value is <el-text tag="mark">info</el-text>. And you can add a description to the alert width
+          <el-text tag="mark">description</el-text> attribute. Also you can use <el-text tag="mark">#default</el-text> slot to add a description to the alert.
+        </p>
+        <div class="flex gap-4 items-start flex-col">
+          <el-alert :title="`default`" description="This is a description." />
           <el-alert v-for="color of colors" :key="color" :title="`${color} alert`" :type="color" description="This is a description." show-icon />
         </div>
       </div>
@@ -24,7 +39,7 @@
 <script lang="ts" setup>
   import { ref } from 'vue';
 
-  const colors = ref(['success', 'warning', 'info', 'error', 'danger']);
+  const colors = ref(['primary', 'success', 'warning', 'info', 'error']);
 
   const snippets = ref({
     basic: `<el-alert title="Title Text Goes Here" type="danger" description="This is a description." show-icon :closable="false" />`,

package/dist/runtime/public/scss/element-plus/alert.css

@@ -309,11 +309,11 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   --el-alert-description-font-size: 10px;
   --el-alert-close-font-size: 14px;
   --el-alert-close-customed-font-size: 14px;
-  --el-alert-icon-size: 18px;
+  --el-alert-icon-size: 12px;
   --el-alert-icon-large-size: 32px;
   position: relative;
   width: 100%;
-  padding: var(--el-alert-padding);
+  padding: 8px 16px;
   margin: 0;
   box-sizing: border-box;
   border-radius: var(--el-border-radius-small);
@@ -321,7 +321,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   border-style: var(--el-border-style);
   border-color: var(--el-alert-border-color);
   position: relative;
-  background-color: var(--el-color-info-light-1);
+  background-color: var(--el-color-neutral-light-1);
   overflow: hidden;
   opacity: 1;
   display: flex;
@@ -342,42 +342,61 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
   justify-content: center;
 }
 
+.el-alert--primary {
+  --el-alert-bg-color: var(--el-color-primary-light-1);
+  --el-alert-border-color: var(--el-color-primary-light-3);
+}
+.el-alert--primary.is-light {
+  background-color: var(--el-alert-bg-color);
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-light .el-alert__description {
+  color: var(--el-color-primary-light-6);
+}
+.el-alert--primary.is-dark {
+  background-color: var(--el-color-primary);
+  color: var(--el-color-white);
+}
+.el-alert--primary.is-light .el-alert__close-btn {
+  color: var(--el-color-primary-light-6);
+}
+
 .el-alert--success {
   --el-alert-bg-color: var(--el-color-success-light-1);
   --el-alert-border-color: var(--el-color-success-light-3);
 }
 .el-alert--success.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-light .el-alert__description {
-  color: var(--el-color-success-light-4);
+  color: var(--el-color-success-light-6);
 }
 .el-alert--success.is-dark {
   background-color: var(--el-color-success);
   color: var(--el-color-white);
 }
 .el-alert--success.is-light .el-alert__close-btn {
-  color: var(--el-color-success-light-5);
+  color: var(--el-color-success-light-6);
 }
 
 .el-alert--info {
-  --el-alert-bg-color: var(--el-color-info-light-1);
-  --el-alert-border-color: var(--el-color-info-light-3);
+  --el-alert-bg-color: var(--el-color-neutral-light-1);
+  --el-alert-border-color: var(--el-color-neutral-light-3);
 }
 .el-alert--info.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-light .el-alert__description {
-  color: var(--el-color-info-light-4);
+  color: var(--el-color-neutral-light-6);
 }
 .el-alert--info.is-dark {
-  background-color: var(--el-color-info);
+  background-color: var(--el-color-neutral);
   color: var(--el-color-white);
 }
 .el-alert--info.is-light .el-alert__close-btn {
-  color: var(--el-color-info-light-5);
+  color: var(--el-color-neutral-light-6);
 }
 
 .el-alert--warning {
@@ -386,17 +405,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-alert--warning.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-light .el-alert__description {
-  color: var(--el-color-warning-light-4);
+  color: var(--el-color-warning-light-6);
 }
 .el-alert--warning.is-dark {
   background-color: var(--el-color-warning);
   color: var(--el-color-white);
 }
 .el-alert--warning.is-light .el-alert__close-btn {
-  color: var(--el-color-warning-light-5);
+  color: var(--el-color-warning-light-6);
 }
 
 .el-alert--error {
@@ -405,36 +424,17 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
 }
 .el-alert--error.is-light {
   background-color: var(--el-alert-bg-color);
-  color: var(--el-color-error-light-5);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-light .el-alert__description {
-  color: var(--el-color-error-light-4);
+  color: var(--el-color-error-light-6);
 }
 .el-alert--error.is-dark {
   background-color: var(--el-color-error);
   color: var(--el-color-white);
 }
 .el-alert--error.is-light .el-alert__close-btn {
-  color: var(--el-color-error-light-5);
-}
-
-.el-alert--danger {
-  --el-alert-bg-color: var(--el-color-danger-light-1);
-  --el-alert-border-color: var(--el-color-danger-light-3);
-}
-.el-alert--danger.is-light {
-  background-color: var(--el-alert-bg-color);
-  color: var(--el-color-danger-light-5);
-}
-.el-alert--danger.is-light .el-alert__description {
-  color: var(--el-color-danger-light-4);
-}
-.el-alert--danger.is-dark {
-  background-color: var(--el-color-danger);
-  color: var(--el-color-white);
-}
-.el-alert--danger.is-light .el-alert__close-btn {
-  color: var(--el-color-danger-light-5);
+  color: var(--el-color-error-light-6);
 }
 
 .el-alert::before {