@rokkit/core 1.0.0-next.78 → 1.0.0-next.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.78",
+  "version": "1.0.0-next.80",
   "description": "Core components, actions and stores for svelte apps.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -22,8 +22,8 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
     "vitest": "~1.2.2",
-    "shared-config": "1.0.0-next.78",
-    "validators": "1.0.0-next.78"
+    "shared-config": "1.0.0-next.80",
+    "validators": "1.0.0-next.80"
   },
   "files": [
     "src/**/*.js",

package/src/utils.js

@@ -32,7 +32,7 @@ export function isObject(val) {
  * @returns
  */
 export function shadesOf(name, modifier = 'none') {
-	const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+	const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
 
 	return shades.reduce(
@@ -42,16 +42,15 @@ export function shadesOf(name, modifier = 'none') {
 		}),
 		{
 			DEFAULT: fn(`var(--${name}-500)`),
-			inset: fn(`var(--${name}-50)`),
 			sunken: fn(`var(--${name}-50)`),
-			recessed: fn(`var(--${name}-50)`),
-			base: fn(`var(--${name}-100)`),
-			subtle: fn(`var(--${name}-200)`),
-			muted: fn(`var(--${name}-300)`),
-			raised: fn(`var(--${name}-400)`),
-			elevated: fn(`var(--${name}-500)`),
-			floating: fn(`var(--${name}-600)`),
-			contrast: fn(`var(--${name}-700)`)
+			inset: fn(`var(--${name}-100)`),
+			base: fn(`var(--${name}-200)`),
+			subtle: fn(`var(--${name}-300)`),
+			muted: fn(`var(--${name}-400)`),
+			raised: fn(`var(--${name}-500)`),
+			elevated: fn(`var(--${name}-600)`),
+			floating: fn(`var(--${name}-700)`),
+			contrast: fn(`var(--${name}-800)`)
 		}
 	)
 }
@@ -106,12 +105,24 @@ export function scaledPath(size, x) {
 	if (Array.isArray(x)) return x.map((x) => scaledPath(size, x)).join(' ')
 	return typeof x === 'number' ? x * size : x
 }
-
+export function contrastColors(light, dark, shades, mapping) {
+	Object.keys(mapping).flatMap((variant) => [
+		shades.map((shade) => ({
+			key: `--on-${variant}-${shade}`,
+			value: shade < 500 ? dark : light,
+			mode: 'light'
+		})),
+		shades.map((shade) => ({
+			key: `--on-${variant}-${shade}`,
+			value: shade > 500 ? dark : light,
+			mode: 'dark'
+		}))
+	])
+}
 export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
-	const shades = ['50', 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+	const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 	mapping = { ...defaultThemeMapping, ...mapping }
 	const variants = Object.keys(mapping)
-
 	const rules = variants
 		.flatMap((variant) => [
 			shades.map((shade) => ({