gerillass 2.3.1 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 02dd270ee370fad4ffe2c7c923109a817dad1f57ad146c0797f1af0294eed964
-  data.tar.gz: 4b8401c4dcd34999ef807ce113245569ba46851b9681d310013aab6b22ac0aea
+  metadata.gz: 7c5549f5633296720e952c5a6eaae5ff64506892d3ca368a4392a90460bb05e4
+  data.tar.gz: e41cbfe9d9f32d6e83d18af5eef518c377aad6ff8d9bd01d9bc770c50a2ea2bd
 SHA512:
-  metadata.gz: 9d4787002cda44ffba63f6bc24b14b0651003e0480d50f361a280c2500deef566c94b351e0207750cb92a059e8cc99e97cd59c63cdd054e9b340692b9e436a5c
-  data.tar.gz: 98c62d1bb1d0d3b04b3eb6529ef9fa74893ca197775633cb57a53229011b1407ac5e30c40126ba4c5bd720f5fdb4bf7ca5060c35a6be61aa7641f52376058aac
+  metadata.gz: 6d251a303526d829aafc1ae9240beb03f3e807f5797efc80bf191e446fee3944beeeccbd9bed036d147465459280da235c95318a708db61a746d45e06b19d9a0
+  data.tar.gz: 9a625b0e3388e9c887146af9fb1a410ff9e843cc7ad38220ace82dc40c8e46b59e783474a8b59273927bb525374ec249f5c18d48c9cafbe65b074b067ce69bb2

data/README.md

@@ -303,21 +303,21 @@ So, feel free to use any tool to support that. My suggestion is Autoprefixer. If
 
 ## Experimenting
 
