energy-foundations 2.3.0 → 2.5.0-beta.0

package/llms/04-layouts.md

@@ -0,0 +1,340 @@
+# Layouts A/B, Grid e integración Vue/AEM
+
+Layout A es el valor por defecto y Layout B es editorial y opt-in. No migres portales existentes ni cambies sus breakpoints sin una petición explícita.
+
+## Contrato de página
+
+| Perfil | Contexto tipográfico | Contenedor | Grid |
+|---|---|---|---|
+| A | body sin atributo data-rds-layout | .rds-layout-max | .rds-grid |
+| B | body[data-rds-layout="b"] | .rds-layout-editorial | .rds-grid-editorial |
+
+Estas tres capas son independientes. Un contenedor editorial local no activa el contexto tipográfico B. Los helpers rds-col-* y Flex responsive siguen usando los cortes de A; no los trates como helpers B.
+
+Solo la página o el shell controla el atributo global. Dos perfiles tipográficos simultáneos requieren un contexto local diseñado expresamente; no alternes el body desde componentes individuales.
+
+## API y breakpoints
+
+### Breakpoints Sass
+
+A Layout A Breakpoints default
+`mobile`: max-width: 719px
+`tablet`: min-width: 720px
+`desktop`: min-width: 1280px
+`desktop-large`: min-width: 1440px
+`ultrawide`: min-width: 1600px
+B Layout B Breakpoints editoriales
+`mobile-v2`: max-width: 799px
+`tablet-v2`: min-width: 800px
+`desktop-v2`: min-width: 1024px
+`desktop-large-v2`: min-width: 1250px
+`ultrawide-v2`: min-width: 1584px
+
+Los nombres `*-v2` se conservan por compatibilidad. Representan los breakpoints de Layout B.
+
+```scss
+.component {
+  // Mobile first
+
+  @include breakpoint(tablet) {
+    // Layout A desde 720px
+  }
+
+  @include breakpoint(tablet-v2) {
+    // Layout B desde 800px
+  }
+}
+```
+
+### Contenedores
+
+LEGACY
+`.rds-e-layout-max`
+Alias compatible de `.rds-layout-max`.
+LAYOUT A
+`.rds-layout-max`
+Padding 16px mobile, 24px tablet y 32px desktop. Máximo 1600px.
+LAYOUT B
+`.rds-layout-editorial`
+Padding progresivo hasta 72px. Máximo editorial de 1584px.
+
+### Riesgo: doble fuente de verdad
+
+El contexto tipográfico del `body` y las clases de contenedor y grid son independientes. La librería no detecta ni corrige automáticamente las combinaciones incoherentes.
+
+#### Caso incoherente: tipografía B con maquetación A
+
+```html
+<body data-rds-layout="b">
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+La tipografía cambia a desktop desde 1024px, pero el grid no pasa a 12 columnas hasta 1280px. El contenedor conserva los márgenes de A. Por ejemplo, a 1100px se combina tipografía desktop B con el grid de 8 columnas de A.
+
+#### Caso incoherente: tipografía A con maquetación B
+
+```html
+<body>
+  <main class="rds-layout-editorial">
+    <div class="rds-grid-editorial"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+El grid pasa a 12 columnas desde 1024px y el contenedor usa los márgenes de B, pero la tipografía mantiene la escala base de A hasta 1280px.
+
+#### Composición recomendada para una página B
+
+```html
+<body data-rds-layout="b">
+  <main class="rds-layout-editorial">
+    <div class="rds-grid-editorial"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+Para una página A, omite el atributo y combina `.rds-layout-max` con `.rds-grid`. La clase del contenedor solo controla ancho y márgenes: no crea un grid ni selecciona la tipografía.
+
+Resuelve el perfil una sola vez en el shell de Vue o en el Page Component de AEM y deriva de esa decisión las tres capas. Al cambiar de ruta, actualiza tanto el contexto global como el contenedor y el grid del destino.
+
+Esta composición no cambia los helpers `rds-col-*` ni Flex responsive: siguen usando los breakpoints de A. Para spans editoriales, utiliza las reglas Sass del perfil B descritas en Grid.
+
+### Referencia de Grid
+
+Columnas, gaps, offsets y ejemplos interactivos tienen su propia página en Layout / Grid.
+
+### Tipografía responsive
+
+Las clases y el mixin de tipografía leen el contexto global. No es necesario elegir un mixin distinto por layout:
+
+```scss
+.component__title {
+  @include rds-font-style('headline-01');
+}
+```
+
+```html
+<h1 class="rds-headline-01">Título responsive</h1>
+```
+
+Mobile Base Ambos layouts
+Desktop A · 1280px B · 1024px
+Ultrawide A · 1600px B · 1584px
+
+No existe una escala tipográfica específica para tablet. El breakpoint `desktop-large` modifica la maquetación, pero no introduce por sí mismo una nueva escala tipográfica.
+
+## Grid: columnas, offsets y perfil editorial
+
+### Columnas y offsets · Layout A
+
+El perfil A usa 4 columnas con gap de 16px hasta 719px, 8 columnas con gap de 16px desde 720px y 12 columnas con gap de 24px desde 1280px.
+El perfil B usa 4 columnas con gap de 16px hasta 799px, 8 columnas con gap de 24px desde 800px y 12 columnas con gap de 24px desde 1024px.
+
+El patrón `rds-col-{abbr}-{n}` selecciona el span; `rds-col-{abbr}-{n}-offset-{offset}` fija el inicio en offset + 1.
+El helper `rds-col-{n}` solo se genera en los rangos que admiten ese número de columnas: no reduce un span grande para que quepa en mobile.
+
+No se generan aliases `sm`, `lg`, `xl` ni columnas `xd`. Las reglas `md` permanecen activas en desktop si no las sustituyes.
+Los offsets disponibles van de cero a `máximo de columnas - n`.
+
+```html
+<div class="rds-layout-max">
+  <div class="rds-grid">
+    <article class="rds-col-sd-4 rds-col-md-4 rds-col-ld-6">
+      Contenido
+    </article>
+  </div>
+</div>
+```
+
+```html
+<article class="rds-col-sd-4 rds-col-md-4-offset-2">
+  En tablet ocupa 4 columnas y empieza en la tercera.
+</article>
+```
+
+### Grid editorial · Layout B
+
+El grid editorial usa los cortes de B, pero los helpers `rds-col-*` actuales se generan con los de A.
+Por tanto, no basta con cambiar la clase del grid para sincronizar los spans.
+Para un componente editorial, define sus columnas con los mixins de B:
+
+```html
+<div class="rds-layout-editorial">
+  <div class="rds-grid-editorial">
+    <article class="portal-editorial-card">Contenido</article>
+  </div>
+</div>
+```
+
+```scss
+@use 'energy-foundations/src/rds-variables' as rds;
+
+.portal-editorial-card {
+  grid-column: span 4;
+
+  @include rds.breakpoint(tablet-v2) {
+    grid-column: span 4;
+  }
+
+  @include rds.breakpoint(desktop-v2) {
+    grid-column: span 6;
+  }
+}
+```
+
+### Prueba el grid
+
+## Integración Vue: público B y privado A
+
+### Caso habitual: público B, privado A
+
+Una misma SPA puede utilizar Layout B en la parte pública y Layout A después del login. Se comparte el mismo bundle CSS y no es necesario que los componentes conozcan el layout.
+
+#### 1. Declara el layout en Vue Router
+
+```ts
+import type { RouteRecordRaw } from 'vue-router'
+
+type RdsLayout = 'a' | 'b'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    rdsLayout?: RdsLayout
+    requiresAuth?: boolean
+  }
+}
+
+export const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('./layouts/PublicLayout.vue'),
+    meta: { rdsLayout: 'b' },
+    children: [
+      { path: '', component: () => import('./views/HomeView.vue') },
+      { path: 'login', component: () => import('./views/LoginView.vue') },
+    ],
+  },
+  {
+    path: '/app',
+    component: () => import('./layouts/PrivateLayout.vue'),
+    meta: { rdsLayout: 'a', requiresAuth: true },
+    children: [
+      { path: '', component: () => import('./views/DashboardView.vue') },
+    ],
+  },
+]
+```
+
+Las rutas hijas heredan la metadata de la ruta padre y pueden sobrescribirla cuando exista una excepción.
+
+#### 2. Sincroniza el `body` desde un único punto
+
+```ts
+import type { Router } from 'vue-router'
+
+type RdsLayout = 'a' | 'b'
+
+function applyRdsLayout(layout: RdsLayout): void {
+  if (layout === 'b') {
+    document.body.dataset.rdsLayout = 'b'
+    return
+  }
+
+  document.body.removeAttribute('data-rds-layout')
+}
+
+export function installRdsLayoutSync(router: Router): void {
+  router.afterEach((to) => {
+    applyRdsLayout(to.meta.rdsLayout ?? 'a')
+  })
+}
+```
+
+```ts
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+installRdsLayoutSync(router)
+
+await router.isReady()
+
+createApp(App)
+  .use(router)
+  .mount('#app')
+```
+
+#### 3. Mantén autenticación y presentación separadas
+
+```ts
+router.beforeEach((to) => {
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    return {
+      path: '/login',
+      query: { redirect: to.fullPath },
+    }
+  }
+})
+```
+
+El guard decide si la navegación está permitida. `afterEach` aplica el layout de la ruta finalmente confirmada. No obtengas el layout directamente de `isAuthenticated`: podría existir una página pública A o una sección autenticada B.
+
+### Casos especiales
+
+## Integración Adobe AEM y Catálogo Zero
+
+### Un único propietario: el Page Component
+
+El layout debe resolverse en el Page Component, template o policy porque esa capa controla el `body`.
+
+```html
+<!-- Layout A: valor por defecto -->
+<body>
+  <main class="rds-layout-max">
+    <div class="rds-grid"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+```html
+<!-- Layout B: selección editorial -->
+<body data-rds-layout="b">
+  <main class="rds-layout-editorial">
+    <div class="rds-grid-editorial"><!-- Contenido --></div>
+  </main>
+</body>
+```
+
+La selección puede proceder del template, una Page Policy, una propiedad de página o la configuración global del portal.
+
+### Contrato Sling Model → HTL
+
+El Sling Model debe normalizar la configuración y exponer valores seguros y predecibles:
+
+```html
+<body data-rds-layout="${pageModel.rdsLayout}">
+  <main class="${pageModel.layoutContainerClass}">
+    <div class="${pageModel.gridClass}">
+      <!-- Contenido de la página -->
+    </div>
+  </main>
+</body>
+```
+
+El modelo debe aceptar únicamente una whitelist de valores conocidos. No copies texto libre del autor directamente en atributos o clases. Para Layout A, HTL debe omitir el atributo vacío o dejarlo sin efecto.
+
+### Catálogo Zero
+
+Los componentes comunes y moleculares:
+
+- No consultan la propiedad de página.
+- No reciben un parámetro `layout` para elegir tipografía.
+- No se duplican como componente A y componente B.
+- Permiten que el Page Component y Foundations resuelvan el contexto.
+
+Los componentes específicos de portal siguen el mismo contrato. Pueden usar un contenedor editorial local, pero `.rds-layout-editorial` por sí sola no cambia los breakpoints tipográficos de toda la página.
+

