@rokkit/core 1.0.0-next.121 → 1.0.0-next.123

package/dist/types.d.ts

@@ -243,3 +243,58 @@ export type CalendarDay = {
      */
     weekend: boolean;
 };
+export type ColorPalette = {
+    /**
+     * 50 - The color for the 50 shade.
+     */
+    "": string;
+};
+export type ColorCollection = {
+    [x: string]: ColorPalette;
+};
+export type ColorMapping = {
+    /**
+     * - The primary color.
+     */
+    primary?: string | undefined;
+    /**
+     * - The secondary color.
+     */
+    secondary?: string | undefined;
+    /**
+     * - The tertiary color.
+     */
+    tertiary?: string | undefined;
+    /**
+     * - The surface color.
+     */
+    surface?: string | undefined;
+    /**
+     * - The info color.
+     */
+    info?: string | undefined;
+    /**
+     * - The success color.
+     */
+    success?: string | undefined;
+    /**
+     * - The warning color.
+     */
+    warning?: string | undefined;
+    /**
+     * - The error color.
+     */
+    error?: string | undefined;
+};
+export type ColorTheme = {
+    /**
+     * - The color mapping.
+     */
+    mapping?: ColorMapping | undefined;
+    /**
+     * - The color collection.
+     */
+    colors?: {
+        [x: string]: ColorPalette;
+    } | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/core",
-  "version": "1.0.0-next.121",
+  "version": "1.0.0-next.123",
   "description": "Contains core utility functions and classes that can be used in various components.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -31,6 +31,6 @@
   },
   "dependencies": {
     "date-fns": "^4.1.0",
-    "ramda": "^0.30.1"
+    "ramda": "^0.31.3"
   }
 }

package/src/colors/extra.json

@@ -0,0 +1,16 @@
+{
+  "shark": {
+    "DEFAULT": "#828C9F",
+    "50": "#ffffff",
+    "100": "#efefef",
+    "200": "#E0E0E0",
+    "300": "#C1C6D0",
+    "400": "#828C9F",
+    "500": "#677287",
+    "600": "#51596A",
+    "700": "#3B414D",
+    "800": "#2E323C",
+    "900": "#20242A",
+    "950": "#1A1C22"
+  }
+}

package/src/colors/index.js

@@ -1,9 +1,11 @@
-import defaultTailwindColors from './tailwind.json' with { type: 'json' }
+import { colors } from '@unocss/preset-mini/colors'
+// import defaultTailwindColors from './tailwind.json' with { type: 'json' }
 import syntaxColorPalette from './syntax.json' with { type: 'json' }
