npm - @medyll/cssfabric - Versions diffs - 0.2.1-beta.4 → 0.2.1-beta.6 - Mend

@medyll/cssfabric 0.2.1-beta.4 → 0.2.1-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/README.md CHANGED Viewed

@@ -1,58 +1,66 @@
-# create-svelte
+# @medyll/cssfabric
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+@medyll/cssfabric is a ready-to-use CSS utility className.
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-## Creating a project
-If you're seeing this, you've probably already done this step. Congrats!
+## Installation
+install @medyll/cssfabric with your preferred package manager
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
-# create a new project in my-app
-npm create svelte@latest my-app
+npm install @medyll/cssfabric
+# or
+yarn add @medyll/cssfabric
+# or whatever
+...
 ```
-## Developing
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Configuration
+### Add `data-theme` attribute to `body`
-```bash
-npm run dev
+Add the `data-theme` attribute to the `body` in your main html file:
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```html
+<body data-theme="dark">
+  <!-- Application content -->
+</body>
 ```
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+The `data-theme` attribute can be set to "dark" or "light" depending on your needs.
+### Add imports from @medyll/cssfabric in the main file
-## Building
+Add the following imports in the main file:
-To build your library:
-```bash
-npm run package
+```js
+# example
+import "@medyll/cssfabric/cssfabric.min.css";
+# example for svelte
+import "@medyll/cssfabric/cssfabric.min.css?inline";
 ```
-To create a production version of your showcase app:
+### Import your theme definition
-```bash
-npm run build
+```html
+# example for svelte
+<style global lang="scss">
+  @import "path-to/own-cssfabric-theme.scss";
+</style>
 ```
