nurseitaly-components 0.0.1

package/dist/styles/base/_tokens.scss

@@ -0,0 +1,330 @@
+:root {
+  --background-accent: var(--accent-30);
+  --background-default: var(--neutral-light-100);
+  --background-inverse: var(--neutral-dark-99);
+  --border-accent-1: var(--neutral-light-50);
+  --border-accent-2: var(--neutral-light-40);
+  --border-accent-3: var(--accent-20);
+  --border-button: var(--accent-30);
+  --border-button-white: var(--accent-100);
+  --border-error: var(--semantic-danger-50);
+  --border-error-hover: var(--semantic-danger-30);
+  --border-hover: var(--accent-50);
+  --border-light: var(--accent-100);
+  --border-only-high-contrast: #ffffff00;
+  --border-subtle-1: var(--neutral-light-90);
+  --border-subtle-2: var(--neutral-light-80);
+  --border-subtle-3: var(--neutral-light-80);
+  --border-subtle-4: var(--neutral-light-100);
+  --button-contrast: #00000000;
+  --button-danger-active: var(--semantic-danger-70);
+  --button-danger-default: var(--semantic-danger-50);
+  --button-danger-hover: var(--semantic-danger-60);
+  --button-primary-active: var(--accent-50);
+  --button-primary-default: var(--accent-30);
+  --button-primary-hover: var(--accent-40);
+  --button-secondary-active: var(--neutral-dark-40);
+  --button-secondary-default: var(--neutral-dark-20);
+  --button-secondary-hover: var(--neutral-dark-30);
+  --button-tertiary-active: var(--accent-90);
+  --button-tertiary-default: var(--accent-100);
+  --button-tertiary-hover: var(--accent-95);
+  --icon-accent: var(--accent-30);
+  --icon-accent-hover: var(--accent-50);
+  --icon-dark-fixed: var(--neutral-light-0);
+  --icon-disabled: var(--neutral-light-70);
+  --icon-error: var(--semantic-danger-40);
+  --icon-error-hover: var(--semantic-danger-30);
+  --icon-error-on-hover: var(--semantic-danger-30);
+  --icon-info: var(--semantic-info-50);
+  --icon-light-fixed: var(--neutral-light-100);
+  --icon-on-color-accent: var(--accent-30);
+  --icon-on-color-dark: var(--neutral-light-0);
+  --icon-on-color-light: var(--neutral-light-100);
+  --icon-on-disabled: var(--neutral-light-60);
+  --icon-placeholder: var(--neutral-light-50);
+  --icon-primary: var(--neutral-light-0);
+  --icon-secondary: var(--neutral-light-30);
+  --icon-success: var(--semantic-success-60);
+  --icon-tertiary: var(--neutral-light-40);
+  --icon-warning: var(--semantic-warning-50);
+  --layer-disabled: var(--neutral-dark-10);
+  --layer-field: var(--neutral-dark-20);
+  --layer-field-active: var(--accent-99);
+  --layer-field-hover: var(--accent-95);
+  --layer-hover-1: var(--neutral-light-95);
+  --layer-hover-2: var(--neutral-light-90);
+  --layer-hover-3: var(--neutral-light-80);
+  --layer-layer-1: var(--neutral-light-99);
+  --layer-layer-2: var(--neutral-light-95);
+  --layer-layer-3: var(--neutral-light-90);
+  --layer-semantic-danger: var(--semantic-danger-95);
+  --layer-semantic-info: var(--semantic-info-95);
+  --layer-semantic-success: var(--semantic-success-95);
+  --layer-semantic-warning: var(--semantic-warning-95);
+  --layer-tooltip: var(--neutral-dark-99);
+  --link-default: var(--semantic-info-40);
+  --link-hover: var(--semantic-info-60);
+  --link-visited: var(--neutral-dark-60);
+  --miscellaneous-brand-gradient-1: #0a5dff00;
+  --miscellaneous-brand-gradient-2: #0a5dff14;
+  --miscellaneous-scrim: #00000080;
+  --miscellaneous-scroll: #00000040;
+  --miscellaneous-scroll-hover: var(--neutral-dark-40);
+  --miscellaneous-shadow-1: #18274b1f;
+  --miscellaneous-shadow-2: #18274b14;
+  --miscellaneous-skeleton: var(--neutral-dark-10);
+  --miscellaneous-skeleton-light: var(--neutral-dark-30);
+  --tag-blue-accent: var(--accent-60);
+  --tag-blue-low: var(--accent-90);
+  --tag-gray-accent: var(--neutral-light-20);
+  --tag-gray-low: var(--neutral-light-90);
+  --tag-green-accent: var(--semantic-success-70);
+  --tag-green-low: var(--semantic-success-90);
+  --tag-red-accent: var(--semantic-danger-50);
+  --tag-red-low: var(--semantic-danger-90);
+  --tag-violet-accent: var(--semantic-info-50);
+  --tag-violet-low: var(--semantic-info-90);
+  --tag-yellow-accent: var(--semantic-warning-80);
+  --tag-yellow-low: var(--semantic-warning-95);
+  --text-accent: var(--accent-30);
+  --text-accent-hover: var(--accent-50);
+  --text-dark-fixed: var(--neutral-light-0);
+  --text-disabled: var(--neutral-light-70);
+  --text-error: var(--semantic-danger-40);
+  --text-error-hover: var(--semantic-danger-30);
+  --text-error-on-hover: var(--semantic-danger-30);
+  --text-info: var(--semantic-info-50);
+  --text-light-fixed: var(--neutral-light-100);
+  --text-on-color-accent: var(--accent-30);
+  --text-on-color-dark: var(--neutral-light-0);
+  --text-on-color-light: var(--neutral-light-100);
+  --text-on-disabled: var(--neutral-light-60);
+  --text-placeholder: var(--neutral-light-50);
+  --text-placeholder-hover: var(--neutral-light-40);
+  --text-primary: var(--neutral-light-0);
+  --text-secondary: var(--neutral-light-30);
+  --text-success: var(--semantic-success-60);
+  --text-tertiary: var(--neutral-light-40);
+  --text-warning: var(--semantic-warning-50);
+}
+
+body.dark-mode {
+  --background-accent: var(--accent-10);
+  --background-default: var(--neutral-dark-99);
+  --background-inverse: var(--neutral-light-100);
+  --border-accent-1: var(--neutral-dark-40);
+  --border-accent-2: var(--neutral-dark-30);
+  --border-accent-3: var(--accent-95);
+  --border-button: var(--accent-60);
+  --border-button-white: var(--accent-100);
+  --border-error: var(--semantic-danger-70);
+  --border-error-hover: var(--semantic-danger-80);
+  --border-hover: var(--accent-80);
+  --border-only-high-contrast: #ffffff00;
+  --border-subtle-1: var(--neutral-dark-80);
+  --border-subtle-2: var(--neutral-dark-70);
+  --border-subtle-3: var(--neutral-dark-70);
+  --border-subtle-4: var(--neutral-dark-100);
+  --button-contrast: #00000000;
+  --button-danger-active: var(--semantic-danger-80);
+  --button-danger-default: var(--semantic-danger-60);
+  --button-danger-hover: var(--semantic-danger-70);
+  --button-primary-active: var(--accent-80);
+  --button-primary-default: var(--accent-60);
+  --button-primary-hover: var(--accent-70);
+  --button-secondary-active: var(--neutral-light-20);
+  --button-secondary-default: var(--neutral-light-0);
+  --button-secondary-hover: var(--neutral-light-10);
+  --button-tertiary-active: var(--accent-40);
+  --button-tertiary-default: var(--accent-10);
+  --button-tertiary-hover: var(--accent-20);
+  --icon-accent: var(--accent-80);
+  --icon-accent-hover: var(--accent-60);
+  --icon-dark-fixed: var(--neutral-dark-100);
+  --icon-disabled: var(--neutral-dark-70);
+  --icon-error: var(--semantic-danger-70);
+  --icon-error-hover: var(--semantic-danger-80);
+  --icon-error-on-hover: var(--semantic-danger-80);
+  --icon-info: var(--semantic-info-80);
+  --icon-light-fixed: var(--neutral-dark-0);
+  --icon-on-color-accent: var(--accent-95);
+  --icon-on-color-dark: var(--neutral-dark-0);
+  --icon-on-color-light: var(--neutral-dark-100);
+  --icon-on-disabled: var(--neutral-dark-60);
+  --icon-placeholder: var(--neutral-dark-50);
+  --icon-primary: var(--neutral-dark-0);
+  --icon-secondary: var(--neutral-dark-30);
+  --icon-success: var(--semantic-success-80);
+  --icon-tertiary: var(--neutral-dark-40);
+  --icon-warning: var(--semantic-warning-70);
+  --layer-disabled: var(--neutral-dark-95);
+  --layer-field: var(--neutral-light-30);
+  --layer-field-active: var(--neutral-dark-100);
+  --layer-field-hover: var(--neutral-dark-80);
+  --layer-hover-1: var(--neutral-dark-90);
+  --layer-hover-2: var(--neutral-dark-80);
+  --layer-hover-3: var(--neutral-dark-70);
+  --layer-layer-1: var(--neutral-dark-95);
+  --layer-layer-2: var(--neutral-dark-90);
+  --layer-layer-3: var(--neutral-light-80);
+  --layer-semantic-danger: var(--semantic-danger-20);
+  --layer-semantic-info: var(--semantic-info-20);
+  --layer-semantic-success: var(--semantic-success-20);
+  --layer-semantic-warning: var(--semantic-warning-40);
+  --layer-tooltip: var(--neutral-dark-0);
+  --link-default: var(--semantic-info-80);
+  --link-hover: var(--semantic-info-50);
+  --link-visited: var(--neutral-dark-40);
+  --miscellaneous-brand-gradient-1: #0a5dff00;
+  --miscellaneous-brand-gradient-2: #0a5dff26;
+  --miscellaneous-scrim: #000000b2;
+  --miscellaneous-scroll: var(--neutral-dark-80);
+  --miscellaneous-scroll-hover: var(--neutral-dark-60);
+  --miscellaneous-shadow-1: #000000e5;
+  --miscellaneous-shadow-2: #000000b2;
+  --miscellaneous-skeleton: var(--neutral-dark-99);
+  --miscellaneous-skeleton-light: var(--neutral-dark-80);
+  --tag-blue-accent: var(--accent-60);
+  --tag-blue-low: var(--accent-40);
+  --tag-gray-accent: var(--neutral-dark-20);
+  --tag-gray-low: var(--neutral-dark-80);
+  --tag-green-accent: var(--semantic-success-80);
+  --tag-green-low: var(--semantic-success-40);
+  --tag-red-accent: var(--semantic-danger-70);
+  --tag-red-low: var(--semantic-danger-20);
+  --tag-violet-accent: var(--semantic-info-80);
+  --tag-violet-low: var(--semantic-info-20);
+  --tag-yellow-accent: var(--semantic-warning-80);
+  --tag-yellow-low: var(--semantic-warning-20);
+  --text-accent: var(--accent-80);
+  --text-accent-hover: var(--accent-60);
+  --text-dark-fixed: var(--neutral-dark-100);
+  --text-disabled: var(--neutral-dark-70);
+  --text-error: var(--semantic-danger-70);
+  --text-error-hover: var(--semantic-danger-80);
+  --text-error-on-hover: var(--semantic-danger-80);
+  --text-info: var(--semantic-info-80);
+  --text-light-fixed: var(--neutral-dark-0);
+  --text-on-color-accent: var(--accent-95);
+  --text-on-color-dark: var(--neutral-dark-0);
+  --text-on-color-light: var(--neutral-dark-100);
+  --text-on-disabled: var(--neutral-dark-60);
+  --text-placeholder: var(--neutral-dark-50);
+  --text-placeholder-hover: var(--neutral-dark-40);
+  --text-primary: var(--neutral-dark-0);
+  --text-secondary: var(--neutral-dark-30);
+  --text-success: var(--semantic-success-80);
+  --text-tertiary: var(--neutral-dark-40);
+  --text-warning: var(--semantic-warning-70);
+}
+
+body.high-contrast {
+  --background-accent: var(--high-contrast-dark);
+  --background-default: var(--high-contrast-dark);
+  --background-inverse: var(--high-contrast-dark);
+  --border-accent-1: var(--high-contrast-light);
+  --border-accent-2: var(--high-contrast-light);
+  --border-accent-3: var(--high-contrast-light);
+  --border-button: var(--high-contrast-light);
+  --border-button-white: var(--high-contrast-light);
+  --border-error: var(--high-contrast-light);
+  --border-error-hover: var(--high-contrast-yellow);
+  --border-hover: var(--high-contrast-yellow);
+  --border-only-high-contrast: var(--high-contrast-light);
+  --border-subtle-1: var(--high-contrast-light);
+  --border-subtle-2: var(--high-contrast-light);
+  --border-subtle-3: var(--high-contrast-light);
+  --border-subtle-4: var(--high-contrast-light);
+  --button-contrast: var(--high-contrast-dark);
+  --button-danger-active: var(--high-contrast-blue);
+  --button-danger-default: var(--high-contrast-light);
+  --button-danger-hover: var(--high-contrast-yellow);
+  --button-primary-active: var(--high-contrast-blue);
+  --button-primary-default: var(--high-contrast-light);
+  --button-primary-hover: var(--high-contrast-yellow);
+  --button-secondary-active: var(--high-contrast-light);
+  --button-secondary-default: var(--high-contrast-light);
+  --button-secondary-hover: var(--high-contrast-green);
+  --button-tertiary-active: var(--high-contrast-blue);
+  --button-tertiary-default: var(--high-contrast-light);
+  --button-tertiary-hover: var(--high-contrast-yellow);
+  --icon-accent: var(--high-contrast-light);
+  --icon-accent-hover: var(--high-contrast-yellow);
+  --icon-dark-fixed: var(--high-contrast-dark);
+  --icon-disabled: var(--high-contrast-light);
+  --icon-error: var(--high-contrast-light);
+  --icon-error-hover: var(--high-contrast-yellow);
+  --icon-error-on-hover: var(--high-contrast-dark);
+  --icon-info: var(--high-contrast-light);
+  --icon-light-fixed: var(--high-contrast-light);
+  --icon-on-color-accent: var(--high-contrast-dark);
+  --icon-on-color-dark: var(--high-contrast-dark);
+  --icon-on-color-light: var(--high-contrast-dark);
+  --icon-on-disabled: var(--high-contrast-dark);
+  --icon-placeholder: var(--high-contrast-dark);
+  --icon-primary: var(--high-contrast-light);
+  --icon-secondary: var(--high-contrast-yellow);
+  --icon-success: var(--high-contrast-light);
+  --icon-tertiary: var(--high-contrast-green);
+  --icon-warning: var(--high-contrast-light);
+  --layer-disabled: var(--high-contrast-light);
+  --layer-field: var(--high-contrast-light);
+  --layer-field-active: var(--high-contrast-blue);
+  --layer-field-hover: var(--high-contrast-yellow);
+  --layer-hover-1: var(--high-contrast-yellow);
+  --layer-hover-2: var(--high-contrast-yellow);
+  --layer-hover-3: var(--high-contrast-yellow);
+  --layer-layer-1: var(--high-contrast-dark);
+  --layer-layer-2: var(--high-contrast-dark);
+  --layer-layer-3: var(--high-contrast-dark);
+  --layer-semantic-danger: var(--high-contrast-dark);
+  --layer-semantic-info: var(--high-contrast-dark);
+  --layer-semantic-success: var(--high-contrast-dark);
+  --layer-semantic-warning: var(--high-contrast-dark);
+  --layer-tooltip: var(--high-contrast-light);
+  --link-default: var(--high-contrast-light);
+  --link-hover: var(--high-contrast-yellow);
+  --link-visited: var(--high-contrast-blue);
+  --miscellaneous-brand-gradient-1: var(--high-contrast-dark);
+  --miscellaneous-brand-gradient-2: var(--high-contrast-dark);
+  --miscellaneous-scrim: #000000e5;
+  --miscellaneous-scroll: var(--high-contrast-light);
+  --miscellaneous-scroll-hover: var(--high-contrast-yellow);
+  --miscellaneous-shadow-1: #00000000;
+  --miscellaneous-shadow-2: #00000000;
+  --miscellaneous-skeleton: var(--high-contrast-dark);
+  --miscellaneous-skeleton-light: var(--high-contrast-light);
+  --tag-blue-accent: var(--high-contrast-green);
+  --tag-blue-low: var(--high-contrast-light);
+  --tag-gray-accent: var(--high-contrast-green);
+  --tag-gray-low: var(--high-contrast-light);
+  --tag-green-accent: var(--high-contrast-green);
+  --tag-green-low: var(--high-contrast-light);
+  --tag-red-accent: var(--high-contrast-green);
+  --tag-red-low: var(--high-contrast-light);
+  --tag-violet-accent: var(--high-contrast-green);
+  --tag-violet-low: var(--high-contrast-light);
+  --tag-yellow-accent: var(--high-contrast-green);
+  --tag-yellow-low: var(--high-contrast-light);
+  --text-accent: var(--high-contrast-light);
+  --text-accent-hover: var(--high-contrast-yellow);
+  --text-dark-fixed: var(--high-contrast-dark);
+  --text-disabled: var(--high-contrast-light);
+  --text-error: var(--high-contrast-light);
+  --text-error-hover: var(--high-contrast-yellow);
+  --text-error-on-hover: var(--high-contrast-dark);
+  --text-info: var(--high-contrast-light);
+  --text-light-fixed: var(--high-contrast-light);
+  --text-on-color-accent: var(--high-contrast-dark);
+  --text-on-color-dark: var(--high-contrast-dark);
+  --text-on-color-light: var(--high-contrast-dark);
+  --text-on-disabled: var(--high-contrast-dark);
+  --text-placeholder: var(--high-contrast-yellow);
+  --text-placeholder-hover: var(--high-contrast-dark);
+  --text-primary: var(--high-contrast-light);
+  --text-secondary: var(--high-contrast-yellow);
+  --text-success: var(--high-contrast-light);
+  --text-tertiary: var(--high-contrast-green);
+  --text-warning: var(--high-contrast-light);
+}

