@arquimedes.co/eureka-forms 3.0.58 → 3.0.59-test

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -6,6 +6,7 @@ import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
 import { useContext } from 'react';
 import DeleteIcon from '../../../../../Icons/DeleteIcon';
+import { pillSurfaceStyle } from '../../../../../Utils/SurfaceStyle';
 function IncidentComponent({ step, incident, handleDelete, ...others }) {
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
@@ -16,7 +17,7 @@ function IncidentComponent({ step, incident, handleDelete, ...others }) {
     if (incident.deleted) {
         return _jsx("div", {});
     }
-    return (_jsx("div", { className: widthStats.isMobile || form.size.blockNum < 3 ? styles.mobileContainer : styles.container, children: _jsxs("div", { className: styles.contentContainer, style: {
+    return (_jsx("div", { className: widthStats.isMobile || form.size.blockNum < 3 ? styles.mobileContainer : styles.container, style: pillSurfaceStyle(formStyle), children: _jsxs("div", { className: styles.contentContainer, style: {
                 width: (form.size.blockSize + form.size.spacingSize) * (form.size.blockNum - 1),
             }, children: [_jsxs("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: [step.unitLabel + ' ' + incident.num, ":"] }), _jsx("div", { className: !others.editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                         if (others.editable && !postview) {

package/dist/FormSteps/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.module.css

@@ -1,7 +1,6 @@
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    border: 1px solid;
     width: fit-content;
     border-radius: 20px;
     margin-bottom: 10px;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js

@@ -10,6 +10,7 @@ import DeleteIcon from '../../../../../Icons/DeleteIcon';
 import { MobileStepper, styled } from '@mui/material';
 import ArrowRightIcon from '../../../../../Icons/ArrowRightIcon';
 import ArrowLeftIcon from '../../../../../Icons/ArrowLeftIcon';
+import { pillSurfaceStyle } from '../../../../../Utils/SurfaceStyle';
 function PagedMapperElement({ step, num, loading, element, children, editable, onChange, value, handleDelete, customElementModifiers, customElementRender, }) {
     const deletable = step.deletable ?? true;
     const { size } = useContext(FormContext);
@@ -77,7 +78,7 @@ function PagedMapperElement({ step, num, loading, element, children, editable, o
     const { calcName } = customElementModifiers ?? {};
     const name = calcName ? calcName(element) : step.unitLabel ? step.unitLabel + ' ' + (num + 1) : '';
     const renderElement = (renderElementButtons) => {
-        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
+        return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, style: pillSurfaceStyle(formStyle), ref: containerRef, children: _jsxs("div", { className: styles.contentContainer, style: {
                     width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),
                 }, children: [name && (_jsx("div", { className: styles.titleLbl, style: { color: formStyle.textColor }, children: loading ? 'Cargando...' : name + ':' })), _jsxs("div", { className: styles.btnsContainer, children: [renderElementButtons?.(element), (deletable || !element.isOriginal) && (_jsx("div", { className: !editable || postview ? styles.disabledDeleteBtn : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: () => {
                                     if (editable && !postview) {

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.module.css

@@ -4,8 +4,7 @@
 
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    border: 1px solid;
     width: fit-content;
     border-radius: 20px;
     margin-bottom: 10px;

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.js

@@ -4,6 +4,7 @@ import styles from './PillMapperElement.module.css';
 import FormContext from '../../../../../Contexts/FormContext';
 import { useAppSelector } from '../../../../../hooks';
 import DeleteIcon from '../../../../../Icons/DeleteIcon';
+import { pillSurfaceStyle } from '../../../../../Utils/SurfaceStyle';
 function PillMapperElement({ step, num, loading, element, children, editable, handleDelete, customElementModifiers, customElementRender, }) {
     const deletable = step.deletable ?? true;
     const { size } = useContext(FormContext);
@@ -16,6 +17,7 @@ function PillMapperElement({ step, num, loading, element, children, editable, ha
     const isDeleted = customElementModifiers?.isDeleted?.(element) ?? false;
     const renderElement = (renderElementButtons) => {
         return (_jsx("div", { className: widthStats.isMobile ? styles.mobileContainer : styles.container, style: {
+                ...pillSurfaceStyle(formStyle),
                 opacity: isDeleted ? 0.5 : 1,
             }, children: _jsxs("div", { className: styles.contentContainer, style: {
                     width: (size.blockSize + size.spacingSize) * (step.style?.size ?? size.blockNum - 1),

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.module.css

@@ -4,8 +4,7 @@
 
 .container,
 .mobileContainer {
-    background-color: #f0f0f0;
-    border: 1px solid #d6d6d6;
+    border: 1px solid;
     width: fit-content;
     border-radius: 20px;
     margin-bottom: 10px;

package/dist/Utils/SurfaceStyle.d.ts

@@ -0,0 +1,11 @@
+import { FormStyle } from '../@Types/Form';
+/**
+ * Inline surface for "pill" containers (mapper elements, incidents) that sit on a step.
+ * The tint and border are mixed from the form's own colors so they work on any form style,
+ * including the admin's dark scheme, instead of a fixed light grey.
+ * On the default light style this resolves to roughly #f0f0f0 / #d6d6d6, the previous fixed values.
+ */
+export declare function pillSurfaceStyle(formStyle: FormStyle): {
+    backgroundColor: string;
+    borderColor: string;
+};

package/dist/Utils/SurfaceStyle.js

@@ -0,0 +1,14 @@
+/**
+ * Inline surface for "pill" containers (mapper elements, incidents) that sit on a step.
+ * The tint and border are mixed from the form's own colors so they work on any form style,
+ * including the admin's dark scheme, instead of a fixed light grey.
+ * On the default light style this resolves to roughly #f0f0f0 / #d6d6d6, the previous fixed values.
+ */
+export function pillSurfaceStyle(formStyle) {
+    const base = formStyle.stepBackgroundColor;
+    const text = formStyle.textColor;
+    return {
+        backgroundColor: `color-mix(in srgb, ${text} 7%, ${base})`,
+        borderColor: `color-mix(in srgb, ${text} 20%, ${base})`,
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version": "3.0.58",
+  "version":"3.0.59-test",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",