-You can preview the production build with `npm run preview`.
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+Example of a scss theme definition:
-## Publishing
+```scss
+// own-cssfabric-theme.scss
+@charset "utf-8";
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+$theme-color-primary: #98B148;
+$theme-color-secondary: #55492B;
+$theme-color-tertiary: #9999CC;
-To publish your library to [npm](https://www.npmjs.com):
+$theme-dark-color-foreground: #f1f1f1;
+$theme-dark-color-background: #27323a;
+$theme-dark-color-paper: #3a3b3b;
-```bash
-npm publish
+// Overrides the default values of @medyll/cssfabric's configuration and deliver new `css properties`.
+@import "../node_modules/@medyll/cssfabric/src/cssfabric/modules/vars.scss";
 ```

package/dist/fabric/CssFabric.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { CssFabricBuilder, CssFabricBuilderParams } from './CssFabricBuilder.js';
+import { CssFabricExport } from './CssFabricExport.js';
+import type { cssFabricModelType, cssFabricModelKey } from './types.js';
+/**
+ * Represents a CSS Fabric class.
+ */
+export declare class CssFabric {
+    /**
+     * The vendor method returns a string with the vendor name and an optional fragment.
+     * @param fragment - Optional fragment to append to the vendor name.
+     * @returns A string with the vendor name and the fragment.
+     */
+    vendor: (fragment?: string) => string;
+    cssFabricModel: cssFabricModelType;
+    cssFabricBuilderParams: CssFabricBuilderParams;
+    cssFabricBuilder: CssFabricBuilder;
+    constructor();
+    /**
+     * Cleans the model key by removing single quotes.
+     * @param modelKey - The model key to clean.
+     * @returns The cleaned model key.
+     */
+    private cleanModelKey;
+    /**
+     * Sets the parameters for the CssFabricBuilder.
+     * @param params - Partial parameters to set for the CssFabricBuilder.
+     */
+    setParams(params: Partial<CssFabricBuilderParams>): void;
+    /**
+     * Creates CSS fabric variables and colors based on the provided model keys.
+     * @param args - The model keys to create CSS fabric variables and colors for.
+     * @returns An object with the export and css properties.
+     */
+    createCssFabricVarsColors(...args: cssFabricModelKey[]): {
+        export: CssFabricExport['export'];
+        css: string;
+    };
+    /**
+     * Generates the CSS fabric sheet.
+     * @returns An object with the export and css properties.
+     */
+    cssFabricSheet(): {
+        export: (options: any) => void;
+        css: Record<string, any>;
+    };
+}

package/dist/fabric/CssFabric.js ADDED Viewed

@@ -0,0 +1,97 @@
+import { CssFabricBuilder, CssFabricBuilderParams } from './CssFabricBuilder.js';
+import { CssFabricExport } from './CssFabricExport.js';
+import { cssFabricSheet } from './cssFabricSheet.js';
+import { CSSProperties } from './cssProperties.js';
+/**
+ * Represents a CSS Fabric class.
+ */
+export class CssFabric {
+    /**
+     * The vendor method returns a string with the vendor name and an optional fragment.
+     * @param fragment - Optional fragment to append to the vendor name.
+     * @returns A string with the vendor name and the fragment.
+     */
+    vendor = (fragment = '') => `${this.cssFabricBuilderParams.vendorName}${fragment}`;
+    cssFabricModel = {};
+    cssFabricBuilderParams;
+    cssFabricBuilder;
+    constructor() {
+        this.cssFabricBuilder = new CssFabricBuilder();
+        this.cssFabricBuilderParams = new CssFabricBuilderParams();
+    }
+    /**
+     * Cleans the model key by removing single quotes.
+     * @param modelKey - The model key to clean.
+     * @returns The cleaned model key.
+     */
+    cleanModelKey(modelKey) {
+        return modelKey.replace(/'/g, '');
+    }
+    /**
+     * Sets the parameters for the CssFabricBuilder.
+     * @param params - Partial parameters to set for the CssFabricBuilder.
+     */
+    setParams(params) {
+        this.cssFabricBuilderParams = {
+            ...this.cssFabricBuilderParams,
+            ...params
+        };
+    }
+    /**
+     * Creates CSS fabric variables and colors based on the provided model keys.
+     * @param args - The model keys to create CSS fabric variables and colors for.
+     * @returns An object with the export and css properties.
+     */
+    createCssFabricVarsColors(...args) {
+        args.forEach((modelKey) => {
+            switch (this.cleanModelKey(modelKey)) {
+                case 'base':
+                    this.cssFabricModel.base = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.theme, this.vendor());
+                    break;
+                case 'palette':
+                    this.cssFabricModel.palette = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.palette, this.vendor('palette-'));
+                    break;
+                case 'presets':
+                    this.cssFabricModel.presets = this.cssFabricBuilder.flattenIt(['primary', 'secondary', 'tertiary', 'accent'], this.cssFabricBuilderParams.presets, this.vendor('presets-'));
+                    break;
+                case 'status':
+                    this.cssFabricModel.status = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.status, this.vendor('status-'));
+                    break;
+                case 'out':
+                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
+                    this.cssFabricModel.out = this.cssFabricBuilder.makeDefaultVariations(['primary', 'secondary', 'tertiary'], ['lighten', 'darken', 'opacity'], this.vendor());
+                    break;
+                case 'gray':
+                    this.cssFabricModel.gray = this.cssFabricBuilder.createProgression({
+                        property: this.vendor(`color-gray`),
+                        iteratorMask: `color-mix(in srgb, ${this.vendor(`color-gray`)}  ${this.cssFabricBuilderParams.correspondances.gray} ##%);`,
+                        steps: this.cssFabricBuilderParams.defaultVariationSteps
+                    }, 'json');
+                    break;
+                case 'out2':
+                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
+                    this.cssFabricModel.out2 = this.cssFabricBuilder.makeDefaultVariations(['foreground', 'bg'], ['lighten', 'darken', 'opacity'], this.vendor());
+                    break;
+                default:
+                    console.log('default', modelKey);
+                    break;
+            }
+        });
+        return {
+            export: (options) => new CssFabricExport(this.cssFabricModel, options).export(options),
+            css: JSON.stringify(this.cssFabricModel)
+        };
+    }
+    /**
+     * Generates the CSS fabric sheet.
+     * @returns An object with the export and css properties.
+     */
+    cssFabricSheet() {
+        const cssP = new CSSProperties(cssFabricSheet /* , ['overflow'] */);
+        const cssF = cssP.generateCSS();
+        return {
+            export: (options) => new CssFabricExport(cssF, options).export(options),
+            css: cssF
+        };
+    }
+}

package/dist/{cssFabric/index.d.ts → fabric/CssFabricBuilder.d.ts} RENAMED Viewed

