From ee7c2ec082031ba2c1346229c72856d4b80b08ca Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Sun, 9 Feb 2025 23:36:30 +0800
Subject: [PATCH] feat(css): Update syntax for `circle()` and `ellipse()`
 functions

---
 css/functions.json |  4 ++--
 css/syntaxes.json  | 13 ++++++++-----
 css/syntaxes.md    |  3 ---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/css/functions.json b/css/functions.json
index 7b4f8d0f1..0af801d03 100644
--- a/css/functions.json
+++ b/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"
     ],
diff --git a/css/syntaxes.json b/css/syntaxes.json
index f5727d0d5..d9f36a022 100644
--- a/css/syntaxes.json
+++ b/css/syntaxes.json
@@ -132,7 +132,7 @@
     "syntax": "<percentage>? && <image>"
   },
   "circle()": {
-    "syntax": "circle( [ <shape-radius> ]? [ at <position> ]? )"
+    "syntax": "circle( <radial-size>? [ at <position> ]? )"
   },
   "clamp()": {
     "syntax": "clamp( <calc-sum>#{3} )"
@@ -303,7 +303,7 @@
     "syntax": "element( <id-selector> )"
   },
   "ellipse()": {
-    "syntax": "ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )"
+    "syntax": "ellipse( <radial-size>? [ at <position> ]? )"
   },
   "ending-shape": {
     "syntax": "circle | ellipse"
@@ -710,9 +710,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,∞]> ]?"
   },
@@ -830,9 +836,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 ]"
   },
diff --git a/css/syntaxes.md b/css/syntaxes.md
index 58f641184..c5ada2af9 100644
--- a/css/syntaxes.md
+++ b/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).