From f47fff055c18e6351f1af8164695b3160d7fc22c Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Wed, 4 Dec 2024 16:57:44 +0100
Subject: [PATCH] refactor(tooling): remove debris from `tailwind.configs`
 (#4168)

* feat: remove old preset from core

* feat: update missing classes and remove debris

* fix format

* fix explorer format

* fix wallet format

* fix explorer build

* fix format

* fix format
---
 apps/core/tailwind.config.ts                  | 247 +-----------------
 .../explorer/src/components/footer/Footer.tsx |   2 +-
 .../components/gas-breakdown/GasBreakdown.tsx |   2 +-
 .../src/components/layout/CookieConsent.css   |  18 +-
 .../components/module/PkgModulesWrapper.tsx   |   2 +-
 .../LinkGroup.tsx                             |   4 +-
 .../components/network/NetworkSelector.tsx    |   6 +-
 .../components/object/ObjectFieldsCard.tsx    |   2 +-
 .../src/components/owned-coins/OwnedCoins.tsx |   2 +-
 .../owned-objects/ThumbnailsView.tsx          |   2 +-
 .../explorer/src/components/search/Search.tsx |   2 +-
 .../transactions/TxForID.module.css           |   2 +-
 apps/explorer/src/components/ui/Link.tsx      |  10 +-
 .../src/components/ui/VerticalList.tsx        |   6 +-
 .../src/components/ui/modal/Modal.tsx         |   4 +-
 apps/explorer/src/index.css                   |  13 -
 .../object-result/views/ObjectView.module.css |   8 +-
 .../transaction-result/TransactionData.tsx    |   2 +-
 .../TransactionResult.module.css              |  27 +-
 .../transaction-result/TransactionView.tsx    |  47 ++--
 apps/explorer/tailwind.config.ts              |  72 +----
 .../ui/app/components/PasswordInputDialog.tsx |   2 +-
 .../accounts/EditableAccountName.tsx          |   2 +-
 .../transaction-request/DescriptionList.tsx   |   4 +-
 .../ui/app/pages/home/kiosk-details/index.tsx |   2 +-
 apps/wallet/tailwind.config.ts                |   3 +-
 26 files changed, 81 insertions(+), 412 deletions(-)

diff --git a/apps/core/tailwind.config.ts b/apps/core/tailwind.config.ts
index 9f57a324fad..6add2c1e8b4 100644
--- a/apps/core/tailwind.config.ts
+++ b/apps/core/tailwind.config.ts
@@ -4,250 +4,19 @@
 
 import { type Config } from 'tailwindcss';
 import colors from 'tailwindcss/colors';
-import { fontFamily } from 'tailwindcss/defaultTheme';
-
-/** The minimum line height that text should use to avoid clipping and overflow scrolling */
-const MIN_LINE_HEIGHT = '1.13';
+import uiKitResponsivePreset from '../../apps/ui-kit/src/lib/tailwind/responsive.preset';
 
 export default {
-    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    presets: [uiKitResponsivePreset],
+    content: ['./src/**/*.{js,jsx,ts,tsx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}'],
     theme: {
-        // Overwrite colors to avoid accidental usage of Tailwind colors:
-        colors: {
-            white: colors.white,
-            black: colors.black,
-            transparent: colors.transparent,
-            inherit: colors.inherit,
-
-            gray: {
-                100: '#182435',
-                95: '#2A3645',
-                90: '#383F47',
-                85: '#5A6573',
-                80: '#636870',
-                75: '#767A81',
-                70: '#898D93',
-                65: '#9C9FA4',
-                60: '#C3C5C8',
-                55: '#D7D8DA',
-                50: '#E9EAEB',
-                45: '#E3E6E8',
-                40: '#F3F6F8',
-                35: '#FEFEFE',
-            },
-
-            iota: {
-                DEFAULT: '#6fbcf0',
-                bright: '#2A38EB',
-                light: '#E1F3FF',
-                primaryBlue2023: '#4CA3FF',
-                lightest: '#F1F8FD',
-                dark: '#1F6493',
-            },
-
-            steel: {
-                DEFAULT: '#A0B6C3',
-                dark: '#758F9E',
-                darker: '#566873',
-            },
-
-            issue: {
-                DEFAULT: '#FF794B',
-                dark: '#EB5A29',
-                light: '#FFECE6',
-            },
-            hero: {
-                DEFAULT: '#0284AD',
-                dark: '#007195',
-                darkest: '#15527B',
-            },
-            success: {
-                DEFAULT: '#2DD7A7',
-                dark: '#008C65',
-                light: '#D5F7EE',
-            },
-            warning: {
-                DEFAULT: '#F2BD24',
-                dark: '#8D6E15',
-                light: '#FFF8E2',
-            },
-            headerNav: '#2A4362',
-            search: {
-                fill: '#162A43',
-            },
-            offwhite: '#fefefe',
-            offblack: '#111111',
-            ebony: '#101828',
-            avocado: {
-                200: '#CBE5BE',
-            },
-        },
-
         extend: {
-            scale: {
-                '101': '1.01',
-            },
-            // backdrop-blur values that are found in the design:
-            backdropBlur: {
-                sm: '8px',
-                md: '16px',
-                DEFAULT: '20px',
-                lg: '24px',
-                xl: '32px',
-            },
             colors: {
-                'gradient-blue-start': '#589AEA',
-                'gradient-blue-end': '#4C75A6',
-                'gradients-graph-cards-start': '#D2EBFA',
-                'gradients-failure-start': '#FBF0FF',
-            },
-            // Line-heights that are found in the design:
-            lineHeight: {
-                80: '0.8',
-                100: '1',
-                130: '1.3',
-            },
-            boxShadow: {
-                xs: '0px 1px 2px rgba(16, 24, 40, 0.05)',
-                sm: '0px 1px 2px 0px rgba(86, 104, 115, 0.08)',
-                md: '1px 2px 8px 2px rgba(86, 104, 115, 0.06)',
-                lg: '0px 0px 44px 0px rgba(86, 104, 115, 0.22)',
-                DEFAULT: '0px 0px 20px 0px rgba(86, 104, 115, 0.14)',
-                notification: '0px 0px 20px rgba(29, 55, 87, 0.11)',
-                moduleOption:
-                    '0px 0px 29px rgba(0, 0, 0, 0.13), 0px 0px 44px rgba(0, 0, 0, 0.15), 0px 0px 0px rgba(0, 0, 0, 0.2)',
-                blurXl: '0 0 20px 0 rgba(0, 0, 0, 0.3)',
-                button: '0px 1px 2px rgba(16, 24, 40, 0.05)',
-                glow: '0 0px 6px 4px rgba(213,247,238,1)',
-                drop: '0px 0px 10px rgba(111, 188, 240, 0.2)',
-                'effect-ui-regular':
-                    '0px 5px 30px 0px rgba(86, 104, 115, 0.20), 0px 0px 0px 1px rgba(86, 104, 115, 0.03)',
-                panel: '0px 2px 7px 0px rgba(160, 182, 195, 0.32)',
-                dropdownContent: '0px 1px 2px 0px rgba(21, 82, 123, 0.08)',
-                'effect-ui-wallet-content': '0px -5px 20px 5px rgba(111, 188, 240, 0.11)',
-            },
-            fontSize: {
-                // Text sizes:
-                body: ['14px', MIN_LINE_HEIGHT],
-                bodySmall: ['13px', MIN_LINE_HEIGHT],
-                subtitle: ['12px', MIN_LINE_HEIGHT],
-                subtitleSmall: ['11px', MIN_LINE_HEIGHT],
-                subtitleSmallExtra: ['10px', MIN_LINE_HEIGHT],
-                caption: ['12px', MIN_LINE_HEIGHT],
-                captionSmall: ['11px', MIN_LINE_HEIGHT],
-                captionSmallExtra: ['10px', MIN_LINE_HEIGHT],
-                iconTextLarge: ['48px', MIN_LINE_HEIGHT],
-
-                // Heading sizes:
-                heading1: ['28px', MIN_LINE_HEIGHT],
-                heading2: ['24px', MIN_LINE_HEIGHT],
-                heading3: ['20px', MIN_LINE_HEIGHT],
-                heading4: ['18px', MIN_LINE_HEIGHT],
-                heading5: ['17px', MIN_LINE_HEIGHT],
-                heading6: ['16px', MIN_LINE_HEIGHT],
-
-                // Paragraph sizes:
-                pHeading6: ['16px', '1.4'],
-                pBody: ['14px', '1.4'],
-                pBodySmall: ['13px', '1.4'],
-                pSubtitle: ['12px', '1.4'],
-                pSubtitleSmall: ['11px', '1.4'],
-            },
-            fontFamily: {
-                system: fontFamily.sans,
-                sans: ['Inter Variable', 'Inter', ...fontFamily.sans],
-                mono: ['Red Hat Mono Variable', 'Red Hat Mono', ...fontFamily.mono],
-            },
-            keyframes: {
-                shimmer: {
-                    '0%': { 'background-position': '-1000px 0' },
-                    '100%': { 'background-position': '1000px 0' },
-                },
-            },
-            animation: {
-                shimmer: 'shimmer 2s infinite linear',
-            },
-            spacing: {
-                1.25: '0.3125rem',
-                3.75: '0.9375rem',
-                4.5: '1.125rem',
-                7.5: '1.875rem',
-                17: '4.25rem',
-                18: '4.5rem',
-                19: '4.75rem',
-                50: '12.5rem',
-                verticalListShort: '13.0625rem',
-                verticalListLong: '35.6875rem',
-                600: '37.5rem',
-                header: '80px',
-            },
-            height: {
-                12.5: '3.125rem',
-                31.5: '7.5rem',
-                100: '25rem',
-                120: '30rem',
-                300: '75rem',
-                coinsAndAssetsContainer: '31.25rem',
-            },
-            maxHeight: {
-                coinsAndAssetsContainer: '31.25rem',
-                ownCoinsPanel: '14.375rem',
-            },
-            width: {
-                12.5: '3.125rem',
-                31.5: '7.5rem',
-                walletLogo: '4.813rem',
-            },
-            maxWidth: {
-                80: '20rem',
-            },
-            minWidth: {
-                10: '2.5rem',
-                18: '4.5rem',
-                44: '11rem',
-                50: '12.5rem',
-                transactionColumn: '31.875rem',
-                smallThumbNailsViewContainer: '13.125rem',
-                smallThumbNailsViewContainerMobile: '9.375rem',
-                coinItemContainer: '15.625rem',
-            },
-            minHeight: {
-                14: '3.5rem',
-            },
-            transitionTimingFunction: {
-                'ease-in-out-cubic': 'cubic-bezier(0.65, 0, 0.35, 1)',
-                'ease-out-cubic': 'cubic-bezier(0.33, 1, 0.68, 1)',
-            },
-            transitionDuration: {
-                400: '400ms',
-            },
-            backgroundImage: {
-                placeholderGradient01: 'linear-gradient(165.96deg, #e6f5ff 10%, #ebecff 95%)',
-                placeholderShimmer:
-                    'linear-gradient(90deg, #ecf1f4 -24.18%, rgba(237 242 245 / 40%) 73.61%, #f3f7f9 114.81%, #ecf1f4 114.82%)',
-                'gradients-graph-cards': 'linear-gradient(176deg, #D2EBFA 51.68%, #D5F7EE 100%)',
-                'gradients-failure': 'linear-gradient(166deg, #FBF0FF 0%, #FFF0F0 100%)',
-                objectCard: 'linear-gradient(166deg, #F0F9FF 9.97%, #FEF7FF 94.97%)',
-            },
-            rotate: {
-                135: '135deg',
-            },
-            borderRadius: {
-                '2lg': '0.625rem',
-            },
-            aspectRatio: {
-                square: '1 / 1',
+                white: colors.white,
+                black: colors.black,
+                transparent: colors.transparent,
+                inherit: colors.inherit,
             },
         },
     },
-    corePlugins: {
-        aspectRatio: true,
-    },
-    plugins: [
-        require('@headlessui/tailwindcss'),
-        require('@tailwindcss/aspect-ratio'),
-        require('@tailwindcss/forms')({
-            strategy: 'class',
-        }),
-    ],
-} satisfies Config;
+} satisfies Partial<Config>;
diff --git a/apps/explorer/src/components/footer/Footer.tsx b/apps/explorer/src/components/footer/Footer.tsx
index d4f43153c63..8779d6cc52f 100644
--- a/apps/explorer/src/components/footer/Footer.tsx
+++ b/apps/explorer/src/components/footer/Footer.tsx
@@ -32,7 +32,7 @@ function Footer(): JSX.Element {
     return (
         <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14 dark:bg-neutral-10">
             <nav className="container flex flex-col justify-center gap-md md:gap-lg">
-                <div className="flex flex-col-reverse items-center gap-7.5 md:flex-row md:justify-between ">
+                <div className="gap-7.5 flex flex-col-reverse items-center md:flex-row md:justify-between ">
                     <div className="hidden self-center md:flex md:self-start">
                         <ThemedIotaLogo />
                     </div>
diff --git a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
index ae04b54ddf8..87199035f7a 100644
--- a/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
+++ b/apps/explorer/src/components/gas-breakdown/GasBreakdown.tsx
@@ -25,7 +25,7 @@ function GasAmount({ amount }: GasProps): JSX.Element | null {
             <span className="text-label-lg text-neutral-40 dark:text-neutral-60">
                 {formattedAmount} {symbol}
             </span>
-            <span className="flex flex-wrap items-center text-body font-medium text-neutral-70">
+            <span className="flex flex-wrap items-center text-body-md font-medium text-neutral-70">
                 {BigInt(amount)?.toLocaleString()} (nano)
             </span>
         </div>
diff --git a/apps/explorer/src/components/layout/CookieConsent.css b/apps/explorer/src/components/layout/CookieConsent.css
index fe4e8d806bd..0b059053b98 100644
--- a/apps/explorer/src/components/layout/CookieConsent.css
+++ b/apps/explorer/src/components/layout/CookieConsent.css
@@ -1,12 +1,12 @@
 .cookie-consent-theme {
     --cc-font-family: theme(fontFamily.sans);
     --cc-border-radius: theme(borderRadius.lg);
-    --cc-btn-primary-bg: theme(colors.hero.dark);
-    --cc-btn-primary-hover-bg: theme(colors.hero.DEFAULT);
-    --cc-btn-secondary-bg: theme(colors.gray.45);
-    --cc-btn-secondary-text: theme(colors.steel.darker);
-    --cc-btn-secondary-hover-text: theme(colors.steel.darker);
-    --cc-btn-border-radius: theme(borderRadius.xl);
+    --cc-btn-primary-bg: theme(colors.primary.30);
+    --cc-btn-primary-hover-bg: theme(colors.primary.30);
+    --cc-btn-secondary-bg: theme(colors.neutral.90);
+    --cc-btn-secondary-text: theme(colors.neutral.10);
+    --cc-btn-secondary-hover-text: theme(colors.neutral.6);
+    --cc-btn-border-radius: theme(borderRadius.full);
     --cc-consent-modal-box-shadow: theme(boxShadow.DEFAULT);
 }
 
@@ -15,11 +15,11 @@
 }
 
 #cc--main #c-ttl {
-    @apply mb-2 text-heading6 font-semibold text-steel-darker;
+    @apply mb-2 text-body-lg font-semibold text-neutral-60;
 }
 
 #cc--main #c-txt {
-    @apply text-body font-medium text-steel-dark;
+    @apply text-body-md font-medium text-neutral-40;
 }
 
 #cc--main #c-bns {