@@ -1,18 +1,6 @@
 import { colorConfig } from './config.js';
-type Steps = [number, number, number];
-type Mask = string;
-type ToMask = string;
-type EaseTrigger = number;
-type Ease = number;
-declare class CssFabricExport {
-    private cssFabricModel;
-    exportPaths: Record<'css' | 'json', string>;
-    constructor(cssFabricModel: cssFabricModelType, exportPaths?: CssFabricExport['exportPaths']);
-    export(options: CssFabricExport['exportPaths']): void;
-    private createCssFile;
-    private createJsonModel;
-}
-declare class CssFabricBuilder {
+import type { Ease, EaseTrigger, Mask, Steps, ToMask } from './types.js';
+export declare class CssFabricBuilder {
     cssFabricBuilderParams: CssFabricBuilderParams;
     constructor();
     parseModel(json: Record<string, any>, parentKey?: string): string;
@@ -48,7 +36,7 @@ declare class CssFabricBuilder {
     makeDefaultVariations(arr1: string[], arr2: string[], prefix: string, vendor?: string): Record<string, any>;
     mainRule(vars: Record<string, any>, prefix: string): Record<string, any>;
 }
-declare class CssFabricBuilderParams {
+export declare class CssFabricBuilderParams {
     vendorName: string;
     variations: {
         readonly none: "var({#vendor}-color-##);";
@@ -81,33 +69,3 @@ declare class CssFabricBuilderParams {
     setDefaultVariationSteps(variationSteps: typeof CssFabricBuilderParams.prototype.defaultVariationSteps): void;
     private deepMerge;
 }
-declare enum ModelConfigKeys {
-    base = 0,
-    palette = 1,
-    presets = 2,
-    status = 3,
-    out = 4,
-    gray = 5,
-    out2 = 6
-}
-type cssFabricModelKey = keyof typeof ModelConfigKeys;
-type cssFabricModelType = Record<cssFabricModelKey, any>;
-declare class CssFabric {
-    vendor: (fragment?: string) => string;
-    cssFabricModel: cssFabricModelType;
-    cssFabricBuilderParams: CssFabricBuilderParams;
-    cssFabricBuilder: CssFabricBuilder;
-    constructor();
-    private cleanModelKey;
-    setParams(params: Partial<CssFabricBuilderParams>): void;
-    createCssFabricVarsColors(...args: cssFabricModelKey[]): {
-        export: CssFabricExport['export'];
-        css: string;
-    };
-    cssFabricSheet(): {
-        export: (options: any) => void;
-        css: Record<string, any>;
-    };
-}
-export declare const cssFabric: CssFabric;
-export {};

package/dist/{cssFabric/index.js → fabric/CssFabricBuilder.js} RENAMED Viewed

@@ -1,45 +1,6 @@
-import fsExtra from 'fs-extra';
 import { harmony } from 'simpler-color';
 import { colorConfig } from './config.js';
-import { CSSProperties } from './cssProperties.js';
-import { cssFabricSheet } from './cssFabricSheet.js';
-class CssFabricExport {
-    cssFabricModel;
-    exportPaths = {
-        css: './css-fabric.css',
-        json: './cssFabric.json'
-    };
-    constructor(cssFabricModel, exportPaths) {
-        this.cssFabricModel = cssFabricModel;
-        this.exportPaths = { ...exportPaths, ...this.exportPaths };
-        return this;
-    }
-    export(options) {
-        this.exportPaths = { ...this.exportPaths, ...options };
-        this.createCssFile();
-        this.createJsonModel();
-    }
-    createCssFile() {
-        // cssFabricBuilder.parseModel(cssCollection
-        fsExtra.writeFile(this.exportPaths.css, this.cssFabricModel.toString(), (err) => {
-            if (err) {
-                console.error(err);
-                return;
-            }
-            console.log('File created successfully.');
-        });
-    }
-    createJsonModel() {
-        fsExtra.writeFile(this.exportPaths.json, JSON.stringify(this.cssFabricModel), (err) => {
-            if (err) {
-                console.error(err);
-                return;
-            }
-            console.log('File created successfully.');
-        });
-    }
-}
-class CssFabricBuilder {
+export class CssFabricBuilder {
     // defaultVariationSteps
     cssFabricBuilderParams;
     constructor() {
@@ -168,8 +129,7 @@ class CssFabricBuilder {
         return collect;
     }
 }
-// primary.presets
-class CssFabricBuilderParams {
+export class CssFabricBuilderParams {
     vendorName = '--cssfab-';
     variations = {
         none: 'var({#vendor}-color-##);',
@@ -214,6 +174,7 @@ class CssFabricBuilderParams {
     ];
     config = {};
     constructor() {
+        // color , vendor
         this.baseColors = harmony('#9e3902');
         this.config = this.deepMerge(colorConfig, { theme: harmony('#9e3902') });
         return this;
@@ -248,94 +209,3 @@ class CssFabricBuilderParams {
         }, objects[0]);
     }
 }
-var ModelConfigKeys;
-(function (ModelConfigKeys) {
-    ModelConfigKeys[ModelConfigKeys["base"] = 0] = "base";
-    ModelConfigKeys[ModelConfigKeys["palette"] = 1] = "palette";
-    ModelConfigKeys[ModelConfigKeys["presets"] = 2] = "presets";
-    ModelConfigKeys[ModelConfigKeys["status"] = 3] = "status";
-    ModelConfigKeys[ModelConfigKeys["out"] = 4] = "out";
-    ModelConfigKeys[ModelConfigKeys["gray"] = 5] = "gray";
-    ModelConfigKeys[ModelConfigKeys["out2"] = 6] = "out2";
-})(ModelConfigKeys || (ModelConfigKeys = {}));
-class CssFabric {
-    vendor = (fragment = '') => `${this.cssFabricBuilderParams.vendorName}${fragment}`;
-    cssFabricModel = {};
-    cssFabricBuilderParams;
-    cssFabricBuilder;
-    constructor() {
-        this.cssFabricBuilder = new CssFabricBuilder();
-        this.cssFabricBuilderParams = new CssFabricBuilderParams();
-    }
-    cleanModelKey(modelKey) {
-        return modelKey.replace(/'/g, '');
-    }
-    setParams(params) {
-        this.cssFabricBuilderParams = {
-            ...this.cssFabricBuilderParams,
-            ...params
-        };
-    }
-    createCssFabricVarsColors(...args) {
-        args.forEach((modelKey) => {
-            switch (this.cleanModelKey(modelKey)) {
-                case 'base':
-                    this.cssFabricModel.base = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.theme, this.vendor());
-                    break;
-                case 'palette':
-                    this.cssFabricModel.palette = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.palette, this.vendor('palette-'));
-                    break;
-                case 'presets':
-                    this.cssFabricModel.presets = this.cssFabricBuilder.flattenIt(['primary', 'secondary', 'tertiary', 'accent'], this.cssFabricBuilderParams.presets, this.vendor('presets-'));
-                    break;
-                case 'status':
-                    this.cssFabricModel.status = this.cssFabricBuilder.mainRule(this.cssFabricBuilderParams.config.status, this.vendor('status-'));
-                    break;
-                case 'out':
-                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
-                    this.cssFabricModel.out = this.cssFabricBuilder.makeDefaultVariations(['primary', 'secondary', 'tertiary'], ['lighten', 'darken', 'opacity'], this.vendor());
-                    break;
-                case 'gray':
-                    this.cssFabricModel.gray = this.cssFabricBuilder.createProgression({
-                        property: this.vendor(`color-gray`),
-                        iteratorMask: `color-mix(in srgb, ${this.vendor(`color-gray`)}  ${this.cssFabricBuilderParams.correspondances.gray} ##%);`,
-                        steps: this.cssFabricBuilderParams.defaultVariationSteps
-                    }, 'json');
-                    break;
-                case 'out2':
-                    // assombrir et rendre opaque  'primary', 'secondary', 'tertiary'
-                    this.cssFabricModel.out2 = this.cssFabricBuilder.makeDefaultVariations(['foreground', 'bg'], ['lighten', 'darken', 'opacity'], this.vendor());
-                    break;
-                default:
-                    console.log('default', modelKey);
-                    break;
-            }
-        });
-        return {
-            export: (options) => new CssFabricExport(this.cssFabricModel, options).export(options),
-            css: JSON.stringify(this.cssFabricModel)
-        };
-    }
-    cssFabricSheet() {
-        const cssP = new CSSProperties(cssFabricSheet /* , ['overflow'] */);
-        const cssF = cssP.generateCSS();
-        return {
-            export: (options) => new CssFabricExport(cssF, options).export(options),
-            css: cssF
-        };
-    }
-}
-// overflow , text-overflow, text-decoration
-export const cssFabric = new CssFabric();
-const styleSheet = cssFabric.cssFabricSheet();
-styleSheet.export({ css: './css-fabric-sheet.css', json: './cssFabric-sheet.json' });
-/* const model = cssFabric.createCssFabricVarsColors(
-    'base',
-    'palette',
-    'presets',
-    'status',
-    'out',
-    'gray',
-    'out2'
-);
-model.export({ css: './css-fabric.css', json: './cssFabric.json' }); */

package/dist/fabric/CssFabricExport.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { cssFabricModelType } from './types.js';
+export declare class CssFabricExport {
+    private cssFabricModel;
+    exportPaths: Record<'css' | 'json', string>;
+    constructor(cssFabricModel: cssFabricModelType, exportPaths?: CssFabricExport['exportPaths']);
+    export(options: CssFabricExport['exportPaths']): void;
+    private createCssFile;
+    private createJsonModel;
+    private parseModel;
+}

package/dist/fabric/CssFabricExport.js ADDED Viewed

@@ -0,0 +1,59 @@
+import fsExtra from 'fs-extra';
+export class CssFabricExport {
+    cssFabricModel;
+    exportPaths = {
+        css: './css-fabric.css',
+        json: './cssFabric.json'
+    };
+    constructor(cssFabricModel, exportPaths) {
+        this.cssFabricModel = cssFabricModel;
+        this.exportPaths = { ...exportPaths, ...this.exportPaths };
+        return this;
+    }
+    export(options) {
+        this.exportPaths = { ...this.exportPaths, ...options };
+        this.createCssFile();
+        this.createJsonModel();
+    }
+    createCssFile() {
+        //this.parseModel(this.cssFabricModel);
+        fsExtra.ensureFileSync(this.exportPaths.css);
+        fsExtra.writeFile(this.exportPaths.css, this.parseModel(this.cssFabricModel), (err) => {
+            if (err) {
+                console.error(err);
+                return;
+            }
+            console.log('File created successfully.');
+        });
+    }
+    createJsonModel() {
+        fsExtra.ensureFileSync(this.exportPaths.json);
+        fsExtra.writeFile(this.exportPaths.json, JSON.stringify(this.cssFabricModel), (err) => {
+            if (err) {
+                console.error(err);
+                return;
+            }
+            console.log('File created successfully.');
+        });
+    }
+    parseModel(json, parentKey = '') {
+        let css = parse(json, parentKey);
+        return `:root{\n${css}}`;
+        function parse(json, parentKey = '', titre = '') {
+            let css = '';
+            for (const key in json) {
+                if (typeof json[key] === 'object') {
+                    css += `\n/* ${key} */ `;
+                    //titre += `/* ----${key}--- */ `;
+                    css += parse(json[key], '', titre);
+                }
+                else {
+                    css += titre;
+                    css += `\n${parentKey}${key}: ${json[key]}`;
+                    titre = '';
+                }
+            }
+            return css;
+        }
+    }
+}

package/dist/fabric/bin/exports.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { CssFabric } from '../CssFabric.js';
2	+ export declare const cssFabric: CssFabric;

package/dist/fabric/bin/exports.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { CssFabric } from '../CssFabric.js';
+export const cssFabric = new CssFabric();
+const styleSheet = cssFabric.cssFabricSheet();
+styleSheet.export({
+    css: './src/lib/fabric/css/css-fabric-sheet.css',
+    json: './src/lib/fabric/css/cssFabric-sheet.json'
+});
+//
+const model = cssFabric.createCssFabricVarsColors('base', 'palette', 'presets', 'status', 'out', 'gray', 'out2');
+model.export({
+    css: './src/lib/fabric/css/css-fabric-vars-colors.css',
+    json: './src/lib/fabric/css/cssFabric-vars-colors.json'
+});