nolo
January 24, 2025, 1:15pm
1
I did this recently for a theme, prompting Claude-3.5, embedded with Cursor, to generate documentation. It worked quite well, so I wanted to try it for the Discourse core codebase.
I restricted context to .scss-files, but do run into context limits and the model keeps hesitating to actually include all properties. So wanted to share it, maybe someone has a better prompt or approach?
@Codebase Generate a complete table of ALL custom CSS properties from the Discourse codebase. Include every property from all files and organize them in the following categories: Layout & Dimensions, Border Radius, Navigation, Sidebar, Input Controls, Chat, Typograpy, Theme Colors, RGB Color Values. For each property, show its name, description, default value, and source file. Format the property names and default values with code backticks. Do not skip any properties, do not ask questions, and do not add commentary.
Property Name
Description
Default Value
Source File
--d-max-widthMaximum content width
1110pxdesktop/discourse.scss
--topic-body-widthWidth of topic body content
750pxcommon/foundation/base.scss
--topic-body-width-paddingPadding for topic body
20pxcommon/foundation/base.scss
--topic-avatar-widthWidth of avatar in topics
45pxcommon/foundation/base.scss
--d-wrap-padding-hHorizontal padding for wrap container
0.67emcommon/base/discourse.scss
Property Name
Description
Default Value
Source File
--d-border-radiusDefault border radius
2pxcommon/foundation/base.scss
--d-border-radius-largeLarge border radius
2pxcommon/foundation/base.scss
--d-nav-pill-border-radiusBorder radius for nav pills
2pxcommon/foundation/base.scss
--d-button-border-radiusBorder radius for buttons
2pxcommon/foundation/base.scss
--d-input-border-radiusBorder radius for inputs
2pxcommon/foundation/base.scss
--full-page-border-radiusBorder radius for full page
12pxplugins/chat/assets/stylesheets/common/base-common.scss
Property Name
Description
Default Value
Source File
--d-nav-colorNavigation text color
var(--primary)common/base/discourse.scss
--d-nav-bg-colorNavigation background
transparentcommon/base/discourse.scss
--d-nav-color--hoverNavigation hover text color
var(--primary)common/base/discourse.scss
--d-nav-bg-color--hoverNavigation hover background
var(--d-hover)common/base/discourse.scss
--d-nav-color--activeActive navigation text color
var(--tertiary)common/base/discourse.scss
--d-nav-bg-color--activeActive navigation background
transparentcommon/base/discourse.scss
--d-nav-border-color--activeActive navigation border
var(--d-nav-color--active)common/base/discourse.scss
--d-nav-underline-heightNavigation underline height
0.125emcommon/base/discourse.scss
Property Name
Description
Default Value
Source File
--d-sidebar-widthWidth of sidebar
17emcommon/base/sidebar.scss
--d-sidebar-row-horizontal-paddingHorizontal padding for rows
1remcommon/base/sidebar.scss
--d-sidebar-row-heightHeight of sidebar rows
2.2emcommon/base/sidebar.scss
--d-sidebar-animation-timeAnimation duration
0.25scommon/base/sidebar.scss
--d-sidebar-animation-easeAnimation easing
ease-in-outcommon/base/sidebar.scss
--d-sidebar-backgroundBackground color
var(--secondary)common/base/sidebar.scss
--d-sidebar-admin-backgroundAdmin section background
var(--primary-very-low)common/base/sidebar.scss
--d-sidebar-footer-fadeFooter fade color
rgba(var(--secondary-rgb), 1)common/base/sidebar.scss
--d-sidebar-header-colorHeader text color
var(--primary-medium)common/base/sidebar.scss
--d-sidebar-header-icon-colorHeader icon color
var(--primary-medium)common/base/sidebar.scss
--d-sidebar-border-colorBorder color
var(--primary-low)common/base/sidebar.scss
--d-sidebar-link-colorLink text color
var(--primary-high)common/base/sidebar.scss
--d-sidebar-link-icon-colorLink icon color
var(--primary-500)common/base/sidebar.scss
--d-sidebar-link-badge-colorLink badge color
var(--primary-700)common/base/sidebar.scss
--d-sidebar-prefix-backgroundPrefix background color
var(--primary-low)common/base/sidebar.scss
--d-sidebar-prefix-colorPrefix text color
var(--d-sidebar-link-color)common/base/sidebar.scss
--d-sidebar-suffix-colorSuffix color
var(--tertiary-med-or-tertiary)common/base/sidebar.scss
Property Name
Description
Default Value
Source File
--d-input-bg-colorInput background color
var(--secondary)common/base/discourse.scss
--d-input-text-colorInput text color
var(--primary)common/base/discourse.scss
--d-input-borderInput border style
1px solid var(--primary-400)common/base/discourse.scss
--d-input-bg-color--disabledDisabled input background
var(--primary-very-low)common/base/discourse.scss
--d-input-text-color--disabledDisabled input text color
var(--primary-medium)common/base/discourse.scss
--d-input-border--disabledDisabled input border
1px solid var(--primary-low)common/base/discourse.scss
Property Name
Description
Default Value
Source File
--message-left-widthLeft width for messages
42pxplugins/chat/assets/stylesheets/common/base-common.scss
--channel-list-avatar-sizeSize of avatars in channel list
30pxplugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-offsetHeader offset for chat
45pxplugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-expanded-offsetExpanded header offset for chat
0pxplugins/chat/assets/stylesheets/common/base-common.scss
Property Name
Description
Default Value
Source File
--d-font-family--monospaceMonospace font stack
ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospacecommon/foundation/base.scss
--heading-font-familyFont family for headings
Referenced in code
common/base/discourse.scss
--font-familyBase font family
Referenced in code
common/base/discourse.scss
--line-height-smallSmall line height
Referenced in code
common/base/_topic-list.scss
--line-height-mediumMedium line height
Referenced in code
common/base/_topic-list.scss
--line-height-largeLarge line height
Referenced in code
common/base/_topic-list.scss
Property Name
Description
Default Value
Source File
--primaryPrimary color
#222222color_definitions.scss
--secondarySecondary color
#ffffffcolor_definitions.scss
--tertiaryTertiary color
#0088cccolor_definitions.scss
--quaternaryQuaternary color
#e45735color_definitions.scss
--header_backgroundHeader background color
#ffffffcolor_definitions.scss
--header_primaryHeader primary color
#222222color_definitions.scss
--highlightHighlight color
#ffff4dcolor_definitions.scss
--dangerDanger/error color
#e45735color_definitions.scss
--successSuccess color
#009900color_definitions.scss
--loveLove/heart color
#fa6c8dcolor_definitions.scss
--d-selectedSelected state color
#e9e9e9color_definitions.scss
--d-hoverHover state color
#f2f2f2color_definitions.scss
Property Name
Description
Default Value
Source File
--always-black-rgbBlack color in RGB
0, 0, 0color_definitions.scss
--primary-rgbPrimary color in RGB
34, 34, 34color_definitions.scss
--primary-low-rgbLow primary color in RGB
242, 242, 242color_definitions.scss
--primary-very-low-rgbVery low primary color in RGB
248, 248, 248color_definitions.scss
--secondary-rgbSecondary color in RGB
255, 255, 255color_definitions.scss
--header_background-rgbHeader background in RGB
255, 255, 255color_definitions.scss
--tertiary-rgbTertiary color in RGB
0, 136, 204color_definitions.scss
--highlight-rgbHighlight color in RGB
255, 255, 77color_definitions.scss
--success-rgbSuccess color in RGB
0, 153, 0color_definitions.scss
11 Likes
Looks great! I can already see a few things that I can use in my own theme.
2 Likes
Heliosurge
January 25, 2025, 8:52am
3
2 Likes
