Skip to content

Commit 2559656

Browse files
tpenguinltgarturbien
tpenguinltg
authored and
arturbien
committed
feat(themes): add Windows theme mapper
Add a util function mapFromWindowsTheme that transforms a Windows theme into a React95 theme.
1 parent d45a552 commit 2559656

File tree

2 files changed

+228
-1
lines changed

2 files changed

+228
-1
lines changed

‎src/common/utils/index.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,86 @@ export function clamp(value, min, max) {
1010
return value;
1111
}
1212

13+
function linearGradient(left, right) {
14+
return `linear-gradient(to right, ${left}, ${right})`;
15+
}
16+
17+
export function mapFromWindowsTheme(name, windowsTheme, useGradients) {
18+
/* eslint-disable no-unused-vars */
19+
const {
20+
ButtonAlternateFace,
21+
ButtonDkShadow,
22+
ButtonFace,
23+
ButtonHilight,
24+
ButtonLight,
25+
ButtonShadow,
26+
ButtonText,
27+
ActiveBorder,
28+
AppWorkspace,
29+
Background,
30+
InactiveBorder,
31+
Scrollbar,
32+
Window,
33+
WindowFrame,
34+
WindowText,
35+
ActiveTitle,
36+
GradientActiveTitle,
37+
GradientInactiveTitle,
38+
InactiveTitle,
39+
InactiveTitleText,
40+
TitleText,
41+
Menu,
42+
MenuBar,
43+
MenuHilight,
44+
MenuText,
45+
GrayText,
46+
Hilight,
47+
HilightText,
48+
HotTrackingColor,
49+
InfoText,
50+
InfoWindow
51+
} = windowsTheme;
52+
/* eslint-enable no-unused-vars */
53+
54+
return {
55+
name,
56+
57+
anchor: HotTrackingColor,
58+
anchorVisited: HotTrackingColor,
59+
borderDark: ButtonShadow,
60+
borderDarkest: ButtonDkShadow,
61+
borderLight: ButtonLight,
62+
borderLightest: ButtonHilight,
63+
canvas: Window,
64+
canvasText: WindowText,
65+
canvasTextDisabled: ButtonShadow,
66+
canvasTextDisabledShadow: ButtonHilight,
67+
canvasTextInvert: HilightText,
68+
checkmark: WindowText,
69+
checkmarkDisabled: GrayText,
70+
flatDark: ButtonShadow,
71+
flatLight: ButtonLight,
72+
focusSecondary: ButtonHilight, // should be Hilight inverted
73+
headerBackground: useGradients
74+
? linearGradient(ActiveTitle, GradientActiveTitle)
75+
: ActiveTitle,
76+
headerNotActiveBackground: useGradients
77+
? linearGradient(InactiveTitle, GradientInactiveTitle)
78+
: InactiveTitle,
79+
headerNotActiveText: InactiveTitleText,
80+
headerText: TitleText,
81+
hoverBackground: Hilight,
82+
material: ButtonFace,
83+
materialDark: InactiveTitle,
84+
materialText: ButtonText,
85+
materialTextDisabled: ButtonShadow,
86+
materialTextDisabledShadow: ButtonHilight,
87+
materialTextInvert: HilightText,
88+
progress: Hilight,
89+
tooltip: InfoWindow
90+
};
91+
}
92+
1393
// helper functions below are from Material UI (https://github.com/mui-org/material-ui)
1494
export function getDecimalPrecision(num) {
1595
if (Math.abs(num) < 1) {

‎src/common/utils/index.spec.js‎

Lines changed: 148 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { clamp, getDecimalPrecision, roundValueToStep } from './index';
1+
import {
2+
clamp,
3+
mapFromWindowsTheme,
4+
getDecimalPrecision,
5+
roundValueToStep
6+
} from './index';
27

38
describe('clamp', () => {
49
it('should return passed value if its between min and max', () => {
@@ -22,6 +27,148 @@ describe('clamp', () => {
2227
});
2328
});
2429

30+
describe('mapFromWindowsTheme', () => {
31+
it('should map corresponding properties directly if gradients are disabled', () => {
32+
const theme = {
33+
ButtonAlternateFace: '#000000',
34+
ButtonDkShadow: '#000001',
35+
ButtonFace: '#000002',
36+
ButtonHilight: '#000003',
37+
ButtonLight: '#000004',
38+
ButtonShadow: '#000005',
39+
ButtonText: '#000006',
40+
ActiveBorder: '#000007',
41+
AppWorkspace: '#000008',
42+
Background: '#000009',
43+
InactiveBorder: '#00000a',
44+
Scrollbar: '#00000b',
45+
Window: '#00000c',
46+
WindowFrame: '#00000d',
47+
WindowText: '#00000e',
48+
ActiveTitle: '#00000f',
49+
GradientActiveTitle: '#000010',
50+
GradientInactiveTitle: '#000011',
51+
InactiveTitle: '#000012',
52+
InactiveTitleText: '#000013',
53+
TitleText: '#000014',
54+
Menu: '#000015',
55+
MenuBar: '#000016',
56+
MenuHilight: '#000017',
57+
MenuText: '#000018',
58+
GrayText: '#000019',
59+
Hilight: '#00001a',
60+
HilightText: '#00001b',
61+
HotTrackingColor: '#00001c',
62+
InfoText: '#00001d',
63+
InfoWindow: '#00001e'
64+
};
65+
const expectedTheme = {
66+
name: 'theme',
67+
anchor: '#00001c',
68+
anchorVisited: '#00001c',
69+
borderDark: '#000005',
70+
borderDarkest: '#000001',
71+
borderLight: '#000004',
72+
borderLightest: '#000003',
73+
canvas: '#00000c',
74+
canvasText: '#00000e',
75+
canvasTextDisabled: '#000005',
76+
canvasTextDisabledShadow: '#000003',
77+
canvasTextInvert: '#00001b',
78+
checkmark: '#00000e',
79+
checkmarkDisabled: '#000019',
80+
flatDark: '#000005',
81+
flatLight: '#000004',
82+
focusSecondary: '#000003',
83+
headerBackground: '#00000f',
84+
headerNotActiveBackground: '#000012',
85+
headerNotActiveText: '#000013',
86+
headerText: '#000014',
87+
hoverBackground: '#00001a',
88+
material: '#000002',
89+
materialDark: '#000012',
90+
materialText: '#000006',
91+
materialTextDisabled: '#000005',
92+
materialTextDisabledShadow: '#000003',
93+
materialTextInvert: '#00001b',
94+
progress: '#00001a',
95+
tooltip: '#00001e'
96+
};
97+
98+
expect(mapFromWindowsTheme('theme', theme, false)).toEqual(expectedTheme);
99+
});
100+
101+
it('should map corresponding properties with gradients if gradients are enabled', () => {
102+
const theme = {
103+
ButtonAlternateFace: '#000000',
104+
ButtonDkShadow: '#000001',
105+
ButtonFace: '#000002',
106+
ButtonHilight: '#000003',
107+
ButtonLight: '#000004',
108+
ButtonShadow: '#000005',
109+
ButtonText: '#000006',
110+
ActiveBorder: '#000007',
111+
AppWorkspace: '#000008',
112+
Background: '#000009',
113+
InactiveBorder: '#00000a',
114+
Scrollbar: '#00000b',
115+
Window: '#00000c',
116+
WindowFrame: '#00000d',
117+
WindowText: '#00000e',
118+
ActiveTitle: '#00000f',
119+
GradientActiveTitle: '#000010',
120+
GradientInactiveTitle: '#000011',
121+
InactiveTitle: '#000012',
122+
InactiveTitleText: '#000013',
123+
TitleText: '#000014',
124+
Menu: '#000015',
125+
MenuBar: '#000016',
126+
MenuHilight: '#000017',
127+
MenuText: '#000018',
128+
GrayText: '#000019',
129+
Hilight: '#00001a',
130+
HilightText: '#00001b',
131+
HotTrackingColor: '#00001c',
132+
InfoText: '#00001d',
133+
InfoWindow: '#00001e'
134+
};
135+
const expectedTheme = {
136+
name: 'theme',
137+
anchor: '#00001c',
138+
anchorVisited: '#00001c',
139+
borderDark: '#000005',
140+
borderDarkest: '#000001',
141+
borderLight: '#000004',
142+
borderLightest: '#000003',
143+
canvas: '#00000c',
144+
canvasText: '#00000e',
145+
canvasTextDisabled: '#000005',
146+
canvasTextDisabledShadow: '#000003',
147+
canvasTextInvert: '#00001b',
148+
checkmark: '#00000e',
149+
checkmarkDisabled: '#000019',
150+
flatDark: '#000005',
151+
flatLight: '#000004',
152+
focusSecondary: '#000003',
153+
headerBackground: 'linear-gradient(to right, #00000f, #000010)',
154+
headerNotActiveBackground: 'linear-gradient(to right, #000012, #000011)',
155+
headerNotActiveText: '#000013',
156+
headerText: '#000014',
157+
hoverBackground: '#00001a',
158+
material: '#000002',
159+
materialDark: '#000012',
160+
materialText: '#000006',
161+
materialTextDisabled: '#000005',
162+
materialTextDisabledShadow: '#000003',
163+
materialTextInvert: '#00001b',
164+
progress: '#00001a',
165+
tooltip: '#00001e'
166+
};
167+
168+
expect(mapFromWindowsTheme('theme', theme, true)).toEqual(expectedTheme);
169+
});
170+
});
171+
25172
describe('getDecimalPrecision', () => {
26173
it('should return 0 when passed a round number', () => {
27174
expect(getDecimalPrecision(4)).toBe(0);

0 commit comments

Comments
 (0)