gerillass 0.0.6 → 2.3.1

data/scss/library/_text-selection.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+@mixin text-selection($value: null) {
+  @if not & and $value == null {
+    ::selection {
+      @content;
+    }
+  } @else if & and $value == "only" {
+    &::selection {
+      @content;
+    }
+  } @else if & and $value == null {
+    &::selection,
+    *::selection {
+      @content;
+    }
+  } @else if not & and $value == "only" {
+    @error "`only` has no meaning at the root of a stylesheet, because there is no selector to limit the effect to. Call `text-selection(\"only\")` inside a selector, or pass no argument at all.";
+  } @else {
+    @error "`#{$value}` is not a valid argument for `text-selection`. Pass `\"only\"` inside a selector to affect just that element, or pass no argument at all.";
+  }
+}

data/scss/library/_text-shadow.scss

@@ -0,0 +1,145 @@
+@charset "UTF-8";
+
+@use "sass:color";
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "../utilities/clear-unit" as *;
+
+@mixin text-shadow($params...) {
+  $value: ();
+
+  @for $i from 1 through list.length($params) {
+    // Takes each items come from $params.
+    $item: list.nth($params, $i);
+
+    // Each group must carry at least a direction, a colour and a size. Without
+    // this the list.nth() calls below fail with "Invalid index", which says nothing
+    // about what the mixin wanted.
+    @if list.length($item) < 3 {
+      @error "`#{$item}` is not a valid shadow for `text-shadow`. Each group needs a direction, a colour and a size, such as `bottom-right red 5px`. An optional blur and a fill flag may follow.";
+    }
+
+    // The first value comes from the $item is direction.
+    // This will be used in the @if, @else statements with $size to control the offset of the shadows.
+    $direction: list.nth($item, 1);
+
+    // Second value is the color.
+    $color: list.nth($item, 2);
+
+    // The third value is the actual offset value of the shadows.
+    $size: list.nth($item, 3);
+
+    // Takes the unit of the $size value to use it later to increment the amount of shadow based on the unit.
+    $sizeUnit: math.unit($size);
+
+    // The $blur argument is optional. It controls the size of the blur.
+    $blur: null;
+
+    // The $fill argument is optional. This makes shadow fill the gap between the actual text and shadow's end-point. The default value is set to false.
+    $fill: null;
+
+    // Assigns the optional sub-arguments to the actual argument.
+    @if list.length($item) == 4 and meta.type-of(list.nth($item, 4)) == number {
+      $blur: list.nth($item, list.length($item));
+    } @else if list.length($item) == 4 and meta.type-of(list.nth($item, 4)) == bool {
+      $fill: list.nth($item, list.length($item));
+    } @else if list.length($item) == 5 {
+      $blur: list.nth($item, 4);
+      $fill: list.nth($item, list.length($item));
+    }
+
+    // The code below changes the angle of $direction of the shadow based on the predefined values.
+    @if $direction == "top" {
+      @if $fill == true {
+        // The clearUnit(); function is used here due to it is not possible to count $size with a unit. First, it clears the unit from the $size argument and then adds it back again in the @for loop.
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: 0 -#{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: 0 -#{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "top-left" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: -#{$increase} -#{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: -#{$size} -#{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "top-right" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: #{$increase} -#{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: #{$size} -#{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "bottom" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: 0 #{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: 0 #{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "bottom-left" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: -#{$increase} #{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: -#{$size} #{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "bottom-right" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: #{$increase} #{$increase} $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: #{$size} #{$size} $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "left" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: -#{$increase} 0 $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: -#{$size} 0 $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    } @else if $direction == "right" {
+      @if $fill == true {
+        @for $i from 1 through clearUnit($size) {
+          $increase: $i * 1 + $sizeUnit;
+          $shadow: #{$increase} 0 $blur $color;
+          $value: list.append($value, $shadow, comma);
+        }
+      } @else {
+        $shadow: #{$size} 0 $blur $color;
+        $value: list.append($value, $shadow, comma);
+      }
+    }
+  }
+  text-shadow: $value;
+}

data/scss/library/_text-stroke.scss

@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+
+// Each colour is a declaration of its own, where Chrome 152 kept a CSS-wide
+// keyword and dropped a word that is not a colour, a quoted colour, a length and
+// two colours side by side; see scss/internal/_color-problem.scss. null leaves
+// that declaration out, as it always has.
+@mixin text-stroke(
+  $fallback-color: black,
+  $color: transparent,
+  $stroke-color: black,
+  $stroke-width: 1px
+) {
+  $colors: (
+    "$fallback-color": $fallback-color,
+    "$color": $color,
+    "$stroke-color": $stroke-color,
+  );
+  @each $name, $value in $colors {
+    @if $value != null {
+      $problem: colorProblem($value, $css-wide: true);
+      @if $problem {
+        @error "`#{meta.inspect($value)}` is not a valid #{$name} for `text-stroke`: #{$problem}. A browser drops the declaration. Pass a colour such as `black`, `currentColor`, or a function such as `var(--stroke)`.";
+      }
+    }
+  }
+  // -webkit-text-stroke-width kept a length, 0, thin, medium or thick and a
+  // CSS-wide keyword in Chrome 152, and dropped a percentage and a negative
+  // width.
+  @if $stroke-width != null {
+    $problem: lengthProblem($stroke-width, $percent: false, $negative: false, $keywords: "thin" "medium" "thick", $css-wide: true);
+    @if $problem {
+      @error "`#{meta.inspect($stroke-width)}` is not a valid $stroke-width for `text-stroke`: #{$problem}. A browser drops the declaration.";
+    }
+  }
+  color: $fallback-color;
+  -webkit-text-fill-color: $color;
+  -webkit-text-stroke-color: $stroke-color;
+  -webkit-text-stroke-width: $stroke-width;
+}

data/scss/library/_tokens.scss

@@ -0,0 +1,111 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+// Characters a custom property name cannot hold. Measured in Chrome 152: a
+// declaration named `--space-0.5`, `--w-1/2`, `--a b` or `--#fff` was dropped,
+// and `--font:body` became a property called `--font`. Letters, digits,
+// hyphens, underscores and non-ASCII letters all survived.
+$-forbidden: " " "." "," "/" "#" ":" ";" "(" ")" "[" "]" "{" "}" "!" "@" "$" "%" "^" "&" "*" "+" "=" "<" ">" "?" "\\" "|" "~" "`" "'" "\"";
+
+@function -forbidden-in($text) {
+  @each $character in $-forbidden {
+    @if string.index($text, $character) {
+      @return $character;
+    }
+  }
+  @return null;
+}
+
+// Writes a value the way Sass writes it in an ordinary declaration. A custom
+// property value is interpolated, and neither obvious spelling matches that:
+// plain interpolation drops the quotes of a string, and meta.inspect keeps them
+// but prints numbers at full precision, so oklch(0.637 0.237 25.331) came out
+// with a hue of 25.331000000000017deg and math.div(1, 3) as 0.3333333333333333.
+// So only strings go through meta.inspect, and a list is walked into.
+@function -serialize($value) {
+  @if meta.type-of($value) == "string" {
+    @return meta.inspect($value);
+  }
+  @if meta.type-of($value) == "list" or meta.type-of($value) == "arglist" {
+    $joiner: " ";
+    @if list.separator($value) == "comma" {
+      $joiner: ", ";
+    } @else if list.separator($value) == "slash" {
+      $joiner: " / ";
+    }
+    $out: "";
+    @each $item in $value {
+      @if $out != "" {
+        $out: $out + $joiner;
+      }
+      $out: $out + -serialize($item);
+    }
+    @if list.is-bracketed($value) {
+      $out: "[" + $out + "]";
+    }
+    @return $out;
+  }
+  @return "#{$value}";
+}
+
+// Writes a Sass map out as custom properties, which two agent trials wrote by
+// hand for a light and a dark palette. Three things it does that interpolating
+// the map in a loop does not:
+//
+// A null is left out. `--focus: null` is a value, not an absence: measured in
+// Chrome 152, `color: var(--focus, red)` did not fall back to red.
+//
+// A quoted string keeps its quotes, through -serialize above. With plain
+// interpolation `"→"` became `→`, and `content: var(--arrow)` then computed to
+// none.
+//
+// A nested map is refused rather than flattened, so a later version can decide
+// how to flatten it without changing what a call already produces.
+@mixin tokens($map, $prefix: null) {
+  @if not & {
+    @error "`tokens` writes custom properties into the rule it is called in, so call it inside a selector, such as `:root { @include tokens((bg: #fff), color); }`.";
+  }
+  @if meta.type-of($map) != "map" {
+    @error "`#{meta.inspect($map)}` is not a valid $map for `tokens`. Pass a map of names to values, such as `(bg: #fff, text: #111)`.";
+  }
+  // Checked by its characters, not its type, like the names below: Sass reads
+  // an unquoted `blue` or `red` as a colour, and `tokens($blue, blue)` has to
+  // work. A colour written `#00f` or `rgb()` is still caught by `#` and `(`.
+  @if $prefix != null {
+    @if not list.index("string" "color" "number", meta.type-of($prefix)) or string.length("#{$prefix}") == 0 {
+      @error "`#{meta.inspect($prefix)}` is not a valid $prefix for `tokens`. Pass a name, such as `color`, or leave it out.";
+    }
+    $character: -forbidden-in("#{$prefix}");
+    @if $character {
+      @error "`#{$prefix}` is not a valid $prefix for `tokens`: a custom property name cannot contain `#{$character}`. Use letters, digits, hyphens and underscores.";
+    }
+  }
+
+  @each $name, $value in $map {
+    $text: "#{$name}";
+    @if string.length($text) == 0 {
+      @error "`#{meta.inspect($name)}` is not a valid token name for `tokens`. Pass a name such as `bg` or `500`.";
+    }
+    $character: -forbidden-in($text);
+    @if $character {
+      @error "`#{$text}` is not a valid token name for `tokens`: a custom property name cannot contain `#{$character}`. Use letters, digits, hyphens and underscores, such as `space-0_5`.";
+    }
+    @if meta.type-of($value) == "map" {
+      @error "`#{$text}` holds a map, which `tokens` does not flatten. Pass each group on its own, such as `@include tokens($blue, blue)` for `$blue: (500: #3b82f6)`.";
+    }
+    @if meta.type-of($value) == "list" and list.length($value) == 0 {
+      @error "`#{$text}` has an empty value in `tokens`. Pass a value, or null to leave the property out.";
+    }
+
+    @if $value != null {
+      $property: --#{$text};
+      @if $prefix {
+        $property: --#{$prefix}-#{$text};
+      }
+      #{$property}: #{-serialize($value)};
+    }
+  }
+}

data/scss/library/_triangle.scss

@@ -0,0 +1,115 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "../lists/list-of-directions" as *;
+@use "../internal/is-size" as *;
+@use "../internal/color-problem" as *;
+@use "../internal/length-problem" as *;
+
+// The logical directions point along the writing direction rather than a fixed
+// side: inline-end is right in a left-to-right page and left in a right-to-left
+// one. They are kept in a list of their own on purpose. $list-of-directions is
+// shared with border-radius, whose corner branches have no final @else, so a
+// keyword added there without a branch would be accepted and emit nothing.
+$-logical-directions: ("inline-start", "inline-end", "block-start", "block-end");
+
+@mixin triangle($direction: "bottom", $color: black, $size: 10px 8px) {
+  @if list.index($list-of-directions, $direction) or list.index($-logical-directions, $direction) {
+    // Halving a size in calc() rather than math.div() keeps var() and clamp()
+    // working instead of emitting `var(--w)/2`, which is not valid CSS.
+    @each $item in $size {
+      @if not isSize($item) {
+        @error "`#{meta.inspect($size)}` is not a valid $size for `triangle`. Pass one or two lengths, or var(), env() or a calculation in place of either.";
+      }
+      // The sizes land in border-width, which in Chrome 152 dropped a
+      // percentage, a negative width and a unit that is not a length. isSize
+      // above takes any number, since it only guards calc().
+      $problem: lengthProblem($item, $percent: false, $negative: false);
+      @if $problem {
+        @error "`#{meta.inspect($size)}` is not a valid $size for `triangle`: #{$problem}. A browser drops the border widths, so no triangle is drawn.";
+      }
+    }
+    // The colour is checked by colorProblem in scss/internal/, each item of a
+    // list on its own, as isColor used to accept a list. CSS-wide keywords stay
+    // refused: the mixin writes the colour into a border-color shorthand beside
+    // `transparent`, and a CSS-wide keyword is only valid as the whole value, so
+    // `transparent transparent inherit` was rejected in Chrome 152. The check
+    // used to name four functions; system colours such as Canvas and
+    // contrast-color(), which a border keeps, were refused until it was shared.
+    $color-problem: null;
+    @each $item in $color {
+      @if not $color-problem {
+        $color-problem: colorProblem($item);
+      }
+    }
+    @if $color-problem {
+      @error "`#{meta.inspect($color)}` is not a valid $color for `triangle`. Pass a colour, `currentColor`, or a CSS function such as `var(--accent)`, `color-mix(...)` or `light-dark(...)`.";
+    } @else {
+      content: "";
+      height: 0;
+      width: 0;
+      display: inline-block;
+      border-style: solid;
+      @if $direction == "top"{
+        border-color: transparent transparent $color;
+        border-width: 0 calc(list.nth($size, 1) / 2) if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1));
+      } @else if $direction == "top-right" {
+        border-color: transparent $color transparent transparent;
+        border-width: 0 list.nth($size, 1) list.nth($size, 1) 0;
+      } @else if $direction == "right" {
+        border-color: transparent transparent transparent $color;
+        border-width: calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) 0 calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) list.nth($size, 1);
+      } @else if $direction == "bottom-right" {
+        border-color: transparent transparent $color;
+        border-width: 0 0 list.nth($size, 1) list.nth($size, 1);
+      } @else if $direction == "bottom" {
+        border-color: $color transparent transparent;
+        border-width: if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) calc(list.nth($size, 1) / 2) 0;
+      } @else if $direction == "bottom-left" {
+        border-color: transparent transparent transparent $color;
+        border-width: list.nth($size, 1) 0 0 list.nth($size, 1);
+      } @else if $direction == "left" {
+        border-color: transparent $color transparent transparent;
+        border-width: calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) list.nth($size, 1) calc(if(list.length($size) == 2, list.nth($size, 2), list.nth($size, 1)) / 2) 0;
+      } @else if $direction == "top-left" {
+        border-color: $color transparent transparent;
+        border-width: list.nth($size, 1) list.nth($size, 1) 0 0;
+      } @else {
+        // The same shapes as right, left, bottom and top, drawn with logical
+        // borders so the browser picks the side. The first size is the length
+        // the triangle points along, the second the width across it.
+        $along: list.nth($size, 1);
+        $across: $along;
+        @if list.length($size) == 2 {
+          $across: list.nth($size, 2);
+        }
+        border-color: transparent;
+        @if $direction == "inline-end" {
+          border-inline-start-color: $color;
+          border-block-width: calc($across / 2);
+          border-inline-start-width: $along;
+          border-inline-end-width: 0;
+        } @else if $direction == "inline-start" {
+          border-inline-end-color: $color;
+          border-block-width: calc($across / 2);
+          border-inline-start-width: 0;
+          border-inline-end-width: $along;
+        } @else if $direction == "block-end" {
+          border-block-start-color: $color;
+          border-inline-width: calc($along / 2);
+          border-block-start-width: $across;
+          border-block-end-width: 0;
+        } @else {
+          border-block-end-color: $color;
+          border-inline-width: calc($along / 2);
+          border-block-start-width: 0;
+          border-block-end-width: $across;
+        }
+      }
+      @content;
+    }
+  } @else {
+    @error "The argument for direction must be one of the followings: #{list.join($list-of-directions, $-logical-directions)}";
+  }
+}

