Merge branch 'wip/jimmac/HC-redesign' into 'master'

HC: derive from Adwaita

Closes #1450

See merge request GNOME/gtk!1571

gtk/theme/Adwaita/_colors.scss

@@ -50,7 +50,7 @@ $drop_target_color: #4e9a06;
 //insensitive state derived colors
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
-$insensitive_borders_color: $borders_color;
+$insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 
 //colors for the backdrop state, derived from the main colors.
 $backdrop_base_color: if($variant == 'light', darken($base_color, 1%), lighten($base_color, 1%));

gtk/theme/Adwaita/_common.scss

@@ -2520,14 +2520,20 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
   border-radius: 3px;
   background-color: $dark_fill;
 
-  &:disabled { background-color: $insensitive_bg_color; }
+  &:disabled {
+   background-color: $insensitive_bg_color;
+   border-color: $insensitive_borders_color;
+  }
 
   &:backdrop {
     background-color: $backdrop_dark_fill;
     border-color: $backdrop_borders_color;
     transition: $backdrop_transition;
 
-    &:disabled { background-color: $insensitive_bg_color; }
+    &:disabled {
+      background-color: $insensitive_bg_color;
+      border-color: $insensitive_borders_color;
+    }
   }
 
   // ...on selected list rows

gtk/theme/HighContrast/HighContrast-inverse.scss

@@ -6,6 +6,7 @@
 
 $variant: 'dark';
 
-@import 'colors';
-@import 'drawing';
-@import 'common';
+@import '../Adwaita/colors';
+@import 'colors-hc';
+@import '../Adwaita/drawing';
+@import '../Adwaita/common';

gtk/theme/HighContrast/HighContrast.scss

@@ -6,6 +6,7 @@
 
 $variant: 'light';
 
-@import 'colors';
-@import 'drawing';
-@import 'common';
+@import '../Adwaita/colors';
+@import 'colors-hc';
+@import '../Adwaita/drawing';
+@import '../Adwaita/common';

gtk/theme/HighContrast/_colors-hc.scss

@@ -0,0 +1,16 @@
+// High Contrast color overrides
+// When color definition differs for dark and light variant
+// it gets @if ed depending on $variant
+
+
+$fg_color: if($variant == 'light', darken($fg_color, 3%), lighten($fg_color, 2%));
+$bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%));
+$selected_bg_color: darken($selected_bg_color,10%);
+$selected_borders_color: darken($selected_borders_color, 10%);
+$borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
+$alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 28%));
+
+//insensitive state derived colors
+$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+$insensitive_bg_color: mix($bg_color, $base_color, 60%);
+$insensitive_borders_color: mix($borders_color, $bg_color, 80%);

gtk/theme/HighContrast/_colors.scss

