Last active
July 7, 2022 20:13
-
-
Save adgoncal/b2f757aeabbc8d60be04800206208a49 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
: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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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