feat: auth0 ul theme tokens, tailwind-merge utility addition (#19)

amberkamboj77 · HVish · web-flow · commit dd77c4c5eb26 · 2025-07-08T15:54:50.000+05:30
* feat: auth0 ul theme tokens, tailwind-merge utility addition

* fix: addition of legacy variables

* fix: themeEngine utility documentation update

Co-authored-by: Vishnu Singh &lt;vishnusingh1729@gmail.com&gt;

---------

Co-authored-by: Vishnu Singh &lt;vishnusingh1729@gmail.com&gt;
diff --git a/.github/config/deploy_config.yml b/.github/config/deploy_config.yml
@@ -4,7 +4,7 @@
 # when the workflow is run without specific overriding inputs.
 
 default_screen_deployment_status:
-  "login-id": false
+  "login-id": true
 
   # All other valid screens (commented out by default):
   # "email-identifier-challenge": true
diff --git a/src/assets/icons/EyeIcon.tsx b/src/assets/icons/EyeIcon.tsx
@@ -13,7 +13,7 @@ export const EyeIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M19 10.5C16.6667 6.16667 13.6667 4 10 4C6.33333 4 3.33333 6.16667 1 10.5C3.33333 14.8333 6.33333 17 10 17C13.6667 17 16.6667 14.8333 19 10.5ZM17.8564 10.5C15.7316 14.2118 13.1305 16 10 16C6.86955 16 4.2684 14.2118 2.14364 10.5C4.2684 6.78816 6.86955 5 10 5C13.1305 5 15.7316 6.78816 17.8564 10.5ZM10 13C11.3807 13 12.5 11.8807 12.5 10.5C12.5 9.11929 11.3807 8 10 8C8.61929 8 7.5 9.11929 7.5 10.5C7.5 11.8807 8.61929 13 10 13ZM6.5 10.5C6.5 12.433 8.067 14 10 14C11.933 14 13.5 12.433 13.5 10.5C13.5 8.567 11.933 7 10 7C8.067 7 6.5 8.567 6.5 10.5Z"
-      fill="#686868"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/src/assets/icons/EyeSlashIcon.tsx b/src/assets/icons/EyeSlashIcon.tsx
@@ -15,7 +15,7 @@ export const EyeSlashIcon: React.FC<React.SVGProps<SVGSVGElement>> = (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M3.31263 17.3903L16.8903 3.81263C17.0479 3.6163 17.0357 3.32859 16.8536 3.14645C16.6583 2.95118 16.3417 2.95118 16.1464 3.14645L14.1906 5.10226C12.9068 4.36742 11.5099 4 10 4C6.33333 4 3.33333 6.16667 1 10.5C2.00694 12.37 3.13804 13.8366 4.3933 14.8996L2.64645 16.6464C2.45118 16.8417 2.45118 17.1583 2.64645 17.3536C2.82859 17.5357 3.1163 17.5479 3.31263 17.3903ZM6.81988 15.2972C7.81285 15.7679 8.87207 16 10 16C13.1305 16 15.7316 14.2118 17.8564 10.5C17.0188 9.03678 16.1072 7.87249 15.1183 6.99884L15.8259 6.29124C16.994 7.33651 18.052 8.73943 19 10.5C16.6667 14.8333 13.6667 17 10 17C8.59318 17 7.2845 16.681 6.07396 16.0431L6.81988 15.2972ZM13.1482 8.96889C13.3736 9.43138 13.5 9.95092 13.5 10.5C13.5 12.433 11.933 14 10 14C9.45092 14 8.93138 13.8736 8.46889 13.6482L9.236 12.8811C9.47682 12.9583 9.73354 13 10 13C11.3807 13 12.5 11.8807 12.5 10.5C12.5 10.2335 12.4583 9.97682 12.3811 9.736L13.1482 8.96889ZM13.4536 5.8393C12.3822 5.27701 11.2321 5 10 5C6.86955 5 4.2684 6.78816 2.14364 10.5C3.04321 12.0715 4.02817 13.2982 5.10254 14.1904L6.99591 12.297C6.68102 11.7717 6.5 11.157 6.5 10.5C6.5 8.567 8.067 7 10 7C10.657 7 11.2717 7.18102 11.797 7.49591L13.4536 5.8393ZM10 8C10.3783 8 10.737 8.08403 11.0584 8.23446L7.73446 11.5584C7.58403 11.237 7.5 10.8783 7.5 10.5C7.5 9.11929 8.61929 8 10 8Z"
-      fill="#686868"
+      fill="currentColor"
     />
   </svg>
 );
diff --git a/src/common/Alert/index.tsx b/src/common/Alert/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Icon from "@/common/Icon";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface ErrorMessage {
   message: string;
diff --git a/src/common/Button/index.tsx b/src/common/Button/index.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 import type { IconProps } from "@/common/Icon";
 
 export interface ButtonProps
diff --git a/src/common/CaptchaBox/index.tsx b/src/common/CaptchaBox/index.tsx
@@ -1,7 +1,7 @@
 import FormField from "@/common/FormField";
 import type { InputProps } from "@/common/Input";
 import type { LabelProps } from "@/common/Label";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface CaptchaBoxProps {
   label: string;
diff --git a/src/common/Card/index.tsx b/src/common/Card/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
diff --git a/src/common/FormField/index.tsx b/src/common/FormField/index.tsx
@@ -5,7 +5,7 @@ import Input from "@/common/Input";
 import type { InputProps } from "@/common/Input";
 import Icon from "@/common/Icon";
 import { ExclamationCircleIcon } from "@/assets/icons";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface FormFieldProps {
   labelProps: LabelProps;
diff --git a/src/common/Input/index.tsx b/src/common/Input/index.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
diff --git a/src/common/Label/index.tsx b/src/common/Label/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface LabelProps
   extends React.LabelHTMLAttributes<HTMLLabelElement> {
diff --git a/src/common/Logo/index.tsx b/src/common/Logo/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 interface LogoProps {
   imageUrl?: string;
diff --git a/src/common/PasswordInput/index.tsx b/src/common/PasswordInput/index.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, useId, useState, useCallback } from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 import Button from "@/common/Button";
 import { EyeIcon, EyeSlashIcon } from "@/assets/icons";
 import Icon from "@/common/Icon";
diff --git a/src/common/Separator/index.tsx b/src/common/Separator/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface SeparatorProps {
   text?: string; // Optional text to display in the middle of the separator
diff --git a/src/common/SocialProviderButton/index.tsx b/src/common/SocialProviderButton/index.tsx
@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 interface SocialProviderButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
diff --git a/src/common/Tooltip/index.tsx b/src/common/Tooltip/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { cn } from "@/utils/helpers/cn";
+import { cn } from "@/lib/utils";
 
 export interface TooltipProps {
   children: React.ReactElement;
diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,99 @@
 @import "tailwindcss";
 
 @theme {
+  /* Auth0 Theme */
+
+  /* Colors */
+  --color-primary-button: var(
+    --ul-theme-color-primary-button
+  ); /* custom token */
+  --color-primary-button-label: var(--ul-theme-color-primary-button-label);
+  --color-secondary-button-border: var(
+    --ul-theme-color-secondary-button-border
+  );
+  --color-secondary-button-label: var(--ul-theme-color-secondary-button-label);
+  --color-base-focus: var(--ul-theme-color-base-focus-color);
+  --color-base-hover: var(--ul-theme-color-base-hover-color);
+  --color-link-focus: var(--ul-theme-color-links-focused-components);
+  --color-header: var(--ul-theme-color-header);
+  --color-body-text: var(--ul-theme-color-body-text);
+  --color-widget-bg: var(--ul-theme-color-widget-background);
+  --color-widget-border: var(--ul-theme-color-widget-border);
+  --color-input-labels: var(--ul-theme-color-input-labels-placeholders);
+  --color-input-text: var(--ul-theme-color-input-filled-text);
+  --color-input-border: var(--ul-theme-color-input-border);
+  --color-input-bg: var(--ul-theme-color-input-background);
+  --color-icons: var(--ul-theme-color-icons);
+  --color-error: var(--ul-theme-color-error);
+  --color-success: var(--ul-theme-color-success);
+  --color-warning: var(--ul-theme-color-warning);
+  --color-info: var(--ul-theme-color-primary-button);
+  --captcha-widget-theme: var(--ul-theme-color-captcha-widget-theme);
+
+  /* Borders */
+  --radius-button: var(--ul-theme-border-button-border-radius);
+  --radius-input: var(--ul-theme-border-input-border-radius);
+  --radius-widget: var(--ul-theme-border-widget-corner-radius);
+  --shadow-widget: var(--ul-theme-border-show-widget-shadow);
+  --border-button: var(--ul-theme-border-button-border-weight);
+  --border-input: var(--ul-theme-border-input-border-weight);
+  --border-widget: var(--ul-theme-border-widget-border-weight);
+
+  /* Font Sizes */
+  --text-title: var(--ul-theme-font-title-size);
+  --text-subtitle: var(--ul-theme-font-subtitle-size);
+  --text-body: var(--ul-theme-font-body-text-size);
+  --text-button: var(--ul-theme-font-buttons-text-size);
+  --text-input-label: var(--ul-theme-font-input-labels-size);
+  --text-link: var(--ul-theme-font-links-size);
+
+  /* Font Weights */
+  --font-weight-title: var(--ul-theme-font-title-weight);
+  --font-weight-subtitle: var(--ul-theme-font-subtitle-weight);
+  --font-weight-body: var(--ul-theme-font-body-text-weight);
+  --font-weight-button: var(--ul-theme-font-buttons-text-weight);
+  --font-weight-input-label: var(--ul-theme-font-input-labels-weight);
+  --font-weight-link: var(--ul-theme-font-links-weight);
+
+  /* Text Decoration */
+  --text-decoration-link: var(--ul-theme-font-links-style);
+
+  /* Page */
+  --justify-page-layout: var(--ul-theme-page-bg-page-layout);
+
+  /* Widget */
+  --height-widget-logo: var(--ul-theme-widget-logo-height);
+  --justify-widget-logo: var(--ul-theme-widget-logo-position);
+  --text-align-header: var(--ul-theme-widget-header-text-alignment);
+  --social-buttons-layout: var(--ul-theme-widget-social-buttons-layout);
+
+  /* Layout */
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-8: 2rem;
+  --size-10: 2.5rem;
+  --size-20: 5rem;
+  --max-w-sm: 24rem;
+  --max-w-md: 28rem;
+
+  /* Legacy variables for backward compatibility
+   To be removed as ui components are upgraded to use new tokens */
+  --color-primary: var(--ul-theme-color-primary-button);
+  --color-link: var(--ul-theme-color-links-focused-components);
+  --color-error: var(--ul-theme-color-error);
+  --color-success: var(--ul-theme-color-success);
+  --color-warning: #ffdb5f;
+  --color-text-default: var(--ul-theme-color-body-text);
+  --color-text-secondary: var(--ul-theme-color-input-labels-placeholders);
+  --color-background-page: var(--ul-theme-page-bg-background-color);
+  --color-background-widget: var(--ul-theme-color-widget-background);
+  --color-gray-mid: var(--ul-theme-color-widget-border);
+  --color-gray-darkest: #2d333a;
+  --height-13: 3.25rem;
+}
+
+:root {
   /* Colors */
   --ul-theme-color-primary-button: #635dff;
   --ul-theme-color-primary-button-label: #ffffff;
@@ -20,6 +113,7 @@
   --ul-theme-color-icons: #65676e;
   --ul-theme-color-error: #d03c38;
   --ul-theme-color-success: #13a688;
+  --ul-theme-color-warning: #ffdb5f;
   --ul-theme-color-captcha-widget-theme: dark;
 
   /* Borders */
@@ -52,6 +146,7 @@
   /* Page Background */
   --ul-theme-page-bg-page-layout: center;
   --ul-theme-page-bg-background-color: #bababa;
+  --ul-theme-page-bg-background-image-url: none;
 
   /* Widget */
   --ul-theme-widget-logo-position: center;
@@ -60,22 +155,6 @@
   --ul-theme-widget-header-text-alignment: center;
   --ul-theme-widget-social-buttons-layout: bottom;
 
-  /* Legacy variables for backward compatibility */
-  --color-primary: var(--ul-theme-color-primary-button);
-  --color-link: var(--ul-theme-color-links-focused-components);
-  --color-error: var(--ul-theme-color-error);
-  --color-success: var(--ul-theme-color-success);
-  --color-warning: #ffdb5f;
-  --color-text-default: var(--ul-theme-color-body-text);
-  --color-text-secondary: var(--ul-theme-color-input-labels-placeholders);
-  --color-background-page: var(--ul-theme-page-bg-background-color);
-  --color-background-widget: var(--ul-theme-color-widget-background);
-  --color-gray-mid: var(--ul-theme-color-widget-border);
-  --color-gray-darkest: #2d333a;
-  --height-13: 3.25rem;
-}
-
-:root {
   /* Global base styles not directly tied to Tailwind utility names */
   font-family:
     ui-sans-serif,
@@ -100,6 +179,10 @@
 body {
   margin: 0;
   background-color: var(--ul-theme-page-bg-background-color);
+  background-image: var(--ul-theme-page-bg-background-image-url);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   color: var(--ul-theme-color-body-text);
   min-height: 100vh;
 }
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/utils/helpers/cn.ts b/src/utils/helpers/cn.ts
diff --git a/src/utils/theme/themeEngine.ts b/src/utils/theme/themeEngine.ts
diff --git a/src/utils/theme/themeFlatteners.ts b/src/utils/theme/themeFlatteners.ts
diff --git a/tailwind.config.js b/tailwind.config.js
diff --git a/tsconfig.app.json b/tsconfig.app.json
diff --git a/tsconfig.json b/tsconfig.json
diff --git a/tsconfig.node.json b/tsconfig.node.json
