@okta/odyssey-react-mui 1.1.1 → 1.2.0
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/CHANGELOG.md +22 -0
- package/dist/Autocomplete.js +12 -1
- package/dist/Autocomplete.js.map +1 -1
- package/dist/OdysseyCacheProvider.js +4 -1
- package/dist/OdysseyCacheProvider.js.map +1 -1
- package/dist/OdysseyProvider.js +5 -1
- package/dist/OdysseyProvider.js.map +1 -1
- package/dist/OdysseyThemeProvider.js +5 -1
- package/dist/OdysseyThemeProvider.js.map +1 -1
- package/dist/OdysseyTranslationProvider.js +1 -1
- package/dist/OdysseyTranslationProvider.js.map +1 -1
- package/dist/PasswordField.js +11 -3
- package/dist/PasswordField.js.map +1 -1
- package/dist/Select.js +34 -33
- package/dist/Select.js.map +1 -1
- package/dist/Typography.js +0 -22
- package/dist/Typography.js.map +1 -1
- package/dist/createShadowDom.js +26 -0
- package/dist/createShadowDom.js.map +1 -0
- package/dist/{OdysseyI18n.js → i18n.js} +3 -2
- package/dist/i18n.js.map +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/labs/datePickerTheme.js +4 -2
- package/dist/labs/datePickerTheme.js.map +1 -1
- package/dist/properties/ts/odyssey-react-mui.js +2 -0
- package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
- package/dist/src/Autocomplete.d.ts +23 -3
- package/dist/src/Autocomplete.d.ts.map +1 -1
- package/dist/src/OdysseyCacheProvider.d.ts +6 -1
- package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
- package/dist/src/OdysseyProvider.d.ts +1 -1
- package/dist/src/OdysseyProvider.d.ts.map +1 -1
- package/dist/src/OdysseyThemeProvider.d.ts +2 -1
- package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
- package/dist/src/PasswordField.d.ts +8 -0
- package/dist/src/PasswordField.d.ts.map +1 -1
- package/dist/src/Select.d.ts +1 -54
- package/dist/src/Select.d.ts.map +1 -1
- package/dist/src/Typography.d.ts +11 -15
- package/dist/src/Typography.d.ts.map +1 -1
- package/dist/src/createShadowDom.d.ts +16 -0
- package/dist/src/createShadowDom.d.ts.map +1 -0
- package/dist/src/{OdysseyI18n.d.ts → i18n.d.ts} +5 -2
- package/dist/src/i18n.d.ts.map +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/properties/ts/odyssey-react-mui.d.ts +2 -0
- package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
- package/dist/src/theme/components.d.ts +4 -1
- package/dist/src/theme/components.d.ts.map +1 -1
- package/dist/src/theme/createOdysseyMuiTheme.d.ts +23 -0
- package/dist/src/theme/createOdysseyMuiTheme.d.ts.map +1 -0
- package/dist/src/theme/mixins.d.ts +3 -1
- package/dist/src/theme/mixins.d.ts.map +1 -1
- package/dist/src/theme/palette.d.ts +3 -1
- package/dist/src/theme/palette.d.ts.map +1 -1
- package/dist/src/theme/shape.d.ts +3 -1
- package/dist/src/theme/shape.d.ts.map +1 -1
- package/dist/src/theme/spacing.d.ts +3 -1
- package/dist/src/theme/spacing.d.ts.map +1 -1
- package/dist/src/theme/theme.d.ts +1 -8
- package/dist/src/theme/theme.d.ts.map +1 -1
- package/dist/src/theme/typography.d.ts +3 -1
- package/dist/src/theme/typography.d.ts.map +1 -1
- package/dist/theme/components.js +80 -63
- package/dist/theme/components.js.map +1 -1
- package/dist/theme/createOdysseyMuiTheme.js +51 -0
- package/dist/theme/createOdysseyMuiTheme.js.map +1 -0
- package/dist/theme/mixins.js +4 -1
- package/dist/theme/mixins.js.map +1 -1
- package/dist/theme/palette.js +4 -1
- package/dist/theme/palette.js.map +1 -1
- package/dist/theme/shape.js +4 -1
- package/dist/theme/shape.js.map +1 -1
- package/dist/theme/spacing.js +4 -1
- package/dist/theme/spacing.js.map +1 -1
- package/dist/theme/theme.js +1 -20
- package/dist/theme/theme.js.map +1 -1
- package/dist/theme/typography.js +4 -1
- package/dist/theme/typography.js.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/Autocomplete.tsx +44 -3
- package/src/OdysseyCacheProvider.tsx +9 -1
- package/src/OdysseyProvider.tsx +9 -2
- package/src/OdysseyThemeProvider.tsx +8 -2
- package/src/OdysseyTranslationProvider.test.tsx +2 -2
- package/src/OdysseyTranslationProvider.tsx +1 -1
- package/src/PasswordField.tsx +24 -8
- package/src/Select.tsx +147 -152
- package/src/Typography.tsx +0 -26
- package/src/createShadowDom.ts +46 -0
- package/src/{OdysseyI18n.ts → i18n.ts} +2 -2
- package/src/index.ts +1 -0
- package/src/labs/datePickerTheme.tsx +2 -2
- package/src/properties/odyssey-react-mui.properties +2 -0
- package/src/properties/ts/odyssey-react-mui.ts +1 -1
- package/src/theme/components.tsx +26 -9
- package/src/theme/createOdysseyMuiTheme.ts +47 -0
- package/src/theme/mixins.ts +5 -1
- package/src/theme/palette.ts +5 -3
- package/src/theme/shape.ts +5 -1
- package/src/theme/spacing.ts +5 -3
- package/src/theme/theme.ts +1 -26
- package/src/theme/typography.ts +5 -3
- package/dist/OdysseyI18n.js.map +0 -1
- package/dist/src/OdysseyI18n.d.ts.map +0 -1
package/src/Typography.tsx
CHANGED
|
@@ -70,10 +70,6 @@ export type TypographyProps = {
|
|
|
70
70
|
* The text content of the component.
|
|
71
71
|
*/
|
|
72
72
|
children: ReactNode;
|
|
73
|
-
/**
|
|
74
|
-
* Additional classes to add to the component.
|
|
75
|
-
*/
|
|
76
|
-
classes?: object;
|
|
77
73
|
/**
|
|
78
74
|
* The color of the text.
|
|
79
75
|
*/
|
|
@@ -93,7 +89,6 @@ const Typography = ({
|
|
|
93
89
|
ariaLabel,
|
|
94
90
|
ariaLabelledBy,
|
|
95
91
|
children,
|
|
96
|
-
classes,
|
|
97
92
|
color,
|
|
98
93
|
component: componentProp,
|
|
99
94
|
testId,
|
|
@@ -118,7 +113,6 @@ const Typography = ({
|
|
|
118
113
|
aria-label={ariaLabel}
|
|
119
114
|
aria-labelledby={ariaLabelledBy}
|
|
120
115
|
children={children}
|
|
121
|
-
classes={classes}
|
|
122
116
|
color={color}
|
|
123
117
|
component={component}
|
|
124
118
|
data-se={testId}
|
|
@@ -135,7 +129,6 @@ const Heading1 = ({
|
|
|
135
129
|
ariaLabel,
|
|
136
130
|
ariaLabelledBy,
|
|
137
131
|
children,
|
|
138
|
-
classes,
|
|
139
132
|
color,
|
|
140
133
|
component,
|
|
141
134
|
testId,
|
|
@@ -145,7 +138,6 @@ const Heading1 = ({
|
|
|
145
138
|
ariaLabel={ariaLabel}
|
|
146
139
|
ariaLabelledBy={ariaLabelledBy}
|
|
147
140
|
children={children}
|
|
148
|
-
classes={classes}
|
|
149
141
|
color={color}
|
|
150
142
|
component={component}
|
|
151
143
|
data-se={testId}
|
|
@@ -161,7 +153,6 @@ const Heading2 = ({
|
|
|
161
153
|
ariaLabel,
|
|
162
154
|
ariaLabelledBy,
|
|
163
155
|
children,
|
|
164
|
-
classes,
|
|
165
156
|
color,
|
|
166
157
|
component,
|
|
167
158
|
testId,
|
|
@@ -171,7 +162,6 @@ const Heading2 = ({
|
|
|
171
162
|
ariaLabel={ariaLabel}
|
|
172
163
|
ariaLabelledBy={ariaLabelledBy}
|
|
173
164
|
children={children}
|
|
174
|
-
classes={classes}
|
|
175
165
|
color={color}
|
|
176
166
|
component={component}
|
|
177
167
|
data-se={testId}
|
|
@@ -187,7 +177,6 @@ const Heading3 = ({
|
|
|
187
177
|
ariaLabel,
|
|
188
178
|
ariaLabelledBy,
|
|
189
179
|
children,
|
|
190
|
-
classes,
|
|
191
180
|
color,
|
|
192
181
|
component,
|
|
193
182
|
testId,
|
|
@@ -197,7 +186,6 @@ const Heading3 = ({
|
|
|
197
186
|
ariaLabel={ariaLabel}
|
|
198
187
|
ariaLabelledBy={ariaLabelledBy}
|
|
199
188
|
children={children}
|
|
200
|
-
classes={classes}
|
|
201
189
|
color={color}
|
|
202
190
|
component={component}
|
|
203
191
|
data-se={testId}
|
|
@@ -213,7 +201,6 @@ const Heading4 = ({
|
|
|
213
201
|
ariaLabel,
|
|
214
202
|
ariaLabelledBy,
|
|
215
203
|
children,
|
|
216
|
-
classes,
|
|
217
204
|
color,
|
|
218
205
|
component,
|
|
219
206
|
testId,
|
|
@@ -223,7 +210,6 @@ const Heading4 = ({
|
|
|
223
210
|
ariaLabel={ariaLabel}
|
|
224
211
|
ariaLabelledBy={ariaLabelledBy}
|
|
225
212
|
children={children}
|
|
226
|
-
classes={classes}
|
|
227
213
|
color={color}
|
|
228
214
|
component={component}
|
|
229
215
|
data-se={testId}
|
|
@@ -239,7 +225,6 @@ const Heading5 = ({
|
|
|
239
225
|
ariaLabel,
|
|
240
226
|
ariaLabelledBy,
|
|
241
227
|
children,
|
|
242
|
-
classes,
|
|
243
228
|
color,
|
|
244
229
|
component,
|
|
245
230
|
testId,
|
|
@@ -249,7 +234,6 @@ const Heading5 = ({
|
|
|
249
234
|
ariaLabel={ariaLabel}
|
|
250
235
|
ariaLabelledBy={ariaLabelledBy}
|
|
251
236
|
children={children}
|
|
252
|
-
classes={classes}
|
|
253
237
|
color={color}
|
|
254
238
|
component={component}
|
|
255
239
|
data-se={testId}
|
|
@@ -265,7 +249,6 @@ const Heading6 = ({
|
|
|
265
249
|
ariaLabel,
|
|
266
250
|
ariaLabelledBy,
|
|
267
251
|
children,
|
|
268
|
-
classes,
|
|
269
252
|
color,
|
|
270
253
|
component,
|
|
271
254
|
testId,
|
|
@@ -275,7 +258,6 @@ const Heading6 = ({
|
|
|
275
258
|
ariaLabel={ariaLabel}
|
|
276
259
|
ariaLabelledBy={ariaLabelledBy}
|
|
277
260
|
children={children}
|
|
278
|
-
classes={classes}
|
|
279
261
|
color={color}
|
|
280
262
|
component={component}
|
|
281
263
|
data-se={testId}
|
|
@@ -291,7 +273,6 @@ const Paragraph = ({
|
|
|
291
273
|
ariaLabel,
|
|
292
274
|
ariaLabelledBy,
|
|
293
275
|
children,
|
|
294
|
-
classes,
|
|
295
276
|
color,
|
|
296
277
|
component,
|
|
297
278
|
testId,
|
|
@@ -301,7 +282,6 @@ const Paragraph = ({
|
|
|
301
282
|
ariaLabel={ariaLabel}
|
|
302
283
|
ariaLabelledBy={ariaLabelledBy}
|
|
303
284
|
children={children}
|
|
304
|
-
classes={classes}
|
|
305
285
|
color={color}
|
|
306
286
|
component={component}
|
|
307
287
|
data-se={testId}
|
|
@@ -317,7 +297,6 @@ const Subordinate = ({
|
|
|
317
297
|
ariaLabel,
|
|
318
298
|
ariaLabelledBy,
|
|
319
299
|
children,
|
|
320
|
-
classes,
|
|
321
300
|
color,
|
|
322
301
|
component,
|
|
323
302
|
testId,
|
|
@@ -327,7 +306,6 @@ const Subordinate = ({
|
|
|
327
306
|
ariaLabel={ariaLabel}
|
|
328
307
|
ariaLabelledBy={ariaLabelledBy}
|
|
329
308
|
children={children}
|
|
330
|
-
classes={classes}
|
|
331
309
|
color={color}
|
|
332
310
|
component={component}
|
|
333
311
|
data-se={testId}
|
|
@@ -343,7 +321,6 @@ const Support = ({
|
|
|
343
321
|
ariaLabel,
|
|
344
322
|
ariaLabelledBy,
|
|
345
323
|
children,
|
|
346
|
-
classes,
|
|
347
324
|
color,
|
|
348
325
|
component,
|
|
349
326
|
testId,
|
|
@@ -353,7 +330,6 @@ const Support = ({
|
|
|
353
330
|
ariaLabel={ariaLabel}
|
|
354
331
|
ariaLabelledBy={ariaLabelledBy}
|
|
355
332
|
children={children}
|
|
356
|
-
classes={classes}
|
|
357
333
|
color={color}
|
|
358
334
|
component={component}
|
|
359
335
|
data-se={testId}
|
|
@@ -369,7 +345,6 @@ const Legend = ({
|
|
|
369
345
|
ariaLabel,
|
|
370
346
|
ariaLabelledBy,
|
|
371
347
|
children,
|
|
372
|
-
classes,
|
|
373
348
|
color,
|
|
374
349
|
component,
|
|
375
350
|
testId,
|
|
@@ -379,7 +354,6 @@ const Legend = ({
|
|
|
379
354
|
ariaLabel={ariaLabel}
|
|
380
355
|
ariaLabelledBy={ariaLabelledBy}
|
|
381
356
|
children={children}
|
|
382
|
-
classes={classes}
|
|
383
357
|
color={color}
|
|
384
358
|
component={component}
|
|
385
359
|
data-se={testId}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
|
|
3
|
+
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
|
|
4
|
+
*
|
|
5
|
+
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
7
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
8
|
+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
9
|
+
*
|
|
10
|
+
* See the License for the specific language governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
export const createShadowDom = (containerElement: HTMLElement) => {
|
|
14
|
+
const shadowContainer = containerElement.attachShadow({ mode: "open" });
|
|
15
|
+
const emotionRootElement = document.createElement("style");
|
|
16
|
+
const shadowRootElement = document.createElement("div");
|
|
17
|
+
|
|
18
|
+
shadowContainer.appendChild(emotionRootElement);
|
|
19
|
+
shadowContainer.appendChild(shadowRootElement);
|
|
20
|
+
|
|
21
|
+
return {
|
|
22
|
+
emotionRootElement,
|
|
23
|
+
shadowRootElement,
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
// --DOCS--
|
|
28
|
+
|
|
29
|
+
// const {
|
|
30
|
+
// emotionRootElement,
|
|
31
|
+
// shadowRootElement,
|
|
32
|
+
// } = (
|
|
33
|
+
// createShadowDom(
|
|
34
|
+
// document.querySelector('#root') as HTMLElement
|
|
35
|
+
// )
|
|
36
|
+
// )
|
|
37
|
+
|
|
38
|
+
// ReactDOM
|
|
39
|
+
// .createRoot(
|
|
40
|
+
// shadowRootElement
|
|
41
|
+
// )
|
|
42
|
+
// .render(
|
|
43
|
+
// <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>
|
|
44
|
+
// <App />
|
|
45
|
+
// </OdysseyProvider>
|
|
46
|
+
// )
|
|
@@ -103,5 +103,5 @@ Object.entries(resources).forEach(([locale, property]) => {
|
|
|
103
103
|
i18n.addResourceBundle(locale, defaultNS, property);
|
|
104
104
|
});
|
|
105
105
|
|
|
106
|
-
|
|
107
|
-
export
|
|
106
|
+
export const odysseyTranslate = i18n.t.bind(i18n);
|
|
107
|
+
export { i18n };
|
package/src/index.ts
CHANGED
|
@@ -74,6 +74,7 @@ export * from "./MenuItem";
|
|
|
74
74
|
export * from "./NativeSelect";
|
|
75
75
|
export * from "./NullElement";
|
|
76
76
|
export * from "./OdysseyCacheProvider";
|
|
77
|
+
export { odysseyTranslate } from "./i18n";
|
|
77
78
|
export * from "./OdysseyProvider";
|
|
78
79
|
export * from "./OdysseyThemeProvider";
|
|
79
80
|
export * from "./OdysseyTranslationProvider";
|
|
@@ -19,11 +19,11 @@ import {
|
|
|
19
19
|
} from "../icons.generated";
|
|
20
20
|
import { createOdysseyMuiTheme } from "../theme";
|
|
21
21
|
import { ThemeOptions } from "@mui/material";
|
|
22
|
-
import * as
|
|
22
|
+
import * as odysseyTokens from "@okta/odyssey-design-tokens";
|
|
23
23
|
|
|
24
24
|
const popupSpacingValue = 5;
|
|
25
25
|
|
|
26
|
-
const odysseyTheme = createOdysseyMuiTheme(
|
|
26
|
+
const odysseyTheme = createOdysseyMuiTheme({ odysseyTokens });
|
|
27
27
|
|
|
28
28
|
type ThemeStyles = ({
|
|
29
29
|
theme,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
fielderror.screenreader.text = Error
|
|
2
2
|
fieldlabel.optional.text = Optional
|
|
3
3
|
fieldlabel.required.text = Required
|
|
4
|
+
passwordfield.icon.label.show = Show password
|
|
5
|
+
passwordfield.icon.label.hide = Hide password
|
|
4
6
|
severity.error = error
|
|
5
7
|
severity.info = info
|
|
6
8
|
severity.success = success
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
|
|
1
|
+
export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
|
package/src/theme/components.tsx
CHANGED
|
@@ -51,9 +51,13 @@ import {
|
|
|
51
51
|
import { DesignTokens } from "./theme";
|
|
52
52
|
import { CSSProperties } from "react";
|
|
53
53
|
|
|
54
|
-
export const components = (
|
|
55
|
-
odysseyTokens
|
|
56
|
-
|
|
54
|
+
export const components = ({
|
|
55
|
+
odysseyTokens,
|
|
56
|
+
shadowRootElement,
|
|
57
|
+
}: {
|
|
58
|
+
odysseyTokens: DesignTokens;
|
|
59
|
+
shadowRootElement?: HTMLDivElement;
|
|
60
|
+
}): ThemeOptions["components"] => {
|
|
57
61
|
return {
|
|
58
62
|
MuiAlert: {
|
|
59
63
|
defaultProps: {
|
|
@@ -1601,6 +1605,14 @@ export const components = (
|
|
|
1601
1605
|
},
|
|
1602
1606
|
},
|
|
1603
1607
|
},
|
|
1608
|
+
MuiListItemIcon: {
|
|
1609
|
+
styleOverrides: {
|
|
1610
|
+
root: {
|
|
1611
|
+
minWidth: "unset",
|
|
1612
|
+
color: "inherit",
|
|
1613
|
+
},
|
|
1614
|
+
},
|
|
1615
|
+
},
|
|
1604
1616
|
MuiListSubheader: {
|
|
1605
1617
|
styleOverrides: {
|
|
1606
1618
|
root: {
|
|
@@ -1694,12 +1706,9 @@ export const components = (
|
|
|
1694
1706
|
}),
|
|
1695
1707
|
},
|
|
1696
1708
|
},
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
minWidth: "unset",
|
|
1701
|
-
color: "inherit",
|
|
1702
|
-
},
|
|
1709
|
+
MuiModal: {
|
|
1710
|
+
defaultProps: {
|
|
1711
|
+
container: shadowRootElement,
|
|
1703
1712
|
},
|
|
1704
1713
|
},
|
|
1705
1714
|
MuiNativeSelect: {
|
|
@@ -1720,6 +1729,9 @@ export const components = (
|
|
|
1720
1729
|
},
|
|
1721
1730
|
},
|
|
1722
1731
|
MuiPopover: {
|
|
1732
|
+
defaultProps: {
|
|
1733
|
+
container: shadowRootElement,
|
|
1734
|
+
},
|
|
1723
1735
|
styleOverrides: {
|
|
1724
1736
|
paper: {
|
|
1725
1737
|
marginBlockStart: odysseyTokens.Spacing1,
|
|
@@ -1729,6 +1741,11 @@ export const components = (
|
|
|
1729
1741
|
},
|
|
1730
1742
|
},
|
|
1731
1743
|
},
|
|
1744
|
+
MuiPopper: {
|
|
1745
|
+
defaultProps: {
|
|
1746
|
+
container: shadowRootElement,
|
|
1747
|
+
},
|
|
1748
|
+
},
|
|
1732
1749
|
MuiRadio: {
|
|
1733
1750
|
defaultProps: {
|
|
1734
1751
|
size: "small",
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
|
|
3
|
+
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
|
|
4
|
+
*
|
|
5
|
+
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
7
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
8
|
+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
9
|
+
*
|
|
10
|
+
* See the License for the specific language governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { createTheme } from "@mui/material/styles";
|
|
14
|
+
import * as Tokens from "@okta/odyssey-design-tokens";
|
|
15
|
+
|
|
16
|
+
import { components } from "./components";
|
|
17
|
+
import { mixins } from "./mixins";
|
|
18
|
+
import { palette } from "./palette";
|
|
19
|
+
import { shape } from "./shape";
|
|
20
|
+
import { spacing } from "./spacing";
|
|
21
|
+
import { typography } from "./typography";
|
|
22
|
+
import "./components.types";
|
|
23
|
+
import "./mixins.types";
|
|
24
|
+
import "./palette.types";
|
|
25
|
+
import "./typography.types";
|
|
26
|
+
|
|
27
|
+
export type DesignTokens = typeof Tokens;
|
|
28
|
+
export type DesignTokensOverride = Partial<typeof Tokens>;
|
|
29
|
+
|
|
30
|
+
export const createOdysseyMuiTheme = ({
|
|
31
|
+
odysseyTokens,
|
|
32
|
+
shadowRootElement,
|
|
33
|
+
}: {
|
|
34
|
+
odysseyTokens: DesignTokens;
|
|
35
|
+
shadowRootElement?: HTMLDivElement;
|
|
36
|
+
}) =>
|
|
37
|
+
createTheme({
|
|
38
|
+
components: components({
|
|
39
|
+
odysseyTokens,
|
|
40
|
+
shadowRootElement,
|
|
41
|
+
}),
|
|
42
|
+
mixins: mixins({ odysseyTokens }),
|
|
43
|
+
palette: palette({ odysseyTokens }),
|
|
44
|
+
shape: shape({ odysseyTokens }),
|
|
45
|
+
spacing: spacing({ odysseyTokens }),
|
|
46
|
+
typography: typography({ odysseyTokens }),
|
|
47
|
+
});
|
package/src/theme/mixins.ts
CHANGED
|
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const mixins = (
|
|
17
|
+
export const mixins = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["mixins"] => {
|
|
18
22
|
return {
|
|
19
23
|
maxWidth: odysseyTokens.TypographyLineLengthMax,
|
|
20
24
|
borderRadius: odysseyTokens.BorderRadiusMain,
|
package/src/theme/palette.ts
CHANGED
|
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const palette = (
|
|
18
|
-
odysseyTokens
|
|
19
|
-
|
|
17
|
+
export const palette = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["palette"] => {
|
|
20
22
|
return {
|
|
21
23
|
mode: "light",
|
|
22
24
|
common: {
|
package/src/theme/shape.ts
CHANGED
|
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const shape = (
|
|
17
|
+
export const shape = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["shape"] => {
|
|
18
22
|
// Strip units from BorderRadiusBase to accommodate MUI's typing
|
|
19
23
|
const NumericalBorderRadiusBase =
|
|
20
24
|
typeof odysseyTokens.BorderRadiusMain === "string"
|
package/src/theme/spacing.ts
CHANGED
|
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import type { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const spacing = (
|
|
18
|
-
odysseyTokens
|
|
19
|
-
|
|
17
|
+
export const spacing = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["spacing"] => {
|
|
20
22
|
return [
|
|
21
23
|
odysseyTokens.Spacing0,
|
|
22
24
|
odysseyTokens.Spacing1,
|
package/src/theme/theme.ts
CHANGED
|
@@ -10,29 +10,4 @@
|
|
|
10
10
|
* See the License for the specific language governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
import * as Tokens from "@okta/odyssey-design-tokens";
|
|
15
|
-
|
|
16
|
-
import { components } from "./components";
|
|
17
|
-
import { mixins } from "./mixins";
|
|
18
|
-
import { palette } from "./palette";
|
|
19
|
-
import { shape } from "./shape";
|
|
20
|
-
import { spacing } from "./spacing";
|
|
21
|
-
import { typography } from "./typography";
|
|
22
|
-
import "./components.types";
|
|
23
|
-
import "./mixins.types";
|
|
24
|
-
import "./palette.types";
|
|
25
|
-
import "./typography.types";
|
|
26
|
-
|
|
27
|
-
export type DesignTokens = typeof Tokens;
|
|
28
|
-
export type DesignTokensOverride = Partial<typeof Tokens>;
|
|
29
|
-
|
|
30
|
-
export const createOdysseyMuiTheme = (odysseyTokens: DesignTokens) =>
|
|
31
|
-
createTheme({
|
|
32
|
-
components: components(odysseyTokens),
|
|
33
|
-
mixins: mixins(odysseyTokens),
|
|
34
|
-
palette: palette(odysseyTokens),
|
|
35
|
-
shape: shape(odysseyTokens),
|
|
36
|
-
spacing: spacing(odysseyTokens),
|
|
37
|
-
typography: typography(odysseyTokens),
|
|
38
|
-
});
|
|
13
|
+
export * from "./createOdysseyMuiTheme";
|
package/src/theme/typography.ts
CHANGED
|
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const typography = (
|
|
18
|
-
odysseyTokens
|
|
19
|
-
|
|
17
|
+
export const typography = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["typography"] => {
|
|
20
22
|
return {
|
|
21
23
|
htmlFontSize: 16,
|
|
22
24
|
fontFamily: odysseyTokens.TypographyFamilyBody,
|
package/dist/OdysseyI18n.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OdysseyI18n.js","names":["i18n","initReactI18next","translation","cs","da","de","el","en","es","fi","fr","hu","id","it","ja","ko","ms","nb","nlNL","okPL","okSK","pl","ptBR","ro","ru","sv","th","tr","uk","vi","zhCN","znTW","supportedLanguages","defaultLNG","defaultNS","resources","nl_NL","ok_PL","ok_SK","pt_BR","zh_CN","zh_TW","use","init","ns","fallbackLng","supportedLngs","load","keySeparator","interpolation","escapeValue","skipOnVariables","react","useSuspense","bindI18nStore","Object","entries","forEach","_ref","locale","property","addResourceBundle"],"sources":["../src/OdysseyI18n.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\n\nimport { translation as cs } from \"./properties/ts/odyssey-react-mui_cs\";\nimport { translation as da } from \"./properties/ts/odyssey-react-mui_da\";\nimport { translation as de } from \"./properties/ts/odyssey-react-mui_de\";\nimport { translation as el } from \"./properties/ts/odyssey-react-mui_el\";\nimport { translation as en } from \"./properties/ts/odyssey-react-mui\";\nimport { translation as es } from \"./properties/ts/odyssey-react-mui_es\";\nimport { translation as fi } from \"./properties/ts/odyssey-react-mui_fi\";\nimport { translation as fr } from \"./properties/ts/odyssey-react-mui_fr\";\nimport { translation as hu } from \"./properties/ts/odyssey-react-mui_hu\";\nimport { translation as id } from \"./properties/ts/odyssey-react-mui_id\";\nimport { translation as it } from \"./properties/ts/odyssey-react-mui_it\";\nimport { translation as ja } from \"./properties/ts/odyssey-react-mui_ja\";\nimport { translation as ko } from \"./properties/ts/odyssey-react-mui_ko\";\nimport { translation as ms } from \"./properties/ts/odyssey-react-mui_ms\";\nimport { translation as nb } from \"./properties/ts/odyssey-react-mui_nb\";\nimport { translation as nlNL } from \"./properties/ts/odyssey-react-mui_nl_NL\";\nimport { translation as okPL } from \"./properties/ts/odyssey-react-mui_ok_PL\";\nimport { translation as okSK } from \"./properties/ts/odyssey-react-mui_ok_SK\";\nimport { translation as pl } from \"./properties/ts/odyssey-react-mui_pl\";\nimport { translation as ptBR } from \"./properties/ts/odyssey-react-mui_pt_BR\";\nimport { translation as ro } from \"./properties/ts/odyssey-react-mui_ro\";\nimport { translation as ru } from \"./properties/ts/odyssey-react-mui_ru\";\nimport { translation as sv } from \"./properties/ts/odyssey-react-mui_sv\";\nimport { translation as th } from \"./properties/ts/odyssey-react-mui_th\";\nimport { translation as tr } from \"./properties/ts/odyssey-react-mui_tr\";\nimport { translation as uk } from \"./properties/ts/odyssey-react-mui_uk\";\nimport { translation as vi } from \"./properties/ts/odyssey-react-mui_vi\";\nimport { translation as zhCN } from \"./properties/ts/odyssey-react-mui_zh_CN\";\nimport { translation as znTW } from \"./properties/ts/odyssey-react-mui_zh_TW\";\n\nimport {\n SupportedLanguages,\n supportedLanguages,\n} from \"./OdysseyTranslationProvider.types\";\n\nexport const defaultLNG: SupportedLanguages = \"en\";\nexport const defaultNS = \"translations\";\nexport const resources = {\n cs,\n da,\n de,\n el,\n en,\n es,\n fi,\n fr,\n hu,\n id,\n it,\n ja,\n ko,\n ms,\n nb,\n nl_NL: nlNL,\n ok_PL: okPL,\n ok_SK: okSK,\n pl,\n pt_BR: ptBR,\n ro,\n ru,\n sv,\n th,\n tr,\n uk,\n vi,\n zh_CN: zhCN,\n zh_TW: znTW,\n};\n\ni18n.use(initReactI18next).init({\n defaultNS,\n ns: [defaultNS],\n fallbackLng: defaultLNG,\n supportedLngs: supportedLanguages,\n load: \"currentOnly\",\n keySeparator: false,\n interpolation: {\n escapeValue: false, // react already safe from xss\n skipOnVariables: false, // to handle translations that use nesting\n },\n react: {\n useSuspense: false,\n bindI18nStore: \"added\",\n },\n});\n\nObject.entries(resources).forEach(([locale, property]) => {\n i18n.addResourceBundle(locale, defaultNS, property);\n});\n\n// eslint-disable-next-line import/no-default-export\nexport default i18n;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"OdysseyI18n.d.ts","sourceRoot":"","sources":["../../src/OdysseyI18n.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AAiC3B,OAAO,EACL,kBAAkB,EAEnB,MAAM,oCAAoC,CAAC;AAE5C,eAAO,MAAM,UAAU,EAAE,kBAAyB,CAAC;AACnD,eAAO,MAAM,SAAS,iBAAiB,CAAC;AACxC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAC;AAwBF,eAAe,IAAI,CAAC"}
|