Comments (16)
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.
from calcite-colors.
Hurray! Thanks, @julio8a
from calcite-colors.
@CassidyB @alaframboise @kyle-03674 do any of you know the answers to this (especially number 1 above)?
from calcite-colors.
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.
from calcite-colors.
Color values should match this PDF
https://s3-us-west-1.amazonaws.com/patterns.esri.com/files/calcite_color_pdfs/Brand_Color_Palette.pdf
from calcite-colors.
@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. 😄
from calcite-colors.
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.
from calcite-colors.
@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.
from calcite-colors.
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.
from calcite-colors.
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 !
from calcite-colors.
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"
}
*/ }
from calcite-colors.
@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.
from calcite-colors.
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?
from calcite-colors.
from calcite-colors.
there is now only SASS variables and they are updated via the .ase file.
from calcite-colors.
from calcite-colors.
Related Issues (20)
- Add a license HOT 2
- Update Calcite colors to match Swatch HOT 1
- Update color variables HOT 1
- Publish on NPM catalog HOT 2
- Vibrant Blue HOT 4
- Proposal for new ui-blue-hover-dark variable. HOT 22
- Adjust nomenclature and values of bg/surface/text variables HOT 1
- Cowboy Pushing HOT 1
- Change blk-100 hex value to #949494 for border accessibility HOT 1
- Adjust Vibrant Colors HOT 4
- Add chart color themes from dashboard HOT 8
- Add brand color variable HOT 2
- Generate the SCSS file from the TS file so there is only one source of truth HOT 1
- Broken reference page HOT 3
- Major updates: var names, dark foreground updates, single color UI states HOT 2
- Add section for CSS vars to GH pages HOT 3
- Enhancement: Remove border conflicts with backgrounds, update border vars HOT 9
- Invalid css color #73004 HOT 5
- Update references of "theme" to "mode" where applicable
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from calcite-colors.