data/scss/lists/_index.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+@forward "list-of-anchor-pseudo-classes";
+@forward "list-of-buttons";
+@forward "list-of-counter-styles";
+@forward "list-of-directions";
+@forward "list-of-length-units";
+@forward "list-of-text-inputs";

data/scss/lists/_list-of-anchor-pseudo-classes.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+$list-of-anchor-pseudo-classes: (
+  "link",
+  "visited",
+  "hover",
+  "active",
+  "focus"
+) !default;

data/scss/lists/_list-of-buttons.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+$list-of-buttons: (
+  "button",
+  "[type='button']",
+  "[type='reset']",
+  "[type='submit']"
+) !default;

data/scss/lists/_list-of-counter-styles.scss

@@ -0,0 +1,59 @@
+@charset "UTF-8";
+
+$list-of-counter-styles: (
+  "arabic-indic",
+  "armenian",
+  "bengali",
+  "cambodian",
+  "circle",
+  "cjk-decimal",
+  "cjk-earthly-branch",
+  "cjk-heavenly-stem",
+  "decimal",
+  "decimal-leading-zero",
+  "devanagari",
+  "disc",
+  "disclosure-closed",
+  "disclosure-open",
+  "ethiopic-numeric",
+  "georgian",
+  "gujarati",
+  "gurmukhi",
+  "hebrew",
+  "hiragana",
+  "hiragana-iroha",
+  "japanese-formal",
+  "japanese-informal",
+  "kannada",
+  "katakana",
+  "katakana-iroha",
+  "khmer",
+  "korean-hangul-formal",
+  "korean-hanja-formal",
+  "korean-hanja-informal",
+  "lao",
+  "lower-alpha",
+  "lower-alpha",
+  "lower-armenian",
+  "lower-greek",
+  "lower-latin",
+  "lower-roman",
+  "malayalam",
+  "mongolian",
+  "myanmar",
+  "oriya",
+  "persian",
+  "simp-chinese-formal",
+  "simp-chinese-informal",
+  "square",
+  "tamil",
+  "telugu",
+  "thai",
+  "tibetan",
+  "trad-chinese-formal",
+  "trad-chinese-informal",
+  "upper-alpha",
+  "upper-armenian",
+  "upper-latin",
+  "upper-roman"
+) !default;

