How are ase/css/json/scss/stylus files created/updated? about calcite-colors

[kyle-03674]

To get at the "why" of your question... the a colors were intended to give a more expanded range of color, Where the core set is quite muted and best for interfaces, sometimes you need a bit more punch.

[jonathantneal]

Hurray! Thanks, @julio8a

[paulcpederson]

@CassidyB @alaframboise @kyle-03674 do any of you know the answers to this (especially number 1 above)?

[kyle-03674]

Hi, @jonathantneal . Astute observations. I'm very intrigued -- if you could automate the process to generate all those files based off one ASE file, that would be super awesome! If there were to be an update in the future, it would save tons of tedious work and remove chance for error.

1 - To answer your question, Cassidy and I manually created the css/json/scss/stylus files. One of us read the hex values while the other input the value into the the stylus file. The swatches were first created in sRGB in Illustrator. (Well, outside of Calcite, they first were created in CMYK, then AdobeRGB and sRGB, using Adobe Color Engine for conversions). But back to Calcite, the original css/json/scss/stylus files had values which were inconsistent with what had been published in the PDF. I believe it was @bstifle who noticed that. Then Cassidy and I went through and did a manual update, matching the css/json/scss/stylus files to whatever the PDF said.I honestly don't recall if we updated the ASE -- we may have just left the ASE alone (not optimal for those using automated markup tools in Illustrator or Photoshop).

3 - Cassidy had a process where many of the files were semi-automatically updated based on the stylus file. I'm not an expert on this area, tho. I understood at the time, a couple years ago, but couldn't tell you for sure now.

5 - For future use, I believe that if we were to create the ASE from Photoshop, then the color values are maintained in Illustrator and InDesign. I have tested this and it appears to be true.

5 - As you noticed, the Adobe Color Engine is best at transforming color. I would recommend keeping the source palette(s) in their own color space, and not converting them after the fact.

[kyle-03674]

Color values should match this PDF
https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite_color_pdfs/Brand_Color_Palette.pdf

[jonathantneal]

@kyle-03674, thanks for looking into this.

Good news; we can read ASE color palettes and automatically generate the other formats (CSS, SCSS, Stylus, JSON, etc). Moving forward, I would recommend making this a build step run from Node/NPM. I’d also recommend putting the ASE file in this repository (just in case amazon aws goes down, times out, or this automated process is run offline or from behind a firewall that prevents fetching from aws).

Looking into the ASE format, it seems like they save colors as numbers between 0 and 1 (e.g. 0.482352941176 instead of 123). I believe the tool used to convert them from ASE to other formats may have improperly floored some numbers (e.g. rounding down a value like 0.482352941176 * 255 = 122.99999999988 to become 122 instead of 123), which is why these R, G, and B values seem 1 digit lower than they should be.

Thanks for the sharing the PDF. I don’t see color values for the Primary Brand Color Palettes, so I can’t compare those against our current CSS. However, here’s what the PDF says for Calcite_Blue_100.

Calcite_Blue_100
D2E9F9
R=211 G=234 B=249

I think that’s incorrect, because 211, 234, 249 is D3EAF9, which is what the ASE confirms when I inspect it in Photoshop. I apologize if I’m misreading things, but otherwise I would now expand #23 to update those PDF files as well. 😄

[kyle-03674]

okay. so, you're proposing taking the ASE file "Brand_Supportive_sRGB_DEFAULT__10-2015.ase" and treating it as the master, from which all subsequent representations (CSS, SCSS, Stylus, JSON, etc) will be derived. And updating the PDF accordingly.

Let me think about this.

What would you do if the swatch names in the ASE don't exactly match existing variable names? Or would you first edit the ASE to match existing names? I recall them being close, but probably not exact.

@CassidyB @snelsonux Do you agree this is a good idea, and worth changing in order to improve and document our processes, as well as achieve a higher level of accuracy.

[kyle-03674]

@jonathantneal I just spoke with Cassidy about this, as well as Steven briefly.

This sounds like a great idea, get the build process documented, and to use the ASE to make all the supporting files. Please check with Paul to ensure there's no other concerns that I may not be aware of. If you're able to do this, and get it to work with minimal disruption to anything already in place (i.e, keeping variable names the same) then it sounds good to me. I realize this issue you posted was really just a question -- I may be jumping ahead here. When the time comes, what I would need from you is a read-out of what you see as the hex value, which I would use to update the PDF.

[paulcpederson]

I think that would be a good idea. Definitely would be an improvement.

As long as the Sass variables' names don't change, I think this would plug in pretty seamlessly to Calcite Web.

[snelsonux]

I like the idea too, but I wonder what impact this will have on designers who use Sketch (though I think that Sketch plugins for managing color variables generally use JSON so we might be in the clear). I can do some diligence on that but yeah let's definitely proceed. Good stuff @jonathantneal !

[jonathantneal]

I’ve written a script that reads and parses our ASE files and then generates a JSON file of their combined colors (correctly converted), which may then be used to generate a variables file for Sass, etc.

However, there are colors in variables.scss that I don’t see in either swatch (I’m considering Brand_Primary_sRGB_04-2015.ase, Brand_Supportive_sRGB_DEFAULT__10-2015.ase, and Brand_Supportive_sRGB_DARK__10-2015.ase), such as $Calcite_Blue_a100. How are these a colors generated? What is their significance?

---

Also, what is the difference between the css and patterns_json directories? I see the later files contain comments, but what is their significance?

.Brand_Blue_100 {
  background-color: #b9e0f7; }

.Brand_Blue_100 {
  background-color: #b9e0f7;
  /*
   {
  Hex:"#b9e0f7",
  CMYK:"c25 m2 y0 k0",
  AdobeRGB:"r196 g223 b246",
  sRGB:"r185 g224 b247",
  guid:"487af1c6-5547-4727-9716-913b4d0b3a7a",
  accessibility_white_text:"",
  accessibility_black_text:"AAaa"
  }
  */ }

[kyle-03674]

@jonathantneal the a colors are indeed included in the ASE file "Brand_Supportive_sRGB_DEFAULT__10-2015.ase" See attached, there are five folders of colors. Do you see all of them?

---

Are you asking the significance of the commented color values? I believe those were used (even though they're commented) in order to display the correct color values at Patterns Color when you click on the individual color. Try it on the brand colors at the top.

[jonathantneal]

Thanks @kyle-03674, I will look into this further. I was opening the swatch in Photoshop, but you seem to have folders. Which Adobe program should I be using to verify the contents of the swatch?

[kyle-03674]

Photoshop is fine, even preferred over Illustrator since Illustrator can misrepresent the values. When I add the ASE file in question to Photoshop, I see all the swatches from the 5 folders, just not the folders themselves. I guess use Illustrator to see folder names [if needed], but grab swatches from Photoshop.

[julio8a]

there is now only SASS variables and they are updated via the .ase file.

[kyle-03674]

outstanding.