@ngutil/style 0.0.3-dev.16 → 0.0.3-dev.17

package/esm2022/index.mjs

@@ -1,3 +1,4 @@
 export { watchMedia } from "./services/media-watcher";
 export { ColorSchemeService } from "./services/color-scheme.service";
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9zdHlsZS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBQ3JELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgd2F0Y2hNZWRpYSB9IGZyb20gXCIuL3NlcnZpY2VzL21lZGlhLXdhdGNoZXJcIlxuZXhwb3J0IHsgQ29sb3JTY2hlbWVTZXJ2aWNlIH0gZnJvbSBcIi4vc2VydmljZXMvY29sb3Itc2NoZW1lLnNlcnZpY2VcIlxuIl19
+export { Ease, Duration } from "./sass";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wYWNrYWdlcy9zdHlsZS9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFBO0FBQ3JELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFBO0FBQ3BFLE9BQU8sRUFBRSxJQUFJLEVBQUUsUUFBUSxFQUFFLE1BQU0sUUFBUSxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgd2F0Y2hNZWRpYSB9IGZyb20gXCIuL3NlcnZpY2VzL21lZGlhLXdhdGNoZXJcIlxuZXhwb3J0IHsgQ29sb3JTY2hlbWVTZXJ2aWNlIH0gZnJvbSBcIi4vc2VydmljZXMvY29sb3Itc2NoZW1lLnNlcnZpY2VcIlxuZXhwb3J0IHsgRWFzZSwgRHVyYXRpb24gfSBmcm9tIFwiLi9zYXNzXCJcbiJdfQ==

package/esm2022/sass/animation/vars/index.mjs

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* eslint-disable prettier/prettier */
+/* ! AUTO GENERATED DO NOT EDIT ! */
+export class Ease {
+    static { this.Deceleration = "cubic-bezier(0, 0, 0.2, 1)"; }
+    static { this.Standard = "cubic-bezier(0.4, 0, 0.2, 1)"; }
+    static { this.Acceleration = "cubic-bezier(0.4, 0, 1, 1)"; }
+    static { this.Sharp = "cubic-bezier(0.4, 0, 0.6, 1)"; }
+    /**
+     * Reach nearly end position fast, and slowly move to final position
+     */
+    static { this.Emphasized = "cubic-bezier(0.12, 0.9, 0.12, 0.9)"; }
+}
+export class Duration {
+    static { this.Fast = "200ms"; }
+    static { this.FastMs = 200; }
+    static { this.Medium = "300ms"; }
+    static { this.MediumMs = 300; }
+    static { this.Slow = "400ms"; }
+    static { this.SlowMs = 400; }
+    static { this.Snail = "600ms"; }
+    static { this.SnailMs = 600; }
+}
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9zdHlsZS9zcmMvc2Fzcy9hbmltYXRpb24vdmFycy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxvQkFBb0I7QUFDcEIsc0NBQXNDO0FBQ3RDLG9DQUFvQztBQUVwQyxNQUFNLE9BQU8sSUFBSTthQUNHLGlCQUFZLEdBQUcsNEJBQXFDLENBQUE7YUFDcEQsYUFBUSxHQUFHLDhCQUF1QyxDQUFBO2FBQ2xELGlCQUFZLEdBQUcsNEJBQXFDLENBQUE7YUFDcEQsVUFBSyxHQUFHLDhCQUF1QyxDQUFBO0lBQy9EOztPQUVHO2FBQ2EsZUFBVSxHQUFHLG9DQUE2QyxDQUFBOztBQUc5RSxNQUFNLE9BQU8sUUFBUTthQUNELFNBQUksR0FBRyxPQUFnQixDQUFBO2FBQ3ZCLFdBQU0sR0FBRyxHQUFZLENBQUE7YUFDckIsV0FBTSxHQUFHLE9BQWdCLENBQUE7YUFDekIsYUFBUSxHQUFHLEdBQVksQ0FBQTthQUN2QixTQUFJLEdBQUcsT0FBZ0IsQ0FBQTthQUN2QixXQUFNLEdBQUcsR0FBWSxDQUFBO2FBQ3JCLFVBQUssR0FBRyxPQUFnQixDQUFBO2FBQ3hCLFlBQU8sR0FBRyxHQUFZLENBQUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSAqL1xuLyogZXNsaW50LWRpc2FibGUgcHJldHRpZXIvcHJldHRpZXIgKi9cbi8qICEgQVVUTyBHRU5FUkFURUQgRE8gTk9UIEVESVQgISAqL1xuXG5leHBvcnQgY2xhc3MgRWFzZSB7XG4gICAgc3RhdGljIHJlYWRvbmx5IERlY2VsZXJhdGlvbiA9IFwiY3ViaWMtYmV6aWVyKDAsIDAsIDAuMiwgMSlcIiBhcyBjb25zdFxuICAgIHN0YXRpYyByZWFkb25seSBTdGFuZGFyZCA9IFwiY3ViaWMtYmV6aWVyKDAuNCwgMCwgMC4yLCAxKVwiIGFzIGNvbnN0XG4gICAgc3RhdGljIHJlYWRvbmx5IEFjY2VsZXJhdGlvbiA9IFwiY3ViaWMtYmV6aWVyKDAuNCwgMCwgMSwgMSlcIiBhcyBjb25zdFxuICAgIHN0YXRpYyByZWFkb25seSBTaGFycCA9IFwiY3ViaWMtYmV6aWVyKDAuNCwgMCwgMC42LCAxKVwiIGFzIGNvbnN0XG4gICAgLyoqXG4gICAgICogUmVhY2ggbmVhcmx5IGVuZCBwb3NpdGlvbiBmYXN0LCBhbmQgc2xvd2x5IG1vdmUgdG8gZmluYWwgcG9zaXRpb25cbiAgICAgKi9cbiAgICBzdGF0aWMgcmVhZG9ubHkgRW1waGFzaXplZCA9IFwiY3ViaWMtYmV6aWVyKDAuMTIsIDAuOSwgMC4xMiwgMC45KVwiIGFzIGNvbnN0XG59XG5cbmV4cG9ydCBjbGFzcyBEdXJhdGlvbiB7XG4gICAgc3RhdGljIHJlYWRvbmx5IEZhc3QgPSBcIjIwMG1zXCIgYXMgY29uc3RcbiAgICBzdGF0aWMgcmVhZG9ubHkgRmFzdE1zID0gMjAwIGFzIGNvbnN0XG4gICAgc3RhdGljIHJlYWRvbmx5IE1lZGl1bSA9IFwiMzAwbXNcIiBhcyBjb25zdFxuICAgIHN0YXRpYyByZWFkb25seSBNZWRpdW1NcyA9IDMwMCBhcyBjb25zdFxuICAgIHN0YXRpYyByZWFkb25seSBTbG93ID0gXCI0MDBtc1wiIGFzIGNvbnN0XG4gICAgc3RhdGljIHJlYWRvbmx5IFNsb3dNcyA9IDQwMCBhcyBjb25zdFxuICAgIHN0YXRpYyByZWFkb25seSBTbmFpbCA9IFwiNjAwbXNcIiBhcyBjb25zdFxuICAgIHN0YXRpYyByZWFkb25seSBTbmFpbE1zID0gNjAwIGFzIGNvbnN0XG59XG4iXX0=

