feat(css): add missing css color-mix() function (#857)

* feat(css): add missing css `color-mix()` function * add the missing syntax
mdn · Jan 10, 2025 · 3fe902e · 3fe902e
1 parent 397906c
commit 3fe902e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/css/functions.json b/css/functions.json
@@ -120,13 +120,21 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/clamp"
   },
   "color()": {
-    "syntax": "color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
+    "syntax": "color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
     "groups": [
       "CSS Color"
     ],
     "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/color"
   },
+  "color-mix()": {
+    "syntax": "color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})",
+    "groups": [
+      "CSS Color"
+    ],
+    "status": "standard",
+    "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix"
+  },
   "conic-gradient()": {
     "syntax": "conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )",
     "groups": [

diff --git a/css/syntaxes.json b/css/syntaxes.json
@@ -150,7 +150,10 @@
     "syntax": "color( [from <color>]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
   },
   "color-interpolation-method": {
-    "syntax": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]"
+    "syntax": "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]"
+  },
+  "color-mix()": {
+    "syntax": "color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})"
   },
   "color-stop": {
     "syntax": "<color-stop-length> | <color-stop-angle>"
@@ -245,6 +248,9 @@
   "cubic-bezier-timing-function": {
     "syntax": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)"
   },
+  "custom-color-space": {
+    "syntax": "<dashed-ident>"
+  },
   "custom-params": {
     "syntax": "<dashed-ident> [ <number> | <percentage> | none ]+"
   },