yummacss 1.2.0 → 2.1.0

package/gulpfile.js

@@ -1,28 +1,44 @@
-const { src, dest, watch, series } = require('gulp');
-const sass = require('gulp-sass')(require('sass'));
-const clean = require('gulp-clean-css');
-const rename = require('gulp-rename');
+const { src, dest, series } = require("gulp");
+const sass = require("gulp-sass")(require("sass"));
+const clean = require("gulp-clean-css");
+const rename = require("gulp-rename");
 
 function standardFile() {
-    return src('yumma-css/**/*.scss')
-        .pipe(sass())
-        .pipe(rename('yumma.css'))
-        .pipe(dest('dist'));
+  return src("src/**/*.scss")
+    .pipe(sass().on("error", sass.logError))
+    .pipe(rename("yumma.css"))
+    .pipe(dest("dist"));
 }
 
 function minifiedFile() {
-    return src('dist/yumma.css')
-        .pipe(clean())
-        .pipe(rename({ suffix: '.min' }))
-        .pipe(dest('dist'));
+  return src("dist/yumma.css")
+    .pipe(clean())
+    .pipe(rename({ suffix: ".min" }))
+    .pipe(dest("dist"));
 }
 
-function watchFiles() {
-    watch(['yumma-css/**/*.scss', '*.html'], series(standardFile, minifiedFile));
+function coreFile() {
+  return src("src/core.scss")
+    .pipe(sass().on("error", sass.logError))
+    .pipe(rename("yumma-core.css"))
+    .pipe(dest("dist"));
+}
+
+function minifiedCoreFile() {
+  return src("dist/yumma-core.css")
+    .pipe(clean())
+    .pipe(rename({ suffix: ".min" }))
+    .pipe(dest("dist"));
 }
 
 exports.standardFile = standardFile;
 exports.minifiedFile = minifiedFile;
-exports.watch = watchFiles;
+exports.coreFile = coreFile;
+exports.minifiedCoreFile = minifiedCoreFile;
 
-exports.default = series(standardFile, minifiedFile, watchFiles);
+exports.default = series(
+  standardFile,
+  minifiedFile,
+  coreFile,
+  minifiedCoreFile
+);

package/package.json

@@ -1,32 +1,24 @@
 {
-  "name": "yummacss",
-  "version": "1.2.0",
-  "description": "Build beautiful websites with small class names.",
-  "main": "index.js",
-  "style": "dist/yumma.css",
   "author": "Renildo Pereira",
-  "keywords": [
-    "css",
-    "css library",
-    "customization"
-  ],
+  "description": "Quickly build applications with less code in your markup.",
   "license": "MIT",
-  "homepage": "https://yummacss.com",
-  "bugs": {
-    "url": "https://github.com/yumma-lib/yumma-css/issues"
-  },
-  "scripts": {
-    "std": "gulp standardFile",
-    "min": "gulp minifiedFile",
-    "watch": "gulp watchFiles"
-  },
+  "name": "yummacss",
+  "version": "2.1.0",
   "devDependencies": {
-    "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
     "gulp-copy": "^4.0.1",
-    "gulp-purgecss": "^5.0.0",
+    "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"
   }
 }

package/src/_base.scss

@@ -0,0 +1,72 @@
+$base: true !default;
+
+@if $base {
+  *,
+  *::before,
+  *::after {
+    border-style: solid;
+    border-width: 0;
+    box-sizing: border-box;
+  }
+
+  * {
+    color: inherit;
+    font-family: $yma-font-system;
+    margin: 0;
+  }
+
+  body {
+    font-family: inherit;
+    line-height: 1.5;
+  }
+
+  canvas,
+  img,
+  picture,
+  svg,
+  video {
+    display: block;
+    max-width: 100%;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    background-color: $yma-color-transparent;
+    font: inherit;
+  }
+
+  button {
+    cursor: pointer;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    font-size: inherit;
+    font-weight: inherit;
+    overflow-wrap: break-word;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  ol,
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  hr {
+    border-top: $yma-color-transparent;
+    border: 0;
+    margin: 1em 0;
+  }
+}

package/src/_fonts.scss

@@ -0,0 +1,14 @@
+.ff-c {
+  font-family: $yma-font-charter;
+  font-weight: $yma-font-weight;
+}
+
+.ff-m {
+  font-family: $yma-font-mono;
+  font-weight: $yma-font-weight;
+}
+
+.ff-s {
+  font-family: $yma-font-system;
+  font-weight: $yma-font-weight;
+}

package/src/abstracts/_breakpoints.scss

@@ -0,0 +1,43 @@
+$yma-breakpoints: (
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "xxl": 1536px,
+);
+
+@mixin sm {
+  @media (min-width: map-get($yma-breakpoints, "sm")) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media (min-width: map-get($yma-breakpoints, "md")) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media (min-width: map-get($yma-breakpoints, "lg")) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media (min-width: map-get($yma-breakpoints, "xl")) {
+    @content;
+  }
+}
+
+@mixin xxl {
+  @media (min-width: map-get($yma-breakpoints, "xxl")) {
+    @content;
+  }
+}
+
+@mixin breakpoint($bp) {
+  @media (min-width: $bp) {
+    @content;
+  }
+}

package/src/abstracts/_colors.scss

@@ -0,0 +1,29 @@
+@import "mixins";
+
+@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);
+  @include color-variants("border-color", "bc", $k, $v);
+  @include color-variants("border-left-color", "bc-l", $k, $v);
+  @include color-variants("border-right-color", "bc-r", $k, $v);
+  @include color-variants("border-top-color", "bc-t", $k, $v);
+  @include color-variants("caret-color", "cc", $k, $v);
+  @include color-variants("color", "tc", $k, $v);
+  @include color-variants("outline-color", "oc", $k, $v);
+  @include color-variants("text-decoration-color", "tdc", $k, $v);
+
+  @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%);
+    @include shade-variants("border-color", "bc", $k, $v, 10%);
+    @include shade-variants("border-left-color", "bc-l", $k, $v, 10%);
+    @include shade-variants("border-right-color", "bc-r", $k, $v, 10%);
+    @include shade-variants("border-top-color", "bc-t", $k, $v, 10%);
+    @include shade-variants("caret-color", "cc", $k, $v, 10%);
+    @include shade-variants("color", "tc", $k, $v, 10%);
+    @include shade-variants("outline-color", "oc", $k, $v, 10%);
+    @include shade-variants("text-decoration-color", "tdc", $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

@@ -0,0 +1,3 @@
+@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/_layout.scss

@@ -0,0 +1,18 @@
+@import "mixins";
+@import "breakpoints";
+
+.cnt {
+  width: 100%;
+
+  @each $bp, $bp-value in $yma-breakpoints {
+    @include breakpoint($bp-value) {
+      max-width: $bp-value;
+    }
+  }
+}
+
+.ins {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}