@rokkit/themes 1.0.0-next.36 → 1.0.0-next.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.0-next.36",
+  "version": "1.0.0-next.38",
   "description": "Themes for use with rokkit components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -12,17 +12,16 @@
     "access": "public"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@sveltejs/vite-plugin-svelte": "^2.4.3",
     "@vitest/coverage-v8": "^0.33.0",
     "@vitest/ui": "~0.33.0",
-    "c8": "^8.0.0",
     "jsdom": "^22.1.0",
-    "svelte": "^4.0.5",
+    "svelte": "^4.1.1",
     "typescript": "^5.1.6",
-    "vite": "^4.4.4",
+    "vite": "^4.4.7",
     "vitest": "~0.33.0",
-    "@rokkit/core": "1.0.0-next.36",
-    "shared-config": "1.0.0-next.36"
+    "@rokkit/core": "1.0.0-next.38",
+    "shared-config": "1.0.0-next.38"
   },
   "files": [
     "src/**/*.js",

package/src/constants.js

@@ -1,3 +1,3 @@
-import { themeColors } from './utils'
+import { themeColors } from '@rokkit/core'
 export { defaultStateIcons, defaultIcons } from '@rokkit/core'
 export const defaultThemeColors = themeColors()

package/src/index.js

@@ -1,2 +1,2 @@
-export * from './utils'
+export { iconShortcuts, themeColors } from '@rokkit/core'
 export * from './constants'

package/src/utils.js

@@ -1,94 +0,0 @@
-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 shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
-	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)`),
-			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)`)
-		}
-	)
-}
-
-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}-100)`),
-		dark: fn(`var(--${name}-800)`)
-	}
-}
-
-export function themeColors(modifier = 'none') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.none
-
-	let states = ['info', 'error', 'warn', 'pass']
-	let variants = ['skin', '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.skin = {
-		...colors.skin,
-		contrast: fn(`var(--skin-800)`),
-		zebra: fn(`var(--skin-zebra)`)
-	}
-
-	return colors
-}
-
-// export function stateIconsFromNames(names) {
-// 	return names
-// 		.map((k) => [...k.split('-'), k])
-// 		.reduce(
-// 			(acc, [element, state, icon]) => ({
-// 				...acc,
-// 				[element]: { ...acc[element], [state]: icon }
-// 			}),
-// 			{}
-// 		)
-// }
-
-export function iconShortcuts(icons, collection, variants) {
-	const suffix = variants ? `-${variants}` : ''
-	const shortcuts = !collection
-		? {}
-		: icons.reduce(
-				(acc, name) => ({
-					...acc,
-					[name]: [collection, name].join(':') + suffix
-				}),
-				{}
-		  )
-
-	return shortcuts
-}