jodit 4.0.0-beta.49 → 4.0.0-beta.54

package/CHANGELOG.md

@@ -9,10 +9,36 @@
 > -   :house: [Internal]
 > -   :nail_care: [Polish]
 
+## 4.0.0-beta.52
+
+#### :boom: Breaking Change
+
+-   Removed deprecated selection.applyStyle method
+-   Changed Create.sandbox signature to return body,iframe tuple
+-   In the plugin system, the requires field has been removed from instances,
+    only the field in the constructor has been left
+    ```js
+    class somePlugin extends Jodit.modulules.Plugin {
+      static requires = ['hotkeys']; // It still works
+      requires = ['hotkeys']; // Now it does not work
+    }
+    ```
+-   Deprecated were removed
+    - `Dom.isTag` does not support array
+    - `Select.applyStyle` method was removed
+    - `history.observer` was removed
+    - `editorCssClass` removed
+
+- `wrapNodes.exclude` changed from array to set
+- `allowResizeTags` changed from array to set
+- `resizer.useAspectRatio` changed from array to set
+
+-   All css variables renamed to kebab-case
+
 ## 4.0.0-beta.42
 
 -   Remove all languages from lang/index.js for ESM build
--   Only base plugins list in plugins/index.js  for ESM build
+-   Only base plugins list in plugins/index.js for ESM build
 -   Remove polyfills from ESM build
 -   Remove `composer.json`
 
@@ -2139,11 +2165,11 @@ Related with https://github.com/xdan/jodit/issues/574. In some cases need to lim
 -   @property {IUIOption[]} link.selectOptionsClassName=[] The list of the option for the select (to use with
     modeClassName="select")
 -   ex: [
--                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           	{ value: "", text: "" },
--                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           	{ value: "val1", text: "text1" },
--                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           	{ value: "val2", text: "text2" },
--                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           	{ value: "val3", text: "text3" }
--                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ]
+-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 	{ value: "", text: "" },
+-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 	{ value: "val1", text: "text1" },
+-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 	{ value: "val2", text: "text2" },
+-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 	{ value: "val3", text: "text3" }
+-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ]
     PR: https://github.com/xdan/jodit/pull/577 Thanks @s-renier-taonix-fr
 
 ##### New option `statusbar: boolean = true`

package/README.md

@@ -107,9 +107,9 @@ You can connect the necessary plugins and languages yourself:
 ```html
 <link
 	rel="stylesheet"
-	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.49/es2021/jodit.min.css"
+	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.54/es2021/jodit.min.css"
 />
-<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.49/es2021/jodit.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.54/es2021/jodit.min.js"></script>
 ```
 
 #### unpkg
@@ -118,9 +118,9 @@ You can connect the necessary plugins and languages yourself:
 ```html
 <link
 	rel="stylesheet"
-	href="https://unpkg.com/jodit@4.0.0-beta.49/es2021/jodit.min.css"
+	href="https://unpkg.com/jodit@4.0.0-beta.54/es2021/jodit.min.css"
 />
-<script src="https://unpkg.com/jodit@4.0.0-beta.49/es2021/jodit.min.js"></script>
+<script src="https://unpkg.com/jodit@4.0.0-beta.54/es2021/jodit.min.js"></script>
 ```
 
 

package/es2015/jodit.css

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is awesome and usefully wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.0.0-beta.49
+ * Version: v4.0.0-beta.54
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */
@@ -26,7 +26,7 @@
   --jd-color-red: #ff3b3b;
   --jd-color-light-red: rgba(255, 59, 59, 0.4);
   --jd-color-default: var(--jd-color-dark);
-  --jd-color-text: #222222;
+  --jd-color-text: #222;
   --jd-color-label: var(--jd-color-gray-dark);
   --jd-color-error: var(--jd-color-red);
   --jd-color-border: var(--jd-color-gray);
@@ -50,13 +50,13 @@
   --jd-color-background-filebrowser-folders: #3f3f3f;
   --jd-color-background-active: #2196f3;
   --jd-color-background-selection: #b5d6fd;
-  --jd-color-background-selection_opacity50: rgba(181, 214, 253, 0.995);
+  --jd-color-background-selection-opacity50: rgba(181, 214, 253, 0.995);
   --jd-color-source-area: #323232;
   --jd-color-button-background-hover: #dcdcdc;
