🐛 Fix disabled color on path toolbar and alignment buttons

frontend/resources/styles/common/refactor/basic-rules.scss

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

frontend/resources/styles/common/refactor/color-defs.scss

@@ -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;

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -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-foreground-color-disabled: var(--color-foreground-disabled);
-  --button-background-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);

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

@@ -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);

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

@@ -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");

frontend/src/app/main/ui/components/radio_buttons.scss

@@ -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);
       }
     }
   }

frontend/src/app/main/ui/workspace/color_palette.scss

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

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

@@ -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);
       }
     }
   }

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

@@ -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);
       }
     }
   }

frontend/src/app/main/ui/workspace/text_palette.scss

@@ -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;