-Experimentation with Gerillass is easy: If you're processing Sass files on your computer already, [download the Gerillass Sass library](https://github.com/selfishprimate/gerillass/archive/main.zip), include it in your project, and start using it. If not, use [Gerillass Play](https://github.com/selfishprimate/gerillass-play)! Gerillass Play is a Gulp based playground, built for you to get started with [Sass](https://sass-lang.com/) and [Gerillass](https://gerillass.com/) quickly.
+The quickest way to try Gerillass is the [playground](https://gerillass.com/playground). It runs in your browser, so there is nothing to install: write Sass on one side and read the CSS it compiles to on the other. Pick a mixin to start from an example, and pick any published Gerillass version to compile against, which makes it easy to see how a call behaves before and after an upgrade.
 
-**Important Note**: Don't forget that you must have [Node.js](https://nodejs.org/en/) and [Gulp CLI](https://gulpjs.com/docs/en/getting-started/quick-start) installed on your machine to work with Gerillass Play.
+When you are ready to use it in a project, follow the [installation](#installation) steps for your build tool.
 
 ## Testing
 
-Gerillass comes with a unit-testing module named [True](https://github.com/oddbird/true), which makes Sass unit tests possible (endless thanks to the [OddBird Team](https://github.com/oddbird)).
-
-You can find two test examples under the `test` folder, take your time, examine the codes, and then write your unit tests. After that, run the following command to see if the tests pass.
+The test suite runs with [Jest](https://jestjs.io/) and [True](https://github.com/oddbird/true), which makes Sass unit tests possible (endless thanks to the [OddBird Team](https://github.com/oddbird)).
 
     npm test
 
+It checks more than hand-written assertions: every mixin is called at least once, every documented example is compiled and compared with a snapshot, and every input a mixin should refuse must stop the build with the library's own error message. [CONTRIBUTING.md](CONTRIBUTING.md#testing) explains which of these a change needs.
+
 ## Contribution
 
-Please read the [contribution details](CONTRIBUTING.md) and feel free to contribute to the library.
+Please read the [contribution details](CONTRIBUTING.md) and feel free to contribute to the library. If you are working on a mixin, the site's dev server has a lab that renders your working copy of the library as you edit it; [CONTRIBUTING.md](CONTRIBUTING.md#seeing-what-it-renders) shows how to use it.
 
 ## License
 

data/SKILL.md

@@ -5,7 +5,7 @@ description: Use the Gerillass Sass mixin library — loading it, the mixin cata
 
 # Gerillass
 
-A Sass mixin library: 56 mixins and 23 functions that emit CSS from
+A Sass mixin library: 55 mixins and 24 functions that emit CSS from
 semantic declarations. It is Sass source only — there is no runtime and no
 utility classes, so styles live in your stylesheet and your markup stays clean.
 
@@ -100,14 +100,13 @@ a dropped declaration rather than an error.
 | `except` | `.a { @include except(#ff0000) { margin: 0; } }` |
 | `focus-ring` | `@include focus-ring;` |
 | `font-face` | `.a { @include font-face("Inter", "/fonts/inter"); }` |
+| `gradient` | `.a { @include gradient((red, blue), sideways); }` |
 | `hide` | `.a { @include hide(nonsense); }` |
 | `line-clamp` | `.a { @include line-clamp(0); }` |
-| `linear-gradient` | `.a { @include linear-gradient(sideways, (red, blue)); }` |
 | `loadify` | `@include loadify(nonsense);` |
 | `motion-safe` | `.card { @include motion-safe; }` |
 | `only` | `.a { @include only(#ff0000) { margin: 0; } }` |
 | `position` | `.badge { @include position(absolute, 0, $logical: yes); }` |
-| `radial-gradient` | `.a { @include radial-gradient(42, "center", (red, blue)); }` |
 | `remove` | `.a { @include remove(a, b, c); }` |
 | `reset-css` | `.a { @include reset-css; }` |
 | `resizable` | `.a { @include resizable(huge); }` |
@@ -118,7 +117,7 @@ a dropped declaration rather than an error.
 | `sprite` | `.icon { @include sprite("/img/sprite.txt"); }` |
 | `stretched-link` | `.card a { @include stretched-link(middle); }` |
 | `tablet` | `.a { @include tablet(Surface) { display: none; } }` |
-| `text-gradient` | `.a { @include text-gradient(sideways, (red, blue)); }` |
+| `text-gradient` | `.a { @include text-gradient("top", (red, blue)); }` |
 | `text-image` | `.a { @include text-image(16 9); }` |
 | `text-selection` | `.a { @include text-selection(bogus) { background: yellow; } }` |
 | `text-shadow` | `.a { @include text-shadow(42); }` |
@@ -209,16 +208,15 @@ a dropped declaration rather than an error.
 | `except($params...)` | Selects every sibling except the ones named. |
 | `focus-ring($width: 2px, $offset: 2px, $color: currentColor)` | Draws a keyboard focus ring with outline on :focus-visible, which survives forced-colors mode where a box-shadow ring disappears. |
 | `font-face($font-family, $file-path, $font-style: normal, $font-weight: 400, $file-formats: eot woff2 woff ttf svg, $font-display: null)` | Emits an @font-face rule for one family across several file formats. Must be called at the root. |
+| `gradient($colors, $type: linear, $direction: null, $shape: null, $position: null, $from: null, $in: null, $repeating: false)` | A linear, radial or conic gradient as background-image, plain or repeating, with an optional colour interpolation space. Replaced linear-gradient and radial-gradient in 3.0.0. |
 | `hide($toggle: "hide")` | Visually hides an element while keeping it available to screen readers, or reverses that. |
 | `line-clamp($lines: 3)` | Truncates text after a number of lines, where ellipsis truncates one. It emits five declarations rather than one because -webkit-line-clamp does nothing on its own: without display: -webkit-box or without -webkit-box-orient: vertical the text is not clamped at all and nothing warns you, and without overflow: hidden the clamped text spills out below the box. The unprefixed line-clamp is emitted too, for when it becomes Baseline. |
-| `linear-gradient($direction, $colors)` | Linear gradient background from a direction name or an angle. |
 | `loadify($params...)` | Fades elements in on page load. Call once at the root to set up, then on each element. Under prefers-reduced-motion: reduce the end state is applied directly and no animation runs. Switching the animation off alone would not do, because the element starts invisible and the animation is what reveals it, so the content would stay hidden for good. |
 | `motion-safe` | Wraps its content in @media (prefers-reduced-motion: no-preference), so motion is opt-in: a user who asked their system for less motion gets none of it. |
 | `only($params...)` | Selects only the siblings named. |
 | `placeholder-shown` | Styles an input while its placeholder is visible. |
 | `placeholder` | Styles the placeholder text of an input across vendor prefixes. |
 | `position($position: absolute, $offsets: 0, $logical: false)` | Sets position and offsets in one call, using shorthand order. |
-| `radial-gradient($shape, $position, $colors)` | Radial gradient background from a shape and a position. |
 | `remove($params...)` | Hides an element outright, or within a media query: from a breakpoint up with min, up to it with max, or between two breakpoints. One breakpoint on its own hides the element at exactly that width, a single pixel, and prints a warning: pass only for that. |
 | `reset-css` | Meyer reset. Must be called at the root of the stylesheet. |
 | `reset-figure` | Removes default figure margins and makes the image inside responsive. |
@@ -231,7 +229,7 @@ a dropped declaration rather than an error.
 | `sprite($params...)` | Sets up an element as a sprite tile: an image, a background position, or both. |
 | `stretched-link($value: "before")` | Expands a link to cover its positioned parent, so the whole card is clickable. |
 | `tablet($device, $orientation: null)` | Media query targeting a known tablet by device dimensions. |
-| `text-gradient($direction, $colors)` | Applies a linear gradient to the text itself via background-clip. |
+| `text-gradient($colors, $type: linear, $direction: null, $shape: null, $position: null, $from: null, $in: null, $repeating: false)` | Fills the text with a gradient through background-clip: text. It takes the gradient mixin's arguments, colours first: a linear, radial or conic gradient, plain or repeating, with an optional colour space. |
 | `text-image($image: null)` | Fills the text with an image via background-clip. |
 | `text-selection($value: null)` | Styles the ::selection pseudo-element. |
 | `text-shadow($params...)` | Layered text shadows built from a direction, a colour and an offset. |
@@ -254,6 +252,7 @@ and camelCase is what tells them apart from the kebab-case mixins above.
 | `fluid($min, $max, $min-viewport: 320px, $max-viewport: 1280px)` | A clamp() value that grows with the viewport between two widths, then stops. The preferred value keeps a rem term rather than being pure vw, because a vw-only value ignores browser text zoom and fails WCAG 1.4.4. It is a function rather than a mixin because the value is the hard part and belongs to any property, not only font-size. |
 | `fontSizer($size, $time)` | Multiplies a size by a factor. Handy for a modular scale. |
 | `fontSource($font-family, $file-path, $file-formats)` | Builds one src entry for an @font-face rule. |
+| `gradientValue($colors, $type: linear, $direction: null, $shape: null, $position: null, $from: null, $in: null, $repeating: false)` | The gradient mixin's gradient as a value, for layering it with an image in one background-image, or using it as a mask-image or border-image. It takes the same arguments and refuses the same input, but cannot write the fallback the mixin writes before a gradient with $in. |
 | `isColor($value)` | Returns the value if every item in it is a colour, and errors otherwise. |
 | `isGutter($value)` | True for anything that can sit where a CSS length is expected: a number, a calculation, or a CSS function such as var(). |
 | `isNumber($value)` | Returns the value if it is a number. |

data/gerillass.json

@@ -1,6 +1,6 @@
 {
   "name": "gerillass",
-  "version": "2.3.1",
+  "version": "3.0.0",
   "description": "Gerillass is an open-source toolkit that contains a set of Sass mixins to help designers and developers to create better, faster and consistent user interfaces.",
   "homepage": "https://gerillass.com",
   "documentation": "https://docs.gerillass.com",
@@ -291,7 +291,7 @@
           "name": "$filter-color",
           "default": "null",
           "accepts": [
-            "one colour, or several colour stops for a gradient, in the forms linear-gradient takes",
+            "one colour, or several colour stops for a gradient, in the forms the gradient mixin takes",
             "with $image-url null, an image as the overlay layer too: a gradient, url(), image-set() or var()",
             "a word that is not a colour, a quoted colour, a length and a CSS-wide keyword are refused"
           ]
@@ -300,8 +300,10 @@
           "name": "$filter-direction",
           "default": "null",
           "accepts": [
-            "an angle such as 45deg",
-            "a direction name such as top or bottom-left"
+            "a direction name such as top or bottom-left",
+            "an angle in deg, grad, rad or turn, or 0",
+            "\"to top\" or \"to left top\" as a string",
+            "var() or calc()"
           ]
         }
       ],
@@ -1043,6 +1045,117 @@
         "@include font-face(\"Inter\", \"/fonts/inter\", $font-weight: 100 200 300, $file-formats: woff2);"
       ]
     },
+    {
+      "name": "gradient",
+      "kind": "mixin",
+      "arguments": [
+        {
+          "name": "$colors",
+          "required": true,
+          "accepts": [
+            "one or more colour stops: a colour, or a colour with one or two positions, such as (red 0 10%) (blue 10% 100%)",
+            "a position on its own between two colours, as a hint",
+            "for a conic gradient the positions are angles or percentages, not lengths",
+            "var() for a stop or the whole list",
+            "a single colour warns, because browsers before Chrome 135, Firefox 136 and Safari 18.4 drop that gradient"
+          ]
+        },
+        {
+          "name": "$type",
+          "default": "linear",
+          "accepts": [
+            "linear, the default",
+            "radial",
+            "conic"
+          ]
+        },
+        {
+          "name": "$direction",
+          "default": "null",
+          "accepts": [
+            "linear only",
+            "a direction name such as top or bottom-left",
+            "an angle in deg, grad, rad or turn, or 0",
+            "\"to top\" or \"to left top\" as a string",
+            "var() or calc()"
+          ]
+        },
+        {
+          "name": "$shape",
+          "default": "null",
+          "accepts": [
+            "radial only",
+            "circle or ellipse, with an optional size as a string, such as \"circle 10px\""
+          ]
+        },
+        {
+          "name": "$position",
+          "default": "null",
+          "accepts": [
+            "radial or conic",
+            "a position name such as center or top-left",
+            "at followed by a position, as a string, such as \"at 30% 40%\"; a radial gradient may put a size before it"
+          ]
+        },
+        {
+          "name": "$from",
+          "default": "null",
+          "accepts": [
+            "conic only",
+            "an angle in deg, grad, rad or turn, 0, or var()"
+          ]
+        },
+        {
+          "name": "$in",
+          "default": "null",
+          "accepts": [
+            "a colour space: srgb, srgb-linear, display-p3, display-p3-linear, a98-rgb, prophoto-rgb, rec2020, lab, oklab, xyz, xyz-d50 or xyz-d65",
+            "a polar space, hsl, hwb, lch or oklch, with an optional hue method as a string, such as \"oklch longer hue\"",
+            "var()",
+            "the gradient is written once without the space first, for a browser that does not know it"
+          ]
+        },
+        {
+          "name": "$repeating",
+          "default": "false",
+          "accepts": [
+            "false, the default",
+            "true, for a repeating gradient"
+          ]
+        }
+      ],
+      "file": "scss/library/_gradient.scss",
+      "signature": "gradient($colors, $type: linear, $direction: null, $shape: null, $position: null, $from: null, $in: null, $repeating: false)",
+      "summary": "A linear, radial or conic gradient as background-image, plain or repeating, with an optional colour interpolation space. Replaced linear-gradient and radial-gradient in 3.0.0.",
+      "examples": [
+        ".a { @include gradient((red, blue)); }",
+        ".a { @include gradient((red, blue), $direction: \"top-right\"); }",
+        ".a { @include gradient((red, blue), radial, $shape: circle, $position: \"top-left\"); }",
+        ".a { @include gradient((teal 0 40%, purple 40% 75%, coral 75% 100%), conic); }",
+        ".a { @include gradient((black 0 25%, white 0 50%), conic, $repeating: true); }",
+        ".a { @include gradient((blue, yellow), $direction: right, $in: oklab); }"
+      ],
+      "rejects": [
+        ".a { @include gradient((red, blue), sideways); }",
+        ".a { @include gradient((red, blue), $direction: 10px); }",
+        ".a { @include gradient((red, blue), $direction: \"to center\"); }",
+        ".a { @include gradient((red, blue), radial, $direction: top); }",
+        ".a { @include gradient((red, blue), $shape: circle); }",
+        ".a { @include gradient((red, blue), $position: center); }",
+        ".a { @include gradient((red, blue), $from: 45deg); }",
+        ".a { @include gradient((red, blue), conic, $from: 10px); }",
+        ".a { @include gradient((red, blue), conic, $position: \"closest-side at center\"); }",
+        ".a { @include gradient((red 10px, blue), conic); }",
+        ".a { @include gradient((red, blue), radial, $shape: \"circle 10%\"); }",
+        ".a { @include gradient((huge, blue)); }",
+        ".a { @include gradient((red, blue), $in: rgb); }",
+        ".a { @include gradient((red, blue), $in: \"oklab longer hue\"); }",
+        ".a { @include gradient((red, blue), $repeating: yes); }"
+      ],
+      "warns": [
+        ".a { @include gradient(red); }"
+      ]
+    },
     {
       "name": "hide",
       "kind": "mixin",
@@ -1099,48 +1212,6 @@
         ".a { @include line-clamp(url(a.png)); }"
       ]
     },
