@learncard/react 2.12.10 → 3.0.0

package/src/assets/styles/theme.css

@@ -0,0 +1,94 @@
+/* Keep utilities unlayered to preserve the existing Ionic/Sass cascade. */
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' source(none);
+@import '../../../../learn-card-base/src/assets/styles/tailwind-v3-theme.css';
+@import '../../../../learn-card-base/src/assets/styles/tailwind-v3-colors.css'
+    theme(inline reference);
+@source "../../**/*.{js,jsx,ts,tsx}";
+@source inline("bg-orange-200");
+@source inline("bg-orange-300");
+@source inline("bg-orange-700");
+@source inline("border-orange-700");
+@source inline("text-orange-700");
+@source inline("text-orange-900");
+
+@theme inline reference {
+    --color-grayscale-50: #fbfbfc;
+    --color-grayscale-100: #eff0f5;
+    --color-grayscale-200: #e2e3e9;
+    --color-grayscale-300: #c5c8d3;
+    --color-grayscale-400: #a8acbd;
+    --color-grayscale-500: #8b91a7;
+    --color-grayscale-600: #6f7590;
+    --color-grayscale-700: #52597a;
+    --color-grayscale-800: #353e64;
+    --color-grayscale-900: #18224e;
+    --color-emerald-50: #d6faf0;
+    --color-emerald-100: #bfeee1;
+    --color-emerald-200: #9fe5d2;
+    --color-emerald-300: #80e0c6;
+    --color-emerald-400: #34eab9;
+    --color-emerald-500: #40cba6;
+    --color-emerald-600: #20c397;
+    --color-emerald-700: #00ba88;
+    --color-emerald-800: #008b66;
+    --color-emerald-900: #004633;
+    --color-cyan-50: #e7f9fd;
+    --color-cyan-100: #d0f3fc;
+    --color-cyan-200: #a0e7f8;
+    --color-cyan-300: #a0e7f8;
+    --color-cyan-400: #88e0f7;
+    --color-cyan-500: #71daf5;
+    --color-cyan-600: #59d4f4;
+    --color-cyan-700: #41cef2;
+    --color-cyan-800: #319bb5;
+    --color-cyan-900: #184d5b;
+    --color-spice-50: #ffede7;
+    --color-spice-100: #ffdbcf;
+    --color-spice-200: #ffb7a0;
+    --color-spice-300: #ff9470;
+    --color-spice-400: #ff7040;
+    --color-spice-500: #ff5820;
+    --color-spice-600: #ff4000;
+    --color-spice-700: #df3800;
+    --color-spice-800: #bf3000;
+    --color-spice-900: #802000;
+    --color-indigo-50: #eef2ff;
+    --color-indigo-100: #e0e7ff;
+    --color-indigo-200: #c7d2fe;
+    --color-indigo-300: #a5b4fc;
+    --color-indigo-400: #818cf8;
+    --color-indigo-500: #6366f1;
+    --color-indigo-600: #4f46e5;
+    --color-indigo-700: #4338ca;
+    --color-indigo-800: #3730a3;
+    --color-indigo-900: #312e81;
+    --color-blue-light: #026bff;
+    --color-green-dark: #05b65d;
+    --color-orange-500: #ef5d35;
+    --color-orange-800: #9a3412;
+    --color-red-mastercard: #eb001b;
+}
+
+@theme static {
+    --shadow-bottom: 0px 4px 0px rgba(0, 0, 0, 0.25);
+    --shadow-3xl: 0px 0px 8px rgba(0, 0, 0, 0.25);
+    --shadow-card-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+    --spacing-25pct: 25%;
+}
+
+/* Emit literal card font families, as V3 did. Host app tokens use the same
+   names and must not retroactively change utilities compiled by this package. */
+@theme inline {
+    --font-mouse: 'Mouse Memoirs';
+    --font-montserrat: Montserrat, Helvetica, Serif;
+    --font-poppins: Poppins;
+    --font-jacques: 'Jacques Francois';
+    --font-sacramento: Sacramento;
+}
+
+@custom-variant xxsm (@media (max-width: 240px));
+@custom-variant xxxsm (@media (max-width: 200px));
+@utility text-shadow {
+    text-shadow: 1px 2px 0px rgb(0 0 0 / 35%);
+}

package/src/assets/styles/theme.test.ts

