stop14-themesystem-legacy 1.16.0 → 2.0.0

package/package.json

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

package/scaffolding/default/_00_main_configuration.yml

@@ -145,6 +145,8 @@ ui_minheight: $ui_element_height
 ui_maxheight: 60px
 ui_compactheight: 40px
 ui_largeheight: 80px
+ui_max_text_width: 500px
+ui_element_spacing: "rv($mobile_edge_padding_factor)"
 ui_border_radius: 8px
 ui_border_width: 1px
 ui_border_color: neutral(40)

package/scaffolding/drupal/_00_main_configuration.yml

@@ -144,6 +144,8 @@ ui_minheight: $ui_element_height
 ui_maxheight: 60px
 ui_compactheight: 40px
 ui_largeheight: 80px
+ui_max_text_width: 500px
+ui_element_spacing: "rv($mobile_edge_padding_factor)"
 ui_border_radius: 8px
 ui_border_width: 1px
 ui_border_color: neutral(40)

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

@@ -5,19 +5,19 @@
 
 @import 12_mixins/_index
 @import _body
-@import _sidebar_left
-@import _sidebar_right
+@import _main_content
+@import _page_footer
+@import _paragraph_relationships
 @import _section_above_content
 @import _section_header
-@import _section_splash
-@import _section_title
+@import _section_main_alt
+@import _section_overlay
 @import _section_primary
+@import _section_quaternary
 @import _section_secondary
+@import _section_splash
 @import _section_tertiary
-@import _section_quaternary
-@import _section_overlay
-@import _main_content
-@import _section_main_alt
-@import _page_footer
+@import _section_title
+@import _sidebar_left
+@import _sidebar_right
 @import _taxonomy_term_layout
-@import _paragraph_relationships

package/scaffolding/omeka/_00_main_configuration.yml

@@ -142,6 +142,8 @@ ui_minheight: $ui_element_height
 ui_maxheight: 60px
 ui_compactheight: 25px
 ui_largeheight: 80px
+ui_max_text_width: 500px
+ui_element_spacing: "rv($mobile_edge_padding_factor)"
 ui_border_radius: 5px
 ui_border_width: 1px
 ui_border_color: neutral(40)

package/source/sass/a_components/20_layout/splash_content/_splash_content_container.sass

@@ -34,7 +34,7 @@
         height: auto
       @else
         height: calc(#{$splash_height_desktop}  - #{$masthead_height} - #{$masthead_clearance})
-      min-height: 750px
+      min-height: $min_splash_height
 
   @at-root #{$admin-toolbar-selector} #{$splash-section-selector} #{$container-selector}
     @if $splash_height_mobile == 'auto'

package/source/sass/a_components/40_ui/ui_element_base/_general_ui.sass

@@ -7,7 +7,7 @@
 // Note: applying styles to <button> elements often create problems with third-party modules and admin interfaces.
 // It is advised that you add a button class to button elements to avoid conflicts
 
-.button
+.button:not(.trigger,.MuiButtonBase-root,.icon)
   @extend %button
 
   &.compact

package/source/sass/a_components/40_ui/ui_element_base_v002/12_mixins/_index.sass

@@ -0,0 +1,5 @@
+/**
+ *  @file _index.sass
+ *  @description  Loads all sass files or subdirectory indices in its directory. */
+
+@import _ui_patterns

package/source/sass/a_components/40_ui/ui_element_base_v002/12_mixins/_ui_patterns.sass

@@ -0,0 +1,39 @@
+/*
+   @file 40_ui/_standardized_icons/_icon_mixins.sass
+   @theme LOCAL
+   @description  Mixins to support icon components. */
+
+
+$ui_form_mobile_clearance: rv($mobile_edge_padding_factor)
+$ui_form_clearance: rv($edge_padding_factor)
+
+=ui-element-width-control()
+  max-width: calc(100vw - #{$ui_form_mobile_clearance} * 2) // Form elements can only be as wide as the viewport less the edge padding.
+
+  +bp($stack)
+    max-width: calc(100vw - #{$ui_form_clearance} * 2)
+
+
+=ui-space-element()
+  margin-left: $ui_element_spacing
+
+  &:first-child
+    margin-left: 0
+
+=one-line-form($subgroup: '#edit_actions')
+  display: flex
+  flex-direction: column
+
+  +bp($tablet)
+    flex-direction: row
+
+  > *
+    margin-bottom: rv($mobile_edge_padding_factor)
+
+    +bp($tablet)
+      margin-bottom: 0
+      +ui-space-element()
+
+  #{$subgroup}
+    display: flex
+    align-items: center

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

@@ -0,0 +1,279 @@
+/**
+ *  @file _general_ui_elements.sass
+ *  @category 40_ui
+ *  @theme LOCAL
+ *  @description Define various user interface elements.
+ *
+ **/
+
+/** HERE ARE SOME DEFINITIONS THAT MUST BE SUPPORTED
+  *
+  * TYPES:
+  * standard|Standard
+  * link|Internal Link
+  * outline|Outline
+  * outline.reversed|Reversed outline
+  * cta|Call to action
+  * feature-cta|Feature CTA
+  * ghost|Ghost
+  * emphatic-ghost|Emphatic ghost
+  * spooky|Spooky (inactive only)
+
+  *
+  * SIZING:
+  * compact|Size: compact
+  * large|Size: large
+  *
+  * OVERLAYS
+  * overlay-dark|Overlay: dark background
+  * overlay-light|Overlay: light background
+  * overlay-colour|Overlay: yellow background
+  *
+  */
+
+%button-base
+  -webkit-appearance: none
+  -moz-appearance: none
+  appearance: none
+  font-size: $btn_fontsize
+  font-family: $headingfont
+  font-weight: $normal
+  padding: $btn_padding
+  height: $ui_minheight
+  min-width: $btn_minwidth
+  border: $btn_border_width solid $btn_border_color
+  border-radius: $ui_border_radius
+  text-align: center
+  text-transform: uppercase
+  width: fit-content
+  white-space: nowrap
+  background-color: $btn_bg_color
+  color: $btn_color
+
+%button
+  @extend %button-base
+  text-decoration: underline
+  display: inline-flex
+  flex-direction: row
+  align-items: center
+  justify-content: center
+  cursor: pointer
+
+  &:hover
+    color: $btn_hover_color
+    background-color: $btn_hover_bg_color
+    border-color: $btn_border_color
+
+  a
+    border: 0
+    display: block
+    height: fit-content
+    width: 100%
+
+    &:hover
+      border: 0
+
+%button-reverse
+  @extend %button
+  border: solid $white $btn_border_width
+
+
+%button-feature-cta
+  @extend %button
+  border: $btn_border_width solid $black
+  color: $black
+  background-color: transparent
+  position: relative
+
+  a
+    color: $black !important
+
+%button-ghost
+  @extend %button-base
+  color: $black
+  border: none
+  background-color: transparent
+  text-decoration: underline
+  display: inline-flex
+  flex-direction: row
+  align-items: center
+  justify-content: center
+  @extend %underscore
+
+  &: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
+  display: inline-flex
+  flex-direction: row
+  align-items: center
+  justify-content: center
+  border: none
+
+%button-standard
+  @extend %button
+  color: $white
+  text-decoration: none
+
+  &:hover
+    color: $black
+    background-color: $clr2
+    border: 0
+
+%button-link
+  @extend %button
+  color: $white
+
+
+%button-outline
+  @extend %button
+  background-color: transparent
+  font-style: normal
+  text-decoration: none
+
+  &:hover
+    border: $btn_border_width solid $clr2
+
+%button-compact
+  height: $ui_compactheight
+  min-width: $btn_compactwidth !important
+  font-size: $btn_compact_fontsize
+
+%button-large
+  height: $ui_largeheight
+  min-width: $btn_largewidth
+
+%button-reset
+  @extend %button
+  border-width: $btn_reset_border_width
+  border-color: $btn_reset_border_color
+  font-style: normal
+  background-color: $btn_reset_bg_color
+  color: $btn_reset_color
+  min-width: $btn_compactwidth
+  text-decoration: none
+  justify-content: flex-start
+
+  &:hover
+    color: $btn_reset_hover_color
+    background-color: $btn_reset_hover_bg_color
+    border-color: $btn_reset_hover_border_color
+
+%button-more
+  color: $black
+  font-style: normal
+  text-decoration: none
+  border: 0
+  padding: 0 45px
+  min-width: 0 !important
+  display: inline-flex
+  flex-direction: row
+  justify-content: center
+  align-items: center
+  height: 50px
+  +more-arrow
+
+  a
+    color: inherit
+    font-style: inherit
+    border-bottom: 2px solid $black
+    text-decoration: inherit
+
+    &:hover
+      border-bottom: 2px solid $black
+
+%button-submit
+  @extend %button
+  +background-icon-default-left('checkmark')
+  border-width: $btn_submit_border_width
+  border-color: $btn_submit_border_color
+  font-style: normal
+  background-color: $btn_submit_bg_color
+  color: $btn_submit_color
+  text-decoration: none
+
+  &:hover
+    color: $btn_submit_hover_color
+    background-color: $btn_submit_hover_bg_color
+    border-color: $btn_submit_hover_border_color
+    filter: saturate(120%)
+
+%button-cta
+  border-width: $btn_submit_border_width
+  border-color: $btn_submit_border_color
+  font-style: normal
+  background-color: $btn_submit_bg_color
+  color: $btn_submit_color
+  text-decoration: none
+  +background-icon-default-left('arrow')
+
+
+  &:hover
+    color: $btn_submit_hover_color
+    background-color: $btn_submit_hover_bg_color
+    border-color: $btn_submit_hover_border_color
+    filter: saturate(120%)
+
+%button-search
+  @extend %button-ghost
+  font-size: clamped(-3,-2)
+  color: $btn_search_color
+  padding-right: calc(#{$ui_padding} + #{$btn_icon_size})
+  min-width: $ui_minheight !important
+  height: $ui_minheight !important
+  text-decoration: none
+  justify-content: flex-start
+  align-items: center
+  +background-icon-base('search',$btn_icon_size,'neutral','default','right')
+  background-color: $btn_search_bg_color
+
+  &:hover
+    color: $btn_search_hover_color
+    +background-icon-active('search',$btn_icon_size,'neutral','default','right')
+    background-color: $btn_search_hover_bg_color
+
+%button-search-clear
+  @extend %button-search
+  +background-icon-base('reset',$btn_icon_size,'neutral','default','right')
+
+  &:hover
+    color: $btn_search_hover_color
+    +background-icon-active('reset',$btn_icon_size,'neutral','default','right')
+    background-color: $btn_search_hover_bg_color
+
+%input-text
+  font-family: $basefont
+  font-weight: $normal
+  font-size: $btn_fontsize
+  padding: 0 $ui_padding
+  height: $ui_minheight
+  border-radius: $ui_border_radius
+  border: 1px solid $ui_border_color
+  max-width: $ui_max_text_width
+  background-color: $white
+
+  +reversed
+    background-color: $white
+
+  &:hover
+    border-color: $ui_hover_border_color

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

@@ -0,0 +1,6 @@
+/**
+ *  @file _index.sass
+ *  @description  Loads all sass files or subdirectory indices in its directory. */
+
+@import _form_elements
+@import _ui_pattern_defs

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

@@ -0,0 +1,5 @@
+%icon-label
+  font-size: clamped(-3,-2)
+  text-transform: uppercase
+  text-decoration: none
+  border-bottom: 0

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

@@ -0,0 +1,137 @@
+/**
+ *  @file _form_elements.sass
+ *  @category 40_ui
+ *  @theme LOCAL
+ *  @description Define various form elements.
+ *
+ **/
+
+
+/** HERE ARE SOME CLASSES THAT MUST BE SUPPORTED
+  *
+  * TYPES:
+  * standard|Standard
+  * link|Internal Link
+  * outline|Outline
+  * cta|Call to action
+  * feature-cta|Feature CTA
+  * ghost|Ghost
+  * emphatic-ghost|Emphatic ghost
+  *
+  * SIZING:
+  * compact|Size: compact
+  * large|Size: large
+  *
+  * OVERLAYS
+  * overlay-dark|Overlay: dark background
+  * overlay-light|Overlay: light background
+  * overlay-colour|Overlay: yellow background
+  *
+  */
+// “trigger” class used by Drupal for its contextual menus. “MuiButtonBase used for Mirador.
+button:not(.trigger,.MuiButtonBase-root,.icon)
+  @extend %button
+
+input:focus
+  outline: none !important
+  border-color: $clr2
+
+input[type='text'],
+input[type='email'],
+textarea#edit-message
+  @extend %input-text
+
+input[type="search"] // Button
+  @extend %button-search
+
+input[type="submit"] //Button
+  @extend %button-submit
+
+input[type="search"]::-webkit-search-cancel-button
+  -webkit-appearance: none
+  display: inline-block
+  width: 20px
+  height: 20px
+  margin-left: 10px
+  +background-icon-left('reset')
+
+input[type="checkbox"],
+input[type="radio"]
+  padding: unset
+  cursor: pointer
+
+input[type="checkbox"]
+  appearance: none
+  border-radius: unset
+  border: 1px solid $ui_border_color
+  height: $ui_checkbox_height
+  width: $ui_checkbox_height
+  background-color: transparent
+  display: inline-block
+  vertical-align: middle
+  float: left
+  margin: 0
+
+  &:hover
+    border-color: $ui_hover_border_color
+
+  & + label
+    display: block
+    vertical-align: middle
+    padding: calc((#{$ui_checkbox_height} - #{rv(0)}) * 0.5) 0 0 calc(#{$ui_checkbox_height} + #{rv(0)}) // Align to to middle of checkbox, left to width of checkbox plus a gap. Top calculates the height of the checkboxes, less the size of the label, divided by two
+    line-height: $ui_checkbox_height
+    font-weight: $normal
+    margin: 0
+
+input[type="radio"]
+  appearance: none
+  border: 1px solid neutral(20)
+  border-radius: 50%
+  height: $ui_checkbox_height
+  width: $ui_checkbox_height
+  background-color: white
+  display: inline-block
+  vertical-align: middle
+
+  &:hover,
+  &:checked
+    box-shadow: inset 0 0 0 3px white !important
+    background-color: neutral(20)
+
+// Select2 handles pulldowns via js/selectStylesSupport
+// Currently set to use <select> element values to determine sizing
+
+select
+  width: $ui_select_width
+  min-width: $ui_select_min_width
+  max-width: $ui_select_max_width
+  +background-icon-right('accordion-expand')
+
+  &:hover
+    +background-icon-active('accordion-expand')
+    +fadeInDown($heartbeat*2,$heartbeat)
+
+fieldset
+  border: 1px solid neutral(20)
+  margin-bottom: rv($block_spacing)
+
+legend
+  padding: 0 rv(-2)
+  color: neutral(80)
+  +font-size(0)
+
+label
+  @extend %value-label
+  margin-bottom: rv(-4)
+
+  &.option
+    font-family: $basefont
+    font-weight: $normal
+
+input.js-form-type-search + input.js-form-submit
+  display: inline-flex
+  +ui-space-element()
+
+.webform-element-description
+  font-size: clamped(0,1)
+  font-weight: $semibold

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

@@ -0,0 +1,42 @@
+
+/* =======================
+ * General UI and Button Definitions
+ * ======================= */
+
+
+// Note: applying styles to <button> elements often create problems with third-party modules and admin interfaces.
+// It is advised that you add a button class to button elements to avoid conflicts
+
+.button:not(.trigger,.MuiButtonBase-root,.icon)
+  @extend %button
+
+  &.compact
+    @extend %button-compact
+
+  &.large
+    @extend %button-large
+
+  &.standard
+    @extend %button-standard
+
+  &.link
+    @extend %button-link
+
+  &.outline
+    @extend %button-outline
+
+  &.cta
+    @extend %button-cta
+
+  &.feature-cta
+    @extend %button-feature-cta
+
+  &.more
+    @extend %button-more
+
+  &.search-submit,&[type='submit'].search-submit
+    @extend %button-search-submit
+
+button
+  &.search-submit,&[type='submit'].search-submit
+    @extend %button-search-submit

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

@@ -0,0 +1,11 @@
+/*
+   @file _index.sass
+   @component ui_element_base
+   @description  Loads all sass files or subdirectory indices in its directory. */
+
+@import 12_mixins/_index
+@import 13_definitions/_index
+@import _standardized_icons/_index
+@import _ui_library_support/_index
+@import _general_ui
+@import _form_ui