@elmethis/core 0.22.0 → 0.24.0

package/dist/tokens.mjs

@@ -0,0 +1,170 @@
+//#region src/style/token.ts
+const PRIMITIVE_VALUES = {
+	color: {
+		red: {
+			100: "#e9dddd",
+			500: "#ae6e6e",
+			900: "#291313"
+		},
+		orange: {
+			100: "#ebdfdb",
+			500: "#b8816e",
+			900: "#3f251c"
+		},
+		yellow: {
+			100: "#ebe6db",
+			500: "#b09a66",
+			900: "#332b19"
+		},
+		green: {
+			100: "#dde9e2",
+			500: "#659878",
+			900: "#15281d"
+		},
+		cyan: {
+			100: "#dde9e7",
+			500: "#6091a0",
+			900: "#203b37"
+		},
+		blue: {
+			100: "#dde2e9",
+			500: "#68779f",
+			900: "#242d3e"
+		},
+		purple: {
+			100: "#e3dde9",
+			500: "#8d799f",
+			900: "#271836"
+		},
+		magenta: {
+			100: "#eadce4",
+			500: "#b17396",
+			900: "#3c1f2f"
+		},
+		slate: {
+			100: "#d7d9e1",
+			200: "#b0b5be",
+			300: "#949ba7",
+			400: "#6c7483",
+			500: "#555b67",
+			600: "#40444c",
+			700: "#393e46",
+			800: "#31353a",
+			900: "#242629"
+		},
+		gold: {
+			100: "#f7f5f4",
+			200: "#efecea",
+			300: "#d9d3cc",
+			400: "#cabfb2",
+			500: "#c6b5a2",
+			600: "#bda68b",
+			700: "#a68c70",
+			800: "#8e7356",
+			900: "#6e583f"
+		}
+	},
+	font: { family: {
+		sans: "\"DM Sans\", \"Zen Kaku Gothic New\", -apple-system, BlinkMacSystemFont, \"Hiragino Kaku Gothic ProN\", Meiryo, sans-serif",
+		monospace: "\"DM Mono\", \"Source Code Pro\", Menlo, Consolas, \"DejaVu Sans Mono\", \"Zen Kaku Gothic New\", monospace"
+	} }
+};
+const makePrimitive = (path, value) => {
+	const property = `--elmethis-primitive-${path.join("-")}`;
+	return {
+		property,
+		value,
+		ref: `var(${property})`
+	};
+};
+const buildPrimitives = (values, path) => {
+	const out = {};
+	for (const [key, value] of Object.entries(values)) {
+		const next = [...path, key];
+		out[key] = typeof value === "string" ? makePrimitive(next, value) : buildPrimitives(value, next);
+	}
+	return out;
+};
+/** Primitive tokens, addressable as `primitive.color.blue[500]`. */
+const primitive = buildPrimitives(PRIMITIVE_VALUES, []);
+const resolve = (ref) => typeof ref === "string" ? ref : ref.ref;
+/** A theme-independent semantic value. */
+const common = (ref) => ({ common: resolve(ref) });
+/** A native `light-dark()` semantic value. */
+const theme = (light, dark) => ({
+	light: resolve(light),
+	dark: resolve(dark)
+});
+const { color, font } = primitive;
+/**
+* Semantic tokens, keyed by the full kebab suffix that follows `--elmethis-`
+* (so `"color-accent-info-surface"` emits `--elmethis-color-accent-info-surface`).
+*
+* Flat keys keep a 1:1 mapping to the emitted CSS and sidestep the
+* leaf-vs-group ambiguity a nested tree creates for base/variant pairs — e.g.
+* `color-neutral` coexisting with `color-neutral-weak`. References to the
+* primitive layer are symbolic (`PrimitiveToken.ref`), never resolved values.
+*/
+const semanticTokens = {
+	/**
+	* Vertical rhythm between stacked blocks. Applied as `gap` on an explicit
+	* flex-column "stack" container (e.g. each framework's `ElmA2ui` surface,
+	* `ElmMarkdown`, and container child slots like Callout/BlockQuote/Toggle/
+	* TabPanel) — never as a leading margin on individual leaf components.
+	* `gap` only ever applies between items, so there's no first-child case to
+	* special-case and no risk of a standalone/nested component floating an
+	* unexplained gap above it.
+	*/
+	"stack-gap": common("2rem"),
+	"box-shadow-small": common("0 0 1px var(--elmethis-color-box-shadow)"),
+	"box-shadow-medium": common("0 0 2px var(--elmethis-color-box-shadow)"),
+	"box-shadow-large": common("0 0 4px var(--elmethis-color-box-shadow)"),
+	"font-family-sans": common(font.family.sans),
+	"font-family-monospace": common(font.family.monospace),
+	"color-box-shadow": theme("oklch(from #3e434b l c h / 0.25)", color.slate[900]),
+	"color-accent-link-surface": theme(color.blue[100], color.blue[900]),
+	"color-accent-link": common(color.blue[500]),
+	"color-accent-link-visited": common(color.purple[500]),
+	"color-accent-link-surface-visited": theme(color.purple[100], color.purple[900]),
+	"color-accent-info": common(color.blue[500]),
+	"color-accent-info-surface": theme(color.blue[100], color.blue[900]),
+	"color-accent-success": common(color.green[500]),
+	"color-accent-success-surface": theme(color.green[100], color.green[900]),
+	"color-accent-important": common(color.purple[500]),
+	"color-accent-important-surface": theme(color.purple[100], color.purple[900]),
+	"color-accent-warning": common(color.yellow[500]),
+	"color-accent-warning-surface": theme(color.yellow[100], color.yellow[900]),
+	"color-accent-error": common(color.red[500]),
+	"color-accent-error-surface": theme(color.red[100], color.red[900]),
+	"color-divider": theme(color.gold[300], color.slate[800]),
+	"color-modal-backdrop": common("oklch(from black l c h / 50%)"),
+	"color-surface-sunken": theme(color.gold[300], color.slate[800]),
+	"color-surface-base": theme(color.gold[200], color.slate[700]),
+	"color-surface-raised": theme(color.gold[100], color.slate[600]),
+	"color-neutral": theme(color.slate[400], color.slate[200]),
+	"color-neutral-weak": common(color.slate[300]),
+	"color-neutral-strong": theme(color.slate[500], color.slate[100]),
+	"color-primary": theme(color.gold[700], color.gold[500]),
+	"color-primary-weak": common(color.gold[600]),
+	"color-primary-strong": theme(color.gold[800], color.gold[400]),
+	"color-primary-hover": common("oklch(from var(--elmethis-color-primary) l c h / 15%)"),
+	"color-selection": common("oklch(from var(--elmethis-color-primary) l c h / 25%)"),
+	"color-display-red": common(color.red[500]),
+	"color-display-red-surface": theme(color.red[100], color.red[900]),
+	"color-display-orange": common(color.orange[500]),
+	"color-display-orange-surface": theme(color.orange[100], color.orange[900]),
+	"color-display-yellow": common(color.yellow[500]),
+	"color-display-yellow-surface": theme(color.yellow[100], color.yellow[900]),
+	"color-display-green": common(color.green[500]),
+	"color-display-green-surface": theme(color.green[100], color.green[900]),
+	"color-display-cyan": common(color.cyan[500]),
+	"color-display-cyan-surface": theme(color.cyan[100], color.cyan[900]),
+	"color-display-blue": common(color.blue[500]),
+	"color-display-blue-surface": theme(color.blue[100], color.blue[900]),
+	"color-display-purple": common(color.purple[500]),
+	"color-display-purple-surface": theme(color.purple[100], color.purple[900]),
+	"color-display-magenta": common(color.magenta[500]),
+	"color-display-magenta-surface": theme(color.magenta[100], color.magenta[900])
+};
+//#endregion
+export { primitive, semanticTokens };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/core",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "author": {
     "name": "Ikuma Yamashita",
     "url": "https://www.ikuma.cloud/"
