Within my variables.scss file I have:
:root {
--ion-color-primary: #00A9E0;
--ion-color-secondary: #5BC500;
--ion-color-danger: #f53d3d;
--ion-color-light: #f4f4f4;
--ion-color-dark: #222222;
--ion-color-gray: #8B8B8B;
--primaryContrast: darken(#00A9E0, 10%);
--lightContrast: darken(#f4f4f4, 10%);
--darkHighlight: lighten(#222, 10%);
--grayHighlight: lighten(#8B8B8B, 10%);
--grayContrast: darken(#8B8B8B, 10%);
--secondaryContrast: darken(#5BC500, 10%);
--card-ios-border-radius: 8px;
--card-ios-box-shadow: $box-shadow;
--card-ios-header-color: var(--ion-color-light);
--card-ios-header-font-weight: bold;
--background-color: var(--ion-color-light);
--toolbar-background: var(--ion-color-primary);
--button-round-border-radius: 10px !important;
--loading-ios-spinner-color: var(--primaryContrast);
--loading-ios-text-color: var(--primaryContrast);
--border-radius: 10px;
--box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
--padding: 16px;
}
And within my global.scss file I have:
h1, h2, h3, h4, h5, h6 {
color: var(--primaryContrast);
font-weight: bold;
}
However, this does not work, it does not load the value, nor the sources that I have configured
@font-face {
font-family: 'Test';
src: url('assets/fonts/test/Regular/test-Regular.eot') format('embedded-opentype'),
url('assets/fonts/test/Regular/test-Regular.svg') format('svg'),
url('assets/fonts/test/Regular/test-Regular.ttf') format('truetype'),
url('assets/fonts/test/Regular/test-Regular.woff') format('woff');
font-style: normal;
font-weight: normal;
}