this.gui 1.0.18 → 1.1.0

package/src/themes/ThemeProvider.jsx

@@ -1,61 +0,0 @@
-// src/themes/ThemeProvider.jsx
-import React, { useState, useEffect } from 'react';
-
-const ThemeContext = React.createContext();
-
-export const ThemeProvider = ({
-  children,
-  initialTheme = 'neurons',
-  initialMode = 'light',
-  targetDocument = document, // Default to global document
-}) => {
-  const [theme, setTheme] = useState(initialTheme);
-  const [mode, setMode] = useState(initialMode);
-
-  // Preload themes with Vite's `import.meta.glob`
-  // Updated to use 'query' and 'import' options instead of 'as'
-  const themes = import.meta.glob('./styles/**/*.css', {
-    query: '?raw',
-    import: 'default',
-  });
-
-  useEffect(() => {
-    setTheme(initialTheme);
-  }, [initialTheme]);
-
-  useEffect(() => {
-    setMode(initialMode);
-  }, [initialMode]);
-
-  useEffect(() => {
-    const themePath = `./styles/${theme}/${mode}.css`;
-
-    if (themes[themePath]) {
-      themes[themePath]().then((cssContent) => {
-        // Remove any existing theme styles
-        const existingStyle = targetDocument.getElementById('theme-styles');
-        if (existingStyle) {
-          existingStyle.parentNode.removeChild(existingStyle);
-        }
-
-        // Create a new style element
-        const style = targetDocument.createElement('style');
-        style.id = 'theme-styles';
-        style.textContent = cssContent;
-
-        // Append the style to the head
-        targetDocument.head.appendChild(style);
-      });
-    } else {
-      console.error(`Theme not found: ${theme} ${mode}`);
-    }
-  }, [theme, mode, targetDocument]);
-
-  return (
-    <ThemeContext.Provider value={{ theme, mode, setTheme, setMode }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-};
-
-export const useTheme = () => React.useContext(ThemeContext);

package/src/themes/styles/neurons/dark.css

@@ -1,247 +0,0 @@
-/* src/themes/styles/neurons/dark.css */
-
-/* Design Tokens (CSS Variables) */
-:root {
-  /* Primary Colors */
-  --primary-color: #1F877D; /* Neurons teal */
-  --primary-color-hover: #16655C; /* Color teal más oscuro para hover */
-  --secondary-color: #00A99D; /* Teal brillante */
-
-  /* Accent Colors */
-  --accent-color-1: #00B4B8; /* Teal claro */
-  --accent-color-2: #FF6F61; /* Coral suave */
-  --accent-color-3: #6B3F87; /* Ciruela */
-  --accent-color-4: #FFFFFF; /* Blanco (para texto y acentos en modo oscuro) */
-  --accent-color-5: #2C2C2C; /* Gris oscuro */
-
-  /* Background and Text */
-  --background-color: #1E1E1E; /* Fondo ligeramente más oscuro */
-  --text-color: #FFFFFF; /* Texto blanco puro */
-  --muted-text-color: #B0B0B0; /* Color de texto atenuado */
-  --border-color: #3A3A3A; /* Color de borde consistente */
-
-  /* Link Colors */
-  --link-color: #1F877D; /* Neurons teal */
-  --link-hover-color: #CCCCCC; /* Color grisáceo al pasar el cursor */
-
-  /* Typography */
-  --font-family: 'Roboto', sans-serif;
-  --font-size-base: 17px; /* Tamaño de fuente base ajustado para coincidir con light.css */
-  --font-size-small: 15px;
-  --font-size-large: 19px;
-  --line-height: 1.6; /* Line-height ajustado para coincidir */
-  --font-weight-regular: 400; /* Peso de fuente normal */
-  --font-weight-medium: 500; /* Peso de fuente medio */
-  --font-weight-bold: 600; /* Peso de fuente bold */
-  --font-weight-heavy: 700; /* Para encabezados */
-
-  /* Spacing */
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 32px;
-
-  /* Borders */
-  --border-radius: 6px; /* Esquinas ligeramente más redondeadas */
-  --border-width: 1px;
-
-  /* Shadows */
-  --box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); /* Sombra sutil */
-
-  /* Transitions */
-  --transition-speed: 0.3s;
-
-  /* Z-index */
-  --z-index-modal: 1000;
-  --z-index-tooltip: 1050;
-}
-
-/* Global Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* Base Styles */
-body {
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height);
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-weight: var(--font-weight-regular);
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--text-color);
-  font-weight: var(--font-weight-heavy);
-  margin-bottom: var(--spacing-md);
-}
-
-h1 { font-size: 2.2em; }
-h2 { font-size: 1.9em; }
-h3 { font-size: 1.6em; }
-h4 { font-size: 1.4em; }
-h5, h6 { font-size: 1.2em; }
-
-p {
-  margin-bottom: var(--spacing-md);
-  color: var(--text-color);
-}
-
-/* Links */
-a {
-  color: var(--link-color);
-  text-decoration: none;
-  transition: color var(--transition-speed) ease;
-}
-
-a:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
-
-/* Buttons */
-.button {
-  padding: var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--border-radius);
-  border: none;
-  cursor: pointer;
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-  text-align: center;
-  display: inline-block;
-  box-shadow: var(--box-shadow);
-  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
-}
-
-.button--primary {
-  background-color: var(--primary-color);
-  color: #ffffff;
-}
-
-.button--primary:hover {
-  background-color: var(--primary-color-hover);
-}
-
-.button--secondary {
-  background-color: var(--secondary-color);
-  color: #ffffff;
-}
-
-.button--disabled {
-  background-color: #555555;
-  cursor: not-allowed;
-}
-
-/* Forms */
-input, textarea, select {
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family);
-  background-color: #2C2C2C;
-  color: var(--text-color);
-  transition: border-color var(--transition-speed) ease;
-}
-
-input:focus, textarea:focus, select:focus {
-  border-color: var(--primary-color);
-  outline: none;
-}
-
-/* Layout */
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: var(--spacing-md);
-}
-
-.grid {
-  display: flex;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
-}
-
-.grid__item {
-  flex: 1;
-  min-width: 200px;
-}
-
-/* Sidebar */
-.sidebar {
-  background-color: #2B2B2B; /* Gris oscuro para sidebar */
-  padding: var(--spacing-md);
-  border-right: var(--border-width) solid var(--border-color); /* Borde consistente */
-}
-
-.sidebar__link {
-  display: block;
-  padding: var(--spacing-sm);
-  color: var(--text-color);
-  text-decoration: none;
-  font-weight: var(--font-weight-medium);
-  transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
-}
-
-.sidebar__link:hover {
-  background-color: #3A3A3A; /* Un poco más claro al pasar el cursor */
-  color: var(--text-color);
-}
-
-/* Navbar */
-.navbar {
-  background-color: #2B2B2B;
-  padding: var(--spacing-md);
-  border-bottom: var(--border-width) solid var(--border-color); /* Borde consistente */
-}
-
-.navbar__link {
-  color: var(--link-color);
-  text-decoration: none;
-  margin-right: var(--spacing-md);
-  font-weight: var(--font-weight-medium);
-  transition: color var(--transition-speed) ease;
-}
-
-.navbar__link:hover {
-  color: var(--link-hover-color);
-}
-
-/* Utility Classes */
-.mt-sm { margin-top: var(--spacing-sm); }
-.mb-md { margin-bottom: var(--spacing-md); }
-.text-center { text-align: center; }
-.d-flex { display: flex; }
-.flex-column { flex-direction: column; }
-
-/* Accessibility */
-a:focus, button:focus {
-  outline: 2px solid var(--primary-color);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none;
-    transition: none;
-  }
-}
-
-/* Media Queries */
-@media (max-width: 768px) {
-  .container {
-    padding: var(--spacing-sm);
-  }
-
-  h1 {
-    font-size: 1.9em;
-  }
-
-  .navbar {
-    padding: var(--spacing-sm);
-  }
-}

