From 9c167359078b0b85bf4ddf20add9fa0399079493 Mon Sep 17 00:00:00 2001 From: Marc Berger Date: Thu, 13 Jul 2023 11:32:34 -0700 Subject: [PATCH 01/28] feat(YALB-898): Add favicons --- templates/layout/html.html.twig | 58 +++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 templates/layout/html.html.twig diff --git a/templates/layout/html.html.twig b/templates/layout/html.html.twig new file mode 100644 index 000000000..5c546c6bf --- /dev/null +++ b/templates/layout/html.html.twig @@ -0,0 +1,58 @@ +{# +/** + * @file + * Theme override for the basic structure of a single Drupal page. + * + * Variables: + * - logged_in: A flag indicating if user is logged in. + * - root_path: The root path of the current page (e.g., node, admin, user). + * - node_type: The content type for the current node, if the page is a node. + * - head_title: List of text elements that make up the head_title variable. + * May contain one or more of the following: + * - title: The title of the page. + * - name: The name of the site. + * - slogan: The slogan of the site. + * - page_top: Initial rendered markup. This should be printed before 'page'. + * - page: The rendered page markup. + * - page_bottom: Closing rendered markup. This variable should be printed after + * 'page'. + * - db_offline: A flag indicating if the database is offline. + * - placeholder_token: The token for generating head, css, js and js-bottom + * placeholders. + * + * @see template_preprocess_html() + */ +#} + + + + + {{ head_title|safe_join(' | ') }} + + + + + + + + + + + + + + + + {# + Keyboard navigation/accessibility link to main content section in + page.html.twig. + #} + + {{ page_top }} + {{ page }} + {{ page_bottom }} + + + From 0c2e9c548c3b2e31ea90afa97b806b4108a0daab Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 18 Jul 2023 09:59:05 -0500 Subject: [PATCH 02/28] fix(yalb-1407): move quote p element flex/margin fix to atomic as it's a drupal thing --- css/layout-builder.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/css/layout-builder.css b/css/layout-builder.css index 6e76dfdb0..89df0b0e3 100644 --- a/css/layout-builder.css +++ b/css/layout-builder.css @@ -57,3 +57,19 @@ need to have margin-bottom set to 0 */ .main-content .layout.layout--onecol:last-child { margin-bottom: 0; } + +/* +// Pull quotes has a

element provided by the WYSIWYG +// we need to make the `-` character and the attribution text in line, +// and remove margin from the

+display: flex; +*/ + +.pull-quote__attribution { + display: flex; +} + +.pull-quote__attribution p { + margin-top: 0; + margin-bottom: 0; +} From 05afc6e5d694d4d4fc8f989083a99fb62fa481b6 Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Tue, 18 Jul 2023 16:17:28 -0400 Subject: [PATCH 03/28] fix(YALB-1394): fix header level for accordion items The original implementation disregarded the accordion_items in the component library and rendered them in atomic. This was causing a missing h2 level when no accordion title was present. To fix this, we preprocess the paragraph__accordion_item to inject a new attribute that will hold the heading_level that should be used, defaulting to 3. --- atomic.theme | 26 ++++++++++++++++--- .../paragraph--accordion-item.html.twig | 2 +- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/atomic.theme b/atomic.theme index 414774821..c13072363 100644 --- a/atomic.theme +++ b/atomic.theme @@ -8,14 +8,16 @@ /** * Implements hook_preprocess_region(). */ -function atomic_preprocess_region(&$variables) { +function atomic_preprocess_region(&$variables) +{ $variables['site_name'] = \Drupal::config('system.site')->get('name'); } /** * Implements hook_preprocess_menu(). */ -function atomic_preprocess_menu(&$variables, $hook) { +function atomic_preprocess_menu(&$variables, $hook) +{ $current_path = \Drupal::request()->getRequestUri(); $items = $variables['items']; foreach ($items as $key => $item) { @@ -45,7 +47,8 @@ function atomic_preprocess_menu(&$variables, $hook) { /** * Implements hook_theme_suggestions_hook_alter() for containers. */ -function atomic_theme_suggestions_container_alter(array &$suggestions, array &$variables) { +function atomic_theme_suggestions_container_alter(array &$suggestions, array &$variables) +{ $type = ''; $name = ''; @@ -71,9 +74,24 @@ function atomic_theme_suggestions_container_alter(array &$suggestions, array &$v /** * Implements hook_preprocess_node(). */ -function atomic_preprocess_node(&$variables) { +function atomic_preprocess_node(&$variables) +{ if ($variables['node']->getType() == 'post') { $date = strtotime($variables['node']->field_publish_date->first()->getValue()['value']); $variables['date_formatted'] = \Drupal::service('date.formatter')->format($date, '', 'c'); } } + +/** + * Implements hook_preprocess_paragraph__accordion_item(). + * Inject the heading_level based on the parent's heading presence. + */ +function atomic_preprocess_paragraph__accordion_item(&$variables) +{ + $accordion = $variables['paragraph']->getParentEntity(); + + if ($accordion->hasField('field_heading')) { + $heading = $accordion->field_heading->value; + $variables['attributes']['heading_level'] = empty($heading) ? 2 : 3; + } +} diff --git a/templates/paragraphs/paragraph--accordion-item.html.twig b/templates/paragraphs/paragraph--accordion-item.html.twig index 2099c3152..8e8ee7b15 100644 --- a/templates/paragraphs/paragraph--accordion-item.html.twig +++ b/templates/paragraphs/paragraph--accordion-item.html.twig @@ -1,5 +1,5 @@ {% include "@molecules/accordion/_yds-accordion-item.twig" with { accordion__item__heading: content.field_heading, accordion__item__content: content.field_content, - accordion__item__heading__level: 3 + accordion__item__heading__level: attributes.heading_level|default(3), } %} From 0b1e33752b7ccb6cdab8dd8d393ad8147fdd7b9c Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Tue, 18 Jul 2023 16:26:40 -0400 Subject: [PATCH 04/28] chore(YALB-1394): fix linting/formatting --- atomic.theme | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/atomic.theme b/atomic.theme index c13072363..4f2da9712 100644 --- a/atomic.theme +++ b/atomic.theme @@ -8,16 +8,14 @@ /** * Implements hook_preprocess_region(). */ -function atomic_preprocess_region(&$variables) -{ +function atomic_preprocess_region(&$variables) { $variables['site_name'] = \Drupal::config('system.site')->get('name'); } /** * Implements hook_preprocess_menu(). */ -function atomic_preprocess_menu(&$variables, $hook) -{ +function atomic_preprocess_menu(&$variables, $hook) { $current_path = \Drupal::request()->getRequestUri(); $items = $variables['items']; foreach ($items as $key => $item) { @@ -47,8 +45,7 @@ function atomic_preprocess_menu(&$variables, $hook) /** * Implements hook_theme_suggestions_hook_alter() for containers. */ -function atomic_theme_suggestions_container_alter(array &$suggestions, array &$variables) -{ +function atomic_theme_suggestions_container_alter(array &$suggestions, array &$variables) { $type = ''; $name = ''; @@ -74,8 +71,7 @@ function atomic_theme_suggestions_container_alter(array &$suggestions, array &$v /** * Implements hook_preprocess_node(). */ -function atomic_preprocess_node(&$variables) -{ +function atomic_preprocess_node(&$variables) { if ($variables['node']->getType() == 'post') { $date = strtotime($variables['node']->field_publish_date->first()->getValue()['value']); $variables['date_formatted'] = \Drupal::service('date.formatter')->format($date, '', 'c'); @@ -84,10 +80,10 @@ function atomic_preprocess_node(&$variables) /** * Implements hook_preprocess_paragraph__accordion_item(). + * * Inject the heading_level based on the parent's heading presence. */ -function atomic_preprocess_paragraph__accordion_item(&$variables) -{ +function atomic_preprocess_paragraph__accordion_item(&$variables) { $accordion = $variables['paragraph']->getParentEntity(); if ($accordion->hasField('field_heading')) { From 6e50b789eea2ac78fddce38bac8d0f65d0b9193a Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 18 Jul 2023 17:40:34 -0500 Subject: [PATCH 05/28] fix(yalb-1461): wip admin color changes --- css/admin-theme.css | 46 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index c672e22df..b4dd24cdb 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -7,6 +7,20 @@ --wool: #fbfbf6; --light-gray: #d4d4d4; --darkest-gray: #1f1f1f; + --dark-theme-gray:#4E5959; + --dark-theme-gray-light:#677979; + --dark-theme-gray-hover: #353d3d; + --dark-primary-link: var(--wool); + --dark-primary-link-hover: #ffffff; + --dark-theme-gray-text-light:var(--wool); + --dark-theme-gray-text-dark:var(--dark-theme-gray); + --custom-button-color: var(--robin-egg); + --custom-button-color-hover: var(--peacock-green); + --custom-button-color-text: var(--peacock-green); + + --dark-gin-icon-color: var(--wool); + --gin-color-text-light: var(--wool); + --gin-font: "DM Mono", monospace; --gin-font-size-h1: 1.75rem; --gin-font-size-h2: 1.5rem; @@ -20,19 +34,28 @@ --gin-bg-warning: #605328; --gin-color-danger-light: #f39b9d; --gin-bg-danger: #583333; + --gin-bg-item-hover: var(--dark-theme-gray-hover); } :root [data-gin-accent=light_blue] { --gin-color-primary-rgb: 55, 108, 116; --gin-color-primary-active: var(--peacock-green); --gin-color-secondary: var(--mediterranean-blue); - --gin-color-primary-hover: var(--peacock-green); - --gin-color-primary-light: var(--robin-egg); + --gin-color-text-light: var(--wool); + --gin-icon-color: var(--dark-gin-icon-color); + --gin-bg-item-hover: var(--dark-theme-gray-hover); + --gin-color-primary-hover: var(--dark-primary-link-hover); + --gin-color-primary-light: var(--gin-bg-item-hover) !important; --gin-border-color-layer: var(--light-gray); - --gin-bg-layer: var(--wool); + --gin-bg-layer: var(--dark-theme-gray); --gin-dark-gray: var(--darkest-gray); --colorGinText: var(--darkest-gray); --gin-border-color-table-header: var(--darkest-gray); + --gin-bg-layer3: var(--dark-theme-gray-hover); + --gin-color-title: var(--dark-theme-gray-text); + --gin-color-dark-text: var(--wool); + --gin-color-title: var(--dark-theme-gray-text-light); + --gin-color-title-dark: var(--dark-theme-gray-text-dark); } [data-gin-accent=light_blue] { @@ -111,6 +134,23 @@ top: calc(var(--gin-toolbar-secondary-height) - 7px) !important; } +.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; +} + body.gin--horizontal-toolbar { padding-top: calc(var(--gin-toolbar-y-offset) + var(--gin-toolbar-secondary-height)) !important; } From ed020f9249537b3b21ae08494ce37d100882a3c8 Mon Sep 17 00:00:00 2001 From: Marc Berger Date: Tue, 18 Jul 2023 15:44:02 -0700 Subject: [PATCH 06/28] fix(YALB-1394): Check to see if we have a parent entity - fix error new layout builder --- atomic.theme | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/atomic.theme b/atomic.theme index 4f2da9712..0d6632237 100644 --- a/atomic.theme +++ b/atomic.theme @@ -84,10 +84,10 @@ function atomic_preprocess_node(&$variables) { * Inject the heading_level based on the parent's heading presence. */ function atomic_preprocess_paragraph__accordion_item(&$variables) { - $accordion = $variables['paragraph']->getParentEntity(); - - if ($accordion->hasField('field_heading')) { - $heading = $accordion->field_heading->value; - $variables['attributes']['heading_level'] = empty($heading) ? 2 : 3; + if ($accordion = $variables['paragraph']->getParentEntity()) { + if ($accordion->hasField('field_heading')) { + $heading = $accordion->field_heading->value; + $variables['attributes']['heading_level'] = empty($heading) ? 2 : 3; + } } } From 00d0001d002f04038a78cc5ae39169992a3f0320 Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Wed, 19 Jul 2023 11:23:02 -0400 Subject: [PATCH 07/28] fix(YALB-1394): pass correct field_heading element The video element was passing content.field_heading to the video__heading variable. This was causing evaluations of whether the video__heading was empty to result in false due to it being an array I beleive. Changing this to always attempt to pass the 0th element now causes it to function as expected. --- .../block/layout-builder/block--inline-block--video.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/block/layout-builder/block--inline-block--video.html.twig b/templates/block/layout-builder/block--inline-block--video.html.twig index b6f30adf0..d98f8aa2a 100644 --- a/templates/block/layout-builder/block--inline-block--video.html.twig +++ b/templates/block/layout-builder/block--inline-block--video.html.twig @@ -11,7 +11,7 @@ {% endif %} {% embed "@molecules/video/yds-video.twig" with { - video__heading: content.field_heading, + video__heading: content.field_heading.0, video__text: content.field_text, video__width: video__width|default('site'), video__alignment: video__alignment|default('left'), From ddc5ea184430fd86d6ca39c4dc96f58ad327c14f Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Wed, 19 Jul 2023 11:27:21 -0400 Subject: [PATCH 08/28] fix(YALB-1394): pass correct media_grid__heading The full field_heading was being passed to the media_grid__heading, causing it to result in a false positive when checking for empty values since it is an array of values. Passing the 0th element allows the media grid to function as intended. --- .../layout-builder/block--inline-block--media-grid.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/block/layout-builder/block--inline-block--media-grid.html.twig b/templates/block/layout-builder/block--inline-block--media-grid.html.twig index c1c70afcd..dff8abccc 100644 --- a/templates/block/layout-builder/block--inline-block--media-grid.html.twig +++ b/templates/block/layout-builder/block--inline-block--media-grid.html.twig @@ -8,7 +8,7 @@ {% endif %} {% embed "@organisms/galleries/media-grid/yds-media-grid.twig" with { - media_grid__heading: content.field_heading, + media_grid__heading: content.field_heading.0, media_grid__width: media_grid__width, } %} From 6c2997f6eac9b5fa3d220a2fa09deb4e0118a009 Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Wed, 19 Jul 2023 11:36:16 -0400 Subject: [PATCH 09/28] fix(YALB-1394): pass correct media_grid__heading The field_heading array was being passed into the grid, resulting in false positives when evaluating whether it is empty or not. Passing the 0th element now allows the gallery to work as intended. Note: This is only for the overall header. --- .../block/layout-builder/block--inline-block--gallery.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/block/layout-builder/block--inline-block--gallery.html.twig b/templates/block/layout-builder/block--inline-block--gallery.html.twig index 8257307bc..625911026 100644 --- a/templates/block/layout-builder/block--inline-block--gallery.html.twig +++ b/templates/block/layout-builder/block--inline-block--gallery.html.twig @@ -11,7 +11,7 @@ {% endif %} {% embed "@organisms/galleries/media-grid/yds-media-grid.twig" with { - media_grid__heading: content.field_heading, + media_grid__heading: content.field_heading.0, media_grid__variation: 'interactive', media_grid__width: media_grid__width, } %} From bd0e5d9a7a58900ce5eb43dc998779b6f53c94dd Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Wed, 19 Jul 2023 11:37:41 -0400 Subject: [PATCH 10/28] fix(YALB-1394): pass corrrect modal_item__heading The modal_item__heading was receiving the array of content.field_heading, resulting in false positives when checking if the head was empty. Changing this to pass the 0th element allows the modal content to function as intended. --- .../paragraph--gallery-item--gallery-modal-content.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/paragraphs/paragraph--gallery-item--gallery-modal-content.html.twig b/templates/paragraphs/paragraph--gallery-item--gallery-modal-content.html.twig index ad546d3bc..f45bde6be 100644 --- a/templates/paragraphs/paragraph--gallery-item--gallery-modal-content.html.twig +++ b/templates/paragraphs/paragraph--gallery-item--gallery-modal-content.html.twig @@ -1,4 +1,4 @@ {% include "@organisms/galleries/media-grid/_yds-media-grid-modal-item--content.twig" with { - modal_item__heading: content.field_heading, + modal_item__heading: content.field_heading.0, modal_item__content: content.field_text, } %} From 677acf16c0b05c39f8c2ba6ab1d822a4b8bc2c65 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 19 Jul 2023 15:46:16 -0500 Subject: [PATCH 11/28] fix(yalb-1461): wip admin color changes, update toolbar --- css/admin-theme.css | 158 ++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 144 insertions(+), 14 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index b4dd24cdb..c0274826a 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -8,16 +8,20 @@ --light-gray: #d4d4d4; --darkest-gray: #1f1f1f; --dark-theme-gray:#4E5959; - --dark-theme-gray-light:#677979; + --dark-theme-gray-selected:#edfbfb; + --dark-theme-gray-lightest:#d0e0e0; + --dark-theme-gray-lightest-rgb: 208, 224, 224; + --dark-theme-gray-light:#606A6A; --dark-theme-gray-hover: #353d3d; --dark-primary-link: var(--wool); --dark-primary-link-hover: #ffffff; --dark-theme-gray-text-light:var(--wool); --dark-theme-gray-text-dark:var(--dark-theme-gray); --custom-button-color: var(--robin-egg); - --custom-button-color-hover: var(--peacock-green); - --custom-button-color-text: var(--peacock-green); - + --custom-button-color-hover: var(--wool); + --custom-button-color-text: var(--dark-theme-gray-hover); + --custom-button-color-text-hover: var(--dark-theme-gray-hover); + --dark-gin-icon-color: var(--wool); --gin-color-text-light: var(--wool); @@ -38,8 +42,8 @@ } :root [data-gin-accent=light_blue] { - --gin-color-primary-rgb: 55, 108, 116; - --gin-color-primary-active: var(--peacock-green); + --gin-color-primary-rgb: 217, 241, 243; + --gin-color-primary-active: var(--wool); --gin-color-secondary: var(--mediterranean-blue); --gin-color-text-light: var(--wool); --gin-icon-color: var(--dark-gin-icon-color); @@ -54,8 +58,11 @@ --gin-bg-layer3: var(--dark-theme-gray-hover); --gin-color-title: var(--dark-theme-gray-text); --gin-color-dark-text: var(--wool); - --gin-color-title: var(--dark-theme-gray-text-light); + --gin-color-title: var(--dark-theme-gray); + --gin-color-title-light: var(--dark-theme-gray-text-light); --gin-color-title-dark: var(--dark-theme-gray-text-dark); + --gin-color-button-text: var(--dark-theme-gray); + --gin-color-button-text-hover: var(--dark-theme-gray-hover); } [data-gin-accent=light_blue] { @@ -70,12 +77,23 @@ } + + + /* Off-canvas overrides */ #drupal-off-canvas { background-color: var(--wool); color: var(--darkest-gray); } +.ui-dialog-content, +.ui-dialog-off-canvas .ui-dialog-titlebar { + background: var(--wool) !important; +} +#layout-builder-modal { + background: var(--wool) !important; +} + .ui-dialog-off-canvas #drupal-off-canvas { padding-inline: var(--size-spacing-5) var(--size-spacing-8); } @@ -85,10 +103,64 @@ color: var(--darkest-gray); } +.ui-widget-content a { + color: var(--dark-theme-gray) !important; +} + + +.ui-menu-item-wrapper:hover { + background-color: var(--dark-theme-gray-lightest); +} + .ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { display: flex; align-items: center; - border-color: var(--peacock-green); + border-color: var(--dark-theme-gray); +} + +.ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { + background-color: var(--dark-theme-gray-hover) !important; +} + +.glb-claro-details[open] > .glb-claro-details__summary { + color: var(--gin-color-primary) !important; + background-color: var(--dark-theme-gray-hover) !important; +} + +.glb-claro-details[open] > .glb-claro-details__summary::before { + background: var(--gin-color-primary) !important; +} + +.glb-claro-details__summary:hover::before { + background: var(--gin-color-primary) !important; +} + +.glb-form-item__description, .glb-fieldset__description { + color: var(--dark-theme-gray) !important; +} + +.glb-form-wrapper .cke .cke_top, +.glb-form-wrapper .cke .cke_bottom { + background: var(--dark-theme-gray-lightest) !important; +} + +.glb-form-wrapper .cke a.cke_path_item, +.glb-form-wrapper .cke span.cke_path_empty { + color: var(--dark-theme-gray) !important; +} + +.glb-form-wrapper .cke a.cke_button_off:hover, +.glb-form-wrapper .cke a.cke_button_off:focus, +.glb-form-wrapper .cke a.cke_button_off:active { + background: var(--wool) !important; +} + +:not(.glb-form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .glb-form-type--checkbox label { + color: var(--wool) !important; +} + +[dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:last-child .toolbar-tray { + border-radius: 0 0 var(--gin-border-l) var(--gin-border-l); } .ui-dialog.ui-dialog-off-canvas .ui-dialog-title, @@ -102,8 +174,17 @@ #drupal-off-canvas input[type="submit"].button { box-sizing: border-box; padding: var(--size-spacing-5); + background-color: var(--custom-button-color) !important; + color: var(--custom-button-color-text) !important; } +.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"]:hover, +.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"]:focus { + background-color: var(--dark-theme-gray-hover) !important; + color: var(--wool) !important; +} + + /* Modal */ .ui-widget-overlay { background: var(--gin-color-primary) !important; @@ -160,7 +241,7 @@ body.gin--horizontal-toolbar { } [data-gin-accent=light_blue] .ui-dialog-titlebar { - background: var(--mediterranean-blue) !important; + background: var(--dark-theme-gray) !important; } .toolbar-menu-administration @@ -210,7 +291,7 @@ body.gin--horizontal-toolbar { .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus .trigger::before { - background-color: var(--gin-color-primary) !important; + background-color: var(--wool) !important; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover @@ -219,7 +300,7 @@ body.gin--horizontal-toolbar { } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger { - color: var(--gin-color-primary) !important; + color: var(--wool) !important; } .is-horizontal .tabs__link:hover, @@ -257,8 +338,9 @@ body.gin--horizontal-toolbar { a:active, table tr:hover, table .draggable-table.tabledrag-disabled tr:hover { - --gin-color-button-text: var(--gin-color-primary); + --gin-color-button-text: var(--dark-primary-link); color: var(--wool); + background: var(--dark-theme-gray); } #block-atomic-local-tasks ul:not(.contextual-links) { @@ -302,8 +384,23 @@ table .draggable-table.tabledrag-disabled tr:hover { .form-actions .layout-builder__link--add, .glb-action-link--icon-trash.glb-action-link { border-radius: 2.5rem !important; + border: 2px solid transparent !important; } +.glb-button:hover, +.inline-block-create-button:hover, +.layout-builder__link--add:hover, +.glb-button:not(:focus):hover, +.inline-block-create-button:not(:focus):hover, +.layout-builder__link--add:not(:focus):hover, +.form-actions .glb-button:hover, +.form-actions .inline-block-create-button:hover, +.form-actions .layout-builder__link--add:hover, +.glb-action-link--icon-trash.glb-action-link:hover { + border-color: var(--dark-theme-gray-hover) !important; +} + + .glb-button:not(:focus) { filter: none !important; box-shadow: none !important; @@ -313,6 +410,15 @@ table .draggable-table.tabledrag-disabled tr:hover { box-shadow: 0 0 0 3px #d4d4d4 !important; } +.glb-table .tabledrag-handle::after { + background-color: var(--dark-theme-gray); +} + +.glb-table tr:hover, +.glb-table .draggable-table.tabledrag-disabled tr:hover { + background: var(--dark-theme-gray-lightest); +} + .meta-sidebar__trigger, .meta-sidebar__close { background-color: var(--gin-color-primary-light); @@ -331,11 +437,16 @@ table .draggable-table.tabledrag-disabled tr:hover { } .layout-builder__link--configure { - --gin-border-color-form-element: var(--darkest-gray); + color: var(--dark-theme-gray); } + .layout-builder__link--add-section-to-library, .layout-builder__link--remove { - --gin-border-color-form-element: var(--darkest-gray); + background-color: var(--dark-theme-gray-hover); +} + +.layout-builder__section:not(.gin-lb--disable-section-focus):hover::after { + border: 0.25rem solid var(--dark-theme-gray-hover) !important; } #media-library-messages .messages { @@ -352,6 +463,25 @@ table .draggable-table.tabledrag-disabled tr:hover { background-color: var(--gin-bg-warning); } +.layout-builder__section { + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; + background-color: var(--wool); +} + +.layout-builder__section:hover .layout-builder__link--add-section-to-library { + background-color: var(--dark-theme-gray-hover) !important; +} + +.layout-builder__section:hover .layout-builder__link--remove { + background-color: var(--dark-theme-gray-hover) !important; +} + +.layout-builder__section:hover .layout-builder__link--configure { + background-color: var(--dark-theme-gray-hover) !important; + color: var(--gin-color-primary) !important; +} + /* yalb-1261 - fix hover color on table */ .layout-builder-components-table__block-label:hover { From b610924dfc8092590479fa6aeabea4f2868e3721 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Wed, 19 Jul 2023 17:28:58 -0500 Subject: [PATCH 12/28] fix(yalb-1461): fix button-link component width on post/event content --- .../layout-builder/block--inline-block--button-link.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/block/layout-builder/block--inline-block--button-link.html.twig b/templates/block/layout-builder/block--inline-block--button-link.html.twig index f9b978abb..b61e160c2 100644 --- a/templates/block/layout-builder/block--inline-block--button-link.html.twig +++ b/templates/block/layout-builder/block--inline-block--button-link.html.twig @@ -11,7 +11,7 @@ {% endif %} {% embed "@organisms/component-wrapper/yds-component-wrapper.twig" with { - component_wrapper__width: component_width, + component_wrapper__width: component_wrapper__width, component_wrapper__label: content.field_heading, component__modifiers: ['no-top-margin'], } %} From 3778ac3539c8f61429975ddc7769baa7e1b8c516 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 20 Jul 2023 08:50:06 -0500 Subject: [PATCH 13/28] fix(yalb-1461): fix table rows --- css/admin-theme.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index c0274826a..4605421c1 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -485,12 +485,17 @@ table .draggable-table.tabledrag-disabled tr:hover { /* yalb-1261 - fix hover color on table */ .layout-builder-components-table__block-label:hover { - color: var(--darkest-gray); + color: var(--dark-theme-gray-hover); text-decoration: underline; } +.layout-builder-components-table th:hover { + color: var(--dark-theme-gray-hover); +} + .layout-builder-components-table tr:hover { - color: var(--darkest-gray); + color: var(--dark-theme-gray); + background-color: var(--dark-theme-gray-lightest); } /* yalb-1296 - table tr hover in text component */ From 265680bd1deaa9d54577dbbc0f5d87b85e28ddbd Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 20 Jul 2023 14:14:51 -0500 Subject: [PATCH 14/28] fix(yalb-1461): fix admin colors --- css/admin-theme.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index 4605421c1..9868409d4 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -59,8 +59,6 @@ --gin-color-title: var(--dark-theme-gray-text); --gin-color-dark-text: var(--wool); --gin-color-title: var(--dark-theme-gray); - --gin-color-title-light: var(--dark-theme-gray-text-light); - --gin-color-title-dark: var(--dark-theme-gray-text-dark); --gin-color-button-text: var(--dark-theme-gray); --gin-color-button-text-hover: var(--dark-theme-gray-hover); } From edaf00f24cb2aad108929bd2019e67389f7212c3 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 24 Jul 2023 13:08:05 -0500 Subject: [PATCH 15/28] fix(yalb-1461): fixes for media library and specific field variations --- css/admin-theme.css | 60 ++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index 9868409d4..bd8e03581 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -7,6 +7,7 @@ --wool: #fbfbf6; --light-gray: #d4d4d4; --darkest-gray: #1f1f1f; + --dark-theme-gray-rgb: 78, 89, 89; --dark-theme-gray:#4E5959; --dark-theme-gray-selected:#edfbfb; --dark-theme-gray-lightest:#d0e0e0; @@ -75,8 +76,63 @@ } +/* media modal */ +.glb-view-header a.views-display-link.views-display-link-widget_table { + color: var(--wool) !important; +} + +.glb-view-header .views-display-link.views-display-link-widget.is-active { + color: var(--wool) !important; +} + +.glb-view-header .views-display-link::before { + background-color: var(--wool) !important; +} + +#views-exposed-form-media-library-widget .glb-form-item__label { + color: var(--wool) !important; +} + +.glb-form-checkbox:checked { + background-color: var(--dark-theme-gray) !important; +} + +.media-library-selected-count { + color: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__link { + color: var(--mediterranean-blue) !important; +} +.glb-pager .pager__link:hover, +.glb-pager .pager__link:focus { + background: var(--dark-theme-gray-lightest) !important; + border-color: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__item .pager__link--action-link::before, +.glb-pager .pager__item .pager__link--action-link::after { + background: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__item .pager__link--action-link:hover::before, +.glb-pager .pager__item .pager__link--action-link:focus::after, +.glb-pager .pager__item .pager__link:hover::after, +.glb-pager .pager__item .pager__link:focus::after { + background: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__link.is-active, +.glb-pager .pager__item--current { + color: var(--dark-theme-gray) !important; +} + +/* linkit ui autocomplete */ +.ui-autocomplete .ui-menu-item-wrapper.ui-state-active { + background-color: var(--dark-theme-gray-lightest); +} /* Off-canvas overrides */ #drupal-off-canvas { @@ -336,7 +392,6 @@ body.gin--horizontal-toolbar { a:active, table tr:hover, table .draggable-table.tabledrag-disabled tr:hover { - --gin-color-button-text: var(--dark-primary-link); color: var(--wool); background: var(--dark-theme-gray); } @@ -398,6 +453,9 @@ table .draggable-table.tabledrag-disabled tr:hover { border-color: var(--dark-theme-gray-hover) !important; } +.glb-button:hover { + color: var(--dark-theme-gray) !important; +} .glb-button:not(:focus) { filter: none !important; From 38b2d20828afdc9329d85c229281ece6ad320e8c Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Fri, 21 Jul 2023 12:58:37 -0400 Subject: [PATCH 16/28] fix(YALB-1422): create ckeditor css overrides --- atomic.libraries.yml | 1 + css/ckeditor-overrides.css | 6 ++++++ 2 files changed, 7 insertions(+) create mode 100644 css/ckeditor-overrides.css diff --git a/atomic.libraries.yml b/atomic.libraries.yml index 0cc0fd78b..f748680cf 100644 --- a/atomic.libraries.yml +++ b/atomic.libraries.yml @@ -5,6 +5,7 @@ global: node_modules/@yalesites-org/component-library-twig/dist/style.css: {} components/_settings/_config.css: {} css/admin-theme.css: {} + css/ckeditor-overrides.css: {} js: node_modules/@yalesites-org/component-library-twig/dist/js/02-molecules/menu/menu-toggle/yds-menu-toggle.js: {} node_modules/@yalesites-org/component-library-twig/dist/js/00-tokens/layout/yds-layout.js: {} diff --git a/css/ckeditor-overrides.css b/css/ckeditor-overrides.css new file mode 100644 index 000000000..460f30b0d --- /dev/null +++ b/css/ckeditor-overrides.css @@ -0,0 +1,6 @@ +/* Fix CKEditor modal table dialog from displaying borders where it should not */ +/* .cke_dialog_body tbody tr:last-child td, td.cke_dialog_ui_vbox_child, td.cke_dialog_contents_body { */ +.cke_dialog td { + border-bottom: 0 !important; +} + From 8c0117f7784bd8975438b792a663c5ec9105e75f Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Fri, 21 Jul 2023 13:33:39 -0400 Subject: [PATCH 17/28] feat(YALB-1442): style table modal --- css/ckeditor-overrides.css | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/css/ckeditor-overrides.css b/css/ckeditor-overrides.css index 460f30b0d..680bda20f 100644 --- a/css/ckeditor-overrides.css +++ b/css/ckeditor-overrides.css @@ -1,6 +1,36 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap"); + /* Fix CKEditor modal table dialog from displaying borders where it should not */ /* .cke_dialog_body tbody tr:last-child td, td.cke_dialog_ui_vbox_child, td.cke_dialog_contents_body { */ .cke_dialog td { border-bottom: 0 !important; } +.cke_dialog * { + font-family: var(--gin-font) !important; +} + +/* Generic button overrides */ +.cke_dialog .cke_dialog_ui_button { + border-radius: 2.5rem !important; +} + +/* Restyle Ok button */ +.cke_dialog .cke_dialog_ui_button_ok { + background-color: var(--gin-color-primary) !important; +} + +.cke_dialog input { + border-radius: 6px !important; +} + +.cke_dialog select.cke_dialog_ui_input_select { + appearance: none; + -webkit-appearance: none; + padding-right: calc(2.5em - 1px) !important; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e") !important; + background-repeat: no-repeat !important; + background-position: 100% 50% !important; + background-size: 2.75em .5625em !important; + line-height: 1.5em !important; +} From 70f54db7e1dbc68145b768a95e0b7818ea32f329 Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Fri, 21 Jul 2023 13:38:52 -0400 Subject: [PATCH 18/28] fix(YALB-1442): style select and remove tr colors --- css/ckeditor-overrides.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/ckeditor-overrides.css b/css/ckeditor-overrides.css index 680bda20f..557d0ae26 100644 --- a/css/ckeditor-overrides.css +++ b/css/ckeditor-overrides.css @@ -20,7 +20,7 @@ background-color: var(--gin-color-primary) !important; } -.cke_dialog input { +.cke_dialog input, .cke_dialog select { border-radius: 6px !important; } @@ -34,3 +34,7 @@ background-size: 2.75em .5625em !important; line-height: 1.5em !important; } + +.cke_dialog tr:nth-child(even) { + background-color: inherit !important; +} From 5f6b765a389e55756bf95af50a9582a10f79db50 Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Fri, 21 Jul 2023 14:51:44 -0400 Subject: [PATCH 19/28] fix(YALB-1442): fix title to match other styling --- css/ckeditor-overrides.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/css/ckeditor-overrides.css b/css/ckeditor-overrides.css index 557d0ae26..4385fb9fe 100644 --- a/css/ckeditor-overrides.css +++ b/css/ckeditor-overrides.css @@ -38,3 +38,17 @@ .cke_dialog tr:nth-child(even) { background-color: inherit !important; } + +.cke_dialog .cke_dialog_title { + background: var(--mediterranean-blue) !important; + color: var(--wool) !important; +} + +.cke_dialog .cke_dialog_content_body { + background: var(--gin-bg-layer) !important; + color: var(--gin-color-text) !important; +} + +.cke_dialog .cke_dialog_close_button { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22100%22%20y2%3D%22100%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%0A%20%20%3Cline%20x1%3D%220%22%20y1%3D%22100%22%20x2%3D%22100%22%20y2%3D%220%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E") !important; +} From 04fef26f12ea80d230651314c56f97babc2ea79e Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Fri, 21 Jul 2023 15:10:55 -0400 Subject: [PATCH 20/28] chore(YALB-1442): Add comments to styling decision --- css/ckeditor-overrides.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/css/ckeditor-overrides.css b/css/ckeditor-overrides.css index 4385fb9fe..409d1b184 100644 --- a/css/ckeditor-overrides.css +++ b/css/ckeditor-overrides.css @@ -1,11 +1,11 @@ @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap"); /* Fix CKEditor modal table dialog from displaying borders where it should not */ -/* .cke_dialog_body tbody tr:last-child td, td.cke_dialog_ui_vbox_child, td.cke_dialog_contents_body { */ .cke_dialog td { border-bottom: 0 !important; } +/* Set font over all of the dialog */ .cke_dialog * { font-family: var(--gin-font) !important; } @@ -20,10 +20,12 @@ background-color: var(--gin-color-primary) !important; } +/* Round inputs */ .cke_dialog input, .cke_dialog select { border-radius: 6px !important; } +/* Mimic selects in other areas, like the divider */ .cke_dialog select.cke_dialog_ui_input_select { appearance: none; -webkit-appearance: none; @@ -35,20 +37,24 @@ line-height: 1.5em !important; } +/* Remove the alternating background color */ .cke_dialog tr:nth-child(even) { background-color: inherit !important; } +/* Make the title similar to other titles on the admin side */ .cke_dialog .cke_dialog_title { background: var(--mediterranean-blue) !important; color: var(--wool) !important; } +/* Make the body color similar to the other displays on the admin side */ .cke_dialog .cke_dialog_content_body { background: var(--gin-bg-layer) !important; color: var(--gin-color-text) !important; } +/* Remake the X button so we can color it white--it was a png before */ .cke_dialog .cke_dialog_close_button { background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cline%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%22100%22%20y2%3D%22100%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%0A%20%20%3Cline%20x1%3D%220%22%20y1%3D%22100%22%20x2%3D%22100%22%20y2%3D%220%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%2F%3E%0A%3C%2Fsvg%3E") !important; } From b582d6736a5e963fc15c77e7ed6a64ed32ba3908 Mon Sep 17 00:00:00 2001 From: David Blankenship Date: Mon, 24 Jul 2023 08:43:00 -0400 Subject: [PATCH 21/28] fix(YALB-1442): Fix contrast ratio for title Wool was so close to getting to the correct contrast ratio, but it wasn't quite there. This now allows it to cross that threshold to accomodate A11y. --- css/ckeditor-overrides.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/ckeditor-overrides.css b/css/ckeditor-overrides.css index 409d1b184..7a19b46a3 100644 --- a/css/ckeditor-overrides.css +++ b/css/ckeditor-overrides.css @@ -45,7 +45,7 @@ /* Make the title similar to other titles on the admin side */ .cke_dialog .cke_dialog_title { background: var(--mediterranean-blue) !important; - color: var(--wool) !important; + color: #fff !important; } /* Make the body color similar to the other displays on the admin side */ From 4e24583065bbe84950f0fbf294d7d5c5d375a50c Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 24 Jul 2023 14:14:37 -0500 Subject: [PATCH 22/28] fix(yalb-1461): fixes views displays --- css/admin-theme.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/admin-theme.css b/css/admin-theme.css index bd8e03581..efdc0fcc7 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -49,6 +49,7 @@ --gin-color-text-light: var(--wool); --gin-icon-color: var(--dark-gin-icon-color); --gin-bg-item-hover: var(--dark-theme-gray-hover); + --gin-bg-header: var(--dark-theme-gray); --gin-color-primary-hover: var(--dark-primary-link-hover); --gin-color-primary-light: var(--gin-bg-item-hover) !important; --gin-border-color-layer: var(--light-gray); From 21521134dbb527dc68e0777616ef22bd7972fcc9 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Mon, 24 Jul 2023 14:29:05 -0500 Subject: [PATCH 23/28] fix(yalb-1461): remove wool background from editable content area --- css/admin-theme.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index efdc0fcc7..fb4c3a93e 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -523,7 +523,6 @@ table .draggable-table.tabledrag-disabled tr:hover { .layout-builder__section { margin-inline-start: 0.5rem; margin-inline-end: 0.5rem; - background-color: var(--wool); } .layout-builder__section:hover .layout-builder__link--add-section-to-library { From d72b522d1896e1bc6bdc42fe0f9d62378c51b559 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 25 Jul 2023 09:51:04 -0500 Subject: [PATCH 24/28] fix(yalb-1461): fix accordion and button block headings --- css/admin-theme.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index fb4c3a93e..927fb3fa8 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -162,7 +162,6 @@ color: var(--dark-theme-gray) !important; } - .ui-menu-item-wrapper:hover { background-color: var(--dark-theme-gray-lightest); } @@ -468,7 +467,7 @@ table .draggable-table.tabledrag-disabled tr:hover { } .glb-table .tabledrag-handle::after { - background-color: var(--dark-theme-gray); + background-color: var(--dark-theme-gray) !important; } .glb-table tr:hover, @@ -619,3 +618,10 @@ table .draggable-table.tabledrag-disabled tr:hover { align-items: center; padding-inline: 2rem; } + + +/* Blocks - accordion block, button block */ +.field--name-field-accordion-items th h4, +.field--name-field-button-link th h4 { + color: var(--wool) !important; +} From 2cd67af74740e20bd6c1583a5a2b9e75531ec197 Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 25 Jul 2023 11:26:08 -0500 Subject: [PATCH 25/28] fix(yalb-1461): change --gin-bg-app and ::selection colors --- css/admin-theme.css | 269 +++----------------------------------------- 1 file changed, 16 insertions(+), 253 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index 927fb3fa8..72c914258 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -7,25 +7,6 @@ --wool: #fbfbf6; --light-gray: #d4d4d4; --darkest-gray: #1f1f1f; - --dark-theme-gray-rgb: 78, 89, 89; - --dark-theme-gray:#4E5959; - --dark-theme-gray-selected:#edfbfb; - --dark-theme-gray-lightest:#d0e0e0; - --dark-theme-gray-lightest-rgb: 208, 224, 224; - --dark-theme-gray-light:#606A6A; - --dark-theme-gray-hover: #353d3d; - --dark-primary-link: var(--wool); - --dark-primary-link-hover: #ffffff; - --dark-theme-gray-text-light:var(--wool); - --dark-theme-gray-text-dark:var(--dark-theme-gray); - --custom-button-color: var(--robin-egg); - --custom-button-color-hover: var(--wool); - --custom-button-color-text: var(--dark-theme-gray-hover); - --custom-button-color-text-hover: var(--dark-theme-gray-hover); - - --dark-gin-icon-color: var(--wool); - --gin-color-text-light: var(--wool); - --gin-font: "DM Mono", monospace; --gin-font-size-h1: 1.75rem; --gin-font-size-h2: 1.5rem; @@ -39,35 +20,24 @@ --gin-bg-warning: #605328; --gin-color-danger-light: #f39b9d; --gin-bg-danger: #583333; - --gin-bg-item-hover: var(--dark-theme-gray-hover); } :root [data-gin-accent=light_blue] { - --gin-color-primary-rgb: 217, 241, 243; - --gin-color-primary-active: var(--wool); + --gin-color-primary-rgb: 55, 108, 116; + --gin-color-primary-active: var(--peacock-green); --gin-color-secondary: var(--mediterranean-blue); - --gin-color-text-light: var(--wool); - --gin-icon-color: var(--dark-gin-icon-color); - --gin-bg-item-hover: var(--dark-theme-gray-hover); - --gin-bg-header: var(--dark-theme-gray); - --gin-color-primary-hover: var(--dark-primary-link-hover); - --gin-color-primary-light: var(--gin-bg-item-hover) !important; + --gin-color-primary-hover: var(--peacock-green); + --gin-color-primary-light: var(--robin-egg); --gin-border-color-layer: var(--light-gray); - --gin-bg-layer: var(--dark-theme-gray); + --gin-bg-layer: var(--wool); --gin-dark-gray: var(--darkest-gray); --colorGinText: var(--darkest-gray); --gin-border-color-table-header: var(--darkest-gray); - --gin-bg-layer3: var(--dark-theme-gray-hover); - --gin-color-title: var(--dark-theme-gray-text); - --gin-color-dark-text: var(--wool); - --gin-color-title: var(--dark-theme-gray); - --gin-color-button-text: var(--dark-theme-gray); - --gin-color-button-text-hover: var(--dark-theme-gray-hover); } [data-gin-accent=light_blue] { - --gin-bg-app: #fcfefe; - --gin-bg-app-rgb: rgb(252, 254, 254); + --gin-bg-app: #707070; + --gin-bg-app-rgb: 252, 254, 254; } /* affect admin paths only */ @@ -77,78 +47,12 @@ } -/* media modal */ - -.glb-view-header a.views-display-link.views-display-link-widget_table { - color: var(--wool) !important; -} - -.glb-view-header .views-display-link.views-display-link-widget.is-active { - color: var(--wool) !important; -} - -.glb-view-header .views-display-link::before { - background-color: var(--wool) !important; -} - -#views-exposed-form-media-library-widget .glb-form-item__label { - color: var(--wool) !important; -} - -.glb-form-checkbox:checked { - background-color: var(--dark-theme-gray) !important; -} - -.media-library-selected-count { - color: var(--dark-theme-gray) !important; -} - -.glb-pager .pager__link { - color: var(--mediterranean-blue) !important; -} - -.glb-pager .pager__link:hover, -.glb-pager .pager__link:focus { - background: var(--dark-theme-gray-lightest) !important; - border-color: var(--dark-theme-gray) !important; -} - -.glb-pager .pager__item .pager__link--action-link::before, -.glb-pager .pager__item .pager__link--action-link::after { - background: var(--dark-theme-gray) !important; -} - -.glb-pager .pager__item .pager__link--action-link:hover::before, -.glb-pager .pager__item .pager__link--action-link:focus::after, -.glb-pager .pager__item .pager__link:hover::after, -.glb-pager .pager__item .pager__link:focus::after { - background: var(--dark-theme-gray) !important; -} - -.glb-pager .pager__link.is-active, -.glb-pager .pager__item--current { - color: var(--dark-theme-gray) !important; -} - -/* linkit ui autocomplete */ -.ui-autocomplete .ui-menu-item-wrapper.ui-state-active { - background-color: var(--dark-theme-gray-lightest); -} - /* Off-canvas overrides */ #drupal-off-canvas { background-color: var(--wool); color: var(--darkest-gray); } -.ui-dialog-content, -.ui-dialog-off-canvas .ui-dialog-titlebar { - background: var(--wool) !important; -} -#layout-builder-modal { - background: var(--wool) !important; -} - .ui-dialog-off-canvas #drupal-off-canvas { padding-inline: var(--size-spacing-5) var(--size-spacing-8); } @@ -158,63 +62,10 @@ color: var(--darkest-gray); } -.ui-widget-content a { - color: var(--dark-theme-gray) !important; -} - -.ui-menu-item-wrapper:hover { - background-color: var(--dark-theme-gray-lightest); -} - .ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { display: flex; align-items: center; - border-color: var(--dark-theme-gray); -} - -.ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { - background-color: var(--dark-theme-gray-hover) !important; -} - -.glb-claro-details[open] > .glb-claro-details__summary { - color: var(--gin-color-primary) !important; - background-color: var(--dark-theme-gray-hover) !important; -} - -.glb-claro-details[open] > .glb-claro-details__summary::before { - background: var(--gin-color-primary) !important; -} - -.glb-claro-details__summary:hover::before { - background: var(--gin-color-primary) !important; -} - -.glb-form-item__description, .glb-fieldset__description { - color: var(--dark-theme-gray) !important; -} - -.glb-form-wrapper .cke .cke_top, -.glb-form-wrapper .cke .cke_bottom { - background: var(--dark-theme-gray-lightest) !important; -} - -.glb-form-wrapper .cke a.cke_path_item, -.glb-form-wrapper .cke span.cke_path_empty { - color: var(--dark-theme-gray) !important; -} - -.glb-form-wrapper .cke a.cke_button_off:hover, -.glb-form-wrapper .cke a.cke_button_off:focus, -.glb-form-wrapper .cke a.cke_button_off:active { - background: var(--wool) !important; -} - -:not(.glb-form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content) > .glb-form-type--checkbox label { - color: var(--wool) !important; -} - -[dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:last-child .toolbar-tray { - border-radius: 0 0 var(--gin-border-l) var(--gin-border-l); + border-color: var(--peacock-green); } .ui-dialog.ui-dialog-off-canvas .ui-dialog-title, @@ -228,17 +79,8 @@ #drupal-off-canvas input[type="submit"].button { box-sizing: border-box; padding: var(--size-spacing-5); - background-color: var(--custom-button-color) !important; - color: var(--custom-button-color-text) !important; -} - -.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"]:hover, -.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"]:focus { - background-color: var(--dark-theme-gray-hover) !important; - color: var(--wool) !important; } - /* Modal */ .ui-widget-overlay { background: var(--gin-color-primary) !important; @@ -269,23 +111,6 @@ top: calc(var(--gin-toolbar-secondary-height) - 7px) !important; } -.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; -} - body.gin--horizontal-toolbar { padding-top: calc(var(--gin-toolbar-y-offset) + var(--gin-toolbar-secondary-height)) !important; } @@ -295,7 +120,7 @@ body.gin--horizontal-toolbar { } [data-gin-accent=light_blue] .ui-dialog-titlebar { - background: var(--dark-theme-gray) !important; + background: var(--mediterranean-blue) !important; } .toolbar-menu-administration @@ -345,7 +170,7 @@ body.gin--horizontal-toolbar { .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus .trigger::before { - background-color: var(--wool) !important; + background-color: var(--gin-color-primary) !important; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover @@ -354,7 +179,7 @@ body.gin--horizontal-toolbar { } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger { - color: var(--wool) !important; + color: var(--gin-color-primary) !important; } .is-horizontal .tabs__link:hover, @@ -392,8 +217,8 @@ body.gin--horizontal-toolbar { a:active, table tr:hover, table .draggable-table.tabledrag-disabled tr:hover { + --gin-color-button-text: var(--gin-color-primary); color: var(--wool); - background: var(--dark-theme-gray); } #block-atomic-local-tasks ul:not(.contextual-links) { @@ -437,24 +262,6 @@ table .draggable-table.tabledrag-disabled tr:hover { .form-actions .layout-builder__link--add, .glb-action-link--icon-trash.glb-action-link { border-radius: 2.5rem !important; - border: 2px solid transparent !important; -} - -.glb-button:hover, -.inline-block-create-button:hover, -.layout-builder__link--add:hover, -.glb-button:not(:focus):hover, -.inline-block-create-button:not(:focus):hover, -.layout-builder__link--add:not(:focus):hover, -.form-actions .glb-button:hover, -.form-actions .inline-block-create-button:hover, -.form-actions .layout-builder__link--add:hover, -.glb-action-link--icon-trash.glb-action-link:hover { - border-color: var(--dark-theme-gray-hover) !important; -} - -.glb-button:hover { - color: var(--dark-theme-gray) !important; } .glb-button:not(:focus) { @@ -466,15 +273,6 @@ table .draggable-table.tabledrag-disabled tr:hover { box-shadow: 0 0 0 3px #d4d4d4 !important; } -.glb-table .tabledrag-handle::after { - background-color: var(--dark-theme-gray) !important; -} - -.glb-table tr:hover, -.glb-table .draggable-table.tabledrag-disabled tr:hover { - background: var(--dark-theme-gray-lightest); -} - .meta-sidebar__trigger, .meta-sidebar__close { background-color: var(--gin-color-primary-light); @@ -493,16 +291,11 @@ table .draggable-table.tabledrag-disabled tr:hover { } .layout-builder__link--configure { - color: var(--dark-theme-gray); + --gin-border-color-form-element: var(--darkest-gray); } - .layout-builder__link--add-section-to-library, .layout-builder__link--remove { - background-color: var(--dark-theme-gray-hover); -} - -.layout-builder__section:not(.gin-lb--disable-section-focus):hover::after { - border: 0.25rem solid var(--dark-theme-gray-hover) !important; + --gin-border-color-form-element: var(--darkest-gray); } #media-library-messages .messages { @@ -519,38 +312,15 @@ table .draggable-table.tabledrag-disabled tr:hover { background-color: var(--gin-bg-warning); } -.layout-builder__section { - margin-inline-start: 0.5rem; - margin-inline-end: 0.5rem; -} - -.layout-builder__section:hover .layout-builder__link--add-section-to-library { - background-color: var(--dark-theme-gray-hover) !important; -} - -.layout-builder__section:hover .layout-builder__link--remove { - background-color: var(--dark-theme-gray-hover) !important; -} - -.layout-builder__section:hover .layout-builder__link--configure { - background-color: var(--dark-theme-gray-hover) !important; - color: var(--gin-color-primary) !important; -} - /* yalb-1261 - fix hover color on table */ .layout-builder-components-table__block-label:hover { - color: var(--dark-theme-gray-hover); + color: var(--darkest-gray); text-decoration: underline; } -.layout-builder-components-table th:hover { - color: var(--dark-theme-gray-hover); -} - .layout-builder-components-table tr:hover { - color: var(--dark-theme-gray); - background-color: var(--dark-theme-gray-lightest); + color: var(--darkest-gray); } /* yalb-1296 - table tr hover in text component */ @@ -618,10 +388,3 @@ table .draggable-table.tabledrag-disabled tr:hover { align-items: center; padding-inline: 2rem; } - - -/* Blocks - accordion block, button block */ -.field--name-field-accordion-items th h4, -.field--name-field-button-link th h4 { - color: var(--wool) !important; -} From 1196efe2220c12ec3a0cd6e335aa32381b7226ab Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Tue, 25 Jul 2023 13:09:40 -0500 Subject: [PATCH 26/28] fix(yalb-1461): fix reverted file values --- css/admin-theme.css | 354 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 277 insertions(+), 77 deletions(-) diff --git a/css/admin-theme.css b/css/admin-theme.css index 72c914258..5b73a5c6f 100644 --- a/css/admin-theme.css +++ b/css/admin-theme.css @@ -1,4 +1,3 @@ -@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap"); :root { --peacock-green: #376c74; @@ -7,6 +6,25 @@ --wool: #fbfbf6; --light-gray: #d4d4d4; --darkest-gray: #1f1f1f; + --dark-theme-gray-rgb: 78, 89, 89; + --dark-theme-gray: #4E5959; + --dark-theme-gray-selected: #edfbfb; + --dark-theme-gray-lightest: #d0e0e0; + --dark-theme-gray-lightest-rgb: 208, 224, 224; + --dark-theme-gray-light: #606A6A; + --dark-theme-gray-hover: #353d3d; + --dark-primary-link: var(--wool); + --dark-primary-link-hover: #ffffff; + --dark-theme-gray-text-light: var(--wool); + --dark-theme-gray-text-dark: var(--dark-theme-gray); + --custom-button-color: var(--robin-egg); + --custom-button-color-hover: var(--wool); + --custom-button-color-text: var(--dark-theme-gray-hover); + --custom-button-color-text-hover: var(--dark-theme-gray-hover); + + --dark-gin-icon-color: var(--wool); + --gin-color-text-light: var(--wool); + --gin-font: "DM Mono", monospace; --gin-font-size-h1: 1.75rem; --gin-font-size-h2: 1.5rem; @@ -20,24 +38,35 @@ --gin-bg-warning: #605328; --gin-color-danger-light: #f39b9d; --gin-bg-danger: #583333; + --gin-bg-item-hover: var(--dark-theme-gray-hover); } :root [data-gin-accent=light_blue] { - --gin-color-primary-rgb: 55, 108, 116; - --gin-color-primary-active: var(--peacock-green); + --gin-color-primary-rgb: 217, 241, 243; + --gin-color-primary-active: var(--wool); --gin-color-secondary: var(--mediterranean-blue); - --gin-color-primary-hover: var(--peacock-green); - --gin-color-primary-light: var(--robin-egg); + --gin-color-text-light: var(--wool); + --gin-icon-color: var(--dark-gin-icon-color); + --gin-bg-item-hover: var(--dark-theme-gray-hover); + --gin-bg-header: var(--dark-theme-gray); + --gin-color-primary-hover: var(--dark-primary-link-hover); + --gin-color-primary-light: var(--gin-bg-item-hover) !important; --gin-border-color-layer: var(--light-gray); - --gin-bg-layer: var(--wool); + --gin-bg-layer: var(--dark-theme-gray); --gin-dark-gray: var(--darkest-gray); --colorGinText: var(--darkest-gray); --gin-border-color-table-header: var(--darkest-gray); + --gin-bg-layer3: var(--dark-theme-gray-hover); + --gin-color-title: var(--dark-theme-gray-text); + --gin-color-dark-text: var(--wool); + --gin-color-title: var(--dark-theme-gray); + --gin-color-button-text: var(--dark-theme-gray); + --gin-color-button-text-hover: var(--dark-theme-gray-hover); } [data-gin-accent=light_blue] { - --gin-bg-app: #707070; - --gin-bg-app-rgb: 252, 254, 254; + --gin-bg-app: #fcfefe; + --gin-bg-app-rgb: rgb(252, 254, 254); } /* affect admin paths only */ @@ -47,12 +76,79 @@ } +/* media modal */ + +.glb-view-header a.views-display-link.views-display-link-widget_table { + color: var(--wool) !important; +} + +.glb-view-header .views-display-link.views-display-link-widget.is-active { + color: var(--wool) !important; +} + +.glb-view-header .views-display-link::before { + background-color: var(--wool) !important; +} + +#views-exposed-form-media-library-widget .glb-form-item__label { + color: var(--wool) !important; +} + +.glb-form-checkbox:checked { + background-color: var(--dark-theme-gray) !important; +} + +.media-library-selected-count { + color: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__link { + color: var(--mediterranean-blue) !important; +} + +.glb-pager .pager__link:hover, +.glb-pager .pager__link:focus { + background: var(--dark-theme-gray-lightest) !important; + border-color: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__item .pager__link--action-link::before, +.glb-pager .pager__item .pager__link--action-link::after { + background: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__item .pager__link--action-link:hover::before, +.glb-pager .pager__item .pager__link--action-link:focus::after, +.glb-pager .pager__item .pager__link:hover::after, +.glb-pager .pager__item .pager__link:focus::after { + background: var(--dark-theme-gray) !important; +} + +.glb-pager .pager__link.is-active, +.glb-pager .pager__item--current { + color: var(--dark-theme-gray) !important; +} + +/* linkit ui autocomplete */ +.ui-autocomplete .ui-menu-item-wrapper.ui-state-active { + background-color: var(--dark-theme-gray-lightest); +} + /* Off-canvas overrides */ #drupal-off-canvas { background-color: var(--wool); color: var(--darkest-gray); } +.ui-dialog-content, +.ui-dialog-off-canvas .ui-dialog-titlebar { + background: var(--wool) !important; +} + +#layout-builder-modal { + background: var(--wool) !important; +} + .ui-dialog-off-canvas #drupal-off-canvas { padding-inline: var(--size-spacing-5) var(--size-spacing-8); } @@ -62,10 +158,64 @@ color: var(--darkest-gray); } +.ui-widget-content a { + color: var(--dark-theme-gray) !important; +} + +.ui-menu-item-wrapper:hover { + background-color: var(--dark-theme-gray-lightest); +} + .ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { display: flex; align-items: center; - border-color: var(--peacock-green); + border-color: var(--dark-theme-gray); +} + +.ui-widget.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { + background-color: var(--dark-theme-gray-hover) !important; +} + +.glb-claro-details[open]>.glb-claro-details__summary { + color: var(--gin-color-primary) !important; + background-color: var(--dark-theme-gray-hover) !important; +} + +.glb-claro-details[open]>.glb-claro-details__summary::before { + background: var(--gin-color-primary) !important; +} + +.glb-claro-details__summary:hover::before { + background: var(--gin-color-primary) !important; +} + +.glb-form-item__description, +.glb-fieldset__description { + color: var(--dark-theme-gray) !important; +} + +.glb-form-wrapper .cke .cke_top, +.glb-form-wrapper .cke .cke_bottom { + background: var(--dark-theme-gray-lightest) !important; +} + +.glb-form-wrapper .cke a.cke_path_item, +.glb-form-wrapper .cke span.cke_path_empty { + color: var(--dark-theme-gray) !important; +} + +.glb-form-wrapper .cke a.cke_button_off:hover, +.glb-form-wrapper .cke a.cke_button_off:focus, +.glb-form-wrapper .cke a.cke_button_off:active { + background: var(--wool) !important; +} + +:not(.glb-form-checkboxes):not(td):not(.media-library-item__click-to-select-checkbox):not(.field-content)>.glb-form-type--checkbox label { + color: var(--wool) !important; +} + +[dir="ltr"] .gin-secondary-toolbar .toolbar-secondary .toolbar-bar div:last-child .toolbar-tray { + border-radius: 0 0 var(--gin-border-l) var(--gin-border-l); } .ui-dialog.ui-dialog-off-canvas .ui-dialog-title, @@ -79,8 +229,17 @@ #drupal-off-canvas input[type="submit"].button { box-sizing: border-box; padding: var(--size-spacing-5); + background-color: var(--custom-button-color) !important; + color: var(--custom-button-color-text) !important; } +.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"]:hover, +.ui-widget.ui-dialog.ui-dialog-off-canvas #drupal-off-canvas .button--primary[type="submit"]:focus { + background-color: var(--dark-theme-gray-hover) !important; + color: var(--wool) !important; +} + + /* Modal */ .ui-widget-overlay { background: var(--gin-color-primary) !important; @@ -111,6 +270,23 @@ top: calc(var(--gin-toolbar-secondary-height) - 7px) !important; } +.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; +} + body.gin--horizontal-toolbar { padding-top: calc(var(--gin-toolbar-y-offset) + var(--gin-toolbar-secondary-height)) !important; } @@ -120,66 +296,35 @@ body.gin--horizontal-toolbar { } [data-gin-accent=light_blue] .ui-dialog-titlebar { - background: var(--mediterranean-blue) !important; -} - -.toolbar-menu-administration - > .toolbar-menu - > .menu-item:hover - > .toolbar-icon::before, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item:hover - > .toolbar-box - > a.toolbar-icon::before, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item - > .toolbar-icon:focus::before, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item.menu-item--active-trail - > .toolbar-icon::before, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item.menu-item--active-trail:hover - > .toolbar-icon::before, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item.menu-item--active-trail - > .toolbar-box - > a.toolbar-icon::before { + background: var(--dark-theme-gray) !important; +} + +.toolbar-menu-administration>.toolbar-menu>.menu-item:hover>.toolbar-icon::before, +.toolbar-menu-administration>.toolbar-menu>.menu-item:hover>.toolbar-box>a.toolbar-icon::before, +.toolbar-menu-administration>.toolbar-menu>.menu-item>.toolbar-icon:focus::before, +.toolbar-menu-administration>.toolbar-menu>.menu-item.menu-item--active-trail>.toolbar-icon::before, +.toolbar-menu-administration>.toolbar-menu>.menu-item.menu-item--active-trail:hover>.toolbar-icon::before, +.toolbar-menu-administration>.toolbar-menu>.menu-item.menu-item--active-trail>.toolbar-box>a.toolbar-icon::before { z-index: 1; } -.toolbar-menu-administration - > .toolbar-menu - > .menu-item.menu-item--active-trail - > .toolbar-icon::after, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item.menu-item--active-trail - > .toolbar-box - > a.toolbar-icon::after, -.toolbar-menu-administration - > .toolbar-menu - > .menu-item - > .toolbar-icon.is-active::after { +.toolbar-menu-administration>.toolbar-menu>.menu-item.menu-item--active-trail>.toolbar-icon::after, +.toolbar-menu-administration>.toolbar-menu>.menu-item.menu-item--active-trail>.toolbar-box>a.toolbar-icon::after, +.toolbar-menu-administration>.toolbar-menu>.menu-item>.toolbar-icon.is-active::after { background-color: var(--gin-color-primary-light) !important; } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger::before, .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:focus .trigger::before { - background-color: var(--gin-color-primary) !important; + background-color: var(--wool) !important; } -.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:hover -.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab > .toolbar-icon-edit.toolbar-item:focus { +.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab>.toolbar-icon-edit.toolbar-item:hover .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab>.toolbar-icon-edit.toolbar-item:focus { background-color: var(--wool); } .gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab:hover .trigger { - color: var(--gin-color-primary) !important; + color: var(--wool) !important; } .is-horizontal .tabs__link:hover, @@ -193,7 +338,7 @@ body.gin--horizontal-toolbar { border-radius: 0.625rem !important; } -.block-system > .views-form [data-drupal-selector*="edit-header"], +.block-system>.views-form [data-drupal-selector*="edit-header"], .view-content .views-form [data-drupal-selector*="edit-header"] { background-color: transparent !important; } @@ -203,22 +348,12 @@ body.gin--horizontal-toolbar { background: rgba(var(--gin-color-primary-rgb), 0.15) !important; } -.gin-secondary-toolbar - .toolbar-secondary - .toolbar-bar - .toolbar-tab - .toolbar-tray - a:hover, -.gin-secondary-toolbar - .toolbar-secondary - .toolbar-bar - .toolbar-tab - .toolbar-tray - a:active, +.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a:hover, +.gin-secondary-toolbar .toolbar-secondary .toolbar-bar .toolbar-tab .toolbar-tray a:active, table tr:hover, table .draggable-table.tabledrag-disabled tr:hover { - --gin-color-button-text: var(--gin-color-primary); color: var(--wool); + background: var(--dark-theme-gray); } #block-atomic-local-tasks ul:not(.contextual-links) { @@ -262,6 +397,24 @@ table .draggable-table.tabledrag-disabled tr:hover { .form-actions .layout-builder__link--add, .glb-action-link--icon-trash.glb-action-link { border-radius: 2.5rem !important; + border: 2px solid transparent !important; +} + +.glb-button:hover, +.inline-block-create-button:hover, +.layout-builder__link--add:hover, +.glb-button:not(:focus):hover, +.inline-block-create-button:not(:focus):hover, +.layout-builder__link--add:not(:focus):hover, +.form-actions .glb-button:hover, +.form-actions .inline-block-create-button:hover, +.form-actions .layout-builder__link--add:hover, +.glb-action-link--icon-trash.glb-action-link:hover { + border-color: var(--dark-theme-gray-hover) !important; +} + +.glb-button:hover { + color: var(--dark-theme-gray) !important; } .glb-button:not(:focus) { @@ -273,6 +426,16 @@ table .draggable-table.tabledrag-disabled tr:hover { box-shadow: 0 0 0 3px #d4d4d4 !important; } +.glb-table .tabledrag-handle::after { + background-color: var(--dark-theme-gray) !important; +} + +.glb-table tr:hover, +.glb-table .draggable-table.tabledrag-disabled tr:hover { + background: var(--dark-theme-gray-lightest); +} + + .meta-sidebar__trigger, .meta-sidebar__close { background-color: var(--gin-color-primary-light); @@ -291,11 +454,16 @@ table .draggable-table.tabledrag-disabled tr:hover { } .layout-builder__link--configure { - --gin-border-color-form-element: var(--darkest-gray); + color: var(--dark-theme-gray); } + .layout-builder__link--add-section-to-library, .layout-builder__link--remove { - --gin-border-color-form-element: var(--darkest-gray); + background-color: var(--dark-theme-gray-hover); +} + +.layout-builder__section:not(.gin-lb--disable-section-focus):hover::after { + border: 0.25rem solid var(--dark-theme-gray-hover) !important; } #media-library-messages .messages { @@ -307,27 +475,51 @@ table .draggable-table.tabledrag-disabled tr:hover { color: var(--gin-color-danger-light); background-color: var(--gin-bg-danger); } + #media-library-messages .messages--warning { color: var(--gin-color-warning-light); background-color: var(--gin-bg-warning); } +.layout-builder__section { + margin-inline-start: 0.5rem; + margin-inline-end: 0.5rem; +} + +.layout-builder__section:hover .layout-builder__link--add-section-to-library { + background-color: var(--dark-theme-gray-hover) !important; +} + +.layout-builder__section:hover .layout-builder__link--remove { + background-color: var(--dark-theme-gray-hover) !important; +} + +.layout-builder__section:hover .layout-builder__link--configure { + background-color: var(--dark-theme-gray-hover) !important; + color: var(--gin-color-primary) !important; +} + /* yalb-1261 - fix hover color on table */ .layout-builder-components-table__block-label:hover { - color: var(--darkest-gray); + color: var(--dark-theme-gray-hover); text-decoration: underline; } +.layout-builder-components-table th:hover { + color: var(--dark-theme-gray-hover); +} + .layout-builder-components-table tr:hover { - color: var(--darkest-gray); + color: var(--dark-theme-gray); + background-color: var(--dark-theme-gray-lightest); } /* yalb-1296 - table tr hover in text component */ .text table tr:hover { color: var(--color-text); } - + /* yalb-1251 - AX: pencil icon difficulty editing blocks */ /* change the contextual pencil icon to the left-hand side of each component // instead of the right @@ -345,13 +537,13 @@ table .draggable-table.tabledrag-disabled tr:hover { .layout-builder-block.contextual-region .contextual { left: 15vw; } -} +} @media only screen and (min-width: 2500px) { .layout-builder-block.contextual-region .contextual { left: 20vw; } -} +} .layout-builder-block.contextual-region .contextual .contextual-links { left: 0; @@ -360,7 +552,7 @@ table .draggable-table.tabledrag-disabled tr:hover { } /* increase the size of the clickable/hoverable area */ -.layout-builder-block.contextual-region .contextual .trigger { +.layout-builder-block.contextual-region .contextual .trigger { width: 50px !important; height: 50px !important; } @@ -388,3 +580,11 @@ table .draggable-table.tabledrag-disabled tr:hover { align-items: center; padding-inline: 2rem; } + + +/* Blocks - accordion block, button block */ +.field--name-field-accordion-items th h4, +.field--name-field-button-link th h4 { + color: var(--wool) !important; +} + From d49d6ac222713d80514eec920f3f2b659721e29e Mon Sep 17 00:00:00 2001 From: Joe Tower Date: Thu, 27 Jul 2023 08:37:03 -0500 Subject: [PATCH 27/28] fix(yalb-1388): add embed__width to layout builder template to limit size --- .../block--inline-block--embed.html.twig | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/templates/block/layout-builder/block--inline-block--embed.html.twig b/templates/block/layout-builder/block--inline-block--embed.html.twig index d31514ccb..a7aa01955 100644 --- a/templates/block/layout-builder/block--inline-block--embed.html.twig +++ b/templates/block/layout-builder/block--inline-block--embed.html.twig @@ -2,7 +2,15 @@ {% block content %} - {% embed "@molecules/embed/yds-embed.twig" %} + {% if parentNode == 'post' or parentNode == 'event' %} + {% set embed__width = "content" %} + {% else %} + {% set embed__width = "site" %} + {% endif %} + + {% embed "@molecules/embed/yds-embed.twig" with { + embed__width: embed__width, + }%} {% block embed__block %} {{ content }} From 434a35986c2c7e71e5de3619cd33bf57f54e9f41 Mon Sep 17 00:00:00 2001 From: nJim Date: Sun, 30 Jul 2023 22:46:23 -0400 Subject: [PATCH 28/28] fix: updating to latest component library --- package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 27dd88126..fec58c23b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1418,9 +1418,9 @@ "inBundle": true }, "node_modules/@yalesites-org/component-library-twig": { - "version": "1.32.3", - "resolved": "https://npm.pkg.github.com/download/@yalesites-org/component-library-twig/1.32.3/1856f1f83599ed811201c418edbc7816da358137", - "integrity": "sha512-jWw5IEoS9CRtlMkUImPfYS5gFyjZjrGM5p2CVqAQwOjei5cKyLTgkNPETCgbMSZSqT5RSuZPSdbKuhoCSQd6PA==", + "version": "1.33.0", + "resolved": "https://npm.pkg.github.com/download/@yalesites-org/component-library-twig/1.33.0/50113fd913003e69f540f9da94a822bdd7c8cae8", + "integrity": "sha512-8KyDdKmvbEmbDstqGutIhOjEzYlr3PlkwLJXgfno0PE+TntbbgMUjjXX8Dq9duQtez561ve7ItdvInHlUslHWw==", "hasInstallScript": true, "inBundle": true, "dependencies": { @@ -20835,9 +20835,9 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, "@yalesites-org/component-library-twig": { - "version": "1.32.3", - "resolved": "https://npm.pkg.github.com/download/@yalesites-org/component-library-twig/1.32.3/1856f1f83599ed811201c418edbc7816da358137", - "integrity": "sha512-jWw5IEoS9CRtlMkUImPfYS5gFyjZjrGM5p2CVqAQwOjei5cKyLTgkNPETCgbMSZSqT5RSuZPSdbKuhoCSQd6PA==", + "version": "1.33.0", + "resolved": "https://npm.pkg.github.com/download/@yalesites-org/component-library-twig/1.33.0/50113fd913003e69f540f9da94a822bdd7c8cae8", + "integrity": "sha512-8KyDdKmvbEmbDstqGutIhOjEzYlr3PlkwLJXgfno0PE+TntbbgMUjjXX8Dq9duQtez561ve7ItdvInHlUslHWw==", "requires": { "@storybook/storybook-deployer": "^2.8.11", "@yalesites-org/tokens": "^1.20.0",