From 2e85f1264e8a52bfdc8ca1d59535df01a1020054 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 21 Feb 2024 13:26:55 +0100 Subject: [PATCH 1/7] MOBILE-4458 design: Add shadows to design system --- src/theme/theme.dark.scss | 5 ++--- src/theme/theme.design-system.scss | 15 +++++++++++++-- src/theme/theme.light.scss | 9 ++++----- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 58877fed0..7ee163002 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -47,9 +47,8 @@ html.dark { --loader-shine: 90, 90, 90; - --drop-shadow-color: 0, 0, 0, 1; - --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color)); - --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color)); + --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1); + --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1); --ion-card-color: var(--text-color); --ion-card-background: var(--ion-item-background); diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss index 21bf109e1..c305a0240 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -24,9 +24,20 @@ html { --big-radius: var(--radius-lg); --huge-radius: var(--radius-xl); - + // Shadows / Elevation + --drop-shadow-color: 40 40 40; //#282828; + --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20); + --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 0.15), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.02); + --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 0.20),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 0.12),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 0.14); + --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 0.20), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 0.12), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 0.14); // A11y --a11y-min-target-size: 44px; - } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 34607d160..03fd9e53f 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -83,11 +83,10 @@ html { --loader-radius: var(--radius-xs); --loader-display: block; - --drop-shadow-color: 0, 0, 0, 0.5; - --drop-shadow-top: 0px 2px 5px rgba(var(--drop-shadow-color)); - --drop-shadow-bottom: 0px -2px 5px rgba(var(--drop-shadow-color)); - --drop-shadow-end: -2px 0px 5px rgba(var(--drop-shadow-color)); - --drop-shadow-start: 2px 0px 5px rgba(var(--drop-shadow-color)); + --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 0.5); + --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 0.5); + --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 0.5); + --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 0.5); --ion-text-color: var(--text-color); --ion-text-color-rgb: #{$text-color-rgb}; From 4e282938af26e37bbfa8ff60e7baf55b043d74c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 22 Feb 2024 11:40:24 +0100 Subject: [PATCH 2/7] MOBILE-4458 design: Apply font styles --- .../components/error-info/error-info.scss | 4 +- src/theme/helpers/custom.mixins.scss | 12 +-- src/theme/theme.design-system.scss | 83 +++++++++++++++++-- src/theme/theme.light.scss | 2 +- upgrade.txt | 1 + 5 files changed, 85 insertions(+), 17 deletions(-) diff --git a/src/core/components/error-info/error-info.scss b/src/core/components/error-info/error-info.scss index 05c0a69dc..a0723f21f 100644 --- a/src/core/components/error-info/error-info.scss +++ b/src/core/components/error-info/error-info.scss @@ -1,7 +1,7 @@ .core-error-info { background: var(--gray-200); border-radius: var(--radius-xs); - font-size: var(--font-size-sm); + font-size: var(--body-font-size-sm); color: var(--gray-900); p:first-child { @@ -14,7 +14,7 @@ .core-error-info--code { padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2); - font-size: var(--font-size-normal); + font-size: var(--body-font-size-md); } .core-error-info--details p { diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index 87e419ad9..f62bd6116 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/src/theme/helpers/custom.mixins.scss @@ -198,22 +198,22 @@ @mixin core-headings() { h1 { - font-size: 26px; + font: var(--heading-1-font); } h2, .item-heading { - font-size: 24px; + font: var(--heading-2-font); } h3 { - font-size: 22px; + font: var(--heading-3-font); } h4 { - font-size: 20px; + font: var(--heading-4-font); } h5 { - font-size: 18px; + font: var(--heading-5-font); } h6 { - font-size: 16px; + font: var(--heading-6-font); } } diff --git a/src/theme/theme.design-system.scss b/src/theme/theme.design-system.scss index c305a0240..a260930dd 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -1,13 +1,73 @@ html { // Spacing - @for $i from 0 to 13 { + @for $i from 0 to 6 { --spacing-#{$i}: #{$i*4}px; } // Font sizes + + // Body font size --font-size-sm: 12px; - --font-size-normal: 14px; + --font-size-md: 14px; + --font-size-lg: 16px; + + --font-weight-normal: 400; + --font-weight-medium: 500; + + --body-font-size-sm: var(--font-size-sm); + --body-font-size-md: var(--font-size-md); + --body-font-size-lg: var(--font-size-lg); + --body-font-weight: var(--font-weight-normal); + --body-line-height: 150%; + + --link-sm-font-size: var(--font-size-sm); + --link-md-font-size: var(--font-size-md); + --link-lg-font-size: var(--font-size-lg); + --link-font-weight: var(--font-weight-normal); + --link-line-height: 150%; + + // Labels + --label-sm-font-size: 10px; + --label-md-font-size: 12px; + --label-lg-font-size: 14px; + --label-font-weight: var(--font-weight-medium); + + --label-sm-line-height: 16px; + --label-md-line-height: 16px; + --label-lg-line-height: 20px; + + // Subtitles + --subtitle-sm-font-size: 14px; + --subtitle-md-font-size: 16px; + --subtitle-lg-font-size: 20px; + + --subtitle-font-weight: var(--font-weight-medium); + --subtitle-line-height: 150%; + + // Headings + --heading-1-font-size: 28px; + --heading-2-font-size: 24px; + --heading-3-font-size: 22px; + --heading-4-font-size: 20px; + --heading-5-font-size: 18px; + --heading-6-font-size: 16px; + + --heading-1-font-weight: var(--font-weight-normal); + --heading-2-font-weight: var(--font-weight-normal); + --heading-3-font-weight: var(--font-weight-normal); + --heading-4-font-weight: var(--font-weight-medium); + --heading-5-font-weight: var(--font-weight-medium); + --heading-6-font-weight: var(--font-weight-medium); + + --heading-line-height: 130%; + + --heading-1-font: normal normal var(--heading-1-font-weight) var(--heading-1-font-size)/var(--heading-line-height) var(--ion-font-family); + --heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family); + --heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family); + --heading-4-font: normal normal var(--heading-4-font-weight) var(--heading-4-font-size)/var(--heading-line-height) var(--ion-font-family); + --heading-5-font: normal normal var(--heading-5-font-weight) var(--heading-5-font-size)/var(--heading-line-height) var(--ion-font-family); + --heading-6-font: normal normal var(--heading-6-font-weight) var(--heading-6-font-size)/var(--heading-line-height) var(--ion-font-family); // Radiuses --radius-none: 0px; @@ -18,12 +78,6 @@ html { --radius-xl: 24px; --radius-round: 50%; - /** @deprecated since 4.3 **/ - --small-radius: var(--radius-xs); - --medium-radius: var(--radius-sm); - --big-radius: var(--radius-lg); - --huge-radius: var(--radius-xl); - // Shadows / Elevation --drop-shadow-color: 40 40 40; //#282828; --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 0.20); @@ -41,3 +95,16 @@ html { // A11y --a11y-min-target-size: 44px; } + +/** @deprecated since 4.3 **/ +html { + --small-radius: var(--radius-xs); + --medium-radius: var(--radius-sm); + --big-radius: var(--radius-lg); + --huge-radius: var(--radius-xl); +} + +/** @deprecated since 4.4 **/ +html { + --font-size-normal: var(--font-size-md); +} diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index 03fd9e53f..4b8940fcc 100644 --- a/src/theme/theme.light.scss +++ b/src/theme/theme.light.scss @@ -53,7 +53,7 @@ html { --zoom-level: 100%; --text-color: #{$text-color}; - --text-size: var(--font-size-normal); + --text-size: var(--body-font-size-md); --background-color: #{$background-color}; --stroke: var(--gray-300); diff --git a/upgrade.txt b/upgrade.txt index 155c45e9a..1d41a4d00 100644 --- a/upgrade.txt +++ b/upgrade.txt @@ -14,6 +14,7 @@ For more information about upgrading, read the official documentation: https://m - CoreAppProvider.isAutomated() has been deprecated, use CorePlatformService.isAutomated() instead. - Due to a breaking change in cordova-plugin-file, avoid using FileEntry.toURL(). Use CoreFileProvider.getFileEntryURL instead. - FileTransfer service is no longer available, now we recommend use window.FileTransfer instead. + - CSS variable --font-size-normal has been deprecated in favor of --font-size-md. === 4.3.0 === From 75afcb15348308561a4a98408a9101e484f23e5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 22 Feb 2024 11:38:38 +0100 Subject: [PATCH 3/7] MOBILE-4458 design: Renew empty box styles --- .../components/empty-box/core-empty-box.html | 7 ++-- src/core/components/empty-box/empty-box.scss | 35 ++++++++----------- src/core/components/empty-box/empty-box.ts | 7 ++-- .../components/split-view/split-view.html | 2 +- src/theme/theme.dark.scss | 2 ++ src/theme/theme.light.scss | 2 ++ 6 files changed, 29 insertions(+), 26 deletions(-) diff --git a/src/core/components/empty-box/core-empty-box.html b/src/core/components/empty-box/core-empty-box.html index 29d45bbee..6d877d502 100644 --- a/src/core/components/empty-box/core-empty-box.html +++ b/src/core/components/empty-box/core-empty-box.html @@ -1,4 +1,7 @@ - -