yummacss 2.1.0 → 3.0.0

package/package.json

@@ -1,24 +1,50 @@
-{
-  "author": "Renildo Pereira",
-  "description": "Quickly build applications with less code in your markup.",
-  "license": "MIT",
-  "name": "yummacss",
-  "version": "2.1.0",
-  "devDependencies": {
-    "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"
-  },
-  "scripts": {
-    "build": "npm-run-all --sequential std min core mincore",
-    "core": "gulp coreFile",
-    "min": "gulp minifiedFile",
-    "mincore": "gulp minifiedCoreFile",
-    "std": "gulp standardFile"
-  }
-}
+{
+  "author": "Renildo Pereira",
+  "description": "The CSS framework with abbreviated styles.",
+  "license": "MIT",
+  "main": "./dist/cli/index.js",
+  "name": "yummacss",
+  "type": "module",
+  "version": "3.0.0",
+  "bin": {
+    "yummacss": "./dist/cli/src/cli.js",
+    "yumma": "./dist/cli/src/cli.js"
+  },
+  "exports": {
+    ".": "./dist/cli/src/cli.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "gulp build",
+    "build:css": "gulp build",
+    "build:cli": "tsc -p tsconfig.cli.json",
+    "dev": "tsc -p tsconfig.cli.json --watch",
+    "prepublishOnly": "pnpm build:cli"
+  },
+  "keywords": [
+    "utility-first",
+    "framework"
+  ],
+  "dependencies": {
+    "chokidar": "^4.0.3",
+    "commander": "^13.1.0",
+    "globby": "^14.1.0",
+    "lightningcss": "^1.29.3",
+    "ora": "^8.2.0",
+    "purgecss": "^7.0.2",
+    "sass-embedded": "^1.85.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.10",
+    "gulp": "^5.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-debug": "^5.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^6.0.0",
+    "sass": "^1.85.1",
+    "typescript": "^5.8.2"
+  }
+}

package/src/_fonts.scss

@@ -1,14 +1,16 @@
+@use "abstracts/variables" as vars;
+
 .ff-c {
-  font-family: $yma-font-charter;
-  font-weight: $yma-font-weight;
+  font-family: vars.$yma-font-charter;
+  font-weight: vars.$yma-font-weight;
 }
 
 .ff-m {
-  font-family: $yma-font-mono;
-  font-weight: $yma-font-weight;
+  font-family: vars.$yma-font-mono;
+  font-weight: vars.$yma-font-weight;
 }
 
 .ff-s {
-  font-family: $yma-font-system;
-  font-weight: $yma-font-weight;
+  font-family: vars.$yma-font-system;
+  font-weight: vars.$yma-font-weight;
 }

package/src/abstracts/_breakpoints.scss

