From 837eb5922fdfa9df4237494804147106cc1be28d Mon Sep 17 00:00:00 2001 From: Eudaimon Date: Sat, 21 May 2022 16:17:27 +0200 Subject: [PATCH] Featured finished, ready to merge into master --- gtk-2.0/gtkrc | 371 +++++++-------- gtk-3.0/gtk.css | 14 +- gtk-4.0/gtk.css | 16 +- source/common/_theme_colors.scss | 19 +- source/gtk3/gtk-new.css | 14 +- source/gtk4/gtk-new.css | 16 +- source/templates/_theme_colors.scss | 50 +- source/templates/_theme_colors.scss.processed | 37 ++ source/templates/_theme_colors.scss.unused | 37 ++ source/templates/gtkrc | 31 +- source/templates/gtkrc.processed | 439 ++++++++++++++++++ source/templates/process_variables.sh | 21 +- source/templates/theme_colors_.scss.processed | 50 +- source/templates/variables.sh | 15 +- 14 files changed, 845 insertions(+), 285 deletions(-) create mode 100644 source/templates/_theme_colors.scss.processed create mode 100644 source/templates/_theme_colors.scss.unused create mode 100644 source/templates/gtkrc.processed diff --git a/gtk-2.0/gtkrc b/gtk-2.0/gtkrc index 4d766eb..dc0f4f3 100644 --- a/gtk-2.0/gtkrc +++ b/gtk-2.0/gtkrc @@ -1,325 +1,334 @@ # Please keep this gtkrc in sync with the other ones from Clearlooks based themes. -gtk-color-scheme = "base_color:#908f8d\nfg_color:#241f31\nwindow_bg:#a7a7a7\nwindow_fg:#241f31\ntooltip_fg_color:#002269\ntooltip_bg_color:#6789b4\nselected_bg_color:#b0dd7e\nselected_fg_color:#000000\ndisabled_fg:#552222\ndisabled_bg:#938989" +gtk-color-scheme = "bg_color:#a7a7a7" +gtk-color-scheme = "fg_color:#241f31" +gtk-color-scheme = "base_color:#908f8d" +gtk-color-scheme = "text_color:#241f31" +gtk-color-scheme = "selected_bg_color:#b0dd7e" +gtk-color-scheme = "selected_fg_color:#000000" +gtk-color-scheme = "tooltip_bg_color:#6789b4" +gtk-color-scheme = "tooltip_fg_color:#002269" +gtk-color-scheme = "disabled_bg_color:#938989" +gtk-color-scheme = "disabled_fg_color:#552222" +gtk-color-scheme = "button_checked_bg_color:#b0dd7e" +gtk-color-scheme = "button_checked_fg_color:#000000" + style "default" { - xthickness = 1 - ythickness = 1 +xthickness = 1 +ythickness = 1 - ####################### - # Style Properties - ####################### - GtkButton::child-displacement-x = 1 - GtkButton::child-displacement-y = 1 - GtkButton::default-border = { 0, 0, 0, 0 } - GtkButton::image-spacing = 4 - GtkToolButton::icon-spacing = 4 +####################### +# Style Properties +####################### +GtkButton::child-displacement-x = 1 +GtkButton::child-displacement-y = 1 +GtkButton::default-border = { 0, 0, 0, 0 } +GtkButton::image-spacing = 4 +GtkToolButton::icon-spacing = 4 - GtkCheckButton::indicator-size = 14 +GtkCheckButton::indicator-size = 14 - GtkPaned::handle-size = 6 +GtkPaned::handle-size = 6 - GtkRange::trough-border = 0 - GtkRange::slider-width = 15 - GtkRange::stepper-size = 15 +GtkRange::trough-border = 0 +GtkRange::slider-width = 15 +GtkRange::stepper-size = 15 - GtkScale::slider-length = 23 - GtkScale::trough-side-details = 1 +GtkScale::slider-length = 23 +GtkScale::trough-side-details = 1 - GtkScrollbar::min-slider-length = 30 - GtkMenuBar::internal-padding = 0 - GtkExpander::expander-size = 16 - GtkToolbar::internal-padding = 1 - GtkTreeView::expander-size = 14 - GtkTreeView::vertical-separator = 0 +GtkScrollbar::min-slider-length = 30 +GtkMenuBar::internal-padding = 0 +GtkExpander::expander-size = 16 +GtkToolbar::internal-padding = 1 +GtkTreeView::expander-size = 14 +GtkTreeView::vertical-separator = 0 - GtkMenu::horizontal-padding = 0 - GtkMenu::vertical-padding = 0 +GtkMenu::horizontal-padding = 0 +GtkMenu::vertical-padding = 0 - WnckTasklist::fade-overlay-rect = 0 - # The following line hints to gecko (and possibly other appliations) - # that the entry should be drawn transparently on the canvas. - # Without this, gecko will fill in the background of the entry. - GtkEntry::honors-transparent-bg-hint = 1 +WnckTasklist::fade-overlay-rect = 0 +# The following line hints to gecko (and possibly other appliations) +# that the entry should be drawn transparently on the canvas. +# Without this, gecko will fill in the background of the entry. +GtkEntry::honors-transparent-bg-hint = 1 - GtkEntry::progress-border = { 2, 2, 2, 2 } +GtkEntry::progress-border = { 2, 2, 2, 2 } - #################### - # Color Definitions - #################### - bg[NORMAL] = @window_bg - bg[PRELIGHT] = shade (1.02, @window_bg) - bg[SELECTED] = @selected_bg_color - bg[INSENSITIVE] = @disabled_bg - bg[ACTIVE] = shade (0.9, @selected_bg_color) +#################### +# Color Definitions +#################### +bg[NORMAL] = @bg_color +bg[PRELIGHT] = shade (1.02, @bg_color) +bg[SELECTED] = @selected_bg_color +bg[INSENSITIVE] = @disabled_bg_color +bg[ACTIVE] = shade (0.9, @bg_color) - fg[NORMAL] = @fg_color - fg[PRELIGHT] = @fg_color - fg[SELECTED] = @selected_fg_color - fg[INSENSITIVE] = @disabled_fg - fg[ACTIVE] = @fg_color +fg[NORMAL] = @fg_color +fg[PRELIGHT] = @fg_color +fg[SELECTED] = @selected_fg_color +fg[INSENSITIVE] = @disabled_fg_color +fg[ACTIVE] = @fg_color - text[NORMAL] = @window_fg - text[PRELIGHT] = @window_fg - text[SELECTED] = @selected_fg_color - text[INSENSITIVE] = @disabled_fg - text[ACTIVE] = @selected_fg_color +text[NORMAL] = @text_color +text[PRELIGHT] = @text_color +text[SELECTED] = @selected_fg_color +text[INSENSITIVE] = @disabled_fg_color +text[ACTIVE] = @selected_fg_color - base[NORMAL] = @base_color - base[PRELIGHT] = shade (0.95, @window_bg) - base[SELECTED] = @selected_bg_color - base[INSENSITIVE] = @disabled_bg - base[ACTIVE] = shade (0.9, @selected_bg_color) +base[NORMAL] = @base_color +base[PRELIGHT] = shade (0.95, @bg_color) +base[SELECTED] = @selected_bg_color +base[INSENSITIVE] = @disabled_bg_color +base[ACTIVE] = shade (0.9, @selected_bg_color) - engine "clearlooks" { - colorize_scrollbar = FALSE - reliefstyle = 1 - menubarstyle = 2 - toolbarstyle = 1 - animation = FALSE - radius = 3.0 - style = GUMMY +engine "clearlooks" { +colorize_scrollbar = TRUE +reliefstyle = 1 +menubarstyle = 2 +toolbarstyle = 1 +animation = FALSE +radius = 3.0 +style = GUMMY - # Set a hint to disable backward compatibility fallbacks. - hint = "use-hints" - } +# Set a hint to disable backward compatibility fallbacks. +hint = "use-hints" +} } style "wide" { - xthickness = 2 - ythickness = 2 +xthickness = 2 +ythickness = 2 } style "wider" { - xthickness = 3 - ythickness = 3 +xthickness = 3 +ythickness = 3 } style "entry" { - xthickness = 3 - ythickness = 3 +xthickness = 3 +ythickness = 3 - bg[SELECTED] = mix (0.4, @selected_bg_color, @base_color) - fg[SELECTED] = @window_fg +bg[SELECTED] = mix (0.4, @selected_bg_color, @base_color) +fg[SELECTED] = @text_color - engine "clearlooks" { - focus_color = shade (0.65, @selected_bg_color) - } +engine "clearlooks" { +focus_color = shade (0.65, @selected_bg_color) +} } style "spinbutton" { - engine "clearlooks" { - hint = "spinbutton" - } +engine "clearlooks" { +hint = "spinbutton" +} } style "scale" { - xthickness = 2 - ythickness = 2 +xthickness = 2 +ythickness = 2 - engine "clearlooks" { - hint = "scale" - } +engine "clearlooks" { +hint = "scale" +} } style "vscale" { - engine "clearlooks" { - hint = "vscale" - } +engine "clearlooks" { +hint = "vscale" +} } style "hscale" { - engine "clearlooks" { - hint = "hscale" - } +engine "clearlooks" { +hint = "hscale" +} } style "scrollbar" { - xthickness = 2 - ythickness = 2 +xthickness = 2 +ythickness = 2 - engine "clearlooks" { - hint = "scrollbar" - } +engine "clearlooks" { +hint = "scrollbar" +} } style "hscrollbar" { - engine "clearlooks" { - hint = "hscrollbar" - } +engine "clearlooks" { +hint = "hscrollbar" +} } style "vscrollbar" { - engine "clearlooks" { - hint = "vscrollbar" - } +engine "clearlooks" { +hint = "vscrollbar" +} } style "notebook_bg" { - bg[NORMAL] = shade (1.02, @window_bg) - bg[ACTIVE] = shade (0.9, @window_bg) - fg[ACTIVE] = @window_fg +bg[NORMAL] = shade (1.02, @bg_color) } style "button" { - xthickness = 3 - ythickness = 3 +xthickness = 3 +ythickness = 3 - bg[NORMAL] = shade (1.04, @window_bg) - bg[PRELIGHT] = shade (1.06, @window_bg) - #bg[ACTIVE] = shade (0.85, @window_bg) +bg[NORMAL] = shade (1.04, @bg_color) +bg[PRELIGHT] = shade (1.06, @bg_color) +bg[ACTIVE] = @button_checked_bg_color +fg[ACTIVE] = @button_checked_fg_color } # The color is changed by the notebook_bg style, this style # changes the x/ythickness style "notebook" { - xthickness = 3 - ythickness = 3 +xthickness = 3 +ythickness = 3 } style "statusbar" { - engine "clearlooks" { - hint = "statusbar" - } +engine "clearlooks" { +hint = "statusbar" +} } style "comboboxentry" { - engine "clearlooks" { - # Note: - # If you set the appears-as-list option on comboboxes in the theme, - # then you should set this hint on the combobox instead. - hint = "comboboxentry" - } +engine "clearlooks" { +# Note: +# If you set the appears-as-list option on comboboxes in the theme, +# then you should set this hint on the combobox instead. +hint = "comboboxentry" +} } style "menubar" { - engine "clearlooks" { - hint = "menubar" - } +engine "clearlooks" { +hint = "menubar" +} } style "menu" { - xthickness = 0 - ythickness = 0 +xthickness = 0 +ythickness = 0 - bg[NORMAL] = shade (1.08, @window_bg) +bg[NORMAL] = shade (1.08, @bg_color) - engine "clearlooks" { - radius = 0.0 - } +engine "clearlooks" { +radius = 0.0 +} } style "menu_item" { - xthickness = 2 - ythickness = 3 +xthickness = 2 +ythickness = 3 - fg[PRELIGHT] = @selected_fg_color - bg[PRELIGHT] = @selected_bg_color +fg[PRELIGHT] = @selected_fg_color } # This style is there to modify the separator menu items. The goals are: # 1. Get a specific height. # 2. The line should go to the edges (ie. no border at the left/right) style "separator_menu_item" { - xthickness = 1 - ythickness = 0 +xthickness = 1 +ythickness = 0 - GtkSeparatorMenuItem::horizontal-padding = 0 - GtkWidget::wide-separators = 1 - GtkWidget::separator-width = 1 - GtkWidget::separator-height = 7 +GtkSeparatorMenuItem::horizontal-padding = 0 +GtkWidget::wide-separators = 1 +GtkWidget::separator-width = 1 +GtkWidget::separator-height = 7 } style "frame_title" { - fg[NORMAL] = lighter (@fg_color) +fg[NORMAL] = lighter (@fg_color) } style "treeview" { - engine "clearlooks" { - hint = "treeview" - } +engine "clearlooks" { +hint = "treeview" +} } # The almost useless progress bar style style "progressbar" { - xthickness = 1 - ythickness = 1 +xthickness = 1 +ythickness = 1 - fg[PRELIGHT] = @selected_fg_color - bg[PRELIGHT] = @selected_bg_color +fg[PRELIGHT] = @selected_fg_color - engine "clearlooks" { - # Explicitly set the radius for the progress bars inside menu items. - radius = 3.0 +engine "clearlooks" { +# Explicitly set the radius for the progress bars inside menu items. +radius = 3.0 - hint = "progressbar" - } +hint = "progressbar" +} } # This style is based on the default style, so that the colors from the button # style are overriden again. style "treeview_header" = "default" { - xthickness = 2 - ythickness = 1 +xthickness = 2 +ythickness = 1 - engine "clearlooks" { - hint = "treeview-header" - } +engine "clearlooks" { +hint = "treeview-header" +} } style "tooltips" { - xthickness = 4 - ythickness = 4 +xthickness = 4 +ythickness = 4 - bg[NORMAL] = @tooltip_bg_color - fg[NORMAL] = @tooltip_fg_color +bg[NORMAL] = @tooltip_bg_color +fg[NORMAL] = @tooltip_fg_color } style "nautilus_location" { - bg[NORMAL] = mix (0.60, shade (1.05, @window_bg), @selected_bg_color) +bg[NORMAL] = mix (0.60, shade (1.05, @bg_color), @selected_bg_color) } # Wrokaroudn style for places where the text color is used instead of the fg color. style "text_is_fg_color_workaround" { - text[NORMAL] = @fg_color - text[PRELIGHT] = @fg_color - text[SELECTED] = @selected_fg_color - text[ACTIVE] = @fg_color - text[INSENSITIVE] = darker (@window_bg) +text[NORMAL] = @fg_color +text[PRELIGHT] = @fg_color +text[SELECTED] = @selected_fg_color +text[ACTIVE] = @fg_color +text[INSENSITIVE] = @disabled_fg_color } # Workaround style for menus where the text color is used instead of the fg color. style "menuitem_text_is_fg_color_workaround" { - text[NORMAL] = @fg_color - text[PRELIGHT] = @selected_fg_color - text[SELECTED] = @selected_fg_color - text[ACTIVE] = @fg_color - text[INSENSITIVE] = darker (@window_bg) +text[NORMAL] = @fg_color +text[PRELIGHT] = @selected_fg_color +text[SELECTED] = @selected_fg_color +text[ACTIVE] = @fg_color +text[INSENSITIVE] = @disabled_fg_color } # Workaround style for places where the fg color is used instead of the text color. style "fg_is_text_color_workaround" { - fg[NORMAL] = @window_fg - fg[PRELIGHT] = @window_fg - fg[SELECTED] = @selected_fg_color - fg[ACTIVE] = @selected_fg_color - fg[INSENSITIVE] = darker (@window_bg) +fg[NORMAL] = @text_color +fg[PRELIGHT] = @text_color +fg[SELECTED] = @selected_fg_color +fg[ACTIVE] = @selected_fg_color +fg[INSENSITIVE] = @disabled_fg_color } # Style to set the toolbar to use a flat style. This is because the "New" button in @@ -328,9 +337,9 @@ style "fg_is_text_color_workaround" { # See http://bugzilla.gnome.org/show_bug.cgi?id=446953. style "evo_new_button_workaround" { - engine "clearlooks" { - toolbarstyle = 0 - } +engine "clearlooks" { +toolbarstyle = 0 +} } diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css index 49d1a0a..4e992c2 100644 --- a/gtk-3.0/gtk.css +++ b/gtk-3.0/gtk.css @@ -142,11 +142,11 @@ spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: inset 0 0 spinbutton.error:not(.vertical) selection, entry.error selection { background-color: #990000; } -spinbutton.warning:not(.vertical), entry.warning { color: #f57900; border-color: #f57900; } +spinbutton.warning:not(.vertical), entry.warning { color: #938989; border-color: #938989; } -spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #f57900, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #f57900; } +spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #938989, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #938989; } -spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #f57900; } +spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #938989; } spinbutton:not(.vertical) image, entry image { color: #3a3543; } @@ -221,7 +221,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #b0dd7e; } :not(:backdrop) .entry-tag.button:active { background-color: #b0dd7e; color: rgba(0, 0, 0, 0.7); } /****************************************************** Buttons * */ -@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#f57900), to(transparent)); } +@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#938989), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b0dd7e), to(transparent)); } } button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } @@ -354,7 +354,7 @@ button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):n button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#bcbeb9, 1.1); } -stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#f57900), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#938989), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -1274,7 +1274,7 @@ levelbar > trough:backdrop { color: #393543; border-color: #828282; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } +levelbar > trough > block.low { border-color: #938989; background-color: #938989; } levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #b0dd7e; background-color: #b0dd7e; } @@ -1806,7 +1806,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #828282; /* these are pretty self explicative */ -@define-color warning_color #f57900; +@define-color warning_color #938989; @define-color error_color #990000; @define-color success_color #73d216; /* diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css index 864f596..628ff80 100644 --- a/gtk-4.0/gtk.css +++ b/gtk-4.0/gtk.css @@ -170,13 +170,13 @@ spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #990000; } -spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #f57900; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #938989; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } -spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; } +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(147, 137, 137, 0.5); outline-width: 2px; outline-offset: -2px; } -spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #f57900; } +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #938989; } spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #3a3543; } @@ -220,8 +220,8 @@ treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #b editablelabel > stack > text { color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } /*********** Buttons * */ -@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); } - to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } } +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #938989 0%, rgba(147, 137, 137, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #938989 95%, rgba(147, 137, 137, 0)); } } /****************************************************** Buttons * */ scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } @@ -346,7 +346,7 @@ menubutton.circular button, button.circular { min-width: 32px; min-height: 32px; menubutton.circular button label, button.circular label { padding: 0; } -stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #f57900 96%, rgba(245, 121, 0, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #938989 96%, rgba(147, 137, 137, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -1167,7 +1167,7 @@ levelbar > trough:backdrop { color: #393543; border-color: #828282; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } +levelbar > trough > block.low { border-color: #938989; background-color: #938989; } levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #b0dd7e; background-color: #b0dd7e; } @@ -1709,7 +1709,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #828282; /* these are pretty self explicative */ -@define-color warning_color #f57900; +@define-color warning_color #938989; @define-color error_color #990000; @define-color success_color #73d216; /* diff --git a/source/common/_theme_colors.scss b/source/common/_theme_colors.scss index 0981b08..cc4c959 100644 --- a/source/common/_theme_colors.scss +++ b/source/common/_theme_colors.scss @@ -8,31 +8,30 @@ $selected_bg: #b0dd7e; $button_fg: #241f31; $button_bg: #bcbeb9; -$button_checked_bg: $selected_bg; -$button_checked_fg: $selected_fg; +$button_checked_bg: #b0dd7e; +$button_checked_fg: #000000; $disabled_fg: #552222; $disabled_bg: #938989; /*Usually an automatic fg color on these backgrounds should check this value!*/ -$warningc: #f57900; +$warningc: #938989; $errorc: #990000; $successc: #73d216; -$titlebar_active_fg: $selected_fg; -$titlebar_active_bg: $selected_bg; +$titlebar_active_fg: #000000; +$titlebar_active_bg: #b0dd7e; -$titlebar_backdrop_fg: $window_fg; -$titlebar_backdrop_bg: $window_bg; +$titlebar_backdrop_fg: #241f31; +$titlebar_backdrop_bg: #a7a7a7; $hint_fg: #002269; $hint_bg: #6789b4; -$osd_fg: $hint_fg; -$osd_bg: $hint_bg; +$osd_fg: #002269; +$osd_bg: #6789b4; $link_fg: #004B91; $link_visited_fg: #680091; - diff --git a/source/gtk3/gtk-new.css b/source/gtk3/gtk-new.css index 49d1a0a..4e992c2 100644 --- a/source/gtk3/gtk-new.css +++ b/source/gtk3/gtk-new.css @@ -142,11 +142,11 @@ spinbutton.error:focus:not(.vertical), entry.error:focus { box-shadow: inset 0 0 spinbutton.error:not(.vertical) selection, entry.error selection { background-color: #990000; } -spinbutton.warning:not(.vertical), entry.warning { color: #f57900; border-color: #f57900; } +spinbutton.warning:not(.vertical), entry.warning { color: #938989; border-color: #938989; } -spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #f57900, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #f57900; } +spinbutton.warning:focus:not(.vertical), entry.warning:focus { box-shadow: inset 0 0 0 1px #938989, inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); border-color: #938989; } -spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #f57900; } +spinbutton.warning:not(.vertical) selection, entry.warning selection { background-color: #938989; } spinbutton:not(.vertical) image, entry image { color: #3a3543; } @@ -221,7 +221,7 @@ treeview entry.flat:focus, treeview entry:focus { border-color: #b0dd7e; } :not(:backdrop) .entry-tag.button:active { background-color: #b0dd7e; color: rgba(0, 0, 0, 0.7); } /****************************************************** Buttons * */ -@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#f57900), to(transparent)); } +@keyframes needs_attention { from { background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#938989), to(transparent)); } to { background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#b0dd7e), to(transparent)); } } button.titlebutton, scrollbar slider, notebook > header > tabs > arrow, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); } @@ -354,7 +354,7 @@ button.circular:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):n button.circular:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop) { background-color: shade(#bcbeb9, 1.1); } -stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#f57900), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, .stack-switcher > button.needs-attention > label, .stack-switcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#938989), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 0.769231)), to(transparent)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > label:backdrop, .stack-switcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -1274,7 +1274,7 @@ levelbar > trough:backdrop { color: #393543; border-color: #828282; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } +levelbar > trough > block.low { border-color: #938989; background-color: #938989; } levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #b0dd7e; background-color: #b0dd7e; } @@ -1806,7 +1806,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #828282; /* these are pretty self explicative */ -@define-color warning_color #f57900; +@define-color warning_color #938989; @define-color error_color #990000; @define-color success_color #73d216; /* diff --git a/source/gtk4/gtk-new.css b/source/gtk4/gtk-new.css index 864f596..628ff80 100644 --- a/source/gtk4/gtk-new.css +++ b/source/gtk4/gtk-new.css @@ -170,13 +170,13 @@ spinbutton.vertical > text.error:focus-within, spinbutton.error:focus-within:not spinbutton.vertical > text.error > selection, spinbutton.error:not(.vertical) > selection, entry.error > selection { background-color: #990000; } -spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #f57900; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } +spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { color: #938989; transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } spinbutton.vertical > text.warning, spinbutton.warning:not(.vertical), entry.warning { outline: 0 solid transparent; outline-offset: 4px; } -spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(245, 121, 0, 0.5); outline-width: 2px; outline-offset: -2px; } +spinbutton.vertical > text.warning:focus-within, spinbutton.warning:focus-within:not(.vertical), entry.warning:focus-within { outline-color: rgba(147, 137, 137, 0.5); outline-width: 2px; outline-offset: -2px; } -spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #f57900; } +spinbutton.vertical > text.warning > selection, spinbutton.warning:not(.vertical) > selection, entry.warning > selection { background-color: #938989; } spinbutton.vertical > text > image, spinbutton:not(.vertical) > image, entry > image { color: #3a3543; } @@ -220,8 +220,8 @@ treeview entry.flat:focus-within, treeview entry:focus-within { border-color: #b editablelabel > stack > text { color: #241f31; border-color: #241f31; background-color: #908f8d; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.5); } /*********** Buttons * */ -@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #f57900 0%, rgba(245, 121, 0, 0) 0%); } - to { background-image: radial-gradient(farthest-side, #f57900 95%, rgba(245, 121, 0, 0)); } } +@keyframes needs_attention { from { background-image: radial-gradient(farthest-side, #938989 0%, rgba(147, 137, 137, 0) 0%); } + to { background-image: radial-gradient(farthest-side, #938989 95%, rgba(147, 137, 137, 0)); } } /****************************************************** Buttons * */ scrollbar > range > trough > slider, notebook > header > tabs > arrow, windowcontrols button, button { min-height: 24px; min-width: 16px; padding: 2px 6px; border: 1px solid; border-radius: 5px; transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); color: #241f31; background-color: #bcbeb9; border-color: #241f31; outline-color: rgba(176, 221, 126, 0.5); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15)); text-shadow: 0 1px rgba(255, 255, 255, 0.3); -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.3); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); transition-property: outline, outline-width, outline-offset, outline-color; transition-duration: 300ms; animation-timing-function: ease-in-out; } @@ -346,7 +346,7 @@ menubutton.circular button, button.circular { min-width: 32px; min-height: 32px; menubutton.circular button label, button.circular label { padding: 0; } -stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #f57900 96%, rgba(245, 121, 0, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } +stacksidebar row.needs-attention > label, stackswitcher > button.needs-attention > label, stackswitcher > button.needs-attention > image { animation: needs_attention 150ms ease-in; background-image: radial-gradient(farthest-side, #938989 96%, rgba(147, 137, 137, 0)); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; background-position: right 3px, right 4px; } stacksidebar row.needs-attention > label:backdrop, stackswitcher > button.needs-attention > label:backdrop, stackswitcher > button.needs-attention > image:backdrop { background-size: 6px 6px, 0 0; } @@ -1167,7 +1167,7 @@ levelbar > trough:backdrop { color: #393543; border-color: #828282; background-c levelbar > trough > block { border: 1px solid; } -levelbar > trough > block.low { border-color: #f57900; background-color: #f57900; } +levelbar > trough > block.low { border-color: #938989; background-color: #938989; } levelbar > trough > block.high, levelbar > trough > block:not(.empty) { border-color: #b0dd7e; background-color: #b0dd7e; } @@ -1709,7 +1709,7 @@ widgets main borders color on backdrop windows */ @define-color unfocused_borders #828282; /* these are pretty self explicative */ -@define-color warning_color #f57900; +@define-color warning_color #938989; @define-color error_color #990000; @define-color success_color #73d216; /* diff --git a/source/templates/_theme_colors.scss b/source/templates/_theme_colors.scss index d343240..c170a99 100644 --- a/source/templates/_theme_colors.scss +++ b/source/templates/_theme_colors.scss @@ -1,37 +1,37 @@ -'$window_fg: '$vwindow_fg; -$window_bg: $vwindow_bg; -$text_widget_fg: $vtext_widget_fg; -$text_widget_bg: $vtext_widget_bg; +$window_fg: ${vwindow_fg}; +$window_bg: ${vwindow_bg}; +$text_widget_fg: ${vtext_widget_fg}; +$text_widget_bg: ${vtext_widget_bg}; -$selected_fg: $vselected_fg; -$selected_bg: $vselected_bg; +$selected_fg: ${vselected_fg}; +$selected_bg: ${vselected_bg}; -$button_fg: $vbutton_fg; -$button_bg: $vbutton_bg; -$button_checked_bg: $vbutton_checked_bg; -$button_checked_fg: $vbutton_checked_fg; +$button_fg: ${vbutton_fg}; +$button_bg: ${vbutton_bg}; +$button_checked_bg: ${vbutton_checked_bg}; +$button_checked_fg: ${vbutton_checked_fg}; -$disabled_fg: $vdisabled_fg; -$disabled_bg: $vdisabled_bg; +$disabled_fg: ${vdisabled_fg}; +$disabled_bg: ${vdisabled_bg}; /*Usually an automatic fg color on these backgrounds should check this value!*/ -$warningc: $vdisabled_bg; -$errorc: $verrorc; -$successc: $vsuccessc; +$warningc: ${vdisabled_bg}; +$errorc: ${verrorc}; +$successc: ${vsuccessc}; -$titlebar_active_fg: $vtitlebar_active_fg; -$titlebar_active_bg: $vtitlebar_active_bg; +$titlebar_active_fg: ${vtitlebar_active_fg}; +$titlebar_active_bg: ${vtitlebar_active_bg}; -$titlebar_backdrop_fg: $vtitlebar_backdrop_fg; -$titlebar_backdrop_bg: $vtitlebar_backdrop_bg; +$titlebar_backdrop_fg: ${vtitlebar_backdrop_fg}; +$titlebar_backdrop_bg: ${vtitlebar_backdrop_bg}; -$hint_fg: $vhint_fg; -$hint_bg: $vhint_bg; +$hint_fg: ${vhint_fg}; +$hint_bg: ${vhint_bg}; -$osd_fg: $vosd_fg; -$osd_bg: $vosd_bg; +$osd_fg: ${vosd_fg}; +$osd_bg: ${vosd_bg}; -$link_fg: $vlink_fg; -$link_visited_fg: $vlink_visited_fg; +$link_fg: ${vlink_fg}; +$link_visited_fg: ${vlink_visited_fg}; diff --git a/source/templates/_theme_colors.scss.processed b/source/templates/_theme_colors.scss.processed new file mode 100644 index 0000000..cc4c959 --- /dev/null +++ b/source/templates/_theme_colors.scss.processed @@ -0,0 +1,37 @@ +$window_fg: #241f31; +$window_bg: #a7a7a7; +$text_widget_fg: #241f31; +$text_widget_bg: #908f8d; + +$selected_fg: #000000; +$selected_bg: #b0dd7e; + +$button_fg: #241f31; +$button_bg: #bcbeb9; +$button_checked_bg: #b0dd7e; +$button_checked_fg: #000000; + + +$disabled_fg: #552222; +$disabled_bg: #938989; + +/*Usually an automatic fg color on these backgrounds should check this value!*/ +$warningc: #938989; +$errorc: #990000; +$successc: #73d216; + + +$titlebar_active_fg: #000000; +$titlebar_active_bg: #b0dd7e; + +$titlebar_backdrop_fg: #241f31; +$titlebar_backdrop_bg: #a7a7a7; + +$hint_fg: #002269; +$hint_bg: #6789b4; + +$osd_fg: #002269; +$osd_bg: #6789b4; + +$link_fg: #004B91; +$link_visited_fg: #680091; diff --git a/source/templates/_theme_colors.scss.unused b/source/templates/_theme_colors.scss.unused new file mode 100644 index 0000000..8a51311 --- /dev/null +++ b/source/templates/_theme_colors.scss.unused @@ -0,0 +1,37 @@ +$window_fg: $vwindow_fg; +$window_bg: $vwindow_bg; +$text_widget_fg: $vtext_widget_fg; +$text_widget_bg: $vtext_widget_bg; + +$selected_fg: $vselected_fg; +$selected_bg: $vselected_bg; + +$button_fg: $vbutton_fg; +$button_bg: $vbutton_bg; +$button_checked_bg: $vbutton_checked_bg; +$button_checked_fg: $vbutton_checked_fg; + + +$disabled_fg: $vdisabled_fg; +$disabled_bg: $vdisabled_bg; + +/*Usually an automatic fg color on these backgrounds should check this value!*/ +$warningc: $vdisabled_bg; +$errorc: $verrorc; +$successc: $vsuccessc; + + +$titlebar_active_fg: $vtitlebar_active_fg; +$titlebar_active_bg: $vtitlebar_active_bg; + +$titlebar_backdrop_fg: $vtitlebar_backdrop_fg; +$titlebar_backdrop_bg: $vtitlebar_backdrop_bg; + +$hint_fg: $vhint_fg; +$hint_bg: $vhint_bg; + +$osd_fg: $vosd_fg; +$osd_bg: $vosd_bg; + +$link_fg: $vlink_fg; +$link_visited_fg: $vlink_visited_fg; diff --git a/source/templates/gtkrc b/source/templates/gtkrc index 6df11b2..3f1a2c8 100644 --- a/source/templates/gtkrc +++ b/source/templates/gtkrc @@ -1,7 +1,19 @@ # Please keep this gtkrc in sync with the other ones from Clearlooks based themes. -gtk-color-scheme = "base_color:#ffffff\nfg_color:#000000\ntooltip_fg_color:#000000\nselected_bg_color:#86ABD9\nselected_fg_color:#ffffff\ntext_color:#1A1A1A\nbg_color:#EDECEB\ntooltip_bg_color:#F5F5B5" +gtk-color-scheme = "bg_color:${vwindow_bg}" +gtk-color-scheme = "fg_color:${vwindow_fg}" +gtk-color-scheme = "base_color:${vtext_widget_bg}" +gtk-color-scheme = "text_color:${vtext_widget_fg}" +gtk-color-scheme = "selected_bg_color:${vselected_bg}" +gtk-color-scheme = "selected_fg_color:${vselected_fg}" +gtk-color-scheme = "tooltip_bg_color:${vhint_bg}" +gtk-color-scheme = "tooltip_fg_color:${vhint_fg}" +gtk-color-scheme = "disabled_bg_color:${vdisabled_bg}" +gtk-color-scheme = "disabled_fg_color:${vdisabled_fg}" +gtk-color-scheme = "button_checked_bg_color:${vbutton_checked_bg}" +gtk-color-scheme = "button_checked_fg_color:${vbutton_checked_fg}" + style "default" { xthickness = 1 @@ -51,25 +63,25 @@ style "default" { bg[NORMAL] = @bg_color bg[PRELIGHT] = shade (1.02, @bg_color) bg[SELECTED] = @selected_bg_color - bg[INSENSITIVE] = @bg_color + bg[INSENSITIVE] = @disabled_bg_color bg[ACTIVE] = shade (0.9, @bg_color) fg[NORMAL] = @fg_color fg[PRELIGHT] = @fg_color fg[SELECTED] = @selected_fg_color - fg[INSENSITIVE] = darker (@bg_color) + fg[INSENSITIVE] = @disabled_fg_color fg[ACTIVE] = @fg_color text[NORMAL] = @text_color text[PRELIGHT] = @text_color text[SELECTED] = @selected_fg_color - text[INSENSITIVE] = darker (@bg_color) + text[INSENSITIVE] = @disabled_fg_color text[ACTIVE] = @selected_fg_color base[NORMAL] = @base_color base[PRELIGHT] = shade (0.95, @bg_color) base[SELECTED] = @selected_bg_color - base[INSENSITIVE] = @bg_color + base[INSENSITIVE] = @disabled_bg_color base[ACTIVE] = shade (0.9, @selected_bg_color) engine "clearlooks" { @@ -172,7 +184,8 @@ style "button" { bg[NORMAL] = shade (1.04, @bg_color) bg[PRELIGHT] = shade (1.06, @bg_color) - bg[ACTIVE] = shade (0.85, @bg_color) + bg[ACTIVE] = @button_checked_bg_color + fg[ACTIVE] = @button_checked_fg_color } # The color is changed by the notebook_bg style, this style @@ -295,7 +308,7 @@ style "text_is_fg_color_workaround" { text[PRELIGHT] = @fg_color text[SELECTED] = @selected_fg_color text[ACTIVE] = @fg_color - text[INSENSITIVE] = darker (@bg_color) + text[INSENSITIVE] = @disabled_fg_color } # Workaround style for menus where the text color is used instead of the fg color. @@ -305,7 +318,7 @@ style "menuitem_text_is_fg_color_workaround" { text[PRELIGHT] = @selected_fg_color text[SELECTED] = @selected_fg_color text[ACTIVE] = @fg_color - text[INSENSITIVE] = darker (@bg_color) + text[INSENSITIVE] = @disabled_fg_color } # Workaround style for places where the fg color is used instead of the text color. @@ -315,7 +328,7 @@ style "fg_is_text_color_workaround" { fg[PRELIGHT] = @text_color fg[SELECTED] = @selected_fg_color fg[ACTIVE] = @selected_fg_color - fg[INSENSITIVE] = darker (@bg_color) + fg[INSENSITIVE] = @disabled_fg_color } # Style to set the toolbar to use a flat style. This is because the "New" button in diff --git a/source/templates/gtkrc.processed b/source/templates/gtkrc.processed new file mode 100644 index 0000000..dc0f4f3 --- /dev/null +++ b/source/templates/gtkrc.processed @@ -0,0 +1,439 @@ + +# Please keep this gtkrc in sync with the other ones from Clearlooks based themes. + +gtk-color-scheme = "bg_color:#a7a7a7" +gtk-color-scheme = "fg_color:#241f31" +gtk-color-scheme = "base_color:#908f8d" +gtk-color-scheme = "text_color:#241f31" +gtk-color-scheme = "selected_bg_color:#b0dd7e" +gtk-color-scheme = "selected_fg_color:#000000" +gtk-color-scheme = "tooltip_bg_color:#6789b4" +gtk-color-scheme = "tooltip_fg_color:#002269" +gtk-color-scheme = "disabled_bg_color:#938989" +gtk-color-scheme = "disabled_fg_color:#552222" +gtk-color-scheme = "button_checked_bg_color:#b0dd7e" +gtk-color-scheme = "button_checked_fg_color:#000000" + + +style "default" { +xthickness = 1 +ythickness = 1 + +####################### +# Style Properties +####################### +GtkButton::child-displacement-x = 1 +GtkButton::child-displacement-y = 1 +GtkButton::default-border = { 0, 0, 0, 0 } +GtkButton::image-spacing = 4 +GtkToolButton::icon-spacing = 4 + +GtkCheckButton::indicator-size = 14 + +GtkPaned::handle-size = 6 + +GtkRange::trough-border = 0 +GtkRange::slider-width = 15 +GtkRange::stepper-size = 15 + +GtkScale::slider-length = 23 +GtkScale::trough-side-details = 1 + +GtkScrollbar::min-slider-length = 30 +GtkMenuBar::internal-padding = 0 +GtkExpander::expander-size = 16 +GtkToolbar::internal-padding = 1 +GtkTreeView::expander-size = 14 +GtkTreeView::vertical-separator = 0 + +GtkMenu::horizontal-padding = 0 +GtkMenu::vertical-padding = 0 + +WnckTasklist::fade-overlay-rect = 0 +# The following line hints to gecko (and possibly other appliations) +# that the entry should be drawn transparently on the canvas. +# Without this, gecko will fill in the background of the entry. +GtkEntry::honors-transparent-bg-hint = 1 + +GtkEntry::progress-border = { 2, 2, 2, 2 } + +#################### +# Color Definitions +#################### +bg[NORMAL] = @bg_color +bg[PRELIGHT] = shade (1.02, @bg_color) +bg[SELECTED] = @selected_bg_color +bg[INSENSITIVE] = @disabled_bg_color +bg[ACTIVE] = shade (0.9, @bg_color) + +fg[NORMAL] = @fg_color +fg[PRELIGHT] = @fg_color +fg[SELECTED] = @selected_fg_color +fg[INSENSITIVE] = @disabled_fg_color +fg[ACTIVE] = @fg_color + +text[NORMAL] = @text_color +text[PRELIGHT] = @text_color +text[SELECTED] = @selected_fg_color +text[INSENSITIVE] = @disabled_fg_color +text[ACTIVE] = @selected_fg_color + +base[NORMAL] = @base_color +base[PRELIGHT] = shade (0.95, @bg_color) +base[SELECTED] = @selected_bg_color +base[INSENSITIVE] = @disabled_bg_color +base[ACTIVE] = shade (0.9, @selected_bg_color) + +engine "clearlooks" { +colorize_scrollbar = TRUE +reliefstyle = 1 +menubarstyle = 2 +toolbarstyle = 1 +animation = FALSE +radius = 3.0 +style = GUMMY + +# Set a hint to disable backward compatibility fallbacks. +hint = "use-hints" +} +} + +style "wide" { +xthickness = 2 +ythickness = 2 +} + +style "wider" { +xthickness = 3 +ythickness = 3 +} + +style "entry" { +xthickness = 3 +ythickness = 3 + +bg[SELECTED] = mix (0.4, @selected_bg_color, @base_color) +fg[SELECTED] = @text_color + +engine "clearlooks" { +focus_color = shade (0.65, @selected_bg_color) +} +} + +style "spinbutton" { + +engine "clearlooks" { +hint = "spinbutton" +} +} + +style "scale" { +xthickness = 2 +ythickness = 2 + +engine "clearlooks" { +hint = "scale" +} +} + +style "vscale" { + +engine "clearlooks" { +hint = "vscale" +} +} + +style "hscale" { + +engine "clearlooks" { +hint = "hscale" +} +} + +style "scrollbar" { +xthickness = 2 +ythickness = 2 + +engine "clearlooks" { +hint = "scrollbar" +} +} + +style "hscrollbar" { + +engine "clearlooks" { +hint = "hscrollbar" +} +} + +style "vscrollbar" { + +engine "clearlooks" { +hint = "vscrollbar" +} +} + +style "notebook_bg" { + +bg[NORMAL] = shade (1.02, @bg_color) +} + +style "button" { +xthickness = 3 +ythickness = 3 + +bg[NORMAL] = shade (1.04, @bg_color) +bg[PRELIGHT] = shade (1.06, @bg_color) +bg[ACTIVE] = @button_checked_bg_color +fg[ACTIVE] = @button_checked_fg_color +} + +# The color is changed by the notebook_bg style, this style +# changes the x/ythickness +style "notebook" { +xthickness = 3 +ythickness = 3 +} + +style "statusbar" { + +engine "clearlooks" { +hint = "statusbar" +} +} + +style "comboboxentry" { + +engine "clearlooks" { +# Note: +# If you set the appears-as-list option on comboboxes in the theme, +# then you should set this hint on the combobox instead. +hint = "comboboxentry" +} +} + +style "menubar" { + +engine "clearlooks" { +hint = "menubar" +} +} + +style "menu" { +xthickness = 0 +ythickness = 0 + +bg[NORMAL] = shade (1.08, @bg_color) + +engine "clearlooks" { +radius = 0.0 +} +} + +style "menu_item" { +xthickness = 2 +ythickness = 3 + +fg[PRELIGHT] = @selected_fg_color +} + +# This style is there to modify the separator menu items. The goals are: +# 1. Get a specific height. +# 2. The line should go to the edges (ie. no border at the left/right) +style "separator_menu_item" { +xthickness = 1 +ythickness = 0 + +GtkSeparatorMenuItem::horizontal-padding = 0 +GtkWidget::wide-separators = 1 +GtkWidget::separator-width = 1 +GtkWidget::separator-height = 7 +} + +style "frame_title" { + +fg[NORMAL] = lighter (@fg_color) +} + +style "treeview" { + +engine "clearlooks" { +hint = "treeview" +} +} + +# The almost useless progress bar style +style "progressbar" { +xthickness = 1 +ythickness = 1 + +fg[PRELIGHT] = @selected_fg_color + +engine "clearlooks" { +# Explicitly set the radius for the progress bars inside menu items. +radius = 3.0 + +hint = "progressbar" +} +} + +# This style is based on the default style, so that the colors from the button +# style are overriden again. +style "treeview_header" = "default" { +xthickness = 2 +ythickness = 1 + +engine "clearlooks" { +hint = "treeview-header" +} +} + +style "tooltips" { +xthickness = 4 +ythickness = 4 + +bg[NORMAL] = @tooltip_bg_color +fg[NORMAL] = @tooltip_fg_color +} + +style "nautilus_location" { + +bg[NORMAL] = mix (0.60, shade (1.05, @bg_color), @selected_bg_color) +} + +# Wrokaroudn style for places where the text color is used instead of the fg color. +style "text_is_fg_color_workaround" { + +text[NORMAL] = @fg_color +text[PRELIGHT] = @fg_color +text[SELECTED] = @selected_fg_color +text[ACTIVE] = @fg_color +text[INSENSITIVE] = @disabled_fg_color +} + +# Workaround style for menus where the text color is used instead of the fg color. +style "menuitem_text_is_fg_color_workaround" { + +text[NORMAL] = @fg_color +text[PRELIGHT] = @selected_fg_color +text[SELECTED] = @selected_fg_color +text[ACTIVE] = @fg_color +text[INSENSITIVE] = @disabled_fg_color +} + +# Workaround style for places where the fg color is used instead of the text color. +style "fg_is_text_color_workaround" { + +fg[NORMAL] = @text_color +fg[PRELIGHT] = @text_color +fg[SELECTED] = @selected_fg_color +fg[ACTIVE] = @selected_fg_color +fg[INSENSITIVE] = @disabled_fg_color +} + +# Style to set the toolbar to use a flat style. This is because the "New" button in +# Evolution is not drawn transparent. So if there is a gradient in the background it will +# look really wrong. +# See http://bugzilla.gnome.org/show_bug.cgi?id=446953. +style "evo_new_button_workaround" { + +engine "clearlooks" { +toolbarstyle = 0 +} +} + + +############################################################################### +# The following part of the gtkrc applies the different styles to the widgets. +############################################################################### + +# The default style is applied to every widget +class "GtkWidget" style "default" + +class "GtkSeparator" style "wide" +class "GtkFrame" style "wide" +class "GtkCalendar" style "wide" +class "GtkEntry" style "entry" + +class "GtkSpinButton" style "spinbutton" +class "GtkScale" style "scale" +class "GtkVScale" style "vscale" +class "GtkHScale" style "hscale" +class "GtkScrollbar" style "scrollbar" +class "GtkHScrollbar" style "hscrollbar" +class "GtkVScrollbar" style "vscrollbar" + +# General matching follows. The order is choosen so that the right styles override +# each other. EG. progressbar needs to be more important than the menu match. +widget_class "*" style "notebook_bg" +# This is not perfect, it could be done better. +# (That is modify *every* widget in the notebook, and change those back that +# we really don't want changed) +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" +widget_class "**" style "notebook_bg" + +widget_class "*" style "button" +widget_class "*" style "notebook" +widget_class "**" style "statusbar" + +widget_class "**" style "comboboxentry" +widget_class "**" style "comboboxentry" + +widget_class "**" style "menubar" +widget_class "**" style "menu" +widget_class "**" style "menu_item" +widget_class "**" style "separator_menu_item" + +widget_class "*.." style "frame_title" +widget_class "*.*" style "treeview" + +widget_class "*" style "progressbar" + +# Treeview headers (and similar stock GTK+ widgets) +widget_class "*.." style "treeview_header" +widget_class "*.." style "treeview_header" +widget_class "*.." style "treeview_header" +widget_class "*.." style "treeview_header" + +# The window of the tooltip is called "gtk-tooltip" +################################################################## +# FIXME: +# This will not work if one embeds eg. a button into the tooltip. +# As far as I can tell right now we will need to rework the theme +# quite a bit to get this working correctly. +# (It will involve setting different priorities, etc.) +################################################################## +widget "gtk-tooltip*" style "tooltips" + +########################################################################## +# Following are special cases and workarounds for issues in applications. +########################################################################## + +# Workaround for the evolution ETable (bug #527532) +widget_class "*.." style "treeview_header" +# Workaround for the evolution ETree +widget_class "*.." style "treeview_header" + +# Special case the nautilus-extra-view-widget +# ToDo: A more generic approach for all applications that have a widget like this. +widget "*.nautilus-extra-view-widget" style : highest "nautilus_location" + +# Work around for http://bugzilla.gnome.org/show_bug.cgi?id=382646 +# Note that this work around assumes that the combobox is _not_ in appears-as-list mode. +widget_class "*.." style "text_is_fg_color_workaround" +# This is the part of the workaround that fixes the menus +widget "*.gtk-combobox-popup-menu.*" style "menuitem_text_is_fg_color_workaround" + +# Work around the usage of GtkLabel inside GtkListItems to display text. +# This breaks because the label is shown on a background that is based on the base color. +widget_class "**" style "fg_is_text_color_workaround" +# GtkCList also uses the fg color to draw text on top of the base colors. +widget_class "*" style "fg_is_text_color_workaround" +# Nautilus when renaming files, and maybe other places. +widget_class "*" style "fg_is_text_color_workaround" + +# See the documentation of the style. +widget_class "EShellWindow.GtkVBox.BonoboDock.BonoboDockBand.BonoboDockItem*" style "evo_new_button_workaround" diff --git a/source/templates/process_variables.sh b/source/templates/process_variables.sh index 5e13e6b..dfa6a92 100755 --- a/source/templates/process_variables.sh +++ b/source/templates/process_variables.sh @@ -2,4 +2,23 @@ source variables.sh -envsubst <_theme_colors.scss >theme_colors_.scss.processed \ No newline at end of file +# envsubst <_theme_colors.scss >theme_colors_.scss.processed # not working! + +echo "Variables read; parsing files..." + +for FILE in "_theme_colors.scss" "gtkrc" ; do + echo " processing $FILE..." + while read -r line ; do + while [[ "$line" =~ (\$\{[a-zA-Z_][a-zA-Z_0-9]*\}) ]] ; do + LHS=${BASH_REMATCH[1]} + RHS="$(eval echo "\"$LHS\"")" + line=${line//$LHS/$RHS} + done + echo "$line" + done < "$FILE" > "$FILE.processed" +done + +echo "Done; copying processed files" + +cp _theme_colors.scss.processed ../common/_theme_colors.scss +cp gtkrc.processed ../../gtk-2.0/gtkrc diff --git a/source/templates/theme_colors_.scss.processed b/source/templates/theme_colors_.scss.processed index cb51366..cc4c959 100644 --- a/source/templates/theme_colors_.scss.processed +++ b/source/templates/theme_colors_.scss.processed @@ -1,37 +1,37 @@ -': '#241f31; -: #a7a7a7; -: #241f31; -: #908f8d; +$window_fg: #241f31; +$window_bg: #a7a7a7; +$text_widget_fg: #241f31; +$text_widget_bg: #908f8d; -: #000000; -: #b0dd7e; +$selected_fg: #000000; +$selected_bg: #b0dd7e; -: #241f31; -: #bcbeb9; -: #b0dd7e; -: #000000; +$button_fg: #241f31; +$button_bg: #bcbeb9; +$button_checked_bg: #b0dd7e; +$button_checked_fg: #000000; -: #552222; -: #938989; +$disabled_fg: #552222; +$disabled_bg: #938989; /*Usually an automatic fg color on these backgrounds should check this value!*/ -: #938989; -: #990000; -: #73d216; +$warningc: #938989; +$errorc: #990000; +$successc: #73d216; -: #000000; -: #b0dd7e; +$titlebar_active_fg: #000000; +$titlebar_active_bg: #b0dd7e; -: #241f31; -: #a7a7a7; +$titlebar_backdrop_fg: #241f31; +$titlebar_backdrop_bg: #a7a7a7; -: #002269; -: #6789b4; +$hint_fg: #002269; +$hint_bg: #6789b4; -: ; -: ; +$osd_fg: #002269; +$osd_bg: #6789b4; -: #004B91; -: #680091; +$link_fg: #004B91; +$link_visited_fg: #680091; diff --git a/source/templates/variables.sh b/source/templates/variables.sh index 68774ac..1d8973b 100755 --- a/source/templates/variables.sh +++ b/source/templates/variables.sh @@ -1,6 +1,13 @@ #! /bin/bash -# Gray light green scheme +# This file contains a color scheme for Skewaita +# To use it, follow these steps: +# 1. execute process_variables +# (this processes templates to create somw files, which are then copyied to their respective source directory) +# 2. go up one directory, to source, and execute "./compile.sh light" or "./compile.sh dark" depending on whether the theme is light or dark + + +# Original Skweaita: light, with grayish tones and light green accents, VERY easy on the eyes vwindow_fg="#241f31" vwindow_bg="#a7a7a7" @@ -35,12 +42,12 @@ vtitlebar_backdrop_bg=$vwindow_bg vhint_fg="#002269" vhint_bg="#6789b4" -vosd_fg=$hint_fg -vosd_bg=$hint_bg +vosd_fg=$vhint_fg +vosd_bg=$vhint_bg vlink_fg="#004B91" vlink_visited_fg="#680091" -export vwindow_fg vwindow_bg vtext_widget_fg vtext_widget_bg vselected_fg vselected_bg vbutton_fg vbutton_bg vbutton_checked_bg vbutton_checked_fg vdisabled_fg vdisabled_bg vwarningc verrorc vsuccessc vtitlebar_active_fg vtitlebar_active_bg vtitlebar_backdrop_fg vtitlebar_backdrop_bg vhint_fg vhint_bg vosd_fg vosd_bg vlink_fg vlink_visited_fg +# export vwindow_fg vwindow_bg vtext_widget_fg vtext_widget_bg vselected_fg vselected_bg vbutton_fg vbutton_bg vbutton_checked_bg vbutton_checked_fg vdisabled_fg vdisabled_bg vwarningc verrorc vsuccessc vtitlebar_active_fg vtitlebar_active_bg vtitlebar_backdrop_fg vtitlebar_backdrop_bg vhint_fg vhint_bg vosd_fg vosd_bg vlink_fg vlink_visited_fg