Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 23:49:45 -05:00
Code Issues Activity

💄 Improve contrast for checkbox

Browse source
This commit is contained in:
alonso.torres 2023-11-16 11:36:26 +01:00 • committed by Andrey Antukh
parent 91f7874167
commit 5f0bf84063
2 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -402,10 +402,13 @@
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-checkbox-background-color-rest);
border: $s-1 solid var(--input-checkbox-background-color-rest);
background-color: var(--input-checkbox-inactive-background-color);
border-radius: $br-4;
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
svg {
display: none;
stroke: var(--input-checkbox-inactive-foreground-color);
}
&:hover {
border-color: var(--input-checkbox-border-color-hover);
@ -414,11 +417,11 @@
border-color: var(--input-checkbox-border-color-focus);
}
&:global(.checked) {
background-color: var(--input-border-color-active);
border-color: var(--input-checkbox-border-color-active);
background-color: var(--input-checkbox-active-background-color);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
stroke: var(--input-checkbox-active-foreground-color);
}
}
&:global(.intermediate) {

6
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -159,6 +159,12 @@
--input-checkbox-border-color-hover: var(--color-accent-primary-muted);
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
// Checkbox color
--input-checkbox-inactive-background-color: var(--off-white);
--input-checkbox-inactive-foreground-color: var(--color-background-primary);
--input-checkbox-active-background-color: var(--color-accent-primary);
--input-checkbox-active-foreground-color: var(--color-background-primary);
--menu-background-color: var(--color-background-tertiary);
--menu-foreground-color: var(--color-foreground-primary);
--menu-background-color-selected: var(--color-background-tertiary);