ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use app foreground color for focus outline button color so there's no hue collision (#4894)

Browse Source 
Towards #4851
This commit is contained in:
Frank Noirot
2025-01-02 16:10:07 -05:00
committed by GitHub
parent 3d27f0191b
commit d478d81156
5 changed files with 18 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/kcl-samples-manifest-fallback.json
View File

@ -84,6 +84,11 @@
"title": "Hex nut",
"description": "A hex nut is a type of fastener with a threaded hole and a hexagonal outer shape, used in a wide variety of applications to secure parts together. The hexagonal shape allows for a greater torque to be applied with wrenches or tools, making it one of the most common nut types in hardware."
},
{
"file": "i-beam.kcl",
"title": "I-beam",
"description": "A structural metal beam with an I shaped cross section. Often used in construction"
},
{
"file": "kitt.kcl",
"title": "Kitt",

4
src/components/CommandBar/CommandBarHeader.tsx
View File

@ -194,7 +194,7 @@ function ReviewingButton() {
autoFocus
type="submit"
form="review-form"
className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
className="w-fit !p-0 rounded-sm hover:shadow"
iconStart={{
icon: 'checkmark',
bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',
@ -212,7 +212,7 @@ function GatheringArgsButton() {
Element="button"
type="submit"
form="arg-form"
className="w-fit !p-0 rounded-sm border !border-primary hover:shadow"
className="w-fit !p-0 rounded-sm hover:shadow"
iconStart={{
icon: 'arrowRight',
bgClassName: 'p-1 rounded-sm !bg-primary hover:brightness-110',

2
src/components/ProjectSidebarMenu.tsx
View File

@ -210,7 +210,7 @@ function ProjectMenuPopover({
return (
<Popover className="relative">
<Popover.Button
className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary dark:hover:bg-chalkboard-90"
className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
data-testid="project-sidebar-toggle"
>
<div className="flex flex-col items-start py-0.5">

4
src/components/UserSidebarMenu.tsx
View File

@ -168,7 +168,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
return (
<Popover className="relative">
<Popover.Button
className="relative group border-0 w-fit min-w-max p-0 rounded-l-full focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
className="relative group border-0 w-fit min-w-max p-0 rounded-l-full focus-visible:outline-appForeground"
data-testid="user-sidebar-toggle"
>
<div className="flex items-center">
@ -240,7 +240,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
<li key={id} className="contents">
<ActionButton
{...rest}
className="!font-sans flex items-center gap-2 rounded-sm py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left"
className="!font-sans flex items-center gap-2 rounded-sm py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 !border-none text-left focus-visible:outline-appForeground"
onMouseUp={() => {
close()
}}

10
src/index.css
View File

@ -85,7 +85,8 @@ textarea,
}
button {
@apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs focus-visible:ring-primary;
@apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
@apply focus-visible:outline-chalkboard-100;
}
button:hover {
@ -93,7 +94,7 @@ button:hover {
}
.dark button {
@apply border-chalkboard-70 focus-visible:ring-primary/50;
@apply border-chalkboard-70 focus-visible:outline-chalkboard-10;
}
.dark button:hover {
@ -319,6 +320,11 @@ code {
button.reset:hover {
@apply bg-transparent border-transparent;
}
/* Add an outline that matches the app foreground (or text) color */
.outline-appForeground {
@apply outline-chalkboard-100 dark:outline-chalkboard-10;
}
}
#code-mirror-override .cm-scroller,