Skip to content

Instantly share code, notes, and snippets.

@adgoncal
Last active July 7, 2022 20:13
Show Gist options
  • Save adgoncal/b2f757aeabbc8d60be04800206208a49 to your computer and use it in GitHub Desktop.
Save adgoncal/b2f757aeabbc8d60be04800206208a49 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
$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);
}
: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);
}
{
"sass": {
"compiler": "libsass/3.5.5",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment