@concretecms/bedrock 1.5.6 → 1.6.0

package/.idea/vcs.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+    <mapping directory="" vcs="Git" />
   </component>
 </project>

package/assets/cms/components/form/ConcreteFileDirectoryInput.vue

@@ -2,16 +2,18 @@
     <div>
         <div class="ccm-directory-selector-container">
             <div class="form-group">
-                <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{inputLabel}}</label>
+                <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{ inputLabel }}</label>
                 <div v-if="showAddDirectoryButton" class="input-group">
-                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
+                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID"
+                           ref="directoryInput" :disabled="disabled"/>
                     <button type="button"
                             :class="{'btn': true, 'btn-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
                             @click="toggleDirectoryInput" :disabled="disabled">
                         {{ i18n.createNewFolder }}
                     </button>
                 </div>
-                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
+                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID"
+                       ref="directoryInput" :disabled="disabled"/>
             </div>
         </div>
         <div v-if="showAddDirectoryButton" v-show="showAddDirectoryInput" class="ccm-new-directory-name-container">
@@ -113,6 +115,7 @@ export default {
             this.selectedDirectoryID = this.directoryId
         }
 
+        var my = this
         this.selectMenu = new TomSelect(this.$refs.directoryInput, {
             maxOptions: 200,
             maxItems: 1,
@@ -122,15 +125,20 @@ export default {
             searchField: 'directoryName',
             render: {
                 option: function (data, escape) {
-                    return `<div class="level-${data.directoryLevel}"><i class="fa fa-folder"></i> ${data.directoryName}</div>`
+                    return `<div class="level-${data.directoryLevel}"><i class="fa fa-folder"></i> ${my.sanitizeDirectoryName(data.directoryName)} </div>`
                 },
                 item: function (item, escape) {
-                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${item.directoryName}</div>`
+                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${my.sanitizeDirectoryName(item.directoryName)} </div>`
                 }
             }
         })
     },
     methods: {
+        sanitizeDirectoryName(directoryName) {
+            const div = document.createElement('div')
+            div.textContent = directoryName
+            return div.innerHTML
+        },
         createDirectory() {
             const me = this
             if (!me.showAddDirectoryInput || me.disabled) {

package/assets/cms/js/dark-mode.js

@@ -0,0 +1,10 @@
+export function isDarkMode() {
+    const $toolbarWrapper = $('#ccm-toolbar').parent()
+    if ($toolbarWrapper.attr('data-bs-theme') === 'dark') {
+        return true
+    } else if ($toolbarWrapper.attr('data-bs-theme-select') === 'auto') {
+        const scheme = global.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+        return scheme === 'dark'
+    }
+    return false
+}

package/assets/cms/js/panels.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
 /* global _, ccmi18n, Concrete, ConcreteEvent, CCM_CID, bootstrap */
 
+import { isDarkMode } from './dark-mode'
 var html = $('html')
 var baseClasses = $('div.ccm-page').attr('class')
 
@@ -267,7 +268,7 @@ function ConcretePanel(options) {
         var $detail = $('<div />', {
             id: detailID,
             class: 'ccm-panel-detail'
-        }).appendTo(document.body)
+        }).appendTo(ConcretePanelManager.getPanelPortal())
 
         var $content = $('<div />', {
             class: 'ccm-ui ccm-panel-detail-content'
@@ -565,7 +566,7 @@ var ConcretePanelManager = (function () {
                 $('<div />', {
                     id: panel.getDOMID(),
                     class: 'ccm-panel ' + panel.getPositionClass()
-                }).appendTo($(document.body))
+                }).appendTo(ConcretePanelManager.getPanelPortal())
 
                 $('<div />', {
                     class: 'ccm-panel-content-wrapper ccm-ui'
@@ -579,6 +580,26 @@ var ConcretePanelManager = (function () {
                     return panels[i]
                 }
             }
+        },
+
+        getPanelPortal: function () {
+            const $panelPortal = $('#ccm-panel-portal')
+            if ($panelPortal.length === 0) {
+                const $panelPortalOuter = $('<div />')
+                if (isDarkMode()) {
+                    $panelPortalOuter.attr('data-bs-theme', 'dark')
+                } else {
+                    $panelPortalOuter.attr('data-bs-theme', 'light')
+                }
+                const $panelPortal = $('<div />')
+                    .attr('id', 'ccm-panel-portal')
+                    .attr('class', 'ccm-ui')
+                $panelPortal.prependTo($panelPortalOuter)
+                $panelPortalOuter.prependTo(document.body)
+                return $('#ccm-panel-portal') // I think we need to do this due to a jQuery cache?
+            } else {
+                return $panelPortal
+            }
         }
 
     }

package/assets/cms/js/toolbar.js

@@ -2,7 +2,9 @@
 /* global CCM_DISPATCHER_FILENAME, ConcreteModal, ConcreteEvent, ConcreteHelpGuideManager, ConcretePanelManager, bootstrap */
 
 /* Basic toolbar class */
-;(function(global, $) {
+import { isDarkMode } from './dark-mode'
+
+;(function(global, $, isDarkMode) {
     'use strict'
 
     var $toolbar = $('#ccm-toolbar')
@@ -79,7 +81,19 @@
 
     function setupTooltips() {
         if ($('#ccm-tooltip-holder').length == 0) {
-            $('<div />').attr('id', 'ccm-tooltip-holder').attr('class', 'ccm-ui').prependTo(document.body)
+            // we need the holder and holder inner because dark mode requires that .ccm-ui come INSIDE
+            // data-bs-theme.
+            const $tooltipHolder = $('<div />')
+            if (isDarkMode()) {
+                $tooltipHolder.attr('data-bs-theme', 'dark')
+            } else {
+                $tooltipHolder.attr('data-bs-theme', 'light')
+            }
+            const $tooltipHolderInner = $('<div />')
+                .attr('id', 'ccm-tooltip-holder')
+                .attr('class', 'ccm-ui')
+            $tooltipHolderInner.prependTo($tooltipHolder)
+            $tooltipHolder.prependTo(document.body)
         }
 
         const tooltipTriggerList = [].slice.call(document.querySelectorAll('.launch-tooltip'))
@@ -149,6 +163,13 @@
         })
     }
 
+    function setupAutoDarkMode() {
+        if ($('#ccm-toolbar').parent().attr('data-bs-theme-select') === 'auto') {
+            const scheme = global.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+            $('#ccm-toolbar').parent().attr('data-bs-theme', scheme)
+        }
+    }
+
     function setupIntelligentSearch() {
         $searchInput.bind('keydown.ccm-intelligent-search', function(e) {
             // jshint -W107
@@ -341,6 +362,7 @@
             if ($toolbar.length > 0) {
                 $toolbar.find('.dialog-launch').dialog()
 
+                setupAutoDarkMode()
                 setupIntelligentSearch()
                 setupPanels()
                 setupTooltips()
@@ -375,4 +397,4 @@
             }
         }
     }
-})(window, jQuery); // eslint-disable-line semi
+})(window, jQuery, isDarkMode); // eslint-disable-line semi

package/assets/cms/js/tree.js

@@ -138,7 +138,7 @@ ConcreteTree.prototype = {
             },
             select: function (select, data) {
                 if (options.chooseNodeInForm) {
-                    let keys = [];
+                    let keys = []
                     if (selectMode == 1) {
                         keys = [data.node.key]
                         my.deselectNodes(data.tree.getRootNode(), data.node)

package/assets/cms/scss/_forms.scss

@@ -10,6 +10,26 @@
     margin-bottom: $form-group-margin-bottom;
   }
 
+  .form-label {
+    color: $gray-700;
+  }
+}
+
+@include color-mode(dark) {
+  .ccm-ui {
+    .form-control,
+    .form-select {
+      color: $light-blue;
+
+      &:focus {
+        color: $light-blue;
+      }
+    }
+
+    .form-label {
+      color: $gray-300;
+    }
+  }
 }
 
 .form-control {

package/assets/cms/scss/_help.scss

@@ -137,6 +137,7 @@ div#ccm-toolbar {
 
   .help-block {
     background-color: $light-blue;
+    border-radius: 2px;
     color: $gray-700;
     display: block;
     font-style: italic;
@@ -145,6 +146,15 @@ div#ccm-toolbar {
   }
 }
 
+@include color-mode(dark) {
+  .ccm-ui {
+    .help-block {
+      background-color: $dark-blue;
+      color: $gray-200;
+    }
+  }
+}
+
 .ccm-help-media {
   display: flex;
   margin-top: 0.5rem;

package/assets/cms/scss/_intelligent-search.scss

@@ -1,11 +1,12 @@
 /* stylelint-disable property-no-vendor-prefix, at-rule-no-vendor-prefix, selector-max-id */
 div#ccm-intelligent-search-results {
   background-color: #fff;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
+  border-color: #ccc;
+  border-left: 1px solid;
+  border-right: 1px solid;
   display: none;
   padding: 0 0 0 40px;
   position: fixed;
@@ -143,12 +144,12 @@ div#ccm-intelligent-search-results {
     }
 
     a:hover {
-      color: #369;
+      color: #09f;
       text-decoration: none;
     }
 
     a.ccm-intelligent-search-result-selected {
-      color: #369;
+      color: #09f;
     }
   }
 }
@@ -189,3 +190,10 @@ div#ccm-intelligent-search-results {
     transform: translateX(1.5em);
   }
 }
