EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-4458 design: Apply typography

main
Pau Ferrer Ocaña 2024-03-14 10:15:47 +01:00
parent cd05350e50
commit 59280ca81c
43 changed files with 337 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/addons/block/activityresults/components/activityresults/activityresults.scss
View File

@ -22,8 +22,7 @@
padding-top: .75rem; padding-top: .75rem;
padding-bottom: .75rem; padding-bottom: .75rem;
color: var(--medium); color: var(--medium);
font-weight: bold; font: var(--mdl-typography-subtitle-font-md);
font-size: 18px;
} }
} }
} }

2
src/addons/block/blogtags/components/blogtags/blogtags.scss
View File

@ -22,7 +22,7 @@
contain: content; contain: content;
vertical-align: baseline; vertical-align: baseline;
text-decoration: none; text-decoration: none;
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
} }
.s20 { .s20 {
font-size: 1.5em; font-size: 1.5em;

4
src/addons/block/myoverview/components/myoverview/myoverview.scss
View File

@ -11,7 +11,7 @@
ion-button, ion-button,
core-combobox ::ng-deep ion-select { core-combobox ::ng-deep ion-select {
--a11y-min-target-size: 40px; --a11y-sizing-minTargetSize: 40px;
margin: 0; margin: 0;
} }
@ -19,7 +19,7 @@
--border-width: 0; --border-width: 0;
ion-icon { ion-icon {
font-size: 20px; font-size: var(--mdl-typography-icon-fontSize-md);
} }
} }

2
src/addons/block/tags/components/tags/tags.scss
View File

@ -30,7 +30,7 @@
contain: content; contain: content;
vertical-align: baseline; vertical-align: baseline;
text-decoration: none; text-decoration: none;
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
} }
.s20 { .s20 {
font-size: 2.7em; font-size: 2.7em;

6
src/addons/block/timeline/components/timeline/timeline.scss
View File

@ -12,20 +12,20 @@
ion-button, ion-button,
core-combobox ::ng-deep ion-button { core-combobox ::ng-deep ion-button {
--border-width: 0; --border-width: 0;
--a11y-min-target-size: 40px; --a11y-sizing-minTargetSize: 40px;
margin: 0; margin: 0;
.select-icon { .select-icon {
display: none; display: none;
} }
ion-icon { ion-icon {
font-size: 20px; font-size: var(--mdl-typography-icon-fontSize-md);
} }
} }
core-combobox ::ng-deep ion-select { core-combobox ::ng-deep ion-select {
margin: 0; margin: 0;
--a11y-min-target-size: 40px; --a11y-sizing-minTargetSize: 40px;
} }
core-search-box { core-search-box {

2
src/addons/calendar/components/filter/filter.scss
View File

@ -8,7 +8,7 @@
> ion-icon { > ion-icon {
padding: 4px; padding: 4px;
font-size: 20px; font-size: var(--mdl-typography-icon-fontSize-md);
} }
} }
} }

2
src/addons/mod/resource/components/index/index.scss
View File

@ -5,7 +5,7 @@
@include padding(4px, 0px, 0px, 0px); @include padding(4px, 0px, 0px, 0px);
ion-icon { ion-icon {
font-size: 24px; font-size: var(--mdl-typography-icon-fontSize-lg);
} }
} }

4
src/addons/mod/survey/components/index/index.scss
View File

@ -19,8 +19,8 @@
} }
ion-radio { ion-radio {
height: var(--a11y-min-target-size); height: var(--a11y-sizing-minTargetSize);
width: var(--a11y-min-target-size); width: var(--a11y-sizing-minTargetSize);
padding: 12px; padding: 12px;
} }
} }

4
src/addons/notifications/notifications.scss
View File

@ -16,7 +16,7 @@
.core-avatar-extra-img { .core-avatar-extra-img {
background: var(--background-color); background: var(--background-color);
border-radius: var(--radius-sm); border-radius: var(--mdl-shape-borderRadius-sm);
img { img {
max-width: var(--extra-icon-size); max-width: var(--extra-icon-size);
max-height: var(--extra-icon-size); max-height: var(--extra-icon-size);
@ -39,7 +39,7 @@
} }
padding: 0px; padding: 0px;
background: var(--background-color); background: var(--background-color);
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
@include margin(6px, 8px, 6px, 0px); @include margin(6px, 8px, 6px, 0px);
} }

4
src/core/components/button-with-spinner/button-with-spinner.scss
View File

@ -5,8 +5,8 @@
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
align-content: center; align-content: center;
min-height: var(--a11y-min-target-size); min-height: var(--a11y-sizing-minTargetSize);
min-width: var(--a11y-min-target-size); min-width: var(--a11y-sizing-minTargetSize);
position: relative; position: relative;
> * { > * {

8
src/core/components/combobox/combobox.scss
View File

@ -21,7 +21,7 @@
ion-icon { ion-icon {
margin: var(--icon-margin); margin: var(--icon-margin);
font-size: 20px; font-size: var(--mdl-typography-icon-fontSize-md);
} }
} }
} }
@ -49,7 +49,7 @@
color: var(--color); color: var(--color);
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
min-height: var(--a11y-min-target-size); min-height: var(--a11y-sizing-minTargetSize);
overflow: hidden; overflow: hidden;
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
@ -110,9 +110,7 @@
flex: 1; flex: 1;
&::part(native) { &::part(native) {
font-weight: var(--label-font-weight); font: var(--mdl-typography-label-font-lg);
font-size: var(--label-lg-font-size);
line-height: var(--label-lg-line-height);
border-radius: var(--core-combobox-radius); border-radius: var(--core-combobox-radius);
} }

