Deprecations: Add complex example (#237)

Author: rami-elementor

src/.vuepress/sidebars/deprecations.js

@@ -25,6 +25,7 @@ module.exports = [
     children: [
       'simple-example',
       'advanced-example',
+      'complex-example',
     ]
   },
 ];

src/deprecations/complex-example.md

@@ -0,0 +1,137 @@
+# Complex Example
+
+<Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Intermediate" />
+
+In Elementor 3.0, the limited Schemes mechanism had been replaced with [Globals](./../editor-controls/global-style/) which allows users to define limitless colors and typographies. Addons using schemes in their widgets controls should update the code.
+
+## Schemes to Globals
+
+Addon developers should update their code, replacing deprecated Schemes with Globals.
+
+### Typography
+
+```diff
+$this->add_group_control(
+	\Elementor\Group_Control_Typography::get_type(),
+	[
+		'name' => 'heading_typography',
+-		'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_1,
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_PRIMARY,
++		],
+		'selector' => '{{WRAPPER}} .heading-class',
+	]
+);
+
+$this->add_group_control(
+	\Elementor\Group_Control_Typography::get_type(),
+	[
+		'name' => 'subheading_typography',
+-		'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_2,
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_SECONDARY,
++		],
+		'selector' => '{{WRAPPER}} .subheading-class',
+	]
+);
+
+$this->add_group_control(
+	\Elementor\Group_Control_Typography::get_type(),
+	[
+		'name' => 'text_typography',
+-		'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_3,
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_TEXT,
++		],
+		'selector' => '{{WRAPPER}} .text-class',
+	]
+);
+
+$this->add_group_control(
+	\Elementor\Group_Control_Typography::get_type(),
+	[
+		'name' => 'accent_typography',
+-		'scheme' => \Elementor\Core\Schemes\Typography::TYPOGRAPHY_4,
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Typography::TYPOGRAPHY_ACCENT,
++		],
+		'selector' => '{{WRAPPER}} .accent-class',
+	]
+);
+```
+
+### Colors
+
+```diff
+$this->add_control(
+	'heading_color',
+	[
+		'label' => esc_html__( 'Heading Color', 'textdomain' ),
+		'type' => \Elementor\Controls_Manager::COLOR,
+-		'scheme' => [
+-			'type' => \Elementor\Core\Schemes\Color::get_type(),
+-			'value' => \Elementor\Core\Schemes\Color::COLOR_1,
+-		],
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_PRIMARY,
++		],
+		'selectors' => [
+			'{{WRAPPER}} .heading-class' => 'color: {{VALUE}};',
+		],
+	]
+);
+
+$this->add_control(
+	'subheading_color',
+	[
+		'label' => esc_html__( 'Subheading Color', 'textdomain' ),
+		'type' => \Elementor\Controls_Manager::COLOR,
+-		'scheme' => [
+-			'type' => \Elementor\Core\Schemes\Color::get_type(),
+-			'value' => \Elementor\Core\Schemes\Color::COLOR_2,
+-		],
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_SECONDARY,
++		],
+		'selectors' => [
+			'{{WRAPPER}} .subheading-class' => 'color: {{VALUE}};',
+		],
+	]
+);
+
+$this->add_control(
+	'text_color',
+	[
+		'label' => esc_html__( 'Text Color', 'textdomain' ),
+		'type' => \Elementor\Controls_Manager::COLOR,
+-		'scheme' => [
+-			'type' => \Elementor\Core\Schemes\Color::get_type(),
+-			'value' => \Elementor\Core\Schemes\Color::COLOR_3,
+-		],
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_TEXT,
++		],
+		'selectors' => [
+			'{{WRAPPER}} .text-class' => 'color: {{VALUE}};',
+		],
+	]
+);
+
+$this->add_control(
+	'accent_color',
+	[
+		'label' => esc_html__( 'Accent Color', 'textdomain' ),
+		'type' => \Elementor\Controls_Manager::COLOR,
+-		'scheme' => [
+-			'type' => \Elementor\Core\Schemes\Color::get_type(),
+-			'value' => \Elementor\Core\Schemes\Color::COLOR_4,
+-		],
++		'global' => [
++			'default' => \Elementor\Core\Kits\Documents\Tabs\Global_Colors::COLOR_ACCENT,
++		],
+		'selectors' => [
+			'{{WRAPPER}} .accent-class' => 'color: {{VALUE}};',
+		],
+	]
+);
+```