+
+@include color-mode(dark) {
+  div#ccm-intelligent-search-results {
+    background-color: $gray-900;
+    border-color: $gray-800;
+  }
+}

package/assets/cms/scss/_item-select-list.scss

@@ -14,7 +14,7 @@ ul.item-select-list > li > a,
 ul.item-select-list > li > span {
   background-repeat: no-repeat;
   border: 1px solid transparent;
-  color: $body-color;
+  color: var(--bs-body-color);
   display: block;
   padding: 8px;
   text-decoration: none;

package/assets/cms/scss/_select-combo-box.scss

@@ -5,6 +5,17 @@
  */
 @import '~tom-select/src/scss/tom-select.bootstrap5';
 
+/*
+ * Reset color to better support dark mode
+ */
+.ccm-ui {
+  .ts-dropdown,
+  .ts-control,
+  .ts-control input {
+    color: inherit;
+  }
+}
+
 /**
  * Customize TomSelect drop shadow. Wish we could do this with some variables but the box shadow is not
  * exposed as a variable

package/assets/cms/scss/_sitemap.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-max-compound-selectors */
+
 .ccm-ui {
   #fancytree-drop-marker {
     &.fancytree-drop-over {
@@ -214,3 +216,33 @@
     }
   }
 }
+
+@include color-mode(dark) {
+  .ccm-ui {
+    .ccm-sitemap-tree {
+      ul.ui-fancytree {
+        li[role=treeitem] {
+          span.fancytree-expander,
+          span.icon-folder,
+          span.icon-home,
+          span.icon-page {
+            filter: invert(1);
+          }
+
+          span.fancytree-active {
+            span.fancytree-expander,
+            span.icon-folder,
+            span.icon-home,
+            span.icon-page {
+              filter: none;
+            }
+          }
+
+          span.fancytree-title {
+            color: $sitemap-normal-item-text-color-dark;
+          }
+        }
+      }
+    }
+  }
+}