@@ -1,37 +1,39 @@
+@use "sass:map";
+
 $yma-breakpoints: (
-  "sm": 640px,
-  "md": 768px,
-  "lg": 1024px,
-  "xl": 1280px,
-  "xxl": 1536px,
+  "sm": 40rem,
+  "md": 48rem,
+  "lg": 64rem,
+  "xl": 80rem,
+  "xxl": 96rem,
 );
 
 @mixin sm {
-  @media (min-width: map-get($yma-breakpoints, "sm")) {
+  @media (min-width: map.get($yma-breakpoints, "sm")) {
     @content;
   }
 }
 
 @mixin md {
-  @media (min-width: map-get($yma-breakpoints, "md")) {
+  @media (min-width: map.get($yma-breakpoints, "md")) {
     @content;
   }
 }
 
 @mixin lg {
-  @media (min-width: map-get($yma-breakpoints, "lg")) {
+  @media (min-width: map.get($yma-breakpoints, "lg")) {
     @content;
   }
 }
 
 @mixin xl {
-  @media (min-width: map-get($yma-breakpoints, "xl")) {
+  @media (min-width: map.get($yma-breakpoints, "xl")) {
     @content;
   }
 }
 
 @mixin xxl {
-  @media (min-width: map-get($yma-breakpoints, "xxl")) {
+  @media (min-width: map.get($yma-breakpoints, "xxl")) {
     @content;
   }
 }

package/src/abstracts/_index.scss

@@ -0,0 +1,5 @@
+@forward "functions";
+@forward "variables";
+@forward "breakpoints";
+@forward "mixins";
+@forward "theme";

package/src/abstracts/_theme.scss

@@ -1,18 +1,21 @@
+@use "sass:map";
+@use "variables" as vars;
+
 $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,
+  "red": vars.$yma-color-red,
+  "orange": vars.$yma-color-orange,
+  "yellow": vars.$yma-color-yellow,
+  "green": vars.$yma-color-green,
+  "teal": vars.$yma-color-teal,
+  "cyan": vars.$yma-color-cyan,
+  "blue": vars.$yma-color-blue,
+  "indigo": vars.$yma-color-indigo,
+  "violet": vars.$yma-color-violet,
+  "pink": vars.$yma-color-pink,
+  "silver": vars.$yma-color-silver,
+  "gray": vars.$yma-color-gray,
+  "lead": vars.$yma-color-lead,
+  "black": vars.$yma-color-black,
+  "white": vars.$yma-color-white,
+  "transparent": vars.$yma-color-transparent,
 );

package/src/abstracts/_variables.scss

@@ -1,68 +1,81 @@
-// base colors
-$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;
+// color
+$yma-color-red: rgb(215, 61, 61) !default;
+$yma-color-orange: rgb(224, 104, 20) !default;
+$yma-color-yellow: rgb(211, 161, 7) !default;
+$yma-color-green: rgb(31, 177, 85) !default;
+$yma-color-teal: rgb(18, 166, 149) !default;
+$yma-color-cyan: rgb(5, 164, 191) !default;
+$yma-color-blue: rgb(53, 117, 221) !default;
+$yma-color-indigo: rgb(89, 92, 217) !default;
+$yma-color-violet: rgb(125, 83, 221) !default;
+$yma-color-pink: rgb(212, 65, 138) !default;
+$yma-color-lead: rgb(63, 63, 78) !default;
+$yma-color-gray: rgb(96, 103, 115) !default;
+$yma-color-silver: rgb(191, 194, 199) !default;
+$yma-color-black: black !default;
+$yma-color-white: white !default;
+$yma-color-transparent: transparent !default;
 
-// borders
-$yma-border: 1px;
-$yma-border-radius: 0.25rem;
-
-// outlines
-$yma-outline-offset: 1px;
-$yma-outline-width: 1px;
-$yma-decoration-thickness: 1px;
+// border
+$yma-border: 1px !default;
+$yma-border-radius: 0.25rem !default;
+$yma-border-spacing: 0.25rem !default;
 
 // box model
-$yma-height: 0.25rem;
-$yma-width: 0.25rem;
-$yma-padding: 0.25rem;
-$yma-margin: 0.25rem;
-$yma-spacing: 0.25rem;
+$yma-dimension: 0.25rem !default;
+$yma-height: 0.25rem !default;
+$yma-width: 0.25rem !default;
+$yma-padding: 0.25rem !default;
+$yma-margin: 0.25rem !default;
+$yma-spacing: 0.25rem !default;
+
+// effect
+$yma-backdrop-blur: 4px !default;
+
+$yma-blur: 4px !default;
 
-// effects
-$yma-backdrop-blur: 4px;
+$yma-box-shadow-lg: 1px 3px 5px 1px rgb(0, 0, 0, 0.1) !default;
+$yma-box-shadow-md: 1px 3px 5px -1px rgb(0, 0, 0, 0.1) !default;
+$yma-box-shadow-sm: 1px 3px 5px -2px rgb(0, 0, 0, 0.1) !default;
+$yma-box-shadow-xl: 1px 3px 5px 2px rgb(0, 0, 0, 0.1) !default;
+$yma-box-shadow-xs: 1px 3px 5px -3px rgb(0, 0, 0, 0.1) !default;
 
-// filters
-$yma-box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
+$yma-grayscale: 10% !default;
 
 // flexbox
-$yma-flex-basis: 0.25rem;
+$yma-flex-basis: 0.25rem !default;
 
 // grid
-$yma-gap: 0.25rem;
-$yma-column-gap: 0.25rem;
-$yma-row-gap: 0.25rem;
+$yma-gap: 0.25rem !default;
+$yma-column-gap: 0.25rem !default;
+$yma-row-gap: 0.25rem !default;
 
-// layout
-$yma-direction: 0.25;
+// outline
+$yma-outline-offset: 1px !default;
+$yma-outline-width: 1px !default;
+
+// positioning
+$yma-bottom-left-top-right: 0.25rem !default;
 
 // typography
-$yma-font-size: 0.75rem;
-$yma-font-weight: 500;
-$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-decoration-thickness: 1px !default;
+
+$yma-font-size-xs: 0.75rem !default;
+$yma-font-size-sm: 0.875rem !default;
+$yma-font-size-md: 1rem !default;
+$yma-font-size-lg: 1.125rem !default;
+$yma-font-size-xl: 1.25rem !default;
+$yma-font-size-2xl: 1.5rem !default;
+$yma-font-size-3xl: 1.875rem !default;
+$yma-font-size-4xl: 2.25rem !default;
+$yma-font-size-5xl: 3rem !default;
+$yma-font-size-6xl: 3.75rem !default;
+$yma-font-size-7xl: 4.5rem !default;
+$yma-font-size-8xl: 6rem !default;
+$yma-font-size-9xl: 8rem !default;
+
+$yma-font-weight: 500 !default;
 
-$yma-font-charter: Charter, Cambria, serif;
-$yma-font-mono: ui-monospace, Consolas, monospace;
-$yma-font-system: system-ui, sans-serif;
+$yma-font-charter: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
+$yma-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
+$yma-font-system: system-ui, sans-serif !default;

package/src/abstracts/functions/_create-values.scss

@@ -0,0 +1,16 @@
+@use "sass:map";
+
+@function create-values($variable, $min: 0, $max: 100) {
+  $values: ();
+
+  @for $i from $min through $max {
+    $values: map.merge(
+      $values,
+      (
+        "#{$i}": $variable * $i,
+      )
+    );
+  }
+
+  @return $values;
+}

package/src/abstracts/functions/_ignore-neutral.scss

@@ -0,0 +1,9 @@
+@use "../theme" as *;
+@use "sass:map";
+
+// prettier-ignore
+@function ignore-neutral($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/functions/_index.scss

@@ -0,0 +1,2 @@
+@forward "ignore-neutral";
+@forward "create-values";

package/src/abstracts/mixins/_create-colors.scss

@@ -0,0 +1,39 @@
+@use "sass:color";
+
+@mixin mod-color-scaling($property, $prefix, $k, $v) {
+  .#{$prefix}-#{$k} {
+    #{$property}: $v;
+  }
+
+  .h\:#{$prefix}-#{$k} {
+    &:hover {
+      #{$property}: $v;
+    }
+  }
+}
+
+@mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
+  @for $i from 1 through 13 {
+    @if $i <= 6 {
+      .#{$prefix}-#{$k}-#{$i} {
+        #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+      }
+
+      .h\:#{$prefix}-#{$k}-#{$i} {
+        &:hover {
+          #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
+        }
+      }
+    } @else if $i > 7 {
+      .#{$prefix}-#{$k}-#{$i - 1} {
+        #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+      }
+
+      .h\:#{$prefix}-#{$k}-#{$i - 1} {
+        &:hover {
+          #{$property}: color.mix(black, $v, ($i - 7) * $percentage);
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_create-utilities.scss

@@ -0,0 +1,39 @@
+@use "../breakpoints" as bp;
+@use "sass:map";
+
+@mixin create-utilities($map, $prefix, $properties) {
+  $function: if(
+    map.has-key($map, "property-function"),
+    map.get($map, "property-function"),
+    null
+  );
+
+  // base styles
+  @each $k, $v in map.get($map, "values") {
+    .#{$prefix}-#{$k} {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+
+    // hover styles
+    .h\:#{$prefix}-#{$k}:hover {
+      @each $property in $properties {
+        #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+      }
+    }
+  }
+
+  // responsive styles
+  @each $bp, $bp-value in bp.$yma-breakpoints {
+    @media (min-width: $bp-value) {
+      @each $k, $v in map.get($map, "values") {
+        .#{$bp}\:#{$prefix}-#{$k} {
+          @each $property in $properties {
+            #{$property}: if($function != null, $function + "(" + $v + ")", $v);
+          }
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_extend-utilities.scss

@@ -0,0 +1,24 @@
+@mixin extensions($map, $prefixes) {
+  @each $k, $v in $map {
+    @each $prefix, $property in $prefixes {
+      // base styles
+      .#{$prefix}-#{$k} {
+        #{$property}: $v;
+      }
+
+      // hover styles
+      .h\:#{$prefix}-#{$k}:hover {
+        #{$property}: $v;
+      }
+
+      @each $bp, $bp-value in $yma-breakpoints {
+        // responsive styles
+        .#{$bp}\:#{$prefix}-#{$k} {
+          @include breakpoint($bp-value) {
+            #{$property}: $v;
+          }
+        }
+      }
+    }
+  }
+}

package/src/abstracts/mixins/_index.scss

@@ -0,0 +1,3 @@
+@forward "create-colors";
+@forward "create-utilities";
+@forward "extend-utilities";