data/scss/lists/_list-of-directions.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+$list-of-directions: (
+  "top",
+  "top-right",
+  "right",
+  "bottom-right",
+  "bottom",
+  "bottom-left",
+  "left",
+  "top-left"
+) !default;

data/scss/lists/_list-of-length-units.scss

@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+$list-of-absolute-length-units: (
+  "cm",
+  "mm",
+  "Q",
+  "in",
+  "pc",
+  "pt",
+  "px"
+) !default;
+
+$list-of-relative-length-units: (
+  "em",
+  "ex",
+  "ch",
+  "rem",
+  "lh",
+  "vw",
+  "vh",
+  "vmin",
+  "vmax"
+) !default;

data/scss/lists/_list-of-text-inputs.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+$list-of-text-inputs: (
+  "[type='color']",
+  "[type='date']",
+  "[type='datetime']",
+  "[type='datetime-local']",
+  "[type='email']",
+  "[type='month']",
+  "[type='number']",
+  "[type='password']",
+  "[type='search']",
+  "[type='tel']",
+  "[type='text']",
+  "[type='time']",
+  "[type='url']",
+  "[type='week']",
+  "input:not([type])",
+  "textarea"
+) !default;

data/scss/maps/_index.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+
+@forward "map-for-breakpoints";
+@forward "map-for-directions";
+@forward "map-for-font-formats";
+@forward "map-for-positions";
+@forward "map-for-smartphones";
+@forward "map-for-tablets";

