Add new AdminThemeUikit CSS toggles for bolder repeater item headers, input focused states, and page list buttons

wire/modules/AdminTheme/AdminThemeUikit/AdminThemeUikit.module

@@ -50,6 +50,7 @@ class AdminThemeUikit extends AdminThemeFramework implements Module, Configurabl
 			'version' => 36,
 			'summary' => 'Uikit v3 admin theme',
 			'autoload' => 'template=admin', 
+			'icon' => 'smile-o', 
 		); 
 	}
 

wire/modules/AdminTheme/AdminThemeUikit/themes/default/config.php

@@ -42,15 +42,21 @@ $inputfields->add($f);
 $f = $inputfields->InputfieldCheckboxes;
 $f->attr('id+name', 'defaultToggles');
 $f->label = __('Toggles');
+$f->addOption('useBoldItemHeaders', __('Use bold headers for repeaters, files, images, etc.'));
+$f->addOption('usePageListButtons', __('Use buttons for page-list action links'));
+$f->addOption('useInputFocus', 
+	__('Highlight focused inputs') . ' ' . 
+	'[span.detail] ' . __('(additional clarity for currently focused input)') . ' [/span]'
+);
 $f->addOption('noUserMenu',
 	__('Disable light/dark/auto setting in user tools menu?') . ' ' .
-	'[span.detail] ' . __('(this prevents users from making their own dark/light mode selection)') . ' [/span]'
+	'[span.detail] ' . __('(prevents users from making their own dark/light mode selection)') . ' [/span]'
 );
 $togcbxAttr = [];
 if(!empty($settings['noTogcbx'])) $togcbxAttr = [ 'disabled' => 'disabled' ];
 $f->addOption('useTogcbx', 
 	__('Use toggle style checkboxes globally?') . ' ' .
-	'[span.detail] ' . __('(use toggle rather than marker style checkboxes)') . ' [/span]',
+	'[span.detail] ' . __('(use toggle rather than checkmark style checkboxes)') . ' [/span]',
 	$togcbxAttr
 );
 $f->addOption('use2Colors',

wire/modules/AdminTheme/AdminThemeUikit/themes/default/init.php

@@ -2,6 +2,7 @@
 
 /** @var AdminThemeUikit $adminTheme */
 /** @var WireInput $input */
+/** @var Modules $modules */
 /** @var Config $config */
 /** @var Page $page */
 /** @var User $user */
@@ -9,6 +10,8 @@
 $themeInfo = $adminTheme->getThemeInfo();
 $toggles = $adminTheme->defaultToggles;
 $settings = $config->AdminThemeUikit; 
+$themeUrl = $config->urls('AdminThemeUikit') . 'themes/default/';
+$cssToggles = [ 'useBoldItemHeaders', 'usePageListButtons', 'useInputFocus' ]; 
 
 $useDarkModeSwitcher = 
 	$user->isLoggedin() 
@@ -16,6 +19,14 @@ $useDarkModeSwitcher =
 	&& empty($settings['noDarkMode'])
 	&& $user->hasPermission('page-edit');
 
+foreach($cssToggles as $name) {
+	if(!in_array($name, $toggles)) continue;
+	$config->styles->add($themeUrl . "toggles/$name.css");
+}
+if($modules->isInstalled('InputfieldTable')) {
+	$config->styles->add($themeUrl . "toggles/InputfieldTable.css");
+}
+
 /**
  * Update TinyMCE to use our custom skin and content_css
  * 

wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/InputfieldTable.css

@@ -0,0 +1,17 @@
+/* make InputfieldTable <table> have same background color as its container */
+.Inputfield > .InputfieldContent .AdminDataTable tr {
+	background-color: transparent;
+}
+
+/* more specific to InputfieldTable, if needed
+.InputfieldTable .AdminDataTable tr {
+	background-color: transparent; 
+}
+*/
+
+.InputfieldTableRowSortHandle:hover,
+.InputfieldTableRowDeleteLink:hover,
+.InputfieldTableActionRow:hover {
+	/* make table action links highlight with main color when hovered */
+	color: var(--main-color);
+}

wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useBoldItemHeaders.css

@@ -0,0 +1,71 @@
+/*** AsmSelect, PageAutocomplete, PageListSelect, accordions ***************/
+
+.pw .Inputfields .InputfieldPageAutocomplete li,
+.pw .Inputfields .InputfieldPageAutocomplete li a,
+.pw .Inputfields .InputfieldPageListSelectMultiple ol li,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-default,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
+	/* make asmSelect/autocomplete/pageListSelect use the main-color */
+	--main-background: var(--main-color);
+	--border-color: var(--main-color);
+	--text-color: rgba(255,255,255,0.9);
+	background-color: var(--main-background);
+	margin-top: 0;
+	margin-bottom: 1px !important;
+}
+
+.pw .Inputfields .InputfieldPageAutocomplete li:hover,
+.pw .Inputfields .InputfieldPageAutocomplete li:hover a,
+.pw .Inputfields .InputfieldPageListSelectMultiple ol li:hover,
+.pw .Inputfields .InputfieldAsmSelect .asmListItem.ui-state-hover {
+	/* highlight hovered items */
+	filter: brightness(1.05);
+	filter: brightness(0.95);
+	border-color: var(--main-color);
+}
+
+.pw .ui-accordion-header {
+	/* accordion items like the debug mode tools */
+	--inputs-background: var(--main-color);
+	--blocks-background: var(--main-color);
+	--text-color: #fff;
+	border: 0;
+	margin-top: 3px !important;
+}
+
+.pw .ui-accordion-header:hover,
+.pw .ui-accordion-header.ui-state-hover {
+	--inputs-background: var(--main-color);
+	--main-background: var(--main-color);
+	filter: brightness(1.05);
+}
+.ui-accordion.ui-widget .ui-accordion-content {
+	padding: 20px;
+}
+
+.asmListItemStatus .columnWidth {
+	/* percent width indicator in AsmSelect field lists */
+	color: rgba(255,255,255,0.65);
+}
+
+/*** Repeaters *********************************************************/
+
+.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem > .InputfieldHeader,
+.pw .InputfieldFileList > li > .InputfieldItemHeader {
+	/* make InputfieldRepeater item headers use the main color */
+	--inputs-background: var(--main-color);
+	--border-color: var(--main-color);
+	--text-color: rgba(255,255,255,0.9);
+	--muted-color: rgba(255,255,255,0.8);
+}
+
+.InputfieldRepeaterItem > .InputfieldHeader:hover {
+	/* make hovered repeater header slightly highlighted */
+	filter: brightness(1.05);
+}
+
+.pw .Inputfields .InputfieldRepeater .InputfieldContent .InputfieldRepeaterItem {
+	/* large margin not needed when using bolder headers */
+	margin-bottom: 2px;
+}

wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/useInputFocus.css

@@ -0,0 +1,36 @@
+.Inputfields input:focus:not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]):not(.uk-form-blank),
+.Inputfields textarea:focus,
+.pw .Inputfields .Inputfield select.uk-select:focus,
+select.uk-select:focus {
+	/* have inputs show a focused state */
+	/*border-color: var(--muted-color) !important;*/
+	background-color: var(--blocks-background) !important;
+}
+
+.InputfieldForm .Inputfields .Inputfield select.uk-select {
+	/* make <select> elements have same background color as text inputs */
+	background-color: var(--inputs-background);
+}
+
+/*** TinyMCE ***/
+.InputfieldTinyMCE .tox-edit-area {
+	background: var(--inputs-background);
+}
+.InputfieldTinyMCE .mce-edit-focus,
+.InputfieldTinyMCEFocused .tox-edit-area__iframe {
+	--inputs-background: var(--blocks-background);
+	background: var(--blocks-background);
+	
+}
+.InputfieldTinyMCEFocused .tox .tox-toolbar,
+.InputfieldTinyMCEFocused .tox .tox-menubar,
+.InputfieldTinyMCEFocused .tox .tox-statusbar,
+.InputfieldTinyMCEFocused .tox .tox-toolbar__overflow,
+.InputfieldTinyMCEFocused .tox .tox-toolbar__primary {
+	--blocks-background: var(--inputs-background);
+}
+
+.pw .InputfieldTinyMCEFocused .tox .tox-menubar .tox-mbtn:hover,
+.pw .InputfieldTinyMCEFocused .tox .tox-tbtn:hover {
+	background: light-dark(white, black);
+}

wire/modules/AdminTheme/AdminThemeUikit/themes/default/toggles/usePageListButtons.css

@@ -0,0 +1,38 @@
+.PageList .PageListItem .PageListActions > li > a {
+	/* make PageList items use action links that look like buttons */
+	display: inline-block;
+	line-height: 1.3;
+	background-color: var(--main-color);
+	color: #fff;
+	padding: 2px 6px;
+	font-weight: bold;
+	text-transform: lowercase;
+	position: relative;
+	top: -1px;
+}
+
+.PageList .PageListItem .PageListActions > li > a:hover {
+	/* highlight selected action when hovered */
+	filter: brightness(1.08);
+}
+
+.PageList .PageListItem:hover {
+	/* adjust width to actions */
+	/*
+	display: inline-block;
+	width: auto;
+	 */
+}
+
+#pw-content-body .PageList ul.uk-pagination > li.uk-active > a {
+	/* update active pagination to use main color */
+	--blocks-background: #fff;
+	--text-color: var(--main-color);
+}
+
+.PageList .PageListItem:not(:hover) .PageListActions.actions {
+	display: none !important;
+}
+.PageList .PageListItem:hover .PageListActions.actions {
+	display: inline-block;
+}