Enhancement: Fixes #40, Review Adwaita - possibly refactor and base themes from there?

themes/adwaita-refactored/colors-public/_all.scss

@@ -0,0 +1,5 @@
+@import "base";
+@import "borders";
+@import "statuses";
+@import "wm";
+@import "view"

themes/adwaita-refactored/colors-public/base.scss

@@ -0,0 +1,83 @@
+//
+// Base color exports
+//
+
+//
+// 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};
+
+//
+// Insensitive color on backdrop windows
+//
+@define-color unfocused_insensitive_color #{"" + $backdrop_insensitive_color};

themes/adwaita-refactored/colors-public/borders.scss

@@ -0,0 +1,13 @@
+//
+// Border color exports
+//
+
+//
+// Widgets main borders color
+//
+@define-color borders #{"" + $borders_color};
+
+//
+// Widgets main borders color on backdrop windows
+//
+@define-color unfocused_borders #{"" + $backdrop_borders_color};

themes/adwaita-refactored/colors-public/statuses.scss

@@ -0,0 +1,8 @@
+//
+// Status color exports
+//
+
+@define-color warning_color #{"" + $warning_color};
+@define-color error_color   #{"" + $error_color};
+@define-color success_color #{"" + $success_color};
+// @define-color destructive_color #{$destructive_color}

themes/adwaita-refactored/colors-public/view.scss

@@ -0,0 +1,10 @@
+//
+// View color exports
+//
+
+// Content view background such as thumbnails view in Photos or Boxes
+@define-color content_view_bg #{"" + $base_color};
+
+// Very contrasty background for text views (@theme_text_color foreground)
+//
+@define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color,6%))};

themes/adwaita-refactored/colors-public/wm.scss

