jodit-ui-themes/themes/macos/_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: macOS theme for Jodit
 * https://github.com/TimurSeyidov/jodit-ui-themes
 * Released under the MIT license, see LICENSE in the project root.
 */

// macOS: unified light toolbar, 6px and 10px corners, blue menu highlight with white text, focus rings, Finder sidebar with blue folders and a blue pill under the selected file name.
//
// Palette (`.theme-tokens()`) and the rules beyond the shared base
// (`.theme-editor()`, `.theme-finder()`) for the macos.*.less files.
// The tokens are described in ../_base/tokens.less.

.theme-tokens() {
	--ui-font: -apple-system, blinkmacsystemfont, 'SF Pro Text', 'Helvetica Neue', arial, sans-serif;
	--ui-text: #262626;
	--ui-muted: #808080;
	--ui-icon: #4a4a4a;
	--ui-accent: #007aff;
	--ui-selection: #b3d7ff;
	--ui-surface: #fff;
	--ui-surface-alt: #f5f5f5;
	--ui-line: #e3e3e3;
	--ui-frame: #d0d0d0;
	--ui-radius: 10px;
	--ui-shadow: 0 20px 50px rgb(0 0 0 / 25%), 0 0 0 0.5px rgb(0 0 0 / 15%);
	--ui-toolbar-bg: #f6f6f6;
	--ui-toolbar-border: #dedede;
	--ui-btn-radius: 6px;
	--ui-hover-bg: #e6e6e6;
	--ui-pressed-bg: #d9d9d9;
	--ui-pressed-hover-bg: #cfcfcf;
	--ui-menu-bg: rgb(246 246 246 / 97%);
	--ui-menu-border: #d4d4d4;
	--ui-menu-radius: 8px;
	--ui-menu-shadow: 0 10px 30px rgb(0 0 0 / 20%);
	--ui-menu-hover-bg: #007aff;
	--ui-menu-hover-text: #fff;
	--ui-field-border: #c9c9c9;
	--ui-field-radius: 6px;
	--ui-field-focus-ring: 0 0 0 3px rgb(0 122 255 / 30%);
	--ui-push-border: #c9c9c9;
	--ui-push-radius: 6px;
	--ui-push-shadow: 0 0.5px 1px rgb(0 0 0 / 15%);
	--ui-push-hover-bg: #f7f7f7;
	--ui-push-active-bg: #e8e8e8;
	--ui-primary-hover-bg: #0a6fe6;
	--ui-dialog-radius: 12px;
	--ui-dialog-header-bg: #f6f6f6;
	--ui-dialog-title-size: 13px;
	--ui-dialog-footer-bg: #fff;
	--ui-close-hover-bg: #ff5f57;
	--ui-close-hover-icon: #4d0000;
	--ui-pane-bg: #efeff1;
	--ui-source-text: #8a8a8e;
	--ui-item-radius: 6px;
	--ui-item-hover-bg: #ececec;
	--ui-item-selected-bg: #dcdcdc;
	--ui-thumb-radius: 6px;
	--ui-thumb-shadow: 0 1px 3px rgb(0 0 0 / 20%);
	--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='%234a9be3'/%3E%3Cpath d='M1 5h14v6.5c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%2379bcf3'/%3E%3C/svg%3E");
}

.theme-editor() {
	// Menu items: rounded highlight inside the menu
	&.jodit-popup .jodit-popup__content {
		padding: 4px;
	}
}

.theme-finder() {
	// Sidebar section titles: small grey caps
	.jodit-file-browser-tree__source-title,
	.jodit-ui-browser-source__name {
		font-size: 11px;
	}

	// Selected file: blue pill under the name
	.jodit-file-browser-files__item_active_true
		.jodit-file-browser-files__item-info
		> .jodit-file-browser-files__item-info-filename,
	.jodit-ui-browser-item_active_true .jodit-ui-browser-item__name {
		display: inline-block;
		max-width: 100%;
		box-sizing: border-box;
		padding: 0 6px;
		border-radius: 4px;
		background: #0063e1;
		color: #fff;
	}
}