beathers 5.2.2 → 5.3.1

package/dist/scripts/types.d.ts

@@ -1,52 +1,90 @@
+/** CSS size unit values supporting px, rem, em, viewport units, and percentages */
 type SizeUnit = `${number}px` | `${number}rem` | `${number}em` | `${number}vw` | `${number}vh` | `${number}%`;
+/** Color configuration object with optional light and dark theme hex values */
 type ColorType = Record<string, {
-    light: `#${string}`;
-    dark: `#${string}`;
+    light?: `#${string}`;
+    dark?: `#${string}`;
 }>;
+/** Available font weight values from thin to black */
 type FontWeight = 'thin' | 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extra-bold' | 'black';
+/** Font style options for normal, italic, or oblique text */
 type FontStyle = 'normal' | 'italic' | 'oblique';
 interface FontVariant {
+    /** Display name for the font variant */
     title: string;
+    /** Unicode range for the font variant */
     unicode?: string;
+    /** Font file format. */
     format?: 'woff' | 'woff2';
+    /** Whether the font is locally installed. @default true */
     isLocal?: boolean;
+    /** Remote URL for downloading the font */
     url?: `https://${string}` | `http://${string}`;
 }
+/** Font configuration with weights, styles, and variants */
 type FontType = {
+    /** Available font weights for this font family */
     weights?: FontWeight[];
+    /** Available font styles for this font family */
     styles?: FontStyle[];
+    /** Named font variants with specific configurations */
     variants?: Record<string, FontVariant>;
 };
 interface Typography {
+    /** Default font families to use as fallbacks */
     defaultFontFamilies?: string[];
+    /** Base path for font files */
     fontMainPath?: string;
+    /** Default font format for all fonts. */
     fontFormat?: 'woff' | 'woff2';
+    /** Global font weights available across all fonts */
     fontWeights?: FontWeight[];
+    /** Global font styles available across all fonts */
     fontStyles?: FontStyle[];
+    /** Named font sizes mapped to CSS size units */
     fontSizes?: Record<string, SizeUnit>;
-    textTruncate?: number;
+    /** Line counts for text truncation utilities */
+    textTruncate?: number[];
+    /** Font family configurations */
     fonts?: Record<string, FontType>;
 }
 interface Settings {
+    /** Number of divisions for grid axis calculations. @default 12 */
     axisDivisions?: number;
+    /** Opacity values for transparency utilities (0-100 range) */
     opacities?: number[];
+    /** Blur values in pixels for filter utilities */
     blurValues?: number[];
+    /** Inset values for positioning utilities */
     insetValues?: number[];
-    bordersValue?: number;
+    /** Border width values in pixels */
+    bordersValue?: number[];
+    /** Border radius values in pixels */
     radiuses?: number[];
+    /** Responsive breakpoints for media queries */
     breakpoints?: Record<'null' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', 0 | SizeUnit>;
+    /** Container wrapper configurations for different breakpoints */
     wrappers?: Record<'null' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', {
         width: SizeUnit;
         padding?: SizeUnit;
     }>;
+    /** Gutter values for spacing utilities */
     guttersValues?: Record<'auto' | number, 'auto' | SizeUnit>;
 }
+/** Available feature keys for enabling/disabling CSS utilities */
 type RoleKeys = 'useMediaQueries' | 'useIcons' | 'useFontFamilies' | 'useFontSizes' | 'useFontShapes' | 'useTextAligns' | 'useTextTruncate' | 'useColors' | 'useColorsOpacities' | 'useColorsLightMode' | 'useColorsDarkMode' | 'useCurrentColors' | 'useRootColors' | 'useGrid' | 'useFlex' | 'useTransitions' | 'useWrappers' | 'useShadows' | 'useDisplays' | 'useOverflows' | 'useOpacities' | 'useBlur' | 'useObjectFits' | 'usePositions' | 'useInsets' | 'useSizes' | 'useGutters' | 'useBorders' | 'useTextBorders' | 'useRadius';
+/** Feature toggles for enabling/disabling CSS utility generation. @default all true */
 type Roles = Partial<Record<RoleKeys, boolean>>;
+/** Main theme configuration object containing all design system settings */
 interface Theme {
+    /** Color palette definitions with light/dark theme support */
     colors?: ColorType;
+    /** Typography settings including fonts, sizes, and weights */
     typography?: Typography;
+    /** Framework settings for grid, spacing, and responsive behavior */
     settings?: Settings;
+    /** Feature flags for controlling which CSS utilities are generated */
     roles?: Roles;
 }
 export type { SizeUnit, ColorType, FontWeight, FontStyle, FontVariant, FontType, Typography, Settings, RoleKeys, Roles, Theme, };
+//# sourceMappingURL=types.d.ts.map

package/dist/scripts/types.js

@@ -1 +1,2 @@
+// General Types
 export {};

