stop14-themesystem-legacy 2.0.3 → 2.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "stop14-themesystem-legacy",
- "version": "2.0.3",
+ "version": "2.0.5",
  "description": "A scaffolding and build system for theme development across platforms. Legacy version",
  "author": {
   "name": "Bill Kennedy",

package/scaffolding/default/_00_main_configuration.yml

@@ -34,6 +34,7 @@ cta: $clr1
 de_emphasized: neutral(50)
 de_activated: neutral(30)
 link_colour: $black
+link_colour_active: $clr3
 
 ## 02 LAYOUT
 rootsize: 100%

package/scaffolding/drupal/_00_main_configuration.yml

@@ -34,6 +34,7 @@ cta: $clr1
 de_emphasized: neutral(50)
 de_activated: neutral(30)
 link_colour: $black
+link_colour_active: $clr3
 
 ## 02 LAYOUT
 rootsize: 100%

package/scaffolding/drupal/source/sass/20_layout/_section_title.sass

@@ -9,13 +9,13 @@ $title_area_spacing_factor: 0
 #splash + #title
   margin-top: rv($mobile_edge_padding_factor) * 2
 
-  +bp($tablet)
+  +bp($desktop)
     margin-top: rv($edge_padding_factor) * 2
 
 #title
   padding: 0 rv($mobile_edge_padding_factor)
 
-  +bp($tablet)
+  +bp($desktop)
     padding: 0 rv($edge_padding_factor)
 
 

package/scaffolding/drupal/source/sass/20_layout/_sidebar_left.sass

@@ -7,11 +7,7 @@
 
 #primary-content
   aside.left
-    padding: 0 rv($mobile_edge_padding_factor)
-    +font-size(-1)
-
-    +bp($desktop)
-      padding: 0 rv($edge_padding_factor)
+    font-size: clamped(-2,-1)
 
     div, p, ul, li, label
       color: inherit

package/source/img/svg/icons/metadata-active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f4b17a;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/img/svg/icons/metadata-default.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <path d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/img/svg/icons/metadata-neutral.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #80858c;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/img/svg/icons/metadata-reversed.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/10_colours_and_patterns/00_core/11_functions/_set_colour.sass

@@ -10,7 +10,7 @@
 @function set-colour($colour: 1,$intensity: 100, $mixer: white)
   @if is-int($intensity)
     // Variable interpolation e.g. $clr#{$colour}) doesn’t work in SASS functions. Use a map instead.
-    $colourmaps: (1: $clr1, 2: $clr2, 3: $clr3, 4: $clr4, 5: $clr5, 6: $clr6, 7: $clr7, 8: $clr8, 9: $clr9)
+    $colourmaps: (1: $clr1, 2: $clr2, 3: $clr3, 4: $clr4, 5: $clr5, 6: $clr6, 7: $clr7, 8: $clr8, 9: $clr9, 10: $clr10, 11: $clr11, 12: $clr12, 13: $clr13, 14: $clr14, 15: $clr15, 16: $clr16, 17: $clr17, 18: $clr18, 19: $clr19, 20: $clr20)
     @return mix(map-get($colourmaps,$colour),$mixer,$intensity * 1%)
   @else
     @return mix(set-colour-legacy($colour),$mixer,$intensity * 1%)

package/source/sass/a_components/10_colours_and_patterns/00_core/_01_configuration_colour_and_patterns.sass

@@ -16,6 +16,17 @@ $clr6: #000000
 $clr7: #000000
 $clr8: #000000
 $clr9: #000000
+$clr10: #000000
+$clr11: #000000
+$clr12: #000000
+$clr13: #000000
+$clr14: #000000
+$clr15: #000000
+$clr16: #000000
+$clr17: #000000
+$clr18: #000000
+$clr19: #000000
+$clr20: #000000
 
 // Define alternative blackpoint, whitepoint and neutrals.
 

package/source/sass/a_components/10_colours_and_patterns/common_patterns/_patterns.sass

@@ -24,17 +24,17 @@
 
 // legacy alias
 
-=overlay-dark($angle: 180deg, $stop: 66%, $colour: $black)
+=overlay-dark($colour: $black, $stop: 66%, $angle: 180deg)
   +gradient-overlay-dark($angle,$stop,$colour)
 
-=gradient-overlay-slide($angle: 0deg,$colour: $true_black)
+=gradient-overlay-slide($colour: $true_black, $stop: 40%, $angle: 0deg)
   +gradient-overlay-dark
 
   &:before
-    background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($mobile_edge_padding_factor) * 4, transparent 40%) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
+    background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($mobile_edge_padding_factor) * 4, transparent $stop) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
 
     +bp($tablet)