-  --jd-color-button-background-hover_opacity40: rgba(220, 220, 220, 0.4);
-  --jd-color-button-background-hover_opacity60: rgba(220, 220, 220, 0.6);
-  --jd-font-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-		Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  --jd-color-button-background-hover-opacity40: rgba(220, 220, 220, 0.4);
+  --jd-color-button-background-hover-opacity60: rgba(220, 220, 220, 0.6);
+  --jd-font-default: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
+		oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
   --jd-font-size-default: 14px;
   --jd-font-size-small: 11px;
   --jd-color-text-icons: rgba(0, 0, 0, 0.75);
@@ -70,23 +70,22 @@
   --jd-z-index-context-menu: 30000005;
   --jd-z-index-tooltip: 30000006;
   --jd-icon-loader-size: 48px;
-  --jd-width_element_default: 18px;
-  --jd-height_element_default: 18px;
-  --jd-dark_background_color: #575757;
-  --jd-dark-text-color: var(--jd-color-white);
-  --jd-dark_background_ligher: #787878;
-  --jd-dark_background_darknes: #353535;
-  --jd-dark_border_color: #444;
-  --jd-dark_text_color: #d1cccc;
-  --jd-dark_text_color_opacity80: rgba(209, 204, 204, 0.8);
-  --jd-dark_text_color_opacity50: rgba(209, 204, 204, 0.5);
-  --jd-dark_icon_color: #c0c0c0;
-  --jd-dark_toolbar_color: #5f5c5c;
-  --jd-dark_toolbar_seperator_color1: rgba(81, 81, 81, 0.41);
-  --jd-dark_toolbar_seperator_color2: #686767;
-  --jd-dark_toolbar_seperator_color_opacity80: rgba(104, 103, 103, 0.8);
-  --jd-dark_toolbar_seperator_color3: rgba(104, 103, 103, 0.75);
-  --jd-dark_color-border-selected: #152f5f;
+  --jd-width-element-default: 18px;
+  --jd-height-element-default: 18px;
+  --jd-dark-background-color: #575757;
+  --jd-dark-background-ligher: #787878;
+  --jd-dark-background-darknes: #353535;
+  --jd-dark-border-color: #444;
+  --jd-dark-text-color: #d1cccc;
+  --jd-dark-text-color-opacity80: rgba(209, 204, 204, 0.8);
+  --jd-dark-text-color-opacity50: rgba(209, 204, 204, 0.5);
+  --jd-dark-icon-color: #c0c0c0;
+  --jd-dark-toolbar-color: #5f5c5c;
+  --jd-dark-toolbar-seperator-color1: rgba(81, 81, 81, 0.41);
+  --jd-dark-toolbar-seperator-color2: #686767;
+  --jd-dark-toolbar-seperator-color-opacity80: rgba(104, 103, 103, 0.8);
+  --jd-dark-toolbar-seperator-color3: rgba(104, 103, 103, 0.75);
+  --jd-dark-color-border-selected: #152f5f;
   --jd-width-default: 180px;
   --jd-width-input-min: var(--jd-width-default);
   --jd-input-height: 32px;