package/esm2022/sass/index.mjs

@@ -0,0 +1,2 @@
+export { Ease, Duration } from "./animation/vars";
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9zdHlsZS9zcmMvc2Fzcy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxNQUFNLGtCQUFrQixDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHsgRWFzZSwgRHVyYXRpb24gfSBmcm9tIFwiLi9hbmltYXRpb24vdmFyc1wiXG4iXX0=

package/fesm2022/ngutil-style.mjs

@@ -42,9 +42,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             args: [{ providedIn: "root" }]
         }] });
 
+/* eslint-disable */
+/* eslint-disable prettier/prettier */
+/* ! AUTO GENERATED DO NOT EDIT ! */
+class Ease {
+    static { this.Deceleration = "cubic-bezier(0, 0, 0.2, 1)"; }
+    static { this.Standard = "cubic-bezier(0.4, 0, 0.2, 1)"; }
+    static { this.Acceleration = "cubic-bezier(0.4, 0, 1, 1)"; }
+    static { this.Sharp = "cubic-bezier(0.4, 0, 0.6, 1)"; }
+    /**
+     * Reach nearly end position fast, and slowly move to final position
+     */
+    static { this.Emphasized = "cubic-bezier(0.12, 0.9, 0.12, 0.9)"; }
+}
+class Duration {
+    static { this.Fast = "200ms"; }
+    static { this.FastMs = 200; }
+    static { this.Medium = "300ms"; }
+    static { this.MediumMs = 300; }
+    static { this.Slow = "400ms"; }
+    static { this.SlowMs = 400; }
+    static { this.Snail = "600ms"; }
+    static { this.SnailMs = 600; }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ColorSchemeService, watchMedia };
+export { ColorSchemeService, Duration, Ease, watchMedia };
 //# sourceMappingURL=ngutil-style.mjs.map