-    {
-      "name": "linear-gradient",
-      "kind": "mixin",
-      "arguments": [
-        {
-          "name": "$direction",
-          "required": true,
-          "accepts": [
-            "a direction name such as top or bottom-left",
-            "an angle such as 45deg"
-          ]
-        },
-        {
-          "name": "$colors",
-          "required": true,
-          "accepts": [
-            "one or more colour stops: a colour, or a colour with one or two positions, such as (red 0 10%) (blue 10% 100%)",
-            "a position on its own between two colours, as a hint, such as (red, 30%, blue)",
-            "var() for a stop or the whole list",
-            "a word that is not a colour, a position first or last, two positions in a row, three positions in a stop and null are refused, because the gradient would be dropped"
-          ]
-        }
-      ],
-      "file": "scss/library/_linear-gradient.scss",
-      "signature": "linear-gradient($direction, $colors)",
-      "summary": "Linear gradient background from a direction name or an angle.",
-      "examples": [
-        ".a { @include linear-gradient(\"top\", (red, blue)); }",
-        ".a { @include linear-gradient(45deg, (red, blue)); }"
-      ],
-      "rejects": [
-        ".a { @include linear-gradient(sideways, (red, blue)); }",
-        ".a { @include linear-gradient(true, (red, blue)); }",
-        ".a { @include linear-gradient(\"top\", (huge, blue)); }",
-        ".a { @include linear-gradient(\"top\", (inherit, blue)); }",
-        ".a { @include linear-gradient(\"top\", (red, 10%)); }",
-        ".a { @include linear-gradient(\"top\", (10%, red, blue)); }",
-        ".a { @include linear-gradient(\"top\", (red, 30%, 40%, blue)); }",
-        ".a { @include linear-gradient(\"top\", (red 10% 20% 30%, blue)); }",
-        ".a { @include linear-gradient(\"top\", null); }"
-      ]
-    },
     {
       "name": "loadify",
       "kind": "mixin",
@@ -1307,56 +1378,6 @@
         ".a { @include position(absolute, url(a.png)); }"
       ]
     },