+import extraColors from './extra.json' with { type: 'json' }
 
 export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 export const defaultPalette = [
-	'neutral',
+	'surface',
 	'primary',
 	'secondary',
 	'accent',
@@ -15,5 +17,6 @@ export const defaultPalette = [
 
 export const syntaxColors = syntaxColorPalette
 export const defaultColors = {
-	...defaultTailwindColors
+	...colors,
+	...extraColors
 }

package/src/colors/syntax.json

@@ -2,7 +2,7 @@
   "one-dark": {
     "dark": {
       "--tab-size": "2",
-      "--code-fill": "var(--neutral-100)",
+      "--code-fill": "var(--surface-100)",
       "--code-normal": "#e06c75",
       "--code-string": "#98c379",
       "--code-number": "#d19a66",
@@ -14,14 +14,14 @@
       "--code-operator": "#56b6c2",
       "--code-function": "#61afef",
       "--code-gutter-marker": "black",
-      "--code-gutter-subtle": "#999",
+      "--code-gutter-z2": "#999",
       "--code-cursor": "#24292e",
       "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
       "--code-linenumbers": "rgba(27, 31, 35, 0.3)"
     },
     "light": {
       "--tab-size": "2",
-      "--code-fill": "var(--neutral-100)",
+      "--code-fill": "var(--surface-100)",
       "--code-normal": "#333333",
       "--code-string": "#9D8248",
       "--code-number": "#71A15D",
@@ -33,7 +33,7 @@
       "--code-operator": "#bf5625",
       "--code-function": "#a71d5d",
       "--code-gutter-marker": "black",
-      "--code-gutter-subtle": "#999",
+      "--code-gutter-z2": "#999",
       "--code-cursor": "#24292e",
       "--code-cursor-block": "rgba(20, 255, 20, 0.5)",
       "--code-linenumbers": "rgba(27, 31, 35, 0.3)"

package/src/colors/tailwind.json

@@ -271,19 +271,5 @@
     "800": "#27272a",
     "900": "#18181b",
     "950": "#000000"
-  },
-  "shark": {
-    "DEFAULT": "#677287",
-    "50": "#ffffff",
-    "100": "#efefef",
-    "200": "#E0E0E0",
-    "300": "#C1C6D0",
-    "400": "#828C9F",
-    "500": "#677287",
-    "600": "#51596A",
-    "700": "#3B414D",
-    "800": "#2E323C",
-    "900": "#20242A",
-    "950": "#1A1C22"
   }
 }

package/src/constants.js

@@ -38,6 +38,8 @@ export const defaultIcons = [
 	'action-clear',
 	'action-search',
 	'action-close',
+	'action-copy',
+	'action-copysuccess',
 	'node-opened',
 	'node-closed',
 	'selector-opened',
@@ -71,7 +73,15 @@ export const defaultIcons = [
 	'validity-failed',
 	'validity-passed',
 	'validity-unknown',
-	'validity-warning'
+	'validity-warning',
+	'alert-clear',
+	'alert-unread',
+	'align-horizontal-left',
+	'align-horizontal-right',
+	'align-horizontal-center',
+	'align-vertical-top',
+	'align-vertical-bottom',
+	'align-vertical-middle'
 ]
 
 export const defaultOptions = {
@@ -91,7 +101,7 @@ export const defaultKeyMap = {
 }
 
 export const defaultThemeMapping = {
-	neutral: 'slate',
+	surface: 'slate',
 	primary: 'orange',
 	secondary: 'pink',
 	accent: 'sky',
@@ -102,6 +112,39 @@ export const defaultThemeMapping = {
 	info: 'cyan'
 }
 
+export const TONE_MAP = {
+	z0: 50,
+	z1: 100,
+	z2: 200,
+	z3: 300,
+	z4: 400,
+	z5: 500,
+	z6: 600,
+	z7: 700,
+	z8: 800,
+	z9: 900,
+	z10: 950
+	// base: 50,
+	// inset: 100,
+	// subtle: 200,
+	// muted: 300,
+	// raised: 400,
+	// elevated: 600,
+	// floating: 700,
+	// contrast: 800,
+	// overlay: 900
+}
+/**
+ * Splits an icon name into its group and key components.
+ * @param {string} name - The icon name to split.
+ * @returns {{ group: string, key: string, value: string }} An object containing the group, key, and value of the icon name.
+ */
+function splitIconName(name) {
+	const parts = name.split('-')
+	const group = parts.slice(0, parts.length - 1).join('-')
+	return { group, key: parts[parts.length - 1], value: name }
+}
+
 /**
  * Generate a state icon mapping from a list of icon names
  *
@@ -109,15 +152,13 @@ export const defaultThemeMapping = {
  * @returns {import('./types').StateIcons}
  */
 export function stateIconsFromNames(icons) {
-	return icons
-		.map((k) => [...k.split('-')])
-		.reduce(
-			(acc, parts) => ({
-				...acc,
-				[parts[0]]: { ...acc[parts[0]], [parts[1]]: parts.join('-') }
-			}),
-			{}
-		)
+	return icons.map(splitIconName).reduce(
+		(acc, { group, key, value }) => ({
+			...acc,
+			[group]: { ...acc[group], [key]: value }
+		}),
+		{}
+	)
 }
 
 export const defaultStateIcons = stateIconsFromNames(defaultIcons)

package/src/theme.js

@@ -1,11 +1,11 @@
-import { defaultThemeMapping, defaultColors, syntaxColors } from './constants.js'
-import { shades, defaultPalette } from './colors/index.js'
+import { defaultThemeMapping, defaultColors, TONE_MAP } from './constants.js'
+import { shades } from './colors/index.js'
 import { hex2rgb } from './utils'
 
 const modifiers = {
 	hsl: (value) => `hsl(${value} / <alpha-value>)`,
-	rgb: (value) => `rgb(${value} / <alpha-value>)`
-	// rgb: (value) => value
+	rgb: (value) => `rgb(${value} / <alpha-value>)`,
+	none: (value) => value
 }
 
 /**
@@ -15,109 +15,20 @@ const modifiers = {
  * @param {string} modifier
  * @returns
  */
-export function shadesOf(name, modifier = 'rgb') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.rgb
+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})`)
+			[shade]: fn(`var(--color-${name}-${shade})`)
 		}),
 		{
-			DEFAULT: fn(`var(--${name}-500)`),
-			base: fn(`var(--${name}-50)`),
-			inset: fn(`var(--${name}-100)`),
-			subtle: fn(`var(--${name}-200)`),
-			muted: fn(`var(--${name}-300)`),
-			raised: fn(`var(--${name}-400)`),
-			elevated: fn(`var(--${name}-600)`),
-			floating: fn(`var(--${name}-700)`),
-			contrast: fn(`var(--${name}-800)`),
-			overlay: fn(`var(--${name}-900)`)
+			DEFAULT: fn(`var(--color-${name}-500)`)
 		}
 	)
 }
 
-/**
- * Generate shades for a color using css varuable
- *
- * @param {string} name
- * @param {string} modifier
- * @returns {object}
- */
-export function stateColors(name, modifier = 'rgb') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.rgb
-	return {
-		DEFAULT: fn(`var(--${name}-500)`),
-		light: fn(`var(--${name}-200)`),
-		dark: fn(`var(--${name}-700)`)
-	}
-}
-
-/**
- *
- * @param {string} modifier
- * @returns
- */
-export function themeColors(modifier = 'rgb') {
-	const fn = modifier in modifiers ? modifiers[modifier] : modifiers.rgb
-
-	const states = ['info', 'danger', 'warning', 'success', 'error']
-	const 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
-}
-
-/**
- * Creates an array of shade mapping objects for a given theme variant and mode.
- * Each object represents a CSS custom property (variable) with its value set based on a provided condition.
- *
- * @param {string}                   variant        - The name of the theme variant (e.g., 'primary', 'secondary').
- * @param {'light' | 'dark'}         mode           - The theme mode for which the mappings are being created.
- * @param {function(number): string} valueCondition - A function that takes a shade value and returns the color value
- *                                                    based on the condition appropriate for light or dark mode.
- * @returns {{import('./types'}.ShadeMapping[]>} An array of objects, where each object contains key, value, and mode
- *                                              properties corresponding to  a CSS custom property definition.
- */
-function createShadeMappings(variant, mode, valueCondition) {
-	return shades.map((shade) => ({
-		key: `--on-${variant}-${shade}`,
-		value: valueCondition(shade),
-		mode
-	}))
-}
-
-/**
- * Generates contrast colors for light and dark modes based on a given palette. Each color variant in the
- * palette is mapped to either a light or dark contrast color depending on the shade's value.
- *
- * @param {string} [light='#ffffff'] - The default light color used when the shade is >= 500 in light mode or <= 500 in dark mode.
- * @param {string} [dark='#000000'] - The default dark color used when the shade is < 500 in light mode or > 500 in dark mode.
- * @param {Array<string>} [palette=defaultPalette] - An array of color variant names to generate contrast colors for.
- * @returns {Array<Object>} An array containing contrast color rules organized by light and dark modes for each variant in the palette.
- */
-export function contrastColors(light = '#ffffff', dark = '#000000', palette = defaultPalette) {
-	const colors = palette
-		.flatMap((variant) => [
-			createShadeMappings(variant, 'light', (shade) => (shade < 500 ? dark : light)),
-			createShadeMappings(variant, 'dark', (shade) => (shade > 500 ? dark : light))
-		])
-		.reduce((acc, item) => [...acc, ...item], [])
-	return colors
-}
 /**
  * Generates color rules for a specific theme variant, for both light and dark modes.
  *
@@ -127,79 +38,137 @@ export function contrastColors(light = '#ffffff', dark = '#000000', palette = de
  * @returns {import('./types').ShadeMappings} An array containing the color rules for both light and dark modes.
  */
 function generateColorRules(variant, colors, mapping) {
-	return shades.flatMap((shade, index) => [
-		{
-			key: `--${variant}-${shade}`,
-			value: hex2rgb(colors[mapping[variant]][shade]),
-			mode: 'light'
-		},
+	return ['DEFAULT', ...shades].flatMap((shade) => [
 		{
-			key: `--${variant}-${shade}`,
-			value: hex2rgb(colors[mapping[variant]][shades[shades.length - index - 1]]),
-			mode: 'dark'
+			key: shade === 'DEFAULT' ? `--color-${variant}` : `--color-${variant}-${shade}`,
+			value: hex2rgb(colors[mapping[variant]][`${shade}`])
 		}
 	])
 }
 
 /**
- * Filters the rules for a specific mode and transforms them into an object mapping
- * CSS variable names to their values.
+ * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
  *
- * @param {Array<Object>} rules - The array of rules to filter and transform.
- * @param {'light' | 'dark'} mode - The mode to filter by.
- * @returns {Object} An object containing the rules specific to the provided mode.
+ * @param {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
+ * @param {Object} [colors=defaultColors]        - The object containing default color definitions.
+ * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
  */
-function filterRulesByMode(rules, mode) {
-	return rules
-		.filter((rule) => rule.mode === mode)
+export function themeRules(mapping = defaultThemeMapping, colors = defaultColors) {
+	mapping = { ...defaultThemeMapping, ...mapping }
+	colors = { ...defaultColors, ...colors }
+	const variants = Object.keys(mapping)
+	const rules = variants
+		.flatMap((variant) => generateColorRules(variant, colors, mapping))
 		.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
+	return rules
 }
 
 /**
- * Creates a theme variant object with a given mode, a collection of color rules, and additional colors.
- *
- * @param {string} name - The base name for the theme variant.
- * @param {'light' | 'dark'} mode - The mode of the theme variant.
- * @param {Object} colors - The object containing color rules for the theme.
- * @param {Object} extraColors - Any additional color properties for the theme.
- * @returns {Array} An array where the first element is the theme's name and the second element
- * is an object containing all color rules and extra properties for the theme variant.
+ * Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
+ * @param {string} name - Color name (e.g., 'primary')
+ * @returns {Array} Array of shortcut definitions
  */
-function createThemeVariant(name, mode, colors, extraColors) {
-	return [
-		`${name}-mode-${mode}`,
-		{
-			...colors,
-			...extraColors
+export function semanticShortcuts(name) {
+	const prefixes = ['bg', 'border', 'text', 'ring', 'outline', 'from', 'to', 'divide']
+	const shortcuts = []
+
+	for (const [toneName, lightValue] of Object.entries(TONE_MAP)) {
+		const darkValue = 1000 - lightValue
+
+		for (const prefix of prefixes) {
+			// Variant-prefixed regex (e.g., hover:bg-primary-base)
+			const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\/\\d+)?$`)
+			shortcuts.push([
+				variantPattern,
+				([, variant, end]) =>
+					`${variant}:${prefix}-${name}-${lightValue}${end || ''} ${variant}:dark:${prefix}-${name}-${darkValue}${end || ''}`
+			])
+
+			const opacityPattern = new RegExp(`${prefix}-${name}-${toneName}(\/\\d+)?$`)
+			shortcuts.push([
+				opacityPattern,
+				([, end]) =>
+					`${prefix}-${name}-${lightValue}${end || ''} dark:${prefix}-${name}-${darkValue}${end || ''}`
+			])
+
+			// Exact static shortcut (e.g., bg-primary-base)
+			const exactPattern = `${prefix}-${name}-${toneName}`
+			shortcuts.push([
+				exactPattern,
+				`${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`
+			])
 		}
-	]
+	}
+
+	return shortcuts
 }
 
 /**
- * Constructs and returns the light and dark theme variants based on provided color mapping and color definitions.
- *
- * @param {string} name                          - The base name for the theme, defaults to 'rokkit' if not provided.
- * @param {Object} [mapping=defaultThemeMapping] - An object mapping variant names to color property names.
- * @param {Object} [colors=defaultColors]        - The object containing default color definitions.
- * @returns {Array<Array>} An array containing two arrays, one for the light theme variant and another for the dark theme.
+ * Theme class for managing color palettes, mappings, and semantic shortcuts.
  */
