yummacss 1.2.0 → 2.1.0

package/src/utilities/_layout.scss

@@ -0,0 +1,310 @@
+@use "sass:math";
+
+$yma-layout-utils: (
+  "aspect-ratio": (
+    "prefix": "ar",
+    "values": (
+      "auto": auto,
+      "l": "16/9",
+      "s": "1/1",
+    ),
+  ),
+
+  "columns": (
+    "prefix": "cols",
+    "values": (
+      "1": 1,
+      "2": 2,
+      "3": 3,
+      "4": 4,
+      "5": 5,
+      "6": 6,
+      "7": 7,
+      "8": 8,
+      "9": 9,
+      "10": 10,
+      "11": 11,
+      "12": 12,
+      "13": 13,
+      "14": 14,
+      "15": 15,
+      "16": 16,
+    ),
+  ),
+
+  "bottom": (
+    "prefix": "dir-b",
+    "values": (
+      "0": $yma-direction * 0,
+      "1": $yma-direction,
+      "2": $yma-direction * 2,
+      "3": $yma-direction * 3,
+      "4": $yma-direction * 4,
+      "5": $yma-direction * 5,
+      "6": $yma-direction * 6,
+      "7": $yma-direction * 7,
+      "8": $yma-direction * 8,
+      "9": $yma-direction * 9,
+      "10": $yma-direction * 10,
+      "11": $yma-direction * 11,
+      "12": $yma-direction * 12,
+      "13": $yma-direction * 13,
+      "14": $yma-direction * 14,
+      "15": $yma-direction * 15,
+      "16": $yma-direction * 16,
+      "none": none,
+    ),
+  ),
+
+  "inset": (
+    "prefix": "dir-i",
+    "values": (
+      "0": $yma-direction * 0,
+      "1": $yma-direction,
+      "2": $yma-direction * 2,
+      "3": $yma-direction * 3,
+      "4": $yma-direction * 4,
+      "5": $yma-direction * 5,
+      "6": $yma-direction * 6,
+      "7": $yma-direction * 7,
+      "8": $yma-direction * 8,
+      "9": $yma-direction * 9,
+      "10": $yma-direction * 10,
+      "11": $yma-direction * 11,
+      "12": $yma-direction * 12,
+      "13": $yma-direction * 13,
+      "14": $yma-direction * 14,
+      "15": $yma-direction * 15,
+      "16": $yma-direction * 16,
+      "none": none,
+    ),
+  ),
+
+  "left": (
+    "prefix": "dir-l",
+    "values": (
+      "0": $yma-direction * 0,
+      "1": $yma-direction,
+      "2": $yma-direction * 2,
+      "3": $yma-direction * 3,
+      "4": $yma-direction * 4,
+      "5": $yma-direction * 5,
+      "6": $yma-direction * 6,
+      "7": $yma-direction * 7,
+      "8": $yma-direction * 8,
+      "9": $yma-direction * 9,
+      "10": $yma-direction * 10,
+      "11": $yma-direction * 11,
+      "12": $yma-direction * 12,
+      "13": $yma-direction * 13,
+      "14": $yma-direction * 14,
+      "15": $yma-direction * 15,
+      "16": $yma-direction * 16,
+      "none": none,
+    ),
+  ),
+
+  "right": (
+    "prefix": "dir-r",
+    "values": (
+      "0": $yma-direction * 0,
+      "1": $yma-direction,
+      "2": $yma-direction * 2,
+      "3": $yma-direction * 3,
+      "4": $yma-direction * 4,
+      "5": $yma-direction * 5,
+      "6": $yma-direction * 6,
+      "7": $yma-direction * 7,
+      "8": $yma-direction * 8,
+      "9": $yma-direction * 9,
+      "10": $yma-direction * 10,
+      "11": $yma-direction * 11,
+      "12": $yma-direction * 12,
+      "13": $yma-direction * 13,
+      "14": $yma-direction * 14,
+      "15": $yma-direction * 15,
+      "16": $yma-direction * 16,
+      "none": none,
+    ),
+  ),
+
+  "top": (
+    "prefix": "dir-t",
+    "values": (
+      "0": $yma-direction * 0,
+      "1": $yma-direction,
+      "2": $yma-direction * 2,
+      "3": $yma-direction * 3,
+      "4": $yma-direction * 4,
+      "5": $yma-direction * 5,
+      "6": $yma-direction * 6,
+      "7": $yma-direction * 7,
+      "8": $yma-direction * 8,
+      "9": $yma-direction * 9,
+      "10": $yma-direction * 10,
+      "11": $yma-direction * 11,
+      "12": $yma-direction * 12,
+      "13": $yma-direction * 13,
+      "14": $yma-direction * 14,
+      "15": $yma-direction * 15,
+      "16": $yma-direction * 16,
+      "none": none,
+    ),
+  ),
+
+  "display": (
+    "prefix": "d",
+    "values": (
+      "b": block,
+      "f": flex,
+      "fr": flow-root,
+      "g": grid,
+      "i": inline,
+      "ib": inline-block,
+      "if": inline-flex,
+      "ig": inline-grid,
+      "it": inline-table,
+      "none": none,
+      "t": table,
+    ),
+  ),
+
+  "float": (
+    "prefix": "flo",
+    "values": (
+      "ie": inline-end,
+      "is": inline-start,
+      "l": left,
+      "none": none,
+      "r": right,
+    ),
+  ),
+
+  "object-fit": (
+    "prefix": "of",
+    "values": (
+      "c": cover,
+      "f": fill,
+      "none": none,
+      "sd": scale-down,
+    ),
+  ),
+
+  "object-position": (
+    "prefix": "op",
+    "values": (
+      "b": bottom,
+      "c": center,
+      "l": left,
+      "lb": left bottom,
+      "lt": left top,
+      "r": right,
+      "rb": right bottom,
+      "rt": right top,
+      "t": top,
+    ),
+  ),
+
+  "overflow": (
+    "prefix": "ovf",
+    "values": (
+      "auto": auto,
+      "c": clip,
+      "h": hidden,
+      "s": scroll,
+      "v": visible,
+    ),
+  ),
+
+  "overflow-x": (
+    "prefix": "ovf-x",
+    "values": (
+      "auto": auto,
+      "c": clip,
+      "h": hidden,
+      "s": scroll,
+      "v": visible,
+    ),
+  ),
+
+  "overflow-y": (
+    "prefix": "ovf-y",
+    "values": (
+      "auto": auto,
+      "c": clip,
+      "h": hidden,
+      "s": scroll,
+      "v": visible,
+    ),
+  ),
+
+  "position": (
+    "prefix": "p",
+    "values": (
+      "a": absolute,
+      "f": fixed,
+      "r": relative,
+      "s": static,
+      "st": sticky,
+    ),
+  ),
+
+  "z-index": (
+    "prefix": "zi",
+    "values": (
+      "0": 0,
+      "10": 10,
+      "20": 20,
+      "30": 30,
+      "40": 40,
+      "50": 50,
+      "60": 60,
+      "70": 70,
+      "80": 80,
+      "90": 90,
+      "auto": auto,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-layout-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/utilities/_outlines.scss

@@ -0,0 +1,76 @@
+@use "sass:math";
+
+$yma-outline-utils: (
+  "outline-offset": (
+    "prefix": "oo",
+    "values": (
+      "0": $yma-outline-offset * 0,
+      "1": $yma-outline-offset,
+      "2": $yma-outline-offset * 2,
+      "3": $yma-outline-offset * 3,
+      "4": $yma-outline-offset * 4,
+    ),
+  ),
+
+  "outline-style": (
+    "prefix": "os",
+    "values": (
+      "none": none,
+      "d": dashed,
+      "s": solid,
+    ),
+  ),
+
+  "outline-width": (
+    "prefix": "ow",
+    "values": (
+      "0": $yma-outline-width * 0,
+      "1": $yma-outline-width,
+      "2": $yma-outline-width * 2,
+      "3": $yma-outline-width * 3,
+      "4": $yma-outline-width * 4,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-outline-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/utilities/_tables.scss

@@ -0,0 +1,61 @@
+@use "sass:math";
+
+$yma-table-utils: (
+  "caption-side": (
+    "prefix": "cs",
+    "values": (
+      "b": bottom,
+      "t": top,
+    ),
+  ),
+
+  "table-layout": (
+    "prefix": "tl",
+    "values": (
+      "auto": auto,
+      "f": fixed,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-table-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/utilities/_typography.scss

@@ -0,0 +1,168 @@
+@use "sass:math";
+
+$yma-typography-utils: (
+  "font-size": (
+    "prefix": "fs",
+    "values": (
+      "xs": $yma-font-size-xs,
+      "b": 1rem,
+      "sm": $yma-font-size-sm,
+      "md": $yma-font-size-md,
+      "lg": $yma-font-size-lg,
+      "xl": $yma-font-size-xl,
+      "xxl": $yma-font-size-xxl,
+      "3xl": $yma-font-size-3xl,
+      "6xl": $yma-font-size-6xl,
+      "9xl": $yma-font-size-9xl,
+    ),
+  ),
+
+  "font-style": (
+    "prefix": "fs",
+    "values": (
+      "i": italic,
+      "n": normal,
+    ),
+  ),
+
+  "font-weight": (
+    "prefix": "fw",
+    "values": (
+      "100": 100,
+      "200": 200,
+      "300": 300,
+      "400": 400,
+      "500": 500,
+      "600": 600,
+      "700": 700,
+      "800": 800,
+      "900": 900,
+    ),
+  ),
+
+  "line-height": (
+    "prefix": "lh",
+    "values": (
+      "1": 1,
+      "2": 1.25,
+      "3": 1.375,
+      "4": 1.5,
+      "5": 1.625,
+      "6": 2,
+    ),
+  ),
+
+  "list-style-type": (
+    "prefix": "lst",
+    "values": (
+      "c": circle,
+      "d": disc,
+      "s": square,
+    ),
+  ),
+
+  "overflow-wrap": (
+    "prefix": "ow",
+    "values": (
+      "bw": break-word,
+      "n": normal,
+    ),
+  ),
+
+  "text-align": (
+    "prefix": "ta",
+    "values": (
+      "c": center,
+      "e": end,
+      "j": justify,
+      "ja": justify-all,
+      "l": left,
+      "mp": match-parent,
+      "r": right,
+      "s": start,
+    ),
+  ),
+
+  "text-decoration-line": (
+    "prefix": "tdl",
+    "values": (
+      "lt": line-through,
+      "none": none,
+      "o": overline,
+      "u": underline,
+    ),
+  ),
+
+  "text-decoration-style": (
+    "prefix": "tds",
+    "values": (
+      "d": dashed,
+      "h": hidden,
+      "none": none,
+      "s": solid,
+    ),
+  ),
+
+  "text-decoration-thickness": (
+    "prefix": "tdt",
+    "values": (
+      "0": $yma-decoration-thickness * 0,
+      "1": $yma-decoration-thickness,
+      "2": $yma-decoration-thickness * 2,
+      "3": $yma-decoration-thickness * 3,
+      "4": $yma-decoration-thickness * 4,
+      "auto": auto,
+      "ff": from-font,
+    ),
+  ),
+
+  "text-decoration": (
+    "prefix": "td",
+    "values": (
+      "none": none,
+      "u": underline,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-typography-utils {
+  $prefix: map-get($map, "prefix");
+  $values: map-get($map, "values");
+
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .#{$prefix} {
+        #{$property}: $v;
+      }
+    } @else {
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // hover variants
+  @each $k, $v in $values {
+    @if ($k == "default") {
+      .h\:#{$prefix}:hover {
+        #{$property}: $v;
+      }
+    } @else {
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+    }
+  }
+
+  // responsive variants
+  @each $bp, $bp-value in $yma-breakpoints {
+    @each $k, $v in $values {
+      .#{$bp}\:#{$prefix}-#{$k} {
+        @media (min-width: $bp-value) {
+          #{$property}: $v;
+        }
+      }
+    }
+  }
+}

package/src/yumma.scss

@@ -0,0 +1,23 @@
+@import "abstracts/variables";
+@import "abstracts/theme";
+@import "abstracts/functions";
+@import "abstracts/mixins";
+@import "abstracts/breakpoints";
+@import "abstracts/layout";
+@import "abstracts/colors";
+@import "abstracts/extensions";
+
+@import "utilities/borders";
+@import "utilities/box-model";
+@import "utilities/effects";
+@import "utilities/filters";
+@import "utilities/flexbox";
+@import "utilities/grid";
+@import "utilities/interactions";
+@import "utilities/layout";
+@import "utilities/outlines";
+@import "utilities/tables";
+@import "utilities/typography";
+
+@import "fonts";
+@import "base";

package/index.js

@@ -1,8 +0,0 @@
-const pkg = require('./package.json');
-
-const showVer = () => {
-    const version = pkg.version;
-    console.log(`You're running Yumma CSS v${version}!`);
-};
-
-module.exports = { showVer };

package/yumma-css/_base.scss

@@ -1,62 +0,0 @@
-/* Yumma CSS - https://yummacss.com */
-
-*,
-*::before,
-*::after {
-    border-width: 0;
-    border-style: solid;
-    box-sizing: border-box;
-}
-
-* {
-    margin: 0;
-    color: inherit;
-    font-family: $yma-system-fonts;
-}
-
-body {
-    line-height: 1.5;
-    font-family: inherit;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-    display: block;
-    max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-    font: inherit;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    overflow-wrap: break-word;
-}
-
-a {
-    text-decoration: none;
-}
-
-ol,
-ul {
-    padding: 0;
-    list-style: none;
-}
-
-hr {
-    border: 0;
-    margin: 1em 0;
-    border-top: $ym-colors-transparent;
-}