package/llms/index.md

@@ -5,6 +5,9 @@ Generated for intelligent coding assistants.
 ## Guides
 
 - [Installation & Quick Start](./00-installation.md)
+- [Layouts A/B, Grid and Vue/AEM integration](./04-layouts.md)
+
+For responsive pages, read the layout guide first: body context controls typography, while containers and grids are explicit choices. Layout A remains the default; B is opt-in. Column and responsive Flex helpers still use A breakpoints.
 
 ## Classes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "energy-foundations",
-  "version": "2.3.0",
+  "version": "2.5.0-beta.0",
   "config": {
     "commitizen": {
       "path": "node_modules/cz-customizable"
@@ -64,10 +64,10 @@
   ],
   "lint-staged": {
     "*.{vue,ts}": [
-      "yarn lint"
+      "eslint"
     ],
     "*.scss": [
-      "yarn stylelint"
+      "stylelint"
     ],
     "package.json": [
       "fixpack --dryRun"
@@ -97,7 +97,8 @@
     "storybook": "storybook dev -p 6006",
     "storybook:preview": "npx http-server storybook-static",
     "stylelint": "npx stylelint '**/*.scss'",
-    "stylelint:fix": "npx stylelint '**/*.scss' --fix"
+    "stylelint:fix": "npx stylelint '**/*.scss' --fix",
+    "test:typography": "node tests/verify-typography.mjs"
   },
   "style": "dist/style.css",
   "type": "module"

package/src/foundations/_grid.scss

@@ -23,6 +23,28 @@
   }
 }
 
+.rds-layout-editorial {
+  padding: 0 $g-padding-mobile;
+
+  @include breakpoint(tablet-v2) {
+    padding: 0 $g-padding-tablet;
+  }
+
+  @include breakpoint(desktop-v2) {
+    padding: 0 $g-padding-desktop;
+  }
+
+  @include breakpoint(desktop-large-v2) {
+    padding: 0 72px;
+  }
+
+  @include breakpoint(ultrawide-v2) {
+    margin: 0 auto;
+    max-width: 1584px;
+    padding: 0 72px;
+  }
+}
+
 .rds-grid {
   display: grid;
   margin-left: auto;
@@ -37,6 +59,20 @@
   }
 }
 
+.rds-grid-editorial {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+
+  @each $breakpoint, $config in $grid-config-editorial {
+    @include breakpoint($breakpoint) {
+      gap: map.get($config, gap);
+      grid-template-columns: repeat(map.get($config, max-columns), 1fr);
+    }
+  }
+}
+
 // Map of breakpoint names to abbreviations
 $breakpoint-abbr: (
   mobile: sd,

package/src/generated/icon-layers.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-15T08:50:14.974Z */
 /* eslint-disable */
 export const iconLayers = {
   "calendar_active": 8,

package/src/generated/icon-layers.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-15T08:50:14.974Z */
 /* eslint-disable */
 export const iconLayers: Record<string, number> = {
   "calendar_active": 8,

package/src/generated/icon-names.js

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-15T08:50:14.974Z */
 /* eslint-disable */
 export const iconNames = [
   "ac-aire-acondicionado",

package/src/generated/icon-names.ts

@@ -1,4 +1,4 @@
-/** Auto-generated by generateIconLayers.js on 2026-07-28T07:47:11.825Z */
+/** Auto-generated by generateIconLayers.js on 2026-10-15T08:50:14.974Z */
 /* eslint-disable */
 export const iconNames: string[] = [
   "ac-aire-acondicionado",

package/src/mixins/_layout.scss

@@ -13,7 +13,7 @@
 
   // If the key exists in the map
   @if $value {
-    @if $breakpoint == mobile {
+    @if $breakpoint == mobile or $breakpoint == mobile-v2 {
       @media (max-width: $value) {
         @content;
       }

package/src/mixins/_typography.scss

@@ -34,7 +34,7 @@
   }
 }
 
-// Include font styles. Three versions: ld, sd or fluid
+// Include font styles. Mobile, Desktop or responsive.
 // use:
 //  .element {
 //    @include rds-font-style(rds-typography-headline-1);
@@ -70,10 +70,8 @@
 
 @mixin rds-font-style($name) {
   @if map.has-key($rds-types-fluid, $name) {
-  
     @include rds-font-style-sd($name);
 
-
     @include breakpoint(tablet) {
       @include rds-font-style-md($name);
     }
@@ -85,7 +83,24 @@
     @include breakpoint(ultrawide) {
       @include rds-font-style-xd($name);
     }
-    
+
+    :where(body[data-rds-layout='b']) & {
+      @include breakpoint(tablet) {
+        @include rds-font-style-sd($name);
+      }
+
+      @include breakpoint(tablet-v2) {
+        @include rds-font-style-md($name);
+      }
+
+      @include breakpoint(desktop-v2) {
+        @include rds-font-style-ld($name);
+      }
+
+      @include breakpoint(ultrawide-v2) {
+        @include rds-font-style-xd($name);
+      }
+    }
   } @else {
     @include rds-font-style-sd($name);
   }

package/src/variables/_grid.scss

@@ -5,6 +5,12 @@ $grid-config: (
   desktop: (max-columns: 12, gap: 24px)
 ) !default;
 
+$grid-config-editorial: (
+  mobile-v2: (max-columns: 4, gap: 16px),
+  tablet-v2: (max-columns: 8, gap: 24px),
+  desktop-v2: (max-columns: 12, gap: 24px)
+) !default;
+
 $g-padding-mobile: 16px;
 $g-padding-tablet: 24px;
 $g-padding-desktop: 32px;

package/src/variables/_layout.scss

@@ -16,5 +16,10 @@ $breakpoints: (
   tablet: $bp-tablet,
   desktop: $bp-desktop,
   desktop-large: $bp-desktop-large,
-  ultrawide: $bp-ultrawide
+  ultrawide: $bp-ultrawide,
+  mobile-v2: 799px,
+  tablet-v2: 800px,
+  desktop-v2: 1024px,
+  desktop-large-v2: 1250px,
+  ultrawide-v2: 1584px
 ) !default;

package/src/variables/_typography.scss

@@ -56,7 +56,7 @@ $rds-typography-body-01-bold: (
 );
 
 $rds-typography-body-01-underline: (
-  font: #{calc(16 / $f-base) + rem} / #{calc(21 / $f-base) + rem} $rds-typography-f-text,
+  font: #{calc(16 / $f-base) + rem} / #{calc(24 / $f-base) + rem} $rds-typography-f-text,
 );
 
 $rds-typography-body-02: (
@@ -124,7 +124,7 @@ $rds-typography-headline-00: (
     font: #{calc(40 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(56 / $f-base) + rem} / #{calc(68 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(40 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(64 / $f-base) + rem} / #{calc(80 / $f-base) + rem} $rds-typography-f-headline
@@ -139,7 +139,7 @@ $rds-typography-headline-01: (
     font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(40 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(48 / $f-base) + rem} / #{calc(60 / $f-base) + rem} $rds-typography-f-headline
@@ -155,7 +155,7 @@ $rds-typography-headline-02: (
     font: #{calc(28 / $f-base) + rem} / #{calc(36 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(32 / $f-base) + rem} / #{calc(40 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(28 / $f-base) + rem} / #{calc(36 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(36 / $f-base) + rem} / #{calc(48 / $f-base) + rem} $rds-typography-f-headline
@@ -170,7 +170,7 @@ $rds-typography-headline-03: (
     font: #{calc(22 / $f-base) + rem} / #{calc(30 / $f-base) + rem} $rds-typography-f-headline
   ),
   md: (
-    font: #{calc(24 / $f-base) + rem} / #{calc(32 / $f-base) + rem} $rds-typography-f-headline
+    font: #{calc(22 / $f-base) + rem} / #{calc(30 / $f-base) + rem} $rds-typography-f-headline
   ),
   ld: (
     font: #{calc(28 / $f-base) + rem} / #{calc(36 / $f-base) + rem} $rds-typography-f-headline
@@ -265,9 +265,9 @@ $rds-types-all: (
   caption-tag: $rds-typography-caption-tag,
   body-01: $rds-typography-body-01,
   body-02: $rds-typography-body-02,
-  body-01-bold: $rds-typography-body-01-underline,
+  body-01-bold: $rds-typography-body-01-bold,
   body-01-underline: $rds-typography-body-01-underline,
-  body-02-bold: $rds-typography-body-02-underline,
+  body-02-bold: $rds-typography-body-02-bold,
   body-02-underline: $rds-typography-body-02-underline,
   button-01: $rds-typography-button-01,
   button-02: $rds-typography-button-02,

package/src/variables.css

@@ -28,7 +28,7 @@
   --rds-body-01: 1rem/1.5rem RepsolSoleTextRegular;
   --rds-body-02: 0.875rem/1.25rem RepsolSoleTextRegular;
   --rds-body-01-bold: 1rem/1.5rem RepsolSoleTextBold;
-  --rds-body-01-underline: 1rem/1.3125rem RepsolSoleTextRegular;
+  --rds-body-01-underline: 1rem/1.5rem RepsolSoleTextRegular;
   --rds-body-02-bold: 0.875rem/1.25rem RepsolSoleTextBold;
   --rds-body-02-underline: 0.875rem/1.25rem RepsolSoleTextRegular;
   --rds-button-01: 1rem/1.5rem RepsolSoleTextBold;
@@ -44,19 +44,19 @@
   --rds-title-01: 1.125rem/1.625rem RepsolSoleTextBold;
   --rds-title-02: 1rem/1.5rem RepsolSoleTextBold;
   --rds-headline-00-sd: 2.5rem/3rem RepsolSoleDisplayRegular;
-  --rds-headline-00-md: 3.5rem/4.25rem RepsolSoleDisplayRegular;
+  --rds-headline-00-md: 2.5rem/3rem RepsolSoleDisplayRegular;
   --rds-headline-00-ld: 4rem/5rem RepsolSoleDisplayRegular;
   --rds-headline-00-xd: 4.5rem/5.75rem RepsolSoleDisplayRegular;
   --rds-headline-01-sd: 2rem/2.5rem RepsolSoleDisplayRegular;
-  --rds-headline-01-md: 2.5rem/3rem RepsolSoleDisplayRegular;
+  --rds-headline-01-md: 2rem/2.5rem RepsolSoleDisplayRegular;
   --rds-headline-01-ld: 3rem/3.75rem RepsolSoleDisplayRegular;
   --rds-headline-01-xd: 3.5rem/4.25rem RepsolSoleDisplayRegular;
   --rds-headline-02-sd: 1.75rem/2.25rem RepsolSoleDisplayRegular;
-  --rds-headline-02-md: 2rem/2.5rem RepsolSoleDisplayRegular;
+  --rds-headline-02-md: 1.75rem/2.25rem RepsolSoleDisplayRegular;
   --rds-headline-02-ld: 2.25rem/3rem RepsolSoleDisplayRegular;
   --rds-headline-02-xd: 2.75rem/3.5rem RepsolSoleDisplayRegular;
   --rds-headline-03-sd: 1.375rem/1.875rem RepsolSoleDisplayRegular;
-  --rds-headline-03-md: 1.5rem/2rem RepsolSoleDisplayRegular;
+  --rds-headline-03-md: 1.375rem/1.875rem RepsolSoleDisplayRegular;
   --rds-headline-03-ld: 1.75rem/2.25rem RepsolSoleDisplayRegular;
   --rds-headline-03-xd: 2rem/2.5rem RepsolSoleDisplayRegular;
   --rds-headline-04-sd: 1.125rem/1.625rem RepsolSoleDisplayRegular;