@beweco/aurora-ui 0.6.75 → 0.6.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/css/styles.css +1 -1
- package/dist/index.cjs.js +170 -2
- package/dist/index.esm.js +166 -3
- package/dist/types/components/button/Button.d.ts +1 -0
- package/dist/types/components/button/Button.d.ts.map +1 -1
- package/dist/types/components/button/Button.types.d.ts +15 -0
- package/dist/types/components/button/Button.types.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/providers/theme/index.d.ts +1 -0
- package/dist/types/providers/theme/index.d.ts.map +1 -1
- package/dist/types/providers/theme/linda-tones.d.ts +53 -0
- package/dist/types/providers/theme/linda-tones.d.ts.map +1 -0
- package/dist/types/providers/theme/useThemeManager.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -284,6 +284,10 @@ exports.HolidayType = void 0;
|
|
|
284
284
|
HolidayType["DateRange"] = "dateRange";
|
|
285
285
|
})(exports.HolidayType || (exports.HolidayType = {}));
|
|
286
286
|
|
|
287
|
+
var CLASE_AURA = {
|
|
288
|
+
ring: "linda-aura-ring",
|
|
289
|
+
surface: "linda-aura",
|
|
290
|
+
};
|
|
287
291
|
/**
|
|
288
292
|
* Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
|
|
289
293
|
*
|
|
@@ -294,10 +298,24 @@ exports.HolidayType = void 0;
|
|
|
294
298
|
* - isLoading: On, Off
|
|
295
299
|
* - Radius: md (por defecto)
|
|
296
300
|
* - isIconOnly: True, False
|
|
301
|
+
* - ai: aura de Linda para las acciones que hace la IA (ver `Button.types.ts`)
|
|
297
302
|
*/
|
|
298
303
|
var Button = function (_a) {
|
|
299
|
-
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
|
|
300
|
-
|
|
304
|
+
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, ai = _a.ai, className = _a.className, children = _a.children, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly", "ai", "className", "children"]);
|
|
305
|
+
/*
|
|
306
|
+
* El contenido se envuelve para poder subirlo por encima del aura.
|
|
307
|
+
*
|
|
308
|
+
* Y tiene que ser un elemento: `<Button>Crear campaña</Button>` pasa un NODO DE
|
|
309
|
+
* TEXTO, que no es posicionable, así que ningún selector puede sacarlo del fondo del
|
|
310
|
+
* apilado —el aura, que sí está posicionada, le pasaría por encima—. Con `ring` daría
|
|
311
|
+
* igual porque esa capa es solo el canto; con `surface` el texto se leería a través
|
|
312
|
+
* del degradado.
|
|
313
|
+
*/
|
|
314
|
+
var contenido = ai ? (jsxRuntime.jsx("span", { className: "linda-aura-content", children: children })) : (children);
|
|
315
|
+
var clases = [ai ? CLASE_AURA[ai] : "", className]
|
|
316
|
+
.filter(Boolean)
|
|
317
|
+
.join(" ");
|
|
318
|
+
return (jsxRuntime.jsx(react.Button, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly, className: clases || undefined, children: contenido })));
|
|
301
319
|
};
|
|
302
320
|
|
|
303
321
|
var DatePicker = function (_a) {
|
|
@@ -9644,6 +9662,127 @@ function removeCustomPrimaryColor() {
|
|
|
9644
9662
|
}
|
|
9645
9663
|
}
|
|
9646
9664
|
|
|
9665
|
+
/**
|
|
9666
|
+
* Los tres tonos del aura de Linda, derivados del `primary` de la agencia.
|
|
9667
|
+
*
|
|
9668
|
+
* Linda no tiene color propio: es el `primary` que el negocio eligió en el onboarding,
|
|
9669
|
+
* y por eso aquí no hay ni un color escrito. Lo único que se fija es CUÁNTO se gira ese
|
|
9670
|
+
* tono y en qué banda de luz se pinta.
|
|
9671
|
+
*/
|
|
9672
|
+
/**
|
|
9673
|
+
* Grados que se gira el `primary` para cada tono, en el orden en que se pintan.
|
|
9674
|
+
*
|
|
9675
|
+
* Son muchos grados a propósito. La gracia del aura es que haya MÁS DE UN COLOR: con
|
|
9676
|
+
* un giro discreto —del orden de 18°, el que usa un degradado de profundidad— salen
|
|
9677
|
+
* tres versiones del mismo tono y el resultado se lee como un plano. A ±55° el salto
|
|
9678
|
+
* se ve como otro color y sigue dentro de la familia del `primary`, que es lo que
|
|
9679
|
+
* permite que esto funcione con la agencia número siete sin tocar nada.
|
|
9680
|
+
*
|
|
9681
|
+
* El tono del medio va casi sin girar: es el que ancla el conjunto al color de la
|
|
9682
|
+
* agencia, para que el aura se lea como suya y no como una decoración pegada encima.
|
|
9683
|
+
*/
|
|
9684
|
+
var GIROS = [-56, 8, 54];
|
|
9685
|
+
/**
|
|
9686
|
+
* Banda de luz en la que se pintan los tres tonos, en porcentaje HSL.
|
|
9687
|
+
*
|
|
9688
|
+
* Los tonos NO heredan la luz del `primary`, y esto es lo que más se nota: un primary
|
|
9689
|
+
* oscuro y poco saturado sobre una superficie clara se lee como una mancha gris —sucia,
|
|
9690
|
+
* no como color—, y uno casi blanco desaparece contra el fondo. Se llevan al paso medio
|
|
9691
|
+
* de la escala, que es el que funciona en los dos casos.
|
|
9692
|
+
*/
|
|
9693
|
+
var BANDA_LUZ = { min: 52, max: 72 };
|
|
9694
|
+
/**
|
|
9695
|
+
* Banda de saturación de los tres tonos, en porcentaje HSL.
|
|
9696
|
+
*
|
|
9697
|
+
* El techo es lo que evita que el aura grite. A plena saturación los tonos dejan de ser
|
|
9698
|
+
* ambiente y pasan a ser tres focos de color encima de un control de 40 pt: bonito en
|
|
9699
|
+
* una captura, insoportable en una barra que se mira todo el día.
|
|
9700
|
+
*
|
|
9701
|
+
* ⚠️ **Y hay una razón que no es estética.** Girar el tono puede caer en un rojo vivo:
|
|
9702
|
+
* un `primary` amarillo —51°— girado −56° aterriza en 355°, que a saturación 100 se lee
|
|
9703
|
+
* como un estado de error alrededor de un botón que no ha fallado. Visto al renderizarlo,
|
|
9704
|
+
* no razonándolo. Bajado a 65 el mismo tono es un rosa apagado y vuelve a leerse como lo
|
|
9705
|
+
* que es: decoración.
|
|
9706
|
+
*
|
|
9707
|
+
* El suelo existe por lo contrario: un `primary` casi gris da tres tonos que no se
|
|
9708
|
+
* distinguen entre sí, y entonces no hay degradado que ver —el aura se lee como una
|
|
9709
|
+
* mancha plana—.
|
|
9710
|
+
*/
|
|
9711
|
+
var BANDA_SATURACION = { min: 35, max: 65 };
|
|
9712
|
+
var VUELTA = 360;
|
|
9713
|
+
/** `H S% L%` — el formato exacto en el que HeroUI guarda sus variables de color. */
|
|
9714
|
+
var TRIPLETE = /^\s*(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*$/;
|
|
9715
|
+
/**
|
|
9716
|
+
* Lee el triplete que HeroUI deja en una variable de color.
|
|
9717
|
+
*
|
|
9718
|
+
* Devuelve `null` en vez de lanzar: esto corre en un efecto de tema y el valor puede
|
|
9719
|
+
* no estar todavía —la clase del tema aún no está en el `<html>`, o el consumidor no
|
|
9720
|
+
* cargó la hoja de estilos—. Un aura que no se pinta es un problema menor; una
|
|
9721
|
+
* excepción que tumba el provider de tema, no.
|
|
9722
|
+
*/
|
|
9723
|
+
function parseHslTriplet(value) {
|
|
9724
|
+
var encontrado = TRIPLETE.exec(value);
|
|
9725
|
+
if (!encontrado) {
|
|
9726
|
+
return null;
|
|
9727
|
+
}
|
|
9728
|
+
var h = encontrado[1], s = encontrado[2], l = encontrado[3];
|
|
9729
|
+
return { h: Number(h), s: Number(s), l: Number(l) };
|
|
9730
|
+
}
|
|
9731
|
+
/** Deja un ángulo dentro de `[0, 360)`, venga de donde venga. */
|
|
9732
|
+
function normalizarTono(grados) {
|
|
9733
|
+
return ((grados % VUELTA) + VUELTA) % VUELTA;
|
|
9734
|
+
}
|
|
9735
|
+
function acotar(valor, min, max) {
|
|
9736
|
+
return Math.min(Math.max(valor, min), max);
|
|
9737
|
+
}
|
|
9738
|
+
/**
|
|
9739
|
+
* Los tres tonos del aura, listos para escribirse en una variable CSS.
|
|
9740
|
+
*
|
|
9741
|
+
* Se redondean a entero: es un degradado decorativo, y las décimas de grado solo
|
|
9742
|
+
* alargan la hoja de estilos.
|
|
9743
|
+
*/
|
|
9744
|
+
function deriveLindaTones(primary) {
|
|
9745
|
+
var luz = Math.round(acotar(primary.l, BANDA_LUZ.min, BANDA_LUZ.max));
|
|
9746
|
+
var saturacion = Math.round(acotar(primary.s, BANDA_SATURACION.min, BANDA_SATURACION.max));
|
|
9747
|
+
var tonos = GIROS.map(function (giro) {
|
|
9748
|
+
return "".concat(Math.round(normalizarTono(primary.h + giro)), " ").concat(saturacion, "% ").concat(luz, "%");
|
|
9749
|
+
});
|
|
9750
|
+
return tonos;
|
|
9751
|
+
}
|
|
9752
|
+
/** Las variables que se escriben en el `<html>`, en el orden en que se pintan. */
|
|
9753
|
+
var LINDA_TONE_PROPERTIES = [
|
|
9754
|
+
"--linda-1",
|
|
9755
|
+
"--linda-2",
|
|
9756
|
+
"--linda-3",
|
|
9757
|
+
];
|
|
9758
|
+
/**
|
|
9759
|
+
* Escribe los tres tonos del aura a partir del valor de `--heroui-primary`.
|
|
9760
|
+
*
|
|
9761
|
+
* Si el primary no se puede leer, **borra los que hubiera** y devuelve `false`. Es lo
|
|
9762
|
+
* contrario de dejarlos: unos tonos viejos son de otro tema, y un aura del color
|
|
9763
|
+
* anterior es peor que un aura que no se pinta —la CSS del efecto ya está escrita para
|
|
9764
|
+
* desaparecer sin sus variables—.
|
|
9765
|
+
*/
|
|
9766
|
+
function applyLindaTones(style, primaryValue) {
|
|
9767
|
+
var primary = parseHslTriplet(primaryValue);
|
|
9768
|
+
if (!primary) {
|
|
9769
|
+
removeLindaTones(style);
|
|
9770
|
+
return false;
|
|
9771
|
+
}
|
|
9772
|
+
var tonos = deriveLindaTones(primary);
|
|
9773
|
+
LINDA_TONE_PROPERTIES.forEach(function (propiedad, indice) {
|
|
9774
|
+
style.setProperty(propiedad, tonos[indice]);
|
|
9775
|
+
});
|
|
9776
|
+
return true;
|
|
9777
|
+
}
|
|
9778
|
+
/** Quita los tres tonos del aura. */
|
|
9779
|
+
function removeLindaTones(style) {
|
|
9780
|
+
for (var _i = 0, LINDA_TONE_PROPERTIES_1 = LINDA_TONE_PROPERTIES; _i < LINDA_TONE_PROPERTIES_1.length; _i++) {
|
|
9781
|
+
var propiedad = LINDA_TONE_PROPERTIES_1[_i];
|
|
9782
|
+
style.removeProperty(propiedad);
|
|
9783
|
+
}
|
|
9784
|
+
}
|
|
9785
|
+
|
|
9647
9786
|
/**
|
|
9648
9787
|
* Custom hook to manage the theme state and side effects.
|
|
9649
9788
|
* Supports both named ThemeColor values and arbitrary hex colors.
|
|
@@ -9689,6 +9828,30 @@ var useThemeManager = function () {
|
|
|
9689
9828
|
removeCustomPrimaryColor();
|
|
9690
9829
|
}
|
|
9691
9830
|
}, [customHex, mode]);
|
|
9831
|
+
/*
|
|
9832
|
+
* Los tres tonos del aura de Linda, derivados del primary que acaba de quedar fijado.
|
|
9833
|
+
*
|
|
9834
|
+
* Va DESPUÉS de los dos efectos de arriba y depende de lo mismo que ellos, que es lo
|
|
9835
|
+
* que garantiza que lea el primary definitivo: React ejecuta los efectos en orden de
|
|
9836
|
+
* declaración, así que aquí la clase del tema ya está en el `<html>` y el hex a medida
|
|
9837
|
+
* ya está escrito o retirado.
|
|
9838
|
+
*
|
|
9839
|
+
* Se lee del estilo COMPUTADO y no de `customHex` a propósito: el primary llega por
|
|
9840
|
+
* dos caminos —el hex del negocio o la clase de una de las familias de tema— y el
|
|
9841
|
+
* computado es el único sitio donde los dos han convergido. Derivarlo solo de
|
|
9842
|
+
* `customHex` dejaría sin aura a toda agencia que use una familia tal cual.
|
|
9843
|
+
*/
|
|
9844
|
+
/*
|
|
9845
|
+
* `customHex` y `rawTheme` están en la lista aunque el cuerpo no los lea: son la señal
|
|
9846
|
+
* de que el `<html>` acaba de cambiar. La entrada real de este efecto es el estilo
|
|
9847
|
+
* computado, que la regla no puede ver, y sin ellos el aura se quedaría con los tonos
|
|
9848
|
+
* del tema anterior.
|
|
9849
|
+
*/
|
|
9850
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: ver el comentario de arriba
|
|
9851
|
+
React.useEffect(function () {
|
|
9852
|
+
var html = document.documentElement;
|
|
9853
|
+
applyLindaTones(html.style, getComputedStyle(html).getPropertyValue("--heroui-primary"));
|
|
9854
|
+
}, [customHex, rawTheme]);
|
|
9692
9855
|
var setMode = React.useCallback(function (newMode) {
|
|
9693
9856
|
var effectiveMode = newMode === "dark" ? "light" : newMode;
|
|
9694
9857
|
var newTheme = color === "blue" ? effectiveMode : "".concat(color, "-").concat(effectiveMode);
|
|
@@ -9861,6 +10024,7 @@ exports.InputPassword = InputPassword;
|
|
|
9861
10024
|
exports.Kanban = Kanban;
|
|
9862
10025
|
exports.KanbanCard = KanbanCard;
|
|
9863
10026
|
exports.KanbanColumn = KanbanColumn;
|
|
10027
|
+
exports.LINDA_TONE_PROPERTIES = LINDA_TONE_PROPERTIES;
|
|
9864
10028
|
exports.LindaIcon = LindaIcon;
|
|
9865
10029
|
exports.MenuClaw = MenuClaw;
|
|
9866
10030
|
exports.MenuComponent = MenuComponent;
|
|
@@ -9911,6 +10075,7 @@ exports.Wizard = Wizard;
|
|
|
9911
10075
|
exports.WizardNavigation = WizardNavigation;
|
|
9912
10076
|
exports.WizardSidebar = WizardSidebar;
|
|
9913
10077
|
exports.applyCustomPrimaryColor = applyCustomPrimaryColor;
|
|
10078
|
+
exports.applyLindaTones = applyLindaTones;
|
|
9914
10079
|
exports.computeBars = computeBars;
|
|
9915
10080
|
exports.computeMax = computeMax;
|
|
9916
10081
|
exports.computeSlices = computeSlices;
|
|
@@ -9920,6 +10085,7 @@ exports.createCurrencyFormatter = createCurrencyFormatter;
|
|
|
9920
10085
|
exports.defaultCountries = uniqueCountries;
|
|
9921
10086
|
exports.defaultCurrencyOptions = defaultCurrencyOptions;
|
|
9922
10087
|
exports.defaultTranslations = defaultTranslations$5;
|
|
10088
|
+
exports.deriveLindaTones = deriveLindaTones;
|
|
9923
10089
|
exports.dismissControlProps = dismissControlProps;
|
|
9924
10090
|
exports.forceLightOnlyThemeBeforeReact = forceLightOnlyThemeBeforeReact;
|
|
9925
10091
|
exports.formatAuroraThemeTooltip = formatAuroraThemeTooltip;
|
|
@@ -9937,7 +10103,9 @@ exports.isGroupState = isGroupState;
|
|
|
9937
10103
|
exports.isHexColor = isHexColor;
|
|
9938
10104
|
exports.isRankedBarListEmpty = isRankedBarListEmpty;
|
|
9939
10105
|
exports.isSegmentationGroup = isSegmentationGroup;
|
|
10106
|
+
exports.parseHslTriplet = parseHslTriplet;
|
|
9940
10107
|
exports.removeCustomPrimaryColor = removeCustomPrimaryColor;
|
|
10108
|
+
exports.removeLindaTones = removeLindaTones;
|
|
9941
10109
|
exports.shouldClosePopoverOnInteractOutside = shouldClosePopoverOnInteractOutside;
|
|
9942
10110
|
exports.sizeMap = sizeMap;
|
|
9943
10111
|
exports.themeColors = themeColors;
|
package/dist/index.esm.js
CHANGED
|
@@ -285,6 +285,10 @@ var HolidayType;
|
|
|
285
285
|
HolidayType["DateRange"] = "dateRange";
|
|
286
286
|
})(HolidayType || (HolidayType = {}));
|
|
287
287
|
|
|
288
|
+
var CLASE_AURA = {
|
|
289
|
+
ring: "linda-aura-ring",
|
|
290
|
+
surface: "linda-aura",
|
|
291
|
+
};
|
|
288
292
|
/**
|
|
289
293
|
* Botón genérico basado en HeroUI siguiendo las reglas de diseño BeweOS.
|
|
290
294
|
*
|
|
@@ -295,10 +299,24 @@ var HolidayType;
|
|
|
295
299
|
* - isLoading: On, Off
|
|
296
300
|
* - Radius: md (por defecto)
|
|
297
301
|
* - isIconOnly: True, False
|
|
302
|
+
* - ai: aura de Linda para las acciones que hace la IA (ver `Button.types.ts`)
|
|
298
303
|
*/
|
|
299
304
|
var Button = function (_a) {
|
|
300
|
-
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly"]);
|
|
301
|
-
|
|
305
|
+
var _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, _e = _a.radius, radius = _e === void 0 ? "sm" : _e, startContent = _a.startContent, endContent = _a.endContent, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, _g = _a.isIconOnly, isIconOnly = _g === void 0 ? false : _g, ai = _a.ai, className = _a.className, children = _a.children, props = __rest(_a, ["color", "size", "variant", "radius", "startContent", "endContent", "isLoading", "isIconOnly", "ai", "className", "children"]);
|
|
306
|
+
/*
|
|
307
|
+
* El contenido se envuelve para poder subirlo por encima del aura.
|
|
308
|
+
*
|
|
309
|
+
* Y tiene que ser un elemento: `<Button>Crear campaña</Button>` pasa un NODO DE
|
|
310
|
+
* TEXTO, que no es posicionable, así que ningún selector puede sacarlo del fondo del
|
|
311
|
+
* apilado —el aura, que sí está posicionada, le pasaría por encima—. Con `ring` daría
|
|
312
|
+
* igual porque esa capa es solo el canto; con `surface` el texto se leería a través
|
|
313
|
+
* del degradado.
|
|
314
|
+
*/
|
|
315
|
+
var contenido = ai ? (jsx("span", { className: "linda-aura-content", children: children })) : (children);
|
|
316
|
+
var clases = [ai ? CLASE_AURA[ai] : "", className]
|
|
317
|
+
.filter(Boolean)
|
|
318
|
+
.join(" ");
|
|
319
|
+
return (jsx(Button$1, __assign({}, props, { color: color, size: size, variant: variant, radius: radius, startContent: startContent, endContent: endContent, isLoading: isLoading, isIconOnly: isIconOnly, className: clases || undefined, children: contenido })));
|
|
302
320
|
};
|
|
303
321
|
|
|
304
322
|
var DatePicker = function (_a) {
|
|
@@ -9645,6 +9663,127 @@ function removeCustomPrimaryColor() {
|
|
|
9645
9663
|
}
|
|
9646
9664
|
}
|
|
9647
9665
|
|
|
9666
|
+
/**
|
|
9667
|
+
* Los tres tonos del aura de Linda, derivados del `primary` de la agencia.
|
|
9668
|
+
*
|
|
9669
|
+
* Linda no tiene color propio: es el `primary` que el negocio eligió en el onboarding,
|
|
9670
|
+
* y por eso aquí no hay ni un color escrito. Lo único que se fija es CUÁNTO se gira ese
|
|
9671
|
+
* tono y en qué banda de luz se pinta.
|
|
9672
|
+
*/
|
|
9673
|
+
/**
|
|
9674
|
+
* Grados que se gira el `primary` para cada tono, en el orden en que se pintan.
|
|
9675
|
+
*
|
|
9676
|
+
* Son muchos grados a propósito. La gracia del aura es que haya MÁS DE UN COLOR: con
|
|
9677
|
+
* un giro discreto —del orden de 18°, el que usa un degradado de profundidad— salen
|
|
9678
|
+
* tres versiones del mismo tono y el resultado se lee como un plano. A ±55° el salto
|
|
9679
|
+
* se ve como otro color y sigue dentro de la familia del `primary`, que es lo que
|
|
9680
|
+
* permite que esto funcione con la agencia número siete sin tocar nada.
|
|
9681
|
+
*
|
|
9682
|
+
* El tono del medio va casi sin girar: es el que ancla el conjunto al color de la
|
|
9683
|
+
* agencia, para que el aura se lea como suya y no como una decoración pegada encima.
|
|
9684
|
+
*/
|
|
9685
|
+
var GIROS = [-56, 8, 54];
|
|
9686
|
+
/**
|
|
9687
|
+
* Banda de luz en la que se pintan los tres tonos, en porcentaje HSL.
|
|
9688
|
+
*
|
|
9689
|
+
* Los tonos NO heredan la luz del `primary`, y esto es lo que más se nota: un primary
|
|
9690
|
+
* oscuro y poco saturado sobre una superficie clara se lee como una mancha gris —sucia,
|
|
9691
|
+
* no como color—, y uno casi blanco desaparece contra el fondo. Se llevan al paso medio
|
|
9692
|
+
* de la escala, que es el que funciona en los dos casos.
|
|
9693
|
+
*/
|
|
9694
|
+
var BANDA_LUZ = { min: 52, max: 72 };
|
|
9695
|
+
/**
|
|
9696
|
+
* Banda de saturación de los tres tonos, en porcentaje HSL.
|
|
9697
|
+
*
|
|
9698
|
+
* El techo es lo que evita que el aura grite. A plena saturación los tonos dejan de ser
|
|
9699
|
+
* ambiente y pasan a ser tres focos de color encima de un control de 40 pt: bonito en
|
|
9700
|
+
* una captura, insoportable en una barra que se mira todo el día.
|
|
9701
|
+
*
|
|
9702
|
+
* ⚠️ **Y hay una razón que no es estética.** Girar el tono puede caer en un rojo vivo:
|
|
9703
|
+
* un `primary` amarillo —51°— girado −56° aterriza en 355°, que a saturación 100 se lee
|
|
9704
|
+
* como un estado de error alrededor de un botón que no ha fallado. Visto al renderizarlo,
|
|
9705
|
+
* no razonándolo. Bajado a 65 el mismo tono es un rosa apagado y vuelve a leerse como lo
|
|
9706
|
+
* que es: decoración.
|
|
9707
|
+
*
|
|
9708
|
+
* El suelo existe por lo contrario: un `primary` casi gris da tres tonos que no se
|
|
9709
|
+
* distinguen entre sí, y entonces no hay degradado que ver —el aura se lee como una
|
|
9710
|
+
* mancha plana—.
|
|
9711
|
+
*/
|
|
9712
|
+
var BANDA_SATURACION = { min: 35, max: 65 };
|
|
9713
|
+
var VUELTA = 360;
|
|
9714
|
+
/** `H S% L%` — el formato exacto en el que HeroUI guarda sus variables de color. */
|
|
9715
|
+
var TRIPLETE = /^\s*(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*$/;
|
|
9716
|
+
/**
|
|
9717
|
+
* Lee el triplete que HeroUI deja en una variable de color.
|
|
9718
|
+
*
|
|
9719
|
+
* Devuelve `null` en vez de lanzar: esto corre en un efecto de tema y el valor puede
|
|
9720
|
+
* no estar todavía —la clase del tema aún no está en el `<html>`, o el consumidor no
|
|
9721
|
+
* cargó la hoja de estilos—. Un aura que no se pinta es un problema menor; una
|
|
9722
|
+
* excepción que tumba el provider de tema, no.
|
|
9723
|
+
*/
|
|
9724
|
+
function parseHslTriplet(value) {
|
|
9725
|
+
var encontrado = TRIPLETE.exec(value);
|
|
9726
|
+
if (!encontrado) {
|
|
9727
|
+
return null;
|
|
9728
|
+
}
|
|
9729
|
+
var h = encontrado[1], s = encontrado[2], l = encontrado[3];
|
|
9730
|
+
return { h: Number(h), s: Number(s), l: Number(l) };
|
|
9731
|
+
}
|
|
9732
|
+
/** Deja un ángulo dentro de `[0, 360)`, venga de donde venga. */
|
|
9733
|
+
function normalizarTono(grados) {
|
|
9734
|
+
return ((grados % VUELTA) + VUELTA) % VUELTA;
|
|
9735
|
+
}
|
|
9736
|
+
function acotar(valor, min, max) {
|
|
9737
|
+
return Math.min(Math.max(valor, min), max);
|
|
9738
|
+
}
|
|
9739
|
+
/**
|
|
9740
|
+
* Los tres tonos del aura, listos para escribirse en una variable CSS.
|
|
9741
|
+
*
|
|
9742
|
+
* Se redondean a entero: es un degradado decorativo, y las décimas de grado solo
|
|
9743
|
+
* alargan la hoja de estilos.
|
|
9744
|
+
*/
|
|
9745
|
+
function deriveLindaTones(primary) {
|
|
9746
|
+
var luz = Math.round(acotar(primary.l, BANDA_LUZ.min, BANDA_LUZ.max));
|
|
9747
|
+
var saturacion = Math.round(acotar(primary.s, BANDA_SATURACION.min, BANDA_SATURACION.max));
|
|
9748
|
+
var tonos = GIROS.map(function (giro) {
|
|
9749
|
+
return "".concat(Math.round(normalizarTono(primary.h + giro)), " ").concat(saturacion, "% ").concat(luz, "%");
|
|
9750
|
+
});
|
|
9751
|
+
return tonos;
|
|
9752
|
+
}
|
|
9753
|
+
/** Las variables que se escriben en el `<html>`, en el orden en que se pintan. */
|
|
9754
|
+
var LINDA_TONE_PROPERTIES = [
|
|
9755
|
+
"--linda-1",
|
|
9756
|
+
"--linda-2",
|
|
9757
|
+
"--linda-3",
|
|
9758
|
+
];
|
|
9759
|
+
/**
|
|
9760
|
+
* Escribe los tres tonos del aura a partir del valor de `--heroui-primary`.
|
|
9761
|
+
*
|
|
9762
|
+
* Si el primary no se puede leer, **borra los que hubiera** y devuelve `false`. Es lo
|
|
9763
|
+
* contrario de dejarlos: unos tonos viejos son de otro tema, y un aura del color
|
|
9764
|
+
* anterior es peor que un aura que no se pinta —la CSS del efecto ya está escrita para
|
|
9765
|
+
* desaparecer sin sus variables—.
|
|
9766
|
+
*/
|
|
9767
|
+
function applyLindaTones(style, primaryValue) {
|
|
9768
|
+
var primary = parseHslTriplet(primaryValue);
|
|
9769
|
+
if (!primary) {
|
|
9770
|
+
removeLindaTones(style);
|
|
9771
|
+
return false;
|
|
9772
|
+
}
|
|
9773
|
+
var tonos = deriveLindaTones(primary);
|
|
9774
|
+
LINDA_TONE_PROPERTIES.forEach(function (propiedad, indice) {
|
|
9775
|
+
style.setProperty(propiedad, tonos[indice]);
|
|
9776
|
+
});
|
|
9777
|
+
return true;
|
|
9778
|
+
}
|
|
9779
|
+
/** Quita los tres tonos del aura. */
|
|
9780
|
+
function removeLindaTones(style) {
|
|
9781
|
+
for (var _i = 0, LINDA_TONE_PROPERTIES_1 = LINDA_TONE_PROPERTIES; _i < LINDA_TONE_PROPERTIES_1.length; _i++) {
|
|
9782
|
+
var propiedad = LINDA_TONE_PROPERTIES_1[_i];
|
|
9783
|
+
style.removeProperty(propiedad);
|
|
9784
|
+
}
|
|
9785
|
+
}
|
|
9786
|
+
|
|
9648
9787
|
/**
|
|
9649
9788
|
* Custom hook to manage the theme state and side effects.
|
|
9650
9789
|
* Supports both named ThemeColor values and arbitrary hex colors.
|
|
@@ -9690,6 +9829,30 @@ var useThemeManager = function () {
|
|
|
9690
9829
|
removeCustomPrimaryColor();
|
|
9691
9830
|
}
|
|
9692
9831
|
}, [customHex, mode]);
|
|
9832
|
+
/*
|
|
9833
|
+
* Los tres tonos del aura de Linda, derivados del primary que acaba de quedar fijado.
|
|
9834
|
+
*
|
|
9835
|
+
* Va DESPUÉS de los dos efectos de arriba y depende de lo mismo que ellos, que es lo
|
|
9836
|
+
* que garantiza que lea el primary definitivo: React ejecuta los efectos en orden de
|
|
9837
|
+
* declaración, así que aquí la clase del tema ya está en el `<html>` y el hex a medida
|
|
9838
|
+
* ya está escrito o retirado.
|
|
9839
|
+
*
|
|
9840
|
+
* Se lee del estilo COMPUTADO y no de `customHex` a propósito: el primary llega por
|
|
9841
|
+
* dos caminos —el hex del negocio o la clase de una de las familias de tema— y el
|
|
9842
|
+
* computado es el único sitio donde los dos han convergido. Derivarlo solo de
|
|
9843
|
+
* `customHex` dejaría sin aura a toda agencia que use una familia tal cual.
|
|
9844
|
+
*/
|
|
9845
|
+
/*
|
|
9846
|
+
* `customHex` y `rawTheme` están en la lista aunque el cuerpo no los lea: son la señal
|
|
9847
|
+
* de que el `<html>` acaba de cambiar. La entrada real de este efecto es el estilo
|
|
9848
|
+
* computado, que la regla no puede ver, y sin ellos el aura se quedaría con los tonos
|
|
9849
|
+
* del tema anterior.
|
|
9850
|
+
*/
|
|
9851
|
+
// biome-ignore lint/correctness/useExhaustiveDependencies: ver el comentario de arriba
|
|
9852
|
+
useEffect(function () {
|
|
9853
|
+
var html = document.documentElement;
|
|
9854
|
+
applyLindaTones(html.style, getComputedStyle(html).getPropertyValue("--heroui-primary"));
|
|
9855
|
+
}, [customHex, rawTheme]);
|
|
9693
9856
|
var setMode = useCallback(function (newMode) {
|
|
9694
9857
|
var effectiveMode = newMode === "dark" ? "light" : newMode;
|
|
9695
9858
|
var newTheme = color === "blue" ? effectiveMode : "".concat(color, "-").concat(effectiveMode);
|
|
@@ -9811,4 +9974,4 @@ var NavigationLoadingProvider = function (_a) {
|
|
|
9811
9974
|
return (jsxs(NavigationLoadingContext.Provider, { value: value, children: [children, jsx(NavigationLoadingOverlay, { isVisible: isVisible })] }));
|
|
9812
9975
|
};
|
|
9813
9976
|
|
|
9814
|
-
export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, DonutChart, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, removeCustomPrimaryColor, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };
|
|
9977
|
+
export { ALL_THEMES, AURORA_THEME_FAMILIES, AURORA_THEME_REGISTRY, AccordionList, AddHolidayForm, AnalyticsCard, AreaLineChart, AuraAutocomplete, AuraTable, AuraToastProvider, BEWEOS_THEME_MODE_COOKIE_NAME, BreadcrumbsComponent, Button, CONTAINER_ATTRIBUTE, Card, Chip, ColorPicker, ColorSelector, ContentCarousel, Currency, DEFAULT_DONUT_COLORS, DEFAULT_PREDEFINED_COLORS, DEFAULT_RANKED_BAR_COLORS, DISMISS_CONTROL_ATTRIBUTE, DatePicker, DateRangePicker, DateSelector, DonutChart, DrawerFilters, EmailPreview, EnumMenuNavListItem, GlobalToast, H1, H2, H3, H4, HeaderComponent, HolidayType, IconComponent, ImagePreview, Input, InputPassword, Kanban, KanbanCard, KanbanColumn, LINDA_TONE_PROPERTIES, LindaIcon, MenuClaw, MenuComponent, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, MultiStepWizard, NavigationLoadingContext, NavigationLoadingOverlay, NavigationLoadingProvider, P, Pagination, Phone, PromotionalBanner, REGISTERED_THEME_COLORS, RangeFilter, RankedBarList, RowSteps, DEFAULT_TRANSLATIONS$1 as SEGMENTATION_DEFAULT_TRANSLATIONS, ScheduleRow, SearchInput, SegmentationBuilder, Select, SimpleLineChart, SocialMediaBar, SocialMediaCarousel, SocialMediaPreview, StatTile, StepIndicator, Switch as SwitchComponent, THEME_COLOR_HEX_MAP, TagsFilter, Textarea, ThemeContext, ThemePicker, ThemeProvider, TimeInput as TimeInputComponent, ToastContext, Tooltip, TwoColumnLayoutAgent, UploadFile, VerticalSteps, ViolinPlot, WhatsAppPreview, Wizard, WizardNavigation, WizardSidebar, applyCustomPrimaryColor, applyLindaTones, computeBars, computeMax, computeSlices, computeTotal, containerProps, createCurrencyFormatter, uniqueCountries as defaultCountries, defaultCurrencyOptions, defaultTranslations$5 as defaultTranslations, deriveLindaTones, dismissControlProps, forceLightOnlyThemeBeforeReact, formatAuroraThemeTooltip, generateThemeColorScale, getContrastForeground, getRegisteredThemeColorBases, getSelectedKeyFromPath, hexToThemeColor, hslToCssValue, isAuroraFullThemeId, isDismissControl, isDonutEmpty, isExactThemeColor, isGroupState, isHexColor, isRankedBarListEmpty, isSegmentationGroup, parseHslTriplet, removeCustomPrimaryColor, removeLindaTones, shouldClosePopoverOnInteractOutside, sizeMap, themeColors, useAuraToast, useCloseOnAncestorScroll, useMediaQuery, useNavigationLoading, useThemeContext };
|
|
@@ -10,6 +10,7 @@ import type { ButtonProps } from "./Button.types";
|
|
|
10
10
|
* - isLoading: On, Off
|
|
11
11
|
* - Radius: md (por defecto)
|
|
12
12
|
* - isIconOnly: True, False
|
|
13
|
+
* - ai: aura de Linda para las acciones que hace la IA (ver `Button.types.ts`)
|
|
13
14
|
*/
|
|
14
15
|
export declare const Button: React.FC<ButtonProps>;
|
|
15
16
|
//# sourceMappingURL=Button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAOlD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiDxC,CAAC"}
|
|
@@ -9,5 +9,20 @@ export type ButtonProps = Omit<HeroUIButtonProps, "color" | "size" | "variant" |
|
|
|
9
9
|
endContent?: React.ReactNode;
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
isIconOnly?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Marca el botón como algo que hace la IA, con el aura viva de Linda.
|
|
14
|
+
*
|
|
15
|
+
* Los tres tonos salen del `primary` de la agencia, así que esto NO fija un color:
|
|
16
|
+
* en una agencia de marca amarilla el aura es amarilla. Los escribe el
|
|
17
|
+
* `ThemeProvider`; sin él, el aura sale monocroma en vez de no salir.
|
|
18
|
+
*
|
|
19
|
+
* - `"ring"` mueve solo el canto y deja el relleno intacto. Es la que va en un
|
|
20
|
+
* botón de acento pleno —un CTA como «Crear campaña»—: al no tocar el fondo, el
|
|
21
|
+
* contraste del texto no cambia.
|
|
22
|
+
* - `"surface"` pinta el degradado dentro. **Pide un fondo claro**: `bordered`,
|
|
23
|
+
* `flat` o `light`. Sobre `solid` los tonos aclaran el relleno y el texto se
|
|
24
|
+
* queda sin contraste.
|
|
25
|
+
*/
|
|
26
|
+
ai?: "ring" | "surface";
|
|
12
27
|
};
|
|
13
28
|
//# sourceMappingURL=Button.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAC7B,iBAAiB,EACjB,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CACvC,GAAG;IACH,KAAK,CAAC,EACH,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EACL,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,CAC7B,iBAAiB,EACjB,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CACvC,GAAG;IACH,KAAK,CAAC,EACH,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EACL,OAAO,GACP,UAAU,GACV,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACxB,CAAC"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ export * from "./force-light-only-theme";
|
|
|
2
2
|
export * from "./hex-to-theme-color";
|
|
3
3
|
export * from "./generate-color-scale";
|
|
4
4
|
export * from "./apply-custom-color";
|
|
5
|
+
export * from "./linda-tones";
|
|
5
6
|
export * from "./theme-provider";
|
|
6
7
|
export * from "./theme-provider.types";
|
|
7
8
|
export * from "./theme.utils";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Los tres tonos del aura de Linda, derivados del `primary` de la agencia.
|
|
3
|
+
*
|
|
4
|
+
* Linda no tiene color propio: es el `primary` que el negocio eligió en el onboarding,
|
|
5
|
+
* y por eso aquí no hay ni un color escrito. Lo único que se fija es CUÁNTO se gira ese
|
|
6
|
+
* tono y en qué banda de luz se pinta.
|
|
7
|
+
*/
|
|
8
|
+
/** Un color en HSL, tal y como lo guardan las variables de HeroUI. */
|
|
9
|
+
export interface Hsl {
|
|
10
|
+
h: number;
|
|
11
|
+
s: number;
|
|
12
|
+
l: number;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Lee el triplete que HeroUI deja en una variable de color.
|
|
16
|
+
*
|
|
17
|
+
* Devuelve `null` en vez de lanzar: esto corre en un efecto de tema y el valor puede
|
|
18
|
+
* no estar todavía —la clase del tema aún no está en el `<html>`, o el consumidor no
|
|
19
|
+
* cargó la hoja de estilos—. Un aura que no se pinta es un problema menor; una
|
|
20
|
+
* excepción que tumba el provider de tema, no.
|
|
21
|
+
*/
|
|
22
|
+
export declare function parseHslTriplet(value: string): Hsl | null;
|
|
23
|
+
/**
|
|
24
|
+
* Los tres tonos del aura, listos para escribirse en una variable CSS.
|
|
25
|
+
*
|
|
26
|
+
* Se redondean a entero: es un degradado decorativo, y las décimas de grado solo
|
|
27
|
+
* alargan la hoja de estilos.
|
|
28
|
+
*/
|
|
29
|
+
export declare function deriveLindaTones(primary: Hsl): [string, string, string];
|
|
30
|
+
/** Las variables que se escriben en el `<html>`, en el orden en que se pintan. */
|
|
31
|
+
export declare const LINDA_TONE_PROPERTIES: readonly ["--linda-1", "--linda-2", "--linda-3"];
|
|
32
|
+
/**
|
|
33
|
+
* Lo que se usa del `style` del `<html>`.
|
|
34
|
+
*
|
|
35
|
+
* Se pide esta forma y no un `HTMLElement` para que la derivación se pueda probar sin
|
|
36
|
+
* navegador: `CSSStyleDeclaration` la cumple tal cual.
|
|
37
|
+
*/
|
|
38
|
+
export interface LindaStyleTarget {
|
|
39
|
+
setProperty(name: string, value: string): void;
|
|
40
|
+
removeProperty(name: string): void;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Escribe los tres tonos del aura a partir del valor de `--heroui-primary`.
|
|
44
|
+
*
|
|
45
|
+
* Si el primary no se puede leer, **borra los que hubiera** y devuelve `false`. Es lo
|
|
46
|
+
* contrario de dejarlos: unos tonos viejos son de otro tema, y un aura del color
|
|
47
|
+
* anterior es peor que un aura que no se pinta —la CSS del efecto ya está escrita para
|
|
48
|
+
* desaparecer sin sus variables—.
|
|
49
|
+
*/
|
|
50
|
+
export declare function applyLindaTones(style: LindaStyleTarget, primaryValue: string): boolean;
|
|
51
|
+
/** Quita los tres tonos del aura. */
|
|
52
|
+
export declare function removeLindaTones(style: LindaStyleTarget): void;
|
|
53
|
+
//# sourceMappingURL=linda-tones.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"linda-tones.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/linda-tones.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,sEAAsE;AACtE,MAAM,WAAW,GAAG;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV;AAmDD;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,GAAG,IAAI,CAUzD;AAWD;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAYvE;AAED,kFAAkF;AAClF,eAAO,MAAM,qBAAqB,kDAIxB,CAAC;AAEX;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAChC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/C,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC9B,KAAK,EAAE,gBAAgB,EACvB,YAAY,EAAE,MAAM,GAClB,OAAO,CAgBT;AAED,qCAAqC;AACrC,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAI9D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeManager.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/useThemeManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACX,UAAU,EACV,SAAS,EACT,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"useThemeManager.d.ts","sourceRoot":"","sources":["../../../../src/providers/theme/useThemeManager.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACX,UAAU,EACV,SAAS,EACT,MAAM,yCAAyC,CAAC;AAajD;;;;GAIG;AACH,eAAO,MAAM,eAAe;;;;uBA6EhB,SAAS;yBAUR,UAAU,GAAG,MAAM;CAiC/B,CAAC"}
|