Vmeda.Online/src/theme/theme.design-system.scss

@import "./globals.scss";
@import "theme.light.scss";
@import "theme.dark.scss";

html {

    // 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 {
        --mdl-spacing-#{$i}: #{$i*4}px;
    }

    // ***** TYPOGRAPHY category ***** //
    // Sintaxis:[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
    --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

    --mdl-typography-fontWeight-normal: 400;
    --mdl-typography-fontWeight-medium: 500;

    --mdl-typography-monospace-font: Andale Mono,Monaco,Courier New,DejaVu Sans Mono,monospace;

    // 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);

    --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%;

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

    // 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);

    --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%;

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

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

    --mdl-typography-label-fontWeight: var(--mdl-typography-fontWeight-medium);

    --mdl-typography-label-lineHeight-sm: #{dynamic-font(16px)};
    --mdl-typography-label-lineHeight-md: #{dynamic-font(16px)};
    --mdl-typography-label-lineHeight-lg: #{dynamic-font(20px)};

    --mdl-typography-label-letterSpacing: 0.1px;

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

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

    --mdl-typography-subtitle-fontWeight: var(--mdl-typography-fontWeight-medium);
    --mdl-typography-subtitle-lineHeight: 150%;
    --mdl-typography-subtitle-letterSpacing: 0.1px;

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

    // 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

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

    --mdl-typography-heading-lineHeight: 130%;

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

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

    // ***** 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%;

    // ***** 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);

    // @TODO ***** VARIABLES TO BE REVIEWED, RENAMED AND TIDIED ***** //
    --text-size: var(--mdl-typography-body-fontSize-md);

    --core-input-radius: var(--mdl-shape-borderRadius-xs);
    --core-input-border-width: 1px;

    --list-item-max-width: 768px;

    --modal-radius: var(--mdl-shape-borderRadius-md);
    --modal-lateral-max-width: 320px;
    --modal-lateral-margin: 56px;

    --loader-radius: var(--mdl-shape-borderRadius-xs);
    --loader-display: block;

    --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-card-vertical-margin: 12px;
    --ion-card-horizontal-margin: 12px;
    --ion-card-radius: var(--mdl-shape-borderRadius-lg);
    --ion-card-border-width: 1px;

    --bottom-tabs-size: 48px;
    --side-tabs-size: 56px;

    --core-header-toolbar-button-image-size: var(--a11y-sizing-minTargetSize);
    --core-header-toolbar-border-width: 0px;
    --core-header-toolbar-height: 48px;
    --core-header-shadow: none;

    --ion-searchbar-height: var(--a11y-sizing-minTargetSize);
    --ion-searchbar-border-radius: var(--core-input-radius);

    --core-search-box-border-radius: var(--core-input-radius);

    --core-combobox-radius: var(--core-input-radius);
    --core-combobox-border-width: var(--core-input-border-width);
    --core-combobox-box-shadow: none;

    --core-tab-font-weight-active: normal;
    --core-tabs-height: 48px;

    --core-progressbar-height: 8px;

    --ion-item-detail-icon-font-size: var(--mdl-typography-icon-fontSize-md);
    --ion-item-detail-icon-opacity: 1;

    --item-divider-min-height: calc(var(--a11y-sizing-minTargetSize) + 8px);
    --item-divider-border-width: 0px;
    --item-divider-font-size: 16px;
    --item-divider-font-size-big: 20px;

    --spacer-vertical: 8px;

    --selected-item-border-width: 5px;

    --core-large-avatar-size: 80px;
    --core-avatar-size: var(--a11y-sizing-minTargetSize);
    --core-avatar-radius: 50%;

    --core-courseimage-on-course-size: 72px;
    --core-courseimage-radius: var(--mdl-shape-borderRadius-sm);

    --core-user-menu-site-logo-max-height: 32px;

    --core-messages-message-note-font-size: 75%;
    --core-messages-avatar-size: 30px;

    --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-500);
    --core-dd-question-radius: 10px;

    --rotate-expandable: rotate(90deg);

    --core-mainpage-sitename-display: none;
    --core-mainpage-headerlogo-display: none;
    --core-mainpage-headerlogo-maxheight: calc(var(--core-header-toolbar-height) - 16px);

    @if ($core-dashboard-logo) {
        --core-mainpage-headerlogo-display: inline;
    } @else {
        --core-mainpage-sitename-display: inline;
    }
}

/** @deprecated since 4.3 **/
html {
    --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(--mdl-typography-fontSize-md);
    --a11y-min-target-size: var(--a11y-sizing-minTargetSize);
    --a11y-focus-width: var(--a11y-shadow-focus-boxShadowSpread);
    --a11y-focus-color: var(--a11y-shadow-focus-boxShadowColor);
}