-    {
-      "name": "radial-gradient",
-      "kind": "mixin",
-      "arguments": [
-        {
-          "name": "$shape",
-          "required": true,
-          "accepts": [
-            "circle or ellipse",
-            "with a size as a string: an extent keyword such as \"circle closest-side\", one length for a circle, or two lengths or percentages for an ellipse",
-            "var() or calc()"
-          ]
-        },
-        {
-          "name": "$position",
-          "required": true,
-          "accepts": [
-            "a position name such as center or top-left",
-            "an extent keyword such as closest-side",
-            "at followed by a position, as a string, such as \"at 30% 40%\" or \"at left 10px top 20px\", optionally after a size",
-            "a word outside these, such as inherit, is refused, because the whole gradient would be dropped"
-          ]
-        },
-        {
-          "name": "$colors",
-          "required": true,
-          "accepts": [
-            "one or more colour stops, in the same forms as linear-gradient: a colour with up to two positions, a position between two colours, or var()",
-            "a stop the browser drops is refused, because the whole gradient would be dropped"
-          ]
-        }
-      ],
-      "file": "scss/library/_radial-gradient.scss",
-      "signature": "radial-gradient($shape, $position, $colors)",
-      "summary": "Radial gradient background from a shape and a position.",
-      "examples": [
-        ".a { @include radial-gradient(circle, \"center\", (red, blue)); }"
-      ],
-      "rejects": [
-        ".a { @include radial-gradient(42, \"center\", (red, blue)); }",
-        ".a { @include radial-gradient(circle, 42, (red, blue)); }",
-        ".a { @include radial-gradient(huge, \"center\", (red, blue)); }",
-        ".a { @include radial-gradient(\"circle 10%\", \"center\", (red, blue)); }",
-        ".a { @include radial-gradient(circle, huge, (red, blue)); }",
-        ".a { @include radial-gradient(circle, \"at huge\", (red, blue)); }",
-        ".a { @include radial-gradient(circle, inherit, (red, blue)); }",
-        ".a { @include radial-gradient(circle, \"center\", (huge, blue)); }",
-        ".a { @include radial-gradient(circle, \"center\", (red, blue, 90%)); }"
-      ]
-    },
     {
       "name": "remove",
       "kind": "mixin",
@@ -1686,32 +1707,89 @@
       "kind": "mixin",
       "arguments": [
         {
-          "name": "$direction",
+          "name": "$colors",
           "required": true,
           "accepts": [
+            "one or more colour stops, in the forms the gradient mixin takes",
+            "a stop the browser drops is refused, because the gradient and the transparent text would go with it",
+            "a single colour warns"
+          ]
+        },
+        {
+          "name": "$type",
+          "default": "linear",
+          "accepts": [
+            "linear, the default",
+            "radial",
+            "conic"
+          ]
+        },
+        {
+          "name": "$direction",
+          "default": "null",
+          "accepts": [
+            "linear only",
             "a direction name such as top or bottom-left",
-            "an angle such as 45deg"
+            "an angle in deg, grad, rad or turn, or 0",
+            "\"to top\" or \"to left top\" as a string",
+            "var() or calc()"
           ]
         },
         {
-          "name": "$colors",
-          "required": true,
+          "name": "$shape",
+          "default": "null",
           "accepts": [
-            "one or more colour stops, in the same forms as linear-gradient: a colour with up to two positions, a position between two colours, or var()",
-            "a stop the browser drops is refused, because the gradient and the transparent text would go with it"
+            "radial only, circle or ellipse with an optional size"
+          ]
+        },
+        {
+          "name": "$position",
+          "default": "null",
+          "accepts": [
+            "radial or conic, a position name or at followed by a position"
+          ]
+        },
+        {
+          "name": "$from",
+          "default": "null",
+          "accepts": [
+            "conic only, an angle"
+          ]
+        },
+        {
+          "name": "$in",
+          "default": "null",
+          "accepts": [
+            "a colour space such as oklab, or a polar one with a hue method",
+            "the gradient is written once without the space first, for a browser that does not know it"
+          ]
+        },
+        {
+          "name": "$repeating",
+          "default": "false",
+          "accepts": [
+            "false, the default",
+            "true"
           ]
         }
       ],
       "file": "scss/library/_text-gradient.scss",
-      "signature": "text-gradient($direction, $colors)",
-      "summary": "Applies a linear gradient to the text itself via background-clip.",
+      "signature": "text-gradient($colors, $type: linear, $direction: null, $shape: null, $position: null, $from: null, $in: null, $repeating: false)",
+      "summary": "Fills the text with a gradient through background-clip: text. It takes the gradient mixin's arguments, colours first: a linear, radial or conic gradient, plain or repeating, with an optional colour space.",
       "examples": [
-        ".a { @include text-gradient(\"top\", (red, blue)); }"
+        ".a { @include text-gradient((red, blue), $direction: top); }",
+        ".a { @include text-gradient(blue yellow, $direction: right, $in: oklab); }",
+        ".a { @include text-gradient(red yellow lime cyan blue magenta red, conic); }"
       ],
       "rejects": [
-        ".a { @include text-gradient(sideways, (red, blue)); }",
-        ".a { @include text-gradient(\"top\", (huge, blue)); }",
-        ".a { @include text-gradient(\"top\", (\"red\", blue)); }"
+        ".a { @include text-gradient(\"top\", (red, blue)); }",
+        ".a { @include text-gradient(red blue, $direction: sideways); }",
+        ".a { @include text-gradient((huge, blue)); }",
+        ".a { @include text-gradient((\"red\", blue)); }",
+        ".a { @include text-gradient(red blue, $from: 45deg); }"
+      ],
+      "warns": [
+        ".a { @include text-gradient(red); }"
       ]
     },
     {
@@ -2187,6 +2265,90 @@
       ],
       "rejects": []
     },