data/scss/maps/_map-for-breakpoints.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+$map-for-breakpoints: (
+  "xsmall": 0,
+  "small": 576px,
+  "medium": 768px,
+  "large": 992px,
+  "xlarge": 1200px,
+) !default;

data/scss/maps/_map-for-directions.scss

@@ -0,0 +1,12 @@
+@charset "UTF-8";
+
+$map-for-directions: (
+  "top": to top,
+  "top-right": to top right,
+  "right": to right,
+  "bottom-right": to bottom right,
+  "bottom": to bottom,
+  "bottom-left": to bottom left,
+  "left": to left,
+  "top-left": to top left,
+) !default;

data/scss/maps/_map-for-font-formats.scss

@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+$map-for-font-formats: (
+  "eot": format("embedded-opentype"),
+  "woff2": format("woff2"),
+  "woff": format("woff"),
+  "ttf": format("truetype"),
+  "svg": format("svg"),
+) !default;

data/scss/maps/_map-for-positions.scss

@@ -0,0 +1,13 @@
+@charset "UTF-8";
+
+$map-for-positions: (
+  "top": at top,
+  "top-right": at top right,
+  "right": at right,
+  "bottom-right": at bottom right,
+  "bottom": at bottom,
+  "bottom-left": at bottom left,
+  "left": at left,
+  "top-left": at top left,
+  "center": at center,
+) !default;