Skip to content

Commit 7e08276

Browse files
rahmanunverrahmanunver
authored
[WC-1779]: structure preview colors (#523)
2 parents 5ddcd4b + 2dc1769 commit 7e08276

File tree

45 files changed

+342
-118
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+342
-118
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- We updated the light and dark icons and tiles for the widget.
1212

13+
- We changed colors in the structure mode preview for dark and light modes.
14+
1315
## [2.1.0] - 2021-12-23
1416

1517
### Added

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
import { StructurePreviewProps, DropZoneProps, RowLayoutProps, TextProps } from "@mendix/pluggable-widgets-commons";
1+
import {
2+
StructurePreviewProps,
3+
DropZoneProps,
4+
RowLayoutProps,
5+
TextProps,
6+
structurePreviewPalette
7+
} from "@mendix/pluggable-widgets-commons";
28
import { hidePropertyIn, Properties, Problem } from "@mendix/pluggable-widgets-tools";
39
import { AttributesListPreviewType, AccessibilityHelperPreviewProps } from "../typings/AccessibilityHelperProps";
410

@@ -32,14 +38,16 @@ export function check(values: AccessibilityHelperPreviewProps): Problem[] {
3238
}
3339

3440
export function getPreview(values: AccessibilityHelperPreviewProps, isDarkMode: boolean): StructurePreviewProps | null {
41+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
42+
3543
return {
3644
type: "Container",
3745
borders: true,
3846
borderWidth: 1,
3947
children: [
4048
{
4149
type: "RowLayout",
42-
backgroundColor: values.content.widgetCount > 0 ? undefined : isDarkMode ? "#3E3E3E" : "#F5F5F5",
50+
backgroundColor: values.content.widgetCount > 0 ? undefined : palette.background.topbarStandard,
4351
children: [
4452
{
4553
type: "DropZone",

‎packages/pluggableWidgets/accordion-web/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- We updated the light and dark icons and tiles for the widget.
1212

13+
- We changed colors in the structure mode preview for dark and light modes.
14+
1315
## [2.2.0] - 2023-01-30
1416

1517
### Added

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { ContainerProps, RowLayoutProps, StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
1+
import {
2+
ContainerProps,
3+
RowLayoutProps,
4+
StructurePreviewProps,
5+
structurePreviewPalette
6+
} from "@mendix/pluggable-widgets-commons";
27
import {
38
hideNestedPropertiesIn,
49
hidePropertiesIn,
@@ -105,6 +110,7 @@ export function check(values: AccordionPreviewProps): Problem[] {
105110
}
106111

107112
export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean): StructurePreviewProps | null {
113+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
108114
const groups =
109115
values.groups.length > 0
110116
? values.groups
@@ -128,7 +134,7 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
128134
const titleHeader: RowLayoutProps = {
129135
type: "RowLayout",
130136
columnSize: "fixed",
131-
backgroundColor: isDarkMode ? "#4F4F4F" : "#F5F5F5",
137+
backgroundColor: palette.background.topbarStandard,
132138
borders: true,
133139
borderWidth: 1,
134140
children: [
@@ -139,7 +145,7 @@ export function getPreview(values: AccordionPreviewProps, isDarkMode: boolean):
139145
{
140146
type: "Text",
141147
content: "Accordion",
142-
fontColor: isDarkMode ? "#DEDEDE" : "#6B707B"
148+
fontColor: palette.text.primary
143149
}
144150
]
145151
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Changed
10+
11+
- We changed colors in the structure mode preview for dark and light modes.
12+
913
- We updated page explorer's caption to display label.
14+
1015
- We updated the light and dark icons and tiles for the widget.
1116

1217
## [3.1.0] - 2021-12-23

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { BadgeButtonPreviewProps } from "../typings/BadgeButtonProps";
2-
import { StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
2+
import { StructurePreviewProps, structurePreviewPalette } from "@mendix/pluggable-widgets-commons";
33

44
export function getPreview(values: BadgeButtonPreviewProps, isDarkMode: boolean): StructurePreviewProps {
5+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
6+
const buttonBg = palette.background.buttonInfo;
7+
58
return {
69
type: "RowLayout",
710
columnSize: "grow",
@@ -38,7 +41,7 @@ export function getPreview(values: BadgeButtonPreviewProps, isDarkMode: boolean)
3841
{
3942
type: "Text",
4043
content: values.value,
41-
fontColor: isDarkMode ? "#579BF9" : "#264AE5",
44+
fontColor: buttonBg,
4245
bold: true,
4346
fontSize: 8
4447
}
@@ -52,7 +55,7 @@ export function getPreview(values: BadgeButtonPreviewProps, isDarkMode: boolean)
5255
]
5356
}
5457
],
55-
backgroundColor: isDarkMode ? "#579BF9" : "#264AE5",
58+
backgroundColor: buttonBg,
5659
borderRadius: 4
5760
},
5861
{

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66

77
## [Unreleased]
88

9+
### Changed
10+
911
- We updated page explorer's caption to display value.
12+
1013
- We updated the light and dark icons and tiles for the widget.
1114

15+
- We changed colors in the structure mode preview for dark and light modes.
16+
1217
## [3.1.0] - 2021-12-23
1318

1419
### Added

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
1+
import { StructurePreviewProps, structurePreviewPalette } from "@mendix/pluggable-widgets-commons";
22
import { BadgePreviewProps } from "../typings/BadgeProps";
33

44
export function getPreview(values: BadgePreviewProps, isDarkMode: boolean): StructurePreviewProps {
5+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
56
return {
67
type: "RowLayout",
78
columnSize: "grow",
@@ -15,15 +16,15 @@ export function getPreview(values: BadgePreviewProps, isDarkMode: boolean): Stru
1516
{
1617
type: "Text",
1718
content: values.value,
18-
fontColor: "#FFF",
19+
fontColor: palette.text.primary,
1920
bold: true,
2021
fontSize: 8
2122
}
2223
],
2324
padding: values.value ? 8 : 18
2425
}
2526
],
26-
backgroundColor: isDarkMode ? "#579BF9" : "#264AE5",
27+
backgroundColor: palette.background.buttonInfo,
2728
borderRadius: values.type === "badge" ? 22 : 8
2829
},
2930
{ type: "Container", grow: 2 }

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
88

99
### Changed
1010

11+
- We changed colors in the structure mode preview for dark and light modes.
12+
1113
- We replaced glyphicons with internal icons
1214
- We updated the light and dark icons and tiles for the widget.
1315

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

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ import {
2222
smallerThanIcon,
2323
smallerThanIconDark,
2424
StructurePreviewProps,
25-
TextProps
25+
text,
26+
structurePreviewPalette
2627
} from "@mendix/pluggable-widgets-commons";
2728
import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
2829

@@ -57,6 +58,7 @@ export function getProperties(
5758
}
5859

5960
export const getPreview = (values: DatagridDateFilterPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
61+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
6062
const adjustableByUserContainer = values.adjustable
6163
? [
6264
{
@@ -88,25 +90,17 @@ export const getPreview = (values: DatagridDateFilterPreviewProps, isDarkMode: b
8890
{
8991
type: "RowLayout",
9092
columnSize: "grow",
91-
backgroundColor: isDarkMode ? "#313131" : "#FFFFFF",
93+
backgroundColor: palette.background.container,
9294
children: [
9395
...adjustableByUserContainer,
9496
{
9597
type: "Container",
9698
padding: 8,
9799
children: [
98-
{
99-
type: "Text",
100-
fontColor: values.placeholder
101-
? isDarkMode
102-
? "#A4A4A4"
103-
: "#BBBBBB"
104-
: isDarkMode
105-
? "#313131"
106-
: "#FFF",
107-
italic: true,
108-
content: values.placeholder ? values.placeholder : "Sample"
109-
} as TextProps
100+
text({
101+
fontColor: palette.text.secondary,
102+
italic: true
103+
})(values.placeholder || " ")
110104
],
111105
grow: 1
112106
} as ContainerProps,

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- We updated the light and dark icons and tiles for the widget.
1212

13+
- We changed colors in the structure mode preview for dark and light modes.
14+
1315
## [2.4.0] - 2023-05-01
1416

1517
### Fixed

‎packages/pluggableWidgets/datagrid-dropdown-filter-web/src/DatagridDropdownFilter.editorConfig.ts

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import {
55
ContainerProps,
66
ImageProps,
77
StructurePreviewProps,
8-
TextProps
8+
text,
9+
structurePreviewPalette
910
} from "@mendix/pluggable-widgets-commons";
1011
import { hidePropertiesIn, hidePropertyIn, Problem, Properties } from "@mendix/pluggable-widgets-tools";
1112

@@ -28,6 +29,7 @@ export function getProperties(
2829
}
2930

3031
export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
32+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
3133
return {
3234
type: "RowLayout",
3335
borders: true,
@@ -38,24 +40,16 @@ export const getPreview = (values: DatagridDropdownFilterPreviewProps, isDarkMod
3840
{
3941
type: "RowLayout",
4042
columnSize: "grow",
41-
backgroundColor: isDarkMode ? "#313131" : "#FFFFFF",
43+
backgroundColor: palette.background.container,
4244
children: [
4345
{
4446
type: "Container",
4547
padding: 8,
4648
children: [
47-
{
48-
type: "Text",
49-
fontColor: values.emptyOptionCaption
50-
? isDarkMode
51-
? "#A4A4A4"
52-
: "#BBBBBB"
53-
: isDarkMode
54-
? "#313131"
55-
: "#FFF",
56-
italic: true,
57-
content: values.emptyOptionCaption ? values.emptyOptionCaption : "Sample"
58-
} as TextProps
49+
text({
50+
fontColor: palette.text.secondary,
51+
italic: true
52+
})(values.emptyOptionCaption || " ")
5953
],
6054
grow: 1
6155
} as ContainerProps,

‎packages/pluggableWidgets/datagrid-number-filter-web/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- We updated the light and dark icons and tiles for the widget.
1212

13+
- We changed colors in the structure mode preview for dark and light modes.
14+
1315
## [2.4.0] - 2023-05-01
1416

1517
### Fixed

‎packages/pluggableWidgets/datagrid-number-filter-web/src/DatagridNumberFilter.editorConfig.ts

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ import {
1717
smallerThanEqualIconDark,
1818
smallerThanIcon,
1919
smallerThanIconDark,
20+
structurePreviewPalette,
2021
StructurePreviewProps,
21-
TextProps
22+
text
2223
} from "@mendix/pluggable-widgets-commons";
2324
import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
2425

@@ -43,6 +44,7 @@ export function getProperties(
4344
}
4445

4546
export const getPreview = (values: DatagridNumberFilterPreviewProps, isDarkMode: boolean): StructurePreviewProps => {
47+
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
4648
const adjustableByUserContainer = values.adjustable
4749
? [
4850
{
@@ -74,25 +76,17 @@ export const getPreview = (values: DatagridNumberFilterPreviewProps, isDarkMode:
7476
{
7577
type: "RowLayout",
7678
columnSize: "grow",
77-
backgroundColor: isDarkMode ? "#313131" : "#FFFFFF",
79+
backgroundColor: palette.background.container,
7880
children: [
7981
...adjustableByUserContainer,
8082
{
8183
type: "Container",
8284
padding: 8,
8385
children: [
84-
{
85-
type: "Text",
86-
fontColor: values.placeholder
87-
? isDarkMode
88-
? "#A4A4A4"
89-
: "#BBBBBB"
90-
: isDarkMode
91-
? "#313131"
92-
: "#FFF",
93-
italic: true,
94-
content: values.placeholder ? values.placeholder : "Sample"
95-
} as TextProps
86+
text({
87+
fontColor: palette.text.secondary,
88+
italic: true
89+
})(values.placeholder || " ")
9690
],
9791
grow: 1
9892
} as ContainerProps

‎packages/pluggableWidgets/datagrid-text-filter-web/CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
1010

1111
- We updated the light and dark icons and tiles for the widget.
1212

13+
- We changed colors in the structure mode preview for dark and light modes.
14+
1315
## [2.4.0] - 2023-05-01
1416

1517
### Fixed

0 commit comments

Comments
 (0)