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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.85",
+  "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.85",
-    "validators": "1.0.0-next.85"
+    "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/theme.js

@@ -1,21 +1,11 @@
 import { defaultThemeMapping, defaultColors, syntaxColors } from './constants'
+import { shades, defaultPalette } from './colors'
 
 const modifiers = {
 	hsl: (value) => `hsl(${value})`,
 	rgb: (value) => `rgb(${value})`,
 	none: (value) => value
 }
-const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-const defaultPalette = [
-	'neutral',
-	'primary',
-	'secondary',
-	'accent',
-	'info',
-	'error',
-	'warn',
-	'pass'
-]
 
 /**
  * Generate shades for a color using css varuable
@@ -58,7 +48,7 @@ export function stateColors(name, modifier = 'none') {
 export function themeColors(modifier = 'none') {
 	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
 
-	let states = ['info', 'error', 'warn', 'pass']
+	let states = ['info', 'danger', 'warning', 'success', 'error']
 	let variants = ['neutral', 'primary', 'secondary', 'accent']
 	let colors = states.reduce(
 		(acc, state) => ({ ...acc, [state]: stateColors(state, modifier) }),
@@ -96,7 +86,6 @@ export function contrastColors(light = '#ffffff', dark = '#000000', palette = de
 }
 
 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