feat: update theme

package.json

@@ -50,7 +50,6 @@
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
     "@playwright/test": "^1.41.0",
-    "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.0.0",

src/@types/styles.d.ts

@@ -1,2 +1 @@
 declare module '*.module.css'
-declare module '*.module.scss'

src/theme/utilities/directional.ts

@@ -0,0 +1,17 @@
+import plugin from 'tailwindcss/plugin'
+
+import { spacings } from '../variables'
+
+export const directional = plugin(({ addUtilities }) => {
+  const directions: Record<string, any> = {}
+  Object.entries(spacings).forEach(([key, value]) => {
+    const size = `${value}`
+    directions[`.t-${key}`] = { top: size }
+    directions[`.b-${key}`] = { bottom: size }
+    directions[`.l-${key}`] = { left: size }
+    directions[`.r-${key}`] = { right: size }
+    directions[`.y-${key}`] = { top: size, bottom: size }
+    directions[`.x-${key}`] = { left: size, right: size }
+  })
+  addUtilities(directions)
+})

src/theme/utilities/fontSize.ts

@@ -0,0 +1,11 @@
+import plugin from 'tailwindcss/plugin'
+
+import { fontSizes } from '../variables'
+
+export const fontSize = plugin(({ addUtilities }) => {
+  const fs: Record<string, { fontSize: string }> = {}
+  Object.entries(fontSizes).forEach(([key, value]) => {
+    fs[`.fs-${key}`] = { fontSize: `${value}` }
+  })
+  addUtilities(fs)
+})

src/theme/utilities/fontWeight.ts

@@ -0,0 +1,11 @@
+import plugin from 'tailwindcss/plugin'
+
+import { fontWeights } from '../variables'
+
+export const fontWeight = plugin(({ addUtilities }) => {
+  const fw: Record<string, { fontWeight: string }> = {}
+  Object.entries(fontWeights).forEach(([key, value]) => {
+    fw[`.fs-${key}`] = { fontWeight: `${value}` }
+  })
+  addUtilities(fw)
+})

src/theme/utilities/gap.ts

@@ -1,11 +1,13 @@
 import plugin from 'tailwindcss/plugin'
 
