manuel
1월 24, 2025, 1:15오후
1
최근에 테마 작업에서 이 방법을 사용해 보았습니다. Cursor에 내장된 Claude-3.5를 통해 문서를 생성하도록 프롬프트를 입력했는데, 꽤 잘 작동해서 Discourse 코어 코드베이스에도 적용해 보고자 합니다.
컨텍스트를 .scss 파일로 제한했지만, 컨텍스트 한계에 부딪히며 모델이 실제로 모든 속성을 포함하는 것을 주저하는 경향이 있습니다. 그래서 공유해 봅니다. 더 나은 프롬프트나 접근 방식이 있는 분이 계신지 궁금합니다.
@Codebase Discourse 코드베이스의 모든 사용자 정의 CSS 속성에 대한 완전한 표를 생성하세요. 모든 파일의 모든 속성을 포함하고 다음 범주로 분류하세요: 레이아웃 및 치수, 테두리 반경, 내비게이션, 사이드바, 입력 컨트롤, 채팅, 타이포그래피, 테마 색상, RGB 색상 값. 각 속성에 대해 이름, 설명, 기본 값, 소스 파일을 표시하세요. 속성 이름과 기본 값은 코드 백틱(`)으로 포맷팅하세요. 어떤 속성도 생략하지 말고, 질문하지 않으며, 주석을 추가하지 마세요.
속성 이름
설명
기본 값
소스 파일
--d-max-width최대 콘텐츠 너비
1110pxdesktop/discourse.scss
--topic-body-width토픽 본문 콘텐츠 너비
750pxcommon/foundation/base.scss
--topic-body-width-padding토픽 본문 패딩
20pxcommon/foundation/base.scss
--topic-avatar-width토픽 내 아바타 너비
45pxcommon/foundation/base.scss
--d-wrap-padding-h래핑 컨테이너의 수직 패딩
0.67emcommon/base/discourse.scss
속성 이름
설명
기본 값
소스 파일
--d-border-radius기본 테두리 반경
2pxcommon/foundation/base.scss
--d-border-radius-large큰 테두리 반경
2pxcommon/foundation/base.scss
--d-nav-pill-border-radius내비게이션 필의 테두리 반경
2pxcommon/foundation/base.scss
--d-button-border-radius버튼의 테두리 반경
2pxcommon/foundation/base.scss
--d-input-border-radius입력 필드의 테두리 반경
2pxcommon/foundation/base.scss
--full-page-border-radius전체 페이지의 테두리 반경
12pxplugins/chat/assets/stylesheets/common/base-common.scss
속성 이름
설명
기본 값
소스 파일
--d-nav-color내비게이션 텍스트 색상
var(--primary)common/base/discourse.scss
--d-nav-bg-color내비게이션 배경색
transparentcommon/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활성 내비게이션 배경색
transparentcommon/base/discourse.scss
--d-nav-border-color--active활성 내비게이션 테두리
var(--d-nav-color--active)common/base/discourse.scss
--d-nav-underline-height내비게이션 밑줄 높이
0.125emcommon/base/discourse.scss
속성 이름
설명
기본 값
소스 파일
--d-sidebar-width사이드바 너비
17emcommon/base/sidebar.scss
--d-sidebar-row-horizontal-padding행의 수평 패딩
1remcommon/base/sidebar.scss
--d-sidebar-row-height사이드바 행 높이
2.2emcommon/base/sidebar.scss
--d-sidebar-animation-time애니메이션 지속 시간
0.25scommon/base/sidebar.scss
--d-sidebar-animation-ease애니메이션 이징
ease-in-outcommon/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메시지 왼쪽 너비
42pxplugins/chat/assets/stylesheets/common/base-common.scss
--channel-list-avatar-size채널 목록의 아바타 크기
30pxplugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-offset채팅 헤더 오프셋
45pxplugins/chat/assets/stylesheets/common/base-common.scss
--chat-header-expanded-offset채팅 확장 헤더 오프셋
0pxplugins/chat/assets/stylesheets/common/base-common.scss
속성 이름
설명
기본 값
소스 파일
--d-font-family--monospace등폭 폰트 스택
ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", menlo, monaco, consolas, monospacecommon/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기본 색상
#222222color_definitions.scss
--secondary보조 색상
#ffffffcolor_definitions.scss
--tertiary삼차 색상
#0088cccolor_definitions.scss
--quaternary사차 색상
#e45735color_definitions.scss
--header_background헤더 배경색
#ffffffcolor_definitions.scss
--header_primary헤더 기본 색상
#222222color_definitions.scss
--highlight강조 색상
#ffff4dcolor_definitions.scss
--danger위험/오류 색상
#e45735color_definitions.scss
--success성공 색상
#009900color_definitions.scss
--love사랑/하트 색상
#fa6c8dcolor_definitions.scss
--d-selected선택 상태 색상
#e9e9e9color_definitions.scss
--d-hover호버 상태 색상
#f2f2f2color_definitions.scss
속성 이름
설명
기본 값
소스 파일
--always-black-rgbRGB 형식의 검은색
0, 0, 0color_definitions.scss
--primary-rgbRGB 형식의 기본 색상
34, 34, 34color_definitions.scss
--primary-low-rgbRGB 형식의 낮은 기본 색상
242, 242, 242color_definitions.scss
--primary-very-low-rgbRGB 형식의 매우 낮은 기본 색상
248, 248, 248color_definitions.scss
--secondary-rgbRGB 형식의 보조 색상
255, 255, 255color_definitions.scss
--header_background-rgbRGB 형식의 헤더 배경색
255, 255, 255color_definitions.scss
--tertiary-rgbRGB 형식의 삼차 색상
0, 136, 204color_definitions.scss
--highlight-rgbRGB 형식의 강조 색상
255, 255, 77color_definitions.scss
--success-rgbRGB 형식의 성공 색상
0, 153, 0color_definitions.scss
최고네요! 제 테마에서 바로 활용할 수 있는 몇 가지 아이디어가 떠오르네요.
