Color format adjustments #257
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -15,7 +15,7 @@ | |
| latestVersion: null, | ||
| edDraftURI: null, | ||
| editors: [ | ||
| { name: 'Adekunle Oduye', url: 'http://twitter.com/adekunleoduye' }, | ||
| { | ||
| name: 'Ayesha Mazrana (Mazumdar)', | ||
| url: 'https://twitter.com/AyeshaKMaz', | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -299,7 +299,7 @@ export const SubbrandContext = React.createContext(); | |
|
|
||
| const Theme = React.forwardRef(function Theme( | ||
| { theme = 'light', subbrand, children }, | ||
| forwardedRef, | ||
| ) { | ||
| return ( | ||
| <SubbrandContext.Provider value={subbrand}> | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -423,7 +423,7 @@ Describes a gradient that is solid yellow for the first 2/3 and then fades to re | |||||||||
| { | ||||||||||
| "brand-primary": { | ||||||||||
| "$type": "color", | ||||||||||
| "$value": "#00ff66" | ||||||||||
|
There was a problem hiding this comment.
Suggested change
There was a problem hiding this comment. I can make this update in the interim. The color format editors have a different proposal for color gradient, and we should sync with format to align/make recommendations for community feedback. There was a problem hiding this comment. OK! Yes breaking out changes to gradient as a separate PR would be easier to review! This PR shouldn’t introduce any changes to gradient. Because, yes, gradients do use colors, that doesn’t mean gradients change necessarily. Then we can review those unique changes easier |
||||||||||
| }, | ||||||||||
|
|
||||||||||
| "position-end": { | ||||||||||
|
|
@@ -453,7 +453,7 @@ Describes a gradient that is solid yellow for the first 2/3 and then fades to re | |||||||||
|
|
||||||||||
| Describes a color token called "brand-primary", which is referenced as the mid-point of a gradient is black at either end. | ||||||||||
|
|
||||||||||
| <div style="height: 2rem; background: linear-gradient(90deg, #000000, #00ff66, #000000);"></div> | ||||||||||
|
|
||||||||||
| </aside> | ||||||||||
|
|
||||||||||
|
|
||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -80,7 +80,7 @@ Group keys without a dollar sign (`$`) prefix denote: | |
| "$description": "This is an example of a group containing a single token", | ||
| "Token name": { | ||
| "$value": "#000000", | ||
resource11 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| "$type": "color" | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -95,11 +95,11 @@ Group keys without a dollar sign (`$`) prefix denote: | |
| "Subgroup of tokens": { | ||
| "Token 1 name": { | ||
| "$value": "#aabbcc", | ||
| "$type": "color" | ||
| }, | ||
| "Token 2 name": { | ||
| "$value": "#ddeeff", | ||
| "$type": "color" | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -127,7 +127,7 @@ For example: | |
| "$type": "color" | ||
| }, | ||
| "hot pink": { | ||
| "$value": "#ff00ff", | ||
| "$type": "color" | ||
| } | ||
| } | ||
|
|
@@ -162,7 +162,7 @@ For example: | |
| "$value": "#00ff66" | ||
| }, | ||
| "hot pink": { | ||
| "$value": "#ff00ff" | ||
| } | ||
| } | ||
| } | ||
|
|
@@ -199,7 +199,7 @@ Note that, since a group's `$extensions` only relate to that group, they do not | |
| "$type": "color" | ||
| }, | ||
| "hot pink": { | ||
| "$value": "#ff00ff", | ||
| "$type": "color" | ||
| } | ||
| } | ||
|
|
@@ -230,7 +230,7 @@ For example: | |
| "$value": "#00ff66" | ||
| }, | ||
| "hot pink": { | ||
| "$value": "#ff00ff" | ||
| } | ||
| }, | ||
| "typeface": { | ||
|
|
@@ -259,7 +259,7 @@ For example: | |
| "$type": "color" | ||
| }, | ||
| "brand-color-hot-pink": { | ||
| "$value": "#ff00ff", | ||
| "$type": "color" | ||
| }, | ||
| "brand-typeface-primary": { | ||
|
|
@@ -301,7 +301,7 @@ For example, a [=translation tool=] like [Style Dictionary](https://amzn.github. | |
| "$value": "#00ff66" | ||
| }, | ||
| "hot pink": { | ||
| "$value": "#ff00ff" | ||
| } | ||
| }, | ||
| "typeface": { | ||
|
|
@@ -325,7 +325,7 @@ For example, a [=translation tool=] like [Style Dictionary](https://amzn.github. | |
|
|
||
| ```scss | ||
| $brand-color-acid-green: #00ff66; | ||
| $brand-color-hot-pink: #ff00ff; | ||
| $brand-typeface-primary: 'Comic Sans MS'; | ||
| $brand-typeface-secondary: 'Times New Roman'; | ||
| ``` | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -19,20 +19,11 @@ | |
| latestVersion: 'https://tr.designtokens.org/format/', | ||
| edDraftURI: null, | ||
| editors: [ | ||
| { name: 'Daniel Banks', url: 'https://twitter.com/dbanksDesign' }, | ||
| { name: 'Donna Vitan', url: 'http://twitter.com/donnavitan' }, | ||
| { name: 'James Nash', url: 'https://cirrus.twiddles.com/' }, | ||
| { name: 'Kevin Powell', url: 'https://twitter.com/kevinmpowell' }, | ||
| { name: 'Louis Chenais', url: 'https://twitter.com/chuckn0risk' }, | ||
| ], | ||
|
|
||
| github: { | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
@@ -12,21 +12,42 @@ If an explicit type is set, but the value does not match the expected syntax the | |||||||
|
|
||||||||
| ## Color | ||||||||
|
|
||||||||
| Represents a color in the UI. The `$type` property MUST be set to the string `color`. The `$value` property MUST be an object string containing a string `colorSpace`, a numeric `coordinates` array, optional numeric `alpha`, string `colorProfile`, and string `fallback` to support legacy color spaces as needed. | ||||||||
|
|
||||||||
| | Key | Type | Required | Description | | ||||||||
| | :------------- | :------------: | :------: | :--------------------------------------------------------------------------------------------------------------------------------------- | | ||||||||
| | `colorSpace` | `string` | Y | An string representing the color space. | | ||||||||
|
There was a problem hiding this comment. Note: we could probably link to all the valid values from CSS Color Module 4
Suggested change
|
||||||||
| | `colorProfile` | `string` | | String representing url of color profile. | | ||||||||
|
There was a problem hiding this comment. I think we are not using colorProfile, and just aligning with CSS Color Module 4?
Suggested change
There was a problem hiding this comment. In CSS Color Module 4 color terminology section, here's the definition of color space:
Color profile is different, it's about using a particular ICC color profile for device specific implementations (print, for example). For example, you can use the CMYK color space and choose more than one color profile to implement those colors. There was a problem hiding this comment. You’re 100% right, and yes I do see us needing this. As we talked about earlier today, perhaps we limit this initial PR to CSS Color Module 4 where:
Then, we open a separate PR to expand the format to include CSS Color Module 5’s concept of |
||||||||
| | `coordinates` | `number array` | Y | An array of numeric values representing individual color coordinates. | | ||||||||
|
There was a problem hiding this comment. I think we were leaning toward “channels” being the term. Also just in the interest of being really specific, “an array” doesn’t specify the length of the list. Calling it a “tuple of 3 values” means that the values must always be 3—no more, no less. Just like any color in CSS, I think we should enforce that the length is always 3, no matter what.
Suggested change
There was a problem hiding this comment. Yes, we were leaning towards that! The terms For example in the CSS Color Level 4 color type definition it reads:
The CSS Color Level 5 spec builds upon Level 4, yet the terminology is still interchangeable. In ColorJS, the term "coordinates" could be shorthand for component coordinate or channel coordinate if I assume correctly (need to confirm). Happy to move back to Also, I suggest we adjust wording to include There was a problem hiding this comment.
Oh smart! I like the idea of aligning with all that great thinking as much as possible There was a problem hiding this comment. Yes, there have been interest in this support in the legacy color thread! There was a problem hiding this comment. Oh also I think as I said in another comment, maybe we like There was a problem hiding this comment.
This should be an array of arbitrary length. Defining these as arrays now means that implementers are less likely to make assumptions that these will always have a length of 3. |
||||||||
| | `alpha` | `number` | | An integer or floating-point value representing the numeric value. | | ||||||||
|
There was a problem hiding this comment. We should specify this MUST be in the range of There was a problem hiding this comment. Can do. Where should this sentence occur? There was a problem hiding this comment. Anywhere in the |
||||||||
| | `fallback` | `string` | | Unit of distance. Supported values: [HEX 6](https://www.w3.org/TR/css-color-4/#typedef-hex-color) including the preceding `#` character. | | ||||||||
resource11 marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||
|
|
||||||||
| For example, initially the color tokens MAY be defined as such: | ||||||||
|
|
||||||||
| <aside class="example"> | ||||||||
|
|
||||||||
| ```json | ||||||||
resource11 marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||
| { | ||||||||
| "Hot pink": { | ||||||||
| "$type": "color", | ||||||||
| "$value": { | ||||||||
| "colorSpace": "display-p3", | ||||||||
| "colorProfile": "http://example.org/display-p3.icc", | ||||||||
|
There was a problem hiding this comment. Here and below, the format should match the updated syntax of
Suggested change
There was a problem hiding this comment. Thanks for this suggestion! I should clarify why the optional |
||||||||
| "coordinates": [0.92, 0.2, 0.97], | ||||||||
| "alpha": 1, | ||||||||
| "fallback": "#ff00ff" // HEX 6 supported only | ||||||||
| } | ||||||||
| }, | ||||||||
| "Translucent shadow": { | ||||||||
| "$value": "#000000", | ||||||||
|
There was a problem hiding this comment. Intentional to have two |
||||||||
| "$type": "color", | ||||||||
| "$value": { | ||||||||
| "colorSpace": "display-p3", | ||||||||
| "colorProfile": "http://example.org/display-p3.icc", | ||||||||
| "coordinates": [0, 0, 0], | ||||||||
| "alpha": 0.5, | ||||||||
| "fallback": "#000000" // HEX 6 supported only | ||||||||
| } | ||||||||
| } | ||||||||
| } | ||||||||
| ``` | ||||||||
|
|
@@ -39,12 +60,12 @@ Then, the output from a tool's conversion to HSL(A) MAY look something like: | |||||||
|
|
||||||||
| ```scss | ||||||||
| // colors-hex.scss | ||||||||
| $hot-pink: #ff00ff; | ||||||||
| $translucent-shadow: #00000080; | ||||||||
|
|
||||||||
| // colors-hsl.scss | ||||||||
| $hot-pink: hsl(300, 100%, 50%); | ||||||||
| $translucent-shadow: hsla(0, 0%, 0%, 0.5); | ||||||||
| ``` | ||||||||
|
|
||||||||
| </aside> | ||||||||
|
|
||||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For this file, we should just define it in the
srgbspace, and we don’t need thehexfallback:Here and below they should follow the same format
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the feedback! No changes have been added to this file yet. Once we get alignment on the rest, we can make adjustments throughout here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just a suggestion: it is easier to review if this PR made everything consistent in all files, since that has to be done one way or another. Otherwise it ends up in a state of confusion not being able to tell where the proposal starts and where it ends. Would it be OK to just make everything a consistent format so it’s clear to reviewers?