make colors config complete (#116)

* make colors config complete

* bump deps + fmt

Author: cody-dot-js

components/code-block/index.tsx

@@ -220,7 +220,7 @@ const CodeBlockCopyButton = forwardRef<HTMLButtonElement, CodeBlockCopyButtonPro
 				className={cx(
 					"absolute right-3 top-3 z-10 flex h-7 w-7 items-center justify-center rounded-sm border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_hsl(var(--gray-050)),1rem_0_0_-0.25rem_hsl(var(--gray-050))] hover:border-gray-400 hover:bg-gray-200 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-600/25",
 					copied &&
-						"border-transparent hover:border-transparent w-auto gap-1 bg-green-500 pl-2 pr-1.5 text-white hover:bg-green-500 focus:bg-green-500 focus-visible:border-green-600 focus-visible:ring-green-600/25",
+						"w-auto gap-1 border-transparent bg-green-500 pl-2 pr-1.5 text-white hover:border-transparent hover:bg-green-500 focus:bg-green-500 focus-visible:border-green-600 focus-visible:ring-green-600/25",
 					className,
 				)}
 				ref={ref}

package.json

@@ -51,10 +51,10 @@
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-slot": "1.0.2",
     "@radix-ui/react-tooltip": "1.0.7",
-    "@remix-run/css-bundle": "2.5.1",
-    "@remix-run/node": "2.5.1",
-    "@remix-run/react": "2.5.1",
-    "@remix-run/serve": "2.5.1",
+    "@remix-run/css-bundle": "2.6.0",
+    "@remix-run/node": "2.6.0",
+    "@remix-run/react": "2.6.0",
+    "@remix-run/serve": "2.6.0",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
@@ -64,12 +64,12 @@
     "tiny-invariant": "1.3.1"
   },
   "devDependencies": {
-    "@commander-js/extra-typings": "11.1.0",
+    "@commander-js/extra-typings": "12.0.0",
     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
     "@parcel/packager-ts": "2.11.0",
     "@parcel/transformer-typescript-types": "2.11.0",
-    "@remix-run/dev": "2.5.1",
-    "@remix-run/eslint-config": "2.5.1",
+    "@remix-run/dev": "2.6.0",
+    "@remix-run/eslint-config": "2.6.0",
     "@storybook/addon-essentials": "7.6.12",
     "@storybook/addon-interactions": "7.6.12",
     "@storybook/addon-links": "7.6.12",
@@ -84,15 +84,15 @@
     "@testing-library/user-event": "14.5.2",
     "@types/node": "20.11.16",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.51",
+    "@types/react": "18.2.53",
     "@types/react-dom": "18.2.18",
     "@typescript-eslint/eslint-plugin": "6.20.0",
     "@typescript-eslint/parser": "6.20.0",
     "@vitejs/plugin-react-swc": "3.6.0",
     "@vitest/ui": "1.2.2",
     "autoprefixer": "10.4.17",
     "browserslist": "4.22.3",
-    "commander": "11.1.0",
+    "commander": "12.0.0",
     "copyfiles": "2.4.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
@@ -103,7 +103,7 @@
     "jsdom": "24.0.0",
     "parcel": "2.11.0",
     "postcss": "8.4.33",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "prettier-plugin-tailwindcss": "0.5.11",
     "react": "18.2.0",
     "react-dom": "18.2.0",

packages/tailwind-preset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngrok/mantle-tailwind-preset",
   "description": "A Tailwind CSS preset for ngrok's Mantle design system",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "author": "ngrok",
   "license": "MIT",
   "homepage": "https://mantle.ngrok.com",

packages/tailwind-preset/src/tailwind.preset.ts

@@ -9,6 +9,9 @@ const mantlePreset = {
 	darkMode: "class",
 	theme: {
 		colors: {
+			inherit: "inherit",
+			current: "currentColor",
+			transparent: "transparent",
 			white: "hsl(var(--white) / <alpha-value>)",
 			black: "hsl(var(--black) / <alpha-value>)",
 			gray: {