Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 08:11:30 -05:00
Code Issues Activity

🐛 Fix disabled color on path toolbar and alignment buttons

Browse source
This commit is contained in:
Eva 2024-01-16 14:43:19 +01:00 • committed by Alonso Torres
parent a51925565a
commit 0a8bbe0b77
10 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -161,7 +161,7 @@
svg,
span svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
}
}

3
frontend/resources/styles/common/refactor/color-defs.scss
View file

@ -16,6 +16,7 @@
--dark-gray-4: #34393b;
--white: #fff;
--off-white: #aab5ba;
--off-white-40: #{color.change(#aab5ba, $alpha: 0.4)};
--green: #91fadb;
--green-30: rgba(145, 250, 219, 0.3);
--lilac: #bb97d8;
@ -38,7 +39,7 @@
--light-gray-4: #eef0f2;
--black: #000;
--off-black: #495e74;
--off-black-30: #{color.change(#495e74, $alpha: 0.3)};
--off-black-40: #{color.change(#495e74, $alpha: 0.4)};
--purple: #6911d4;
--purple-30: rgba(105, 17, 212, 0.2);
--blue: #1345aa;

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

@ -23,8 +23,8 @@
--button-background-color-focus: var(--color-background-secondary);
--button-foreground-color-focus: var(--color-foreground-primary);
--button-border-color-focus: var(--color-accent-primary);
--button-foreground-color-disabled: var(--color-foreground-secondary);
--button-background-color-disabled: var(--color-foreground-disabled);
--button-foreground-color-disabled: var(--color-foreground-disabled);
--button-background-color-disabled: var(--color-background-quaternary);
--button-border-color-disabled: var(--color-background-quaternary);
--button-primary-background-color-rest: var(--color-accent-primary);

2
frontend/resources/styles/common/refactor/themes/default-theme.scss
View file

@ -16,7 +16,7 @@
--color-foreground-primary: var(--white);
--color-foreground-secondary: var(--off-white);
--color-foreground-tertiary: var(--pink);
--color-foreground-disabled: var(--dark-gray-4);
--color-foreground-disabled: var(--off-white-40);
--color-accent-primary: var(--green);
--color-accent-primary-muted: var(--green-30);
--color-accent-secondary: var(--lilac);

4
frontend/resources/styles/common/refactor/themes/light-theme.scss
View file

@ -16,7 +16,7 @@
--color-foreground-primary: var(--black);
--color-foreground-secondary: var(--off-black);
--color-foreground-tertiary: var(--pink);
--color-foreground-disabled: var(--off-black-30);
--color-foreground-disabled: var(--off-black-40);
--color-accent-primary: var(--purple);
--color-accent-primary-muted: var(--purple-30);
--color-accent-secondary: var(--blue);
@ -29,7 +29,7 @@
--error-color: var(--light-error-color);
--canvas-color: var(--color-canvas);
--shadow-color: var(--off-black-30);
--shadow-color: var(--off-black-40);
--radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset;
@include meta.load-css("hljs-light-theme");

8
frontend/src/app/main/ui/components/radio_buttons.scss
View file

@ -53,19 +53,19 @@
cursor: default;
background-color: transparent;
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
.title-name {
color: var(--button-background-color-disabled);
color: var(--button-foreground-color-disabled);
}
&:hover {
border: none;
background-color: transparent;
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
.title-name {
color: var(--button-background-color-disabled);
color: var(--button-foreground-color-disabled);
}
}
}

2
frontend/src/app/main/ui/workspace/color_palette.scss
View file

@ -46,7 +46,7 @@
}
&:disabled {
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
&::after {
background-image: none;

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
View file

@ -29,12 +29,12 @@
&.disabled {
cursor: default;
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
&:hover {
background-color: var(--panel-background-color);
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
}
}

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
View file

@ -30,12 +30,12 @@
&.disabled {
cursor: default;
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
&:hover {
background-color: var(--panel-background-color);
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
}
}

5
frontend/src/app/main/ui/workspace/text_palette.scss
View file

@ -44,7 +44,7 @@
}
&:disabled {
svg {
stroke: var(--button-background-color-disabled);
stroke: var(--button-foreground-color-disabled);
}
&::after {
background-image: none;
@ -100,18 +100,21 @@
width: $s-120;
color: var(--palette-text-color-selected);
}
.typography-font {
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color);
}
.typography-data {
@include textEllipsis;
height: $s-16;
width: $s-120;
color: var(--palette-text-color);
}
&.mid-item {
.typography-name {
height: $s-16;