Updated Palette Generation (#3481)

* Odyssey 1.x Palette Generation using Brand Colors
okta · Feb 13, 2024 · 6b9b746 · 6b9b746
1 parent 3343602
commit 6b9b746
Show file tree

Hide file tree

Showing 32 changed files with 937 additions and 458 deletions.
diff --git a/src/v3/package.json b/src/v3/package.json
@@ -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",
     "@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",

diff --git a/src/v3/screenshots/base/UI_demo/UI_demo_RTL_VRT.png b/src/v3/screenshots/base/UI_demo/UI_demo_RTL_VRT.png
diff --git a/src/v3/screenshots/base/UI_demo/UI_demo_VRT.png b/src/v3/screenshots/base/UI_demo/UI_demo_VRT.png
diff --git a/src/v3/src/components/AuthCoin/AuthCoin.tsx b/src/v3/src/components/AuthCoin/AuthCoin.tsx
@@ -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
@@ -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,
           }}
         />
       );

diff --git a/src/v3/src/components/AuthContainer/AuthContainer.tsx b/src/v3/src/components/AuthContainer/AuthContainer.tsx
@@ -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
@@ -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,
               },

diff --git a/src/v3/src/components/AuthHeader/AuthHeader.tsx b/src/v3/src/components/AuthHeader/AuthHeader.tsx
@@ -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) && (
@@ -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,

diff --git a/src/v3/src/components/AuthenticatorButton/AuthenticatorButton.tsx b/src/v3/src/components/AuthenticatorButton/AuthenticatorButton.tsx
@@ -67,7 +67,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!;
@@ -95,28 +95,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}
@@ -233,7 +233,7 @@ const AuthenticatorButton: UISchemaElementComponent<{
             marginBlock: '5px',
             marginInline: 0,
             fontWeight: 500,
-            color: Tokens.PalettePrimaryMain,
+            color: tokens.PalettePrimaryMain,
             '& svg': {
               marginBlock: 0,
               marginInline: '5px 0',

diff --git a/src/v3/src/components/AuthenticatorButton/AuthenticatorButtonList.tsx b/src/v3/src/components/AuthenticatorButton/AuthenticatorButtonList.tsx
@@ -25,7 +25,7 @@ const AuthenticatorButtonList: UISchemaElementComponent<{
   uischema: AuthenticatorButtonListElement
 }> = ({ uischema }) => {
   const { buttons, dataSe } = uischema.options;
-  const Tokens = useOdysseyDesignTokens();
+  const tokens = useOdysseyDesignTokens();
 
   return (
     <Box
@@ -38,7 +38,7 @@ const AuthenticatorButtonList: UISchemaElementComponent<{
           <Box
             key={button.id}
             component="li"
-            sx={{ marginBlockEnd: Tokens.Spacing5 }}
+            sx={{ marginBlockEnd: tokens.Spacing5 }}
           >
             <AuthenticatorButton
               uischema={{

diff --git a/src/v3/src/components/Checkbox/Checkbox.tsx b/src/v3/src/components/Checkbox/Checkbox.tsx
@@ -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
@@ -83,7 +83,7 @@ const Checkbox: UISchemaElementComponent<UISchemaElementComponentWithValidationP
               'data-se-for-name': name,
             }}
             sx={{
-              marginInlineEnd: Tokens.Spacing3,
+              marginInlineEnd: tokens.Spacing3,
             }}
           />
         )}
@@ -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

diff --git a/src/v3/src/components/ConsentHeader/ConsentHeader.tsx b/src/v3/src/components/ConsentHeader/ConsentHeader.tsx
@@ -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' && (
@@ -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"

diff --git a/src/v3/src/components/Form/Accordion.tsx b/src/v3/src/components/Form/Accordion.tsx
@@ -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,
       },
     },
   });

diff --git a/src/v3/src/components/IdentifierContainer/IdentifierContainer.tsx b/src/v3/src/components/IdentifierContainer/IdentifierContainer.tsx
@@ -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
@@ -43,7 +43,7 @@ const IdentifierContainer: UISchemaElementComponent<{
         paddingY={2}
         sx={{
           borderRadius: '36px',
-          backgroundColor: Tokens.HueNeutral50,
+          backgroundColor: tokens.HueNeutral50,
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
           overflow: 'hidden',
@@ -52,7 +52,7 @@ const IdentifierContainer: UISchemaElementComponent<{
         <Box
           component="span"
           sx={{
-            color: Tokens.PalettePrimaryMain,
+            color: tokens.PalettePrimaryMain,
             verticalAlign: 'middle',
           }}
         >

diff --git a/src/v3/src/components/Images/AppIcon.tsx b/src/v3/src/components/Images/AppIcon.tsx
@@ -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
+    />
+  );
+};
diff --git a/src/v3/src/components/Images/DeviceIcon.tsx b/src/v3/src/components/Images/DeviceIcon.tsx
@@ -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
+    />
+  );
+};
diff --git a/src/v3/src/components/Images/LocationIcon.tsx b/src/v3/src/components/Images/LocationIcon.tsx
@@ -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
+    />
+  );
+};