Yes, I got this, too.
I'll try to point out some things I encountered and which I think should be fixed/changed.
1. The "null is not a color for mix" error:
It's in line 124 in ext-theme-neutral/sass/src/button/Button.scss
Code:
$mix-color: $background-color;
@if $mix-color == transparent {
$mix-color: #fff;
}
.#{$prefix}ie8m & {
color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
}
should be
Code:
$mix-color: $background-color;
@if $mix-color == transparent or $mix-color == null {
$mix-color: #fff;
}
.#{$prefix}ie8m & {
color: mix($glyph-color, $mix-color, $glyph-opacity * 100);
}
2. Setting $window-border-radius to null causes errors in line 148 of ext-theme-neutral/sass/src/window/Window.scss
Code:
$frame-top: max(top($ui-border-width), max(top($ui-border-radius), right($ui-border-radius)));
$header-bottom-padding-adjust: $frame-top - top($ui-border-width);
$header-expanded-padding:
top($ui-header-padding),
right($ui-header-padding),
bottom($ui-header-padding) - $header-bottom-padding-adjust,
left($ui-header-padding);
@if $ui-border-radius != null {
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-top',
$border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
$border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width),
$padding: $header-expanded-padding,
$background-color: $ui-header-background-color
);
should be
Code:
@if $ui-border-radius != null {
$frame-top: max(top($ui-border-width), max(top($ui-border-radius), right($ui-border-radius)));
$header-bottom-padding-adjust: $frame-top - top($ui-border-width);
$header-expanded-padding:
top($ui-header-padding),
right($ui-header-padding),
bottom($ui-header-padding) - $header-bottom-padding-adjust,
left($ui-header-padding);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-top',
$border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
$border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width),
$padding: $header-expanded-padding,
$background-color: $ui-header-background-color
);
3. Window headers should accept background-gradient parameters like a Panel to be more flexible when extended. (line 178 and following of ext-theme-neutral/sass/src/window/Window.scss)
Code:
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-top',
$border-radius: top($ui-border-radius) right($ui-border-radius) 0 0,
$border-width: top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width),
$padding: $header-expanded-padding,
$background-color: $ui-header-background-color,
$background-gradient: $ui-header-background-gradient
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-right',
$border-radius: 0 top($ui-border-radius) right($ui-border-radius) 0,
$border-width: left($ui-header-border-width) top($ui-header-border-width) right($ui-header-border-width) $header-border-bottom-width,
$padding: rotate90($header-expanded-padding),
$background-color: $ui-header-background-color,
$background-gradient: $ui-header-background-gradient,
$background-direction: right
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-bottom',
$border-radius: 0 0 top($ui-border-radius) left($ui-border-radius),
$border-width: $header-border-bottom-width right($ui-header-border-width) top($ui-header-border-width) left($ui-header-border-width),
$padding: rotate180($header-expanded-padding),
$background-color: $ui-header-background-color,
$background-gradient: $ui-header-background-gradient
);
@include x-frame(
$cls: 'window-header',
$ui: '#{$ui-label}-left',
$border-radius: right($ui-border-radius) 0 0 top($ui-border-radius),
$border-width: right($ui-header-border-width) $header-border-bottom-width left($ui-header-border-width) top($ui-header-border-width),
$padding: rotate270($header-expanded-padding),
$background-color: $ui-header-background-color,
$background-gradient: $ui-header-background-gradient,
$background-direction: right,
$include-frame-rtl: $include-rtl
);
and of course define the variables for that.
4. I think not to generate the corner slices in frame mixin if background-color is transparent, is wrong.
I tried to make borders around toolbar buttons (that do not have a background) and i didn't getting the slices. I hacked around by setting
Code:
$button-toolbar-background-color: rgba($neutral-color, 0);
$button-toolbar-background-gradient: 'make-border-images-for-ie'; // something that is not a predefined gradient and not null
Line 377 of ext-theme-base/sass/src/etc/mixins/frame.scss
Code:
@if $background-color != transparent {
background-image: slicer-corner-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-corners');
}
and the following rtl-lines...
Hope, that someone can take a look on it.
Thanks
makana