@rokkit/core 1.0.0-next.162 → 1.0.0-next.164

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.162",
+  "version": "1.0.0-next.164",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "repository": {
     "type": "git",
@@ -46,6 +46,6 @@
     "ramda": "^0.32.0"
   },
   "devDependencies": {
-    "@rokkit/icons": "1.0.0-next.162"
+    "@rokkit/icons": "1.0.0-next.164"
   }
 }

package/src/theme.ts

@@ -133,8 +133,14 @@ export function semanticShortcuts(name) {
  */
 export function contrastShortcuts(name) {
 	return [
-		[`text-on-${name}`, `text-${name}-50 dark:text-${name}-50`],
-		[`text-on-${name}-muted`, `text-${name}-100 dark:text-${name}-200`]
+		[
+			new RegExp(`^text-on-${name}(\\/\\d+)?$`),
+			([, end]) => `text-${name}-50${end || ''} dark:text-${name}-50${end || ''}`
+		],
+		[
+			new RegExp(`^text-on-${name}-muted(\\/\\d+)?$`),
+			([, end]) => `text-${name}-100${end || ''} dark:text-${name}-200${end || ''}`
+		]
 	]
 }
 
@@ -205,4 +211,33 @@ export class Theme {
 	getShortcuts(name) {
 		return [...semanticShortcuts(name), ...contrastShortcuts(name)]
 	}
+
+	/**
+	 * Generates CSS custom property declarations for the semantic z0–z10 tone scale.
+	 *
+	 * Returns a CSS string with two blocks:
+	 * - `:root` — light-mode aliases (z0=50 … z10=950)
+	 * - `[data-mode="dark"]` — dark-mode aliases (z0=950 … z10=50)
+	 *
+	 * These let consumers write `var(--color-primary-z5)` instead of hardcoding
+	 * numeric shades, and the value automatically adapts to the active mode.
+	 */
+	getZScaleCSS() {
+		const names = Object.keys(this.#mapping)
+
+		const lightLines = names.flatMap((name) =>
+			Object.entries(TONE_MAP).map(
+				([zone, light]) => `  --color-${name}-${zone}: var(--color-${name}-${light});`
+			)
+		)
+
+		const darkLines = names.flatMap((name) =>
+			Object.entries(TONE_MAP).map(([zone, light]) => {
+				const dark = 1000 - light
+				return `  --color-${name}-${zone}: var(--color-${name}-${dark});`
+			})
+		)
+
+		return `:root {\n${lightLines.join('\n')}\n}\n[data-mode="dark"] {\n${darkLines.join('\n')}\n}`
+	}
 }