From 9fa91b10b1f366e2da2b257efcf25dd4fc3c3522 Mon Sep 17 00:00:00 2001 From: Kathleen McMahon Date: Wed, 11 Sep 2024 11:53:58 -0400 Subject: [PATCH 1/6] fix(color): revert editors to original names and urls --- technical-reports/color/index.html | 2 +- technical-reports/format/index.html | 11 +---------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/technical-reports/color/index.html b/technical-reports/color/index.html index 1c5036d..5d9c9e3 100644 --- a/technical-reports/color/index.html +++ b/technical-reports/color/index.html @@ -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', diff --git a/technical-reports/format/index.html b/technical-reports/format/index.html index d2c023d..b233bdf 100644 --- a/technical-reports/format/index.html +++ b/technical-reports/format/index.html @@ -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: { From af6374e2bfb9d40c5de6c9a97888a670d768380e Mon Sep 17 00:00:00 2001 From: Kathleen McMahon Date: Fri, 8 Nov 2024 13:45:28 -0500 Subject: [PATCH 2/6] fix: standardize pink green naming and values --- technical-reports/color/color-type.md | 44 ++++++++++----------- technical-reports/format/composite-types.md | 4 +- technical-reports/format/groups.md | 14 +++---- technical-reports/format/types.md | 4 +- 4 files changed, 33 insertions(+), 33 deletions(-) diff --git a/technical-reports/color/color-type.md b/technical-reports/color/color-type.md index 546e2f8..0c63040 100644 --- a/technical-reports/color/color-type.md +++ b/technical-reports/color/color-type.md @@ -29,7 +29,7 @@ For example, initially color tokens may be defined as such: ```json { - "Majestic magenta": { + "Hot pink": { "$type": "color", "$value": { "$hex": "#ff00ff" @@ -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; ``` @@ -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": { "name": "srgb", "$components": [196, 69, 135] } } }, - "Simple sage": { + "Acid green": { "$type": "color", "$value": { - "$hex": "#b4d8a7", + "$hex": "#00ff66", "$colorSpace": { "name": "srgb", "$components": [180, 216, 167], @@ -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); ``` @@ -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], @@ -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); ``` @@ -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" } } } @@ -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); ``` diff --git a/technical-reports/format/composite-types.md b/technical-reports/format/composite-types.md index 20be420..9495ea9 100644 --- a/technical-reports/format/composite-types.md +++ b/technical-reports/format/composite-types.md @@ -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" }, "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. -
+
diff --git a/technical-reports/format/groups.md b/technical-reports/format/groups.md index 226dd39..08ca2b4 100644 --- a/technical-reports/format/groups.md +++ b/technical-reports/format/groups.md @@ -127,7 +127,7 @@ For example: "$type": "color" }, "hot pink": { - "$value": "#dd22cc", + "$value": "#ff00ff", "$type": "color" } } @@ -162,7 +162,7 @@ For example: "$value": "#00ff66" }, "hot pink": { - "$value": "#dd22cc" + "$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": "#dd22cc", + "$value": "#ff00ff", "$type": "color" } } @@ -230,7 +230,7 @@ For example: "$value": "#00ff66" }, "hot pink": { - "$value": "#dd22cc" + "$value": "#ff00ff" } }, "typeface": { @@ -259,7 +259,7 @@ For example: "$type": "color" }, "brand-color-hot-pink": { - "$value": "#dd22cc", + "$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": "#dd22cc" + "$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: #dd22cc; +$brand-color-hot-pink: #ff00ff; $brand-typeface-primary: 'Comic Sans MS'; $brand-typeface-secondary: 'Times New Roman'; ``` diff --git a/technical-reports/format/types.md b/technical-reports/format/types.md index aef02a0..9f06cc5 100644 --- a/technical-reports/format/types.md +++ b/technical-reports/format/types.md @@ -20,7 +20,7 @@ For example, initially the color tokens MAY be defined as such: ```json { - "Majestic magenta": { + "Hot pink": { "$value": "#ff00ff", "$type": "color" }, @@ -39,7 +39,7 @@ 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 From cee6683cefbee47e1d9f79c54975a4bb94b03202 Mon Sep 17 00:00:00 2001 From: Kathleen McMahon Date: Fri, 8 Nov 2024 13:50:23 -0500 Subject: [PATCH 3/6] fix: rename magestic-magenta to hot-pink --- technical-reports/format/types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/technical-reports/format/types.md b/technical-reports/format/types.md index 9f06cc5..068e54e 100644 --- a/technical-reports/format/types.md +++ b/technical-reports/format/types.md @@ -43,7 +43,7 @@ $hot-pink: #ff00ff; $translucent-shadow: #00000080; // colors-hsl.scss -$majestic-magenta: hsl(300, 100%, 50%); +$hot-pink: hsl(300, 100%, 50%); $translucent-shadow: hsla(300, 100%, 50%, 0.5); ``` From a5a46a0bdfa51efb751ccfecf2d7051a11335d8f Mon Sep 17 00:00:00 2001 From: Kathleen McMahon Date: Fri, 8 Nov 2024 16:55:13 -0500 Subject: [PATCH 4/6] fix: modifies format color object, adjusts docs --- technical-reports/format/types.md | 33 +++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/technical-reports/format/types.md b/technical-reports/format/types.md index 068e54e..7bfde7b 100644 --- a/technical-reports/format/types.md +++ b/technical-reports/format/types.md @@ -12,7 +12,15 @@ 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. | +| `coordinates` | `number array` | Y | An array of numeric values representing individual color coordinates. | +| `alpha` | `number` | | An integer or floating-point value representing the numeric value. | +| `fallback` | `string` | | Unit of distance. Supported values: [HEX 6](https://www.w3.org/TR/css-color-4/#typedef-hex-color) including the preceding `#` character. | For example, initially the color tokens MAY be defined as such: @@ -21,12 +29,25 @@ For example, initially the color tokens MAY be defined as such: ```json { "Hot pink": { - "$value": "#ff00ff", - "$type": "color" + "$type": "color", + "$value": { + "colorSpace": "display-p3", + "colorProfile": "http://example.org/display-p3.icc", + "coordinates": [0.92, 0.2, 0.97], + "alpha": 1, + "fallback": "#ff00ff", // HEX 6 supported only + } }, "Translucent shadow": { - "$value": "#00000080", - "$type": "color" + "$value": "#000000", + "$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 + } } } ``` @@ -44,7 +65,7 @@ $translucent-shadow: #00000080; // colors-hsl.scss $hot-pink: hsl(300, 100%, 50%); -$translucent-shadow: hsla(300, 100%, 50%, 0.5); +$translucent-shadow: hsla(0, 0%, 0%, 0.5); ``` From 6954bb979afcba928fcab2ff5780d930b90fac25 Mon Sep 17 00:00:00 2001 From: Kathleen McMahon Date: Fri, 8 Nov 2024 16:59:27 -0500 Subject: [PATCH 5/6] chore: linting --- technical-reports/color/token-naming.md | 2 +- technical-reports/format/groups.md | 6 +++--- technical-reports/format/types.md | 18 +++++++++--------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/technical-reports/color/token-naming.md b/technical-reports/color/token-naming.md index ce797e3..e902a16 100644 --- a/technical-reports/color/token-naming.md +++ b/technical-reports/color/token-naming.md @@ -299,7 +299,7 @@ export const SubbrandContext = React.createContext(); const Theme = React.forwardRef(function Theme( { theme = 'light', subbrand, children }, - forwardedRef + forwardedRef, ) { return ( diff --git a/technical-reports/format/groups.md b/technical-reports/format/groups.md index 08ca2b4..2ef4738 100644 --- a/technical-reports/format/groups.md +++ b/technical-reports/format/groups.md @@ -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", - "$type": "color", + "$type": "color" } } } @@ -95,11 +95,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" } } } diff --git a/technical-reports/format/types.md b/technical-reports/format/types.md index 7bfde7b..ecb295f 100644 --- a/technical-reports/format/types.md +++ b/technical-reports/format/types.md @@ -14,13 +14,13 @@ If an explicit type is set, but the value does not match the expected syntax the 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. | -| `coordinates` | `number array` | Y | An array of numeric values representing individual color coordinates. | -| `alpha` | `number` | | An integer or floating-point value representing the numeric value. | -| `fallback` | `string` | | Unit of distance. Supported values: [HEX 6](https://www.w3.org/TR/css-color-4/#typedef-hex-color) including the preceding `#` character. | +| Key | Type | Required | Description | +| :------------- | :------------: | :------: | :--------------------------------------------------------------------------------------------------------------------------------------- | +| `colorSpace` | `string` | Y | An string representing the color space. | +| `colorProfile` | `string` | | String representing url of color profile. | +| `coordinates` | `number array` | Y | An array of numeric values representing individual color coordinates. | +| `alpha` | `number` | | An integer or floating-point value representing the numeric value. | +| `fallback` | `string` | | Unit of distance. Supported values: [HEX 6](https://www.w3.org/TR/css-color-4/#typedef-hex-color) including the preceding `#` character. | For example, initially the color tokens MAY be defined as such: @@ -35,7 +35,7 @@ For example, initially the color tokens MAY be defined as such: "colorProfile": "http://example.org/display-p3.icc", "coordinates": [0.92, 0.2, 0.97], "alpha": 1, - "fallback": "#ff00ff", // HEX 6 supported only + "fallback": "#ff00ff" // HEX 6 supported only } }, "Translucent shadow": { @@ -46,7 +46,7 @@ For example, initially the color tokens MAY be defined as such: "colorProfile": "http://example.org/display-p3.icc", "coordinates": [0, 0, 0], "alpha": 0.5, - "fallback": "#000000", // HEX 6 supported only + "fallback": "#000000" // HEX 6 supported only } } } From 63051c856e990e065a464df0bc815bd617c286d0 Mon Sep 17 00:00:00 2001 From: Kathleen McMahon Date: Thu, 14 Nov 2024 11:40:07 -0500 Subject: [PATCH 6/6] fix: content adjustments from PR comments --- technical-reports/format/groups.md | 6 ++++-- technical-reports/format/types.md | 26 +++++++++++++------------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/technical-reports/format/groups.md b/technical-reports/format/groups.md index 2ef4738..fa3975a 100644 --- a/technical-reports/format/groups.md +++ b/technical-reports/format/groups.md @@ -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] + } } } } diff --git a/technical-reports/format/types.md b/technical-reports/format/types.md index ecb295f..90ee383 100644 --- a/technical-reports/format/types.md +++ b/technical-reports/format/types.md @@ -14,19 +14,19 @@ If an explicit type is set, but the value does not match the expected syntax the 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. | -| `coordinates` | `number array` | Y | An array of numeric values representing individual color coordinates. | -| `alpha` | `number` | | An integer or floating-point value representing the numeric value. | -| `fallback` | `string` | | Unit of distance. Supported values: [HEX 6](https://www.w3.org/TR/css-color-4/#typedef-hex-color) including the preceding `#` character. | +| 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: