feat: Initial clean release of CHM

packages/app-desktop/gui/style/ConfigMenuBar.js

@@ -0,0 +1,52 @@
+const { createSelector } = require('reselect');
+const { themeStyle } = require('@joplin/lib/theme');
+
+const themeSelector = (state, props) => themeStyle(props.themeId);
+
+const style = createSelector(
+	themeSelector,
+	(theme) => {
+		const output = {
+			button: {
+				fontFamily: theme.fontFamily,
+				minWidth: 52,
+				border: 'none',
+				flexDirection: 'column',
+				display: 'flex',
+				alignItems: 'center',
+				padding: 9,
+				backgroundColor: theme.backgroundColor,
+				userSelect: 'none',
+			},
+			buttonIcon: {
+				fontSize: 24,
+				color: theme.iconColor,
+			},
+			buttonLabel: {
+				display: 'flex',
+				flex: 1,
+				alignItems: 'flex-end',
+				color: theme.colorFaded,
+			},
+			root: {
+				minHeight: 58,
+				display: 'flex',
+				borderBottomWidth: 1,
+				borderBottomStyle: 'solid',
+				borderBottomColor: theme.dividerColor,
+			},
+			barButtons: {
+				display: 'flex',
+				flexDirection: 'row',
+			},
+		};
+
+		output.buttonIconSelected = { ...output.buttonIcon, color: theme.highlightedColor };
+
+		output.buttonLabelSelected = { ...output.buttonLabel, color: theme.color };
+
+		return output;
+	},
+);
+
+module.exports = style;

packages/app-desktop/gui/style/ExtensionBadge.js

@@ -0,0 +1,44 @@
+'use strict';
+const { createSelector } = require('reselect');
+const { themeStyle } = require('@joplin/lib/theme');
+const themeSelector = (state, props) => themeStyle(props.themeId);
+const style = createSelector(themeSelector, (theme) => {
+	const output = {
+		root: {
+			width: 220,
+			height: 60,
+			borderRadius: 4,
+			border: '1px solid',
+			borderColor: theme.dividerColor,
+			backgroundColor: theme.backgroundColor,
+			paddingLeft: 14,
+			paddingRight: 14,
+			paddingTop: 8,
+			paddingBottom: 8,
+			boxSizing: 'border-box',
+			display: 'flex',
+			flexDirection: 'row',
+			boxShadow: '0px 1px 1px rgba(0,0,0,0.3)',
+		},
+		logo: {
+			width: 42,
+			height: 42,
+		},
+		labelGroup: {
+			display: 'flex',
+			flexDirection: 'column',
+			justifyContent: 'center',
+			marginLeft: 14,
+			fontFamily: theme.fontFamily,
+			color: theme.color,
+			fontSize: theme.fontSize,
+		},
+		locationLabel: {
+			fontSize: theme.fontSize * 1.2,
+			fontWeight: 'bold',
+		},
+	};
+	return output;
+});
+module.exports = style;
+// # sourceMappingURL=ExtensionBadge.js.map

packages/app-desktop/gui/style/StyledFormLabel.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const StyledFormLabel = styled.div`
+	font-size: ${props => props.theme.fontSize * 1.083333}px;
+	color: ${props => props.theme.color};
+	font-family: ${props => props.theme.fontFamily};
+	font-weight: 500;
+	margin-bottom: ${props => props.theme.mainPadding / 2}px;
+`;
+
+export default StyledFormLabel;

packages/app-desktop/gui/style/StyledInput.tsx

@@ -0,0 +1,37 @@
+const styled = require('styled-components').default;
+const Color = require('color');
+
+interface StyleProps {
+	theme: {
+		color: string;
+		color4: string;
+		colorFaded: string;
+		fontSize: number;
+		backgroundColor: string;
+		dividerColor: string;
+	};
+}
+
+const StyledInput = styled.input`
+	border: 1px solid ${(props: StyleProps) => props.theme.dividerColor};
+	border-radius: 6px;
+	font-size: ${(props: StyleProps) => props.theme.fontSize}px;
+	color: ${(props: StyleProps) => props.theme.color};
+	padding: 0 10px;
+	height: 30px;
+	max-height: 30px;
+	box-sizing: border-box;
+	background-color: ${(props: StyleProps) => props.theme.backgroundColor};
+	outline: none;
+
+	&::placeholder {
+		color: ${(props: StyleProps) => props.theme.colorFaded};
+	}
+
+	&:focus {
+		border-color: ${(props: StyleProps) => props.theme.color4};
+		box-shadow: 0 0 0 3px ${(props: StyleProps) => Color(props.theme.color4).alpha(0.15)};
+	}
+`;
+
+export default StyledInput;

packages/app-desktop/gui/style/StyledLink.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const StyledLink = styled.a`
+	font-size: ${props => props.theme.fontSize}px;
+	color: ${props => props.theme.urlColor};
+	font-family: ${props => props.theme.fontFamily};
+`;
+
+export default StyledLink;

packages/app-desktop/gui/style/StyledMessage.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+const StyledMessage = styled.div<{ type: string }>`
+	border-radius: 3px;
+	background-color: ${props => props.type === 'error' ? props.theme.warningBackgroundColor : 'transparent'};
+	font-size: ${props => props.theme.fontSize}px;
+	color: ${props => props.theme.color};
+	font-family: ${props => props.theme.fontFamily};
+	padding: ${props => props.type === 'error' ? props.theme.mainPadding : '0'}px;
+	word-break: break-all;
+`;
+
+export default StyledMessage;

packages/app-desktop/gui/style/StyledTextInput.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledInput = styled.input`
+	
+`;
+
+export default StyledInput;