@v1nt1248/3nclient-lib 0.4.5 → 0.4.9

package/dist/ui3n-plugins.js

@@ -1,5 +1,5 @@
 import { U as e, a as t, i as n, n as r, r as i, t as a } from "./chunks/plugins-keys-DY2USp8H.js";
-import { a as o, n as s, t as c } from "./chunks/ui3n-tooltip-BvWcGgmA.js";
+import { a as o, n as s, t as c } from "./chunks/ui3n-tooltip-BpW_0eBg.js";
 import { Fragment as l, createApp as u, createBlock as d, createElementBlock as f, defineComponent as p, markRaw as m, mergeProps as h, normalizeClass as g, openBlock as _, ref as v, renderList as y } from "vue";
 import "pinia";
 import b from "mitt";

package/package.json

@@ -2,13 +2,16 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.4.5",
+  "version": "0.4.9",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
     "dist",
     "src/components/"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "main": "./dist/ui3n-components.js",
   "module": "./dist/ui3n-components.js",
   "exports": {

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

@@ -570,6 +570,29 @@
     --_autocomplete-padding-inline: var(--ui3n-autocomplete-padding-inline, 8px);
     --_autocomplete-padding-block: var(--ui3n-autocomplete-padding-block, 4px);
     --_autocomplete-border-radius: var(--ui3n-autocomplete-border-radius, 4px);
+    --_autocomplete-text-color: var(--ui3n-autocomplete-text-color, var(--color-text-control-primary-default));
+    --_autocomplete-placeholder-color: var(
+      --ui3n-autocomplete-placeholder-color,
+      var(--color-text-control-secondary-default)
+    );
+    --_autocomplete-highlight-color: var(
+      --ui3n-autocomplete-highlight-color,
+      var(--color-text-control-accent-default)
+    );
+    --_autocomplete-bg-color: var(--ui3n-autocomplete-bg-color, var(--color-bg-block-primary-default));
+    --_autocomplete-input-bg-color: var(
+      --ui3n-autocomplete-input-bg-color,
+      var(--color-bg-control-secondary-default)
+    );
+    --_autocomplete-item-bg-color: var(
+      --ui3n-autocomplete-item-bg-color,
+      var(--color-bg-control-primary-hover)
+    );
+    --_autocomplete-item-selected-color: var(
+      --ui3n-autocomplete-item-selected-color,
+      var(--color-text-control-accent-default)
+    );
+    --_autocomplete-error-color: var(--ui3n-autocomplete-error-color, var(--error-content-default));
 
     position: relative;
     display: flex;
@@ -578,7 +601,7 @@
 
     :global(.match-search) {
       font-weight: 600;
-      color: var(--color-text-control-accent-default) !important;
+      color: var(--_autocomplete-highlight-color) !important;
     }
   }
 
@@ -602,7 +625,7 @@
     font-size: var(--_autocomplete-font-size);
     line-height: var(--_autocomplete-min-height);
     font-weight: 400;
-    color: var(--color-text-control-primary-default);
+    color: var(--_autocomplete-text-color);
   }
 
   .input {
@@ -614,30 +637,30 @@
     font-size: var(--_autocomplete-font-size);
     line-height: var(--_autocomplete-min-height);
     font-weight: 400;
-    color: var(--color-text-control-primary-default);
+    color: var(--_autocomplete-text-color);
     background-color: transparent;
     border: none;
     outline: none;
 
     &::placeholder {
-      color: var(--color-text-control-secondary-default);
+      color: var(--_autocomplete-placeholder-color);
     }
 
     &:hover,
     &:focus {
-      background-color: var(--color-bg-control-secondary-default);
+      background-color: var(--_autocomplete-input-bg-color);
     }
 
     &.inputWithError {
       height: calc(var(--_autocomplete-min-height) - 2px);
       padding: 0 calc(var(--_autocomplete-padding-inline) - 1px);
-      border: 1px solid var(--error-content-default);
+      border: 1px solid var(--_autocomplete-error-color);
     }
   }
 
   .body {
     position: relative;
-    background-color: var(--color-bg-block-primary-default);
+    background-color: var(--_autocomplete-bg-color);
     padding: 4px;
   }
 
@@ -650,15 +673,15 @@
     font-size: var(--_autocomplete-item-font-size);
     line-height: 1.23;
     font-weight: 500;
