CHEMH-60, CHEMH-61: Section background colors (#93)

* CHEMH-60: initial commit

* CHEMH-60 CHEMH-61: adding a light and dark grey section background

* CHEMH-60: Fixes to the links and buttons on dark grey

* CHEMH-60: Fixups to all the paragraphs on dark grey

* fixups for feedback

* fixup to the cards with links in the body

* updated version number

README.md

@@ -1,5 +1,5 @@
 # [ChEM-H Subtheme](https://github.com/SU-SWS/chem_h_subtheme)
-##### Version: 2.2.9
+##### Version: 2.3.0
 
 Changelog: [Changelog.txt](CHANGELOG.txt)
 

chem_h_subtheme.info.yml

@@ -2,7 +2,7 @@ name: ChEM-H Subtheme
 type: theme
 description: 'ChEM-H Subtheme.'
 package: Stanford
-version: 2.2.9
+version: 2.3.0
 core_version_requirement: ^9 || ^10
 base theme: stanford_basic
 libraries:

chem_h_subtheme.react_behaviors.yml

@@ -31,4 +31,24 @@ banner_variant_info:  # part of the key after the :
         chemh-wrapper--banner-halfpill: Halfpill variant
         chemh-wrapper--banner-halfpill-title: Halfpill Title variant
         chemh-wrapper--banner-homepage: Homepage variant
-
+layout_variant_info:
+  id: layout_style
+  label: 'Layout Paragraph Type'
+  bundles:
+    - paragraphs_type|stanford_layout
+  config:
+    section_color:
+      type: select
+      title: Section background color
+      description: Choose the section background color.
+      empty_option: Default
+      options:
+        chemh-section-color--su-black: Dark Grey
+        chemh-section-color--light-grey: Light Grey
+    padding_bottom:
+      type: select
+      title: Section padding bottom
+      description: Choose the section padding bottom.
+      empty_option: Default
+      options:
+        chemh-section-pb-none: None

chem_h_subtheme.theme

@@ -184,3 +184,17 @@ function chem_h_subtheme_preprocess_field__node__title__stanford_person(&$variab
     ];
   }
 }
+
+/**
+ * Implements hook_preprocess_paragraph__stanford_layout().
+ */
+function chem_h_subtheme_preprocess_paragraph__stanford_layout(array &$variables): void {
+  /** @var \Drupal\paragraphs\Layout\Paragraph $paragraph */
+  $paragraph = &$variables['paragraph'];
+  $existing_classes = $variables['attributes']['class'] ?? [];
+  $extra_classes = [
+    $paragraph->getBehaviorSetting('react_paragraphs:layout_variant_info', 'padding_bottom'),
+    $paragraph->getBehaviorSetting('react_paragraphs:layout_variant_info', 'section_color'),
+  ];
+  $variables['attributes']['class'] = array_merge($existing_classes, $extra_classes);
+}

src/scss/components/index.scss

@@ -22,6 +22,7 @@
 // Components.
 // @import 'component-name/index';
 
+@import 'layout/index.scss';
 @import 'banner/index.scss';
 @import 'card/index.scss';
 @import 'events/index.scss';