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
iotaledger · Dec 4, 2024 · f47fff0 · f47fff0
1 parent 2fdc59e
commit f47fff0
Show file tree

Hide file tree

Showing 26 changed files with 81 additions and 412 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>