YALB-1164 - OPAC: Update admin toolbar icons | 1461 - OPAC: Implement new admin colors and fonts

web/profiles/custom/yalesites_profile/modules/custom/ys_toolbar/css/ys_toolbar.theme.css

@@ -4,6 +4,10 @@
   mask-image: url('../images/yale-university-press-1985-2010.svg') !important;
 }
 
+.gin--horizontal-toolbar #toolbar-administration .toolbar-icon-admin-toolbar-tools-help::before {
+  width: 28px !important;
+}
+
 /* Set z-index on toolbar-icon element so that the  ::after element renders
 behind the a.toolbar-icon element. */
 .toolbar-menu-administration > .toolbar-menu > .menu-item > .toolbar-icon {
@@ -16,3 +20,183 @@ behind the a.toolbar-icon element. */
   > .toolbar-icon::after {
     z-index: -1;
 }
+
+
+/* Update toolbar icons */
+
+/* Manage Settings */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-icon.manage-settings::before {
+  -webkit-mask-image: url('../images/manage_settings.svg');
+  mask-image: url('../images/manage_settings.svg');
+}
+
+/* Edit layout and content Icon */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-icon.edit-layout-and-content::before {
+  -webkit-mask-image: url('../images/edit_layout_content.svg');
+  mask-image: url('../images/edit_layout_content.svg');
+}
+
+/* Unpublish */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-icon.unpublish::before {
+  -webkit-mask-image: url('../images/unpublish.svg');
+  mask-image: url('../images/unpublish.svg');
+  background: #f9d4d4 !important;
+}
+
+
+/* Publish */
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-icon.publish::before {
+  -webkit-mask-image: url('../images/publish.svg');
+  mask-image: url('../images/publish.svg');
+  background: #d6f9d4 !important;
+}
+
+/* Local tasks - more actions */
+.toolbar .toolbar-bar .toolbar-id--toolbar-icon-local-tasks .toolbar-icon-local-tasks::before {
+  -webkit-mask-image: url('../images/more_actions.svg');
+  mask-image: url('../images/more_actions.svg');
+}
+
+/* Color Overrides */
+.toolbar-horizontal .toolbar-tray a, 
+.toolbar-horizontal .toolbar-tray span {
+  color: var(--dark-primary-link) !important;
+}
+
+.toolbar-horizontal .local-tasks-toolbar-tab .toolbar-tray .toolbar-lining a {
+  color: var(--dark-primary-link) !important;
+}
+
+.toolbar-horizontal .toolbar-secondary .toolbar-tray[data-toolbar-tray="toolbar-item-user-tray"] .toolbar-lining .toolbar-menu a {
+  color: var(--dark-primary-link) !important;
+}
+
+
+.toolbar .toolbar-bar #toolbar-item-administration-search::before, 
+.toolbar .toolbar-bar .toolbar-menu-administration .toolbar-icon::before, 
+.toolbar .toolbar-bar .toolbar-menu-administration .responsive-preview-icon::before, 
+.toolbar .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item::before, 
+.toolbar .toolbar-bar .toolbar-icon-toggle-vertical::before, 
+.toolbar .toolbar-bar .toolbar-icon-toggle-horizontal::before,
+.toolbar.toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon::before {
+  background: var(--dark-gin-icon-color) !important;
+}
+
+
+.toolbar .toolbar-icon.toolbar-handle.menu-item--active-trail::before, 
+.toolbar .toolbar-handle.menu-item--active-trail.responsive-preview-icon::before, 
+.toolbar .toolbar-icon.toolbar-handle:hover::before, 
+.toolbar .toolbar-handle.responsive-preview-icon:hover::before, 
+.toolbar .toolbar-icon.toolbar-handle:focus::before, 
+.toolbar .toolbar-handle.responsive-preview-icon:focus::before, 
+.toolbar .toolbar-icon.toolbar-handle:focus-within::before, 
+.toolbar .toolbar-handle.responsive-preview-icon:focus-within::before, 
+.toolbar .toolbar-icon.toolbar-handle.open.menu-item--active-trail::before, 
+.toolbar .toolbar-icon.toolbar-handle.open:hover::before, 
+.toolbar .toolbar-icon.toolbar-handle.open:focus::before, 
+.toolbar .toolbar-icon.toolbar-handle.open:focus-within::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.menu-item--active-trail::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:hover::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:focus::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:focus-within::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open.menu-item--active-trail::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:hover::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:focus::before, 
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:focus-within::before, 
+.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded.menu-item--active-trail::before, 
+.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded:hover::before, 
+.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded:focus::before, 
+.toolbar-tray-horizontal ul li.menu-item--expanded ul li.menu-item--expanded:focus-within::before {
+  background-color: var(--wool);
+  z-index: 1;
+}
+
+.toolbar-horizontal .view-header {
+  color: var(--dark-theme-gray-text-light);
+}
+
+.gin-breadcrumb__item:first-of-type .gin-breadcrumb__link:hover::before {
+  background-color: var(--dark-primary-link-hover) !important;
+}
+
+.gin-breadcrumb__link:hover {
+  text-decoration: underline;
+}
+
+.gin-breadcrumb__link:hover, 
+.gin-breadcrumb__link:hover em {
+  color: var(--dark-primary-link-hover) !important;
+}
+
+.gin-breadcrumb__item:first-of-type .gin-breadcrumb__link:hover::before {
+  background-color: var(--dark-primary-link-hover) !important;
+}
+
+
+.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover > .toolbar-item, 
+.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus-within > .toolbar-item,
+.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:hover, 
+.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-item:focus {
+  color: var(--dark-primary-link-hover) !important;
+}
+
+
+.media-library-wrapper .views-display-link {
+  color: var(--wool) !important;
+}
+
+.media-library-wrapper .views-display-link::before {
+  background-color: var(--wool) !important;
+}
+
+
+.media-library-wrapper .views-display-link.is-active {
+  color: var(--robin-egg) !important;
+}
+
+.media-library-wrapper .views-display-link.is-active::before {
+  background-color: var(--robin-egg) !important;
+}
+
+.media-library-item--table {
+  background: var(--dark-theme-gray-lightest) !important;
+}
+
+.media-library-views-form thead th {
+  background: var(--dark-theme-gray-selected) !important;
+}
+
+
+/* mobile toolbar */
+#gin-toolbar-bar,
+.toolbar .toolbar-bar .toolbar-tab>.toolbar-icon.toolbar-icon-edit.toolbar-item,
+.toolbar .toolbar-bar .toolbar-tab>.toolbar-icon-edit.toolbar-item.responsive-preview-icon,
+.toolbar .toolbar-bar .toolbar-tab>.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active,
+.toolbar .toolbar-bar .toolbar-tab>.toolbar-icon.toolbar-icon-edit.toolbar-item:focus {
+  color: var(--wool) !important;
+  background: var(--dark-theme-gray) !important;
+}
+
+.toolbar .toolbar-tray-vertical .level-2 .toolbar-menu {
+  color: var(--wool) !important;
+  background: var(--darkest-gray) !important;
+}
+
+.toolbar-tray a,
+.toolbar-tray span,
+.toolbar .toolbar-menu .toolbar-menu a,
+.toolbar .toolbar-menu .toolbar-menu span,
+.toolbar .toolbar-tray-vertical .toolbar-menu a:visited,
+.toolbar .toolbar-tray-vertical .toolbar-menu a:hover,
+.toolbar .toolbar-tray-vertical .toolbar-menu a:focus,
+.toolbar .toolbar-tray-vertical .toolbar-menu span:visited,
+.toolbar .toolbar-tray-vertical .toolbar-menu span:hover,
+.toolbar .toolbar-tray-vertical .toolbar-menu span:focus {
+  color: var(--wool) !important;
+}
+
+.toolbar-tray-horizontal a:focus,
+.toolbar-box a:focus,
+.toolbar .toolbar-icon.toolbar-handle:focus {
+  background: var(--darkest-gray) !important;
+}

web/profiles/custom/yalesites_profile/modules/custom/ys_toolbar/src/ToolbarItemsService.php

@@ -261,6 +261,7 @@ protected function buildButton(string $route, string $label): array {
           'class' => [
             'toolbar-icon',
             'toolbar-icon-edit',
+            strtolower(str_replace(' ', '-', $label)),
           ],
         ],
         '#cache' => [