package/fesm2022/ngutil-style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngutil-style.mjs","sources":["../../../../packages/style/src/services/media-watcher.ts","../../../../packages/style/src/services/color-scheme.service.ts","../../../../packages/style/src/ngutil-style.ts"],"sourcesContent":["import { inject, NgZone } from \"@angular/core\"\n\nimport { distinctUntilChanged, Observable, shareReplay, Subscriber } from \"rxjs\"\n\nconst WATCHES: { [key: string]: Observable<boolean> } = {}\n\n/**\n * watchMedia(\"(display-mode: standalone)\")\n */\nexport function watchMedia(expr: string): Observable<boolean> {\n    const existing = WATCHES[expr]\n    if (existing == null) {\n        return (WATCHES[expr] = _createWatcher(expr))\n    }\n    return existing\n}\n\nfunction _createWatcher(expr: string): Observable<boolean> {\n    const zone = inject(NgZone)\n    return zone.runOutsideAngular(() =>\n        new Observable((sub: Subscriber<boolean>) => {\n            const query = window.matchMedia(expr)\n            const listener = (event: MediaQueryListEvent) => {\n                sub.next(event.matches)\n            }\n            query.addEventListener(\"change\", listener)\n            sub.next(query.matches)\n            return () => {\n                query.removeEventListener(\"change\", listener)\n                delete WATCHES[expr]\n            }\n        }).pipe(distinctUntilChanged(), shareReplay(1))\n    )\n}\n","import { Injectable } from \"@angular/core\"\n\nimport { map, shareReplay } from \"rxjs\"\n\nimport { watchMedia } from \"./media-watcher\"\n\n@Injectable({ providedIn: \"root\" })\nexport class ColorSchemeService {\n    readonly isDark = watchMedia(\"(prefers-color-scheme: dark)\")\n    readonly isLight = this.isDark.pipe(\n        map(v => !v),\n        shareReplay(1)\n    )\n\n    // TODO: set preferred color scheme (dark/light)\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAIA,MAAM,OAAO,GAA2C,EAAE,CAAA;AAE1D;;AAEG;AACG,SAAU,UAAU,CAAC,IAAY,EAAA;AACnC,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;AAC9B,IAAA,IAAI,QAAQ,IAAI,IAAI,EAAE;QAClB,QAAQ,OAAO,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,EAAC;KAChD;AACD,IAAA,OAAO,QAAQ,CAAA;AACnB,CAAC;AAED,SAAS,cAAc,CAAC,IAAY,EAAA;AAChC,IAAA,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;AAC3B,IAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,MAC1B,IAAI,UAAU,CAAC,CAAC,GAAwB,KAAI;QACxC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAA;AACrC,QAAA,MAAM,QAAQ,GAAG,CAAC,KAA0B,KAAI;AAC5C,YAAA,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAC3B,SAAC,CAAA;AACD,QAAA,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC1C,QAAA,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AACvB,QAAA,OAAO,MAAK;AACR,YAAA,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC7C,YAAA,OAAO,OAAO,CAAC,IAAI,CAAC,CAAA;AACxB,SAAC,CAAA;AACL,KAAC,CAAC,CAAC,IAAI,CAAC,oBAAoB,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAClD,CAAA;AACL;;MC1Ba,kBAAkB,CAAA;AAD/B,IAAA,WAAA,GAAA;AAEa,QAAA,IAAA,CAAA,MAAM,GAAG,UAAU,CAAC,8BAA8B,CAAC,CAAA;QACnD,IAAO,CAAA,OAAA,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAC/B,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EACZ,WAAW,CAAC,CAAC,CAAC,CACjB,CAAA;AAGJ,KAAA;8GARY,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cADL,MAAM,EAAA,CAAA,CAAA,EAAA;;2FACnB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAD9B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAA;;;ACNlC;;AAEG;;;;"}
+{"version":3,"file":"ngutil-style.mjs","sources":["../../../../packages/style/src/services/media-watcher.ts","../../../../packages/style/src/services/color-scheme.service.ts","../../../../packages/style/src/sass/animation/vars/index.ts","../../../../packages/style/src/ngutil-style.ts"],"sourcesContent":["import { inject, NgZone } from \"@angular/core\"\n\nimport { distinctUntilChanged, Observable, shareReplay, Subscriber } from \"rxjs\"\n\nconst WATCHES: { [key: string]: Observable<boolean> } = {}\n\n/**\n * watchMedia(\"(display-mode: standalone)\")\n */\nexport function watchMedia(expr: string): Observable<boolean> {\n    const existing = WATCHES[expr]\n    if (existing == null) {\n        return (WATCHES[expr] = _createWatcher(expr))\n    }\n    return existing\n}\n\nfunction _createWatcher(expr: string): Observable<boolean> {\n    const zone = inject(NgZone)\n    return zone.runOutsideAngular(() =>\n        new Observable((sub: Subscriber<boolean>) => {\n            const query = window.matchMedia(expr)\n            const listener = (event: MediaQueryListEvent) => {\n                sub.next(event.matches)\n            }\n            query.addEventListener(\"change\", listener)\n            sub.next(query.matches)\n            return () => {\n                query.removeEventListener(\"change\", listener)\n                delete WATCHES[expr]\n            }\n        }).pipe(distinctUntilChanged(), shareReplay(1))\n    )\n}\n","import { Injectable } from \"@angular/core\"\n\nimport { map, shareReplay } from \"rxjs\"\n\nimport { watchMedia } from \"./media-watcher\"\n\n@Injectable({ providedIn: \"root\" })\nexport class ColorSchemeService {\n    readonly isDark = watchMedia(\"(prefers-color-scheme: dark)\")\n    readonly isLight = this.isDark.pipe(\n        map(v => !v),\n        shareReplay(1)\n    )\n\n    // TODO: set preferred color scheme (dark/light)\n}\n","/* eslint-disable */\n/* eslint-disable prettier/prettier */\n/* ! AUTO GENERATED DO NOT EDIT ! */\n\nexport class Ease {\n    static readonly Deceleration = \"cubic-bezier(0, 0, 0.2, 1)\" as const\n    static readonly Standard = \"cubic-bezier(0.4, 0, 0.2, 1)\" as const\n    static readonly Acceleration = \"cubic-bezier(0.4, 0, 1, 1)\" as const\n    static readonly Sharp = \"cubic-bezier(0.4, 0, 0.6, 1)\" as const\n    /**\n     * Reach nearly end position fast, and slowly move to final position\n     */\n    static readonly Emphasized = \"cubic-bezier(0.12, 0.9, 0.12, 0.9)\" as const\n}\n\nexport class Duration {\n    static readonly Fast = \"200ms\" as const\n    static readonly FastMs = 200 as const\n    static readonly Medium = \"300ms\" as const\n    static readonly MediumMs = 300 as const\n    static readonly Slow = \"400ms\" as const\n    static readonly SlowMs = 400 as const\n    static readonly Snail = \"600ms\" as const\n    static readonly SnailMs = 600 as const\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -1,2 +1,3 @@
 export { watchMedia } from "./services/media-watcher";
 export { ColorSchemeService } from "./services/color-scheme.service";
+export { Ease, Duration } from "./sass";

package/index.scss

@@ -0,0 +1 @@
+@forward "./src/sass/index.scss";

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@ngutil/style",
-  "version": "0.0.3-dev.16",
+  "version": "0.0.3-dev.17",
   "publishConfig": {
     "access": "public",
     "directory": "../../dist/packages/style/"
   },
   "peerDependencies": {
     "@angular/common": "^17.1.0",
-    "@angular/core": "^17.1.0"
+    "@angular/core": "^17.1.0",
+    "rxjs": "^7.8.1"
   },
   "dependencies": {
     "tslib": "^2.3.0"
@@ -15,7 +16,8 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "sass": "./styles/index.scss",
+      "sass": "./index.scss",
+      "scss": "./index.scss",
       "types": "./index.d.ts",
       "esm2022": "./esm2022/ngutil-style.mjs",
       "esm": "./esm2022/ngutil-style.mjs",

package/sass/animation/vars/index.d.ts

@@ -0,0 +1,20 @@
+export declare class Ease {
+    static readonly Deceleration: "cubic-bezier(0, 0, 0.2, 1)";
+    static readonly Standard: "cubic-bezier(0.4, 0, 0.2, 1)";
+    static readonly Acceleration: "cubic-bezier(0.4, 0, 1, 1)";
+    static readonly Sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+    /**
+     * Reach nearly end position fast, and slowly move to final position
+     */
+    static readonly Emphasized: "cubic-bezier(0.12, 0.9, 0.12, 0.9)";
+}
+export declare class Duration {
+    static readonly Fast: "200ms";
+    static readonly FastMs: 200;
+    static readonly Medium: "300ms";
+    static readonly MediumMs: 300;
+    static readonly Slow: "400ms";
+    static readonly SlowMs: 400;
+    static readonly Snail: "600ms";
+    static readonly SnailMs: 600;
+}

package/sass/index.d.ts

@@ -0,0 +1 @@
+export { Ease, Duration } from "./animation/vars";

package/src/sass/animation/vars/index.scss

@@ -0,0 +1,12 @@
+/* ! AUTO GENERATED DO NOT EDIT ! */
+
+$ease-deceleration: cubic-bezier(0, 0, 0.2, 1) !default;
+$ease-standard: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$ease-acceleration: cubic-bezier(0.4, 0, 1, 1) !default;
+$ease-sharp: cubic-bezier(0.4, 0, 0.6, 1) !default;
+/// Reach nearly end position fast, and slowly move to final position
+$ease-emphasized: cubic-bezier(0.12, 0.9, 0.12, 0.9) !default;
+$duration-fast: 200ms !default;
+$duration-medium: 300ms !default;
+$duration-slow: 400ms !default;
+$duration-snail: 600ms !default;

package/src/sass/index.scss

@@ -0,0 +1,2 @@
+@forward "./vars" hide _var-chain;
+@forward "./animation/vars";

package/src/sass/vars.scss

@@ -0,0 +1,74 @@
+@use "sass:list";
+@use "sass:string";
+
+/// Detects if the given value is var name: `--var-name`
+///
+/// @param {string} $value value to be need to testing
+/// @return {boolean} true if the given value is var name
+@function is-var-name($value) {
+    @return type-of($value) == "string" and string.index($value, "--") == 1;
+}
+
+
+/// Detects if the given value is a var fn call: `var(--var-name)`
+///
+/// @param {string} $value value to be need to testing
+/// @return {boolean} true if the given value is var call
+@function is-var-fn($value) {
+    @return type-of($value) == "string" and string.index($value, "var(") == 1 and string.index($value, ")") == string.length($value);
+}
+
+
+/// Detects if the given value is var name or var fn
+///
+/// @param {string} $value value to be need to testing
+/// @return {boolean} true if the given value is var name or var call
+@function is-var($value) {
+    @return is-var-name($value) or is-var-fn($value);
+}
+
+@function _var-chain($vars, $idx) {
+    $res: "";
+    $curr: list.nth($vars, $idx);
+
+    @if (is-var-name($curr)) {
+        $res: "var(#{$curr}";
+    } @else {
+        @return $curr;
+    }
+
+    @if (list.length($vars) > $idx) {
+        @return string.unquote("#{$res}, #{_var-chain($vars, $idx + 1)})");
+    } @else {
+        @return string.unquote("#{$res})");
+    }
+}
+
+
+/// Chain variables like this: `var(--var-1, var(--var-2, var(--var-3, default-value)))`
+///
+/// @param {any} $vars variable names or default value
+/// @return {string} the chained variables
+@function var-chain($vars...) {
+    @if (list.length($vars) > 0) {
+        @return _var-chain($vars, 1);
+    } @else {
+        @return "";
+    }
+}
+
+
+/// Create configurable css variables:
+///
+/// @example
+///   .nu-button {
+///     @include nu.var-option(button-fg, #000);
+///     // expands to:
+///     ---button-fg: var(--button-fg, #000);
+///     @include nu.var-option(button-hover-fg, ---button-fg, #000);
+///     // expands to:
+///     ---button-hover-fg: var(--button-hover-fg, var(---button-fg), #000);
+///   }
+@mixin var-option($name, $vars...) {
+    ---#{$name}: #{var-chain(--#{$name}, $vars...)};
+}

package/styles/index.scss

@@ -1 +0,0 @@
-@use "./vars" as *;

package/styles/vars.scss

@@ -1,47 +0,0 @@
-@use "sass:list";
-@use "sass:string";
-
-
-@function is-var($value) {
-    @return type-of($value) == "string" and string.index($value, "--") == 1;
-}
-
-@function is-varfn($value) {
-    @return type-of($value) == "string" and string.index($value, "var(") == 1 and string.index($value, ")") == string.length($value);
-}
-
-@function -chanin-var($vars, $idx) {
-    $res: "";
-    $curr: list.nth($vars, $idx);
-
-    @if (is-var($curr)) {
-        $res: "var(#{$curr}";
-    } @else {
-        @return $curr;
-    }
-
-    @if (list.length($vars) > $idx) {
-        @return string.unquote("#{$res}, #{-chanin-var($vars, $idx + 1)})");
-    } @else {
-        @return string.unquote("#{$res})");
-    }
-}
-
-@function chain-var($vars...) {
-    @if (list.length($vars) > 0) {
-        @return -chanin-var($vars, 1);
-    } @else {
-        @return "";
-    }
-}
-
-
-/*
-.button {
-    @include cvar(button-fg, --color, #000);
-    ---button-fg: var(--button-fg, var(--color), #000);
-}
-*/
-@mixin cvar($name, $defaults...) {
-    ---#{$name}: #{chain-var(--#{$name}, $defaults...)};
-}