gerillass 0.0.6 → 2.3.1

data/scss/library/_radial-gradient.scss

@@ -0,0 +1,184 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "../maps/map-for-positions" as *;
+@use "../internal/is-condition-value" as *;
+@use "../internal/words" as *;
+@use "../internal/color-stops-problem" as *;
+
+// The mixin writes `radial-gradient($shape $position, ...)`, so $shape carries
+// the shape and may carry a size, and a $position that is not a key from
+// $map-for-positions carries a size, `at` and a position, or both. Each is
+// checked against what Chrome 152 kept in `background-image`, in any case:
+//
+// - kept: circle, ellipse, an extent keyword such as closest-side, a length
+//   (`circle 10px`, `10px`), two lengths or percentages (`ellipse 10% 20%`),
+//   `at` followed by one or two keywords from left, center, right, top and
+//   bottom or up to four keywords and lengths (`at left 10px top 20px`), and
+//   var() or calc() anywhere;
+// - dropped: a word outside those (`huge`, `auto`, `inherit`), a percentage or a
+//   negative length as a circle's size (`circle 10%`, `circle -10px`), the
+//   shape twice (`circle circle`), four keywords after `at`, and the logical
+//   keywords `at x-start` and `at block-start`.
+//
+// It checks each part on its own, so a shape in one argument and a size in the
+// other that do not fit together, such as `ellipse` with a single length, are
+// not caught.
+$-extents: "closest-side" "closest-corner" "farthest-side" "farthest-corner";
+$-places: "left" "center" "right" "top" "bottom";
+
+// "extent", "length" or "percentage" for a word that can size the gradient,
+// or null.
+@function -size-kind($word) {
+  $lower: string.to-lower-case("#{$word}");
+  @if list.index($-extents, $lower) {
+    @return "extent";
+  }
+  @if string.index($lower, "-") == 1 {
+    @return null;
+  }
+  @if isConditionValue($word, "length") {
+    @return "length";
+  }
+  @if isConditionValue($word, "length-percentage") {
+    @return "percentage";
+  }
+  @return null;
+}
+
+// Checks the size words before `at`. $shape is the shape named, or null.
+@function -size-problem($words, $shape) {
+  $extents: 0;
+  $lengths: 0;
+  $percentages: 0;
+  @each $word in $words {
+    $kind: -size-kind($word);
+    @if $kind == null {
+      @return "`#{$word}` is not a shape, an extent keyword such as `closest-side`, or a length";
+    } @else if $kind == "extent" {
+      $extents: $extents + 1;
+    } @else if $kind == "length" {
+      $lengths: $lengths + 1;
+    } @else {
+      $percentages: $percentages + 1;
+    }
+  }
+  $sizes: $lengths + $percentages;
+  @if $extents > 1 or ($extents == 1 and $sizes > 0) {
+    @return "it gives the size twice";
+  }
+  @if $sizes > 2 {
+    @return "a size is one length or two";
+  }
+  @if $sizes == 1 and ($percentages == 1 or $shape == "ellipse") {
+    @return "one size is a circle's radius, which is a length and not a percentage";
+  }
+  @if $sizes == 2 and $shape == "circle" {
+    @return "a circle takes one length, not two";
+  }
+  @return null;
+}
+
+@function -shape-problem($shape) {
+  @if string.index($shape, "(") {
+    @return null;
+  }
+  $named: null;
+  $sizes: ();
+  @each $word in wordsOf($shape) {
+    $lower: string.to-lower-case($word);
+    @if list.index("circle" "ellipse", $lower) {
+      @if $named {
+        @return "it names the shape twice";
+      }
+      $named: $lower;
+    } @else {
+      $sizes: list.append($sizes, $word);
+    }
+  }
+  @return -size-problem($sizes, $named);
+}
+
+@function -position-problem($position) {
+  @if map.has-key($map-for-positions, $position) or string.index($position, "(") {
+    @return null;
+  }
+  $sizes: ();
+  $places: ();
+  $after-at: false;
+  @each $word in wordsOf($position) {
+    $lower: string.to-lower-case($word);
+    @if $lower == "at" {
+      @if $after-at {
+        @return "it has `at` twice";
+      }
+      $after-at: true;
+    } @else if $after-at {
+      $places: list.append($places, $word);
+    } @else if list.index("circle" "ellipse", $lower) {
+      @return "the shape goes in $shape, not $position";
+    } @else {
+      $sizes: list.append($sizes, $word);
+    }
+  }
+  $problem: -size-problem($sizes, null);
+  @if $problem {
+    @return "#{$problem}. Pass a position name such as `center` or `top-left`, an extent keyword such as `closest-side`, or `at` followed by a position, such as `at 30% 40%`";
+  }
+  @if $after-at and list.length($places) == 0 {
+    @return "`at` needs a position after it, such as `at center`";
+  }
+  @if list.length($places) > 4 {
+    @return "a position takes at most four values";
+  }
+  $keywords: 0;
+  @each $word in $places {
+    @if list.index($-places, string.to-lower-case($word)) {
+      $keywords: $keywords + 1;
+    } @else if not isConditionValue($word, "length-percentage") {
+      @return "`#{$word}` is not a position; after `at` pass left, center, right, top, bottom or a length";
+    }
+  }
+  @if $keywords > 2 and $keywords == list.length($places) {
+    @return "a position of keywords alone takes at most two, such as `at top left`";
+  }
+  @return null;
+}
+
+@mixin radial-gradient($shape, $position, $colors) {
+  @if meta.type-of($shape) != "string" {
+    @error "`#{$shape}` is not a valid $shape for `radial-gradient`. Pass `circle` or `ellipse`.";
+  }
+  @if meta.type-of($position) != "string" {
+    @error "`#{$position}` is not a valid $position for `radial-gradient`. Pass a position name such as `center` or `top-left`, or a raw CSS position as a string.";
+  }
+  $list: ();
+  $shape: string.unquote($shape);
+  $position: string.unquote($position);
+  $problem: -shape-problem($shape);
+  @if $problem {
+    @error "`#{$shape}` is not a valid $shape for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
+  $problem: -position-problem($position);
+  @if $problem {
+    @error "`#{$position}` is not a valid $position for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
+  $problem: colorStopsProblem($colors);
+  @if $problem {
+    @error "`#{meta.inspect($colors)}` is not a valid $colors for `radial-gradient`: #{$problem}. A browser drops the whole gradient.";
+  }
+  @for $i from 1 through list.length($colors) {
+    $list: list.append($list, list.nth($colors, $i), comma);
+  }
+  @if map.has-key($map-for-positions, $position) {
+    background: radial-gradient(
+      $shape map.get($map-for-positions, $position),
+      $list
+    );
+  } @else if not map.has-key($map-for-positions, $position) {
+    background: radial-gradient($shape $position, $list);
+  }
+}

data/scss/library/_remove.scss

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "../library/breakpoint" as *;
+
+@mixin remove($params...) {
+  @if list.length($params) == 0 {
+    display: none;
+  } @else if list.length($params) == 1 {
+    $value: list.nth($params, 1);
+    // `only` rather than the one-argument form, which compiles to the same
+    // query, so the warning below names `remove` and is printed once.
+    @include breakpoint(only, $value) {
+      display: none;
+    }
+    @warn "`remove(#{$value})` hides the element only at a viewport exactly that wide, a single pixel. Write `remove(only, #{$value})` for that width, or `remove(min, #{$value})` from it upwards.";
+  } @else if list.length($params) == 2 {
+    @if list.index("min" "max", list.nth($params, 1)) {
+      $mode: list.nth($params, 1);
+      $value: list.nth($params, 2);
+      @if $mode == "min" {
+        @include breakpoint(min, $value) {
+          display: none;
+        }
+      } @else if $mode == "max" {
+        @include breakpoint(max, $value) {
+          display: none;
+        }
+      }
+    } @else {
+      $start: list.nth($params, 1);
+      $end: list.nth($params, 2);
+      @include breakpoint($start, $end) {
+        display: none;
+      }
+    }
+  } @else {
+    @error "`remove` takes at most 2 arguments; you passed #{list.length($params)}. Pass nothing to hide the element outright, one breakpoint, `min`/`max` plus a breakpoint, or a start and an end breakpoint.";
+  }
+}

data/scss/library/_reset-css.scss

@@ -0,0 +1,57 @@
+@charset "UTF-8";
+
+@mixin reset-css {
+    @if & {
+        @error "Please call the mixin at the root of your style sheet.";
+    } @else {
+    // http://meyerweb.com/eric/tools/css/reset/
+    // v2.0 | 20110126
+    // License: none (public domain)
+    //
+    // Comments in this file are `//`: a /* */ comment inside a mixin is emitted
+    // into the stylesheet of everyone who includes it.
+    html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%;
+      font: inherit;
+      vertical-align: baseline;
+    }
+    // HTML5 display-role reset for older browsers
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, main, nav, section {
+      display: block;
+    }
+    body {
+      line-height: 1;
+    }
+    ol, ul {
+      list-style: none;
+    }
+    blockquote, q {
+      quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+      content: '';
+      content: none;
+    }
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+  }
+}

data/scss/library/_reset-figure.scss

@@ -0,0 +1,10 @@
+@charset "UTF-8";
+
+@use "../library/responsive-image" as *;
+
+@mixin reset-figure {
+  margin: 0;
+  img {
+    @include responsive-image;
+  }
+}

data/scss/library/_resizable.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/keyword-value" as *;
+
+// Measured in Chrome 152, `resize` kept none, both, horizontal, vertical, block,
+// inline and auto, and `overflow` one or two of visible, hidden, clip, scroll,
+// auto and overlay, all in any case, with the CSS-wide keywords on their own and
+// var(). Both dropped a quoted keyword, three overflow values, and a CSS-wide
+// keyword beside another, such as `overflow: inherit auto`. null leaves the
+// declaration out, as it always has.
+@mixin resizable($direction: both, $overflow: auto) {
+  $problem: keywordProblem($direction, "none" "both" "horizontal" "vertical" "block" "inline" "auto");
+  @if $problem {
+    @error "`#{meta.inspect($direction)}` is not a valid $direction for `resizable`: #{$problem}. A browser drops the declaration.";
+  }
+  $problem: keywordProblem($overflow, "visible" "hidden" "clip" "scroll" "auto" "overlay", 2);
+  @if $problem {
+    @error "`#{meta.inspect($overflow)}` is not a valid $overflow for `resizable`: #{$problem}. A browser drops the declaration.";
+  }
+  // Written without quotes, since `resize: "both"` was dropped.
+  @if meta.type-of($direction) == "string" {
+    resize: string.unquote($direction);
+  } @else {
+    resize: $direction;
+  }
+  @if meta.type-of($overflow) == "string" {
+    overflow: string.unquote($overflow);
+  } @else {
+    overflow: $overflow;
+  }
+  max-width: 100%;
+}

data/scss/library/_responsive-image.scss

@@ -0,0 +1,6 @@
+@charset "UTF-8";
+
+@mixin responsive-image {
+  display: block;
+  width: 100%;
+}

data/scss/library/_scissors.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "../utilities/validate-scissors" as *;
+
+@mixin scissors($corners) {
+  @if list.length($corners) == 1 {
+    $corners: validateScissors($corners);
+    clip-path: polygon(
+      0 #{list.nth($corners, 1)},
+      #{list.nth($corners, 1)} 0,
+      calc(100% - #{list.nth($corners, 1)}) 0,
+      100% #{list.nth($corners, 1)},
+      100% calc(100% - #{list.nth($corners, 1)}),
+      calc(100% - #{list.nth($corners, 1)}) 100%,
+      #{list.nth($corners, 1)} 100%,
+      0 calc(100% - #{list.nth($corners, 1)})
+    );
+  } @else if list.length($corners) == 4 {
+    $corners: validateScissors($corners);
+    clip-path: polygon(
+      0 #{list.nth($corners, 1)},
+      #{list.nth($corners, 1)} 0,
+      calc(100% - #{list.nth($corners, 2)}) 0,
+      100% #{list.nth($corners, 2)},
+      100% calc(100% - #{list.nth($corners, 3)}),
+      calc(100% - #{list.nth($corners, 3)}) 100%,
+      #{list.nth($corners, 4)} 100%,
+      0 calc(100% - #{list.nth($corners, 4)})
+    );
+  } @else {
+    @error "`scissors` takes either 1 corner size or 4; you passed #{list.length($corners)}. Pass one length to cut every corner equally, or four lengths in top-left, top-right, bottom-right, bottom-left order.";
+  }
+}

data/scss/library/_screen-agent.scss

@@ -0,0 +1,34 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../internal/custom-property-in" as *;
+@use "../internal/is-condition-value" as *;
+
+@mixin screen-agent($resolution) {
+  $custom-property: customPropertyIn($resolution);
+  @if $custom-property {
+    @error "`#{$custom-property}` cannot be used as a resolution: custom properties are not evaluated in a @media condition, so the rule would never apply. Pass `1x`, `2x`, `3x` or a resolution such as `2dppx`.";
+  }
+  @if $resolution == "1x" {
+    @media (min-resolution: 96dpi) {
+      @content;
+    }
+  } @else if $resolution == "2x" {
+    @media (min-resolution: 192dpi) {
+      @content;
+    }
+  } @else if $resolution == "3x" {
+    @media (min-resolution: 288dpi) {
+      @content;
+    }
+  } @else {
+    // Measured in Chrome 152, `(min-resolution: huge)`, `(min-resolution: 2)`,
+    // `(min-resolution: 10px)` and `(min-resolution: -1dppx)` never match.
+    @if not isConditionValue($resolution, "resolution") {
+      @error "`#{meta.inspect($resolution)}` is not a valid $resolution for `screen-agent`: `(min-resolution: #{meta.inspect($resolution)})` would never match. Pass `1x`, `2x`, `3x`, or a resolution such as `2dppx`, `192dpi` or `38dpcm`.";
+    }
+    @media (min-resolution: #{$resolution}) {
+      @content;
+    }
+  }
+}

data/scss/library/_sizer.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../internal/length-problem" as *;
+
+@mixin sizer($width, $height: $width) {
+  @each $name, $value in ("$width": $width, "$height": $height) {
+    $problem: sizeProblem($value);
+    @if $problem {
+      @error "`#{meta.inspect($value)}` is not a valid #{$name} for `sizer`: #{$problem}. A browser drops the declaration.";
+    }
+  }
+  width: $width;
+  height: $height;
+}

data/scss/library/_smartphone.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@use "sass:map";
+@use "../maps/map-for-smartphones" as *;
+@use "../utilities/map-deep-get" as *;
+
+@mixin smartphone($device, $orientation: null) {
+  @if map.has-key($map-for-smartphones, $device) {
+    @if $orientation == portrait or $orientation == null {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-smartphones, $device, 'width')) 
+      and (device-height: mapDeepGet($map-for-smartphones, $device, 'height'))
+      and (orientation: portrait) {
+        @content;
+      }
+    } @else if $orientation == landscape {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-smartphones, $device, 'height')) 
+      and (device-height: mapDeepGet($map-for-smartphones, $device, 'width'))
+      and (orientation: landscape) {
+        @content;
+      }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `smartphone`. Pass `portrait`, `landscape`, or no orientation at all.";
+    }
+  } @else {
+    @error "`#{$device}` is not a device known to `smartphone`. Pass one of: #{map.keys($map-for-smartphones)}.";
+  }
+}

data/scss/library/_sprite.scss

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+@use "../internal/length-problem" as *;
+
+$-places: "left" "center" "right" "top" "bottom";
+
+// What is wrong with $position as a background-position, or null. Measured in
+// Chrome 152, background-position kept one or two lengths, percentages or
+// place keywords, keywords with offsets such as `left 10px top 5px`, var(),
+// maths functions and a CSS-wide keyword alone. It dropped a unitless number
+// other than 0, a unit that is not a length, any other word or colour, an image,
+// and three or four lengths with no keyword. Interpolation, as in
+// `#{$x}px #{$y}px`, gives the same value as strings, so each part is read.
+@function -position-problem($position) {
+  $parts: $position;
+  @if meta.type-of($position) == "string" and string.slice(meta.inspect($position), 1, 1) != "\"" and not string.index($position, "(") and string.index($position, " ") {
+    $parts: ();
+    $text: $position;
+    $at: string.index($text, " ");
+    @while $at {
+      @if $at > 1 {
+        $parts: list.append($parts, string.unquote(string.slice($text, 1, $at - 1)));
+      }
+      $text: string.slice($text, $at + 1);
+      $at: string.index($text, " ");
+    }
+    $parts: list.append($parts, string.unquote($text));
+  } @else if meta.type-of($position) != "list" {
+    $parts: ($position,);
+  }
+  @if list.length($parts) > 4 {
+    @return "a background position takes at most four values";
+  }
+  $keywords: 0;
+  @each $part in $parts {
+    @if meta.type-of($part) == "string" and list.index($-places, string.to-lower-case($part)) {
+      $keywords: $keywords + 1;
+    } @else {
+      $problem: lengthProblem($part, $css-wide: list.length($parts) == 1);
+      @if $problem == "it is not a length" {
+        @return "`#{meta.inspect($part)}` is not a length or one of left, center, right, top or bottom";
+      } @else if $problem {
+        @return "in `#{meta.inspect($part)}`, #{$problem}";
+      }
+    }
+  }
+  @if list.length($parts) > 2 and $keywords == 0 {
+    @return "three or four values need place keywords, such as `left 10px top 5px`";
+  }
+  @return null;
+}
+
+@mixin sprite($params...) {
+  @if list.length($params) == 1 {
+    @if meta.type-of(list.nth($params, 1)) == "string" {
+      $str-length: string.length(list.nth($params, 1));
+      $str-end: string.slice(list.nth($params, 1), $str-length - 3);
+      @if list.index(".png" ".jpg" ".svg", $str-end) {
+        $image-url: list.nth($params, 1);
+        display: inline-block;
+        background-image: url($image-url);
+        background-repeat: no-repeat;
+      } @else {
+        @error "`#{list.nth($params, 1)}` is not a valid image path for `sprite`. The path must end in .png, .jpg or .svg.";
+      }
+    } @else {
+      $position: list.nth($params, 1);
+      $problem: -position-problem($position);
+      @if $problem {
+        @error "`#{meta.inspect($position)}` is not a valid position for `sprite`: #{$problem}. A browser drops the declaration.";
+      }
+      background-position: $position;
+    }
+  } @else if list.length($params) == 2 {
+    $image-url: list.nth($params, 1);
+    $position: list.nth($params, 2);
+    // The one-argument form checks its path; this one did not, so a list was
+    // written into url(), which a browser drops, and a number asked for a file
+    // of that name. Measured in Chrome 152: `url(16 9)` was dropped.
+    @if meta.type-of($image-url) != "string" {
+      @error "`#{meta.inspect($image-url)}` is not a valid image path for `sprite`: with two arguments the first is one path as a string, and a browser drops a list in `url()`. Pass a path such as `\"/img/sprite.png\"`, then the position.";
+    }
+    @if $position != null {
+      $problem: -position-problem($position);
+      @if $problem {
+        @error "`#{meta.inspect($position)}` is not a valid position for `sprite`: #{$problem}. A browser drops the declaration.";
+      }
+    }
+    display: inline-block;
+    background-image: url($image-url);
+    background-position: $position;
+    background-repeat: no-repeat;
+  } @else {
+    @error "`sprite` takes 1 or 2 arguments; you passed #{list.length($params)}. Pass an image path, a background position, or both in that order.";
+  }
+  @content;
+}

data/scss/library/_stretched-link.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@use "sass:list";
+
+@mixin stretched-link($value: "before") {
+  @if list.index("before" "after", $value) {
+    &#{"::" + $value} {
+      content: "";
+      position: absolute;
+      pointer-events: auto;
+      background-color: rgba(0, 0, 0, 0);
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 1;
+    }
+  } @else {
+    @error "'#{$value}' is a wrong argument. This mixin accepts 'before' or 'after' as an argument. If you don't pass any argument default it will target the '::before' pseudo-element of the selected element.";
+  }
+}

data/scss/library/_tablet.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+
+@use "sass:map";
+@use "../maps/map-for-tablets" as *;
+@use "../utilities/map-deep-get" as *;
+
+@mixin tablet($device, $orientation: null) {
+  @if map.has-key($map-for-tablets, $device) {
+    @if $orientation == portrait or $orientation == null {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-tablets, $device, 'width')) 
+      and (device-height: mapDeepGet($map-for-tablets, $device, 'height'))
+      and (orientation: portrait) {
+        @content;
+      }
+    } @else if $orientation == landscape {
+      @media only screen 
+      and (device-width: mapDeepGet($map-for-tablets, $device, 'height')) 
+      and (device-height: mapDeepGet($map-for-tablets, $device, 'width'))
+      and (orientation: landscape) {
+        @content;
+      }
+    } @else {
+      @error "`#{$orientation}` is not a valid $orientation for `tablet`. Pass `portrait`, `landscape`, or no orientation at all.";
+    }
+  } @else {
+    @error "`#{$device}` is not a device known to `tablet`. Pass one of: #{map.keys($map-for-tablets)}.";
+  }
+}

data/scss/library/_text-gradient.scss

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../maps/map-for-directions" as *;
+@use "../internal/color-stops-problem" as *;
+
+@mixin text-gradient($direction, $colors) {
+  // A stop the browser does not keep drops the whole gradient, and with it the
+  // text, which this mixin makes transparent; see
+  // scss/internal/_color-stops-problem.scss.
+  $problem: colorStopsProblem($colors);
+  @if $problem {
+    @error "`#{meta.inspect($colors)}` is not a valid $colors for `text-gradient`: #{$problem}. A browser drops the whole gradient, and the transparent text with it.";
+  }
+  $list: ();
+  @for $i from 1 through list.length($colors) {
+    $list: list.append($list, list.nth($colors, $i), comma);
+  }
+  @if map.has-key($map-for-directions, $direction) {
+    background: linear-gradient(
+      map.get($map-for-directions, $direction),
+      $list
+    );
+  } @else if not map.has-key($map-for-directions, $direction) {
+    @if meta.type-of($direction) != "number" or not list.index("deg", math.unit($direction)) {
+      @error "`#{$direction}` is not a valid $direction for `text-gradient`. Pass an angle such as `45deg`, or one of: #{map.keys($map-for-directions)}.";
+    } @else {
+      background: linear-gradient($direction, $list);
+    }
+  }
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}

data/scss/library/_text-image.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "../internal/image-value" as *;
+
+@mixin text-image($image: null) {
+  @if $image {
+    background-image: imageValue($image, "text-image", "$image");
+  }
+  background-size: cover;
+  background-position: center;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
+}