-import { spacing } from '../variables'
+import { spacings } from '../variables'
 
 export const gap = plugin(({ addUtilities }) => {
-  const gaps: Record<string, { gap: string }> = {}
-  Object.entries(spacing).forEach(([key, value]) => {
+  const gaps: Record<string, any> = {}
+  Object.entries(spacings).forEach(([key, value]) => {
     gaps[`.g-${key}`] = { gap: `${value}` }
+    gaps[`.gx-${key}`] = { columnGap: `${value}` }
+    gaps[`.gy-${key}`] = { rowGap: `${value}` }
   })
   addUtilities(gaps)
 })

src/theme/utilities/index.ts

@@ -5,15 +5,23 @@ import { col } from './col'
 import { colFull } from './colFull'
 import { containerCol } from './containerCol'
 import { containerRow } from './containerRow'
+import { directional } from './directional'
 import { flexCenter } from './flexCenter'
+import { fontSize } from './fontSize'
+import { fontWeight } from './fontWeight'
 import { gap } from './gap'
 import { justifyContent } from './justifyContent'
 import { justifyItems } from './justifyItems'
 import { justifySelf } from './justifySelf'
+import { lineHeight } from './lineHeight'
+import { placeContent } from './placeContent'
+import { placeItems } from './placeItems'
+import { placeSelf } from './placeSelf'
 import { pseudo } from './pseudo'
 import { row } from './row'
 import { rowFull } from './rowFull'
 import { scrollbarHide } from './scrollbarHide'
+import { size } from './size'
 
 export const utilities = [
   justifyContent,
@@ -22,6 +30,9 @@ export const utilities = [
   alignContent,
   alignItems,
   alignSelf,
+  placeContent,
+  placeItems,
+  placeSelf,
   flexCenter,
   col,
   row,
@@ -31,5 +42,10 @@ export const utilities = [
   containerRow,
   pseudo,
   gap,
+  lineHeight,
+  directional,
+  size,
+  fontWeight,
+  fontSize,
   scrollbarHide
 ]

src/theme/utilities/lineHeight.ts

@@ -0,0 +1,11 @@
+import plugin from 'tailwindcss/plugin'
+
+import { lineHeights } from '../variables'
+
+export const lineHeight = plugin(({ addUtilities }) => {
+  const lh: Record<string, { lineHeight: string }> = {}
+  Object.entries(lineHeights).forEach(([key, value]) => {
+    lh[`.lh-${key}`] = { lineHeight: `${value}` }
+  })
+  addUtilities(lh)
+})

src/theme/utilities/placeContent.ts

@@ -0,0 +1,14 @@
+import plugin from 'tailwindcss/plugin'
+
+export const placeContent = plugin(({ addUtilities }) => {
+  addUtilities({
+    '.pc-center': { placeContent: 'center' },
+    '.pc-start': { placeContent: 'start' },
+    '.pc-end': { placeContent: 'end' },
+    '.pc-between': { placeContent: 'space-between' },
+    '.pc-around': { placeContent: 'space-around' },
+    '.pc-evenly': { placeContent: 'space-evenly' },
+    '.pc-baseline': { placeContent: 'baseline' },
+    '.pc-stretch': { placeContent: 'stretch' }
+  })
+})

src/theme/utilities/placeItems.ts

@@ -0,0 +1,11 @@
+import plugin from 'tailwindcss/plugin'
+
+export const placeItems = plugin(({ addUtilities }) => {
+  addUtilities({
+    '.pi-start': { placeItems: 'start' },
+    '.pi-end': { placeItems: 'end' },
+    '.pi-center': { placeItems: 'center' },
+    '.pi-baseline': { placeItems: 'baseline' },
+    '.pi-stretch': { placeItems: 'stretch' }
+  })
+})

src/theme/utilities/placeSelf.ts

@@ -0,0 +1,11 @@
+import plugin from 'tailwindcss/plugin'
+
+export const placeSelf = plugin(({ addUtilities }) => {
+  addUtilities({
+    '.ps-auto': { placeSelf: 'auto' },
+    '.ps-start': { placeSelf: 'start' },
+    '.ps-end': { placeSelf: 'end' },
+    '.ps-center': { placeSelf: 'center' },
+    '.ps-stretch': { placeSelf: 'stretch' }
+  })
+})

src/theme/utilities/size.ts

@@ -0,0 +1,18 @@
+import plugin from 'tailwindcss/plugin'
+
+import { spacings } from '../variables'
+
+export const size = plugin(({ addUtilities }) => {
+  const sizes: Record<string, any> = {}
+  Object.entries(spacings).forEach(([key, value]) => {
+    sizes[`.max-size-${key}`] = { maxWidth: `${value}`, maxHeight: `${value}` }
+    sizes[`.min-size-${key}`] = { minWidth: `${value}`, minHeight: `${value}` }
+    sizes[`.square-${key}`] = {
+      minWidth: `${value}`,
+      minHeight: `${value}`,
+      width: `${value}`,
+      height: `${value}`
+    }
+  })
+  addUtilities(sizes)
+})

src/theme/variables/boxShadow.ts → src/theme/variables/boxShadows.ts

@@ -1,4 +1,4 @@
-export const boxShadow = {
+export const boxShadows = {
   xxl: '0 4px 110px -4px #26324573',
   xl: '0 8px 26px #1b205045',
   lg: '0 1px 10px -1px #97a2b473',

src/theme/variables/fontSize.ts → src/theme/variables/fontSizes.ts

@@ -1,4 +1,4 @@
-export const fontSize = {
+export const fontSizes = {
   12: '12px',
   14: '14px',
   16: '16px',

src/theme/variables/fontWeight.ts → src/theme/variables/fontWeights.ts

@@ -1,4 +1,4 @@
-export const fontWeight = {
+export const fontWeights = {
   700: '700',
   600: '600',
   500: '500'

src/theme/variables/index.ts

@@ -1,9 +1,10 @@
 export { colors } from './colors'
 export { screens } from './screens'
-export { spacing } from './spacing'
+export { spacings } from './spacings'
 export { borderRadius } from './borderRadius'
 export { zIndex } from './zIndex'
-export { fontWeight } from './fontWeight'
-export { boxShadow } from './boxShadow'
-export { fontSize } from './fontSize'
+export { fontWeights } from './fontWeights'
+export { boxShadows } from './boxShadows'
+export { fontSizes } from './fontSizes'
 export { keyframes } from './keyframes'
+export { lineHeights } from './lineHights'

src/theme/variables/lineHights.ts

@@ -0,0 +1,13 @@
+export const lineHeights = {
+  100: '1',
+  110: '1.1',
+  120: '1.2',
+  130: '1.3',
+  140: '1.4',
+  150: '1.5',
+  160: '1.6',
+  170: '1.7',
+  180: '1.8',
+  190: '1.9',
+  200: '2'
+}

src/theme/variables/spacing.ts → src/theme/variables/spacings.ts

@@ -1,4 +1,4 @@
-export const spacing = {
+export const spacings = {
   0: '0px',
   1: '1px',
   2: '2px',

tailwind.config.ts

@@ -1,50 +1,50 @@
 import defaultTheme from 'tailwindcss/defaultTheme'
 import type { Config } from 'tailwindcss'
 
-import containerQueries from '@tailwindcss/container-queries'
-
 import {
   colors,
   zIndex,
-  spacing,
-  fontWeight,
-  fontSize,
-  boxShadow,
+  spacings,
+  fontWeights,
+  fontSizes,
+  boxShadows,
   borderRadius,
   screens,
   keyframes
 } from './src/theme/variables'
 import { utilities } from './src/theme/utilities'
 import { components } from './src/theme/components'
 
-export default {
+const config: Config = {
   content: [
     './src/app/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
+    screens,
+    colors,
+    zIndex,
+    borderRadius,
+    fontWeight: fontWeights,
+    fontSize: fontSizes,
     extend: {
-      width: { ...defaultTheme.width, ...spacing },
-      height: { ...defaultTheme.height, ...spacing },
-      screens,
-      spacing: { ...defaultTheme.spacing, ...spacing },
-      colors,
-      borderRadius: { ...defaultTheme.borderRadius, ...borderRadius },
-      borderWidth: { ...defaultTheme.borderWidth, ...spacing },
-      zIndex: { ...defaultTheme.zIndex, ...zIndex },
-      fontWeight: { ...defaultTheme.fontWeight, ...fontWeight },
-      boxShadow: { ...defaultTheme.boxShadow, ...boxShadow },
-      fontSize,
+      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: {
         sans: 'var(--font-quicksand)'
       },
       aspectRatio: {
         ...defaultTheme.aspectRatio,
         '600/317': '600/317',
         '10/7': '10/7'
-      },
-      keyframes: { ...defaultTheme.keyframes, ...keyframes }
+      }
     }
   },
-  plugins: [containerQueries, ...components, ...utilities]
-} satisfies Config
+  plugins: [...components, ...utilities]
+}
+
+export default config

tsconfig.json

@@ -44,5 +44,5 @@
     "src/@types/**/*.d.ts",
     "./vitest.setup.ts"
   ],
-  "exclude": ["node_modules", ".next", "src/**/*.js"]
+  "exclude": ["node_modules", ".next"]
 }

yarn.lock

@@ -1842,11 +1842,6 @@
   resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
   integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
 
-"@tailwindcss/container-queries@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz#9a759ce2cb8736a4c6a0cb93aeb740573a731974"
-  integrity sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==
-
 "@testing-library/dom@^9.0.0", "@testing-library/dom@^9.3.4":
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"