Add support for CSS Color HDR

Author: cdoublev

lib/properties/definitions.js

@@ -2720,6 +2720,18 @@ module.exports = {
         },
         value: 'auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top',
     },
+    'dynamic-range-limit': {
+        initial: {
+            parsed: {
+                end: 8,
+                start: 0,
+                types: ['<ident-token>', '<ident>', '<keyword>', 'dynamic-range-limit'],
+                value: 'no-limit',
+            },
+            serialized: 'no-limit',
+        },
+        value: 'standard | no-limit | constrained-high | <dynamic-range-limit-mix()>',
+    },
     'empty-cells': {
         initial: {
             parsed: {

lib/values/definitions.js

@@ -73,7 +73,7 @@ module.exports = {
     '<color-stop>': '<color-stop-length> | <color-stop-angle>',
     '<color-stripe>': '<color> && [<length-percentage> | <flex>]?',
     '<color>': '<color-base> | currentColor | <system-color> | <contrast-color()> | <device-cmyk()> | <light-dark()>',
-    '<colorspace-params>': '<custom-params> | <predefined-rgb-params> | <xyz-params>',
+    '<colorspace-params>': '<custom-params> | <predefined-rgb-params> | <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params>',
     '<combinator>': "'>' | '+' | '~' | '|' '|'",
     '<command-end-point>': 'to <position> | by <coordinate-pair>',
     '<common-lig-values>': 'common-ligatures | no-common-ligatures',
@@ -152,6 +152,7 @@ module.exports = {
     '<display-listitem>': '<display-outside>? && [flow | flow-root]? && list-item',
     '<display-outside>': 'block | inline | run-in',
     '<drop-shadow()>': 'drop-shadow(<color>? && <length>{2,3})',
+    '<dynamic-range-limit-mix()>': "dynamic-range-limit-mix([<'dynamic-range-limit'> && <percentage [0,100]>]#{2,∞})",
     '<easing-function>': '<linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>',
     '<east-asian-variant-values>': 'jis78 | jis83 | jis90 | jis04 | simplified | traditional',
     '<east-asian-width-values>': 'full-width | proportional-width',
@@ -196,6 +197,7 @@ module.exports = {
     '<gradient>': '<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>',
     '<grayscale()>': 'grayscale([<number> | <percentage>]?)',
     '<grid-line>': 'auto | <custom-ident> | [<integer [-∞,-1]> | <integer [1,∞]>] && <custom-ident>? | span && [<integer [1,∞]> || <custom-ident>]',
+    '<hdr-color()>': 'color-hdr([<color> && <number [0,∞]>?]#{2})',
     '<hex-color>': '<hash-token>',
     '<historical-lig-values>': 'historical-ligatures | no-historical-ligatures',
     '<horizontal-line-command>': 'hline [to [<length-percentage> | left | center | right | x-start | x-end] | by <length-percentage>]',
@@ -337,8 +339,11 @@ module.exports = {
     '<position-two>': '[left | center | right | x-start | x-end] && [top | center | bottom | y-start | y-end] | [left | center | right | x-start | x-end | <length-percentage>] [top | center | bottom | y-start | y-end | <length-percentage>] | [block-start | center | block-end] && [inline-start | center | inline-end] | [start | center | end]{2}',
     '<position>': '<position-one> | <position-two> | <position-four>',
     '<pow()>': 'pow(<calc-sum> , <calc-sum>)',
+    '<predefined-polar-params>': 'jzczhz [<number> | <percentage> | none]{2} [<hue> | none]',
+    '<predefined-rectangular-params>': '<predefined-rectangular> [<number> | <percentage> | none]{3}',
+    '<predefined-rectangular>': 'jzazbz | ictcp',
     '<predefined-rgb-params>': '<predefined-rgb> [<number> | <percentage> | none]{3}',
-    '<predefined-rgb>': 'srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020',
+    '<predefined-rgb>': 'srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020 | rec2100-pq | rec2100-hlg | rec2100-linear',
     '<progress()>': 'progress(<calc-sum> , <calc-sum> , <calc-sum>)',
     '<progress>': "[<calc-sum> | <'animation-timeline'>] && [by <easing-function>]?",
     '<pseudo-class-selector>': ': <ident-token> | : <function-token> <any-value> )',

scripts/extract.js

@@ -487,7 +487,6 @@ const excluded = {
     specifications: [
         // Not ready
         'css-color-6',
-        'css-color-hdr',
         'css-conditional-values',
         'css-gaps',
         'css-grid-3',
@@ -565,6 +564,16 @@ const excluded = {
             // https://github.com/w3c/csswg-drafts/issues/1981
             '<element()>',
         ],
+        'css-color': [
+            // Prefer CSS Color HDR
+            '<colorspace-params>',
+            '<predefined-rgb>',
+        ],
+        'css-color-5': [
+            // Prefer CSS Color HDR
+            '<colorspace-params>',
+            '<predefined-rgb>',
+        ],
         'css-images': [
             // TODO: fix parsing/serializing `<radial-gradient-syntax>`, `<radial-size>`
             '<radial-extent>',