Documentando propiedades personalizadas

[manuel (Manuel Kostka)]

Hice esto recientemente para un tema, pidiéndole a Claude-3.5, integrado en Cursor, que generara documentación. Funcionó bastante bien, así que quería probarlo para la base de código principal de Discourse.

Restringí el contexto a archivos .scss, pero me encuentro con límites de contexto y el modelo sigue dudando en incluir todas las propiedades. Así que quería compartirlo, ¿quizás alguien tiene un mejor prompt o enfoque?

@Codebase Genera una tabla completa de TODAS las propiedades CSS personalizadas de la base de código de Discourse. Incluye cada propiedad de todos los archivos y organízalas en las siguientes categorías: Diseño y Dimensiones, Radio de Borde, Navegación, Barra Lateral, Controles de Entrada, Chat, Tipografía, Colores del Tema, Valores de Color RGB. Para cada propiedad, muestra su nombre, descripción, valor predeterminado y archivo de origen. Formatea los nombres de las propiedades y los valores predeterminados con comillas invertidas. No omitas ninguna propiedad, no hagas preguntas y no añadas comentarios.

Diseño y Dimensiones

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--d-max-width	Ancho máximo del contenido	1110px	desktop/discourse.scss
--topic-body-width	Ancho del contenido del cuerpo del tema	750px	common/foundation/base.scss
--topic-body-width-padding	Relleno del cuerpo del tema	20px	common/foundation/base.scss
--topic-avatar-width	Ancho del avatar en los temas	45px	common/foundation/base.scss
--d-wrap-padding-h	Relleno horizontal para el contenedor envolvente	0.67em	common/base/discourse.scss

Radio de Borde

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--d-border-radius	Radio de borde predeterminado	2px	common/foundation/base.scss
--d-border-radius-large	Radio de borde grande	2px	common/foundation/base.scss
--d-nav-pill-border-radius	Radio de borde para píldoras de navegación	2px	common/foundation/base.scss
--d-button-border-radius	Radio de borde para botones	2px	common/foundation/base.scss
--d-input-border-radius	Radio de borde para entradas	2px	common/foundation/base.scss
--full-page-border-radius	Radio de borde para página completa	12px	plugins/chat/assets/stylesheets/common/base-common.scss

Navegación

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--d-nav-color	Color del texto de navegación	var(--primary)	common/base/discourse.scss
--d-nav-bg-color	Fondo de navegación	transparent	common/base/discourse.scss
--d-nav-color--hover	Color del texto de navegación al pasar el ratón	var(--primary)	common/base/discourse.scss
--d-nav-bg-color--hover	Fondo de navegación al pasar el ratón	var(--d-hover)	common/base/discourse.scss
--d-nav-color--active	Color del texto de navegación activo	var(--tertiary)	common/base/discourse.scss
--d-nav-bg-color--active	Fondo de navegación activo	transparent	common/base/discourse.scss
--d-nav-border-color--active	Borde de navegación activo	var(--d-nav-color--active)	common/base/discourse.scss
--d-nav-underline-height	Altura del subrayado de navegación	0.125em	common/base/discourse.scss

Barra Lateral

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--d-sidebar-width	Ancho de la barra lateral	17em	common/base/sidebar.scss
--d-sidebar-row-horizontal-padding	Relleno horizontal para las filas	1rem	common/base/sidebar.scss
--d-sidebar-row-height	Altura de las filas de la barra lateral	2.2em	common/base/sidebar.scss
--d-sidebar-animation-time	Duración de la animación	0.25s	common/base/sidebar.scss
--d-sidebar-animation-ease	Suavizado de la animación	ease-in-out	common/base/sidebar.scss
--d-sidebar-background	Color de fondo	var(--secondary)	common/base/sidebar.scss
--d-sidebar-admin-background	Fondo de la sección de administración	var(--primary-very-low)	common/base/sidebar.scss
--d-sidebar-footer-fade	Color de desvanecimiento del pie de página	rgba(var(--secondary-rgb), 1)	common/base/sidebar.scss
--d-sidebar-header-color	Color del texto del encabezado	var(--primary-medium)	common/base/sidebar.scss
--d-sidebar-header-icon-color	Color del icono del encabezado	var(--primary-medium)	common/base/sidebar.scss
--d-sidebar-border-color	Color del borde	var(--primary-low)	common/base/sidebar.scss
--d-sidebar-link-color	Color del texto del enlace	var(--primary-high)	common/base/sidebar.scss
--d-sidebar-link-icon-color	Color del icono del enlace	var(--primary-500)	common/base/sidebar.scss
--d-sidebar-link-badge-color	Color de la insignia del enlace	var(--primary-700)	common/base/sidebar.scss
--d-sidebar-prefix-background	Color de fondo del prefijo	var(--primary-low)	common/base/sidebar.scss
--d-sidebar-prefix-color	Color del texto del prefijo	var(--d-sidebar-link-color)	common/base/sidebar.scss
--d-sidebar-suffix-color	Color del sufijo	var(--tertiary-med-or-tertiary)	common/base/sidebar.scss