-export function themeRules(name = 'rokkit', mapping = defaultThemeMapping, colors = defaultColors) {
-	mapping = { ...defaultThemeMapping, ...mapping }
-	const variants = Object.keys(mapping)
+export class Theme {
+	#colors
+	#mapping
+
+	/**
+	 *
+	 * @param {import('./types.js').ColorTheme} param0
+	 */
+	constructor({ colors = defaultColors, mapping = defaultThemeMapping } = {}) {
+		this.#colors = { ...defaultColors, ...colors }
+		this.#mapping = { ...defaultThemeMapping, ...mapping }
+	}
 
-	const rules = variants.reduce(
-		(acc, variant) => [
-			...acc,
-			...generateColorRules(variant, { ...defaultColors, ...colors }, mapping)
-		],
-		[]
-	)
+	get colors() {
+		return this.#colors
+	}
+	set colors(colors) {
+		this.#colors = { ...colors }
+	}
 
-	const lightRules = filterRulesByMode(rules, 'light')
-	const darkRules = filterRulesByMode(rules, 'dark')
+	get mapping() {
+		return this.#mapping
+	}
+	set mapping(mapping) {
+		this.#mapping = { ...mapping }
+	}
+
+	mapVariant(color, variant) {
+		return Object.keys(color).reduce(
+			(acc, key) => ({
+				...acc,
+				[key]:
+					key === 'DEFAULT'
+						? `rgba(var(--color-${variant}),<alpha-value>)`
+						: `rgba(var(--color-${variant}-${key}),<alpha-value>)`
+			}),
+			{}
+		)
+	}
 
-	const lightTheme = createThemeVariant(name, 'light', lightRules, syntaxColors['one-dark'].light)
-	const darkTheme = createThemeVariant(name, 'dark', darkRules, syntaxColors['one-dark'].dark)
+	getColorRules(mapping = null) {
+		const variants = Object.entries({ ...this.#mapping, ...mapping })
+		return variants.reduce(
+			(acc, [variant, key]) => ({
+				...acc,
+				[variant]: this.mapVariant(this.#colors[key], variant)
+			}),
+			{}
+		)
+	}
 
-	return [lightTheme, darkTheme]
+	getPalette(mapping = null) {
+		const useMapping = { ...this.#mapping, ...mapping }
+		const useColors = { ...defaultColors, ...this.#colors }
+		const variants = Object.keys(useMapping)
+		const rules = variants
+			.flatMap((variant) => generateColorRules(variant, useColors, useMapping))
+			.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+		return rules
+	}
+
+	getShortcuts(name) {
+		return semanticShortcuts(name)
+	}
 }

package/src/types.js

@@ -121,4 +121,40 @@
  * @property {boolean} weekend - Indicates if the day is on the weekend.
  */
 
+/**
+ * @typedef {Object} ColorPalette
+ * @property {string} 50 - The color for the 50 shade.
+ * @property {string} 100 - The color for the 100 shade.
+ * @property {string} 200 - The color for the 200 shade.
+ * @property {string} 300 - The color for the 300 shade.
+ * @property {string} 400 - The color for the 400 shade.
+ * @property {string} 500 - The color for the 500 shade.
+ * @property {string} 600 - The color for the 600 shade.
+ * @property {string} 700 - The color for the 700 shade.
+ * @property {string} 800 - The color for the 800 shade.
+ * @property {string} 900 - The color for the 900 shade.
+ * @property {string} 950 - The color for the 950 shade.
+ */
+
+/**
+ * @typedef {Object<string,ColorPalette>} ColorCollection
+ */
+
+/**
+ * @typedef {Object} ColorMapping
+ * @property {string} [primary]   - The primary color.
+ * @property {string} [secondary] - The secondary color.
+ * @property {string} [tertiary]  - The tertiary color.
+ * @property {string} [surface]   - The surface color.
+ * @property {string} [info]      - The info color.
+ * @property {string} [success]   - The success color.
+ * @property {string} [warning]   - The warning color.
+ * @property {string} [error]     - The error color.
+ */
+
+/**
+ * @typedef {Object} ColorTheme
+ * @property {ColorMapping} [mapping] - The color mapping.
+ * @property {ColorCollection} [colors] - The color collection.
+ */
 export default {}