记录自定义属性

[manuel (Manuel Kostka)]

我最近为某个主题做了这件事，让 Cursor 中嵌入的 Claude-3.5 生成文档。效果相当不错，所以我想为 Discourse 核心代码库尝试一下。

我将上下文限制在 .scss 文件，但确实遇到了上下文限制，模型在实际包含所有属性时会犹豫不决。所以想分享一下，也许有人有更好的提示或方法？

@Codebase 从 Discourse 代码库生成一个包含所有自定义 CSS 属性的完整表格。包含所有文件中的每个属性，并按以下类别组织：布局与尺寸、圆角、导航、侧边栏、输入控件、聊天、排版、主题颜色、RGB 颜色值。对于每个属性，显示其名称、描述、默认值和源文件。使用代码反引号格式化属性名称和默认值。不要遗漏任何属性，不要提问，不要添加评论。

布局与尺寸

属性名称	描述	默认值	源文件
--d-max-width	内容最大宽度	1110px	desktop/discourse.scss
--topic-body-width	主题正文内容宽度	750px	common/foundation/base.scss
--topic-body-width-padding	主题正文内边距	20px	common/foundation/base.scss
--topic-avatar-width	主题中头像宽度	45px	common/foundation/base.scss
--d-wrap-padding-h	容器水平内边距	0.67em	common/base/discourse.scss

圆角

属性名称	描述	默认值	源文件
--d-border-radius	默认圆角	2px	common/foundation/base.scss
--d-border-radius-large	大圆角	2px	common/foundation/base.scss
--d-nav-pill-border-radius	导航胶囊圆角	2px	common/foundation/base.scss
--d-button-border-radius	按钮圆角	2px	common/foundation/base.scss
--d-input-border-radius	输入框圆角	2px	common/foundation/base.scss
--full-page-border-radius	全屏圆角	12px	plugins/chat/assets/stylesheets/common/base-common.scss

导航

属性名称	描述	默认值	源文件
--d-nav-color	导航文本颜色	var(--primary)	common/base/discourse.scss
--d-nav-bg-color	导航背景	transparent	common/base/discourse.scss
--d-nav-color--hover	导航悬停文本颜色	var(--primary)	common/base/discourse.scss
--d-nav-bg-color--hover	导航悬停背景	var(--d-hover)	common/base/discourse.scss
--d-nav-color--active	导航激活文本颜色	var(--tertiary)	common/base/discourse.scss
--d-nav-bg-color--active	导航激活背景	transparent	common/base/discourse.scss
--d-nav-border-color--active	导航激活边框	var(--d-nav-color--active)	common/base/discourse.scss
--d-nav-underline-height	导航下划线高度	0.125em	common/base/discourse.scss

侧边栏

属性名称	描述	默认值	源文件
--d-sidebar-width	侧边栏宽度	17em	common/base/sidebar.scss
--d-sidebar-row-horizontal-padding	行水平内边距	1rem	common/base/sidebar.scss
--d-sidebar-row-height	行高度	2.2em	common/base/sidebar.scss
--d-sidebar-animation-time	动画时长	0.25s	common/base/sidebar.scss
--d-sidebar-animation-ease	动画缓动	ease-in-out	common/base/sidebar.scss
--d-sidebar-background	背景颜色	var(--secondary)	common/base/sidebar.scss
--d-sidebar-admin-background	管理员区域背景	var(--primary-very-low)	common/base/sidebar.scss
--d-sidebar-footer-fade	页脚渐变颜色	rgba(var(--secondary-rgb), 1)	common/base/sidebar.scss
--d-sidebar-header-color	页眉文本颜色	var(--primary-medium)	common/base/sidebar.scss
--d-sidebar-header-icon-color	页眉图标颜色	var(--primary-medium)	common/base/sidebar.scss
--d-sidebar-border-color	边框颜色	var(--primary-low)	common/base/sidebar.scss
--d-sidebar-link-color	链接文本颜色	var(--primary-high)	common/base/sidebar.scss
--d-sidebar-link-icon-color	链接图标颜色	var(--primary-500)	common/base/sidebar.scss
--d-sidebar-link-badge-color	链接徽章颜色	var(--primary-700)	common/base/sidebar.scss
--d-sidebar-prefix-background	前缀背景颜色	var(--primary-low)	common/base/sidebar.scss
--d-sidebar-prefix-color	前缀文本颜色	var(--d-sidebar-link-color)	common/base/sidebar.scss
--d-sidebar-suffix-color	后缀颜色	var(--tertiary-med-or-tertiary)	common/base/sidebar.scss

