feat: adds tailwindcss-radix-colors (#123)

noodle-run · Jul 1, 2023 · db95ce9 · db95ce9 · kiraj20 · Jul 8, 2023
1 parent 9e2e862
commit db95ce9
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 73 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,5 +10,8 @@
  "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
  },
- "editor.formatOnSave": true
+ "editor.formatOnSave": true,
+ "tailwindCSS.experimental.classRegex": [
+ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+ ]
 }
diff --git a/apps/web/src/pages/_document.tsx b/apps/web/src/pages/_document.tsx
@@ -4,7 +4,7 @@ export default function Document() {
  return (
  <Html>
  <Head />
- <body className="bg-gray-1 text-gray-12">
+ <body className="bg-gray-1 dark:bg-graydark-1 text-gray-12 dark:text-graydark-12">
  <Main />
  <NextScript />
  </body>

diff --git a/packages/config/storybook/package.json b/packages/config/storybook/package.json
@@ -35,7 +35,8 @@
  "@storybook/types": "^7.0.24"
  },
  "devDependencies": {
- "@noodle/tsconfig": "workspace:^"
+ "@noodle/tsconfig": "workspace:^",
+ "@storybook/addon-viewport": "^7.0.24"
  },
  "volta": {
  "extends": "../../../package.json"

diff --git a/packages/config/storybook/src/preview.tsx b/packages/config/storybook/src/preview.tsx
@@ -1,4 +1,5 @@
 import { withThemeByClassName } from '@storybook/addon-styling';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { type Preview } from '@storybook/react';
 
 export const basePreview = {
@@ -10,6 +11,9 @@ export const basePreview = {
  date: /Date$/,
  },
  },
+ viewport: {
+ viewports: INITIAL_VIEWPORTS,
+ },
  },
  decorators: [
  withThemeByClassName({

diff --git a/packages/config/tailwind/package.json b/packages/config/tailwind/package.json
@@ -25,11 +25,9 @@
  "devDependencies": {
  "@noodle/tsconfig": "workspace:^",
  "@radix-ui/colors": "^1.0.0",
- "@tailwindcss/typography": "^0.5.9",
  "autoprefixer": "^10.4.14",
  "tailwindcss-animate": "^1.0.6",
- "windy-radix-palette": "^0.6.1",
- "windy-radix-typography": "^0.2.1"
+ "tailwindcss-radix-colors": "^0.5.0"
  },
  "volta": {
  "extends": "../../../package.json"

diff --git a/packages/config/tailwind/tailwind.config.ts b/packages/config/tailwind/tailwind.config.ts
@@ -14,9 +14,7 @@ const config = {
  extend: {},
  },
  plugins: [
- require('windy-radix-palette'),
- require('@tailwindcss/typography'),
- require('windy-radix-typography'),
+ require('tailwindcss-radix-colors'),
  require('tailwindcss-animate'),
  ],
 } satisfies Config;

diff --git a/packages/storybook/.storybook/styles.css b/packages/storybook/.storybook/styles.css
@@ -2,6 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-html {
- @apply bg-gray-1 text-gray-12;
+html,
+body {
+ @apply bg-gray-1 dark:bg-graydark-1 text-gray-12 dark:text-graydark-12 h-full;
 }
diff --git a/packages/ui/.storybook/styles.css b/packages/ui/.storybook/styles.css
@@ -2,10 +2,7 @@
 @tailwind components;
 @tailwind utilities;
 
-html.dark {
- @apply bg-gray-12 text-gray-1;
-}
-
-html {
- @apply bg-gray-1 text-gray-12;
+html,
+body {
+ @apply bg-gray-1 dark:bg-graydark-1 text-gray-12 dark:text-graydark-12 h-full;
 }
diff --git a/packages/ui/src/typography/typography.tsx b/packages/ui/src/typography/typography.tsx
@@ -1,3 +1,3 @@
 export const Typography = () => {
- return <p className="text-crimson-11 dark:text-red-10">Button</p>;
+ return <p className="text-crimson-11 dark:text-crimsondark-11">Button</p>;
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml