# Documenting custom properties
**URL:** https://meta.discourse.org/t/documenting-custom-properties/348806
**Category:** Development
**Created:** [January 24, 2025, 1:15pm UTC](https://meta.discourse.org/t/documenting-custom-properties/348806 "2025-01-24T13:15:35Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [January 24, 2025, 1:15pm UTC](https://meta.discourse.org/t/documenting-custom-properties/348806/1 "2025-01-24T13:15:35Z")
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.
### Layout & Dimensions
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--d-max-width` | Maximum content width | `1110px` | desktop/discourse.scss |
| `--topic-body-width` | Width of topic body content | `750px` | common/foundation/base.scss |
| `--topic-body-width-padding` | Padding for topic body | `20px` | common/foundation/base.scss |
| `--topic-avatar-width` | Width of avatar in topics | `45px` | common/foundation/base.scss |
| `--d-wrap-padding-h` | Horizontal padding for wrap container | `0.67em` | common/base/discourse.scss |
### Border Radius
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--d-border-radius` | Default border radius | `2px` | common/foundation/base.scss |
| `--d-border-radius-large` | Large border radius | `2px` | common/foundation/base.scss |
| `--d-nav-pill-border-radius` | Border radius for nav pills | `2px` | common/foundation/base.scss |
| `--d-button-border-radius` | Border radius for buttons | `2px` | common/foundation/base.scss |
| `--d-input-border-radius` | Border radius for inputs | `2px` | common/foundation/base.scss |
| `--full-page-border-radius` | Border radius for full page | `12px` | plugins/chat/assets/stylesheets/common/base-common.scss |
### Navigation
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--d-nav-color` | Navigation text color | `var(--primary)` | common/base/discourse.scss |
| `--d-nav-bg-color` | Navigation background | `transparent` | common/base/discourse.scss |
| `--d-nav-color--hover` | Navigation hover text color | `var(--primary)` | common/base/discourse.scss |
| `--d-nav-bg-color--hover` | Navigation hover background | `var(--d-hover)` | common/base/discourse.scss |
| `--d-nav-color--active` | Active navigation text color | `var(--tertiary)` | common/base/discourse.scss |
| `--d-nav-bg-color--active` | Active navigation background | `transparent` | common/base/discourse.scss |
| `--d-nav-border-color--active` | Active navigation border | `var(--d-nav-color--active)` | common/base/discourse.scss |
| `--d-nav-underline-height` | Navigation underline height | `0.125em` | common/base/discourse.scss |
### Sidebar
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--d-sidebar-width` | Width of sidebar | `17em` | common/base/sidebar.scss |
| `--d-sidebar-row-horizontal-padding` | Horizontal padding for rows | `1rem` | common/base/sidebar.scss |
| `--d-sidebar-row-height` | Height of sidebar rows | `2.2em` | common/base/sidebar.scss |
| `--d-sidebar-animation-time` | Animation duration | `0.25s` | common/base/sidebar.scss |
| `--d-sidebar-animation-ease` | Animation easing | `ease-in-out` | common/base/sidebar.scss |
| `--d-sidebar-background` | Background color | `var(--secondary)` | common/base/sidebar.scss |
| `--d-sidebar-admin-background` | Admin section background | `var(--primary-very-low)` | common/base/sidebar.scss |
| `--d-sidebar-footer-fade` | Footer fade color | `rgba(var(--secondary-rgb), 1)` | common/base/sidebar.scss |
| `--d-sidebar-header-color` | Header text color | `var(--primary-medium)` | common/base/sidebar.scss |
| `--d-sidebar-header-icon-color` | Header icon color | `var(--primary-medium)` | common/base/sidebar.scss |
| `--d-sidebar-border-color` | Border color | `var(--primary-low)` | common/base/sidebar.scss |
| `--d-sidebar-link-color` | Link text color | `var(--primary-high)` | common/base/sidebar.scss |
| `--d-sidebar-link-icon-color` | Link icon color | `var(--primary-500)` | common/base/sidebar.scss |
| `--d-sidebar-link-badge-color` | Link badge color | `var(--primary-700)` | common/base/sidebar.scss |
| `--d-sidebar-prefix-background` | Prefix background color | `var(--primary-low)` | common/base/sidebar.scss |
| `--d-sidebar-prefix-color` | Prefix text color | `var(--d-sidebar-link-color)` | common/base/sidebar.scss |
| `--d-sidebar-suffix-color` | Suffix color | `var(--tertiary-med-or-tertiary)` | common/base/sidebar.scss |
### Input Controls
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--d-input-bg-color` | Input background color | `var(--secondary)` | common/base/discourse.scss |
| `--d-input-text-color` | Input text color | `var(--primary)` | common/base/discourse.scss |
| `--d-input-border` | Input border style | `1px solid var(--primary-400)` | common/base/discourse.scss |
| `--d-input-bg-color--disabled` | Disabled input background | `var(--primary-very-low)` | common/base/discourse.scss |
| `--d-input-text-color--disabled` | Disabled input text color | `var(--primary-medium)` | common/base/discourse.scss |
| `--d-input-border--disabled` | Disabled input border | `1px solid var(--primary-low)` | common/base/discourse.scss |
### Chat
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--message-left-width` | Left width for messages | `42px` | plugins/chat/assets/stylesheets/common/base-common.scss |
| `--channel-list-avatar-size` | Size of avatars in channel list | `30px` | plugins/chat/assets/stylesheets/common/base-common.scss |
| `--chat-header-offset` | Header offset for chat | `45px` | plugins/chat/assets/stylesheets/common/base-common.scss |
| `--chat-header-expanded-offset` | Expanded header offset for chat | `0px` | plugins/chat/assets/stylesheets/common/base-common.scss |
### Typography
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--d-font-family--monospace` | Monospace font stack | `ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospace` | common/foundation/base.scss |
| `--heading-font-family` | Font family for headings | Referenced in code | common/base/discourse.scss |
| `--font-family` | Base font family | Referenced in code | common/base/discourse.scss |
| `--line-height-small` | Small line height | Referenced in code | common/base/\_topic-list.scss |
| `--line-height-medium` | Medium line height | Referenced in code | common/base/\_topic-list.scss |
| `--line-height-large` | Large line height | Referenced in code | common/base/\_topic-list.scss |
### Theme Colors
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--primary` | Primary color | `#222222` | color\_definitions.scss |
| `--secondary` | Secondary color | `#ffffff` | color\_definitions.scss |
| `--tertiary` | Tertiary color | `#0088cc` | color\_definitions.scss |
| `--quaternary` | Quaternary color | `#e45735` | color\_definitions.scss |
| `--header_background` | Header background color | `#ffffff` | color\_definitions.scss |
| `--header_primary` | Header primary color | `#222222` | color\_definitions.scss |
| `--highlight` | Highlight color | `#ffff4d` | color\_definitions.scss |
| `--danger` | Danger/error color | `#e45735` | color\_definitions.scss |
| `--success` | Success color | `#009900` | color\_definitions.scss |
| `--love` | Love/heart color | `#fa6c8d` | color\_definitions.scss |
| `--d-selected` | Selected state color | `#e9e9e9` | color\_definitions.scss |
| `--d-hover` | Hover state color | `#f2f2f2` | color\_definitions.scss |
### RGB Color Values
| Property Name | Description | Default Value | Source File |
| --- | --- | --- | --- |
| `--always-black-rgb` | Black color in RGB | `0, 0, 0` | color\_definitions.scss |
| `--primary-rgb` | Primary color in RGB | `34, 34, 34` | color\_definitions.scss |
| `--primary-low-rgb` | Low primary color in RGB | `242, 242, 242` | color\_definitions.scss |
| `--primary-very-low-rgb` | Very low primary color in RGB | `248, 248, 248` | color\_definitions.scss |
| `--secondary-rgb` | Secondary color in RGB | `255, 255, 255` | color\_definitions.scss |
| `--header_background-rgb` | Header background in RGB | `255, 255, 255` | color\_definitions.scss |
| `--tertiary-rgb` | Tertiary color in RGB | `0, 136, 204` | color\_definitions.scss |
| `--highlight-rgb` | Highlight color in RGB | `255, 255, 77` | color\_definitions.scss |
| `--success-rgb` | Success color in RGB | `0, 153, 0` | color\_definitions.scss |
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [January 25, 2025, 4:47am UTC](https://meta.discourse.org/t/documenting-custom-properties/348806/2 "2025-01-25T04:47:26Z")
Looks great! I can already see a few things that I can use in my own theme.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 25, 2025, 8:52am UTC](https://meta.discourse.org/t/documenting-custom-properties/348806/3 "2025-01-25T08:52:29Z")
This is quite awesome and very helpful. Thank you!
🍻 🕶 👍 ✨