Results 1 to 5 of 5

Thread: Sencha Themer custom variables

  1. #1
    Sencha Premium User
    Join Date
    Feb 2013
    Location
    Canada
    Posts
    36
    Answers
    1

    Default Answered: Sencha Themer custom variables

    Hi there,

    Is there anyway to support creating custom variables from themer, so they can be used when creating new UIs?

  2. I believe you can achieve something close to this right now with Themer, and we will soon be adding a feature that will improve it for you.

    One commonly missed feature of Themer is the 'palette'. When you select a color variable, the first tab is a list of colors (with varying lightness). By default the base, background, and font colors show up, however, you can add custom colors as well. On the Material Design (MD), the `+` icon will add the color to the palette, and the color picker, there is a 'Add to Palette' button. When you need to use common colors throughout your Theme, it is useful to add them to your palette, this is part of what custom variables accomplish.

    We currently have planned a feature that will intake a CSS (or really any text file), and scan it for colors to add to the palette. This should help get your list of colors onto the palette quickly (as opposed to manually adding them).

    The one loss from using this functionality is changing your 'custom' colors after you apply them to variables/sass parameters. This is probably where we would look to fill a gap in the future.

    Thanks for your feedback, it is very helpful!!

  3. #2
    Sencha - Ext JS Dev Team
    Join Date
    Mar 2016
    Posts
    64
    Answers
    20

    Default

    Not at this time, but something we may look at in the future. If possible, can you provide a description of your particular use-case? Understanding more of how customers would utilize custom variables in Themer would help guide us better.

    For instance, what would be the advantage to using custom variables with UIs in Themer? If it's re-use, does the color palette solve this for you (adding colors for re-use to your palette, then using them when creating/modifying UIs), are there other types of variables you'd want to see for re-use?

    Also, what would you imagine the interaction to look like? A place to define all of your custom variables, then a way to apply them throughout Themer?

  4. #3
    Sencha Premium User
    Join Date
    Feb 2013
    Location
    Canada
    Posts
    36
    Answers
    1

    Default

    Hi Dan!

    We have many custom UIs for each Ext component that use different colors.

    Examples:

    Code:
    $custom-ui-theme--neutral-color-100 : white; 
    $custom-ui-theme--neutral-color-200 : gray; 
    $custom-ui-theme--neutral-color-300 : black; 
    $custom-ui-theme-accent-color: orange;

    I want to be able to use these colors with custom UIs in Sencha Themer..


    Code:
    @include extjs-toolbar-ui(
    $ui: "theme-ui-toolbar-neutral-100",
    $background-color: $custom-ui-theme--neutral-color-100
    $border-color: $custom-ui-theme--neutral-color-100
    );
    
    
    @include extjs-toolbar-ui(
    $ui: "theme-ui-toolbar-neutral-200",
    $background-color: $custom-ui-theme--neutral-color-200,
    $border-color: $custom-ui-theme--neutral-color-200
    );
    
    
    @include extjs-toolbar-ui(
    $ui: "theme-ui-toolbar-accent",
    $background-color: $custom-ui-theme-accent-color,
    $border-color: $custom-ui-theme-accent-color
    );

    Interaction:

    Our global variables are placed in etc\all.scss

    It would be very nice to have them there when created using themer.

  5. #4
    Sencha - Ext JS Dev Team
    Join Date
    Mar 2016
    Posts
    64
    Answers
    20

    Default

    I believe you can achieve something close to this right now with Themer, and we will soon be adding a feature that will improve it for you.

    One commonly missed feature of Themer is the 'palette'. When you select a color variable, the first tab is a list of colors (with varying lightness). By default the base, background, and font colors show up, however, you can add custom colors as well. On the Material Design (MD), the `+` icon will add the color to the palette, and the color picker, there is a 'Add to Palette' button. When you need to use common colors throughout your Theme, it is useful to add them to your palette, this is part of what custom variables accomplish.

    We currently have planned a feature that will intake a CSS (or really any text file), and scan it for colors to add to the palette. This should help get your list of colors onto the palette quickly (as opposed to manually adding them).

    The one loss from using this functionality is changing your 'custom' colors after you apply them to variables/sass parameters. This is probably where we would look to fill a gap in the future.

    Thanks for your feedback, it is very helpful!!

  6. #5
    Sencha Premium User
    Join Date
    Feb 2013
    Location
    Canada
    Posts
    36
    Answers
    1

    Default

    Thanks very helpful!

Similar Threads

  1. Replies: 5
    Last Post: 21 Mar 2017, 6:03 AM
  2. Sencha Themer 1.1 Form
    By ZEUI in forum Sencha Themer
    Replies: 2
    Last Post: 17 Nov 2016, 9:35 AM
  3. Sencha Themer 1.0 is Now Available
    By mitchellsimoens in forum Sencha Themer
    Replies: 0
    Last Post: 7 Sep 2016, 5:10 AM
  4. Using themer on custom Ext JS components
    By wadhahjebri in forum Sencha Themer
    Replies: 3
    Last Post: 17 Aug 2016, 6:48 AM
  5. Replies: 2
    Last Post: 26 Oct 2015, 10:57 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •