changelog

Author: danalvrz

packages/volto-highlight-block/news/11.feature

@@ -0,0 +1 @@
+Improve support for VLT6 color system. @danalvrz

packages/volto-highlight-block/src/theme/highlight.scss

@@ -242,41 +242,44 @@ $highlight-images-object-position: top left;
   // Color widget &
   // Theme color picker widget
 
-  button.highlight-custom-color-1,
-  button.highlight-custom-color-1.active,
-  button.highlight-custom-color-1:hover,
-  button.active.highlight-custom-color-1:hover {
-    background-color: var(
-      --highlight-custom-color-1,
-      $highlight-custom-color-1
-    );
-  }
+  button,
+  .button {
+    &.highlight-custom-color-1,
+    &.highlight-custom-color-1.active,
+    &.highlight-custom-color-1:hover,
+    &.active.highlight-custom-color-1:hover {
+      background-color: var(
+        --highlight-custom-color-1,
+        $highlight-custom-color-1
+      );
+    }
 
-  button.highlight-custom-color-2,
-  button.highlight-custom-color-2.active,
-  button.highlight-custom-color-2:hover,
-  button.active.highlight-custom-color-2:hover {
-    background: var(--highlight-custom-color-2, $highlight-custom-color-2);
+    &.highlight-custom-color-2,
+    &.highlight-custom-color-2.active,
+    &.highlight-custom-color-2:hover,
+    &.active.highlight-custom-color-2:hover {
+      background: var(--highlight-custom-color-2, $highlight-custom-color-2);
+    }
   }
 
-  button.highlight-custom-color-3,
-  button.highlight-custom-color-3.active,
-  button.highlight-custom-color-3:hover,
-  button.active.highlight-custom-color-3:hover {
+  &.highlight-custom-color-3,
+  &.highlight-custom-color-3.active,
+  &.highlight-custom-color-3:hover,
+  &.active.highlight-custom-color-3:hover {
     background: var(--highlight-custom-color-3, $highlight-custom-color-3);
   }
 
-  button.highlight-custom-color-4,
-  button.highlight-custom-color-4.active,
-  button.highlight-custom-color-4:hover,
-  button.active.highlight-custom-color-4:hover {
+  &.highlight-custom-color-4,
+  &.highlight-custom-color-4.active,
+  &.highlight-custom-color-4:hover,
+  &.active.highlight-custom-color-4:hover {
     background: var(--highlight-custom-color-4, $highlight-custom-color-4);
   }
 
-  button.highlight-custom-color-5,
-  button.highlight-custom-color-5.active,
-  button.highlight-custom-color-5:hover,
-  button.active.highlight-custom-color-5:hover {
+  &.highlight-custom-color-5,
+  &.highlight-custom-color-5.active,
+  &.highlight-custom-color-5:hover,
+  &.active.highlight-custom-color-5:hover {
     background: var(--highlight-custom-color-5, $highlight-custom-color-5);
   }
 }