_colors.scss
ASCII text
1// When color definition differs for dark and light variant, 2// it gets @if ed depending on $variant 3 4$higher_opacity: 0.9; 5$middle_opacity: 0.6; 6$lower_opacity: 0.3; 7 8$enabled_opacity: 0.75; 9$hint_opacity: 0.6; 10$disabled_opacity: 0.4; 11 12@function gtkalpha($c, $a) { 13@return unquote("alpha(#{$c}, #{$a})"); 14} 15 16@function scale-alpha($c, $a) { 17@return scale-color($c, $alpha: percentage(-1 + $a)); 18} 19 20// Reference URL: 21// https://material.google.com/style/color.html#color-color-palette 22// https://material.google.com/style/icons.html#icons-product-icons 23 24// Foreground colors 25$fg_color: if($variant == 'light', scale-alpha(#000000, 0.8), #FFFFFF); 26$secondary_fg_color: scale-alpha($fg_color, $enabled_opacity); 27$tertiary_fg_color: scale-alpha($fg_color, $hint_opacity); 28 29$selected_fg_color: #FFFFFF; 30$secondary_selected_fg_color: scale-alpha($selected_fg_color, $enabled_opacity); 31$tertiary_selected_fg_color: scale-alpha($selected_fg_color, $hint_opacity); 32 33$insensitive_fg_color: scale-alpha($fg_color, $disabled_opacity); 34$insensitive_secondary_fg_color: scale-alpha($secondary_fg_color, $disabled_opacity); 35$insensitive_tertiary_fg_color: scale-alpha($tertiary_fg_color, $disabled_opacity); 36 37$insensitive_selected_fg_color: scale-alpha($selected_fg_color, $disabled_opacity); 38$insensitive_secondary_selected_fg_color: scale-alpha($secondary_selected_fg_color, $disabled_opacity); 39$insensitive_tertiary_selected_fg_color: scale-alpha($tertiary_selected_fg_color, $disabled_opacity); 40 41// Background colors 42$bg_color: if($variant == 'light', #F5F5F5, #455A64); 43$base_color: if($variant == 'light', #FFFFFF, #546E7A); 44$secondary_base_color: mix($base_color, $bg_color, 50%); 45$light_color: if($variant =='light', #FAFAFA, #607D8B); 46$headerbar_color: if($variant =='light', #455A64, #37474F); 47 48$selected_bg_color: #42A5F5; 49$secondary_selected_bg_color: #40C4FF; 50$accent_bg_color: #FF4081; 51 52// Misc colors 53$track_color: gtkalpha(currentColor, $lower_opacity); 54$borders_color: if($variant == 'light', scale-alpha(#000000, 0.1), scale-alpha(#000000, 0.2)); 55$highlight_color: if($variant == 'light', scale-alpha(#FFFFFF, 0.4), scale-alpha(#FFFFFF, 0.1)); 56$secondary_highlight_color: scale-alpha(#FFFFFF, 0.2); 57 58$link_color: $selected_bg_color; 59$link_visited_color: #E040FB; 60 61$warning_color: #FF6D00; 62$error_color: #DD2C00; 63$success_color: #00C853; 64 65$suggested_color: $accent_bg_color; 66$destructive_color: #FF5252; 67 68$info_bg_color: #66BB6A; 69$question_bg_color: #42A5F5; 70$warning_bg_color: #FFA726; 71$error_bg_color: #EF5350; 72 73