@v1nt1248/3nclient-lib 0.4.5 → 0.4.9

package/src/components/ui3n-mobile-menu-item/ui3n-mobile-menu-item.vue

@@ -32,6 +32,19 @@
   @use '../../assets/styles/mixins' as mixins;
 
   .menuItem {
+    --_mobile-menu-item-name-color: var(
+      --ui3n-mobile-menu-item-name-color,
+      var(--color-text-control-primary-default)
+    );
+    --_mobile-menu-item-hover-bg-color: var(
+      --ui3n-mobile-menu-item-hover-bg-color,
+      var(--color-bg-control-primary-hover)
+    );
+    --_mobile-menu-item-icon-hover-color: var(
+      --ui3n-mobile-menu-item-icon-hover-color,
+      var(--color-icon-control-accent-default)
+    );
+
     display: flex;
     width: 100%;
     height: var(--ui3n-mobile-menu-item-height, 48px);
@@ -46,15 +59,15 @@
       font-size: var(--ui3n-mobile-menu-item-font-size, 14px);
       font-weight: 600;
       line-height: var(--ui3n-mobile-menu-item-line-height, 20px);
-      color: var(--color-text-control-primary-default);
+      color: var(--_mobile-menu-item-name-color);
     }
 
     &:hover,
     &.menuItemSelected {
-      background-color: var(--color-bg-control-primary-hover);
+      background-color: var(--_mobile-menu-item-hover-bg-color);
 
       & > div {
-        color: var(--color-icon-control-accent-default);
+        color: var(--_mobile-menu-item-icon-hover-color);
         animation: bounceOnce 0.4s ease-in-out forwards;
       }
     }

package/src/components/ui3n-notification/ui3n-notification.vue

@@ -125,13 +125,22 @@
     --_notification-icon-size: var(--ui3n-notification-icon-size, 32px);
     --_notification-padding: var(--ui3n-notification-padding, 16px);
     --_notification-text-color: var(--ui3n-notification-text-color, var(--default-content-default));
+    --_notification-border-color: var(--ui3n-notification-border-color, var(--color-border-block-primary-default));
+    --_notification-info-fill-color: var(--ui3n-notification-info-fill-color, var(--info-fill-default));
+    --_notification-info-icon-color: var(--ui3n-notification-info-icon-color, var(--info-content-default));
+    --_notification-success-fill-color: var(--ui3n-notification-success-fill-color, var(--success-fill-default));
+    --_notification-success-icon-color: var(--ui3n-notification-success-icon-color, var(--success-content-default));
+    --_notification-warning-fill-color: var(--ui3n-notification-warning-fill-color, var(--warning-fill-default));
+    --_notification-warning-icon-color: var(--ui3n-notification-warning-icon-color, var(--warning-content-default));
+    --_notification-error-fill-color: var(--ui3n-notification-error-fill-color, var(--error-fill-default));
+    --_notification-error-icon-color: var(--ui3n-notification-error-icon-color, var(--error-content-default));
 
     display: flex;
     position: relative;
     box-sizing: border-box;
     z-index: 5000;
     border-radius: var(--_notification-border-radius);
-    outline: 1px solid var(--color-border-block-primary-default);
+    outline: 1px solid var(--_notification-border-color);
     padding: var(--_notification-padding);
     max-width: var(--_notification-width);
     margin-bottom: var(--_notification-margin-bottom);
