@ons/design-system 70.0.17 → 72.0.1

package/scss/base/_global.scss

@@ -12,6 +12,8 @@ html {
 }
 
 body {
+    @extend .ons-u-fs-r;
+
     height: 100%;
     margin: 0;
     position: relative;

package/scss/base/_typography.scss

@@ -2,7 +2,6 @@ html {
     @include font-smoothing;
 
     font-size: $base;
-    line-height: 1.6;
 }
 
 body {
@@ -21,7 +20,6 @@ h3,
 h4,
 h5,
 h6 {
-    line-height: 1.2;
     margin: 0 0 1rem;
     strong {
         @extend .ons-highlight;

package/scss/main.scss

@@ -10,7 +10,6 @@
 @import '../components/breadcrumbs/breadcrumbs';
 @import '../components/browser-banner/browser-banner';
 @import '../components/button/button';
-@import '../components/call-to-action/call-to-action';
 @import '../components/card/card';
 @import '../components/checkboxes/checkbox';
 @import '../components/checkboxes/checkboxes';

package/scss/objects/_container.scss

@@ -26,7 +26,7 @@
 }
 
 .ons-grid__col {
-    font-size: 1rem;
+    font-size: 1.125rem;
 }
 
 @include bp-suffix('ons-container--gutterless', $create-between-breakpoints: true) {

package/scss/objects/_page.scss

@@ -15,10 +15,9 @@
 }
 
 .ons-page__main {
-    margin-bottom: 4.5rem;
-    margin-top: 2.5rem;
+    margin: 2.5rem 0 4rem;
 
-    @include mq(xxs, m) {
+    @include mq('2xs', m) {
         margin-top: 1.5rem;
     }
 }

package/scss/overrides/rtl.scss

@@ -64,7 +64,7 @@
     // Buttons
     .ons-btn {
         .ons-icon {
-            margin: 0 0.5rem 0.1rem 0;
+            margin: 0 0.5rem 0.125rem 0;
             transform: rotate(180deg);
         }
     }

package/scss/utilities/_grid.scss

@@ -4,108 +4,143 @@
     box-sizing: border-box;
     font-size: 0;
     margin-left: -$grid-gutters;
-}
-
-.ons-grid--float {
-    letter-spacing: 0;
-}
 
-.ons-grid--center {
-    text-align: center;
-    .ons-grid__col {
-        text-align: left;
+    &--float {
+        letter-spacing: 0;
     }
-}
 
-.ons-grid--center-all {
-    text-align: center;
-}
+    &--center {
+        text-align: center;
 
-.ons-grid--reverse {
-    direction: rtl;
-    .ons-grid__col {
-        direction: ltr;
+        .ons-grid__col {
+            text-align: left;
+        }
+
+        &-all {
+            text-align: center;
+        }
     }
-}
 
-.ons-grid--spaced {
-    .ons-grid__col {
-        margin-bottom: $grid-gutters;
+    &--reverse {
+        direction: rtl;
+
+        .ons-grid__col {
+            direction: ltr;
+        }
     }
-    &.ons-grid--tight {
+
+    &--spaced {
         .ons-grid__col {
-            margin-bottom: math.div($grid-gutters, 2);
+            margin-bottom: $grid-gutters;
+        }
+
+        &.ons-grid--tight {
+            .ons-grid__col {
+                margin-bottom: math.div($grid-gutters, 2);
+            }
         }
     }
-}
 
-.ons-grid--align-mid {
-    .ons-grid__col {
-        vertical-align: middle;
+    &--align-mid {
+        .ons-grid__col {
+            vertical-align: middle;
+        }
     }
-}
 
-.ons-grid--stagger-align {
-    .ons-grid__col:nth-of-type(1n) {
-        text-align: right;
+    &--stagger-align {
+        .ons-grid__col:nth-of-type(1n) {
+            text-align: right;
+        }
+
+        .ons-grid__col:nth-of-type(2n) {
+            text-align: left;
+        }
     }
-    .ons-grid__col:nth-of-type(2n) {
-        text-align: left;
+
+    &--tight {
+        margin-left: math.div(-$grid-gutters, 2);
+
+        .ons-grid__col {
+            padding-left: math.div($grid-gutters, 2);
+        }
     }
-}
 
-.ons-grid--tight {
-    margin-left: math.div(-$grid-gutters, 2);
-    .ons-grid__col {
-        padding-left: math.div($grid-gutters, 2);
+    &--loose {
+        margin-left: -$grid-gutters * 2;
     }
-}
 
-.ons-grid--loose {
-    margin-left: -$grid-gutters * 2;
-}
+    &--gutterless {
+        margin-left: 0;
 
-.ons-grid--gutterless {
-    margin-left: 0;
-    .ons-grid__col {
-        padding-left: 0;
+        .ons-grid__col {
+            padding-left: 0;
+        }
     }
-}
 
-.ons-grid--pixelgutter {
-    margin-left: 1px;
-    .ons-grid__col {
-        margin-bottom: 1px;
-        padding-left: 1px;
+    &--pixelgutter {
+        margin-left: 1px;
+
+        .ons-grid__col {
+            margin-bottom: 1px;
+            padding-left: 1px;
+        }
     }
-}
 
-.ons-grid--flex {
-    display: flex;
-    flex-flow: row wrap;
+    &-flex {
+        display: flex;
+        flex-flow: row wrap;
 
-    &.ons-grid--center {
-        justify-content: center;
-    }
+        &--center {
+            justify-content: center;
+        }
 
-    &.ons-grid--between {
-        justify-content: space-between;
+        &--between {
+            justify-content: space-between;
+        }
+
+        &--vertical-top {
+            align-items: start;
+        }
+
+        &--vertical-center {
+            align-items: center;
+        }
     }
 
-    &.ons-grid--vertical-top {
-        align-items: start;
+    &__col {
+        background-clip: content-box;
+        box-sizing: border-box;
+        display: inline-block;
+        // Fixes text overflow issues
+        min-width: 0;
+        padding-left: $grid-gutters;
+        vertical-align: top;
+        width: 100%;
+
+        .ons-grid--float & {
+            display: block;
+            float: left;
+        }
+
+        &--loose {
+            padding-left: $grid-gutters * 2;
+        }
+
+        .ons-grid-flex & {
+            width: auto;
+        }
     }
 
-    &.ons-grid--vertical-center {
-        align-items: center;
+    &_col--flex {
+        display: flex;
     }
 }
 
-@include bp-suffix(ons-grid--no-wrap) {
+@include bp-suffix(ons-grid-flex--no-wrap) {
     flex-wrap: nowrap;
 }
 
-@include bp-suffix(ons-grid--column, $create-between-breakpoints: true) {
+@include bp-suffix(ons-grid-flex--column, $create-between-breakpoints: true) {
     flex-direction: column;
 }
 
@@ -124,34 +159,6 @@
     }
 }
 
-.ons-grid__col {
-    background-clip: content-box;
-    box-sizing: border-box;
-    display: inline-block;
-    // Fixes text overflow issues
-    min-width: 0;
-    padding-left: $grid-gutters;
-    vertical-align: top;
-    width: 100%;
-
-    .ons-grid--float & {
-        display: block;
-        float: left;
-    }
-
-    &--loose {
-        padding-left: $grid-gutters * 2;
-    }
-
-    .ons-grid--flex & {
-        width: auto;
-    }
-}
-
-.ons-grid__col--flex {
-    display: flex;
-}
-
 @include bp-suffix(ons-grid__col--sticky) {
     position: sticky;
     top: 2rem;
@@ -206,7 +213,7 @@
 @include bp-suffix(ons-col-auto) {
     width: auto;
 
-    .ons-grid--flex & {
+    .ons-grid-flex & {
         flex-basis: auto;
         max-width: 100%;
     }

package/scss/utilities/_margin.scss

@@ -1,11 +1,17 @@
 $sizes: (
     no: 0,
-    xxs: 0.25rem,
-    xs: 0.5rem,
+    4xs: 0.125rem,
+    3xs: 0.25rem,
+    2xs: 0.5rem,
+    xs: 0.75rem,
     s: 1rem,
-    m: 1.5rem,
-    l: 2rem,
-    xl: 3rem,
+    m: 1.25rem,
+    l: 1.5rem,
+    xl: 2rem,
+    2xl: 2.5rem,
+    3xl: 3rem,
+    4xl: 4rem,
+    5xl: 5rem,
     auto: auto,
 );
 

package/scss/utilities/_padding.scss

@@ -1,11 +1,18 @@
 $sizes: (
     no: 0,
-    xxs: 0.25rem,
-    xs: 0.5rem,
+    4xs: 0.125rem,
+    3xs: 0.25rem,
+    2xs: 0.5rem,
+    xs: 0.75rem,
     s: 1rem,
-    m: 1.5rem,
-    l: 2rem,
-    xl: 3rem,
+    m: 1.25rem,
+    l: 1.5rem,
+    xl: 2rem,
+    2xl: 2.5rem,
+    3xl: 3rem,
+    4xl: 4rem,
+    5xl: 5rem,
+    auto: auto,
 );
 
 $padding: (

package/scss/utilities/_typography.scss

@@ -6,11 +6,12 @@
 
     font-size: rems($small-size, $base);
     font-weight: map.get($props, weight);
-    line-height: map.get($props, line-height);
+    line-height: map.get($props, line-height-mobile);
 
     @if $small-size != $large-size {
         @include mq(m) {
             font-size: rems($large-size, $base);
+            line-height: map.get($props, line-height-desktop);
         }
     }
 }

package/scss/vars/_forms.scss

@@ -1,19 +1,17 @@
-@import '../helpers/functions';
-
 $input-radius: 3px;
-$input-padding-vertical: 0.39rem;
+$input-padding-vertical: 0.25rem;
 $input-padding-horizontal: 0.5rem;
-$input-width: 20rem;
+$input-width: 22.5rem;
 $input-border-width: 1px;
 $input-widths: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30, 40, 50;
 // Widest character (capital W) is 1.0065rem wide
-$char-max-width: 0.9rem;
-// Widest number (4) is 0.54rem  wide
-$num-max-width: 0.54rem;
+$char-max-width: 1.013rem;
+// Widest number (4) is 0.607rem wide
+$num-max-width: 0.607rem;
 // Not the width of a space, the width of the space between characters with no spaces between
-$char-space-width: 0.029rem;
+$char-space-width: 0.033rem;
 // Space width
-$nbsp-width: 0.256rem;
+$nbsp-width: 0.288rem;
 
 @mixin input-width($class-name, $char-width: $char-max-width) {
     @each $width in $input-widths {
@@ -35,7 +33,7 @@ $nbsp-width: 0.256rem;
 }
 
 @function input-width-calc($chars: 1, $char-width: $char-max-width, $spaces: 0, $num-chars: 0) {
-    // Space between characters is 0.029rem wide
+    // Space between characters is 0.033rem wide
     // Extra 2 pixels are to prevent clipping when the cursor is visible (2px is needed for iOS)
 
     $padding-width: $input-padding-horizontal * 2;

package/scss/vars/_grid.scss

@@ -1,17 +1,17 @@
 @use 'sass:map';
 
 $grid-bp: (
-    xxs: 300px,
+    '2xs': 300px,
     xs: 400px,
     s: 500px,
     m: 740px,
     l: 980px,
     xl: 1300px,
-    xxl: 1600px,
+    '2xl': 1600px,
 ) !default;
 
-$grid-max-width: 57.445rem !default;
-$grid-max-1280: 71.1111rem !default;
+$grid-max-width: 64.625625rem !default;
+$grid-max-1280: 79.9999rem !default;
 $grid-cols: 12 !default;
 $grid-cols-mobile: 4 !default;
 $grid-gutters: 1rem !default;

package/scss/vars/_typography.scss

@@ -2,66 +2,73 @@ $font-sans: 'OpenSans', 'Helvetica Neue', arial, sans-serif !default;
 $font-serif: georgia, serif !default;
 $font-mono: 'RobotoMono', monospace !default;
 
-$base-font-size: 1rem;
-$base-line-height: 1.5;
-
 $font-weight-regular: 400;
 $font-weight-bold: 700;
-$base: 18px;
+
+$base: 16px;
 
 $type-matrix: (
-    ons-u-fs-xxxl: (
+    ons-u-fs-3xl: (
         small: 32px,
         large: 48px,
         weight: $font-weight-bold,
-        line-height: 1.3,
+        line-height-mobile: 44px,
+        line-height-desktop: 56px,
     ),
-    ons-u-fs-xxl: (
+    ons-u-fs-2xl: (
         small: 28px,
         large: 36px,
         weight: $font-weight-bold,
-        line-height: 1.4,
+        line-height-mobile: 40px,
+        line-height-desktop: 48px,
     ),
     ons-u-fs-xl: (
         small: 26px,
         large: 30px,
         weight: $font-weight-bold,
-        line-height: 1.4,
+        line-height-mobile: 36px,
+        line-height-desktop: 40px,
     ),
     ons-u-fs-l: (
         small: 24px,
         large: 26px,
         weight: $font-weight-bold,
-        line-height: 1.4,
+        line-height-mobile: 32px,
+        line-height-desktop: 36px,
     ),
     ons-u-fs-m: (
         small: 20px,
         large: 22px,
         weight: $font-weight-bold,
-        line-height: 1.4,
+        line-height-mobile: 28px,
+        line-height-desktop: 32px,
     ),
     ons-u-fs-r--b: (
-        small: $base,
-        large: $base,
+        small: 18px,
+        large: 18px,
         weight: $font-weight-bold,
-        line-height: 1.4,
+        line-height-mobile: 28px,
+        line-height-desktop: 28px,
     ),
     ons-u-fs-r: (
-        small: $base,
-        large: $base,
+        small: 18px,
+        large: 18px,
         weight: $font-weight-regular,
-        line-height: 1.4,
+        line-height-mobile: 28px,
+        line-height-desktop: 28px,
     ),
     ons-u-fs-s--b: (
         small: 14px,
         large: 14px,
         weight: $font-weight-bold,
-        line-height: 1.4,
+        line-height-mobile: 20px,
+        line-height-desktop: 20px,
     ),
     ons-u-fs-s: (
         small: 14px,
         large: 14px,
         weight: $font-weight-regular,
-        line-height: 1.4,
+        line-height-mobile: 20px,
+        line-height-desktop: 20px,
     ),
 );

package/components/call-to-action/_call-to-action.scss

@@ -1,8 +0,0 @@
-.ons-call-to-action {
-    background: var(--ons-color-cta-bg);
-    padding: 0.85rem 0;
-
-    &__heading {
-        padding-right: 0.2rem;
-    }
-}

package/components/call-to-action/_macro.njk

@@ -1,24 +0,0 @@
-{% macro onsCallToAction(params) %}
-    {% from "components/button/_macro.njk" import onsButton %}
-    <div class="ons-call-to-action">
-        <div class="ons-container">
-            <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
-                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
-                    <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
-                    {% if params.paragraphText %}
-                        <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
-                    {% endif %}
-                </div>
-                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
-                    {{
-                        onsButton({
-                            "text": params.button.text,
-                            "url": params.button.url,
-                            "variants": "small"
-                        })
-                    }}
-                </div>
-            </div>
-        </div>
-    </div>
-{% endmacro %}

package/components/call-to-action/_macro.spec.js

@@ -1,48 +0,0 @@
-/** @jest-environment jsdom */
-
-import * as cheerio from 'cheerio';
-
-import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_CALL_TO_ACTION = {
-    headingText: 'Call to action heading.',
-    paragraphText: 'Descriptive text about call to action',
-    button: {
-        text: 'Start',
-        url: 'https://example.com/start',
-    },
-};
-
-describe('macro: call-to-action', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
-
-    it('has the provided `headingText`', () => {
-        const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
-
-        const headingText = $('.ons-call-to-action__heading').text().trim();
-        expect(headingText).toBe('Call to action heading.');
-    });
-
-    it('has the provided `paragraphText`', () => {
-        const $ = cheerio.load(renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION));
-
-        const paragraphText = $('.ons-call-to-action__text').text().trim();
-        expect(paragraphText).toBe('Descriptive text about call to action');
-    });
-
-    it('outputs the expected call-to-action button', () => {
-        const faker = templateFaker();
-        const buttonSpy = faker.spy('button');
-
-        faker.renderComponent('call-to-action', EXAMPLE_CALL_TO_ACTION);
-
-        expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Start');
-        expect(buttonSpy.occurrences[0]).toHaveProperty('url', 'https://example.com/start');
-    });
-});

package/components/call-to-action/example-call-to-action-default.njk

@@ -1,15 +0,0 @@
----
-'fullWidth': true
----
-
-{% from "components/call-to-action/_macro.njk" import onsCallToAction %}
-{{-
-    onsCallToAction({
-        "headingText": 'Call to action heading.',
-        "paragraphText": 'Descriptive text about call to action',
-        "button": {
-            "text": 'Start',
-            "url": '#0'
-        }
-    })
--}}

package/components/metadata/_macro.njk

@@ -1,14 +0,0 @@
-{% from "components/description-list/_macro.njk" import onsDescriptionList %}
-
-{% macro onsMetadata(params) %}
-    {{
-        onsDescriptionList({
-            "id": params.id,
-            "classes": params.classes,
-            "descriptionListLabel": params.metadataLabel,
-            "termCol": params.termCol,
-            "descriptionCol": params.descriptionCol,
-            "itemsList": params.itemsList
-        })
-    }}
-{% endmacro %}