@@ -0,0 +1,27 @@
+//
+// Window manager color exports
+//
+
+// SASS gets mad if this is done directly in the color definition
+//
+$_wm_highlight: if($variant == 'light', $top_hilight, transparentize(#000000, 1.0));
+
+// 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           shade(#{$fg_color}, 1.8);
+@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 shade(#{$bg_color}, 1.2);
+@define-color wm_bg_b #{$bg_color};
+
+@define-color wm_shadow alpha(#000000, 0.35);
+@define-color wm_border alpha(#000000, 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);

themes/adwaita-refactored/colors/_all.scss

@@ -0,0 +1,18 @@
+@import "base";
+@import "selected-text";
+@import "borders";
+@import "links";
+@import "misc";
+@import "headerbar";
+@import "menu";
+@import "popover";
+@import "scrollbar";
+@import "statuses";
+@import "osd";
+@import "sidebar";
+@import "tooltip";
+@import "insensitive";
+@import "backdrop";
+@import "suggested";
+@import "progressbar";
+@import "checkradio";

themes/adwaita-refactored/colors/backdrop.scss

@@ -0,0 +1,18 @@
+//
+// Backdrop-state colour definitions
+//
+$backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));
+$backdrop_text_color: mix($text_color, $backdrop_base_color, 80%);
+$backdrop_bg_color:   $bg_color;
+$backdrop_fg_color:   mix($fg_color, $backdrop_bg_color, 50%);
+
+$backdrop_insensitive_color: if($variant == 'light', darken($backdrop_bg_color, 15%), lighten($backdrop_bg_color, 15%));
+$backdrop_selected_fg_color: if($variant == 'light', $backdrop_base_color, $backdrop_text_color);
+$backdrop_borders_color:     mix($borders_color,          $bg_color,            80%);
+$backdrop_dark_fill:         mix($backdrop_borders_color, $backdrop_bg_color,   35%);
+$backdrop_sidebar_bg_color:  mix($backdrop_bg_color,      $backdrop_base_color, 50%);
+
+$backdrop_scrollbar_bg_color:     darken($backdrop_bg_color, 3%);
+$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
+
+$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));

themes/adwaita-refactored/colors/base.scss

@@ -0,0 +1,11 @@
+//
+// The most basic colour definitions for all widgets
+//
+$base_color: if($variant == 'light', #FFFFFF, lighten(desaturate(#241f31, 100%), 2%));
+$text_color: if($variant == 'light', #000000, #FFFFFF);
+$bg_color:   if($variant == 'light', #F6F5F4, darken(desaturate(#3D3846, 100%),  4%));
+$fg_color:   if($variant == 'light', #2E3436, #EEEEEC);
+
+$base_hover_color:  transparentize($fg_color, 0.95);
+$drop_target_color: #4E9A06;
+$shadow_color:      transparentize(#000000,   0.9);

themes/adwaita-refactored/colors/borders.scss

@@ -0,0 +1,7 @@
+//
+// Colour definitions for borders
+//
+$selected_borders_color: if($variant == 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
+$borders_color:          if($variant == 'light', darken($bg_color,          18%), darken($bg_color,          10%));
+$alt_borders_color:      if($variant == 'light', darken($bg_color,          24%), darken($bg_color,          18%));
+$borders_edge:           if($variant == 'light', transparentize(#FFFFFF, 0.2),    transparentize($fg_color, 0.93));

themes/adwaita-refactored/colors/checkradio.scss

@@ -0,0 +1,6 @@
+//
+// Check box/radio button widget colour definitions
+//
+$checkradio_bg_color:      if($variant == 'light', $selected_bg_color, lighten($selected_bg_color, 10%));
+$checkradio_fg_color:      $selected_fg_color;
+$checkradio_borders_color: if($variant == 'light', darken($checkradio_bg_color, 20%), darken($checkradio_bg_color, 40%));

themes/adwaita-refactored/colors/headerbar.scss

@@ -0,0 +1,4 @@
+//
+// GtkHeaderBar colour definitions
+//
+$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken(bg_color, 3%));

themes/adwaita-refactored/colors/insensitive.scss

@@ -0,0 +1,6 @@
+//
+// Insensitive-state colour definitions
+//
+$insensitive_fg_color: mix($fg_color, $bg_color,   50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: $borders_color;

themes/adwaita-refactored/colors/links.scss

@@ -0,0 +1,5 @@
+//
+// Colour definitions for links
+//
+$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%));

themes/adwaita-refactored/colors/menu.scss

@@ -0,0 +1,4 @@
+//
+// Menu colour definitions
+//
+$menu_color: if($variant == 'light', $base_color, mix($bg_color, $base_color, 20%));

themes/adwaita-refactored/colors/misc.scss

@@ -0,0 +1,5 @@
+//
+// Some misc. colour definitions that I have not categorised
+//
+$top_hilight: $borders_edge;
+$dark_fill: mix($borders_color, $bg_color, 50%);

themes/adwaita-refactored/colors/osd.scss

@@ -0,0 +1,9 @@
+//
+// On screen display popups colour definitions
+//
+$osd_fg_color:   #F57900;
+$osd_text_color: #FFFFFF;
+$osd_bg_color: if($variant == 'light', transparentize(darken(desaturate(#3D3846, 100%), 4%), 0.1), transparentize(darken(desaturate(#3D3846, 100%), 10%), 0.1));
+$osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
+$osd_insensitive_fg_color: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%);
+$osd_borders_color: transparentize(#000000, 0.3);

themes/adwaita-refactored/colors/popover.scss

@@ -0,0 +1,5 @@
+//
+// Popover colour definitions
+//
+$popover_bg_color:    $bg_color;
+$popover_hover_color: lighten($bg_color, 5%);

themes/adwaita-refactored/colors/progressbar.scss

@@ -0,0 +1,5 @@
+//
+// Progress bar widget colour definitions
+//
+$progress_bg_color:     $selected_bg_color;
+$progress_border_color: $selected_borders_color;

themes/adwaita-refactored/colors/scrollbar.scss

@@ -0,0 +1,7 @@
+//
+// Scrollbar colour definitions
+//
+$scrollbar_bg_color:            if($variant == 'light', mix($bg_color, $fg_color, 80%),  mix($base_color, $fg_color, 50%));
+$scrollbar_slider_active_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
+$scrollbar_slider_color:        mix($fg_color, $bg_color, 60%);
+$scrollbar_slider_hover_color:  mix($fg_color, $bg_color, 80%);

themes/adwaita-refactored/colors/selected-text.scss

@@ -0,0 +1,5 @@
+//
+// Colour definitions for highlighted text
+//
+$selected_fg_color: #FFFFFF;
+$selected_bg_color: if($variant == 'light', #3584E4, darken(#3584E4, 20%));

themes/adwaita-refactored/colors/sidebar.scss

@@ -0,0 +1,4 @@
+//
+// Sidebar colour definitions
+//
+$sidebar_bg_color: mix($bg_color, $base_color, 50%);

themes/adwaita-refactored/colors/statuses.scss

@@ -0,0 +1,7 @@
+//
+// Status context colour definitions
+//
+$warning_color:     #F57900;
+$error_color:       #CC0000;
+$success_color:     if($variant == 'light', #33D17A, darken(#33D17A, 10%));
+$destructive_color: if($variant == 'light', #E01B24, darken(#E01B24, 10%));

themes/adwaita-refactored/colors/suggested.scss

@@ -0,0 +1,5 @@
+//
+// 'Suggested' context colour definitions
+//
+$suggested_bg_color:     $selected_bg_color;
+$suggested_border_color: $selected_borders_color;

themes/adwaita-refactored/colors/tooltip.scss

@@ -0,0 +1,4 @@
+//
+// Tooltip colour definitions
+//
+$tooltip_borders_color: transparentize(#FFFFFF, 0.9);

themes/adwaita-refactored/common/_all.scss

@@ -0,0 +1,44 @@
+@import "gtkalpha";
+@import "constants";
+@import "sizing";
+@import "widget";
+@import "basic";
+@import "spinner";
+@import "typography";
+@import "entry";
+@import "button";
+@import "link";
+@import "spinbutton";
+@import "combobox";
+@import "toolbar";
+@import "headerbar";
+@import "pathbar";
+@import "treeview";
+@import "menu";
+@import "popover";
+@import "notebook";
+@import "scrollbar";
+@import "switch";
+@import "checkradio";
+@import "scale";
+@import "progressbar";
+@import "levelbar";
+@import "printdialog";
+@import "frame";
+@import "list";
+@import "notification";
+@import "expander";
+@import "calendar";
+@import "messagedialog";
+@import "filechooserdialog";
+@import "sidebar";
+@import "places";
+@import "paned";
+@import "infobar";
+@import "tooltip";
+@import "colorswatch";
+@import "misc";
+@import "decorations";
+@import "touchcp";
+@import "icons";
+@import "emoji";

themes/adwaita-refactored/common/basic.scss

@@ -0,0 +1,293 @@
+//
+// Styles for basic widgets and states
+//
+
+.background
+{
+    background-color: $bg_color;
+    color:            $fg_color;
+
+    &:backdrop
+    {
+        background-color: $backdrop_bg_color;
+        color:            $backdrop_fg_color;
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+    }
+}
+
+//
+// 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.
+//
+
+*:disabled
+{
+    -gtk-icon-effect: dim;
+}
+
+.gtkstyle-fallback
+{
+    background-color: $bg_color;
+    color:            $fg_color;
+
+    &:hover
+    {
+        background-color: lighten($bg_color, 10%);
+        color:            $fg_color;
+    }
+
+    &:active
+    {
+        background-color: darken($bg_color, 10%);
+        color:            $fg_color;
+    }
+
+    &:disabled
+    {
+        background-color: $insensitive_bg_color;
+        color:            $insensitive_fg_color;
+    }
+
+    &:selected
+    {
+        background-color: $selected_bg_color;
+        color:            $selected_fg_color;
+    }
+}
+
+.view,
+%view
+{
+    color:            $text_color;
+    background-color: $base_color;
+
+    &:backdrop
+    {
+        background-color: $backdrop_base_color;
+        color:            $backdrop_text_color;
+
+        &:disabled
+        {
+            color: $backdrop_insensitive_color;
+        }
+    }
+
+    &:disabled
+    {
+        background-color: $insensitive_bg_color;
+        color:            $insensitive_fg_color;
+    }
+
+    &:selected
+    {
+        &:focus, &
+        {
+            @extend %selected_items;
+
+            border-radius: 3px;
+        }
+    }
+}
+
+.view,
+textview
+{
+    text
+    {
+        @extend %view;
+
+        selection
+        {
+            &:focus, &
+            {
+                @extend %selected_items;
+            }
+        }
+    }
+}
+
+textview border
+{
+    background-color: mix($bg_color, $base_color, 50%);
+}
+
+iconview
+{
+    @extend .view;
+}
+
+.rubberband,
+rubberband
+{
+    background-color: transparentize(darken($selected_bg_color, 10%), 0.8);
+    border:           1px solid darken($selected_bg_color, 10%);
+}
+
+flowbox
+{
+    rubberband
+    {
+        @extend rubberband;
+    }
+
+    flowboxchild
+    {
+        padding: 3px;
+
+        &:selected
+        {
+            @extend %selected_items;
+
+            outline-offset: -2px;
+        }
+    }
+}
+
+.content-view .tile
+{
+    background-color: if($variant == 'light', transparent, black);
+    border-radius:    0;
+    margin:           2px;
+    padding:          0;
+
+    &:backdrop
+    {
+        background-color: if($variant == 'light', transparent, darken($backdrop_base_color, 5%));
+    }
+
+    &:active, &:selected
+    {
+        background-color: if($variant == 'light', transparent, $selected_bg_color);
+    }
+
+    &:disabled
+    {
+        background-color: if($variant == 'light', transparent, $insensitive_bg_color);
+    }
+}
+
+label
+{
+    caret-color: currentColor; // This shouldn't be needed
+
+    &.separator
+    {
+        @extend .dim-label;
+    }
+
+    &:selected
+    {
+       @extend %nobg_selected_items;
+    }
+
+    selection
+    {
+        background-color: $selected_bg_color;
+        color:            $selected_fg_color;
+    }
+
+    &:disabled
+    {
+        color: $insensitive_fg_color;
+
+        button &
+        {
+            color: inherit;
+        }
+
+        &:backdrop
+        {
+            color: $backdrop_insensitive_color;
+
+            button &
+            {
+                color: inherit;
+            }
+        }
+
+        selection
+        {
+            @extend %selected_items_disabled;
+        }
+    }
+
+    &:backdrop
+    {
+        selection
+        {
+            @extend %selected_items_backdrop;
+        }
+    }
+
+    &.error
+    {
+        color: $error_color;
+
+        &:disabled
+        {
+            color: transparentize($error_color,0.5);
+        }
+
+        &:disabled:backdrop
+        {
+            color: transparentize($error_color,0.6);
+        }
+    }
+}
+
+.dim-label
+{
+    opacity:     0.55;
+    text-shadow: none;
+}
+
+assistant
+{
+    .sidebar
+    {
+        background-color: $base_color;
+        border-top:       1px solid $borders_color;
+
+        &:backdrop
+        {
+            background-color: $backdrop_base_color;
+            border-color:     $backdrop_borders_color;
+        }
+    }
+
+    &.csd .sidebar
+    {
+        border-top-style: none;
+    }
+
+    .sidebar label
+    {
+        padding: 6px 12px;
+    }
+
+    .sidebar label.highlight
+    {
+        background-color: mix($bg_color, $fg_color, 80%);
+    }
+}
+
+%osd,
+.osd
+{
+    background-color: $osd_bg_color;
+    background-clip:  padding-box;
+    border:           none;
+    color:            $osd_fg_color;
+    text-shadow:      0 1px black;
+    -gtk-icon-shadow: 0 1px black;
+
+    &:backdrop
+    {
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+    }
+}

themes/adwaita-refactored/common/button.scss

@@ -0,0 +1,926 @@
+//
+// Various button styles
+//
+
+// Stuff for .needs-attention
+//
+$_dot_color: if($variant == 'light', $selected_bg_color,
+                                      lighten($selected_bg_color,15%));
+@keyframes needs_attention
+{
+    from {
+        background-image: -gtk-gradient(
+                              radial,
+                              center center, 0,
+                              center center, 0.01,
+                              to($_dot_color),
+                              to(transparent)
+                          );
+    }
+
+    to
+    {
+        background-image: -gtk-gradient(
+                              radial,
+                              center center, 0,
+                              center center, 0.5,
+                              to($selected_bg_color),
+                              to(transparent)
+                          );
+    }
+}
+
+%button,
+button
+{
+    @at-root %button_basic, &
+    {
+        border:        1px solid;
+        border-radius: $button_radius;
+        min-height:    24px;
+        min-width:     16px;
+        padding:       $_btn_pad;
+        transition:    $button_transition;
+
+        @include button(normal);
+
+        @at-root %button_basic_flat,
+        &.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
+                {
+                    transition: $button_transition;
+                }
+            }
+        }
+
+        &:hover
+        {
+            @include button(hover);
+
+            -gtk-icon-effect: highlight;
+        }
+
+        &:active,
+        &:checked
+        {
+            @include button(active);
+
+            transition-duration: 50ms;
+        }
+
+        &:backdrop
+        {
+            &.flat, &
+            {
+                @include button(backdrop);
+
+                transition: $backdrop_transition;
+                -gtk-icon-effect: none;
+
+                &:active,
+                &:checked
+                {
+                    @include button(backdrop-active);
+                }
+
+                &:disabled
+                {
+                    @include button(backdrop-insensitive);
+
+                    &:active,
+                    &:checked
+                    {
+                        @include button(backdrop-insensitive-active);
+                    }
+                }
+            }
+        }
+
+        @at-root %button_basic_flat,
+        &.flat
+        {
+            &:backdrop,
+            &:disabled,
+            &:backdrop:disabled
+            {
+                @include button(undecorated);
+            }
+        }
+
+        &:disabled
+        {
+            @include button(insensitive);
+
+            &:active,
+            &:checked
+            {
+                @include button(insensitive-active);
+            }
+        }
+
+        &.image-button
+        {
+            min-width:     24px;
+            padding-left:  $_img_btn_pad;
+            padding-right: $_img_btn_pad;
+        }
+
+        &.text-button
+        {
+            padding-left:  16px;
+            padding-right: 16px;
+        }
+
+        &.text-button.image-button
+        {
+            padding-left:  8px;
+            padding-right: 8px;
+
+            label
+            {
+                padding-left:  8px;
+                padding-right: 8px;
+            }
+        }
+
+        @at-root %button_basic_drop_active,
+        &:drop(active)
+        {
+            border-color: $drop_target_color;
+            box-shadow:   inset 0 0 0 1px $drop_target_color;
+            color:        $drop_target_color;
+        }
+    }
+
+    @at-root %button_selected, &
+    {
+        row:selected &
+        {
+            @if $variant == 'light'
+            {
+                border-color: $selected_borders_color;
+            }
+        }
+
+        @at-root %button_selected_flat, &.flat
+        {
+            row:selected &
+            {
+                &:not(:active):not(:checked):not(:hover):not(disabled)
+                {
+                    border-color: transparent;
+                    color:        $selected_fg_color;
+
+                    &:backdrop
+                    {
+                        color: if($variant == 'light', $backdrop_base_color, $backdrop_fg_color);
+                    }
+                }
+            }
+        }
+    }
+
+
+    // Big standalone buttons like in Documents pager
+    //
+    &.osd
+    {
+        border-radius: 5px;
+        color:         $osd_fg_color;
+        min-height:    32px;
+        min-width:     26px;
+
+        &.image-button { min-width: 34px; }
+
+        @include button(osd);
+
+        // Overrides
+        //
+        border:     none;
+        box-shadow: none;
+
+        &:hover
+        {
+            @include button(osd-hover);
+
+            border:     none;
+            box-shadow: none;
+        }
+
+        &:active,
+        &:checked
+        {
+            @include button(osd-active);
+
+            border:     none;
+            box-shadow: none;
+        }
+
+        &:disabled
+        {
+            &:backdrop,
+            &
+            {
+                @include button(osd-insensitive);
+
+                border: none;
+            }
+        }
+
+        &:backdrop
+        {
+            @include button(osd-backdrop);
+
+            border: none;
+        }
+    }
+
+    // Overlay / OSD style
+    //
+    @at-root %osd_button,
+    .osd &
+    {
+        @include button(osd);
+
+        &:hover
+        {
+            @include button(osd-hover);
+        }
+
+        &:active,
+        &:checked
+        {
+            &:backdrop, &
+            {
+                @include button(osd-active);
+            }
+        }
+
+        &:disabled
+        {
+            &:backdrop, &
+            {
+                @include button(osd-insensitive);
+            }
+        }
+
+        &:backdrop
+        {
+            @include button(osd-backdrop);
+        }
+
+        &.flat
+        {
+            @include button(undecorated);
+
+            box-shadow:       none; //FIXME: respect no edge on the button mixin
+            text-shadow:      0 1px black;
+            -gtk-icon-shadow: 0 1px black;
+
+            &:hover
+            {
+                @include button(osd-hover);
+            }
+
+            &:disabled
+            {
+                @include button(osd-insensitive);
+
+                background-image: none;
+                border-color:     transparent;
+                box-shadow:       none;
+            }
+
+            &:backdrop
+            {
+                @include button(undecorated);
+            }
+
+            &:active,
+            &:checked
+            {
+                @include button(osd-active);
+            }
+        }
+    }
+
+    // Suggested and Destructive Action buttons
+    //
+    @each $b_type, $b_color in (suggested-action, $suggested_bg_color),
+                               (destructive-action, $destructive_color)
+    {
+        &.#{$b_type}
+        {
+            @include button(normal, $b_color, white);
+
+            &.flat
+            {
+                @include button(undecorated);
+
+                color: $b_color; //FIXME: does it work on the dark variant?
+            }
+
+            &:hover
+            {
+                @include button(hover, $b_color, white);
+            }
+
+            &:active,
+            &:checked
+            {
+                @include button(active, $b_color, white);
+            }
+
+            &:backdrop,
+            &.flat:backdrop
+            {
+                @include button(backdrop, $b_color, white);
+
+                &:active,
+                &:checked
+                {
+                    @include button(backdrop-active, $b_color, white);
+                }
+
+                &:disabled
+                {
+                    @include button(backdrop-insensitive);
+
+                    &:active,
+                    &:checked
+                    {
+                        @include button(backdrop-insensitive-active, $b_color, white);
+                    }
+                }
+            }
+
+            &.flat
+            {
+                &:backdrop,
+                &:disabled,
+                &:backdrop:disabled
+                {
+                    @include button(undecorated);
+
+                    color: transparentize($b_color, 0.2);
+                }
+            }
+
+            &:disabled
+            {
+                @include button(insensitive);
+
+                &:active,
+                &:checked
+                {
+                    @include button(insensitive-active, $b_color, white);
+                }
+            }
+
+            .osd &
+            {
+                @include button(osd, $b_color);
+
+                &:hover { @include button(osd-hover, $b_color); }
+
+                &:active,
+                &:checked
+                {
+                    &:backdrop, &
+                    {
+                        @include button(osd-active, $b_color);
+                    }
+                }
+
+                &:disabled
+                {
+                    &:backdrop, &
+                    {
+                        @include button(osd-insensitive, $b_color);
+                    }
+                }
+
+                &:backdrop
+                {
+                    @include button(osd-backdrop, $b_color);
+                }
+            }
+        }
+    }
+
+    .stack-switcher > &
+    {
+        // To position the needs attention dot, padding is added to the button
+        // child, a label needs just lateral padding while an icon needs vertical
+        // padding added too.
+        //
+        outline-offset: -3px; // Needs to be set or it gets overriden by GtkRadioButton outline-offset
+
+        > label
+        {
+            padding-left:  6px; // Label padding
+            padding-right: 6px; //
+        }
+
+        > image
+        {
+            padding-left:   6px; // Image padding
+            padding-right:  6px; //
+            padding-top:    3px; //
+            padding-bottom: 3px; //
+        }
+
+        &.text-button
+        {
+            // Compensate text-button paddings
+            //
+            padding-left:  10px;
+            padding-right: 10px;
+        }
+
+        &.image-button
+        {
+            // We want image buttons to have a 1:1 aspect ratio, so compensation
+            // of the padding added to the GtkImage is needed
+            //
+            padding-left:  2px;
+            padding-right: 2px;
+        }
+
+        &.needs-attention
+        {
+            > label,
+            > image
+            {
+                @extend %needs_attention;
+            }
+
+            &:active,
+            &:checked
+            {
+                > label,
+                > image
+                {
+                    animation:        none;
+                    background-image: none;
+                }
+            }
+        }
+    }
+
+    // Hide separators
+    //
+    &.font,
+    &.file
+    {
+        separator
+        {
+            background-color: transparent;
+        }
+    }
+
+    &.font
+    {
+        > box > box > label
+        {
+            font-weight: bold;
+        }
+    }
+
+    // Inline-toolbar buttons
+    //
+    .inline-toolbar &
+    {
+        @extend %linked;
+    }
+
+    .primary-toolbar &
+    {
+        -gtk-icon-shadow: none; // Tango icons don't need shadows
+    }
+
+    .linked > &
+    {
+        @extend %linked;
+    }
+
+    .linked.vertical > &
+    {
+        @extend %linked_vertical;
+    }
+
+    // Circular button
+    //
+    &.circular
+    {
+        border-radius:       9999px;
+        padding:             $_circ_btn_pad;
+        -gtk-outline-radius: 9999px;
+
+        label
+        {
+            padding: 0;
+        }
+
+        // The following code is needed since we use a darker bottom border on
+        // buttons, which looks pretty bad with a 100% border radius
+        //     (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details)
+        //
+        // On relevant states we an additional background-image with a gradient
+        // clipped on the border-box, so setting a transparent border would reveal
+        // it
+        //
+        $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
+
+        &:not(.flat):not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop)
+        {
+            @include button(normal, $backimage: $_border_bg);
+
+            border-color: transparent;
+        }
+
+        &:hover:not(.osd):not(:checked):not(:active):not(:disabled):not(:backdrop)
+        {
+            @include button(hover, $backimage: $_border_bg);
+
+            border-color: transparent;
+        }
+
+        background-origin: padding-box, border-box;
+        background-clip:   padding-box, border-box;
+    }
+}
+
+%needs_attention
+{
+    animation:         needs_attention 150ms ease-in;
+    $_dot_shadow:      _text_shadow_color();
+    $_dot_shadow_r:    if($variant == 'light', 0.5, 0.45);
+    background-image:  -gtk-gradient(
+                           radial,
+                           center center, 0,
+                           center center, 0.5,
+                           to($_dot_color),
+                           to(transparent)
+                       ),
+                       -gtk-gradient(
+                           radial,
+                           center center, 0,
+                           center center, $_dot_shadow_r,
+                           to($_dot_shadow),
+                           to(transparent)
+                       );
+    background-size:   6px 6px, 6px 6px;
+    background-repeat: no-repeat;
+
+    @if $variant == 'light'
+    {
+        background-position: right 3px, right 4px;
+    }
+    @else
+    {
+        background-position: right 3px, right 2px;
+    }
+
+    &:backdrop
+    {
+        background-size: 6px 6px, 0 0;
+    }
+
+    &:dir(rtl)
+    {
+        @if $variant == 'light'
+        {
+            background-position: left 3px, left 4px;
+        }
+        @else
+        {
+            background-position: left 3px, left 2px;
+        }
+    }
+}
+
+
+// All the following is for the +|- buttons on inline toolbars, that way
+// should really be deprecated...
+//
+.inline-toolbar toolbutton > button
+{
+    // Redefining the button look is needed since those are flat...
+    //
+    @include button(normal);
+
+    &:hover
+    {
+        @include button(hover);
+    }
+
+    &:active,
+    &:checked
+    {
+        @include button(active);
+    }
+
+    &:disabled
+    {
+        @include button(insensitive);
+
+        &:active,
+        &:checked
+        {
+            @include button(insensitive-active);
+        }
+    }
+
+    &:backdrop
+    {
+        @include button(backdrop);
+
+        &:active,
+        &:checked
+        {
+            @include button(backdrop-active);
+        }
+
+        &:disabled
+        {
+            @include button(backdrop-insensitive);
+
+            &:active,
+            &:checked
+            {
+                @include button(backdrop-insensitive-active);
+            }
+        }
+    }
+}
+
+// More inline toolbar buttons
+//
+toolbar.inline-toolbar toolbutton
+{
+    > button.flat
+    {
+        @extend %linked_middle;
+    }
+
+    &:first-child > button.flat
+    {
+        @extend %linked_left;
+    }
+
+    &:last-child > button.flat
+    {
+        @extend %linked_right;
+    }
+
+    &:only-child > button.flat
+    {
+        @extend %linked_only_child;
+    }
+}
+
+%linked_middle
+{
+    border-right-style:  none;
+    border-radius:       0;
+    -gtk-outline-radius: 0;
+}
+
+%linked_left
+{
+    border-top-left-radius:          $button_radius;
+    border-bottom-left-radius:       $button_radius;
+    -gtk-outline-top-left-radius:    $button_radius;
+    -gtk-outline-bottom-left-radius: $button_radius;
+}
+
+%linked_right
+{
+    border-right-style:               solid;
+    border-top-right-radius:          $button_radius;
+    border-bottom-right-radius:       $button_radius;
+    -gtk-outline-top-right-radius:    $button_radius;
+    -gtk-outline-bottom-right-radius: $button_radius;
+}
+
+%linked_only_child
+{
+    border-style:        solid;
+    border-radius:       $button_radius;
+    -gtk-outline-radius: $button_radius;
+}
+
+// .linked assumes Box, which reverses nodes in RTL, so 1st child is always left
+//
+%linked
+{
+    @extend %linked_middle;
+
+    &:first-child { @extend %linked_left;       }
+    &:last-child  { @extend %linked_right;      }
+    &:only-child  { @extend %linked_only_child; }
+}
+
+// Other widgets use widget child order, so 1st/last child are at text start/end
+//
+%linked_flippable
+{
+    @extend %linked_middle;
+
+    &:dir(ltr)
+    {
+        &:first-child { @extend %linked_left;  }
+        &:last-child  { @extend %linked_right; }
+    }
+
+    &:dir(rtl)
+    {
+        &:first-child { @extend %linked_right; }
+        &:last-child  { @extend %linked_left;  }
+    }
+
+    &:only-child
+    {
+        @extend %linked_only_child;
+    }
+}
+
+%linked_vertical_middle
+{
+    border-style:        solid solid none solid;
+    border-radius:       0;
+    -gtk-outline-radius: 0;
+}
+
+%linked_vertical_top
+{
+    border-top-left-radius:        $button_radius;
+    border-top-right-radius:       $button_radius;
+    -gtk-outline-top-left-radius:  $button_radius;
+    -gtk-outline-top-right-radius: $button_radius;
+}
+
+%linked_vertical_bottom
+{
+    border-bottom-style:              solid;
+    border-bottom-left-radius:        $button_radius;
+    border-bottom-right-radius:       $button_radius;
+    -gtk-outline-bottom-left-radius:  $button_radius;
+    -gtk-outline-bottom-right-radius: $button_radius;
+}
+
+%linked_vertical_only_child
+{
+    border-style: solid;
+    border-radius: $button_radius;
+    -gtk-outline-radius: $button_radius;
+}
+
+%linked_vertical
+{
+    @extend %linked_vertical_middle;
+
+    &:first-child { @extend %linked_vertical_top;        }
+    &:last-child  { @extend %linked_vertical_bottom;     }
+    &:only-child  { @extend %linked_vertical_only_child; }
+}
+
+%undecorated_button
+{
+    background-color: transparent;
+    background-image: none;
+    border-color: transparent;
+    box-shadow: inset 0 1px transparentize(white, 1),
+                0 1px transparentize(white, 1);
+    text-shadow: none;
+    -gtk-icon-shadow: none;
+}
+
+// Menu buttons
+//
+modelbutton.flat,
+.menuitem.button.flat
+{
+    min-height:     26px;
+    padding-left:   5px;
+    padding-right:  5px;
+    border-radius:  $button_radius;
+    outline-offset: -2px;
+
+    @extend %undecorated_button;
+
+    &:hover
+    {
+        background-color: $popover_hover_color;
+    }
+
+    &:selected
+    {
+        @extend %selected_items;
+    }
+
+    &:backdrop,
+    &:backdrop:hover
+    {
+        @extend %undecorated_button;
+    }
+}
+
+modelbutton.flat arrow
+{
+    background: none;
+
+    &:hover
+    {
+        background: none;
+    }
+
+    &.left
+    {
+        -gtk-icon-source: -gtk-icontheme("pan-start-symbolic");
+    }
+
+    &.right
+    {
+        -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    }
+}
+
+button.color
+{
+    padding: 4px;
+
+    colorswatch:only-child
+    {
+        &, overlay
+        {
+            border-radius: 0;
+        }
+
+        @if $variant == 'light'
+        {
+            box-shadow: 0 1px _text_shadow_color();
+
+            .osd &
+            {
+                box-shadow: none;
+            }
+        }
+    }
+
+    @if $variant == 'light'
+    {
+        .osd &, &
+        {
+            &:disabled,
+            &:backdrop,
+            &:active,
+            &:checked
+            {
+                colorswatch:only-child
+                {
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+}
+
+// List buttons
+//
+// (tone down as per new designs, see issue #1473, #1478)
+//
+list row button.image-button:not(.flat)
+{
+    @extend %undecorated_button;
+
+    border: 1px solid transparentize($borders_color, 0.5);
+
+    &:hover
+    {
+        @include button(hover);
+    }
+
+    &:active,
+    &:checked
+    {
+        @include button(active);
+    }
+}

themes/adwaita-refactored/common/calendar.scss

@@ -0,0 +1,58 @@
+//
+// Calendar styles
+//
+
+calendar
+{
+    border: 1px solid $borders_color;
+    color:  $text_color;
+    
+    &:selected
+    {
+        @extend %selected_items;
+        
+        border-radius: 3px;
+    }
+    
+    &.header
+    {
+        border-bottom-color: transparentize(black, 0.9);
+        
+        &:backdrop
+        {
+            border-bottom-color: transparentize(black, 0.9);
+        }
+    }
+    
+    &.button
+    {
+        @extend %undecorated_button;
+        
+        color: transparentize($fg_color, 0.55);
+        
+        &:hover    { color: $fg_color;                                  }
+        &:backdrop { color: transparentize($backdrop_fg_color,   0.55); }
+        &:disabled { color: transparentize($insensitive_fg_color,0.55); }
+    }
+    
+    &.highlight
+    {
+        color: $insensitive_fg_color;
+        
+        &:backdrop
+        {
+            color: $backdrop_insensitive_color;
+        }
+    }
+    
+    &:backdrop
+    {
+        border-color: $backdrop_borders_color;
+        color:        $backdrop_text_color;
+    }
+    
+    &:indeterminate
+    {
+        color: gtkalpha(currentColor, 0.1);
+    }
+}

themes/adwaita-refactored/common/checkradio.scss

@@ -0,0 +1,308 @@
+//
+// Check box and radio button styles
+//
+
+//
+// Draw regular check and radio items using our PNG assets
+//
+// All assets are rendered from assets.svg. never add pngs directly
+//
+
+// Selection-mode
+//
+@each $check_state, $check_icon, $check_color, $check_background in
+    ('',                  'none',                                       'transparent',                           $checkradio_bg_color),
+    (':hover',            'none',                                       'transparent',                           $checkradio_bg_color),
+    (':active',           'none',                                       'transparent',                           $checkradio_bg_color),
+    (':backdrop',         'none',                                       'transparent',                           '#{desaturate($checkradio_bg_color, 100%)}'),
+    (':checked',          '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color,                           $checkradio_bg_color),
+    (':checked:hover',    '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color,                           $checkradio_bg_color),
+    (':checked:active',   '-gtk-icontheme(\'object-select-symbolic\')', $osd_fg_color,                           $checkradio_bg_color),
+    (':backdrop:checked', '-gtk-icontheme(\'object-select-symbolic\')', '#{transparentize($osd_fg_color, 0.2)}', '#{desaturate($checkradio_bg_color, 100%)}')
+{
+    .view.content-view.check#{$check_state}:not(list),
+    .content-view:not(list) check#{$check_state}
+    {
+        background-color: #{$check_background};
+        background-image: none;
+        border-radius:    5px;
+        border-width:     0;
+        box-shadow:       none;
+        color:            #{$check_color};
+        margin:           4px;
+        min-width:        32px;
+        min-height:       32px;
+        transition:       200ms;
+        -gtk-icon-source: #{$check_icon};
+        -gtk-icon-shadow: none;
+    }
+}
+
+checkbutton.text-button,
+radiobutton.text-button
+{
+    // This is for a nice focus on check and radios text
+    //
+    outline-offset: 0;
+    padding:        2px 0;
+
+    label:not(:only-child)
+    {
+        &:first-child { margin-left:  4px; }
+        &:last-child  { margin-right: 4px; }
+    }
+}
+
+check,
+radio
+{
+    margin: 0 4px;
+    
+    &:only-child
+    {
+        margin: 0;
+    }
+
+    // When in a popover add more space between the label and the check, reset the
+    // other side margin.
+    //
+    // See https://bugzilla.gnome.org/show_bug.cgi?id=779570 for details.
+    //
+    popover &
+    {
+        &.left:dir(rtl)
+        {
+            margin-left:  0;
+            margin-right: 12px;
+        }
+
+        &.right:dir(ltr)
+        {
+            margin-left:  12px;
+            margin-right: 0;
+        }
+    }
+    
+    border:     1px solid;
+    min-height: 14px;
+    min-width:  14px;
+    -gtk-icon-source: none;
+
+    // Unchecked
+    //
+    &
+    {
+        $_c: if($variant == 'light', #FFFFFF, $bg_color);
+        
+        @each $state, $t in
+            ("",                   "normal"),
+            (":hover",             "hover"),
+            (":active",            "active"),
+            (":disabled",          "insensitive"),
+            (":backdrop",          "backdrop"),
+            (":backdrop:disabled", "backdrop-insensitive")
+        {
+            &#{$state}
+            {
+                @include check($t, $_c);
+            }
+        }
+    }
+    
+    // Checked
+    //
+    &
+    {
+        @each $t in
+            (':checked'),
+            (':indeterminate')
+        {
+            &#{$t}
+            {
+                @each $state, $t in
+                    ("",                   "normal"),
+                    (":hover",             "hover"),
+                    (":active",            "active"),
+                    (":disabled",          "insensitive"),
+                    (":backdrop",          "backdrop"),
+                    (":backdrop:disabled", "backdrop-insensitive")
+                {
+                    &#{$state}
+                    {
+                        @include check($t, $checkradio_bg_color, $checkradio_fg_color, $checked: true);
+                    }
+                }
+            }
+        }
+    }
+
+    &:backdrop
+    {
+        transition: $backdrop_transition;
+    }
+
+    @if $variant == 'light'
+    {
+        // The borders of the light variant versions of checks and radios are too
+        // similar in luminosity to the selected background color, hence we need
+        // special casing
+        //
+        row:selected &
+        {
+            border-color: $checkradio_borders_color;
+        }
+    }
+
+    .osd &
+    {
+        @include button(osd);
+        
+        &:hover    { @include button(osd);             }
+        &:active   { @include button(osd-active);      }
+        &:backdrop { @include button(osd-backdrop);    }
+        &:disabled { @include button(osd-insensitive); }
+    }
+    
+    menu menuitem &
+    {
+        margin: 0; // This is a workaround for a menu check/radio size allocation issue
+        
+        &, &:checked, &:indeterminate
+        {
+            // FIXME: Use button reset mixin
+            //
+            &, &:hover, &:disabled
+            { 
+                background-color: transparent;
+                background-image: none;
+                border-color:     currentColor;
+                box-shadow:       none;
+                color:            inherit;
+                min-height:       14px;
+                min-width:        14px;
+                -gtk-icon-shadow: none;
+            }
+        }
+    }
+}
+
+%check,
+check
+{
+    border-radius: 3px;
+
+    &:checked
+    {
+        -gtk-icon-source: image(
+                              -gtk-recolor(url("assets/check-symbolic.svg")),
+                              -gtk-recolor(url("assets/check-symbolic.symbolic.png"))
+                          );
+    }
+
+    &:indeterminate
+    {
+        -gtk-icon-source: image(
+                              -gtk-recolor(url("assets/dash-symbolic.svg")),
+                              -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))
+                          );
+    }
+}
+
+%radio,
+radio
+{
+    border-radius: 100%;
+    
+    &:checked
+    {
+        -gtk-icon-source: image(
+                              -gtk-recolor(url("assets/bullet-symbolic.svg")),
+                              -gtk-recolor(url("assets/bullet-symbolic.symbolic.png"))
+                          );
+    }
+
+    &:indeterminate
+    {
+        -gtk-icon-source: image(
+                              -gtk-recolor(url("assets/dash-symbolic.svg")),
+                              -gtk-recolor(url("assets/dash-symbolic.symbolic.png"))
+                          );
+    }
+}
+
+//
+// ANIMATION:
+//
+// This is made with those pretty convoluted transitions, since checks and radios have
+// to animate only on state changes, the transformation is set on the active state and
+// it get reset on the checked state
+//
+radio:not(:indeterminate):not(:checked):active:not(:backdrop)
+{
+    -gtk-icon-transform: scale(0);
+}
+
+check:not(:indeterminate):not(:checked):active:not(:backdrop)
+{
+    -gtk-icon-transform: translate(6px, -3px) rotate(-45deg) scaleY(0.2) rotate(45deg) scaleX(0);
+}
+
+radio,
+check
+{
+    // Should tackle the indeterminate state, untested
+    //
+    &:active
+    {
+        -gtk-icon-transform: scale(0, 1);
+    } 
+
+    &:checked:not(:backdrop),
+    &:indeterminate:not(:backdrop)
+    {
+        transition: 400ms;
+        -gtk-icon-transform: unset;
+    }
+}
+
+menu menuitem
+{
+    radio,
+    check
+    {
+        &:checked:not(:backdrop),
+        &:indeterminate:not(:backdrop)
+        {
+            transition: none;
+        }
+    }
+}
+
+treeview.view check,
+treeview.view radio
+{
+    &:selected
+    {
+        &:focus,
+        &
+        {
+            color: $checkradio_fg_color;
+
+            @if $variant == 'light'
+            {
+                border-color: $selected_borders_color;
+            }
+        }
+    }
+}
+
+// This is a workaround
+//
+treeview.view radio:selected
+{
+    &:focus,
+    &
+    {
+        @extend %radio;
+    }
+}

themes/adwaita-refactored/common/colorswatch.scss

@@ -0,0 +1,209 @@
+//
+// Color swatch styles
+//
+
+colorswatch
+{
+    //
+    // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+    // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
+    // applied to the overlay box.
+    //
+
+    // FIXME: implement a proper drop(active) state
+    //
+    &:drop(active),
+    &
+    {
+        border-style: none;
+    } 
+    
+    $_colorswatch_radius: 5px;
+    
+    //
+    // base color corners rounding
+    // to avoid the artifacts caused by rounded corner anti-aliasing the base color
+    // sports a bigger radius.
+    // nth-child is needed by the custom color strip.
+    //
+    
+    &.top
+    {
+        border-top-left-radius:  $_colorswatch_radius + 0.5px;
+        border-top-right-radius: $_colorswatch_radius + 0.5px;
+        
+        overlay
+        {
+            border-top-left-radius:  $_colorswatch_radius;
+            border-top-right-radius: $_colorswatch_radius;
+        }
+    }
+    
+    &.bottom
+    {
+        border-bottom-left-radius:  $_colorswatch_radius + 0.5px;
+        border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+        
+        overlay
+        {
+            border-bottom-left-radius:  $_colorswatch_radius;
+            border-bottom-right-radius: $_colorswatch_radius;
+        }
+    }
+    
+    &.left,
+    &:first-child:not(.top)
+    {
+        border-top-left-radius:    $_colorswatch_radius + 0.5px;
+        border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+
+        overlay
+        {
+            border-top-left-radius:    $_colorswatch_radius;
+            border-bottom-left-radius: $_colorswatch_radius;
+        }
+    }
+    
+    &.right,
+    &:last-child:not(.bottom)
+    {
+        border-top-right-radius:    $_colorswatch_radius + 0.5px;
+        border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+        
+        overlay
+        {
+            border-top-right-radius:    $_colorswatch_radius;
+            border-bottom-right-radius: $_colorswatch_radius;
+        }
+    }
+    
+    &.dark
+    {
+        outline-color: transparentize(white, 0.4);
+        
+        overlay
+        {
+            color: #FFFFFF;
+            
+            &:hover
+            {
+                border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color);
+            }
+            
+            &:backdrop
+            {
+                color: transparentize(#FFFFFF, 0.5);
+            }
+        }
+    }
+    
+    &.light
+    {
+        outline-color: transparentize(#000000, 0.4);
+        
+        overlay
+        {
+            color: #000000;
+            
+            &:hover
+            {
+                border-color: if($variant == 'light', transparentize(#000000, 0.5), $borders_color);
+            }
+            
+            &:backdrop
+            {
+                color: transparentize(#000000, 0.5);
+            }
+        }
+    }
+    
+    &:drop(active)
+    {
+        box-shadow: none;
+        
+        &.light overlay
+        {
+            border-color: $drop_target_color;
+            
+            box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
+                        inset 0 0 0 1px $drop_target_color;
+        }
+        
+        &.dark overlay
+        {
+            border-color: $drop_target_color;
+
+            box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(#000000, 0.7), $borders_color),
+                        inset 0 0 0 1px $drop_target_color;
+        }
+    }
+    
+    overlay
+    {
+        border: 1px solid if($variant == 'light', transparentize(#000000, 0.7), $borders_color);
+        
+        &:hover
+        {
+            box-shadow: inset 0  1px transparentize(#FFFFFF, 0.6),
+                        inset 0 -1px transparentize(#000000, 0.8);
+        }
+        
+        &:backdrop,
+        &:backdrop:hover
+        {
+            border-color: if($variant == 'light', transparentize(#000000, 0.7), $borders_color);
+            box-shadow:   none;
+        }
+    }
+    
+    &#add-color-button
+    {
+        border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
+        
+        &:only-child
+        {
+            border-radius: $_colorswatch_radius;
+        }
+        
+        overlay
+        {
+            @include button(normal);
+            
+            &:hover    { @include button(hover);    }
+            &:backdrop { @include button(backdrop); }
+        }
+    }
+    
+    &:disabled
+    {
+        opacity: 0.5;
+        
+        overlay
+        {
+            border-color: transparentize(#000000, 0.4);
+            box-shadow:   none;
+        }
+    }
+    
+    row:selected &
+    {
+        box-shadow: 0 0 0 2px $selected_fg_color;
+    }
+    
+    &#editor-color-sample
+    {
+        border-radius: 4px;
+        
+        overlay
+        {
+            border-radius: 4.5px;
+        }
+    }
+}
+
+// Colorscale popup
+//
+colorchooser .popover.osd
+{
+    border-radius: 5px;
+}

themes/adwaita-refactored/common/combobox.scss

@@ -0,0 +1,49 @@
+//
+// Combobox styles
+//
+
+combobox
+{
+    arrow
+    {
+        min-height: 16px;
+        min-width:  16px;
+        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+    }
+
+    &.linked
+    {
+        button:nth-child(2)
+        {
+            &:dir(ltr) { @extend %linked_right; }
+            &:dir(rtl) { @extend %linked_left; }
+        }
+    }
+
+    // FIXME: Untested
+    //
+    &:drop(active)
+    {
+        box-shadow: none;
+
+        button.combo
+        {
+            @extend %button_basic_drop_active;
+        }
+    }
+}
+
+//
+// The combo is a composite widget so the way we do button linking doesn't
+// work, special case needed. See
+// https://bugzilla.gnome.org/show_bug.cgi?id=733979
+//
+.linked:not(.vertical) > combobox             > box > button.combo { @extend %linked_middle;     }
+.linked:not(.vertical) > combobox:first-child > box > button.combo { @extend %linked_left;       }
+.linked:not(.vertical) > combobox:last-child  > box > button.combo { @extend %linked_right;      }
+.linked:not(.vertical) > combobox:only-child  > box > button.combo { @extend %linked_only_child; }
+
+.linked.vertical > combobox             > box > button.combo { @extend %linked_vertical_middle;     }
+.linked.vertical > combobox:first-child > box > button.combo { @extend %linked_vertical_top;        }
+.linked.vertical > combobox:last-child  > box > button.combo { @extend %linked_vertical_bottom;     }
+.linked.vertical > combobox:only-child  > box > button.combo { @extend %linked_vertical_only_child; }

themes/adwaita-refactored/common/constants.scss

@@ -0,0 +1,12 @@
+//
+// Constans defined for widget structure
+//
+
+$ease-out-quad:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$asset_suffix:        if($variant == 'dark', '-dark', '');
+$backdrop_transition: 200ms ease-out;
+$button_transition:   all 200ms $ease-out-quad;
+$button_radius:       5px;
+$menu_radius:         5px;
+$window_radius:       $button_radius + 3;
+$popover_radius:      $button_radius + 4;

themes/adwaita-refactored/common/decorations.scss

@@ -0,0 +1,194 @@
+//
+// Window decorations styles
+//
+
+decoration
+{
+    border-radius: $window_radius $window_radius 0 0;
+    
+    // Lamefun trick to get rounded borders regardless of CSD use
+    //
+    border-width: 0px;
+    
+    // This needs to be transparent (see bug #722563)
+    //
+    $_wm_border:          if($variant == 'light', transparentize(black, 0.77), transparentize(black, 0.25));
+    $_wm_border_backdrop: if($variant == 'light', transparentize(black, 0.82), transparentize(black, 0.25));
+    
+    // Doing borders with box-shadow
+    //
+    box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
+                0 0   0   1px $_wm_border;
+
+    // FIXME: Rationalize shadows
+
+    // This is used for the resize cursor area
+    //
+    margin: 10px;
+    
+    &:backdrop
+    {
+        // The transparent shadow here is to enforce that the shadow extents don't
+        // change when we go to backdrop, to prevent jumping windows.
+        // The biggest shadow should be in the same order then in the active state
+        // or the jumping will happen during the transition.
+        //
+        box-shadow: 0 3px 9px 1px transparent,
+                    0 2px 6px 2px transparentize(black, 0.8),
+                    0 0 0 1px $_wm_border_backdrop;
+        transition: $backdrop_transition;
+    }
+    
+    .maximized &,
+    .fullscreen &
+    {
+        border-radius: 0;
+        box-shadow:    none;
+    }
+    
+    .tiled        &,
+    .tiled-top    &,
+    .tiled-right  &,
+    .tiled-bottom &,
+    .tiled-left   &
+    {
+        border-radius: 0;
+        box-shadow:    0 0 0 1px  $_wm_border_backdrop,
+                       0 0 0 20px transparent; //transparent control workaround -- #3670
+
+        &:backdrop
+        {
+            box-shadow: 0 0 0 1px  $_wm_border_backdrop,
+                        0 0 0 20px transparent; // #3670
+        }
+    }
+    
+    .popup &
+    {
+        box-shadow: none;
+    }
+    
+    // Server-side decorations as used by mutter
+    // Just doing borders, wm draws actual shadows
+    //
+    .ssd &          { box-shadow: 0 0 0 1px $_wm_border;          }
+    .ssd &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop; }
+    
+    .csd.popup &
+    {
+        border-radius: $menu_radius;
+        box-shadow:    0 1px 2px transparentize(#000000,     0.8),
+                       0 0 0 1px transparentize($_wm_border, 0.1);
+    }
+    
+    tooltip.csd &
+    {
+        border-radius: 5px;
+        box-shadow:    none;
+    }
+    
+    messagedialog.csd &
+    {
+        border-radius: $window_radius;
+        box-shadow:    0 1px 2px transparentize(#000000,     0.8),
+                       0 0 0 1px transparentize($_wm_border, 0.1);
+    }
+    
+    .solid-csd &
+    {
+        background-color: $borders_color;
+        border:           solid 1px $borders_color;
+        border-radius:    0;
+        box-shadow:       inset 0 0 0 3px $headerbar_color,
+                          inset 0 1px     $top_hilight;
+        margin:           0;
+        padding:          4px;
+        
+        &:backdrop
+        {
+            box-shadow: inset 0 0 0 3px $backdrop_bg_color,
+                        inset 0 1px     $top_hilight;
+        }
+    }
+}
+
+// Window close button
+//
+button.titlebutton
+{
+    @extend %button_basic;
+    
+    @extend %button_basic_flat;
+    
+    @include _button_text_shadow;
+    
+    &:not(.appmenu)
+    {
+        border-radius: 9999px;
+        padding:       $_hb_btn_pad;
+        margin:        0 2px;
+        min-height:    0;
+        min-width:     0;
+    }
+    
+    .selection-mode &
+    {
+        @extend %selection_mode_button_flat;
+        
+        @extend %nobg_selected_items;
+    }
+    
+    &:backdrop
+    {
+        -gtk-icon-shadow: none;
+    }
+}
+
+.selection-mode headerbar button.titlebutton,
+.selection-mode .titlebar button.titlebutton,
+headerbar.selection-mode button.titlebutton,
+.titlebar.selection-mode button.titlebutton
+{
+    @include _button_text_shadow(white, $suggested_bg_color);
+    
+    &:backdrop
+    {
+        -gtk-icon-shadow: none;
+    }
+}
+
+
+// Catch all extend
+//
+%selected_items
+{
+    background-color: $selected_bg_color;
+    
+    @at-root %nobg_selected_items,
+    &
+    {
+        color: $selected_fg_color;
+        
+        @at-root %selected_items_disabled,
+        &:disabled
+        {
+            color: mix($selected_fg_color, $selected_bg_color, 50%);
+        }
+        
+        @at-root %selected_items_backdrop,
+        &:backdrop
+        {
+            color: $backdrop_selected_fg_color;
+            
+            &:disabled
+            {
+                color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%);
+            }
+        }
+    }
+}
+
+.monospace
+{
+    font-family: monospace;
+}

themes/adwaita-refactored/common/emoji.scss

@@ -0,0 +1,79 @@
+//
+// Emoji styles
+//
+
+popover.emoji-picker
+{
+    padding-left: 0;
+    padding-right: 0;
+    
+    entry.search
+    {
+        margin: 3px 5px 5px 5px;
+    }
+}
+
+button.emoji-section
+{
+    border-color:  transparent;
+    border-radius: 0;
+    border-style:  none none solid;
+    border-width:  3px;
+    
+    margin:     2px 4px 2px 4px;
+    min-width:  32px;
+    min-height: 28px;
+    padding:    3px 0 0;
+    
+    // Reset props inherited from the button style
+    //
+    background:  none;
+    box-shadow:  none;
+    text-shadow: none;
+    
+    outline-offset: -5px;
+    
+    &:first-child { margin-left:  7px; }
+    &:last-child  { margin-right: 7px; }
+    
+    &:backdrop:not(:checked) { border-color: transparent; }
+    &:hover   { border-color: if($variant == 'light', $borders_color, transparentize($fg_color, 0.9)); }
+    &:checked { border-color: $selected_bg_color;                                                       }
+    
+    label
+    {
+        opacity: 0.55;
+        padding: 0;
+    }
+    
+    &:hover   label { opacity: 0.775; }
+    &:checked label { opacity: 1;     }
+}
+
+popover.emoji-picker .emoji
+{
+    font-size: x-large;
+    padding:   6px;
+    
+    :hover
+    {
+        background:    $selected_bg_color;
+        border-radius: 6px;
+    }
+}
+
+popover.emoji-completion arrow
+{
+    background: none;
+    border:     none;
+}
+
+popover.emoji-completion contents row box
+{
+    padding: 2px 10px;
+}
+
+popover.emoji-completion .emoji:hover
+{
+    background: $popover_hover_color;
+}

themes/adwaita-refactored/common/entry.scss

@@ -0,0 +1,349 @@
+//
+// Text entry widget styles
+//
+
+%entry,
+entry
+{
+    %entry_basic, &
+    {
+        border:        1px solid;
+        border-radius: $button_radius;
+        min-height:    $_entry_height;
+        padding-left:  8px;
+        padding-right: 8px;
+        transition:    all 200ms $ease-out-quad;
+
+        @include entry(normal);
+
+        // Icons inside of the entry
+        //
+        image
+        {
+            &.left  { margin-right: 6px; }
+            &.right { margin-left:  6px; }
+        }
+
+
+        &.flat
+        {
+            &:focus,
+            &:backdrop,
+            &:disabled,
+            &:backdrop:disabled,
+            &
+            {
+                background-color: transparent;
+                border-color:     transparent;
+                border-radius:    0;
+                min-height:       0;
+                padding:          2px;
+            }
+        }
+
+        &:focus
+        {
+            @include entry(focus);
+        }
+
+        &:disabled
+        {
+            @include entry(insensitive);
+        }
+
+        &:backdrop
+        {
+            @include entry(backdrop);
+
+            transition: $backdrop_transition;
+        }
+
+        &:backdrop:disabled
+        {
+            @include entry(backdrop-insensitive);
+        }
+
+        selection
+        {
+            @extend %selected_items;
+        }
+
+        // Entry error and warning style
+        //
+        @each $e_type, $e_color in (error, $error_color),
+                                   (warning, $warning_color)
+        {
+            &.#{$e_type}
+            {
+                border-color: entry_focus_border($e_color);
+                color:        $e_color;
+
+                &:focus
+                {
+                    @include entry(focus, $e_color);
+                }
+
+                selection
+                {
+                    background-color: $e_color;
+                }
+            }
+        }
+
+        // Entry icons colors
+        //
+        image
+        {
+            color: mix($fg_color, $base_color, 80%);
+
+            &:hover
+            {
+                color: $fg_color;
+            }
+
+            &:active
+            {
+                color: $selected_bg_color;
+            }
+
+            &:backdrop
+            {
+                color: mix($backdrop_fg_color, $backdrop_base_color, 80%);
+            }
+        }
+
+        &:drop(active)
+        {
+            &:focus, &
+            {
+                border-color: $drop_target_color;
+                box-shadow:   inset 0 0 0 1px $drop_target_color;
+            }
+        }
+
+        .osd &
+        {
+            @include entry(osd);
+
+            &:focus
+            {
+                @include entry(osd-focus);
+            }
+
+            &:backdrop
+            {
+                @include entry(osd-backdrop);
+            }
+
+            &:disabled
+            {
+                @include entry(osd-insensitive);
+            }
+        }
+    }
+
+    progress
+    {
+        margin: 2px -6px;
+        background-color: transparent;
+        background-image: none;
+        border-radius: 0;
+        border-width: 0 0 2px;
+        border-color: $progress_bg_color;
+        border-style: solid;
+        box-shadow: none;
+
+        &:backdrop
+        {
+            background-color: transparent;
+        }
+    }
+
+    // Linked entries
+    //
+    .linked:not(.vertical) > & { @extend %linked; }
+    .linked:not(.vertical) > &:focus + &,
+    .linked:not(.vertical) > &:focus + button,
+    .linked:not(.vertical) > &:focus + combobox > box > button.combo { border-left-color: entry_focus_border(); }
+
+    .linked:not(.vertical) > &:focus.error + &,
+    .linked:not(.vertical) > &:focus.error + button,
+    .linked:not(.vertical) > &:focus.error + combobox > box > button.combo { border-left-color: entry_focus_border($error_color); }
+
+    .linked:not(.vertical) > &:drop(active) + &,
+    .linked:not(.vertical) > &:drop(active) + button,
+    .linked:not(.vertical) > &:drop(active) + combobox > box > button.combo { border-left-color: $drop_target_color; }
+
+    // Vertically linked entries
+    // FIXME: take care of "colored" entries
+    //
+    .linked.vertical > &
+    {
+        @extend %linked_vertical;
+
+        // Brighter border between linked entries
+        //
+        &:not(:disabled) + entry:not(:disabled),
+        &:not(:disabled) + %entry:not(:disabled)
+        {
+            border-top-color: mix($borders_color, $base_color, 30%);
+
+            &:backdrop
+            {
+                border-top-color: mix($backdrop_borders_color, $backdrop_base_color, 30%);
+            }
+        }
+
+        // Brighter border between linked insensitive entries
+        //
+        &:disabled + %entry:disabled,
+        &:disabled + entry:disabled
+        {
+            border-top-color: mix($borders_color, $base_color, 30%);
+        }
+
+        // Color back the top border of a linked focused entry following another entry.
+        // :not(:only-child) is a specificity bump hack.
+        //
+        + %entry:focus:not(:only-child),
+        + entry:focus:not(:only-child) { border-top-color: entry_focus_border(); }
+
+        + %entry:focus.error:not(:only-child),
+        + entry:focus.error:not(:only-child) { border-top-color: entry_focus_border($error_color); }
+
+        + %entry:drop(active):not(:only-child),
+        + entry:drop(active):not(:only-child) { border-top-color: $drop_target_color; }
+
+        // This takes care of coloring the top border of the focused entry subsequent widget.
+        // :not(:only-child) is a specificity bump hack.
+        //
+        &:focus:not(:only-child)
+        {
+            + %entry,
+            + entry,
+            + button,
+            + combobox > box > button.combo
+            {
+                border-top-color: entry_focus_border();
+            }
+        }
+
+        &:focus.error:not(:only-child)
+        {
+            + %entry,
+            + entry,
+            + button,
+            + combobox > box > button.combo
+            {
+                border-top-color: entry_focus_border($error_color);
+            }
+        }
+
+        &:drop(active):not(:only-child)
+        {
+            + %entry,
+            + entry,
+            + button,
+            + combobox > box > button.combo
+            {
+                border-top-color: $drop_target_color;
+            }
+        }
+    }
+
+    &.error
+    {
+        color: $error_color;
+    }
+}
+
+treeview entry
+{
+    &:focus
+    {
+        // Specificity bump hack
+        //
+        &:dir(rtl), &:dir(ltr)
+        {
+            background-color:    $base_color;
+            transition-property: color, background;
+        }
+    }
+
+    &.flat, &
+    {
+        border-radius:    0;
+        background-image: none;
+        background-color: $base_color;
+
+        &:focus
+        {
+            border-color: $selected_bg_color;
+        }
+    }
+}
+
+.entry-tag
+{
+    // Sizing
+    //
+    margin-top:    2px;
+    margin-bottom: 2px;
+    padding:       5px;
+
+
+    // Side margins: compensate the entry padding with a negative margin
+    // then the negative margin itself
+    //
+    :dir(ltr) &
+    {
+        margin-left: 8px;
+        margin-right: -5px;
+    }
+    :dir(rtl) &
+    {
+        margin-left: -5px;
+        margin-right: 8px;
+    }
+
+    border-style: none;
+
+    $_entry_tag_color: if($variant=='light', $selected_fg_color, $base_color);
+    color:             $_entry_tag_color;
+
+    $_entry_tag_bg:   if($variant=='light', $selected_bg_color, mix($fg_color, $base_color, 50%));
+    background-color: $_entry_tag_bg;
+
+    &:hover
+    {
+        background-color: lighten($_entry_tag_bg, 10%);
+    }
+
+    :backdrop &
+    {
+        background-color: if($variant=='light', $selected_bg_color,
+                                                 mix($backdrop_fg_color, $backdrop_base_color, 50%));
+        color:            $backdrop_base_color;
+    }
+
+    &.button
+    {
+        background-color: transparent;
+        color:            transparentize($_entry_tag_color, 0.3);
+    }
+
+    :not(:backdrop) &.button
+    {
+        &:hover
+        {
+            border: 1px solid $_entry_tag_bg;
+            color:  $_entry_tag_color;
+        }
+
+        &:active
+        {
+            background-color: $_entry_tag_bg;
+            color:            transparentize($_entry_tag_color, 0.3);
+        }
+    }
+}

themes/adwaita-refactored/common/expander.scss

@@ -0,0 +1,27 @@
+//
+// Expander styles
+//
+
+expander
+{
+    title > arrow
+    {
+        min-width: 16px;
+        min-height: 16px;
+        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+        &:dir(rtl)
+        {
+            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
+        }
+        
+        &:hover             { color: lighten($fg_color,30%);      }
+        &:disabled          { color: $insensitive_fg_color;       }
+        &:disabled:backdrop { color: $backdrop_insensitive_color; }
+        
+        &:checked
+        {
+            -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+        }
+    }
+}

themes/adwaita-refactored/common/filechooserdialog.scss

@@ -0,0 +1,27 @@
+//
+// File chooser dialog styles
+//
+
+filechooser
+{
+    .dialog-action-box
+    {
+        border-top: 1px solid $borders_color;
+        
+        &:backdrop
+        {
+            border-top-color: $backdrop_borders_color;
+        }
+    }
+    
+    #pathbarbox
+    {
+        border-bottom: 1px solid $bg_color;
+    }
+}
+
+filechooserbutton:drop(active)
+{
+    border-color: transparent;
+    box-shadow:   none;
+}

themes/adwaita-refactored/common/frame.scss

@@ -0,0 +1,122 @@
+//
+// Frame styles
+//
+
+frame > border,
+.frame
+{
+    border:        1px solid $borders_color;
+    border-radius: 0;
+    box-shadow:    none;
+    margin:        0;
+    padding:       0;
+    
+    &.flat
+    {
+        border-style: none;
+    }
+    
+    &:backdrop
+    {
+        border-color: $backdrop_borders_color;
+    }
+}
+
+actionbar > revealer > box
+{
+    border-top: 1px solid $borders_color;
+    padding:    6px;
+
+    &:backdrop
+    {
+        border-color: $backdrop_borders_color;
+    }
+}
+
+scrolledwindow
+{
+    // Avoid double borders when viewport inside scrolled window
+    viewport.frame
+    { 
+        border-style: none;
+    }
+    
+    // This is used when content is touch-dragged past boundaries.
+    //
+    // Draws a box on top of the content, the size changes programmatically.
+    //
+    overshoot
+    {
+        &.top
+        {
+            @include overshoot(top);
+
+            &:backdrop
+            {
+                @include overshoot(top, backdrop);
+            }
+        }
+        
+        &.bottom
+        {
+            @include overshoot(bottom);
+
+            &:backdrop
+            {
+                @include overshoot(bottom, backdrop);
+            }
+        }
+        
+        &.left
+        {
+            @include overshoot(left);
+
+            &:backdrop
+            {
+                @include overshoot(left, backdrop);
+            }
+        }
+        
+        &.right
+        {
+            @include overshoot(right);
+
+            &:backdrop
+            {
+                @include overshoot(right, backdrop);
+            }
+        }
+    }
+    
+    // The small square between two scrollbars
+    //
+    junction
+    {
+        // The border image is used to add the missing dot between the borders
+        //
+        background-color: $scrollbar_bg_color;
+        border-color:     transparent;
+        border-image:     linear-gradient(to bottom, $borders_color 1px, transparent 1px) 0 0 0 1 / 0 1px stretch;
+        
+        &:dir(rtl)
+        {
+            border-image-slice: 0 1 0 0;
+        }
+        
+        &:backdrop
+        {
+            background-color:    $backdrop_scrollbar_bg_color;
+            border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
+            transition:          $backdrop_transition;
+        }
+    }
+}
+
+// vbox and hbox separators
+//
+separator
+{
+    background: transparentize(black, 0.9);
+    min-height: 1px;
+    min-width:  1px;
+}

themes/adwaita-refactored/common/gtkalpha.scss

@@ -0,0 +1,8 @@
+//
+// gtkalpha function (unsure whether to move to drawing)
+//
+
+@function gtkalpha($c, $a)
+{
+    @return unquote("alpha(#{$c}, #{$a})");
+}

themes/adwaita-refactored/common/headerbar.scss

@@ -0,0 +1,456 @@
+//
+// Headerbar styles
+//
+
+%titlebar,
+headerbar
+{
+    border-color:  $alt_borders_color;
+    border-radius: 0;
+    border-style:  solid;
+    border-width:  0 0 1px;
+    min-height:    $_headerbar_height;
+    padding:       0 6px;
+
+    @include headerbar_fill(darken($bg_color, 10%));
+
+    &:backdrop
+    {
+        background-color: $bg_color;
+        background-image: none;
+        border-color:     $backdrop_borders_color;
+        box-shadow:       inset 0 1px $top_hilight;
+
+        transition: $backdrop_transition;
+    }
+
+    .title {
+        font-weight:   bold;
+        padding-left:  12px;
+        padding-right: 12px;
+    }
+
+    .subtitle {
+        font-size:     smaller;
+        padding-left:  12px;
+        padding-right: 12px;
+
+        @extend .dim-label;
+    }
+
+    // Darken switchbuttons for headerbars. issue #1588
+    //
+    stackswitcher button:checked,
+    button.toggle:checked
+    {
+        background:       if($variant == 'light', image(darken($bg_color, 17%)), image(darken($bg_color, 9%)));
+        border-color:     darken($borders_color, 3%);
+        border-top-color: darken($borders_color, 8%);
+
+        &:backdrop
+        {
+            @include button(backdrop-active);
+        }
+    }
+
+    .selection-mode &,
+    &.selection-mode
+    {
+        $_hc: mix($top_hilight, $suggested_bg_color, 50%); // Hilight color
+
+        border-color: $suggested_border_color;
+        color:        $selected_fg_color;
+        text-shadow:  0 -1px transparentize(black, 0.5);
+
+        @include headerbar_fill($suggested_bg_color, $_hc);
+
+        &:backdrop
+        {
+            background-color: $suggested_bg_color;
+            background-image: none;
+            box-shadow:       inset 0 1px mix($top_hilight, $suggested_bg_color, 60%);
+
+            label
+            {
+                color:       $selected_fg_color;
+                text-shadow: none;
+            }
+        }
+
+        .subtitle:link
+        {
+            @extend %link_selected;
+        }
+
+        button
+        {
+            @include button(normal, $suggested_bg_color, $selected_fg_color);
+
+            @at-root %selection_mode_button_flat,
+            &.flat
+            {
+                @include button(undecorated);
+            }
+
+            &:hover
+            {
+                @include button(hover, $suggested_bg_color, $selected_fg_color);
+            }
+
+            &:active,
+            &:checked,
+            &.toggle:checked,
+            &.toggle:active
+            {
+                @include button(active, $suggested_bg_color, $selected_fg_color);
+            }
+
+            &:backdrop
+            {
+                &.flat, &
+                {
+                    @include button(backdrop, $suggested_bg_color, $selected_fg_color);
+
+                    border-color:     $suggested_border_color;
+                    -gtk-icon-effect: none;
+
+                    &:active,
+                    &:checked
+                    {
+                        @include button(backdrop-active, $suggested_bg_color, $selected_fg_color);
+
+                        border-color: $suggested_border_color;
+                    }
+
+                    &:disabled
+                    {
+                        @include button(backdrop-insensitive, $suggested_bg_color, $selected_fg_color);
+
+                        border-color: $suggested_border_color;
+
+                        &:active, &:checked
+                        {
+                            @include button(backdrop-insensitive-active, $suggested_bg_color, $selected_fg_color);
+
+                            border-color: $suggested_border_color;
+                        }
+                    }
+                }
+            }
+
+            @at-root %selection_mode_button_flat,
+            &.flat
+            {
+                &:backdrop,
+                &:disabled,
+                &:backdrop:disabled
+                {
+                    @include button(undecorated);
+                }
+            }
+
+            &:disabled
+            {
+                @include button(insensitive, $suggested_bg_color, $selected_fg_color);
+
+                &:active,
+                &:checked
+                {
+                    @include button(insensitive-active, $suggested_bg_color, $selected_fg_color);
+                }
+            }
+
+            &.suggested-action
+            {
+                @include button(normal);
+
+                border-color: $suggested_border_color;
+
+                &:hover
+                {
+                    @include button(hover);
+
+                    border-color: $suggested_border_color;
+                }
+
+                &:active
+                {
+                    @include button(active);
+
+                    border-color: $suggested_border_color;
+                }
+
+                &:disabled
+                {
+                    @include button(insensitive);
+
+                    border-color: $suggested_border_color;
+                }
+
+                &:backdrop
+                {
+                    @include button(backdrop);
+
+                    border-color: $suggested_border_color;
+                }
+
+                &:backdrop:disabled
+                {
+                    @include button(backdrop-insensitive);
+
+                    border-color: $suggested_border_color;
+                }
+            }
+        }
+
+        .selection-menu
+        {
+            &:backdrop, &
+            {
+                background-color: transparentize($suggested_bg_color, 1);
+                background-image: none;
+                border-color:     transparentize($suggested_bg_color, 1);
+                box-shadow:       none;
+                min-height:       20px;
+                padding:          $_sel_menu_pad;
+
+                arrow
+                {
+                    -GtkArrow-arrow-scaling: 1;
+                }
+
+                .arrow
+                {
+                    color: transparentize($selected_fg_color, 0.5);
+                    -gtk-icon-shadow: none;
+                    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+                }
+            }
+        }
+    }
+
+    // Squared corners when the window is maximized, tiled, or fullscreen
+    //
+    .tiled        &,
+    .tiled-top    &,
+    .tiled-right  &,
+    .tiled-bottom &,
+    .tiled-left   &,
+    .maximized    &,
+    .fullscreen   &
+    {
+        &:backdrop, &
+        {
+            border-radius: 0;
+        }
+    }
+
+    &.default-decoration
+    {
+        min-height: 28px;
+        padding:    4px;
+
+        button.titlebutton
+        {
+            min-height: 26px;
+            min-width: 26px;
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    // Hide the close button separator
+    //
+    separator.titlebutton
+    {
+        opacity: 0;
+    }
+
+    .solid-csd &
+    {
+        &:backdrop, &
+        {
+            // Specificity bump
+            //
+            &:dir(rtl), &:dir(ltr)
+            {
+                margin-left:   -1px;
+                margin-right:  -1px;
+                margin-top:    -1px;
+                border-radius: 0;
+                box-shadow:    none;
+            }
+        }
+     }
+}
+
+headerbar
+{
+    // Add vertical margins to common widget on the headerbar to avoid them spanning
+    // the whole height
+    //
+    entry,
+    spinbutton,
+    separator:not(.sidebar),
+    button
+    {
+        margin-top:    $_hb_btn_pad;
+        margin-bottom: $_hb_btn_pad;
+    }
+
+    switch
+    {
+        margin-top:    $_switch_margin;
+        margin-bottom: $_switch_margin;
+    }
+
+    &.titlebar headerbar:not(.titlebar)
+    {
+        // Drop the background of non-titlebar nested headerbars. This is needed to
+        // work around headerbar sliding animation issues without refactoring
+        // Adwaita's support of titlebars and headerbars as it may break
+        // applications.
+        //
+        // See https://gitlab.gnome.org/GNOME/gtk/issues/1264 for more information.
+        //
+        background: none;
+        box-shadow: none;
+    }
+}
+
+.background .titlebar
+{
+    &:backdrop, &
+    {
+        border-top-left-radius:  $window_radius;
+        border-top-right-radius: $window_radius;
+    }
+}
+
+.background.tiled        .titlebar,
+.background.tiled-top    .titlebar,
+.background.tiled-right  .titlebar,
+.background.tiled-bottom .titlebar,
+.background.tiled-left   .titlebar,
+.background.maximized    .titlebar,
+.background.solid-csd    .titlebar
+{
+    &:backdrop, &
+    {
+        border-top-left-radius:  0;
+        border-top-right-radius: 0;
+    }
+}
+
+// Headerbar border rounding
+//
+headerbar
+{
+    window separator:first-child + &,
+    window &:first-child
+    {
+        &:backdrop, &
+        {
+            border-top-left-radius: 7px;
+        }
+    }
+
+    window &:last-child
+    {
+        &:backdrop, &
+        {
+            border-top-right-radius: 7px;
+        }
+    }
+
+    // Tackles the stacked headerbars case
+    //
+    window stack &
+    {
+        &:first-child, &:last-child
+        {
+            &:backdrop, &
+            {
+                border-top-left-radius: 7px;
+                border-top-right-radius: 7px;
+            }
+        }
+    }
+
+    window.tiled        &,
+    window.tiled-top    &,
+    window.tiled-right  &,
+    window.tiled-bottom &,
+    window.tiled-left   &,
+    window.maximized    &,
+    window.fullscreen   &,
+    window.solid-csd    &
+    {
+        &, &:backdrop
+        {
+            &,
+            &:first-child,
+            &:last-child,
+            &:only-child
+            {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+        }
+    }
+}
+
+.titlebar:not(headerbar)
+{
+    window.csd > &
+    {
+        // In csd we assume every titlebar is a headerbar so reset anything, this is
+        // needed for split toolbars cases
+        //
+        background-color: transparent;
+        background-image: none;
+        border-color:     transparent;
+        border-style:     none;
+        box-shadow:       none;
+        padding:          0;
+    }
+
+    separator
+    {
+        background-color: $borders_color; // FIXME: Use darker border?
+    }
+
+    @extend %titlebar;
+}
+
+//
+// Development versions of apps to use a differently styled headerbar
+//
+window.devel
+{
+    headerbar.titlebar:not(.selection-mode)
+    {
+        $c: darken($bg_color, 10%);
+        $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"),
+                   image(transparent)) 90% 0/256px 256px no-repeat,
+                   linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.8)),
+                   linear-gradient(to top, darken($c, 3%), $c 3px, lighten($c, 6%));
+
+        @if $variant == 'dark'
+        {
+            $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"),
+                       image(transparent)) 90% 0/256px 256px no-repeat,
+                       linear-gradient(to right, transparent 65%, transparentize($selected_bg_color, 0.9)),
+                       linear-gradient(to top, lighten($c, 3%) 3px, lighten($c, 5%));
+        }
+
+        background: $bg_color $gradient;
+
+        &:backdrop
+        {
+            background: $bg_color cross-fade(10% -gtk-icontheme("system-run-symbolic"),
+                        image(transparent)) 90% 0/256px 256px no-repeat,
+                        image($bg_color); // background-color would flash
+        }
+    }
+}

themes/adwaita-refactored/common/icons.scss

@@ -0,0 +1,24 @@
+//
+// Icon styles
+//
+
+// Outline for low res icons
+//
+.lowres-icon
+{
+    -gtk-icon-shadow:  0   -1px rgba(0, 0, 0, 0.05),
+                       1px  0   rgba(0, 0, 0, 0.1),
+                       0    1px rgba(0, 0, 0, 0.3),
+                      -1px  0   rgba(0, 0, 0, 0.1);
+}
+
+// Dropshadow for large icons
+//
+.icon-dropshadow
+{
+    -gtk-icon-shadow:  0    1px 12px rgba(0, 0, 0, 0.05),
+                       0   -1px      rgba(0, 0, 0, 0.05),
+                       1px  0        rgba(0, 0, 0, 0.1),
+                       0    1px      rgba(0, 0, 0, 0.3),
+                      -1px  0        rgba(0, 0, 0, 0.1);
+}

themes/adwaita-refactored/common/infobar.scss

@@ -0,0 +1,94 @@
+//
+// Infobar styles
+//
+
+infobar
+{
+    border-style: none;
+    
+    &.action:hover > revealer > box
+    {
+        background-color: if($variant == 'light',
+                              desaturate(lighten(invert($selected_bg_color), 47%), 30%),
+                              desaturate(darken(invert($selected_bg_color),  42%), 70%)
+                          );
+        border-bottom:    1px solid lighten($borders_color, 5%);
+    }
+    
+    &.info,
+    &.question,
+    &.warning,
+    &.error
+    {
+        &:backdrop > revealer > box,
+        & > revealer > box
+        {
+            label,
+            &
+            {
+                color: $fg_color;
+            }
+            
+            background-color: if($variant == 'light',
+                                  desaturate(lighten(invert($selected_bg_color), 45%), 30%),
+                                  desaturate(darken(invert($selected_bg_color),  40%), 70%)
+                              );
+            border-bottom:    1px solid lighten($borders_color, 5%);
+        }
+        
+        text-shadow: none;
+        
+        &:backdrop
+        {
+            text-shadow: none;
+        }
+
+        button
+        {
+            // FIXME: extend selection mode buttons
+            //
+            @include button(normal, $bg_color, $fg_color, none);
+
+            &:hover    { @include button(hover,       $bg_color, $fg_color, none); }
+            
+            &:active,
+            &:checked  { @include button(active,      $bg_color, $fg_color, none); }
+
+            &:disabled { @include button(insensitive, $bg_color, $fg_color, none); }
+
+            &:backdrop
+            {
+                @include button(backdrop, $bg_color, $fg_color, none);
+
+                border-color: _border_color($bg_color);
+
+                &:disabled
+                {
+                    @include button(backdrop-insensitive, $bg_color, $fg_color, none);
+
+                    border-color: _border_color($bg_color);
+                }
+            }
+
+            &:backdrop,
+            &
+            {
+                label,
+                &
+                {
+                    color: $fg_color;
+                }
+            }
+        }
+
+        selection
+        {
+            background-color: darken($bg_color, 10%);
+        }
+
+        *:link
+        {
+            color: $link_color;
+        }
+    }
+}

themes/adwaita-refactored/common/levelbar.scss

@@ -0,0 +1,104 @@
+//
+// Levelbar styles
+//
+
+levelbar
+{
+    &.horizontal
+    {
+        block
+        {
+            min-height: 1px;
+        }
+        
+        &.discrete block
+        {
+            margin:    0 1px;
+            min-width: 32px;
+        }
+    }
+    
+    &.vertical
+    {
+        block
+        {
+            min-width: 1px;
+        }
+
+        &.discrete block
+        {
+            margin:     1px 0;
+            min-height: 32px;
+        }
+    }
+    
+    &:backdrop
+    {
+        transition: $backdrop_transition;
+    }
+    
+    trough
+    {
+        border:        1px solid;
+        border-radius: 3px;
+        padding:       2px;
+        
+        @include entry(normal);
+        
+        &:backdrop
+        {
+            @include entry(backdrop);
+        }
+    }
+    
+    block
+    {
+        border:        1px solid;
+        border-radius: 1px;
+
+        &.low
+        {
+            background-color: $warning_color;
+            border-color:     if($variant == 'light', darken($warning_color, 20%), $warning_color);
+            
+            &:backdrop
+            {
+                border-color: $warning_color;
+            }
+        }
+        
+        &.high,
+        &:not(.empty)
+        {
+            background-color: $progress_bg_color;
+            border-color:     if($variant == 'light', darken($progress_bg_color, 20%), $progress_bg_color);
+            
+            &:backdrop
+            {
+                border-color: $progress_bg_color;
+            }
+        }
+        
+        &.full
+        {
+            background-color: $success_color;
+            border-color:     if($variant == 'light', darken($success_color, 20%), $success_color);
+            
+            &:backdrop
+            {
+                border-color: $success_color;
+            }
+        }
+        
+        &.empty
+        {
+            background-color: transparent;
+            border-color:     if($variant == 'light', transparentize($fg_color,0.8), transparentize($fg_color, 0.9));
+            
+            &:backdrop
+            {
+                border-color: transparentize($backdrop_fg_color, 0.85);
+            }
+        }
+    }
+}

themes/adwaita-refactored/common/link.scss

@@ -0,0 +1,89 @@
+//
+// Link widget styles
+//
+
+%link,
+*:link
+{
+    color: $link_color;
+
+    &:visited
+    {
+        color: $link_visited_color;
+
+        *:selected &
+        {
+            color: mix($selected_fg_color, $link_visited_color, 60%);
+        }
+    }
+
+    &:hover
+    {
+        $_fg:  lighten($link_color, 10%);
+        color: $_fg;
+
+        *:selected &
+        {
+            color: mix($selected_fg_color, $_fg, 90%);
+        }
+    }
+
+    &:active
+    {
+        color: $link_color;
+
+        *:selected &
+        {
+            color: mix($selected_fg_color, $link_color, 80%);
+        }
+    }
+
+    &:disabled,
+    &:disabled:backdrop
+    {
+        color: transparentize(desaturate($link_color, 100%), 0.2);
+    }
+
+    &:backdrop
+    {
+        &:backdrop:hover,
+        &:backdrop:hover:selected,
+        &
+        {
+            color: transparentize($link_color, 0.1);
+        }
+    }
+
+    @at-root %link_selected,
+    &:selected,
+    *:selected &
+    {
+        color: mix($selected_fg_color, $link_color, 80%);
+    }
+}
+
+button:link,
+button:visited
+{
+    @extend %undecorated_button;
+
+    @extend %link;
+
+    text-shadow: none;
+
+    &:hover,
+    &:active,
+    &:checked
+    {
+        @extend %undecorated_button;
+
+        text-shadow: none;
+    }
+
+    > label
+    {
+        @extend %link;
+
+        text-decoration-line: underline;
+    }
+}

themes/adwaita-refactored/common/list.scss

@@ -0,0 +1,80 @@
+//
+// List styles
+//
+
+list
+{
+    background-color: $base_color;
+    border-color:     $borders_color;
+    color:            $text_color;
+    
+    &:backdrop
+    {
+        background-color: $backdrop_base_color;
+        border-color:     $backdrop_borders_color;
+        color:            $backdrop_text_color;
+    }
+    
+    row
+    {
+        padding: 2px;
+    }
+}
+
+row
+{
+    transition: all 150ms $ease-out-quad;
+    
+    &:hover
+    {
+        transition: none;
+    }
+    
+    &:backdrop
+    {
+        transition: $backdrop_transition;
+    }
+    
+    &.activatable
+    {
+        &.has-open-popup, // This is for indicating which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411        
+        &:hover
+        {
+            background-color: if($variant == light, transparentize($fg_color, 0.9), transparentize($fg_color, 0.95));
+        }
+        
+        &:active
+        {
+            box-shadow: inset 0 2px 2px -2px transparentize(black, 0.8);
+        }
+        
+        &:backdrop:hover
+        {
+            background-color: transparent;
+        }
+        
+        &:selected
+        {
+            &:active
+            {
+                box-shadow: inset 0 2px 3px -1px transparentize(black, 0.5);
+            }
+
+            &.has-open-popup,
+            &:hover
+            {
+                background-color: mix($fg_color, $selected_bg_color, 10%);
+            }
+            
+            &:backdrop
+            {
+                background-color: $selected_bg_color;
+            }
+        }
+    }
+    
+    &:selected
+    {
+        @extend %selected_items;
+    }
+}

themes/adwaita-refactored/common/menu.scss

@@ -0,0 +1,215 @@
+//
+// Menu styles
+//
+
+menubar,
+.menubar
+{
+    box-shadow: inset 0 -1px transparentize(black, 0.9);
+    padding:    0px;
+    -GtkWidget-window-dragging: true;
+
+    &:backdrop
+    {
+        background-color: $backdrop_bg_color;
+    }
+
+    > menuitem
+    {
+        min-height: 16px;
+        padding: 4px 8px;
+
+        // Remove padding and rounding from menubar submenus
+        //
+        menu
+        {
+            // Specificity bump
+            //
+            &:dir(rtl),
+            &:dir(ltr)
+            {
+                border-radius: 0;
+                padding: 0;
+            }
+        }
+
+        // Seems like it :hover even with keyboard focus
+        //
+        &:hover
+        {
+            box-shadow: inset 0 -3px $selected_bg_color;
+            color:      $link_color;
+        }
+
+        &:disabled
+        {
+            box-shadow: none;
+            color:      $insensitive_fg_color;
+        }
+    }
+
+    // Remove padding and rounding from menubar submenu decoration
+    .csd.popup decoration
+    {
+        border-radius: 0;
+    }
+}
+
+// Needed to make the border-radius of menus work
+// otherwise the background bleeds out of the menu edges
+//
+.background.popup
+{
+    background-color: transparent;
+}
+
+menu,
+.menu,
+.context-menu
+{
+    background-color: $menu_color;
+    border:           1px solid $borders_color; // Adds borders in a non composited env
+    margin:           4px;                      // See https://bugzilla.gnome.org/show_bug.cgi?id=591258
+    padding:          4px 0px;
+
+    .csd &
+    {
+        border:        none; // Axes borders in a composited env
+        border-radius: $menu_radius;
+    }
+
+    &:backdrop
+    {
+        background-color: $backdrop_menu_color;
+    }
+
+    menuitem
+    {
+        min-height:  16px;
+        min-width:   40px;
+        padding:     4px 6px;
+        text-shadow: none;
+
+        &:hover
+        {
+            background-color: $selected_bg_color;
+            color:            $selected_fg_color;
+        }
+
+        &:disabled
+        {
+            color: $insensitive_fg_color;
+
+            &:backdrop
+            {
+                color: $backdrop_insensitive_color;
+            }
+        }
+
+        &:backdrop,
+        &:backdrop:hover
+        {
+             background-color: transparent;
+             color:            $backdrop_fg_color;
+        }
+
+        // Submenu indicators
+        //
+        arrow
+        {
+            min-height: 16px;
+            min-width: 16px;
+
+            &:dir(ltr)
+            {
+                margin-left: 10px;
+                -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+            }
+
+            &:dir(rtl)
+            {
+                -gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
+                margin-right: 10px;
+            }
+        }
+
+        // Avoids labels color being overridden, see
+        // https://bugzilla.gnome.org/show_bug.cgi?id=767058
+        //
+        label
+        {
+            &:dir(rtl),
+            &:dir(ltr)
+            {
+                color: inherit; 
+            }
+        }
+    }
+
+    // Overflow arrows
+    //
+    > arrow
+    {
+        @include button(undecorated);
+
+        background-color: $menu_color;
+        border-radius:    0;
+        min-height:       16px;
+        min-width:        16px;
+        padding:          4px;
+
+        &.top
+        {
+            border-bottom:           1px solid mix($fg_color, $base_color, 10%);
+            border-top-right-radius: $menu_radius;
+            border-top-left-radius:  $menu_radius;
+            margin-top:              -4px;
+            -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
+        }
+
+        &.bottom
+        {
+            border-bottom-left-radius:  $menu_radius;
+            border-bottom-right-radius: $menu_radius;
+            border-top:                 1px solid mix($fg_color, $base_color, 10%);
+            margin-bottom:              -12px;
+            margin-top:                 8px;
+            -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+        }
+
+        &:hover
+        {
+            background-color: mix($fg_color, $base_color, 10%);
+        }
+
+        &:backdrop
+        {
+            background-color: $backdrop_menu_color;
+        }
+
+        &:disabled
+        {
+            background-color: transparent;
+            border-color:     transparent;
+            color:            transparent;
+        }
+    }
+}
+
+menuitem
+{
+    accelerator
+    {
+        color: gtkalpha(currentColor, 0.55);
+    }
+
+    check,
+    radio
+    {
+        min-height: 16px;
+        min-width:  16px;
+
+        &:dir(ltr) { margin-right: 7px; }
+        &:dir(rtl) { margin-left: 7px;  }
+    }
+}

themes/adwaita-refactored/common/messagedialog.scss

@@ -0,0 +1,52 @@
+//
+// Message dialog styles
+//
+
+messagedialog
+{
+    .titlebar
+    {
+        min-height: 20px;
+        background-image: none;
+        background-color: $bg_color;
+        border-style: none;
+        border-top-left-radius: 7px;
+        border-top-right-radius: 7px;
+    }
+
+    // Rounded bottom border styling for CSD version
+    //
+    &.csd
+    {
+        &.background
+        {
+            // Bigger radius for better antialiasing
+            //
+            border-bottom-left-radius: $window_radius+1;
+            border-bottom-right-radius: $window_radius+1;
+        }
+        
+        .dialog-action-area button
+        {
+            border-right-style:  none;
+            border-bottom-style: none;
+            border-radius:       0;
+            padding:             10px 14px; // Labels are not vertically centered on message dialog, this is a workaround
+            -gtk-outline-radius: 0;
+            
+            &:first-child
+            {
+                border-left-style: none;
+
+                border-bottom-left-radius:       $button_radius + 2;
+                -gtk-outline-bottom-left-radius: $button_radius + 2;
+            }
+            
+            &:last-child
+            {
+                border-bottom-right-radius:       $button_radius + 2;
+                -gtk-outline-bottom-right-radius: $button_radius + 2;
+            }
+        }
+    }
+}

themes/adwaita-refactored/common/misc.scss

@@ -0,0 +1,64 @@
+//
+// Misc. styles
+//
+
+// Content view (grid/list)
+//
+.content-view
+{
+    background-color: darken($bg_color,7%);
+    
+    &:hover
+    {
+        -gtk-icon-effect: highlight;
+    }
+    
+    &:backdrop
+    {
+        background-color: darken($bg_color, 7%);
+    }
+    
+    rubberband, .rubberband
+    {
+        @extend rubberband;
+    }
+}
+
+.scale-popup
+{
+    .osd &
+    {
+        @extend %osd;
+    }
+    
+    // Quick hack, redo properly
+    //
+    .osd & button.flat
+    { 
+        border-radius: 5px;
+        border-style:  none;
+    }
+    
+    // +/- buttons on GtkVolumeButton popup
+    //
+    button
+    {
+        &:hover
+        {
+            @extend %undecorated_button;
+            
+            background-color: transparentize($fg_color,0.9);
+            border-radius:    5px;
+        }
+
+        &:backdrop
+        {
+            &:hover,
+            &:disabled,
+            &
+            {
+                @extend %undecorated_button;
+            }
+        }
+    }
+}

themes/adwaita-refactored/common/notebook.scss

@@ -0,0 +1,342 @@
+//
+// Notebook styles
+//
+
+notebook
+{
+    > header
+    {
+        background-color: $dark_fill;
+        border-color:     $borders_color;
+        border-width:     1px;
+        padding:          1px;
+
+        &:backdrop
+        {
+            background-color: $backdrop_dark_fill;
+            border-color:     $backdrop_borders_color;
+        }
+
+        tabs
+        {
+            margin: -1px;
+        }
+
+        &.top
+        {
+            border-bottom-style: solid;
+
+            > tabs
+            {
+                margin-bottom: -2px;
+
+                > tab
+                {
+                    &:hover    { box-shadow: inset 0 -4px $borders_color;     }
+                    &:backdrop { box-shadow: none;                            }
+                    &:checked  { box-shadow: inset 0 -4px $selected_bg_color; }
+                }
+            }
+        }
+
+        &.bottom
+        {
+            border-top-style: solid;
+
+            > tabs
+            {
+                margin-top: -2px;
+
+                > tab
+                {
+                    &:hover    { box-shadow: inset 0 4px $borders_color;     }
+                    &:backdrop { box-shadow: none;                           }
+                    &:checked  { box-shadow: inset 0 4px $selected_bg_color; }
+                }
+            }
+        }
+
+        &.left
+        {
+            border-right-style: solid;
+
+            > tabs
+            {
+                margin-right: -2px;
+                
+                > tab
+                {
+                    &:hover    { box-shadow: inset -4px 0 $borders_color;     }
+                    &:backdrop { box-shadow: none;                            }
+                    &:checked  { box-shadow: inset -4px 0 $selected_bg_color; }
+                }
+            }
+        }
+
+        &.right
+        {
+            border-left-style: solid;
+            
+            > tabs
+            {
+                margin-left: -2px;
+                
+                > tab
+                {
+                    &:hover    { box-shadow: inset 4px 0 $borders_color;     }
+                    &:backdrop { box-shadow: none;                           }
+                    &:checked  { box-shadow: inset 4px 0 $selected_bg_color; }
+                }
+            }
+        }
+
+        &.top > tabs > arrow
+        {
+            @extend %notebook_vert_arrows;
+
+            border-top-style: none;
+        }
+
+        &.bottom > tabs > arrow
+        {
+            @extend %notebook_vert_arrows;
+
+            border-bottom-style: none;
+        }
+
+        @at-root %notebook_vert_arrows
+        {
+            margin-left:   -5px;
+            margin-right:  -5px;
+            padding-left:   4px;
+            padding-right:  4px;
+            
+            &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+            &.up   { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');   }
+        }
+
+        &.left > tabs > arrow
+        {
+            @extend %notebook_horz_arrows;
+
+            border-left-style: none;
+        }
+
+        &.right > tabs > arrow
+        {
+            @extend %notebook_horz_arrows;
+            
+            border-right-style: none;
+        }
+
+        @at-root %notebook_horz_arrows
+        {
+            margin-bottom:  -5px;
+            margin-top:     -5px;
+            padding-bottom:  4px;
+            padding-top:     4px;
+
+            &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');   }
+            &.up   { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+        }
+
+        > tabs > arrow
+        {
+            @extend %button_basic;
+
+            @extend %button_basic_flat;
+
+            border-radius: 0;
+            min-height:    16px;
+            min-width:     16px;
+
+            &:hover:not(:active):not(:backdrop)
+            {
+                background-clip:  padding-box;
+                background-color: transparentize(white, 0.7);
+                background-image: none;
+                border-color:     transparent;
+                box-shadow:       none;
+            }
+
+            &:disabled
+            {
+                @include button(undecorated);
+            }
+        }
+
+        tab
+        {
+            border-color:    transparent; // For reorderable tabs
+            border-width:    1px;         //
+            color:           $fg_color;
+            font-weight:     normal;
+            min-height:      30px;
+            min-width:       30px;
+            outline-offset: -5px;
+            padding:         3px 12px;
+
+            &:hover
+            {
+                background-color: darken($bg_color,4%);
+                color:            $fg_color;
+
+                &.reorderable-page
+                {
+                    background-color: transparentize($bg_color,      0.8);
+                    border-color:     transparentize($borders_color, 0.7);
+                }
+            }
+
+            &:backdrop
+            {
+                color: mix($backdrop_fg_color, $backdrop_bg_color, 60%);
+                
+                &.reorderable-page
+                {
+                    background-color: transparent;
+                    border-color:     transparent;
+                }
+            }
+
+            &:checked
+            {
+                color: $fg_color;
+                
+                &.reorderable-page
+                {
+                    background-color: transparentize($bg_color,      0.5);
+                    border-color:     transparentize($borders_color, 0.5);
+
+                    &:hover
+                    {
+                        background-color: transparentize($bg_color, 0.3);
+                    }
+                }
+            }
+
+            &:backdrop:checked
+            {
+                color: $backdrop_fg_color;
+                
+                &.reorderable-page
+                {
+                    background-color: $backdrop_bg_color;
+                    border-color:     $backdrop_borders_color;
+                }
+            }
+
+            // Colors the button like the label, overridden otherwise
+            //
+            button.flat
+            {
+                padding: 0;
+                margin-top: 4px;
+                margin-bottom: 4px;
+
+                // FIXME: generalize .small-button?
+                min-width: 20px;
+                min-height: 20px;
+
+
+                &:hover
+                {
+                    color: currentColor;
+                }
+                
+                &,
+                &:backdrop
+                {
+                    color: gtkalpha(currentColor, 0.3);
+                }
+
+                &:last-child
+                {
+                    margin-left:   4px;
+                    margin-right: -4px;
+                }
+
+                &:first-child
+                {
+                    margin-left:  -4px;
+                    margin-right:  4px;
+                }
+            }
+        }
+
+        &.bottom,
+        &.top
+        {
+            tabs
+            {
+                padding-left:  4px;
+                padding-right: 4px;
+
+                &:not(:only-child)
+                {
+                    margin-left:  3px;
+                    margin-right: 3px;
+
+                    &:first-child { margin-left:  -1px; }
+                    &:last-child  { margin-right: -1px; }
+                }
+
+                tab
+                {
+                    margin-left:  4px;
+                    margin-right: 4px;
+
+                    &.reorderable-page
+                    {
+                        border-style: none solid;
+                    }
+                }
+            }
+        }
+        
+        &.left,
+        &.right
+        {
+            tabs
+            {
+                padding-bottom: 4px;
+                padding-top:    4px;
+                
+                &:not(:only-child)
+                {
+                    margin-bottom: 3px;
+                    margin-top:    3px;
+                    
+                    &:first-child { margin-top:    -1px; }
+                    &:last-child  { margin-bottom: -1px; }
+                }
+                
+                tab
+                {
+                    margin-bottom: 4px;
+                    margin-top:    4px;
+                    
+                    &.reorderable-page
+                    {
+                        border-style: solid none;
+                    }
+                }
+            }
+        }
+        
+        &.top    tab { padding-bottom: 4px; }
+        &.bottom tab { padding-top:    4px; }
+    }
+
+    // The :not(:only-child) is for "hidden" notebooks
+    //
+    > stack:not(:only-child)
+    { 
+        background-color: $base_color;
+        
+        &:backdrop
+        {
+            background-color: $backdrop_base_color;
+        }
+    }
+}

themes/adwaita-refactored/common/notification.scss

@@ -0,0 +1,31 @@
+//
+// Application notification styles
+//
+
+.app-notification,
+.app-notification.frame
+{
+    @extend %osd;
+    
+    background-color: $osd_bg_color;
+    background-clip:  padding-box;
+    background-image: linear-gradient(to bottom, transparentize(black, 0.8), transparent 2px);
+    border-radius:    0 0 5px 5px;
+    padding:          10px;
+    
+    &:backdrop
+    {
+        background-image: none;
+        transition:       $backdrop_transition;
+    }
+    
+    button
+    {
+        @extend %osd_button;
+    }
+    
+    border
+    {
+        border: none;
+    }
+}

themes/adwaita-refactored/common/paned.scss

@@ -0,0 +1,82 @@
+//
+// Pane(d) widget styles
+//
+
+paned
+{
+    > separator
+    {
+        background-color: transparent;
+        min-height:       1px;
+        min-width:        1px;
+        -gtk-icon-source: none; // Defeats the ugly default handle decoration
+        
+        // Workaround, using background istead of a border since the border will get
+        // rendered twice (?)
+        //
+        background-image: image($borders_color);
+        background-size:  1px 1px;
+        border-style:     none;
+        
+        &:selected { background-image: image($selected_bg_color);      } // FIXME is this needed?
+        &:backdrop { background-image: image($backdrop_borders_color); }
+        
+        &.wide
+        {
+            background-color: $bg_color;
+            background-image: image($borders_color), image($borders_color);
+            background-size:  1px 1px, 1px 1px;
+            min-height:       5px;
+            min-width:        5px;
+            
+            &:backdrop
+            {
+                background-color: $backdrop_bg_color;
+                background-image: image($backdrop_borders_color),
+                                  image($backdrop_borders_color);
+            }
+        }
+    }
+    
+    &.horizontal > separator
+    {
+        background-repeat: repeat-y;
+        
+        &:dir(ltr)
+        {
+            background-position: left;
+            margin:  0 -8px 0 0;
+            padding: 0  8px 0 0;
+        }
+        
+        &:dir(rtl) {
+            background-position: right;
+            margin:  0 0 0 -8px;
+            padding: 0 0 0  8px;
+        }
+        
+        &.wide
+        {
+            background-position: left,     right;
+            background-repeat:   repeat-y, repeat-y;
+            margin:  0;
+            padding: 0;
+        }
+    }
+    
+    &.vertical > separator
+    {
+        background-position: top;
+        background-repeat:   repeat-x;
+        margin:  0 0 -8px 0;
+        padding: 0 0  8px 0;
+        
+        &.wide
+        {
+            background-repeat:   repeat-x, repeat-x;
+            background-position: bottom,   top;
+            margin:  0;
+            padding: 0;
+        }
+    }
+}

themes/adwaita-refactored/common/pathbar.scss

@@ -0,0 +1,47 @@
+//
+// Pathbar styles
+//
+
+//
+// GtkPathBar does not work with just .linked, so we must override that. But we
+// can’t simply remove .linked from the widget as that might break other themes.
+//
+// Note also we select on filechooser to avoid interfering with NautilusPathBar.
+//
+filechooser .path-bar.linked > button
+{
+    @extend %linked_flippable;
+}
+
+.path-bar button
+{
+    &.text-button, &.image-button, &
+    {
+        padding-left:  4px;
+        padding-right: 4px;
+    }
+
+    &.text-button.image-button label
+    {
+        padding-left:  0;
+        padding-right: 0;
+    }
+
+    &.text-button.image-button, &
+    {
+        label:last-child  { padding-right: 8px; }
+        label:first-child { padding-left: 8px;  }
+    }
+
+    image
+    {
+        padding-left:  4px;
+        padding-right: 4px;
+    }
+
+    &.slider-button
+    {
+        padding-left:  0;
+        padding-right: 0;
+    }
+}

themes/adwaita-refactored/common/places.scss

@@ -0,0 +1,158 @@
+//
+// Places sidebar styles
+//
+
+$_placesidebar_icons_opacity: 0.7;
+
+// Dim the sidebar icons (see bug #786613 for details)
+//
+row image.sidebar-icon
+{
+    opacity: $_placesidebar_icons_opacity;
+}
+
+placessidebar
+{
+    > viewport.frame
+    {
+        border-style: none;
+    }
+    
+    row
+    {
+        // Needs overriding of the GtkListBoxRow padding
+        //
+        min-height: 36px;
+        padding:    0px;
+        
+        // Using margins/padding directly in the SidebarRow
+        // will make the animation of the new bookmark row jump
+        //
+        > revealer
+        {
+            padding: 0 14px;
+        }
+        
+        &:selected
+        {
+            color: $selected_fg_color;
+        }
+        
+        &:disabled
+        {
+            color: $insensitive_fg_color;
+        }
+        
+        &:backdrop
+        {
+            color: $backdrop_fg_color;
+            
+            &:selected
+            {
+                color: $backdrop_selected_fg_color;
+            }
+            
+            &:disabled
+            {
+                color: $backdrop_insensitive_color;
+            }
+        }
+        
+        image.sidebar-icon
+        {
+            &:dir(ltr) { padding-right: 8px; }
+            &:dir(rtl) { padding-left:  8px; }
+        }
+        
+        label.sidebar-label
+        {
+            &:dir(ltr) { padding-right: 2px; }
+            &:dir(rtl) { padding-left:  2px; }
+        }
+        
+        @at-root button.sidebar-button
+        {
+            @extend %button_basic_flat;
+            
+            @extend %button_selected_flat;
+            
+            border-radius: 100%;
+            margin-bottom: 3px;
+            margin-top:    3px;
+            min-height:    26px;
+            min-width:     26px;
+            padding:       0;
+            -gtk-outline-radius: 100%;
+            
+            &:not(:hover):not(:active),
+            &:backdrop
+            {
+                > image
+                {
+                    opacity: $_placesidebar_icons_opacity;
+                }
+            }
+        }
+        
+        // In the sidebar case it makes no sense to click the selected row
+        //
+        &:selected:active
+        {
+            box-shadow: none;
+        }
+        
+        &.sidebar-placeholder-row
+        {
+            background-clip:  content-box;
+            background-image: image($drop_target_color);
+            min-height:       2px;
+            padding:          0 8px;
+        }
+        
+        &.sidebar-new-bookmark-row
+        {
+            color: $selected_bg_color;
+        }
+        
+        &:drop(active):not(:disabled)
+        {
+            box-shadow: inset 0 1px $drop_target_color,
+                        inset 0 -1px $drop_target_color;
+            color:      $drop_target_color;
+                        
+            &:selected
+            {
+                background-color: $drop_target_color;
+                color:            $selected_fg_color;
+            }
+        }
+    }
+}
+
+placesview
+{
+    .server-list-button > image
+    {
+        transition: 200ms $ease-out-quad;
+        -gtk-icon-transform: rotate(0turn);
+    }
+    
+    .server-list-button:checked > image
+    {
+        transition: 200ms $ease-out-quad;
+        -gtk-icon-transform: rotate(-0.5turn);
+    }
+    
+    row.activatable:hover
+    {
+        background-color: transparent;
+    }
+
+    // This selects the "connect to server" label
+    //
+    > actionbar > revealer > box > label
+    {
+        padding-left:  8px;
+        padding-right: 8px;
+    }
+}

themes/adwaita-refactored/common/popover.scss

@@ -0,0 +1,72 @@
+//
+// Popover styles
+//
+
+popover.background
+{
+    background-color: $popover_bg_color;
+    padding:          2px;
+
+    .csd &,
+    &
+    {
+        border:        1px solid $borders_color;
+        border-radius: $popover_radius;
+    }
+
+    .csd &
+    {
+        $_popover_border: if($variant == 'light', transparentize(#000000, 0.77), transparentize(#000000, 0.25));
+
+        background-clip: padding-box;
+        border-color:    $_popover_border;
+    }
+
+    box-shadow: 0 1px 2px transparentize(black, 0.7);
+
+    &:backdrop
+    {
+        background-color: $backdrop_bg_color;
+        box-shadow:       none;
+    }
+
+    > list,
+    > .view,
+    > toolbar
+    {
+        background-color: transparent;
+        border-style:     none;
+    }
+
+    .csd &,
+    &
+    {
+        &.touch-selection,
+        &.magnifier
+        {
+            @extend %osd;
+
+            border: 1px solid transparentize(white, 0.9);
+
+            button
+            {
+                @extend %osd_button
+            }
+        }
+
+        &.osd
+        {
+            @extend %osd;
+        }
+    }
+
+    separator
+    {
+        margin: 3px;
+    }
+
+    list separator
+    {
+        margin: 0px;
+    }
+}

themes/adwaita-refactored/common/printdialog.scss

@@ -0,0 +1,25 @@
+//
+// Print dialog styles
+//
+
+printdialog
+{
+    paper
+    {
+        background: #FFFFFF;
+        border:     1px solid $borders_color;
+        color:      $fg_color;
+        padding:    0;
+
+        &:backdrop
+        {
+            border-color: $backdrop_borders_color;
+            color:        $backdrop_fg_color;
+        }
+    }
+    
+    .dialog-action-box
+    {
+        margin: 12px;
+    }
+}

themes/adwaita-refactored/common/progressbar.scss

@@ -0,0 +1,109 @@
+//
+// Progress bar styles
+//
+
+progressbar
+{
+    // Sizing
+    //
+    &.horizontal
+    {
+        trough,
+        progress
+        {
+            min-height: 2px;
+        }
+    }
+
+    &.vertical
+    {
+        trough,
+        progress
+        {
+            min-width: 2px;
+        }
+    }
+    
+    // The progress node is positioned after the trough border this moves it over it
+    //
+    &.horizontal progress { margin:  0   -1px; }
+    &.vertical   progress { margin: -1px  0;   }
+
+    // FIXME: insensitive state missing and some other state should be set probably
+    //
+    color:     transparentize($fg_color, 0.6);
+    font-size: smaller;
+    font-feature-settings: "tnum";
+    
+    &:backdrop
+    {
+        box-shadow: none;
+        transition: $backdrop_transition;
+    }
+    
+    trough
+    {
+        @extend %scale_trough;
+    }
+    
+    progress
+    {
+        @extend %scale_highlight;
+
+        border-radius: 1.5px;
+
+        &.left
+        {
+            border-top-left-radius:    2px;
+            border-bottom-left-radius: 2px;
+        }
+
+        &.right
+        {
+            border-top-right-radius:    2px;
+            border-bottom-right-radius: 2px;
+        }
+        
+        &.top
+        {
+            border-top-right-radius: 2px;
+            border-top-left-radius:  2px;
+        }
+        
+        &.bottom
+        {
+            border-bottom-right-radius: 2px;
+            border-bottom-left-radius:  2px;
+        }
+    }
+    
+    // progressbar.osd used for epiphany page loading process
+    //
+    &.osd
+    { 
+        background-color: transparent;
+        min-height:       3px;
+        min-width:        3px;
+        
+        trough
+        {
+            background-color: transparent;
+            border-radius:    0;
+            border-style:     none;
+            box-shadow:       none;
+        }
+
+        progress
+        {
+            border-radius: 0;
+            border-style:  none;
+        }
+    }
+
+    // Makes the progress indicator disappear, when the fraction is 0 
+    //
+    trough.empty progress
+    {
+        all: unset;
+    } 
+}

themes/adwaita-refactored/common/scale.scss

@@ -0,0 +1,656 @@
+//
+// Scale styles
+//
+
+%scale_trough
+{
+    background-color: $dark_fill;
+    border:           1px solid $borders_color;
+    border-radius:    3px;
+
+    &:disabled
+    {
+        background-color: $insensitive_bg_color;
+    }
+
+    &:backdrop
+    {
+        background-color: $backdrop_dark_fill;
+        border-color:     $backdrop_borders_color;
+        transition:       $backdrop_transition;
+
+        &:disabled
+        {
+            background-color: $insensitive_bg_color;
+        }
+    }
+
+    // On selected list rows
+    //
+    row:selected &
+    {
+        &:disabled,
+        &
+        {
+            border-color: $selected_borders_color;
+        }
+    }
+    
+    // OSD
+    //
+    .osd & 
+    {
+        background-color: transparentize($osd_borders_color, 0.2);
+        border-color:     $osd_borders_color;
+        
+        &:disabled
+        {
+            background-color: $osd_insensitive_bg_color;
+        }
+    }
+}
+
+%scale_highlight
+{
+    background-color: $progress_bg_color;
+    border:           1px solid $progress_border_color;
+    border-radius:    3px;
+    
+    &:disabled
+    {
+        background-color: transparent;
+        border-color:     transparent;
+    }
+    
+    &:backdrop
+    {
+        border-color: if($variant == 'light', $progress_bg_color, $progress_border_color);
+        
+        &:disabled
+        {
+            background-color: transparent;
+            border-color:     transparent;
+        }
+    }
+    
+    // On selected list rows
+    //
+    row:selected &
+    {
+        &:disabled,
+        &
+        {
+            border-color: $selected_borders_color;
+        }
+    }
+    
+    // OSD
+    //
+    .osd &
+    {
+        border-color: $osd_borders_color;
+
+        &:disabled
+        {
+            border-color: transparent;
+        }
+    }
+}
+
+scale
+{
+    // Sizing
+    //
+    $_marks_distance: 6px;
+    $_marks_length:   6px;
+    
+    min-height: 10px;
+    min-width:  10px;
+    padding:    12px;
+
+    // Those are inside the trough node, I need them to show their own border over the
+    // trough one, so negative margin
+    //
+    fill,
+    highlight
+    {
+        margin: -1px;
+    }
+    
+    // The slider is inside the trough, so to have make it bigger there's a negative
+    // margin
+    //
+    slider
+    {
+        margin:     -9px;
+        min-height:  18px;
+        min-width:   18px;
+    }
+    
+    // Click-and-hold the slider to activate
+    //
+    &.fine-tune
+    {
+        &.horizontal
+        {
+            min-height:     16px;
+            padding-top:    9px;
+            padding-bottom: 9px;
+        }
+
+        &.vertical
+        {
+            min-width:     16px;
+            padding-left:  9px;
+            padding-right: 9px;
+        }
+        
+        // To make the trough grow in fine-tune mode
+        //
+        slider
+        {
+            margin: -6px;
+        }
+        
+        fill,
+        highlight,
+        trough
+        {
+            border-radius:       5px;
+            -gtk-outline-radius: 7px;
+        }
+    }
+    
+    // The backing bit
+    //
+    trough
+    {
+        @extend %scale_trough;
+        
+        outline-offset:      2px;
+        -gtk-outline-radius: 5px;
+    }
+    
+    // The colored part of the backing bit
+    //
+    highlight
+    {
+        @extend %scale_highlight;
+    }
+    
+    // This is another differently styled part of the backing bit, the most relevant
+    // use case is for example in media player to indicate how much video stream as
+    // been cached
+    //
+    fill
+    {
+        @extend %scale_trough;
+        
+        &:backdrop,
+        &
+        {
+            background-color: $borders_color;
+        }
+        
+        &:disabled
+        {
+            &:backdrop,
+            &
+            {
+                background-color: transparent;
+                border-color:     transparent;
+            }
+        }
+        
+        // OSD
+        //
+        .osd &
+        {
+            background-color: mix($osd_fg_color, $osd_borders_color, 25%);
+            
+            &:disabled
+            {
+                &:backdrop,
+                &
+                {
+                    background-color: transparent;
+                    border-color:     transparent;
+                }
+            }
+        }
+    }
+    
+    slider
+    {
+        @include button(normal-alt, $edge: $shadow_color);
+        
+        border:              1px solid darken($alt_borders_color, 3%);
+        border-radius:       100%;
+        transition:          $button_transition;
+        transition-property: background, border, box-shadow;
+        
+        &:hover
+        {
+            @include button(hover-alt, $edge: $shadow_color);
+        }
+        
+        &:active
+        {
+            border-color: $progress_border_color;
+        }
+        
+        &:disabled
+        {
+            @include button(insensitive);
+        }
+        
+        &:backdrop
+        {
+            transition: $backdrop_transition;
+            
+            @include button(backdrop);
+            
+            &:disabled
+            {
+                @include button(backdrop-insensitive);
+            }
+        }
+        
+        // On selected list rows
+        //
+        row:selected &
+        {
+            &:disabled,
+            &
+            {
+                border-color: $selected_borders_color;
+            }
+        }
+        
+        // OSD
+        //
+        .osd &
+        {
+            @include button(osd);
+
+            border-color:     darken($osd_borders_color, 3%);
+            background-color: opacify($osd_bg_color, 1); // Solid background needed here
+            
+            &:hover
+            {
+                @include button(osd-hover);
+
+                background-color: opacify($osd_bg_color, 1); // Solid background needed here
+            }
+            
+            &:active
+            {
+                @include button(osd-active);
+
+                background-color: opacify($osd_bg_color, 1); // Solid background needed here
+            }
+            
+            &:disabled
+            {
+                @include button(osd-insensitive);
+
+                background-color: opacify($osd_bg_color, 1); // Solid background needed here
+            }
+            
+            &:backdrop
+            {
+                @include button(osd-backdrop);
+
+                background-color: opacify($osd_bg_color, 1); // Solid background needed here
+                
+                &:disabled
+                {
+                    @include button(osd-backdrop-insensitive);
+
+                    background-color: opacify($osd_bg_color, 1); // Solid background needed here
+                }
+            }
+        }
+    }
+    
+    marks,
+    value
+    {
+        color: gtkalpha(currentColor, 0.55);
+        font-feature-settings: "tnum";
+    }
+    
+    // Marks margins
+    //
+    @each $scale_orient, $marks_class, $marks_pos, $marks_margin in
+        (horizontal, top,    top,    bottom),
+        (horizontal, bottom, bottom, top),
+        (vertical,   top,    left,   right),
+        (vertical,   bottom, right,  left)
+    {
+        &.#{$scale_orient} marks
+        {
+            &.#{$marks_class}
+            {
+                margin-#{$marks_margin}: $_marks_distance;
+                margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
+            }
+        }
+        
+        &.#{$scale_orient}.fine-tune marks
+        {
+            &.#{$marks_class}
+            {
+                margin-#{$marks_margin}: $_marks_distance;
+                margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 3px);
+            }
+        }
+    }
+
+    &.horizontal
+    {
+        indicator
+        {
+            min-height: $_marks_length;
+            min-width:  1px;
+        }
+        
+        &.fine-tune indicator
+        {
+            min-height: ($_marks_length - 3px);
+        }
+    }
+    
+    &.vertical
+    {
+        indicator
+        {
+            min-height: 1px;
+            min-width:  $_marks_length;
+        }
+
+        &.fine-tune indicator
+        {
+            min-width: ($_marks_length - 3px);
+        }
+    }
+    
+    //
+    // *WARNING* scale with marks madness following
+    //
+    
+    // FIXME: OSD and selected list rows missing, I don't feel like adding the other
+    //        144 assets needed for those...
+    //
+    $suffix: if($variant == 'light', '', '-dark');
+    
+    @each $dir_class, $dir_infix in
+        ('horizontal', 'horz'),
+        ('vertical',   'vert')
+    {
+        @each $marks_infix, $marks_class in
+            ('scale-has-marks-above', 'marks-before:not(.marks-after)'),
+            ('scale-has-marks-below', 'marks-after:not(.marks-before)')
+        {
+            @each $state, $state_infix in
+                ('',                   ''),
+                (':hover',             '-hover'),
+                (':active',            '-active'),
+                (':disabled',          '-insensitive'),
+                (':backdrop',          '-backdrop'),
+                (':backdrop:disabled', '-backdrop-insensitive')
+            {
+                &.#{$dir_class}.#{$marks_class}
+                {
+                    slider
+                    {
+                        &#{$state}
+                        {
+                            // An asymmetric slider asset is used here, so the margins
+                            // are uneven, the smaller margin is set on the point side
+                            //
+                            $_scale_asset: 'assets/slider-#{$dir_infix}-#{$marks_infix}#{$state_infix}#{$suffix}';
+
+                            background-color:  transparent;
+                            background-image:  -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
+                            border-radius:     0;
+                            border-style:      none;
+                            margin:           -10px;
+
+                            $_scale_slider_bg_pos: bottom;
+                            
+                            @if $dir_class == 'horizontal'
+                            {
+                                min-height: 26px;
+                                min-width: 22px;
+
+                                @if $marks_infix == 'scale-has-marks-above'
+                                {
+                                    margin-top: -14px;
+                                    $_scale_slider_bg_pos: top;
+                                }
+                                @else
+                                {
+                                    margin-bottom: -14px;
+                                }
+                            }
+                            @else
+                            {
+                                min-height: 22px;
+                                min-width:  26px;
+
+                                @if $marks_infix == 'scale-has-marks-above'
+                                {
+                                    margin-left: -14px;
+                                    $_scale_slider_bg_pos: left bottom;
+                                }
+                                @else
+                                {
+                                    margin-right: -14px;
+                                    $_scale_slider_bg_pos: right bottom;
+                                }
+                            }
+                            
+                            background-position: $_scale_slider_bg_pos;
+                            background-repeat:   no-repeat;
+                            box-shadow:          none;
+                        }
+                    }
+                    
+                    &.fine-tune slider
+                    {
+                        // Bigger negative margins to make the trough grow here as
+                        // well
+                        //
+                        margin: -7px;
+
+                        @if $dir_class == 'horizontal'
+                        {
+                            @if $marks_infix == 'scale-has-marks-above'
+                            {
+                                margin-top: -11px;
+                            }
+                            @else
+                            {
+                                margin-bottom: -11px;
+                            }
+                        }
+                        @else
+                        {
+                            @if $marks_infix == 'scale-has-marks-above'
+                            {
+                                margin-left: -11px;
+                            }
+                            @else
+                            {
+                                margin-right: -11px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    &.color
+    {
+        min-height: 0;
+        min-width:  0;
+        
+        trough
+        {
+            background-image:  image($borders_color);
+            background-repeat: no-repeat;
+        }
+        
+        &.horizontal
+        {
+            padding: 0 0 15px 0;
+
+            trough
+            {
+                background-position:     0 -3px;
+                border-top-left-radius:  0;
+                border-top-right-radius: 0;
+                padding-bottom:          4px;
+            }
+
+            slider
+            {
+                // Specificity bump
+                //
+                &:dir(ltr),
+                &:dir(rtl)
+                {
+                    &:hover,
+                    &:backdrop,
+                    &:disabled,
+                    &:backdrop:disabled,
+                    &
+                    {
+                        margin-bottom: -15px;
+                        margin-top:     6px;
+                    }
+                }
+            }
+        }
+        
+        &.vertical
+        {
+            &:dir(ltr)
+            {
+                padding: 0 0 0 15px;
+
+                trough
+                {
+                    background-position:        3px 0;
+                    border-bottom-right-radius: 0;
+                    border-top-right-radius:    0;
+                    padding-left:               4px;
+                }
+                
+                slider
+                {
+                    &:hover,
+                    &:backdrop,
+                    &:disabled,
+                    &:backdrop:disabled,
+                    &
+                    {
+                        margin-left:  -15px;
+                        margin-right:  6px;
+                    }
+                }
+            }
+            
+            &:dir(rtl)
+            {
+                padding: 0 15px 0 0;
+                
+                trough
+                {
+                    background-position:       -3px 0;
+                    border-bottom-left-radius:  0;
+                    border-top-left-radius:     0;
+                    padding-right:              4px;
+                }
+                
+                slider
+                {
+                    &:hover,
+                    &:backdrop,
+                    &:disabled,
+                    &:backdrop:disabled,
+                    &
+                    {
+                        margin-left:   6px;
+                        margin-right: -15px;
+                    }
+                }
+            }
+        }
+        
+        &.fine-tune
+        {
+            &.horizontal
+            {
+                // Specificity bump
+                //
+                &:dir(ltr),
+                &:dir(rtl)
+                {
+                    padding: 0 0 12px 0;
+
+                    trough
+                    {
+                        background-position: 0 -6px;
+                        padding-bottom:      7px;
+                    }
+
+                    slider
+                    {
+                        margin-bottom: -15px;
+                        margin-top:     6px;
+                    }
+                }
+            }
+
+            &.vertical
+            {
+                &:dir(ltr)
+                {
+                    padding: 0 0 0 12px;
+
+                    trough
+                    {
+                        background-position: 6px 0;
+                        padding-left:        7px;
+                    }
+
+                    slider
+                    {
+                        margin-left:  -15px;
+                        margin-right:  6px;
+                    }
+                }
+
+                &:dir(rtl)
+                {
+                    padding: 0 12px 0 0;
+                    
+                    trough
+                    {
+                        background-position: -6px 0;
+                        padding-right:        7px;
+                    }
+                    
+                    slider
+                    {
+                        margin-left:   6px;
+                        margin-right: -15px;
+                    }
+                }
+            }
+        }
+    }
+}

themes/adwaita-refactored/common/scrollbar.scss

@@ -0,0 +1,216 @@
+//
+// Scrollbar styles
+//
+
+scrollbar
+{
+    $_scrollbar_transition:    all 300ms $ease-out-quad;
+    $_slider_min_length:       40px;
+    $_slider_width:            8px;
+    $_fine-tune_slider_border: $_slider_width - 3; //3672
+
+    // Disable steppers
+    //
+    @at-root *
+    {
+        -GtkScrollbar-has-backward-stepper: false;
+        -GtkScrollbar-has-forward-stepper:  false;
+    }
+
+    background-color: $scrollbar_bg_color;
+    transition:       $_scrollbar_transition;
+    
+    // Scrollbar border
+    //
+    &.bottom { border-top:    1px solid $borders_color; }
+    &.left   { border-right:  1px solid $borders_color; }
+    &.right  { border-left:   1px solid $borders_color; }
+    &.top    { border-bottom: 1px solid $borders_color; }
+    
+    &:backdrop
+    {
+        background-color: $backdrop_scrollbar_bg_color;
+        border-color:     $backdrop_borders_color;
+        transition:       $backdrop_transition;
+    }
+    
+    // Slider
+    //
+    slider
+    {
+        background-clip:   padding-box;
+        background-color:  $scrollbar_slider_color;
+        border:            4px solid transparent;
+        border-radius:     10px;
+        margin:           -1px;
+        min-width:         $_slider_width;
+        min-height:        $_slider_width;
+        transition:        $_scrollbar_transition;
+
+        &:hover        { background-color: $scrollbar_slider_hover_color;    }
+        &:hover:active { background-color: $scrollbar_slider_active_color;   }
+        &:backdrop     { background-color: $backdrop_scrollbar_slider_color; }
+        &:disabled     { background-color: transparent;                      }
+    }
+    
+    &.fine-tune
+    {
+        slider
+        {
+            min-height: $_fine-tune_slider_border+1;
+            min-width:  $_fine-tune_slider_border+1;
+            transition: none;
+        }
+        
+        &.horizontal slider { border-width: $_fine-tune_slider_border 4px; }
+        &.vertical   slider { border-width: 4px $_fine-tune_slider_border; }
+    }
+    
+    &.overlay-indicator
+    {
+        &:not(.dragging):not(.hovering)
+        {
+            background-color: transparent;
+            border-color:     transparent;
+            opacity:          0.4;
+            
+            slider
+            {
+                background-color: $fg_color;
+                border:           1px solid if($variant == 'light', #FFFFFF, #000000);
+                margin:           0;
+                min-width:        3px;
+                min-height:       3px;
+            }
+            
+            button
+            {
+                background-clip:  padding-box;
+                background-color: $fg_color;
+                border:           1px solid if($variant == 'light', #FFFFFF, #000000);
+                border-radius:    100%;
+                min-height:       5px;
+                min-width:        5px;
+                -gtk-icon-source: none;
+            }
+            
+            &.horizontal
+            {
+                slider
+                {
+                    margin:    0 2px;
+                    min-width: $_slider_min_length;
+                }
+                
+                button
+                {
+                    margin:    1px 2px;
+                    min-width: 5px;
+                }
+            }
+            
+            &.vertical
+            {
+                slider
+                {
+                    margin:     2px 0;
+                    min-height: $_slider_min_length;
+                }
+                
+                button
+                {
+                    margin:     2px 1px;
+                    min-height: 5px;
+                }
+            }
+        }
+        
+        &.dragging,
+        &.hovering
+        {
+            opacity: 0.8;
+        }
+    }
+    
+    &.horizontal slider { min-width:  $_slider_min_length; }
+    &.vertical   slider { min-height: $_slider_min_length; }
+    
+    // Button styling
+    //
+    button
+    {
+        border-radius: 0;
+        border-style:  none;
+        min-width:     12px;
+        min-height:    12px;
+        padding:       0;
+        transition-property: min-height, min-width, color;
+        
+        // Import and override button styles
+        //
+        @include button(undecorated);
+
+        color: $scrollbar_slider_color;
+        
+        &:hover
+        {
+            @include button(undecorated);
+            
+            color: $scrollbar_slider_hover_color;
+        }
+        
+        &:active, &:checked
+        {
+            @include button(undecorated);
+            
+            color: $scrollbar_slider_active_color;
+        }
+        
+        &:disabled 
+        {
+            @include button(undecorated);
+            
+            color: transparentize($scrollbar_slider_color, 0.8);
+        }
+        
+        &:backdrop
+        {
+            @include button(undecorated);
+            
+            color: $backdrop_scrollbar_slider_color;
+            
+            &:disabled
+            {
+                @include button(undecorated);
+                
+                color: transparentize($backdrop_scrollbar_slider_color, 0.8);
+            }
+        }
+    }
+    
+    // Button icons
+    //
+    &.vertical
+    {
+        button
+        {
+            &.up   { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');   }
+            &.down { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+        }
+    }
+    
+    &.horizontal
+    {
+        button
+        {
+            &.down { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');   }
+            &.up   { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
+        }
+    }
+}
+
+treeview ~ scrollbar.vertical
+{
+    border-top:  1px solid $borders_color;
+    margin-top: -1px;
+}

themes/adwaita-refactored/common/sidebar.scss

@@ -0,0 +1,101 @@
+//
+// Sidebar styles
+//
+
+.sidebar
+{
+    background-color: mix($bg_color, $base_color, 50%);
+    border-style:     none;
+    
+    &:not(separator)
+    {
+        @at-root %sidebar_left,
+        &:dir(ltr),
+        &.left,
+        &.left:dir(rtl)
+        {
+            border-left-style: none;
+            border-right:      1px solid $borders_color;
+        }
+        
+        @at-root %sidebar_right,
+        &:dir(rtl),
+        &.right
+        {
+            border-left:        1px solid $borders_color;
+            border-right-style: none;
+        }
+    }
+    
+    &:backdrop
+    {
+        background-color: $backdrop_sidebar_bg_color;
+        border-color:     $backdrop_borders_color;
+        transition:       $backdrop_transition;
+    }
+    
+    list
+    {
+        background-color: transparent;
+    }
+    
+    paned &
+    {
+        &.left,
+        &.right,
+        &.left:dir(rtl),
+        &:dir(rtl),
+        &:dir(ltr),
+        &
+        {
+            border-style: none; 
+        }
+    }
+}
+
+stacksidebar
+{
+    &.sidebar
+    {
+        &:dir(ltr),
+        &.left,
+        &.left:dir(rtl) { list { @extend %sidebar_left; }}
+        
+        &:dir(rtl),
+        &.right { list { @extend %sidebar_right; }}
+    }
+    
+    row
+    {
+        padding: 10px 4px;
+        
+        > label
+        {
+            padding-left:  6px;
+            padding-right: 6px;
+        }
+        
+        &.needs-attention > label
+        {
+            @extend %needs_attention;
+            
+            background-size: 6px 6px, 0 0;
+        }
+    }
+}
+
+separator.sidebar
+{
+    background-color: $borders_color;
+    
+    &:backdrop
+    {
+        background-color: $backdrop_borders_color;
+    }
+    
+    &.selection-mode,
+    .selection-mode &
+    {
+        background-color: darken($suggested_bg_color, 20%);
+    }
+}

themes/adwaita-refactored/common/sizing.scss

@@ -0,0 +1,14 @@
+//
+// Constants for optional sizing
+//
+
+$_sizevariant:      'default'; //compact otherwise
+
+$_headerbar_height: if($_sizevariant == 'default', 46px,     40px);
+$_entry_height:     if($_sizevariant == 'default', 32px,     28px);
+$_btn_pad:          if($_sizevariant == 'default', 4px 9px,  2px 6px);
+$_hb_btn_pad:       if($_sizevariant == 'default', 6px,      5px);
+$_img_btn_pad:      if($_sizevariant == 'default', 5px,      2px);
+$_sel_menu_pad:     if($_sizevariant == 'default', 6px 10px, 4px 10px);
+$_circ_btn_pad:     if($_sizevariant == 'default', 4px,      2px);
+$_switch_margin:    if($_sizevariant == 'default', 10px,     7px);

themes/adwaita-refactored/common/spinbutton.scss

@@ -0,0 +1,249 @@
+//
+// Spin button styles
+//
+
+spinbutton
+{
+    &:not(.vertical)
+    {
+        // In this horizontal configuration, the whole spinbutton
+        // behaves as the entry, so we extend the entry styling
+        // and nuke the style on the internal entry
+        //
+        @extend %entry;
+
+        padding: 0;
+
+        %spinbutton_horz_entry
+        {
+            min-width: 28px;
+
+            // Reset all the other props since the spinbutton node is styled here
+            //
+            background:       none;
+            background-color: transparent;
+            border:           none;
+            border-radius:    0;
+            box-shadow:       none;
+            margin:           0;
+
+            &:backdrop:disabled
+            {
+                background-color: transparent;
+            }
+        }
+
+        entry
+        {
+            @extend %spinbutton_horz_entry;
+        }
+
+        button
+        {
+            background-image: none;
+            border-color:     transparentize($borders_color, 0.7);
+            border-radius:    0;
+            border-style:     none none none solid;
+            box-shadow:       none;
+            color:            mix($fg_color, $base_color, 90%);
+            margin:           0;
+            min-height:       16px;
+            padding-bottom:   0;
+            padding-top:      0;
+
+            &:dir(rtl)
+            {
+                border-style: none solid none none;
+            }
+
+            &:hover
+            {
+                background-color: $base_hover_color;
+                color:            $fg_color;
+            }
+
+            &:disabled
+            {
+                background-color: transparent;
+                color:            transparentize($insensitive_fg_color, 0.7);
+            }
+
+            &:active
+            {
+                background-color: transparentize(black, 0.9);
+                box-shadow:       inset 0 2px 3px -1px transparentize(black, 0.8);
+            }
+
+            &:backdrop
+            {
+                background-color: transparent;
+                border-color:     transparentize($backdrop_borders_color, 0.7);
+                color:            mix($backdrop_fg_color, $backdrop_base_color, 90%);
+                transition:       $backdrop_transition;
+            }
+
+            &:backdrop:disabled
+            {
+                background-color: transparent;
+                background-image: none;
+                border-style:     none none none solid; // It is needed or it gets overridden
+                color:            transparentize($backdrop_insensitive_color,0.7);
+
+                &:dir(rtl) { border-style: none solid none none; }
+            }
+
+            &:dir(ltr):last-child  { border-radius: 0 $button_radius $button_radius 0; }
+            &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
+        }
+    }
+
+    // OSD horizontal
+    //
+    .osd &:not(.vertical)
+    {
+        entry
+        {
+            @extend %spinbutton_horz_entry;
+        }
+
+        button
+        {
+            @include button(undecorated);
+
+            border-style:     none none none solid;
+            border-color:     transparentize($osd_borders_color, 0.3);
+            border-radius:    0;
+            box-shadow:       none;
+            color:            $osd_fg_color;
+            -gtk-icon-shadow: 0 1px black;
+
+            &:dir(rtl)
+            {
+                border-style: none solid none none;
+            }
+
+            &:hover
+            {
+                @include button(undecorated);
+
+                background-color: transparentize($osd_fg_color, 0.9);
+                border-color:     transparentize(opacify($osd_borders_color, 1), 0.5);
+                box-shadow:       none;
+                color:            $osd_fg_color;
+                -gtk-icon-shadow: 0 1px black;
+            }
+
+            &:backdrop
+            {
+                @include button(undecorated);
+
+                border-color:     transparentize(opacify($osd_borders_color, 1), 0.5);
+                box-shadow:       none;
+                color:            $osd_fg_color;
+                -gtk-icon-shadow: none;
+            }
+
+            &:disabled
+            {
+                @include button(undecorated);
+
+                border-color:     transparentize(opacify($osd_borders_color, 1), 0.5);
+                box-shadow:       none;
+                color:            $osd_insensitive_fg_color;
+                -gtk-icon-shadow: none;
+
+            }
+            
+            &:dir(ltr):last-child  { border-radius: 0 $button_radius $button_radius 0; }
+            &:dir(rtl):first-child { border-radius: $button_radius 0 0 $button_radius; }
+        }
+    }
+
+    // Vertical
+    //
+    &.vertical
+    {
+        // In the vertical configuration, we treat the spinbutton
+        // as a box, and tweak the style of the entry in the middle
+        // so that it's linked
+        //
+
+        // FIXME: this should not be set at all, but otherwise it gets the wrong
+        // color
+        //
+        &:disabled
+        {
+            color: $insensitive_fg_color;
+        }
+
+        &:backdrop:disabled
+        {
+            color: $backdrop_insensitive_color;
+        }
+
+        &:drop(active)
+        {
+            border-color: transparent;
+            box-shadow:   none;
+        }
+
+        entry
+        {
+            border-radius: 0;
+            min-height:    32px;
+            min-width:     32px;
+            padding:       0;
+        }
+
+        button
+        {
+            min-height: 32px;
+            min-width: 32px;
+            padding: 0;
+
+            &.up   { @extend %top_button;    }
+            &.down { @extend %bottom_button; }
+        }
+
+        %top_button
+        {
+            border-radius: $button_radius $button_radius 0 0;
+            border-style:  solid solid none solid;
+        }
+
+        %bottom_button
+        {
+            border-radius: 0 0 $button_radius $button_radius;
+            border-style:  none solid solid solid;
+        }
+    }
+
+    // OSD vertical
+    //
+    .osd &.vertical button:first-child
+    {
+        @include button(osd);
+
+        &:hover    { @include button(osd-hover);       }
+        &:active   { @include button(osd-active);      }
+        &:disabled { @include button(osd-insensitive); }
+        &:backdrop { @include button(osd-backdrop);    }
+    }
+
+    // Misc
+    //
+    treeview &:not(.vertical)
+    {
+        border-radius: 0;
+        border-style: none;
+        min-height: 0;
+
+        entry
+        {
+            min-height: 0;
+            padding: 1px 2px;
+        }
+    }
+
+    font-feature-settings: "tnum";
+}

themes/adwaita-refactored/common/spinner.scss

@@ -0,0 +1,34 @@
+//
+// Spinner animation styles
+//
+
+@keyframes spin
+{
+    to
+    {
+        -gtk-icon-transform: rotate(1turn);
+    }
+}
+
+spinner
+{
+    background:       none;
+    opacity:          0; // Non-spinning spinner makes no sense
+    -gtk-icon-source: -gtk-icontheme('process-working-symbolic');
+
+    &:backdrop
+    {
+        color: $backdrop_fg_color;
+    }
+
+    &:checked
+    {
+        opacity: 1;
+        animation: spin 1s linear infinite;
+
+        &:disabled
+        {
+            opacity: 0.5;
+        }
+    }
+}

themes/adwaita-refactored/common/switch.scss

@@ -0,0 +1,152 @@
+//
+// Switch styles
+//
+
+switch
+{
+    outline-offset: -4px;
+    
+    // Similar to the .scale
+    //
+    background-color: $dark_fill;
+    border:           1px solid $borders_color;
+    border-radius:    14px;
+    color:            $fg_color;
+    text-shadow: 0 1px transparentize(black, 0.9);
+    
+    &:checked
+    {
+        background-color: $checkradio_bg_color;
+        border-color:     $checkradio_borders_color;
+        color:            $selected_fg_color;
+        text-shadow: 0 1px transparentize($selected_borders_color, 0.5),
+                     0 0 2px transparentize(white, 0.4);
+    }
+    
+    &:disabled
+    {
+        background-color: $insensitive_bg_color;
+        border-color:     $borders_color;
+        color:            $insensitive_fg_color;
+        text-shadow:      none;
+    }
+    
+    &:backdrop
+    {
+        background-color: $backdrop_dark_fill;
+        border-color:     $backdrop_borders_color;
+        color:            $backdrop_fg_color;
+        text-shadow:      none;
+        transition:       $backdrop_transition;
+        
+        &:checked
+        {
+            border-color:     if($variant == 'light', $checkradio_borders_color, $selected_borders_color);
+            background-color: $checkradio_bg_color;
+
+            @if $variant == 'light'
+            {
+                color: $backdrop_bg_color;
+            }
+        }
+        
+        &:disabled
+        {
+            background-color: $insensitive_bg_color;
+            border-color:     $backdrop_borders_color;
+            color:            $backdrop_insensitive_color;
+        }
+    }
+    
+    slider
+    {
+        border:         1px solid;
+        border-radius:  50%;
+        margin:        -1px;
+        min-width:      24px;
+        min-height:     24px;
+        transition:     $button_transition;
+        -gtk-outline-radius: 20px;
+        
+        @if $variant == 'light'
+        {
+            @include button(normal-alt, $edge: $shadow_color);
+        }
+        @else
+        {
+            @include button(normal-alt, $c: lighten($bg_color,6%), $edge: $shadow_color);
+        }
+    }
+    
+    // Only show i / o for the accessible theme
+    //
+    image
+    {
+        color: transparent;
+    }
+    
+    &:hover slider
+    {
+        @if $variant == 'light'
+        {
+            @include button(hover-alt, $edge: $shadow_color);
+        }
+        @else
+        {
+            @include button(hover-alt, $c: lighten($bg_color,6%), $edge: $shadow_color);
+        }
+    }
+    
+    &:checked > slider
+    {
+        border: 1px solid $checkradio_borders_color;
+    }
+    
+    &:disabled slider
+    {
+        @include button(insensitive);
+    }
+    
+    &:backdrop
+    {
+        slider
+        {
+            transition: $backdrop_transition;
+
+            @include button(backdrop);
+        }
+        
+        &:checked > slider
+        {
+            border-color: $checkradio_borders_color;
+        }
+        
+        &:disabled slider
+        {
+            @include button(backdrop-insensitive);
+        }
+    }
+
+    row:selected &
+    {
+        @if $variant == 'light'
+        {
+            border-color: $checkradio_borders_color;
+            box-shadow: none;
+            
+            &:backdrop
+            {
+                border-color: $checkradio_borders_color;
+            }
+
+            > slider
+            {
+                &:checked,
+                &
+                {
+                    border-color: $checkradio_borders_color;
+                }
+            }
+        }
+    }
+}

themes/adwaita-refactored/common/toolbar.scss

@@ -0,0 +1,105 @@
+//
+// Various toolbar styles
+//
+
+%toolbar
+{
+    -GtkWidget-window-dragging: true;
+    padding: 4px;
+    background-color: $bg_color;
+}
+
+toolbar
+{
+    @extend %toolbar;
+
+    padding: 4px 3px 3px 4px;
+
+    // On OSD
+    //
+    .osd &
+    {
+        background-color: transparent;
+    }
+
+    // Stand-alone OSD toolbars
+    //
+    &.osd
+    {
+        padding: 13px;
+        border: none;
+        border-radius: 5px;
+        background-color: $osd_bg_color;
+
+        &.left,
+        &.right,
+        &.top,
+        &.bottom { border-radius: 0; } // positional classes for `attached` osd toolbars
+    }
+
+    // Toolbar separators
+    //
+    &.horizontal separator { margin: 0 7px 1px 6px; }
+    &.vertical   separator { margin: 6px 1px 7px 0; }
+
+    &:not(.inline-toolbar):not(.osd)
+    {
+        // Workaround: add margins to the children of tool items to simulate
+        // spacing, ignore the overflow button (.toggle) and the overflow menu
+        // (.popup)
+        > *:not(.toggle):not(.popup) > *
+        {
+            margin-right:  1px;
+            margin-bottom: 1px;
+        }
+    }
+}
+
+// searchbar, location-bar & inline-toolbar
+//
+.inline-toolbar
+{
+    @extend %toolbar;
+
+    @extend %darkbar;
+
+    border-radius: 0  0 5px 5px;
+    border-width:  0 1px 1px;
+    padding:       3px;
+}
+
+searchbar > revealer > box,
+.location-bar
+{
+    @extend %toolbar;
+
+    @extend %darkbar;
+
+    border-width: 0 0 1px;
+    padding:      3px;
+}
+
+searchbar > revealer > box
+{
+    // Workaround: undo the GtkContainer:border-width and use CSS padding instead
+    //
+    margin:  -6px;
+    padding: 6px;
+}
+
+%darkbar
+{
+    $_bg: mix($bg_color, $borders_color, 70%);
+
+    background-color: $_bg;
+    border-color:     $borders_color;
+    border-style:     solid;
+
+    &:backdrop
+    {
+        border-color:     $backdrop_borders_color;
+        background-color: $backdrop_dark_fill;
+        box-shadow:       none;
+        transition:       $backdrop_transition;
+    }
+}

themes/adwaita-refactored/common/tooltip.scss

@@ -0,0 +1,42 @@
+//
+// Tooltip styles
+//
+
+tooltip
+{
+    &.background
+    {
+        // background-color needs to be set this way otherwise it gets drawn twice
+        //
+        // See https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
+        //
+        background-color: transparentize(#000000, 0.2);
+        background-clip: padding-box;
+
+        // This subtle border is meant to not make the tooltip melt with very dark
+        // backgrounds
+        //
+        border: 1px solid $tooltip_borders_color;
+    }
+    
+    border-radius: 5px;
+    box-shadow:    none; // Otherwise it gets inherited by windowframe.csd
+    padding:       4px;  // Not working
+    text-shadow:   0 1px black;
+    
+    // FIXME: We need a border or tooltips vanish on black background.
+    //
+    decoration
+    {
+        background-color: transparent;
+    }
+    
+    // Yeah, this is ugly
+    //
+    *
+    {
+        padding: 4px;
+        background-color: transparent;
+        color: white;
+    }
+}

themes/adwaita-refactored/common/touchcp.scss

@@ -0,0 +1,115 @@
+//
+// Touch copy-and-paste styles
+//
+
+// Touch selection handlebars for the popover.osd above
+//
+cursor-handle
+{
+    background-color: transparent;
+    background-image: none;
+    border-style:     none;
+    box-shadow:       none;
+    
+    @each $s, $as in
+        ('',        ''),
+        (':hover',  '-hover'),
+        (':active', '-active') // No need for insensitive and backdrop
+    {
+        &.top#{$s}:dir(ltr),
+        &.bottom#{$s}:dir(rtl)
+        {
+            $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
+
+            padding-left:     10px;
+            -gtk-icon-source: -gtk-scaled(
+                                  url('#{$_url}.png'),
+                                  url('#{$_url}@2.png')
+                              );
+        }
+        
+        &.bottom#{$s}:dir(ltr),
+        &.top#{$s}:dir(rtl)
+        {
+            $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
+
+            padding-right:    10px;
+            -gtk-icon-source: -gtk-scaled(
+                                  url('#{$_url}.png'),
+                                  url('#{$_url}@2.png')
+                              );
+        }
+        
+        &.insertion-cursor#{$s}:dir(ltr),
+        &.insertion-cursor#{$s}:dir(rtl)
+        {
+            $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
+
+            -gtk-icon-source: -gtk-scaled(
+                                  url('#{$_url}.png'),
+                                  url('#{$_url}@2.png')
+                              );
+        }
+    }
+}
+
+// Decouple the font of context menus from their entry/textview
+//
+.context-menu
+{
+    font: initial;
+}
+
+// Shortcut window keys
+//
+.keycap
+{
+    background-color: $base_color;
+    border:           1px solid;
+    border-color:     if($variant == 'light', mix($borders_color, $bg_color, 50%), $borders_color);
+    border-radius:    5px;
+    box-shadow:       if($variant == 'light', inset 0 -3px mix($base_color, $bg_color, 20%), inset 0 -3px mix($borders_color, $base_color, 60%));
+    color:            $fg_color;
+    font-size:        smaller;
+
+    min-width:      20px;
+    min-height:     25px;
+    margin-top:     2px;
+    padding-bottom: 3px;
+    padding-left:   6px;
+    padding-right:  6px;
+
+    &:backdrop
+    {
+        background-color: $backdrop_base_color;
+        color:            $backdrop_fg_color;
+        transition:       $backdrop_transition;
+    }
+}
+
+// FIXME: Needs to be done widget by widget, this wildcard should really die
+//
+:not(decoration):not(window):drop(active):focus,
+:not(decoration):not(window):drop(active)
+{
+    border-color: $drop_target_color;
+    box-shadow:   inset 0 0 0 1px $drop_target_color;
+    caret-color:  $drop_target_color;
+}
+
+// FIXME: Aggregate with buttons
+//
+stackswitcher button.text-button
+{
+    min-width: 100px;
+} 
+
+// FIXME: Aggregate with buttons
+//
+stackswitcher button.circular,
+stackswitcher button.text-button.circular
+{ 
+    min-height: 32px;
+    min-width:  32px;
+    padding:    0;
+}

themes/adwaita-refactored/common/treeview.scss

@@ -0,0 +1,307 @@
+//
+// Tree view styles
+//
+
+$_treeview_borders_color: if($variant == 'light', mix($borders_color, $base_color,80%), mix($fg_color, $base_color, 20%));
+
+treeview.view
+{
+    @at-root *
+    {
+        -GtkTreeView-expander-size:        16;
+        -GtkTreeView-grid-line-pattern:    '';
+        -GtkTreeView-grid-line-width:      1;
+        -GtkTreeView-horizontal-separator: 4;
+        -GtkTreeView-tree-line-pattern:    '';
+        -GtkTreeView-tree-line-width:      1;
+    }
+
+    border-left-color: mix($fg_color, $base_color, 50%); // This is actually the tree lines color,
+    border-top-color:  $bg_color;                        // While this is the grid lines color, better then nothing
+
+    rubberband
+    {
+        @extend rubberband; // To avoid borders being overridden by the previously
+                            // set props
+    }
+
+    &:selected
+    {
+        &:focus, &
+        {
+            border-radius: 0;
+
+            @extend %selected_items;
+        }
+
+        &:backdrop, &
+        {
+            border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
+            border-top-color:  transparentize($fg_color, 0.9); // doesn't work unfortunatelly
+        }
+    }
+
+    &:disabled
+    {
+        color: $insensitive_fg_color;
+
+        &:selected
+        {
+            color: mix($selected_fg_color, $selected_bg_color, 40%);
+            
+            &:backdrop
+            {
+                color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%);
+            }
+        }
+
+        &:backdrop
+        {
+            color: $backdrop_insensitive_color;
+        }
+    }
+
+    &.separator
+    {
+        color:      $bg_color;
+        min-height: 2px;
+
+        &:backdrop
+        {
+            color: transparentize($bg_color, 0.9);
+        }
+    }
+
+    &:backdrop
+    {
+        border-left-color: mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+        border-top:        $backdrop_bg_color;
+    }
+
+    &:drop(active)
+    {
+        border-color: $selected_borders_color;
+        border-style: solid none;
+        border-width: 1px;
+
+        &.after  { border-top-style:    none; }
+        &.before { border-bottom-style: none; }
+    }
+
+    &.expander
+    {
+        color: mix($text_color, $base_color, 70%);
+        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+
+        &:dir(rtl)
+        {
+            -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
+        }
+
+        &:hover
+        {
+            color: $text_color;
+        }
+
+        &:selected
+        {
+            color: mix($selected_fg_color, $selected_bg_color, 70%);
+
+            &:hover
+            {
+                color: $selected_fg_color;
+            }
+
+            &:backdrop
+            {
+                color: mix($backdrop_selected_fg_color, $selected_bg_color, 70%);
+            }
+        }
+
+        &:checked
+        {
+            -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
+        }
+
+        &:backdrop
+        {
+            color: mix($backdrop_fg_color, $backdrop_base_color, 70%);
+        }
+    }
+
+    // Progress bar in treeviews
+    //
+    &.progressbar
+    {
+        @if $variant == light
+        {
+            color: $base_color;
+        }
+
+        background-color: $progress_bg_color;
+        background-image: image($progress_bg_color);
+        box-shadow:       none;
+
+        &:selected
+        {
+            &:focus, &
+            {
+                background-image: image($base_color);
+
+                @if $variant == 'light'
+                {
+                    color: $selected_bg_color;
+                }
+                @else
+                {
+                    box-shadow: inset 0 1px transparentize(white, 0.95);
+                }
+
+                &:backdrop
+                {
+                    background-color: $backdrop_base_color;
+
+                    @if $variant == 'light'
+                    {
+                        color: $selected_bg_color;
+                    }
+                }
+            }
+        }
+
+        &:backdrop
+        {
+            background-image: none;
+            box-shadow:       none;
+
+            @if $variant == 'light'
+            {
+                color: $backdrop_base_color;
+            }
+            @else
+            {
+                border-color: $backdrop_base_color;
+            }
+        }
+    }
+
+    // Progress bar trough in treeviews
+    //
+    &.trough
+    {
+        background-color: transparentize($fg_color,0.9);
+
+        &:selected
+        {
+            &:focus, &
+            {
+                background-color: if($variant == 'light',
+                                      transparentize($selected_fg_color, 0.7),
+                                      darken($selected_bg_color, 10%));
+
+            }
+        }
+    }
+
+    header
+    {
+        button
+        {
+            $_column_header_color: mix($fg_color, $base_color, 50%);
+
+            @extend %column_header_button;
+
+            background-color: $base_color;
+            box-shadow: none;
+            color: $_column_header_color;
+            font-weight: bold;
+            text-shadow: none;
+
+            &:hover
+            {
+                @extend %column_header_button;
+
+                box-shadow: none;
+                color:      mix($_column_header_color, $fg_color, 50%);
+                transition: none; // FIXME: I shouldn't need this
+            }
+
+            &:active
+            {
+                @extend %column_header_button;
+
+                color:      $fg_color;
+                transition: none; // FIXME: I shouldn't need this
+            }
+        }
+    }
+
+    // For treeview-like derivative widgets
+    //
+    button.dnd,
+    header.button.dnd
+    {
+        &:active,
+        &:selected,
+        &:hover,
+        &
+        {
+            background-color: $selected_bg_color;
+            background-image: none;
+            border-radius:    0;
+            border-style:     none;
+            box-shadow:       inset 0 0 0 1px $base_color;
+            color:            $base_color;
+            padding:          0 6px;
+            text-shadow:      none;
+            transition:       none;
+        }
+    }
+
+    // See tests/testaccel to test
+    //
+    acceleditor > label
+    {
+        background-color: $selected_bg_color;
+    }
+}
+
+%column_header_button
+{
+    background-image: none;
+    border-color:     $_treeview_borders_color;
+    border-radius:    0;
+    border-style:     none solid solid none;
+    padding:          0 6px;
+    text-shadow:      none;
+
+    &:disabled
+    {
+        background-image: none;
+        border-color:     $bg_color;
+    }
+
+    &:backdrop
+    {
+        background-color: $backdrop_base_color;
+        background-image: none;
+        border-color:     $backdrop_bg_color;
+        border-style:     none solid solid none;
+        color:            mix($backdrop_fg_color, $backdrop_bg_color, 50%);
+
+        &:disabled
+        {
+            background-image: none;
+            border-color:     $backdrop_bg_color;
+        }
+    }
+
+    &:last-child
+    {
+        &:backdrop,
+        &
+        {
+            border-right-style: none;
+        }
+    }
+}

themes/adwaita-refactored/common/typography.scss

@@ -0,0 +1,57 @@
+//
+// General typographic styles
+//
+
+.large-title
+{
+   font-weight: 300;
+   font-size:   24pt;
+}
+
+.title-1
+{
+   font-weight: 800;
+   font-size:   20pt;
+}
+
+.title-2
+{
+   font-weight: 800;
+   font-size:   15pt;
+}
+
+.title-3
+{
+   font-weight: 700;
+   font-size:   15pt;
+}
+
+.title-4
+{
+   font-weight: 700;
+   font-size:   13pt;
+}
+
+.heading
+{
+   font-weight: 700;
+   font-size:   11pt;
+}
+
+.body
+{
+   font-weight: 400;
+   font-size:   11pt;
+}
+
+.caption-heading
+{
+   font-weight: 700;
+   font-size:   9pt;
+}
+
+.caption
+{
+   font-weight: 400;
+   font-size:   9pt;
+}

themes/adwaita-refactored/common/widget.scss

@@ -0,0 +1,37 @@
+//
+// Styles that apply to all widgets
+//
+
+*
+{
+    padding: 0;
+    -GtkToolButton-icon-spacing: 4;
+    -GtkTextView-error-underline-color: $error_color;
+
+    // The size for scrollbars. The slider is 2px smaller, but we keep it
+    // up so that the whole area is sensitive to button presses for the
+    // slider. The stepper button is larger in both directions, the slider
+    // only in the width
+
+    -GtkScrolledWindow-scrollbar-spacing: 0;
+
+    -GtkToolItemGroup-expander-size: 11;
+
+    -GtkWidget-text-handle-width: 20;
+    -GtkWidget-text-handle-height: 24;
+
+    -GtkDialog-button-spacing: 4;
+    -GtkDialog-action-area-border: 0;
+
+    // We use the outline properties to signal the focus properties
+    // to the adwaita engine: using real CSS properties is faster,
+    // and we don't use any outlines for now.
+
+    outline-color: gtkalpha(currentColor, 0.3);
+    outline-style: dashed;
+    outline-offset: -3px;
+    outline-width: 1px;
+    -gtk-outline-radius: $button-radius - 2;
+
+    -gtk-secondary-caret-color: $selected_bg_color
+}

themes/adwaita-refactored/drawing/_all.scss

@@ -0,0 +1,6 @@
+@import "generic";
+@import "entries";
+@import "buttons";
+@import "headerbar";
+@import "overshoot";
+@import "checkradio";

themes/adwaita-refactored/drawing/buttons.scss

@@ -0,0 +1,367 @@
+//
+// Mixins and funcs for buttons
+//
+
+@function _button_hilight_color($c)
+{
+    //
+    // Calculate the right top hilight color for buttons
+    //
+    // $c: base color;
+    //
+    @if      lightness($c) > 95% { @return #FFFFFF; }
+    @else if lightness($c) > 90% { @return transparentize(#FFFFFF, 0.2); }
+    @else if lightness($c) > 80% { @return transparentize(#FFFFFF, 0.5); }
+    @else if lightness($c) > 50% { @return transparentize(#FFFFFF, 0.8); }
+    @else if lightness($c) > 40% { @return transparentize(#FFFFFF, 0.9); }
+    @else { @return transparentize(#FFFFFF, 0.98); }
+}
+
+@mixin _button_text_shadow($tc:$fg_color, $bg:$bg_color)
+{
+    //
+    // Helper function for the text emboss effect
+    //
+    // $tc is the optional text color, not the shadow color
+    //
+    // TODO: This function needs a way to deal with special cases
+    //
+
+    $_shadow: _text_shadow_color($tc, $bg);
+
+    @if lightness($tc) < 50%
+    {
+        text-shadow:      0 1px $_shadow;
+        -gtk-icon-shadow: 0 1px $_shadow;
+    }
+    @else
+    {
+        text-shadow:      0 -1px $_shadow;
+        -gtk-icon-shadow: 0 -1px $_shadow;
+    }
+}
+
+@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: none, $backimage: null)
+{
+    //
+    // 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
+    // $backimage: additional background-image behind the default one
+    //             (for the button.circular hack)
+    //
+    // 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
+    //
+    $_hilight_color: _button_hilight_color($c);
+    $_button_edge:   if($edge == none, none, _widget_edge($edge));
+    $_blank_edge:    if($edge == none, none, _widget_edge(transparentize($edge, 1)));
+    $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
+
+    @if $t == normal
+    {
+        //
+        // Normal Button
+        //
+        background-image:    if($variant == 'light', linear-gradient(to top, darken($c, 4%) 2px, $c),
+                                                     linear-gradient(to top, darken($c, 1%) 2px, $c)),
+                                 $backimage;
+        border-color:        if($c != $bg_color, _border_color($c), $borders_color);
+        border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
+        color:               $tc;
+        outline-color:       transparentize($tc, 0.7);
+        
+        @include _button_text_shadow($tc, $c);
+        @include _shadows(inset 0 1px $_hilight_color, $_button_edge, $_button_shadow);
+    }
+    @else if $t == hover
+    {
+        //
+        // Hovered Button
+        //
+        border-color:        if($c != $bg_color, _border_color($c),       $borders_color);
+        border-bottom-color: if($c != $bg_color, _border_color($c, true), $alt_borders_color);
+        color:               $tc;
+        outline-color:       transparentize($tc, 0.7);
+
+        @if $variant == 'light'
+        {
+            background-image: linear-gradient(to top, $c, lighten($c, 1%) 1px),
+                              $backimage;
+
+            @include _button_text_shadow($tc, lighten($c, 6%));
+            @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)), $_button_edge, $_button_shadow);
+        }
+        @else
+        {
+            background-image: linear-gradient(to top, darken($c, 1%), lighten($c, 1%), 1px),
+                              $backimage;
+            
+            @include _button_text_shadow($tc, lighten($c, 6%));
+            @include _shadows(inset 0 1px _button_hilight_color(darken($c, 2%)), $_button_edge, $_button_shadow);
+        }
+    }
+    @else if $t == normal-alt
+    {
+        //
+        // Normal Button Alternative Look
+        //
+        border-color:  if($c != $bg_color, _border_color($c, true), $alt_borders_color);
+        color:         $tc;
+        outline-color: transparentize($tc, 0.7);
+
+        @include _button_text_shadow($tc, $c);
+
+        @if $variant == 'light'
+        {
+            background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
+
+            @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
+                             $_button_edge, $_button_shadow);
+        }
+        @else
+        {
+            background-image: linear-gradient(to bottom, darken($c, 3%) 20%, darken($c, 6%) 90%);
+
+            @include _shadows(inset 0 1px $_hilight_color,
+                             $_button_edge, $_button_shadow);
+        }
+    }
+    @else if $t == hover-alt
+    {
+        //
+        // Hovered Button Alternative Look
+        //
+        border-color:  if($c != $bg_color, _border_color($c, true), $alt_borders_color);
+        color:         $tc;
+        outline-color: transparentize($tc, 0.7);
+
+        @if $variant == 'light'
+        {
+            background-image: linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%);
+
+            @include _shadows(inset 0 1px _button_hilight_color(lighten($c, 6%)),
+                             $_button_edge, $_button_shadow);
+        }
+        @else
+        {
+            background-image: linear-gradient(inset 0 1px $_hilight_color,
+                                             $_button_edge, $_button_shadow);
+            
+            @include _shadows(inset 0 1px $_hilight_color,
+                             $_button_edge, $_button_shadow);
+        }
+    }
+    @else if $t == active
+    {
+        //
+        // Pushed Button
+        //
+        border-color:     if($c != $bg_color, _border_color($c), $borders_color);
+        background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
+        color:            $tc;
+        outline-color:    transparentize($tc, 0.7);
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+
+        @include _shadows(inset 0 1px transparentize($_hilight_color, 1), $_button_edge);
+    }
+    @else if $t == insensitive
+    {
+        //
+        // Insensitive Button
+        //
+        $_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
+
+        color:            if($tc != $fg_color, mix($tc, $_bg, 50%), $insensitive_fg_color);
+        border-color:     if($c != $bg_color, _border_color($c), $insensitive_borders_color);
+        background-image: image($_bg);
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+
+        // White with 0 alpha to avoid an ugly transition, since no color means
+        // black with 0 alpha
+        //
+        @include _shadows(inset 0 1px transparentize(#FFFFFF, 1), $_button_edge);
+    }
+    @else if $t == insensitive-active
+    {
+        //
+        // Insensitive Pushed Button
+        //
+        $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 6%));
+        $_bc: if($c != $bg_color, _border_color($c), $insensitive_borders_color);
+
+        color:            if($c != $bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color);
+        border-color:     $_bc;
+        background-image: image($_bg);
+
+        // White with 0 alpha to avoid an ugly transition, since no color means
+        // black with 0 alpha
+        //
+        @include _shadows(inset 0 1px transparentize(#FFFFFF, 1), $_button_edge);
+    }
+    @else if $t == backdrop
+    {
+        //
+        // Backdrop Button
+        //
+        $_bg: if($c != $bg_color, $c, $backdrop_bg_color);
+        $_bc: if($variant == 'light', $c, _border_color($c));
+
+        background-image: image($_bg);
+        border-color:     if($c != $bg_color, $_bc, $backdrop_borders_color);
+        color:            if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+
+        @include _shadows(inset 0 1px transparentize(#FFFFFF, 1), $_blank_edge);
+    }
+    @else if $t == backdrop-active
+    {
+        //
+        // Backdrop Pushed Button
+        //
+        $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
+        $_bc: if($variant == 'light', $_bg, _border_color($c));
+
+        background-image: image($_bg);
+        border-color:     if($c  != $bg_color, $_bc,                $backdrop_borders_color);
+        color:            if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color);
+
+        @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
+    }
+    @else if $t == backdrop-insensitive
+    {
+        //
+        // Backdrop Insensitive Button
+        //
+        $_bg: if($c != $bg_color, mix($c, $base_color, 85%), $insensitive_bg_color);
+        $_bc: if($variant == 'light', $_bg, _border_color($c));
+
+        background-image: image($_bg);
+        border-color:     if($c != $bg_color, $_bc,                $backdrop_borders_color);
+        color:            if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+
+        // White with 0 alpha to avoid an ugly transition, since no color means
+        // black with 0 alpha
+        //
+        @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
+    }
+    @else if $t == backdrop-insensitive-active
+    {
+        //
+        // Backdrop Insensitive Pushed Button
+        //
+        $_bg: if($variant == 'light', darken(mix($c, $base_color, 85%), 8%), darken(mix($c, $base_color, 85%), 4%));
+        $_bc: if($variant == 'light', $_bg,                                  _border_color($c));
+
+        background-image: image($_bg);
+        border-color:     if($c != $bg_color, $_bc,                $backdrop_borders_color);
+        color:            if($c != $bg_color, mix($tc, $_bg, 35%), $backdrop_insensitive_color);
+
+        @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
+    }
+    @else if $t == osd
+    {
+        //
+        // Normal OSD Button
+        //
+        $_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
+
+        background-clip:  padding-box;
+        background-color: transparent;
+        background-image: image($_bg);
+        border-color:     $osd_borders_color;
+        box-shadow:       inset 0 1px transparentize(white, 0.9);
+        color:            $osd_fg_color;
+        outline-color:    transparentize($osd_fg_color, 0.7);
+        text-shadow:      0 1px black;
+        -gtk-icon-shadow: 0 1px black;
+    }
+    @else if $t == osd-hover
+    {
+        //
+        // Hovered OSD Button
+        //
+        $_bg: if($c != $bg_color, transparentize($c, 0.3), lighten($osd_bg_color, 12%));
+
+        background-clip:  padding-box;
+        background-color: transparent;
+        background-image: image($_bg);
+        border-color:     $osd_borders_color;
+        box-shadow:       inset 0 1px transparentize(white, 0.9);
+        color:            white;
+        outline-color:    transparentize($osd_fg_color, 0.7);
+        text-shadow:      0 1px black;
+        -gtk-icon-shadow: 0 1px black;
+    }
+    @else if $t == osd-active
+    {
+        //
+        // Active OSD Button
+        //
+        $_bg: if($c != $bg_color, $c, $osd_borders_color);
+
+        background-clip:  padding-box;
+        background-color: transparent;
+        background-image: image($_bg);
+        border-color:     $osd_borders_color;
+        box-shadow:       none;
+        color:            white;
+        outline-color:    transparentize($osd_fg_color, 0.7);
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+    }
+    @else if $t == osd-insensitive
+    {
+        //
+        // Insensitive OSD Button
+        //
+        background-clip:  padding-box;
+        background-color: transparent;
+        background-image: image($osd_insensitive_bg_color);
+        border-color:     $osd_borders_color;
+        box-shadow:       none;
+        color:            $osd_insensitive_fg_color;
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+    }
+    @else if $t == osd-backdrop
+    {
+        //
+        // Backdrop OSD Button
+        //
+        $_bg: if($c != $bg_color, transparentize($c, 0.5), $osd_bg_color);
+
+        background-clip:  padding-box;
+        background-color: transparent;
+        background-image: image($_bg);
+        border-color:     $osd_borders_color;
+        box-shadow:       none;
+        color:            $osd_fg_color;
+        text-shadow:      none;
+        -gtk-icon-shadow: none;
+    }
+    @else if $t == undecorated
+    {
+        //
+        // Reset
+        //
+        background-color: transparent;
+        background-image: none;
+        border-color: transparent;
+        text-shadow: none;
+        -gtk-icon-shadow: none;
+
+        @include _shadows(inset 0 1px transparentize(white, 1), $_blank_edge);
+    }
+}

themes/adwaita-refactored/drawing/checkradio.scss

@@ -0,0 +1,57 @@
+//
+// Mixins and funcs for check boxes and radio buttons
+//
+
+@mixin check($t, $c:$bg_color, $tc:$fg_color, $checked: false)
+{
+    // Check/Radio drawing function
+    //
+    // $t:        check/radio type,
+    // $c:        base button color for colored* types
+    // $tc:       optional text color for colored* types
+    // $checked:  bool to chose between checked/unchecked
+    //
+    // possible $t values:
+    // normal, hover, active, insensitive, backdrop, backdrop-insensitive
+
+    $_border_color:     if($c == $checkradio_bg_color, $c, $alt_borders_color);
+    $_dim_border_color: transparentize($_border_color, if($variant == 'light', 0.3, 0.7));
+
+    @if $t == normal
+    {
+        background-clip:  if($checked, border-box, padding-box);
+        background-image: linear-gradient(to bottom, lighten($c, 5%) 20%, $c 90%);
+        border-color:     $_border_color;
+        box-shadow:       0 1px transparentize(black, 0.95);
+        color:            $tc;
+    }
+
+    @if $t == hover
+    {
+        background-image: if($c == white, image(darken($c, 5%)), linear-gradient(to bottom, lighten($c, 9%) 10%, lighten($c, 4%) 90%));
+    }
+
+    @if $t == active
+    {
+        box-shadow: inset 0 1px 1px 0px if($variant == 'light', rgba(0, 0, 0, 0.2), black);
+    }
+
+    @if $t == insensitive
+    {
+        box-shadow: none;
+        color:      transparentize($tc, 0.3);
+    }
+
+    @if $t == backdrop
+    {
+        background-image: image($c);
+        box-shadow:       none;
+        color:            $tc;
+    }
+
+    @if $t == backdrop-insensitive
+    {
+        box-shadow: none;
+        color:      transparentize($tc, 0.3);
+    }
+}

themes/adwaita-refactored/drawing/entries.scss

@@ -0,0 +1,126 @@
+//
+// Entries related mixins/funcs
+//
+
+@function entry_focus_border($fc:$selected_bg_color)
+{
+    @if $variant == 'light'
+    {
+        @return $fc;
+    }
+    @else
+    {
+        @return if($fc == $selected_bg_color, $selected_borders_color, darken($fc, 35%));
+    }
+}
+
+@function entry_focus_shadow($fc:$selected_bg_color)
+{
+    @return inset 0 0 0 1px $fc;
+}
+
+@mixin entry($t, $fc:$selected_bg_color, $edge: none)
+{
+    //
+    // Entries drawing function
+    //
+    // $t:    entry type
+    // $fc:   focus color
+    // $edge: set to none to not draw the bottom edge or specify a color to not
+    //        use the default one
+    //
+    // Possible $t values:
+    // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus,
+    // osd-backdrop
+    //
+
+    $_blank_edge: if($edge == none, none, 0 1px transparentize($edge, 1));
+    $_entry_edge: if($edge == none, none, _widget_edge($edge));
+
+    @if $t == normal
+    {
+        color:            $text_color;
+        border-color:     $borders_color;
+        background-color: $base_color;
+
+        // For the transition to work the number of shadows in different states needs
+        // to match, hence the shadow here
+        //
+        @include _shadows(entry_focus_shadow(transparentize($fc, 1)), $_entry_edge);
+    }
+
+    @if $t == focus
+    {
+        border-color: entry_focus_border($fc);
+
+        @include _shadows(entry_focus_shadow($fc), $_entry_edge);
+    }
+
+    @if $t == insensitive
+    {
+        background-color: $insensitive_bg_color;
+        border-color:     $borders-color;
+        box-shadow:       $_entry_edge;
+        color:            $insensitive_fg_color;
+    }
+
+    @if $t == backdrop
+    {
+        background-color: $backdrop_base_color;
+        border-color:     $backdrop_borders_color;
+        box-shadow:       $_blank_edge;
+        color:            $backdrop_text_color;
+    }
+
+    @if $t == backdrop-insensitive
+    {
+        background-color: $backdrop_bg_color;
+        border-color:     $backdrop_borders_color;
+        box-shadow:       $_blank_edge;
+        color:            $backdrop_insensitive_color;
+    }
+
+    @if $t == osd
+    {
+        background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        background-clip:  padding-box;
+        border-color:     $osd_borders_color;
+        box-shadow:       entry_focus_shadow($fc);
+        color:            $osd_text_color;
+        text-shadow:      0 1px #000000;
+        -gtk-icon-shadow: 0 1px #000000;
+    }
+
+    @if $t == osd-focus
+    {
+        background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        background-clip:  padding-box;
+        border_color:     $selected_bg_color;
+        box-shadow:       entry_focus_shadow($fc);
+        color:            $osd_text_color;
+        text-shadow:      0 1px #000000;
+        -gtk-icon-shadow: 0 1px #000000;
+    }
+
+    @if $t == osd-insensitive
+    {
+        color: $osd_insensitive_fg_color;
+        border-color: $osd_borders_color;
+        background-color: $osd_insensitive_bg_color;
+        background-clip: padding-box;
+        box-shadow: none;
+        text-shadow: none;
+        -gtk-icon-shadow: none;
+    }
+
+    @if $t == osd-backdrop
+    {
+        background-color: transparentize(opacify($osd_borders_color, 1), 0.5);
+        background-clip: padding-box;
+        border-color: $osd_borders_color;
+        box-shadow: none;
+        color: $osd_text_color;
+        text-shadow: none;
+        -gtk-icon-shadow: none;
+    }
+}

themes/adwaita-refactored/drawing/generic.scss

@@ -0,0 +1,60 @@
+//
+// Generic drawing related bits
+//
+
+@function _widget_edge($c:$borders_edge)
+{
+    // Outer highlight "used" on most widgets
+    //
+    @if $c == none { @return none; }
+    @else { @return 0 1px $c; }
+}
+
+@mixin _shadows($list...)
+{
+    // Helper mixin to stack up to box-shadows;
+    //
+    $shadows: null;
+
+    @each $shadow in $list
+    {
+        @if $shadow != none
+        {
+            $shadows: $shadows, $shadow;
+        }
+    }
+
+    box-shadow: $shadows;
+}
+
+@function _border_color($c, $darker: false)
+{
+    @if $darker == true
+    {
+        @return darken($c, 20%);
+    }
+    @else
+    {
+        @return darken($c, 10%);
+    }
+}
+
+@function _text_shadow_color($tc:$fg_color, $bg:$bg_color)
+{
+    //
+    // Calculate the color of text shadows
+    //
+    // $tc is the text color
+    // $bg is the background color
+    //
+    $_lbg: lightness($bg) / 100%;
+
+    @if lightness($tc) < 50%
+    {
+        @return transparentize(#FFFFFF, 1 - $_lbg / ($_lbg * 1.3));
+    }
+    @else
+    {
+        @return transparentize(#000000, $_lbg * 0.8);
+    }
+}

themes/adwaita-refactored/drawing/headerbar.scss

@@ -0,0 +1,30 @@
+//
+// Mixins and funcs for headerbars
+//
+
+@mixin headerbar_fill($c:$headerbar_color, $hc:$top_hilight, $ov: none) {
+    //
+    // Headerbar Fill
+    //
+    // $c:  base color
+    // $hc: top highlight color
+    // $ov: a background layer for background shorthand (hence no commas!)
+    //
+    $gradient: linear-gradient(to top, darken($c, 2%), lighten($c, 1%));
+
+    @if $variant == 'dark'
+    {
+        $gradient: linear-gradient(to top, lighten($c, 4%), lighten($c, 6%));
+    }
+
+    @if $ov != none
+    {
+        background: $c $ov, $gradient;
+    }
+    @else
+    {
+        background: $c $gradient;
+    }
+
+    box-shadow: inset 0 1px $hc; // top highlight
+}

themes/adwaita-refactored/drawing/overshoot.scss

@@ -0,0 +1,98 @@
+//
+// Overshoot mixin
+//
+
+@mixin overshoot($p, $t:normal, $c:$fg_color)
+{
+    //
+    // Overshoot
+    //
+    // (this defines the gradients used to indicate the user has "over-scrolled" a
+    // scrollable widget (the semi-transparent gradient that shows how much they have
+    // "overshot" their scrolling)
+    //
+    // $p: position
+    // $t: type
+    // $c: base color
+    //
+    // possible $p values:
+    // top, bottom, right, left
+    //
+    // possible $t values:
+    // normal, backdrop
+    //
+    $_small_gradient_length: 5%;
+    $_big_gradient_length:   100%;
+
+    $_position:            center top;
+    $_small_gradient_size: 100% $_small_gradient_length;
+    $_big_gradient_size:   100% $_big_gradient_length;
+
+    @if $p == bottom
+    {
+        $_position: center bottom;
+        $_linear_gradient_direction: to top;
+    }
+
+    @else if $p == right
+    {
+        $_position: right center;
+        $_small_gradient_size: $_small_gradient_length 100%;
+        $_big_gradient_size:   $_big_gradient_length   100%;
+    }
+
+    @else if $p == left
+    {
+        $_position: left center;
+        $_small_gradient_size: $_small_gradient_length 100%;
+        $_big_gradient_size:   $_big_gradient_length   100%;
+    }
+
+    $_small_gradient_color: $c;
+    $_big_gradient_color:   $c;
+
+    @if $c == $fg_color
+    {
+        $_small_gradient_color: darken($borders_color, 10%);
+        $_big_gradient_color: $fg_color;
+
+        @if $t == backdrop
+        {
+            $_small_gradient_color: $backdrop_borders_color;
+        }
+    }
+
+    $_small_gradient: -gtk-gradient(
+                          radial,
+                          $_position, 0,
+                          $_position, 0.5,
+                          to($_small_gradient_color),
+                          to(transparentize($_small_gradient_color, 1))
+                      );
+
+    $_big_gradient: -gtk-gradient(
+                        radial,
+                        $_position, 0,
+                        $_position, 0.6,
+                        from(transparentize($_big_gradient_color, 0.93)),
+                        to(transparentize($_big_gradient_color, 1))
+                    );
+
+    @if $t == normal
+    {
+        background-image: $_small_gradient,      $_big_gradient;
+        background-size:  $_small_gradient_size, $_big_gradient_size;
+    }
+    @else if $t == backdrop
+    {
+        background-image: $_small_gradient;
+        background-size:  $_small_gradient_size;
+    }
+
+    background-repeat:   no-repeat;
+    background-position: $_position;
+
+    background-color: transparent; // Reset some properties to be sure to not inherit them somehow
+    border:           none;        //
+    box-shadow:       none;        //
+}

themes/adwaita-refactored/main.scss

@@ -0,0 +1,23 @@
+//
+// (Refactored) Adwaita SCSS Aggregation Document
+//
+
+// Define the 'variant' here (light or dark)
+//
+$variant: 'light';
+
+// Import color definition constants
+//
+@import "colors/all";
+
+// Import functions and mixins
+//
+@import "drawing/all";
+
+// Import main theme styles
+//
+@import "common/all";
+
+// Import color definition exports (for third-party apps and WMs)
+//
+@import "colors-public/all";