package/package.json

@@ -1,80 +1,90 @@
-{
-  "name": "beathers",
-  "version": "5.2.2",
-  "type": "module",
-  "description": "Beather is a lightweight SCSS library that serves as a comprehensive design system for your projects. It offers a structured and consistent approach to manage colors, fonts, and other design related variables, making it easier to maintain a cohesive visual identity across your application.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "bin": {
-    "beathers": "dist/scripts/cli.js"
-  },
-  "scripts": {
-    "watch": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all build:expanded\"",
-    "build:compressed": "sass --style compressed --source-map --embed-sources --no-error-css src/scss/:dist/css/",
-    "build:expanded": "sass --style expanded --source-map --embed-sources --no-error-css src/scss/:dist/css/",
-    "build:user-configs": "tsx src/scripts/BuildTheme.ts",
-    "prepublish": "rimraf dist && tsc && pnpm build:compressed",
-    "lint": "eslint . && stylelint \"**/*.scss\"",
-    "format:check": "prettier --check --ignore-path .gitignore .",
-    "format:fix": "prettier --write --ignore-path .gitignore . && pnpm lint"
-  },
-  "keywords": [
-    "design-system",
-    "scss-library",
-    "css-framework",
-    "utility-first",
-    "responsive-design",
-    "dark-mode",
-    "light-mode",
-    "theming",
-    "css-variables",
-    "typography",
-    "flexbox",
-    "css-grid",
-    "media-queries",
-    "atomic-css",
-    "modular-css",
-    "frontend-framework",
-    "scalable-css",
-    "customizable-theme",
-    "component-library",
-    "ui-framework"
-  ],
-  "author": "Bhoenix studio",
-  "license": "MIT",
-  "homepage": "https://bhoenixstudio.com/beathers",
-  "dependencies": {
-    "fs-extra": "^11.3.0"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.26.0",
-    "@types/fs-extra": "^11.0.4",
-    "@types/node": "^22.15.21",
-    "@types/scss-parser": "^1.0.4",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.26.0",
-    "eslint-plugin-css": "^0.11.0",
-    "eslint-plugin-import": "^2.31.0",
-    "globals": "^16.1.0",
-    "nodemon": "^3.1.10",
-    "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.3",
-    "postcss-cli": "^11.0.1",
-    "postcss-scss": "^4.0.9",
-    "prettier": "^3.5.3",
-    "rimraf": "^6.0.1",
-    "sass": "^1.88.0",
-    "stylelint": "^16.19.1",
-    "stylelint-config-standard-scss": "^15.0.0",
-    "tsx": "^4.19.4",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.1"
-  },
-  "files": [
-    "dist/css/**/*.{css,map}",
-    "dist/**/*.{js,d.ts}",
-    "src/scss/**/*.scss",
-    "public/images/logo.png",
-    "readme.md"
-  ]
-}
+{
+  "name": "beathers",
+  "version": "5.3.1",
+  "type": "module",
+  "description": "Beather is a lightweight SCSS library that serves as a comprehensive design system for your projects. It offers a structured and consistent approach to manage colors, fonts, and other design related variables, making it easier to maintain a cohesive visual identity across your application.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "bin": {
+    "beathers": "dist/scripts/cli.js"
+  },
+  "scripts": {
+    "watch": "nodemon --watch src/scss/ --ext scss --exec \"npm-run-all build\"",
+    "build": "sass --style compressed --source-map --embed-sources --no-error-css src/scss/:dist/css/",
+    "build:test": "tsx src/scripts/cli.ts",
+    "build:publish": "rimraf dist && tsc && npm run build",
+    "lint": "eslint . && stylelint \"**/*.scss\"",
+    "lint:fix": "eslint . --fix && stylelint \"**/*.scss\" --fix",
+    "format:check": "prettier --check --ignore-path .gitignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore . && npm run lint"
+  },
+  "keywords": [
+    "design-system",
+    "scss-library",
+    "css-framework",
+    "utility-first",
+    "responsive-design",
+    "dark-mode",
+    "light-mode",
+    "theming",
+    "css-variables",
+    "typography",
+    "flexbox",
+    "css-grid",
+    "media-queries",
+    "atomic-css",
+    "modular-css",
+    "frontend-framework",
+    "scalable-css",
+    "customizable-theme",
+    "component-library",
+    "ui-framework"
+  ],
+  "author": "Bhoenix studio",
+  "license": "MIT",
+  "homepage": "https://bhoenixstudio.com/beathers",
+  "dependencies": {
+    "fs-extra": "^11.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.26.0",
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^22.15.21",
+    "@types/scss-parser": "^1.0.4",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.26.0",
+    "eslint-plugin-css": "^0.11.0",
+    "eslint-plugin-import": "^2.31.0",
+    "globals": "^16.1.0",
+    "nodemon": "^3.1.10",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.5.3",
+    "postcss-cli": "^11.0.1",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^3.5.3",
+    "rimraf": "^6.0.1",
+    "sass": "^1.88.0",
+    "stylelint": "^16.19.1",
+    "stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.0",
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.1"
+  },
+  "files": [
+    "dist/css/**/*.{css,map}",
+    "dist/**/*.{js,d.ts}",
+    "src/scss/**/*.scss",
+    "public/images/logo.png",
+    "CHANGELOG",
+    "readme.md"
+  ]
+}