package/assets/cms/scss/_tables.scss

@@ -9,6 +9,7 @@ div.ccm-ui {
     thead {
       th {
         border-bottom-width: 1px;
+        color: $gray-500;
         font-size: 0.75rem;
 
         > a {
@@ -154,3 +155,51 @@ div.ccm-ui {
     }
   }
 }
+
+@include color-mode(dark) {
+  .ccm-ui {
+    .ccm-search-results-table {
+      thead {
+        th {
+          > a {
+            color: $gray-300;
+
+            &:hover {
+              color: white;
+            }
+          }
+
+          &.ccm-results-list-active-sort-asc,
+          &.ccm-results-list-active-sort-desc {
+            a {
+              &:hover {
+                color: white;
+              }
+            }
+          }
+        }
+      }
+
+      .ccm-search-results-em,
+      .ccm-search-results-name {
+        color: $gray-200;
+      }
+
+      tr.ccm-search-results-hoverable:hover,
+      tr.ccm-menu-item-active,
+      tr.ccm-parent-menu-item-active,
+      tr.ccm-search-select-hover,
+      tr.ccm-parent-menu-item-hover,
+      tr.ccm-search-select-selected {
+        td {
+          background-color: $gray-700;
+          color: $gray-100;
+
+          &.ccm-search-results-name {
+            color: $gray-100;
+          }
+        }
+      }
+    }
+  }
+}

package/assets/cms/scss/_toolbar.scss

@@ -7,10 +7,11 @@ div#ccm-toolbar {
   position: fixed;
   top: 0;
   width: 100%;
+  z-index: $index-level-main-bar; /* over the top of the highlighter, which is 1000 */
+
   @media only screen and (max-width: 768px) {
     width: 100vw;
   }
-  z-index: $index-level-main-bar; /* over the top of the highlighter, which is 1000 */
 
   .ccm-toolbar-accessibility-title {
     display: none;
@@ -59,11 +60,11 @@ div#ccm-toolbar {
         border-right: 1px solid $gray-200;
         box-sizing: border-box;
         color: $gray-600;
-
         display: flex;
         height: 47px;
         position: relative;
         text-decoration: none;
+        transition: $transition-base;
         width: 58px;
 
         i,
@@ -154,6 +155,7 @@ div#ccm-toolbar {
         img {
           height: 24px;
         }
+
       }
     }
 
@@ -302,6 +304,64 @@ div#ccm-toolbar {
 
 }
 