-    color: var(--color-text-control-primary-default);
+    color: var(--_autocomplete-text-color);
     border-radius: var(--_autocomplete-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(--_autocomplete-item-bg-color);
+      color: var(--_autocomplete-item-selected-color);
     }
 
     &.itemDisabled {
@@ -681,7 +704,7 @@
     font-size: var(--_autocomplete-item-font-size);
     line-height: 1.23;
     font-weight: 500;
-    color: var(--color-text-control-primary-default);
+    color: var(--_autocomplete-text-color);
     border-radius: var(--_autocomplete-border-radius);
   }
 

package/src/components/ui3n-badge/ui3n-badge-simple.vue

@@ -5,8 +5,6 @@
   const props = withDefaults(defineProps<Ui3nBadgeSimpleProps>(), {
     dot: false,
     value: '',
-    color: 'var(--color-bg-button-primary-default)',
-    textColor: 'var(--color-text-button-primary-default)',
   });
 
   const emits = defineEmits<Ui3nBadgeSimpleEmits>();
@@ -26,7 +24,41 @@
     () => getElementSize(),
   );
 
+  watch(
+    [() => props.color, () => props.textColor],
+    (newValue: [string | undefined, string | undefined], prevValue: [string | undefined, string | undefined]) => {
+      if (!element.value) {
+        return;
+      }
+
+      const [color, textColor] = newValue;
+      const [prevColor, prevTextColor] = prevValue;
+
+      color !== prevColor &&
+        element.value.style.setProperty(
+          '--ui3n-badge-bg-color',
+          color ?? 'var(--color-bg-button-primary-default)',
+        );
+
+      textColor !== prevTextColor &&
+        element.value.style.setProperty(
+          '--ui3n-badge-text-color',
+          textColor ?? 'var(--color-text-button-primary-default)',
+        );
+    },
+  );
+
   onMounted(() => {
+    if (element.value) {
+      if (props.color) {
+        element.value.style.setProperty('--ui3n-badge-bg-color', props.color);
+      }
+
+      if (props.textColor) {
+        element.value.style.setProperty('--ui3n-badge-text-color', props.textColor);
+      }
+    }
+
     getElementSize();
   });
 </script>
@@ -54,11 +86,14 @@
     --_badge-padding-inline: var(--ui3n-badge-padding-inline, 6px);
     --_badge-nodot-border-radius: var(--ui3n-badge-nodot-border-radius, 10px);
     --_badge-font-size: var(--ui3n-badge-font-size, 12px);
+    --_badge-outline-color: var(--ui3n-badge-outline-color, var(--color-bg-block-primary-default));
+    --_badge-bg-color: var(--ui3n-badge-bg-color, var(--color-bg-button-primary-default));
+    --_badge-text-color: var(--ui3n-badge-text-color, var(--color-text-button-primary-default));
 
     position: relative;
     box-sizing: border-box;
