Generated by SassMeister.com.

input.scss

$theme1: (
  color: (
    primary: (
      50: #eef1f5,
      100: #e3f2fc,
      200: #c0e1f3,
      300: #81c3e8,
      400: #41a6dc,
      500: #027abb,
      600: #0481c3,
      700: #0673a9,
      800: #0369a4,
      900: #035c89,
      a100: #c3e6fd,
      a200: #84cde4,
      a400: #44b5cc,
      a700: #059cb2,
      contrast: (
        50: rgba(0, 0, 0, 0.87),
        100: rgba(0, 0, 0, 0.87),
        200: rgba(0, 0, 0, 0.87),
        300: rgba(0, 0, 0, 0.87),
        400: rgba(0, 0, 0, 0.87),
        500: #fff,
        600: #fff,
        700: #fff,
        800: #fff,
        900: #fff,
        a100: rgba(0, 0, 0, 0.87),
        a200: rgba(0, 0, 0, 0.87),
        a400: rgba(0, 0, 0, 0.87),
        a700: #fff,
      ),
      default: #027abb,
      lighter: #e3f2fc,
      darker: #0673a9,
      text: #027abb,
      default-contrast: #fff,
      lighter-contrast: rgba(0, 0, 0, 0.87),
      darker-contrast: #fff,
      '50-contrast': rgba(0, 0, 0, 0.87),
      '100-contrast': rgba(0, 0, 0, 0.87),
      '200-contrast': rgba(0, 0, 0, 0.87),
      '300-contrast': rgba(0, 0, 0, 0.87),
      '400-contrast': rgba(0, 0, 0, 0.87),
      '500-contrast': #fff,
      '600-contrast': #fff,
      '700-contrast': #fff,
      '800-contrast': #fff,
      '900-contrast': #fff,
      'a100-contrast': rgba(0, 0, 0, 0.87),
      'a200-contrast': rgba(0, 0, 0, 0.87),
      'a400-contrast': rgba(0, 0, 0, 0.87),
      'a700-contrast': #fff,
      'contrast-contrast': null,
    ),
    accent: (
      50: #fff8f4,
      100: #ffeadb,
      200: #ffcea9,
      300: #ffb276,
      400: #ff9644,
      500: #ff6f00,
      600: #f26900,
      700: #e46300,
      800: #d75600,
      900: #cb4a00,
      a100: #ffe8db,
      a200: #f8d0b7,
      a400: #eba16e,
      a700: #d65900,
      contrast: (
        50: rgba(0, 0, 0, 0.87),
        100: rgba(0, 0, 0, 0.87),
        200: rgba(0, 0, 0, 0.87),
        300: rgba(0, 0, 0, 0.87),
        400: rgba(0, 0, 0, 0.87),
        500: #fff,
        600: #fff,
        700: #fff,
        800: #fff,
        900: #fff,
        a100: rgba(0, 0, 0, 0.87),
        a200: rgba(0, 0, 0, 0.87),
        a400: rgba(0, 0, 0, 0.87),
        a700: #fff,
      ),
      default: #ff6f00,
      lighter: #ffeadb,
      darker: #e46300,
      text: #ff6f00,
      default-contrast: #fff,
      lighter-contrast: rgba(0, 0, 0, 0.87),
      darker-contrast: #fff,
      '50-contrast': rgba(0, 0, 0, 0.87),
      '100-contrast': rgba(0, 0, 0, 0.87),
      '200-contrast': rgba(0, 0, 0, 0.87),
      '300-contrast': rgba(0, 0, 0, 0.87),
      '400-contrast': rgba(0, 0, 0, 0.87),
      '500-contrast': #fff,
      '600-contrast': #fff,
      '700-contrast': #fff,
      '800-contrast': #fff,
      '900-contrast': #fff,
      'a100-contrast': rgba(0, 0, 0, 0.87),
      'a200-contrast': rgba(0, 0, 0, 0.87),
      'a400-contrast': rgba(0, 0, 0, 0.87),
      'a700-contrast': #fff,
      'contrast-contrast': null,
    ),
    warn: (
      50: #fae4e5,
      100: #f4c8ca,
      200: #f49b99,
      300: #f46f67,
      400: #f44236,
      500: #d2232a,
      600: #c52024,
      700: #b71d1d,
      800: #aa1010,
      900: #9e0404,
      a100: #fac2c4,
      a200: #f1a4a6,
      a400: #e0696a,
      a700: #c61010,
      contrast: (
        50: rgba(0, 0, 0, 0.87),
        100: rgba(0, 0, 0, 0.87),
        200: rgba(0, 0, 0, 0.87),
        300: rgba(0, 0, 0, 0.87),
        400: rgba(0, 0, 0, 0.87),
        500: #fff,
        600: #fff,
        700: #fff,
        800: #fff,
        900: #fff,
        a100: rgba(0, 0, 0, 0.87),
        a200: rgba(0, 0, 0, 0.87),
        a400: rgba(0, 0, 0, 0.87),
        a700: #fff,
      ),
      default: #d2232a,
      lighter: #f4c8ca,
      darker: #b71d1d,
      text: #d2232a,
      default-contrast: #fff,
      lighter-contrast: rgba(0, 0, 0, 0.87),
      darker-contrast: #fff,
      '50-contrast': rgba(0, 0, 0, 0.87),
      '100-contrast': rgba(0, 0, 0, 0.87),
      '200-contrast': rgba(0, 0, 0, 0.87),
      '300-contrast': rgba(0, 0, 0, 0.87),
      '400-contrast': rgba(0, 0, 0, 0.87),
      '500-contrast': #fff,
      '600-contrast': #fff,
      '700-contrast': #fff,
      '800-contrast': #fff,
      '900-contrast': #fff,
      'a100-contrast': rgba(0, 0, 0, 0.87),
      'a200-contrast': rgba(0, 0, 0, 0.87),
      'a400-contrast': rgba(0, 0, 0, 0.87),
      'a700-contrast': #fff,
      'contrast-contrast': null,
    ),
    is-dark: false,
    foreground: (
      base: black,
      divider: rgba(0, 0, 0, 0.12),
      dividers: rgba(0, 0, 0, 0.12),
      disabled: rgba(0, 0, 0, 0.38),
      disabled-button: rgba(0, 0, 0, 0.26),
      disabled-text: rgba(0, 0, 0, 0.38),
      elevation: black,
      hint-text: rgba(0, 0, 0, 0.38),
      secondary-text: rgba(0, 0, 0, 0.54),
      icon: rgba(0, 0, 0, 0.54),
      icons: rgba(0, 0, 0, 0.54),
      text: rgba(0, 0, 0, 0.87),
      slider-min: rgba(0, 0, 0, 0.87),
      slider-off: rgba(0, 0, 0, 0.26),
      slider-off-active: rgba(0, 0, 0, 0.38),
    ),
    background: (
      status-bar: #e0e0e0,
      app-bar: #f5f5f5,
      background: #fafafa,
      hover: rgba(0, 0, 0, 0.04),
      card: white,
      dialog: white,
      disabled-button: rgba(0, 0, 0, 0.12),
      raised-button: white,
      focused-button: rgba(0, 0, 0, 0.12),
      selected-button: #e0e0e0,
      selected-disabled-button: #bdbdbd,
      disabled-button-toggle: #eeeeee,
      unselected-chip: #e0e0e0,
      disabled-list-option: #eeeeee,
      tooltip: #616161,
    ),
  ),
  typography: (
    display-4: (
      font-size: 112px,
      line-height: 112px,
      font-weight: 300,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: -0.05em,
    ),
    display-3: (
      font-size: 56px,
      line-height: 56px,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: -0.02em,
    ),
    display-2: (
      font-size: 45px,
      line-height: 48px,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: -0.005em,
    ),
    display-1: (
      font-size: 36px,
      line-height: 1,
      font-weight: 300,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    headline: (
      font-size: 24px,
      line-height: 1,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    title: (
      font-size: 20px,
      line-height: 1,
      font-weight: 500,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    subheading-2: (
      font-size: 18px,
      line-height: 1,
      font-weight: 700,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    subheading-1: (
      font-size: 16px,
      line-height: 1,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    body-2: (
      font-size: 14px,
      line-height: 1,
      font-weight: 500,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    body-1: (
      font-size: 14px,
      line-height: 1,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    caption: (
      font-size: 12px,
      line-height: 1,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    button: (
      font-size: 14px,
      line-height: 1,
      font-weight: 500,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    input: (
      font-size: 16px,
      line-height: 1.125,
      font-weight: 400,
      font-family: 'Roboto, "Helvetica Neue", sans-serif',
      letter-spacing: normal,
    ),
    font-family: 'Roboto, "Helvetica Neue", sans-serif',
  ),
  primary: (
    50: #eef1f5,
    100: #e3f2fc,
    200: #c0e1f3,
    300: #81c3e8,
    400: #41a6dc,
    500: #027abb,
    600: #0481c3,
    700: #0673a9,
    800: #0369a4,
    900: #035c89,
    a100: #c3e6fd,
    a200: #84cde4,
    a400: #44b5cc,
    a700: #059cb2,
    contrast: (
      50: rgba(0, 0, 0, 0.87),
      100: rgba(0, 0, 0, 0.87),
      200: rgba(0, 0, 0, 0.87),
      300: rgba(0, 0, 0, 0.87),
      400: rgba(0, 0, 0, 0.87),
      500: #fff,
      600: #fff,
      700: #fff,
      800: #fff,
      900: #fff,
      a100: rgba(0, 0, 0, 0.87),
      a200: rgba(0, 0, 0, 0.87),
      a400: rgba(0, 0, 0, 0.87),
      a700: #fff,
    ),
    default: #027abb,
    lighter: #e3f2fc,
    darker: #0673a9,
    text: #027abb,
    default-contrast: #fff,
    lighter-contrast: rgba(0, 0, 0, 0.87),
    darker-contrast: #fff,
    '50-contrast': rgba(0, 0, 0, 0.87),
    '100-contrast': rgba(0, 0, 0, 0.87),
    '200-contrast': rgba(0, 0, 0, 0.87),
    '300-contrast': rgba(0, 0, 0, 0.87),
    '400-contrast': rgba(0, 0, 0, 0.87),
    '500-contrast': #fff,
    '600-contrast': #fff,
    '700-contrast': #fff,
    '800-contrast': #fff,
    '900-contrast': #fff,
    'a100-contrast': rgba(0, 0, 0, 0.87),
    'a200-contrast': rgba(0, 0, 0, 0.87),
    'a400-contrast': rgba(0, 0, 0, 0.87),
    'a700-contrast': #fff,
    'contrast-contrast': null,
  ),
  accent: (
    50: #fff8f4,
    100: #ffeadb,
    200: #ffcea9,
    300: #ffb276,
    400: #ff9644,
    500: #ff6f00,
    600: #f26900,
    700: #e46300,
    800: #d75600,
    900: #cb4a00,
    a100: #ffe8db,
    a200: #f8d0b7,
    a400: #eba16e,
    a700: #d65900,
    contrast: (
      50: rgba(0, 0, 0, 0.87),
      100: rgba(0, 0, 0, 0.87),
      200: rgba(0, 0, 0, 0.87),
      300: rgba(0, 0, 0, 0.87),
      400: rgba(0, 0, 0, 0.87),
      500: #fff,
      600: #fff,
      700: #fff,
      800: #fff,
      900: #fff,
      a100: rgba(0, 0, 0, 0.87),
      a200: rgba(0, 0, 0, 0.87),
      a400: rgba(0, 0, 0, 0.87),
      a700: #fff,
    ),
    default: #ff6f00,
    lighter: #ffeadb,
    darker: #e46300,
    text: #ff6f00,
    default-contrast: #fff,
    lighter-contrast: rgba(0, 0, 0, 0.87),
    darker-contrast: #fff,
    '50-contrast': rgba(0, 0, 0, 0.87),
    '100-contrast': rgba(0, 0, 0, 0.87),
    '200-contrast': rgba(0, 0, 0, 0.87),
    '300-contrast': rgba(0, 0, 0, 0.87),
    '400-contrast': rgba(0, 0, 0, 0.87),
    '500-contrast': #fff,
    '600-contrast': #fff,
    '700-contrast': #fff,
    '800-contrast': #fff,
    '900-contrast': #fff,
    'a100-contrast': rgba(0, 0, 0, 0.87),
    'a200-contrast': rgba(0, 0, 0, 0.87),
    'a400-contrast': rgba(0, 0, 0, 0.87),
    'a700-contrast': #fff,
    'contrast-contrast': null,
  ),
  warn: (
    50: #fae4e5,
    100: #f4c8ca,
    200: #f49b99,
    300: #f46f67,
    400: #f44236,
    500: #d2232a,
    600: #c52024,
    700: #b71d1d,
    800: #aa1010,
    900: #9e0404,
    a100: #fac2c4,
    a200: #f1a4a6,
    a400: #e0696a,
    a700: #c61010,
    contrast: (
      50: rgba(0, 0, 0, 0.87),
      100: rgba(0, 0, 0, 0.87),
      200: rgba(0, 0, 0, 0.87),
      300: rgba(0, 0, 0, 0.87),
      400: rgba(0, 0, 0, 0.87),
      500: #fff,
      600: #fff,
      700: #fff,
      800: #fff,
      900: #fff,
      a100: rgba(0, 0, 0, 0.87),
      a200: rgba(0, 0, 0, 0.87),
      a400: rgba(0, 0, 0, 0.87),
      a700: #fff,
    ),
    default: #d2232a,
    lighter: #f4c8ca,
    darker: #b71d1d,
    text: #d2232a,
    default-contrast: #fff,
    lighter-contrast: rgba(0, 0, 0, 0.87),
    darker-contrast: #fff,
    '50-contrast': rgba(0, 0, 0, 0.87),
    '100-contrast': rgba(0, 0, 0, 0.87),
    '200-contrast': rgba(0, 0, 0, 0.87),
    '300-contrast': rgba(0, 0, 0, 0.87),
    '400-contrast': rgba(0, 0, 0, 0.87),
    '500-contrast': #fff,
    '600-contrast': #fff,
    '700-contrast': #fff,
    '800-contrast': #fff,
    '900-contrast': #fff,
    'a100-contrast': rgba(0, 0, 0, 0.87),
    'a200-contrast': rgba(0, 0, 0, 0.87),
    'a400-contrast': rgba(0, 0, 0, 0.87),
    'a700-contrast': #fff,
    'contrast-contrast': null,
  ),
  is-dark: false,
  foreground: (
    base: black,
    divider: rgba(0, 0, 0, 0.12),
    dividers: rgba(0, 0, 0, 0.12),
    disabled: rgba(0, 0, 0, 0.38),
    disabled-button: rgba(0, 0, 0, 0.26),
    disabled-text: rgba(0, 0, 0, 0.38),
    elevation: black,
    hint-text: rgba(0, 0, 0, 0.38),
    secondary-text: rgba(0, 0, 0, 0.54),
    icon: rgba(0, 0, 0, 0.54),
    icons: rgba(0, 0, 0, 0.54),
    text: rgba(0, 0, 0, 0.87),
    slider-min: rgba(0, 0, 0, 0.87),
    slider-off: rgba(0, 0, 0, 0.26),
    slider-off-active: rgba(0, 0, 0, 0.38),
  ),
  background: (
    status-bar: #e0e0e0,
    app-bar: #f5f5f5,
    background: #fafafa,
    hover: rgba(0, 0, 0, 0.04),
    card: white,
    dialog: white,
    disabled-button: rgba(0, 0, 0, 0.12),
    raised-button: white,
    focused-button: rgba(0, 0, 0, 0.12),
    selected-button: #e0e0e0,
    selected-disabled-button: #bdbdbd,
    disabled-button-toggle: #eeeeee,
    unselected-chip: #e0e0e0,
    disabled-list-option: #eeeeee,
    tooltip: #616161,
  ),
);

@function flatten-map($map, $name: '') {
    $result: ();
    @if type-of($map) != 'map' and type-of($map) != 'list' {
        $value: $map;
        $result: ($name: $value);
    } @else {
        @if $name != '' {
            $name: #{$name}-;
        }
        @each $key, $value in $map {
            $new-name: #{$name}#{$key};
            $result: map-merge($result, flatten-map($value, $new-name));
        }
    }
    
    @return $result;
}

@function define-theme($mat-theme, $custom-config: (), $prefix: '') {
    $mat-typography-config: flatten-map($map: map-get($mat-theme, typography), $name: $prefix);
    $custom-typography-config: flatten-map($map: map-get($custom-config, typography), $name: $prefix);
    $typography-config: map-merge($mat-typography-config, $custom-typography-config);
    $mat-color-config: flatten-map($map: map-get($mat-theme, color), $name: $prefix);
    $custom-color-config: flatten-map($map: map-get($custom-config, color), $name: $prefix);
    $color-config: map-merge($mat-color-config, $custom-color-config);
    @return (
        typography: $typography-config,
        color: $color-config
    );
}

@function get-var($name, $map: ()) {
    @if not map-has-key($map, $name){
        @error "CSS variable '#{$name}' not found in map";
    }
    @return var(--#{unquote($name)});
}

@mixin theme-css-vars($theme) {
    $typography-map: map-get($theme, typography);
    @each $key, $value in $typography-map {
        --#{$key}: #{$value};
    }
    
    $color-map: map-get($theme, color);
    @each $key, $value in $color-map {
        --#{$key}: #{$value};
    }
}

$custom-theme: (
    typography: (
        paragraph: (
            font-size: 10px
        )
    ),
    color: (
        'success-color': green, 
        'warning-color': yellow, 
    )
);

$theme: define-theme($theme1, $custom-theme, 'theme');
$theme-typography: map-get($theme, typography);
$theme-colors: map-get($theme, color);


@function get-typography($name, $theme-typography: $theme-typography) {
    @return get-var($name, $theme-typography);
}

@function get-color($name, $theme-colors: $theme-colors) {
    @return get-var($name, $theme-colors);
}
    
:root {
    @include theme-css-vars($theme);
}

.test {
    font-size: get-typography(theme-body-1-font-size);
    color: get-color(theme-success-color);
    background-color: get-color(theme-background-background);
}

output.css

:root {
  --theme-display-4-font-size: 112px;
  --theme-display-4-line-height: 112px;
  --theme-display-4-font-weight: 300;
  --theme-display-4-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-display-4-letter-spacing: -0.05em;
  --theme-display-3-font-size: 56px;
  --theme-display-3-line-height: 56px;
  --theme-display-3-font-weight: 400;
  --theme-display-3-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-display-3-letter-spacing: -0.02em;
  --theme-display-2-font-size: 45px;
  --theme-display-2-line-height: 48px;
  --theme-display-2-font-weight: 400;
  --theme-display-2-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-display-2-letter-spacing: -0.005em;
  --theme-display-1-font-size: 36px;
  --theme-display-1-line-height: 1;
  --theme-display-1-font-weight: 300;
  --theme-display-1-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-display-1-letter-spacing: normal;
  --theme-headline-font-size: 24px;
  --theme-headline-line-height: 1;
  --theme-headline-font-weight: 400;
  --theme-headline-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-headline-letter-spacing: normal;
  --theme-title-font-size: 20px;
  --theme-title-line-height: 1;
  --theme-title-font-weight: 500;
  --theme-title-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-title-letter-spacing: normal;
  --theme-subheading-2-font-size: 18px;
  --theme-subheading-2-line-height: 1;
  --theme-subheading-2-font-weight: 700;
  --theme-subheading-2-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-subheading-2-letter-spacing: normal;
  --theme-subheading-1-font-size: 16px;
  --theme-subheading-1-line-height: 1;
  --theme-subheading-1-font-weight: 400;
  --theme-subheading-1-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-subheading-1-letter-spacing: normal;
  --theme-body-2-font-size: 14px;
  --theme-body-2-line-height: 1;
  --theme-body-2-font-weight: 500;
  --theme-body-2-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-body-2-letter-spacing: normal;
  --theme-body-1-font-size: 14px;
  --theme-body-1-line-height: 1;
  --theme-body-1-font-weight: 400;
  --theme-body-1-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-body-1-letter-spacing: normal;
  --theme-caption-font-size: 12px;
  --theme-caption-line-height: 1;
  --theme-caption-font-weight: 400;
  --theme-caption-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-caption-letter-spacing: normal;
  --theme-button-font-size: 14px;
  --theme-button-line-height: 1;
  --theme-button-font-weight: 500;
  --theme-button-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-button-letter-spacing: normal;
  --theme-input-font-size: 16px;
  --theme-input-line-height: 1.125;
  --theme-input-font-weight: 400;
  --theme-input-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-input-letter-spacing: normal;
  --theme-font-family: Roboto, "Helvetica Neue", sans-serif;
  --theme-paragraph-font-size: 10px;
  --theme-primary-50: #eef1f5;
  --theme-primary-100: #e3f2fc;
  --theme-primary-200: #c0e1f3;
  --theme-primary-300: #81c3e8;
  --theme-primary-400: #41a6dc;
  --theme-primary-500: #027abb;
  --theme-primary-600: #0481c3;
  --theme-primary-700: #0673a9;
  --theme-primary-800: #0369a4;
  --theme-primary-900: #035c89;
  --theme-primary-a100: #c3e6fd;
  --theme-primary-a200: #84cde4;
  --theme-primary-a400: #44b5cc;
  --theme-primary-a700: #059cb2;
  --theme-primary-contrast-50: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-100: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-200: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-300: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-400: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-500: #fff;
  --theme-primary-contrast-600: #fff;
  --theme-primary-contrast-700: #fff;
  --theme-primary-contrast-800: #fff;
  --theme-primary-contrast-900: #fff;
  --theme-primary-contrast-a100: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-a200: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-a400: rgba(0, 0, 0, 0.87);
  --theme-primary-contrast-a700: #fff;
  --theme-primary-default: #027abb;
  --theme-primary-lighter: #e3f2fc;
  --theme-primary-darker: #0673a9;
  --theme-primary-text: #027abb;
  --theme-primary-default-contrast: #fff;
  --theme-primary-lighter-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-darker-contrast: #fff;
  --theme-primary-50-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-100-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-200-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-300-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-400-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-500-contrast: #fff;
  --theme-primary-600-contrast: #fff;
  --theme-primary-700-contrast: #fff;
  --theme-primary-800-contrast: #fff;
  --theme-primary-900-contrast: #fff;
  --theme-primary-a100-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-a200-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-a400-contrast: rgba(0, 0, 0, 0.87);
  --theme-primary-a700-contrast: #fff;
  --theme-accent-50: #fff8f4;
  --theme-accent-100: #ffeadb;
  --theme-accent-200: #ffcea9;
  --theme-accent-300: #ffb276;
  --theme-accent-400: #ff9644;
  --theme-accent-500: #ff6f00;
  --theme-accent-600: #f26900;
  --theme-accent-700: #e46300;
  --theme-accent-800: #d75600;
  --theme-accent-900: #cb4a00;
  --theme-accent-a100: #ffe8db;
  --theme-accent-a200: #f8d0b7;
  --theme-accent-a400: #eba16e;
  --theme-accent-a700: #d65900;
  --theme-accent-contrast-50: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-100: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-200: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-300: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-400: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-500: #fff;
  --theme-accent-contrast-600: #fff;
  --theme-accent-contrast-700: #fff;
  --theme-accent-contrast-800: #fff;
  --theme-accent-contrast-900: #fff;
  --theme-accent-contrast-a100: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-a200: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-a400: rgba(0, 0, 0, 0.87);
  --theme-accent-contrast-a700: #fff;
  --theme-accent-default: #ff6f00;
  --theme-accent-lighter: #ffeadb;
  --theme-accent-darker: #e46300;
  --theme-accent-text: #ff6f00;
  --theme-accent-default-contrast: #fff;
  --theme-accent-lighter-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-darker-contrast: #fff;
  --theme-accent-50-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-100-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-200-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-300-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-400-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-500-contrast: #fff;
  --theme-accent-600-contrast: #fff;
  --theme-accent-700-contrast: #fff;
  --theme-accent-800-contrast: #fff;
  --theme-accent-900-contrast: #fff;
  --theme-accent-a100-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-a200-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-a400-contrast: rgba(0, 0, 0, 0.87);
  --theme-accent-a700-contrast: #fff;
  --theme-warn-50: #fae4e5;
  --theme-warn-100: #f4c8ca;
  --theme-warn-200: #f49b99;
  --theme-warn-300: #f46f67;
  --theme-warn-400: #f44236;
  --theme-warn-500: #d2232a;
  --theme-warn-600: #c52024;
  --theme-warn-700: #b71d1d;
  --theme-warn-800: #aa1010;
  --theme-warn-900: #9e0404;
  --theme-warn-a100: #fac2c4;
  --theme-warn-a200: #f1a4a6;
  --theme-warn-a400: #e0696a;
  --theme-warn-a700: #c61010;
  --theme-warn-contrast-50: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-100: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-200: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-300: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-400: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-500: #fff;
  --theme-warn-contrast-600: #fff;
  --theme-warn-contrast-700: #fff;
  --theme-warn-contrast-800: #fff;
  --theme-warn-contrast-900: #fff;
  --theme-warn-contrast-a100: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-a200: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-a400: rgba(0, 0, 0, 0.87);
  --theme-warn-contrast-a700: #fff;
  --theme-warn-default: #d2232a;
  --theme-warn-lighter: #f4c8ca;
  --theme-warn-darker: #b71d1d;
  --theme-warn-text: #d2232a;
  --theme-warn-default-contrast: #fff;
  --theme-warn-lighter-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-darker-contrast: #fff;
  --theme-warn-50-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-100-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-200-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-300-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-400-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-500-contrast: #fff;
  --theme-warn-600-contrast: #fff;
  --theme-warn-700-contrast: #fff;
  --theme-warn-800-contrast: #fff;
  --theme-warn-900-contrast: #fff;
  --theme-warn-a100-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-a200-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-a400-contrast: rgba(0, 0, 0, 0.87);
  --theme-warn-a700-contrast: #fff;
  --theme-is-dark: false;
  --theme-foreground-base: black;
  --theme-foreground-divider: rgba(0, 0, 0, 0.12);
  --theme-foreground-dividers: rgba(0, 0, 0, 0.12);
  --theme-foreground-disabled: rgba(0, 0, 0, 0.38);
  --theme-foreground-disabled-button: rgba(0, 0, 0, 0.26);
  --theme-foreground-disabled-text: rgba(0, 0, 0, 0.38);
  --theme-foreground-elevation: black;
  --theme-foreground-hint-text: rgba(0, 0, 0, 0.38);
  --theme-foreground-secondary-text: rgba(0, 0, 0, 0.54);
  --theme-foreground-icon: rgba(0, 0, 0, 0.54);
  --theme-foreground-icons: rgba(0, 0, 0, 0.54);
  --theme-foreground-text: rgba(0, 0, 0, 0.87);
  --theme-foreground-slider-min: rgba(0, 0, 0, 0.87);
  --theme-foreground-slider-off: rgba(0, 0, 0, 0.26);
  --theme-foreground-slider-off-active: rgba(0, 0, 0, 0.38);
  --theme-background-status-bar: #e0e0e0;
  --theme-background-app-bar: #f5f5f5;
  --theme-background-background: #fafafa;
  --theme-background-hover: rgba(0, 0, 0, 0.04);
  --theme-background-card: white;
  --theme-background-dialog: white;
  --theme-background-disabled-button: rgba(0, 0, 0, 0.12);
  --theme-background-raised-button: white;
  --theme-background-focused-button: rgba(0, 0, 0, 0.12);
  --theme-background-selected-button: #e0e0e0;
  --theme-background-selected-disabled-button: #bdbdbd;
  --theme-background-disabled-button-toggle: #eeeeee;
  --theme-background-unselected-chip: #e0e0e0;
  --theme-background-disabled-list-option: #eeeeee;
  --theme-background-tooltip: #616161;
  --theme-success-color: green;
  --theme-warning-color: yellow;
}

.test {
  font-size: var(--theme-body-1-font-size);
  color: var(--theme-success-color);
  background-color: var(--theme-background-background);
}

settings.json

{
  "sass": {
    "compiler": "libsass/3.5.5",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}