@concretecms/bedrock 1.1.3 → 1.1.4

package/assets/bedrock/scss/_frontend.scss

@@ -5,6 +5,7 @@
 @import '@fortawesome/fontawesome-free/scss/variables';
 
 // Import Theme Foundation items
+@import 'theme-context-root';
 @import 'mixins';
 @import 'utilities';
 @import 'theme-grid';

package/assets/bedrock/scss/_theme-context-root.scss

@@ -0,0 +1,17 @@
+// What is the purpose of this file, you ask?
+// In our theme color input selector, we use CSS variables to display colors.
+// e.g. var(--bs-primary)
+// However, since .ccm-ui has the CMS variables attached to it, and the ::root has the
+// theme bootstrap variables attached to it, the primary color shown in the color input
+// Will come from .ccm-ui instead of ::root, since .ccm-ui is inside ::root.
+// So instead, let's ALSO define the theme colors against the .ccm-context-theme
+// class, and then wrap any controls that need to have access to theme specific variables
+// within the .ccm-context-theme class.
+
+.ccm-context-theme {
+
+  @each $color, $value in $theme-colors {
+    --#{$variable-prefix}#{$color}: #{$value};
+  }
+
+}

package/assets/cms/components/customizer/FontFamilyPageCustomizerWidget.vue

@@ -1,7 +1,7 @@
 <template>
     <select @change="componentUpdated" class="selectpicker" v-model="selectedFont">
         <option value="" :data-content="'<span>Default</span>'">Default</option>
-        <option v-for="font in webFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
+        <option v-for="font in customFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
         <option v-for="font in standardFonts" :value="font" :data-content="'<span style=\'font-family: ' + font + '\'>' + font + '</span>'">{{ font }}</option>
     </select>
 </template>
@@ -42,13 +42,13 @@ export default {
         }
     },
     computed: {
-        webFonts: function() {
+        customFonts: function() {
             var fonts = []
             var my = this
             this.styleValue.style.fonts.forEach(function(font) {
                 fonts.push(font.name)
             })
-            if (fonts.indexOf(my.selectedFont) === -1) {
+            if (fonts.indexOf(my.selectedFont) === -1 && my.standardFonts.indexOf(my.selectedFont) === -1) {
                 fonts.push(my.selectedFont)
             }
             return fonts

package/assets/cms/components/customizer/ThemeCustomizer.vue

@@ -178,7 +178,7 @@ export default {
                     url: my.createNewSkinAction,
                     data: {
                         skinName: my.newSkinName,
-                        styles: my.customizerStyles,
+                        styles: JSON.stringify(my.customizerStyles),
                         customCss: my.customizerCustomCss,
                         ccm_token: CCM_SECURITY_TOKEN
                     },
@@ -301,7 +301,7 @@ export default {
             new ConcreteAjaxRequest({
                 url: my.saveSkinAction,
                 data: {
-                    styles: my.customizerStyles,
+                    styles: JSON.stringify(my.customizerStyles),
                     customCss: my.customizerCustomCss,
                     ccm_token: CCM_SECURITY_TOKEN
                 },

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="mb-3">
+    <div class="mb-3 ccm-context-theme">
         <select :name="inputName" data-select="theme-colors" data-width="100%">
             <option v-for="color in colorCollection.colors" :selected="selectedColor == color.variable" :data-content="dataContentAttribute(color)" :value="color.variable">{{ color.name }}</option>
         </select>

package/assets/cms/scss/bootstrap/_reboot.scss

@@ -20,35 +20,6 @@
 }
 
 
-// Root
-//
-// Ability to the value of the root font sizes, affecting the value of `rem`.
-// null by default, thus nothing is generated.
-
-:root {
-  font-size: $font-size-root;
-
-  @if $enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
-    }
-  }
-}
-
-
-// Body
-//
-// 1. Remove the margin in all browsers.
-// 2. As a best practice, apply a default `background-color`.
-// 3. Prevent adjustments of font size after orientation changes in iOS.
-// 4. Change the default tap highlight to be completely transparent in iOS.
-
-html.ccm-toolbar-visible {
-  // We _could_ set this by setting font-size-root, but we don't really want to screw with the theme loading this
-  // unless we know the toolbar is visible.
-  font-size: 16px; // By setting this here, rem declarations in BS5 work off of 16px, and the base theme can do whatever it wants at body
-}
-
 .ccm-ui {
   margin: 0; // 1
   font-family: $font-family-base;

package/assets/imagery/scss/frontend/_hero-image.scss

@@ -12,6 +12,13 @@ div.ccm-block-hero-image {
     width: 100%;
   }
 
+  div.ccm-block-hero-image-text {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   div.ccm-block-hero-image-cover {
     z-index: 2;
   }

package/package.json

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