@ons/design-system 74.0.0-next.1 → 74.0.0-next.11

package/scss/base/_global.scss

@@ -17,6 +17,14 @@ body {
     height: 100%;
     margin: 0;
     position: relative;
+
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+
+    @media (orientation: landscape) {
+        padding-left: env(safe-area-inset-left, 0px);
+        padding-right: env(safe-area-inset-right, 0px);
+    }
 }
 
 img {

package/scss/base/_typography.scss

@@ -12,6 +12,7 @@ body {
 
 p {
     margin: 0 0 1rem;
+    @include reading-width;
 }
 
 h1,
@@ -26,6 +27,14 @@ h6 {
     }
 }
 
+h2,
+h3,
+h4,
+h5,
+h6 {
+    @include reading-width;
+}
+
 mark {
     @extend .ons-highlight;
 

package/scss/helpers/_mixins.scss

@@ -98,3 +98,11 @@
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 }
+
+@mixin reading-width {
+    max-width: $reading-width;
+}
+
+@mixin no-reading-width {
+    max-width: none;
+}

package/scss/main.scss

@@ -28,6 +28,7 @@
 @import '../components/field/field-group';
 @import '../components/field/field';
 @import '../components/fieldset/fieldset';
+@import '../components/figure/figure';
 @import '../components/footer/footer';
 @import '../components/header/header';
 @import '../components/hero/hero';

package/scss/objects/_page.scss

@@ -23,7 +23,7 @@
 }
 
 // Adjust margin-top when .ons-page__main contains .ons-panel--error
-.ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
+header:has(.ons-breadcrumbs) ~ main .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) {
     margin-top: 1rem;
 }
 

package/scss/objects/_spacing.scss

@@ -16,7 +16,3 @@
         margin-top: 1.5rem;
     }
 }
-
-.ons-breadcrumbs + .ons-grid {
-    margin-top: -1rem;
-}

package/scss/utilities/_utilities.scss

@@ -34,3 +34,13 @@
 @include bp-suffix(ons-u-wa--) {
     width: auto !important;
 }
+
+// Utility class to restrict reading width (mixin defined in helpers/_mixins.scss)
+.ons-u-reading-width {
+    @include reading-width;
+}
+
+// Utility class to override reading width restriction (mixin defined in helpers/_mixins.scss)
+.ons-u-no-reading-width {
+    @include no-reading-width;
+}

package/scss/vars/_forms.scss

@@ -16,7 +16,8 @@ $nbsp-width: 0.288rem;
 @mixin input-width($class-name, $char-width: $char-max-width) {
     @each $width in $input-widths {
         .#{str-replace($class-name, '{x}', $width)} {
-            max-width: input-width-calc($width, $char-width);
+            // Cap at reading-width so very wide classes don't exceed it
+            max-width: min(#{input-width-calc($width, $char-width)}, $reading-width);
             width: 100%;
 
             .ons-field__group & {

package/scss/vars/_index.scss

@@ -3,3 +3,4 @@
 @import './typography';
 @import './grid';
 @import './forms';
+@import './utilities';

package/scss/vars/_utilities.scss

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