-      background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($edge_padding_factor) * 4, transparent 40%) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
+      background: linear-gradient($angle, rgba($colour,1) 0%, rgba($colour,0.9) rv($edge_padding_factor) * 4, transparent $stop) // fudge second gradient stop to clear caption. See 60_site_elements/content/_slide.sass
 
 
 =image-overlay($image_url:'../img/jpg/folder/some-image.jpg', $opacity: 0.4)

package/source/sass/a_components/30_typography/00_core/12_mixins/_link_underline.sass

@@ -1,8 +1,13 @@
 /**
- *  @file _link_underline.sass 
+ *  @file _link_underline.sass
  *  @category 30_typography
  *  @component 00_Core
  *  @description  Adds an underline. Allows themes to override with by redefining it, e.g. to add a text-underline to border-bottom approach */
- 
+
 =link-underline()
+  text-decoration: none
   border-bottom: 1px solid $link_colour
+
+=link-underline-active
+  text-decoration: none
+  border-bottom: 1px solid $link_colour_active

package/source/sass/a_components/30_typography/body_text_anchor_1/_body_text_anchor.sass

@@ -1,6 +1,6 @@
 p > a, p li > a, blockquote > a
   color: $link_colour
   +link-underline()
-  
-  &:hover, &:active
-    color: mix($link_colour,$black,10%)
+
+  &:hover, &.active
+    +link-underline-active

package/source/sass/a_components/30_typography/standardized_text_collection/_anchor.sass

@@ -18,11 +18,4 @@ a
   +transition(all,-6)
 
   &:hover, &:active
-    filter: brightness(0.9)
-
-// Default for links in body paragraphs.
-
-main
-  p > a
-   a
-    +inline-text-link()
+    color: $link_colour_active

package/source/sass/a_components/40_ui/ui_element_base_v002/13_definitions/_form_elements.sass

@@ -101,24 +101,6 @@
   &:hover
     color: $clr4
 
-
-%button-reset
-  @extend %button-base
-  border: none
-  background-color: neutral(60)
-  text-decoration: underline
-  display: inline-flex
-  flex-direction: row
-  align-items: center
-  justify-content: center
-
-  &:hover
-    background-color: $black
-
-  &:active
-    background-color: neutral(80)
-
-
 %button-text
   background-color: $black
   text-decoration: underline
@@ -171,6 +153,7 @@
   min-width: $btn_compactwidth
   text-decoration: none
   justify-content: flex-start
+  +background-icon-left('reset')
 
   &:hover
     color: $btn_reset_hover_color

package/source/sass/a_components/40_ui/ui_element_base_v002/_form_ui.sass

@@ -41,13 +41,25 @@ input[type='email'],
 textarea#edit-message
   @extend %input-text
 
-input[type="search"] // Button
+// Important. Icons do NOT apply to input elements automatically because
+// they are not containers and can’t have :before and :after pseudo-elements.
+// In most contexts you should apply icons to the an input container.
+// Alternatively you can use the work-in-progress +input-button-icon() mixins
+// to see if you can achieve the desired results.
+
+input[type="search"]
+button[type="search"]
   @extend %button-search
 
 input[type="submit"],
