From 03a6d510bcde3f46e16ab13e47b7f55020c0dd1e Mon Sep 17 00:00:00 2001 From: Stephane Segning Lambou Date: Wed, 18 Dec 2024 23:33:28 +0100 Subject: [PATCH] fix issues with theme colors --- packages/vymalo-ui-preset/package.json | 3 +- packages/vymalo-ui-preset/src/index.ts | 93 ++++++++++++++------------ packages/yarn.lock | 8 +++ 3 files changed, 62 insertions(+), 42 deletions(-) diff --git a/packages/vymalo-ui-preset/package.json b/packages/vymalo-ui-preset/package.json index 86749f6..ade9b36 100644 --- a/packages/vymalo-ui-preset/package.json +++ b/packages/vymalo-ui-preset/package.json @@ -1,6 +1,6 @@ { "name": "@vymalo/ui-preset", - "version": "1.0.4", + "version": "1.0.7", "repository": { "type": "git", "url": "git+https://github.com/vymalo/medusajs.git", @@ -33,6 +33,7 @@ "@tailwindcss/aspect-ratio": "^0.4.2", "@tailwindcss/forms": "^0.5.9", "@tailwindcss/typography": "^0.5.15", + "colord": "^2.9.3", "daisyui": "^4.12.22", "tailwind-extended-shadows": "^0.4.1", "tailwindcss": "*", diff --git a/packages/vymalo-ui-preset/src/index.ts b/packages/vymalo-ui-preset/src/index.ts index 6bbc38e..2c956ed 100644 --- a/packages/vymalo-ui-preset/src/index.ts +++ b/packages/vymalo-ui-preset/src/index.ts @@ -1,51 +1,62 @@ import { fontFamily } from 'tailwindcss/defaultTheme'; import type { Config } from 'tailwindcss/types/config'; -import { blue, green, grey, orange, purple, red } from '@mui/material/colors'; +import { colord } from 'colord'; +import { + blue, + green, + grey, + orange, + purple, + red, + teal, +} from '@mui/material/colors'; + +const mainColor = purple; const coreVymaloTheme = { - 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 + primary: mainColor[500], + 'primary-content': mainColor[50], + secondary: teal[400], + 'secondary-content': teal[100], + accent: green[500], + 'accent-content': green[50], + neutral: grey[900], + 'neutral-content': grey[800], + 'base-100': colord(mainColor[900]).darken(0.2).desaturate(0.45).toHex(), + 'base-200': colord(mainColor[900]).darken(0.215).desaturate(0.47).toHex(), + 'base-300': colord(mainColor[900]).darken(0.23).desaturate(0.5).toHex(), + 'base-content': colord(mainColor[50]).lighten(0.05).toHex(), + info: blue[700], + 'info-content': blue[50], + success: green[600], + 'success-content': green[50], + warning: orange[800], + 'warning-content': orange[100], + error: red[800], + 'error-content': red[50], }; const lightVymaloTheme = { - 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 + primary: mainColor[400], + 'primary-content': mainColor[50], + secondary: teal[700], + 'secondary-content': teal[100], + accent: green[400], + 'accent-content': green[50], + neutral: grey[50], + 'neutral-content': grey[900], + 'base-100': colord(mainColor[50]).lighten(0.04).desaturate(0.3).toHex(), + 'base-200': colord(mainColor[50]).lighten(0.02).desaturate(0.4).toHex(), + 'base-300': colord(mainColor[50]).lighten(0.01).desaturate(0.5).toHex(), + 'base-content': mainColor[900], + info: blue[400], + 'info-content': blue[50], + success: green[500], + 'success-content': green[50], + warning: orange[600], + 'warning-content': orange[50], + error: red[500], + 'error-content': red[50], }; const basePreset: Omit = { diff --git a/packages/yarn.lock b/packages/yarn.lock index f92da51..3d768aa 100644 --- a/packages/yarn.lock +++ b/packages/yarn.lock @@ -2247,6 +2247,7 @@ __metadata: "@tailwindcss/aspect-ratio": "npm:^0.4.2" "@tailwindcss/forms": "npm:^0.5.9" "@tailwindcss/typography": "npm:^0.5.15" + colord: "npm:^2.9.3" daisyui: "npm:^4.12.22" tailwind-extended-shadows: "npm:^0.4.1" tailwindcss: "npm:*" @@ -3216,6 +3217,13 @@ __metadata: languageName: node linkType: hard +"colord@npm:^2.9.3": + version: 2.9.3 + resolution: "colord@npm:2.9.3" + checksum: 10c0/9699e956894d8996b28c686afe8988720785f476f59335c80ce852ded76ab3ebe252703aec53d9bef54f6219aea6b960fb3d9a8300058a1d0c0d4026460cd110 + languageName: node + linkType: hard + "combined-stream@npm:^1.0.8": version: 1.0.8 resolution: "combined-stream@npm:1.0.8"