@@ -28,5 +28,5 @@
 
 #cc--main #c-p-bn,
 #cc--main #c-s-bn {
-    @apply text-body;
+    @apply text-body-md;
 }
diff --git a/apps/explorer/src/components/module/PkgModulesWrapper.tsx b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
index b66decbf884..36d95c330bd 100644
--- a/apps/explorer/src/components/module/PkgModulesWrapper.tsx
+++ b/apps/explorer/src/components/module/PkgModulesWrapper.tsx
@@ -123,7 +123,7 @@ export function PkgModulesWrapper({
                                     <div className="overflow-hidden text-ellipsis">
                                         {suggestion.label}
                                     </div>
-                                    <div className="break-words pl-xs text-caption font-medium uppercase text-steel">
+                                    <div className="text-caption text-steel break-words pl-xs font-medium uppercase">
                                         {suggestion.type}
                                     </div>
                                 </ListItem>
diff --git a/apps/explorer/src/components/module/module-functions-interaction/LinkGroup.tsx b/apps/explorer/src/components/module/module-functions-interaction/LinkGroup.tsx
index 701c41669aa..85bfe70050d 100644
--- a/apps/explorer/src/components/module/module-functions-interaction/LinkGroup.tsx
+++ b/apps/explorer/src/components/module/module-functions-interaction/LinkGroup.tsx
@@ -17,7 +17,7 @@ export function LinkGroup(props: LinkGroupProps): JSX.Element | null {
     }
     return (
         <div className="space-y-3">
-            <div className="font-semibold text-gray-90">{title}</div>
+            <div className="font-semibold text-neutral-40">{title}</div>
             {isLinks
                 ? props.links.map(({ text, to }) => (
                       <div key={to}>
@@ -28,7 +28,7 @@ export function LinkGroup(props: LinkGroupProps): JSX.Element | null {
                   ))
                 : null}
             {isText ? (
-                <div className="text-pBodySmall font-medium text-gray-90">{props.text}</div>
+                <div className="text-pBodySmall font-medium text-neutral-40">{props.text}</div>
             ) : null}
         </div>
     );
diff --git a/apps/explorer/src/components/network/NetworkSelector.tsx b/apps/explorer/src/components/network/NetworkSelector.tsx
index 8815212afa0..34da8635f62 100644
--- a/apps/explorer/src/components/network/NetworkSelector.tsx
+++ b/apps/explorer/src/components/network/NetworkSelector.tsx
@@ -137,12 +137,12 @@ export function NetworkSelector(): JSX.Element {
                             </div>
                         </ListItem>
                         {!!network && data?.protocolVersion && binaryVersion ? (
-                            <div className="rounded-b-lg bg-hero-darkest/5">
+                            <div className="bg-hero-darkest/5 rounded-b-lg">
                                 <div className="flex flex-col justify-between gap-1 px-4 py-3">
-                                    <div className="text-body-sm font-medium text-steel-dark">
+                                    <div className="text-body-sm font-medium text-neutral-40">
                                         IOTA {selectedNetwork?.label ?? 'Custom RPC'}
                                     </div>
-                                    <div className="text-body-sm font-medium text-steel-dark">
+                                    <div className="text-body-sm font-medium text-neutral-40">
                                         v{binaryVersion} (Protocol {data?.protocolVersion})
                                     </div>
                                 </div>
diff --git a/apps/explorer/src/components/object/ObjectFieldsCard.tsx b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
index 1f84395a840..db5390ed143 100644
--- a/apps/explorer/src/components/object/ObjectFieldsCard.tsx
+++ b/apps/explorer/src/components/object/ObjectFieldsCard.tsx
@@ -156,7 +156,7 @@ export function ObjectFieldsCard({
                                                 <div className="overflow-hidden text-ellipsis">
                                                     {suggestion.label}
                                                 </div>
-                                                <div className="break-words pl-xs text-caption font-medium uppercase text-steel">
+                                                <div className="text-caption text-steel break-words pl-xs font-medium uppercase">
                                                     {suggestion.type}
                                                 </div>
                                             </ListItem>
diff --git a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
index fd529b8d82b..8df810f8f0c 100644
--- a/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
+++ b/apps/explorer/src/components/owned-coins/OwnedCoins.tsx
@@ -230,7 +230,7 @@ export function NoObjectsOwnedMessage({
     objectType,
 }: NoObjectsOwnedMessageProps): React.JSX.Element {
     return (
-        <div className="flex h-full items-center justify-center md:h-coinsAndAssetsContainer">
+        <div className="md:h-coinsAndAssetsContainer flex h-full items-center justify-center">
             <span className="flex flex-row items-center gap-x-xs text-neutral-40 dark:text-neutral-60">
                 No {objectType} Owned
             </span>
diff --git a/apps/explorer/src/components/owned-objects/ThumbnailsView.tsx b/apps/explorer/src/components/owned-objects/ThumbnailsView.tsx
index 2ba1c84b54c..2f397d42f2e 100644
--- a/apps/explorer/src/components/owned-objects/ThumbnailsView.tsx
+++ b/apps/explorer/src/components/owned-objects/ThumbnailsView.tsx
@@ -48,7 +48,7 @@ function ThumbnailsOnlyLoading({ limit }: { limit: number }): JSX.Element {
     return (
         <>
             {new Array(limit).fill(0).map((_, index) => (
-                <div key={index} className="h-16 w-16 text-primary-30 md:h-31.5 md:w-31.5">
+                <div key={index} className="md:h-31.5 md:w-31.5 h-16 w-16 text-primary-30">
                     <Loader className="animate-spin" />
                 </div>
             ))}
diff --git a/apps/explorer/src/components/search/Search.tsx b/apps/explorer/src/components/search/Search.tsx
index 989f602b49f..d2a0f41eebf 100644
--- a/apps/explorer/src/components/search/Search.tsx
+++ b/apps/explorer/src/components/search/Search.tsx
@@ -49,7 +49,7 @@ function Search(): JSX.Element {
                 <div className="flex cursor-pointer justify-between">
                     <ListItem hideBottomBorder>
                         <div className="overflow-hidden text-ellipsis">{suggestion.label}</div>
-                        <div className="break-words pl-xs text-caption font-medium uppercase text-steel">
+                        <div className="text-caption text-steel break-words pl-xs font-medium uppercase">
                             {suggestion.type}
                         </div>
                     </ListItem>
diff --git a/apps/explorer/src/components/transactions/TxForID.module.css b/apps/explorer/src/components/transactions/TxForID.module.css
index 7c741192cea..217ddaf078c 100644
--- a/apps/explorer/src/components/transactions/TxForID.module.css
+++ b/apps/explorer/src/components/transactions/TxForID.module.css
@@ -3,7 +3,7 @@
 }
 
 .txheader {
-    @apply hidden bg-offblack py-2 text-offwhite md:grid md:grid-cols-12;
+    @apply bg-offblack text-offwhite hidden py-2 md:grid md:grid-cols-12;
 }
 
 .txrow {
diff --git a/apps/explorer/src/components/ui/Link.tsx b/apps/explorer/src/components/ui/Link.tsx
index db60da72395..5fd8faa19d7 100644
--- a/apps/explorer/src/components/ui/Link.tsx
+++ b/apps/explorer/src/components/ui/Link.tsx
@@ -10,17 +10,17 @@ import { ButtonOrLink, type ButtonOrLinkProps } from './ButtonOrLink';
 const linkStyles = cva([], {
     variants: {
         variant: {
-            text: 'text-body font-semibold text-steel-dark hover:text-steel-darker active:text-steel disabled:text-gray-60',
-            mono: 'text-body text-primary-30 hover:text-primary-20',
+            text: 'text-body-md font-semibold text-neutral-40 hover:text-neutral-60 active:text-steel disabled:text-gray-60',
+            mono: 'text-body-md text-primary-30 hover:text-primary-20',
             textHeroDark: 'text-pBody font-medium text-hero-dark hover:text-hero-darkest',
         },
         uppercase: {
             true: 'uppercase',
         },
         size: {
-            md: '!text-body',
-            sm: '!text-bodySmall',
-            captionSmall: '!text-captionSmall',
+            md: '!text-body-md',
+            sm: '!text-body-sm',
+            captionSmall: '!text-label-sm',
         },
     },
     defaultVariants: {
diff --git a/apps/explorer/src/components/ui/VerticalList.tsx b/apps/explorer/src/components/ui/VerticalList.tsx
index 1c8c580720b..f5d6c49f169 100644
--- a/apps/explorer/src/components/ui/VerticalList.tsx
+++ b/apps/explorer/src/components/ui/VerticalList.tsx
@@ -17,10 +17,10 @@ export function ListItem({ active, children, onClick }: ListItemProps): JSX.Elem
             <button
                 type="button"
                 className={clsx(
-                    'block w-full cursor-pointer rounded-md border px-2.5 py-2 text-left text-body',
+                    'block w-full cursor-pointer rounded-md border px-2.5 py-2 text-left text-body-md',
                     active
-                        ? 'border-gray-40 bg-gray-40 font-semibold text-gray-90 shadow-sm'
-                        : 'border-transparent bg-white font-medium text-gray-80',
+                        ? 'border-gray-40 bg-gray-40 font-semibold text-neutral-40 shadow-sm'
+                        : 'border-transparent bg-white font-medium text-neutral-50',
                 )}
                 onClick={onClick}
             >
diff --git a/apps/explorer/src/components/ui/modal/Modal.tsx b/apps/explorer/src/components/ui/modal/Modal.tsx
index 0cf4ba54573..236a054d7a2 100644
--- a/apps/explorer/src/components/ui/modal/Modal.tsx
+++ b/apps/explorer/src/components/ui/modal/Modal.tsx
@@ -21,7 +21,7 @@ export function CloseButton({ onClick }: CloseButtonProps): JSX.Element {
         <button
             onClick={onClick}
             type="button"
-            className="absolute right-0 top-0 p-4 text-steel hover:text-steel-darker"
+            className="text-steel absolute right-0 top-0 p-4 hover:text-neutral-60"
         >
             <Close className="h-3 w-3" />
         </button>
@@ -37,7 +37,7 @@ export function ModalBody({ children }: ModalChildrenProps): JSX.Element {
 }
 
 export function ModalContent({ children }: ModalChildrenProps): JSX.Element {
-    return <div className="flex flex-col rounded-lg bg-gray-40 p-5">{children}</div>;
+    return <div className="bg-gray-40 flex flex-col rounded-lg p-5">{children}</div>;
 }
 
 export function ModalHeading({ children }: ModalChildrenProps): JSX.Element {
diff --git a/apps/explorer/src/index.css b/apps/explorer/src/index.css
index ddc5cdaa069..47d7d79f7d5 100644
--- a/apps/explorer/src/index.css
+++ b/apps/explorer/src/index.css
@@ -12,18 +12,6 @@ body,
     position: relative;
 }
 
-/* Define some colors as CSS variables for use outside of the Tailwind class context: */
-:root {
-    --success-light: theme('colors.success.light');
-    --success-dark: theme('colors.success.dark');
-    --warning-light: theme('colors.warning.light');
-    --warning-dark: theme('colors.warning.dark');
-    --issue-light: theme('colors.issue.light');
-    --issue-dark: theme('colors.issue.dark');
-    --steel: theme('colors.steel.DEFAULT');
-    --steel-dark: theme('colors.steel.dark');
-}
-
 :root {
     @apply bg-neutral-98;
 }
@@ -35,7 +23,6 @@ body,
 @layer base {
     body {
         @apply antialiased;
-        @apply font-sans text-offblack;
     }
 }
 
diff --git a/apps/explorer/src/pages/object-result/views/ObjectView.module.css b/apps/explorer/src/pages/object-result/views/ObjectView.module.css
index 86dbdc86acc..c467fbaf1df 100644
--- a/apps/explorer/src/pages/object-result/views/ObjectView.module.css
+++ b/apps/explorer/src/pages/object-result/views/ObjectView.module.css
@@ -10,7 +10,7 @@
     }
 
     .textdetails > tbody > tr > td:first-child {
-        @apply w-[220px]  pr-6 font-medium text-gray-80;
+        @apply w-[220px]  pr-6 font-medium text-neutral-50;
     }
 
     .textdetails > tbody > tr > td:nth-child(2) {
@@ -49,13 +49,13 @@ div.metadata > h2 {
 }
 
 div.metadata > p {
-    @apply text-[13px] leading-[12px] text-gray-80;
+    @apply text-[13px] leading-[12px] text-neutral-50;
 }
 
 .desktoppreviewmedia,
 .mobilepreviewmedia {
     @apply cursor-pointer bg-inherit p-0 text-[14px] font-semibold
-  leading-[13px] tracking-[-0.02em] text-gray-80;
+  leading-[13px] tracking-[-0.02em] text-neutral-50;
 }
 
 .desktoppreviewmedia {
@@ -99,7 +99,7 @@ table.properties {
 }
 
 td.objectid {
-    @apply text-gray-90;
+    @apply text-neutral-40;
 }
 
 .objecttypelink {
diff --git a/apps/explorer/src/pages/transaction-result/TransactionData.tsx b/apps/explorer/src/pages/transaction-result/TransactionData.tsx
index 604998be216..de3d78e5890 100644
--- a/apps/explorer/src/pages/transaction-result/TransactionData.tsx
+++ b/apps/explorer/src/pages/transaction-result/TransactionData.tsx
@@ -40,7 +40,7 @@ export function TransactionData({ transaction }: TransactionDataProps): JSX.Elem
             </section>
 
             {isProgrammableTransaction && (
-                <section className="flex w-full flex-1 flex-col gap-3 md:min-w-transactionColumn md:gap-6">
+                <section className="md:min-w-transactionColumn flex w-full flex-1 flex-col gap-3 md:gap-6">
                     <div data-testid="transactions-card">
                         <TransactionsCard transactions={programmableTxn.transactions} />
                     </div>
diff --git a/apps/explorer/src/pages/transaction-result/TransactionResult.module.css b/apps/explorer/src/pages/transaction-result/TransactionResult.module.css
index 00a60208bc6..7850b2db8fd 100644
--- a/apps/explorer/src/pages/transaction-result/TransactionResult.module.css
+++ b/apps/explorer/src/pages/transaction-result/TransactionResult.module.css
@@ -11,11 +11,11 @@
 }
 
 .eventtitle {
-    @apply pl-2 text-gray-80;
+    @apply pl-2 text-neutral-50;
 }
 
 .eventtitle:hover {
-    @apply cursor-pointer bg-gray-45;
+    @apply cursor-pointer bg-neutral-92;
 
     border-radius: 6px;
 }
@@ -71,32 +71,13 @@
     @apply border-b-[1px] border-[#f0f1f2] pb-1 pt-1 text-sm;
 }
 
-.itemviewcontent {
-    @apply mb-2 mt-2;
-}
-
-.itemviewcontent .itemviewcontentitem {
-    @apply grid gap-1 py-2 text-[14px] text-gray-80 md:text-[15px];
-
-    grid-template-columns: 1fr 3fr;
-}
-
 .itemviewcontentvalue {
-    @apply inline-flex content-center items-baseline text-sm text-gray-90 md:block;
+    @apply inline-flex content-center items-baseline text-sm text-neutral-40 md:block;
 
     line-break: anywhere;
 }
 
-.itemviewcontent .itemviewcontentitem a,
-.itemviewcontent .itemviewcontentitem span {
-    @apply break-all font-mono text-sm text-iota-dark;
-}
-
 @media (min-width: 40em) {
-    .itemviewcontent .itemviewcontentitem {
-        grid-template-columns: 1fr 5fr;
-    }
-
     .txmodule section:nth-child(2n) {
         border-left: 1px solid #f0f1f2;
         border-right: 1px solid #f0f1f2;
@@ -128,5 +109,5 @@
 }
 
 .datetime {
-    @apply block text-bodySmall font-semibold text-gray-75 sm:inline;
+    @apply text-gray-75 block text-body-sm font-semibold sm:inline;
 }
diff --git a/apps/explorer/src/pages/transaction-result/TransactionView.tsx b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
index ad652a1e6c9..06b5f3d6c15 100644
--- a/apps/explorer/src/pages/transaction-result/TransactionView.tsx
+++ b/apps/explorer/src/pages/transaction-result/TransactionView.tsx
@@ -10,7 +10,6 @@ import { Events } from '~/pages/transaction-result/Events';
 import { TransactionData } from '~/pages/transaction-result/TransactionData';
 import { TransactionSummary } from '~/pages/transaction-result/transaction-summary';
 import { Signatures } from './Signatures';
-import styles from './TransactionResult.module.css';
 import { TransactionDetails } from './transaction-summary/TransactionDetails';
 import { useTransactionSummary } from '@iota/core';
 import { useBreakpoint, useRecognizedPackages } from '~/hooks';
@@ -115,31 +114,29 @@ export function TransactionView({ transaction }: TransactionViewProps): JSX.Elem
         defaultSize: isProgrammableTransaction ? 65 : 50,
     };
     return (
-        <div className={clsx(styles.txdetailsbg)}>
-            <div className="flex h-full flex-col gap-2xl">
-                <div>
-                    <TransactionDetails
-                        timestamp={summary?.timestamp}
-                        sender={summary?.sender}
-                        checkpoint={transaction.checkpoint}
-                        executedEpoch={transaction.effects?.executedEpoch}
-                    />
-                </div>
-                {isMediumOrAbove ? (
-                    <SplitPanes
-                        autoSaveId={LocalStorageSplitPaneKey.TransactionView}
-                        onCollapse={setIsCollapsed}
-                        splitPanels={[leftPane, rightPane]}
-                        direction="horizontal"
-                    />
-                ) : (
-                    <div className="flex h-full flex-col gap-lg">
-                        {leftPane.panel}
-                        <Divider />
-                        {rightPane.panel}
-                    </div>
-                )}
+        <div className="flex h-full flex-col gap-2xl">
+            <div>
+                <TransactionDetails
+                    timestamp={summary?.timestamp}
+                    sender={summary?.sender}
+                    checkpoint={transaction.checkpoint}
+                    executedEpoch={transaction.effects?.executedEpoch}
+                />
             </div>
+            {isMediumOrAbove ? (
+                <SplitPanes
+                    autoSaveId={LocalStorageSplitPaneKey.TransactionView}
+                    onCollapse={setIsCollapsed}
+                    splitPanels={[leftPane, rightPane]}
+                    direction="horizontal"
+                />
+            ) : (
+                <div className="flex h-full flex-col gap-lg">
+                    {leftPane.panel}
+                    <Divider />
+                    {rightPane.panel}
+                </div>
+            )}
         </div>
     );
 }
diff --git a/apps/explorer/tailwind.config.ts b/apps/explorer/tailwind.config.ts
index 44372a0e8fe..553727d7246 100644
--- a/apps/explorer/tailwind.config.ts
+++ b/apps/explorer/tailwind.config.ts
@@ -2,89 +2,25 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import preset from '@iota/core/tailwind.config';
 import colors from 'tailwindcss/colors';
 import { type Config } from 'tailwindcss';
 // Note: exception for the tailwind preset import
 import uiKitResponsivePreset from '../../apps/ui-kit/src/lib/tailwind/responsive.preset';
 
 export default {
-    presets: [preset, uiKitResponsivePreset],
+    presets: [uiKitResponsivePreset],
     content: ['./src/**/*.{js,jsx,ts,tsx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}'],
     darkMode: 'selector',
     theme: {
-        // This COLOR are duplicated from @iota/core tailwind.config.ts!!!
-        // They are repeated here cause uiKitResponsivePreset overwrites the colors, and they are still used throughout Explorer
-        // REMOVE THIS COLORS ONCE @iota/core TAILWIND IS NOT NEEDED ANYMORE
         extend: {
             colors: {
                 white: colors.white,
                 black: colors.black,
                 transparent: colors.transparent,
                 inherit: colors.inherit,
-
-                gray: {
-                    100: '#182435',
-                    95: '#2A3645',
-                    90: '#383F47',
-                    85: '#5A6573',
-                    80: '#636870',
-                    75: '#767A81',
-                    70: '#898D93',
-                    65: '#9C9FA4',
-                    60: '#C3C5C8',
-                    55: '#D7D8DA',
-                    50: '#E9EAEB',
-                    45: '#E3E6E8',
-                    40: '#F3F6F8',
-                    35: '#FEFEFE',
-                },
-
-                iota: {
-                    DEFAULT: '#6fbcf0',
-                    bright: '#2A38EB',
-                    light: '#E1F3FF',
-                    primaryBlue2023: '#4CA3FF',
-                    lightest: '#F1F8FD',
-                    dark: '#1F6493',
-                },
-
-                steel: {
-                    DEFAULT: '#A0B6C3',
-                    dark: '#758F9E',
-                    darker: '#566873',
-                },
-
-                issue: {
-                    DEFAULT: '#FF794B',
-                    dark: '#EB5A29',
-                    light: '#FFECE6',
-                },
-                hero: {
-                    DEFAULT: '#0284AD',
-                    dark: '#007195',
-                    darkest: '#15527B',
-                },
-                success: {
-                    DEFAULT: '#2DD7A7',
-                    dark: '#008C65',
-                    light: '#D5F7EE',
-                },
-                warning: {
-                    DEFAULT: '#F2BD24',
-                    dark: '#8D6E15',
-                    light: '#FFF8E2',
-                },
-                headerNav: '#2A4362',
-                search: {
-                    fill: '#162A43',
-                },
-                offwhite: '#fefefe',
-                offblack: '#111111',
-                ebony: '#101828',
-                avocado: {
-                    200: '#CBE5BE',
-                },
+            },
+            height: {
+                header: '80px',
             },
         },
     },
diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
index 2b433c7e41d..6be03d29d6a 100644
--- a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
+++ b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -87,7 +87,7 @@ export function PasswordInputDialog({
                             </span>
                         </div>
                     </div>
-                    <div className="flex flex-nowrap gap-3.75 self-stretch">
+                    <div className="gap-3.75 flex flex-nowrap self-stretch">
                         {showBackButton ? (
                             <Button
                                 size={ButtonSize.Small}
diff --git a/apps/wallet/src/ui/app/components/accounts/EditableAccountName.tsx b/apps/wallet/src/ui/app/components/accounts/EditableAccountName.tsx
index c2be5bedfee..1a9abff88f5 100644
--- a/apps/wallet/src/ui/app/components/accounts/EditableAccountName.tsx
+++ b/apps/wallet/src/ui/app/components/accounts/EditableAccountName.tsx
@@ -14,7 +14,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
 
 export const Input = forwardRef<HTMLInputElement, InputProps>((props, forwardedRef) => (
     <input
-        className="text-steel-darker hover:text-hero peer items-center rounded-sm border-none bg-transparent p-0 text-pBody font-semibold outline-none transition focus:bg-transparent"
+        className="text-steel-darker hover:text-hero text-pBody peer items-center rounded-sm border-none bg-transparent p-0 font-semibold outline-none transition focus:bg-transparent"
         ref={forwardedRef}
         {...props}
     />
diff --git a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/DescriptionList.tsx b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/DescriptionList.tsx
index 3472013a74e..1bf7c917b52 100644
--- a/apps/wallet/src/ui/app/pages/approval-request/transaction-request/DescriptionList.tsx
+++ b/apps/wallet/src/ui/app/pages/approval-request/transaction-request/DescriptionList.tsx
@@ -16,8 +16,8 @@ export interface DescriptionItemProps {
 export function DescriptionItem({ title, children }: DescriptionItemProps) {
     return (
         <div className="flex items-center">
-            <dt className="text-steel-dark flex-1 text-pBodySmall font-medium">{title}</dt>
-            <dd className="text-steel-darker ml-0 text-pBodySmall font-medium">{children}</dd>
+            <dt className="text-steel-dark text-pBodySmall flex-1 font-medium">{title}</dt>
+            <dd className="text-steel-darker text-pBodySmall ml-0 font-medium">{children}</dd>
         </div>
     );
 }
diff --git a/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx b/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx
index 826dc5e2317..8d02c1ea8da 100644
--- a/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/kiosk-details/index.tsx
@@ -40,7 +40,7 @@ function KioskDetailsPage() {
             >
                 <Loading loading={isPending}>
                     {!items?.length ? (
-                        <div className="text-steel-darker flex flex-1 items-center self-center text-caption font-semibold">
+                        <div className="text-steel-darker text-caption flex flex-1 items-center self-center font-semibold">
                             Kiosk is empty
                         </div>
                     ) : (
diff --git a/apps/wallet/tailwind.config.ts b/apps/wallet/tailwind.config.ts
index f1935832df5..1a42a522c18 100644
--- a/apps/wallet/tailwind.config.ts
+++ b/apps/wallet/tailwind.config.ts
@@ -2,14 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import preset from '@iota/core/tailwind.config';
 import { type Config } from 'tailwindcss';
 import animatePlugin from 'tailwindcss-animate';
 // Note: exception for the tailwind preset import
 import uiKitStaticPreset from '../../apps/ui-kit/src/lib/tailwind/static.preset';
 
 export default {
-    presets: [preset, uiKitStaticPreset],
+    presets: [uiKitStaticPreset],
     content: ['./src/**/*.{js,jsx,ts,tsx}', './../ui-kit/src/lib/**/*.{js,jsx,ts,tsx}'],
     theme: {
         extend: {