+@include color-mode(dark) {
+  div#ccm-toolbar {
+    background-color: $gray-800;
+    border-bottom: 1px solid $gray-700;
+
+    > ul {
+      > li {
+        > a {
+          border-right: 1px solid $gray-700;
+          color: $gray-200;
+
+          svg {
+            fill: $gray-200;
+          }
+
+          &:hover {
+            background-color: $gray-900;
+            color: $gray-200;
+          }
+        }
+      }
+
+      li.ccm-logo {
+        span {
+          border-right: 1px solid $gray-700;
+        }
+      }
+
+      li.ccm-toolbar-search {
+        background-color: black;
+        border-left: 1px solid $gray-700;
+        color: $gray-200;
+
+        input {
+          background-color: black;
+          border-right: 1px solid $gray-700;
+          color: $gray-200;
+        }
+
+        svg {
+          fill: $gray-200;
+        }
+      }
+
+      li.ccm-toolbar-last-left-child {
+        border-right: 1px solid $gray-700;
+      }
+    }
+
+    ul {
+      li {
+        div.ccm-menu-item-site-list-container {
+          border-right: 1px solid $gray-700;
+        }
+      }
+    }
+  }
+}
 
 /* Disabling the toolbar */
 div#ccm-toolbar-disabled {

package/assets/cms/scss/_transitions.scss

@@ -1,3 +1,5 @@
+$transition-base: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
 /**
  * Transitions used by our components.
  */

package/assets/cms/scss/_variables.scss

@@ -68,7 +68,6 @@ $input-padding-y: 0.5rem;
 $label-margin-bottom: 0.4rem;
 $input-box-shadow: inset 0 0;
 $custom-select-box-shadow: inset 0 0;
-$form-label-color: $gray-700;
 $form-label-font-weight: 600;
 
 /* cards */
@@ -157,7 +156,7 @@ $link-decoration: none;
 /* panels */
 $panel-background-color: #fafbfc;
 $panel-background-color-accent: #e7e8eb;
-$panel-menu-item-color: $gray-600;
+$panel-menu-item-color: $gray-700;
 $panel-menu-item-hover-bg-color: #d2eafa;
 $panel-menu-item-hover-color: #222;
 $panel-menu-item-parent-item-active-font-weight: 600;
@@ -166,6 +165,11 @@ $panel-menu-item-active-bg-color: $blue;
 $panel-menu-item-active-color: white;
 $panel-menu-item-active-font-weight: 600;
 $panel-menu-item-transition: all 0.1s ease-in;
