Using material colors for tw

vymalo · Dec 18, 2024 · 4f92bcb · 4f92bcb
1 parent a73623a
commit 4f92bcb
Show file tree

Hide file tree

Showing 3 changed files with 327 additions and 44 deletions.
diff --git a/packages/vymalo-ui-preset/package.json b/packages/vymalo-ui-preset/package.json
@@ -29,6 +29,7 @@
   "license": "MIT",
   "description": "",
   "dependencies": {
+    "@mui/material": "^6.2.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",

diff --git a/packages/vymalo-ui-preset/src/index.ts b/packages/vymalo-ui-preset/src/index.ts
@@ -1,50 +1,51 @@
 import { fontFamily } from 'tailwindcss/defaultTheme';
 import type { Config } from 'tailwindcss/types/config';
+import { blue, green, grey, orange, purple, red } from '@mui/material/colors';
 
 const coreVymaloTheme = {
-	primary: '#c738e1', // Harmonized magenta
-	'primary-content': '#f5e6f8', // Lighter for better contrast
-	secondary: '#00a300', // Darker green for a less vibrant feel
-	'secondary-content': '#d1f3d1', // Softer green for contrast
-	accent: '#00b873', // Muted green to match the secondary
-	'accent-content': '#e0f7e0', // Softer light green
-	neutral: '#282828', // Slightly lighter neutral for smoother look
-	'neutral-content': '#e1e1e1', // Softer contrast with neutral
-	'base-100': '#201b2c', // Base color for a dark theme
-	'base-200': '#1a1523',
-	'base-300': '#16101d',
-	'base-content': '#e4dfe6', // Lighter for better legibility
-	info: '#005bbd', // Darker blue for a calmer feel
-	'info-content': '#e0f0fa', // Softer light blue for content
-	success: '#00c362', // Harmonized green
-	'success-content': '#e1f6eb', // Lighter success content
-	warning: '#ff6a00', // Slightly softened orange
-	'warning-content': '#f4dfd6', // Light beige for contrast
-	error: '#eb0032', // Harmonized red
-	'error-content': '#ffe6ea', // Softer pinkish tone for content
+	primary: purple[500], // Harmonized magenta
+	'primary-content': purple[50], // Lighter for better contrast
+	secondary: green[700], // Darker green for a less vibrant feel
+	'secondary-content': green[100], // Softer green for contrast
+	accent: green[500], // Muted green to match the secondary
+	'accent-content': green[50], // Softer light green
+	neutral: grey[900], // Slightly lighter neutral for smoother look
+	'neutral-content': grey[800], // Softer contrast with neutral
+	'base-100': grey[900], // Base color for a dark theme
+	'base-200': grey[800],
+	'base-300': grey[700],
+	'base-content': grey[50], // Lighter for better legibility
+	info: blue[700], // Darker blue for a calmer feel
+	'info-content': blue[50], // Softer light blue for content
+	success: green[600], // Harmonized green
+	'success-content': green[50], // Lighter success content
+	warning: orange[800], // Slightly softened orange
+	'warning-content': orange[100], // Light beige for contrast
+	error: red[800], // Harmonized red
+	'error-content': red[50], // Softer pinkish tone for content
 };
 
 const lightVymaloTheme = {
-	primary: '#c700e6', // Slightly softer magenta to match the dark theme
-	'primary-content': '#f7e5fc', // Lighter for contrast
-	secondary: '#d10000', // Softened red
-	'secondary-content': '#ffe1dd', // Softer light red for readability
-	accent: '#00d479', // Muted green to harmonize with dark accent
-	'accent-content': '#dff7e7', // Softened green content
-	neutral: '#f2f2f2', // Lightened neutral for consistency
-	'neutral-content': '#202020', // Dark content for neutral contrast
-	'base-100': '#efefef', // Clean white for base
-	'base-200': '#dedcdc',
-	'base-300': '#bcbcbc',
-	'base-content': '#1e1e1e', // Darker content for contrast
-	info: '#00b0e0', // Softer blue for less harsh info
-	'info-content': '#eef9ff', // Softer light blue for content
-	success: '#6bc84f', // Softer green for success
-	'success-content': '#f2f9f2', // Lighter content for contrast
-	warning: '#ff9500', // Harmonized with dark theme
-	'warning-content': '#fff1db', // Light beige for contrast
-	error: '#ff4b57', // Softer red for light theme
-	'error-content': '#ffe6e8', // Lightened for contrast
+	primary: purple[400], // Slightly softer magenta to match the dark theme
+	'primary-content': purple[50], // Lighter for contrast
+	secondary: red[700], // Softened red
+	'secondary-content': red[100], // Softer light red for readability
+	accent: green[400], // Muted green to harmonize with dark accent
+	'accent-content': green[50], // Softened green content
+	neutral: grey[50], // Lightened neutral for consistency
+	'neutral-content': grey[900], // Dark content for neutral contrast
+	'base-100': grey[50], // Clean white for base
+	'base-200': grey[100],
+	'base-300': grey[200],
+	'base-content': grey[900], // Darker content for contrast
+	info: blue[400], // Softer blue for less harsh info
+	'info-content': blue[50], // Softer light blue for content
+	success: green[500], // Softer green for success
+	'success-content': green[50], // Lighter content for contrast
+	warning: orange[600], // Harmonized with dark theme
+	'warning-content': orange[50], // Light beige for contrast
+	error: red[500], // Softer red for light theme
+	'error-content': red[50], // Lightened for contrast
 };
 
 const basePreset: Omit<Config, 'content'> = {
@@ -81,4 +82,4 @@ const basePreset: Omit<Config, 'content'> = {
 	darkMode: ['class', '[data-theme="vymalo-dark"]'],
 };
 
-export default basePreset;
+export default basePreset;