generator-chisel 2.2.0 → 2.2.2

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/elements/_form.scss

@@ -14,12 +14,12 @@ $form-field-line-height: get-line-height('normal');
 $form-field-color: get-color('foreground');
 $form-field-accent: get-color('primary');
 $form-field-accent-contrast: get-color('white');
-$form-field-border-color: get-color('medium-grey');
+$form-field-border-color: get-color('grey-300');
 $form-field-focus-border-color: $form-field-accent;
-$form-field-placeholder-color: get-color('grey');
+$form-field-placeholder-color: get-color('grey-900');
 $form-field-shadow-focus: 0 0 0 3px hsla(256deg, 68%, 24%, 50%);
 $form-field-bg-color: get-color('white');
-$form-field-bg-range-track: get-color('secondary');
+$form-field-bg-range-track: get-color('foreground');
 $form-field-range-shadow-focus: 0 0 0 2px hsla(9deg, 100%, 66%, 50%);
 $form-field-range-thumb-shadow-focus: 0 0 0 2px hsla(256deg, 68%, 24%, 50%);
 $form-field-error-color: get-color('error');

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/elements/_shared.scss

@@ -42,3 +42,7 @@ mark {
   font-weight: 700;
   background-color: transparent;
 }
+
+strong {
+  font-weight: 700;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/login.scss

@@ -39,7 +39,7 @@ body.login {
       justify-content: center;
       width: 36%;
       padding: 0 7%;
-      background: linear-gradient(180deg, get-color('light-grey') 0%, get-color('white') 100%);
+      background: linear-gradient(180deg, get-color('grey-100') 0%, get-color('white') 100%);
     }
 
     @include bp(large) {
@@ -123,7 +123,7 @@ body.login {
     font-size: get-font-size('large');
     font-weight: 700;
     text-align: center;
-    background: linear-gradient(51deg, get-color('light-grey'), rgba(255, 255, 255, 50%));
+    background: linear-gradient(51deg, get-color('grey-100'), rgba(255, 255, 255, 50%));
     opacity: 0;
     transition: get-transition('normal');
 

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_wrapper.scss

@@ -13,6 +13,10 @@
 .o-wrapper__inner {
   width: 100%;
   max-width: get-layout-size('content');
-  padding-inline: get-padding('small');
+  padding-inline: get-padding('normal');
   margin-inline: auto;
+
+  &--wide {
+    max-width: get-layout-size('wide');
+  }
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/utilities/_spacing.scss

@@ -0,0 +1,3 @@
+.u-no-margin-bottom {
+  margin-bottom: 0;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/woo/_general.scss

@@ -6,7 +6,7 @@
 .woocommerce:where(body:not(.woocommerce-uses-block-theme)) {
   div.product span.price,
   div.product p.price {
-    color: get-color('secondary');
+    color: get-color('foreground');
   }
 }
 
@@ -28,7 +28,7 @@
     line-height: get-line-height('large');
     color: get-color('white');
     text-align: center;
-    background-color: get-color('secondary');
+    background-color: get-color('foreground');
     border-radius: 100%;
   }
 

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/woo/_notices.scss

@@ -27,7 +27,7 @@
   padding: get-padding('normal') get-padding('large') get-padding('normal') px-rem(48);
   margin: 0 0 get-margin('xlarge');
   color: get-color('foreground');
-  background-color: get-color('light-grey');
+  background-color: get-color('grey-100');
   border-top: 3px solid get-color('info');
 
   &::before {

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/woo/_product-item.scss

@@ -16,6 +16,10 @@
 
   margin-bottom: get-margin('normal');
   text-align: center;
+
+  &:hover img {
+    transform: scale(1.05);
+  }
 }
 
 .c-product-item__image {

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/woo/_product.scss

@@ -3,14 +3,14 @@
 .woocommerce div.product {
   .woocommerce-tabs ul.tabs li {
     color: get-color('primary');
-    background-color: get-color('light-grey');
+    background-color: get-color('grey-100');
   }
 }
 
 .woocommerce-product-gallery {
   overflow: hidden;
   background-color: get-color('white');
-  border: 1px solid get-color('light-grey');
+  border: 1px solid get-color('grey-100');
   border-radius: get-border-radius('small');
 }
 

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/wp-editor/_block-edit-selector.scss

@@ -21,14 +21,14 @@
 
 .c-block-edit-selector__inner {
   color: get-color('black');
-  background-color: get-color('light-grey');
+  background-color: get-color('grey-100');
 }
 
 .c-block-edit-selector__button {
   height: auto !important;
   padding: get-padding('tiny') get-padding('little') !important;
   color: get-color('black') !important;
-  border: 1px solid get-color('light-grey');
+  border: 1px solid get-color('grey-100');
   box-shadow: none !important;
 
   &.is-large {

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/wp-editor/_core-spacer.scss

@@ -5,7 +5,7 @@
   @include meta.load-css('../blocks/core-spacer');
 
   .wp-block-spacer {
-    background-color: get-color('light-grey');
+    background-color: get-color('grey-100');
 
     .components-resizable-box__container {
       display: none;

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/wp-editor/_render-appender.scss

@@ -15,8 +15,8 @@
     padding: get-padding('normal');
     font-size: get-font-size('normal');
     color: get-color('black');
-    background-color: get-color('light-grey');
-    border: 1px solid get-color('medium-grey');
+    background-color: get-color('grey-100');
+      border: 1px solid get-color('grey-300');
     transition: none;
 
     span {

package/lib/commands/create/creators/app/chisel-starter-theme/style.chisel-tpl.css

@@ -3,7 +3,7 @@
  * Theme URI: https://www.getchisel.co/
  * Author: <%= app.author %>
  * Description: Chisel Wordpress Starter Theme based on Timber library.
- * Version: 2.2.0
+ * Version: 2.2.2
  * License: GNU General Public License v2 or later
  * License URI: http://www.gnu.org/licenses/gpl-2.0.html
  * Tags: chisel, custom, starter, theme, WordPress

package/lib/commands/create/creators/app/chisel-starter-theme/theme.json

@@ -13,7 +13,7 @@
         {
           "name": "Foreground",
           "slug": "foreground",
-          "color": "#000000"
+          "color": "#050a18"
         },
         {
           "name": "Background",
@@ -23,12 +23,72 @@
         {
           "name": "Primary",
           "slug": "primary",
-          "color": "#2a1468"
+          "color": "#dd2424"
+        },
+        {
+          "name": "Primary 100",
+          "slug": "primary-100",
+          "color": "#ffecec"
+        },
+        {
+          "name": "Primary 200",
+          "slug": "primary-200",
+          "color": "#f5a5a5"
+        },
+        {
+          "name": "Primary 300",
+          "slug": "primary-300",
+          "color": "#e85f5f"
+        },
+        {
+          "name": "Primary 600",
+          "slug": "primary-600",
+          "color": "#9c1616"
+        },
+        {
+          "name": "Primary 800",
+          "slug": "primary-800",
+          "color": "#641010"
+        },
+        {
+          "name": "Primary 900",
+          "slug": "primary-900",
+          "color": "#2c0707"
         },
         {
           "name": "Secondary",
           "slug": "secondary",
-          "color": "#ff6d54"
+          "color": "#22dbdb"
+        },
+        {
+          "name": "Secondary 100",
+          "slug": "secondary-100",
+          "color": "#f0fefe"
+        },
+        {
+          "name": "Secondary 200",
+          "slug": "secondary-200",
+          "color": "#bff7f7"
+        },
+        {
+          "name": "Secondary 300",
+          "slug": "secondary-300",
+          "color": "#79Ee6e6"
+        },
+        {
+          "name": "Secondary 600",
+          "slug": "secondary-600",
+          "color": "#189999"
+        },
+        {
+          "name": "Secondary 800",
+          "slug": "secondary-800",
+          "color": "#106565"
+        },
+        {
+          "name": "Secondary 900",
+          "slug": "secondary-900",
+          "color": "#0a2e2e"
         },
         {
           "name": "Black",
@@ -41,19 +101,39 @@
           "color": "#ffffff"
         },
         {
-          "name": "Grey",
-          "slug": "grey",
+          "name": "Grey 900",
+          "slug": "grey-900",
           "color": "#343a40"
         },
         {
-          "name": "Medium grey",
-          "slug": "medium-grey",
-          "color": "#cccccc"
+          "name": "Grey 800",
+          "slug": "grey-800",
+          "color": "#444444"
+        },
+        {
+          "name": "Grey 600",
+          "slug": "grey-600",
+          "color": "#6E6E6E"
         },
         {
-          "name": "Light grey",
-          "slug": "light-grey",
-          "color": "#f0f1f3"
+          "name": "Grey 400",
+          "slug": "grey-400",
+          "color": "#999999"
+        },
+        {
+          "name": "Grey 300",
+          "slug": "grey-300",
+          "color": "#c2c2c2"
+        },
+        {
+          "name": "Grey 200",
+          "slug": "grey-200",
+          "color": "#e5e5e5"
+        },
+        {
+          "name": "Grey 100",
+          "slug": "grey-100",
+          "color": "#f8f8f8"
         },
         {
           "name": "Success",
@@ -78,7 +158,7 @@
       ],
       "duotone": [
         {
-          "colors": ["#2a1468", "#ff6d54"],
+          "colors": ["#dd2424", "#22dbdb"],
           "slug": "primary-secondary",
           "name": "Primary & Secondary"
         }
@@ -87,7 +167,12 @@
         {
           "slug": "primary-secondary",
           "name": "Primary & Secondary",
-          "gradient": "linear-gradient(135deg, #2a1468 0%, #ff6d54 100%)"
+          "gradient": "linear-gradient(135deg, #dd2424 0%, #22dbdb 100%)"
+        },
+        {
+          "slug": "secondary-primary",
+          "name": "Secondary & Primary",
+          "gradient": "linear-gradient(135deg, #22dbdb 0%, #dd2424 100%)"
         }
       ]
     },
@@ -105,6 +190,11 @@
       },
       "defaultFontSizes": false,
       "fontSizes": [
+        {
+          "slug": "tiny",
+          "size": "0.75rem",
+          "name": "tiny"
+        },
         {
           "slug": "small",
           "size": "0.875rem",
@@ -126,20 +216,20 @@
         },
         {
           "slug": "large",
-          "size": "1.5rem",
+          "size": "1.25rem",
           "name": "Large",
           "fluid": {
             "min": "1.125rem",
-            "max": "1.5rem"
+            "max": "1.25rem"
           }
         },
         {
           "slug": "extra-large",
-          "size": "1.75rem",
+          "size": "1.5rem",
           "name": "Extra Large",
           "fluid": {
             "min": "1.25rem",
-            "max": "1.75rem"
+            "max": "1.5rem"
           }
         },
         {
@@ -153,44 +243,59 @@
         },
         {
           "slug": "big",
-          "size": "2.25rem",
+          "size": "2.5rem",
           "name": "Big",
           "fluid": {
-            "min": "1.75rem",
-            "max": "2.25rem"
+            "min": "1.5rem",
+            "max": "2.5rem"
           }
         },
         {
           "slug": "huge",
-          "size": "3rem",
+          "size": "3.5rem",
           "name": "Huge",
           "fluid": {
-            "min": "2.25rem",
-            "max": "3rem"
+            "min": "2.5rem",
+            "max": "3.5rem"
           }
         }
       ],
       "fontFamilies": [
         {
-          "fontFamily": "Quicksand,sans-serif",
+          "fontFamily": "Roboto,sans-serif",
           "slug": "body",
-          "name": "Quicksand",
+          "name": "Roboto",
           "fontFace": [
             {
-              "fontFamily": "Quicksand",
-              "fontWeight": "400",
+              "fontFamily": "Roboto",
+              "fontWeight": "300",
               "fontStyle": "normal",
               "fontStretch": "normal",
               "fontDisplay": "swap",
-              "src": ["file:./assets/fonts/quicksand-regular.woff2"]
+              "src": ["file:./assets/fonts/roboto-300.woff2"]
             },
             {
-              "fontFamily": "Quicksand",
+              "fontFamily": "Roboto",
+              "fontWeight": "700",
+              "fontStyle": "normal",
+              "fontStretch": "normal",
+              "fontDisplay": "swap",
+              "src": ["file:./assets/fonts/roboto-700.woff2"]
+            }
+          ]
+        },
+        {
+          "fontFamily": "Manrope,sans-serif",
+          "slug": "headings",
+          "name": "Manrope",
+          "fontFace": [
+            {
+              "fontFamily": "Manrope",
               "fontWeight": "700",
               "fontStyle": "normal",
               "fontStretch": "normal",
               "fontDisplay": "swap",
-              "src": ["file:./assets/fonts/quicksand-700.woff2"]
+              "src": ["file:./assets/fonts/manrope-700.woff2"]
             }
           ]
         }
@@ -259,6 +364,11 @@
           "size": "2rem",
           "slug": "90",
           "name": "9"
+        },
+        {
+          "size": "3rem",
+          "slug": "100",
+          "name": "10"
         }
       ]
     },
@@ -271,7 +381,8 @@
         "medium": "var(--wp--preset--spacing--60)",
         "large": "var(--wp--preset--spacing--70)",
         "xlarge": "var(--wp--preset--spacing--80)",
-        "big": "var(--wp--preset--spacing--90)"
+        "big": "var(--wp--preset--spacing--90)",
+        "huge": "var(--wp--preset--spacing--100)"
       },
       "padding": {
         "tiny": "var(--wp--preset--spacing--20)",
@@ -281,7 +392,8 @@
         "medium": "var(--wp--preset--spacing--60)",
         "large": "var(--wp--preset--spacing--70)",
         "xlarge": "var(--wp--preset--spacing--80)",
-        "big": "var(--wp--preset--spacing--90)"
+        "big": "var(--wp--preset--spacing--90)",
+        "huge": "var(--wp--preset--spacing--100)"
       },
       "gap": {
         "tiny": "var(--wp--preset--spacing--20)",
@@ -291,7 +403,8 @@
         "medium": "var(--wp--preset--spacing--60)",
         "large": "var(--wp--preset--spacing--70)",
         "xlarge": "var(--wp--preset--spacing--80)",
-        "big": "var(--wp--preset--spacing--90)"
+        "big": "var(--wp--preset--spacing--90)",
+        "huge": "var(--wp--preset--spacing--100)"
       },
       "border-radius": {
         "tiny": "0.25rem",
@@ -324,8 +437,8 @@
       "line-height": {
         "small": 1.15,
         "medium": 1.25,
-        "normal": 1.35,
-        "large": 1.5
+        "normal": 1.5,
+        "large": 1.75
       },
       "transition": {
         "slow": "all ease-in-out 0.5s",
@@ -361,7 +474,7 @@
         },
         ":hover": {
           "color": {
-            "text": "var(--wp--preset--color--secondary)"
+            "text": "var(--wp--preset--color--foreground)"
           },
           "typography": {
             "textDecoration": "underline"
@@ -370,7 +483,7 @@
       },
       "heading": {
         "typography": {
-          "fontFamily": "var(--wp--preset--font-family--body)",
+          "fontFamily": "var(--wp--preset--font-family--headings)",
           "fontWeight": "700",
           "lineHeight": "var(--wp--custom--line-height--normal)"
         },

package/lib/commands/create/creators/app/chisel-starter-theme/views/components/footer.twig

@@ -6,4 +6,12 @@
       </div>
     {% endfor %}
   </div>
+
+  {% if copyright is not empty %}
+    <div class="c-footer__copyright">
+      <div class="o-wrapper__inner">
+        {{ copyright.content }}
+      </div>
+    </div>
+  {% endif %}
 </footer>

package/lib/commands/create/creators/app/chisel-starter-theme/views/components/no-results.twig

@@ -0,0 +1 @@
+<h2>{{ __('No posts found', 'chisel') }}</h2>

package/lib/commands/create/creators/app/chisel-starter-theme/views/index.twig

@@ -13,21 +13,21 @@ In order to covert back to a grid, add the following classes to the c-posts-item
     {% endblock %}
 
     <div class="o-layout">
-      <div class="{{ bem('o-layout__item', (sidebar ? '8' : '12') ~ '-large') }}">
-        <div class="c-posts-items {{ bem('o-grid', 'cols-1', 'cols-2-small', (sidebar ? 'cols-2' : 'cols-3') ~ '-medium') }} js-load-more-container">
+      <div class="{{ bem('o-layout__item', (sidebar.content ? '8' : '12') ~ '-large') }}">
+        <div class="c-posts-items {{ bem('o-grid', 'cols-1', 'cols-2-small', (sidebar.content ? 'cols-2' : 'cols-3') ~ '-medium') }} js-load-more-container">
           {% if posts is not empty %}
             {% for post in posts %}
               {% include ['components/' ~ post.post_type ~ '-item.twig', 'components/post-item.twig'] with {post: post} only %}
             {% endfor %}
           {% else %}
-            <h2>{{ __('No posts found', 'chisel') }}</h2>
+            {% include 'components/no-results.twig' %}
           {% endif %}
         </div>
 
         {% include 'components/pagination.twig' with {type: 'load-more'} %}
       </div>
 
-      {% if sidebar %}
+      {% if sidebar.content %}
         {% include 'sidebar-blog.twig' %}
       {% endif %}
     </div>

package/lib/commands/create/creators/app/chisel-starter-theme/views/sidebar-blog.twig

@@ -1,5 +1,5 @@
 <aside class="c-sidebar {{ bem('o-layout__item', '4-large') }}">
   <div class="c-sidebar__inner">
-    {{ sidebar }}
+    {{ sidebar.content }}
   </div>
 </aside>

package/lib/commands/create/creators/app/chisel-starter-theme/views/sidebar-woocommerce.twig

@@ -1,5 +1,5 @@
 <aside class="{{ bem('c-sidebar', 'left') }} {{ bem('o-layout__item', '4-large') }}">
   <div class="c-sidebar__inner">
-    {{ sidebar }}
+    {{ sidebar.content }}
   </div>
 </aside>

package/lib/commands/create/creators/app/chisel-starter-theme/views/single.twig

@@ -4,10 +4,12 @@
   <article id="post-{{ post.ID }}" class="c-post {{ post_classes(post.class) }}">
     <section class="o-wrapper__inner c-post__inner {{ wrapper_class }}">
 
-      <div class="o-layout c-content{% if sidebar %} has-sidebar{% endif %}">
-        <div class="{{ bem('o-layout__item', (sidebar ? '8' : '12') ~ '-large') }} c-content__inner">
+      <div class="o-layout c-content{% if sidebar.content %} has-sidebar{% endif %}">
+        <div class="{{ bem('o-layout__item', (sidebar.content ? '8' : '12') ~ '-large') }} c-content__inner">
 
-          {% include 'components/the-title.twig' %}
+          {% block the_title %}
+            {% include 'components/the-title.twig' %}
+          {% endblock %}
 
           {% block inner_content %}
 
@@ -48,7 +50,7 @@
           {% endblock %}
         </div>
 
-        {% if sidebar %}
+        {% if sidebar.content %}
           {% include 'sidebar-blog.twig' %}
         {% endif %}
       </div>

package/lib/commands/create/creators/app/chisel-starter-theme/views/woocommerce/archive-product.twig

@@ -32,7 +32,7 @@
   {% do action('woocommerce_before_shop_loop') %}
 
   <div class="o-layout">
-    <div class="{{ bem('o-layout__item', (sidebar ? '8' : '12') ~ '-large') }}">
+    <div class="{{ bem('o-layout__item', (sidebar.content ? '8' : '12') ~ '-large') }}">
       <div class="c-posts-items c-shop-items {{ loop_columns_class }} js-load-more-container">
       {% if items is not empty %}
         {% for item in items %}
@@ -70,7 +70,7 @@
       {% endif %}
     </div>
 
-    {% if sidebar %}
+    {% if sidebar.content %}
       {% include 'sidebar-woocommerce.twig' %}
     {% endif %}
   </div>

package/lib/commands/create/creators/app/chisel-starter-theme/views/woocommerce/linked-products.twig

@@ -5,8 +5,8 @@
   </div>
   {% endif %}
 
-  <div class="{{ bem('o-layout__item', (sidebar ? '8' : '12') ~ '-large') }}">
-    <div class="c-product-linked__items {{ grid_classnames }}">
+  <div class="{{ bem('o-layout__item', (sidebar.content ? '8' : '12') ~ '-large') }}">
+    <div class="c-product-linked__items {{ grid_classnames|default(bem('o-grid', 'cols-1', 'cols-2-small', 'cols-3-medium')) }}">
       {% for post in linked_products %}
         {% include "woocommerce/content-product.twig" with {post: post} %}
       {% endfor %}

package/lib/commands/create/creators/app/chisel-starter-theme/views/woocommerce/single-product.twig

@@ -7,8 +7,8 @@
   <article id="post-{{ post.ID }}" itemscope itemtype="https://schema.org/Product" class="{{ post_classes(post.class) }}">
     <section class="o-wrapper__inner {{ wrapper_class }} {{ bem('c-post', post.type|default('page')) }}">
 
-      <div class="o-layout c-content{% if sidebar %} has-sidebar{% endif %} product">
-        <div class="{{ bem('o-layout__item', (sidebar ? '8' : '12') ~ '-large') }} c-content__inner">
+      <div class="o-layout c-content{% if sidebar.content %} has-sidebar{% endif %} product">
+        <div class="{{ bem('o-layout__item', (sidebar.content ? '8' : '12') ~ '-large') }} c-content__inner">
 
           <div class="o-layout c-product__inner">
             <div class="c-product__gallery {{ bem('o-layout__item', '6-large') }}">
@@ -60,7 +60,7 @@
           </div>
         </div>
 
-        {% if sidebar %}
+        {% if sidebar.content %}
           {# Register product sidebar in Woocommerce.php if you want to use it #}
           {% include 'sidebar-woocommerce-product.twig' %}
         {% endif %}

package/lib/commands/create/creators/app/chisel-starter-theme/webpack.config.js

@@ -3,4 +3,15 @@ const { adjustWebpackConfig } = require('chisel-scripts');
 
 const updatedConfig = adjustWebpackConfig(defaultConfig, __dirname);
 
+updatedConfig.devServer = {
+  ...updatedConfig.devServer,
+  client: {
+    overlay: {
+      errors: true,
+      warnings: false,
+      runtimeErrors: false,
+    },
+  },
+};
+
 module.exports = updatedConfig;