Add custom icon and stroke color in default marker (#37)

<!--

Thank you for submitting a pull request!

Here's a checklist you might find useful.
[ ] There is an associated issue that is labelled
  'Bug' or 'help wanted' or is in the Community milestone
[ ] Code is up-to-date with the `main` branch
[ ] You've successfully run `npm test` locally
[ ] There are new or updated tests validating the change

-->

Fixes #
- `MMapDefaultMarker` updates `color` props - add new optional values
`iconDay` and `iconNight` for custom icon colors in light and dark
themes, and `strokeDay` and `strokeNight`, for custom stroke colors.
- New default `black` color for `MMapDefaultMarker`.

src/icons/icon-colors.generated.ts

@@ -1,5 +1,6 @@
 /** Don't edit manually only color names. Generated by script: ./tools/icons/generate-colors.ts */
 export const iconColors = {
+  black: {day: '#313133', night: '#D6FD63', iconNight: '#1D1E1F', strokeNight: '#1D1E1F'},
   darkgray: {day: '#ada9a6ff', night: '#6f737aff'},
   pink: {day: '#ff8f96ff', night: '#b96066ff'},
   seawave: {day: '#62c0c6ff', night: '#468286ff'},

src/markers/MMapDefaultMarker/index.ts

@@ -13,7 +13,7 @@ import smallPoiSVG from './backgrounds/small-poi.svg';
 
 import './index.css';
 
-const GLYPH_COLOR = '#FFFFFF';
+const GLYPH_DEFAULT_COLOR = '#FFFFFF';
 
 const MARKER_BASE_CLASS = 'mappable--default-marker-point';
 const MARKER_BASE_DARK_CLASS = 'mappable--default-marker-point_dark';
@@ -41,7 +41,14 @@ const MICRO_SIZE_MARKER_WIDTH = 14;
 
 const DISTANCE_BETWEEN_POPUP_AND_MARKER = 8;
 
-export type ThemesColor = {day: string; night: string};
+export type ThemesColor = {
+    day: string;
+    night: string;
+    iconDay?: string;
+    iconNight?: string;
+    strokeDay?: string;
+    strokeNight?: string;
+};
 export type MarkerColorProps = IconColor | ThemesColor;
 export type MarkerSizeProps = 'normal' | 'small' | 'micro';
 export type MarkerPopupProps = Omit<MMapPopupMarkerProps, keyof MMapMarkerProps>;
@@ -56,7 +63,7 @@ export type MMapDefaultMarkerProps = MMapMarkerProps & {
     popup?: MarkerPopupProps;
 };
 
-const defaultProps = Object.freeze({color: 'darkgray', size: 'small', staticHint: true});
+const defaultProps = Object.freeze({color: 'black', size: 'small', staticHint: true});
 type DefaultProps = typeof defaultProps;
 
 type BackgroundAndIcon = {background: HTMLElement; stroke: HTMLElement; icon: HTMLElement};
@@ -261,20 +268,27 @@ export class MMapDefaultMarker extends mappable.MMapComplexEntity<MMapDefaultMar
         const themeCtx = this._consumeContext(mappable.ThemeContext);
         const theme = themeCtx.theme;
 
-        const strokeColor = GLYPH_COLOR;
+        const strokeColor =
+            theme === 'light'
+                ? this._color.strokeDay ?? GLYPH_DEFAULT_COLOR
+                : this._color.strokeNight ?? GLYPH_DEFAULT_COLOR;
+        const iconColor =
+            theme === 'light'
+                ? this._color.iconDay ?? GLYPH_DEFAULT_COLOR
+                : this._color.iconNight ?? GLYPH_DEFAULT_COLOR;
         const backgroundColor = theme === 'light' ? this._color.day : this._color.night;
         this._markerElement.classList.toggle(MARKER_BASE_DARK_CLASS, theme === 'dark');
 
         switch (this._props.size) {
             case 'normal':
                 this._background.style.color = backgroundColor;
                 this._stroke.style.color = strokeColor;
-                this._icon.style.color = strokeColor;
+                this._icon.style.color = iconColor;
                 break;
             case 'small':
                 this._background.style.color = backgroundColor;
                 this._stroke.style.color = strokeColor;
-                this._icon.style.color = strokeColor;
+                this._icon.style.color = iconColor;
                 break;
             case 'micro':
                 this._background.style.color = backgroundColor;