ui-core-abv 0.0.0-watch

package/lib/translate/dictionary.es.d.ts

@@ -0,0 +1,290 @@
+export declare const DICTIONARY_ES: {
+    readonly common: {
+        readonly open: "Abrir";
+        readonly close: "Cerrar";
+        readonly save: "Guardar";
+        readonly clear: "Limpiar";
+        readonly cancel: "Cancelar";
+        readonly apply: "Aplicar";
+        readonly continue: "Continuar";
+        readonly back: "Volver";
+        readonly next: "Siguiente";
+        readonly send: "Enviar";
+        readonly today: "Hoy";
+        readonly search: "Buscar";
+        readonly search_ellipsis: "Buscar...";
+        readonly all: "Todos";
+        readonly select: "Seleccionar";
+        readonly selected: "Seleccionados";
+        readonly detail: "Detalle";
+    };
+    readonly table: {
+        readonly search_label: "Buscar";
+        readonly search_placeholder: "Buscar";
+        readonly empty: "No hay elementos";
+        readonly next_short: "Sig.";
+        readonly previous_short: "Ant.";
+    };
+    readonly select: {
+        readonly non_selected: "- Seleccionar -";
+        readonly multy_non_selected: "-- Seleccionar --";
+        readonly multy_all_selected: "-- Todos --";
+        readonly none: "- Ninguno -";
+        readonly empty: "No hay elementos para mostrar";
+        readonly without_options: "Sin opciones disponibles";
+        readonly pending_text: "TEXTO PENDIENTE";
+        readonly search_placeholder: "Buscar...";
+    };
+    readonly tree: {
+        readonly search_label: "Buscar subcategorias:";
+        readonly search_placeholder: "Buscar...";
+        readonly empty: "Sin subcategorias";
+        readonly duplicate_name: "La subcategoria ya existe";
+        readonly without_children: "Sin hijos";
+    };
+    readonly tag_selector: {
+        readonly add_tag: "Agregar tag";
+        readonly predefined_title: "Tags predefinidos";
+        readonly new_tag_title: "Nuevo tag";
+    };
+    readonly phone_input: {
+        readonly placeholder: "Ingresa un numero";
+        readonly search_country: "Buscar pais o codigo";
+        readonly clear_search: "Limpiar busqueda";
+        readonly no_results: "No se encontraron resultados";
+        readonly aria_country_code: "{{country}} codigo {{dialCode}}";
+    };
+    readonly time_picker: {
+        readonly placeholder: "hh:mm am/pm";
+    };
+    readonly excel_table: {
+        readonly load_file: "Cargar excel";
+        readonly clear_file: "Limpiar";
+        readonly empty_message: "No hay datos para mostrar";
+        readonly see_more: "Ver mas";
+        readonly counter_text: "Viendo {{shown}} elementos de {{total}} totales";
+    };
+    readonly editable_table: {
+        readonly add_row_above: "Agregar arriba";
+        readonly add_row_below: "Agregar abajo";
+        readonly delete_row: "Eliminar fila";
+        readonly add_column: "Agregar columna";
+        readonly delete_column: "Eliminar columna";
+        readonly delete_row_with_data_warning: "Esta fila tiene datos. Si la eliminas, se perderán todos sus valores.";
+        readonly delete_column_with_data_warning: "La columna \"{{column_name}}\" tiene datos. Si la eliminas, perderás esos valores.";
+        readonly save_or_discard_column: "¿Deseas guardar esta nueva columna o eliminarla?";
+        readonly save_column: "Guardar columna";
+        readonly save: "Guardar";
+        readonly delete: "Eliminar";
+        readonly column_name_must_be_unique: "El nombre de la columna debe ser único";
+    };
+    readonly rule_builder: {
+        readonly title: "Regla";
+        readonly add_rule: "Condición";
+        readonly add_rule_tip: "Agregar condición";
+        readonly add_group: "Grupo";
+        readonly add_group_tip: "Agregar grupo";
+        readonly reset: "Descartar";
+        readonly reset_tip: "Descartar cambios no guardados";
+        readonly save: "Guardar regla";
+        readonly save_tip: "Guardar regla construida";
+        readonly delete_rule_tip: "Eliminar condición";
+        readonly delete_group_tip: "Eliminar grupo";
+        readonly toggle_operator_tip: "Click para cambiar de operador";
+        readonly no_rules: "No hay condiciones agregadas";
+        readonly rules_management: "Seleccionar condición";
+        readonly edit: "Editar regla";
+        readonly edit_tip: "Editar regla";
+        readonly edit_condition_tip: "Click para editar la condición";
+        readonly select_condition: "- seleccionar condición -";
+        readonly operators: {
+            readonly and: "Y";
+            readonly or: "O";
+        };
+        readonly validation: {
+            readonly single_condition_not_allowed: "No se pueden crear reglas con una sola condición";
+        };
+        readonly definition: {
+            readonly cancel_and_back: "Cancelar y volver";
+            readonly create_and_select: "Crear y seleccionar condición";
+            readonly search_placeholder: "Buscar condición";
+            readonly new_rule: "Nueva condición";
+            readonly no_results: "No se encontraron condiciones";
+            readonly previous: "Anterior";
+            readonly next: "Siguiente";
+            readonly form: {
+                readonly description: "Descripción";
+                readonly field: "Campo";
+                readonly operator: "Operador";
+                readonly value: "Valor";
+            };
+        };
+    };
+    readonly step_form: {
+        readonly back: "Volver";
+        readonly next: "Siguiente";
+        readonly submit: "Enviar";
+    };
+    readonly work_panel: {
+        readonly minimize: "Minimizar";
+        readonly expand: "Agrandar";
+        readonly reduce: "Reducir";
+        readonly close: "Cerrar";
+    };
+    readonly modal: {
+        readonly cancel: "Cancelar";
+        readonly next: "Siguiente";
+    };
+    readonly searcher: {
+        readonly clear_tip: "Limpiar";
+        readonly empty: "No hay elementos para mostrar";
+        readonly without_selected: "Sin elementos seleccionados";
+    };
+    readonly alerts: {
+        readonly success_title: "Operacion exitosa";
+        readonly error_title: "Se produjo un error";
+        readonly delete_title: "Confirmacion de accion";
+        readonly delete_confirm: "Si, eliminar";
+        readonly warning_title: "!Alerta!";
+    };
+    readonly voice: {
+        readonly browser_incompatibility_title: "Incompatibilidad de navegador";
+        readonly browser_incompatibility_message: "Este navegador no sorporta esta caracteristica.";
+        readonly voice_error: "Error al intentar dictado por voz";
+    };
+    readonly form_builder: {
+        readonly block_title: "Título";
+        readonly add_new_field: "Agregar nuevo campo";
+        readonly block_subtitle: "Subtítulo";
+        readonly add_block: "Agregar bloque";
+        readonly delete_block: "Eliminar bloque";
+        readonly preview_form: "Vista previa";
+        readonly submit_form: "Guardar";
+        readonly select_field_to_edit: "Selecciona un campo para editar sus propiedades";
+        readonly no_fields: "Añade campos a tu formulario";
+        readonly base: {
+            readonly name: "Identificador";
+            readonly required: "Obligatorio";
+            readonly icon: "Ícono externo";
+            readonly label: "Etiqueta de campo";
+            readonly tip: "Sugerencia";
+            readonly tip_tip: "Se muestra debajo";
+            readonly new_line: "Saltar línea";
+            readonly col_span: "Ancho";
+            readonly col_span_tip: "Cuantas columnas ocupa el campo";
+        };
+        readonly extra: {
+            readonly iconColor: "Color de ícono externo";
+            readonly tooltip: "Información adicional";
+            readonly internalIcon: "Ícono interno";
+            readonly internalIconColor: "Color del ícono interno";
+            readonly internalColorScale: "Escala de color interna";
+            readonly internalColorScale_tip: "Valores para dibujar la escala";
+            readonly internalColorScaleOrder: "Orden de escala de color";
+            readonly internalColorScaleOrder_tip: "Ascendente o descendente";
+            readonly placeholder: "Placeholder";
+            readonly placeholder_tip: "Texto inicial del campo";
+            readonly minLength: "Largo mínimo";
+            readonly minLength_tip: "Cantidad mínima de caracteres";
+            readonly maxLength: "Largo máximo";
+            readonly maxLength_tip: "Cantidad máxima de caracteres";
+            readonly showCounter: "Mostrar contador";
+            readonly showCounter_tip: "Cuenta caracteres ingresados";
+            readonly voiceToTextEnabled: "Habilitar voz a texto";
+            readonly voiceToTextEnabled_tip: "Permite dictado por voz";
+            readonly textareaResize: "Auto ajuste de altura";
+            readonly textareaResize_tip: "Ajusta la altura según contenido";
+            readonly resizeMinRows: "Filas mínimas";
+            readonly resizeMinRows_tip: "Filas mínimas iniciales";
+            readonly resizeMaxRows: "Filas máximas";
+            readonly resizeMaxRows_tip: "Filas máximas iniciales";
+            readonly min: "Mínimo";
+            readonly min_tip: "Valor mínimo permitido";
+            readonly max: "Máximo";
+            readonly max_tip: "Valor máximo permitido";
+            readonly step: "Paso";
+            readonly step_tip: "Incremento entre valores";
+            readonly sliderInterval: "Intervalo del deslizador";
+            readonly sliderInterval_tip: "Espacio entre marcas";
+            readonly sliderMarks: "Marcas del deslizador";
+            readonly sliderMarks_tip: "Cantidad de marcas";
+            readonly monthMode: "Modo mes";
+            readonly monthMode_tip: "Seleccionar fecha por mes";
+            readonly monthDay: "Día del mes";
+            readonly monthDay_tip: "Elegir primer o último día";
+            readonly minDate: "Fecha mínima";
+            readonly minDate_tip: "Fecha mínima permitida";
+            readonly maxDate: "Fecha máxima";
+            readonly maxDate_tip: "Fecha máxima permitida";
+            readonly timeInterval: "Intervalo de hora";
+            readonly timeInterval_tip: "Paso en minutos";
+            readonly fileTypes: "Tipos de archivo";
+            readonly fileTypes_tip: "Extensiones separadas por coma";
+            readonly poolEnabledListView: "Ver lista habilitada";
+            readonly poolEnabledListView_tip: "Mostrar opciones en lista";
+            readonly poolTitle: "Título del listado";
+            readonly poolTitle_tip: "Título del encabezado";
+            readonly options: "Opciones";
+            readonly options_tip: "Formato JSON: [{id:1,text:\"A\"}]";
+            readonly multyEnabled: "Múltiple";
+            readonly multyEnabled_tip: "Permite seleccionar varios ítems";
+            readonly searchFn: "Función de búsqueda";
+            readonly searchFn_tip: "Función para buscar";
+            readonly searchDisplayFn: "Función de texto de opción";
+            readonly searchDisplayFn_tip: "Función para mostrar etiqueta";
+            readonly searchIsEnabledFn: "Función de habilitación";
+            readonly searchIsEnabledFn_tip: "Función para habilitar o deshabilitar opción";
+            readonly pattern: "Patrón";
+            readonly pattern_tip: "Expresión regular en texto";
+            readonly searchApi: "API de búsqueda";
+            readonly iaValidation: "Validación IA";
+            readonly iaValidationPrompt: "Prompt de validación IA";
+            readonly searchApi_tip: "URL para obtener opciones de búsqueda";
+            readonly selectNullable_tip: "Permite seleccionar una opción vacía";
+            readonly selectSearchEnabled_tip: "Habilita búsqueda entre opciones";
+            readonly selectNullable: "Permitir opción vacía";
+            readonly selectSearchEnabled: "Habilitar búsqueda";
+        };
+        readonly options_editor: {
+            readonly title: "Opciones";
+            readonly code_label: "Código";
+            readonly name_label: "Etiqueta";
+            readonly code_placeholder: "ID";
+            readonly display_name_placeholder: "Nombre para mostrar";
+            readonly add_option: "Nueva opción";
+        };
+        readonly field_editor: {
+            readonly dependency_title: "Dependencia";
+            readonly dependency_description: "Este campo solo se muestra si se cumple la regla:";
+            readonly add_relation: "Agregar relación";
+            readonly remove_relation: "Eliminar relación";
+            readonly basic: "Básico";
+            readonly parent: "Padre";
+            readonly operator: "Operador";
+            readonly value: "Valor";
+            readonly expected_value: "Valor esperado";
+            readonly style: "Estilo";
+            readonly advanced: "Avanzado";
+            readonly duplicate: "Duplicar";
+            readonly delete: "Eliminar";
+            readonly show_advanced: "Mostrar avanzado";
+            readonly hide_advanced: "Ocultar avanzado";
+        };
+        readonly validation: {
+            readonly duplicate_identifier: "El identificador \"{{identifier}}\" se está usando más de una vez.";
+            readonly duplicate_identifier_title: "Error de validación";
+        };
+    };
+    readonly validation: {
+        readonly invalid: "{{field}} es invalido.";
+        readonly required: "{{field}} es obligatorio.";
+        readonly min: "{{field}} debe ser mayor o igual a {{min}}.";
+        readonly max: "{{field}} debe ser menor o igual a {{max}}.";
+        readonly minlength: "{{field}} debe tener al menos {{requiredLength}} caracteres.";
+        readonly maxlength: "{{field}} no puede superar {{requiredLength}} caracteres.";
+        readonly pattern: "{{field}} no tiene el formato correcto.";
+    };
+    readonly clipboard: {
+        readonly copy_error: "No se pudo copiar:";
+    };
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "ui-core-abv",
+  "version": "0.0.0-watch+1777329058082",
+  "peerDependencies": {
+    "@angular/common": ">=19.2.0 <21.0.0",
+    "@angular/core": ">=19.2.0  <21.0.0",
+    "@angular/cdk": ">=19.2.19  <21.0.0",
+    "@angular/animations": ">=19.2.14  <21.0.0",
+    "remixicon": "^4.6.0",
+    "xlsx": "^0.18.5"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ui-core-abv.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ui-core-abv.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,59 @@
+export * from './lib/components/button/button.component';
+export * from './lib/components/inputs/checkbox/checkbox.component';
+export * from './lib/components/inputs/toggle-button/toggle-button.component';
+export * from './lib/components/dynamic-form/form-wrapper/form-wrapper.component';
+export * from './lib/components/dynamic-form/steps-form/steps-form.component';
+export * from './lib/components/dynamic-form/steps-form/step-tabs/step-tabs.component';
+export * from './lib/components/inputs/input/input.component';
+export * from './lib/components/inputs/date-picker/date-picker.component';
+export * from './lib/components/inputs/multy-searcher/multy-searcher.component';
+export * from './lib/components/inputs/uic-searcher/uic-searcher.component';
+export * from './lib/components/inputs/file-input/file-input.component';
+export * from './lib/components/inputs/select/select.component';
+export * from './lib/components/inputs/phone-input/phone-input.component';
+export * from './lib/components/inputs/multy-select/multy-select.component';
+export * from './lib/components/inputs/ui-radio/ui-radio.component';
+export * from './lib/components/dropdown-container/dropdown-container.component';
+export * from './lib/components/dropdown-container/dropdown-close.directive';
+export * from './lib/components/inputs/time-picker/time-picker.component';
+export * from './lib/components/table/table.component';
+export * from './lib/components/short-table/short-table.component';
+export * from './lib/components/table/table.models';
+export * from './lib/components/skeleton-loader/skeleton-loader.component';
+export * from './lib/components/skeleton-cards/skeleton-cards.component';
+export * from './lib/components/push-alerts/alert-container/alert-container.component';
+export * from './lib/components/inputs/ui-slider/ui-slider.component';
+export * from './lib/components/uic-action-button/uic-action-button.component';
+export * from './lib/components/signature-pad/signature-pad.component';
+export * from './lib/components/dropdown-container/dropdown-container.component';
+export * from './lib/components/kpi-card/kpi-card.component';
+export * from './lib/components/uic-portlet-card/uic-portlet-card.component';
+export * from './lib/components/tabs-button/tabs-button.component';
+export * from './lib/components/work-panel/work-panel.component';
+export * from './lib/components/overlay-card/overlay-card.component';
+export * from './lib/components/accordion/accordion.component';
+export * from './lib/components/pool-options/pool-options.component';
+export * from './lib/components/tree-admin/tree-admin.component';
+export * from './lib/components/excel-table/excel-table.component';
+export * from './lib/components/editable-table/editable-table.component';
+export * from './lib/components/tag-selector/tag-selector.component';
+export * from './lib/components/progress-bar/progress-bar.component';
+export * from './lib/animations/animatios.index';
+export * from './lib/components/dynamic-form/form.models';
+export * from './lib/components/user-formbuilder/user-formbuilder.component';
+export * from './lib/components/rule-builder/rule-builder.component';
+export * from './lib/services/modal.service';
+export * from './lib/services/modaRef';
+export * from './lib/services/modal.constant';
+export * from './lib/services/tiny-alert.service';
+export * from './lib/components/tiny-alert/tiny-alert.model';
+export * from './lib/services/push-alert.service';
+export * from './lib/services/translate.service';
+export * from './lib/pipes/name-inits.pipe';
+export * from './lib/pipes/first-capital.pipe';
+export * from './lib/pipes/translate.pipe';
+export * from './lib/directives/tool-tip.directive';
+export * from './lib/directives/textarea-autoresize.directive';
+export * from './lib/directives/textarea-autoresize-min-rows.directive';
+export * from './lib/directives/textarea-autoresize-max-rows.directive';
+export * from './lib/helpers';

package/src/lib/styles/_default_colors.scss

@@ -0,0 +1,101 @@
+$grey: (
+  25:  #fdfdfd,
+  50:  #fafafa,
+  100: #f5f5f5,
+  200: #e9eaeb,
+  300: #d5d7da,
+  400: #a4a7ae,
+  500: #717680,
+  600: #535862,
+  700: #414651,
+  800: #252b37,
+  900: #181d27,
+  950: #0a0d12
+) !default;
+
+// COLORES PRINCIPALES
+$primary: (
+  100: #efe9f2,
+  200: #e8dfec,
+  300: #cfbcd7,
+  400: #63277d,
+  500: #592371,
+  600: #4f1f64,
+  700: #4a1d5e,
+  800: #3b174b,
+  900: #2d1238,
+  950: #230e2c
+) !default;
+
+$secondary: (
+  100: #f3eaf9,
+  200: #ece0f6,
+  300: #d8bfed,
+  400: #8230c4,
+  500: #752bb0,
+  600: #68269d,
+  700: #622493,
+  800: #4e1d76,
+  900: #3a1658,
+  950: #2e1145
+);
+
+$green: (
+  25:  #f0fef9,
+  50:  #dcfce3,
+  100: #bbf7d0,
+  200: #86efac,
+  300: #4ade80,
+  400: #22c55e,
+  500: #16a34a,
+  600: #15803d,
+  700: #166534,
+  800: #14532d,
+  900: #1a2e21,
+  950: #052e16
+) !default;
+
+$yellow: (
+  25:  #fff9f5,
+  50:  #fffaeb,
+  100: #fef0c7,
+  200: #fedf89,
+  300: #fec84b,
+  400: #fdb022,
+  500: #f79009,
+  600: #dc6803,
+  700: #b54708,
+  800: #93370d,
+  900: #792e0d,
+  950: #551d09
+) !default;
+
+$red: (
+  25:  #fffbfa,
+  50:  #fef3f2,
+  100: #fee4e2,
+  200: #fecdca,
+  300: #fda29b,
+  400: #f97066,
+  500: #f04438,
+  600: #d92d20,
+  700: #b42318,
+  800: #912018,
+  900: #7a271a,
+  950: #55160c
+)!default;
+
+$blue: (
+  50:  #ffffff,
+  100: #e4eefb,
+  200: #c9ddf7,
+  300: #aeccf4,
+  400: #93bbf0,
+  500: #78aaec,
+  600: #6193d5,
+  700: #4e76aa,
+  800: #3a5880,
+  900: #273b55,
+  950: #131d2b
+)!default;
+

package/src/lib/styles/_mixins.scss

@@ -0,0 +1,20 @@
+$breakpoint-md: 480px ;
+$breakpoint-tablet: 768px ;
+
+@mixin mobile {
+  @media (max-width: #{$breakpoint-md - 1}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-tablet - 1}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}

package/src/lib/styles/_tokens.scss

@@ -0,0 +1,73 @@
+
+@use './default_colors' as *;
+@use './mixins' as mx;
+:root {
+  // Grey palette
+  @each $shade, $color in $grey {
+    --grey-#{$shade}: #{$color};
+  }
+  
+  // Primary palette
+  @each $shade, $color in $primary {
+    --primary-#{$shade}: #{$color};
+  }
+  
+  // Secondary palette
+  @each $shade, $color in $secondary {
+    --secondary-#{$shade}: #{$color};
+  }
+  
+  // BLUE palette
+  @each $shade, $color in $blue {
+    --blue-#{$shade}: #{$color};
+  }
+  
+  // RED palette
+  @each $shade, $color in $red {
+    --red-#{$shade}: #{$color};
+  }
+  
+  // GREEN palette
+  @each $shade, $color in $green {
+    --green-#{$shade}: #{$color};
+  }
+  
+  // YELLOW palette
+  @each $shade, $color in $yellow {
+    --yellow-#{$shade}: #{$color};
+  }
+  --white: #fff;
+  --secondary-alpha: #8130c464;
+
+  --border-radius-sm: 4px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 16px;
+
+  --button-radius: 8px;
+  --input-radius: 8px;
+  
+  --border-width-thin: 1px;
+  --border-width-thick: 2px;
+  
+  // CONTEXTUAL
+  --table-header-background: var(--grey-200);
+  --table-header-color: var(--grey-900);
+  --table-border-color: var(--grey-300);
+  --table-hover: var(--grey-50);
+
+  --button-padding : 4px;
+  
+  --table-spacing-ref: 10px;
+  --design-size-ref:10px; 
+  --form-ref: 10px;
+  --input-label-space: calc( var(--form-ref) * .8 );
+
+  --disabled-color: var(--grey-700);
+  --disabled-color-placeholder: var(--grey-300);
+  --disabled-background: var(--grey-200);
+
+  --bp-mobile: 480px;
+  
+  --bp-tablet: 768px;
+
+}

package/src/lib/styles/_variables.scss

@@ -0,0 +1,51 @@
+$focus-shadow: 0 0 0 3px var(--secondary-alpha);
+
+// ==========  TYPOGRAPHY ==========
+$font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+$font-size-ty:0.625rem;  // 10px
+$font-size-xs:0.75rem;   // 12px
+$font-size-s: 0.875rem;  // 14px
+$font-size-m: 1rem;      // 16px
+$font-size-ml:1.125rem;  // 18px
+$font-size-l: 1.25rem;   // 20px
+$font-size-xl:1.625rem;  // 26px
+
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 700;
+
+// ========== SPACING ==========
+$spacing-xxs: 0.25rem; // 4px
+$spacing-xs: 0.5rem;   // 8px
+$spacing-s: 0.75rem;  // 12px
+$spacing-m: 1rem;     // 16px
+$spacing-l: 1.5rem;   // 24px
+$spacing-xl: 2rem;     // 32px
+$spacing-xxl: 3rem;    // 48px
+
+// ========== BORDERS ==========
+$border-radius-xs: 3px;
+$border-radius-s: 6px;
+$border-radius-m: 8px;
+$border-radius-l: 12px;
+$border-radius-xl: 18px;
+
+$border-width-thin: 1px;
+$border-width-thick: 2px;
+
+// ========== 🌑 SHADOWS ==========
+$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+$shadow-md: 0 2px 6px rgba(0, 0, 0, 0.15);
+$shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2);
+$shadow-overlay: 0 1px 1px 0 #00000020, 0 2px 5px 0 #00000050;
+
+$skeleton-gradient: linear-gradient(
+  90deg,
+  var(--grey-100) 25%,
+  var(--grey-200) 50%,
+  var(--grey-100) 75%
+);
+
+$input-heigth: calc( 4 * var(--form-ref));
+$input-fontsize: max(calc( var(--form-ref) + 4px ) , 14px) ;
+$input-radius: var(--input-radius);