SvenBudak

$prefix: 'fs';

button, a {
    &[#{$prefix}-size="normal"] {
        padding: 0 32px;

        font-size: 18px;
        font-weight: 500;
        line-height: 48px;
    }

SvenBudak

h1, .h1-style {
    @include h1-style();
}

h2, .h2-style {
    @include h2-style();
}

h3, .h3-style {
    @include h3-style();

SvenBudak

@import "rfs";
@import "functions/px-to-em";

// Typography
@mixin h1-style() {
    @include rfs(48);
    font-weight: 700;
    line-height: em(56, 48);
}

SvenBudak

import {Injectable, Renderer2, RendererFactory2} from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class ColorSchemeService {

    private renderer: Renderer2;
    private colorScheme: string;
    // Define prefix for clearer and more readable class names in scss files

SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default;        // Smartphone
$res-sm: 600px !default;    // Tablet
$res-md: 960px !default;    // Large Tablet
$res-lg: 1280px !default;   // Large Tablet and Notebooks
$res-xl: 1920px !default;   // Desktop +


@function em($pixels, $context: 16px) {
  @return ($pixels / $context);

SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default;        // Smartphone
$res-sm: 600px !default;    // Tablet
$res-md: 960px !default;    // Large Tablet
$res-lg: 1280px !default;   // Large Tablet and Notebooks
$res-xl: 1920px !default;   // Desktop +


@function em($pixels, $context: 16px) {
  @return ($pixels / $context);

SvenBudak

// https://material.angular.io/cdk/layout/overview#predefined-breakpoints
$res-xs: 0 !default; // Smartphone
$res-sm: 600px !default; // Tablet
$res-md: 960px !default; // Large Tablet
$res-lg: 1280px !default; // Large Tablet and Notebooks
$res-xl: 1920px !default; // Desktop +

@function em($pixels, $context: 16px) {
  @return ($pixels / $context);
}

SvenBudak

$headline-variants: (
  'h1': (
    'font-size': 64px,
    'font-weight': 700,
    'line-height': 70px,
  ),
  'h2': (
    'font-size': 44px,
    'font-weight': 700,
    'line-height': 52px,

SvenBudak

@use 'sass:map';
@use 'variables';
@use 'functions';
@use 'mixins';

// RFS Config (Defines from which resolution the fonts should not scale further)
$rfs-breakpoint: 1200px !default;
@import 'vendor/rfs'; // https://github.com/twbs/rfs/blob/main/scss.scss

// Defines which breakpoints should be created for typographies

SvenBudak

$_browser-context: 16px; // Default
@function em($pixels, $context: $_browser-context) {
  @return ($pixels / $context);
}
@function rem($pixels, $context: $_browser-context) {
  @return ($pixels / $context) * 1rem;
}