From 7099d08355924c7d6524451f87e57ac0ee56366d Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Wed, 22 Jun 2022 17:19:54 +1000 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Remove=20opacity=20function=20fr?= =?UTF-8?q?om=20Tailwind=20config?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 176 +++++++++++++++++++++------------------------ 1 file changed, 83 insertions(+), 93 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 79e53473..6c3b01f6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,14 +1,3 @@ -const colors = require("tailwindcss/colors"); - -function varWithOpacity(variable) { - return ({ opacityValue }) => { - if (opacityValue === undefined) { - return `rgb(var(${variable}))`; - } - return `rgba(var(${variable}), ${opacityValue})`; - }; -} - module.exports = { content: [ "./layouts/**/*.html", @@ -18,89 +7,90 @@ module.exports = { ], darkMode: "class", theme: { - extend: { - colors: { - neutral: { - DEFAULT: varWithOpacity("--color-neutral"), - 50: varWithOpacity("--color-neutral-50"), - 100: varWithOpacity("--color-neutral-100"), - 200: varWithOpacity("--color-neutral-200"), - 300: varWithOpacity("--color-neutral-300"), - 400: varWithOpacity("--color-neutral-400"), - 500: varWithOpacity("--color-neutral-500"), - 600: varWithOpacity("--color-neutral-600"), - 700: varWithOpacity("--color-neutral-700"), - 800: varWithOpacity("--color-neutral-800"), - 900: varWithOpacity("--color-neutral-900"), - }, - primary: { - 50: varWithOpacity("--color-primary-50"), - 100: varWithOpacity("--color-primary-100"), - 200: varWithOpacity("--color-primary-200"), - 300: varWithOpacity("--color-primary-300"), - 400: varWithOpacity("--color-primary-400"), - 500: varWithOpacity("--color-primary-500"), - 600: varWithOpacity("--color-primary-600"), - 700: varWithOpacity("--color-primary-700"), - 800: varWithOpacity("--color-primary-800"), - 900: varWithOpacity("--color-primary-900"), - }, - secondary: { - 50: varWithOpacity("--color-secondary-50"), - 100: varWithOpacity("--color-secondary-100"), - 200: varWithOpacity("--color-secondary-200"), - 300: varWithOpacity("--color-secondary-300"), - 400: varWithOpacity("--color-secondary-400"), - 500: varWithOpacity("--color-secondary-500"), - 600: varWithOpacity("--color-secondary-600"), - 700: varWithOpacity("--color-secondary-700"), - 800: varWithOpacity("--color-secondary-800"), - 900: varWithOpacity("--color-secondary-900"), - }, + colors: { + transparent: "transparent", + neutral: { + DEFAULT: "rgba(var(--color-neutral), )", + 50: "rgba(var(--color-neutral-50), )", + 100: "rgba(var(--color-neutral-100), )", + 200: "rgba(var(--color-neutral-200), )", + 300: "rgba(var(--color-neutral-300), )", + 400: "rgba(var(--color-neutral-400), )", + 500: "rgba(var(--color-neutral-500), )", + 600: "rgba(var(--color-neutral-600), )", + 700: "rgba(var(--color-neutral-700), )", + 800: "rgba(var(--color-neutral-800), )", + 900: "rgba(var(--color-neutral-900), )", }, - typography: (theme) => ({ + primary: { + 50: "rgba(var(--color-primary-50), )", + 100: "rgba(var(--color-primary-100), )", + 200: "rgba(var(--color-primary-200), )", + 300: "rgba(var(--color-primary-300), )", + 400: "rgba(var(--color-primary-400), )", + 500: "rgba(var(--color-primary-500), )", + 600: "rgba(var(--color-primary-600), )", + 700: "rgba(var(--color-primary-700), )", + 800: "rgba(var(--color-primary-800), )", + 900: "rgba(var(--color-primary-900), )", + }, + secondary: { + 50: "rgba(var(--color-secondary-50), )", + 100: "rgba(var(--color-secondary-100), )", + 200: "rgba(var(--color-secondary-200), )", + 300: "rgba(var(--color-secondary-300), )", + 400: "rgba(var(--color-secondary-400), )", + 500: "rgba(var(--color-secondary-500), )", + 600: "rgba(var(--color-secondary-600), )", + 700: "rgba(var(--color-secondary-700), )", + 800: "rgba(var(--color-secondary-800), )", + 900: "rgba(var(--color-secondary-900), )", + }, + }, + extend: { + typography: ({ theme }) => ({ DEFAULT: { css: { - "--tw-prose-body": theme("colors.neutral.700"), - "--tw-prose-headings": theme("colors.neutral.800"), - "--tw-prose-lead": theme("colors.neutral.500"), - "--tw-prose-links": theme("colors.primary.700"), - "--tw-prose-bold": theme("colors.neutral.900"), - "--tw-prose-counters": theme("colors.neutral.800"), - "--tw-prose-bullets": theme("colors.neutral.500"), - "--tw-prose-hr": theme("colors.neutral.200"), - "--tw-prose-quotes": theme("colors.neutral.700"), - "--tw-prose-quote-borders": theme("colors.primary.200"), - "--tw-prose-captions": theme("colors.neutral.500"), - "--tw-prose-code": theme("colors.secondary.700"), - "--tw-prose-pre-code": theme("colors.neutral.700"), - "--tw-prose-pre-bg": theme("colors.neutral.50"), - "--tw-prose-th-borders": theme("colors.neutral.500"), - "--tw-prose-td-borders": theme("colors.neutral.300"), - "--tw-prose-invert-body": theme("colors.neutral.300"), - "--tw-prose-invert-headings": theme("colors.neutral.50"), - "--tw-prose-invert-lead": theme("colors.neutral.500"), - "--tw-prose-invert-links": theme("colors.primary.400"), - "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT"), - "--tw-prose-invert-counters": theme("colors.neutral.400"), - "--tw-prose-invert-bullets": theme("colors.neutral.600"), - "--tw-prose-invert-hr": theme("colors.neutral.500"), - "--tw-prose-invert-quotes": theme("colors.neutral.200"), - "--tw-prose-invert-quote-borders": theme("colors.primary.900"), - "--tw-prose-invert-captions": theme("colors.neutral.400"), - "--tw-prose-invert-code": theme("colors.secondary.400"), - "--tw-prose-invert-pre-code": theme("colors.neutral.200"), - "--tw-prose-invert-pre-bg": theme("colors.neutral.700"), - "--tw-prose-invert-th-borders": theme("colors.neutral.500"), - "--tw-prose-invert-td-borders": theme("colors.neutral.700"), + "--tw-prose-body": theme("colors.neutral.700 / 1"), + "--tw-prose-headings": theme("colors.neutral.800 / 1"), + "--tw-prose-lead": theme("colors.neutral.500 / 1"), + "--tw-prose-links": theme("colors.primary.700 / 1"), + "--tw-prose-bold": theme("colors.neutral.900 / 1"), + "--tw-prose-counters": theme("colors.neutral.800 / 1"), + "--tw-prose-bullets": theme("colors.neutral.500 / 1"), + "--tw-prose-hr": theme("colors.neutral.200 / 1"), + "--tw-prose-quotes": theme("colors.neutral.700 / 1"), + "--tw-prose-quote-borders": theme("colors.primary.200 / 1"), + "--tw-prose-captions": theme("colors.neutral.500 / 1"), + "--tw-prose-code": theme("colors.secondary.700 / 1"), + "--tw-prose-pre-code": theme("colors.neutral.700 / 1"), + "--tw-prose-pre-bg": theme("colors.neutral.50 / 1"), + "--tw-prose-th-borders": theme("colors.neutral.500 / 1"), + "--tw-prose-td-borders": theme("colors.neutral.300 / 1"), + "--tw-prose-invert-body": theme("colors.neutral.300 / 1"), + "--tw-prose-invert-headings": theme("colors.neutral.50 / 1"), + "--tw-prose-invert-lead": theme("colors.neutral.500 / 1"), + "--tw-prose-invert-links": theme("colors.primary.400 / 1"), + "--tw-prose-invert-bold": theme("colors.neutral.DEFAULT / 1"), + "--tw-prose-invert-counters": theme("colors.neutral.400 / 1"), + "--tw-prose-invert-bullets": theme("colors.neutral.600 / 1"), + "--tw-prose-invert-hr": theme("colors.neutral.500 / 1"), + "--tw-prose-invert-quotes": theme("colors.neutral.200 / 1"), + "--tw-prose-invert-quote-borders": theme("colors.primary.900 / 1"), + "--tw-prose-invert-captions": theme("colors.neutral.400 / 1"), + "--tw-prose-invert-code": theme("colors.secondary.400 / 1"), + "--tw-prose-invert-pre-code": theme("colors.neutral.200 / 1"), + "--tw-prose-invert-pre-bg": theme("colors.neutral.700 / 1"), + "--tw-prose-invert-th-borders": theme("colors.neutral.500 / 1"), + "--tw-prose-invert-td-borders": theme("colors.neutral.700 / 1"), a: { textDecoration: "underline", - textDecorationColor: theme("colors.primary.300"), + textDecorationColor: theme("colors.primary.300 / 1"), fontWeight: "500", "&:hover": { - color: theme("colors.neutral.DEFAULT"), + color: theme("colors.neutral.DEFAULT / 1"), textDecoration: "none", - backgroundColor: theme("colors.primary.600"), + backgroundColor: theme("colors.primary.600 / 1"), borderRadius: "0.09rem", }, }, @@ -108,15 +98,15 @@ module.exports = { color: "var(--tw-prose-code)", }, kbd: { - backgroundColor: theme("colors.neutral.200"), + backgroundColor: theme("colors.neutral.200 / 1"), padding: "0.1rem 0.4rem", borderRadius: "0.25rem", fontSize: "0.9rem", fontWeight: "600", }, mark: { - color: theme("colors.neutral.800"), - backgroundColor: theme("colors.secondary.200"), + color: theme("colors.neutral.800 / 1"), + backgroundColor: theme("colors.secondary.200 / 1"), padding: "0.1rem 0.2rem", borderRadius: "0.12rem", }, @@ -125,14 +115,14 @@ module.exports = { invert: { css: { a: { - textDecorationColor: theme("colors.neutral.600"), + textDecorationColor: theme("colors.neutral.600 / 1"), }, kbd: { - color: theme("colors.neutral.200"), - backgroundColor: theme("colors.neutral.700"), + color: theme("colors.neutral.200 / 1"), + backgroundColor: theme("colors.neutral.700 / 1"), }, mark: { - backgroundColor: theme("colors.secondary.400"), + backgroundColor: theme("colors.secondary.400 / 1"), }, }, },