yummacss 2.0.0 → 2.1.0

package/package.json

@@ -1,34 +1,24 @@
 {
   "author": "Renildo Pereira",
   "description": "Quickly build applications with less code in your markup.",
-  "homepage": "https://yummacss.com",
   "license": "MIT",
   "name": "yummacss",
-  "style": "dist/yumma.css",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "devDependencies": {
-    "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-copy": "^4.0.1",
+    "gulp-purgecss": "^6.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
+    "gulp": "^4.0.2",
     "npm-run-all": "^4.1.5",
     "sass": "^1.62.1"
   },
-  "keywords": [
-    "css",
-    "css-library",
-    "functional-css",
-    "gulp-sass",
-    "responsive",
-    "utility-classes",
-    "yummacss"
-  ],
   "scripts": {
-    "std": "gulp standardFile",
+    "build": "npm-run-all --sequential std min core mincore",
     "core": "gulp coreFile",
     "min": "gulp minifiedFile",
     "mincore": "gulp minifiedCoreFile",
-    "build": "npm-run-all --sequential std min core mincore"
+    "std": "gulp standardFile"
   }
 }

package/src/{_stylecent.scss → _base.scss}

@@ -1,32 +1,30 @@
-// Yumma CSS - Stylecent
+$base: true !default;
 
