diff --git a/colors.js b/colors.js index 4f94e2c2b52e..f8797e774304 100644 --- a/colors.js +++ b/colors.js @@ -1,146 +1,149 @@ -let warned = false +let warned = [] + +function warn({ version, from, to }) { + if (!warned.includes(from)) { + console.log(`warn - As of Tailwind CSS ${version}, \`${from}\` has been renamed to \`${to}\`.`) + console.log('warn - Please update your color palette to eliminate this warning.') + warned.push(from) + } +} module.exports = { + transparent: 'transparent', + current: 'currentColor', black: '#000', white: '#fff', - rose: { - 50: '#fff1f2', - 100: '#ffe4e6', - 200: '#fecdd3', - 300: '#fda4af', - 400: '#fb7185', - 500: '#f43f5e', - 600: '#e11d48', - 700: '#be123c', - 800: '#9f1239', - 900: '#881337', + slate: { + 50: '#f8fafc', + 100: '#f1f5f9', + 200: '#e2e8f0', + 300: '#cbd5e1', + 400: '#94a3b8', + 500: '#64748b', + 600: '#475569', + 700: '#334155', + 800: '#1e293b', + 900: '#0f172a', }, - pink: { - 50: '#fdf2f8', - 100: '#fce7f3', - 200: '#fbcfe8', - 300: '#f9a8d4', - 400: '#f472b6', - 500: '#ec4899', - 600: '#db2777', - 700: '#be185d', - 800: '#9d174d', - 900: '#831843', + gray: { + 50: '#f9fafb', + 100: '#f3f4f6', + 200: '#e5e7eb', + 300: '#d1d5db', + 400: '#9ca3af', + 500: '#6b7280', + 600: '#4b5563', + 700: '#374151', + 800: '#1f2937', + 900: '#111827', }, - fuchsia: { - 50: '#fdf4ff', - 100: '#fae8ff', - 200: '#f5d0fe', - 300: '#f0abfc', - 400: '#e879f9', - 500: '#d946ef', - 600: '#c026d3', - 700: '#a21caf', - 800: '#86198f', - 900: '#701a75', + zinc: { + 50: '#fafafa', + 100: '#f4f4f5', + 200: '#e4e4e7', + 300: '#d4d4d8', + 400: '#a1a1aa', + 500: '#71717a', + 600: '#52525b', + 700: '#3f3f46', + 800: '#27272a', + 900: '#18181b', }, - purple: { - 50: '#faf5ff', - 100: '#f3e8ff', - 200: '#e9d5ff', - 300: '#d8b4fe', - 400: '#c084fc', - 500: '#a855f7', - 600: '#9333ea', - 700: '#7e22ce', - 800: '#6b21a8', - 900: '#581c87', + neutral: { + 50: '#fafafa', + 100: '#f5f5f5', + 200: '#e5e5e5', + 300: '#d4d4d4', + 400: '#a3a3a3', + 500: '#737373', + 600: '#525252', + 700: '#404040', + 800: '#262626', + 900: '#171717', }, - violet: { - 50: '#f5f3ff', - 100: '#ede9fe', - 200: '#ddd6fe', - 300: '#c4b5fd', - 400: '#a78bfa', - 500: '#8b5cf6', - 600: '#7c3aed', - 700: '#6d28d9', - 800: '#5b21b6', - 900: '#4c1d95', + stone: { + 50: '#fafaf9', + 100: '#f5f5f4', + 200: '#e7e5e4', + 300: '#d6d3d1', + 400: '#a8a29e', + 500: '#78716c', + 600: '#57534e', + 700: '#44403c', + 800: '#292524', + 900: '#1c1917', }, - indigo: { - 50: '#eef2ff', - 100: '#e0e7ff', - 200: '#c7d2fe', - 300: '#a5b4fc', - 400: '#818cf8', - 500: '#6366f1', - 600: '#4f46e5', - 700: '#4338ca', - 800: '#3730a3', - 900: '#312e81', + red: { + 50: '#fef2f2', + 100: '#fee2e2', + 200: '#fecaca', + 300: '#fca5a5', + 400: '#f87171', + 500: '#ef4444', + 600: '#dc2626', + 700: '#b91c1c', + 800: '#991b1b', + 900: '#7f1d1d', }, - blue: { - 50: '#eff6ff', - 100: '#dbeafe', - 200: '#bfdbfe', - 300: '#93c5fd', - 400: '#60a5fa', - 500: '#3b82f6', - 600: '#2563eb', - 700: '#1d4ed8', - 800: '#1e40af', - 900: '#1e3a8a', + orange: { + 50: '#fff7ed', + 100: '#ffedd5', + 200: '#fed7aa', + 300: '#fdba74', + 400: '#fb923c', + 500: '#f97316', + 600: '#ea580c', + 700: '#c2410c', + 800: '#9a3412', + 900: '#7c2d12', }, - get lightBlue() { - if (!warned) { - console.log('warn - As of Tailwind CSS v2.2, `lightBlue` has been renamed to `sky`.') - console.log('warn - Please update your color palette to eliminate this warning.') - warned = true - } - return { - 50: '#f0f9ff', - 100: '#e0f2fe', - 200: '#bae6fd', - 300: '#7dd3fc', - 400: '#38bdf8', - 500: '#0ea5e9', - 600: '#0284c7', - 700: '#0369a1', - 800: '#075985', - 900: '#0c4a6e', - } + amber: { + 50: '#fffbeb', + 100: '#fef3c7', + 200: '#fde68a', + 300: '#fcd34d', + 400: '#fbbf24', + 500: '#f59e0b', + 600: '#d97706', + 700: '#b45309', + 800: '#92400e', + 900: '#78350f', }, - sky: { - 50: '#f0f9ff', - 100: '#e0f2fe', - 200: '#bae6fd', - 300: '#7dd3fc', - 400: '#38bdf8', - 500: '#0ea5e9', - 600: '#0284c7', - 700: '#0369a1', - 800: '#075985', - 900: '#0c4a6e', + yellow: { + 50: '#fefce8', + 100: '#fef9c3', + 200: '#fef08a', + 300: '#fde047', + 400: '#facc15', + 500: '#eab308', + 600: '#ca8a04', + 700: '#a16207', + 800: '#854d0e', + 900: '#713f12', }, - cyan: { - 50: '#ecfeff', - 100: '#cffafe', - 200: '#a5f3fc', - 300: '#67e8f9', - 400: '#22d3ee', - 500: '#06b6d4', - 600: '#0891b2', - 700: '#0e7490', - 800: '#155e75', - 900: '#164e63', + lime: { + 50: '#f7fee7', + 100: '#ecfccb', + 200: '#d9f99d', + 300: '#bef264', + 400: '#a3e635', + 500: '#84cc16', + 600: '#65a30d', + 700: '#4d7c0f', + 800: '#3f6212', + 900: '#365314', }, - teal: { - 50: '#f0fdfa', - 100: '#ccfbf1', - 200: '#99f6e4', - 300: '#5eead4', - 400: '#2dd4bf', - 500: '#14b8a6', - 600: '#0d9488', - 700: '#0f766e', - 800: '#115e59', - 900: '#134e4a', + green: { + 50: '#f0fdf4', + 100: '#dcfce7', + 200: '#bbf7d0', + 300: '#86efac', + 400: '#4ade80', + 500: '#22c55e', + 600: '#16a34a', + 700: '#15803d', + 800: '#166534', + 900: '#14532d', }, emerald: { 50: '#ecfdf5', @@ -154,136 +157,144 @@ module.exports = { 800: '#065f46', 900: '#064e3b', }, - green: { - 50: '#f0fdf4', - 100: '#dcfce7', - 200: '#bbf7d0', - 300: '#86efac', - 400: '#4ade80', - 500: '#22c55e', - 600: '#16a34a', - 700: '#15803d', - 800: '#166534', - 900: '#14532d', + teal: { + 50: '#f0fdfa', + 100: '#ccfbf1', + 200: '#99f6e4', + 300: '#5eead4', + 400: '#2dd4bf', + 500: '#14b8a6', + 600: '#0d9488', + 700: '#0f766e', + 800: '#115e59', + 900: '#134e4a', }, - lime: { - 50: '#f7fee7', - 100: '#ecfccb', - 200: '#d9f99d', - 300: '#bef264', - 400: '#a3e635', - 500: '#84cc16', - 600: '#65a30d', - 700: '#4d7c0f', - 800: '#3f6212', - 900: '#365314', + cyan: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', }, - yellow: { - 50: '#fefce8', - 100: '#fef9c3', - 200: '#fef08a', - 300: '#fde047', - 400: '#facc15', - 500: '#eab308', - 600: '#ca8a04', - 700: '#a16207', - 800: '#854d0e', - 900: '#713f12', + sky: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 200: '#bae6fd', + 300: '#7dd3fc', + 400: '#38bdf8', + 500: '#0ea5e9', + 600: '#0284c7', + 700: '#0369a1', + 800: '#075985', + 900: '#0c4a6e', }, - amber: { - 50: '#fffbeb', - 100: '#fef3c7', - 200: '#fde68a', - 300: '#fcd34d', - 400: '#fbbf24', - 500: '#f59e0b', - 600: '#d97706', - 700: '#b45309', - 800: '#92400e', - 900: '#78350f', + blue: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#3b82f6', + 600: '#2563eb', + 700: '#1d4ed8', + 800: '#1e40af', + 900: '#1e3a8a', }, - orange: { - 50: '#fff7ed', - 100: '#ffedd5', - 200: '#fed7aa', - 300: '#fdba74', - 400: '#fb923c', - 500: '#f97316', - 600: '#ea580c', - 700: '#c2410c', - 800: '#9a3412', - 900: '#7c2d12', + indigo: { + 50: '#eef2ff', + 100: '#e0e7ff', + 200: '#c7d2fe', + 300: '#a5b4fc', + 400: '#818cf8', + 500: '#6366f1', + 600: '#4f46e5', + 700: '#4338ca', + 800: '#3730a3', + 900: '#312e81', }, - red: { - 50: '#fef2f2', - 100: '#fee2e2', - 200: '#fecaca', - 300: '#fca5a5', - 400: '#f87171', - 500: '#ef4444', - 600: '#dc2626', - 700: '#b91c1c', - 800: '#991b1b', - 900: '#7f1d1d', + violet: { + 50: '#f5f3ff', + 100: '#ede9fe', + 200: '#ddd6fe', + 300: '#c4b5fd', + 400: '#a78bfa', + 500: '#8b5cf6', + 600: '#7c3aed', + 700: '#6d28d9', + 800: '#5b21b6', + 900: '#4c1d95', }, - warmGray: { - 50: '#fafaf9', - 100: '#f5f5f4', - 200: '#e7e5e4', - 300: '#d6d3d1', - 400: '#a8a29e', - 500: '#78716c', - 600: '#57534e', - 700: '#44403c', - 800: '#292524', - 900: '#1c1917', + purple: { + 50: '#faf5ff', + 100: '#f3e8ff', + 200: '#e9d5ff', + 300: '#d8b4fe', + 400: '#c084fc', + 500: '#a855f7', + 600: '#9333ea', + 700: '#7e22ce', + 800: '#6b21a8', + 900: '#581c87', }, - trueGray: { - 50: '#fafafa', - 100: '#f5f5f5', - 200: '#e5e5e5', - 300: '#d4d4d4', - 400: '#a3a3a3', - 500: '#737373', - 600: '#525252', - 700: '#404040', - 800: '#262626', - 900: '#171717', + fuchsia: { + 50: '#fdf4ff', + 100: '#fae8ff', + 200: '#f5d0fe', + 300: '#f0abfc', + 400: '#e879f9', + 500: '#d946ef', + 600: '#c026d3', + 700: '#a21caf', + 800: '#86198f', + 900: '#701a75', }, - gray: { - 50: '#fafafa', - 100: '#f4f4f5', - 200: '#e4e4e7', - 300: '#d4d4d8', - 400: '#a1a1aa', - 500: '#71717a', - 600: '#52525b', - 700: '#3f3f46', - 800: '#27272a', - 900: '#18181b', + pink: { + 50: '#fdf2f8', + 100: '#fce7f3', + 200: '#fbcfe8', + 300: '#f9a8d4', + 400: '#f472b6', + 500: '#ec4899', + 600: '#db2777', + 700: '#be185d', + 800: '#9d174d', + 900: '#831843', }, - coolGray: { - 50: '#f9fafb', - 100: '#f3f4f6', - 200: '#e5e7eb', - 300: '#d1d5db', - 400: '#9ca3af', - 500: '#6b7280', - 600: '#4b5563', - 700: '#374151', - 800: '#1f2937', - 900: '#111827', + rose: { + 50: '#fff1f2', + 100: '#ffe4e6', + 200: '#fecdd3', + 300: '#fda4af', + 400: '#fb7185', + 500: '#f43f5e', + 600: '#e11d48', + 700: '#be123c', + 800: '#9f1239', + 900: '#881337', }, - blueGray: { - 50: '#f8fafc', - 100: '#f1f5f9', - 200: '#e2e8f0', - 300: '#cbd5e1', - 400: '#94a3b8', - 500: '#64748b', - 600: '#475569', - 700: '#334155', - 800: '#1e293b', - 900: '#0f172a', + get lightBlue() { + warn({ version: 'v2.2', from: 'lightBlue', to: 'sky' }) + return this.sky + }, + get warmGray() { + warn({ version: 'v3.0', from: 'warmGray', to: 'stone' }) + return this.stone + }, + get trueGray() { + warn({ version: 'v3.0', from: 'trueGray', to: 'neutral' }) + return this.neutral + }, + get coolGray() { + warn({ version: 'v3.0', from: 'coolGray', to: 'gray' }) + return this.gray + }, + get blueGray() { + warn({ version: 'v3.0', from: 'blueGray', to: 'slate' }) + return this.slate }, } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 2230f16efb20..e4eb22b7ef82 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -1,5 +1,3 @@ -const colors = require('../colors') - module.exports = { content: [], presets: [], @@ -12,21 +10,34 @@ module.exports = { xl: '1280px', '2xl': '1536px', }, - colors: { - transparent: 'transparent', - current: 'currentColor', - + colors: ({ colors }) => ({ + transparent: colors.transparent, + current: colors.current, black: colors.black, white: colors.white, - gray: colors.coolGray, + slate: colors.slate, + gray: colors.gray, + zinc: colors.zinc, + neutral: colors.neutral, + stone: colors.stone, red: colors.red, - yellow: colors.amber, - green: colors.emerald, + orange: colors.orange, + amber: colors.amber, + yellow: colors.yellow, + lime: colors.lime, + green: colors.green, + emerald: colors.emerald, + teal: colors.teal, + cyan: colors.cyan, + sky: colors.sky, blue: colors.blue, indigo: colors.indigo, - purple: colors.violet, + violet: colors.violet, + purple: colors.purple, + fuchsia: colors.fuchsia, pink: colors.pink, - }, + rose: colors.rose, + }), spacing: { px: '1px', 0: '0px', diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index ab005dfe45b3..ad5ec5eb9e44 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -480,7 +480,7 @@ } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); + background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; @@ -493,8 +493,8 @@ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0)); } .via-purple-200 { - --tw-gradient-stops: var(--tw-gradient-from), #ddd6fe, - var(--tw-gradient-to, rgba(221, 214, 254, 0)); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, + var(--tw-gradient-to, rgba(233, 213, 255, 0)); } .to-blue-400 { --tw-gradient-to: #60a5fa; @@ -641,7 +641,7 @@ } .placeholder-green-300::placeholder { --tw-placeholder-opacity: 1; - color: rgba(110, 231, 183, var(--tw-placeholder-opacity)); + color: rgba(134, 239, 172, var(--tw-placeholder-opacity)); } .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index ffd0e7dc6d69..cfda4f5cc4eb 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -29,7 +29,7 @@ @media (min-width: 640px) { .apply-test { --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); + background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); } .apply-test:focus:nth-child(even) { --tw-bg-opacity: 1; @@ -83,7 +83,7 @@ @media (min-width: 640px) { .apply-with-existing:hover { --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); + background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); } } .multiple, @@ -117,7 +117,7 @@ } .dark .group:hover .apply-dark-group-example-a { --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); + background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); } @media (min-width: 640px) { @media (prefers-reduced-motion: no-preference) { @@ -292,7 +292,7 @@ div { } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); + background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); } .bg-opacity-50 { --tw-bg-opacity: 0.5; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 771694661428..c4d4fa05c410 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -399,7 +399,7 @@ } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgba(16, 185, 129, var(--tw-bg-opacity)); + background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; @@ -412,8 +412,8 @@ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0)); } .via-purple-200 { - --tw-gradient-stops: var(--tw-gradient-from), #ddd6fe, - var(--tw-gradient-to, rgba(221, 214, 254, 0)); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, + var(--tw-gradient-to, rgba(233, 213, 255, 0)); } .to-blue-400 { --tw-gradient-to: #60a5fa; @@ -560,7 +560,7 @@ } .placeholder-green-300::placeholder { --tw-placeholder-opacity: 1; - color: rgba(110, 231, 183, var(--tw-placeholder-opacity)); + color: rgba(134, 239, 172, var(--tw-placeholder-opacity)); } .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; diff --git a/tests/variants.test.css b/tests/variants.test.css index 666a15c96b18..56277cc51a47 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -15,7 +15,7 @@ } .first-line\:bg-yellow-300::first-line { --tw-bg-opacity: 1; - background-color: rgba(252, 211, 77, var(--tw-bg-opacity)); + background-color: rgba(253, 224, 71, var(--tw-bg-opacity)); } .first-line\:underline::first-line { text-decoration: underline;