From 59280ca81c5905e8a0943b4214fd0be307646682 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 14 Mar 2024 10:15:47 +0100 Subject: [PATCH] MOBILE-4458 design: Apply typography --- .../activityresults/activityresults.scss | 3 +- .../components/blogtags/blogtags.scss | 2 +- .../components/myoverview/myoverview.scss | 4 +- .../block/tags/components/tags/tags.scss | 2 +- .../components/timeline/timeline.scss | 6 +- .../calendar/components/filter/filter.scss | 2 +- .../mod/resource/components/index/index.scss | 2 +- .../mod/survey/components/index/index.scss | 4 +- src/addons/notifications/notifications.scss | 4 +- .../button-with-spinner.scss | 4 +- src/core/components/combobox/combobox.scss | 8 +- .../download-refresh/download-refresh.scss | 4 +- src/core/components/empty-box/empty-box.scss | 2 +- src/core/components/message/message.scss | 4 +- src/core/components/mod-icon/mod-icon.scss | 2 +- .../send-message-form/send-message-form.scss | 4 +- src/core/components/tabs/tabs.scss | 2 +- src/core/components/timer/timer.scss | 2 +- .../block/components/block/block.scss | 2 +- .../module-info/course-module-info.scss | 2 +- .../course/components/module/module.scss | 8 +- .../pages/course-summary/course-summary.scss | 6 +- .../pages/module-preview/module-preview.scss | 2 +- .../rich-text-editor/rich-text-editor.scss | 2 +- .../audio-recorder/audio-recorder.scss | 2 +- .../features/grades/pages/course/course.scss | 2 +- .../features/mainmenu/pages/menu/menu.scss | 2 +- src/core/features/question/question.scss | 2 +- .../report-summary/report-summary.scss | 2 +- .../global-search-result.scss | 18 +- .../components/search-box/search-box.scss | 6 +- .../features/sitehome/pages/index/index.scss | 2 +- src/theme/components/collapsible-item.scss | 2 +- src/theme/components/discussion.scss | 2 - src/theme/components/error-accordion.scss | 43 ++-- src/theme/components/format-text.scss | 20 +- src/theme/helpers/custom.mixins.scss | 16 +- src/theme/helpers/helpers.scss | 3 + src/theme/helpers/ionic.functions.font.scss | 70 ++++++ src/theme/theme.base.scss | 44 ++-- src/theme/theme.dark.scss | 4 +- src/theme/theme.design-system.scss | 228 ++++++++++-------- src/theme/theme.light.scss | 34 +-- 43 files changed, 337 insertions(+), 248 deletions(-) create mode 100644 src/theme/helpers/ionic.functions.font.scss diff --git a/src/addons/block/activityresults/components/activityresults/activityresults.scss b/src/addons/block/activityresults/components/activityresults/activityresults.scss index b1442e17c..fe70c46a4 100644 --- a/src/addons/block/activityresults/components/activityresults/activityresults.scss +++ b/src/addons/block/activityresults/components/activityresults/activityresults.scss @@ -22,8 +22,7 @@ padding-top: .75rem; padding-bottom: .75rem; color: var(--medium); - font-weight: bold; - font-size: 18px; + font: var(--mdl-typography-subtitle-font-md); } } } diff --git a/src/addons/block/blogtags/components/blogtags/blogtags.scss b/src/addons/block/blogtags/components/blogtags/blogtags.scss index 85844a8fd..e4e8eadf8 100644 --- a/src/addons/block/blogtags/components/blogtags/blogtags.scss +++ b/src/addons/block/blogtags/components/blogtags/blogtags.scss @@ -22,7 +22,7 @@ contain: content; vertical-align: baseline; text-decoration: none; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); } .s20 { font-size: 1.5em; diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss index 563fadfbd..ace9c44e0 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.scss +++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss @@ -11,7 +11,7 @@ ion-button, core-combobox ::ng-deep ion-select { - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; margin: 0; } @@ -19,7 +19,7 @@ --border-width: 0; ion-icon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } diff --git a/src/addons/block/tags/components/tags/tags.scss b/src/addons/block/tags/components/tags/tags.scss index fcdc93511..2282396da 100644 --- a/src/addons/block/tags/components/tags/tags.scss +++ b/src/addons/block/tags/components/tags/tags.scss @@ -30,7 +30,7 @@ contain: content; vertical-align: baseline; text-decoration: none; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); } .s20 { font-size: 2.7em; diff --git a/src/addons/block/timeline/components/timeline/timeline.scss b/src/addons/block/timeline/components/timeline/timeline.scss index aab42b195..82f7b079b 100644 --- a/src/addons/block/timeline/components/timeline/timeline.scss +++ b/src/addons/block/timeline/components/timeline/timeline.scss @@ -12,20 +12,20 @@ ion-button, core-combobox ::ng-deep ion-button { --border-width: 0; - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; margin: 0; .select-icon { display: none; } ion-icon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } core-combobox ::ng-deep ion-select { margin: 0; - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; } core-search-box { diff --git a/src/addons/calendar/components/filter/filter.scss b/src/addons/calendar/components/filter/filter.scss index dd51360a8..2023335f6 100644 --- a/src/addons/calendar/components/filter/filter.scss +++ b/src/addons/calendar/components/filter/filter.scss @@ -8,7 +8,7 @@ > ion-icon { padding: 4px; - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } } diff --git a/src/addons/mod/resource/components/index/index.scss b/src/addons/mod/resource/components/index/index.scss index 88b63eec0..89f14980c 100644 --- a/src/addons/mod/resource/components/index/index.scss +++ b/src/addons/mod/resource/components/index/index.scss @@ -5,7 +5,7 @@ @include padding(4px, 0px, 0px, 0px); ion-icon { - font-size: 24px; + font-size: var(--mdl-typography-icon-fontSize-lg); } } diff --git a/src/addons/mod/survey/components/index/index.scss b/src/addons/mod/survey/components/index/index.scss index bb262ac5b..42e6f410c 100644 --- a/src/addons/mod/survey/components/index/index.scss +++ b/src/addons/mod/survey/components/index/index.scss @@ -19,8 +19,8 @@ } ion-radio { - height: var(--a11y-min-target-size); - width: var(--a11y-min-target-size); + height: var(--a11y-sizing-minTargetSize); + width: var(--a11y-sizing-minTargetSize); padding: 12px; } } diff --git a/src/addons/notifications/notifications.scss b/src/addons/notifications/notifications.scss index 120128ebe..699f5d1d8 100644 --- a/src/addons/notifications/notifications.scss +++ b/src/addons/notifications/notifications.scss @@ -16,7 +16,7 @@ .core-avatar-extra-img { background: var(--background-color); - border-radius: var(--radius-sm); + border-radius: var(--mdl-shape-borderRadius-sm); img { max-width: var(--extra-icon-size); max-height: var(--extra-icon-size); @@ -39,7 +39,7 @@ } padding: 0px; background: var(--background-color); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); @include margin(6px, 8px, 6px, 0px); } diff --git a/src/core/components/button-with-spinner/button-with-spinner.scss b/src/core/components/button-with-spinner/button-with-spinner.scss index 5c9d86ae3..40859f652 100644 --- a/src/core/components/button-with-spinner/button-with-spinner.scss +++ b/src/core/components/button-with-spinner/button-with-spinner.scss @@ -5,8 +5,8 @@ align-items: center; justify-content: space-around; align-content: center; - min-height: var(--a11y-min-target-size); - min-width: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); + min-width: var(--a11y-sizing-minTargetSize); position: relative; > * { diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index dc5ac89b0..c4964c9e7 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -21,7 +21,7 @@ ion-icon { margin: var(--icon-margin); - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } } @@ -49,7 +49,7 @@ color: var(--color); text-overflow: ellipsis; white-space: nowrap; - min-height: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); overflow: hidden; box-shadow: var(--box-shadow); @@ -110,9 +110,7 @@ flex: 1; &::part(native) { - font-weight: var(--label-font-weight); - font-size: var(--label-lg-font-size); - line-height: var(--label-lg-line-height); + font: var(--mdl-typography-label-font-lg); border-radius: var(--core-combobox-radius); } diff --git a/src/core/components/download-refresh/download-refresh.scss b/src/core/components/download-refresh/download-refresh.scss index 5c9d86ae3..40859f652 100644 --- a/src/core/components/download-refresh/download-refresh.scss +++ b/src/core/components/download-refresh/download-refresh.scss @@ -5,8 +5,8 @@ align-items: center; justify-content: space-around; align-content: center; - min-height: var(--a11y-min-target-size); - min-width: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); + min-width: var(--a11y-sizing-minTargetSize); position: relative; > * { diff --git a/src/core/components/empty-box/empty-box.scss b/src/core/components/empty-box/empty-box.scss index 4c2566770..b79b0305d 100644 --- a/src/core/components/empty-box/empty-box.scss +++ b/src/core/components/empty-box/empty-box.scss @@ -33,7 +33,7 @@ p, ::ng-deep p { - font-size: var(--heading-6-font-size); + font-size: var(--mdl-typography-heading6-fontSize); color: var(--text-color); } } diff --git a/src/core/components/message/message.scss b/src/core/components/message/message.scss index af5c1e2fe..b5e1c10dc 100644 --- a/src/core/components/message/message.scss +++ b/src/core/components/message/message.scss @@ -11,14 +11,14 @@ .message-box { --background: var(--message-background); - --min-height: var(--a11y-min-target-size); + --min-height: var(--a11y-sizing-minTargetSize); display: flex; flex-direction: row; position: relative; border: 0; - border-radius: var(--radius-sm); + border-radius: var(--mdl-shape-borderRadius-sm); margin: 8px; width: 90%; max-width: var(--list-item-max-width); diff --git a/src/core/components/mod-icon/mod-icon.scss b/src/core/components/mod-icon/mod-icon.scss index a7ba181c6..332416b56 100644 --- a/src/core/components/mod-icon/mod-icon.scss +++ b/src/core/components/mod-icon/mod-icon.scss @@ -7,7 +7,7 @@ --padding-top: var(--module-icon-padding, 4px); --padding-end: var(--module-icon-padding, 4px); --padding-bottom: var(--module-icon-padding, 4px); - --icon-radius: var(--module-icon-radius, var(--radius-xs)); + --icon-radius: var(--module-icon-radius, var(--mdl-shape-borderRadius-xs)); --margin-end: 0px; --margin-vertical: 0px; diff --git a/src/core/components/send-message-form/send-message-form.scss b/src/core/components/send-message-form/send-message-form.scss index 0d36c6c6f..e826dc118 100644 --- a/src/core/components/send-message-form/send-message-form.scss +++ b/src/core/components/send-message-form/send-message-form.scss @@ -7,7 +7,7 @@ --textarea-color: var(--core-input-text); --textarea-border-width: var(--core-input-border-width); --textarea-border-color: var(--core-input-stroke); - --textarea-radius: var(--radius-xl); + --textarea-radius: var(--mdl-shape-borderRadius-xl); form { display: flex; @@ -27,7 +27,7 @@ border: var(--textarea-border-width) solid var(--textarea-border-color); border-radius: var(--textarea-radius); - min-height: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); line-height: 20px; padding: 10px; @include margin(4px, 0px, 4px, 8px); diff --git a/src/core/components/tabs/tabs.scss b/src/core/components/tabs/tabs.scss index 8784d0e4a..4b3fc3e71 100644 --- a/src/core/components/tabs/tabs.scss +++ b/src/core/components/tabs/tabs.scss @@ -40,7 +40,7 @@ height: var(--height); --border-radius: 0; ion-icon { - font-size: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); } } diff --git a/src/core/components/timer/timer.scss b/src/core/components/timer/timer.scss index 0a7bf56da..843c8ae2b 100644 --- a/src/core/components/timer/timer.scss +++ b/src/core/components/timer/timer.scss @@ -20,7 +20,7 @@ div.core-timer { background: var(--timer-background); color: var(--timer-text-color, var(--text-color)); - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } button { diff --git a/src/core/features/block/components/block/block.scss b/src/core/features/block/components/block/block.scss index 40f49613c..f76efbb45 100644 --- a/src/core/features/block/components/block/block.scss +++ b/src/core/features/block/components/block/block.scss @@ -5,7 +5,7 @@ background: var(--background); ion-card { - --border-radius: var(--radius-sm); + --border-radius: var(--mdl-shape-borderRadius-sm); } ::ng-deep ion-item-divider { diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss index 246932f5c..2c87a2cd0 100644 --- a/src/core/features/course/components/module-info/course-module-info.scss +++ b/src/core/features/course/components/module-info/course-module-info.scss @@ -30,7 +30,7 @@ .core-module-info-box { background: var(--light); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); margin: 8px; padding: 8px; diff --git a/src/core/features/course/components/module/module.scss b/src/core/features/course/components/module/module.scss index 7385c019c..d46bf5a78 100644 --- a/src/core/features/course/components/module/module.scss +++ b/src/core/features/course/components/module/module.scss @@ -35,7 +35,7 @@ margin-bottom: 0px; --module-icon-padding: 0px; --module-legacy-icon-padding: 4px; - --module-icon-radius: var(--radius-xs); + --module-icon-radius: var(--mdl-shape-borderRadius-xs); @include margin-horizontal(null, 8px); align-self: self-start; @@ -75,7 +75,7 @@ --padding-start: 0px; --padding-end: 0px; ion-icon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } } @@ -101,7 +101,7 @@ .core-module-description ::ng-deep img, .activity-title .item-heading core-format-text ::ng-deep img { - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } core-course-module-completion { @@ -132,7 +132,7 @@ .activity-description-availabilityinfo { .core-module-availabilityinfo { background: var(--gray-300); - border-radius: var(--radius-sm); + border-radius: var(--mdl-shape-borderRadius-sm); margin-top: 8px; padding: 8px; font-size: 14px; diff --git a/src/core/features/course/pages/course-summary/course-summary.scss b/src/core/features/course/pages/course-summary/course-summary.scss index b26938458..65aa299b5 100644 --- a/src/core/features/course/pages/course-summary/course-summary.scss +++ b/src/core/features/course/pages/course-summary/course-summary.scss @@ -43,8 +43,8 @@ .course-container { position: relative; - top: calc(var(--thumb-height) - var(--radius-lg)); - border-radius: var(--radius-lg) var(--radius-lg) 0 0; + top: calc(var(--thumb-height) - var(--mdl-shape-borderRadius-lg)); + border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0; background-color: var(--ion-background-color); box-shadow: var(--drop-shadow-top); clip-path: inset(-5px 0px 0px 0px); @@ -68,7 +68,7 @@ .core-course-dates { background: var(--light); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); padding: 8px; width: 100%; diff --git a/src/core/features/course/pages/module-preview/module-preview.scss b/src/core/features/course/pages/module-preview/module-preview.scss index 5e34beb75..f5bb28309 100644 --- a/src/core/features/course/pages/module-preview/module-preview.scss +++ b/src/core/features/course/pages/module-preview/module-preview.scss @@ -2,7 +2,7 @@ .core-module-availabilityinfo { background: var(--light); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); padding: 8px; font-size: 90%; ::ng-deep ul { diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss index f75d17f41..6fee72f44 100644 --- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss +++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss @@ -125,7 +125,7 @@ margin: 0 auto; font-size: 18px; background-color: var(--toobar-background); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); @include core-transition(background-color, 200ms); color: var(--button-color); cursor: pointer; diff --git a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss index 6bd83cef0..f1cfe35d2 100644 --- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss +++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss @@ -20,7 +20,7 @@ --icon-size: 1.8em; // Offset padding for visual alignment. - margin: calc((var(--icon-size) - var(--a11y-min-target-size)) / 2); + margin: calc((var(--icon-size) - var(--a11y-sizing-minTargetSize)) / 2); } } diff --git a/src/core/features/grades/pages/course/course.scss b/src/core/features/grades/pages/course/course.scss index ef6808d2b..a6bc87e94 100644 --- a/src/core/features/grades/pages/course/course.scss +++ b/src/core/features/grades/pages/course/course.scss @@ -97,7 +97,7 @@ table.core-table.core-grades-table { } th, td { - height: var(--a11y-min-target-size); + height: var(--a11y-sizing-minTargetSize); vertical-align: middle; } } diff --git a/src/core/features/mainmenu/pages/menu/menu.scss b/src/core/features/mainmenu/pages/menu/menu.scss index d72dfe76c..768a558a9 100644 --- a/src/core/features/mainmenu/pages/menu/menu.scss +++ b/src/core/features/mainmenu/pages/menu/menu.scss @@ -58,7 +58,7 @@ ion-tab-bar { text-overflow: unset; overflow: visible; text-align: center; - font-size: 24px; + font-size: var(--mdl-typography-icon-fontSize-lg); } ion-badge.core-tab-badge { diff --git a/src/core/features/question/question.scss b/src/core/features/question/question.scss index 80559f66e..c36dbfaca 100644 --- a/src/core/features/question/question.scss +++ b/src/core/features/question/question.scss @@ -74,7 +74,7 @@ .questioncorrectnessicon, .fa.icon.questioncorrectnessicon { - font-size: 20px; + font-size: var(--mdl-typography-icon-fontSize-md); } .item.item-interactive.item-interactive-disabled ::ng-deep { diff --git a/src/core/features/reportbuilder/components/report-summary/report-summary.scss b/src/core/features/reportbuilder/components/report-summary/report-summary.scss index 1512f8e33..d4e91a4e3 100644 --- a/src/core/features/reportbuilder/components/report-summary/report-summary.scss +++ b/src/core/features/reportbuilder/components/report-summary/report-summary.scss @@ -6,7 +6,7 @@ ion-footer { ion-icon { - font-size: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); color: $blue; margin-right: .3rem; vertical-align: middle; diff --git a/src/core/features/search/components/global-search-result/global-search-result.scss b/src/core/features/search/components/global-search-result/global-search-result.scss index 8e25e101c..bc5ac4ee8 100644 --- a/src/core/features/search/components/global-search-result/global-search-result.scss +++ b/src/core/features/search/components/global-search-result/global-search-result.scss @@ -17,7 +17,7 @@ --module-icon-size: var(--core-global-search-result-icon-size); --module-legacy-icon-size: var(--core-global-search-result-icon-size); - margin-inline-end: var(--spacing-2); + margin-inline-end: var(--mdl-spacing-2); margin-top: 0px; margin-bottom: 0px; flex-shrink: 0; @@ -27,7 +27,7 @@ width: var(--core-global-search-result-icon-size); height: var(--core-global-search-result-icon-size); - margin-inline-end: var(--spacing-2); + margin-inline-end: var(--mdl-spacing-2); flex-shrink: 0; } @@ -36,15 +36,15 @@ core-user-avatar { --core-avatar-size: var(--core-global-search-result-image-size); - margin-top: var(--spacing-3); - margin-bottom: var(--spacing-3); + margin-top: var(--mdl-spacing-3); + margin-bottom: var(--mdl-spacing-3); } core-course-image { --core-image-size: var(--core-global-search-result-image-size); - margin-top: var(--spacing-3); - margin-bottom: var(--spacing-3); + margin-top: var(--mdl-spacing-3); + margin-bottom: var(--mdl-spacing-3); } ion-label { @@ -72,12 +72,12 @@ justify-items: center; align-items: center; color: var(--core-global-search-result-context-color); - margin-top: var(--spacing-2); - margin-inline-end: var(--spacing-4); + margin-top: var(--mdl-spacing-2); + margin-inline-end: var(--mdl-spacing-4); font-size: 12px; ion-icon { - margin-inline-end: var(--spacing-1); + margin-inline-end: var(--mdl-spacing-1); flex-shrink: 0; } diff --git a/src/core/features/search/components/search-box/search-box.scss b/src/core/features/search/components/search-box/search-box.scss index 1ca07ae02..8afdc8c3d 100644 --- a/src/core/features/search/components/search-box/search-box.scss +++ b/src/core/features/search/components/search-box/search-box.scss @@ -1,5 +1,5 @@ :host { - --height: var(--a11y-min-target-size); + --height: var(--a11y-sizing-minTargetSize); --search-height: calc(var(--height) - 2px); min-height: var(--height); display: block; @@ -28,7 +28,7 @@ ion-button.button { margin: 0; - --a11y-min-target-size: var(--search-height); + --a11y-sizing-minTargetSize: var(--search-height); --padding-start: 0px; --padding-end: 0px; font-size: 12px; @@ -50,7 +50,7 @@ } ion-item { - --min-height: var(--a11y-min-target-size); + --min-height: var(--a11y-sizing-minTargetSize); --border-width: 0px; --background: var(--core-search-box-background); diff --git a/src/core/features/sitehome/pages/index/index.scss b/src/core/features/sitehome/pages/index/index.scss index 9c849123b..3d9bc3163 100644 --- a/src/core/features/sitehome/pages/index/index.scss +++ b/src/core/features/sitehome/pages/index/index.scss @@ -2,7 +2,7 @@ ion-item ion-icon { display: inline-block; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); padding: 4px; background-color: var(--gray-100); color: var(--gray-900); diff --git a/src/theme/components/collapsible-item.scss b/src/theme/components/collapsible-item.scss index 679cb75c6..998a055d5 100644 --- a/src/theme/components/collapsible-item.scss +++ b/src/theme/components/collapsible-item.scss @@ -38,7 +38,7 @@ min-width: var(--toggle-size); height: var(--toggle-size); width: var(--toggle-size); - --border-radius: var(--radius-xl); + --border-radius: var(--mdl-shape-borderRadius-xl); border-radius: var(--border-radius); --padding-start: 0px; --padding-end: 0px; diff --git a/src/theme/components/discussion.scss b/src/theme/components/discussion.scss index c2cc72133..c1b40616e 100644 --- a/src/theme/components/discussion.scss +++ b/src/theme/components/discussion.scss @@ -1,5 +1,3 @@ -@use "theme/globals" as *; - :host-context(.ios) { ion-footer .toolbar:last-child { padding-bottom: 4px; diff --git a/src/theme/components/error-accordion.scss b/src/theme/components/error-accordion.scss index 4bc7f20af..31893778e 100644 --- a/src/theme/components/error-accordion.scss +++ b/src/theme/components/error-accordion.scss @@ -4,18 +4,25 @@ --background-color: var(--gray-300); --toggle-icon-size: 16px; + --text-color-secondary: var(--gray-800); + + --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4% + --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12% + --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12% + --state-color-keyboard-focus: var(--a11y-focus-color); + background: var(--background-color); - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); .core-error-accordion--code { margin: 0; text-align: start; - color: var(--text-color-main); - font: var(--subtitle-md-font); - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); - padding-inline-start: var(--spacing-3); - padding-inline-end: var(--spacing-3); + color: var(--text-color); + font: var(--mdl-typography-subtitle-font-md); + padding-top: var(--mdl-spacing-2); + padding-bottom: var(--mdl-spacing-2); + padding-inline-start: var(--mdl-spacing-3); + padding-inline-end: var(--mdl-spacing-3); } .core-error-accordion--details { @@ -30,12 +37,12 @@ p { margin: 0; - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); - padding-inline-start: var(--spacing-3); - padding-inline-end: var(--spacing-3); + padding-top: var(--mdl-spacing-2); + padding-bottom: var(--mdl-spacing-2); + padding-inline-start: var(--mdl-spacing-3); + padding-inline-end: var(--mdl-spacing-3); text-align: start; - font: var(--body-md-font); + font: var(--mdl-typography-body-font-md); color: var(--text-color-secondary); } @@ -48,11 +55,11 @@ background: transparent; justify-content: space-between; color: var(--text-color-secondary); - font: var(--label-lg-font); - padding-top: var(--spacing-2); - padding-bottom: var(--spacing-2); - padding-inline-start: var(--spacing-3); - padding-inline-end: var(--spacing-3); + font: var(--mdl-typography-label-font-lg); + padding-top: var(--mdl-spacing-2); + padding-bottom: var(--mdl-spacing-2); + padding-inline-start: var(--mdl-spacing-3); + padding-inline-end: var(--mdl-spacing-3); .core-error-accordion--toggle-text { display: flex; @@ -67,7 +74,7 @@ ion-icon { width: var(--toggle-icon-size); - margin-inline-start: var(--spacing-4); + margin-inline-start: var(--mdl-spacing-4); transition: transform var(--toggle-icon-animation-duration) var(--toggle-icon-animation-function); transform: rotate(0); } diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss index 073ad9e58..d33aa6793 100644 --- a/src/theme/components/format-text.scss +++ b/src/theme/components/format-text.scss @@ -75,14 +75,14 @@ core-format-text { position: absolute; @include position(null, 10px, 10px, null); color: var(--ion-text-color); - border-radius: var(--radius-xl); + border-radius: var(--mdl-shape-borderRadius-xl); background-color: var(--core-format-text-viewer-icon-background); display: flex; - width: var(--a11y-min-target-size); - height: var(--a11y-min-target-size); - max-width: var(--a11y-min-target-size); - font-size: 24px; + width: var(--a11y-sizing-minTargetSize); + height: var(--a11y-sizing-minTargetSize); + max-width: var(--a11y-sizing-minTargetSize); + font-size: var(--mdl-typography-icon-fontSize-lg); ion-icon { flex: 1; @@ -266,9 +266,9 @@ core-rich-text-editor .core-rte-editor { } img.icon { - font-size: 16px; - width: 16px; - height: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); + width: var(--mdl-typography-icon-fontSize-sm); + height: var(--mdl-typography-icon-fontSize-sm); margin: 0; padding: 0; -webkit-box-sizing: content-box; @@ -285,7 +285,7 @@ core-rich-text-editor .core-rte-editor { border: 1px solid var(--gray-500); background: var(--contrast-background); padding: 6px 8px; - border-radius: var(--radius-xs); + border-radius: var(--mdl-shape-borderRadius-xs); margin-left: 2px; margin-right: 2px; margin-bottom: 10px; @@ -615,7 +615,7 @@ core-rich-text-editor .core-rte-editor { } // utilities/_text.scss - .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } + .text-monospace { font-family: var(--mdl-typography-monospace-font) !important; } .text-justify { text-align: justify !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } diff --git a/src/theme/helpers/custom.mixins.scss b/src/theme/helpers/custom.mixins.scss index f62bd6116..5036e4f6c 100644 --- a/src/theme/helpers/custom.mixins.scss +++ b/src/theme/helpers/custom.mixins.scss @@ -80,10 +80,10 @@ } @mixin core-focus-style() { - box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color); + box-shadow: var(--a11y-shadow-focus-boxShadow); border-radius: var(--border-radius); // Thicker option: - // border: var(--a11y-focus-width) solid var(--a11y-focus-color); + // border: var(--a11y-shadow-focus-boxShadowSpread) solid var(--a11y-shadow-focus-boxShadowColor); } @mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) { @@ -198,22 +198,22 @@ @mixin core-headings() { h1 { - font: var(--heading-1-font); + font: var(--mdl-typography-heading1-font); } h2, .item-heading { - font: var(--heading-2-font); + font: var(--mdl-typography-heading2-font); } h3 { - font: var(--heading-3-font); + font: var(--mdl-typography-heading3-font); } h4 { - font: var(--heading-4-font); + font: var(--mdl-typography-heading4-font); } h5 { - font: var(--heading-5-font); + font: var(--mdl-typography-heading5-font); } h6 { - font: var(--heading-6-font); + font: var(--mdl-typography-heading6-font); } } diff --git a/src/theme/helpers/helpers.scss b/src/theme/helpers/helpers.scss index 03d86944d..21efb5344 100644 --- a/src/theme/helpers/helpers.scss +++ b/src/theme/helpers/helpers.scss @@ -5,6 +5,9 @@ // Global Color Functions @import "./ionic.functions.color"; +// Global Font Functions +@import "./ionic.functions.font"; + // Global Mixins @import "./ionic.mixins"; diff --git a/src/theme/helpers/ionic.functions.font.scss b/src/theme/helpers/ionic.functions.font.scss new file mode 100644 index 000000000..4c329f4ff --- /dev/null +++ b/src/theme/helpers/ionic.functions.font.scss @@ -0,0 +1,70 @@ +/** + * Imported ionic color functions for SCSS + * ---------------------------------------------------------------------------- + * Extracted from + * https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/ionic.functions.font.scss + */ + +@use "sass:math"; + +$baselineSize: 16px !default; +$baselineUnit: 1rem !default; + +/** + * Convert a font size to a dynamic font size. + * Fonts that participate in Dynamic Type should use + * dynamic font sizes. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param unit (optional) - The unit to convert to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font($size, $unit: $baselineUnit) { + @return (math.div($size, $baselineSize)) * $unit; +} + +/** + * Convert a font size to a dynamic font size but impose + * a maximum font size. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale). + * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) { + $baseScale: dynamic-font($size, $unit); + $maxScale: $size * $maxScale; + + @return min($baseScale, $maxScale); +} + +/** + * Convert a font size to a dynamic font size but impose + * a minimum font size. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale). + * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) { + $baseScale: dynamic-font($size, $unit); + $minScale: $size * $minScale; + + @return max($minScale, $baseScale); +} + +/** + * Convert a font size to a dynamic font size but impose + * maximum and minimum font sizes. + * @param size - The initial font size including the unit (i.e. px or pt) + * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale). + * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale). + * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to + * convert to a unit other than $baselineUnit. + */ +@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) { + $baseScale: dynamic-font($baseSize, $unit); + $maxScale: $baseSize * $maxScale; + $minScale: $baseSize * $minScale; + + @return clamp($minScale, $baseScale, $maxScale); +} diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss index c674fc16a..60cd784a5 100644 --- a/src/theme/theme.base.scss +++ b/src/theme/theme.base.scss @@ -161,7 +161,7 @@ ion-header { --color: var(--core-header-buttons-color); --background: var(--core-header-buttons-background); --ion-toolbar-color: var(--core-header-buttons-color); - --border-radius: var(--radius-xl); + --border-radius: var(--mdl-shape-borderRadius-xl); --primary: var(--core-header-buttons-color); } ion-back-button::part(text) { @@ -175,10 +175,10 @@ ion-header { .button.button-clear.button-has-icon-only, .button.button-solid.button-has-icon-only { - width: var(--a11y-min-target-size); - height: var(--a11y-min-target-size); + width: var(--a11y-sizing-minTargetSize); + height: var(--a11y-sizing-minTargetSize); ion-icon { - font-size: 24px; + font-size: var(--mdl-typography-icon-fontSize-lg); } } @@ -213,7 +213,7 @@ ion-header { } h1, h2, .subheading { - font-size: 20px; + font-size: var(--mdl-typography-label-lineHeight-lg); font-weight: 500; letter-spacing: .0125em; text-align: start; @@ -236,7 +236,7 @@ ion-header { text-align: start; h1, h2, .subheading { - font-size: 17px; + font-size: var(--mdl-typography-label-lineHeight-md); font-weight: 600; } @@ -266,8 +266,8 @@ ion-fab-button, button, [role="button"] { text-transform: none; - min-height: var(--a11y-min-target-size); - min-width: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); + min-width: var(--a11y-sizing-minTargetSize); &.button-large { min-height: 2.8em; @@ -352,7 +352,7 @@ ion-button:not(.button-has-icon-only):not(.button-small) > ion-icon { } ion-button.button.button-clear.button-has-icon-only { - --border-radius: var(--radius-xl); + --border-radius: var(--mdl-shape-borderRadius-xl); } ion-button.button.button-clear { @@ -736,7 +736,7 @@ body.core-iframe-fullscreen ion-router-outlet { } .core-password-modal { - --border-radius: var(--radius-sm); + --border-radius: var(--mdl-shape-borderRadius-sm); --min-width: auto; --min-height: 300px; --width: 384px; @@ -800,7 +800,7 @@ body.core-iframe-fullscreen ion-router-outlet { } ion-button { - --a11y-min-target-size: 40px; + --a11y-sizing-minTargetSize: 40px; } &.item-directory ion-icon { @@ -835,7 +835,7 @@ body.core-iframe-fullscreen ion-router-outlet { --border-width: 0; --border-color: var(--color-tint); - --border-radius: var(--radius-sm); + --border-radius: var(--mdl-shape-borderRadius-sm); --background: var(--color-tint); --color: var(--color-shade); @@ -957,7 +957,7 @@ ion-card { } .section-summary core-format-text img { - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } ion-list.core-course-module-list-wrapper, @@ -1008,7 +1008,7 @@ ion-action-sheet.md { } .action-sheet-group:first-child { - border-radius: var(--radius-lg) var(--radius-lg) 0 0; + border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0; } .action-sheet-group-cancel { @@ -1173,7 +1173,7 @@ ion-select-popover { ion-badge { line-height: 1.1; padding: 2px 8px; - border-radius: var(--radius-lg); + border-radius: var(--mdl-shape-borderRadius-lg); } ion-chip, @@ -1185,8 +1185,8 @@ ion-button.button.chip { font-weight: normal; ion-icon { - font-size: 16px; - min-width: 16px; + font-size: var(--mdl-typography-icon-fontSize-sm); + min-width: var(--mdl-typography-icon-fontSize-sm); @include margin(0, 8px, 0, 0); } @@ -1196,7 +1196,7 @@ ion-button.button.chip { } ion-button.button.chip { - --border-radius: var(--radius-md); + --border-radius: var(--mdl-shape-borderRadius-md); min-height: 32px; font-size: 14px; @@ -1258,7 +1258,7 @@ ion-chip { ion-searchbar { height: var(--height) !important; - --border-radius: var(--radius-xs); + --border-radius: var(--mdl-shape-borderRadius-xs); .searchbar-input-container { color: var(--color) !important; @@ -1266,7 +1266,7 @@ ion-searchbar { } .searchbar-input { - --border-radius: var(--radius-xs); + --border-radius: var(--mdl-shape-borderRadius-xs); height: var(--height) !important; border: 1px solid var(--border-color) !important; @@ -1334,7 +1334,7 @@ mark, .matchtext { // Monospaced font. .core-monospaced { - font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; + font-family: var(--mdl-typography-monospace-font); } .core-iframe-offline-disabled { @@ -1370,7 +1370,7 @@ details summary { } textarea { - min-height: var(--a11y-min-target-size); + min-height: var(--a11y-sizing-minTargetSize); } textarea:not([core-auto-rows]) { diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index c59f05ec1..66ad41d56 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -47,8 +47,8 @@ html.dark { --loader-shine: 90 90 90; - --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 1); - --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 1); + --drop-shadow-top: 0px 2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 1); + --drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 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 3ef11bc87..7c8bd8195 100644 --- a/src/theme/theme.design-system.scss +++ b/src/theme/theme.design-system.scss @@ -1,146 +1,160 @@ +@import "./globals.scss"; + html { - // Spacing + // Variables in the design system should be named using the following pattern: + // SYSTEM-CATEGORY-CONCEPT-PROPERTY-VARIANT (where the only required part is SYSTEM) + // SYSTEM: The name of the design system (e.g. ion, mdl, app, etc.) + // CATEGORY: The category of the component (e.g. color, typography, spacing, etc.) + // CONCEPT: The concept of the category (e.g. component name) + // PROPERTY: The property of the concept in camel case (e.g. color, fontSize, spacing, etc.) + // VARIANT: The variant of the property (e.g. primary, size[sm, md, lg], dark/light, state etc.) + // + // Some guide: https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676 + + // ***** SPACING category ***** // @for $i from 0 to 6 { - --spacing-#{$i}: #{$i*4}px; + --mdl-spacing-#{$i}: #{$i*4}px; } - // Typography - --font-size-sm: 12px; - --font-size-md: 14px; - --font-size-lg: 16px; + // ***** TYPOGRAPHY category ***** // + // Sintaxis:[ || || ]? [ / ]? + --mdl-typography-fontSize-sm: #{dynamic-font(12px)}; // 0.75rem + --mdl-typography-fontSize-md: #{dynamic-font(14px)}; // 0.875rem + --mdl-typography-fontSize-lg: #{dynamic-font(16px)}; // 1rem - --font-weight-normal: 400; - --font-weight-medium: 500; + --mdl-typography-fontWeight-normal: 400; + --mdl-typography-fontWeight-medium: 500; - // Typography - Body - --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%; + --mdl-typography-monospace-font: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; - --body-sm-font: normal normal var(--body-font-weight) var(--body-font-size-sm)/var(--body-line-height) var(--ion-font-family); - --body-md-font: normal normal var(--body-font-weight) var(--body-font-size-md)/var(--body-line-height) var(--ion-font-family); - --body-lg-font: normal normal var(--body-font-weight) var(--body-font-size-lg)/var(--body-line-height) var(--ion-font-family); + // Body font size + --mdl-typography-body-fontSize-sm: var(--mdl-typography-fontSize-sm); + --mdl-typography-body-fontSize-md: var(--mdl-typography-fontSize-md); + --mdl-typography-body-fontSize-lg: var(--mdl-typography-fontSize-lg); - // Typography - Links - --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%; + --mdl-typography-body-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-body-lineHeight: 150%; + --mdl-typography-body-letterSpacing: 0.5px; + --mdl-typography-body-paragraphSpacing: 150%; - --link-sm-font: normal normal var(--link-font-weight) var(--link-sm-font-size)/var(--link-line-height) var(--ion-font-family); - --link-md-font: normal normal var(--link-font-weight) var(--link-md-font-size)/var(--link-line-height) var(--ion-font-family); - --link-lg-font: normal normal var(--link-font-weight) var(--link-lg-font-size)/var(--link-line-height) var(--ion-font-family); + --mdl-typography-body-font-sm: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-sm)/var(--mdl-typography-body-lineHeight) var(--ion-font-family); + --mdl-typography-body-font-md: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-md)/var(--mdl-typography-body-lineHeight) var(--ion-font-family); + --mdl-typography-body-font-lg: normal normal var(--mdl-typography-body-fontWeight) var(--mdl-typography-body-fontSize-lg)/var(--mdl-typography-body-lineHeight) var(--ion-font-family); - // Typography - Labels - --label-sm-font-size: 10px; - --label-md-font-size: 12px; - --label-lg-font-size: 14px; - --label-font-weight: var(--font-weight-medium); + // Links + --mdl-typography-link-fontSize-sm: var(--mdl-typography-fontSize-sm); + --mdl-typography-link-fontSize-md: var(--mdl-typography-fontSize-md); + --mdl-typography-link-fontSize-lg: var(--mdl-typography-fontSize-lg); - --label-sm-line-height: 16px; - --label-md-line-height: 16px; - --label-lg-line-height: 20px; + --mdl-typography-link-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-link-lineHeight: 150%; + --mdl-typography-link-letterSpacing: 0.5px; + --mdl-typography-link-paragraphSpacing: 150%; - --label-sm-font: normal normal var(--label-font-weight) var(--label-sm-font-size)/var(--label-sm-line-height) var(--ion-font-family); - --label-md-font: normal normal var(--label-font-weight) var(--label-md-font-size)/var(--label-md-line-height) var(--ion-font-family); - --label-lg-font: normal normal var(--label-font-weight) var(--label-lg-font-size)/var(--label-lg-line-height) var(--ion-font-family); + --mdl-typography-link-font-sm: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-sm)/var(--mdl-typography-link-lineHeight) var(--ion-font-family); + --mdl-typography-link-font-md: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-md)/var(--mdl-typography-link-lineHeight) var(--ion-font-family); + --mdl-typography-link-font-lg: normal normal var(--mdl-typography-link-fontWeight) var(--mdl-typography-link-fontSize-lg)/var(--mdl-typography-link-lineHeight) var(--ion-font-family); - // Typography - Subtitles - --subtitle-sm-font-size: 14px; - --subtitle-md-font-size: 16px; - --subtitle-lg-font-size: 20px; + // Labels + --mdl-typography-label-fontSize-sm: #{dynamic-font(10px)}; // 0.625rem + --mdl-typography-label-fontSize-md: #{dynamic-font(12px)}; + --mdl-typography-label-fontSize-lg: #{dynamic-font(14px)}; - --subtitle-font-weight: var(--font-weight-medium); - --subtitle-line-height: 150%; + --mdl-typography-label-fontWeight: var(--mdl-typography-fontWeight-medium); - --subtitle-sm-font: normal normal var(--subtitle-font-weight) var(--subtitle-sm-font-size)/var(--subtitle-line-height) var(--ion-font-family); - --subtitle-md-font: normal normal var(--subtitle-font-weight) var(--subtitle-md-font-size)/var(--subtitle-line-height) var(--ion-font-family); - --subtitle-lg-font: normal normal var(--subtitle-font-weight) var(--subtitle-lg-font-size)/var(--subtitle-line-height) var(--ion-font-family); + --mdl-typography-label-lineHeight-sm: #{dynamic-font(16px)}; + --mdl-typography-label-lineHeight-md: #{dynamic-font(16px)}; + --mdl-typography-label-lineHeight-lg: #{dynamic-font(20px)}; - // Typography - 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; + --mdl-typography-label-letterSpacing: 0.1px; - --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); + --mdl-typography-label-font-sm: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-sm)/var(--mdl-typography-label-lineHeight-sm) var(--ion-font-family); + --mdl-typography-label-font-md: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-md)/var(--mdl-typography-label-lineHeight-md) var(--ion-font-family); + --mdl-typography-label-font-lg: normal normal var(--mdl-typography-label-fontWeight) var(--mdl-typography-label-fontSize-lg)/var(--mdl-typography-label-lineHeight-lg) var(--ion-font-family); - --heading-line-height: 130%; + // Subtitles + --mdl-typography-subtitle-fontSize-sm: #{dynamic-font(14px)}; + --mdl-typography-subtitle-fontSize-md: #{dynamic-font(16px)}; + --mdl-typography-subtitle-fontSize-lg: #{dynamic-font(20px)}; - --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); + --mdl-typography-subtitle-fontWeight: var(--mdl-typography-fontWeight-medium); + --mdl-typography-subtitle-lineHeight: 150%; + --mdl-typography-subtitle-letterSpacing: 0.1px; - // Radiuses - --radius-none: 0px; - --radius-xs: 4px; - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-round: 50%; + --mdl-typography-subtitle-font-sm: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-sm)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family); + --mdl-typography-subtitle-font-md: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-md)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family); + --mdl-typography-subtitle-font-lg: normal normal var(--mdl-typography-subtitle-fontWeight) var(--mdl-typography-subtitle-fontSize-lg)/var(--mdl-typography-subtitle-lineHeight) var(--ion-font-family); - // Shadows / Elevation - --drop-shadow-color: 40 40 40; //#282828; - --drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%); - --drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%); - --drop-shadow-01dp: 0px 1px 3px 0px rgb(var(--drop-shadow-color) / 20%), 0px 2px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 1px 1px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-02dp: 0px 1px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 1px 0px rgb(var(--drop-shadow-color) / 12%), 0px 2px 2px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-03dp: 0px 1px 8px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 3px 0px rgb(var(--drop-shadow-color) / 12%), 0px 3px 4px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-04dp: 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 10px 0px rgb(var(--drop-shadow-color) / 12%), 0px 4px 5px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-06dp: 0px 3px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 1px 18px 0px rgb(var(--drop-shadow-color) / 12%), 0px 6px 10px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-08dp: 0px 5px 5px 0px rgb(var(--drop-shadow-color) / 20%), 0px 3px 14px 0px rgb(var(--drop-shadow-color) / 12%), 0px 8px 10px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-12dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-16dp: 0px 7px 8px 0px rgb(var(--drop-shadow-color) / 20%),0px 5px 22px 0px rgb(var(--drop-shadow-color) / 12%),0px 12px 17px 0px rgb(var(--drop-shadow-color) / 14%); - --drop-shadow-24dp: 0px 11px 15px 0px rgb(var(--drop-shadow-color) / 20%), 0px 9px 46px 0px rgb(var(--drop-shadow-color) / 12%), 0px 24px 38px 0px rgb(var(--drop-shadow-color) / 14%); + // Headings + --mdl-typography-heading1-fontSize: #{dynamic-font(28px)}; // 1.75rem + --mdl-typography-heading2-fontSize: #{dynamic-font(24px)}; // 1.5rem + --mdl-typography-heading3-fontSize: #{dynamic-font(22px)}; // 1.375rem + --mdl-typography-heading4-fontSize: #{dynamic-font(20px)}; // 1.25rem + --mdl-typography-heading5-fontSize: #{dynamic-font(18px)}; // 1.125rem + --mdl-typography-heading6-fontSize: #{dynamic-font(16px)}; // 1rem - // A11y - --a11y-min-target-size: 44px; + --mdl-typography-heading1-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-heading2-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-heading3-fontWeight: var(--mdl-typography-fontWeight-normal); + --mdl-typography-heading4-fontWeight: var(--mdl-typography-fontWeight-medium); + --mdl-typography-heading5-fontWeight: var(--mdl-typography-fontWeight-medium); + --mdl-typography-heading6-fontWeight: var(--mdl-typography-fontWeight-medium); - // Colors - --blue: #0f6cbf; + --mdl-typography-heading-lineHeight: 130%; - --text-color-main: var(--gray-900); - --text-color-secondary: var(--gray-800); + --mdl-typography-heading1-font: normal normal var(--mdl-typography-heading1-fontWeight) var(--mdl-typography-heading1-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading2-font: normal normal var(--mdl-typography-heading2-fontWeight) var(--mdl-typography-heading2-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading3-font: normal normal var(--mdl-typography-heading3-fontWeight) var(--mdl-typography-heading3-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading4-font: normal normal var(--mdl-typography-heading4-fontWeight) var(--mdl-typography-heading4-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading5-font: normal normal var(--mdl-typography-heading5-fontWeight) var(--mdl-typography-heading5-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); + --mdl-typography-heading6-font: normal normal var(--mdl-typography-heading6-fontWeight) var(--mdl-typography-heading6-fontSize)/var(--mdl-typography-heading-lineHeight) var(--ion-font-family); - --state-color-hover: rgb(40 40 40, 4%); // --gray-900 4% - --state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12% - --state-color-focused: rgb(40 40 40, 12%); // --gray-900 12% - --state-color-keyboard-focus: var(--blue); + // Icons + --mdl-typography-icon-fontSize-sm: #{dynamic-font(16px)}; + --mdl-typography-icon-fontSize-md: #{dynamic-font(20px)}; + --mdl-typography-icon-fontSize-lg: #{dynamic-font(24px)}; -} -html.dark { + // ***** SHAPE category ***** // + --mdl-shape-borderRadius-none: 0px; + --mdl-shape-borderRadius-xs: 4px; + --mdl-shape-borderRadius-sm: 8px; + --mdl-shape-borderRadius-md: 12px; + --mdl-shape-borderRadius-lg: 16px; + --mdl-shape-borderRadius-xl: 24px; + --mdl-shape-borderRadius-round: 50%; - // Colors - --text-color-main: var(--gray-200); - --text-color-secondary: var(--gray-300); + // ***** SHADOW category ***** // + --mdl-shadow-boxShadowColor: 40 40 40; //#282828; + --mdl-shadow-boxShadow-00: 0px 0px 0px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%); + --mdl-shadow-boxShadow-outline: 0px 0px 0px 2px rgb(var(--mdl-shadow-boxShadowColor) / 15%), 0px 2px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 2%); + --mdl-shadow-boxShadow-01: 0px 1px 3px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 2px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 1px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-02: 0px 1px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 1px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 2px 2px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-03: 0px 1px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 3px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 3px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-04: 0px 2px 4px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 1px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 4px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-06: 0px 3px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 1px 18px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 6px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-08: 0px 5px 5px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 3px 14px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 8px 10px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-12: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-16: 0px 7px 8px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%),0px 5px 22px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%),0px 12px 17px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + --mdl-shadow-boxShadow-24: 0px 11px 15px 0px rgb(var(--mdl-shadow-boxShadowColor) / 20%), 0px 9px 46px 0px rgb(var(--mdl-shadow-boxShadowColor) / 12%), 0px 24px 38px 0px rgb(var(--mdl-shadow-boxShadowColor) / 14%); + // ***** ACCESSIBILITY ***** // + --a11y-sizing-minTargetSize: 44px; + --a11y-shadow-focus-boxShadowSpread: 2px; + --a11y-shadow-focus-boxShadow: inset 0 0 var(--a11y-shadow-focus-boxShadowSpread) 1px var(--a11y-focus-color); } /** @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); + --small-radius: var(--mdl-shape-borderRadius-xs); + --medium-radius: var(--mdl-shape-borderRadius-sm); + --big-radius: var(--mdl-shape-borderRadius-lg); + --huge-radius: var(--mdl-shape-borderRadius-xl); } /** @deprecated since 4.4 **/ html { - --font-size-normal: var(--font-size-md); + --font-size-normal: var(--mdl-typography-fontSize-md); + --a11y-min-target-size: var(--a11y-sizing-minTargetSize); } diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss index b45b05b10..ba94d0d23 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(--body-font-size-md); + --text-size: var(--mdl-typography-body-fontSize-md); --background-color: #{$background-color}; --stroke: var(--gray-300); @@ -67,12 +67,12 @@ html { --core-input-stroke: var(--gray-500); --core-input-text: var(--dark); --core-input-background: var(--ion-background-color); - --core-input-radius: var(--radius-xs); + --core-input-radius: var(--mdl-shape-borderRadius-xs); --core-input-border-width: 1px; --list-item-max-width: 768px; - --modal-radius: var(--radius-md); + --modal-radius: var(--mdl-shape-borderRadius-md); --modal-lateral-max-width: 320px; --modal-lateral-margin: 56px; @@ -80,13 +80,13 @@ html { --loader-background-color: rgb(0 0 0 / 10%); --loader-shine: 251 251 251; - --loader-radius: var(--radius-xs); + --loader-radius: var(--mdl-shape-borderRadius-xs); --loader-display: block; - --drop-shadow-top: 0px 2px 5px rgb(var(--drop-shadow-color) / 50%); - --drop-shadow-bottom: 0px -2px 5px rgb(var(--drop-shadow-color) / 50%); - --drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%); - --drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%); + --drop-shadow-top: 0px 2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + --drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + --drop-shadow-end: -2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); + --drop-shadow-start: 2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%); --ion-text-color: var(--text-color); --ion-text-color-rgb: #{$text-color-rgb}; @@ -95,7 +95,7 @@ html { --ion-card-color: var(--text-color); --ion-card-vertical-margin: 12px; --ion-card-horizontal-margin: 12px; - --ion-card-radius: var(--radius-lg); + --ion-card-radius: var(--mdl-shape-borderRadius-lg); --ion-card-border-width: 1px; --ion-card-border-color: var(--stroke); ion-card { @@ -135,7 +135,7 @@ html { color: var(--core-link-color); } - --core-header-toolbar-button-image-size: var(--a11y-min-target-size); + --core-header-toolbar-button-image-size: var(--a11y-sizing-minTargetSize); --core-header-toolbar-background: var(--white); --core-header-toolbar-border-width: 0px; --core-header-toolbar-border-color: var(--stroke); @@ -183,7 +183,7 @@ html { --ion-searchbar-background: var(--ion-background-color); --ion-searchbar-border-color: var(--core-input-stroke); --ion-searchbar-border-radius: var(--core-input-radius); - --ion-searchbar-height: var(--a11y-min-target-size); + --ion-searchbar-height: var(--a11y-sizing-minTargetSize); --ion-searchbar-color: var(--text-color); --ion-searchbar-icon-color: var(--core-input-stroke); ion-searchbar, @@ -277,7 +277,7 @@ html { --ion-item-background: #{$ion-item-background}; --ion-item-icon-color: var(--medium); --ion-item-detail-icon-color: var(--dark); - --ion-item-detail-icon-font-size: 20px; + --ion-item-detail-icon-font-size: var(--mdl-typography-icon-fontSize-md); --ion-item-detail-icon-opacity: 1; --core-more-icon: var(--ion-item-icon-color); ion-item { @@ -290,7 +290,7 @@ html { } } - --item-divider-min-height: calc(var(--a11y-min-target-size) + 8px); + --item-divider-min-height: calc(var(--a11y-sizing-minTargetSize) + 8px); --item-divider-background: var(--ion-item-background); --item-divider-color: var(--text-color); --item-divider-border-width: 0px; @@ -310,8 +310,8 @@ html { } ion-back-button { - --min-height: var(--a11y-min-target-size); - --min-width: var(--a11y-min-target-size); + --min-height: var(--a11y-sizing-minTargetSize); + --min-width: var(--a11y-sizing-minTargetSize); } --selected-item-color: var(--primary); @@ -330,11 +330,11 @@ html { --core-star-color: var(--primary); --core-large-avatar-size: 80px; - --core-avatar-size: var(--a11y-min-target-size); + --core-avatar-size: var(--a11y-sizing-minTargetSize); --core-avatar-radius: 50%; --core-courseimage-on-course-size: 72px; - --core-courseimage-radius: var(--radius-sm); + --core-courseimage-radius: var(--mdl-shape-borderRadius-sm); --core-navigation-background: var(--contrast-background);