Skip to content

Add variable for tertiary button hover override #1311

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
jamdelion merged 5 commits into from
Feb 11, 2026
Merged

Add variable for tertiary button hover override #1311

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8705307
Add variable for tertiary button hover override
jamdelion Feb 9, 2026
abe9a1c
Add variables to control instruction panel code blocks color
jamdelion Feb 10, 2026
5afe4a0
Merge branch 'main' into jh/tertiary-button-vars
jamdelion Feb 10, 2026
c926590
Set fallback for button
jamdelion Feb 10, 2026
b20785e
Merge branch 'main' into jh/tertiary-button-vars
jamdelion Feb 10, 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
2 changes: 1 addition & 1 deletion src/assets/stylesheets/Button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@

&:hover,
.btn-outer:hover & {
background-color: inherit;
background-color: var(--tertiary-btn-hover-color, inherit);
}
Comment on lines 151 to 154
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new hover background custom property name (--tertiary-btn-hover-color) doesn't follow the existing button theming variable naming pattern used elsewhere in this file (e.g. --rpf-button-...). For consistency and discoverability, consider renaming it to align with the existing scheme (for example, a --rpf-button-tertiary-*-hover variable) and updating the setter accordingly.

Copilot uses AI. Check for mistakes.

&:disabled {
Expand Down
8 changes: 5 additions & 3 deletions src/assets/stylesheets/Instructions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,18 @@
pre {
@include typography.style-1();

background-color: $rpf-grey-700;
background-color: var(--code-background-color, #{$rpf-grey-700});
border: 1px solid $rpf-grey-600;
border-radius: 8px;
padding: $space-0-5 $space-1;
overflow: auto;
margin: $space-1 0;
scrollbar-color: var(--code-block-scrollbar-color);
scrollbar-color: var(--code-block-scrollbar-color, auto);

code {
padding-inline: 0;
background-color: var(--code-background-color, #{$rpf-grey-700});
color: var(--code-text-color, #{$rpf-white});
}
Comment on lines 52 to 67
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only pre/pre code and .line-highlight have been wired to the new code styling variables. Other code-related backgrounds in the instructions panel (e.g. .project-instructions code for inline code, and .c-project-code wrapper background) remain hard-coded to $rpf-grey-700, which can produce a mismatched UI when --code-background-color is overridden. Consider also switching those related rules to the same variables (or introducing separate variables if inline code should differ).

Copilot uses AI. Check for mistakes.
}

Expand Down Expand Up @@ -107,7 +109,7 @@

.line-highlight {
margin-block-start: 0.5rem;
background-color: $rpf-white;
background-color: var(--code-block-line-highlight-color, #{$rpf-white});
mix-blend-mode: difference;
min-inline-size: 100%;
}
Expand Down
13 changes: 13 additions & 0 deletions src/assets/stylesheets/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,5 +156,18 @@ code {
.project-instructions {
pre {
--code-block-scrollbar-color: auto;
--code-background-color: #{$rpf-grey-700};
--code-text-color: #{$rpf-white};
}

.line-highlight {
--code-block-line-highlight-color: #{$rpf-white};
}
Comment on lines 156 to +165
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new code-related custom properties are defined directly on .project-instructions pre / .project-instructions .line-highlight, which will override any inherited values set by an embedding host. Since Instructions.scss already supplies fallbacks via var(..., <default>), consider removing these default assignments (or move defaults to a higher-level scope like #wc/theme root) so host applications can override by setting variables once on the container.

Copilot uses AI. Check for mistakes.
}

.btn--tertiary {
&:hover,
.btn-outer:hover & {
--tertiary-btn-hover-color: inherit;
}
}
Comment on lines +168 to 173
Copy link

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

--tertiary-btn-hover-color is being set inside the :hover rule. Because custom properties inherit, this will override any value provided by the host (e.g., on #wc/:root) when the button is hovered, which defeats the purpose of making the hover color configurable. Prefer not setting this custom property on the button at all (rely on the fallback), or set a default at a higher scope (e.g., #wc/theme wrapper) so host overrides still work.

Suggested change
.btn--tertiary {
&:hover,
.btn-outer:hover & {
--tertiary-btn-hover-color: inherit;
}
}

Copilot uses AI. Check for mistakes.