Update

.stylelintignore

@@ -1,2 +1,2 @@
 scss/mixin/_layout.scss
-scss/plugin/_normalize.scss
+scss/plugin/_reset.scss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockchainhub/coco",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Modern CSS framework based on Flexbox.",
   "keywords": [
     "css",
@@ -9,6 +9,7 @@
     "front-end",
     "responsive",
     "sass",
+    "scss",
     "sass-framework",
     "web"
   ],
@@ -62,5 +63,6 @@
     "dist",
     "LICENSE",
     "README.md"
-  ]
+  ],
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

scss/config/_generator.scss

@@ -10,7 +10,7 @@ $generators: map.deep-merge(
       'divider': true,
       'layout': true,
       'media': true,
-      'normalize': true,
+      'reset': true,
       'print': true,
       'root': true,
       'table': true,

scss/config/_info.scss

@@ -1,5 +1,3 @@
-$v: '2.0.0';
-
 .coco.version::after {
   content: '#{$v}';
 }

scss/element/_grid.scss

@@ -28,8 +28,8 @@ $container-widths: config('container-widths', $grid, false);
 // Column Mixin for Flexbox Grid
 @mixin col($columns) {
   box-sizing: border-box;
-  flex: 0 0 math.percentage($columns / $grid-columns);
-  max-width: math.percentage($columns / $grid-columns);
+  flex: 0 0 math.percentage(math.div($columns, $grid-columns));
+  max-width: math.percentage(math.div($columns, $grid-columns));
   padding: $gutter;
   text-align: center;
 }

scss/form/_group.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use '../function' as *;
 @use '../mixin' as *;
 @use '../config' as *;
@@ -89,7 +90,7 @@
     }
 
     &-container {
-      container: form-group-container / inline-size;
+      container: list.slash(form-group-container, inline-size);
     }
   }
 }

scss/mixin/_generator.scss

@@ -8,8 +8,8 @@
 
 /// Generate all the styles.
 @mixin generate-styles {
-  @if map.get($generators, 'content', 'normalize') {
-    @include generate-normalize;
+  @if map.get($generators, 'content', 'reset') {
+    @include generate-reset;
   }
 
   @if map.get($generators, 'content', 'root') {

scss/plugin/_index.scss

@@ -1 +1 @@
-@forward 'normalize';
+@forward 'reset';

scss/plugin/_normalize.scss → scss/plugin/_reset.scss

@@ -1,61 +1,40 @@
-@mixin generate-normalize {
+@mixin generate-reset {
 
-  /* 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 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+  * {
+    box-sizing: border-box;
+    position: relative;
+    min-width: 0;
   }
 
-  /* Sections
-    ========================================================================== */
-
-  /**
-  * Remove the margin in all browsers.
-  */
-
   body {
+    min-height: 100dvh;
     margin: 0;
   }
 
-  /**
-  * Render the `main` element consistently in IE.
-  */
-
-  main {
-    display: block;
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
   }
 
-  /**
-  * Correct the font size and margin on `h1` elements within `section` and
-  * `article` contexts in Chrome, Firefox, and Safari.
-  */
-
-  h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+  p {
+    text-wrap: pretty;
   }
 
-  /* Grouping content
+  /* Document
     ========================================================================== */
 
   /**
-  * 1. Add the correct box sizing in Firefox.
-  * 2. Show the overflow in Edge and IE.
+  * 1. Correct the line height in all browsers.
+  * 2. Prevent adjustments of font size after orientation changes in iOS.
   */
 
-  hr {
-    box-sizing: content-box; /* 1 */
-    block-size: 0; /* 1 */
-    overflow: visible; /* 2 */
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
   }
 
+  /* Sections
+    ========================================================================== */
+
   /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
@@ -66,17 +45,6 @@
     font-size: 1em; /* 2 */
   }
 
-  /* Text-level semantics
-    ========================================================================== */
-
-  /**
-  * Remove the gray background on active links in IE 10.
-  */
-
-  a {
-    background-color: transparent;
-  }
-
   /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -117,38 +85,6 @@
     font-size: 80%;
   }
 
-  /**
-  * Prevent `sub` and `sup` elements from affecting the line height in
-  * all browsers.
-  */
-
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  /* Embedded content
-    ========================================================================== */
-
-  /**
-  * Remove the border on images inside links in IE 10.
-  */
-
-  img {
-    border-style: none;
-  }
-
   /* Forms
     ========================================================================== */
 
@@ -243,25 +179,6 @@
     vertical-align: baseline;
   }
 
-  /**
-  * Remove the default vertical scrollbar in IE 10+.
-  */
-
-  textarea {
-    overflow: auto;
-  }
-
-  /**
-  * 1. Add the correct box sizing in IE 10.
-  * 2. Remove the padding in IE 10.
-  */
-
-  [type="checkbox"],
-  [type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-  }
-
   /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */
@@ -290,23 +207,4 @@
     display: list-item;
     cursor: pointer;
   }
-
-  /* Misc
-    ========================================================================== */
-
-  /**
-  * Add the correct display in IE 10+.
-  */
-
-  template {
-    display: none;
-  }
-
-  /**
-  * Add the correct display in IE 10.
-  */
-
-  [hidden] {
-    display: none;
-  }
 }