feat: update dependencies and delete unused theme utilities

This commit removes unused custom utilities and updates the version of eleganceui-tailwind-utilities in the package.json. Also, changes were made in the tailwind.config.ts to no longer use the deleted utilities. The code cleanup improves readability and reduces overall complexity.
everton-dgn · Mar 31, 2024 · bd830e0 · bd830e0
1 parent 02584e3
commit bd830e0
Show file tree

Hide file tree

Showing 18 changed files with 29 additions and 204 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "dev": "next dev",
     "start": "next start",
-    "build": "next build",
+    "build": "next build --no-lint",
     "lint": "eslint --cache src --ext ts,tsx --max-warnings=0",
     "lint:fix": "eslint --cache --fix src --ext ts,tsx",
     "next:lint": "next lint",
@@ -48,7 +48,7 @@
   "devDependencies": {
     "dotenv": "^16.3.1",
     "@commitlint/cli": "^18.4.4",
-    "eleganceui-tailwind-utilities": "^2.1.0",
+    "eleganceui-tailwind-utilities": "^3.0.0",
     "@commitlint/config-conventional": "^18.4.4",
     "@playwright/test": "^1.41.0",
     "@testing-library/dom": "^9.3.4",

diff --git a/src/theme/components/underlined-title.css b/src/theme/components/underlined-title.css
@@ -1,5 +1,5 @@
 @layer components {
   .underlined-title {
-    @apply max-w-fit text-20 font-700 uppercase text-primary-500 after-base after:mt-8 after:h-4 after:w-[30%] after:rounded-4 after:bg-secondary-500;
+    @apply fs-20 font-700 max-w-fit uppercase after-base tx-primary-500 after:mt-8 after:h-4 after:w-[30%] after:bg-secondary-500 after:br;
   }
 }
diff --git a/src/theme/reset.css b/src/theme/reset.css
@@ -1,7 +1,6 @@
 @layer base {
   * {
     outline: none;
-    line-height: calc(1em + 0.5rem);
     -webkit-font-smoothing: antialiased !important;
     -moz-osx-font-smoothing: grayscale !important;
     @apply m-0 box-border list-none p-0 font-sans no-underline antialiased;
@@ -21,12 +20,8 @@
     }
   }
 
-  html {
-    @apply text-[62.5%];
-  }
-
   body {
-    @apply isolate min-h-screen bg-soft-white-blue pb-[50px] text-dark col-full jc-start;
+    @apply isolate min-h-screen bg-soft-white-blue pb-12 col-full jc-start tx-dark;
 
     @screen sm {
       @apply pb-0;
@@ -45,7 +40,7 @@
 
   b,
   strong {
-    @apply font-700;
+    @apply font-bold;
   }
 
   optgroup,
@@ -54,7 +49,7 @@
   select,
   textarea,
   button {
-    @apply m-0 font-sans text-16 font-500;
+    @apply m-0 font-sans font-medium fs-base;
   }
 
   button {
@@ -68,11 +63,11 @@
 
   :focus,
   :focus-visible {
-    @apply outline outline-4 outline-offset-1 outline-focus;
+    @apply otl-4-focus otl-o-1;
   }
 
   :focus:not(:focus-visible) {
-    @apply outline-0;
+    @apply otl-0;
   }
 
   mark {
@@ -81,7 +76,7 @@
       clip: rect(1px, 1px, 1px, 1px);
       clip-path: inset(100%);
       content: ' [start of highlighted text] ';
-      @apply absolute h-1 w-1 overflow-hidden whitespace-nowrap;
+      @apply absolute h-px w-px ov-hidden whitespace-nowrap;
     }
 
     &::after {
@@ -91,11 +86,11 @@
 
   ::-webkit-scrollbar,
   scrollbar-width {
-    @apply w-12 bg-soft-white-blue;
+    @apply w-3 bg-soft-white-blue;
   }
 
   ::-webkit-scrollbar-thumb {
-    @apply rounded-20 border border-solid border-soft-white-blue bg-grey-light-500;
+    @apply br-5 bw-soft-white-blue bg-grey-light-500;
   }
 
   :root {

diff --git a/src/theme/utilities/directional.ts b/src/theme/utilities/directional.ts
diff --git a/src/theme/utilities/fontSize.ts b/src/theme/utilities/fontSize.ts
diff --git a/src/theme/utilities/fontWeight.ts b/src/theme/utilities/fontWeight.ts
diff --git a/src/theme/utilities/gap.ts b/src/theme/utilities/gap.ts
diff --git a/src/theme/utilities/index.ts b/src/theme/utilities/index.ts
diff --git a/src/theme/utilities/lineHeight.ts b/src/theme/utilities/lineHeight.ts
diff --git a/src/theme/utilities/size.ts b/src/theme/utilities/size.ts
diff --git a/src/theme/variables/fontSizes.ts b/src/theme/variables/fontSizes.ts
diff --git a/src/theme/variables/fontWeights.ts b/src/theme/variables/fontWeights.ts
@@ -1,5 +1,5 @@
 export const fontWeights = {
-  700: '700',
-  600: '600',
-  500: '500'
+  bold: '700',
+  semibold: '600',
+  medium: '500'
 }
diff --git a/src/theme/variables/index.ts b/src/theme/variables/index.ts
@@ -1,10 +1,6 @@
 export { colors } from './colors'
-export { screens } from './screens'
-export { spacings } from './spacings'
-export { borderRadius } from './borderRadius'
 export { zIndex } from './zIndex'
-export { fontWeights } from './fontWeights'
 export { boxShadows } from './boxShadows'
-export { fontSizes } from './fontSizes'
 export { keyframes } from './keyframes'
-export { lineHeights } from './lineHights'
+export { fontWeights } from './fontWeights'
+export { borderRadius } from './borderRadius'
diff --git a/src/theme/variables/lineHights.ts b/src/theme/variables/lineHights.ts
diff --git a/src/theme/variables/screens.ts b/src/theme/variables/screens.ts
diff --git a/src/theme/variables/spacings.ts b/src/theme/variables/spacings.ts
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,19 +1,15 @@
 import defaultTheme from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
-import * as customUtilities from 'eleganceui-tailwind-utilities'
+import eleganceUIUtilities from 'eleganceui-tailwind-utilities'
 
 import {
+  boxShadows,
   colors,
+  keyframes,
   zIndex,
-  spacings,
   fontWeights,
-  fontSizes,
-  boxShadows,
   borderRadius,
-  screens,
-  keyframes
 } from './src/theme/variables'
-import { utilities } from './src/theme/utilities'
 
 const config: Config = {
   content: [
@@ -23,15 +19,9 @@ const config: Config = {
   theme: {
     extend: {
       colors,
-      screens,
       zIndex,
+      fontWeights,
       borderRadius,
-      fontWeight: fontWeights,
-      fontSize: fontSizes,
-      width: { ...defaultTheme.width, ...spacings },
-      height: { ...defaultTheme.height, ...spacings },
-      spacing: { ...defaultTheme.spacing, ...spacings },
-      borderWidth: { ...defaultTheme.borderWidth, ...spacings },
       boxShadow: { ...defaultTheme.boxShadow, ...boxShadows },
       keyframes: { ...defaultTheme.keyframes, ...keyframes },
       fontFamily: {
@@ -41,10 +31,14 @@ const config: Config = {
         ...defaultTheme.aspectRatio,
         '600/317': '600/317',
         '10/7': '10/7'
+      },
+      screens: {
+        ...defaultTheme.screens,
+        xs: '440px'
       }
     }
   },
-  plugins: [...utilities, ...Object.values(customUtilities)]
+  plugins: [...eleganceUIUtilities]
 }
 
 export default config
diff --git a/yarn.lock b/yarn.lock
@@ -3687,10 +3687,10 @@ electron-to-chromium@^1.4.668:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz#1f077d9a095761804aec7ec6346c3f4b69b56534"
   integrity sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==
 
-eleganceui-tailwind-utilities@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eleganceui-tailwind-utilities/-/eleganceui-tailwind-utilities-2.1.0.tgz#4bccbd3656c1faea2163e94420d2a52182f0e5f6"
-  integrity sha512-8TqlVgXjrkydIoCyQfA4n1SdP7SQP4rwNLCHGYgoi4oxxEyLrua2yNhyAv4HCD+mJZAFFRC1wBRTqXs4A6Lb4w==
+eleganceui-tailwind-utilities@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eleganceui-tailwind-utilities/-/eleganceui-tailwind-utilities-3.0.0.tgz#0abea7ebc2c06bd1ab0d9a600fe945528bddaee2"
+  integrity sha512-/M7jpzj5WB+rjK7IIpTkEDtE4gxwQgAUuFJNJ+roJJtt1HUvIM6FLVdHipDGZSulNjmEfY/F7RcV2Ne5+SQc1w==
 
 emoji-regex@^10.3.0:
   version "10.3.0"