origam 2.3.0 → 2.6.1

package/dist/src/utils/Theme/token-name.util.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Token-path → origam CSS-variable-name naming grammar (runtime).
+ *
+ * This is the runtime / Theme-Builder-export twin of the build-time core in
+ * `scripts/token-name.mjs`. Both implement the SAME algorithm; a parity unit
+ * test (`token-name.util.spec.ts`) asserts they stay byte-identical so the
+ * names baked into the published CSS sheets never drift from the names a
+ * runtime-injected or exported theme produces.
+ *
+ * Why two copies instead of one shared module: the build script is a Node
+ * `.mjs` that runs before the library is bundled, while the published library
+ * only ships `src/**\/*.ts` (mkdist). A relative import from `src` into
+ * `scripts/` would not survive the build, so the implementation is duplicated
+ * and protected by the parity test instead.
+ *
+ * Grammar (`---` separates block from property, `--` a state/modifier, `__` a
+ * BEM child):
+ *
+ *   COMPONENT
+ *     ['btn']                            → --origam-btn
+ *     ['btn', 'background-color']        → --origam-btn---background-color
+ *     ['btn', 'primary', 'background-color'] → --origam-btn--primary---background-color
+ *     ['card', 'overlay', 'background-color'] → --origam-card__overlay---background-color
+ *     ['card', 'overlay', 'hover', 'opacity'] → --origam-card__overlay--hover---opacity
+ *
+ *   PRIMITIVE / SEMANTIC (by path length)
+ *     ['color', 'black']                 → --origam-color---black
+ *     ['color', 'neutral', '500']        → --origam-color__neutral---500
+ *     ['color', 'action', 'primary', 'bg'] → --origam-color__action--primary---bg
+ */
+/**
+ * Component-level intent / state / modifier segments. A path segment matching
+ * one of these (in a component context) is emitted with the `--` modifier
+ * separator rather than treated as a BEM child or property.
+ */
+export declare const TOKEN_INTENT_STATES: ReadonlySet<string>;
+/**
+ * A BEM child key is a single bare word (letters only, no separators / digits).
+ * Property keys typically contain hyphens (`background-color`) so they fail
+ * this test and are emitted as properties rather than children.
+ */
+export declare function isBemChildKey(key: string): boolean;
+/**
+ * Resolve a token path to its origam CSS variable name (WITHOUT the leading
+ * `--`). `isComponent` is `true` when the token originates from a
+ * `tokens/component/*.json` source; `false` for primitive / semantic tokens.
+ */
+export declare function tokenPathToCssVarName(path: ReadonlyArray<string>, isComponent: boolean): string;
+/**
+ * Convenience wrapper that returns the full custom-property reference,
+ * `--origam-…`, ready to drop into a stylesheet declaration or `style`
+ * binding.
+ */
+export declare function tokenPathToCssVar(path: ReadonlyArray<string>, isComponent: boolean): string;

package/dist/src/utils/Theme/token-name.util.js

@@ -0,0 +1,55 @@
+export const TOKEN_INTENT_STATES = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "ghost",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "error",
+  "selected",
+  "outlined",
+  "elevated",
+  "filter",
+  "hover",
+  "active",
+  "disabled",
+  "focus"
+]);
+export function isBemChildKey(key) {
+  return /^[a-zA-Z]+$/.test(key) && !key.includes("-");
+}
+export function tokenPathToCssVarName(path, isComponent) {
+  if (isComponent) {
+    const [blockName, ...rest] = path;
+    if (rest.length === 0) {
+      return `origam-${blockName}`;
+    }
+    if (rest.length > 1 && TOKEN_INTENT_STATES.has(rest[0])) {
+      const [state, ...propParts] = rest;
+      return `origam-${blockName}--${state}---${propParts.join("-")}`;
+    }
+    if (rest.length > 1 && isBemChildKey(rest[0])) {
+      const [child, ...propParts] = rest;
+      if (propParts.length > 1 && TOKEN_INTENT_STATES.has(propParts[0])) {
+        const [state, ...innerProp] = propParts;
+        return `origam-${blockName}__${child}--${state}---${innerProp.join("-")}`;
+      }
+      return `origam-${blockName}__${child}---${propParts.join("-")}`;
+    }
+    return `origam-${blockName}---${rest.join("-")}`;
+  }
+  if (path.length === 2) {
+    return `origam-${path[0]}---${path[1]}`;
+  }
+  if (path.length === 3) {
+    return `origam-${path[0]}__${path[1]}---${path[2]}`;
+  }
+  if (path.length === 4) {
+    return `origam-${path[0]}__${path[1]}--${path[2]}---${path[3]}`;
+  }
+  return `origam-${path.join("-")}`;
+}
+export function tokenPathToCssVar(path, isComponent) {
+  return `--${tokenPathToCssVarName(path, isComponent)}`;
+}

