Skip to content

Commit

Permalink
Added Tailwind support for dark mode and deprecated the Tailwind UI p…
Browse files Browse the repository at this point in the history 
…lugin due to this issue: tailwindlabs/tailwindcss#2322
  • Loading branch information
Zaydek Michels-Gualtieri committed Sep 6, 2020
1 parent c8a19ee commit 9fbaefb
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 227 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,6 @@
"babel-jest": "latest",
"eslint": "latest",
"jest": "latest",
"tailwindcss": "^1.8.3"
"tailwindcss": "latest"
}
}
8 changes: 6 additions & 2 deletions src/pages/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@ const MemoSearch = React.memo(({ state, dispatch }) => {
</svg>
)}
</Apply>
{tooltip === "variant" && (
{true && (
<div className="pt-2 absolute right-0 top-full">
<LightTooltip apply="text-left whitespace-pre">
{/* <TextRow> */}
Expand Down Expand Up @@ -766,7 +766,11 @@ const IconApp = ({ state, dispatch }) => {
>
<div id="app-grid">
{state.search.results.map((each, x) => (
<article key={each.name} className="pb-full relative">
<article
key={each.name}
className="relative"
style={{ paddingBottom: "100%" }}
>
<div className="absolute inset-0">
<MemoIcon
variant={Object.keys(state.controls.variant).find(each => state.controls.variant[each] === true)}
Expand Down
217 changes: 104 additions & 113 deletions src/stylesheets/tailwindcss/experimental-color-vars.css
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,106 @@
html {
--transparent: transparent;
--white: #ffffff;
--black: #000000;
--gray-50: #f9fafb;
--gray-100: #f4f5f7;
--gray-200: #e5e7eb;
--gray-300: #d2d6dc;
--gray-400: #9fa6b2;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #252f3f;
--gray-900: #161e2e;
--cool-gray-50: #f8fafc;
--cool-gray-100: #f1f5f9;
--cool-gray-200: #e2e8f0;
--cool-gray-300: #cfd8e3;
--cool-gray-400: #97a6ba;
--cool-gray-500: #64748b;
--cool-gray-600: #475569;
--cool-gray-700: #364152;
--cool-gray-800: #27303f;
--cool-gray-900: #1a202e;
--red-50: #fdf2f2;
--red-100: #fde8e8;
--red-200: #fbd5d5;
--red-300: #f8b4b4;
--red-400: #f98080;
--red-500: #f05252;
--red-600: #e02424;
--red-700: #c81e1e;
--red-800: #9b1c1c;
--red-900: #771d1d;
--orange-50: #fff8f1;
--orange-100: #feecdc;
--orange-200: #fcd9bd;
--orange-300: #fdba8c;
--orange-400: #ff8a4c;
--orange-500: #ff5a1f;
--orange-600: #d03801;
--orange-700: #b43403;
--orange-800: #8a2c0d;
--orange-900: #73230d;
--yellow-50: #fdfdea;
--yellow-100: #fdf6b2;
--yellow-200: #fce96a;
--yellow-300: #faca15;
--yellow-400: #e3a008;
--yellow-500: #c27803;
--yellow-600: #9f580a;
--yellow-700: #8e4b10;
--yellow-800: #723b13;
--yellow-900: #633112;
--green-50: #f3faf7;
--green-100: #def7ec;
--green-200: #bcf0da;
--green-300: #84e1bc;
--green-400: #31c48d;
--green-500: #0e9f6e;
--green-600: #057a55;
--green-700: #046c4e;
--green-800: #03543f;
--green-900: #014737;
--teal-50: #edfafa;
--teal-100: #d5f5f6;
--teal-200: #afecef;
--teal-300: #7edce2;
--teal-400: #16bdca;
--teal-500: #0694a2;
--teal-600: #047481;
--teal-700: #036672;
--teal-800: #05505c;
--teal-900: #014451;
--blue-50: #ebf5ff;
--blue-100: #e1effe;
--blue-200: #c3ddfd;
--blue-300: #a4cafe;
--blue-400: #76a9fa;
--blue-500: #3f83f8;
--blue-600: #1c64f2;
--blue-700: #1a56db;
--blue-800: #1e429f;
--blue-900: #233876;
--indigo-50: #f0f5ff;
--indigo-100: #e5edff;
--indigo-200: #cddbfe;
--indigo-300: #b4c6fc;
--indigo-400: #8da2fb;
--indigo-500: #6875f5;
--indigo-600: #5850ec;
--indigo-700: #5145cd;
--indigo-800: #42389d;
--indigo-900: #362f78;
--purple-50: #f6f5ff;
--purple-100: #edebfe;
--purple-200: #dcd7fe;
--purple-300: #cabffd;
--purple-400: #ac94fa;
--purple-500: #9061f9;
--purple-600: #7e3af2;
--purple-700: #6c2bd9;
--purple-800: #5521b5;
--purple-900: #4a1d96;
--pink-50: #fdf2f8;
--pink-100: #fce8f3;
--pink-200: #fad1e8;
--pink-300: #f8b4d9;
--pink-400: #f17eb8;
--pink-500: #e74694;
--pink-600: #d61f69;
--pink-700: #bf125d;
--pink-800: #99154b;
--pink-900: #751a3d;
--transparent: transparent;
--currentColor: currentColor;
--black: #000000;
--white: #ffffff;
--gray-50: #f9fafb;
--gray-100: #f4f5f7;
--gray-200: #e5e7eb;
--gray-300: #d2d6dc;
--gray-400: #9fa6b2;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #252f3f;
--gray-900: #161e2e;
--red-50: #fdf2f2;
--red-100: #fde8e8;
--red-200: #fbd5d5;
--red-300: #f8b4b4;
--red-400: #f98080;
--red-500: #f05252;
--red-600: #e02424;
--red-700: #c81e1e;
--red-800: #9b1c1c;
--red-900: #771d1d;
--orange-50: #fff8f1;
--orange-100: #feecdc;
--orange-200: #fcd9bd;
--orange-300: #fdba8c;
--orange-400: #ff8a4c;
--orange-500: #ff5a1f;
--orange-600: #d03801;
--orange-700: #b43403;
--orange-800: #8a2c0d;
--orange-900: #73230d;
--yellow-50: #fdfdea;
--yellow-100: #fdf6b2;
--yellow-200: #fce96a;
--yellow-300: #faca15;
--yellow-400: #e3a008;
--yellow-500: #c27803;
--yellow-600: #9f580a;
--yellow-700: #8e4b10;
--yellow-800: #723b13;
--yellow-900: #633112;
--green-50: #f3faf7;
--green-100: #def7ec;
--green-200: #bcf0da;
--green-300: #84e1bc;
--green-400: #31c48d;
--green-500: #0e9f6e;
--green-600: #057a55;
--green-700: #046c4e;
--green-800: #03543f;
--green-900: #014737;
--teal-50: #edfafa;
--teal-100: #d5f5f6;
--teal-200: #afecef;
--teal-300: #7edce2;
--teal-400: #16bdca;
--teal-500: #0694a2;
--teal-600: #047481;
--teal-700: #036672;
--teal-800: #05505c;
--teal-900: #014451;
--blue-50: #ebf5ff;
--blue-100: #e1effe;
--blue-200: #c3ddfd;
--blue-300: #a4cafe;
--blue-400: #76a9fa;
--blue-500: #3f83f8;
--blue-600: #1c64f2;
--blue-700: #1a56db;
--blue-800: #1e429f;
--blue-900: #233876;
--indigo-50: #f0f5ff;
--indigo-100: #e5edff;
--indigo-200: #cddbfe;
--indigo-300: #b4c6fc;
--indigo-400: #8da2fb;
--indigo-500: #6875f5;
--indigo-600: #5850ec;
--indigo-700: #5145cd;
--indigo-800: #42389d;
--indigo-900: #362f78;
--purple-50: #f6f5ff;
--purple-100: #edebfe;
--purple-200: #dcd7fe;
--purple-300: #cabffd;
--purple-400: #ac94fa;
--purple-500: #9061f9;
--purple-600: #7e3af2;
--purple-700: #6c2bd9;
--purple-800: #5521b5;
--purple-900: #4a1d96;
--pink-50: #fdf2f8;
--pink-100: #fce8f3;
--pink-200: #fad1e8;
--pink-300: #f8b4d9;
--pink-400: #f17eb8;
--pink-500: #e74694;
--pink-600: #d61f69;
--pink-700: #bf125d;
--pink-800: #99154b;
--pink-900: #751a3d;
}
100 changes: 0 additions & 100 deletions tailwind-defaultVariants.js
View file

This file was deleted.

24 changes: 14 additions & 10 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ const defaultTheme = require("tailwindcss/defaultTheme")
const tw = n => `${n * 4 / 16}rem`

module.exports = {
// dark: "media",
dark: "media",
experimental: {
// darkModeVariant: true,
darkModeVariant: true,
uniformColorPalette: true,
},
plugins: [require("@tailwindcss/ui")],
purge: ["./src/**/*.js"],
theme: {
extend: {
Expand All @@ -22,13 +21,12 @@ module.exports = {
},
boxShadow: {
"px": defaultTheme.boxShadow.xs,
"1": defaultTheme.boxShadow.sm,
"2": defaultTheme.boxShadow.default,
"3": defaultTheme.boxShadow.md,
"4": defaultTheme.boxShadow.lg,
"5": defaultTheme.boxShadow.xl,
"6": defaultTheme.boxShadow["2xl"],

"1": defaultTheme.boxShadow.sm,
"2": defaultTheme.boxShadow.default,
"3": defaultTheme.boxShadow.md,
"4": defaultTheme.boxShadow.lg,
"5": defaultTheme.boxShadow.xl,
"6": defaultTheme.boxShadow["2xl"],
"px-1": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.sm,
"px-2": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.default,
"px-3": defaultTheme.boxShadow.xs + ", " + defaultTheme.boxShadow.md,
Expand All @@ -42,6 +40,12 @@ module.exports = {
fontFamily: {
sans: [...defaultTheme.fontFamily.sans.slice(0, 3), "Inter", ...defaultTheme.fontFamily.sans.slice(3)],
},
inset: {
"-1/2": "-50%",
"1/2": "50%",
"full": "100%",
"-full": "-100%",
},
},
screens: {
sm: (640) + "px",
Expand Down
Loading

0 comments on commit 9fbaefb

Please sign in to comment.