Added a color defintion file so other apps can get color from theme

pull/161/head
Satyajit Sahoo 2014-10-03 23:22:52 +05:30
parent 6eff3bdc1f
commit 2267965321
8 changed files with 165 additions and 59 deletions

View File

@ -1,26 +1,39 @@
@import "functions"; @import "functions";
@mixin linked_button($bg, $shadow) { @mixin linked_button($bg, $shadow) {
border-width: 1px; border: 1px solid border_normal($bg);
border-radius: 0; border-radius: 0;
border-right-width: 0; border-right-style: none;
border-left-width: 0; border-left-style: none;
box-shadow: inset -1px 0 border_normal($bg); box-shadow: inset -1px 0 border_normal($bg),
0 1px 2px -1px alpha($dark_shadow, .3);
&:first-child { &:first-child {
border-width: 1px; border-width: 1px;
border-radius: $roundness; border-radius: $roundness;
border-right-width: 0; border-left-style: solid;
border-bottom-right-radius: 0; border-right-style: none;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0;
&:dir(rtl) {
border-left-style: none;
border-right-style: solid;
}
} }
&:last-child { &:last-child {
border-width: 1px; border-width: 1px;
border-radius: $roundness; border-radius: $roundness;
border-left-width: 0; border-left-style: none;
border-bottom-left-radius: 0; border-right-style: solid;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0;
&:dir(rtl) {
border-left-style: solid;
border-right-style: none;
}
} }
&:only-child { &:only-child {
@ -28,7 +41,10 @@
border-radius: $roundness; border-radius: $roundness;
} }
&:focus, &:hover { box-shadow: inset -1px 0 border_focus($bg); } &:focus, &:hover {
box-shadow: inset -1px 0 border_focus($bg),
0 1px 2px -1px alpha($dark_shadow, .3);
}
&:active, &:active:hover, &:active, &:active:hover,
&:active:focus, &:active:hover:focus { &:active:focus, &:active:hover:focus {
@ -61,11 +77,16 @@
border-style: solid; border-style: solid;
color: $fg; color: $fg;
transition: 100ms ease; transition: 100ms ease;
box-shadow: 0 1px 2px -1px alpha($dark_shadow, .3);
-GtkWidget-focus-padding: 1; -GtkWidget-focus-padding: 1;
-GtkWidget-focus-line-width: 0; -GtkWidget-focus-line-width: 0;
&:focus, &:hover { @include linear-gradient(shade($bg, 1.1)); } &:focus, &:hover {
@include linear-gradient(shade($bg, 1.1));
box-shadow: 0 1px 3px -1px alpha($dark_shadow, .5);
}
&:active { &:active {
@include linear-gradient(shade($bg, .95)); @include linear-gradient(shade($bg, .95));
@ -80,6 +101,7 @@
@include linear-gradient(shade($bg, .95)); @include linear-gradient(shade($bg, .95));
color: mix($bg, $fg, .5); color: mix($bg, $fg, .5);
box-shadow: none;
} }
&:active *:insensitive { &:active *:insensitive {
@ -94,8 +116,6 @@
&:insensitive { color: shade($bg, .85); } &:insensitive { color: shade($bg, .85); }
} }
&.linked, &.raised.linked, .linked & { @include linked_button(shade($bg, 1.05), $dark_shadow); }
} }
.button { .button {

View File

@ -0,0 +1,67 @@
@import "global";
/* dark color scheme */
@define-color dark_bg_color #{"" + $dark_bg_color};
@define-color dark_fg_color #{"" + $dark_fg_color};
/* colormap actually used by the theme, to be overridden in other css files */
@define-color theme_bg_color #{"" + $bg_color};
@define-color theme_fg_color #{"" + $fg_color};
@define-color theme_base_color #{"" + $base_color};
@define-color theme_text_color #{"" + $text_color};
@define-color theme_selected_bg_color #{"" + $selected_bg_color};
@define-color theme_selected_fg_color #{"" + $selected_fg_color};
@define-color theme_tooltip_bg_color #{"" + $tooltip_bg_color};
@define-color theme_tooltip_fg_color #{"" + $tooltip_fg_color};
/* shadow effects */
@define-color light_shadow #{"" + $light_shadow};
@define-color dark_shadow #{"" + $dark_shadow};
/* misc colors used by gtk+ */
@define-color info_fg_color #{"" + $info_fg_color};
@define-color info_bg_color #{"" + $info_bg_color};
@define-color warning_fg_color #{"" + $warning_fg_color};
@define-color warning_bg_color #{"" + $warning_bg_color};
@define-color question_fg_color #{"" + $question_fg_color};
@define-color question_bg_color #{"" + $question_bg_color};
@define-color error_fg_color #{"" + $error_fg_color};
@define-color error_bg_color #{"" + $error_bg_color};
@define-color link_color #{"" + $link_color};
@define-color success_color #{"" + $success_color};
@define-color warning_color #{"" + $warning_color};
@define-color error_color #{"" + $error_color};
/* widget colors */
@define-color titlebar_bg_color @dark_bg_color;
@define-color titlebar_fg_color @dark_fg_color;
@define-color menubar_bg_color @dark_bg_color;
@define-color menubar_fg_color @dark_fg_color;
@define-color toolbar_bg_color @theme_bg_color;
@define-color toolbar_fg_color @theme_fg_color;
@define-color menu_bg_color @dark_bg_color;
@define-color menu_fg_color @dark_fg_color;
@define-color panel_bg_color @dark_bg_color;
@define-color panel_fg_color @dark_fg_color;
/* osd */
@define-color osd_base @dark_bg_color;
@define-color osd_fg @dark_fg_color;
@define-color osd_bg alpha(@osd_base, 0.8);
/* lightdm greeter colors */
@define-color lightdm_bg_color @dark_bg_color;
@define-color lightdm_fg_color @dark_fg_color;
/* window manager colors */
@define-color wm_bg @titlebar_bg_color;
@define-color wm_border_focused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.21);
@define-color wm_border_unfocused mix(shade(@titlebar_bg_color, 0.7), @titlebar_fg_color, 0.12);
@define-color wm_title_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
@define-color wm_title_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.4);
@define-color wm_icons_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.1);
@define-color wm_icons_focused_prelight @selected_bg_color;
@define-color wm_icons_focused_pressed shade(@selected_bg_color, 0.8);
@define-color wm_icons_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.4);
@define-color wm_icons_unfocused_prelight @selected_bg_color;
@define-color wm_icons_unfocused_pressed shade(@selected_bg_color, 0.8);