package/src/themes/styles/neurons/light.css

@@ -1,170 +0,0 @@
-/* src/themes/styles/neurons/light.css */
-/* Design Tokens (CSS Variables) */
-:root {
-/* Primary Colors */
---primary-color: #1F877D; /* Neurons teal */
---primary-color-hover: #16655C; /* Darker teal for hover effects */
-/* Secondary Colors */
---secondary-color: #39a182; /* Bright teal */
---secondary-color-hover: #00877A; /* Darker teal for hover effects */
-/* Link Colors */
---link-color: #1F877D; /* Neurons teal */
---link-hover-color: #008699; /* Greyish color on hover */
---link-visited-color: #555555; /* Optional: custom color for visited links */
-/* onFocus Color */
---focus-color: #1E90FF; /* Dodger Blue */
-/* Semantic Colors */
---info-color: #008699; /* Light teal */
---info-color-hover: #008799d; /* Adjusted color for hover */
---warning-color: #FF6F61; /* Soft coral (Orange) */
---warning-color-hover: #e65b54; /* Adjusted color for hover */
---alert-color: #ffcc00; /* Yellow */
---alert-color-hover: #F1C40F; /* Adjusted color for hover */
---success-color: #00B4B8; /* Deep gray (Blueish) */
---success-color-hover: #0095991; /* Darker blueish for hover */
---neutral-color: #a4a4a4; /* Light gray */
---neutral-color-hover: #CCCCCC; /* Medium gray for hover */
---dark-color: #2C2C2C; /* Deep gray */
---dark-color-hover: #1A1A1A; /* Darker gray for hover */
-/* Classy Palette */
---classy-color-1: #16655c;
---classy-color-2: #96b1ac;
---classy-color-3: #637c78;
---classy-color-4: #405b83;
---classy-color-5: #738db8;
-/* Small Switch Palette */
---small-switch-color-1: #deefe6;
---small-switch-color-2: #4e8a6e;
-/* Natural Palette */
---natural-color-1: #00aa96;
---natural-color-2: #e8fefa;
---natural-color-3: #e7fefe;
-/* Grey Friends */
---grey-friend-1: #344b47;
---grey-friend-2: #96b1ac;
-/* Shades */
---shade-1: #3b847a;
---shade-2: #5da59a;
---shade-3: #7ec7bc;
---shade-4: #a0eade;
-/* Typography */
---font-family: 'Roboto', sans-serif;
---font-size-base: 16px; /* Slightly larger base font size */
---font-size-small: 14px;
---font-size-large: 19px;
---line-height: 1.6;
---font-weight-regular: 400; /* Normal font weight */
---font-weight-medium: 500; /* Medium font weight */
---font-weight-bold: 600; /* Less heavy bold weight */
---font-weight-heavy: 700; /* For headings */
-/* Text Colors */
---text-color: #2C2C2C; /* Dark text color for contrast */
---text-color-inverse: #FFFFFF; /* For buttons with dark backgrounds */
-/* Background and Text */
---background-color: #FFFFFF; /* Pure white background */
---muted-text-color: #555555; /* Muted text color */
-/* Spacing */
---spacing-xs: 6px;
---spacing-sm: 16px;
---spacing-md: 34px;
---spacing-lg: 55px;
-/* Borders */
---border-radius: 8px; /* Slightly more rounded corners */
---border-width: 1px;
-/* Border Colors */
---border-color: #DDDDDD; /* Light border color */
---secondary-border-color: var(--secondary-color); /* For secondary buttons */
-/* Shadows */
---box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-/* Transitions */
---transition-speed: 0.3s;
-/* Z-index */
---z-index-modal: 1000;
---z-index-tooltip: 1050;
-}
-
-/* Global Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* Base Styles */
-body {
-  font-family: var(--font-family);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height);
-  color: var(--text-color);
-  background-color: var(--background-color);
-  font-weight: var(--font-weight-regular);
-}
-
-/* Typography */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--text-color);
-  font-weight: var(--font-weight-heavy);
-  margin-bottom: var(--spacing-md);
-}
-
-h1 { font-size: 2.2em; }
-h2 { font-size: 1.9em; }
-h3 { font-size: 1.6em; }
-h4 { font-size: 1.4em; }
-h5, h6 { font-size: 1.2em; }
-
-p {
-  margin-bottom: var(--spacing-md);
-  color: var(--text-color);
-}
-
-/* Base link styles */
-a, .link {
-  color: var(--link-color);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family);
-  transition: color var(--transition-speed) ease, text-decoration var(--transition-speed) ease;
-}
-
-a:hover, .link:hover {
-  color: var(--link-hover-color);
-  text-decoration: underline;
-}
-
-/* Accessibility - global */
-a:focus, button:focus, .link:focus {
-  outline: 2px solid var(--focus-color);
-  outline-offset: 2px;
-}
-
-/* Utility Classes */
-.mt-sm { margin-top: var(--spacing-sm); }
-.mb-md { margin-bottom: var(--spacing-md); }
-.text-center { text-align: center; }
-.d-flex { display: flex; }
-.flex-column { flex-direction: column; }
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none;
-    transition: none;
-  }
-}
-
-/* Media Queries */
-@media (max-width: 768px) {
-  .container {
-    padding: var(--spacing-sm);
-  }
-
-  h1 {
-    font-size: 1.9em;
-  }
-
-  .navbar {
-    padding: var(--spacing-sm);
-  }
-}
-
-
-