first commit

wp-content/plugins/elementor/packages/elementor-ui/components/index.js

@@ -0,0 +1,2 @@
+export { default as Heading } from './ui/heading';
+export { default as Text } from './ui/text';

wp-content/plugins/elementor/packages/elementor-ui/components/ui/heading.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { getStyle } from 'e-utils';
+import styles from 'e-styles/heading';
+
+const SharedHeading = styled.h1.attrs( ( props ) => ( { as: props.tag } ) )`${ ( props ) => getStyle( styles, props, 'shared' ) }`;
+
+const Heading = styled( SharedHeading )`${ ( props ) => getStyle( styles, props, 'unique' ) }`;
+
+Heading.propTypes = {
+	className: PropTypes.string,
+	children: PropTypes.any,
+	tag: PropTypes.oneOf( [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ] ),
+	variant: PropTypes.oneOf( [ 'display-1', 'display-2', 'display-3', 'display-4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ] ).isRequired,
+};
+
+Heading.defaultProps = {
+	className: '',
+	tag: 'h1',
+};
+
+export default Heading;

wp-content/plugins/elementor/packages/elementor-ui/components/ui/text.js

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { getStyle } from 'e-utils';
+import styles from 'e-styles/text';
+
+const SharedText = styled.p.attrs( ( props ) => ( { as: props.tag } ) )`${ ( props ) => getStyle( styles, props, 'shared' ) }`;
+
+const Text = styled( SharedText )`${ ( props ) => getStyle( styles, props, 'unique' ) }`;
+
+Text.propTypes = {
+	className: PropTypes.string,
+	children: PropTypes.any,
+	variant: PropTypes.oneOf( [ 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' ] ),
+	tag: PropTypes.string,
+};
+
+Text.defaultProps = {
+	className: '',
+	tag: 'p',
+};
+
+export default Text;

wp-content/plugins/elementor/packages/elementor-ui/components/utils.js

@@ -0,0 +1,75 @@
+/**
+ * @param styles {object} - { base: { shared: '', variant: { shared: '', h1: '', h2: '' } }, dark: { shared: '', variant: { shared: '', h1: '', h2: '' } } }
+ * @param config {object} - { variants: { light: true, dark: false } }
+ * @param props {object} - { variant: 'h1', size: 'xl' }
+ * @param type {string} - shared/unique (in case that only the shared/unique styles are needed)
+ * @returns {string} - 'background-color: #000; color: #fff;'
+ */
+export const getStyle = ( styles, props, type ) => {
+	if ( ! styles ) {
+		return '';
+	}
+
+	if ( 'string' === typeof styles ) {
+		return styles;
+	}
+
+	const config = props?.theme?.config || { variants: {} },
+		style = {
+			shared: '',
+			unique: '',
+		};
+
+	// Creating an array that holds only the active theme variants values.
+	const themeVariants = Object.keys( config.variants ).filter( ( key ) => config.variants[ key ] ),
+		addStyle = ( data, keys = [] ) => {
+			if ( 'string' === typeof data && 'unique' !== type ) {
+				style.shared += data;
+
+				return;
+			}
+
+			Object.values( keys ).map( ( key ) => {
+				const styleObjKey = 'shared' !== key ? 'unique' : 'shared';
+
+				if ( ! type || styleObjKey === type ) {
+					style[ styleObjKey ] += data[ key ] || '';
+				}
+			} );
+		};
+
+	// Adding the 'base' key, to be included as the first variant.
+	themeVariants.unshift( 'base' );
+
+	themeVariants.forEach( ( key ) => {
+		const themeVariant = styles[ key ];
+
+		// If key exist in the styles obj (dark, light etc.)
+		if ( themeVariant ) {
+			addStyle( themeVariant, [ 'shared' ] );
+
+			const styledProps = getStyledProps( props );
+
+			// Getting the styled props css from the styles object.
+			Object.entries( styledProps ).forEach( ( [ propName, propValue ] ) => {
+				const styleData = themeVariant[ propName ];
+
+				if ( styleData && propValue ) {
+					addStyle( styleData, [ 'shared', propValue ] );
+				}
+			} );
+		}
+	} );
+
+	// Both properties are returned but their values are depended on the third argument of this function, if empty: both will be calculated.
+	return style.shared + style.unique;
+};
+
+const getStyledProps = ( props ) => {
+	const styledProps = { ...props };
+
+	// Removing props names that are not related to the styles objects.
+	[ 'className', 'children', 'tag', 'as', 'theme' ].forEach( ( prop ) => delete styledProps[ prop ] );
+
+	return styledProps;
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_data/colors/palette.json

@@ -0,0 +1,26 @@
+{
+  "white": "#fff",
+  "black": "#000",
+  "cyan-ionized-air-glow": "#58d0f5",
+  "red-rose-garnet": "#93003F",
+  "red-carnelian": "#b01b1b",
+  "red-tomato-frog": "#F84343",
+  "yellow-hot-sun": "#fcb92c",
+  "green-spandex": "#39b54a",
+  "gray-anthracite": "#26292C",
+  "gray-metalise": "#34383c",
+  "gray-napoleon": "#404349",
+  "gray-lamp-post": "#495157",
+  "gray-abbey": "#4c4f56",
+  "gray-blue-planet": "#556068",
+  "gray-stone-hearth": "#64666a",
+  "gray-sheffield": "#6d7882",
+  "gray-silver-filigree": "#7d7e82",
+  "gray-special-delivery": "#a4afb7",
+  "gray-brainstem": "#b4b5b7",
+  "gray-stone-golem": "#c2cbd2",
+  "gray-hidden-creek": "#d5dadf",
+  "gray-yin-bai-silver": "#e0e1e3",
+  "gray-anti-flash": "#f1f3f5",
+  "gray-emptiness": "#fcfcfc"
+}

wp-content/plugins/elementor/packages/elementor-ui/styles/_data/font/font-weight.json

@@ -0,0 +1,6 @@
+{
+  "normal": 400,
+  "medium": 500,
+  "bold": 700,
+  "base": 400
+}

wp-content/plugins/elementor/packages/elementor-ui/styles/_data/spacing/spacing.json

@@ -0,0 +1,13 @@
+{
+  "base": "0.5rem",
+  "0": "0",
+  "5": "0.625rem",
+  "8": "1rem",
+  "10": "1.25rem",
+  "12": "1.5rem",
+  "16": "2rem",
+  "20": "2.5rem",
+  "24": "3rem",
+  "30": "3.75rem",
+  "44": "5.5rem"
+}

wp-content/plugins/elementor/packages/elementor-ui/styles/_data/typography/typography.json

@@ -0,0 +1,45 @@
+{
+  "font-size-base": "1rem",
+
+  "font-size-10": "0.625rem",
+  "font-size-11": "0.6875rem",
+  "font-size-12": "0.75rem",
+  "font-size-13": "0.8125rem",
+  "font-size-14": "0.875rem",
+  "font-size-15": "0.9375rem",
+  "font-size-18": "1.125rem",
+  "font-size-20": "1.25rem",
+  "font-size-26": "1.625rem",
+  "font-size-30": "1.85rem",
+
+  "line-height-2": 2,
+
+  "line-height-flat": 1,
+  "line-height-base": 1.5,
+  "line-height-sm": 1.2,
+  "line-height-lg": 1.8,
+
+  "display-font-size": "1.85rem",
+
+  "h-1-font-size": "1.625rem",
+  "h-2-font-size": "1.25rem",
+  "h-3-font-size": "1rem",
+  "h-4-font-size": "0.9375rem",
+  "h-5-font-size": "0.875rem",
+  "h-6-font-size": "0.875rem",
+
+  "text-xl-font-size": "1rem",
+  "text-lg-font-size": "0.9375rem",
+  "text-md-font-size": "0.875rem",
+  "text-sm-font-size": "0.8125rem",
+  "text-xs-font-size": "0.75rem",
+  "text-xxs-font-size": "0.6875rem",
+  "font-size-micro": "0.625rem",
+
+  "body-font-size": "0.875rem",
+  "font-size-caption": "0.75rem",
+
+  "small-font-size": "80%",
+  "paragraph-margin-bottom": "",
+  "headings-margin-bottom": ""
+}

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/colors/dark-tints.js

@@ -0,0 +1,12 @@
+import palette from '../../_data/colors/palette.json';
+
+export default {
+	800: palette[ 'gray-anthracite' ],
+	700: palette[ 'gray-metalise' ],
+	600: palette[ 'gray-napoleon' ],
+	500: palette[ 'gray-abbey' ],
+	400: palette[ 'gray-stone-hearth' ],
+	300: palette[ 'gray-silver-filigree' ],
+	200: palette[ 'gray-brainstem' ],
+	100: palette[ 'gray-yin-bai-silver' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/colors/theme-colors.js

@@ -0,0 +1,14 @@
+import palette from '../../_data/colors/palette.json';
+
+export default {
+	textMuted: palette[ 'gray-hidden-creek' ],
+	disabled: palette[ 'gray-stone-golem' ],
+	light: palette.white,
+	dark: palette.black,
+	info: palette[ 'cyan-ionized-air-glow' ],
+	cta: palette[ 'red-rose-garnet' ],
+	danger: palette[ 'red-carnelian' ],
+	success: palette[ 'green-spandex' ],
+	primary: palette[ 'green-spandex' ],
+	warning: palette[ 'yellow-hot-sun' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/colors/tints.js

@@ -0,0 +1,12 @@
+import palette from '../../_data/colors/palette.json';
+
+export default {
+	800: palette[ 'gray-lamp-post' ],
+	700: palette[ 'gray-blue-planet' ],
+	600: palette[ 'gray-sheffield' ],
+	500: palette[ 'gray-special-delivery' ],
+	400: palette[ 'gray-stone-golem' ],
+	300: palette[ 'gray-hidden-creek' ],
+	200: palette[ 'gray-anti-flash' ],
+	100: palette[ 'gray-emptiness' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/font/font-weight.js

@@ -0,0 +1,3 @@
+import fontWeight from '../../_data/font/font-weight.json';
+
+export default fontWeight;

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/spacing/spacing.js

@@ -0,0 +1,3 @@
+import spacing from '../../_data/spacing/spacing.json';
+
+export default spacing;

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/typography/heading.js

@@ -0,0 +1,14 @@
+import type from '../../_data/typography/typography.json';
+
+export default {
+	display1: type[ 'display-font-size' ],
+	display2: type[ 'display-font-size' ],
+	display3: type[ 'display-font-size' ],
+	display4: type[ 'display-font-size' ],
+	h1: type[ 'font-size-26' ],
+	h2: type[ 'font-size-20' ],
+	h3: type[ 'font-size-base' ],
+	h4: type[ 'font-size-15' ],
+	h5: type[ 'font-size-14' ],
+	h6: type[ 'font-size-14' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/typography/line-height.js

@@ -0,0 +1,9 @@
+import type from '../../_data/typography/typography.json';
+
+export default {
+	2: type[ 'line-height-2' ],
+	flat: type[ 'line-height-flat' ],
+	base: type[ 'line-height-base' ],
+	sm: type[ 'line-height-sm' ],
+	lg: type[ 'line-height-lg' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/typography/size.js

@@ -0,0 +1,17 @@
+import type from '../../_data/typography/typography.json';
+
+export default {
+	base: type[ 'font-size-base' ],
+	10: type[ 'font-size-10' ],
+	11: type[ 'font-size-11' ],
+	12: type[ 'font-size-12' ],
+	13: type[ 'font-size-13' ],
+	14: type[ 'font-size-14' ],
+	15: type[ 'font-size-15' ],
+	18: type[ 'font-size-18' ],
+	20: type[ 'font-size-20' ],
+	26: type[ 'font-size-26' ],
+	30: type[ 'font-size-30' ],
+	caption: type[ 'font-size-caption' ],
+	micro: type[ 'font-size-micro' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/_maps/typography/text.js

@@ -0,0 +1,11 @@
+import type from '../../_data/typography/typography.json';
+
+export default {
+	base: type[ 'font-size-14' ],
+	xxs: type[ 'font-size-11' ],
+	xs: type[ 'font-size-12' ],
+	sm: type[ 'font-size-13' ],
+	md: type[ 'font-size-14' ],
+	lg: type[ 'font-size-15' ],
+	xl: type[ 'font-size-base' ],
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/heading.js

@@ -0,0 +1,78 @@
+import { tints, darkTints, heading, lineHeight, fontWeight, spacing } from 'e-styles';
+
+export default {
+	base: {
+		shared: `
+			color: var(--e-styles-heading-color, ${ tints[ '800' ] });
+			font-size: var(--e-styles-heading-font-size);
+			margin-bottom: var(--e-styles-heading-margin-bottom);
+		`,
+		variant: {
+			h1: `
+				--e-styles-heading-font-size: ${ heading.h1 };
+				--e-styles-heading-margin-bottom: 2.5 * ${ spacing.base };
+				font-weight: ${ fontWeight.medium };
+				line-height: ${ lineHeight.flat };
+			`,
+			h2: `
+				--e-styles-heading-font-size: ${ heading.h2 };
+				--e-styles-heading-margin-bottom: 2.5 * ${ spacing.base };
+				font-weight: ${ fontWeight.medium };
+				line-height: ${ lineHeight.sm };
+				margin-top: 0;
+			`,
+			h3: `
+				--e-styles-heading-font-size: ${ heading.h3 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				font-weight: ${ fontWeight.medium };
+				line-height: ${ lineHeight.sm };
+				margin-top: 0;
+			`,
+			h4: `
+				--e-styles-heading-font-size: ${ heading.h4 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				margin-top: 0;
+			`,
+			h5: `
+				--e-styles-heading-font-size: ${ heading.h5 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				margin-top: 0;
+			`,
+			h6: `
+				--e-styles-heading-font-size: ${ heading.h6 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				font-weight: ${ fontWeight.bold };
+				margin-top: 0;
+			`,
+			'display-1': `
+				--e-styles-heading-font-size: ${ heading.display1 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				margin-top: ${ spacing.base };
+			`,
+			'display-2': `
+				--e-styles-heading-font-size: ${ heading.display2 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				margin-top: ${ spacing.base };
+			`,
+			'display-3': `
+				--e-styles-heading-font-size: ${ heading.display3 };
+				--e-styles-heading-margin-bottom: 2.5 * ${ spacing.base };
+				margin-top: 0;
+			`,
+			'display-4': `
+				--e-styles-heading-font-size: ${ heading.display4 };
+				--e-styles-heading-margin-bottom: ${ spacing.base };
+				margin-top: ${ spacing.base };
+			`,
+		},
+		size: `--size-value: default;`,
+	},
+	light: {
+		variant: {
+			h1: `--e-styles-heading-color: ${ tints[ '600' ] };`,
+			h2: `--e-styles-heading-color: ${ tints[ '600' ] };`,
+			'display-3': `--e-styles-heading-color: ${ tints[ '600' ] };`,
+		},
+	},
+	dark: `--e-styles-heading-color: ${ darkTints[ '100' ] };`,
+};

wp-content/plugins/elementor/packages/elementor-ui/styles/index.js

@@ -0,0 +1,24 @@
+import themeColorsMap from './_maps/colors/theme-colors';
+import tintsMap from './_maps/colors/tints';
+import darkTintsMap from './_maps/colors/dark-tints';
+
+import spacingMap from './_maps/spacing/spacing';
+
+import headingMap from './_maps/typography/heading';
+import textMap from './_maps/typography/text';
+import lineHeightMap from './_maps/typography/line-height';
+import sizeMap from './_maps/typography/size';
+
+import fontWeightMap from './_maps/font/font-weight';
+
+export const themeColors = themeColorsMap;
+export const tints = tintsMap;
+export const darkTints = darkTintsMap;
+
+export const spacing = spacingMap;
+
+export const heading = headingMap;
+export const text = textMap;
+export const lineHeight = lineHeightMap;
+export const size = sizeMap;
+export const fontWeight = fontWeightMap;

wp-content/plugins/elementor/packages/elementor-ui/styles/text.js

@@ -0,0 +1,25 @@
+import { tints, darkTints, text, lineHeight, fontWeight } from 'e-styles';
+
+export default {
+	base: {
+		shared: `
+			color: var(--e-styles-text-color);
+			font-size: var(--e-styles-text-font-size, ${ text.base });
+			font-weight: ${ fontWeight.normal };
+			line-height: var(--e-styles-text-line-height, ${ lineHeight.base });
+		`,
+		variant: {
+			xxs: `
+				--e-styles-text-font-size: ${ text.xxs };
+				--e-styles-text-line-height: ${ lineHeight.sm };
+			`,
+			xs: `--e-styles-text-font-size: ${ text.xs };`,
+			sm: `--e-styles-text-font-size: ${ text.sm };`,
+			md: `--e-styles-text-font-size: ${ text.md };`,
+			lg: `--e-styles-text-font-size: ${ text.lg };`,
+			xl: `--e-styles-text-font-size: ${ text.xl };`,
+		},
+	},
+	light: `--e-styles-text-color: ${ tints[ '800' ] };`,
+	dark: `--e-styles-text-color: ${ darkTints[ '200' ] };`,
+};