+    {
+      "name": "gradientValue",
+      "kind": "function",
+      "arguments": [
+        {
+          "name": "$colors",
+          "required": true,
+          "accepts": [
+            "the colour stops, in the forms the gradient mixin takes",
+            "a single colour warns, because browsers before Chrome 135, Firefox 136 and Safari 18.4 drop that gradient"
+          ]
+        },
+        {
+          "name": "$type",
+          "default": "linear",
+          "accepts": [
+            "linear, the default",
+            "radial",
+            "conic"
+          ]
+        },
+        {
+          "name": "$direction",
+          "default": "null",
+          "accepts": [
+            "linear only, in the forms the gradient mixin takes"
+          ]
+        },
+        {
+          "name": "$shape",
+          "default": "null",
+          "accepts": [
+            "radial only, circle or ellipse with an optional size"
+          ]
+        },
+        {
+          "name": "$position",
+          "default": "null",
+          "accepts": [
+            "radial or conic, a position name or at followed by a position"
+          ]
+        },
+        {
+          "name": "$from",
+          "default": "null",
+          "accepts": [
+            "conic only, an angle"
+          ]
+        },
+        {
+          "name": "$in",
+          "default": "null",
+          "accepts": [
+            "a colour space, with a hue method for a polar one",
+            "var()"
+          ]
+        },
+        {
+          "name": "$repeating",
+          "default": "false",
+          "accepts": [
+            "false, the default",
+            "true"
+          ]
+        }
+      ],
+      "file": "scss/utilities/_gradient-value.scss",
+      "signature": "gradientValue($colors, $type: linear, $direction: null, $shape: null, $position: null, $from: null, $in: null, $repeating: false)",
+      "summary": "The gradient mixin's gradient as a value, for layering it with an image in one background-image, or using it as a mask-image or border-image. It takes the same arguments and refuses the same input, but cannot write the fallback the mixin writes before a gradient with $in.",
+      "examples": [
+        ".a { background-image: gradientValue((rgba(0, 0, 0, 0.75), transparent), $direction: top), url(\"/img/hero.jpg\"); }",
+        ".a { mask-image: gradientValue((#000 60%, transparent)); }",
+        ".a { border: 4px solid; border-image: gradientValue((red, blue), $direction: right) 1; }"
+      ],
+      "rejects": [
+        ".a { background-image: gradientValue((red, blue), $direction: sideways); }",
+        ".a { background-image: gradientValue((red, blue), $shape: circle); }",
+        ".a { background-image: gradientValue((red 10px, blue), conic); }",
+        ".a { background-image: gradientValue((red, blue), $in: rgb); }"
+      ],
+      "warns": [
+        ".a { background-image: gradientValue(red); }"
+      ]
+    },
     {
       "name": "isColor",
       "kind": "function",