输入控件

属性名称	描述	默认值	源文件
--d-input-bg-color	输入框背景颜色	var(--secondary)	common/base/discourse.scss
--d-input-text-color	输入框文本颜色	var(--primary)	common/base/discourse.scss
--d-input-border	输入框边框样式	1px solid var(--primary-400)	common/base/discourse.scss
--d-input-bg-color--disabled	禁用输入框背景	var(--primary-very-low)	common/base/discourse.scss
--d-input-text-color--disabled	禁用输入框文本颜色	var(--primary-medium)	common/base/discourse.scss
--d-input-border--disabled	禁用输入框边框	1px solid var(--primary-low)	common/base/discourse.scss

聊天

属性名称	描述	默认值	源文件
--message-left-width	消息左侧宽度	42px	plugins/chat/assets/stylesheets/common/base-common.scss
--channel-list-avatar-size	频道列表中头像大小	30px	plugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-offset	聊天页眉偏移	45px	plugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-expanded-offset	展开聊天页眉偏移	0px	plugins/chat/assets/stylesheets/common/base-common.scss

排版

属性名称	描述	默认值	源文件
--d-font-family--monospace	等宽字体栈	ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospace	common/foundation/base.scss
--heading-font-family	标题字体	在代码中引用	common/base/discourse.scss
--font-family	基本字体	在代码中引用	common/base/discourse.scss
--line-height-small	小行高	在代码中引用	common/base/_topic-list.scss
--line-height-medium	中行高	在代码中引用	common/base/_topic-list.scss
--line-height-large	大行高	在代码中引用	common/base/_topic-list.scss

主题颜色

属性名称	描述	默认值	源文件
--primary	主色	#222222	color_definitions.scss
--secondary	次色	#ffffff	color_definitions.scss
--tertiary	第三色	#0088cc	color_definitions.scss
--quaternary	第四色	#e45735	color_definitions.scss
--header_background	页眉背景色	#ffffff	color_definitions.scss
--header_primary	页眉主色	#222222	color_definitions.scss
--highlight	强调色	#ffff4d	color_definitions.scss
--danger	危险/错误颜色	#e45735	color_definitions.scss
--success	成功颜色	#009900	color_definitions.scss
--love	爱心颜色	#fa6c8d	color_definitions.scss
--d-selected	选中状态颜色	#e9e9e9	color_definitions.scss
--d-hover	悬停状态颜色	#f2f2f2	color_definitions.scss

RGB 颜色值

属性名称	描述	默认值	源文件
--always-black-rgb	黑色 RGB	0, 0, 0	color_definitions.scss
--primary-rgb	主色 RGB	34, 34, 34	color_definitions.scss
--primary-low-rgb	主色低亮度 RGB	242, 242, 242	color_definitions.scss
--primary-very-low-rgb	主色极低亮度 RGB	248, 248, 248	color_definitions.scss
--secondary-rgb	次色 RGB	255, 255, 255	color_definitions.scss
--header_background-rgb	页眉背景 RGB	255, 255, 255	color_definitions.scss
--tertiary-rgb	第三色 RGB	0, 136, 204	color_definitions.scss
--highlight-rgb	强调色 RGB	255, 255, 77	color_definitions.scss
--success-rgb	成功颜色 RGB	0, 153, 0	color_definitions.scss

[NateDhaliwal]

看起来很棒！我已经看到一些可以在我自己的主题中使用的东西了。

[Heliosurge (Dan DeMontmorency)]

这太棒了，非常有帮助。谢谢！