@macroui/macroui 1.0.20 → 1.0.22

package/dist/macroui.css

@@ -7783,79 +7783,26 @@ to {
  */
 
 /* ============================================
-   DaisyUI Theme Variables
+   Element Plus Compatible Variables
    ============================================ */
 
-/* 亮色主题 */
 :root {
-  /* DaisyUI Base Colors */
-  --daisy-base-100: oklch(98% 0.005 200);
-  --daisy-base-200: oklch(96% 0.01 200);
-  --daisy-base-300: oklch(93% 0.02 200);
-  --daisy-base-content: oklch(17% 0.005 200);
-  
-  /* DaisyUI Primary Colors */
-  --daisy-primary: oklch(63% 0.2 250);
-  --daisy-primary-content: oklch(98% 0.005 250);
-  
-  /* DaisyUI Secondary Colors */
-  --daisy-secondary: oklch(63% 0.2 280);
-  --daisy-secondary-content: oklch(98% 0.005 280);
-  
-  /* DaisyUI Accent Colors */
-  --daisy-accent: oklch(63% 0.2 330);
-  --daisy-accent-content: oklch(98% 0.005 330);
-  
-  /* DaisyUI Neutral Colors */
-  --daisy-neutral: oklch(41% 0.04 250);
-  --daisy-neutral-content: oklch(98% 0.005 250);
-  
-  /* DaisyUI Info Colors */
-  --daisy-info: oklch(70% 0.16 230);
-  --daisy-info-content: oklch(98% 0.005 230);
-  
-  /* DaisyUI Success Colors */
-  --daisy-success: oklch(65% 0.2 145);
-  --daisy-success-content: oklch(98% 0.005 145);
-  
-  /* DaisyUI Warning Colors */
-  --daisy-warning: oklch(78% 0.18 70);
-  --daisy-warning-content: oklch(25% 0.02 70);
-  
-  /* DaisyUI Error Colors */
-  --daisy-error: oklch(65% 0.24 25);
-  --daisy-error-content: oklch(98% 0.005 25);
-  
-  /* DaisyUI Radius */
-  --daisy-radius-selector: 0.25rem;
-  --daisy-radius-field: 0.5rem;
-  --daisy-radius-box: 1rem;
-  --daisy-radius-btn: 0.5rem;
-  
-  /* DaisyUI Size */
-  --daisy-size-selector: 0.25rem;
-  --daisy-size-field: 0.25rem;
-  
-  /* DaisyUI Border */
-  --daisy-border: 1px;
-  --daisy-depth: 1;
-  --daisy-noise: 0;
-  
-  /* Element Plus Compatible Variables */
-  --el-color-primary: var(--daisy-primary);
-  --el-color-success: var(--daisy-success);
-  --el-color-warning: var(--daisy-warning);
-  --el-color-danger: var(--daisy-error);
-  --el-color-info: var(--daisy-info);
+  /* Element Plus Color Variables - Map to DaisyUI */
+  --el-color-primary: var(--p);
+  --el-color-success: var(--su);
+  --el-color-warning: var(--wa);
+  --el-color-danger: var(--er);
+  --el-color-info: var(--in);
   --el-color-white: #ffffff;
   --el-color-black: #000000;
   
-  --el-border-radius-base: var(--daisy-radius-field);
-  --el-border-radius-small: calc(var(--daisy-radius-field) * 0.6);
+  /* Element Plus Border Radius */
+  --el-border-radius-base: 0.5rem;
+  --el-border-radius-small: calc(var(--el-border-radius-base) * 0.6);
   --el-border-radius-round: 9999px;
   --el-border-radius-circle: 50%;
   
-  /* Element Plus Font Sizes - 严格按照Element Plus规范 */
+  /* Element Plus Font Sizes */
   --el-font-size-extra-small: 12px;
   --el-font-size-small: 13px;
   --el-font-size-base: 14px;
@@ -7863,6 +7810,7 @@ to {
   --el-font-size-large: 18px;
   --el-font-size-extra-large: 20px;
   
+  /* Element Plus Component Sizes */
   --el-component-size-large: 40px;
   --el-component-size-default: 32px;
   --el-component-size-small: 24px;
@@ -7897,7 +7845,7 @@ to {
   
   /* Border */
   border-radius: var(--el-border-radius-base);
-  border: var(--daisy-border) solid transparent;
+  border: 1px solid transparent;
   
   /* DaisyUI Style */
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
@@ -7940,7 +7888,7 @@ to {
 
 /* Focus */
 .el-button:focus {
-  outline: 2px solid var(--daisy-primary);
+  outline: 2px solid var(--p);
   outline-offset: 2px;
 }
 
@@ -7965,76 +7913,76 @@ to {
 
 /* Default */
 .el-button--default {
-  background-color: var(--daisy-base-200);
-  border-color: var(--daisy-base-300);
-  color: var(--daisy-base-content);
+  background-color: var(--b2);
+  border-color: var(--bc);
+  color: var(--bc);
 }
 
 .el-button--default:hover {
-  background-color: var(--daisy-base-300);
-  border-color: var(--daisy-base-content);
+  background-color: var(--b3);
+  border-color: var(--bc);
 }
 
 /* Primary */
 .el-button--primary {
-  background-color: var(--daisy-primary);
-  border-color: var(--daisy-primary);
-  color: var(--daisy-primary-content);
+  background-color: var(--p);
+  border-color: var(--p);
+  color: var(--pc);
 }
 
 .el-button--primary:hover {
-  background-color: color-mix(in oklab, var(--daisy-primary) 90%, transparent);
-  border-color: color-mix(in oklab, var(--daisy-primary) 90%, transparent);
+  background-color: color-mix(in oklab, var(--p) 90%, transparent);
+  border-color: color-mix(in oklab, var(--p) 90%, transparent);
 }
 
 /* Success */
 .el-button--success {
-  background-color: var(--daisy-success);
-  border-color: var(--daisy-success);
-  color: var(--daisy-success-content);
+  background-color: var(--su);
+  border-color: var(--su);
+  color: var(--sc);
 }
 
 .el-button--success:hover {
-  background-color: color-mix(in oklab, var(--daisy-success) 90%, transparent);
-  border-color: color-mix(in oklab, var(--daisy-success) 90%, transparent);
+  background-color: color-mix(in oklab, var(--su) 90%, transparent);
+  border-color: color-mix(in oklab, var(--su) 90%, transparent);
 }
 
 /* Warning */
 .el-button--warning {
-  background-color: var(--daisy-warning);
-  border-color: var(--daisy-warning);
-  color: var(--daisy-warning-content);
+  background-color: var(--wa);
+  border-color: var(--wa);
+  color: var(--wac);
 }
 
 .el-button--warning:hover {
-  background-color: color-mix(in oklab, var(--daisy-warning) 90%, transparent);
-  border-color: color-mix(in oklab, var(--daisy-warning) 90%, transparent);
+  background-color: color-mix(in oklab, var(--wa) 90%, transparent);
+  border-color: color-mix(in oklab, var(--wa) 90%, transparent);
 }
 
 /* Danger / Error */
 .el-button--danger,
 .el-button--error {
-  background-color: var(--daisy-error);
-  border-color: var(--daisy-error);
-  color: var(--daisy-error-content);
+  background-color: var(--er);
+  border-color: var(--er);
+  color: var(--erc);
 }
 
 .el-button--danger:hover,
 .el-button--error:hover {
-  background-color: color-mix(in oklab, var(--daisy-error) 90%, transparent);
-  border-color: color-mix(in oklab, var(--daisy-error) 90%, transparent);
+  background-color: color-mix(in oklab, var(--er) 90%, transparent);
+  border-color: color-mix(in oklab, var(--er) 90%, transparent);
 }
 
 /* Info */
 .el-button--info {
-  background-color: var(--daisy-info);
-  border-color: var(--daisy-info);
-  color: var(--daisy-info-content);
+  background-color: var(--in);
+  border-color: var(--in);
+  color: var(--inc);
 }
 
 .el-button--info:hover {
-  background-color: color-mix(in oklab, var(--daisy-info) 90%, transparent);
-  border-color: color-mix(in oklab, var(--daisy-info) 90%, transparent);
+  background-color: color-mix(in oklab, var(--in) 90%, transparent);
+  border-color: color-mix(in oklab, var(--in) 90%, transparent);
 }
 
 /* ============================================
@@ -8047,33 +7995,33 @@ to {
 }
 
 .el-button--default.is-plain {
-  border-color: var(--daisy-base-300);
-  color: var(--daisy-base-content);
+  border-color: var(--bc);
+  color: var(--bc);
 }
 
 .el-button--primary.is-plain {
-  border-color: var(--daisy-primary);
-  color: var(--daisy-primary);
-  background-color: color-mix(in oklab, var(--daisy-primary) 10%, transparent);
+  border-color: var(--p);
+  color: var(--p);
+  background-color: color-mix(in oklab, var(--p) 10%, transparent);
 }
 
 .el-button--success.is-plain {
-  border-color: var(--daisy-success);
-  color: var(--daisy-success);
-  background-color: color-mix(in oklab, var(--daisy-success) 10%, transparent);
+  border-color: var(--su);
+  color: var(--su);
+  background-color: color-mix(in oklab, var(--su) 10%, transparent);
 }
 
 .el-button--warning.is-plain {
-  border-color: var(--daisy-warning);
-  color: var(--daisy-warning);
-  background-color: color-mix(in oklab, var(--daisy-warning) 10%, transparent);
+  border-color: var(--wa);
+  color: var(--wa);
+  background-color: color-mix(in oklab, var(--wa) 10%, transparent);
 }
 
 .el-button--danger.is-plain,
 .el-button--error.is-plain {
-  border-color: var(--daisy-error);
-  color: var(--daisy-error);
-  background-color: color-mix(in oklab, var(--daisy-error) 10%, transparent);
+  border-color: var(--er);
+  color: var(--er);
+  background-color: color-mix(in oklab, var(--er) 10%, transparent);
 }
 
 /* Text */
@@ -8084,20 +8032,20 @@ to {
 }
 
 .el-button--primary.is-text {
-  color: var(--daisy-primary);
+  color: var(--p);
 }
 
 .el-button--success.is-text {
-  color: var(--daisy-success);
+  color: var(--su);
 }
 
 .el-button--warning.is-text {
-  color: var(--daisy-warning);
+  color: var(--wa);
 }
 
 .el-button--danger.is-text,
 .el-button--error.is-text {
-  color: var(--daisy-error);
+  color: var(--er);
 }
 
 .el-button.is-text:hover {
@@ -8109,7 +8057,7 @@ to {
   background-color: transparent;
   border-color: transparent;
   box-shadow: none;
-  color: var(--daisy-primary);
+  color: var(--p);
   text-decoration: underline;
 }
 
@@ -8205,7 +8153,8 @@ to {
 .el-button-group .el-button:focus,
 .el-button-group .el-button:active {
   z-index: 1;
-}/* ============================================
+}
+/* ============================================
    Element Plus Input - DaisyUI Style
    ============================================ */
 
@@ -8223,21 +8172,21 @@ to {
   height: var(--el-component-size-default, 40px);
   padding: 0 0.75rem;
   border-radius: var(--el-border-radius-base, 0.5rem);
-  border: 1px solid var(--daisy-base-300, #e5e5e5);
-  background-color: var(--daisy-base-100, #ffffff);
+  border: 1px solid var(--bc, #e5e5e5);
+  background-color: var(--b1, #ffffff);
   transition: all 0.2s ease;
 }
 
 .el-input__wrapper:hover,
 .input-wrapper:hover {
-  border-color: var(--daisy-base-content, #1d1d1f);
+  border-color: var(--bc, #1d1d1f);
 }
 
 .el-input__wrapper:focus-within,
 .input-wrapper:focus-within {
-  outline: 2px solid var(--daisy-primary, #4d70ff);
+  outline: 2px solid var(--p, #4d70ff);
   outline-offset: 2px;
-  border-color: var(--daisy-primary, #4d70ff);
+  border-color: var(--p, #4d70ff);
 }
 
 /* Input inner */
@@ -8251,12 +8200,12 @@ to {
   background: transparent;
   font-size: var(--el-font-size-base, 14px);
   font-family: inherit;
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
 }
 
 .el-input__inner::placeholder,
 .input::placeholder {
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
   opacity: 0.5;
 }
 
@@ -8273,7 +8222,7 @@ to {
 .input-suffix {
   display: inline-flex;
   align-items: center;
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
   opacity: 0.6;
   flex-shrink: 0;
 }
@@ -8290,7 +8239,7 @@ to {
 .input-prefix-inner {
   display: inline-flex;
   align-items: center;
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
   opacity: 0.6;
   flex-shrink: 0;
   margin-right: 0.5rem;
@@ -8336,29 +8285,18 @@ to {
 
 .el-input.is-disabled .el-input__wrapper,
 .el-input.is-disabled .input-wrapper {
-  background-color: var(--daisy-base-200, #f0f0f0);
-  border-color: var(--daisy-base-200, #f0f0f0);
+  background-color: var(--b2, #f0f0f0);
+  border-color: var(--b2, #f0f0f0);
   opacity: 0.6;
 }
 
 .el-input.is-focus .el-input__wrapper,
 .el-input.is-focus .input-wrapper {
-  border-color: var(--daisy-primary, #4d70ff);
-  outline: 2px solid var(--daisy-primary, #4d70ff);
+  border-color: var(--p, #4d70ff);
+  outline: 2px solid var(--p, #4d70ff);
   outline-offset: 2px;
 }
 
-/* With prefix/suffix */
-.el-input__wrapper:has(.el-input__prefix),
-.input-wrapper:has(.input-prefix) {
-  padding-left: 0;
-}
-
-.el-input__wrapper:has(.el-input__suffix),
-.input-wrapper:has(.input-suffix) {
-  padding-right: 0;
-}
-
 /* ============================================
    Element Plus Textarea - DaisyUI Style
    ============================================ */
@@ -8375,11 +8313,11 @@ textarea.input {
   min-height: 80px;
   padding: 0.5rem 0.75rem;
   border-radius: var(--el-border-radius-base, 0.5rem);
-  border: 1px solid var(--daisy-base-300, #e5e5e5);
-  background-color: var(--daisy-base-100, #ffffff);
+  border: 1px solid var(--bc, #e5e5e5);
+  background-color: var(--b1, #ffffff);
   font-size: var(--el-font-size-base, 14px);
   font-family: inherit;
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
   resize: vertical;
   outline: none;
   transition: all 0.2s ease;
@@ -8387,19 +8325,19 @@ textarea.input {
 
 .el-textarea__inner:hover,
 textarea.input:hover {
-  border-color: var(--daisy-base-content, #1d1d1f);
+  border-color: var(--bc, #1d1d1f);
 }
 
 .el-textarea__inner:focus,
 textarea.input:focus {
-  outline: 2px solid var(--daisy-primary, #4d70ff);
+  outline: 2px solid var(--p, #4d70ff);
   outline-offset: 2px;
-  border-color: var(--daisy-primary, #4d70ff);
+  border-color: var(--p, #4d70ff);
 }
 
 .el-textarea__inner:disabled,
 textarea.input:disabled {
-  background-color: var(--daisy-base-200, #f0f0f0);
+  background-color: var(--b2, #f0f0f0);
   opacity: 0.6;
   cursor: not-allowed;
   resize: none;
@@ -8420,9 +8358,9 @@ textarea.input:disabled {
   display: flex;
   align-items: center;
   padding: 0 0.75rem;
-  background-color: var(--daisy-base-200, #f0f0f0);
-  border: 1px solid var(--daisy-base-300, #e5e5e5);
-  color: var(--daisy-base-content, #1d1d1f);
+  background-color: var(--b2, #f0f0f0);
+  border: 1px solid var(--bc, #e5e5e5);
+  color: var(--bc, #1d1d1f);
   font-size: var(--el-font-size-base, 14px);
 }
 
@@ -8458,7 +8396,7 @@ textarea.input:disabled {
   right: 0.5rem;
   bottom: 0.25rem;
   font-size: var(--el-font-size-small, 12px);
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
   opacity: 0.6;
 }
 
@@ -8472,7 +8410,7 @@ textarea.input:disabled {
   right: 0.5rem;
   bottom: 0.25rem;
   font-size: var(--el-font-size-small, 12px);
-  color: var(--daisy-base-content, #1d1d1f);
+  color: var(--bc, #1d1d1f);
   opacity: 0.6;
 }
 
@@ -8481,9 +8419,9 @@ textarea.input:disabled {
   display: flex;
   align-items: center;
   padding: 0 0.75rem;
-  background-color: var(--daisy-base-200, #f0f0f0);
-  border: 1px solid var(--daisy-base-300, #e5e5e5);
-  color: var(--daisy-base-content, #1d1d1f);
+  background-color: var(--b2, #f0f0f0);
+  border: 1px solid var(--bc, #e5e5e5);
+  color: var(--bc, #1d1d1f);
   font-size: var(--el-font-size-base, 14px);
   border-radius: var(--el-border-radius-base, 0.5rem);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@macroui/macroui",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Element Plus compatible component library with DaisyUI visual styling. 100% API compatible with Element Plus, featuring 85+ components and 67 languages.",
   "keywords": [
     "vue",
@@ -24,7 +24,7 @@
     "./dist/macroui.css": "./dist/macroui.css",
     "./dist/*": "./dist/*",
     "./locale/*": "./dist/locale/*",
-    "./styles/*": "./styles/*",
+    "./styles": "./styles/index.scss",
     "./locale": {
       "import": "./dist/locale/index.js",
       "require": "./dist/locale/index.cjs.js",