-button[type="submit"] //Button
+button[type="submit"]
   @extend %button-submit
 
+input[type="reset"],
+button[type="reset"]
+  @extend %button-reset
+
+
 input[type="search"]::-webkit-search-cancel-button
   -webkit-appearance: none
   display: inline-block
@@ -73,6 +85,11 @@ input[type="checkbox"]
   float: left
   margin: 0
 
+  &:checked
+    +icon('checkmark')
+    background-size: 80%
+    background-position: center
+
   &:hover
     border-color: $ui_hover_border_color
 

package/source/sass/a_components/40_ui/ui_element_base_v002/_standardized_icons/_icon_mixins.sass

@@ -73,7 +73,6 @@
   +background-icon-right($icon_name,$btn_icon_size,'default','default')
 
 
-// Simplified Aliases
 
 =icon($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active')
   height: $size
@@ -82,7 +81,7 @@
   background-position: center
 
   &.active, &:hover
-    +background-icon-base($icon_name,'contain',$initial_state,$active_state)
+    +background-icon-base($icon_name,$size,$initial_state,$active_state)
 
 =icon-with-label($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active', $position: 'left')
   @extend %icon-label
@@ -98,3 +97,23 @@
 =icon-with-label-right($icon_name, $size: $btn_icon_size, $initial_state: 'default', $active_state: 'active', $position: 'left')
   @extend %icon-label
   +background-icon-right($icon_name,$size,$initial_state,$active_state)
+
+
+// Input buttons can’t have pseudo-elements, so the background icon must be directly applied.
+// Experimental. Positioning the icon still needs thinking through to work in all situations
+
+
+=input-button-icon($icon_name, $size: $btn_icon_size, $btn_padding: $ui_padding, $initial_state: 'default', $active_state: 'active', $position: 'left')
+  +background-icon-base($icon_name,$size,$initial_state,$active_state)
+
+  @if $position == 'left'
+    background-position: left calc(#{$btn_padding} - #{$size * 2} ) center
+  @else
+    background-position: left calc(#{$btn_padding} + #{$size * 2} ) center
+
+
+=input-button-icon-left($icon_name, $size: $btn_icon_size, $btn_padding: $ui_padding, $initial_state: 'default', $active_state: 'active')
+  +input-button-icon($icon_name,$size,$btn_padding,$initial_state,$active_state,'left')
+
+=input-button-icon-right($icon_name, $size: $btn_icon_size, $btn_padding: $ui_padding, $initial_state: 'default', $active_state: 'active')
+  +input-button-icon($icon_name,$size,$btn_padding,$initial_state,$active_state,'right')

package/source/sass/a_components/40_ui/ui_element_base_v002/_standardized_icons/_icons.sass

@@ -5,7 +5,8 @@
    @usage Add the “icon” class to a button or container to apply standardized
     label styles. Add one of the following to apply a specific icon as per the
     $icons list below:
-      .icon-[iconname] -- Positions icon to the right
+      .icon-[iconname] -- No positioning, must have container with definite height and width
+      .icon-right-[iconname] -- Positions icon to the right
       .icon-left-[iconname] -- Positions icon to the left
       .icon-reversed-[iconname] -- Uses reversed icon as default state
       .icon-neutral-[iconname] -- Uses neutral icon as default state
@@ -22,7 +23,7 @@
  * Standardized states are "default","active","neutral","reversed"
  */
 
-$icons: ('accordion-expand','accordion-horizontal','arrow','arrow-left','checkmark','close','copy','download','export','external-link','filter','full-screen','grid','hamburger-menu','home','link','list','location','locked','logout','minus','open-access','ordchid-id','orchid-id','plus','reset','search','sort','unlocked','upload','user-access','user','visible')
+$icons: ('accordion-expand','accordion-horizontal','arrow','arrow-left','checkmark','close','copy','download','export','external-link','filter','full-screen','grid','hamburger-menu','home','link','list','location','locked','logout','minus','metadata','open-access','ordchid-id','orchid-id','plus','reset','search','sort','unlocked','upload','user-access','user','visible')
 
 
 %icon-label // Redefined from 30_typography/_definitions for portability. @todo: add definition to core.
@@ -60,17 +61,29 @@ button.icon
   text-transform: uppercase
   @extend %icon
 
-// Set standardized classes. Non-standard icon usage should use icons
+// Set standardized classes.
 @each $name in $icons
   .icon-#{$name}
-    +background-icon-right($name,$btn_icon_size,'default','active')
+    +background-icon-base($name,'contain','default','active')
+    &:after,&.active
+      +background-icon-active($name,'contain','default','active')
   .icon-reversed-#{$name}
-    +background-icon-right($name,$btn_icon_size,'reversed','active')
+    +background-icon-base($name,'contain','reversed','active')
+    &:after,&.active
+      +background-icon-active($name,'contain','reversed','active')
   .icon-neutral-#{$name}
-    +background-icon-right($name,$btn_icon_size,'neutral','default')
+    +background-icon-base($name,'contain','neutral','default')
+    &:after,&.active
+      +background-icon-active($name,'contain','neutral','active')
   .icon-right#{$name}
-    +background-icon-left($name,$btn_icon_size,'default','active')
+    +background-icon-right($name,$btn_icon_size,'default','active')
   .icon-right-reversed-#{$name}
-    +background-icon-left($name,$btn_icon_size,'reversed','active')
+    +background-icon-right($name,$btn_icon_size,'reversed','active')
   .icon-right-neutral-#{$name}
+    +background-icon-right($name,$btn_icon_size,'neutral','default')
+  .icon-left-#{$name}
+    +background-icon-left($name,$btn_icon_size,'default','active')
+  .icon-left-reversed-#{$name}
+    +background-icon-left($name,$btn_icon_size,'reversed','active')
+  .icon-left-neutral-#{$name}
     +background-icon-left($name,$btn_icon_size,'neutral','default')

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-active.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #f4b17a;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-default.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <path d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-neutral.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #80858c;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/40_ui/ui_element_base_v002/supporting_images/svg/icons/metadata-reversed.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 30">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M17.58,14.37c-.2-.19-.52-.17-.71.04l-3.88,4.3v-8.7c0-.28-.22-.5-.5-.5s-.5.22-.5.5v8.7l-3.88-4.3c-.19-.21-.5-.22-.71-.04-.21.19-.22.5-.04.71l4.75,5.26s0,0,0,0c.04.04.08.07.12.09.01,0,.02.02.04.03.06.03.13.04.2.04s.14-.02.2-.04c.01,0,.02-.02.04-.03.05-.03.09-.05.12-.09,0,0,0,0,0,0l4.75-5.26c.19-.21.17-.52-.04-.71Z"/>
+  <path class="cls-1" d="M2.83,26.09v-8.09c0-1.45-.42-2.52-1.55-3.01,1.14-.48,1.55-1.56,1.55-3.01V3.9c0-1.66,1.11-2.87,2.39-2.87h2.14V0h-2.14C3.52,0,1.8,1.55,1.8,3.9v8.09c0,1.28-.59,2.49-1.8,2.49v1.04c1.21,0,1.8,1.21,1.8,2.49v8.09c0,2.35,1.73,3.91,3.42,3.91h2.14v-1.04h-2.14c-1.28,0-2.39-1.24-2.39-2.87Z"/>
+  <path class="cls-1" d="M23.2,11.99V3.9c0-2.35-1.73-3.9-3.42-3.9h-2.14v1.04h2.14c1.28,0,2.39,1.21,2.39,2.87v8.09c0,1.45.42,2.52,1.56,3.01-1.14.48-1.56,1.55-1.56,3.01v8.09c0,1.63-1.11,2.87-2.39,2.87h-2.14v1.04h2.14c1.69,0,3.42-1.55,3.42-3.91v-8.09c0-1.28.59-2.49,1.8-2.49v-1.04c-1.21,0-1.8-1.21-1.8-2.49Z"/>
+</svg>

package/source/sass/a_components/60_site_elements/drupal_general_support/_component_views_bef_search_field.sass

@@ -59,9 +59,115 @@
 
     &[type="submit"].form-submit
       @extend %button-search
+      +input-button-icon-right('search')
 
     &[type="submit"][name="reset"].form-submit
       @extend %button-search-clear
+      +input-button-icon-right('reset')
+
+// Add ons in various contexts
+
+// Hides everything but the search field and remove the search border
+// Used for high-impact search displays
+
+=bef-exposed-form-search-ghost($search_input_selector: '.form-item-search-api-fulltext')
+  .form-item:not(#{$search_input_selector})
+    display: none
+
+  #{$search_input_selector}
+    width: auto
+    flex-grow: 1
+
+    input
+      max-width: unset
+      border: 0 !important
+
+// Hides the search bar. Used when the search input is rendered elsewhere, often by placing the BEF block twice.
+
+=bef-exposed-form-hide-search($search_input_selector: '.form-item-search-api-fulltext')
+
+  #{$search_input_selector}
+    display: none
+
+=bef-exposed-form-compact-right
+  form
+    justify-content: flex-end
+
+  .form-item
+    +bp($desktop)
+      width: auto
+
+  input, select
+    max-width: 250px
+
+  .form-actions
+    margin-left: 0
+/**
+ *  @file _views_exposed_forms.sass
+ *  @category 40_ui
+ *  @theme LOCAL
+ *  @description Support for the exposed forms in Views. Also includes Better Exposed Forms (or will)
+ **/
+
+.views-exposed-form.bef-exposed-form
+  form
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    position: relative
+    background-color: $white
+    width: 100%
+
+    +bp($desktop)
+      flex-wrap: nowrap
+      height: $ui_largeheight
+
+  .form-item
+    flex-grow: 0
+    flex-shrink: 1
+    margin-bottom: $ui_padding
+
+    +bp($tablet)
+      margin-right: $ui_padding
+
+    +bp($desktop)
+      margin-bottom: 0
+
+
+    > *
+      width: 100%
+
+  .form-actions
+    margin-left: auto
+    display: flex
+
+    > *
+      margin-left: $ui_padding
+
+      &:first-child
+        margin-left: 0
+
+  label
+    display: none
+
+
+
+    &.form-item-search-api-fulltext
+      flex-grow: 1
+      flex-shrink: 0
+
+      input
+        width: 100%
+
+  input
+
+    &[type="submit"].form-submit
+      @extend %button-search
+      +input-button-icon-right('search')
+
+    &[type="submit"][name="reset"].form-submit
+      @extend %button-search-clear
+      +input-button-icon-right('reset')
 
 // Add ons in various contexts
 

package/source/sass/a_components/60_site_elements/slide_viewer/templates/_slide_viewer_template_3.sass

@@ -39,6 +39,6 @@
 
   // Adjust slide viewer active area
 
-  $nav_clearance: ($slide_viewer_padding * 2) + $page_marker_width
+  $nav_clearance: calc((#{$slide_viewer_padding} * 2) + #{$page_marker_width})
 
   --slide-viewer-nav-clearance: 0 0 #{$nav_clearance} 0

package/source/sass/a_components/60_site_elements/slide_viewer/templates/_slide_viewer_template_4.sass

@@ -39,6 +39,6 @@
 
   // Adjust slide viewer active area
 
-  $nav_clearance: ($slide_viewer_padding * 2) + $page_marker_width
+  $nav_clearance: calc((#{$slide_viewer_padding} * 2) + #{$page_marker_width})
 
   --slide-viewer-nav-clearance: #{$nav_clearance} 0 0 0