@@ -1,96 +0,0 @@
-// When color definition differs for dark and light variant,
-// it gets @if ed depending on $variant
-
-
-$base_color: if($variant == 'light', #fff, #111);
-$bg_color: if($variant == 'light', #fff, #000);
-$fg_color: if($variant == 'light', #000, #fff);
-
-$selected_fg_color: if($variant == 'light', #fff, #000);
-$selected_bg_color: if($variant == 'light', #000, #ddd); //#4a90d9;
-$selected_borders_color: if($variant == 'light', #000, #aaa);
-$popover_bg_color: $bg_color;
-$popover_hover_color: lighten($bg_color, 5%);
-
-$borders_color: mix($bg_color,$fg_color,50%);
-$borders_edge: if($variant == 'light', #fff, #000);
-$link_color: $selected_bg_color;
-
-$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 95%), mix($base_color, $bg_color, 60%));
-$scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
-$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
-$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
-
-$suggested_color: #4a90d9;
-$warning_color: #f57900;
-$error_color: #cc0000;
-$success_color: #73d216;
-$destructive_color: #ef2929;
-$dark_fill: if($variant == 'light', mix($fg_color, $bg_color, 50%), mix($fg_color, $bg_color, 10%));
-
-$osd_fg_color: #fff;
-$osd_bg_color: transparentize(#000,0.2);
-$osd_borders_color: transparentize(#fff,0.8);
-
-//insensitive state derived colors
-$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
-$insensitive_bg_color: mix($bg_color, $base_color, 60%);
-$insensitive_borders_color: mix($borders_color, $base_color, 50%);
-
-//colors for the backdrop state, derived from the main colors.
-$backdrop_base_color: $base_color;
-$backdrop_bg_color: $bg_color;
-$backdrop_fg_color: $fg_color;
-$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
-$backdrop_dark_fill: mix($fg_color, $bg_color, 30%);
-$backdrop_scrollbar_bg_color: darken($backdrop_bg_color, 3%);
-$backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40%);
-
-//apps rely on some named colors to be exported
-/* GTK NAMED COLORS */
-@define-color theme_fg_color #{"" + $fg_color};
-@define-color theme_bg_color #{"" + $bg_color};
-@define-color theme_base_color #{"" + $base_color};
-@define-color theme_selected_bg_color #{"" + $selected_bg_color};
-@define-color theme_selected_fg_color #{"" + $selected_fg_color};
-@define-color insensitive_bg_color #{"" + $insensitive_bg_color};
-@define-color insensitive_fg_color #{"" + $insensitive_fg_color};
-@define-color insensitive_base_color #{"" + $base_color};
-@define-color theme_unfocused_fg_color #{"" + $backdrop_fg_color};
-@define-color theme_unfocused_bg_color #{"" + $backdrop_bg_color};
-@define-color theme_unfocused_base_color #{"" + $backdrop_base_color};
-@define-color theme_unfocused_selected_bg_color #{"" + $selected_bg_color};
-@define-color theme_unfocused_selected_fg_color #{"" + $selected_fg_color};
-@define-color unfocused_insensitive_color #{"" + $insensitive_fg_color};
-@define-color borders #{"" + $borders_color};
-@define-color unfocused_borders #{"" + $backdrop_borders_color};
-
-@define-color warning_color #{"" + $warning_color};
-@define-color error_color #{"" + $error_color};
-@define-color success_color #{"" + $success_color};
-
-//WM
-
-$_wm_highlight: $borders_edge;
-
-@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(black, 0.35);
-@define-color wm_border alpha(black, 0.18);
-
-@define-color wm_button_hover_color_a shade(#{"" + $bg_color}, 1.3);
-@define-color wm_button_hover_color_b #{"" + $bg_color};
-@define-color wm_button_active_color_a shade(#{"" + $bg_color}, 0.85);
-@define-color wm_button_active_color_b shade(#{"" + $bg_color}, 0.89);
-@define-color wm_button_active_color_c shade(#{"" + $bg_color}, 0.9);
-
-//FIXME this is really an API
-
-@define-color content_view_bg #{"" + $base_color};
-

gtk/theme/HighContrast/_drawing.scss

@@ -1,378 +0,0 @@
-// Drawing mixins
-
-// generic drawing of more complex things
-@function _widget_edge($c:$borders_edge) {
-// outer highlight "used" on most widgets
-  @return 0 1px $c;
-}
-
-@function _solid($c) {
-// solid color image
-  @return linear-gradient(to bottom, $c, $c);
-}
-
-@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) {
-//
-// Helper function to stack up to 4 box-shadows;
-//
-  @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; }
-  @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; }
-  @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; }
-  @else { box-shadow: $shadow1; }
-}
-
-// entries
-
-@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_glow($fc) {
-  $_focus_glow_color: transparentize($fc,0.85);
-  @return inset 0 0 0 1px $_focus_glow_color;
-}
-
-@function entry_gradient($c) {
-  @return linear-gradient(to bottom, darken($c,3%), $c 90%);
-}
-
-@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) {
-//
-// Entries drawing function
-//
-// $t: entry type
-// $fc: focus color
-// $edge:none set to true not to draw the bottom edge hilight
-//
-// possible $t values:
-// normal, focus, insensitive, backdrop, backdrop-insensitive;
-//
-  background-color: transparent;
-  border-style: solid;
-  background-image: linear-gradient(to bottom,
-                                    darken($base_color,3%),
-                                    $base_color 90%);
-  $_entry_edge: none;
-  
-  @if $t==normal {
-    color: $fg_color;
-    border-color: $borders_color;
-    @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
-                      $_entry_edge);
-  }
-  @if $t==focus {
-    border-color: $fc;
-    @include _shadows(inset 0 2px 2px -2px mix(black, $base_color, 50%),
-                      inset 0 0 0 1px $fc,
-                      $_entry_edge);
-  }
-  @if $t==insensitive {
-    color: $insensitive_fg_color;
-    border-color: $borders_color;
-    background-image: _solid($insensitive_bg_color);
-    @include _shadows($_entry_edge);
-  }
-  @if $t==backdrop {
-    color: $backdrop_fg_color;
-    background-image: _solid($backdrop_base_color);
-    box-shadow: 0 1px transparentize(white,1);
-  }
-  @if $t==backdrop-insensitive {
-    color: $insensitive_fg_color;
-    background-image: _solid($backdrop_bg_color);
-    box-shadow: 0 1px transparentize(white,1);
-  }
-}
-
-// buttons
-
-@mixin _button_border_color ($c) { border-color: darken($c,25%); } // colored buttons want the border form the base color
-
-@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 functions needs a way to deal with special cases
-//
-
-  $_dark: black;
-  $_bright: white;
-
-  @if lightness($tc) < 50% {
-    text-shadow: 0 1px $_bright;
-    -gtk-icon-shadow: 0 1px $_bright;
-  }
-  @else {
-    text-shadow: 0 -1px $_dark;
-    -gtk-icon-shadow: 0 -1px $_dark;
-  }
-}
-
-@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_color) {
-//
-// Button drawing function
-//
-// $t:  button type,
-// $c:  base button color for colored* types
-// $tc: optional text color for colored* types
-// $noedge:none set to true not to draw the bottom edge hilight
-//
-// possible $t values:
-// normal, hover, active, insensitive, insensitive-active,
-// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active
-//
-  border-width: 2px;
-  border-style: solid;
-
-  $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons
-
-  @if $t==normal {
-  //
-  // normal button
-  //
-    color: $tc;
-    background-image: none;
-    background-color: $c;
-
-    @if $c!=$bg_color { @include _button_border_color($c); }
-    @else { border-color: $borders_color; }
-
-  }
-
-  @else if $t==hover {
-  //
-  // hovered button
-  //
-    color: $tc; //fg_color
-    background-color: $c;
-    @if $c!=$bg_color { @include _button_border_color($c); }
-    @else { border-color: $borders_color; }
-    background-image: none;
-
-  }
-
-  @else if $t==active {
-  //
-  // pushed button
-  //
-    background-image: none;
-    color: invert($tc);
-    background-color: invert($c);
-    @if $c!=$bg_color { @include _button_border_color($c); }
-    @else { border-color: $borders_color; }
-  }
-  @else if $t==insensitive {
-  //
-  // insensitive button
-  //
-    color: $insensitive_fg_color;
-    background-color: $insensitive_bg_color;
-    border-color: $insensitive_borders_color;
-    background-image: none;
-  }
-  @else if $t==insensitive-active {
-  //
-  // insensitive pushed button
-  //
-    color: $insensitive_fg_color;
-    border-color: $insensitive_borders_color;
-    background-image: none;
-    background-color: $insensitive_bg_color;
-  }
-
-  @else if $t==backdrop {
-  //
-  // backdrop button
-  //
-    color: if($c!=$bg_color, $tc, $backdrop_fg_color);
-    background-color: if($c!=$bg_color, $c, $backdrop_bg_color);
-    border-color: if($c!=$bg_color, $c, $backdrop_borders_color);
-    background-image: none;
-  }
-
-  @else if $t==backdrop-active {
-  //
-  // backdrop pushed button
-  //
-    color: invert($backdrop_fg_color);
-    background-color: $backdrop_borders_color;
-    border-color: $backdrop_borders_color;
-    background-image: none;
-  }
-
-  @else if $t==backdrop-insensitive {
-  //
-  // backdrop insensitive button
-  //
-    color: $insensitive_fg_color;
-    background-color: $insensitive_bg_color;
-    border-color: $insensitive_borders_color;
-    background-image: none;
-  }
-
-  @else if $t==backdrop-insensitive-active {
-  //
-  // backdrop insensitive pushed button
-  //
-    color: $insensitive_fg_color;
-    border-color: $insensitive_borders_color;
-    background-image: none;
-    background-color: mix($backdrop_borders_color,$backdrop_bg_color, 8%);
-  }
-  
-  @else if $t==osd {
-  //
-  // normal osd button
-  //
-    color: $osd_fg_color;
-    background-image: none;
-    background-color: $osd_bg_color;
-    border-color: $osd_borders_color;
-  }
-
-  @else if $t==osd-hover {
-  //
-  // active osd button
-  //
-    color: $osd_fg_color;
-    background-color: lighten($osd_bg_color,30%);
-    border-color: $osd_borders_color;
-  }
-
-  @else if $t==osd-active {
-  //
-  // active osd button
-  //
-    color: $osd_bg_color;
-    background-color: $osd_fg_color;
-    border-color: $osd_borders_color;
-    box-shadow: none;
-  }
-  @else if $t==osd-insensitive {
-  //
-  // insensitive osd button
-  //
-    border-color: $osd_borders_color;
-    color: $insensitive_fg_color;
-  }
-
-  @else if $t==undecorated {
-    color: $tc;
-    background-color: transparent;
-    background-image: none;
-    border-color: transparent;
-  }
-  
-  @else if $t==undecorated-insensitive {
-    color: $insensitive_fg_color;
-    background-color: transparent;
-    background-image: none;
-    border-color: transparent;
-  }
-}
-
-@mixin overshoot($p, $t:normal, $c:$fg_color) {
-//
-// overshoot
-//
-// $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%;
-
-  $_small_gradient_size: 100% $_small_gradient_length;
-  $_big_gradient_size: 100% $_big_gradient_length;
-
-  @if $p==right or $p==left {
-    $_small_gradient_size: $_small_gradient_length 100%;
-    $_big_gradient_size: $_big_gradient_length 100%;
-  }
-
-  $_small_gradient_color: $c;
-  $_big_gradient_color: transparentize($c, 0.93);
-
-  @if $c==$fg_color {
-    $_small_gradient_color: darken($borders_color, 50%);
-    $_big_gradient_color: transparentize($fg_color, 0.93);
-
-    @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
-  }
-
-  $_small_gradient: radial-gradient(ellipse farthest-side at $p,
-                                    $_small_gradient_color 85%,
-                                    transparentize($_small_gradient_color, 1));
-
-  $_big_gradient: radial-gradient(ellipse farthest-side at $p,
-                                  $_big_gradient_color,
-                                  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: $p;
-
-  background-color: transparent; // reset some properties to be sure to not inherit them somehow
-  border: none;                  //
-  box-shadow: none;              //
-}
-
-@mixin undershoot($p) {
-//
-// undershoot
-//
-// $p: position
-//
-// possible $p values:
-// top, bottom, right, left
-//
-
-  $_undershoot_color_dark: transparentize(black, 0.8);
-  $_undershoot_color_light: transparentize(white, 0.8);
-
-  $_gradient_dir: left;
-  $_dash_bg_size: 10px 1px;
-  $_gradient_repeat: repeat-x;
-  $_bg_pos: center $p;
-
-  background-color: transparent; // shouldn't be needed, but better to be sure;
-
-  @if ($p == left) or ($p == right) {
-    $_gradient_dir: top;
-    $_dash_bg_size: 1px 10px;
-    $_gradient_repeat: repeat-y;
-    $_bg_pos: $p center;
-  }
-
-  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
-                                    $_undershoot_color_light 50%,
-                                    $_undershoot_color_dark 50%);
-
-  padding-#{$p}: 1px;
-  background-size: $_dash_bg_size;
-  background-repeat: $_gradient_repeat;
-  background-origin: content-box;
-  background-position: $_bg_pos;
-  border: none;
-  box-shadow: none;
-}
-

gtk/theme/HighContrast/assets.txt

@@ -0,0 +1,60 @@
+text-select-end
+text-select-end-hover
+text-select-end-active
+text-select-start
+text-select-start-hover
+text-select-start-active
+text-select-end-dark
+text-select-end-hover-dark
+text-select-end-active-dark
+text-select-start-dark
+text-select-start-hover-dark
+text-select-start-active-dark
+slider-horz-scale-has-marks-below
+slider-horz-scale-has-marks-below-hover
+slider-horz-scale-has-marks-below-active
+slider-horz-scale-has-marks-below-insensitive
+slider-horz-scale-has-marks-below-backdrop
+slider-horz-scale-has-marks-below-backdrop-insensitive
+slider-vert-scale-has-marks-below
+slider-vert-scale-has-marks-below-hover
+slider-vert-scale-has-marks-below-active
+slider-vert-scale-has-marks-below-insensitive
+slider-vert-scale-has-marks-below-backdrop
+slider-vert-scale-has-marks-below-backdrop-insensitive
+slider-horz-scale-has-marks-above
+slider-horz-scale-has-marks-above-hover
+slider-horz-scale-has-marks-above-active
+slider-horz-scale-has-marks-above-insensitive
+slider-horz-scale-has-marks-above-backdrop
+slider-horz-scale-has-marks-above-backdrop-insensitive
+slider-vert-scale-has-marks-above
+slider-vert-scale-has-marks-above-hover
+slider-vert-scale-has-marks-above-active
+slider-vert-scale-has-marks-above-insensitive
+slider-vert-scale-has-marks-above-backdrop
+slider-vert-scale-has-marks-above-backdrop-insensitive
+slider-horz-scale-has-marks-below-dark
+slider-horz-scale-has-marks-below-hover-dark
+slider-horz-scale-has-marks-below-active-dark
+slider-horz-scale-has-marks-below-insensitive-dark
+slider-horz-scale-has-marks-below-backdrop-dark
+slider-horz-scale-has-marks-below-backdrop-insensitive-dark
+slider-vert-scale-has-marks-below-dark
+slider-vert-scale-has-marks-below-hover-dark
+slider-vert-scale-has-marks-below-active-dark
+slider-vert-scale-has-marks-below-insensitive-dark
+slider-vert-scale-has-marks-below-backdrop-dark
+slider-vert-scale-has-marks-below-backdrop-insensitive-dark
+slider-horz-scale-has-marks-above-dark
+slider-horz-scale-has-marks-above-hover-dark
+slider-horz-scale-has-marks-above-active-dark
+slider-horz-scale-has-marks-above-insensitive-dark
+slider-horz-scale-has-marks-above-backdrop-dark
+slider-horz-scale-has-marks-above-backdrop-insensitive-dark
+slider-vert-scale-has-marks-above-dark
+slider-vert-scale-has-marks-above-hover-dark
+slider-vert-scale-has-marks-above-active-dark
+slider-vert-scale-has-marks-above-insensitive-dark
+slider-vert-scale-has-marks-above-backdrop-dark
+slider-vert-scale-has-marks-above-backdrop-insensitive-dark