@@ -130,11 +129,8 @@
 .jodit-container:not(.jodit_inline) .jodit-wysiwyg jodit-media::before {
   position: absolute;
   z-index: 1;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   content: '';
+  inset: 0;
 }
 /*!
  * Jodit Editor (https://xdsoft.net/jodit/)
@@ -208,8 +204,6 @@
   padding: 0 var(--jd-padding-default);
   border: 1px solid var(--jd-color-border);
   border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   background-color: var(--jd-color-white);
   line-height: var(--jd-input-height);
@@ -323,16 +317,13 @@
 }
 .jodit-switcher .jodit-switcher__slider {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   border-radius: var(--jd-switche-height);
   background-color: var(--jd-color-gray);
   cursor: pointer;
+  inset: 0;
   transition: 0.4s;
 }
-.jodit-switcher .jodit-switcher__slider:before {
+.jodit-switcher .jodit-switcher__slider::before {
   position: absolute;
   bottom: var(--jd-switche-slider-margin);
   left: var(--jd-switche-slider-margin);
@@ -346,7 +337,7 @@
 input:checked + .jodit-switcher__slider {
   background-color: var(--jd-color-background-active);
 }
-input:checked + .jodit-switcher__slider:before {
+input:checked + .jodit-switcher__slider::before {
   transform: translateX(calc(var(--jd-switche-width) - var(--jd-switche-slider-margin) * 2 - var(--jd-switche-slider-size)));
 }
 input:focus + .jodit-switcher__slider {
@@ -713,7 +704,7 @@ svg.jodit-icon {
   width: 100%;
 }
 .jodit-context-menu_theme_dark .jodit-context-menu__content {
-  background-color: var(--jd-dark_background_color);
+  background-color: var(--jd-dark-background-color);
 }
 
 /*!
@@ -1104,11 +1095,11 @@ svg.jodit-icon {
 }
 .jodit-ui-button:active:not([disabled]),
 .jodit-ui-button[aria-pressed='true']:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity40);
+  background-color: var(--jd-color-button-background-hover-opacity40);
   outline: 0;
 }
 .jodit-ui-button[aria-pressed='true']:hover:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity60);
+  background-color: var(--jd-color-button-background-hover-opacity60);
 }
 .jodit-ui-button[disabled] {
   opacity: 0.3;
@@ -1475,7 +1466,7 @@ svg.jodit-icon {
   border-top-right-radius: 0;
 }
 .jodit-ui-button-group .jodit-ui-button + .jodit-ui-button {
-  border-left: 1px solid var(--jd-color-button-background-hover_opacity40);
+  border-left: 1px solid var(--jd-color-button-background-hover-opacity40);
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
@@ -1631,7 +1622,7 @@ svg.jodit-icon {
 }
 .jodit-dialog_theme_dark,
 .jodit-dialog_theme_dark .jodit-dialog__panel {
-  background-color: var(--jd-dark_background_darknes);
+  background-color: var(--jd-dark-background-darknes);
   color: var(--jd-dark-text-color);
 }
 .jodit-dialog__header {
@@ -1924,8 +1915,6 @@ svg.jodit-icon {
   padding: 0 var(--jd-padding-default);
   border: 1px solid var(--jd-color-border);
   border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   background-color: var(--jd-color-white);
   line-height: var(--jd-input-height);
@@ -2029,8 +2018,6 @@ svg.jodit-icon {
   padding: 0 var(--jd-padding-default);
   border: 1px solid var(--jd-color-border);
   border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   background-color: var(--jd-color-white);
   line-height: var(--jd-input-height);
@@ -2158,8 +2145,6 @@ svg.jodit-icon {
   padding: 0 var(--jd-padding-default);
   border: 1px solid var(--jd-color-border);
   border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   background-color: var(--jd-color-white);
   line-height: var(--jd-input-height);
@@ -2674,11 +2659,11 @@ svg.jodit-icon {
 }
 .jodit-toolbar-button__button:active:not([disabled]),
 .jodit-toolbar-button__button[aria-pressed='true']:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity40);
+  background-color: var(--jd-color-button-background-hover-opacity40);
   outline: 0;
 }
 .jodit-toolbar-button__button[aria-pressed='true']:hover:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity60);
+  background-color: var(--jd-color-button-background-hover-opacity60);
 }
 .jodit-toolbar-button__button[disabled] {
   opacity: 0.3;
@@ -2702,11 +2687,11 @@ svg.jodit-icon {
 }
 .jodit-toolbar-button__trigger:active:not([disabled]),
 .jodit-toolbar-button__trigger[aria-pressed='true']:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity40);
+  background-color: var(--jd-color-button-background-hover-opacity40);
   outline: 0;
 }
 .jodit-toolbar-button__trigger[aria-pressed='true']:hover:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity60);
+  background-color: var(--jd-color-button-background-hover-opacity60);
 }
 .jodit-toolbar-button__trigger[disabled] {
   opacity: 0.3;
@@ -2787,11 +2772,11 @@ svg.jodit-icon {
 }
 .jodit-toolbar-content:active:not([disabled]),
 .jodit-toolbar-content[aria-pressed='true']:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity40);
+  background-color: var(--jd-color-button-background-hover-opacity40);
   outline: 0;
 }
 .jodit-toolbar-content[aria-pressed='true']:hover:not([disabled]) {
-  background-color: var(--jd-color-button-background-hover_opacity60);
+  background-color: var(--jd-color-button-background-hover-opacity60);
 }
 .jodit-toolbar-content[disabled] {
   opacity: 0.3;
@@ -3395,7 +3380,7 @@ svg.jodit-icon {
   width: calc(var(--jd-padding-default) / 2);
 }
 .jodit-filebrowser-files::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 .jodit-filebrowser-files::-webkit-scrollbar-thumb {
   background-color: darkgrey;
@@ -3578,7 +3563,7 @@ svg.jodit-icon {
   width: calc(var(--jd-padding-default) / 2);
 }
 .jodit-filebrowser-tree::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 .jodit-filebrowser-tree::-webkit-scrollbar-thumb {
   background-color: darkgrey;
@@ -4100,7 +4085,7 @@ html.jodit_fullsize-box_true {
   white-space: pre;
 }
 .jodit-paste-storage > div:first-child a.jodit_active {
-  background-color: var(--jd-dark_background_color);
+  background-color: var(--jd-dark-background-color);
   color: var(--jd-color-white);
 }
 .jodit-paste-storage > div:first-child a:focus {
@@ -4382,7 +4367,7 @@ html.jodit_fullsize-box_true {
   background-color: var(--jd-color-background-button-hover);
 }
 .jodit-ui-search__buttons button:focus {
-  border: 1px solid var(--jd-color-background-selection_opacity50);
+  border: 1px solid var(--jd-color-background-selection-opacity50);
 }
 .jodit-ui-search__buttons button:active {
   border: 1px solid var(--jd-color-background-selection);
@@ -4564,14 +4549,14 @@ html.jodit_fullsize-box_true {
 }
 .jodit-symbols__table td a {
   display: inline-block;
-  width: calc(var(--jd-width_element_default) * 1.2);
-  height: calc(var(--jd-height_element_default) * 1.2);
+  width: calc(var(--jd-width-element-default) * 1.2);
+  height: calc(var(--jd-height-element-default) * 1.2);
   box-sizing: border-box;
   border: 1px solid transparent;
   color: var(--jd-color-default);
   cursor: pointer;
   font-size: 16px;
-  line-height: calc(var(--jd-height_element_default) * 1.2);
+  line-height: calc(var(--jd-height-element-default) * 1.2);
   text-align: center;
   text-decoration: none;
   vertical-align: top;
@@ -4632,8 +4617,8 @@ html.jodit_fullsize-box_true {
 }
 .jodit-form__inserter .jodit-form__table-creator-box .jodit-form__container > div > span {
   display: inline-block;
-  width: var(--jd-width_element_default);
-  height: var(--jd-height_element_default);
+  width: var(--jd-width-element-default);
+  height: var(--jd-height-element-default);
   box-sizing: border-box;
   border: 1px solid var(--jd-color-border);
   margin-bottom: 2px;
@@ -4728,25 +4713,25 @@ html.jodit_fullsize-box_true {
 .jodit_theme_dark.jodit-container {
   --jd-color-border: #6b6b6b;
   border-color: var(--jd-color-border);
-  background-color: var(--jd-dark_background_color);
+  background-color: var(--jd-dark-background-color);
 }
 .jodit-dialog_theme_dark.jodit-container.jodit_disabled,
 .jodit_theme_dark.jodit-container.jodit_disabled {
-  background-color: var(--jd-dark_background_color);
+  background-color: var(--jd-dark-background-color);
 }
 .jodit-dialog_theme_dark.jodit-container:not(.jodit_inline) .jodit-workplace,
 .jodit_theme_dark.jodit-container:not(.jodit_inline) .jodit-workplace {
-  border-color: var(--jd-dark_background_color);
+  border-color: var(--jd-dark-background-color);
 }
 .jodit-dialog_theme_dark .jodit-popup__content,
 .jodit_theme_dark .jodit-popup__content {
-  background: var(--jd-dark_background_ligher);
+  background: var(--jd-dark-background-ligher);
 }
 .jodit-dialog_theme_dark .jodit-ui-button__text,
 .jodit_theme_dark .jodit-ui-button__text,
 .jodit-dialog_theme_dark .jodit-toolbar-button__text,
 .jodit_theme_dark .jodit-toolbar-button__text {
-  color: var(--jd-dark_text_color);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-ui-button:hover:not([disabled]),
 .jodit_theme_dark .jodit-ui-button:hover:not([disabled]),
@@ -4760,15 +4745,15 @@ html.jodit_fullsize-box_true {
 .jodit_theme_dark .jodit-ui-button__trigger:hover:not([disabled]),
 .jodit-dialog_theme_dark .jodit-toolbar-button__trigger:hover:not([disabled]),
 .jodit_theme_dark .jodit-toolbar-button__trigger:hover:not([disabled]) {
-  background-color: var(--jd-dark_background_ligher);
+  background-color: var(--jd-dark-background-ligher);
 }
 .jodit-dialog_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty),
 .jodit_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty),
 .jodit-dialog_theme_dark .jodit-status-bar,
 .jodit_theme_dark .jodit-status-bar {
   border-color: var(--jd-color-border);
-  background-color: var(--jd-dark_toolbar_color);
-  color: var(--jd-dark_text_color);
+  background-color: var(--jd-dark-toolbar-color);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty) a.jodit-status-bar-link,
 .jodit_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty) a.jodit-status-bar-link,
@@ -4782,7 +4767,7 @@ html.jodit_fullsize-box_true {
 .jodit_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty) a.jodit-status-bar-link:visited,
 .jodit-dialog_theme_dark .jodit-status-bar a.jodit-status-bar-link:visited,
 .jodit_theme_dark .jodit-status-bar a.jodit-status-bar-link:visited {
-  color: var(--jd-dark_text_color);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty),
 .jodit_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty),
@@ -4796,11 +4781,11 @@ html.jodit_fullsize-box_true {
 .jodit_theme_dark .jodit-workplace + .jodit-status-bar:not(:empty) .jodit-status-bar__item span,
 .jodit-dialog_theme_dark .jodit-status-bar .jodit-status-bar__item span,
 .jodit_theme_dark .jodit-status-bar .jodit-status-bar__item span {
-  color: var(--jd-dark_text_color);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-toolbar__box:not(:empty),
 .jodit_theme_dark .jodit-toolbar__box:not(:empty) {
-  background: var(--jd-dark_toolbar_color);
+  background: var(--jd-dark-toolbar-color);
 }
 .jodit-dialog_theme_dark .jodit__upload-button svg,
 .jodit_theme_dark .jodit__upload-button svg,
@@ -4808,19 +4793,19 @@ html.jodit_fullsize-box_true {
 .jodit_theme_dark .jodit-toolbar-button .jodit-toolbar-button__trigger,
 .jodit-dialog_theme_dark .jodit-icon,
 .jodit_theme_dark .jodit-icon {
-  fill: var(--jd-dark_icon_color);
-  stroke: var(--jd-dark_icon_color);
+  fill: var(--jd-dark-icon-color);
+  stroke: var(--jd-dark-icon-color);
 }
 .jodit-dialog_theme_dark .jodit-icon-close,
 .jodit_theme_dark .jodit-icon-close {
-  stroke: var(--jd-dark_icon_color);
+  stroke: var(--jd-dark-icon-color);
 }
 .jodit-dialog_theme_dark .jodit-wysiwyg_iframe,
 .jodit_theme_dark .jodit-wysiwyg_iframe,
 .jodit-dialog_theme_dark .jodit-wysiwyg,
 .jodit_theme_dark .jodit-wysiwyg {
-  background-color: var(--jd-dark_background_color);
-  color: var(--jd-dark_text_color);
+  background-color: var(--jd-dark-background-color);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-form textarea,
 .jodit_theme_dark .jodit-form textarea,
@@ -4828,69 +4813,69 @@ html.jodit_fullsize-box_true {
 .jodit_theme_dark .jodit-form input[type='url'],
 .jodit-dialog_theme_dark .jodit-form input[type='text'],
 .jodit_theme_dark .jodit-form input[type='text'] {
-  border-color: var(--jd-dark_toolbar_seperator_color2);
-  background-color: var(--jd-dark_toolbar_seperator_color1);
-  color: var(--jd-dark_text_color);
+  border-color: var(--jd-dark-toolbar-seperator-color2);
+  background-color: var(--jd-dark-toolbar-seperator-color1);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-form button,
 .jodit_theme_dark .jodit-form button {
-  background-color: var(--jd-dark_toolbar_seperator_color3);
-  color: var(--jd-dark_text_color);
+  background-color: var(--jd-dark-toolbar-seperator-color3);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-placeholder,
 .jodit_theme_dark .jodit-placeholder {
-  color: var(--jd-dark_text_color_opacity80);
+  color: var(--jd-dark-text-color-opacity80);
 }
 .jodit-dialog_theme_dark .jodit-drag-and-drop__file-box,
 .jodit_theme_dark .jodit-drag-and-drop__file-box,
 .jodit-dialog_theme_dark .jodit_uploadfile_button,
 .jodit_theme_dark .jodit_uploadfile_button {
-  color: var(--jd-dark_text_color);
+  color: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-drag-and-drop__file-box:hover,
 .jodit_theme_dark .jodit-drag-and-drop__file-box:hover,
 .jodit-dialog_theme_dark .jodit_uploadfile_button:hover,
 .jodit_theme_dark .jodit_uploadfile_button:hover {
-  background-color: var(--jd-dark_toolbar_seperator_color3);
+  background-color: var(--jd-dark-toolbar-seperator-color3);
 }
 .jodit-dialog_theme_dark .jodit-add-new-line::before,
 .jodit_theme_dark .jodit-add-new-line::before {
-  border-top-color: var(--jd-dark_toolbar_seperator_color2);
+  border-top-color: var(--jd-dark-toolbar-seperator-color2);
 }
 .jodit-dialog_theme_dark .jodit-add-new-line span,
 .jodit_theme_dark .jodit-add-new-line span {
-  border-color: var(--jd-dark_toolbar_seperator_color2);
-  background: var(--jd-dark_toolbar_seperator_color3);
+  border-color: var(--jd-dark-toolbar-seperator-color2);
+  background: var(--jd-dark-toolbar-seperator-color3);
 }
 .jodit-dialog_theme_dark .jodit-add-new-line span svg,
 .jodit_theme_dark .jodit-add-new-line span svg {
-  fill: var(--jd-dark_text_color);
+  fill: var(--jd-dark-text-color);
 }
 .jodit-dialog_theme_dark .jodit-resizer > i,
 .jodit_theme_dark .jodit-resizer > i {
-  border-color: var(--jd-dark_icon_color);
-  background: var(--jd-dark_toolbar_seperator_color3);
+  border-color: var(--jd-dark-icon-color);
+  background: var(--jd-dark-toolbar-seperator-color3);
 }
 .jodit-dialog_theme_dark .jodit-select,
 .jodit_theme_dark .jodit-select,
 .jodit-dialog_theme_dark .jodit-input,
 .jodit_theme_dark .jodit-input {
-  border-color: var(--jd-dark_border_color);
-  background-color: var(--jd-dark_background_ligher);
-  color: var(--jd-dark_border_color);
+  border-color: var(--jd-dark-border-color);
+  background-color: var(--jd-dark-background-ligher);
+  color: var(--jd-dark-border-color);
 }
 .jodit-dialog_theme_dark.jodit-dialog,
 .jodit_theme_dark.jodit-dialog {
-  background-color: var(--jd-dark_background_color);
+  background-color: var(--jd-dark-background-color);
 }
 .jodit-dialog_theme_dark.jodit-dialog .jodit-filebrowser__files.active .jodit-filebrowser__files-item,
 .jodit_theme_dark.jodit-dialog .jodit-filebrowser__files.active .jodit-filebrowser__files-item,
 .jodit-dialog_theme_dark.jodit-dialog .jodit-dialog__header,
 .jodit_theme_dark.jodit-dialog .jodit-dialog__header {
-  border-color: var(--jd-dark_border_color);
+  border-color: var(--jd-dark-border-color);
 }
 .jodit-dialog_theme_dark.jodit-dialog .jodit-filebrowser__files.active .jodit-filebrowser__files-item-info,
 .jodit_theme_dark.jodit-dialog .jodit-filebrowser__files.active .jodit-filebrowser__files-item-info {
-  background-color: var(--jd-dark_text_color);
+  background-color: var(--jd-dark-text-color);
 }