Skip to content

Commit

Permalink
Sync color-format color type verbiage
Browse files Browse the repository at this point in the history
  • Loading branch information
resource11 committed Aug 22, 2024
1 parent c61fab2 commit c58ca34
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 11 deletions.
2 changes: 1 addition & 1 deletion technical-reports/color/color-type.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The `$colorSpace` object has the following properties:

## Hex - required support

For the color value, the required fallback format to represent color through design tokens is a hex or hex8 value. A hex triplet is a 6-digit, 24 bit, hexadecimal number that represents Red, Green, and Blue values as `#RRGGBB`. An eight-character hex will include the alpha value in the last 2 characters. If no alpha value is specified, it is assumed the color if fully opaque.
For the color value, the required fallback format to represent color through design tokens is a [hex triplet/quartet](https://www.w3.org/TR/css-color-4/#typedef-hex-color) value. A hex triplet is a 6-digit, 24 bit, hexadecimal number that represents Red, Green, and Blue values as `#RRGGBB`. An eight-character hex will include the alpha value in the last 2 characters. If no alpha value is specified, it is assumed the color if fully opaque.

For the initial version of this spec, we expect tools to support Hex values, at minimum. The `$value` property is an object that MUST include a `$hex` property containing a hex value, including the preceding `#` character. To support other color spaces, such as HSL, additional properties can be specified, as demonstrated below.

Expand Down
6 changes: 3 additions & 3 deletions technical-reports/color/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@
latestVersion: null,
edDraftURI: null,
editors: [
{ name: 'Adekunle Oduye', url: 'http://twitter.com/adekunleoduye' },
{ name: 'Adekunle Oduye', url: 'https://www.adekunleoduye.com/' },
{
name: 'Ayesha Mazrana (Mazumdar)',
url: 'https://twitter.com/AyeshaKMaz',
},
{ name: 'Kathleen McMahon', url: 'https://twitter.com/resource11' },
{ name: 'Kathleen McMahon', url: 'https://kathleenmcmahon.dev' },
],

github: {
repoURL: 'https://github.com/design-tokens/community-group',
branch: 'color',
branch: 'color-first-draft',
},
tocIntroductory: true,
};
Expand Down
15 changes: 10 additions & 5 deletions technical-reports/format/groups.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ 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"
"$value": "#000000",
"$type": "color",
}
}
}
Expand All @@ -93,10 +94,12 @@ Group keys without a dollar sign (`$`) prefix denote:
"$description": "This is an example of a group containing a nested group",
"Subgroup of tokens": {
"Token 1 name": {
"$value": "#aabbcc"
"$value": "#aabbcc",
"$type": "color",
},
"Token 2 name": {
"$value": "#ddeeff"
"$value": "#ddeeff",
"$type": "color",
}
}
}
Expand All @@ -120,10 +123,12 @@ For example:
"color": {
"$description": "Our brand's primary color palette",
"acid green": {
"$value": "#00ff66"
"$value": "#00ff66",
"$type": "color"
},
"hot pink": {
"$value": "#dd22cc"
"$value": "#dd22cc",
"$type": "color"
}
}
}
Expand Down
11 changes: 10 additions & 1 deletion technical-reports/format/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,20 @@
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: 'http://twitter.com/donnavitan' },
{ name: 'Donna Vitan', url: 'https://www.donnavitan.com/' },
{ name: 'Drew Powers', url: 'https://pow.rs/' },
{ 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
2 changes: 1 addition & 1 deletion technical-reports/format/types.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ 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 MUST be a string containing a hex triplet/quartet 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 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.

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

Expand Down

0 comments on commit c58ca34

Please sign in to comment.