From cb472e14f45d20e65ad8f16d24798fd36e02a500 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 13:36:48 +0100 Subject: [PATCH 01/25] automatically enable dark mode based on user prefernces --- src/App.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index fafa5bf0..a096bde6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -28,8 +28,12 @@ function App() { fetchPrompts(); }, [fetchPrompts]); + const prefersDarkMode = window.matchMedia( + "(prefers-color-scheme: dark)", + ).matches; + return ( -
+
From 41ba833c783ff715944e582f11b3123cf298665e Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 13:50:34 +0100 Subject: [PATCH 02/25] invert prose colors for dark mode --- src/components/Help.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Help.tsx b/src/components/Help.tsx index 3a4a87c5..cfc4fc41 100644 --- a/src/components/Help.tsx +++ b/src/components/Help.tsx @@ -30,7 +30,7 @@ export function Help() { } catch (error) { console.error("Error loading help content:", error); setContent( - "# Error\nFailed to load help content. Please try again later." + "# Error\nFailed to load help content. Please try again later.", ); } }; @@ -41,7 +41,7 @@ export function Help() { return (
Date: Tue, 14 Jan 2025 14:13:12 +0100 Subject: [PATCH 03/25] copy theme generator from my personal project --- package-lock.json | 58 +++++++++ package.json | 6 +- src/scripts/generateColorTokens.js | 184 +++++++++++++++++++++++++++++ 3 files changed, 246 insertions(+), 2 deletions(-) create mode 100644 src/scripts/generateColorTokens.js diff --git a/package-lock.json b/package-lock.json index a3415931..0aaf2ac9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "vite-project", "version": "0.0.0", "dependencies": { + "@adobe/leonardo-contrast-colors": "^1.0.0", "@hey-api/client-fetch": "^0.6.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-dialog": "^1.1.4", @@ -76,6 +77,18 @@ "dev": true, "license": "MIT" }, + "node_modules/@adobe/leonardo-contrast-colors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@adobe/leonardo-contrast-colors/-/leonardo-contrast-colors-1.0.0.tgz", + "integrity": "sha512-a4mD0JZ1zNu2wIem/vWJqdaiuQZgxwOph/gpHA75mlXcs6iiIQx9G+W0jtssRFgdYYAi/ceQYOlYwiSQj1AUCw==", + "dependencies": { + "apca-w3": "^0.1.9", + "chroma-js": "^2.4.2", + "ciebase": "^0.1.1", + "ciecam02": "^0.4.6", + "hsluv": "^0.1.0" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -3508,6 +3521,14 @@ "node": ">= 8" } }, + "node_modules/apca-w3": { + "version": "0.1.9", + "resolved": "https://registry.npmjs.org/apca-w3/-/apca-w3-0.1.9.tgz", + "integrity": "sha512-Zrf6AeBeQjNe/fxK7U1jCo5zfdjDl6T4/kdw5Xlky3G7u+EJTZkyItjMYQGtwf9pkftsINxcYyOpuLkzKf1ITQ==", + "dependencies": { + "colorparsley": "^0.1.8" + } + }, "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", @@ -3941,6 +3962,28 @@ "node": ">=10" } }, + "node_modules/chroma-js": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz", + "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==" + }, + "node_modules/ciebase": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/ciebase/-/ciebase-0.1.1.tgz", + "integrity": "sha512-KEnf/WVT5E+Gn+LsfMHGJFATltSOeW0qm7dpzQYL/Qe5PEpyTM+UI5bMoBo16FE81zMpu+U6032USTP6Cz1XNA==", + "dependencies": { + "mout": "^0.11.1" + } + }, + "node_modules/ciecam02": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/ciecam02/-/ciecam02-0.4.6.tgz", + "integrity": "sha512-nh/Kl8s5lgtyEl7lA381JFinLhgUwDhJaAVgbVx2BaiiJIzJLumQvuFXwdS76tSch7jDjWejP+MtKYCCEk/brg==", + "dependencies": { + "ciebase": "^0.1.1", + "mout": "^0.11.1" + } + }, "node_modules/citty": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/citty/-/citty-0.1.6.tgz", @@ -4128,6 +4171,11 @@ "dev": true, "license": "MIT" }, + "node_modules/colorparsley": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/colorparsley/-/colorparsley-0.1.8.tgz", + "integrity": "sha512-rObESTTTE6G5qO5WFwFxWPggpw4KfpxnLC6Ssl8bITBnNVRhDsyCeTRAUxWQNVTx2pRknKlO2nddYTxjkdNFaw==" + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", @@ -5519,6 +5567,11 @@ "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==", "license": "CC0-1.0" }, + "node_modules/hsluv": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/hsluv/-/hsluv-0.1.0.tgz", + "integrity": "sha512-ERcanKLAszD2XN3Vh5r5Szkrv9q0oSTudmP0rkiKAGM/3NMc9FLmMZBB7TSqTaXJfSDBOreYTfjezCOYbRKqlw==" + }, "node_modules/html-encoding-sniffer": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz", @@ -7443,6 +7496,11 @@ "ufo": "^1.5.4" } }, + "node_modules/mout": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/mout/-/mout-0.11.1.tgz", + "integrity": "sha512-pK9VNiLE3QgGBrC/3ICAscwOLU7oTNeK2l32uqNAioBYtB2tQAfSsGDNChUlk7CP23126mc5lUt6+na9FlN8JA==" + }, "node_modules/mrmime": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz", diff --git a/package.json b/package.json index ae01c6c6..37132ed0 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,11 @@ "preview": "vite preview", "test": "vitest", "test:coverage": "vitest run --coverage", - "type-check": "tsc --noEmit -p ./tsconfig.app.json" + "type-check": "tsc --noEmit -p ./tsconfig.app.json", + "generate-colors": "node ./src/scripts/generateColorTokens.js" }, "dependencies": { + "@adobe/leonardo-contrast-colors": "^1.0.0", "@hey-api/client-fetch": "^0.6.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-dialog": "^1.1.4", @@ -81,4 +83,4 @@ "overrides": { "vite": "^6.0.1" } -} \ No newline at end of file +} diff --git a/src/scripts/generateColorTokens.js b/src/scripts/generateColorTokens.js new file mode 100644 index 00000000..ba92d2c4 --- /dev/null +++ b/src/scripts/generateColorTokens.js @@ -0,0 +1,184 @@ +// code mostly copied from my personal project and modified with ChatGPT +// used to generate color tokens based on contrast values + +import { writeFileSync } from "fs"; +import { join } from "path"; +import path from "path"; +import { fileURLToPath } from "url"; +import { Theme, Color, BackgroundColor } from "@adobe/leonardo-contrast-colors"; + +const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file +const __dirname = path.dirname(__filename); // get the name of the directory + +// ------------------------ +// 1. Define our base colors +// ------------------------ +const baseColors = { + background: "#d3c6aa", + foreground: "#1e2326", + green: "#a7c080", + red: "#e67e80", + blue: "#7fbbb3", + purple: "#d699b6", + orange: "#ff5100", + yellow: "#dbbc7f", +}; + +const printBaseColors = { + ...baseColors, + background: "#ffffff", + foreground: "#000000", +}; + +// ------------------------------------- +// 2. Utility Functions +// ------------------------------------- +function generateRatios(multiplier = 1) { + const baseRatio = 1.35; + const ratioCount = 9; + return Array.from( + { length: ratioCount }, + (_, i) => (Math.pow(baseRatio, i + 1) - baseRatio + 1) * multiplier, + ); +} + +function smoothRatios(ratios, windowSize = 3) { + const smoothed = [...ratios]; + const halfWindow = Math.floor(windowSize / 2); + + for (let i = 0; i < ratios.length; i++) { + let sum = 0; + let count = 0; + for ( + let j = Math.max(0, i - halfWindow); + j < Math.min(ratios.length, i + halfWindow + 1); + j++ + ) { + sum += ratios[j]; + count++; + } + smoothed[i] = sum / count; + } + return smoothed; +} + +// ------------------------------------- +// 3. Generate Ratios for light, dark, and print modes +// ------------------------------------- +const lightRatios = smoothRatios(generateRatios(1)); +const darkRatios = smoothRatios(generateRatios(1.3)); +const printRatios = smoothRatios(generateRatios(2)); + +// ------------------------------------- +// 4. Generate the entire color scheme +// ------------------------------------- +function generateColorScheme(baseColors, isLightMode, ratios) { + const backgroundColor = isLightMode + ? baseColors.background + : baseColors.foreground; + const textColor = isLightMode ? baseColors.foreground : baseColors.background; + + const background = new BackgroundColor({ + name: "gray", + colorKeys: [backgroundColor, textColor], + colorspace: "CAM02", + ratios, + smooth: true, + }); + + // Generate color scales for all keys except background/foreground + const colorScales = Object.entries(baseColors) + .filter(([key]) => !["background", "foreground"].includes(key)) + .map( + ([name, color]) => + new Color({ + name, + colorKeys: [color], + colorspace: "CAM02", + ratios, + smooth: true, + }), + ); + + const theme = new Theme({ + colors: [background, ...colorScales], + backgroundColor: background, + lightness: isLightMode ? 100 : 0, + contrast: 1, + }); + + return theme.contrastColorPairs; +} + +// Generate light, dark, and print color schemes +const lightColors = generateColorScheme(baseColors, true, lightRatios); +const darkColors = generateColorScheme(baseColors, false, darkRatios); +const printColors = generateColorScheme(printBaseColors, true, printRatios); + +// ------------------------------------- +// 5. Utility to convert color objects into CSS variables +// ------------------------------------- +function generateColorVariables(colors, isPrint) { + const variables = Object.entries(colors) + .map(([key, value]) => { + // Convert trailing digit to -digit, e.g. "red100" -> "red-100" + const modifiedKey = key.replace(/(\d+)$/, "-$1"); + return `--${modifiedKey}: ${value};`; + }) + .join("\n "); + + const backgroundAlias = isPrint + ? "var(--gray-100)" + : "color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%)"; + const foregroundAlias = isPrint ? "var(--gray-900)" : "var(--gray-800)"; + const additionalVariables = ` + --background: ${backgroundAlias}; + --foreground: ${foregroundAlias};`; + + return variables + additionalVariables; +} + +// ------------------------------------- +// 6. Generate final CSS (without prefers-color-scheme) +// ------------------------------------- +function generateThemeVariables(lightVars, darkVars, printVars) { + return ` +:root[data-theme="dark"] { + ${darkVars} +} + +:root[data-theme="light"] { + ${lightVars} +} + +@media print { + :root, + :root[data-theme="light"], + :root[data-theme="dark"] { + ${printVars} + } +} +`; +} + +function generateCssVariables() { + const lightVariables = generateColorVariables(lightColors, false); + const darkVariables = generateColorVariables(darkColors, false); + const printVariables = generateColorVariables(printColors, true); + + return generateThemeVariables(lightVariables, darkVariables, printVariables); +} + +// ------------------------------------- +// 7. Main logic to write to design-tokens.css +// ------------------------------------- +function main() { + const css = generateCssVariables(); + writeFileSync(join(__dirname, "design-tokens.css"), css); + console.log("Design tokens saved to design-tokens.css"); +} + +// ------------------------------------- +// Run the script +// ------------------------------------- +main(); From 30d0dc742633dcbff0fd252edc172d8ddf83182b Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 14:18:36 +0100 Subject: [PATCH 04/25] add design tokens file --- src/design-tokens.css | 139 +++++++++++++++++++++++++++++ src/scripts/generateColorTokens.js | 28 ++---- 2 files changed, 145 insertions(+), 22 deletions(-) create mode 100644 src/design-tokens.css diff --git a/src/design-tokens.css b/src/design-tokens.css new file mode 100644 index 00000000..e4ed5485 --- /dev/null +++ b/src/design-tokens.css @@ -0,0 +1,139 @@ + + +:root { + --background: #ffffff; + --gray-100: #f0e6d0; + --gray-200: #ddcfb3; + --gray-300: #b9af97; + --gray-400: #999382; + --gray-500: #7c7a70; + --gray-600: #64645f; + --gray-700: #4e504f; + --gray-800: #393c3d; + --gray-900: #2f3435; + --green-100: #dbecc7; + --green-200: #c1d99e; + --green-300: #a0b879; + --green-400: #869a64; + --green-500: #708055; + --green-600: #5c6947; + --green-700: #4a533b; + --green-800: #383e2d; + --green-900: #303527; + --red-100: #fedfdf; + --red-200: #ffc2c2; + --red-300: #f89394; + --red-400: #da7578; + --red-500: #b66163; + --red-600: #945152; + --red-700: #744242; + --red-800: #543333; + --red-900: #472c2c; + --blue-100: #d2ece8; + --blue-200: #aadad4; + --blue-300: #7ebbb2; + --blue-400: #689c95; + --blue-500: #58827d; + --blue-600: #4a6a66; + --blue-700: #3d5451; + --blue-800: #303f3d; + --blue-900: #293534; + --purple-100: #f8dfea; + --purple-200: #f3c4da; + --purple-300: #db9ebb; + --purple-400: #ba839d; + --purple-500: #9b6d83; + --purple-600: #7e5a6b; + --purple-700: #634855; + --purple-800: #49373f; + --purple-900: #3e2f36; + --orange-100: #ffe1d3; + --orange-200: #ffc4a7; + --orange-300: #ff935f; + --orange-400: #ff5d15; + --orange-500: #de4300; + --orange-600: #b43a06; + --orange-700: #8c3310; + --orange-800: #662a13; + --orange-900: #552513; + --yellow-100: #f9e4b8; + --yellow-200: #ebcd92; + --yellow-300: #c9ac72; + --yellow-400: #a9905f; + --yellow-500: #8c7851; + --yellow-600: #726244; + --yellow-700: #5a4e38; + --yellow-800: #433b2c; + --yellow-900: #393226; + --background: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%); + --foreground: var(--gray-800); +} + +:root.dark { + --background: #000000; + --gray-100: #2e3234; + --gray-200: #3c4040; + --gray-300: #545654; + --gray-400: #6c6c65; + --gray-500: #878376; + --gray-600: #a39b88; + --gray-700: #c2b69d; + --gray-800: #e1d4b9; + --gray-900: #ede2cb; + --green-100: #2e3326; + --green-200: #3b412f; + --green-300: #4f593e; + --green-400: #63714c; + --green-500: #78895a; + --green-600: #8ea36a; + --green-700: #a7c080; + --green-800: #c7dda6; + --green-900: #d8e9c1; + --red-100: #452a2a; + --red-200: #593535; + --red-300: #7d4647; + --red-400: #a05758; + --red-500: #c4686a; + --red-600: #e67e80; + --red-700: #fd9d9e; + --red-800: #ffc7c7; + --red-900: #ffdbdb; + --blue-100: #283331; + --blue-200: #324240; + --blue-300: #415a57; + --blue-400: #4f726e; + --blue-500: #5e8b85; + --blue-600: #6fa69f; + --blue-700: #87c2ba; + --blue-800: #b2ded8; + --blue-900: #cde9e5; + --purple-100: #3b2d33; + --purple-200: #4d3a42; + --purple-300: #6b4d5b; + --purple-400: #886173; + --purple-500: #a6758c; + --purple-600: #c68ba7; + --purple-700: #e2a6c3; + --purple-800: #f5c9dd; + --purple-900: #f8dce9; + --orange-100: #522413; + --orange-200: #6b2c13; + --orange-300: #98350e; + --orange-400: #c33d02; + --orange-500: #ee4800; + --orange-600: #ff7131; + --orange-700: #ff9f71; + --orange-800: #ffcab0; + --orange-900: #ffdccc; + --yellow-100: #373025; + --yellow-200: #463e2d; + --yellow-300: #61543c; + --yellow-400: #7b6a49; + --yellow-500: #968056; + --yellow-600: #b39965; + --yellow-700: #d2b378; + --yellow-800: #eed298; + --yellow-900: #f8e1b2; + --background: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%); + --foreground: var(--gray-800); +} diff --git a/src/scripts/generateColorTokens.js b/src/scripts/generateColorTokens.js index ba92d2c4..c1c57df6 100644 --- a/src/scripts/generateColorTokens.js +++ b/src/scripts/generateColorTokens.js @@ -24,12 +24,6 @@ const baseColors = { yellow: "#dbbc7f", }; -const printBaseColors = { - ...baseColors, - background: "#ffffff", - foreground: "#000000", -}; - // ------------------------------------- // 2. Utility Functions // ------------------------------------- @@ -67,7 +61,6 @@ function smoothRatios(ratios, windowSize = 3) { // ------------------------------------- const lightRatios = smoothRatios(generateRatios(1)); const darkRatios = smoothRatios(generateRatios(1.3)); -const printRatios = smoothRatios(generateRatios(2)); // ------------------------------------- // 4. Generate the entire color scheme @@ -113,7 +106,6 @@ function generateColorScheme(baseColors, isLightMode, ratios) { // Generate light, dark, and print color schemes const lightColors = generateColorScheme(baseColors, true, lightRatios); const darkColors = generateColorScheme(baseColors, false, darkRatios); -const printColors = generateColorScheme(printBaseColors, true, printRatios); // ------------------------------------- // 5. Utility to convert color objects into CSS variables @@ -141,22 +133,15 @@ function generateColorVariables(colors, isPrint) { // ------------------------------------- // 6. Generate final CSS (without prefers-color-scheme) // ------------------------------------- -function generateThemeVariables(lightVars, darkVars, printVars) { +function generateThemeVariables(lightVars, darkVars) { return ` -:root[data-theme="dark"] { - ${darkVars} -} -:root[data-theme="light"] { +:root { ${lightVars} } -@media print { - :root, - :root[data-theme="light"], - :root[data-theme="dark"] { - ${printVars} - } +:root.dark { + ${darkVars} } `; } @@ -164,9 +149,8 @@ function generateThemeVariables(lightVars, darkVars, printVars) { function generateCssVariables() { const lightVariables = generateColorVariables(lightColors, false); const darkVariables = generateColorVariables(darkColors, false); - const printVariables = generateColorVariables(printColors, true); - return generateThemeVariables(lightVariables, darkVariables, printVariables); + return generateThemeVariables(lightVariables, darkVariables); } // ------------------------------------- @@ -174,7 +158,7 @@ function generateCssVariables() { // ------------------------------------- function main() { const css = generateCssVariables(); - writeFileSync(join(__dirname, "design-tokens.css"), css); + writeFileSync(join(__dirname, "..", "design-tokens.css"), css); console.log("Design tokens saved to design-tokens.css"); } From 85ca199ccf2a28549e811980f4d0ba5c99361c24 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 14:38:58 +0100 Subject: [PATCH 05/25] configure base colors in json --- src/baseColors.json | 5 ++ src/design-tokens.css | 90 ------------------------------ src/scripts/generateColorTokens.js | 15 +---- src/theme/colors.json | 10 ++++ 4 files changed, 16 insertions(+), 104 deletions(-) create mode 100644 src/baseColors.json create mode 100644 src/theme/colors.json diff --git a/src/baseColors.json b/src/baseColors.json new file mode 100644 index 00000000..39c6bbea --- /dev/null +++ b/src/baseColors.json @@ -0,0 +1,5 @@ +{ + "background": "#d3c6aa", + "foreground": "#1e2326", + "green": "#a7c080" +} diff --git a/src/design-tokens.css b/src/design-tokens.css index e4ed5485..8b8cb4ed 100644 --- a/src/design-tokens.css +++ b/src/design-tokens.css @@ -20,51 +20,6 @@ --green-700: #4a533b; --green-800: #383e2d; --green-900: #303527; - --red-100: #fedfdf; - --red-200: #ffc2c2; - --red-300: #f89394; - --red-400: #da7578; - --red-500: #b66163; - --red-600: #945152; - --red-700: #744242; - --red-800: #543333; - --red-900: #472c2c; - --blue-100: #d2ece8; - --blue-200: #aadad4; - --blue-300: #7ebbb2; - --blue-400: #689c95; - --blue-500: #58827d; - --blue-600: #4a6a66; - --blue-700: #3d5451; - --blue-800: #303f3d; - --blue-900: #293534; - --purple-100: #f8dfea; - --purple-200: #f3c4da; - --purple-300: #db9ebb; - --purple-400: #ba839d; - --purple-500: #9b6d83; - --purple-600: #7e5a6b; - --purple-700: #634855; - --purple-800: #49373f; - --purple-900: #3e2f36; - --orange-100: #ffe1d3; - --orange-200: #ffc4a7; - --orange-300: #ff935f; - --orange-400: #ff5d15; - --orange-500: #de4300; - --orange-600: #b43a06; - --orange-700: #8c3310; - --orange-800: #662a13; - --orange-900: #552513; - --yellow-100: #f9e4b8; - --yellow-200: #ebcd92; - --yellow-300: #c9ac72; - --yellow-400: #a9905f; - --yellow-500: #8c7851; - --yellow-600: #726244; - --yellow-700: #5a4e38; - --yellow-800: #433b2c; - --yellow-900: #393226; --background: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%); --foreground: var(--gray-800); } @@ -89,51 +44,6 @@ --green-700: #a7c080; --green-800: #c7dda6; --green-900: #d8e9c1; - --red-100: #452a2a; - --red-200: #593535; - --red-300: #7d4647; - --red-400: #a05758; - --red-500: #c4686a; - --red-600: #e67e80; - --red-700: #fd9d9e; - --red-800: #ffc7c7; - --red-900: #ffdbdb; - --blue-100: #283331; - --blue-200: #324240; - --blue-300: #415a57; - --blue-400: #4f726e; - --blue-500: #5e8b85; - --blue-600: #6fa69f; - --blue-700: #87c2ba; - --blue-800: #b2ded8; - --blue-900: #cde9e5; - --purple-100: #3b2d33; - --purple-200: #4d3a42; - --purple-300: #6b4d5b; - --purple-400: #886173; - --purple-500: #a6758c; - --purple-600: #c68ba7; - --purple-700: #e2a6c3; - --purple-800: #f5c9dd; - --purple-900: #f8dce9; - --orange-100: #522413; - --orange-200: #6b2c13; - --orange-300: #98350e; - --orange-400: #c33d02; - --orange-500: #ee4800; - --orange-600: #ff7131; - --orange-700: #ff9f71; - --orange-800: #ffcab0; - --orange-900: #ffdccc; - --yellow-100: #373025; - --yellow-200: #463e2d; - --yellow-300: #61543c; - --yellow-400: #7b6a49; - --yellow-500: #968056; - --yellow-600: #b39965; - --yellow-700: #d2b378; - --yellow-800: #eed298; - --yellow-900: #f8e1b2; --background: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%); --foreground: var(--gray-800); } diff --git a/src/scripts/generateColorTokens.js b/src/scripts/generateColorTokens.js index c1c57df6..96649d1f 100644 --- a/src/scripts/generateColorTokens.js +++ b/src/scripts/generateColorTokens.js @@ -6,24 +6,11 @@ import { join } from "path"; import path from "path"; import { fileURLToPath } from "url"; import { Theme, Color, BackgroundColor } from "@adobe/leonardo-contrast-colors"; +import baseColors from "../baseColors.json" with { type: "json" }; const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file const __dirname = path.dirname(__filename); // get the name of the directory -// ------------------------ -// 1. Define our base colors -// ------------------------ -const baseColors = { - background: "#d3c6aa", - foreground: "#1e2326", - green: "#a7c080", - red: "#e67e80", - blue: "#7fbbb3", - purple: "#d699b6", - orange: "#ff5100", - yellow: "#dbbc7f", -}; - // ------------------------------------- // 2. Utility Functions // ------------------------------------- diff --git a/src/theme/colors.json b/src/theme/colors.json new file mode 100644 index 00000000..8d14017d --- /dev/null +++ b/src/theme/colors.json @@ -0,0 +1,10 @@ +{ + "background": "#fff", + "foreground": "#000", + "teal": "#80ccff", + "primary": "#2563eb", + "secondary": "#4f46e5", + "destructive": "#dc2626", + "muted": "#6b7280", + "accent": "#f59e0b" +} \ No newline at end of file From 5da07d550b47eb45adbb8eec0d5e671708e4b916 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 14:47:40 +0100 Subject: [PATCH 06/25] actually correctly inject design tokens --- src/index.css | 3 +++ tailwind.config.ts | 14 ++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/index.css b/src/index.css index 5a9a1255..d55dd78b 100644 --- a/src/index.css +++ b/src/index.css @@ -1,7 +1,10 @@ +@import 'design-tokens.css'; + @tailwind base; @tailwind components; @tailwind utilities; + html, body { height: 100%; diff --git a/tailwind.config.ts b/tailwind.config.ts index 4662bd0d..33bae1f1 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,18 @@ /* eslint-disable @typescript-eslint/no-require-imports */ +import baseColors from "./src/baseColors.json" with { type: "json" }; + +const colors = {}; + +Object.keys(baseColors).forEach((colorName) => { + ["100", "200", "300", "400", "500", "600", "700", "800", "900"].forEach( + (shade) => { + const colorId = `${colorName}-${shade}`; + colors[colorId] = `var(--${colorId})`; + }, + ); +}); + /** @type {import('tailwindcss').Config} */ export default { darkMode: ["class"], @@ -14,6 +27,7 @@ export default { custom: "0px 0px 0px 1px #daedfd, 0px 4px 6px rgba(0, 0, 0, 0.1)", }, colors: { + ...colors, "teal-25": "#f5fbff", "blue-200": "#daedfd", background: "hsl(var(--background))", From 454897bf36b3cd11f3b4a613252cb698a1f2e747 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 15:23:48 +0100 Subject: [PATCH 07/25] color fixes --- src/baseColors.json | 2 +- src/components/Header.tsx | 2 +- src/components/Sidebar.tsx | 8 ++--- src/design-tokens.css | 51 ++++++++++++++++-------------- src/index.css | 36 --------------------- src/scripts/generateColorTokens.js | 21 ++++++------ src/theme/colors.json | 10 ------ tailwind.config.ts | 5 ++- 8 files changed, 47 insertions(+), 88 deletions(-) delete mode 100644 src/theme/colors.json diff --git a/src/baseColors.json b/src/baseColors.json index 39c6bbea..a8145cc2 100644 --- a/src/baseColors.json +++ b/src/baseColors.json @@ -1,5 +1,5 @@ { "background": "#d3c6aa", "foreground": "#1e2326", - "green": "#a7c080" + "teal": "#c2e6ff" } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 74dc4121..3a5060f6 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -4,7 +4,7 @@ import { Separator } from "./ui/separator"; export function Header() { return ( -
+
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index cf6ac142..547f2cf6 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -19,10 +19,10 @@ export function Sidebar({ if (loading) { return ( - + History Prompts - + {Array.from({ length: 20 }).map((_, index) => ( @@ -38,10 +38,10 @@ export function Sidebar({ return ( - + History Prompts - + {children} diff --git a/src/design-tokens.css b/src/design-tokens.css index 8b8cb4ed..8d47f7b0 100644 --- a/src/design-tokens.css +++ b/src/design-tokens.css @@ -11,21 +11,23 @@ --gray-700: #4e504f; --gray-800: #393c3d; --gray-900: #2f3435; - --green-100: #dbecc7; - --green-200: #c1d99e; - --green-300: #a0b879; - --green-400: #869a64; - --green-500: #708055; - --green-600: #5c6947; - --green-700: #4a533b; - --green-800: #383e2d; - --green-900: #303527; - --background: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%); - --foreground: var(--gray-800); + --teal-100: #c7ecff; + --teal-200: #b2d5ed; + --teal-300: #96b3c7; + --teal-400: #7f96a6; + --teal-500: #6b7d89; + --teal-600: #596670; + --teal-700: #485159; + --teal-800: #363d42; + --teal-900: #2e3437; + --background: var(--gray-100); + --foreground: var(--gray-900); } -:root.dark { - --background: #000000; + +@media (prefers-color-scheme: dark) { + :root { + --background: #000000; --gray-100: #2e3234; --gray-200: #3c4040; --gray-300: #545654; @@ -35,15 +37,16 @@ --gray-700: #c2b69d; --gray-800: #e1d4b9; --gray-900: #ede2cb; - --green-100: #2e3326; - --green-200: #3b412f; - --green-300: #4f593e; - --green-400: #63714c; - --green-500: #78895a; - --green-600: #8ea36a; - --green-700: #a7c080; - --green-800: #c7dda6; - --green-900: #d8e9c1; - --background: color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%); - --foreground: var(--gray-800); + --teal-100: #2d3236; + --teal-200: #394046; + --teal-300: #4d575f; + --teal-400: #5f6e78; + --teal-500: #728694; + --teal-600: #869fb1; + --teal-700: #9dbbd0; + --teal-800: #b7daf2; + --teal-900: #c4e8ff; + --background: var(--gray-100); + --foreground: var(--gray-900); + } } diff --git a/src/index.css b/src/index.css index d55dd78b..33e32dd9 100644 --- a/src/index.css +++ b/src/index.css @@ -28,8 +28,6 @@ body { @layer base { :root { - --background: 0 0% 100%; - --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; @@ -62,40 +60,6 @@ body { --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } - .dark { - --background: 0 0% 3.9%; - --foreground: 0 0% 98%; - --card: 0 0% 3.9%; - --card-foreground: 0 0% 98%; - --popover: 0 0% 3.9%; - --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; - --secondary-foreground: 0 0% 98%; - --muted: 0 0% 14.9%; - --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; - --accent-foreground: 0 0% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; - --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; - } } @layer base { diff --git a/src/scripts/generateColorTokens.js b/src/scripts/generateColorTokens.js index 96649d1f..9d61c2f8 100644 --- a/src/scripts/generateColorTokens.js +++ b/src/scripts/generateColorTokens.js @@ -8,6 +8,8 @@ import { fileURLToPath } from "url"; import { Theme, Color, BackgroundColor } from "@adobe/leonardo-contrast-colors"; import baseColors from "../baseColors.json" with { type: "json" }; +console.log(baseColors); + const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file const __dirname = path.dirname(__filename); // get the name of the directory @@ -97,7 +99,7 @@ const darkColors = generateColorScheme(baseColors, false, darkRatios); // ------------------------------------- // 5. Utility to convert color objects into CSS variables // ------------------------------------- -function generateColorVariables(colors, isPrint) { +function generateColorVariables(colors) { const variables = Object.entries(colors) .map(([key, value]) => { // Convert trailing digit to -digit, e.g. "red100" -> "red-100" @@ -106,10 +108,8 @@ function generateColorVariables(colors, isPrint) { }) .join("\n "); - const backgroundAlias = isPrint - ? "var(--gray-100)" - : "color-mix(in srgb, var(--gray-100) 50%, var(--gray-200) 50%)"; - const foregroundAlias = isPrint ? "var(--gray-900)" : "var(--gray-800)"; + const backgroundAlias = "var(--gray-100)"; + const foregroundAlias = "var(--gray-900)"; const additionalVariables = ` --background: ${backgroundAlias}; --foreground: ${foregroundAlias};`; @@ -127,15 +127,18 @@ function generateThemeVariables(lightVars, darkVars) { ${lightVars} } -:root.dark { - ${darkVars} + +@media (prefers-color-scheme: dark) { + :root { + ${darkVars} + } } `; } function generateCssVariables() { - const lightVariables = generateColorVariables(lightColors, false); - const darkVariables = generateColorVariables(darkColors, false); + const lightVariables = generateColorVariables(lightColors); + const darkVariables = generateColorVariables(darkColors); return generateThemeVariables(lightVariables, darkVariables); } diff --git a/src/theme/colors.json b/src/theme/colors.json deleted file mode 100644 index 8d14017d..00000000 --- a/src/theme/colors.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "background": "#fff", - "foreground": "#000", - "teal": "#80ccff", - "primary": "#2563eb", - "secondary": "#4f46e5", - "destructive": "#dc2626", - "muted": "#6b7280", - "accent": "#f59e0b" -} \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 33bae1f1..e8d27a27 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -28,10 +28,9 @@ export default { }, colors: { ...colors, - "teal-25": "#f5fbff", "blue-200": "#daedfd", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", + background: "var(--background)", + foreground: "var(--foreground)", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", From eb55452c575a19baa103995086adf2c0380d2bd5 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 16:10:21 +0100 Subject: [PATCH 08/25] use hsl color scheme as per documentation --- src/components/Help.tsx | 2 +- src/design-tokens.css | 76 +++++++++++++++--------------- src/index.css | 3 -- src/scripts/generateColorTokens.js | 5 +- tailwind.config.ts | 8 ++-- 5 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/components/Help.tsx b/src/components/Help.tsx index cfc4fc41..98960d5b 100644 --- a/src/components/Help.tsx +++ b/src/components/Help.tsx @@ -39,7 +39,7 @@ export function Help() { }, [section]); return ( -
+
{ // Convert trailing digit to -digit, e.g. "red100" -> "red-100" const modifiedKey = key.replace(/(\d+)$/, "-$1"); - return `--${modifiedKey}: ${value};`; + return `--${modifiedKey}: ${value.replace("hsl(", "").replace(")", "")};`; }) .join("\n "); diff --git a/tailwind.config.ts b/tailwind.config.ts index e8d27a27..844f9831 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -8,7 +8,7 @@ Object.keys(baseColors).forEach((colorName) => { ["100", "200", "300", "400", "500", "600", "700", "800", "900"].forEach( (shade) => { const colorId = `${colorName}-${shade}`; - colors[colorId] = `var(--${colorId})`; + colors[colorId] = `hsl(var(--${colorId}))`; }, ); }); @@ -28,9 +28,9 @@ export default { }, colors: { ...colors, - "blue-200": "#daedfd", - background: "var(--background)", - foreground: "var(--foreground)", + //"blue-200": "#daedfd", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", From adcfb1ad7960ca23c2340676c7f555d377c45569 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 16:16:42 +0100 Subject: [PATCH 09/25] color fixes for markdown --- src/components/Help.tsx | 6 ++---- src/components/Markdown.tsx | 13 ------------- tailwind.config.ts | 26 ++++++++++++++++++++++++++ 3 files changed, 28 insertions(+), 17 deletions(-) diff --git a/src/components/Help.tsx b/src/components/Help.tsx index 98960d5b..6a446c10 100644 --- a/src/components/Help.tsx +++ b/src/components/Help.tsx @@ -41,13 +41,11 @@ export function Help() { return (
); }, - p({ children }) { - return ( -

- {children} -

- ); - }, pre({ children }) { return
{children}
; }, diff --git a/tailwind.config.ts b/tailwind.config.ts index 844f9831..56ecd135 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -23,6 +23,32 @@ export default { ], theme: { extend: { + typography: () => ({ + DEFAULT: { + css: { + "--tw-prose-body": "var(--gray-900)", + "--tw-prose-headings": "var(--gray-900)", + "--tw-prose-lead": "var(--gray-600)", + "--tw-prose-links": "var(--gray-900)", + "--tw-prose-bold": "var(--gray-900)", + "--tw-prose-counters": "var(--gray-500)", + "--tw-prose-bullets": "var(--gray-300)", + "--tw-prose-hr": "var(--gray-200)", + "--tw-prose-quotes": "var(--gray-900)", + "--tw-prose-quote-borders": "var(--gray-200)", + "--tw-prose-captions": "var(--gray-500)", + "--tw-prose-code": "var(--gray-900)", + "--tw-prose-pre-code": "var(--gray-200)", + "--tw-prose-pre-bg": "var(--gray-800)", + "--tw-prose-th-borders": "var(--gray-300)", + "--tw-prose-td-borders": "var(--gray-200)", + "h1, h2, h3, h4, h5, h6": { + fontFamily: "var(--font-title)", + fontWeight: "600", + }, + }, + }, + }), boxShadow: { custom: "0px 0px 0px 1px #daedfd, 0px 4px 6px rgba(0, 0, 0, 0.1)", }, From 331338e292be2d3e0e69ae79b76c0d1b83de7b9b Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 16:20:23 +0100 Subject: [PATCH 10/25] remove built in colors from tailwind --- tailwind.config.ts | 109 +++++++++++++++++++++++---------------------- 1 file changed, 55 insertions(+), 54 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 56ecd135..cb318030 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -22,6 +22,60 @@ export default { "./node_modules/@shadcn/ui/components/**/*.{js,ts,jsx,tsx}", ], theme: { + colors: { + ...colors, + //"blue-200": "#daedfd", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + "1": "hsl(var(--chart-1))", + "2": "hsl(var(--chart-2))", + "3": "hsl(var(--chart-3))", + "4": "hsl(var(--chart-4))", + "5": "hsl(var(--chart-5))", + }, + sidebar: { + DEFAULT: "hsl(var(--sidebar-background))", + foreground: "hsl(var(--sidebar-foreground))", + primary: "hsl(var(--sidebar-primary))", + "primary-foreground": "hsl(var(--sidebar-primary-foreground))", + accent: "hsl(var(--sidebar-accent))", + "accent-foreground": "hsl(var(--sidebar-accent-foreground))", + border: "hsl(var(--sidebar-border))", + ring: "hsl(var(--sidebar-ring))", + }, + }, extend: { typography: () => ({ DEFAULT: { @@ -52,60 +106,7 @@ export default { boxShadow: { custom: "0px 0px 0px 1px #daedfd, 0px 4px 6px rgba(0, 0, 0, 0.1)", }, - colors: { - ...colors, - //"blue-200": "#daedfd", - background: "hsl(var(--background))", - foreground: "hsl(var(--foreground))", - card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", - }, - popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", - }, - primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", - }, - secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", - }, - muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", - }, - accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", - }, - destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", - }, - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", - chart: { - "1": "hsl(var(--chart-1))", - "2": "hsl(var(--chart-2))", - "3": "hsl(var(--chart-3))", - "4": "hsl(var(--chart-4))", - "5": "hsl(var(--chart-5))", - }, - sidebar: { - DEFAULT: "hsl(var(--sidebar-background))", - foreground: "hsl(var(--sidebar-foreground))", - primary: "hsl(var(--sidebar-primary))", - "primary-foreground": "hsl(var(--sidebar-primary-foreground))", - accent: "hsl(var(--sidebar-accent))", - "accent-foreground": "hsl(var(--sidebar-accent-foreground))", - border: "hsl(var(--sidebar-border))", - ring: "hsl(var(--sidebar-ring))", - }, - }, + fontFamily: { sans: ["Inter", "sans-serif"], }, From 7b165ed9c8664a7ae4f1ddb08437f057f54360ec Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 16:47:00 +0100 Subject: [PATCH 11/25] fix gray colors --- src/baseColors.json | 3 +- src/components/Header.tsx | 4 +-- src/design-tokens.css | 54 ++++++++++++++++++++---------- src/scripts/generateColorTokens.js | 2 +- tailwind.config.ts | 9 ++++- 5 files changed, 49 insertions(+), 23 deletions(-) diff --git a/src/baseColors.json b/src/baseColors.json index a8145cc2..aef6a7b0 100644 --- a/src/baseColors.json +++ b/src/baseColors.json @@ -1,5 +1,6 @@ { "background": "#d3c6aa", "foreground": "#1e2326", - "teal": "#c2e6ff" + "teal": "#c2e6ff", + "blue": "#0000FF" } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 3a5060f6..60dbc2ad 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -21,7 +21,7 @@ export function Header() {
Certificates
-
+
Help
-
+
{ +[ + ...Object.keys(baseColors).filter( + (key) => !["background", "foreground"].includes(key), + ), + "gray", +].forEach((colorName) => { ["100", "200", "300", "400", "500", "600", "700", "800", "900"].forEach( (shade) => { const colorId = `${colorName}-${shade}`; @@ -13,6 +18,8 @@ Object.keys(baseColors).forEach((colorName) => { ); }); +console.log(colors); + /** @type {import('tailwindcss').Config} */ export default { darkMode: ["class"], From 470e4373b7304bdb4733b412a3a6c26b02317d08 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 16:51:42 +0100 Subject: [PATCH 12/25] add aliases for white and black color in tailwind --- tailwind.config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tailwind.config.ts b/tailwind.config.ts index 36eccb9d..e803119c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -31,6 +31,8 @@ export default { theme: { colors: { ...colors, + white: "hsl(var(--gray-100))", + black: "hsl(var(--gray-900))", //"blue-200": "#daedfd", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", From 9d74895bd4394b621b8182d08d99ea1699f65891 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 16:53:46 +0100 Subject: [PATCH 13/25] set skeleton color --- src/components/ui/skeleton.tsx | 8 ++++---- src/index.css | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx index e3534338..ba03ba70 100644 --- a/src/components/ui/skeleton.tsx +++ b/src/components/ui/skeleton.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Skeleton({ className, @@ -6,10 +6,10 @@ function Skeleton({ }: React.HTMLAttributes) { return (
- ) + ); } -export { Skeleton } +export { Skeleton }; diff --git a/src/index.css b/src/index.css index 57827269..e80c07f8 100644 --- a/src/index.css +++ b/src/index.css @@ -36,8 +36,6 @@ body { --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; From 3c0dfc766111ccd346ba2a385cbbee169211c356 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 17:01:03 +0100 Subject: [PATCH 14/25] fix some shadcn theming --- src/baseColors.json | 3 ++- src/design-tokens.css | 18 ++++++++++++++++++ tailwind.config.ts | 28 ++++++++++++++-------------- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/baseColors.json b/src/baseColors.json index aef6a7b0..79e772fa 100644 --- a/src/baseColors.json +++ b/src/baseColors.json @@ -2,5 +2,6 @@ "background": "#d3c6aa", "foreground": "#1e2326", "teal": "#c2e6ff", - "blue": "#0000FF" + "blue": "#0000FF", + "red": "#F00" } diff --git a/src/design-tokens.css b/src/design-tokens.css index 713882b3..9805b60b 100644 --- a/src/design-tokens.css +++ b/src/design-tokens.css @@ -29,6 +29,15 @@ --blue-700: 223deg, 100%, 48%; --blue-800: 242deg, 100%, 49%; --blue-900: 244deg, 100%, 44%; + --red-100: 0deg, 0%, 100%; + --red-200: 10deg, 100%, 93%; + --red-300: 12deg, 100%, 81%; + --red-400: 11deg, 100%, 69%; + --red-500: 7deg, 100%, 58%; + --red-600: 0deg, 100%, 45%; + --red-700: 2deg, 97%, 38%; + --red-800: 6deg, 85%, 31%; + --red-900: 7deg, 79%, 28%; --background: var(--gray-100); --foreground: var(--gray-900); } @@ -64,6 +73,15 @@ --blue-700: 219deg, 47%, 76%; --blue-800: 219deg, 37%, 85%; --blue-900: 219deg, 33%, 90%; + --red-100: 9deg, 70%, 21%; + --red-200: 7deg, 78%, 27%; + --red-300: 4deg, 92%, 35%; + --red-400: 0deg, 100%, 43%; + --red-500: 5deg, 100%, 54%; + --red-600: 10deg, 100%, 66%; + --red-700: 12deg, 100%, 76%; + --red-800: 12deg, 100%, 87%; + --red-900: 11deg, 100%, 91%; --background: var(--gray-100); --foreground: var(--gray-900); } diff --git a/tailwind.config.ts b/tailwind.config.ts index e803119c..77491e1a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -37,32 +37,32 @@ export default { background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { - DEFAULT: "hsl(var(--card))", - foreground: "hsl(var(--card-foreground))", + DEFAULT: "hsl(var(--gray-200))", + foreground: "hsl(var(--gray-900))", }, popover: { - DEFAULT: "hsl(var(--popover))", - foreground: "hsl(var(--popover-foreground))", + DEFAULT: "hsl(var(--gray-200))", + foreground: "hsl(var(--gray-900))", }, primary: { - DEFAULT: "hsl(var(--primary))", - foreground: "hsl(var(--primary-foreground))", + DEFAULT: "hsl(var(--gray-100))", + foreground: "hsl(var(--gray-900))", }, secondary: { - DEFAULT: "hsl(var(--secondary))", - foreground: "hsl(var(--secondary-foreground))", + DEFAULT: "hsl(var(--gray-200))", + foreground: "hsl(var(--gray-900))", }, muted: { - DEFAULT: "hsl(var(--muted))", - foreground: "hsl(var(--muted-foreground))", + DEFAULT: "hsl(var(--gray-200))", + foreground: "hsl(var(--gray-800))", }, accent: { - DEFAULT: "hsl(var(--accent))", - foreground: "hsl(var(--accent-foreground))", + DEFAULT: "hsl(var(--blue-100))", + foreground: "hsl(var(--blue-900))", }, destructive: { - DEFAULT: "hsl(var(--destructive))", - foreground: "hsl(var(--destructive-foreground))", + DEFAULT: "hsl(var(--red-100))", + foreground: "hsl(var(--red-900))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", From 85506d3cfc5b7d31a09865e2b8c3fbfe2312e22c Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 17:02:05 +0100 Subject: [PATCH 15/25] remove unused css variables --- src/index.css | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/index.css b/src/index.css index e80c07f8..0d85beb8 100644 --- a/src/index.css +++ b/src/index.css @@ -28,18 +28,6 @@ body { @layer base { :root { - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; - --primary: 0 0% 9%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; From 114e4bb7e2e392cf9420793058a53f6d893ed67b Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 17:05:05 +0100 Subject: [PATCH 16/25] remove more unused stuff --- src/index.css | 3 --- tailwind.config.ts | 6 +++--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/index.css b/src/index.css index 0d85beb8..527b1c83 100644 --- a/src/index.css +++ b/src/index.css @@ -28,9 +28,6 @@ body { @layer base { :root { - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; diff --git a/tailwind.config.ts b/tailwind.config.ts index 77491e1a..4e40ce27 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -64,9 +64,9 @@ export default { DEFAULT: "hsl(var(--red-100))", foreground: "hsl(var(--red-900))", }, - border: "hsl(var(--border))", - input: "hsl(var(--input))", - ring: "hsl(var(--ring))", + border: "hsl(var(--gray-700))", + input: "hsl(var(--gray-700))", + ring: "hsl(var(--blue-700))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", From 9a36649d9be0651adf08494ccbab258a25844677 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 17:08:44 +0100 Subject: [PATCH 17/25] remove bunch of unused stuff --- src/index.css | 8 -------- tailwind.config.ts | 20 ++++++++++---------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/index.css b/src/index.css index 527b1c83..7d9ae0dd 100644 --- a/src/index.css +++ b/src/index.css @@ -34,14 +34,6 @@ body { --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; - --sidebar-primary: 240 5.9% 10%; - --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 240 4.8% 95.9%; - --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; - --sidebar-ring: 217.2 91.2% 59.8%; } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 4e40ce27..0628a85e 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -74,16 +74,16 @@ export default { "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, - sidebar: { - DEFAULT: "hsl(var(--sidebar-background))", - foreground: "hsl(var(--sidebar-foreground))", - primary: "hsl(var(--sidebar-primary))", - "primary-foreground": "hsl(var(--sidebar-primary-foreground))", - accent: "hsl(var(--sidebar-accent))", - "accent-foreground": "hsl(var(--sidebar-accent-foreground))", - border: "hsl(var(--sidebar-border))", - ring: "hsl(var(--sidebar-ring))", - }, + //sidebar: { + // DEFAULT: "hsl(var(--sidebar-background))", + // foreground: "hsl(var(--sidebar-foreground))", + // primary: "hsl(var(--sidebar-primary))", + // "primary-foreground": "hsl(var(--sidebar-primary-foreground))", + // accent: "hsl(var(--sidebar-accent))", + // "accent-foreground": "hsl(var(--sidebar-accent-foreground))", + // border: "hsl(var(--sidebar-border))", + // ring: "hsl(var(--sidebar-ring))", + //}, }, extend: { typography: () => ({ From e495bf9435a4c7f3808c9ca5d0f028b05d1928df Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 17:14:11 +0100 Subject: [PATCH 18/25] small fixes --- src/components/Header.tsx | 2 +- src/components/Sidebar.tsx | 4 ++-- src/index.css | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 60dbc2ad..0ba885bc 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -4,7 +4,7 @@ import { Separator } from "./ui/separator"; export function Header() { return ( -
+
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 547f2cf6..7b7cf1cc 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -18,7 +18,7 @@ export function Sidebar({ }) { if (loading) { return ( - + History Prompts @@ -37,7 +37,7 @@ export function Sidebar({ } return ( - + History Prompts diff --git a/src/index.css b/src/index.css index 7d9ae0dd..27286a6c 100644 --- a/src/index.css +++ b/src/index.css @@ -18,7 +18,7 @@ body { font-weight: 400; /* color-scheme: light dark; */ - background-color: #ffffff; + background-color: var(--background); font-synthesis: none; text-rendering: optimizeLegibility; From 431fca6dcd4c23a546cece49e64535f772195979 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Tue, 14 Jan 2025 18:37:08 +0100 Subject: [PATCH 19/25] fix menu item hover --- src/components/Header.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0ba885bc..341c4846 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -18,20 +18,20 @@ export function Header() {
-
+
Certificates
Download Certificate Security @@ -39,20 +39,20 @@ export function Header() {
-
+
Help
Continue Setup Copilot Setup @@ -61,7 +61,7 @@ export function Header() {
-
+
Date: Tue, 14 Jan 2025 18:42:56 +0100 Subject: [PATCH 20/25] . --- tailwind.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 0628a85e..8b4d2c8a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -45,7 +45,7 @@ export default { foreground: "hsl(var(--gray-900))", }, primary: { - DEFAULT: "hsl(var(--gray-100))", + DEFAULT: "hsl(var(--blue-200))", foreground: "hsl(var(--gray-900))", }, secondary: { From 4368cf1b9ce02215d2ea88b515f99d0d2100e4c7 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Wed, 15 Jan 2025 10:37:07 +0100 Subject: [PATCH 21/25] color fixes --- src/baseColors.json | 4 ++-- src/design-tokens.css | 36 ++++++++++++++++++------------------ 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/baseColors.json b/src/baseColors.json index 79e772fa..ed0863fe 100644 --- a/src/baseColors.json +++ b/src/baseColors.json @@ -1,6 +1,6 @@ { - "background": "#d3c6aa", - "foreground": "#1e2326", + "background": "#fff", + "foreground": "#000", "teal": "#c2e6ff", "blue": "#0000FF", "red": "#F00" diff --git a/src/design-tokens.css b/src/design-tokens.css index 9805b60b..971160df 100644 --- a/src/design-tokens.css +++ b/src/design-tokens.css @@ -2,15 +2,15 @@ :root { --background: 0deg, 0%, 100%; - --gray-100: 60deg, 33%, 99%; - --gray-200: 40deg, 52%, 89%; - --gray-300: 42deg, 29%, 73%; - --gray-400: 42deg, 15%, 62%; - --gray-500: 48deg, 8%, 52%; - --gray-600: 60deg, 5%, 44%; - --gray-700: 75deg, 2%, 36%; - --gray-800: 160deg, 2%, 29%; - --gray-900: 195deg, 3%, 25%; + --gray-100: 0deg, 0%, 100%; + --gray-200: 0deg, 0%, 91%; + --gray-300: 0deg, 1%, 77%; + --gray-400: 0deg, 0%, 65%; + --gray-500: 0deg, 0%, 54%; + --gray-600: 0deg, 0%, 45%; + --gray-700: 0deg, 1%, 37%; + --gray-800: 0deg, 1%, 29%; + --gray-900: 0deg, 1%, 26%; --teal-100: 180deg, 100%, 98%; --teal-200: 199deg, 100%, 90%; --teal-300: 205deg, 46%, 77%; @@ -46,15 +46,15 @@ @media (prefers-color-scheme: dark) { :root { --background: 0deg, 0%, 0%; - --gray-100: 200deg, 6%, 19%; - --gray-200: 180deg, 3%, 24%; - --gray-300: 120deg, 1%, 33%; - --gray-400: 60deg, 3%, 41%; - --gray-500: 46deg, 7%, 50%; - --gray-600: 42deg, 13%, 59%; - --gray-700: 41deg, 23%, 69%; - --gray-800: 41deg, 40%, 80%; - --gray-900: 41deg, 49%, 86%; + --gray-100: 0deg, 1%, 19%; + --gray-200: 0deg, 0%, 25%; + --gray-300: 0deg, 1%, 34%; + --gray-400: 0deg, 0%, 42%; + --gray-500: 0deg, 0%, 52%; + --gray-600: 0deg, 0%, 61%; + --gray-700: 0deg, 1%, 72%; + --gray-800: 0deg, 0%, 84%; + --gray-900: 0deg, 2%, 89%; --teal-100: 207deg, 9%, 19%; --teal-200: 208deg, 10%, 25%; --teal-300: 207deg, 10%, 34%; From dcf3271f9b35a055b5fe03c304bbe40f09a7dec6 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Wed, 15 Jan 2025 10:52:39 +0100 Subject: [PATCH 22/25] color adjustment --- src/baseColors.json | 6 ++- src/design-tokens.css | 104 ++++++++++++++++++++++++++++-------------- 2 files changed, 74 insertions(+), 36 deletions(-) diff --git a/src/baseColors.json b/src/baseColors.json index ed0863fe..1006ba15 100644 --- a/src/baseColors.json +++ b/src/baseColors.json @@ -2,6 +2,8 @@ "background": "#fff", "foreground": "#000", "teal": "#c2e6ff", - "blue": "#0000FF", - "red": "#F00" + "blue": "#5058FF", + "red": "#ff5058", + "orange": "#ffa050", + "green": "#58ff50" } diff --git a/src/design-tokens.css b/src/design-tokens.css index 971160df..93460c5c 100644 --- a/src/design-tokens.css +++ b/src/design-tokens.css @@ -21,23 +21,41 @@ --teal-800: 208deg, 10%, 29%; --teal-900: 208deg, 10%, 26%; --blue-100: 0deg, 0%, 100%; - --blue-200: 220deg, 29%, 92%; - --blue-300: 219deg, 43%, 79%; - --blue-400: 219deg, 53%, 70%; - --blue-500: 220deg, 66%, 62%; - --blue-600: 221deg, 79%, 55%; - --blue-700: 223deg, 100%, 48%; - --blue-800: 242deg, 100%, 49%; - --blue-900: 244deg, 100%, 44%; + --blue-200: 225deg, 42%, 93%; + --blue-300: 227deg, 64%, 83%; + --blue-400: 228deg, 84%, 76%; + --blue-500: 232deg, 100%, 71%; + --blue-600: 236deg, 100%, 66%; + --blue-700: 238deg, 72%, 57%; + --blue-800: 237deg, 53%, 44%; + --blue-900: 236deg, 52%, 38%; --red-100: 0deg, 0%, 100%; - --red-200: 10deg, 100%, 93%; - --red-300: 12deg, 100%, 81%; - --red-400: 11deg, 100%, 69%; - --red-500: 7deg, 100%, 58%; - --red-600: 0deg, 100%, 45%; - --red-700: 2deg, 97%, 38%; - --red-800: 6deg, 85%, 31%; - --red-900: 7deg, 79%, 28%; + --red-200: 2deg, 100%, 94%; + --red-300: 2deg, 100%, 84%; + --red-400: 0deg, 100%, 75%; + --red-500: 357deg, 93%, 63%; + --red-600: 357deg, 61%, 53%; + --red-700: 358deg, 50%, 44%; + --red-800: 359deg, 45%, 35%; + --red-900: 0deg, 43%, 30%; + --orange-100: 0deg, 0%, 100%; + --orange-200: 33deg, 100%, 88%; + --orange-300: 30deg, 100%, 70%; + --orange-400: 27deg, 79%, 59%; + --orange-500: 27deg, 54%, 50%; + --orange-600: 27deg, 50%, 42%; + --orange-700: 27deg, 47%, 35%; + --orange-800: 26deg, 42%, 28%; + --orange-900: 28deg, 40%, 24%; + --green-100: 120deg, 100%, 99%; + --green-200: 112deg, 100%, 78%; + --green-300: 117deg, 72%, 57%; + --green-400: 115deg, 51%, 49%; + --green-500: 114deg, 45%, 42%; + --green-600: 113deg, 40%, 36%; + --green-700: 111deg, 35%, 30%; + --green-800: 111deg, 31%, 25%; + --green-900: 111deg, 29%, 22%; --background: var(--gray-100); --foreground: var(--gray-900); } @@ -64,24 +82,42 @@ --teal-700: 205deg, 35%, 72%; --teal-800: 204deg, 69%, 83%; --teal-900: 203deg, 100%, 88%; - --blue-100: 241deg, 100%, 34%; - --blue-200: 243deg, 100%, 42%; - --blue-300: 229deg, 100%, 50%; - --blue-400: 221deg, 84%, 53%; - --blue-500: 220deg, 70%, 60%; - --blue-600: 219deg, 57%, 67%; - --blue-700: 219deg, 47%, 76%; - --blue-800: 219deg, 37%, 85%; - --blue-900: 219deg, 33%, 90%; - --red-100: 9deg, 70%, 21%; - --red-200: 7deg, 78%, 27%; - --red-300: 4deg, 92%, 35%; - --red-400: 0deg, 100%, 43%; - --red-500: 5deg, 100%, 54%; - --red-600: 10deg, 100%, 66%; - --red-700: 12deg, 100%, 76%; - --red-800: 12deg, 100%, 87%; - --red-900: 11deg, 100%, 91%; + --blue-100: 233deg, 47%, 27%; + --blue-200: 235deg, 51%, 36%; + --blue-300: 238deg, 58%, 52%; + --blue-400: 238deg, 96%, 65%; + --blue-500: 233deg, 100%, 69%; + --blue-600: 229deg, 91%, 74%; + --blue-700: 228deg, 71%, 80%; + --blue-800: 225deg, 52%, 87%; + --blue-900: 227deg, 42%, 91%; + --red-100: 0deg, 39%, 23%; + --red-200: 0deg, 42%, 29%; + --red-300: 359deg, 49%, 40%; + --red-400: 357deg, 53%, 49%; + --red-500: 357deg, 81%, 60%; + --red-600: 359deg, 100%, 71%; + --red-700: 1deg, 100%, 80%; + --red-800: 2deg, 100%, 89%; + --red-900: 2deg, 100%, 93%; + --orange-100: 26deg, 37%, 19%; + --orange-200: 26deg, 40%, 24%; + --orange-300: 27deg, 45%, 32%; + --orange-400: 27deg, 49%, 39%; + --orange-500: 27deg, 53%, 47%; + --orange-600: 27deg, 69%, 56%; + --orange-700: 28deg, 100%, 66%; + --orange-800: 32deg, 100%, 78%; + --orange-900: 33deg, 100%, 85%; + --green-100: 109deg, 26%, 17%; + --green-200: 108deg, 29%, 21%; + --green-300: 111deg, 34%, 28%; + --green-400: 112deg, 39%, 34%; + --green-500: 114deg, 44%, 40%; + --green-600: 115deg, 49%, 46%; + --green-700: 117deg, 61%, 54%; + --green-800: 117deg, 88%, 62%; + --green-900: 115deg, 100%, 72%; --background: var(--gray-100); --foreground: var(--gray-900); } From 73de93530f1ed162e2e5ed7993e69aa626e37438 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Wed, 15 Jan 2025 11:20:26 +0100 Subject: [PATCH 23/25] color fixes --- src/components/Chat.tsx | 4 ++-- src/components/Header.tsx | 6 +++--- src/components/ui/chat/chat-bubble.tsx | 5 ++--- tailwind.config.ts | 5 +---- 4 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx index 597c973e..815ee7b5 100644 --- a/src/components/Chat.tsx +++ b/src/components/Chat.tsx @@ -30,8 +30,8 @@ export function Chat() {
- - + + {sanitizeQuestionPrompt({ question: question?.message ?? "", answer: answer?.message ?? "", diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 341c4846..3c0b45bf 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -18,7 +18,7 @@ export function Header() {
-
+
Certificates
@@ -39,7 +39,7 @@ export function Header() {
-
+
Help
@@ -61,7 +61,7 @@ export function Header() {
-
+
= ({ const chatBubbleMessageVariants = cva("p-4", { variants: { variant: { - received: - "bg-secondary text-secondary-foreground rounded-r-lg rounded-tl-lg", - sent: "bg-primary text-primary-foreground rounded-l-lg rounded-tr-lg", + received: "rounded-r-lg rounded-tl-lg bg-teal-100", + sent: "rounded-l-lg rounded-tr-lg bg-teal-100", }, layout: { default: "", diff --git a/tailwind.config.ts b/tailwind.config.ts index 8b4d2c8a..18672a75 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -18,8 +18,6 @@ const colors = {}; ); }); -console.log(colors); - /** @type {import('tailwindcss').Config} */ export default { darkMode: ["class"], @@ -33,11 +31,10 @@ export default { ...colors, white: "hsl(var(--gray-100))", black: "hsl(var(--gray-900))", - //"blue-200": "#daedfd", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { - DEFAULT: "hsl(var(--gray-200))", + DEFAULT: "hsl(var(--gray-100))", foreground: "hsl(var(--gray-900))", }, popover: { From b58f93bbf6ea5cae373e0068c8a4f48cd7773435 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Wed, 15 Jan 2025 11:23:05 +0100 Subject: [PATCH 24/25] more color fixes --- src/components/ui/input.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index 58e1aea7..7300f320 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -12,7 +12,7 @@ const Input = React.forwardRef(
{icon} @@ -20,11 +20,11 @@ const Input = React.forwardRef( {...props} type="search" ref={ref} - className="w-full p-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50" + className="w-full p-2 placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 bg-white" />
); - } + }, ); Input.displayName = "Input"; From 1ba4193641e8d3ef3cab9178972d50d11d92e467 Mon Sep 17 00:00:00 2001 From: Daniel Kantor Date: Wed, 15 Jan 2025 11:25:15 +0100 Subject: [PATCH 25/25] more color fixes --- tailwind.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 18672a75..b2239f41 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -42,11 +42,11 @@ export default { foreground: "hsl(var(--gray-900))", }, primary: { - DEFAULT: "hsl(var(--blue-200))", + DEFAULT: "hsl(var(--blue-500))", foreground: "hsl(var(--gray-900))", }, secondary: { - DEFAULT: "hsl(var(--gray-200))", + DEFAULT: "hsl(var(--gray-500))", foreground: "hsl(var(--gray-900))", }, muted: {