@rokkit/themes 1.0.0-next.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jerry Thomas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+# Themes
+
+Contains the following themes for use with `Rokkit` components.
+
+- Rokkit
+- Modern
+- Material
+
+This package also includes some mixins which make it easy to implement `light` and `dark` modes.
+
+- markdown.css: A customized variant of Github flavored markdown
+- prism.css: A variation of the prism syntax highlighting colors using CSS variables to support light and dark modes.
+- palette.css: Light and dark palettes using CSS variables.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@rokkit/themes",
+  "version": "1.0.0-next.11",
+  "description": "Themes for use with rokkit components.",
+  "author": "Jerry Thomas <me@jerrythomas.name>",
+  "license": "MIT",
+  "svelte": "src/index.js",
+  "module": "src/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "prettier": "@jerrythomas/prettier-config",
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@jerrythomas/eslint-config-svelte": "^1.0.2",
+    "@jerrythomas/prettier-config": "^1.0.0",
+    "@sveltejs/vite-plugin-svelte": "^1.4.0",
+    "@vitest/ui": "~0.12.10",
+    "c8": "^7.12.0",
+    "eslint": "^7.32.0",
+    "jsdom": "^19.0.0",
+    "svelte": "^3.55.1",
+    "typescript": "^4.9.5",
+    "vite": "^3.2.5",
+    "vitest": "~0.19.1",
+    "@rokkit/core": "1.0.0-next.11",
+    "shared-config": "1.0.0"
+  },
+  "files": [
+    "src/**/*.js",
+    "src/**/*.svelte",
+    "!src/fixtures",
+    "!src/**/*.spec.js"
+  ],
+  "exports": {
+    "./modern.css": "./src/modern.css",
+    "./material.css": "./src/material.css",
+    "./minimal.css": "./src/minimal.css",
+    "./rokkit.css": "./src/rokkit.css",
+    "./prism.css": "./src/prism.css",
+    "./palette.css": "./src/palette.css",
+    "./markdown.css": "./src/markdown.css",
+    "./package.json": "./src/package.json",
+    ".": {
+      "import": "./src/index.js"
+    }
+  },
+  "scripts": {
+    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
+    "format": "prettier --write --plugin-search-dir=. .",
+    "test:ct": "playwright test -c playwright.config.js",
+    "test:ui": "vitest --ui",
+    "test:ci": "vitest run",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "upgrade": "pnpm upgrade"
+  }
+}

package/src/constants.js

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

package/src/index.js

@@ -0,0 +1,2 @@
+export * from './utils'
+export * from './constants'

package/src/utils.js

@@ -0,0 +1,88 @@
+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] : modifier.none
+
+	return shades.reduce(
+		(result, shade) => ({
+			...result,
+			[shade]: fn(`var(--${name}-${shade})`)
+		}),
+		{ DEFAULT: fn(`var(--${name}-500)`) }
+	)
+}
+
+export function stateColors(name, modifier = 'none') {
+	const fn = modifier in modifiers ? modifiers[modifier] : modifier.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] : modifier.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)`),
+		base: fn(`var(--skin-100)`),
+		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, variant = '') {
+	const prefix = collection ? collection + ':' : ''
+	const suffix = variant ? '-' + variant : ''
+
+	const shortcuts = icons.reduce(
+		(acc, name) => ({
+			...acc,
+			[name]:
+				prefix +
+				(name.startsWith('selector')
+					? 'chevron-sort'
+					: name.replace('rating', 'star').replace('navigate', 'chevron')) +
+				suffix
+		}),
+		{}
+	)
+
+	return shortcuts
+}