+$panel-background-color-dark: #040300;
+$panel-menu-item-color-dark: $gray-400;
+$panel-menu-item-hover-bg-color-dark: #424f5b;
+$panel-menu-item-hover-color-dark: #bbb;
+$panel-background-color-accent-dark: #1c1c1c;
 
 /* colors */
 $table-row-highlight-bg: #d2eafa;
@@ -344,6 +348,7 @@ $sitemap-container-background-color: transparent;
 $sitemap-normal-item-border-color: transparent;
 $sitemap-normal-item-background-color: transparent;
 $sitemap-normal-item-text-color: $dark;
+$sitemap-normal-item-text-color-dark: $gray-200;
 $sitemap-active-item-border-color: transparent;
 $sitemap-active-item-background-color: $blue;
 $sitemap-active-item-text-color: #fff;

package/assets/cms/scss/bootstrap/_root-modified.scss

@@ -128,3 +128,59 @@
   --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
   // scss-docs-end root-form-validation-variables
 }
+
+[data-bs-theme='dark'] {
+  .ccm-ui {
+    color-scheme: dark;
+    // scss-docs-start root-dark-mode-vars
+    --#{$prefix}body-color: #{$body-color-dark};
+    --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+    --#{$prefix}body-bg: #{$body-bg-dark};
+    --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+    --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+    --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+    --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+    --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+    --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+    --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+    --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+    --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+    --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+    --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+    @each $color, $value in $theme-colors-text-dark {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-bg-subtle-dark {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+
+    @each $color, $value in $theme-colors-border-subtle-dark {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+
+    --#{$prefix}heading-color: #{$headings-color-dark};
+
+    --#{$prefix}link-color: #{$link-color-dark};
+    --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+    --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+    --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+    --#{$prefix}code-color: #{$code-color-dark};
+    --#{$prefix}highlight-color: #{$mark-color-dark};
+    --#{$prefix}highlight-bg: #{$mark-bg-dark};
+
+    --#{$prefix}border-color: #{$border-color-dark};
+    --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+
+    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    // scss-docs-end root-dark-mode-vars
+  }
+}

package/assets/cms/scss/jquery-ui/_theme.scss

@@ -33,28 +33,28 @@
 }
 
 .ui-widget.ui-widget-content {
-  border: 1px solid #c5c5c5/*{borderColorDefault}*/;
+  border: 1px solid var(--bs-secondary-bg);
 }
 
 .ui-widget-content {
-  background: #fff;
-  border: 1px solid #ddd;
-  color: #333;
+  background: var(--bs-body-bg);
+  border: 1px solid var(--bs-secondary-bg);
+  color: var(--bs-body-color);
 }
 
 .ui-widget-content a {
-  color: #333;
+  color: var(--bs-body-color);
 }
 
 .ui-widget-header {
   background: #e9e9e9/*{bgColorHeader}*/ /*{bgImgUrlHeader}*/ /*{bgHeaderXPos}*/ /*{bgHeaderYPos}*/ /*{bgHeaderRepeat}*/;
   border: 1px solid #ddd;
-  color: #333;
+  color: var(--bs-body-color);
   font-weight: bold;
 }
 
 .ui-widget-header a {
-  color: #333;
+  color: var(--bs-body-color);
 }
 
 /* Interaction states

package/assets/cms/scss/mixins/_item-select-list-hover.scss

@@ -1,7 +1,7 @@
 @mixin item-select-list-hover() {
-  background-color: #e7e7e7;
+  background-color: var(--bs-secondary-bg);
   border-radius: 4px;
-  color: $body-color;
+  color: var(--bs-body-color);
   text-decoration: none;
   transition: background-color 0.1s linear;
 }

package/assets/cms/scss/panels/_shared.scss

@@ -19,7 +19,9 @@ div.ccm-panel {
   user-select: none;
   width: 320px;
   z-index: $index-level-panel; // has to come above the detail actions wrapper
-  /* overflow: hidden; */ /* This causes problems with floating palettes inside the panels. So let's only apply this during transitions */
+  /* overflow: hidden; */
+  /* This causes problems with floating palettes inside the panels. So let's only apply this during transitions */
+
   div.ccm-panel-close {
     position: absolute;
     right: 17px;
@@ -28,6 +30,12 @@ div.ccm-panel {
   }
 }
 
+@include color-mode(dark) {
+  div.ccm-panel {
+    background-color: $panel-background-color-dark;
+  }
+}
+
 div#ccm-panel-overlay {
   background: transparent;
   display: none;
@@ -44,6 +52,12 @@ div#ccm-panel-overlay.ccm-panel-translucent {
   background-color: rgba(255, 255, 255, 0.7);
 }
 
+@include color-mode(dark) {
+  div#ccm-panel-overlay.ccm-panel-translucent {
+    background-color: rgba(33, 33, 33, 0.7);
+  }
+}
+
 html.ccm-panel-ready {
   div.ccm-page {
     transition: transform cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
@@ -235,10 +249,10 @@ div.ccm-panel-content {
         text-decoration: none;
         transition: $panel-menu-item-transition;
 
+
         &:hover {
           background-color: $panel-menu-item-hover-bg-color;
           color: $panel-menu-item-hover-color;
-
         }
 
         &.ccm-panel-menu-parent-item-active {
@@ -248,7 +262,7 @@ div.ccm-panel-content {
 
         &.ccm-panel-menu-item-active {
           background-color: $panel-menu-item-active-bg-color;
-          color: $panel-menu-item-active-color;
+          color: $panel-menu-item-active-color !important;
           font-weight: $panel-menu-item-active-font-weight;
 
           &:hover {
@@ -280,6 +294,24 @@ div.ccm-panel-content {
   }
 }
 
+@include color-mode(dark) {
+  div.ccm-panel-content {
+    ul.nav,
+    menu {
+      li {
+        a {
+          color: $panel-menu-item-color-dark;
+        }
+
+        a:hover {
+          background-color: $panel-menu-item-hover-bg-color-dark;
+          color: $panel-menu-item-hover-color-dark;
+        }
+      }
+    }
+  }
+}
+
 div.ccm-panel-content-inner {
   padding: 20px 40px 40px;
 }
@@ -312,7 +344,7 @@ div.ccm-panel-header-accordion {
       list-style-type: none;
     }
 
-    li>a,
+    li > a,
     span {
       cursor: pointer;
       display: block;
@@ -350,6 +382,7 @@ div.ccm-panel-header-accordion {
 #ccm-panel-add-blocktypes-list.ccm-no-pointer-events a.ccm-panel-add-block-draggable-block-type-dragger {
   pointer-events: none;
 }
+
 /**
  * Panel search input
  * Used by both block and container add panel (left hand menu)
@@ -390,7 +423,7 @@ div.ccm-panel-header-accordion {
   width: 24px;
   z-index: 1;
 
-  >i {
+  > i {
     color: $gray-100;
     line-height: 16px;
     position: absolute;
@@ -435,7 +468,7 @@ html.ccm-panel-right div.ccm-panel-detail {
 }
 
 div.ccm-panel-detail-content {
-  background-color: white;
+  background-color: var(--bs-body-bg);
   min-height: 100%;
   min-width: 100%;
   padding: 40px 40px 80px;
@@ -462,6 +495,7 @@ iframe.ccm-page-preview-frame {
   top: 0;
   width: 100%;
 }
+
 /**
  * Panel Detail Fade
  */
@@ -572,6 +606,19 @@ div.ccm-panel-content {
   }
 }
 
+@include color-mode(dark) {
+  header {
+    a {
+      color: $gray-400;
+
+      svg {
+        fill: $gray-400;
+      }
+    }
+  }
+}
+
+
 /**
  * Forms and button actions
  */
@@ -585,6 +632,13 @@ div.ccm-panel-detail-form-actions {
   width: 100%;
 }
 
+@include color-mode(dark) {
+  div.ccm-panel-detail-form-actions {
+    background-color: $gray-900;
+    border-top: 1px solid $gray-700;
+  }
+}
+
 /**
  * Panel icons
  */

package/assets/cms/scss/panels/add/_blocks.scss

@@ -139,3 +139,10 @@ a.ccm-panel-add-block-draggable-block-type.ccm-stacked-list {
   }
 
 }
+
+@include color-mode(dark) {
+  a.ccm-panel-add-block-draggable-block-type,
+  a.ccm-panel-add-container-item {
+    color: $light;
+  }
+}

package/assets/cms/scss/panels/pages/_attributes.scss

@@ -160,8 +160,8 @@
 
     // Selectable attributes
     &[data-attribute-key-id] {
-      background-color: #f9f9f9; // ~ $panel-background-color
-      border: 2px solid #e8e8e8;
+      background-color: $panel-background-color;
+      border: 2px solid darken($panel-background-color, 0.2);
       padding: 12px 45px 15px 48px;
 
       [data-remove-attribute-key] {
@@ -175,3 +175,24 @@
     }
   }
 }
+
+@include color-mode(dark) {
+  #ccm-detail-page-attributes {
+    &[data-attribute-key-id] {
+      background-color: $panel-background-color-dark;
+      border: 2px solid lighten($panel-background-color-dark, 0.3);
+    }
+  }
+
+  #ccm-menu-page-attributes {
+    .ccm-menu-page-attributes-set {
+      a[data-attribute-key] {
+        color: $panel-menu-item-color-dark;
+
+        &:hover {
+          background-color: $panel-menu-item-hover-bg-color-dark;
+        }
+      }
+    }
+  }
+}

package/assets/cms/scss/panels/pages/_design.scss

@@ -18,6 +18,16 @@
   }
 }
 
