@rokkit/core 1.0.0-next.84 → 1.0.0-next.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.84",
+  "version": "1.0.0-next.86",
   "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.1.4",
     "vitest": "~1.3.1",
-    "shared-config": "1.0.0-next.84",
-    "validators": "1.0.0-next.84"
+    "shared-config": "1.0.0-next.86",
+    "validators": "1.0.0-next.86"
   },
   "files": [
     "src/**/*.js",

package/src/colors/index.js

@@ -1,5 +1,15 @@
 import { defaultTailwindColors } from './tailwind'
-
+export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
+export const defaultPalette = [
+	'neutral',
+	'primary',
+	'secondary',
+	'accent',
+	'success',
+	'warning',
+	'danger',
+	'info'
+]
 export * from './syntax'
 
 export const defaultColors = {

package/src/constants.js

@@ -1,4 +1,4 @@
-export { defaultColors, syntaxColors } from './colors'
+export { defaultColors, syntaxColors, shades, defaultPalette } from './colors'
 
 /**
  * @type {import('./types).FieldMapping} Fields
@@ -83,9 +83,9 @@ export const defaultThemeMapping = {
 	accent: 'sky',
 	success: 'green',
 	warning: 'yellow',
+	danger: 'red',
 	error: 'red',
-	info: 'cyan',
-	pass: 'green'
+	info: 'cyan'
 }
 
 export function stateIconsFromNames(icons) {

package/src/index.js

@@ -7,5 +7,6 @@ export * from './connector'
 export * from './ticks'
 export * from './calendar'
 export * from './utils'
+export * from './theme'
 export * from './parser'
 export * from './string'

package/src/theme.js

@@ -0,0 +1,129 @@
+import { defaultThemeMapping, defaultColors, syntaxColors } from './constants'
+import { shades, defaultPalette } from './colors'
+
+const modifiers = {
+	hsl: (value) => `hsl(${value})`,
+	rgb: (value) => `rgb(${value})`,
+	none: (value) => value
+}
+
+/**
+ * Generate shades for a color using css varuable
+ *
+ * @param {string} name
+ * @returns
+ */
+export function shadesOf(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--${name}-${shade})`)
+		}),
+		{
+			DEFAULT: fn(`var(--${name}-500)`),
+			sunken: fn(`var(--${name}-50)`),
+			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)`)
+		}
+	)
+}
+
+export function stateColors(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+	return {
+		DEFAULT: fn(`var(--${name}-500)`),
+		light: fn(`var(--${name}-200)`),
+		dark: fn(`var(--${name}-700)`)
+	}
+}
+
+export function themeColors(modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
+
+	let states = ['info', 'danger', 'warning', 'success', 'error']
+	let variants = ['neutral', 'primary', 'secondary', 'accent']
+	let colors = states.reduce(
+		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
+		{}
+	)
+	colors = variants.reduce(
+		(acc, variant) => ({ ...acc, [variant]: shadesOf(variant, modifier) }),
+		colors
+	)
+	colors.neutral = {
+		...colors.neutral,
+		contrast: fn(`var(--neutral-800)`),
+		zebra: fn(`var(--neutral-zebra)`)
+	}
+
+	return colors
+}
+
+export function contrastColors(light = '#ffffff', dark = '#000000', palette = defaultPalette) {
+	const colors = palette
+		.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'
+			}))
+		])
+		.reduce((acc, item) => [...acc, ...item], [])
+	return colors
+}
+
+export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
+	mapping = { ...defaultThemeMapping, ...mapping }
+	const variants = Object.keys(mapping)
+	const rules = variants
+		.flatMap((variant) => [
+			shades.map((shade) => ({
+				key: `--${variant}-${shade}`,
+				value: colors[mapping[variant]][shade],
+				mode: 'light'
+			})),
+			shades.map((shade, i) => ({
+				key: `--${variant}-${shade}`,
+				value: colors[mapping[variant]][shades[shades.length - i - 1]],
+				mode: 'dark'
+			}))
+		])
+		.reduce((acc, item) => [...acc, ...item], [])
+
+	const light = rules
+		.filter((rule) => rule.mode === 'light')
+		.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {})
+	const dark = rules
+		.filter((rule) => rule.mode === 'dark')
+		.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {})
+
+	return [
+		[
+			`${name}-mode-light`,
+			{
+				...light,
+				...syntaxColors['one-dark'].light
+			}
+		],
+		[
+			`${name}-mode-dark`,
+			{
+				...dark,
+				...syntaxColors['one-dark'].dark
+			}
+		]
+	]
+}