package/dist/styles/base/_typographs.scss

@@ -0,0 +1,376 @@
+// typographs styles
+
+@mixin button-large {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 100%;
+  letter-spacing: 0.32px;
+}
+
+@mixin button-medium {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 100%;
+  letter-spacing: 0.32px;
+  text-transform: uppercase;
+}
+
+@mixin button-small {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 100%;
+  letter-spacing: 0.32px;
+  text-transform: uppercase;
+}
+
+@mixin label-large-1 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin label-large-2 {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin label-medium-1 {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin label-medium-2 {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin label-small-1 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+@mixin label-small-2 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+@mixin tag-large-1 {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 100%;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@mixin tag-large-2 {
+  font-family: "Lora";
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 100%;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@mixin tag-medium-1 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 100%;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@mixin tag-medium-2 {
+  font-family: "Lora";
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 100%;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@mixin tag-small-1 {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 100%;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@mixin tag-small-2 {
+  font-family: "Lora";
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 100%;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+@mixin helper-large-1 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 100%;
+  letter-spacing: 0.16px;
+}
+
+@mixin helper-large-2 {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 120%;
+  letter-spacing: 0.16px;
+}
+
+@mixin helper-medium-1 {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 100%;
+  letter-spacing: 0.16px;
+}
+
+@mixin helper-medium-2 {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 120%;
+  letter-spacing: 0.16px;
+}
+
+@mixin helper-small-1 {
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 100%;
+  letter-spacing: 0.16px;
+}
+
+@mixin helper-small-2 {
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 120%;
+  letter-spacing: 0.16px;
+}
+
+@mixin body-large-1 {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+@mixin body-large-2 {
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+@mixin body-xmedium-1 {
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+@mixin body-xmedium-2 {
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+// sets as important to override MuiTooltip-tooltip
+@mixin body-medium-1 {
+  font-size: 16px !important;
+  font-weight: 400 !important;
+  line-height: 150% !important;
+  letter-spacing: 0px !important;
+}
+
+@mixin body-medium-2 {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+@mixin body-small-1 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+@mixin body-small-2 {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: 0px;
+}
+
+@mixin link-large {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: 0px;
+  decoration: underline;
+}
+
+@mixin link-medium {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: 0px;
+  decoration: underline;
+}
+
+@mixin link-small {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 120%;
+  letter-spacing: 0px;
+  decoration: underline;
+}
+
+@mixin heading-x-large {
+  font-family: "Lora";
+  font-size: 64px;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin heading-large {
+  font-family: "Lora";
+  font-size: 56px;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin heading-medium {
+  font-family: "Lora";
+  font-size: 48px;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin heading-small {
+  font-family: "Lora";
+  font-size: 40px;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin heading-x-small {
+  font-family: "Lora";
+  font-size: 32px;
+  font-weight: 500;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-large-1 {
+  font-size: 32px;
+  font-weight: 300;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-large-2 {
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-medium-1 {
+  font-size: 28px;
+  font-weight: 300;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-medium-2 {
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-smedium-1 {
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-smedium-2 {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 120%;
+  letter-spacing: 0px;
+}
+
+@mixin subtitle-small-1 {
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 120%;
+  letter-spacing: 1px;
+}
+
+@mixin subtitle-small-2 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 120%;
+  letter-spacing: 1px;
+}
+
+@mixin display-x-large {
+  font-family: "Lora";
+  font-size: 144px;
+  font-weight: 300;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+@mixin display-large {
+  font-family: "Lora";
+  font-size: 120px;
+  font-weight: 300;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+@mixin display-medium {
+  font-family: "Lora";
+  font-size: 112px;
+  font-weight: 300;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+@mixin display-small {
+  font-family: "Lora";
+  font-size: 96px;
+  font-weight: 300;
+  line-height: 100%;
+  letter-spacing: 0px;
+}
+
+@mixin display-x-small {
+  font-family: "Lora";
+  font-size: 80px;
+  font-weight: 300;
+  line-height: 100%;
+  letter-spacing: 0px;
+}