Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color format adjustments #257

Open
wants to merge 7 commits into
base: color-first-draft
Choose a base branch
from
Open

Color format adjustments #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9fa91b1
fix(color): revert editors to original names and urls
resource11 Sep 11, 2024
f878152
chore: Merge branch 'color-first-draft' into color-format-adjustments
resource11 Oct 31, 2024
af6374e
fix: standardize pink green naming and values
resource11 Nov 8, 2024
cee6683
fix: rename magestic-magenta to hot-pink
resource11 Nov 8, 2024
a5a46a0
fix: modifies format color object, adjusts docs
resource11 Nov 8, 2024
6954bb9
chore: linting
resource11 Nov 8, 2024
63051c8
fix: content adjustments from PR comments
resource11 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions technical-reports/color/color-type.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ For example, initially color tokens may be defined as such:

```json
{
"Majestic magenta": {
"Hot pink": {
"$type": "color",
"$value": {
"$hex": "#ff00ff"
Copy link
Contributor

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 srgb space, and we don’t need the hex fallback:

Suggested change
"$hex": "#ff00ff"
"colorSpace": "srgb",
"channels": [1, 0, 1]

Here and below they should follow the same format

Copy link
Author

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.

Copy link
Contributor

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?

Expand All @@ -52,7 +52,7 @@ Then, the output file may look something like:

```scss
// colors-hex.scss
$majestic-magenta: #ff00ff;
$hot-pink: #ff00ff;
$translucent-shadow: #00000080;
```

Expand All @@ -75,20 +75,20 @@ For example, initially color tokens may be defined as such:

```json
{
"Majestic magenta": {
"Hot pink": {
"$type": "color",
"$value": {
"$hex": "#c44587",
"$hex": "#ff00ff",
"$colorSpace": {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here, and below, these should align with the current spec:

Suggested change
"$colorSpace": {
"colorSpace": "srgb",
"channels": [1, 0, 1],

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See above comment

"name": "srgb",
"$components": [196, 69, 135]
}
}
},
"Simple sage": {
"Acid green": {
"$type": "color",
"$value": {
"$hex": "#b4d8a7",
"$hex": "#00ff66",
"$colorSpace": {
"name": "srgb",
"$components": [180, 216, 167],
Expand All @@ -107,8 +107,8 @@ Then, the output from a tool’s conversion to RGBA may look something like:

```scss
// colors-rgba.scss
$majestic-magenta: rgba(196, 69, 135, 1);
$simple-sage: rgba(180, 216, 167, 0.75);
$hot-pink: rgba(255, 0, 255, 1);
$acid-green: rgba(0, 255, 102, 1);
```

</aside>
Expand All @@ -125,20 +125,20 @@ Formatted in H (hue), S (saturation), L (lightness) and an optional (A) alpha. H

```json
{
"Majestic magenta": {
"Hot pink": {
"$type": "color",
"$value": {
"$hex": "#c44587",
"$hex": "#ff00ff",
"$colorSpace": {
"name": "hsl",
"$components": [329, 0.52, 0.52]
}
}
},
"Simple sage": {
"Acid green": {
"$type": "color",
"$value": {
"$hex": "#b4d8a7",
"$hex": "#00ff66",
"$colorSpace": {
"name": "hsl",
"$components": [104, 0.39, 0.75],
Expand All @@ -157,8 +157,8 @@ Then, the output variables may look like:

```scss
// colors-hsl.scss
$majestic-magenta: hsl(329, 52%, 52%);
$simple-sage: hsl(104, 39%, 74%, 0.75);
$hot-pink: hsl(300, 100%, 50%);
$acid-green: hsl(144, 100%, 50%, 0.75);
```

</aside>
Expand All @@ -177,16 +177,16 @@ Hex8 uses two extra digits, known as the alpha value, to change the transparency

```json
{
"Majestic magenta": {
"Hot pink": {
"$type": "color",
"$value": {
"$hex": "#c4458780"
"$hex": "#ff00ff"
}
},
"Simple sage": {
"Acid green": {
"$type": "color",
"$value": {
"$hex": "#b4d8a780"
"$hex": "#00ff66"
}
}
}
Expand All @@ -200,12 +200,12 @@ Then, the output variables may look like:

```scss
// colors-hex.scss
$majestic-magenta: #c4458780;
$simple-sage: #b4d8a780;
$hot-pink: #ff00ff;
$acid-green: #00ff66;

// colors-rgba.scss
$majestic-magenta: rgba(196, 69, 135, 0.5);
$simple-sage: rgba(180, 216, 167, 0.5);
$hot-pink: rgba(255, 0, 255, 1);
$acid-green: rgba(0, 255, 102, 1);
```

</aside>
Expand Down
2 changes: 1 addition & 1 deletion technical-reports/color/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
latestVersion: null,
edDraftURI: null,
editors: [
{ name: 'Adekunle Oduye', url: 'https://www.adekunleoduye.com/' },
{ name: 'Adekunle Oduye', url: 'http://twitter.com/adekunleoduye' },
{
name: 'Ayesha Mazrana (Mazumdar)',
url: 'https://twitter.com/AyeshaKMaz',
Expand Down
2 changes: 1 addition & 1 deletion technical-reports/color/token-naming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ export const SubbrandContext = React.createContext();

const Theme = React.forwardRef(function Theme(
{ theme = 'light', subbrand, children },
forwardedRef
forwardedRef,
) {
return (
<SubbrandContext.Provider value={subbrand}>
Expand Down
4 changes: 2 additions & 2 deletions technical-reports/format/composite-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "#99ff66"
"$value": "#00ff66"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"$value": "#00ff66"
"$value": {
"colorSpace": "srgb",
"channels": [0, 1, 0.4]

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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": {
Expand Down Expand Up @@ -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, #99ff66, #000000);"></div>
<div style="height: 2rem; background: linear-gradient(90deg, #000000, #00ff66, #000000);"></div>

</aside>

Expand Down
24 changes: 13 additions & 11 deletions technical-reports/format/groups.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,10 @@ Group keys without a dollar sign (`$`) prefix denote:
"Group of tokens": {
"$description": "This is an example of a group containing a single token",
"Token name": {
"$value": "#000000",
"$type": "color",
"$value": {
"colorSpace": "srgb",
"channels": [0, 0, 0]
}
}
}
}
Expand All @@ -95,11 +97,11 @@ Group keys without a dollar sign (`$`) prefix denote:
"Subgroup of tokens": {
"Token 1 name": {
"$value": "#aabbcc",
"$type": "color",
"$type": "color"
},
"Token 2 name": {
"$value": "#ddeeff",
"$type": "color",
"$type": "color"
}
}
}
Expand Down Expand Up @@ -127,7 +129,7 @@ For example:
"$type": "color"
},
"hot pink": {
"$value": "#dd22cc",
"$value": "#ff00ff",
"$type": "color"
}
}
Expand Down Expand Up @@ -162,7 +164,7 @@ For example:
"$value": "#00ff66"
},
"hot pink": {
"$value": "#dd22cc"
"$value": "#ff00ff"
}
}
}
Expand Down Expand Up @@ -199,7 +201,7 @@ Note that, since a group's `$extensions` only relate to that group, they do not
"$type": "color"
},
"hot pink": {
"$value": "#dd22cc",
"$value": "#ff00ff",
"$type": "color"
}
}
Expand Down Expand Up @@ -230,7 +232,7 @@ For example:
"$value": "#00ff66"
},
"hot pink": {
"$value": "#dd22cc"
"$value": "#ff00ff"
}
},
"typeface": {
Expand Down Expand Up @@ -259,7 +261,7 @@ For example:
"$type": "color"
},
"brand-color-hot-pink": {
"$value": "#dd22cc",
"$value": "#ff00ff",
"$type": "color"
},
"brand-typeface-primary": {
Expand Down Expand Up @@ -301,7 +303,7 @@ For example, a [=translation tool=] like [Style Dictionary](https://amzn.github.
"$value": "#00ff66"
},
"hot pink": {
"$value": "#dd22cc"
"$value": "#ff00ff"
}
},
"typeface": {
Expand All @@ -325,7 +327,7 @@ For example, a [=translation tool=] like [Style Dictionary](https://amzn.github.

```scss
$brand-color-acid-green: #00ff66;
$brand-color-hot-pink: #dd22cc;
$brand-color-hot-pink: #ff00ff;
$brand-typeface-primary: 'Comic Sans MS';
$brand-typeface-secondary: 'Times New Roman';
```
Expand Down
11 changes: 1 addition & 10 deletions technical-reports/format/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,11 @@
latestVersion: 'https://tr.designtokens.org/format/',
edDraftURI: null,
editors: [
{ name: 'Adekunle Oduye', url: 'https://www.adekunleoduye.com/' },
{
name: 'Ayesha Mazrana (Mazumdar)',
url: 'https://twitter.com/AyeshaKMaz',
},
{ name: 'Daniel Banks', url: 'https://twitter.com/dbanksDesign' },
{ name: 'Donna Vitan', url: 'https://www.donnavitan.com/' },
{ name: 'Drew Powers', url: 'https://pow.rs/' },
{ name: 'Donna Vitan', url: 'http://twitter.com/donnavitan' },
{ name: 'James Nash', url: 'https://cirrus.twiddles.com/' },
{ name: 'Kathleen McMahon', url: 'https://kathleenmcmahon.dev' },
{ name: 'Kevin Powell', url: 'https://twitter.com/kevinmpowell' },
{ name: 'Louis Chenais', url: 'https://twitter.com/chuckn0risk' },
{ name: 'Mike Kamminga', url: 'https://twitter.com/mikekamminga' },
{ name: 'Matthew Ström', url: 'https://matthewstrom.com/' },
],

github: {
Expand Down
43 changes: 32 additions & 11 deletions technical-reports/format/types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,43 @@ If an explicit type is set, but the value does not match the expected syntax the

## Color

Represents a 24bit RGB or 24+8bit RGBA color in the sRGB color space. The `$type` property MUST be set to the string `color`. The `$value` property MUST be a string containing a [hex triplet/quartet](https://www.w3.org/TR/css-color-4/#typedef-hex-color) including the preceding `#` character. To support other color spaces, such as HSL, translation tools SHOULD convert color tokens to the equivalent value as needed.
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. |
| `colorProfile` | `string` | | String representing url of color profile. |
| `channels` | `array` | Y | Tuple of 3 values representing the 3 channel components of the color space. Allowed value types include number or the `none` keyword, and ranges depend on the `colorSpace`. specified. |
| `alpha` | `number` | | An integer or floating-point value representing the numeric value. |
| `hex` | `string` | | Fallback sRGB-8 color for colors using higher gamuts or higher bit depths. MUST be in the format of a [HEX 6](https://www.w3.org/TR/css-color-4/#typedef-hex-color) string, including the preceding `#` character. |

For example, initially the color tokens MAY be defined as such:

<aside class="example">

```json
```jsonc
{
"Majestic magenta": {
"$value": "#ff00ff",
"$type": "color"
"Hot pink": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"colorProfile": "http://example.org/display-p3.icc",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here and below, the format should match the updated syntax of colorSpace + channels + alpha (optional) + hex (optional)

Suggested change
"colorProfile": "http://example.org/display-p3.icc",
"channels": [0.92, 0.2, 0.97],
"hex": "#ff00ff" // HEX 6 supported only

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this suggestion! I should clarify why the optional colorProfile is listed here. I was thinking of the cases for print where a specific color profile should be associated with the color space for conversion. Perhaps we do a separate callout for this and use CMYK as the color space example.

"coordinates": [0.92, 0.2, 0.97],
"alpha": 1,
"fallback": "#ff00ff", // HEX 6 supported only
},
},
"Translucent shadow": {
"$value": "#00000080",
"$type": "color"
}
"$value": "#000000",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Intentional to have two value fields?

"$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
},
},
}
```

Expand All @@ -39,12 +60,12 @@ Then, the output from a tool's conversion to HSL(A) MAY look something like:

```scss
// colors-hex.scss
$majestic-magenta: #ff00ff;
$hot-pink: #ff00ff;
$translucent-shadow: #00000080;

// colors-hsl.scss
$majestic-magenta: hsl(300, 100%, 50%);
$translucent-shadow: hsla(300, 100%, 50%, 0.5);
$hot-pink: hsl(300, 100%, 50%);
$translucent-shadow: hsla(0, 0%, 0%, 0.5);
```

</aside>
Expand Down
Loading