[code health] (DRAFT) Replacing the values of properties with Paragon variables

1. In the ColorPicker component, I noticed that you can use the existing SCSS variables provided by the Paragon. It's a good idea to keep your code clean by using the provided Paragon variables as much as possible. The same problem with shadows in the Sheet component.

My screenshot is just a suggestion for replacing variables:

2. Move the $form-control-icon-width and $select-icon-padding variables to the appropriate variable file

3. In the alpha version of Paragon, after transferring files from Bootstrap, you need to check and remove unnecessary comments if necessary

For example:

4. Create a separate file for the IconButton component with variables and mixins and transfer there all the variables and mixins from the component’s styles file.

5. Move the variables from the ProductTour (Checkpoint) component's general styles file to the variables file. It would also be nice to remove the “Override PopperJS arrow placement” comments, since it seems to me that it is obvious that the styles of this component are overriding the bootstrap styles (due to the use of !important).

6. For an Scrollable component, it might be a good idea to add variables for key styles. We also have shadows provided by Paragon, which can also be used.

Start by reviewing the linked SCSS files for ColorPicker, Sheet, Form, IconButton, ProductTour, and Scrollable, along with the referenced variable files. Identify component-local values, variables, mixins, comments, and shadows that should be consolidated or replaced with existing Paragon variables. Done means the requested styles are reorganized consistently across all six areas without unnecessary Bootstrap comments.