@ons/design-system 74.0.0-next.14 → 74.0.0-next.16

package/scss/objects/_container.scss

@@ -1,17 +1,34 @@
 .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;
+    @include mq(m) {
+        --ons-grid-gutter: #{$grid-gutter-tablet};
+        --ons-grid-container-padding: #{$grid-container-padding-tablet};
+    }
+
+    @include mq(l) {
+        --ons-grid-gutter: #{$grid-gutter-standard};
+        --ons-grid-container-padding: #{$grid-container-padding-desktop-standard-mode};
+    }
+
+    &--wide,
+    &--full-width {
+        @include mq(l) {
+            --ons-grid-gutter: #{$grid-gutter-wide};
+            --ons-grid-container-padding: #{$grid-container-padding-desktop-wide-mode};
+        }
     }
 
     &--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;
+        column-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/_forms.scss

@@ -47,14 +47,3 @@ $nbsp-width: 0.288rem;
         #{$padding-width + $chars-width + $num-chars-width + $chars-space-width + $spaces-width} + #{($input-border-width * 2) + 2px}
     );
 }
-
-$iframe-ratios: '16-9', '4-3', '21-9', '1-1', '3-2', '9-16';
-
-@mixin iframe-aspect-ratio($class-name, $ratios: $iframe-ratios) {
-    @each $ratio in $ratios {
-        .#{str-replace($class-name, '{x}', $ratio)} {
-            aspect-ratio: #{str-replace($ratio, '-', '/')};
-            width: 100%;
-        }
-    }
-}

package/scss/vars/_grid.scss

@@ -10,10 +10,29 @@ $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-tablet: 2rem !default; // 32px
+$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-tablet: 2rem !default; // 32px
+$grid-container-padding-desktop-standard-mode: 2.5rem !default; // 40px
+$grid-container-padding-desktop-wide-mode: 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-desktop-standard-mode};
+}

package/scss/vars/_utilities.scss

@@ -1,2 +1,2 @@
 // equivalent of 9 columns at standard width
-$reading-width: 41.75rem; // 668px
+$reading-width: 42rem; // 672px

package/components/chart/chart-iframe-resize.dom.js

@@ -1,8 +0,0 @@
-import ChartIframeResize from './chart-iframe-resize';
-import domready from '../../js/domready';
-
-domready(async () => {
-    [ChartIframeResize].forEach((Component) => {
-        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
-    });
-});

package/components/chart/chart-iframe-resize.js

@@ -1,16 +0,0 @@
-import pym from 'pym.js';
-
-class ChartIframeResize {
-    static selector() {
-        return '.ons-chart__iframe-wrapper iframe';
-    }
-
-    constructor(node) {
-        this.node = node;
-        new pym.Child(this.node.getAttribute('id'), this.node.dataset.url, {
-            title: this.node.dataset.title,
-        });
-    }
-}
-
-export default ChartIframeResize;

package/components/chart/example-iframe-chart.njk

@@ -1,36 +0,0 @@
-{% from "components/chart/_macro.njk" import onsChart %}
-
-{# Important note: the example visualisation used here by the iframeUrl parameter
-may not be available in the future once Florence is decommissioned. #}
-
-{{
-    onsChart({
-        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
-        "title": "Food stores showed a strong rise on the month, while non-food stores fell",
-        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
-        "id": "uuid",
-        "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
-        "download": {
-            'title': 'Download Figure 1 data',
-            'itemsList': [
-                {
-                    "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#",
-                    "download": "file"
-                },
-                {
-                    "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#",
-                    "download": "file"
-                },
-                {
-                    "text": "Image (PNG format, 25KB)",
-                    "url": "#",
-                    "download": "file"
-                }
-            ]
-        },
-        "iframeUrl": "/iframe/index.html",
-        "fallbackImageUrl": "/img/small/line-chart-screenshot.png"
-    })
-}}