@ons/design-system 73.13.0 → 74.0.0-gutters.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ons/design-system",
     "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-    "version": "73.13.0",
+    "version": "74.0.0-gutters.0",
     "main": "index.js",
     "license": "MIT",
     "author": {

package/scss/objects/_container.scss

@@ -1,17 +1,29 @@
 .ons-container {
+    --ons-grid-gutter: #{$grid-gutter-mobile};
+    --ons-grid-container-padding: #{$grid-container-padding-mobile};
+
     box-sizing: border-box;
     margin: 0 auto;
     max-width: $grid-max-width;
-    padding: 0 $grid-gutters;
+    padding: 0 var(--ons-grid-container-padding);
     position: relative;
     width: 100%;
 
     @include mq(s) {
-        padding: 0 $grid-gutters;
+        --ons-grid-gutter: #{$grid-gutter-standard};
+        --ons-grid-container-padding: #{$grid-container-padding-standard};
+    }
+
+    &--wide,
+    &--full-width {
+        @include mq(s) {
+            --ons-grid-gutter: #{$grid-gutter-wide};
+            --ons-grid-container-padding: #{$grid-container-padding-wide};
+        }
     }
 
     &--wide {
-        max-width: $grid-max-1280;
+        max-width: $grid-max-width-wide;
     }
 
     &--full-width {

package/scss/utilities/_grid.scss

@@ -3,7 +3,7 @@
 .ons-grid {
     box-sizing: border-box;
     font-size: 0;
-    margin-left: -$grid-gutters;
+    margin-left: calc(var(--ons-grid-gutter) * -1);
 
     &--float {
         letter-spacing: 0;
@@ -31,12 +31,12 @@
 
     &--spaced {
         .ons-grid__col {
-            margin-bottom: $grid-gutters;
+            margin-bottom: var(--ons-grid-gutter);
         }
 
         &.ons-grid--tight {
             .ons-grid__col {
-                margin-bottom: math.div($grid-gutters, 2);
+                margin-bottom: calc(var(--ons-grid-gutter) / 2);
             }
         }
     }
@@ -58,15 +58,15 @@
     }
 
     &--tight {
-        margin-left: math.div(-$grid-gutters, 2);
+        margin-left: calc(var(--ons-grid-gutter) / -2);
 
         .ons-grid__col {
-            padding-left: math.div($grid-gutters, 2);
+            padding-left: calc(var(--ons-grid-gutter) / 2);
         }
     }
 
     &--loose {
-        margin-left: -$grid-gutters * 2;
+        margin-left: calc(var(--ons-grid-gutter) * -2);
     }
 
     &--gutterless {
@@ -111,26 +111,11 @@
         display: flex;
         margin-left: 0;
         flex-flow: column nowrap;
+        gap: var(--ons-grid-gutter);
 
         @include mq('m') {
             flex-direction: row;
         }
-
-        &--xl {
-            column-gap: 2rem;
-        }
-
-        &--l {
-            column-gap: 1.5rem;
-        }
-
-        &--m {
-            column-gap: 1.25rem;
-        }
-
-        &--s {
-            column-gap: 1rem;
-        }
     }
 
     &__col {
@@ -139,7 +124,7 @@
         display: inline-block;
         // Fixes text overflow issues
         min-width: 0;
-        padding-left: $grid-gutters;
+        padding-left: var(--ons-grid-gutter);
         vertical-align: top;
         width: 100%;
 
@@ -154,7 +139,7 @@
 
         &--sticky\@m {
             /* if parent element is set to flex, override the default align-self property
-            from stretch to flex-start so that it stays sticky on scroll after medium breakpoint - 
+            from stretch to flex-start so that it stays sticky on scroll after medium breakpoint -
             this is set for the table of contents component specifically */
             .ons-grid-flex &,
             .ons-grid-flex-gap & {
@@ -163,7 +148,7 @@
         }
 
         &--loose {
-            padding-left: $grid-gutters * 2;
+            padding-left: calc(var(--ons-grid-gutter) * 2);
         }
 
         &--flex {

package/scss/vars/_grid.scss

@@ -10,10 +10,27 @@ $grid-bp: (
     '2xl': 1600px,
 ) !default;
 
-$grid-max-width: 64.6256rem !default;
-$grid-max-1280: 79.9999rem !default;
+$grid-max-width: 69rem !default; // 1104px = 1024 content frame + 2×40 padding
+$grid-max-width-wide: 87.5rem !default; // 1400px = 1304 content frame + 2×48 padding
 $grid-cols: 12 !default;
 $grid-cols-mobile: 4 !default;
-$grid-gutters: 1rem !default;
+
+// Inter-column gutter, per container mode
+$grid-gutter-mobile: 0 !default;
+$grid-gutter-standard: 2rem !default; // 32px
+$grid-gutter-wide: 2.5rem !default; // 40px
+
+// Container horizontal padding (space between container edge and its content)
+$grid-container-padding-mobile: 1rem !default; // 16px
+$grid-container-padding-standard: 2.5rem !default; // 40px
+$grid-container-padding-wide: 3rem !default; // 48px
+
 $grid-bp-fixed: map.get($grid-bp, m) !default;
 $grid-baseline: 16px;
+
+// Default custom properties for standalone .ons-grid usage (outside any .ons-container).
+// .ons-container overrides these via inheritance.
+:root {
+    --ons-grid-gutter: #{$grid-gutter-standard};
+    --ons-grid-container-padding: #{$grid-container-padding-standard};
+}