Skip to content

style(components): add dark theme tokens for dropdown and suggestion surfaces #348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gene9831 merged 2 commits into from
May 25, 2026
Merged

style(components): add dark theme tokens for dropdown and suggestion surfaces #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a18ae7
feat: add dark mode theme tokens for dropdown, suggestion popover, an…
SonyLeo May 10, 2026
9584518
style: update suggestion pill button colors for improved visibility
SonyLeo May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 15 additions & 5 deletions packages/components/src/dropdown-menu/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,7 @@ defineExpose({

<style lang="less">
:root {
--tr-dropdown-menu-bg-color: #ffffff;
--tr-dropdown-menu-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
--tr-dropdown-menu-min-width: 130px;
--tr-dropdown-menu-item-color: rgb(25, 25, 25);
--tr-dropdown-menu-item-hover-bg-color: #f5f5f5;
--tr-dropdown-menu-item-font-weight: normal;

--tr-dropdown-menu-min-top: 0px;
Expand Down Expand Up @@ -152,7 +148,21 @@ defineExpose({
margin: 0;
list-style: none;
scrollbar-width: thin;
scrollbar-color: #dbdbdb transparent;
scrollbar-color: var(--tr-dropdown-menu-scrollbar-thumb-color) transparent;

&::-webkit-scrollbar {
width: 4px;
height: 4px;
}

&::-webkit-scrollbar-thumb {
background: var(--tr-dropdown-menu-scrollbar-thumb-color);
border-radius: 2px;
}

&::-webkit-scrollbar-track {
background: transparent;
}

.tr-dropdown-menu__list-item {
color: var(--tr-dropdown-menu-item-color);
Expand Down
14 changes: 3 additions & 11 deletions packages/components/src/flow-layout-buttons/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,20 +169,9 @@ onClickOutside(

<style lang="less">
:root {
--tr-flow-layout-item-bg-color: rgba(0, 0, 0, 0.04);
--tr-flow-layout-item-border-color: transparent;
--tr-flow-layout-item-hover-bg-color: rgba(0, 0, 0, 0.08);
--tr-flow-layout-item-selected-bg-color: white;
--tr-flow-layout-item-selected-border-color: black;
--tr-flow-layout-item-font-size: 14px;
--tr-flow-layout-item-line-height: 24px;
--tr-flow-layout-item-icon-size: 16px;

--tr-flow-layout-dropdown-bg-color: white;
--tr-flow-layout-dropdown-box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
--tr-flow-layout-dropdown-selected-bg-color: white;
--tr-flow-layout-dropdown-selected-border-color: black;
--tr-flow-layout-dropdown-item-hover-bg-color: rgba(0, 0, 0, 0.04);
}
</style>

Expand All @@ -199,6 +188,7 @@ onClickOutside(
align-items: center;
gap: 8px;
background-color: var(--tr-flow-layout-item-bg-color);
color: var(--tr-flow-layout-item-color);
border-radius: 8px;
border: 1px solid var(--tr-flow-layout-item-border-color);
transition: background-color 0.3s ease;
Expand All @@ -222,6 +212,7 @@ onClickOutside(
width: var(--tr-flow-layout-item-icon-size);
height: var(--tr-flow-layout-item-icon-size);
flex-shrink: 0;
color: inherit;
}

.tr-flow-layout__item-label {
Expand Down Expand Up @@ -255,6 +246,7 @@ onClickOutside(
gap: 8px;
padding: 5px 11px;
width: 100%;
color: var(--tr-flow-layout-dropdown-item-color);
border-radius: 8px;
transition: background-color 0.3s ease;
border: 1px solid transparent;
Expand Down
102 changes: 102 additions & 0 deletions packages/components/src/styles/variables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,57 @@
--tr-mcp-server-picker-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08);
--tr-mcp-server-picker-border-color-default: #dbdbdb;

/* ===== Dropdown Menu ===== */
--tr-dropdown-menu-bg-color: #ffffff;
--tr-dropdown-menu-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
--tr-dropdown-menu-item-color: var(--tr-text-primary);
--tr-dropdown-menu-item-hover-bg-color: #f5f5f5;
--tr-dropdown-menu-scrollbar-thumb-color: rgba(0, 0, 0, 0.2);

/* ===== Flow Layout Buttons ===== */
--tr-flow-layout-item-bg-color: rgba(0, 0, 0, 0.04);
--tr-flow-layout-item-border-color: transparent;
--tr-flow-layout-item-color: var(--tr-text-primary);
--tr-flow-layout-item-hover-bg-color: rgba(0, 0, 0, 0.08);
--tr-flow-layout-item-selected-bg-color: #ffffff;
--tr-flow-layout-item-selected-border-color: #191919;
--tr-flow-layout-dropdown-bg-color: #ffffff;
--tr-flow-layout-dropdown-box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
--tr-flow-layout-dropdown-item-color: var(--tr-text-primary);
--tr-flow-layout-dropdown-selected-bg-color: #ffffff;
--tr-flow-layout-dropdown-selected-border-color: #191919;
--tr-flow-layout-dropdown-item-hover-bg-color: rgba(0, 0, 0, 0.04);

/* ===== Suggestion Popover ===== */
--tr-suggestion-popover-bg-color: #ffffff;
--tr-suggestion-popover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
--tr-suggestion-popover-color: var(--tr-text-primary);
--tr-suggestion-popover-backdrop-color: rgba(0, 0, 0, 0.15);
--tr-suggestion-popover-scrollbar-color: #dbdbdb;
--tr-suggestion-popover-item-hover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--tr-suggestion-popover-item-border-color: #f0f0f0;
--tr-suggestion-popover-close-bg-color: var(--tr-icon-button-bg);
--tr-suggestion-popover-close-hover-bg-color: var(--tr-icon-button-hover-bg);
--tr-suggestion-popover-close-color: var(--tr-text-secondary);
--tr-suggestion-popover-loading-color: var(--tr-text-tertiary);
--tr-suggestion-popover-no-data-color: var(--tr-text-primary);
--tr-suggestion-popover-header-icon-color: var(--tr-color-primary);

/* ===== Tooltip ===== */
--tr-tooltip-bg-color: #ffffff;
--tr-tooltip-color: var(--tr-text-primary);
--tr-tooltip-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);

/* ===== Suggestion Pills ===== */
--tr-suggestion-pill-button-bg-color: #ffffff;
--tr-suggestion-pill-button-hover-bg-color: #ebebeb;
--tr-suggestion-pill-button-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
--tr-suggestion-pill-button-color: var(--tr-text-primary);
--tr-suggestion-pills-expand-color: var(--tr-text-secondary);
--tr-suggestion-pills-expand-bg-color: #ffffff;
--tr-suggestion-pills-expand-hover-bg-color: #ebebeb;
--tr-suggestion-pills-expand-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

/* ===== 阴影系统 ===== */
--tr-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.04);

Expand Down Expand Up @@ -251,6 +302,57 @@
--tr-mcp-server-picker-shadow: 0px 4px 16px 0px rgba(255, 255, 255, 0.08);
--tr-mcp-server-picker-border-color-default: rgba(255, 255, 255, 0.15);

/* ===== Dropdown Menu ===== */
--tr-dropdown-menu-bg-color: #333333;
--tr-dropdown-menu-box-shadow: 0 0 20px rgba(0, 0, 0, 0.48);
--tr-dropdown-menu-item-color: var(--tr-text-primary);
--tr-dropdown-menu-item-hover-bg-color: #262626;
--tr-dropdown-menu-scrollbar-thumb-color: rgba(255, 255, 255, 0.2);

/* ===== Flow Layout Buttons ===== */
--tr-flow-layout-item-bg-color: rgba(255, 255, 255, 0.08);
--tr-flow-layout-item-border-color: transparent;
--tr-flow-layout-item-color: var(--tr-text-primary);
--tr-flow-layout-item-hover-bg-color: rgba(255, 255, 255, 0.12);
--tr-flow-layout-item-selected-bg-color: #262626;
--tr-flow-layout-item-selected-border-color: rgba(255, 255, 255, 0.15);
--tr-flow-layout-dropdown-bg-color: #333333;
--tr-flow-layout-dropdown-box-shadow: 0 0 16px rgba(0, 0, 0, 0.48);
--tr-flow-layout-dropdown-item-color: var(--tr-text-primary);
--tr-flow-layout-dropdown-selected-bg-color: #262626;
--tr-flow-layout-dropdown-selected-border-color: rgba(255, 255, 255, 0.15);
--tr-flow-layout-dropdown-item-hover-bg-color: #262626;

/* ===== Suggestion Popover ===== */
--tr-suggestion-popover-bg-color: #333333;
--tr-suggestion-popover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.48);
--tr-suggestion-popover-color: var(--tr-text-primary);
--tr-suggestion-popover-backdrop-color: rgba(0, 0, 0, 0.4);
--tr-suggestion-popover-scrollbar-color: rgba(255, 255, 255, 0.2);
--tr-suggestion-popover-item-hover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48);
--tr-suggestion-popover-item-border-color: rgba(255, 255, 255, 0.08);
--tr-suggestion-popover-close-bg-color: var(--tr-icon-button-bg);
--tr-suggestion-popover-close-hover-bg-color: var(--tr-icon-button-hover-bg);
--tr-suggestion-popover-close-color: var(--tr-text-secondary);
--tr-suggestion-popover-loading-color: var(--tr-text-tertiary);
--tr-suggestion-popover-no-data-color: var(--tr-text-primary);
--tr-suggestion-popover-header-icon-color: var(--tr-color-primary);

/* ===== Tooltip ===== */
--tr-tooltip-bg-color: #262626;
--tr-tooltip-color: var(--tr-text-primary);
--tr-tooltip-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);

/* ===== Suggestion Pills ===== */
--tr-suggestion-pill-button-bg-color: #262626;
--tr-suggestion-pill-button-hover-bg-color: #333333;
--tr-suggestion-pill-button-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48);
--tr-suggestion-pill-button-color: var(--tr-text-primary);
--tr-suggestion-pills-expand-color: var(--tr-text-secondary);
--tr-suggestion-pills-expand-bg-color: rgba(255, 255, 255, 0.08);
--tr-suggestion-pills-expand-hover-bg-color: rgba(255, 255, 255, 0.12);
--tr-suggestion-pills-expand-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.48);

/* ===== Sender 输入框 ===== */
--tr-sender-bg-color-disabled: rgba(255, 255, 255, 0.06);
--tr-sender-text-color-disabled: #808080;
Expand Down
10 changes: 1 addition & 9 deletions packages/components/src/suggestion-pills/components/PillButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,6 @@ const onlyIcon = computed(() => hasIcon.value && !hasText.value)
</button>
</template>

<style lang="less">
:root {
--tr-suggestion-pill-button-bg-color: rgb(255, 255, 255);
--tr-suggestion-pill-button-hover-bg-color: rgb(235, 235, 235);
--tr-suggestion-pill-button-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
--tr-suggestion-pill-button-color: rgb(25, 25, 25);
}
</style>

<style lang="less" scoped>
.tr-suggestion-pills__item {
display: flex;
Expand All @@ -58,6 +49,7 @@ const onlyIcon = computed(() => hasIcon.value && !hasText.value)
.tr-suggestion-pills__item_icon {
width: 16px;
height: 16px;
color: inherit;
}
}
</style>
4 changes: 0 additions & 4 deletions packages/components/src/suggestion-pills/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,11 +223,7 @@ defineExpose({

<style lang="less">
:root {
--tr-suggestion-pills-expand-color: rgb(89, 89, 89);
--tr-suggestion-pills-expand-bg-color: white;
--tr-suggestion-pills-expand-hover-bg-color: rgb(235, 235, 235);
--tr-suggestion-pills-expand-font-size: 14px;
--tr-suggestion-pills-expand-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
</style>

Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/suggestion-popover/components/Header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const props = defineProps<Pick<SuggestionPopoverProps, 'icon' | 'title'>>()
<div class="tr-question__header">
<component v-if="props.icon" :is="props.icon" />
<span v-else class="tr-question__header-icon">
<IconSparkles style="color: #1476ff" />
<IconSparkles />
</span>
<h3 class="tr-question__header-title">{{ props.title }}</h3>
</div>
Expand Down Expand Up @@ -37,6 +37,7 @@ const props = defineProps<Pick<SuggestionPopoverProps, 'icon' | 'title'>>()
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tr-suggestion-popover-header-icon-color);
}

.tr-question__header-title {
Expand Down
1 change: 0 additions & 1 deletion packages/components/src/suggestion-popover/components/Loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@

<style lang="less">
:root {
--tr-suggestion-popover-loading-color: #808080;
--tr-suggestion-popover-loading-font-size: 12px;
--tr-suggestion-popover-loading-line-height: 24px;
}
Expand Down
3 changes: 0 additions & 3 deletions packages/components/src/suggestion-popover/components/Tooltip.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,9 +93,6 @@ const handleMouseleave = (event: MouseEvent) => {

<style lang="less">
:root {
--tr-tooltip-bg-color: rgb(255, 255, 255);
--tr-tooltip-color: rgb(25, 25, 25);
--tr-tooltip-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
--tr-tooltip-font-size: 14px;
--tr-tooltip-line-height: 22px;
}
Expand Down
14 changes: 2 additions & 12 deletions packages/components/src/suggestion-popover/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,24 +278,12 @@ defineExpose({

<style lang="less">
:root {
--tr-suggestion-popover-bg-color: #ffffff;
--tr-suggestion-popover-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
--tr-suggestion-popover-color: rgb(25, 25, 25);
--tr-suggestion-popover-width: 540px;
--tr-suggestion-popover-height: 464px;
--tr-suggestion-popover-backdrop-color: rgba(0, 0, 0, 0.15);
--tr-suggestion-popover-scrollbar-color: #dbdbdb;

// 列表项
--tr-suggestion-popover-item-font-size: 14px;
--tr-suggestion-popover-item-line-height: 24px;
--tr-suggestion-popover-item-hover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
--tr-suggestion-popover-item-border-color: rgb(240, 240, 240);

// 关闭按钮
--tr-suggestion-popover-close-bg-color: var(--tr-icon-button-bg);
--tr-suggestion-popover-close-hover-bg-color: var(--tr-icon-button-hover-bg);
--tr-suggestion-popover-close-color: #595959;
}

.tr-question-popover {
Expand Down Expand Up @@ -438,6 +426,8 @@ defineExpose({
}

.tr-question-popover__close {
--tr-icon-button-bg: var(--tr-suggestion-popover-close-bg-color);
--tr-icon-button-hover-bg: var(--tr-suggestion-popover-close-hover-bg-color);
background-color: var(--tr-suggestion-popover-close-bg-color);
color: var(--tr-suggestion-popover-close-color);
top: 22px;
Expand Down
Loading