Controles de Entrada

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--d-input-bg-color	Color de fondo de la entrada	var(--secondary)	common/base/discourse.scss
--d-input-text-color	Color del texto de la entrada	var(--primary)	common/base/discourse.scss
--d-input-border	Estilo del borde de la entrada	1px solid var(--primary-400)	common/base/discourse.scss
--d-input-bg-color--disabled	Fondo de entrada deshabilitada	var(--primary-very-low)	common/base/discourse.scss
--d-input-text-color--disabled	Color del texto de entrada deshabilitada	var(--primary-medium)	common/base/discourse.scss
--d-input-border--disabled	Borde de entrada deshabilitada	1px solid var(--primary-low)	common/base/discourse.scss

Chat

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--message-left-width	Ancho izquierdo para los mensajes	42px	plugins/chat/assets/stylesheets/common/base-common.scss
--channel-list-avatar-size	Tamaño de los avatares en la lista de canales	30px	plugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-offset	Desplazamiento del encabezado para el chat	45px	plugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-expanded-offset	Desplazamiento del encabezado expandido para el chat	0px	plugins/chat/assets/stylesheets/common/base-common.scss

Tipografía

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--d-font-family--monospace	Pila de fuentes monoespaciadas	ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospace	common/foundation/base.scss
--heading-font-family	Fuente para encabezados	Referenciado en el código	common/base/discourse.scss
--font-family	Fuente base	Referenciado en el código	common/base/discourse.scss
--line-height-small	Altura de línea pequeña	Referenciado en el código	common/base/_topic-list.scss
--line-height-medium	Altura de línea media	Referenciado en el código	common/base/_topic-list.scss
--line-height-large	Altura de línea grande	Referenciado en el código	common/base/_topic-list.scss

Colores del Tema

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--primary	Color primario	#222222	color_definitions.scss
--secondary	Color secundario	#ffffff	color_definitions.scss
--tertiary	Color terciario	#0088cc	color_definitions.scss
--quaternary	Color cuaternario	#e45735	color_definitions.scss
--header_background	Color de fondo del encabezado	#ffffff	color_definitions.scss
--header_primary	Color primario del encabezado	#222222	color_definitions.scss
--highlight	Color de resaltado	#ffff4d	color_definitions.scss
--danger	Color de peligro/error	#e45735	color_definitions.scss
--success	Color de éxito	#009900	color_definitions.scss
--love	Color de amor/corazón	#fa6c8d	color_definitions.scss
--d-selected	Color de estado seleccionado	#e9e9e9	color_definitions.scss
--d-hover	Color de estado al pasar el ratón	#f2f2f2	color_definitions.scss

Valores de Color RGB

Nombre de la Propiedad	Descripción	Valor Predeterminado	Archivo de Origen
--always-black-rgb	Negro en RGB	0, 0, 0	color_definitions.scss
--primary-rgb	Color primario en RGB	34, 34, 34	color_definitions.scss
--primary-low-rgb	Color primario bajo en RGB	242, 242, 242	color_definitions.scss
--primary-very-low-rgb	Color primario muy bajo en RGB	248, 248, 248	color_definitions.scss
--secondary-rgb	Color secundario en RGB	255, 255, 255	color_definitions.scss
--header_background-rgb	Fondo del encabezado en RGB	255, 255, 255	color_definitions.scss
--tertiary-rgb	Color terciario en RGB	0, 136, 204	color_definitions.scss
--highlight-rgb	Color de resaltado en RGB	255, 255, 77	color_definitions.scss
--success-rgb	Color de éxito en RGB	0, 153, 0	color_definitions.scss

[NateDhaliwal]

¡Se ve genial! Ya puedo ver algunas cosas que puedo usar en mi propio tema.

[Heliosurge (Dan DeMontmorency)]

Esto es bastante impresionante y muy útil. ¡Gracias!