View File

@ -40,7 +40,8 @@
box-shadow: inset 1px 0 alpha($dark_shadow, .1), box-shadow: inset 1px 0 alpha($dark_shadow, .1),
inset 0 1px alpha($dark_shadow, .12), inset 0 1px alpha($dark_shadow, .12),
inset -1px 0 alpha($dark_shadow, .1), inset -1px 0 alpha($dark_shadow, .1),
inset 0 -1px alpha($dark_shadow, .05); inset 0 -1px alpha($dark_shadow, .05),
0 1px 2px -1px shade($bg_color, 1.4);
&:selected, &:selected:focus { &:selected, &:selected:focus {
background-color: $selected_bg_color; background-color: $selected_bg_color;
@ -65,8 +66,4 @@
&.image.left { padding-right: $spacing; } &.image.left { padding-right: $spacing; }
} }
.entry { .entry { @include entry($base_color, $text_color); }
@include entry($base_color, $text_color);
.linked & { @include linked_entry($base_color); }
}

View File

@ -29,15 +29,15 @@
} }
@function border_focus($color) { @function border_focus($color) {
@return shade($color, ($contrast - .1)); @return shade($color, ($contrast - .05));
} }
@function border_active($color) { @function border_active($color) {
@return shade($color, ($contrast - .15)); @return shade($color, ($contrast - .10));
} }
@function border_insensitive($color) { @function border_insensitive($color) {
@return shade($color, ($contrast + .05)); @return shade($color, ($contrast + .1));
} }
@mixin linear-gradient($color, $direction: to bottom) { @mixin linear-gradient($color, $direction: to bottom) {

View File

@ -1,30 +1,30 @@
/* default color scheme */ /* default color scheme */
$bg_color: #dedede; $bg_color: #eee;
$fg_color: #555555; $fg_color: #444;
$base_color: #f9f9f9; $base_color: #fff;
$text_color: #2d2d2d; $text_color: #444;
$selected_bg_color: #d64937; $selected_bg_color: #f06860;
$selected_fg_color: #f9f9f9; $selected_fg_color: #fff;
$tooltip_bg_color: #2d2d2d; $tooltip_bg_color: #444;
$tooltip_fg_color: #dedede; $tooltip_fg_color: #eee;
/* dark colors */ /* dark colors */
$dark_bg_color: #2d2d2d; $dark_bg_color: #444;
$dark_fg_color: #dedede; $dark_fg_color: #eee;
/* shadows */ /* shadows */
$dark_shadow: #000; $dark_shadow: #000;
$light_shadow: #fff; $light_shadow: #fff;
/* misc colors used by gtk+ */ /* misc colors used by gtk+ */
$info_fg_color: rgb (58, 135, 173); $info_fg_color: #3986ac;
$info_bg_color: rgb (217, 237, 247); $info_bg_color: #d9edf7;
$warning_fg_color: rgb (192, 152, 83); $warning_fg_color: #c09853;
$warning_bg_color: rgb (252, 248, 227); $warning_bg_color: #fcf8e3;
$question_fg_color: rgb (214, 73, 55); $question_fg_color: #d64937;
$question_bg_color: rgb (252, 229, 213); $question_bg_color: #fce5d5;
$error_fg_color: rgb (185, 74, 72); $error_fg_color: #b94a48;
$error_bg_color: rgb (242, 222, 222); $error_bg_color: #f2dede;
$link_color: #fc6f5d; $link_color: #fc6f5d;
$success_color: #53a93f; $success_color: #53a93f;
$warning_color: #f57900; $warning_color: #f57900;

View File

@ -61,7 +61,7 @@
@include linear-gradient($titlebar_bg_color); @include linear-gradient($titlebar_bg_color);
border-radius: $roundness $roundness 0 0; border-radius: $roundness $roundness 0 0;
color: mix($titlebar_fg_color, $titlebar_bg_color, .9); color: mix($titlebar_fg_color, $titlebar_bg_color, .1);
&:backdrop { &:backdrop {
@include linear-gradient($titlebar_bg_color); @include linear-gradient($titlebar_bg_color);
@ -103,18 +103,3 @@
} }
} }
} }
.window-frame {
margin: 10px;
border-style: none;
border-radius: $roundness $roundness 0 0;
box-shadow: 0 3px 7px 1px fade-out(black, .3),
0 0 0 1px mix($titlebar_fg_color, $titlebar_bg_color, 21%);
&:backdrop {
box-shadow: 0 3px 5px 1px fade-out(black, 0.5),
0 0 0 1px mix($titlebar_fg_color, $titlebar_bg_color, 12%);
}
&.tiled { border-radius: 0; }
}

View File

@ -0,0 +1,35 @@
.window-frame {
border-style: none;
border-radius: 2px 2px 0 0;
box-shadow: 0 3px 7px 1px alpha(black, 0.7),
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
/* this is used for the resize cursor area */
margin: 10px;
&:backdrop {
box-shadow: 0 3px 5px 1px alpha(black, 0.5),
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.12);
}
&.tiled { border-radius: 0; }
&.csd {
&.popup {
border-radius: 0;
box-shadow: 0 1px 2px alpha(black, 0.8),
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
}
&.tooltip {
border-radius: 2px;
box-shadow: none;
}
&.message-dialog {
border-radius: 2px;
box-shadow: 0 1px 2px alpha(black, 0.8),
0 0 0 1px mix(shade($titlebar_bg_color, 0.7), $titlebar_fg_color, 0.21);
}
}
}

View File

@ -1,5 +1,7 @@
@import "colors";
@import "base"; @import "base";
@import "button"; @import "button";
@import "entry"; @import "entry";
@import "menu"; @import "menu";
@import "toolbar"; @import "toolbar";
@import "window";