don't use tailwind directives in mantle.css (#112)

* remove tailwind from mantle.css

* do not use tailwind directives in mantle.css

Author: cody-dot-js

.storybook/preview.ts

@@ -2,6 +2,7 @@ import { withThemeByClassName } from "@storybook/addon-styling";
 import type { Preview } from "@storybook/react";
 import { theme } from "../components/theme-provider";
 import "../assets/mantle.css";
+import "tailwindcss/tailwind.css";
 
 const preview: Preview = {
 	parameters: {

app/root.tsx

@@ -2,12 +2,14 @@ import { PreventWrongThemeFlash, ThemeProvider } from "@/theme-provider";
 import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/node";
 import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from "@remix-run/react";
+import tailwind from "tailwindcss/tailwind.css";
 import mantleCss from "../assets/mantle.css";
 import { Layout } from "./components/layout";
 
 export const links: LinksFunction = () => [
 	...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
 	{ rel: "stylesheet", href: mantleCss },
+	{ rel: "stylesheet", href: tailwind },
 ];
 
 export default function App() {

assets/mantle.css

@@ -1,9 +1,5 @@
 @import url("https://cdn.ngrok.com/static/fonts/fonts.css");
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 :root {
 	/* ngrok custom blue (600 is current button)
 	* These are required as they are referenced by both light and dark modes.
@@ -1095,35 +1091,17 @@
 	--button: var(--white);
 }
 
-@layer base {
-	/**
- * provide an a11y escape hatch for those that prefer less motion
- */
-	@media (prefers-reduced-motion: reduce) {
-		*,
-		*::before,
-		*::after {
-			animation-duration: 0.01ms !important;
-			animation-iteration-count: 1 !important;
-			transition-duration: 0.01ms !important;
-			scroll-behavior: auto !important;
-		}
-	}
+.light {
+	color-scheme: light;
 }
-
-@layer utilities {
-	.light {
-		color-scheme: light;
-	}
-	.dark {
-		color-scheme: dark;
-	}
-	.light-high-contrast {
-		color-scheme: light;
-	}
-	.dark-high-contrast {
-		color-scheme: dark;
-	}
+.dark {
+	color-scheme: dark;
+}
+.light-high-contrast {
+	color-scheme: light;
+}
+.dark-high-contrast {
+	color-scheme: dark;
 }
 
 /**
@@ -1192,12 +1170,6 @@
 	font-style: italic;
 }
 
-@layer base {
-	body {
-		@apply bg-white text-gray-900;
-	}
-}
-
 .scrollbar::-webkit-scrollbar {
 	width: 0.5rem;
 	height: 0.5rem;
@@ -1223,3 +1195,7 @@
 	scrollbar-color: hsl(var(--gray-600) / 0.5) transparent;
 	scrollbar-width: thin;
 }
+
+body {
+	@apply bg-white text-gray-900;
+}

package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -70,25 +70,25 @@
     "@parcel/transformer-typescript-types": "2.11.0",
     "@remix-run/dev": "2.5.1",
     "@remix-run/eslint-config": "2.5.1",
-    "@storybook/addon-essentials": "7.6.11",
-    "@storybook/addon-interactions": "7.6.11",
-    "@storybook/addon-links": "7.6.11",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-interactions": "7.6.12",
+    "@storybook/addon-links": "7.6.12",
     "@storybook/addon-onboarding": "1.0.11",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/blocks": "7.6.11",
-    "@storybook/builder-vite": "7.6.11",
-    "@storybook/react": "7.6.11",
-    "@storybook/react-vite": "7.6.11",
+    "@storybook/blocks": "7.6.12",
+    "@storybook/builder-vite": "7.6.12",
+    "@storybook/react": "7.6.12",
+    "@storybook/react-vite": "7.6.12",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/react": "14.2.0",
     "@testing-library/user-event": "14.5.2",
-    "@types/node": "20.11.10",
+    "@types/node": "20.11.16",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.51",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
-    "@vitejs/plugin-react-swc": "3.5.0",
+    "@vitejs/plugin-react-swc": "3.6.0",
     "@vitest/ui": "1.2.2",
     "autoprefixer": "10.4.17",
     "browserslist": "4.22.3",
@@ -107,7 +107,7 @@
     "prettier-plugin-tailwindcss": "0.5.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.11",
+    "storybook": "7.6.12",
     "tailwindcss": "3.4.1",
     "tailwindcss-animate": "1.0.7",
     "tsx": "4.7.0",