@@ -0,0 +1,67 @@
+// @vitest-environment node
+import { describe, expect, it } from 'vitest';
+import { compile } from '@tailwindcss/node';
+import { resolve } from 'node:path';
+import { rollup } from 'rollup';
+import configs from '../../../rollup.config.js';
+
+describe('published stylesheet theme contract', () => {
+    it('keeps palette tokens out of the actual Rollup CSS assets', async () => {
+        const config = configs[1];
+        const bundle = await rollup(config);
+        try {
+            const { output } = await bundle.generate(config.output[0]);
+            const styles = output.filter(
+                asset => asset.type === 'asset' && asset.fileName.endsWith('.css')
+            );
+            expect(styles.map(asset => asset.fileName).sort()).toEqual(['base.css', 'main.css']);
+            for (const asset of styles) {
+                if (asset.type !== 'asset') continue;
+                const css =
+                    typeof asset.source === 'string'
+                        ? asset.source
+                        : Buffer.from(asset.source).toString('utf8');
+                expect(css).not.toMatch(/--color-[\w-]+\s*:/);
+                expect(css).not.toMatch(/--tw-border-style:\s*none/);
+                if (asset.fileName === 'main.css') {
+                    expect(css).toContain('#d6faf0');
+                    expect(css).toContain('#ef5d35');
+                }
+            }
+        } finally {
+            await bundle.close();
+        }
+    });
+
+    it('inlines the original palette and fonts without exporting host color tokens', async () => {
+        const compiler = await compile("@import './src/assets/styles/main.css';", {
+            base: resolve('.'),
+            onDependency: () => undefined,
+        });
+        const css = compiler.build([
+            'bg-emerald-50',
+            'text-orange-500',
+            'bg-rose-500',
+            'font-jacques',
+            'text-xs',
+        ]);
+        expect(css).toMatch(/\.bg-emerald-50\s*\{\s*background-color: #d6faf0;/);
+        expect(css).toMatch(/\.text-orange-500\s*\{\s*color: #ef5d35;/);
+        expect(css).toMatch(/\.bg-rose-500\s*\{\s*background-color: #f43f5e;/);
+        expect(css).toMatch(/font-family: ["']?Jacques Francois["']?;/);
+        expect(css).not.toMatch(/--color-[\w-]+\s*:/);
+        expect(css).toContain('--text-xs: 0.75rem');
+    });
+
+    it('keeps the optional reset independent of host palette tokens', async () => {
+        const compiler = await compile("@import './src/assets/styles/base.css';", {
+            base: resolve('.'),
+            onDependency: () => undefined,
+        });
+        const css = compiler.build([]);
+        expect(css).not.toMatch(/--color-[\w-]+\s*:/);
+        expect(css).toContain('border-color: #e5e7eb');
+        expect(css).toContain('color: #9ca3af');
+        expect(css).not.toMatch(/--tw-border-style:\s*none/);
+    });
+});

package/src/components/BoostGenericCard/BoostGenericCard.tsx

@@ -94,7 +94,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
             <button
                 type="button"
-                className="boost-generic-card-button z-10 flex flex-col flex-grow rounded-[20px]"
+                className="boost-generic-card-button z-10 flex flex-col grow rounded-[20px]"
                 onClick={handleInnerClick}
             >
                 {/* Thumbnail — filter on the wrapper so it desaturates a
@@ -127,7 +127,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
                 {/* Details Section: grows to fill available space */}
                 <section
-                    className={`flex flex-col flex-grow items-center justify-end pt-1 w-full ${
+                    className={`flex flex-col grow items-center justify-end pt-1 w-full ${
                         linkedCredentialsCount === 0 ? 'pb-[20px]' : ''
                     }`}
                 >
@@ -156,7 +156,7 @@ export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
 
                         {/* Verifier & Issuer */}
                         <div className="mt-1 w-full px-4 text-center">
-                            <span className="line-clamp-2 break-words text-[12px] leading-snug text-grayscale-700">
+                            <span className="line-clamp-2 wrap-break-word text-[12px] leading-snug text-grayscale-700">
                                 {verifierBadge && (
                                     <span className="mr-1 inline-block align-middle">
                                         {verifierBadge}

package/src/components/BoostSmallCard/BoostSmallCard.tsx

@@ -52,7 +52,7 @@ export const BoostSmallCard: React.FC<BoostSmallCardProps> = ({
         return (
             <div
                 key={issueItem?.id}
-                className="profile-thumb-img border-[1px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
+                className="profile-thumb-img border border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
             >
                 <UserProfilePicture
                     customContainerClass={`h-full w-full object-cover ${

package/src/components/Button/Button.tsx

@@ -11,7 +11,7 @@ export const Button: React.FC<ButtonProps> = ({ text, onClick, className = '' })
         <button
             type="button"
             onClick={onClick}
-            className={`p-4 border rounded text-gray-700 ${className}`}
+            className={`p-4 border rounded-sm text-gray-700 ${className}`}
         >
             {text}
         </button>

package/src/components/CertificateDisplayCard/CertificateBackFace.tsx

@@ -85,9 +85,7 @@ export const CertificateBackFace: React.FC<CertificateBackFaceProps> = ({
             <TruncateTextBox headerText="About" text={description}>
                 <span
                     className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
-                        description
-                            ? 'pt-[10px] border-t-[1px] border-solid border-grayscale-200'
-                            : ''
+                        description ? 'pt-[10px] border-t border-solid border-grayscale-200' : ''
                     }`}
                 >
                     Awarded on {createdAt}

package/src/components/CertificateDisplayCard/CertificateCornerIcon.tsx

@@ -27,7 +27,7 @@ const CertificateCornerIcon: React.FC<CertificateCornerIconProps> = ({
             break;
         case 'bottom-left':
             iconPositionClassName = 'bottom-0 left-0';
-            cornerPositionClassName = 'top-0 right-0 rotate-[270deg]';
+            cornerPositionClassName = 'top-0 right-0 rotate-270';
             break;
         case 'bottom-right':
             iconPositionClassName = 'bottom-0 right-0';

package/src/components/CertificateDisplayCard/CertificateFrontFace.tsx

@@ -166,14 +166,14 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
             </div>
 
             <div
-                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[55px] pb-[20px] border-solid border-[4px] ${borderColor} rounded-[30px]`}
+                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[55px] pb-[20px] border-solid border-4 ${borderColor} rounded-[30px]`}
             >
                 <div className="flex flex-col gap-[5px] items-center">
                     <h1 className="text-grayscale-900 text-center text-[20px] font-jacques">
                         {title}
                     </h1>
                     <div
-                        className={`${textLightColor} uppercase text-[14px] font-notoSans font-[600]`}
+                        className={`${textLightColor} uppercase text-[14px] font-notoSans font-semibold`}
                     >
                         {formattedDisplayType}
                     </div>
@@ -263,14 +263,14 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
                         Certified by
                     </span>
                     {issuerDisplay.isDidValue ? (
-                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide">
-                            <span className="font-[600]">
+                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide">
+                            <span className="font-semibold">
                                 {issuerDisplay.isDidValue ? 'Digital ID: ' : ''}
                             </span>
                             <span className="text-grayscale-600">{issuerName}</span>
                         </span>
                     ) : (
-                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide">
+                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide">
                             {issuerName}
                         </span>
                     )}
@@ -282,7 +282,9 @@ export const CertificateFrontFace: React.FC<CertificateFrontFaceProps> = ({
                     />
                 </div>
                 {customBodyContentSlot && customBodyContentSlot}
-                <div className={`${textLightColor} uppercase text-[14px] font-notoSans font-[600]`}>
+                <div
+                    className={`${textLightColor} uppercase text-[14px] font-notoSans font-semibold`}
+                >
                     {categoryTitle}
                 </div>
             </div>

package/src/components/CertificateDisplayCard/CertificateProfileImageDisplay.tsx

@@ -24,7 +24,7 @@ const CertificateProfileImageDisplay: React.FC<CertificateProfileImageDisplayPro
     avatarFallbackVariant = 'initial',
 }) => {
     const imageClassName =
-        'h-[50px] w-[50px] rounded-full overflow-hidden border-[2px] border-solid border-grayscale-200';
+        'h-[50px] w-[50px] rounded-full overflow-hidden border-2 border-solid border-grayscale-200';
     const fingerprintClassName = isIssuer ? 'h-[38px] w-[38px]' : 'h-[36px] w-[36px]';
     const silhouetteClassName = 'h-[38px] w-[38px]';
 

package/src/components/CertificateDisplayCard/MediaAttachmentsBox.tsx

@@ -221,7 +221,7 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="flex bg-grayscale-100 items-center rounded-[15px] w-full"
                                 >
                                     <button
-                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden shrink-0"
                                         onClick={e => {
                                             e.stopPropagation();
                                             handleMediaAttachmentClick(media.url, media.type);

package/src/components/CertificateDisplayCard/VerificationRow.tsx

@@ -39,7 +39,7 @@ const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
     const infoText = ''; // if we want certain verifications to have extra explanation, we can set this variable
 
     return (
-        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
+        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
             <span
                 className="font-[700] text-[11px] uppercase flex items-center gap-[3px] select-none"
                 style={{ color: statusColor }}

package/src/components/JobHistoryCard/JobHistoryCard.tsx

@@ -21,11 +21,11 @@ export const JobHistoryCard: React.FC<JobHistoryCardProps> = ({
             className={`job-history-card flex h-[88px] max-w-[335px] justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] rounded-[20px] ${className}`}
         >
             {dateRange && (
-                <div className="flex flex-shrink-0 rounded-[20px]  bg-emerald-600 pl-[15px] font-bold text-grayscale-50 job-card-date-display w-[108px] h-full items-center">
+                <div className="flex shrink-0 rounded-[20px]  bg-emerald-600 pl-[15px] font-bold text-grayscale-50 job-card-date-display w-[108px] h-full items-center">
                     <p className="line-clamp-2">{dateRange}</p>
                 </div>
             )}
-            <div className="flex flex-grow flex-col job-history-details-display pl-[12px]">
+            <div className="flex grow flex-col job-history-details-display pl-[12px]">
                 <p className="text-grayscale-900 font-bold line-clamp-1">{title}</p>
                 <p className="text-grayscale-600 text-sm line-clamp-1">{company}</p>
                 <p className="text-sm text-indigo-700 uppercase font-bold line-clamp-1">

package/src/components/JobListCard/JobListCard.tsx

@@ -112,15 +112,12 @@ export const JobListCard: React.FC<JobListCardProps> = ({
                     {topText}
                 </div>
             </div>
-            <p className="text-grayscale-500 text-xs line-clamp-1 flex-shrink-0">
-                {' '}
-                {postDateDisplay}
-            </p>
+            <p className="text-grayscale-500 text-xs line-clamp-1 shrink-0"> {postDateDisplay}</p>
 
             <div className="job-listing-center flex mt-[5px]">
                 {imgThumb && (
                     <img
-                        className="object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]"
+                        className="object-cover w-[80px] shrink-0 items-center justify-center rounded-[15px] mr-[10px]"
                         src={imgThumb}
                     />
                 )}

package/src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx

@@ -86,7 +86,7 @@ export const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFacePr
                         </div>
                     </div>
                     <div>
-                        <div className="h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]" />
+                        <div className="h-[33px] w-[55px] rounded-[60px] bg-linear-to-r/srgb from-[#F4F5F5] to-[#E3E5E8]" />
                     </div>
                 </div>
 

package/src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx

@@ -43,7 +43,7 @@ export const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFace
                 <div className="absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble" />
                 {showActionButton && (
                     <button
-                        className="absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white"
+                        className="absolute top-2 right-4 bg-grayscale-500 border-2 rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white"
                         onClick={onClick}
                         data-testid="credit-card-frontface-button"
                     >

package/src/components/MeritBadgeDisplayCard/MediaAttachmentsBox.tsx

@@ -221,7 +221,7 @@ const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
                                     className="flex media-attachment-box bg-grayscale-100 items-center rounded-[15px] w-full"
                                 >
                                     <button
-                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden shrink-0"
                                         onClick={e => {
                                             e.stopPropagation();
                                             handleMediaAttachmentClick(media.url, media.type);

package/src/components/MeritBadgeDisplayCard/MeritBadgeBackFace.tsx

@@ -85,9 +85,7 @@ export const MeritBadgeBackFace: React.FC<MeritBadgeBackFaceProps> = ({
             <TruncateTextBox headerText="About" text={description}>
                 <span
                     className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
-                        description
-                            ? 'pt-[10px] border-t-[1px] border-solid border-grayscale-200'
-                            : ''
+                        description ? 'pt-[10px] border-t border-solid border-grayscale-200' : ''
                     }`}
                 >
                     Awarded on {createdAt}

package/src/components/MeritBadgeDisplayCard/MeritBadgeCornerIcon.tsx

@@ -16,20 +16,20 @@ const MeritBadgeCornerIcon: React.FC<MeritBadgeCornerIconProps> = ({ categoryTyp
     switch (position) {
         case 'top-left':
             iconPositionClassName = 'top-[3px] left-[3px] pb-[10px] pr-[10px] pl-[4px] pt-[4px]';
-            cornerPositionClassName = 'bottom-[-1px] right-0';
+            cornerPositionClassName = '-bottom-px right-0';
             break;
         case 'top-right':
             iconPositionClassName = 'top-[3px] right-[3px] pl-[10px] pb-[10px] pr-[4px] pt-[4px]';
-            cornerPositionClassName = 'bottom-[-1px] left-0 rotate-90';
+            cornerPositionClassName = '-bottom-px left-0 rotate-90';
             break;
         case 'bottom-left':
             iconPositionClassName = 'bottom-[3px] left-[3px] pr-[10px] pt-[10px] pl-[4px] pb-[4px]';
-            cornerPositionClassName = 'top-0 right-0 rotate-[270deg]';
+            cornerPositionClassName = 'top-0 right-0 rotate-270';
             break;
         case 'bottom-right':
             iconPositionClassName =
                 'bottom-[3px] right-[3px] pl-[10px] pt-[10px] pr-[4px] pb-[4px]';
-            cornerPositionClassName = 'top-[-1px] left-0 rotate-180';
+            cornerPositionClassName = '-top-px left-0 rotate-180';
             break;
     }
 

package/src/components/MeritBadgeDisplayCard/MeritBadgeFrontFace.tsx

@@ -155,7 +155,7 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
             </div>
 
             <div
-                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-[4px] ${borderColor} rounded-[30px]`}
+                className={`flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-4 ${borderColor} rounded-[30px]`}
             >
                 <div className="flex flex-col gap-[5px] w-full">
                     <div className="flex flex-col items-center text-grayscale-900">
@@ -204,7 +204,7 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
                 )}
                 <div className="flex flex-col w-full">
                     <div className="text-[14px] text-grayscale-900 flex flex-col items-center w-full mb-[10px]">
-                        <span className="font-jacques flex gap-[5px] items-center w-full overflow-ellipsis whitespace-nowrap overflow-hidden justify-center">
+                        <span className="font-jacques flex gap-[5px] items-center w-full text-ellipsis whitespace-nowrap overflow-hidden justify-center">
                             {issueeName === '0 person' ? (
                                 'Not yet awarded'
                             ) : (
@@ -231,9 +231,9 @@ export const MeritBadgeFrontFace: React.FC<MeritBadgeFrontFaceProps> = ({
                     </div> */}
 
                     <div className="flex flex-col gap-[5px] items-center w-full">
-                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide">
+                        <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide">
                             {issuerDisplay.isDidValue ? (
-                                <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] w-full text-center line-clamp-2 break-words">
+                                <span className="mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] w-full text-center line-clamp-2 wrap-break-word">
                                     <span className="font-[600]">Digital ID:</span>
                                     <span className="text-grayscale-600">{issuerName}</span>
                                 </span>

package/src/components/MeritBadgeDisplayCard/MeritBadgeProfileImageDisplay.tsx

@@ -27,7 +27,7 @@ const MeritBadgeProfileImageDisplay: React.FC<MeritBadgeProfileImageDisplayProps
 }) => {
     const imageClassName = `${
         size === 'big' ? 'h-[60px] w-[60px]' : 'h-[39px] w-[39px]'
-    } rounded-full overflow-hidden border-[2px] border-solid border-grayscale-200`;
+    } rounded-full overflow-hidden border-2 border-solid border-grayscale-200`;
     const silhouetteClassName = size === 'big' ? 'h-[43px] w-[43px]' : 'h-[28px] w-[28px]';
 
     const profileImage = imageComponent ? (

package/src/components/MeritBadgeDisplayCard/VerificationRow.tsx

@@ -39,7 +39,7 @@ const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
     const infoText = ''; // if we want certain verifications to have extra explanation, we can set this variable
 
     return (
-        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
+        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
             <span
                 className="font-[700] text-[11px] uppercase flex items-center gap-[3px] select-none"
                 style={{ color: statusColor }}

package/src/components/MiniVCThumbnail/MiniVCThumbnail.tsx

@@ -57,7 +57,7 @@ export const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({
                         className="flex item-center justify-center w-full -mt-3"
                         data-testid="mini-vc-thumbnail-badge"
                     >
-                        <div className="max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10">
+                        <div className="max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border border-black bg-white z-10">
                             <img
                                 className="h-full w-full object-cover"
                                 src={badgeImage}

package/src/components/NotificationBoostCard/NotificationBoostCard.tsx

@@ -98,7 +98,7 @@ export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
 
                     {showIssuerInfo && (
                         <div className="notification-card-issuer-info flex items-center mt-[10px]">
-                            <div className="profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]">
+                            <div className="profile-thumb-img border-2 border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]">
                                 <UserProfilePicture
                                     customContainerClass={`h-full w-full object-cover text-xl ${
                                         !issuerInfo?.image ? 'pt-[3px]' : ''
@@ -128,7 +128,7 @@ export const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({
 
                         <button
                             onClick={handleCancelClick}
-                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-0 tracking-wide ${viewButtonStyles}`}
                             role="button"
                             name="notification-view-button"
                         >

package/src/components/NotificationUserAcceptedBoostCard/NotificationUserAcceptedBoostCard.tsx

@@ -71,7 +71,7 @@ export const NotificationUserAcceptedBoostCard: React.FC<
                     <div className="flex items-center justify-end w-full mt-3">
                         <button
                             onClick={handleCancelClick}
-                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-0 tracking-wide ${viewButtonStyles}`}
                             role="button"
                             name="notification-view-button"
                         >

package/src/components/NotificationUserCard/NotificationUserCard.tsx

@@ -96,7 +96,7 @@ export const NotificationUserCard: React.FC<NotificationUserCardProps> = ({
 
                         <button
                             onClick={handleCancelClick}
-                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-0 tracking-wide ${viewButtonStyles}`}
                             role="button"
                             name="notification-view-button"
                         >

package/src/components/RoundedPill/RoundedPill.tsx

@@ -87,7 +87,7 @@ export const RoundedPill: React.FC<RoundedPillProps> = ({
 }) => {
     const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;
     const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;
-    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;
+    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute shrink-0 `;
 
     const handleClick = () => {
         onClick?.();
@@ -108,7 +108,7 @@ export const RoundedPill: React.FC<RoundedPillProps> = ({
             {!locked && (
                 <div className={circleClass}>
                     <img
-                        className="h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 "
+                        className="h-full w-full object-cover max-h-[24px] max-w-[24px] shrink-0 "
                         src={iconSrc ?? ''}
                         alt="Icon image"
                     />

package/src/components/SchoolIdCard/SchoolIDCard.tsx

@@ -29,7 +29,7 @@ export const SchoolIDCard: React.FC<SchoolIDCardProps> = ({
     if (userImage && userImage?.trim() !== '') {
         issueeImageEl = (
             <div
-                className="h-[80px] w-[80px] rounded-full overflow-hidden bg-no-repeat bg-cover bg-center border-solid border-[2px] border-white mr-2"
+                className="h-[80px] w-[80px] rounded-full overflow-hidden bg-no-repeat bg-cover bg-center border-solid border-2 border-white mr-2"
                 style={{ backgroundImage: `url(${userImage})` }}
             />
         );

package/src/components/VCDisplayBackFace/VCDisplayBackFace.tsx

@@ -42,7 +42,7 @@ export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
                 <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
                     Issuer
                 </h6>
-                <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+                <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block text-ellipsis break-all">
                     {issuerName}
                 </p>
             </div>
@@ -59,10 +59,10 @@ export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
 
     return (
         <div
-            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
+            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-full max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
         >
             <section className="flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"></section>
-            <section className="flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative">
+            <section className="flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-full relative">
                 <section className="flex flex-row items-start justify-start w-full line-clamp-2">
                     <h3
                         className="text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700"
@@ -91,7 +91,7 @@ export const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({
                     </span>
                 </button>
 
-                <section className="flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]">
+                <section className="flex-col items-center justify-center checklist-container justify-center w-full width-full mt-[20px]">
                     <VCVerificationCheckWithText loading={loading} />
                     <section>
                         {verification.map(item => (

package/src/components/VCDisplayCard/VCDisplayCard.stories.tsx

@@ -47,7 +47,7 @@ const DetailsOverrideTest = (
             <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
                 Issuer
             </h6>
-            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block text-ellipsis break-all">
                 override details issuer override details issuer override details issuer override
                 details issuer override details issuer override details issuer
             </p>
@@ -57,7 +57,7 @@ const DetailsOverrideTest = (
             <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
                 other field
             </h6>
-            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block text-ellipsis break-all">
                 override details
             </p>
         </div>

package/src/components/VCDisplayCard2/IssueHistoryBox.tsx

@@ -15,7 +15,7 @@ const IssueHistoryBox: React.FC<SkillsBoxProps> = ({
     let renderIssueHistory = issueHistory?.map(issueItem => {
         return (
             <div
-                className="flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full"
+                className="flex items-center issue-log-item border-b last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full"
                 key={issueItem?.id}
             >
                 <div className="profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden">