npm - desy-html - Versions diffs - 15.0.3 → 16.0.0 - Mend

desy-html 15.0.3 → 16.0.0

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.

Files changed (184) hide show

package/branding/BRANDING.md ADDED Viewed

@@ -0,0 +1,369 @@
+# desy-html Branding System
+desy-html includes a brand customization system that allows adapting the design system for different government organizations.
+## Quick Setup
+### Step 1: Edit Configuration
+Edit `branding/branding.config.js` with your organization's information:
+```javascript
+export default {
+  organization: {
+    name: 'My Organization',
+    website: 'https://my-site.gov',
+  },
+  logos: {
+    organization: {
+      compact: '/branding/logos/my-logo-compact.svg',
+      expanded: '/branding/logos/my-logo-expanded.svg',
+      mini: '/branding/logos/my-logo-mini.svg',
+      alt: 'My Organization',
+    },
+    eu: {
+      eu: '/branding/logos/eu/logo-eu.svg',
+      feder: '/branding/logos/eu/logo-feder.svg',
+      fse: '/branding/logos/eu/logo-fse.svg',
+      feader: '/branding/logos/eu/logo-feader.svg',
+      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
+    },
+  },
+};
+```
+### Step 2: Replace Logos
+Place your organization's logos in `/branding/logos/`:
+- `my-logo-compact.svg` - Compact logo (icon only) for mobile header
+- `my-logo-expanded.svg` - Expanded logo (icon + text) for desktop header
+- `my-logo-mini.svg` - Mini logo (icon + text) for header-mini component
+### Step 3: Rebuild
+```bash
+npm run build
+```
+## Build-time vs Runtime
+The branding system supports two customization modes:
+### Build-time (Recommended)
+Changes to `branding/branding.config.js` are applied during the build process. This is the most efficient option for permanent customizations.
+**Advantages:**
+- Better performance (no additional processing on the client)
+- Values are injected directly into templates
+- No flickering during page load
+**Usage:** Simply edit `branding/branding.config.js` and run `npm run build`.
+## Configuration Reference
+### organization
+Organization information.
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `name` | string | Yes | Full organization name |
+| `nameShort` | string | No | Short name for limited spaces |
+| `website` | string | Yes | Main website URL |
+| `contact.address` | string | No | Postal address |
+| `contact.city` | string | No | City and postal code |
+| `contact.phone` | string | No | Phone number to display |
+| `contact.phoneLink` | string | No | Phone in international format (+34...) |
+### logos
+Logo configuration.
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `logos.organization.compact` | string | Yes | Compact logo (icon only) for mobile/responsive header |
+| `logos.organization.expanded` | string | Yes | Expanded logo (icon + text) for desktop header |
+| `logos.organization.mini` | string | Yes | Mini logo (icon + text) for header-mini component |
+| `logos.organization.alt` | string | Yes | Alternative text |
+| `logos.eu.eu` | string | No | European Union logo |
+| `logos.eu.feder` | string | No | FEDER logo |
+| `logos.eu.fse` | string | No | FSE+ logo |
+| `logos.eu.feader` | string | No | FEADER logo |
+| `logos.eu.plurifondo` | string | No | Plurifondo logo |
+### footer
+Footer configuration.
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `license.name` | string | No | License name (e.g., "CC BY 4.0") |
+| `license.url` | string | No | URL to full license text |
+| `license.text` | string | No | Text preceding the link |
+| `euFundsUrl` | string | No | URL to European funds page |
+### colors
+Brand colors.
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `primary.base` | string | No | Main primary color |
+| `primary.light` | string | No | Light variant (backgrounds) |
+| `primary.dark` | string | No | Dark variant (hover) |
+### typography
+Font configuration.
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `fontFamily.sans` | string | No | Sans-serif font family |
+| `fontFamily.heading` | string | No | Heading font family |
+| `fontUrl` | string | No | URL to load fonts (e.g., Google Fonts) |
+### images
+Additional images.
+| Field | Type | Required | Description |
+|-------|------|----------|-------------|
+| `headerBackground` | string | No | Header background image |
+| `headerBackgroundLg` | string | No | Large header background image |
+## CSS Variables
+The following CSS variables are available for runtime customization:
+```css
+:root {
+  /* Primary colors */
+  --branding-primary-base: #00607a;
+  --branding-primary-light: #d6eaf0;
+  --branding-primary-dark: #00475c;
+  /* Logo URLs */
+  --branding-logo-expanded: url('/branding/logos/...');
+  --branding-logo-mini: url('/branding/logos/...');
+  --branding-logo-compact: url('/branding/logos/...');
+}
+```
+## Configuration Examples
+### YourOrganization
+```javascript
+export default {
+  organization: {
+    name: 'YourOrganization',
+    website: 'https://www.example.com/',
+  },
+  logos: {
+    organization: {
+      compact: '/branding/logos/yourlogo-compact.svg',
+      expanded: '/branding/logos/yourlogo-expanded.svg',
+      mini: '/branding/logos/yourlogo-mini.svg',
+      alt: 'YourOrganization',
+    },
+    eu: {
+      eu: '/branding/logos/eu/logo-eu.svg',
+      feder: '/branding/logos/eu/logo-feder.svg',
+      fse: '/branding/logos/eu/logo-fse.svg',
+      feader: '/branding/logos/eu/logo-feader.svg',
+      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
+    },
+  },
+  typography: {
+    fontFamily: {
+      sans: '"Nunito", ui-sans-serif, system-ui, sans-serif',
+      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
+    },
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Nunito:wght@400;500;600;700&display=swap',
+  },
+};
+```
+## FAQ
+### What fields are required?
+You only need:
+- `organization.name`
+- `organization.website`
+- `logos.organization.compact`
+- `logos.organization.expanded`
+- `logos.organization.mini`
+- `logos.organization.alt`
+See `branding/branding.config.yourorganization.js` for a minimal example.
+### What format should the logos be in?
+SVG is the recommended format for its scalability and performance. PNG and JPG are also supported. See the dimensions table above for recommended sizes.
+### Can I use different logos for desktop and mobile?
+Yes. Use:
+- `logos.organization.expanded` for desktop (icon + text)
+- `logos.organization.compact` for mobile (icon only)
+- `logos.organization.mini` for header-mini component (icon + text)
+### Are European funds mandatory?
+No. The `logos.eu` section is optional and only needed if your project receives European funding. Place your EU logos in `branding/logos/eu/`.
+### Where can I find complete examples?
+- `branding/branding.config.yourorganization.js` - Minimal configuration
+- `branding/branding.config.js` - Current project configuration (Gobierno de Aragón)
+## Uso en Proyectos Externos
+Puedes importar y utilizar el sistema de branding de desy-html en tus propios proyectos que dependan de `desy-html`.
+### Requisitos
+Asegúrate de tener `desy-html` instalado:
+```bash
+npm install desy-html
+```
+### Importar el plugin
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+```
+### Configuración básica
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+import { defineConfig } from 'vite';
+export default defineConfig({
+  plugins: [
+    brandingPlugin(miConfiguracionBranding),
+    // ... otros plugins
+  ]
+});
+```
+### Cargar configuración desde archivo
+Puedes cargar la configuración desde un archivo `branding/branding.config.js` en tu proyecto:
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+import { defineConfig } from 'vite';
+export default defineConfig({
+  plugins: [
+    brandingPlugin(await loadBrandingConfig('default', process.cwd())),
+    // ... otros plugins
+  ]
+});
+```
+### Con variable de entorno
+```javascript
+// vite.config.js
+import { brandingPlugin, loadBrandingConfig } from 'desy-html/branding/plugin';
+import { defineConfig } from 'vite';
+const brandingConfig = await loadBrandingConfig(
+  process.env.BRANDING_CONFIG || 'default',
+  process.cwd()
+);
+export default defineConfig({
+  plugins: [
+    brandingPlugin(brandingConfig),
+    // ... otros plugins
+  ]
+});
+```
+### Estructura de configuración
+La configuración sigue la misma estructura que en desy-html:
+```javascript
+// branding/branding.config.js
+export default {
+  organization: {
+    name: 'Mi Organización',
+    website: 'https://mi-web.gob.es',
+    contact: {
+      address: 'Calle Principal, 1',
+      city: '01000 - Ciudad',
+      phone: '900 123 456',
+      phoneLink: '+34900123456',
+    },
+  },
+  logos: {
+    organization: {
+      compact: '/branding/logos/mi-logo-compact.svg',
+      mini: '/branding/logos/mi-logo-mini.svg',
+      expanded: '/branding/logos/mi-logo-expanded.svg',
+      alt: 'Mi Organización',
+    },
+  },
+  footer: {
+    license: {
+      name: 'CC BY 4.0',
+      url: 'https://creativecommons.org/licenses/by/4.0/',
+      text: 'Todo el contenido bajo licencia',
+    },
+    euFundsUrl: 'https://mi-web.gob.es/fondos-europeos',
+  },
+  typography: {
+    fontFamily: {
+      sans: '"Inter", ui-sans-serif, system-ui, sans-serif',
+      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
+    },
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
+  },
+  images: {
+    headerBackground: '/branding/images/header-background.svg',
+    headerBackgroundLg: '/branding/images/header-background-lg.svg',
+  },
+};
+```
+### Logos
+Los logos deben colocarse en la carpeta `branding/logos/` de tu proyecto:
+```
+mi-proyecto/
+├── branding/
+│   ├── logos/
+│   │   ├── mi-logo-compact.svg
+│   │   ├── mi-logo-mini.svg
+│   │   ├── mi-logo-expanded.svg
+│   │   ├── eu/
+│   │   │   ├── logo-eu.svg
+│   │   │   ├── logo-feder.svg
+│   │   │   ├── logo-fse.svg
+│   │   │   ├── logo-feader.svg
+│   │   │   └── logo-plurifondo.svg
+│   ├── images/
+│   │   ├── header-background.svg
+│   │   └── header-background-lg.svg
+│   └── branding.config.js
+└── vite.config.js
+```
+Los componentes de desy-html usarán automáticamente estos logos cuando estén configurados en `branding/branding.config.js`.

package/branding/branding.config.js ADDED Viewed

@@ -0,0 +1,69 @@
+/**
+ * Branding Configuration
+ *
+ * This file contains all organization-specific branding and content.
+ * Customize these values to adapt the design system for your government organization.
+ *
+ * The default values are from Gobierno de Aragón (Spain) as a reference implementation.
+ */
+export default {
+  // Organization Information
+  organization: {
+    name: 'Gobierno de Aragón',
+    website: 'https://www.aragon.es/',
+    contact: {
+      address: 'Edificio Pignatelli. Paseo María Agustín, 36',
+      city: '50004 - Zaragoza',
+      phone: '976 714 000',
+      phoneLink: '+34976714000',
+    },
+  },
+  // Logo Configuration
+  logos: {
+    organization: {
+      compact: '/branding/logos/aragon-compact.svg',
+      mini: '/branding/logos/aragon-mini.svg',
+      expanded: '/branding/logos/aragon-expanded.svg',
+      alt: 'Gobierno de Aragón',
+    },
+    eu: {
+      eu: '/branding/logos/eu/logo-eu.svg',
+      feder: '/branding/logos/eu/logo-feder.svg',
+      fse: '/branding/logos/eu/logo-fse.svg',
+      feader: '/branding/logos/eu/logo-feader.svg',
+      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
+    },
+  },
+  // Footer Configuration
+  footer: {
+    license: {
+      name: 'CC BY 4.0',
+      url: 'https://creativecommons.org/licenses/by/4.0/legalcode.es',
+      text: 'Todo el contenido bajo licencia',
+    },
+    euFundsUrl: 'https://www.aragon.es/-/fondos-europeos-aragon',
+  },
+  // Typography
+  typography: {
+    fontFamily: {
+      sans: '"Open Sans", ui-sans-serif, system-ui, sans-serif',
+      heading: '"Open Sans", ui-sans-serif, system-ui, sans-serif',
+    },
+    // URL to CSS that loads the font (Google Fonts, self-hosted, etc.)
+    // Remove to use system fonts without external loading
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap',
+  },
+  // Colors are configured in src/css/styles.css
+  // Edit the variables: --color-primary-base, --color-primary-light, --color-primary-dark
+  // Additional Images
+  images: {
+    headerBackground: '/branding/images/header-background.svg',
+    headerBackgroundLg: '/branding/images/header-background-lg.svg',
+  },
+};

package/branding/branding.config.yourorganization.js ADDED Viewed

@@ -0,0 +1,65 @@
+/**
+ * Branding Configuration - YourOrganization
+ *
+ * This file contains all organization-specific branding and content.
+ * Use BRANDING_CONFIG=yourorganization npm run dev to activate this configuration.
+ */
+export default {
+  // Organization Information
+  organization: {
+    name: 'YourOrganization',
+    website: 'https://www.example.com/',
+    contact: {
+      address: 'Your Address, 123',
+      city: '12345 - Your City',
+      phone: '123 456 789',
+      phoneLink: '+34123456789',
+    },
+  },
+  // Logo Configuration
+  logos: {
+    organization: {
+      compact: '/branding/logos/yourlogo-compact.svg',
+      mini: '/branding/logos/yourlogo-mini.svg',
+      expanded: '/branding/logos/yourlogo-expanded.svg',
+      alt: 'YourOrganization',
+    },
+    eu: {
+      eu: '/branding/logos/eu/logo-eu.svg',
+      feder: '/branding/logos/eu/logo-feder.svg',
+      fse: '/branding/logos/eu/logo-fse.svg',
+      feader: '/branding/logos/eu/logo-feader.svg',
+      plurifondo: '/branding/logos/eu/logo-plurifondo.svg',
+    },
+  },
+  // Footer Configuration
+  footer: {
+    license: {
+      name: 'CC BY 4.0',
+      url: 'https://creativecommons.org/licenses/by/4.0/legalcode.es',
+      text: 'Todo el contenido bajo licencia',
+    },
+    euFundsUrl: 'https://www.example.com/eu-funds',
+  },
+  // Typography
+  typography: {
+    fontFamily: {
+      sans: '"Nunito", ui-sans-serif, system-ui, sans-serif',
+      heading: '"Inter", ui-sans-serif, system-ui, sans-serif',
+    },
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Nunito:wght@400;500;600;700&display=swap',
+  },
+  // Colors are configured in src/css/styles.css
+  // Edit the variables: --color-primary-base, --color-primary-light, --color-primary-dark
+  // Additional Images
+  images: {
+    headerBackground: '/branding/images/header-background.svg',
+    headerBackgroundLg: '/branding/images/header-background-lg.svg',
+  },
+};

package/branding/logos/aragon-compact.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>

package/branding/logos/aragon-expanded.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current hidden sm:block" aria-label="Ir a la página de inicio de la aplicación" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"></path></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"></path></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"></path><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"></path></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"></path></g></svg>

package/branding/logos/aragon-mini.svg ADDED Viewed

@@ -0,0 +1 @@

package/branding/logos/yourlogo-compact.svg ADDED Viewed

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-label="YourLogo" role="img">
+  <defs>
+    <clipPath id="clip-hex">
+      <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z"/>
+    </clipPath>
+  </defs>
+  <!-- Hexagono exterior -->
+  <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z" fill="#00607a" stroke="#00475c" stroke-width="1"/>
+  <!-- Cuadrado interior -->
+  <rect x="10" y="10" width="12" height="12" rx="1" fill="#ffffff"/>
+  <!-- Círculo centro -->
+  <circle cx="16" cy="16" r="3" fill="#00607a"/>
+</svg>

package/branding/logos/yourlogo-expanded.svg ADDED Viewed

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" aria-label="YourLogo" role="img">
+  <defs>
+    <clipPath id="clip-hex-exp">
+      <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z"/>
+    </clipPath>
+  </defs>
+  <!-- Icono (32x32 en el espacio izquierdo) -->
+  <!-- Hexagono exterior -->
+  <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z" fill="#00607a" stroke="#00475c" stroke-width="1"/>
+  <!-- Cuadrado interior -->
+  <rect x="10" y="10" width="12" height="12" rx="1" fill="#ffffff"/>
+  <!-- Círculo centro -->
+  <circle cx="16" cy="16" r="3" fill="#00607a"/>
+  <!-- Texto YourLogo -->
+  <text x="42" y="21" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="600" fill="#3c4c5c">YourLogo</text>
+</svg>

package/branding/logos/yourlogo-mini.svg ADDED Viewed

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" aria-label="YourLogo" role="img">
+  <defs>
+    <clipPath id="clip-hex-exp">
+      <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z"/>
+    </clipPath>
+  </defs>
+  <!-- Icono (32x32 en el espacio izquierdo) -->
+  <!-- Hexagono exterior -->
+  <path d="M16 1.5L29 9V23L16 30.5L3 23V9L16 1.5Z" fill="#00607a" stroke="#00475c" stroke-width="1"/>
+  <!-- Cuadrado interior -->
+  <rect x="10" y="10" width="12" height="12" rx="1" fill="#ffffff"/>
+  <!-- Círculo centro -->
+  <circle cx="16" cy="16" r="3" fill="#00607a"/>
+  <!-- Texto YourLogo -->
+  <text x="42" y="21" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="600" fill="#3c4c5c">YourLogo</text>
+</svg>