1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default [4.2 RC] custom theme compiles before parent theme

    [4.2 RC] custom theme compiles before parent theme


    When running sencha ant sass theme on a custom theme that extends neptune, the order that items are compiled seems to make overriding or leveraging parent theme variables impossible. My theme is 'IesExpertTheme' and my app name is 'IesExpert'.

    When I attempt to use a var from neptune in my custom theme I get a build error:

    Code:
    [INF] [shellscript]     error IesExpert-all.scss (Line 19 of ../../../packages/IesExpertTheme/sass/var/Component.scss: Undefined variable: "$base-dark-color".)
    Here is a snippet from my build/production/IesExpert-all.scss

    Code:
    @import '../../../packages/IesExpertTheme/sass/var/Component';
    @import '../../../packages/ext-theme-neptune/sass/var/Component';
    So the sass Component variables in the custom theme will be compiled before the neptune Component variables.

    Shouldn't this be the other way around?

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    21
    Vote Rating
    5
    Navaar is on a distinguished road

      0  

    Default


    Its kind of a strange order once you think about it. It seems to go like this:

    Custom Theme Vars
    Parent Theme Vars
    Grandparent Theme Vars
    Grandparent Theme Source
    Parent Theme Source
    Custom Theme Source

    This is required so that you can override variables defined in the inherited themes. I will agree that it makes it difficult to alter values created by a theme. You can cheat by re-defining variables in your source, order will be important, however.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default


    Yeah we could get around the issue by putting vars in the 'wrong' place but it would be a shame to start hacking this new approach to themes. I'd prefer to start off with a neat and logical approach ;-)

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default


    Looking at this again this morning. The order is correct because of the use of !default

    See: http://compass-style.org/help/tutori...ble-variables/

    However I'm still a bit unclear on this as some variables don't seem to work, for example in ext-theme-neptune/sass/var/tab/Panel.scss is a var for tab backgrounds:

    $tab-background-gradient: null !default;

    Which is intended to overrule the same var in ext-theme-neutral/sass/var/tab/Panel.scss


    $tab-background-gradient: 'tab' !default;

    In an app that uses ext-theme-neutral the tabs have a gradient background. Given the above I would expect the tabs to have a flat (single color) background.

    According to the compass documentation above, $tab-background-gradient should be null because that is it's first assignment.

    Unless the value of null is causing the issue? As it says in the compass doco, 'the constant is only set if it does not already have a value'.

    Is null not considered a value?

    EDIT: yes null is the problem. See http://sass-lang.com/docs/yardoc/fil...able_defaults_
    Last edited by mbudm; 25 Feb 2013 at 3:42 PM. Reason: second url answers the question

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    48
    Vote Rating
    2
    mbudm is on a distinguished road

      0  

    Default


    Ok a bit of a hack but here's how I got around the null value problem, at least with gradients.

    In my custom theme I set up support for a new gradient type - 'flat'

    This is added to sass/etc/all.scss

    Code:
    @function linear-gradient-flat($direction, $bg-color) {
        @return linear-gradient($direction, color_stops($bg-color) );
    }
    Then I can set the tab background vars to this gradient type:

    Code:
    $tab-background-gradient: 'flat' !default;
    $tab-background-gradient-over: 'flat' !default;
    $tab-background-gradient-active: 'flat' !default;
    $tab-background-gradient-disabled: 'flat' !default;
    $tabbar-background-gradient: flat !default;
    Because these vars have a value of 'flat' as opposed to null, the won't be overwritten by the vars in ancestor themes.

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default


    For reference, the Theme guide has a section on this order and *why* it is this way - http://docs.sencha.com/ext-js/4-2/#!/guide/theming
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

Thread Participants: 2

Tags for this Thread