75 lines
2.7 KiB
SCSS
75 lines
2.7 KiB
SCSS
|
// When color definition differs for dark and light variant,
|
||
|
// it gets @if ed depending on $variant
|
||
|
|
||
|
@import '_palette.scss';
|
||
|
|
||
|
$is_highcontrast:true;
|
||
|
|
||
|
$base_color: if($variant == 'light', $light_1, $dark_5);
|
||
|
$bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
|
||
|
$fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1);
|
||
|
|
||
|
$selected_fg_color: $light_1;
|
||
|
$selected_bg_color: $blue_3;
|
||
|
$selected_borders_color: darken($selected_bg_color, 20%);
|
||
|
|
||
|
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
|
||
|
$outer_borders_color: $borders_color;
|
||
|
|
||
|
$link_color: lighten($selected_bg_color,20%);
|
||
|
$link_visited_color: lighten($selected_bg_color,10%);
|
||
|
|
||
|
$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
|
||
|
$error_color: if($variant == 'light', $red_3, $red_4);
|
||
|
$success_color: if($variant == 'light', $green_4, $green_5);
|
||
|
$destructive_color: $error_color;
|
||
|
|
||
|
// color definitions for OSD elements
|
||
|
$osd_fg_color: $light_1;
|
||
|
$osd_bg_color: $base_color;
|
||
|
|
||
|
// derived osd colors
|
||
|
$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
|
||
|
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
|
||
|
$osd_borders_color: transparentize($osd_fg_color, 0.8);
|
||
|
$osd_outer_borders_color: $osd_borders_color;
|
||
|
|
||
|
$shadow_color: rgba(0,0,0,0);
|
||
|
|
||
|
// button
|
||
|
$button_mix_factor: 20%;
|
||
|
|
||
|
// notifications
|
||
|
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
|
||
|
|
||
|
// color definitions for system elements
|
||
|
$system_base_color: $dark_5;
|
||
|
$system_fg_color: $light_1;
|
||
|
|
||
|
// derived system colors
|
||
|
$system_bg_color: lighten($system_base_color, 5%);
|
||
|
$system_borders_color: transparentize($system_fg_color, .9);
|
||
|
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
|
||
|
$system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
|
||
|
|
||
|
// derived global colors
|
||
|
// insensitive state
|
||
|
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||
|
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||
|
$insensitive_borders_color: $borders_color;
|
||
|
|
||
|
// checked state
|
||
|
$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%));
|
||
|
$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%));
|
||
|
|
||
|
// hover state
|
||
|
$hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%));
|
||
|
$hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%));
|
||
|
|
||
|
// active state
|
||
|
$active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%));
|
||
|
$active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
|
||
|
|
||
|
// inset colour for high contrast
|
||
|
$hc_inset_color: transparentize($fg_color, 0.7);
|