@weser/theming 1.0.0 → 1.0.1

package/README.md

@@ -1,3 +1,3 @@
 # @weser/theming
 
-[Documentation](https://packages.weser.io/theming)
+[Documentation](https://stack.weser.io/theming)

package/dist/src/alpha.d.ts

@@ -0,0 +1 @@
+export default function alpha(reference: string, alpha: number): string;

package/dist/src/alpha.js

@@ -0,0 +1,3 @@
+export default function alpha(reference, alpha) {
+    return `hsl(from ${reference} h s l / max(0, min(1, ${alpha})))`;
+}

package/dist/src/createTheme.d.ts

@@ -0,0 +1,7 @@
+import { Tokens } from './types.js';
+export type SingleConfig = {
+    selector?: string;
+    shouldTransformValue?: (path: string) => boolean;
+};
+export declare const defaultShouldTransformValue: () => boolean;
+export default function createTheme<T extends Tokens>(tokens: T, config?: SingleConfig): [T, string];

package/dist/src/createTheme.js

@@ -0,0 +1,27 @@
+import isObject from 'isobject';
+import createVariable from './createVariable.js';
+export const defaultShouldTransformValue = () => true;
+export default function createTheme(tokens, config = {}) {
+    const { selector = ':root', shouldTransformValue = defaultShouldTransformValue, } = config;
+    const [theme, declarations] = extractVariables(structuredClone(tokens), shouldTransformValue);
+    const css = `${selector}{${declarations.join(';')}}`;
+    return [theme, css];
+}
+function extractVariables(tokens, convert, path = '', variables = []) {
+    for (const property in tokens) {
+        const value = tokens[property];
+        const name = path + (path ? '.' : '') + property;
+        if (isObject(value)) {
+            extractVariables(value, convert, name, variables);
+        }
+        else {
+            if (convert(path)) {
+                const [reference, declaration] = createVariable(name.replace(/[.]/g, '-'), value);
+                variables.push(declaration);
+                // @ts-ignore
+                tokens[property] = reference;
+            }
+        }
+    }
+    return [tokens, variables];
+}

package/dist/src/createThemes.d.ts

@@ -0,0 +1,11 @@
+import { SingleConfig } from './createTheme.js';
+import { Tokens } from './types.js';
+type ThemeMap<T> = {
+    [name: string]: T;
+};
+type MutliConfig = {
+    shouldTransformValue?: SingleConfig['shouldTransformValue'];
+    getSelector?: (name: string) => string;
+};
+export default function createThemes<T extends Tokens>(themes: ThemeMap<T>, config?: MutliConfig): [T, string];
+export {};

package/dist/src/createThemes.js

@@ -0,0 +1,16 @@
+import createTheme, { defaultShouldTransformValue, } from './createTheme.js';
+const defaultGetSelector = (name) => '.' + name;
+export default function createThemes(themes, config = {}) {
+    const { shouldTransformValue = defaultShouldTransformValue, getSelector = defaultGetSelector, } = config;
+    let css = '';
+    let theme;
+    for (const name in themes) {
+        const [_theme, _css] = createTheme(themes[name], {
+            shouldTransformValue,
+            selector: getSelector(name),
+        });
+        css += _css;
+        theme = _theme;
+    }
+    return [theme, css];
+}

package/dist/src/createVariable.d.ts

@@ -0,0 +1 @@
+export default function createVariable(name: string, value: string): [string, string];

package/dist/src/createVariable.js

@@ -0,0 +1,6 @@
+export default function createVariable(name, value) {
+    const variable = `--${name}`;
+    const reference = `var(${variable})`;
+    const declaration = `${variable}:${value}`;
+    return [reference, declaration];
+}

package/dist/src/createVariableReference.d.ts

@@ -0,0 +1 @@
+export default function createVariableReference(name: string, fallbackValue?: string): [`--${string}`, string];

package/dist/src/createVariableReference.js

@@ -0,0 +1,7 @@
+export default function createVariableReference(name, fallbackValue) {
+    const variable = `--${name}`;
+    if (fallbackValue) {
+        return [variable, `var(${variable}, ${fallbackValue})`];
+    }
+    return [variable, `var(${variable})`];
+}

package/dist/src/darken.d.ts

@@ -0,0 +1 @@
+export default function darken(color: string, amount: number): string;

package/dist/src/darken.js

@@ -0,0 +1,4 @@
+export default function darken(color, amount) {
+    const percentage = amount * 100;
+    return `hsl(from ${color} h s calc(max(0, min(100, l - ${percentage}))))`;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,8 @@
+export { default as createVariable } from './createVariable.js';
+export { default as createVariableReference } from './createVariableReference.js';
+export { default as createTheme } from './createTheme.js';
+export { default as createThemes } from './createThemes.js';
+export { default as alpha } from './alpha.js';
+export { default as a } from './alpha.js';
+export { default as lighten } from './lighten.js';
+export { default as darken } from './darken.js';

package/dist/src/index.js

@@ -0,0 +1,8 @@
+export { default as createVariable } from './createVariable.js';
+export { default as createVariableReference } from './createVariableReference.js';
+export { default as createTheme } from './createTheme.js';
+export { default as createThemes } from './createThemes.js';
+export { default as alpha } from './alpha.js';
+export { default as a } from './alpha.js';
+export { default as lighten } from './lighten.js';
+export { default as darken } from './darken.js';

package/dist/src/lighten.d.ts

@@ -0,0 +1 @@
+export default function lighten(color: string, amount: number): string;

package/dist/src/lighten.js

@@ -0,0 +1,4 @@
+export default function lighten(color, amount) {
+    const percentage = amount * 100;
+    return `hsl(from ${color} h s calc(max(0, min(100, l + ${percentage}))))`;
+}

package/dist/src/types.d.ts

@@ -0,0 +1 @@
+export type Tokens = Record<string, any>;

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../vitest.config.ts","../src/alpha.ts","../src/createtheme.ts","../src/createthemes.ts","../src/createvariable.ts","../src/createvariablereference.ts","../src/darken.ts","../src/index.ts","../src/lighten.ts","../src/types.ts"],"version":"5.9.3"}

package/dist/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/dist/vitest.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+export default defineConfig({
+    test: {
+        include: ['**/__tests__/**/*.{js,ts}'],
+        globals: false,
+    },
+    esbuild: {
+        target: 'esnext',
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weser/theming",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Utils for theming with CSS variables",
   "author": "Robin Weser <robin@weser.io>",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "clean": "rimraf dist",
     "build": "tsc -b",
     "dev": "pnpm build -w",
-    "test": "ava"
+    "test": "vitest run"
   },
   "keywords": [
     "theming",
@@ -44,9 +44,9 @@
     "isobject": "^4.0.0"
   },
   "devDependencies": {
-    "ava": "^6.1.3",
     "rimraf": "^3.0.2",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "vitest": "^2.1.8"
   },
-  "gitHead": "afc0628ca4aeaba255eef9716652640fdc5b50c4"
+  "gitHead": "490b5b37e8da7f0cac2880543874914c6f6be5d6"
 }