paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix Checkbox style

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-04-10 16:36:38 +02:00
parent 6b15e7c018
commit bcbc593eb7
5 changed files with 69 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/cute-mammals-hear.md
+5
View File
@@ -0,0 +1,5 @@
---
'@backstage/canon': patch
---
Fix Checkbox styles on dark theme in Canon.
packages/canon/css/checkbox.css
+16 -12
View File
@@ -3,23 +3,27 @@
height: 1rem;
box-shadow: inset 0 0 0 1px var(--canon-border);
cursor: pointer;
background-color: var(--canon-bg-surface-1);
border: none;
border-radius: 2px;
flex-shrink: 0;
justify-content: center;
align-items: center;
transition: all .2s ease-in-out;
padding: 0;
transition: background-color .2s ease-in-out;
display: flex;
}
&:focus-visible {
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
transition: none;
}
.canon-CheckboxRoot:focus-visible {
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
transition: none;
}
&[data-checked] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
}
.canon-CheckboxRoot[data-checked] {
background-color: var(--canon-bg-solid);
box-shadow: none;
color: var(--canon-fg-solid);
}
.canon-CheckboxLabel {
@@ -34,14 +38,14 @@
display: flex;
&:hover {
& .canon-CheckboxRoot {
& .canon-CheckboxRoot:not([data-checked]) {
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
}
}
}
.canon-CheckboxIndicator {
color: var(--canon-fg-accent);
color: var(--canon-fg-solid);
justify-content: center;
align-items: center;
display: flex;
packages/canon/css/components.css
+16 -12
View File
@@ -131,23 +131,27 @@
height: 1rem;
box-shadow: inset 0 0 0 1px var(--canon-border);
cursor: pointer;
background-color: var(--canon-bg-surface-1);
border: none;
border-radius: 2px;
flex-shrink: 0;
justify-content: center;
align-items: center;
transition: all .2s ease-in-out;
padding: 0;
transition: background-color .2s ease-in-out;
display: flex;
}
&:focus-visible {
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
transition: none;
}
.canon-CheckboxRoot:focus-visible {
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
transition: none;
}
&[data-checked] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
}
.canon-CheckboxRoot[data-checked] {
background-color: var(--canon-bg-solid);
box-shadow: none;
color: var(--canon-fg-solid);
}
.canon-CheckboxLabel {
@@ -162,14 +166,14 @@
display: flex;
&:hover {
& .canon-CheckboxRoot {
& .canon-CheckboxRoot:not([data-checked]) {
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
}
}
}
.canon-CheckboxIndicator {
color: var(--canon-fg-accent);
color: var(--canon-fg-solid);
justify-content: center;
align-items: center;
display: flex;
packages/canon/css/styles.css
+16 -12
View File
@@ -9355,23 +9355,27 @@
height: 1rem;
box-shadow: inset 0 0 0 1px var(--canon-border);
cursor: pointer;
background-color: var(--canon-bg-surface-1);
border: none;
border-radius: 2px;
flex-shrink: 0;
justify-content: center;
align-items: center;
transition: all .2s ease-in-out;
padding: 0;
transition: background-color .2s ease-in-out;
display: flex;
}
&:focus-visible {
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
transition: none;
}
.canon-CheckboxRoot:focus-visible {
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
transition: none;
}
&[data-checked] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
}
.canon-CheckboxRoot[data-checked] {
background-color: var(--canon-bg-solid);
box-shadow: none;
color: var(--canon-fg-solid);
}
.canon-CheckboxLabel {
@@ -9386,14 +9390,14 @@
display: flex;
&:hover {
& .canon-CheckboxRoot {
& .canon-CheckboxRoot:not([data-checked]) {
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
}
}
}
.canon-CheckboxIndicator {
color: var(--canon-fg-accent);
color: var(--canon-fg-solid);
justify-content: center;
align-items: center;
display: flex;
packages/canon/src/components/Checkbox/styles.css
+16 -12
View File
@@ -8,18 +8,22 @@
box-shadow: inset 0 0 0 1px var(--canon-border);
cursor: pointer;
border-radius: 2px;
transition: all 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
background-color: var(--canon-bg-surface-1);
padding: 0;
flex-shrink: 0;
}
&:focus-visible {
transition: none;
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
}
.canon-CheckboxRoot:focus-visible {
transition: none;
outline: 2px solid var(--canon-ring);
outline-offset: 2px;
}
&[data-checked] {
background-color: var(--canon-bg-solid);
color: var(--canon-fg-solid);
}
.canon-CheckboxRoot[data-checked] {
background-color: var(--canon-bg-solid);
box-shadow: none;
color: var(--canon-fg-solid);
}
.canon-CheckboxLabel {
@@ -34,7 +38,7 @@
user-select: none;
&:hover {
& .canon-CheckboxRoot {
& .canon-CheckboxRoot:not([data-checked]) {
box-shadow: inset 0 0 0 1px var(--canon-border-hover);
}
}
@@ -44,5 +48,5 @@
display: flex;
align-items: center;
justify-content: center;
color: var(--canon-fg-accent);
color: var(--canon-fg-solid);
}