@datametria/vue-components 2.4.0 → 2.4.1

package/src/components/DatametriaSortableTable.vue

@@ -498,22 +498,24 @@ watch(totalPages, (newTotal) => {
 <style scoped>
 .datametria-sortable-table {
   width: 100%;
-  background: var(--dm-neutral-50, #ffffff);
+  background: var(--dm-bg-color, #ffffff);
   border-radius: var(--dm-radius-md, 0.375rem);
   box-shadow: var(--dm-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
 }
 
 .datametria-sortable-table__search {
   padding: var(--dm-spacing-4, 1rem);
-  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
 }
 
 .datametria-sortable-table__search-input {
   width: 100%;
   padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-4, 1rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   transition: all 0.2s ease;
 }
 
@@ -533,8 +535,8 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__thead {
-  background: var(--dm-neutral-50, #f9fafb);
-  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-bg-secondary, #f9fafb);
+  border-bottom: 2px solid var(--dm-border-color, #e5e7eb);
 }
 
 .datametria-sortable-table__th {
@@ -542,7 +544,7 @@ watch(totalPages, (newTotal) => {
   text-align: left;
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-700, #374151);
+  color: var(--dm-text-primary, #374151);
   position: relative;
 }
 
@@ -552,7 +554,7 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__th--sortable:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
 }
 
 .datametria-sortable-table__th--sortable:focus-visible {
@@ -577,7 +579,7 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__sort-icon--inactive {
-  color: var(--dm-neutral-400, #9ca3af);
+  color: var(--dm-text-secondary, #9ca3af);
   opacity: 0.5;
 }
 
@@ -585,10 +587,12 @@ watch(totalPages, (newTotal) => {
   width: 100%;
   margin-top: var(--dm-spacing-2, 0.5rem);
   padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: 400;
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   transition: all 0.2s ease;
 }
 
@@ -606,12 +610,13 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__multiselect-trigger {
   width: 100%;
   padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
   font-weight: 400;
   text-align: left;
-  background: var(--dm-neutral-50, #ffffff);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -634,8 +639,8 @@ watch(totalPages, (newTotal) => {
   margin-top: var(--dm-spacing-1, 0.25rem);
   max-height: 200px;
   overflow-y: auto;
-  background: var(--dm-neutral-50, #ffffff);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  background: var(--dm-bg-color, #ffffff);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   box-shadow: var(--dm-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
   z-index: 10;
@@ -647,12 +652,13 @@ watch(totalPages, (newTotal) => {
   gap: var(--dm-spacing-2, 0.5rem);
   padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-text-primary, #111827);
   cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
 .datametria-sortable-table__multiselect-option:hover {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
 }
 
 .datametria-sortable-table__multiselect-option input[type="checkbox"] {
@@ -660,16 +666,16 @@ watch(totalPages, (newTotal) => {
 }
 
 .datametria-sortable-table__tbody {
-  background: var(--dm-neutral-50, #ffffff);
+  background: var(--dm-bg-color, #ffffff);
 }
 
 .datametria-sortable-table__tr {
-  border-bottom: 1px solid var(--dm-neutral-100, #f3f4f6);
+  border-bottom: 1px solid var(--dm-border-color, #e5e7eb);
   transition: background-color 0.2s ease;
 }
 
 .datametria-sortable-table__tr:hover {
-  background: var(--dm-neutral-50, #f9fafb);
+  background: var(--dm-bg-hover, #f9fafb);
 }
 
 .datametria-sortable-table__tr--selected {
@@ -679,7 +685,7 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__td {
   padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-900, #111827);
+  color: var(--dm-text-primary, #111827);
 }
 
 .datametria-sortable-table__td--checkbox {
@@ -690,7 +696,7 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__empty {
   padding: var(--dm-spacing-4, 1rem);
   text-align: center;
-  color: var(--dm-neutral-500, #6b7280);
+  color: var(--dm-text-secondary, #6b7280);
   font-size: var(--dm-font-size-sm, 0.875rem);
 }
 
@@ -699,14 +705,14 @@ watch(totalPages, (newTotal) => {
   justify-content: space-between;
   align-items: center;
   padding: var(--dm-spacing-4, 1rem);
-  border-top: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border-top: 1px solid var(--dm-border-color, #e5e7eb);
   flex-wrap: wrap;
   gap: var(--dm-spacing-4, 1rem);
 }
 
 .datametria-sortable-table__pagination-info {
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
+  color: var(--dm-text-secondary, #4b5563);
 }
 
 .datametria-sortable-table__pagination-controls {
@@ -717,13 +723,13 @@ watch(totalPages, (newTotal) => {
 
 .datametria-sortable-table__page-size {
   padding: var(--dm-spacing-2, 0.5rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
   cursor: pointer;
   transition: all 0.2s ease;
-  background: var(--dm-neutral-50, #ffffff);
-  color: var(--dm-neutral-900, #111827);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
 }
 
 .datametria-sortable-table__page-size:focus {
@@ -734,17 +740,17 @@ watch(totalPages, (newTotal) => {
 
 .datametria-sortable-table__pagination-btn {
   padding: var(--dm-spacing-2, 0.5rem) var(--dm-spacing-3, 0.75rem);
-  border: 1px solid var(--dm-neutral-200, #e5e7eb);
+  border: 1px solid var(--dm-border-color, #e5e7eb);
   border-radius: var(--dm-radius-md, 0.375rem);
-  background: var(--dm-neutral-50, #ffffff);
-  color: var(--dm-neutral-900, #111827);
+  background: var(--dm-bg-color, #ffffff);
+  color: var(--dm-text-primary, #111827);
   font-size: var(--dm-font-size-sm, 0.875rem);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .datametria-sortable-table__pagination-btn:hover:not(:disabled) {
-  background: var(--dm-neutral-100, #f3f4f6);
+  background: var(--dm-bg-hover, #f3f4f6);
   border-color: var(--dm-primary, #0072CE);
 }
 
@@ -761,7 +767,7 @@ watch(totalPages, (newTotal) => {
 .datametria-sortable-table__pagination-pages {
   padding: 0 var(--dm-spacing-2, 0.5rem);
   font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
+  color: var(--dm-text-secondary, #4b5563);
 }
 
 input[type="checkbox"] {

package/src/components/DatametriaSwitch.vue

@@ -129,7 +129,7 @@ const handleClick = () => {
 }
 
 .datametria-switch:focus-visible {
-  outline: 2px solid var(--dm-color-primary, #0072ce);
+  outline: 2px solid var(--dm-primary, #0072ce);
   outline-offset: 2px;
   border-radius: 10px;
 }

package/src/components/DatametriaTextarea.vue

@@ -149,37 +149,37 @@ defineExpose({
   width: 100%;
   font-size: inherit;
   font-family: inherit;
-  color: var(--datametria-text-color, #303133);
-  background-color: var(--datametria-bg-color, #ffffff);
-  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  color: var(--dm-text-primary, #303133);
+  background-color: var(--dm-bg-color, #ffffff);
+  border: 1px solid var(--dm-border-color, #dcdfe6);
   border-radius: 4px;
   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .datametria-textarea__inner:hover {
-  border-color: var(--datametria-border-color-hover, #c0c4cc);
+  border-color: var(--dm-border-color, #c0c4cc);
 }
 
 .datametria-textarea__inner:focus {
   outline: none;
-  border-color: var(--datametria-primary-color, #0072ce);
+  border-color: var(--dm-primary, #0072ce);
 }
 
 .datametria-textarea__inner::placeholder {
-  color: var(--datametria-placeholder-color, #a8abb2);
+  color: var(--dm-text-secondary, #a8abb2);
 }
 
 .datametria-textarea__inner:disabled {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  border-color: var(--datametria-disabled-border-color, #e4e7ed);
-  color: var(--datametria-disabled-text-color, #c0c4cc);
+  background-color: var(--dm-bg-disabled, #f5f7fa);
+  border-color: var(--dm-border-color, #e4e7ed);
+  color: var(--dm-text-secondary, #c0c4cc);
   cursor: not-allowed;
 }
 
 .datametria-textarea--disabled .datametria-textarea__inner {
-  background-color: var(--datametria-disabled-bg-color, #f5f7fa);
-  border-color: var(--datametria-disabled-border-color, #e4e7ed);
-  color: var(--datametria-disabled-text-color, #c0c4cc);
+  background-color: var(--dm-bg-disabled, #f5f7fa);
+  border-color: var(--dm-border-color, #e4e7ed);
+  color: var(--dm-text-secondary, #c0c4cc);
   cursor: not-allowed;
 }
 
@@ -188,13 +188,13 @@ defineExpose({
   bottom: 8px;
   right: 12px;
   font-size: 12px;
-  color: var(--datametria-info-color, #909399);
-  background-color: var(--datametria-bg-color, #ffffff);
+  color: var(--dm-text-secondary, #909399);
+  background-color: var(--dm-bg-color, #ffffff);
   padding: 0 4px;
 }
 
 .datametria-textarea--focused .datametria-textarea__inner {
-  border-color: var(--datametria-primary-color, #0072ce);
+  border-color: var(--dm-primary, #0072ce);
 }
 
 /* Dark Mode Support - Hybrid Approach */