feat(css): Update syntax for circle() and ellipse() functions (#928)

Author: skyclouds2001

css/functions.json

@@ -103,7 +103,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/calc-size"
   },
   "circle()": {
-    "syntax": "circle( [ <shape-radius> ]? [ at <position> ]? )",
+    "syntax": "circle( <radial-size>? [ at <position> ]? )",
     "groups": [
       "CSS Shapes"
     ],
@@ -203,7 +203,7 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/element"
   },
   "ellipse()": {
-    "syntax": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )",
+    "syntax": "ellipse( <radial-size>? [ at <position> ]? )",
     "groups": [
       "CSS Shapes"
     ],

css/syntaxes.json

@@ -135,7 +135,7 @@
     "syntax": "<percentage>? && <image>"
   },
   "circle()": {
-    "syntax": "circle( [ <shape-radius> ]? [ at <position> ]? )"
+    "syntax": "circle( <radial-size>? [ at <position> ]? )"
   },
   "clamp()": {
     "syntax": "clamp( <calc-sum>#{3} )"
@@ -309,7 +309,7 @@
     "syntax": "element( <id-selector> )"
   },
   "ellipse()": {
-    "syntax": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )"
+    "syntax": "ellipse( <radial-size>? [ at <position> ]? )"
   },
   "ending-shape": {
     "syntax": "circle | ellipse"
@@ -728,9 +728,15 @@
   "quote": {
     "syntax": "open-quote | close-quote | no-open-quote | no-close-quote"
   },
+  "radial-extent": {
+    "syntax": "closest-corner | closest-side | farthest-corner | farthest-side"
+  },
   "radial-gradient()": {
     "syntax": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )"
   },
+  "radial-size": {
+    "syntax": "<radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}"
+  },
   "ratio": {
     "syntax": "<number [0,∞]> [ / <number [0,∞]> ]?"
   },
@@ -851,9 +857,6 @@
   "shape-box": {
     "syntax": "<visual-box> | margin-box"
   },
-  "shape-radius": {
-    "syntax": "<length-percentage> | closest-side | farthest-side"
-  },
   "side-or-corner": {
     "syntax": "[ left | right ] || [ top | bottom ]"
   },

css/syntaxes.md

@@ -39,9 +39,6 @@ Or, syntaxes might reference other syntaxes that are also defined in syntaxes.js
 "length-percentage": {
   "syntax": "<length> | <percentage>"
 },
-"shape-radius": {
-  "syntax": "<length-percentage> | closest-side | farthest-side"
-},
 ```
 
 For more information about the formal grammar of CSS syntaxes, see [CSS value definition syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax).