Feature/foundation work

.stylelintignore

@@ -1 +1,9 @@
 source/matter.source.css
+**/*.theme.css
+.vscode
+.idea
+.ddev
+assets
+node_modules
+dist
+build

.stylelintrc.json

@@ -8,6 +8,7 @@
     "custom-property-pattern": ["^[a-z]([a-z0-9]+-)*[a-z0-9]+(--[a-z0-9]+([a-z0-9-]+)?)*$", { "message": "Expected kebab-case with optional double-dash suffix" }],
     "media-feature-range-notation": null,
     "alpha-value-notation": null,
-    "at-rule-no-unknown": [true, { "ignoreAtRules": ["import-glob"] }]
+    "media-query-no-invalid": null,
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["import-glob", "custom-media"] }]
   }
 }

README.md

@@ -8,13 +8,23 @@ Matter is a component-based Drupal base theme built on [atomic design](https://a
 
 ## Requirements
 
-- [Drupal 11](https://www.drupal.org/about/drupal-11)           - Drupal core 11 or higher
-- [Components](https://www.drupal.org/project/components)       - Drupal module
-- [UI Icons](https://www.drupal.org/project/ui_icons)           - Drupal module
-- [UI Patterns](https://www.drupal.org/project/ui_patterns)     - Drupal module
-- [UI Skins](https://www.drupal.org/project/ui_skins)           - Drupal module
-- [UI Styles](https://www.drupal.org/project/ui_styles)         - Drupal module
-- [Node.js](https://nodejs.org)                                 - Node.js 14 or higher for asset compilation
+### Drupal
+- [Drupal 11](https://www.drupal.org/about/drupal-11)                 - Drupal core 11 or higher
+- [Components](https://www.drupal.org/project/components)             - Drupal module: maps source components to Twig templates
+- [More Global Variables](https://www.drupal.org/project/mgv)         - Drupal module: provides additional global variables for use in Twig templates
+- [Roles Classes](https://www.drupal.org/project/body_roles_classes)  - Drupal module: adds role-based classes to the body element
+- [UI Icons](https://www.drupal.org/project/ui_icons)                 - Drupal module: integrates icon libraries
+- [UI Patterns](https://www.drupal.org/project/ui_patterns)           - Drupal module: provides reusable UI patterns
+- [UI Skins](https://www.drupal.org/project/ui_skins)                 - Drupal module: allows for themeable UI skins
+- [UI Styles](https://www.drupal.org/project/ui_styles)               - Drupal module: manages global UI styles
+
+### Development
+- [Apache](https://httpd.apache.org/)                                 - Apache 2.4 or higher for local development server
+- [PHP](https://www.php.net)                                          - PHP 8.0 or higher for Drupal and Composer (PHP 8.4 recommended)
+- [Composer](https://getcomposer.org)                                 - Composer 2 or higher for managing Drupal dependencies
+- [Node.js](https://nodejs.org)                                       - Node.js 14 or higher for asset compilation
+- [Gulp](https://gulpjs.com/)                                         - Gulp 4 for automating asset pipeline tasks
+- [PostCSS](https://postcss.org/)                                     - PostCSS 8 for processing CSS with plugins (import resolution, polyfills, minification)
 
 ## Structure
 

gulpfile.js

@@ -16,6 +16,8 @@ import postcss_cq             from 'cqfill/postcss'
 import postcss_import         from 'postcss-import'
 import postcss_imports        from 'postcss-import-ext-glob'
 import postcss_lightningcss   from 'postcss-lightningcss'
+import postcss_media          from 'postcss-custom-media'
+import postcss_nested         from 'postcss-nested'
 import postcss_reporter       from 'postcss-reporter'
 
 import stylelint              from 'stylelint'
@@ -44,6 +46,8 @@ function styles() {
     postcss_cq,
     postcss_imports,
     postcss_import,
+    postcss_media(),
+    postcss_nested,
 
     postcss_lightningcss({
       browsers: 'last 2 versions, not dead',

matter.info.yml

@@ -8,6 +8,7 @@ libraries:
   - matter/global-styling
 
 dependencies:
+  - body_roles_classes:body_roles_classes
   - components:components
   - mgv:mgv
   - ui_icons:ui_icons

package.json

@@ -19,9 +19,11 @@
     "gulp-uglify": "^3.0.2",
     "postcss": "^8.5.12",
     "postcss-cli": "^11.0.1",
+    "postcss-custom-media": "^12.0.1",
     "postcss-import": "^16.1.1",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-lightningcss": "^1.1.0",
+    "postcss-nested": "^7.0.2",
     "postcss-reporter": "^7.1.0",
     "stylelint": "^17.9.1",
     "stylelint-config-standard": "^40.0.0"

source/00-nucleus/defaults.nucleus.css

@@ -44,7 +44,7 @@ body {
     ol {
       &:not(.contextual-links, .entity-moderation-form, .format-filter-guidelines ul) {
         display: grid;
-        margin-inline-start: var(--gap);
+        margin-inline-start: var(--space--gap);
       }
     }
   }
@@ -53,7 +53,7 @@ body {
 .site-main {
   grid-area: main;
   grid-template-rows: auto 1fr;
-  padding-block-end: var(--gap);
+  padding-block-end: var(--space--gap);
 }
 
 .site-footer {

source/00-nucleus/root/globals.root.css

@@ -1,7 +1,7 @@
 @import "./globals/reset.css";
 @import "./globals/utilities.css";
 @import "./globals/typography.css";
-/* @import "./globals/forms.css"; */
 @import "./globals/layout.css";
 /* @import "./globals/animations.css"; */
 @import "./globals/styling.css";
