From 48d26981dd7973bf1496fa055fcdfc14bae404c3 Mon Sep 17 00:00:00 2001 From: Adeola Adeyemo Date: Tue, 12 Aug 2025 12:39:28 +0100 Subject: [PATCH] chore: add disclaimer to custom css documentation Signed-off-by: Adeola Adeyemo --- docs/journeys/custom-css.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md index 1b363e0..522fd06 100644 --- a/docs/journeys/custom-css.md +++ b/docs/journeys/custom-css.md @@ -31,7 +31,7 @@ The new journey design (Concorde Journey) consists of the following building blo - **Blocks:** Journey blocks E.g., Text Input, Number Input, Products, etc. - **Components:** Reusable components from our concorde component library - [concorde-elements](https://github.com/epilot-dev/concorde-elements) E.g., Autocomplete, Input, Switch, Radio, Checkbox, etc. -> **Technical Details:** The HTML classes and IDs used are prefixed with `Concorde` to ensure consistency. Refer to the [Concorde HTML Layout Overview](/docs/ui-design/concorde-html-structure) for a comprehensive list. +> **Technical Details:** The HTML classes and IDs used are prefixed with `Concorde` to ensure consistency. Refer to the [Concorde HTML Layout Overview](/docs/ui-design/concorde-html-structure) for a comprehensive list. **Note**: Do not use auto-generated class names in your custom CSS e.g `._edit-button_ge242f24`, `._circle_2342for` as these are subject to change quite often. ### Concorde Design Tokens @@ -519,6 +519,7 @@ We’ve started supporting this migration process and recommend moving your jour **Q: Will my custom CSS changes be maintained with future updates?** **A:** Custom CSS rules will remain effective as long as you adhere to the supported class and variable guidelines. We are committed to maintaining backward compatibility, but changes to the core design may require adjustments. We will communicate any necessary changes in advance. +**Note**: Do not use auto-generated class names in your custom CSS e.g `._edit-button_ge242f24`, `._circle_2342for` as these are subject to change quite often. **Q: (Advanced) What if I want to apply changes only to a specific journey?** **A:** It is currently possible to apply styles that apply to a specific step or block in a journey by using the HTML id selectors to target sections on a journey. Review the [Concorde HTML Layout Overview](/docs/ui-design/concorde-html-structure) to understand how to find these IDs. This ensures your styles won’t affect other journeys. We strongly recommend you use HTML id selectors as little as possible to avoid conflicts across multiple journeys.