because of you, webpack (#114)

Author: cody-dot-js

assets/mantle.css

@@ -1,5 +1,9 @@
 @import url("https://cdn.ngrok.com/static/fonts/fonts.css");
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /**
  * provide an a11y escape hatch for those that prefer less motion
  */
@@ -1105,19 +1109,6 @@
 	--button: var(--white);
 }
 
-.light {
-	color-scheme: light;
-}
-.dark {
-	color-scheme: dark;
-}
-.light-high-contrast {
-	color-scheme: light;
-}
-.dark-high-contrast {
-	color-scheme: dark;
-}
-
 /**
 	* prism.js default theme for JavaScript, CSS and HTML
 	* Based on dabblet (http://dabblet.com)
@@ -1184,32 +1175,49 @@
 	font-style: italic;
 }
 
-.scrollbar::-webkit-scrollbar {
-	width: 0.5rem;
-	height: 0.5rem;
-	background-color: transparent;
+@layer base {
+	body {
+		@apply bg-white text-gray-900;
+	}
 }
 
-.scrollbar::-webkit-scrollbar-track {
-	border-radius: 0.5rem;
-	background-color: transparent;
-}
+@layer utilities {
+	.light {
+		color-scheme: light;
+	}
+	.dark {
+		color-scheme: dark;
+	}
+	.light-high-contrast {
+		color-scheme: light;
+	}
+	.dark-high-contrast {
+		color-scheme: dark;
+	}
 
-.scrollbar::-webkit-scrollbar-thumb {
-	border-radius: 0.5rem;
-	background-color: hsl(var(--gray-800) / 0.5);
-}
+	.scrollbar::-webkit-scrollbar {
+		width: 0.5rem;
+		height: 0.5rem;
+		background-color: transparent;
+	}
 
-.scrollbar::-webkit-scrollbar-corner {
-	background-color: transparent;
-	border-color: transparent;
-}
+	.scrollbar::-webkit-scrollbar-track {
+		border-radius: 0.5rem;
+		background-color: transparent;
+	}
 
-.scrollbar {
-	scrollbar-color: hsl(var(--gray-600) / 0.5) transparent;
-	scrollbar-width: thin;
-}
+	.scrollbar::-webkit-scrollbar-thumb {
+		border-radius: 0.5rem;
+		background-color: hsl(var(--gray-800) / 0.5);
+	}
 
-body {
-	@apply bg-white text-gray-900;
+	.scrollbar::-webkit-scrollbar-corner {
+		background-color: transparent;
+		border-color: transparent;
+	}
+
+	.scrollbar {
+		scrollbar-color: hsl(var(--gray-600) / 0.5) transparent;
+		scrollbar-width: thin;
+	}
 }

package.json

@@ -3,13 +3,13 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/ngrok-oss/mantle"
   },
-  "sideEffects": false,
+  "sideEffects": ["*.css"],
   "type": "module",
   "browserslist": [
     "last 2 years, not dead, > 0.2%"
@@ -80,7 +80,7 @@
     "@storybook/react": "7.6.12",
     "@storybook/react-vite": "7.6.12",
     "@storybook/testing-library": "0.2.2",
-    "@testing-library/react": "14.2.0",
+    "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/node": "20.11.16",
     "@types/prismjs": "1.26.3",
@@ -100,7 +100,7 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
     "fast-glob": "3.3.2",
-    "jsdom": "23.2.0",
+    "jsdom": "24.0.0",
     "parcel": "2.11.0",
     "postcss": "8.4.33",
     "prettier": "3.2.4",