gerillass 0.0.6 → 3.0.0

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;

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

@@ -0,0 +1,72 @@
+@charset "UTF-8";
+
+$map-for-smartphones: (
+  "iPhone4": (
+    width: 320px,
+    height: 480px,
+  ),
+  "iPhone-SE": (
+    width: 320px,
+    height: 568px,
+  ),
+  "iPhone5-SE": (
+    width: 320px,
+    height: 568px,
+  ),
+  "iPhone6": (
+    width: 375px,
+    height: 667px,
+  ),
+  "iPhone6-Plus": (
+    width: 414px,
+    height: 736px,
+  ),
+  "iPhone7": (
+    width: 375px,
+    height: 667px,
+  ),
+  "iPhone7-Plus": (
+    width: 414px,
+    height: 736px,
+  ),
+  "iPhone8": (
+    width: 375px,
+    height: 667px,
+  ),
+  "iPhone8-Plus": (
+    width: 414px,
+    height: 736px,
+  ),
+  "iPhone11": (
+    width: 414px,
+    height: 896px,
+  ),
+  "iPhone11-Pro": (
+    width: 375px,
+    height: 812px,
+  ),
+  "iPhone11-Pro-Max": (
+    width: 414px,
+    height: 896px,
+  ),
+  "iPhoneX": (
+    width: 375px,
+    height: 812px,
+  ),
+  "Galaxy-S7": (
+    width: 360px,
+    height: 640px,
+  ),
+  "Galaxy-S8": (
+    width: 360px,
+    height: 740px,
+  ),
+  "Galaxy-S8-Plus": (
+    width: 360px,
+    height: 740px,
+  ),
+  "Galaxy-S10": (
+    width: 360px,
+    height: 760px,
+  ),
+) !default;

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

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+
+$map-for-tablets: (
+  "iPadMini": (
+    width: 768px,
+    height: 1024px,
+  ),
+  "iPad": (
+    width: 810px,
+    height: 1080px,
+  ),
+  "iPadAir": (
+    width: 834px,
+    height: 1112px,
+  ),
+  "iPadPro": (
+    width: 1024px,
+    height: 1366px,
+  ),
+  "Nexus7": (
+    width: 600px,
+    height: 960px,
+  ),
+  "Nexus9": (
+    width: 768px,
+    height: 1024px,
+  ),
+  "Nexus10": (
+    width: 800px,
+    height: 1280px,
+  ),
+) !default;

data/scss/utilities/_clear-unit.scss

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@use "sass:math";
+@use "sass:meta";
+
+@function clearUnit($value) {
+  @if meta.type-of($value) != "number" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `clearUnit`. Pass a number, such as `24px`.";
+  }
+  @return math.div($value, ($value * 0 + 1));
+}

data/scss/utilities/_clear-whitespace.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+@use "sass:meta";
+@use "sass:string";
+
+@function clearWhitespace($string) {
+  @if meta.type-of($string) != "string" {
+    @error "`#{$string}` is not a valid $string for `clearWhitespace`. Pass a string.";
+  }
+  @while (string.index($string, " ") != null) {
+    $index: string.index($string, " ");
+    $string: "#{string.slice($string, 0, $index - 1)}#{string.slice($string, $index + 1)}";
+  }
+  @return $string;
+}

data/scss/utilities/_convert-to-em.scss

@@ -0,0 +1,16 @@
+@charset "UTF-8";
+
+@use "sass:string";
+@use "sass:math";
+@use "sass:meta";
+
+@function convertToEm($value) {
+  // Only a pixel length converts cleanly. A unitless number or another unit
+  // compiled to `calc(1.5 / 1px)em`, and a word or var() to `var(--x)/16pxem`.
+  @if meta.type-of($value) != "number" or math.unit($value) != "px" {
+    @error "`#{meta.inspect($value)}` is not a valid $value for `convertToEm`. Pass a pixel length, such as `24px`.";
+  }
+  $base-value: 16px;
+  $rem-value: math.div($value, $base-value);
+  @return $rem-value + string.unquote("em");
+}

data/scss/utilities/_convert-to-number.scss

@@ -0,0 +1,45 @@
+@charset "UTF-8";
+
+@use "sass:list";
+@use "sass:meta";
+@use "sass:string";
+
+@function convertToNumber($value) {
+
+  @if meta.type-of($value) != "string" {
+    @error "`#{$value}` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+
+  $string-numerals: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
+
+  // Every character has to be a digit before the parse runs. Otherwise an
+  // empty string or a sign failed with Sass's own "Undefined operation", and a
+  // letter or a space was folded into nonsense such as `40-1`. The empty case
+  // is checked first because `@for $i from 1 through 0` counts down, not zero
+  // times.
+  @if string.length($value) == 0 {
+    @error "`\"\"` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+  }
+  @for $i from 1 through string.length($value) {
+    @if not list.index($string-numerals, string.slice($value, $i, $i)) {
+      @error "`#{meta.inspect($value)}` is not a valid $value for `convertToNumber`. Pass a string made only of digits, such as `\"42\"`.";
+    }
+  }
+
+  $calc: 0;
+
+  @for $i from 1 through string.length($value) {
+    //Takes every digits in the $value
+    $digit: string.slice($value, $i, $i);
+
+    //Finds the index position of $digit in the $value
+    $index-of-digit: list.index($string-numerals, $digit);
+
+    // That is because SASS strings are not "0" based but "1", the index position of every digits will be more by one. Here is the simple calculation to find the actual number.
+    $actual-digit: $index-of-digit - 1;
+
+    // Calculates the actual number.
+    $calc: $calc * 10 + $actual-digit;
+  }
+  @return $calc;
+}