package/dist/src/utils/index.cjs

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _formatTime = require("./Media/format-time.util.cjs");
+Object.keys(_formatTime).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formatTime[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formatTime[key];
+    }
+  });
+});
 var _anchor = require("./Commons/anchor.util.cjs");
 Object.keys(_anchor).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -36,6 +47,17 @@ Object.keys(_color).forEach(function (key) {
     }
   });
 });
+var _gradient = require("./Commons/gradient.util.cjs");
+Object.keys(_gradient).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gradient[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gradient[key];
+    }
+  });
+});
 var _commons = require("./Commons/commons.util.cjs");
 Object.keys(_commons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -509,17 +531,6 @@ Object.keys(_slideGroup).forEach(function (key) {
     }
   });
 });
-var _sliderField = require("./SliderField/slider-field.util.cjs");
-Object.keys(_sliderField).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _sliderField[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _sliderField[key];
-    }
-  });
-});
 var _parallaxElement = require("./Parallax/parallax-element.util.cjs");
 Object.keys(_parallaxElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -575,17 +586,6 @@ Object.keys(_group2).forEach(function (key) {
     }
   });
 });
-var _chart = require("./Charts/chart.util.cjs");
-Object.keys(_chart).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _chart[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _chart[key];
-    }
-  });
-});
 var _fuzzyMatch = require("./CommandPalette/fuzzy-match.util.cjs");
 Object.keys(_fuzzyMatch).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -662,4 +662,59 @@ Object.keys(_validatePattern).forEach(function (key) {
       return _validatePattern[key];
     }
   });
+});
+var _qrCodeAdapters = require("./QrCode/qr-code-adapters.util.cjs");
+Object.keys(_qrCodeAdapters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _qrCodeAdapters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _qrCodeAdapters[key];
+    }
+  });
+});
+var _path = require("./Chart/path.util.cjs");
+Object.keys(_path).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _path[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _path[key];
+    }
+  });
+});
+var _mercator = require("./Chart/mercator.util.cjs");
+Object.keys(_mercator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mercator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mercator[key];
+    }
+  });
+});
+var _tokenName = require("./Theme/token-name.util.cjs");
+Object.keys(_tokenName).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokenName[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokenName[key];
+    }
+  });
+});
+var _applyTheme = require("./Theme/apply-theme.util.cjs");
+Object.keys(_applyTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _applyTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _applyTheme[key];
+    }
+  });
 });

package/dist/src/utils/index.d.ts

@@ -1,6 +1,8 @@
+export * from './Media/format-time.util';
 export * from './Commons/anchor.util';
 export * from './Commons/border.util';
 export * from './Commons/color.util';
+export * from './Commons/gradient.util';
 export * from './Commons/commons.util';
 export * from './Commons/console.util';
 export * from './Commons/date.util';
@@ -44,13 +46,11 @@ export * from './Input/input.util';
 export * from './List/list-item.util';
 export * from './Transition/transition.util';
 export * from './Slide/slide-group.util';
-export * from './SliderField/slider-field.util';
 export * from './Parallax/parallax-element.util';
 export * from './DataTable/headers.util';
 export * from './DataTable/items.util';
 export * from './DataTable/sort.util';
 export * from './DataTable/group.util';
-export * from './Charts/chart.util';
 export * from './CommandPalette/fuzzy-match.util';
 export * from './Code/parse-highlight-lines.util';
 export * from './Textarea/sanitize-html.util';
@@ -58,3 +58,8 @@ export * from './Textarea/html-to-markdown.util';
 export * from './Mask/apply-mask.util';
 export * from './Mask/resolve-mask-config.util';
 export * from './Mask/validate-pattern.util';
+export * from './QrCode/qr-code-adapters.util';
+export * from './Chart/path.util';
+export * from './Chart/mercator.util';
+export * from './Theme/token-name.util';
+export * from './Theme/apply-theme.util';

package/dist/src/utils/index.js

@@ -1,6 +1,8 @@
+export * from "./Media/format-time.util.js";
 export * from "./Commons/anchor.util.js";
 export * from "./Commons/border.util.js";
 export * from "./Commons/color.util.js";
+export * from "./Commons/gradient.util.js";
 export * from "./Commons/commons.util.js";
 export * from "./Commons/console.util.js";
 export * from "./Commons/date.util.js";
@@ -44,13 +46,11 @@ export * from "./Input/input.util.js";
 export * from "./List/list-item.util.js";
 export * from "./Transition/transition.util.js";
 export * from "./Slide/slide-group.util.js";
-export * from "./SliderField/slider-field.util.js";
 export * from "./Parallax/parallax-element.util.js";
 export * from "./DataTable/headers.util.js";
 export * from "./DataTable/items.util.js";
 export * from "./DataTable/sort.util.js";
 export * from "./DataTable/group.util.js";
-export * from "./Charts/chart.util.js";
 export * from "./CommandPalette/fuzzy-match.util.js";
 export * from "./Code/parse-highlight-lines.util.js";
 export * from "./Textarea/sanitize-html.util.js";
@@ -58,3 +58,8 @@ export * from "./Textarea/html-to-markdown.util.js";
 export * from "./Mask/apply-mask.util.js";
 export * from "./Mask/resolve-mask-config.util.js";
 export * from "./Mask/validate-pattern.util.js";