-$stylecent: true !default;
-
-@if $stylecent {
+@if $base {
   *,
   *::before,
   *::after {
-    border-width: 0;
     border-style: solid;
+    border-width: 0;
     box-sizing: border-box;
   }
 
   * {
-    margin: 0;
     color: inherit;
     font-family: $yma-font-system;
+    margin: 0;
   }
 
   body {
-    line-height: 1.5;
     font-family: inherit;
+    line-height: 1.5;
   }
 
+  canvas,
   img,
   picture,
-  video,
-  canvas,
-  svg {
+  svg,
+  video {
     display: block;
     max-width: 100%;
   }
@@ -36,17 +34,23 @@ $stylecent: true !default;
   optgroup,
   select,
   textarea {
+    background-color: $yma-color-transparent;
     font: inherit;
-    background-color: transparent;
   }
 
-  p,
+  button {
+    cursor: pointer;
+  }
+
   h1,
   h2,
   h3,
   h4,
   h5,
-  h6 {
+  h6,
+  p {
+    font-size: inherit;
+    font-weight: inherit;
     overflow-wrap: break-word;
   }
 
@@ -56,13 +60,13 @@ $stylecent: true !default;
 
   ol,
   ul {
-    padding: 0;
     list-style: none;
+    padding: 0;
   }
 
   hr {
+    border-top: $yma-color-transparent;
     border: 0;
     margin: 1em 0;
-    border-top: $yma-colors-transparent;
   }
 }

package/src/abstracts/_colors.scss

@@ -1,6 +1,6 @@
 @import "mixins";
 
-@each $k, $v in $yma-colors {
+@each $k, $v in $yma-theme {
   @include color-variants("accent-color", "ac", $k, $v);
   @include color-variants("background-color", "bg", $k, $v);
   @include color-variants("border-bottom-color", "bc-b", $k, $v);
@@ -13,7 +13,7 @@
   @include color-variants("outline-color", "oc", $k, $v);
   @include color-variants("text-decoration-color", "tdc", $k, $v);
 
-  @if (is-not-mono($v, $yma-colors)) {
+  @if (is-not-mono($v, $yma-theme)) {
     @include shade-variants("accent-color", "ac", $k, $v, 10%);
     @include shade-variants("background-color", "bg", $k, $v, 10%);
     @include shade-variants("border-bottom-color", "bc-b", $k, $v, 10%);

package/src/abstracts/_extensions.scss

@@ -0,0 +1,19 @@
+$yma-extension: (
+  "auto": auto,
+  "fc": fit-content,
+  "full": 100%,
+  "half": 50%,
+  "max": max-content,
+  "min": min-content,
+);
+
+$yma-height-extension: (
+  "1\\/1": 100dvh,
+  "1\\/2": 50dvh,
+);
+
+$yma-width-extension: (
+  "1\\/1": 100dvw,
+  "2\\/1": 50dvw,
+);
+

package/src/abstracts/_functions.scss

@@ -1,4 +1,3 @@
-@function is-not-mono($v, $yma-colors) {
-  @return $v != map-get($yma-colors, "black") and $v !=
-    map-get($yma-colors, "white") and $v != map-get($yma-colors, "transparent");
+@function is-not-mono($v, $yma-theme) {
+  @return $v != map-get($yma-theme, "black") and $v != map-get($yma-theme, "white") and $v != map-get($yma-theme, "transparent");
 }

package/src/abstracts/_mixins.scss

@@ -167,34 +167,27 @@
 @mixin spacing-x($prefix, $unit) {
   @for $i from 0 through 100 {
     .#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
-      --yma-spacing-x: 1;
-      margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
-      margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+      margin-left: calc(#{$i * $unit} * calc(1 - 0));
+      margin-right: calc(#{$i * $unit} * 0);
     }
 
-    // Hover variant
     .h\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
-      --yma-spacing-x: 1;
-      margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
-      margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+      margin-left: calc(#{$i * $unit} * calc(1 - 0));
+      margin-right: calc(#{$i * $unit} * 0);
     }
 
-    // Responsive hover variant
     @each $bp, $bp-value in $yma-breakpoints {
       .#{$bp}\:#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
         @include breakpoint($bp-value) {
-          --yma-spacing-x: 1;
-          margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
-          margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+          margin-left: calc(#{$i * $unit} * calc(1 - 0));
+          margin-right: calc(#{$i * $unit} * 0);
         }
       }
 
-      // Responsive hover variant
       .h\:#{$bp}\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
         @include breakpoint($bp-value) {
-          --yma-spacing-x: 1;
-          margin-left: calc(#{$i * $unit} * var(--yma-spacing-x));
-          margin-right: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-x)));
+          margin-left: calc(#{$i * $unit} * calc(1 - 0));
+          margin-right: calc(#{$i * $unit} * 0);
         }
       }
     }
@@ -204,34 +197,27 @@
 @mixin spacing-y($prefix, $unit) {
   @for $i from 0 through 100 {
     .#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
-      --yma-spacing-y: 1;
-      margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
-      margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+      margin-top: calc(#{$i * $unit} * calc(1 - 0));
+      margin-bottom: calc(#{$i * $unit} * 0);
     }
 
-    // Hover variant
     .h\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
-      --yma-spacing-y: 1;
-      margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
-      margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+      margin-top: calc(#{$i * $unit} * calc(1 - 0));
+      margin-bottom: calc(#{$i * $unit} * 0);
     }
 
-    // Responsive hover variant
     @each $bp, $bp-value in $yma-breakpoints {
       .#{$bp}\:#{$prefix}-#{$i} > :not([hidden]) ~ :not([hidden]) {
         @include breakpoint($bp-value) {
-          --yma-spacing-y: 1;
-          margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
-          margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+          margin-top: calc(#{$i * $unit} * calc(1 - 0));
+          margin-bottom: calc(#{$i * $unit} * 0);
         }
       }
 
-      // Responsive hover variant
       .h\:#{$bp}\:#{$prefix}-#{$i}:hover > :not([hidden]) ~ :not([hidden]) {
         @include breakpoint($bp-value) {
-          --yma-spacing-y: 1;
-          margin-top: calc(#{$i * $unit} * var(--yma-spacing-y));
-          margin-bottom: calc(#{$i * $unit} * calc(1 - var(--yma-spacing-y)));
+          margin-top: calc(#{$i * $unit} * calc(1 - 0));
+          margin-bottom: calc(#{$i * $unit} * 0);
         }
       }
     }
@@ -348,7 +334,7 @@
   }
 }
 
-@mixin spacing-extensions($map, $prefixes, $property) {
+@mixin box-model-extensions($map, $prefixes, $property) {
   @each $k, $v in $map {
     @if $k == "auto" {
       @each $prefix in $prefixes {

package/src/abstracts/_theme.scss

@@ -0,0 +1,18 @@
+$yma-theme: (
+  "red": $yma-color-red,
+  "orange": $yma-color-orange,
+  "yellow": $yma-color-yellow,
+  "green": $yma-color-green,
+  "teal": $yma-color-teal,
+  "cyan": $yma-color-cyan,
+  "blue": $yma-color-blue,
+  "indigo": $yma-color-indigo,
+  "violet": $yma-color-violet,
+  "pink": $yma-color-pink,
+  "silver": $yma-color-silver,
+  "gray": $yma-color-gray,
+  "lead": $yma-color-lead,
+  "black": $yma-color-black,
+  "white": $yma-color-white,
+  "transparent": $yma-color-transparent,
+);

package/src/abstracts/_variables.scss

@@ -1,27 +1,28 @@
 // base colors
-$yma-colors-red: #d73d3d;
-$yma-colors-orange: #e06814;
-$yma-colors-yellow: #d3a107;
-$yma-colors-green: #1fb155;
-$yma-colors-teal: #12a695;
-$yma-colors-cyan: #05a4bf;
-$yma-colors-blue: #3575dd;
-$yma-colors-indigo: #595cd9;
-$yma-colors-violet: #7d53dd;
-$yma-colors-pink: #d4418a;
-$yma-colors-silver: #bfc2c7;
-$yma-colors-gray: #606773;
-$yma-colors-lead: #3f3f4e;
-$yma-colors-black: black;
-$yma-colors-white: white;
-$yma-colors-transparent: transparent;
+$yma-color-red: #d73d3d;
+$yma-color-orange: #e06814;
+$yma-color-yellow: #d3a107;
+$yma-color-green: #1fb155;
+$yma-color-teal: #12a695;
+$yma-color-cyan: #05a4bf;
+$yma-color-blue: #3575dd;
+$yma-color-indigo: #595cd9;
+$yma-color-violet: #7d53dd;
+$yma-color-pink: #d4418a;
+$yma-color-silver: #bfc2c7;
+$yma-color-gray: #606773;
+$yma-color-lead: #3f3f4e;
+$yma-color-black: black;
+$yma-color-white: white;
+$yma-color-transparent: transparent;
 
-// borders & outlines
+// borders
 $yma-border: 1px;
-$yma-border-radius: 4px;
-$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
-$yma-outline-offset: 2px;
-$yma-outline-width: 2px;
+$yma-border-radius: 0.25rem;
+
+// outlines
+$yma-outline-offset: 1px;
+$yma-outline-width: 1px;
 $yma-decoration-thickness: 1px;
 
 // box model
@@ -31,70 +32,37 @@ $yma-padding: 0.25rem;
 $yma-margin: 0.25rem;
 $yma-spacing: 0.25rem;
 
-// effects & filters
+// effects
 $yma-backdrop-blur: 4px;
 
-// flexbox & grid
-$yma-flex-basis: 1rem;
+// filters
+$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+
+// flexbox
+$yma-flex-basis: 0.25rem;
+
+// grid
 $yma-gap: 0.25rem;
 $yma-column-gap: 0.25rem;
 $yma-row-gap: 0.25rem;
 
 // layout
-$yma-direction: 1px;
+$yma-direction: 0.25;
 
 // typography
-$yma-font-size: 16px;
+$yma-font-size: 0.75rem;
 $yma-font-weight: 500;
-$yma-font-size-xs: $yma-font-size * 0.75;
-$yma-font-size-sm: $yma-font-size * 0.9;
-$yma-font-size-md: $yma-font-size;
-$yma-font-size-lg: $yma-font-size * 1.2;
-$yma-font-size-xl: $yma-font-size * 1.44;
-$yma-font-size-xxl: $yma-font-size * 1.88;
-$yma-font-size-3xl: $yma-font-size * 2.22;
-$yma-font-size-6xl: $yma-font-size * 3.66;
+$yma-font-size-xs: $yma-font-size;
+$yma-font-size-b: 1rem;
+$yma-font-size-sm: $yma-font-size * 2;
+$yma-font-size-md: $yma-font-size * 3;
+$yma-font-size-lg: $yma-font-size * 4;
+$yma-font-size-xl: $yma-font-size * 5;
+$yma-font-size-xxl: $yma-font-size * 6;
+$yma-font-size-3xl: $yma-font-size * 7;
+$yma-font-size-6xl: $yma-font-size * 8;
+$yma-font-size-9xl: $yma-font-size * 9;
 
 $yma-font-charter: Charter, Cambria, serif;
 $yma-font-mono: ui-monospace, Consolas, monospace;
-$yma-font-system: system-ui, sans-serif;
-
-// extensions
-$yma-extension: (
-  "auto": auto,
-  "fc": fit-content,
-  "full": 100%,
-  "half": 50%,
-  "max": max-content,
-  "min": min-content,
-);
-
-$yma-height-extension: (
-  "1\\/1": 100dvh,
-  "1\\/2": 50dvh,
-);
-
-$yma-width-extension: (
-  "1\\/1": 100dvw,
-  "2\\/1": 50dvw,
-);
-
-// colors map
-$yma-colors: (
-  "red": $yma-colors-red,
-  "orange": $yma-colors-orange,
-  "yellow": $yma-colors-yellow,
-  "green": $yma-colors-green,
-  "teal": $yma-colors-teal,
-  "cyan": $yma-colors-cyan,
-  "blue": $yma-colors-blue,
-  "indigo": $yma-colors-indigo,
-  "violet": $yma-colors-violet,
-  "pink": $yma-colors-pink,
-  "silver": $yma-colors-silver,
-  "gray": $yma-colors-gray,
-  "lead": $yma-colors-lead,
-  "black": $yma-colors-black,
-  "white": $yma-colors-white,
-  "transparent": $yma-colors-transparent,
-);
+$yma-font-system: system-ui, sans-serif;

package/src/core.scss

@@ -1,3 +1,3 @@
-$stylecent: false;
+$base: false;
 
 @import "yumma.scss";

package/src/utilities/_borders.scss

@@ -0,0 +1,214 @@
+@use "sass:math";
+
+$yma-border-utils: (
+  "border-collapse": (
+    "prefix": "bc",
+    "values": (
+      "c": collapse,
+      "s": separate,
+    ),
+  ),
+
+  "border-radius": (
+    "prefix": "rad",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+      "full": 100%,
+      "half": 50%,
+    ),
+  ),
+
+  "border-bottom-left-radius": (
+    "prefix": "rad-bl",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-bottom-right-radius": (
+    "prefix": "rad-br",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-left-radius": (
+    "prefix": "rad-tl",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-top-right-radius": (
+    "prefix": "rad-tr",
+    "values": (
+      "0": $yma-border-radius * 0,
+      "1": $yma-border-radius,
+      "2": $yma-border-radius * 2,
+      "3": $yma-border-radius * 3,
+      "4": $yma-border-radius * 4,
+      "5": $yma-border-radius * 5,
+      "6": $yma-border-radius * 6,
+      "7": $yma-border-radius * 7,
+      "8": $yma-border-radius * 8,
+    ),
+  ),
+
+  "border-style": (
+    "prefix": "b",
+    "values": (
+      "none": none,
+      "d": dashed,
+      "s": solid,
+    ),
+  ),
+
+  "border-width": (
+    "prefix": "b",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-bottom-width": (
+    "prefix": "bb",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-left-width": (
+    "prefix": "bl",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-right-width": (
+    "prefix": "br",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+
+  "border-top-width": (
+    "prefix": "bt",
+    "values": (
+      "0": $yma-border * 0,
+      "1": $yma-border,
+      "2": $yma-border * 2,
+      "3": $yma-border * 3,
+      "4": $yma-border * 4,
+      "5": $yma-border * 5,
+      "6": $yma-border * 6,
+      "7": $yma-border * 7,
+      "8": $yma-border * 8,
+    ),
+  ),
+);
+
+// base variants
+@each $property, $map in $yma-border-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;
+        }
+      }
+    }
+  }
+}