Preface

I recently was moved to a new-to-me set of Agile teams and tasked with helping a project gain some consistency in design across two products. I'd been doing a bit of research on this topic and had been in attendance to several conferences including (shout out) Squares Conference where many talks were given about Design Systems.

Design Systems, it turns out, are all the rage these days. More importantly though, getting your application off the {framework-library-of-choice} look and onto a branded look for your company and product should be considered an high value to your company and project brand identity. Not to mention getting consistency in the voice and expression of the visual design and writing styles.

I'm going to step though what I did to scrape the CSS files for Color HEX values.

The project consists of two user facing products, an internal web console and an external web form.

Each product uses a core-ui component which pulls in the bulk of the styles from vendors libraries to shared homespun components. On top of this the products themselves have internal style sheet assets, lets call them overrides.

Phase one, Scrape Core and Overrides

From this point on, it might help to be familiar with command line expressions.

So my first step is to compose a command in Terminal and I'm going to start with the trusty "finding things" tool called grep

I need to get all the files lines with a color declared, including background colors, background images, gradients, borders, all the things. I need colors that are in HEX #FFFFFF and HEX-Shorthand #FFF and output the line.

Luckily, all the CSS is nested in a directory called "stylesheets" but I need to know what grep can do for me so I read the manual.

To read the grep manual I type

  man grep

I find the -r flag is for recursive (like most UNIX commands) so one command will search all the files and sub-directories inside "stylesheets"

The -n flag for outputting the line number. This will come in later when I build the refactoring tasks to migrate edge cases into a subset of colors. Let's get to those colors first.

The -i flag to make the match case insensitive for matching `#fffaaa' or '#FFFAAA'

The First Command

  grep -rin ' #' stylesheets > colors.txt

EDIT:

Follow up to the comment below, I went back and specified it to strictly the hex spectrum using egrep

  egrep -rin ' ([\da-f]{2,6})' stylesheets > colors.txt

Anatomy of my first command

  grep         //the command
-irn         //command flags ignore case, recursive and  output line number
' #'         //hash preceded by a space. Wrapped in string single quotes
stylesheets  //the direcory to traverse
>            //pipe send the output from grep to a file
colors.txt   //my output file

This should eliminate any newline ID declarations in the CSS files, unless they are a part of a media query.

Now I have a colors.txt file with a couple hundred lines in the following format:

  file:line_number  line_text(css_prop:css_val)

Sample:

  stylesheets/navigation.css:78:    color: #fff;
stylesheets/navigation.css:106:    color: #FFECC4;
stylesheets/navigation.css:111:    color: #fff;
stylesheets/overrides/bootstrap-overrides.css:8:    background: #D85D5B;
stylesheets/overrides/bootstrap-overrides.css:9:    color: #FFFBF2;
stylesheets/overrides/bootstrap-overrides.css:13:    border-color: #913F3F;
stylesheets/overrides/bootstrap-overrides.css:14:    background: #D85D5B linear-gradient(to bottom, #D85D5B 0px, #C45552 50%);
stylesheets/overrides/bootstrap-overrides.css:15:    color: #FFF;

As suspected, there was one media query ID child; not too bad, considering all the stylesheets; this should be filtered out next phase.

  stylesheets/media-xs.css:2:    #toggleText dl {

NOTE:

This colors.txt file can be imported into a spreadsheet appliaction that lets you import TEXT with custom delimiters (Like Excel).

Set the colon ':' as your delimiter, and you should get 4 colums. With this, it was easy to spot the media query ID child; as the fourth cell on that row was empty.

Phase 2 - unique colors

For this step I turned to the command egrep which is shorthand for grep -E to force --extended-regexp pattern matching

The second command

  egrep -io '#([a-f0-9]{3}){1,2}' colors.txt > colors-unique.txt

Anatomy of the second command

  egrep                 // the command
-io                    // flags to ignore case and output only the matching part of the line
'#([a-f0-9]{3}){1,2}' //my regexp after much sluething wrapped in string single quotes
colors.txt            // the file to process (from earlier)
>                     // pipe the output to a file
colors-unique.txt     // the output file

Anatomy of the REGEXP

  #             // start matching a line part where it containe a hash
([a-f0-9]{3}) // match HEX Shorthand 
{1,2}         // possibly match the last sequence one time for FFF or two times consecutivly for FFFFFF

That said, now I have a file with a few hundred color values including repeats and where there may have been a gradient with multiple color declarations on one CSS Value.

I really only need a subset of the unique color values.

One more shot

I remove (rm) or delete colors-unique.txt previously generated

  rm colors-unique.txt

This time I take it a step further and introduce a UNIX PIPE to pipe the output from the grep into a sort command before it is placed in the final file.

The second command revised

  egrep -io '#([a-f0-9]{3}){1,2}' colors.txt | sort -u > colors-unique.txt

Additional Anatomy of the second command

   |       // this pipes the data-stream to the command which follows
 sort -u // the sort command with the "unique" flag to only output one instance of each color

Thats it, now I have a file of 95 colors. I need to document these on a visual tool so my team can see why we may need to eliminate a few of the edge cases.

What next?!

My next step will be to follow the build tree and get the output from each app overrides

Followimg that, I'll probably port the HEX values to HSLA, probably with Sass. I'll likely generate an HTML file with blocks of color for each line item in the text file. Then arrange them in near neighbor by HSLA so we can see the variations of blues, greens, reds, oranges, grays, and so forth.

Sources Cited for research


1,064 4 10