jodit-ui-themes/themes/material3/_theme.less

CSS themes for the Jodit editor, its file browser and the Jodit PRO finder: Office 2010, Windows 10/11, macOS, Material 3, Dracula, Nord, Catppuccin and more

/*!
 * jodit-ui-themes: Material 3 theme for Jodit
 * https://github.com/TimurSeyidov/jodit-ui-themes
 * Released under the MIT license, see LICENSE in the project root.
 */

// Material 3 (baseline light): tonal surfaces, pill-shaped buttons and navigation items, secondary-container selection, outlined fields, 28px dialogs.
//
// Palette (`.theme-tokens()`) and the rules beyond the shared base
// (`.theme-editor()`, `.theme-finder()`) for the material3.*.less files.
// The tokens are described in ../_base/tokens.less.

.theme-tokens() {
	--ui-font: roboto, 'Google Sans', system-ui, -apple-system, sans-serif;
	--ui-text: #1d1b20;
	--ui-muted: #49454f;
	--ui-icon: #49454f;
	--ui-accent: #6750a4;
	--ui-selection: #e8def8;
	--ui-surface: #fef7ff;
	--ui-surface-alt: #f3edf7;
	--ui-content-bg: #fef7ff;
	--ui-line: #e7e0ec;
	--ui-frame: #cac4d0;
	--ui-radius: 12px;
	--ui-shadow: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
	--ui-toolbar-bg: #f3edf7;
	--ui-toolbar-border: #e7e0ec;
	--ui-btn-radius: 20px;
	--ui-hover-bg: #e6e0ea;
	--ui-pressed-bg: #e8def8;
	--ui-pressed-hover-bg: #ddd2ef;
	--ui-pressed-icon: #1d192b;
	--ui-status-bg: #f3edf7;
	--ui-menu-bg: #f3edf7;
	--ui-menu-border: transparent;
	--ui-menu-radius: 4px;
	--ui-menu-shadow: 0 2px 6px 2px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 30%);
	--ui-menu-hover-bg: #e6e0e9;
	--ui-field-bg: #fef7ff;
	--ui-field-border: #79747e;
	--ui-field-hover-border: #1d1b20;
	--ui-field-focus-ring: inset 0 0 0 1px #6750a4;
	--ui-push-bg: transparent;
	--ui-push-text: #6750a4;
	--ui-push-border: #79747e;
	--ui-push-hover-bg: #f4eff9;
	--ui-push-active-bg: #ece5f6;
	--ui-push-radius: 20px;
	--ui-primary-hover-bg: #7965af;
	--ui-dialog-border: transparent;
	--ui-dialog-radius: 28px;
	--ui-dialog-header-bg: #ece6f0;
	--ui-dialog-header-border: transparent;
	--ui-dialog-title-size: 18px;
	--ui-dialog-title-weight: 400;
	--ui-dialog-footer-bg: #ece6f0;
	--ui-close-hover-bg: #ddd8e1;
	--ui-close-hover-icon: #1d1b20;
	--ui-pane-bg: #f7f2fa;
	--ui-pane-border: transparent;
	--ui-source-text: #49454f;
	--ui-item-radius: 12px;
	--ui-item-hover-bg: #ece6f0;
	--ui-item-selected-bg: #e8def8;
	--ui-item-selected-text: #1d192b;
	--ui-thumb-radius: 12px;
	--ui-folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 2.5C1 1.7 1.7 1 2.5 1h3.6l1.6 1.6h5.8c.8 0 1.5.7 1.5 1.5v7.4c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%237965af'/%3E%3Cpath d='M1 5h14v6.5c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%239a82db'/%3E%3C/svg%3E");
}

.theme-editor() {
	// Dialog: one tonal surface from the title to the buttons
	&.jodit-dialog .jodit-dialog__panel,
	&.jodit-dialog .jodit-dialog__content {
		background-color: #ece6f0;
	}

	&.jodit-dialog .jodit-dialog__footer {
		border-top: 0;
	}
}

.theme-finder() {
	// Navigation drawer: pill-shaped folders
	.jodit-file-browser-tree__item,
	.jodit-ui-browser-folder {
		border-radius: 28px;
	}
}