Skip to content

Repository navigation

fix(earn): inset the vault demo select chevrons #1128

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
struong merged 2 commits into from
Nov 12, 2026
Merged

fix(earn): inset the vault demo select chevrons #1128

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
19fa15f
fix(earn): inset the vault demo select chevrons
struong Nov 12, 2026
2ad3369
chore: merge main
struong Nov 12, 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
7 changes: 3 additions & 4 deletions src/components/TempoMcpExplorer.recipes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { inherited } from '../styles/inherited'
import { style } from '../styles/recipes'
import { selectChevron } from '../styles/select-chevron'
import { vars as tokens } from '../styles/theme'
export const resultViewLayout = style({
selectors: {
Expand Down Expand Up @@ -169,15 +170,13 @@ export const select = style({
'&:is(select)': {
appearance: 'none',
paddingInlineEnd: tokens.spacing['10'],
backgroundImage:
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
backgroundImage: selectChevron.light,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right 16px center',
backgroundSize: '16px 16px',
},
':root[data-vocs-theme="dark"] &:is(select)': {
backgroundImage:
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
backgroundImage: selectChevron.dark,
},
':dir(rtl) &:is(select)': {
backgroundPosition: 'left 16px center',
Expand Down
17 changes: 17 additions & 0 deletions src/components/guides/EarnVaultDemo.recipes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { inherited } from '../../styles/inherited'
import { style } from '../../styles/recipes'
import { selectChevron } from '../../styles/select-chevron'
import { vars as tokens } from '../../styles/theme'
export const earnVaultDemoText = style({
fontSize: tokens.fontSize.sm,
Expand Down Expand Up @@ -157,6 +158,22 @@ export const earnVaultDemoStateState = style({

color: inherited.color.textColorPrimary,
selectors: {
// TDS NativeSelect spacing: the 16x16 chevron sits 12px from the inline
// end, matching the text inset, and the text keeps 8px clear of it.
'&:is(select)': {
appearance: 'none',
paddingInlineEnd: tokens.spacing['9'],
backgroundImage: selectChevron.light,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right 12px center',
backgroundSize: '16px 16px',
},
':root[data-vocs-theme="dark"] &:is(select)': {
backgroundImage: selectChevron.dark,
},
':dir(rtl) &:is(select)': {
backgroundPosition: 'left 12px center',
},
'&:focus-visible': {
'--tempo-style-ring-shadow':
'var(--tempo-style-ring-inset,) 0 0 0 calc(2px + var(--tempo-style-ring-offset-width)) var(--tempo-style-ring-color, currentcolor)',
Expand Down
8 changes: 8 additions & 0 deletions src/styles/select-chevron.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// TDS ChevronDown (16x16) in content primary, drawn as a native select's
// background so selects keep their markup. Pair with `appearance: none` and an
// inline-end padding that clears the chevron.
export const selectChevron = {
light:
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
dark: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
} as const
Loading