Members of the KDE Community are recommended to subscribe to the kde-community mailing list at https://mail.kde.org/mailman/listinfo/kde-community to allow them to participate in important discussions and receive other important announcements

Commit 1f5035a2 authored by Dirruk de Vries's avatar Dirruk de Vries

added color effects

parent 8dc1d242
//apps rely on some named colors to be exported
/* GTK NAMED COLORS
----------------
use responsibly! */
// Sass thinks we're using the colors in the variables as strings and may shoot
// warning, it's innocuous and can be defeated by using "" + $var
/*
widget text/foreground color */
@define-color theme_fg_color #{"" +$fg_color};
/*
text color for entries, views and content in general */
@define-color theme_text_color #{"" +$text_color};
/*
widget base background color */
@define-color theme_bg_color #{"" +$bg_color};
/*
text widgets and the like base background color */
@define-color theme_base_color #{"" +$base_color};
/*
base background color of selections */
@define-color theme_selected_bg_color #{"" +$selected_bg_color};
/*
text/foreground color of selections */
@define-color theme_selected_fg_color #{"" +$selected_fg_color};
/*
base background color of insensitive widgets */
@define-color insensitive_bg_color #{"" +$insensitive_bg_color};
/*
text foreground color of insensitive widgets */
@define-color insensitive_fg_color #{"" +$insensitive_fg_color};
/*
insensitive text widgets and the like base background color */
@define-color insensitive_base_color #{"" +$base_color};
/*
widget text/foreground color on backdrop windows */
@define-color theme_unfocused_fg_color #{"" +$backdrop_fg_color};
/*
text color for entries, views and content in general on backdrop windows */
@define-color theme_unfocused_text_color #{"" +$text_color};
/*
widget base background color on backdrop windows */
@define-color theme_unfocused_bg_color #{"" +$backdrop_bg_color};
/*
text widgets and the like base background color on backdrop windows */
@define-color theme_unfocused_base_color #{"" +$backdrop_base_color};
/*
base background color of selections on backdrop windows */
@define-color theme_unfocused_selected_bg_color #{"" +$selected_bg_color};
/*
text/foreground color of selections on backdrop windows */
@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color};
/*
widgets main borders color */
@define-color borders #{"" +$borders_color};
/*
widgets main borders color on backdrop windows */
@define-color unfocused_borders #{"" +$backdrop_borders_color};
/*
these are pretty self explicative */
@define-color warning_color #{"" +$warning_color};
@define-color error_color #{"" +$error_color};
@define-color success_color #{"" +$success_color};
@define-color icon_red #{"" +$icon_red};
//@define-color destructive_color #{$destructive_color}
/*
titlebar colors */
@define-color titlebar_bg_color #{"" +$titlebar_bg_color};
@define-color titlebar_fg_color #{"" +$titlebar_fg_color};
@define-color hover_color #{"" + $hover_color};
//WM
$_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is
transparentize(black,1)); // done directly in the
// color definition
/*
these colors are exported for the window manager and shouldn't be used in applications,
read if you used those and something break with a version upgrade you're on your own... */
@define-color wm_title #{$titlebar_fg_color};
@define-color wm_unfocused_title #{$backdrop_fg_color};
@define-color wm_highlight #{"" + $_wm_highlight};
@define-color wm_borders_edge #{"" + $borders_edge};
@define-color wm_bg_a #{$titlebar_bg_color};
@define-color wm_bg_b #{$titlebar_bg_color};
@define-color wm_shadow alpha(black, 0.35);
@define-color wm_border alpha(black, 0.18);
@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3);
@define-color wm_button_hover_color_b #{$bg_color};
@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85);
@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89);
@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9);
//FIXME this is really an API
@define-color content_view_bg #{"" + $base_color};
// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant
$base_color: if($variant == 'light', #fcfcfc, #232629);
$text_color: if($variant == 'light', #31363b, #EEEFF0);
$bg_color: if($variant == 'light', #eff0f1, #31363B);
$fg_color: if($variant == 'light', #31363b, #EEEFF0);
$selected_fg_color: if($variant == 'light', #fcfcfc, #EEEFF0);
$selected_bg_color: if($variant == 'light', #3daee9, #3DADE8);
$selected_borders_color: if($variant== 'light', $selected_bg_color, $selected_bg_color);
$titlebar_bg_color: if($variant == 'light',#475057 , #31363B); // add to public
$titlebar_fg_color: if($variant == 'light', #fcfcfc, #EEEFF0); // add to public
$hover_color: if($variant == 'light', #93cee9, #3DADE8);
// todo
$borders_color: if($variant == 'light', #bdc3c7, #696D71);
$borders_edge: if($variant == 'light', white, transparentize($fg_color, 0.9));
$link_color: if($variant == 'light', darken($selected_bg_color,10%), lighten($selected_bg_color,20%));
$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), lighten($selected_bg_color,10%));
$top_hilight: $borders_edge;
$scrollbar_bg_color: darken($bg_color, 7%);
$warning_color: #f67400;
$error_color: #ed1515;
$success_color: if($variant == 'light', #11d116, darken(#73d216,10%));
$destructive_color: if($variant == 'light', #ef2929, darken(#ef2929,10%));
$icon_red: #da4453;
$osd_fg_color: if($variant == 'light', #31363b, #EEEFF0);
$osd_text_color: if($variant == 'light', #31363b, #EEEFF0);
$osd_bg_color: transparentize($base_color, 0.2);
$osd_insensitive_bg_color: shade($osd_fg_color, 0.3);
$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
$osd_borders_color: transparentize(black, 0.3);
$sidebar_bg_color: $bg_color;
$tooltip_borders_color: transparentize(white, 0.9);
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
$insensitive_bg_color: mix($bg_color, $fg_color, 95%);
$insensitive_borders_color: $borders_color;
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant ==' light', $base_color, lighten($base_color, 1%));
$backdrop_text_color: $text_color;
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 25%);
$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
$backdrop_selected_fg_color: $selected_fg_color;
$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color, $backdrop_bg_color, 35%);
$backdrop_sidebar_bg_color: lighten($backdrop_bg_color,5%);
$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
/* colors needed for gtk2 and assets
[Buttons]
insensitive gradient1: #{"" + lighten(insensitive(fg_color(b)), 1%)}
insensitive gradient2: #{"" + darken(insensitive(fg_color(b)), 3%)}
insensitive active gradient1: #{"" + lighten(insensitive(selection(bg)), 3%)}
insensitive active gradient2: #{"" + darken(insensitive(selection(bg)), 10%)}
insensitive fg color: #{"" + insensitive(fg_color(b))}
insensitive selected fg color: #{"" + insensitive(selection(fg))}
insensitive border #{"" + insensitive(border(normal))}
[Window]
insensitive fg color: #{"" + insensitive(fg_color(w))}
insensitive selection bg: #{"" + insensitive(selection(bg))}
insensitive selection fg: #{"" + insensitive(selection(fg))}
[Scrollbar]
trough: #{"" + bg_color(s)}
scrollbar: #{"" + fg_color(s)}
insensitive scrollbar: #{"" + insensitive(fg_color(s))}
[Check & Radio]
normal #{"" + mix(bg_color(w), fg_color(w), 50%)}
Disabled #{"" + insensitive(mix(bg_color(w), fg_color(w), 60%))}
hover #{"" + mix(bg_color(w),selection(bg))}
[titlebuttons]
normal #{"" + titlebar(fg)}
hover #{"" + titlebar(bg)}
pressed #{"" + mix(titlebar(bg),titlebar(fg), 30%)}
close hover #{"" + change-color($error_color, $lightness: lightness($error_color)*1.5)}
close #{"" + $error_color}
*/
//apps rely on some named colors to be exported
/* GTK NAMED COLORS
----------------
use responsibly! */
// Sass thinks we're using the colors in the variables as strings and may shoot
// warning, it's innocuous and can be defeated by using "" + $var
/*
widget text/foreground color */
@define-color theme_fg_color #{"" + fg_color(w)};
/*
text color for entries, views and content in general */
@define-color theme_text_color #{"" +fg_color(v)};
/*
widget base background color */
@define-color theme_bg_color #{"" +bg_color(w)};
/*
text widgets and the like base background color */
@define-color theme_base_color #{"" +bg_color(v)};
/*
base background color of selections */
@define-color theme_selected_bg_color #{"" +selection(bg)};
/*
text/foreground color of selections */
@define-color theme_selected_fg_color #{"" +selection(fg)};
/*
base background color of insensitive widgets */
@define-color insensitive_bg_color #{"" +insensitive(bg_color(w))};
/*
text foreground color of insensitive widgets */
@define-color insensitive_fg_color #{"" +insensitive(fg_color(w))};
/*
insensitive text widgets and the like base background color */
@define-color insensitive_base_color #{"" +insensitive(fg_color(v))};
/*
widget text/foreground color on backdrop windows */
@define-color theme_unfocused_fg_color #{"" +backdrop(fg_color(w))};
/*
text color for entries, views and content in general on backdrop windows */
@define-color theme_unfocused_text_color #{"" +backdrop(fg_color(v))};
/*
widget base background color on backdrop windows */
@define-color theme_unfocused_bg_color #{"" +backdrop(bg_color(w))};
/*
text widgets and the like base background color on backdrop windows */
@define-color theme_unfocused_base_color #{"" +backdrop(bg_color(v))};
/*
base background color of selections on backdrop windows */
@define-color theme_unfocused_selected_bg_color #{"" +backdrop(selection(bg, backdrop))};
/*
text/foreground color of selections on backdrop windows */
@define-color theme_unfocused_selected_fg_color #{"" + backdrop(selection(fg))};
/*
widgets main borders color */
@define-color borders #{"" +border(normal)};
/*
widgets main borders color on backdrop windows */
@define-color unfocused_borders #{"" +backdrop(border(normal))};
/*
widgets main borders color insensitive */
@define-color insensitive_borders #{"" +insensitive(border(normal))};
/*
these are pretty self explicative */
@define-color warning_color #{"" +$warning_color};
@define-color error_color #{"" +$error_color};
@define-color success_color #{"" +$success_color};
//@define-color destructive_color #{$destructive_color}
/*
titlebar colors */
@define-color titlebar_bg_color #{"" +titlebar(bg)};
@define-color titlebar_fg_color #{"" +titlebar(fg)};
//WM
// $_wm_highlight: if($variant=='light', $top_hilight, // Sass gets mad if this is
// transparentize(black,1)); // done directly in the
// // color definition
//
// /*
// these colors are exported for the window manager and shouldn't be used in applications,
// read if you used those and something break with a version upgrade you're on your own... */
// @define-color wm_title #{$titlebar_fg_color};
// @define-color wm_unfocused_title #{$backdrop_fg_color};
// @define-color wm_highlight #{"" + $_wm_highlight};
// @define-color wm_borders_edge #{"" + $borders_edge};
//
// @define-color wm_bg_a #{$titlebar_bg_color};
// @define-color wm_bg_b #{$titlebar_bg_color};
//
// @define-color wm_shadow alpha(black, 0.35);
// @define-color wm_border alpha(black, 0.18);
//
// @define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3);
// @define-color wm_button_hover_color_b #{$bg_color};
// @define-color wm_button_active_color_a shade(#{$bg_color}, 0.85);
// @define-color wm_button_active_color_b shade(#{$bg_color}, 0.89);
// @define-color wm_button_active_color_c shade(#{$bg_color}, 0.9);
//FIXME this is really an API
@define-color content_view_bg #{"" + bg_color(v)};
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -10,34 +10,26 @@ titlebutton-minimize-active
titlebutton-close-backdrop
titlebutton-minimize-backdrop
titlebutton-maximize-backdrop
titlebutton-maximize-maximized
titlebutton-maximize-maximized-hover
titlebutton-maximize-maximized-active
titlebutton-maximize-maximized-backdrop
scrollbar-slider
scrollbar-slider-hover
scrollbar-slider-active
scrollbar-slider-backdrop
scrollbar-slider-overlay
scrollbar-slider-rtl
scrollbar-slider-rtl-hover
scrollbar-slider-rtl-active
scrollbar-slider-overlay-backdrop
scrollbar-slider-horizontal
scrollbar-slider-horizontal-hover
scrollbar-slider-horizontal-active
scrollbar-slider-horizontal-overlay
scrollbar-slider-horizontal-backdrop
scrollbar-slider-horizontal-overlay-backdrop
scrollbar-trough
scrollbar-trough-backdrop
scrollbar-trough-horizontal
scrollbar-trough-rtl
scrollbar-slider-dark
scrollbar-slider-hover-dark
scrollbar-slider-active-dark
scrollbar-slider-overlay-dark
scrollbar-slider-rtl-dark
scrollbar-slider-rtl-hover-dark
scrollbar-slider-rtl-active-dark
scrollbar-slider-horizontal-dark
scrollbar-slider-horizontal-hover-dark
scrollbar-slider-horizontal-active-dark
scrollbar-slider-horizontal-overlay-dark
scrollbar-trough-dark
scrollbar-trough-horizontal-dark
scrollbar-trough-rtl-dark
scrollbar-trough-horizontal-backdrop
checkbox-checked
checkbox-checked-hover
checkbox-checked-active
......@@ -75,53 +67,11 @@ radio-mixed-insensitive
radio-mixed-backdrop
radio-mixed-backdrop-insensitive
selected-checkbox-checked
selected-checkbox-checked-hover
selected-checkbox-checked-active
selected-checkbox-checked-insensitive
selected-checkbox-checked-backdrop
selected-checkbox-checked-backdrop-insensitive
selected-checkbox-unchecked
selected-checkbox-unchecked-hover
selected-checkbox-unchecked-active
selected-checkbox-unchecked-insensitive
selected-checkbox-unchecked-backdrop
selected-checkbox-unchecked-backdrop-insensitive
selected-checkbox-mixed
selected-checkbox-mixed-hover
selected-checkbox-mixed-active
selected-checkbox-mixed-insensitive
selected-checkbox-mixed-backdrop
selected-checkbox-mixed-backdrop-insensitive
selected-radio-checked
selected-radio-checked-hover
selected-radio-checked-active
selected-radio-checked-insensitive
selected-radio-checked-backdrop
selected-radio-checked-backdrop-insensitive
selected-radio-unchecked
selected-radio-unchecked-hover
selected-radio-unchecked-active
selected-radio-unchecked-insensitive
selected-radio-unchecked-backdrop
selected-radio-unchecked-backdrop-insensitive
selected-radio-mixed
selected-radio-mixed-hover
selected-radio-mixed-active
selected-radio-mixed-insensitive
selected-radio-mixed-backdrop
selected-radio-mixed-backdrop-insensitive
checkbox-checked-dark
checkbox-checked-hover-dark
checkbox-checked-active-dark
checkbox-checked-insensitive-dark
checkbox-checked-backdrop-dark
checkbox-checked-backdrop-insensitive-dark
checkbox-unchecked-dark
checkbox-unchecked-hover-dark
checkbox-unchecked-active-dark
checkbox-unchecked-insensitive-dark
checkbox-unchecked-backdrop-dark
checkbox-unchecked-backdrop-insensitive-dark
checkbox-selectionmode
checkbox-hover-selectionmode
checkbox-active-selectionmode
......@@ -130,75 +80,3 @@ checkbox-checked-selectionmode
checkbox-checked-hover-selectionmode
checkbox-checked-active-selectionmode
checkbox-checked-backdrop-selectionmode
checkbox-mixed-dark
checkbox-mixed-hover-dark
checkbox-mixed-active-dark
checkbox-mixed-insensitive-dark
checkbox-mixed-backdrop-dark
checkbox-mixed-backdrop-insensitive-dark
radio-checked-dark
radio-checked-hover-dark
radio-checked-active-dark
radio-checked-insensitive-dark
radio-checked-backdrop-dark
radio-checked-backdrop-insensitive-dark
radio-unchecked-dark
radio-unchecked-hover-dark
radio-unchecked-active-dark
radio-unchecked-insensitive-dark
radio-unchecked-backdrop-dark
radio-unchecked-backdrop-insensitive-dark
radio-mixed-dark
radio-mixed-hover-dark
radio-mixed-active-dark
radio-mixed-insensitive-dark
radio-mixed-backdrop-dark
radio-mixed-backdrop-insensitive-dark
slider-horz-scale-has-marks-below
slider-horz-scale-has-marks-below-hover
slider-horz-scale-has-marks-below-active
slider-horz-scale-has-marks-below-insensitive
slider-horz-scale-has-marks-below-backdrop
slider-horz-scale-has-marks-below-backdrop-insensitive
slider-vert-scale-has-marks-below
slider-vert-scale-has-marks-below-hover
slider-vert-scale-has-marks-below-active
slider-vert-scale-has-marks-below-insensitive
slider-vert-scale-has-marks-below-backdrop
slider-vert-scale-has-marks-below-backdrop-insensitive
slider-horz-scale-has-marks-above
slider-horz-scale-has-marks-above-hover
slider-horz-scale-has-marks-above-active
slider-horz-scale-has-marks-above-insensitive
slider-horz-scale-has-marks-above-backdrop
slider-horz-scale-has-marks-above-backdrop-insensitive
slider-vert-scale-has-marks-above