fix components

libs/ui/src/lib/styles/configs.ts

@@ -2,13 +2,18 @@
 export const shellTheming = (ShellClass: string) =>
   `pi-shell pi-shell__${ShellClass}`;
 
+/**
+ * Tema visual de toda la app. Se aplica a un contenedor raíz (normalmente
+ * `<body>`) y de él cuelga el aspecto de botones, cards, campos, etc.
+ *
+ * Dentro de un shell se puede forzar el aspecto contrario en un subárbol con
+ * `.is-private` / `.is-public` (p. ej. el input `context` de `pi-card`).
+ */
 export const ShellClass = {
-  // Deale Landings (Public)
-  DealeLandings: shellTheming('deale-landings'),
-  // Deale SaaS (Private)
-  DealeSaaS: shellTheming('deale-saas'),
-  // Deale Website (Public)
-  DealeWebsite: shellTheming('deale-website'),
+  /** Aspecto de aplicación: rellenos planos y sólidos, controles compactos. */
+  Default: shellTheming('default'),
+  /** Aspecto de marketing: degradados, brillo al hover y controles mayores. */
+  Alternative: shellTheming('alternative'),
 };
 
 // View component level
@@ -105,6 +110,10 @@ export const UserTypeClass = {
 // Layouts (Add to any view)
 export const LayoutTypeClass = {
   // Specifics
+  //
+  // Authentication y Dashboard son composiciones de aplicación (estados del
+  // aside, tipos de usuario): la capa genérica no trae su CSS, lo aporta la app
+  // que los use. Ver la página «Layouts» del playground.
   Authentication: 'pi-layout pi-layout__00-authentication',
   Dashboard: 'pi-layout pi-layout__01-dashboard',
   // TODO: Delete old dashboard layout when ready other users
@@ -113,8 +122,11 @@ export const LayoutTypeClass = {
   // Full Width
   FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
   // Full Width Centered
+  // El modificador es `02-full-width--auto`, no `02a-...`: así lo espera
+  // `_pi-02a-full-width-auto-layout.scss`. Con el nombre antiguo la constante
+  // no casaba con ningún selector y el `margin: auto` nunca se aplicaba.
   FullWidthAuto:
-    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
+    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02-full-width--auto',
   // Main Vertically Centered
   VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
   // Main Space Between
@@ -130,18 +142,12 @@ export const LayoutTypeClass = {
   List: 'pi-layout pi-layout__07-list',
   // Infinite Scroll
   ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
-  // List Left
-  PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
   // Form Layout
   Form: 'pi-layout pi-layout__08-form',
   // Pricing Layout
   Pricing: 'pi-layout pi-layout__09-pricing',
 };
 
-export const WebsiteScreenTypeClass = {
-  ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
-};
-
 // Wrappers
 export const wrapperType = (wrapperClass: string) =>
   `pi-wrapper pi-wrapper__${wrapperClass}`;