this.gui 1.0.14 → 1.0.16

package/src/themes/README.md

@@ -0,0 +1,301 @@
+A **complete global CSS** should establish the foundational design rules and visual consistency across an application. It should cover general aspects like colors, typography, spacing, layout, forms, buttons, and interactions. The component-specific styles will then build on top of this global foundation.
+
+Here’s a **meta description** of the key sections and properties that should be included in any global CSS file:
+
+---
+
+### **Meta Description of a Complete Global CSS**
+
+#### 1. **CSS Variables (Design Tokens)**
+Define **CSS variables** at the root level (`:root`) to store your design tokens. This ensures flexibility and consistency across the application.
+
+##### Key Design Tokens:
+- **Primary and Secondary Colors**:
+  - `--primary-color`: Main action color (e.g., for buttons, links).
+  - `--secondary-color`: Supportive action color (e.g., for secondary buttons or highlights).
+  - `--background-color`: Global background color.
+  - `--text-color`: Main text color.
+  - `--border-color`: Default color for borders.
+  - `--link-color`: Color for links.
+
+  Example:
+  ```css
+  :root {
+    --primary-color: #0366d6;
+    --secondary-color: #586069;
+    --background-color: #ffffff;
+    --text-color: #333333;
+    --border-color: #e1e4e8;
+    --link-color: #0366d6;
+  }
+  ```
+
+- **Typography**:
+  - `--font-family`: Base font family for all text.
+  - `--font-size-base`: Base font size (e.g., 16px).
+  - `--line-height`: Global line height (e.g., 1.6).
+  - `--font-weight-regular`: Regular font weight.
+  - `--font-weight-bold`: Bold font weight.
+  
+  Example:
+  ```css
+  :root {
+    --font-family: 'Open Sans', sans-serif;
+    --font-size-base: 16px;
+    --line-height: 1.6;
+    --font-weight-regular: 400;
+    --font-weight-bold: 700;
+  }
+  ```
+
+- **Spacing**:
+  - `--spacing-xs`: Extra small spacing (e.g., padding, margins).
+  - `--spacing-sm`: Small spacing.
+  - `--spacing-md`: Medium spacing.
+  - `--spacing-lg`: Large spacing.
+  
+  Example:
+  ```css
+  :root {
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 32px;
+  }
+  ```
+
+- **Borders**:
+  - `--border-radius`: Default radius for rounded elements.
+  - `--border-width`: Default border width.
+  
+  Example:
+  ```css
+  :root {
+    --border-radius: 4px;
+    --border-width: 1px;
+  }
+  ```
+
+- **Z-index**:
+  - `--z-index-modal`: Z-index for modals.
+  - `--z-index-tooltip`: Z-index for tooltips.
+  
+  Example:
+  ```css
+  :root {
+    --z-index-modal: 1000;
+    --z-index-tooltip: 1050;
+  }
+  ```
+
+#### 2. **Global Resets and Base Styles**
+Implement styles to reset common browser inconsistencies and define the base font, color, and layout properties.
+
+##### Example:
+```css
+/* 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);
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+```
+
+#### 3. **Typography**
+Define global typography rules to ensure a consistent appearance for all headings, paragraphs, and text elements.
+
+##### Example:
+```css
+h1, h2, h3, h4, h5, h6 {
+  color: var(--text-color);
+  font-weight: var(--font-weight-bold);
+  margin-bottom: var(--spacing-md);
+}
+
+h1 { font-size: 2.25em; }
+h2 { font-size: 1.75em; }
+h3 { font-size: 1.5em; }
+h4 { font-size: 1.25em; }
+h5, h6 { font-size: 1em; color: var(--secondary-color); }
+
+p {
+  margin-bottom: var(--spacing-md);
+  color: var(--text-color);
+}
+```
+
+#### 4. **Buttons**
+Global button styles that cover primary, secondary, and disabled states.
+
+##### Example:
+```css
+.button {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius);
+  border: none;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.button--primary {
+  background-color: var(--primary-color);
+  color: #ffffff;
+}
+
+.button--secondary {
+  background-color: var(--secondary-color);
+  color: #ffffff;
+}
+
+.button--disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+```
+
+#### 5. **Form Elements**
+Global styles for form elements like `input`, `textarea`, and `select`.
+
+##### Example:
+```css
+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);
+}
+
+input:focus, textarea:focus, select:focus {
+  border-color: var(--primary-color);
+  outline: none;
+}
+```
+
+#### 6. **Containers and Layout**
+Define a layout system with containers, grid systems, and common utilities.
+
+##### Example (Container):
+```css
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--spacing-md);
+}
+
+/* Responsive Grid */
+.grid {
+  display: flex;
+  gap: var(--spacing-md);
+  flex-wrap: wrap;
+}
+
+.grid__item {
+  flex: 1;
+  min-width: 200px;
+}
+```
+
+#### 7. **Spacing and Utility Classes**
+Define utility classes for common spacing, alignment, and display patterns.
+
+##### Example:
+```css
+/* Margin utilities */
+.mt-sm { margin-top: var(--spacing-sm); }
+.mb-md { margin-bottom: var(--spacing-md); }
+
+/* Text alignment */
+.text-center { text-align: center; }
+
+/* Flex utilities */
+.d-flex { display: flex; }
+.flex-column { flex-direction: column; }
+```
+
+#### 8. **Media Queries**
+Define breakpoints for responsive design and apply styles accordingly.
+
+##### Example:
+```css
+@media (max-width: 768px) {
+  .container {
+    padding: var(--spacing-sm);
+  }
+
+  h1 {
+    font-size: 1.75em;
+  }
+}
+```
+
+#### 9. **Dark Mode and Light Mode (Theming)**
+Define rules for light and dark themes. Switch the theme by changing the root variables.
+
+##### Example:
+```css
+/* Light Mode */
+.light-theme {
+  --background-color: #ffffff;
+  --text-color: #333333;
+  --primary-color: #0366d6;
+}
+
+/* Dark Mode */
+.dark-theme {
+  --background-color: #181818;
+  --text-color: #eaeaea;
+  --primary-color: #539bf5;
+}
+```
+
+#### 10. **Accessibility**
+Ensure accessibility by focusing on contrasts, keyboard focus states, and screen reader support.
+
+##### Example:
+```css
+a:focus, button:focus {
+  outline: 2px solid var(--primary-color);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none;
+    transition: none;
+  }
+}
+```
+
+---
+
+### **Key Elements to Include in Each CSS**
+
+1. **Colors**: Primary, secondary, background, text, border colors.
+2. **Typography**: Font family, font sizes, line heights, weights.
+3. **Spacing**: Padding, margins, grid, and layout utilities.
+4. **Components**: Buttons, forms, links, containers.
+5. **Theming**: Light mode, dark mode, and accessible states.
+6. **Accessibility**: Focus states, reduced motion, high contrast.
+7. **Responsive**: Media queries for different screen sizes.
+8. **Utility Classes**: For common patterns like alignment, display, spacing.
+
+By following this structure, you ensure that your global CSS provides a robust, consistent, and easily customizable foundation for your application’s design.

