@rokkit/core 1.0.0-next.137 → 1.0.0-next.139
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/theme.d.ts +2 -2
- package/dist/utils.d.ts +1 -15
- package/package.json +1 -1
- package/src/theme.ts +40 -39
- package/src/utils.js +22 -16
package/dist/theme.d.ts
CHANGED
|
@@ -31,7 +31,7 @@ export declare function themeRules(mapping?: {
|
|
|
31
31
|
* @param {string} name - Color name (e.g., 'primary')
|
|
32
32
|
* @returns {Array} Array of shortcut definitions
|
|
33
33
|
*/
|
|
34
|
-
export declare function semanticShortcuts(name: any):
|
|
34
|
+
export declare function semanticShortcuts(name: any): (string[] | (RegExp | (([, variant, end]: [any, any, any]) => string))[] | (RegExp | (([, end]: [any, any]) => string))[])[];
|
|
35
35
|
/**
|
|
36
36
|
* Generates "on-color" text shortcuts for readable text on colored backgrounds.
|
|
37
37
|
*
|
|
@@ -92,5 +92,5 @@ export declare class Theme {
|
|
|
92
92
|
mapVariant(color: any, variant: any): {};
|
|
93
93
|
getColorRules(mapping?: null): {};
|
|
94
94
|
getPalette(mapping?: null): {};
|
|
95
|
-
getShortcuts(name: any):
|
|
95
|
+
getShortcuts(name: any): (string[] | (RegExp | (([, variant, end]: [any, any, any]) => string))[] | (RegExp | (([, end]: [any, any]) => string))[])[];
|
|
96
96
|
}
|
package/dist/utils.d.ts
CHANGED
|
@@ -77,21 +77,7 @@ export function getPathFromKey(key: string): string[];
|
|
|
77
77
|
* @returns {Function|undefined}
|
|
78
78
|
*/
|
|
79
79
|
export function getSnippet(obj: Object, key: string, defaultSnippet?: null | Function): Function | undefined;
|
|
80
|
-
|
|
81
|
-
* Resolve which snippet to render for a proxy item.
|
|
82
|
-
*
|
|
83
|
-
* Checks proxy.snippet for a per-item named override first (e.g. item.snippet = 'highlighted').
|
|
84
|
-
* Falls back to the component-level fallback snippet name (e.g. 'itemContent' / 'groupContent').
|
|
85
|
-
* Returns null if neither is found.
|
|
86
|
-
*
|
|
87
|
-
* @param {Record<string, unknown>} snippets - snippets passed to the component
|
|
88
|
-
* @param {{ snippet?: string | null }} proxy - any object with an optional .snippet property
|
|
89
|
-
* @param {string} [fallback] - fallback snippet name; defaults to ITEM_SNIPPET ('itemContent')
|
|
90
|
-
* @returns {Function | null}
|
|
91
|
-
*/
|
|
92
|
-
export function resolveSnippet(snippets: Record<string, unknown>, proxy: {
|
|
93
|
-
snippet?: string | null;
|
|
94
|
-
}, fallback?: string): Function | null;
|
|
80
|
+
export function resolveSnippet(snippets: any, proxy: any, fallback?: string): Function | null;
|
|
95
81
|
/**
|
|
96
82
|
* convert hex string to `{r} {g} {b}`
|
|
97
83
|
* @param {string} hex
|
package/package.json
CHANGED
package/src/theme.ts
CHANGED
|
@@ -66,56 +66,57 @@ export function themeRules(mapping = DEFAULT_THEME_MAPPING, colors = defaultColo
|
|
|
66
66
|
return rules
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
const SEMANTIC_PREFIXES = [
|
|
70
|
+
'bg',
|
|
71
|
+
'border',
|
|
72
|
+
'border-l',
|
|
73
|
+
'border-r',
|
|
74
|
+
'border-t',
|
|
75
|
+
'border-b',
|
|
76
|
+
'text',
|
|
77
|
+
'ring',
|
|
78
|
+
'outline',
|
|
79
|
+
'from',
|
|
80
|
+
'to',
|
|
81
|
+
'divide'
|
|
82
|
+
]
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* @param {{ prefix: string, name: string, toneName: string, lightValue: number, darkValue: number }} opts
|
|
86
|
+
* @returns {Array}
|
|
87
|
+
*/
|
|
88
|
+
function toneShortcuts({ prefix, name, toneName, lightValue, darkValue }) {
|
|
89
|
+
const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\\/\\d+)?$`)
|
|
90
|
+
const opacityPattern = new RegExp(`^${prefix}-${name}-${toneName}(\\/\\d+)?$`)
|
|
91
|
+
const exactPattern = `${prefix}-${name}-${toneName}`
|
|
92
|
+
return [
|
|
93
|
+
[
|
|
94
|
+
variantPattern,
|
|
95
|
+
([, variant, end]) =>
|
|
96
|
+
`${variant}:${prefix}-${name}-${lightValue}${end || ''} ${variant}:dark:${prefix}-${name}-${darkValue}${end || ''}`
|
|
97
|
+
],
|
|
98
|
+
[
|
|
99
|
+
opacityPattern,
|
|
100
|
+
([, end]) =>
|
|
101
|
+
`${prefix}-${name}-${lightValue}${end || ''} dark:${prefix}-${name}-${darkValue}${end || ''}`
|
|
102
|
+
],
|
|
103
|
+
[exactPattern, `${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`]
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
|
|
69
107
|
/**
|
|
70
108
|
* Generates UnoCSS shortcut definitions for semantic tones with bg, border, text.
|
|
71
109
|
* @param {string} name - Color name (e.g., 'primary')
|
|
72
110
|
* @returns {Array} Array of shortcut definitions
|
|
73
111
|
*/
|
|
74
112
|
export function semanticShortcuts(name) {
|
|
75
|
-
const prefixes = [
|
|
76
|
-
'bg',
|
|
77
|
-
'border',
|
|
78
|
-
'border-l',
|
|
79
|
-
'border-r',
|
|
80
|
-
'border-t',
|
|
81
|
-
'border-b',
|
|
82
|
-
'text',
|
|
83
|
-
'ring',
|
|
84
|
-
'outline',
|
|
85
|
-
'from',
|
|
86
|
-
'to',
|
|
87
|
-
'divide'
|
|
88
|
-
]
|
|
89
113
|
const shortcuts = []
|
|
90
|
-
|
|
91
114
|
for (const [toneName, lightValue] of Object.entries(TONE_MAP)) {
|
|
92
115
|
const darkValue = 1000 - lightValue
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
// Variant-prefixed regex (e.g., hover:bg-primary-base)
|
|
96
|
-
const variantPattern = new RegExp(`^(.+):${prefix}-${name}-${toneName}(\/\\d+)?$`)
|
|
97
|
-
shortcuts.push([
|
|
98
|
-
variantPattern,
|
|
99
|
-
([, variant, end]) =>
|
|
100
|
-
`${variant}:${prefix}-${name}-${lightValue}${end || ''} ${variant}:dark:${prefix}-${name}-${darkValue}${end || ''}`
|
|
101
|
-
])
|
|
102
|
-
|
|
103
|
-
const opacityPattern = new RegExp(`^${prefix}-${name}-${toneName}(\/\\d+)?$`)
|
|
104
|
-
shortcuts.push([
|
|
105
|
-
opacityPattern,
|
|
106
|
-
([, end]) =>
|
|
107
|
-
`${prefix}-${name}-${lightValue}${end || ''} dark:${prefix}-${name}-${darkValue}${end || ''}`
|
|
108
|
-
])
|
|
109
|
-
|
|
110
|
-
// Exact static shortcut (e.g., bg-primary-base)
|
|
111
|
-
const exactPattern = `${prefix}-${name}-${toneName}`
|
|
112
|
-
shortcuts.push([
|
|
113
|
-
exactPattern,
|
|
114
|
-
`${prefix}-${name}-${lightValue} dark:${prefix}-${name}-${darkValue}`
|
|
115
|
-
])
|
|
116
|
+
for (const prefix of SEMANTIC_PREFIXES) {
|
|
117
|
+
shortcuts.push(...toneShortcuts({ prefix, name, toneName, lightValue, darkValue }))
|
|
116
118
|
}
|
|
117
119
|
}
|
|
118
|
-
|
|
119
120
|
return shortcuts
|
|
120
121
|
}
|
|
121
122
|
|
package/src/utils.js
CHANGED
|
@@ -21,25 +21,25 @@ const RTL_LANGUAGES = [
|
|
|
21
21
|
]
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* Checks dir/lang attributes of the html element for RTL
|
|
25
25
|
* @returns {'ltr' | 'rtl'}
|
|
26
26
|
*/
|
|
27
|
-
|
|
28
|
-
if (typeof document === 'undefined') return 'ltr'
|
|
29
|
-
|
|
30
|
-
// Check dir attribute first (explicit override)
|
|
27
|
+
function dirFromHtmlElement() {
|
|
31
28
|
const htmlDir = document.documentElement.getAttribute('dir')
|
|
32
29
|
if (htmlDir === 'rtl' || htmlDir === 'ltr') return htmlDir
|
|
33
30
|
|
|
34
|
-
// Detect from lang attribute
|
|
35
31
|
const lang = document.documentElement.getAttribute('lang')
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
if (RTL_LANGUAGES.includes(primaryLang)) return 'rtl'
|
|
40
|
-
}
|
|
32
|
+
const primaryLang = lang ? lang.split('-')[0].toLowerCase() : ''
|
|
33
|
+
return RTL_LANGUAGES.includes(primaryLang) ? 'rtl' : 'ltr'
|
|
34
|
+
}
|
|
41
35
|
|
|
42
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Detects text direction based on HTML lang attribute
|
|
38
|
+
* @returns {'ltr' | 'rtl'}
|
|
39
|
+
*/
|
|
40
|
+
export function detectDirection() {
|
|
41
|
+
if (typeof document === 'undefined') return 'ltr'
|
|
42
|
+
return dirFromHtmlElement()
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/**
|
|
@@ -181,11 +181,17 @@ export function getSnippet(obj, key, defaultSnippet = null) {
|
|
|
181
181
|
* @param {string} [fallback] - fallback snippet name; defaults to ITEM_SNIPPET ('itemContent')
|
|
182
182
|
* @returns {Function | null}
|
|
183
183
|
*/
|
|
184
|
+
/**
|
|
185
|
+
* @param {unknown} value
|
|
186
|
+
* @returns {Function|null}
|
|
187
|
+
*/
|
|
188
|
+
function asSnippet(value) {
|
|
189
|
+
return typeof value === 'function' ? value : null
|
|
190
|
+
}
|
|
191
|
+
|
|
184
192
|
export function resolveSnippet(snippets, proxy, fallback = ITEM_SNIPPET) {
|
|
185
|
-
const name = proxy
|
|
186
|
-
|
|
187
|
-
const fb = snippets[fallback]
|
|
188
|
-
return typeof fb === 'function' ? fb : null
|
|
193
|
+
const name = proxy && proxy.snippet
|
|
194
|
+
return asSnippet(name && snippets[name]) || asSnippet(snippets[fallback])
|
|
189
195
|
}
|
|
190
196
|
|
|
191
197
|
/**
|