+export * from "./QrCode/qr-code-adapters.util.js";
+export * from "./Chart/path.util.js";
+export * from "./Chart/mercator.util.js";
+export * from "./Theme/token-name.util.js";
+export * from "./Theme/apply-theme.util.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.3.0",
+  "version": "2.6.1",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [
@@ -48,18 +48,23 @@
     },
     "./styles": {
       "scss": "./dist/src/assets/scss/main.scss",
-      "style": "./dist/src/assets/css/main.css"
+      "style": "./dist/src/assets/css/main.css",
+      "import": "./dist/src/assets/css/main.css",
+      "require": "./dist/src/assets/css/main.css",
+      "default": "./dist/src/assets/css/main.css"
     },
     "./tokens/css": "./dist/src/assets/css/tokens/primitive.css",
     "./tokens/css/primitive": "./dist/src/assets/css/tokens/primitive.css",
     "./tokens/css/light": "./dist/src/assets/css/tokens/light.css",
     "./tokens/css/dark": "./dist/src/assets/css/tokens/dark.css",
     "./tokens/css/utilities": "./dist/src/assets/css/tokens/origam-utilities.css",
+    "./tokens/css/themes-all": "./dist/src/assets/css/tokens/themes-all.css",
     "./tokens/scss": "./dist/src/assets/scss/tokens/_primitive.scss",
     "./tokens/scss/primitive": "./dist/src/assets/scss/tokens/_primitive.scss",
     "./tokens/scss/light": "./dist/src/assets/scss/tokens/_light.scss",
     "./tokens/scss/dark": "./dist/src/assets/scss/tokens/_dark.scss",
     "./tokens/scss/utilities": "./dist/src/assets/scss/tokens/_origam-utilities.scss",
+    "./tokens/scss/themes-all": "./dist/src/assets/scss/tokens/_themes-all.scss",
     "./tokens/types": "./dist/src/types/tokens.type.d.ts",
     "./origam": "./dist/src/origam.js",
     "./nuxt": {
@@ -87,37 +92,9 @@
     "README.md",
     "CHANGELOG.md"
   ],
-  "scripts": {
-    "dev": "npm run server:dev && npm run story:dev && npm run docs:dev",
-    "build": "npm run server:build && npm run story:build && npm run docs:build",
-    "preview": "npm run server:preview && npm run story:preview && npm run docs:preview",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview",
-    "server:dev": "npm run tokens:build && vite",
-    "server:build": "npm run tokens:build && unbuild",
-    "server:preview": "vite preview",
-    "tokens:build": "node scripts/build-tokens.mjs",
-    "tokens:watch": "node scripts/build-tokens.mjs --watch",
-    "tokens:lint": "node scripts/build-tokens.mjs --dry-run --strict",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "type:build": "vue-tsc --build --force",
-    "type:dev": "vue-tsc --watch --noEmit --skipLibCheck",
-    "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "test:unit": "vitest",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
-    "test:e2e:report": "playwright show-report",
-    "test:e2e:cypress-legacy": "cypress",
-    "test:open": "cypress open",
-    "clean": "rm -rf dist node_modules package-lock.json",
-    "prepublishOnly": "npm run tokens:build && npm run server:build && npm run test:unit -- --run"
-  },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "qrcode-generator": "^2.0.4",
     "shiki": "^3.8.1"
   },
   "peerDependencies": {
@@ -134,40 +111,29 @@
     }
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^1.0.0-beta.1",
     "@nuxt/kit": "^4.4.5",
-    "@playwright/test": "^1.48.0",
+    "@types/node": "^24.0.14",
     "@tokens-studio/sd-transforms": "^1.2.9",
-    "@types/jest": "^30.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9.31.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-vue": "^10.3.0",
-    "globals": "^16.3.0",
-    "histoire": "^1.0.0-beta.1",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
-    "markdown-it-codetabs": "^1.2.0",
-    "markdown-it-deflist": "^3.0.0",
-    "markdown-it-footnote": "^4.0.0",
     "sass": "^1.89.2",
     "style-dictionary": "^4.4.0",
     "ts-transformer-keys": "^0.4.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.37.0",
     "unbuild": "^3.5.0",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^7.0.5",
     "vite-plugin-commonjs": "^0.10.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitepress": "^1.6.3",
-    "vitest": "^3.2.4",
     "vue": "^3.5.17",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-i18n": "^11.1.10",
-    "vue-router": "^4.5.1",
     "vue-sfc-transformer": "^0.1.16",
     "vue-tsc": "^3.0.2"
+  },
+  "scripts": {
+    "build": "pnpm run tokens:build && unbuild",
+    "lib:build": "pnpm run build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json",
+    "tokens:build": "node scripts/build-tokens.mjs",
+    "tokens:watch": "node scripts/build-tokens.mjs --watch",
+    "tokens:lint": "node scripts/build-tokens.mjs --dry-run --strict"
   }
-}
+}