@graupl/graupl 1.0.0-alpha.11 → 1.0.0-alpha.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {
@@ -56,6 +56,7 @@
     "globals": "^15.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
+    "normalize.css": "^8.0.1",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-discard-comments": "^7.0.0",

package/scss/base/button.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl button base.
+
+@forward "../../src/scss/base/button";

package/scss/base/form.scss

@@ -1,3 +1,3 @@
-// Graupl form base styles.
+// @graupl/graupl form base.
 
 @forward "../../src/scss/base/form";

package/scss/base/link.scss

@@ -1,3 +1,3 @@
-// Link base styles.
+// @graupl/graupl link base.
 
 @forward "../../src/scss/base/link";

package/scss/base/table.scss

@@ -1,3 +1,3 @@
-// Table base styles.
+// @graupl/graupl table base.
 
 @forward "../../src/scss/base/table";

package/scss/base.scss

@@ -1,3 +1,3 @@
-// Graupl base.
+// @graupl/graupl base.
 
 @forward "../src/scss/base";

package/scss/component/card.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl card component.
+
+@forward "../../src/scss/component/card";

package/scss/component/input-group.scss

@@ -1,3 +1,3 @@
-// Graupl Input group Component.
+// @graupl/graupl input group component.
 
 @forward "../../src/scss/component/input-group";

package/scss/component/menu.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl menu component.
+
+@forward "../../src/scss/component/menu";

package/scss/component/navigation.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl navigation component.
+
+@forward "../../src/scss/component/navigation";

package/scss/component.scss

@@ -1,3 +1,3 @@
-// Graupl components.
+// @graupl/graupl components.
 
 @forward "../src/scss/component";

package/scss/graupl.scss

@@ -1,5 +1,3 @@
-// Graupl Components.
-//
-// Forwards all components for easy development.
+// @graupl/graupl
 
 @forward "../src/scss";

package/scss/init.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl layer initialization.
+
+@forward "../src/scss/init";

package/scss/layout/columns.scss

@@ -1,3 +1,3 @@
-// Graupl Columns layout.
+// @graupl/graupl columns layout.
 
 @forward "../../src/scss/layout/columns";

package/scss/layout/container.scss

@@ -1,3 +1,3 @@
-// Graupl Container layout.
+// @graupl/graupl container layout.
 
 @forward "../../src/scss/layout/container";

package/scss/layout/flex-columns.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl flex columns layout.
+
+@forward "../../src/scss/layout/flex-columns";

package/scss/layout.scss

@@ -1,3 +1,3 @@
-// Graupl layout.
+// @graupl/graupl layout.
 
 @forward "../src/scss/";

package/scss/normalize.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl normalize.
+
+@forward "../src/scss/normalize";

package/scss/state/focus.scss

@@ -1,3 +1,3 @@
-// Focus state styles.
+// @graupl/graupl focus state.
 
 @forward "../../src/scss/state/focus";

package/scss/state.scss

@@ -1,3 +1,3 @@
-// Graupl state.
+// @graupl/graupl state.
 
 @forward "../src/scss/state";

package/scss/theme/color.scss

@@ -1,3 +1,3 @@
-// Color theme styles.
+// @graupl/graupl color theme.
 
 @forward "../../src/scss/theme/color";

package/scss/theme/typography.scss

@@ -1,3 +1,3 @@
-// Typography theme styles.
+// @graupl/graupl typography theme.
 
 @forward "../../src/scss/theme/typography";

package/scss/theme.scss

@@ -1,3 +1,3 @@
-// Graupl theme.
+// @graupl/graupl theme.
 
 @forward "../src/scss/theme";

package/scss/utilities/alignment.scss

@@ -1,3 +1,3 @@
-// Graupl alignment utilities.
+// @graupl/graupl alignment utilities.
 
 @forward "../../src/scss/utilities/alignment";

package/scss/utilities/color.scss

@@ -1,3 +1,3 @@
-// Graupl color utilities.
+// @graupl/graupl color utilities.
 
 @forward "../../src/scss/utilities/color";

package/scss/utilities/display.scss

@@ -1,3 +1,3 @@
-// Graupl display utilities.
+// @graupl/graupl display utilities.
 
 @forward "../../src/scss/utilities/display";

package/scss/utilities/flex.scss

@@ -1,3 +1,3 @@
-// Graupl flex utilities.
+// @graupl/graupl flex utilities.
 
 @forward "../../src/scss/utilities/flex";

package/scss/utilities/inset.scss

@@ -1,3 +1,3 @@
-// Graupl inset utilities.
+// @graupl/graupl inset utilities.
 
 @forward "../../src/scss/utilities/inset";

package/scss/utilities/justification.scss

@@ -1,3 +1,3 @@
-// Graupl justification utilities.
+// @graupl/graupl justification utilities.
 
 @forward "../../src/scss/utilities/justification";

package/scss/utilities/list.scss

@@ -1,3 +1,3 @@
-// Graupl list utilities.
+// @graupl/graupl list utilities.
 
 @forward "../../src/scss/utilities/list";

package/scss/utilities/order.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl order utilities.
+
+@forward "../../src/scss/utilities/order";

package/scss/utilities/postion.scss

@@ -1,3 +1,3 @@
-// Graupl position utilities.
+// @graupl/graupl position utilities.
 
 @forward "../../src/scss/utilities/position";

package/scss/utilities/spacing.scss

@@ -1,3 +1,3 @@
-// Graupl spacing utilities.
+// @graupl/graupl spacing utilities.
 
 @forward "../../src/scss/utilities/spacing";

package/scss/utilities/typography.scss

@@ -1,3 +1,3 @@
-// Graupl typography utilities.
+// @graupl/graupl typography utilities.
 
 @forward "../../src/scss/utilities/typography";

package/scss/utilities/visibility.scss

@@ -1,3 +1,3 @@
-// Graupl visibility utilities.
+// @graupl/graupl visibility utilities.
 
 @forward "../../src/scss/utilities/visibility";

package/scss/utilities.scss

@@ -1,3 +1,3 @@
-// Graupl utilities.
+// @graupl/graupl utilities.
 
 @forward "../src/scss/utilities";

package/src/js/navigation.js

@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const navs = document.querySelectorAll(".navigation");
+  const menus = [];
+
+  navs.forEach((nav) => {
+    const MenuConstructor = nav.dataset.grauplMenuType || DisclosureMenu;
+
+    if (window[MenuConstructor] === undefined) {
+      console.warn(
+        `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
+      );
+
+      return;
+    }
+
+    const menuOptions =
+      JSON.parse(nav.dataset.grauplMenuOptions.replace(/'/g, '"')) || {};
+    const menuElement = nav.querySelector(".menu");
+    const controllerElement = nav.querySelector(".navigation-toggle");
+    const containerElement = nav;
+    const menu = new window[MenuConstructor]({
+      menuElement,
+      menuItemSelector: ".menu-item",
+      menuLinkSelector: ".menu-link",
+      submenuItemSelector: ".submenu-item",
+      submenuToggleSelector: ".submenu-toggle",
+      controllerElement,
+      containerElement,
+      ...menuOptions,
+    });
+
+    menus.push(menu);
+  });
+});

package/src/scss/_defaults.scss

@@ -1,8 +1,10 @@
-// Default values for Graupl.
+// @graupl/graupl default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "sass:map";
 
@@ -17,10 +19,24 @@ $content-max-width: 96ch !default;
 
 // Screen sizes.
 $base-screen-sizes: (
-  xs: "(0 <= width <= 48ch)",
+  xs: "(width <= 48ch)",
+  sm: "(48ch < width)",
+  md: "(72ch < width)",
+  lg: "(108ch < width)",
+  xl: "(156ch < width)",
 );
 $custom-screen-sizes: () !default;
 $screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
+$base-screen-size-triggers: (
+  navigation-collapse: "(width <= 72ch)",
+  navigation-expand: "(72ch < width)",
+  force-vertical-card: "(width <= 72ch)",
+);
+$custom-screen-size-triggers: () !default;
+$screen-size-triggers: map.merge(
+  $base-screen-size-triggers,
+  $custom-screen-size-triggers
+);
 
 // Spacing properties.
 $spacer: 1rem !default;

package/src/scss/_index.scss

@@ -1,10 +1,11 @@
-// Graupl Components.
-//
-// Forwards all components for easy development.
+// @graupl/graupl styles.
 
 // Forward the layer initialization.
 @forward "init";
 
+// Forward normalize.
+@forward "normalize";
+
 // Forward all layers.
 @forward "base";
 @forward "layout";

package/src/scss/_init.scss

@@ -1,3 +1,3 @@
-// Graupl layer initialization.
+// @graupl/graupl layer initialization styles.
 
-@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;
+@layer graupl.normalize, graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;

package/src/scss/_normalize.scss

@@ -0,0 +1,197 @@
+// @graupl/graupl normalize.
+//
+// This file is manually forked from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+//
+// We wanted to scope normalize.css to a normalize layer along with some customizations, so we forked it here.
+//
+// @use cannot be used in this file because you cannot insert it into a layer.
+//
+// @import would technically work, but it is not recommended by Sass and will eventually be removed.
+// Using @import would cause headaches down the line, so a manual fork was the best option.
+
+@use "mixins/layer" as *;
+
+@include layer(normalize) {
+  // Correct box sizing of all elements to ensure everything is consistent.
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // Document.
+
+  // 1. Correct the line height in all browsers.
+  // 2. Prevent adjustments of font size after orientation changes in iOS.
+  html {
+    line-height: 1.15; // 1.
+    text-size-adjust: 100%; // 2.
+  }
+
+  // Secions.
+
+  // Remove the margin in all browsers.
+  body {
+    margin: 0;
+  }
+
+  // Grouping content.
+
+  // Add the correct box sizing in Firefox.
+  hr {
+    box-sizing: content-box;
+    height: 0;
+  }
+
+  // 1. Correct the inheritance and scaling of font size in all browsers.
+  // 2. Correct the odd `em` font sizing in all browsers.
+  pre {
+    font-family: monospace; // 1.
+    font-size: 1em; // 2.
+  }
+
+  // Text-level semantics.
+
+  // 1. Remove the bottom border in Chrome 57-
+  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+  abbr[title] {
+    border-bottom: 0; // 1.
+    text-decoration: underline dotted; // 2.
+  }
+
+  // Add the correct font weight in Chrome, Edge, and Safari.
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  // 1. Correct the inheritance and scaling of font size in all browsers.
+  // 2. Correct the odd `em` font sizing in all browsers.
+  code,
+  kbd,
+  samp {
+    font-family: monospace; // 1.
+    font-size: 1em; // 2.
+  }
+
+  // Add the correct font size in all browsers.
+  small {
+    font-size: 80%;
+  }
+
+  // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+  sub,
+  sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  // Forms.
+
+  // 1. Change the font styles in all browsers.
+  // 2. Remove the margin in Firefox and Safari.
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    margin: 0; // 2.
+    font-family: inherit; // 1.
+    font-size: 100%; // 1.
+    line-height: 1.15; // 1.
+  }
+
+  // Remove the inheritance of text transform in Firefox.
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+
+  // Correct the inability to style clickable types in iOS and Safari.
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    appearance: button;
+  }
+
+  // Remove the inner border and padding in Firefox.
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    padding: 0;
+    border-style: none;
+  }
+
+  // Restore the focus styles unset by the previous rule.
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  // Correct the padding in Firefox.
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
+  legend {
+    padding: 0;
+  }
+
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  progress {
+    vertical-align: baseline;
+  }
+
+  // Correct the cursor style of increment and decrement buttons in Chrome.
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  // 1. Correct the odd appearance in Chrome and Safari.
+  // 2. Correct the outline style in Safari.
+  [type="search"] {
+    appearance: textfield; // 1.
+    outline-offset: -2px; // 2.
+  }
+
+  // Remove the inner padding in Chrome and Safari on macOS.
+  [type="search"]::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  // 1. Correct the inability to style clickable types in iOS and Safari.
+  // 2. Change font properties to `inherit` in Safari.
+  ::-webkit-file-upload-button {
+    appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  // Interactive.
+
+  // Add the correct display in Edge, IE 10+, and Firefox.
+  details {
+    display: block;
+  }
+
+  // Add the correct display in all browsers.
+  summary {
+    display: list-item;
+  }
+}

package/src/scss/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "sass:map";

package/src/scss/base/_index.scss

@@ -1,5 +1,6 @@
-// Graupl base.
+// @gruapl/graupl base styles.
 
+@forward "button";
 @forward "form";
 @forward "link";
 @forward "table";

package/src/scss/base/button/_defaults.scss

@@ -0,0 +1,53 @@
+// @graupl/graupl button base default values.
+//
+// Generally, these should not be used directly when styling bases unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Button selectors.
+$button-selector: ".button" !default;
+$button-link-selector: ".link" !default;
+$button-theme-selector-prefix: "." !default;
+
+// Button properties.
+$button-transform: none !default;
+$button-visited-transform: $button-transform !default;
+$button-focus-transform: $button-transform !default;
+$button-hover-transform: $button-transform !default;
+$button-active-transform: scale(0.95) !default;
+$button-disabled-transform: $button-transform !default;
+
+// Button state theme defaults.
+// This map is used to define the default colour shades for the
+// themed button bases.
+//
+// e.g.
+// Primary buttons will use primary--900 as the text colour, primary--100 as the background
+// and primary--900 as the border colour.
+//
+// Secondary/tertiary buttons will use the same shade for their respective colours.
+$base-button-state-theme-map: (
+  color: 900,
+  border-color: 700,
+  visited-color: 900,
+  visited-border-color: 700,
+  focus-color: 900,
+  focus-border-color: 700,
+  hover-color: 100,
+  hover-background: 700,
+  hover-border-color: 700,
+  active-color: 100,
+  active-background: 700,
+  active-border-color: 700,
+  disabled-color: 200,
+  disabled-border-color: 200,
+);
+$custom-button-state-theme-map: () !default;
+$button-state-theme-map: map.merge(
+  $base-button-state-theme-map,
+  $custom-button-state-theme-map
+);