+@include color-mode(dark) {
+  #ccm-panel-page-design {
+    .ccm-panel-content-inner {
+      .ccm-panel-page-design-title {
+        color: $gray-400;
+      }
+    }
+  }
+}
+
 .ccm-panel-page-design-page-group {
   padding: 25px 10px 10px 34px;
 

package/assets/cms/scss/panels/pages/_mobile-preview.scss

@@ -1,6 +1,6 @@
 #ccm-panel-detail-mobile-preview {
   > .ccm-panel-detail-content {
-    background: rgba(255, 255, 255, 0.4);
+    background: $gray-500;
     text-align: center;
 
     > .ccm-device-preview {
@@ -140,3 +140,11 @@ div.ccm-menu-device-set {
   }
 
 }
+
+@include color-mode(dark) {
+  #ccm-panel-detail-mobile-preview {
+    > .ccm-panel-detail-content {
+      background: $gray-600;
+    }
+  }
+}

package/assets/cms/scss/panels/pages/_versions.scss

@@ -82,6 +82,17 @@ section#ccm-panel-page-versions {
   }
 }
 
+@include color-mode(dark) {
+  section#ccm-panel-page-versions {
+    table {
+      th,
+      td {
+        background-color: $panel-background-color-accent-dark;
+      }
+    }
+  }
+}
+
 div#ccm-panel-detail-page-versions {
   div.ccm-panel-detail-content {
     height: 100%;

package/assets/desktop/scss/frontend/_frontend.scss

@@ -1 +1,5 @@
+$color-mode-type: data;
+
+@import 'bootstrap/scss/mixins/color-mode';
+@import '../../../../assets/cms/scss/variables';
 @import 'waiting-for-me';

package/assets/desktop/scss/frontend/_waiting-for-me.scss

@@ -1,3 +1,4 @@
+
 div.ccm-block-desktop-waiting-for-me {
   i.ccm-block-desktop-waiting-for-me-loader {
     display: none;
@@ -76,7 +77,7 @@ div.ccm-block-desktop-waiting-for-me {
       top: 20px;
 
       .btn {
-        border-color: #c6c6c6;
+        border-color: $gray-300;
         border-radius: 50%;
         box-shadow: none;
         display: block;
@@ -90,12 +91,16 @@ div.ccm-block-desktop-waiting-for-me {
         transition: none;
         width: 40px !important;
 
+        &:hover {
+          background-color: transparent !important;
+        }
+
         &.btn-close {
-          border: 1px solid #c6c6c6; // This needs to be explicit because .btn-close has strong styling otherwise
+          border: 1px solid $gray-300; // This needs to be explicit because .btn-close has strong styling otherwise
         }
 
         i {
-          color: #ccc;
+          color: $gray-300;
         }
 
         &:active {
@@ -114,3 +119,23 @@ div.ccm-block-desktop-waiting-for-me {
   }
 
 }
+
+@include color-mode(dark) {
+  div.ccm-block-desktop-waiting-for-me {
+    border: 1px solid $gray-700;
+
+    div.ccm-block-desktop-waiting-for-me-item {
+      div.ccm-block-desktop-waiting-for-me-menu {
+        .btn {
+          &.btn-close {
+            border: 1px solid $gray-700;
+          }
+
+          i {
+            color: 1px solid $gray-700;
+          }
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",

package/.idea/codeStyles/Project.xml

@@ -1,48 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <code_scheme name="Project" version="173">
-    <PHPCodeStyleSettings>
-      <option name="BLANK_LINES_BETWEEN_IMPORTS" value="1" />
-      <option name="LOWER_CASE_BOOLEAN_CONST" value="true" />
-      <option name="LOWER_CASE_NULL_CONST" value="true" />
-      <option name="ELSE_IF_STYLE" value="COMBINE" />
-      <option name="KEEP_RPAREN_AND_LBRACE_ON_ONE_LINE" value="true" />
-      <option name="BLANK_LINES_AFTER_OPENING_TAG" value="1" />
-      <option name="KEEP_BLANK_LINES_AFTER_LBRACE" value="0" />
-      <option name="NEW_LINE_AFTER_PHP_OPENING_TAG" value="true" />
-    </PHPCodeStyleSettings>
-    <codeStyleSettings language="JavaScript">
-      <option name="INDENT_CASE_FROM_SWITCH" value="false" />
-      <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
-      <option name="ALIGN_MULTILINE_FOR" value="false" />
-    </codeStyleSettings>
-    <codeStyleSettings language="PHP">
-      <option name="KEEP_BLANK_LINES_BEFORE_RBRACE" value="0" />
-      <option name="BLANK_LINES_AFTER_PACKAGE" value="1" />
-      <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
-      <option name="ALIGN_MULTILINE_PARAMETERS_IN_CALLS" value="true" />
-      <option name="ALIGN_MULTILINE_EXTENDS_LIST" value="true" />
-      <option name="CALL_PARAMETERS_WRAP" value="5" />
-      <option name="CALL_PARAMETERS_LPAREN_ON_NEXT_LINE" value="true" />
-      <option name="CALL_PARAMETERS_RPAREN_ON_NEXT_LINE" value="true" />
-      <option name="METHOD_PARAMETERS_WRAP" value="5" />
-      <option name="METHOD_PARAMETERS_LPAREN_ON_NEXT_LINE" value="true" />
-      <option name="METHOD_PARAMETERS_RPAREN_ON_NEXT_LINE" value="true" />
-      <option name="EXTENDS_LIST_WRAP" value="5" />
-      <option name="FOR_STATEMENT_LPAREN_ON_NEXT_LINE" value="true" />
-      <option name="FOR_STATEMENT_RPAREN_ON_NEXT_LINE" value="true" />
-      <option name="ARRAY_INITIALIZER_WRAP" value="5" />
-      <option name="ARRAY_INITIALIZER_LBRACE_ON_NEXT_LINE" value="true" />
-      <option name="ARRAY_INITIALIZER_RBRACE_ON_NEXT_LINE" value="true" />
-      <option name="IF_BRACE_FORCE" value="3" />
-      <option name="DOWHILE_BRACE_FORCE" value="3" />
-      <option name="WHILE_BRACE_FORCE" value="3" />
-      <option name="FOR_BRACE_FORCE" value="3" />
-    </codeStyleSettings>
-    <codeStyleSettings language="Vue">
-      <indentOptions>
-        <option name="INDENT_SIZE" value="4" />
-        <option name="TAB_SIZE" value="4" />
-      </indentOptions>
-    </codeStyleSettings>
-  </code_scheme>
-</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,7 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-    <inspection_tool class="Stylelint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>