package/readme.md

@@ -5,8 +5,9 @@
 
 [![Version](https://img.shields.io/npm/v/beathers.svg)](https://www.npmjs.com/package/beathers)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Changelog](https://img.shields.io/badge/Changelog-See%20Changes-orange?style=flat&logo=github)](CHANGELOG)
 
-Beathers is a lightweight, powerful SCSS library designed to accelerate your web development workflow. **Everything is fully customizable** through a simple configuration file, allowing you to tailor every aspect to match your brand and requirements. It offers a comprehensive suite of SCSS mixins, variables, and utility classes, enabling you to build responsive, visually appealing web applications with complete design control.
+Beathers is a lightweight, powerful SCSS library designed to accelerate your web development workflow.**Everything is fully customizable** through a simple configuration file, allowing you to tailor every aspect to match your brand and requirements. It offers a comprehensive suite of SCSS mixins, variables, and utility classes, enabling you to build responsive, visually appealing web applications with complete design control.
 
 ## Get Started
 
@@ -42,6 +43,34 @@ Generate your custom CSS from the configuration:
 npx beathers build
 ```
 
+### CLI Commands
+
+Beathers provides a comprehensive set of CLI commands to manage your design system:
+
+#### Configuration
+
+- `npx beathers init` - Initialize a new configuration file
+- `npx beathers build` - Build theme from configuration
+- `npx beathers build --local` - Build with custom output path
+
+#### Font Management
+
+- `npx beathers add-font` - Add a new font to your configuration
+- `npx beathers remove-font` - Remove a font from your configuration
+- `npx beathers import-font-sample` - Import a sample font configuration
+
+#### Color Management
+
+- `npx beathers add-colors` - Add new colors to your configuration
+- `npx beathers remove-color` - Remove a color from your configuration
+- `npx beathers import-color-pack` - Import a complete color pack from available packs
+- `npx beathers import-color` - Import a specific color from available packs
+
+#### Help & Information
+
+- `npx beathers --help` - Show all available commands
+- `npx beathers --version` - Show current version
+
 ### Import in Your Project
 
 **CSS Import (Recommended):**

package/src/scss/_variables.scss

@@ -1,305 +1 @@
-// Generated by BuildTheme.ts
- // Do not edit this file directly
-
-
-
-// --- Colors ---
-$colors: (
-"main": (
-"light": #ffffff,
-"dark": #1a1d21,
-),
-"second": (
-"light": #f8f8ff,
-"dark": #2e2e3f,
-),
-"third": (
-"light": #ebecf7,
-"dark": #39394a,
-),
-"t1": (
-"light": #303030,
-"dark": #fafafa,
-),
-"t2": (
-"light": #404040,
-"dark": #f5f5f5,
-),
-"t3": (
-"light": #404040,
-"dark": #f5f5f5,
-),
-"d1": (
-"light": #505050,
-"dark": #dfdfdf,
-),
-"d2": (
-"light": #808080,
-"dark": #bdbdbd,
-),
-"d3": (
-"light": #909090,
-"dark": #9e9e9e,
-),
-"success": (
-"light": #099750,
-"dark": #5ff2a9,
-),
-"primary": (
-"light": #2a6e9f,
-"dark": #89c5f0,
-),
-"secondary": (
-"light": #545454,
-"dark": #c6c3c3,
-),
-"danger": (
-"light": #b5333b,
-"dark": #ee6b74,
-),
-"warning": (
-"light": #ca9420,
-"dark": #fcd06f,
-),
-"info": (
-"light": #0c8181,
-"dark": #49d1d1,
-),
-"facebook": (
-"light": #3b5998,
-"dark": #3b5998,
-),
-"messenger": (
-"light": #006aff,
-"dark": #006aff,
-),
-"whatsapp": (
-"light": #25d366,
-"dark": #25d366,
-),
-"instagram": (
-"light": #3f729b,
-"dark": #3f729b,
-),
-"google": (
-"light": #4285f4,
-"dark": #4285f4,
-),
-"signal": (
-"light": #2190e8,
-"dark": #2190e8,
-),
-"twitter": (
-"light": #00acee,
-"dark": #00acee,
-),
-"telegram": (
-"light": #0088cc,
-"dark": #0088cc,
-),
-"youtube": (
-"light": #ff0000,
-"dark": #ff0000,
-),
-"linkedin": (
-"light": #0077b5,
-"dark": #0077b5,
-),
-"behance": (
-"light": #053eff,
-"dark": #053eff,
-),
-"github": (
-"light": #171515,
-"dark": #171515,
-),
-"gitlab": (
-"light": #fca326,
-"dark": #fca326,
-),
-"wechat": (
-"light": #09b83e,
-"dark": #09b83e,
-),
-"tiktok": (
-"light": #ff0050,
-"dark": #ff0050,
-),
-"snapchat": (
-"light": #fffc00,
-"dark": #fffc00,
-),
-"pinterest": (
-"light": #e60023,
-"dark": #e60023,
-),
-"reddit": (
-"light": #ff4500,
-"dark": #ff4500,
-),
-"teams": (
-"light": #464eb8,
-"dark": #464eb8,
-),
-"twitch": (
-"light": #6441a5,
-"dark": #6441a5,
-),
-"dribbble": (
-"light": #ea4c89,
-"dark": #ea4c89,
-),
-"custom-1": (
-"light": #4289c7,
-"dark": #75b0e4,
-),
-"custom-2": (
-"light": #39c2cb,
-"dark": #79e2e9,
-),
-"custom-3": (
-"light": #36c07e,
-"dark": #86f3be,
-),
-"custom-4": (
-"light": #a84fd1,
-"dark": #cd87ee,
-),
-"custom-5": (
-"light": #df4f60,
-"dark": #df7884,
-),
-"custom-6": (
-"light": #dec338,
-"dark": #e6d689,
-),
-"custom-7": (
-"light": #ea6e2c,
-"dark": #e29f7b,
-),
-"custom-8": (
-"light": #a66d38,
-"dark": #e3b387,
-),
-"custom-9": (
-"light": #eb30a0,
-"dark": #e779bb,
-),
-"custom-10": (
-"light": #1e24a5,
-"dark": #5d64ea,
-),
-"black": (
-"light": #000000,
-"dark": #000000,
-),
-"white": (
-"light": #ffffff,
-"dark": #ffffff,
-),
-);
-
-
-// --- Typography ---
-$defaultFontFamilies: system-ui, -apple-system, Roboto, Arial, sans-serif;
-$fontMainPath: "/fonts/";
-$fontFormat: "woff2";
-$fontWeights: ("light", "regular", "medium", "bold");
-$fontStyles: ("normal");
-$fontSizes: (
-"h1": 96px,
-"h2": 60px,
-"h3": 40px,
-"h4": 34px,
-"h5": 24px,
-"h6": 20px,
-"subtitle1": 16px,
-"subtitle2": 14px,
-"body1": 16px,
-"body2": 14px,
-"button": 14px,
-"caption": 12px,
-"overline": 10px,
-);
-$textTruncate: 10;
-$fonts: (
-"font1": (
-"variants": (
-"en": (
-"title": roboto,
-"unicode": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
-),
-"ar": (
-"title": cairo,
-"unicode": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
-),
-),
-),
-);
-
-
-// --- Settings ---
-$axisDivisions: 12;
-$opacities: (10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
-$blurValues: (5, 10, 15, 25);
-$insetValues: (0, 5, 15, 25);
-$bordersValue: 10;
-$radiuses: (5, 10, 15, 25);
-$breakpoints: (
-null: 0,
-sm: 576px,
-md: 768px,
-lg: 992px,
-xl: 1200px,
-xxl: 1400px,
-);
-$wrappers: (
-null: undefined 1.5rem,
-sm: undefined 2rem,
-md: undefined 3rem,
-lg: undefined 3rem,
-xl: undefined 2rem,
-xxl: undefined 2rem,
-);
-$guttersValues: (
-1: 0.25rem,
-2: 0.5rem,
-3: 0.75rem,
-4: 1rem,
-5: 1.5rem,
-6: 2rem,
-auto: auto,
-);
-
-
-// --- Roles ---
-$useMediaQueries: false;
-$useIcons: true;
-$useFontFamilies: true;
-$useFontSizes: true;
-$useFontShapes: true;
-$useTextAligns: true;
-$useTextTruncate: true;
-$useColors: true;
-$useColorsOpacities: true;
-$useColorsLightMode: true;
-$useColorsDarkMode: true;
-$useCurrentColors: true;
-$useRootColors: true;
-$useGrid: true;
-$useFlex: true;
-$useTransitions: true;
-$useWrappers: true;
-$useShadows: true;
-$useDisplays: true;
-$useOverflows: true;
-$useOpacities: true;
-$useBlur: true;
-$useObjectFits: true;
-$usePositions: true;
-$useInsets: true;
-$useSizes: true;
-$useGutters: true;
-$useBorders: true;
-$useTextBorders: true;
-$useRadius: true;
+/* stylelint-disable no-empty-source */