package/src/themes/ThemeProvider.jsx

@@ -1,34 +1,59 @@
+// src/themes/ThemeProvider.jsx
 import React, { useState, useEffect } from 'react';
-import { SelectTheme } from '../stories/Molecules/SelectTheme/SelectTheme'; // Import the SelectTheme component
 
 const ThemeContext = React.createContext();
 
-export const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState('github'); // Default theme
-  const [themeLoaded, setThemeLoaded] = useState(false);
+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(() => {
-    import(`../themes/typ/${theme}.css`)
-      .then(() => {
-        console.log(`${theme} theme loaded`);
-        setThemeLoaded(true);
-      })
-      .catch((error) => {
-        console.error(`Error loading ${theme} theme: `, error);
-      });
-  }, [theme]);
+    setTheme(initialTheme);
+  }, [initialTheme]);
 
-  // Ensure theme is loaded before rendering the app
-  if (!themeLoaded) {
-    return <div>Loading theme...</div>;
-  }
+  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, setTheme }}>
-      <div>
-        <SelectTheme onThemeChange={(newTheme) => setTheme(newTheme)} />
-        {children}
-      </div>
+    <ThemeContext.Provider value={{ theme, mode, setTheme, setMode }}>
+      {children}
     </ThemeContext.Provider>
   );
 };

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

@@ -0,0 +1,247 @@
+/* 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);
+  }
+}