Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue (complexity): Simplify tailwind.config #307

Open
AndlerRL opened this issue Aug 6, 2024 · 0 comments
Open

Issue (complexity): Simplify tailwind.config #307

AndlerRL opened this issue Aug 6, 2024 · 0 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@AndlerRL
Copy link
Contributor

AndlerRL commented Aug 6, 2024

          **issue (complexity):** Consider simplifying the configuration by removing redundancies and ensuring consistent naming.

The new code introduces several complexities that could be avoided. There are redundant and duplicated color definitions, inconsistent naming conventions, and unnecessary additions that increase the file size and make it harder to maintain. Simplifying the configuration by removing these redundancies and ensuring consistent naming would improve readability and maintainability. Here's a simplified version that maintains the same functionality:

const { default: flattenColorPalette } = require('tailwindcss/lib/util/flattenColorPalette');
const svgToDataUri = require('mini-svg-data-uri');
const colors = require('tailwindcss/colors');
const { fontFamily } = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}'
  ],
  theme: {
    screens: {
      '2xl': '1600px'
    },
    extend: {
      colors: {
        border: 'hsla(var(--border))',
        input: 'hsla(var(--input))',
        ring: 'hsla(var(--ring))',
        background: 'hsla(var(--background))',
        foreground: 'hsla(var(--foreground))',
        primary: {
          DEFAULT: 'hsla(var(--primary))',
          foreground: 'hsla(var(--primary-foreground))',
          100: '#D2F7DF',
          200: '#1ED761',
          300: '#78E7A0',
          400: '#4BDF81',
          500: '#1ED761',
          600: '#18AC4E',
          700: '#12813A',
          800: '#0C5627',
          900: '#062B13'
        },
        secondary: {
          DEFAULT: 'hsla(var(--secondary))',
          foreground: 'hsla(var(--secondary-foreground))',
          100: '#535461',
          200: '#040216',
          300: '#080821',
          400: '#F5F5F5',
          500: '#5361FF',
          600: '#9A9EFC'
        },
        tertiary: { blue: '#0000EE' },
        destructive: {
          DEFAULT: 'hsla(var(--destructive))',
          foreground: 'hsla(var(--destructive-foreground))'
        },
        success: {
          DEFAULT: 'hsla(var(--success))',
          foreground: 'hsla(var(--success-foreground))'
        },
        accent: {
          DEFAULT: 'hsla(var(--accent))',
          foreground: 'hsla(var(--accent-foreground))',
          secondary: 'hsla(var(--accent-secondary))'
        },
        popover: {
          DEFAULT: 'hsla(var(--popover))',
          foreground: 'hsla(var(--popover-foreground))'
        },
        card: {
          DEFAULT: 'hsla(var(--card))',
          foreground: 'hsla(var(--card-foreground))'
        },
        alert: {
          DEFAULT: "hsla(var(--alert))"
        },
        cornflowerblue: {
          100: "rgba(125, 129, 217, 0.2)",
          200: "rgba(125, 129, 217, 0.43)"
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
        cards: '12px',
        inputs: '8px',
        images: '30px',
        buttons: '5px',
        'inputs-shaped': '100px',
        'check-box': '4px'
      },
      fontFamily: {
        sans: ["Futura PT", ...fontFamily.sans],
        'futura-pt-bold': ['Futura PT Bold', 'sans-serif'],
        'futura-pt-condensed': ['Futura PT Heavy', 'sans-serif'],
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' }
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 }
        }
      }
    }
  }
};

This should make the code easier to maintain and understand.

Originally posted by @sourcery-ai[bot] in #306 (comment)

@AndlerRL AndlerRL changed the title **issue (complexity):** Simplify tailwind.config Issue (complexity): Simplify tailwind.config Aug 6, 2024
@AndlerRL AndlerRL added enhancement New feature or request help wanted Extra attention is needed labels Aug 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

1 participant