@auth0/quantum-product 2.4.11 → 2.5.1
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.
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
var __read = (this && this.__read) || function (o, n) {
|
|
2
13
|
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
3
14
|
if (!m) return o;
|
|
@@ -47,11 +58,59 @@ var isValidColorMode = function (colorMode) {
|
|
|
47
58
|
var computeValidColorMode = function (colorMode) {
|
|
48
59
|
return isValidColorMode(colorMode) ? colorMode : DEFAULT_COLOR_MODE;
|
|
49
60
|
};
|
|
61
|
+
// const adjustValue = (value: any, scale: number, unit: string): string | any => {
|
|
62
|
+
// if (value === 'inherit' || isNaN(parseFloat(value))) return value;
|
|
63
|
+
// return `${(parseFloat(value) * scale).toFixed(3)}${unit}`;
|
|
64
|
+
// };
|
|
65
|
+
var adjustTypography = function (typography) {
|
|
66
|
+
return __assign(__assign({}, typography), { fontFamily: typography.fontFamily === 'inherit'
|
|
67
|
+
? 'inherit'
|
|
68
|
+
: 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif' });
|
|
69
|
+
};
|
|
70
|
+
var updateTypography = function (typography) {
|
|
71
|
+
var updatedTypography = __assign({}, typography);
|
|
72
|
+
var defaultFontFamily = 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif';
|
|
73
|
+
typography.fontFamily = defaultFontFamily;
|
|
74
|
+
var propertyAdjustments = {
|
|
75
|
+
fontFamily: function (value) {
|
|
76
|
+
// If it's not 'inherit' and doesn't already include the default font stack, append it
|
|
77
|
+
return value === 'inherit' || value.includes(defaultFontFamily) ? value : "".concat(value, ", ").concat(defaultFontFamily);
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
// Iterate over the properties and apply adjustments
|
|
81
|
+
Object.entries(typography).forEach(function (_a) {
|
|
82
|
+
var _b;
|
|
83
|
+
var _c = __read(_a, 2), key = _c[0], value = _c[1];
|
|
84
|
+
// Apply the adjustment function from the propertyAdjustments map, if it exists
|
|
85
|
+
updatedTypography[key] =
|
|
86
|
+
((_b = propertyAdjustments[key]) === null || _b === void 0 ? void 0 : _b.call(propertyAdjustments, value)) ||
|
|
87
|
+
// If it's a TypographyStyle object, apply adjustTypography
|
|
88
|
+
(isTypographyStyle(value) && adjustTypography(value)) ||
|
|
89
|
+
// Otherwise, leave the value unchanged
|
|
90
|
+
value;
|
|
91
|
+
});
|
|
92
|
+
return updatedTypography;
|
|
93
|
+
};
|
|
94
|
+
// Utility function to check if a value is of TypographyStyle type
|
|
95
|
+
var isTypographyStyle = function (value) {
|
|
96
|
+
return value && typeof value === 'object' && 'fontSize' in value; // Ensure it's a TypographyStyle
|
|
97
|
+
};
|
|
98
|
+
var applyJapaneseTypography = function (theme, lang) {
|
|
99
|
+
// Check if the language is Japanese (browser language or passed lang parameter)
|
|
100
|
+
var isJapanese = lang.startsWith('ja') || navigator.language.startsWith('ja');
|
|
101
|
+
if (!isJapanese) {
|
|
102
|
+
return theme; // No need to modify theme if it's not Japanese
|
|
103
|
+
}
|
|
104
|
+
// Update the typography styles for Japanese language
|
|
105
|
+
theme.light.typography = updateTypography(theme.light.typography);
|
|
106
|
+
theme.dark.typography = updateTypography(theme.dark.typography);
|
|
107
|
+
return theme;
|
|
108
|
+
};
|
|
50
109
|
export var QuantumProvider = function (_a) {
|
|
51
|
-
var _b = _a.theme, theme = _b === void 0 ? defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, defaultColorMode = _a.defaultColorMode;
|
|
52
|
-
var
|
|
110
|
+
var _b = _a.theme, theme = _b === void 0 ? defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, defaultColorMode = _a.defaultColorMode, _c = _a.lang, lang = _c === void 0 ? 'en' : _c;
|
|
111
|
+
var _d = __read(React.useState(function () {
|
|
53
112
|
return propColorMode || defaultColorMode || getCurrentColorModeFromStorage();
|
|
54
|
-
}), 2), colorMode =
|
|
113
|
+
}), 2), colorMode = _d[0], setColorMode = _d[1];
|
|
55
114
|
var prefersDarkMode = useMediaQuery(PREFERS_DARK_MODE_QUERY);
|
|
56
115
|
var currentColorMode = computeValidColorMode(propColorMode || colorMode);
|
|
57
116
|
React.useEffect(function () {
|
|
@@ -61,8 +120,13 @@ export var QuantumProvider = function (_a) {
|
|
|
61
120
|
}, [currentColorMode, prefersDarkMode]);
|
|
62
121
|
var activeTheme = React.useMemo(function () {
|
|
63
122
|
var mode = computePaletteMode(currentColorMode, prefersDarkMode);
|
|
64
|
-
|
|
65
|
-
|
|
123
|
+
// Apply Japanese typography if the language starts with 'ja'
|
|
124
|
+
var themeWithLanguageAdjustment = lang.startsWith('ja')
|
|
125
|
+
? applyJapaneseTypography(theme, lang)
|
|
126
|
+
: theme;
|
|
127
|
+
// Return the theme based on the current mode, with a fallback to the default color mode
|
|
128
|
+
return themeWithLanguageAdjustment[mode] || themeWithLanguageAdjustment[DEFAULT_COLOR_MODE];
|
|
129
|
+
}, [prefersDarkMode, currentColorMode, theme, lang]);
|
|
66
130
|
var handleSetColorMode = React.useCallback(function (mode) {
|
|
67
131
|
setColorMode(mode);
|
|
68
132
|
setCurrentColorModeInStorage(mode);
|
package/package.json
CHANGED
|
@@ -8,6 +8,7 @@ export interface IQuantumProviderProps {
|
|
|
8
8
|
colorMode?: ThemeColorMode;
|
|
9
9
|
onColorModeChange?(colorMode: ThemeColorMode): void;
|
|
10
10
|
children?: React.ReactNode | ((ctx: IQuantumContextValue) => React.ReactNode);
|
|
11
|
+
lang?: string;
|
|
11
12
|
}
|
|
12
13
|
export declare const getCurrentColorModeFromStorage: () => ThemeColorMode;
|
|
13
14
|
export declare const QuantumProvider: React.FC<IQuantumProviderProps>;
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
2
13
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
14
|
if (k2 === undefined) k2 = k;
|
|
4
15
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -74,11 +85,59 @@ var isValidColorMode = function (colorMode) {
|
|
|
74
85
|
var computeValidColorMode = function (colorMode) {
|
|
75
86
|
return isValidColorMode(colorMode) ? colorMode : quantum_context_1.DEFAULT_COLOR_MODE;
|
|
76
87
|
};
|
|
88
|
+
// const adjustValue = (value: any, scale: number, unit: string): string | any => {
|
|
89
|
+
// if (value === 'inherit' || isNaN(parseFloat(value))) return value;
|
|
90
|
+
// return `${(parseFloat(value) * scale).toFixed(3)}${unit}`;
|
|
91
|
+
// };
|
|
92
|
+
var adjustTypography = function (typography) {
|
|
93
|
+
return __assign(__assign({}, typography), { fontFamily: typography.fontFamily === 'inherit'
|
|
94
|
+
? 'inherit'
|
|
95
|
+
: 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif' });
|
|
96
|
+
};
|
|
97
|
+
var updateTypography = function (typography) {
|
|
98
|
+
var updatedTypography = __assign({}, typography);
|
|
99
|
+
var defaultFontFamily = 'Noto Sans JP, Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica, Arial, sans-serif';
|
|
100
|
+
typography.fontFamily = defaultFontFamily;
|
|
101
|
+
var propertyAdjustments = {
|
|
102
|
+
fontFamily: function (value) {
|
|
103
|
+
// If it's not 'inherit' and doesn't already include the default font stack, append it
|
|
104
|
+
return value === 'inherit' || value.includes(defaultFontFamily) ? value : "".concat(value, ", ").concat(defaultFontFamily);
|
|
105
|
+
},
|
|
106
|
+
};
|
|
107
|
+
// Iterate over the properties and apply adjustments
|
|
108
|
+
Object.entries(typography).forEach(function (_a) {
|
|
109
|
+
var _b;
|
|
110
|
+
var _c = __read(_a, 2), key = _c[0], value = _c[1];
|
|
111
|
+
// Apply the adjustment function from the propertyAdjustments map, if it exists
|
|
112
|
+
updatedTypography[key] =
|
|
113
|
+
((_b = propertyAdjustments[key]) === null || _b === void 0 ? void 0 : _b.call(propertyAdjustments, value)) ||
|
|
114
|
+
// If it's a TypographyStyle object, apply adjustTypography
|
|
115
|
+
(isTypographyStyle(value) && adjustTypography(value)) ||
|
|
116
|
+
// Otherwise, leave the value unchanged
|
|
117
|
+
value;
|
|
118
|
+
});
|
|
119
|
+
return updatedTypography;
|
|
120
|
+
};
|
|
121
|
+
// Utility function to check if a value is of TypographyStyle type
|
|
122
|
+
var isTypographyStyle = function (value) {
|
|
123
|
+
return value && typeof value === 'object' && 'fontSize' in value; // Ensure it's a TypographyStyle
|
|
124
|
+
};
|
|
125
|
+
var applyJapaneseTypography = function (theme, lang) {
|
|
126
|
+
// Check if the language is Japanese (browser language or passed lang parameter)
|
|
127
|
+
var isJapanese = lang.startsWith('ja') || navigator.language.startsWith('ja');
|
|
128
|
+
if (!isJapanese) {
|
|
129
|
+
return theme; // No need to modify theme if it's not Japanese
|
|
130
|
+
}
|
|
131
|
+
// Update the typography styles for Japanese language
|
|
132
|
+
theme.light.typography = updateTypography(theme.light.typography);
|
|
133
|
+
theme.dark.typography = updateTypography(theme.dark.typography);
|
|
134
|
+
return theme;
|
|
135
|
+
};
|
|
77
136
|
var QuantumProvider = function (_a) {
|
|
78
|
-
var _b = _a.theme, theme = _b === void 0 ? default_theme_1.defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, defaultColorMode = _a.defaultColorMode;
|
|
79
|
-
var
|
|
137
|
+
var _b = _a.theme, theme = _b === void 0 ? default_theme_1.defaultQuantumTheme : _b, children = _a.children, onColorModeChange = _a.onColorModeChange, propColorMode = _a.colorMode, defaultColorMode = _a.defaultColorMode, _c = _a.lang, lang = _c === void 0 ? 'en' : _c;
|
|
138
|
+
var _d = __read(React.useState(function () {
|
|
80
139
|
return propColorMode || defaultColorMode || (0, exports.getCurrentColorModeFromStorage)();
|
|
81
|
-
}), 2), colorMode =
|
|
140
|
+
}), 2), colorMode = _d[0], setColorMode = _d[1];
|
|
82
141
|
var prefersDarkMode = (0, use_media_query_1.useMediaQuery)(exports.PREFERS_DARK_MODE_QUERY);
|
|
83
142
|
var currentColorMode = computeValidColorMode(propColorMode || colorMode);
|
|
84
143
|
React.useEffect(function () {
|
|
@@ -88,8 +147,13 @@ var QuantumProvider = function (_a) {
|
|
|
88
147
|
}, [currentColorMode, prefersDarkMode]);
|
|
89
148
|
var activeTheme = React.useMemo(function () {
|
|
90
149
|
var mode = computePaletteMode(currentColorMode, prefersDarkMode);
|
|
91
|
-
|
|
92
|
-
|
|
150
|
+
// Apply Japanese typography if the language starts with 'ja'
|
|
151
|
+
var themeWithLanguageAdjustment = lang.startsWith('ja')
|
|
152
|
+
? applyJapaneseTypography(theme, lang)
|
|
153
|
+
: theme;
|
|
154
|
+
// Return the theme based on the current mode, with a fallback to the default color mode
|
|
155
|
+
return themeWithLanguageAdjustment[mode] || themeWithLanguageAdjustment[quantum_context_1.DEFAULT_COLOR_MODE];
|
|
156
|
+
}, [prefersDarkMode, currentColorMode, theme, lang]);
|
|
93
157
|
var handleSetColorMode = React.useCallback(function (mode) {
|
|
94
158
|
setColorMode(mode);
|
|
95
159
|
setCurrentColorModeInStorage(mode);
|
|
@@ -8,6 +8,7 @@ export interface ITypography extends Typography {
|
|
|
8
8
|
label: TypographyStyle;
|
|
9
9
|
input: TypographyStyle;
|
|
10
10
|
fontWeightSemibold: any;
|
|
11
|
+
[key: string]: TypographyStyle | string | any;
|
|
11
12
|
}
|
|
12
13
|
export type ITypographyOptions = TypographyOptions & Partial<ITypography>;
|
|
13
|
-
export declare const createTypography: (overrides: ITypographyOptions | undefined, tokens: ThemeTokens) =>
|
|
14
|
+
export declare const createTypography: (overrides: ITypographyOptions | undefined, tokens: ThemeTokens) => ITypography;
|