-    background-color: v-bind(color);
-    outline: 1px var(--color-bg-block-primary-default) solid;
+    background-color: var(--_badge-bg-color);
+    outline: 1px var(--_badge-outline-color) solid;
 
     &:not(.ui3nBadgeDot) {
       min-height: var(--_badge-size);
@@ -81,7 +116,7 @@
 
   .ui3nBadgeText {
     display: block;
-    color: v-bind(textColor);
+    color: var(--_badge-text-color);
     font-size: var(--_badge-font-size);
     line-height: var(--_badge-size);
     text-align: center;

package/src/components/ui3n-breadcrumbs/types.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { Slot, VNode } from 'vue';
 
 /**
  * Breadcrumb component properties
@@ -72,3 +72,21 @@ export interface Ui3nBreadcrumbsSlots {
    */
   default: () => VNode;
 }
+
+/**
+ * Context shared by Ui3nBreadcrumbs with its child Ui3nBreadcrumb components
+ */
+export interface Ui3nBreadcrumbsContext {
+  /**
+   * Resolves the separator of the whole chain
+   */
+  separator: () => string | undefined;
+  /**
+   * Resolves whether the whole chain is disabled
+   */
+  disabled: () => boolean;
+  /**
+   * Global separator slot passed to each breadcrumb
+   */
+  customSeparatorSlot?: Slot;
+}

package/src/components/ui3n-breadcrumbs/ui3n-breadcrumb.vue

@@ -1,6 +1,11 @@
 <script lang="ts" setup>
   import { computed, inject, useCssModule, useSlots } from 'vue';
-  import type { Ui3nBreadcrumbEmits, Ui3nBreadcrumbProps, Ui3nBreadcrumbSlots } from './types';
+  import type {
+    Ui3nBreadcrumbEmits,
+    Ui3nBreadcrumbProps,
+    Ui3nBreadcrumbSlots,
+    Ui3nBreadcrumbsContext,
+  } from './types';
 
   const props = withDefaults(defineProps<Ui3nBreadcrumbProps>(), {
     separator: undefined,
@@ -15,7 +20,7 @@
 
   const $css = useCssModule();
 
-  const parentContext = inject<any>('ui3n-breadcrumbs-context', null);
+  const parentContext = inject<Ui3nBreadcrumbsContext | null>('ui3n-breadcrumbs-context', null);
 
   const separatorValue = computed(() => {
     if (props.separator) {
@@ -73,6 +78,7 @@
     --_breadcrumb-separator-distance: var(--ui3n-breadcrumb-separator-distance, 8px);
     --_breadcrumb-color-default: var(--ui3n-breadcrumb-color-default, var(--color-text-block-primary-default));
     --_breadcrumb-color-selected: var(--ui3n-breadcrumb-color-selected, var(--color-text-block-accent-default));
+    --_breadcrumb-separator-color: var(--ui3n-breadcrumb-separator-color, var(--color-text-block-tertiary-default));
 
     display: flex;
     align-items: center;
@@ -95,7 +101,7 @@
     align-items: center;
     margin: 0 var(--_breadcrumb-separator-distance);
     padding-left: var(--_breadcrumb-padding-inline);
-    color: var(--color-text-block-tertiary-default);
+    color: var(--_breadcrumb-separator-color);
   }
 
   .ui3nBreadcrumbActive {

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
   import { provide, useSlots } from 'vue';
-  import type { Ui3nBreadcrumbsProps, Ui3nBreadcrumbsSlots } from './types';
+  import type { Ui3nBreadcrumbsContext, Ui3nBreadcrumbsProps, Ui3nBreadcrumbsSlots } from './types';
 
   const props = withDefaults(defineProps<Ui3nBreadcrumbsProps>(), {
     separator: '/',
@@ -10,11 +10,13 @@
   const slots = useSlots();
   defineSlots<Ui3nBreadcrumbsSlots>();
 
-  provide('ui3n-breadcrumbs-context', {
+  const context: Ui3nBreadcrumbsContext = {
     separator: () => props.separator,
     disabled: () => props.disabled,
     customSeparatorSlot: slots.separator,
-  });
+  };
+
+  provide('ui3n-breadcrumbs-context', context);
 </script>
 
 <template>

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

@@ -137,12 +137,12 @@
     v-on="
       draggable
         ? {
-            dragstart: onDragstart,
-            mousedown: onMousedown,
-            mouseup: onMouseup,
-            mousemove: onMousemove,
-            keydown: onKeydown,
-          }
+          dragstart: onDragstart,
+          mousedown: onMousedown,
+          mouseup: onMouseup,
+          mousemove: onMousemove,
+          keydown: onKeydown,
+        }
         : { keydown: onKeydown }
     "
   >
@@ -244,6 +244,9 @@
     --_dialog-cancel-button-color: var(--ui3n-dialog-cancel-button-color, var(--color-text-button-secondary-default));
     --_dialog-confirm-background-color: var(--ui3n-dialog-confirm-background-color, var(--color-bg-button-primary-default));
     --_dialog-cancel-background-color: var(--ui3n-dialog-cancel-background-color, var(--color-bg-button-secondary-default));
+    --_dialog-bg-color: var(--ui3n-dialog-bg-color, var(--color-bg-block-primary-default));
+    --_dialog-border-color: var(--ui3n-dialog-border-color, var(--color-border-block-primary-default));
+    --_dialog-title-color: var(--ui3n-dialog-title-color, var(--color-text-control-primary-default));
 
     position: relative;
     display: flex;
@@ -251,8 +254,8 @@
     height: auto;
     min-height: 48px;
     max-height: 95%;
-    background-color: var(--color-bg-block-primary-default);
-    border: 1px solid var(--color-border-block-primary-default);
+    background-color: var(--_dialog-bg-color);
+    border: 1px solid var(--_dialog-border-color);
     border-radius: var(--_dialog-border-radius);
     outline: none;
     box-shadow:
@@ -284,7 +287,7 @@
     align-items: center;
     column-gap: 8px;
     padding: var(--_dialog-title-padding);
-    border-bottom: 1px solid var(--color-border-block-primary-default);
+    border-bottom: 1px solid var(--_dialog-border-color);
 
     span {
       display: block;
@@ -293,7 +296,7 @@
       font-size: var(--_dialog-title-font-size);
       font-weight: 600;
       line-height: 1;
-      color: var(--color-text-control-primary-default);
+      color: var(--_dialog-title-color);
       @include mixins.text-overflow-ellipsis();
     }
 

package/src/components/ui3n-drop-files/ui3n-drop-files.vue

@@ -177,6 +177,11 @@
     --_dropzone-height: var(--ui3n-dropzone-height, 0);
     --_dropzone-title-font: var(--ui3n-dropzone-title-font, 0);
     --_dropzone-border-radius: var(--ui3n-dropzone-border-radius, 4px);
+    --_dropzone-border-color: var(--ui3n-dropzone-border-color, var(--color-border-block-primary-default));
+    --_dropzone-accent-border-color: var(--ui3n-dropzone-accent-border-color, var(--accent-fill-pressed));
+    --_dropzone-bg-color: var(--ui3n-dropzone-bg-color, var(--color-bg-block-primary-default));
+    --_dropzone-title-color: var(--ui3n-dropzone-title-color, var(--color-text-table-secondary-default));
+    --_dropzone-icon-bg-color: var(--ui3n-dropzone-icon-bg-color, var(--color-bg-button-tritery-default));
 
     position: relative;
     box-sizing: border-box;
@@ -186,17 +191,17 @@
   }
 
   .ui3nDropFilesWithBorder {
-    border: 2px dashed var(--color-border-block-primary-default);
+    border: 2px dashed var(--_dropzone-border-color);
   }
 
   .ui3nDropFilesWithAccentBorder {
-    border: 2px dashed var(--accent-fill-pressed);
+    border: 2px dashed var(--_dropzone-accent-border-color);
   }
 
   .ui3nDropFilesDropzone {
     box-sizing: border-box;
     position: absolute;
-    background-color: var(--color-bg-block-primary-default);
+    background-color: var(--_dropzone-bg-color);
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -209,7 +214,7 @@
   .ui3nDropFilesDropzoneTitle {
     font-size: var(--_dropzone-title-font);
     font-weight: 500;
-    color: var(--color-text-table-secondary-default);
+    color: var(--_dropzone-title-color);
     margin: 0;
     pointer-events: none;
   }
@@ -219,7 +224,7 @@
     width: calc(var(--_dropzone-height) * 0.4);
     height: calc(var(--_dropzone-height) * 0.4);
     border-radius: 50%;
-    background-color: var(--color-bg-button-tritery-default);
+    background-color: var(--_dropzone-icon-bg-color);
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -267,6 +267,20 @@
     //--ui3n-editable-padding: 0 4px;
     //--ui3n-editable-padding: 4px 44px 4px 4px;
     --_editable-button-size: var(--ui3n-editable-button-size, 16px);
+    --_editable-text-color: var(--ui3n-editable-text-color, var(--color-text-table-primary-default));
+    --_editable-placeholder-color: var(--ui3n-editable-placeholder-color, var(--color-text-table-secondary-default));
+    --_editable-empty-color: var(--ui3n-editable-empty-color, var(--color-text-table-secondary-default));
+    --_editable-edit-bg-color: var(--ui3n-editable-edit-bg-color, var(--color-bg-control-primary-default, #fff));
+    --_editable-edit-border-color: var(--ui3n-editable-edit-border-color, var(--color-border-table-accent-default));
+    --_editable-edit-border-warning-color: var(
+      --ui3n-editable-edit-border-warning-color,
+      var(--error-content-default)
+    );
+    --_editable-hover-bg-color: var(--ui3n-editable-hover-bg-color, var(--color-bg-control-primary-hover));
+    --_editable-button-hover-bg-color: var(
+      --ui3n-editable-button-hover-bg-color,
+      var(--color-bg-button-secondary-hover)
+    );
 
     position: relative;
     box-sizing: border-box;
@@ -277,19 +291,19 @@
     font-size: var(--_editable-font-size);
     font-weight: 400;
     line-height: var(--_editable-height);
-    color: var(--color-text-table-primary-default);
+    color: var(--_editable-text-color);
     overflow: hidden;
     border: 1px solid transparent;
 
     &.ui3nEditableInEdit {
-      background-color: var(--color-bg-control-primary-default, #fff);
+      background-color: var(--_editable-edit-bg-color);
 
       &:not(.ui3nEditableInEditWarning) {
-        border: 1px solid var(--color-border-table-accent-default);
+        border: 1px solid var(--_editable-edit-border-color);
       }
 
       &.ui3nEditableInEditWarning {
-        border: 1px solid var(--error-content-default);
+        border: 1px solid var(--_editable-edit-border-warning-color);
       }
     }
   }
@@ -320,11 +334,11 @@
     }
 
     &.contentEmpty {
-      color: var(--color-text-table-secondary-default);
+      color: var(--_editable-empty-color);
     }
 
     &:hover {
-      background-color: var(--color-bg-control-primary-hover);
+      background-color: var(--_editable-hover-bg-color);
 
       .btn.editBtn {
         opacity: 1;
@@ -346,9 +360,10 @@
     border-radius: var(--_editable-border-radius);
     background-color: transparent;
     border: none;
+    color: var(--_editable-text-color);
 
     &::placeholder {
-      color: var(--color-text-table-secondary-default);
+      color: var(--_editable-placeholder-color);
     }
 
     &:focus-visible {
@@ -385,7 +400,7 @@
 
     &:hover {
       cursor: pointer;
-      background-color: var(--color-bg-button-secondary-hover);
+      background-color: var(--_editable-button-hover-bg-color);
     }
 
     &.editBtn {

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

@@ -298,6 +298,24 @@
     --_input-outer-padding-top: var(--ui3n-input-outer-padding-top, 1px);
     --_input-outer-padding-bottom: var(--ui3n-input-outer-padding-bottom, 15px);
     --_input-outer-padding-x: var(--ui3n-input-outer-padding-x, 1px);
+    --_input-text-color: var(--ui3n-input-text-color, var(--color-text-control-primary-default));
+    --_input-placeholder-color: var(--ui3n-input-placeholder-color, var(--color-text-control-secondary-default));
+    --_input-placeholder-hover-color: var(
+      --ui3n-input-placeholder-hover-color,
+      var(--color-text-control-secondary-hover)
+    );
+    --_input-bg-color: var(--ui3n-input-bg-color, var(--color-bg-control-secondary-default));
+    --_input-bg-hover-color: var(--ui3n-input-bg-hover-color, var(--color-bg-control-secondary-hover));
+    --_input-bg-focused-color: var(--ui3n-input-bg-focused-color, var(--color-bg-control-secondary-focused));
+    --_input-bg-disabled-color: var(--ui3n-input-bg-disabled-color, var(--color-bg-control-secondary-disabled));
+    --_input-outline-focused-color: var(
+      --ui3n-input-outline-focused-color,
+      var(--color-border-control-accent-focused)
+    );
+    --_input-disabled-color: var(--ui3n-input-disabled-color, var(--color-text-control-secondary-disabled));
+    --_input-label-color: var(--ui3n-input-label-color, var(--color-text-control-primary-default));
+    --_input-error-color: var(--ui3n-input-error-color, var(--error-content-default));
+    --_input-success-color: var(--ui3n-input-success-color, var(--success-content-default));
 
     &.withLabel {
       --_input-message-top: var(
@@ -327,18 +345,18 @@
 
     &:hover {
       .inputWrapper:not(:focus-within) {
-        background-color: var(--color-bg-control-secondary-hover);
+        background-color: var(--_input-bg-hover-color);
 
         .ui3nInputField::placeholder {
-          color: var(--color-text-control-secondary-hover);
+          color: var(--_input-placeholder-hover-color);
         }
       }
     }
 
     &:focus-within {
       .inputWrapper {
-        background-color: var(--color-bg-control-secondary-focused);
-        outline: 1px solid var(--color-border-control-accent-focused);
+        background-color: var(--_input-bg-focused-color);
+        outline: 1px solid var(--_input-outline-focused-color);
       }
     }
   }
@@ -349,7 +367,7 @@
     font-size: var(--_input-label-font-size);
     line-height: 1.33;
     font-weight: 500;
-    color: var(--color-text-control-primary-default);
+    color: var(--_input-label-color);
     margin-bottom: 4px;
   }
 
@@ -358,7 +376,7 @@
     align-items: center;
     height: var(--_input-height);
     border-radius: var(--_input-border-radius);
-    background-color: var(--color-bg-control-secondary-default);
+    background-color: var(--_input-bg-color);
     transition: background-color 0.2s ease-in-out;
   }
 
@@ -376,11 +394,11 @@
     font-size: var(--_input-font-size);
     line-height: 1.23;
     font-weight: 400;
-    color: var(--color-text-control-primary-default);
+    color: var(--_input-text-color);
     transition: color 0.2s ease-in-out;
 
     &::placeholder {
-      color: var(--color-text-control-secondary-default);
+      color: var(--_input-placeholder-color);
       font-style: italic;
       font-size: var(--_input-font-size);
       font-weight: 400;
@@ -391,7 +409,7 @@
     }
 
     &[disabled] {
-      color: var(--color-text-control-secondary-disabled);
+      color: var(--_input-disabled-color);
       cursor: not-allowed;
     }
 
@@ -443,34 +461,34 @@
   }
 
   .ui3nInputErrorMessage {
-    color: var(--error-content-default);
+    color: var(--_input-error-color);
   }
 
   .ui3nInputSuccessMessage {
-    color: var(--success-content-default);
+    color: var(--_input-success-color);
   }
 
   .error {
     .ui3nInputLabel {
-      color: var(--error-content-default);
+      color: var(--_input-error-color);
     }
 
     .inputWrapper {
-      outline: 1px solid var(--error-content-default);
+      outline: 1px solid var(--_input-error-color);
     }
 
     &:focus-within {
       .inputWrapper {
-        background-color: var(--color-bg-control-secondary-focused);
-        outline: 1px solid var(--error-content-default);
-        box-shadow: 0 0 0 1px var(--error-content-default);
+        background-color: var(--_input-bg-focused-color);
+        outline: 1px solid var(--_input-error-color);
+        box-shadow: 0 0 0 1px var(--_input-error-color);
       }
     }
   }
 
   .success {
     .ui3nInputLabel {
-      color: var(--success-content-default);
+      color: var(--_input-success-color);
     }
   }
 
@@ -479,7 +497,7 @@
     user-select: none;
 
     .inputWrapper {
-      background-color: var(--color-bg-control-secondary-disabled);
+      background-color: var(--_input-bg-disabled-color);
       cursor: not-allowed;
     }
   }

package/src/components/ui3n-input-file/ui3n-input-file.vue

@@ -163,6 +163,11 @@
   .ui3nInputFile {
     --_input-file-font-size: var(--ui3n-input-file-font-size, 12px);
     --_input-file-padding-inline: var(--ui3n-input-file-padding-inline, 4px);
+    --_input-file-label-color: var(--ui3n-input-file-label-color, var(--color-text-button-secondary-default));
+    --_input-file-label-hover-color: var(
+      --ui3n-input-file-label-hover-color,
+      var(--color-text-button-secondary-hover)
+    );
 
     position: relative;
     width: max-content;
@@ -172,12 +177,12 @@
     font-size: var(--_input-file-font-size);
     font-weight: 500;
     line-height: 1.33;
-    color: var(--color-text-button-secondary-default);
+    color: var(--_input-file-label-color);
     padding: 0 var(--_input-file-padding-inline);
     cursor: pointer;
 
     &:hover {
-      color: var(--color-text-button-secondary-hover);
+      color: var(--_input-file-label-hover-color);
     }
 
     &.disabled {

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

@@ -83,6 +83,8 @@
 
   .ui3nMobileMenu {
     --_menu-width-custom: var(--ui3n-menu-width-custom, 240px);
+    --_menu-color: var(--ui3n-menu-color, var(--color-text-block-primary-default));
+    --_menu-bg-color: var(--ui3n-menu-bg-color, var(--color-bg-block-primary-default));
 
     display: inline-block;
     width: max-content;
@@ -118,8 +120,8 @@
     justify-content: flex-start;
     align-items: stretch;
     height: 100%;
-    color: var(--color-text-block-primary-default);
-    background-color: var(--color-bg-block-primary-default);
+    color: var(--_menu-color);
+    background-color: var(--_menu-bg-color);
     overflow-x: hidden;
     overflow-y: auto;
     box-shadow: 4px 0 16px var(--shadow-close);