@@ -179,10 +188,10 @@
   .infoType {
     --_notification-text-color: var(--ui3n-notification-text-color, var(--info-content-default));
 
-    background-color: var(--info-fill-default);
+    background-color: var(--_notification-info-fill-color);
 
     .ui3nNotificationIcon {
-      background-color: var(--info-content-default);
+      background-color: var(--_notification-info-icon-color);
     }
 
     :global(.dark-theme) &,
@@ -195,10 +204,10 @@
   .successType {
     --_notification-text-color: var(--ui3n-notification-text-color, var(--success-content-default));
 
-    background-color: var(--success-fill-default);
+    background-color: var(--_notification-success-fill-color);
 
     .ui3nNotificationIcon {
-      background-color: var(--success-content-default);
+      background-color: var(--_notification-success-icon-color);
     }
 
     :global(.dark-theme) &,
@@ -211,10 +220,10 @@
   .warningType {
     --_notification-text-color: var(--ui3n-notification-text-color, var(--warning-content-default));
 
-    background-color: var(--warning-fill-default);
+    background-color: var(--_notification-warning-fill-color);
 
     .ui3nNotificationIcon {
-      background-color: var(--warning-content-default);
+      background-color: var(--_notification-warning-icon-color);
     }
 
     :global(.dark-theme) &,
@@ -227,10 +236,10 @@
   .errorType {
     --_notification-text-color: var(--ui3n-notification-text-color, var(--error-content-default));
 
-    background-color: var(--error-fill-default);
+    background-color: var(--_notification-error-fill-color);
 
     .ui3nNotificationIcon {
-      background-color: var(--error-content-default);
+      background-color: var(--_notification-error-icon-color);
     }
 
     :global(.dark-theme) &,

package/src/components/ui3n-progress/ui3n-progress-linear.vue

@@ -78,6 +78,7 @@
   .ui3nProgressLinear {
     --_progress-linear-bg: var(--ui3n-progress-linear-bg, var(--color-bg-control-primary-default));
     --_progress-linear-color: var(--ui3n-progress-linear-color, var(--color-bg-control-accent-default));
+    --_progress-linear-label-color: var(--ui3n-progress-linear-label-color, var(--color-bg-control-accent-default));
 
     position: relative;
     width: 100%;
@@ -120,7 +121,7 @@
     text-align: center;
     font-size: var(--ui3n-progress-linear-label-font-size, 14px);
     line-height: var(--ui3n-progress-linear-label-line-height, 16px);
-    color: var(--color-bg-control-accent-default);
+    color: var(--_progress-linear-label-color);
     margin-bottom: 4px;
   }
 

package/src/components/ui3n-radio-group/ui3n-radio.vue

@@ -176,6 +176,7 @@
 <style lang="scss" module>
   .ui3nRadio {
     --_radio-min-height: var(--ui3n-radio-min-height, 24px);
+    --_radio-label-color: var(--ui3n-radio-label-color, var(--color-text-control-primary-default));
 
     position: relative;
     display: flex;
@@ -221,7 +222,7 @@
   .label {
     font-size: 12px;
     font-weight: 500;
-    color: var(--color-text-control-primary-default);
+    color: var(--_radio-label-color);
     user-select: none;
   }
 

package/src/components/ui3n-selector/ui3n-selector.vue

@@ -389,6 +389,35 @@
       --ui3n-selector-body-border-color,
       var(--color-border-block-primary-default)
     );
+    --_selector-label-color: var(--ui3n-selector-label-color, var(--color-text-control-primary-default));
+    --_selector-trigger-bg-color: var(--ui3n-selector-trigger-bg-color, var(--color-bg-control-secondary-default));
+    --_selector-trigger-color: var(--ui3n-selector-trigger-color, var(--color-text-control-primary-default));
+    --_selector-trigger-placeholder-color: var(
+      --ui3n-selector-trigger-placeholder-color,
+      var(--color-text-control-secondary-default)
+    );
+    --_selector-trigger-disabled-bg-color: var(
+      --ui3n-selector-trigger-disabled-bg-color,
+      var(--color-bg-control-secondary-disabled)
+    );
+    --_selector-trigger-disabled-color: var(
+      --ui3n-selector-trigger-disabled-color,
+      var(--color-text-control-secondary-disabled)
+    );
+    --_selector-trigger-focused-bg-color: var(
+      --ui3n-selector-trigger-focused-bg-color,
+      var(--color-bg-control-secondary-focused)
+    );
+    --_selector-trigger-focused-outline-color: var(
+      --ui3n-selector-trigger-focused-outline-color,
+      var(--color-border-control-accent-focused)
+    );
+    --_selector-body-bg-color: var(--ui3n-selector-body-bg-color, var(--color-bg-block-primary-default));
+    --_selector-item-bg-color: var(--ui3n-selector-item-bg-color, var(--color-bg-control-primary-hover));
+    --_selector-item-selected-color: var(
+      --ui3n-selector-item-selected-color,
+      var(--color-text-control-accent-default)
+    );
 
     position: relative;
     width: 100%;
@@ -400,7 +429,7 @@
     font-size: var(--_selector-font-size);
     font-weight: 500;
     line-height: 1.33;
-    color: var(--color-text-control-primary-default);
+    color: var(--_selector-label-color);
     margin-bottom: 4px;
   }
 
@@ -420,9 +449,9 @@
     padding: var(--_selector-trigger-padding);
     justify-content: flex-start;
     align-items: center;
-    background-color: var(--color-bg-control-secondary-default);
+    background-color: var(--_selector-trigger-bg-color);
     border-radius: var(--_selector-border-radius);
-    color: var(--color-text-control-primary-default);
+    color: var(--_selector-trigger-color);
     font-size: var(--_selector-trigger-font-size);
     font-weight: 400;
     line-height: 1.23;
@@ -431,13 +460,13 @@
     @include mixins.text-overflow-ellipsis();
 
     &.placeholder {
-      color: var(--color-text-control-secondary-default);
+      color: var(--_selector-trigger-placeholder-color);
       font-style: italic;
     }
 
     &.triggerDisabled {
-      background-color: var(--color-bg-control-secondary-disabled);
-      color: var(--color-text-control-secondary-disabled);
+      background-color: var(--_selector-trigger-disabled-bg-color);
+      color: var(--_selector-trigger-disabled-color);
       cursor: default;
       pointer-events: none;
     }
@@ -459,15 +488,15 @@
     }
 
     &.triggerFocused {
-      background-color: var(--color-bg-control-secondary-focused);
-      outline: 1px solid var(--color-border-control-accent-focused);
+      background-color: var(--_selector-trigger-focused-bg-color);
+      outline: 1px solid var(--_selector-trigger-focused-outline-color);
     }
   }
 
   .body {
     position: relative;
     width: 100%;
-    background-color: var(--color-bg-block-primary-default);
+    background-color: var(--_selector-body-bg-color);
     padding: var(--_selector-body-padding);
     box-shadow: 0 4px 12px var(--shadow-close);
     border: 1px solid var(--_selector-body-border-color);
@@ -482,7 +511,7 @@
       font-size: var(--_selector-item-font-size);
       line-height: 1.33;
       font-weight: 500;
-      color: var(--color-text-control-primary-default);
+      color: var(--_selector-trigger-color);
       border-radius: var(--_selector-item-border-radius);
     }
 
@@ -495,15 +524,15 @@
       font-size: var(--_selector-item-font-size);
       line-height: 1.33;
       font-weight: 500;
-      color: var(--color-text-control-primary-default);
+      color: var(--_selector-trigger-color);
       border-radius: var(--_selector-item-border-radius);
       user-select: none;
       cursor: pointer;
 
       &.itemSelected,
       &:hover {
-        background-color: var(--color-bg-control-primary-hover);
-        color: var(--color-text-control-accent-default);
+        background-color: var(--_selector-item-bg-color);
+        color: var(--_selector-item-selected-color);
       }
 
       &.itemDisabled {

package/src/components/ui3n-step-line-bar/ui3n-step-line-bar.vue

@@ -34,6 +34,15 @@
   .ui3nStepLineBar {
     /* the step height doubles as its border radius */
     --_step-line-bar-step-height: var(--ui3n-step-line-bar-step-height, 4px);
+    --_step-line-bar-label-color: var(--ui3n-step-line-bar-label-color, var(--color-text-block-accent-default));
+    --_step-line-bar-step-color: var(
+      --ui3n-step-line-bar-step-color,
+      var(--color-bg-control-secondary-default)
+    );
+    --_step-line-bar-active-color: var(
+      --ui3n-step-line-bar-active-color,
+      var(--color-bg-control-accent-default)
+    );
 
     position: relative;
     width: 100%;
@@ -46,7 +55,7 @@
     font-size: var(--ui3n-step-line-bar-label-font-size, 14px);
     font-weight: 500;
     line-height: var(--ui3n-step-line-bar-label-line-height, 20px);
-    color: var(--color-text-block-accent-default);
+    color: var(--_step-line-bar-label-color);
     margin-bottom: var(--ui3n-step-line-bar-label-offset, 16px);
   }
 
@@ -63,10 +72,10 @@
     flex: 1;
     height: var(--_step-line-bar-step-height);
     border-radius: var(--_step-line-bar-step-height);
-    background-color: var(--color-bg-control-secondary-default);
+    background-color: var(--_step-line-bar-step-color);
   }
 
   .active {
-    background-color: var(--color-bg-control-accent-default);
+    background-color: var(--_step-line-bar-active-color);
   }
 </style>

package/src/components/ui3n-switch/ui3n-switch.vue

@@ -102,6 +102,11 @@
     --_switch-font-size: var(--ui3n-switch-font-size, 12px);
     --_switch-font-color: var(--ui3n-switch-font-color, var(--color-text-control-primary-default));
     --_switch-font-weight: var(--ui3n-switch-font-weight, 500);
+    --_switch-focus-outline-color: var(
+      --ui3n-switch-focus-outline-color,
+      var(--color-border-control-accent-focused)
+    );
+    --_switch-dot-color: var(--ui3n-switch-dot-color, var(--color-bg-control-primary-default));
 
     position: relative;
     display: inline-flex;
@@ -111,7 +116,7 @@
     cursor: pointer;
 
     &:focus-visible {
-      outline: 2px solid var(--color-border-control-accent-focused);
+      outline: 2px solid var(--_switch-focus-outline-color);
       outline-offset: 4px;
       border-radius: 4px;
     }
@@ -148,7 +153,7 @@
     width: var(--_switch-dot-size);
     height: var(--_switch-dot-size);
     border-radius: 50%;
-    background-color: var(--color-bg-control-primary-default);
+    background-color: var(--_switch-dot-color);
     top: var(--_switch-dot-margin);
     transition: left 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }

package/src/components/ui3n-table/ui3n-table.vue

@@ -522,6 +522,10 @@
     --_table-cell-font-size: var(--ui3n-table-cell-font-size, 12px);
     --_table-nodata-height: var(--ui3n-table-nodata-height, 48px);
     --_table-nodata-color: var(--ui3n-table-nodata-color, var(--color-text-control-secondary-default));
+    --_table-border-color: var(--ui3n-table-border-color, var(--color-border-block-primary-default));
+    --_table-cell-border-color: var(--ui3n-table-cell-border-color, var(--color-border-table-primary-default));
+    --_table-body-bg-color: var(--ui3n-table-body-bg-color, var(--color-bg-table-cell-default));
+    --_table-row-hover-bg-color: var(--ui3n-table-row-hover-bg-color, var(--color-bg-control-primary-hover));
 
     position: relative;
     width: 100%;
@@ -630,9 +634,9 @@
     justify-content: space-between;
     align-items: center;
     background-color: var(--_table-group-actions-bg-color);
-    border-left: 1px solid var(--color-border-block-primary-default);
-    border-top: 1px solid var(--color-border-block-primary-default);
-    border-right: 1px solid var(--color-border-block-primary-default);
+    border-left: 1px solid var(--_table-border-color);
+    border-top: 1px solid var(--_table-border-color);
+    border-right: 1px solid var(--_table-border-color);
   }
 
   .groupActionsBody {
@@ -645,16 +649,16 @@
   .body {
     position: relative;
     width: 100%;
-    background-color: var(--color-bg-table-cell-default);
+    background-color: var(--_table-body-bg-color);
   }
 
   .row {
     position: relative;
     width: 100%;
     min-height: var(--_table-body-row-height);
-    border-left: 1px solid var(--color-border-table-primary-default);
-    border-right: 1px solid var(--color-border-table-primary-default);
-    border-bottom: 1px solid var(--color-border-block-primary-default);
+    border-left: 1px solid var(--_table-cell-border-color);
+    border-right: 1px solid var(--_table-cell-border-color);
+    border-bottom: 1px solid var(--_table-border-color);
     background-color: transparent;
 
     &:not(.customRow) {
@@ -668,7 +672,7 @@
     }
 
     &:hover {
-      background-color: var(--color-bg-control-primary-hover);
+      background-color: var(--_table-row-hover-bg-color);
     }
   }
 
@@ -761,7 +765,7 @@
 
     .bodyItemSticky {
       position: sticky;
-      background-color: var(--color-bg-table-cell-default);
+      background-color: var(--_table-body-bg-color);
     }
 
     .bodyItemFirst.bodyItemSticky {
@@ -769,7 +773,7 @@
     }
 
     .row:hover .bodyItemSticky {
-      background-color: var(--color-bg-control-primary-hover);
+      background-color: var(--_table-row-hover-bg-color);
     }
 
     .row.selected .bodyItemSticky {

package/src/components/ui3n-tabs/ui3n-tabs.vue

@@ -100,8 +100,8 @@
 
 <template>
   <div
-    ref="tabs"
     :id="id"
+    ref="tabs"
     data-ui3n="tabs"
     :style="tabsStyle"
     :class="[$style.ui3nTabs, itemDirection === 'vertical' && $style.vertical]"
@@ -118,6 +118,7 @@
     --_tabs-inactive-color: var(--ui3n-tabs-inactive-color, var(--color-text-control-primary-default));
     --_tabs-indicator-color: var(--ui3n-tabs-indicator-color, var(--color-border-control-accent-default));
     --_tabs-indicator-size: var(--ui3n-tabs-indicator-size, 2px);
+    --_tabs-hover-bg-color: var(--ui3n-tabs-hover-bg-color, var(--color-bg-control-secondary-default));
 
     position: relative;
     height: var(--_tabs-height);
@@ -134,7 +135,7 @@
     color: var(--_tabs-inactive-color);
 
     &:hover {
-      background-color: var(--color-bg-control-secondary-default);
+      background-color: var(--_tabs-hover-bg-color);
     }
 
     &::after {

package/src/components/ui3n-text/ui3n-text.vue

@@ -204,6 +204,24 @@
     --_text-font-size: var(--ui3n-text-font-size, 13px);
     --_text-padding-inline: var(--ui3n-text-padding-inline, 8px);
     --_text-padding-block: var(--ui3n-text-padding-block, 8px);
+    --_text-label-color: var(--ui3n-text-label-color, var(--color-text-control-primary-default));
+    --_text-bg-color: var(--ui3n-text-bg-color, var(--color-bg-control-secondary-default));
+    --_text-bg-hover-color: var(--ui3n-text-bg-hover-color, var(--color-bg-control-secondary-hover));
+    --_text-bg-focused-color: var(--ui3n-text-bg-focused-color, var(--color-bg-control-secondary-focused));
+    --_text-bg-disabled-color: var(--ui3n-text-bg-disabled-color, var(--color-bg-control-secondary-disabled));
+    --_text-outline-focused-color: var(
+      --ui3n-text-outline-focused-color,
+      var(--color-border-control-accent-focused)
+    );
+    --_text-color: var(--ui3n-text-color, var(--color-text-control-primary-default));
+    --_text-placeholder-color: var(--ui3n-text-placeholder-color, var(--color-text-control-secondary-default));
+    --_text-placeholder-hover-color: var(
+      --ui3n-text-placeholder-hover-color,
+      var(--color-text-control-secondary-hover)
+    );
+    --_text-disabled-color: var(--ui3n-text-disabled-color, var(--color-text-control-secondary-disabled));
+    --_text-error-color: var(--ui3n-text-error-color, var(--error-fill-default));
+    --_text-error-message-color: var(--ui3n-text-error-message-color, var(--error-content-default));
 
     position: relative;
     width: 100%;
@@ -217,7 +235,7 @@
     font-size: var(--_text-label-font-size);
     line-height: 1.33;
     font-weight: 600;
-    color: var(--color-text-control-primary-default);
+    color: var(--_text-label-color);
     margin-bottom: 4px;
   }
 
@@ -225,19 +243,19 @@
     position: relative;
     width: 100%;
     padding: var(--_text-padding-block) 0;
-    background-color: var(--color-bg-control-secondary-default);
+    background-color: var(--_text-bg-color);
     border-radius: var(--_text-border-radius);
     transition: all 0.2s ease-in-out;
 
     &:hover {
       &:not(:focus-within) {
-        background-color: var(--color-bg-control-secondary-hover);
+        background-color: var(--_text-bg-hover-color);
 
         .content {
-          background-color: var(--color-bg-control-secondary-hover);
+          background-color: var(--_text-bg-hover-color);
 
           &::placeholder {
-            color: var(--color-text-control-secondary-hover);
+            color: var(--_text-placeholder-hover-color);
           }
         }
       }
@@ -252,17 +270,17 @@
     position: relative;
     width: 100%;
     border-radius: var(--_text-border-radius);
-    background-color: var(--color-bg-control-secondary-default);
+    background-color: var(--_text-bg-color);
     padding: 0 var(--_text-padding-inline);
     font-family: inherit;
     font-size: var(--_text-font-size);
     line-height: 1.23;
     font-weight: 400;
-    color: var(--color-text-control-primary-default);
+    color: var(--_text-color);
     transition: all 0.2s ease-in-out;
 
     &::placeholder {
-      color: var(--color-text-control-secondary-default);
+      color: var(--_text-placeholder-color);
       font-style: italic;
       font-size: var(--_text-font-size);
       line-height: 1.23;
@@ -279,29 +297,29 @@
     user-select: none;
 
     .body {
-      background-color: var(--color-bg-control-secondary-disabled);
+      background-color: var(--_text-bg-disabled-color);
     }
 
     .content {
-      background-color: var(--color-bg-control-secondary-disabled);
-      color: var(--color-text-control-secondary-disabled);
+      background-color: var(--_text-bg-disabled-color);
+      color: var(--_text-disabled-color);
     }
   }
 
   .focused {
     .body {
-      background-color: var(--color-bg-control-secondary-focused);
-      outline: 1px solid var(--color-border-control-accent-focused);
+      background-color: var(--_text-bg-focused-color);
+      outline: 1px solid var(--_text-outline-focused-color);
     }
 
     .content {
-      background-color: var(--color-bg-control-secondary-focused);
+      background-color: var(--_text-bg-focused-color);
     }
   }
 
   .hasError {
     .body {
-      border-color: var(--error-fill-default);
+      border-color: var(--_text-error-color);
     }
   }
 
@@ -309,7 +327,7 @@
     margin-top: 4px;
     font-size: 11px;
     line-height: 13px;
-    color: var(--error-content-default);
+    color: var(--_text-error-message-color);
     font-weight: 400;
   }
 </style>

package/src/components/ui3n-virtual-scroll/ui3n-virtual-scroll.vue

@@ -563,7 +563,9 @@
 
 <style lang="scss" module>
   .ui3nVirtualScroll {
-    background-color: var(--color-bg-block-primary-default);
+    --_virtual-scroll-bg-color: var(--ui3n-virtual-scroll-bg-color, var(--color-bg-block-primary-default));
+
+    background-color: var(--_virtual-scroll-bg-color);
   }
 
   .viewport {