4
src/core/components/download-refresh/download-refresh.scss
View File

@ -5,8 +5,8 @@
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
align-content: center; align-content: center;
min-height: var(--a11y-min-target-size); min-height: var(--a11y-sizing-minTargetSize);
min-width: var(--a11y-min-target-size); min-width: var(--a11y-sizing-minTargetSize);
position: relative; position: relative;
> * { > * {

2
src/core/components/empty-box/empty-box.scss
View File

@ -33,7 +33,7 @@
p, p,
::ng-deep p { ::ng-deep p {
font-size: var(--heading-6-font-size); font-size: var(--mdl-typography-heading6-fontSize);
color: var(--text-color); color: var(--text-color);
} }
} }

4
src/core/components/message/message.scss
View File

@ -11,14 +11,14 @@
.message-box { .message-box {
--background: var(--message-background); --background: var(--message-background);
--min-height: var(--a11y-min-target-size); --min-height: var(--a11y-sizing-minTargetSize);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
position: relative; position: relative;
border: 0; border: 0;
border-radius: var(--radius-sm); border-radius: var(--mdl-shape-borderRadius-sm);
margin: 8px; margin: 8px;
width: 90%; width: 90%;
max-width: var(--list-item-max-width); max-width: var(--list-item-max-width);

2
src/core/components/mod-icon/mod-icon.scss
View File

@ -7,7 +7,7 @@
--padding-top: var(--module-icon-padding, 4px); --padding-top: var(--module-icon-padding, 4px);
--padding-end: var(--module-icon-padding, 4px); --padding-end: var(--module-icon-padding, 4px);
--padding-bottom: 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-end: 0px;
--margin-vertical: 0px; --margin-vertical: 0px;

4
src/core/components/send-message-form/send-message-form.scss
View File

@ -7,7 +7,7 @@
--textarea-color: var(--core-input-text); --textarea-color: var(--core-input-text);
--textarea-border-width: var(--core-input-border-width); --textarea-border-width: var(--core-input-border-width);
--textarea-border-color: var(--core-input-stroke); --textarea-border-color: var(--core-input-stroke);
--textarea-radius: var(--radius-xl); --textarea-radius: var(--mdl-shape-borderRadius-xl);
form { form {
display: flex; display: flex;
@ -27,7 +27,7 @@
border: var(--textarea-border-width) solid var(--textarea-border-color); border: var(--textarea-border-width) solid var(--textarea-border-color);
border-radius: var(--textarea-radius); border-radius: var(--textarea-radius);
min-height: var(--a11y-min-target-size); min-height: var(--a11y-sizing-minTargetSize);
line-height: 20px; line-height: 20px;
padding: 10px; padding: 10px;
@include margin(4px, 0px, 4px, 8px); @include margin(4px, 0px, 4px, 8px);

2
src/core/components/tabs/tabs.scss
View File

@ -40,7 +40,7 @@
height: var(--height); height: var(--height);
--border-radius: 0; --border-radius: 0;
ion-icon { ion-icon {
font-size: 16px; font-size: var(--mdl-typography-icon-fontSize-sm);
} }
} }

2
src/core/components/timer/timer.scss
View File

@ -20,7 +20,7 @@
div.core-timer { div.core-timer {
background: var(--timer-background); background: var(--timer-background);
color: var(--timer-text-color, var(--text-color)); color: var(--timer-text-color, var(--text-color));
border-radius: var(--radius-lg); border-radius: var(--mdl-shape-borderRadius-lg);
} }
button { button {

2
src/core/features/block/components/block/block.scss
View File

@ -5,7 +5,7 @@
background: var(--background); background: var(--background);
ion-card { ion-card {
--border-radius: var(--radius-sm); --border-radius: var(--mdl-shape-borderRadius-sm);
} }
::ng-deep ion-item-divider { ::ng-deep ion-item-divider {

2
src/core/features/course/components/module-info/course-module-info.scss
View File

@ -30,7 +30,7 @@
.core-module-info-box { .core-module-info-box {
background: var(--light); background: var(--light);
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
margin: 8px; margin: 8px;
padding: 8px; padding: 8px;

8
src/core/features/course/components/module/module.scss
View File

@ -35,7 +35,7 @@
margin-bottom: 0px; margin-bottom: 0px;
--module-icon-padding: 0px; --module-icon-padding: 0px;
--module-legacy-icon-padding: 4px; --module-legacy-icon-padding: 4px;
--module-icon-radius: var(--radius-xs); --module-icon-radius: var(--mdl-shape-borderRadius-xs);
@include margin-horizontal(null, 8px); @include margin-horizontal(null, 8px);
align-self: self-start; align-self: self-start;
@ -75,7 +75,7 @@
--padding-start: 0px; --padding-start: 0px;
--padding-end: 0px; --padding-end: 0px;
ion-icon { ion-icon {
font-size: 20px; font-size: var(--mdl-typography-icon-fontSize-md);
} }
} }
@ -101,7 +101,7 @@
.core-module-description ::ng-deep img, .core-module-description ::ng-deep img,
.activity-title .item-heading core-format-text ::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 { core-course-module-completion {
@ -132,7 +132,7 @@
.activity-description-availabilityinfo { .activity-description-availabilityinfo {
.core-module-availabilityinfo { .core-module-availabilityinfo {
background: var(--gray-300); background: var(--gray-300);
border-radius: var(--radius-sm); border-radius: var(--mdl-shape-borderRadius-sm);
margin-top: 8px; margin-top: 8px;
padding: 8px; padding: 8px;
font-size: 14px; font-size: 14px;

6
src/core/features/course/pages/course-summary/course-summary.scss
View File

@ -43,8 +43,8 @@
.course-container { .course-container {
position: relative; position: relative;
top: calc(var(--thumb-height) - var(--radius-lg)); top: calc(var(--thumb-height) - var(--mdl-shape-borderRadius-lg));
border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-radius: var(--mdl-shape-borderRadius-lg) var(--mdl-shape-borderRadius-lg) 0 0;
background-color: var(--ion-background-color); background-color: var(--ion-background-color);
box-shadow: var(--drop-shadow-top); box-shadow: var(--drop-shadow-top);
clip-path: inset(-5px 0px 0px 0px); clip-path: inset(-5px 0px 0px 0px);
@ -68,7 +68,7 @@
.core-course-dates { .core-course-dates {
background: var(--light); background: var(--light);
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
padding: 8px; padding: 8px;
width: 100%; width: 100%;

2
src/core/features/course/pages/module-preview/module-preview.scss
View File

@ -2,7 +2,7 @@
.core-module-availabilityinfo { .core-module-availabilityinfo {
background: var(--light); background: var(--light);
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
padding: 8px; padding: 8px;
font-size: 90%; font-size: 90%;
::ng-deep ul { ::ng-deep ul {

2
src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
View File

@ -125,7 +125,7 @@
margin: 0 auto; margin: 0 auto;
font-size: 18px; font-size: 18px;
background-color: var(--toobar-background); background-color: var(--toobar-background);
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
@include core-transition(background-color, 200ms); @include core-transition(background-color, 200ms);
color: var(--button-color); color: var(--button-color);
cursor: pointer; cursor: pointer;

2
src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss
View File

@ -20,7 +20,7 @@
--icon-size: 1.8em; --icon-size: 1.8em;
// Offset padding for visual alignment. // 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);
} }
} }

2
src/core/features/grades/pages/course/course.scss
View File

@ -97,7 +97,7 @@ table.core-table.core-grades-table {
} }
th, td { th, td {
height: var(--a11y-min-target-size); height: var(--a11y-sizing-minTargetSize);
vertical-align: middle; vertical-align: middle;
} }
} }

2
src/core/features/mainmenu/pages/menu/menu.scss
View File

@ -58,7 +58,7 @@ ion-tab-bar {
text-overflow: unset; text-overflow: unset;
overflow: visible; overflow: visible;
text-align: center; text-align: center;
font-size: 24px; font-size: var(--mdl-typography-icon-fontSize-lg);
} }
ion-badge.core-tab-badge { ion-badge.core-tab-badge {

2
src/core/features/question/question.scss
View File

@ -74,7 +74,7 @@
.questioncorrectnessicon, .questioncorrectnessicon,
.fa.icon.questioncorrectnessicon { .fa.icon.questioncorrectnessicon {
font-size: 20px; font-size: var(--mdl-typography-icon-fontSize-md);
} }
.item.item-interactive.item-interactive-disabled ::ng-deep { .item.item-interactive.item-interactive-disabled ::ng-deep {

2
src/core/features/reportbuilder/components/report-summary/report-summary.scss
View File

@ -6,7 +6,7 @@
ion-footer { ion-footer {
ion-icon { ion-icon {
font-size: 16px; font-size: var(--mdl-typography-icon-fontSize-sm);
color: $blue; color: $blue;
margin-right: .3rem; margin-right: .3rem;
vertical-align: middle; vertical-align: middle;

18
src/core/features/search/components/global-search-result/global-search-result.scss
View File

@ -17,7 +17,7 @@
--module-icon-size: var(--core-global-search-result-icon-size); --module-icon-size: var(--core-global-search-result-icon-size);
--module-legacy-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-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
flex-shrink: 0; flex-shrink: 0;
@ -27,7 +27,7 @@
width: var(--core-global-search-result-icon-size); width: var(--core-global-search-result-icon-size);
height: 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; flex-shrink: 0;
} }
@ -36,15 +36,15 @@
core-user-avatar { core-user-avatar {
--core-avatar-size: var(--core-global-search-result-image-size); --core-avatar-size: var(--core-global-search-result-image-size);
margin-top: var(--spacing-3); margin-top: var(--mdl-spacing-3);
margin-bottom: var(--spacing-3); margin-bottom: var(--mdl-spacing-3);
} }
core-course-image { core-course-image {
--core-image-size: var(--core-global-search-result-image-size); --core-image-size: var(--core-global-search-result-image-size);
margin-top: var(--spacing-3); margin-top: var(--mdl-spacing-3);
margin-bottom: var(--spacing-3); margin-bottom: var(--mdl-spacing-3);
} }
ion-label { ion-label {
@ -72,12 +72,12 @@
justify-items: center; justify-items: center;
align-items: center; align-items: center;
color: var(--core-global-search-result-context-color); color: var(--core-global-search-result-context-color);
margin-top: var(--spacing-2); margin-top: var(--mdl-spacing-2);
margin-inline-end: var(--spacing-4); margin-inline-end: var(--mdl-spacing-4);
font-size: 12px; font-size: 12px;
ion-icon { ion-icon {
margin-inline-end: var(--spacing-1); margin-inline-end: var(--mdl-spacing-1);
flex-shrink: 0; flex-shrink: 0;
} }

6
src/core/features/search/components/search-box/search-box.scss
View File

@ -1,5 +1,5 @@
:host { :host {
--height: var(--a11y-min-target-size); --height: var(--a11y-sizing-minTargetSize);
--search-height: calc(var(--height) - 2px); --search-height: calc(var(--height) - 2px);
min-height: var(--height); min-height: var(--height);
display: block; display: block;
@ -28,7 +28,7 @@
ion-button.button { ion-button.button {
margin: 0; margin: 0;
--a11y-min-target-size: var(--search-height); --a11y-sizing-minTargetSize: var(--search-height);
--padding-start: 0px; --padding-start: 0px;
--padding-end: 0px; --padding-end: 0px;
font-size: 12px; font-size: 12px;
@ -50,7 +50,7 @@
} }
ion-item { ion-item {
--min-height: var(--a11y-min-target-size); --min-height: var(--a11y-sizing-minTargetSize);
--border-width: 0px; --border-width: 0px;
--background: var(--core-search-box-background); --background: var(--core-search-box-background);

2
src/core/features/sitehome/pages/index/index.scss
View File

@ -2,7 +2,7 @@
ion-item ion-icon { ion-item ion-icon {
display: inline-block; display: inline-block;
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
padding: 4px; padding: 4px;
background-color: var(--gray-100); background-color: var(--gray-100);
color: var(--gray-900); color: var(--gray-900);

2
src/theme/components/collapsible-item.scss
View File

@ -38,7 +38,7 @@
min-width: var(--toggle-size); min-width: var(--toggle-size);
height: var(--toggle-size); height: var(--toggle-size);
width: var(--toggle-size); width: var(--toggle-size);
--border-radius: var(--radius-xl); --border-radius: var(--mdl-shape-borderRadius-xl);
border-radius: var(--border-radius); border-radius: var(--border-radius);
--padding-start: 0px; --padding-start: 0px;
--padding-end: 0px; --padding-end: 0px;

2
src/theme/components/discussion.scss
View File

@ -1,5 +1,3 @@
@use "theme/globals" as *;
:host-context(.ios) { :host-context(.ios) {
ion-footer .toolbar:last-child { ion-footer .toolbar:last-child {
padding-bottom: 4px; padding-bottom: 4px;

43
src/theme/components/error-accordion.scss
View File

@ -4,18 +4,25 @@
--background-color: var(--gray-300); --background-color: var(--gray-300);
--toggle-icon-size: 16px; --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); background: var(--background-color);
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
.core-error-accordion--code { .core-error-accordion--code {
margin: 0; margin: 0;
text-align: start; text-align: start;
color: var(--text-color-main); color: var(--text-color);
font: var(--subtitle-md-font); font: var(--mdl-typography-subtitle-font-md);
padding-top: var(--spacing-2); padding-top: var(--mdl-spacing-2);
padding-bottom: var(--spacing-2); padding-bottom: var(--mdl-spacing-2);
padding-inline-start: var(--spacing-3); padding-inline-start: var(--mdl-spacing-3);
padding-inline-end: var(--spacing-3); padding-inline-end: var(--mdl-spacing-3);
} }
.core-error-accordion--details { .core-error-accordion--details {
@ -30,12 +37,12 @@
p { p {
margin: 0; margin: 0;
padding-top: var(--spacing-2); padding-top: var(--mdl-spacing-2);
padding-bottom: var(--spacing-2); padding-bottom: var(--mdl-spacing-2);
padding-inline-start: var(--spacing-3); padding-inline-start: var(--mdl-spacing-3);
padding-inline-end: var(--spacing-3); padding-inline-end: var(--mdl-spacing-3);
text-align: start; text-align: start;
font: var(--body-md-font); font: var(--mdl-typography-body-font-md);
color: var(--text-color-secondary); color: var(--text-color-secondary);
} }
@ -48,11 +55,11 @@
background: transparent; background: transparent;
justify-content: space-between; justify-content: space-between;
color: var(--text-color-secondary); color: var(--text-color-secondary);
font: var(--label-lg-font); font: var(--mdl-typography-label-font-lg);
padding-top: var(--spacing-2); padding-top: var(--mdl-spacing-2);
padding-bottom: var(--spacing-2); padding-bottom: var(--mdl-spacing-2);
padding-inline-start: var(--spacing-3); padding-inline-start: var(--mdl-spacing-3);
padding-inline-end: var(--spacing-3); padding-inline-end: var(--mdl-spacing-3);
.core-error-accordion--toggle-text { .core-error-accordion--toggle-text {
display: flex; display: flex;
@ -67,7 +74,7 @@
ion-icon { ion-icon {
width: var(--toggle-icon-size); 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); transition: transform var(--toggle-icon-animation-duration) var(--toggle-icon-animation-function);
transform: rotate(0); transform: rotate(0);
} }

20
src/theme/components/format-text.scss
View File

@ -75,14 +75,14 @@ core-format-text {
position: absolute; position: absolute;
@include position(null, 10px, 10px, null); @include position(null, 10px, 10px, null);
color: var(--ion-text-color); 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); background-color: var(--core-format-text-viewer-icon-background);
display: flex; display: flex;
width: var(--a11y-min-target-size); width: var(--a11y-sizing-minTargetSize);
height: var(--a11y-min-target-size); height: var(--a11y-sizing-minTargetSize);
max-width: var(--a11y-min-target-size); max-width: var(--a11y-sizing-minTargetSize);
font-size: 24px; font-size: var(--mdl-typography-icon-fontSize-lg);
ion-icon { ion-icon {
flex: 1; flex: 1;
@ -266,9 +266,9 @@ core-rich-text-editor .core-rte-editor {
} }
img.icon { img.icon {
font-size: 16px; font-size: var(--mdl-typography-icon-fontSize-sm);
width: 16px; width: var(--mdl-typography-icon-fontSize-sm);
height: 16px; height: var(--mdl-typography-icon-fontSize-sm);
margin: 0; margin: 0;
padding: 0; padding: 0;
-webkit-box-sizing: content-box; -webkit-box-sizing: content-box;
@ -285,7 +285,7 @@ core-rich-text-editor .core-rte-editor {
border: 1px solid var(--gray-500); border: 1px solid var(--gray-500);
background: var(--contrast-background); background: var(--contrast-background);
padding: 6px 8px; padding: 6px 8px;
border-radius: var(--radius-xs); border-radius: var(--mdl-shape-borderRadius-xs);
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
margin-bottom: 10px; margin-bottom: 10px;
@ -615,7 +615,7 @@ core-rich-text-editor .core-rte-editor {
} }
// utilities/_text.scss // 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-justify { text-align: justify !important; }
.text-wrap { white-space: normal !important; } .text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; } .text-nowrap { white-space: nowrap !important; }

16
src/theme/helpers/custom.mixins.scss
View File

@ -80,10 +80,10 @@
} }
@mixin core-focus-style() { @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); border-radius: var(--border-radius);
// Thicker option: // 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) { @mixin core-transition($properties: all, $duration: 500ms, $timing-function: ease-in-out) {
@ -198,22 +198,22 @@
@mixin core-headings() { @mixin core-headings() {
h1 { h1 {
font: var(--heading-1-font); font: var(--mdl-typography-heading1-font);
} }
h2, .item-heading { h2, .item-heading {
font: var(--heading-2-font); font: var(--mdl-typography-heading2-font);
} }
h3 { h3 {
font: var(--heading-3-font); font: var(--mdl-typography-heading3-font);
} }
h4 { h4 {
font: var(--heading-4-font); font: var(--mdl-typography-heading4-font);
} }
h5 { h5 {
font: var(--heading-5-font); font: var(--mdl-typography-heading5-font);
} }
h6 { h6 {
font: var(--heading-6-font); font: var(--mdl-typography-heading6-font);
} }
} }

3
src/theme/helpers/helpers.scss
View File

@ -5,6 +5,9 @@
// Global Color Functions // Global Color Functions
@import "./ionic.functions.color"; @import "./ionic.functions.color";
// Global Font Functions
@import "./ionic.functions.font";
// Global Mixins // Global Mixins
@import "./ionic.mixins"; @import "./ionic.mixins";

70
src/theme/helpers/ionic.functions.font.scss 100644
View File

@ -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);
}

44
src/theme/theme.base.scss
View File

@ -161,7 +161,7 @@ ion-header {
--color: var(--core-header-buttons-color); --color: var(--core-header-buttons-color);
--background: var(--core-header-buttons-background); --background: var(--core-header-buttons-background);
--ion-toolbar-color: var(--core-header-buttons-color); --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); --primary: var(--core-header-buttons-color);
} }
ion-back-button::part(text) { ion-back-button::part(text) {
@ -175,10 +175,10 @@ ion-header {
.button.button-clear.button-has-icon-only, .button.button-clear.button-has-icon-only,
.button.button-solid.button-has-icon-only { .button.button-solid.button-has-icon-only {
width: var(--a11y-min-target-size); width: var(--a11y-sizing-minTargetSize);
height: var(--a11y-min-target-size); height: var(--a11y-sizing-minTargetSize);
ion-icon { ion-icon {
font-size: 24px; font-size: var(--mdl-typography-icon-fontSize-lg);
} }
} }
@ -213,7 +213,7 @@ ion-header {
} }
h1, h2, .subheading { h1, h2, .subheading {
font-size: 20px; font-size: var(--mdl-typography-label-lineHeight-lg);
font-weight: 500; font-weight: 500;
letter-spacing: .0125em; letter-spacing: .0125em;
text-align: start; text-align: start;
@ -236,7 +236,7 @@ ion-header {
text-align: start; text-align: start;
h1, h2, .subheading { h1, h2, .subheading {
font-size: 17px; font-size: var(--mdl-typography-label-lineHeight-md);
font-weight: 600; font-weight: 600;
} }
@ -266,8 +266,8 @@ ion-fab-button,
button, button,
[role="button"] { [role="button"] {
text-transform: none; text-transform: none;
min-height: var(--a11y-min-target-size); min-height: var(--a11y-sizing-minTargetSize);
min-width: var(--a11y-min-target-size); min-width: var(--a11y-sizing-minTargetSize);
&.button-large { &.button-large {
min-height: 2.8em; 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 { 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 { ion-button.button.button-clear {
@ -736,7 +736,7 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
.core-password-modal { .core-password-modal {
--border-radius: var(--radius-sm); --border-radius: var(--mdl-shape-borderRadius-sm);
--min-width: auto; --min-width: auto;
--min-height: 300px; --min-height: 300px;
--width: 384px; --width: 384px;
@ -800,7 +800,7 @@ body.core-iframe-fullscreen ion-router-outlet {
} }
ion-button { ion-button {
--a11y-min-target-size: 40px; --a11y-sizing-minTargetSize: 40px;
} }
&.item-directory ion-icon { &.item-directory ion-icon {
@ -835,7 +835,7 @@ body.core-iframe-fullscreen ion-router-outlet {
--border-width: 0; --border-width: 0;
--border-color: var(--color-tint); --border-color: var(--color-tint);
--border-radius: var(--radius-sm); --border-radius: var(--mdl-shape-borderRadius-sm);
--background: var(--color-tint); --background: var(--color-tint);
--color: var(--color-shade); --color: var(--color-shade);
@ -957,7 +957,7 @@ ion-card {
} }
.section-summary core-format-text img { .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, ion-list.core-course-module-list-wrapper,
@ -1008,7 +1008,7 @@ ion-action-sheet.md {
} }
.action-sheet-group:first-child { .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 { .action-sheet-group-cancel {
@ -1173,7 +1173,7 @@ ion-select-popover {
ion-badge { ion-badge {
line-height: 1.1; line-height: 1.1;
padding: 2px 8px; padding: 2px 8px;
border-radius: var(--radius-lg); border-radius: var(--mdl-shape-borderRadius-lg);
} }
ion-chip, ion-chip,
@ -1185,8 +1185,8 @@ ion-button.button.chip {
font-weight: normal; font-weight: normal;
ion-icon { ion-icon {
font-size: 16px; font-size: var(--mdl-typography-icon-fontSize-sm);
min-width: 16px; min-width: var(--mdl-typography-icon-fontSize-sm);
@include margin(0, 8px, 0, 0); @include margin(0, 8px, 0, 0);
} }
@ -1196,7 +1196,7 @@ ion-button.button.chip {
} }
ion-button.button.chip { ion-button.button.chip {
--border-radius: var(--radius-md); --border-radius: var(--mdl-shape-borderRadius-md);
min-height: 32px; min-height: 32px;
font-size: 14px; font-size: 14px;
@ -1258,7 +1258,7 @@ ion-chip {
ion-searchbar { ion-searchbar {
height: var(--height) !important; height: var(--height) !important;
--border-radius: var(--radius-xs); --border-radius: var(--mdl-shape-borderRadius-xs);
.searchbar-input-container { .searchbar-input-container {
color: var(--color) !important; color: var(--color) !important;
@ -1266,7 +1266,7 @@ ion-searchbar {
} }
.searchbar-input { .searchbar-input {
--border-radius: var(--radius-xs); --border-radius: var(--mdl-shape-borderRadius-xs);
height: var(--height) !important; height: var(--height) !important;
border: 1px solid var(--border-color) !important; border: 1px solid var(--border-color) !important;
@ -1334,7 +1334,7 @@ mark, .matchtext {
// Monospaced font. // Monospaced font.
.core-monospaced { .core-monospaced {
font-family: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace; font-family: var(--mdl-typography-monospace-font);
} }
.core-iframe-offline-disabled { .core-iframe-offline-disabled {
@ -1370,7 +1370,7 @@ details summary {
} }
textarea { textarea {
min-height: var(--a11y-min-target-size); min-height: var(--a11y-sizing-minTargetSize);
} }
textarea:not([core-auto-rows]) { textarea:not([core-auto-rows]) {

4
src/theme/theme.dark.scss
View File

@ -47,8 +47,8 @@ html.dark {
--loader-shine: 90 90 90; --loader-shine: 90 90 90;
--drop-shadow-top: 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(--drop-shadow-color) / 1); --drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 1);
--ion-card-color: var(--text-color); --ion-card-color: var(--text-color);
--ion-card-background: var(--ion-item-background); --ion-card-background: var(--ion-item-background);

228
src/theme/theme.design-system.scss
View File

@ -1,146 +1,160 @@
@import "./globals.scss";
html { 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 { @for $i from 0 to 6 {
--spacing-#{$i}: #{$i*4}px; --mdl-spacing-#{$i}: #{$i*4}px;
} }
// Typography // ***** TYPOGRAPHY category ***** //
--font-size-sm: 12px; // Sintaxis:[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
--font-size-md: 14px; --mdl-typography-fontSize-sm: #{dynamic-font(12px)}; // 0.75rem
--font-size-lg: 16px; --mdl-typography-fontSize-md: #{dynamic-font(14px)}; // 0.875rem
--mdl-typography-fontSize-lg: #{dynamic-font(16px)}; // 1rem
--font-weight-normal: 400; --mdl-typography-fontWeight-normal: 400;
--font-weight-medium: 500; --mdl-typography-fontWeight-medium: 500;
// Typography - Body --mdl-typography-monospace-font: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;
--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%;
--body-sm-font: normal normal var(--body-font-weight) var(--body-font-size-sm)/var(--body-line-height) var(--ion-font-family); // Body font size
--body-md-font: normal normal var(--body-font-weight) var(--body-font-size-md)/var(--body-line-height) var(--ion-font-family); --mdl-typography-body-fontSize-sm: var(--mdl-typography-fontSize-sm);
--body-lg-font: normal normal var(--body-font-weight) var(--body-font-size-lg)/var(--body-line-height) var(--ion-font-family); --mdl-typography-body-fontSize-md: var(--mdl-typography-fontSize-md);
--mdl-typography-body-fontSize-lg: var(--mdl-typography-fontSize-lg);
// Typography - Links --mdl-typography-body-fontWeight: var(--mdl-typography-fontWeight-normal);
--link-sm-font-size: var(--font-size-sm); --mdl-typography-body-lineHeight: 150%;
--link-md-font-size: var(--font-size-md); --mdl-typography-body-letterSpacing: 0.5px;
--link-lg-font-size: var(--font-size-lg); --mdl-typography-body-paragraphSpacing: 150%;
--link-font-weight: var(--font-weight-normal);
--link-line-height: 150%;
--link-sm-font: normal normal var(--link-font-weight) var(--link-sm-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);
--link-md-font: normal normal var(--link-font-weight) var(--link-md-font-size)/var(--link-line-height) 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);
--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-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 // Links
--label-sm-font-size: 10px; --mdl-typography-link-fontSize-sm: var(--mdl-typography-fontSize-sm);
--label-md-font-size: 12px; --mdl-typography-link-fontSize-md: var(--mdl-typography-fontSize-md);
--label-lg-font-size: 14px; --mdl-typography-link-fontSize-lg: var(--mdl-typography-fontSize-lg);
--label-font-weight: var(--font-weight-medium);
--label-sm-line-height: 16px; --mdl-typography-link-fontWeight: var(--mdl-typography-fontWeight-normal);
--label-md-line-height: 16px; --mdl-typography-link-lineHeight: 150%;
--label-lg-line-height: 20px; --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); --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);
--label-md-font: normal normal var(--label-font-weight) var(--label-md-font-size)/var(--label-md-line-height) 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);
--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-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 // Labels
--subtitle-sm-font-size: 14px; --mdl-typography-label-fontSize-sm: #{dynamic-font(10px)}; // 0.625rem
--subtitle-md-font-size: 16px; --mdl-typography-label-fontSize-md: #{dynamic-font(12px)};
--subtitle-lg-font-size: 20px; --mdl-typography-label-fontSize-lg: #{dynamic-font(14px)};
--subtitle-font-weight: var(--font-weight-medium); --mdl-typography-label-fontWeight: var(--mdl-typography-fontWeight-medium);
--subtitle-line-height: 150%;
--subtitle-sm-font: normal normal var(--subtitle-font-weight) var(--subtitle-sm-font-size)/var(--subtitle-line-height) var(--ion-font-family); --mdl-typography-label-lineHeight-sm: #{dynamic-font(16px)};
--subtitle-md-font: normal normal var(--subtitle-font-weight) var(--subtitle-md-font-size)/var(--subtitle-line-height) var(--ion-font-family); --mdl-typography-label-lineHeight-md: #{dynamic-font(16px)};
--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-lg: #{dynamic-font(20px)};
// Typography - Headings --mdl-typography-label-letterSpacing: 0.1px;
--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); --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);
--heading-2-font-weight: var(--font-weight-normal); --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);
--heading-3-font-weight: var(--font-weight-normal); --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-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%; // 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); --mdl-typography-subtitle-fontWeight: var(--mdl-typography-fontWeight-medium);
--heading-2-font: normal normal var(--heading-2-font-weight) var(--heading-2-font-size)/var(--heading-line-height) var(--ion-font-family); --mdl-typography-subtitle-lineHeight: 150%;
--heading-3-font: normal normal var(--heading-3-font-weight) var(--heading-3-font-size)/var(--heading-line-height) var(--ion-font-family); --mdl-typography-subtitle-letterSpacing: 0.1px;
--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 --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);
--radius-none: 0px; --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);
--radius-xs: 4px; --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);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-round: 50%;
// Shadows / Elevation // Headings
--drop-shadow-color: 40 40 40; //#282828; --mdl-typography-heading1-fontSize: #{dynamic-font(28px)}; // 1.75rem
--drop-shadow-00: 0px 0px 0px 0px rgb(var(--drop-shadow-color) / 20%); --mdl-typography-heading2-fontSize: #{dynamic-font(24px)}; // 1.5rem
--drop-shadow-outline: 0px 0px 0px 2px rgb(var(--drop-shadow-color) / 15%), 0px 2px 4px 0px rgb(var(--drop-shadow-color) / 2%); --mdl-typography-heading3-fontSize: #{dynamic-font(22px)}; // 1.375rem
--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%); --mdl-typography-heading4-fontSize: #{dynamic-font(20px)}; // 1.25rem
--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%); --mdl-typography-heading5-fontSize: #{dynamic-font(18px)}; // 1.125rem
--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%); --mdl-typography-heading6-fontSize: #{dynamic-font(16px)}; // 1rem
--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%);
// A11y --mdl-typography-heading1-fontWeight: var(--mdl-typography-fontWeight-normal);
--a11y-min-target-size: 44px; --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 --mdl-typography-heading-lineHeight: 130%;
--blue: #0f6cbf;
--text-color-main: var(--gray-900); --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);
--text-color-secondary: var(--gray-800); --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% // Icons
--state-color-pressed: rgb(40 40 40, 12%); // --gray-900 12% --mdl-typography-icon-fontSize-sm: #{dynamic-font(16px)};
--state-color-focused: rgb(40 40 40, 12%); // --gray-900 12% --mdl-typography-icon-fontSize-md: #{dynamic-font(20px)};
--state-color-keyboard-focus: var(--blue); --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 // ***** SHADOW category ***** //
--text-color-main: var(--gray-200); --mdl-shadow-boxShadowColor: 40 40 40; //#282828;
--text-color-secondary: var(--gray-300); --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 **/ /** @deprecated since 4.3 **/
html { html {
--small-radius: var(--radius-xs); --small-radius: var(--mdl-shape-borderRadius-xs);
--medium-radius: var(--radius-sm); --medium-radius: var(--mdl-shape-borderRadius-sm);
--big-radius: var(--radius-lg); --big-radius: var(--mdl-shape-borderRadius-lg);
--huge-radius: var(--radius-xl); --huge-radius: var(--mdl-shape-borderRadius-xl);
} }
/** @deprecated since 4.4 **/ /** @deprecated since 4.4 **/
html { html {
--font-size-normal: var(--font-size-md); --font-size-normal: var(--mdl-typography-fontSize-md);
--a11y-min-target-size: var(--a11y-sizing-minTargetSize);
} }

34
src/theme/theme.light.scss
View File

@ -53,7 +53,7 @@ html {
--zoom-level: 100%; --zoom-level: 100%;
--text-color: #{$text-color}; --text-color: #{$text-color};
--text-size: var(--body-font-size-md); --text-size: var(--mdl-typography-body-fontSize-md);
--background-color: #{$background-color}; --background-color: #{$background-color};
--stroke: var(--gray-300); --stroke: var(--gray-300);
@ -67,12 +67,12 @@ html {
--core-input-stroke: var(--gray-500); --core-input-stroke: var(--gray-500);
--core-input-text: var(--dark); --core-input-text: var(--dark);
--core-input-background: var(--ion-background-color); --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; --core-input-border-width: 1px;
--list-item-max-width: 768px; --list-item-max-width: 768px;
--modal-radius: var(--radius-md); --modal-radius: var(--mdl-shape-borderRadius-md);
--modal-lateral-max-width: 320px; --modal-lateral-max-width: 320px;
--modal-lateral-margin: 56px; --modal-lateral-margin: 56px;
@ -80,13 +80,13 @@ html {
--loader-background-color: rgb(0 0 0 / 10%); --loader-background-color: rgb(0 0 0 / 10%);
--loader-shine: 251 251 251; --loader-shine: 251 251 251;
--loader-radius: var(--radius-xs); --loader-radius: var(--mdl-shape-borderRadius-xs);
--loader-display: block; --loader-display: block;
--drop-shadow-top: 0px 2px 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(--drop-shadow-color) / 50%); --drop-shadow-bottom: 0px -2px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
--drop-shadow-end: -2px 0px 5px rgb(var(--drop-shadow-color) / 50%); --drop-shadow-end: -2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
--drop-shadow-start: 2px 0px 5px rgb(var(--drop-shadow-color) / 50%); --drop-shadow-start: 2px 0px 5px rgb(var(--mdl-shadow-boxShadowColor) / 50%);
--ion-text-color: var(--text-color); --ion-text-color: var(--text-color);
--ion-text-color-rgb: #{$text-color-rgb}; --ion-text-color-rgb: #{$text-color-rgb};
@ -95,7 +95,7 @@ html {
--ion-card-color: var(--text-color); --ion-card-color: var(--text-color);
--ion-card-vertical-margin: 12px; --ion-card-vertical-margin: 12px;
--ion-card-horizontal-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-width: 1px;
--ion-card-border-color: var(--stroke); --ion-card-border-color: var(--stroke);
ion-card { ion-card {
@ -135,7 +135,7 @@ html {
color: var(--core-link-color); 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-background: var(--white);
--core-header-toolbar-border-width: 0px; --core-header-toolbar-border-width: 0px;
--core-header-toolbar-border-color: var(--stroke); --core-header-toolbar-border-color: var(--stroke);
@ -183,7 +183,7 @@ html {
--ion-searchbar-background: var(--ion-background-color); --ion-searchbar-background: var(--ion-background-color);
--ion-searchbar-border-color: var(--core-input-stroke); --ion-searchbar-border-color: var(--core-input-stroke);
--ion-searchbar-border-radius: var(--core-input-radius); --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-color: var(--text-color);
--ion-searchbar-icon-color: var(--core-input-stroke); --ion-searchbar-icon-color: var(--core-input-stroke);
ion-searchbar, ion-searchbar,
@ -277,7 +277,7 @@ html {
--ion-item-background: #{$ion-item-background}; --ion-item-background: #{$ion-item-background};
--ion-item-icon-color: var(--medium); --ion-item-icon-color: var(--medium);
--ion-item-detail-icon-color: var(--dark); --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; --ion-item-detail-icon-opacity: 1;
--core-more-icon: var(--ion-item-icon-color); --core-more-icon: var(--ion-item-icon-color);
ion-item { 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-background: var(--ion-item-background);
--item-divider-color: var(--text-color); --item-divider-color: var(--text-color);
--item-divider-border-width: 0px; --item-divider-border-width: 0px;
@ -310,8 +310,8 @@ html {
} }
ion-back-button { ion-back-button {
--min-height: var(--a11y-min-target-size); --min-height: var(--a11y-sizing-minTargetSize);
--min-width: var(--a11y-min-target-size); --min-width: var(--a11y-sizing-minTargetSize);
} }
--selected-item-color: var(--primary); --selected-item-color: var(--primary);
@ -330,11 +330,11 @@ html {
--core-star-color: var(--primary); --core-star-color: var(--primary);
--core-large-avatar-size: 80px; --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-avatar-radius: 50%;
--core-courseimage-on-course-size: 72px; --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); --core-navigation-background: var(--contrast-background);