@@ -24,6 +24,26 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./tokens": {
+      "import": {
+        "types": "./dist/tokens.d.mts",
+        "default": "./dist/tokens.mjs"
+      },
+      "require": {
+        "types": "./dist/tokens.d.cts",
+        "default": "./dist/tokens.cjs"
+      }
+    },
+    "./stylelint": {
+      "import": {
+        "types": "./dist/stylelint.d.mts",
+        "default": "./dist/stylelint.mjs"
+      },
+      "require": {
+        "types": "./dist/stylelint.d.cts",
+        "default": "./dist/stylelint.cjs"
+      }
+    },
     "./tokens.css": "./dist/tokens.css"
   },
   "files": [
@@ -40,13 +60,16 @@
     "zod": "^3"
   },
   "dependencies": {
+    "stylelint-config-css-modules": "^4.6.0",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^6.1.1",
     "zod-to-json-schema": "^3.25.2"
   },
   "devDependencies": {
     "@a2ui/web_core": "^0.10.5",
     "@eslint/js": "latest",
-    "@types/node": "26.1.1",
-    "@vanilla-extract/css": "^1.21.1",
+    "@types/node": "26.1.2",
+    "@vanilla-extract/css": "^1.21.2",
     "@vanilla-extract/esbuild-plugin": "^2.3.22",
     "@vitest/coverage-v8": "^4.1.10",
     "ajv": "^8.17.1",