app-studio 0.6.58 → 0.6.59
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/app-studio.cjs.development.js +93 -5
- package/dist/app-studio.cjs.development.js.map +1 -1
- package/dist/app-studio.cjs.production.min.js +1 -1
- package/dist/app-studio.esm.js +93 -5
- package/dist/app-studio.esm.js.map +1 -1
- package/dist/app-studio.umd.development.js +93 -5
- package/dist/app-studio.umd.development.js.map +1 -1
- package/dist/app-studio.umd.production.min.js +1 -1
- package/dist/providers/Theme.d.ts +2 -1
- package/package.json +1 -1
|
@@ -900,7 +900,8 @@ const ThemeContext = /*#__PURE__*/React.createContext({
|
|
|
900
900
|
getColor: () => '',
|
|
901
901
|
getColorHex: () => '',
|
|
902
902
|
getColorRGBA: () => '',
|
|
903
|
-
getColorScheme: () =>
|
|
903
|
+
getColorScheme: () => undefined,
|
|
904
|
+
getContrastColor: () => 'black',
|
|
904
905
|
theme: {},
|
|
905
906
|
colors: {
|
|
906
907
|
main: defaultLightColors,
|
|
@@ -1292,20 +1293,107 @@ const ThemeProvider = _ref => {
|
|
|
1292
1293
|
if (!override) colorCache.set(cacheKey, rgba);
|
|
1293
1294
|
return rgba;
|
|
1294
1295
|
}, [themeMode, colorCache, resolveColorTokenForMode]);
|
|
1295
|
-
const getColorScheme = React.useCallback(override => {
|
|
1296
|
-
|
|
1297
|
-
|
|
1296
|
+
const getColorScheme = React.useCallback((name, override) => {
|
|
1297
|
+
if (!name || typeof name !== 'string') return undefined;
|
|
1298
|
+
const effectiveMode = override?.themeMode ?? themeMode;
|
|
1299
|
+
const effectiveTheme = override?.theme ? deepMerge(mergedTheme, override.theme) : mergedTheme;
|
|
1300
|
+
// Resolve theme.* tokens to get the underlying color token
|
|
1301
|
+
let colorToken = name;
|
|
1302
|
+
if (name.startsWith(THEME_PREFIX)) {
|
|
1303
|
+
const themeKey = name.substring(THEME_PREFIX.length);
|
|
1304
|
+
const themeValue = effectiveTheme[themeKey];
|
|
1305
|
+
if (typeof themeValue === 'string') {
|
|
1306
|
+
colorToken = themeValue;
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
// Handle light.* or dark.* prefixes
|
|
1310
|
+
if (colorToken.startsWith('light.') || colorToken.startsWith('dark.')) {
|
|
1311
|
+
const prefixLength = colorToken.startsWith('light.') ? 6 : 5;
|
|
1312
|
+
colorToken = `${COLOR_PREFIX}${colorToken.substring(prefixLength)}`;
|
|
1313
|
+
}
|
|
1314
|
+
// Extract color scheme from color.* tokens (e.g., color.blue.500 -> 'blue')
|
|
1315
|
+
if (colorToken.startsWith(COLOR_PREFIX)) {
|
|
1316
|
+
const keys = colorToken.substring(COLOR_PREFIX.length).split('.');
|
|
1317
|
+
if (keys.length >= 1) {
|
|
1318
|
+
return keys[0]; // Return the color scheme name (e.g., 'blue', 'pink')
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1321
|
+
// Handle hex or rgba colors by finding the closest match in the palette
|
|
1322
|
+
const normalizedInput = normalizeToHex(colorToken).toLowerCase();
|
|
1323
|
+
if (normalizedInput.startsWith('#')) {
|
|
1324
|
+
const colorsToUse = themeColors[effectiveMode];
|
|
1325
|
+
const palette = deepMerge(colorsToUse.palette, override?.colors?.palette || {});
|
|
1326
|
+
const main = deepMerge(colorsToUse.main, override?.colors?.main || {});
|
|
1327
|
+
// First check main colors for exact match
|
|
1328
|
+
for (const [colorName, colorValue] of Object.entries(main)) {
|
|
1329
|
+
if (typeof colorValue === 'string') {
|
|
1330
|
+
const normalizedPalette = normalizeToHex(colorValue).toLowerCase();
|
|
1331
|
+
if (normalizedPalette === normalizedInput) {
|
|
1332
|
+
return colorName;
|
|
1333
|
+
}
|
|
1334
|
+
}
|
|
1335
|
+
}
|
|
1336
|
+
// Then check palette colors for exact match
|
|
1337
|
+
for (const [colorName, shades] of Object.entries(palette)) {
|
|
1338
|
+
if (typeof shades === 'object' && shades !== null) {
|
|
1339
|
+
for (const [, shadeValue] of Object.entries(shades)) {
|
|
1340
|
+
if (typeof shadeValue === 'string') {
|
|
1341
|
+
const normalizedPalette = normalizeToHex(shadeValue).toLowerCase();
|
|
1342
|
+
if (normalizedPalette === normalizedInput) {
|
|
1343
|
+
return colorName;
|
|
1344
|
+
}
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
}
|
|
1348
|
+
}
|
|
1349
|
+
}
|
|
1350
|
+
return undefined;
|
|
1351
|
+
}, [mergedTheme, themeMode, themeColors]);
|
|
1352
|
+
const getContrastColor = React.useCallback((name, override) => {
|
|
1353
|
+
if (!name || typeof name !== 'string') return 'black';
|
|
1354
|
+
const effectiveMode = override?.themeMode ?? themeMode;
|
|
1355
|
+
// First resolve the color to a hex value
|
|
1356
|
+
let hexColor;
|
|
1357
|
+
// Check if it's already a hex or rgb color
|
|
1358
|
+
if (name.startsWith('#') || name.startsWith('rgb')) {
|
|
1359
|
+
hexColor = normalizeToHex(name);
|
|
1360
|
+
} else {
|
|
1361
|
+
// Resolve the token to get the actual color value
|
|
1362
|
+
const resolved = resolveColorTokenForMode(name, effectiveMode, override);
|
|
1363
|
+
hexColor = normalizeToHex(resolved);
|
|
1364
|
+
}
|
|
1365
|
+
// If we couldn't get a valid hex, default to black
|
|
1366
|
+
if (!hexColor.startsWith('#') || hexColor.length < 7) {
|
|
1367
|
+
return 'black';
|
|
1368
|
+
}
|
|
1369
|
+
// Extract RGB values
|
|
1370
|
+
const hex = hexColor.slice(1);
|
|
1371
|
+
const r = parseInt(hex.slice(0, 2), 16);
|
|
1372
|
+
const g = parseInt(hex.slice(2, 4), 16);
|
|
1373
|
+
const b = parseInt(hex.slice(4, 6), 16);
|
|
1374
|
+
// Calculate relative luminance using the sRGB formula
|
|
1375
|
+
// https://www.w3.org/TR/WCAG20/#relativeluminancedef
|
|
1376
|
+
const toLinear = c => {
|
|
1377
|
+
const sRGB = c / 255;
|
|
1378
|
+
return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
|
|
1379
|
+
};
|
|
1380
|
+
const luminance = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
|
|
1381
|
+
// Use threshold of 0.179 (WCAG recommendation)
|
|
1382
|
+
// Return white for dark colors, black for light colors
|
|
1383
|
+
return luminance > 0.179 ? 'black' : 'white';
|
|
1384
|
+
}, [themeMode, resolveColorTokenForMode]);
|
|
1298
1385
|
// --- Memoize Context Value ---
|
|
1299
1386
|
const contextValue = React.useMemo(() => ({
|
|
1300
1387
|
getColor,
|
|
1301
1388
|
getColorHex,
|
|
1302
1389
|
getColorRGBA,
|
|
1303
1390
|
getColorScheme,
|
|
1391
|
+
getContrastColor,
|
|
1304
1392
|
theme: mergedTheme,
|
|
1305
1393
|
colors: currentColors,
|
|
1306
1394
|
themeMode,
|
|
1307
1395
|
setThemeMode
|
|
1308
|
-
}), [getColor, getColorHex, getColorRGBA, getColorScheme, mergedTheme, currentColors, themeMode]);
|
|
1396
|
+
}), [getColor, getColorHex, getColorRGBA, getColorScheme, getContrastColor, mergedTheme, currentColors, themeMode]);
|
|
1309
1397
|
return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
|
|
1310
1398
|
value: contextValue
|
|
1311
1399
|
}, /*#__PURE__*/React__default.createElement("style", null, generateCSSVariables(mergedTheme, themeColors.light, themeColors.dark)), /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"app-studio.cjs.development.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|