yummacss 3.0.2 → 3.1.0

package/README.md

@@ -1,66 +1,66 @@
-# [@yummacss](https://www.npmjs.com/package/yummacss)
-
-A CSS framework for the web with abbreviated styles.
-
-[![NPM Version](https://img.shields.io/npm/v/yummacss?style=plastic&label=yummacss&labelColor=eaedfc&color=413cb8)](https://www.npmjs.com/package/yummacss)
-[![NPM Downloads](https://img.shields.io/npm/d18m/yummacss?style=plastic&label=downloads&labelColor=eaedfc&color=413cb8)](https://www.npmjs.com/package/yummacss)
-
-## Getting started
-
-Yumma CSS is a CSS framework packed with a set of abbreviated utility classes for building faster and more maintainable UIs.
-
-### Installing
-
-A step by step series of examples that tell you how to get a development
-environment running
-
-Install Yumma CSS
-
-```
-npm i yummacss -D
-```
-
-Initialize configuration
-
-```
-npx yummacss init
-```
-
-Our [framework guides](https://www.yummacss.com/docs/installation#framework-guides) will teach you how to set up your configuration file.
-
-## Development setup
-
-The Yumma CSS CLI provides several commands to help you work with your Yumma CSS files.
-
-> [!IMPORTANT]  
-> Make sure you have a `yumma.config.js` file set up before running these commands. If you haven’t, run `npx yummacss init` first.
-
-### Building styles
-
-The `build` command will compile your Yumma CSS files once.
-
-```bash
-npx yummacss build
-```
-
-### Watching changes
-
-The `watch` command will watch for changes in your Yumma CSS files and recompile them automatically.
-
-```bash
-npx yummacss watch
-```
-
-## Documentation
-
-Head over to [yummacss.com](https://www.yummacss.com) for the full documentation.
-
-## Built with
-
-- [gulp](https://www.npmjs.com/package/gulp) - The streaming build system.
-- [sass](https://www.npmjs.com/package/sass) - CSS with superpowers.
-- [typescript](https://www.npmjs.com/package/typescript) - A language for application-scale JavaScript.
-
-## License
-
-This project is licensed under the [MIT License](LICENSE)
+# [@yummacss](https://www.npmjs.com/package/yummacss)
+
+A CSS framework for the web with abbreviated styles.
+
+[![NPM Version](https://img.shields.io/npm/v/yummacss?style=plastic&label=yummacss&labelColor=eaedfc&color=413cb8)](https://www.npmjs.com/package/yummacss)
+[![NPM Downloads](https://img.shields.io/npm/d18m/yummacss?style=plastic&label=downloads&labelColor=eaedfc&color=413cb8)](https://www.npmjs.com/package/yummacss)
+
+## Getting started
+
+Yumma CSS is a CSS framework packed with a set of abbreviated utility classes for building faster and more maintainable UIs.
+
+### Installing
+
+A step by step series of examples that tell you how to get a development
+environment running
+
+Install Yumma CSS
+
+```
+npm i yummacss -D
+```
+
+Initialize configuration
+
+```
+npx yummacss init
+```
+
+Our [framework guides](https://www.yummacss.com/docs/installation#framework-guides) will teach you how to set up your configuration file.
+
+## Development setup
+
+The Yumma CSS CLI provides several commands to help you work with your Yumma CSS files.
+
+> [!IMPORTANT]  
+> Make sure you have a `yumma.config.js` file set up before running these commands. If you haven’t, run `npx yummacss init` first.
+
+### Building styles
+
+The `build` command will compile your Yumma CSS files once.
+
+```bash
+npx yummacss build
+```
+
+### Watching changes
+
+The `watch` command will watch for changes in your Yumma CSS files and recompile them automatically.
+
+```bash
+npx yummacss watch
+```
+
+## Documentation
+
+Head over to [yummacss.com](https://www.yummacss.com) for the full documentation.
+
+## Built with
+
+- [sass-embedded](https://www.npmjs.com/package/sass-embedded)
+- [lightningcss](https://www.npmjs.com/package/lightningcss)
+- [typescript](https://www.npmjs.com/package/typescript)
+
+## License
+
+This project is licensed under the [MIT License](LICENSE)

package/dist/cli/commands/init.js

@@ -1,14 +1,12 @@
 import { writeFileSync } from "fs";
-import { generateConfigFile } from "../config/templates.js";
+import { defaultConfig } from "../config/defaultConfig.js";
 import { messages } from "../lib/cli-lang.js";
 import { cli } from "../lib/cli-ui.js";
-const DEFAULT_CONFIG_EXTENSION = ".js";
 export function init() {
     const init = cli.startSpinner(messages.init.start);
     try {
-        const configContent = generateConfigFile(DEFAULT_CONFIG_EXTENSION);
-        const configFileName = `yumma.config${DEFAULT_CONFIG_EXTENSION}`;
-        writeFileSync(configFileName, configContent);
+        const configContent = `export default ${JSON.stringify(defaultConfig, null, 2)}`;
+        writeFileSync("yumma.config.js", configContent);
         init.succeed(messages.init.success);
     }
     catch (error) {

package/dist/cli/services/configLoader.js

@@ -1,36 +1,10 @@
-import { join, extname } from "path";
+import { join } from "path";
 import { pathToFileURL } from "url";
-import { existsSync } from "fs";
 import { defaultConfig } from "../config/defaultConfig.js";
-import { getSupportedExtensions } from "../config/templates.js";
-const CONFIG_BASE = "yumma.config";
-const SUPPORTED_EXTENSIONS = getSupportedExtensions();
-const EXTENSION_LOADERS = {
-    ".js": async (path) => {
-        const configUrl = pathToFileURL(path).href;
-        return (await import(configUrl)).default;
-    },
-};
-function findConfigFile(cwd) {
-    for (const ext of SUPPORTED_EXTENSIONS) {
-        const file = join(cwd, `${CONFIG_BASE}${ext}`);
-        if (existsSync(file))
-            return file;
-    }
-    return null;
-}
 export async function loadConfig() {
-    const cwd = process.cwd();
-    const configPath = findConfigFile(cwd);
-    if (!configPath) {
-        throw new Error(`No config file found. Supported: ${CONFIG_BASE}${SUPPORTED_EXTENSIONS.join(", ")}`);
-    }
-    const ext = extname(configPath);
-    const loader = EXTENSION_LOADERS[ext];
-    if (!loader) {
-        throw new Error(`Unsupported config file extension: ${ext}`);
-    }
-    const userConfig = await loader(configPath);
+    const configPath = join(process.cwd(), "yumma.config.js");
+    const configUrl = pathToFileURL(configPath).href;
+    const { default: userConfig } = (await import(configUrl));
     return {
         ...defaultConfig,
         ...userConfig,

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "yummacss",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "description": "A CSS framework for the web with abbreviated styles.",
   "keywords": [
     "css-framework",
     "css",
     "design-system",
     "framework",
-    "gulp",
     "lightningcss",
     "responsive-design",
     "responsive",
     "scss",
+    "typescript",
     "yummacss"
   ],
   "homepage": "https://yummacss.com",
@@ -35,12 +35,11 @@
     "url": "git+https://github.com/yumma-lib/yumma-css.git"
   },
   "scripts": {
-    "build:cli": "tsc -p tsconfig.cli.json",
-    "build:css": "gulp build",
-    "build": "pnpm build:css && pnpm build:cli",
+    "build": "tsc -p tsconfig.cli.json",
     "dev": "tsc -p tsconfig.cli.json --watch",
     "format:cli": "pnpx prettier --write cli",
-    "prepublishOnly": "pnpm build:cli"
+    "format": "pnpx prettier --write .",
+    "prepublishOnly": "pnpm build"
   },
   "dependencies": {
     "chokidar": "^4.0.3",
@@ -54,12 +53,6 @@
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.5.1",
     "@types/node": "^22.13.10",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-debug": "^5.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^6.0.0",
-    "gulp": "^5.0.0",
-    "sass": "^1.85.1",
     "typescript": "^5.8.2"
   }
-}
+}

package/src/_fonts.scss

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

package/src/abstracts/_breakpoints.scss

@@ -1,45 +1,45 @@
-@use "sass:map";
-
-$yma-breakpoints: (
-  "sm": 40rem,
-  "md": 48rem,
-  "lg": 64rem,
-  "xl": 80rem,
-  "xxl": 96rem,
-);
-
-@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;
-  }
-}
+@use "sass:map";
+
+$yma-breakpoints: (
+  "sm": 40rem,
+  "md": 48rem,
+  "lg": 64rem,
+  "xl": 80rem,
+  "xxl": 96rem,
+);
+
+@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/_index.scss

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

package/src/abstracts/_theme.scss

@@ -1,21 +1,21 @@
-@use "sass:map";
-@use "variables" as vars;
-
-$yma-theme: (
-  "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,
-);
+@use "sass:map";
+@use "variables" as vars;
+
+$yma-theme: (
+  "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,82 +1,83 @@
-// 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;
-
-// border
-$yma-border: 1px !default;
-$yma-border-radius: 0.25rem !default;
-$yma-border-spacing: 0.25rem !default;
-
-// box model
-$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;
-
-$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;
-
-$yma-grayscale: 10% !default;
-
-// flexbox
-$yma-flex-basis: 0.25rem !default;
-
-// grid
-$yma-gap: 0.25rem !default;
-$yma-column-gap: 0.25rem !default;
-$yma-row-gap: 0.25rem !default;
-
-// outline
-$yma-outline-offset: 1px !default;
-$yma-outline-width: 1px !default;
-
-// positioning
-$yma-bottom-left-top-right: 0.25rem !default;
-
-// text
-$yma-decoration-thickness: 1px !default;
-
-// font
-$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, "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;
+// color
+$yma-color-red: #d73d3d !default;
+$yma-color-orange: #e06814 !default;
+$yma-color-yellow: #d3a107 !default;
+$yma-color-green: #1fb155 !default;
+$yma-color-teal: #12a695 !default;
+$yma-color-cyan: #05a4bf !default;
+$yma-color-blue: #3575dd !default;
+$yma-color-indigo: #595cd9 !default;
+$yma-color-violet: #7d53dd !default;
+$yma-color-pink: #d4418a !default;
+$yma-color-lead: #3f3f4e !default;
+$yma-color-gray: #606773 !default;
+$yma-color-silver: #bfc2c7 !default;
+$yma-color-black: black !default;
+$yma-color-white: white !default;
+$yma-color-transparent: transparent !default;
+
+// border
+$yma-border: 1px !default;
+$yma-border-radius: 0.25rem !default;
+$yma-border-spacing: 0.25rem !default;
+
+// box model
+$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;
+
+$yma-box-shadow-lg: 1px 3px 5px 1px #0000001a !default;
+$yma-box-shadow-md: 1px 3px 5px -1px #0000001a !default;
+$yma-box-shadow-sm: 1px 3px 5px -2px #0000001a !default;
+$yma-box-shadow-xl: 1px 3px 5px 2px #0000001a !default;
+$yma-box-shadow-xs: 1px 3px 5px -3px #0000001a !default;
+
+$yma-grayscale: 10% !default;
+
+// flexbox
+$yma-flex-basis: 0.25rem !default;
+
+// grid
+$yma-gap: 0.25rem !default;
+$yma-column-gap: 0.25rem !default;
+$yma-row-gap: 0.25rem !default;
+
+// outline
+$yma-outline-offset: 1px !default;
+$yma-outline-width: 1px !default;
+
+// positioning
+$yma-bottom-left-top-right: 0.25rem !default;
+
+// text
+$yma-decoration-thickness: 1px !default;
+
+// font
+$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, "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

@@ -1,16 +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;
-}
+@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

@@ -1,9 +1,7 @@
-@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");
-}
+@use "../theme" as *;
+@use "sass:map";
+
+@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

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