From c709dfd90c22e150d46b9cba2c967884fa57da02 Mon Sep 17 00:00:00 2001 From: SriHV Date: Tue, 16 Jul 2024 13:36:53 +0100 Subject: [PATCH 01/61] change in pixels --- src/scss/vars/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/vars/_typography.scss b/src/scss/vars/_typography.scss index 097a3b94ed..7864d56b86 100644 --- a/src/scss/vars/_typography.scss +++ b/src/scss/vars/_typography.scss @@ -7,7 +7,7 @@ $base-line-height: 1.5; $font-weight-regular: 400; $font-weight-bold: 700; -$base: 18px; +$base: 16px; $type-matrix: ( ons-u-fs-xxxl: ( From aa025e3ca71f3330bce7cb47f4ba5ee8305876ce Mon Sep 17 00:00:00 2001 From: Alessio Date: Tue, 16 Jul 2024 14:52:30 +0100 Subject: [PATCH 02/61] updated utility classes matrix --- src/scss/utilities/_typography.scss | 3 ++- src/scss/vars/_typography.scss | 38 +++++++++++++++++------------ 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/scss/utilities/_typography.scss b/src/scss/utilities/_typography.scss index 8bc654dc9e..21dd129000 100644 --- a/src/scss/utilities/_typography.scss +++ b/src/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); } } } diff --git a/src/scss/vars/_typography.scss b/src/scss/vars/_typography.scss index 7864d56b86..684657b9d2 100644 --- a/src/scss/vars/_typography.scss +++ b/src/scss/vars/_typography.scss @@ -2,9 +2,6 @@ $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: 16px; @@ -14,54 +11,63 @@ $type-matrix: ( small: 32px, large: 48px, weight: $font-weight-bold, - line-height: 1.3, + line-height-mobile: 44px, + line-height-desktop: 56px, ), ons-u-fs-xxl: ( 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, ), ); From 6c718c8ab393a1559ce82fa5f6d4a0c7addfba81 Mon Sep 17 00:00:00 2001 From: Alessio Date: Wed, 17 Jul 2024 16:11:56 +0100 Subject: [PATCH 03/61] updated html base font size --- src/scss/base/_typography.scss | 4 +--- src/scss/vars/_typography.scss | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss index 4d424286c8..70f2f0d2b0 100644 --- a/src/scss/base/_typography.scss +++ b/src/scss/base/_typography.scss @@ -1,8 +1,6 @@ html { @include font-smoothing; - - font-size: $base; - line-height: 1.6; + @extend .ons-u-fs-r; } body { diff --git a/src/scss/vars/_typography.scss b/src/scss/vars/_typography.scss index 684657b9d2..e90b171044 100644 --- a/src/scss/vars/_typography.scss +++ b/src/scss/vars/_typography.scss @@ -4,6 +4,7 @@ $font-mono: 'RobotoMono', monospace !default; $font-weight-regular: 400; $font-weight-bold: 700; + $base: 16px; $type-matrix: ( From 49a8228e8d915d2582f4fb6f5ff866463fbf58ef Mon Sep 17 00:00:00 2001 From: Alessio Date: Fri, 19 Jul 2024 14:33:45 +0100 Subject: [PATCH 04/61] implemented new grid --- src/scss/base/_typography.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss index 70f2f0d2b0..31ecc4c7d4 100644 --- a/src/scss/base/_typography.scss +++ b/src/scss/base/_typography.scss @@ -1,6 +1,7 @@ html { @include font-smoothing; - @extend .ons-u-fs-r; + + font-size: $base; } body { From 9e181e6aa812bda0cf8cd949a704769d90c7824f Mon Sep 17 00:00:00 2001 From: Alessio Date: Fri, 26 Jul 2024 16:02:23 +0100 Subject: [PATCH 05/61] added font size to body --- src/scss/base/_global.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scss/base/_global.scss b/src/scss/base/_global.scss index 0fc0b4c501..e9373f3b4a 100644 --- a/src/scss/base/_global.scss +++ b/src/scss/base/_global.scss @@ -12,6 +12,8 @@ html { } body { + @extend .ons-u-fs-r; + height: 100%; margin: 0; position: relative; From 610f4d03d8a5de0698e488fa1f38c6e2715db91f Mon Sep 17 00:00:00 2001 From: Alessio Date: Tue, 30 Jul 2024 10:29:30 +0100 Subject: [PATCH 06/61] first version done --- __snapshots__/layout/_template.spec.js.snap | 28 +++++++++---------- lib/render-page-list.js | 2 +- src/components/access-code/_macro.njk | 2 +- .../access-code/example-access-code-error.njk | 4 +-- .../access-code/example-access-code.njk | 4 +-- .../autosuggest.address.error.js | 2 +- src/components/back-to-top/_back-to-top.scss | 2 +- .../example-full-page-back-to-top.njk | 6 ++-- src/components/button/_button.scss | 6 ++-- src/components/button/_macro.njk | 4 +-- .../button/example-button-custom.njk | 2 +- src/components/call-to-action/_macro.njk | 2 +- src/components/char-check-limit/_macro.njk | 2 +- src/components/checkboxes/_checkbox.scss | 2 +- .../example-checkboxes-with-hidden-label.njk | 4 +-- src/components/cookies-banner/_macro.njk | 2 +- .../description-list/_description-list.scss | 2 +- src/components/document-list/_macro.njk | 4 +-- .../document-list/document-list.scss | 2 +- .../_download-resources.scss | 6 ++-- src/components/field/_field.scss | 2 +- src/components/fieldset/_macro.njk | 2 +- src/components/fieldset/_macro.spec.js | 2 +- src/components/footer/_footer.scss | 2 +- src/components/footer/_macro.njk | 12 ++++---- src/components/header/_header.scss | 2 +- src/components/header/_macro.njk | 4 +-- src/components/header/_macro.spec.js | 6 ++-- src/components/hero/_hero.scss | 2 +- src/components/image/_image.scss | 2 +- ...mple-input-search-with-character-check.njk | 2 +- src/components/input/example-input-search.njk | 2 +- src/components/list/_list.scss | 11 ++++---- src/components/navigation/_macro.njk | 6 ++-- src/components/navigation/_macro.spec.js | 2 +- src/components/pagination/_macro.njk | 4 +-- src/components/password/_macro.njk | 2 +- src/components/password/_macro.spec.js | 4 +-- src/components/question/_macro.njk | 16 +++++------ src/components/question/_macro.spec.js | 6 ++-- src/components/question/_question.scss | 5 ++-- src/components/quote/_quote.scss | 3 +- src/components/radios/_macro.njk | 2 +- src/components/radios/_macro.spec.js | 2 +- ...mple-radios-with-clear-button-expanded.njk | 2 +- .../example-radios-with-clear-button.njk | 2 +- .../related-content/_related-content.scss | 2 +- .../related-content/_section-macro.njk | 2 +- .../example-related-content-general.njk | 4 +-- src/components/reply/_macro.njk | 4 +-- src/components/reply/_macro.spec.js | 2 +- src/components/reply/reply.spec.js | 2 +- src/components/section-navigation/_macro.njk | 4 +-- src/components/share-page/_macro.njk | 2 +- src/components/summary/_macro.njk | 4 +-- src/components/summary/_macro.spec.js | 2 +- .../summary/example-summary-household.njk | 2 +- src/components/table-of-contents/_macro.njk | 6 ++-- .../table-of-contents/_macro.spec.js | 6 ++-- src/components/timeline/_timeline.scss | 2 +- src/components/video/_macro.njk | 4 +-- src/components/video/_video.scss | 2 +- src/layout/_dsTemplate.njk | 2 +- ...ess-input-non-editable-confirm-address.njk | 2 +- .../example-confirmation-page.njk | 2 +- .../example-cookie-settings-page.njk | 4 +-- .../example-download-resources.njk | 6 ++-- .../feedback/example-feedback-form.njk | 2 +- .../feedback/example-feedback-success.njk | 2 +- src/patterns/guide/example-guide-overview.njk | 4 +-- src/patterns/guide/example-guide-rtl.njk | 6 ++-- src/patterns/guide/example-guide.njk | 6 ++-- .../hub-and-spoke/example-hub-complete.njk | 8 +++--- src/patterns/hub-and-spoke/example-hub.njk | 6 ++-- .../hub-and-spoke/example-spoke-continue.njk | 2 +- .../hub-and-spoke/example-spoke-start.njk | 6 ++-- .../hub-and-spoke/example-spoke-summary.njk | 4 +-- src/patterns/news/example-article.njk | 6 ++-- src/patterns/news/example-category.njk | 2 +- src/patterns/news/example-landing.njk | 2 +- src/patterns/news/example-tag.njk | 2 +- .../save-and-sign-out/example-signed-out.njk | 4 +-- .../send-a-web-form/example-errors.njk | 6 ++-- src/patterns/send-a-web-form/example-form.njk | 6 ++-- .../send-a-web-form/example-success.njk | 4 +-- .../example-survey-interstitial-page.njk | 2 +- ...ample-survey-section-introduction-page.njk | 2 +- src/scss/base/_typography.scss | 2 +- src/scss/utilities/_margin.scss | 18 ++++++++---- src/scss/utilities/_padding.scss | 17 +++++++---- 90 files changed, 199 insertions(+), 181 deletions(-) diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index ba70038df6..89d20c9c64 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -827,7 +827,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` -