Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated Palette Generation #3481

Merged
merged 11 commits into from
Dec 12, 2023
Merged

Updated Palette Generation #3481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f03e6e3
Initial palette generation
trevoring-okta Dec 2, 2023
849603a
Use designTokensOverride for palette
trevoring-okta Dec 4, 2023
8421bf8
Refine design token overrides with palette gen and update tests
trevoring-okta Dec 5, 2023
a909f04
Update e2e test
trevoring-okta Dec 5, 2023
9a829f2
Empty commit for Bacon
trevoring-okta Dec 5, 2023
6c9b511
Update base VRT screenshots
trevoring-okta Dec 6, 2023
6251abf
Removing token-based palette generation
trevoring-okta Dec 6, 2023
2068be9
Bump to Odyssey 1.9.1
trevoring-okta Dec 6, 2023
b13905b
Create mergedTokens for SIW specific overrides
trevoring-okta Dec 6, 2023
733438b
Revert responseConfig change
trevoring-okta Dec 6, 2023
ad8c34a
Update Tokens -> tokens naming
trevoring-okta Dec 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/v3/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,16 @@
"ie 11"
],
"dependencies": {
"@adobe/leonardo-contrast-colors": "1.0.0-alpha.13",
"@babel/runtime": "^7.18.6",
"@emotion/cache": "^11.9.3",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@hcaptcha/react-hcaptcha": "^1.8.1",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.5",
"@okta/odyssey-design-tokens": "^1.2.0",
"@okta/odyssey-react-mui": "^1.2.0",
"@okta/odyssey-design-tokens": "1.9.1",
"@okta/odyssey-react-mui": "1.9.1",
Comment on lines +50 to +51
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're intentionally pinning to the exact semver?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I decided to pin exactly because even though Odyssey promised no breaking changes they have still been having some breaking changes. For example, the OdysseyProvider API was broken for a few versions and only just got fixed at this 1.9.1 update

"@okta/odyssey-react-mui-legacy": "npm:@okta/odyssey-react-mui@^0.17.0",
"@okta/okta-auth-js": "^7.4.2",
"chroma-js": "^2.4.2",
Expand Down
Binary file modified src/v3/screenshots/base/UI_demo/UI_demo_RTL_VRT.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/v3/screenshots/base/UI_demo/UI_demo_VRT.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions src/v3/src/components/AuthCoin/AuthCoin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const AuthCoin: FunctionComponent<AuthCoinProps> = (props) => {
const authCoinConfigByAuthKey = authCoinConfiguration[authenticatorKey];

const containerClasses = classNames(authCoinConfigByAuthKey?.iconClassName, customClasses);
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

function createAuthCoinIcon() {
// TODO: OKTA-467022 - Add warning when attempted to customize non-customizeable authenticator
Expand All @@ -46,8 +46,8 @@ const AuthCoin: FunctionComponent<AuthCoinProps> = (props) => {
alt={authCoinConfigByAuthKey.description}
className="custom-logo"
sx={{
width: Tokens.Spacing7,
height: Tokens.Spacing7,
width: tokens.Spacing7,
height: tokens.Spacing7,
}}
/>
);
Expand Down
10 changes: 5 additions & 5 deletions src/v3/src/components/AuthContainer/AuthContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { useWidgetContext } from '../../contexts';
const AuthContainer: FunctionComponent<{ hide: boolean }> = ({ children, hide }) => {
const { languageDirection, languageCode } = useWidgetContext();
const classes = classNames('auth-container', 'main-container');
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

return (
<Box
Expand Down Expand Up @@ -70,10 +70,10 @@ const AuthContainer: FunctionComponent<{ hide: boolean }> = ({ children, hide })
sx={{
maxInlineSize: '432px',
minInlineSize: '320px',
borderWidth: Tokens.BorderWidthMain,
borderStyle: Tokens.BorderStyleMain,
borderRadius: Tokens.BorderRadiusMain,
borderColor: Tokens.BorderColorDisplay,
borderWidth: tokens.BorderWidthMain,
borderStyle: tokens.BorderStyleMain,
borderRadius: tokens.BorderRadiusMain,
borderColor: tokens.BorderColorDisplay,
'@media only screen and (max-width: 391px)': {
borderWidth: 0,
},
Expand Down
12 changes: 6 additions & 6 deletions src/v3/src/components/AuthHeader/AuthHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const AuthHeader: FunctionComponent<AuthHeaderProps> = ({
const showAuthCoin = shouldRenderAuthCoin(authCoinProps);
const containerClasses = classNames('okta-sign-in-header', 'auth-header', { authCoinSpacing: showAuthCoin });
const imageClasses = classNames('auth-org-logo', 'siwOrgLogo');
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

function renderAuthCoin() {
return (showAuthCoin && authCoinProps) && (
Expand All @@ -65,11 +65,11 @@ const AuthHeader: FunctionComponent<AuthHeaderProps> = ({
<Box
className={containerClasses}
sx={{
paddingBlockStart: Tokens.Spacing5,
paddingBlockEnd: showAuthCoin ? Tokens.Spacing1 : Tokens.Spacing5,
paddingInlineStart: Tokens.Spacing6,
paddingInlineEnd: Tokens.Spacing6,
borderBlockEnd: `1px solid ${Tokens.BorderColorDisplay}`,
paddingBlockStart: tokens.Spacing5,
paddingBlockEnd: showAuthCoin ? tokens.Spacing1 : tokens.Spacing5,
paddingInlineStart: tokens.Spacing6,
paddingInlineEnd: tokens.Spacing6,
borderBlockEnd: `1px solid ${tokens.BorderColorDisplay}`,
'& h1': {
lineHeight: 0,
marginBlock: 0,
Expand Down
26 changes: 13 additions & 13 deletions src/v3/src/components/AuthenticatorButton/AuthenticatorButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ const AuthenticatorButton: UISchemaElementComponent<{
usageDescription && `${iconName}-usageDescription`,
`${iconName}-ctaLabel`,
].filter(Boolean).join(' ');
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

const onClick: ClickHandler = async () => {
const dataSchema = dataSchemaRef.current!;
Expand Down Expand Up @@ -93,28 +93,28 @@ const AuthenticatorButton: UISchemaElementComponent<{
type={type}
sx={{
'&:focus': {
outlineColor: Tokens.PalettePrimaryMain,
outlineOffset: Tokens.FocusOutlineOffsetMain,
outlineStyle: Tokens.FocusOutlineStyle,
outlineWidth: Tokens.FocusOutlineWidthMain,
outlineColor: tokens.PalettePrimaryMain,
outlineOffset: tokens.FocusOutlineOffsetMain,
outlineStyle: tokens.FocusOutlineStyle,
outlineWidth: tokens.FocusOutlineWidthMain,
},
'&:hover': {
color: Tokens.PalettePrimaryDark,
color: tokens.PalettePrimaryDark,
cursor: 'pointer',
borderColor: Tokens.PalettePrimaryMain,
borderColor: tokens.PalettePrimaryMain,
},
width: 1,
// Assuming we want to allow users to customize this color, we should try to map this to
// a more semantic token. We also don't want users to override white just for this
backgroundColor: Tokens.HueNeutralWhite,
paddingBlock: Tokens.Spacing3,
paddingInline: Tokens.Spacing3,
backgroundColor: tokens.HueNeutralWhite,
paddingBlock: tokens.Spacing3,
paddingInline: tokens.Spacing3,
}}
display="flex"
border={1}
borderColor="grey.200"
borderRadius={Tokens.BorderRadiusMain}
boxShadow={Tokens.ShadowScale0}
borderRadius={tokens.BorderRadiusMain}
boxShadow={tokens.ShadowScale0}
className="authenticator-row"
data-se="authenticator-button"
tabIndex={0}
Expand Down Expand Up @@ -227,7 +227,7 @@ const AuthenticatorButton: UISchemaElementComponent<{
marginBlock: '5px',
marginInline: 0,
fontWeight: 500,
color: Tokens.PalettePrimaryMain,
color: tokens.PalettePrimaryMain,
'& svg': {
marginBlock: 0,
marginInline: '5px 0',
Expand Down
4 changes: 2 additions & 2 deletions src/v3/src/components/AuthenticatorButton/AuthenticatorButtonList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const AuthenticatorButtonList: UISchemaElementComponent<{
uischema: AuthenticatorButtonListElement
}> = ({ uischema }) => {
const { buttons, dataSe } = uischema.options;
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

return (
<Box
Expand All @@ -38,7 +38,7 @@ const AuthenticatorButtonList: UISchemaElementComponent<{
<Box
key={button.id}
component="li"
sx={{ marginBlockEnd: Tokens.Spacing5 }}
sx={{ marginBlockEnd: tokens.Spacing5 }}
>
<AuthenticatorButton
uischema={{
Expand Down
8 changes: 4 additions & 4 deletions src/v3/src/components/Checkbox/Checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationP
const descriptionInfo = getTranslationInfo(translations, 'description');
const focusRef = useAutoFocus<HTMLInputElement>(focus);
const hasErrors = typeof errors !== 'undefined';
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

return (
<FormControl
Expand Down Expand Up @@ -83,7 +83,7 @@ const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationP
'data-se-for-name': name,
}}
sx={{
marginInlineEnd: Tokens.Spacing3,
marginInlineEnd: tokens.Spacing3,
}}
/>
)}
Expand All @@ -101,8 +101,8 @@ const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationP
<Box
component="span"
sx={{
marginInlineStart: Tokens.Spacing2,
marginInlineEnd: Tokens.Spacing2,
marginInlineStart: tokens.Spacing2,
marginInlineEnd: tokens.Spacing2,
}}
className="no-translate"
aria-hidden
Expand Down
8 changes: 4 additions & 4 deletions src/v3/src/components/ConsentHeader/ConsentHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const ConsentHeader: FunctionComponent = () => {
granularConsentTitle,
{ replace: getHeadingReplacerFn({}, 'h2', 2, 6) },
);
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

const getAppLogo = (altText: string, logoHref?: string) => (
typeof logoHref !== 'undefined' && (
Expand Down Expand Up @@ -116,9 +116,9 @@ const ConsentHeader: FunctionComponent = () => {
>
<Typography
sx={{
marginBlockEnd: Tokens.Spacing5,
backgroundColor: Tokens.PalettePrimaryLighter,
color: Tokens.PalettePrimaryDarker,
marginBlockEnd: tokens.Spacing5,
backgroundColor: tokens.PalettePrimaryLighter,
color: tokens.PalettePrimaryDarker,
padding: '4px 2px',
}}
className="issuer no-translate"
Expand Down
6 changes: 3 additions & 3 deletions src/v3/src/components/Form/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,16 @@ const StyledAccordionSummary = styled((props: AccordionSummaryProps) => (
// eslint-disable-next-line react/jsx-props-no-spreading
<AccordionSummary {...props} />
))(() => {
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();
return ({
padding: 0,
width: 'fit-content',
'& .MuiAccordionSummary-content': {
margin: 0,
color: Tokens.PalettePrimaryMain,
color: tokens.PalettePrimaryMain,
'&:hover': {
textDecoration: 'underline',
textDecorationColor: Tokens.PalettePrimaryMain,
textDecorationColor: tokens.PalettePrimaryMain,
},
},
});
Expand Down
6 changes: 3 additions & 3 deletions src/v3/src/components/IdentifierContainer/IdentifierContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const IdentifierContainer: UISchemaElementComponent<{

const mainContainerClasses = classNames('identifier-container');
const identifierSpanClasses = classNames('identifier', 'no-translate');
const Tokens = useOdysseyDesignTokens();
const tokens = useOdysseyDesignTokens();

return (
<Box
Expand All @@ -43,7 +43,7 @@ const IdentifierContainer: UISchemaElementComponent<{
paddingY={2}
sx={{
borderRadius: '36px',
backgroundColor: Tokens.HueNeutral50,
backgroundColor: tokens.HueNeutral50,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
Expand All @@ -52,7 +52,7 @@ const IdentifierContainer: UISchemaElementComponent<{
<Box
component="span"
sx={{
color: Tokens.PalettePrimaryMain,
color: tokens.PalettePrimaryMain,
verticalAlign: 'middle',
}}
>
Expand Down
28 changes: 16 additions & 12 deletions src/v3/src/components/Images/AppIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,24 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

import { Theme } from '@mui/material';
import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
import { AppsIcon } from '@okta/odyssey-react-mui/icons';
import { FunctionComponent, h } from 'preact';

import { loc } from '../../util';

export const AppIcon: FunctionComponent = () => (
<AppsIcon
sx={(theme: Theme) => ({
color: theme.palette.primary.main,
width: '16px',
height: '16px',
})}
titleAccess={loc('icon.title.application', 'login')}
aria-hidden
/>
);
export const AppIcon: FunctionComponent = () => {
const tokens = useOdysseyDesignTokens();

return (
<AppsIcon
sx={{
color: tokens.PalettePrimaryMain,
width: '16px',
height: '16px',
}}
titleAccess={loc('icon.title.application', 'login')}
aria-hidden
/>
);
};
28 changes: 16 additions & 12 deletions src/v3/src/components/Images/DeviceIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,24 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

import { Theme } from '@mui/material';
import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
import { DevicesIcon } from '@okta/odyssey-react-mui/icons';
import { FunctionComponent, h } from 'preact';

import { loc } from '../../util';

export const DeviceIcon: FunctionComponent = () => (
<DevicesIcon
sx={(theme: Theme) => ({
color: theme.palette.primary.main,
width: '16px',
height: '16px',
})}
titleAccess={loc('icon.title.browser', 'login')}
aria-hidden
/>
);
export const DeviceIcon: FunctionComponent = () => {
const tokens = useOdysseyDesignTokens();

return (
<DevicesIcon
sx={{
color: tokens.PalettePrimaryMain,
width: '16px',
height: '16px',
}}
titleAccess={loc('icon.title.browser', 'login')}
aria-hidden
/>
);
};
28 changes: 16 additions & 12 deletions src/v3/src/components/Images/LocationIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,24 @@
* See the License for the specific language governing permissions and limitations under the License.
*/

import { Theme } from '@mui/material';
import { useOdysseyDesignTokens } from '@okta/odyssey-react-mui';
import { GlobeIcon } from '@okta/odyssey-react-mui/icons';
import { FunctionComponent, h } from 'preact';

import { loc } from '../../util';

export const LocationIcon: FunctionComponent = () => (
<GlobeIcon
sx={(theme: Theme) => ({
color: theme.palette.primary.main,
width: '16px',
height: '16px',
})}
titleAccess={loc('icon.title.location', 'login')}
aria-hidden
/>
);
export const LocationIcon: FunctionComponent = () => {
const tokens = useOdysseyDesignTokens();

return (
<GlobeIcon
sx={{
color: tokens.PalettePrimaryMain,
width: '16px',
height: '16px',
}}
titleAccess={loc('icon.title.location', 'login')}
aria-hidden
/>
);
};