@rokkit/core 1.0.0-next.122 → 1.0.0-next.124

package/dist/colors/index.d.ts

@@ -16,7 +16,7 @@ export const syntaxColors: {
             "--code-operator": string;
             "--code-function": string;
             "--code-gutter-marker": string;
-            "--code-gutter-subtle": string;
+            "--code-gutter-z2": string;
             "--code-cursor": string;
             "--code-cursor-block": string;
             "--code-linenumbers": string;
@@ -35,7 +35,7 @@ export const syntaxColors: {
             "--code-operator": string;
             "--code-function": string;
             "--code-gutter-marker": string;
-            "--code-gutter-subtle": string;
+            "--code-gutter-z2": string;
             "--code-cursor": string;
             "--code-cursor-block": string;
             "--code-linenumbers": string;

package/dist/constants.d.ts

@@ -26,7 +26,7 @@ export namespace defaultKeyMap {
     let Escape: string;
 }
 export namespace defaultThemeMapping {
-    let neutral: string;
+    let surface: string;
     let primary: string;
     let secondary: string;
     let accent: string;
@@ -37,6 +37,7 @@ export namespace defaultThemeMapping {
     let info: string;
 }
 export namespace TONE_MAP {
+    let z0: number;
     let z1: number;
     let z2: number;
     let z3: number;

package/dist/theme.d.ts

@@ -26,382 +26,11 @@ export function semanticShortcuts(name: string): any[];
  * Theme class for managing color palettes, mappings, and semantic shortcuts.
  */
 export class Theme {
-    constructor({ colors, mapping }?: {
-        colors?: {
-            shark: {
-                DEFAULT: string;
-                "50": string;
-                "100": string;
-                "200": string;
-                "300": string;
-                "400": string;
-                "500": string;
-                "600": string;
-                "700": string;
-                "800": string;
-                "900": string;
-                "950": string;
-            };
-            inherit: string;
-            current: string;
-            transparent: string;
-            black: string;
-            white: string;
-            rose: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            pink: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            fuchsia: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            purple: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            violet: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            indigo: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            blue: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            sky: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            cyan: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            teal: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            emerald: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            green: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            lime: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            yellow: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            amber: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            orange: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            red: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            gray: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            slate: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            zinc: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            neutral: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            stone: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            light: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            dark: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            lightblue: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            lightBlue: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            warmgray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            warmGray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            truegray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            trueGray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            coolgray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            coolGray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            bluegray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-            blueGray: string | (import("@unocss/preset-mini/dist/shared/preset-mini.BjJC-NnU.mjs").C & {
-                DEFAULT?: string;
-            });
-        } | undefined;
-        mapping?: {
-            neutral: string;
-            primary: string;
-            secondary: string;
-            accent: string;
-            success: string;
-            warning: string;
-            danger: string;
-            error: string;
-            info: string;
-        } | undefined;
-    });
+    /**
+     *
+     * @param {import('./types.js').ColorTheme} param0
+     */
+    constructor({ colors, mapping }?: import("./types.js").ColorTheme);
     set colors(colors: {
         shark: {
             DEFAULT: string;
@@ -1129,26 +758,76 @@ export class Theme {
         });
     };
     set mapping(mapping: {
-        neutral: string;
+        /**
+         * - The primary color.
+         */
         primary: string;
+        /**
+         * - The secondary color.
+         */
         secondary: string;
-        accent: string;
+        /**
+         * - The tertiary color.
+         */
+        tertiary?: string | undefined;
+        /**
+         * - The surface color.
+         */
+        surface: string;
+        /**
+         * - The info color.
+         */
+        info: string;
+        /**
+         * - The success color.
+         */
         success: string;
+        /**
+         * - The warning color.
+         */
         warning: string;
-        danger: string;
+        /**
+         * - The error color.
+         */
         error: string;
-        info: string;
+        accent: string;
+        danger: string;
     });
     get mapping(): {
-        neutral: string;
+        /**
+         * - The primary color.
+         */
         primary: string;
+        /**
+         * - The secondary color.
+         */
         secondary: string;
-        accent: string;
+        /**
+         * - The tertiary color.
+         */
+        tertiary?: string | undefined;
+        /**
+         * - The surface color.
+         */
+        surface: string;
+        /**
+         * - The info color.
+         */
+        info: string;
+        /**
+         * - The success color.
+         */
         success: string;
+        /**
+         * - The warning color.
+         */
         warning: string;
-        danger: string;
+        /**
+         * - The error color.
+         */
         error: string;
-        info: string;
+        accent: string;
+        danger: string;
     };
     mapVariant(color: any, variant: any): {};
     getColorRules(mapping?: null): {};

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.122",
+  "version": "1.0.0-next.124",
   "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/index.js

@@ -5,7 +5,7 @@ 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',

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/constants.js

@@ -101,7 +101,7 @@ export const defaultKeyMap = {
 }
 
 export const defaultThemeMapping = {
-	neutral: 'slate',
+	surface: 'slate',
 	primary: 'orange',
 	secondary: 'pink',
 	accent: 'sky',
@@ -113,10 +113,11 @@ export const defaultThemeMapping = {
 }
 
 export const TONE_MAP = {
-	z1: 50,
-	z2: 100,
-	z3: 200,
-	z4: 300,
+	z0: 50,
+	z1: 100,
+	z2: 200,
+	z3: 300,
+	z4: 400,
 	z5: 500,
 	z6: 600,
 	z7: 700,

package/src/theme.js

@@ -41,7 +41,7 @@ function generateColorRules(variant, colors, mapping) {
 	return ['DEFAULT', ...shades].flatMap((shade) => [
 		{
 			key: shade === 'DEFAULT' ? `--color-${variant}` : `--color-${variant}-${shade}`,
-			value: colors[mapping[variant]][`${shade}`]
+			value: hex2rgb(colors[mapping[variant]][`${shade}`])
 		}
 	])
 }
@@ -78,11 +78,18 @@ export function semanticShortcuts(name) {
 
 		for (const prefix of prefixes) {
 			// Variant-prefixed regex (e.g., hover:bg-primary-base)
-			const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}$`)
+			const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\/\\d+)?$`)
 			shortcuts.push([
 				variantPattern,
-				([, variant]) =>
-					`${variant}:${prefix}-${name}-${lightValue} ${variant}:dark:${prefix}-${name}-${darkValue}`
+				([, 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)
@@ -104,6 +111,10 @@ export class Theme {
 	#colors
 	#mapping
 
+	/**
+	 *
+	 * @param {import('./types.js').ColorTheme} param0
+	 */
 	constructor({ colors = defaultColors, mapping = defaultThemeMapping } = {}) {
 		this.#colors = { ...defaultColors, ...colors }
 		this.#mapping = { ...defaultThemeMapping, ...mapping }
@@ -127,7 +138,10 @@ export class Theme {
 		return Object.keys(color).reduce(
 			(acc, key) => ({
 				...acc,
-				[key]: key === 'DEFAULT' ? `var(--color-${variant})` : `var(--color-${variant}-${key})`
+				[key]:
+					key === 'DEFAULT'
+						? `rgba(var(--color-${variant}),<alpha-value>)`
+						: `rgba(var(--color-${variant}-${key}),<alpha-value>)`
 			}),
 			{}
 		)

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 {}

package/src/utils.js

@@ -145,7 +145,7 @@ export const importIcons = (icons) => {
  */
 export function hex2rgb(hex) {
 	const [r, g, b] = hex.match(/\w\w/g).map((x) => parseInt(x, 16))
-	return `${r} ${g} ${b}`
+	return `${r},${g},${b}`
 }
 
 /**
@@ -155,31 +155,33 @@ export function hex2rgb(hex) {
  * @returns {boolean} - Returns true if the string is an image URL
  */
 function isImageUrl(str) {
+	// Fallback regex-based validation
+	const fallbackValidation = () => {
+		const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
+		return urlRegex.test(str)
+	}
+
 	// Check if the string looks like a URL
 	try {
-		// Use browser-native URL constructor or fallback to regex
-		const url = typeof URL !== 'undefined' ? new URL(str) : null
-
-		if (url) {
+		// Use browser-native URL constructor if available
+		if (typeof URL !== 'undefined') {
+			const url = new URL(str)
+			// Only accept HTTP/HTTPS protocols
+			if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+				return false
+			}
 			// Check common image extensions
 			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg', '.tiff']
 			const path = url.pathname.toLowerCase()
-
-			if (imageExtensions.some((ext) => path.endsWith(ext))) {
-				return true
-			}
-		} else {
-			// Fallback regex-based URL validation for image extensions
-			const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
-			return urlRegex.test(str)
+			return imageExtensions.some((ext) => path.endsWith(ext))
 		}
 
-		return false
+		// Fallback if URL constructor is not available
+		return fallbackValidation()
 		// eslint-disable-next-line no-unused-vars
 	} catch (e) {
-		// Fallback regex-based validation
-		const urlRegex = /^https?:\/\/.+\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff)(\?.*)?$/i
-		return urlRegex.test(str)
+		// Fallback if URL constructor fails
+		return fallbackValidation()
 	}
 }
 /**