Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

🐛 Fix checkbox colors

Browse source
This commit is contained in:
Eva 2024-01-11 12:53:16 +01:00 committed by Andrey Antukh
parent b7bfb73134
commit 6de70ff5b7
3 changed files with 23 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -406,10 +406,9 @@
height: $s-16;
min-width: $s-16;
min-height: $s-16;
border-radius: $br-6;
background-color: var(--input-checkbox-inactive-background-color);
background-color: var(--input-checkbox-background-color-rest);
border: $s-1 solid var(--input-checkbox-border-color-rest);
border-radius: $br-4;
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
svg {
width: $s-16;
height: $s-16;
@ -422,22 +421,25 @@
&:focus {
border-color: var(--input-checkbox-border-color-focus);
}
&:global(.checked) {
border-color: var(--input-checkbox-border-color-active);
background-color: var(--input-checkbox-active-background-color);
background-color: var(--input-checkbox-background-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-checkbox-active-foreground-color);
stroke: var(--input-checkbox-foreground-color-active);
}
}
&:global(.intermediate) {
background-color: var(--input-checkbox-background-color-intermediate);
border-color: var(--input-checkbox-border-color-active);
border-color: var(--input-checkbox-border-color-intermediate);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);
stroke: var(--input-checkbox-foreground-color-intermediate);
}
}
&:global(.unchecked) {
background-color: var(--input-checkbox-background-color-rest);
border: $s-1 solid var(--input-checkbox-background-color-rest);
@ -468,6 +470,13 @@
border-color: var(--input-checkbox-border-color-hover);
}
}
&:focus,
&:focus-within {
span {
border-color: var(--input-checkbox-border-color-focus);
}
}
}
}

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

@ -159,18 +159,22 @@
--input-border-color-error: var(--error-color);
--input-border-color-success: var(--color-accent-primary);
--input-details-color: var(--color-background-primary);
--input-checkbox-background-color-rest: var(--color-background-quaternary);
--input-checkbox-border-color-rest: var(--color-foreground-secondary);
--input-checkbox-border-color-active: var(--color-background-quaternary);
--input-checkbox-border-color-focus: var(--color-accent-primary);
--input-checkbox-border-color: var(--color-background-secondary);
--input-checkbox-border-color-hover: var(--color-accent-primary-muted);
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary);
--input-checkbox-border-color-intermediate: var(--color-foreground-secondary);
--input-checkbox-foreground-color-intermediate: var(--color-background-secondary);
// Checkbox color
--input-checkbox-inactive-background-color: var(--color-foreground-secondary);
--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);
--input-checkbox-background-color-active: var(--color-accent-primary);
--input-checkbox-foreground-color-active: var(--color-background-primary);
--input-checkbox-text-foreground-color: var(--color-foreground-secondary);
--menu-background-color: var(--color-background-tertiary);

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
View file

@ -147,7 +147,7 @@
border-radius: $br-6;
background-color: var(--input-checkbox-inactive-background-color);
&.checked {
background-color: var(--input-checkbox-active-background-color);
background-color: var(--input-checkbox-background-color-active);
svg {
@extend .button-icon-small;
stroke: var(--input-details-color);