Skip to content
GitLab
Commit f8f40071 authored by Jan Blackquill's avatar Jan Blackquill 🌈
Browse files

Breeze for GTK4

parent 4af053d5
Hide whitespace changes
Inline Side-by-side
src/build_theme.sh
View file @ f8f40071
......@@ -3,7 +3,7 @@ set -e
# Usage: create_folders <target-directory>
create_folders () {
for j in gtk-2.0 gtk-3.0; do
for j in gtk-2.0 gtk-3.0 gtk-4.0; do
if ! [ -d "$1/$j" ]; then
mkdir -p "$1/$j"
fi
......@@ -28,7 +28,7 @@ install_theme () {
fi
echo "Installing into ${THEME_INSTALL_TARGET}"
mkdir -p "${THEME_INSTALL_TARGET}"
for dir in assets gtk-2.0 gtk-3.0; do
for dir in assets gtk-2.0 gtk-3.0 gtk-4.0; do
if [ -d "${THEME_INSTALL_TARGET}/$dir" ]; then
rm -rf "${THEME_INSTALL_TARGET:?}/$dir"
fi
......@@ -45,6 +45,7 @@ render_theme () {
python3 render_assets.py -c "$1" -a "${THEME_BUILD_DIR}/assets" \
-g "${THEME_BUILD_DIR}/gtk-2.0" -G "${THEME_BUILD_DIR}" -b "$4"
build_sass gtk3/gtk.scss "${THEME_BUILD_DIR}/gtk-3.0/gtk.css" "${THEME_BUILD_DIR}"
build_sass gtk4/gtk.scss "${THEME_BUILD_DIR}/gtk-4.0/gtk.css" "${THEME_BUILD_DIR}"
rm -f "${THEME_BUILD_DIR}/_global.scss"
install_theme "${THEME_BUILD_DIR}" "$2" "$3"
}
......
src/gtk4/gtk.scss 0 → 100644
View file @ f8f40071
@charset "UTF-8";
$new-highlight: false;
@import 'global';
@import '../functions';
@import '../colors';
@import "widgets/base";
@import "widgets/button";
@import "widgets/entry";
@import "widgets/app_notifications";
@import "widgets/calendar";
@import "widgets/checkboxes";
@import "widgets/color_chooser";
@import "widgets/dialogs";
@import "widgets/headerbar";
@import "widgets/infobar";
@import "widgets/link";
@import "widgets/lists";
@import "widgets/menus";
@import "widgets/misc";
@import "widgets/notebook";
@import "widgets/overshoot";
@import "widgets/pathbar";
@import "widgets/progressbar";
@import "widgets/scale";
@import "widgets/scrollbar";
@import "widgets/sidebar";
@import "widgets/spinbutton";
@import "widgets/switch";
@import "widgets/toolbar";
@import "widgets/tooltips";
@import "widgets/treeview";
@import "widgets/window_decorations";
@import "widgets/libhandy";
@import "widgets/assistant";
@import "widgets/floating-bar";
@import "widgets/typography";
src/gtk4/widgets/_app_notifications.scss 0 → 100644
View file @ f8f40071
@charset "UTF-8";
/*********************
* App Notifications *
*********************/
.app-notification,
.app-notification.frame {
@extend %osd;
padding: 10px;
border-top-width: 0px;
border-radius: 0px 0px 3px 3px;
&:backdrop { background-image: none; }
button {
@include button(normal);
&.flat {
@extend %undecorated_button;
-gtk-icon-shadow: none;
text-shadow: none;
&:hover {
@extend %undecorated_button;
color: gtk("@theme_button_decoration_hover");
}
&:active {
@extend %undecorated_button;
color: gtk("@theme_button_decoration_focus");
}
&:backdrop,
&:disabled,
&:backdrop:disabled { @extend %undecorated_button; }
}
&:hover { @include button(hover); }
&:active,
&:checked,
&:backdrop:active,
&:backdrop:checked {
@include button(active);
}
&:disabled,
&:backdrop:disabled{
@include button(insensitive);
}
&:backdrop { @include button(backdrop); }
}
border {border: none;}
}
\ No newline at end of file
src/gtk4/widgets/_assistant.scss 0 → 100644
View file @ f8f40071
assistant {
.sidebar {
background-color: gtk("@theme_base_color");
color: gtk("@theme_text_color");
border-top: 1px solid gtk("@borders");
border-right: 1px solid gtk("@borders");
&:backdrop {
background-color: gtk("@theme_unfocused_base_color");
color: gtk("@theme_unfocused_text_color");
border-color: gtk("@unfocused_borders");
}
}
&.csd .sidebar {
border-top-style: none;
}
.sidebar label {
padding: 6px 12px;
}
.sidebar label.highlight {
background-color: gtk("@theme_selected_bg_color");
color: gtk("@theme_fg_color");
}
}
src/gtk4/widgets/_base.scss 0 → 100644
View file @ f8f40071
@charset "UTF-8";
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
* {
padding: 0;
outline-width: 0px;
}
/***************
* Base States *
***************/
.background {
color: gtk("@theme_fg_color");
background-color: gtk("@theme_bg_color");
&:backdrop {
text-shadow: none;
-gtk-icon-shadow: none;
color: gtk("@theme_unfocused_fg_color");
background-color: gtk("@theme_unfocused_bg_color");
}
}
/*
These wildcard seems unavoidable, need to investigate.
Wildcards are bad and troublesome, use them with care,
or better, just don't.
Everytime a wildcard is used a kitten dies, painfully.
*/
.gtkstyle-fallback {
background-color: gtk("@theme_bg_color");
color: gtk("@theme_fg_color");
&:hover {
background-color: gtkshade("@theme_bg_color", 1.1);
color: gtk("@theme_fg_color");
}
&:active {
background-color: gtkshade("@theme_bg_color", 0.9);
color: gtk("@theme_fg_color");
}
&:disabled {
background-color: gtk("@insensitive_fg_color");
color: gtk("@insensitive_fg_color");
}
&:selected {
background-color: gtk("@theme_selected_bg_color");
color: gtk("@theme_selected_fg_color");
}
}
%view,
.view {
color: gtk("@theme_text_color");
background-color: gtk("@theme_base_color");
&:backdrop {
color: gtk("@theme_unfocused_text_color");
background-color: gtk("@theme_unfocused_base_color");
}
&:disabled {
color: gtk("@insensitive_base_fg_color");
}
&:selected {
&:focus, & {
border-radius: $r;
@extend %selected_items;
}
}
}
.view,
textview {
text {
@extend %view;
selection { &:focus, & { @extend %selected_items; }}
}
}
textview border {
background-color: gtk("@theme_base_color");
background-image: image(gtk("@borders")); // HACK: the border node just draws background so,
background-repeat: no-repeat; // using a background-image to draw the border
&:backdrop {
background-color: gtk("@theme_unfocused_base_color");
}
&.bottom {
background-size: 100% 1px;
background-position: top;
}
&.top {
background-size: 100% 1px;
background-position: bottom;
}
&.left {
background-size: 1px 100%;
background-position: right;
}
&.right {
background-size: 1px 100%;
background-position: left;
}
}
.rubberband,
rubberband {
border: 1px solid gtk("@theme_selected_bg_color");
background-color: gtkalpha(gtk("@theme_selected_bg_color"), 0.8);
&:backdrop {
border-color: gtk("@theme_unfocused_selected_bg_color");
background-color: gtkalpha(gtk("@theme_unfocused_selected_bg_color"), 0.8);
}
}
flowbox {
rubberband { @extend rubberband; }
flowboxchild {
padding: 3px;
border-radius: $r;
&:selected {
@extend %selected_items;
outline-offset: 0px;
}
}
}
label {
&.separator {
color: gtk("@theme_fg_color");
@extend .dim-label;
&:backdrop {
color: gtk("@theme_unfocused_fg_color");
}
}
selection {
background-color: gtk("@theme_selected_bg_color");
color: gtk("@theme_selected_fg_color");
}
&:disabled {
color: gtk("@insensitive_fg_color");
selection { @extend %selected_items:disabled; }
&:backdrop {
color: gtk("@insensitive_unfocused_fg_color")
}
}
&:backdrop {
color: gtk("@theme_unfocused_text_color");
selction {@extend %selected_items:backdrop;}
}
}
.dim-label {
opacity: 0.5;
text-shadow: none;
}
%osd,
.osd {
color: gtk("@theme_fg_color");
border: 1px solid gtk("@borders");
background-color: gtkalpha(gtk("@theme_bg_color"),0.8);
background-clip: padding-box;
box-shadow: none;
text-shadow: none;
-gtk-icon-shadow: none;
&:backdrop {
color: gtk("@theme_unfocused_text_color");
background-color: gtkalpha(gtk("@theme_unfocused_bg_color"), 0.8);
-gtk-icon-shadow: none;
}
}
%selected_items {
background-color: gtk("@theme_selected_bg_color");
color: gtk("@theme_selected_fg_color");
&:hover {
background-color: gtk("@theme_hovering_selected_bg_color");
color: gtk("@theme_fg_color");
}
&:backdrop {
background-color: gtk("@theme_unfocused_selected_bg_color");
color: gtk("@theme_unfocused_base_color");
}
}
%selected_items {
background-color: gtk("@theme_selected_bg_color");
border-radius: 0px;
@at-root %nobg_selected_items, & {
color: gtk("@theme_selected_fg_color");
&:disabled {
color: gtk("@insensitive_selected_fg_color");
}
&:backdrop {
color: gtk("@theme_unfocused_selected_fg_color");
&:disabled {
color: gtk("@insensitive_unfocused_selected_fg_color");
}
}
}
}
src/gtk4/widgets/_button.scss 0 → 100644
View file @ f8f40071
@charset "UTF-8";
// buttons
@mixin button($t) {
// $c:gtk("@theme_button_background_normal"), $tc:gtk("@theme_button_foreground_normal")
//
// Button drawing function
//
// $t: button type,
// $c: base button color for colored* types
// $tc: optional text color for colored* types
// $edge: set to none to not draw the bottom edge or specify a color to not
// use the default one
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
@if $t==normal {
//
// normal button
//
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
text-shadow: none;
-gtk-icon-shadow: none;
color: gtk("@theme_button_foreground_normal");
border-color: gtk("@borders");
background-color: gtk("@theme_button_background_normal");
}
@else if $t==hover {
//
// hovered button
//
color: gtk("@theme_button_foreground_normal");
border-color: gtk("@theme_button_decoration_hover");
}
@else if $t==active {
//
// pushed button
//
color: gtk("@theme_button_foreground_active");
border-color: gtk("@theme_button_decoration_focus");
background-color: gtk("@theme_button_decoration_focus");
}
@else if $t==active-hover {
//
//
//
color: gtk("@theme_button_foreground_normal");
border-color: gtk("@theme_button_decoration_hover");
background-color: gtk("@theme_button_decoration_hover");
}
@else if $t==insensitive {
//
// insensitive button
//
color: gtk("@theme_button_foreground_insensitive");
border-color: gtk("@insensitive_borders");
background-color: gtk("@theme_button_background_insensitive");
> .label { color: inherit; }
}
@else if $t==insensitive-active {
//
// insensitive pushed button
//
color: gtk("@theme_button_foreground_active_insensitive");
border-color: gtk("@theme_button_decoration_focus_insensitive");
background-color: gtk("@theme_button_decoration_focus_insensitive");
> .label { color: inherit; }
}
@else if $t==backdrop {
//
// backdrop button
//
color: gtk("@theme_button_foreground_backdrop");
border-color: gtk("@unfocused_borders");
background-color: gtk("@theme_button_background_backdrop");
}
@else if $t==backdrop-hover {
//
// backdrop hover button
//
color: gtk("@theme_button_foreground_backdrop");
border-color: gtk("@theme_button_decoration_hover");
background-color: gtk("@theme_button_background_backdrop");
}
@else if $t==backdrop-active {
//
// backdrop pushed button
//
color: gtk("@theme_button_foreground_active_backdrop");
border-color: gtk("@theme_button_decoration_focus_backdrop");
background-color: gtk("@theme_button_decoration_focus_backdrop");
}
@else if $t==backdrop-insensitive {
//
// backdrop insensitive button
//
color: gtk("@theme_button_foreground_backdrop_insensitive");
border-color: gtk("@unfocused_insensitive_borders");
background-color: gtk("@theme_button_background_backdrop_insensitive");
> .label { color: inherit; }
}
@else if $t==backdrop-insensitive-active {
//
// backdrop insensitive pushed button
//
color: gtk("@theme_button_foreground_active_backdrop_insensitive");
border-color: gtk("@theme_button_decoration_focus_backdrop_insensitive");
background-color: gtk("@theme_button_decoration_focus_backdrop_insensitive");
> .label { color: inherit; }
}
@else if $t==undecorated {
//
// reset
//
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow:none;
color: gtk("@theme_button_foreground_normal");
text-shadow: none;
-gtk-icon-shadow: none;
}
}
/***********
* Buttons *
***********/
// stuff for .needs-attention
$_dot_color: gtk("@theme_button_decoration_focus");
@keyframes needs_attention {
from {
background-image: radial-gradient(circle, $_dot_color 0%, transparent 5px);
}
to {
background-image: radial-gradient(circle, gtk("@theme_selected_bg_color") 0%, transparent 6px);
}
}
%buttons {
$_button_transition: all 200ms $ease-out-quad;
border: 1px solid;
border-radius: $r;
padding: 6px 6px;
background-clip: border-box;
transition: $_button_transition;
@include button(normal);
&.flat {
@include button(undecorated);
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
// in this case the duration is increased.
transition: none;
&:hover {
transition: $_button_transition;
transition-duration: 500ms;
&:active, &:focus { transition: $_button_transition; }
}
&:checked { background-color: gtk("@borders");}
}
&:hover {
@include button(hover);
}
&:active {
transform: translate(1px, 1px);
}
&:active, &:checked, &:focus {
@include button(active);
transition-duration: 50ms;
&:hover {
@include button(active-hover);
}
}
&:backdrop {
@include button(backdrop);
&:hover {
@include button(backdrop-hover);
}
&:active, &:checked, &:focus {
@include button(backdrop-active);
}
&:disabled {
@include button(backdrop-insensitive);
}
&:disabled:active, &:disabled:checked, &:disabled:focus {
@include button(backdrop-insensitive-active);
}
}
&.flat:backdrop {
@include button(undecorated);
color: gtk("@theme_button_foreground_backdrop");
}
&.flat:disabled {
@include button(undecorated);
color: gtk("@theme_button_foreground_insensitive");
}
&.flat:backdrop:disabled {
@include button(undecorated);
color: gtk("@theme_button_foreground_backdrop_insensitive");
}
&:disabled {
@include button(insensitive);
&:active, &:checked, &:focus {
@include button(insensitive-active);
}
}
separator {
background-color: transparent;
background-image: none;
color: transparent;
}
}
%button,
button {
@at-root %button_basic, & {
@extend %buttons;
&.osd {
@extend %buttons;
}
//overlay / OSD style
.osd & {
//@extend %buttons;
}
&.image-button {
min-width:16px;
padding: 6px;
}
&.text-button {
padding-left: 6px;
padding-right: 6px;
}
&.text-button.image-button {