+@import "./globals/forms.css";

source/00-nucleus/root/globals/forms.alt.css

@@ -0,0 +1,45 @@
+.form-field {
+  --form-field-width: 30ch;
+
+  background-color: var(--color-light--002);
+  border: 2px solid;
+  border-radius: var(--border-radius);
+  padding: 0.25em 0.5em;
+  font-family: inherit;
+  color: inherit;
+
+  /* fallback */
+  font-size: 16px;
+  /* Capitalized to prevent Sass thinking it's the Sass max() */
+  font-size: max(16px, 1em);
+  max-width: 100%;
+  width: var(--form-field-width, 30ch);
+
+  &:not(textarea, .select--multiple) {
+    line-height: 1;
+    height: 2.25rem;
+  }
+
+  & select {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    width: 100%;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    cursor: inherit;
+    line-height: inherit;
+
+    /* Remove dropdown arrow in IE10 & IE11 */
+    /* @link https://www.filamentgroup.com/lab/select-css.html */
+    &::-ms-expand {
+      display: none;
+    }
+
+    /* Remove focus outline, will add on alternate element */
+    outline: none;
+  }
+}

source/00-nucleus/root/globals/forms.css

@@ -1,51 +1,55 @@
-form,
-  .form-wrapper, {
-  > .form-item {
-    > * {
-      margin-block-end: var(--gap-alt);
-    }
+:is(.off-canvas) {
+  form {
+    gap: var(--space--gap);
+    grid-auto-rows: max-content;
   }
-}
 
-button,
-input,
-select,
-textarea {
-  margin: 0;
-  padding: var(--padding-default);
-  border: 2px solid var(--color-black--001);
-  border-radius: 0;
-  field-sizing: content;
-  font-family: inherit;
-  font-size: inherit;
-  background-color: var(--color-white--002);
-
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    outline: 0;
+  button,
+  input,
+  select,
+  textarea {
+    margin: 0;
+    padding: var(--padding-default);
+    border: 2px solid var(--color-dark--001);
     border-radius: 0;
+    field-sizing: content;
+    font-family: inherit;
+    font-size: inherit;
+    background-color: var(--color-light--002);
+
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      outline: 0;
+      border-radius: 0;
+    }
   }
-}
 
-button,
-input,
-select {
-  min-inline-size: 0;
-}
+  button,
+  input,
+  select {
+    min-inline-size: 0;
+  }
 
-input,
-textarea {
-  &:focus,
-  &:focus-visible,
-  &:focus-within {
-    &::placeholder {
-      color: transparent;
+  input,
+  textarea {
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      &::placeholder {
+        color: transparent;
+      }
     }
   }
-}
 
-textarea {
-  min-inline-size: 100%;
-  min-block-size: 10rem;
+  textarea {
+    min-block-size: 10rem;
+  }
+
+  :is(.form-item) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space)
+  }
+
 }

source/00-nucleus/root/globals/forms.old.css

@@ -0,0 +1,51 @@
+form,
+  .form-wrapper {
+  > .form-item {
+    > * {
+      margin-block-end: var(--space--gap-alt);
+    }
+  }
+}
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  padding: var(--padding-default);
+  border: 2px solid var(--color-dark--001);
+  border-radius: 0;
+  field-sizing: content;
+  font-family: inherit;
+  font-size: inherit;
+  background-color: var(--color-light--002);
+
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    outline: 0;
+    border-radius: 0;
+  }
+}
+
+button,
+input,
+select {
+  min-inline-size: 0;
+}
+
+input,
+textarea {
+  &:focus,
+  &:focus-visible,
+  &:focus-within {
+    &::placeholder {
+      color: transparent;
+    }
+  }
+}
+
+textarea {
+  min-inline-size: 100%;
+  min-block-size: 10rem;
+}