Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 17:00:36 -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; height: $s-16;
min-width: $s-16; min-width: $s-16;
min-height: $s-16; min-height: $s-16;
border-radius: $br-6; background-color: var(--input-checkbox-background-color-rest);
background-color: var(--input-checkbox-inactive-background-color); border: $s-1 solid var(--input-checkbox-border-color-rest);
border-radius: $br-4; border-radius: $br-4;
box-shadow: inset 0 0 0px 2px rgb(255 255 255 / 20%);
svg { svg {
width: $s-16; width: $s-16;
height: $s-16; height: $s-16;
@ -422,22 +421,25 @@
&:focus { &:focus {
border-color: var(--input-checkbox-border-color-focus); border-color: var(--input-checkbox-border-color-focus);
} }
&:global(.checked) { &:global(.checked) {
border-color: var(--input-checkbox-border-color-active); 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 { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--input-checkbox-active-foreground-color); stroke: var(--input-checkbox-foreground-color-active);
} }
} }
&:global(.intermediate) { &:global(.intermediate) {
background-color: var(--input-checkbox-background-color-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 { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--input-details-color); stroke: var(--input-checkbox-foreground-color-intermediate);
} }
} }
&:global(.unchecked) { &:global(.unchecked) {
background-color: var(--input-checkbox-background-color-rest); background-color: var(--input-checkbox-background-color-rest);
border: $s-1 solid 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); 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-error: var(--error-color);
--input-border-color-success: var(--color-accent-primary); --input-border-color-success: var(--color-accent-primary);
--input-details-color: var(--color-background-primary); --input-details-color: var(--color-background-primary);
--input-checkbox-background-color-rest: var(--color-background-quaternary); --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-active: var(--color-background-quaternary);
--input-checkbox-border-color-focus: var(--color-accent-primary); --input-checkbox-border-color-focus: var(--color-accent-primary);
--input-checkbox-border-color: var(--color-background-secondary); --input-checkbox-border-color: var(--color-background-secondary);
--input-checkbox-border-color-hover: var(--color-accent-primary-muted); --input-checkbox-border-color-hover: var(--color-accent-primary-muted);
--input-checkbox-background-color-intermediate: var(--color-foreground-secondary); --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 // Checkbox color
--input-checkbox-inactive-background-color: var(--color-foreground-secondary); --input-checkbox-inactive-background-color: var(--color-foreground-secondary);
--input-checkbox-inactive-foreground-color: var(--color-background-primary); --input-checkbox-inactive-foreground-color: var(--color-background-primary);
--input-checkbox-active-background-color: var(--color-accent-primary); --input-checkbox-background-color-active: var(--color-accent-primary);
--input-checkbox-active-foreground-color: var(--color-background-primary); --input-checkbox-foreground-color-active: var(--color-background-primary);
--input-checkbox-text-foreground-color: var(--color-foreground-secondary); --input-checkbox-text-foreground-color: var(--color-foreground-secondary);
--menu-background-color: var(--color-background-tertiary); --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; border-radius: $br-6;
background-color: var(--input-checkbox-inactive-background-color); background-color: var(--input-checkbox-inactive-background-color);
&.checked { &.checked {
background-color: var(--input-checkbox-active-background-color); background-color: var(--input-checkbox-background-color-active);
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--input-details-color); stroke: var(--input-details-color);