New color variables in Connect App

[maxceem]

During the working on the challenge https://www.topcoder.com/challenges/30072639 based on the new designs https://marvelapp.com/7908ihg/screen/48326788 there were some colors found in designs which are not present in our current SCSS variables list https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss.

There are several things which we have to resolve after challenge finished and we have a list of missing color variables:

1. Get clarifications from Victor what should we do if see some colors in designs which are missing in the variables list.
2. Find all hardcoded colors in connect app which are missed from the list and add them (connect-app or tc-ui)
3. We already have some variables defined in the connect-app https://github.com/appirio-tech/connect-app/blob/dev/src/styles/_variables.scss. Consider moving them to tc-ui.

[maxceem]

4. Come with the approach when we have a variable in connect-app and after add it tc-ui
   First way:

   1.I thought of using local variables for Connect for colors which are not present in tc-ui
   2.considering 1 is done suppose later we add that color variable to tc-ui
   3.Now we have variables for same color at two places
   4.If two variables are present for same color at two places(Connect and tc-ui), tc-ui variable should override the local variable

   Second way:

   other way could be to remove the local variable once we add the variable to tc-ui

[vic-georgiev]

Those new colors are temporary at the moment; I listed them during the work on the project creation update:
https://marvelapp.com/190egf26/screen/47344589

Yes- ideally we can add those in the TC-UI and keep using the variables

[maxceem]

5. In the marvel design for new settings page top toolbar
   

   has a color value and text color which

   • doesn't match color of top toolbar on other pages in connect
   • use colors which are not on the list https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss
   • background color #262628
   • text color #EDEDF2

[maxceem]

6. Seconds toolbar with submenu uses colors for shadow line which are not on the list:
   
   • #C3C3C8
   • #DCDCE0

[maxceem]

7. Form labels use color which is not on the list

   

   • #47474F

[maxceem]

8. Yellow color which higlights submitted email change is not on the list:
   
   • #FEF7E1 - this is the resulting color which is not on the list. In design color #FEB900 is used with applied opacity 0.1000000014901161

[maxceem]

9. Green color of success validation is not on the list:
   
   • #51B200

[maxceem]

10. Reset password black title color is not on the list:
    

    • #262628

[maxceem]

11. Username hint under the field has a gray color not on the list:
    

    • #888894

[maxceem]

@vic-topcoder In the new design for user settings pages there are several places where some new colors are being used which are not on the list of our colors constants.

I've added comments above with description of such places, see options 5-11. Could you pleaes advise what is the best way to deal with them?

• are they one time usage colors, which probably best to leave as hardcoded colors for one time
• or maybe it's better to add them to the list of you constants, as we are going to reuse them later
• or maybe we should replace them with the closest colors in out constant list?

[vic-georgiev]

@maxceem - I would like to move any definitions from Connect to reflect the tc-ui repo (https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_variables.scss). We should not define new colors in Connect, but reuse existing color palette. This would help us change the theme in the future (when we need it).

A declaration like this redefines our gray colors:

$gray-base    : $tc-black !default;
$gray-darkest : lighten($gray-base, 3.5%);
$gray-darker  : lighten($gray-base, 13.5%);
$gray-dark    : lighten($gray-base, 20%);
$gray         : lighten($gray-base, 33.5%);
$gray-light   : lighten($gray-base, 46.7%);
$gray-lighter : lighten($gray-base, 93.5%);
$gray-lightest: lighten($gray-base, 97.5%);

redefines our colors; Ideally we will populate the colors instead of calculating the issues. This is an important step of defining usage variables (example $switch-background or $page-background) that map to a color palette (like $tc-black or $tc-gray-90.

—-
The other definitions are connect-specific so I think they're fine as repo-only variables. At the time we're not building a library to be reused in the rest of the platform, I think it is ok to leave the variables (outside of the aforementioned color definitions) where they are.

Regarding typography, we should use the TC-UI, not define our own:

$tc-body-large     		  : 20px;
$tc-heading            	: 20px;
$tc-heading-extra-small	: 14px;

as we have them defined in the TC-UI repo:

// Labels
$tc-label-lg: 15px;
$tc-label-md: 13px;
$tc-label-sm: 12px;
$tc-label-xs: 11px;

// Body
$tc-body-lg: 20px;
$tc-body-md: $tc-label-lg; // 15
$tc-body-sm: $tc-label-md; // 13
$tc-body-xs: $tc-label-xs; // 11

// Headings
$tc-heading-xl: 42px;
$tc-heading-lg: 28px;
$tc-heading-md: $tc-body-lg;
$tc-heading-sm: $tc-body-md;
$tc-heading-xs: $tc-body-sm;

[maxceem]

@vic-topcoder thanks for the detailed explanation on this.

12. As I understand from your answer for the new colors which was introduced in the latest marvel design, we have to replace them with closest ones? Right? See options from 5 till 11 above. As they are not on the list of our constants for colors.

13. As I see we don't really use these colors, so we are safe to remove them from connect-app:

    $gray-base    : $tc-black !default;
    $gray-darkest : lighten($gray-base, 3.5%);
    $gray-darker  : lighten($gray-base, 13.5%);
    $gray-dark    : lighten($gray-base, 20%);
    $gray         : lighten($gray-base, 33.5%);
    $gray-light   : lighten($gray-base, 46.7%);
    $gray-lighter : lighten($gray-base, 93.5%);
    $gray-lightest: lighten($gray-base, 97.5%);

14. So we can replace these with variables from tc-ui

     $tc-body-large     		  : 20px; // -> $tc-body-lg
     $tc-heading            	: 20px;   // -> $tc-heading-md
     $tc-heading-extra-small	: 14px;   // -> $tc-heading-xs

    But there will be one mismtach: $tc-heading-extra-small == 14px in connect-app. While $tc-heading-xs == 13px in tc-ui.
    So if we reuse it some fonts could become too small in connect-app. Maybe for this case just remove $tc-heading-extra-small from connect-app and hardocde 14px instead? There are only two places where we use $tc-heading-extra-small.