[WC-1779]: structure preview colors (#523)

Author: rahmanunver

packages/pluggableWidgets/accessibility-helper-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We updated the light and dark icons and tiles for the widget.
 
+-   We changed colors in the structure mode preview for dark and light modes.
+
 ## [2.1.0] - 2021-12-23
 
 ### Added

packages/pluggableWidgets/accessibility-helper-web/src/AccessibilityHelper.editorConfig.ts

@@ -1,4 +1,10 @@
-import { StructurePreviewProps, DropZoneProps, RowLayoutProps, TextProps } from "@mendix/pluggable-widgets-commons";
+import {
+    StructurePreviewProps,
+    DropZoneProps,
+    RowLayoutProps,
+    TextProps,
+    structurePreviewPalette
+} from "@mendix/pluggable-widgets-commons";
 import { hidePropertyIn, Properties, Problem } from "@mendix/pluggable-widgets-tools";
 import { AttributesListPreviewType, AccessibilityHelperPreviewProps } from "../typings/AccessibilityHelperProps";
 
@@ -32,14 +38,16 @@ export function check(values: AccessibilityHelperPreviewProps): Problem[] {
 }
 
 export function getPreview(values: AccessibilityHelperPreviewProps, isDarkMode: boolean): StructurePreviewProps | null {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+
     return {
         type: "Container",
         borders: true,
         borderWidth: 1,
         children: [
             {
                 type: "RowLayout",
-                backgroundColor: values.content.widgetCount > 0 ? undefined : isDarkMode ? "#3E3E3E" : "#F5F5F5",
+                backgroundColor: values.content.widgetCount > 0 ? undefined : palette.background.topbarStandard,
                 children: [
                     {
                         type: "DropZone",

packages/pluggableWidgets/accordion-web/CHANGELOG.md

@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   We updated the light and dark icons and tiles for the widget.
 
+-   We changed colors in the structure mode preview for dark and light modes.
+
 ## [2.2.0] - 2023-01-30
 
 ### Added

packages/pluggableWidgets/accordion-web/src/Accordion.editorConfig.ts

@@ -1,4 +1,9 @@
-import { ContainerProps, RowLayoutProps, StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
+import {
+    ContainerProps,
+    RowLayoutProps,
+    StructurePreviewProps,
+    structurePreviewPalette
+} from "@mendix/pluggable-widgets-commons";
 import {
     hideNestedPropertiesIn,
     hidePropertiesIn,
@@ -105,6 +110,7 @@ export function check(values: AccordionPreviewProps): Problem[] {
 }
 
 export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean): StructurePreviewProps | null {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const groups =
         values.groups.length > 0
             ? values.groups
@@ -128,7 +134,7 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
     const titleHeader: RowLayoutProps = {
         type: "RowLayout",
         columnSize: "fixed",
-        backgroundColor: isDarkMode ? "#4F4F4F" : "#F5F5F5",
+        backgroundColor: palette.background.topbarStandard,
         borders: true,
         borderWidth: 1,
         children: [
@@ -139,7 +145,7 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
                     {
                         type: "Text",
                         content: "Accordion",
-                        fontColor: isDarkMode ? "#DEDEDE" : "#6B707B"
+                        fontColor: palette.text.primary
                     }
                 ]
             }

packages/pluggableWidgets/badge-button-web/CHANGELOG.md

@@ -6,7 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We changed colors in the structure mode preview for dark and light modes.
+
 -   We updated page explorer's caption to display label.
+
 -   We updated the light and dark icons and tiles for the widget.
 
 ## [3.1.0] - 2021-12-23

packages/pluggableWidgets/badge-button-web/src/BadgeButton.editorConfig.ts

@@ -1,7 +1,10 @@
 import { BadgeButtonPreviewProps } from "../typings/BadgeButtonProps";
-import { StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
+import { StructurePreviewProps, structurePreviewPalette } from "@mendix/pluggable-widgets-commons";
 
 export function getPreview(values: BadgeButtonPreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
+    const buttonBg = palette.background.buttonInfo;
+
     return {
         type: "RowLayout",
         columnSize: "grow",
@@ -38,7 +41,7 @@ export function getPreview(values: BadgeButtonPreviewProps, isDarkMode: boolean)
                                             {
                                                 type: "Text",
                                                 content: values.value,
-                                                fontColor: isDarkMode ? "#579BF9" : "#264AE5",
+                                                fontColor: buttonBg,
                                                 bold: true,
                                                 fontSize: 8
                                             }
@@ -52,7 +55,7 @@ export function getPreview(values: BadgeButtonPreviewProps, isDarkMode: boolean)
                         ]
                     }
                 ],
-                backgroundColor: isDarkMode ? "#579BF9" : "#264AE5",
+                backgroundColor: buttonBg,
                 borderRadius: 4
             },
             {

packages/pluggableWidgets/badge-web/CHANGELOG.md

@@ -6,9 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
 -   We updated page explorer's caption to display value.
+
 -   We updated the light and dark icons and tiles for the widget.
 
+-   We changed colors in the structure mode preview for dark and light modes.
+
 ## [3.1.0] - 2021-12-23
 
 ### Added

packages/pluggableWidgets/badge-web/src/Badge.editorConfig.ts

@@ -1,7 +1,8 @@
-import { StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
+import { StructurePreviewProps, structurePreviewPalette } from "@mendix/pluggable-widgets-commons";
 import { BadgePreviewProps } from "../typings/BadgeProps";
 
 export function getPreview(values: BadgePreviewProps, isDarkMode: boolean): StructurePreviewProps {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     return {
         type: "RowLayout",
         columnSize: "grow",
@@ -15,15 +16,15 @@ export function getPreview(values: BadgePreviewProps, isDarkMode: boolean): Stru
                             {
                                 type: "Text",
                                 content: values.value,
-                                fontColor: "#FFF",
+                                fontColor: palette.text.primary,
                                 bold: true,
                                 fontSize: 8
                             }
                         ],
                         padding: values.value ? 8 : 18
                     }
                 ],
-                backgroundColor: isDarkMode ? "#579BF9" : "#264AE5",
+                backgroundColor: palette.background.buttonInfo,
                 borderRadius: values.type === "badge" ? 22 : 8
             },
             { type: "Container", grow: 2 }

packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Changed
 
+-   We changed colors in the structure mode preview for dark and light modes.
+
 -   We replaced glyphicons with internal icons
 -   We updated the light and dark icons and tiles for the widget.
 

packages/pluggableWidgets/datagrid-date-filter-web/src/DatagridDateFilter.editorConfig.ts

@@ -22,7 +22,8 @@ import {
     smallerThanIcon,
     smallerThanIconDark,
     StructurePreviewProps,
-    TextProps
+    text,
+    structurePreviewPalette
 } from "@mendix/pluggable-widgets-commons";
 import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
 
@@ -57,6 +58,7 @@ export function getProperties(
 }
 
 export const getPreview = (values: DatagridDateFilterPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
+    const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
     const adjustableByUserContainer = values.adjustable
         ? [
               {
@@ -88,25 +90,17 @@ export const getPreview = (values: DatagridDateFilterPreviewProps, isDarkMode: b
             {
                 type: "RowLayout",
                 columnSize: "grow",
-                backgroundColor: isDarkMode ? "#313131" : "#FFFFFF",
+                backgroundColor: palette.background.container,
                 children: [
                     ...adjustableByUserContainer,
                     {
                         type: "Container",
                         padding: 8,
                         children: [
-                            {
-                                type: "Text",
-                                fontColor: values.placeholder
-                                    ? isDarkMode
-                                        ? "#A4A4A4"
-                                        : "#BBBBBB"
-                                    : isDarkMode
-                                    ? "#313131"
-                                    : "#FFF",
-                                italic: true,
-                                content: values.placeholder ? values.placeholder : "Sample"
-                            } as TextProps
+                            text({
+                                fontColor: palette.text.secondary,
+                                italic: true
+                            })(values.placeholder || " ")
                         ],
                         grow: 1
                     } as ContainerProps,