From 4f92bcbb334fba32bbd6912e5ae10ce8a2bc266e Mon Sep 17 00:00:00 2001 From: Stephane Segning Lambou Date: Wed, 18 Dec 2024 13:29:30 +0100 Subject: [PATCH] Using material colors for tw --- packages/vymalo-ui-preset/package.json | 1 + packages/vymalo-ui-preset/src/index.ts | 83 +++---- packages/yarn.lock | 287 ++++++++++++++++++++++++- 3 files changed, 327 insertions(+), 44 deletions(-) diff --git a/packages/vymalo-ui-preset/package.json b/packages/vymalo-ui-preset/package.json index 219b7b0..86749f6 100644 --- 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 index 62cf0bd..6bbc38e 100644 --- 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 = { @@ -81,4 +82,4 @@ const basePreset: Omit = { darkMode: ['class', '[data-theme="vymalo-dark"]'], }; -export default basePreset; \ No newline at end of file +export default basePreset; diff --git a/packages/yarn.lock b/packages/yarn.lock index 67689c3..77777f2 100644 --- a/packages/yarn.lock +++ b/packages/yarn.lock @@ -1375,7 +1375,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.22.10, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.8": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.22.10, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7": version: 7.26.0 resolution: "@babel/runtime@npm:7.26.0" dependencies: @@ -1495,6 +1495,74 @@ __metadata: languageName: node linkType: hard +"@emotion/cache@npm:^11.13.5": + version: 11.14.0 + resolution: "@emotion/cache@npm:11.14.0" + dependencies: + "@emotion/memoize": "npm:^0.9.0" + "@emotion/sheet": "npm:^1.4.0" + "@emotion/utils": "npm:^1.4.2" + "@emotion/weak-memoize": "npm:^0.4.0" + stylis: "npm:4.2.0" + checksum: 10c0/3fa3e7a431ab6f8a47c67132a00ac8358f428c1b6c8421d4b20de9df7c18e95eec04a5a6ff5a68908f98d3280044f247b4965ac63df8302d2c94dba718769724 + languageName: node + linkType: hard + +"@emotion/hash@npm:^0.9.2": + version: 0.9.2 + resolution: "@emotion/hash@npm:0.9.2" + checksum: 10c0/0dc254561a3cc0a06a10bbce7f6a997883fd240c8c1928b93713f803a2e9153a257a488537012efe89dbe1246f2abfe2add62cdb3471a13d67137fcb808e81c2 + languageName: node + linkType: hard + +"@emotion/memoize@npm:^0.9.0": + version: 0.9.0 + resolution: "@emotion/memoize@npm:0.9.0" + checksum: 10c0/13f474a9201c7f88b543e6ea42f55c04fb2fdc05e6c5a3108aced2f7e7aa7eda7794c56bba02985a46d8aaa914fcdde238727a98341a96e2aec750d372dadd15 + languageName: node + linkType: hard + +"@emotion/serialize@npm:^1.3.3": + version: 1.3.3 + resolution: "@emotion/serialize@npm:1.3.3" + dependencies: + "@emotion/hash": "npm:^0.9.2" + "@emotion/memoize": "npm:^0.9.0" + "@emotion/unitless": "npm:^0.10.0" + "@emotion/utils": "npm:^1.4.2" + csstype: "npm:^3.0.2" + checksum: 10c0/b28cb7de59de382021de2b26c0c94ebbfb16967a1b969a56fdb6408465a8993df243bfbd66430badaa6800e1834724e84895f5a6a9d97d0d224de3d77852acb4 + languageName: node + linkType: hard + +"@emotion/sheet@npm:^1.4.0": + version: 1.4.0 + resolution: "@emotion/sheet@npm:1.4.0" + checksum: 10c0/3ca72d1650a07d2fbb7e382761b130b4a887dcd04e6574b2d51ce578791240150d7072a9bcb4161933abbcd1e38b243a6fb4464a7fe991d700c17aa66bb5acc7 + languageName: node + linkType: hard + +"@emotion/unitless@npm:^0.10.0": + version: 0.10.0 + resolution: "@emotion/unitless@npm:0.10.0" + checksum: 10c0/150943192727b7650eb9a6851a98034ddb58a8b6958b37546080f794696141c3760966ac695ab9af97efe10178690987aee4791f9f0ad1ff76783cdca83c1d49 + languageName: node + linkType: hard + +"@emotion/utils@npm:^1.4.2": + version: 1.4.2 + resolution: "@emotion/utils@npm:1.4.2" + checksum: 10c0/7d0010bf60a2a8c1a033b6431469de4c80e47aeb8fd856a17c1d1f76bbc3a03161a34aeaa78803566e29681ca551e7bf9994b68e9c5f5c796159923e44f78d9a + languageName: node + linkType: hard + +"@emotion/weak-memoize@npm:^0.4.0": + version: 0.4.0 + resolution: "@emotion/weak-memoize@npm:0.4.0" + checksum: 10c0/64376af11f1266042d03b3305c30b7502e6084868e33327e944b539091a472f089db307af69240f7188f8bc6b319276fd7b141a36613f1160d73d12a60f6ca1a + languageName: node + linkType: hard + "@esbuild/aix-ppc64@npm:0.21.5": version: 0.21.5 resolution: "@esbuild/aix-ppc64@npm:0.21.5" @@ -3471,6 +3539,149 @@ __metadata: languageName: node linkType: hard +"@mui/core-downloads-tracker@npm:^6.2.1": + version: 6.2.1 + resolution: "@mui/core-downloads-tracker@npm:6.2.1" + checksum: 10c0/873c95a54fc8c5520a22feb1e98855742ce76b88e2cb909c02a9a99200cbb0e80971458626c435dc290634aaa3f066c501a7b87c03626dd135fee7bf52a12e4e + languageName: node + linkType: hard + +"@mui/material@npm:^6.2.1": + version: 6.2.1 + resolution: "@mui/material@npm:6.2.1" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/core-downloads-tracker": "npm:^6.2.1" + "@mui/system": "npm:^6.2.1" + "@mui/types": "npm:^7.2.20" + "@mui/utils": "npm:^6.2.1" + "@popperjs/core": "npm:^2.11.8" + "@types/react-transition-group": "npm:^4.4.12" + clsx: "npm:^2.1.1" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + react-is: "npm:^19.0.0" + react-transition-group: "npm:^4.4.5" + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@mui/material-pigment-css": ^6.2.1 + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@mui/material-pigment-css": + optional: true + "@types/react": + optional: true + checksum: 10c0/9ebef984b0aeec933290bf4d984bed02a984e30d0dbfeb473becbcf7c284bbe058d5dc1302445abe4a799750d415ea4893df18fa41545cf191f6fa5bc0d229a4 + languageName: node + linkType: hard + +"@mui/private-theming@npm:^6.2.1": + version: 6.2.1 + resolution: "@mui/private-theming@npm:6.2.1" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/utils": "npm:^6.2.1" + prop-types: "npm:^15.8.1" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/15003060e88264e0247f0e0fc63ca696f3b326987d079615eee40670b77fd0c021ffcf8f650a33e84e0ac790075ab00bc8a9d577aa842298b889676dc6f06ef9 + languageName: node + linkType: hard + +"@mui/styled-engine@npm:^6.2.1": + version: 6.2.1 + resolution: "@mui/styled-engine@npm:6.2.1" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@emotion/cache": "npm:^11.13.5" + "@emotion/serialize": "npm:^1.3.3" + "@emotion/sheet": "npm:^1.4.0" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 10c0/3e95744b642b41afde7e5040fc428dbcf01a4a3937c859380b19a3ec3e23ebb460cb3681cf86773c13ea5be76f64ee071afa8ded9d38850bd5b90710623a8549 + languageName: node + linkType: hard + +"@mui/system@npm:^6.2.1": + version: 6.2.1 + resolution: "@mui/system@npm:6.2.1" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/private-theming": "npm:^6.2.1" + "@mui/styled-engine": "npm:^6.2.1" + "@mui/types": "npm:^7.2.20" + "@mui/utils": "npm:^6.2.1" + clsx: "npm:^2.1.1" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 10c0/94aef42804fa4052b7ceabb41979b9192c432f0ae8bb74a450c604426eb9813c0066e646966704f30bbb262e75629bed05c9f87e0753e5416d6e903e6c870e23 + languageName: node + linkType: hard + +"@mui/types@npm:^7.2.20": + version: 7.2.20 + resolution: "@mui/types@npm:7.2.20" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/257285386903fe0705ac6d53d0ece700323b7bc9be5239ab448b2c6523965b3cadbb636f2aec8ff60354180f53daf78df687d6828a75ad220b0f71fb5a117b5e + languageName: node + linkType: hard + +"@mui/utils@npm:^6.2.1": + version: 6.2.1 + resolution: "@mui/utils@npm:6.2.1" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/types": "npm:^7.2.20" + "@types/prop-types": "npm:^15.7.14" + clsx: "npm:^2.1.1" + prop-types: "npm:^15.8.1" + react-is: "npm:^19.0.0" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/1c81a5d3918fda0c8518e726a4630779f9b1145306e42a72f6f5264b9c30527fc31caea6a429457ad6eee17be40636240a0e57159c881abae0c266628f7a3615 + languageName: node + linkType: hard + "@next/eslint-plugin-next@npm:14.2.18": version: 14.2.18 resolution: "@next/eslint-plugin-next@npm:14.2.18" @@ -3557,6 +3768,13 @@ __metadata: languageName: node linkType: hard +"@popperjs/core@npm:^2.11.8": + version: 2.11.8 + resolution: "@popperjs/core@npm:2.11.8" + checksum: 10c0/4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63 + languageName: node + linkType: hard + "@radix-ui/number@npm:1.1.0": version: 1.1.0 resolution: "@radix-ui/number@npm:1.1.0" @@ -7310,6 +7528,13 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:^15.7.14": + version: 15.7.14 + resolution: "@types/prop-types@npm:15.7.14" + checksum: 10c0/1ec775160bfab90b67a782d735952158c7e702ca4502968aa82565bd8e452c2de8601c8dfe349733073c31179116cf7340710160d3836aa8a1ef76d1532893b1 + languageName: node + linkType: hard + "@types/qs@npm:*": version: 6.9.17 resolution: "@types/qs@npm:6.9.17" @@ -7324,6 +7549,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.12": + version: 4.4.12 + resolution: "@types/react-transition-group@npm:4.4.12" + peerDependencies: + "@types/react": "*" + checksum: 10c0/0441b8b47c69312c89ec0760ba477ba1a0808a10ceef8dc1c64b1013ed78517332c30f18681b0ec0b53542731f1ed015169fed1d127cc91222638ed955478ec7 + languageName: node + linkType: hard + "@types/send@npm:*": version: 0.17.4 resolution: "@types/send@npm:0.17.4" @@ -7590,6 +7824,7 @@ __metadata: version: 0.0.0-use.local resolution: "@vymalo/ui-preset@workspace:vymalo-ui-preset" dependencies: + "@mui/material": "npm:^6.2.1" "@tailwindcss/aspect-ratio": "npm:^0.4.2" "@tailwindcss/forms": "npm:^0.5.9" "@tailwindcss/typography": "npm:^0.5.15" @@ -8660,7 +8895,7 @@ __metadata: languageName: node linkType: hard -"clsx@npm:^2.0.0": +"clsx@npm:^2.0.0, clsx@npm:^2.1.1": version: 2.1.1 resolution: "clsx@npm:2.1.1" checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839 @@ -9056,6 +9291,13 @@ __metadata: languageName: node linkType: hard +"csstype@npm:^3.0.2, csstype@npm:^3.1.3": + version: 3.1.3 + resolution: "csstype@npm:3.1.3" + checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248 + languageName: node + linkType: hard + "culori@npm:^3": version: 3.3.0 resolution: "culori@npm:3.3.0" @@ -9363,6 +9605,16 @@ __metadata: languageName: node linkType: hard +"dom-helpers@npm:^5.0.1": + version: 5.2.1 + resolution: "dom-helpers@npm:5.2.1" + dependencies: + "@babel/runtime": "npm:^7.8.7" + csstype: "npm:^3.0.2" + checksum: 10c0/f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c + languageName: node + linkType: hard + "dom-serializer@npm:^1.0.1, dom-serializer@npm:^1.3.2": version: 1.4.1 resolution: "dom-serializer@npm:1.4.1" @@ -13867,7 +14119,7 @@ __metadata: languageName: node linkType: hard -"prop-types@npm:^15.8.1": +"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1": version: 15.8.1 resolution: "prop-types@npm:15.8.1" dependencies: @@ -14247,6 +14499,13 @@ __metadata: languageName: node linkType: hard +"react-is@npm:^19.0.0": + version: 19.0.0 + resolution: "react-is@npm:19.0.0" + checksum: 10c0/d1be8e8500cf04f76df71942a21ef3a71266397a383d7ec8885f35190df818d35c65efd35aed7be47a89ad99aaff2c52e0c4e39e8930844a6b997622e50625a8 + languageName: node + linkType: hard + "react-jwt@npm:^1.2.0": version: 1.2.2 resolution: "react-jwt@npm:1.2.2" @@ -14397,6 +14656,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.4.5": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": "npm:^7.5.5" + dom-helpers: "npm:^5.0.1" + loose-envify: "npm:^1.4.0" + prop-types: "npm:^15.6.2" + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 10c0/2ba754ba748faefa15f87c96dfa700d5525054a0141de8c75763aae6734af0740e77e11261a1e8f4ffc08fd9ab78510122e05c21c2d79066c38bb6861a886c82 + languageName: node + linkType: hard + "react@npm:^18.2.0": version: 18.3.1 resolution: "react@npm:18.3.1" @@ -15383,6 +15657,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.2.0": + version: 4.2.0 + resolution: "stylis@npm:4.2.0" + checksum: 10c0/a7128ad5a8ed72652c6eba46bed4f416521bc9745a460ef5741edc725252cebf36ee45e33a8615a7057403c93df0866ab9ee955960792db210bb80abd5ac6543 + languageName: node + linkType: hard + "sucrase@npm:^3.35.0": version: 3.35.0 resolution: "sucrase@npm:3.35.0"