flysoft-react-ui 0.2.7 → 0.2.8
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,
|
|
1
|
+
{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/contexts/ThemeContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA2CvD,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4KtD,CAAC;AAIF,eAAO,MAAM,QAAQ,QAAO,gBAM3B,CAAC;AAIF,eAAO,MAAM,eAAe,eAG3B,CAAC"}
|
|
@@ -71,36 +71,46 @@ export const ThemeProvider = ({ children, initialTheme = "light", storageKey = "
|
|
|
71
71
|
const applyThemeToCSS = (theme) => {
|
|
72
72
|
if (typeof document === "undefined")
|
|
73
73
|
return;
|
|
74
|
-
|
|
74
|
+
// Aplicar variables al contenedor del tema en lugar de :root
|
|
75
|
+
// Esto evita conflictos con otras librerías como FontAwesome
|
|
76
|
+
const themeContainer = document.querySelector(".flysoft-theme-reset");
|
|
77
|
+
// Si el contenedor no existe aún, aplicar a :root temporalmente
|
|
78
|
+
// (se actualizará cuando el componente se monte)
|
|
79
|
+
const target = themeContainer || document.documentElement;
|
|
75
80
|
// Apply color variables
|
|
76
81
|
Object.entries(theme.colors).forEach(([key, value]) => {
|
|
77
82
|
const cssVarName = `--flysoft-${key
|
|
78
83
|
.replace(/([A-Z])/g, "-$1")
|
|
79
84
|
.toLowerCase()}`;
|
|
80
|
-
|
|
85
|
+
target.style.setProperty(cssVarName, value);
|
|
81
86
|
});
|
|
82
87
|
// Apply shadow variables
|
|
83
88
|
Object.entries(theme.shadows).forEach(([key, value]) => {
|
|
84
89
|
const cssVarName = `--flysoft-shadow-${key}`;
|
|
85
|
-
|
|
90
|
+
target.style.setProperty(cssVarName, value);
|
|
86
91
|
});
|
|
87
92
|
// Apply radius variables
|
|
88
93
|
Object.entries(theme.radius).forEach(([key, value]) => {
|
|
89
94
|
const cssVarName = `--flysoft-radius-${key}`;
|
|
90
|
-
|
|
95
|
+
target.style.setProperty(cssVarName, value);
|
|
91
96
|
});
|
|
92
97
|
// Apply spacing variables
|
|
93
98
|
Object.entries(theme.spacing).forEach(([key, value]) => {
|
|
94
99
|
const cssVarName = `--flysoft-spacing-${key}`;
|
|
95
|
-
|
|
100
|
+
target.style.setProperty(cssVarName, value);
|
|
96
101
|
});
|
|
97
102
|
// Apply font variables
|
|
98
103
|
Object.entries(theme.fonts).forEach(([key, value]) => {
|
|
99
104
|
const cssVarName = `--flysoft-font-${key}`;
|
|
100
|
-
|
|
105
|
+
target.style.setProperty(cssVarName, value);
|
|
101
106
|
});
|
|
102
107
|
// Set theme name as data attribute for CSS targeting
|
|
103
|
-
|
|
108
|
+
if (themeContainer) {
|
|
109
|
+
themeContainer.setAttribute("data-theme", theme.name);
|
|
110
|
+
}
|
|
111
|
+
else {
|
|
112
|
+
document.documentElement.setAttribute("data-theme", theme.name);
|
|
113
|
+
}
|
|
104
114
|
// Apply background and text colors to body for better integration
|
|
105
115
|
const body = document.body;
|
|
106
116
|
if (body) {
|