Semantic color vars

[himedlooff]

#99 sparked the idea of using better color var names like @primary-action instead of straight up using @pacific.

[himedlooff]

Here is the current proposal that myself, @Scotchester and @virginiacc chatted about today. We'd like to run it by others, especially @ascott1, @contolini, @wernerc, @sephcoster, and @awolfe76.

The goal of this proposal is to allow non-CFPB Capital Framework users to more easily customize the framework colors.

• If you like the idea then please give a 👍.
• If you have concerns then please note them here. I'm going to set up a meeting invite for tomorrow (1/13) at 3pm. We can talk about any big issues at that time.

I know some of you may be very busy with the incoming fellows so if you do have concerns and can't make it please let me know here. Also if this makes no sense to you or if something isn't clearly explained, please let me know.

Capital Framework color variables proposal

• Capital Framework will not use CFPB-branded colors or color variables for any
  UI elements.
• As a result, docs for components will no longer be CFPB-branded and the Design Manual will
  become the new go-to place to review CFPB-Branded Capital Framework patterns.
• The unbranded docs will still be the go-to source for code-related documentation.

What does this achieve?

Approaching color variables in this way will force CF-development to assume the
perspective of a non-CFPB user and make customizing colors across the framework
much easier. It also helps to tie Captial Framework and Design Manual development
together in a way that has previously been lacking. This could lay the groundwork
for allowing non-CFPB users to fork the Design Manual, override the colors, and
create their own custom-branded Design Manual.

How would it work?

To add custom branding to a Captial Framework project, you simply need to override
color variables in one locations, cf-var-overrides.less. This is an optional
and project-specific file, meaning it is not needed to compile the framework or
a component and is not needed or used to compile the docs when working on a component.
The file lists all of the color variables used across all Capital Framework
components, and from here, you can architect and override color variables in any
way that you want. CFPB projects can pull in a globally shared cfpb-brand-colors.less
and cf-var-overrides.less file, which will provide the proper CFPB-branded overrides for
all Capital Framework components.

Examples

Updates to cf-base.less within the cf-core component

@link-color: #some-non-cfpb-hex;
@link-color-hover: #another-non-cfpb-hex;

a {
    color: @link-color;
    &:hover {
        colore: @link-color-hover;
    }
}

Updates to cf-buttons.less within the cf-button component

@btn-primary: #some-non-cfpb-hex;
@btn-primary-hover: fade(@btn-primary);
@btn-primary-color: #some-non-cfpb-hex;

@btn-secondary: #some-non-cfpb-hex;
@btn-secondary-hover: fade(@btn-secondary);
@btn-secondary-color: #some-non-cfpb-hex;

.btn {
    background: @btn-primary;
    color: @btn-primary-color;
    &:hover {
        background: @btn-primary-hover;
    }
}

.btn__secondary {
    background: @btn-secondary;
    color: @btn-secondary-color;
    &:hover {
        background: @btn-secondary-hover;
    }
}

cf-vars-override.less within a CFPB project

@import "cf-brand-colors.less";

// cf-core overrides

@link-color: @pacific;
@link-color-hover: @pacific-hover;

// cf-buttons overrides

@btn-primary: @pacific;
@btn-primary-hover: @pacific-80;
@btn-primary-color: @white;

@btn-secondary: @gray;
@btn-secondary-hover: @darkgray;
@btn-secondary-color: @white;

An example of cf-vars-override.less within a non-CFPB project

// My brand colors
@brand-color: #some-hex;
@primary-action: #some-hex;
@secondary-action: #some-hex;
@white: #some-hex;

// cf-core overrides

@link-color: @primary-action;
@link-color-hover: fade(@primary-action, 50%);

// cf-buttons overrides

@btn-primary: @primary-action;
@btn-primary-hover: fade(@primary-action, 25%);
@btn-primary-color: @white;

@btn-secondary: @secondary-action;
@btn-secondary-hover: darken(@secondary-action, 25%);
@btn-secondary-color: @white;

How would this affect current components and projects?

All components that specify colors would be updated to use more semantic color
variable names. To use these updated components in your project you will
need to provide the shared cf-var-overrides.less file that will be available
as a bower component. This file will include the CFPB brand color variables and
will override all CF component color variables for you. The name of the file might
change to something less Captial Framework-specific but the point is it's a file
we can all easily share and use. Filename suggestions are welcome, maybe something
with "theme" in it?

How would this affect new projects?

We will update cf-generator to ask the user if they want to use the CFPB brand.
If they do then we'll include the shared CFPB cf-var-overrides.less theme file.
If they don't then we cal provide a version of cf-var-overrides.less that they
can override themselves.

[awolfe76]

👍

And definitely like the idea of the better variable names, #99.

Still meeting today?

[himedlooff]

I haven't heard back from a few people so I'll be there at 3 just in case. If no one there has any concerns then it'll be a quick meeting.

[contolini]

👍 Asking some questions in #dev-tango atm but no concerns here.

[sephcoster]

👍 No issues.

[himedlooff]

Thanks for the input everyone. I'll move forward with this. 😄

[himedlooff]

This is in progress. generator-cf has been updated ot include the cfpb palette and the override file. cf-buttons has been updated to use vars for each button style. I'll move onto the other components now that those two have been merged.

[contolini]

@himedlooff Where'd you leave off with this? Is this something I can continue to work on?

[himedlooff]

Looks like all of the components are using color variables now so we can close this.

[contolini]

💓