package/src/utils.js

@@ -1,11 +1,3 @@
-import { defaultThemeMapping, defaultColors, syntaxColors } from './constants'
-
-const modifiers = {
-	hsl: (value) => `hsl(${value})`,
-	rgb: (value) => `rgb(${value})`,
-	none: (value) => value
-}
-
 /**
  * Generates a random id
  *
@@ -25,67 +17,6 @@ export function isObject(val) {
 	return typeof val === 'object' && val !== null && !(val instanceof Date)
 }
 
-/**
- * Generate shades for a color using css varuable
- *
- * @param {string} name
- * @returns
- */
-export function shadesOf(name, modifier = 'none') {
-	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(
-		(result, shade) => ({
-			...result,
-			[shade]: fn(`var(--${name}-${shade})`)
-		}),
-		{
-			DEFAULT: fn(`var(--${name}-500)`),
-			sunken: fn(`var(--${name}-50)`),
-			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)`)
-		}
-	)
-}
-
-export function stateColors(name, modifier = 'none') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
-	return {
-		DEFAULT: fn(`var(--${name}-500)`),
-		light: fn(`var(--${name}-200)`),
-		dark: fn(`var(--${name}-700)`)
-	}
-}
-
-export function themeColors(modifier = 'none') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
-
-	let states = ['info', 'error', 'warn', 'pass']
-	let variants = ['neutral', 'primary', 'secondary', 'accent']
-	let colors = states.reduce(
-		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
-		{}
-	)
-	colors = variants.reduce(
-		(acc, variant) => ({ ...acc, [variant]: shadesOf(variant, modifier) }),
-		colors
-	)
-	colors.neutral = {
-		...colors.neutral,
-		contrast: fn(`var(--neutral-800)`),
-		zebra: fn(`var(--neutral-zebra)`)
-	}
-
-	return colors
-}
-
 export function iconShortcuts(icons, collection, variants) {
 	const suffix = variants ? `-${variants}` : ''
 	const shortcuts = !collection
@@ -105,60 +36,3 @@ 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]
-	mapping = { ...defaultThemeMapping, ...mapping }
-	const variants = Object.keys(mapping)
-	const rules = variants
-		.flatMap((variant) => [
-			shades.map((shade) => ({
-				key: `--${variant}-${shade}`,
-				value: colors[mapping[variant]][shade],
-				mode: 'light'
-			})),
-			shades.map((shade, i) => ({
-				key: `--${variant}-${shade}`,
-				value: colors[mapping[variant]][shades[shades.length - i - 1]],
-				mode: 'dark'
-			}))
-		])
-		.reduce((acc, item) => [...acc, ...item], [])
-
-	const light = rules
-		.filter((rule) => rule.mode === 'light')
-		.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {})
-	const dark = rules
-		.filter((rule) => rule.mode === 'dark')
-		.reduce((acc, item) => ({ ...acc, [item.key]: item.value }), {})
-
-	return [
-		[
-			`${name}-mode-light`,
-			{
-				...light,
-				...syntaxColors['one-dark'].light
-			}
-		],
-		[
-			`${name}-mode-dark`,
-			{
-				...dark,
-				...syntaxColors['one-dark'].dark
-			}
-		]
-	]
-}